@cube-dev/ui-kit 0.0.0-canary-9917823 → 0.0.0-canary-2a1d026

package/es/components/forms/Form/Field/use-field-props.js

@@ -0,0 +1,57 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-2a1d026
+ * Released under the MIT license.
+ */
+
+import { useRef } from 'react';
+import { useDebugValue } from 'react';
+import { useChainedCallback, useEvent, useWarn } from '../../../../_internal';
+import { useField } from './use-field';
+import { useInsideLegacyField } from './LegacyField';
+export function useFieldProps(props, params = {}) {
+    // We use ref here to "memoize" initial value
+    const isDisabledRef = useRef(params.unsafe__isDisabled ?? false);
+    const { valuePropsMapper = ({ value, onChange }) => ({
+        value: value ?? null,
+        onChange,
+    }), defaultValidationTrigger = 'onBlur', } = params;
+    const isInsideLegacyField = useInsideLegacyField();
+    useWarn(isInsideLegacyField, '<Field /> is deprecated, use component without <Field /> instead.');
+    if (isInsideLegacyField || isDisabledRef.current || props.name == null) {
+        return props;
+    }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const field = useField(props, {
+        defaultValidationTrigger: params.defaultValidationTrigger,
+    });
+    const isOutsideOfForm = field?.form == null;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const onBlurChained = useChainedCallback(field?.onBlur, 
+    // TODO: remove type casting after updating to typescipt@4.9
+    'onBlur' in props ? props.onBlur : undefined);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const onChangeEvent = useEvent((value, dontTouch) => {
+        return field?.onChange?.(value, dontTouch, field?.validateTrigger ?? defaultValidationTrigger);
+    });
+    const result = isOutsideOfForm
+        ? props
+        : {
+            ...props,
+            ...field,
+            ...valuePropsMapper({
+                value: field.value,
+                onChange: onChangeEvent,
+            }),
+            validateTrigger: field.validateTrigger ?? defaultValidationTrigger,
+            onBlur: onBlurChained,
+        };
+    if (process.env.NODE_ENV === 'development') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useDebugValue(result);
+    }
+    return result;
+}
+
+        

package/es/components/forms/Form/Field/use-field.js

@@ -0,0 +1,129 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-2a1d026
+ * Released under the MIT license.
+ */
+
+import { useEffect, useMemo, useState } from 'react';
+import { useEvent, useWarn } from '../../../../_internal';
+import { useFormProps } from '../Form';
+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 useField(props, params) {
+    props = useFormProps(props);
+    let { defaultValue, id, idPrefix, name, form, rules, validateTrigger = params.defaultValidationTrigger, validationState, shouldUpdate, } = props;
+    const nonInput = !name;
+    const fieldName = name ?? '';
+    const [fieldId, setFieldId] = useState(id ?? (idPrefix ? `${idPrefix}_${fieldName}` : fieldName));
+    let field = form?.getFieldInstance(fieldName);
+    if (!field) {
+        field = form?.createField(fieldName, true);
+    }
+    useWarn(!form && name !== undefined, '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
+        }
+    });
+    return useMemo(() => ({
+        id: fieldId,
+        name: fieldName,
+        value: field?.inputValue,
+        validateTrigger,
+        form,
+        validationState: validationState ?? (field?.errors?.length ? 'invalid' : undefined),
+        ...(isRequired && { isRequired }),
+        ...(field?.errors?.length && { message: field.errors[0] }),
+        onBlur: onBlurHandler,
+        onChange: onChangeHandler,
+    }), [
+        form,
+        field?.errors,
+        field?.inputValue,
+        fieldId,
+        fieldName,
+        isRequired,
+        onBlurHandler,
+        onChangeHandler,
+        validateTrigger,
+        validationState,
+    ]);
+}
+
+        

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-9917823
+ * @cube-dev/ui-kit v0.0.0-canary-2a1d026
  * Released under the MIT license.
  */
 
@@ -106,7 +106,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,
     });
@@ -138,7 +138,7 @@ function Form(props, ref) {
             form?.setInitialFieldsValue(defaultValues);
         }
     }, [defaultValues]);
-    return (_jsx(FormElement, { ...filterBaseProps(otherProps, { propNames: formPropNames }), ref: domRef, noValidate: true, styles: styles, mods: { 'has-sider': labelPosition === 'side', horizontal: isHorizontal }, onSubmit: onSubmitCallback, 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));
+    return (_jsx(FormElement, { ...filterBaseProps(otherProps, { propNames: formPropNames }), ref: domRef, noValidate: true, styles: styles, mods: { 'has-sider': labelPosition === 'side', horizontal: isHorizontal }, onSubmit: onSubmitCallback, children: _jsx(FormContext.Provider, { value: ctx, children: _jsx(Provider, { insideForm: true, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, validationState: validationState, children: children }) }) }));
 }
 /**
  * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.

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

@@ -0,0 +1,22 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-2a1d026
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useProviderProps } from '../../../../provider';
+import { useFormProps } from '../Form';
+import { Button } from '../../../actions';
+export const Submit = forwardRef(function Submit(props, ref) {
+    props = useProviderProps(props);
+    props = useFormProps(props);
+    const { form, ...otherProps } = props;
+    const formData = form?.getFieldsValue() ?? {};
+    const isInvalid = Object.keys(formData).some((name) => form?.isFieldInvalid(name) ?? false);
+    return (_jsx(Button, { ref: ref, type: "primary", htmlType: "submit", isLoading: form?.isSubmitting, isDisabled: isInvalid, ...otherProps }));
+});
+
+        

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

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-2a1d026
+ * Released under the MIT license.
+ */
+
+export * from './Submit';
+
+        

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9917823
+ * @cube-dev/ui-kit v0.0.0-canary-2a1d026
  * Released under the MIT license.
  */
 
@@ -21,7 +21,7 @@ export const SubmitError = function SubmitError(props) {
         typeof submitError !== 'string') {
         submitError = 'Internal error';
     }
-    return (_jsx(Alert, { theme: "danger", ...props, children: submitError }, void 0));
+    return (_jsx(Alert, { theme: "danger", ...props, children: submitError }));
 };
 
         

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

@@ -1,15 +1,17 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9917823
+ * @cube-dev/ui-kit v0.0.0-canary-2a1d026
  * Released under the MIT license.
  */
 
+import { Submit } from './Submit';
 import { Field } from './Field';
 import { SubmitError } from './SubmitError';
 import { useForm } from './useForm';
 import { useFormProps, FormContext, Form as _Form } from './Form';
-const Form = Object.assign(_Form, { Item: Field, useForm, SubmitError });
-export { useFormProps, Form, Field, useForm, FormContext, SubmitError };
+const Form = Object.assign(_Form, { Item: Field, useForm, Submit, SubmitError });
+export { useFormProps, Form, Field, useForm, FormContext, Submit, SubmitError };
+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-9917823
+ * @cube-dev/ui-kit v0.0.0-canary-2a1d026
  * 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-9917823
+ * @cube-dev/ui-kit v0.0.0-canary-2a1d026
  * Released under the MIT license.
  */
 
@@ -217,6 +217,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-9917823
+ * @cube-dev/ui-kit v0.0.0-canary-2a1d026
  * Released under the MIT license.
  */
 

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

@@ -1,20 +1,16 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9917823
+ * @cube-dev/ui-kit v0.0.0-canary-2a1d026
  * Released under the MIT license.
  */
 
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { TextInput } from '../TextInput/TextInput';
+import { TextInput } from '../TextInput';
 import { PasswordInput } from '../PasswordInput/PasswordInput';
 import { NumberInput } from '../NumberInput/NumberInput';
 import { FileInput } from '../FileInput/FileInput';
 import { TextArea } from '../TextArea/TextArea';
-export const Input = Object.assign(forwardRef(function Input(props, ref) {
-    return _jsx(TextInput, { ref: ref, ...props }, void 0);
-}), {
+export const Input = Object.assign(TextInput, {
     Text: TextInput,
     Password: PasswordInput,
     Number: NumberInput,

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-9917823
+ * @cube-dev/ui-kit v0.0.0-canary-2a1d026
  * 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-9917823
+ * @cube-dev/ui-kit v0.0.0-canary-2a1d026
  * Released under the MIT license.
  */
 
@@ -16,7 +16,7 @@ const REQUIRED_ICON = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", versio
         width: '.8em',
         height: '.8em',
         transform: 'rotate(-5deg)',
-    }, children: _jsx("switch", { children: _jsx("g", { children: _jsx("polygon", { fill: "currentColor", points: "97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57" }, void 0) }, void 0) }, void 0) }, void 0));
+    }, children: _jsx("switch", { children: _jsx("g", { children: _jsx("polygon", { fill: "currentColor", points: "97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57" }) }) }) }));
 const INTL_MESSAGES = {
     '(required)': '(required)',
     '(optional)': '(optional)',
@@ -58,7 +58,7 @@ function Label(props, ref) {
         : formatMessage('(optional)');
     let icon = (_jsx("span", { "aria-label": includeNecessityIndicatorInAccessibilityName
             ? formatMessage('(required)')
-            : undefined, children: REQUIRED_ICON }, void 0));
+            : undefined, children: REQUIRED_ICON }));
     return (_jsx(LabelElement, { ...filterBaseProps(otherProps), ref: domRef, styles: styles, htmlFor: labelFor || htmlFor, mods: {
             side: labelPosition === 'side',
             disabled: isDisabled,
@@ -68,7 +68,7 @@ function Label(props, ref) {
                     (necessityIndicator === 'icon' && isRequired)) &&
                     ' \u200b', necessityIndicator === 'label' && (_jsx("span", { "aria-hidden": !includeNecessityIndicatorInAccessibilityName
                         ? isRequired
-                        : undefined, children: necessityLabel }, void 0)), necessityIndicator === 'icon' && isRequired && icon] }, void 0)) }, void 0));
+                        : undefined, children: necessityLabel })), necessityIndicator === 'icon' && isRequired && icon] })) }));
 }
 let _Label = forwardRef(Label);
 export { _Label as Label };

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-9917823
+ * @cube-dev/ui-kit v0.0.0-canary-2a1d026
  * Released under the MIT license.
  */
 
@@ -10,9 +10,9 @@ import { forwardRef, useRef } from 'react';
 import { useLocale } from '@react-aria/i18n';
 import { useNumberFieldState } from '@react-stately/numberfield';
 import { useNumberField } from '@react-aria/numberfield';
-import { useFormProps } from '../Form';
+import { useFieldProps } from '../Form';
 import { useProviderProps } from '../../../provider';
-import { TextInputBase, } from '../TextInput/TextInputBase';
+import { TextInputBase } from '../TextInput';
 import { tasty } from '../../../tasty';
 import { castNullableNumberValue, } from '../../../utils/react/nullableValue';
 import { StepButton } from './StepButton';
@@ -30,23 +30,29 @@ const StepperContainer = tasty({
         placeSelf: 'stretch',
     },
 });
-function NumberInput(props, ref) {
+/**
+ * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.
+ */
+export const NumberInput = forwardRef(function NumberInput(props, ref) {
     props = castNullableNumberValue(props);
     props = useProviderProps(props);
-    props = useFormProps(props);
+    props = useFieldProps(props);
     let { hideStepper, suffix, 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(StyledTextInputBase, { ...otherProps, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? (_jsxs(StepperContainer, { children: [_jsx(StepButton, { isDisabled: props.isDisabled, direction: "up", ...incrementButtonProps, size: otherProps.size }, void 0), _jsx(StepButton, { isDisabled: props.isDisabled, direction: "down", ...decrementButtonProps, size: otherProps.size }, void 0)] }, void 0)) : (suffix) }, void 0));
-}
+    return (_jsx(StyledTextInputBase, { ...otherProps, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? (_jsxs(StepperContainer, { children: [_jsx(StepButton, { isDisabled: props.isDisabled, direction: "up", ...incrementButtonProps, size: otherProps.size }), _jsx(StepButton, { isDisabled: props.isDisabled, direction: "down", ...decrementButtonProps, size: otherProps.size })] })) : (suffix) }));
+});
 /**
- * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.
+ * @legacy should be removed with legacy <Field />
  */
-const _NumberInput = forwardRef(NumberInput);
-_NumberInput.cubeInputType = 'Number';
-export { _NumberInput as NumberInput };
+Object.defineProperty(NumberInput, 'cubeInputType', {
+    enumerable: false,
+    configurable: false,
+    writable: false,
+    value: 'Number',
+});
 
         

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-9917823
+ * @cube-dev/ui-kit v0.0.0-canary-2a1d026
  * Released under the MIT license.
  */
 
@@ -32,10 +32,10 @@ const STEP_BUTTON_STYLES = {
  * Buttons for NumberField.
  */
 export function StepButton(props) {
-    return (_jsx(Button, { preventDefault: true, type: "neutral", styles: STEP_BUTTON_STYLES, icon: props.direction === 'up' ? (_jsx(CaretUpOutlined, { style: { fontSize: 'var(--icon-size)' } }, void 0)) : (_jsx(CaretDownOutlined, { style: { fontSize: 'var(--icon-size)' } }, void 0)), mods: {
+    return (_jsx(Button, { preventDefault: true, type: "neutral", styles: STEP_BUTTON_STYLES, icon: props.direction === 'up' ? (_jsx(CaretUpOutlined, { style: { fontSize: 'var(--icon-size)' } })) : (_jsx(CaretDownOutlined, { style: { fontSize: 'var(--icon-size)' } })), mods: {
             up: props.direction === 'up',
             down: props.direction === 'down',
-        }, label: `Step ${props.direction}`, ...props }, void 0));
+        }, label: `Step ${props.direction}`, ...props }));
 }
 
         

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-9917823
+ * @cube-dev/ui-kit v0.0.0-canary-2a1d026
  * Released under the MIT license.
  */
 
@@ -9,13 +9,22 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef, useCallback, useRef, useState } from 'react';
 import { useTextField } from '@react-aria/textfield';
 import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
-import { TextInputBase, } from '../TextInput/TextInputBase';
+import { TextInputBase } from '../TextInput';
 import { useProviderProps } from '../../../provider';
 import { Button } from '../../actions';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
+import { useFieldProps } from '../Form';
 function PasswordInput(props, ref) {
     props = castNullableStringValue(props);
-    let { suffix, multiLine, ...otherProps } = useProviderProps({ ...props });
+    props = useProviderProps(props);
+    props = useFieldProps(props, {
+        defaultValidationTrigger: 'onBlur',
+        valuePropsMapper: ({ value, onChange }) => ({
+            value: value?.toString() ?? '',
+            onChange,
+        }),
+    });
+    const { suffix, multiLine, ...otherProps } = props;
     let [type, setType] = useState('password');
     let inputRef = useRef(null);
     let { labelProps, inputProps } = useTextField({
@@ -25,8 +34,8 @@ function PasswordInput(props, ref) {
     const toggleType = useCallback((e) => {
         setType((type) => (type === 'password' ? 'text' : 'password'));
     }, []);
-    const wrappedSuffix = (_jsxs(_Fragment, { children: [suffix, _jsx(Button, { excludeFromTabOrder: true, type: "neutral", htmlType: "button", placeSelf: "stretch", height: "auto", radius: "right", width: "4x", label: "Toggle masking", icon: type === 'password' ? _jsx(EyeInvisibleOutlined, {}, void 0) : _jsx(EyeOutlined, {}, void 0), onPress: toggleType }, void 0)] }, void 0));
-    return (_jsx(TextInputBase, { ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...otherProps }, void 0));
+    const wrappedSuffix = (_jsxs(_Fragment, { children: [suffix, _jsx(Button, { excludeFromTabOrder: true, type: "neutral", htmlType: "button", placeSelf: "stretch", height: "auto", radius: "right", width: "4x", label: "Toggle masking", icon: type === 'password' ? _jsx(EyeInvisibleOutlined, {}) : _jsx(EyeOutlined, {}), onPress: toggleType })] }));
+    return (_jsx(TextInputBase, { ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...otherProps }));
 }
 /**
  * PasswordInputs are password inputs that allow users to input passwords or code entries
@@ -34,7 +43,15 @@ function PasswordInput(props, ref) {
  * communicate the entry requirements.
  */
 const _PasswordInput = forwardRef(PasswordInput);
-_PasswordInput.cubeInputType = 'Text';
+/**
+ * @legacy should be removed with legacy <Field />
+ */
+Object.defineProperty(_PasswordInput, 'cubeInputType', {
+    enumerable: false,
+    configurable: false,
+    writable: false,
+    value: 'Text',
+});
 export { _PasswordInput as PasswordInput };
 
         

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-9917823
+ * @cube-dev/ui-kit v0.0.0-canary-2a1d026
  * Released under the MIT license.
  */
 
@@ -16,7 +16,7 @@ import { mergeProps } from '../../../utils/react';
 import { useProviderProps } from '../../../provider';
 import { INLINE_LABEL_STYLES } from '../Label';
 import { HiddenInput } from '../../HiddenInput';
-import { useFormProps } from '../Form';
+import { useFieldProps } from '../Form';
 import { RadioGroup } from './RadioGroup';
 import { useRadioProvider } from './context';
 const RadioWrapperElement = tasty({
@@ -107,17 +107,17 @@ const RadioNormalElement = tasty({
         },
     },
 });
-const RadioCircleElement = _jsx("div", { "data-element": "RadioCircle" }, void 0);
+const RadioCircleElement = _jsx("div", { "data-element": "RadioCircle" });
 const RadioLabelElement = tasty({
     qa: 'RadioLabel',
     styles: INLINE_LABEL_STYLES,
 });
 function Radio(props, ref) {
     props = useProviderProps(props);
-    props = useFormProps(props);
+    props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });
     let { qa, isDisabled, validationState, children, label, autoFocus, labelStyles, labelProps, inputStyles, type = 'radio', 'aria-label': ariaLabel, ...otherProps } = props;
     let isButton = type === 'button';
-    label = label || children;
+    label = label ?? children;
     let styles = extractStyles(otherProps, OUTER_STYLES);
     const RadioElement = isButton ? RadioButtonElement : RadioNormalElement;
     labelStyles = {
@@ -141,22 +141,22 @@ function Radio(props, ref) {
             invalid: validationState === 'invalid',
             hovered: isHovered,
             button: isButton,
-        }, "data-type": type, children: [_jsx(HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...mergeProps(inputProps, focusProps), ref: inputRef, isButton: isButton }, void 0), _jsx(RadioElement, { mods: {
+        }, "data-type": type, children: [_jsx(HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...mergeProps(inputProps, focusProps), ref: inputRef, isButton: isButton }), _jsx(RadioElement, { mods: {
                     checked: inputProps.checked,
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,
                     hovered: isHovered,
                     focused: isFocused,
-                }, "data-type": type, styles: inputStyles, children: !isButton ? RadioCircleElement : children }, void 0), label && !isButton && (_jsx(RadioLabelElement, { mods: {
+                }, "data-type": type, styles: inputStyles, children: !isButton ? RadioCircleElement : children }), label && !isButton && (_jsx(RadioLabelElement, { mods: {
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,
-                }, ...filterBaseProps(labelProps), children: label }, void 0))] }, void 0));
+                }, ...filterBaseProps(labelProps), children: label }))] }));
 }
 function RadioButton(props, ref) {
     const Radio = _Radio;
-    return _jsx(Radio, { ...props, ref: ref, type: "button" }, void 0);
+    return _jsx(Radio, { ...props, ref: ref, type: "button" });
 }
 /**
  * Radio buttons allow users to select a single option from a list of mutually exclusive options.
@@ -172,6 +172,15 @@ const __Radio = Object.assign(_Radio, {
     Group: RadioGroup,
     Button: _RadioButton,
 });
+/**
+ * @legacy should be removed with legacy <Field />
+ */
+Object.defineProperty(_Radio, 'cubeInputType', {
+    enumerable: false,
+    configurable: false,
+    writable: false,
+    value: 'Radio',
+});
 export { __Radio as Radio };
 export { _RadioButton as RadioButton };