@clayui/multi-select - npm Package Compare versions

Comparing version 3.95.2 to 3.96.0

lib/index.d.ts

@@ -7,23 +7,9 @@ /**
 import React from 'react';
-declare type Item = {
-    [propName: string]: any;
-    /**
-     * Label to show.
-     */
-    label?: string;
-    /**
-     * Global unique id of the item list. Generated by the component.
-     */
-    key?: string;
-    /**
-     * Hidden value of the item.
-     */
-    value?: string;
+import type { ICollectionProps } from '@clayui/core';
+import type { Item, Locator } from './types';
+declare type Size = null | 'sm';
+declare type Messages = {
+    loading: string;
+    notFound: string;
 };
-declare type Locator = {
-    id?: string;
-    label: string;
-    value: string;
-};
-declare type Size = null | 'sm';
 interface IMenuRendererProps {
@@ -44,3 +30,3 @@ /**
 declare type MenuRenderer = (props: IMenuRendererProps) => JSX.Element;
-export interface IProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
+export interface IProps<T> extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'children'>, Omit<Partial<ICollectionProps<T, unknown>>, 'virtualize' | 'items'> {
     /**
@@ -53,2 +39,3 @@ * Whether MultiSelect allows an input value not corresponding to an item
      * Flag to align the Autocomplete within the viewport.
+     * @deprecated since v3.95.2 - it is no longer necessary...
      */
@@ -73,4 +60,9 @@ alignmentByViewport?: boolean;
     /**
+     * Direction the menu will render relative to the Autocomplete.
+     */
+    direction?: 'bottom' | 'top';
+    /**
      * Adds a component to replace the default component that renders
      * the content of the `<ClayDropDown />` component.
+     * @deprecated since v3.95.2
      */
@@ -102,2 +94,3 @@ menuRenderer?: MenuRenderer;
      * Flag to indicate if loading icon should be rendered
+     * @deprecated since v3.95.2 - use `loadingState` instead.
      */
@@ -112,3 +105,3 @@ isLoading?: boolean;
      */
-    items: Array<Item>;
+    items?: Array<Item>;
     /**
@@ -127,2 +120,6 @@ * The off-screen live region informs screen reader users the result of
     /**
+     * Messages for autocomplete.
+     */
+    messages?: Messages;
+    /**
      * Callback for when the clear all button is clicked
@@ -138,4 +135,9 @@ */
      */
-    onItemsChange: InternalDispatch<Array<Item>>;
+    onItemsChange?: InternalDispatch<Array<Item>>;
     /**
+     * Callback is called when more items need to be loaded when the scroll
+     * reaches the bottom.
+     */
+    onLoadMore?: () => Promise<any> | null;
+    /**
      * Determines the size of the Multi Select component.
@@ -147,3 +149,3 @@ */
      */
-    sourceItems?: Array<Item>;
+    sourceItems?: Array<Item> | null;
     /**
@@ -157,9 +159,17 @@ * Path to spritemap for clay icons
     value?: string;
+    /**
+     * The current state of Autocomplete current loading. Determines whether the
+     * loading indicator should be shown or not.
+     */
+    loadingState?: number;
 }
-declare const ClayMultiSelect: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * Utility used for filtering an array of items based off the locator which
  * is set to `label` by default.
+ * @deprecated since v3.95.2 - it is no longer necessary...
  */
-export declare const itemLabelFilter: (items: Array<Item>, value: string, locator?: string) => Item[];
-export default ClayMultiSelect;
+export declare const itemLabelFilter: (items: Array<Item>, _value: string, _locator?: string) => Item[];
+declare const _default: React.ForwardRefExoticComponent<IProps<unknown> & React.RefAttributes<HTMLDivElement>> & {
+    Item: React.ForwardRefExoticComponent<Pick<import("@clayui/autocomplete/src/Item").IProps, "match" | "key" | "id" | "active" | "color" | "value" | "hidden" | "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "tabIndex" | "disabled" | "href" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "spritemap" | "keyValue" | "textValue" | "data-index" | "innerRef" | "roleItem" | "symbolLeft" | "symbolRight"> & React.RefAttributes<HTMLLIElement>>;
+};
+export default _default;

lib/index.js

@@ -10,16 +10,8 @@ "use strict";
 
-var _autocomplete = _interopRequireDefault(require("@clayui/autocomplete"));
+var _autocomplete = require("@clayui/autocomplete");
 
 var _button = require("@clayui/button");
 
-var _dropDown = _interopRequireDefault(require("@clayui/drop-down"));
-
 var _form = require("@clayui/form");
 
-var _icon = _interopRequireDefault(require("@clayui/icon"));
-
-var _label2 = _interopRequireDefault(require("@clayui/label"));
-
-var _loadingIndicator = _interopRequireDefault(require("@clayui/loading-indicator"));
-
 var _shared = require("@clayui/shared");
@@ -29,8 +21,8 @@
 
-var _fuzzy = _interopRequireDefault(require("fuzzy"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _excluded = ["allowsCustomLabel", "alignmentByViewport", "clearAllTitle", "closeButtonAriaLabel", "defaultItems", "defaultValue", "disabled", "disabledClearAll", "hotkeysDescription", "inputName", "inputValue", "isLoading", "isValid", "items", "liveRegion", "locator", "menuRenderer", "onBlur", "onChange", "onClearAllButtonClick", "onFocus", "onItemsChange", "onKeyDown", "onPaste", "placeholder", "size", "sourceItems", "spritemap", "value"];
+var _Labels = require("./Labels");
 
+var _excluded = ["allowsCustomLabel", "alignmentByViewport", "children", "clearAllTitle", "closeButtonAriaLabel", "defaultItems", "defaultValue", "disabled", "disabledClearAll", "hotkeysDescription", "inputName", "inputValue", "isLoading", "isValid", "items", "liveRegion", "locator", "menuRenderer", "onChange", "onClearAllButtonClick", "onItemsChange", "placeholder", "size", "sourceItems", "spritemap", "value"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -44,4 +36,2 @@
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
@@ -55,2 +45,4 @@
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -72,104 +64,58 @@
 
-var DELIMITER_KEYS = ['Enter', ','];
-
-var MultiSelectMenuRenderer = function MultiSelectMenuRenderer(_ref) {
-  var locator = _ref.locator,
-      _ref$onItemClick = _ref.onItemClick,
-      onItemClick = _ref$onItemClick === void 0 ? function () {} : _ref$onItemClick,
-      sourceItems = _ref.sourceItems,
-      value = _ref.value;
-  return /*#__PURE__*/_react.default.createElement(_dropDown.default.ItemList, null, sourceItems.map(function (item) {
-    return /*#__PURE__*/_react.default.createElement(_autocomplete.default.Item, {
-      key: item[locator.value],
-      match: value,
-      onClick: function onClick() {
-        return onItemClick(item);
-      },
-      value: item[locator.label]
-    });
-  }));
-};
-
-var KeysNavigation = [_shared.Keys.Left, _shared.Keys.Right, _shared.Keys.Up, _shared.Keys.Down];
-var KeysSides = [_shared.Keys.Left, _shared.Keys.Right];
-var counterUid = 0;
-
-var ClayMultiSelect = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
-  var _ref2$allowsCustomLab = _ref2.allowsCustomLabel,
-      allowsCustomLabel = _ref2$allowsCustomLab === void 0 ? true : _ref2$allowsCustomLab,
-      _ref2$alignmentByView = _ref2.alignmentByViewport,
-      alignmentByViewport = _ref2$alignmentByView === void 0 ? false : _ref2$alignmentByView,
-      _ref2$clearAllTitle = _ref2.clearAllTitle,
-      clearAllTitle = _ref2$clearAllTitle === void 0 ? 'Clear All' : _ref2$clearAllTitle,
-      _ref2$closeButtonAria = _ref2.closeButtonAriaLabel,
-      closeButtonAriaLabel = _ref2$closeButtonAria === void 0 ? 'Remove {0}' : _ref2$closeButtonAria,
-      _ref2$defaultItems = _ref2.defaultItems,
-      defaultItems = _ref2$defaultItems === void 0 ? [] : _ref2$defaultItems,
-      _ref2$defaultValue = _ref2.defaultValue,
-      defaultValue = _ref2$defaultValue === void 0 ? '' : _ref2$defaultValue,
-      disabled = _ref2.disabled,
-      disabledClearAll = _ref2.disabledClearAll,
-      _ref2$hotkeysDescript = _ref2.hotkeysDescription,
-      hotkeysDescription = _ref2$hotkeysDescript === void 0 ? 'Press backspace to delete the current row.' : _ref2$hotkeysDescript,
-      inputName = _ref2.inputName,
-      inputValue = _ref2.inputValue,
-      _ref2$isLoading = _ref2.isLoading,
-      isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading,
-      _ref2$isValid = _ref2.isValid,
-      isValid = _ref2$isValid === void 0 ? true : _ref2$isValid,
-      items = _ref2.items,
-      _ref2$liveRegion = _ref2.liveRegion,
-      liveRegion = _ref2$liveRegion === void 0 ? {
+var ClayMultiSelect = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var _ref$allowsCustomLabe = _ref.allowsCustomLabel,
+      allowsCustomLabel = _ref$allowsCustomLabe === void 0 ? true : _ref$allowsCustomLabe,
+      _ = _ref.alignmentByViewport,
+      children = _ref.children,
+      _ref$clearAllTitle = _ref.clearAllTitle,
+      clearAllTitle = _ref$clearAllTitle === void 0 ? 'Clear All' : _ref$clearAllTitle,
+      _ref$closeButtonAriaL = _ref.closeButtonAriaLabel,
+      closeButtonAriaLabel = _ref$closeButtonAriaL === void 0 ? 'Remove {0}' : _ref$closeButtonAriaL,
+      _ref$defaultItems = _ref.defaultItems,
+      defaultItems = _ref$defaultItems === void 0 ? [] : _ref$defaultItems,
+      _ref$defaultValue = _ref.defaultValue,
+      defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
+      disabled = _ref.disabled,
+      disabledClearAll = _ref.disabledClearAll,
+      _ref$hotkeysDescripti = _ref.hotkeysDescription,
+      hotkeysDescription = _ref$hotkeysDescripti === void 0 ? 'Press backspace to delete the current row.' : _ref$hotkeysDescripti,
+      inputName = _ref.inputName,
+      inputValue = _ref.inputValue,
+      _i = _ref.isLoading,
+      _ref$isValid = _ref.isValid,
+      isValid = _ref$isValid === void 0 ? true : _ref$isValid,
+      externalItems = _ref.items,
+      _ref$liveRegion = _ref.liveRegion,
+      liveRegion = _ref$liveRegion === void 0 ? {
     added: 'Label {0} added to the list',
     removed: 'Label {0} removed to the list'
-  } : _ref2$liveRegion,
-      _ref2$locator = _ref2.locator,
-      locator = _ref2$locator === void 0 ? {
+  } : _ref$liveRegion,
+      _ref$locator = _ref.locator,
+      locator = _ref$locator === void 0 ? {
     id: 'key',
     label: 'label',
     value: 'value'
-  } : _ref2$locator,
-      _ref2$menuRenderer = _ref2.menuRenderer,
-      MenuRenderer = _ref2$menuRenderer === void 0 ? MultiSelectMenuRenderer : _ref2$menuRenderer,
-      _ref2$onBlur = _ref2.onBlur,
-      _onBlur = _ref2$onBlur === void 0 ? _shared.noop : _ref2$onBlur,
-      onChange = _ref2.onChange,
-      onClearAllButtonClick = _ref2.onClearAllButtonClick,
-      _ref2$onFocus = _ref2.onFocus,
-      _onFocus = _ref2$onFocus === void 0 ? _shared.noop : _ref2$onFocus,
-      onItemsChange = _ref2.onItemsChange,
-      _ref2$onKeyDown = _ref2.onKeyDown,
-      onKeyDown = _ref2$onKeyDown === void 0 ? _shared.noop : _ref2$onKeyDown,
-      _ref2$onPaste = _ref2.onPaste,
-      onPaste = _ref2$onPaste === void 0 ? _shared.noop : _ref2$onPaste,
-      placeholder = _ref2.placeholder,
-      size = _ref2.size,
-      _ref2$sourceItems = _ref2.sourceItems,
-      sourceItems = _ref2$sourceItems === void 0 ? [] : _ref2$sourceItems,
-      spritemap = _ref2.spritemap,
-      value = _ref2.value,
-      otherProps = _objectWithoutProperties(_ref2, _excluded);
+  } : _ref$locator,
+      _m = _ref.menuRenderer,
+      onChange = _ref.onChange,
+      onClearAllButtonClick = _ref.onClearAllButtonClick,
+      onItemsChange = _ref.onItemsChange,
+      placeholder = _ref.placeholder,
+      size = _ref.size,
+      _ref$sourceItems = _ref.sourceItems,
+      sourceItems = _ref$sourceItems === void 0 ? null : _ref$sourceItems,
+      spritemap = _ref.spritemap,
+      externalValue = _ref.value,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
 
   var containerRef = (0, _react.useRef)(null);
   var inputRef = (0, _react.useRef)(null);
-  var lastItemRef = (0, _react.useRef)(null);
   var lastChangesRef = (0, _react.useRef)(null);
-  var labelsRef = (0, _react.useRef)(null);
 
-  var _useState = (0, _react.useState)(null),
+  var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
-      lastFocusedItem = _useState2[0],
-      setLastFocusedItem = _useState2[1];
+      isFocused = _useState2[0],
+      setIsFocused = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      active = _useState4[0],
-      setActive = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isFocused = _useState6[0],
-      setIsFocused = _useState6[1];
-
-  var _useInternalState = (0, _shared.useInternalState)({
+  var _useControlledState = (0, _shared.useControlledState)({
     defaultName: 'defaultItems',
@@ -180,9 +126,9 @@ defaultValue: defaultItems,
     onChange: onItemsChange,
-    value: items
+    value: externalItems
   }),
-      _useInternalState2 = _slicedToArray(_useInternalState, 2),
-      internalItems = _useInternalState2[0],
-      setItems = _useInternalState2[1];
+      _useControlledState2 = _slicedToArray(_useControlledState, 2),
+      items = _useControlledState2[0],
+      setItems = _useControlledState2[1];
 
-  var _useInternalState3 = (0, _shared.useInternalState)({
+  var _useControlledState3 = (0, _shared.useControlledState)({
     defaultName: 'defaultValue',
@@ -193,114 +139,11 @@ defaultValue: defaultValue,
     onChange: onChange,
-    value: value !== null && value !== void 0 ? value : inputValue
+    value: externalValue !== null && externalValue !== void 0 ? externalValue : inputValue
   }),
-      _useInternalState4 = _slicedToArray(_useInternalState3, 2),
-      internalValue = _useInternalState4[0],
-      setValue = _useInternalState4[1];
+      _useControlledState4 = _slicedToArray(_useControlledState3, 2),
+      value = _useControlledState4[0],
+      setValue = _useControlledState4[1];
 
-  (0, _react.useEffect)(function () {
-    if (isFocused) {
-      setActive(!!internalValue && sourceItems.length !== 0);
-    }
-  }, [internalValue, isFocused, sourceItems]);
   var inputElementRef = ref || inputRef;
-
-  var setNewValue = function setNewValue(newVal) {
-    setItems([].concat(_toConsumableArray(internalItems), [newVal]));
-    setValue('');
-  };
-
-  var getSourceItemByLabel = function getSourceItemByLabel(label) {
-    return sourceItems.find(function (item) {
-      return item[locator.label] === label;
-    });
-  };
-
-  var getNewItem = function getNewItem(value) {
-    var _ref3;
-
-    counterUid++;
-    return getSourceItemByLabel(value) || (_ref3 = {}, _defineProperty(_ref3, locator.label, value), _defineProperty(_ref3, locator.value, value), _defineProperty(_ref3, "key", "key_".concat(counterUid)), _ref3);
-  };
-
-  var handleKeyDown = function handleKeyDown(event) {
-    onKeyDown(event);
-
-    if (event.defaultPrevented) {
-      return;
-    }
-
-    var key = event.key;
-
-    if (key === _shared.Keys.Backspace && !internalValue) {
-      event.preventDefault();
-    }
-
-    if (allowsCustomLabel && internalValue.trim() && DELIMITER_KEYS.includes(key)) {
-      event.preventDefault();
-      lastChangesRef.current = {
-        action: 'added',
-        label: internalValue
-      };
-      setNewValue(getNewItem(internalValue));
-    } else if (!internalValue && key === _shared.Keys.Backspace && inputElementRef.current && lastItemRef.current) {
-      inputElementRef.current.blur();
-      lastItemRef.current.focus();
-    }
-  };
-
-  var handlePaste = function handlePaste(event) {
-    onPaste(event);
-
-    if (event.defaultPrevented) {
-      return;
-    }
-
-    var pastedText = event.clipboardData.getData('Text');
-    var pastedItems = pastedText.split(',').map(function (itemLabel) {
-      return getNewItem(itemLabel.trim());
-    }).filter(Boolean);
-
-    if (allowsCustomLabel && pastedItems.length > 0) {
-      event.preventDefault();
-      setItems([].concat(_toConsumableArray(internalItems), _toConsumableArray(pastedItems)));
-    }
-  };
-
-  var onRemove = (0, _react.useCallback)(function (label, index) {
-    if (labelsRef.current) {
-      var focusableElements = Array.from(labelsRef.current.querySelectorAll('button'));
-      var activeElement = document.activeElement.tagName === 'SPAN' ? document.activeElement.querySelector('button') : document.activeElement;
-      var position = focusableElements.indexOf(activeElement);
-      var closeElement = focusableElements[focusableElements.length - 1 > position ? position + 1 : position - 1];
-
-      if (closeElement) {
-        closeElement.focus();
-        setLastFocusedItem(closeElement.getAttribute('id'));
-      } else {
-        var _inputElementRef$curr;
-
-        (_inputElementRef$curr = inputElementRef.current) === null || _inputElementRef$curr === void 0 ? void 0 : _inputElementRef$curr.focus();
-        setLastFocusedItem(null);
-      }
-    }
-
-    lastChangesRef.current = {
-      action: 'removed',
-      label: label
-    };
-    setItems(internalItems.filter(function (_, itemIndex) {
-      return itemIndex !== index;
-    }));
-  }, [internalItems]);
-
-  var _useState7 = (0, _react.useState)(null),
-      _useState8 = _slicedToArray(_useState7, 2),
-      isLabelFocused = _useState8[0],
-      setIsLabelFocused = _useState8[1];
-
-  var labelId = (0, _shared.useId)();
   var ariaDescriptionId = (0, _shared.useId)();
-  return /*#__PURE__*/_react.default.createElement(_shared.FocusScope, {
-    arrowKeysUpDown: false
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('form-control form-control-tag-group input-group', _defineProperty({
@@ -310,140 +153,44 @@ focus: isFocused && isValid
     ref: containerRef
-  }, /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupItem, null, /*#__PURE__*/_react.default.createElement(_form.ClayInput.Group, null, /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupItem, {
-    "aria-labelledby": otherProps['aria-labelledby'],
-    className: "d-contents",
-    onFocus: function onFocus(event) {
-      return setLastFocusedItem(event.target.getAttribute('id'));
-    },
-    onKeyDown: function onKeyDown(event) {
-      if (KeysNavigation.includes(event.key)) {
-        // Query labels and buttons to exclude the label that are
-        // focusable the navigation order depends on which orientation
-        // the navigation is happen.
-        // - Left and Right. Query all elements.
-        // - Up and Down. Query for elements of the same type as the
-        //   last focused element.
-        var focusableElements = Array.from(event.currentTarget.querySelectorAll(KeysSides.includes(event.key) ? '[role=gridcell][tabindex], button' : lastFocusedItem !== null && lastFocusedItem !== void 0 && lastFocusedItem.includes('span') ? '[role=gridcell][tabindex]' : 'button'));
-        var position = focusableElements.indexOf(document.activeElement);
-        var key = KeysSides.includes(event.key) ? _shared.Keys.Left : _shared.Keys.Up;
-        var label = focusableElements[event.key === key ? position - 1 : position + 1];
-
-        if (label) {
-          setLastFocusedItem(label.getAttribute('id'));
-          label.focus();
+  }, /*#__PURE__*/_react.default.createElement(_autocomplete.Autocomplete, _extends({}, otherProps, {
+    allowsCustomLabel: allowsCustomLabel,
+    ariaDescriptionId: ariaDescriptionId,
+    as: _Labels.Labels,
+    closeButtonAriaLabel: closeButtonAriaLabel,
+    containerElementRef: containerRef,
+    filterKey: locator.label,
+    inputName: inputName,
+    items: sourceItems,
+    labels: items,
+    lastChangesRef: lastChangesRef,
+    locator: locator,
+    menuTrigger: "focus",
+    onChange: setValue,
+    onFocusChange: setIsFocused,
+    onItemsChange: function onItemsChange() {},
+    onLabelsChange: setItems,
+    placeholder: placeholder,
+    ref: inputElementRef,
+    spritemap: spritemap,
+    value: value
+  }), function (item) {
+    if (children && typeof children === 'function') {
+      return /*#__PURE__*/_react.default.cloneElement(children(item), {
+        onClick: function onClick(event) {
+          event.preventDefault();
+          setItems([].concat(_toConsumableArray(items), [item]));
+          setValue('');
         }
-      }
+      });
+    }
 
-      if (event.key === _shared.Keys.Home || event.key === _shared.Keys.End) {
-        var isLabel = lastFocusedItem.includes('span');
-
-        if (isLabel && event.key === _shared.Keys.Home || !isLabel && event.key === _shared.Keys.End) {
-          return;
-        }
-
-        var _label = event.currentTarget.querySelector("[id=".concat(lastFocusedItem === null || lastFocusedItem === void 0 ? void 0 : lastFocusedItem.replace(isLabel ? 'span' : 'close', event.key === _shared.Keys.Home ? 'span' : 'close'), "]"));
-
-        if (_label) {
-          setLastFocusedItem(_label.getAttribute('id'));
-
-          _label.focus();
-        }
+    return /*#__PURE__*/_react.default.createElement(_autocomplete.Item, {
+      key: item[locator.value],
+      onClick: function onClick(event) {
+        event.preventDefault();
+        setItems([].concat(_toConsumableArray(items), [item]));
+        setValue('');
       }
-    },
-    prepend: true,
-    ref: function ref(_ref6) {
-      labelsRef.current = _ref6;
-    },
-    role: "grid",
+    }, item[locator.label]);
+  }), !disabled && !disabledClearAll && (value || items.length > 0) && /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupItem, {
     shrink: true
-  }, internalItems.map(function (item, i) {
-    var _item;
-
-    var uid = (_item = item[locator.id]) !== null && _item !== void 0 ? _item : item[locator.value];
-    var id = "".concat(labelId, "-label-").concat(uid, "-span");
-    var closeId = "".concat(labelId, "-label-").concat(uid, "-close");
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-      key: id
-    }, /*#__PURE__*/_react.default.createElement(_label2.default, {
-      className: isLabelFocused === id ? 'focus' : undefined,
-      onKeyDown: function onKeyDown(_ref4) {
-        var key = _ref4.key;
-
-        if (key === _shared.Keys.Backspace) {
-          onRemove(item[locator.label], i);
-        }
-      },
-      role: "row",
-      spritemap: spritemap,
-      tabIndex: -1,
-      withClose: false
-    }, /*#__PURE__*/_react.default.createElement(_label2.default.ItemExpand, {
-      "aria-describedby": ariaDescriptionId,
-      id: id,
-      onBlur: function onBlur() {
-        return setIsLabelFocused(null);
-      },
-      onFocus: function onFocus() {
-        return setIsLabelFocused(id);
-      },
-      role: "gridcell",
-      style: {
-        outline: 'none'
-      },
-      tabIndex: lastFocusedItem === null && i === 0 || lastFocusedItem === id ? 0 : -1
-    }, item[locator.label]), /*#__PURE__*/_react.default.createElement(_label2.default.ItemAfter, {
-      role: "gridcell"
-    }, /*#__PURE__*/_react.default.createElement("button", {
-      "aria-label": (0, _shared.sub)(closeButtonAriaLabel, [item[locator.label]]),
-      className: "close",
-      disabled: disabled,
-      id: closeId,
-      onClick: function onClick() {
-        return onRemove(item[locator.label], i);
-      },
-      ref: function ref(_ref5) {
-        if (i === internalItems.length - 1) {
-          lastItemRef.current = _ref5;
-        }
-      },
-      tabIndex: lastFocusedItem === closeId ? 0 : -1,
-      type: "button"
-    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-      spritemap: spritemap,
-      symbol: "times-small"
-    })))), inputName && /*#__PURE__*/_react.default.createElement("input", {
-      name: inputName,
-      type: "hidden",
-      value: item[locator.value]
-    }));
-  })), /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupItem, {
-    prepend: true
-  }, /*#__PURE__*/_react.default.createElement("input", _extends({}, otherProps, {
-    className: "form-control-inset",
-    disabled: disabled,
-    onBlur: function onBlur(event) {
-      _onBlur(event);
-
-      setIsFocused(false);
-    },
-    onChange: function onChange(event) {
-      var value = event.target.value;
-      setValue(allowsCustomLabel ? value.replace(',', '') : value);
-    },
-    onFocus: function onFocus(event) {
-      _onFocus(event);
-
-      setIsFocused(true);
-    },
-    onKeyDown: handleKeyDown,
-    onPaste: handlePaste,
-    placeholder: internalItems.length ? undefined : placeholder,
-    ref: inputElementRef,
-    type: "text",
-    value: internalValue
-  }))))), isLoading && /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupItem, {
-    shrink: true
-  }, /*#__PURE__*/_react.default.createElement(_loadingIndicator.default, {
-    small: true
-  })), !disabled && !disabledClearAll && (internalValue || internalItems.length > 0) && /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupItem, {
-    shrink: true
   }, /*#__PURE__*/_react.default.createElement(_button.ClayButtonWithIcon, {
@@ -477,20 +224,3 @@ "aria-label": clearAllTitle,
     "aria-relevant": "text"
-  }, lastChangesRef.current ? (0, _shared.sub)(liveRegion[lastChangesRef.current.action], [lastChangesRef.current.label]) : null)), sourceItems.length > 0 && /*#__PURE__*/_react.default.createElement(_autocomplete.default.DropDown, {
-    active: active,
-    alignElementRef: containerRef,
-    alignmentByViewport: alignmentByViewport,
-    onSetActive: setActive
-  }, /*#__PURE__*/_react.default.createElement(MenuRenderer, {
-    inputValue: internalValue,
-    locator: locator,
-    onItemClick: function onItemClick(item) {
-      setNewValue(item);
-
-      if (inputElementRef.current) {
-        inputElementRef.current.focus();
-      }
-    },
-    sourceItems: sourceItems,
-    value: internalValue
-  }))));
+  }, lastChangesRef.current ? (0, _shared.sub)(liveRegion[lastChangesRef.current.action], [lastChangesRef.current.label]) : null)));
 });
@@ -502,13 +232,17 @@
  * is set to `label` by default.
+ * @deprecated since v3.95.2 - it is no longer necessary...
  */
 
-var itemLabelFilter = function itemLabelFilter(items, value) {
-  var locator = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'label';
-  return items.filter(function (item) {
-    return _fuzzy.default.match(value, item[locator]);
-  });
+var itemLabelFilter = function itemLabelFilter(items, _value) {
+  var _locator = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'label';
+
+  return items;
 };
 
 exports.itemLabelFilter = itemLabelFilter;
-var _default = ClayMultiSelect;
+
+var _default = Object.assign(ClayMultiSelect, {
+  Item: _autocomplete.Item
+});
+
 exports.default = _default;

package.json

 {
 	"name": "@clayui/multi-select",
-	"version": "3.95.2",
+	"version": "3.96.0",
 	"description": "ClayMultiSelect component",
@@ -29,10 +29,10 @@ "license": "BSD-3-Clause",
 	"dependencies": {
-		"@clayui/autocomplete": "^3.95.2",
+		"@clayui/autocomplete": "^3.96.0",
 		"@clayui/button": "^3.92.0",
-		"@clayui/drop-down": "^3.95.2",
-		"@clayui/form": "^3.95.2",
+		"@clayui/drop-down": "^3.96.0",
+		"@clayui/form": "^3.96.0",
 		"@clayui/icon": "^3.56.0",
 		"@clayui/label": "^3.88.0",
 		"@clayui/loading-indicator": "^3.60.0",
-		"@clayui/shared": "^3.95.2",
+		"@clayui/shared": "^3.96.0",
 		"classnames": "^2.2.6",
@@ -49,3 +49,3 @@ "fuzzy": "^0.1.3"
 	],
-	"gitHead": "68ebdcf79dab1ba0af5846b23f64fb8776156df7"
+	"gitHead": "4b068cc052987f0a95dc6ca3e5f985b5a52236c6"
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

84988

increased by6.2%

Number of package files

15

increased by114.29%

Lines of code

1775

increased by3.68%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@clayui/autocomplete@^3.96.0

• Updated@clayui/drop-down@^3.96.0

• Updated@clayui/form@^3.96.0

• Updated@clayui/shared@^3.96.0