@digital-ai/dot-components 1.1.0 → 1.3.0

package/lib/components/BaseButtonProps.d.ts

@@ -17,8 +17,10 @@ export interface BaseButtonProps extends CommonProps {
     onClick?: (event: MouseEvent<Element> | KeyboardEvent<Element>) => void;
     /** The size of the button */
     size?: ButtonSize;
-    /** Help text to be displayed on hover */
+    /** The use of `titleTooltip` is deprecated and will be removed in the next major release. */
     titleTooltip?: string;
+    /** Help text to be displayed on hover  */
+    tooltip?: string;
     /** The type of button */
     type?: ButtonType;
 }

package/lib/components/app-logo/AppLogo.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { CommonProps } from '../CommonProps';
+export interface AppLogoProps extends CommonProps {
+    /** If provided will display application logo */
+    appLogo?: ReactNode;
+    /** If provided will display application logo */
+    appLogoSmall?: ReactNode;
+    /** If true will force the small logo only */
+    smallOnly?: boolean;
+}
+export declare const DotAppLogo: ({ appLogo, appLogoSmall, ariaLabel, className, "data-testid": dataTestId, smallOnly, }: AppLogoProps) => JSX.Element;

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

@@ -5,6 +5,8 @@ import { ListItemProps } from '../list/List';
 export interface AppToolbarProps extends CommonProps {
     /** If provided will display application logo */
     appLogo?: ReactNode;
+    /** If provided will display application logo */
+    appLogoSmall?: ReactNode;
     /** DEPRECATED, DO NOT USE */
     appName?: string;
     /** User avatar component */
@@ -15,6 +17,8 @@ export interface AppToolbarProps extends CommonProps {
     children?: ReactNode;
     /** Allow to display custom logo */
     customLogo?: ReactNode;
+    /** If true, the spacing and height will be shorter */
+    dense?: boolean;
     /** 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 */
@@ -24,4 +28,4 @@ export interface AppToolbarProps extends CommonProps {
     /** Array of nav items to be displayed on the right side */
     navItems?: Array<IconButtonProps>;
 }
-export declare const DotAppToolbar: ({ appName, appLogo, ariaLabel, avatar, borderColor, children, className, customLogo, "data-testid": dataTestId, 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, }: AppToolbarProps) => JSX.Element;

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
 export declare const rootClassName = "dot-app-toolbar";
+export declare const denseClassName = "dense";
 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,5 +1,13 @@
 import { ChangeEvent, Ref } from 'react';
 import { CommonProps } from '../CommonProps';
+export interface ActionItem {
+    /** The icon to display on the button */
+    iconId: string;
+    /** Event callback */
+    onClick: () => void;
+    /** Text displayed */
+    text: string;
+}
 export declare type autoCompleteSize = 'medium' | 'small';
 export declare type AutoCompleteValue = string | string[] | AutoCompleteOption | AutoCompleteOption[];
 export interface AutoCompleteOption {
@@ -9,6 +17,8 @@ export interface AutoCompleteOption {
 }
 export declare const parseAutoCompleteValue: (value: AutoCompleteValue) => string;
 export interface AutoCompleteProps extends CommonProps {
+    /** Action button as the last element on the menu **/
+    actionItem?: ActionItem;
     /** This prop helps users to fill forms faster */
     autoFocus?: boolean;
     /** default option that is selected */
@@ -42,4 +52,4 @@ export interface AutoCompleteProps extends CommonProps {
     /** value if this is a controlled component */
     value?: AutoCompleteValue;
 }
-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;
+export declare const DotAutoComplete: ({ actionItem, 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

@@ -23,7 +23,9 @@ export interface AvatarProps extends CommonProps {
     text?: string;
     /** The type of the avatar */
     type?: AvatarType;
+    /** Tooltip for avatar */
+    tooltip?: string;
     /** The shape of the avatar */
     variant?: AvatarVariant;
 }
-export declare const DotAvatar: ({ alt, ariaLabel, 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, tooltip, variant, style, }: AvatarProps) => JSX.Element;

package/lib/components/badge/Badge.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { CommonProps } from '../CommonProps';
+export declare type BadgeOverlap = 'circle' | 'rectangle' | 'circular' | 'rectangular';
+export interface BadgeProps extends CommonProps {
+    /** custom color code for the badge */
+    badgeColor?: string;
+    /** component which will be wrapped with the badge */
+    children: ReactNode;
+    /** if true, the badge will be completely hidden*/
+    invisible?: boolean;
+    /** outline shape of the child component */
+    overlap?: BadgeOverlap;
+}
+export declare const DotBadge: ({ ariaLabel, badgeColor, children, className, "data-testid": dataTestId, invisible, overlap, }: BadgeProps) => JSX.Element;

package/lib/components/badge/Badge.styles.d.ts

@@ -0,0 +1,3 @@
+import { BadgeProps } from './Badge';
+export declare const rootClassName = "dot-badge";
+export declare const StyledBadge: import("styled-components").StyledComponent<import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").BadgeTypeMap<{}, "div">>, any, BadgeProps, never>;

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { BaseButtonProps } from '../BaseButtonProps';
 export interface ButtonProps extends BaseButtonProps {
     /** The text for the button. Button text should be in sentence case. */
@@ -9,4 +9,4 @@ export interface ButtonProps extends BaseButtonProps {
     startIcon?: ReactNode;
 }
 /** This component wraps the Button component from @material-ui. */
-export declare const DotButton: ({ ariaLabel, autoFocus, children, className, "data-testid": dataTestId, disabled, disableRipple, endIcon, fullWidth, isSubmit, onClick, size, startIcon, titleTooltip, type, }: ButtonProps) => JSX.Element;
+export declare const DotButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -8,6 +8,8 @@ export interface IconButtonProps extends CommonProps {
     color?: IconButtonColor;
     /** If true, the button will be disabled. */
     disabled?: boolean;
+    /** If true, the ripple effect is disabled. */
+    disableRipple?: boolean;
     /** The icon to display on the button */
     iconId: string;
     /** Determines the size of the icon itself and spacing around it */
@@ -16,7 +18,9 @@ export interface IconButtonProps extends CommonProps {
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     /** Determines the size of the button and padding around the icon */
     size?: IconButtonSize;
-    /** Help text to be displayed on icon hover */
+    /** DEPRECATED, DO NOT USE */
     titleTooltip?: string;
+    /** Help text to be displayed on icon hover */
+    tooltip?: string;
 }
-export declare const DotIconButton: ({ ariaLabel, className, color, "data-testid": dataTestId, disabled, iconId, iconSize, onClick, titleTooltip, size, }: IconButtonProps) => JSX.Element;
+export declare const DotIconButton: ({ ariaLabel, className, color, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, titleTooltip, tooltip, size, }: IconButtonProps) => JSX.Element;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { CommonProps } from '../CommonProps';
+import { DynamicFormConfig, DynamicFormOutputData, DynamicFormState } from './models';
+export interface DynamicFormProps extends CommonProps {
+    config: DynamicFormConfig;
+    disabled?: boolean;
+    liveValidation?: boolean;
+    onChange?: (formData: DynamicFormState) => void;
+    onSubmit?: (formData: DynamicFormOutputData) => void;
+}
+export declare const DotDynamicForm: ({ ariaLabel, className, "data-testid": dataTestId, config, disabled, liveValidation, onChange, onSubmit, }: DynamicFormProps) => JSX.Element;

package/lib/components/dynamic-form/DynamicForm.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const rootClassName = "dot-dynamic-form";
+export declare const StyledDynamicForm: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,4 @@
+import { DynamicFormControlType, DynamicFormStateItem } from './models';
+export declare const DATA_CONTROLS: DynamicFormControlType[];
+export declare const DATA_CONTROLS_WITHOUT_VALIDATION: DynamicFormControlType[];
+export declare const INITIAL_STATE_ITEM: DynamicFormStateItem;

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

@@ -0,0 +1,38 @@
+import { ChangeEvent } from 'react';
+import { DynamicFormConfig, DynamicFormControlProps, DynamicFormOutputData, DynamicFormState, DynamicFormStateData, HiddenControl } from './models';
+import { AutoCompleteValue } from '../auto-complete/AutoComplete';
+import { CheckboxProps } from '../checkbox/Checkbox';
+declare type AutoCompleteChangeHandler = (controlName: string) => (e: ChangeEvent<HTMLInputElement>, value: AutoCompleteValue) => void;
+declare type ChangeHandler = (controlName: string) => (e: ChangeEvent<HTMLInputElement>) => void;
+declare type CheckboxGroupChangeHandler = (controlName: string) => (event: ChangeEvent<HTMLInputElement>, value: CheckboxProps[]) => void;
+export interface InputBaseArgs {
+    controlProps: DynamicFormControlProps;
+    disabled?: boolean;
+    index: number;
+    liveValidation: boolean;
+}
+export interface ControlledInputArgs extends InputBaseArgs {
+    controlName: string;
+    formData: DynamicFormStateData;
+    handleChange: AutoCompleteChangeHandler | ChangeHandler | CheckboxGroupChangeHandler;
+}
+export interface UncontrolledInputArgs extends InputBaseArgs {
+    formState?: DynamicFormState;
+    handleClick?: () => void;
+}
+export declare const getControlValue: <T extends unknown>(controlName: string, data: DynamicFormStateData) => T;
+export declare const checkIfHiddenControl: (hidden: HiddenControl, formValues: DynamicFormOutputData) => boolean;
+export declare const getInitialFormState: (config: DynamicFormConfig, liveValidation: boolean) => DynamicFormState;
+export declare const getOutputFormData: (formState: DynamicFormState) => DynamicFormOutputData;
+export declare const getFormDataFromInitialValues: (config: DynamicFormConfig) => DynamicFormOutputData;
+export declare const buildInputTextControl: ({ controlName, controlProps, disabled, formData, handleChange, index, }: ControlledInputArgs) => JSX.Element;
+export declare const buildInputSelectControl: ({ controlName, controlProps, disabled, formData, handleChange, index, }: ControlledInputArgs) => JSX.Element;
+export declare const buildAutocompleteControl: ({ controlName, controlProps, disabled, formData, handleChange, index, }: ControlledInputArgs) => JSX.Element;
+export declare const buildRadioGroupControl: ({ controlName, controlProps, disabled, formData, handleChange, index, }: ControlledInputArgs) => JSX.Element;
+export declare const buildCheckboxControl: ({ controlName, controlProps, disabled, formData, handleChange, index, }: ControlledInputArgs) => JSX.Element;
+export declare const buildCheckboxGroupControl: ({ controlName, controlProps, disabled, formData, handleChange, index, }: ControlledInputArgs) => JSX.Element;
+export declare const buildSwitchControl: ({ controlName, controlProps, disabled, formData, handleChange, index, }: ControlledInputArgs) => JSX.Element;
+export declare const buildButtonControl: ({ controlProps, disabled, index, }: UncontrolledInputArgs) => JSX.Element;
+export declare const buildResetControl: ({ controlProps, disabled, handleClick, index, }: UncontrolledInputArgs) => JSX.Element;
+export declare const buildSubmitControl: ({ controlProps, disabled, formState, index, liveValidation, }: UncontrolledInputArgs) => JSX.Element;
+export {};

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

@@ -0,0 +1,68 @@
+import { ReactNode } from 'react';
+import { AutoCompleteProps } from '../auto-complete/AutoComplete';
+import { ButtonProps } from '../button/Button';
+import { CheckboxProps } from '../checkbox/Checkbox';
+import { InputTextProps } from '../input-form-fields/InputText';
+import { InputSelectProps } from '../input-form-fields/InputSelect';
+import { CheckboxGroupProps } from '../checkbox/CheckboxGroup';
+import { RadioGroupProps } from '../radio/RadioGroup';
+import { SwitchProps } from '../switch/Switch';
+export declare type DynamicFormControlType = 'dot-input-text' | 'dot-input-select' | 'dot-checkbox' | 'dot-checkbox-group' | 'dot-autocomplete' | 'dot-button' | 'dot-radio-group' | 'dot-reset' | 'dot-submit' | 'dot-switch' | 'custom-element';
+export declare type DynamicFormControlProps = AutoCompleteProps | InputTextProps | InputSelectProps | CheckboxProps | CheckboxGroupProps | ButtonProps | RadioGroupProps | SwitchProps;
+export interface DynamicFormOutputData {
+    [key: string]: unknown;
+}
+export declare type ConditionFunction = (formValues: DynamicFormOutputData) => boolean;
+export declare type HiddenControl = boolean | ConditionFunction;
+export interface DynamicFormControl {
+    controlName?: string;
+    controlType: DynamicFormControlType;
+    controlProps?: DynamicFormControlProps;
+    initialValue?: unknown;
+    validation?: DynamicFormValidation;
+    customElement?: ReactNode;
+    hidden?: HiddenControl;
+}
+export interface FieldValidation {
+    isValid: boolean;
+    errorMessage: string | null;
+}
+export interface DynamicFormConfig {
+    controls: DynamicFormControl[];
+}
+export interface ValidationField {
+    condition?: ConditionFunction;
+    errorMessage: string;
+}
+export interface IsRequired extends ValidationField {
+    value: boolean;
+}
+export interface Length extends ValidationField {
+    value: number;
+}
+export interface DynamicFormValidation {
+    isRequired?: IsRequired;
+    minLength?: Length;
+    maxLength?: Length;
+    customValidator?: (value: unknown) => FieldValidation;
+}
+export interface DynamicFormStateItem {
+    value: unknown;
+    isValid: boolean;
+    isTouched: boolean;
+    errorMessage: string;
+    hidden?: HiddenControl;
+}
+export interface DynamicFormState {
+    data: DynamicFormStateData;
+    isValid: boolean;
+}
+export interface DynamicFormStateData {
+    [key: string]: DynamicFormStateItem;
+}
+export interface FormStateUpdateArgs {
+    controlName: string;
+    newValue: unknown;
+    formConfig: DynamicFormConfig;
+    validate?: boolean;
+}

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

@@ -0,0 +1,4 @@
+import { DynamicFormConfig, DynamicFormOutputData, DynamicFormState } from './models';
+export declare const sampleMiddleNameHiddenFn: (formValues: DynamicFormOutputData) => boolean;
+export declare const getSampleConfig: () => DynamicFormConfig;
+export declare const getSampleFormState: () => DynamicFormState;

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

@@ -0,0 +1,25 @@
+import { DynamicFormConfig, DynamicFormOutputData, DynamicFormState, DynamicFormValidation, FieldValidation, ValidationField } from './models';
+export declare const checkIfValidationApplies: (validationField: ValidationField, formValues: DynamicFormOutputData) => boolean;
+export declare const checkIfEmptyValue: (value: unknown) => boolean;
+export declare const checkIfString: (value: unknown) => boolean;
+export declare const checkIfEmptyString: (value: string) => boolean;
+export declare const checkIfArray: (value: unknown) => boolean;
+export declare const checkIfEmptyArray: (value: Array<unknown>) => boolean;
+export declare const checkIfStringRequiredInvalid: (value: string, validation: DynamicFormValidation, formValues: DynamicFormOutputData) => boolean;
+export declare const checkIfArrayRequiredInvalid: (value: unknown[], validation: DynamicFormValidation, formValues: DynamicFormOutputData) => boolean;
+export declare const checkIfMinLengthInvalid: (value: string | unknown[], validation: DynamicFormValidation, formValues: DynamicFormOutputData) => boolean;
+export declare const checkIfMaxLengthInvalid: (value: string | unknown[], validation: DynamicFormValidation, formValues: DynamicFormOutputData) => boolean;
+export declare const getInvalidFieldValidation: (errorMessage: string) => FieldValidation;
+export declare const getRequiredFieldValidationError: (validation: DynamicFormValidation) => FieldValidation;
+export declare const getMinLengthFieldValidationError: (validation: DynamicFormValidation) => FieldValidation;
+export declare const getMaxLengthFieldValidationError: (validation: DynamicFormValidation) => FieldValidation;
+export declare const getEmptyValueValidationError: (validation: DynamicFormValidation, formValues: DynamicFormOutputData) => FieldValidation | null;
+export declare const getStringValidationError: (value: string, validation: DynamicFormValidation, formValues: DynamicFormOutputData) => FieldValidation | null;
+export declare const getArrayValidationError: (array: unknown[], validation: DynamicFormValidation, formValues: DynamicFormOutputData) => FieldValidation | null;
+export declare const getCustomValidationError: (value: unknown, validation: DynamicFormValidation) => {
+    isValid: boolean;
+    errorMessage: string;
+};
+export declare const getFieldValidation: (value: unknown, validation: DynamicFormValidation, formValues: DynamicFormOutputData) => FieldValidation;
+export declare const getControlValidationFromConfig: (controlName: string, config: DynamicFormConfig) => DynamicFormValidation | undefined;
+export declare const checkIfFormDataValid: (formState: DynamicFormState) => boolean;

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

@@ -1,12 +1,14 @@
 /// <reference types="react" />
 import { CommonProps } from '../CommonProps';
-export declare type IconFontSize = 'inherit' | 'default' | 'small';
+export declare type IconFontSize = 'inherit' | 'default' | 'small' | 'medium';
 export interface IconProps extends CommonProps {
     /** Determines the size of the icon and spacing around it */
     fontSize?: IconFontSize;
     /** The ID of the icon to display on the button */
     iconId: string;
-    /** Tooltip text displayed on hover */
+    /** DEPRECATED, DO NOT USE */
     title?: string;
+    /** Tooltip text displayed on hover */
+    tooltip?: string;
 }
-export declare const DotIcon: ({ ariaLabel, className, "data-testid": dataTestId, fontSize, iconId, title, }: IconProps) => JSX.Element;
+export declare const DotIcon: ({ ariaLabel, className, "data-testid": dataTestId, fontSize, iconId, title, tooltip, }: IconProps) => JSX.Element;

package/lib/components/index.d.ts

@@ -1,19 +1,21 @@
 export { DotAccordion } from './accordion/Accordion';
 export { DotActionToolbar } from './action-toolbar/ActionToolbar';
 export { DotAlertBanner } from './alert-banner/AlertBanner';
+export { DotAppLogo } from './app-logo/AppLogo';
 export { DotAppToolbar, AppToolbarProps } from './app-toolbar/AppToolbar';
-export { AutoCompleteOption, DotAutoComplete, AutoCompleteValue, parseAutoCompleteValue, } from './auto-complete/AutoComplete';
+export { AutoCompleteOption, AutoCompleteProps, DotAutoComplete, AutoCompleteValue, parseAutoCompleteValue, } from './auto-complete/AutoComplete';
 export { AvatarProps, DotAvatar } from './avatar/Avatar';
 export { DotAvatarGroup } from './avatar-group/AvatarGroup';
+export { DotBadge } from './badge/Badge';
 export { BreadcrumbItem, DotBreadcrumbs } from './breadcrumbs/Breadcrumbs';
-export { DotButton } from './button/Button';
+export { DotButton, ButtonProps } from './button/Button';
 export { DotButtonToggle } from './button-toggle/ButtonToggle';
 export { DotCard } from './card/Card';
 export { DotCardContent } from './card/CardContent';
 export { DotCardFooter } from './card/CardFooter';
 export { DotCardHeader } from './card/CardHeader';
 export { CheckboxProps, DotCheckbox } from './checkbox/Checkbox';
-export { DotCheckboxGroup } from './checkbox/CheckboxGroup';
+export { DotCheckboxGroup, CheckboxGroupProps } from './checkbox/CheckboxGroup';
 export { DotChip } from './chip/Chip';
 export { DotConfirmationDialog } from './confirmation-dialog/ConfirmationDialog';
 export { Cell, CssCell } from './css-grid/CssCell';
@@ -24,11 +26,13 @@ export { DotDrawer } from './drawer/Drawer';
 export { DotEmptyState } from './empty-state/EmptyState';
 export { DotForm } from './form/Form';
 export { DotFormGroup } from './form-group/FormGroup';
+export { DotDynamicForm, DynamicFormProps } from './dynamic-form/DynamicForm';
+export { DynamicFormConfig, DynamicFormOutputData, DynamicFormState, FieldValidation, } from './dynamic-form/models';
 export { DotIcon } from './icon/Icon';
 export { DotIconButton, IconButtonProps } from './button/IconButton';
 export { DotInlineEdit } from './inline-edit/InlineEdit';
-export { DotInputText } from './input-form-fields/InputText';
-export { DotInputSelect } from './input-form-fields/InputSelect';
+export { DotInputText, InputTextProps } from './input-form-fields/InputText';
+export { DotInputSelect, InputSelectProps, } from './input-form-fields/InputSelect';
 export { DotLink } from './link/Link';
 export { DotList, ListItemProps } from './list/List';
 export { DotMenu, MenuItemProps } from './menu/Menu';
@@ -36,14 +40,15 @@ export { DotNavigationRail, RailItem } from './navigation-rail/NavigationRail';
 export { DotPill } from './pill/Pill';
 export { DotProgress } from './progress/Progress';
 export { DotRadioButton, RadioButtonProps } from './radio/RadioButton';
-export { DotRadioGroup } from './radio/RadioGroup';
+export { DotRadioGroup, RadioGroupProps } from './radio/RadioGroup';
 export { BackItemProps, DotSidebar, SidebarProps } from './sidebar/Sidebar';
 export { DotSkeleton } from './skeleton/Skeleton';
 export { DotSnackbar } from './snackbar/Snackbar';
 export { DotSnackbarContainer, DotSnackbarProvider, useDotSnackbarContext, } from './snackbar/SnackbarProvider';
 export { DotSplitButton } from './split-button/SplitButton';
-export { DotSwitch } from './switch/Switch';
+export { DotSwitch, SwitchProps } from './switch/Switch';
 export { DotTable, TableRowProps } from './table/Table';
+export { DotTooltip } from './tooltip/Tooltip';
 export { Order } from './table/TableBody';
 export { DotHeaderRow, DotColumnHeader } from './table/TableHeader';
 export { TableDataWithPagination } from './table/TableDataWithPagination';

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

@@ -1,6 +1,9 @@
 /// <reference types="react" />
 import { InputProps } from './InputFormFields.propTypes';
+export declare const DELAY_MS = 300;
 export interface InputTextProps extends InputProps {
+    /** If true, the input will use debounce functionality. **/
+    hasDebounce?: boolean;
     /** if multiline it wil render multiple lines */
     multiline?: boolean;
     /** Placeholder text always displayed inside the input field */
@@ -14,4 +17,4 @@ export interface InputTextProps extends InputProps {
     /** value of the InputText */
     value?: string;
 }
-export declare const DotInputText: ({ autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, fullWidth, helperText, endIcon, id, inputRef, label, multiline, name, onChange, placeholder, readOnly, required, rows, rowsMax, startIcon, size, type, value, warning, }: InputTextProps) => JSX.Element;
+export declare const DotInputText: ({ autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, fullWidth, hasDebounce, helperText, endIcon, id, inputRef, label, multiline, name, onChange, placeholder, readOnly, required, rows, rowsMax, startIcon, size, type, value, warning, }: InputTextProps) => JSX.Element;

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

@@ -20,9 +20,11 @@ export interface LinkProps extends CommonProps {
     tabIndex?: number;
     /** where to open the link */
     target?: LinkTarget;
-    /** tooltip text displayed on hover, useful for screen readers */
+    /** DEPRECATED, DO NOT USE */
     title?: string;
+    /** Tooltip text displayed on hover */
+    tooltip?: string;
     /**  underline the link */
     underline?: LinkUnderline;
 }
-export declare const DotLink: ({ ariaLabel, 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, tooltip, underline, }: LinkProps) => JSX.Element;

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

@@ -1,7 +1,7 @@
 import { ElementType, MouseEvent, KeyboardEvent, ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 import { PopperPlacement } from '../menu/Menu';
-export declare type NestedListType = 'menu' | 'expandable';
+export declare type NestedListType = 'drawer' | 'expandable' | 'menu';
 export interface NestedListProps extends CommonProps {
     /** Element that menu is attached to */
     anchorEl?: Element;
@@ -9,6 +9,8 @@ export interface NestedListProps extends CommonProps {
     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 */
@@ -19,7 +21,7 @@ export interface NestedListProps extends CommonProps {
     type?: NestedListType;
 }
 export interface ListProps extends CommonProps {
-    /** string or JSX element that is displayed inside the toolbar */
+    /** 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;
@@ -31,10 +33,16 @@ export interface ListProps extends CommonProps {
     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;
 }
 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. */
@@ -49,6 +57,8 @@ export interface ListItemProps extends CommonProps {
     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 */
@@ -59,8 +69,10 @@ export interface ListItemProps extends CommonProps {
     startIconId?: string;
     /** Text which is displayed in the list item */
     text?: string;
-    /** The tooltip text displayed on hover */
+    /** DEPRECATED, DO NOT USE */
     title?: string;
+    /** Tooltip text displayed on hover */
+    tooltip?: string;
 }
-export declare const DotList: ({ ariaLabel, children, className, component, "data-testid": dataTestId, dense, disablePadding, items, menuPlacement, nestedListType, }: ListProps) => 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;
+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, index, onClick, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, selected, startIconId, text, title, tooltip, }: ListItemProps) => JSX.Element;

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

@@ -2,6 +2,7 @@
 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";

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

@@ -4,12 +4,20 @@ export declare type PopperPlacement = 'bottom-end' | 'bottom-start' | 'bottom' |
 export interface MenuProps extends CommonProps {
     /** Element that menu is attached to */
     anchorEl?: Element;
+    /** If true, compact vertical padding designed for keyboard and mouse input is used for the list and list items. **/
+    dense?: boolean;
     /** Disable the portal behavior. If true, children stay within parent DOM hierarchy. */
     disablePortal?: boolean;
     /** Unique ID that ties a particular menu to a specific element */
     id: string;
+    /** If true, will display a loading indicator in the menu */
+    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 */
+    menuItemHeight?: number;
     /** Determines the placement of the menu */
     menuPlacement?: PopperPlacement;
     /** If true, the menu is open. */
@@ -29,4 +37,4 @@ export interface MenuItemProps {
     /** A key that can be used to determine which item was clicked */
     key?: string;
 }
-export declare const DotMenu: ({ anchorEl, ariaLabel, className, "data-testid": dataTestId, disablePortal, id, menuItems, menuPlacement, onLeave, onSelect, open, }: MenuProps) => JSX.Element;
+export declare const DotMenu: ({ anchorEl, ariaLabel, className, "data-testid": dataTestId, dense, disablePortal, id, loading, maxVisibleItems, menuItemHeight, menuItems, menuPlacement, onLeave, onSelect, open, }: MenuProps) => JSX.Element;

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

@@ -1,3 +1,4 @@
 import { Popper } from '@material-ui/core';
 export declare const rootClassName = "dot-menu";
+export declare const popperClassName = "dot-popper";
 export declare const StyledPopper: import("styled-components").StyledComponent<typeof Popper, any, {}, never>;

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

@@ -9,11 +9,13 @@ export interface ProgressProps extends CommonProps {
     size?: number | string;
     /** controls thickness of the loading spinner border */
     thickness?: number;
-    /** Tooltip text that displays on hover */
+    /** DEPRECATED, DO NOT USE */
     title?: string;
+    /** Tooltip text displayed on hover */
+    tooltip?: string;
     /** If using static variant, this is the percent of loading complete */
     value?: number;
     /** type of progress spinner displayed */
     variant?: progressVariantOptions;
 }
-export declare const DotProgress: ({ ariaLabel, 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, tooltip, value, variant, }: ProgressProps) => JSX.Element;

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

@@ -13,6 +13,10 @@ export interface BackItemProps extends CommonProps {
     title?: string;
 }
 export interface SidebarProps extends CommonProps {
+    /** If provided will display application logo */
+    appLogo?: ReactNode;
+    /** If provided will display application logo */
+    appLogoSmall?: ReactNode;
     /** props used by the back item */
     backItem?: BackItemProps;
     /** If displayBrand is true this text will be displayed above the Digital.ai branding */
@@ -21,6 +25,8 @@ export interface SidebarProps extends CommonProps {
     children?: ReactNode;
     /** If true will display the expand/collapse icon button */
     collapsable?: boolean;
+    /** If true will display appLogo provided at the top */
+    displayAppLogo?: boolean;
     /** If true will display Digital.ai branding at the bottom */
     displayBrand?: boolean;
     /** If true will display the go back nav item at the top of the sidebar */
@@ -35,5 +41,7 @@ export interface SidebarProps extends CommonProps {
     title?: string;
     /** If provided, will display an avatar next to the title text */
     titleAvatarProps?: AvatarProps;
+    /** Width of main menu drawer if mainMenu provided, defaults to 240px */
+    width?: number;
 }
-export declare const DotSidebar: ({ ariaLabel, backItem, brandDesc, children, className, collapsable, "data-testid": dataTestId, displayBrand, goBack, navItems, nestedListType, open, title, titleAvatarProps, }: SidebarProps) => JSX.Element;
+export declare const DotSidebar: ({ appLogo, appLogoSmall, ariaLabel, backItem, brandDesc, children, className, collapsable, "data-testid": dataTestId, displayAppLogo, displayBrand, goBack, navItems, nestedListType, open, title, titleAvatarProps, width, }: SidebarProps) => JSX.Element;

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

@@ -13,4 +13,4 @@ export interface SplitButtonProps extends BaseButtonProps {
     /**The options within the button dropdown */
     options: Array<MenuItemProps>;
 }
-export declare const DotSplitButton: ({ autoFocus, ariaLabel, children, className, "data-testid": dataTestId, disabled, disablePortal, disableRipple, fullWidth, isSubmit, onClick, onSelect, options, size, titleTooltip, type, }: SplitButtonProps) => JSX.Element;
+export declare const DotSplitButton: ({ autoFocus, ariaLabel, children, className, "data-testid": dataTestId, disabled, disablePortal, disableRipple, fullWidth, isSubmit, onClick, onSelect, options, size, titleTooltip, tooltip, type, }: SplitButtonProps) => 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, ariaLabel, 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, dense, disablePortal, id, loading, maxVisibleItems, menuItemHeight, menuItems, menuPlacement, onLeave, onSelect, open, }: import("../menu/Menu").MenuProps) => JSX.Element, any, {}, never>;