@carbon/react 1.47.0 → 1.48.0

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

@@ -0,0 +1,119 @@
+/**
+ * Copyright IBM Corp. 2023
+ *
+ * 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 from 'react';
+interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    /**
+     * Optionally provide another Menu to create a submenu. props.children can't be used to specify the content of the MenuItem itself. Use props.label instead.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Specify whether the MenuItem is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Specify the kind of the MenuItem.
+     */
+    kind?: 'default' | 'danger';
+    /**
+     * A required label titling the MenuItem. Will be rendered as its text content.
+     */
+    label: string;
+    /**
+     * Provide an optional function to be called when the MenuItem is clicked.
+     */
+    onClick?: (event: React.KeyboardEvent<HTMLLIElement> | React.MouseEvent<HTMLLIElement>) => void;
+    /**
+     * Only applicable if the parent menu is in `basic` mode. Sets the menu item's icon.
+     */
+    renderIcon?: any;
+    /**
+     * Provide a shortcut for the action of this MenuItem. Note that the component will only render it as a hint but not actually register the shortcut.
+     */
+    shortcut?: string;
+}
+declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLLIElement>>;
+interface MenuItemSelectableProps {
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Specify whether the option should be selected by default.
+     */
+    defaultSelected?: boolean;
+    /**
+     * A required label titling this option.
+     */
+    label: string;
+    /**
+     * Provide an optional function to be called when the selection state changes.
+     */
+    onChange?: React.ChangeEventHandler<HTMLLIElement>;
+    /**
+     * Pass a bool to props.selected to control the state of this option.
+     */
+    selected?: boolean;
+}
+declare const MenuItemSelectable: React.ForwardRefExoticComponent<MenuItemSelectableProps & React.RefAttributes<HTMLLIElement>>;
+interface MenuItemGroupProps {
+    /**
+     * A collection of MenuItems to be rendered within this group.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * A required label titling this group.
+     */
+    label: string;
+}
+declare const MenuItemGroup: React.ForwardRefExoticComponent<MenuItemGroupProps & React.RefAttributes<HTMLLIElement>>;
+interface MenuItemRadioGroupProps {
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Specify the default selected item. Must match the type of props.items.
+     */
+    defaultSelectedItem?: any;
+    /**
+     * Provide a function to convert an item to the string that will be rendered. Defaults to item.toString().
+     */
+    itemToString?: (item: any) => string;
+    /**
+     * Provide the options for this radio group. Can be of any type, as long as you provide an appropriate props.itemToString function.
+     */
+    items?: any[];
+    /**
+     * A required label titling this radio group.
+     */
+    label: string;
+    /**
+     * Provide an optional function to be called when the selection changes.
+     */
+    onChange?: React.ChangeEventHandler<HTMLLIElement>;
+    /**
+     * Provide props.selectedItem to control the state of this radio group. Must match the type of props.items.
+     */
+    selectedItem?: any;
+}
+declare const MenuItemRadioGroup: React.ForwardRefExoticComponent<MenuItemRadioGroupProps & React.RefAttributes<HTMLLIElement>>;
+interface MenuItemDividerProps {
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+}
+declare const MenuItemDivider: React.ForwardRefExoticComponent<MenuItemDividerProps & React.RefAttributes<HTMLLIElement>>;
+export { MenuItem, MenuItemSelectable, MenuItemGroup, MenuItemRadioGroup, MenuItemDivider, };

package/es/components/Menu/MenuItem.js

@@ -39,7 +39,7 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
   } = _ref;
   const prefix = usePrefix();
   const context = useContext(MenuContext);
-  const menuItem = useRef();
+  const menuItem = useRef(null);
   const ref = useMergedRefs([forwardRef, menuItem]);
   const [boundaries, setBoundaries] = useState({
     x: -1,
@@ -61,6 +61,9 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
     });
   }
   function openSubmenu() {
+    if (!menuItem.current) {
+      return;
+    }
     const {
       x,
       y,
@@ -105,9 +108,11 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
     }, hoverIntentDelay);
   }
   function handleMouseLeave() {
-    clearTimeout(hoverIntentTimeout.current);
-    closeSubmenu();
-    menuItem.current.focus();
+    if (hoverIntentTimeout.current) {
+      clearTimeout(hoverIntentTimeout.current);
+      closeSubmenu();
+      menuItem.current?.focus();
+    }
   }
   function handleKeyDown(e) {
     if (hasChildren && match(e, ArrowRight)) {
@@ -157,13 +162,13 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
   }, rest, {
     ref: ref,
     className: classNames,
-    tabIndex: "-1",
-    "aria-disabled": isDisabled || null,
-    "aria-haspopup": hasChildren || null,
-    "aria-expanded": hasChildren ? submenuOpen : null,
+    tabIndex: -1,
+    "aria-disabled": isDisabled,
+    "aria-haspopup": hasChildren || undefined,
+    "aria-expanded": hasChildren ? submenuOpen : undefined,
     onClick: handleClick,
-    onMouseEnter: hasChildren ? handleMouseEnter : null,
-    onMouseLeave: hasChildren ? handleMouseLeave : null,
+    onMouseEnter: hasChildren ? handleMouseEnter : undefined,
+    onMouseLeave: hasChildren ? handleMouseLeave : undefined,
     onKeyDown: handleKeyDown
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--menu-item__icon`
@@ -180,7 +185,7 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
     open: submenuOpen,
     onClose: () => {
       closeSubmenu();
-      menuItem.current.focus();
+      menuItem.current?.focus();
     },
     x: boundaries.x,
     y: boundaries.y
@@ -360,7 +365,7 @@ const MenuItemRadioGroup = /*#__PURE__*/React__default.forwardRef(function MenuI
   }, /*#__PURE__*/React__default.createElement("ul", _extends({}, rest, {
     role: "group",
     "aria-label": label
-  }), items.map((item, i) => /*#__PURE__*/React__default.createElement(MenuItem, {
+  }), items?.map((item, i) => /*#__PURE__*/React__default.createElement(MenuItem, {
     key: i,
     label: itemToString(item),
     role: "menuitemradio",

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

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2023
+ *
+ * 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 { Menu } from './Menu';
+import { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable } from './MenuItem';
+export { Menu, MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, };

package/es/components/MenuButton/index.js

@@ -13,6 +13,7 @@ import { ChevronDown } from '@carbon/icons-react';
 import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 import { Menu } from '../Menu/Menu.js';
+import '../Menu/MenuItem.js';
 import { useAttachedMenu } from '../../internal/useAttachedMenu.js';
 import { useId } from '../../internal/useId.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';

package/es/components/Modal/Modal.d.ts

@@ -11,7 +11,7 @@ import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
 export declare const ModalSizes: readonly ["xs", "sm", "md", "lg"];
 export type ModalSize = (typeof ModalSizes)[number];
 export interface ModalSecondaryButton {
-    buttonText?: string;
+    buttonText?: string | React.ReactNode;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 export interface ModalProps extends ReactAttr<HTMLDivElement> {

package/es/components/Modal/Modal.js

@@ -19,6 +19,7 @@ import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsT
 import wrapFocus, { elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { IconButton } from '../IconButton/index.js';
 import { noopFn } from '../../internal/noopFn.js';
 import '../Text/index.js';
 import { Text } from '../Text/Text.js';
@@ -51,7 +52,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     shouldSubmitOnEnter,
     size,
     hasScrollingContent = false,
-    closeButtonLabel,
+    closeButtonLabel = 'Close',
     preventCloseOnClickOutside = false,
     isFullWidth,
     launcherButtonRef,
@@ -201,19 +202,22 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
       size: 'lg'
     });
   }
-  const modalButton = /*#__PURE__*/React__default.createElement("button", {
+  const modalButton = /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--modal-close-button`
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
     className: modalCloseButtonClass,
-    type: "button",
+    label: closeButtonLabel,
     onClick: onRequestClose,
-    title: ariaLabel,
-    "aria-label": closeButtonLabel ? closeButtonLabel : 'close',
+    title: closeButtonLabel,
+    "aria-label": closeButtonLabel,
+    align: "left",
     ref: button
   }, /*#__PURE__*/React__default.createElement(Close, {
     size: 20,
     "aria-hidden": "true",
     tabIndex: "-1",
     className: `${modalCloseButtonClass}__icon`
-  }));
+  })));
   const modalBody = /*#__PURE__*/React__default.createElement("div", _extends({
     ref: innerModal,
     role: "dialog"

package/es/components/OverflowMenu/next/index.js

@@ -12,6 +12,7 @@ import cx from 'classnames';
 import { OverflowMenuVertical } from '@carbon/icons-react';
 import { IconButton } from '../../IconButton/index.js';
 import { Menu } from '../../Menu/Menu.js';
+import '../../Menu/MenuItem.js';
 import { useId } from '../../../internal/useId.js';
 import { usePrefix } from '../../../internal/usePrefix.js';
 import { useAttachedMenu } from '../../../internal/useAttachedMenu.js';

package/es/components/Slug/index.js

@@ -22,14 +22,17 @@ const SlugContent = /*#__PURE__*/React__default.forwardRef(function SlugContent(
     className
   } = _ref;
   const prefix = usePrefix();
+  const hasSlugActions = React__default.Children.toArray(children).some(child => child.type?.displayName === 'SlugActions');
   const slugContentClasses = cx(className, {
-    [`${prefix}--slug-content`]: true
+    [`${prefix}--slug-content`]: true,
+    [`${prefix}--slug-content--with-actions`]: hasSlugActions
   });
   return /*#__PURE__*/React__default.createElement(ToggletipContent, {
     className: slugContentClasses,
     ref: ref
   }, children);
 });
+SlugContent.displayName = 'SlugContent';
 SlugContent.propTypes = {
   /**
    * Specify the content you want rendered inside the slug ToggleTip
@@ -54,6 +57,7 @@ const SlugActions = /*#__PURE__*/React__default.forwardRef(function SlugActions(
     ref: ref
   }, children);
 });
+SlugActions.displayName = 'SlugActions';
 SlugActions.propTypes = {
   /**
    * Specify the content you want rendered inside the slug callout toolbar

package/es/components/Tooltip/Tooltip.js

@@ -12,7 +12,7 @@ import React__default, { useRef, useState, useCallback, useEffect } from 'react'
 import { Popover, PopoverContent } from '../Popover/index.js';
 import { useDelayedState } from '../../internal/useDelayedState.js';
 import { useId } from '../../internal/useId.js';
-import { useNoInteractiveChildren, getInteractiveContent } from '../../internal/useNoInteractiveChildren.js';
+import { useNoInteractiveChildren } from '../../internal/useNoInteractiveChildren.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape, Enter, Space } from '../../internal/keyboard/keys.js';
@@ -110,14 +110,6 @@ function Tooltip(_ref) {
     }
   }, [isPointerIntersecting, leaveDelayMs, setOpen]);
   useNoInteractiveChildren(tooltipRef, 'The Tooltip component must have no interactive content rendered by the' + '`label` or `description` prop');
-  useEffect(() => {
-    if (containerRef !== null && containerRef.current) {
-      const interactiveContent = getInteractiveContent(containerRef.current);
-      if (!interactiveContent) {
-        setOpen(false);
-      }
-    }
-  });
   useEffect(() => {
     if (isDragging) {
       // Register drag stop handlers.

package/es/components/TreeView/TreeNode.js

@@ -22,6 +22,7 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     className,
     depth,
     disabled,
+    id: nodeId,
     isExpanded,
     label,
     onNodeFocusEvent,
@@ -35,7 +36,7 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   } = _ref;
   const {
     current: id
-  } = useRef(rest.id || uniqueId());
+  } = useRef(nodeId || uniqueId());
   const [expanded, setExpanded] = useState(isExpanded);
   const currentNode = useRef(null);
   const currentNodeLabel = useRef(null);
@@ -246,7 +247,8 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 });
 TreeNode.propTypes = {
   /**
-   * The value of the active node in the tree
+   * **Note:** this is controlled by the parent TreeView component, do not set manually.
+   * The ID of the active node in the tree
    */
   active: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
@@ -258,13 +260,18 @@ TreeNode.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * TreeNode depth to determine spacing, automatically calculated by default
+   * * **Note:** this is controlled by the parent TreeView component, do not set manually.
+   * TreeNode depth to determine spacing
    */
   depth: PropTypes.number,
   /**
    * Specify if the TreeNode is disabled
    */
   disabled: PropTypes.bool,
+  /**
+   * Specify the TreeNode's ID. Must be unique in the DOM and is used for props.active and props.selected
+   */
+  id: PropTypes.string,
   /**
    * Specify if the TreeNode is expanded (only applicable to parent nodes)
    */
@@ -295,6 +302,7 @@ TreeNode.propTypes = {
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
+   * **Note:** this is controlled by the parent TreeView component, do not set manually.
    * Array containing all selected node IDs in the tree
    */
   selected: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),

package/es/components/TreeView/TreeView.js

@@ -192,7 +192,7 @@ function TreeView(_ref) {
 }
 TreeView.propTypes = {
   /**
-   * Mark the active node in the tree, represented by its value
+   * Mark the active node in the tree, represented by its ID
    */
   active: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**

package/es/components/UIShell/HeaderMenu.js

@@ -148,7 +148,7 @@ class HeaderMenu extends React__default.Component {
       onKeyDown,
       ...rest
     } = this.props;
-    const hasActiveDescendant = childrenArg => React__default.Children.toArray(childrenArg).some(child => child.props.isActive || child.props.isCurrentPage || child.props.children instanceof Array && hasActiveDescendant(child.props.children));
+    const hasActiveDescendant = childrenArg => React__default.Children.toArray(childrenArg).some(child => child.props && (child.props.isActive || child.props.isCurrentPage || child.props.children instanceof Array && hasActiveDescendant(child.props.children)));
     const accessibilityLabel = {
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy

package/es/components/UIShell/SwitcherItem.d.ts

@@ -23,6 +23,10 @@ interface BaseSwitcherItemProps {
      * event handlers
      */
     onKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * event handlers
+     */
+    onClick?: (event: MouseEvent) => void;
     /**
      * Specify the tab index of the Link
      */

package/es/components/UIShell/SwitcherItem.js

@@ -88,6 +88,10 @@ SwitcherItem.propTypes = {
    * Specify the index of the SwitcherItem
    */
   index: PropTypes.number,
+  /**
+   * event handlers
+   */
+  onClick: PropTypes.func,
   /**
    * event handlers
    */

package/es/index.js

@@ -60,6 +60,8 @@ export { default as InlineLoading } from './components/InlineLoading/InlineLoadi
 export { default as Link } from './components/Link/Link.js';
 export { default as ListItem } from './components/ListItem/ListItem.js';
 export { default as Loading } from './components/Loading/Loading.js';
+export { Menu } from './components/Menu/Menu.js';
+export { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable } from './components/Menu/MenuItem.js';
 export { MenuButton } from './components/MenuButton/index.js';
 export { default as Modal } from './components/Modal/Modal.js';
 export { default as ModalWrapper } from './components/ModalWrapper/ModalWrapper.js';
@@ -139,7 +141,7 @@ export { default as SideNavSwitcher } from './components/UIShell/SideNavSwitcher
 export { default as UnorderedList } from './components/UnorderedList/UnorderedList.js';
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from './components/FeatureFlags/index.js';
 export { Heading, Section } from './components/Heading/index.js';
-export { IconButton } from './components/IconButton/index.js';
+export { IconButton, IconButtonKinds } from './components/IconButton/index.js';
 export { Layer, useLayer } from './components/Layer/index.js';
 export { Layout as unstable_Layout } from './components/Layout/index.js';
 export { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/OverflowMenuV2/index.js';
@@ -212,8 +214,6 @@ export { default as TableToolbarContent } from './components/DataTable/TableTool
 export { default as TableToolbarSearch } from './components/DataTable/TableToolbarSearch.js';
 export { default as TableToolbarMenu } from './components/DataTable/TableToolbarMenu.js';
 export { default as FilterableMultiSelect } from './components/MultiSelect/FilterableMultiSelect.js';
-export { Menu } from './components/Menu/Menu.js';
-export { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable } from './components/Menu/MenuItem.js';
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect.js';
 export { default as Pagination } from './components/Pagination/Pagination.js';
 export { default as PaginationNav } from './components/PaginationNav/PaginationNav.js';

package/lib/components/Button/Button.d.ts

@@ -65,8 +65,6 @@ interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
     tooltipPosition?: ButtonTooltipPosition;
 }
 export type ButtonProps<T extends React.ElementType> = PolymorphicProps<T, ButtonBaseProps>;
-export interface ButtonComponent {
-    <T extends React.ElementType>(props: ButtonProps<T>, context?: any): React.ReactElement<any, any> | null;
-}
+export type ButtonComponent = <T extends React.ElementType>(props: ButtonProps<T>, context?: any) => React.ReactElement<any, any> | null;
 declare const _default: ButtonComponent;
 export default _default;

package/lib/components/Button/Button.js

@@ -28,6 +28,12 @@ const ButtonKinds = ['primary', 'secondary', 'danger', 'ghost', 'danger--primary
 const ButtonSizes = ['sm', 'md', 'lg', 'xl', '2xl'];
 const ButtonTooltipAlignments = ['start', 'center', 'end'];
 const ButtonTooltipPositions = ['top', 'right', 'bottom', 'left'];
+function isIconOnlyButton(hasIconOnly, _kind) {
+  if (hasIconOnly === true) {
+    return true;
+  }
+  return false;
+}
 const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button(_ref, ref) {
   let {
     as,
@@ -60,7 +66,6 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
     // Prevent clicks on the tooltip from triggering the button click event
     if (evt.target === tooltipRef.current) {
       evt.preventDefault();
-      return;
     }
   };
   const buttonClasses = cx__default["default"](className, {
@@ -123,7 +128,7 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
     component = 'a';
     otherProps = anchorProps;
   }
-  if (!hasIconOnly) {
+  if (!isIconOnlyButton(hasIconOnly)) {
     return /*#__PURE__*/React__default["default"].createElement(component, {
       onMouseEnter,
       onMouseLeave,
@@ -161,7 +166,7 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
       onFocus: onFocus,
       onBlur: onBlur,
       onClick: events.composeEventHandlers([onClick, handleClick])
-    }, rest, commonProps, otherProps), iconOnlyImage ? iconOnlyImage : children);
+    }, rest, commonProps, otherProps), iconOnlyImage ?? children);
   }
 });
 Button.displayName = 'Button';
@@ -216,6 +221,7 @@ Button.propTypes = {
   /**
    * Specify the kind of Button you want to create
    */
+  // TODO: this should be either ButtonKinds or IconButtonKinds based on the value of "hasIconOnly"
   kind: PropTypes__default["default"].oneOf(ButtonKinds),
   /**
    * Provide an optional function to be called when the button element

package/lib/components/ComboButton/index.js

@@ -18,6 +18,7 @@ var index = require('../IconButton/index.js');
 var Button = require('../Button/Button.js');
 require('../Button/Button.Skeleton.js');
 var Menu = require('../Menu/Menu.js');
+require('../Menu/MenuItem.js');
 var useAttachedMenu = require('../../internal/useAttachedMenu.js');
 var useId = require('../../internal/useId.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');

package/lib/components/ComposedModal/ModalHeader.js

@@ -15,6 +15,7 @@ var PropTypes = require('prop-types');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var usePrefix = require('../../internal/usePrefix.js');
+var index = require('../IconButton/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -55,16 +56,21 @@ const ModalHeader = /*#__PURE__*/React__default["default"].forwardRef(function M
     className: labelClass
   }, label), title && /*#__PURE__*/React__default["default"].createElement("h3", {
     className: titleClass
-  }, title), children, /*#__PURE__*/React__default["default"].createElement("button", {
-    onClick: handleCloseButtonClick,
+  }, title), children, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--modal-close-button`
+  }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
     className: closeClass,
+    label: iconDescription,
+    onClick: handleCloseButtonClick,
     title: iconDescription,
     "aria-label": iconDescription,
-    type: "button"
+    align: "left"
   }, /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, {
     size: 20,
+    "aria-hidden": "true",
+    tabIndex: "-1",
     className: closeIconClass
-  })));
+  }))));
 });
 ModalHeader.propTypes = {
   /**

package/lib/components/DangerButton/DangerButton.js

@@ -18,8 +18,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const DangerButton = props => /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({
+const DangerButton = props => /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({}, props, {
   kind: "danger"
-}, props));
+}));
 
 exports["default"] = DangerButton;

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

@@ -11,7 +11,7 @@ type TableExpandHeaderPropsBase = {
     /**
      * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandHeader
      */
-    ['aria-controls']: string;
+    ['aria-controls']?: string;
     /**
      * @deprecated This prop has been deprecated and will be
      * removed in the next major release of Carbon. Use the

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

@@ -10,7 +10,7 @@ interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
     /**
      * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
      */
-    ['aria-controls']: string;
+    ['aria-controls']?: string;
     /**
      * @deprecated This prop has been deprecated and will be
      * removed in the next major release of Carbon. Use the

package/lib/components/DataTable/TableExpandRow.js

@@ -87,7 +87,6 @@ TableExpandRow.propTypes = {
    * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
    * TODO: make this required in v12
    */
-  /**@ts-ignore*/
   ['aria-controls']: PropTypes__default["default"].string,
   /**
    * Specify the string read by a voice reader when the expand trigger is

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

@@ -6,7 +6,16 @@
  */
 import { ReactNodeLike } from 'prop-types';
 import React, { type MouseEventHandler } from 'react';
+import { sortStates } from './state/sorting';
 import { ReactAttr } from '../../types/common';
+import { DataTableSortState } from './state/sortStates';
+export type TableHeaderTranslationKey = 'carbon.table.header.icon.description';
+export interface TableHeaderTranslationArgs {
+    header: React.ReactNode;
+    isSortHeader?: boolean;
+    sortDirection?: DataTableSortState;
+    sortStates: typeof sortStates;
+}
 interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonElement> {
     /**
      * Pass in children that will be embedded in the table header label
@@ -58,7 +67,7 @@ interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonEl
      * choice. Translation keys are available on the `translationKeys` field for
      * this component.
      */
-    translateWithId?: (key: string, { header, sortDirection, isSortHeader, sortStates }: {
+    translateWithId?: (key: TableHeaderTranslationKey, { header, sortDirection, isSortHeader, sortStates }: {
         header: any;
         sortDirection: any;
         isSortHeader: any;

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

@@ -16,7 +16,7 @@ import TableExpandHeader from './TableExpandHeader';
 import TableExpandRow from './TableExpandRow';
 import TableExpandedRow from './TableExpandedRow';
 import TableHead from './TableHead';
-import TableHeader from './TableHeader';
+import TableHeader, { TableHeaderTranslationKey, TableHeaderTranslationArgs } from './TableHeader';
 import TableRow from './TableRow';
 import TableSelectAll from './TableSelectAll';
 import TableSelectRow from './TableSelectRow';
@@ -26,5 +26,6 @@ import TableToolbarAction from './TableToolbarAction';
 import TableToolbarContent from './TableToolbarContent';
 import TableToolbarSearch from './TableToolbarSearch';
 import TableToolbarMenu from './TableToolbarMenu';
-export { DataTable, type DataTableCell, type DataTableHeader, type DataTableProps, type DataTableRenderProps, type DataTableRow, type DataTableSize, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarSearch, TableToolbarMenu, };
+import type { DataTableSortState } from './state/sortStates';
+export { DataTable, type DataTableCell, type DataTableHeader, type DataTableProps, type DataTableRenderProps, type DataTableSortState, type DataTableRow, type DataTableSize, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, type TableHeaderTranslationKey, type TableHeaderTranslationArgs, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarSearch, TableToolbarMenu, };
 export default DataTable;