@carbon/react 1.60.1 → 1.60.3

package/es/components/ComboBox/ComboBox.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import cx from 'classnames';
 import { useCombobox } from 'downshift';
 import PropTypes from 'prop-types';
-import React__default, { forwardRef, useEffect, useContext, useRef, useState } from 'react';
+import React__default, { forwardRef, useEffect, useContext, useRef, useState, useMemo } from 'react';
 import '../Text/index.js';
 import { WarningFilled, WarningAltFilled, Checkmark } from '@carbon/icons-react';
 import ListBox from '../ListBox/index.js';
@@ -198,13 +198,19 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     } = changes;
     switch (type) {
       case InputBlur:
-        if (state.inputValue && highlightedIndex == '-1' && !allowCustomValue) {
+        if (state.inputValue && highlightedIndex == '-1' && changes.selectedItem) {
+          return {
+            ...changes,
+            inputValue: itemToString(changes.selectedItem)
+          };
+        } else if (state.inputValue && highlightedIndex == '-1' && !allowCustomValue && !changes.selectedItem) {
           return {
             ...changes,
             inputValue: ''
           };
+        } else {
+          return changes;
         }
-        return changes;
       case InputKeyDownEnter:
         if (allowCustomValue) {
           setInputValue(inputValue);
@@ -315,7 +321,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     setHighlightedIndex
   } = useCombobox({
     ...downshiftProps,
-    items,
+    items: filterItems(items, itemToString, inputValue),
     inputValue: inputValue,
     itemToString: item => {
       return itemToString(item);
@@ -376,6 +382,10 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   // when both the message is supplied *and* when the component is in
   // the matching state (invalid, warn, etc).
   const ariaDescribedBy = invalid && invalidText && invalidTextId || warn && warnText && warnTextId || helperText && !isFluid && helperTextId || undefined;
+  const menuProps = useMemo(() => getMenuProps({
+    'aria-label': deprecatedAriaLabel || ariaLabel,
+    ref: autoAlign ? refs.setFloating : null
+  }), [autoAlign, deprecatedAriaLabel, ariaLabel]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, titleText && /*#__PURE__*/React__default.createElement(Text, _extends({
@@ -393,7 +403,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     light: light,
     size: size,
     warn: warn,
-    ref: refs.setReference,
+    ref: autoAlign ? refs.setReference : null,
     warnText: warnText,
     warnTextId: warnTextId
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -406,7 +416,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-haspopup": "listbox",
     title: textInput?.current?.value
   }, getInputProps({
-    'aria-controls': isOpen ? undefined : getMenuProps().id,
+    'aria-controls': isOpen ? undefined : menuProps.id,
     placeholder,
     ref: {
       ...mergeRefs(textInput, ref)
@@ -418,7 +428,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
       if (match(event, Enter) && (!inputValue || allowCustomValue)) {
         toggleMenu();
         if (highlightedIndex !== -1) {
-          selectItem(items[highlightedIndex]);
+          selectItem(filterItems(items, itemToString, inputValue)[highlightedIndex]);
         }
         event.preventDownshiftDefault = true;
         event?.persist?.();
@@ -468,11 +478,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     // @ts-expect-error
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), normalizedSlug, /*#__PURE__*/React__default.createElement(ListBox.Menu, _extends({}, getMenuProps({
-    'aria-label': deprecatedAriaLabel || ariaLabel
-  }), {
-    ref: mergeRefs(getMenuProps().ref, refs.setFloating)
-  }), isOpen ? filterItems(items, itemToString, inputValue).map((item, index) => {
+  }))), normalizedSlug, /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen ? filterItems(items, itemToString, inputValue).map((item, index) => {
     const isObject = item !== null && typeof item === 'object';
     const title = isObject && 'text' in item && itemToElement ? item.text?.toString() : itemToString(item);
     const itemProps = getItemProps({

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -231,8 +231,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
         return changes;
       case InputBlur:
       case InputKeyDownEscape:
-        setInputFocused(false);
-        setInputValue('');
         setIsOpen(false);
         return changes;
       case FunctionToggleMenu:
@@ -416,7 +414,11 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
         $input.setSelectionRange($value.length, $value.length);
       }
     },
-    onFocus: () => setInputFocused(true)
+    onFocus: () => setInputFocused(true),
+    onBlur: () => {
+      !isOpen && setInputFocused(false);
+      setInputValue('');
+    }
   }));
   const menuProps = getMenuProps({}, {
     suppressRefError: true

package/lib/components/ComboBox/ComboBox.js

@@ -208,13 +208,19 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     } = changes;
     switch (type) {
       case InputBlur:
-        if (state.inputValue && highlightedIndex == '-1' && !allowCustomValue) {
+        if (state.inputValue && highlightedIndex == '-1' && changes.selectedItem) {
+          return {
+            ...changes,
+            inputValue: itemToString(changes.selectedItem)
+          };
+        } else if (state.inputValue && highlightedIndex == '-1' && !allowCustomValue && !changes.selectedItem) {
           return {
             ...changes,
             inputValue: ''
           };
+        } else {
+          return changes;
         }
-        return changes;
       case InputKeyDownEnter:
         if (allowCustomValue) {
           setInputValue(inputValue);
@@ -325,7 +331,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     setHighlightedIndex
   } = Downshift.useCombobox({
     ...downshiftProps,
-    items,
+    items: filterItems(items, itemToString, inputValue),
     inputValue: inputValue,
     itemToString: item => {
       return itemToString(item);
@@ -386,6 +392,10 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   // when both the message is supplied *and* when the component is in
   // the matching state (invalid, warn, etc).
   const ariaDescribedBy = invalid && invalidText && invalidTextId || warn && warnText && warnTextId || helperText && !isFluid && helperTextId || undefined;
+  const menuProps = React.useMemo(() => getMenuProps({
+    'aria-label': deprecatedAriaLabel || ariaLabel,
+    ref: autoAlign ? refs.setFloating : null
+  }), [autoAlign, deprecatedAriaLabel, ariaLabel]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, titleText && /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({
@@ -403,7 +413,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     light: light,
     size: size,
     warn: warn,
-    ref: refs.setReference,
+    ref: autoAlign ? refs.setReference : null,
     warnText: warnText,
     warnTextId: warnTextId
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -416,7 +426,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     "aria-haspopup": "listbox",
     title: textInput?.current?.value
   }, getInputProps({
-    'aria-controls': isOpen ? undefined : getMenuProps().id,
+    'aria-controls': isOpen ? undefined : menuProps.id,
     placeholder,
     ref: {
       ...mergeRefs["default"](textInput, ref)
@@ -428,7 +438,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       if (match.match(event, keys.Enter) && (!inputValue || allowCustomValue)) {
         toggleMenu();
         if (highlightedIndex !== -1) {
-          selectItem(items[highlightedIndex]);
+          selectItem(filterItems(items, itemToString, inputValue)[highlightedIndex]);
         }
         event.preventDownshiftDefault = true;
         event?.persist?.();
@@ -478,11 +488,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     // @ts-expect-error
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, _rollupPluginBabelHelpers["extends"]({}, getMenuProps({
-    'aria-label': deprecatedAriaLabel || ariaLabel
-  }), {
-    ref: mergeRefs["default"](getMenuProps().ref, refs.setFloating)
-  }), isOpen ? filterItems(items, itemToString, inputValue).map((item, index$1) => {
+  }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen ? filterItems(items, itemToString, inputValue).map((item, index$1) => {
     const isObject = item !== null && typeof item === 'object';
     const title = isObject && 'text' in item && itemToElement ? item.text?.toString() : itemToString(item);
     const itemProps = getItemProps({

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -243,8 +243,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
         return changes;
       case InputBlur:
       case InputKeyDownEscape:
-        setInputFocused(false);
-        setInputValue('');
         setIsOpen(false);
         return changes;
       case FunctionToggleMenu:
@@ -428,7 +426,11 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
         $input.setSelectionRange($value.length, $value.length);
       }
     },
-    onFocus: () => setInputFocused(true)
+    onFocus: () => setInputFocused(true),
+    onBlur: () => {
+      !isOpen && setInputFocused(false);
+      setInputValue('');
+    }
   }));
   const menuProps = getMenuProps({}, {
     suppressRefError: true

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.60.1",
+  "version": "1.60.3",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -142,5 +142,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "f548182ef995217e7717f9250376ff8995069a09"
+  "gitHead": "7e7aa249813b0a3376f13f403702d8c3e2551952"
 }