@digital-ai/dot-components 2.7.4 → 2.8.1

package/lib/Typography.stories.d.ts

@@ -1,4 +1,4 @@
 import { Story, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<({ ariaLabel, className, "data-testid": dataTestId, children, component, noMarginBottom, noWrap, variant, }: import("./components/typography/Typography").TypographyProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, noMarginBottom, noWrap, variant, }: import("./components/typography/Typography").TypographyProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story;

package/lib/components/AccessibilityProps.d.ts

@@ -0,0 +1 @@
+export declare type AriaRoles = 'alert' | 'alertdialog' | 'application' | 'article' | 'banner' | 'button' | 'cell' | 'checkbox' | 'columnheader' | 'combobox' | 'complementary' | 'contentinfo' | 'definition' | 'dialog' | 'directory' | 'document' | 'feed' | 'figure' | 'form' | 'grid' | 'gridcell' | 'group' | 'heading' | 'img' | 'input' | 'link' | 'list' | 'listbox' | 'listitem' | 'log' | 'main' | 'marquee' | 'math' | 'menu' | 'menubar' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'navigation' | 'note' | 'option' | 'presentation' | 'progressbar' | 'radio' | 'radiogroup' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'scrollbar' | 'search' | 'searchbox' | 'separator' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'table' | 'tablist' | 'tabpanel' | 'term' | 'textbox' | 'timer' | 'toolbar' | 'tooltip' | 'tree' | 'treegrid' | 'treeitem';

package/lib/components/CommonProps.d.ts

@@ -1,6 +1,9 @@
+import { AriaRoles } from './AccessibilityProps';
 export interface CommonProps {
     /** Defines a string value that labels the current element **/
     ariaLabel?: string;
+    /** The ARIA role attribute of the element **/
+    ariaRole?: AriaRoles;
     /** classes to be attributed to the root of the component */
     className?: string;
     /** data attribute passed through for testing purposes ONLY */

package/lib/components/app-switcher/AppSwitcher.styles.d.ts

@@ -1,2 +1,2 @@
 export declare const rootClassName = "dot-app-switcher";
-export declare const StyledAppSwitcher: import("styled-components").StyledComponent<({ anchor, ariaLabel, className, children, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: import("../drawer/Drawer").DrawerProps) => JSX.Element, any, {}, never>;
+export declare const StyledAppSwitcher: import("styled-components").StyledComponent<({ anchor, ariaLabel, ariaRole, className, children, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: import("../drawer/Drawer").DrawerProps) => JSX.Element, any, {}, never>;

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

@@ -1,4 +1,4 @@
 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, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: import("../drawer/Drawer").DrawerProps) => JSX.Element, any, {}, never>;
+export declare const StyledMainMenu: import("styled-components").StyledComponent<({ anchor, ariaLabel, ariaRole, className, children, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, 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,5 @@
-import { ChangeEvent, FocusEvent, HTMLAttributes, ReactNode, Ref, JSXElementConstructor } from 'react';
-import { AutocompleteCloseReason, AutocompleteGetTagProps, AutocompleteRenderOptionState } from '@mui/material';
+import { ChangeEvent, FocusEvent, HTMLAttributes, JSXElementConstructor, ReactNode, Ref } from 'react';
+import { AutocompleteCloseReason, AutocompleteGetTagProps, AutocompleteRenderOptionState, FilterOptionsState } from '@mui/material';
 import { CommonProps } from '../CommonProps';
 import { inputSizeOptions } from '../input-form-fields/InputFormFields.propTypes';
 export declare const DEFAULT_ACTION_ITEM_TEXT = "Add new item";
@@ -43,6 +43,8 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     endAdornmentTooltip?: string;
     /** If true, the input will be displayed in an error state. */
     error?: boolean;
+    /** A function that determines the filtered options to be rendered on search. */
+    filterOptions?: (options: T[], state: FilterOptionsState<T>) => T[];
     /** If `true`, hide the selected options from the list box. */
     filterSelectedOptions?: boolean;
     /** If true, any arbitrary value can be typed in the field */
@@ -55,6 +57,8 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     inputId: string;
     /** pass a ref to the input element */
     inputRef?: Ref<HTMLInputElement>;
+    /** The value of the input field. */
+    inputValue?: string;
     /** Label displayed above the input field */
     label?: string;
     /** If true, the component will be in a loading state. */
@@ -96,4 +100,4 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     /** If true, the label will be displayed in a warning state. */
     warning?: boolean;
 }
-export declare const DotAutoComplete: <T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, inputId, inputRef, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => JSX.Element;
+export declare const DotAutoComplete: <T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, inputId, inputRef, inputValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => JSX.Element;

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

@@ -1,11 +1,12 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { AutoCompleteOption, AutoCompleteProps } from './AutoComplete';
 import { AutoCompleteWithRenderOption } from './Autocomplete.stories.data';
-declare const _default: ComponentMeta<(<T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, inputId, inputRef, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => JSX.Element)>;
+declare const _default: ComponentMeta<(<T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, inputId, inputRef, inputValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => JSX.Element)>;
 export default _default;
 export declare const Default: any;
 export declare const WithActionItem: any;
 export declare const WithDisabledItems: any;
+export declare const WithFilterOptions: any;
 export declare const WithCustomActionItem: Story<AutoCompleteProps>;
 export declare const WithAsyncLoad: Story<AutoCompleteProps>;
 declare type AutoCompleteWithRenderOptionProps = AutoCompleteProps<AutoCompleteWithRenderOption>;

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

@@ -1,8 +1,10 @@
 export declare const selectedAutocompleteClassName = "dot-selected-autocomplete-items";
 export declare const autocompleteWithRenderClassName = "dot-autocomplete-with-render";
+export declare const autocompleteWithFilterRenderClassName = "dot-autocomplete-with-filter-render";
 export declare const autocompleteWithoutChipsClassName = "dot-autocomplete-without-chips";
 export declare const autocompleteWithNullValueClassName = "dot-autocomplete-with-null-value";
 export declare const StyledAutoCompleteWithRender: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const StyledAutoCompleteWithFilterRender: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const StyledSelectedAutocompleteItems: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledAutocompleteWithoutChips: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledAutocompleteWithNullValue: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,11 +1,7 @@
 import { ChangeEvent } from 'react';
 import { ActionItem, AutoCompleteOption, AutoCompleteProps, AutoCompleteValue } from './AutoComplete';
 import { CommonProps } from '../CommonProps';
-export declare const movies: {
-    group: string;
-    title: string;
-    error: boolean;
-}[];
+export declare const movies: AutoCompleteOption[];
 export declare const handleActionItemClick: (newItem?: string) => void;
 export declare const actionItemOptions: ActionItem[];
 export declare const actionItemArgType: {

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

@@ -1,3 +1,3 @@
-export type { AutocompleteRenderOptionState } from '@mui/material';
+export type { AutocompleteRenderOptionState, FilterOptionsState, } from '@mui/material';
 export * from './AutoComplete';
 export { parseAutoCompleteValue } from './utils/helpers';

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

@@ -32,4 +32,4 @@ export interface AvatarProps extends CommonProps {
     /** The shape of the avatar */
     variant?: AvatarVariant;
 }
-export declare const DotAvatar: ({ alt, ariaLabel, className, component, color, "data-testid": dataTestId, iconId, imageSrc, onClick, size, tabIndex, text, type, tooltip, variant, style, }: AvatarProps) => JSX.Element;
+export declare const DotAvatar: ({ alt, ariaLabel, ariaRole, className, component, color, "data-testid": dataTestId, iconId, imageSrc, onClick, size, tabIndex, text, type, tooltip, variant, style, }: AvatarProps) => JSX.Element;

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

@@ -1,6 +1,6 @@
 import { Story, ComponentMeta } from '@storybook/react';
 import { AvatarProps } from './Avatar';
-declare const _default: ComponentMeta<({ alt, ariaLabel, className, component, color, "data-testid": dataTestId, iconId, imageSrc, onClick, size, tabIndex, text, type, tooltip, variant, style, }: AvatarProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ alt, ariaLabel, ariaRole, className, component, color, "data-testid": dataTestId, iconId, imageSrc, onClick, size, tabIndex, text, type, tooltip, variant, style, }: AvatarProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story<AvatarProps>;
 export declare const AvatarButton: Story<AvatarProps>;

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

@@ -21,4 +21,4 @@ export interface IconButtonProps extends CommonProps {
     /** Help text to be displayed on icon hover */
     tooltip?: string;
 }
-export declare const DotIconButton: ({ ariaLabel, className, color, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, tooltip, size, }: IconButtonProps) => JSX.Element;
+export declare const DotIconButton: ({ ariaLabel, ariaRole, className, color, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, tooltip, size, }: IconButtonProps) => JSX.Element;

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

@@ -1,6 +1,6 @@
 import { ComponentMeta } from '@storybook/react';
 import { IconButtonProps } from './IconButton';
-declare const _default: ComponentMeta<({ ariaLabel, className, color, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, tooltip, size, }: IconButtonProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, ariaRole, className, color, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, tooltip, size, }: IconButtonProps) => JSX.Element>;
 export default _default;
 export declare const Default: any;
 export declare const WithPrimaryColor: any;

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

@@ -1,5 +1,6 @@
 import { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
+import { AriaRoles } from '../AccessibilityProps';
 export declare type DrawerAnchor = 'bottom' | 'left' | 'right' | 'top';
 export declare type DrawerVariant = 'permanent' | 'persistent' | 'temporary';
 export declare type DrawerModalProps = {
@@ -8,6 +9,7 @@ export declare type DrawerModalProps = {
     style?: CSSProperties;
 };
 export declare type DrawerPaperProps = {
+    role?: AriaRoles;
     style?: CSSProperties;
 };
 export interface DrawerSection extends CommonProps {
@@ -40,4 +42,4 @@ export interface DrawerProps extends CommonProps {
     /** The width of the drawer when anchor is 'left' or 'right' */
     width?: string;
 }
-export declare const DotDrawer: ({ anchor, ariaLabel, className, children, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: DrawerProps) => JSX.Element;
+export declare const DotDrawer: ({ anchor, ariaLabel, ariaRole, className, children, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: DrawerProps) => JSX.Element;

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

@@ -1,6 +1,6 @@
 import { Story, ComponentMeta } from '@storybook/react';
 import { DrawerProps } from './Drawer';
-declare const _default: ComponentMeta<({ anchor, ariaLabel, className, children, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: DrawerProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ anchor, ariaLabel, ariaRole, className, children, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: DrawerProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story<DrawerProps>;
 export declare const WithHeader: Story<DrawerProps>;

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

@@ -6,4 +6,4 @@ export interface DrawerBodyProps extends CommonProps {
     onClose: (event: MouseEvent | KeyboardEvent) => void;
     variant: string;
 }
-export declare const DotDrawerBody: ({ ariaLabel, children, className, "data-testid": dataTestId, headerExists, onClose, variant, }: DrawerBodyProps) => JSX.Element;
+export declare const DotDrawerBody: ({ ariaLabel, ariaRole, children, className, "data-testid": dataTestId, headerExists, onClose, variant, }: DrawerBodyProps) => JSX.Element;

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

@@ -3,4 +3,4 @@ import { CommonProps } from '../CommonProps';
 export interface DrawerFooterProps extends CommonProps {
     children: ReactNode;
 }
-export declare const DotDrawerFooter: ({ ariaLabel, children, className, "data-testid": dataTestId, }: DrawerFooterProps) => JSX.Element;
+export declare const DotDrawerFooter: ({ ariaLabel, ariaRole, children, className, "data-testid": dataTestId, }: DrawerFooterProps) => JSX.Element;

package/lib/components/file-upload/FileUpload.d.ts

@@ -22,4 +22,4 @@ export interface FileUploadProps extends CommonProps {
     /** Optional callback which gets triggered when the file (from the list) is clicked.  */
     onFileClick?: (file: ListItemFile) => void;
 }
-export declare const DotFileUpload: ({ accept, ariaLabel, buttonOnly, className, "data-testid": dataTestId, disabled, hideFilesList, maxFiles, maxSize, onChange, onDragEnter, onFileClick, }: FileUploadProps) => JSX.Element;
+export declare const DotFileUpload: ({ accept, ariaLabel, ariaRole, buttonOnly, className, "data-testid": dataTestId, disabled, hideFilesList, maxFiles, maxSize, onChange, onDragEnter, onFileClick, }: FileUploadProps) => JSX.Element;

package/lib/components/file-upload/FileUpload.stories.d.ts

@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { FileUploadProps } from './';
-declare const _default: ComponentMeta<({ accept, ariaLabel, buttonOnly, className, "data-testid": dataTestId, disabled, hideFilesList, maxFiles, maxSize, onChange, onDragEnter, onFileClick, }: FileUploadProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ accept, ariaLabel, ariaRole, buttonOnly, className, "data-testid": dataTestId, disabled, hideFilesList, maxFiles, maxSize, onChange, onDragEnter, onFileClick, }: FileUploadProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story<FileUploadProps>;
 export declare const WithSingleFileLimit: Story<FileUploadProps>;

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

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

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

@@ -1,5 +1,5 @@
 import { Story, ComponentMeta } from '@storybook/react';
 import { IconProps } from './Icon';
-declare const _default: ComponentMeta<({ ariaLabel, className, "data-testid": dataTestId, fontSize, iconId, tooltip, }: IconProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, ariaRole, className, "data-testid": dataTestId, fontSize, iconId, tooltip, }: IconProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story<IconProps>;

package/lib/components/index.d.ts

@@ -1,5 +1,5 @@
 export type { AppToolbarProps } from './app-toolbar/AppToolbar';
-export type { AutoCompleteOption, AutoCompleteProps, AutoCompleteValue, AutocompleteRenderOptionState, } from './auto-complete';
+export type { AutoCompleteOption, AutoCompleteProps, AutoCompleteValue, AutocompleteRenderOptionState, FilterOptionsState, } from './auto-complete';
 export type { AvatarProps } from './avatar/Avatar';
 export type { BreadcrumbItem } from './breadcrumbs/Breadcrumbs';
 export type { ButtonProps, CopyButtonProps, IconButtonProps, IconButtonColor, IconButtonSize, } from './button';

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

@@ -34,4 +34,4 @@ export interface InlineEditProps extends CommonProps {
 /**
  * @experimental This component is still in development
  */
-export declare const DotInlineEdit: ({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, selectTextOnEdit, startEditable, tabIndex, tooltip, typography, value, }: InlineEditProps) => JSX.Element;
+export declare const DotInlineEdit: ({ ariaLabel, ariaRole, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, selectTextOnEdit, startEditable, tabIndex, tooltip, typography, value, }: InlineEditProps) => JSX.Element;

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

@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { InlineEditProps } from './InlineEdit';
-declare const _default: ComponentMeta<({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, selectTextOnEdit, startEditable, tabIndex, tooltip, typography, value, }: InlineEditProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, ariaRole, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, selectTextOnEdit, startEditable, tabIndex, tooltip, typography, value, }: InlineEditProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story<InlineEditProps>;
 export declare const WithCharactersLimit: any;

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

@@ -10,6 +10,8 @@ export interface InputProps extends CommonProps {
     disabled?: boolean;
     /** Icon placed after the children. */
     endIcon?: ReactNode;
+    /** Text placed after the children, only displayed if there is no: endIcon, success or error  */
+    endText?: string;
     /** If true, the label will be displayed in an error state. */
     error?: boolean;
     /** If true, the input will take up the full width of its container */

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

@@ -12,4 +12,4 @@ export interface InputSelectProps extends InputProps {
     /** options of select dropdown */
     options: Array<OptionType>;
 }
-export declare const DotInputSelect: ({ ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disabled, endIcon, error, fullWidth, helperText, id, inputRef, label, name, onBlur, onChange, onFocus, onKeyDown, options, persistentLabel, readOnly, required, shrink, size, startIcon, success, value, warning, }: InputSelectProps) => JSX.Element;
+export declare const DotInputSelect: ({ ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disabled, endIcon, endText, error, fullWidth, helperText, id, inputRef, label, name, onBlur, onChange, onFocus, onKeyDown, options, persistentLabel, readOnly, required, shrink, size, startIcon, success, value, warning, }: InputSelectProps) => JSX.Element;

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

@@ -1,6 +1,6 @@
 import { Story, ComponentMeta } from '@storybook/react';
 import { InputSelectProps } from './InputSelect';
-declare const _default: ComponentMeta<({ ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disabled, endIcon, error, fullWidth, helperText, id, inputRef, label, name, onBlur, onChange, onFocus, onKeyDown, options, persistentLabel, readOnly, required, shrink, size, startIcon, success, value, warning, }: InputSelectProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disabled, endIcon, endText, error, fullWidth, helperText, id, inputRef, label, name, onBlur, onChange, onFocus, onKeyDown, options, persistentLabel, readOnly, required, shrink, size, startIcon, success, value, warning, }: InputSelectProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story<InputSelectProps>;
 export declare const WithPersistentLabel: Story<InputSelectProps>;

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

@@ -26,8 +26,9 @@ export interface EndIconProps {
     dataTestId?: string;
     endAdornmentTooltip?: string;
     endIcon?: ReactNode;
+    endText?: string;
     error?: boolean;
     success?: boolean;
     warning?: boolean;
 }
-export declare const DotInputText: ({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, id, inputRef, label, maxRows, minRows, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => JSX.Element;
+export declare const DotInputText: ({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, endText, id, inputRef, label, maxRows, minRows, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => JSX.Element;

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

@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { InputTextProps } from './InputText';
-declare const _default: ComponentMeta<({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, id, inputRef, label, maxRows, minRows, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, endText, id, inputRef, label, maxRows, minRows, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story<InputTextProps>;
 export declare const WithPersistentLabel: Story<InputTextProps>;
@@ -12,3 +12,4 @@ export declare const WithErrorTooltip: Story<InputTextProps>;
 export declare const WithWarningTooltip: Story<InputTextProps>;
 export declare const WithReadOnly: Story<InputTextProps>;
 export declare const WithMultiline: Story<InputTextProps>;
+export declare const WithEndText: Story<InputTextProps>;

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

@@ -27,4 +27,4 @@ export interface LinkProps extends CommonProps {
     /**  underline the link */
     underline?: LinkUnderline;
 }
-export declare const DotLink: ({ ariaLabel, children, className, color, "data-testid": dataTestId, href, onClick, onMouseEnter, onPointerDown, rel, tabIndex, target, tooltip, underline, }: LinkProps) => JSX.Element;
+export declare const DotLink: ({ ariaLabel, ariaRole, children, className, color, "data-testid": dataTestId, href, onClick, onMouseEnter, onPointerDown, rel, tabIndex, target, tooltip, underline, }: LinkProps) => JSX.Element;

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

@@ -1,6 +1,6 @@
 import { Story, ComponentMeta } from '@storybook/react';
 import { LinkProps } from './Link';
-declare const _default: ComponentMeta<({ ariaLabel, children, className, color, "data-testid": dataTestId, href, onClick, onMouseEnter, onPointerDown, rel, tabIndex, target, tooltip, underline, }: LinkProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, ariaRole, children, className, color, "data-testid": dataTestId, href, onClick, onMouseEnter, onPointerDown, rel, tabIndex, target, tooltip, underline, }: LinkProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story<LinkProps>;
 export declare const LinkInParagraph: Story<LinkProps>;

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

@@ -1,4 +1,4 @@
 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, endIcon, href, isOpened, onClick, onMenuLeave, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, primaryText, secondaryText, selected, startIcon, target, text, tooltip, tooltipPlacement, }: ListItemProps) => JSX.Element;
+export declare const DotList: ({ ariaLabel, ariaRole, children, className, component, "data-testid": dataTestId, dense, disablePadding, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, width, }: ListProps) => JSX.Element;
+export declare const DotListItem: ({ ariaLabel, ariaRole, className, component, "data-testid": dataTestId, divider, endIcon, href, isOpened, onClick, onMenuLeave, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, primaryText, secondaryText, selected, startIcon, target, text, tooltip, tooltipPlacement, }: ListItemProps) => JSX.Element;
 export declare const NestedList: ({ ariaLabel, anchorEl, "data-testid": dataTestId, items, menuPlacement, nestedDrawerLeftSpacing, onMenuLeave, open, parentItemIndex, type, }: NestedListProps) => JSX.Element;

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

@@ -1,6 +1,6 @@
 import { Story, ComponentMeta } from '@storybook/react';
 import { ListProps } from './utils/models';
-declare const _default: ComponentMeta<({ ariaLabel, children, className, component, "data-testid": dataTestId, dense, disablePadding, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, width, }: ListProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, ariaRole, children, className, component, "data-testid": dataTestId, dense, disablePadding, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, width, }: ListProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story<ListProps>;
 export declare const WithoutIcons: Story<ListProps>;

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

@@ -1 +1 @@
-export declare const StyledDotDrawer: import("styled-components").StyledComponent<({ anchor, ariaLabel, className, children, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: import("../drawer/Drawer").DrawerProps) => JSX.Element, any, {}, never>;
+export declare const StyledDotDrawer: import("styled-components").StyledComponent<({ anchor, ariaLabel, ariaRole, className, children, "data-testid": dataTestId, drawerBodyProps, drawerFooterProps, drawerHeaderProps, height, ModalProps, onClose, open, PaperProps, variant, width, }: import("../drawer/Drawer").DrawerProps) => JSX.Element, any, {}, never>;

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

@@ -47,4 +47,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, dense, disablePortal, id, loading, maxVisibleItems, menuItemHeight, menuItems, menuPlacement, onLeave, onSelect, open, selectedKey, }: MenuProps) => JSX.Element;
+export declare const DotMenu: ({ anchorEl, ariaLabel, ariaRole, className, "data-testid": dataTestId, dense, disablePortal, id, loading, maxVisibleItems, menuItemHeight, menuItems, menuPlacement, onLeave, onSelect, open, selectedKey, }: MenuProps) => JSX.Element;

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

@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { MenuProps } from './Menu';
-declare const _default: ComponentMeta<({ anchorEl, ariaLabel, className, "data-testid": dataTestId, dense, disablePortal, id, loading, maxVisibleItems, menuItemHeight, menuItems, menuPlacement, onLeave, onSelect, open, selectedKey, }: MenuProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ anchorEl, ariaLabel, ariaRole, className, "data-testid": dataTestId, dense, disablePortal, id, loading, maxVisibleItems, menuItemHeight, menuItems, menuPlacement, onLeave, onSelect, open, selectedKey, }: MenuProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story<MenuProps>;
 export declare const ButtonMenu: Story<MenuProps>;

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

@@ -26,4 +26,4 @@ export interface RadioGroupProps extends RadioGroupBaseProps {
     /** Array of RadioButtonProps used to create the radio buttons */
     options: RadioButtonProps[];
 }
-export declare const DotRadioGroup: ({ ariaLabel, className, "data-testid": dataTestId, defaultValue, disableGroup, endIcon, error, helperText, groupLabel, name, labelPlacement, onChange, value, options, startIcon, required, row, size, }: RadioGroupProps) => JSX.Element;
+export declare const DotRadioGroup: ({ ariaLabel, ariaRole, className, "data-testid": dataTestId, defaultValue, disableGroup, endIcon, error, helperText, groupLabel, name, labelPlacement, onChange, value, options, startIcon, required, row, size, }: RadioGroupProps) => JSX.Element;

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

@@ -1,6 +1,6 @@
 import { Story, ComponentMeta } from '@storybook/react';
 import { RadioGroupProps } from './RadioGroup';
-declare const _default: ComponentMeta<({ ariaLabel, className, "data-testid": dataTestId, defaultValue, disableGroup, endIcon, error, helperText, groupLabel, name, labelPlacement, onChange, value, options, startIcon, required, row, size, }: RadioGroupProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, ariaRole, className, "data-testid": dataTestId, defaultValue, disableGroup, endIcon, error, helperText, groupLabel, name, labelPlacement, onChange, value, options, startIcon, required, row, size, }: RadioGroupProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story<RadioGroupProps>;
 export declare const WithHelperText: any;

package/lib/components/search-input/SearchInput.d.ts

@@ -8,4 +8,4 @@ export interface SearchInputProps extends CommonProps {
     tooltip?: string;
     value: string;
 }
-export declare function SearchInput({ 'data-testid': dataTestId, autoFocus, className, disabled, onChange, onClear, placeholder, tooltip, value, }: SearchInputProps): JSX.Element;
+export declare function SearchInput({ 'data-testid': dataTestId, ariaRole, autoFocus, className, disabled, onChange, onClear, placeholder, tooltip, value, }: SearchInputProps): JSX.Element;

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

@@ -1,3 +1,3 @@
 export declare const rootClassName = "dot-split-button-group";
 export declare const StyledSplitButtonGroup: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").ButtonGroupTypeMap<{}, "div">>, 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, selectedKey, }: import("../menu/Menu").MenuProps) => JSX.Element, any, {}, never>;
+export declare const StyledMenu: import("styled-components").StyledComponent<({ anchorEl, ariaLabel, ariaRole, className, "data-testid": dataTestId, dense, disablePortal, id, loading, maxVisibleItems, menuItemHeight, menuItems, menuPlacement, onLeave, onSelect, open, selectedKey, }: import("../menu/Menu").MenuProps) => JSX.Element, any, {}, never>;

package/lib/components/stepper/Stepper.styles.d.ts

@@ -3,7 +3,7 @@ export declare const stepListClassName = "dot-stepper-list";
 export declare const contentClassName = "dot-stepper-content";
 export declare const StyledStepper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StepContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StepDescription: import("styled-components").StyledComponent<({ ariaLabel, className, "data-testid": dataTestId, children, component, noMarginBottom, noWrap, variant, }: import("../typography/Typography").TypographyProps) => JSX.Element, any, {}, never>;
+export declare const StepDescription: import("styled-components").StyledComponent<({ ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, noMarginBottom, noWrap, variant, }: import("../typography/Typography").TypographyProps) => JSX.Element, any, {}, never>;
 interface StyledStepActionsContainerProps {
     displayCancelButton?: boolean;
 }

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

@@ -1,4 +1,4 @@
 export declare const rootClassName = "dot-table";
 export declare const StyledPaper: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").PaperTypeMap<{}, "div">>, any, {}, never>;
 export declare const StyledTableContainer: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").TableContainerTypeMap<{}, "div">>, 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, selectedKey, }: import("../menu/Menu").MenuProps) => JSX.Element, any, {}, never>;
+export declare const StyledMenu: import("styled-components").StyledComponent<({ anchorEl, ariaLabel, ariaRole, className, "data-testid": dataTestId, dense, disablePortal, id, loading, maxVisibleItems, menuItemHeight, menuItems, menuPlacement, onLeave, onSelect, open, selectedKey, }: import("../menu/Menu").MenuProps) => JSX.Element, any, {}, never>;

package/lib/components/table/TableActions.styles.d.ts

@@ -1,3 +1,3 @@
 export declare const rootClassName = "dot-table-actions";
 export declare const TableActionsContainer: import("styled-components").StyledComponent<"div", 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, selectedKey, }: import("../menu/Menu").MenuProps) => JSX.Element, any, {}, never>;
+export declare const StyledMenu: import("styled-components").StyledComponent<({ anchorEl, ariaLabel, ariaRole, className, "data-testid": dataTestId, dense, disablePortal, id, loading, maxVisibleItems, menuItemHeight, menuItems, menuPlacement, onLeave, onSelect, open, selectedKey, }: import("../menu/Menu").MenuProps) => JSX.Element, any, {}, never>;

package/lib/components/time-picker/TimePicker.d.ts

@@ -44,6 +44,8 @@ export interface TimePickerProps extends CommonProps {
     onKeyDown?: (e: KeyboardEvent<HTMLElement>, contextEnum: DatePickerKeydownContext) => void;
     /** Callback fired when the popup requests to be opened. Use in controlled mode (see `open`). */
     onOpen?: () => void;
+    /** Callback fired when the time value on the opened popper changes. */
+    onPopperTimeChange?: (value: string) => void;
     /** Control the popup or dialog open state. */
     open?: boolean;
     /** If true, the label will be persistently displayed outside the field */
@@ -58,4 +60,4 @@ export interface TimePickerProps extends CommonProps {
 export declare const DEFAULT_PICKER_TIME_FORMAT = "HH:mm";
 export declare const DEFAULT_TIME_FORMAT = "HH:mm";
 export declare const DEFAULT_TIME = "01:00";
-export declare const DotTimePicker: ({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disableOpenPicker, disableClickAwayListener, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onAccept, onBlur, onCancel, onChange, onClose, onKeyDown, onOpen, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element;
+export declare const DotTimePicker: ({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disableOpenPicker, disableClickAwayListener, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onAccept, onBlur, onCancel, onChange, onClose, onKeyDown, onOpen, onPopperTimeChange, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element;

package/lib/components/time-picker/TimePicker.stories.d.ts

@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { TimePickerProps } from './';
-declare const _default: ComponentMeta<({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disableOpenPicker, disableClickAwayListener, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onAccept, onBlur, onCancel, onChange, onClose, onKeyDown, onOpen, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disableOpenPicker, disableClickAwayListener, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onAccept, onBlur, onCancel, onChange, onClose, onKeyDown, onOpen, onPopperTimeChange, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element>;
 export default _default;
 export declare const Default: TimePickerProps;
 export declare const WithAutoFocus: any;

package/lib/components/tooltip/Tooltip.d.ts

@@ -9,4 +9,4 @@ export interface TooltipProps extends CommonProps {
     placement?: tooltipPlacement;
     title?: ReactNode | string | number;
 }
-export declare const DotTooltip: ({ ariaLabel, children, className, "data-testid": dataTestId, leaveDelay, onClose, open, placement, title, }: TooltipProps) => JSX.Element;
+export declare const DotTooltip: ({ ariaLabel, ariaRole, children, className, "data-testid": dataTestId, leaveDelay, onClose, open, placement, title, }: TooltipProps) => JSX.Element;

package/lib/components/tooltip/Tooltip.stories.d.ts

@@ -1,5 +1,5 @@
 import { Story, ComponentMeta } from '@storybook/react';
 import { TooltipProps } from './Tooltip';
-declare const _default: ComponentMeta<({ ariaLabel, children, className, "data-testid": dataTestId, leaveDelay, onClose, open, placement, title, }: TooltipProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, ariaRole, children, className, "data-testid": dataTestId, leaveDelay, onClose, open, placement, title, }: TooltipProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story<TooltipProps>;

package/lib/components/typography/Typography.d.ts

@@ -2,6 +2,8 @@ import { ElementType, ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 export declare type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline' | 'inherit';
 export interface TypographyProps extends CommonProps {
+    /** When `ariaRole` is `heading` then set a level */
+    ariaLevel?: number;
     /** The content of the component. */
     children: ReactNode;
     /** The component used for the root node. Either a string to use a HTML element or a component. */
@@ -13,4 +15,4 @@ export interface TypographyProps extends CommonProps {
     /** Applies the theme typography styles. */
     variant?: TypographyVariant;
 }
-export declare const DotTypography: ({ ariaLabel, className, "data-testid": dataTestId, children, component, noMarginBottom, noWrap, variant, }: TypographyProps) => JSX.Element;
+export declare const DotTypography: ({ ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, noMarginBottom, noWrap, variant, }: TypographyProps) => JSX.Element;

package/lib/components/typography/Typography.stories.d.ts

@@ -1,6 +1,6 @@
 import { Story, ComponentMeta } from '@storybook/react';
 import { TypographyProps } from './Typography';
-declare const _default: ComponentMeta<({ ariaLabel, className, "data-testid": dataTestId, children, component, noMarginBottom, noWrap, variant, }: TypographyProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, noMarginBottom, noWrap, variant, }: TypographyProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story<TypographyProps>;
 export declare const WithVariants: Story<TypographyProps>;

package/package.json

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