clayui-multi-select 3.165.0

package/README.md

@@ -0,0 +1,19 @@
+# `@clayui/multi-select`
+
+Multi select is the field type that allows writing text to create "tags" that are represented in the shape of labels.
+
+- [Documentation](https://clayui.com/docs/components/multi-select.html)
+- [Changelog](./CHANGELOG.md)
+- [Breaking change schedule](./BREAKING.md)
+
+## Install
+
+Run `yarn`
+
+```shell
+yarn add @clayui/multi-select
+```
+
+## Contribute
+
+We'd love to get contributions from you! Please, check our [Contributing Guidelines](https://github.com/liferay/clay/blob/master/CONTRIBUTING.md) to see how you can help us improve.

package/lib/cjs/Labels.js

@@ -0,0 +1,349 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Labels_exports = {};
+__export(Labels_exports, {
+  Labels: () => Labels
+});
+module.exports = __toCommonJS(Labels_exports);
+var import_form = require("@clayui/form");
+var import_icon = __toESM(require("@clayui/icon"));
+var import_label = __toESM(require("@clayui/label"));
+var import_shared = require("@clayui/shared");
+var import_react = __toESM(require("react"));
+const DELIMITER_KEYS = ["Enter", ","];
+const KeysNavigation = [import_shared.Keys.Left, import_shared.Keys.Right, import_shared.Keys.Up, import_shared.Keys.Down];
+const KeysSides = [import_shared.Keys.Left, import_shared.Keys.Right];
+let counterUid = 0;
+const Labels = import_react.default.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 = (0, import_react.useRef)(null);
+    const labelsRef = (0, import_react.useRef)(null);
+    const lastItemRef = (0, import_react.useRef)(null);
+    const [isLabelFocused, setIsLabelFocused] = (0, import_react.useState)(
+      null
+    );
+    const [lastFocusedItem, setLastFocusedItem] = (0, import_react.useState)(
+      null
+    );
+    const inputElementRef = ref || inputRef;
+    const labelId = (0, import_shared.useId)();
+    const getSourceItemByLabel = (label) => {
+      return suggestionList.find(
+        (item) => (0, import_shared.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 = (0, import_react.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]
+    );
+    (0, import_react.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__ */ import_react.default.createElement(import_form.ClayInput.GroupItem, null, /* @__PURE__ */ import_react.default.createElement(import_form.ClayInput.Group, null, /* @__PURE__ */ import_react.default.createElement(
+      import_form.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) ? import_shared.Keys.Left : import_shared.Keys.Up;
+            const label = focusableElements[event.key === key ? position - 1 : position + 1];
+            if (label) {
+              setLastFocusedItem(
+                label.getAttribute("id")
+              );
+              label.focus();
+            }
+          }
+          if (event.key === import_shared.Keys.Home || event.key === import_shared.Keys.End) {
+            event.preventDefault();
+            const isLabel = lastFocusedItem.includes("span");
+            if (isLabel && event.key === import_shared.Keys.Home || !isLabel && event.key === import_shared.Keys.End) {
+              return;
+            }
+            const label = event.currentTarget.querySelector(
+              `[id=${lastFocusedItem?.replace(
+                isLabel ? "span" : "close",
+                event.key === import_shared.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 = (0, import_shared.getLocatorValue)({
+          item,
+          locator: locator.value
+        });
+        const uid = (0, import_shared.getLocatorValue)({
+          item,
+          locator: locator.id
+        }) ?? value2;
+        const id = `${labelId}-label-${uid}-span`;
+        const closeId = `${labelId}-label-${uid}-close`;
+        const label = (0, import_shared.getLocatorValue)({
+          item,
+          locator: locator.label
+        });
+        return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: id }, /* @__PURE__ */ import_react.default.createElement(
+          import_label.default,
+          {
+            className: isLabelFocused === id ? "focus" : void 0,
+            onKeyDown: ({ key }) => {
+              if (key === import_shared.Keys.Backspace) {
+                onRemove(label || "", i);
+              }
+            },
+            role: "row",
+            spritemap,
+            tabIndex: -1,
+            withClose: false
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_label.default.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__ */ import_react.default.createElement(import_label.default.ItemAfter, { role: "gridcell" }, /* @__PURE__ */ import_react.default.createElement(
+            "button",
+            {
+              "aria-label": (0, import_shared.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__ */ import_react.default.createElement(
+              import_icon.default,
+              {
+                spritemap,
+                symbol: "times-small"
+              }
+            )
+          ))
+        ), inputName && /* @__PURE__ */ import_react.default.createElement(
+          "input",
+          {
+            name: inputName,
+            type: "hidden",
+            value: value2
+          }
+        ));
+      })
+    ), /* @__PURE__ */ import_react.default.createElement(import_form.ClayInput.GroupItem, { prepend: true }, /* @__PURE__ */ import_react.default.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 === import_shared.Keys.Backspace && !value) {
+            event.preventDefault();
+          }
+          if (key === import_shared.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 === import_shared.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
+      }
+    ))));
+  }
+);

package/lib/cjs/MultiSelect.js

@@ -0,0 +1,326 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var MultiSelect_exports = {};
+__export(MultiSelect_exports, {
+  MultiSelect: () => MultiSelect,
+  itemLabelFilter: () => itemLabelFilter
+});
+module.exports = __toCommonJS(MultiSelect_exports);
+var import_autocomplete = __toESM(require("@clayui/autocomplete"));
+var import_button = require("@clayui/button");
+var import_core = require("@clayui/core");
+var import_form = require("@clayui/form");
+var import_shared = require("@clayui/shared");
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_Labels = require("./Labels");
+const MultiSelect = import_react.default.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 = (0, import_react.useRef)(null);
+  const inputRef = (0, import_react.useRef)(null);
+  const lastChangesRef = (0, import_react.useRef)(null);
+  const [isFocused, setIsFocused] = (0, import_react.useState)(false);
+  const [items, setItems] = (0, import_shared.useControlledState)({
+    defaultName: "defaultItems",
+    defaultValue: defaultItems,
+    handleName: "onItemsChange",
+    name: "items",
+    onChange: onItemsChange,
+    value: externalItems
+  });
+  const [value, setValue] = (0, import_shared.useControlledState)({
+    defaultName: "defaultValue",
+    defaultValue,
+    handleName: "onChange",
+    name: "value",
+    onChange,
+    value: externalValue ?? inputValue
+  });
+  const [active, setActive] = (0, import_shared.useControlledState)({
+    defaultName: "defaultActive",
+    defaultValue: defaultActive,
+    handleName: "onActiveChange",
+    name: "active",
+    onChange: onActiveChange,
+    value: externalActive
+  });
+  const selectedKeys = (0, import_react.useMemo)(() => {
+    return items.map(
+      (item) => String(
+        (0, import_shared.getLocatorValue)({
+          item,
+          locator: locator.value
+        })
+      )
+    );
+  }, [items, locator.value]);
+  const inputElementRef = ref || inputRef;
+  const ariaDescriptionId = (0, import_shared.useId)();
+  const hasAsyncItems = !!onLoadMore || typeof loadingState === "number";
+  const Container = MenuRenderer ? import_shared.FocusScope : import_react.default.Fragment;
+  const containerProps = MenuRenderer ? { arrowKeysUpDown: false } : {};
+  (0, import_react.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.`
+      );
+    }
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (MenuRenderer && sourceItems) {
+      setActive(!!value && sourceItems.length !== 0);
+    }
+  }, [value, sourceItems]);
+  const memoizedChildren = (0, import_react.useCallback)(
+    (item) => {
+      const handleItemClick = (event) => {
+        event.preventDefault();
+        setActive(false);
+        if (!allowDuplicateValues && items.find((dropdownItem) => {
+          return (0, import_shared.getLocatorValue)({
+            item: dropdownItem,
+            locator: locator.value
+          }) === (0, import_shared.getLocatorValue)({
+            item,
+            locator: locator.value
+          });
+        })) {
+          return;
+        }
+        setItems([...items, item]);
+        setValue("");
+      };
+      if (children && typeof children === "function") {
+        const child = children(item);
+        return import_react.default.cloneElement(child, {
+          onClick: (event) => {
+            if (child.props.onClick) {
+              child.props.onClick(event);
+            }
+            if (event.defaultPrevented) {
+              return;
+            }
+            handleItemClick(event);
+          }
+        });
+      }
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_autocomplete.Item,
+        {
+          key: (0, import_shared.getLocatorValue)({
+            item,
+            locator: locator.value
+          }),
+          onClick: handleItemClick
+        },
+        (0, import_shared.getLocatorValue)({
+          item,
+          locator: locator.label
+        })
+      );
+    },
+    [children, locator, items, setItems, allowDuplicateValues]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(Container, { ...containerProps }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)(
+        "form-control form-control-tag-group input-group",
+        {
+          focus: isFocused && isValid,
+          [`form-control-tag-group-${size}`]: size
+        }
+      ),
+      ref: containerRef
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_autocomplete.Autocomplete,
+      {
+        ...otherProps,
+        UNSAFE_loadingShrink: true,
+        active: MenuRenderer ? false : active,
+        allowsCustomLabel: typeof locator.label === "function" || typeof locator.value === "function" ? false : allowsCustomLabel,
+        allowsCustomValue: true,
+        ariaDescriptionId,
+        as: import_Labels.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__ */ import_react.default.createElement(
+      import_autocomplete.default.DropDown,
+      {
+        active,
+        alignElementRef: containerRef,
+        alignmentByViewport,
+        onActiveChange: setActive
+      },
+      /* @__PURE__ */ import_react.default.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__ */ import_react.default.createElement(import_form.ClayInput.GroupItem, { shrink: true }, /* @__PURE__ */ import_react.default.createElement(
+      import_button.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__ */ import_react.default.createElement("div", { className: "sr-only" }, /* @__PURE__ */ import_react.default.createElement("span", { id: ariaDescriptionId }, hotkeysDescription ?? messages.hotkeys), /* @__PURE__ */ import_react.default.createElement("span", { "aria-live": "polite", "aria-relevant": "text" }, lastChangesRef.current ? (0, import_shared.sub)(
+      liveRegion ? liveRegion[lastChangesRef.current.action] : lastChangesRef.current.action === "added" ? messages.labelAdded : messages.labelRemoved,
+      [lastChangesRef.current.label]
+    ) : null))
+  )), active && displayKeyboardArrowsIndicator && /* @__PURE__ */ import_react.default.createElement(import_shared.ClayPortal, null, /* @__PURE__ */ import_react.default.createElement(
+    import_core.KeyboardArrowsIndicator,
+    {
+      anchorRef: containerRef,
+      direction: "vertical"
+    }
+  )));
+});
+function itemLabelFilter(items, _value, _locator = "label") {
+  return items;
+}