@carbon/react 1.78.0 → 1.78.1

package/lib/components/ComboBox/ComboBox.js

@@ -20,6 +20,8 @@ var isEqual = require('react-fast-compare');
 var index$1 = require('../ListBox/index.js');
 var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
 var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var useId = require('../../internal/useId.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
@@ -28,10 +30,8 @@ require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var react = require('@floating-ui/react');
 var index = require('../FeatureFlags/index.js');
-var match = require('../../internal/keyboard/match.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 var Text = require('../Text/Text.js');
-var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -312,31 +312,41 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
           return changes;
         }
       case InputKeyDownEnter:
-        if (highlightedIndex === -1 && !allowCustomValue && state.selectedItem) {
-          return {
-            ...changes,
-            selectedItem: null,
-            inputValue: state.inputValue
-          };
-        }
-        if (allowCustomValue) {
-          setInputValue(inputValue);
-          setHighlightedIndex(changes.selectedItem);
-          if (onChange) {
-            onChange({
-              selectedItem: changes.selectedItem,
+        if (!allowCustomValue) {
+          const highlightedIndex = indexToHighlight(inputValue);
+          const matchingItem = items[highlightedIndex];
+          if (matchingItem) {
+            // Prevent matching items that are marked as `disabled` from
+            // being selected.
+            if (matchingItem.disabled) {
+              return state;
+            }
+
+            // Select the matching item.
+            return {
+              ...changes,
+              selectedItem: matchingItem,
+              inputValue: itemToString(matchingItem)
+            };
+          }
+
+          // If no matching item is found and there is an existing
+          // selection, clear the selection.
+          if (state.selectedItem !== null) {
+            return {
+              ...changes,
+              selectedItem: null,
               inputValue
-            });
+            };
           }
-          return changes;
-        } else if (changes.selectedItem && !allowCustomValue) {
-          return changes;
-        } else {
-          return {
-            ...changes,
-            isOpen: true
-          };
         }
+
+        // For `allowCustomValue` or if no matching item is found, keep the
+        // menu open.
+        return {
+          ...changes,
+          isOpen: true
+        };
       case FunctionToggleMenu:
       case ToggleButtonClick:
         if (!changes.isOpen && state.inputValue && highlightedIndex === -1 && !allowCustomValue) {

package/lib/components/ComposedModal/ComposedModal.js

@@ -23,12 +23,13 @@ var toggleClass = require('../../tools/toggleClass.js');
 var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
 var wrapFocus = require('../../internal/wrapFocus.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var index$1 = require('../FeatureFlags/index.js');
 var events = require('../../tools/events.js');
 var deprecate = require('../../prop-types/deprecate.js');
+var index$2 = require('../Dialog/index.js');
 var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js');
-var match = require('../../internal/keyboard/match.js');
-var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -130,12 +131,14 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
   const startSentinel = React.useRef(null);
   const endSentinel = React.useRef(null);
   const onMouseDownTarget = React.useRef(null);
-  const focusTrapWithoutSentinels = index$1.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  const enableDialogElement =
+  // useFeatureFlag('enable-experimental-focus-wrap-without-sentinels') ||
+  index$1.useFeatureFlag('enable-dialog-element');
 
   // Keep track of modal open/close state
   // and propagate it to the document.body
   React.useEffect(() => {
-    if (open !== wasOpen) {
+    if (!enableDialogElement && open !== wasOpen) {
       setIsOpen(!!open);
       setWasOpen(!!open);
       toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, !!open);
@@ -143,22 +146,19 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
   }, [open, wasOpen, prefix]);
   // Remove the document.body className on unmount
   React.useEffect(() => {
-    return () => {
-      toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, false);
-    };
+    if (!enableDialogElement) {
+      return () => {
+        toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, false);
+      };
+    }
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   function handleKeyDown(event) {
-    event.stopPropagation();
-    if (match.match(event, keys.Escape)) {
-      closeModal(event);
-    }
-    if (focusTrapWithoutSentinels && open && match.match(event, keys.Tab) && innerModal.current) {
-      wrapFocus.wrapFocusWithoutSentinels({
-        containerNode: innerModal.current,
-        currentActiveNode: event.target,
-        event: event
-      });
+    if (!enableDialogElement) {
+      event.stopPropagation();
+      if (match.match(event, keys.Escape)) {
+        closeModal(event);
+      }
     }
     onKeyDown?.(event);
   }
@@ -238,32 +238,34 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     }
   });
   React.useEffect(() => {
-    if (!open && launcherButtonRef) {
+    if (!enableDialogElement && !open && launcherButtonRef) {
       setTimeout(() => {
         launcherButtonRef?.current?.focus();
       });
     }
   }, [open, launcherButtonRef]);
   React.useEffect(() => {
-    const initialFocus = focusContainerElement => {
-      const containerElement = focusContainerElement || innerModal.current;
-      const primaryFocusElement = containerElement ? containerElement.querySelector(danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus) : null;
-      if (primaryFocusElement) {
-        return primaryFocusElement;
-      }
-      return button && button.current;
-    };
-    const focusButton = focusContainerElement => {
-      const target = initialFocus(focusContainerElement);
-      const closeButton = focusContainerElement.querySelector(`.${prefix}--modal-close`);
-      if (target) {
-        target.focus();
-      } else if (!target && closeButton) {
-        closeButton?.focus();
+    if (!enableDialogElement) {
+      const initialFocus = focusContainerElement => {
+        const containerElement = focusContainerElement || innerModal.current;
+        const primaryFocusElement = containerElement ? containerElement.querySelector(danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus) : null;
+        if (primaryFocusElement) {
+          return primaryFocusElement;
+        }
+        return button && button.current;
+      };
+      const focusButton = focusContainerElement => {
+        const target = initialFocus(focusContainerElement);
+        const closeButton = focusContainerElement.querySelector(`.${prefix}--modal-close`);
+        if (target) {
+          target.focus();
+        } else if (!target && closeButton) {
+          closeButton?.focus();
+        }
+      };
+      if (open && isOpen) {
+        focusButton(innerModal.current);
       }
-    };
-    if (open && isOpen) {
-      focusButton(innerModal.current);
     }
   }, [open, selectorPrimaryFocus, isOpen]);
 
@@ -274,23 +276,24 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
       size: 'sm'
     });
   }
-  return /*#__PURE__*/React__default["default"].createElement(index.Layer, _rollupPluginBabelHelpers["extends"]({}, rest, {
-    level: 0,
-    role: "presentation",
-    ref: ref,
-    "aria-hidden": !open,
-    onBlur: !focusTrapWithoutSentinels ? handleBlur : () => {},
-    onClick: events.composeEventHandlers([rest?.onClick, handleOnClick]),
-    onMouseDown: events.composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
-    onKeyDown: handleKeyDown,
-    className: modalClass
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+  const modalBody = enableDialogElement ? /*#__PURE__*/React__default["default"].createElement(index$2.unstable__Dialog, {
+    open: open,
+    modal: true,
+    className: containerClass,
+    "aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
+    "aria-labelledby": ariaLabelledBy
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: innerModal,
+    className: `${prefix}--modal-container-body`
+  }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--modal--inner__decorator`
+  }, normalizedDecorator) : '', childrenWithProps)) : /*#__PURE__*/React__default["default"].createElement("div", {
     className: containerClass,
     role: "dialog",
     "aria-modal": "true",
     "aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
     "aria-labelledby": ariaLabelledBy
-  }, !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("button", {
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     ref: startSentinel,
     className: `${prefix}--visually-hidden`
@@ -299,11 +302,22 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     className: `${prefix}--modal-container-body`
   }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--modal--inner__decorator`
-  }, normalizedDecorator) : '', childrenWithProps), !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("button", {
+  }, normalizedDecorator) : '', childrenWithProps), /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     ref: endSentinel,
     className: `${prefix}--visually-hidden`
-  }, "Focus sentinel")));
+  }, "Focus sentinel"));
+  return /*#__PURE__*/React__default["default"].createElement(index.Layer, _rollupPluginBabelHelpers["extends"]({}, rest, {
+    level: 0,
+    role: "presentation",
+    ref: ref,
+    "aria-hidden": !open,
+    onBlur: !enableDialogElement ? handleBlur : () => {},
+    onClick: events.composeEventHandlers([rest?.onClick, handleOnClick]),
+    onMouseDown: events.composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
+    onKeyDown: handleKeyDown,
+    className: modalClass
+  }), modalBody);
 });
 ComposedModal.propTypes = {
   /**

package/lib/components/ContainedList/ContainedListItem/ContainedListItem.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -27,7 +27,7 @@ interface ContainedListItemProps {
      */
     onClick?: () => void;
     /**
-     * Provide an optional icon to render in front of the item's content.
+     * A component used to render an icon.
      */
     renderIcon?: ComponentType | FunctionComponent;
 }

package/lib/components/ContainedList/ContainedListItem/ContainedListItem.js

@@ -81,7 +81,7 @@ ContainedListItem.propTypes = {
    */
   onClick: PropTypes__default["default"].func,
   /**
-   * Provide an optional icon to render in front of the item's content.
+   * A component used to render an icon.
    */
   // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])

package/lib/components/ContentSwitcher/ContentSwitcher.js

@@ -16,11 +16,11 @@ var cx = require('classnames');
 var deprecate = require('../../prop-types/deprecate.js');
 var index = require('../Layout/index.js');
 var events = require('../../tools/events.js');
-var usePrefix = require('../../internal/usePrefix.js');
-var noopFn = require('../../internal/noopFn.js');
+var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
 var navigation = require('../../internal/keyboard/navigation.js');
-var keys = require('../../internal/keyboard/keys.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var noopFn = require('../../internal/noopFn.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -17,7 +17,7 @@ export interface TableBatchActionProps extends React.ButtonHTMLAttributes<HTMLBu
      */
     iconDescription?: string;
     /**
-     * Optional function to render your own icon in the underlying button
+     * A component used to render an icon.
      */
     renderIcon?: React.ElementType;
 }
@@ -34,7 +34,7 @@ declare const TableBatchAction: {
          */
         iconDescription: (props: any) => Error | undefined;
         /**
-         * Optional function to render your own icon in the underlying button
+         * A component used to render an icon.
          */
         renderIcon: PropTypes.Requireable<object>;
     };

package/lib/components/DataTable/TableBatchAction.js

@@ -48,7 +48,7 @@ TableBatchAction.propTypes = {
     return undefined;
   },
   /**
-   * Optional function to render your own icon in the underlying button
+   * A component used to render an icon.
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
 };

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/DataTable/TableContainer.js

@@ -51,12 +51,12 @@ const TableContainer = _ref => {
     value: value
   }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: tableContainerClasses
-  }), title && /*#__PURE__*/React__default["default"].createElement("div", {
+  }), (title || description) && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--data-table-header`
-  }, /*#__PURE__*/React__default["default"].createElement("h4", {
+  }, title && /*#__PURE__*/React__default["default"].createElement("h4", {
     className: `${prefix}--data-table-header__title`,
     id: titleId
-  }, title), /*#__PURE__*/React__default["default"].createElement("p", {
+  }, title), description && /*#__PURE__*/React__default["default"].createElement("p", {
     className: `${prefix}--data-table-header__description`,
     id: descriptionId
   }, description)), children));

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -45,15 +45,16 @@ export type TableExpandHeaderPropsBase = {
      */
     onExpand?(event: React.MouseEvent<HTMLButtonElement>): void;
 } & ReactAttr<HTMLTableCellElement>;
-export type TableExpandHeaderPropsWithToggle = Omit<TableExpandHeaderPropsBase, 'ariaLabel' | 'aria-label' | 'enableToggle' | 'onExpand'> & {
+export type TableExpandHeaderPropsWithToggle = Omit<TableExpandHeaderPropsBase, 'aria-label' | 'enableToggle' | 'onExpand'> & {
     enableToggle: true;
-    ariaLabel: string;
     ['aria-label']: string;
     onExpand(event: React.MouseEvent<HTMLButtonElement>): void;
 };
-export type TableExpandHeaderPropsWithExpando = Omit<TableExpandHeaderPropsBase, 'ariaLabel' | 'aria-label' | 'enableExpando' | 'onExpand'> & {
+export type TableExpandHeaderPropsWithExpando = Omit<TableExpandHeaderPropsBase, 'aria-label' | 'enableExpando' | 'onExpand'> & {
+    /**
+     * @deprecated The enableExpando prop is being replaced by `enableToggle`
+     */
     enableExpando: true;
-    ariaLabel: string;
     ['aria-label']: string;
     onExpand(event: React.MouseEvent<HTMLButtonElement>): void;
 };

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -20,7 +20,7 @@ export interface TableToolbarMenuProps extends React.HTMLAttributes<HTMLDivEleme
      */
     menuOptionsClass?: string;
     /**
-     * Optional prop to allow overriding the default menu icon
+     * A component used to render an icon.
      */
     renderIcon?: any;
 }

package/lib/components/DataTable/TableToolbarMenu.js

@@ -61,7 +61,7 @@ TableToolbarMenu.propTypes = {
    */
   menuOptionsClass: PropTypes__default["default"].string,
   /**
-   * Optional prop to allow overriding the default menu icon
+   * A component used to render an icon.
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
 };

package/lib/components/DatePicker/DatePicker.js

@@ -20,13 +20,13 @@ var appendToPlugin = require('./plugins/appendToPlugin.js');
 var fixEventsPlugin = require('./plugins/fixEventsPlugin.js');
 var rangePlugin = require('./plugins/rangePlugin.js');
 var deprecate = require('../../prop-types/deprecate.js');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useSavedCallback = require('../../internal/useSavedCallback.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var iconsReact = require('@carbon/icons-react');
-var match = require('../../internal/keyboard/match.js');
-var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/DatePicker/plugins/fixEventsPlugin.js

@@ -9,8 +9,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var match = require('../../../internal/keyboard/match.js');
 var keys = require('../../../internal/keyboard/keys.js');
+var match = require('../../../internal/keyboard/match.js');
 
 /**
  * @param {object} config Plugin configuration.

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

@@ -12,9 +12,28 @@ export interface DialogProps extends ReactAttr<HTMLDialogElement> {
      */
     children?: React.ReactNode;
     /**
-     * Specifies whether the dialog is modal or non-modal
+     * Specify an optional className to be applied to the modal root node
+     */
+    className?: string;
+    /**
+     * Specifies whether the dialog is modal or non-modal. This cannot be changed
+     * while open=true
      */
     modal?: boolean;
+    /**
+     * Specify a handler for the dialog's cancel event.
+     * The browser fires this event when the user presses the Esc key and is cancelable.
+     */
+    onCancel?: React.ReactEventHandler<HTMLDialogElement>;
+    /**
+     * Specify a click handler applied to the dialog.
+     */
+    onClick?: React.ReactEventHandler<HTMLDialogElement>;
+    /**
+     * Specify a handler the dialog's close event.
+     * The browser fires this event after the dialog has closed.
+     */
+    onClose?: React.ReactEventHandler<HTMLDialogElement>;
     /**
      * Specify a handler for closing Dialog.
      * The handler should care of closing Dialog, e.g. changing `open` prop.
@@ -25,6 +44,25 @@ export interface DialogProps extends ReactAttr<HTMLDialogElement> {
      */
     open?: boolean;
 }
-declare const unstable__Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<unknown>>;
-export { unstable__Dialog };
-export default unstable__Dialog;
+export declare const unstable__Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<unknown>>;
+export interface DialogHeaderProps extends ReactAttr<HTMLDivElement> {
+    /**
+     * Provide the contents to be rendered inside of this component
+     */
+    children?: React.ReactNode;
+}
+export declare const DialogHeader: React.ForwardRefExoticComponent<DialogHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface DialogControlsProps extends ReactAttr<HTMLDivElement> {
+    /**
+     * Provide the contents to be rendered inside of this component
+     */
+    children?: React.ReactNode;
+}
+export declare const DialogControls: React.ForwardRefExoticComponent<DialogControlsProps & React.RefAttributes<HTMLDivElement>>;
+export interface DialogCloseButtonProps extends ReactAttr<HTMLDivElement> {
+    /**
+     * Specify a click handler applied to the IconButton
+     */
+    onClick?: React.MouseEventHandler;
+}
+export declare const DialogCloseButton: React.ForwardRefExoticComponent<DialogCloseButtonProps & React.RefAttributes<HTMLDivElement>>;