@carbon/react 1.90.0 → 1.91.0-rc.0

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

@@ -20,7 +20,7 @@ declare const translationKeys: {
     readonly unselectRow: "carbon.table.row.unselect";
 };
 /**
- * Message ids that will be passed to translateWithId().
+ * Message IDs that will be passed to translateWithId().
  */
 type TranslationKey = (typeof translationKeys)[keyof typeof translationKeys];
 export type DataTableSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -35,7 +35,6 @@ export interface DataTableCell<T> {
         header: string;
     };
     hasAILabelHeader?: boolean;
-    hasDecoratorHeader?: boolean;
 }
 type DataTableCells<T extends any[]> = {
     [K in keyof T]: DataTableCell<T[K]>;
@@ -54,8 +53,17 @@ export interface DataTableHeader {
     decorator?: ReactElement;
 }
 export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
+    /**
+     * The headers for the table.
+     */
     headers: DataTableHeader[];
+    /**
+     * The rows for the table.
+     */
     rows: (DataTableRow<ColTypes> & RowType)[];
+    /**
+     * The rows that are currently selected.
+     */
     selectedRows: (DataTableRow<ColTypes> & RowType)[];
     getHeaderProps: (options: {
         header: DataTableHeader;
@@ -154,14 +162,36 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     }) => {
         [key: string]: unknown;
         hasAILabelHeader?: boolean;
-        hasDecoratorHeader?: boolean;
+        key: string;
     };
+    /**
+     * Handles input value changes.
+     */
     onInputChange: (event: ChangeEvent<HTMLInputElement>, defaultValue?: string) => void;
+    /**
+     * Sorts the table by a specific header.
+     */
     sortBy: (headerKey: string) => void;
+    /**
+     * Selects all rows.
+     */
     selectAll: () => void;
+    /**
+     * Selects or deselects a specific row.
+     */
     selectRow: (rowId: string) => void;
+    /**
+     * Expands or collapses a specific row.
+     */
     expandRow: (rowId: string) => void;
+    /**
+     * Expands or collapses all rows.
+     */
     expandAll: () => void;
+    /**
+     * Whether the table is using radio buttons for selection instead of
+     * checkboxes.
+     */
     radio: boolean | undefined;
 }
 export interface DataTableProps<RowType, ColTypes extends any[]> extends TranslateWithId<TranslationKey> {
@@ -179,6 +209,12 @@ export interface DataTableProps<RowType, ColTypes extends any[]> extends Transla
     locale?: string;
     overflowMenuOnHover?: boolean;
     radio?: boolean;
+    /**
+     * @deprecated Use `children` instead. This prop will be removed in
+     * the next major version.
+     *
+     * https://www.patterns.dev/react/render-props-pattern/#children-as-a-function
+     */
     render?: (renderProps: DataTableRenderProps<RowType, ColTypes>) => ReactElement;
     rows: Omit<DataTableRow<ColTypes>, 'cells'>[];
     size?: DataTableSize;
@@ -188,14 +224,12 @@ export interface DataTableProps<RowType, ColTypes extends any[]> extends Transla
     useZebraStyles?: boolean;
 }
 /**
- * Data Tables are used to represent a collection of resources, displaying a
- * subset of their fields in columns, or headers. We prioritize direct updates
- * to the state of what we're rendering, so internally we end up normalizing the
- * given data and then denormalizing it when rendering.
- *
- * As a result, each part of the DataTable is accessible through look-up by id,
- * and updating the state of the single entity will cascade updates to the
- * consumer.
+ * DataTable components are used to represent a collection of resources,
+ * displaying a subset of their fields in columns, or headers. We prioritize
+ * direct updates to the state of what we're rendering, so internally we
+ * normalize the given data and then denormalize it at render time. Each part of
+ * the DataTable is accessible through look-up by ID, and updating the state of
+ * a single entity cascades updates to the consumer.
  */
 export declare const DataTable: {
     <RowType, ColTypes extends any[]>(props: DataTableProps<RowType, ColTypes>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
@@ -266,7 +300,7 @@ export declare const DataTable: {
             enableToggle: PropTypes.Requireable<boolean>;
             expandIconDescription: PropTypes.Requireable<string>;
             id: PropTypes.Requireable<string>;
-            isExpanded: React.Validator;
+            isExpanded: PropTypes.Validator<boolean | null | undefined>;
             onExpand: PropTypes.Requireable<any>;
         };
     };
@@ -348,6 +382,10 @@ export declare const DataTable: {
     };
     TableToolbarMenu: React.FC<import("./TableToolbarMenu").TableToolbarMenuProps>;
     propTypes: {
+        /**
+         * Pass in the children that will be rendered within the Table
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * 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
          */
@@ -383,6 +421,13 @@ export declare const DataTable: {
          * Specify whether the control should be a radio button or inline checkbox
          */
         radio: PropTypes.Requireable<boolean>;
+        /**
+         * @deprecated Use `children` instead. This prop will be removed in
+         * the next major version.
+         *
+         * https://www.patterns.dev/react/render-props-pattern/#children-as-a-function
+         */
+        render: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
         /**
          * 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
@@ -409,13 +454,13 @@ export declare const DataTable: {
          */
         stickyHeader: PropTypes.Requireable<boolean>;
         /**
-         * Optional method that takes in a message id and returns an
+         * Optional method that takes in a message ID and returns an
          * internationalized string. See `DataTable.translationKeys` for all
-         * available message ids.
+         * available message IDs.
          */
         translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
         /**
-         * `false` If true, will use a width of 'auto' instead of 100%
+         * If `true`, sets the table width to `auto` instead of `100%`.
          */
         useStaticWidth: PropTypes.Requireable<boolean>;
         /**