@vuu-ui/vuu-ui-controls 2.2.0 → 2.3.0

package/cjs/index.js

@@ -27,6 +27,7 @@ var Icon = require('./icon-button/Icon.js');
 var IconButton = require('./icon-button/IconButton.js');
 var ToggleIconButton = require('./icon-button/ToggleIconButton.js');
 var TablePicker = require('./instrument-picker/TablePicker.js');
+var ItemPicker = require('./item-picker/ItemPicker.js');
 var MeasuredContainer = require('./measured-container/MeasuredContainer.js');
 var useMeasuredContainer = require('./measured-container/useMeasuredContainer.js');
 var ModalProvider = require('./modal-provider/ModalProvider.js');
@@ -120,6 +121,7 @@ exports.Icon = Icon.Icon;
 exports.IconButton = IconButton.IconButton;
 exports.ToggleIconButton = ToggleIconButton.ToggleIconButton;
 exports.TablePicker = TablePicker.TablePicker;
+exports.ItemPicker = ItemPicker.ItemPicker;
 exports.MeasuredContainer = MeasuredContainer.MeasuredContainer;
 exports.reduceSizeHeight = useMeasuredContainer.reduceSizeHeight;
 exports.useMeasuredContainer = useMeasuredContainer.useMeasuredContainer;

package/cjs/index.js.map

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

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

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

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

package/cjs/item-picker/ItemPicker.js

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

@@ -0,0 +1 @@
+{"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

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

@@ -0,0 +1 @@
+{"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/esm/index.js

@@ -25,6 +25,7 @@ export { Icon } from './icon-button/Icon.js';
 export { IconButton } from './icon-button/IconButton.js';
 export { ToggleIconButton } from './icon-button/ToggleIconButton.js';
 export { TablePicker } from './instrument-picker/TablePicker.js';
+export { ItemPicker } from './item-picker/ItemPicker.js';
 export { MeasuredContainer } from './measured-container/MeasuredContainer.js';
 export { reduceSizeHeight, useMeasuredContainer } from './measured-container/useMeasuredContainer.js';
 export { ModalProvider, useModal } from './modal-provider/ModalProvider.js';

package/esm/index.js.map

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

package/esm/item-picker/ItemPicker.css.js

@@ -0,0 +1,4 @@
+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";
+
+export { itemPickerCss as default };
+//# sourceMappingURL=ItemPicker.css.js.map

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

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

package/esm/item-picker/ItemPicker.js

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

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

@@ -0,0 +1 @@
+{"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":["ItemPicker"],"mappings":"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"}

package/esm/item-picker/useItemPicker.js

@@ -0,0 +1,115 @@
+import { reorderItems, queryClosest } from '@vuu-ui/vuu-utils';
+import { useState, useCallback, useMemo } from '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 = 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] = useState("");
+  const handleChangeSearchInput = useCallback((evt) => {
+    const { value } = evt.target;
+    setSearchPattern(value);
+  }, []);
+  const handleAddItemToSelectedList = 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 = 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 = useCallback(
+    (orderedItemNames) => {
+      const reorderedSelectedItems = reorderItems(
+        selectedItems,
+        orderedItemNames
+      );
+      onSelectedItemsChange(reorderedSelectedItems);
+    },
+    [selectedItems, onSelectedItemsChange]
+  );
+  const getSelectedItemsFiltered = useMemo(() => {
+    return filterItems(selectedItems, searchPattern);
+  }, [selectedItems, searchPattern]);
+  const getAvailableItemsFiltered = useMemo(() => {
+    return filterItems(allItems, searchPattern).filter(
+      ({ name }) => selectedItems.findIndex((item) => item.name === name) === -1
+    ).toSorted(byItemName);
+  }, [allItems, selectedItems, searchPattern]);
+  const getAvailableItemsCount = 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
+  };
+};
+
+export { getItemLabel, useItemPicker };
+//# sourceMappingURL=useItemPicker.js.map

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

@@ -0,0 +1 @@
+{"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":[],"mappings":"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"}

package/package.json

@@ -1,20 +1,20 @@
 {
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "VUU UI Controls",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "2.2.0",
-    "@vuu-ui/vuu-protocol-types": "2.2.0",
-    "@vuu-ui/vuu-table-types": "2.2.0"
+    "@vuu-ui/vuu-data-types": "2.3.0",
+    "@vuu-ui/vuu-protocol-types": "2.3.0",
+    "@vuu-ui/vuu-table-types": "2.3.0"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "2.2.0",
-    "@vuu-ui/vuu-data-react": "2.2.0",
-    "@vuu-ui/vuu-layout": "2.2.0",
-    "@vuu-ui/vuu-popups": "2.2.0",
-    "@vuu-ui/vuu-table": "2.2.0",
-    "@vuu-ui/vuu-utils": "2.2.0",
+    "@vuu-ui/vuu-context-menu": "2.3.0",
+    "@vuu-ui/vuu-data-react": "2.3.0",
+    "@vuu-ui/vuu-layout": "2.3.0",
+    "@vuu-ui/vuu-popups": "2.3.0",
+    "@vuu-ui/vuu-table": "2.3.0",
+    "@vuu-ui/vuu-utils": "2.3.0",
     "@salt-ds/core": "1.54.1",
     "@salt-ds/icons": "1.16.0",
     "@salt-ds/styles": "0.2.1",

package/types/index.d.ts

@@ -12,6 +12,8 @@ export * from "./expando-input";
 export { HoverOverlay } from "./hover-overlay/HoverOverlay";
 export * from "./icon-button";
 export * from "./instrument-picker";
+export { ItemPicker, type ItemPickerProps } from "./item-picker/ItemPicker";
+export { type ItemDescriptor, type CreateCustomItemProps, } from "./item-picker/useItemPicker";
 export * from "./measured-container";
 export { ModalProvider, useModal } from "./modal-provider/ModalProvider";
 export * from "./overflow-container";

package/types/item-picker/ItemPicker.d.ts

@@ -0,0 +1,14 @@
+import { ListBoxProps } from "@salt-ds/core";
+import { ItemTypeName } from "@vuu-ui/vuu-utils";
+import { HTMLAttributes } from "react";
+import { CreateCustomItemProps, ItemDescriptor, ItemPickerHookProps } from "./useItemPicker";
+export declare const classBaseListItem = "vuuItemPickerListItem";
+export interface ItemPickerProps extends ItemPickerHookProps, HTMLAttributes<HTMLDivElement>, Pick<ListBoxProps<ItemDescriptor>, "selected" | "onSelectionChange"> {
+    itemTypeName: ItemTypeName;
+    createCustomItemProps?: CreateCustomItemProps;
+}
+/** Generic controlled component that displays items in a 'picker' that are available to search, select, reorder or deselect.
+ * As input props, all available items, currently selected items, search text and callback functions for changes in selected items and search text
+ * must be supplied by the client.
+ */
+export declare const ItemPicker: import("react").ForwardRefExoticComponent<ItemPickerProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/item-picker/useItemPicker.d.ts

@@ -0,0 +1,35 @@
+import { FormEventHandler, MouseEventHandler } from "react";
+/** This is a public description of an Item that can be displayed in the ItemPicker component, defining all the
+ * mandatory and option attributes that can be defined by the client. */
+export interface ItemDescriptor {
+    /** Unique name for this data value */
+    name: string;
+    /** Optional label for display instead of the name */
+    label?: string;
+    /** Optional data-icon name for display of an icon to the left of the item label/name in the selected list */
+    icon?: string;
+    /** Optional string to define groups of items for client reference, not currently used for rendering */
+    group?: string;
+}
+export interface CreateCustomItemProps {
+    buttonLabel: string;
+    onClickCreateCustomItem: MouseEventHandler<HTMLButtonElement>;
+}
+export interface ItemPickerHookProps {
+    allItems: ItemDescriptor[];
+    selectedItems: ItemDescriptor[];
+    maxSelections?: number;
+    onSelectedItemsChange: (newSelectedItems: ItemDescriptor[]) => void;
+}
+export declare const getItemLabel: (item: ItemDescriptor) => string;
+export declare const useItemPicker: ({ allItems, selectedItems, maxSelections, onSelectedItemsChange, }: ItemPickerHookProps) => {
+    selectedItemsCount: number;
+    availableItemsCount: number;
+    selectedItemsFiltered: readonly ItemDescriptor[];
+    availableItemsFiltered: ItemDescriptor[];
+    searchText: string;
+    onChangeSearchInput: FormEventHandler;
+    onAddItemToSelectedList: MouseEventHandler<HTMLButtonElement>;
+    onRemoveItemFromSelectedList: MouseEventHandler<HTMLButtonElement>;
+    onReorderSelectedItems: (orderedItemNames: string[]) => void;
+};