@maif/react-forms 1.1.0 → 1.1.1

package/lib/esm/index.js

@@ -27958,27 +27958,46 @@ const usePrevious = (value) => {
     // Return previous value (happens before update in useEffect above)
     return ref.current;
 };
-const BasicWrapper = ({ entry, className, help, children, render, functionalProperty, label }) => {
+const BasicWrapper = ({ entry, children, render, functionalProperty, step }) => {
+    const { formState, watch } = useFormContext();
+    console.debug({ entry, step });
     if (typeof entry === 'object') {
         return children;
     }
-    const computedLabel = functionalProperty(entry, label === null ? null : label || entry);
+    const visibleStep = option(step)
+        .map(s => s.visible)
+        .map(visible => {
+        let value;
+        switch (typeof visible) {
+            case 'object':
+                value = watch(visible.ref);
+                return option(visible.test).map(test => test(value)).getOrElse(value);
+            case 'boolean':
+                return visible;
+            default:
+                return true;
+        }
+    })
+        .getOrElse(true);
+    if (!visibleStep) {
+        return null;
+    }
+    const computedLabel = functionalProperty(entry, (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry);
     const id = v4();
-    const { formState } = useFormContext();
     // FIXME not sure it works as intended with more two or more parts
     const error = entry.split('.').reduce((acc, curr) => acc && acc[curr], formState.errors);
     const isDirty = entry.split('.').reduce((acc, curr) => acc && acc[curr], formState.dirtyFields);
     const isTouched = entry.split('.').reduce((acc, curr) => acc && acc[curr], formState.touchedFields);
     const errorDisplayed = formState.isSubmitted || isDirty || isTouched;
     if (render) {
-        return render({ entry, label: computedLabel, error, help, children });
+        return render({ entry, label: computedLabel, error, help: step === null || step === void 0 ? void 0 : step.help, children });
     }
     return (React__default.createElement("div", { className: 'mrf-mt_10', style: { position: 'relative' } },
         computedLabel && React__default.createElement("label", { className: 'mrf-flex mrf-ai_center mrf-mb_5', htmlFor: entry },
             React__default.createElement("span", null, computedLabel),
-            help && React__default.createElement(React__default.Fragment, null,
+            (step === null || step === void 0 ? void 0 : step.help) && React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(ReactToolTip, { html: true, place: 'bottom', id: id }),
-                React__default.createElement("span", { className: 'mrf-flex mrf-ai_center', "data-html": true, "data-tip": help, "data-for": id },
+                React__default.createElement("span", { className: 'mrf-flex mrf-ai_center', "data-html": true, "data-tip": step === null || step === void 0 ? void 0 : step.help, "data-for": id },
                     React__default.createElement(HelpCircle, { style: { color: 'gray', width: 17, marginLeft: '.5rem', cursor: 'help' } })))),
         children,
         error && React__default.createElement("div", { className: classNames('mrf-feedback', { ['mrf-txt_red']: !!errorDisplayed }) }, error.message)));
@@ -28167,6 +28186,7 @@ const Form = React__default.forwardRef(function Form({ schema, flow, value, inpu
         trigger,
         methods: Object.assign(Object.assign({}, methods), { data: () => cleanOutputArray(getValues(), schema) })
     }));
+    console.debug({ formFlow });
     return (React__default.createElement(FormProvider, Object.assign({}, methods),
         React__default.createElement(Watcher, { options: options, control: methods.control, schema: schema, onSubmit: onSubmit, handleSubmit: handleSubmit }),
         React__default.createElement("form", { className: className || `mrf-pr_15 mrf-w_100`, onSubmit: handleSubmit(data => {
@@ -28179,25 +28199,7 @@ const Form = React__default.forwardRef(function Form({ schema, flow, value, inpu
                     console.error(`no step found for the entry "${entry}" in the given schema. Your form might not work properly. Please fix it`);
                     return null;
                 }
-                const visibleStep = option(step)
-                    .map((s) => s.visible)
-                    .map((visible) => {
-                    let value;
-                    switch (typeof visible) {
-                        case 'object':
-                            value = getValues(visible.ref);
-                            return option(visible.test).map(test => test(value, idx)).getOrElse(value);
-                        case 'boolean':
-                            return visible;
-                        default:
-                            return true;
-                    }
-                })
-                    .getOrElse(true);
-                if (!visibleStep) {
-                    return null;
-                }
-                return (React__default.createElement(BasicWrapper, { key: `${entry}-${idx}`, entry: entry, functionalProperty: functionalProperty, label: step === null || step === void 0 ? void 0 : step.label, help: step === null || step === void 0 ? void 0 : step.help, render: inputWrapper },
+                return (React__default.createElement(BasicWrapper, { key: `${entry}-${idx}`, entry: entry, functionalProperty: functionalProperty, render: inputWrapper, step: step },
                     React__default.createElement(Step, { key: idx, entry: entry, step: step, schema: schema, inputWrapper: inputWrapper, httpClient: maybeCustomHttpClient, functionalProperty: functionalProperty })));
             }),
             React__default.createElement(Footer, { render: footer, reset: () => reset(defaultValues), valid: handleSubmit(data => onSubmit(cleanOutputArray(data, schema)), onError), actions: options.actions }))));
@@ -28224,25 +28226,7 @@ const Step = (props) => {
                 console.error(`no step found for the entry "${en}" in the given schema. Your form might not work properly. Please fix it`);
                 return null;
             }
-            const visibleStep = option(stp)
-                .map(s => s.visible)
-                .map(visible => {
-                let value;
-                switch (typeof visible) {
-                    case 'object':
-                        value = getValues(visible.ref);
-                        return option(visible.test).map(test => test(value, index)).getOrElse(value);
-                    case 'boolean':
-                        return visible;
-                    default:
-                        return true;
-                }
-            })
-                .getOrElse(true);
-            if (!visibleStep) {
-                return null;
-            }
-            return (React__default.createElement(BasicWrapper, { key: `collapse-${en}-${entryIdx}`, entry: en, functionalProperty: functionalProperty, label: stp === null || stp === void 0 ? void 0 : stp.label, help: stp === null || stp === void 0 ? void 0 : stp.help, render: inputWrapper },
+            return (React__default.createElement(BasicWrapper, { key: `collapse-${en}-${entryIdx}`, entry: en, functionalProperty: functionalProperty, step: stp, render: inputWrapper },
                 React__default.createElement(Step, { entry: en, step: stp, schema: schema, inputWrapper: inputWrapper, httpClient: httpClient, defaultValue: stp === null || stp === void 0 ? void 0 : stp.defaultValue, functionalProperty: functionalProperty })));
         })));
     }
@@ -28444,29 +28428,15 @@ const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient,
     }, [schemaAndFlow.schema]);
     const computedSandF = schemaAndFlow.flow.reduce((acc, entry) => {
         const step = (typeof entry === "string") ? schemaAndFlow.schema[entry] : schemaAndFlow.schema[entry.label];
-        const visibleStep = option(step)
-            .map(s => s.visible)
-            .map(visible => {
-            switch (typeof visible) {
-                case 'object':
-                    const value = watch(visible.ref);
-                    return option(visible.test).map(test => test(value, index)).getOrElse(value);
-                case 'boolean':
-                    return visible;
-                default:
-                    return true;
-            }
-        })
-            .getOrElse(true);
-        return [...acc, { step, visibleStep, entry }];
+        return [...acc, { step, entry }];
     }, []);
-    const bordered = computedSandF.filter(x => x.visibleStep).length >= 1 && step.label !== null;
+    const bordered = computedSandF.length >= 1 && step.label !== null;
     return (React__default.createElement("div", { className: classNames({ ['mrf-nestedform__border']: bordered, ['mrf-border__error']: !!errorDisplayed }), style: { position: 'relative' } },
         !!step.collapsable && schemaAndFlow.flow.length > 1 && collapsed &&
             React__default.createElement(ChevronDown, { size: 30, className: 'mrf-cursor_pointer', style: { position: 'absolute', top: -35, right: 0, zIndex: 100 }, strokeWidth: "2", onClick: () => setCollapsed(!collapsed) }),
         !!step.collapsable && schemaAndFlow.flow.length > 1 && !collapsed &&
             React__default.createElement(ChevronUp, { size: 30, className: 'mrf-cursor_pointer', style: { position: 'absolute', top: -35, right: 0, zIndex: 100 }, strokeWidth: "2", onClick: () => setCollapsed(!collapsed) }),
-        computedSandF.map(({ step, visibleStep, entry }, idx) => {
+        computedSandF.map(({ step, entry }, idx) => {
             if (!step && typeof entry === 'string') {
                 console.error(`no step found for the entry "${entry}" in the given schema. Your form might not work properly. Please fix it`);
                 return null;
@@ -28479,30 +28449,12 @@ const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient,
                         console.error(`no step found for the entry "${en}" in the given schema. Your form might not work properly. Please fix it`);
                         return null;
                     }
-                    const visibleStep = option(stp)
-                        .map(s => s.visible)
-                        .map(visible => {
-                        let value;
-                        switch (typeof visible) {
-                            case 'object':
-                                value = getValues(visible.ref);
-                                return option(visible.test).map(test => test(value, index)).getOrElse(value);
-                            case 'boolean':
-                                return visible;
-                            default:
-                                return true;
-                        }
-                    })
-                        .getOrElse(true);
-                    if (!visibleStep) {
-                        return null;
-                    }
-                    return (React__default.createElement(BasicWrapper, { key: `collapse-${en}-${entryIdx}`, entry: en, functionalProperty: functionalProperty, label: (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry, help: stp === null || stp === void 0 ? void 0 : stp.help, render: inputWrapper },
+                    return (React__default.createElement(BasicWrapper, { key: `collapse-${en}-${entryIdx}`, entry: en, functionalProperty: functionalProperty, step: stp, render: inputWrapper },
                         React__default.createElement(Step, { entry: en, step: stp, schema: schema, inputWrapper: inputWrapper, httpClient: maybeCustomHttpClient, defaultValue: stp === null || stp === void 0 ? void 0 : stp.defaultValue, functionalProperty: functionalProperty })));
                 }));
                 // TODO return collapse, then entry will always be a string in below return
             }
-            return (React__default.createElement(BasicWrapper, { key: `${entry}.${idx}`, className: classNames({ ['mrf-display__none']: (collapsed && !step.visibleOnCollapse) || !visibleStep }), entry: `${parent}.${entry}`, functionalProperty: functionalProperty, label: (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry, help: step.help, render: inputWrapper },
+            return (React__default.createElement(BasicWrapper, { key: `${entry}.${idx}`, className: classNames({ ['mrf-display__none']: (collapsed && !step.visibleOnCollapse) }), entry: `${parent}.${entry}`, functionalProperty: functionalProperty, step: step, render: inputWrapper },
                 React__default.createElement(Step, { key: `step.${entry}.${idx}`, entry: `${parent}.${entry}`, realEntry: entry, step: schemaAndFlow.schema[entry], parent: parent, schema: schemaAndFlow.schema, inputWrapper: inputWrapper, httpClient: maybeCustomHttpClient, defaultValue: value && value[entry], functionalProperty: functionalProperty })));
         })));
 };

package/lib/index.d.ts

@@ -0,0 +1,358 @@
+/// <reference types="react" />
+import * as yup_lib_types from 'yup/lib/types';
+import * as yup from 'yup';
+import { AnySchema, StringSchema, NumberSchema, ArraySchema, TestFunction } from 'yup';
+import Reference from 'yup/lib/Reference';
+import * as yup_lib_object from 'yup/lib/object';
+import React from 'react';
+
+declare const type: {
+    readonly string: "string";
+    readonly number: "number";
+    readonly bool: "bool";
+    readonly date: "date";
+    readonly object: "object";
+    readonly file: "file";
+    readonly json: "json";
+};
+declare let typeValues: ("string" | "number" | "object" | "json" | "bool" | "date" | "file")[];
+declare type Type = typeof typeValues[number];
+
+declare const format: {
+    readonly array: "array";
+    readonly select: "select";
+    readonly code: "code";
+    readonly markdown: "markdown";
+    readonly text: "textarea";
+    readonly textarea: "textarea";
+    readonly email: "email";
+    readonly password: "password";
+    readonly hidden: "hidden";
+    readonly form: "form";
+    readonly buttonsSelect: "buttons";
+    readonly singleLineCode: "singleLineCode";
+};
+declare let formatValues: ("markdown" | "email" | "array" | "select" | "code" | "textarea" | "password" | "hidden" | "form" | "buttons" | "singleLineCode")[];
+declare type Format = typeof formatValues[number];
+
+declare type Constraint = (resolver: any, key: string, dependencies: any[]) => AnySchema;
+declare type NumberRef = Reference<number> | number;
+declare const required: (message?: string) => (r: AnySchema) => any;
+declare const url: (message?: string) => (r: StringSchema) => yup.StringSchema<string | undefined, yup_lib_types.AnyObject, string | undefined>;
+declare const email: (message?: string) => (r: StringSchema) => yup.StringSchema<string | undefined, yup_lib_types.AnyObject, string | undefined>;
+declare const uuid: (message?: string) => (r: StringSchema) => yup.StringSchema<string | undefined, yup_lib_types.AnyObject, string | undefined>;
+declare const matches: (regexp?: RegExp, message?: string) => (r: StringSchema) => yup.StringSchema<string | undefined, yup_lib_types.AnyObject, string | undefined>;
+declare const min: (ref: NumberRef, message?: string) => (r: StringSchema | NumberSchema) => yup.StringSchema<string | undefined, yup_lib_types.AnyObject, string | undefined> | yup.NumberSchema<number | undefined, yup_lib_types.AnyObject, number | undefined>;
+declare const max: (ref: NumberRef, message?: string) => (r: StringSchema | NumberSchema) => yup.StringSchema<string | undefined, yup_lib_types.AnyObject, string | undefined> | yup.NumberSchema<number | undefined, yup_lib_types.AnyObject, number | undefined>;
+declare const positive: (message?: string) => (r: NumberSchema) => yup.NumberSchema<number | undefined, yup_lib_types.AnyObject, number | undefined>;
+declare const negative: (message?: string) => (r: NumberSchema) => yup.NumberSchema<number | undefined, yup_lib_types.AnyObject, number | undefined>;
+declare const integer: (message?: string) => (r: NumberSchema) => yup.NumberSchema<number | undefined, yup_lib_types.AnyObject, number | undefined>;
+declare const lessThan: (ref: NumberRef, message?: string) => (r: NumberSchema, key: any, dependencies: Array<[any, Reference]>) => yup.NumberSchema<number | undefined, yup_lib_types.AnyObject, number | undefined>;
+declare const moreThan: (ref: NumberRef, message?: string) => (r: NumberSchema, key: any, dependencies: Array<[any, Reference]>) => yup.NumberSchema<number | undefined, yup_lib_types.AnyObject, number | undefined>;
+declare const length: (ref: NumberRef, message?: string) => (r: ArraySchema<any>) => yup.ArraySchema<any, yup_lib_types.AnyObject, any[] | undefined, any[] | undefined>;
+declare const supportedFormat: (arrayOfValues: string[], message?: string) => (r: AnySchema) => yup.AnySchema<any, any, any>;
+declare const unsupportedFormat: (arrayOfValues: string[], message?: string) => (r: AnySchema) => yup.AnySchema<any, any, any>;
+declare const maxSize: (ref: Reference, message?: string) => (r: AnySchema) => yup.AnySchema<any, any, any>;
+declare const test: (name: string, message: string | undefined, test: TestFunction<any, object>) => (r: AnySchema) => yup.AnySchema<any, any, any>;
+declare const when: (ref: string, test: TestFunction<any, object>, then?: Constraint[], otherwise?: Constraint[]) => (r: AnySchema, key: string, dependencies: any[]) => yup.AnySchema<any, any, any>;
+declare const oneOf: (arrayOfValues: any[], message?: string) => (r: AnySchema) => yup.AnySchema<any, any, any>;
+declare const blacklist: (arrayOfValues: any[], message?: string) => (r: AnySchema) => yup.AnySchema<any, any, any>;
+declare const ref: (ref: string) => Reference<unknown>;
+declare const jsonConstraints: Record<string, any>;
+declare type TConstraintType = keyof typeof jsonConstraints;
+
+type constraints_d_Constraint = Constraint;
+declare const constraints_d_required: typeof required;
+declare const constraints_d_url: typeof url;
+declare const constraints_d_email: typeof email;
+declare const constraints_d_uuid: typeof uuid;
+declare const constraints_d_matches: typeof matches;
+declare const constraints_d_min: typeof min;
+declare const constraints_d_max: typeof max;
+declare const constraints_d_positive: typeof positive;
+declare const constraints_d_negative: typeof negative;
+declare const constraints_d_integer: typeof integer;
+declare const constraints_d_lessThan: typeof lessThan;
+declare const constraints_d_moreThan: typeof moreThan;
+declare const constraints_d_length: typeof length;
+declare const constraints_d_supportedFormat: typeof supportedFormat;
+declare const constraints_d_unsupportedFormat: typeof unsupportedFormat;
+declare const constraints_d_maxSize: typeof maxSize;
+declare const constraints_d_test: typeof test;
+declare const constraints_d_when: typeof when;
+declare const constraints_d_oneOf: typeof oneOf;
+declare const constraints_d_blacklist: typeof blacklist;
+declare const constraints_d_ref: typeof ref;
+declare const constraints_d_jsonConstraints: typeof jsonConstraints;
+type constraints_d_TConstraintType = TConstraintType;
+declare namespace constraints_d {
+  export {
+    constraints_d_Constraint as Constraint,
+    constraints_d_required as required,
+    constraints_d_url as url,
+    constraints_d_email as email,
+    constraints_d_uuid as uuid,
+    constraints_d_matches as matches,
+    constraints_d_min as min,
+    constraints_d_max as max,
+    constraints_d_positive as positive,
+    constraints_d_negative as negative,
+    constraints_d_integer as integer,
+    constraints_d_lessThan as lessThan,
+    constraints_d_moreThan as moreThan,
+    constraints_d_length as length,
+    constraints_d_supportedFormat as supportedFormat,
+    constraints_d_unsupportedFormat as unsupportedFormat,
+    constraints_d_maxSize as maxSize,
+    constraints_d_test as test,
+    constraints_d_when as when,
+    constraints_d_oneOf as oneOf,
+    constraints_d_blacklist as blacklist,
+    constraints_d_ref as ref,
+    constraints_d_jsonConstraints as jsonConstraints,
+    constraints_d_TConstraintType as TConstraintType,
+  };
+}
+
+interface PropType {
+    onChange?: (v: boolean) => void;
+    value?: boolean;
+    readOnly?: boolean;
+}
+declare const BooleanInput: React.ForwardRefExoticComponent<PropType & React.RefAttributes<HTMLInputElement>>;
+
+declare const Collapse: (props: {
+    initCollapsed?: boolean;
+    collapsed?: boolean;
+    errored: boolean;
+    label?: React.ReactNode;
+    inline?: any;
+    children: React.ReactNode;
+    lineEnd?: boolean;
+}) => JSX.Element;
+
+declare type SelectOption = {
+    label: string;
+    value: any;
+};
+declare const SelectInput: <T extends {
+    [x: string]: any;
+}>(props: {
+    possibleValues: T[];
+    transformer?: {
+        label: string;
+        value: string;
+    } | ((v: T) => SelectOption) | undefined;
+    value?: any;
+    defaultValue?: any;
+    isMulti?: boolean | undefined;
+    optionsFrom: string | Promise<T[]> | ((param: {
+        rawValues: object;
+        value: any;
+    }) => string | Promise<T[]>);
+    fetchCondition?: (() => boolean) | undefined;
+    id?: string | undefined;
+    httpClient?: ((url: string, method: string) => Promise<Response>) | undefined;
+    onChange?: ((options: any[] | any) => void) | undefined;
+    onCreateOption?: ((option: string) => T) | undefined;
+    buttons: boolean;
+    disabled?: boolean | undefined;
+    createOption?: boolean | undefined;
+    label?: string | undefined;
+    placeholder?: React.ReactNode;
+    className: string;
+}) => JSX.Element;
+
+declare type InternalState = {
+    [x: string]: {
+        key: string;
+        value: any;
+    };
+};
+declare const ObjectInput: (props: {
+    value?: object | undefined;
+    onChange?: ((value: InternalState) => void) | undefined;
+    defaultKeyValue?: {
+        key: string;
+        value: string;
+    } | undefined;
+    className: string;
+    disabled?: boolean | undefined;
+    placeholderKey?: string | undefined;
+    placeholderValue?: string | undefined;
+}) => JSX.Element;
+
+declare type LanguageMode = "javascript" | "css" | "json" | "html" | "markdown";
+
+declare function CodeInput({ onChange, value, mode, tabSize, readOnly, showLinesNumber, highlightLine, themeStyle, setRef }: {
+    onChange?: (v: string) => void;
+    value?: string;
+    mode?: LanguageMode;
+    tabSize?: number;
+    readOnly?: boolean;
+    showLinesNumber?: boolean;
+    highlightLine?: boolean;
+    themeStyle?: {
+        height: string;
+        minHeight: string;
+        maxHeight: string;
+        width: string;
+        minWidth: string;
+        maxWidth: string;
+    };
+    setRef?: (editor: any) => void;
+}): JSX.Element;
+
+declare const MarkdownInput: (props: {
+    value?: string | undefined;
+    preview?: boolean | undefined;
+    className: string;
+    readOnly?: boolean | undefined;
+    onChange?: ((value: string) => void) | undefined;
+}) => JSX.Element;
+
+declare function SingleLineCode({ onChange, value, mode, tabSize, readOnly, showLinesNumber, highlightLine, themeStyle }: {
+    onChange?: (newValue: string) => void;
+    value?: string;
+    mode?: LanguageMode;
+    tabSize?: number;
+    readOnly?: boolean;
+    showLinesNumber?: boolean;
+    highlightLine?: boolean;
+    themeStyle?: {
+        height: string;
+        minHeight: string;
+        maxHeight: string;
+        width: string;
+        minWidth: string;
+        maxWidth: string;
+    };
+}): JSX.Element;
+
+interface OptionActionItem {
+    display?: boolean;
+    label?: string;
+}
+interface OptionActions {
+    reset?: OptionActionItem;
+    submit?: OptionActionItem;
+}
+declare type HttpClient = (url: string, method: string) => Promise<Response>;
+interface Option {
+    httpClient?: HttpClient;
+    watch?: boolean | ((param: any) => void);
+    autosubmit?: boolean;
+    actions?: OptionActions;
+    showErrorsOnStart?: boolean;
+}
+interface Schema {
+    [key: string]: SchemaEntry;
+}
+declare type SchemaRenderType = ({ rawValues, value, onChange, error, setValue, parent }: {
+    rawValues?: any;
+    value?: any;
+    onChange?: (param: object) => void;
+    error?: boolean;
+    parent?: string;
+    setValue?: (data: any) => void;
+}) => JSX.Element;
+interface ConditionnalSchemaElement {
+    default?: boolean;
+    condition?: ({ rawValues, ref }: {
+        rawValues: {
+            [x: string]: any;
+        };
+        ref: any;
+    }) => boolean | any;
+    schema: Schema;
+    flow: Array<FlowObject | string>;
+}
+interface ConditionnalSchema {
+    ref: string;
+    switch: ConditionnalSchemaElement[];
+}
+interface SchemaEntry {
+    schema?: Schema;
+    type: Type;
+    format?: Format;
+    array?: boolean;
+    createOption?: boolean;
+    onCreateOption?: (option: string) => any;
+    isMulti?: boolean;
+    defaultKeyValue?: object;
+    visible?: boolean | {
+        ref: string;
+        test: (b: any, idx?: number) => boolean;
+    };
+    disabled?: boolean | ((prop: {
+        rawValues: {
+            [x: string]: any;
+        };
+        value: any;
+    }) => boolean);
+    label?: React.ReactNode | ((prop: {
+        rawValues: {
+            [x: string]: any;
+        };
+        value: any;
+    }) => React.ReactNode);
+    placeholder?: string;
+    defaultValue?: any;
+    help?: string;
+    className?: string;
+    style?: object;
+    onChange?: (param: object) => void;
+    render: SchemaRenderType;
+    itemRender?: SchemaRenderType;
+    props: object;
+    options: Array<any | {
+        label: string;
+        value: any;
+    }>;
+    optionsFrom: string;
+    transformer: ((v: any) => SelectOption) | {
+        label: string;
+        value: string;
+    };
+    conditionalSchema: ConditionnalSchema;
+    constraints: Array<Constraint | {
+        type: TConstraintType;
+        message?: string;
+    }>;
+    flow: Array<string | FlowObject>;
+    onAfterChange?: (obj: {
+        entry: string;
+        value: object;
+        rawValues: object;
+        previousValue?: object;
+        getValue: (entry: string) => any;
+        setValue: (entry: string, value: any) => void;
+        onChange: (v: any) => void;
+    }) => void;
+    visibleOnCollapse?: boolean;
+    addableDefaultValue: any;
+    collapsed?: boolean;
+    collapsable?: boolean;
+}
+interface FlowObject {
+    label: string;
+    flow: Flow;
+    collapse: boolean;
+}
+declare type Flow = Array<string | FlowObject>;
+declare const validate: (flow: string[], schema: Schema, value: object) => Promise<yup_lib_object.AssertsShape<yup_lib_object.Assign<yup_lib_object.ObjectShape, yup_lib_object.ObjectShape>>>;
+declare const Form: React.ForwardRefExoticComponent<{
+    schema: Schema;
+    flow: Array<string | FlowObject>;
+    value?: object | undefined;
+    inputWrapper?: ((props: object) => JSX.Element) | undefined;
+    onSubmit: (obj: object) => void;
+    onError?: (() => void) | undefined;
+    footer?: ((props: object) => JSX.Element) | undefined;
+    style?: object | undefined;
+    className?: string | undefined;
+    options?: Option | undefined;
+    nostyle: boolean;
+} & React.RefAttributes<unknown>>;
+
+export { BooleanInput, CodeInput, Collapse, ConditionnalSchema, Flow, Form, Format, MarkdownInput, ObjectInput, Schema, SchemaEntry, SelectInput, SelectOption, SingleLineCode, Type, constraints_d as constraints, format, type, validate };

package/lib/index.js

@@ -27993,27 +27993,46 @@ const usePrevious = (value) => {
     // Return previous value (happens before update in useEffect above)
     return ref.current;
 };
-const BasicWrapper = ({ entry, className, help, children, render, functionalProperty, label }) => {
+const BasicWrapper = ({ entry, children, render, functionalProperty, step }) => {
+    const { formState, watch } = reactHookForm.useFormContext();
+    console.debug({ entry, step });
     if (typeof entry === 'object') {
         return children;
     }
-    const computedLabel = functionalProperty(entry, label === null ? null : label || entry);
+    const visibleStep = option(step)
+        .map(s => s.visible)
+        .map(visible => {
+        let value;
+        switch (typeof visible) {
+            case 'object':
+                value = watch(visible.ref);
+                return option(visible.test).map(test => test(value)).getOrElse(value);
+            case 'boolean':
+                return visible;
+            default:
+                return true;
+        }
+    })
+        .getOrElse(true);
+    if (!visibleStep) {
+        return null;
+    }
+    const computedLabel = functionalProperty(entry, (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry);
     const id = uuid$1.v4();
-    const { formState } = reactHookForm.useFormContext();
     // FIXME not sure it works as intended with more two or more parts
     const error = entry.split('.').reduce((acc, curr) => acc && acc[curr], formState.errors);
     const isDirty = entry.split('.').reduce((acc, curr) => acc && acc[curr], formState.dirtyFields);
     const isTouched = entry.split('.').reduce((acc, curr) => acc && acc[curr], formState.touchedFields);
     const errorDisplayed = formState.isSubmitted || isDirty || isTouched;
     if (render) {
-        return render({ entry, label: computedLabel, error, help, children });
+        return render({ entry, label: computedLabel, error, help: step === null || step === void 0 ? void 0 : step.help, children });
     }
     return (React__default["default"].createElement("div", { className: 'mrf-mt_10', style: { position: 'relative' } },
         computedLabel && React__default["default"].createElement("label", { className: 'mrf-flex mrf-ai_center mrf-mb_5', htmlFor: entry },
             React__default["default"].createElement("span", null, computedLabel),
-            help && React__default["default"].createElement(React__default["default"].Fragment, null,
+            (step === null || step === void 0 ? void 0 : step.help) && React__default["default"].createElement(React__default["default"].Fragment, null,
                 React__default["default"].createElement(ReactToolTip__default["default"], { html: true, place: 'bottom', id: id }),
-                React__default["default"].createElement("span", { className: 'mrf-flex mrf-ai_center', "data-html": true, "data-tip": help, "data-for": id },
+                React__default["default"].createElement("span", { className: 'mrf-flex mrf-ai_center', "data-html": true, "data-tip": step === null || step === void 0 ? void 0 : step.help, "data-for": id },
                     React__default["default"].createElement(reactFeather.HelpCircle, { style: { color: 'gray', width: 17, marginLeft: '.5rem', cursor: 'help' } })))),
         children,
         error && React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-feedback', { ['mrf-txt_red']: !!errorDisplayed }) }, error.message)));
@@ -28202,6 +28221,7 @@ const Form = React__default["default"].forwardRef(function Form({ schema, flow,
         trigger,
         methods: Object.assign(Object.assign({}, methods), { data: () => cleanOutputArray(getValues(), schema) })
     }));
+    console.debug({ formFlow });
     return (React__default["default"].createElement(reactHookForm.FormProvider, Object.assign({}, methods),
         React__default["default"].createElement(Watcher, { options: options, control: methods.control, schema: schema, onSubmit: onSubmit, handleSubmit: handleSubmit }),
         React__default["default"].createElement("form", { className: className || `mrf-pr_15 mrf-w_100`, onSubmit: handleSubmit(data => {
@@ -28214,25 +28234,7 @@ const Form = React__default["default"].forwardRef(function Form({ schema, flow,
                     console.error(`no step found for the entry "${entry}" in the given schema. Your form might not work properly. Please fix it`);
                     return null;
                 }
-                const visibleStep = option(step)
-                    .map((s) => s.visible)
-                    .map((visible) => {
-                    let value;
-                    switch (typeof visible) {
-                        case 'object':
-                            value = getValues(visible.ref);
-                            return option(visible.test).map(test => test(value, idx)).getOrElse(value);
-                        case 'boolean':
-                            return visible;
-                        default:
-                            return true;
-                    }
-                })
-                    .getOrElse(true);
-                if (!visibleStep) {
-                    return null;
-                }
-                return (React__default["default"].createElement(BasicWrapper, { key: `${entry}-${idx}`, entry: entry, functionalProperty: functionalProperty, label: step === null || step === void 0 ? void 0 : step.label, help: step === null || step === void 0 ? void 0 : step.help, render: inputWrapper },
+                return (React__default["default"].createElement(BasicWrapper, { key: `${entry}-${idx}`, entry: entry, functionalProperty: functionalProperty, render: inputWrapper, step: step },
                     React__default["default"].createElement(Step, { key: idx, entry: entry, step: step, schema: schema, inputWrapper: inputWrapper, httpClient: maybeCustomHttpClient, functionalProperty: functionalProperty })));
             }),
             React__default["default"].createElement(Footer, { render: footer, reset: () => reset(defaultValues), valid: handleSubmit(data => onSubmit(cleanOutputArray(data, schema)), onError), actions: options.actions }))));
@@ -28259,25 +28261,7 @@ const Step = (props) => {
                 console.error(`no step found for the entry "${en}" in the given schema. Your form might not work properly. Please fix it`);
                 return null;
             }
-            const visibleStep = option(stp)
-                .map(s => s.visible)
-                .map(visible => {
-                let value;
-                switch (typeof visible) {
-                    case 'object':
-                        value = getValues(visible.ref);
-                        return option(visible.test).map(test => test(value, index)).getOrElse(value);
-                    case 'boolean':
-                        return visible;
-                    default:
-                        return true;
-                }
-            })
-                .getOrElse(true);
-            if (!visibleStep) {
-                return null;
-            }
-            return (React__default["default"].createElement(BasicWrapper, { key: `collapse-${en}-${entryIdx}`, entry: en, functionalProperty: functionalProperty, label: stp === null || stp === void 0 ? void 0 : stp.label, help: stp === null || stp === void 0 ? void 0 : stp.help, render: inputWrapper },
+            return (React__default["default"].createElement(BasicWrapper, { key: `collapse-${en}-${entryIdx}`, entry: en, functionalProperty: functionalProperty, step: stp, render: inputWrapper },
                 React__default["default"].createElement(Step, { entry: en, step: stp, schema: schema, inputWrapper: inputWrapper, httpClient: httpClient, defaultValue: stp === null || stp === void 0 ? void 0 : stp.defaultValue, functionalProperty: functionalProperty })));
         })));
     }
@@ -28479,29 +28463,15 @@ const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient,
     }, [schemaAndFlow.schema]);
     const computedSandF = schemaAndFlow.flow.reduce((acc, entry) => {
         const step = (typeof entry === "string") ? schemaAndFlow.schema[entry] : schemaAndFlow.schema[entry.label];
-        const visibleStep = option(step)
-            .map(s => s.visible)
-            .map(visible => {
-            switch (typeof visible) {
-                case 'object':
-                    const value = watch(visible.ref);
-                    return option(visible.test).map(test => test(value, index)).getOrElse(value);
-                case 'boolean':
-                    return visible;
-                default:
-                    return true;
-            }
-        })
-            .getOrElse(true);
-        return [...acc, { step, visibleStep, entry }];
+        return [...acc, { step, entry }];
     }, []);
-    const bordered = computedSandF.filter(x => x.visibleStep).length >= 1 && step.label !== null;
+    const bordered = computedSandF.length >= 1 && step.label !== null;
     return (React__default["default"].createElement("div", { className: classNames__default["default"]({ ['mrf-nestedform__border']: bordered, ['mrf-border__error']: !!errorDisplayed }), style: { position: 'relative' } },
         !!step.collapsable && schemaAndFlow.flow.length > 1 && collapsed &&
             React__default["default"].createElement(reactFeather.ChevronDown, { size: 30, className: 'mrf-cursor_pointer', style: { position: 'absolute', top: -35, right: 0, zIndex: 100 }, strokeWidth: "2", onClick: () => setCollapsed(!collapsed) }),
         !!step.collapsable && schemaAndFlow.flow.length > 1 && !collapsed &&
             React__default["default"].createElement(reactFeather.ChevronUp, { size: 30, className: 'mrf-cursor_pointer', style: { position: 'absolute', top: -35, right: 0, zIndex: 100 }, strokeWidth: "2", onClick: () => setCollapsed(!collapsed) }),
-        computedSandF.map(({ step, visibleStep, entry }, idx) => {
+        computedSandF.map(({ step, entry }, idx) => {
             if (!step && typeof entry === 'string') {
                 console.error(`no step found for the entry "${entry}" in the given schema. Your form might not work properly. Please fix it`);
                 return null;
@@ -28514,30 +28484,12 @@ const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient,
                         console.error(`no step found for the entry "${en}" in the given schema. Your form might not work properly. Please fix it`);
                         return null;
                     }
-                    const visibleStep = option(stp)
-                        .map(s => s.visible)
-                        .map(visible => {
-                        let value;
-                        switch (typeof visible) {
-                            case 'object':
-                                value = getValues(visible.ref);
-                                return option(visible.test).map(test => test(value, index)).getOrElse(value);
-                            case 'boolean':
-                                return visible;
-                            default:
-                                return true;
-                        }
-                    })
-                        .getOrElse(true);
-                    if (!visibleStep) {
-                        return null;
-                    }
-                    return (React__default["default"].createElement(BasicWrapper, { key: `collapse-${en}-${entryIdx}`, entry: en, functionalProperty: functionalProperty, label: (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry, help: stp === null || stp === void 0 ? void 0 : stp.help, render: inputWrapper },
+                    return (React__default["default"].createElement(BasicWrapper, { key: `collapse-${en}-${entryIdx}`, entry: en, functionalProperty: functionalProperty, step: stp, render: inputWrapper },
                         React__default["default"].createElement(Step, { entry: en, step: stp, schema: schema, inputWrapper: inputWrapper, httpClient: maybeCustomHttpClient, defaultValue: stp === null || stp === void 0 ? void 0 : stp.defaultValue, functionalProperty: functionalProperty })));
                 }));
                 // TODO return collapse, then entry will always be a string in below return
             }
-            return (React__default["default"].createElement(BasicWrapper, { key: `${entry}.${idx}`, className: classNames__default["default"]({ ['mrf-display__none']: (collapsed && !step.visibleOnCollapse) || !visibleStep }), entry: `${parent}.${entry}`, functionalProperty: functionalProperty, label: (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry, help: step.help, render: inputWrapper },
+            return (React__default["default"].createElement(BasicWrapper, { key: `${entry}.${idx}`, className: classNames__default["default"]({ ['mrf-display__none']: (collapsed && !step.visibleOnCollapse) }), entry: `${parent}.${entry}`, functionalProperty: functionalProperty, step: step, render: inputWrapper },
                 React__default["default"].createElement(Step, { key: `step.${entry}.${idx}`, entry: `${parent}.${entry}`, realEntry: entry, step: schemaAndFlow.schema[entry], parent: parent, schema: schemaAndFlow.schema, inputWrapper: inputWrapper, httpClient: maybeCustomHttpClient, defaultValue: value && value[entry], functionalProperty: functionalProperty })));
         })));
 };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@maif/react-forms",
   "description": "Build react safe forms as fast as possible",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "main": "lib/index.js",
   "module": "lib/esm/index.js",
-  "types": "lib/index.js",
+  "types": "lib/index.d.ts",
   "source": "src/index.ts",
   "author": "MAIF team",
   "keywords": [
@@ -32,8 +32,8 @@
     "README.md"
   ],
   "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c -w",
+    "build": "tsc --emitDeclarationOnly && rollup -c",
+    "dev": "tsc --emitDeclarationOnly && rollup -c -w",
     "test": "jest",
     "tdd": "jest --watch"
   },
@@ -68,6 +68,13 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-typescript": "^8.3.2",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^26.0.24",
+    "@types/node": "^16.3.0",
+    "@types/react": "^17.0.14",
+    "@types/react-dom": "^17.0.9",
     "@types/object-hash": "^2.2.1",
     "@types/showdown": "^2.0.0",
     "@types/uuid": "^8.3.4",
@@ -87,6 +94,7 @@
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-scss": "^3.0.0",
     "rollup-plugin-terser": "^7.0.2",
@@ -107,13 +115,6 @@
     "@codemirror/theme-one-dark": "^0.19.1",
     "@fortawesome/fontawesome-free": "^5.15.3",
     "@hookform/resolvers": "2.4.0",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.24",
-    "@types/node": "^16.3.0",
-    "@types/react": "^17.0.14",
-    "@types/react-dom": "^17.0.9",
     "classnames": "2.3.0",
     "fast-deep-equal": "^3.1.3",
     "highlight.js": "^11.5.1",