@digital-ai/dot-components 1.5.3 → 1.6.2

package/lib/components/sidebar/Sidebar.stories.data.d.ts

@@ -0,0 +1,83 @@
+import { MouseEvent } from 'react';
+import { ListItemProps } from '../list/utils/models';
+export declare const getNavigationItems: (isSelected: (key: number) => boolean, handleClick: (key: number) => void) => ({
+    startIconId: string;
+    onClick: import("@storybook/addon-actions").HandlerFunction;
+    items: ({
+        text: string;
+        divider: boolean;
+        onClick?: undefined;
+        selected?: undefined;
+        child?: undefined;
+    } | {
+        onClick: (_event: MouseEvent) => void;
+        selected: boolean;
+        text: string;
+        divider?: undefined;
+        child?: undefined;
+    } | {
+        child: JSX.Element;
+        text?: undefined;
+        divider?: undefined;
+        onClick?: undefined;
+        selected?: undefined;
+    })[];
+    text: string;
+    endIconId?: undefined;
+    selected?: undefined;
+    divider?: undefined;
+} | {
+    items: ({
+        text: string;
+        divider: boolean;
+        startIconId?: undefined;
+        onClick?: undefined;
+        selected?: undefined;
+    } | {
+        startIconId: string;
+        onClick: (_event: MouseEvent) => void;
+        selected: boolean;
+        text: string;
+        divider?: undefined;
+    })[];
+    text: string;
+    startIconId?: undefined;
+    onClick?: undefined;
+    endIconId?: undefined;
+    selected?: undefined;
+    divider?: undefined;
+} | {
+    endIconId: string;
+    startIconId: string;
+    onClick: (_event: MouseEvent) => void;
+    selected: boolean;
+    text: string;
+    items?: undefined;
+    divider?: undefined;
+} | {
+    text: string;
+    divider: boolean;
+    startIconId?: undefined;
+    onClick?: undefined;
+    items?: undefined;
+    endIconId?: undefined;
+    selected?: undefined;
+} | {
+    startIconId: string;
+    onClick: (_event: MouseEvent) => void;
+    selected: boolean;
+    text: string;
+    items?: undefined;
+    endIconId?: undefined;
+    divider?: undefined;
+} | {
+    divider: boolean;
+    startIconId?: undefined;
+    onClick?: undefined;
+    items?: undefined;
+    text?: undefined;
+    endIconId?: undefined;
+    selected?: undefined;
+})[];
+export declare const routerNavigationItems: Array<ListItemProps>;
+export declare const SidebarStoryRoutes: () => JSX.Element;

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

@@ -1,8 +1,10 @@
 import { MouseEvent, ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
-import { Order } from './TableBody';
-import { DotColumnHeader } from './TableHeader';
+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 */
     id?: string;
@@ -12,6 +14,8 @@ export interface TableRowProps extends CommonProps {
     selected?: boolean;
 }
 export interface TableProps extends CommonProps {
+    /** Typography variant which will be used for table body cell values **/
+    bodyTypography?: TypographyVariant;
     /** The table header columns */
     columns: Array<DotColumnHeader>;
     /** Total number of items for paginated table.
@@ -24,10 +28,16 @@ export interface TableProps extends CommonProps {
     data: Array<TableRowProps>;
     /** Message that is shown if data is empty */
     emptyMessage?: string;
+    /** Typography variant which will be used for table pagination **/
+    footerTypography?: TypographyVariant;
+    /** Typography variant which will be used for table header cell values **/
+    headerTypography?: TypographyVariant;
     /** Table is loading */
     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 */
@@ -54,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, className, columns, count, data, "data-testid": dataTestId, emptyMessage, 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/Table.stories.data.d.ts

@@ -1,4 +1,36 @@
 /// <reference types="react" />
+import { TextAlignment } from './TableCell';
+export declare const actionMenuColumns: ({
+    id: string;
+    label: string;
+    width: string;
+    truncate: boolean;
+    sortable?: undefined;
+} | {
+    id: string;
+    label: string;
+    width: string;
+    truncate?: undefined;
+    sortable?: undefined;
+} | {
+    id: string;
+    label: string;
+    sortable: boolean;
+    width?: undefined;
+    truncate?: undefined;
+})[];
+export declare const dataWithActionMenu: {
+    id: string;
+    rowData: {
+        title: string;
+        hometown: string;
+        action: {
+            children: JSX.Element;
+            iconId: string;
+            key: string;
+        }[];
+    };
+}[];
 export declare const defaultColumns: ({
     id: string;
     label: string;
@@ -16,7 +48,7 @@ export declare const defaultColumns: ({
 } | {
     id: string;
     label: string;
-    align: string;
+    align: TextAlignment;
     width: string;
     truncate?: undefined;
     sortable?: undefined;
@@ -77,7 +109,7 @@ export declare const paginatedColumns: ({
     id: string;
     label: string;
     width: string;
-    align: string;
+    align: TextAlignment;
     truncate?: undefined;
 })[];
 export declare const paginatedData: {

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

@@ -2,7 +2,8 @@ import { MouseEvent } from 'react';
 import { DotColumnHeader } from './TableHeader';
 import { TableRowProps } from './Table';
 import { CommonProps } from '../CommonProps';
-export declare type Order = 'asc' | 'desc';
+import { TypographyVariant } from '../typography/Typography';
+import { MultiSelectBody } from './utils/models';
 export interface TableBodyProps extends CommonProps {
     /** The table column headers */
     columns: Array<DotColumnHeader>;
@@ -10,11 +11,15 @@ 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 **/
+    typography: TypographyVariant;
 }
 /**
  * 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, }: TableBodyProps) => JSX.Element;
+export declare const DotTableBody: ({ columns, data, emptyMessage, multiSelectBody, onRowClick, typography, }: TableBodyProps) => JSX.Element;

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

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

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/TableCell.d.ts

@@ -1,16 +1,18 @@
 import { ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
-export declare type textAlignment = 'center' | 'inherit' | 'justify' | 'left' | 'right';
+import { TypographyVariant } from '../typography/Typography';
+export declare type TextAlignment = 'center' | 'inherit' | 'justify' | 'left' | 'right';
 export interface CellProps extends CommonProps {
-    align?: textAlignment;
+    align?: TextAlignment;
     cellKey?: string;
     colspan?: number;
     id?: string;
     noWrap?: boolean;
     onActionMenuTrigger?: (el: HTMLElement, menuItem: Array<ReactNode>) => void;
-    value?: any;
+    typography: TypographyVariant;
+    value?: unknown;
 }
 /**
  * A wrapper component around the TableCell component from @material-ui.
  */
-export declare const DotBodyCell: ({ ariaLabel, align, cellKey, className, colspan, "data-testid": dataTestId, noWrap, value, onActionMenuTrigger, }: CellProps) => JSX.Element;
+export declare const DotBodyCell: ({ ariaLabel, align, cellKey, className, colspan, "data-testid": dataTestId, noWrap, onActionMenuTrigger, typography, value, }: CellProps) => JSX.Element;

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

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

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

@@ -1,54 +1,29 @@
-import { MouseEvent, ReactNode } from 'react';
-import { Order } from './TableBody';
-import { textAlignment } from './TableCell';
+/// <reference types="react" />
+import { TextAlignment } from './TableCell';
+import { TypographyVariant } from '../typography/Typography';
+import { MultiSelectHeader } from './utils/models';
 export interface DotColumnHeader {
-    align?: textAlignment;
+    align?: TextAlignment;
     id: string;
     label?: string;
     sortable?: boolean;
     truncate?: boolean;
     width?: string;
 }
+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 */
     orderBy?: string;
     sortable: boolean;
-}
-export interface HeaderCellProps {
-    /** Allows to align cell text left, right, center  */
-    align?: textAlignment;
-    /** Click event function to handle sorting */
-    createSortHandler?: (property: string) => (event: MouseEvent<unknown>) => void;
-    /** The Id of table cell */
-    id?: string;
-    /** The order of data which is being sorted by */
-    order?: Order;
-    /** The ID of the column that you are sorting by */
-    orderBy?: string;
-    /** Determines sorting order of ascending or desceding */
-    sortDirection?: 'desc' | 'asc' | undefined;
-    /** Determines if sorting is enabled */
-    sortable?: boolean;
-    /**Allows table cell text truncated and displays in only one line */
-    truncate?: boolean;
-    /** The UID of the cell, if not provided then a randomly generated hash will be created using
-     * CreateUUID() */
-    uid: string;
-    /** The value of header cell*/
-    value?: ReactNode;
-    /** The width of the column */
-    width?: string;
+    typography: TypographyVariant;
 }
 /**
  * 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, onRequestSort, order, orderBy, sortable, }: HeaderProps) => JSX.Element;
-/**
- * A wrapper component around the TableCell component from @material-ui. This component should only
- * be used inside of DotHeaderRow.
- */
-export declare const DotHeaderCell: ({ align, createSortHandler, id, order, orderBy, sortable, sortDirection, uid, value, width, }: HeaderCellProps) => JSX.Element;
+export declare const DotHeaderRow: ({ columns, hasActionColumn, multiSelectHeader, onRequestSort, order, orderBy, sortable, typography, }: HeaderProps) => JSX.Element;

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

@@ -0,0 +1,38 @@
+import { MouseEvent, ReactNode } from 'react';
+import { TextAlignment } from './TableCell';
+import { Order } from './TableHeader';
+import { TypographyVariant } from '../typography/Typography';
+export declare type SortDirection = 'asc' | 'desc';
+export interface HeaderCellProps {
+    /** Allows cell text alignment: left, right, center  */
+    align?: TextAlignment;
+    /** Click event function to handle sorting */
+    createSortHandler?: (property: string) => (event: MouseEvent<unknown>) => void;
+    /** The Id of table cell */
+    id?: string;
+    /** If true, specific alignment will be applicable for this cell */
+    isInActionColumn: boolean;
+    /** The order of data which is being sorted by */
+    order?: Order;
+    /** The ID of the column that you are sorting by */
+    orderBy?: string;
+    /** Determines sorting order of ascending or descending */
+    sortDirection?: SortDirection;
+    /** Determines if sorting is enabled */
+    sortable?: boolean;
+    /**Allows table cell text truncated and displays in only one line */
+    truncate?: boolean;
+    /** Typography variant which will be used for header cell values **/
+    typography: TypographyVariant;
+    /** The UID of the cell */
+    uid: string;
+    /** The value of header cell*/
+    value?: ReactNode;
+    /** The width of the column */
+    width?: string;
+}
+/**
+ * A wrapper component around the TableCell component from @material-ui. This component should only
+ * be used inside DotHeaderRow.
+ */
+export declare const DotHeaderCell: ({ align, typography, createSortHandler, id, isInActionColumn, order, orderBy, sortable, sortDirection, uid, value, width, }: HeaderCellProps) => JSX.Element;

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

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

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/TablePagination.d.ts

@@ -1,7 +1,8 @@
 import { ChangeEvent } from 'react';
 import { CommonProps } from '../CommonProps';
-declare const rowsPerPageOptions: readonly [10, 25, 50, 100, 150, 200];
-export declare type RowsPerPageOption = typeof rowsPerPageOptions[number];
+import { TypographyVariant } from '../typography/Typography';
+export declare const ROWS_PER_PAGE_OPTIONS: readonly [10, 25, 50, 100, 150, 200];
+export declare type RowsPerPageOption = typeof ROWS_PER_PAGE_OPTIONS[number];
 export interface TablePaginationProps extends CommonProps {
     /** Total number of rows (-1 if unknown) */
     count: number;
@@ -13,7 +14,8 @@ export interface TablePaginationProps extends CommonProps {
     page?: number;
     /** The number of rows per page */
     rowsPerPage?: RowsPerPageOption;
+    /** Typography variant which will be used for pagination text */
+    typography: TypographyVariant;
 }
 /** This component wraps the TablePagination component from @material-ui. */
-export declare const DotTablePagination: ({ ariaLabel, className, count, "data-testid": dataTestId, onChangePage, onChangeRowsPerPage, page, rowsPerPage, }: TablePaginationProps) => JSX.Element;
-export {};
+export declare const DotTablePagination: ({ ariaLabel, className, count, "data-testid": dataTestId, onChangePage, onChangeRowsPerPage, page, rowsPerPage, typography, }: TablePaginationProps) => JSX.Element;

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

@@ -1,3 +1,6 @@
-/// <reference types="react" />
+import { TypographyVariant } from '../typography/Typography';
 export declare const rootClassName = "dot-table-pagination";
-export declare const StyledTablePagination: import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").TablePaginationTypeMap<{}, import("react").ComponentType<Pick<import("@material-ui/core").TableCellProps, "align" | "colSpan" | "headers" | "rowSpan" | "scope" | "abbr" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "height" | "width" | "valign" | "padding" | "size" | "sortDirection" | "variant" | "innerRef" | "ref">>>>;
+export interface StyledTablePaginationProps {
+    typography: TypographyVariant;
+}
+export declare const StyledTablePagination: import("styled-components").StyledComponent<"div", any, StyledTablePaginationProps, never>;

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

@@ -2,15 +2,20 @@ import { MouseEvent, ReactNode } from 'react';
 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;
+    typography: TypographyVariant;
 }
 export interface RowProps extends CommonProps {
     /** The table column headers */
     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 */
@@ -19,10 +24,12 @@ export interface RowProps extends CommonProps {
     rowKey: string;
     /** if the row is selected */
     selected?: boolean;
+    /** Typography variant which will be used for body cell values **/
+    typography: TypographyVariant;
 }
 /**
  * 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, }: RowProps) => JSX.Element;
-export declare const EmptyDotRow: ({ cols, message, }: EmptyRowProps) => 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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { TypographyVariant } from '../../typography/Typography';
+import { TableRowProps } from '../Table';
+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.5.3",
+  "version": "1.6.2",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [
@@ -32,6 +32,7 @@
     "styled-components": "^5.2.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0",
+    "react-router-dom": "^5.2.0"
   }
 }