@vuu-ui/vuu-ui-controls 2.1.19-beta.2 → 2.1.19-beta.3

package/esm/measured-container/MeasuredContainer.css.js.map

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

package/esm/measured-container/MeasuredContainer.js

@@ -0,0 +1,70 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { forwardRef } from 'react';
+import { useMeasuredContainer } from './useMeasuredContainer.js';
+import { useForkRef } from '@salt-ds/core';
+import cx from 'clsx';
+import measuredContainerCss from './MeasuredContainer.css.js';
+
+const baseClass = "vuuMeasuredContainer";
+const MeasuredContainer = forwardRef(function MeasuredContainer2({
+  children,
+  className,
+  height,
+  onResize,
+  resizeStrategy,
+  style,
+  width,
+  ...htmlAttributes
+}, forwardedRef) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-measured-container",
+    css: measuredContainerCss,
+    window: targetWindow
+  });
+  const { containerRef, ...containerMeasurements } = useMeasuredContainer({
+    height,
+    onResize,
+    resizeStrategy,
+    width
+  });
+  const { cssSize, innerSize } = containerMeasurements;
+  const unmeasured = innerSize === void 0;
+  const getStyle = () => {
+    return unmeasured ? {
+      ...style,
+      "--measured-css-height": `${cssSize.height}`,
+      "--measured-css-width": `${cssSize.width}`
+    } : {
+      ...style,
+      "--measured-css-height": `${cssSize.height}`,
+      "--measured-css-width": `${cssSize.width}`,
+      "--measured-px-height": `${innerSize?.height}px`,
+      "--measured-px-width": `${innerSize?.width}px`
+    };
+  };
+  const forkedRef = useForkRef(containerRef, forwardedRef);
+  return unmeasured ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(baseClass, `${baseClass}-ummeasured`),
+      style: getStyle(),
+      ref: containerRef
+    }
+  ) : /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(baseClass, className),
+      ref: forkedRef,
+      style: getStyle(),
+      children
+    }
+  );
+});
+
+export { MeasuredContainer };
+//# sourceMappingURL=MeasuredContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MeasuredContainer.js","sources":["../../../../packages/vuu-ui-controls/src/measured-container/MeasuredContainer.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CSSProperties, forwardRef, ForwardedRef, HTMLAttributes } from \"react\";\nimport { MeasuredSize, useMeasuredContainer } from \"./useMeasuredContainer\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\n\nimport measuredContainerCss from \"./MeasuredContainer.css\";\n\nexport type ResizeStrategy = \"defer\" | \"responsive\";\n\nexport interface MeasuredContainerProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onResize\"> {\n  /**\n   * A numeric value for height will result in a fixed height. To adapt to container\n   * use either a percentage height or 'auto'. Always use 'auto' when rendering\n   * within a column based flex container, together with a flex value (use the\n   * --vuuMeasuredContainer-flex CSS custom property))\n   */\n  height?: number | string;\n  onResize?: (size: MeasuredSize) => void;\n  resizeStrategy?: ResizeStrategy;\n  width?: number | string;\n}\n\nconst baseClass = \"vuuMeasuredContainer\";\n\nexport const MeasuredContainer = forwardRef(function MeasuredContainer(\n  {\n    children,\n    className,\n    height,\n    onResize,\n    resizeStrategy,\n    style,\n    width,\n    ...htmlAttributes\n  }: MeasuredContainerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-measured-container\",\n    css: measuredContainerCss,\n    window: targetWindow,\n  });\n\n  const { containerRef, ...containerMeasurements } = useMeasuredContainer({\n    height,\n    onResize,\n    resizeStrategy,\n    width,\n  });\n\n  const { cssSize, innerSize } = containerMeasurements;\n  const unmeasured = innerSize === undefined;\n\n  const getStyle = () => {\n    return unmeasured\n      ? ({\n          ...style,\n          \"--measured-css-height\": `${cssSize.height}`,\n          \"--measured-css-width\": `${cssSize.width}`,\n        } as CSSProperties)\n      : ({\n          ...style,\n          \"--measured-css-height\": `${cssSize.height}`,\n          \"--measured-css-width\": `${cssSize.width}`,\n          \"--measured-px-height\": `${innerSize?.height}px`,\n          \"--measured-px-width\": `${innerSize?.width}px`,\n        } as CSSProperties);\n  };\n\n  const forkedRef = useForkRef(containerRef, forwardedRef);\n\n  return unmeasured ? (\n    <div\n      {...htmlAttributes}\n      className={cx(baseClass, `${baseClass}-ummeasured`)}\n      style={getStyle()}\n      ref={containerRef}\n    />\n  ) : (\n    <div\n      {...htmlAttributes}\n      className={cx(baseClass, className)}\n      ref={forkedRef}\n      style={getStyle()}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["MeasuredContainer"],"mappings":";;;;;;;;;AAyBA,MAAM,SAAY,GAAA,sBAAA;AAEL,MAAA,iBAAA,GAAoB,UAAW,CAAA,SAASA,kBACnD,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,cAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,oBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,GAAG,qBAAA,KAA0B,oBAAqB,CAAA;AAAA,IACtE,MAAA;AAAA,IACA,QAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,EAAE,OAAS,EAAA,SAAA,EAAc,GAAA,qBAAA;AAC/B,EAAA,MAAM,aAAa,SAAc,KAAA,KAAA,CAAA;AAEjC,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,OAAO,UACF,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACH,uBAAA,EAAyB,CAAG,EAAA,OAAA,CAAQ,MAAM,CAAA,CAAA;AAAA,MAC1C,sBAAA,EAAwB,CAAG,EAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,KAEzC,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACH,uBAAA,EAAyB,CAAG,EAAA,OAAA,CAAQ,MAAM,CAAA,CAAA;AAAA,MAC1C,sBAAA,EAAwB,CAAG,EAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,MACxC,sBAAA,EAAwB,CAAG,EAAA,SAAA,EAAW,MAAM,CAAA,EAAA,CAAA;AAAA,MAC5C,qBAAA,EAAuB,CAAG,EAAA,SAAA,EAAW,KAAK,CAAA,EAAA;AAAA,KAC5C;AAAA,GACN;AAEA,EAAM,MAAA,SAAA,GAAY,UAAW,CAAA,YAAA,EAAc,YAAY,CAAA;AAEvD,EAAA,OAAO,UACL,mBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAa,WAAA,CAAA,CAAA;AAAA,MAClD,OAAO,QAAS,EAAA;AAAA,MAChB,GAAK,EAAA;AAAA;AAAA,GAGP,mBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA,SAAA;AAAA,MACL,OAAO,QAAS,EAAA;AAAA,MAEf;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/esm/measured-container/useMeasuredContainer.js

@@ -0,0 +1,164 @@
+import { isValidNumber, useResizeObserver } from '@vuu-ui/vuu-utils';
+import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+
+const ClientWidthHeight = ["clientHeight", "clientWidth"];
+const WidthOnly = ["clientWidth"];
+const HeightOnly = ["clientHeight"];
+const NO_MEASUREMENT = [];
+const NullClientSize = {
+  clientHeight: -1,
+  clientWidth: -1
+};
+const isNumber = (val) => Number.isFinite(val);
+const reduceSizeHeight = (size, value) => {
+  if (value === 0) {
+    return size;
+  } else {
+    return {
+      height: size.height - value,
+      width: size.width
+    };
+  }
+};
+const getInitialValue = (value, defaultValue) => {
+  if (isValidNumber(value)) {
+    return `${value}px`;
+  } else if (typeof value === "string") {
+    return value;
+  } else {
+    return defaultValue;
+  }
+};
+const getInitialCssSize = (height, width) => {
+  return {
+    height: getInitialValue(height, "100%"),
+    width: getInitialValue(width, "auto")
+  };
+};
+const getInitialInnerSize = (height, width) => {
+  if (isValidNumber(height) && isValidNumber(width)) {
+    return {
+      height,
+      width
+    };
+  }
+};
+const useMeasuredContainer = ({
+  defaultHeight = 0,
+  defaultWidth = 0,
+  height,
+  onResize: onResizeProp,
+  resizeStrategy = "responsive",
+  width
+}) => {
+  const deferResize = resizeStrategy === "defer";
+  const sizeRef = useRef(NullClientSize);
+  const resizeHandleRef = useRef(void 0);
+  const containerRef = useRef(null);
+  const [size, setSize] = useState({
+    css: getInitialCssSize(height, width),
+    inner: getInitialInnerSize(height, width),
+    outer: {
+      height: height ?? "100%",
+      width: width ?? "auto"
+    }
+  });
+  const fixedHeight = typeof height === "number";
+  const fixedWidth = typeof width === "number";
+  const dimensions = fixedHeight && fixedWidth ? NO_MEASUREMENT : fixedHeight ? WidthOnly : fixedWidth ? HeightOnly : ClientWidthHeight;
+  useMemo(() => {
+    setSize((currentSize) => {
+      const { inner, outer } = currentSize;
+      if (isValidNumber(height) && isValidNumber(width) && inner && outer) {
+        const { height: innerHeight, width: innerWidth } = inner;
+        const { height: outerHeight, width: outerWidth } = outer;
+        if (outerHeight !== height || outerWidth !== width) {
+          const heightDiff = isValidNumber(outerHeight) ? outerHeight - innerHeight : 0;
+          const widthDiff = isValidNumber(outerWidth) ? outerWidth - innerWidth : 0;
+          return {
+            ...currentSize,
+            outer: { height, width },
+            inner: { height: height - heightDiff, width: width - widthDiff }
+          };
+        }
+      }
+      return currentSize;
+    });
+  }, [height, width]);
+  const handleResize = useCallback(
+    (clientWidth, clientHeight) => {
+      const { css, inner, outer } = size;
+      let newState = size;
+      if (fixedHeight && isNumber(clientWidth) && Math.floor(clientWidth) !== inner?.width) {
+        newState = {
+          css,
+          outer,
+          inner: {
+            width: Math.floor(clientWidth) || defaultWidth,
+            height
+          }
+        };
+      } else if (fixedWidth && isNumber(clientHeight) && Math.floor(clientHeight) !== inner?.height) {
+        newState = {
+          css,
+          outer,
+          inner: {
+            height: Math.floor(clientHeight) || defaultHeight,
+            width
+          }
+        };
+      } else if (isNumber(clientHeight) && isNumber(clientWidth) && (clientWidth !== inner?.width || clientHeight !== inner?.height)) {
+        newState = {
+          css,
+          outer,
+          inner: {
+            width: Math.floor(clientWidth) || defaultWidth,
+            height: Math.floor(clientHeight) || defaultHeight
+          }
+        };
+      }
+      if (newState !== size) {
+        setSize(newState);
+      }
+    },
+    [defaultHeight, defaultWidth, fixedHeight, fixedWidth, height, size, width]
+  );
+  const onResize = useCallback(
+    ({ clientHeight, clientWidth }) => {
+      if (deferResize) {
+        sizeRef.current.clientHeight = clientHeight;
+        sizeRef.current.clientWidth = clientWidth;
+        if (resizeHandleRef.current !== null) {
+          clearTimeout(resizeHandleRef.current);
+        }
+        resizeHandleRef.current = setTimeout(() => {
+          handleResize(clientWidth, clientHeight);
+        }, 40);
+      } else {
+        handleResize(clientWidth, clientHeight);
+      }
+    },
+    [deferResize, handleResize]
+  );
+  useEffect(() => {
+    if (size.inner) {
+      if (containerRef.current) {
+        if (typeof height !== "number" || height === 0) {
+          size.inner.height = containerRef.current.clientHeight;
+        }
+        size.inner.width = containerRef.current.clientWidth;
+        onResizeProp?.(size.inner);
+      }
+    }
+  }, [height, onResizeProp, size.inner]);
+  useResizeObserver(containerRef, dimensions, onResize, true);
+  return {
+    containerRef,
+    cssSize: size.css,
+    outerSize: size.outer,
+    innerSize: size.inner
+  };
+};
+
+export { reduceSizeHeight, useMeasuredContainer };
+//# sourceMappingURL=useMeasuredContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMeasuredContainer.js","sources":["../../../../packages/vuu-ui-controls/src/measured-container/useMeasuredContainer.ts"],"sourcesContent":["import {\n  isValidNumber,\n  useResizeObserver,\n  type ResizeHandler,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  CSSProperties,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { MeasuredContainerProps } from \"./MeasuredContainer\";\n\nconst ClientWidthHeight = [\"clientHeight\", \"clientWidth\"];\nconst WidthOnly = [\"clientWidth\"];\nconst HeightOnly = [\"clientHeight\"];\nconst NO_MEASUREMENT = [] as const;\n\nexport interface ClientSize {\n  clientHeight: number;\n  clientWidth: number;\n}\n\nconst NullClientSize: Partial<ClientSize> = {\n  clientHeight: -1,\n  clientWidth: -1,\n};\n\nexport interface MeasuredProps\n  extends Pick<\n    MeasuredContainerProps,\n    \"height\" | \"onResize\" | \"resizeStrategy\" | \"width\"\n  > {\n  defaultHeight?: number;\n  defaultWidth?: number;\n}\n\nexport type CssSize = Pick<CSSProperties, \"height\" | \"width\">;\n\nexport interface MeasuredSize {\n  height: number;\n  width: number;\n}\n\ninterface MeasuredState {\n  css: CssSize;\n  outer: CssSize;\n  inner?: MeasuredSize;\n}\n\nconst isNumber = (val: unknown): val is number => Number.isFinite(val);\n\nexport interface MeasuredContainerHookResult {\n  containerRef: RefObject<HTMLDivElement | null>;\n  cssSize: CssSize;\n  outerSize: CssSize;\n  innerSize?: MeasuredSize;\n}\n\nexport const reduceSizeHeight = (\n  size: MeasuredSize,\n  value: number,\n): MeasuredSize => {\n  if (value === 0) {\n    return size;\n  } else {\n    return {\n      height: size.height - value,\n      width: size.width,\n    };\n  }\n};\n\nconst getInitialValue = (\n  value: number | string | undefined,\n  defaultValue: \"auto\" | \"100%\",\n) => {\n  if (isValidNumber(value)) {\n    return `${value}px`;\n  } else if (typeof value === \"string\") {\n    return value;\n  } else {\n    return defaultValue;\n  }\n};\n\n// If (outer) height and width are known at initialisation (i.e. they\n// were passed as props), use as initial values for inner size. If there\n// is no border on Table, these values will not change. If there is a border,\n// inner values will be updated once measured.\nconst getInitialCssSize = (\n  height?: number | string,\n  width?: number | string,\n): CssSize => {\n  return {\n    height: getInitialValue(height, \"100%\"),\n    width: getInitialValue(width, \"auto\"),\n  };\n};\n\nconst getInitialInnerSize = (\n  height: unknown,\n  width: unknown,\n): MeasuredSize | undefined => {\n  if (isValidNumber(height) && isValidNumber(width)) {\n    return {\n      height,\n      width,\n    };\n  }\n};\n\nexport const useMeasuredContainer = ({\n  defaultHeight = 0,\n  defaultWidth = 0,\n  height,\n  onResize: onResizeProp,\n  resizeStrategy = \"responsive\",\n  width,\n}: MeasuredProps): MeasuredContainerHookResult => {\n  const deferResize = resizeStrategy === \"defer\";\n  const sizeRef = useRef<Partial<ClientSize>>(NullClientSize);\n  const resizeHandleRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [size, setSize] = useState<MeasuredState>({\n    css: getInitialCssSize(height, width),\n    inner: getInitialInnerSize(height, width),\n    outer: {\n      height: height ?? \"100%\",\n      width: width ?? \"auto\",\n    },\n  });\n\n  const fixedHeight = typeof height === \"number\";\n  const fixedWidth = typeof width === \"number\";\n\n  const dimensions =\n    fixedHeight && fixedWidth\n      ? NO_MEASUREMENT\n      : fixedHeight\n        ? WidthOnly\n        : fixedWidth\n          ? HeightOnly\n          : ClientWidthHeight;\n\n  useMemo(() => {\n    // TODO why call state from memo.\n    // Why not calculate size first inline, then assign that to state\n    // on first pass\n    setSize((currentSize) => {\n      const { inner, outer } = currentSize;\n      if (isValidNumber(height) && isValidNumber(width) && inner && outer) {\n        const { height: innerHeight, width: innerWidth } = inner;\n        const { height: outerHeight, width: outerWidth } = outer;\n\n        if (outerHeight !== height || outerWidth !== width) {\n          const heightDiff = isValidNumber(outerHeight)\n            ? outerHeight - innerHeight\n            : 0;\n          const widthDiff = isValidNumber(outerWidth)\n            ? outerWidth - innerWidth\n            : 0;\n          return {\n            ...currentSize,\n            outer: { height, width },\n            inner: { height: height - heightDiff, width: width - widthDiff },\n          };\n        }\n      }\n      return currentSize;\n    });\n  }, [height, width]);\n\n  const handleResize = useCallback(\n    (clientWidth: number | undefined, clientHeight: number | undefined) => {\n      const { css, inner, outer } = size;\n      let newState: MeasuredState = size;\n      if (\n        fixedHeight &&\n        isNumber(clientWidth) &&\n        Math.floor(clientWidth) !== inner?.width\n      ) {\n        newState = {\n          css,\n          outer,\n          inner: {\n            width: Math.floor(clientWidth) || defaultWidth,\n            height,\n          },\n        };\n      } else if (\n        fixedWidth &&\n        isNumber(clientHeight) &&\n        Math.floor(clientHeight) !== inner?.height\n      ) {\n        newState = {\n          css,\n          outer,\n          inner: {\n            height: Math.floor(clientHeight) || defaultHeight,\n            width,\n          },\n        };\n      } else if (\n        isNumber(clientHeight) &&\n        isNumber(clientWidth) &&\n        (clientWidth !== inner?.width || clientHeight !== inner?.height)\n      ) {\n        newState = {\n          css,\n          outer,\n          inner: {\n            width: Math.floor(clientWidth) || defaultWidth,\n            height: Math.floor(clientHeight) || defaultHeight,\n          },\n        };\n      }\n\n      if (newState !== size) {\n        setSize(newState);\n      }\n    },\n    [defaultHeight, defaultWidth, fixedHeight, fixedWidth, height, size, width],\n  );\n\n  const onResize: ResizeHandler = useCallback(\n    ({ clientHeight, clientWidth }: Partial<ClientSize>) => {\n      if (deferResize) {\n        sizeRef.current.clientHeight = clientHeight;\n        sizeRef.current.clientWidth = clientWidth;\n        //\n        if (resizeHandleRef.current !== null) {\n          clearTimeout(resizeHandleRef.current);\n        }\n        resizeHandleRef.current = setTimeout(() => {\n          handleResize(clientWidth, clientHeight);\n        }, 40);\n      } else {\n        handleResize(clientWidth, clientHeight);\n      }\n    },\n    [deferResize, handleResize],\n  );\n\n  useEffect(() => {\n    if (size.inner) {\n      if (containerRef.current) {\n        if (typeof height !== \"number\" || height === 0) {\n          size.inner.height = containerRef.current.clientHeight;\n        }\n        size.inner.width = containerRef.current.clientWidth;\n        onResizeProp?.(size.inner);\n      }\n    }\n  }, [height, onResizeProp, size.inner]);\n\n  useResizeObserver(containerRef, dimensions, onResize, true);\n\n  return {\n    containerRef,\n    cssSize: size.css,\n    outerSize: size.outer,\n    innerSize: size.inner,\n  };\n};\n"],"names":[],"mappings":"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"}

package/esm/modal-provider/ModalProvider.js

@@ -0,0 +1,140 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Dialog, DialogHeader, DialogContent, DialogCloseButton, DialogActions } from '@salt-ds/core';
+import { createContext, useContext, useCallback, useMemo, useState } from 'react';
+import { Prompt } from '../prompt/Prompt.js';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+const useDialogHost = () => {
+  const [dialogState, setDialogState] = useState();
+  const [promptState, setPromptState] = useState();
+  const closePrompt = useCallback(() => {
+    setPromptState(void 0);
+  }, []);
+  const closeDialog = useCallback(() => {
+    setDialogState(void 0);
+  }, []);
+  const handleOpenChange = useCallback(
+    (open) => {
+      if (open !== true) {
+        closeDialog();
+      }
+    },
+    [closeDialog]
+  );
+  const dialog = dialogState ? /* @__PURE__ */ jsxs(Dialog, { open: true, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(DialogHeader, { header: dialogState.title }),
+    /* @__PURE__ */ jsx(DialogContent, { children: dialogState.content }),
+    dialogState.hideCloseButton !== true ? /* @__PURE__ */ jsx(
+      DialogCloseButton,
+      {
+        "data-embedded": true,
+        "data-icon": "close",
+        onClick: closeDialog
+      }
+    ) : null,
+    dialogState.actions ? /* @__PURE__ */ jsx(DialogActions, { children: dialogState.actions }) : null
+  ] }) : null;
+  const handleOpenChangePrompt = useCallback(
+    (open) => {
+      if (open !== true) {
+        closePrompt();
+      }
+      promptState?.promptProps.onOpenChange?.(open);
+    },
+    [closePrompt, promptState]
+  );
+  const prompt = promptState ? /* @__PURE__ */ jsx(
+    Prompt,
+    {
+      ...promptState.promptProps,
+      onClose: closePrompt,
+      onOpenChange: handleOpenChangePrompt,
+      open: true,
+      children: promptState.content
+    }
+  ) : null;
+  return {
+    dialog,
+    prompt,
+    setDialogState,
+    setPromptState
+  };
+};
+const defaultShowDialog = () => {
+  console.warn("No DialogProvider in place");
+};
+const defaultCloseDialog = () => {
+  console.warn("No DialogProvider in place");
+};
+const defaultShowPrompt = () => {
+  console.warn("No DialogProvider in place");
+};
+const defaultClosePrompt = () => {
+  console.warn("No DialogProvider in place");
+};
+class DialogContextObject {
+  constructor() {
+    __publicField(this, "showDialog", defaultShowDialog);
+    __publicField(this, "closeDialog", defaultCloseDialog);
+    __publicField(this, "showPrompt", defaultShowPrompt);
+    __publicField(this, "closePrompt", defaultClosePrompt);
+    __publicField(this, "setDispatchers", (showDialog, closeDialog, showPrompt, closePrompt) => {
+      this.showDialog = showDialog;
+      this.closeDialog = closeDialog;
+      this.showPrompt = showPrompt;
+      this.closePrompt = closePrompt;
+    });
+  }
+}
+const DialogContext = createContext(
+  new DialogContextObject()
+);
+const DialogHost = ({ context }) => {
+  const { dialog, setDialogState, prompt, setPromptState } = useDialogHost();
+  const showDialog = useCallback(
+    (dialogContent, title, actionButtons, hideCloseButton) => {
+      setDialogState({
+        actions: actionButtons,
+        content: dialogContent,
+        title,
+        hideCloseButton
+      });
+    },
+    [setDialogState]
+  );
+  const closeDialog = useCallback(() => {
+    setDialogState(void 0);
+  }, [setDialogState]);
+  const showPrompt = useCallback(
+    (content, promptProps) => {
+      setPromptState({
+        content,
+        promptProps
+      });
+    },
+    [setPromptState]
+  );
+  const closePrompt = useCallback(() => {
+    setPromptState(void 0);
+  }, [setPromptState]);
+  useMemo(() => {
+    context.setDispatchers(showDialog, closeDialog, showPrompt, closePrompt);
+  }, [closeDialog, closePrompt, context, showDialog, showPrompt]);
+  return dialog ?? prompt;
+};
+const ModalProvider = ({ children }) => {
+  const context = useContext(DialogContext);
+  return /* @__PURE__ */ jsxs(DialogContext.Provider, { value: context, children: [
+    /* @__PURE__ */ jsx(DialogHost, { context }),
+    children
+  ] });
+};
+const useModal = () => {
+  const { closeDialog, closePrompt, showDialog, showPrompt } = useContext(DialogContext);
+  return { showDialog, closeDialog, showPrompt, closePrompt };
+};
+
+export { ModalProvider, useModal };
+//# sourceMappingURL=ModalProvider.js.map

package/esm/modal-provider/ModalProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalProvider.js","sources":["../../../../packages/vuu-ui-controls/src/modal-provider/ModalProvider.tsx"],"sourcesContent":["import {\n  Dialog,\n  DialogActions,\n  DialogCloseButton,\n  DialogContent,\n  DialogHeader,\n} from \"@salt-ds/core\";\nimport {\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\nimport { Prompt, PromptProps } from \"../prompt/Prompt\";\n\nexport type ShowDialog = (\n  dialogContent: ReactElement,\n  title: string,\n  dialogActionButtons?: ReactElement[],\n  hideCloseButton?: boolean,\n) => void;\n\nexport type ShowPrompt = (\n  promptContent: ReactElement,\n  promptProps: PromptProps,\n) => void;\n\ntype DialogState = {\n  actions?: ReactElement[];\n  content: ReactElement;\n  title: string;\n  hideCloseButton?: boolean;\n};\n\ntype PromptState = {\n  content: ReactElement;\n  promptProps: PromptProps;\n};\n\ntype SetDispatchers = (\n  showDialog: ShowDialog,\n  closeDialog: () => void,\n  showPrompt: ShowPrompt,\n  closePrompt: () => void,\n) => void;\n\ninterface DialogContextProps {\n  closeDialog: () => void;\n  closePrompt: () => void;\n  showDialog: ShowDialog;\n  showPrompt: ShowPrompt;\n  setDispatchers: SetDispatchers;\n}\n\nconst useDialogHost = () => {\n  const [dialogState, setDialogState] = useState<DialogState>();\n  const [promptState, setPromptState] = useState<PromptState>();\n\n  const closePrompt = useCallback(() => {\n    setPromptState(undefined);\n  }, []);\n\n  const closeDialog = useCallback(() => {\n    setDialogState(undefined);\n  }, []);\n\n  const handleOpenChange = useCallback(\n    (open?: boolean) => {\n      if (open !== true) {\n        closeDialog();\n      }\n    },\n    [closeDialog],\n  );\n\n  const dialog = dialogState ? (\n    <Dialog open={true} onOpenChange={handleOpenChange}>\n      <DialogHeader header={dialogState.title} />\n      <DialogContent>{dialogState.content}</DialogContent>\n      {dialogState.hideCloseButton !== true ? (\n        <DialogCloseButton\n          data-embedded\n          data-icon=\"close\"\n          onClick={closeDialog}\n        />\n      ) : null}\n      {dialogState.actions ? (\n        <DialogActions>{dialogState.actions}</DialogActions>\n      ) : null}\n    </Dialog>\n  ) : null;\n\n  const handleOpenChangePrompt = useCallback(\n    (open: boolean) => {\n      if (open !== true) {\n        closePrompt();\n      }\n      promptState?.promptProps.onOpenChange?.(open);\n    },\n    [closePrompt, promptState],\n  );\n\n  const prompt = promptState ? (\n    <Prompt\n      {...promptState.promptProps}\n      onClose={closePrompt}\n      onOpenChange={handleOpenChangePrompt}\n      open\n    >\n      {promptState.content}\n    </Prompt>\n  ) : null;\n\n  return {\n    dialog,\n    prompt,\n    setDialogState,\n    setPromptState,\n  };\n};\n\nconst defaultShowDialog: ShowDialog = () => {\n  console.warn(\"No DialogProvider in place\");\n};\nconst defaultCloseDialog = () => {\n  console.warn(\"No DialogProvider in place\");\n};\nconst defaultShowPrompt: ShowPrompt = () => {\n  console.warn(\"No DialogProvider in place\");\n};\nconst defaultClosePrompt = () => {\n  console.warn(\"No DialogProvider in place\");\n};\n\nclass DialogContextObject implements DialogContextProps {\n  showDialog = defaultShowDialog;\n  closeDialog = defaultCloseDialog;\n  showPrompt = defaultShowPrompt;\n  closePrompt = defaultClosePrompt;\n  setDispatchers: SetDispatchers = (\n    showDialog,\n    closeDialog,\n    showPrompt,\n    closePrompt,\n  ) => {\n    this.showDialog = showDialog;\n    this.closeDialog = closeDialog;\n    this.showPrompt = showPrompt;\n    this.closePrompt = closePrompt;\n  };\n}\n\nconst DialogContext = createContext<DialogContextProps>(\n  new DialogContextObject(),\n);\n\nconst DialogHost = ({ context }: { context: DialogContextProps }) => {\n  const { dialog, setDialogState, prompt, setPromptState } = useDialogHost();\n  const showDialog: ShowDialog = useCallback(\n    (dialogContent, title, actionButtons, hideCloseButton) => {\n      setDialogState({\n        actions: actionButtons,\n        content: dialogContent,\n        title,\n        hideCloseButton,\n      });\n    },\n    [setDialogState],\n  );\n  const closeDialog = useCallback(() => {\n    setDialogState(undefined);\n  }, [setDialogState]);\n\n  const showPrompt: ShowPrompt = useCallback(\n    (content, promptProps) => {\n      setPromptState({\n        content,\n        promptProps,\n      });\n    },\n    [setPromptState],\n  );\n  const closePrompt = useCallback(() => {\n    setPromptState(undefined);\n  }, [setPromptState]);\n\n  useMemo(() => {\n    context.setDispatchers(showDialog, closeDialog, showPrompt, closePrompt);\n  }, [closeDialog, closePrompt, context, showDialog, showPrompt]);\n  return dialog ?? prompt;\n};\n\nexport const ModalProvider = ({ children }: { children: ReactNode }) => {\n  const context = useContext(DialogContext);\n  return (\n    <DialogContext.Provider value={context}>\n      <DialogHost context={context} />\n      {children}\n    </DialogContext.Provider>\n  );\n};\n\nexport const useModal = () => {\n  const { closeDialog, closePrompt, showDialog, showPrompt } =\n    useContext(DialogContext);\n  return { showDialog, closeDialog, showPrompt, closePrompt };\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,141 @@
+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}`
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } = 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":["../../../../packages/vuu-ui-controls/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        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      } = childEl.props as any;\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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"}