@digital-ai/dot-components 1.6.1 → 1.6.2

package/lib/components/index.d.ts

@@ -19,12 +19,7 @@ export type { RadioButtonProps } from './radio/RadioButton';
 export type { RadioGroupProps } from './radio/RadioGroup';
 export type { BackItemProps, SidebarProps } from './sidebar/Sidebar';
 export type { SwitchProps } from './switch/Switch';
-export type { TableRowProps } from './table/Table';
-export type { TextAlignment } from './table/TableCell';
-export type { DotColumnHeader, Order } from './table/TableHeader';
-export type { SortDirection } from './table/TableHeaderCell';
-export type { TableDataWithPagination } from './table/TableDataWithPagination';
-export type { RowsPerPageOption } from './table/TablePagination';
+export type { DotColumnHeader, MultiSelect, Order, RowSelectionChangeHandler, RowsPerPageOption, TableDataWithPagination, TableRowProps, TableRowSelectChangeHandler, TextAlignment, SortDirection, } from './table';
 export type { TabProps } from './tabs/Tabs';
 export type { TypographyVariant } from './typography/Typography';
 export type { ProgressButtonProps } from './progress-button/ProgressButton';
@@ -77,10 +72,8 @@ export { DotSnackbarContainer, DotSnackbarProvider, useDotSnackbarContext, } fro
 export { DotSplitButton } from './split-button/SplitButton';
 export { DotProgressButton } from './progress-button/ProgressButton';
 export { DotSwitch } from './switch/Switch';
-export { DotTable } from './table/Table';
+export { DotHeaderRow, DotTable, DotTablePagination } from './table';
 export { DotTooltip } from './tooltip/Tooltip';
-export { DotHeaderRow } from './table/TableHeader';
-export { DotTablePagination } from './table/TablePagination';
 export { DotTabs } from './tabs/Tabs';
 export { DotTypography } from './typography/Typography';
 export { DotFileUpload } from './file-upload/FileUpload';

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

@@ -3,6 +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';
 export declare const TABLE_TYPOGRAPHY_VARIANT = "body1";
 export interface TableRowProps extends CommonProps {
     /** row identifier that will be passed to onRowClick callback */
@@ -35,6 +36,8 @@ export interface TableProps extends CommonProps {
     loading?: boolean;
     /** Maximum height of table container */
     maxHeight?: string;
+    /** Optional multi-select checkbox object **/
+    multiSelect?: MultiSelect;
     /** Row click event callback */
     onRowClick?: (event: MouseEvent, id: string) => void;
     /** Update data callback if data is managed by consumer */
@@ -61,4 +64,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, loading, maxHeight, order, orderBy, onRowClick, onUpdateData, page, rowsPerPage, stickyHeader, sortable, toolbar, }: TableProps) => JSX.Element;
+export declare const DotTable: ({ ariaLabel, bodyTypography, className, columns, count, data, "data-testid": dataTestId, emptyMessage, footerTypography, headerTypography, loading, maxHeight, multiSelect, order, orderBy, onRowClick, onUpdateData, page, rowsPerPage, stickyHeader, sortable, toolbar, }: TableProps) => JSX.Element;

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

@@ -3,6 +3,7 @@ import { DotColumnHeader } from './TableHeader';
 import { TableRowProps } from './Table';
 import { CommonProps } from '../CommonProps';
 import { TypographyVariant } from '../typography/Typography';
+import { MultiSelectBody } from './utils/models';
 export interface TableBodyProps extends CommonProps {
     /** The table column headers */
     columns: Array<DotColumnHeader>;
@@ -10,6 +11,8 @@ export interface TableBodyProps extends CommonProps {
     data: Array<TableRowProps>;
     /** Message to show if no data */
     emptyMessage?: string;
+    /** Optional multi-select checkbox body object **/
+    multiSelectBody?: MultiSelectBody;
     /** Row click event callback */
     onRowClick?: (event: MouseEvent, id: string) => void;
     /** Typography variant which will be used for body cell values **/
@@ -19,4 +22,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, onRowClick, typography, }: TableBodyProps) => JSX.Element;
+export declare const DotTableBody: ({ columns, data, emptyMessage, multiSelectBody, onRowClick, typography, }: TableBodyProps) => JSX.Element;

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

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

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

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

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { TextAlignment } from './TableCell';
 import { TypographyVariant } from '../typography/Typography';
+import { MultiSelectHeader } from './utils/models';
 export interface DotColumnHeader {
     align?: TextAlignment;
     id: string;
@@ -13,6 +14,7 @@ export declare type Order = 'asc' | 'desc';
 export interface HeaderProps {
     columns: Array<DotColumnHeader>;
     hasActionColumn: boolean;
+    multiSelectHeader?: MultiSelectHeader;
     onRequestSort: (property: string) => void;
     order?: Order;
     /** The ID of the column that you are sorting by */
@@ -24,4 +26,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, hasActionColumn, onRequestSort, order, orderBy, sortable, typography, }: HeaderProps) => JSX.Element;
+export declare const DotHeaderRow: ({ columns, hasActionColumn, multiSelectHeader, onRequestSort, order, orderBy, sortable, typography, }: HeaderProps) => JSX.Element;

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

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { CommonProps } from '../CommonProps';
+import { MultiSelectState, TableRowSelectChangeHandler } from './utils/models';
+export interface DotHeaderCheckboxCellProps extends CommonProps {
+    multiSelectState: MultiSelectState;
+    onCheckAllChange: TableRowSelectChangeHandler;
+}
+export declare const DotHeaderCheckboxCell: ({ ariaLabel, className, "data-testid": dataTestId, multiSelectState, onCheckAllChange, }: DotHeaderCheckboxCellProps) => ReactElement;

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

@@ -0,0 +1,3 @@
+import { TableCell } from '@material-ui/core';
+export declare const rootClassName = "dot-th-checkbox";
+export declare const StyledTableHeaderCheckboxCell: import("styled-components").StyledComponent<typeof TableCell, any, {}, never>;

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

@@ -3,6 +3,7 @@ import { DotColumnHeader } from './TableHeader';
 import { CommonProps } from '../CommonProps';
 import { TableRowProps } from './Table';
 import { TypographyVariant } from '../typography/Typography';
+import { MultiSelectBody } from './utils/models';
 export interface EmptyRowProps {
     cols: number;
     message?: string;
@@ -13,6 +14,8 @@ export interface RowProps extends CommonProps {
     columns: Array<DotColumnHeader>;
     /** The table body row data */
     data: TableRowProps;
+    /** Optional multi-select checkbox body object **/
+    multiSelectBody?: MultiSelectBody;
     /** Event callback of action button of menu */
     onActionMenuTrigger: (el: HTMLElement, menuItem: Array<ReactNode>) => void;
     /** Event callback */
@@ -28,5 +31,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, onActionMenuTrigger, onClick, rowKey, selected, typography, }: RowProps) => JSX.Element;
+export declare const DotTableRow: ({ 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/TableRow.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const rootClassName = "dot-tr";
+export declare const StyledTableRowStyles: import("styled-components").StyledComponent<import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").TableRowTypeMap<{}, "tr">>, any, {}, never>;

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

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { CommonProps } from '../CommonProps';
+export interface TableSelectionToolbarProps extends CommonProps {
+    bulkActions?: ReactNode;
+    selectedRowsNumber: number;
+}
+export declare const DotTableSelectionToolbar: ({ ariaLabel, bulkActions, className, "data-testid": dataTestId, selectedRowsNumber, }: TableSelectionToolbarProps) => JSX.Element;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const rootClassName = "dot-table-selection-toolbar";
+export declare const StyledTableSelectionToolbar: import("styled-components").StyledComponent<({ ariaLabel, children, className, "data-testid": dataTestId, variant, }: import("../action-toolbar/ActionToolbar").DotActionBarProps) => JSX.Element, any, {}, never>;

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

@@ -0,0 +1,10 @@
+export type { TableRowProps } from './Table';
+export type { TextAlignment } from './TableCell';
+export type { TableDataWithPagination } from './TableDataWithPagination';
+export type { DotColumnHeader, Order } from './TableHeader';
+export type { SortDirection } from './TableHeaderCell';
+export type { RowsPerPageOption } from './TablePagination';
+export type { MultiSelect, TableRowSelectChangeHandler, RowSelectionChangeHandler, } from './utils/models';
+export { DotTablePagination } from './TablePagination';
+export { DotTable } from './Table';
+export { DotHeaderRow } from './TableHeader';

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

@@ -5,3 +5,5 @@ import { DotColumnHeader } from '../TableHeader';
 export declare const getFormattedTableCellValue: (value: unknown, typographyVariant: TypographyVariant) => ReactNode;
 export declare const getContainerMaxHeightStyle: (stickyHeader?: boolean, maxHeight?: string) => string;
 export declare const checkIfActionColumnExist: (columns: DotColumnHeader[], tableData: TableRowProps[]) => boolean;
+export declare const getSelectedRowIds: (id: string, isChecked: boolean, selectedIds: string[]) => string[];
+export declare const getBulkSelectedRowIds: (isChecked: boolean, selectedIds: string[], pageData: TableRowProps[]) => string[];

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

@@ -0,0 +1,21 @@
+import { TableRowProps } from '../Table';
+import { ReactNode } from 'react';
+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;
+export interface MultiSelect {
+    bulkActions?: ReactNode;
+    onCheckAllChange?: TableRowSelectChangeHandler;
+    onCheckRowChange?: TableRowSelectChangeHandler;
+}
+interface MultiSelectTableBase {
+    selectedTableRowIds: string[];
+}
+export interface MultiSelectHeader extends MultiSelectTableBase {
+    onCheckAllChange: TableRowSelectChangeHandler;
+    pageData: TableRowProps[];
+}
+export interface MultiSelectBody extends MultiSelectTableBase {
+    onCheckIndividualChange?: RowSelectionChangeHandler;
+}
+export {};

package/package.json

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