@cube-dev/ui-kit 0.0.0-canary-d37d372 → 0.0.0-canary-5b7252a

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

@@ -0,0 +1,133 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-5b7252a
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { useFormProps } from '../Form';
+import { useEvent, useWarn } from '../../../../_internal';
+import { FieldProvider } from './FieldContext';
+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);
+}
+export function Field(props) {
+    props = useFormProps(props);
+    let { defaultValue, id, idPrefix, children, name, form, rules, validateTrigger, validationState, shouldUpdate, } = props;
+    const nonInput = !name;
+    const fieldName = name != null ? (Array.isArray(name) ? name.join('.') : name) : '';
+    const [fieldId, setFieldId] = useState(id ?? (idPrefix ? `${idPrefix}_${fieldName}` : fieldName));
+    let field = form?.getFieldInstance(fieldName);
+    if (!field) {
+        field = form?.createField(fieldName, true);
+    }
+    useWarn(!form, 'Form Field requires declared form instance if field name is specified');
+    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);
+            }
+        };
+    }, []);
+    if (field) {
+        field.rules = rules;
+        if (defaultValue !== null && !field.touched) {
+            form?.setFieldValue(fieldName, defaultValue, false, true);
+        }
+    }
+    let isRequired = rules && !!rules.find((rule) => rule.required);
+    useEffect(() => {
+        if (!form)
+            return;
+        if (field) {
+            form.forceReRender();
+        }
+        else {
+            form.createField(fieldName);
+        }
+    }, [field]);
+    const onBlurHandler = useEvent(() => {
+        if (validateTrigger === 'onBlur') {
+            // We need a timeout so the change event can be done.
+            setTimeout(() => {
+                form?.validateField(fieldName).catch(() => { }); // do nothing on fail
+            });
+        }
+    });
+    const onChangeHandler = useEvent((value, dontTouch) => {
+        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]: value,
+                });
+            if (shouldNotBeUpdated) {
+                return;
+            }
+        }
+        form?.setFieldValue(fieldName, value, !dontTouch, false, dontTouch);
+        if (!dontTouch &&
+            (validateTrigger === 'onChange' || field?.errors?.length)) {
+            form?.validateField(fieldName).catch(() => { }); // do nothing on fail
+        }
+    });
+    const contextValue = useMemo(() => ({
+        id: fieldId,
+        name: fieldName,
+        value: field?.inputValue,
+        validateTrigger,
+        validationState: validationState ?? (field?.errors?.length ? 'invalid' : undefined),
+        ...(isRequired && { isRequired }),
+        ...(field?.errors?.length && { message: field.errors[0] }),
+        onBlur: onBlurHandler,
+        onChange: onChangeHandler,
+    }), [
+        field?.errors,
+        field?.inputValue,
+        fieldId,
+        fieldName,
+        isRequired,
+        onBlurHandler,
+        onChangeHandler,
+        validateTrigger,
+        validationState,
+    ]);
+    if (!form || !children) {
+        return null;
+    }
+    return (_jsx(FieldProvider, { value: contextValue, children: typeof children === 'function' ? children(form) : children }, void 0));
+}
+
+        

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

@@ -0,0 +1,44 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-5b7252a
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useChainedCallback, useEvent } from '../../../../_internal';
+import { useFormProps } from '../Form';
+const FieldContext = React.createContext(null);
+export function FieldProvider(props) {
+    const { children, value } = props;
+    return (_jsx(FieldContext.Provider, { value: value, children: children }, void 0));
+}
+export function useFieldProps(props, params = {}) {
+    const { valuePropsMapper, defaultValidationTrigger = 'onBlur' } = params;
+    props = useFormProps(props);
+    const fieldContext = React.useContext(FieldContext);
+    const onBlurChained = useChainedCallback(fieldContext?.onBlur, props.onBlur);
+    const onChangeEvent = useEvent((value, dontTouch) => {
+        return fieldContext?.onChange?.(value, dontTouch, fieldContext?.validateTrigger ?? defaultValidationTrigger);
+    });
+    if (fieldContext === null) {
+        return props;
+    }
+    const { validateTrigger = defaultValidationTrigger, value, onChange, ...rest } = fieldContext;
+    return {
+        ...props,
+        ...(valuePropsMapper?.({
+            value: fieldContext.value,
+            onChange: onChangeEvent,
+        }) ?? {
+            value: fieldContext.value,
+            onChange: onChangeEvent,
+        }),
+        ...rest,
+        validateTrigger,
+        onBlur: onBlurChained,
+    };
+}
+
+        

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

@@ -0,0 +1,12 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-5b7252a
+ * Released under the MIT license.
+ */
+
+export * from './Field';
+export * from './FieldContext';
+export * from './types';
+
+        

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

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-5b7252a
+ * Released under the MIT license.
+ */
+
+export {};
+
+        

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d37d372
+ * @cube-dev/ui-kit v0.0.0-canary-5b7252a
  * Released under the MIT license.
  */
 
@@ -78,7 +78,7 @@ function Form(props, ref) {
             // onSubmit(Object.fromEntries(new FormData(e.target).entries()));
         };
     }
-    [form] = useForm(form, ref && ref.current, {
+    [form] = useForm(form, ref?.current, {
         onSubmit: onSubmitCallback,
         onValuesChange,
     });

package/es/components/forms/Form/{Field.js → LegacyField.js}

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d37d372
+ * @cube-dev/ui-kit v0.0.0-canary-5b7252a
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d37d372
+ * @cube-dev/ui-kit v0.0.0-canary-5b7252a
  * Released under the MIT license.
  */
 
@@ -10,5 +10,6 @@ import { useForm } from './useForm';
 import { useFormProps, FormContext, Form as _Form } from './Form';
 const Form = Object.assign(_Form, { Item: Field, useForm });
 export { useFormProps, Form, Field, useForm, FormContext };
+export * from './Field';
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d37d372
+ * @cube-dev/ui-kit v0.0.0-canary-5b7252a
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d37d372
+ * @cube-dev/ui-kit v0.0.0-canary-5b7252a
  * Released under the MIT license.
  */
 
@@ -212,6 +212,7 @@ export class CubeFormInstance {
         if (!skipRender) {
             this.forceReRender();
         }
+        return this.fields[name];
     }
     removeField(name, skipRender) {
         if (this.fields[name]) {

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d37d372
+ * @cube-dev/ui-kit v0.0.0-canary-5b7252a
  * Released under the MIT license.
  */
 

package/es/components/forms/Input/Input.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d37d372
+ * @cube-dev/ui-kit v0.0.0-canary-5b7252a
  * Released under the MIT license.
  */
 

package/es/components/forms/Input/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d37d372
+ * @cube-dev/ui-kit v0.0.0-canary-5b7252a
  * Released under the MIT license.
  */
 

package/es/components/forms/Label.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d37d372
+ * @cube-dev/ui-kit v0.0.0-canary-5b7252a
  * Released under the MIT license.
  */
 

package/es/components/forms/NumberInput/NumberInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d37d372
+ * @cube-dev/ui-kit v0.0.0-canary-5b7252a
  * Released under the MIT license.
  */
 
@@ -29,13 +29,13 @@ function NumberInput(props, ref) {
     props = castNullableNumberValue(props);
     props = useProviderProps(props);
     props = useFormProps(props);
-    let { hideStepper, suffix, suffixPosition = 'after', value, defaultValue, onChange, ...otherProps } = props;
+    let { hideStepper, value, defaultValue, onChange, ...otherProps } = props;
     let showStepper = !hideStepper;
     let { locale } = useLocale();
     let state = useNumberFieldState({ ...props, locale });
     let inputRef = useRef(null);
     let { groupProps, labelProps, inputProps, incrementButtonProps, decrementButtonProps, } = useNumberField(props, state, inputRef);
-    return (_jsx(TextInputBase, { ...otherProps, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: suffixPosition, suffix: showStepper ? (_jsxs(StepperContainer, { children: [_jsx(StepButton, { direction: "up", ...incrementButtonProps }, void 0), _jsx(StepButton, { direction: "down", ...decrementButtonProps }, void 0)] }, void 0)) : (suffix) }, void 0));
+    return (_jsx(TextInputBase, { ...otherProps, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? (_jsxs(StepperContainer, { children: [_jsx(StepButton, { direction: "up", ...incrementButtonProps }, void 0), _jsx(StepButton, { direction: "down", ...decrementButtonProps }, void 0)] }, void 0)) : null }, void 0));
 }
 /**
  * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.

package/es/components/forms/NumberInput/StepButton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d37d372
+ * @cube-dev/ui-kit v0.0.0-canary-5b7252a
  * Released under the MIT license.
  */
 

package/es/components/forms/PasswordInput/PasswordInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d37d372
+ * @cube-dev/ui-kit v0.0.0-canary-5b7252a
  * Released under the MIT license.
  */
 

package/es/components/forms/RadioGroup/Radio.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d37d372
+ * @cube-dev/ui-kit v0.0.0-canary-5b7252a
  * Released under the MIT license.
  */
 

package/es/components/forms/RadioGroup/RadioGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d37d372
+ * @cube-dev/ui-kit v0.0.0-canary-5b7252a
  * Released under the MIT license.
  */
 

package/es/components/forms/RadioGroup/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d37d372
+ * @cube-dev/ui-kit v0.0.0-canary-5b7252a
  * Released under the MIT license.
  */
 

package/es/components/forms/SearchInput/SearchInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d37d372
+ * @cube-dev/ui-kit v0.0.0-canary-5b7252a
  * Released under the MIT license.
  */
 

package/es/components/forms/Switch/Switch.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d37d372
+ * @cube-dev/ui-kit v0.0.0-canary-5b7252a
  * Released under the MIT license.
  */
 
@@ -18,9 +18,9 @@ import { useFocus } from '../../../utils/react/interactions';
 import { mergeProps } from '../../../utils/react';
 import { HiddenInput } from '../../HiddenInput';
 import { INLINE_LABEL_STYLES, LABEL_STYLES } from '../Label';
-import { useFormProps } from '../Form/Form';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableIsSelected, } from '../../../utils/react/nullableValue';
+import { useFieldProps } from '../Form';
 const SwitchWrapperElement = tasty({
     qa: 'SwitchWrapper',
     styles: {
@@ -90,10 +90,20 @@ const SwitchElement = tasty({
         },
     },
 });
-function Switch(props, ref) {
+/**
+ * Switches allow users to turn an individual option on or off.
+ * They are usually used to activate or deactivate a specific setting.
+ */
+export const Switch = forwardRef(function Switch(props, ref) {
     props = castNullableIsSelected(props);
     props = useProviderProps(props);
-    props = useFormProps(props);
+    props = useFieldProps(props, {
+        valuePropsMapper: ({ value, onChange }) => ({
+            isSelected: value != null ? value : false,
+            isIndeterminate: false,
+            onChange: onChange,
+        }),
+    });
     let { qa, isDisabled = false, autoFocus, children, label, extra, labelProps, labelStyles, isLoading, insideForm, validationState, message, description, labelPosition, inputStyles, requiredMark = true, tooltip, labelSuffix, ...otherProps } = props;
     label = label || children;
     let styles = extractStyles(props, OUTER_STYLES);
@@ -140,13 +150,6 @@ function Switch(props, ref) {
     return (_jsxs(SwitchLabelElement, { styles: styles, mods: mods, ...hoverProps, ...filterBaseProps(otherProps), ref: domRef, children: [switchField, label && (_jsxs(Element, { styles: labelStyles, mods: {
                     disabled: isDisabled,
                 }, ...filterBaseProps(labelProps), children: [label, isLoading ? (_jsxs(_Fragment, { children: [label ? _jsx(_Fragment, { children: "\u00A0" }, void 0) : null, _jsx(LoadingOutlined, {}, void 0)] }, void 0)) : null] }, void 0))] }, void 0));
-}
-/**
- * Switches allow users to turn an individual option on or off.
- * They are usually used to activate or deactivate a specific setting.
- */
-let _Switch = forwardRef(Switch);
-_Switch.cubeInputType = 'Checkbox';
-export { _Switch as Switch };
+});
 
         

package/es/components/forms/TextArea/TextArea.js

@@ -1,30 +1,43 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d37d372
+ * @cube-dev/ui-kit v0.0.0-canary-5b7252a
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { useControlledState } from '@react-stately/utils';
 import { useTextField } from '@react-aria/textfield';
-import { TextInputBase, } from '../TextInput/TextInputBase';
+import { TextInputBase } from '../TextInput';
 import { useProviderProps } from '../../../provider';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
 import { chain, useLayoutEffect } from '../../../utils/react';
-function TextArea(props, ref) {
+import { useFieldProps } from '../Form';
+import { useEvent } from '../../../_internal';
+/**
+ * TextInputs are text inputs that allow users to input custom text entries
+ * with a keyboard. Various decorations can be displayed around the field to
+ * communicate the entry requirements.
+ */
+export const TextArea = forwardRef(function TextArea(props, ref) {
     props = castNullableStringValue(props);
     props = useProviderProps(props);
-    let { autoSize = false, isDisabled = false, isReadOnly = false, isRequired = false, onChange, rows, ...otherProps } = props;
-    rows = rows || 3;
-    let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue, () => { });
-    let inputRef = useRef(null);
-    let onHeightChange = useCallback(() => {
+    props = useFieldProps(props, {
+        defaultValidationTrigger: 'onBlur',
+        valuePropsMapper: ({ value, onChange }) => ({
+            onChange,
+            value: value?.toString() ?? '',
+        }),
+    });
+    const { autoSize = false, isDisabled = false, isReadOnly = false, isRequired = false, onChange, rows = 3, ...otherProps } = props;
+    const [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue, () => { });
+    const inputRef = useRef(null);
+    const onHeightChange = useEvent(() => {
         if (autoSize && inputRef.current) {
-            let input = inputRef.current;
-            let prevAlignment = input.style.alignSelf;
-            let computedStyle = getComputedStyle(input);
+            const input = inputRef.current;
+            const prevAlignment = input.style.alignSelf;
+            const computedStyle = getComputedStyle(input);
             input.style.alignSelf = 'start';
             input.style.height = 'auto';
             input.style.height = input.scrollHeight
@@ -35,26 +48,16 @@ function TextArea(props, ref) {
                     2}px`;
             input.style.alignSelf = prevAlignment;
         }
-    }, [inputRef]);
+    });
     useLayoutEffect(() => {
-        if (inputRef.current) {
-            onHeightChange();
-        }
-    }, [onHeightChange, inputValue, inputRef]);
-    let { labelProps, inputProps } = useTextField({
+        onHeightChange();
+    }, [onHeightChange, inputValue]);
+    const { labelProps, inputProps } = useTextField({
         ...props,
         onChange: chain(onChange, setInputValue),
         inputElementType: 'textarea',
     }, inputRef);
     return (_jsx(TextInputBase, { ...otherProps, ref: ref, multiLine: true, inputRef: inputRef, labelProps: labelProps, inputProps: inputProps, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, rows: rows }, void 0));
-}
-/**
- * TextInputs are text inputs that allow users to input custom text entries
- * with a keyboard. Various decorations can be displayed around the field to
- * communicate the entry requirements.
- */
-const _TextArea = forwardRef(TextArea);
-_TextArea.cubeInputType = 'Text';
-export { _TextArea as TextArea };
+});
 
         

package/es/components/forms/TextInput/TextInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d37d372
+ * @cube-dev/ui-kit v0.0.0-canary-5b7252a
  * Released under the MIT license.
  */
 
@@ -10,19 +10,26 @@ import { forwardRef, useRef } from 'react';
 import { useTextField } from '@react-aria/textfield';
 import { useProviderProps } from '../../../provider';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
+import { useFieldProps } from '../Form';
 import { TextInputBase } from './TextInputBase';
-export const TextInput = forwardRef(function TextInput(props, ref) {
-    castNullableStringValue(props);
-    props = useProviderProps(props);
-    let inputRef = useRef(null);
-    let { labelProps, inputProps } = useTextField(props, inputRef);
-    return (_jsx(TextInputBase, { ...props, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef }, void 0));
-});
 /**
  * TextInputs are text inputs that allow users to input custom text entries
  * with a keyboard. Various decorations can be displayed around the field to
  * communicate the entry requirements.
  */
-TextInput.cubeInputType = 'Text';
+export const TextInput = forwardRef(function TextInput(props, ref) {
+    props = castNullableStringValue(props);
+    props = useProviderProps(props);
+    props = useFieldProps(props, {
+        defaultValidationTrigger: 'onBlur',
+        valuePropsMapper: ({ value, onChange }) => ({
+            onChange,
+            value: value?.toString() ?? '',
+        }),
+    });
+    const inputRef = useRef(null);
+    const { labelProps, inputProps } = useTextField(props, inputRef);
+    return (_jsx(TextInputBase, { ...props, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef }, void 0));
+});