@salt-ds/lab 1.0.0-alpha.7 → 1.0.0-alpha.70

package/dist-cjs/responsive/useInstantCollapse.js

@@ -0,0 +1,199 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var react = require('react');
+var overflowUtils = require('./overflowUtils.js');
+
+const newlyCollapsed = (overflowItems) => overflowItems.some(
+  (item) => item.collapsible === "instant" && item.collapsed && item.fullSize === null
+);
+const findItemToCollapse = (items) => {
+  for (let i = items.length - 1; i >= 0; i--) {
+    const item = items[i];
+    if (item.collapsible === "instant" && !item.collapsed) {
+      return item;
+    }
+  }
+};
+const uncollapseItems = (items, containerSize) => {
+  const visibleContentSize = items.reduce(overflowUtils.allExceptOverflowIndicator, 0);
+  let diff = containerSize - visibleContentSize;
+  const collapsed = items.filter((item) => item.collapsible === "instant" && item.collapsed).sort((i1, i2) => i2.index - i1.index);
+  const result = [];
+  while (collapsed.length) {
+    const item = collapsed.pop();
+    const itemDiff = (item.fullSize ?? 0) - item.size;
+    if (diff >= itemDiff) {
+      result.push({
+        ...item,
+        collapsed: false,
+        size: item.fullSize,
+        fullSize: null
+      });
+      diff = diff - itemDiff;
+    } else {
+      break;
+    }
+  }
+  return result;
+};
+const useInstantCollapse = ({
+  collectionHook,
+  hasOverflowedItems,
+  innerContainerSize = 0,
+  overflowContainerRef: ref,
+  overflowItemsRef,
+  orientation
+}) => {
+  const minMaxSizes = react.useMemo(() => /* @__PURE__ */ new Map(), []);
+  const { dispatch } = collectionHook;
+  const updateCollapse = react.useCallback(
+    (containerSize, renderedSize) => {
+      const { current: managedItems } = overflowItemsRef;
+      if (renderedSize && containerSize < renderedSize) {
+        const overflowItem = findItemToCollapse(managedItems);
+        if (overflowItem) {
+          dispatch({
+            type: "collapse-instant-item",
+            overflowItem
+          });
+        }
+      } else {
+        const uncollapsedItems = uncollapseItems(managedItems, containerSize);
+        if (uncollapsedItems.length) {
+          dispatch({
+            type: "update-items",
+            overflowItems: uncollapsedItems
+          });
+        }
+      }
+    },
+    [dispatch, overflowItemsRef]
+  );
+  const handleResize = react.useCallback(
+    (size, containerHasGrown) => {
+      const { current: managedItems } = overflowItemsRef;
+      const { isOverflowing: willOverflow } = overflowUtils.measureContainerOverflow(
+        ref,
+        orientation
+      );
+      const collapsedItems = managedItems.filter((item) => item.collapsed);
+      if (willOverflow && !hasOverflowedItems) {
+        const overflowItem = findItemToCollapse(managedItems);
+        if (overflowItem) {
+          dispatch({
+            type: "collapse-instant-item",
+            overflowItem
+          });
+        }
+      } else if (collapsedItems.length > 0 && containerHasGrown) {
+        updateCollapse(size, null);
+      } else if (willOverflow && hasOverflowedItems) {
+        const renderedSize = managedItems.reduce(overflowUtils.addAll, 0);
+        updateCollapse(size, renderedSize);
+      }
+    },
+    [
+      dispatch,
+      hasOverflowedItems,
+      orientation,
+      overflowItemsRef,
+      ref,
+      updateCollapse
+    ]
+  );
+  const resetMeasurements = react.useCallback(
+    (isOverflowing) => {
+      const { current: managedItems } = overflowItemsRef;
+      if (isOverflowing) {
+        const overflowItem = findItemToCollapse(managedItems);
+        if (overflowItem) {
+          dispatch({
+            type: "collapse-instant-item",
+            overflowItem
+          });
+          return true;
+        }
+        return false;
+      }
+    },
+    [dispatch, overflowItemsRef]
+  );
+  const setMinSize = react.useCallback(
+    (item, size) => {
+      const minMaxSize = minMaxSizes.get(item.index);
+      if (minMaxSize) {
+        minMaxSize.minSize = size;
+      } else {
+        minMaxSizes.set(item.index, { maxSize: null, minSize: size });
+      }
+    },
+    [minMaxSizes]
+  );
+  const measureCollapsedItem = react.useCallback(() => {
+    const { current: managedItems } = overflowItemsRef;
+    const dimension = orientation === "horizontal" ? "width" : "height";
+    const [collapsedItem] = managedItems.filter(
+      (item) => item.collapsible === "instant" && item.collapsed
+    );
+    console.log(`measureCollapsedItem ${collapsedItem.index}`);
+    if (collapsedItem.fullSize === null) {
+      const target = overflowUtils.getElementForItem(ref, collapsedItem);
+      if (target) {
+        const collapsedSize = overflowUtils.measureElementSize(target, dimension);
+        const managedItem = findItemToCollapse(managedItems);
+        const diff = collapsedItem.size - collapsedSize;
+        const renderedSize = managedItems.reduce(overflowUtils.addAll, 0) - diff;
+        const updates = [];
+        if (renderedSize > innerContainerSize && managedItem) {
+          console.log(`next item to collapse ${managedItem.index}`);
+          updates.push(
+            {
+              ...collapsedItem,
+              fullSize: collapsedItem.size,
+              size: collapsedSize
+            },
+            {
+              ...managedItem,
+              collapsed: true
+            }
+          );
+        } else {
+          updates.push({
+            ...collapsedItem,
+            fullSize: collapsedItem.size,
+            size: collapsedSize
+          });
+        }
+        dispatch({
+          type: "update-items",
+          overflowItems: updates
+        });
+        setMinSize(collapsedItem, collapsedSize);
+      }
+    } else {
+      return -1;
+    }
+  }, [
+    dispatch,
+    innerContainerSize,
+    orientation,
+    overflowItemsRef,
+    ref,
+    setMinSize
+  ]);
+  core.useIsomorphicLayoutEffect(() => {
+    const { current: managedItems } = overflowItemsRef;
+    const newlyCollapsedItem = newlyCollapsed(managedItems);
+    if (newlyCollapsedItem) {
+      measureCollapsedItem();
+    }
+  });
+  return {
+    onResize: handleResize,
+    resetMeasurements
+  };
+};
+
+exports.useInstantCollapse = useInstantCollapse;
+//# sourceMappingURL=useInstantCollapse.js.map

package/dist-cjs/responsive/useInstantCollapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInstantCollapse.js","sources":["../src/responsive/useInstantCollapse.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useCallback, useMemo } from \"react\";\nimport type {\n  InstantCollapseHookResult,\n  OverflowHookProps,\n  OverflowItem,\n} from \"./overflowTypes\";\nimport {\n  addAll,\n  allExceptOverflowIndicator,\n  getElementForItem,\n  measureContainerOverflow,\n  measureElementSize,\n} from \"./overflowUtils\";\n\ntype MinMaxSize = {\n  maxSize: number | null;\n  minSize: number | null;\n};\n\nconst newlyCollapsed = (overflowItems: OverflowItem[]) =>\n  overflowItems.some(\n    (item) =>\n      item.collapsible === \"instant\" &&\n      item.collapsed &&\n      item.fullSize === null,\n  );\n\nconst findItemToCollapse = (items: OverflowItem[]) => {\n  for (let i = items.length - 1; i >= 0; i--) {\n    const item = items[i];\n    if (item.collapsible === \"instant\" && !item.collapsed) {\n      // We only ever collapse 1 item at a time. We don'tknow how much space\n      //this has saved until it re-renders and we can re-measure\n      return item;\n    }\n  }\n};\n\nconst uncollapseItems = (items: OverflowItem[], containerSize: number) => {\n  const visibleContentSize = items.reduce(allExceptOverflowIndicator, 0);\n  let diff = containerSize - visibleContentSize;\n\n  const collapsed = items\n    .filter((item) => item.collapsible === \"instant\" && item.collapsed)\n    .sort((i1, i2) => i2.index - i1.index);\n  // find the next collapsed item, see how much extra space it would\n  // occupy if restored. If we have enough space, restore it.\n  const result: OverflowItem[] = [];\n  while (collapsed.length) {\n    const item = collapsed.pop() as OverflowItem;\n    const itemDiff = (item.fullSize ?? 0) - item.size;\n    if (diff >= itemDiff) {\n      result.push({\n        ...item,\n        collapsed: false,\n        size: item.fullSize as number,\n        fullSize: null,\n      });\n      diff = diff - itemDiff;\n    } else {\n      break;\n    }\n  }\n  return result;\n};\n\nexport const useInstantCollapse = ({\n  collectionHook,\n  hasOverflowedItems,\n  innerContainerSize = 0,\n  overflowContainerRef: ref,\n  overflowItemsRef,\n  orientation,\n}: OverflowHookProps): InstantCollapseHookResult => {\n  const minMaxSizes = useMemo(() => new Map<number, MinMaxSize>(), []);\n  const { dispatch } = collectionHook;\n\n  const updateCollapse = useCallback(\n    (containerSize: number, renderedSize: number | null) => {\n      const { current: managedItems } = overflowItemsRef;\n      if (renderedSize && containerSize < renderedSize) {\n        const overflowItem = findItemToCollapse(managedItems);\n        if (overflowItem) {\n          dispatch({\n            type: \"collapse-instant-item\",\n            overflowItem,\n          });\n        }\n      } else {\n        const uncollapsedItems = uncollapseItems(managedItems, containerSize);\n        if (uncollapsedItems.length) {\n          dispatch({\n            type: \"update-items\",\n            overflowItems: uncollapsedItems,\n          });\n        }\n      }\n    },\n    [dispatch, overflowItemsRef],\n  );\n\n  const handleResize = useCallback(\n    (size: number, containerHasGrown?: boolean) => {\n      const { current: managedItems } = overflowItemsRef;\n      const { isOverflowing: willOverflow } = measureContainerOverflow(\n        ref,\n        orientation,\n      );\n\n      const collapsedItems = managedItems.filter((item) => item.collapsed);\n\n      if (willOverflow && !hasOverflowedItems) {\n        const overflowItem = findItemToCollapse(managedItems);\n        if (overflowItem) {\n          dispatch({\n            type: \"collapse-instant-item\",\n            overflowItem,\n          });\n        }\n      } else if (collapsedItems.length > 0 && containerHasGrown) {\n        // Note: it must have been previously overflowing, too\n        // check to see if we can reinstate one or more items\n        updateCollapse(size, null);\n      } else if (willOverflow && hasOverflowedItems) {\n        // Note: container must have shrunk\n        // still overflowing, possibly more overflowing than before\n        const renderedSize = managedItems.reduce(addAll, 0);\n        updateCollapse(size, renderedSize);\n      }\n    },\n    [\n      dispatch,\n      hasOverflowedItems,\n      orientation,\n      overflowItemsRef,\n      ref,\n      updateCollapse,\n    ],\n  );\n\n  const resetMeasurements = useCallback(\n    (isOverflowing?: boolean) => {\n      const { current: managedItems } = overflowItemsRef;\n      if (isOverflowing) {\n        const overflowItem = findItemToCollapse(managedItems);\n        if (overflowItem) {\n          dispatch({\n            type: \"collapse-instant-item\",\n            overflowItem,\n          });\n          return true;\n        }\n        return false;\n      }\n    },\n    [dispatch, overflowItemsRef],\n  );\n\n  const setMinSize = useCallback(\n    (item: OverflowItem, size: number) => {\n      const minMaxSize = minMaxSizes.get(item.index);\n      if (minMaxSize) {\n        minMaxSize.minSize = size;\n      } else {\n        minMaxSizes.set(item.index, { maxSize: null, minSize: size });\n      }\n    },\n    [minMaxSizes],\n  );\n\n  const measureCollapsedItem = useCallback(() => {\n    const { current: managedItems } = overflowItemsRef;\n    const dimension = orientation === \"horizontal\" ? \"width\" : \"height\";\n    const [collapsedItem] = managedItems.filter(\n      (item) => item.collapsible === \"instant\" && item.collapsed,\n    );\n    console.log(`measureCollapsedItem ${collapsedItem.index}`);\n    if (collapsedItem.fullSize === null) {\n      const target = getElementForItem(ref, collapsedItem);\n      if (target) {\n        const collapsedSize = measureElementSize(target, dimension);\n        const managedItem = findItemToCollapse(managedItems);\n        const diff = collapsedItem.size - collapsedSize;\n        const renderedSize = managedItems.reduce(addAll, 0) - diff;\n        const updates = [];\n        if (renderedSize > innerContainerSize && managedItem) {\n          console.log(`next item to collapse ${managedItem.index}`);\n          updates.push(\n            {\n              ...collapsedItem,\n              fullSize: collapsedItem.size,\n              size: collapsedSize,\n            },\n            {\n              ...managedItem,\n              collapsed: true,\n            },\n          );\n        } else {\n          updates.push({\n            ...collapsedItem,\n            fullSize: collapsedItem.size,\n            size: collapsedSize,\n          });\n        }\n        dispatch({\n          type: \"update-items\",\n          overflowItems: updates,\n        });\n        setMinSize(collapsedItem, collapsedSize);\n      }\n    } else {\n      return -1;\n    }\n  }, [\n    dispatch,\n    innerContainerSize,\n    orientation,\n    overflowItemsRef,\n    ref,\n    setMinSize,\n  ]);\n\n  useIsomorphicLayoutEffect(() => {\n    const { current: managedItems } = overflowItemsRef;\n    const newlyCollapsedItem = newlyCollapsed(managedItems);\n    if (newlyCollapsedItem) {\n      measureCollapsedItem();\n    }\n  });\n\n  return {\n    onResize: handleResize,\n    resetMeasurements,\n  };\n};\n"],"names":["allExceptOverflowIndicator","useMemo","useCallback","measureContainerOverflow","addAll","getElementForItem","measureElementSize","useIsomorphicLayoutEffect"],"mappings":"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"}

package/dist-cjs/responsive/useOverflow.js

@@ -0,0 +1,261 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var react = require('react');
+var partition = require('../utils/partition.js');
+var overflowUtils = require('./overflowUtils.js');
+
+const NO_OVERFLOW_INDICATOR = { size: 0 };
+const getPriority = (item) => item.priority;
+const popNextOverflowedItem = (items) => {
+  const minPriority = Math.min(...items.map(getPriority));
+  for (let i = 0; i < items.length; i++) {
+    if (!items[i].isOverflowIndicator && items[i].priority === minPriority) {
+      return items.splice(i, 1)[0];
+    }
+  }
+  return null;
+};
+const useOverflow = ({
+  collectionHook: { dispatch },
+  id: idProp,
+  label = "Toolbar",
+  overflowItemsRef,
+  overflowContainerRef,
+  orientation
+}) => {
+  const innerContainerSizeRef = react.useRef(0);
+  const overflowIndicatorSize = react.useRef(0);
+  const id = core.useIdMemo(idProp);
+  const setContainerMinSize = react.useCallback(
+    (size) => {
+      if (overflowContainerRef.current) {
+        const isHorizontal = orientation === "horizontal";
+        if (size === void 0) {
+          const dimension = isHorizontal ? "width" : "height";
+          ({ [dimension]: size } = overflowContainerRef.current.getBoundingClientRect());
+        }
+        if (typeof size === "number") {
+          const styleDimension = isHorizontal ? "minWidth" : "minHeight";
+          overflowContainerRef.current.style[styleDimension] = `${size}px`;
+        }
+      }
+    },
+    [orientation, overflowContainerRef]
+  );
+  const getAllOverflowedItems = react.useCallback(
+    (renderedSize, availableSpace) => {
+      const { current: allItems } = overflowItemsRef;
+      const overflowedItems = [];
+      const items = allItems.slice();
+      while (renderedSize > availableSpace) {
+        const overflowedItem = overflowUtils.popNextItemByPriority(items);
+        if (overflowedItem === null) {
+          break;
+        }
+        renderedSize -= overflowedItem.size;
+        overflowedItems.push({
+          ...overflowedItem,
+          overflowed: true
+        });
+      }
+      return overflowedItems;
+    },
+    [overflowItemsRef]
+  );
+  const getOverflowedItems = react.useCallback(
+    (visibleContentSize, containerSize) => {
+      const newlyOverflowedItems = [];
+      const { current: managedItems } = overflowItemsRef;
+      const visibleItems = managedItems.filter(overflowUtils.notOverflowed);
+      while (visibleContentSize > containerSize) {
+        const overflowedItem = overflowUtils.popNextItemByPriority(visibleItems);
+        if (overflowedItem === null) {
+          break;
+        }
+        visibleContentSize -= overflowedItem.size;
+        newlyOverflowedItems.push({
+          ...overflowedItem,
+          overflowed: true
+        });
+      }
+      return newlyOverflowedItems;
+    },
+    [overflowItemsRef]
+  );
+  const getReinstatedItems = react.useCallback(
+    (containerSize) => {
+      const reinstatedItems = [];
+      const { current: managedItems } = overflowItemsRef;
+      const [overflowedItems, visibleItems] = partition.partition(
+        managedItems,
+        overflowUtils.isOverflowed
+      );
+      const overflowCount = overflowedItems.length;
+      let visibleContentSize = visibleItems.reduce(
+        overflowUtils.allExceptOverflowIndicator,
+        0
+      );
+      let diff = containerSize - visibleContentSize;
+      const { size: overflowSize = 0 } = overflowUtils.getOverflowIndicator(managedItems) || NO_OVERFLOW_INDICATOR;
+      const totalOverflowedSize = overflowedItems.reduce(
+        (sum, item) => sum + item.size,
+        0
+      );
+      if (totalOverflowedSize <= diff) {
+        reinstatedItems.push(
+          ...overflowedItems.map((item) => ({ ...item, overflowed: false }))
+        );
+      } else {
+        while (overflowedItems.length > 0) {
+          const nextItem = popNextOverflowedItem(overflowedItems);
+          if (nextItem && diff >= nextItem.size) {
+            if (overflowedItems.length === 0 || diff >= nextItem.size + overflowSize) {
+              visibleContentSize += nextItem.size;
+              diff = diff - nextItem.size;
+              reinstatedItems.push({
+                ...nextItem,
+                overflowed: false
+              });
+            } else {
+              break;
+            }
+          } else {
+            break;
+          }
+        }
+      }
+      return [overflowCount, reinstatedItems];
+    },
+    [overflowItemsRef]
+  );
+  const resetMeasurements = react.useCallback(
+    (isOverflowing, innerContainerSize) => {
+      if (isOverflowing) {
+        const { current: managedItems } = overflowItemsRef;
+        const renderedSize = managedItems.reduce(overflowUtils.allExceptOverflowIndicator, 0);
+        const overflowIndicator = managedItems.find(
+          (i) => i.isOverflowIndicator
+        );
+        if (overflowIndicator && overflowIndicator.size !== overflowIndicatorSize.current) {
+          overflowIndicatorSize.current = overflowIndicator.size;
+          setContainerMinSize(overflowIndicator.size);
+        }
+        const existingOverflow = managedItems.filter(overflowUtils.isOverflowed);
+        const updates = getAllOverflowedItems(
+          renderedSize,
+          innerContainerSize - overflowIndicatorSize.current
+        );
+        existingOverflow.forEach((item) => {
+          if (!updates.some((i) => i.index === item.index)) {
+            updates.push({
+              ...item,
+              overflowed: false
+            });
+          }
+        });
+        const overflowAdded = !existingOverflow.length && updates.length;
+        if (updates.length > 0) {
+          if (overflowAdded) {
+            dispatch({
+              type: "update-items-add-overflow-indicator",
+              overflowItems: updates,
+              overflowItem: {
+                fullSize: null,
+                id: `${id}-overflow-indicator`,
+                index: managedItems.length,
+                isOverflowIndicator: true,
+                label: "Overflow Menu",
+                priority: 1,
+                source: {}
+              }
+            });
+          } else {
+            dispatch({
+              type: "update-items",
+              overflowItems: updates
+            });
+          }
+          return true;
+        }
+        return false;
+      }
+    },
+    [
+      dispatch,
+      getAllOverflowedItems,
+      id,
+      overflowItemsRef,
+      setContainerMinSize
+    ]
+  );
+  const updateOverflow = react.useCallback(
+    (containerSize, renderedSize) => {
+      if (containerSize < renderedSize) {
+        const overflowItems = getOverflowedItems(renderedSize, containerSize);
+        if (overflowItems.length) {
+          dispatch({
+            type: "update-items",
+            overflowItems
+          });
+        }
+      }
+    },
+    [dispatch, getOverflowedItems]
+  );
+  const removeOverflow = react.useCallback(
+    (containerSize) => {
+      const [overflowCount, reinstated] = getReinstatedItems(containerSize);
+      if (reinstated.length) {
+        if (overflowCount === reinstated.length) {
+          dispatch({
+            type: "update-items-remove-overflow-indicator",
+            overflowItems: reinstated
+          });
+        } else {
+          dispatch({
+            type: "update-items",
+            overflowItems: reinstated
+          });
+        }
+      }
+    },
+    [dispatch, getReinstatedItems]
+  );
+  const handleResize = react.useCallback(
+    (size, containerHasGrown) => {
+      const { current: managedItems } = overflowItemsRef;
+      const wasOverflowing = managedItems.some(
+        (item) => item.isOverflowIndicator
+      );
+      const { isOverflowing } = overflowUtils.measureContainerOverflow(
+        overflowContainerRef,
+        orientation
+      );
+      innerContainerSizeRef.current = size;
+      if (!wasOverflowing && isOverflowing) {
+        resetMeasurements(true, size);
+      } else if (wasOverflowing && containerHasGrown) {
+        removeOverflow(size);
+      } else if (wasOverflowing && isOverflowing) {
+        const renderedSize = managedItems.filter(overflowUtils.notOverflowed).reduce(overflowUtils.addAll, 0);
+        updateOverflow(size, renderedSize);
+      }
+    },
+    [
+      orientation,
+      overflowContainerRef,
+      overflowItemsRef,
+      removeOverflow,
+      resetMeasurements,
+      updateOverflow
+    ]
+  );
+  return {
+    onResize: handleResize,
+    resetMeasurements
+  };
+};
+
+exports.useOverflow = useOverflow;
+//# sourceMappingURL=useOverflow.js.map

package/dist-cjs/responsive/useOverflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverflow.js","sources":["../src/responsive/useOverflow.ts"],"sourcesContent":["import { useIdMemo } from \"@salt-ds/core\";\nimport { useCallback, useRef } from \"react\";\nimport { partition } from \"../utils\";\nimport type {\n  OverflowHookProps,\n  OverflowHookResult,\n  OverflowItem,\n} from \"./overflowTypes\";\nimport {\n  addAll,\n  allExceptOverflowIndicator,\n  getOverflowIndicator,\n  isOverflowed,\n  measureContainerOverflow,\n  notOverflowed,\n  popNextItemByPriority,\n} from \"./overflowUtils\";\n\nconst NO_OVERFLOW_INDICATOR = { size: 0 };\n\nconst getPriority = (item: OverflowItem) => item.priority;\n\nconst popNextOverflowedItem = (items: OverflowItem[]) => {\n  const minPriority = Math.min(...items.map(getPriority));\n  for (let i = 0; i < items.length; i++) {\n    if (!items[i].isOverflowIndicator && items[i].priority === minPriority) {\n      return items.splice(i, 1)[0];\n    }\n  }\n  return null;\n};\n\nexport const useOverflow = ({\n  collectionHook: { dispatch },\n  id: idProp,\n  label = \"Toolbar\",\n  overflowItemsRef,\n  overflowContainerRef,\n  orientation,\n}: OverflowHookProps): OverflowHookResult => {\n  // We need to detect when we enter/exit the overflowed state\n  const innerContainerSizeRef = useRef(0);\n  const overflowIndicatorSize = useRef(0);\n  const id = useIdMemo(idProp);\n\n  const setContainerMinSize = useCallback(\n    (size?: number) => {\n      if (overflowContainerRef.current) {\n        const isHorizontal = orientation === \"horizontal\";\n        if (size === undefined) {\n          const dimension = isHorizontal ? \"width\" : \"height\";\n          ({ [dimension]: size } =\n            overflowContainerRef.current.getBoundingClientRect());\n        }\n        if (typeof size === \"number\") {\n          const styleDimension = isHorizontal ? \"minWidth\" : \"minHeight\";\n          overflowContainerRef.current.style[styleDimension] = `${size}px`;\n        }\n      }\n    },\n    [orientation, overflowContainerRef],\n  );\n\n  const getAllOverflowedItems = useCallback(\n    (renderedSize: number, availableSpace: number) => {\n      const { current: allItems } = overflowItemsRef;\n      const overflowedItems: OverflowItem[] = [];\n      const items = allItems.slice();\n      while (renderedSize > availableSpace) {\n        const overflowedItem = popNextItemByPriority(items);\n        if (overflowedItem === null) {\n          break;\n        }\n        renderedSize -= overflowedItem.size;\n        overflowedItems.push({\n          ...overflowedItem,\n          overflowed: true,\n        });\n      }\n      return overflowedItems;\n    },\n    [overflowItemsRef],\n  );\n\n  const getOverflowedItems = useCallback(\n    (visibleContentSize: number, containerSize: number) => {\n      const newlyOverflowedItems = [];\n      const { current: managedItems } = overflowItemsRef;\n      const visibleItems = managedItems.filter(notOverflowed);\n      while (visibleContentSize > containerSize) {\n        const overflowedItem = popNextItemByPriority(visibleItems);\n        if (overflowedItem === null) {\n          // unable to overflow, all items are collapsed, this is our minimum width,\n          // enforce it ...\n          // TODO what if density changes\n          // TODO probably not right, now we overflow even collapsed items, min width should be\n          // overflow indicator width plus width of any non-overflowable items\n          // setContainerMinSize(visibleContentSize);\n          break;\n        }\n        visibleContentSize -= overflowedItem.size;\n        newlyOverflowedItems.push({\n          ...overflowedItem,\n          overflowed: true,\n        });\n      }\n      return newlyOverflowedItems;\n    },\n    [overflowItemsRef],\n  );\n\n  const getReinstatedItems = useCallback(\n    (containerSize: number): [number, OverflowItem[]] => {\n      const reinstatedItems: OverflowItem[] = [];\n      const { current: managedItems } = overflowItemsRef;\n\n      const [overflowedItems, visibleItems] = partition(\n        managedItems,\n        isOverflowed,\n      );\n      const overflowCount = overflowedItems.length;\n      // TODO calculate this without using fullWidth if we have OVERFLOW\n      // Need a loop here where we first remove OVERFLOW, then potentially remove\n      // COLLAPSE too\n      // We want to re-introduce overflowed items before we start to restore collapsed items\n      // When we are dealing with overflowed items, we just use the current width of collapsed items.\n      let visibleContentSize = visibleItems.reduce(\n        allExceptOverflowIndicator,\n        0,\n      );\n      let diff = containerSize - visibleContentSize;\n      const { size: overflowSize = 0 } =\n        getOverflowIndicator(managedItems) || NO_OVERFLOW_INDICATOR;\n      const totalOverflowedSize = overflowedItems.reduce(\n        (sum, item) => sum + item.size,\n        0,\n      );\n      // It is important to make this check first, because the overflow indicator may have larger size than\n      // individual overflowed item(s).\n      if (totalOverflowedSize <= diff) {\n        reinstatedItems.push(\n          ...overflowedItems.map((item) => ({ ...item, overflowed: false })),\n        );\n      } else {\n        while (overflowedItems.length > 0) {\n          const nextItem = popNextOverflowedItem(overflowedItems);\n          if (nextItem && diff >= nextItem.size) {\n            // we have enough free space to reinstate this overflowed item\n            // we can only ignore the width of overflow Indicator if either there is only one remaining\n            // overflow item (so overflowIndicator will be removed) or diff is big enough to accommodate\n            // the overflow Ind.\n            if (\n              overflowedItems.length === 0 ||\n              diff >= nextItem.size + overflowSize\n            ) {\n              visibleContentSize += nextItem.size;\n              diff = diff - nextItem.size;\n              reinstatedItems.push({\n                ...nextItem,\n                overflowed: false,\n              });\n            } else {\n              break;\n            }\n          } else {\n            break;\n          }\n        }\n      }\n      return [overflowCount, reinstatedItems];\n    },\n    [overflowItemsRef],\n  );\n\n  const resetMeasurements = useCallback(\n    (isOverflowing: boolean, innerContainerSize: number) => {\n      if (isOverflowing) {\n        const { current: managedItems } = overflowItemsRef;\n        const renderedSize = managedItems.reduce(allExceptOverflowIndicator, 0);\n        const overflowIndicator = managedItems.find(\n          (i) => i.isOverflowIndicator,\n        );\n        if (\n          overflowIndicator &&\n          overflowIndicator.size !== overflowIndicatorSize.current\n        ) {\n          overflowIndicatorSize.current = overflowIndicator.size;\n          setContainerMinSize(overflowIndicator.size);\n        }\n        const existingOverflow = managedItems.filter(isOverflowed);\n        const updates = getAllOverflowedItems(\n          renderedSize,\n          innerContainerSize - overflowIndicatorSize.current,\n        );\n\n        existingOverflow.forEach((item) => {\n          if (!updates.some((i) => i.index === item.index)) {\n            updates.push({\n              ...item,\n              overflowed: false,\n            });\n          }\n        });\n\n        const overflowAdded = !existingOverflow.length && updates.length;\n\n        if (updates.length > 0) {\n          if (overflowAdded) {\n            dispatch({\n              type: \"update-items-add-overflow-indicator\",\n              overflowItems: updates,\n              overflowItem: {\n                fullSize: null,\n                id: `${id}-overflow-indicator`,\n                index: managedItems.length,\n                isOverflowIndicator: true,\n                label: \"Overflow Menu\",\n                priority: 1,\n                source: {},\n              } as OverflowItem<\"source\">,\n            });\n          } else {\n            dispatch({\n              type: \"update-items\",\n              overflowItems: updates,\n            });\n          }\n          return true;\n        }\n        return false;\n      }\n    },\n    [\n      dispatch,\n      getAllOverflowedItems,\n      id,\n      overflowItemsRef,\n      setContainerMinSize,\n    ],\n  );\n\n  const updateOverflow = useCallback(\n    (containerSize: number, renderedSize: number) => {\n      if (containerSize < renderedSize) {\n        const overflowItems = getOverflowedItems(renderedSize, containerSize);\n        if (overflowItems.length) {\n          dispatch({\n            type: \"update-items\",\n            overflowItems,\n          });\n        }\n      }\n    },\n    [dispatch, getOverflowedItems],\n  );\n\n  const removeOverflow = useCallback(\n    (containerSize: number) => {\n      const [overflowCount, reinstated] = getReinstatedItems(containerSize);\n      if (reinstated.length) {\n        if (overflowCount === reinstated.length) {\n          dispatch({\n            type: \"update-items-remove-overflow-indicator\",\n            overflowItems: reinstated,\n          });\n        } else {\n          dispatch({\n            type: \"update-items\",\n            overflowItems: reinstated,\n          });\n        }\n      }\n    },\n    [dispatch, getReinstatedItems],\n  );\n\n  const handleResize = useCallback(\n    (size: number, containerHasGrown?: boolean) => {\n      const { current: managedItems } = overflowItemsRef;\n      const wasOverflowing = managedItems.some(\n        (item) => item.isOverflowIndicator,\n      );\n      const { isOverflowing } = measureContainerOverflow(\n        overflowContainerRef,\n        orientation,\n      );\n\n      innerContainerSizeRef.current = size;\n\n      if (!wasOverflowing && isOverflowing) {\n        // entering overflow\n        // TODO if client is not using an overflow indicator, there is nothing to do here,\n        // just let nature take its course. How do we know this ?\n        // This is when we need to add width to measurements we are tracking\n        resetMeasurements(true, size);\n      } else if (wasOverflowing && containerHasGrown) {\n        // check to see if we can reinstate one or more items, possibly all\n        removeOverflow(size);\n      } else if (wasOverflowing && isOverflowing) {\n        // Note: container must have shrunk\n        // still overflowing, possibly more overflowing than before\n        const renderedSize = managedItems\n          .filter(notOverflowed)\n          .reduce(addAll, 0);\n        updateOverflow(size, renderedSize);\n      }\n    },\n    [\n      orientation,\n      overflowContainerRef,\n      overflowItemsRef,\n      removeOverflow,\n      resetMeasurements,\n      updateOverflow,\n    ],\n  );\n\n  return {\n    onResize: handleResize,\n    resetMeasurements,\n  };\n};\n"],"names":["useRef","useIdMemo","useCallback","popNextItemByPriority","notOverflowed","partition","isOverflowed","allExceptOverflowIndicator","getOverflowIndicator","measureContainerOverflow","addAll"],"mappings":";;;;;;;AAkBA,MAAM,qBAAA,GAAwB,EAAE,IAAA,EAAM,CAAE,EAAA;AAExC,MAAM,WAAA,GAAc,CAAC,IAAA,KAAuB,IAAK,CAAA,QAAA;AAEjD,MAAM,qBAAA,GAAwB,CAAC,KAA0B,KAAA;AACvD,EAAA,MAAM,cAAc,IAAK,CAAA,GAAA,CAAI,GAAG,KAAM,CAAA,GAAA,CAAI,WAAW,CAAC,CAAA;AACtD,EAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,KAAA,CAAM,QAAQ,CAAK,EAAA,EAAA;AACrC,IAAI,IAAA,CAAC,MAAM,CAAC,CAAA,CAAE,uBAAuB,KAAM,CAAA,CAAC,CAAE,CAAA,QAAA,KAAa,WAAa,EAAA;AACtE,MAAA,OAAO,KAAM,CAAA,MAAA,CAAO,CAAG,EAAA,CAAC,EAAE,CAAC,CAAA;AAAA;AAC7B;AAEF,EAAO,OAAA,IAAA;AACT,CAAA;AAEO,MAAM,cAAc,CAAC;AAAA,EAC1B,cAAA,EAAgB,EAAE,QAAS,EAAA;AAAA,EAC3B,EAAI,EAAA,MAAA;AAAA,EACJ,KAAQ,GAAA,SAAA;AAAA,EACR,gBAAA;AAAA,EACA,oBAAA;AAAA,EACA;AACF,CAA6C,KAAA;AAE3C,EAAM,MAAA,qBAAA,GAAwBA,aAAO,CAAC,CAAA;AACtC,EAAM,MAAA,qBAAA,GAAwBA,aAAO,CAAC,CAAA;AACtC,EAAM,MAAA,EAAA,GAAKC,eAAU,MAAM,CAAA;AAE3B,EAAA,MAAM,mBAAsB,GAAAC,iBAAA;AAAA,IAC1B,CAAC,IAAkB,KAAA;AACjB,MAAA,IAAI,qBAAqB,OAAS,EAAA;AAChC,QAAA,MAAM,eAAe,WAAgB,KAAA,YAAA;AACrC,QAAA,IAAI,SAAS,MAAW,EAAA;AACtB,UAAM,MAAA,SAAA,GAAY,eAAe,OAAU,GAAA,QAAA;AAC3C,UAAC,CAAA,EAAE,CAAC,SAAS,GAAG,MACd,GAAA,oBAAA,CAAqB,QAAQ,qBAAsB,EAAA;AAAA;AAEvD,QAAI,IAAA,OAAO,SAAS,QAAU,EAAA;AAC5B,UAAM,MAAA,cAAA,GAAiB,eAAe,UAAa,GAAA,WAAA;AACnD,UAAA,oBAAA,CAAqB,OAAQ,CAAA,KAAA,CAAM,cAAc,CAAA,GAAI,GAAG,IAAI,CAAA,EAAA,CAAA;AAAA;AAC9D;AACF,KACF;AAAA,IACA,CAAC,aAAa,oBAAoB;AAAA,GACpC;AAEA,EAAA,MAAM,qBAAwB,GAAAA,iBAAA;AAAA,IAC5B,CAAC,cAAsB,cAA2B,KAAA;AAChD,MAAM,MAAA,EAAE,OAAS,EAAA,QAAA,EAAa,GAAA,gBAAA;AAC9B,MAAA,MAAM,kBAAkC,EAAC;AACzC,MAAM,MAAA,KAAA,GAAQ,SAAS,KAAM,EAAA;AAC7B,MAAA,OAAO,eAAe,cAAgB,EAAA;AACpC,QAAM,MAAA,cAAA,GAAiBC,oCAAsB,KAAK,CAAA;AAClD,QAAA,IAAI,mBAAmB,IAAM,EAAA;AAC3B,UAAA;AAAA;AAEF,QAAA,YAAA,IAAgB,cAAe,CAAA,IAAA;AAC/B,QAAA,eAAA,CAAgB,IAAK,CAAA;AAAA,UACnB,GAAG,cAAA;AAAA,UACH,UAAY,EAAA;AAAA,SACb,CAAA;AAAA;AAEH,MAAO,OAAA,eAAA;AAAA,KACT;AAAA,IACA,CAAC,gBAAgB;AAAA,GACnB;AAEA,EAAA,MAAM,kBAAqB,GAAAD,iBAAA;AAAA,IACzB,CAAC,oBAA4B,aAA0B,KAAA;AACrD,MAAA,MAAM,uBAAuB,EAAC;AAC9B,MAAM,MAAA,EAAE,OAAS,EAAA,YAAA,EAAiB,GAAA,gBAAA;AAClC,MAAM,MAAA,YAAA,GAAe,YAAa,CAAA,MAAA,CAAOE,2BAAa,CAAA;AACtD,MAAA,OAAO,qBAAqB,aAAe,EAAA;AACzC,QAAM,MAAA,cAAA,GAAiBD,oCAAsB,YAAY,CAAA;AACzD,QAAA,IAAI,mBAAmB,IAAM,EAAA;AAO3B,UAAA;AAAA;AAEF,QAAA,kBAAA,IAAsB,cAAe,CAAA,IAAA;AACrC,QAAA,oBAAA,CAAqB,IAAK,CAAA;AAAA,UACxB,GAAG,cAAA;AAAA,UACH,UAAY,EAAA;AAAA,SACb,CAAA;AAAA;AAEH,MAAO,OAAA,oBAAA;AAAA,KACT;AAAA,IACA,CAAC,gBAAgB;AAAA,GACnB;AAEA,EAAA,MAAM,kBAAqB,GAAAD,iBAAA;AAAA,IACzB,CAAC,aAAoD,KAAA;AACnD,MAAA,MAAM,kBAAkC,EAAC;AACzC,MAAM,MAAA,EAAE,OAAS,EAAA,YAAA,EAAiB,GAAA,gBAAA;AAElC,MAAM,MAAA,CAAC,eAAiB,EAAA,YAAY,CAAI,GAAAG,mBAAA;AAAA,QACtC,YAAA;AAAA,QACAC;AAAA,OACF;AACA,MAAA,MAAM,gBAAgB,eAAgB,CAAA,MAAA;AAMtC,MAAA,IAAI,qBAAqB,YAAa,CAAA,MAAA;AAAA,QACpCC,wCAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,IAAI,OAAO,aAAgB,GAAA,kBAAA;AAC3B,MAAA,MAAM,EAAE,IAAM,EAAA,YAAA,GAAe,GAC3B,GAAAC,kCAAA,CAAqB,YAAY,CAAK,IAAA,qBAAA;AACxC,MAAA,MAAM,sBAAsB,eAAgB,CAAA,MAAA;AAAA,QAC1C,CAAC,GAAA,EAAK,IAAS,KAAA,GAAA,GAAM,IAAK,CAAA,IAAA;AAAA,QAC1B;AAAA,OACF;AAGA,MAAA,IAAI,uBAAuB,IAAM,EAAA;AAC/B,QAAgB,eAAA,CAAA,IAAA;AAAA,UACd,GAAG,eAAgB,CAAA,GAAA,CAAI,CAAC,IAAA,MAAU,EAAE,GAAG,IAAA,EAAM,UAAY,EAAA,KAAA,EAAQ,CAAA;AAAA,SACnE;AAAA,OACK,MAAA;AACL,QAAO,OAAA,eAAA,CAAgB,SAAS,CAAG,EAAA;AACjC,UAAM,MAAA,QAAA,GAAW,sBAAsB,eAAe,CAAA;AACtD,UAAI,IAAA,QAAA,IAAY,IAAQ,IAAA,QAAA,CAAS,IAAM,EAAA;AAKrC,YAAA,IACE,gBAAgB,MAAW,KAAA,CAAA,IAC3B,IAAQ,IAAA,QAAA,CAAS,OAAO,YACxB,EAAA;AACA,cAAA,kBAAA,IAAsB,QAAS,CAAA,IAAA;AAC/B,cAAA,IAAA,GAAO,OAAO,QAAS,CAAA,IAAA;AACvB,cAAA,eAAA,CAAgB,IAAK,CAAA;AAAA,gBACnB,GAAG,QAAA;AAAA,gBACH,UAAY,EAAA;AAAA,eACb,CAAA;AAAA,aACI,MAAA;AACL,cAAA;AAAA;AACF,WACK,MAAA;AACL,YAAA;AAAA;AACF;AACF;AAEF,MAAO,OAAA,CAAC,eAAe,eAAe,CAAA;AAAA,KACxC;AAAA,IACA,CAAC,gBAAgB;AAAA,GACnB;AAEA,EAAA,MAAM,iBAAoB,GAAAN,iBAAA;AAAA,IACxB,CAAC,eAAwB,kBAA+B,KAAA;AACtD,MAAA,IAAI,aAAe,EAAA;AACjB,QAAM,MAAA,EAAE,OAAS,EAAA,YAAA,EAAiB,GAAA,gBAAA;AAClC,QAAA,MAAM,YAAe,GAAA,YAAA,CAAa,MAAO,CAAAK,wCAAA,EAA4B,CAAC,CAAA;AACtE,QAAA,MAAM,oBAAoB,YAAa,CAAA,IAAA;AAAA,UACrC,CAAC,MAAM,CAAE,CAAA;AAAA,SACX;AACA,QAAA,IACE,iBACA,IAAA,iBAAA,CAAkB,IAAS,KAAA,qBAAA,CAAsB,OACjD,EAAA;AACA,UAAA,qBAAA,CAAsB,UAAU,iBAAkB,CAAA,IAAA;AAClD,UAAA,mBAAA,CAAoB,kBAAkB,IAAI,CAAA;AAAA;AAE5C,QAAM,MAAA,gBAAA,GAAmB,YAAa,CAAA,MAAA,CAAOD,0BAAY,CAAA;AACzD,QAAA,MAAM,OAAU,GAAA,qBAAA;AAAA,UACd,YAAA;AAAA,UACA,qBAAqB,qBAAsB,CAAA;AAAA,SAC7C;AAEA,QAAiB,gBAAA,CAAA,OAAA,CAAQ,CAAC,IAAS,KAAA;AACjC,UAAI,IAAA,CAAC,QAAQ,IAAK,CAAA,CAAC,MAAM,CAAE,CAAA,KAAA,KAAU,IAAK,CAAA,KAAK,CAAG,EAAA;AAChD,YAAA,OAAA,CAAQ,IAAK,CAAA;AAAA,cACX,GAAG,IAAA;AAAA,cACH,UAAY,EAAA;AAAA,aACb,CAAA;AAAA;AACH,SACD,CAAA;AAED,QAAA,MAAM,aAAgB,GAAA,CAAC,gBAAiB,CAAA,MAAA,IAAU,OAAQ,CAAA,MAAA;AAE1D,QAAI,IAAA,OAAA,CAAQ,SAAS,CAAG,EAAA;AACtB,UAAA,IAAI,aAAe,EAAA;AACjB,YAAS,QAAA,CAAA;AAAA,cACP,IAAM,EAAA,qCAAA;AAAA,cACN,aAAe,EAAA,OAAA;AAAA,cACf,YAAc,EAAA;AAAA,gBACZ,QAAU,EAAA,IAAA;AAAA,gBACV,EAAA,EAAI,GAAG,EAAE,CAAA,mBAAA,CAAA;AAAA,gBACT,OAAO,YAAa,CAAA,MAAA;AAAA,gBACpB,mBAAqB,EAAA,IAAA;AAAA,gBACrB,KAAO,EAAA,eAAA;AAAA,gBACP,QAAU,EAAA,CAAA;AAAA,gBACV,QAAQ;AAAC;AACX,aACD,CAAA;AAAA,WACI,MAAA;AACL,YAAS,QAAA,CAAA;AAAA,cACP,IAAM,EAAA,cAAA;AAAA,cACN,aAAe,EAAA;AAAA,aAChB,CAAA;AAAA;AAEH,UAAO,OAAA,IAAA;AAAA;AAET,QAAO,OAAA,KAAA;AAAA;AACT,KACF;AAAA,IACA;AAAA,MACE,QAAA;AAAA,MACA,qBAAA;AAAA,MACA,EAAA;AAAA,MACA,gBAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,cAAiB,GAAAJ,iBAAA;AAAA,IACrB,CAAC,eAAuB,YAAyB,KAAA;AAC/C,MAAA,IAAI,gBAAgB,YAAc,EAAA;AAChC,QAAM,MAAA,aAAA,GAAgB,kBAAmB,CAAA,YAAA,EAAc,aAAa,CAAA;AACpE,QAAA,IAAI,cAAc,MAAQ,EAAA;AACxB,UAAS,QAAA,CAAA;AAAA,YACP,IAAM,EAAA,cAAA;AAAA,YACN;AAAA,WACD,CAAA;AAAA;AACH;AACF,KACF;AAAA,IACA,CAAC,UAAU,kBAAkB;AAAA,GAC/B;AAEA,EAAA,MAAM,cAAiB,GAAAA,iBAAA;AAAA,IACrB,CAAC,aAA0B,KAAA;AACzB,MAAA,MAAM,CAAC,aAAA,EAAe,UAAU,CAAA,GAAI,mBAAmB,aAAa,CAAA;AACpE,MAAA,IAAI,WAAW,MAAQ,EAAA;AACrB,QAAI,IAAA,aAAA,KAAkB,WAAW,MAAQ,EAAA;AACvC,UAAS,QAAA,CAAA;AAAA,YACP,IAAM,EAAA,wCAAA;AAAA,YACN,aAAe,EAAA;AAAA,WAChB,CAAA;AAAA,SACI,MAAA;AACL,UAAS,QAAA,CAAA;AAAA,YACP,IAAM,EAAA,cAAA;AAAA,YACN,aAAe,EAAA;AAAA,WAChB,CAAA;AAAA;AACH;AACF,KACF;AAAA,IACA,CAAC,UAAU,kBAAkB;AAAA,GAC/B;AAEA,EAAA,MAAM,YAAe,GAAAA,iBAAA;AAAA,IACnB,CAAC,MAAc,iBAAgC,KAAA;AAC7C,MAAM,MAAA,EAAE,OAAS,EAAA,YAAA,EAAiB,GAAA,gBAAA;AAClC,MAAA,MAAM,iBAAiB,YAAa,CAAA,IAAA;AAAA,QAClC,CAAC,SAAS,IAAK,CAAA;AAAA,OACjB;AACA,MAAM,MAAA,EAAE,eAAkB,GAAAO,sCAAA;AAAA,QACxB,oBAAA;AAAA,QACA;AAAA,OACF;AAEA,MAAA,qBAAA,CAAsB,OAAU,GAAA,IAAA;AAEhC,MAAI,IAAA,CAAC,kBAAkB,aAAe,EAAA;AAKpC,QAAA,iBAAA,CAAkB,MAAM,IAAI,CAAA;AAAA,OAC9B,MAAA,IAAW,kBAAkB,iBAAmB,EAAA;AAE9C,QAAA,cAAA,CAAe,IAAI,CAAA;AAAA,OACrB,MAAA,IAAW,kBAAkB,aAAe,EAAA;AAG1C,QAAA,MAAM,eAAe,YAClB,CAAA,MAAA,CAAOL,2BAAa,CACpB,CAAA,MAAA,CAAOM,sBAAQ,CAAC,CAAA;AACnB,QAAA,cAAA,CAAe,MAAM,YAAY,CAAA;AAAA;AACnC,KACF;AAAA,IACA;AAAA,MACE,WAAA;AAAA,MACA,oBAAA;AAAA,MACA,gBAAA;AAAA,MACA,cAAA;AAAA,MACA,iBAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAO,OAAA;AAAA,IACL,QAAU,EAAA,YAAA;AAAA,IACV;AAAA,GACF;AACF;;;;"}

package/dist-cjs/responsive/useOverflowCollectionItems.js

@@ -0,0 +1,143 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var react = require('react');
+var OverflowReducer = require('./OverflowReducer.js');
+var overflowUtils = require('./overflowUtils.js');
+
+const defaultOptions = {};
+const defaultChildIdentity = (children) => {
+  const childLabels = [];
+  react.Children.forEach(children, (child) => {
+    if (react.isValidElement(child)) {
+      childLabels.push(child.props.label ?? "");
+    }
+  });
+  return `${childLabels.length}:${childLabels.join(":")}`;
+};
+const defaultSourceIdentity = (source) => {
+  const labels = source.map(({ label }) => label).join(":");
+  return `${source.length}:${labels}`;
+};
+const getItemsIdentity = (defaultSource, source, children) => {
+  let identity;
+  if (Array.isArray(defaultSource)) {
+    identity = defaultSourceIdentity(defaultSource);
+  } else if (Array.isArray(source)) {
+    identity = defaultSourceIdentity(source);
+  } else {
+    identity = defaultChildIdentity(children);
+  }
+  return identity;
+};
+const useOverflowCollectionItems = ({
+  children,
+  defaultSource,
+  id: idRoot,
+  injectedItems = [],
+  options = defaultOptions,
+  orientation,
+  label = "",
+  source
+}) => {
+  const dataRef = react.useRef([]);
+  const versionRef = react.useRef(0);
+  const measureTimeout = react.useRef(null);
+  const previousIdentityRef = react.useRef("");
+  const fontsLoaded = react.useRef(false);
+  const identity = getItemsIdentity(defaultSource, source, children);
+  const isControlled = Array.isArray(source) || react.Children.count(children) > 0;
+  if (isControlled && defaultSource !== void 0) {
+    throw Error(
+      "useOverflowCollectionItems: defaultSource prop should not be used in combination with either source prop or children "
+    );
+  }
+  const [data, dispatch] = react.useReducer(
+    OverflowReducer.overflowReducer,
+    {
+      children,
+      source: source || defaultSource,
+      injectedItems,
+      idRoot,
+      options
+    },
+    OverflowReducer.reducerInitialiser
+  );
+  dataRef.current = data;
+  const measureManagedItems = react.useCallback(
+    (defer = false) => {
+      if (measureTimeout.current) {
+        window.clearTimeout(measureTimeout.current);
+        measureTimeout.current = null;
+      }
+      if (defer) {
+        measureTimeout.current = window.setTimeout(measureManagedItems, 30);
+      } else {
+        if (fontsLoaded.current) {
+          const dimension = orientation === "horizontal" ? "width" : "height";
+          const overflowItems = overflowUtils.measureOverflowItems(
+            dataRef.current,
+            dimension
+          );
+          versionRef.current += 1;
+          dispatch({
+            type: "init",
+            overflowItems
+          });
+        }
+      }
+    },
+    [orientation]
+  );
+  core.useIsomorphicLayoutEffect(() => {
+    async function measure() {
+      const { fonts } = document;
+      if (fonts) {
+        await fonts.ready;
+        fontsLoaded.current = true;
+      } else {
+        fontsLoaded.current = true;
+      }
+      measureManagedItems();
+    }
+    measure().catch((err) => {
+      console.warn("error occurred measuring Overflow Items", err);
+    });
+  }, [measureManagedItems]);
+  const dispatchOverflowAction = react.useCallback(
+    (action) => {
+      if (action.type === "reset") {
+        measureManagedItems();
+      } else {
+        dispatch(action);
+        if (action.type.endsWith("overflow-indicator")) {
+          measureManagedItems(true);
+        }
+      }
+    },
+    [measureManagedItems]
+  );
+  core.useIsomorphicLayoutEffect(() => {
+    if (previousIdentityRef.current !== "") {
+      const overflowItems = OverflowReducer.reducerInitialiser({
+        children,
+        source: source || defaultSource,
+        injectedItems,
+        idRoot,
+        options
+      });
+      dispatch({ type: "init", overflowItems });
+      measureManagedItems(true);
+    }
+    previousIdentityRef.current = identity;
+  }, [identity]);
+  return {
+    data,
+    dispatch: dispatchOverflowAction,
+    isControlled,
+    version: versionRef.current
+  };
+};
+
+exports.useOverflowCollectionItems = useOverflowCollectionItems;
+//# sourceMappingURL=useOverflowCollectionItems.js.map