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

package/es/components/content/Text.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.
  */
 
@@ -49,26 +49,26 @@ const _Text = forwardRef(function Text(allProps, ref) {
     return (_jsx(TextElement, { as: as || 'span', qa: qa || 'Text', styleName: styleName, mods: {
             nowrap,
             ellipsis,
-        }, block: !!(block || ellipsis), ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }, void 0));
+        }, ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }));
 });
 const Text = Object.assign(_Text, {
     Minor: forwardRef(function MinorText(props, ref) {
-        return _jsx(_Text, { ref: ref, color: "#minor", ...props }, void 0);
+        return _jsx(_Text, { ref: ref, color: "#minor", ...props });
     }),
     Danger: forwardRef(function DangerText(props, ref) {
-        return _jsx(_Text, { ref: ref, role: "alert", color: "#danger-text", ...props }, void 0);
+        return _jsx(_Text, { ref: ref, role: "alert", color: "#danger-text", ...props });
     }),
     Success: forwardRef(function SuccessText(props, ref) {
-        return _jsx(_Text, { ref: ref, color: "#success-text", ...props }, void 0);
+        return _jsx(_Text, { ref: ref, color: "#success-text", ...props });
     }),
     Strong: forwardRef(function StrongText(props, ref) {
-        return (_jsx(_Text, { ref: ref, as: "strong", preset: "strong", color: "#dark", ...props }, void 0));
+        return (_jsx(_Text, { ref: ref, as: "strong", preset: "strong", color: "#dark", ...props }));
     }),
     Emphasis: forwardRef(function EmphasisText(props, ref) {
-        return _jsx(_Text, { ref: ref, as: "em", preset: "em", ...props }, void 0);
+        return _jsx(_Text, { ref: ref, as: "em", preset: "em", ...props });
     }),
     Selection: forwardRef(function SelectionText(props, ref) {
-        return _jsx(_Text, { ref: ref, color: "#dark", fill: "#note.30", ...props }, void 0);
+        return _jsx(_Text, { ref: ref, color: "#dark", fill: "#note.30", ...props });
     }),
 });
 export { Text };

package/es/components/content/Title.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.
  */
 
@@ -53,14 +53,14 @@ const _Title = forwardRef(function Title({ qa, as, styleName, inline, nowrap, el
     return (_jsx(TitleElement, { qa: qa || 'Title', as: as || tag, styleName: styleName, "data-level": level || 1, mods: {
             nowrap,
             ellipsis,
-        }, inline: inline, ...filterBaseProps(propsWithSlots, { eventProps: true }), ref: ref, styles: styles }, void 0));
+        }, inline: inline, ...filterBaseProps(propsWithSlots, { eventProps: true }), ref: ref, styles: styles }));
 });
 const Title = Object.assign(_Title, {
     Danger: forwardRef(function DangerTitle(props, ref) {
-        return _jsx(Title, { ref: ref, color: "#danger-text", ...props }, void 0);
+        return _jsx(Title, { ref: ref, color: "#danger-text", ...props });
     }),
     Success: forwardRef(function SuccessTitle(props, ref) {
-        return _jsx(Title, { ref: ref, color: "#success-text", ...props }, void 0);
+        return _jsx(Title, { ref: ref, color: "#success-text", ...props });
     }),
 });
 export { Title };

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-9917823
+ * @cube-dev/ui-kit v0.0.0-canary-2a1d026
  * Released under the MIT license.
  */
 
@@ -17,17 +17,17 @@ 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 { Text } from '../../content/Text';
 import { CheckboxGroup } from './CheckboxGroup';
 import { CheckboxGroupContext } from './context';
 function CheckOutlined() {
-    return (_jsx("svg", { width: "10", height: "8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M3.417 7.604l-.017.018-3.4-3.4 1.433-1.433 1.985 1.985L8.192 0l1.432 1.433-6.189 6.189-.018-.018z", fill: "currentColor" }, void 0) }, void 0));
+    return (_jsx("svg", { width: "10", height: "8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M3.417 7.604l-.017.018-3.4-3.4 1.433-1.433 1.985 1.985L8.192 0l1.432 1.433-6.189 6.189-.018-.018z", fill: "currentColor" }) }));
 }
 function IndeterminateOutline() {
-    return (_jsx("svg", { width: "9", height: "3", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 .044v2.001l.026.025h8.063V.044H0z", fill: "#fff" }, void 0) }, void 0));
+    return (_jsx("svg", { width: "9", height: "3", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 .044v2.001l.026.025h8.063V.044H0z", fill: "#fff" }) }));
 }
 const CheckboxWrapperElement = tasty({
     as: 'label',
@@ -75,15 +75,24 @@ const CheckboxElement = tasty({
     },
 });
 function Checkbox(props, ref) {
-    props = castNullableIsSelected(props);
-    let originalProps = props;
-    props = useProviderProps(props);
-    props = useFormProps(props);
-    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;
     // 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);
+    const groupState = useContext(CheckboxGroupContext);
+    const originalProps = props;
+    props = castNullableIsSelected(props);
+    props = useProviderProps(props);
+    props = useFieldProps(props, {
+        defaultValidationTrigger: 'onChange',
+        valuePropsMapper: ({ value, onChange }) => ({
+            isSelected: value ?? false,
+            isIndeterminate: false,
+            onChange: onChange,
+        }),
+        unsafe__isDisabled: !!groupState,
+    });
+    let { qa, isIndeterminate = false, insideForm, isRequired, autoFocus, children, label, extra, validationState = groupState?.validationState, labelProps, labelStyles, labelPosition, necessityLabel, necessityIndicator, message, description, requiredMark = true, tooltip, isHidden, labelSuffix, isDisabled = groupState?.isDisabled ?? false, ...otherProps } = props;
+    label = label ?? children;
     let styles = extractStyles(props, OUTER_STYLES);
     let inputStyles = extractStyles(props, BLOCK_STYLES);
     labelStyles = {
@@ -106,7 +115,7 @@ function Checkbox(props, ref) {
             validationState: originalProps.validationState,
         }, groupState, inputRef) // eslint-disable-next-line react-hooks/rules-of-hooks
         : useCheckbox(props, useToggleState(props), inputRef);
-    let markIcon = isIndeterminate ? _jsx(IndeterminateOutline, {}, void 0) : _jsx(CheckOutlined, {}, void 0);
+    let markIcon = isIndeterminate ? _jsx(IndeterminateOutline, {}) : _jsx(CheckOutlined, {});
     if (groupState) {
         for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {
             if (originalProps[key] != null) {
@@ -128,7 +137,7 @@ function Checkbox(props, ref) {
         'side-label': labelPosition === 'side',
         'inside-form': insideForm,
     };
-    const checkboxField = (_jsxs(CheckboxWrapperElement, { isHidden: isHidden, mods: mods, styles: { position: 'relative' }, children: [_jsx(HiddenInput, { "data-qa": qa || 'Checkbox', ...mergeProps(inputProps, focusProps), ref: inputRef }, void 0), _jsx(CheckboxElement, { qa: "Checkbox", mods: mods, styles: inputStyles, children: markIcon }, void 0), children && _jsx(Text, { children: children }, void 0)] }, void 0));
+    const checkboxField = (_jsxs(CheckboxWrapperElement, { isHidden: isHidden, mods: mods, styles: { position: 'relative' }, children: [_jsx(HiddenInput, { "data-qa": qa || 'Checkbox', ...mergeProps(inputProps, focusProps), ref: inputRef }), _jsx(CheckboxElement, { qa: "Checkbox", mods: mods, styles: inputStyles, children: markIcon }), children && _jsx(Text, { children: children })] }));
     if (insideForm && !groupState) {
         return (_jsx(FieldWrapper, { ...{
                 as: 'label',
@@ -152,20 +161,28 @@ function Checkbox(props, ref) {
                 labelSuffix,
                 Component: checkboxField,
                 ref: domRef,
-            } }, void 0));
+            } }));
     }
     return (_jsxs(CheckboxWrapperElement, { as: "label", styles: styles, isHidden: isHidden, ...hoverProps, ...filterBaseProps(otherProps), ref: domRef, children: [checkboxField, label ? (_jsx(Element, { styles: labelStyles, mods: {
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,
-                }, ...filterBaseProps(labelProps), children: label }, void 0)) : null] }, void 0));
+                }, ...filterBaseProps(labelProps), children: label })) : null] }));
 }
 /**
  * Checkboxes allow users to select multiple items from a list of individual items,
  * or to mark one individual item as selected.
  */
 let _Checkbox = forwardRef(Checkbox);
-_Checkbox.cubeInputType = 'Checkbox';
+/**
+ * @legacy should be removed with legacy <Field />
+ */
+Object.defineProperty(_Checkbox, 'cubeInputType', {
+    enumerable: false,
+    configurable: false,
+    writable: false,
+    value: '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-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 { 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';
@@ -40,22 +39,26 @@ const CheckGroupElement = tasty({
         },
     },
 });
-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 }) }) }));
     return (_jsx(FieldWrapper, { ...{
             labelPosition,
             label,
@@ -75,15 +78,17 @@ function CheckboxGroup(props, ref) {
             tooltip,
             labelSuffix,
             Component: radioGroup,
-            ref: domRef,
-        } }, void 0));
-}
+            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.
+ * @legacy should be removed with legacy <Field />
  */
-const _CheckboxGroup = forwardRef(CheckboxGroup);
-_CheckboxGroup.cubeInputType = 'CheckboxGroup';
-export { _CheckboxGroup as CheckboxGroup };
+Object.defineProperty(CheckboxGroup, 'cubeInputType', {
+    enumerable: false,
+    configurable: false,
+    writable: false,
+    value: '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-9917823
+ * @cube-dev/ui-kit v0.0.0-canary-2a1d026
  * 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-9917823
+ * @cube-dev/ui-kit v0.0.0-canary-2a1d026
  * 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: {
@@ -49,6 +49,9 @@ const FieldElement = tasty({
         },
     },
 });
+if (process.env.NODE_ENV === 'development') {
+    FieldElement.displayName = 'FieldWrapperElement';
+}
 const MessageElement = tasty({
     qa: 'Field_Message',
     styles: {
@@ -63,25 +66,24 @@ 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: {
+    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 }), 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;
+                                } }) })) : null, _jsx("div", { children: labelSuffix })] }), extra && _jsx(Text, { preset: "t3", children: extra })] }) })) : null;
+    let descriptionComponent = description ? (_jsx("div", { "data-element": "Description", children: wrapNodeIfPlain(description, () => (_jsx(Paragraph, { children: description }))) })) : null;
     const mods = {
         'has-sider': labelPosition === 'side',
         'has-description': !!description,
         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] })) : null, _jsxs("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && (_jsx(MessageElement, { mods: mods, styles: messageStyles, role: validationState === 'invalid' ? 'alert' : undefined, children: message }))] })] }));
+});
 
         

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-2a1d026
+ * 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-2a1d026
+ * 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-2a1d026
+ * 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-9917823
+ * @cube-dev/ui-kit v0.0.0-canary-2a1d026
  * 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, {
@@ -132,7 +132,7 @@ function FileInput(props, ref) {
                     setDragHover(false);
                 }, onDrop: () => {
                     setDragHover(false);
-                }, ...inputProps }, void 0), _jsx("div", { "data-element": "Button", children: "Choose file" }, void 0), _jsx("div", { "data-element": !!fileName ? 'Value' : 'Placeholder', children: fileName || placeholder || 'No file selected' }, void 0)] }, void 0));
+                }, ...inputProps }), _jsx("div", { "data-element": "Button", children: "Choose file" }), _jsx("div", { "data-element": !!fileName ? 'Value' : 'Placeholder', children: fileName || placeholder || 'No file selected' })] }));
     return (_jsx(FieldWrapper, { ...{
             labelPosition,
             label,
@@ -153,7 +153,7 @@ function FileInput(props, ref) {
             labelSuffix,
             Component: fileInput,
             ref: domRef,
-        } }, void 0));
+        } }));
 }
 /**
  * FileInputs are file inputs that allow users to select local files to

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

@@ -1,16 +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 { Children, cloneElement, useEffect, useRef, useState, } from 'react';
-import { mergeProps } from '../../../utils/react';
-import { FieldWrapper } from '../FieldWrapper';
-import { warn } from '../../../utils/warnings';
-import { useFormProps } from './Form';
+import { Children, cloneElement, createContext, useContext, useEffect, useState, } from 'react';
+import { useWarn } from '../../../../_internal';
+import { mergeProps } from '../../../../utils/react';
+import { FieldWrapper } from '../../FieldWrapper';
+import { useFormProps } from '../Form';
 const ID_MAP = {};
 function createId(name) {
     if (!name)
@@ -71,6 +71,12 @@ function getValueProps(type, value, onChange, allowsCustomValue) {
             onChange: onChange,
         };
     }
+    else if (type === 'RangeSlider') {
+        return {
+            value: value != null ? value : undefined,
+            onChange: onChange,
+        };
+    }
     else if (type === 'ComboBox') {
         return {
             inputValue: value != null ? value : '',
@@ -89,13 +95,22 @@ function getValueProps(type, value, onChange, allowsCustomValue) {
         onChange,
     };
 }
-export function Field(allProps) {
-    const props = 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;
+/**
+ * @deprecated Use component without `Field`
+ *
+ * ```tsx
+    <Form>
+        <Checkbox />
+    </Form>
+ *```
+ */
+export function Field(props) {
+    const fullProps = 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;
     const nonInput = !name;
     const fieldName = name != null ? (Array.isArray(name) ? name.join('.') : name) : '';
-    let firstRunRef = useRef(true);
     let [fieldId, setFieldId] = useState(id || (idPrefix ? `${idPrefix}_${fieldName}` : fieldName));
+    useWarn(!form, 'Form Field requires declared form instance if field name is specified');
     useEffect(() => {
         let newId;
         if (!id && !nonInput) {
@@ -133,32 +148,27 @@ export function Field(allProps) {
         return null;
     let child = Children.only(children);
     if (nonInput) {
-        return (_jsx(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));
+        return (_jsx(LegacyFieldProvider, { children: _jsx(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) {
-        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);
+    if (field) {
+        field.rules = rules;
+        if (defaultValue != null && !field.touched) {
+            form?.setFieldValue(fieldName, defaultValue, false, true);
         }
     }
-    firstRunRef.current = false;
     if (!field) {
-        return cloneElement(child, mergeProps(child.props, {
-            ...getValueProps(inputType),
-            label: fieldName,
-            name: fieldName,
-            id: fieldId,
-        }));
+        return (_jsx(LegacyFieldProvider, { children: cloneElement(child, mergeProps(child.props, {
+                ...getValueProps(inputType),
+                label: fieldName,
+                name: fieldName,
+                id: fieldId,
+            })) }));
     }
     if (!validateTrigger) {
         validateTrigger = defaultValidateTrigger;
@@ -241,7 +251,17 @@ export function Field(allProps) {
     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 cloneElement(child, mergeProps(childProps, newProps, onChange ? { onChange } : {}, onSelectionChange ? { onSelectionChange } : {}));
+    return (_jsx(LegacyFieldProvider, { children: cloneElement(child, mergeProps(childProps, newProps, onChange ? { onChange } : {}, onSelectionChange ? { onSelectionChange } : {})) }));
+}
+const LegacyFieldContext = createContext({
+    insideLegacyField: false,
+});
+function LegacyFieldProvider({ children }) {
+    return (_jsx(LegacyFieldContext.Provider, { value: { insideLegacyField: true }, children: children }));
+}
+export function useInsideLegacyField() {
+    const { insideLegacyField } = useContext(LegacyFieldContext);
+    return insideLegacyField;
 }
 
         

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

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

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-2a1d026
+ * Released under the MIT license.
+ */
+
+export {};
+
+