@digital-ai/dot-components 1.3.6 → 1.5.1

package/lib/components/BaseButtonProps.d.ts

@@ -5,10 +5,10 @@ export declare type ButtonSize = 'small' | 'medium' | 'large';
 export interface BaseButtonProps extends CommonProps {
     /** If true, the button will be focused **/
     autoFocus?: boolean;
-    /** If true, the button will be disabled. */
-    disabled?: boolean;
     /** If true, the ripple effect will be disabled. */
     disableRipple?: boolean;
+    /** If true, the button will be disabled. */
+    disabled?: boolean;
     /** If true, the button will take up the full width of its container.  */
     fullWidth?: boolean;
     /** Is this a submit button */

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

@@ -1,23 +1,30 @@
-import { 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 */
     actions?: ReactNode;
     /** The content for the Accordion.*/
     children: ReactNode;
-    /** If true, expands the accordion by default. */
+    /** DEPRECATED, DO NOT USE */
     defaultExpanded?: boolean;
     /** If true, the accordion will be displayed in a disabled state. */
     disabled?: boolean;
+    /** If true, the accordion is expanded. */
+    expanded?: boolean;
     /** If true, the Accordion will have elevation. */
     hasElevation?: boolean;
     /** If true, the text will wrap and not be truncated */
     noWrap?: boolean;
+    /**
+    Callback fired when the expand/collapse state is changed.
+    If provided, the accordion will be a controlled component and it will be the responsibility of the consumer to manage the 'expanded' state.
+    */
+    onChange?: (event: ChangeEvent, expanded: boolean) => void;
     /** If true, rounded corners are disabled. */
     square?: boolean;
     /** 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, hasElevation, square, startIcon, summary, noWrap, }: AccordionProps) => JSX.Element;
+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/auto-complete/AutoComplete.d.ts

@@ -11,9 +11,9 @@ export interface ActionItem {
 export declare type autoCompleteSize = 'medium' | 'small';
 export declare type AutoCompleteValue = string | string[] | AutoCompleteOption | AutoCompleteOption[];
 export interface AutoCompleteOption {
+    error?: boolean;
     group?: string;
     title: string;
-    error?: boolean;
 }
 export declare const parseAutoCompleteValue: (value: AutoCompleteValue) => string;
 export interface AutoCompleteProps extends CommonProps {
@@ -23,10 +23,10 @@ export interface AutoCompleteProps extends CommonProps {
     autoFocus?: boolean;
     /** default option that is selected */
     defaultValue?: AutoCompleteValue;
-    /** If true, the input will be disabled. */
-    disabled?: boolean;
     /** Disable the portal behavior. If true, children stay within parent DOM hierarchy. */
     disablePortal?: boolean;
+    /** If true, the input will be disabled. */
+    disabled?: boolean;
     /** If true, the input will be displayed in an error state. */
     error?: boolean;
     /** If true, any arbitrary value can be typed in the field */

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

@@ -23,10 +23,10 @@ export interface AvatarProps extends CommonProps {
     style?: CSSProperties;
     /** The text to be displayed. Only the first 2 letters will be displayed. */
     text?: string;
-    /** The type of the avatar */
-    type?: AvatarType;
     /** Tooltip for avatar */
     tooltip?: string;
+    /** The type of the avatar */
+    type?: AvatarType;
     /** The shape of the avatar */
     variant?: AvatarVariant;
 }

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

@@ -0,0 +1,2 @@
+import { BreadcrumbItem } from '../breadcrumbs/Breadcrumbs';
+export declare const mockBreadcrumbItems: BreadcrumbItem[];

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

@@ -1,2 +1,4 @@
 export declare const rootClassName = "dot-breadcrumbs";
+export declare const breadcrumbsWrapperClass = "dot-breadcrumbs-wrapper";
+export declare const StyledBreadcrumbsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledBreadcrumbs: import("styled-components").StyledComponent<import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").BreadcrumbsTypeMap<{}, "nav">>, any, {}, never>;

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

@@ -0,0 +1,19 @@
+import React, { MutableRefObject } from 'react';
+import { BreadcrumbItem } from '../Breadcrumbs';
+export interface BreadcrumbItemRefs {
+    firstItemRef: MutableRefObject<HTMLDivElement>;
+    lastItemRef: MutableRefObject<HTMLSpanElement>;
+}
+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;
+export declare const checkIfFirstItemAfterCollapse: (currentIndex: number, items: BreadcrumbItem[], itemsAfterCollapse: number) => boolean;
+export declare const getExpandElement: (breadcrumbElement: HTMLElement) => Element;
+export declare const getInitialMaxVisibleItems: (items: BreadcrumbItem[], maxItems?: number) => number;
+export declare const getMenuItems: (items: BreadcrumbItem[], itemsAfterCollapse: number) => {
+    children: JSX.Element;
+    key: string;
+}[];
+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[];

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

@@ -0,0 +1,11 @@
+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>;
+    lastItemRef: MutableRefObject<HTMLSpanElement>;
+}
+export declare const useBreadcrumbsObserver: (items: Array<BreadcrumbItem>, maxItems?: number) => [BreadcrumbsObserverRefs, number];
+export {};

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

@@ -0,0 +1,16 @@
+import { MutableRefObject } from 'react';
+import { BreadcrumbItem } from '../Breadcrumbs';
+export interface MaxVisibleItems {
+    lastRemovedItemWidth?: number;
+    maxVisibleItems: number;
+}
+interface BreadcrumbsResizerRefs {
+    firstItemRef: MutableRefObject<HTMLDivElement>;
+    lastItemRef: MutableRefObject<HTMLSpanElement>;
+}
+interface BreadcrumbItemsProps {
+    items: Array<BreadcrumbItem>;
+    maxItems?: number;
+}
+export declare const useBreadcrumbsResizer: (breadcrumbsRightCoord: number, breadcrumbItemsProps: BreadcrumbItemsProps, refs: BreadcrumbsResizerRefs) => [MaxVisibleItems];
+export {};

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

@@ -6,10 +6,10 @@ export declare type IconButtonSize = 'small' | 'medium';
 export interface IconButtonProps extends CommonProps {
     /** 'default', 'inherit', 'primary', 'secondary' */
     color?: IconButtonColor;
-    /** If true, the button will be disabled. */
-    disabled?: boolean;
     /** If true, the ripple effect is disabled. */
     disableRipple?: boolean;
+    /** If true, the button will be disabled. */
+    disabled?: boolean;
     /** The icon to display on the button */
     iconId: string;
     /** Determines the size of the icon itself and spacing around it */

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

@@ -8,9 +8,9 @@ export interface ButtonToggleProps extends CommonProps {
     buttonOptions: {
         ariaLabel: string;
         disabled?: boolean;
-        value: ButtonToggleValue;
-        text?: string;
         iconId?: string;
+        text?: string;
+        value: ButtonToggleValue;
     }[];
     /** If true, the keyboard focus ripple will be disabled */
     disableFocusRipple?: boolean;

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

@@ -6,14 +6,14 @@ export interface ChipProps extends CommonProps {
     avatar?: ReactElement;
     /** The text for the chip. */
     children: string;
-    /** If true, the chip is clickable */
-    isClickable?: boolean;
-    /** If true, the chip is deletable */
-    isDeletable?: boolean;
     /** If true, the chip is disabled */
     disabled?: boolean;
     /** If true, the chip is in error */
     error?: boolean;
+    /** If true, the chip is clickable */
+    isClickable?: boolean;
+    /** If true, the chip is deletable */
+    isDeletable?: boolean;
     /** Event callback on click */
     onClick?: (event: MouseEvent) => void;
     /** Event callback when delete icon is clicked */

package/lib/components/css-grid/CssCell.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { CommonProps } from '../CommonProps';
 export interface CellSize {
-    start?: number;
     span?: number;
+    start?: number;
 }
 export declare type Placement = 'center' | 'flex-end' | 'space-between' | 'space-around' | 'stretch' | 'flex-start';
 export interface CssCellProps extends CommonProps {
@@ -26,17 +26,17 @@ export interface CssCellProps extends CommonProps {
     md?: CellSize;
     /** Center align vertically and horizontally with flex, used by default */
     middle?: boolean;
+    /** Small column breakpoint */
+    sm?: CellSize;
     /** Column start when Cell column breakpoints are not used */
     start?: number | string;
     /** Row start override */
     top?: number | string;
     width?: number;
-    /** Extra small column breakpoint */
-    xs?: CellSize;
-    /** Small column breakpoint */
-    sm?: CellSize;
     /** Extra large column breakpoint */
     xl?: CellSize;
+    /** Extra small column breakpoint */
+    xs?: CellSize;
 }
 export declare const Cell: ({ children, className }: CssCellProps) => JSX.Element;
 export declare const CssCell: import("styled-components").StyledComponent<({ children, className }: CssCellProps) => JSX.Element, any, {}, never>;

package/lib/components/css-grid/CssGrid.d.ts

@@ -4,12 +4,12 @@ import { CommonProps } from '../CommonProps';
 export interface CssGridProps extends CommonProps {
     /** Cells for Grid */
     children?: React.ReactNode | Array<React.ReactNode>;
-    /** Breakpoints for columns */
-    columnsBreakpoints?: BreakpointValues;
-    /** Columns, overrides columnsBreakpoints */
-    columns?: number | string;
     /** Columns gap */
     columnGap?: BreakpointValues;
+    /** Columns, overrides columnsBreakpoints */
+    columns?: number | string;
+    /** Breakpoints for columns */
+    columnsBreakpoints?: BreakpointValues;
     /** Overall gap column and row */
     gap?: string;
     /** Template to create layout */

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

@@ -10,16 +10,16 @@ export declare type DrawerPaperProps = {
     style?: CSSProperties;
 };
 export interface DrawerProps extends CommonProps {
+    /** Props applied to the Modal element. */
+    ModalProps?: DrawerModalProps;
+    /** Props applied to the Paper element. */
+    PaperProps?: DrawerPaperProps;
     /** Side from which the drawer will appear 'bottom', 'left', 'right', 'top' */
     anchor?: DrawerAnchor;
     /** string or JSX element that is displayed inside the drawer */
     children?: ReactNode;
     /** The height of the drawer when anchor is 'top' or 'bottom' */
     height?: string;
-    /** Props applied to the Modal element. */
-    ModalProps?: DrawerModalProps;
-    /** Props applied to the Paper element. */
-    PaperProps?: DrawerPaperProps;
     /** Callback fired when the component requests to be closed. */
     onClose?: (event: MouseEvent | KeyboardEvent) => void;
     /** If true, the drawer is open. */

package/lib/components/dynamic-form/models.d.ts

@@ -29,17 +29,17 @@ export interface DynamicFormControl {
     controlName?: string;
     controlProps?: DynamicFormControlProps;
     controlType: DynamicFormControlType;
-    formSection?: DynamicFormSection;
     customElement?: ReactNode;
     disabled?: DisabledControlCondition;
+    formSection?: DynamicFormSection;
     hidden?: ControlCondition;
     initialValue?: unknown;
     onControlClick?: ControlClickHandler;
     validation?: DynamicFormValidation;
 }
 export interface FieldValidation {
-    isValid: boolean;
     errorMessage: string | null;
+    isValid: boolean;
 }
 export interface DynamicFormConfig {
     controls: DynamicFormControl[];
@@ -55,17 +55,17 @@ export interface Length extends ValidationField {
     value: number;
 }
 export interface DynamicFormValidation {
+    customValidator?: (value: unknown) => FieldValidation;
     isRequired?: IsRequired;
-    minLength?: Length;
     maxLength?: Length;
-    customValidator?: (value: unknown) => FieldValidation;
+    minLength?: Length;
 }
 export interface DynamicFormStateItem {
-    value: unknown;
-    isValid: boolean;
-    isTouched: boolean;
     errorMessage: string;
     hidden?: ControlCondition;
+    isTouched: boolean;
+    isValid: boolean;
+    value: unknown;
 }
 export interface DynamicFormState {
     data: DynamicFormStateData;
@@ -76,7 +76,7 @@ export interface DynamicFormStateData {
 }
 export interface FormStateUpdateArgs {
     controlName: string;
-    newValue: unknown;
     formConfig: DynamicFormConfig;
+    newValue: unknown;
     validate?: boolean;
 }

package/lib/components/index.d.ts

@@ -11,6 +11,7 @@ export type { ControlClickHandler, DynamicFormConfig, DynamicFormControl, Dynami
 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 { MenuItemProps } from './menu/Menu';
 export type { RailItem } from './navigation-rail/NavigationRail';

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

@@ -54,9 +54,9 @@ export interface ListItemProps extends CommonProps {
     href?: string;
     /** DEPRECATED, DO NOT USE */
     index?: number;
+    isOpened?: boolean;
     /** If provided, the menu item will display a nested list */
     items?: Array<ListItemProps>;
-    isOpened?: boolean;
     /** 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 */

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

@@ -14,18 +14,18 @@ export interface MenuProps extends CommonProps {
     loading?: boolean;
     /** Maximum number of visible menu items */
     maxVisibleItems?: number;
-    /** Array of items to be displayed inside the menu */
-    menuItems: Array<MenuItemProps>;
     /** Used to specify height of each menu item when custom component, set to "auto" if no specific height is needed or leave empty for auto calculation based on `maxVisibleItems` */
     menuItemHeight?: number | string;
+    /** Array of items to be displayed inside the menu */
+    menuItems: Array<MenuItemProps>;
     /** Determines the placement of the menu */
     menuPlacement?: PopperPlacement;
-    /** If true, the menu is open. */
-    open?: boolean;
     /** Event callback when leaving menu via tab or clicking away */
     onLeave?: (event: KeyboardEvent | MouseEvent) => void;
     /** Callback when menu item is selected */
     onSelect?: (event: MouseEvent | KeyboardEvent, menuId: string, itemKey: string) => void;
+    /** If true, the menu is open. */
+    open?: boolean;
 }
 export interface MenuItemProps {
     /** Defines a string value that labels the current element **/

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

@@ -11,10 +11,10 @@ export interface RadioButtonBaseProps extends CommonProps {
     labelPlacement?: RadioLabelPlacement;
     /** name of radio input */
     name?: string;
-    /** controls the size of the radio button 'medium', 'small' */
-    size?: RadioSize;
     /** if true user is required to select an option */
     required?: boolean;
+    /** controls the size of the radio button 'medium', 'small' */
+    size?: RadioSize;
     /** unique value for the radio button */
     value?: string;
 }

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

@@ -31,10 +31,10 @@ export interface SidebarProps extends CommonProps {
     displayBrand?: boolean;
     /** If true will display the go back nav item at the top of the sidebar */
     goBack?: boolean;
-    /** If 'menu' the nested list will be displayed as a flyout nav, else it will be an expand/collapse toggle list */
-    nestedListType?: NestedListType;
     /** Array of nav items */
     navItems?: Array<ListItemProps>;
+    /** If 'menu' the nested list will be displayed as a flyout nav, else it will be an expand/collapse toggle list */
+    nestedListType?: NestedListType;
     /** If true, the sidebar is open. */
     open?: boolean;
     /** The text that is displayed at the top of the sidebar */

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

@@ -6,10 +6,10 @@ import { RowsPerPageOption } from './TablePagination';
 export interface TableRowProps extends CommonProps {
     /** row identifier that will be passed to onRowClick callback */
     id?: string;
-    /** if the row is selected */
-    selected?: boolean;
     /** row data where keys map to column ids and values to cell values */
     rowData: any;
+    /** if the row is selected */
+    selected?: boolean;
 }
 export interface TableProps extends CommonProps {
     /** The table header columns */
@@ -28,14 +28,14 @@ export interface TableProps extends CommonProps {
     loading?: boolean;
     /** Maximum height of table container */
     maxHeight?: string;
-    /** The sort order of table data 'asc', 'desc' */
-    order?: Order;
-    /** The ID of the column that you are sorting by */
-    orderBy?: string;
     /** Row click event callback */
     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 sort order of table data 'asc', 'desc' */
+    order?: Order;
+    /** The ID of the column that you are sorting by */
+    orderBy?: string;
     /** The zero-based index of the current page  for paginated table */
     page?: number;
     /** Rows per page for paginated table */

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

@@ -7,8 +7,8 @@ export interface CellProps extends CommonProps {
     colspan?: number;
     id?: string;
     noWrap?: boolean;
-    value?: any;
     onActionMenuTrigger?: (el: HTMLElement, menuItem: Array<ReactNode>) => void;
+    value?: any;
 }
 /**
  * A wrapper component around the TableCell component from @material-ui.

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

@@ -1,11 +1,11 @@
 export interface TableDataWithPagination {
     data: Array<any>;
     pagination: {
-        size: number;
-        total_pages: number;
-        total_elements: number;
         current_page: number;
-        has_previous: boolean;
         has_next: boolean;
+        has_previous: boolean;
+        size: number;
+        total_elements: number;
+        total_pages: number;
     };
 }

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

@@ -28,10 +28,10 @@ export interface HeaderCellProps {
     order?: Order;
     /** The ID of the column that you are sorting by */
     orderBy?: string;
-    /** Determines if sorting is enabled */
-    sortable?: boolean;
     /** Determines sorting order of ascending or desceding */
     sortDirection?: 'desc' | 'asc' | undefined;
+    /** Determines if sorting is enabled */
+    sortable?: boolean;
     /**Allows table cell text truncated and displays in only one line */
     truncate?: boolean;
     /** The UID of the cell, if not provided then a randomly generated hash will be created using

package/lib/testing-utils/resize-observer-mock.d.ts

@@ -0,0 +1 @@
+export declare const mockResizeObserver: () => void;

package/package.json

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