@carbon/react 1.78.0 → 1.78.1

package/es/components/Accordion/AccordionItem.js

@@ -11,13 +11,13 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useState, useContext } from 'react';
 import '../Text/index.js';
+import { Escape } from '../../internal/keyboard/keys.js';
+import { match } from '../../internal/keyboard/match.js';
 import { useId } from '../../internal/useId.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { AccordionContext } from './AccordionProvider.js';
-import { match } from '../../internal/keyboard/match.js';
 import { Text } from '../Text/Text.js';
-import { Escape } from '../../internal/keyboard/keys.js';
 
 const defaultRenderToggle = props => /*#__PURE__*/React__default.createElement("button", _extends({
   type: "button"

package/es/components/Button/Button.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.
@@ -50,8 +50,7 @@ export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      */
     rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
     /**
-     * Optional prop to allow overriding the icon rendering.
-     * Can be a React component class
+     * A component used to render an icon.
      */
     renderIcon?: React.ElementType;
     /**

package/es/components/Button/Button.js

@@ -194,8 +194,7 @@ Button.propTypes = {
    */
   rel: PropTypes.string,
   /**
-   * Optional prop to allow overriding the icon rendering.
-   * Can be a React component class
+   * A component used to render an icon.
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**

package/es/components/Button/ButtonBase.js

@@ -49,7 +49,7 @@ const ButtonBase = /*#__PURE__*/React__default.forwardRef(function ButtonBase(_r
     [`${prefix}--btn--${kind}`]: kind,
     [`${prefix}--btn--disabled`]: disabled,
     [`${prefix}--btn--expressive`]: isExpressive,
-    [`${prefix}--btn--icon-only`]: hasIconOnly && !className?.includes(`${prefix}--btn--icon-only`),
+    [`${prefix}--btn--icon-only`]: hasIconOnly,
     [`${prefix}--btn--selected`]: hasIconOnly && isSelected && kind === 'ghost'
   });
   const commonProps = {

package/es/components/ChatButton/ChatButton.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2024
+ * Copyright IBM Corp. 2024, 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.
@@ -33,8 +33,7 @@ export interface ChatButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      */
     kind?: ChatButtonKind;
     /**
-     * Optional prop to specify an icon to be rendered.
-     * Can be a React component class
+     * A component used to render an icon.
      */
     renderIcon?: ComponentType | FunctionComponent;
     /**

package/es/components/ChatButton/ChatButton.js

@@ -75,8 +75,7 @@ ChatButton.propTypes = {
    */
   kind: PropTypes.oneOf(['primary', 'secondary', 'danger', 'ghost', 'tertiary']),
   /**
-   * Optional prop to specify an icon to be rendered.
-   * Can be a React component class
+   * A component used to render an icon.
    */
   // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

package/es/components/ComboBox/ComboBox.js

@@ -16,6 +16,8 @@ import isEqual from 'react-fast-compare';
 import ListBox from '../ListBox/index.js';
 import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
 import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
+import { Space, Enter, Escape, Home, End } from '../../internal/keyboard/keys.js';
+import { match } from '../../internal/keyboard/match.js';
 import { useId } from '../../internal/useId.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import deprecate from '../../prop-types/deprecate.js';
@@ -24,10 +26,8 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useFloating, flip, hide, autoUpdate } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
-import { match } from '../../internal/keyboard/match.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
 import { Text } from '../Text/Text.js';
-import { Space, Enter, Escape, Home, End } from '../../internal/keyboard/keys.js';
 
 const {
   InputBlur,
@@ -301,31 +301,41 @@ const ComboBox = /*#__PURE__*/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/es/components/ComposedModal/ComposedModal.js

@@ -17,14 +17,15 @@ import mergeRefs from '../../tools/mergeRefs.js';
 import cx from 'classnames';
 import toggleClass from '../../tools/toggleClass.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
-import wrapFocus, { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
+import wrapFocus, { elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { Escape } from '../../internal/keyboard/keys.js';
+import { match } from '../../internal/keyboard/match.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import deprecate from '../../prop-types/deprecate.js';
+import { unstable__Dialog } from '../Dialog/index.js';
 import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
-import { match } from '../../internal/keyboard/match.js';
-import { Escape, Tab } from '../../internal/keyboard/keys.js';
 
 const ModalBody = /*#__PURE__*/React__default.forwardRef(function ModalBody(_ref, ref) {
   let {
@@ -120,12 +121,14 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
   const startSentinel = useRef(null);
   const endSentinel = useRef(null);
   const onMouseDownTarget = useRef(null);
-  const focusTrapWithoutSentinels = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  const enableDialogElement =
+  // useFeatureFlag('enable-experimental-focus-wrap-without-sentinels') ||
+  useFeatureFlag('enable-dialog-element');
 
   // Keep track of modal open/close state
   // and propagate it to the document.body
   useEffect(() => {
-    if (open !== wasOpen) {
+    if (!enableDialogElement && open !== wasOpen) {
       setIsOpen(!!open);
       setWasOpen(!!open);
       toggleClass(document.body, `${prefix}--body--with-modal-open`, !!open);
@@ -133,22 +136,19 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
   }, [open, wasOpen, prefix]);
   // Remove the document.body className on unmount
   useEffect(() => {
-    return () => {
-      toggleClass(document.body, `${prefix}--body--with-modal-open`, false);
-    };
+    if (!enableDialogElement) {
+      return () => {
+        toggleClass(document.body, `${prefix}--body--with-modal-open`, false);
+      };
+    }
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   function handleKeyDown(event) {
-    event.stopPropagation();
-    if (match(event, Escape)) {
-      closeModal(event);
-    }
-    if (focusTrapWithoutSentinels && open && match(event, Tab) && innerModal.current) {
-      wrapFocusWithoutSentinels({
-        containerNode: innerModal.current,
-        currentActiveNode: event.target,
-        event: event
-      });
+    if (!enableDialogElement) {
+      event.stopPropagation();
+      if (match(event, Escape)) {
+        closeModal(event);
+      }
     }
     onKeyDown?.(event);
   }
@@ -228,32 +228,34 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     }
   });
   useEffect(() => {
-    if (!open && launcherButtonRef) {
+    if (!enableDialogElement && !open && launcherButtonRef) {
       setTimeout(() => {
         launcherButtonRef?.current?.focus();
       });
     }
   }, [open, launcherButtonRef]);
   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]);
 
@@ -264,23 +266,24 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
       size: 'sm'
     });
   }
-  return /*#__PURE__*/React__default.createElement(Layer, _extends({}, rest, {
-    level: 0,
-    role: "presentation",
-    ref: ref,
-    "aria-hidden": !open,
-    onBlur: !focusTrapWithoutSentinels ? handleBlur : () => {},
-    onClick: composeEventHandlers([rest?.onClick, handleOnClick]),
-    onMouseDown: composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
-    onKeyDown: handleKeyDown,
-    className: modalClass
-  }), /*#__PURE__*/React__default.createElement("div", {
+  const modalBody = enableDialogElement ? /*#__PURE__*/React__default.createElement(unstable__Dialog, {
+    open: open,
+    modal: true,
+    className: containerClass,
+    "aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
+    "aria-labelledby": ariaLabelledBy
+  }, /*#__PURE__*/React__default.createElement("div", {
+    ref: innerModal,
+    className: `${prefix}--modal-container-body`
+  }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--modal--inner__decorator`
+  }, normalizedDecorator) : '', childrenWithProps)) : /*#__PURE__*/React__default.createElement("div", {
     className: containerClass,
     role: "dialog",
     "aria-modal": "true",
     "aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
     "aria-labelledby": ariaLabelledBy
-  }, !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("button", {
+  }, /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     ref: startSentinel,
     className: `${prefix}--visually-hidden`
@@ -289,11 +292,22 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     className: `${prefix}--modal-container-body`
   }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--modal--inner__decorator`
-  }, normalizedDecorator) : '', childrenWithProps), !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("button", {
+  }, normalizedDecorator) : '', childrenWithProps), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     ref: endSentinel,
     className: `${prefix}--visually-hidden`
-  }, "Focus sentinel")));
+  }, "Focus sentinel"));
+  return /*#__PURE__*/React__default.createElement(Layer, _extends({}, rest, {
+    level: 0,
+    role: "presentation",
+    ref: ref,
+    "aria-hidden": !open,
+    onBlur: !enableDialogElement ? handleBlur : () => {},
+    onClick: composeEventHandlers([rest?.onClick, handleOnClick]),
+    onMouseDown: composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
+    onKeyDown: handleKeyDown,
+    className: modalClass
+  }), modalBody);
 });
 ComposedModal.propTypes = {
   /**

package/es/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/es/components/ContainedList/ContainedListItem/ContainedListItem.js

@@ -71,7 +71,7 @@ ContainedListItem.propTypes = {
    */
   onClick: PropTypes.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.oneOfType([PropTypes.func, PropTypes.object])

package/es/components/ContentSwitcher/ContentSwitcher.js

@@ -12,11 +12,11 @@ import cx from 'classnames';
 import deprecate from '../../prop-types/deprecate.js';
 import { LayoutConstraint } from '../Layout/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
-import { PrefixContext } from '../../internal/usePrefix.js';
-import { noopFn } from '../../internal/noopFn.js';
+import { ArrowRight, ArrowLeft } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { getNextIndex } from '../../internal/keyboard/navigation.js';
-import { ArrowRight, ArrowLeft } from '../../internal/keyboard/keys.js';
+import { PrefixContext } from '../../internal/usePrefix.js';
+import { noopFn } from '../../internal/noopFn.js';
 
 class ContentSwitcher extends React__default.Component {
   constructor() {

package/es/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/es/components/DataTable/TableBatchAction.js

@@ -39,7 +39,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.oneOfType([PropTypes.func, PropTypes.object])
 };

package/es/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/es/components/DataTable/TableContainer.js

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

package/es/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/es/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/es/components/DataTable/TableToolbarMenu.js

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

package/es/components/DatePicker/DatePicker.js

@@ -16,13 +16,13 @@ import carbonFlatpickrAppendToPlugin from './plugins/appendToPlugin.js';
 import carbonFlatpickrFixEventsPlugin from './plugins/fixEventsPlugin.js';
 import carbonFlatpickrRangePlugin from './plugins/rangePlugin.js';
 import deprecate from '../../prop-types/deprecate.js';
+import { Escape, ArrowDown, Enter, Tab } from '../../internal/keyboard/keys.js';
+import { match } from '../../internal/keyboard/match.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useSavedCallback } from '../../internal/useSavedCallback.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
-import { match } from '../../internal/keyboard/match.js';
-import { Escape, ArrowDown, Enter, Tab } from '../../internal/keyboard/keys.js';
 
 // Weekdays shorthand for english locale
 l10n.en.weekdays.shorthand.forEach((_day, index) => {

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

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { match } from '../../../internal/keyboard/match.js';
 import { Enter, ArrowLeft, ArrowRight, ArrowDown } from '../../../internal/keyboard/keys.js';
+import { match } from '../../../internal/keyboard/match.js';
 
 /**
  * @param {object} config Plugin configuration.

package/es/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>>;