@carbon/react 1.75.0 → 1.76.0

package/es/components/ComboBox/ComboBox.js

@@ -462,7 +462,8 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
           selectedItem: newSelectedItem
         });
       }
-      if (type === useCombobox.stateChangeTypes.FunctionSelectItem || type === useCombobox.stateChangeTypes.InputKeyDownEnter) {
+      if ((type === useCombobox.stateChangeTypes.FunctionSelectItem || type === useCombobox.stateChangeTypes.InputKeyDownEnter) && !isEqual(selectedItemProp, newSelectedItem) // Only fire if there's an actual change
+      ) {
         onChange({
           selectedItem: newSelectedItem
         });
@@ -600,9 +601,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/FluidTextInput/FluidTextInput.d.ts

@@ -34,6 +34,14 @@ export interface FluidTextInputProps {
      * Specify whether the control is a password input
      */
     isPassword?: boolean;
+    /**
+     * Max character count allowed for the textInput. This is needed in order for enableCounter to display
+     */
+    maxCount?: number;
+    /**
+     * Specify whether to display the character counter
+     */
+    enableCounter?: boolean;
     /**
      * Provide the text that will be read by a screen reader when visiting this
      * control

package/es/components/FluidTextInput/FluidTextInput.js

@@ -67,6 +67,14 @@ FluidTextInput.propTypes = {
    * Specify whether the control is a password input
    */
   isPassword: PropTypes.bool,
+  /**
+   * Max character count allowed for the textInput. This is needed in order for enableCounter to display
+   */
+  maxCount: PropTypes.number,
+  /**
+   * Specify whether to display the character counter
+   */
+  enableCounter: PropTypes.bool,
   /**
    * Provide the text that will be read by a screen reader when visiting this
    * control

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/TextArea/TextArea.js

@@ -168,7 +168,8 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     [`${prefix}--text-area--warn`]: warn
   });
   const counterClasses = cx(`${prefix}--label`, {
-    [`${prefix}--label--disabled`]: disabled
+    [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--text-area__label-counter`]: true
   });
   const helperTextClasses = cx(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled

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

@@ -473,7 +473,8 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
           selectedItem: newSelectedItem
         });
       }
-      if (type === Downshift.useCombobox.stateChangeTypes.FunctionSelectItem || type === Downshift.useCombobox.stateChangeTypes.InputKeyDownEnter) {
+      if ((type === Downshift.useCombobox.stateChangeTypes.FunctionSelectItem || type === Downshift.useCombobox.stateChangeTypes.InputKeyDownEnter) && !isEqual__default["default"](selectedItemProp, newSelectedItem) // Only fire if there's an actual change
+      ) {
         onChange({
           selectedItem: newSelectedItem
         });
@@ -611,9 +612,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/FluidTextInput/FluidTextInput.d.ts

@@ -34,6 +34,14 @@ export interface FluidTextInputProps {
      * Specify whether the control is a password input
      */
     isPassword?: boolean;
+    /**
+     * Max character count allowed for the textInput. This is needed in order for enableCounter to display
+     */
+    maxCount?: number;
+    /**
+     * Specify whether to display the character counter
+     */
+    enableCounter?: boolean;
     /**
      * Provide the text that will be read by a screen reader when visiting this
      * control

package/lib/components/FluidTextInput/FluidTextInput.js

@@ -77,6 +77,14 @@ FluidTextInput.propTypes = {
    * Specify whether the control is a password input
    */
   isPassword: PropTypes__default["default"].bool,
+  /**
+   * Max character count allowed for the textInput. This is needed in order for enableCounter to display
+   */
+  maxCount: PropTypes__default["default"].number,
+  /**
+   * Specify whether to display the character counter
+   */
+  enableCounter: PropTypes__default["default"].bool,
   /**
    * Provide the text that will be read by a screen reader when visiting this
    * control

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/TextArea/TextArea.js

@@ -178,7 +178,8 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
     [`${prefix}--text-area--warn`]: warn
   });
   const counterClasses = cx__default["default"](`${prefix}--label`, {
-    [`${prefix}--label--disabled`]: disabled
+    [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--text-area__label-counter`]: true
   });
   const helperTextClasses = cx__default["default"](`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled

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",
+  "version": "1.76.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -51,9 +51,9 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@carbon/feature-flags": "^0.24.0",
-    "@carbon/icons-react": "^11.54.0",
+    "@carbon/icons-react": "^11.55.0",
     "@carbon/layout": "^11.29.0",
-    "@carbon/styles": "^1.74.0",
+    "@carbon/styles": "^1.75.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -145,5 +145,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "9815eaf3bbe004ffe8243299dd6470d5313fb38a"
+  "gitHead": "fd1b7ab668473833c250488e0f7fc4feb55f1d88"
 }