@cube-dev/ui-kit 0.18.1 → 0.19.0

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.18.1
+ * @cube-dev/ui-kit v0.19.0
  * Released under the MIT license.
  */
 
@@ -19,13 +19,6 @@ const tasty_1 = require("../../../tasty");
 const FieldWrapper_1 = require("../FieldWrapper");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
 const context_1 = require("./context");
-const WRAPPER_STYLES = {
-    display: 'grid',
-    gridColumns: {
-        '': '1fr',
-        'has-sider': 'max-content 1fr',
-    },
-};
 const CheckGroupElement = (0, tasty_1.tasty)({
     qa: 'CheckboxGroup',
     styles: {
@@ -48,7 +41,7 @@ function CheckboxGroup(props, ref) {
     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, inputStyles, ...otherProps } = props;
     let domRef = (0, utils_1.useDOMRef)(ref);
-    let styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES, WRAPPER_STYLES);
+    let styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_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: inputStyles, mods: {

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.18.1
+ * @cube-dev/ui-kit v0.19.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.18.1
+ * @cube-dev/ui-kit v0.19.0
  * Released under the MIT license.
  */
 
@@ -11,21 +11,21 @@ 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: {
         display: 'grid',
         gridColumns: {
-            '': '1fr',
-            'has-sider': '@(full-label-width, auto) 1fr',
+            '': 'minmax(0, 1fr)',
+            'has-sider': '@(full-label-width, auto) minmax(0, 1fr)',
         },
         gap: 0,
         placeItems: 'baseline stretch',
@@ -52,6 +52,9 @@ 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: {
@@ -66,7 +69,11 @@ const MessageElement = (0, tasty_1.tasty)({
         userSelect: 'none',
     },
 });
-function FieldWrapper(props, ref) {
+/**
+ * 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) {
     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 }), 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)',
@@ -79,12 +86,7 @@ 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] })) : 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 }))] })] }));
-}
-/**
- * A wrapper for form fields to provide additional decoration for inputs.
- */
-const _FieldWrapper = (0, react_1.forwardRef)(FieldWrapper);
-exports.FieldWrapper = _FieldWrapper;
+    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] })) : 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 }))] })] }));
+});
 
         

package/cjs/components/forms/FieldWrapper/extract-field-wrapper-props.js

@@ -0,0 +1,50 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.19.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractFieldWrapperProps = void 0;
+const createFieldWrapperPropsKeys = (arr) => new Set(arr);
+const fieldWrapperPropsKeys = createFieldWrapperPropsKeys([
+    'as',
+    'validationState',
+    'styles',
+    'isRequired',
+    'isDisabled',
+    'fieldProps',
+    'isHidden',
+    'label',
+    'labelPosition',
+    'labelSuffix',
+    'labelStyles',
+    'labelProps',
+    'description',
+    'requiredMark',
+    'tooltip',
+    'extra',
+    'necessityLabel',
+    'necessityIndicator',
+    'message',
+    'messageStyles',
+    'Component',
+]);
+function extractFieldWrapperProps(props) {
+    const fieldWrapperProps = {};
+    const rest = {};
+    for (const [key, prop] of Object.entries(props)) {
+        if (fieldWrapperPropsKeys.has(key)) {
+            fieldWrapperProps[key] = prop;
+        }
+        else {
+            rest[key] = prop;
+        }
+    }
+    return { fieldWrapperProps, rest };
+}
+exports.extractFieldWrapperProps = extractFieldWrapperProps;
+
+        

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

@@ -0,0 +1,28 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.19.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 });
+__exportStar(require("./FieldWrapper"), exports);
+__exportStar(require("./extract-field-wrapper-props"), exports);
+__exportStar(require("./types"), exports);
+
+        

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

@@ -0,0 +1,11 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.19.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+
+        

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.18.1
+ * @cube-dev/ui-kit v0.19.0
  * Released under the MIT license.
  */
 

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

@@ -1,40 +1,21 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.18.1
+ * @cube-dev/ui-kit v0.19.0
  * Released under the MIT license.
  */
 
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Field = void 0;
+exports.useInsideLegacyField = exports.Field = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = require("react");
 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)
-        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);
-}
+const use_field_1 = require("./use-field");
 function getDefaultValidateTrigger(type) {
     type = type || '';
     return type === 'Number' || type.includes('Text') ? 'onBlur' : 'onChange';
@@ -92,113 +73,39 @@ function getValueProps(type, value, onChange, allowsCustomValue) {
         onChange,
     };
 }
-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, 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);
-    if (field) {
-        field.rules = rules;
-    }
-    let isRequired = rules && !!rules.find((rule) => rule.required);
-    (0, react_1.useEffect)(() => {
-        if (!form)
-            return;
-        if (field) {
-            form.forceReRender();
-        }
-        else {
-            form.createField(fieldName);
-        }
-    }, [field]);
+function Field(props) {
+    const allProps = (0, Form_1.useFormProps)(props);
+    let { type: inputType, children, form, label, extra, validationState, necessityLabel, necessityIndicator, message, description, tooltip, isHidden, isDisabled, isLoading, styles, labelPosition = 'top', labelStyles, labelSuffix, } = allProps;
     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, 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 }));
+    inputType = inputType ?? (child?.type).cubeInputType ?? 'Text';
+    const __props = (0, use_field_1.useField)(allProps, {
+        defaultValidationTrigger: getDefaultValidateTrigger(inputType),
+    });
+    const { field, isRequired, name, id } = __props;
+    if (!child)
+        return null;
+    if (__props.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 }) }));
     }
     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 (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),
-            label: fieldName,
-            name: fieldName,
-            id: fieldId,
-        }));
-    }
-    if (!validateTrigger) {
-        validateTrigger = defaultValidateTrigger;
-    }
-    function onChangeHandler(val, 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]: val,
-                });
-            if (shouldNotBeUpdated) {
-                return;
-            }
-        }
-        form.setFieldValue(fieldName, val, !dontTouch, false, dontTouch);
-        if (!dontTouch &&
-            (validateTrigger === 'onChange' ||
-                (field && field.errors && field.errors.length))) {
-            form.validateField(fieldName).catch(() => { }); // do nothing on fail
-        }
+    if (!__props.field) {
+        return ((0, jsx_runtime_1.jsx)(LegacyFieldProvider, { children: (0, react_1.cloneElement)(child, (0, react_2.mergeProps)(child.props, {
+                ...getValueProps(inputType),
+                label: name,
+                name,
+                id,
+            })) }));
     }
     const newProps = {
-        id: fieldId,
-        name: fieldName,
-        onBlur() {
-            if (validateTrigger === 'onBlur') {
-                // We need a timeout so the change event can be done.
-                setTimeout(() => {
-                    form.validateField(fieldName).catch(() => { }); // do nothing on fail
-                });
-            }
-        },
+        id,
+        name,
+        onBlur: __props.onBlur,
     };
     if (necessityIndicator != null) {
         newProps.necessityIndicator = necessityIndicator;
@@ -233,7 +140,7 @@ function Field(allProps) {
     if (isLoading != null) {
         newProps.isLoading = isLoading;
     }
-    if (field && field.errors && field.errors.length) {
+    if (field?.errors?.length) {
         if (!validationState) {
             newProps.validationState = 'invalid';
         }
@@ -241,11 +148,23 @@ function Field(allProps) {
             newProps.message = field.errors[0];
         }
     }
-    Object.assign(newProps, getValueProps(inputType, field?.inputValue, onChangeHandler, child.props.allowsCustomValue));
+    Object.assign(newProps, getValueProps(inputType, __props.field?.inputValue, __props.onChange, child.props.allowsCustomValue));
     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 } : {}));
+    return ((0, jsx_runtime_1.jsx)(LegacyFieldProvider, { children: (0, react_1.cloneElement)(child, (0, react_2.mergeProps)(childProps, newProps, onChange ? { onChange: __props.onChange } : {}, onSelectionChange ? { onSelectionChange: __props.onChange } : {})) }));
 }
 exports.Field = Field;
+const LegacyFieldContext = (0, react_1.createContext)({
+    insideLegacyField: false,
+});
+function LegacyFieldProvider(props) {
+    const value = (0, react_1.useMemo)(() => ({ insideLegacyField: true }), []);
+    return ((0, jsx_runtime_1.jsx)(LegacyFieldContext.Provider, { value: value, children: props.children }));
+}
+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.18.1
+ * @cube-dev/ui-kit v0.19.0
  * Released under the MIT license.
  */
 

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

@@ -0,0 +1,25 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.19.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Submit = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const provider_1 = require("../../../../provider");
+const Form_1 = require("../Form");
+const actions_1 = require("../../../actions");
+exports.Submit = (0, react_1.forwardRef)(function Submit(props, ref) {
+    props = (0, provider_1.useProviderProps)(props);
+    props = (0, Form_1.useFormProps)(props);
+    const { form, ...otherProps } = props;
+    const formData = form?.getFieldsValue() ?? {};
+    const isInvalid = Object.keys(formData).some((name) => form?.isFieldInvalid(name) ?? false);
+    return ((0, jsx_runtime_1.jsx)(actions_1.Button, { ref: ref, type: "primary", htmlType: "submit", isLoading: form?.isSubmitting, isDisabled: isInvalid, ...otherProps }));
+});
+
+        

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

@@ -0,0 +1,26 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.19.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 });
+__exportStar(require("./Submit"), exports);
+
+        

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.18.1
+ * @cube-dev/ui-kit v0.19.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.18.1
+ * @cube-dev/ui-kit v0.19.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.18.1
+ * @cube-dev/ui-kit v0.19.0
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Form/use-field/index.js

@@ -0,0 +1,28 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.19.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 });
+__exportStar(require("./use-field"), exports);
+__exportStar(require("./use-field-props"), exports);
+__exportStar(require("./types"), exports);
+
+        

package/cjs/components/forms/Form/use-field/types.js

@@ -0,0 +1,11 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.19.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+
+        

package/cjs/components/forms/Form/use-field/use-field-props.js

@@ -0,0 +1,61 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.19.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFieldProps = void 0;
+const react_1 = require("react");
+const react_2 = require("react");
+const _internal_1 = require("../../../../_internal");
+const Field_1 = require("../Field");
+const use_field_1 = require("./use-field");
+function useFieldProps(props, params = {}) {
+    // We use ref here to "memoize" initial value
+    const isDisabledRef = (0, react_1.useRef)(params.unsafe__isDisabled ?? false);
+    const { valuePropsMapper = ({ value, onChange }) => ({
+        value: value ?? null,
+        onChange,
+    }), defaultValidationTrigger = 'onBlur', } = params;
+    const isInsideLegacyField = (0, Field_1.useInsideLegacyField)();
+    (0, _internal_1.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 = (0, use_field_1.useField)(props, {
+        defaultValidationTrigger: params.defaultValidationTrigger,
+    });
+    const isOutsideOfForm = field?.form == null;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const onBlurChained = (0, _internal_1.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 = (0, _internal_1.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
+        (0, react_2.useDebugValue)(result);
+    }
+    return result;
+}
+exports.useFieldProps = useFieldProps;
+
+