fix(SelectionBar): Adapt max actions to wide device

With the French translation, I encountered a spacing issue with the action lists on wide devices. I added a wide breakpoint to have more granularity in the maximum action displayed. Breakpoints are specific to the selection bar because isTiny, isSmall, isMedium, isLarge will be deprecated in useBreakpoint

react/SelectionBar/index.jsx

@@ -13,7 +13,7 @@ import useBreakpoints from '../hooks/useBreakpoints'
 import styles from './styles.styl'
 import SelectionBarAction from './SelectionBarAction'
 import SelectionBarMore from './SelectionBarMore'
-import { computeMaxAction } from './helpers'
+import useMaxActions from './useMaxActions'
 
 /*
 
@@ -37,7 +37,10 @@ const SelectionBar = ({
   selected,
   hideSelectionBar,
   maxAction = {
-    isLarge: 6,
+    isWide: 6,
+    isLarge: 5,
+    isMedium: 8,
+    isSmall: 8,
     isTiny: 3
   }
 }) => {
@@ -61,7 +64,7 @@ const SelectionBar = ({
       ...actions[actionName]
     }))
 
-  const maxActionDisplayed = computeMaxAction(maxAction, breakpoints)
+  const maxActionDisplayed = useMaxActions(maxAction)
 
   // This component is always rendered but hidden with CSS if there is no selection
   // That is why we do not use useSetFlagship API here because that hook can not accept changing values

react/SelectionBar/useMaxActions.jsx

@@ -0,0 +1,36 @@
+import { useState } from 'react'
+import throttle from 'lodash/throttle'
+
+import breakpointDefs, { getBreakpointsStatus } from '../helpers/breakpoints'
+import useEventListener from '../hooks/useEventListener'
+import { computeMaxAction } from './helpers'
+
+const huge = 1400
+const large = 1200
+
+const breakpoints = {
+  isHuge: [large + 1, huge],
+  ...breakpointDefs
+}
+
+const getCurrentMaxAction = maxAction =>
+  computeMaxAction(maxAction, getBreakpointsStatus(breakpoints))
+
+/**
+ * Compute the maximum number of actions to display according to the breakpoint
+ * @param {number|object} maxAction an number or a set of maximum for each breakpoint
+ * @returns the maximum number or undefined if there is no matching result
+ */
+const useMaxActions = maxAction => {
+  const [currentMax, setCurrentMax] = useState(getCurrentMaxAction(maxAction))
+
+  const handleResize = throttle(() => {
+    setCurrentMax(getCurrentMaxAction(maxAction))
+  }, 100)
+
+  useEventListener(window, 'resize', handleResize)
+
+  return currentMax
+}
+
+export default useMaxActions