@carbon/react 1.75.0-rc.0 → 1.76.0-rc.0

package/es/components/ComboBox/ComboBox.js

@@ -600,9 +600,9 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
         // Since `onChange` does not normally fire when the menu is closed, we should
         // manually fire it when `allowCustomValue` is provided, the menu is closing,
         // and there is a value.
-        if (allowCustomValue && isOpen && inputValue) {
+        if (allowCustomValue && isOpen && inputValue && highlightedIndex === -1) {
           onChange({
-            selectedItem,
+            selectedItem: null,
             inputValue
           });
         }

package/es/components/DataTable/TableRow.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import PropTypes from 'prop-types';
+import React from 'react';
 import { ReactAttr } from '../../types/common';
 export interface TableRowProps extends ReactAttr<HTMLTableRowElement> {
     /**
@@ -16,17 +16,5 @@ export interface TableRowProps extends ReactAttr<HTMLTableRowElement> {
      */
     isSelected?: boolean;
 }
-declare const TableRow: {
-    (props: TableRowProps): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        /**
-         * Specify an optional className to be applied to the container node
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Specify if the row is selected
-         */
-        isSelected: PropTypes.Requireable<boolean>;
-    };
-};
+declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableCellElement>>;
 export default TableRow;

package/es/components/DataTable/TableRow.js

@@ -5,12 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const TableRow = props => {
+const TableRow = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const prefix = usePrefix();
   let rowHasAILabel;
   if (props?.children) {
@@ -40,8 +41,10 @@ const TableRow = props => {
   if (className) {
     cleanProps.className = className;
   }
-  return /*#__PURE__*/React__default.createElement("tr", cleanProps);
-};
+  return /*#__PURE__*/React__default.createElement("tr", _extends({
+    ref: ref
+  }, cleanProps));
+});
 TableRow.propTypes = {
   /**
    * Specify an optional className to be applied to the container node

package/es/components/Notification/Notification.d.ts

@@ -419,8 +419,10 @@ export interface ActionableNotificationProps extends HTMLAttributes<HTMLDivEleme
      */
     onCloseButtonClick?(event: MouseEvent): void;
     /**
-     * By default, this value is "alertdialog". You can also provide an alternate
-     * role if it makes sense from from an accessibility perspective.
+     * Provide an accessible role to be used. Defaults to `alertdialog`. Any other
+     * value will disable the wrapping of focus. To remain accessible, additional
+     * work is required. See the storybook docs for more info:
+     * https://react.carbondesignsystem.com/?path=/docs/components-notifications-actionable--overview#using-the-role-prop
      */
     role?: string;
     /**
@@ -494,8 +496,10 @@ export declare namespace ActionableNotification {
          */
         onCloseButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
         /**
-         * By default, this value is "alertdialog". You can also provide an alternate
-         * role if it makes sense from the accessibility-side.
+         * Provide an accessible role to be used. Defaults to `alertdialog`. Any other
+         * value will disable the wrapping of focus. To remain accessible, additional
+         * work is required. See the storybook docs for more info:
+         * https://react.carbondesignsystem.com/?path=/docs/components-notifications-actionable--overview#using-the-role-prop
          */
         role: PropTypes.Requireable<string>;
         /**

package/es/components/Notification/Notification.js

@@ -514,7 +514,7 @@ function ActionableNotification(_ref6) {
   const ref = useRef(null);
   const focusTrapWithoutSentinels = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
   useIsomorphicEffect(() => {
-    if (hasFocus) {
+    if (hasFocus && role === 'alertdialog') {
       const button = document.querySelector('button.cds--actionable-notification__action-button');
       button?.focus();
     }
@@ -524,7 +524,7 @@ function ActionableNotification(_ref6) {
       target: oldActiveNode,
       relatedTarget: currentActiveNode
     } = _ref7;
-    if (isOpen && currentActiveNode && oldActiveNode) {
+    if (isOpen && currentActiveNode && oldActiveNode && role === 'alertdialog') {
       const {
         current: bodyNode
       } = innerModal;
@@ -544,7 +544,7 @@ function ActionableNotification(_ref6) {
     }
   }
   function handleKeyDown(event) {
-    if (isOpen && match(event, Tab) && ref.current) {
+    if (isOpen && match(event, Tab) && ref.current && role === 'alertdialog') {
       wrapFocusWithoutSentinels({
         containerNode: ref.current,
         currentActiveNode: event.target,
@@ -671,8 +671,10 @@ ActionableNotification.propTypes = {
    */
   onCloseButtonClick: PropTypes.func,
   /**
-   * By default, this value is "alertdialog". You can also provide an alternate
-   * role if it makes sense from the accessibility-side.
+   * Provide an accessible role to be used. Defaults to `alertdialog`. Any other
+   * value will disable the wrapping of focus. To remain accessible, additional
+   * work is required. See the storybook docs for more info:
+   * https://react.carbondesignsystem.com/?path=/docs/components-notifications-actionable--overview#using-the-role-prop
    */
   role: PropTypes.string,
   /**

package/es/components/Popover/index.d.ts

@@ -4,9 +4,9 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { type ForwardedRef, type WeakValidationMap, type ElementType } from 'react';
-import { type PolymorphicProps } from '../../types/common';
+import React, { type WeakValidationMap } from 'react';
 import { type Boundary } from '@floating-ui/react';
+import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 export interface PopoverContext {
     setFloating: React.Ref<HTMLSpanElement>;
     caretRef: React.Ref<HTMLSpanElement>;
@@ -67,14 +67,11 @@ export interface PopoverBaseProps {
      */
     open: boolean;
 }
-export type PopoverProps<E extends ElementType> = PolymorphicProps<E, PopoverBaseProps>;
-export interface PopoverComponent {
-    <E extends ElementType = 'span'>(props: PopoverProps<E> & {
-        forwardRef?: ForwardedRef<ElementType>;
-    }): JSX.Element | null;
+export type PopoverProps<E extends React.ElementType> = PolymorphicComponentPropWithRef<E, PopoverBaseProps>;
+export type PopoverComponent = <E extends React.ElementType = 'span'>(props: PopoverProps<E>) => React.ReactElement | any;
+export declare const Popover: PopoverComponent & {
     displayName?: string;
     propTypes?: WeakValidationMap<PopoverProps<any>>;
-}
-export declare const Popover: PopoverComponent;
+};
 export type PopoverContentProps = React.HTMLAttributes<HTMLSpanElement>;
 export declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLSpanElement>>;

package/es/components/Toggletip/index.js

@@ -260,7 +260,8 @@ const ToggletipContent = /*#__PURE__*/React__default.forwardRef(function Togglet
   return /*#__PURE__*/React__default.createElement(PopoverContent, _extends({
     className: customClassName
   }, toggletip?.contentProps, {
-    ref: ref
+    ref: ref,
+    "aria-live": "polite"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--toggletip-content`
   }, children));

package/lib/components/ComboBox/ComboBox.js

@@ -611,9 +611,9 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         // Since `onChange` does not normally fire when the menu is closed, we should
         // manually fire it when `allowCustomValue` is provided, the menu is closing,
         // and there is a value.
-        if (allowCustomValue && isOpen && inputValue) {
+        if (allowCustomValue && isOpen && inputValue && highlightedIndex === -1) {
           onChange({
-            selectedItem,
+            selectedItem: null,
             inputValue
           });
         }

package/lib/components/DataTable/TableRow.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import PropTypes from 'prop-types';
+import React from 'react';
 import { ReactAttr } from '../../types/common';
 export interface TableRowProps extends ReactAttr<HTMLTableRowElement> {
     /**
@@ -16,17 +16,5 @@ export interface TableRowProps extends ReactAttr<HTMLTableRowElement> {
      */
     isSelected?: boolean;
 }
-declare const TableRow: {
-    (props: TableRowProps): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        /**
-         * Specify an optional className to be applied to the container node
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Specify if the row is selected
-         */
-        isSelected: PropTypes.Requireable<boolean>;
-    };
-};
+declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableCellElement>>;
 export default TableRow;

package/lib/components/DataTable/TableRow.js

@@ -9,6 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
@@ -20,7 +21,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const TableRow = props => {
+const TableRow = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
   const prefix = usePrefix.usePrefix();
   let rowHasAILabel;
   if (props?.children) {
@@ -50,8 +51,10 @@ const TableRow = props => {
   if (className) {
     cleanProps.className = className;
   }
-  return /*#__PURE__*/React__default["default"].createElement("tr", cleanProps);
-};
+  return /*#__PURE__*/React__default["default"].createElement("tr", _rollupPluginBabelHelpers["extends"]({
+    ref: ref
+  }, cleanProps));
+});
 TableRow.propTypes = {
   /**
    * Specify an optional className to be applied to the container node

package/lib/components/Notification/Notification.d.ts

@@ -419,8 +419,10 @@ export interface ActionableNotificationProps extends HTMLAttributes<HTMLDivEleme
      */
     onCloseButtonClick?(event: MouseEvent): void;
     /**
-     * By default, this value is "alertdialog". You can also provide an alternate
-     * role if it makes sense from from an accessibility perspective.
+     * Provide an accessible role to be used. Defaults to `alertdialog`. Any other
+     * value will disable the wrapping of focus. To remain accessible, additional
+     * work is required. See the storybook docs for more info:
+     * https://react.carbondesignsystem.com/?path=/docs/components-notifications-actionable--overview#using-the-role-prop
      */
     role?: string;
     /**
@@ -494,8 +496,10 @@ export declare namespace ActionableNotification {
          */
         onCloseButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
         /**
-         * By default, this value is "alertdialog". You can also provide an alternate
-         * role if it makes sense from the accessibility-side.
+         * Provide an accessible role to be used. Defaults to `alertdialog`. Any other
+         * value will disable the wrapping of focus. To remain accessible, additional
+         * work is required. See the storybook docs for more info:
+         * https://react.carbondesignsystem.com/?path=/docs/components-notifications-actionable--overview#using-the-role-prop
          */
         role: PropTypes.Requireable<string>;
         /**

package/lib/components/Notification/Notification.js

@@ -524,7 +524,7 @@ function ActionableNotification(_ref6) {
   const ref = React.useRef(null);
   const focusTrapWithoutSentinels = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
   useIsomorphicEffect["default"](() => {
-    if (hasFocus) {
+    if (hasFocus && role === 'alertdialog') {
       const button = document.querySelector('button.cds--actionable-notification__action-button');
       button?.focus();
     }
@@ -534,7 +534,7 @@ function ActionableNotification(_ref6) {
       target: oldActiveNode,
       relatedTarget: currentActiveNode
     } = _ref7;
-    if (isOpen && currentActiveNode && oldActiveNode) {
+    if (isOpen && currentActiveNode && oldActiveNode && role === 'alertdialog') {
       const {
         current: bodyNode
       } = innerModal;
@@ -554,7 +554,7 @@ function ActionableNotification(_ref6) {
     }
   }
   function handleKeyDown(event) {
-    if (isOpen && match.match(event, keys.Tab) && ref.current) {
+    if (isOpen && match.match(event, keys.Tab) && ref.current && role === 'alertdialog') {
       wrapFocus.wrapFocusWithoutSentinels({
         containerNode: ref.current,
         currentActiveNode: event.target,
@@ -681,8 +681,10 @@ ActionableNotification.propTypes = {
    */
   onCloseButtonClick: PropTypes__default["default"].func,
   /**
-   * By default, this value is "alertdialog". You can also provide an alternate
-   * role if it makes sense from the accessibility-side.
+   * Provide an accessible role to be used. Defaults to `alertdialog`. Any other
+   * value will disable the wrapping of focus. To remain accessible, additional
+   * work is required. See the storybook docs for more info:
+   * https://react.carbondesignsystem.com/?path=/docs/components-notifications-actionable--overview#using-the-role-prop
    */
   role: PropTypes__default["default"].string,
   /**

package/lib/components/Popover/index.d.ts

@@ -4,9 +4,9 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { type ForwardedRef, type WeakValidationMap, type ElementType } from 'react';
-import { type PolymorphicProps } from '../../types/common';
+import React, { type WeakValidationMap } from 'react';
 import { type Boundary } from '@floating-ui/react';
+import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 export interface PopoverContext {
     setFloating: React.Ref<HTMLSpanElement>;
     caretRef: React.Ref<HTMLSpanElement>;
@@ -67,14 +67,11 @@ export interface PopoverBaseProps {
      */
     open: boolean;
 }
-export type PopoverProps<E extends ElementType> = PolymorphicProps<E, PopoverBaseProps>;
-export interface PopoverComponent {
-    <E extends ElementType = 'span'>(props: PopoverProps<E> & {
-        forwardRef?: ForwardedRef<ElementType>;
-    }): JSX.Element | null;
+export type PopoverProps<E extends React.ElementType> = PolymorphicComponentPropWithRef<E, PopoverBaseProps>;
+export type PopoverComponent = <E extends React.ElementType = 'span'>(props: PopoverProps<E>) => React.ReactElement | any;
+export declare const Popover: PopoverComponent & {
     displayName?: string;
     propTypes?: WeakValidationMap<PopoverProps<any>>;
-}
-export declare const Popover: PopoverComponent;
+};
 export type PopoverContentProps = React.HTMLAttributes<HTMLSpanElement>;
 export declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLSpanElement>>;

package/lib/components/Toggletip/index.js

@@ -270,7 +270,8 @@ const ToggletipContent = /*#__PURE__*/React__default["default"].forwardRef(funct
   return /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, _rollupPluginBabelHelpers["extends"]({
     className: customClassName
   }, toggletip?.contentProps, {
-    ref: ref
+    ref: ref,
+    "aria-live": "polite"
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--toggletip-content`
   }, children));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.75.0-rc.0",
+  "version": "1.76.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -44,16 +44,16 @@
     "telemetry:config": "npx -y @ibm/telemetry-js-config-generator generate --id fd89d12b-6a39-48b4-adf4-30c94dc0dddd --endpoint https://www-api.ibm.com/ibm-telemetry/v1/metrics --files ./src/components/**/*.(tsx|js|jsx)"
   },
   "peerDependencies": {
-    "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
-    "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0",
+    "react": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0",
+    "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0",
     "sass": "^1.33.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@carbon/feature-flags": "^0.24.0",
-    "@carbon/icons-react": "^11.54.0-rc.0",
-    "@carbon/layout": "^11.28.0",
-    "@carbon/styles": "^1.74.0-rc.0",
+    "@carbon/icons-react": "^11.55.0-rc.0",
+    "@carbon/layout": "^11.29.0",
+    "@carbon/styles": "^1.75.0-rc.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -64,7 +64,7 @@
     "invariant": "^2.2.3",
     "prop-types": "^15.7.2",
     "react-fast-compare": "^3.2.2",
-    "react-is": "^18.2.0",
+    "react-is": "^18.3.1",
     "tabbable": "^6.2.0",
     "use-resize-observer": "^6.0.0",
     "window-or-global": "^1.0.1"
@@ -78,8 +78,8 @@
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@carbon/test-utils": "^10.34.0",
-    "@carbon/themes": "^11.45.0",
+    "@carbon/test-utils": "^10.35.0",
+    "@carbon/themes": "^11.46.0",
     "@figma/code-connect": "^1.2.4",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.0",
@@ -98,7 +98,7 @@
     "@storybook/react": "^8.4.7",
     "@storybook/react-webpack5": "^8.4.7",
     "@storybook/theming": "^8.4.7",
-    "@types/react-is": "~18.3.0",
+    "@types/react-is": "~18.3.1",
     "autoprefixer": "^10.4.0",
     "babel-loader": "^9.0.0",
     "babel-plugin-dev-expression": "^0.2.3",
@@ -117,8 +117,8 @@
     "prettier2": "npm:prettier@2",
     "process": "^0.11.10",
     "prop-types": "^15.7.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "remark-gfm": "^4.0.0",
     "requestanimationframe": "^0.0.23",
     "rimraf": "^6.0.0",
@@ -145,5 +145,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "9ec628547954e438748a23862612f20418e07373"
+  "gitHead": "9cf96c5f68ef9216d1c73a5dfb7bdb3bd007b0c1"
 }