@digital-ai/dot-components 1.6.0 → 1.8.0

package/lib/components/accordion/Accordion.styles.d.ts

@@ -2,5 +2,4 @@ import { Accordion } from '@material-ui/core';
 export declare const rootClassName = "dot-accordion";
 export declare const summaryClassName = "dot-accordion-summary";
 export declare const detailClassName = "dot-accordion-details";
-export declare const actionsClassName = "dot-accordion-actions";
 export declare const StyledAccordion: import("styled-components").StyledComponent<typeof Accordion, any, {}, never>;

package/lib/components/app-toolbar/AppToolbar.d.ts

@@ -15,7 +15,9 @@ export interface AppToolbarProps extends CommonProps {
     borderColor?: string;
     /** JSX Element that is displayed between the logo and right nav */
     children?: ReactNode;
-    /** Allow to display custom logo */
+    /** If true, main menu will close when item is clicked, if false it will prevent menu closing */
+    closeMenuOnItemClick?: boolean;
+    /** Allow displaying custom logo */
     customLogo?: ReactNode;
     /** If true, the spacing and height will be shorter */
     dense?: boolean;
@@ -30,4 +32,4 @@ export interface AppToolbarProps extends CommonProps {
     /** URL of the page the primary logo link will go to */
     primaryLogoHref?: string;
 }
-export declare const DotAppToolbar: ({ appName, appLogo, appLogoSmall, ariaLabel, avatar, borderColor, children, className, customLogo, "data-testid": dataTestId, dense, navItems, mainMenu, mainMenuItems, mainMenuWidth, primaryLogoHref, }: AppToolbarProps) => JSX.Element;
+export declare const DotAppToolbar: ({ appName, appLogo, appLogoSmall, ariaLabel, avatar, borderColor, children, className, closeMenuOnItemClick, customLogo, "data-testid": dataTestId, dense, navItems, mainMenu, mainMenuItems, mainMenuWidth, primaryLogoHref, }: AppToolbarProps) => JSX.Element;

package/lib/components/app-toolbar/AppToolbar.stories.data.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { History } from 'history';
+import { ListItemProps } from '../list';
+export declare const defaultMainMenuItems: Array<ListItemProps>;
+export declare const defaultNavItems: ({
+    iconId: string;
+    tooltip: string;
+    onClick?: undefined;
+} | {
+    iconId: string;
+    onClick: () => void;
+    tooltip: string;
+})[];
+export declare const getMenuNavigationItems: (history: History) => Array<ListItemProps>;
+export declare const MenuNavigationRoutes: () => JSX.Element;

package/lib/components/app-toolbar/AppToolbar.stories.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const customMenuCloseClassName = "dot-custom-menu-close-story";
+export declare const StyledWithCustomMenuClose: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/auto-complete/AutoComplete.d.ts

@@ -1,12 +1,16 @@
-import { ChangeEvent, Ref } from 'react';
+import { ChangeEvent, ReactNode, Ref } from 'react';
+import { AutocompleteCloseReason } from '@material-ui/lab';
 import { CommonProps } from '../CommonProps';
+export declare const DEFAULT_ACTION_ITEM_TEXT = "Add new item";
 export interface ActionItem {
     /** The icon to display on the button */
-    iconId: string;
+    iconId?: string;
     /** Event callback */
-    onClick: () => void;
-    /** Text displayed */
-    text: string;
+    onClick: (inputText?: string) => void;
+    /** If set to true, it will prevent duplicate item insertion */
+    preventDuplicateInsertion?: boolean;
+    /** Text/Node displayed */
+    text?: string | ReactNode;
 }
 export declare type autoCompleteSize = 'medium' | 'small';
 export declare type AutoCompleteValue = string | string[] | AutoCompleteOption | AutoCompleteOption[];
@@ -15,7 +19,6 @@ export interface AutoCompleteOption {
     group?: string;
     title: string;
 }
-export declare const parseAutoCompleteValue: (value: AutoCompleteValue) => string;
 export interface AutoCompleteProps extends CommonProps {
     /** Action button as the last element on the menu **/
     actionItem?: ActionItem;
@@ -23,6 +26,8 @@ export interface AutoCompleteProps extends CommonProps {
     autoFocus?: boolean;
     /** default option that is selected */
     defaultValue?: AutoCompleteValue;
+    /** When `true` input textbox will be small size, when `false` it will be medium size. Default value is `true`. **/
+    dense?: boolean;
     /** Disable the portal behavior. If true, children stay within parent DOM hierarchy. */
     disablePortal?: boolean;
     /** If true, the input will be disabled. */
@@ -41,10 +46,20 @@ export interface AutoCompleteProps extends CommonProps {
     inputRef?: Ref<HTMLInputElement>;
     /** Label displayed above the input field */
     label?: string;
+    /** If true, the component will be in a loading state. */
+    loading?: boolean;
     /** If true, will allow the user to select multiple options */
     multiple?: boolean;
-    /** A function that should be executed when the value of the input changes */
+    /** A function that should be executed when the autocomplete value changes */
     onChange?: (event: ChangeEvent<unknown>, value: AutoCompleteValue, reason: string) => void;
+    /** Callback fired when the popup requests to be closed. Use in controlled mode. */
+    onClose?: (event: ChangeEvent, reason: AutocompleteCloseReason) => void;
+    /** A function that should be executed each time when the input value changes */
+    onInputChange?: (event: ChangeEvent<unknown>, value: string, reason: string) => void;
+    /** Callback fired when the popup requests to be opened. Use in controlled mode. */
+    onOpen?: (event: ChangeEvent) => void;
+    /** Controls the popup's open state. */
+    open?: boolean;
     /** pre-defined options available to the user */
     options?: Array<AutoCompleteOption>;
     /** Placeholder text always displayed inside the input field */
@@ -56,4 +71,4 @@ export interface AutoCompleteProps extends CommonProps {
     /** value if this is a controlled component */
     value?: AutoCompleteValue;
 }
-export declare const DotAutoComplete: ({ actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disabled, disablePortal, error, freesolo, group, helperText, inputId, inputRef, label, multiple, onChange, options, placeholder, required, size, value, }: AutoCompleteProps) => JSX.Element;
+export declare const DotAutoComplete: ({ actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, error, freesolo, group, helperText, inputId, inputRef, label, loading, multiple, onChange, onClose, onInputChange, onOpen, open, options, placeholder, required, size, value, }: AutoCompleteProps) => JSX.Element;

package/lib/components/auto-complete/AutoComplete.styles.d.ts

@@ -1,3 +1,5 @@
 import { Autocomplete } from '@material-ui/lab';
 export declare const rootClassName = "dot-autocomplete";
+export declare const inputRootClassName = "dot-input-root";
+export declare const inputMediumClassName = "dot-input-medium";
 export declare const StyledAutocomplete: import("styled-components").StyledComponent<typeof Autocomplete, any, {}, never>;

package/lib/components/auto-complete/Autocomplete.stories.data.d.ts

@@ -0,0 +1,21 @@
+import { ActionItem } from './AutoComplete';
+export declare const movies: {
+    group: string;
+    title: string;
+    error: boolean;
+}[];
+export declare const handleActionItemClick: (newItem?: string) => void;
+export declare const actionItemOptions: ActionItem[];
+export declare const actionItemArgType: {
+    options: string[];
+    mapping: ActionItem[];
+    control: {
+        type: string;
+        labels: {
+            0: string;
+            1: string;
+            2: string;
+        };
+    };
+    defaultValue: string;
+};

package/lib/components/auto-complete/utils/helpers.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { AutocompleteGetTagProps } from '@material-ui/lab';
+import { ChipSize } from '../../chip/Chip';
+import { AutoCompleteOption, AutoCompleteValue } from '../AutoComplete';
+export declare const parseAutoCompleteValue: (value: AutoCompleteValue) => string;
+export declare const getChipsFromAutocomplete: (values: Array<AutoCompleteOption | string>, getTagProps: AutocompleteGetTagProps, chipSize?: ChipSize) => JSX.Element[];
+export declare const checkIfDuplicateItem: (itemText: string, autocompleteOptions: AutoCompleteOption[]) => boolean;

package/lib/components/breadcrumbs/Breadcrumbs.d.ts

@@ -4,6 +4,8 @@ import { LinkUnderline } from '../link/Link';
 export declare type BreadcrumbItem = {
     /** Defines a string value that labels the current element **/
     ariaLabel?: string;
+    /** If the number of characters is exceeded then an ellipsis should be used to truncate the text  */
+    characterLimit?: number;
     /** link the breadcrumb goes to */
     href?: string;
     onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
@@ -19,7 +21,7 @@ export interface BreadcrumbProps extends CommonProps {
     items: Array<BreadcrumbItem>;
     /** determines the maximum number of items to display */
     maxItems?: number;
-    /** minimum width before `maxItems` will be adjusted */
+    /** DEPRECATED, DO NOT USE */
     minWidth?: number;
 }
 export declare const DotBreadcrumbs: ({ className, "data-testid": dataTestId, expansionMenu, items, maxItems, minWidth, }: BreadcrumbProps) => JSX.Element;

package/lib/components/breadcrumbs/Breadcrumbs.data.d.ts

@@ -1,4 +1,5 @@
 import { BreadcrumbItem } from '../breadcrumbs/Breadcrumbs';
 export declare const defaultStorybookItems: BreadcrumbItem[];
+export declare const characterLimitBreadcrumbItems: BreadcrumbItem[];
 export declare const mockBreadcrumbItems: BreadcrumbItem[];
 export declare const mockLongBreadcrumbItems: BreadcrumbItem[];

package/lib/components/drawer/Drawer.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactNode, CSSProperties } from 'react';
+import { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 export declare type DrawerAnchor = 'bottom' | 'left' | 'right' | 'top';
 export declare type DrawerVariant = 'permanent' | 'persistent' | 'temporary';
@@ -23,11 +23,11 @@ export interface DrawerProps extends CommonProps {
     /** string or JSX element that is displayed inside the drawer */
     children?: ReactNode;
     /** Props applied to drawer body */
-    drawerBodyProps?: DrawerSection;
+    drawerBodyProps?: Omit<DrawerSection, 'ariaLabel'>;
     /** Props applied to drawer footer */
-    drawerFooterProps?: DrawerSection;
+    drawerFooterProps?: Omit<DrawerSection, 'ariaLabel'>;
     /** Props applied to drawer header */
-    drawerHeaderProps?: DrawerSection;
+    drawerHeaderProps?: Omit<DrawerSection, 'ariaLabel'>;
     /** The height of the drawer when anchor is 'top' or 'bottom' */
     height?: string;
     /** Callback fired when the component requests to be closed. */

package/lib/components/index.d.ts

@@ -10,7 +10,7 @@ export type { DynamicFormProps } from './dynamic-form/DynamicForm';
 export type { ConditionFunction, ControlClickHandler, DisabledConditionFunction, DisabledControlCondition, DynamicFormConfig, DynamicFormControl, DynamicFormControlProps, DynamicFormControlType, DynamicFormOutputData, DynamicFormSectionProps, DynamicFormState, DynamicFormStateItem, FieldValidation, } from './dynamic-form/models';
 export type { IconButtonProps } from './button/IconButton';
 export type { InputTextProps } from './input-form-fields/InputText';
-export type { InputSelectProps } from './input-form-fields/InputSelect';
+export type { InputSelectProps, InputSelectOption } from './input-form-fields/InputSelect';
 export type { LinkUnderline } from './link/Link';
 export type { ListItemProps } from './list';
 export type { MenuItemProps } from './menu/Menu';
@@ -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';
@@ -33,7 +28,7 @@ export { DotActionToolbar } from './action-toolbar/ActionToolbar';
 export { DotAlertBanner } from './alert-banner/AlertBanner';
 export { DotAppLogo } from './app-logo/AppLogo';
 export { DotAppToolbar } from './app-toolbar/AppToolbar';
-export { DotAutoComplete, parseAutoCompleteValue, } from './auto-complete/AutoComplete';
+export { DotAutoComplete } from './auto-complete/AutoComplete';
 export { DotAvatar } from './avatar/Avatar';
 export { DotAvatarGroup } from './avatar-group/AvatarGroup';
 export { DotBadge } from './badge/Badge';
@@ -77,10 +72,9 @@ 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';
+export { parseAutoCompleteValue } from './auto-complete/utils/helpers';

package/lib/components/input-form-fields/Input.stories.data.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const helperTextArgType: {
+    options: string[];
+    mapping: (string | JSX.Element)[];
+    control: {
+        type: string;
+        labels: {
+            0: string;
+            1: string;
+            2: string;
+        };
+    };
+};

package/lib/components/input-form-fields/InputFormFields.propTypes.d.ts

@@ -15,7 +15,7 @@ export interface InputProps extends CommonProps {
     /** If true, the input will take up the full width of its container */
     fullWidth?: boolean;
     /** The helper text content. */
-    helperText?: string;
+    helperText?: ReactNode;
     /**
      * id to identify the element, also used to create label "for" and helper text id attribute
      * values while it's optional, it is considered required for accessiblity best practice.

package/lib/components/input-form-fields/InputSelect.d.ts

@@ -1,10 +1,17 @@
 /// <reference types="react" />
 import { InputProps } from './InputFormFields.propTypes';
+export declare type OptionType = string | InputSelectOption;
+export interface InputSelectOption {
+    /** options that appears in dropdown */
+    option: string;
+    /** value of input field when option is selected */
+    value?: string;
+}
 export interface InputSelectProps extends InputProps {
     /** default value of select field */
     defaultValue?: string;
     /** options of select dropdown */
-    options: Array<string>;
+    options: Array<OptionType>;
     /** value of input field */
     value?: string;
 }

package/lib/components/list/List.stories.data.d.ts

@@ -1,3 +1,3 @@
-import { ListItemProps } from './ListItem';
+import { ListItemProps } from './utils/models';
 export declare const mockHref = "/?path=/story/components-list--default";
 export declare const mockListItems: Array<ListItemProps>;

package/lib/components/list/ListItem.styles.d.ts

@@ -37,6 +37,6 @@ export declare const StyledListItem: import("@material-ui/core/OverridableCompon
     button: true;
 }, "div">>> & Pick<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & {
     ref?: import("react").Ref<HTMLAnchorElement>;
-}, "slot" | "title" | "type" | "ref" | "children" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "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" | "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" | "download" | "href" | "hrefLang" | "media" | "ping" | "rel" | "target" | "referrerPolicy">) => JSX.Element) & import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").ExtendButtonBaseTypeMap<import("@material-ui/core").ListItemTypeMap<{
+}, "slot" | "title" | "type" | "ref" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "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" | "download" | "href" | "hrefLang" | "media" | "ping" | "rel" | "target" | "referrerPolicy">) => JSX.Element) & import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").ExtendButtonBaseTypeMap<import("@material-ui/core").ListItemTypeMap<{
     button: true;
 }, "div">>>;

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

@@ -0,0 +1,91 @@
+import { MouseEvent } from 'react';
+import { ListItemProps } from '../list/utils/models';
+export declare const childElement: JSX.Element;
+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>;
+interface SidebarPageTitleProps {
+    description?: string;
+    iconId: string;
+    title: string;
+}
+export declare const SidebarPageTitle: ({ description, title, iconId, }: SidebarPageTitleProps) => JSX.Element;
+export declare const SidebarStoryRoutes: () => JSX.Element;
+export {};

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/Table.stories.data.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { TextAlignment } from './TableCell';
+import { TableProps } from './Table';
 export declare const actionMenuColumns: ({
     id: string;
     label: string;
@@ -119,3 +120,4 @@ export declare const paginatedData: {
         hit: string;
     };
 }[];
+export declare const MultiSelectTable: (props: 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 {};