npm - @vuu-ui/vuu-ui-controls - Versions diffs - 0.8.94 → 0.8.96 - Mend

@vuu-ui/vuu-ui-controls 0.8.94 → 0.8.96

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

package/cjs/index.js CHANGED Viewed

@@ -30,7 +30,7 @@ var EditableLabel = require('./editable-label/EditableLabel.js');
 var ExpandoInput = require('./expando-input/ExpandoInput.js');
 var Icon = require('./icon-button/Icon.js');
 var IconButton = require('./icon-button/IconButton.js');
-var InstrumentPicker = require('./instrument-picker/InstrumentPicker.js');
+var TablePicker = require('./instrument-picker/TablePicker.js');
 var InstrumentSearch = require('./instrument-search/InstrumentSearch.js');
 var keyUtils = require('./list/common-hooks/keyUtils.js');
 var useCollapsibleGroups = require('./list/common-hooks/useCollapsibleGroups.js');
@@ -136,7 +136,7 @@ exports.NullEditAPI = EditableLabel.NullEditAPI;
 exports.ExpandoInput = ExpandoInput.ExpandoInput;
 exports.Icon = Icon.Icon;
 exports.IconButton = IconButton.IconButton;
-exports.InstrumentPicker = InstrumentPicker.InstrumentPicker;
+exports.TablePicker = TablePicker.TablePicker;
 exports.InstrumentSearch = InstrumentSearch.InstrumentSearch;
 exports.ArrowDown = keyUtils.ArrowDown;
 exports.ArrowLeft = keyUtils.ArrowLeft;
@@ -193,6 +193,7 @@ exports.ListItemGroup = ListItemGroup.ListItemGroup;
 exports.useList = useList.useList;
 exports.RadioIcon = RadioIcon.RadioIcon;
 exports.MeasuredContainer = MeasuredContainer.MeasuredContainer;
+exports.reduceSizeHeight = useMeasuredContainer.reduceSizeHeight;
 exports.useMeasuredContainer = useMeasuredContainer.useMeasuredContainer;
 exports.OverflowContainer = OverflowContainer.OverflowContainer;
 exports.NO_WRAPPED_ITEMS = overflowUtils.NO_WRAPPED_ITEMS;

package/cjs/index.js.map CHANGED Viewed

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

package/cjs/instrument-picker/TablePicker.css.js ADDED Viewed

@@ -0,0 +1,6 @@
+'use strict';
+var tablePickerCss = ".vuuTablePicker {\n  border-radius: 6px;\n  height: var(--salt-size-base);\n  padding: 1px;\n  box-sizing: content-box;\n}\n\n.vuuTablePicker-floating-table {\n  border: solid 1px var(--salt-container-secondary-borderColor);\n  border-radius: 4px;\n  overflow: auto;\n  padding: var(--salt-spacing-100) 0;\n  z-index: var(--salt-zIndex-popout);\n}\n";
+module.exports = tablePickerCss;
+//# sourceMappingURL=TablePicker.css.js.map

package/cjs/instrument-picker/TablePicker.css.js.map ADDED Viewed

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

package/cjs/instrument-picker/TablePicker.js ADDED Viewed

@@ -0,0 +1,121 @@
+'use strict';
+var jsxRuntime = require('react/jsx-runtime');
+var vuuTable = require('@vuu-ui/vuu-table');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var cx = require('clsx');
+var React = require('react');
+var IconButton = require('../icon-button/IconButton.js');
+var TablePicker$1 = require('./TablePicker.css.js');
+var useTablePicker = require('./useTablePicker.js');
+const classBase = "vuuTablePicker";
+const FloatingTable = React.forwardRef(
+  function FloatingTable2({ children, className, collapsed, open, ...props }, forwardedRef) {
+    const { Component: FloatingComponent } = core.useFloatingComponent();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      FloatingComponent,
+      {
+        className: cx(
+          `${classBase}-floating-table`,
+          {
+            [`${classBase}-collapsed`]: collapsed
+          },
+          className
+        ),
+        role: "listbox",
+        open,
+        ...props,
+        ref: forwardedRef,
+        children
+      }
+    );
+  }
+);
+const TablePicker = ({
+  TableProps,
+  onSelect,
+  rowToString,
+  schema,
+  searchColumns,
+  ...htmlAttributes
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-table-picker",
+    css: TablePicker$1,
+    window: targetWindow
+  });
+  const tableId = core.useIdMemo();
+  const {
+    containerRef,
+    dataSource,
+    highlightedIndex,
+    floatingUIProps: { x, y, strategy, floating, reference },
+    inputProps,
+    interactionPropGetters: { getFloatingProps, getReferenceProps },
+    onKeyDown,
+    open,
+    tableConfig,
+    tableHandlers,
+    tableRef,
+    value,
+    width
+  } = useTablePicker.useTablePicker({
+    TableProps,
+    rowToString,
+    onSelect,
+    schema,
+    searchColumns
+  });
+  const endAdornment = React.useMemo(
+    () => /* @__PURE__ */ jsxRuntime.jsx(
+      IconButton.IconButton,
+      {
+        ...getReferenceProps(),
+        "data-embedded": true,
+        ref: reference,
+        icon: "chevron-down",
+        onKeyDown,
+        variant: "secondary"
+      }
+    ),
+    [getReferenceProps, onKeyDown, reference]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: classBase, ref: containerRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(core.Input, { ...inputProps, endAdornment, value }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FloatingTable,
+      {
+        ...getFloatingProps(),
+        collapsed: !open,
+        id: tableId,
+        open,
+        left: x + 3,
+        position: strategy,
+        ref: floating,
+        top: y + 3,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          vuuTable.Table,
+          {
+            ...tableHandlers,
+            config: tableConfig,
+            dataSource,
+            highlightedIndex,
+            maxViewportRowLimit: 10,
+            navigationStyle: "row",
+            ref: tableRef,
+            selectionModel: "single",
+            showColumnHeaders: false,
+            width: width - 3
+          }
+        )
+      }
+    )
+  ] });
+};
+exports.TablePicker = TablePicker;
+//# sourceMappingURL=TablePicker.js.map

package/cjs/instrument-picker/TablePicker.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TablePicker.js","sources":["../../src/instrument-picker/TablePicker.tsx"],"sourcesContent":["import type { DataSourceRowObject, TableSchema } from \"@vuu-ui/vuu-data-types\";\nimport { Table, type TableProps } from \"@vuu-ui/vuu-table\";\nimport {\n Input,\n useFloatingComponent,\n useIdMemo,\n type FloatingComponentProps,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { forwardRef, useMemo, type HTMLAttributes } from \"react\";\nimport { IconButton } from \"../icon-button\";\nimport tablePickerCss from \"./TablePicker.css\";\nimport { useTablePicker } from \"./useTablePicker\";\n\nconst classBase = \"vuuTablePicker\";\n\ninterface FloatingTableProps extends FloatingComponentProps {\n collapsed?: boolean;\n}\n\nexport interface TablePickerProps\n extends Omit<HTMLAttributes<HTMLElement>, \"onSelect\">,\n Pick<TableProps, \"onSelect\"> {\n TableProps?: Pick<TableProps, \"config\">;\n rowToString?: (row: DataSourceRowObject) => string;\n schema: TableSchema;\n searchColumns?: string[];\n}\n\nconst FloatingTable = forwardRef<HTMLDivElement, FloatingTableProps>(\n function FloatingTable(\n { children, className, collapsed, open, ...props },\n forwardedRef,\n ) {\n const { Component: FloatingComponent } = useFloatingComponent();\n return (\n <FloatingComponent\n className={cx(\n `${classBase}-floating-table`,\n {\n [`${classBase}-collapsed`]: collapsed,\n },\n className,\n )}\n role=\"listbox\"\n open={open}\n {...props}\n ref={forwardedRef}\n >\n {children}\n </FloatingComponent>\n );\n },\n);\n\nexport const TablePicker = ({\n TableProps,\n onSelect,\n rowToString,\n schema,\n searchColumns,\n ...htmlAttributes\n}: TablePickerProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table-picker\",\n css: tablePickerCss,\n window: targetWindow,\n });\n\n const tableId = useIdMemo();\n\n const {\n containerRef,\n dataSource,\n highlightedIndex,\n floatingUIProps: { x, y, strategy, floating, reference },\n inputProps,\n interactionPropGetters: { getFloatingProps, getReferenceProps },\n onKeyDown,\n open,\n tableConfig,\n tableHandlers,\n tableRef,\n value,\n width,\n } = useTablePicker({\n TableProps,\n rowToString,\n onSelect,\n schema,\n searchColumns,\n });\n\n const endAdornment = useMemo(\n () => (\n <IconButton\n {...getReferenceProps()}\n data-embedded\n ref={reference}\n icon=\"chevron-down\"\n onKeyDown={onKeyDown}\n variant=\"secondary\"\n />\n ),\n [getReferenceProps, onKeyDown, reference],\n );\n\n return (\n <div {...htmlAttributes} className={classBase} ref={containerRef}>\n <Input {...inputProps} endAdornment={endAdornment} value={value} />\n <FloatingTable\n {...getFloatingProps()}\n collapsed={!open}\n id={tableId}\n open={open}\n left={x + 3}\n position={strategy}\n ref={floating}\n top={y + 3}\n >\n <Table\n {...tableHandlers}\n config={tableConfig}\n dataSource={dataSource}\n highlightedIndex={highlightedIndex}\n maxViewportRowLimit={10}\n navigationStyle=\"row\"\n ref={tableRef}\n selectionModel=\"single\"\n showColumnHeaders={false}\n width={width - 3}\n />\n </FloatingTable>\n </div>\n );\n};\n"],"names":["forwardRef","FloatingTable","useFloatingComponent","jsx","useWindow","useComponentCssInjection","tablePickerCss","useIdMemo","useTablePicker","useMemo","IconButton","Input","Table"],"mappings":"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"}

package/cjs/instrument-picker/useTablePicker.js ADDED Viewed

@@ -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 = (row) => Object.values(row.data).join(" ");
+const useTablePicker = ({
+  TableProps,
+  onSelect,
+  rowToString = defaultRowToString,
+  schema,
+  searchColumns = schema.columns.filter(vuuUtils.isStringColumn).map(vuuUtils.toColumnName)
+}) => {
+  const { VuuDataSource } = vuuUtils.useDataSource();
+  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(
+    (row) => {
+      const value2 = row === null ? "" : rowToString(row);
+      setValue(value2);
+      onSelect?.(row);
+      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 ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useTablePicker.js","sources":["../../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 { DataSourceRowObject } from \"@vuu-ui/vuu-data-types\";\nimport type {\n TableConfig,\n TableRowSelectHandler,\n} from \"@vuu-ui/vuu-table-types\";\nimport { isStringColumn, toColumnName, useDataSource } 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 = (row: DataSourceRowObject) =>\n Object.values(row.data).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 } = useDataSource();\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 (row) => {\n const value = row === null ? \"\" : rowToString(row);\n setValue(value);\n onSelect?.(row);\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","useDataSource","useState","useRef","useCallback","useMemo","useControlledTableNavigation","useFloatingUI","size","elements","flip","useInteractions","useDismiss","useClick","value","isNavigationKey","isRowSelectionKey"],"mappings":";;;;;;;;AAwCA,MAAM,kBAAA,GAAqB,CAAC,GAC1B,KAAA,MAAA,CAAO,OAAO,GAAI,CAAA,IAAI,CAAE,CAAA,IAAA,CAAK,GAAG,CAAA,CAAA;AAE3B,MAAM,iBAAiB,CAAC;AAAA,EAC7B,UAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAc,GAAA,kBAAA;AAAA,EACd,MAAA;AAAA,EACA,gBAAgB,MAAO,CAAA,OAAA,CAAQ,OAAOA,uBAAc,CAAA,CAAE,IAAIC,qBAAY,CAAA;AACxE,CAA4B,KAAA;AAC1B,EAAM,MAAA,EAAE,aAAc,EAAA,GAAIC,sBAAc,EAAA,CAAA;AACxC,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIC,eAAS,EAAE,CAAA,CAAA;AACrC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIA,eAAS,KAAK,CAAA,CAAA;AAEtC,EAAM,MAAA,QAAA,GAAWC,aAAO,CAAE,CAAA,CAAA,CAAA;AAE1B,EAAM,MAAA,YAAA,GAAe,YAAY,MAAO,CAAA,OAAA,CAAA;AAExC,EAAM,MAAA,YAAA,GAAeC,iBAAyC,CAAA,CAAC,EAAO,KAAA;AACpE,IAAS,QAAA,CAAA,OAAA,GAAU,IAAI,WAAe,IAAA,CAAA,CAAA,CAAA;AAAA,GACxC,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,UAAA,GAAaC,cAAQ,MAAM;AAC/B,IAAM,MAAA,OAAA,GAAU,gBAAgB,MAAO,CAAA,OAAA,CAAA;AAEvC,IAAA,OAAO,IAAI,aAAc,CAAA;AAAA,MACvB,SAAS,OAAQ,CAAA,GAAA,CAAI,CAAC,CAAA,KAAM,EAAE,IAAI,CAAA;AAAA,MAClC,OAAO,MAAO,CAAA,KAAA;AAAA,KACf,CAAA,CAAA;AAAA,GACA,EAAA,CAAC,YAAc,EAAA,aAAA,EAAe,MAAM,CAAC,CAAA,CAAA;AAExC,EAAA,MAAM,UAAa,GAAAC,qCAAA,CAA6B,CAAI,CAAA,EAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AAEnE,EAAA,MAAM,iBAAoB,GAAAD,aAAA;AAAA;AAAA,IAExB,MAAM,aAAc,CAAA,GAAA,CAAI,CAAC,GAAA,KAAQ,GAAG,GAAG,CAAA,mBAAA,CAAqB,CAAE,CAAA,IAAA,CAAK,MAAM,CAAA;AAAA,IACzE,CAAC,aAAa,CAAA;AAAA,GAChB,CAAA;AAUA,EAAA,MAAM,EAAE,OAAS,EAAA,QAAA,EAAU,GAAG,eAAA,KAAoBE,kBAAc,CAAA;AAAA,IAC9D,IAAA;AAAA,IACA,YAAc,EAAA,OAAA;AAAA,IACd,SAAW,EAAA,YAAA;AAAA,IACX,QAAU,EAAA,OAAA;AAAA,IACV,UAAY,EAAA;AAAA,MACVC,UAAK,CAAA;AAAA,QACH,MAAM,EAAE,KAAA,EAAO,QAAAC,EAAAA,SAAAA,EAAU,iBAAmB,EAAA;AAC1C,UAAO,MAAA,CAAA,MAAA,CAAOA,SAAS,CAAA,QAAA,CAAS,KAAO,EAAA;AAAA,YACrC,QAAU,EAAA,CAAA,EAAG,KAAM,CAAA,SAAA,CAAU,KAAK,CAAA,EAAA,CAAA;AAAA,YAClC,SAAA,EAAW,YAAY,eAAe,CAAA,2FAAA,CAAA;AAAA,WACvC,CAAA,CAAA;AAAA,SACH;AAAA,OACD,CAAA;AAAA,MACDC,UAAK,CAAA,EAAE,gBAAkB,EAAA,kBAAA,EAAoB,CAAA;AAAA,KAC/C;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,yBAAyBC,qBAAgB,CAAA;AAAA,IAC7CC,iBAAW,OAAO,CAAA;AAAA,IAClBC,eAAS,OAAS,EAAA,EAAE,kBAAkB,KAAO,EAAA,MAAA,EAAQ,OAAO,CAAA;AAAA,GAC7D,CAAA,CAAA;AAED,EAAA,MAAM,iBAAoB,GAAAT,iBAAA;AAAA,IACxB,CAAC,GAAuC,KAAA;AACtC,MAAA,MAAM,EAAE,KAAA,EAAAU,MAAM,EAAA,GAAI,GAAI,CAAA,MAAA,CAAA;AACtB,MAAA,QAAA,CAASA,MAAK,CAAA,CAAA;AAEd,MAAQ,OAAA,CAAA,GAAA,CAAI,CAAiBA,cAAAA,EAAAA,MAAK,CAAE,CAAA,CAAA,CAAA;AAEpC,MAAA,IAAIA,MAASA,IAAAA,MAAAA,CAAM,IAAK,EAAA,CAAE,MAAQ,EAAA;AAChC,QAAA,MAAM,MAAS,GAAA,iBAAA,CAAkB,UAAW,CAAA,WAAA,EAAaA,MAAK,CAAA,CAAA;AAC9D,QAAA,UAAA,CAAW,MAAS,GAAA;AAAA,UAClB,MAAA;AAAA,SACF,CAAA;AAAA,OACK,MAAA;AACL,QAAA,UAAA,CAAW,MAAS,GAAA;AAAA,UAClB,MAAQ,EAAA,EAAA;AAAA,SACV,CAAA;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,mBAAmB,UAAU,CAAA;AAAA,GAChC,CAAA;AAEA,EAAA,MAAM,eAAkB,GAAAV,iBAAA;AAAA,IACtB,CAAC,GAAQ,KAAA;AACP,MAAA,MAAMU,MAAQ,GAAA,GAAA,KAAQ,IAAO,GAAA,EAAA,GAAK,YAAY,GAAG,CAAA,CAAA;AACjD,MAAA,QAAA,CAASA,MAAK,CAAA,CAAA;AACd,MAAA,QAAA,GAAW,GAAG,CAAA,CAAA;AAEd,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,OACd,CAAA,CAAA;AAAA,KACH;AAAA,IACA,CAAC,UAAU,WAAW,CAAA;AAAA,GACxB,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAAV,iBAAA;AAAA,IACpB,CAAC,GAAQ,KAAA;AACP,MAAA,IAAI,IAAM,EAAA;AACR,QAAI,IAAAW,wBAAA,CAAgB,IAAI,GAAK,EAAA,KAAK,KAAKC,0BAAkB,CAAA,GAAA,CAAI,GAAG,CAAG,EAAA;AACjE,UAAA,UAAA,CAAW,UAAU,GAAG,CAAA,CAAA;AAAA,SAC1B;AAAA,OACK,MAAA;AACL,QAAA,IAAI,GAAI,CAAA,GAAA,KAAQ,WAAe,IAAA,GAAA,CAAI,QAAQ,OAAS,EAAA;AAClD,UAAA,OAAA,CAAQ,IAAI,CAAA,CAAA;AAAA,SACd;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,YAAY,IAAI,CAAA;AAAA,GACnB,CAAA;AAEA,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,UAAY,EAAA;AAAA,MACV,YAAc,EAAA,KAAA;AAAA,MACd,SAAW,EAAA,aAAA;AAAA,KACb;AAAA,IACA,QAAU,EAAA,iBAAA;AAAA,GACZ,CAAA;AACA,EAAA,MAAM,aAAgB,GAAA;AAAA,IACpB,QAAU,EAAA,eAAA;AAAA,GACZ,CAAA;AAEA,EAAM,MAAA,WAAA,GAAcX,cAAqB,MAAM;AAC7C,IAAA,MAAM,SAAS,UAAY,EAAA,MAAA,CAAA;AAC3B,IAAA,IAAI,MAAQ,EAAA;AACV,MAAM,MAAA;AAAA,QACJ,UAAU,MAAO,CAAA,OAAA;AAAA,QACjB,YAAe,GAAA,KAAA;AAAA,QACf,GAAG,IAAA;AAAA,OACD,GAAA,MAAA,CAAA;AACJ,MAAO,OAAA;AAAA,QACL,OAAA;AAAA,QACA,YAAA;AAAA,QACA,GAAG,IAAA;AAAA,OACL,CAAA;AAAA,KACK,MAAA;AACL,MAAO,OAAA;AAAA,QACL,YAAc,EAAA,KAAA;AAAA,QACd,SAAS,MAAO,CAAA,OAAA;AAAA,OAClB,CAAA;AAAA,KACF;AAAA,GACC,EAAA,CAAC,UAAY,EAAA,MAAM,CAAC,CAAA,CAAA;AAEvB,EAAO,OAAA;AAAA,IACL,YAAA;AAAA,IACA,UAAA;AAAA,IACA,gBAAA,EAAkB,WAAW,mBAAoB,CAAA,OAAA;AAAA,IACjD,eAAA;AAAA,IACA,UAAA;AAAA,IACA,sBAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,IAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,UAAU,UAAW,CAAA,QAAA;AAAA,IACrB,KAAA;AAAA,IACA,OAAO,QAAS,CAAA,OAAA;AAAA,GAClB,CAAA;AACF;;;;"}

package/cjs/measured-container/useMeasuredContainer.js CHANGED Viewed

@@ -9,22 +9,31 @@ const WidthOnly = ["clientWidth"];
 const HeightOnly = ["clientHeight"];
 const NO_MEASUREMENT = [];
 const isNumber = (val) => Number.isFinite(val);
-const FULL_SIZE = { height: "100%", width: "auto" };
-const getInitialCssSize = (height, width) => {
-  if (vuuUtils.isValidNumber(height) && vuuUtils.isValidNumber(width)) {
-    return {
-      height: `${height}px`,
-      width: `${width}px`
-    };
-  } else if (typeof height === "string" || typeof width === "string") {
+const reduceSizeHeight = (size, value) => {
+  if (value === 0) {
+    return size;
+  } else {
     return {
-      height: height ?? "100%",
-      width: width ?? "auto"
+      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 FULL_SIZE;
+    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 {
@@ -123,5 +132,6 @@ const useMeasuredContainer = ({
   };
 };
+exports.reduceSizeHeight = reduceSizeHeight;
 exports.useMeasuredContainer = useMeasuredContainer;
 //# sourceMappingURL=useMeasuredContainer.js.map

package/cjs/measured-container/useMeasuredContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useMeasuredContainer.js","sources":["../../src/measured-container/useMeasuredContainer.ts"],"sourcesContent":["import { isValidNumber } 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\";\nimport { useResizeObserver, ResizeHandler } from \"./useResizeObserver\";\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\nexport interface MeasuredProps\n extends Pick<MeasuredContainerProps, \"height\" \| \"onResize\" \| \"width\"> {\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\nconst FULL_SIZE: CssSize = { height: \"100%\", width: \"auto\" };\n\nexport interface MeasuredContainerHookResult {\n containerRef: RefObject<HTMLDivElement>;\n cssSize: CssSize;\n outerSize: CssSize;\n innerSize?: MeasuredSize;\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 if (isValidNumber(height) && isValidNumber(width)) {\n return {\n height: `${height}px`,\n width: `${width}px`,\n };\n } else if (typeof height === \"string\" \|\| typeof width === \"string\") {\n return {\n height: height ?? \"100%\",\n width: width ?? \"auto\",\n };\n } else {\n return FULL_SIZE;\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 width,\n}: MeasuredProps): MeasuredContainerHookResult => {\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 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 onResize: ResizeHandler = useCallback(\n ({ clientWidth, clientHeight }: Partial<ClientSize>) => {\n const { css, inner, outer } = size;\n let newState: MeasuredState = size;\n\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 useEffect(() => {\n if (size.inner) {\n onResizeProp?.(size.inner);\n }\n }, [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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"}
1	+ {"version":3,"file":"useMeasuredContainer.js","sources":["../../src/measured-container/useMeasuredContainer.ts"],"sourcesContent":["import { isValidNumber } 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\";\nimport { useResizeObserver, ResizeHandler } from \"./useResizeObserver\";\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\nexport interface MeasuredProps\n extends Pick<MeasuredContainerProps, \"height\" \| \"onResize\" \| \"width\"> {\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>;\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 width,\n}: MeasuredProps): MeasuredContainerHookResult => {\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 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 onResize: ResizeHandler = useCallback(\n ({ clientWidth, clientHeight }: Partial<ClientSize>) => {\n const { css, inner, outer } = size;\n let newState: MeasuredState = size;\n\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 useEffect(() => {\n if (size.inner) {\n onResizeProp?.(size.inner);\n }\n }, [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":";;;;;;AAaA,MAAM,iBAAA,GAAoB,CAAC,cAAA,EAAgB,aAAa,CAAA,CAAA;AACxD,MAAM,SAAA,GAAY,CAAC,aAAa,CAAA,CAAA;AAChC,MAAM,UAAA,GAAa,CAAC,cAAc,CAAA,CAAA;AAClC,MAAM,iBAAiB,EAAC,CAAA;AA0BxB,MAAM,QAAW,GAAA,CAAC,GAAgC,KAAA,MAAA,CAAO,SAAS,GAAG,CAAA,CAAA;AASxD,MAAA,gBAAA,GAAmB,CAC9B,IAAA,EACA,KACiB,KAAA;AACjB,EAAA,IAAI,UAAU,CAAG,EAAA;AACf,IAAO,OAAA,IAAA,CAAA;AAAA,GACF,MAAA;AACL,IAAO,OAAA;AAAA,MACL,MAAA,EAAQ,KAAK,MAAS,GAAA,KAAA;AAAA,MACtB,OAAO,IAAK,CAAA,KAAA;AAAA,KACd,CAAA;AAAA,GACF;AACF,EAAA;AAEA,MAAM,eAAA,GAAkB,CACtB,KAAA,EACA,YACG,KAAA;AACH,EAAI,IAAAA,sBAAA,CAAc,KAAK,CAAG,EAAA;AACxB,IAAA,OAAO,GAAG,KAAK,CAAA,EAAA,CAAA,CAAA;AAAA,GACjB,MAAA,IAAW,OAAO,KAAA,KAAU,QAAU,EAAA;AACpC,IAAO,OAAA,KAAA,CAAA;AAAA,GACF,MAAA;AACL,IAAO,OAAA,YAAA,CAAA;AAAA,GACT;AACF,CAAA,CAAA;AAMA,MAAM,iBAAA,GAAoB,CACxB,MAAA,EACA,KACY,KAAA;AACZ,EAAO,OAAA;AAAA,IACL,MAAA,EAAQ,eAAgB,CAAA,MAAA,EAAQ,MAAM,CAAA;AAAA,IACtC,KAAA,EAAO,eAAgB,CAAA,KAAA,EAAO,MAAM,CAAA;AAAA,GACtC,CAAA;AACF,CAAA,CAAA;AAEA,MAAM,mBAAA,GAAsB,CAC1B,MAAA,EACA,KAC6B,KAAA;AAC7B,EAAA,IAAIA,sBAAc,CAAA,MAAM,CAAK,IAAAA,sBAAA,CAAc,KAAK,CAAG,EAAA;AACjD,IAAO,OAAA;AAAA,MACL,MAAA;AAAA,MACA,KAAA;AAAA,KACF,CAAA;AAAA,GACF;AACF,CAAA,CAAA;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC,aAAgB,GAAA,CAAA;AAAA,EAChB,YAAe,GAAA,CAAA;AAAA,EACf,MAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,KAAA;AACF,CAAkD,KAAA;AAChD,EAAM,MAAA,YAAA,GAAeC,aAAuB,IAAI,CAAA,CAAA;AAChD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,cAAwB,CAAA;AAAA,IAC9C,GAAA,EAAK,iBAAkB,CAAA,MAAA,EAAQ,KAAK,CAAA;AAAA,IACpC,KAAA,EAAO,mBAAoB,CAAA,MAAA,EAAQ,KAAK,CAAA;AAAA,IACxC,KAAO,EAAA;AAAA,MACL,QAAQ,MAAU,IAAA,MAAA;AAAA,MAClB,OAAO,KAAS,IAAA,MAAA;AAAA,KAClB;AAAA,GACD,CAAA,CAAA;AACD,EAAM,MAAA,WAAA,GAAc,OAAO,MAAW,KAAA,QAAA,CAAA;AACtC,EAAM,MAAA,UAAA,GAAa,OAAO,KAAU,KAAA,QAAA,CAAA;AAEpC,EAAA,MAAM,aACJ,WAAe,IAAA,UAAA,GACX,iBACA,WACE,GAAA,SAAA,GACA,aACE,UACA,GAAA,iBAAA,CAAA;AAEV,EAAAC,aAAA,CAAQ,MAAM;AAIZ,IAAA,OAAA,CAAQ,CAAC,WAAgB,KAAA;AACvB,MAAM,MAAA,EAAE,KAAO,EAAA,KAAA,EAAU,GAAA,WAAA,CAAA;AACzB,MAAA,IAAIH,uBAAc,MAAM,CAAA,IAAKA,uBAAc,KAAK,CAAA,IAAK,SAAS,KAAO,EAAA;AACnE,QAAA,MAAM,EAAE,MAAA,EAAQ,WAAa,EAAA,KAAA,EAAO,YAAe,GAAA,KAAA,CAAA;AACnD,QAAA,MAAM,EAAE,MAAA,EAAQ,WAAa,EAAA,KAAA,EAAO,YAAe,GAAA,KAAA,CAAA;AAEnD,QAAI,IAAA,WAAA,KAAgB,MAAU,IAAA,UAAA,KAAe,KAAO,EAAA;AAClD,UAAA,MAAM,UAAa,GAAAA,sBAAA,CAAc,WAAW,CAAA,GACxC,cAAc,WACd,GAAA,CAAA,CAAA;AACJ,UAAA,MAAM,SAAY,GAAAA,sBAAA,CAAc,UAAU,CAAA,GACtC,aAAa,UACb,GAAA,CAAA,CAAA;AACJ,UAAO,OAAA;AAAA,YACL,GAAG,WAAA;AAAA,YACH,KAAA,EAAO,EAAE,MAAA,EAAQ,KAAM,EAAA;AAAA,YACvB,OAAO,EAAE,MAAA,EAAQ,SAAS,UAAY,EAAA,KAAA,EAAO,QAAQ,SAAU,EAAA;AAAA,WACjE,CAAA;AAAA,SACF;AAAA,OACF;AACA,MAAO,OAAA,WAAA,CAAA;AAAA,KACR,CAAA,CAAA;AAAA,GACA,EAAA,CAAC,MAAQ,EAAA,KAAK,CAAC,CAAA,CAAA;AAElB,EAAA,MAAM,QAA0B,GAAAI,iBAAA;AAAA,IAC9B,CAAC,EAAE,WAAa,EAAA,YAAA,EAAwC,KAAA;AACtD,MAAA,MAAM,EAAE,GAAA,EAAK,KAAO,EAAA,KAAA,EAAU,GAAA,IAAA,CAAA;AAC9B,MAAA,IAAI,QAA0B,GAAA,IAAA,CAAA;AAE9B,MACE,IAAA,WAAA,IACA,SAAS,WAAW,CAAA,IACpB,KAAK,KAAM,CAAA,WAAW,CAAM,KAAA,KAAA,EAAO,KACnC,EAAA;AACA,QAAW,QAAA,GAAA;AAAA,UACT,GAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAO,EAAA;AAAA,YACL,KAAO,EAAA,IAAA,CAAK,KAAM,CAAA,WAAW,CAAK,IAAA,YAAA;AAAA,YAClC,MAAA;AAAA,WACF;AAAA,SACF,CAAA;AAAA,OACF,MAAA,IACE,UACA,IAAA,QAAA,CAAS,YAAY,CAAA,IACrB,KAAK,KAAM,CAAA,YAAY,CAAM,KAAA,KAAA,EAAO,MACpC,EAAA;AACA,QAAW,QAAA,GAAA;AAAA,UACT,GAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAO,EAAA;AAAA,YACL,MAAQ,EAAA,IAAA,CAAK,KAAM,CAAA,YAAY,CAAK,IAAA,aAAA;AAAA,YACpC,KAAA;AAAA,WACF;AAAA,SACF,CAAA;AAAA,OAEA,MAAA,IAAA,QAAA,CAAS,YAAY,CAAA,IACrB,QAAS,CAAA,WAAW,CACnB,KAAA,WAAA,KAAgB,KAAO,EAAA,KAAA,IAAS,YAAiB,KAAA,KAAA,EAAO,MACzD,CAAA,EAAA;AACA,QAAW,QAAA,GAAA;AAAA,UACT,GAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAO,EAAA;AAAA,YACL,KAAO,EAAA,IAAA,CAAK,KAAM,CAAA,WAAW,CAAK,IAAA,YAAA;AAAA,YAClC,MAAQ,EAAA,IAAA,CAAK,KAAM,CAAA,YAAY,CAAK,IAAA,aAAA;AAAA,WACtC;AAAA,SACF,CAAA;AAAA,OACF;AAEA,MAAA,IAAI,aAAa,IAAM,EAAA;AACrB,QAAA,OAAA,CAAQ,QAAQ,CAAA,CAAA;AAAA,OAClB;AAAA,KACF;AAAA,IACA,CAAC,aAAe,EAAA,YAAA,EAAc,aAAa,UAAY,EAAA,MAAA,EAAQ,MAAM,KAAK,CAAA;AAAA,GAC5E,CAAA;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,KAAK,KAAO,EAAA;AACd,MAAA,YAAA,GAAe,KAAK,KAAK,CAAA,CAAA;AAAA,KAC3B;AAAA,GACC,EAAA,CAAC,YAAc,EAAA,IAAA,CAAK,KAAK,CAAC,CAAA,CAAA;AAE7B,EAAkBC,mCAAA,CAAA,YAAA,EAAc,UAAY,EAAA,QAAA,EAAU,IAAI,CAAA,CAAA;AAE1D,EAAO,OAAA;AAAA,IACL,YAAA;AAAA,IACA,SAAS,IAAK,CAAA,GAAA;AAAA,IACd,WAAW,IAAK,CAAA,KAAA;AAAA,IAChB,WAAW,IAAK,CAAA,KAAA;AAAA,GAClB,CAAA;AACF;;;;;"}

package/cjs/vuu-typeahead-input/useVuuTypeahead.js CHANGED Viewed

@@ -24,7 +24,9 @@ const useVuuTypeaheadInput = ({
       if (value) {
         const params = value ? [vuuTable, column, value] : [vuuTable, column];
         getSuggestions(params).then((suggestions) => {
-          if (suggestions.length === 0 && value) {
+          if (suggestions === false) {
+            setTypeaheadValues([]);
+          } else if (suggestions.length === 0 && value) {
             setTypeaheadValues(NO_DATA_MATCH);
           } else {
             setTypeaheadValues(suggestions);

package/cjs/vuu-typeahead-input/useVuuTypeahead.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useVuuTypeahead.js","sources":["../../src/vuu-typeahead-input/useVuuTypeahead.ts"],"sourcesContent":["import { TypeaheadParams } from \"@vuu-ui/vuu-protocol-types\";\nimport { dispatchKeyboardEvent, getVuuTable } from \"@vuu-ui/vuu-utils\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n RefCallback,\n SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { VuuTypeaheadInputProps } from \"./VuuTypeaheadInput\";\n\nconst NO_DATA_MATCH = [\"No matching data\"];\n\nexport type VuuTypeaheadInputHookProps = Pick<\n VuuTypeaheadInputProps,\n \"column\" \| \"onCommit\" \| \"suggestionProvider\" \| \"table\"\n>;\n\nexport const useVuuTypeaheadInput = ({\n column,\n onCommit,\n suggestionProvider,\n table,\n}: VuuTypeaheadInputHookProps) => {\n const [value, setValue] = useState(\"\");\n const [open, setOpen] = useState(false);\n const rootRef = useRef<HTMLDivElement \| null>(null);\n const [typeaheadValues, setTypeaheadValues] = useState<string[]>([]);\n const getSuggestions = suggestionProvider();\n\n const callbackRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n rootRef.current = el;\n }, []);\n\n useEffect(() => {\n if (table) {\n const vuuTable = getVuuTable(table);\n if (value) {\n const params: TypeaheadParams = value\n ? [vuuTable, column, value]\n : [vuuTable, column];\n getSuggestions(params)\n .then((suggestions) => {\n if (suggestions.length === 0 && value) {\n setTypeaheadValues(NO_DATA_MATCH);\n } else {\n setTypeaheadValues(suggestions);\n }\n })\n .catch((err) => {\n console.error(\"Error getting suggestions\", err);\n });\n } else {\n setTypeaheadValues([]);\n }\n }\n }, [table, column, getSuggestions, value]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (evt) => {\n const { value: newValue } = evt.target;\n\n if (value === \"\" && newValue) {\n setOpen(true);\n const input = rootRef.current?.querySelector(\"input\");\n if (input) {\n // This is a workaround for the fact that ComboBox does not automatically\n // highlight first list itemn when items have been populated dynamically.\n // This has been raised as a bug.\n setTimeout(() => {\n dispatchKeyboardEvent(input, \"keydown\", \"ArrowUp\");\n }, 150);\n }\n } else if (newValue === \"\" && value) {\n // treat clear value as a commit event\n onCommit(evt, \"\");\n }\n\n setValue(newValue);\n };\n\n const handleSelectionChange = (\n evt: SyntheticEvent,\n [newSelected]: string[],\n ) => {\n console.log(`useVuuTypeahead handleSelectionChange ${newSelected}`);\n setValue(newSelected);\n onCommit(evt as SyntheticEvent<HTMLInputElement>, newSelected);\n };\n\n const handleOpenChange = (newOpen: boolean) => {\n if (newOpen && value === \"\") {\n // ignore this, don't open dropdown unless user has typed at least one character\n } else {\n setOpen(newOpen);\n }\n };\n\n const inputProps: ComponentPropsWithoutRef<\"input\"> = {\n autoComplete: \"off\",\n };\n\n return {\n inputProps,\n onChange: handleChange,\n onOpenChange: handleOpenChange,\n onSelectionChange: handleSelectionChange,\n open,\n ref: callbackRef,\n typeaheadValues,\n value,\n };\n};\n"],"names":["useState","useRef","useCallback","useEffect","getVuuTable","dispatchKeyboardEvent"],"mappings":";;;;;AAcA,MAAM,aAAA,GAAgB,CAAC,kBAAkB,CAAA,CAAA;AAOlC,MAAM,uBAAuB,CAAC;AAAA,EACnC,MAAA;AAAA,EACA,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,KAAA;AACF,CAAkC,KAAA;AAChC,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAAS,EAAE,CAAA,CAAA;AACrC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIA,eAAS,KAAK,CAAA,CAAA;AACtC,EAAM,MAAA,OAAA,GAAUC,aAA8B,IAAI,CAAA,CAAA;AAClD,EAAA,MAAM,CAAC,eAAiB,EAAA,kBAAkB,CAAI,GAAAD,cAAA,CAAmB,EAAE,CAAA,CAAA;AACnE,EAAA,MAAM,iBAAiB,kBAAmB,EAAA,CAAA;AAE1C,EAAM,MAAA,WAAA,GAAcE,iBAAyC,CAAA,CAAC,EAAO,KAAA;AACnE,IAAA,OAAA,CAAQ,OAAU,GAAA,EAAA,CAAA;AAAA,GACpB,EAAG,EAAE,CAAA,CAAA;AAEL,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,KAAO,EAAA;AACT,MAAM,MAAA,QAAA,GAAWC,qBAAY,KAAK,CAAA,CAAA;AAClC,MAAA,IAAI,KAAO,EAAA;AACT,QAAM,MAAA,MAAA,GAA0B,QAC5B,CAAC,QAAA,EAAU,QAAQ,KAAK,CAAA,GACxB,CAAC,QAAA,EAAU,MAAM,CAAA,CAAA;AACrB,QAAA,cAAA,CAAe,MAAM,CAAA,CAClB,IAAK,CAAA,CAAC,WAAgB,KAAA;AACrB,~~UAAI~~,IAAA,WAAA,CAAY,MAAW,KAAA,CAAA,IAAK,KAAO,EAAA;~~AACrC~~,YAAA,kBAAA,CAAmB,aAAa,CAAA,CAAA;AAAA,WAC3B,MAAA;AACL,YAAA,kBAAA,CAAmB,WAAW,CAAA,CAAA;AAAA,WAChC;AAAA,SACD,CAAA,CACA,KAAM,CAAA,CAAC,GAAQ,KAAA;AACd,UAAQ,OAAA,CAAA,KAAA,CAAM,6BAA6B,GAAG,CAAA,CAAA;AAAA,SAC/C,CAAA,CAAA;AAAA,OACE,MAAA;AACL,QAAA,kBAAA,CAAmB,EAAE,CAAA,CAAA;AAAA,OACvB;AAAA,KACF;AAAA,KACC,CAAC,KAAA,EAAO,MAAQ,EAAA,cAAA,EAAgB,KAAK,CAAC,CAAA,CAAA;AAEzC,EAAM,MAAA,YAAA,GAAqD,CAAC,GAAQ,KAAA;AAClE,IAAA,MAAM,EAAE,KAAA,EAAO,QAAS,EAAA,GAAI,GAAI,CAAA,MAAA,CAAA;AAEhC,IAAI,IAAA,KAAA,KAAU,MAAM,QAAU,EAAA;AAC5B,MAAA,OAAA,CAAQ,IAAI,CAAA,CAAA;AACZ,MAAA,MAAM,KAAQ,GAAA,OAAA,CAAQ,OAAS,EAAA,aAAA,CAAc,OAAO,CAAA,CAAA;AACpD,MAAA,IAAI,KAAO,EAAA;AAIT,QAAA,UAAA,CAAW,MAAM;AACf,UAAsBC,8BAAA,CAAA,KAAA,EAAO,WAAW,SAAS,CAAA,CAAA;AAAA,WAChD,GAAG,CAAA,CAAA;AAAA,OACR;AAAA,KACF,MAAA,IAAW,QAAa,KAAA,EAAA,IAAM,KAAO,EAAA;AAEnC,MAAA,QAAA,CAAS,KAAK,EAAE,CAAA,CAAA;AAAA,KAClB;AAEA,IAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AAAA,GACnB,CAAA;AAEA,EAAA,MAAM,qBAAwB,GAAA,CAC5B,GACA,EAAA,CAAC,WAAW,CACT,KAAA;AACH,IAAQ,OAAA,CAAA,GAAA,CAAI,CAAyC,sCAAA,EAAA,WAAW,CAAE,CAAA,CAAA,CAAA;AAClE,IAAA,QAAA,CAAS,WAAW,CAAA,CAAA;AACpB,IAAA,QAAA,CAAS,KAAyC,WAAW,CAAA,CAAA;AAAA,GAC/D,CAAA;AAEA,EAAM,MAAA,gBAAA,GAAmB,CAAC,OAAqB,KAAA;AAC7C,IAAI,IAAA,OAAA,IAAW,UAAU,EAAI,EAAA,CAEtB,MAAA;AACL,MAAA,OAAA,CAAQ,OAAO,CAAA,CAAA;AAAA,KACjB;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,UAAgD,GAAA;AAAA,IACpD,YAAc,EAAA,KAAA;AAAA,GAChB,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,YAAc,EAAA,gBAAA;AAAA,IACd,iBAAmB,EAAA,qBAAA;AAAA,IACnB,IAAA;AAAA,IACA,GAAK,EAAA,WAAA;AAAA,IACL,eAAA;AAAA,IACA,KAAA;AAAA,GACF,CAAA;AACF;;;;"}
1	+ {"version":3,"file":"useVuuTypeahead.js","sources":["../../src/vuu-typeahead-input/useVuuTypeahead.ts"],"sourcesContent":["import { TypeaheadParams } from \"@vuu-ui/vuu-protocol-types\";\nimport { dispatchKeyboardEvent, getVuuTable } from \"@vuu-ui/vuu-utils\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n RefCallback,\n SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { VuuTypeaheadInputProps } from \"./VuuTypeaheadInput\";\n\nconst NO_DATA_MATCH = [\"No matching data\"];\n\nexport type VuuTypeaheadInputHookProps = Pick<\n VuuTypeaheadInputProps,\n \"column\" \| \"onCommit\" \| \"suggestionProvider\" \| \"table\"\n>;\n\nexport const useVuuTypeaheadInput = ({\n column,\n onCommit,\n suggestionProvider,\n table,\n}: VuuTypeaheadInputHookProps) => {\n const [value, setValue] = useState(\"\");\n const [open, setOpen] = useState(false);\n const rootRef = useRef<HTMLDivElement \| null>(null);\n const [typeaheadValues, setTypeaheadValues] = useState<string[]>([]);\n const getSuggestions = suggestionProvider();\n\n const callbackRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n rootRef.current = el;\n }, []);\n\n useEffect(() => {\n if (table) {\n const vuuTable = getVuuTable(table);\n if (value) {\n const params: TypeaheadParams = value\n ? [vuuTable, column, value]\n : [vuuTable, column];\n getSuggestions(params)\n .then((suggestions) => {\n if (suggestions === false) {\n // TODO is this right\n setTypeaheadValues([]);\n } else if (suggestions.length === 0 && value) {\n setTypeaheadValues(NO_DATA_MATCH);\n } else {\n setTypeaheadValues(suggestions);\n }\n })\n .catch((err) => {\n console.error(\"Error getting suggestions\", err);\n });\n } else {\n setTypeaheadValues([]);\n }\n }\n }, [table, column, getSuggestions, value]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (evt) => {\n const { value: newValue } = evt.target;\n\n if (value === \"\" && newValue) {\n setOpen(true);\n const input = rootRef.current?.querySelector(\"input\");\n if (input) {\n // This is a workaround for the fact that ComboBox does not automatically\n // highlight first list itemn when items have been populated dynamically.\n // This has been raised as a bug.\n setTimeout(() => {\n dispatchKeyboardEvent(input, \"keydown\", \"ArrowUp\");\n }, 150);\n }\n } else if (newValue === \"\" && value) {\n // treat clear value as a commit event\n onCommit(evt, \"\");\n }\n\n setValue(newValue);\n };\n\n const handleSelectionChange = (\n evt: SyntheticEvent,\n [newSelected]: string[],\n ) => {\n console.log(`useVuuTypeahead handleSelectionChange ${newSelected}`);\n setValue(newSelected);\n onCommit(evt as SyntheticEvent<HTMLInputElement>, newSelected);\n };\n\n const handleOpenChange = (newOpen: boolean) => {\n if (newOpen && value === \"\") {\n // ignore this, don't open dropdown unless user has typed at least one character\n } else {\n setOpen(newOpen);\n }\n };\n\n const inputProps: ComponentPropsWithoutRef<\"input\"> = {\n autoComplete: \"off\",\n };\n\n return {\n inputProps,\n onChange: handleChange,\n onOpenChange: handleOpenChange,\n onSelectionChange: handleSelectionChange,\n open,\n ref: callbackRef,\n typeaheadValues,\n value,\n };\n};\n"],"names":["useState","useRef","useCallback","useEffect","getVuuTable","dispatchKeyboardEvent"],"mappings":"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"}

package/esm/index.js CHANGED Viewed

@@ -28,7 +28,7 @@ export { EditableLabel, NullEditAPI } from './editable-label/EditableLabel.js';
 export { ExpandoInput } from './expando-input/ExpandoInput.js';
 export { Icon } from './icon-button/Icon.js';
 export { IconButton } from './icon-button/IconButton.js';
-export { InstrumentPicker } from './instrument-picker/InstrumentPicker.js';
+export { TablePicker } from './instrument-picker/TablePicker.js';
 export { InstrumentSearch } from './instrument-search/InstrumentSearch.js';
 export { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Escape, Home, PageDown, PageUp, Space, isCharacterKey, isNavigationKey } from './list/common-hooks/keyUtils.js';
 export { useCollapsibleGroups } from './list/common-hooks/useCollapsibleGroups.js';
@@ -49,7 +49,7 @@ export { ListItemGroup } from './list/ListItemGroup.js';
 export { useList } from './list/useList.js';
 export { RadioIcon } from './list/RadioIcon.js';
 export { MeasuredContainer } from './measured-container/MeasuredContainer.js';
-export { useMeasuredContainer } from './measured-container/useMeasuredContainer.js';
+export { reduceSizeHeight, useMeasuredContainer } from './measured-container/useMeasuredContainer.js';
 export { OverflowContainer } from './overflow-container/OverflowContainer.js';
 export { NO_WRAPPED_ITEMS, applyOverflowClassToWrappedItems, correctForWrappedHighPriorityItems, correctForWrappedOverflowIndicator, getElementsMarkedAsWrapped, getNonWrappedAndWrappedItems, highPriorityItemsHaveWrappedButShouldNotHave, markElementAsWrapped, overflowIndicatorHasWrappedButShouldNotHave, removeOverflowIndicatorIfNoLongerNeeded, sortByScreenOrder, switchWrappedItemIntoView, unmarkItemsWhichAreNoLongerWrapped } from './overflow-container/overflow-utils.js';
 export { PriceTicker } from './price-ticker/PriceTicker.js';

package/esm/instrument-picker/TablePicker.css.js ADDED Viewed

@@ -0,0 +1,4 @@
+var tablePickerCss = ".vuuTablePicker {\n  border-radius: 6px;\n  height: var(--salt-size-base);\n  padding: 1px;\n  box-sizing: content-box;\n}\n\n.vuuTablePicker-floating-table {\n  border: solid 1px var(--salt-container-secondary-borderColor);\n  border-radius: 4px;\n  overflow: auto;\n  padding: var(--salt-spacing-100) 0;\n  z-index: var(--salt-zIndex-popout);\n}\n";
+export { tablePickerCss as default };
+//# sourceMappingURL=TablePicker.css.js.map

package/esm/instrument-picker/TablePicker.css.js.map ADDED Viewed

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

package/esm/instrument-picker/TablePicker.js ADDED Viewed

@@ -0,0 +1,119 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Table } from '@vuu-ui/vuu-table';
+import { useFloatingComponent, useIdMemo, Input } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import { forwardRef, useMemo } from 'react';
+import { IconButton } from '../icon-button/IconButton.js';
+import tablePickerCss from './TablePicker.css.js';
+import { useTablePicker } from './useTablePicker.js';
+const classBase = "vuuTablePicker";
+const FloatingTable = forwardRef(
+  function FloatingTable2({ children, className, collapsed, open, ...props }, forwardedRef) {
+    const { Component: FloatingComponent } = useFloatingComponent();
+    return /* @__PURE__ */ jsx(
+      FloatingComponent,
+      {
+        className: cx(
+          `${classBase}-floating-table`,
+          {
+            [`${classBase}-collapsed`]: collapsed
+          },
+          className
+        ),
+        role: "listbox",
+        open,
+        ...props,
+        ref: forwardedRef,
+        children
+      }
+    );
+  }
+);
+const TablePicker = ({
+  TableProps,
+  onSelect,
+  rowToString,
+  schema,
+  searchColumns,
+  ...htmlAttributes
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-table-picker",
+    css: tablePickerCss,
+    window: targetWindow
+  });
+  const tableId = useIdMemo();
+  const {
+    containerRef,
+    dataSource,
+    highlightedIndex,
+    floatingUIProps: { x, y, strategy, floating, reference },
+    inputProps,
+    interactionPropGetters: { getFloatingProps, getReferenceProps },
+    onKeyDown,
+    open,
+    tableConfig,
+    tableHandlers,
+    tableRef,
+    value,
+    width
+  } = useTablePicker({
+    TableProps,
+    rowToString,
+    onSelect,
+    schema,
+    searchColumns
+  });
+  const endAdornment = useMemo(
+    () => /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        ...getReferenceProps(),
+        "data-embedded": true,
+        ref: reference,
+        icon: "chevron-down",
+        onKeyDown,
+        variant: "secondary"
+      }
+    ),
+    [getReferenceProps, onKeyDown, reference]
+  );
+  return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: classBase, ref: containerRef, children: [
+    /* @__PURE__ */ jsx(Input, { ...inputProps, endAdornment, value }),
+    /* @__PURE__ */ jsx(
+      FloatingTable,
+      {
+        ...getFloatingProps(),
+        collapsed: !open,
+        id: tableId,
+        open,
+        left: x + 3,
+        position: strategy,
+        ref: floating,
+        top: y + 3,
+        children: /* @__PURE__ */ jsx(
+          Table,
+          {
+            ...tableHandlers,
+            config: tableConfig,
+            dataSource,
+            highlightedIndex,
+            maxViewportRowLimit: 10,
+            navigationStyle: "row",
+            ref: tableRef,
+            selectionModel: "single",
+            showColumnHeaders: false,
+            width: width - 3
+          }
+        )
+      }
+    )
+  ] });
+};
+export { TablePicker };
+//# sourceMappingURL=TablePicker.js.map