@carbon/react 1.24.0 → 1.26.0-rc.0

package/es/components/DataTable/Table.js

@@ -20,10 +20,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 = _objectWithoutProperties(_ref, _excluded);
 
   var _useContext = useContext(TableContext),

package/es/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/es/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/es/components/DataTable/TableContext.js

@@ -8,8 +8,8 @@
 import { createContext } from 'react';
 
 var TableContext = /*#__PURE__*/createContext({
-  titleId: null,
-  descriptionId: null
+  titleId: undefined,
+  descriptionId: undefined
 });
 
 export { TableContext };

package/es/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/es/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/es/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/es/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/es/components/DataTable/TableHeader.js

@@ -22,48 +22,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) {
       // 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.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.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 = {}, _defineProperty(_sortDirections, sortStates.NONE, 'none'), _defineProperty(_sortDirections, sortStates.ASC, 'ascending'), _defineProperty(_sortDirections, sortStates.DESC, 'descending'), _sortDirections);
-var TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(_ref2, ref) {
+var TableHeader = /*#__PURE__*/React__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 = _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 = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
   var uniqueId = useId('table-sort');
@@ -81,8 +76,8 @@ var TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(_r
   }
 
   var className = cx(headerClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--table-sort"), true), _defineProperty(_cx, "".concat(prefix, "--table-sort--active"), isSortHeader && sortDirection !== sortStates.NONE), _defineProperty(_cx, "".concat(prefix, "--table-sort--descending"), isSortHeader && sortDirection === 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/es/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/es/components/DataTable/TableSelectAll.js

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

package/es/components/DataTable/TableSelectRow.js

@@ -39,9 +39,7 @@ var TableSelectRow = function TableSelectRow(_ref) {
   }, /*#__PURE__*/React__default.createElement(InlineInputComponent, _extends({}, selectionInputProps, radio && {
     labelText: ariaLabel,
     hideLabel: true
-  }, !radio && {
-    ariaLabel: ariaLabel
-  })));
+  }, !radio && _defineProperty({}, 'aria-label', ariaLabel))));
 };
 
 TableSelectRow.propTypes = {

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

@@ -0,0 +1,19 @@
+/**
+ * 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 from 'react';
+export interface TableToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Pass in the children that will be rendered inside the TableToolbar
+     */
+    children: React.ReactNode;
+    /**
+     * `lg` Change the row height of table
+     */
+    size?: 'sm' | 'lg';
+}
+declare const TableToolbar: React.FC<TableToolbarProps>;
+export default TableToolbar;

package/es/components/DataTable/TableToolbar.js

@@ -9,8 +9,8 @@ import { objectWithoutProperties as _objectWithoutProperties, defineProperty as
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default from 'react';
-import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 
 var _excluded = ["children", "size"];
 

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

@@ -0,0 +1,21 @@
+/**
+ * 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 from 'react';
+import { ForwardRefReturn } from '../../types/common';
+export interface TableToolbarActionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {
+    /**
+     * Pass in the children that will be rendered inside the TableToolbarAction
+     */
+    children?: React.ReactNode;
+    /**
+     * onClick handler for the TableToolbarAction
+     */
+    onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+export type TableToolbarActionComponent = ForwardRefReturn<HTMLDivElement, TableToolbarActionProps>;
+declare const TableToolbarAction: TableToolbarActionComponent;
+export default TableToolbarAction;

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

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+declare const TableToolbarContent: {
+    ({ className: baseClassName, ...other }: {
+        [x: string]: any;
+        className?: string | undefined;
+    }): import("react").ReactElement<{
+        className: string | undefined;
+    }, string | import("react").JSXElementConstructor<any>>;
+    displayName: string;
+    propTypes: {
+        className: import("prop-types").Requireable<string>;
+    };
+};
+export default TableToolbarContent;

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

@@ -0,0 +1,24 @@
+/**
+ * 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 from 'react';
+export interface TableToolbarMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * Provide an optional class name for the toolbar menu
+     */
+    className?: string;
+    /**
+     * The description of the menu icon.
+     */
+    iconDescription: string;
+    /**
+     * Optional prop to allow overriding the default menu icon
+     */
+    renderIcon?: React.ReactNode;
+}
+declare const TableToolbarMenu: React.FC<TableToolbarMenuProps>;
+export default TableToolbarMenu;

package/es/components/DataTable/TableToolbarMenu.js

@@ -6,12 +6,12 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { Settings } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default from 'react';
-import OverflowMenu from '../OverflowMenu/index.js';
-import { Settings } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix.js';
+import OverflowMenu from '../OverflowMenu/index.js';
 
 var _excluded = ["className", "renderIcon", "iconDescription", "children"];
 
@@ -25,7 +25,7 @@ var TableToolbarMenu = function TableToolbarMenu(_ref) {
   var prefix = usePrefix();
   var toolbarActionClasses = cx(className, "".concat(prefix, "--toolbar-action ").concat(prefix, "--overflow-menu"));
   return /*#__PURE__*/React__default.createElement(OverflowMenu, _extends({
-    ariaLabel: iconDescription,
+    "aria-label": iconDescription,
     renderIcon: renderIcon,
     className: toolbarActionClasses,
     title: iconDescription,

package/es/components/DataTable/TableToolbarSearch.js

@@ -10,6 +10,7 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useRef, useState, useMemo, useEffect } from 'react';
 import Search from '../Search/Search.js';
+import '../Search/Search.Skeleton.js';
 import setupGetInstanceId from './tools/instanceId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 

package/es/components/DataTable/tools/sorting.js

@@ -102,7 +102,8 @@ var sortRows = function sortRows(_ref) {
       sortDirection: sortDirection,
       locale: locale,
       sortStates: sortStates,
-      compare: compare
+      compare: compare,
+      rowIds: [a, b]
     });
   });
 };

package/es/components/DataTableSkeleton/DataTableSkeleton.d.ts

@@ -0,0 +1,107 @@
+/**
+ * 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';
+export interface DataTableSkeletonProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * Specify the number of columns that you want to render in the skeleton state
+     */
+    columnCount: number;
+    /**
+     * Optionally specify whether you want the Skeleton to be rendered as a
+     * compact DataTable
+     */
+    compact: boolean;
+    /**
+     * Optionally specify the displayed headers
+     */
+    headers?: [{
+        header: string;
+        key: string;
+    }] | {
+        header: string;
+        key: string;
+    };
+    /**
+     * Specify the number of rows that you want to render in the skeleton state
+     */
+    rowCount: number;
+    /**
+     * Specify if the table header should be rendered as part of the skeleton.
+     */
+    showHeader: boolean;
+    /**
+     * Specify if the table toolbar should be rendered as part of the skeleton.
+     */
+    showToolbar: boolean;
+    /**
+     * Optionally specify whether you want the DataTable to be zebra striped
+     */
+    zebra: boolean;
+}
+declare const DataTableSkeleton: {
+    ({ headers, rowCount, columnCount, zebra, compact, className, showHeader, showToolbar, ...rest }: {
+        [x: string]: any;
+        headers: any;
+        rowCount: any;
+        columnCount: any;
+        zebra: any;
+        compact: any;
+        className: any;
+        showHeader: any;
+        showToolbar: any;
+    }): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify the number of columns that you want to render in the skeleton state
+         */
+        columnCount: PropTypes.Requireable<number>;
+        /**
+         * Optionally specify whether you want the Skeleton to be rendered as a
+         * compact DataTable
+         */
+        compact: PropTypes.Requireable<boolean>;
+        /**
+         * Optionally specify the displayed headers
+         */
+        headers: PropTypes.Requireable<NonNullable<any[] | PropTypes.InferProps<{
+            key: PropTypes.Requireable<string>;
+        }> | null | undefined>>;
+        /**
+         * Specify the number of rows that you want to render in the skeleton state
+         */
+        rowCount: PropTypes.Requireable<number>;
+        /**
+         * Specify if the table header should be rendered as part of the skeleton.
+         */
+        showHeader: PropTypes.Requireable<boolean>;
+        /**
+         * Specify if the table toolbar should be rendered as part of the skeleton.
+         */
+        showToolbar: PropTypes.Requireable<boolean>;
+        /**
+         * Optionally specify whether you want the DataTable to be zebra striped
+         */
+        zebra: PropTypes.Requireable<boolean>;
+    };
+    defaultProps: {
+        rowCount: number;
+        columnCount: number;
+        zebra: boolean;
+        compact: boolean;
+        showHeader: boolean;
+        showToolbar: boolean;
+    };
+};
+export default DataTableSkeleton;

package/es/components/Dropdown/Dropdown.d.ts

@@ -14,8 +14,14 @@ export interface OnChangeData<ItemType> {
 }
 export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
     /**
+     * Specify a label to be read by screen readers on the container node
      * 'aria-label' of the ListBox component.
      */
+    ['aria-label']?: string;
+    /**
+     * @deprecated please use `aria-label` instead.
+     * Specify a label to be read by screen readers on the container note.
+     */
     ariaLabel?: string;
     /**
      * Specify the direction of the dropdown. Can be either top or bottom.