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

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

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

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

package/esm/item-picker/ItemPicker.js

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

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

package/esm/item-picker/useItemPicker.js

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

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

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

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

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

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

package/esm/measured-container/MeasuredContainer.js

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

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

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