@carbon/react 1.36.0 → 1.37.0-rc.1

package/lib/components/DataTable/DataTable.js

@@ -161,6 +161,10 @@ class DataTable extends React__default["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
@@ -215,10 +219,30 @@ class DataTable extends React__default["default"].Component {
         onExpand: events.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}
+     */
+    _rollupPluginBabelHelpers.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
@@ -289,6 +313,8 @@ class DataTable extends React__default["default"].Component {
       } = _this.state;
       const totalSelected = _this.getSelectedRows().length;
       return {
+        onSelectAll: undefined,
+        totalCount: _this.state.rowIds.length || 0,
         ...props,
         shouldShowBatchActions: shouldShowBatchActions && totalSelected > 0,
         totalSelected,
@@ -596,6 +622,7 @@ class DataTable extends React__default["default"].Component {
       getHeaderProps: this.getHeaderProps,
       getExpandHeaderProps: this.getExpandHeaderProps,
       getRowProps: this.getRowProps,
+      getExpandedRowProps: this.getExpandedRowProps,
       getSelectionProps: this.getSelectionProps,
       getToolbarProps: this.getToolbarProps,
       getBatchActionProps: this.getBatchActionProps,

package/lib/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/lib/components/DataTable/TableBatchActions.js

@@ -26,16 +26,28 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+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 {
@@ -43,11 +55,13 @@ const TableBatchActions = _ref => {
     children,
     shouldShowBatchActions,
     totalSelected,
+    totalCount,
     onCancel,
-    translateWithId: t,
+    onSelectAll,
+    translateWithId: t = translateWithId,
     ...rest
   } = _ref;
-  const [isScrolling, setIsScrolling] = React__default["default"].useState();
+  const [isScrolling, setIsScrolling] = React__default["default"].useState(false);
   const prefix = usePrefix.usePrefix();
   const batchActionsClasses = cx__default["default"]({
     [`${prefix}--batch-actions`]: true,
@@ -72,13 +86,20 @@ const TableBatchActions = _ref => {
     totalSelected
   }) : t('carbon.table.batch.item.selected', {
     totalSelected
+  }))), onSelectAll && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: `${prefix}--batch-summary__divider`
+  }, "|"), /*#__PURE__*/React__default["default"].createElement(Button["default"], {
+    onClick: onSelectAll,
+    tabIndex: shouldShowBatchActions ? 0 : -1
+  }, t('carbon.table.batch.selectAll', {
+    totalCount
   })))), /*#__PURE__*/React__default["default"].createElement(TableActionList["default"], null, children, /*#__PURE__*/React__default["default"].createElement(Button["default"], {
     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__default["default"].node,
   className: PropTypes__default["default"].string,
@@ -87,11 +108,22 @@ TableBatchActions.propTypes = {
    * through this component
    */
   onCancel: PropTypes__default["default"].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__default["default"].func,
   /**
    * Boolean specifier for whether or not the batch action bar should be
    * displayed
    */
   shouldShowBatchActions: PropTypes__default["default"].bool,
+  /**
+   * Numeric representation of the total number of items in a table.
+   * This number is used in the select all button text
+   */
+  totalCount: PropTypes__default["default"].number,
   /**
    * Numeric representation of the total number of items selected in a table.
    * This number is used to derive the selection message
@@ -107,6 +139,5 @@ TableBatchActions.propTypes = {
 TableBatchActions.defaultProps = {
   translateWithId
 };
-var TableBatchActions$1 = TableBatchActions;
 
-exports["default"] = TableBatchActions$1;
+exports["default"] = TableBatchActions;

package/lib/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/lib/components/DataTable/TableExpandHeader.js

@@ -26,7 +26,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const TableExpandHeader = _ref => {
   let {
-    ariaLabel,
+    ['aria-controls']: ariaControls,
+    ['aria-label']: ariaLabel,
+    ariaLabel: deprecatedAriaLabel,
     className: headerClassName,
     enableExpando,
     enableToggle,
@@ -50,7 +52,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["default"].createElement(iconsReact.ChevronRight, {
     className: `${prefix}--table-expand__svg`,
     "aria-label": expandIconDescription
@@ -58,10 +62,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__default["default"].string,
+  /**
+   * Specify the string read by a voice reader when the expand trigger is
+   * focused
+   */
+  ['aria-label']: PropTypes__default["default"].string,
+  /**
+   * Deprecated, please use `aria-label` instead.
    * Specify the string read by a voice reader when the expand trigger is
    * focused
    */
-  ariaLabel: PropTypes__default["default"].oneOfType([requiredIfGivenPropIsTruthy["default"]('enableExpando', PropTypes__default["default"].string), requiredIfGivenPropIsTruthy["default"]('enableToggle', PropTypes__default["default"].string)]),
+  ariaLabel: PropTypes__default["default"].string,
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string,
   /**

package/lib/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/lib/components/DataTable/TableExpandRow.js

@@ -25,7 +25,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const TableExpandRow = _ref => {
   let {
-    ariaLabel,
+    ['aria-controls']: ariaControls,
+    ['aria-label']: ariaLabel,
+    ariaLabel: deprecatedAriaLabel,
     className: rowClassName,
     children,
     isExpanded,
@@ -54,7 +56,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["default"].createElement(iconsReact.ChevronRight, {
     className: `${prefix}--table-expand__svg`,
     "aria-label": expandIconDescription
@@ -62,10 +66,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__default["default"].string,
+  /**
+   * Specify the string read by a voice reader when the expand trigger is
+   * focused
+   */
+  ['aria-label']: PropTypes__default["default"].string,
+  /**
+   * Deprecated, please use `aria-label` instead.
    * Specify the string read by a voice reader when the expand trigger is
    * focused
    */
-  ariaLabel: PropTypes__default["default"].string.isRequired,
+  ariaLabel: PropTypes__default["default"].string,
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string,
   /**

package/lib/components/DataTable/TableRow.js

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

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

@@ -0,0 +1,176 @@
+/**
+ * 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, { FocusEvent, ReactNode } from 'react';
+export interface TableToolbarSearchProps {
+    children?: ReactNode;
+    /**
+     * Provide an optional class name for the search container
+     */
+    className?: string;
+    /**
+     * Specifies if the search should initially render in an expanded state
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Provide an optional default value for the Search component
+     */
+    defaultValue?: string;
+    /**
+     * Specifies if the search should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specifies if the search should expand
+     */
+    expanded?: boolean;
+    /**
+     * Provide an optional id for the search container
+     */
+    id?: string;
+    /**
+     * Provide an optional label text for the Search component icon
+     */
+    labelText?: string;
+    /**
+     * Provide an optional function to be called when the search input loses focus, this will be
+     * passed the event as the first parameter and a function to handle the expanding of the search
+     * input as the second
+     */
+    onBlur?: (event: FocusEvent<HTMLInputElement>, handleExpand: (event: FocusEvent<HTMLInputElement>, value: boolean) => void) => void;
+    /**
+     * Provide an optional hook that is called each time the input is updated
+     */
+    onChange?: (event: '' | Partial<React.ChangeEventHandler<HTMLInputElement>>, value?: string) => void;
+    /**
+     * Optional callback called when the search value is cleared.
+     */
+    onClear?: () => void;
+    /**
+     * Provide an optional hook that is called each time the input is expanded
+     */
+    onExpand?: (event: FocusEvent<HTMLInputElement>, value: boolean) => void;
+    /**
+     * Provide an optional function to be called when the search input gains focus, this will be
+     * passed the event as the first parameter and a function to handle the expanding of the search
+     * input as the second.
+     */
+    onFocus?: (event: FocusEvent<HTMLInputElement>, handleExpand: (event: FocusEvent<HTMLInputElement>, value: boolean) => void) => void;
+    /**
+     * Whether the search should be allowed to expand
+     */
+    persistent?: boolean;
+    /**
+     * Provide an optional placeholder text for the Search component
+     */
+    placeholder?: string;
+    /**
+     * Provide an optional className for the overall container of the Search
+     */
+    searchContainerClass?: string;
+    /**
+     * Specify the size of the Search
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
+     */
+    tabIndex?: number | string;
+    /**
+     * Provide custom text for the component for each translation id
+     */
+    translateWithId: (id: string) => string;
+}
+declare const TableToolbarSearch: {
+    ({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size, tabIndex, ...rest }: TableToolbarSearchProps): JSX.Element;
+    propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide an optional class name for the search container
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specifies if the search should initially render in an expanded state
+         */
+        defaultExpanded: PropTypes.Requireable<boolean>;
+        /**
+         * Provide an optional default value for the Search component
+         */
+        defaultValue: PropTypes.Requireable<string>;
+        /**
+         * Specifies if the search should be disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specifies if the search should expand
+         */
+        expanded: PropTypes.Requireable<boolean>;
+        /**
+         * Provide an optional id for the search container
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional label text for the Search component icon
+         */
+        labelText: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional function to be called when the search input loses focus, this will be
+         * passed the event as the first parameter and a function to handle the expanding of the search
+         * input as the second
+         */
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional hook that is called each time the input is updated
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Optional callback called when the search value is cleared.
+         */
+        onClear: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional hook that is called each time the input is expanded
+         */
+        onExpand: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called when the search input gains focus, this will be
+         * passed the event as the first parameter and a function to handle the expanding of the search
+         * input as the second.
+         */
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Whether the search should be allowed to expand
+         */
+        persistent: PropTypes.Requireable<boolean>;
+        /**
+         * Provide an optional placeholder text for the Search component
+         */
+        placeholder: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional className for the overall container of the Search
+         */
+        searchContainerClass: PropTypes.Requireable<string>;
+        /**
+         * Specify the size of the Search
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
+         */
+        tabIndex: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        /**
+         * Provide custom text for the component for each translation id
+         */
+        translateWithId: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    defaultProps: {
+        tabIndex: string;
+        translateWithId: (id: string) => string;
+        persistent: boolean;
+        onClear: () => void;
+    };
+};
+export default TableToolbarSearch;

package/lib/components/DataTable/TableToolbarSearch.js

@@ -51,6 +51,7 @@ const TableToolbarSearch = _ref => {
     onBlur,
     onFocus,
     size = 'lg',
+    tabIndex,
     ...rest
   } = _ref;
   const {
@@ -64,18 +65,19 @@ const TableToolbarSearch = _ref => {
   const prefix = usePrefix.usePrefix();
   React.useEffect(() => {
     if (focusTarget) {
-      focusTarget.current.querySelector('input').focus();
+      focusTarget.current?.querySelector?.('input')?.focus();
       setFocusTarget(null);
     }
   }, [focusTarget]);
   React.useEffect(() => {
     if (defaultValue) {
-      onChangeProp('', defaultValue);
+      onChangeProp?.('', defaultValue);
     }
   },
   //eslint-disable-next-line react-hooks/exhaustive-deps
   []);
   const searchClasses = cx__default["default"](className, {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     [searchContainerClass]: searchContainerClass,
     [`${prefix}--toolbar-search-container-active`]: expanded,
     [`${prefix}--toolbar-search-container-disabled`]: disabled,
@@ -113,6 +115,10 @@ const TableToolbarSearch = _ref => {
     onFocus: onFocus ? event => onFocus(event, handleExpand) : handleOnFocus,
     onBlur: onBlur ? event => onBlur(event, handleExpand) : handleOnBlur,
     size: size
+    // HTMLAttributes defines tabIndex as number | undefined but in reality it
+    // also accepts a string, so we cast here to convince Typescript this is okay.
+    ,
+    tabIndex: tabIndex
   }, rest));
 };
 TableToolbarSearch.propTypes = {
@@ -200,6 +206,5 @@ TableToolbarSearch.defaultProps = {
   persistent: false,
   onClear: () => {}
 };
-var TableToolbarSearch$1 = TableToolbarSearch;
 
-exports["default"] = TableToolbarSearch$1;
+exports["default"] = TableToolbarSearch;

package/lib/components/Dropdown/Dropdown.d.ts

@@ -71,7 +71,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      * given item to a string label. By default, it extracts the `label` field
      * from a given item to serve as the item label in the list.
      */
-    itemToString?(item: ItemType): string;
+    itemToString?(item: ItemType | null): string;
     /**
      * We try to stay as generic as possible here to allow individuals to pass
      * in a collection of whatever kind of data structure they prefer