@salt-ds/lab 1.0.0-alpha.0

package/dist-es/packages/lab/src/responsive/useOverflow.js

@@ -0,0 +1,254 @@
+import { useRef, useCallback } from 'react';
+import { popNextItemByPriority, notOverflowed, isOverflowed, allExceptOverflowIndicator, getOverflowIndicator, measureContainerOverflow, addAll } from './overflowUtils.js';
+import { partition } from '../utils/partition.js';
+import { useIdMemo } from '@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 = useRef(0);
+  const overflowIndicatorSize = useRef(0);
+  const id = useIdMemo(idProp);
+  const setContainerMinSize = 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 = useCallback(
+    (renderedSize, availableSpace) => {
+      const { current: allItems } = overflowItemsRef;
+      const overflowedItems = [];
+      const items = allItems.slice();
+      while (renderedSize > availableSpace) {
+        const overflowedItem = popNextItemByPriority(items);
+        if (overflowedItem === null) {
+          break;
+        }
+        renderedSize -= overflowedItem.size;
+        overflowedItems.push({
+          ...overflowedItem,
+          overflowed: true
+        });
+      }
+      return overflowedItems;
+    },
+    [overflowItemsRef]
+  );
+  const getOverflowedItems = useCallback(
+    (visibleContentSize, containerSize) => {
+      const newlyOverflowedItems = [];
+      const { current: managedItems } = overflowItemsRef;
+      const visibleItems = managedItems.filter(notOverflowed);
+      while (visibleContentSize > containerSize) {
+        const overflowedItem = popNextItemByPriority(visibleItems);
+        if (overflowedItem === null) {
+          break;
+        }
+        visibleContentSize -= overflowedItem.size;
+        newlyOverflowedItems.push({
+          ...overflowedItem,
+          overflowed: true
+        });
+      }
+      return newlyOverflowedItems;
+    },
+    [overflowItemsRef]
+  );
+  const getReinstatedItems = useCallback(
+    (containerSize) => {
+      const reinstatedItems = [];
+      const { current: managedItems } = overflowItemsRef;
+      const [overflowedItems, visibleItems] = partition(
+        managedItems,
+        isOverflowed
+      );
+      const overflowCount = overflowedItems.length;
+      let visibleContentSize = visibleItems.reduce(
+        allExceptOverflowIndicator,
+        0
+      );
+      let diff = containerSize - visibleContentSize;
+      const { size: overflowSize = 0 } = 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 = useCallback(
+    (isOverflowing, innerContainerSize) => {
+      if (isOverflowing) {
+        const { current: managedItems } = overflowItemsRef;
+        const renderedSize = managedItems.reduce(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(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 = useCallback(
+    (containerSize, renderedSize) => {
+      if (containerSize < renderedSize) {
+        const overflowItems = getOverflowedItems(renderedSize, containerSize);
+        if (overflowItems.length) {
+          dispatch({
+            type: "update-items",
+            overflowItems
+          });
+        }
+      }
+    },
+    [dispatch, getOverflowedItems]
+  );
+  const removeOverflow = 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 = useCallback(
+    (size, containerHasGrown) => {
+      const { current: managedItems } = overflowItemsRef;
+      const wasOverflowing = managedItems.some(
+        (item) => item.isOverflowIndicator
+      );
+      const { isOverflowing } = 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(notOverflowed).reduce(addAll, 0);
+        updateOverflow(size, renderedSize);
+      }
+    },
+    [
+      orientation,
+      overflowContainerRef,
+      overflowItemsRef,
+      removeOverflow,
+      resetMeasurements,
+      updateOverflow
+    ]
+  );
+  return {
+    onResize: handleResize,
+    resetMeasurements
+  };
+};
+
+export { useOverflow };
+//# sourceMappingURL=useOverflow.js.map

package/dist-es/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":[],"mappings":"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"}

package/dist-es/packages/lab/src/responsive/useOverflowCollectionItems.js

@@ -0,0 +1,142 @@
+import { useRef, Children, useReducer, useCallback, isValidElement } from 'react';
+import { useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { measureOverflowItems } from './overflowUtils.js';
+import { overflowReducer, reducerInitialiser } from './OverflowReducer.js';
+
+const defaultOptions = {};
+const defaultChildIdentity = (children) => {
+  const childLabels = [];
+  Children.forEach(children, (child) => {
+    var _a;
+    if (isValidElement(child)) {
+      childLabels.push((_a = child.props.label) != null ? _a : "");
+    }
+  });
+  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 = useRef([]);
+  const versionRef = useRef(0);
+  const measureTimeout = useRef(null);
+  const previousIdentityRef = useRef("");
+  const fontsLoaded = useRef(false);
+  const identity = getItemsIdentity(defaultSource, source, children);
+  const isControlled = Array.isArray(source) || 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] = useReducer(
+    overflowReducer,
+    {
+      children,
+      source: source || defaultSource,
+      injectedItems,
+      idRoot,
+      options
+    },
+    reducerInitialiser
+  );
+  dataRef.current = data;
+  const measureManagedItems = 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 = measureOverflowItems(
+            dataRef.current,
+            dimension
+          );
+          versionRef.current += 1;
+          dispatch({
+            type: "init",
+            overflowItems
+          });
+        }
+      }
+    },
+    [orientation]
+  );
+  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 = useCallback(
+    (action) => {
+      if (action.type === "reset") {
+        measureManagedItems();
+      } else {
+        dispatch(action);
+        if (action.type.endsWith("overflow-indicator")) {
+          measureManagedItems(true);
+        }
+      }
+    },
+    [measureManagedItems]
+  );
+  useIsomorphicLayoutEffect(() => {
+    if (previousIdentityRef.current !== "") {
+      const overflowItems = 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
+  };
+};
+
+export { useOverflowCollectionItems };
+//# sourceMappingURL=useOverflowCollectionItems.js.map

package/dist-es/packages/lab/src/responsive/useOverflowCollectionItems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverflowCollectionItems.js","sources":["../src/responsive/useOverflowCollectionItems.ts"],"sourcesContent":["import {\n  useCallback,\n  useReducer,\n  useRef,\n  Children,\n  ReactElement,\n  ReactNode,\n  isValidElement,\n} from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\n\nimport {\n  OverflowItem,\n  OverflowCollectionOptions,\n  OverflowCollectionHookProps,\n  OverflowCollectionHookResult,\n  OverflowSource,\n} from \"./overflowTypes\";\nimport { measureOverflowItems } from \"./overflowUtils\";\nimport {\n  reducerInitialiser,\n  OverflowAction,\n  overflowReducer,\n  OverflowReducer,\n  OverflowReducerInitialisationProps,\n} from \"./OverflowReducer\";\n\nconst defaultOptions: OverflowCollectionOptions = {};\n\ntype WithLabel = { label?: string };\n\nconst defaultChildIdentity = (children: ReactNode) => {\n  const childLabels: string[] = [];\n  Children.forEach(children, (child) => {\n    if (isValidElement(child)) {\n      childLabels.push((child as ReactElement<WithLabel>).props.label ?? \"\");\n    }\n  });\n  return `${childLabels.length}:${childLabels.join(\":\")}`;\n};\n\nconst defaultSourceIdentity = (source: WithLabel[]): string => {\n  const labels = source.map(({ label }) => label).join(\":\");\n  return `${source.length}:${labels}`;\n};\n// We need to track structural changes to controlled source or child elements.\n// Simple identity won't work as child elements will be different on every render.\n// structural changes are addition or removal of items, reordering items.\n// Question, what if user changes prop in declarative TabPanel ?\nconst getItemsIdentity = (\n  defaultSource?: OverflowSource[],\n  source?: OverflowSource[],\n  children?: ReactNode\n): string => {\n  let identity;\n  if (Array.isArray(defaultSource)) {\n    identity = defaultSourceIdentity(defaultSource);\n  } else if (Array.isArray(source)) {\n    identity = defaultSourceIdentity(source);\n  } else {\n    identity = defaultChildIdentity(children);\n  }\n  return identity;\n};\n\ntype OverflowCollectionHook = (\n  props: OverflowCollectionHookProps\n) => OverflowCollectionHookResult;\n\nexport const useOverflowCollectionItems: OverflowCollectionHook = ({\n  children,\n  defaultSource,\n  id: idRoot,\n  injectedItems = [],\n  options = defaultOptions,\n  orientation,\n  label = \"\",\n  source,\n}) => {\n  const dataRef = useRef<OverflowItem[]>([]);\n  const versionRef = useRef(0);\n  const measureTimeout = useRef<number | null>(null);\n  const previousIdentityRef = useRef(\"\");\n  const fontsLoaded = useRef(false);\n  const identity = getItemsIdentity(defaultSource, source, children);\n  const isControlled = Array.isArray(source) || Children.count(children) > 0;\n  if (isControlled && defaultSource !== undefined) {\n    throw Error(\n      \"useOverflowCollectionItems: defaultSource prop should not be used in combination with either source prop or children \"\n    );\n  }\n\n  const [data, dispatch] = useReducer<\n    OverflowReducer,\n    OverflowReducerInitialisationProps\n  >(\n    overflowReducer,\n    {\n      children,\n      source: source || defaultSource,\n      injectedItems,\n      idRoot,\n      options,\n    },\n    reducerInitialiser\n  );\n\n  dataRef.current = data;\n\n  const measureManagedItems = useCallback(\n    (defer = false) => {\n      if (measureTimeout.current) {\n        window.clearTimeout(measureTimeout.current);\n        measureTimeout.current = null;\n      }\n      if (defer) {\n        measureTimeout.current = window.setTimeout(measureManagedItems, 30);\n      } else {\n        // If fonts have not yet loaded, measurements WILL be incorrect\n        if (fontsLoaded.current) {\n          const dimension = orientation === \"horizontal\" ? \"width\" : \"height\";\n          const overflowItems = measureOverflowItems(\n            dataRef.current,\n            dimension\n          );\n          // TODO if measurements have not changed, do nothing\n          // Track the generation of measured items. This can be used to trigger\n          // side effects when measurement takes place.\n          versionRef.current += 1;\n          dispatch({\n            type: \"init\",\n            overflowItems,\n          });\n        }\n      }\n    },\n    [orientation]\n  );\n\n  // Take the initial measurements of overflow items. All subsequent re-measurement will be\n  // triggered by either manipulation of the items or item state or updated source.\n  useIsomorphicLayoutEffect(() => {\n    async function measure(): Promise<void> {\n      const { fonts } = document;\n      if (fonts) {\n        await fonts.ready;\n        fontsLoaded.current = true;\n      } else {\n        fontsLoaded.current = true;\n      }\n      measureManagedItems();\n    }\n\n    measure().catch((err) => {\n      console.warn(`error occurred measuring Overflow Items`, err);\n    });\n  }, [measureManagedItems]);\n\n  const dispatchOverflowAction = useCallback(\n    (action: OverflowAction | { type: \"reset\" }) => {\n      if (action.type === \"reset\") {\n        measureManagedItems();\n      } else {\n        dispatch(action);\n\n        if (action.type.endsWith(\"overflow-indicator\")) {\n          measureManagedItems(true);\n        }\n      }\n    },\n    [measureManagedItems]\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (previousIdentityRef.current !== \"\") {\n      const overflowItems = reducerInitialiser({\n        children,\n        source: source || defaultSource,\n        injectedItems,\n        idRoot,\n        options,\n      });\n\n      dispatch({ type: \"init\", overflowItems });\n      measureManagedItems(true);\n    }\n    previousIdentityRef.current = identity;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [identity]);\n\n  return {\n    data,\n    dispatch: dispatchOverflowAction,\n    isControlled,\n    version: versionRef.current,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/packages/lab/src/responsive/useOverflowLayout.js

@@ -0,0 +1,150 @@
+import { useRef, useCallback, useEffect } from 'react';
+import { getIsOverflowed, measureContainerOverflow } from './overflowUtils.js';
+import { useDynamicCollapse } from './useDynamicCollapse.js';
+import { useInstantCollapse } from './useInstantCollapse.js';
+import { useOverflow } from './useOverflow.js';
+import { useReclaimSpace } from './useReclaimSpace.js';
+import { useResizeObserver } from './useResizeObserver.js';
+import '@salt-ds/core';
+
+const MONITORED_DIMENSIONS = {
+  horizontal: ["width", "scrollHeight"],
+  vertical: ["height", "scrollWidth"],
+  none: []
+};
+const useOverflowLayout = ({
+  collectionHook,
+  id,
+  orientation,
+  label = "Toolbar",
+  disableOverflow = false
+}) => {
+  const overflowContainerRef = useRef(null);
+  const overflowItemsRef = useRef([]);
+  const measurement = useRef({ innerContainerSize: 0, rootContainerDepth: 0 });
+  const { innerContainerSize } = measurement.current;
+  const { dispatch, version: collectionVersion } = collectionHook;
+  overflowItemsRef.current = collectionHook.data;
+  const {
+    onResize: onOverflowResize,
+    resetMeasurements: resetOverflowMeasurements
+  } = useOverflow({
+    collectionHook,
+    id,
+    label,
+    overflowItemsRef,
+    orientation,
+    overflowContainerRef
+  });
+  const hasOverflowedItems = getIsOverflowed(collectionHook.data);
+  const {
+    onResize: onDynamicResize,
+    resetMeasurements: resetDynamicMeasurements
+  } = useDynamicCollapse({
+    collectionHook,
+    innerContainerSize,
+    label,
+    overflowItemsRef,
+    orientation,
+    overflowContainerRef
+  });
+  const {
+    onResize: onInstantResize,
+    resetMeasurements: resetInstantMeasurements
+  } = useInstantCollapse({
+    collectionHook,
+    hasOverflowedItems,
+    innerContainerSize,
+    label,
+    overflowItemsRef,
+    orientation,
+    overflowContainerRef
+  });
+  const { onResize: onReclaimResize } = useReclaimSpace({
+    collectionHook,
+    label,
+    overflowItemsRef,
+    orientation,
+    overflowContainerRef
+  });
+  const resizeHandler = useCallback(
+    ({
+      scrollHeight,
+      height = scrollHeight,
+      scrollWidth,
+      width = scrollWidth
+    }) => {
+      const size = orientation === "horizontal" ? width : height;
+      if (typeof size === "number") {
+        const { innerContainerSize: innerContainerSize2 } = measurement.current;
+        const sizeDiff = size - innerContainerSize2;
+        if (Math.abs(sizeDiff) > 0.5) {
+          measurement.current.innerContainerSize = size;
+          const containerHasGrown = size > innerContainerSize2;
+          onDynamicResize(size, containerHasGrown);
+          onInstantResize(size, containerHasGrown);
+          onOverflowResize(size, containerHasGrown);
+          onReclaimResize(size, containerHasGrown);
+        }
+      }
+    },
+    [
+      onDynamicResize,
+      onInstantResize,
+      onOverflowResize,
+      onReclaimResize,
+      orientation
+    ]
+  );
+  const measureAndInitialize = useCallback(() => {
+    const { isOverflowing, ...contentWidthAndDepth } = measureContainerOverflow(
+      overflowContainerRef,
+      orientation
+    );
+    measurement.current = contentWidthAndDepth;
+    const { innerContainerSize: innerContainerSize2 } = contentWidthAndDepth;
+    let handled = resetInstantMeasurements(isOverflowing);
+    if (!handled) {
+      handled = resetDynamicMeasurements();
+      if (!handled) {
+        resetOverflowMeasurements == null ? void 0 : resetOverflowMeasurements(isOverflowing, innerContainerSize2);
+      }
+    }
+  }, [
+    orientation,
+    resetInstantMeasurements,
+    resetDynamicMeasurements,
+    resetOverflowMeasurements
+  ]);
+  const switchPriorities = useCallback(
+    (item1, item2) => {
+      const { priority: priority1 } = item1;
+      const { priority: priority2 } = item2;
+      if (priority1 !== priority2) {
+        dispatch({
+          type: "update-items",
+          overflowItems: [
+            { id: item1.id, priority: priority2 },
+            { id: item2.id, priority: priority1 }
+          ]
+        });
+        setTimeout(measureAndInitialize, 0);
+      }
+    },
+    [dispatch, measureAndInitialize]
+  );
+  useResizeObserver(
+    overflowContainerRef,
+    MONITORED_DIMENSIONS[disableOverflow ? "none" : orientation],
+    resizeHandler
+  );
+  useEffect(() => {
+    if (!disableOverflow) {
+      measureAndInitialize();
+    }
+  }, [collectionVersion, disableOverflow, measureAndInitialize]);
+  return [overflowContainerRef, switchPriorities];
+};
+
+export { useOverflowLayout };
+//# sourceMappingURL=useOverflowLayout.js.map

package/dist-es/packages/lab/src/responsive/useOverflowLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverflowLayout.js","sources":["../src/responsive/useOverflowLayout.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from \"react\";\nimport {\n  ElementRef,\n  ManagedListRef,\n  OverflowItem,\n  OverflowLayoutHookProps,\n} from \"./overflowTypes\";\n\nimport { getIsOverflowed } from \"./overflowUtils\";\nimport { useDynamicCollapse } from \"./useDynamicCollapse\";\nimport { useInstantCollapse } from \"./useInstantCollapse\";\nimport { useOverflow } from \"./useOverflow\";\nimport { useReclaimSpace } from \"./useReclaimSpace\";\nimport { ResizeHandler, useResizeObserver } from \"../responsive\";\n\nimport { measureContainerOverflow } from \"./overflowUtils\";\n\nconst MONITORED_DIMENSIONS: { [key: string]: string[] } = {\n  horizontal: [\"width\", \"scrollHeight\"],\n  vertical: [\"height\", \"scrollWidth\"],\n  none: [],\n};\n\ntype overflowUpdate = (item1: OverflowItem, item2: OverflowItem) => void;\n\n// we need id, just to be able to assign id to overflowIndicator in useOverflow\nexport const useOverflowLayout = ({\n  collectionHook,\n  id,\n  orientation,\n  label = \"Toolbar\",\n  disableOverflow = false,\n}: OverflowLayoutHookProps): [ElementRef, overflowUpdate] => {\n  const overflowContainerRef: ElementRef = useRef(null);\n  const overflowItemsRef: ManagedListRef = useRef([]);\n  const measurement = useRef({ innerContainerSize: 0, rootContainerDepth: 0 });\n  const { innerContainerSize } = measurement.current;\n\n  const { dispatch, version: collectionVersion } = collectionHook;\n  overflowItemsRef.current = collectionHook.data;\n\n  const {\n    onResize: onOverflowResize,\n    resetMeasurements: resetOverflowMeasurements,\n  } = useOverflow({\n    collectionHook,\n    id,\n    label,\n    overflowItemsRef,\n    orientation,\n    overflowContainerRef,\n  });\n\n  const hasOverflowedItems = getIsOverflowed(collectionHook.data);\n  // const hasOverflowedItems = getIsOverflowed(managedItems);\n\n  const {\n    onResize: onDynamicResize,\n    resetMeasurements: resetDynamicMeasurements,\n  } = useDynamicCollapse({\n    collectionHook,\n    innerContainerSize,\n    label,\n    overflowItemsRef,\n    orientation,\n    overflowContainerRef,\n  });\n\n  const {\n    onResize: onInstantResize,\n    resetMeasurements: resetInstantMeasurements,\n  } = useInstantCollapse({\n    collectionHook,\n    hasOverflowedItems,\n    innerContainerSize,\n    label,\n    overflowItemsRef,\n    orientation,\n    overflowContainerRef,\n  });\n\n  const { onResize: onReclaimResize } = useReclaimSpace({\n    collectionHook,\n    label,\n    overflowItemsRef,\n    orientation,\n    overflowContainerRef,\n  });\n\n  const resizeHandler: ResizeHandler = useCallback(\n    ({\n      scrollHeight,\n      height = scrollHeight,\n      scrollWidth,\n      width = scrollWidth,\n    }) => {\n      const size = orientation === \"horizontal\" ? width : height;\n      if (typeof size === \"number\") {\n        const { innerContainerSize } = measurement.current;\n        const sizeDiff = size - innerContainerSize;\n        // Tiny size diffs seem to be down to the relative sub-pixel innaccuracy of\n        // ResizeObserver vs getBoundingClientRect\n        if (Math.abs(sizeDiff) > 0.5) {\n          measurement.current.innerContainerSize = size;\n          const containerHasGrown = size > innerContainerSize;\n          // Note: any one of these hooks may trigger a render which\n          // may affect the overflow state that the next hook sees.\n          // Hence, they all test for overflow internally and independently.\n          onDynamicResize(size, containerHasGrown);\n          onInstantResize(size, containerHasGrown);\n          onOverflowResize(size, containerHasGrown);\n          onReclaimResize(size, containerHasGrown);\n        }\n      }\n    },\n    [\n      onDynamicResize,\n      onInstantResize,\n      onOverflowResize,\n      onReclaimResize,\n      orientation,\n    ]\n  );\n\n  const measureAndInitialize = useCallback(() => {\n    const { isOverflowing, ...contentWidthAndDepth } = measureContainerOverflow(\n      overflowContainerRef,\n      orientation\n    );\n\n    measurement.current = contentWidthAndDepth;\n    const { innerContainerSize } = contentWidthAndDepth;\n    // TODO check this with complex combinations\n    let handled = resetInstantMeasurements(isOverflowing);\n    if (!handled) {\n      handled = resetDynamicMeasurements();\n      if (!handled) {\n        resetOverflowMeasurements?.(isOverflowing, innerContainerSize);\n      }\n    }\n  }, [\n    orientation,\n    resetInstantMeasurements,\n    resetDynamicMeasurements,\n    resetOverflowMeasurements,\n  ]);\n\n  const switchPriorities = useCallback(\n    (item1: OverflowItem, item2: OverflowItem) => {\n      const { priority: priority1 } = item1;\n      const { priority: priority2 } = item2;\n      if (priority1 !== priority2) {\n        dispatch({\n          type: \"update-items\",\n          overflowItems: [\n            { id: item1.id, priority: priority2 },\n            { id: item2.id, priority: priority1 },\n          ],\n        });\n        // Why do we need a timeout here when we don't inside resizeHandler ?\n        setTimeout(measureAndInitialize, 0);\n      }\n    },\n    [dispatch, measureAndInitialize]\n  );\n\n  // Important that we register our resize handler before we measure and\n  // initialize. The initialization may trigger changes which we want the\n  // resize observer to detect (when we have nested overflowables).\n  useResizeObserver(\n    overflowContainerRef,\n    MONITORED_DIMENSIONS[disableOverflow ? \"none\" : orientation],\n    resizeHandler\n  );\n\n  // This hook runs after a measurememnt cycle, not after every single change to\n  // collection data. The version attribute has been introduced specifically for this.\n  useEffect(() => {\n    if (!disableOverflow) {\n      measureAndInitialize();\n    }\n  }, [collectionVersion, disableOverflow, measureAndInitialize]);\n\n  return [overflowContainerRef, switchPriorities];\n};\n"],"names":["innerContainerSize"],"mappings":"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"}