@carbon/react 1.85.1 → 1.86.0-rc.0

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

@@ -4,30 +4,9 @@
  * 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, { Component, type ChangeEvent, type MouseEvent, type ReactElement, type ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import React, { type ChangeEvent, type MouseEvent, type ReactElement, type ReactNode } from 'react';
 import type { DataTableSortState } from './state/sortStates';
-import Table from './Table';
-import TableActionList from './TableActionList';
-import TableBatchAction from './TableBatchAction';
-import TableBatchActions from './TableBatchActions';
-import TableBody from './TableBody';
-import TableCell from './TableCell';
-import TableContainer from './TableContainer';
-import TableDecoratorRow from './TableDecoratorRow';
-import TableExpandHeader from './TableExpandHeader';
-import TableExpandRow from './TableExpandRow';
-import TableExpandedRow from './TableExpandedRow';
-import TableHead from './TableHead';
-import TableHeader from './TableHeader';
-import TableRow from './TableRow';
-import TableSelectAll from './TableSelectAll';
-import TableSelectRow from './TableSelectRow';
-import TableSlugRow from './TableSlugRow';
-import TableToolbar from './TableToolbar';
-import TableToolbarAction from './TableToolbarAction';
-import TableToolbarContent from './TableToolbarContent';
-import TableToolbarSearch from './TableToolbarSearch';
-import TableToolbarMenu from './TableToolbarMenu';
 import { TranslateWithId } from '../../types/common';
 declare const translationKeys: {
     readonly expandRow: "carbon.table.row.expand";
@@ -213,17 +192,6 @@ export interface DataTableProps<RowType, ColTypes extends any[]> extends Transla
     useStaticWidth?: boolean;
     useZebraStyles?: boolean;
 }
-interface DataTableState<ColTypes extends any[]> {
-    cellsById: Record<string, DataTableCell<ColTypes>>;
-    filterInputValue: string | null;
-    initialRowOrder: string[];
-    isExpandedAll: boolean;
-    rowIds: string[];
-    rowsById: Record<string, DataTableRow<ColTypes>>;
-    shouldShowBatchActions: boolean;
-    sortDirection: DataTableSortState;
-    sortHeaderKey: string | null;
-}
 /**
  * Data Tables are used to represent a collection of resources, displaying a
  * subset of their fields in columns, or headers. We prioritize direct updates
@@ -234,139 +202,231 @@ interface DataTableState<ColTypes extends any[]> {
  * and updating the state of the single entity will cascade updates to the
  * consumer.
  */
-declare class DataTable<RowType, ColTypes extends any[]> extends Component<DataTableProps<RowType, ColTypes>, DataTableState<ColTypes>> {
-    instanceId: number;
-    static translationKeys: ("carbon.table.row.expand" | "carbon.table.row.collapse" | "carbon.table.all.expand" | "carbon.table.all.collapse" | "carbon.table.all.select" | "carbon.table.all.unselect" | "carbon.table.row.select" | "carbon.table.row.unselect")[];
-    static Table: typeof Table;
-    static TableActionList: typeof TableActionList;
-    static TableBatchAction: typeof TableBatchAction;
-    static TableBatchActions: typeof TableBatchActions;
-    static TableBody: typeof TableBody;
-    static TableCell: typeof TableCell;
-    static TableContainer: typeof TableContainer;
-    static TableDecoratorRow: typeof TableDecoratorRow;
-    static TableExpandHeader: typeof TableExpandHeader;
-    static TableExpandRow: typeof TableExpandRow;
-    static TableExpandedRow: typeof TableExpandedRow;
-    static TableHead: typeof TableHead;
-    static TableHeader: typeof TableHeader;
-    static TableRow: typeof TableRow;
-    static TableSelectAll: typeof TableSelectAll;
-    static TableSelectRow: typeof TableSelectRow;
-    static TableSlugRow: typeof TableSlugRow;
-    static TableToolbar: typeof TableToolbar;
-    static TableToolbarAction: typeof TableToolbarAction;
-    static TableToolbarContent: typeof TableToolbarContent;
-    static TableToolbarSearch: typeof TableToolbarSearch;
-    static TableToolbarMenu: typeof TableToolbarMenu;
-    private readonly rp;
-    constructor(props: DataTableProps<RowType, ColTypes>);
-    shouldComponentUpdate(nextProps: DataTableProps<RowType, ColTypes>): boolean;
-    /**
-     * Get the props associated with the given header. Mostly used for adding in
-     * sorting behavior.
-     */
-    getHeaderProps: (typeof this.rp)['getHeaderProps'];
-    /**
-     * Get the props associated with the given expand header.
-     */
-    getExpandHeaderProps: (typeof this.rp)['getExpandHeaderProps'];
-    /**
-     * Decorate consumer's `onClick` event handler with sort parameters
-     */
-    handleOnHeaderClick: (onClick: (event: MouseEvent<HTMLButtonElement>, sortParams: {
-        sortHeaderKey: string;
-        sortDirection: DataTableSortState;
-    }) => void, sortParams: {
-        sortHeaderKey: string;
-        sortDirection: DataTableSortState;
-    }) => (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Decorate consumer's `onClick` event handler with expand parameters
-     */
-    handleOnExpandHeaderClick: (onClick: (event: MouseEvent<HTMLButtonElement>, expandParams: {
-        isExpanded: boolean;
-    }) => void, expandParams: {
-        isExpanded: boolean;
-    }) => (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Get the props associated with the given row. Mostly used for expansion.
-     */
-    getRowProps: (typeof this.rp)['getRowProps'];
-    /**
-     * Get the props associated with an expanded row
-     */
-    getExpandedRowProps: (typeof this.rp)['getExpandedRowProps'];
-    /**
-     * 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
-     * for a specific row.
-     */
-    getSelectionProps: (typeof this.rp)['getSelectionProps'];
-    getToolbarProps: (typeof this.rp)['getToolbarProps'];
-    getBatchActionProps: (typeof this.rp)['getBatchActionProps'];
-    getTableProps: (typeof this.rp)['getTableProps'];
-    getTableContainerProps: (typeof this.rp)['getTableContainerProps'];
-    /**
-     * Get the props associated with the given table cell.
-     */
-    getCellProps: (typeof this.rp)['getCellProps'];
-    /**
-     * Helper utility to get all the currently selected rows
-     *
-     * @returns the array of rowIds that are currently selected
-     */
-    getSelectedRows: () => string[];
-    /**
-     * Helper utility to get all of the available rows after applying the filter
-     *
-     * @returns the array of rowIds that are currently included through the filter
-     */
-    getFilteredRowIds: () => string[];
-    /**
-     * Helper for getting the table prefix for elements that require an
-     * `id` attribute that is unique.
-     */
-    getTablePrefix: () => string;
-    /**
-     * Helper for toggling all selected items in a state. Does not call
-     * setState, so use it when setting state.
-     *
-     * @returns object to put into this.setState (use spread operator)
-     */
-    setAllSelectedState: (initialState: DataTableState<ColTypes>, isSelected: boolean, filteredRowIds: string[]) => Pick<DataTableState<ColTypes>, "rowsById">;
-    /**
-     * Handler for the `onCancel` event to hide the batch action bar and
-     * deselect all selected rows
-     */
-    handleOnCancel: () => void;
-    /**
-     * Handler for toggling the selection state of all rows in the database
-     */
-    handleSelectAll: () => void;
-    /**
-     * Handler for toggling the selection state of a given row.
-     */
-    handleOnSelectRow: (rowId: string) => () => void;
-    /**
-     * Handler for toggling the expansion state of a given row.
-     */
-    handleOnExpandRow: (rowId: string) => () => void;
-    /**
-     * Handler for changing the expansion state of all rows.
-     */
-    handleOnExpandAll: () => void;
-    /**
-     * Handler for transitioning to the next sort state of the table
-     *
-     * @param headerKey - The field for the header that we are sorting by.
-     */
-    handleSortBy: (headerKey: string) => () => void;
-    /**
-     * Event handler for transitioning input value state changes for the table
-     * filter component.
-     */
-    handleOnInputValueChange: (event: ChangeEvent<HTMLInputElement>, defaultValue?: string) => void;
-    render(): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
-}
-export default DataTable;
+export declare const DataTable: {
+    <RowType, ColTypes extends any[]>(props: DataTableProps<RowType, ColTypes>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+    translationKeys: ("carbon.table.row.expand" | "carbon.table.row.collapse" | "carbon.table.all.expand" | "carbon.table.all.collapse" | "carbon.table.all.select" | "carbon.table.all.unselect" | "carbon.table.row.select" | "carbon.table.row.unselect")[];
+    Table: {
+        ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, tabIndex, ...other }: React.PropsWithChildren<import("./Table").TableProps>): import("react/jsx-runtime").JSX.Element;
+        propTypes: {
+            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            className: PropTypes.Requireable<string>;
+            experimentalAutoAlign: PropTypes.Requireable<boolean>;
+            isSortable: PropTypes.Requireable<boolean>;
+            overflowMenuOnHover: PropTypes.Requireable<boolean>;
+            size: PropTypes.Requireable<string>;
+            stickyHeader: PropTypes.Requireable<boolean>;
+            useStaticWidth: PropTypes.Requireable<boolean>;
+            useZebraStyles: PropTypes.Requireable<boolean>;
+            tabIndex: PropTypes.Requireable<number>;
+        };
+    };
+    TableActionList: (props: React.HTMLAttributes<"div">) => React.ReactElement<any>;
+    TableBatchAction: {
+        ({ renderIcon, iconDescription, ...props }: import("./TableBatchAction").TableBatchActionProps): import("react/jsx-runtime").JSX.Element;
+        propTypes: {
+            hasIconOnly: PropTypes.Requireable<boolean>;
+            iconDescription: (props: any) => Error | undefined;
+            renderIcon: PropTypes.Requireable<object>;
+        };
+    };
+    TableBatchActions: import("./TableBatchActions").TableBatchActionsComponent;
+    TableBody: {
+        ({ children, className, ...rest }: import("./TableBody").TableBodyProps): import("react/jsx-runtime").JSX.Element;
+        propTypes: {
+            'aria-live': PropTypes.Requireable<string>;
+            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            className: PropTypes.Requireable<string>;
+        };
+    };
+    TableCell: React.ForwardRefExoticComponent<import("./TableCell").TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+    TableContainer: {
+        ({ aiEnabled, className, children, title, description, stickyHeader, useStaticWidth, ...rest }: import("./TableContainer").TableContainerProps): import("react/jsx-runtime").JSX.Element;
+        propTypes: {
+            aiEnabled: PropTypes.Requireable<boolean>;
+            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            className: PropTypes.Requireable<string>;
+            description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            stickyHeader: PropTypes.Requireable<boolean>;
+            title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            useStaticWidth: PropTypes.Requireable<boolean>;
+        };
+    };
+    TableDecoratorRow: {
+        ({ className, decorator, }: import("./TableDecoratorRow").TableDecoratorRowProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+        propTypes: {
+            className: PropTypes.Requireable<string>;
+            decorator: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        };
+    };
+    TableExpandHeader: {
+        ({ ["aria-controls"]: ariaControls, ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, className: headerClassName, enableExpando, enableToggle, id, isExpanded, onExpand, expandIconDescription, children, ...rest }: import("./TableExpandHeader").TableExpandHeaderProps): import("react/jsx-runtime").JSX.Element;
+        propTypes: {
+            "aria-controls": PropTypes.Requireable<string>;
+            "aria-label": PropTypes.Requireable<string>;
+            ariaLabel: PropTypes.Requireable<string>;
+            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            className: PropTypes.Requireable<string>;
+            enableExpando: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
+            enableToggle: PropTypes.Requireable<boolean>;
+            expandIconDescription: PropTypes.Requireable<string>;
+            id: PropTypes.Requireable<string>;
+            isExpanded: React.Validator;
+            onExpand: PropTypes.Requireable<any>;
+        };
+    };
+    TableExpandRow: React.ForwardRefExoticComponent<import("./TableExpandRow").TableExpandRowProps & React.RefAttributes<HTMLTableCellElement>>;
+    TableExpandedRow: {
+        ({ className: customClassName, children, colSpan, ...rest }: import("./TableExpandedRow").TableExpandedRowProps): import("react/jsx-runtime").JSX.Element;
+        propTypes: {
+            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            className: PropTypes.Requireable<string>;
+            colSpan: PropTypes.Validator<number>;
+        };
+    };
+    TableHead: (props: React.HTMLAttributes<"thead">) => React.ReactElement<any>;
+    TableHeader: React.ForwardRefExoticComponent<import("./TableHeader").TableHeaderProps & React.RefAttributes<HTMLTableCellElement>>;
+    TableRow: React.ForwardRefExoticComponent<import("./TableRow").TableRowProps & React.RefAttributes<HTMLTableCellElement>>;
+    TableSelectAll: {
+        ({ ariaLabel: deprecatedAriaLabel, ["aria-label"]: ariaLabel, checked, id, indeterminate, name, onSelect, disabled, className, }: import("./TableSelectAll").TableSelectAllProps): import("react/jsx-runtime").JSX.Element;
+        propTypes: {
+            "aria-label": PropTypes.Requireable<string>;
+            ariaLabel: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
+            checked: PropTypes.Requireable<boolean>;
+            className: PropTypes.Requireable<string>;
+            disabled: PropTypes.Requireable<boolean>;
+            id: PropTypes.Validator<string>;
+            indeterminate: PropTypes.Requireable<boolean>;
+            name: PropTypes.Validator<string>;
+            onSelect: PropTypes.Validator<(...args: any[]) => any>;
+        };
+    };
+    TableSelectRow: {
+        ({ ariaLabel: deprecatedAriaLabel, ["aria-label"]: ariaLabel, checked, id, name, onSelect, onChange, disabled, radio, className, }: import("./TableSelectRow").TableSelectRowProps): import("react/jsx-runtime").JSX.Element;
+        propTypes: {
+            "aria-label": PropTypes.Requireable<string>;
+            ariaLabel: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
+            checked: PropTypes.Requireable<boolean>;
+            className: PropTypes.Requireable<string>;
+            disabled: PropTypes.Requireable<boolean>;
+            id: PropTypes.Validator<string>;
+            name: PropTypes.Validator<string>;
+            onChange: PropTypes.Requireable<(...args: any[]) => any>;
+            onSelect: PropTypes.Validator<(...args: any[]) => any>;
+            radio: PropTypes.Requireable<boolean>;
+        };
+    };
+    TableSlugRow: {
+        ({ className, slug }: import("./TableSlugRow").TableSlugRowProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+        propTypes: {
+            className: PropTypes.Requireable<string>;
+            slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        };
+    };
+    TableToolbar: React.FC<import("./TableToolbar").TableToolbarProps>;
+    TableToolbarAction: React.ForwardRefExoticComponent<import("./TableToolbarAction").TableToolbarActionProps & React.RefAttributes<HTMLDivElement>>;
+    TableToolbarContent: (props: React.HTMLAttributes<"div">) => React.ReactElement<any>;
+    TableToolbarSearch: {
+        ({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size, tabIndex, ...rest }: import("./TableToolbarSearch").TableToolbarSearchProps): import("react/jsx-runtime").JSX.Element;
+        propTypes: {
+            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            className: PropTypes.Requireable<string>;
+            defaultExpanded: PropTypes.Requireable<boolean>;
+            defaultValue: PropTypes.Requireable<string>;
+            disabled: PropTypes.Requireable<boolean>;
+            expanded: PropTypes.Requireable<boolean>;
+            id: PropTypes.Requireable<string>;
+            labelText: PropTypes.Requireable<string>;
+            onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+            onChange: PropTypes.Requireable<(...args: any[]) => any>;
+            onClear: PropTypes.Requireable<(...args: any[]) => any>;
+            onExpand: PropTypes.Requireable<(...args: any[]) => any>;
+            onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+            persistent: PropTypes.Requireable<boolean>;
+            placeholder: PropTypes.Requireable<string>;
+            searchContainerClass: PropTypes.Requireable<string>;
+            size: PropTypes.Requireable<string>;
+            tabIndex: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+            translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
+        };
+    };
+    TableToolbarMenu: React.FC<import("./TableToolbarMenu").TableToolbarMenuProps>;
+    propTypes: {
+        /**
+         * Experimental property. Allows table to align cell contents to the top if there is text wrapping in the content. Might have performance issues, intended for smaller tables
+         */
+        experimentalAutoAlign: PropTypes.Requireable<boolean>;
+        /**
+         * Optional hook to manually control filtering of the rows from the
+         * TableToolbarSearch component
+         */
+        filterRows: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * The `headers` prop represents the order in which the headers should
+         * appear in the table. We expect an array of objects to be passed in, where
+         * `key` is the name of the key in a row object, and `header` is the name of
+         * the header.
+         */
+        headers: PropTypes.Validator<(PropTypes.InferProps<{
+            key: PropTypes.Validator<string>;
+            header: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        }> | null | undefined)[]>;
+        /**
+         * Specify whether the table should be able to be sorted by its headers
+         */
+        isSortable: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a string for the current locale
+         */
+        locale: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the overflow menu (if it exists) should be shown always, or only on hover
+         */
+        overflowMenuOnHover: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether the control should be a radio button or inline checkbox
+         */
+        radio: PropTypes.Requireable<boolean>;
+        /**
+         * The `rows` prop is where you provide us with a list of all the rows that
+         * you want to render in the table. The only hard requirement is that this
+         * is an array of objects, and that each object has a unique `id` field
+         * available on it.
+         */
+        rows: PropTypes.Validator<(PropTypes.InferProps<{
+            id: PropTypes.Validator<string>;
+            disabled: PropTypes.Requireable<boolean>;
+            isSelected: PropTypes.Requireable<boolean>;
+            isExpanded: PropTypes.Requireable<boolean>;
+        }> | null | undefined)[]>;
+        /**
+         *  Change the row height of table. Currently supports `xs`, `sm`, `md`, `lg`, and `xl`.
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * Optional hook to manually control sorting of the rows.
+         */
+        sortRow: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify whether the header should be sticky.
+         * Still experimental: may not work with every combination of table props
+         */
+        stickyHeader: PropTypes.Requireable<boolean>;
+        /**
+         * Optional method that takes in a message id and returns an
+         * internationalized string. See `DataTable.translationKeys` for all
+         * available message ids.
+         */
+        translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * `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>;
+    };
+};
+export {};