@digital-ai/dot-components 1.3.4 → 1.4.0

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

@@ -1,23 +1,30 @@
-import { ReactNode } from 'react';
+import { ChangeEvent, ReactElement, ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 export interface AccordionProps extends CommonProps {
     /** actionable components (ex: checkbox, button) that can be nested within the expanded Accordion component */
     actions?: ReactNode;
     /** The content for the Accordion.*/
     children: ReactNode;
-    /** If true, expands the accordion by default. */
+    /** DEPRECATED, DO NOT USE */
     defaultExpanded?: boolean;
     /** If true, the accordion will be displayed in a disabled state. */
     disabled?: boolean;
+    /** If true, the accordion is expanded. */
+    expanded?: boolean;
     /** If true, the Accordion will have elevation. */
     hasElevation?: boolean;
     /** If true, the text will wrap and not be truncated */
     noWrap?: boolean;
+    /**
+    Callback fired when the expand/collapse state is changed.
+    If provided, the accordion will be a controlled component and it will be the responsibility of the consumer to manage the 'expanded' state.
+    */
+    onChange?: (event: ChangeEvent, expanded: boolean) => void;
     /** If true, rounded corners are disabled. */
     square?: boolean;
     /** Icon placed before the children. */
     startIcon?: ReactNode;
     /** The text within the expanded Accordion */
-    summary: ReactNode;
+    summary: ReactElement;
 }
-export declare const DotAccordion: ({ actions, ariaLabel, children, className, "data-testid": dataTestId, defaultExpanded, disabled, hasElevation, square, startIcon, summary, noWrap, }: AccordionProps) => JSX.Element;
+export declare const DotAccordion: ({ actions, ariaLabel, children, className, "data-testid": dataTestId, defaultExpanded, disabled, expanded, hasElevation, onChange, square, startIcon, summary, noWrap, }: AccordionProps) => JSX.Element;

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
-export declare type BadgeOverlap = 'circle' | 'rectangle' | 'circular' | 'rectangular';
+export declare type BadgeOverlap = 'circular' | 'rectangular';
 export interface BadgeProps extends CommonProps {
     /** custom color code for the badge */
     badgeColor?: string;

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

@@ -1,3 +1,6 @@
-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>;
+interface StyledBadgeProps {
+    $badgeColor?: string;
+}
+export declare const StyledBadge: import("styled-components").StyledComponent<import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").BadgeTypeMap<{}, "div">>, any, StyledBadgeProps, never>;
+export {};

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

@@ -8,4 +8,4 @@ export interface DynamicFormProps extends CommonProps {
     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;
+export declare const DotDynamicForm: ({ ariaLabel, className, "data-testid": dataTestId, config, disabled: isFormDisabled, liveValidation, onChange, onSubmit, }: DynamicFormProps) => JSX.Element;

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

@@ -0,0 +1,2 @@
+import { ControlClickHandler, DynamicFormConfig } from './models';
+export declare const getDynamicFormConfig: (handleProgressControlClick?: ControlClickHandler) => DynamicFormConfig;

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

@@ -0,0 +1 @@
+export declare const StyledDynamicFormStory: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 export declare const rootClassName = "dot-dynamic-form";
-export declare const StyledDynamicForm: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledDynamicForm: import("styled-components").StyledComponent<({ ariaLabel, children, className, "data-testid": dataTestId, onSubmit, }: import("../form/Form").FormProps) => JSX.Element, any, {}, never>;

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ComponentType, ReactNode } from 'react';
 import { AutoCompleteProps } from '../auto-complete/AutoComplete';
 import { ButtonProps } from '../button/Button';
 import { CheckboxProps } from '../checkbox/Checkbox';
@@ -7,21 +7,35 @@ 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;
+import { ProgressButtonProps } from '../progress-button/ProgressButton';
+export declare type DynamicFormControlType = 'dot-input-text' | 'dot-input-select' | 'dot-checkbox' | 'dot-checkbox-group' | 'dot-autocomplete' | 'dot-button' | 'dot-progress-button' | 'dot-radio-group' | 'dot-reset' | 'dot-submit' | 'dot-progress-submit' | 'dot-switch' | 'dot-form-section' | 'custom-element';
+export declare type DynamicFormControlProps = AutoCompleteProps | InputTextProps | InputSelectProps | CheckboxProps | CheckboxGroupProps | ButtonProps | ProgressButtonProps | RadioGroupProps | SwitchProps;
 export interface DynamicFormOutputData {
     [key: string]: unknown;
 }
 export declare type ConditionFunction = (formValues: DynamicFormOutputData) => boolean;
-export declare type HiddenControl = boolean | ConditionFunction;
+export declare type DisabledConditionFunction = (formValues: DynamicFormOutputData, isFormValid: boolean) => boolean;
+export declare type ControlCondition = boolean | ConditionFunction;
+export declare type DisabledControlCondition = boolean | DisabledConditionFunction;
+export declare type ControlClickHandler = (formValues: DynamicFormOutputData) => void;
+export interface DynamicFormSectionProps {
+    sectionControls: ReactNode[];
+}
+export interface DynamicFormSection {
+    FormSectionComponent: ComponentType<DynamicFormSectionProps>;
+    sectionControls: DynamicFormControl[];
+}
 export interface DynamicFormControl {
     controlName?: string;
-    controlType: DynamicFormControlType;
     controlProps?: DynamicFormControlProps;
+    controlType: DynamicFormControlType;
+    formSection?: DynamicFormSection;
+    customElement?: ReactNode;
+    disabled?: DisabledControlCondition;
+    hidden?: ControlCondition;
     initialValue?: unknown;
+    onControlClick?: ControlClickHandler;
     validation?: DynamicFormValidation;
-    customElement?: ReactNode;
-    hidden?: HiddenControl;
 }
 export interface FieldValidation {
     isValid: boolean;
@@ -51,7 +65,7 @@ export interface DynamicFormStateItem {
     isValid: boolean;
     isTouched: boolean;
     errorMessage: string;
-    hidden?: HiddenControl;
+    hidden?: ControlCondition;
 }
 export interface DynamicFormState {
     data: DynamicFormStateData;

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

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

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

@@ -1,5 +1,5 @@
 import { ChangeEvent } from 'react';
-import { DynamicFormConfig, DynamicFormControlProps, DynamicFormState, DynamicFormStateData } from '../models';
+import { ControlClickHandler, DynamicFormConfig, DynamicFormControl, DynamicFormControlProps, DynamicFormOutputData, DynamicFormState, DynamicFormStateData, DynamicFormStateItem } from '../models';
 import { AutoCompleteValue } from '../../auto-complete/AutoComplete';
 import { CheckboxProps } from '../../checkbox/Checkbox';
 declare type AutoCompleteChangeHandler = (controlName: string) => (e: ChangeEvent<HTMLInputElement>, value: AutoCompleteValue) => void;
@@ -18,9 +18,11 @@ export interface ControlledInputArgs extends InputBaseArgs {
 }
 export interface UncontrolledInputArgs extends InputBaseArgs {
     formState?: DynamicFormState;
-    handleClick?: () => void;
+    handleClick?: (formValues?: DynamicFormOutputData) => void;
 }
+export declare const getInitialStateFromControl: ({ hidden, initialValue, controlType, validation, formSection, }: 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;
 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;
@@ -28,7 +30,9 @@ export declare const buildRadioGroupControl: ({ controlName, controlProps, disab
 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 buildButtonControl: ({ controlProps, disabled, index, handleClick, }: UncontrolledInputArgs) => JSX.Element;
+export declare const buildProgressButtonControl: ({ controlProps, disabled, index, handleClick, }: 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 declare const buildProgressSubmitControl: ({ controlProps, disabled, formState, index, liveValidation, }: UncontrolledInputArgs) => JSX.Element;
 export {};

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

@@ -1,5 +1,6 @@
-import { DynamicFormConfig, DynamicFormOutputData, DynamicFormState, DynamicFormStateData, HiddenControl } from '../models';
+import { ControlCondition, DisabledControlCondition, DynamicFormConfig, DynamicFormOutputData, DynamicFormState, DynamicFormStateData } from '../models';
 export declare const getControlValue: <T extends unknown>(controlName: string, data: DynamicFormStateData) => T;
 export declare const getOutputFormData: (formState: DynamicFormState) => DynamicFormOutputData;
-export declare const checkIfHiddenControl: (hidden: HiddenControl, formValues: DynamicFormOutputData) => boolean;
+export declare const checkIfHiddenControl: (hidden: ControlCondition, formValues: DynamicFormOutputData) => boolean;
+export declare const checkIfDisabledControl: (disabled: DisabledControlCondition, formValues: DynamicFormOutputData, isFormValid: boolean) => boolean;
 export declare const getFormDataFromInitialValues: (config: DynamicFormConfig) => DynamicFormOutputData;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { FileWithPath } from 'react-dropzone';
+import { CommonProps } from '../CommonProps';
+export interface FileItemProps extends CommonProps {
+    deleteFile: (file: FileWithPath) => void;
+    error?: boolean;
+    errorText?: string;
+    file: FileWithPath;
+}
+export declare const DotFileListItem: ({ ariaLabel, className, "data-testid": dataTestId, deleteFile, error, errorText, file, }: FileItemProps) => JSX.Element;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { CommonProps } from '../CommonProps';
+import { MappedFile } from './uploadHelpers';
+export interface FileUploadProps extends CommonProps {
+    /** Unique file type specifiers <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers" target="_blank">More Info</a> */
+    accept?: Array<string>;
+    /** If true, will only display the button */
+    buttonOnly?: boolean;
+    /** If true, the upload zone will be disabled */
+    disabled?: boolean;
+    /** Defines the maximum number of files that can be uploaded at once */
+    maxFiles?: number;
+    /** Defines the maximum file size (in MB) */
+    maxSize: number;
+    /** callback triggered when files are added or removed */
+    onChange: (files: Array<MappedFile>) => void;
+    /** callback triggered when dragenter event occurs */
+    onDragEnter?: (event: React.DragEvent<HTMLDivElement>) => void;
+}
+export declare const DotFileUpload: ({ accept, ariaLabel, buttonOnly, className, "data-testid": dataTestId, disabled, maxFiles, maxSize, onChange, onDragEnter, }: FileUploadProps) => JSX.Element;

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

@@ -0,0 +1,6 @@
+export declare const rootClassName = "dot-file-upload";
+export declare const containerClassName: string;
+export declare const fileClassName: string;
+export declare const dropZoneClassName: string;
+export declare const StyledFileUploadContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFileUpload: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { FileWithPath } from 'react-dropzone';
+export interface MappedFile {
+    errors: Array<FileUploadError>;
+    file: FileWithPath;
+}
+export interface FileUploadError {
+    code: string;
+    message: string;
+}
+export declare const parseListItem: (deleteFile: (file: FileWithPath) => void, fileToBeParsed: MappedFile, maxSize: number) => {
+    child: JSX.Element;
+};

package/lib/components/index.d.ts

@@ -7,7 +7,7 @@ export type { CheckboxProps } from './checkbox/Checkbox';
 export type { CheckboxGroupProps } from './checkbox/CheckboxGroup';
 export type { SubmitButtonProps } from './dialog/Dialog';
 export type { DynamicFormProps } from './dynamic-form/DynamicForm';
-export type { DynamicFormConfig, DynamicFormOutputData, DynamicFormState, FieldValidation, } from './dynamic-form/models';
+export type { ControlClickHandler, DynamicFormConfig, DynamicFormControl, DynamicFormOutputData, DynamicFormState, FieldValidation, DynamicFormSectionProps, } from './dynamic-form/models';
 export type { IconButtonProps } from './button/IconButton';
 export type { InputTextProps } from './input-form-fields/InputText';
 export type { InputSelectProps } from './input-form-fields/InputSelect';
@@ -73,6 +73,7 @@ export { DotSkeleton } from './skeleton/Skeleton';
 export { DotSnackbar } from './snackbar/Snackbar';
 export { DotSnackbarContainer, DotSnackbarProvider, useDotSnackbarContext, } from './snackbar/SnackbarProvider';
 export { DotSplitButton } from './split-button/SplitButton';
+export { DotProgressButton } from './progress-button/ProgressButton';
 export { DotSwitch } from './switch/Switch';
 export { DotTable } from './table/Table';
 export { DotTooltip } from './tooltip/Tooltip';
@@ -80,4 +81,4 @@ export { DotHeaderRow } from './table/TableHeader';
 export { DotTablePagination } from './table/TablePagination';
 export { DotTabs } from './tabs/Tabs';
 export { DotTypography } from './typography/Typography';
-export { DotProgressButton } from './progress-button/ProgressButton';
+export { DotFileUpload } from './file-upload/FileUpload';

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

@@ -1,4 +1,4 @@
-import { ChangeEvent, ReactNode, Ref } from 'react';
+import { ChangeEvent, ReactNode, Ref, KeyboardEvent } from 'react';
 import { CommonProps } from '../CommonProps';
 export declare type inputSizeOptions = 'small' | 'medium';
 export interface InputProps extends CommonProps {
@@ -27,8 +27,14 @@ export interface InputProps extends CommonProps {
     label?: string;
     /** The name of input element */
     name: string;
+    /** A function that should be executed when the input loses focus */
+    onBlur?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** A function that should be executed when the value of the input changes */
     onChange?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /** A function that should be executed when the input gains focus */
+    onFocus?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /** A function that should be executed when key is pressed */
+    onKeyDown?: (event: KeyboardEvent) => void;
     /** If true, the label is displayed as required and the input element` will be required. */
     required?: boolean;
     /** Size of the input */

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

@@ -8,4 +8,4 @@ export interface InputSelectProps extends InputProps {
     /** 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, onChange, 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, required, size, startIcon, value, warning, }: InputSelectProps) => JSX.Element;

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

@@ -17,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, hasDebounce, 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, onBlur, onChange, onFocus, onKeyDown, placeholder, readOnly, required, rows, rowsMax, startIcon, size, type, value, warning, }: InputTextProps) => JSX.Element;

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

@@ -52,10 +52,11 @@ export interface ListItemProps extends CommonProps {
     endIconId?: string;
     /** If provided, the list item will be rendered as a link */
     href?: string;
-    /** List item index */
+    /** DEPRECATED, DO NOT USE */
     index?: number;
     /** If provided, the menu item will display a nested list */
     items?: Array<ListItemProps>;
+    isOpened?: boolean;
     /** If nested list type is 'menu', determines the placement of the menu */
     menuPlacement?: PopperPlacement;
     /** If nested type is 'drawer', determines the width of the left spacing */
@@ -64,6 +65,12 @@ export interface ListItemProps extends CommonProps {
     nestedListType?: NestedListType;
     /** Event callback */
     onClick?: (event: MouseEvent) => void;
+    /** Menu leave event callback */
+    onMenuLeave?: () => void;
+    /** The main content element */
+    primaryText?: string;
+    /** The secondary content element */
+    secondaryText?: string;
     /** Selected list item */
     selected?: boolean;
     /** If provided, the icon ID which is displayed on the front of the list item */
@@ -78,4 +85,4 @@ export interface ListItemProps extends CommonProps {
     tooltip?: string;
 }
 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, target, text, title, tooltip, }: ListItemProps) => JSX.Element;
+export declare const DotListItem: ({ ariaLabel, className, component, "data-testid": dataTestId, divider, endIconId, href, isOpened, onClick, onMenuLeave, index, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, primaryText, secondaryText, selected, startIconId, target, text, title, tooltip, }: ListItemProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [
@@ -28,6 +28,7 @@
   "dependencies": {
     "@material-ui/lab": "4.0.0-alpha.56",
     "@material-ui/core": "4.12.3",
+    "react-dropzone": "^11.4.2",
     "styled-components": "^5.2.1"
   },
   "peerDependencies": {