clayui-multi-select 3.165.0

package/lib/cjs/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_exports = {};
+__export(index_exports, {
+  default: () => index_default,
+  itemLabelFilter: () => import_MultiSelect.itemLabelFilter
+});
+module.exports = __toCommonJS(index_exports);
+var import_autocomplete = require("@clayui/autocomplete");
+var import_MultiSelect = require("./MultiSelect");
+var index_default = Object.assign(import_MultiSelect.MultiSelect, { Item: import_autocomplete.Item });

package/lib/cjs/types.js

@@ -0,0 +1,16 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/esm/Labels.js

@@ -0,0 +1,324 @@
+import { ClayInput } from "@clayui/form";
+import Icon from "@clayui/icon";
+import Label from "@clayui/label";
+import {
+  Keys,
+  getLocatorValue,
+  sub,
+  useId
+} from "@clayui/shared";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+const DELIMITER_KEYS = ["Enter", ","];
+const KeysNavigation = [Keys.Left, Keys.Right, Keys.Up, Keys.Down];
+const KeysSides = [Keys.Left, Keys.Right];
+let counterUid = 0;
+const Labels = React.forwardRef(
+  function Labels2({
+    allowDuplicateValues = true,
+    allowsCustomLabel,
+    "aria-activedescendant": activeDescendant,
+    ariaDescriptionId,
+    closeButtonAriaLabel,
+    disabled,
+    inputName,
+    "insetAfter": _,
+    labels,
+    lastChangesRef,
+    locator,
+    onChange,
+    onFocusChange,
+    onLabelsChange,
+    placeholder,
+    spritemap,
+    suggestionList,
+    value,
+    ...otherProps
+  }, ref) {
+    const inputRef = useRef(null);
+    const labelsRef = useRef(null);
+    const lastItemRef = useRef(null);
+    const [isLabelFocused, setIsLabelFocused] = useState(
+      null
+    );
+    const [lastFocusedItem, setLastFocusedItem] = useState(
+      null
+    );
+    const inputElementRef = ref || inputRef;
+    const labelId = useId();
+    const getSourceItemByLabel = (label) => {
+      return suggestionList.find(
+        (item) => getLocatorValue({
+          item,
+          locator: locator.label
+        }) === label
+      );
+    };
+    const getNewItem = (value2) => {
+      counterUid++;
+      const labelKey = typeof locator.label === "function" ? "label" : locator.label;
+      const valueKey = typeof locator.value === "function" ? "value" : locator.value;
+      return getSourceItemByLabel(value2) || {
+        key: `key_${counterUid}`,
+        [labelKey]: value2,
+        [valueKey]: value2
+      };
+    };
+    const onRemove = useCallback(
+      (label, index) => {
+        if (labelsRef.current) {
+          const focusableElements = Array.from(
+            labelsRef.current.querySelectorAll("button")
+          );
+          const activeElement = document.activeElement.tagName === "SPAN" ? document.activeElement.querySelector("button") : document.activeElement;
+          const position = focusableElements.indexOf(
+            activeElement
+          );
+          const closeElement = focusableElements[focusableElements.length - 1 > position ? position + 1 : position - 1];
+          if (closeElement) {
+            closeElement.focus();
+            setLastFocusedItem(closeElement.getAttribute("id"));
+          } else {
+            inputElementRef.current?.focus();
+            setLastFocusedItem(null);
+          }
+        }
+        lastChangesRef.current = {
+          action: "removed",
+          label
+        };
+        onLabelsChange(
+          labels.filter((_2, itemIndex) => itemIndex !== index)
+        );
+      },
+      [labels]
+    );
+    useEffect(() => {
+      if (labelsRef.current) {
+        const focusableElements = Array.from(
+          labelsRef.current.querySelectorAll(
+            ".label [aria-describedby]"
+          )
+        );
+        const addedLabel = focusableElements[focusableElements.length - 1];
+        if (addedLabel) {
+          setLastFocusedItem(addedLabel.getAttribute("id"));
+        }
+      }
+    }, [labels]);
+    return /* @__PURE__ */ React.createElement(ClayInput.GroupItem, null, /* @__PURE__ */ React.createElement(ClayInput.Group, null, /* @__PURE__ */ React.createElement(
+      ClayInput.GroupItem,
+      {
+        "aria-labelledby": otherProps["aria-labelledby"],
+        className: "d-contents",
+        onFocus: (event) => setLastFocusedItem(event.target.getAttribute("id")),
+        onKeyDown: (event) => {
+          if (KeysNavigation.includes(event.key)) {
+            event.preventDefault();
+            const focusableElements = Array.from(
+              event.currentTarget.querySelectorAll(
+                KeysSides.includes(event.key) ? "[role=gridcell][tabindex], button" : lastFocusedItem?.includes(
+                  "span"
+                ) ? "[role=gridcell][tabindex]" : "button"
+              )
+            );
+            const position = focusableElements.indexOf(
+              document.activeElement
+            );
+            const key = KeysSides.includes(event.key) ? Keys.Left : Keys.Up;
+            const label = focusableElements[event.key === key ? position - 1 : position + 1];
+            if (label) {
+              setLastFocusedItem(
+                label.getAttribute("id")
+              );
+              label.focus();
+            }
+          }
+          if (event.key === Keys.Home || event.key === Keys.End) {
+            event.preventDefault();
+            const isLabel = lastFocusedItem.includes("span");
+            if (isLabel && event.key === Keys.Home || !isLabel && event.key === Keys.End) {
+              return;
+            }
+            const label = event.currentTarget.querySelector(
+              `[id=${lastFocusedItem?.replace(
+                isLabel ? "span" : "close",
+                event.key === Keys.Home ? "span" : "close"
+              )}]`
+            );
+            if (label) {
+              setLastFocusedItem(
+                label.getAttribute("id")
+              );
+              label.focus();
+            }
+          }
+        },
+        prepend: true,
+        ref: (ref2) => {
+          labelsRef.current = ref2;
+        },
+        role: "grid",
+        shrink: true
+      },
+      labels.map((item, i) => {
+        const value2 = getLocatorValue({
+          item,
+          locator: locator.value
+        });
+        const uid = getLocatorValue({
+          item,
+          locator: locator.id
+        }) ?? value2;
+        const id = `${labelId}-label-${uid}-span`;
+        const closeId = `${labelId}-label-${uid}-close`;
+        const label = getLocatorValue({
+          item,
+          locator: locator.label
+        });
+        return /* @__PURE__ */ React.createElement(React.Fragment, { key: id }, /* @__PURE__ */ React.createElement(
+          Label,
+          {
+            className: isLabelFocused === id ? "focus" : void 0,
+            onKeyDown: ({ key }) => {
+              if (key === Keys.Backspace) {
+                onRemove(label || "", i);
+              }
+            },
+            role: "row",
+            spritemap,
+            tabIndex: -1,
+            withClose: false
+          },
+          /* @__PURE__ */ React.createElement(
+            Label.ItemExpand,
+            {
+              "aria-describedby": ariaDescriptionId,
+              id,
+              onBlur: () => setIsLabelFocused(null),
+              onFocus: () => setIsLabelFocused(id),
+              role: "gridcell",
+              style: { outline: "none" },
+              tabIndex: lastFocusedItem === null && i === 0 || lastFocusedItem === id ? 0 : -1
+            },
+            label
+          ),
+          /* @__PURE__ */ React.createElement(Label.ItemAfter, { role: "gridcell" }, /* @__PURE__ */ React.createElement(
+            "button",
+            {
+              "aria-label": sub(
+                closeButtonAriaLabel,
+                [label || ""]
+              ),
+              className: "close",
+              disabled,
+              id: closeId,
+              onClick: () => onRemove(label || "", i),
+              ref: (ref2) => {
+                if (i === labels.length - 1) {
+                  lastItemRef.current = ref2;
+                }
+              },
+              tabIndex: lastFocusedItem === closeId ? 0 : -1,
+              type: "button"
+            },
+            /* @__PURE__ */ React.createElement(
+              Icon,
+              {
+                spritemap,
+                symbol: "times-small"
+              }
+            )
+          ))
+        ), inputName && /* @__PURE__ */ React.createElement(
+          "input",
+          {
+            name: inputName,
+            type: "hidden",
+            value: value2
+          }
+        ));
+      })
+    ), /* @__PURE__ */ React.createElement(ClayInput.GroupItem, { prepend: true }, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        ...otherProps,
+        "aria-activedescendant": activeDescendant,
+        className: "form-control-inset",
+        disabled,
+        onBlur: (event) => {
+          if (otherProps.onBlur) {
+            otherProps.onBlur(event);
+          }
+          onFocusChange(false);
+        },
+        onChange: (event) => {
+          const { value: value2 } = event.target;
+          event.target.value = allowsCustomLabel ? value2.replace(",", "") : value2;
+          onChange(event);
+        },
+        onFocus: (event) => {
+          if (otherProps.onFocus) {
+            otherProps.onFocus(event);
+          }
+          onFocusChange(true);
+        },
+        onKeyDown: (event) => {
+          if (otherProps.onKeyDown) {
+            otherProps.onKeyDown(event);
+          }
+          const { key } = event;
+          if (key === Keys.Backspace && !value) {
+            event.preventDefault();
+          }
+          if (key === Keys.Enter && (activeDescendant || event.defaultPrevented)) {
+            return;
+          }
+          if (allowsCustomLabel && value.trim() && DELIMITER_KEYS.includes(key)) {
+            if (!allowDuplicateValues && value && labels.find(
+              (label) => label.label?.toLowerCase() === `${value}`.toLowerCase()
+            )) {
+              onChange({ target: { value: "" } });
+              return;
+            }
+            event.preventDefault();
+            lastChangesRef.current = {
+              action: "added",
+              label: value
+            };
+            onLabelsChange([
+              ...labels,
+              getNewItem(value)
+            ]);
+            onChange({ target: { value: "" } });
+          } else if (!value && key === Keys.Backspace && inputElementRef.current && lastItemRef.current) {
+            inputElementRef.current.blur();
+            lastItemRef.current.focus();
+          }
+        },
+        onPaste: (event) => {
+          if (otherProps.onPaste) {
+            otherProps.onPaste(event);
+          }
+          if (event.defaultPrevented) {
+            return;
+          }
+          const pastedText = event.clipboardData.getData("Text");
+          const pastedItems = pastedText.split(",").map(
+            (itemLabel) => getNewItem(itemLabel.trim())
+          ).filter(Boolean);
+          if (allowsCustomLabel && !!pastedItems.length) {
+            event.preventDefault();
+            onLabelsChange([...labels, ...pastedItems]);
+          }
+        },
+        placeholder: labels.length ? void 0 : placeholder,
+        ref: inputElementRef,
+        type: "text",
+        value
+      }
+    ))));
+  }
+);
+export {
+  Labels
+};

package/lib/esm/MultiSelect.js

@@ -0,0 +1,306 @@
+import ACT, {
+  Autocomplete,
+  Item as AutocompleteItem
+} from "@clayui/autocomplete";
+import { ClayButtonWithIcon } from "@clayui/button";
+import { KeyboardArrowsIndicator } from "@clayui/core";
+import { ClayInput } from "@clayui/form";
+import {
+  ClayPortal,
+  FocusScope,
+  getLocatorValue,
+  sub,
+  useControlledState,
+  useId
+} from "@clayui/shared";
+import classNames from "classnames";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Labels } from "./Labels";
+const MultiSelect = React.forwardRef(function MultiSelectInner({
+  active: externalActive,
+  allowsCustomLabel = true,
+  allowDuplicateValues = true,
+  alignmentByViewport,
+  children,
+  clearAllTitle = "Clear All",
+  closeButtonAriaLabel = "Remove {0}",
+  defaultActive = false,
+  defaultItems = [],
+  defaultValue = "",
+  disabled,
+  disabledClearAll,
+  displayKeyboardArrowsIndicator = false,
+  hotkeysDescription,
+  inputName,
+  inputValue,
+  isLoading: _i,
+  isValid = true,
+  items: externalItems,
+  liveRegion,
+  locator = {
+    id: "key",
+    label: "label",
+    value: "value"
+  },
+  loadingState,
+  menuRenderer: MenuRenderer,
+  messages = {
+    hotkeys: "Press backspace to delete the current row.",
+    labelAdded: "Label {0} added to the list",
+    labelRemoved: "Label {0} removed to the list",
+    listCount: "{0} option available.",
+    listCountPlural: "{0} options available.",
+    loading: "Loading...",
+    notFound: "No results found"
+  },
+  onActiveChange,
+  onChange,
+  onClearAllButtonClick,
+  onItemsChange,
+  onLoadMore,
+  placeholder,
+  size,
+  sourceItems = null,
+  spritemap,
+  icon,
+  value: externalValue,
+  ...otherProps
+}, ref) {
+  const containerRef = useRef(null);
+  const inputRef = useRef(null);
+  const lastChangesRef = useRef(null);
+  const [isFocused, setIsFocused] = useState(false);
+  const [items, setItems] = useControlledState({
+    defaultName: "defaultItems",
+    defaultValue: defaultItems,
+    handleName: "onItemsChange",
+    name: "items",
+    onChange: onItemsChange,
+    value: externalItems
+  });
+  const [value, setValue] = useControlledState({
+    defaultName: "defaultValue",
+    defaultValue,
+    handleName: "onChange",
+    name: "value",
+    onChange,
+    value: externalValue ?? inputValue
+  });
+  const [active, setActive] = useControlledState({
+    defaultName: "defaultActive",
+    defaultValue: defaultActive,
+    handleName: "onActiveChange",
+    name: "active",
+    onChange: onActiveChange,
+    value: externalActive
+  });
+  const selectedKeys = useMemo(() => {
+    return items.map(
+      (item) => String(
+        getLocatorValue({
+          item,
+          locator: locator.value
+        })
+      )
+    );
+  }, [items, locator.value]);
+  const inputElementRef = ref || inputRef;
+  const ariaDescriptionId = useId();
+  const hasAsyncItems = !!onLoadMore || typeof loadingState === "number";
+  const Container = MenuRenderer ? FocusScope : React.Fragment;
+  const containerProps = MenuRenderer ? { arrowKeysUpDown: false } : {};
+  useEffect(() => {
+    if (MenuRenderer) {
+      console.warn(
+        `<ClayMultiSelect />: You are using 'menuRenderer' which is deprecated and missing the new features and improvements that have been implemented in the component try to migrate to the new composition based API to custom list items.`
+      );
+    }
+    if (allowsCustomLabel && (typeof locator.label === "function" || typeof locator.value === "function")) {
+      console.warn(
+        `<ClayMultiSelect />: Custom labels cannot be created because the expected structure of the label is unknown. Please disable allowsCustomLabel or update the locators to be strings rather than functions.`
+      );
+    }
+  }, []);
+  useEffect(() => {
+    if (MenuRenderer && sourceItems) {
+      setActive(!!value && sourceItems.length !== 0);
+    }
+  }, [value, sourceItems]);
+  const memoizedChildren = useCallback(
+    (item) => {
+      const handleItemClick = (event) => {
+        event.preventDefault();
+        setActive(false);
+        if (!allowDuplicateValues && items.find((dropdownItem) => {
+          return getLocatorValue({
+            item: dropdownItem,
+            locator: locator.value
+          }) === getLocatorValue({
+            item,
+            locator: locator.value
+          });
+        })) {
+          return;
+        }
+        setItems([...items, item]);
+        setValue("");
+      };
+      if (children && typeof children === "function") {
+        const child = children(item);
+        return React.cloneElement(child, {
+          onClick: (event) => {
+            if (child.props.onClick) {
+              child.props.onClick(event);
+            }
+            if (event.defaultPrevented) {
+              return;
+            }
+            handleItemClick(event);
+          }
+        });
+      }
+      return /* @__PURE__ */ React.createElement(
+        AutocompleteItem,
+        {
+          key: getLocatorValue({
+            item,
+            locator: locator.value
+          }),
+          onClick: handleItemClick
+        },
+        getLocatorValue({
+          item,
+          locator: locator.label
+        })
+      );
+    },
+    [children, locator, items, setItems, allowDuplicateValues]
+  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Container, { ...containerProps }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(
+        "form-control form-control-tag-group input-group",
+        {
+          focus: isFocused && isValid,
+          [`form-control-tag-group-${size}`]: size
+        }
+      ),
+      ref: containerRef
+    },
+    /* @__PURE__ */ React.createElement(
+      Autocomplete,
+      {
+        ...otherProps,
+        UNSAFE_loadingShrink: true,
+        active: MenuRenderer ? false : active,
+        allowsCustomLabel: typeof locator.label === "function" || typeof locator.value === "function" ? false : allowsCustomLabel,
+        allowsCustomValue: true,
+        ariaDescriptionId,
+        as: Labels,
+        closeButtonAriaLabel,
+        containerElementRef: containerRef,
+        defaultItems: !hasAsyncItems ? sourceItems : void 0,
+        disabled,
+        filterKey: locator.label,
+        inputName,
+        items: hasAsyncItems ? sourceItems : void 0,
+        labels: items,
+        lastChangesRef,
+        loadingState,
+        locator,
+        menuTrigger: "focus",
+        messages,
+        onActiveChange: MenuRenderer ? () => {
+        } : setActive,
+        onChange: setValue,
+        onFocus: MenuRenderer && sourceItems ? (event) => {
+          if (otherProps.onFocus) {
+            otherProps.onFocus(event);
+          }
+          setActive(
+            !!value && sourceItems.length !== 0
+          );
+        } : otherProps.onFocus,
+        onFocusChange: setIsFocused,
+        onItemsChange: hasAsyncItems ? () => {
+        } : void 0,
+        onLabelsChange: setItems,
+        onLoadMore,
+        placeholder,
+        ref: inputElementRef,
+        selectedKeys,
+        spritemap,
+        suggestionList: sourceItems ?? [],
+        value
+      },
+      memoizedChildren
+    ),
+    sourceItems && MenuRenderer && !!sourceItems.length && /* @__PURE__ */ React.createElement(
+      ACT.DropDown,
+      {
+        active,
+        alignElementRef: containerRef,
+        alignmentByViewport,
+        onActiveChange: setActive
+      },
+      /* @__PURE__ */ React.createElement(
+        MenuRenderer,
+        {
+          inputValue: value,
+          locator,
+          onItemClick: (item) => {
+            setItems([...items, item]);
+            setValue("");
+            if (inputElementRef.current) {
+              inputElementRef.current.focus();
+            }
+          },
+          sourceItems,
+          value
+        }
+      )
+    ),
+    !disabled && !disabledClearAll && (value || !!items.length) ? /* @__PURE__ */ React.createElement(ClayInput.GroupItem, { shrink: true }, /* @__PURE__ */ React.createElement(
+      ClayButtonWithIcon,
+      {
+        "aria-label": clearAllTitle,
+        borderless: true,
+        className: "component-action",
+        displayType: "secondary",
+        onClick: () => {
+          if (onClearAllButtonClick) {
+            onClearAllButtonClick();
+          } else {
+            setItems([]);
+            setValue("");
+          }
+          if (inputElementRef.current) {
+            inputElementRef.current.focus();
+          }
+        },
+        outline: true,
+        spritemap,
+        symbol: "times-circle",
+        title: clearAllTitle
+      }
+    )) : icon,
+    /* @__PURE__ */ React.createElement("div", { className: "sr-only" }, /* @__PURE__ */ React.createElement("span", { id: ariaDescriptionId }, hotkeysDescription ?? messages.hotkeys), /* @__PURE__ */ React.createElement("span", { "aria-live": "polite", "aria-relevant": "text" }, lastChangesRef.current ? sub(
+      liveRegion ? liveRegion[lastChangesRef.current.action] : lastChangesRef.current.action === "added" ? messages.labelAdded : messages.labelRemoved,
+      [lastChangesRef.current.label]
+    ) : null))
+  )), active && displayKeyboardArrowsIndicator && /* @__PURE__ */ React.createElement(ClayPortal, null, /* @__PURE__ */ React.createElement(
+    KeyboardArrowsIndicator,
+    {
+      anchorRef: containerRef,
+      direction: "vertical"
+    }
+  )));
+});
+function itemLabelFilter(items, _value, _locator = "label") {
+  return items;
+}
+export {
+  MultiSelect,
+  itemLabelFilter
+};

package/lib/esm/index.js

@@ -0,0 +1,7 @@
+import { Item } from "@clayui/autocomplete";
+import { MultiSelect, itemLabelFilter } from "./MultiSelect";
+var index_default = Object.assign(MultiSelect, { Item });
+export {
+  index_default as default,
+  itemLabelFilter
+};