@cube-dev/ui-kit 0.0.0-canary-397306f → 0.0.0-canary-24fd9c3

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-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * 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 { useFieldProps, useFormProps } from '../Form';
+import { useFormProps } from '../Form';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableIsSelected, } from '../../../utils/react/nullableValue';
 import { Text } from '../../content/Text';
@@ -75,24 +75,15 @@ 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.
-    let groupState = useContext(CheckboxGroupContext);
     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,
-        }),
-        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 = useContext(CheckboxGroupContext);
     let styles = extractStyles(props, OUTER_STYLES);
     let inputStyles = extractStyles(props, BLOCK_STYLES);
     labelStyles = {

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 
@@ -11,10 +11,10 @@ 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 { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';
-import { extractFieldWrapperProps, FieldWrapper } from '../FieldWrapper';
+import { FieldWrapper } from '../FieldWrapper';
 import { castNullableArrayValue, } from '../../../utils/react/nullableValue';
-import { useFieldProps, FormContext, useFormProps } from '../Form';
 import { CheckboxGroupContext } from './context';
 const CheckGroupElement = tasty({
     qa: 'CheckboxGroup',
@@ -36,17 +36,9 @@ function CheckboxGroup(props, ref) {
     props = castNullableArrayValue(props);
     props = useProviderProps(props);
     props = useFormProps(props);
-    props = 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 { isDisabled, isRequired, necessityIndicator, necessityLabel, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, labelSuffix, inputStyles, ...otherProps } = props;
     let domRef = useDOMRef(ref);
     let styles = extractStyles(otherProps, CONTAINER_STYLES);
-    let { fieldWrapperProps } = extractFieldWrapperProps(props);
     let state = useCheckboxGroupState(props);
     let { groupProps, labelProps } = useCheckboxGroup(props, state);
     let radioGroup = (_jsx(CheckGroupElement, { styles: inputStyles, mods: {
@@ -55,7 +47,27 @@ function CheckboxGroup(props, ref) {
                 isDisabled,
                 validationState,
             }, children: _jsx(CheckboxGroupContext.Provider, { value: state, children: children }) }) }));
-    return (_jsx(FieldWrapper, { ...fieldWrapperProps, ref: domRef, Component: radioGroup, fieldProps: groupProps, labelProps: labelProps, styles: styles }));
+    return (_jsx(FieldWrapper, { ...{
+            labelPosition,
+            label,
+            extra,
+            styles,
+            isRequired,
+            labelStyles,
+            necessityIndicator,
+            necessityLabel,
+            labelProps,
+            fieldProps: groupProps,
+            isDisabled,
+            validationState,
+            message,
+            description,
+            requiredMark,
+            tooltip,
+            labelSuffix,
+            Component: radioGroup,
+            ref: domRef,
+        } }));
 }
 /**
  * Checkbox groups allow users to select a single option from a list of mutually exclusive options.

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-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

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-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

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-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 
@@ -11,6 +11,5 @@ import { useForm } from './useForm';
 import { useFormProps, FormContext, Form as _Form } from './Form';
 const Form = Object.assign(_Form, { Item: Field, useForm, SubmitError });
 export { useFormProps, Form, Field, useForm, FormContext, SubmitError };
-export { useFieldProps } from './use-field';
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 
@@ -9,7 +9,6 @@ import { useRef } from 'react';
 import { useDebugValue } from 'react';
 import { useChainedCallback, useEvent, useWarn } from '../../../../_internal';
 import { useInsideLegacyField } from '../Field';
-import { mergeProps } from '../../../../utils/react';
 import { useField } from './use-field';
 export function useFieldProps(props, params = {}) {
     // We use ref here to "memoize" initial value
@@ -20,9 +19,7 @@ export function useFieldProps(props, params = {}) {
     }), defaultValidationTrigger = 'onBlur', } = params;
     const isInsideLegacyField = useInsideLegacyField();
     useWarn(isInsideLegacyField, '<Field /> is deprecated, use component without <Field /> instead.');
-    if (isInsideLegacyField === true ||
-        isDisabledRef.current === true ||
-        props.name == null) {
+    if (isInsideLegacyField || isDisabledRef.current || props.name == null) {
         return props;
     }
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -35,13 +32,21 @@ export 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 = useEvent((value, dontTouch) => field?.onChange?.(value, dontTouch, field?.validateTrigger ?? defaultValidationTrigger));
+    const onChangeEvent = useEvent((value, dontTouch) => {
+        return field?.onChange?.(value, dontTouch, field?.validateTrigger ?? defaultValidationTrigger);
+    });
     const result = isOutsideOfForm
         ? props
-        : mergeProps(props, field, valuePropsMapper({ value: field.value, onChange: onChangeEvent }), {
+        : {
+            ...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
         useDebugValue(result);

package/es/components/forms/Form/use-field/use-field.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 
@@ -128,7 +128,6 @@ export function useField(props, params) {
     }), [
         form,
         field,
-        field?.inputValue,
         fieldId,
         fieldName,
         isRequired,

package/es/components/forms/Form/useForm.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/es/components/forms/Form/validation.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * 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.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * 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.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * 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.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * 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 { useFieldProps } from '../Form';
+import { useFormProps } 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 = useFieldProps(props);
+    props = useFormProps(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.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * 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.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 
@@ -13,29 +13,20 @@ 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);
-    props = useProviderProps(props);
-    props = useFieldProps(props, {
-        defaultValidationTrigger: 'onBlur',
-        valuePropsMapper: ({ value, onChange }) => ({
-            value: value?.toString() ?? '',
-            onChange,
-        }),
-    });
+    let { suffix, multiLine, ...otherProps } = useProviderProps({ ...props });
     let [type, setType] = useState('password');
     let inputRef = useRef(null);
     let { labelProps, inputProps } = useTextField({
-        ...props,
+        ...otherProps,
         type,
     }, inputRef);
-    const { suffix, multiLine, ...rest } = props;
-    const toggleType = useCallback(() => {
+    const toggleType = useCallback((e) => {
         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, ...rest }));
+    return (_jsx(TextInputBase, { ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...otherProps }));
 }
 /**
  * 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.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * 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 { useFieldProps, useFormProps } from '../Form';
+import { useFormProps } from '../Form';
 import { RadioGroup } from './RadioGroup';
 import { useRadioProvider } from './context';
 const RadioWrapperElement = tasty({
@@ -115,7 +115,6 @@ 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.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * 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, useFieldProps, useFormProps } from '../Form';
+import { FormContext, useFormProps } from '../Form';
 import { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
@@ -33,7 +33,6 @@ 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.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * 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.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * 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.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * 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.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * 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) {
-    const { onChange, onChangeEnd, value, defaultValue, getValueLabel, isDisabled, styles, gradation, orientation, ...otherProps } = props;
+    let { 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,
     };
-    const extractedStyles = extractStyles(otherProps, OUTER_STYLES, styles);
-    return (_jsx(SliderBase, { ...otherProps, ...baseProps, ref: ref, orientation: orientation, styles: extractedStyles, children: ({ trackRef, inputRef, state }) => {
+    styles = extractStyles(otherProps, OUTER_STYLES, styles);
+    return (_jsx(SliderBase, { ...otherProps, ...baseProps, orientation: orientation, styles: styles, 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.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * 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 '../FieldWrapper';
+import { FieldWrapper } from '../../forms/FieldWrapper';
 import { extractStyles, OUTER_STYLES, tasty } from '../../../tasty';
-import { useFieldProps, useFormProps } from '../Form';
+import { useFormProps } from '../Form';
 import { Text } from '../../content/Text';
 import { SliderControlsElement, SliderElement } from './elements';
 const LabelValueElement = tasty(Text, {
@@ -23,14 +23,7 @@ const LabelValueElement = tasty(Text, {
     },
 });
 function SliderBase(allProps, ref) {
-    let props = useFormProps(allProps);
-    props = useFieldProps(props, {
-        defaultValidationTrigger: 'onChange',
-        valuePropsMapper: ({ value, onChange }) => ({
-            value: value != null ? value : undefined,
-            onChange: onChange,
-        }),
-    });
+    const props = useFormProps(allProps);
     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.