@cube-dev/ui-kit 0.9.4 → 0.9.7

package/dist/cjs/components/forms/FileInput/FileInput.js

@@ -1,152 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileInput = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const provider_1 = require("../../../provider");
-const Action_1 = require("../../actions/Action");
-const utils_1 = require("@react-spectrum/utils");
-const FieldWrapper_1 = require("../FieldWrapper");
-const styles_1 = require("../../../utils/styles");
-const list_1 = require("../../../styles/list");
-const StylesProvider_1 = require("../../../providers/StylesProvider");
-const DEFAULT_WRAPPER_STYLES = {
-    display: 'inline-flex',
-    position: 'relative',
-    preset: 't3',
-    padding: '.75x 1x',
-    gap: '1x',
-    flow: 'row',
-    placeItems: 'center start',
-    fill: {
-        '': '#white',
-        'drag-hover': '#purple.16',
-    },
-    border: true,
-    radius: true,
-    cursor: 'pointer',
-    overflow: 'hidden',
-    Button: {
-        radius: 'round',
-        fill: {
-            '': '#light',
-            'hovered | focused | pressed': '#purple-04',
-            disabled: '#light',
-        },
-        color: '#dark',
-        padding: '.5x 1x',
-        transition: 'fill',
-    },
-    Placeholder: {
-        color: '#dark-02',
-    },
-    Value: {
-        color: '#dark-02',
-    },
-    Input: {
-        position: 'absolute',
-        top: '-50px',
-        right: 0,
-        bottom: 0,
-        left: 0,
-        radius: '@content-radius',
-        // opacity: 0,
-        cursor: 'pointer',
-        zIndex: 10,
-    },
-};
-function extractContents(element, callback) {
-    const files = element === null || element === void 0 ? void 0 : element.files;
-    if (files && files.length > 0) {
-        const fileReader = new FileReader();
-        fileReader.onload = function () {
-            callback(fileReader.result);
-        };
-        fileReader.readAsText(files[0]);
-    }
-}
-function FileInput(props, ref) {
-    let { id, name, qa, qaVal, onChange, placeholder, inputRef, label, labelPosition, isRequired, necessityIndicator, necessityLabel, labelStyles, labelProps, isDisabled, validationState, message, description, requiredMark, tooltip, isHidden, inputStyles, type = 'file', ...otherProps } = (0, provider_1.useProviderProps)(props);
-    const [value, setValue] = (0, react_1.useState)();
-    const [dragHover, setDragHover] = (0, react_1.useState)(false);
-    let domRef = (0, react_1.useRef)(null);
-    let defaultInputRef = (0, react_1.useRef)(null);
-    inputRef = inputRef || defaultInputRef;
-    let styles = (0, styles_1.extractStyles)(otherProps, list_1.CONTAINER_STYLES);
-    inputStyles = {
-        ...DEFAULT_WRAPPER_STYLES,
-        ...(0, StylesProvider_1.useContextStyles)('FileInput', otherProps),
-        ...inputStyles,
-    };
-    const onLocalChange = (0, react_1.useCallback)((event) => {
-        const value = event.target.value;
-        if (type === 'file') {
-            onChange === null || onChange === void 0 ? void 0 : onChange(value);
-        }
-        else if (onChange) {
-            extractContents(event.target, onChange);
-        }
-        setValue(value);
-    }, [onChange]);
-    // Expose imperative interface for ref
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        ...(0, utils_1.createFocusableRef)(domRef, inputRef),
-        select() {
-            if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
-                inputRef.current.select();
-            }
-        },
-        getInputElement() {
-            return inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
-        },
-    }));
-    const fileInput = ((0, jsx_runtime_1.jsxs)(Action_1.Action, { qa: qa || 'FileInput', styles: inputStyles, isDisabled: isDisabled, ref: domRef, mods: {
-            selected: !!value,
-            'drag-hover': dragHover,
-        }, onKeyDown: (e) => {
-            var _a;
-            if (e.key === 'Enter' || e.key === 'Space') {
-                (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-            }
-        }, children: [(0, jsx_runtime_1.jsx)("input", { id: id, name: name, ref: inputRef, onChange: onLocalChange, "data-element": "Input", type: "file", tabIndex: -1, onDragEnter: () => {
-                    setDragHover(true);
-                }, onDragLeave: () => {
-                    setDragHover(false);
-                }, onDrop: () => {
-                    setDragHover(false);
-                } }, void 0), (0, jsx_runtime_1.jsx)("div", { "data-element": "Button", children: "Choose file" }, void 0), (0, jsx_runtime_1.jsx)("div", { "data-element": !!value ? 'Value' : 'Placeholder', children: value || placeholder || 'No file selected' }, void 0)] }, void 0));
-    return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
-            labelPosition,
-            label,
-            styles,
-            isRequired,
-            labelStyles,
-            necessityIndicator,
-            necessityLabel,
-            labelProps,
-            isDisabled,
-            validationState,
-            message,
-            description,
-            requiredMark,
-            tooltip,
-            isHidden,
-            Component: fileInput,
-            ref: domRef,
-        } }, void 0));
-}
-/**
- * FileInputs are file inputs that allow users to select local files to
- * upload them to the server.
- */
-const _FileInput = (0, react_1.forwardRef)(FileInput);
-exports.FileInput = _FileInput;
-
-        

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

@@ -1,234 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Field = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Form_1 = require("./Form");
-const react_2 = require("../../../utils/react");
-const FieldWrapper_1 = require("../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,
-    };
-}
-function Field(allProps) {
-    const props = (0, Form_1.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 = (0, react_1.useRef)(true);
-    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);
-            }
-        };
-    }, []);
-    let field = form === null || form === void 0 ? void 0 : form.getFieldInstance(fieldName);
-    let isRequired = rules && !!rules.find((rule) => rule.required);
-    (0, react_1.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 = react_1.Children.only(children);
-    if (nonInput) {
-        return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.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 (0, react_1.cloneElement)(child, (0, react_2.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 (0, react_1.cloneElement)(child, (0, react_2.mergeProps)(childProps, newProps, onChange ? { onChange } : {}, onSelectionChange ? { onSelectionChange } : {}));
-}
-exports.Field = Field;
-
-        

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

@@ -1,125 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Form = exports.useFormProps = exports.FormContext = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("@react-spectrum/utils");
-const provider_1 = require("../../../provider");
-const react_1 = require("react");
-const Base_1 = require("../../Base");
-const styles_1 = require("../../../utils/styles");
-const list_1 = require("../../../styles/list");
-const filterBaseProps_1 = require("../../../utils/filterBaseProps");
-const useForm_1 = require("./useForm");
-const react_2 = require("../../../utils/react");
-const promise_1 = require("../../../utils/promise");
-exports.FormContext = (0, react_1.createContext)({});
-function useFormProps(props) {
-    const ctx = (0, react_1.useContext)(exports.FormContext);
-    return { ...ctx, ...props };
-}
-exports.useFormProps = useFormProps;
-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 = (0, provider_1.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 = (0, react_1.useRef)(true);
-    ref = (0, react_2.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 (0, promise_1.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 (0, promise_1.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] = (0, useForm_1.useForm)(form, ref && ref.current, {
-        onSubmit: onSubmitCallback,
-        onValuesChange,
-    });
-    styles = (0, styles_1.extractStyles)(otherProps, list_1.CONTAINER_STYLES, DEFAULT_STYLES);
-    if (labelWidth) {
-        styles['@label-width'] = labelWidth;
-    }
-    let domRef = (0, utils_1.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;
-        }
-    }
-    (0, react_1.useEffect)(() => {
-        if (defaultValues) {
-            form === null || form === void 0 ? void 0 : form.setInitialFieldsValue(defaultValues);
-        }
-    }, [defaultValues]);
-    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { as: "form", qa: "Form", ...(0, filterBaseProps_1.filterBaseProps)(otherProps, { propNames: formPropNames }), onSubmit: onSubmitCallback, noValidate: true, styles: styles, ref: domRef, mods: {
-            'has-sider': labelPosition === 'side',
-        }, children: (0, jsx_runtime_1.jsx)(exports.FormContext.Provider, { value: ctx, children: (0, jsx_runtime_1.jsx)(provider_1.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 = (0, react_1.forwardRef)(Form);
-exports.Form = _Form;
-
-        

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

@@ -1,20 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useForm = exports.Field = exports.Form = exports.useFormProps = void 0;
-const Field_1 = require("./Field");
-Object.defineProperty(exports, "Field", { enumerable: true, get: function () { return Field_1.Field; } });
-const useForm_1 = require("./useForm");
-Object.defineProperty(exports, "useForm", { enumerable: true, get: function () { return useForm_1.useForm; } });
-const Form_1 = require("./Form");
-Object.defineProperty(exports, "useFormProps", { enumerable: true, get: function () { return Form_1.useFormProps; } });
-const Form = Object.assign(Form_1.Form, { Item: Field_1.Field, useForm: useForm_1.useForm });
-exports.Form = Form;
-
-