@vuu-ui/vuu-ui-controls 0.0.26

package/esm/measured-container/useResizeObserver.js

@@ -0,0 +1,128 @@
+import { useRef, useCallback, useEffect } from 'react';
+
+const observedMap = /* @__PURE__ */ new Map();
+const getTargetSize = (element, size, dimension) => {
+  switch (dimension) {
+    case "height":
+      return size.height;
+    case "clientHeight":
+      return Math.floor(element.clientHeight);
+    case "clientWidth":
+      return Math.floor(element.clientWidth);
+    case "contentHeight":
+      return size.contentHeight;
+    case "contentWidth":
+      return size.contentWidth;
+    case "scrollHeight":
+      return Math.ceil(Math.floor(element.scrollHeight));
+    case "scrollWidth":
+      return Math.ceil(Math.floor(element.scrollWidth));
+    case "width":
+      return size.width;
+    default:
+      return 0;
+  }
+};
+const resizeObserver = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    const { target, borderBoxSize, contentBoxSize } = entry;
+    const observedTarget = observedMap.get(target);
+    if (observedTarget) {
+      const [{ blockSize: height, inlineSize: width }] = borderBoxSize;
+      const [{ blockSize: contentHeight, inlineSize: contentWidth }] = contentBoxSize;
+      const { onResize, measurements } = observedTarget;
+      let sizeChanged = false;
+      for (const [dimension, size] of Object.entries(measurements)) {
+        const newSize = getTargetSize(
+          target,
+          { height, width, contentHeight, contentWidth },
+          dimension
+        );
+        if (newSize !== size) {
+          sizeChanged = true;
+          measurements[dimension] = newSize;
+        }
+      }
+      if (sizeChanged) {
+        onResize && onResize(measurements);
+      }
+    }
+  }
+});
+function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false) {
+  const dimensionsRef = useRef(dimensions);
+  const measure = useCallback((target) => {
+    const { width, height } = target.getBoundingClientRect();
+    const { clientWidth: contentWidth, clientHeight: contentHeight } = target;
+    const flooredHeight = Math.floor(height);
+    const flooredWidth = Math.floor(width);
+    return dimensionsRef.current.reduce(
+      (map, dim) => {
+        map[dim] = getTargetSize(
+          target,
+          {
+            width: flooredWidth,
+            height: flooredHeight,
+            contentHeight,
+            contentWidth
+          },
+          dim
+        );
+        return map;
+      },
+      {}
+    );
+  }, []);
+  useEffect(() => {
+    const target = ref.current;
+    async function registerObserver() {
+      observedMap.set(target, { measurements: {} });
+      const observedTarget = observedMap.get(target);
+      if (observedTarget) {
+        const measurements = measure(target);
+        observedTarget.measurements = measurements;
+        resizeObserver.observe(target);
+        if (reportInitialSize) {
+          onResize(measurements);
+        }
+      } else {
+        console.log(
+          `%cuseResizeObserver an target expected to be under observation wa snot found. This warrants investigation`,
+          "font-weight:bold; color:red;"
+        );
+      }
+    }
+    if (target) {
+      if (observedMap.has(target)) {
+        console.log(
+          `useResizeObserver attemping to observe same element twice`,
+          {
+            target
+          }
+        );
+      }
+      registerObserver();
+    }
+    return () => {
+      if (target && observedMap.has(target)) {
+        resizeObserver.unobserve(target);
+        observedMap.delete(target);
+      }
+    };
+  }, [measure, ref]);
+  useEffect(() => {
+    const target = ref.current;
+    const record = observedMap.get(target);
+    if (record) {
+      if (dimensionsRef.current !== dimensions) {
+        dimensionsRef.current = dimensions;
+        const measurements = measure(target);
+        record.measurements = measurements;
+      }
+      record.onResize = onResize;
+    }
+  }, [dimensions, measure, ref, onResize]);
+}
+
+export { useResizeObserver };
+//# sourceMappingURL=useResizeObserver.js.map

package/esm/measured-container/useResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.js","sources":["../../src/measured-container/useResizeObserver.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useRef } from \"react\";\n\nexport const WidthHeight = [\"height\", \"width\"];\nexport const WidthOnly = [\"width\"];\n\nexport type measurements<T = string | number> = {\n  height?: T;\n  clientHeight?: number;\n  clientWidth?: number;\n  contentHeight?: number;\n  contentWidth?: number;\n  scrollHeight?: number;\n  scrollWidth?: number;\n  width?: T;\n};\ntype measuredDimension = keyof measurements<number>;\n\nexport type ResizeHandler = (measurements: measurements<number>) => void;\n\ntype observedDetails = {\n  onResize?: ResizeHandler;\n  measurements: measurements<number>;\n};\nconst observedMap = new Map<HTMLElement, observedDetails>();\n\nconst getTargetSize = (\n  element: HTMLElement,\n  size: {\n    height: number;\n    width: number;\n    contentHeight: number;\n    contentWidth: number;\n  },\n  dimension: measuredDimension\n): number => {\n  switch (dimension) {\n    case \"height\":\n      return size.height;\n    case \"clientHeight\":\n      return Math.floor(element.clientHeight);\n    case \"clientWidth\":\n      return Math.floor(element.clientWidth);\n    case \"contentHeight\":\n      return size.contentHeight;\n    case \"contentWidth\":\n      return size.contentWidth;\n    case \"scrollHeight\":\n      return Math.ceil(Math.floor(element.scrollHeight));\n    case \"scrollWidth\":\n      return Math.ceil(Math.floor(element.scrollWidth));\n    case \"width\":\n      return size.width;\n    default:\n      return 0;\n  }\n};\n\n// TODO should we make this create-on-demand\nconst resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n  for (const entry of entries) {\n    const { target, borderBoxSize, contentBoxSize } = entry;\n    const observedTarget = observedMap.get(target as HTMLElement);\n    if (observedTarget) {\n      const [{ blockSize: height, inlineSize: width }] = borderBoxSize;\n      const [{ blockSize: contentHeight, inlineSize: contentWidth }] =\n        contentBoxSize;\n      const { onResize, measurements } = observedTarget;\n      let sizeChanged = false;\n      for (const [dimension, size] of Object.entries(measurements)) {\n        const newSize = getTargetSize(\n          target as HTMLElement,\n          { height, width, contentHeight, contentWidth },\n          dimension as measuredDimension\n        );\n\n        if (newSize !== size) {\n          sizeChanged = true;\n          measurements[dimension as measuredDimension] = newSize;\n        }\n      }\n      if (sizeChanged) {\n        // TODO only return measured sizes\n        onResize && onResize(measurements);\n      }\n    }\n  }\n});\n\n// TODO use an optional lag (default to false) to ask to fire onResize\n// with initial size\nexport function useResizeObserver(\n  ref: RefObject<Element | HTMLElement | null>,\n  dimensions: readonly string[],\n  onResize: ResizeHandler,\n  reportInitialSize = false\n) {\n  const dimensionsRef = useRef(dimensions);\n\n  const measure = useCallback((target: HTMLElement): measurements<number> => {\n    const { width, height } = target.getBoundingClientRect();\n    const { clientWidth: contentWidth, clientHeight: contentHeight } = target;\n    const flooredHeight = Math.floor(height);\n    const flooredWidth = Math.floor(width);\n\n    return dimensionsRef.current.reduce(\n      (map: { [key: string]: number }, dim) => {\n        map[dim] = getTargetSize(\n          target,\n          {\n            width: flooredWidth,\n            height: flooredHeight,\n            contentHeight,\n            contentWidth,\n          },\n          dim as measuredDimension\n        );\n        return map;\n      },\n      {}\n    );\n  }, []);\n\n  // TODO use ref to store resizeHandler here\n  // resize handler registered with REsizeObserver will never change\n  // use ref to store user onResize callback here\n  // resizeHandler will call user callback.current\n\n  // Keep this effect separate in case user inadvertently passes different\n  // dimensions or callback instance each time - we only ever want to\n  // initiate new observation when ref changes.\n  useEffect(() => {\n    const target = ref.current as HTMLElement;\n    async function registerObserver() {\n      // Create the map entry immediately. useEffect may fire below\n      // before fonts are ready and attempt to update entry\n      observedMap.set(target, { measurements: {} as measurements<number> });\n      // await document.fonts.ready;\n      const observedTarget = observedMap.get(target);\n      if (observedTarget) {\n        const measurements = measure(target);\n        observedTarget.measurements = measurements;\n        resizeObserver.observe(target);\n        if (reportInitialSize) {\n          onResize(measurements);\n        }\n      } else {\n        console.log(\n          `%cuseResizeObserver an target expected to be under observation wa snot found. This warrants investigation`,\n          \"font-weight:bold; color:red;\"\n        );\n      }\n    }\n\n    if (target) {\n      // TODO might we want multiple callers to attach a listener to the same element ?\n      if (observedMap.has(target)) {\n        console.log(\n          `useResizeObserver attemping to observe same element twice`,\n          {\n            target,\n          }\n        );\n        // throw Error(\n        //   \"useResizeObserver attemping to observe same element twice\"\n        // );\n      }\n      // TODO set a pending entry on map\n      registerObserver();\n    }\n    return () => {\n      if (target && observedMap.has(target)) {\n        resizeObserver.unobserve(target);\n        observedMap.delete(target);\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [measure, ref]);\n\n  useEffect(() => {\n    const target = ref.current as HTMLElement;\n    const record = observedMap.get(target);\n    if (record) {\n      if (dimensionsRef.current !== dimensions) {\n        dimensionsRef.current = dimensions;\n        const measurements = measure(target);\n        record.measurements = measurements;\n      }\n      // Might not have changed, but no harm ...\n      record.onResize = onResize;\n    }\n  }, [dimensions, measure, ref, onResize]);\n}\n"],"names":[],"mappings":"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"}

package/esm/overflow-container/OverflowContainer.css.js

@@ -0,0 +1,4 @@
+var overflowContainerCss = "\n.vuuOverflowContainer {\n    --overflow-borderColor: var(--vuuOverflowContainer-borderColor, none);\n    --overflow-borderStyle: var(--vuuOverflowContainer-borderStyle, none);\n    --overflow-borderWidth: var(--vuuOverflowContainer-borderWidth, 0px);\n\n    --overflow-border-topWidth: var(--vuuOverflowContainer-borderTopWidth, var(--overflow-borderWidth));\n    --overflow-border-rightWidth: var(--vuuOverflowContainer-borderRightWidth, var(--overflow-borderWidth));\n    --overflow-border-bottomWidth: var(--vuuOverflowContainer-borderBottomWidth, var(--overflow-borderWidth));\n    --overflow-border-leftWidth: var(--vuuOverflowContainer-borderLeftWidth, var(--overflow-borderWidth));\n    \n    --border: calc(var(--overflow-border-topWidth) + var(--overflow-border-bottomWidth));\n\n    --overflow-item-gap : var(--vuuOverflowContainer-gap,2px);\n    --overflow-direction: row; \n    --overflow-height: var(--overflow-item-height);\n\n    background-color: var(--vuuOverflowContainer-background);\n    border-color: var(--overflow-borderColor);\n    border-style: var(--overflow-borderStyle);\n    border-top-width: var(--overflow-border-topWidth);\n    border-right-width: var(--overflow-border-rightWidth);\n    border-bottom-width:  var(--overflow-border-bottomWidth);\n    border-left-width: var(--overflow-border-leftWidth);\n    height: var(--vuuOverflowContainer-height,var(--overflow-container-height));\n    width: var(--overflow-container-width);\n}\n\n.vuuOverflowContainer.vuuOrientation-horizontal {\n    --item-align: center;\n    --item-margin: 0 var(--overflow-item-gap) 0 var(--overflow-item-gap);\n    --overflow-container-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n    --overflow-container-width: var(--vuuOverflowContainer-width, auto);\n    --overflow-wrapper-height: var(--overflow-item-height);\n    --overflow-item-height: var(--vuuOverflowContainer-contentHeight, calc(var(--overflow-container-height) - var(--total-border-size)));\n    --overflow-item-width: auto;\n    --overflow-width: 0px;\n    --total-border-size: calc(var(--overflow-border-topWidth) + var(--overflow-border-bottomWidth));\n\n    min-width: var(--vuuOverflowContainer-minWidth, var(--overflow-container-height));\n\n    .vuuOverflowContainer-wrapContainer-overflowed {\n        --overflow-left: auto;\n        --overflow-position: relative;\n        --overflow-width: auto;\n    }\n    \n}\n.vuuOverflowContainer.vuuOrientation-vertical {\n    --item-align: stretch;\n    --overflow-container-height: 100%;\n    --overflow-container-width: var(--vuuOverflowContainer-width,calc(var(--salt-size-base) + var(--salt-spacing-100)));\n    --overflow-item-height: auto;\n    --overflow-item-width: calc(var(--overflow-container-width) - var(--total-border-size));\n    --overflow-wrapper-height: 100%;\n    --total-border-size: calc(var(--overflow-border-leftWidth) + var(--overflow-border-rightWidth));\n\n    --item-margin: var(--overflow-item-gap) 0 var(--overflow-item-gap) 0;\n    --overflow-direction: column; \n    --overflow-height: 0px;\n    --overflow-left: 0;\n    --overflow-top: 100%;\n    --overflow-width: auto;\n\n    .vuuOverflowContainer-wrapContainer-overflowed {\n        --overflow-top: auto;\n        --overflow-position: relative;\n        --overflow-height: auto;\n    }\n\n}\n\n.vuuOverflowContainer-wrapContainer {\n    align-items: var(--item-align);\n    display: flex;\n    flex-direction: var(--overflow-direction);\n    flex-wrap: wrap;\n    height: var(--overflow-wrapper-height); \n    justify-content: var(--vuuOverflowContainer-justifyContent, flex-start);\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n\n}\n\n.vuuOverflowContainer-wrapContainer-overflowed {\n    --overflow-order: 2;\n    --overflow-left: auto;\n    --overflow-position: relative;\n    --overflow-width: auto;\n}\n\n.vuuOverflowContainer.vuuOrientation-vertical.vuuOverflowContainer-wrapContainer-overflowed {\n    --overflow-height: auto;\n}\n\n.vuuOverflowContainer-item {\n    align-items: inherit;\n    display: flex;\n    order: 1;\n    position: relative;\n    height: var(--overflow-item-height);\n    margin: var(--item-margin);\n    width: var(--overflow-item-width);\n}\n\n.vuuOverflowContainer-item[data-align=\"right\"] {\n    margin-left: auto;\n}\n\n.vuuOverflowContainer-item.wrapped {\n    --overflow-item-bg: #ccc;\n    order: 3;\n    visibility: hidden;\n}\n\n.vuuOverflowContainer-item.vuuDraggable-dragAway,\n.vuuOverflowContainer-item:has(.vuuDraggable-dragAway){\n    display: none;\n}\n\n.vuuOverflowContainer-item.vuuDropTarget-settling {\n    visibility: hidden;\n}\n\n.vuuOverflowContainer-OverflowIndicator {\n    align-items: center;\n    background-color: transparent;\n    display: flex;\n    height: var(--overflow-height);\n    order: var(--overflow-order, 99);\n    overflow: hidden;\n    width: var(--overflow-width);\n}\n\n.vuuDraggable-vuuOverflowContainer {\n    align-items: center;\n    display: flex;\n    height: 44px;\n}\n\n";
+
+export { overflowContainerCss as default };
+//# sourceMappingURL=OverflowContainer.css.js.map

package/esm/overflow-container/OverflowContainer.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowContainer.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/overflow-container/OverflowContainer.js

@@ -0,0 +1,140 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { PopupMenu } from '@vuu-ui/vuu-popups';
+import { asReactElements, useId } from '@vuu-ui/vuu-utils';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import React, { forwardRef } from 'react';
+import { useOverflowContainer } from './useOverflowContainer.js';
+import overflowContainerCss from './OverflowContainer.css.js';
+
+const classBase = "vuuOverflowContainer";
+const WrapContainer = React.memo(
+  ({
+    PopupMenuProps: PopupMenuProps2,
+    allowDragDrop,
+    children,
+    id,
+    onMoveItem,
+    onSwitchWrappedItemIntoView,
+    orientation,
+    overflowIcon
+  }) => {
+    const childElements = asReactElements(children);
+    const {
+      draggable,
+      draggedItemIndex,
+      menuActionHandler,
+      menuBuilder,
+      onItemMouseDown,
+      rootRef
+    } = useOverflowContainer({
+      allowDragDrop,
+      itemCount: childElements.length,
+      onMoveItem,
+      onSwitchWrappedItemIntoView,
+      orientation
+    });
+    const content = childElements.map((childEl, i) => {
+      const {
+        "data-align": align,
+        "data-overflow-priority": overflowPriority = "0",
+        id: itemId = `${id}-${i}`,
+        label = `Item ${i + 1}`
+      } = childEl.props;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cx(`${classBase}-item`, {
+            "vuuDraggable-dragAway": draggedItemIndex === i
+          }),
+          "data-index": i,
+          "data-align": align,
+          "data-label": label,
+          "data-overflow-priority": overflowPriority,
+          id: `${itemId}-wrapper`,
+          onMouseDown: onItemMouseDown,
+          children: childEl
+        },
+        i
+      );
+    });
+    const overflowIndicator = /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${classBase}-OverflowIndicator`,
+        "data-index": "overflow",
+        children: /* @__PURE__ */ jsx(
+          PopupMenu,
+          {
+            ...PopupMenuProps2,
+            "data-embedded": true,
+            icon: overflowIcon,
+            menuBuilder,
+            menuActionHandler,
+            tabIndex: -1
+          }
+        )
+      },
+      "overflow"
+    );
+    content.push(overflowIndicator);
+    return /* @__PURE__ */ jsxs("div", { className: cx(`${classBase}-wrapContainer`), ref: rootRef, children: [
+      content,
+      draggable
+    ] });
+  }
+);
+WrapContainer.displayName = "OverflowContainer.InnerContainer";
+const OverflowContainer = forwardRef(function OverflowContainer2({
+  PopupMenuProps: PopupMenuProps2,
+  allowDragDrop = false,
+  children,
+  className,
+  id: idProp,
+  onMoveItem,
+  onSwitchWrappedItemIntoView,
+  orientation = "horizontal",
+  overflowIcon,
+  overflowPosition,
+  ...htmlAttributes
+}, forwardedRef) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-overflow-container",
+    css: overflowContainerCss,
+    window: targetWindow
+  });
+  const id = useId(idProp);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(
+        cx(className, classBase, {
+          "vuuOrientation-horizontal": orientation === "horizontal",
+          "vuuOrientation-vertical": orientation === "vertical"
+        })
+      ),
+      id,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsx(
+        WrapContainer,
+        {
+          PopupMenuProps: PopupMenuProps2,
+          allowDragDrop,
+          id,
+          orientation,
+          overflowIcon,
+          overflowPosition,
+          onMoveItem,
+          onSwitchWrappedItemIntoView,
+          children
+        }
+      )
+    }
+  );
+});
+
+export { OverflowContainer };
+//# sourceMappingURL=OverflowContainer.js.map

package/esm/overflow-container/OverflowContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowContainer.js","sources":["../../src/overflow-container/OverflowContainer.tsx"],"sourcesContent":["import { PopupMenu, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport { asReactElements, orientationType, useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport React, { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\nimport { OverflowItem } from \"./overflow-utils\";\nimport { useOverflowContainer } from \"./useOverflowContainer\";\n\nimport overflowContainerCss from \"./OverflowContainer.css\";\n\nconst classBase = \"vuuOverflowContainer\";\n\nexport interface OverflowContainerProps extends HTMLAttributes<HTMLDivElement> {\n  PopupMenuProps?: Partial<PopupMenuProps>;\n  allowDragDrop?: boolean;\n  debugId?: string;\n  onMoveItem?: (fromIndex: number, toIndex: number) => void;\n  onSwitchWrappedItemIntoView?: (overflowItem: OverflowItem) => void;\n  orientation?: orientationType;\n  overflowIcon?: string;\n  overflowPosition?: \"start\" | \"end\" | number;\n}\n\nconst WrapContainer = React.memo(\n  ({\n    PopupMenuProps,\n    allowDragDrop,\n    children,\n    id,\n    onMoveItem,\n    onSwitchWrappedItemIntoView,\n    orientation,\n    overflowIcon,\n  }: Omit<OverflowContainerProps, \"orientation\"> &\n    Required<Pick<OverflowContainerProps, \"orientation\">>) => {\n    const childElements = asReactElements(children);\n    const {\n      draggable,\n      draggedItemIndex,\n      menuActionHandler,\n      menuBuilder,\n      onItemMouseDown,\n      rootRef,\n    } = useOverflowContainer({\n      allowDragDrop,\n      itemCount: childElements.length,\n      onMoveItem,\n      onSwitchWrappedItemIntoView,\n      orientation,\n    });\n\n    const content = childElements.map((childEl, i) => {\n      const {\n        \"data-align\": align,\n        \"data-overflow-priority\": overflowPriority = \"0\",\n        id: itemId = `${id}-${i}`,\n        label = `Item ${i + 1}`,\n      } = childEl.props;\n      return (\n        <div\n          className={cx(`${classBase}-item`, {\n            \"vuuDraggable-dragAway\": draggedItemIndex === i,\n          })}\n          data-index={i}\n          data-align={align}\n          data-label={label}\n          data-overflow-priority={overflowPriority}\n          id={`${itemId}-wrapper`}\n          key={i}\n          onMouseDown={onItemMouseDown}\n        >\n          {childEl}\n        </div>\n      );\n    });\n\n    const overflowIndicator = (\n      <div\n        className={`${classBase}-OverflowIndicator`}\n        data-index=\"overflow\"\n        key=\"overflow\"\n      >\n        <PopupMenu\n          {...PopupMenuProps}\n          data-embedded\n          icon={overflowIcon}\n          menuBuilder={menuBuilder}\n          menuActionHandler={menuActionHandler}\n          tabIndex={-1}\n        />\n      </div>\n    );\n    content.push(overflowIndicator);\n\n    return (\n      <div className={cx(`${classBase}-wrapContainer`)} ref={rootRef}>\n        {content}\n        {draggable}\n      </div>\n    );\n  }\n);\n\nWrapContainer.displayName = \"OverflowContainer.InnerContainer\";\n\nexport const OverflowContainer = forwardRef(function OverflowContainer(\n  {\n    PopupMenuProps,\n    allowDragDrop = false,\n    children,\n    className,\n    id: idProp,\n    onMoveItem,\n    onSwitchWrappedItemIntoView,\n    orientation = \"horizontal\",\n    overflowIcon,\n    overflowPosition,\n    ...htmlAttributes\n  }: OverflowContainerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-overflow-container\",\n    css: overflowContainerCss,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(\n        cx(className, classBase, {\n          \"vuuOrientation-horizontal\": orientation === \"horizontal\",\n          \"vuuOrientation-vertical\": orientation === \"vertical\",\n        })\n      )}\n      id={id}\n      ref={forwardedRef}\n    >\n      <WrapContainer\n        PopupMenuProps={PopupMenuProps}\n        allowDragDrop={allowDragDrop}\n        id={id}\n        orientation={orientation}\n        overflowIcon={overflowIcon}\n        overflowPosition={overflowPosition}\n        onMoveItem={onMoveItem}\n        onSwitchWrappedItemIntoView={onSwitchWrappedItemIntoView}\n      >\n        {children}\n      </WrapContainer>\n    </div>\n  );\n});\n"],"names":["PopupMenuProps","OverflowContainer"],"mappings":"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"}

package/esm/overflow-container/overflow-utils.js

@@ -0,0 +1,272 @@
+import { getElementByDataIndex } from '@vuu-ui/vuu-utils';
+
+const NON_WRAPPED_ITEM = ".vuuOverflowContainer-item:not(.wrapped)";
+const sortByScreenOrder = (elements) => elements.sort((e1, e2) => {
+  const {
+    dataset: { index: idx1 = "?" }
+  } = e1;
+  const {
+    dataset: { index: idx2 = "?" }
+  } = e2;
+  const isOverflowed1 = e1.classList.contains("wrapped");
+  const isOverflowed2 = e2.classList.contains("wrapped");
+  const isOverflowedIndicator1 = idx1 === "overflow";
+  const isOverflowedIndicator2 = idx2 === "overflow";
+  if (isOverflowed1 && !isOverflowed2) {
+    return 1;
+  } else if (!isOverflowed1 && isOverflowed2) {
+    return -1;
+  }
+  if (isOverflowedIndicator1) {
+    return 1;
+  } else if (isOverflowedIndicator2) {
+    return -1;
+  }
+  return parseInt(idx1) > parseInt(idx2) ? 1 : -1;
+});
+const NO_WRAPPED_ITEMS = [];
+const getNonWrappedAndWrappedItems = (container, orientation) => {
+  const nonWrappedItems = [];
+  const wrappedItems = [];
+  let currentPosition = -1;
+  let overflowed = false;
+  const sortedChildren = sortByScreenOrder(
+    Array.from(container.children)
+  );
+  const positionAttribute = orientation === "vertical" ? "top" : "left";
+  for (const child of sortedChildren) {
+    const element = child;
+    const {
+      dataset: { index = "?", label = "?", overflowPriority = "0" }
+    } = element;
+    const { [positionAttribute]: position } = element.getBoundingClientRect();
+    if (position <= currentPosition) {
+      if (index === "overflow") {
+        wrappedItems.push(nonWrappedItems.pop());
+      } else {
+        wrappedItems.push({ index, label, overflowPriority });
+      }
+      overflowed = true;
+    } else if (overflowed) {
+      wrappedItems.push({ index, label, overflowPriority });
+    } else {
+      nonWrappedItems.push({ index, label, overflowPriority });
+    }
+    currentPosition = position;
+  }
+  return [nonWrappedItems, wrappedItems];
+};
+const applyOverflowClassToWrappedItems = (container, overflowedItems, classBase) => {
+  let ignoreOverflow = false;
+  const className = classBase ? `${classBase}-overflowed` : "overflow";
+  if (overflowedItems.find(({ index }) => index === "overflow")) {
+    if (overflowedItems.length === 1) {
+      ignoreOverflow = true;
+    }
+  }
+  for (const element of container.children) {
+    const {
+      dataset: { index = "?" }
+    } = element;
+    if (overflowedItems.length === 0 || ignoreOverflow) {
+      container.classList.remove(className);
+    } else {
+      container.classList.add(className);
+    }
+    if (index !== "overflow" && overflowedItems.find((item) => item.index === index)) {
+      element.classList.add("wrapped");
+    } else {
+      element.classList.remove("wrapped");
+    }
+  }
+};
+const maxPriority = (priority, { overflowPriority }) => Math.max(priority, parseInt(overflowPriority));
+const minPriority = (priority, { overflowPriority }) => Math.min(priority, parseInt(overflowPriority));
+const overflowIndicatorHasWrappedButShouldNotHave = (wrappedItems) => wrappedItems.length > 1 && wrappedItems.at(-1)?.index === "overflow";
+const getHighestPriorityItem = (overflowItems) => {
+  let [highestPriorityItem] = overflowItems;
+  for (let i = 1; i < overflowItems.length; i++) {
+    const item = overflowItems[i];
+    if (parseInt(item.overflowPriority) > parseInt(highestPriorityItem.overflowPriority)) {
+      highestPriorityItem = item;
+    }
+  }
+  return highestPriorityItem;
+};
+const highPriorityItemsHaveWrappedButShouldNotHave = (nonWrappedItems, wrappedItems) => {
+  const minNonwrappedPriority = nonWrappedItems.reduce(
+    minPriority,
+    Number.MAX_SAFE_INTEGER
+  );
+  const maxwrappedPriority = wrappedItems.reduce(maxPriority, 0);
+  if (maxwrappedPriority > minNonwrappedPriority) {
+    return true;
+  } else {
+    return wrappedItems.length > 1 && wrappedItems.at(-1)?.index === "overflow";
+  }
+};
+const correctForWrappedOverflowIndicator = (container, overflowedItems, orientation) => new Promise((resolve) => {
+  requestAnimationFrame(() => {
+    const [, o2] = getNonWrappedAndWrappedItems(container, orientation);
+    const newlyOverflowed = getNewItems(overflowedItems, o2);
+    newlyOverflowed.forEach((item) => markElementAsWrapped(container, item));
+    resolve(o2);
+  });
+});
+const correctForWrappedHighPriorityItems = (container, nonWrapped, wrapped, orientation) => new Promise((resolve) => {
+  requestAnimationFrame(() => {
+    const [, o2] = getNonWrappedAndWrappedItems(container, orientation);
+    const highPriorityWrappedItem = getHighestPriorityItem(o2);
+    if (highPriorityWrappedItem) {
+      const [nonWrappedItems, wrappedItems] = switchWrappedItemIntoView(
+        container,
+        highPriorityWrappedItem,
+        orientation
+      );
+      resolve([nonWrappedItems, wrappedItems]);
+    } else {
+      resolve([nonWrapped, wrapped]);
+    }
+  });
+});
+const markElementAsWrapped = (container, item) => {
+  const el = getElementByDataIndex(container, item.index);
+  if (el) {
+    el.classList.add("wrapped");
+  } else {
+    throw Error(
+      `markElementAsWrapped element item with index ${item.index} not found`
+    );
+  }
+};
+const getElementsMarkedAsWrapped = (container) => Array.from(container.querySelectorAll(".wrapped"));
+const getNewItems = (items1, items2) => {
+  const newItems = [];
+  for (const item of items2) {
+    if (!items1.find(({ index }) => index === item.index)) {
+      newItems.push(item);
+    }
+  }
+  return newItems;
+};
+const unmarkItemsWhichAreNoLongerWrapped = (container, wrappedItems) => {
+  const elementssMarkedAsWrapped = getElementsMarkedAsWrapped(container);
+  elementssMarkedAsWrapped.forEach((el) => {
+    const {
+      dataset: { index = "?" }
+    } = el;
+    if (!wrappedItems.find((i) => i.index === index)) {
+      el.classList.remove("wrapped");
+    }
+  });
+};
+const getOverflowIndicator = (container) => container.querySelector('[data-index="overflow"]');
+const getOverflowedItem = (container) => container.querySelector(".wrapped");
+const getElementSize = (el, sizeProperty) => {
+  const size = parseInt(getComputedStyle(el).getPropertyValue(sizeProperty));
+  const margin = sizeProperty === "width" ? parseInt(getComputedStyle(el).getPropertyValue("margin-left")) + parseInt(getComputedStyle(el).getPropertyValue("margin-right")) : parseInt(getComputedStyle(el).getPropertyValue("margin-top")) + parseInt(getComputedStyle(el).getPropertyValue("margin-bottom"));
+  return size + margin;
+};
+const getAvailableSpace = (container, overflowIndicator, orientation) => {
+  if (orientation === "horizontal") {
+    const { right: containerRight } = container.getBoundingClientRect();
+    const paddingRight = parseInt(
+      getComputedStyle(container).getPropertyValue("padding-right")
+    );
+    const { right: indicatorRight } = overflowIndicator.getBoundingClientRect();
+    return containerRight - paddingRight - indicatorRight;
+  } else {
+    const { bottom: containerBottom } = container.getBoundingClientRect();
+    const paddingBottom = parseInt(
+      getComputedStyle(container).getPropertyValue("padding-bottom")
+    );
+    const { bottom: indicatorBottom } = overflowIndicator.getBoundingClientRect();
+    return containerBottom - paddingBottom - indicatorBottom;
+  }
+};
+const removeOverflowIndicatorIfNoLongerNeeded = (container, orientation) => {
+  const sizeProperty = orientation === "horizontal" ? "width" : "height";
+  const overflowIndicator = getOverflowIndicator(container);
+  const availableSpace = getAvailableSpace(
+    container,
+    overflowIndicator,
+    orientation
+  );
+  const indicatorWidth = getElementSize(overflowIndicator, sizeProperty);
+  const overflowedItem = getOverflowedItem(container);
+  const overflowWidth = getElementSize(overflowedItem, sizeProperty);
+  if (overflowWidth <= availableSpace + indicatorWidth) {
+    container.classList.remove("vuuOverflowContainer-wrapContainer-overflowed");
+    overflowedItem.classList.remove("wrapped");
+    return true;
+  }
+  return false;
+};
+const byPriorityDescending = (h1, h2) => {
+  const {
+    dataset: { index: i1 = "0", overflowPriority: p1 = "0" }
+  } = h1;
+  const {
+    dataset: { index: i2 = "0", overflowPriority: p2 = "0" }
+  } = h2;
+  if (p1 > p2) {
+    return -1;
+  } else if (p1 < p2) {
+    return 1;
+  } else {
+    return parseInt(i1) - parseInt(i2);
+  }
+};
+const getNonwrappedItemsByPriority = (container) => Array.from(container.querySelectorAll(NON_WRAPPED_ITEM)).sort(
+  byPriorityDescending
+);
+const switchWrappedItemIntoView = (container, overflowItem, orientation) => {
+  const unwrappedItems = getNonwrappedItemsByPriority(container);
+  const targetElement = getElementByDataIndex(
+    container,
+    overflowItem.index,
+    true
+  );
+  let pos = -1;
+  let unwrappedItem = unwrappedItems.at(pos);
+  const sizeProperty = orientation === "horizontal" ? "width" : "height";
+  const itemWidth = getElementSize(unwrappedItem, sizeProperty);
+  const targetWidth = getElementSize(targetElement, sizeProperty);
+  const overflowIndicator = getOverflowIndicator(container);
+  let availableSpace = getAvailableSpace(container, overflowIndicator, orientation) + itemWidth;
+  if (availableSpace >= targetWidth) {
+    switchWrapOnElements(targetElement, unwrappedItem);
+  } else {
+    const { left: lastLeft } = unwrappedItem.getBoundingClientRect();
+    const baseAvailableSpace = availableSpace;
+    const wrapTargets = [unwrappedItem];
+    while (availableSpace < targetWidth) {
+      pos -= 1;
+      unwrappedItem = unwrappedItems.at(pos);
+      wrapTargets.push(unwrappedItem);
+      const { left: nextLeft } = unwrappedItem.getBoundingClientRect();
+      const extraSpace = lastLeft - nextLeft;
+      availableSpace = baseAvailableSpace + extraSpace;
+    }
+    targetElement?.classList.remove("wrapped");
+    wrapTargets.forEach((item) => {
+      item.classList.add("wrapped");
+    });
+  }
+  const [nonWrappedItems, wrappedItems] = getNonWrappedAndWrappedItems(
+    container,
+    orientation
+  );
+  unmarkItemsWhichAreNoLongerWrapped(container, wrappedItems);
+  return [nonWrappedItems, wrappedItems];
+};
+const switchWrapOnElements = (wrappedElement, nonWrappedElement) => {
+  if (!wrappedElement || !nonWrappedElement) {
+    throw Error("switchWrapOnElements, element undefined");
+  }
+  wrappedElement.classList.remove("wrapped");
+  nonWrappedElement.classList.add("wrapped");
+};
+
+export { NO_WRAPPED_ITEMS, applyOverflowClassToWrappedItems, correctForWrappedHighPriorityItems, correctForWrappedOverflowIndicator, getElementsMarkedAsWrapped, getNonWrappedAndWrappedItems, highPriorityItemsHaveWrappedButShouldNotHave, markElementAsWrapped, overflowIndicatorHasWrappedButShouldNotHave, removeOverflowIndicatorIfNoLongerNeeded, sortByScreenOrder, switchWrappedItemIntoView, unmarkItemsWhichAreNoLongerWrapped };
+//# sourceMappingURL=overflow-utils.js.map

package/esm/overflow-container/overflow-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflow-utils.js","sources":["../../src/overflow-container/overflow-utils.ts"],"sourcesContent":["import { getElementByDataIndex, orientationType } from \"@vuu-ui/vuu-utils\";\n\nconst NON_WRAPPED_ITEM = \".vuuOverflowContainer-item:not(.wrapped)\";\n\nexport type OverflowItem = {\n  index: string;\n  label: string;\n  overflowPriority: string;\n};\n\nexport const sortByScreenOrder = (elements: HTMLElement[]): HTMLElement[] =>\n  elements.sort((e1, e2) => {\n    const {\n      dataset: { index: idx1 = \"?\" },\n    } = e1;\n    const {\n      dataset: { index: idx2 = \"?\" },\n    } = e2;\n    const isOverflowed1 = e1.classList.contains(\"wrapped\");\n    const isOverflowed2 = e2.classList.contains(\"wrapped\");\n    const isOverflowedIndicator1 = idx1 === \"overflow\";\n    const isOverflowedIndicator2 = idx2 === \"overflow\";\n    if (isOverflowed1 && !isOverflowed2) {\n      return 1;\n    } else if (!isOverflowed1 && isOverflowed2) {\n      return -1;\n    }\n    if (isOverflowedIndicator1) {\n      return 1;\n    } else if (isOverflowedIndicator2) {\n      return -1;\n    }\n    return parseInt(idx1) > parseInt(idx2) ? 1 : -1;\n  });\n\nexport const NO_WRAPPED_ITEMS: OverflowItem[] = [];\n\n/**\n    Identify wrapped items by comparing position of each item. Any item\n    not to the right of preceeding item has wrapped. Note: on-screen \n    position of items does not necessarily match document position, due\n    to use of css order. This is taken into account by sorting. \n    TODO support Vertical orientation\n */\nexport const getNonWrappedAndWrappedItems = (\n  container: HTMLElement,\n  orientation: orientationType\n): [OverflowItem[], OverflowItem[]] => {\n  const nonWrappedItems: OverflowItem[] = [];\n  const wrappedItems: OverflowItem[] = [];\n  let currentPosition = -1;\n  let overflowed = false;\n  const sortedChildren = sortByScreenOrder(\n    Array.from(container.children) as HTMLElement[]\n  );\n  const positionAttribute = orientation === \"vertical\" ? \"top\" : \"left\";\n  for (const child of sortedChildren) {\n    const element = child as HTMLElement;\n    const {\n      dataset: { index = \"?\", label = \"?\", overflowPriority = \"0\" },\n    } = element;\n    const { [positionAttribute]: position } = element.getBoundingClientRect();\n    if (position <= currentPosition) {\n      if (index === \"overflow\") {\n        wrappedItems.push(nonWrappedItems.pop() as OverflowItem);\n      } else {\n        wrappedItems.push({ index, label, overflowPriority });\n      }\n      overflowed = true;\n    } else if (overflowed) {\n      wrappedItems.push({ index, label, overflowPriority });\n    } else {\n      nonWrappedItems.push({ index, label, overflowPriority });\n    }\n    currentPosition = position;\n  }\n  return [nonWrappedItems, wrappedItems];\n};\n\nexport const applyOverflowClassToWrappedItems = (\n  container: HTMLElement,\n  overflowedItems: OverflowItem[],\n  classBase?: string\n) => {\n  let ignoreOverflow = false;\n  const className = classBase ? `${classBase}-overflowed` : \"overflow\";\n  if (overflowedItems.find(({ index }) => index === \"overflow\")) {\n    if (overflowedItems.length === 1) {\n      ignoreOverflow = true;\n    }\n  }\n  for (const element of container.children) {\n    const {\n      dataset: { index = \"?\" },\n    } = element as HTMLElement;\n    if (overflowedItems.length === 0 || ignoreOverflow) {\n      container.classList.remove(className);\n    } else {\n      container.classList.add(className);\n    }\n    if (\n      index !== \"overflow\" &&\n      overflowedItems.find((item) => item.index === index)\n    ) {\n      element.classList.add(\"wrapped\");\n    } else {\n      element.classList.remove(\"wrapped\");\n    }\n  }\n};\n\nconst maxPriority = (priority: number, { overflowPriority }: OverflowItem) =>\n  Math.max(priority, parseInt(overflowPriority));\n\nconst minPriority = (priority: number, { overflowPriority }: OverflowItem) =>\n  Math.min(priority, parseInt(overflowPriority));\n\nexport const overflowIndicatorHasWrappedButShouldNotHave = (\n  wrappedItems: OverflowItem[]\n) => wrappedItems.length > 1 && wrappedItems.at(-1)?.index === \"overflow\";\n\nconst getHighestPriorityItem = (overflowItems: OverflowItem[]) => {\n  let [highestPriorityItem] = overflowItems;\n  for (let i = 1; i < overflowItems.length; i++) {\n    const item = overflowItems[i];\n    if (\n      parseInt(item.overflowPriority) >\n      parseInt(highestPriorityItem.overflowPriority)\n    ) {\n      highestPriorityItem = item;\n    }\n  }\n  return highestPriorityItem;\n};\n\nexport const highPriorityItemsHaveWrappedButShouldNotHave = (\n  nonWrappedItems: OverflowItem[],\n  wrappedItems: OverflowItem[]\n) => {\n  const minNonwrappedPriority = nonWrappedItems.reduce<number>(\n    minPriority,\n    Number.MAX_SAFE_INTEGER\n  );\n  const maxwrappedPriority = wrappedItems.reduce<number>(maxPriority, 0);\n  if (maxwrappedPriority > minNonwrappedPriority) {\n    return true;\n  } else {\n    return wrappedItems.length > 1 && wrappedItems.at(-1)?.index === \"overflow\";\n  }\n};\n\n/** \n  An edge case that may occur when reducing width from unwrapped to\n  wrapped, or on first render.\n  We overflow one or more items. Then, when the overflowIndicator assumes\n  full width, it may itself overflow.\n*/\nexport const correctForWrappedOverflowIndicator = (\n  container: HTMLElement,\n  overflowedItems: OverflowItem[],\n  orientation: orientationType\n): Promise<OverflowItem[]> =>\n  new Promise((resolve) => {\n    requestAnimationFrame(() => {\n      const [, o2] = getNonWrappedAndWrappedItems(container, orientation);\n      const newlyOverflowed = getNewItems(overflowedItems, o2);\n      newlyOverflowed.forEach((item) => markElementAsWrapped(container, item));\n      resolve(o2);\n    });\n  });\n\n/** \n  An edge case that may occur when reducing width from unwrapped to\n  wrapped, or on first render.\n  We overflow one or more items. Then, when the overflowIndicator assumes\n  full width, it may itself overflow.\n*/\nexport const correctForWrappedHighPriorityItems = (\n  container: HTMLElement,\n  nonWrapped: OverflowItem[],\n  wrapped: OverflowItem[],\n  orientation: orientationType\n): Promise<[OverflowItem[], OverflowItem[]]> =>\n  new Promise((resolve) => {\n    requestAnimationFrame(() => {\n      const [, o2] = getNonWrappedAndWrappedItems(container, orientation);\n      const highPriorityWrappedItem = getHighestPriorityItem(o2);\n      if (highPriorityWrappedItem) {\n        const [nonWrappedItems, wrappedItems] = switchWrappedItemIntoView(\n          container,\n          highPriorityWrappedItem,\n          orientation\n        );\n        resolve([nonWrappedItems, wrappedItems]);\n      } else {\n        resolve([nonWrapped, wrapped]);\n      }\n    });\n  });\n\nexport const markElementAsWrapped = (\n  container: HTMLElement,\n  item: OverflowItem\n) => {\n  const el = getElementByDataIndex(container, item.index);\n  if (el) {\n    el.classList.add(\"wrapped\");\n  } else {\n    throw Error(\n      `markElementAsWrapped element item with index ${item.index} not found`\n    );\n  }\n};\n\nexport const getElementsMarkedAsWrapped = (container: HTMLElement) =>\n  Array.from(container.querySelectorAll(\".wrapped\")) as HTMLElement[];\n\nconst getNewItems = (items1: OverflowItem[], items2: OverflowItem[]) => {\n  const newItems: OverflowItem[] = [];\n  for (const item of items2) {\n    if (!items1.find(({ index }) => index === item.index)) {\n      newItems.push(item);\n    }\n  }\n  return newItems;\n};\n\nexport const unmarkItemsWhichAreNoLongerWrapped = (\n  container: HTMLElement,\n  wrappedItems: OverflowItem[]\n) => {\n  const elementssMarkedAsWrapped = getElementsMarkedAsWrapped(container);\n  elementssMarkedAsWrapped.forEach((el) => {\n    const {\n      dataset: { index = \"?\" },\n    } = el;\n    if (!wrappedItems.find((i) => i.index === index)) {\n      el.classList.remove(\"wrapped\");\n    }\n  });\n};\n\nconst getOverflowIndicator = (container: HTMLElement) =>\n  container.querySelector('[data-index=\"overflow\"]') as HTMLElement;\nconst getOverflowedItem = (container: HTMLElement) =>\n  container.querySelector(\".wrapped\") as HTMLElement;\nconst getElementSize = (el: HTMLElement, sizeProperty: \"width\" | \"height\") => {\n  const size = parseInt(getComputedStyle(el).getPropertyValue(sizeProperty));\n  const margin =\n    sizeProperty === \"width\"\n      ? parseInt(getComputedStyle(el).getPropertyValue(\"margin-left\")) +\n        parseInt(getComputedStyle(el).getPropertyValue(\"margin-right\"))\n      : parseInt(getComputedStyle(el).getPropertyValue(\"margin-top\")) +\n        parseInt(getComputedStyle(el).getPropertyValue(\"margin-bottom\"));\n\n  return size + margin;\n};\n\nconst getAvailableSpace = (\n  container: HTMLElement,\n  overflowIndicator: HTMLElement,\n  orientation: orientationType\n) => {\n  if (orientation === \"horizontal\") {\n    const { right: containerRight } = container.getBoundingClientRect();\n    const paddingRight = parseInt(\n      getComputedStyle(container).getPropertyValue(\"padding-right\")\n    );\n    const { right: indicatorRight } = overflowIndicator.getBoundingClientRect();\n    return containerRight - paddingRight - indicatorRight;\n  } else {\n    const { bottom: containerBottom } = container.getBoundingClientRect();\n    const paddingBottom = parseInt(\n      getComputedStyle(container).getPropertyValue(\"padding-bottom\")\n    );\n    const { bottom: indicatorBottom } =\n      overflowIndicator.getBoundingClientRect();\n    return containerBottom - paddingBottom - indicatorBottom;\n  }\n};\n\n/**\n    An edge case. If container has grown but we still have one\n    wrapped item - could the wrapped item return to the fold if the overflow\n    indicaor were removed ?\n */\nexport const removeOverflowIndicatorIfNoLongerNeeded = (\n  container: HTMLElement,\n  orientation: orientationType\n): boolean => {\n  const sizeProperty = orientation === \"horizontal\" ? \"width\" : \"height\";\n  const overflowIndicator = getOverflowIndicator(container);\n  const availableSpace = getAvailableSpace(\n    container,\n    overflowIndicator,\n    orientation\n  );\n  const indicatorWidth = getElementSize(overflowIndicator, sizeProperty);\n  const overflowedItem = getOverflowedItem(container);\n  const overflowWidth = getElementSize(overflowedItem, sizeProperty);\n\n  if (overflowWidth <= availableSpace + indicatorWidth) {\n    container.classList.remove(\"vuuOverflowContainer-wrapContainer-overflowed\");\n    overflowedItem.classList.remove(\"wrapped\");\n    return true;\n  }\n  return false;\n};\n\nconst byPriorityDescending = (h1: Element, h2: Element) => {\n  const {\n    dataset: { index: i1 = \"0\", overflowPriority: p1 = \"0\" },\n  } = h1 as HTMLElement;\n  const {\n    dataset: { index: i2 = \"0\", overflowPriority: p2 = \"0\" },\n  } = h2 as HTMLElement;\n\n  if (p1 > p2) {\n    return -1;\n  } else if (p1 < p2) {\n    return 1;\n  } else {\n    return parseInt(i1) - parseInt(i2);\n  }\n};\n\nconst getNonwrappedItemsByPriority = (container: HTMLElement) =>\n  Array.from(container.querySelectorAll(NON_WRAPPED_ITEM)).sort(\n    byPriorityDescending\n  ) as HTMLElement[];\n\n/**\n * This is used both when an overflow menu is used to select an overflowed item\n * and when a high priority item has overflowed, whilst lower priority items\n * remain in view.\n */\nexport const switchWrappedItemIntoView = (\n  container: HTMLElement,\n  overflowItem: OverflowItem,\n  orientation: orientationType\n): [OverflowItem[], OverflowItem[]] => {\n  const unwrappedItems = getNonwrappedItemsByPriority(container);\n  const targetElement = getElementByDataIndex(\n    container,\n    overflowItem.index,\n    true\n  );\n  let pos = -1;\n  let unwrappedItem = unwrappedItems.at(pos) as HTMLElement;\n  const sizeProperty = orientation === \"horizontal\" ? \"width\" : \"height\";\n  const itemWidth = getElementSize(unwrappedItem, sizeProperty);\n  const targetWidth = getElementSize(targetElement, sizeProperty);\n  const overflowIndicator = getOverflowIndicator(container);\n  let availableSpace =\n    getAvailableSpace(container, overflowIndicator, orientation) + itemWidth;\n  if (availableSpace >= targetWidth) {\n    switchWrapOnElements(targetElement, unwrappedItem);\n  } else {\n    // we need to wrap multiple items to make space for the switched item\n    const { left: lastLeft } = unwrappedItem.getBoundingClientRect();\n    const baseAvailableSpace = availableSpace;\n    const wrapTargets = [unwrappedItem];\n    while (availableSpace < targetWidth) {\n      pos -= 1;\n      unwrappedItem = unwrappedItems.at(pos) as HTMLElement;\n      wrapTargets.push(unwrappedItem);\n      const { left: nextLeft } = unwrappedItem.getBoundingClientRect();\n      const extraSpace = lastLeft - nextLeft;\n      availableSpace = baseAvailableSpace + extraSpace;\n    }\n\n    targetElement?.classList.remove(\"wrapped\");\n    wrapTargets.forEach((item) => {\n      item.classList.add(\"wrapped\");\n    });\n  }\n  const [nonWrappedItems, wrappedItems] = getNonWrappedAndWrappedItems(\n    container,\n    orientation\n  );\n  unmarkItemsWhichAreNoLongerWrapped(container, wrappedItems);\n  return [nonWrappedItems, wrappedItems];\n};\n\nconst switchWrapOnElements = (\n  wrappedElement?: HTMLElement | null,\n  nonWrappedElement?: HTMLElement\n) => {\n  if (!wrappedElement || !nonWrappedElement) {\n    throw Error(\"switchWrapOnElements, element undefined\");\n  }\n  wrappedElement.classList.remove(\"wrapped\");\n  nonWrappedElement.classList.add(\"wrapped\");\n};\n"],"names":[],"mappings":"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"}