@carbon/react 1.60.2 → 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';
@@ -382,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({
@@ -399,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", {
@@ -412,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)
@@ -474,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

@@ -392,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"]({
@@ -409,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", {
@@ -422,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)
@@ -484,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.2",
+  "version": "1.60.3",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -142,5 +142,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "d9b7c3eaee9e757cb7460d1ff626a1e2211a18fa"
+  "gitHead": "7e7aa249813b0a3376f13f403702d8c3e2551952"
 }