@salt-ds/lab 1.0.0-alpha.0

package/dist-cjs/packages/lab/src/responsive/useDynamicCollapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDynamicCollapse.js","sources":["../src/responsive/useDynamicCollapse.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useCallback, useState } from \"react\";\nimport {\n  ElementRef,\n  OverflowItem,\n  OverflowHookProps,\n  DynamicCollapseHookResult,\n} from \"./overflowTypes\";\nimport { byDescendingPriority } from \"./overflowUtils\";\nimport {\n  getElementForItem,\n  getRuntimePadding,\n  isCollapsed,\n  isCollapsible,\n  measureContainerOverflow,\n  measureElementSize,\n} from \"./overflowUtils\";\n\nconst UNCOLLAPSED_DYNAMIC_ITEMS =\n  '[data-collapsible=\"dynamic\"]:not([data-collapsed=\"true\"]):not([data-collapsing=\"true\"])';\n\nconst hasUncollapsedDynamicItems = (containerRef: ElementRef) =>\n  containerRef.current!.querySelector(UNCOLLAPSED_DYNAMIC_ITEMS) !== null;\n\nconst thereAreCollapsibleItemsAndTheyAreAllCollapsed = (\n  items: OverflowItem[]\n) => {\n  const collapsibleItems = items.filter(isCollapsible);\n  return collapsibleItems.length > 0 && collapsibleItems.every(isCollapsed);\n};\n\nconst nextItemToCollapse = (listItems: OverflowItem[]): OverflowItem =>\n  listItems.filter(isCollapsible).sort(byDescendingPriority).slice(-1)[0];\n\nexport const useDynamicCollapse = ({\n  collectionHook,\n  innerContainerSize = 0,\n  label = \"Toolbar\",\n  overflowItemsRef: managedItemsRef,\n  overflowContainerRef: ref,\n  orientation,\n}: OverflowHookProps): DynamicCollapseHookResult => {\n  const { dispatch } = collectionHook;\n  const [newCollapsingItem, setNewCollapsingItem] =\n    useState<OverflowItem | null>(null);\n  const restoreCollapsingItem = useCallback(() => {\n    dispatch({\n      type: \"restore-collapsing-item\",\n    });\n  }, [dispatch]);\n\n  const collapseCollapsingItem = useCallback(\n    (item: OverflowItem, target: HTMLElement, minSize: number) => {\n      const styleDimension =\n        orientation === \"horizontal\" ? \"minWidth\" : \"minHeight\";\n      // TODO do we really want to do this here ?\n      target.style[styleDimension] = `${minSize}px`;\n      const size = measureElementSize(target);\n\n      dispatch({\n        type: \"collapse-dynamic-item\",\n        overflowItem: item,\n        collapsedSize: size,\n        minSize,\n      });\n    },\n    [dispatch, orientation]\n  );\n\n  const checkDynamicContent = useCallback(\n    (containerHasGrown?: boolean) => {\n      const { current: managedItems } = managedItemsRef;\n      // The order must matter here\n      const collapsingChild = managedItems.find(\n        ({ collapsible, collapsing }) => collapsible === \"dynamic\" && collapsing\n      );\n      const collapsedChild = managedItems.find(\n        ({ collapsible, collapsed }) => collapsible === \"dynamic\" && collapsed\n      );\n\n      if (!collapsingChild && !collapsedChild) {\n        return;\n      }\n      if (collapsedChild && !collapsingChild) {\n        // TODO do we need a check to see whether we now have enough space to completely uncollapse the item ?\n        // We may be able to uncollapse one or more items before the one we set to collapsing\n\n        dispatch({\n          type: \"uncollapse-dynamic-item\",\n          overflowItem: collapsedChild,\n        });\n      } else if (collapsingChild) {\n        if (containerHasGrown && collapsedChild) {\n          const collapsingElement = getElementForItem(ref, collapsingChild);\n          const dimension = orientation === \"horizontal\" ? \"width\" : \"height\";\n          // can we avoid measuring ths element on every resize event ?\n          const size = measureElementSize(collapsingElement, dimension);\n          // collapsingElement.getBoundingClientRect();\n\n          // We don't restore a collapsing item unless there is at least one collapsed item\n          if (collapsedChild && size === collapsingChild.size) {\n            restoreCollapsingItem();\n          }\n        } else {\n          // Note we are going to compare width with minWidth. Margin is ignored\n          // use getBoundingClientRect rather than measureNode\n          const dimension = orientation === \"horizontal\" ? \"width\" : \"height\";\n          const collapsingElement = getElementForItem(ref, collapsingChild);\n          const { [dimension]: measuredSizeOfCollapsingElement } =\n            collapsingElement.getBoundingClientRect();\n          // minsize should be the size of the last item in the tooltray\n          const [padStart, padEnd] = getRuntimePadding(\n            collapsingElement,\n            \"left\",\n            \"right\"\n          );\n          //TODO we don't really want to measure the last item in the collapsing container\n          // we want to measure the width of the item that will be the last to overflow.\n          const lastTooltrayItem = collapsingElement.querySelector(\n            \".Responsive-inner > :last-child\"\n          );\n          if (lastTooltrayItem) {\n            const { [dimension]: childMinSize } =\n              lastTooltrayItem.getBoundingClientRect();\n            const minSize = padStart + childMinSize + padEnd;\n            if (Math.floor(measuredSizeOfCollapsingElement) <= minSize) {\n              collapseCollapsingItem(\n                collapsingChild,\n                collapsingElement,\n                minSize\n              );\n            }\n          }\n        }\n      }\n    },\n    [\n      collapseCollapsingItem,\n      dispatch,\n      managedItemsRef,\n      orientation,\n      ref,\n      restoreCollapsingItem,\n    ]\n  );\n\n  const handleResize = useCallback(\n    (size: number, containerHasGrown?: boolean) => {\n      const { current: managedItems } = managedItemsRef;\n      const { isOverflowing: willOverflow } = measureContainerOverflow(\n        ref,\n        orientation\n      );\n\n      const collapsingItem = managedItems.find((item) => item.collapsing);\n\n      if (collapsingItem) {\n        checkDynamicContent(containerHasGrown);\n      } else if (\n        containerHasGrown &&\n        !willOverflow &&\n        thereAreCollapsibleItemsAndTheyAreAllCollapsed(managedItems)\n      ) {\n        checkDynamicContent(true);\n      }\n    },\n    [checkDynamicContent, managedItemsRef, orientation, ref]\n  );\n\n  const resetMeasurements = useCallback(() => {\n    const { current: managedItems } = managedItemsRef;\n    const hasDynamicItems = hasUncollapsedDynamicItems(ref);\n    if (hasDynamicItems) {\n      const collapsingItem = nextItemToCollapse(managedItems);\n      setNewCollapsingItem(collapsingItem);\n\n      dispatch({\n        type: \"collapsing-item\",\n        overflowItem: collapsingItem,\n      });\n      return true;\n    } else {\n      return false;\n    }\n  }, [dispatch, managedItemsRef, ref]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (newCollapsingItem) {\n      checkDynamicContent(false);\n    }\n  }, [checkDynamicContent, newCollapsingItem]);\n\n  return {\n    onResize: handleResize,\n    resetMeasurements,\n  };\n};\n"],"names":["isCollapsible","isCollapsed","byDescendingPriority","useState","useCallback","measureElementSize","getElementForItem","getRuntimePadding","measureContainerOverflow","useIsomorphicLayoutEffect"],"mappings":"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"}

package/dist-cjs/packages/lab/src/responsive/useInstantCollapse.js

@@ -0,0 +1,203 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 - 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,
+  label = "Toolbar",
+  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;
+        } else {
+          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/packages/lab/src/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 {\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\" && item.collapsed && 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! - 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  label = \"Toolbar\",\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        } else {\n          return false;\n        }\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/packages/lab/src/responsive/useOverflow.js

@@ -0,0 +1,258 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var overflowUtils = require('./overflowUtils.js');
+var partition = require('../utils/partition.js');
+var core = require('@salt-ds/core');
+
+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];
+    },
+    []
+  );
+  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;
+        } else {
+          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/packages/lab/src/responsive/useOverflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverflow.js","sources":["../src/responsive/useOverflow.ts"],"sourcesContent":["import { useCallback, useRef } from \"react\";\nimport {\n  addAll,\n  allExceptOverflowIndicator,\n  getOverflowIndicator,\n  isOverflowed,\n  measureContainerOverflow,\n  notOverflowed,\n  popNextItemByPriority,\n} from \"./overflowUtils\";\nimport {\n  OverflowItem,\n  OverflowHookProps,\n  OverflowHookResult,\n} from \"./overflowTypes\";\nimport { partition } from \"../utils\";\nimport { useIdMemo } from \"@salt-ds/core\";\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        // eslint-disable-next-line no-param-reassign\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    []\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        } else {\n          return false;\n        }\n      }\n    },\n    [dispatch, getAllOverflowedItems, id, overflowItemsRef, setContainerMinSize]\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":"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"}