@carbon/react 1.36.0 → 1.37.0-rc.1

package/es/components/Button/Button.js

@@ -113,17 +113,18 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
     component = 'a';
     otherProps = anchorProps;
   }
-  const Button = /*#__PURE__*/React__default.createElement(component, {
-    onMouseEnter,
-    onMouseLeave,
-    onFocus,
-    onBlur,
-    onClick,
-    ...rest,
-    ...commonProps,
-    ...otherProps
-  }, assistiveText, children, buttonImage);
-  if (hasIconOnly) {
+  if (!hasIconOnly) {
+    return /*#__PURE__*/React__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') {
@@ -152,7 +153,6 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
       onClick: composeEventHandlers([onClick, handleClick])
     }, rest, commonProps, otherProps), iconOnlyImage ? iconOnlyImage : children);
   }
-  return Button;
 });
 Button.displayName = 'Button';
 Button.propTypes = {

package/es/components/ComboBox/ComboBox.js

@@ -208,7 +208,7 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     }
     if (event.target === textInput.current && isOpen) {
       event.preventDownshiftDefault = true;
-      event.persist();
+      event?.persist?.();
     }
   };
   const showWarning = !invalid && warn;
@@ -289,8 +289,6 @@ const ComboBox = /*#__PURE__*/React__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() {
@@ -307,7 +305,7 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
           if (event.target === textInput.current && isOpen) {
             toggleMenu();
             event.preventDownshiftDefault = true;
-            event.persist();
+            event?.persist?.();
           }
         }
         if (match(event, Home)) {

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

package/es/components/DataTable/DataTable.js

@@ -151,6 +151,10 @@ class DataTable extends React__default.Component {
       return {
         ...rest,
         ariaLabel: t(translationKey),
+        // TODO: remove in v12
+        'aria-label': t(translationKey),
+        // Provide a string of all the expanded row id's, separated by a space.
+        'aria-controls': rowIds.map(id => `expanded-row-${id}`).join(' '),
         isExpanded,
         // Compose the event handlers so we don't overwrite a consumer's `onClick`
         // handler
@@ -205,10 +209,30 @@ class DataTable extends React__default.Component {
         onExpand: composeEventHandlers([this.handleOnExpandRow(row.id), onClick]),
         isExpanded: row.isExpanded,
         ariaLabel: t(translationKey),
+        // TODO remove in v12
+        'aria-label': t(translationKey),
+        'aria-controls': `expanded-row-${row.id}`,
         isSelected: row.isSelected,
         disabled: row.disabled
       };
     });
+    /**
+     * 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}
+     */
+    _defineProperty(this, "getExpandedRowProps", _ref3 => {
+      let {
+        row,
+        ...rest
+      } = _ref3;
+      return {
+        ...rest,
+        id: `expanded-row-${row.id}`
+      };
+    });
     /**
      * 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
@@ -279,6 +303,8 @@ class DataTable extends React__default.Component {
       } = _this.state;
       const totalSelected = _this.getSelectedRows().length;
       return {
+        onSelectAll: undefined,
+        totalCount: _this.state.rowIds.length || 0,
         ...props,
         shouldShowBatchActions: shouldShowBatchActions && totalSelected > 0,
         totalSelected,
@@ -586,6 +612,7 @@ class DataTable extends React__default.Component {
       getHeaderProps: this.getHeaderProps,
       getExpandHeaderProps: this.getExpandHeaderProps,
       getRowProps: this.getRowProps,
+      getExpandedRowProps: this.getExpandedRowProps,
       getSelectionProps: this.getSelectionProps,
       getToolbarProps: this.getToolbarProps,
       getBatchActionProps: this.getBatchActionProps,

package/es/components/DataTable/TableBatchActions.d.ts

@@ -0,0 +1,51 @@
+/**
+ * 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, { type MouseEventHandler } from 'react';
+import type { InternationalProps } from '../../types/common';
+declare const TableBatchActionsTranslationKeys: readonly ["carbon.table.batch.cancel", "carbon.table.batch.items.selected", "carbon.table.batch.item.selected", "carbon.table.batch.selectAll"];
+export type TableBatchActionsTranslationKey = (typeof TableBatchActionsTranslationKeys)[number];
+export interface TableBatchActionsTranslationArgs {
+    totalSelected?: number;
+    totalCount?: number;
+}
+export interface TableBatchActionsProps extends React.HTMLAttributes<HTMLDivElement>, InternationalProps<TableBatchActionsTranslationKey, TableBatchActionsTranslationArgs> {
+    /**
+     * Provide elements to be rendered inside of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Hook required to listen for when the user initiates a cancel request
+     * through this component.
+     */
+    onCancel: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Hook to listen for when the user initiates a select all
+     * request through this component. This _only_ controls the rendering
+     * of the `Select All` button and does not include built in functionality
+     */
+    onSelectAll?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Boolean specifier for whether or not the batch action bar should be
+     * displayed.
+     */
+    shouldShowBatchActions?: boolean;
+    /**
+     * Numeric representation of the total number of items selected in a table.
+     * This number is used to derive the selection message.
+     */
+    totalSelected: number;
+    /**
+     * Numeric representation of the total number of items in a table.
+     * This number is used in the select all button text
+     */
+    totalCount?: number;
+}
+export interface TableBatchActionsComponent extends React.FC<TableBatchActionsProps> {
+    translationKeys: ReadonlyArray<TableBatchActionsTranslationKey>;
+}
+declare const TableBatchActions: TableBatchActionsComponent;
+export default TableBatchActions;

package/es/components/DataTable/TableBatchActions.js

@@ -16,16 +16,28 @@ import '../Text/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { Text } from '../Text/Text.js';
 
+const TableBatchActionsTranslationKeys = ['carbon.table.batch.cancel', 'carbon.table.batch.items.selected', 'carbon.table.batch.item.selected', 'carbon.table.batch.selectAll'];
 const translationKeys = {
   'carbon.table.batch.cancel': 'Cancel',
   'carbon.table.batch.items.selected': 'items selected',
-  'carbon.table.batch.item.selected': 'item selected'
+  'carbon.table.batch.item.selected': 'item selected',
+  'carbon.table.batch.selectAll': 'Select all'
 };
-const translateWithId = (id, state) => {
+const translateWithId = function (id) {
+  let {
+    totalSelected,
+    totalCount
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    totalSelected: 0,
+    totalCount: 0
+  };
   if (id === 'carbon.table.batch.cancel') {
     return translationKeys[id];
   }
-  return `${state.totalSelected} ${translationKeys[id]}`;
+  if (id === 'carbon.table.batch.selectAll') {
+    return `${translationKeys[id]} (${totalCount})`;
+  }
+  return `${totalSelected} ${translationKeys[id]}`;
 };
 const TableBatchActions = _ref => {
   let {
@@ -33,11 +45,13 @@ const TableBatchActions = _ref => {
     children,
     shouldShowBatchActions,
     totalSelected,
+    totalCount,
     onCancel,
-    translateWithId: t,
+    onSelectAll,
+    translateWithId: t = translateWithId,
     ...rest
   } = _ref;
-  const [isScrolling, setIsScrolling] = React__default.useState();
+  const [isScrolling, setIsScrolling] = React__default.useState(false);
   const prefix = usePrefix();
   const batchActionsClasses = cx({
     [`${prefix}--batch-actions`]: true,
@@ -62,13 +76,20 @@ const TableBatchActions = _ref => {
     totalSelected
   }) : t('carbon.table.batch.item.selected', {
     totalSelected
+  }))), onSelectAll && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
+    className: `${prefix}--batch-summary__divider`
+  }, "|"), /*#__PURE__*/React__default.createElement(Button, {
+    onClick: onSelectAll,
+    tabIndex: shouldShowBatchActions ? 0 : -1
+  }, t('carbon.table.batch.selectAll', {
+    totalCount
   })))), /*#__PURE__*/React__default.createElement(TableActionList, null, children, /*#__PURE__*/React__default.createElement(Button, {
     className: `${prefix}--batch-summary__cancel`,
     tabIndex: shouldShowBatchActions ? 0 : -1,
     onClick: onCancel
   }, t('carbon.table.batch.cancel'))));
 };
-TableBatchActions.translationKeys = Object.keys(translationKeys);
+TableBatchActions.translationKeys = TableBatchActionsTranslationKeys;
 TableBatchActions.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
@@ -77,11 +98,22 @@ TableBatchActions.propTypes = {
    * through this component
    */
   onCancel: PropTypes.func.isRequired,
+  /**
+   * Hook to listen for when the user initiates a select all
+   * request through this component. This _only_ controls the rendering
+   * of the `Select All` button and does not include built in functionality
+   */
+  onSelectAll: PropTypes.func,
   /**
    * Boolean specifier for whether or not the batch action bar should be
    * displayed
    */
   shouldShowBatchActions: PropTypes.bool,
+  /**
+   * Numeric representation of the total number of items in a table.
+   * This number is used in the select all button text
+   */
+  totalCount: PropTypes.number,
   /**
    * Numeric representation of the total number of items selected in a table.
    * This number is used to derive the selection message
@@ -97,6 +129,5 @@ TableBatchActions.propTypes = {
 TableBatchActions.defaultProps = {
   translateWithId
 };
-var TableBatchActions$1 = TableBatchActions;
 
-export { TableBatchActions$1 as default };
+export { TableBatchActions as default };

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

@@ -8,11 +8,21 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { ReactAttr } from '../../types/common';
 type TableExpandHeaderPropsBase = {
+    /**
+     * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandHeader
+     */
+    ['aria-controls']: string;
+    /**
+     * @deprecated This prop has been deprecated and will be
+     * removed in the next major release of Carbon. Use the
+     * `aria-label` prop instead.
+     */
+    ariaLabel?: string;
     /**
      * Specify the string read by a voice reader when the expand trigger is
      * focused
      */
-    ariaLabel?: string;
+    ['aria-label']: string;
     /**
      * @deprecated The enableExpando prop is being replaced by `enableToggle`
      */
@@ -35,25 +45,37 @@ type TableExpandHeaderPropsBase = {
      */
     onExpand?(event: React.MouseEvent<HTMLButtonElement>): void;
 } & ReactAttr<HTMLTableCellElement>;
-type TableExpandHeaderPropsWithToggle = Omit<TableExpandHeaderPropsBase, 'ariaLabel' | 'enableToggle' | 'onExpand'> & {
+type TableExpandHeaderPropsWithToggle = Omit<TableExpandHeaderPropsBase, 'ariaLabel' | 'aria-label' | 'enableToggle' | 'onExpand'> & {
     enableToggle: true;
     ariaLabel: string;
+    ['aria-label']: string;
     onExpand(event: React.MouseEvent<HTMLButtonElement>): void;
 };
-type TableExpandHeaderPropsWithExpando = Omit<TableExpandHeaderPropsBase, 'ariaLabel' | 'enableExpando' | 'onExpand'> & {
+type TableExpandHeaderPropsWithExpando = Omit<TableExpandHeaderPropsBase, 'ariaLabel' | 'aria-label' | 'enableExpando' | 'onExpand'> & {
     enableExpando: true;
     ariaLabel: string;
+    ['aria-label']: string;
     onExpand(event: React.MouseEvent<HTMLButtonElement>): void;
 };
 export type TableExpandHeaderProps = TableExpandHeaderPropsWithToggle | TableExpandHeaderPropsWithExpando | TableExpandHeaderPropsBase;
 declare const TableExpandHeader: {
-    ({ ariaLabel, className: headerClassName, enableExpando, enableToggle, id, isExpanded, onExpand, expandIconDescription, children, ...rest }: TableExpandHeaderProps): JSX.Element;
+    ({ ["aria-controls"]: ariaControls, ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, className: headerClassName, enableExpando, enableToggle, id, isExpanded, onExpand, expandIconDescription, children, ...rest }: TableExpandHeaderProps): JSX.Element;
     propTypes: {
         /**
+         * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandHeader
+         */
+        "aria-controls": PropTypes.Requireable<string>;
+        /**
+         * Specify the string read by a voice reader when the expand trigger is
+         * focused
+         */
+        "aria-label": PropTypes.Requireable<string>;
+        /**
+         * Deprecated, please use `aria-label` instead.
          * Specify the string read by a voice reader when the expand trigger is
          * focused
          */
-        ariaLabel: PropTypes.Requireable<any>;
+        ariaLabel: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
         /**

package/es/components/DataTable/TableExpandHeader.js

@@ -16,7 +16,9 @@ import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsT
 
 const TableExpandHeader = _ref => {
   let {
-    ariaLabel,
+    ['aria-controls']: ariaControls,
+    ['aria-label']: ariaLabel,
+    ariaLabel: deprecatedAriaLabel,
     className: headerClassName,
     enableExpando,
     enableToggle,
@@ -40,7 +42,9 @@ const TableExpandHeader = _ref => {
     className: `${prefix}--table-expand__button`,
     onClick: onExpand,
     title: expandIconDescription,
-    "aria-label": ariaLabel
+    "aria-label": deprecatedAriaLabel || ariaLabel,
+    "aria-expanded": isExpanded,
+    "aria-controls": ariaControls
   }, /*#__PURE__*/React__default.createElement(ChevronRight, {
     className: `${prefix}--table-expand__svg`,
     "aria-label": expandIconDescription
@@ -48,10 +52,20 @@ const TableExpandHeader = _ref => {
 };
 TableExpandHeader.propTypes = {
   /**
+   * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandHeader
+   */
+  ['aria-controls']: PropTypes.string,
+  /**
+   * Specify the string read by a voice reader when the expand trigger is
+   * focused
+   */
+  ['aria-label']: PropTypes.string,
+  /**
+   * Deprecated, please use `aria-label` instead.
    * Specify the string read by a voice reader when the expand trigger is
    * focused
    */
-  ariaLabel: PropTypes.oneOfType([requiredIfGivenPropIsTruthy('enableExpando', PropTypes.string), requiredIfGivenPropIsTruthy('enableToggle', PropTypes.string)]),
+  ariaLabel: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
   /**

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

@@ -8,11 +8,21 @@ import PropTypes from 'prop-types';
 import { MouseEventHandler, PropsWithChildren } from 'react';
 import { TableRowProps } from './TableRow';
 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;
+    /**
+     * @deprecated This prop has been deprecated and will be
+     * removed in the next major release of Carbon. Use the
+     * `aria-label` prop instead.
+     */
+    ariaLabel?: string;
     /**
      * Specify the string read by a voice reader when the expand trigger is
      * focused
      */
-    ariaLabel: string;
+    ['aria-label']: 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
      */
@@ -32,13 +42,24 @@ interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
     onExpand: MouseEventHandler<HTMLButtonElement>;
 }
 declare const TableExpandRow: {
-    ({ ariaLabel, className: rowClassName, children, isExpanded, onExpand, expandIconDescription, isSelected, expandHeader, ...rest }: TableExpandRowProps): JSX.Element;
+    ({ ["aria-controls"]: ariaControls, ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, className: rowClassName, children, isExpanded, onExpand, expandIconDescription, isSelected, expandHeader, ...rest }: TableExpandRowProps): JSX.Element;
     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
+         */
+        "aria-controls": PropTypes.Requireable<string>;
+        /**
+         * Specify the string read by a voice reader when the expand trigger is
+         * focused
+         */
+        "aria-label": PropTypes.Requireable<string>;
+        /**
+         * Deprecated, please use `aria-label` instead.
          * Specify the string read by a voice reader when the expand trigger is
          * focused
          */
-        ariaLabel: PropTypes.Validator<string>;
+        ariaLabel: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
         /**

package/es/components/DataTable/TableExpandRow.js

@@ -15,7 +15,9 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 const TableExpandRow = _ref => {
   let {
-    ariaLabel,
+    ['aria-controls']: ariaControls,
+    ['aria-label']: ariaLabel,
+    ariaLabel: deprecatedAriaLabel,
     className: rowClassName,
     children,
     isExpanded,
@@ -44,7 +46,9 @@ const TableExpandRow = _ref => {
     className: `${prefix}--table-expand__button`,
     onClick: onExpand,
     title: expandIconDescription,
-    "aria-label": ariaLabel
+    "aria-label": deprecatedAriaLabel || ariaLabel,
+    "aria-expanded": isExpanded,
+    "aria-controls": ariaControls
   }, /*#__PURE__*/React__default.createElement(ChevronRight, {
     className: `${prefix}--table-expand__svg`,
     "aria-label": expandIconDescription
@@ -52,10 +56,21 @@ const TableExpandRow = _ref => {
 };
 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
+   */
+  ['aria-controls']: PropTypes.string,
+  /**
+   * Specify the string read by a voice reader when the expand trigger is
+   * focused
+   */
+  ['aria-label']: PropTypes.string,
+  /**
+   * Deprecated, please use `aria-label` instead.
    * Specify the string read by a voice reader when the expand trigger is
    * focused
    */
-  ariaLabel: PropTypes.string.isRequired,
+  ariaLabel: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
   /**

package/es/components/DataTable/TableRow.js

@@ -19,7 +19,7 @@ const TableRow = props => {
     [`${prefix}--data-table--selected`]: props.isSelected
   });
   const cleanProps = {
-    ...omit(props, ['ariaLabel', 'onExpand', 'isExpanded', 'isSelected']),
+    ...omit(props, ['ariaLabel', 'aria-label', 'aria-controls', 'onExpand', 'isExpanded', 'isSelected']),
     className: className || undefined
   };
   return /*#__PURE__*/React__default.createElement("tr", cleanProps);