@cube-dev/ui-kit 0.57.0 → 0.59.0

package/cjs/components/form/Form/use-field/use-field-props.js

@@ -1,82 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFieldProps = useFieldProps;
-const react_1 = require("react");
-const react_2 = require("react");
-const index_1 = require("../../../../_internal/index");
-const Field_1 = require("../Field");
-const index_2 = require("../../../../utils/react/index");
-const warnings_1 = require("../../../../utils/warnings");
-const use_field_1 = require("./use-field");
-function useFieldProps(props, params = {}) {
-    // We use ref here to "memoize" initial value
-    const isDisabledRef = (0, react_1.useRef)(params.unsafe__isDisabled ?? false);
-    const { valuePropsMapper = ({ value, onChange }) => ({
-        value: value ?? null,
-        onChange,
-    }), defaultValidationTrigger = 'onBlur', } = params;
-    const isInsideLegacyField = (0, Field_1.useInsideLegacyField)();
-    // useWarn(isInsideLegacyField, {
-    //   key: 'use-field-props',
-    //   args: ['<Field /> is deprecated, use component without <Field /> instead.'],
-    // });
-    if (props.rules && !props.name) {
-        (0, warnings_1.warn)(`The "rules" prop is not suitable for fields that are not part of a form. Use "name" prop to link the field to a form.`);
-    }
-    if (isInsideLegacyField ||
-        isDisabledRef.current === true ||
-        props.name == null) {
-        return props;
-    }
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const field = (0, use_field_1.useField)(props, {
-        defaultValidationTrigger: params.defaultValidationTrigger,
-    });
-    const isOutsideOfForm = field?.form == null;
-    if (props.rules && isOutsideOfForm) {
-        (0, warnings_1.warn)(`The "rules" prop is not supported for fields that are not part of a form. The "${props.name}" field is placed outside the form.`);
-    }
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const onBlurChained = (0, index_1.useChainedCallback)(field?.onBlur, 'onBlur' in props ? props.onBlur : undefined);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const onChangeEvent = (0, index_1.useEvent)((value, dontTouch) => field?.onChange?.(value, dontTouch, field?.validateTrigger ?? defaultValidationTrigger));
-    const valueProps = !isOutsideOfForm
-        ? valuePropsMapper({ value: field.value, onChange: onChangeEvent })
-        : {};
-    if (isInsideLegacyField && !isOutsideOfForm) {
-        const valuePropEventNames = !isOutsideOfForm
-            ? Object.keys(valueProps).filter((name) => name.startsWith('on'))
-            : [];
-        for (const valuePropName of valuePropEventNames) {
-            if (valuePropName in props) {
-                (0, warnings_1.warn)(`The "${valuePropName}" listener is not supported for input "${props.name}" that is linked to a form via a <Field> component. Remove the <Field> component and move its properties to the input itself.`);
-            }
-        }
-    }
-    const result = isOutsideOfForm
-        ? props
-        : (0, index_2.mergeProps)(props, field, valueProps, {
-            validateTrigger: field.validateTrigger ?? defaultValidationTrigger,
-            onBlur: onBlurChained,
-        });
-    if (result.id) {
-        if (!result.labelProps) {
-            result.labelProps = {};
-        }
-        result.labelProps.for = result.id;
-    }
-    if (process.env.NODE_ENV === 'development') {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        (0, react_2.useDebugValue)(result);
-    }
-    return result;
-}
-
-        

package/cjs/components/form/Form/use-field/use-field.js

@@ -1,162 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useField = useField;
-const react_1 = require("react");
-const index_1 = require("../../../../_internal/index");
-const Form_1 = require("../Form");
-const validation_1 = require("../validation");
-const ID_MAP = {};
-function createId(name) {
-    if (!name)
-        return;
-    if (!ID_MAP[name]) {
-        ID_MAP[name] = [];
-    }
-    let i = 0;
-    let id;
-    do {
-        id = i ? `${name}_${i}` : name;
-        i++;
-    } while (ID_MAP[name].includes(id));
-    ID_MAP[name].push(id);
-    return id;
-}
-function removeId(name, id) {
-    if (!ID_MAP[name])
-        return;
-    ID_MAP[name] = ID_MAP[name].filter((_id) => _id !== id);
-}
-function useField(props, params) {
-    props = (0, Form_1.useFormProps)(props);
-    let { defaultValue, id, idPrefix, name, form, rules, message, validateTrigger = params.defaultValidationTrigger, validationState, validationDelay, showValid, shouldUpdate, } = props;
-    if (rules && rules.length && validationDelay) {
-        rules.unshift((0, validation_1.delayValidationRule)(validationDelay));
-    }
-    const nonInput = !name;
-    const fieldName = name != null ? name : '';
-    const isFirstRender = (0, index_1.useIsFirstRender)();
-    let [fieldId, setFieldId] = (0, react_1.useState)(id || (idPrefix ? `${idPrefix}_${fieldName}` : fieldName));
-    (0, react_1.useEffect)(() => {
-        let newId;
-        if (!id && !nonInput) {
-            newId = createId(fieldId);
-            setFieldId(newId);
-        }
-        return () => {
-            if (!id) {
-                removeId(idPrefix ? `${idPrefix}_${fieldName}` : fieldName, newId);
-            }
-            if (fieldName && form) {
-                form.removeField(fieldName);
-            }
-        };
-    }, [fieldName]);
-    let field = form?.getFieldInstance(fieldName);
-    if (field) {
-        field.rules = rules;
-    }
-    let isRequired = rules && !!rules.find((rule) => rule.required);
-    (0, react_1.useEffect)(() => {
-        if (!form)
-            return;
-        if (field) {
-            form.forceReRender();
-        }
-        else {
-            form.createField(fieldName);
-        }
-    }, [field]);
-    if (form) {
-        if (isFirstRender) {
-            if (!field) {
-                field = form.createField(fieldName, true);
-            }
-            if (field?.value == null && defaultValue != null) {
-                form.setFieldValue(fieldName, defaultValue, false, true);
-                form.updateInitialFieldsValue({ [fieldName]: defaultValue });
-                field = form?.getFieldInstance(fieldName);
-            }
-        }
-        if (!field?.touched && defaultValue != null) {
-            form.setFieldValue(fieldName, defaultValue, false, true);
-        }
-    }
-    const onChangeHandler = (0, index_1.useEvent)((val, dontTouch) => {
-        if (!form)
-            return;
-        const field = form.getFieldInstance(fieldName);
-        if (shouldUpdate) {
-            const fieldsValue = form.getFieldsValue();
-            // check if we should update the value of the field
-            const shouldNotBeUpdated = typeof shouldUpdate === 'boolean'
-                ? !shouldUpdate
-                : !shouldUpdate(fieldsValue, {
-                    ...fieldsValue,
-                    [fieldName]: val,
-                });
-            if (shouldNotBeUpdated) {
-                return;
-            }
-        }
-        form.setFieldValue(fieldName, val, !dontTouch, false, dontTouch);
-        if (!dontTouch &&
-            (validateTrigger === 'onChange' ||
-                (field && field.errors && field.errors.length))) {
-            form.validateField(fieldName).catch(() => { }); // do nothing on fail
-        }
-    });
-    const onBlurHandler = (0, index_1.useEvent)(() => {
-        if (validateTrigger === 'onBlur') {
-            // We need a timeout so the change event can be done.
-            setTimeout(() => {
-                form?.validateField(fieldName).catch(() => { }); // do nothing on fail
-            });
-        }
-    });
-    let inputValue = field?.inputValue;
-    return (0, react_1.useMemo)(() => ({
-        id: fieldId,
-        name: fieldName,
-        value: inputValue,
-        validateTrigger,
-        form,
-        field,
-        nonInput,
-        validationState: validationState ??
-            (field?.errors?.length
-                ? 'invalid'
-                : showValid && field?.status === 'valid'
-                    ? 'valid'
-                    : undefined),
-        ...(isRequired && { isRequired }),
-        message: message !== undefined
-            ? message
-            : field?.status === 'invalid' && field?.errors?.[0],
-        onBlur: onBlurHandler,
-        onChange: onChangeHandler,
-    }), [
-        form,
-        field,
-        field?.errors?.length,
-        field?.status,
-        field?.inputValue,
-        fieldId,
-        fieldName,
-        isRequired,
-        onBlurHandler,
-        onChangeHandler,
-        validateTrigger,
-        validationState,
-        showValid,
-        nonInput,
-    ]);
-}
-
-        

package/cjs/components/form/Form/use-form.js

@@ -1,412 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CubeFormInstance = void 0;
-exports.useForm = useForm;
-const react_1 = require("react");
-const index_1 = require("../../../tasty/index");
-const validation_1 = require("./validation");
-function setValue(obj, path, value) {
-    let a = path.split('.');
-    let o = obj;
-    while (a.length - 1) {
-        let n = a.shift();
-        if (!(n in o))
-            o[n] = {};
-        o = o[n];
-    }
-    o[a[0]] = value;
-}
-function isEqual(v1, v2) {
-    return JSON.stringify(v1) === JSON.stringify(v2);
-}
-class CubeFormInstance {
-    constructor(forceReRender = () => { }) {
-        this.forceReRender = () => { };
-        this.defaultValues = {};
-        this.fields = {};
-        this.ref = {};
-        this.isSubmitting = false;
-        this.submitError = null;
-        this.onValuesChange = () => { };
-        this.onSubmit = () => { };
-        this.setFieldsValue = (newData, touched, skipRender, inputOnly = false) => {
-            let flag = false;
-            newData = { ...newData, ...index_1.dotize.convert(newData) };
-            Object.keys(newData).forEach((name) => {
-                let field = this.fields[name];
-                if (!field) {
-                    return;
-                }
-                if (!field || isEqual(field.value, newData[name])) {
-                    if (field) {
-                        field.errors = [];
-                        field.status = undefined;
-                    }
-                    return;
-                }
-                flag = true;
-                if (!inputOnly) {
-                    field.value = newData[name];
-                }
-                field.inputValue = newData[name];
-                field.errors = [];
-                field.status = undefined;
-                if (touched === true) {
-                    field.touched = touched;
-                }
-                else if (touched === false) {
-                    field.touched = false;
-                }
-            });
-            if (flag && !skipRender) {
-                if (touched && !inputOnly) {
-                    this.onValuesChange && this.onValuesChange(this.getFormData());
-                    this.submitError = null;
-                }
-                this.forceReRender();
-            }
-        };
-        this.forceReRender = forceReRender;
-        this.getFieldValue = this.getFieldValue.bind(this);
-        this.getFieldsValue = this.getFieldsValue.bind(this);
-        this.setFieldValue = this.setFieldValue.bind(this);
-        this.getFieldError = this.getFieldError.bind(this);
-        this.getFieldInstance = this.getFieldInstance.bind(this);
-        this.setInitialFieldsValue = this.setInitialFieldsValue.bind(this);
-        this.resetFields = this.resetFields.bind(this);
-        this.validateField = this.validateField.bind(this);
-        this.validateFields = this.validateFields.bind(this);
-        this.isFieldValid = this.isFieldValid.bind(this);
-        this.createField = this.createField.bind(this);
-        this.isFieldInvalid = this.isFieldInvalid.bind(this);
-        this.isFieldTouched = this.isFieldTouched.bind(this);
-        this.setFields = this.setFields.bind(this);
-    }
-    async submit() {
-        return this.onSubmit?.(this.getFormData());
-    }
-    getFieldValue(name) {
-        return this.fields[name]?.value;
-    }
-    getFieldsValue() {
-        return Object.values(this.fields).reduce((map, field) => {
-            if (field && map) {
-                map[field.name] = field.value;
-            }
-            return map;
-        }, {});
-    }
-    /**
-     * Similar to getFieldsValue() but respects '.' notation and creates nested objects.
-     */
-    getFormData() {
-        const fieldsValue = this.getFieldsValue();
-        return Object.keys(fieldsValue)
-            .sort()
-            .reduce((map, field) => {
-            setValue(map, field, fieldsValue[field]);
-            if (field.includes('.')) {
-                delete map[field];
-            }
-            return map;
-        }, {});
-    }
-    setFieldValue(name, value, isTouched = false, skipRender = false, inputOnly = false) {
-        const field = this.fields[name];
-        if (!field || isEqual(value, inputOnly ? field.inputValue : field.value)) {
-            return;
-        }
-        if (!inputOnly) {
-            field.value = value;
-            field.status = undefined; // reset validation status
-            if (typeof value === 'object' && !Array.isArray(value)) {
-                Object.keys(this.fields)
-                    .filter((key) => key.startsWith(`${name}.`))
-                    .forEach((key) => {
-                    const objKey = key.replace(`${name}.`, '');
-                    this.setFieldValue(key, value[objKey] ?? null, isTouched, false);
-                });
-            }
-        }
-        field.inputValue = value;
-        field.errors = [];
-        field.status = undefined;
-        if (isTouched) {
-            field.touched = isTouched;
-        }
-        if (isTouched && !inputOnly) {
-            this.onValuesChange && this.onValuesChange(this.getFormData());
-            this.submitError = null;
-        }
-        if (!skipRender) {
-            this.forceReRender();
-        }
-    }
-    getFieldInstance(name) {
-        return this.fields[name];
-    }
-    setInitialFieldsValue(values) {
-        this.defaultValues = { ...values, ...index_1.dotize.convert(values) };
-    }
-    updateInitialFieldsValue(values) {
-        this.defaultValues = {
-            ...this.defaultValues,
-            ...values,
-            ...index_1.dotize.convert(values),
-        };
-    }
-    resetFields(names, skipRender) {
-        names = names ?? Object.keys(this.fields);
-        names.forEach((fieldName) => {
-            const field = this.fields[fieldName];
-            if (!field) {
-                return;
-            }
-            const defaultValue = this.defaultValues[fieldName] ?? undefined;
-            field.value = defaultValue;
-            field.touched = false;
-            field.inputValue = defaultValue;
-            field.errors = [];
-            field.status = undefined;
-            field.validationId = (field.validationId ?? 0) + 1;
-        });
-        if (!skipRender) {
-            this.forceReRender();
-        }
-    }
-    async validateField(name) {
-        const field = this.getFieldInstance(name);
-        if (
-        // if there are no rules for such field
-        !field ||
-            !field.rules ||
-            // or field is already validated and valid
-            field.status === 'valid') {
-            return Promise.resolve();
-            // or field is already validated and invalid
-        }
-        else if (field.status === 'invalid') {
-            return Promise.reject(field.errors[0]);
-        }
-        field.validating = true;
-        field.status = undefined;
-        field.validationId = (field.validationId ?? 0) + 1;
-        const validationId = field.validationId;
-        // store validation to make sure there is no race condition.
-        return (0, validation_1.applyRules)(field, this, validationId)
-            .then(() => {
-            if (field.validationId !== validationId)
-                return;
-            field.validating = false;
-            if (!field.errors || field.errors.length) {
-                field.errors = [];
-            }
-            field.status = 'valid';
-            this.forceReRender();
-        })
-            .catch((err) => {
-            if (field.validationId === validationId) {
-                field.errors = [err];
-                field.validating = false;
-                field.status = 'invalid';
-                this.forceReRender();
-            }
-            return Promise.reject([err]);
-        });
-    }
-    validateFields(names) {
-        const fieldsList = names || Object.keys(this.fields);
-        const errorList = [];
-        return Promise.allSettled(fieldsList.map((name) => {
-            return this.validateField(name).catch((errors) => {
-                errorList.push({ name, errors });
-                return Promise.reject();
-            });
-        })).then(() => {
-            if (errorList.length) {
-                return Promise.reject(errorList);
-            }
-            return this.getFormData();
-        });
-    }
-    isFieldValid(name) {
-        const field = this.getFieldInstance(name);
-        if (!field)
-            return true;
-        return !field.errors.length;
-    }
-    isFieldInvalid(name) {
-        const field = this.getFieldInstance(name);
-        if (!field)
-            return false;
-        return !!field.errors.length;
-    }
-    isFieldTouched(name) {
-        const field = this.getFieldInstance(name);
-        if (!field)
-            return false;
-        return !!field.touched;
-    }
-    get isTouched() {
-        return Object.values(this.fields).some((field) => field?.touched);
-    }
-    get isDirty() {
-        return Object.values(this.fields).some((field) => {
-            return field && field.name
-                ? JSON.stringify(field?.value) !==
-                    JSON.stringify(this.defaultValues[field?.name])
-                : false;
-        });
-    }
-    /**
-     * True if all fields are verified and valid
-     * IMPORTANT: This is not the same as `!isInvalid`, because it also checks if all fields are verified.
-     */
-    get isValid() {
-        return Object.values(this.fields).every((field) => {
-            return field?.status === 'valid';
-        });
-    }
-    /**
-     * True if at least one field is verified and invalid.
-     * IMPORTANT: This is not the same as `!isValid`, because it only checks that at least
-     * one field is verified and invalid.
-     */
-    get isInvalid() {
-        return Object.values(this.fields).some((field) => {
-            return field?.status === 'invalid';
-        });
-    }
-    getFieldError(name) {
-        const field = this.getFieldInstance(name);
-        if (!field)
-            return [];
-        return field.errors || [];
-    }
-    /**
-     * @deprecated This field is not supposed to be used directly.
-     */
-    createField(name, skipRender) {
-        // passing an empty name is incorrect, but we have to return a valid object to avoid inconsistency
-        if (!name) {
-            return this._createField(name);
-        }
-        if (!this.fields[name]) {
-            this.fields[name] = this._createField(name);
-        }
-        if (!skipRender) {
-            this.forceReRender();
-        }
-        return this.fields[name];
-    }
-    /**
-     * @deprecated This field is not supposed to be used directly.
-     */
-    removeField(name, skipRender) {
-        if (this.fields[name]) {
-            delete this.fields[name];
-        }
-        if (!skipRender) {
-            this.forceReRender();
-        }
-    }
-    /**
-     * @deprecated This method is not recommended. Use other ways to alter fields.
-     * Use `setFieldValue` to change the value of a field.
-     * Use `verifyField` to validate a field.
-     * Use `setFieldError` to set an error for a field.
-     * Use `clearFieldsValidation` to clear all errors for a field.
-     */
-    setFields(newFields) {
-        newFields.forEach(({ name, value, errors }) => {
-            this.fields[name] = this._createField(name, {
-                value,
-                errors,
-            });
-        });
-        this.forceReRender();
-    }
-    resetFieldsValidation(names, skipRender) {
-        (names || Object.keys(this.fields)).forEach((name) => {
-            const field = this.getFieldInstance(name);
-            if (!field)
-                return;
-            field.errors = [];
-            field.status = undefined;
-            field.validationId = (field.validationId ?? 0) + 1;
-        });
-        if (!skipRender) {
-            this.forceReRender();
-        }
-    }
-    setFieldError(name, error, skipRender) {
-        const field = this.getFieldInstance(name);
-        if (!field || !error)
-            return;
-        field.errors = [error];
-        field.status = 'invalid';
-        field.validationId = (field.validationId ?? 0) + 1;
-        if (!skipRender) {
-            this.forceReRender();
-        }
-    }
-    setSubmitting(isSubmitting) {
-        if (this.isSubmitting === isSubmitting)
-            return;
-        this.isSubmitting = isSubmitting;
-        this.forceReRender();
-    }
-    _createField(name, data) {
-        let obj = {
-            name,
-            validating: false,
-            touched: false,
-            errors: [],
-            validationId: 0,
-            value: this.defaultValues[name],
-            ...data,
-            // it should be impossible to define or override status value
-            status: data?.errors?.length ? 'invalid' : undefined,
-        };
-        if (obj) {
-            // condition is here to avoid typing issues
-            obj.inputValue = obj.value;
-        }
-        return obj;
-    }
-}
-exports.CubeFormInstance = CubeFormInstance;
-function useForm(form, ref, options = {}) {
-    const { onSubmit, onValuesChange } = options;
-    const formRef = (0, react_1.useRef)();
-    const [, forceUpdate] = (0, react_1.useState)({});
-    if (!formRef.current) {
-        if (form) {
-            formRef.current = form;
-        }
-        else {
-            // Create a new FormInstance if not provided
-            const forceReRender = () => {
-                forceUpdate({});
-            };
-            form = formRef.current = new CubeFormInstance(forceReRender);
-        }
-        form.ref = ref;
-    }
-    if (onSubmit) {
-        formRef.current.onSubmit = onSubmit;
-    }
-    if (onValuesChange) {
-        formRef.current.onValuesChange = onValuesChange;
-    }
-    return [formRef.current];
-}
-
-