@digital-ai/dot-components 1.0.8 → 1.0.12

package/index.d.ts

@@ -1,3 +1,4 @@
 export * from './lib/components';
 export * as lightColors from './lib/theme-provider/colors/light-theme-colors';
+export * as themeVariables from './lib/theme-provider/common/variables';
 export { DotThemeProvider } from './lib/theme-provider/ThemeProvider';

package/lib/components/CommonProps.d.ts

@@ -1,4 +1,6 @@
 export interface CommonProps {
+    /** Defines a string value that labels the current element **/
+    ariaLabel?: string;
     /** classes to be attributed to the root of the component */
     className?: string;
     /** data attribute passed through for testing purposes ONLY */

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

@@ -20,4 +20,4 @@ export interface AccordionProps extends CommonProps {
     /** The text within the expanded Accordion */
     summary: ReactNode;
 }
-export declare const DotAccordion: ({ actions, children, className, "data-testid": dataTestId, defaultExpanded, disabled, hasElevation, square, startIcon, summary, noWrap, }: AccordionProps) => JSX.Element;
+export declare const DotAccordion: ({ actions, ariaLabel, children, className, "data-testid": dataTestId, defaultExpanded, disabled, hasElevation, square, startIcon, summary, noWrap, }: AccordionProps) => JSX.Element;

package/lib/components/action-toolbar/ActionToolbar.d.ts

@@ -7,4 +7,4 @@ export interface DotActionBarProps extends CommonProps {
     /** DotActionBarVarient dense and regular for toolbar height */
     variant?: DotActionBarVarient;
 }
-export declare const DotActionToolbar: ({ children, variant, }: DotActionBarProps) => JSX.Element;
+export declare const DotActionToolbar: ({ ariaLabel, children, className, "data-testid": dataTestId, variant, }: DotActionBarProps) => JSX.Element;

package/lib/components/alert-banner/AlertBanner.d.ts

@@ -7,4 +7,4 @@ export interface AlertBannerProps extends CommonProps {
     onClose?: (event: MouseEvent) => void;
     severity: AlertBannerSeverity;
 }
-export declare const DotAlertBanner: ({ action, children, className, "data-testid": dataTestId, onClose, severity, }: AlertBannerProps) => JSX.Element;
+export declare const DotAlertBanner: ({ action, ariaLabel, children, className, "data-testid": dataTestId, onClose, severity, }: AlertBannerProps) => JSX.Element;

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

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 import { IconButtonProps } from '../button/IconButton';
+import { ListItemProps } from '../list/List';
 export interface AppToolbarProps extends CommonProps {
     /** Product name displayed next to Digital.ai logo */
     appName?: string;
@@ -12,11 +13,13 @@ export interface AppToolbarProps extends CommonProps {
     children?: ReactNode;
     /** Allow to display custom logo */
     customLogo?: ReactNode;
-    /** If provided will display a hamburger main menu drawer */
+    /** If provided will overwrite `mainMenuItems` and display within the main menu drawer */
     mainMenu?: ReactNode;
+    /** If provided will display the menu items within the main menu drawer */
+    mainMenuItems?: Array<ListItemProps>;
     /** Width of main menu drawer if mainMenu provided, defaults to 240px */
     mainMenuWidth?: number;
     /** Array of nav items to be displayed on the right side */
     navItems?: Array<IconButtonProps>;
 }
-export declare const DotAppToolbar: ({ avatar, borderColor, appName, children, className, customLogo, "data-testid": dataTestId, navItems, mainMenu, mainMenuWidth, }: AppToolbarProps) => JSX.Element;
+export declare const DotAppToolbar: ({ ariaLabel, avatar, borderColor, appName, children, className, customLogo, "data-testid": dataTestId, navItems, mainMenu, mainMenuItems, mainMenuWidth, }: AppToolbarProps) => JSX.Element;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 export declare const rootClassName = "dot-app-toolbar";
-export declare const StyledMainMenu: import("styled-components").StyledComponent<({ anchor, className, children, "data-testid": dataTestId, height, ModalProps, onClose, open, PaperProps, variant, width, }: import("../drawer/Drawer").DrawerProps) => JSX.Element, any, {}, never>;
+export declare const StyledMainMenu: import("styled-components").StyledComponent<({ anchor, ariaLabel, className, children, "data-testid": dataTestId, height, ModalProps, onClose, open, PaperProps, variant, width, }: import("../drawer/Drawer").DrawerProps) => JSX.Element, any, {}, never>;
 export declare const StyledAppToolbar: import("styled-components").StyledComponent<"header", any, {}, never>;

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

@@ -1,7 +1,7 @@
 import { ChangeEvent, Ref } from 'react';
 import { CommonProps } from '../CommonProps';
 export declare type autoCompleteSize = 'medium' | 'small';
-export declare type AutoCompleteValue = string | AutoCompleteOption | AutoCompleteOption[];
+export declare type AutoCompleteValue = string | string[] | AutoCompleteOption | AutoCompleteOption[];
 export interface AutoCompleteOption {
     group?: string;
     title: string;
@@ -34,7 +34,7 @@ export interface AutoCompleteProps extends CommonProps {
     /** A function that should be executed when the value of the input changes */
     onChange?: (event: ChangeEvent<unknown>, value: AutoCompleteValue, reason: string) => void;
     /** pre-defined options available to the user */
-    options: Array<AutoCompleteOption>;
+    options?: Array<AutoCompleteOption>;
     /** Placeholder text always displayed inside the input field */
     placeholder?: string;
     /** Determines the padding within the input field 'medium' or 'small' */
@@ -42,4 +42,4 @@ export interface AutoCompleteProps extends CommonProps {
     /** value if this is a controlled component */
     value?: AutoCompleteValue;
 }
-export declare const DotAutoComplete: ({ autoFocus, className, "data-testid": dataTestId, defaultValue, disabled, error, freesolo, group, helperText, inputId, inputRef, label, multiple, onChange, options, placeholder, size, value, }: AutoCompleteProps) => JSX.Element;
+export declare const DotAutoComplete: ({ ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disabled, error, freesolo, group, helperText, inputId, inputRef, label, multiple, onChange, options, placeholder, size, value, }: AutoCompleteProps) => JSX.Element;

package/lib/components/avatar/Avatar.d.ts

@@ -17,7 +17,7 @@ export interface AvatarProps extends CommonProps {
     onClick?: (event: MouseEvent) => void;
     /** Size of avatar displayed */
     size?: AvatarSize;
-    /** To be used to override syles inline */
+    /** To be used to override styles inline */
     style?: CSSProperties;
     /** The text to be displayed. Only the first 2 letters will be displayed. */
     text?: string;
@@ -26,4 +26,4 @@ export interface AvatarProps extends CommonProps {
     /** The shape of the avatar */
     variant?: AvatarVariant;
 }
-export declare const DotAvatar: ({ alt, className, color, "data-testid": dataTestId, iconId, imageSrc, onClick, size, text, type, variant, style, }: AvatarProps) => JSX.Element;
+export declare const DotAvatar: ({ alt, ariaLabel, className, color, "data-testid": dataTestId, iconId, imageSrc, onClick, size, text, type, variant, style, }: AvatarProps) => JSX.Element;

package/lib/components/avatar-group/AvatarGroup.d.ts

@@ -10,4 +10,4 @@ export interface AvatarGroupProps extends CommonProps {
     /** Spacing between avatars */
     spacing?: AvatarGroupSpacing;
 }
-export declare const DotAvatarGroup: ({ avatars, className, "data-testid": dataTestId, max, spacing, }: AvatarGroupProps) => JSX.Element;
+export declare const DotAvatarGroup: ({ ariaLabel, avatars, className, "data-testid": dataTestId, max, spacing, }: AvatarGroupProps) => JSX.Element;

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

@@ -1,7 +1,9 @@
 import React from 'react';
-import { LinkUnderline } from '../link/Link';
 import { CommonProps } from '../CommonProps';
+import { LinkUnderline } from '../link/Link';
 export declare type BreadcrumbItem = {
+    /** Defines a string value that labels the current element **/
+    ariaLabel?: string;
     /** link the breadcrumb goes to */
     href?: string;
     onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
@@ -17,5 +19,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 */
+    minWidth?: number;
 }
-export declare const DotBreadcrumbs: ({ className, "data-testid": dataTestId, expansionMenu, items, maxItems, }: BreadcrumbProps) => JSX.Element;
+export declare const DotBreadcrumbs: ({ className, "data-testid": dataTestId, expansionMenu, items, maxItems, minWidth, }: BreadcrumbProps) => JSX.Element;

package/lib/components/button/Button.d.ts

@@ -9,4 +9,4 @@ export interface ButtonProps extends BaseButtonProps {
     startIcon?: ReactNode;
 }
 /** This component wraps the Button component from @material-ui. */
-export declare const DotButton: ({ autoFocus, children, className, "data-testid": dataTestId, disabled, disableRipple, endIcon, fullWidth, isSubmit, onClick, size, startIcon, titleTooltip, type, }: ButtonProps) => JSX.Element;
+export declare const DotButton: ({ ariaLabel, autoFocus, children, className, "data-testid": dataTestId, disabled, disableRipple, endIcon, fullWidth, isSubmit, onClick, size, startIcon, titleTooltip, type, }: ButtonProps) => JSX.Element;

package/lib/components/button/IconButton.d.ts

@@ -17,4 +17,4 @@ export interface IconButtonProps extends CommonProps {
     titleTooltip?: string;
 }
 /** This component wraps the IconButton component from @material-ui. */
-export declare const DotIconButton: ({ className, color, "data-testid": dataTestId, disabled, iconId, onClick, titleTooltip, size, }: IconButtonProps) => JSX.Element;
+export declare const DotIconButton: ({ ariaLabel, className, color, "data-testid": dataTestId, disabled, iconId, onClick, titleTooltip, size, }: IconButtonProps) => JSX.Element;

package/lib/components/button-toggle/ButtonToggle.d.ts

@@ -4,8 +4,6 @@ export declare type ButtonToggleSize = 'small' | 'medium' | 'large';
 export declare type ButtonToggleOrientation = 'horizontal' | 'vertical';
 declare type ButtonToggleValue = string | number | boolean;
 export interface ButtonToggleProps extends CommonProps {
-    /** accessibility label */
-    ariaLabel: string;
     /** button props for each toggle button options*/
     buttonOptions: {
         ariaLabel: string;

package/lib/components/card/Card.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 export interface CardProps extends CommonProps {
+    /** The content for the Card.*/
     children: ReactNode;
 }
-export declare const DotCard: ({ children, className, "data-testid": dataTestId, }: CardProps) => JSX.Element;
+export declare const DotCard: ({ ariaLabel, children, className, "data-testid": dataTestId, }: CardProps) => JSX.Element;

package/lib/components/card/CardContent.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 export interface CardContentProps extends CommonProps {
+    /** The content for the CardContent.*/
     children: ReactNode;
 }
-export declare const DotCardContent: ({ children, className, "data-testid": dataTestId, }: CardContentProps) => JSX.Element;
+export declare const DotCardContent: ({ ariaLabel, children, className, "data-testid": dataTestId, }: CardContentProps) => JSX.Element;

package/lib/components/card/CardFooter.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 export interface CardFooterProps extends CommonProps {
+    /** The content for the CardFooter.*/
     children: ReactNode;
 }
-export declare const DotCardFooter: ({ children, className, "data-testid": dataTestId, }: CardFooterProps) => JSX.Element;
+export declare const DotCardFooter: ({ ariaLabel, children, className, "data-testid": dataTestId, }: CardFooterProps) => JSX.Element;

package/lib/components/card/CardHeader.d.ts

@@ -16,4 +16,4 @@ export interface CardHeaderProps extends CommonProps {
     /** Card title size */
     titleSize?: TitleSize;
 }
-export declare const DotCardHeader: ({ action, avatar, className, "data-testid": dataTestId, subheader, subheaderSize, title, titleSize, }: CardHeaderProps) => JSX.Element;
+export declare const DotCardHeader: ({ action, ariaLabel, avatar, className, "data-testid": dataTestId, subheader, subheaderSize, title, titleSize, }: CardHeaderProps) => JSX.Element;

package/lib/components/checkbox/Checkbox.d.ts

@@ -3,8 +3,6 @@ import { RadioButtonProps } from '../radio/RadioButton';
 export declare type CheckboxSize = 'medium' | 'small';
 export declare type CheckboxLabelPlacement = 'bottom' | 'end' | 'start';
 export interface CheckboxProps extends RadioButtonProps {
-    /** accessibility label */
-    ariaLabel?: string;
     /** accessibility labelled by */
     ariaLabelledby?: string;
     /** If true, the ripple effect will be disabled. */

package/lib/components/checkbox/CheckboxGroup.d.ts

@@ -13,4 +13,4 @@ export interface CheckboxGroupProps extends RadioGroupBaseProps {
     /** if true use parent for selecting/deselecting all */
     showSelectAll?: boolean;
 }
-export declare function DotCheckboxGroup({ ariaLabel, className, defaultValues, disableGroup, endIcon, error, groupLabel, helperText, name, labelPlacement, onChange, options, showSelectAll, required, row, selectAllLabel, startIcon, size, }: CheckboxGroupProps): JSX.Element;
+export declare function DotCheckboxGroup({ ariaLabel, className, 'data-testid': dataTestId, defaultValues, disableGroup, endIcon, error, groupLabel, helperText, name, labelPlacement, onChange, options, showSelectAll, required, row, selectAllLabel, startIcon, size, }: CheckboxGroupProps): JSX.Element;

package/lib/components/chip/Chip.d.ts

@@ -23,4 +23,4 @@ export interface ChipProps extends CommonProps {
     /** The icon to display on the chip */
     startIcon?: ReactElement;
 }
-export declare const DotChip: ({ avatar, children, className, "data-testid": dataTestId, disabled, error, isClickable, isDeletable, onClick, onDelete, size, startIcon, }: ChipProps) => JSX.Element;
+export declare const DotChip: ({ ariaLabel, avatar, children, className, "data-testid": dataTestId, disabled, error, isClickable, isDeletable, onClick, onDelete, size, startIcon, }: ChipProps) => JSX.Element;

package/lib/components/compareSize.d.ts

@@ -0,0 +1 @@
+export declare const compareWidth: (parentEl: Element | HTMLElement, childEl: Element | HTMLElement) => boolean;

package/lib/components/confirmation-dialog/ConfirmationDialog.d.ts

@@ -17,4 +17,4 @@ export interface ConfirmationDialogProps extends CommonProps {
     /** The dialog title */
     title?: ReactNode;
 }
-export declare const DotConfirmationDialog: ({ cancelButtonProps, className, "data-testid": dataTestId, message, onCancel, onSubmit, submitButtonProps, open, title, }: ConfirmationDialogProps) => JSX.Element;
+export declare const DotConfirmationDialog: ({ ariaLabel, cancelButtonProps, className, "data-testid": dataTestId, message, onCancel, onSubmit, submitButtonProps, open, title, }: ConfirmationDialogProps) => JSX.Element;

package/lib/components/dialog/Dialog.d.ts

@@ -35,4 +35,4 @@ export interface DialogProps extends CommonProps {
     /** dialog heading */
     title: ReactNode;
 }
-export declare const DotDialog: ({ cancelButtonProps, className, "data-testid": dataTestId, children, closeIconVisible, closeOnClickAway, hasPrimaryAction, onCancel, onSubmit, open, submitButtonProps, title, }: DialogProps) => JSX.Element;
+export declare const DotDialog: ({ ariaLabel, cancelButtonProps, className, "data-testid": dataTestId, children, closeIconVisible, closeOnClickAway, hasPrimaryAction, onCancel, onSubmit, open, submitButtonProps, title, }: DialogProps) => JSX.Element;

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

@@ -29,4 +29,4 @@ export interface DrawerProps extends CommonProps {
     /** The width of the drawer when anchor is 'left' or 'right' */
     width?: string;
 }
-export declare const DotDrawer: ({ anchor, className, children, "data-testid": dataTestId, height, ModalProps, onClose, open, PaperProps, variant, width, }: DrawerProps) => JSX.Element;
+export declare const DotDrawer: ({ anchor, ariaLabel, className, children, "data-testid": dataTestId, height, ModalProps, onClose, open, PaperProps, variant, width, }: DrawerProps) => JSX.Element;

package/lib/components/empty-state/EmptyState.d.ts

@@ -13,4 +13,4 @@ export interface EmptyStateProps extends CommonProps {
     /** title text displayed */
     title: string;
 }
-export declare const DotEmptyState: ({ buttonProps, className, "data-testid": dataTestId, imageAltText, imageSrc, subtitle, title, }: EmptyStateProps) => JSX.Element;
+export declare const DotEmptyState: ({ ariaLabel, buttonProps, className, "data-testid": dataTestId, imageAltText, imageSrc, subtitle, title, }: EmptyStateProps) => JSX.Element;

package/lib/components/form/Form.d.ts

@@ -1,7 +1,9 @@
 import { FormEvent, ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 export interface FormProps extends CommonProps {
+    /** The content for the Form. **/
     children: ReactNode;
+    /** Callback function when form is submitted **/
     onSubmit: (event: FormEvent) => void;
 }
-export declare const DotForm: ({ children, className, "data-testid": dataTestId, onSubmit, }: FormProps) => JSX.Element;
+export declare const DotForm: ({ ariaLabel, children, className, "data-testid": dataTestId, onSubmit, }: FormProps) => JSX.Element;

package/lib/components/form-group/FormGroup.d.ts

@@ -1,8 +1,6 @@
 import { ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 export interface FormGroupProps extends CommonProps {
-    /** accessibility label */
-    ariaLabel?: string;
     /** The text for the button. Button text should be in sentence case. */
     children: ReactNode;
     /** changes layout to be horizontal if true */

package/lib/components/helpers.d.ts

@@ -0,0 +1,3 @@
+import { AvatarColor } from './avatar/Avatar';
+export declare const calculateNumberFromText: (text: string) => number;
+export declare const getAvatarColorForInputText: (value: string) => AvatarColor;

package/lib/components/icon/Icon.d.ts

@@ -9,4 +9,4 @@ export interface IconProps extends CommonProps {
     /** Tooltip text displayed on hover */
     title?: string;
 }
-export declare const DotIcon: ({ className, "data-testid": dataTestId, fontSize, iconId, title, }: IconProps) => JSX.Element;
+export declare const DotIcon: ({ ariaLabel, className, "data-testid": dataTestId, fontSize, iconId, title, }: IconProps) => JSX.Element;

package/lib/components/index.d.ts

@@ -16,7 +16,7 @@ export { CheckboxProps, DotCheckbox } from './checkbox/Checkbox';
 export { DotCheckboxGroup } from './checkbox/CheckboxGroup';
 export { DotChip } from './chip/Chip';
 export { DotConfirmationDialog } from './confirmation-dialog/ConfirmationDialog';
-export { Cell } from './css-grid/CssCell';
+export { Cell, CssCell } from './css-grid/CssCell';
 export { CssGrid } from './css-grid/CssGrid';
 export { CssGridDebug } from './css-grid/CssGridDebug';
 export { DotDialog } from './dialog/Dialog';
@@ -44,8 +44,9 @@ export { DotSnackbarContainer, DotSnackbarProvider, useDotSnackbarContext, } fro
 export { DotSplitButton } from './split-button/SplitButton';
 export { DotSwitch } from './switch/Switch';
 export { DotTable, TableRowProps } from './table/Table';
+export { Order } from './table/TableBody';
 export { DotHeaderRow, DotColumnHeader } from './table/TableHeader';
 export { TableDataWithPagination } from './table/TableDataWithPagination';
-export { DotTablePagination } from './table/TablePagination';
+export { DotTablePagination, RowsPerPageOption } from './table/TablePagination';
 export { DotTabs, TabProps } from './tabs/Tabs';
 export { DotTypography, TypographyVariant } from './typography/Typography';

package/lib/components/inline-edit/InlineEdit.d.ts

@@ -32,4 +32,4 @@ export interface InlineEditProps extends CommonProps {
 /**
  * @experimental This component is still in development
  */
-export declare const DotInlineEdit: ({ autoFocus, className, "data-testid": dataTestId, disabled, error, fullWidth, helperText, name, onEditStateChange, onLabelChange, readOnly, required, size, value, }: InlineEditProps) => JSX.Element;
+export declare const DotInlineEdit: ({ ariaLabel, autoFocus, className, "data-testid": dataTestId, disabled, error, fullWidth, helperText, name, onEditStateChange, onLabelChange, readOnly, required, size, value, }: InlineEditProps) => JSX.Element;

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

@@ -8,4 +8,4 @@ export interface InputSelectProps extends InputProps {
     /** value of input field */
     value?: string;
 }
-export declare const DotInputSelect: ({ autoFocus, className, "data-testid": dataTestId, defaultValue, disabled, endIcon, error, fullWidth, helperText, id, inputRef, label, name, onChange, options, required, size, startIcon, value, warning, }: InputSelectProps) => JSX.Element;
+export declare const DotInputSelect: ({ ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disabled, endIcon, error, fullWidth, helperText, id, inputRef, label, name, onChange, options, required, size, startIcon, value, warning, }: InputSelectProps) => JSX.Element;

package/lib/components/link/Link.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactNode } from 'react';
+import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 export declare type LinkColor = 'initial' | 'inherit' | 'primary' | 'secondary' | 'textPrimary' | 'textSecondary' | 'error';
 export declare type LinkUnderline = 'always' | 'hover' | 'none';
@@ -11,9 +11,9 @@ export interface LinkProps extends CommonProps {
     /** href for the link. */
     href?: string;
     /** event callback */
-    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    onClick?: (event: KeyboardEvent<Element> | MouseEvent<Element>) => void;
     /** mouse enter event callback */
-    onMouseEnter?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    onMouseEnter?: (event: MouseEvent<Element>) => void;
     /** specifies the relationship between the current document and the linked document */
     rel?: string;
     /** tab order for the link */
@@ -25,4 +25,4 @@ export interface LinkProps extends CommonProps {
     /**  underline the link */
     underline?: LinkUnderline;
 }
-export declare const DotLink: ({ children, className, color, "data-testid": dataTestId, href, onClick, onMouseEnter, rel, tabIndex, target, title, underline, }: LinkProps) => JSX.Element;
+export declare const DotLink: ({ ariaLabel, children, className, color, "data-testid": dataTestId, href, onClick, onMouseEnter, rel, tabIndex, target, title, underline, }: LinkProps) => JSX.Element;

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

@@ -19,8 +19,6 @@ export interface NestedListProps extends CommonProps {
     type?: NestedListType;
 }
 export interface ListProps extends CommonProps {
-    /** aria-label passed to the list component */
-    ariaLabel?: string;
     /** string or JSX element that is displayed inside the toolbar */
     children?: ReactNode;
     /** The component used for the root node. Either a string to use a HTML element or a component. */
@@ -65,4 +63,4 @@ export interface ListItemProps extends CommonProps {
     title?: string;
 }
 export declare const DotList: ({ ariaLabel, children, className, component, "data-testid": dataTestId, dense, disablePadding, items, menuPlacement, nestedListType, }: ListProps) => JSX.Element;
-export declare const DotListItem: ({ className, component, "data-testid": dataTestId, divider, endIconId, href, index, onClick, items, menuPlacement, nestedListType, selected, startIconId, text, title, }: ListItemProps) => JSX.Element;
+export declare const DotListItem: ({ ariaLabel, className, component, "data-testid": dataTestId, divider, endIconId, href, index, onClick, items, menuPlacement, nestedListType, selected, startIconId, text, title, }: ListItemProps) => JSX.Element;

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

@@ -34,13 +34,13 @@ export declare const StyledListItem: import("@material-ui/core/OverridableCompon
     disableTouchRipple?: boolean;
     focusRipple?: boolean;
     focusVisibleClassName?: string;
-    onFocusVisible?: (event: import("react").FocusEvent<any>) => void;
-    tabIndex?: import("react").ReactText;
+    onFocusVisible?: import("react").FocusEventHandler<any>;
+    tabIndex?: string | number;
     TouchRippleProps?: Partial<import("@material-ui/core/ButtonBase/TouchRipple").TouchRippleProps>;
 } & import("@material-ui/core/OverridableComponent").CommonProps<import("@material-ui/core").ExtendButtonBaseTypeMap<import("@material-ui/core").ListItemTypeMap<{
     button: true;
-}, "div">>> & Pick<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "slot" | "style" | "title" | "type" | "children" | "className" | "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"> & {
-    ref?: ((instance: HTMLAnchorElement) => void) | import("react").RefObject<HTMLAnchorElement>;
+}, "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<{
     button: true;
 }, "div">>>;

package/lib/components/menu/Menu.d.ts

@@ -20,6 +20,8 @@ export interface MenuProps extends CommonProps {
     onSelect?: (event: MouseEvent | KeyboardEvent, menuId: string, itemKey: string) => void;
 }
 export interface MenuItemProps {
+    /** Defines a string value that labels the current element **/
+    ariaLabel?: string;
     /** The text displayed on the item */
     children?: ReactNode;
     /** Space delimited CSS classes to be attributed to the menu item */
@@ -27,4 +29,4 @@ export interface MenuItemProps {
     /** A key that can be used to determine which item was clicked */
     key?: string;
 }
-export declare const DotMenu: ({ anchorEl, className, "data-testid": dataTestId, disablePortal, id, menuItems, menuPlacement, onLeave, onSelect, open, }: MenuProps) => JSX.Element;
+export declare const DotMenu: ({ anchorEl, ariaLabel, className, "data-testid": dataTestId, disablePortal, id, menuItems, menuPlacement, onLeave, onSelect, open, }: MenuProps) => JSX.Element;

package/lib/components/navigation-rail/NavigationRail.d.ts

@@ -2,6 +2,8 @@
 import { CommonProps } from '../CommonProps';
 export declare type RailItemsPosition = 'flex-start' | 'center' | 'flex-end';
 export interface RailItem {
+    /** Defines a string value that labels the current element **/
+    ariaLabel?: string;
     /** Id of the icon shown in the rail item */
     iconId: string;
     /** text displayed or title text if icon used */
@@ -17,4 +19,4 @@ export interface NavigationRailProps extends CommonProps {
     /** index of selected rail item */
     selectedIndex?: number;
 }
-export declare const DotNavigationRail: ({ className, "data-testid": dataTestId, onChange, railItemPosition, railItems, selectedIndex, }: NavigationRailProps) => JSX.Element;
+export declare const DotNavigationRail: ({ ariaLabel, className, "data-testid": dataTestId, onChange, railItemPosition, railItems, selectedIndex, }: NavigationRailProps) => JSX.Element;

package/lib/components/pill/Pill.d.ts

@@ -14,4 +14,4 @@ export interface PillProps extends CommonProps {
     /** Determines the status of the pill component */
     status?: PillStatus;
 }
-export declare const DotPill: ({ backgroundcolor, className, "data-testid": dataTestId, label, labelcolor, size, status, }: PillProps) => JSX.Element;
+export declare const DotPill: ({ ariaLabel, backgroundcolor, className, "data-testid": dataTestId, label, labelcolor, size, status, }: PillProps) => JSX.Element;

package/lib/components/progress/Progress.d.ts

@@ -16,4 +16,4 @@ export interface ProgressProps extends CommonProps {
     /** type of progress spinner displayed */
     variant?: progressVariantOptions;
 }
-export declare const DotProgress: ({ color, className, "data-testid": dataTestId, size, thickness, title, value, variant, }: ProgressProps) => JSX.Element;
+export declare const DotProgress: ({ ariaLabel, color, className, "data-testid": dataTestId, size, thickness, title, value, variant, }: ProgressProps) => JSX.Element;

package/lib/components/radio/RadioButton.d.ts

@@ -28,4 +28,4 @@ export interface RadioButtonProps extends RadioButtonBaseProps {
     /** A function that should be executed when the value of the radio buttom changes */
     onChange?: (event: ChangeEvent<HTMLInputElement>, value: string) => void;
 }
-export declare function DotRadioButton({ checked, className, 'data-testid': dataTestId, disabled, id, inputRef, label, labelPlacement, name, onChange, required, size, value, }: RadioButtonProps): JSX.Element;
+export declare function DotRadioButton({ ariaLabel, checked, className, 'data-testid': dataTestId, disabled, id, inputRef, label, labelPlacement, name, onChange, required, size, value, }: RadioButtonProps): JSX.Element;

package/lib/components/radio/RadioGroup.d.ts

@@ -1,8 +1,6 @@
 import { ChangeEvent, ReactNode } from 'react';
 import { RadioButtonBaseProps, RadioButtonProps } from './RadioButton';
 export interface RadioGroupBaseProps extends RadioButtonBaseProps {
-    /** accessibility label */
-    ariaLabel?: string;
     /** if true makes all radio buttons disabled */
     disableGroup?: boolean;
     /** Icon placed before the children. */

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

@@ -36,4 +36,4 @@ export interface SidebarProps extends CommonProps {
     /** If provided, will display an avatar next to the title text */
     titleAvatarProps?: AvatarProps;
 }
-export declare const DotSidebar: ({ backItem, brandDesc, children, className, collapsable, "data-testid": dataTestId, displayBrand, goBack, navItems, nestedListType, open, title, titleAvatarProps, }: SidebarProps) => JSX.Element;
+export declare const DotSidebar: ({ ariaLabel, backItem, brandDesc, children, className, collapsable, "data-testid": dataTestId, displayBrand, goBack, navItems, nestedListType, open, title, titleAvatarProps, }: SidebarProps) => JSX.Element;

package/lib/components/skeleton/Skeleton.d.ts

@@ -11,4 +11,4 @@ export interface SkeletonProps extends CommonProps {
     /** Determine width of skeleton */
     width?: number | string;
 }
-export declare const DotSkeleton: ({ children, className, "data-testid": dataTestId, height, width, variant, }: SkeletonProps) => JSX.Element;
+export declare const DotSkeleton: ({ ariaLabel, children, className, "data-testid": dataTestId, height, width, variant, }: SkeletonProps) => JSX.Element;

package/lib/components/snackbar/Snackbar.d.ts

@@ -14,4 +14,4 @@ export interface SnackbarProps extends CommonProps {
     severity: SnackbarSeverity;
     width?: string;
 }
-export declare const DotSnackbar: ({ open, onClose, severity, children, action, className, width, }: SnackbarProps) => JSX.Element;
+export declare const DotSnackbar: ({ action, ariaLabel, children, className, "data-testid": dataTestId, onClose, open, severity, width, }: SnackbarProps) => JSX.Element;

package/lib/components/split-button/SplitButton.styles.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 export declare const rootClassName = "dot-split-button-group";
 export declare const StyledSplitButtonGroup: import("styled-components").StyledComponent<import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").ButtonGroupTypeMap<{}, "div">>, any, {}, never>;
-export declare const StyledMenu: import("styled-components").StyledComponent<({ anchorEl, className, "data-testid": dataTestId, disablePortal, id, menuItems, menuPlacement, onLeave, onSelect, open, }: import("../menu/Menu").MenuProps) => JSX.Element, any, {}, never>;
+export declare const StyledMenu: import("styled-components").StyledComponent<({ anchorEl, ariaLabel, className, "data-testid": dataTestId, disablePortal, id, menuItems, menuPlacement, onLeave, onSelect, open, }: import("../menu/Menu").MenuProps) => JSX.Element, any, {}, never>;

package/lib/components/switch/Switch.d.ts

@@ -4,8 +4,6 @@ export declare type SwitchColor = 'default' | 'primary' | 'secondary';
 export declare type SwitchSize = 'medium' | 'small';
 export declare type SwitchLabelPlacement = 'bottom' | 'end' | 'start' | 'top';
 export interface SwitchProps extends CommonProps {
-    /** accessibility label */
-    ariaLabel?: string;
     /** determines the default state of the switch */
     checked?: boolean;
     /** color options available 'default', 'primary', 'secondary' */

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

@@ -12,7 +12,6 @@ export interface TableRowProps extends CommonProps {
     rowData: any;
 }
 export interface TableProps extends CommonProps {
-    ariaLabel: string;
     /** The table header columns */
     columns: Array<DotColumnHeader>;
     /** Total number of items for paginated table.
@@ -37,6 +36,8 @@ export interface TableProps extends CommonProps {
     onRowClick?: (event: MouseEvent, id: string) => void;
     /** Update data callback if data is managed by consumer */
     onUpdateData?: (order: Order, orderBy: string, page: number, rowsPerPage: number) => void;
+    /** The zero-based index of the current page  for paginated table */
+    page?: number;
     /** Rows per page for paginated table */
     rowsPerPage?: RowsPerPageOption;
     /** Table is sortable */
@@ -53,4 +54,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, rowsPerPage, stickyHeader, sortable, toolbar, }: TableProps) => JSX.Element;
+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;

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

@@ -3,6 +3,14 @@ export declare const defaultColumns: ({
     id: string;
     label: string;
     width: string;
+    truncate: boolean;
+    align?: undefined;
+    sortable?: undefined;
+} | {
+    id: string;
+    label: string;
+    width: string;
+    truncate?: undefined;
     align?: undefined;
     sortable?: undefined;
 } | {
@@ -10,6 +18,7 @@ export declare const defaultColumns: ({
     label: string;
     align: string;
     width: string;
+    truncate?: undefined;
     sortable?: undefined;
 } | {
     id: string;
@@ -17,6 +26,7 @@ export declare const defaultColumns: ({
     width: string;
     align: string;
     label?: undefined;
+    truncate?: undefined;
 })[];
 export declare const defaultData: ({
     id: string;
@@ -37,11 +47,19 @@ export declare const defaultData: ({
     };
     selected?: undefined;
 })[];
-export declare const paginatedColumns: {
+export declare const paginatedColumns: ({
     id: string;
     label: string;
     width: string;
-}[];
+    truncate: boolean;
+    align?: undefined;
+} | {
+    id: string;
+    label: string;
+    width: string;
+    align: string;
+    truncate?: undefined;
+})[];
 export declare const paginatedData: {
     id: string;
     rowData: {