@digital-ai/dot-components 2.0.0-rc.1 → 2.0.0-rc.2

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

@@ -9,9 +9,11 @@ export interface AlertBannerProps extends CommonProps {
     children: ReactNode | string;
     /** callback which is triggered when alert banner is closed */
     onClose?: (event: MouseEvent) => void;
+    /** If true, the alert banner will have rounded corners */
+    roundedCorners?: boolean;
     /** will determine color and icon being used */
     severity: AlertBannerSeverity;
     /** when specified, will control the text that is used inside the alert banner */
     textVariant?: TypographyVariant;
 }
-export declare const DotAlertBanner: ({ action, ariaLabel, children, className, "data-testid": dataTestId, onClose, severity, textVariant, }: AlertBannerProps) => JSX.Element;
+export declare const DotAlertBanner: ({ action, ariaLabel, children, className, "data-testid": dataTestId, onClose, roundedCorners, severity, textVariant, }: AlertBannerProps) => JSX.Element;

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

@@ -1,4 +1,4 @@
-import { ChangeEvent, ReactNode, Ref } from 'react';
+import { ChangeEvent, FocusEvent, ReactNode, Ref } from 'react';
 import { AutocompleteCloseReason, AutocompleteGetTagProps, AutocompleteRenderOptionState } from '@mui/material';
 import { CommonProps } from '../CommonProps';
 export declare const DEFAULT_ACTION_ITEM_TEXT = "Add new item";
@@ -36,6 +36,7 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     disablePortal?: boolean;
     /** If true, the input will be disabled. */
     disabled?: boolean;
+    endAdornmentTooltip?: string;
     /** If true, the input will be displayed in an error state. */
     error?: boolean;
     /** If `true`, hide the selected options from the list box. */
@@ -58,6 +59,8 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     maxHeight?: number | string;
     /** If true, will allow the user to select multiple options */
     multiple?: boolean;
+    /** Callback function which will be executed upon blur event */
+    onBlur?: (event: FocusEvent<HTMLElement>) => void;
     /** A function that should be executed when the autocomplete value changes */
     onChange?: (event: ChangeEvent<unknown>, value: AutoCompleteValue, reason: string) => void;
     /** Callback fired when the popup requests to be closed. Use in controlled mode. */
@@ -72,6 +75,8 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     options?: Array<T>;
     /** Placeholder text always displayed inside the input field */
     placeholder?: string;
+    /** If true: popper cannot be opened, TextField is in read only mode, change is not allowed  */
+    readOnly?: boolean;
     /** Render the option, use `getOptionLabel` by default. */
     renderOption?: (props: React.HTMLAttributes<HTMLLIElement>, option: T, state: AutocompleteRenderOptionState) => ReactNode;
     /** Render the selected value. */
@@ -82,5 +87,7 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     size?: autoCompleteSize;
     /** value if this is a controlled component */
     value?: AutoCompleteValue;
+    /** If true, the label will be displayed in a warning state. */
+    warning?: boolean;
 }
-export declare const DotAutoComplete: <T extends AutoCompleteOption>({ actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, error, filterSelectedOptions, freesolo, group, helperText, inputId, inputRef, label, loading, maxHeight, multiple, onChange, onClose, onInputChange, onOpen, open, options, placeholder, renderOption, renderTags, required, size, value, }: AutoCompleteProps<T>) => JSX.Element;
+export declare const DotAutoComplete: <T extends AutoCompleteOption>({ actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterSelectedOptions, freesolo, group, helperText, inputId, inputRef, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => JSX.Element;

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

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

package/lib/components/auto-complete/utils/helpers.d.ts

@@ -2,5 +2,11 @@ import { AutocompleteGetTagProps } from '@mui/material';
 import { ChipSize } from '../../chip/Chip';
 import { AutoCompleteOption, AutoCompleteValue } from '../AutoComplete';
 export declare const parseAutoCompleteValue: (value: AutoCompleteValue) => string;
-export declare const getChipsFromAutocomplete: (values: Array<AutoCompleteOption | string>, getTagProps: AutocompleteGetTagProps, chipSize?: ChipSize) => JSX.Element[];
+export interface GetChipsFromAutocompleteProps {
+    chipSize?: ChipSize;
+    getTagProps: AutocompleteGetTagProps;
+    isReadOnly?: boolean;
+    values: Array<AutoCompleteOption | string>;
+}
+export declare const getChipsFromAutocomplete: ({ chipSize, getTagProps, isReadOnly, values, }: GetChipsFromAutocompleteProps) => JSX.Element[];
 export declare const checkIfDuplicateItem: (itemText: string, autocompleteOptions: AutoCompleteOption[]) => boolean;

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

@@ -21,6 +21,8 @@ export interface AvatarProps extends CommonProps {
     size?: AvatarSize;
     /** To be used to override styles inline */
     style?: CSSProperties;
+    /** tab order for the avatar */
+    tabIndex?: number;
     /** The text to be displayed. Only the first 2 letters will be displayed. */
     text?: string;
     /** Tooltip for avatar */
@@ -30,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, text, type, tooltip, variant, style, }: AvatarProps) => JSX.Element;
+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;

package/lib/components/dynamic-form/utils/formHelpers.d.ts

@@ -20,7 +20,7 @@ export interface UncontrolledInputArgs extends InputBaseArgs {
     formState?: DynamicFormState;
     handleClick?: (formValues?: DynamicFormOutputData) => void;
 }
-export declare const getInitialStateFromControl: ({ hidden, initialValue, controlType, validation, formSection, }: DynamicFormControl, liveValidation: boolean, formValues: DynamicFormOutputData) => DynamicFormStateItem;
+export declare const getInitialStateFromControl: ({ hidden, initialValue, controlType, validation }: DynamicFormControl, liveValidation: boolean, formValues: DynamicFormOutputData) => DynamicFormStateItem;
 export declare const getInitialFormState: (config: DynamicFormConfig, liveValidation: boolean) => DynamicFormState;
 export declare const getControlClickHandler: (formValues: DynamicFormOutputData, onControlClick?: ControlClickHandler) => () => void;
 export declare const buildInputTextControl: ({ controlName, controlProps, disabled, formData, handleChange, index, }: ControlledInputArgs) => JSX.Element;

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

@@ -1,3 +1,4 @@
+import { KeyboardEvent } from 'react';
 import { CommonProps } from '../CommonProps';
 export interface ListItemFile {
     id: string | number;
@@ -10,5 +11,7 @@ export interface FileItemProps extends CommonProps {
     errorText?: string;
     file: ListItemFile;
     onClick?: (file: ListItemFile) => void;
+    onKeyPress?: (event: KeyboardEvent<Element>) => void;
+    tabIndex?: number;
 }
-export declare const DotFileListItem: ({ ariaLabel, className, "data-testid": dataTestId, deleteFile, disableDelete, error, errorText, file, onClick, }: FileItemProps) => JSX.Element;
+export declare const DotFileListItem: ({ ariaLabel, className, "data-testid": dataTestId, deleteFile, disableDelete, error, errorText, file, onClick, onKeyPress, tabIndex, }: FileItemProps) => JSX.Element;

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

@@ -1,5 +1,6 @@
-import { FileUploadProps } from './';
+import { FileUploadProps, MappedListItemFile } from './';
 export interface CustomFileUploadArgs {
+    alreadyUploadedFiles?: MappedListItemFile[];
     args: FileUploadProps;
 }
-export declare const CustomFileUpload: ({ args }: CustomFileUploadArgs) => JSX.Element;
+export declare const CustomFileUpload: ({ args, alreadyUploadedFiles, }: CustomFileUploadArgs) => JSX.Element;

package/lib/components/file-upload/utils/helpers.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { FileRejection } from 'react-dropzone';
-import { DropzoneContentArgs, ParseListItemArgs, UploadedFilesListArgs } from './models';
+import { DropzoneContentArgs, FileUploadError, ParseListItemArgs, UploadedFilesListArgs } from './models';
 export declare const renderMaxSizeMessage: (maxSizeMB: number) => ReactNode;
 export declare const renderMaxFilesMessage: (maxFiles: number, maxFilesClasses: string) => ReactNode;
 export declare const renderSelectFilesButton: (isUploadDisabled: boolean, onButtonClick: () => void) => ReactNode;
@@ -21,3 +21,4 @@ export declare const joinAcceptedAndRejectedFiles: (filesAccepted: File[], files
     file: File;
     errors: any[];
 }[];
+export declare const getErrorMessagesForDisplay: (errors: FileUploadError[]) => string;

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

@@ -18,6 +18,10 @@ export interface InlineEditProps extends CommonProps {
     onEditStateChange?: (editing: boolean) => void;
     /** If true, component will behave like a regular text (editing functionality will be disabled). */
     readOnly?: boolean;
+    /** If true, when starting edit it will select all text in the input */
+    selectTextOnEdit?: boolean;
+    /** tab order for the inline edit */
+    tabIndex?: number;
     /** Tooltip text displayed on hover */
     tooltip?: string;
     /** Typography variant to be used */
@@ -28,4 +32,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, tooltip, typography, value, }: InlineEditProps) => JSX.Element;
+export declare const DotInlineEdit: ({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, selectTextOnEdit, tabIndex, tooltip, typography, value, }: InlineEditProps) => JSX.Element;

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

@@ -37,17 +37,27 @@ export interface InputProps extends CommonProps {
     onKeyDown?: (event: KeyboardEvent) => void;
     /** A function that executes when a user releases a mouse button over an element. */
     onMouseUp?: (event: MouseEvent) => void;
+    /** If true, the label will be persistently displayed outside of the field */
+    persistentLabel?: boolean;
+    /** If true, the input will be read-only. */
+    readOnly?: boolean;
     /** If true, the label is displayed as required and the input element` will be required. */
     required?: boolean;
+    /** If specified, the label being shrunk/unshrunk must be controlled by the consumer */
+    shrink?: boolean;
     /** Size of the input */
     size?: inputSizeOptions;
     /** Icon placed before the children. */
     startIcon?: ReactNode;
+    /** If true, the label and field will be displayed in a success state */
+    success?: boolean;
     /**
      * Type of input should be a valid HTML 5 input type
      * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
      */
     type?: string;
+    /** value of input field */
+    value?: string;
     /** If true, the label will be displayed in an warning state. */
     warning?: boolean;
 }

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

@@ -1,8 +1,11 @@
-import { TextField } from '@mui/material';
+import { TextField, InputLabel } from '@mui/material';
 export declare const rootClassName = "dot-text-field";
 export declare const rootSelectClassName = "dot-select-field";
+export declare const labelClassName = "dot-input-label";
 export declare const warningClassName = "dot-warning";
+export declare const successClassName = "dot-success";
 export declare const adornmentIconClassName = "dot-adornment-icon";
 export declare const fieldsetClassName = "MuiOutlinedInput-notchedOutline";
 export declare const StyledAdornment: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").InputAdornmentTypeMap<{}, "div">>, any, {}, never>;
+export declare const StyledInputLabel: import("styled-components").StyledComponent<typeof InputLabel, any, {}, never>;
 export declare const StyledTextField: import("styled-components").StyledComponent<typeof TextField, any, {}, never>;

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

@@ -0,0 +1,16 @@
+export interface InputLabelProps {
+    /** If true, the input will be disabled. */
+    disabled?: boolean;
+    /** If true, the label will be displayed in an error state. */
+    error?: boolean;
+    /**
+     * id to identify the element, also used to create label "for" and helper text id attribute
+     * values while it's optional, it is considered required for accessiblity best practice.
+     */
+    id: string;
+    /** The label content. */
+    label?: string;
+    /** If true, the label is displayed as required and the input element` will be required. */
+    required?: boolean;
+}
+export declare const DotInputLabel: ({ disabled, error, id, label, required, }: InputLabelProps) => JSX.Element;

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

@@ -1,7 +1,7 @@
 import { InputProps } from './InputFormFields.propTypes';
 export declare type OptionType = string | InputSelectOption;
 export interface InputSelectOption {
-    /** options that appears in dropdown */
+    /** options that appear in dropdown */
     option: string;
     /** value of input field when option is selected */
     value?: string;
@@ -11,7 +11,5 @@ export interface InputSelectProps extends InputProps {
     defaultValue?: string;
     /** options of select dropdown */
     options: Array<OptionType>;
-    /** value of input field */
-    value?: string;
 }
-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, required, size, startIcon, value, warning, }: InputSelectProps) => JSX.Element;
+export declare const DotInputSelect: ({ ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disabled, endIcon, error, fullWidth, helperText, id, inputRef, label, name, onBlur, onChange, onFocus, onKeyDown, options, persistentLabel, readOnly, required, shrink, size, startIcon, success, value, warning, }: InputSelectProps) => JSX.Element;

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

@@ -1,5 +1,7 @@
+import { ReactNode } from 'react';
 import { InputProps } from './InputFormFields.propTypes';
 export declare const DELAY_MS = 300;
+export declare type endAdornmentIconType = 'warning' | 'error' | 'check';
 export interface InputTextProps extends InputProps {
     /** The HTML autocomplete property to pass along to the input tag. Used for
     controlling autofill behavior in forms. This property follows this HTML spec:
@@ -17,9 +19,15 @@ export interface InputTextProps extends InputProps {
     multiline?: boolean;
     /** Placeholder text always displayed inside the input field */
     placeholder?: string;
-    /** If true, the input will be read-only. */
-    readOnly?: boolean;
     /** value of the InputText */
     value?: string;
 }
-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, placeholder, readOnly, required, startIcon, size, type, value, warning, }: InputTextProps) => JSX.Element;
+export interface EndIconProps {
+    dataTestId?: string;
+    endAdornmentTooltip?: string;
+    endIcon?: ReactNode;
+    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;

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

@@ -1,8 +1,12 @@
 import { CommonProps } from '../CommonProps';
+import { BadgeProps } from '../badge';
 export declare type RailItemsPosition = 'flex-start' | 'center' | 'flex-end';
+export declare type RailIconBadge = Omit<BadgeProps, 'children'>;
 export interface RailItem {
     /** Defines a string value that labels the current element **/
     ariaLabel?: string;
+    /** Optional badge which will be displayed over an icon **/
+    iconBadge?: RailIconBadge;
     /** Id of the icon shown in the rail item */
     iconId: string;
     /** text displayed or title text if icon used */

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

@@ -0,0 +1,9 @@
+import { RailItem } from './NavigationRail';
+export interface BadgeCount {
+    activity: number;
+    conditions: number;
+    properties: number;
+    scheduling: number;
+}
+export declare const mockRailItems: Array<RailItem>;
+export declare const getBadgeRailItems: ({ activity, conditions, properties, scheduling, }: BadgeCount) => RailItem[];

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

@@ -1,2 +1,4 @@
 export declare const programmaticNavigationClassName = "dot-programmatic-navigation-story";
+export declare const withBadgesClassName = "dot-with-badges-story";
 export declare const StyledWithProgrammaticNavigation: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledWithBadges: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,9 +1,15 @@
+import { ReactElement } from 'react';
 import { CommonProps } from '../CommonProps';
 export declare type PillSize = 'small' | 'medium';
 export declare type PillStatus = 'success' | 'error' | 'warning' | 'in-progress' | 'default';
+export declare type PillVariant = 'filled' | 'outlined';
 export interface PillProps extends CommonProps {
     /** Background color for the pill, ignored if 'status' is not 'default' */
     backgroundcolor?: string;
+    /** Border color for the pill, ignored if 'status' is not 'default' */
+    bordercolor?: string;
+    /** The icon for the pill */
+    icon?: ReactElement;
     /** The text for the pill. */
     label: string;
     /** Label color for the pill, ignored if 'status' is not 'default' */
@@ -12,5 +18,7 @@ export interface PillProps extends CommonProps {
     size?: PillSize;
     /** Determines the status of the pill component */
     status?: PillStatus;
+    /** Determines the variant of the pill 'filled' or 'outlined' */
+    variant?: PillVariant;
 }
-export declare const DotPill: ({ ariaLabel, backgroundcolor, className, "data-testid": dataTestId, label, labelcolor, size, status, }: PillProps) => JSX.Element;
+export declare const DotPill: ({ ariaLabel, backgroundcolor, bordercolor, className, "data-testid": dataTestId, icon, label, labelcolor, size, status, variant, }: PillProps) => JSX.Element;

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

@@ -1,2 +1,2 @@
-export { PopperPlacementType } from '@mui/material';
+export type { PopperPlacementType } from '@mui/material';
 export * from './Popper';

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

@@ -2,9 +2,5 @@ import { RadioGroup } from '@mui/material';
 export declare const wrapperClassName = "dot-radio-group-wrapper";
 export declare const groupClassName = "dot-radio-group";
 export declare const rootClassName = "dot-radio-control";
-export declare const groupLabelClassName = "dot-radio-group-label";
-export declare const startAdornmentClassName = "dot-start-adornment";
-export declare const endAdornmentClassName = "dot-end-adornment";
-export declare const placementClassName = "dot-";
 export declare const StyledRadioGroupWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledRadioGroup: import("styled-components").StyledComponent<typeof RadioGroup, any, {}, never>;

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

@@ -6,9 +6,11 @@ export interface TypographyProps extends CommonProps {
     children: ReactNode;
     /** The component used for the root node. Either a string to use a HTML element or a component. */
     component?: ElementType;
+    /** If true, the typography will not have a bottom margin set */
+    noMarginBottom?: boolean;
     /** If true, the text will wrap and not be truncated */
     noWrap?: boolean;
     /** Applies the theme typography styles. */
     variant?: TypographyVariant;
 }
-export declare const DotTypography: ({ ariaLabel, className, "data-testid": dataTestId, children, component, noWrap, variant, }: TypographyProps) => JSX.Element;
+export declare const DotTypography: ({ ariaLabel, className, "data-testid": dataTestId, children, component, noMarginBottom, noWrap, variant, }: TypographyProps) => JSX.Element;

package/package.json

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