@clayui/multi-select - npm Package Compare versions

Comparing version 3.96.1 to 3.97.0

lib/index.d.ts

@@ -10,6 +10,2 @@ /**
 declare type Size = null | 'sm';
-declare type Messages = {
-    loading: string;
-    notFound: string;
-};
 interface IMenuRendererProps {
@@ -32,2 +28,6 @@ /**
     /**
+     * Flag to indicate if menu is showing or not.
+     */
+    active?: boolean;
+    /**
      * Whether MultiSelect allows an input value not corresponding to an item
@@ -51,2 +51,6 @@ * to be added.
     /**
+     * The initial value of the active state (uncontrolled).
+     */
+    defaultActive?: boolean;
+    /**
      * Property to set the default value (uncontrolled).
@@ -80,2 +84,3 @@ */
      * to handle internationalization.
+     * @deprecated since v3.96.1 - use `messages` instead.
      */
@@ -108,2 +113,3 @@ hotkeysDescription?: string;
      * removing or adding a label.
+     * @deprecated since v3.96.1 - use `messages` instead.
      */
@@ -121,4 +127,14 @@ liveRegion?: {
      */
-    messages?: Messages;
+    messages?: {
+        loading: string;
+        notFound: string;
+        hotkeys: string;
+        labelAdded: string;
+        labelRemoved: string;
+    };
     /**
+     * Callback for when the active state changes (controlled).
+     */
+    onActiveChange?: InternalDispatch<boolean>;
+    /**
      * Callback for when the clear all button is clicked
@@ -125,0 +141,0 @@ */

lib/index.js

@@ -10,3 +10,3 @@ "use strict";
 
-var _autocomplete = require("@clayui/autocomplete");
+var _autocomplete = _interopRequireWildcard(require("@clayui/autocomplete"));
 
@@ -25,4 +25,6 @@ var _button = require("@clayui/button");
 
-var _excluded = ["allowsCustomLabel", "alignmentByViewport", "children", "clearAllTitle", "closeButtonAriaLabel", "defaultItems", "defaultValue", "disabled", "disabledClearAll", "hotkeysDescription", "inputName", "inputValue", "isLoading", "isValid", "items", "liveRegion", "locator", "loadingState", "menuRenderer", "messages", "onChange", "onClearAllButtonClick", "onItemsChange", "onLoadMore", "placeholder", "size", "sourceItems", "spritemap", "value"];
+var _excluded = ["active", "allowsCustomLabel", "alignmentByViewport", "children", "clearAllTitle", "closeButtonAriaLabel", "defaultActive", "defaultItems", "defaultValue", "disabled", "disabledClearAll", "hotkeysDescription", "inputName", "inputValue", "isLoading", "isValid", "items", "liveRegion", "locator", "loadingState", "menuRenderer", "messages", "onActiveChange", "onChange", "onClearAllButtonClick", "onItemsChange", "onLoadMore", "placeholder", "size", "sourceItems", "spritemap", "value"];
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 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); }
@@ -32,4 +34,2 @@
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -64,5 +64,6 @@
 var ClayMultiSelect = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var _ref$allowsCustomLabe = _ref.allowsCustomLabel,
+  var externalActive = _ref.active,
+      _ref$allowsCustomLabe = _ref.allowsCustomLabel,
       allowsCustomLabel = _ref$allowsCustomLabe === void 0 ? true : _ref$allowsCustomLabe,
-      _ = _ref.alignmentByViewport,
+      alignmentByViewport = _ref.alignmentByViewport,
       children = _ref.children,
@@ -73,2 +74,3 @@ _ref$clearAllTitle = _ref.clearAllTitle,
       closeButtonAriaLabel = _ref$closeButtonAriaL === void 0 ? 'Remove {0}' : _ref$closeButtonAriaL,
+      defaultActive = _ref.defaultActive,
       _ref$defaultItems = _ref.defaultItems,
@@ -80,4 +82,3 @@ defaultItems = _ref$defaultItems === void 0 ? [] : _ref$defaultItems,
       disabledClearAll = _ref.disabledClearAll,
-      _ref$hotkeysDescripti = _ref.hotkeysDescription,
-      hotkeysDescription = _ref$hotkeysDescripti === void 0 ? 'Press backspace to delete the current row.' : _ref$hotkeysDescripti,
+      hotkeysDescription = _ref.hotkeysDescription,
       inputName = _ref.inputName,
@@ -89,7 +90,3 @@ inputValue = _ref.inputValue,
       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'
-  } : _ref$liveRegion,
+      liveRegion = _ref.liveRegion,
       _ref$locator = _ref.locator,
@@ -102,8 +99,12 @@ locator = _ref$locator === void 0 ? {
       loadingState = _ref.loadingState,
-      _m = _ref.menuRenderer,
+      MenuRenderer = _ref.menuRenderer,
       _ref$messages = _ref.messages,
       messages = _ref$messages === void 0 ? {
+    hotkeys: 'Press backspace to delete the current row.',
+    labelAdded: 'Label {0} added to the list',
+    labelRemoved: 'Label {0} removed to the list',
     loading: 'Loading...',
     notFound: 'No results found'
   } : _ref$messages,
+      onActiveChange = _ref.onActiveChange,
       onChange = _ref.onChange,
@@ -154,6 +155,35 @@ onClearAllButtonClick = _ref.onClearAllButtonClick,
 
+  var _useControlledState5 = (0, _shared.useControlledState)({
+    defaultName: 'defaultActive',
+    defaultValue: defaultActive,
+    handleName: 'onActiveChange',
+    name: 'active',
+    onChange: onActiveChange,
+    value: externalActive
+  }),
+      _useControlledState6 = _slicedToArray(_useControlledState5, 2),
+      active = _useControlledState6[0],
+      setActive = _useControlledState6[1];
+
   var inputElementRef = ref || inputRef;
   var ariaDescriptionId = (0, _shared.useId)();
   var hasAsyncItems = !!onLoadMore || typeof loadingState === 'number';
-  return /*#__PURE__*/_react.default.createElement("div", {
+  var Container = MenuRenderer ? _shared.FocusScope : _react.default.Fragment;
+  var containerProps = MenuRenderer ? {
+    arrowKeysUpDown: false
+  } : {}; // Throws the warning only when the component is mounted and avoids
+  // throwing it every time a rerender happens.
+
+  (0, _react.useEffect)(function () {
+    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.");
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    // Backward compatibility with the `menuRenderer` API.
+    if (MenuRenderer && sourceItems) {
+      setActive(!!value && sourceItems.length !== 0);
+    }
+  }, [value]);
+  return /*#__PURE__*/_react.default.createElement(Container, containerProps, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('form-control form-control-tag-group input-group', _defineProperty({
@@ -164,2 +194,3 @@ focus: isFocused && isValid
   }, /*#__PURE__*/_react.default.createElement(_autocomplete.Autocomplete, _extends({}, otherProps, {
+    active: MenuRenderer ? false : active,
     allowsCustomLabel: allowsCustomLabel,
@@ -179,3 +210,7 @@ ariaDescriptionId: ariaDescriptionId,
     messages: messages,
+    onActiveChange: MenuRenderer ? function () {} : setActive,
     onChange: setValue,
+    onFocus: MenuRenderer && sourceItems ? function () {
+      return setActive(!!value && sourceItems.length !== 0);
+    } : undefined,
     onFocusChange: setIsFocused,
@@ -190,5 +225,15 @@ onItemsChange: hasAsyncItems ? function () {} : undefined,
     if (children && typeof children === 'function') {
-      return /*#__PURE__*/_react.default.cloneElement(children(item), {
+      var child = children(item);
+      return /*#__PURE__*/_react.default.cloneElement(child, {
         onClick: function onClick(event) {
+          if (child.props.onClick) {
+            child.props.onClick(event);
+          }
+
+          if (event.defaultPrevented) {
+            return;
+          }
+
           event.preventDefault();
+          setActive(false);
           setItems([].concat(_toConsumableArray(items), [item]));
@@ -204,2 +249,3 @@ setValue('');
         event.preventDefault();
+        setActive(false);
         setItems([].concat(_toConsumableArray(items), [item]));
@@ -209,3 +255,21 @@ setValue('');
     }, item[locator.label]);
-  }), !disabled && !disabledClearAll && (value || items.length > 0) && /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupItem, {
+  }), sourceItems && MenuRenderer && sourceItems.length > 0 && /*#__PURE__*/_react.default.createElement(_autocomplete.default.DropDown, {
+    active: active,
+    alignElementRef: containerRef,
+    alignmentByViewport: alignmentByViewport,
+    onActiveChange: setActive
+  }, /*#__PURE__*/_react.default.createElement(MenuRenderer, {
+    inputValue: value,
+    locator: locator,
+    onItemClick: function onItemClick(item) {
+      setItems([].concat(_toConsumableArray(items), [item]));
+      setValue('');
+
+      if (inputElementRef.current) {
+        inputElementRef.current.focus();
+      }
+    },
+    sourceItems: sourceItems,
+    value: value
+  })), !disabled && !disabledClearAll && (value || items.length > 0) && /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupItem, {
     shrink: true
@@ -237,6 +301,6 @@ }, /*#__PURE__*/_react.default.createElement(_button.ClayButtonWithIcon, {
     id: ariaDescriptionId
-  }, hotkeysDescription), /*#__PURE__*/_react.default.createElement("span", {
+  }, hotkeysDescription !== null && hotkeysDescription !== void 0 ? hotkeysDescription : messages.hotkeys), /*#__PURE__*/_react.default.createElement("span", {
     "aria-live": "polite",
     "aria-relevant": "text"
-  }, lastChangesRef.current ? (0, _shared.sub)(liveRegion[lastChangesRef.current.action], [lastChangesRef.current.label]) : null)));
+  }, lastChangesRef.current ? (0, _shared.sub)(liveRegion ? liveRegion[lastChangesRef.current.action] : lastChangesRef.current.action === 'added' ? messages.labelAdded : messages.labelRemoved, [lastChangesRef.current.label]) : null))));
 });
@@ -243,0 +307,0 @@

package.json

 {
 	"name": "@clayui/multi-select",
-	"version": "3.96.1",
+	"version": "3.97.0",
 	"description": "ClayMultiSelect component",
@@ -29,5 +29,5 @@ "license": "BSD-3-Clause",
 	"dependencies": {
-		"@clayui/autocomplete": "^3.96.1",
+		"@clayui/autocomplete": "^3.97.0",
 		"@clayui/button": "^3.92.0",
-		"@clayui/drop-down": "^3.96.0",
+		"@clayui/drop-down": "^3.97.0",
 		"@clayui/form": "^3.96.0",
@@ -49,3 +49,3 @@ "@clayui/icon": "^3.56.0",
 	],
-	"gitHead": "b27cb241f775dbc407f802cbe45b40010ff92701"
+	"gitHead": "1c8dda942a4fbb3d2bb624e76e73e97f9c9c543d"
 }

No alert changes

Improved metrics

Total package byte prevSize

92298

increased by7.6%

Lines of code

1981

increased by10.49%

Dependency changes

• Updated@clayui/autocomplete@^3.97.0

• Updated@clayui/drop-down@^3.97.0