@digital-ai/dot-components 2.16.0 → 2.17.1

package/lib/components/table/Table.d.ts

@@ -3,7 +3,7 @@ import { CommonProps } from '../CommonProps';
 import { DotColumnHeader, Order } from './TableHeader';
 import { RowsPerPageOption } from './TablePagination';
 import { TypographyVariant } from '../typography/Typography';
-import { MultiSelect } from './utils/models';
+import { CollapsibleTableOptions, MultiSelect } from './utils/models';
 export declare const TABLE_TYPOGRAPHY_VARIANT = "body1";
 export interface TableRowProps extends CommonProps {
     /** row identifier that will be passed to onRowClick callback */
@@ -16,6 +16,8 @@ export interface TableRowProps extends CommonProps {
 export interface TableProps extends CommonProps {
     /** Typography variant which will be used for table body cell values **/
     bodyTypography?: TypographyVariant;
+    /** Optional collapsible-table object **/
+    collapsibleTableOptions?: CollapsibleTableOptions;
     /** The table header columns */
     columns: Array<DotColumnHeader>;
     /** Total number of items for paginated table.
@@ -68,4 +70,4 @@ export declare function stableSort<T>(array: T[], comparator: (order: T, orderBy
  * A wrapper component around the Table component from @material-ui. This component can be used for
  *  creating a common structure for tables in the system.
  */
-export declare const DotTable: ({ ariaLabel, bodyTypography, className, columns, count, data, "data-testid": dataTestId, emptyMessage, footerTypography, headerTypography, labelRowsPerPage, loading, maxHeight, multiSelect, order, orderBy, onRowClick, onUpdateData, page, rowsPerPage, rowsPerPageOptions, stickyHeader, sortable, toolbar, }: TableProps) => JSX.Element;
+export declare const DotTable: ({ ariaLabel, bodyTypography, className, collapsibleTableOptions, columns, count, data, "data-testid": dataTestId, emptyMessage, footerTypography, headerTypography, labelRowsPerPage, loading, maxHeight, multiSelect, order, orderBy, onRowClick, onUpdateData, page, rowsPerPage, rowsPerPageOptions, stickyHeader, sortable, toolbar, }: TableProps) => JSX.Element;

package/lib/components/table/Table.stories.d.ts

@@ -1,6 +1,6 @@
 import { Story, ComponentMeta } from '@storybook/react';
 import { TableProps } from './Table';
-declare const _default: ComponentMeta<({ ariaLabel, bodyTypography, className, columns, count, data, "data-testid": dataTestId, emptyMessage, footerTypography, headerTypography, labelRowsPerPage, loading, maxHeight, multiSelect, order, orderBy, onRowClick, onUpdateData, page, rowsPerPage, rowsPerPageOptions, stickyHeader, sortable, toolbar, }: TableProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, bodyTypography, className, collapsibleTableOptions, columns, count, data, "data-testid": dataTestId, emptyMessage, footerTypography, headerTypography, labelRowsPerPage, loading, maxHeight, multiSelect, order, orderBy, onRowClick, onUpdateData, page, rowsPerPage, rowsPerPageOptions, stickyHeader, sortable, toolbar, }: TableProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story;
 export declare const LocallyPaginatedTable: Story;
@@ -9,3 +9,5 @@ export declare const WithActionMenu: Story;
 export declare const WithCheckboxSelection: Story;
 export declare const EmptyTable: Story;
 export declare const WithCustomPaginationOptions: Story;
+export declare const WithCollapsibleTable: Story;
+export declare const WithCollapsibleTableAsyncLoad: Story;

package/lib/components/table/Table.stories.data.d.ts

@@ -103,4 +103,63 @@ export declare const paginatedData: {
         hit: string;
     };
 }[];
+export declare const collapsibleTableData: ({
+    id: string;
+    className: string;
+    selected: boolean;
+    rowData: {
+        title: string;
+        hometown: string;
+        fans: number;
+        delete: JSX.Element;
+        className: string;
+        nestedTable: {
+            series: string;
+            releaseYear: string;
+        }[];
+    };
+} | {
+    id: string;
+    rowData: {
+        title: string;
+        hometown: string;
+        fans: number;
+        delete: JSX.Element;
+        className?: undefined;
+        nestedTable?: undefined;
+    };
+    className?: undefined;
+    selected?: undefined;
+})[];
+export declare const carMockDataColumns: ({
+    id: string;
+    label: string;
+    width: string;
+    truncate: boolean;
+    align?: undefined;
+} | {
+    id: string;
+    label: string;
+    width: string;
+    align: TextAlignment;
+    truncate?: undefined;
+})[];
+export declare const carMockData: {
+    id: string;
+    rowData: {
+        carMake: string;
+        vin: string;
+    };
+}[];
+export declare const carMockNestedTableColumns: {
+    id: string;
+    label: string;
+}[];
+export declare const carMockNestedTableData: {
+    id: string;
+    rowData: {
+        type: string;
+        model: string;
+    }[];
+}[];
 export declare const MultiSelectTable: (props: TableProps) => JSX.Element;

package/lib/components/table/TableBody.d.ts

@@ -3,8 +3,9 @@ import { DotColumnHeader } from './TableHeader';
 import { TableRowProps } from './Table';
 import { CommonProps } from '../CommonProps';
 import { TypographyVariant } from '../typography/Typography';
-import { MultiSelectBody } from './utils/models';
+import { CollapsibleTableBody, MultiSelectBody } from './utils/models';
 export interface TableBodyProps extends CommonProps {
+    collapsibleTableBody?: CollapsibleTableBody;
     /** The table column headers */
     columns: Array<DotColumnHeader>;
     /** The table body row data */
@@ -22,4 +23,4 @@ export interface TableBodyProps extends CommonProps {
  * A wrapper component around the TableBody component from @material-ui. This component can be used
  * to determine the functionality of the table.
  */
-export declare const DotTableBody: ({ columns, data, emptyMessage, multiSelectBody, onRowClick, typography, }: TableBodyProps) => JSX.Element;
+export declare const DotTableBody: ({ collapsibleTableBody, columns, data, emptyMessage, multiSelectBody, onRowClick, typography, }: TableBodyProps) => JSX.Element;

package/lib/components/table/TableBodyCollapsibleTable.d.ts

@@ -0,0 +1,8 @@
+import { CollapsibleTableBody } from './utils/models';
+export interface DotBodyCollapsibleTableProps {
+    collapsibleTableBody: CollapsibleTableBody;
+    isExpanded: boolean;
+    loading?: boolean;
+    rowData: unknown;
+}
+export declare const DotBodyCollapsibleTable: ({ collapsibleTableBody, isExpanded, loading, rowData, }: DotBodyCollapsibleTableProps) => JSX.Element;

package/lib/components/table/TableBodyCollapsibleTable.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const rootClassName = "dot-collapsible-container";
+export declare const StyledCollapsibleTableWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/table/TableBodyExpandCollapseCell.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { CommonProps } from '../CommonProps';
+export interface DotBodyExpandCollapseCellProps extends CommonProps {
+    isExpanded: boolean;
+    onRowExpandCollapse: (isExpanded: boolean, rowId: string) => void;
+    rowId: string;
+}
+export declare const DotBodyExpandCollapseCell: ({ ariaLabel, className, "data-testid": dataTestId, isExpanded, onRowExpandCollapse, rowId, }: DotBodyExpandCollapseCellProps) => ReactElement;

package/lib/components/table/TableBodyExpandCollapseCell.styles.d.ts

@@ -0,0 +1,3 @@
+import { TableCell } from '@mui/material';
+export declare const rootClassName = "dot-td-expand-collapse";
+export declare const StyledTableBodyExpandCollapseCell: import("styled-components").StyledComponent<typeof TableCell, any, {}, never>;

package/lib/components/table/TableHeader.d.ts

@@ -1,6 +1,6 @@
 import { TextAlignment } from './TableCell';
 import { TypographyVariant } from '../typography/Typography';
-import { MultiSelectHeader } from './utils/models';
+import { CollapsibleTableOptions, MultiSelectHeader } from './utils/models';
 export interface DotColumnHeader {
     align?: TextAlignment;
     id: string;
@@ -11,6 +11,7 @@ export interface DotColumnHeader {
 }
 export declare type Order = 'asc' | 'desc';
 export interface HeaderProps {
+    collapsibleTableOptions?: CollapsibleTableOptions;
     columns: Array<DotColumnHeader>;
     multiSelectHeader?: MultiSelectHeader;
     onRequestSort: (property: string) => void;
@@ -24,4 +25,4 @@ export interface HeaderProps {
  * A wrapper component around the TableHead component from @material-ui. This component can be used
  * to determine the functionality of the table header.
  */
-export declare const DotHeaderRow: ({ columns, multiSelectHeader, onRequestSort, order, orderBy, sortable, typography, }: HeaderProps) => JSX.Element;
+export declare const DotHeaderRow: ({ collapsibleTableOptions, columns, multiSelectHeader, onRequestSort, order, orderBy, sortable, typography, }: HeaderProps) => JSX.Element;

package/lib/components/table/TableRow.d.ts

@@ -3,13 +3,14 @@ import { DotColumnHeader } from './TableHeader';
 import { CommonProps } from '../CommonProps';
 import { TableRowProps } from './Table';
 import { TypographyVariant } from '../typography/Typography';
-import { MultiSelectBody } from './utils/models';
+import { CollapsibleTableBody, MultiSelectBody } from './utils/models';
 export interface EmptyRowProps {
     cols: number;
     message?: string;
     typography: TypographyVariant;
 }
 export interface RowProps extends CommonProps {
+    collapsibleTableBody: CollapsibleTableBody;
     /** The table column headers */
     columns: Array<DotColumnHeader>;
     /** The table body row data */
@@ -31,5 +32,5 @@ export interface RowProps extends CommonProps {
  * A wrapper component around the TableRow component from @material-ui. This component can be used
  * for manipulating data prior to displaying the data inside the table
  */
-export declare const DotTableRow: ({ columns, className, data, multiSelectBody, onActionMenuTrigger, onClick, rowKey, selected, typography, }: RowProps) => JSX.Element;
+export declare const DotTableRow: ({ collapsibleTableBody, columns, className, data, multiSelectBody, onActionMenuTrigger, onClick, rowKey, selected, typography, }: RowProps) => JSX.Element;
 export declare const EmptyDotRow: ({ cols, message, typography, }: EmptyRowProps) => JSX.Element;

package/lib/components/table/utils/helpers.d.ts

@@ -5,3 +5,4 @@ export declare const getFormattedTableCellValue: (value: any, typographyVariant:
 export declare const getContainerMaxHeightStyle: (stickyHeader?: boolean, maxHeight?: string) => string;
 export declare const getSelectedRowIds: (id: string, isChecked: boolean, selectedIds: string[]) => string[];
 export declare const getBulkSelectedRowIds: (isChecked: boolean, selectedIds: string[], pageData: TableRowProps[]) => string[];
+export declare const getExpandedRowIds: (expandedIds: string[], id: string, isExpand: boolean) => string[];

package/lib/components/table/utils/models.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { TableRowProps } from '../Table';
+import { DotColumnHeader } from '../TableHeader';
 export declare type RowSelectionChangeHandler = (isChecked: boolean, rowId: string) => void;
 export declare type MultiSelectState = 'unchecked' | 'checked' | 'indeterminate';
 export declare type TableRowSelectChangeHandler = (isChecked: boolean, selectedTableRowIds: string[]) => void;
@@ -19,4 +20,22 @@ export interface MultiSelectHeader extends MultiSelectTableBase {
 export interface MultiSelectBody extends MultiSelectTableBase {
     onCheckIndividualChange?: RowSelectionChangeHandler;
 }
+interface CollapsibleTableBase {
+    /** The nested-table header columns */
+    nestedTableColumns: Array<DotColumnHeader>;
+    /** Name of the property which has nested table data in rowData object  */
+    nestedTableDataPropName: string;
+    /** Optional message that is shown if nested-table data is empty */
+    nestedTableEmptyMessage?: string;
+    /** Optional heading for nested-table */
+    nestedTableTitle?: string;
+}
+export interface CollapsibleTableOptions extends CollapsibleTableBase {
+    /** Row click (expand) event callback for async loading of nested-table data */
+    onRowExpand?: (rowId: string, setLoading: (loading: boolean) => void) => void;
+}
+export interface CollapsibleTableBody extends CollapsibleTableBase {
+    expandedTableRowIds: string[];
+    onRowExpandCollapseTable?: (isExpanded: boolean, rowId: string, setLoading: (loading: boolean) => void) => void;
+}
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "2.16.0",
+  "version": "2.17.1",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [