@salt-ds/lab 1.0.0-alpha.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowReducer.js","sources":["../src/responsive/OverflowReducer.ts"],"sourcesContent":["/**\n * This reducer manages a collection of items that represent the content of an overflowable container.\n * The items are mostly content configured by the caller of the container, either data passed though\n * the source prop or as child elements. We also support 'injected' items. These allow for additional UI\n * controls to be inserted into the container, eg an 'Add Item' button.\n */\nimport React, { isValidElement, ReactElement, ReactNode, Reducer } from \"react\";\n\nimport {\n  InjectedChildItem,\n  InjectedSourceItem,\n  OverflowItem,\n  OverflowItems,\n  OverflowCollectionOptions,\n  OverflowSource,\n} from \"./overflowTypes\";\n\ninterface InitAction {\n  type: \"init\";\n  overflowItems?: OverflowItem[];\n}\n\ninterface SourceAction {\n  type: \"add-source-item\";\n  idRoot: string;\n  source: any;\n}\ninterface AddChildAction {\n  type: \"add-child-item\";\n  idRoot: string;\n  indexPosition?: number;\n  element: ReactElement;\n}\ninterface RemoveItemAction {\n  type: \"remove-item\";\n  indexPosition: number;\n}\n\ninterface MultiItemAction {\n  type: \"update-items\" | \"update-items-remove-overflow-indicator\";\n  overflowItems: Partial<Omit<OverflowItem, \"id\">> & Pick<OverflowItem, \"id\">[];\n}\ninterface SingleItemAction {\n  type:\n    | \"add-overflow-indicator\"\n    | \"replace-item\"\n    | \"collapsing-item\"\n    | \"uncollapse-dynamic-item\"\n    | \"collapse-instant-item\";\n\n  overflowItem: OverflowItem;\n}\n\ninterface CombinedItemAction {\n  type: \"update-items-add-overflow-indicator\";\n  overflowItem: OverflowItem<any>;\n  overflowItems: OverflowItem[];\n}\n\ninterface EmptyPayloadAction {\n  type: \"restore-collapsing-item\";\n}\ninterface DynamicCollapseAction extends Omit<SingleItemAction, \"type\"> {\n  type: \"collapse-dynamic-item\";\n  collapsedSize: number;\n  minSize: number;\n}\n\nexport type OverflowAction =\n  | AddChildAction\n  | CombinedItemAction\n  | DynamicCollapseAction\n  | EmptyPayloadAction\n  | InitAction\n  | MultiItemAction\n  | RemoveItemAction\n  | SingleItemAction\n  | SourceAction;\n\nconst DEFAULT_PRIORITY = 3;\n\nconst mapReactElementChildren = (\n  children: ReactNode,\n  fn: (el: ReactElement, index: number) => OverflowItem\n): OverflowItem[] => {\n  const childElements: OverflowItem[] = [];\n  React.Children.forEach(children, (child, i) => {\n    if (isValidElement(child)) {\n      childElements.push(fn(child, i));\n    }\n  });\n  return childElements;\n};\n\nconst sourceItem = (\n  item: OverflowSource,\n  id: string,\n  index: number,\n  options?: OverflowCollectionOptions\n): OverflowItem<\"source\"> => {\n  const priority =\n    options?.getPriority?.(item, index) ?? item.priority ?? DEFAULT_PRIORITY;\n\n  return {\n    //TODO editable closeable configurable via item\n    closeable: item.closeable || options?.closeable,\n    editable: options?.editable,\n    element: null,\n    fullSize: null,\n    id: item.id ?? id,\n    index,\n    label: item.label,\n    position: item.position,\n    priority,\n    size: 0,\n    source: item,\n    type: \"source\",\n  };\n};\n\nconst createSourceItems = (\n  source: any,\n  idRoot: string,\n  options?: OverflowCollectionOptions\n): OverflowItem<\"source\">[] | undefined => {\n  if (Array.isArray(source)) {\n    return source.map((item, index) => {\n      const priority = options?.getPriority?.(source, index);\n      return sourceItem(item, `${idRoot}-${index}`, index, options);\n    });\n  }\n};\n\ntype OverflowChild = {\n  closeable?: boolean;\n  disabled?: boolean;\n  id?: string;\n  label?: string;\n  \"data-collapsible\"?: boolean;\n  \"data-editable\"?: boolean;\n  \"data-position\"?: number;\n  \"data-priority\"?: string;\n};\n\nconst childItem = (\n  child: ReactElement,\n  id: string,\n  index: number,\n  options?: OverflowCollectionOptions\n): OverflowItem<\"child\"> => {\n  const {\n    closeable,\n    disabled,\n    id: idProp,\n    label,\n    \"data-collapsible\": collapsible,\n    \"data-editable\": editable,\n    \"data-position\": dataPosition,\n    \"data-priority\": dataPriority = \"2\",\n  } = child.props as OverflowChild;\n\n  const priority = options?.getPriority?.(child, index);\n\n  return {\n    closeable: closeable || options?.closeable,\n    collapsible,\n    editable: editable ? true : options?.editable,\n    disabled,\n    fullSize: null,\n    id: idProp ?? id,\n    index,\n    element: child,\n    label,\n    position: dataPosition,\n    priority: priority ?? parseInt(dataPriority),\n    size: 0,\n    source: null,\n    type: \"child\",\n  } as OverflowItem;\n};\n\nconst createChildItems = (\n  children: React.ReactNode,\n  idRoot: string,\n  options?: OverflowCollectionOptions\n): OverflowItem<\"child\">[] | undefined => {\n  if (children) {\n    return mapReactElementChildren(children, (child, index) => {\n      const id = `${idRoot}-${index}`;\n      return childItem(child, id, index, options);\n    });\n  }\n};\n\nconst createInjectedContent = (\n  items: Array<InjectedSourceItem | InjectedChildItem>,\n  idRoot: string,\n  startIndex: number\n): OverflowItem<\"source\" | \"child\">[] => {\n  return items.map((item, i) => {\n    const index = startIndex + i;\n    const id = `${idRoot}-${index}`;\n    const { source } = item as InjectedSourceItem;\n    if (source) {\n      const injectedItem = sourceItem(source, id, index);\n      injectedItem.isInjectedItem = true;\n      return injectedItem;\n    } else {\n      const { element } = item as InjectedChildItem;\n      const injectedItem = childItem(element, id, index);\n      injectedItem.isInjectedItem = true;\n      return injectedItem;\n    }\n  });\n};\n\nexport type OverflowReducer = Reducer<OverflowItems, OverflowAction>;\n\nconst defaultOptions = {};\n\nexport type OverflowReducerInitialisationProps = {\n  children?: ReactNode;\n  source?: OverflowSource[];\n  injectedItems?: any[];\n  idRoot: string;\n  options?: OverflowCollectionOptions;\n};\n\nexport const reducerInitialiser: (\n  props: OverflowReducerInitialisationProps\n) => OverflowItems = ({\n  children,\n  source,\n  injectedItems = [],\n  idRoot,\n  options = defaultOptions,\n}) => {\n  const providedContent: OverflowItems =\n    createChildItems(children, idRoot, options) ||\n    createSourceItems(source, idRoot, options) ||\n    [];\n  const injectedContent = createInjectedContent(\n    injectedItems,\n    idRoot,\n    providedContent.length\n  );\n  return providedContent.concat(injectedContent);\n};\n\nconst collapsingItem = (\n  items: OverflowItem[],\n  { overflowItem }: SingleItemAction\n) =>\n  items.map((item) =>\n    item === overflowItem\n      ? {\n          ...item,\n          collapsing: true,\n        }\n      : item\n  );\n\nconst uncollapseDynamicItem = (\n  items: OverflowItem[],\n  { overflowItem }: SingleItemAction\n) =>\n  items.map((item) =>\n    item === overflowItem\n      ? {\n          ...item,\n          collapsed: false,\n          collapsing: true,\n          size: item.fullSize as number,\n          fullSize: null,\n        }\n      : item\n  );\n\nconst collapseInstantItem = (\n  items: OverflowItem[],\n  { overflowItem }: SingleItemAction\n) =>\n  items.map((item) =>\n    item === overflowItem\n      ? {\n          ...item,\n          collapsed: true,\n        }\n      : item\n  );\n\nconst replaceItem = (\n  items: OverflowItem[],\n  { overflowItem }: SingleItemAction\n) =>\n  items.map((item) =>\n    item.index === overflowItem?.index ? overflowItem : item\n  );\n\nconst updateItems = (\n  items: OverflowItem[],\n  { overflowItems = [] }: MultiItemAction\n) => {\n  return items.map((item) => {\n    const targetItem = overflowItems.find((i) => i.id === item.id);\n    return targetItem ? { ...item, ...targetItem } : item;\n  });\n};\n\nconst restoreCollapsingItem = (items: OverflowItem[]) => {\n  const collapsingItem = items.find(\n    ({ collapsible, collapsing }) => collapsible === \"dynamic\" && collapsing\n  );\n  const collapsedItem = items.find(\n    ({ collapsible, collapsed }) => collapsible === \"dynamic\" && collapsed\n  );\n  return items.map((item) => {\n    if (item === collapsingItem) {\n      return {\n        ...item,\n        collapsing: false,\n      };\n    } else if (item === collapsedItem) {\n      return {\n        ...item,\n        collapsed: false,\n        collapsing: true,\n      };\n    } else {\n      return item;\n    }\n  });\n};\n\nconst collapseDynamicItem = (\n  items: OverflowItem[],\n  { overflowItem, collapsedSize = 0, minSize = 0 }: DynamicCollapseAction\n) => {\n  const remainingUncollpasedItems = items.filter(\n    (i) => i.collapsible === \"dynamic\" && !i.collapsed && i !== overflowItem\n  );\n  const lastUncollapsedItem = remainingUncollpasedItems.pop();\n\n  return items.map((item) => {\n    if (item === overflowItem) {\n      return {\n        ...item,\n        collapsing: false,\n        collapsed: true,\n        fullSize: item.size,\n        minSize,\n        size: collapsedSize,\n      };\n    } else if (item === lastUncollapsedItem) {\n      return {\n        ...item,\n        collapsing: true,\n      };\n    } else {\n      return item;\n    }\n  });\n};\n\nconst addSourceItem = (\n  items: OverflowItem<any>[],\n  { idRoot, source }: SourceAction\n): OverflowItem[] => {\n  const index = items.length;\n  return items.concat(sourceItem(source, `${idRoot}-${index}`, index));\n};\n\nconst removeItem = (\n  items: OverflowItem<any>[],\n  { indexPosition }: RemoveItemAction\n): OverflowItem[] => {\n  return items.slice(0, indexPosition).concat(items.slice(indexPosition + 1));\n};\n\nconst addOverflowIndicator = (\n  items: OverflowItem<any>[],\n  { overflowItem }: SingleItemAction\n) => {\n  // Guard against accidental duplicate overflowIndicator\n  if (!items.find((i) => i.isOverflowIndicator)) {\n    if (items.find((i) => i.label === \"Add Tab\")) {\n      const [addTab] = items.slice(-1);\n      return items\n        .slice(0, -1)\n        .concat({ ...overflowItem, index: addTab.index })\n        .concat({ ...addTab, index: overflowItem.index });\n    } else {\n      return items.concat(overflowItem);\n    }\n  } else {\n    return items;\n  }\n};\n\nexport const overflowReducer: OverflowReducer = (state, action) => {\n  switch (action.type) {\n    case \"init\":\n      return action.overflowItems ?? state;\n    case \"add-overflow-indicator\":\n      return addOverflowIndicator(state, action);\n\n    case \"update-items\":\n      return updateItems(state, action);\n\n    case \"replace-item\":\n      return replaceItem(state, action);\n\n    case \"update-items-add-overflow-indicator\":\n      return addOverflowIndicator(\n        updateItems(state, {\n          type: \"update-items\",\n          overflowItems: action.overflowItems,\n        }),\n        { type: \"add-overflow-indicator\", overflowItem: action.overflowItem }\n      );\n\n    case \"update-items-remove-overflow-indicator\":\n      return updateItems(state, {\n        type: \"update-items\",\n        overflowItems: action.overflowItems,\n      }).filter((item) => !item.isOverflowIndicator);\n\n    case \"collapsing-item\":\n      return collapsingItem(state, action);\n\n    case \"collapse-dynamic-item\":\n      return collapseDynamicItem(state, action);\n\n    case \"uncollapse-dynamic-item\":\n      return uncollapseDynamicItem(state, action);\n\n    case \"restore-collapsing-item\":\n      return restoreCollapsingItem(state);\n\n    case \"collapse-instant-item\":\n      return collapseInstantItem(state, action);\n\n    case \"add-source-item\":\n      return addSourceItem(state, action);\n\n    case \"remove-item\":\n      return removeItem(state, action);\n\n    default:\n      return state;\n  }\n};\n"],"names":["collapsingItem"],"mappings":"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"}

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

@@ -0,0 +1,130 @@
+import { jsx } from 'react/jsx-runtime';
+
+const DropdownPlaceholder = () => null;
+const getDropdownPlaceholder = () => /* @__PURE__ */ jsx(DropdownPlaceholder, {});
+const NO_DATA = {};
+const LEFT_RIGHT = ["left", "right"];
+const TOP_BOTTOM = ["top", "bottom"];
+const allExceptOverflowIndicator = (sum, m) => sum + (m.isOverflowIndicator ? 0 : m.size);
+const isCollapsed = (item) => item.collapsed === true;
+const isCollapsing = (item) => item.collapsing === true;
+const isCollapsedOrCollapsing = (item) => isCollapsed(item) || isCollapsing(item);
+const isOverflowed = (item) => item.overflowed === true;
+const notOverflowed = (item) => !isOverflowed(item);
+const isCollapsible = (item) => item.collapsible === "instant" || item.collapsible === "dynamic";
+const getIsOverflowed = (managedItems) => managedItems.some(isOverflowed);
+const measureContainer = (ref, orientation = "horizontal") => {
+  const innerElement = ref.current;
+  const container = innerElement.parentElement;
+  if (container) {
+    const { width: innerWidth, height: innerHeight } = innerElement.getBoundingClientRect();
+    const { width, height } = container.getBoundingClientRect();
+    if (orientation === "horizontal") {
+      return {
+        innerContainerSize: innerWidth,
+        rootContainerDepth: height,
+        innerContainerDepth: innerHeight
+      };
+    } else {
+      return {
+        innerContainerSize: innerHeight,
+        rootContainerDepth: width,
+        innerContainerDepth: innerWidth
+      };
+    }
+  } else {
+    throw Error("measureContainer, innerContainer has no parent element");
+  }
+};
+const isContainerOverflowing = (containerDepth, parentContainerDepth, innerElement, orientation) => {
+  const isHorizontal = orientation === "horizontal";
+  if (containerDepth > parentContainerDepth) {
+    return true;
+  } else {
+    const { bottom, right } = innerElement.getBoundingClientRect();
+    const maxPos = Array.from(innerElement.childNodes).reduce(
+      (maxVal, child) => {
+        const rect = child.getBoundingClientRect();
+        return Math.max(isHorizontal ? rect.bottom : rect.right, maxVal);
+      },
+      isHorizontal ? bottom : right
+    );
+    return isHorizontal ? maxPos > bottom : maxPos > right;
+  }
+};
+const measureContainerOverflow = (ref, orientation = "horizontal") => {
+  const { innerContainerDepth, innerContainerSize, rootContainerDepth } = measureContainer(ref, orientation);
+  const innerElement = ref.current;
+  const isOverflowing = isContainerOverflowing(
+    innerContainerDepth,
+    rootContainerDepth,
+    innerElement,
+    orientation
+  );
+  return { isOverflowing, innerContainerSize, rootContainerDepth };
+};
+function measureElementSize(element, dimension = "width", includeAutoMargin = false) {
+  const { [dimension]: size } = element.getBoundingClientRect();
+  const { padEnd = false, padStart = false } = element.dataset;
+  const style = getComputedStyle(element);
+  const [start, end] = dimension === "width" ? LEFT_RIGHT : TOP_BOTTOM;
+  const marginStart = padStart && !includeAutoMargin ? 0 : parseInt(style.getPropertyValue(`margin-${start}`), 10);
+  const marginEnd = padEnd && !includeAutoMargin ? 0 : parseInt(style.getPropertyValue(`margin-${end}`), 10);
+  let minWidth = size;
+  const flexShrink = parseInt(style.getPropertyValue("flex-shrink"), 10);
+  if (flexShrink > 0) {
+    const flexBasis = parseInt(style.getPropertyValue("flex-basis"), 10);
+    if (!isNaN(flexBasis) && flexBasis > 0) {
+      minWidth = flexBasis;
+    }
+  }
+  return marginStart + minWidth + marginEnd;
+}
+const byDescendingPriority = (m1, m2) => {
+  let result = m1.priority - m2.priority;
+  if (result === 0) {
+    result = m1.index - m2.index;
+  }
+  return result;
+};
+const getOverflowIndicator = (managedItems) => managedItems.find((item) => item.isOverflowIndicator);
+const getPriority = (item) => item.priority;
+const popNextItemByPriority = (items) => {
+  const maxPriority = Math.max(...items.map(getPriority));
+  for (let i = items.length - 1; i >= 0; i--) {
+    if (!items[i].isOverflowIndicator && items[i].priority === maxPriority) {
+      return items.splice(i, 1)[0];
+    }
+  }
+  return null;
+};
+const measureOverflowItems = (items, dimension) => {
+  const measurements = items.map(({ id }) => {
+    const childElement = document.getElementById(id);
+    const size = childElement ? measureElementSize(childElement, dimension) : 0;
+    return size;
+  });
+  if (measurements.some((size, i) => size !== items[i].size)) {
+    return items.map(
+      (item, i) => item.size === measurements[i] ? item : {
+        ...item,
+        size: measurements[i]
+      }
+    );
+  } else {
+    return items;
+  }
+};
+const addAll = (sum, m) => sum + m.size;
+const getElementForItem = (ref, item) => ref.current.querySelector(
+  `:scope > [data-index='${item.index}']`
+);
+const getRuntimePadding = (el, ...dimensions) => {
+  const targetStyle = getComputedStyle(el);
+  return dimensions.map(
+    (dimension) => parseInt(targetStyle.getPropertyValue(`padding-${dimension}`), 10)
+  );
+};
+
+export { DropdownPlaceholder, NO_DATA, addAll, allExceptOverflowIndicator, byDescendingPriority, getDropdownPlaceholder, getElementForItem, getIsOverflowed, getOverflowIndicator, getRuntimePadding, isCollapsed, isCollapsedOrCollapsing, isCollapsible, isCollapsing, isOverflowed, measureContainer, measureContainerOverflow, measureElementSize, measureOverflowItems, notOverflowed, popNextItemByPriority };
+//# sourceMappingURL=overflowUtils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overflowUtils.js","sources":["../src/responsive/overflowUtils.tsx"],"sourcesContent":["import {\n  collapsibleType,\n  ElementRef,\n  OverflowItem,\n  orientationType,\n} from \"./overflowTypes\";\n\nexport const DropdownPlaceholder = () => null;\nexport const getDropdownPlaceholder = () => <DropdownPlaceholder />;\n\nexport type heightOrWidth = \"width\" | \"height\";\nexport const NO_DATA = {};\nconst LEFT_RIGHT = [\"left\", \"right\"];\nconst TOP_BOTTOM = [\"top\", \"bottom\"];\n\nexport const allExceptOverflowIndicator = (sum: number, m: OverflowItem) =>\n  sum + (m.isOverflowIndicator ? 0 : m.size);\n\nexport const isCollapsed = (item: OverflowItem): boolean =>\n  item.collapsed === true;\nexport const isCollapsing = (item: OverflowItem): boolean =>\n  item.collapsing === true;\nexport const isCollapsedOrCollapsing = (item: OverflowItem): boolean =>\n  isCollapsed(item) || isCollapsing(item);\nexport const isOverflowed = (item: OverflowItem): boolean =>\n  item.overflowed === true;\nexport const notOverflowed = (item: OverflowItem): boolean =>\n  !isOverflowed(item);\n\nexport const isCollapsible = (item: OverflowItem) =>\n  item.collapsible === \"instant\" || item.collapsible === \"dynamic\";\n\nexport const getIsOverflowed = (managedItems: OverflowItem[]) =>\n  managedItems.some(isOverflowed);\n\nexport const measureContainer = (\n  ref: ElementRef,\n  orientation: orientationType = \"horizontal\"\n): {\n  innerContainerSize: number;\n  rootContainerDepth: number;\n  innerContainerDepth: number;\n} => {\n  const innerElement = ref.current as HTMLElement;\n  const container = innerElement.parentElement;\n  if (container) {\n    const { width: innerWidth, height: innerHeight } =\n      innerElement.getBoundingClientRect();\n    const { width, height } = container.getBoundingClientRect();\n    if (orientation === \"horizontal\") {\n      return {\n        innerContainerSize: innerWidth,\n        rootContainerDepth: height,\n        innerContainerDepth: innerHeight,\n      };\n    } else {\n      return {\n        innerContainerSize: innerHeight,\n        rootContainerDepth: width,\n        innerContainerDepth: innerWidth,\n      };\n    }\n  } else {\n    throw Error(\"measureContainer, innerContainer has no parent element\");\n  }\n};\n\nconst isContainerOverflowing = (\n  containerDepth: number,\n  parentContainerDepth: number,\n  innerElement: HTMLElement,\n  orientation: orientationType\n) => {\n  const isHorizontal = orientation === \"horizontal\";\n  // If true, this is a reliable indication of content wrapping, but the containerDepth\n  // is not always correct\n  if (containerDepth > parentContainerDepth) {\n    return true;\n  } else {\n    // ... hence - expensive, but catches those situations where the containerDepth is wrong\n    const { bottom, right } = innerElement.getBoundingClientRect();\n    const maxPos = Array.from(innerElement.childNodes).reduce<number>(\n      (maxVal, child) => {\n        const rect = (child as HTMLElement).getBoundingClientRect();\n        return Math.max(isHorizontal ? rect.bottom : rect.right, maxVal);\n      },\n      isHorizontal ? bottom : right\n    );\n    return isHorizontal ? maxPos > bottom : maxPos > right;\n  }\n};\n\nexport const measureContainerOverflow = (\n  ref: ElementRef,\n  orientation: orientationType = \"horizontal\"\n): {\n  isOverflowing: boolean;\n  innerContainerSize: number;\n  rootContainerDepth: number;\n} => {\n  const { innerContainerDepth, innerContainerSize, rootContainerDepth } =\n    measureContainer(ref, orientation);\n  const innerElement = ref.current as HTMLElement;\n  const isOverflowing = isContainerOverflowing(\n    innerContainerDepth,\n    rootContainerDepth,\n    innerElement,\n    orientation\n  );\n\n  return { isOverflowing, innerContainerSize, rootContainerDepth };\n};\n\n/**\n * Compute element size including margin.\n * Exclude margin where this has been applied for alignment, via margin: auto\n * which can be identified by the data-pad-end, data-pad-start attributes.\n **/\nexport function measureElementSize(\n  element: HTMLElement,\n  dimension: heightOrWidth = \"width\",\n  includeAutoMargin = false\n): number {\n  const { [dimension]: size } = element.getBoundingClientRect();\n  const { padEnd = false, padStart = false } = element.dataset;\n  const style = getComputedStyle(element);\n  const [start, end] = dimension === \"width\" ? LEFT_RIGHT : TOP_BOTTOM;\n  const marginStart =\n    padStart && !includeAutoMargin\n      ? 0\n      : parseInt(style.getPropertyValue(`margin-${start}`), 10);\n  const marginEnd =\n    padEnd && !includeAutoMargin\n      ? 0\n      : parseInt(style.getPropertyValue(`margin-${end}`), 10);\n\n  let minWidth = size;\n  const flexShrink = parseInt(style.getPropertyValue(\"flex-shrink\"), 10);\n  if (flexShrink > 0) {\n    const flexBasis = parseInt(style.getPropertyValue(\"flex-basis\"), 10);\n    // TODO should we consider percentage values ?\n    // TODO are we still using flexBasis ?\n    if (!isNaN(flexBasis) && flexBasis > 0) {\n      minWidth = flexBasis;\n    }\n  }\n\n  return marginStart + minWidth + marginEnd;\n}\n\nexport const byDescendingPriority = (m1: OverflowItem, m2: OverflowItem) => {\n  let result = m1.priority - m2.priority;\n  if (result === 0) {\n    result = m1.index - m2.index;\n  }\n  return result;\n};\n\n// Helper function to try and determine the display label for an overflow item\n// Currently, Tab uses data-text, so this works for any Tab. Need to decide\n// whether this is appropriate for other components.\n// Note: Tab uses data-text for another reason, it is not implemented there just to\n// support this function.\n// There may be an aria attribute we should use instead\n// function getElementText(element: HTMLElement) {\n//   if (element.dataset.text) {\n//     return element.dataset.text;\n//   }\n//   const textNode = element.querySelector(\"[data-text]\") as HTMLElement;\n//   if (textNode) {\n//     return textNode.dataset.text;\n//   }\n//   return \"\";\n// }\n// const asCollapsibleType = (value?: string): collapsibleType | undefined =>\n//   value === \"instant\" || value == \"dynamic\"\n//     ? (value as collapsibleType)\n//     : undefined;\n\nexport const getOverflowIndicator = (managedItems: OverflowItem[]) =>\n  managedItems.find((item) => item.isOverflowIndicator);\n\n// TODO whats the right way to deduce the label. AccessibleText added\n// to eg delete button makes innerText unreliable.\n// const getLabelForElement = (element: HTMLElement) =>\n//   element.title || getElementText(element) || element.innerText;\n\nconst getPriority = (item: OverflowItem) => item.priority;\n\nexport const popNextItemByPriority = (\n  items: OverflowItem[]\n): OverflowItem | null => {\n  const maxPriority = Math.max(...items.map(getPriority));\n  for (let i = items.length - 1; i >= 0; i--) {\n    if (!items[i].isOverflowIndicator && items[i].priority === maxPriority) {\n      return items.splice(i, 1)[0];\n    }\n  }\n  return null;\n};\n\nexport const measureOverflowItems = (\n  items: OverflowItem[],\n  dimension: heightOrWidth\n): OverflowItem[] => {\n  const measurements = items.map(({ id }) => {\n    const childElement = document.getElementById(id);\n    const size = childElement ? measureElementSize(childElement, dimension) : 0;\n    return size;\n  });\n\n  if (measurements.some((size, i) => size !== items[i].size)) {\n    return items.map((item, i) =>\n      item.size === measurements[i]\n        ? item\n        : {\n            ...item,\n            size: measurements[i],\n          }\n    );\n  } else {\n    return items;\n  }\n};\n\nexport const addAll = (sum: number, m: OverflowItem): number => sum + m.size;\n\nexport const getElementForItem = (ref: ElementRef, item: OverflowItem) =>\n  ref.current!.querySelector(\n    `:scope > [data-index='${item.index}']`\n  ) as HTMLElement;\n\ntype dimension = \"left\" | \"right\" | \"top\" | \"bottom\";\n\nexport const getRuntimePadding = (\n  el: HTMLElement,\n  ...dimensions: dimension[]\n): number[] => {\n  const targetStyle = getComputedStyle(el);\n  return dimensions.map((dimension) =>\n    parseInt(targetStyle.getPropertyValue(`padding-${dimension}`), 10)\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,144 @@
+import { useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { useState, useCallback } from 'react';
+import { measureElementSize, getElementForItem, getRuntimePadding, measureContainerOverflow, isCollapsed, isCollapsible, byDescendingPriority } from './overflowUtils.js';
+
+const UNCOLLAPSED_DYNAMIC_ITEMS = '[data-collapsible="dynamic"]:not([data-collapsed="true"]):not([data-collapsing="true"])';
+const hasUncollapsedDynamicItems = (containerRef) => containerRef.current.querySelector(UNCOLLAPSED_DYNAMIC_ITEMS) !== null;
+const thereAreCollapsibleItemsAndTheyAreAllCollapsed = (items) => {
+  const collapsibleItems = items.filter(isCollapsible);
+  return collapsibleItems.length > 0 && collapsibleItems.every(isCollapsed);
+};
+const nextItemToCollapse = (listItems) => listItems.filter(isCollapsible).sort(byDescendingPriority).slice(-1)[0];
+const useDynamicCollapse = ({
+  collectionHook,
+  innerContainerSize = 0,
+  label = "Toolbar",
+  overflowItemsRef: managedItemsRef,
+  overflowContainerRef: ref,
+  orientation
+}) => {
+  const { dispatch } = collectionHook;
+  const [newCollapsingItem, setNewCollapsingItem] = useState(null);
+  const restoreCollapsingItem = useCallback(() => {
+    dispatch({
+      type: "restore-collapsing-item"
+    });
+  }, [dispatch]);
+  const collapseCollapsingItem = useCallback(
+    (item, target, minSize) => {
+      const styleDimension = orientation === "horizontal" ? "minWidth" : "minHeight";
+      target.style[styleDimension] = `${minSize}px`;
+      const size = measureElementSize(target);
+      dispatch({
+        type: "collapse-dynamic-item",
+        overflowItem: item,
+        collapsedSize: size,
+        minSize
+      });
+    },
+    [dispatch, orientation]
+  );
+  const checkDynamicContent = useCallback(
+    (containerHasGrown) => {
+      const { current: managedItems } = managedItemsRef;
+      const collapsingChild = managedItems.find(
+        ({ collapsible, collapsing }) => collapsible === "dynamic" && collapsing
+      );
+      const collapsedChild = managedItems.find(
+        ({ collapsible, collapsed }) => collapsible === "dynamic" && collapsed
+      );
+      if (!collapsingChild && !collapsedChild) {
+        return;
+      }
+      if (collapsedChild && !collapsingChild) {
+        dispatch({
+          type: "uncollapse-dynamic-item",
+          overflowItem: collapsedChild
+        });
+      } else if (collapsingChild) {
+        if (containerHasGrown && collapsedChild) {
+          const collapsingElement = getElementForItem(ref, collapsingChild);
+          const dimension = orientation === "horizontal" ? "width" : "height";
+          const size = measureElementSize(collapsingElement, dimension);
+          if (collapsedChild && size === collapsingChild.size) {
+            restoreCollapsingItem();
+          }
+        } else {
+          const dimension = orientation === "horizontal" ? "width" : "height";
+          const collapsingElement = getElementForItem(ref, collapsingChild);
+          const { [dimension]: measuredSizeOfCollapsingElement } = collapsingElement.getBoundingClientRect();
+          const [padStart, padEnd] = getRuntimePadding(
+            collapsingElement,
+            "left",
+            "right"
+          );
+          const lastTooltrayItem = collapsingElement.querySelector(
+            ".Responsive-inner > :last-child"
+          );
+          if (lastTooltrayItem) {
+            const { [dimension]: childMinSize } = lastTooltrayItem.getBoundingClientRect();
+            const minSize = padStart + childMinSize + padEnd;
+            if (Math.floor(measuredSizeOfCollapsingElement) <= minSize) {
+              collapseCollapsingItem(
+                collapsingChild,
+                collapsingElement,
+                minSize
+              );
+            }
+          }
+        }
+      }
+    },
+    [
+      collapseCollapsingItem,
+      dispatch,
+      managedItemsRef,
+      orientation,
+      ref,
+      restoreCollapsingItem
+    ]
+  );
+  const handleResize = useCallback(
+    (size, containerHasGrown) => {
+      const { current: managedItems } = managedItemsRef;
+      const { isOverflowing: willOverflow } = measureContainerOverflow(
+        ref,
+        orientation
+      );
+      const collapsingItem = managedItems.find((item) => item.collapsing);
+      if (collapsingItem) {
+        checkDynamicContent(containerHasGrown);
+      } else if (containerHasGrown && !willOverflow && thereAreCollapsibleItemsAndTheyAreAllCollapsed(managedItems)) {
+        checkDynamicContent(true);
+      }
+    },
+    [checkDynamicContent, managedItemsRef, orientation, ref]
+  );
+  const resetMeasurements = useCallback(() => {
+    const { current: managedItems } = managedItemsRef;
+    const hasDynamicItems = hasUncollapsedDynamicItems(ref);
+    if (hasDynamicItems) {
+      const collapsingItem = nextItemToCollapse(managedItems);
+      setNewCollapsingItem(collapsingItem);
+      dispatch({
+        type: "collapsing-item",
+        overflowItem: collapsingItem
+      });
+      return true;
+    } else {
+      return false;
+    }
+  }, [dispatch, managedItemsRef, ref]);
+  useIsomorphicLayoutEffect(() => {
+    if (newCollapsingItem) {
+      checkDynamicContent(false);
+    }
+  }, [checkDynamicContent, newCollapsingItem]);
+  return {
+    onResize: handleResize,
+    resetMeasurements
+  };
+};
+
+export { useDynamicCollapse };
+//# sourceMappingURL=useDynamicCollapse.js.map

package/dist-es/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":[],"mappings":";;;;AAkBA,MAAM,yBACJ,GAAA,yFAAA,CAAA;AAEF,MAAM,6BAA6B,CAAC,YAAA,KAClC,aAAa,OAAS,CAAA,aAAA,CAAc,yBAAyB,CAAM,KAAA,IAAA,CAAA;AAErE,MAAM,8CAAA,GAAiD,CACrD,KACG,KAAA;AACH,EAAM,MAAA,gBAAA,GAAmB,KAAM,CAAA,MAAA,CAAO,aAAa,CAAA,CAAA;AACnD,EAAA,OAAO,gBAAiB,CAAA,MAAA,GAAS,CAAK,IAAA,gBAAA,CAAiB,MAAM,WAAW,CAAA,CAAA;AAC1E,CAAA,CAAA;AAEA,MAAM,kBAAqB,GAAA,CAAC,SAC1B,KAAA,SAAA,CAAU,MAAO,CAAA,aAAa,CAAE,CAAA,IAAA,CAAK,oBAAoB,CAAA,CAAE,KAAM,CAAA,CAAA,CAAE,CAAE,CAAA,CAAA,CAAA,CAAA;AAEhE,MAAM,qBAAqB,CAAC;AAAA,EACjC,cAAA;AAAA,EACA,kBAAqB,GAAA,CAAA;AAAA,EACrB,KAAQ,GAAA,SAAA;AAAA,EACR,gBAAkB,EAAA,eAAA;AAAA,EAClB,oBAAsB,EAAA,GAAA;AAAA,EACtB,WAAA;AACF,CAAoD,KAAA;AAClD,EAAM,MAAA,EAAE,UAAa,GAAA,cAAA,CAAA;AACrB,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAC5C,SAA8B,IAAI,CAAA,CAAA;AACpC,EAAM,MAAA,qBAAA,GAAwB,YAAY,MAAM;AAC9C,IAAS,QAAA,CAAA;AAAA,MACP,IAAM,EAAA,yBAAA;AAAA,KACP,CAAA,CAAA;AAAA,GACH,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAA,MAAM,sBAAyB,GAAA,WAAA;AAAA,IAC7B,CAAC,IAAoB,EAAA,MAAA,EAAqB,OAAoB,KAAA;AAC5D,MAAM,MAAA,cAAA,GACJ,WAAgB,KAAA,YAAA,GAAe,UAAa,GAAA,WAAA,CAAA;AAE9C,MAAO,MAAA,CAAA,KAAA,CAAM,kBAAkB,CAAG,EAAA,OAAA,CAAA,EAAA,CAAA,CAAA;AAClC,MAAM,MAAA,IAAA,GAAO,mBAAmB,MAAM,CAAA,CAAA;AAEtC,MAAS,QAAA,CAAA;AAAA,QACP,IAAM,EAAA,uBAAA;AAAA,QACN,YAAc,EAAA,IAAA;AAAA,QACd,aAAe,EAAA,IAAA;AAAA,QACf,OAAA;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AAAA,IACA,CAAC,UAAU,WAAW,CAAA;AAAA,GACxB,CAAA;AAEA,EAAA,MAAM,mBAAsB,GAAA,WAAA;AAAA,IAC1B,CAAC,iBAAgC,KAAA;AAC/B,MAAM,MAAA,EAAE,OAAS,EAAA,YAAA,EAAiB,GAAA,eAAA,CAAA;AAElC,MAAA,MAAM,kBAAkB,YAAa,CAAA,IAAA;AAAA,QACnC,CAAC,EAAE,WAAA,EAAa,UAAW,EAAA,KAAM,gBAAgB,SAAa,IAAA,UAAA;AAAA,OAChE,CAAA;AACA,MAAA,MAAM,iBAAiB,YAAa,CAAA,IAAA;AAAA,QAClC,CAAC,EAAE,WAAA,EAAa,SAAU,EAAA,KAAM,gBAAgB,SAAa,IAAA,SAAA;AAAA,OAC/D,CAAA;AAEA,MAAI,IAAA,CAAC,eAAmB,IAAA,CAAC,cAAgB,EAAA;AACvC,QAAA,OAAA;AAAA,OACF;AACA,MAAI,IAAA,cAAA,IAAkB,CAAC,eAAiB,EAAA;AAItC,QAAS,QAAA,CAAA;AAAA,UACP,IAAM,EAAA,yBAAA;AAAA,UACN,YAAc,EAAA,cAAA;AAAA,SACf,CAAA,CAAA;AAAA,iBACQ,eAAiB,EAAA;AAC1B,QAAA,IAAI,qBAAqB,cAAgB,EAAA;AACvC,UAAM,MAAA,iBAAA,GAAoB,iBAAkB,CAAA,GAAA,EAAK,eAAe,CAAA,CAAA;AAChE,UAAM,MAAA,SAAA,GAAY,WAAgB,KAAA,YAAA,GAAe,OAAU,GAAA,QAAA,CAAA;AAE3D,UAAM,MAAA,IAAA,GAAO,kBAAmB,CAAA,iBAAA,EAAmB,SAAS,CAAA,CAAA;AAI5D,UAAI,IAAA,cAAA,IAAkB,IAAS,KAAA,eAAA,CAAgB,IAAM,EAAA;AACnD,YAAsB,qBAAA,EAAA,CAAA;AAAA,WACxB;AAAA,SACK,MAAA;AAGL,UAAM,MAAA,SAAA,GAAY,WAAgB,KAAA,YAAA,GAAe,OAAU,GAAA,QAAA,CAAA;AAC3D,UAAM,MAAA,iBAAA,GAAoB,iBAAkB,CAAA,GAAA,EAAK,eAAe,CAAA,CAAA;AAChE,UAAA,MAAM,EAAG,CAAA,SAAA,GAAY,+BAAgC,EAAA,GACnD,kBAAkB,qBAAsB,EAAA,CAAA;AAE1C,UAAM,MAAA,CAAC,QAAU,EAAA,MAAM,CAAI,GAAA,iBAAA;AAAA,YACzB,iBAAA;AAAA,YACA,MAAA;AAAA,YACA,OAAA;AAAA,WACF,CAAA;AAGA,UAAA,MAAM,mBAAmB,iBAAkB,CAAA,aAAA;AAAA,YACzC,iCAAA;AAAA,WACF,CAAA;AACA,UAAA,IAAI,gBAAkB,EAAA;AACpB,YAAA,MAAM,EAAG,CAAA,SAAA,GAAY,YAAa,EAAA,GAChC,iBAAiB,qBAAsB,EAAA,CAAA;AACzC,YAAM,MAAA,OAAA,GAAU,WAAW,YAAe,GAAA,MAAA,CAAA;AAC1C,YAAA,IAAI,IAAK,CAAA,KAAA,CAAM,+BAA+B,CAAA,IAAK,OAAS,EAAA;AAC1D,cAAA,sBAAA;AAAA,gBACE,eAAA;AAAA,gBACA,iBAAA;AAAA,gBACA,OAAA;AAAA,eACF,CAAA;AAAA,aACF;AAAA,WACF;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA;AAAA,MACE,sBAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAA;AAAA,MACA,WAAA;AAAA,MACA,GAAA;AAAA,MACA,qBAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,MAAc,iBAAgC,KAAA;AAC7C,MAAM,MAAA,EAAE,OAAS,EAAA,YAAA,EAAiB,GAAA,eAAA,CAAA;AAClC,MAAM,MAAA,EAAE,aAAe,EAAA,YAAA,EAAiB,GAAA,wBAAA;AAAA,QACtC,GAAA;AAAA,QACA,WAAA;AAAA,OACF,CAAA;AAEA,MAAA,MAAM,iBAAiB,YAAa,CAAA,IAAA,CAAK,CAAC,IAAA,KAAS,KAAK,UAAU,CAAA,CAAA;AAElE,MAAA,IAAI,cAAgB,EAAA;AAClB,QAAA,mBAAA,CAAoB,iBAAiB,CAAA,CAAA;AAAA,iBAErC,iBACA,IAAA,CAAC,YACD,IAAA,8CAAA,CAA+C,YAAY,CAC3D,EAAA;AACA,QAAA,mBAAA,CAAoB,IAAI,CAAA,CAAA;AAAA,OAC1B;AAAA,KACF;AAAA,IACA,CAAC,mBAAA,EAAqB,eAAiB,EAAA,WAAA,EAAa,GAAG,CAAA;AAAA,GACzD,CAAA;AAEA,EAAM,MAAA,iBAAA,GAAoB,YAAY,MAAM;AAC1C,IAAM,MAAA,EAAE,OAAS,EAAA,YAAA,EAAiB,GAAA,eAAA,CAAA;AAClC,IAAM,MAAA,eAAA,GAAkB,2BAA2B,GAAG,CAAA,CAAA;AACtD,IAAA,IAAI,eAAiB,EAAA;AACnB,MAAM,MAAA,cAAA,GAAiB,mBAAmB,YAAY,CAAA,CAAA;AACtD,MAAA,oBAAA,CAAqB,cAAc,CAAA,CAAA;AAEnC,MAAS,QAAA,CAAA;AAAA,QACP,IAAM,EAAA,iBAAA;AAAA,QACN,YAAc,EAAA,cAAA;AAAA,OACf,CAAA,CAAA;AACD,MAAO,OAAA,IAAA,CAAA;AAAA,KACF,MAAA;AACL,MAAO,OAAA,KAAA,CAAA;AAAA,KACT;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,eAAA,EAAiB,GAAG,CAAC,CAAA,CAAA;AAEnC,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,iBAAmB,EAAA;AACrB,MAAA,mBAAA,CAAoB,KAAK,CAAA,CAAA;AAAA,KAC3B;AAAA,GACC,EAAA,CAAC,mBAAqB,EAAA,iBAAiB,CAAC,CAAA,CAAA;AAE3C,EAAO,OAAA;AAAA,IACL,QAAU,EAAA,YAAA;AAAA,IACV,iBAAA;AAAA,GACF,CAAA;AACF;;;;"}

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

@@ -0,0 +1,199 @@
+import { useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { useMemo, useCallback } from 'react';
+import { measureContainerOverflow, addAll, getElementForItem, measureElementSize, allExceptOverflowIndicator } from './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(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 = useMemo(() => /* @__PURE__ */ new Map(), []);
+  const { dispatch } = collectionHook;
+  const updateCollapse = 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 = useCallback(
+    (size, containerHasGrown) => {
+      const { current: managedItems } = overflowItemsRef;
+      const { isOverflowing: willOverflow } = 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(addAll, 0);
+        updateCollapse(size, renderedSize);
+      }
+    },
+    [
+      dispatch,
+      hasOverflowedItems,
+      orientation,
+      overflowItemsRef,
+      ref,
+      updateCollapse
+    ]
+  );
+  const resetMeasurements = 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 = 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 = 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 = getElementForItem(ref, collapsedItem);
+      if (target) {
+        const collapsedSize = measureElementSize(target, dimension);
+        const managedItem = findItemToCollapse(managedItems);
+        const diff = collapsedItem.size - collapsedSize;
+        const renderedSize = managedItems.reduce(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
+  ]);
+  useIsomorphicLayoutEffect(() => {
+    const { current: managedItems } = overflowItemsRef;
+    const newlyCollapsedItem = newlyCollapsed(managedItems);
+    if (newlyCollapsedItem) {
+      measureCollapsedItem();
+    }
+  });
+  return {
+    onResize: handleResize,
+    resetMeasurements
+  };
+};
+
+export { useInstantCollapse };
+//# sourceMappingURL=useInstantCollapse.js.map

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