@carbon/react 1.36.0 → 1.37.0-rc.1

package/es/components/Tag/Tag.d.ts

@@ -0,0 +1,122 @@
+/**
+ * Copyright IBM Corp. 2016, 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 PropTypes from 'prop-types';
+import React from 'react';
+import { PolymorphicProps } from '../../types/common';
+declare const TYPES: {
+    red: string;
+    magenta: string;
+    purple: string;
+    blue: string;
+    cyan: string;
+    teal: string;
+    green: string;
+    gray: string;
+    'cool-gray': string;
+    'warm-gray': string;
+    'high-contrast': string;
+    outline: string;
+};
+export interface TagBaseProps {
+    /**
+     * Provide content to be rendered inside of a <Tag>
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide a custom className that is applied to the containing <span>
+     */
+    className?: string;
+    /**
+     * Specify if the <Tag> is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Determine if <Tag> is a filter/chip
+     */
+    filter?: boolean;
+    /**
+     * Specify the id for the tag.
+     */
+    id?: string;
+    /**
+     * Click handler for filter tag close button.
+     */
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Optional prop to render a custom icon.
+     * Can be a React component class
+     */
+    renderIcon?: React.ElementType;
+    /**
+     * Specify the size of the Tag. Currently supports either `sm` or
+     * 'md' (default) sizes.
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Text to show on clear filters
+     */
+    title?: string;
+    /**
+     * Specify the type of the <Tag>
+     */
+    type?: keyof typeof TYPES;
+}
+export type TagProps<T extends React.ElementType> = PolymorphicProps<T, TagBaseProps>;
+declare const Tag: {
+    <T extends React.ElementType<any>>({ children, className, id, type, filter, renderIcon: CustomIconElement, title, disabled, onClose, size, as: BaseComponent, ...other }: TagProps<T>): JSX.Element;
+    propTypes: {
+        /**
+         * Provide an alternative tag or component to use instead of the default
+         * wrapping element
+         */
+        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        /**
+         * Provide content to be rendered inside of a <Tag>
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom className that is applied to the containing <span>
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify if the <Tag> is disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Determine if <Tag> is a filter/chip
+         */
+        filter: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the id for the tag.
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Click handler for filter tag close button.
+         */
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Optional prop to render a custom icon.
+         * Can be a React component class
+         */
+        renderIcon: PropTypes.Requireable<object>;
+        /**
+         * Specify the size of the Tag. Currently supports either `sm` or
+         * 'md' (default) sizes.
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * Text to show on clear filters
+         */
+        title: PropTypes.Requireable<string>;
+        /**
+         * Specify the type of the <Tag>
+         */
+        type: PropTypes.Requireable<string>;
+    };
+};
+export declare const types: string[];
+export default Tag;

package/es/components/Tag/Tag.js

@@ -55,6 +55,7 @@ const Tag = _ref => {
     [`${prefix}--tag--${type}`]: type,
     [`${prefix}--tag--interactive`]: other.onClick && !filter
   });
+  const typeText = type !== undefined && type in Object.keys(TYPES) ? TYPES[type] : '';
   const handleClose = event => {
     if (onClose) {
       event.stopPropagation();
@@ -68,8 +69,8 @@ const Tag = _ref => {
       id: tagId
     }, other), /*#__PURE__*/React__default.createElement("span", {
       className: `${prefix}--tag__label`,
-      title: typeof children === 'string' ? children : null
-    }, children !== null && children !== undefined ? children : TYPES[type]), /*#__PURE__*/React__default.createElement("button", {
+      title: typeof children === 'string' ? children : undefined
+    }, children !== null && children !== undefined ? children : typeText), /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: `${prefix}--tag__close-icon`,
       onClick: handleClose,
@@ -86,8 +87,8 @@ const Tag = _ref => {
   }, other), CustomIconElement ? /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--tag__custom-icon`
   }, /*#__PURE__*/React__default.createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default.createElement("span", {
-    title: typeof children === 'string' ? children : null
-  }, children !== null && children !== undefined ? children : TYPES[type]));
+    title: typeof children === 'string' ? children : undefined
+  }, children !== null && children !== undefined ? children : typeText));
 };
 Tag.propTypes = {
   /**
@@ -139,6 +140,5 @@ Tag.propTypes = {
   type: PropTypes.oneOf(Object.keys(TYPES))
 };
 const types = Object.keys(TYPES);
-var Tag$1 = Tag;
 
-export { Tag$1 as default, types };
+export { Tag as default, types };

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

@@ -0,0 +1,11 @@
+/**
+ * Copyright IBM Corp. 2016, 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 Tag from './Tag';
+export * from './Tag.Skeleton';
+export * from './Tag';
+export default Tag;
+export { Tag };

package/es/components/TextArea/TextArea.js

@@ -59,7 +59,7 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     id,
     onChange: evt => {
       if (!other.disabled && onChange) {
-        evt.persist();
+        evt?.persist?.();
         // delay textCount assignation to give the textarea element value time to catch up if is a controlled input
         setTimeout(() => {
           setTextCount(evt.target?.value?.length);

package/es/components/Tile/Tile.js

@@ -72,12 +72,12 @@ const ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableT
   const classes = cx(`${prefix}--tile`, `${prefix}--tile--clickable`, clicked && `${prefix}--tile--is-clicked`, light && `${prefix}--tile--light`, className);
   const [isSelected, setIsSelected] = useState(clicked);
   function handleOnClick(evt) {
-    evt.persist();
+    evt?.persist?.();
     setIsSelected(!isSelected);
     onClick(evt);
   }
   function handleOnKeyDown(evt) {
-    evt.persist();
+    evt?.persist?.();
     if (matches(evt, [Enter, Space])) {
       evt.preventDefault();
       setIsSelected(!isSelected);
@@ -181,7 +181,7 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
   // TODO: rename to handleClick when handleClick prop is deprecated
   function handleOnClick(evt) {
     evt.preventDefault();
-    evt.persist();
+    evt?.persist?.();
     setIsSelected(!isSelected);
     clickHandler(evt);
     onChange(evt);
@@ -189,7 +189,7 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
 
   // TODO: rename to handleKeyDown when handleKeyDown prop is deprecated
   function handleOnKeyDown(evt) {
-    evt.persist();
+    evt?.persist?.();
     if (matches(evt, [Enter, Space])) {
       evt.preventDefault();
       setIsSelected(!isSelected);
@@ -335,7 +335,7 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
     }
   }
   function handleClick(evt) {
-    evt.persist();
+    evt?.persist?.();
     setIsExpanded(!isExpanded);
     setMaxHeight();
   }

package/es/components/TimePicker/TimePicker.js

@@ -110,12 +110,14 @@ const TimePicker = /*#__PURE__*/React__default.forwardRef(function TimePicker(_r
     };
     const mappedChildren = React__default.Children.map(children, pickerSelect => {
       const item = pickerSelect;
-      return /*#__PURE__*/React__default.cloneElement(item, {
-        ...item.props,
-        disabled: disabled,
-        readOnly: readOnly,
-        ...readOnlyEventHandlers
-      });
+      if (item) {
+        return /*#__PURE__*/React__default.cloneElement(item, {
+          ...item.props,
+          disabled: disabled,
+          readOnly: readOnly,
+          ...readOnlyEventHandlers
+        });
+      }
     });
     return mappedChildren;
   }

package/es/components/Toggle/Toggle.Skeleton.js

@@ -13,7 +13,6 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 const ToggleSkeleton = _ref => {
   let {
-    'aria-label': ariaLabel = 'Toggle is loading',
     className,
     ...rest
   } = _ref;
@@ -21,9 +20,7 @@ const ToggleSkeleton = _ref => {
   const skeletonClassNames = cx(`${prefix}--toggle ${prefix}--toggle--skeleton`, className);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: skeletonClassNames
-  }, rest, {
-    "aria-label": ariaLabel
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }, rest), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--toggle__skeleton-circle`
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--toggle__skeleton-rectangle`

package/es/components/Toggle/Toggle.js

@@ -86,7 +86,7 @@ function Toggle(_ref) {
       role: "switch",
       type: "button",
       "aria-checked": checked,
-      "aria-labelledby": ariaLabelledby,
+      "aria-labelledby": id,
       disabled: disabled,
       onClick: handleClick
     })), /*#__PURE__*/React__default.createElement(LabelComponent, {

package/es/components/ToggleSmall/ToggleSmall.Skeleton.js

@@ -63,8 +63,5 @@ _defineProperty(ToggleSmallSkeleton, "propTypes", {
    */
   labelText: PropTypes.string
 });
-_defineProperty(ToggleSmallSkeleton, "defaultProps", {
-  ['aria-label']: 'Toggle is loading'
-});
 
 export { ToggleSmallSkeleton, ToggleSmallSkeleton as default };

package/es/components/UIShell/HeaderMenuItem.js

@@ -82,6 +82,5 @@ HeaderMenuItem.propTypes = {
    */
   tabIndex: PropTypes.number
 };
-var HeaderMenuItem$1 = HeaderMenuItem;
 
-export { HeaderMenuItem$1 as default };
+export { HeaderMenuItem as default };

package/es/components/UIShell/Link.js

@@ -55,6 +55,5 @@ const LinkPropTypes = {
 };
 Link.displayName = 'Link';
 Link.propTypes = LinkPropTypes;
-var Link$1 = Link;
 
-export { LinkPropTypes, Link$1 as default };
+export { LinkPropTypes, Link as default };

package/es/components/UIShell/SideNav.js

@@ -255,6 +255,4 @@ SideNav.propTypes = {
   // translateById: PropTypes.func,
 };
 
-var SideNav$1 = SideNav;
-
-export { SideNavContext, SideNav$1 as default };
+export { SideNavContext, SideNav as default };

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

@@ -0,0 +1,35 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+export { default as Content } from './Content';
+export { default as Header } from './Header';
+export { default as HeaderContainer } from './HeaderContainer';
+export { default as HeaderGlobalAction } from './HeaderGlobalAction';
+export { default as HeaderGlobalBar } from './HeaderGlobalBar';
+export { default as HeaderMenu } from './HeaderMenu';
+export { default as HeaderMenuButton } from './HeaderMenuButton';
+export { default as HeaderMenuItem } from './HeaderMenuItem';
+export { default as HeaderName } from './HeaderName';
+export { default as HeaderNavigation } from './HeaderNavigation';
+export { default as HeaderPanel } from './HeaderPanel';
+export { default as HeaderSideNavItems } from './HeaderSideNavItems';
+export { default as Switcher } from './Switcher';
+export { default as SwitcherItem } from './SwitcherItem';
+export { default as SwitcherDivider } from './SwitcherDivider';
+export { default as SkipToContent } from './SkipToContent';
+export { default as SideNav } from './SideNav';
+export { default as SideNavDetails } from './SideNavDetails';
+export { default as SideNavDivider } from './SideNavDivider';
+export { default as SideNavFooter } from './SideNavFooter';
+export { default as SideNavHeader } from './SideNavHeader';
+export { default as SideNavIcon } from './SideNavIcon';
+export { default as SideNavItem } from './SideNavItem';
+export { default as SideNavItems } from './SideNavItems';
+export { default as SideNavLink } from './SideNavLink';
+export { default as SideNavLinkText } from './SideNavLinkText';
+export { default as SideNavMenu } from './SideNavMenu';
+export { default as SideNavMenuItem } from './SideNavMenuItem';
+export { default as SideNavSwitcher } from './SideNavSwitcher';

package/es/index.js

@@ -44,6 +44,7 @@ export { default as FluidForm } from './components/FluidForm/FluidForm.js';
 export { FormContext } from './components/FluidForm/FormContext.js';
 export { default as Form } from './components/Form/Form.js';
 export { default as FormGroup } from './components/FormGroup/FormGroup.js';
+export { default as FormLabel } from './components/FormLabel/FormLabel.js';
 export { FlexGrid } from './components/Grid/FlexGrid.js';
 export { Grid } from './components/Grid/Grid.js';
 export { default as Row } from './components/Grid/Row.js';
@@ -71,11 +72,13 @@ export { default as Select } from './components/Select/Select.js';
 export { default as SelectSkeleton } from './components/Select/Select.Skeleton.js';
 export { default as SelectItem } from './components/SelectItem/SelectItem.js';
 export { default as SelectItemGroup } from './components/SelectItemGroup/SelectItemGroup.js';
+export { default as SkeletonPlaceholder } from './components/SkeletonPlaceholder/SkeletonPlaceholder.js';
 export { default as SkeletonText } from './components/SkeletonText/SkeletonText.js';
 export { default as Slider } from './components/Slider/index.js';
 export { IconTab, Tab, TabList, TabPanel, TabPanels, Tabs } from './components/Tabs/Tabs.js';
 export { default as TabContent } from './components/TabContent/TabContent.js';
 export { default as TabsSkeleton } from './components/Tabs/Tabs.Skeleton.js';
+export { default as Tag, types } from './components/Tag/Tag.js';
 export { default as TagSkeleton } from './components/Tag/Tag.Skeleton.js';
 export { default as TextArea } from './components/TextArea/TextArea.js';
 export { default as TextAreaSkeleton } from './components/TextArea/TextArea.Skeleton.js';
@@ -88,6 +91,35 @@ export { Toggle } from './components/Toggle/Toggle.js';
 export { default as ToggleSkeleton } from './components/Toggle/Toggle.Skeleton.js';
 export { default as ToggleSmallSkeleton } from './components/ToggleSmall/ToggleSmall.Skeleton.js';
 export { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel } from './components/Toggletip/index.js';
+export { default as Content } from './components/UIShell/Content.js';
+export { default as Header } from './components/UIShell/Header.js';
+export { default as HeaderContainer } from './components/UIShell/HeaderContainer.js';
+export { default as HeaderGlobalAction } from './components/UIShell/HeaderGlobalAction.js';
+export { default as HeaderGlobalBar } from './components/UIShell/HeaderGlobalBar.js';
+export { default as HeaderMenu } from './components/UIShell/HeaderMenu.js';
+export { default as HeaderMenuButton } from './components/UIShell/HeaderMenuButton.js';
+export { default as HeaderMenuItem } from './components/UIShell/HeaderMenuItem.js';
+export { default as HeaderName } from './components/UIShell/HeaderName.js';
+export { default as HeaderNavigation } from './components/UIShell/HeaderNavigation.js';
+export { default as HeaderPanel } from './components/UIShell/HeaderPanel.js';
+export { default as HeaderSideNavItems } from './components/UIShell/HeaderSideNavItems.js';
+export { default as Switcher } from './components/UIShell/Switcher.js';
+export { default as SwitcherItem } from './components/UIShell/SwitcherItem.js';
+export { default as SwitcherDivider } from './components/UIShell/SwitcherDivider.js';
+export { default as SkipToContent } from './components/UIShell/SkipToContent.js';
+export { default as SideNav } from './components/UIShell/SideNav.js';
+export { default as SideNavDetails } from './components/UIShell/SideNavDetails.js';
+export { default as SideNavDivider } from './components/UIShell/SideNavDivider.js';
+export { default as SideNavFooter } from './components/UIShell/SideNavFooter.js';
+export { default as SideNavHeader } from './components/UIShell/SideNavHeader.js';
+export { default as SideNavIcon } from './components/UIShell/SideNavIcon.js';
+export { default as SideNavItem } from './components/UIShell/SideNavItem.js';
+export { default as SideNavItems } from './components/UIShell/SideNavItems.js';
+export { default as SideNavLink } from './components/UIShell/SideNavLink.js';
+export { default as SideNavLinkText } from './components/UIShell/SideNavLinkText.js';
+export { default as SideNavMenu } from './components/UIShell/SideNavMenu.js';
+export { default as SideNavMenuItem } from './components/UIShell/SideNavMenuItem.js';
+export { default as SideNavSwitcher } from './components/UIShell/SideNavSwitcher.js';
 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';
@@ -120,7 +152,6 @@ export { default as Copy } from './components/Copy/Copy.js';
 export { default as CopyButton } from './components/CopyButton/CopyButton.js';
 export { default as ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary.js';
 export { default as FormItem } from './components/FormItem/FormItem.js';
-export { default as FormLabel } from './components/FormLabel/FormLabel.js';
 export { default as InlineLoading } from './components/InlineLoading/InlineLoading.js';
 export { default as ModalWrapper } from './components/ModalWrapper/ModalWrapper.js';
 export { default as ProgressIndicatorSkeleton } from './components/ProgressIndicator/ProgressIndicator.Skeleton.js';
@@ -128,17 +159,6 @@ export { default as TextInputSkeleton } from './components/TextInput/TextInput.S
 export { default as TextInput } from './components/TextInput/TextInput.js';
 export { default as TreeNode } from './components/TreeView/TreeNode.js';
 export { default as TreeView } from './components/TreeView/TreeView.js';
-export { default as HeaderContainer } from './components/UIShell/HeaderContainer.js';
-export { default as HeaderMenuButton } from './components/UIShell/HeaderMenuButton.js';
-export { default as HeaderName } from './components/UIShell/HeaderName.js';
-export { default as HeaderNavigation } from './components/UIShell/HeaderNavigation.js';
-export { default as HeaderSideNavItems } from './components/UIShell/HeaderSideNavItems.js';
-export { default as SkipToContent } from './components/UIShell/SkipToContent.js';
-export { default as SideNavDivider } from './components/UIShell/SideNavDivider.js';
-export { default as SideNavFooter } from './components/UIShell/SideNavFooter.js';
-export { default as SideNavIcon } from './components/UIShell/SideNavIcon.js';
-export { default as SideNavItem } from './components/UIShell/SideNavItem.js';
-export { default as SideNavLinkText } from './components/UIShell/SideNavLinkText.js';
 export { default as ProgressBar } from './components/ProgressBar/ProgressBar.js';
 export { default as unstable__FluidComboBox } from './components/FluidComboBox/FluidComboBox.js';
 export { default as unstable__FluidComboBoxSkeleton } from './components/FluidComboBox/FluidComboBox.Skeleton.js';
@@ -193,29 +213,9 @@ export { ProgressIndicator, ProgressStep } from './components/ProgressIndicator/
 export { default as RadioTile } from './components/RadioTile/RadioTile.js';
 export { default as SecondaryButton } from './components/SecondaryButton/SecondaryButton.js';
 export { default as SkeletonIcon } from './components/SkeletonIcon/SkeletonIcon.js';
-export { default as SkeletonPlaceholder } from './components/SkeletonPlaceholder/SkeletonPlaceholder.js';
 export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.js';
 export { default as StructuredListSkeleton } from './components/StructuredList/StructuredList.Skeleton.js';
 export { StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListWrapper } from './components/StructuredList/StructuredList.js';
 export { default as Switch } from './components/Switch/Switch.js';
 export { default as IconSwitch } from './components/Switch/IconSwitch.js';
-export { default as Tag, types } from './components/Tag/Tag.js';
-export { default as Content } from './components/UIShell/Content.js';
-export { default as Header } from './components/UIShell/Header.js';
-export { default as HeaderGlobalAction } from './components/UIShell/HeaderGlobalAction.js';
-export { default as HeaderGlobalBar } from './components/UIShell/HeaderGlobalBar.js';
-export { default as HeaderMenu } from './components/UIShell/HeaderMenu.js';
-export { default as HeaderMenuItem } from './components/UIShell/HeaderMenuItem.js';
-export { default as HeaderPanel } from './components/UIShell/HeaderPanel.js';
-export { default as Switcher } from './components/UIShell/Switcher.js';
-export { default as SwitcherItem } from './components/UIShell/SwitcherItem.js';
-export { default as SwitcherDivider } from './components/UIShell/SwitcherDivider.js';
-export { default as SideNav } from './components/UIShell/SideNav.js';
-export { default as SideNavDetails } from './components/UIShell/SideNavDetails.js';
-export { default as SideNavHeader } from './components/UIShell/SideNavHeader.js';
-export { default as SideNavItems } from './components/UIShell/SideNavItems.js';
-export { default as SideNavLink } from './components/UIShell/SideNavLink.js';
-export { default as SideNavMenu } from './components/UIShell/SideNavMenu.js';
-export { default as SideNavMenuItem } from './components/UIShell/SideNavMenuItem.js';
-export { default as SideNavSwitcher } from './components/UIShell/SideNavSwitcher.js';
 export { Stack } from './components/Stack/Stack.js';

package/es/types/common.d.ts

@@ -9,3 +9,10 @@ export type ForwardRefReturn<T, P = unknown> = React.ForwardRefExoticComponent<F
 export type PolymorphicProps<Element extends React.ElementType, Props> = Props & Omit<React.ComponentProps<Element>, 'as'> & {
     as?: Element;
 };
+export interface InternationalProps<MID = string, ARGS = Record<string, unknown>> {
+    /**
+     * Supply a method to translate internal strings with your i18n tool of
+     * choice.
+     */
+    translateWithId?(messageId: MID, args?: ARGS): string;
+}

package/lib/components/Button/Button.js

@@ -123,17 +123,18 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
     component = 'a';
     otherProps = anchorProps;
   }
-  const Button = /*#__PURE__*/React__default["default"].createElement(component, {
-    onMouseEnter,
-    onMouseLeave,
-    onFocus,
-    onBlur,
-    onClick,
-    ...rest,
-    ...commonProps,
-    ...otherProps
-  }, assistiveText, children, buttonImage);
-  if (hasIconOnly) {
+  if (!hasIconOnly) {
+    return /*#__PURE__*/React__default["default"].createElement(component, {
+      onMouseEnter,
+      onMouseLeave,
+      onFocus,
+      onBlur,
+      onClick,
+      ...rest,
+      ...commonProps,
+      ...otherProps
+    }, assistiveText, children, buttonImage);
+  } else {
     let align = undefined;
     if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
       if (tooltipAlignment === 'center') {
@@ -162,7 +163,6 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
       onClick: events.composeEventHandlers([onClick, handleClick])
     }, rest, commonProps, otherProps), iconOnlyImage ? iconOnlyImage : children);
   }
-  return Button;
 });
 Button.displayName = 'Button';
 Button.propTypes = {

package/lib/components/ComboBox/ComboBox.js

@@ -219,7 +219,7 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
     }
     if (event.target === textInput.current && isOpen) {
       event.preventDownshiftDefault = true;
-      event.persist();
+      event?.persist?.();
     }
   };
   const showWarning = !invalid && warn;
@@ -300,8 +300,6 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
       }
     });
     const inputProps = getInputProps({
-      // Remove excess aria `aria-labelledby`. HTML <label for> provides this aria information.
-      'aria-labelledby': null,
       disabled,
       placeholder,
       onClick() {
@@ -318,7 +316,7 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
           if (event.target === textInput.current && isOpen) {
             toggleMenu();
             event.preventDownshiftDefault = true;
-            event.persist();
+            event?.persist?.();
           }
         }
         if (match.match(event, keys.Home)) {

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

@@ -99,6 +99,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         [key: string]: unknown;
     }) => {
         ariaLabel: string;
+        ['aria-label']: string;
         isExpanded: boolean;
         onExpand: (e: MouseEvent) => void;
         [key: string]: unknown;
@@ -109,6 +110,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         [key: string]: unknown;
     }) => {
         ariaLabel: string;
+        ['aria-label']: string;
         disabled: boolean | undefined;
         isExpanded?: boolean;
         isSelected?: boolean;
@@ -116,6 +118,13 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         onExpand: (e: MouseEvent) => void;
         [key: string]: unknown;
     };
+    getExpandedRowProps: (getExpandedRowPropsArgs: {
+        row: DataTableRow<ColTypes>;
+        [key: string]: unknown;
+    }) => {
+        ['id']: string;
+        [key: string]: unknown;
+    };
     getSelectionProps: (getSelectionPropsArgs: {
         onClick?: (e: MouseEvent) => void;
         row: DataTableRow<ColTypes>;
@@ -141,7 +150,9 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         [key: string]: unknown;
     }) => {
         onCancel: () => void;
+        onSelectAll?: () => void | undefined;
         shouldShowBatchActions: boolean;
+        totalCount: number;
         totalSelected: number;
         [key: string]: unknown;
     };
@@ -375,6 +386,8 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         onExpand?: ((e: MouseEvent) => void) | undefined;
     }) => {
         ariaLabel: string;
+        'aria-label': string;
+        'aria-controls': string;
         isExpanded: boolean;
         onExpand: any;
     };
@@ -411,9 +424,24 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         onExpand: any;
         isExpanded: boolean | undefined;
         ariaLabel: string;
+        'aria-label': string;
+        'aria-controls': string;
         isSelected: boolean | undefined;
         disabled: boolean | undefined;
     };
+    /**
+     * Get the props associated with an expanded row
+     *
+     * @param {object} config
+     * @param {object} config.row the parent row we want the props for
+     * @returns {object}
+     */
+    getExpandedRowProps: ({ row, ...rest }: {
+        [key: string]: unknown;
+        row: DataTableRow<ColTypes>;
+    }) => {
+        id: string;
+    };
     /**
      * Gets the props associated with selection for a header or a row, where
      * applicable. Most often used to indicate selection status of the table or
@@ -452,6 +480,8 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         shouldShowBatchActions: boolean;
         totalSelected: number;
         onCancel: () => void;
+        onSelectAll: undefined;
+        totalCount: number;
     };
     /**
      * Helper utility to get the Table Props.