@cube-dev/ui-kit 0.9.6 → 0.9.7

package/dist/es/components/forms/Form/Field.js

@@ -1,230 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Children, cloneElement, useEffect, useRef, useState, } from 'react';
-import { useFormProps } from './Form';
-import { mergeProps } from '../../../utils/react';
-import { FieldWrapper } from '../FieldWrapper';
-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 getDefaultValidateTrigger(type) {
-    type = type || '';
-    return type === 'Number' || type.includes('Text') ? 'onBlur' : 'onChange';
-}
-function getValueProps(type, value, onChange) {
-    type = type || '';
-    if (type === 'Number') {
-        return {
-            value: value != null ? value : null,
-            onChange: onChange,
-        };
-    }
-    else if (type === 'Text') {
-        return {
-            value: typeof value === 'string' || typeof value === 'number'
-                ? String(value)
-                : '',
-            onChange: onChange,
-        };
-    }
-    else if (type === 'Checkbox') {
-        return {
-            isSelected: value != null ? value : false,
-            isIndeterminate: false,
-            onChange: onChange,
-        };
-    }
-    else if (type === 'CheckboxGroup') {
-        return {
-            value: value != null ? value : [],
-            onChange: onChange,
-        };
-    }
-    else if (type === 'ComboBox') {
-        return {
-            inputValue: value != null ? value : '',
-            onInputChange: onChange,
-        };
-    }
-    else if (type === 'Select') {
-        return {
-            selectedKey: value != null ? value : null,
-            onSelectionChange: onChange,
-        };
-    }
-    return {
-        value: value != null ? value : null,
-        onChange,
-    };
-}
-export function Field(allProps) {
-    const props = useFormProps(allProps);
-    let { defaultValue, type: inputType, id, idPrefix, children, name, form, rules, label, validateTrigger, validationState, necessityLabel, necessityIndicator, shouldUpdate, message, description, tooltip, isHidden, } = props;
-    const nonInput = !name;
-    const fieldName = name != null ? (Array.isArray(name) ? name.join('.') : name) : '';
-    let firstRunRef = useRef(true);
-    let [fieldId, setFieldId] = useState(id || (idPrefix ? `${idPrefix}_${fieldName}` : fieldName));
-    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);
-            }
-        };
-    }, []);
-    let field = form === null || form === void 0 ? void 0 : form.getFieldInstance(fieldName);
-    let isRequired = rules && !!rules.find((rule) => rule.required);
-    useEffect(() => {
-        if (!form)
-            return;
-        if (field) {
-            field.rules = rules;
-            form.forceReRender();
-        }
-        else {
-            form.createField(fieldName);
-        }
-    }, [field]);
-    if (typeof children === 'function') {
-        children = children(form);
-    }
-    if (!children)
-        return null;
-    let child = Children.only(children);
-    if (nonInput) {
-        return (_jsx(FieldWrapper, { isHidden: isHidden, validationState: validationState, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isRequired: isRequired, label: label, tooltip: tooltip, message: message, description: description, Component: child }, void 0));
-    }
-    if (!fieldName) {
-        console.error('invalid form name:', fieldName);
-        return null;
-    }
-    if (!form) {
-        console.error('form field requires declared form instance');
-        return null;
-    }
-    // @ts-ignore
-    inputType = inputType || child.type.cubeInputType || 'Text';
-    const defaultValidateTrigger = getDefaultValidateTrigger(inputType);
-    if (firstRunRef.current && defaultValue != null) {
-        if (!field) {
-            form.createField(fieldName, true);
-        }
-        if ((field === null || field === void 0 ? void 0 : field.value) == null) {
-            form.setFieldValue(fieldName, defaultValue, false, true);
-            field = form === null || form === void 0 ? void 0 : form.getFieldInstance(fieldName);
-        }
-    }
-    firstRunRef.current = false;
-    if (!field) {
-        return cloneElement(child, mergeProps(child.props, {
-            ...getValueProps(inputType),
-            name: fieldName,
-            id: fieldId,
-        }));
-    }
-    if (!validateTrigger) {
-        validateTrigger = defaultValidateTrigger;
-    }
-    function onChangeHandler(val) {
-        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, true);
-        if (validateTrigger === 'onChange'
-            || (field && field.errors && field.errors.length)) {
-            form.validateField(fieldName).catch(() => { }); // do nothing on fail
-        }
-    }
-    const newProps = {
-        id: fieldId,
-        name: fieldName,
-        onBlur() {
-            if (validateTrigger === 'onBlur') {
-                // We need timeout so the change event can be done.
-                setTimeout(() => {
-                    form.validateField(fieldName).catch(() => { }); // do nothing on fail
-                });
-            }
-        },
-    };
-    if (necessityIndicator != null) {
-        newProps.necessityIndicator = necessityIndicator;
-    }
-    if (necessityLabel) {
-        newProps.necessityLabel = necessityLabel;
-    }
-    if (validationState) {
-        newProps.validationState = validationState;
-    }
-    if (isRequired) {
-        newProps.isRequired = isRequired;
-    }
-    if (label) {
-        newProps.label = label;
-    }
-    if (tooltip) {
-        newProps.tooltip = tooltip;
-    }
-    if (message) {
-        newProps.message = message;
-    }
-    if (isHidden != null) {
-        newProps.isHidden = isHidden;
-    }
-    if (field && field.errors && field.errors.length) {
-        if (!validationState) {
-            newProps.validationState = 'invalid';
-        }
-        if (!message) {
-            newProps.message = field.errors[0];
-        }
-    }
-    Object.assign(newProps, getValueProps(inputType, field === null || field === void 0 ? void 0 : field.value, onChangeHandler));
-    const { onChange, onSelectionChange, ...childProps } = child.props;
-    // onChange event passed to the child should be executed after Form onChange logic
-    return cloneElement(child, mergeProps(childProps, newProps, onChange ? { onChange } : {}, onSelectionChange ? { onSelectionChange } : {}));
-}
-
-        

package/dist/es/components/forms/Form/Form.js

@@ -1,121 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useDOMRef } from '@react-spectrum/utils';
-import { Provider, useProviderProps } from '../../../provider';
-import { createContext, useContext, useRef, forwardRef, useEffect, } from 'react';
-import { Base } from '../../Base';
-import { extractStyles } from '../../../utils/styles';
-import { CONTAINER_STYLES } from '../../../styles/list';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
-import { useForm } from './useForm';
-import { useCombinedRefs } from '../../../utils/react';
-import { timeout } from '../../../utils/promise';
-export const FormContext = createContext({});
-export function useFormProps(props) {
-    const ctx = useContext(FormContext);
-    return { ...ctx, ...props };
-}
-const formPropNames = new Set([
-    'action',
-    'autoComplete',
-    'encType',
-    'method',
-    'target',
-]);
-const DEFAULT_STYLES = {
-    display: 'block',
-    flow: 'column',
-    gap: '2x',
-    '@label-width': '25x',
-};
-function Form(props, ref) {
-    props = useProviderProps(props);
-    let { qa, name, children, labelPosition = 'top', isRequired, necessityIndicator, isDisabled, isReadOnly, validationState, labelStyles, validateTrigger, defaultValues, onValuesChange, requiredMark = true, form, labelWidth, onSubmit, onSubmitFailed, ...otherProps } = props;
-    let styles;
-    const firstRunRef = useRef(true);
-    ref = useCombinedRefs(ref);
-    let onSubmitCallback;
-    if ((onSubmit || onSubmitFailed) && !otherProps.action) {
-        onSubmitCallback = (e) => {
-            if (e && (e === null || e === void 0 ? void 0 : e.preventDefault)) {
-                e && (e === null || e === void 0 ? void 0 : e.preventDefault) && (e === null || e === void 0 ? void 0 : e.preventDefault());
-                e && (e === null || e === void 0 ? void 0 : e.stopPropagation) && (e === null || e === void 0 ? void 0 : e.stopPropagation());
-                if (e.nativeEvent) {
-                    const evt = e.nativeEvent;
-                    if (evt.submitter
-                        && evt.submitter.getAttribute('type') !== 'submit') {
-                        return;
-                    }
-                }
-            }
-            return form === null || form === void 0 ? void 0 : form.validateFields().then(async () => {
-                await timeout();
-                if (form && !form.isSubmitting) {
-                    try {
-                        form.setSubmitting(true);
-                        await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(form.getFormData()));
-                    }
-                    finally {
-                        form.setSubmitting(false);
-                    }
-                }
-            }, async (e) => {
-                await timeout();
-                if (e instanceof Error) {
-                    throw e;
-                }
-                // errors are shown
-                // transfer errors to the callback
-                onSubmitFailed === null || onSubmitFailed === void 0 ? void 0 : onSubmitFailed(e);
-            });
-            // output data from form directly
-            // onSubmit(Object.fromEntries(new FormData(e.target).entries()));
-        };
-    }
-    [form] = useForm(form, ref && ref.current, {
-        onSubmit: onSubmitCallback,
-        onValuesChange,
-    });
-    styles = extractStyles(otherProps, CONTAINER_STYLES, DEFAULT_STYLES);
-    if (labelWidth) {
-        styles['@label-width'] = labelWidth;
-    }
-    let domRef = useDOMRef(ref);
-    let ctx = {
-        labelPosition,
-        labelStyles,
-        necessityIndicator,
-        validateTrigger,
-        requiredMark,
-        form,
-        idPrefix: name,
-    };
-    if (firstRunRef.current && form) {
-        if (defaultValues) {
-            form.setInitialFieldsValue(defaultValues);
-            form.resetFields(undefined, true);
-            firstRunRef.current = false;
-        }
-    }
-    useEffect(() => {
-        if (defaultValues) {
-            form === null || form === void 0 ? void 0 : form.setInitialFieldsValue(defaultValues);
-        }
-    }, [defaultValues]);
-    return (_jsx(Base, { as: "form", qa: "Form", ...filterBaseProps(otherProps, { propNames: formPropNames }), onSubmit: onSubmitCallback, noValidate: true, styles: styles, ref: domRef, mods: {
-            'has-sider': labelPosition === 'side',
-        }, children: _jsx(FormContext.Provider, { value: ctx, children: _jsx(Provider, { insideForm: true, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, validationState: validationState, children: children }, void 0) }, void 0) }, void 0));
-}
-/**
- * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.
- */
-const _Form = forwardRef(Form);
-export { _Form as Form };
-
-        

package/dist/es/components/forms/Form/index.js

@@ -1,14 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-import { Field } from './Field';
-import { useForm } from './useForm';
-import { useFormProps, Form as _Form } from './Form';
-const Form = Object.assign(_Form, { Item: Field, useForm });
-export { useFormProps, Form, Field, useForm };
-
-        

package/dist/es/components/forms/Form/useForm.js

@@ -1,275 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-import { useRef, useState } from 'react';
-import { dotize } from '../../../utils/dotize';
-import { applyRules } from './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);
-}
-export class CubeFormInstance {
-    constructor(forceReRender) {
-        this.forceReRender = () => { };
-        this.initialFields = {};
-        this.fields = {};
-        this.ref = {};
-        this.isSubmitting = false;
-        this.onValuesChange = () => { };
-        this.onSubmit = () => { };
-        this.forceReRender = forceReRender || (() => { });
-        this.initialFields = {};
-        this.fields = {};
-        this.getFieldValue = this.getFieldValue.bind(this);
-        this.getFieldsValue = this.getFieldsValue.bind(this);
-        this.setFieldsValue = this.setFieldsValue.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() {
-        if (this.onSubmit) {
-            return this.onSubmit(this.getFormData());
-        }
-    }
-    setFieldsValue(newData, touched, skipRender, createFields = false) {
-        let flag = false;
-        Object.keys(newData).forEach((name) => {
-            let field = this.fields[name];
-            if (!field && createFields) {
-                this.createField(name, skipRender);
-                field = this.fields[name];
-            }
-            if (!field || isEqual(field.value, newData[name])) {
-                if (field && touched === false) {
-                    field.errors = [];
-                }
-                return;
-            }
-            flag = true;
-            field.value = newData[name];
-            if (touched === true) {
-                field.touched = touched;
-            }
-            else if (touched === false) {
-                field.touched = false;
-                field.errors = [];
-            }
-        });
-        if (flag && !skipRender) {
-            this.forceReRender();
-            if (touched) {
-                this.onValuesChange && this.onValuesChange(this.getFormData());
-            }
-        }
-    }
-    getFieldValue(name) {
-        return this.fields[name] && this.fields[name].value;
-    }
-    getFieldsValue() {
-        const data = {};
-        return Object.values(this.fields).reduce((map, field) => {
-            map[field.name] = field.value;
-            return map;
-        }, data);
-    }
-    /**
-     * Similar to getFieldsValue() but respects '.' notation and creates nested objects.
-     */
-    getFormData() {
-        const fieldsValue = this.getFieldsValue();
-        return Object.keys(fieldsValue).reduce((map, field) => {
-            setValue(map, field, fieldsValue[field]);
-            if (field.includes('.')) {
-                delete map[field];
-            }
-            return map;
-        }, {});
-    }
-    setFieldValue(name, value, touched = false, skipRender) {
-        const field = this.fields[name];
-        if (!field || isEqual(value, field.value))
-            return;
-        field.value = value;
-        if (touched) {
-            field.touched = touched;
-        }
-        if (!skipRender) {
-            this.forceReRender();
-        }
-        if (touched) {
-            this.onValuesChange && this.onValuesChange(this.getFormData());
-        }
-    }
-    getFieldInstance(name) {
-        return this.fields[name];
-    }
-    setInitialFieldsValue(values) {
-        this.initialFields = dotize.convert(values) || {};
-    }
-    resetFields(names, skipRender) {
-        const fieldsValue = this.getFieldsValue();
-        const fieldNames = Object.keys({ ...fieldsValue, ...this.initialFields });
-        const filteredFieldNames = names
-            ? fieldNames.filter((name) => names.includes(name))
-            : fieldNames;
-        const values = filteredFieldNames.reduce((map, name) => {
-            if (name in this.initialFields) {
-                map[name] = this.initialFields[name];
-            }
-            else {
-                map[name] = undefined;
-            }
-            return map;
-        }, {});
-        this.setFieldsValue(values, false, skipRender, true);
-    }
-    async validateField(name) {
-        const field = this.getFieldInstance(name);
-        if (!field || !field.rules)
-            return Promise.resolve();
-        return applyRules(field.value, field.rules, this)
-            .then(() => {
-            if (!field.errors || field.errors.length) {
-                field.errors = [];
-                this.forceReRender();
-            }
-        })
-            .catch((err) => {
-            if (!field.errors || !isEqual(field.errors, [err])) {
-                field.errors = [err];
-                this.forceReRender();
-            }
-            return Promise.reject([err]);
-        });
-    }
-    validateFields(list) {
-        const fieldsList = list || 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;
-    }
-    getFieldError(name) {
-        const field = this.getFieldInstance(name);
-        if (!field)
-            return [];
-        return field.errors || [];
-    }
-    createField(name, skipRender) {
-        if (!this.fields[name]) {
-            this.fields[name] = this._createField(name);
-        }
-        if (!skipRender) {
-            this.forceReRender();
-        }
-    }
-    removeField(name, skipRender) {
-        if (this.fields[name]) {
-            delete this.fields[name];
-        }
-        if (!skipRender) {
-            this.forceReRender();
-        }
-        this.validateFields().catch(() => { });
-    }
-    setFields(newFields) {
-        newFields.forEach(({ name, value, errors }) => {
-            this.fields[name] = this._createField(name, {
-                value,
-                errors,
-            });
-        });
-        this.forceReRender();
-    }
-    setSubmitting(isSubmitting) {
-        this.isSubmitting = isSubmitting;
-        this.forceReRender();
-    }
-    _createField(name, data) {
-        return {
-            name,
-            value: undefined,
-            validating: false,
-            touched: false,
-            errors: [],
-            ...data,
-        };
-    }
-}
-export function useForm(form, ref, options = {}) {
-    const { onSubmit, onValuesChange } = options;
-    const formRef = useRef();
-    const [, forceUpdate] = 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) {
-            form.onSubmit = onSubmit;
-        }
-        if (onValuesChange) {
-            form.onValuesChange = onValuesChange;
-        }
-    }
-    return [formRef.current];
-}
-
-