@cube-dev/ui-kit 0.8.5 → 0.9.0

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

@@ -0,0 +1,151 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * 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?.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?.(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?.current) {
+                inputRef.current.select();
+            }
+        },
+        getInputElement() {
+            return 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) => {
+            if (e.key === 'Enter' || e.key === 'Space') {
+                inputRef?.current?.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

@@ -0,0 +1,234 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * 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?.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?.value == null) {
+            form.setFieldValue(fieldName, defaultValue, false, true);
+            field = 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?.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

@@ -0,0 +1,125 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * 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?.preventDefault) {
+                e && e?.preventDefault && e?.preventDefault();
+                e && e?.stopPropagation && e?.stopPropagation();
+                if (e.nativeEvent) {
+                    const evt = e.nativeEvent;
+                    if (evt.submitter
+                        && evt.submitter.getAttribute('type') !== 'submit') {
+                        return;
+                    }
+                }
+            }
+            return form?.validateFields().then(async () => {
+                await (0, promise_1.timeout)();
+                if (form && !form.isSubmitting) {
+                    try {
+                        form.setSubmitting(true);
+                        await 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?.(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?.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

@@ -0,0 +1,20 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * 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;
+
+