@carbon/react 1.60.0-rc.0 → 1.60.2

package/es/components/ComboBox/ComboBox.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);
@@ -418,7 +424,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?.();

package/es/components/Menu/Menu.d.ts

@@ -53,7 +53,7 @@ interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
     /**
      * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
      */
-    target?: HTMLElement;
+    target?: Element;
     /**
      * Specify the x position of the Menu. Either pass a single number or an array with two numbers describing your activator's boundaries ([x1, x2])
      */

package/es/components/Menu/Menu.js

@@ -14,6 +14,7 @@ import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { warning } from '../../internal/warning.js';
 import { MenuContext, menuReducer } from './MenuContext.js';
+import { canUseDOM } from '../../internal/environment.js';
 import { useLayoutDirection } from '../LayoutDirection/useLayoutDirection.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape, ArrowLeft, ArrowUp, ArrowDown } from '../../internal/keyboard/keys.js';
@@ -33,9 +34,8 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
     open,
     size = 'sm',
     legacyAutoalign = 'true',
-    // TODO: #16004
     // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
-    target = document.body,
+    target = canUseDOM && document.body,
     x = 0,
     y = 0,
     ...rest
@@ -294,6 +294,9 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
     onKeyDown: handleKeyDown,
     onBlur: handleBlur
   }), children));
+  if (!target) {
+    return rendered;
+  }
   return isRoot ? open && /*#__PURE__*/createPortal(rendered, target) || null : rendered;
 });
 Menu.propTypes = {

package/es/components/MultiSelect/FilterableMultiSelect.js

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

package/es/components/NumberInput/NumberInput.js

@@ -209,6 +209,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
     "data-invalid": normalizedProps.invalid ? true : undefined,
     "aria-invalid": normalizedProps.invalid,
     "aria-describedby": ariaDescribedBy,
+    "aria-readonly": readOnly,
     disabled: normalizedProps.disabled,
     ref: ref,
     id: id,

package/es/components/Pagination/Pagination.js

@@ -241,6 +241,7 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     kind: "ghost",
     className: backButtonClasses,
     label: backwardText,
+    "aria-label": backwardText,
     onClick: decrementPage,
     ref: backBtnRef
   }, _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default.createElement(CaretLeft, null))), /*#__PURE__*/React__default.createElement(IconButton, {
@@ -249,6 +250,7 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     kind: "ghost",
     className: forwardButtonClasses,
     label: forwardText,
+    "aria-label": forwardText,
     onClick: incrementPage,
     ref: forwardBtnRef
   }, _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null))))));

package/es/components/PaginationNav/PaginationNav.js

@@ -253,6 +253,7 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
     className: `${prefix}--pagination-nav__list`
   }, /*#__PURE__*/React__default.createElement(DirectionButton, {
     direction: "backward",
+    "aria-label": t('carbon.pagination-nav.previous'),
     label: t('carbon.pagination-nav.previous'),
     disabled: backwardButtonDisabled,
     onClick: jumpToPrevious
@@ -297,6 +298,7 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
     }
   }), /*#__PURE__*/React__default.createElement(DirectionButton, {
     direction: "forward",
+    "aria-label": t('carbon.pagination-nav.next'),
     label: t('carbon.pagination-nav.next'),
     disabled: forwardButtonDisabled,
     onClick: jumpToNext

package/es/internal/Selection.js

@@ -6,7 +6,7 @@
  */
 
 import { defineProperty as _defineProperty } from '../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useState, useEffect, useCallback } from 'react';
+import React__default, { useRef, useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash.isequal';
 
@@ -39,19 +39,7 @@ function useSelection(_ref2) {
   const savedOnChange = useRef(onChange);
   const [uncontrolledItems, setUncontrolledItems] = useState(initialSelectedItems);
   const isControlled = !!controlledItems;
-  const [selectedItems, setSelectedItems] = useState(isControlled ? controlledItems : uncontrolledItems);
-  useEffect(() => {
-    setSelectedItems(isControlled ? controlledItems : uncontrolledItems);
-  }, [isControlled, controlledItems, uncontrolledItems]);
-  useEffect(() => {
-    callOnChangeHandler({
-      isControlled,
-      isMounted: isMounted.current,
-      onChangeHandlerControlled: savedOnChange.current,
-      onChangeHandlerUncontrolled: setUncontrolledItems,
-      selectedItems: selectedItems
-    });
-  }, [isControlled, isMounted, selectedItems]);
+  const selectedItems = isControlled ? controlledItems : uncontrolledItems;
   const onItemChange = useCallback(item => {
     if (disabled) {
       return;
@@ -62,12 +50,27 @@ function useSelection(_ref2) {
         selectedIndex = index;
       }
     });
+    let newSelectedItems;
     if (selectedIndex === undefined) {
-      setSelectedItems(selectedItems => selectedItems.concat(item));
+      newSelectedItems = selectedItems.concat(item);
+      callOnChangeHandler({
+        isControlled,
+        isMounted: isMounted.current,
+        onChangeHandlerControlled: savedOnChange.current,
+        onChangeHandlerUncontrolled: setUncontrolledItems,
+        selectedItems: newSelectedItems
+      });
       return;
     }
-    setSelectedItems(selectedItems => removeAtIndex(selectedItems, selectedIndex));
-  }, [disabled, selectedItems]);
+    newSelectedItems = removeAtIndex(selectedItems, selectedIndex);
+    callOnChangeHandler({
+      isControlled,
+      isMounted: isMounted.current,
+      onChangeHandlerControlled: savedOnChange.current,
+      onChangeHandlerUncontrolled: setUncontrolledItems,
+      selectedItems: newSelectedItems
+    });
+  }, [disabled, isControlled, selectedItems]);
   const clearSelection = useCallback(() => {
     if (disabled) {
       return;

package/es/internal/useId.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default, { useLayoutEffect, useEffect, useState } from 'react';
+import React__default, { useState, useEffect, useLayoutEffect } from 'react';
 import setupGetInstanceId from '../tools/setupGetInstanceId.js';
 import { canUseDOM } from './environment.js';
 import { useIdPrefix } from './useIdPrefix.js';

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);
@@ -428,7 +434,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?.();

package/lib/components/Menu/Menu.d.ts

@@ -53,7 +53,7 @@ interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
     /**
      * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
      */
-    target?: HTMLElement;
+    target?: Element;
     /**
      * Specify the x position of the Menu. Either pass a single number or an array with two numbers describing your activator's boundaries ([x1, x2])
      */

package/lib/components/Menu/Menu.js

@@ -18,6 +18,7 @@ var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var warning = require('../../internal/warning.js');
 var MenuContext = require('./MenuContext.js');
+var environment = require('../../internal/environment.js');
 var useLayoutDirection = require('../LayoutDirection/useLayoutDirection.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -43,9 +44,8 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
     open,
     size = 'sm',
     legacyAutoalign = 'true',
-    // TODO: #16004
     // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
-    target = document.body,
+    target = environment.canUseDOM && document.body,
     x = 0,
     y = 0,
     ...rest
@@ -304,6 +304,9 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
     onKeyDown: handleKeyDown,
     onBlur: handleBlur
   }), children));
+  if (!target) {
+    return rendered;
+  }
   return isRoot ? open && /*#__PURE__*/ReactDOM.createPortal(rendered, target) || null : rendered;
 });
 Menu.propTypes = {

package/lib/components/MultiSelect/FilterableMultiSelect.js

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

package/lib/components/NumberInput/NumberInput.js

@@ -219,6 +219,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     "data-invalid": normalizedProps.invalid ? true : undefined,
     "aria-invalid": normalizedProps.invalid,
     "aria-describedby": ariaDescribedBy,
+    "aria-readonly": readOnly,
     disabled: normalizedProps.disabled,
     ref: ref,
     id: id,

package/lib/components/Pagination/Pagination.js

@@ -251,6 +251,7 @@ const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pa
     kind: "ghost",
     className: backButtonClasses,
     label: backwardText,
+    "aria-label": backwardText,
     onClick: decrementPage,
     ref: backBtnRef
   }, _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretLeft, null))), /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
@@ -259,6 +260,7 @@ const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pa
     kind: "ghost",
     className: forwardButtonClasses,
     label: forwardText,
+    "aria-label": forwardText,
     onClick: incrementPage,
     ref: forwardBtnRef
   }, _CaretRight || (_CaretRight = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretRight, null))))));

package/lib/components/PaginationNav/PaginationNav.js

@@ -263,6 +263,7 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
     className: `${prefix}--pagination-nav__list`
   }, /*#__PURE__*/React__default["default"].createElement(DirectionButton, {
     direction: "backward",
+    "aria-label": t('carbon.pagination-nav.previous'),
     label: t('carbon.pagination-nav.previous'),
     disabled: backwardButtonDisabled,
     onClick: jumpToPrevious
@@ -307,6 +308,7 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
     }
   }), /*#__PURE__*/React__default["default"].createElement(DirectionButton, {
     direction: "forward",
+    "aria-label": t('carbon.pagination-nav.next'),
     label: t('carbon.pagination-nav.next'),
     disabled: forwardButtonDisabled,
     onClick: jumpToNext

package/lib/internal/Selection.js

@@ -49,19 +49,7 @@ function useSelection(_ref2) {
   const savedOnChange = React.useRef(onChange);
   const [uncontrolledItems, setUncontrolledItems] = React.useState(initialSelectedItems);
   const isControlled = !!controlledItems;
-  const [selectedItems, setSelectedItems] = React.useState(isControlled ? controlledItems : uncontrolledItems);
-  React.useEffect(() => {
-    setSelectedItems(isControlled ? controlledItems : uncontrolledItems);
-  }, [isControlled, controlledItems, uncontrolledItems]);
-  React.useEffect(() => {
-    callOnChangeHandler({
-      isControlled,
-      isMounted: isMounted.current,
-      onChangeHandlerControlled: savedOnChange.current,
-      onChangeHandlerUncontrolled: setUncontrolledItems,
-      selectedItems: selectedItems
-    });
-  }, [isControlled, isMounted, selectedItems]);
+  const selectedItems = isControlled ? controlledItems : uncontrolledItems;
   const onItemChange = React.useCallback(item => {
     if (disabled) {
       return;
@@ -72,12 +60,27 @@ function useSelection(_ref2) {
         selectedIndex = index;
       }
     });
+    let newSelectedItems;
     if (selectedIndex === undefined) {
-      setSelectedItems(selectedItems => selectedItems.concat(item));
+      newSelectedItems = selectedItems.concat(item);
+      callOnChangeHandler({
+        isControlled,
+        isMounted: isMounted.current,
+        onChangeHandlerControlled: savedOnChange.current,
+        onChangeHandlerUncontrolled: setUncontrolledItems,
+        selectedItems: newSelectedItems
+      });
       return;
     }
-    setSelectedItems(selectedItems => removeAtIndex(selectedItems, selectedIndex));
-  }, [disabled, selectedItems]);
+    newSelectedItems = removeAtIndex(selectedItems, selectedIndex);
+    callOnChangeHandler({
+      isControlled,
+      isMounted: isMounted.current,
+      onChangeHandlerControlled: savedOnChange.current,
+      onChangeHandlerUncontrolled: setUncontrolledItems,
+      selectedItems: newSelectedItems
+    });
+  }, [disabled, isControlled, selectedItems]);
   const clearSelection = React.useCallback(() => {
     if (disabled) {
       return;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.60.0-rc.0",
+  "version": "1.60.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -49,9 +49,9 @@
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "@carbon/feature-flags": "^0.20.0",
-    "@carbon/icons-react": "^11.44.0-rc.0",
-    "@carbon/layout": "^11.23.0-rc.0",
-    "@carbon/styles": "^1.60.0-rc.0",
+    "@carbon/icons-react": "^11.44.1",
+    "@carbon/layout": "^11.23.1",
+    "@carbon/styles": "^1.60.1",
     "@figma/code-connect": "^0.1.2",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
@@ -82,7 +82,7 @@
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.37.0-rc.0",
+    "@carbon/themes": "^11.37.1",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^26.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -142,5 +142,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "3931acee4fc6da9481e5bef55ea6347a4b10e2fb"
+  "gitHead": "d9b7c3eaee9e757cb7460d1ff626a1e2211a18fa"
 }