@cube-dev/ui-kit 0.19.0 → 0.20.1

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

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

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

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

package/es/components/forms/Label.js

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

package/es/components/forms/NumberInput/NumberInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.19.0
+ * @cube-dev/ui-kit v0.20.1
  * Released under the MIT license.
  */
 
@@ -10,7 +10,7 @@ import { forwardRef, useRef } from 'react';
 import { useLocale } from '@react-aria/i18n';
 import { useNumberFieldState } from '@react-stately/numberfield';
 import { useNumberField } from '@react-aria/numberfield';
-import { useFormProps } from '../Form';
+import { useFieldProps } from '../Form';
 import { useProviderProps } from '../../../provider';
 import { TextInputBase, } from '../TextInput/TextInputBase';
 import { tasty } from '../../../tasty';
@@ -33,7 +33,7 @@ const StepperContainer = tasty({
 function NumberInput(props, ref) {
     props = castNullableNumberValue(props);
     props = useProviderProps(props);
-    props = useFormProps(props);
+    props = useFieldProps(props);
     let { hideStepper, suffix, value, defaultValue, onChange, ...otherProps } = props;
     let showStepper = !hideStepper;
     let { locale } = useLocale();

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

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

package/es/components/forms/PasswordInput/PasswordInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.19.0
+ * @cube-dev/ui-kit v0.20.1
  * Released under the MIT license.
  */
 
@@ -13,20 +13,29 @@ import { TextInputBase, } from '../TextInput/TextInputBase';
 import { useProviderProps } from '../../../provider';
 import { Button } from '../../actions';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
+import { useFieldProps } from '../Form';
 function PasswordInput(props, ref) {
     props = castNullableStringValue(props);
-    let { suffix, multiLine, ...otherProps } = useProviderProps({ ...props });
+    props = useProviderProps(props);
+    props = useFieldProps(props, {
+        defaultValidationTrigger: 'onBlur',
+        valuePropsMapper: ({ value, onChange }) => ({
+            value: value?.toString() ?? '',
+            onChange,
+        }),
+    });
     let [type, setType] = useState('password');
     let inputRef = useRef(null);
     let { labelProps, inputProps } = useTextField({
-        ...otherProps,
+        ...props,
         type,
     }, inputRef);
-    const toggleType = useCallback((e) => {
+    const { suffix, multiLine, ...rest } = props;
+    const toggleType = useCallback(() => {
         setType((type) => (type === 'password' ? 'text' : 'password'));
     }, []);
     const wrappedSuffix = (_jsxs(_Fragment, { children: [suffix, _jsx(Button, { excludeFromTabOrder: true, type: "neutral", htmlType: "button", placeSelf: "stretch", height: "auto", radius: "right", width: "4x", label: "Toggle masking", icon: type === 'password' ? _jsx(EyeInvisibleOutlined, {}) : _jsx(EyeOutlined, {}), onPress: toggleType })] }));
-    return (_jsx(TextInputBase, { ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...otherProps }));
+    return (_jsx(TextInputBase, { ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...rest }));
 }
 /**
  * PasswordInputs are password inputs that allow users to input passwords or code entries

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.19.0
+ * @cube-dev/ui-kit v0.20.1
  * Released under the MIT license.
  */
 
@@ -16,7 +16,7 @@ import { mergeProps } from '../../../utils/react';
 import { useProviderProps } from '../../../provider';
 import { INLINE_LABEL_STYLES } from '../Label';
 import { HiddenInput } from '../../HiddenInput';
-import { useFormProps } from '../Form';
+import { useFieldProps, useFormProps } from '../Form';
 import { RadioGroup } from './RadioGroup';
 import { useRadioProvider } from './context';
 const RadioWrapperElement = tasty({
@@ -115,6 +115,7 @@ const RadioLabelElement = tasty({
 function Radio(props, ref) {
     props = useProviderProps(props);
     props = useFormProps(props);
+    props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });
     let { qa, isDisabled, validationState, children, label, autoFocus, labelStyles, labelProps, inputStyles, type = 'radio', 'aria-label': ariaLabel, ...otherProps } = props;
     let isButton = type === 'button';
     label = label || children;

package/es/components/forms/RadioGroup/RadioGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.19.0
+ * @cube-dev/ui-kit v0.20.1
  * Released under the MIT license.
  */
 
@@ -11,7 +11,7 @@ import { useDOMRef } from '@react-spectrum/utils';
 import { useRadioGroup } from '@react-aria/radio';
 import { useRadioGroupState } from '@react-stately/radio';
 import { useProviderProps } from '../../../provider';
-import { FormContext, useFormProps } from '../Form';
+import { FormContext, useFieldProps, useFormProps } from '../Form';
 import { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
@@ -33,6 +33,7 @@ function RadioGroup(props, ref) {
     props = castNullableStringValue(props);
     props = useProviderProps(props);
     props = useFormProps(props);
+    props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });
     let { isDisabled, isRequired, necessityIndicator, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, isHidden, styles, groupStyles, insideForm, labelSuffix, ...otherProps } = props;
     let domRef = useDOMRef(ref);
     styles = extractStyles(otherProps, OUTER_STYLES, styles);

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

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

package/es/components/forms/SearchInput/SearchInput.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.19.0
+ * @cube-dev/ui-kit v0.20.1
  * Released under the MIT license.
  */
 
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef } from 'react';
 import { CloseOutlined, SearchOutlined } from '@ant-design/icons';
 import { useSearchFieldState } from '@react-stately/searchfield';
@@ -32,9 +32,8 @@ export const SearchInput = forwardRef(function SearchInput(props, ref) {
     let inputRef = useRef(null);
     let state = useSearchFieldState(props);
     let { inputProps, clearButtonProps } = useSearchField(props, state, inputRef);
-    return (_jsx(TextInputBase, { ref: ref, inputProps: inputProps, inputRef: inputRef, type: "search", icon: _jsx(SearchOutlined, {}), suffixPosition: "after", suffix: isClearable &&
-            state.value !== '' &&
-            !props.isReadOnly && (_jsx(ClearButton, { type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...ariaToCubeButtonProps(clearButtonProps) })), ...props }));
+    let showClearButton = isClearable && state.value !== '' && !props.isReadOnly;
+    return (_jsx(TextInputBase, { ref: ref, inputProps: inputProps, inputRef: inputRef, type: "search", icon: _jsx(SearchOutlined, {}), suffixPosition: "after", ...props, suffix: props.suffix || showClearButton ? (_jsxs(_Fragment, { children: [props.suffix, showClearButton && (_jsx(ClearButton, { type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...ariaToCubeButtonProps(clearButtonProps) }))] })) : undefined }));
 });
 
         

package/es/components/forms/Slider/Gradation.js

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

package/es/components/forms/Slider/Header.js

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

package/es/components/forms/Slider/RangeSlider.js

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

package/es/components/forms/Slider/Slider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.19.0
+ * @cube-dev/ui-kit v0.20.1
  * Released under the MIT license.
  */
 
@@ -13,7 +13,7 @@ import { SliderTrack } from './SliderTrack';
 import { SliderBase, } from './SliderBase';
 import { Gradation } from './Gradation';
 function Slider(props, ref) {
-    let { onChange, onChangeEnd, value, defaultValue, getValueLabel, isDisabled, styles, gradation, orientation, ...otherProps } = props;
+    const { onChange, onChangeEnd, value, defaultValue, getValueLabel, isDisabled, styles, gradation, orientation, ...otherProps } = props;
     let baseProps = {
         ...otherProps,
         // Normalize `value: number[]` to `value: number`
@@ -25,10 +25,10 @@ function Slider(props, ref) {
         onChangeEnd: (v) => {
             onChangeEnd?.(v[0]);
         },
-        getValueLabel: getValueLabel ? ([v]) => getValueLabel?.(v) : undefined,
+        getValueLabel: getValueLabel ? ([v]) => getValueLabel(v) : undefined,
     };
-    styles = extractStyles(otherProps, OUTER_STYLES, styles);
-    return (_jsx(SliderBase, { ...otherProps, ...baseProps, orientation: orientation, styles: styles, children: ({ trackRef, inputRef, state }) => {
+    const extractedStyles = extractStyles(otherProps, OUTER_STYLES, styles);
+    return (_jsx(SliderBase, { ...otherProps, ...baseProps, ref: ref, orientation: orientation, styles: extractedStyles, children: ({ trackRef, inputRef, state }) => {
             return (_jsxs(_Fragment, { children: [_jsx(Gradation, { state: state, ranges: [0, 1], values: gradation }), _jsx(SliderTrack, { state: state, isDisabled: isDisabled, orientation: orientation }), _jsx(SliderThumb, { index: 0, state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled })] }));
         } }));
 }

package/es/components/forms/Slider/SliderBase.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.19.0
+ * @cube-dev/ui-kit v0.20.1
  * Released under the MIT license.
  */
 
@@ -11,9 +11,9 @@ import { useFocusableRef } from '@react-spectrum/utils';
 import { useSliderState } from '@react-stately/slider';
 import { useSlider } from '@react-aria/slider';
 import { useNumberFormatter } from '@react-aria/i18n';
-import { FieldWrapper } from '../../forms/FieldWrapper';
+import { FieldWrapper } from '../FieldWrapper';
 import { extractStyles, OUTER_STYLES, tasty } from '../../../tasty';
-import { useFormProps } from '../Form';
+import { useFieldProps, useFormProps } from '../Form';
 import { Text } from '../../content/Text';
 import { SliderControlsElement, SliderElement } from './elements';
 const LabelValueElement = tasty(Text, {
@@ -23,7 +23,14 @@ const LabelValueElement = tasty(Text, {
     },
 });
 function SliderBase(allProps, ref) {
-    const props = useFormProps(allProps);
+    let props = useFormProps(allProps);
+    props = useFieldProps(props, {
+        defaultValidationTrigger: 'onChange',
+        valuePropsMapper: ({ value, onChange }) => ({
+            value: value != null ? value : undefined,
+            onChange: onChange,
+        }),
+    });
     let { labelPosition, label, extra, styles, isRequired, validationState, message, description, requiredMark, labelSuffix, labelStyles, necessityIndicator, gradation, isDisabled, inputStyles, minValue = 0, maxValue = 100, inputWidth, formatOptions, getValueLabel, onChange, onChangeEnd, children, showValueLabel = true, orientation: formOrientation, ...otherProps } = props;
     let orientation = allProps.orientation || 'horizontal';
     // `Math.abs(Math.sign(a) - Math.sign(b)) === 2` is true if the values have a different sign.

package/es/components/forms/Slider/SliderInput.js

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

package/es/components/forms/Slider/SliderThumb.js

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

package/es/components/forms/Slider/SliderTrack.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.19.0
+ * @cube-dev/ui-kit v0.20.1
  * Released under the MIT license.
  */
 
@@ -9,12 +9,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { SliderTrackContainerElement } from './elements';
 export function SliderTrack(props) {
-    const { isDisabled, orientation = 'horizontal' } = props;
+    const { isDisabled, state, orientation = 'horizontal' } = props;
+    const selectedTrack = [state.getThumbPercent(0), state.getThumbPercent(1)];
+    const showRangeTrack = !Number.isNaN(selectedTrack[1]);
     const mods = useMemo(() => ({
         disabled: isDisabled,
         horizontal: orientation === 'horizontal',
-    }), [isDisabled]);
-    return _jsx(SliderTrackContainerElement, { mods: mods });
+        range: showRangeTrack,
+    }), [isDisabled, showRangeTrack]);
+    return (_jsx(SliderTrackContainerElement, { mods: mods, style: showRangeTrack
+            ? {
+                '--slider-range-start': `${selectedTrack[0] * 100}%`,
+                '--slider-range-end': `${selectedTrack[1] * 100}%`,
+            }
+            : {} }));
 }
 
         

package/es/components/forms/Slider/elements.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.19.0
+ * @cube-dev/ui-kit v0.20.1
  * Released under the MIT license.
  */
 
@@ -54,6 +54,19 @@ export const SliderTrackContainerElement = tasty({
             horizontal: '100%',
         },
         radius: true,
+        '&::before': {
+            content: '""',
+            display: {
+                '': 'none',
+                range: 'block',
+            },
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            fill: '#purple',
+            left: '@slider-range-start',
+            width: '(@slider-range-end - @slider-range-start)',
+        },
     },
 });
 export const SliderGradationElement = tasty({

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

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

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

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

package/es/components/forms/Switch/Switch.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.19.0
+ * @cube-dev/ui-kit v0.20.1
  * Released under the MIT license.
  */
 
@@ -18,10 +18,10 @@ import { useFocus } from '../../../utils/react/interactions';
 import { mergeProps } from '../../../utils/react';
 import { HiddenInput } from '../../HiddenInput';
 import { INLINE_LABEL_STYLES, LABEL_STYLES } from '../Label';
-import { useFormProps } from '../Form/Form';
 import { Text } from '../../content/Text';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableIsSelected, } from '../../../utils/react/nullableValue';
+import { useFieldProps, useFormProps } from '../Form';
 const SwitchWrapperElement = tasty({
     qa: 'SwitchWrapper',
     styles: {
@@ -113,6 +113,14 @@ function Switch(props, ref) {
     props = castNullableIsSelected(props);
     props = useProviderProps(props);
     props = useFormProps(props);
+    props = useFieldProps(props, {
+        defaultValidationTrigger: 'onChange',
+        valuePropsMapper: ({ value, onChange }) => ({
+            isSelected: value != null ? value : false,
+            isIndeterminate: false,
+            onChange: onChange,
+        }),
+    });
     let { qa, isDisabled = false, autoFocus, children, label, extra, labelProps, labelStyles, isLoading, insideForm, validationState, message, description, labelPosition, inputStyles, requiredMark = true, tooltip, labelSuffix, size = 'large', ...otherProps } = props;
     let styles = extractStyles(props, OUTER_STYLES);
     inputStyles = extractStyles(props, BLOCK_STYLES, inputStyles);
@@ -134,7 +142,7 @@ function Switch(props, ref) {
         hovered: isHovered,
         focused: isFocused,
     };
-    const switchField = (_jsxs(SwitchWrapperElement, { mods: mods, "data-size": size, children: [_jsx(HiddenInput, { "data-qa": "HiddenInput", ...mergeProps(inputProps, focusProps), ref: inputRef }), _jsx(SwitchElement, { qa: qa || 'Switch', mods: mods, "data-size": size, styles: inputStyles, children: _jsx("div", { "data-element": "Thumb", "aria-hidden": "true" }) }), children ? _jsx(Text, { children: children }) : null] }));
+    const switchField = (_jsxs(SwitchWrapperElement, { mods: mods, "data-size": size, children: [_jsx(HiddenInput, { "data-qa": "HiddenInput", ...mergeProps(inputProps, focusProps), ref: inputRef }), _jsx(SwitchElement, { qa: qa || 'Switch', mods: mods, "data-size": size, styles: inputStyles, children: _jsx("div", { "data-element": "Thumb", "aria-hidden": "true" }) }), children ? _jsx(Text, { nowrap: true, children: children }) : null] }));
     if (insideForm) {
         return (_jsx(FieldWrapper, { ...{
                 as: 'label',

package/es/components/forms/TextArea/TextArea.js

@@ -1,26 +1,34 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.19.0
+ * @cube-dev/ui-kit v0.20.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { useControlledState } from '@react-stately/utils';
 import { useTextField } from '@react-aria/textfield';
 import { TextInputBase, } from '../TextInput/TextInputBase';
 import { useProviderProps } from '../../../provider';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
 import { chain, useLayoutEffect } from '../../../utils/react';
+import { useFieldProps } from '../Form';
+import { useEvent } from '../../../_internal';
 function TextArea(props, ref) {
     props = castNullableStringValue(props);
     props = useProviderProps(props);
-    let { autoSize = false, isDisabled = false, isReadOnly = false, isRequired = false, onChange, rows, ...otherProps } = props;
-    rows = rows || 3;
+    props = useFieldProps(props, {
+        defaultValidationTrigger: 'onBlur',
+        valuePropsMapper: ({ value, onChange }) => ({
+            onChange,
+            value: value?.toString() ?? '',
+        }),
+    });
+    let { autoSize = false, isDisabled = false, isReadOnly = false, isRequired = false, onChange, rows = 3, ...otherProps } = props;
     let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue, () => { });
     let inputRef = useRef(null);
-    let onHeightChange = useCallback(() => {
+    let onHeightChange = useEvent(() => {
         if (autoSize && inputRef.current) {
             let input = inputRef.current;
             let prevAlignment = input.style.alignSelf;
@@ -35,7 +43,7 @@ function TextArea(props, ref) {
                     2}px`;
             input.style.alignSelf = prevAlignment;
         }
-    }, [inputRef]);
+    });
     useLayoutEffect(() => {
         if (inputRef.current) {
             onHeightChange();

package/es/components/forms/TextInput/TextInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.19.0
+ * @cube-dev/ui-kit v0.20.1
  * Released under the MIT license.
  */
 
@@ -10,10 +10,18 @@ import { forwardRef, useRef } from 'react';
 import { useTextField } from '@react-aria/textfield';
 import { useProviderProps } from '../../../provider';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
+import { useFieldProps } from '../Form';
 import { TextInputBase } from './TextInputBase';
 export const TextInput = forwardRef(function TextInput(props, ref) {
-    castNullableStringValue(props);
+    props = castNullableStringValue(props);
     props = useProviderProps(props);
+    props = useFieldProps(props, {
+        defaultValidationTrigger: 'onBlur',
+        valuePropsMapper: ({ value, onChange }) => ({
+            onChange,
+            value: value?.toString() ?? '',
+        }),
+    });
     let inputRef = useRef(null);
     let { labelProps, inputProps } = useTextField(props, inputRef);
     return (_jsx(TextInputBase, { ...props, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef }));

package/es/components/forms/TextInput/TextInputBase.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.19.0
+ * @cube-dev/ui-kit v0.20.1
  * Released under the MIT license.
  */
 
@@ -10,7 +10,7 @@ import { CheckOutlined, LoadingOutlined, WarningOutlined, } from '@ant-design/ic
 import { createFocusableRef } from '@react-spectrum/utils';
 import { cloneElement, forwardRef, useImperativeHandle, useMemo, useRef, } from 'react';
 import { useHover } from '@react-aria/interactions';
-import { useFormProps } from '../Form';
+import { useFieldProps, useFormProps } from '../Form';
 import { useProviderProps } from '../../../provider';
 import { BLOCK_STYLES, DIMENSION_STYLES, extractStyles, POSITION_STYLES, tasty, } from '../../../tasty';
 import { useFocus } from '../../../utils/react/interactions';
@@ -132,6 +132,15 @@ const InputElement = tasty({ qa: 'Input', styles: DEFAULT_INPUT_STYLES });
 function TextInputBase(props, ref) {
     props = useProviderProps(props);
     props = useFormProps(props);
+    props = useFieldProps(props, {
+        defaultValidationTrigger: 'onBlur',
+        valuePropsMapper: ({ value, onChange }) => ({
+            value: typeof value === 'string' || typeof value === 'number'
+                ? String(value)
+                : '',
+            onChange,
+        }),
+    });
     let { qa, label, extra, mods, labelPosition = 'top', labelStyles, isRequired, necessityIndicator, necessityLabel, validationState, message, description, prefix, isDisabled, multiLine, autoFocus, labelProps, inputProps, wrapperProps, inputRef, isLoading, loadingIndicator, value, inputStyles = {}, wrapperStyles = {}, suffix, suffixPosition = 'before', wrapperRef, requiredMark = true, tooltip, isHidden, rows = 1, size, icon, labelSuffix, maxLength, minLength, ...otherProps } = props;
     let styles = extractStyles(otherProps, STYLE_LIST);
     let type = otherProps.type;

package/es/components/forms/index.js

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

package/es/components/layout/Flex.js

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

package/es/components/layout/Flow.js

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

package/es/components/layout/Grid.js

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

package/es/components/layout/Prefix.js

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

package/es/components/layout/Space.js

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

package/es/components/layout/Suffix.js

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

package/es/components/navigation/LegacyTabs/LegacyTabs.js

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