@cube-dev/ui-kit 0.18.2 → 0.20.0

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

@@ -0,0 +1,56 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.20.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFieldProps = void 0;
+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
+    const isDisabledRef = (0, react_1.useRef)(params.unsafe__isDisabled ?? false);
+    const { valuePropsMapper = ({ value, onChange }) => ({
+        value: value ?? null,
+        onChange,
+    }), defaultValidationTrigger = 'onBlur', } = params;
+    const isInsideLegacyField = (0, Field_1.useInsideLegacyField)();
+    (0, _internal_1.useWarn)(isInsideLegacyField, '<Field /> is deprecated, use component without <Field /> instead.');
+    if (isInsideLegacyField === true ||
+        isDisabledRef.current === true ||
+        props.name == null) {
+        return props;
+    }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const field = (0, use_field_1.useField)(props, {
+        defaultValidationTrigger: params.defaultValidationTrigger,
+    });
+    const isOutsideOfForm = field?.form == null;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const onBlurChained = (0, _internal_1.useChainedCallback)(field?.onBlur, 
+    // 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) => field?.onChange?.(value, dontTouch, field?.validateTrigger ?? defaultValidationTrigger));
+    const result = isOutsideOfForm
+        ? props
+        : (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);
+    }
+    return result;
+}
+exports.useFieldProps = useFieldProps;
+
+        

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

@@ -0,0 +1,147 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.20.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useField = void 0;
+const react_1 = require("react");
+const _internal_1 = require("../../../../_internal");
+const Form_1 = require("../Form");
+const ID_MAP = {};
+function createId(name) {
+    if (!name)
+        return;
+    if (!ID_MAP[name]) {
+        ID_MAP[name] = [];
+    }
+    let i = 0;
+    let id;
+    do {
+        id = i ? `${name}_${i}` : name;
+        i++;
+    } while (ID_MAP[name].includes(id));
+    ID_MAP[name].push(id);
+    return id;
+}
+function removeId(name, id) {
+    if (!ID_MAP[name])
+        return;
+    ID_MAP[name] = ID_MAP[name].filter((_id) => _id !== id);
+}
+function useField(props, params) {
+    props = (0, Form_1.useFormProps)(props);
+    let { defaultValue, id, idPrefix, name, form, rules, validateTrigger = params.defaultValidationTrigger, validationState, shouldUpdate, } = props;
+    const nonInput = !name;
+    const fieldName = name != null ? (Array.isArray(name) ? name.join('.') : name) : '';
+    const isFirstRender = (0, _internal_1.useIsFirstRender)();
+    let [fieldId, setFieldId] = (0, react_1.useState)(id || (idPrefix ? `${idPrefix}_${fieldName}` : fieldName));
+    (0, react_1.useEffect)(() => {
+        let newId;
+        if (!id && !nonInput) {
+            newId = createId(fieldId);
+            setFieldId(newId);
+        }
+        return () => {
+            if (!id) {
+                removeId(idPrefix ? `${idPrefix}_${fieldName}` : fieldName, newId);
+            }
+            if (fieldName && form) {
+                form.removeField(fieldName);
+            }
+        };
+    }, []);
+    let field = form?.getFieldInstance(fieldName);
+    if (field) {
+        field.rules = rules;
+    }
+    let isRequired = rules && !!rules.find((rule) => rule.required);
+    (0, react_1.useEffect)(() => {
+        if (!form)
+            return;
+        if (field) {
+            form.forceReRender();
+        }
+        else {
+            form.createField(fieldName);
+        }
+    }, [field]);
+    if (form) {
+        if (isFirstRender) {
+            if (!field) {
+                field = form.createField(fieldName, true);
+            }
+            if (field?.value == null) {
+                form.setFieldValue(fieldName, defaultValue, false, true);
+                field = form?.getFieldInstance(fieldName);
+            }
+        }
+        if (!field?.touched && defaultValue != null) {
+            form.setFieldValue(fieldName, defaultValue, false, true);
+        }
+    }
+    const onChangeHandler = (0, _internal_1.useEvent)((val, dontTouch) => {
+        if (!form)
+            return;
+        const field = form.getFieldInstance(fieldName);
+        if (shouldUpdate) {
+            const fieldsValue = form.getFieldsValue();
+            // check if we should update the value of the field
+            const shouldNotBeUpdated = typeof shouldUpdate === 'boolean'
+                ? !shouldUpdate
+                : !shouldUpdate(fieldsValue, {
+                    ...fieldsValue,
+                    [fieldName]: val,
+                });
+            if (shouldNotBeUpdated) {
+                return;
+            }
+        }
+        form.setFieldValue(fieldName, val, !dontTouch, false, dontTouch);
+        if (!dontTouch &&
+            (validateTrigger === 'onChange' ||
+                (field && field.errors && field.errors.length))) {
+            form.validateField(fieldName).catch(() => { }); // do nothing on fail
+        }
+    });
+    const onBlurHandler = (0, _internal_1.useEvent)(() => {
+        if (validateTrigger === 'onBlur') {
+            // We need a timeout so the change event can be done.
+            setTimeout(() => {
+                form?.validateField(fieldName).catch(() => { }); // do nothing on fail
+            });
+        }
+    });
+    return (0, react_1.useMemo)(() => ({
+        id: fieldId,
+        name: fieldName,
+        value: field?.inputValue,
+        validateTrigger,
+        form,
+        field,
+        nonInput,
+        validationState: validationState ?? (field?.errors?.length ? 'invalid' : undefined),
+        ...(isRequired && { isRequired }),
+        ...(field?.errors?.length && { message: field.errors[0] }),
+        onBlur: onBlurHandler,
+        onChange: onChangeHandler,
+    }), [
+        form,
+        field,
+        field?.inputValue,
+        fieldId,
+        fieldName,
+        isRequired,
+        onBlurHandler,
+        onChangeHandler,
+        validateTrigger,
+        validationState,
+        nonInput,
+    ]);
+}
+exports.useField = useField;
+
+        

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.18.2
+ * @cube-dev/ui-kit v0.20.0
  * Released under the MIT license.
  */
 
@@ -220,6 +220,7 @@ class CubeFormInstance {
         if (!skipRender) {
             this.forceReRender();
         }
+        return this.fields[name];
     }
     removeField(name, skipRender) {
         if (this.fields[name]) {

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.18.2
+ * @cube-dev/ui-kit v0.20.0
  * 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.18.2
+ * @cube-dev/ui-kit v0.20.0
  * 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.18.2
+ * @cube-dev/ui-kit v0.20.0
  * 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.18.2
+ * @cube-dev/ui-kit v0.20.0
  * Released under the MIT license.
  */
 
@@ -34,7 +34,7 @@ exports.INLINE_LABEL_STYLES = {
 };
 exports.LABEL_STYLES = {
     display: 'block',
-    preset: 't3s',
+    preset: 'h6',
     color: {
         '': '#dark',
         invalid: '#danger-text',

package/cjs/components/forms/NumberInput/NumberInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.18.2
+ * @cube-dev/ui-kit v0.20.0
  * 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.18.2
+ * @cube-dev/ui-kit v0.20.0
  * 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.18.2
+ * @cube-dev/ui-kit v0.20.0
  * 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.18.2
+ * @cube-dev/ui-kit v0.20.0
  * 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.18.2
+ * @cube-dev/ui-kit v0.20.0
  * 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.18.2
+ * @cube-dev/ui-kit v0.20.0
  * 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.18.2
+ * @cube-dev/ui-kit v0.20.0
  * 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.18.2
+ * @cube-dev/ui-kit v0.20.0
  * 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.18.2
+ * @cube-dev/ui-kit v0.20.0
  * 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.18.2
+ * @cube-dev/ui-kit v0.20.0
  * 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.18.2
+ * @cube-dev/ui-kit v0.20.0
  * 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.18.2
+ * @cube-dev/ui-kit v0.20.0
  * 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.

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

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

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.18.2
+ * @cube-dev/ui-kit v0.20.0
  * Released under the MIT license.
  */
 
@@ -12,12 +12,20 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const elements_1 = require("./elements");
 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 = (0, react_1.useMemo)(() => ({
         disabled: isDisabled,
         horizontal: orientation === 'horizontal',
-    }), [isDisabled]);
-    return (0, jsx_runtime_1.jsx)(elements_1.SliderTrackContainerElement, { mods: mods });
+        range: showRangeTrack,
+    }), [isDisabled, showRangeTrack]);
+    return ((0, jsx_runtime_1.jsx)(elements_1.SliderTrackContainerElement, { mods: mods, style: showRangeTrack
+            ? {
+                '--slider-range-start': `${selectedTrack[0] * 100}%`,
+                '--slider-range-end': `${selectedTrack[1] * 100}%`,
+            }
+            : {} }));
 }
 exports.SliderTrack = SliderTrack;
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.18.2
+ * @cube-dev/ui-kit v0.20.0
  * Released under the MIT license.
  */
 
@@ -57,6 +57,19 @@ exports.SliderTrackContainerElement = (0, tasty_1.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)',
+        },
     },
 });
 exports.SliderGradationElement = (0, tasty_1.tasty)({

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

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

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

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