@digital-ai/dot-components 1.3.4 → 1.3.5

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/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,3 @@ 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';

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

@@ -27,8 +27,12 @@ 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;
     /** 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, 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, placeholder, readOnly, required, rows, rowsMax, startIcon, size, type, value, warning, }: InputTextProps) => JSX.Element;

package/package.json

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