@vuu-ui/vuu-ui-controls 0.0.26

package/cjs/measured-container/useResizeObserver.js

@@ -0,0 +1,130 @@
+'use strict';
+
+var React = require('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 = React.useRef(dimensions);
+  const measure = React.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;
+      },
+      {}
+    );
+  }, []);
+  React.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]);
+  React.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]);
+}
+
+exports.useResizeObserver = useResizeObserver;
+//# sourceMappingURL=useResizeObserver.js.map

package/cjs/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":["useRef","useCallback","useEffect"],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+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";
+
+module.exports = overflowContainerCss;
+//# sourceMappingURL=OverflowContainer.css.js.map

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

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

package/cjs/overflow-container/OverflowContainer.js

@@ -0,0 +1,142 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuPopups = require('@vuu-ui/vuu-popups');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var React = require('react');
+var useOverflowContainer = require('./useOverflowContainer.js');
+var OverflowContainer$1 = require('./OverflowContainer.css.js');
+
+const classBase = "vuuOverflowContainer";
+const WrapContainer = React.memo(
+  ({
+    PopupMenuProps: PopupMenuProps2,
+    allowDragDrop,
+    children,
+    id,
+    onMoveItem,
+    onSwitchWrappedItemIntoView,
+    orientation,
+    overflowIcon
+  }) => {
+    const childElements = vuuUtils.asReactElements(children);
+    const {
+      draggable,
+      draggedItemIndex,
+      menuActionHandler,
+      menuBuilder,
+      onItemMouseDown,
+      rootRef
+    } = useOverflowContainer.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `${classBase}-OverflowIndicator`,
+        "data-index": "overflow",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          vuuPopups.PopupMenu,
+          {
+            ...PopupMenuProps2,
+            "data-embedded": true,
+            icon: overflowIcon,
+            menuBuilder,
+            menuActionHandler,
+            tabIndex: -1
+          }
+        )
+      },
+      "overflow"
+    );
+    content.push(overflowIndicator);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(`${classBase}-wrapContainer`), ref: rootRef, children: [
+      content,
+      draggable
+    ] });
+  }
+);
+WrapContainer.displayName = "OverflowContainer.InnerContainer";
+const OverflowContainer = React.forwardRef(function OverflowContainer2({
+  PopupMenuProps: PopupMenuProps2,
+  allowDragDrop = false,
+  children,
+  className,
+  id: idProp,
+  onMoveItem,
+  onSwitchWrappedItemIntoView,
+  orientation = "horizontal",
+  overflowIcon,
+  overflowPosition,
+  ...htmlAttributes
+}, forwardedRef) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-overflow-container",
+    css: OverflowContainer$1,
+    window: targetWindow
+  });
+  const id = vuuUtils.useId(idProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(
+        cx(className, classBase, {
+          "vuuOrientation-horizontal": orientation === "horizontal",
+          "vuuOrientation-vertical": orientation === "vertical"
+        })
+      ),
+      id,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        WrapContainer,
+        {
+          PopupMenuProps: PopupMenuProps2,
+          allowDragDrop,
+          id,
+          orientation,
+          overflowIcon,
+          overflowPosition,
+          onMoveItem,
+          onSwitchWrappedItemIntoView,
+          children
+        }
+      )
+    }
+  );
+});
+
+exports.OverflowContainer = OverflowContainer;
+//# sourceMappingURL=OverflowContainer.js.map

package/cjs/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","asReactElements","useOverflowContainer","jsx","PopupMenu","jsxs","forwardRef","OverflowContainer","useWindow","useComponentCssInjection","overflowContainerCss","useId"],"mappings":"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"}

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

@@ -0,0 +1,286 @@
+'use strict';
+
+var vuuUtils = require('@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 = vuuUtils.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 = vuuUtils.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");
+};
+
+exports.NO_WRAPPED_ITEMS = NO_WRAPPED_ITEMS;
+exports.applyOverflowClassToWrappedItems = applyOverflowClassToWrappedItems;
+exports.correctForWrappedHighPriorityItems = correctForWrappedHighPriorityItems;
+exports.correctForWrappedOverflowIndicator = correctForWrappedOverflowIndicator;
+exports.getElementsMarkedAsWrapped = getElementsMarkedAsWrapped;
+exports.getNonWrappedAndWrappedItems = getNonWrappedAndWrappedItems;
+exports.highPriorityItemsHaveWrappedButShouldNotHave = highPriorityItemsHaveWrappedButShouldNotHave;
+exports.markElementAsWrapped = markElementAsWrapped;
+exports.overflowIndicatorHasWrappedButShouldNotHave = overflowIndicatorHasWrappedButShouldNotHave;
+exports.removeOverflowIndicatorIfNoLongerNeeded = removeOverflowIndicatorIfNoLongerNeeded;
+exports.sortByScreenOrder = sortByScreenOrder;
+exports.switchWrappedItemIntoView = switchWrappedItemIntoView;
+exports.unmarkItemsWhichAreNoLongerWrapped = unmarkItemsWhichAreNoLongerWrapped;
+//# sourceMappingURL=overflow-utils.js.map