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

package/cjs/instrument-picker/useTablePicker.js

@@ -0,0 +1,150 @@
+'use strict';
+
+var react = require('@floating-ui/react');
+var core = require('@salt-ds/core');
+var React = require('react');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var vuuTable = require('@vuu-ui/vuu-table');
+
+const defaultRowToString = (dataRow) => Object.values(dataRow).join(" ");
+const useTablePicker = ({
+  TableProps,
+  onSelect,
+  rowToString = defaultRowToString,
+  schema,
+  searchColumns = schema.columns.filter(vuuUtils.isStringColumn).map(vuuUtils.toColumnName)
+}) => {
+  const { VuuDataSource } = vuuUtils.useData();
+  const [value, setValue] = React.useState("");
+  const [open, setOpen] = React.useState(false);
+  const widthRef = React.useRef(-1);
+  const tableColumns = TableProps?.config.columns;
+  const containerRef = React.useCallback((el) => {
+    widthRef.current = el?.clientWidth ?? -1;
+  }, []);
+  const dataSource = React.useMemo(() => {
+    const columns = tableColumns ?? schema.columns;
+    return new VuuDataSource({
+      columns: columns.map((c) => c.name),
+      table: schema.table
+    });
+  }, [tableColumns, VuuDataSource, schema]);
+  const navigation = vuuTable.useControlledTableNavigation(-1, dataSource.size);
+  const baseFilterPattern = React.useMemo(
+    // TODO make this contains once server supports it
+    () => searchColumns.map((col) => `${col} starts "__VALUE__"`).join(" or "),
+    [searchColumns]
+  );
+  const { context, elements, ...floatingUIProps } = core.useFloatingUI({
+    open,
+    onOpenChange: setOpen,
+    placement: "bottom-end",
+    strategy: "fixed",
+    middleware: [
+      react.size({
+        apply({ rects, elements: elements2, availableHeight }) {
+          Object.assign(elements2.floating.style, {
+            minWidth: `${rects.reference.width}px`,
+            maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`
+          });
+        }
+      }),
+      react.flip({ fallbackStrategy: "initialPlacement" })
+    ]
+  });
+  const interactionPropGetters = react.useInteractions([
+    react.useDismiss(context),
+    react.useClick(context, { keyboardHandlers: false, toggle: false })
+  ]);
+  const handleInputChange = React.useCallback(
+    (evt) => {
+      const { value: value2 } = evt.target;
+      setValue(value2);
+      console.log(`input changed ${value2}`);
+      if (value2 && value2.trim().length) {
+        const filter = baseFilterPattern.replaceAll("__VALUE__", value2);
+        dataSource.filter = {
+          filter
+        };
+      } else {
+        dataSource.filter = {
+          filter: ""
+        };
+      }
+    },
+    [baseFilterPattern, dataSource]
+  );
+  const handleSelectRow = React.useCallback(
+    (dataRow) => {
+      const value2 = dataRow === null ? "" : rowToString(dataRow);
+      setValue(value2);
+      onSelect?.(dataRow);
+      requestAnimationFrame(() => {
+        setOpen(false);
+      });
+    },
+    [onSelect, rowToString]
+  );
+  const handleKeyDown = React.useCallback(
+    (evt) => {
+      if (open) {
+        if (vuuTable.isNavigationKey(evt.key, "row") || vuuTable.isRowSelectionKey(evt.key)) {
+          navigation.onKeyDown(evt);
+        }
+      } else {
+        if (evt.key === "ArrowDown" || evt.key === "Enter") {
+          setOpen(true);
+        }
+      }
+    },
+    [navigation, open]
+  );
+  const inputProps = {
+    inputProps: {
+      autoComplete: "off",
+      onKeyDown: handleKeyDown
+    },
+    onChange: handleInputChange
+  };
+  const tableHandlers = {
+    onSelect: handleSelectRow
+  };
+  const tableConfig = React.useMemo(() => {
+    const config = TableProps?.config;
+    if (config) {
+      const {
+        columns = schema.columns,
+        columnLayout = "fit",
+        ...rest
+      } = config;
+      return {
+        columns,
+        columnLayout,
+        ...rest
+      };
+    } else {
+      return {
+        columnLayout: "fit",
+        columns: schema.columns
+      };
+    }
+  }, [TableProps, schema]);
+  return {
+    containerRef,
+    dataSource,
+    highlightedIndex: navigation.highlightedIndexRef.current,
+    floatingUIProps,
+    inputProps,
+    interactionPropGetters,
+    onKeyDown: handleKeyDown,
+    open,
+    tableConfig,
+    tableHandlers,
+    tableRef: navigation.tableRef,
+    value,
+    width: widthRef.current
+  };
+};
+
+exports.useTablePicker = useTablePicker;
+//# sourceMappingURL=useTablePicker.js.map

package/cjs/instrument-picker/useTablePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTablePicker.js","sources":["../../../../packages/vuu-ui-controls/src/instrument-picker/useTablePicker.ts"],"sourcesContent":["import {\n  flip,\n  size,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useFloatingUI } from \"@salt-ds/core\";\nimport {\n  ChangeEvent,\n  KeyboardEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type {\n  DataRow,\n  TableConfig,\n  TableRowSelectHandler,\n} from \"@vuu-ui/vuu-table-types\";\nimport { isStringColumn, toColumnName, useData } from \"@vuu-ui/vuu-utils\";\nimport type { TablePickerProps } from \"./TablePicker\";\nimport {\n  isNavigationKey,\n  isRowSelectionKey,\n  useControlledTableNavigation,\n} from \"@vuu-ui/vuu-table\";\n\nexport interface TablePickerHookProps\n  extends Pick<\n    TablePickerProps,\n    \"TableProps\" | \"onSelect\" | \"rowToString\" | \"schema\" | \"searchColumns\"\n  > {\n  defaultIsOpen?: boolean;\n  isOpen?: boolean;\n}\n\nconst defaultRowToString = (dataRow: DataRow) =>\n  Object.values(dataRow).join(\" \");\n\nexport const useTablePicker = ({\n  TableProps,\n  onSelect,\n  rowToString = defaultRowToString,\n  schema,\n  searchColumns = schema.columns.filter(isStringColumn).map(toColumnName),\n}: TablePickerHookProps) => {\n  const { VuuDataSource } = useData();\n  const [value, setValue] = useState(\"\");\n  const [open, setOpen] = useState(false);\n\n  const widthRef = useRef(-1);\n\n  const tableColumns = TableProps?.config.columns;\n\n  const containerRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    widthRef.current = el?.clientWidth ?? -1;\n  }, []);\n\n  const dataSource = useMemo(() => {\n    const columns = tableColumns ?? schema.columns;\n\n    return new VuuDataSource({\n      columns: columns.map((c) => c.name),\n      table: schema.table,\n    });\n  }, [tableColumns, VuuDataSource, schema]);\n\n  const navigation = useControlledTableNavigation(-1, dataSource.size);\n\n  const baseFilterPattern = useMemo(\n    // TODO make this contains once server supports it\n    () => searchColumns.map((col) => `${col} starts \"__VALUE__\"`).join(\" or \"),\n    [searchColumns],\n  );\n\n  // const handleOpenChange = useCallback<OpenChangeHandler>(\n  //   (open, closeReason) => {\n  //     setIsOpen(open);\n  //     onOpenChange?.(open, closeReason);\n  //   },\n  //   [onOpenChange, setIsOpen],\n  // );\n\n  const { context, elements, ...floatingUIProps } = useFloatingUI({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-end\",\n    strategy: \"fixed\",\n    middleware: [\n      size({\n        apply({ rects, elements, availableHeight }) {\n          Object.assign(elements.floating.style, {\n            minWidth: `${rects.reference.width}px`,\n            maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n          });\n        },\n      }),\n      flip({ fallbackStrategy: \"initialPlacement\" }),\n    ],\n  });\n\n  const interactionPropGetters = useInteractions([\n    useDismiss(context),\n    useClick(context, { keyboardHandlers: false, toggle: false }),\n  ]);\n\n  const handleInputChange = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const { value } = evt.target;\n      setValue(value);\n\n      console.log(`input changed ${value}`);\n\n      if (value && value.trim().length) {\n        const filter = baseFilterPattern.replaceAll(\"__VALUE__\", value);\n        dataSource.filter = {\n          filter,\n        };\n      } else {\n        dataSource.filter = {\n          filter: \"\",\n        };\n      }\n    },\n    [baseFilterPattern, dataSource],\n  );\n\n  const handleSelectRow = useCallback<TableRowSelectHandler>(\n    (dataRow) => {\n      const value = dataRow === null ? \"\" : rowToString(dataRow);\n      setValue(value);\n      onSelect?.(dataRow);\n      // TODO do we need to include a reason ?\n      requestAnimationFrame(() => {\n        setOpen(false);\n      });\n    },\n    [onSelect, rowToString],\n  );\n\n  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLElement>>(\n    (evt) => {\n      if (open) {\n        if (isNavigationKey(evt.key, \"row\") || isRowSelectionKey(evt.key)) {\n          navigation.onKeyDown(evt);\n        }\n      } else {\n        if (evt.key === \"ArrowDown\" || evt.key === \"Enter\") {\n          setOpen(true);\n        }\n      }\n    },\n    [navigation, open],\n  );\n\n  const inputProps = {\n    inputProps: {\n      autoComplete: \"off\",\n      onKeyDown: handleKeyDown,\n    },\n    onChange: handleInputChange,\n  };\n  const tableHandlers = {\n    onSelect: handleSelectRow,\n  };\n\n  const tableConfig = useMemo<TableConfig>(() => {\n    const config = TableProps?.config;\n    if (config) {\n      const {\n        columns = schema.columns,\n        columnLayout = \"fit\",\n        ...rest\n      } = config;\n      return {\n        columns,\n        columnLayout,\n        ...rest,\n      };\n    } else {\n      return {\n        columnLayout: \"fit\",\n        columns: schema.columns,\n      };\n    }\n  }, [TableProps, schema]);\n\n  return {\n    containerRef,\n    dataSource,\n    highlightedIndex: navigation.highlightedIndexRef.current,\n    floatingUIProps,\n    inputProps,\n    interactionPropGetters,\n    onKeyDown: handleKeyDown,\n    open,\n    tableConfig,\n    tableHandlers,\n    tableRef: navigation.tableRef,\n    value,\n    width: widthRef.current,\n  };\n};\n"],"names":["isStringColumn","toColumnName","useData","useState","useRef","useCallback","useMemo","useControlledTableNavigation","useFloatingUI","size","elements","flip","useInteractions","useDismiss","useClick","value","isNavigationKey","isRowSelectionKey"],"mappings":"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"}

package/cjs/measured-container/MeasuredContainer.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var measuredContainerCss = "\n.vuuMeasuredContainer {\n    flex: var(--vuuMeasuredContainer-flex, none);\n    height: var(--vuuMeasuredContainer-height, var(--measured-css-height));\n    min-height: 0;\n    width: var(--measured-css-width);\n  \n}";
+
+module.exports = measuredContainerCss;
+//# sourceMappingURL=MeasuredContainer.css.js.map

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

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

package/cjs/measured-container/MeasuredContainer.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var React = require('react');
+var useMeasuredContainer = require('./useMeasuredContainer.js');
+var core = require('@salt-ds/core');
+var cx = require('clsx');
+var MeasuredContainer$1 = require('./MeasuredContainer.css.js');
+
+const baseClass = "vuuMeasuredContainer";
+const MeasuredContainer = React.forwardRef(function MeasuredContainer2({
+  children,
+  className,
+  height,
+  onResize,
+  resizeStrategy,
+  style,
+  width,
+  ...htmlAttributes
+}, forwardedRef) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-measured-container",
+    css: MeasuredContainer$1,
+    window: targetWindow
+  });
+  const { containerRef, ...containerMeasurements } = useMeasuredContainer.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 = core.useForkRef(containerRef, forwardedRef);
+  return unmeasured ? /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(baseClass, `${baseClass}-ummeasured`),
+      style: getStyle(),
+      ref: containerRef
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(baseClass, className),
+      ref: forkedRef,
+      style: getStyle(),
+      children
+    }
+  );
+});
+
+exports.MeasuredContainer = MeasuredContainer;
+//# sourceMappingURL=MeasuredContainer.js.map

package/cjs/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":["forwardRef","MeasuredContainer","useWindow","useComponentCssInjection","measuredContainerCss","useMeasuredContainer","useForkRef","jsx"],"mappings":";;;;;;;;;;;AAyBA,MAAM,SAAY,GAAA,sBAAA;AAEL,MAAA,iBAAA,GAAoBA,gBAAW,CAAA,SAASC,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,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,GAAG,qBAAA,KAA0BC,yCAAqB,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,GAAYC,eAAW,CAAA,YAAA,EAAc,YAAY,CAAA;AAEvD,EAAA,OAAO,UACL,mBAAAC,cAAA;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,mBAAAA,cAAA;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/cjs/measured-container/useMeasuredContainer.js

@@ -0,0 +1,167 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var React = require('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 (vuuUtils.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 (vuuUtils.isValidNumber(height) && vuuUtils.isValidNumber(width)) {
+    return {
+      height,
+      width
+    };
+  }
+};
+const useMeasuredContainer = ({
+  defaultHeight = 0,
+  defaultWidth = 0,
+  height,
+  onResize: onResizeProp,
+  resizeStrategy = "responsive",
+  width
+}) => {
+  const deferResize = resizeStrategy === "defer";
+  const sizeRef = React.useRef(NullClientSize);
+  const resizeHandleRef = React.useRef(void 0);
+  const containerRef = React.useRef(null);
+  const [size, setSize] = React.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;
+  React.useMemo(() => {
+    setSize((currentSize) => {
+      const { inner, outer } = currentSize;
+      if (vuuUtils.isValidNumber(height) && vuuUtils.isValidNumber(width) && inner && outer) {
+        const { height: innerHeight, width: innerWidth } = inner;
+        const { height: outerHeight, width: outerWidth } = outer;
+        if (outerHeight !== height || outerWidth !== width) {
+          const heightDiff = vuuUtils.isValidNumber(outerHeight) ? outerHeight - innerHeight : 0;
+          const widthDiff = vuuUtils.isValidNumber(outerWidth) ? outerWidth - innerWidth : 0;
+          return {
+            ...currentSize,
+            outer: { height, width },
+            inner: { height: height - heightDiff, width: width - widthDiff }
+          };
+        }
+      }
+      return currentSize;
+    });
+  }, [height, width]);
+  const handleResize = React.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 = React.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]
+  );
+  React.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]);
+  vuuUtils.useResizeObserver(containerRef, dimensions, onResize, true);
+  return {
+    containerRef,
+    cssSize: size.css,
+    outerSize: size.outer,
+    innerSize: size.inner
+  };
+};
+
+exports.reduceSizeHeight = reduceSizeHeight;
+exports.useMeasuredContainer = useMeasuredContainer;
+//# sourceMappingURL=useMeasuredContainer.js.map

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

package/cjs/modal-provider/ModalProvider.js

@@ -0,0 +1,143 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var React = require('react');
+var Prompt = require('../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] = React.useState();
+  const [promptState, setPromptState] = React.useState();
+  const closePrompt = React.useCallback(() => {
+    setPromptState(void 0);
+  }, []);
+  const closeDialog = React.useCallback(() => {
+    setDialogState(void 0);
+  }, []);
+  const handleOpenChange = React.useCallback(
+    (open) => {
+      if (open !== true) {
+        closeDialog();
+      }
+    },
+    [closeDialog]
+  );
+  const dialog = dialogState ? /* @__PURE__ */ jsxRuntime.jsxs(core.Dialog, { open: true, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(core.DialogHeader, { header: dialogState.title }),
+    /* @__PURE__ */ jsxRuntime.jsx(core.DialogContent, { children: dialogState.content }),
+    dialogState.hideCloseButton !== true ? /* @__PURE__ */ jsxRuntime.jsx(
+      core.DialogCloseButton,
+      {
+        "data-embedded": true,
+        "data-icon": "close",
+        onClick: closeDialog
+      }
+    ) : null,
+    dialogState.actions ? /* @__PURE__ */ jsxRuntime.jsx(core.DialogActions, { children: dialogState.actions }) : null
+  ] }) : null;
+  const handleOpenChangePrompt = React.useCallback(
+    (open) => {
+      if (open !== true) {
+        closePrompt();
+      }
+      promptState?.promptProps.onOpenChange?.(open);
+    },
+    [closePrompt, promptState]
+  );
+  const prompt = promptState ? /* @__PURE__ */ jsxRuntime.jsx(
+    Prompt.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 = React.createContext(
+  new DialogContextObject()
+);
+const DialogHost = ({ context }) => {
+  const { dialog, setDialogState, prompt, setPromptState } = useDialogHost();
+  const showDialog = React.useCallback(
+    (dialogContent, title, actionButtons, hideCloseButton) => {
+      setDialogState({
+        actions: actionButtons,
+        content: dialogContent,
+        title,
+        hideCloseButton
+      });
+    },
+    [setDialogState]
+  );
+  const closeDialog = React.useCallback(() => {
+    setDialogState(void 0);
+  }, [setDialogState]);
+  const showPrompt = React.useCallback(
+    (content, promptProps) => {
+      setPromptState({
+        content,
+        promptProps
+      });
+    },
+    [setPromptState]
+  );
+  const closePrompt = React.useCallback(() => {
+    setPromptState(void 0);
+  }, [setPromptState]);
+  React.useMemo(() => {
+    context.setDispatchers(showDialog, closeDialog, showPrompt, closePrompt);
+  }, [closeDialog, closePrompt, context, showDialog, showPrompt]);
+  return dialog ?? prompt;
+};
+const ModalProvider = ({ children }) => {
+  const context = React.useContext(DialogContext);
+  return /* @__PURE__ */ jsxRuntime.jsxs(DialogContext.Provider, { value: context, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogHost, { context }),
+    children
+  ] });
+};
+const useModal = () => {
+  const { closeDialog, closePrompt, showDialog, showPrompt } = React.useContext(DialogContext);
+  return { showDialog, closeDialog, showPrompt, closePrompt };
+};
+
+exports.ModalProvider = ModalProvider;
+exports.useModal = useModal;
+//# sourceMappingURL=ModalProvider.js.map

package/cjs/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":["useState","useCallback","jsxs","Dialog","jsx","DialogHeader","DialogContent","DialogCloseButton","DialogActions","Prompt","createContext","useMemo","useContext"],"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":";;;;;;"}