@cube-dev/ui-kit 0.0.0-canary-532466c → 0.0.0-canary-a6ebdac

package/es/components/content/Paragraph.js

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

package/es/components/content/Placeholder/Placeholder.js

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

package/es/components/content/PrismCode/PrismCode.js

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

package/es/components/content/Result/Result.js

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

package/es/components/content/Skeleton/Skeleton.js

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

package/es/components/content/Tag/Tag.js

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

package/es/components/content/Text.js

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

package/es/components/content/Title.js

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

package/es/components/forms/Checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-532466c
+ * @cube-dev/ui-kit v0.0.0-canary-a6ebdac
  * Released under the MIT license.
  */
 
@@ -17,7 +17,7 @@ import { useFocus } from '../../../utils/react/interactions';
 import { mergeProps } from '../../../utils/react';
 import { INLINE_LABEL_STYLES, LABEL_STYLES } from '../Label';
 import { HiddenInput } from '../../HiddenInput';
-import { useFormProps } from '../Form';
+import { useFieldProps } from '../Form';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableIsSelected, } from '../../../utils/react/nullableValue';
 import { CheckboxGroup } from './CheckboxGroup';
@@ -77,16 +77,24 @@ const CheckboxElement = tasty({
     },
 });
 function Checkbox(props, ref) {
+    // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.
+    // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,
+    // but since the checkbox won't move in and out of a group, it should be safe.
+    const groupState = useContext(CheckboxGroupContext);
+    const originalProps = props;
     props = castNullableIsSelected(props);
-    let originalProps = props;
     props = useProviderProps(props);
-    props = useFormProps(props);
+    props = useFieldProps(props, {
+        defaultValidationTrigger: 'onChange',
+        valuePropsMapper: ({ value, onChange }) => ({
+            isSelected: value ?? false,
+            isIndeterminate: false,
+            onChange: onChange,
+        }),
+        isDisabled: !!groupState,
+    });
     let { qa, isIndeterminate = false, isDisabled = false, insideForm, isRequired, autoFocus, children, label, extra, validationState, labelProps, labelStyles, labelPosition, necessityLabel, necessityIndicator, message, description, requiredMark = true, tooltip, isHidden, labelSuffix, ...otherProps } = props;
     label = label || children;
-    // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.
-    // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,
-    // but since the checkbox won't move in and out of a group, it should be safe.
-    let groupState = useContext(CheckboxGroupContext);
     let styles = extractStyles(props, OUTER_STYLES);
     let inputStyles = extractStyles(props, BLOCK_STYLES);
     labelStyles = {
@@ -170,7 +178,6 @@ function Checkbox(props, ref) {
  * or to mark one individual item as selected.
  */
 let _Checkbox = forwardRef(Checkbox);
-_Checkbox.cubeInputType = 'Checkbox';
 let __Checkbox = Object.assign(_Checkbox, { Group: CheckboxGroup });
 export { __Checkbox as Checkbox };
 

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

@@ -1,17 +1,16 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-532466c
+ * @cube-dev/ui-kit v0.0.0-canary-a6ebdac
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { useDOMRef } from '@react-spectrum/utils';
 import { useCheckboxGroup } from '@react-aria/checkbox';
 import { useCheckboxGroupState } from '@react-stately/checkbox';
 import { useProviderProps } from '../../../provider';
-import { FormContext, useFormProps } from '../Form/Form';
+import { FormContext, useFieldProps } from '../Form';
 import { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableArrayValue, } from '../../../utils/react/nullableValue';
@@ -45,22 +44,26 @@ const CheckGroupElement = tasty({
         padding: '(1x - 1bw) 0',
     },
 });
-function CheckboxGroup(props, ref) {
+/**
+ * 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.
+ */
+export const CheckboxGroup = forwardRef(function CheckboxGroup(props, ref) {
     props = castNullableArrayValue(props);
     props = useProviderProps(props);
-    props = 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 = useDOMRef(ref);
-    let styles = extractStyles(otherProps, OUTER_STYLES, WRAPPER_STYLES);
-    let groupStyles = extractStyles(otherProps, BLOCK_STYLES);
-    let state = useCheckboxGroupState(props);
-    let { groupProps, labelProps } = useCheckboxGroup(props, state);
-    let radioGroup = (_jsx(CheckGroupElement, { styles: groupStyles, mods: {
-            horizontal: orientation === 'horizontal',
-        }, children: _jsx(FormContext.Provider, { value: {
-                isDisabled,
-                validationState,
-            }, children: _jsx(CheckboxGroupContext.Provider, { value: state, children: children }, void 0) }, void 0) }, void 0));
+    props = 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 = extractStyles(otherProps, OUTER_STYLES, WRAPPER_STYLES);
+    const groupStyles = extractStyles(otherProps, BLOCK_STYLES);
+    const state = useCheckboxGroupState(props);
+    const { groupProps, labelProps } = useCheckboxGroup(props, state);
+    const radioGroup = (_jsx(CheckGroupElement, { styles: groupStyles, mods: { horizontal: orientation === 'horizontal' }, children: _jsx(FormContext.Provider, { value: { isDisabled, validationState }, children: _jsx(CheckboxGroupContext.Provider, { value: state, children: children }, void 0) }, void 0) }, void 0));
     return (_jsx(FieldWrapper, { ...{
             labelPosition,
             label,
@@ -80,15 +83,8 @@ function CheckboxGroup(props, ref) {
             tooltip,
             labelSuffix,
             Component: radioGroup,
-            ref: domRef,
+            ref,
         } }, void 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.
- */
-const _CheckboxGroup = forwardRef(CheckboxGroup);
-_CheckboxGroup.cubeInputType = 'CheckboxGroup';
-export { _CheckboxGroup as CheckboxGroup };
+});
 
         

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

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

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

@@ -1,21 +1,21 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-532466c
+ * @cube-dev/ui-kit v0.0.0-canary-a6ebdac
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { Paragraph } from '../content/Paragraph';
-import { tasty } from '../../tasty';
-import { TooltipProvider } from '../overlays/Tooltip/TooltipProvider';
-import { Text } from '../content/Text';
-import { wrapNodeIfPlain } from '../../utils/react';
-import { Space } from '../layout/Space';
-import { Flex } from '../layout/Flex';
-import { Label } from './Label';
+import { Paragraph } from '../../content/Paragraph';
+import { tasty } from '../../../tasty';
+import { TooltipProvider } from '../../overlays/Tooltip/TooltipProvider';
+import { Text } from '../../content/Text';
+import { wrapNodeIfPlain } from '../../../utils/react';
+import { Space } from '../../layout/Space';
+import { Flex } from '../../layout/Flex';
+import { Label } from '../Label';
 const FieldElement = tasty({
     qa: 'Field',
     styles: {
@@ -50,6 +50,9 @@ const FieldElement = tasty({
         },
     },
 });
+if (process.env.NODE_ENV === 'development') {
+    FieldElement.displayName = 'FieldWrapperElement';
+}
 const MessageElement = tasty({
     qa: 'Field_Message',
     styles: {
@@ -65,7 +68,11 @@ const MessageElement = 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.
+ */
+export const FieldWrapper = 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 ? (_jsx(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: _jsxs(Flex, { placeContent: "baseline space-between", width: "100%", children: [_jsxs(Space, { placeItems: "center", gap: "0.25x", children: [_jsx("div", { children: label }, void 0), tooltip ? (_jsx(TooltipProvider, { activeWrap: true, title: tooltip, width: "initial max-content 40x", children: _jsx(InfoCircleOutlined, { style: { color: 'var(--primary-color)', margin: '0 4px' } }, void 0) }, void 0)) : null, _jsx("div", { children: labelSuffix }, void 0)] }, void 0), extra && _jsx(Text, { preset: "t3", children: extra }, void 0)] }, void 0) }, void 0)) : null;
     let descriptionComponent = description ? (_jsx("div", { "data-element": "Description", children: wrapNodeIfPlain(description, () => (_jsx(Paragraph, { children: description }, void 0))) }, void 0)) : null;
@@ -75,12 +82,7 @@ function FieldWrapper(props, ref) {
         invalid: validationState === 'invalid',
         valid: validationState === 'valid',
     };
-    return (_jsxs(FieldElement, { ref: ref, as: as || 'div', mods: mods, isHidden: isHidden, styles: styles, ...fieldProps, children: [labelComponent || descriptionComponent ? (_jsxs("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] }, void 0)) : null, _jsxs("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && (_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 = forwardRef(FieldWrapper);
-export { _FieldWrapper as FieldWrapper };
+    return (_jsxs(FieldElement, { ref: ref, as: as ?? 'div', mods: mods, isHidden: isHidden, styles: styles, ...fieldProps, children: [labelComponent || descriptionComponent ? (_jsxs("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] }, void 0)) : null, _jsxs("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && (_jsx(MessageElement, { mods: mods, styles: messageStyles, role: validationState === 'invalid' ? 'alert' : undefined, children: message }, void 0))] }, void 0)] }, void 0));
+});
 
         

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

@@ -0,0 +1,46 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-a6ebdac
+ * Released under the MIT license.
+ */
+
+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',
+]);
+export 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 };
+}
+
+        

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

@@ -0,0 +1,12 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-a6ebdac
+ * Released under the MIT license.
+ */
+
+export * from './FieldWrapper';
+export * from './extract-field-wrapper-props';
+export * from './types';
+
+        

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

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

package/es/components/forms/FileInput/FileInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-532466c
+ * @cube-dev/ui-kit v0.0.0-canary-a6ebdac
  * Released under the MIT license.
  */
 
@@ -9,7 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
 import { createFocusableRef } from '@react-spectrum/utils';
 import { useProviderProps } from '../../../provider';
-import { Action } from '../../actions/Action';
+import { Action } from '../../actions';
 import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';
 import { FieldWrapper } from '../FieldWrapper';
 const FileInputElement = tasty(Action, {

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-a6ebdac
+ * 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,46 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-a6ebdac
+ * 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', isDisabled, } = params;
+    props = useFormProps(props);
+    const fieldContext = React.useContext(FieldContext);
+    const onBlurChained = useChainedCallback(fieldContext?.onBlur, 
+    // TODO: remove type casting after updating to typescipt@4.9
+    'onBlur' in props ? props.onBlur : undefined);
+    const onChangeEvent = useEvent((value, dontTouch) => {
+        return fieldContext?.onChange?.(value, dontTouch, fieldContext?.validateTrigger ?? defaultValidationTrigger);
+    });
+    if (fieldContext === null || isDisabled) {
+        return props;
+    }
+    const { validateTrigger = defaultValidationTrigger, value, onChange, ...rest } = fieldContext;
+    return {
+        ...props,
+        ...(valuePropsMapper?.({
+            value: fieldContext.value,
+            onChange: onChangeEvent,
+        }) ?? {
+            value: fieldContext.value ?? null,
+            onChange,
+        }),
+        ...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-a6ebdac
+ * 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-a6ebdac
+ * 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-532466c
+ * @cube-dev/ui-kit v0.0.0-canary-a6ebdac
  * 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-532466c
+ * @cube-dev/ui-kit v0.0.0-canary-a6ebdac
  * Released under the MIT license.
  */
 

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-a6ebdac
+ * 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 }, void 0));
+});
+
+        

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-a6ebdac
+ * Released under the MIT license.
+ */
+
+export * from './Submit';
+
+