@digital-ai/dot-components 1.5.0 → 1.5.4

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

@@ -1,4 +1,4 @@
-import { ChangeEvent, ReactElement, ReactNode } from 'react';
+import { ChangeEvent, ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 export interface AccordionProps extends CommonProps {
     /** actionable components (ex: checkbox, button) that can be nested within the expanded Accordion component */
@@ -25,6 +25,6 @@ export interface AccordionProps extends CommonProps {
     /** Icon placed before the children. */
     startIcon?: ReactNode;
     /** The text within the expanded Accordion */
-    summary: ReactElement;
+    summary: ReactNode | string;
 }
 export declare const DotAccordion: ({ actions, ariaLabel, children, className, "data-testid": dataTestId, defaultExpanded, disabled, expanded, hasElevation, onChange, square, startIcon, summary, noWrap, }: AccordionProps) => JSX.Element;

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

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 import { IconButtonProps } from '../button/IconButton';
-import { ListItemProps } from '../list/List';
+import { ListItemProps } from '../list';
 export interface AppToolbarProps extends CommonProps {
     /** If provided will display application logo */
     appLogo?: ReactNode;
@@ -27,5 +27,7 @@ export interface AppToolbarProps extends CommonProps {
     mainMenuWidth?: number;
     /** Array of nav items to be displayed on the right side */
     navItems?: Array<IconButtonProps>;
+    /** 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, }: AppToolbarProps) => JSX.Element;
+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;

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

@@ -1,9 +1,13 @@
-import React, { MutableRefObject } from 'react';
+import React, { MutableRefObject, ReactElement } from 'react';
 import { BreadcrumbItem } from '../Breadcrumbs';
 export interface BreadcrumbItemRefs {
     firstItemRef: MutableRefObject<HTMLDivElement>;
     lastItemRef: MutableRefObject<HTMLSpanElement>;
 }
+export interface BreadcrumbItemsConfig {
+    isLastItemFullyVisible: boolean;
+    itemsAfterCollapse: number;
+}
 export declare const getItemsAfterCollapse: (adjustMaxItems: boolean, visibleItemsNumber: number, maxItems?: number) => number | undefined;
 export declare const getMaxItems: (adjustMaxItems: boolean, visibleItemsNumber: number, maxItems?: number) => number | undefined;
 export declare const getWidthFromRef: <T extends HTMLElement>(ref: React.MutableRefObject<T>) => number | undefined;
@@ -16,4 +20,6 @@ export declare const getMenuItems: (items: BreadcrumbItem[], itemsAfterCollapse:
 }[];
 export declare const addListenersToMenu: (expandElement: Element, eventListener: EventListener) => void;
 export declare const removeListenersFromMenu: (expandElement: Element, eventListener: EventListener) => void;
-export declare const mapBreadcrumbItems: (items: BreadcrumbItem[], refs: BreadcrumbItemRefs, itemsAfterCollapse: number) => JSX.Element[];
+export declare const getLastItemElement: ({ ariaLabel, text }: BreadcrumbItem, lastItemRef: MutableRefObject<HTMLSpanElement>, index?: number) => ReactElement;
+export declare const mapBreadcrumbItems: (items: BreadcrumbItem[], refs: BreadcrumbItemRefs, { isLastItemFullyVisible, itemsAfterCollapse }: BreadcrumbItemsConfig) => JSX.Element[];
+export declare const checkIfLastItemFullyVisible: (breadcrumbRef: MutableRefObject<HTMLElement>, lastItemRef: MutableRefObject<HTMLSpanElement>) => boolean;

package/lib/components/breadcrumbs/utils/useBreadcrumbsObserver.d.ts

@@ -1,7 +1,5 @@
 import { MutableRefObject } from 'react';
 import { BreadcrumbItem } from '../Breadcrumbs';
-export declare const MIN_AVAILABLE_SPACE = 60;
-export declare const ITEMS_SEPARATOR_SPACE = 20;
 interface BreadcrumbsObserverRefs {
     breadcrumbRef: MutableRefObject<HTMLElement>;
     firstItemRef: MutableRefObject<HTMLDivElement>;

package/lib/components/breadcrumbs/utils/useBreadcrumbsResizer.d.ts

@@ -12,5 +12,7 @@ interface BreadcrumbItemsProps {
     items: Array<BreadcrumbItem>;
     maxItems?: number;
 }
+export declare const MIN_AVAILABLE_SPACE = 60;
+export declare const ITEMS_SEPARATOR_SPACE = 20;
 export declare const useBreadcrumbsResizer: (breadcrumbsRightCoord: number, breadcrumbItemsProps: BreadcrumbItemsProps, refs: BreadcrumbsResizerRefs) => [MaxVisibleItems];
 export {};

package/lib/components/helpers.d.ts

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

package/lib/components/index.d.ts

@@ -12,7 +12,7 @@ export type { IconButtonProps } from './button/IconButton';
 export type { InputTextProps } from './input-form-fields/InputText';
 export type { InputSelectProps } from './input-form-fields/InputSelect';
 export type { LinkUnderline } from './link/Link';
-export type { ListItemProps } from './list/List';
+export type { ListItemProps } from './list';
 export type { MenuItemProps } from './menu/Menu';
 export type { RailItem } from './navigation-rail/NavigationRail';
 export type { RadioButtonProps } from './radio/RadioButton';
@@ -62,7 +62,7 @@ export { DotInlineEdit } from './inline-edit/InlineEdit';
 export { DotInputText } from './input-form-fields/InputText';
 export { DotInputSelect } from './input-form-fields/InputSelect';
 export { DotLink } from './link/Link';
-export { DotList } from './list/List';
+export { DotList } from './list';
 export { DotMenu } from './menu/Menu';
 export { DotNavigationRail } from './navigation-rail/NavigationRail';
 export { DotPill } from './pill/Pill';

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

@@ -1,88 +1,5 @@
-import { ElementType, MouseEvent, KeyboardEvent, ReactNode } from 'react';
-import { CommonProps } from '../CommonProps';
-import { LinkTarget } from '../link/Link';
-import { PopperPlacement } from '../menu/Menu';
-export declare type NestedListType = 'drawer' | 'expandable' | 'menu';
-export interface NestedListProps extends CommonProps {
-    /** Element that menu is attached to */
-    anchorEl?: Element;
-    /** Array of list items displayed */
-    items: Array<ListItemProps>;
-    /** If nested list type is 'menu', determines the placement of the menu */
-    menuPlacement?: PopperPlacement;
-    /** If nested type is 'drawer', determines the width of the left spacing */
-    nestedDrawerLeftSpacing?: number;
-    /** Event callback when leaving menu via tab or clicking away */
-    onMenuLeave?: (event: KeyboardEvent | MouseEvent) => void;
-    /** if true the nested list is visible */
-    open: boolean;
-    /** Index of the parent list item */
-    parentItemIndex?: number;
-    /** If 'menu' the nested list will be displayed as a flyout nav, else it will be an expand/collapse toggle list */
-    type?: NestedListType;
-}
-export interface ListProps extends CommonProps {
-    /** string or JSX element that is displayed inside the list */
-    children?: ReactNode;
-    /** The component used for the root node. Either a string to use a HTML element or a component. */
-    component?: ElementType;
-    /** If true, compact vertical padding designed for keyboard and mouse input will be used for the list and list items. */
-    dense?: boolean;
-    /** If true, vertical padding will be removed from the list. */
-    disablePadding?: boolean;
-    /** Array of list items displayed */
-    items?: Array<ListItemProps>;
-    /** If nested list type is 'menu', determines the placement of the menu */
-    menuPlacement?: PopperPlacement;
-    /** If nested type is 'drawer', determines the width of the left spacing */
-    nestedDrawerLeftSpacing?: number;
-    /** If 'menu' the nested list will be displayed as a flyout nav, else it will be an expand/collapse toggle list */
-    nestedListType?: NestedListType;
-    /** Width of list, defaults to 240px */
-    width?: number | string;
-}
-export interface ListItemProps extends CommonProps {
-    /** string or JSX element that is displayed inside the list */
-    child?: ReactNode;
-    /** The component used for the root node. Either a string to use a HTML element or a component. */
-    component?: ElementType;
-    /** If true, a 1px light border is added to the bottom of the list item. */
-    divider?: boolean;
-    /** If provided, the icon ID which is displayed at the end of the list item */
-    endIconId?: string;
-    /** If provided, the list item will be rendered as a link */
-    href?: string;
-    /** DEPRECATED, DO NOT USE */
-    index?: number;
-    isOpened?: boolean;
-    /** If provided, the menu item will display a nested list */
-    items?: Array<ListItemProps>;
-    /** If nested list type is 'menu', determines the placement of the menu */
-    menuPlacement?: PopperPlacement;
-    /** If nested type is 'drawer', determines the width of the left spacing */
-    nestedDrawerLeftSpacing?: number;
-    /** If 'menu' the nested list will be displayed as a flyout nav, else it will be an expand/collapse toggle list */
-    nestedListType?: NestedListType;
-    /** Event callback */
-    onClick?: (event: MouseEvent) => void;
-    /** Menu leave event callback */
-    onMenuLeave?: () => void;
-    /** The main content element */
-    primaryText?: string;
-    /** The secondary content element */
-    secondaryText?: string;
-    /** Selected list item */
-    selected?: boolean;
-    /** If provided, the icon ID which is displayed on the front of the list item */
-    startIconId?: string;
-    /** where to open the link */
-    target?: LinkTarget;
-    /** Text which is displayed in the list item */
-    text?: string;
-    /** DEPRECATED, DO NOT USE */
-    title?: string;
-    /** Tooltip text displayed on hover */
-    tooltip?: string;
-}
+/// <reference types="react" />
+import { ListItemProps, ListProps, NestedListProps } from './utils/models';
 export declare const DotList: ({ ariaLabel, children, className, component, "data-testid": dataTestId, dense, disablePadding, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, width, }: ListProps) => JSX.Element;
 export declare const DotListItem: ({ ariaLabel, className, component, "data-testid": dataTestId, divider, endIconId, href, isOpened, onClick, onMenuLeave, index, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, primaryText, secondaryText, selected, startIconId, target, text, title, tooltip, }: ListItemProps) => JSX.Element;
+export declare const NestedList: ({ ariaLabel, anchorEl, items, menuPlacement, nestedDrawerLeftSpacing, onMenuLeave, open, parentItemIndex, type, }: NestedListProps) => JSX.Element;

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

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

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

@@ -1,47 +1,5 @@
-/// <reference types="react" />
 export declare const rootClassName = "dot-list";
 export declare const listItemRootClass = "dot-list-item";
 export declare const nestedListClassName = "dot-nested-list";
 export declare const nestedDrawerClassName = "dot-nested-drawer";
-export declare const flyoutListItemClassName = "dot-flyout-list-item";
-export declare const flyoutItemLinkClassName = "dot-flyout-item-link";
-export declare const listItemLinkClassName = "dot-list-item-link";
 export declare const StyledList: import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").ListTypeMap<{}, "ul">>;
-export declare const StyledListItem: import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").ListItemTypeMap<{
-    button?: false;
-}, "li">> & ((props: {
-    href: string;
-} & {
-    button: true;
-} & {
-    alignItems?: "center" | "flex-start";
-    autoFocus?: boolean;
-    button?: boolean;
-    ContainerComponent?: import("react").ElementType<import("react").HTMLAttributes<HTMLDivElement>>;
-    ContainerProps?: import("react").HTMLAttributes<HTMLDivElement>;
-    dense?: boolean;
-    disabled?: boolean;
-    disableGutters?: boolean;
-    divider?: boolean;
-    focusVisibleClassName?: string;
-    selected?: boolean;
-} & {
-    action?: import("react").Ref<import("@material-ui/core").ButtonBaseActions>;
-    buttonRef?: import("react").Ref<unknown>;
-    centerRipple?: boolean;
-    children?: import("react").ReactNode;
-    disabled?: boolean;
-    disableRipple?: boolean;
-    disableTouchRipple?: boolean;
-    focusRipple?: boolean;
-    focusVisibleClassName?: string;
-    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>, "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/list/ListItem.styles.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+export declare const flyoutListItemClassName = "dot-flyout-list-item";
+export declare const flyoutItemLinkClassName = "dot-flyout-item-link";
+export declare const listItemLinkClassName = "dot-list-item-link";
+export declare const StyledListItem: import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").ListItemTypeMap<{
+    button?: false;
+}, "li">> & ((props: {
+    href: string;
+} & {
+    button: true;
+} & {
+    alignItems?: "center" | "flex-start";
+    autoFocus?: boolean;
+    button?: boolean;
+    ContainerComponent?: import("react").ElementType<import("react").HTMLAttributes<HTMLDivElement>>;
+    ContainerProps?: import("react").HTMLAttributes<HTMLDivElement>;
+    dense?: boolean;
+    disabled?: boolean;
+    disableGutters?: boolean;
+    divider?: boolean;
+    focusVisibleClassName?: string;
+    selected?: boolean;
+} & {
+    action?: import("react").Ref<import("@material-ui/core").ButtonBaseActions>;
+    buttonRef?: import("react").Ref<unknown>;
+    centerRipple?: boolean;
+    children?: import("react").ReactNode;
+    disabled?: boolean;
+    disableRipple?: boolean;
+    disableTouchRipple?: boolean;
+    focusRipple?: boolean;
+    focusVisibleClassName?: string;
+    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>, "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/list/NestedList.styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledDotDrawer: 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>;

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

@@ -0,0 +1,2 @@
+export * from './utils/models';
+export * from './List';

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

@@ -0,0 +1,2 @@
+import { NestedListType } from './models';
+export declare const getChevronIcon: (nestedListType: NestedListType, isOpened: boolean) => "chevron-right" | "chevron-up" | "chevron-down";

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

@@ -0,0 +1,86 @@
+import { ElementType, KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import { CommonProps } from '../../CommonProps';
+import { PopperPlacement } from '../../menu/Menu';
+import { LinkTarget } from '../../link/Link';
+export declare type NestedListType = 'drawer' | 'expandable' | 'menu';
+export interface ListProps extends CommonProps {
+    /** string or JSX element that is displayed inside the list */
+    children?: ReactNode;
+    /** The component used for the root node. Either a string to use a HTML element or a component. */
+    component?: ElementType;
+    /** If true, compact vertical padding designed for keyboard and mouse input will be used for the list and list items. */
+    dense?: boolean;
+    /** If true, vertical padding will be removed from the list. */
+    disablePadding?: boolean;
+    /** Array of list items displayed */
+    items?: Array<ListItemProps>;
+    /** If nested list type is 'menu', determines the placement of the menu */
+    menuPlacement?: PopperPlacement;
+    /** If nested type is 'drawer', determines the width of the left spacing */
+    nestedDrawerLeftSpacing?: number;
+    /** If 'menu' the nested list will be displayed as a flyout nav, else it will be an expand/collapse toggle list */
+    nestedListType?: NestedListType;
+    /** Width of list, defaults to 240px */
+    width?: number | string;
+}
+export interface ListItemProps extends CommonProps {
+    /** string or JSX element that is displayed inside the list */
+    child?: ReactNode;
+    /** The component used for the root node. Either a string to use a HTML element or a component. */
+    component?: ElementType;
+    /** If true, a 1px light border is added to the bottom of the list item. */
+    divider?: boolean;
+    /** If provided, the icon ID which is displayed at the end of the list item */
+    endIconId?: string;
+    /** If provided, the list item will be rendered as a link */
+    href?: string;
+    /** DEPRECATED, DO NOT USE */
+    index?: number;
+    isOpened?: boolean;
+    /** If provided, the menu item will display a nested list */
+    items?: Array<ListItemProps>;
+    /** If nested list type is 'menu', determines the placement of the menu */
+    menuPlacement?: PopperPlacement;
+    /** If nested type is 'drawer', determines the width of the left spacing */
+    nestedDrawerLeftSpacing?: number;
+    /** If 'menu' the nested list will be displayed as a flyout nav, else it will be an expand/collapse toggle list */
+    nestedListType?: NestedListType;
+    /** Event callback */
+    onClick?: (event: MouseEvent) => void;
+    /** Menu leave event callback */
+    onMenuLeave?: () => void;
+    /** The main content element */
+    primaryText?: string;
+    /** The secondary content element */
+    secondaryText?: string;
+    /** Selected list item */
+    selected?: boolean;
+    /** If provided, the icon ID which is displayed on the front of the list item */
+    startIconId?: string;
+    /** where to open the link */
+    target?: LinkTarget;
+    /** Text which is displayed in the list item */
+    text?: string;
+    /** DEPRECATED, DO NOT USE */
+    title?: string;
+    /** Tooltip text displayed on hover */
+    tooltip?: string;
+}
+export interface NestedListProps extends CommonProps {
+    /** Element that menu is attached to */
+    anchorEl?: Element;
+    /** Array of list items displayed */
+    items: Array<ListItemProps>;
+    /** If nested list type is 'menu', determines the placement of the menu */
+    menuPlacement?: PopperPlacement;
+    /** If nested type is 'drawer', determines the width of the left spacing */
+    nestedDrawerLeftSpacing?: number;
+    /** Event callback when leaving menu via tab or clicking away */
+    onMenuLeave?: (event: KeyboardEvent | MouseEvent) => void;
+    /** if true the nested list is visible */
+    open: boolean;
+    /** Index of the parent list item */
+    parentItemIndex?: number;
+    /** If 'menu' the nested list will be displayed as a flyout nav, else it will be an expand/collapse toggle list */
+    type?: NestedListType;
+}

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

@@ -1,5 +1,8 @@
 import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
+export declare const MENU_ITEM_HEIGHT_NORMAL = 33;
+export declare const MENU_ITEM_HEIGHT_DENSE = 28;
+export declare const DEFAULT_MAX_VISIBLE_ITEMS = 7;
 export declare type PopperPlacement = 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
 export interface MenuProps extends CommonProps {
     /** Element that menu is attached to */
@@ -34,6 +37,8 @@ export interface MenuItemProps {
     children?: ReactNode;
     /** Space delimited CSS classes to be attributed to the menu item */
     classes?: string;
+    /** Used to set custom item height (in pixels). This value has priority over "menuItemHeight" prop. */
+    height?: number;
     /** A key that can be used to determine which item was clicked */
     key?: string;
 }

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { MenuItemProps } from '../menu/Menu';
+export declare const defaultMenuItems: ({
+    children: JSX.Element;
+    classes: string;
+    key: string;
+} | {
+    children: string;
+    key: string;
+    classes?: undefined;
+})[];
+export declare const buttonMenuItems: {
+    children: string;
+    key: string;
+}[];
+export declare const tableMenuItems: ({
+    children: string;
+    key: string;
+} | {
+    children: JSX.Element;
+    key: string;
+})[];
+export declare const customHeightMenuItems: MenuItemProps[];

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

@@ -0,0 +1,5 @@
+import { MenuItemProps } from '../Menu';
+export declare const getDefaultItemHeight: (isDense: boolean) => 28 | 33;
+export declare const calculateItemHeight: (isDense: boolean, customItemHeight?: number, menuItemHeight?: number | string) => number | string;
+export declare const getNumberOfVisibleItems: (numberOfItems: number, maxVisibleItems?: number) => number;
+export declare const calculateMaxHeight: (isDense: boolean, menuItems: MenuItemProps[], menuItemHeight?: number | string) => number | string;

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

@@ -1,6 +1,6 @@
 import { MouseEvent, ReactNode } from 'react';
 import { AvatarProps } from '../avatar/Avatar';
-import { ListItemProps, NestedListType } from '../list/List';
+import { ListItemProps, NestedListType } from '../list';
 import { CommonProps } from '../CommonProps';
 export interface BackItemProps extends CommonProps {
     /** If provided, the icon ID which is displayed on the front of the list item */

package/package.json

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