@cube-dev/ui-kit 0.0.0-canary-40d6b68 → 0.0.0-canary-2db10d4

package/cjs/components/forms/Checkbox/CheckboxGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-40d6b68
+ * @cube-dev/ui-kit v0.0.0-canary-2db10d4
  * Released under the MIT license.
  */
 
@@ -10,10 +10,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxGroup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const utils_1 = require("@react-spectrum/utils");
 const checkbox_1 = require("@react-aria/checkbox");
 const checkbox_2 = require("@react-stately/checkbox");
 const provider_1 = require("../../../provider");
-const Form_1 = require("../Form");
+const Form_1 = require("../Form/Form");
 const tasty_1 = require("../../../tasty");
 const FieldWrapper_1 = require("../FieldWrapper");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
@@ -47,26 +48,22 @@ const CheckGroupElement = (0, tasty_1.tasty)({
         padding: '(1x - 1bw) 0',
     },
 });
-/**
- * Checkbox groups allow users to select a single option from a list of mutually exclusive options.
- * All possible options are exposed up front for users to compare.
- */
-exports.CheckboxGroup = (0, react_1.forwardRef)(function CheckboxGroup(props, ref) {
+function CheckboxGroup(props, ref) {
     props = (0, nullableValue_1.castNullableArrayValue)(props);
     props = (0, provider_1.useProviderProps)(props);
-    props = (0, Form_1.useFieldProps)(props, {
-        defaultValidationTrigger: 'onChange',
-        valuePropsMapper: ({ value, onChange }) => ({
-            value: value != null ? value : [],
-            onChange: onChange,
-        }),
-    });
-    const { isDisabled, isRequired, necessityIndicator, necessityLabel, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, labelSuffix, ...otherProps } = props;
-    const styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, WRAPPER_STYLES);
-    const groupStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.BLOCK_STYLES);
-    const state = (0, checkbox_2.useCheckboxGroupState)(props);
-    const { groupProps, labelProps } = (0, checkbox_1.useCheckboxGroup)(props, state);
-    const radioGroup = ((0, jsx_runtime_1.jsx)(CheckGroupElement, { styles: groupStyles, mods: { horizontal: orientation === 'horizontal' }, children: (0, jsx_runtime_1.jsx)(Form_1.FormContext.Provider, { value: { isDisabled, validationState }, children: (0, jsx_runtime_1.jsx)(context_1.CheckboxGroupContext.Provider, { value: state, children: children }, void 0) }, void 0) }, void 0));
+    props = (0, Form_1.useFormProps)(props);
+    let { isDisabled, isRequired, necessityIndicator, necessityLabel, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, labelSuffix, ...otherProps } = props;
+    let domRef = (0, utils_1.useDOMRef)(ref);
+    let styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, WRAPPER_STYLES);
+    let groupStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.BLOCK_STYLES);
+    let state = (0, checkbox_2.useCheckboxGroupState)(props);
+    let { groupProps, labelProps } = (0, checkbox_1.useCheckboxGroup)(props, state);
+    let radioGroup = ((0, jsx_runtime_1.jsx)(CheckGroupElement, { styles: groupStyles, mods: {
+            horizontal: orientation === 'horizontal',
+        }, children: (0, jsx_runtime_1.jsx)(Form_1.FormContext.Provider, { value: {
+                isDisabled,
+                validationState,
+            }, children: (0, jsx_runtime_1.jsx)(context_1.CheckboxGroupContext.Provider, { value: state, children: children }, void 0) }, void 0) }, void 0));
     return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
             labelPosition,
             label,
@@ -86,17 +83,15 @@ exports.CheckboxGroup = (0, react_1.forwardRef)(function CheckboxGroup(props, re
             tooltip,
             labelSuffix,
             Component: radioGroup,
-            ref,
+            ref: domRef,
         } }, void 0));
-});
+}
 /**
- * @legacy should be removed with legacy <Field />
+ * Checkbox groups allow users to select a single option from a list of mutually exclusive options.
+ * All possible options are exposed up front for users to compare.
  */
-Object.defineProperty(exports.CheckboxGroup, 'cubeInputType', {
-    enumerable: false,
-    configurable: false,
-    writable: false,
-    value: 'CheckboxGroup',
-});
+const _CheckboxGroup = (0, react_1.forwardRef)(CheckboxGroup);
+exports.CheckboxGroup = _CheckboxGroup;
+_CheckboxGroup.cubeInputType = 'CheckboxGroup';
 
         

package/cjs/components/forms/Checkbox/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-40d6b68
+ * @cube-dev/ui-kit v0.0.0-canary-2db10d4
  * Released under the MIT license.
  */
 

package/cjs/components/forms/{FieldWrapper/FieldWrapper.js → FieldWrapper.js}

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-40d6b68
+ * @cube-dev/ui-kit v0.0.0-canary-2db10d4
  * Released under the MIT license.
  */
 
@@ -11,14 +11,14 @@ exports.FieldWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const icons_1 = require("@ant-design/icons");
-const Paragraph_1 = require("../../content/Paragraph");
-const tasty_1 = require("../../../tasty");
-const TooltipProvider_1 = require("../../overlays/Tooltip/TooltipProvider");
-const Text_1 = require("../../content/Text");
-const react_2 = require("../../../utils/react");
-const Space_1 = require("../../layout/Space");
-const Flex_1 = require("../../layout/Flex");
-const Label_1 = require("../Label");
+const Paragraph_1 = require("../content/Paragraph");
+const tasty_1 = require("../../tasty");
+const TooltipProvider_1 = require("../overlays/Tooltip/TooltipProvider");
+const Text_1 = require("../content/Text");
+const react_2 = require("../../utils/react");
+const Space_1 = require("../layout/Space");
+const Flex_1 = require("../layout/Flex");
+const Label_1 = require("./Label");
 const FieldElement = (0, tasty_1.tasty)({
     qa: 'Field',
     styles: {
@@ -53,9 +53,6 @@ const FieldElement = (0, tasty_1.tasty)({
         },
     },
 });
-if (process.env.NODE_ENV === 'development') {
-    FieldElement.displayName = 'FieldWrapperElement';
-}
 const MessageElement = (0, tasty_1.tasty)({
     qa: 'Field_Message',
     styles: {
@@ -70,11 +67,7 @@ const MessageElement = (0, tasty_1.tasty)({
         userSelect: 'none',
     },
 });
-/**
- * A wrapper for form fields to provide additional decoration for inputs.
- * @internal Do not use this component directly.
- */
-exports.FieldWrapper = (0, react_1.forwardRef)(function FieldWrapper(props, ref) {
+function FieldWrapper(props, ref) {
     const { as, labelPosition = 'top', label, extra, styles, isRequired, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, Component, validationState, requiredMark = true, tooltip, isHidden, labelSuffix, } = props;
     const labelComponent = label ? ((0, jsx_runtime_1.jsx)(Label_1.Label, { as: as === 'label' ? 'div' : 'label', styles: labelStyles, labelPosition: labelPosition, isRequired: requiredMark ? isRequired : false, isDisabled: isDisabled, necessityIndicator: necessityIndicator, validationState: validationState, "aria-label": label, ...labelProps, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { placeContent: "baseline space-between", width: "100%", children: [(0, jsx_runtime_1.jsxs)(Space_1.Space, { placeItems: "center", gap: "0.25x", children: [(0, jsx_runtime_1.jsx)("div", { children: label }, void 0), tooltip ? ((0, jsx_runtime_1.jsx)(TooltipProvider_1.TooltipProvider, { activeWrap: true, title: tooltip, width: "initial max-content 40x", children: (0, jsx_runtime_1.jsx)(icons_1.InfoCircleOutlined, { style: { color: 'var(--primary-color)', margin: '0 4px' } }, void 0) }, void 0)) : null, (0, jsx_runtime_1.jsx)("div", { children: labelSuffix }, void 0)] }, void 0), extra && (0, jsx_runtime_1.jsx)(Text_1.Text, { preset: "t3", children: extra }, void 0)] }, void 0) }, void 0)) : null;
     let descriptionComponent = description ? ((0, jsx_runtime_1.jsx)("div", { "data-element": "Description", children: (0, react_2.wrapNodeIfPlain)(description, () => ((0, jsx_runtime_1.jsx)(Paragraph_1.Paragraph, { children: description }, void 0))) }, void 0)) : null;
@@ -84,7 +77,12 @@ exports.FieldWrapper = (0, react_1.forwardRef)(function FieldWrapper(props, ref)
         invalid: validationState === 'invalid',
         valid: validationState === 'valid',
     };
-    return ((0, jsx_runtime_1.jsxs)(FieldElement, { ref: ref, as: as ?? 'div', mods: mods, isHidden: isHidden, styles: styles, ...fieldProps, children: [labelComponent || descriptionComponent ? ((0, jsx_runtime_1.jsxs)("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] }, void 0)) : null, (0, jsx_runtime_1.jsxs)("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && ((0, jsx_runtime_1.jsx)(MessageElement, { mods: mods, styles: messageStyles, role: validationState === 'invalid' ? 'alert' : undefined, children: message }, void 0))] }, void 0)] }, void 0));
-});
+    return ((0, jsx_runtime_1.jsxs)(FieldElement, { ref: ref, as: as || 'div', mods: mods, isHidden: isHidden, styles: styles, ...fieldProps, children: [labelComponent || descriptionComponent ? ((0, jsx_runtime_1.jsxs)("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] }, void 0)) : null, (0, jsx_runtime_1.jsxs)("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && ((0, jsx_runtime_1.jsx)(MessageElement, { mods: mods, styles: messageStyles, role: validationState === 'invalid' ? 'alert' : undefined, children: message }, void 0))] }, void 0)] }, void 0));
+}
+/**
+ * A wrapper for form fields to provide additional decoration for inputs.
+ */
+const _FieldWrapper = (0, react_1.forwardRef)(FieldWrapper);
+exports.FieldWrapper = _FieldWrapper;
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-40d6b68
+ * @cube-dev/ui-kit v0.0.0-canary-2db10d4
  * Released under the MIT license.
  */
 
@@ -12,10 +12,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("@react-spectrum/utils");
 const provider_1 = require("../../../provider");
-const actions_1 = require("../../actions");
+const Action_1 = require("../../actions/Action");
 const tasty_1 = require("../../../tasty");
 const FieldWrapper_1 = require("../FieldWrapper");
-const FileInputElement = (0, tasty_1.tasty)(actions_1.Action, {
+const FileInputElement = (0, tasty_1.tasty)(Action_1.Action, {
     styles: {
         display: 'inline-flex',
         position: 'relative',

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

@@ -1,19 +1,19 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-40d6b68
+ * @cube-dev/ui-kit v0.0.0-canary-2db10d4
  * Released under the MIT license.
  */
 
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useInsideLegacyField = exports.Field = void 0;
+exports.Field = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const _internal_1 = require("../../../../_internal");
-const react_2 = require("../../../../utils/react");
-const FieldWrapper_1 = require("../../FieldWrapper");
-const Form_1 = require("../Form");
+const react_2 = require("../../../utils/react");
+const FieldWrapper_1 = require("../FieldWrapper");
+const warnings_1 = require("../../../utils/warnings");
+const Form_1 = require("./Form");
 const ID_MAP = {};
 function createId(name) {
     if (!name)
@@ -86,22 +86,13 @@ function getValueProps(type, value, onChange, allowsCustomValue) {
         onChange,
     };
 }
-/**
- * @deprecated Use component without `Field`
- *
- * ```tsx
-    <Form>
-        <Checkbox />
-    </Form>
- *```
- */
-function Field(props) {
-    const fullProps = (0, Form_1.useFormProps)(props);
-    let { defaultValue, type: inputType, id, idPrefix, children, name, form, rules, label, extra, validateTrigger, validationState, necessityLabel, necessityIndicator, shouldUpdate, message, description, tooltip, isHidden, isDisabled, isLoading, styles, labelPosition = 'top', labelStyles, labelSuffix, } = fullProps;
+function Field(allProps) {
+    const props = (0, Form_1.useFormProps)(allProps);
+    let { defaultValue, type: inputType, id, idPrefix, children, name, form, rules, label, extra, validateTrigger, validationState, necessityLabel, necessityIndicator, shouldUpdate, message, description, tooltip, isHidden, isDisabled, isLoading, styles, labelPosition = 'top', labelStyles, labelSuffix, } = 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, _internal_1.useWarn)(!form, 'Form Field requires declared form instance if field name is specified');
     (0, react_1.useEffect)(() => {
         let newId;
         if (!id && !nonInput) {
@@ -139,27 +130,32 @@ function Field(props) {
         return null;
     let child = react_1.Children.only(children);
     if (nonInput) {
-        return ((0, jsx_runtime_1.jsx)(LegacyFieldProvider, { children: (0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { isHidden: isHidden, isDisabled: isDisabled, validationState: validationState, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isRequired: isRequired, label: label, extra: extra, tooltip: tooltip, message: message, description: description, Component: child, styles: styles, labelPosition: labelPosition, labelStyles: labelStyles, labelSuffix: labelSuffix }, void 0) }, void 0));
+        return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { isHidden: isHidden, isDisabled: isDisabled, validationState: validationState, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isRequired: isRequired, label: label, extra: extra, tooltip: tooltip, message: message, description: description, Component: child, styles: styles, labelPosition: labelPosition, labelStyles: labelStyles, labelSuffix: labelSuffix }, void 0));
     }
     if (!form) {
+        (0, warnings_1.warn)('Form Field requires declared form instance if field name is specified');
         return null;
     }
     inputType =
         inputType || child.type.cubeInputType || 'Text';
     const defaultValidateTrigger = getDefaultValidateTrigger(inputType);
-    if (field) {
-        field.rules = rules;
-        if (defaultValue != null && !field.touched) {
-            form?.setFieldValue(fieldName, defaultValue, false, true);
+    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, jsx_runtime_1.jsx)(LegacyFieldProvider, { children: (0, react_1.cloneElement)(child, (0, react_2.mergeProps)(child.props, {
-                ...getValueProps(inputType),
-                label: fieldName,
-                name: fieldName,
-                id: fieldId,
-            })) }, void 0));
+        return (0, react_1.cloneElement)(child, (0, react_2.mergeProps)(child.props, {
+            ...getValueProps(inputType),
+            label: fieldName,
+            name: fieldName,
+            id: fieldId,
+        }));
     }
     if (!validateTrigger) {
         validateTrigger = defaultValidateTrigger;
@@ -242,19 +238,8 @@ function Field(props) {
     Object.assign(newProps, getValueProps(inputType, field?.inputValue, onChangeHandler, child.props.allowsCustomValue));
     const { onChange, onSelectionChange, ...childProps } = child.props;
     // onChange event passed to the child should be executed after Form onChange logic
-    return ((0, jsx_runtime_1.jsx)(LegacyFieldProvider, { children: (0, react_1.cloneElement)(child, (0, react_2.mergeProps)(childProps, newProps, onChange ? { onChange } : {}, onSelectionChange ? { onSelectionChange } : {})) }, void 0));
+    return (0, react_1.cloneElement)(child, (0, react_2.mergeProps)(childProps, newProps, onChange ? { onChange } : {}, onSelectionChange ? { onSelectionChange } : {}));
 }
 exports.Field = Field;
-const LegacyFieldContext = (0, react_1.createContext)({
-    insideLegacyField: false,
-});
-function LegacyFieldProvider({ children }) {
-    return ((0, jsx_runtime_1.jsx)(LegacyFieldContext.Provider, { value: { insideLegacyField: true }, children: children }, void 0));
-}
-function useInsideLegacyField() {
-    const { insideLegacyField } = (0, react_1.useContext)(LegacyFieldContext);
-    return insideLegacyField;
-}
-exports.useInsideLegacyField = useInsideLegacyField;
 
         

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-40d6b68
+ * @cube-dev/ui-kit v0.0.0-canary-2db10d4
  * Released under the MIT license.
  */
 

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

@@ -1,25 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-40d6b68
+ * @cube-dev/ui-kit v0.0.0-canary-2db10d4
  * Released under the MIT license.
  */
 
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubmitError = exports.Submit = exports.FormContext = exports.useForm = exports.Field = exports.Form = exports.useFormProps = void 0;
-const Submit_1 = require("./Submit");
-Object.defineProperty(exports, "Submit", { enumerable: true, get: function () { return Submit_1.Submit; } });
+exports.SubmitError = exports.FormContext = 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 SubmitError_1 = require("./SubmitError");
@@ -29,8 +17,7 @@ Object.defineProperty(exports, "useForm", { enumerable: true, get: function () {
 const Form_1 = require("./Form");
 Object.defineProperty(exports, "useFormProps", { enumerable: true, get: function () { return Form_1.useFormProps; } });
 Object.defineProperty(exports, "FormContext", { enumerable: true, get: function () { return Form_1.FormContext; } });
-const Form = Object.assign(Form_1.Form, { Item: Field_1.Field, useForm: useForm_1.useForm, Submit: Submit_1.Submit, SubmitError: SubmitError_1.SubmitError });
+const Form = Object.assign(Form_1.Form, { Item: Field_1.Field, useForm: useForm_1.useForm, SubmitError: SubmitError_1.SubmitError });
 exports.Form = Form;
-__exportStar(require("./Field"), exports);
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-40d6b68
+ * @cube-dev/ui-kit v0.0.0-canary-2db10d4
  * Released under the MIT license.
  */
 

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-40d6b68
+ * @cube-dev/ui-kit v0.0.0-canary-2db10d4
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Input/Input.js

@@ -1,19 +1,23 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-40d6b68
+ * @cube-dev/ui-kit v0.0.0-canary-2db10d4
  * Released under the MIT license.
  */
 
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
-const TextInput_1 = require("../TextInput");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TextInput_1 = require("../TextInput/TextInput");
 const PasswordInput_1 = require("../PasswordInput/PasswordInput");
 const NumberInput_1 = require("../NumberInput/NumberInput");
 const FileInput_1 = require("../FileInput/FileInput");
 const TextArea_1 = require("../TextArea/TextArea");
-exports.Input = Object.assign(TextInput_1.TextInput, {
+exports.Input = Object.assign((0, react_1.forwardRef)(function Input(props, ref) {
+    return (0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { ref: ref, ...props }, void 0);
+}), {
     Text: TextInput_1.TextInput,
     Password: PasswordInput_1.PasswordInput,
     Number: NumberInput_1.NumberInput,

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-40d6b68
+ * @cube-dev/ui-kit v0.0.0-canary-2db10d4
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Label.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-40d6b68
+ * @cube-dev/ui-kit v0.0.0-canary-2db10d4
  * Released under the MIT license.
  */
 

package/cjs/components/forms/NumberInput/NumberInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-40d6b68
+ * @cube-dev/ui-kit v0.0.0-canary-2db10d4
  * Released under the MIT license.
  */
 
@@ -15,7 +15,7 @@ const numberfield_1 = require("@react-stately/numberfield");
 const numberfield_2 = require("@react-aria/numberfield");
 const Form_1 = require("../Form");
 const provider_1 = require("../../../provider");
-const TextInput_1 = require("../TextInput");
+const TextInputBase_1 = require("../TextInput/TextInputBase");
 const tasty_1 = require("../../../tasty");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
 const StepButton_1 = require("./StepButton");
@@ -28,29 +28,23 @@ const StepperContainer = (0, tasty_1.tasty)({
         placeSelf: 'stretch',
     },
 });
-/**
- * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.
- */
-exports.NumberInput = (0, react_1.forwardRef)(function NumberInput(props, ref) {
+function NumberInput(props, ref) {
     props = (0, nullableValue_1.castNullableNumberValue)(props);
     props = (0, provider_1.useProviderProps)(props);
-    props = (0, Form_1.useFieldProps)(props);
+    props = (0, Form_1.useFormProps)(props);
     let { hideStepper, suffix, value, defaultValue, onChange, ...otherProps } = props;
     let showStepper = !hideStepper;
     let { locale } = (0, i18n_1.useLocale)();
     let state = (0, numberfield_1.useNumberFieldState)({ ...props, locale });
     let inputRef = (0, react_1.useRef)(null);
     let { groupProps, labelProps, inputProps, incrementButtonProps, decrementButtonProps, } = (0, numberfield_2.useNumberField)(props, state, inputRef);
-    return ((0, jsx_runtime_1.jsx)(TextInput_1.TextInputBase, { ...otherProps, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? ((0, jsx_runtime_1.jsxs)(StepperContainer, { children: [(0, jsx_runtime_1.jsx)(StepButton_1.StepButton, { isDisabled: props.isDisabled, direction: "up", ...incrementButtonProps, size: otherProps.size }, void 0), (0, jsx_runtime_1.jsx)(StepButton_1.StepButton, { isDisabled: props.isDisabled, direction: "down", ...decrementButtonProps, size: otherProps.size }, void 0)] }, void 0)) : (suffix) }, void 0));
-});
+    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ...otherProps, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? ((0, jsx_runtime_1.jsxs)(StepperContainer, { children: [(0, jsx_runtime_1.jsx)(StepButton_1.StepButton, { isDisabled: props.isDisabled, direction: "up", ...incrementButtonProps, size: otherProps.size }, void 0), (0, jsx_runtime_1.jsx)(StepButton_1.StepButton, { isDisabled: props.isDisabled, direction: "down", ...decrementButtonProps, size: otherProps.size }, void 0)] }, void 0)) : (suffix) }, void 0));
+}
 /**
- * @legacy should be removed with legacy <Field />
+ * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.
  */
-Object.defineProperty(exports.NumberInput, 'cubeInputType', {
-    enumerable: false,
-    configurable: false,
-    writable: false,
-    value: 'Number',
-});
+const _NumberInput = (0, react_1.forwardRef)(NumberInput);
+exports.NumberInput = _NumberInput;
+_NumberInput.cubeInputType = 'Number';
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-40d6b68
+ * @cube-dev/ui-kit v0.0.0-canary-2db10d4
  * Released under the MIT license.
  */
 

package/cjs/components/forms/PasswordInput/PasswordInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-40d6b68
+ * @cube-dev/ui-kit v0.0.0-canary-2db10d4
  * Released under the MIT license.
  */
 
@@ -12,22 +12,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const textfield_1 = require("@react-aria/textfield");
 const icons_1 = require("@ant-design/icons");
-const TextInput_1 = require("../TextInput");
+const TextInputBase_1 = require("../TextInput/TextInputBase");
 const provider_1 = require("../../../provider");
 const actions_1 = require("../../actions");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
-const Form_1 = require("../Form");
 function PasswordInput(props, ref) {
     props = (0, nullableValue_1.castNullableStringValue)(props);
-    props = (0, provider_1.useProviderProps)(props);
-    props = (0, Form_1.useFieldProps)(props, {
-        defaultValidationTrigger: 'onBlur',
-        valuePropsMapper: ({ value, onChange }) => ({
-            value: value?.toString() ?? '',
-            onChange,
-        }),
-    });
-    const { suffix, multiLine, ...otherProps } = props;
+    let { suffix, multiLine, ...otherProps } = (0, provider_1.useProviderProps)({ ...props });
     let [type, setType] = (0, react_1.useState)('password');
     let inputRef = (0, react_1.useRef)(null);
     let { labelProps, inputProps } = (0, textfield_1.useTextField)({
@@ -38,7 +29,7 @@ function PasswordInput(props, ref) {
         setType((type) => (type === 'password' ? 'text' : 'password'));
     }, []);
     const wrappedSuffix = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [suffix, (0, jsx_runtime_1.jsx)(actions_1.Button, { excludeFromTabOrder: true, type: "neutral", htmlType: "button", placeSelf: "stretch", height: "auto", radius: "right", width: "4x", label: "Toggle masking", icon: type === 'password' ? (0, jsx_runtime_1.jsx)(icons_1.EyeInvisibleOutlined, {}, void 0) : (0, jsx_runtime_1.jsx)(icons_1.EyeOutlined, {}, void 0), onPress: toggleType }, void 0)] }, void 0));
-    return ((0, jsx_runtime_1.jsx)(TextInput_1.TextInputBase, { ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...otherProps }, void 0));
+    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...otherProps }, void 0));
 }
 /**
  * PasswordInputs are password inputs that allow users to input passwords or code entries
@@ -47,14 +38,6 @@ function PasswordInput(props, ref) {
  */
 const _PasswordInput = (0, react_1.forwardRef)(PasswordInput);
 exports.PasswordInput = _PasswordInput;
-/**
- * @legacy should be removed with legacy <Field />
- */
-Object.defineProperty(_PasswordInput, 'cubeInputType', {
-    enumerable: false,
-    configurable: false,
-    writable: false,
-    value: 'Text',
-});
+_PasswordInput.cubeInputType = 'Text';
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-40d6b68
+ * @cube-dev/ui-kit v0.0.0-canary-2db10d4
  * Released under the MIT license.
  */
 
@@ -117,10 +117,10 @@ const RadioLabelElement = (0, tasty_1.tasty)({
 });
 function Radio(props, ref) {
     props = (0, provider_1.useProviderProps)(props);
-    props = (0, Form_1.useFieldProps)(props, { defaultValidationTrigger: 'onChange' });
+    props = (0, Form_1.useFormProps)(props);
     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 = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES);
     const RadioElement = isButton ? RadioButtonElement : RadioNormalElement;
     labelStyles = {
@@ -177,14 +177,5 @@ const __Radio = Object.assign(_Radio, {
     Button: _RadioButton,
 });
 exports.Radio = __Radio;
-/**
- * @legacy should be removed with legacy <Field />
- */
-Object.defineProperty(_Radio, 'cubeInputType', {
-    enumerable: false,
-    configurable: false,
-    writable: false,
-    value: 'Radio',
-});