@cube-dev/ui-kit 0.19.0 → 0.20.1

package/cjs/components/content/Title.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/cjs/components/forms/Checkbox/Checkbox.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.
  */
 
@@ -78,15 +78,24 @@ const CheckboxElement = (0, tasty_1.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.
+    let groupState = (0, react_1.useContext)(context_1.CheckboxGroupContext);
     props = (0, nullableValue_1.castNullableIsSelected)(props);
     let originalProps = props;
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
+    props = (0, Form_1.useFieldProps)(props, {
+        defaultValidationTrigger: 'onChange',
+        valuePropsMapper: ({ value, onChange }) => ({
+            isSelected: value ?? false,
+            isIndeterminate: false,
+            onChange: onChange,
+        }),
+        unsafe__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;
-    // 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 = (0, react_1.useContext)(context_1.CheckboxGroupContext);
     let styles = (0, tasty_1.extractStyles)(props, tasty_1.OUTER_STYLES);
     let inputStyles = (0, tasty_1.extractStyles)(props, tasty_1.BLOCK_STYLES);
     labelStyles = {

package/cjs/components/forms/Checkbox/CheckboxGroup.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.
  */
 
@@ -14,10 +14,10 @@ const utils_1 = require("@react-spectrum/utils");
 const checkbox_1 = require("@react-aria/checkbox");
 const checkbox_2 = require("@react-stately/checkbox");
 const provider_1 = require("../../../provider");
-const Form_1 = require("../Form/Form");
 const tasty_1 = require("../../../tasty");
 const FieldWrapper_1 = require("../FieldWrapper");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
+const Form_1 = require("../Form");
 const context_1 = require("./context");
 const CheckGroupElement = (0, tasty_1.tasty)({
     qa: 'CheckboxGroup',
@@ -39,9 +39,17 @@ function CheckboxGroup(props, ref) {
     props = (0, nullableValue_1.castNullableArrayValue)(props);
     props = (0, provider_1.useProviderProps)(props);
     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;
+    props = (0, Form_1.useFieldProps)(props, {
+        defaultValidationTrigger: 'onChange',
+        valuePropsMapper: ({ value, onChange }) => ({
+            value: value != null ? value : [],
+            onChange: onChange,
+        }),
+    });
+    let { isDisabled, isRequired, necessityIndicator, necessityLabel, label, extra, validationState, children, orientation = 'vertical', message, description, labelStyles, tooltip, labelSuffix, inputStyles, ...otherProps } = props;
     let domRef = (0, utils_1.useDOMRef)(ref);
     let styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES);
+    let { fieldWrapperProps } = (0, FieldWrapper_1.extractFieldWrapperProps)(props);
     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: {
@@ -50,27 +58,7 @@ function CheckboxGroup(props, ref) {
                 isDisabled,
                 validationState,
             }, children: (0, jsx_runtime_1.jsx)(context_1.CheckboxGroupContext.Provider, { value: state, children: children }) }) }));
-    return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
-            labelPosition,
-            label,
-            extra,
-            styles,
-            isRequired,
-            labelStyles,
-            necessityIndicator,
-            necessityLabel,
-            labelProps,
-            fieldProps: groupProps,
-            isDisabled,
-            validationState,
-            message,
-            description,
-            requiredMark,
-            tooltip,
-            labelSuffix,
-            Component: radioGroup,
-            ref: domRef,
-        } }));
+    return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...fieldWrapperProps, ref: domRef, Component: radioGroup, fieldProps: groupProps, labelProps: labelProps, styles: styles }));
 }
 /**
  * Checkbox groups allow users to select a single option from a list of mutually exclusive options.

package/cjs/components/forms/Checkbox/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/cjs/components/forms/FieldWrapper/FieldWrapper.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/cjs/components/forms/FieldWrapper/extract-field-wrapper-props.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/cjs/components/forms/FieldWrapper/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/cjs/components/forms/FieldWrapper/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/cjs/components/forms/FileInput/FileInput.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/cjs/components/forms/Form/Field.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/cjs/components/forms/Form/Form.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/cjs/components/forms/Form/Submit/Submit.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/cjs/components/forms/Form/Submit/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/cjs/components/forms/Form/SubmitError.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/cjs/components/forms/Form/index.js

@@ -1,13 +1,13 @@
 /**
  * @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.
  */
 
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubmitError = exports.FormContext = exports.useForm = exports.Field = exports.Form = exports.useFormProps = void 0;
+exports.useFieldProps = exports.SubmitError = exports.FormContext = exports.useForm = exports.Field = exports.Form = exports.useFormProps = void 0;
 const Field_1 = require("./Field");
 Object.defineProperty(exports, "Field", { enumerable: true, get: function () { return Field_1.Field; } });
 const SubmitError_1 = require("./SubmitError");
@@ -19,5 +19,7 @@ Object.defineProperty(exports, "useFormProps", { enumerable: true, get: function
 Object.defineProperty(exports, "FormContext", { enumerable: true, get: function () { return Form_1.FormContext; } });
 const Form = Object.assign(Form_1.Form, { Item: Field_1.Field, useForm: useForm_1.useForm, SubmitError: SubmitError_1.SubmitError });
 exports.Form = Form;
+var use_field_1 = require("./use-field");
+Object.defineProperty(exports, "useFieldProps", { enumerable: true, get: function () { return use_field_1.useFieldProps; } });
 
         

package/cjs/components/forms/Form/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/cjs/components/forms/Form/use-field/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/cjs/components/forms/Form/use-field/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/cjs/components/forms/Form/use-field/use-field-props.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.
  */
 
@@ -12,6 +12,7 @@ const react_1 = require("react");
 const react_2 = require("react");
 const _internal_1 = require("../../../../_internal");
 const Field_1 = require("../Field");
+const react_3 = require("../../../../utils/react");
 const use_field_1 = require("./use-field");
 function useFieldProps(props, params = {}) {
     // We use ref here to "memoize" initial value
@@ -22,7 +23,9 @@ function useFieldProps(props, params = {}) {
     }), 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) {
+    if (isInsideLegacyField === true ||
+        isDisabledRef.current === true ||
+        props.name == null) {
         return props;
     }
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -35,21 +38,13 @@ function useFieldProps(props, params = {}) {
     // 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 onChangeEvent = (0, _internal_1.useEvent)((value, dontTouch) => field?.onChange?.(value, dontTouch, field?.validateTrigger ?? defaultValidationTrigger));
     const result = isOutsideOfForm
         ? props
-        : {
-            ...props,
-            ...field,
-            ...valuePropsMapper({
-                value: field.value,
-                onChange: onChangeEvent,
-            }),
+        : (0, react_3.mergeProps)(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);

package/cjs/components/forms/Form/use-field/use-field.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.
  */
 
@@ -131,6 +131,7 @@ function useField(props, params) {
     }), [
         form,
         field,
+        field?.inputValue,
         fieldId,
         fieldName,
         isRequired,

package/cjs/components/forms/Form/useForm.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/cjs/components/forms/Form/validation.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/cjs/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/cjs/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/cjs/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/cjs/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.
  */
 
@@ -36,7 +36,7 @@ const StepperContainer = (0, tasty_1.tasty)({
 function NumberInput(props, ref) {
     props = (0, nullableValue_1.castNullableNumberValue)(props);
     props = (0, provider_1.useProviderProps)(props);
-    props = (0, Form_1.useFormProps)(props);
+    props = (0, Form_1.useFieldProps)(props);
     let { hideStepper, suffix, value, defaultValue, onChange, ...otherProps } = props;
     let showStepper = !hideStepper;
     let { locale } = (0, i18n_1.useLocale)();

package/cjs/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/cjs/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.
  */
 
@@ -16,20 +16,29 @@ const TextInputBase_1 = require("../TextInput/TextInputBase");
 const provider_1 = require("../../../provider");
 const actions_1 = require("../../actions");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
+const Form_1 = require("../Form");
 function PasswordInput(props, ref) {
     props = (0, nullableValue_1.castNullableStringValue)(props);
-    let { suffix, multiLine, ...otherProps } = (0, provider_1.useProviderProps)({ ...props });
+    props = (0, provider_1.useProviderProps)(props);
+    props = (0, Form_1.useFieldProps)(props, {
+        defaultValidationTrigger: 'onBlur',
+        valuePropsMapper: ({ value, onChange }) => ({
+            value: value?.toString() ?? '',
+            onChange,
+        }),
+    });
     let [type, setType] = (0, react_1.useState)('password');
     let inputRef = (0, react_1.useRef)(null);
     let { labelProps, inputProps } = (0, textfield_1.useTextField)({
-        ...otherProps,
+        ...props,
         type,
     }, inputRef);
-    const toggleType = (0, react_1.useCallback)((e) => {
+    const { suffix, multiLine, ...rest } = props;
+    const toggleType = (0, react_1.useCallback)(() => {
         setType((type) => (type === 'password' ? 'text' : 'password'));
     }, []);
     const wrappedSuffix = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [suffix, (0, jsx_runtime_1.jsx)(actions_1.Button, { excludeFromTabOrder: true, type: "neutral", htmlType: "button", placeSelf: "stretch", height: "auto", radius: "right", width: "4x", label: "Toggle masking", icon: type === 'password' ? (0, jsx_runtime_1.jsx)(icons_1.EyeInvisibleOutlined, {}) : (0, jsx_runtime_1.jsx)(icons_1.EyeOutlined, {}), onPress: toggleType })] }));
-    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...otherProps }));
+    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...rest }));
 }
 /**
  * PasswordInputs are password inputs that allow users to input passwords or code entries

package/cjs/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.
  */
 
@@ -118,6 +118,7 @@ const RadioLabelElement = (0, tasty_1.tasty)({
 function Radio(props, ref) {
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
+    props = (0, Form_1.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/cjs/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.
  */
 
@@ -36,6 +36,7 @@ function RadioGroup(props, ref) {
     props = (0, nullableValue_1.castNullableStringValue)(props);
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
+    props = (0, Form_1.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 = (0, utils_1.useDOMRef)(ref);
     styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);

package/cjs/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/cjs/components/forms/SearchInput/SearchInput.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.
  */
 
@@ -35,9 +35,8 @@ exports.SearchInput = (0, react_1.forwardRef)(function SearchInput(props, ref) {
     let inputRef = (0, react_1.useRef)(null);
     let state = (0, searchfield_1.useSearchFieldState)(props);
     let { inputProps, clearButtonProps } = (0, searchfield_2.useSearchField)(props, state, inputRef);
-    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ref: ref, inputProps: inputProps, inputRef: inputRef, type: "search", icon: (0, jsx_runtime_1.jsx)(icons_1.SearchOutlined, {}), suffixPosition: "after", suffix: isClearable &&
-            state.value !== '' &&
-            !props.isReadOnly && ((0, jsx_runtime_1.jsx)(ClearButton, { type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...(0, mapProps_1.ariaToCubeButtonProps)(clearButtonProps) })), ...props }));
+    let showClearButton = isClearable && state.value !== '' && !props.isReadOnly;
+    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ref: ref, inputProps: inputProps, inputRef: inputRef, type: "search", icon: (0, jsx_runtime_1.jsx)(icons_1.SearchOutlined, {}), suffixPosition: "after", ...props, suffix: props.suffix || showClearButton ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.suffix, showClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...(0, mapProps_1.ariaToCubeButtonProps)(clearButtonProps) }))] })) : undefined }));
 });
 
         

package/cjs/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/cjs/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/cjs/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/cjs/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.
  */
 
@@ -16,7 +16,7 @@ const SliderTrack_1 = require("./SliderTrack");
 const SliderBase_1 = require("./SliderBase");
 const Gradation_1 = require("./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`
@@ -28,10 +28,10 @@ function Slider(props, ref) {
         onChangeEnd: (v) => {
             onChangeEnd?.(v[0]);
         },
-        getValueLabel: getValueLabel ? ([v]) => getValueLabel?.(v) : undefined,
+        getValueLabel: getValueLabel ? ([v]) => getValueLabel(v) : undefined,
     };
-    styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);
-    return ((0, jsx_runtime_1.jsx)(SliderBase_1.SliderBase, { ...otherProps, ...baseProps, orientation: orientation, styles: styles, children: ({ trackRef, inputRef, state }) => {
+    const extractedStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);
+    return ((0, jsx_runtime_1.jsx)(SliderBase_1.SliderBase, { ...otherProps, ...baseProps, ref: ref, orientation: orientation, styles: extractedStyles, children: ({ trackRef, inputRef, state }) => {
             return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Gradation_1.Gradation, { state: state, ranges: [0, 1], values: gradation }), (0, jsx_runtime_1.jsx)(SliderTrack_1.SliderTrack, { state: state, isDisabled: isDisabled, orientation: orientation }), (0, jsx_runtime_1.jsx)(SliderThumb_1.SliderThumb, { index: 0, state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled })] }));
         } }));
 }

package/cjs/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.
  */
 
@@ -14,7 +14,7 @@ const utils_1 = require("@react-spectrum/utils");
 const slider_1 = require("@react-stately/slider");
 const slider_2 = require("@react-aria/slider");
 const i18n_1 = require("@react-aria/i18n");
-const FieldWrapper_1 = require("../../forms/FieldWrapper");
+const FieldWrapper_1 = require("../FieldWrapper");
 const tasty_1 = require("../../../tasty");
 const Form_1 = require("../Form");
 const Text_1 = require("../../content/Text");
@@ -26,7 +26,14 @@ const LabelValueElement = (0, tasty_1.tasty)(Text_1.Text, {
     },
 });
 function SliderBase(allProps, ref) {
-    const props = (0, Form_1.useFormProps)(allProps);
+    let props = (0, Form_1.useFormProps)(allProps);
+    props = (0, Form_1.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.