@cube-dev/ui-kit 0.0.0-canary-327e193 → 0.0.0-canary-ce8187e

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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * Released under the MIT license.
  */
 
@@ -17,7 +17,7 @@ import { useFocus } from '../../../utils/react/interactions';
 import { mergeProps } from '../../../utils/react';
 import { INLINE_LABEL_STYLES, LABEL_STYLES } from '../Label';
 import { HiddenInput } from '../../HiddenInput';
-import { useFormProps } from '../Form';
+import { useFieldProps } from '../Form';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableIsSelected, } from '../../../utils/react/nullableValue';
 import { Text } from '../../content/Text';
@@ -75,15 +75,23 @@ 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);
+    props = castNullableIsSelected(props);
+    let originalProps = 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, isDisabled = false, insideForm, isRequired, autoFocus, children, label, extra, validationState, labelProps, labelStyles, labelPosition, necessityLabel, necessityIndicator, message, description, requiredMark = true, tooltip, isHidden, labelSuffix, ...otherProps } = props;
     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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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 { FieldWrapper } from '../FieldWrapper';
+import { extractFieldWrapperProps, FieldWrapper } from '../FieldWrapper';
 import { castNullableArrayValue, } from '../../../utils/react/nullableValue';
+import { useFieldProps, FormContext } from '../Form';
 import { CheckboxGroupContext } from './context';
 const CheckGroupElement = tasty({
     qa: 'CheckboxGroup',
@@ -35,10 +35,17 @@ const CheckGroupElement = tasty({
 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, inputStyles, ...otherProps } = 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 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: {
@@ -47,27 +54,7 @@ function CheckboxGroup(props, ref) {
                 isDisabled,
                 validationState,
             }, children: _jsx(CheckboxGroupContext.Provider, { value: state, children: children }) }) }));
-    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,
-        } }));
+    return (_jsx(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/es/components/forms/Checkbox/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * Released under the MIT license.
  */
 
@@ -11,5 +11,6 @@ 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * Released under the MIT license.
  */
 
@@ -9,6 +9,7 @@ import { useRef } from 'react';
 import { useDebugValue } from 'react';
 import { useChainedCallback, useEvent, useWarn } from '../../../../_internal';
 import { useInsideLegacyField } from '../Field';
+import { chain } from '../../../../utils/react';
 import { useField } from './use-field';
 export function useFieldProps(props, params = {}) {
     // We use ref here to "memoize" initial value
@@ -19,7 +20,9 @@ export function useFieldProps(props, params = {}) {
     }), defaultValidationTrigger = 'onBlur', } = params;
     const isInsideLegacyField = useInsideLegacyField();
     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
@@ -32,18 +35,25 @@ 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) => {
-        return field?.onChange?.(value, dontTouch, field?.validateTrigger ?? defaultValidationTrigger);
+    const onChangeEvent = useEvent((value, dontTouch) => field?.onChange?.(value, dontTouch, field?.validateTrigger ?? defaultValidationTrigger));
+    const mapped = valuePropsMapper({
+        value: field.value,
+        onChange: onChangeEvent,
     });
+    const mappedKeys = Object.keys(mapped).filter((key) => typeof mapped[key] === 'function');
+    for (const mappedKey of mappedKeys) {
+        const prop = props[mappedKey];
+        const mappedProp = mapped[mappedKey];
+        if (typeof prop !== 'undefined') {
+            mapped[mappedKey] = chain(prop, mappedProp);
+        }
+    }
     const result = isOutsideOfForm
         ? props
         : {
             ...props,
             ...field,
-            ...valuePropsMapper({
-                value: field.value,
-                onChange: onChangeEvent,
-            }),
+            ...mapped,
             validateTrigger: field.validateTrigger ?? defaultValidationTrigger,
             onBlur: onBlurChained,
         };

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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * Released under the MIT license.
  */
 
@@ -128,6 +128,7 @@ 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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.0.0-canary-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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.0.0-canary-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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 } from '../Form';
 import { RadioGroup } from './RadioGroup';
 import { useRadioProvider } from './context';
 const RadioWrapperElement = tasty({
@@ -114,7 +114,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.0.0-canary-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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 } from '../Form';
 import { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
@@ -32,7 +32,7 @@ const RadioGroupElement = tasty({
 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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-327e193
+ * @cube-dev/ui-kit v0.0.0-canary-ce8187e
  * 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 })] }));
         } }));
 }