@digital-ai/dot-components 1.20.0 → 1.21.2

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 '@material-ui/lab';
 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?: (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/utils/helpers.d.ts

@@ -3,5 +3,11 @@ import { AutocompleteGetTagProps } from '@material-ui/lab';
 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/checkbox/CheckboxGroup.d.ts

@@ -1,6 +1,6 @@
 import { ChangeEvent } from 'react';
 import { RadioGroupBaseProps } from '../radio/RadioGroup';
-import { CheckboxProps } from '../checkbox/Checkbox';
+import { CheckboxProps } from './Checkbox';
 export interface CheckboxGroupProps extends RadioGroupBaseProps {
     /** Array of CheckboxProps to set by default */
     defaultValues?: CheckboxProps[];

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,4 +1,4 @@
-/// <reference types="react" />
+import { KeyboardEvent } from 'react';
 import { CommonProps } from '../CommonProps';
 export interface ListItemFile {
     id: string | number;
@@ -11,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,6 +1,7 @@
 /// <reference types="react" />
-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

@@ -19,6 +19,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 */
@@ -29,4 +33,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

@@ -39,6 +39,8 @@ export interface InputProps extends CommonProps {
     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 */

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

@@ -2,7 +2,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;
@@ -13,4 +13,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, required, shrink, size, startIcon, success, 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

@@ -15,8 +15,6 @@ 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;
     /** number of rows for multiline line */
     rows?: number;
     /** max of rows for multiline line */

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

@@ -1,10 +1,15 @@
-/// <reference types="react" />
+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 = 'default' | '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' */
@@ -13,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 'default' 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/radio/RadioGroup.styles.d.ts

@@ -2,9 +2,5 @@ import { RadioGroup } from '@material-ui/core';
 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/package.json

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