fix: Add flex gap to overflow list calculations (#3021)

Adds Flexbox `gap` to overflow list calculations so that a the overflow list doesn't render outside the container. This is more noticeable with higher gap values.

Fixes #3020

[category:Components]

modules/react/collection/lib/useOverflowListModel.tsx

@@ -6,10 +6,11 @@ import {Item} from './useBaseListModel';
 
 export function getHiddenIds(
   containerWidth: number,
+  containerGap: number,
   overflowTargetWidth: number,
   itemWidthCache: Record<string, number>,
   selectedIds: string[] | 'all',
-  items?: Item<any>[]
+  items: Item<any>[]
 ): string[] {
   /** Allows us to prioritize showing the selected item */
   let selectedKey: undefined | string;
@@ -18,17 +19,22 @@ export function getHiddenIds(
   /** Tally ids that won't fit inside the container. These will be used by components to hide
    * elements that won't fit in the container */
   const hiddenIds: string[] = [];
+  /** Track if gap should be calculated since gap doesn't apply to the width of the first item, only
+   * consecutive items */
+  let shouldAddGap = false;
+
   if (selectedIds !== 'all' && selectedIds.length) {
-    if (items?.length) {
+    if (items.length) {
       // If selectedIds[0] is not in items, use the first id from items
       selectedKey = items.find(item => item.id === selectedIds[0]) ? selectedIds[0] : items[0].id;
-    } else {
-      selectedKey = selectedIds[0];
     }
   }
 
   if (
-    Object.keys(itemWidthCache).reduce((sum, key) => sum + itemWidthCache[key], 0) <= containerWidth
+    Object.keys(itemWidthCache).reduce(
+      (sum, key, index) => sum + itemWidthCache[key] + (index > 0 ? containerGap : 0),
+      0
+    ) <= containerWidth
   ) {
     // All items fit, return empty array
     return [];
@@ -39,14 +45,16 @@ export function getHiddenIds(
     } else {
       // at least the selected item and overflow target fit. Update our itemWidth with the sum
       itemWidth += itemWidthCache[selectedKey] + overflowTargetWidth;
+      shouldAddGap = true;
     }
   } else {
     itemWidth += overflowTargetWidth;
   }
 
   for (const key in itemWidthCache) {
     if (key !== selectedKey) {
-      itemWidth += itemWidthCache[key];
+      itemWidth += itemWidthCache[key] + (shouldAddGap ? containerGap : 0);
+      shouldAddGap = true;
       if (itemWidth > containerWidth) {
         hiddenIds.push(key);
       }
@@ -75,6 +83,7 @@ export const useOverflowListModel = createModelHook({
   const [hiddenIds, setHiddenIds] = React.useState(config.initialHiddenIds);
   const [itemWidthCache, setItemWidthCache] = React.useState<Record<string, number>>({});
   const [containerWidth, setContainerWidth] = React.useState(0);
+  const [containerGap, setContainerGap] = React.useState(0);
   const containerWidthRef = React.useRef(0);
   const itemWidthCacheRef = React.useRef(itemWidthCache);
   const [overflowTargetWidth, setOverflowTargetWidth] = React.useState(0);
@@ -96,6 +105,7 @@ export const useOverflowListModel = createModelHook({
     hiddenIds: internalHiddenIds,
     itemWidthCache,
     containerWidth,
+    containerGap,
     overflowTargetWidth,
   };
 
@@ -105,6 +115,7 @@ export const useOverflowListModel = createModelHook({
       const {selectedIds} = model.selection.select(data.id, state);
       const ids = getHiddenIds(
         containerWidthRef.current,
+        containerGap,
         overflowTargetWidthRef.current,
         itemWidthCacheRef.current,
         selectedIds,
@@ -120,6 +131,21 @@ export const useOverflowListModel = createModelHook({
 
       const ids = getHiddenIds(
         containerWidthRef.current,
+        containerGap,
+        overflowTargetWidthRef.current,
+        itemWidthCacheRef.current,
+        state.selectedIds,
+        config.items
+      );
+
+      setHiddenIds(ids);
+    },
+    setContainerGap(data: {size: number}) {
+      setContainerGap(data.size);
+
+      const ids = getHiddenIds(
+        containerWidthRef.current,
+        data.size,
         overflowTargetWidthRef.current,
         itemWidthCacheRef.current,
         state.selectedIds,
@@ -142,6 +168,7 @@ export const useOverflowListModel = createModelHook({
 
       const ids = getHiddenIds(
         containerWidthRef.current,
+        containerGap,
         overflowTargetWidthRef.current,
         itemWidthCacheRef.current,
         state.selectedIds,
@@ -158,6 +185,7 @@ export const useOverflowListModel = createModelHook({
 
       const ids = getHiddenIds(
         containerWidthRef.current,
+        containerGap,
         overflowTargetWidthRef.current,
         itemWidthCacheRef.current,
         state.selectedIds !== 'all'

modules/react/collection/spec/useOverflowModel.spec.tsx

@@ -4,41 +4,89 @@ describe('useOverflowModel', () => {
   describe('getHiddenIds', () => {
     const itemWidthCache = {
       first: 100,
-      second: 100,
-      third: 100,
-      fourth: 100,
+      second: 150,
+      third: 200,
+      fourth: 250,
     };
     const overflowTargetWidth = 100;
 
-    const io = [
+    [
       {
         containerWidth: 100,
+        gap: 0,
         selected: 'first',
         hiddenIds: ['first', 'second', 'third', 'fourth'],
       },
       {
         containerWidth: 199,
+        gap: 0,
         selected: 'first',
         hiddenIds: ['first', 'second', 'third', 'fourth'],
       },
       {
         containerWidth: 200,
+        gap: 0,
         selected: 'first',
         hiddenIds: ['second', 'third', 'fourth'],
       },
-      {containerWidth: 400, selected: 'first', hiddenIds: []},
-      {containerWidth: 399, selected: 'first', hiddenIds: ['third', 'fourth']},
+      {containerWidth: 700, gap: 0, selected: 'first', hiddenIds: []},
+      {containerWidth: 350, gap: 0, selected: 'first', hiddenIds: ['third', 'fourth']},
+      {containerWidth: 549, gap: 0, selected: 'first', hiddenIds: ['third', 'fourth']},
+      {containerWidth: 550, gap: 0, selected: 'first', hiddenIds: ['fourth']},
+      {
+        containerWidth: 250,
+        gap: 0,
+        selected: 'second',
+        hiddenIds: ['first', 'third', 'fourth'],
+      },
+      // gap
+      {
+        containerWidth: 100,
+        gap: 10,
+        selected: 'first',
+        hiddenIds: ['first', 'second', 'third', 'fourth'],
+      },
+      {
+        containerWidth: 199,
+        gap: 10,
+        selected: 'first',
+        hiddenIds: ['first', 'second', 'third', 'fourth'],
+      },
       {
         containerWidth: 200,
+        gap: 10,
+        selected: 'first',
+        hiddenIds: ['second', 'third', 'fourth'],
+      },
+      {containerWidth: 729, gap: 10, selected: 'first', hiddenIds: ['fourth']},
+      {containerWidth: 730, gap: 10, selected: 'first', hiddenIds: []},
+      {containerWidth: 360, gap: 10, selected: 'first', hiddenIds: ['third', 'fourth']},
+      {containerWidth: 559, gap: 10, selected: 'first', hiddenIds: ['third', 'fourth']},
+      {containerWidth: 570, gap: 10, selected: 'first', hiddenIds: ['fourth']},
+      {
+        containerWidth: 250,
+        gap: 10,
         selected: 'second',
         hiddenIds: ['first', 'third', 'fourth'],
       },
-    ].forEach(({containerWidth, hiddenIds, selected}) => {
+    ].forEach(({containerWidth, hiddenIds, gap, selected}) => {
       it(`when containerWidth is ${containerWidth} and selected is '${selected}' should contain hiddenIds [${hiddenIds.join(
         ', '
       )}] `, () => {
         expect(
-          getHiddenIds(containerWidth, overflowTargetWidth, itemWidthCache, [selected])
+          getHiddenIds(
+            containerWidth,
+            gap,
+            overflowTargetWidth,
+            itemWidthCache,
+            [selected],
+            [
+              {id: 'first', value: 'first', index: 0, textValue: 'first'},
+              {id: 'second', value: 'second', index: 1, textValue: 'second'},
+              {id: 'third', value: 'third', index: 2, textValue: 'third'},
+              {id: 'fourth', value: 'fourth', index: 3, textValue: 'fourth'},
+            ]
+          )
         ).toEqual(hiddenIds);
       });
     });