@carbon/react 1.25.0 → 1.26.0-rc.0

package/es/components/Tile/Tile.js

@@ -22,7 +22,7 @@ import { Enter, Space } from '../../internal/keyboard/keys.js';
 var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
 
 var _excluded = ["children", "className", "light"],
-    _excluded2 = ["children", "className", "clicked", "href", "light", "onClick", "onKeyDown"],
+    _excluded2 = ["children", "className", "clicked", "disabled", "href", "light", "onClick", "onKeyDown"],
     _excluded3 = ["children", "className", "disabled", "id", "light", "name", "onClick", "onChange", "onKeyDown", "selected", "tabIndex", "title", "value"],
     _excluded4 = ["tabIndex", "className", "children", "expanded", "tileMaxHeight", "tilePadding", "onClick", "onKeyUp", "tileCollapsedIconText", "tileExpandedIconText", "tileCollapsedLabel", "tileExpandedLabel", "light"];
 var Tile = /*#__PURE__*/React__default.forwardRef(function Tile(_ref, ref) {
@@ -64,6 +64,7 @@ var ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableTil
       className = _ref2.className,
       _ref2$clicked = _ref2.clicked,
       clicked = _ref2$clicked === void 0 ? false : _ref2$clicked,
+      disabled = _ref2.disabled,
       href = _ref2.href,
       light = _ref2.light,
       _ref2$onClick = _ref2.onClick,
@@ -101,9 +102,10 @@ var ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableTil
   return /*#__PURE__*/React__default.createElement(Link, _extends({
     className: classes,
     href: href,
-    onClick: handleOnClick,
+    onClick: !disabled ? handleOnClick : null,
     onKeyDown: handleOnKeyDown,
-    ref: ref
+    ref: ref,
+    disabled: disabled
   }, rest), children);
 });
 ClickableTile.displayName = 'ClickableTile';
@@ -123,6 +125,11 @@ ClickableTile.propTypes = {
    */
   clicked: PropTypes.bool,
 
+  /**
+   * Specify whether the ClickableTile should be disabled
+   */
+  disabled: PropTypes.bool,
+
   /**
    * The href for the link.
    */
@@ -359,7 +366,7 @@ function ExpandableTile(_ref4) {
       isExpanded = _useState18[0],
       setIsExpanded = _useState18[1];
 
-  var _useState19 = useState(false),
+  var _useState19 = useState(true),
       _useState20 = _slicedToArray(_useState19, 2),
       interactive = _useState20[0],
       setInteractive = _useState20[1];
@@ -429,11 +436,11 @@ function ExpandableTile(_ref4) {
     setIsTilePadding(paddingTop + paddingBottom);
   }, [isTileMaxHeight]);
   useIsomorphicEffect(function () {
-    if (getInteractiveContent(belowTheFold.current)) {
-      setInteractive(true);
+    if (!getInteractiveContent(belowTheFold.current)) {
+      setInteractive(false);
       return;
-    } else if (getInteractiveContent(aboveTheFold.current)) {
-      setInteractive(true);
+    } else if (!getInteractiveContent(aboveTheFold.current)) {
+      setInteractive(false);
     }
   }, []);
   useIsomorphicEffect(function () {

package/es/components/UIShell/HeaderMenu.js

@@ -12,10 +12,11 @@ import React__default from 'react';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space, Escape } from '../../internal/keyboard/keys.js';
 
-var _excluded = ["isCurrentPage", "aria-label", "aria-labelledby", "className", "children", "renderMenuContent", "menuLinkName", "focusRef"];
+var _excluded = ["isActive", "isCurrentPage", "aria-label", "aria-labelledby", "className", "children", "renderMenuContent", "menuLinkName", "focusRef"];
 /**
  * `HeaderMenu` is used to render submenu's in the `Header`. Most often children
  * will be a `HeaderMenuItem`. It handles certain keyboard events to help
@@ -149,6 +150,7 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
       var prefix = this.context;
 
       var _this$props = this.props,
+          isActive = _this$props.isActive,
           isCurrentPage = _this$props.isCurrentPage,
           ariaLabel = _this$props['aria-label'],
           ariaLabelledBy = _this$props['aria-labelledby'],
@@ -164,7 +166,8 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
         'aria-labelledby': ariaLabelledBy
       };
       var itemClassName = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--header__submenu"), true), _defineProperty(_cx, customClassName, !!customClassName), _cx));
-      var linkClassName = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--header__menu-item"), true), _defineProperty(_cx2, "".concat(prefix, "--header__menu-title"), true), _defineProperty(_cx2, "".concat(prefix, "--header__menu-item--current"), isCurrentPage), _cx2)); // Notes on eslint comments and based on the examples in:
+      var isActivePage = isActive ? isActive : isCurrentPage;
+      var linkClassName = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--header__menu-item"), true), _defineProperty(_cx2, "".concat(prefix, "--header__menu-title"), true), _defineProperty(_cx2, "".concat(prefix, "--header__menu-item--current"), isActivePage), _cx2)); // Notes on eslint comments and based on the examples in:
       // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#
       // - The focus is handled by the <a> menuitem, onMouseOver is for mouse
       // users
@@ -218,9 +221,15 @@ _defineProperty(HeaderMenu, "propTypes", _objectSpread2(_objectSpread2({}, AriaL
   focusRef: PropTypes.func,
 
   /**
-   * Applies selected styles to the item if a user sets this to true and aria-current !== 'page'.
+   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
    */
-  isCurrentPage: PropTypes.bool,
+  isActive: PropTypes.bool,
+
+  /**
+   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+   * @deprecated Please use `isActive` instead. This will be removed in the next major release.
+   */
+  isCurrentPage: deprecate(PropTypes.bool, 'The `isCurrentPage` prop for `HeaderMenu` has ' + 'been deprecated. Please use `isActive` instead. This will be removed in the next major release.'),
 
   /**
    * Provide a label for the link text

package/es/components/UIShell/HeaderMenuItem.js

@@ -11,12 +11,14 @@ import React__default from 'react';
 import cx from 'classnames';
 import Link, { LinkPropTypes } from './Link.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import deprecate from '../../prop-types/deprecate.js';
 
-var _excluded = ["className", "isCurrentPage", "aria-current", "children", "role", "tabIndex"];
+var _excluded = ["className", "isActive", "isCurrentPage", "aria-current", "children", "role", "tabIndex"];
 var HeaderMenuItem = /*#__PURE__*/React__default.forwardRef(function HeaderMenuItem(_ref, ref) {
   var _cx;
 
   var className = _ref.className,
+      isActive = _ref.isActive,
       isCurrentPage = _ref.isCurrentPage,
       ariaCurrent = _ref['aria-current'],
       children = _ref.children,
@@ -26,7 +28,12 @@ var HeaderMenuItem = /*#__PURE__*/React__default.forwardRef(function HeaderMenuI
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
-  var linkClassName = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--header__menu-item"), true), _defineProperty(_cx, "".concat(prefix, "--header__menu-item--current"), isCurrentPage && ariaCurrent !== 'page'), _cx));
+
+  if (isCurrentPage) {
+    isActive = isCurrentPage;
+  }
+
+  var linkClassName = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--header__menu-item"), true), _defineProperty(_cx, "".concat(prefix, "--header__menu-item--current"), isActive && ariaCurrent !== 'page'), _cx));
   return /*#__PURE__*/React__default.createElement("li", {
     className: className,
     role: role
@@ -53,9 +60,15 @@ HeaderMenuItem.propTypes = _objectSpread2(_objectSpread2({}, LinkPropTypes), {},
   className: PropTypes.string,
 
   /**
-   * Applies selected styles to the item if a user sets this to true and aria-current !== 'page'.
+   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+   */
+  isActive: PropTypes.bool,
+
+  /**
+   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+   * @deprecated Please use `isActive` instead. This will be removed in the next major release.
    */
-  isCurrentPage: PropTypes.bool,
+  isCurrentPage: deprecate(PropTypes.bool, 'The `isCurrentPage` prop for `HeaderMenuItem` has ' + 'been deprecated. Please use `isActive` instead. This will be removed in the next major release.'),
 
   /**
    * Optionally supply a role for the underlying `<li>` node. Useful for resetting

package/es/tools/wrapComponent.js

@@ -12,12 +12,21 @@ import cx from 'classnames';
 import { usePrefix } from '../internal/usePrefix.js';
 
 var _excluded = ["className"];
+/**
+ * @param {{ name: string, type: string, className?: string | (prefix: string) => string }} props
+ * @returns
+ */
 
 var wrapComponent = function wrapComponent(_ref) {
   var name = _ref.name,
       getClassName = _ref.className,
       type = _ref.type;
 
+  /**
+   *
+   * @param {{ className?: string, [x: string]: any}} param0
+   * @returns
+   */
   function Component(_ref2) {
     var baseClassName = _ref2.className,
         other = _objectWithoutProperties(_ref2, _excluded);

package/lib/components/Button/Button.js

@@ -27,7 +27,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["as", "children", "className", "dangerDescription", "disabled", "hasIconOnly", "href", "iconDescription", "isExpressive", "isSelected", "kind", "onBlur", "onClick", "onFocus", "onMouseEnter", "onMouseLeave", "renderIcon", "size", "tabIndex", "tooltipAlignment", "tooltipPosition", "type"];
 var Button = /*#__PURE__*/React__default["default"].forwardRef(function Button(_ref, ref) {
-  var _classNames;
+  var _classNames, _rest$ariaPressed;
 
   var as = _ref.as,
       children = _ref.children,
@@ -92,7 +92,7 @@ var Button = /*#__PURE__*/React__default["default"].forwardRef(function Button(_
     disabled: disabled,
     type: type,
     'aria-describedby': dangerButtonVariants.includes(kind) ? assistiveId : null,
-    'aria-pressed': hasIconOnly && kind === 'ghost' ? isSelected : null
+    'aria-pressed': (_rest$ariaPressed = rest['aria-pressed']) !== null && _rest$ariaPressed !== void 0 ? _rest$ariaPressed : hasIconOnly && kind === 'ghost' ? isSelected : null
   };
   var anchorProps = {
     href: href

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

@@ -0,0 +1,74 @@
+/**
+ * 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 { PropsWithChildren } from 'react';
+import PropTypes from 'prop-types';
+interface TableProps {
+    className?: string;
+    /**
+     * `false` If true, will apply sorting styles
+     */
+    isSortable?: boolean;
+    /**
+     * Specify whether the overflow menu (if it exists) should be shown always, or only on hover
+     */
+    overflowMenuOnHover?: boolean;
+    /**
+     *  Change the row height of table. Currently supports `xs`, `sm`, `md`, `lg`, and `xl`.
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * `false` If true, will keep the header sticky (only data rows will scroll)
+     */
+    stickyHeader?: boolean;
+    /**
+     * `false` If true, will use a width of 'auto' instead of 100%
+     */
+    useStaticWidth?: boolean;
+    /**
+     * `true` to add useZebraStyles striping.
+     */
+    useZebraStyles?: boolean;
+}
+export declare const Table: {
+    ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, ...other }: PropsWithChildren<TableProps>): JSX.Element;
+    propTypes: {
+        /**
+         * Pass in the children that will be rendered within the Table
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        /**
+         * `false` If true, will apply sorting styles
+         */
+        isSortable: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether the overflow menu (if it exists) should be shown always, or only on hover
+         */
+        overflowMenuOnHover: PropTypes.Requireable<boolean>;
+        /**
+         *  Change the row height of table. Currently supports `xs`, `sm`, `md`, `lg`, and `xl`.
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * `false` If true, will keep the header sticky (only data rows will scroll)
+         */
+        stickyHeader: PropTypes.Requireable<boolean>;
+        /**
+         * `false` If true, will use a width of 'auto' instead of 100%
+         */
+        useStaticWidth: PropTypes.Requireable<boolean>;
+        /**
+         * `true` to add useZebraStyles striping.
+         */
+        useZebraStyles: PropTypes.Requireable<boolean>;
+    };
+    defaultProps: {
+        isSortable: boolean;
+        overflowMenuOnHover: boolean;
+    };
+};
+export default Table;

package/lib/components/DataTable/Table.js

@@ -30,10 +30,12 @@ var Table = function Table(_ref) {
       children = _ref.children,
       useZebraStyles = _ref.useZebraStyles,
       size = _ref.size,
-      isSortable = _ref.isSortable,
+      _ref$isSortable = _ref.isSortable,
+      isSortable = _ref$isSortable === void 0 ? false : _ref$isSortable,
       useStaticWidth = _ref.useStaticWidth,
       stickyHeader = _ref.stickyHeader,
-      overflowMenuOnHover = _ref.overflowMenuOnHover,
+      _ref$overflowMenuOnHo = _ref.overflowMenuOnHover,
+      overflowMenuOnHover = _ref$overflowMenuOnHo === void 0 ? true : _ref$overflowMenuOnHo,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var _useContext = React.useContext(TableContext.TableContext),

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

@@ -0,0 +1,10 @@
+/**
+ * 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 { TdHTMLAttributes } from 'react';
+export type TableCellProps = TdHTMLAttributes<HTMLTableCellElement>;
+declare const TableCell: React.FC<TableCellProps>;
+export default TableCell;

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

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+interface TableContextType {
+    titleId?: string;
+    descriptionId?: string;
+}
+export declare const TableContext: import("react").Context<TableContextType>;
+export {};

package/lib/components/DataTable/TableContext.js

@@ -12,8 +12,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 
 var TableContext = /*#__PURE__*/React.createContext({
-  titleId: null,
-  descriptionId: null
+  titleId: undefined,
+  descriptionId: undefined
 });
 
 exports.TableContext = TableContext;

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

@@ -0,0 +1,67 @@
+/**
+ * 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 { MouseEventHandler, PropsWithChildren } from 'react';
+import { TableRowProps } from './TableRow';
+interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
+    /**
+     * Specify the string read by a voice reader when the expand trigger is
+     * focused
+     */
+    ariaLabel: string;
+    /**
+     * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
+     */
+    expandHeader?: string;
+    /**
+     * The description of the chevron right icon, to be put in its SVG `<title>` element.
+     */
+    expandIconDescription?: string;
+    /**
+     * Specify whether this row is expanded or not. This helps coordinate data
+     * attributes so that `TableExpandRow` and `TableExpandedRow` work together
+     */
+    isExpanded: boolean;
+    /**
+     * Hook for when a listener initiates a request to expand the given row
+     */
+    onExpand: MouseEventHandler<HTMLButtonElement>;
+}
+declare const TableExpandRow: {
+    ({ ariaLabel, className: rowClassName, children, isExpanded, onExpand, expandIconDescription, isSelected, expandHeader, ...rest }: TableExpandRowProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify the string read by a voice reader when the expand trigger is
+         * focused
+         */
+        ariaLabel: PropTypes.Validator<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        /**
+         * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
+         */
+        expandHeader: PropTypes.Requireable<string>;
+        /**
+         * The description of the chevron right icon, to be put in its SVG `<title>` element.
+         */
+        expandIconDescription: PropTypes.Requireable<string>;
+        /**
+         * Specify whether this row is expanded or not. This helps coordinate data
+         * attributes so that `TableExpandRow` and `TableExpandedRow` work together
+         */
+        isExpanded: PropTypes.Validator<boolean>;
+        /**
+         * Specify if the row is selected
+         */
+        isSelected: PropTypes.Requireable<boolean>;
+        /**
+         * Hook for when a listener initiates a request to expand the given row
+         */
+        onExpand: PropTypes.Validator<(...args: any[]) => any>;
+    };
+};
+export default TableExpandRow;

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

@@ -0,0 +1,32 @@
+/**
+ * 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 { ReactAttr } from '../../types/common';
+interface TableExpandedRowProps extends ReactAttr<HTMLTableRowElement> {
+    /**
+     * The width of the expanded row's internal cell
+     */
+    colSpan: number;
+}
+declare const TableExpandedRow: {
+    ({ className: customClassName, children, colSpan, ...rest }: TableExpandedRowProps): JSX.Element;
+    propTypes: {
+        /**
+         * Pass in the contents for your TableExpandedRow
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * The width of the expanded row's internal cell
+         */
+        colSpan: PropTypes.Validator<number>;
+    };
+};
+export default TableExpandedRow;

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

@@ -0,0 +1,10 @@
+/**
+ * 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 React, { ThHTMLAttributes } from 'react';
+export type TableHeadProps = ThHTMLAttributes<HTMLTableSectionElement>;
+declare const TableHead: React.FC<TableHeadProps>;
+export default TableHead;

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

@@ -0,0 +1,64 @@
+/**
+ * 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 React, { MouseEventHandler } from 'react';
+import { ReactAttr } from '../../types/common';
+interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonElement> {
+    /**
+     * Pass in children that will be embedded in the table header label
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify `colSpan` as a non-negative integer value to indicate how
+     * many columns the TableHeader cell extends in a table
+     */
+    colSpan?: number;
+    /**
+     * Supply an id to the th element.
+     */
+    id?: string;
+    /**
+     * Specify whether this header is the header by which a table is being sorted
+     * by
+     */
+    isSortHeader?: boolean;
+    /**
+     * Specify whether this header is one through which a user can sort the table
+     */
+    isSortable?: boolean;
+    /**
+     * Hook that is invoked when the header is clicked
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Specify the scope of this table header. You can find more info about this
+     * attribute at the following URL:
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
+     */
+    scope: string;
+    /**
+     * Specify which direction we are currently sorting by, should be one of DESC,
+     * NONE, or ASC.
+     */
+    sortDirection?: string;
+    /**
+     * Supply a method to translate internal strings with your i18n tool of
+     * choice. Translation keys are available on the `translationKeys` field for
+     * this component.
+     */
+    translateWithId?: (key: string, { header, sortDirection, isSortHeader, sortStates }: {
+        header: any;
+        sortDirection: any;
+        isSortHeader: any;
+        sortStates: any;
+    }) => string;
+}
+declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLTableCellElement>>;
+export default TableHeader;

package/lib/components/DataTable/TableHeader.js

@@ -32,48 +32,43 @@ var translationKeys = {
   buttonDescription: 'carbon.table.header.icon.description'
 };
 
-var translateWithId = function translateWithId(key, _ref) {
-  var header = _ref.header,
-      sortDirection = _ref.sortDirection,
-      isSortHeader = _ref.isSortHeader,
-      sortStates = _ref.sortStates;
-
-  if (key === translationKeys.buttonDescription) {
-    if (isSortHeader) {
+var translateWithId = function translateWithId(key, args) {
+  if (args && key === translationKeys.buttonDescription) {
+    if (args.isSortHeader && sortStates.sortStates) {
       // When transitioning, we know that the sequence of states is as follows:
       // NONE -> ASC -> DESC -> NONE
-      if (sortDirection === sortStates.NONE) {
-        return "Click to sort rows by ".concat(header, " header in ascending order");
+      if (args.sortDirection === sortStates.sortStates.NONE) {
+        return "Click to sort rows by ".concat(args.header, " header in ascending order");
       }
 
-      if (sortDirection === sortStates.ASC) {
-        return "Click to sort rows by ".concat(header, " header in descending order");
+      if (args.sortDirection === sortStates.sortStates.ASC) {
+        return "Click to sort rows by ".concat(args.header, " header in descending order");
       }
 
-      return "Click to unsort rows by ".concat(header, " header");
+      return "Click to unsort rows by ".concat(args.header, " header");
     }
 
-    return "Click to sort rows by ".concat(header, " header in ascending order");
+    return "Click to sort rows by ".concat(args.header, " header in ascending order");
   }
 
   return '';
 };
 
 var sortDirections = (_sortDirections = {}, _rollupPluginBabelHelpers.defineProperty(_sortDirections, sortStates.sortStates.NONE, 'none'), _rollupPluginBabelHelpers.defineProperty(_sortDirections, sortStates.sortStates.ASC, 'ascending'), _rollupPluginBabelHelpers.defineProperty(_sortDirections, sortStates.sortStates.DESC, 'descending'), _sortDirections);
-var TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function TableHeader(_ref2, ref) {
+var TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function TableHeader(_ref, ref) {
   var _cx;
 
-  var headerClassName = _ref2.className,
-      children = _ref2.children,
-      colSpan = _ref2.colSpan,
-      isSortable = _ref2.isSortable,
-      isSortHeader = _ref2.isSortHeader,
-      onClick = _ref2.onClick,
-      scope = _ref2.scope,
-      sortDirection = _ref2.sortDirection,
-      t = _ref2.translateWithId,
-      id = _ref2.id,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded);
+  var headerClassName = _ref.className,
+      children = _ref.children,
+      colSpan = _ref.colSpan,
+      isSortable = _ref.isSortable,
+      isSortHeader = _ref.isSortHeader,
+      onClick = _ref.onClick,
+      scope = _ref.scope,
+      sortDirection = _ref.sortDirection,
+      t = _ref.translateWithId,
+      id = _ref.id,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
   var uniqueId = useId.useId('table-sort');
@@ -91,8 +86,8 @@ var TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function Tab
   }
 
   var className = cx__default["default"](headerClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--table-sort"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--table-sort--active"), isSortHeader && sortDirection !== sortStates.sortStates.NONE), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--table-sort--descending"), isSortHeader && sortDirection === sortStates.sortStates.DESC), _cx));
-  var ariaSort = !isSortHeader ? 'none' : sortDirections[sortDirection];
-  var sortDescription = t('carbon.table.header.icon.description', {
+  var ariaSort = !isSortHeader || !sortDirection ? 'none' : sortDirections[sortDirection];
+  var sortDescription = t && t('carbon.table.header.icon.description', {
     header: children,
     sortDirection: sortDirection,
     isSortHeader: isSortHeader,

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

@@ -0,0 +1,32 @@
+/**
+ * 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 { ReactAttr } from '../../types/common';
+export interface TableRowProps extends ReactAttr<HTMLTableRowElement> {
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify if the row is selected
+     */
+    isSelected?: boolean;
+}
+declare const TableRow: {
+    (props: TableRowProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify if the row is selected
+         */
+        isSelected: PropTypes.Requireable<boolean>;
+    };
+};
+export default TableRow;

package/lib/components/DataTable/TableSelectAll.js

@@ -35,7 +35,7 @@ var TableSelectAll = function TableSelectAll(_ref) {
     scope: "col",
     className: cx__default["default"]("".concat(prefix, "--table-column-checkbox"), className)
   }, /*#__PURE__*/React__default["default"].createElement(InlineCheckbox["default"], {
-    ariaLabel: ariaLabel,
+    "aria-label": ariaLabel,
     checked: checked,
     id: id,
     indeterminate: indeterminate,

package/lib/components/DataTable/TableSelectRow.js

@@ -49,9 +49,7 @@ var TableSelectRow = function TableSelectRow(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(InlineInputComponent, _rollupPluginBabelHelpers["extends"]({}, selectionInputProps, radio && {
     labelText: ariaLabel,
     hideLabel: true
-  }, !radio && {
-    ariaLabel: ariaLabel
-  })));
+  }, !radio && _rollupPluginBabelHelpers.defineProperty({}, 'aria-label', ariaLabel))));
 };
 
 TableSelectRow.propTypes = {