@vuu-ui/vuu-ui-controls 3.0.0 → 3.1.0-beta.1

package/cjs/instrument-picker/useTablePicker.js

@@ -1,150 +0,0 @@
-'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

@@ -1 +0,0 @@
-{"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/item-picker/ItemPicker.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var itemPickerCss = ".vuuItemPicker {\n  --label-margin-left: 0px;\n\n  --itempicker-background: var(\n    --vuuItemPicker-background,\n    var(--salt-container-primary-background)\n  );\n  background: var(--itempicker-background);\n  container-type: inline-size;\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-300);\n  height: var(--vuuItemPicker-height, 100%);\n  overflow: hidden;\n  padding: var(--salt-spacing-300) 0;\n\n  &.vuuItemPicker-withCalculated {\n    --label-margin-left: 8px;\n  }\n\n  .saltListBox {\n    background-color: inherit;\n  }\n\n  .saltOption {\n    align-items: center;\n    background-color: inherit;\n    border-bottom: var(--vuuItemListItem-border, solid) 1px\n      var(--salt-separable-tertiary-borderColor);\n    gap: var(--salt-spacing-200);\n    height: calc(var(--salt-size-base) + var(--salt-spacing-200));\n    .vuuIcon {\n      --vuu-icon-color: var(--salt-content-secondary-foreground);\n    }\n\n    .vuuCalculatedItemIcon {\n      --vuu-icon-color: var(--salt-content-secondary-foreground);\n      left: 32px;\n      position: absolute;\n      top: 8px;\n    }\n\n    .vuuHighlight {\n      color: var(--vuu-color-blue-40);\n      text-decoration: underline;\n    }\n\n    .vuuItemPicker-text {\n      margin-left: var(--label-margin-left);\n    }\n  }\n\n  .vuuItemPickerListItem-action {\n    margin-left: auto;\n    visibility: hidden;\n  }\n\n  .saltOption:hover {\n    .vuuItemPickerListItem-action {\n      visibility: visible;\n    }\n  }\n\n  .vuuItemPicker-search {\n    --saltInput-paddingLeft: var(--salt-spacing-300);\n    padding: var(--salt-spacing-200) var(--salt-spacing-300) 0\n      var(--salt-spacing-300);\n  }\n\n  .vuuItemPicker-scrollContainer {\n    flex: 1 1 0px;\n    overflow: auto;\n\n    .vuuItemPicker-sectionHeader {\n      align-items: center;\n      background: var(--itempicker-background);\n      display: flex;\n      height: 32px;\n      padding: 0 var(--salt-spacing-300);\n      position: sticky;\n      top: 0;\n      z-index: 1;\n    }\n\n    .vuuItemPicker-availableHeader {\n      top: 32px;\n    }\n\n    .vuuItemPicker-availableList {\n      .saltOption {\n        padding-left: var(--salt-spacing-300);\n      }\n    }\n  }\n}\n";
-
-module.exports = itemPickerCss;
-//# sourceMappingURL=ItemPicker.css.js.map

package/cjs/item-picker/ItemPicker.css.js.map

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

package/cjs/item-picker/ItemPicker.js

@@ -1,261 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var vuuTable = require('@vuu-ui/vuu-table');
-var vuuUtils = require('@vuu-ui/vuu-utils');
-var cx = require('clsx');
-var React = require('react');
-var Icon = require('../icon-button/Icon.js');
-var IconButton = require('../icon-button/IconButton.js');
-var useItemPicker = require('./useItemPicker.js');
-var ItemPicker$1 = require('./ItemPicker.css.js');
-
-const classBase = "vuuItemPicker";
-const classBaseListItem = "vuuItemPickerListItem";
-const searchIcon = /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "search" });
-const NO_SELECTION = [];
-const useSorting = (id, index) => {
-  const { handleRef: sortableHandleRef, ref: sortableRef } = vuuUtils.useSortable({
-    id,
-    index
-  });
-  const [handleRef, ref] = React.useMemo(() => {
-    return [sortableHandleRef, sortableRef];
-  }, [sortableHandleRef, sortableRef]);
-  return {
-    handleRef,
-    ref
-  };
-};
-const SelectedListItem = ({
-  className: classNameProp,
-  index,
-  item,
-  onRemove,
-  searchPattern = "",
-  ...optionProps
-}) => {
-  const { handleRef, ref } = useSorting(item.name, index);
-  const value = useItemPicker.getItemLabel(item);
-  const valueWithHighlighting = vuuTable.applyHighlighting(value, searchPattern);
-  const handleRemoveButtonClick = React.useCallback(
-    (e) => {
-      e.stopPropagation();
-      onRemove?.(e);
-    },
-    [onRemove]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    core.Option,
-    {
-      ...optionProps,
-      className: cx(classNameProp, classBaseListItem),
-      "data-name": item.name,
-      ref,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          IconButton.IconButton,
-          {
-            "data-embedded": true,
-            appearance: "transparent",
-            icon: "draggable",
-            ref: handleRef,
-            size: 16
-          }
-        ),
-        item.icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: item.icon }, "icon") : null,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-text`, children: valueWithHighlighting }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          IconButton.IconButton,
-          {
-            className: `${classBaseListItem}-action`,
-            "data-embedded": true,
-            appearance: "transparent",
-            icon: "cross",
-            onClick: handleRemoveButtonClick,
-            size: 16
-          }
-        )
-      ]
-    }
-  );
-};
-const AvailableListItem = ({
-  className: classNameProp,
-  index,
-  item,
-  onAdd,
-  searchPattern = "",
-  disabled,
-  ...optionProps
-}) => {
-  const value = useItemPicker.getItemLabel(item);
-  const valueWithHighlighting = vuuTable.applyHighlighting(value, searchPattern);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    core.Option,
-    {
-      ...optionProps,
-      className: cx(classNameProp, classBaseListItem),
-      "data-name": item.name,
-      disabled,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-text`, children: valueWithHighlighting }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          IconButton.IconButton,
-          {
-            className: `${classBaseListItem}-action`,
-            "data-embedded": true,
-            appearance: "transparent",
-            icon: "plus",
-            onClick: onAdd,
-            size: 16,
-            disabled
-          }
-        )
-      ]
-    }
-  );
-};
-const ItemPicker = React.forwardRef(function ItemPicker2({
-  className,
-  itemTypeName,
-  allItems,
-  selectedItems,
-  maxSelections,
-  onSelectedItemsChange,
-  onSelectionChange,
-  selected = NO_SELECTION,
-  createCustomItemProps,
-  ...htmlAttributes
-}, forwardedRef) {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "vuu-item-picker",
-    css: ItemPicker$1,
-    window: targetWindow
-  });
-  const searchCallbackRef = React.useCallback((el) => {
-    setTimeout(() => {
-      el?.querySelector("input")?.focus();
-    }, 100);
-  }, []);
-  const {
-    selectedItemsCount,
-    availableItemsCount,
-    selectedItemsFiltered,
-    availableItemsFiltered,
-    searchText,
-    onChangeSearchInput,
-    onAddItemToSelectedList,
-    onRemoveItemFromSelectedList,
-    onReorderSelectedItems
-  } = useItemPicker.useItemPicker({
-    allItems,
-    selectedItems,
-    onSelectedItemsChange,
-    maxSelections
-  });
-  const listRef = React.useRef(null);
-  const getOptionName = (option) => {
-    if (option) {
-      const { name } = option.dataset;
-      if (name) {
-        return name;
-      }
-    }
-    throw Error("[ItemPicker] list option has no data-name");
-  };
-  const handleDragEnd = React.useCallback(() => {
-    setTimeout(() => {
-      const listItems = listRef.current?.querySelectorAll(".saltOption");
-      if (listItems) {
-        const orderedItemNames = Array.from(listItems).map(getOptionName);
-        onReorderSelectedItems(orderedItemNames);
-      }
-    }, 300);
-  }, [availableItemsFiltered, selectedItemsFiltered]);
-  const searchPlaceholderText = `Find ${vuuUtils.singularForm(itemTypeName)}`;
-  const maxSelectionsSubHeading = maxSelections ? `(${maxSelections} max)` : "";
-  const selectedItemsHeading = `${selectedItemsCount} ${selectedItemsCount === 1 ? vuuUtils.singularForm(itemTypeName) : vuuUtils.pluralForm(itemTypeName)} in view ${maxSelectionsSubHeading}`;
-  const availableItemsHeading = `${availableItemsCount} available ${availableItemsCount === 1 ? vuuUtils.singularForm(itemTypeName) : vuuUtils.pluralForm(itemTypeName)}`;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ...htmlAttributes,
-      className: cx(classBase, className),
-      ref: forwardedRef,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("form", { className: `${classBase}-search`, role: "search", children: /* @__PURE__ */ jsxRuntime.jsx(
-          core.Input,
-          {
-            startAdornment: searchIcon,
-            placeholder: searchPlaceholderText,
-            ref: searchCallbackRef,
-            value: searchText,
-            onChange: onChangeSearchInput
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-scrollContainer vuuScrollable`, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-sectionHeader`, children: selectedItemsHeading }),
-          /* @__PURE__ */ jsxRuntime.jsx(vuuUtils.DragDropProvider, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxRuntime.jsx(
-            core.ListBox,
-            {
-              className: `${classBase}-selectedList`,
-              onSelectionChange,
-              ref: listRef,
-              selected,
-              children: selectedItemsFiltered.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                SelectedListItem,
-                {
-                  item,
-                  index,
-                  onRemove: onRemoveItemFromSelectedList,
-                  searchPattern: searchText.toLowerCase(),
-                  value: item
-                },
-                item.name
-              ))
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cx(
-                `${classBase}-sectionHeader`,
-                `${classBase}-availableHeader`
-              ),
-              children: availableItemsHeading
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            core.ListBox,
-            {
-              className: `${classBase}-availableList`,
-              selected: NO_SELECTION,
-              children: availableItemsFiltered.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                AvailableListItem,
-                {
-                  item,
-                  index,
-                  onAdd: onAddItemToSelectedList,
-                  searchPattern: searchText.toLowerCase(),
-                  value: item,
-                  disabled: selectedItemsCount === maxSelections
-                },
-                item.name
-              ))
-            }
-          )
-        ] }),
-        createCustomItemProps ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-item-buttons`, children: /* @__PURE__ */ jsxRuntime.jsx(core.Button, { onClick: createCustomItemProps.onClickCreateCustomItem, children: createCustomItemProps.buttonLabel }) }) : null
-      ]
-    }
-  );
-});
-
-exports.ItemPicker = ItemPicker;
-exports.classBaseListItem = classBaseListItem;
-//# sourceMappingURL=ItemPicker.js.map

package/cjs/item-picker/ItemPicker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemPicker.js","sources":["../../../../packages/vuu-ui-controls/src/item-picker/ItemPicker.tsx"],"sourcesContent":["import {\n  Button,\n  Input,\n  ListBox,\n  ListBoxProps,\n  Option,\n  OptionProps,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { applyHighlighting } from \"@vuu-ui/vuu-table\";\nimport {\n  DragDropProvider,\n  ItemTypeName,\n  pluralForm,\n  singularForm,\n  useSortable,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  MouseEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { Icon, IconButton } from \"../icon-button\";\nimport {\n  CreateCustomItemProps,\n  getItemLabel,\n  ItemDescriptor,\n  ItemPickerHookProps,\n  useItemPicker,\n} from \"./useItemPicker\";\n\nimport itemPickerCss from \"./ItemPicker.css\";\n\nconst classBase = \"vuuItemPicker\";\n\nexport const classBaseListItem = \"vuuItemPickerListItem\";\n\nexport interface ItemPickerProps\n  extends ItemPickerHookProps,\n    HTMLAttributes<HTMLDivElement>,\n    Pick<ListBoxProps<ItemDescriptor>, \"selected\" | \"onSelectionChange\"> {\n  itemTypeName: ItemTypeName;\n  createCustomItemProps?: CreateCustomItemProps;\n}\n\nconst searchIcon = <Icon name=\"search\" />;\nconst NO_SELECTION: ItemDescriptor[] = [] as const;\n\nconst useSorting = (id: string, index: number) => {\n  const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({\n    id,\n    index,\n  });\n\n  const [handleRef, ref] = useMemo(() => {\n    return [sortableHandleRef, sortableRef];\n  }, [sortableHandleRef, sortableRef]);\n\n  return {\n    handleRef,\n    ref,\n  };\n};\n\nconst SelectedListItem = ({\n  className: classNameProp,\n  index,\n  item,\n  onRemove,\n  searchPattern = \"\",\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  item: ItemDescriptor;\n  onRemove: MouseEventHandler<HTMLButtonElement>;\n  searchPattern?: Lowercase<string>;\n}) => {\n  const { handleRef, ref } = useSorting(item.name, index);\n  const value = getItemLabel(item as ItemDescriptor);\n  const valueWithHighlighting = applyHighlighting(value, searchPattern);\n\n  const handleRemoveButtonClick = useCallback<\n    MouseEventHandler<HTMLButtonElement>\n  >(\n    (e) => {\n      e.stopPropagation();\n      onRemove?.(e);\n    },\n    [onRemove],\n  );\n\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item.name}\n      ref={ref}\n    >\n      <IconButton\n        data-embedded\n        appearance=\"transparent\"\n        icon=\"draggable\"\n        ref={handleRef}\n        size={16}\n      />\n      {item.icon ? <Icon name={item.icon} key=\"icon\" /> : null}\n      <span className={`${classBase}-text`}>{valueWithHighlighting}</span>\n      <IconButton\n        className={`${classBaseListItem}-action`}\n        data-embedded\n        appearance=\"transparent\"\n        icon=\"cross\"\n        onClick={handleRemoveButtonClick}\n        size={16}\n      />\n    </Option>\n  );\n};\n\nconst AvailableListItem = ({\n  className: classNameProp,\n  index,\n  item,\n  onAdd,\n  searchPattern = \"\",\n  disabled,\n  ...optionProps\n}: OptionProps & {\n  index: number;\n  item: ItemDescriptor;\n  onAdd: MouseEventHandler<HTMLButtonElement>;\n  searchPattern?: Lowercase<string>;\n}) => {\n  const value = getItemLabel(item as ItemDescriptor);\n  const valueWithHighlighting = applyHighlighting(value, searchPattern);\n\n  return (\n    <Option\n      {...optionProps}\n      className={cx(classNameProp, classBaseListItem)}\n      data-name={item.name}\n      disabled={disabled}\n    >\n      <span className={`${classBase}-text`}>{valueWithHighlighting}</span>\n      <IconButton\n        className={`${classBaseListItem}-action`}\n        data-embedded\n        appearance=\"transparent\"\n        icon=\"plus\"\n        onClick={onAdd}\n        size={16}\n        disabled={disabled}\n      />\n    </Option>\n  );\n};\n\n/** Generic controlled component that displays items in a 'picker' that are available to search, select, reorder or deselect.\n * As input props, all available items, currently selected items, search text and callback functions for changes in selected items and search text\n * must be supplied by the client.\n */\nexport const ItemPicker = forwardRef(function ItemPicker(\n  {\n    className,\n    itemTypeName,\n    allItems,\n    selectedItems,\n    maxSelections,\n    onSelectedItemsChange,\n    onSelectionChange,\n    selected = NO_SELECTION,\n    createCustomItemProps,\n    ...htmlAttributes\n  }: ItemPickerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-item-picker\",\n    css: itemPickerCss,\n    window: targetWindow,\n  });\n\n  const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n    setTimeout(() => {\n      el?.querySelector(\"input\")?.focus();\n    }, 100);\n  }, []);\n\n  const {\n    selectedItemsCount,\n    availableItemsCount,\n    selectedItemsFiltered,\n    availableItemsFiltered,\n    searchText,\n    onChangeSearchInput,\n    onAddItemToSelectedList,\n    onRemoveItemFromSelectedList,\n    onReorderSelectedItems,\n  } = useItemPicker({\n    allItems,\n    selectedItems,\n    onSelectedItemsChange,\n    maxSelections,\n  });\n\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const getOptionName = (option?: HTMLElement) => {\n    if (option) {\n      const { name } = option.dataset;\n      if (name) {\n        return name;\n      }\n    }\n    throw Error(\"[ItemPicker] list option has no data-name\");\n  };\n\n  const handleDragEnd = useCallback(() => {\n    setTimeout(() => {\n      const listItems =\n        listRef.current?.querySelectorAll<HTMLDivElement>(\".saltOption\");\n      if (listItems) {\n        const orderedItemNames = Array.from(listItems).map(getOptionName);\n        onReorderSelectedItems(orderedItemNames);\n      }\n    }, 300);\n  }, [availableItemsFiltered, selectedItemsFiltered]);\n\n  const searchPlaceholderText = `Find ${singularForm(itemTypeName)}`;\n  const maxSelectionsSubHeading = maxSelections ? `(${maxSelections} max)` : \"\";\n  const selectedItemsHeading = `${selectedItemsCount} ${selectedItemsCount === 1 ? singularForm(itemTypeName) : pluralForm(itemTypeName)} in view ${maxSelectionsSubHeading}`;\n  const availableItemsHeading = `${availableItemsCount} available ${availableItemsCount === 1 ? singularForm(itemTypeName) : pluralForm(itemTypeName)}`;\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      ref={forwardedRef}\n    >\n      <form className={`${classBase}-search`} role=\"search\">\n        <Input\n          startAdornment={searchIcon}\n          placeholder={searchPlaceholderText}\n          ref={searchCallbackRef}\n          value={searchText}\n          onChange={onChangeSearchInput}\n        />\n      </form>\n\n      <div className={`${classBase}-scrollContainer vuuScrollable`}>\n        <div className={`${classBase}-sectionHeader`}>\n          {selectedItemsHeading}\n        </div>\n        <DragDropProvider onDragEnd={handleDragEnd}>\n          <ListBox\n            className={`${classBase}-selectedList`}\n            onSelectionChange={onSelectionChange}\n            ref={listRef}\n            selected={selected}\n          >\n            {selectedItemsFiltered.map((item, index) => (\n              <SelectedListItem\n                item={item}\n                index={index}\n                key={item.name}\n                onRemove={onRemoveItemFromSelectedList}\n                searchPattern={searchText.toLowerCase() as Lowercase<string>}\n                value={item}\n              />\n            ))}\n          </ListBox>\n        </DragDropProvider>\n\n        <div\n          className={cx(\n            `${classBase}-sectionHeader`,\n            `${classBase}-availableHeader`,\n          )}\n        >\n          {availableItemsHeading}\n        </div>\n        <ListBox\n          className={`${classBase}-availableList`}\n          selected={NO_SELECTION}\n        >\n          {availableItemsFiltered.map((item, index) => (\n            <AvailableListItem\n              item={item}\n              index={index}\n              key={item.name}\n              onAdd={onAddItemToSelectedList}\n              searchPattern={searchText.toLowerCase() as Lowercase<string>}\n              value={item}\n              disabled={selectedItemsCount === maxSelections}\n            />\n          ))}\n        </ListBox>\n      </div>\n      {createCustomItemProps ? (\n        <div className={`${classBase}-item-buttons`}>\n          <Button onClick={createCustomItemProps.onClickCreateCustomItem}>\n            {createCustomItemProps.buttonLabel}\n          </Button>\n        </div>\n      ) : null}\n    </div>\n  );\n});\n"],"names":["jsx","Icon","useSortable","useMemo","getItemLabel","applyHighlighting","useCallback","jsxs","Option","IconButton","forwardRef","ItemPicker","useWindow","useComponentCssInjection","itemPickerCss","useItemPicker","useRef","singularForm","pluralForm","Input","DragDropProvider","ListBox","Button"],"mappings":"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"}

package/cjs/item-picker/useItemPicker.js

@@ -1,118 +0,0 @@
-'use strict';
-
-var vuuUtils = require('@vuu-ui/vuu-utils');
-var React = require('react');
-
-const filterItems = (items, pattern) => {
-  if (pattern) {
-    const lowerCasePattern = pattern.toLowerCase();
-    return items.filter(
-      (item) => getItemLabel(item).toLowerCase().indexOf(lowerCasePattern) !== -1
-    );
-  } else {
-    return items;
-  }
-};
-const getItemLabel = (item) => {
-  if (item.label) return item.label;
-  else return item.name;
-};
-const itemName = (target) => {
-  const listItem = vuuUtils.queryClosest(target, ".saltOption", true);
-  const { name } = listItem.dataset;
-  if (name) {
-    return name;
-  } else {
-    throw Error(
-      "[useItemPicker] item name could not be identified, data-name attribute not found"
-    );
-  }
-};
-const byItemName = ({ name: n1 }, { name: n2 }) => n1 > n2 ? 1 : n2 > n1 ? -1 : 0;
-const useItemPicker = ({
-  allItems,
-  selectedItems,
-  maxSelections,
-  onSelectedItemsChange
-}) => {
-  if (maxSelections && selectedItems.length > maxSelections) {
-    throw Error(
-      `[useItemPicker] max selections ${maxSelections} exceeded by selected items (that has count ${selectedItems.length})`
-    );
-  }
-  const [searchPattern, setSearchPattern] = React.useState("");
-  const handleChangeSearchInput = React.useCallback((evt) => {
-    const { value } = evt.target;
-    setSearchPattern(value);
-  }, []);
-  const handleAddItemToSelectedList = React.useCallback(
-    (e) => {
-      const name = itemName(e.target);
-      const itemToAdd = allItems.find((item) => item.name === name);
-      if (itemToAdd) {
-        const newSelectedItems = selectedItems.concat(itemToAdd);
-        onSelectedItemsChange(newSelectedItems);
-      } else {
-        throw Error(
-          `[useItemPicker] handleAddItemToSelectedList, item '${name}' not found`
-        );
-      }
-    },
-    [allItems, selectedItems, onSelectedItemsChange]
-  );
-  const handleRemoveItemFromSelectedList = React.useCallback(
-    (e) => {
-      const name = itemName(e.target);
-      const itemToRemove = selectedItems.find((item) => item.name === name);
-      if (itemToRemove) {
-        const newSelectedItems = selectedItems.filter(
-          (item) => item.name !== name
-        );
-        onSelectedItemsChange(newSelectedItems);
-      } else {
-        throw Error(
-          `[useItemPicker] handleRemoveItemFromSelectedList, item '${name}' not found`
-        );
-      }
-    },
-    [selectedItems, onSelectedItemsChange]
-  );
-  const handleReorderSelectedItems = React.useCallback(
-    (orderedItemNames) => {
-      const reorderedSelectedItems = vuuUtils.reorderItems(
-        selectedItems,
-        orderedItemNames
-      );
-      onSelectedItemsChange(reorderedSelectedItems);
-    },
-    [selectedItems, onSelectedItemsChange]
-  );
-  const getSelectedItemsFiltered = React.useMemo(() => {
-    return filterItems(selectedItems, searchPattern);
-  }, [selectedItems, searchPattern]);
-  const getAvailableItemsFiltered = React.useMemo(() => {
-    return filterItems(allItems, searchPattern).filter(
-      ({ name }) => selectedItems.findIndex((item) => item.name === name) === -1
-    ).toSorted(byItemName);
-  }, [allItems, selectedItems, searchPattern]);
-  const getAvailableItemsCount = React.useMemo(() => {
-    return allItems.filter(
-      ({ name }) => selectedItems.findIndex((item) => item.name === name) === -1
-    ).length;
-  }, [allItems, selectedItems]);
-  return {
-    selectedItemsCount: selectedItems.length,
-    availableItemsCount: getAvailableItemsCount,
-    selectedItemsFiltered: getSelectedItemsFiltered,
-    availableItemsFiltered: getAvailableItemsFiltered,
-    searchText: searchPattern,
-    onChangeSearchInput: handleChangeSearchInput,
-    onAddItemToSelectedList: handleAddItemToSelectedList,
-    onRemoveItemFromSelectedList: handleRemoveItemFromSelectedList,
-    onReorderSelectedItems: handleReorderSelectedItems
-  };
-};
-
-exports.getItemLabel = getItemLabel;
-exports.useItemPicker = useItemPicker;
-//# sourceMappingURL=useItemPicker.js.map

package/cjs/item-picker/useItemPicker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useItemPicker.js","sources":["../../../../packages/vuu-ui-controls/src/item-picker/useItemPicker.tsx"],"sourcesContent":["import { queryClosest, reorderItems } from \"@vuu-ui/vuu-utils\";\nimport {\n  FormEventHandler,\n  MouseEventHandler,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\n\n/** This is a public description of an Item that can be displayed in the ItemPicker component, defining all the\n * mandatory and option attributes that can be defined by the client. */\nexport interface ItemDescriptor {\n  /** Unique name for this data value */\n  name: string;\n  /** Optional label for display instead of the name */\n  label?: string;\n  /** Optional data-icon name for display of an icon to the left of the item label/name in the selected list */\n  icon?: string;\n  /** Optional string to define groups of items for client reference, not currently used for rendering */\n  group?: string;\n}\n\nexport interface CreateCustomItemProps {\n  buttonLabel: string;\n  onClickCreateCustomItem: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface ItemPickerHookProps {\n  allItems: ItemDescriptor[];\n  selectedItems: ItemDescriptor[];\n  maxSelections?: number;\n  onSelectedItemsChange: (newSelectedItems: ItemDescriptor[]) => void;\n}\n\nconst filterItems = (\n  items: readonly ItemDescriptor[],\n  pattern: string,\n): readonly ItemDescriptor[] => {\n  if (pattern) {\n    const lowerCasePattern = pattern.toLowerCase();\n    return items.filter(\n      (item) =>\n        getItemLabel(item).toLowerCase().indexOf(lowerCasePattern) !== -1,\n    );\n  } else {\n    return items;\n  }\n};\n\nexport const getItemLabel = (item: ItemDescriptor) => {\n  if (item.label) return item.label;\n  else return item.name;\n};\n\nconst itemName = (target: EventTarget): string => {\n  const listItem = queryClosest(target, \".saltOption\", true);\n  const { name } = listItem.dataset;\n  if (name) {\n    return name;\n  } else {\n    throw Error(\n      \"[useItemPicker] item name could not be identified, data-name attribute not found\",\n    );\n  }\n};\n\nconst byItemName = (\n  { name: n1 }: ItemDescriptor,\n  { name: n2 }: ItemDescriptor,\n) => (n1 > n2 ? 1 : n2 > n1 ? -1 : 0);\n\nexport const useItemPicker = ({\n  allItems,\n  selectedItems,\n  maxSelections,\n  onSelectedItemsChange,\n}: ItemPickerHookProps) => {\n  if (maxSelections && selectedItems.length > maxSelections) {\n    throw Error(\n      `[useItemPicker] max selections ${maxSelections} exceeded by selected items (that has count ${selectedItems.length})`,\n    );\n  }\n\n  const [searchPattern, setSearchPattern] = useState(\"\");\n\n  const handleChangeSearchInput = useCallback<FormEventHandler>((evt) => {\n    const { value } = evt.target as HTMLInputElement;\n    setSearchPattern(value);\n  }, []);\n\n  const handleAddItemToSelectedList = useCallback<\n    MouseEventHandler<HTMLButtonElement>\n  >(\n    (e) => {\n      const name = itemName(e.target);\n      const itemToAdd = allItems.find((item) => item.name === name);\n      if (itemToAdd) {\n        const newSelectedItems = selectedItems.concat(itemToAdd);\n        onSelectedItemsChange(newSelectedItems);\n      } else {\n        throw Error(\n          `[useItemPicker] handleAddItemToSelectedList, item '${name}' not found`,\n        );\n      }\n    },\n    [allItems, selectedItems, onSelectedItemsChange],\n  );\n\n  const handleRemoveItemFromSelectedList = useCallback<\n    MouseEventHandler<HTMLButtonElement>\n  >(\n    (e) => {\n      const name = itemName(e.target);\n      const itemToRemove = selectedItems.find((item) => item.name === name);\n      if (itemToRemove) {\n        const newSelectedItems = selectedItems.filter(\n          (item) => item.name !== name,\n        );\n        onSelectedItemsChange(newSelectedItems);\n      } else {\n        throw Error(\n          `[useItemPicker] handleRemoveItemFromSelectedList, item '${name}' not found`,\n        );\n      }\n    },\n    [selectedItems, onSelectedItemsChange],\n  );\n\n  const handleReorderSelectedItems = useCallback(\n    (orderedItemNames: string[]) => {\n      const reorderedSelectedItems: ItemDescriptor[] = reorderItems(\n        selectedItems,\n        orderedItemNames,\n      );\n      onSelectedItemsChange(reorderedSelectedItems);\n    },\n    [selectedItems, onSelectedItemsChange],\n  );\n\n  const getSelectedItemsFiltered = useMemo(() => {\n    return filterItems(selectedItems, searchPattern);\n  }, [selectedItems, searchPattern]);\n\n  const getAvailableItemsFiltered = useMemo(() => {\n    return filterItems(allItems, searchPattern)\n      .filter(\n        ({ name }) =>\n          selectedItems.findIndex((item) => item.name === name) === -1,\n      )\n      .toSorted(byItemName);\n  }, [allItems, selectedItems, searchPattern]);\n\n  const getAvailableItemsCount = useMemo(() => {\n    return allItems.filter(\n      ({ name }) =>\n        selectedItems.findIndex((item) => item.name === name) === -1,\n    ).length;\n  }, [allItems, selectedItems]);\n\n  return {\n    selectedItemsCount: selectedItems.length,\n    availableItemsCount: getAvailableItemsCount,\n    selectedItemsFiltered: getSelectedItemsFiltered,\n    availableItemsFiltered: getAvailableItemsFiltered,\n    searchText: searchPattern,\n    onChangeSearchInput: handleChangeSearchInput,\n    onAddItemToSelectedList: handleAddItemToSelectedList,\n    onRemoveItemFromSelectedList: handleRemoveItemFromSelectedList,\n    onReorderSelectedItems: handleReorderSelectedItems,\n  };\n};\n"],"names":["queryClosest","useState","useCallback","reorderItems","useMemo"],"mappings":"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"}

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

@@ -1,6 +0,0 @@
-'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

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