npm - @pega/cosmos-react-core - Versions diffs - 2.0.0-dev.2.1 → 2.0.0-dev.20.0 - Mend

@pega/cosmos-react-core 2.0.0-dev.2.1 → 2.0.0-dev.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3146) hide show

package/lib/components/Slider/Slider.js CHANGED Viewed

@@ -1,42 +1,43 @@
-import React, { useCallback, useEffect, useRef, useState, forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState, forwardRef } from 'react';
 import { NumberInput } from '../Number';
-import { useConsolidatedRef, useTheme, useUID } from '../../hooks';
+import { useConsolidatedRef, useDirection, useUID } from '../../hooks';
 import FormField from '../FormField';
-import Text from '../Text';
 import Flex from '../Flex';
 import Grid from '../Grid';
-import { StyledSlider, StyledTrack, StyledThumb, StyledSliderTrackWrapper, StyledBar } from './Slider.styles';
-import { getNearestValue } from './utils';
+import { cap } from '../../utils';
+import { StyledSlider, StyledTrack, StyledThumb, StyledSliderTrackWrapper, StyledBar, StyledPreview } from './Slider.styles';
+import { calculateValueLength, getNearestValue } from './utils';
 import SliderTicks from './SliderTicks';
 const Slider = forwardRef((props, ref) => {
-    const { id = useUID(), required, status, info, label, labelHidden, min = 0, max = 100, step = 1, value = min, orientation = 'horizontal', preview, disabled = false, readOnly = false, showInput = true, showProgress, ticks = {}, onChange, autoFocus, ...restProps } = props;
+    const uid = useUID();
+    const { id = uid, required, status, info, label, labelHidden, min = 0, max = 100, step = 1, value = min, orientation = 'horizontal', preview, disabled = false, readOnly = false, showInput = true, showProgress, ticks = {}, onChange, autoFocus, onDragStart, onDragEnd: onDragEndProp, ...restProps } = props;
     const thumbRef = useConsolidatedRef(ref);
     const trackRef = useRef(null);
     const [inDrag, setInDrag] = useState(false);
     const [inputValue, setInputValue] = useState(value.toString());
-    const setValue = (newValue) => {
+    const setValue = useCallback((newValue) => {
         if (disabled || readOnly)
             return;
         const normalizedValue = Math.min(Math.max(newValue, min), max);
         setInputValue(normalizedValue.toString());
         onChange(normalizedValue);
-    };
+    }, [disabled, readOnly, onChange]);
+    const { start, end } = useDirection();
     const moveThumb = useCallback((e) => {
-        var _a;
         if (disabled || readOnly)
             return;
         if (trackRef.current) {
             const track = trackRef.current.getBoundingClientRect();
             const { clientX, clientY } = 'touches' in e ? e.touches[0] : e;
             const newPosition = orientation === 'horizontal'
-                ? (clientX - track.left) / (track.right - track.left)
+                ? (clientX - track[start]) / (track[end] - track[start])
                 : (clientY - track.bottom) / (track.top - track.bottom);
             const normalizedValue = Math.min(Math.max(min + (max - min) * newPosition, min), max);
             setValue(getNearestValue(normalizedValue, min, max, step));
         }
-        (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [disabled, readOnly, step, min, max]);
-    const rtl = useTheme().base.rtl;
+        thumbRef.current?.focus();
+    }, [disabled, readOnly, step, min, max, setValue, start, end]);
     const onThumbKeyDown = useCallback((e) => {
         if ([
             'ArrowDown',
@@ -51,11 +52,11 @@ const Slider = forwardRef((props, ref) => {
             e.preventDefault();
         switch (e.key) {
             case 'ArrowDown':
-            case `Arrow${rtl ? 'Right' : 'Left'}`:
+            case `Arrow${cap(start)}`:
                 setValue(value - step);
                 break;
             case 'ArrowUp':
-            case `Arrow${rtl ? 'Left' : 'Right'}`:
+            case `Arrow${cap(end)}`:
                 setValue(value + step);
                 break;
             case 'PageUp':
@@ -72,9 +73,13 @@ const Slider = forwardRef((props, ref) => {
                 break;
             default:
         }
-    }, [value, step]);
+    }, [setValue, value, step, start, end]);
     useEffect(() => {
-        const onDragEnd = () => setInDrag(false);
+        const onDragEnd = () => {
+            setInDrag(false);
+            if (inDrag)
+                onDragEndProp?.();
+        };
         document.addEventListener('mouseup', onDragEnd);
         document.addEventListener('touchend', onDragEnd);
         document.addEventListener('touchcancel', onDragEnd);
@@ -89,31 +94,27 @@ const Slider = forwardRef((props, ref) => {
             document.removeEventListener('mousemove', moveThumb);
             document.removeEventListener('touchmove', moveThumb);
         };
-    }, [inDrag, moveThumb]);
+    }, [inDrag, moveThumb, onDragEndProp]);
     useEffect(() => {
-        var _a;
         if (autoFocus)
-            (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            thumbRef.current?.focus();
     }, [autoFocus]);
     const percentage = ((Number(value) - min) / (max - min)) * 100;
-    const Comp = (React.createElement(Flex, { ...restProps, as: StyledSlider, container: {
+    const Comp = (_jsxs(Flex, { ...restProps, as: StyledSlider, container: {
             alignItems: 'start',
             direction: orientation === 'horizontal' ? 'row' : 'column'
         }, orientation: orientation, ...{ status, disabled, readOnly }, style: {
             '--slider-value': `${percentage}%`,
             userSelect: inDrag ? 'none' : 'auto'
-        } },
-        React.createElement(Grid, { as: StyledSliderTrackWrapper, container: true },
-            React.createElement(Flex, { as: StyledTrack, ref: trackRef, onMouseDown: moveThumb, container: { alignItems: 'center', justify: 'center' } },
-                React.createElement(StyledBar, { showProgress: showProgress }),
-                React.createElement(StyledThumb, { ref: thumbRef, role: 'slider', tabIndex: 0, onKeyDown: onThumbKeyDown, onMouseDown: () => setInDrag(true), onTouchStart: (e) => {
-                        setInDrag(true);
-                        e.preventDefault(); // Prevent dispatching mouse events as some browser may do that
-                    }, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-orientation": orientation, "aria-readonly": readOnly || undefined, "aria-disabled": disabled || undefined, id: id, "aria-label": label === null || label === void 0 ? void 0 : label.toString(), "aria-describedby": `${id}-info`, "aria-controls": `${id}-value` })),
-            Object.keys(ticks).length > 0 && (React.createElement(SliderTicks, { ticks: ticks, min: min, max: max, orientation: orientation, onClick: setValue }))),
-        showInput && !preview && (React.createElement(NumberInput, { id: `${id}-value`, status: status, min: min, max: max, step: step, value: inputValue, onChange: setInputValue, onBlur: v => setValue(getNearestValue(Number(v), min, max, step)), size: max.toString().length, readOnly: readOnly, disabled: disabled, "aria-label": label === null || label === void 0 ? void 0 : label.toString() })),
-        preview && React.createElement(Text, { id: `${id}-value` }, value)));
-    return label ? (React.createElement(FormField, { ...{ label, labelHidden, id, info, status, required, disabled } }, Comp)) : (Comp);
+        }, children: [_jsxs(Grid, { as: StyledSliderTrackWrapper, container: true, children: [_jsxs(Flex, { as: StyledTrack, ref: trackRef, onMouseDown: moveThumb, container: { alignItems: 'center', justify: 'center' }, children: [_jsx(StyledBar, { showProgress: showProgress }, void 0), _jsx(StyledThumb, { ref: thumbRef, role: 'slider', tabIndex: 0, onKeyDown: onThumbKeyDown, onMouseDown: () => {
+                                    setInDrag(true);
+                                    onDragStart?.();
+                                }, onTouchStart: (e) => {
+                                    setInDrag(true);
+                                    e.preventDefault(); // Prevent dispatching mouse events as some browser may do that
+                                    onDragStart?.();
+                                }, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-orientation": orientation, "aria-readonly": readOnly || undefined, "aria-disabled": disabled || undefined, id: id, "aria-label": label?.toString(), "aria-describedby": `${id}-info`, "aria-controls": `${id}-value` }, void 0)] }, void 0), Object.keys(ticks).length > 0 && (_jsx(SliderTicks, { ticks: ticks, min: min, max: max, step: step, orientation: orientation, onClick: setValue }, void 0))] }, void 0), showInput && !preview && (_jsx(NumberInput, { id: `${id}-value`, status: status, min: min, max: max, step: step, value: inputValue, onChange: setInputValue, onBlur: v => setValue(getNearestValue(Number(v), min, max, step)), size: calculateValueLength(min, max, step), readOnly: readOnly, disabled: disabled, "aria-label": label?.toString() }, void 0)), preview && (_jsx(StyledPreview, { id: `${id}-value`, value: value.toString(), size: calculateValueLength(min, max, step) }, void 0))] }, void 0));
+    return label ? (_jsx(FormField, { ...{ label, labelHidden, id, info, status, required, disabled }, children: Comp }, void 0)) : (Comp);
 });
 export default Slider;
 //# sourceMappingURL=Slider.js.map

package/lib/components/Slider/Slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAIZ,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EAER,UAAU,EAGX,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACnE,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAI3B,OAAO,EACL,YAAY,EACZ,WAAW,EACX,WAAW,EACX,wBAAwB,EACxB,SAAS,EACV,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,MAAM,MAAM,GAAkD,UAAU,CACtE,CAAC,KAAmC,EAAE,GAAwB,EAAE,EAAE;IAChE,MAAM,EACJ,EAAE,GAAG,MAAM,EAAE,EACb,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,KAAK,EACL,WAAW,EACX,GAAG,GAAG,CAAC,EACP,GAAG,GAAG,GAAG,EACT,IAAI,GAAG,CAAC,EACR,KAAK,GAAG,GAAG,EACX,WAAW,GAAG,YAAY,EAC1B,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,IAAI,EAChB,YAAY,EACZ,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,kBAAkB,CAAiB,GAAG,CAAC,CAAC;IACzD,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC9C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACrD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAS,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IAEvE,MAAM,QAAQ,GAAG,CAAC,QAAgB,EAAE,EAAE;QACpC,IAAI,QAAQ,IAAI,QAAQ;YAAE,OAAO;QACjC,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;QAE/D,aAAa,CAAC,eAAe,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC1C,QAAQ,CAAC,eAAe,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAA0B,EAAE,EAAE;;QAC7B,IAAI,QAAQ,IAAI,QAAQ;YAAE,OAAO;QACjC,IAAI,QAAQ,CAAC,OAAO,EAAE;YACpB,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;YACvD,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC/D,MAAM,WAAW,GACf,WAAW,KAAK,YAAY;gBAC1B,CAAC,CAAC,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC;gBACrD,CAAC,CAAC,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;YAE5D,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,WAAW,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;YACtF,QAAQ,CAAC,eAAe,CAAC,eAAe,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;SAC5D;QACD,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;IAC5B,CAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CACrC,CAAC;IAEF,MAAM,GAAG,GAAG,QAAQ,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC;IAEhC,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,CAA6B,EAAE,EAAE;QAChC,IACE;YACE,WAAW;YACX,SAAS;YACT,WAAW;YACX,YAAY;YACZ,QAAQ;YACR,UAAU;YACV,MAAM;YACN,KAAK;SACN,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC;YAEjB,CAAC,CAAC,cAAc,EAAE,CAAC;QAErB,QAAQ,CAAC,CAAC,GAAG,EAAE;YACb,KAAK,WAAW,CAAC;YACjB,KAAK,QAAQ,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE;gBACnC,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;gBACvB,MAAM;YACR,KAAK,SAAS,CAAC;YACf,KAAK,QAAQ,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE;gBACnC,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;gBACvB,MAAM;YACR,KAAK,QAAQ;gBACX,QAAQ,CAAC,KAAK,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC;gBAC5B,MAAM;YACR,KAAK,UAAU;gBACb,QAAQ,CAAC,KAAK,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC;gBAC5B,MAAM;YACR,KAAK,MAAM;gBACT,QAAQ,CAAC,GAAG,CAAC,CAAC;gBACd,MAAM;YACR,KAAK,KAAK;gBACR,QAAQ,CAAC,GAAG,CAAC,CAAC;gBACd,MAAM;YACR,QAAQ;SACT;IACH,CAAC,EACD,CAAC,KAAK,EAAE,IAAI,CAAC,CACd,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACzC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;QACjD,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;QACpD,IAAI,MAAM,EAAE;YACV,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;YAClD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;SACnD;QACD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;YACnD,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;YACpD,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;YACvD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;YACrD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QACvD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC;IAExB,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,SAAS;YAAE,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;IAC3C,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;IAE/D,MAAM,IAAI,GAAG,CACX,oBAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,YAAY,EAChB,SAAS,EAAE;YACT,UAAU,EAAE,OAAO;YACnB,SAAS,EAAE,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;SAC3D,EACD,WAAW,EAAE,WAAW,KACpB,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAClC,KAAK,EACH;YACE,gBAAgB,EAAE,GAAG,UAAU,GAAG;YAClC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;SACpB;QAGpB,oBAAC,IAAI,IAAC,EAAE,EAAE,wBAAwB,EAAE,SAAS;YAC3C,oBAAC,IAAI,IACH,EAAE,EAAE,WAAW,EACf,GAAG,EAAE,QAAQ,EACb,WAAW,EAAE,SAAS,EACtB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAEtD,oBAAC,SAAS,IAAC,YAAY,EAAE,YAAY,GAAI;gBACzC,oBAAC,WAAW,IACV,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,cAAc,EACzB,WAAW,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAClC,YAAY,EAAE,CAAC,CAAkC,EAAE,EAAE;wBACnD,SAAS,CAAC,IAAI,CAAC,CAAC;wBAChB,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,+DAA+D;oBACrF,CAAC,mBACc,GAAG,mBACH,GAAG,mBACH,KAAK,sBACF,WAAW,mBACd,QAAQ,IAAI,SAAS,mBACrB,QAAQ,IAAI,SAAS,EACpC,EAAE,EAAE,EAAE,gBACM,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,EAAE,sBACX,GAAG,EAAE,OAAO,mBACf,GAAG,EAAE,QAAQ,GAC5B,CACG;YACN,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,CAChC,oBAAC,WAAW,IACV,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,QAAQ,GACjB,CACH,CACI;QACN,SAAS,IAAI,CAAC,OAAO,IAAI,CACxB,oBAAC,WAAW,IACV,EAAE,EAAE,GAAG,EAAE,QAAQ,EACjB,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EACvB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,EACjE,IAAI,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC,MAAM,EAC3B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,gBACN,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,EAAE,GAC7B,CACH;QACA,OAAO,IAAI,oBAAC,IAAI,IAAC,EAAE,EAAE,GAAG,EAAE,QAAQ,IAAG,KAAK,CAAQ,CAC9C,CACR,CAAC;IAEF,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,oBAAC,SAAS,OAAK,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,IACxE,IAAI,CACK,CACb,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import React, {\n KeyboardEvent,\n FunctionComponent,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useRef,\n useState,\n CSSProperties,\n forwardRef,\n Ref,\n TouchEvent as ReactTouchEvent\n} from 'react';\n\nimport { NumberInput } from '../Number';\nimport { useConsolidatedRef, useTheme, useUID } from '../../hooks';\nimport FormField from '../FormField';\nimport Text from '../Text';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport { ForwardProps } from '../../types';\n\nimport SliderProps from './Slider.types';\nimport {\n StyledSlider,\n StyledTrack,\n StyledThumb,\n StyledSliderTrackWrapper,\n StyledBar\n} from './Slider.styles';\nimport { getNearestValue } from './utils';\nimport SliderTicks from './SliderTicks';\n\nconst Slider: FunctionComponent<SliderProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<SliderProps>, ref: Ref<HTMLDivElement>) => {\n const {\n id = useUID(),\n required,\n status,\n info,\n label,\n labelHidden,\n min = 0,\n max = 100,\n step = 1,\n value = min,\n orientation = 'horizontal',\n preview,\n disabled = false,\n readOnly = false,\n showInput = true,\n showProgress,\n ticks = {},\n onChange,\n autoFocus,\n ...restProps\n } = props;\n\n const thumbRef = useConsolidatedRef<HTMLDivElement>(ref);\n const trackRef = useRef<HTMLDivElement>(null);\n const [inDrag, setInDrag] = useState<boolean>(false);\n const [inputValue, setInputValue] = useState<string>(value.toString());\n\n const setValue = (newValue: number) => {\n if (disabled \|\| readOnly) return;\n const normalizedValue = Math.min(Math.max(newValue, min), max);\n\n setInputValue(normalizedValue.toString());\n onChange(normalizedValue);\n };\n\n const moveThumb = useCallback(\n (e: MouseEvent \| TouchEvent) => {\n if (disabled \|\| readOnly) return;\n if (trackRef.current) {\n const track = trackRef.current.getBoundingClientRect();\n const { clientX, clientY } = 'touches' in e ? e.touches[0] : e;\n const newPosition =\n orientation === 'horizontal'\n ? (clientX - track.left) / (track.right - track.left)\n : (clientY - track.bottom) / (track.top - track.bottom);\n\n const normalizedValue = Math.min(Math.max(min + (max - min) * newPosition, min), max);\n setValue(getNearestValue(normalizedValue, min, max, step));\n }\n thumbRef.current?.focus();\n },\n [disabled, readOnly, step, min, max]\n );\n\n const rtl = useTheme().base.rtl;\n\n const onThumbKeyDown = useCallback(\n (e: KeyboardEvent<HTMLElement>) => {\n if (\n [\n 'ArrowDown',\n 'ArrowUp',\n 'ArrowLeft',\n 'ArrowRight',\n 'PageUp',\n 'PageDown',\n 'Home',\n 'End'\n ].includes(e.key)\n )\n e.preventDefault();\n\n switch (e.key) {\n case 'ArrowDown':\n case `Arrow${rtl ? 'Right' : 'Left'}`:\n setValue(value - step);\n break;\n case 'ArrowUp':\n case `Arrow${rtl ? 'Left' : 'Right'}`:\n setValue(value + step);\n break;\n case 'PageUp':\n setValue(value + 10 * step);\n break;\n case 'PageDown':\n setValue(value - 10 * step);\n break;\n case 'Home':\n setValue(min);\n break;\n case 'End':\n setValue(max);\n break;\n default:\n }\n },\n [value, step]\n );\n\n useEffect(() => {\n const onDragEnd = () => setInDrag(false);\n document.addEventListener('mouseup', onDragEnd);\n document.addEventListener('touchend', onDragEnd);\n document.addEventListener('touchcancel', onDragEnd);\n if (inDrag) {\n document.addEventListener('mousemove', moveThumb);\n document.addEventListener('touchmove', moveThumb);\n }\n return () => {\n document.removeEventListener('mouseup', onDragEnd);\n document.removeEventListener('touchend', onDragEnd);\n document.removeEventListener('touchcancel', onDragEnd);\n document.removeEventListener('mousemove', moveThumb);\n document.removeEventListener('touchmove', moveThumb);\n };\n }, [inDrag, moveThumb]);\n\n useEffect(() => {\n if (autoFocus) thumbRef.current?.focus();\n }, [autoFocus]);\n\n const percentage = ((Number(value) - min) / (max - min)) * 100;\n\n const Comp = (\n <Flex\n {...restProps}\n as={StyledSlider}\n container={{\n alignItems: 'start',\n direction: orientation === 'horizontal' ? 'row' : 'column'\n }}\n orientation={orientation}\n {...{ status, disabled, readOnly }}\n style={\n {\n '--slider-value': `${percentage}%`,\n userSelect: inDrag ? 'none' : 'auto'\n } as CSSProperties\n }\n >\n <Grid as={StyledSliderTrackWrapper} container>\n <Flex\n as={StyledTrack}\n ref={trackRef}\n onMouseDown={moveThumb}\n container={{ alignItems: 'center', justify: 'center' }}\n >\n <StyledBar showProgress={showProgress} />\n <StyledThumb\n ref={thumbRef}\n role='slider'\n tabIndex={0}\n onKeyDown={onThumbKeyDown}\n onMouseDown={() => setInDrag(true)}\n onTouchStart={(e: ReactTouchEvent<HTMLDivElement>) => {\n setInDrag(true);\n e.preventDefault(); // Prevent dispatching mouse events as some browser may do that\n }}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n aria-orientation={orientation}\n aria-readonly={readOnly \|\| undefined}\n aria-disabled={disabled \|\| undefined}\n id={id}\n aria-label={label?.toString()}\n aria-describedby={`${id}-info`}\n aria-controls={`${id}-value`}\n />\n </Flex>\n {Object.keys(ticks).length > 0 && (\n <SliderTicks\n ticks={ticks}\n min={min}\n max={max}\n orientation={orientation}\n onClick={setValue}\n />\n )}\n </Grid>\n {showInput && !preview && (\n <NumberInput\n id={`${id}-value`}\n status={status}\n min={min}\n max={max}\n step={step}\n value={inputValue}\n onChange={setInputValue}\n onBlur={v => setValue(getNearestValue(Number(v), min, max, step))}\n size={max.toString().length}\n readOnly={readOnly}\n disabled={disabled}\n aria-label={label?.toString()}\n />\n )}\n {preview && <Text id={`${id}-value`}>{value}</Text>}\n </Flex>\n );\n\n return label ? (\n <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default Slider;\n"]}
1	+ {"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n KeyboardEvent,\n FunctionComponent,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useRef,\n useState,\n CSSProperties,\n forwardRef,\n Ref,\n TouchEvent as ReactTouchEvent\n} from 'react';\n\nimport { NumberInput } from '../Number';\nimport { useConsolidatedRef, useDirection, useUID } from '../../hooks';\nimport FormField from '../FormField';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport { ForwardProps } from '../../types';\nimport { cap } from '../../utils';\n\nimport SliderProps from './Slider.types';\nimport {\n StyledSlider,\n StyledTrack,\n StyledThumb,\n StyledSliderTrackWrapper,\n StyledBar,\n StyledPreview\n} from './Slider.styles';\nimport { calculateValueLength, getNearestValue } from './utils';\nimport SliderTicks from './SliderTicks';\n\nconst Slider: FunctionComponent<SliderProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<SliderProps>, ref: Ref<HTMLDivElement>) => {\n const uid = useUID();\n const {\n id = uid,\n required,\n status,\n info,\n label,\n labelHidden,\n min = 0,\n max = 100,\n step = 1,\n value = min,\n orientation = 'horizontal',\n preview,\n disabled = false,\n readOnly = false,\n showInput = true,\n showProgress,\n ticks = {},\n onChange,\n autoFocus,\n onDragStart,\n onDragEnd: onDragEndProp,\n ...restProps\n } = props;\n\n const thumbRef = useConsolidatedRef<HTMLDivElement>(ref);\n const trackRef = useRef<HTMLDivElement>(null);\n const [inDrag, setInDrag] = useState(false);\n const [inputValue, setInputValue] = useState(value.toString());\n\n const setValue = useCallback(\n (newValue: number) => {\n if (disabled \|\| readOnly) return;\n const normalizedValue = Math.min(Math.max(newValue, min), max);\n\n setInputValue(normalizedValue.toString());\n onChange(normalizedValue);\n },\n [disabled, readOnly, onChange]\n );\n\n const { start, end } = useDirection();\n\n const moveThumb = useCallback(\n (e: MouseEvent \| TouchEvent) => {\n if (disabled \|\| readOnly) return;\n if (trackRef.current) {\n const track = trackRef.current.getBoundingClientRect();\n const { clientX, clientY } = 'touches' in e ? e.touches[0] : e;\n const newPosition =\n orientation === 'horizontal'\n ? (clientX - track[start]) / (track[end] - track[start])\n : (clientY - track.bottom) / (track.top - track.bottom);\n\n const normalizedValue = Math.min(Math.max(min + (max - min) * newPosition, min), max);\n setValue(getNearestValue(normalizedValue, min, max, step));\n }\n thumbRef.current?.focus();\n },\n [disabled, readOnly, step, min, max, setValue, start, end]\n );\n\n const onThumbKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n if (\n [\n 'ArrowDown',\n 'ArrowUp',\n 'ArrowLeft',\n 'ArrowRight',\n 'PageUp',\n 'PageDown',\n 'Home',\n 'End'\n ].includes(e.key)\n )\n e.preventDefault();\n\n switch (e.key) {\n case 'ArrowDown':\n case `Arrow${cap(start)}`:\n setValue(value - step);\n break;\n case 'ArrowUp':\n case `Arrow${cap(end)}`:\n setValue(value + step);\n break;\n case 'PageUp':\n setValue(value + 10 * step);\n break;\n case 'PageDown':\n setValue(value - 10 * step);\n break;\n case 'Home':\n setValue(min);\n break;\n case 'End':\n setValue(max);\n break;\n default:\n }\n },\n [setValue, value, step, start, end]\n );\n\n useEffect(() => {\n const onDragEnd = () => {\n setInDrag(false);\n if (inDrag) onDragEndProp?.();\n };\n\n document.addEventListener('mouseup', onDragEnd);\n document.addEventListener('touchend', onDragEnd);\n document.addEventListener('touchcancel', onDragEnd);\n if (inDrag) {\n document.addEventListener('mousemove', moveThumb);\n document.addEventListener('touchmove', moveThumb);\n }\n\n return () => {\n document.removeEventListener('mouseup', onDragEnd);\n document.removeEventListener('touchend', onDragEnd);\n document.removeEventListener('touchcancel', onDragEnd);\n document.removeEventListener('mousemove', moveThumb);\n document.removeEventListener('touchmove', moveThumb);\n };\n }, [inDrag, moveThumb, onDragEndProp]);\n\n useEffect(() => {\n if (autoFocus) thumbRef.current?.focus();\n }, [autoFocus]);\n\n const percentage = ((Number(value) - min) / (max - min)) * 100;\n\n const Comp = (\n <Flex\n {...restProps}\n as={StyledSlider}\n container={{\n alignItems: 'start',\n direction: orientation === 'horizontal' ? 'row' : 'column'\n }}\n orientation={orientation}\n {...{ status, disabled, readOnly }}\n style={\n {\n '--slider-value': `${percentage}%`,\n userSelect: inDrag ? 'none' : 'auto'\n } as CSSProperties\n }\n >\n <Grid as={StyledSliderTrackWrapper} container>\n <Flex\n as={StyledTrack}\n ref={trackRef}\n onMouseDown={moveThumb}\n container={{ alignItems: 'center', justify: 'center' }}\n >\n <StyledBar showProgress={showProgress} />\n <StyledThumb\n ref={thumbRef}\n role='slider'\n tabIndex={0}\n onKeyDown={onThumbKeyDown}\n onMouseDown={() => {\n setInDrag(true);\n onDragStart?.();\n }}\n onTouchStart={(e: ReactTouchEvent<HTMLDivElement>) => {\n setInDrag(true);\n e.preventDefault(); // Prevent dispatching mouse events as some browser may do that\n onDragStart?.();\n }}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n aria-orientation={orientation}\n aria-readonly={readOnly \|\| undefined}\n aria-disabled={disabled \|\| undefined}\n id={id}\n aria-label={label?.toString()}\n aria-describedby={`${id}-info`}\n aria-controls={`${id}-value`}\n />\n </Flex>\n {Object.keys(ticks).length > 0 && (\n <SliderTicks\n ticks={ticks}\n min={min}\n max={max}\n step={step}\n orientation={orientation}\n onClick={setValue}\n />\n )}\n </Grid>\n {showInput && !preview && (\n <NumberInput\n id={`${id}-value`}\n status={status}\n min={min}\n max={max}\n step={step}\n value={inputValue}\n onChange={setInputValue}\n onBlur={v => setValue(getNearestValue(Number(v), min, max, step))}\n size={calculateValueLength(min, max, step)}\n readOnly={readOnly}\n disabled={disabled}\n aria-label={label?.toString()}\n />\n )}\n {preview && (\n <StyledPreview\n id={`${id}-value`}\n value={value.toString()}\n size={calculateValueLength(min, max, step)}\n />\n )}\n </Flex>\n );\n\n return label ? (\n <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default Slider;\n"]}

package/lib/components/Slider/Slider.styles.d.ts CHANGED Viewed

@@ -9,11 +9,14 @@ export declare const StyledBar: import("styled-components").StyledComponent<"div
 export declare const StyledTrack: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTicksContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledSliderTrackWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPreview: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Number").NumberDisplayProps & import("../../types").ForwardProps>, import("styled-components").DefaultTheme, {
+    size: number;
+}, never>;
 export declare const StyledSlider: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     orientation: 'vertical' | 'horizontal';
     status: FormControlProps['status'];
 }, never>;
-export declare const StyledTickItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Omit<import("../Grid").GridProps, never> & Required<Pick<import("../Grid").GridProps, never>> & {
+export declare const StyledTickItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../types").OmitStrict<import("../Grid").GridProps, never> & Required<Pick<import("../Grid").GridProps, never>> & {
     lowerBoundaryItem?: boolean | undefined;
     upperBoundaryItem?: boolean | undefined;
     orientation: 'horizontal' | 'vertical';

package/lib/components/Slider/Slider.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.styles.ts"],"names":[],"mappings":"~~AAIA~~,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKlD,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC,oBAAY,uBAAuB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAErE,eAAO,MAAM,WAAW,yGAoCvB,CAAC;AAIF,eAAO,MAAM,SAAS;;~~SA+BpB~~,CAAC;AAIH,eAAO,MAAM,WAAW,~~yGAcvB~~,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAUhC,CAAC;AAIF,eAAO,MAAM,wBAAwB,yGAEpC,CAAC;AAIF,eAAO,MAAM,YAAY;iBACV,UAAU,GAAG,YAAY;YAC9B,gBAAgB,CAAC,QAAQ,CAAC;~~SAgIlC~~,CAAC;AAIH,eAAO,MAAM,cAAc;;;iBAGZ,YAAY,GAAG,UAAU;~~SAsDtC~~,CAAC;AAIH,eAAO,MAAM,gBAAgB,0GAO5B,CAAC"}
1	+ {"version":3,"file":"Slider.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKlD,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC,oBAAY,uBAAuB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAErE,eAAO,MAAM,WAAW,yGAoCvB,CAAC;AAIF,eAAO,MAAM,SAAS;;SAuCpB,CAAC;AAIH,eAAO,MAAM,WAAW,yGA6BvB,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAUhC,CAAC;AAIF,eAAO,MAAM,wBAAwB,yGAEpC,CAAC;AAIF,eAAO,MAAM,aAAa;UAAiC,MAAM;SAGhE,CAAC;AAIF,eAAO,MAAM,YAAY;iBACV,UAAU,GAAG,YAAY;YAC9B,gBAAgB,CAAC,QAAQ,CAAC;SAuIlC,CAAC;AAIH,eAAO,MAAM,cAAc;;;iBAGZ,YAAY,GAAG,UAAU;SA8DtC,CAAC;AAIH,eAAO,MAAM,gBAAgB,0GAO5B,CAAC"}

package/lib/components/Slider/Slider.styles.js CHANGED Viewed

@@ -1,10 +1,11 @@
 import { mix } from 'polished';
 import styled, { css } from 'styled-components';
+import { useDirection } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
 import { tryCatch } from '../../utils';
 import { StyledGrid } from '../Grid';
+import { NumberDisplay } from '../Number';
 import StyledNumberInput from '../Number/NumberInput.styles';
-import { StyledText } from '../Text';
 export const StyledThumb = styled.div(({ theme: { base: { palette: { 'primary-background': bgColor, 'border-line': borderColor }, spacing, 'border-radius': borderRadius }, components: { progress: { 'progress-color': fgColor }, button } } }) => {
     const hoverBgColor = tryCatch(() => mix(0.2, fgColor, bgColor));
     return css `
@@ -30,13 +31,14 @@ export const StyledThumb = styled.div(({ theme: { base: { palette: { 'primary-ba
 StyledThumb.defaultProps = defaultThemeProp;
 export const StyledBar = styled.div(({ theme, showProgress }) => {
     const { base: { spacing, colors, 'border-radius': borderRadius }, components: { progress: { 'progress-color': progressColor } } } = theme;
+    const { ltr } = useDirection();
     return css `
     border-radius: ${borderRadius};
     height: ${spacing};
     width: 100%;
     overflow: hidden;
     position: relative;
-    background-color: ${colors.gray.medium};
+    background-color: ${colors.gray.light};
     ${showProgress &&
         css `
@@ -49,27 +51,42 @@ export const StyledBar = styled.div(({ theme, showProgress }) => {
         width: 100%;
         height: 100%;
         background-color: ${progressColor};
-        transform: translateX(calc(-100% + var(--slider-value, 0)));
+        ${ltr
+            ? css `
+              transform: translateX(calc(-100% + var(--slider-value, 0)));
+            `
+            : css `
+              transform: translateX(calc(100% - var(--slider-value, 0)));
+            `}
       }
     `}
   `;
 });
 StyledBar.defaultProps = defaultThemeProp;
-export const StyledTrack = styled.div `
-  height: calc(${p => p.theme.base.spacing} * 4);
-  width: 100%;
-  cursor: pointer;
-  position: relative;
+export const StyledTrack = styled.div(({ theme: { base: { spacing } } }) => {
+    const { ltr } = useDirection();
+    return css `
+      height: calc(${spacing} * 4);
+      width: 100%;
+      cursor: pointer;
+      position: relative;
-  > ${StyledThumb} {
-    z-index: 1;
-    position: absolute;
-    top: calc(${p => p.theme.base.spacing} / 2);
-    left: var(--slider-value);
-    right: var(--slider-value);
-    transform: translate(-50%, 0);
-  }
-`;
+      > ${StyledThumb} {
+        z-index: 1;
+        position: absolute;
+        top: calc(${spacing} / 2);
+        left: var(--slider-value);
+        right: var(--slider-value);
+        ${ltr
+        ? css `
+              transform: translate(-50%, 0);
+            `
+        : css `
+              transform: translate(50%, 0);
+            `}
+      }
+    `;
+});
 StyledTrack.defaultProps = defaultThemeProp;
 export const StyledTicksContainer = styled.div `
   width: 100%;
@@ -87,13 +104,18 @@ export const StyledSliderTrackWrapper = styled.div `
   width: 100%;
 `;
 StyledSliderTrackWrapper.defaultProps = defaultThemeProp;
+export const StyledPreview = styled(NumberDisplay) `
+  width: ${props => props.size}ch;
+  flex-shrink: 0;
+`;
+StyledPreview.defaultProps = defaultThemeProp;
 export const StyledSlider = styled.div(props => {
     const { theme: { base: { spacing, palette }, components: { 'form-field': formField } }, status, orientation } = props;
     const statusColor = status && formField[status] ? formField[status]['status-color'] : 'transparent';
     const thumbBgColor = tryCatch(() => mix(0.2, statusColor, palette['primary-background']));
     const borderColor = status && formField[status] ? formField[status]['status-color'] : palette['border-line'];
     return css `
-    ${StyledText} {
+    > span {
       line-height: calc(${spacing} * 4);
     }
@@ -115,16 +137,23 @@ export const StyledSlider = styled.div(props => {
     ${orientation === 'horizontal' &&
         css `
       ${StyledSliderTrackWrapper} {
+        margin-inline: calc(1.5 * ${spacing});
         ${StyledTrack},
         ${StyledThumb} {
           grid-row: 1;
         }
+        ${StyledBar} {
+          /* extend by thumb width */
+          min-width: calc(100% + ${spacing} * 3);
+        }
         ${StyledTicksContainer} {
           grid-row: 2;
         }
-        & + ${StyledNumberInput}, & + ${StyledText} {
+        & + ${StyledNumberInput}, & + ${StyledPreview} {
           margin-inline-start: calc(2 * ${spacing});
         }
       }
@@ -169,7 +198,7 @@ export const StyledSlider = styled.div(props => {
           height: 100%;
         }
-        & + ${StyledNumberInput}, & + ${StyledText} {
+        & + ${StyledNumberInput}, & + ${StyledPreview} {
           margin-top: calc(2 * ${spacing});
           width: calc(${spacing} * 4);
           text-align: center;
@@ -206,6 +235,7 @@ export const StyledSlider = styled.div(props => {
 StyledSlider.defaultProps = defaultThemeProp;
 export const StyledTickItem = styled(StyledGrid)(({ lowerBoundaryItem, upperBoundaryItem, orientation, theme }) => {
     const spacing = theme.base.spacing;
+    const { ltr } = useDirection();
     return css `
     /* disabling 'duplicate selectors' rule to keep the css rules grouped by orientation prop */
@@ -249,7 +279,13 @@ export const StyledTickItem = styled(StyledGrid)(({ lowerBoundaryItem, upperBoun
       &::before {
         width: ${spacing};
         height: calc(${spacing} / 8);
-        transform: translateX(-50%);
+        ${ltr
+            ? css `
+              transform: translateX(-50%);
+            `
+            : css `
+              transform: translateX(50%);
+            `}
       }
     `}

package/lib/components/Slider/Slider.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.styles.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mix } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { PropsWithDefaults } from '../../types';\nimport { tryCatch } from '../../utils';\nimport { FormControlProps } from '../FormControl';\nimport { StyledGrid } from '../Grid';\nimport StyledNumberInput from '../Number/NumberInput.styles';\nimport { StyledText } from '../Text';\n\nimport SliderProps from './Slider.types';\n\nexport type SliderPropsWithDefaults = PropsWithDefaults<SliderProps>;\n\nexport const StyledThumb = styled.div(\n ({\n theme: {\n base: {\n palette: { 'primary-background': bgColor, 'border-line': borderColor },\n spacing,\n 'border-radius': borderRadius\n },\n components: {\n progress: { 'progress-color': fgColor },\n button\n }\n }\n }) => {\n const hoverBgColor = tryCatch(() => mix(0.2, fgColor, bgColor));\n\n return css`\n border: ${button['border-width']} solid ${borderColor};\n border-radius: calc(${borderRadius} * 3);\n outline: none;\n background-color: ${bgColor};\n width: calc(${spacing} * 3);\n height: calc(${spacing} * 3);\n cursor: pointer;\n\n &:focus {\n box-shadow: ${button['focus-shadow']};\n }\n\n &:hover,\n &:active {\n background-color: ${hoverBgColor};\n border-color: ${fgColor};\n }\n `;\n }\n);\n\nStyledThumb.defaultProps = defaultThemeProp;\n\nexport const StyledBar = styled.div<{ showProgress?: boolean }>(({ theme, showProgress }) => {\n const {\n base: { spacing, colors, 'border-radius': borderRadius },\n components: {\n progress: { 'progress-color': progressColor }\n }\n } = theme;\n\n return css`\n border-radius: ${borderRadius};\n height: ${spacing};\n width: 100%;\n overflow: hidden;\n position: relative;\n background-color: ${colors.gray.medium};\n\n ${showProgress &&\n css`\n ::before {\n position: absolute;\n left: 0;\n top: 0;\n content: '';\n display: block;\n width: 100%;\n height: 100%;\n background-color: ${progressColor};\n transform: translateX(calc(-100% + var(--slider-value, 0)));\n }\n `}\n `;\n});\n\nStyledBar.defaultProps = defaultThemeProp;\n\nexport const StyledTrack = styled.div`\n height: calc(${p => p.theme.base.spacing} * 4);\n width: 100%;\n cursor: pointer;\n position: relative;\n\n > ${StyledThumb} {\n z-index: 1;\n position: absolute;\n top: calc(${p => p.theme.base.spacing} / 2);\n left: var(--slider-value);\n right: var(--slider-value);\n transform: translate(-50%, 0);\n }\n`;\n\nStyledTrack.defaultProps = defaultThemeProp;\n\nexport const StyledTicksContainer = styled.div`\n width: 100%;\n\n div {\n &::before {\n content: '';\n display: table;\n background: ${p => p.theme.base.palette['foreground-color']};\n }\n }\n`;\n\nStyledTicksContainer.defaultProps = defaultThemeProp;\n\nexport const StyledSliderTrackWrapper = styled.div`\n width: 100%;\n`;\n\nStyledSliderTrackWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledSlider = styled.div<{\n orientation: 'vertical' \| 'horizontal';\n status: FormControlProps['status'];\n}>(props => {\n const {\n theme: {\n base: { spacing, palette },\n components: { 'form-field': formField }\n },\n status,\n orientation\n } = props;\n\n const statusColor =\n status && formField[status] ? formField[status]['status-color'] : 'transparent';\n const thumbBgColor = tryCatch(() => mix(0.2, statusColor, palette['primary-background']));\n\n const borderColor =\n status && formField[status] ? formField[status]['status-color'] : palette['border-line'];\n\n return css`\n ${StyledText} {\n line-height: calc(${spacing} * 4);\n }\n\n ${status &&\n css`\n ${StyledBar}::before {\n background-color: ${statusColor};\n }\n\n ${StyledThumb} {\n border-color: ${borderColor};\n :hover,\n :active {\n background-color: ${thumbBgColor};\n }\n }\n `}\n\n ${orientation === 'horizontal' &&\n css`\n ${StyledSliderTrackWrapper} {\n ${StyledTrack},\n ${StyledThumb} {\n grid-row: 1;\n }\n\n ${StyledTicksContainer} {\n grid-row: 2;\n }\n\n & + ${StyledNumberInput}, & + ${StyledText} {\n margin-inline-start: calc(2 * ${spacing});\n }\n }\n `}\n\n /* disabling 'duplicate selectors' rule to keep the css rules grouped by orientation prop /\n\n / stylelint-disable no-duplicate-selectors /\n ${orientation === 'vertical' &&\n css`\n ${StyledSliderTrackWrapper} {\n grid-template-columns: calc(${spacing} 4) minmax(0, 1fr);\n grid-template-rows: 0.5em [track-start] minmax(calc(${spacing} * 20), max-content) [track-end] 0.5em;\n margin-top: ${spacing};\n\n ${StyledTrack} {\n grid-row: track-start / track-end;\n height: 100%;\n transform: scale(-1);\n\n ${StyledBar} {\n height: 100%;\n width: ${spacing};\n\n ::before {\n transform: translateY(calc(-100% + var(--slider-value, 0)));\n }\n }\n }\n\n ${StyledThumb} {\n grid-row: track-start / track-end;\n top: auto;\n bottom: calc(100% - var(--slider-value));\n left: calc(${spacing} / 2);\n right: calc(${spacing} / 2);\n transform: translate(0, 50%);\n }\n\n ${StyledTicksContainer} {\n grid-row: 1 / -1;\n height: 100%;\n }\n\n & + ${StyledNumberInput}, & + ${StyledText} {\n margin-top: calc(2 * ${spacing});\n width: calc(${spacing} * 4);\n text-align: center;\n\n /* fix NumberInput double padding issue /\n &,\n & > input {\n padding: 0;\n }\n }\n }\n `}\n\n / stylelint-enable no-duplicate-selectors /\n\n\n &[disabled],\n &[readonly] {\n ${StyledTrack} {\n cursor: default;\n }\n\n ${StyledThumb} {\n cursor: default;\n border-color: ${palette['border-line']};\n :hover,\n :active {\n background-color: ${palette['background-color']};\n }\n }\n }\n `;\n});\n\nStyledSlider.defaultProps = defaultThemeProp;\n\nexport const StyledTickItem = styled(StyledGrid)<{\n lowerBoundaryItem?: boolean;\n upperBoundaryItem?: boolean;\n orientation: 'horizontal' \| 'vertical';\n}>(({ lowerBoundaryItem, upperBoundaryItem, orientation, theme }) => {\n const spacing = theme.base.spacing;\n\n return css`\n / disabling 'duplicate selectors' rule to keep the css rules grouped by orientation prop /\n\n / stylelint-disable no-duplicate-selectors /\n ${orientation === 'horizontal' &&\n css`\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n &::before {\n width: 0.0625rem;\n height: ${spacing};\n transform: translateY(-50%);\n margin: 0 auto;\n }\n\n ${lowerBoundaryItem &&\n css`\n text-align: start;\n transform: translate(-0.5ch, 0);\n &::before {\n margin-inline-start: 0.5ch;\n }\n `}\n\n ${upperBoundaryItem &&\n css`\n text-align: end;\n transform: translate(0.5ch, 0);\n &::before {\n margin-inline-end: 0.5ch;\n }\n `}\n `}\n\n ${orientation === 'vertical' &&\n css`\n display: flex;\n align-items: center;\n\n &::before {\n width: ${spacing};\n height: calc(${spacing} / 8);\n transform: translateX(-50%);\n }\n `}\n\n / stylelint-enable no-duplicate-selectors */\n overflow: hidden;\n `;\n});\n\nStyledTickItem.defaultProps = defaultThemeProp;\n\nexport const StyledTickButton = styled.span`\n cursor: pointer;\n line-height: 1em;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n outline: 0;\n`;\n\nStyledTickButton.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"Slider.styles.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mix } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { useDirection } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { PropsWithDefaults } from '../../types';\nimport { tryCatch } from '../../utils';\nimport { FormControlProps } from '../FormControl';\nimport { StyledGrid } from '../Grid';\nimport { NumberDisplay } from '../Number';\nimport StyledNumberInput from '../Number/NumberInput.styles';\n\nimport SliderProps from './Slider.types';\n\nexport type SliderPropsWithDefaults = PropsWithDefaults<SliderProps>;\n\nexport const StyledThumb = styled.div(\n ({\n theme: {\n base: {\n palette: { 'primary-background': bgColor, 'border-line': borderColor },\n spacing,\n 'border-radius': borderRadius\n },\n components: {\n progress: { 'progress-color': fgColor },\n button\n }\n }\n }) => {\n const hoverBgColor = tryCatch(() => mix(0.2, fgColor, bgColor));\n\n return css`\n border: ${button['border-width']} solid ${borderColor};\n border-radius: calc(${borderRadius} * 3);\n outline: none;\n background-color: ${bgColor};\n width: calc(${spacing} * 3);\n height: calc(${spacing} * 3);\n cursor: pointer;\n\n &:focus {\n box-shadow: ${button['focus-shadow']};\n }\n\n &:hover,\n &:active {\n background-color: ${hoverBgColor};\n border-color: ${fgColor};\n }\n `;\n }\n);\n\nStyledThumb.defaultProps = defaultThemeProp;\n\nexport const StyledBar = styled.div<{ showProgress?: boolean }>(({ theme, showProgress }) => {\n const {\n base: { spacing, colors, 'border-radius': borderRadius },\n components: {\n progress: { 'progress-color': progressColor }\n }\n } = theme;\n\n const { ltr } = useDirection();\n\n return css`\n border-radius: ${borderRadius};\n height: ${spacing};\n width: 100%;\n overflow: hidden;\n position: relative;\n background-color: ${colors.gray.light};\n\n ${showProgress &&\n css`\n ::before {\n position: absolute;\n left: 0;\n top: 0;\n content: '';\n display: block;\n width: 100%;\n height: 100%;\n background-color: ${progressColor};\n ${ltr\n ? css`\n transform: translateX(calc(-100% + var(--slider-value, 0)));\n `\n : css`\n transform: translateX(calc(100% - var(--slider-value, 0)));\n `}\n }\n `}\n `;\n});\n\nStyledBar.defaultProps = defaultThemeProp;\n\nexport const StyledTrack = styled.div(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n const { ltr } = useDirection();\n return css`\n height: calc(${spacing} * 4);\n width: 100%;\n cursor: pointer;\n position: relative;\n\n > ${StyledThumb} {\n z-index: 1;\n position: absolute;\n top: calc(${spacing} / 2);\n left: var(--slider-value);\n right: var(--slider-value);\n ${ltr\n ? css`\n transform: translate(-50%, 0);\n `\n : css`\n transform: translate(50%, 0);\n `}\n }\n `;\n }\n);\n\nStyledTrack.defaultProps = defaultThemeProp;\n\nexport const StyledTicksContainer = styled.div`\n width: 100%;\n\n div {\n &::before {\n content: '';\n display: table;\n background: ${p => p.theme.base.palette['foreground-color']};\n }\n }\n`;\n\nStyledTicksContainer.defaultProps = defaultThemeProp;\n\nexport const StyledSliderTrackWrapper = styled.div`\n width: 100%;\n`;\n\nStyledSliderTrackWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledPreview = styled(NumberDisplay)<{ size: number }>`\n width: ${props => props.size}ch;\n flex-shrink: 0;\n`;\n\nStyledPreview.defaultProps = defaultThemeProp;\n\nexport const StyledSlider = styled.div<{\n orientation: 'vertical' \| 'horizontal';\n status: FormControlProps['status'];\n}>(props => {\n const {\n theme: {\n base: { spacing, palette },\n components: { 'form-field': formField }\n },\n status,\n orientation\n } = props;\n\n const statusColor =\n status && formField[status] ? formField[status]['status-color'] : 'transparent';\n const thumbBgColor = tryCatch(() => mix(0.2, statusColor, palette['primary-background']));\n\n const borderColor =\n status && formField[status] ? formField[status]['status-color'] : palette['border-line'];\n\n return css`\n > span {\n line-height: calc(${spacing} * 4);\n }\n\n ${status &&\n css`\n ${StyledBar}::before {\n background-color: ${statusColor};\n }\n\n ${StyledThumb} {\n border-color: ${borderColor};\n :hover,\n :active {\n background-color: ${thumbBgColor};\n }\n }\n `}\n\n ${orientation === 'horizontal' &&\n css`\n ${StyledSliderTrackWrapper} {\n margin-inline: calc(1.5 * ${spacing});\n\n ${StyledTrack},\n ${StyledThumb} {\n grid-row: 1;\n }\n\n ${StyledBar} {\n /* extend by thumb width /\n min-width: calc(100% + ${spacing} 3);\n }\n\n ${StyledTicksContainer} {\n grid-row: 2;\n }\n\n & + ${StyledNumberInput}, & + ${StyledPreview} {\n margin-inline-start: calc(2 * ${spacing});\n }\n }\n `}\n\n /* disabling 'duplicate selectors' rule to keep the css rules grouped by orientation prop /\n\n / stylelint-disable no-duplicate-selectors /\n ${orientation === 'vertical' &&\n css`\n ${StyledSliderTrackWrapper} {\n grid-template-columns: calc(${spacing} 4) minmax(0, 1fr);\n grid-template-rows: 0.5em [track-start] minmax(calc(${spacing} * 20), max-content) [track-end] 0.5em;\n margin-top: ${spacing};\n\n ${StyledTrack} {\n grid-row: track-start / track-end;\n height: 100%;\n transform: scale(-1);\n\n ${StyledBar} {\n height: 100%;\n width: ${spacing};\n\n ::before {\n transform: translateY(calc(-100% + var(--slider-value, 0)));\n }\n }\n }\n\n ${StyledThumb} {\n grid-row: track-start / track-end;\n top: auto;\n bottom: calc(100% - var(--slider-value));\n left: calc(${spacing} / 2);\n right: calc(${spacing} / 2);\n transform: translate(0, 50%);\n }\n\n ${StyledTicksContainer} {\n grid-row: 1 / -1;\n height: 100%;\n }\n\n & + ${StyledNumberInput}, & + ${StyledPreview} {\n margin-top: calc(2 * ${spacing});\n width: calc(${spacing} * 4);\n text-align: center;\n\n /* fix NumberInput double padding issue /\n &,\n & > input {\n padding: 0;\n }\n }\n }\n `}\n\n / stylelint-enable no-duplicate-selectors /\n\n\n &[disabled],\n &[readonly] {\n ${StyledTrack} {\n cursor: default;\n }\n\n ${StyledThumb} {\n cursor: default;\n border-color: ${palette['border-line']};\n :hover,\n :active {\n background-color: ${palette['background-color']};\n }\n }\n }\n `;\n});\n\nStyledSlider.defaultProps = defaultThemeProp;\n\nexport const StyledTickItem = styled(StyledGrid)<{\n lowerBoundaryItem?: boolean;\n upperBoundaryItem?: boolean;\n orientation: 'horizontal' \| 'vertical';\n}>(({ lowerBoundaryItem, upperBoundaryItem, orientation, theme }) => {\n const spacing = theme.base.spacing;\n\n const { ltr } = useDirection();\n\n return css`\n / disabling 'duplicate selectors' rule to keep the css rules grouped by orientation prop /\n\n / stylelint-disable no-duplicate-selectors /\n ${orientation === 'horizontal' &&\n css`\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n &::before {\n width: 0.0625rem;\n height: ${spacing};\n transform: translateY(-50%);\n margin: 0 auto;\n }\n\n ${lowerBoundaryItem &&\n css`\n text-align: start;\n transform: translate(-0.5ch, 0);\n &::before {\n margin-inline-start: 0.5ch;\n }\n `}\n\n ${upperBoundaryItem &&\n css`\n text-align: end;\n transform: translate(0.5ch, 0);\n &::before {\n margin-inline-end: 0.5ch;\n }\n `}\n `}\n\n ${orientation === 'vertical' &&\n css`\n display: flex;\n align-items: center;\n\n &::before {\n width: ${spacing};\n height: calc(${spacing} / 8);\n ${ltr\n ? css`\n transform: translateX(-50%);\n `\n : css`\n transform: translateX(50%);\n `}\n }\n `}\n\n / stylelint-enable no-duplicate-selectors */\n overflow: hidden;\n `;\n});\n\nStyledTickItem.defaultProps = defaultThemeProp;\n\nexport const StyledTickButton = styled.span`\n cursor: pointer;\n line-height: 1em;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n outline: 0;\n`;\n\nStyledTickButton.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Slider/Slider.types.d.ts CHANGED Viewed

@@ -46,7 +46,7 @@ export default interface SliderProps extends BaseProps {
     step?: number;
     /**
      * Slider orientation.
-     * @default horizontal
+     * @default 'horizontal'
      */
     orientation?: 'vertical' | 'horizontal';
     /**
@@ -66,7 +66,6 @@ export default interface SliderProps extends BaseProps {
     showInput?: boolean;
     /**
      * Display defined ticks.
-     * @default undefined
      */
     ticks?: {
         [key: number]: string;
@@ -76,6 +75,14 @@ export default interface SliderProps extends BaseProps {
      * @param value new input value
      */
     onChange: (value: number) => void;
+    /**
+     * Called when the user starts dragging the slider thumb.
+     */
+    onDragStart?: () => void;
+    /**
+     * Called when the user stops dragging the slider thumb.
+     */
+    onDragEnd?: () => void;
 }
 export interface TickDefinition {
     start: number;

package/lib/components/Slider/Slider.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.types.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,CAAC,OAAO,WAAW,WAAY,SAAQ,SAAS;IACpD;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB~~;;;OAGG~~;IACH,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAClC;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;~~CACnC~~;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf"}
1	+ {"version":3,"file":"Slider.types.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,CAAC,OAAO,WAAW,WAAY,SAAQ,SAAS;IACpD;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAClC;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf"}

package/lib/components/Slider/Slider.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.types.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.types.ts"],"names":[],"mappings":"","sourcesContent":["import { BaseProps } from '../../types';\nimport { FormControlProps } from '../FormControl';\n\nexport default interface SliderProps extends BaseProps {\n /*\n Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n /\n id?: FormControlProps['id'];\n /* Set visual state based on a validation state. /\n status?: FormControlProps['status'];\n /* Pass a string or a fragment with an Icon and string. /\n label?: FormControlProps['label'];\n /* Visually hides the label region. /\n labelHidden?: FormControlProps['labelHidden'];\n /* It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. /\n info?: FormControlProps['info'];\n /* Indicate if the field is required. The browser defaults to false. /\n required?: FormControlProps['required'];\n /\n Creates a controlled input and sets the value. Requires an onChange handler to update value.\n * value + onChange is the recommended method per React team.\n /\n value: number;\n /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Makes the input non editable and non clickable. The browser defaults to false. /\n readOnly?: FormControlProps['readOnly'];\n /* Sets html name attribute for the underlying control. Useful for mapping to a data field. /\n name?: FormControlProps['name'];\n /* Will automatically focus the thumb on render if true /\n autoFocus?: boolean;\n /\n Minimum value.\n * @default 0\n /\n min?: number;\n /\n Maximum value.\n * @default 100\n /\n max?: number;\n /\n Step value.\n * @default 1\n /\n step?: number;\n /\n Slider orientation.\n * @default horizontal\n /\n orientation?: 'vertical' \| 'horizontal';\n /\n Show slider color progress bar.\n * @default false\n /\n showProgress?: boolean;\n /\n Show current value.\n * @default false\n /\n preview?: boolean;\n /\n Display input to provide value.\n * @default true\n /\n showInput?: boolean;\n /\n Display defined ticks.\n * @default undefined\n /\n ticks?: { [key: number]: string };\n /\n On change callback.\n * @param value new input value\n */\n onChange: (value: number) => void;\n}\n\nexport interface TickDefinition {\n start: number;\n end: number;\n value: number;\n label: string;\n}\n"]}
1	+ {"version":3,"file":"Slider.types.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.types.ts"],"names":[],"mappings":"","sourcesContent":["import { BaseProps } from '../../types';\nimport { FormControlProps } from '../FormControl';\n\nexport default interface SliderProps extends BaseProps {\n /*\n Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n /\n id?: FormControlProps['id'];\n /* Set visual state based on a validation state. /\n status?: FormControlProps['status'];\n /* Pass a string or a fragment with an Icon and string. /\n label?: FormControlProps['label'];\n /* Visually hides the label region. /\n labelHidden?: FormControlProps['labelHidden'];\n /* It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. /\n info?: FormControlProps['info'];\n /* Indicate if the field is required. The browser defaults to false. /\n required?: FormControlProps['required'];\n /\n Creates a controlled input and sets the value. Requires an onChange handler to update value.\n * value + onChange is the recommended method per React team.\n /\n value: number;\n /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Makes the input non editable and non clickable. The browser defaults to false. /\n readOnly?: FormControlProps['readOnly'];\n /* Sets html name attribute for the underlying control. Useful for mapping to a data field. /\n name?: FormControlProps['name'];\n /* Will automatically focus the thumb on render if true /\n autoFocus?: boolean;\n /\n Minimum value.\n * @default 0\n /\n min?: number;\n /\n Maximum value.\n * @default 100\n /\n max?: number;\n /\n Step value.\n * @default 1\n /\n step?: number;\n /\n Slider orientation.\n * @default 'horizontal'\n /\n orientation?: 'vertical' \| 'horizontal';\n /\n Show slider color progress bar.\n * @default false\n /\n showProgress?: boolean;\n /\n Show current value.\n * @default false\n /\n preview?: boolean;\n /\n Display input to provide value.\n * @default true\n /\n showInput?: boolean;\n /\n Display defined ticks.\n /\n ticks?: { [key: number]: string };\n /\n On change callback.\n * @param value new input value\n /\n onChange: (value: number) => void;\n /\n Called when the user starts dragging the slider thumb.\n /\n onDragStart?: () => void;\n /\n Called when the user stops dragging the slider thumb.\n */\n onDragEnd?: () => void;\n}\n\nexport interface TickDefinition {\n start: number;\n end: number;\n value: number;\n label: string;\n}\n"]}

package/lib/components/Slider/SliderTicks.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ interface SliderTicksProps {
     ticks: NonNullable<SliderProps['ticks']>;
     min: number;
     max: number;
+    step: number;
     orientation: NonNullable<SliderProps['orientation']>;
     onClick: (value: number) => void;
 }

package/lib/components/Slider/SliderTicks.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderTicks.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/SliderTicks.tsx"],"names":[],"mappings":"AAAA,~~OAAc~~,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;~~AAK3C~~,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAGzC,UAAU,gBAAgB;IACxB,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;IACzC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC;IACrD,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,~~CAuDrC~~,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"SliderTicks.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/SliderTicks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAKpC,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAGzC,UAAU,gBAAgB;IACxB,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;IACzC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC;IACrD,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA2DrC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Slider/SliderTicks.js CHANGED Viewed

@@ -1,25 +1,32 @@
-import React, { useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import Grid from '../Grid';
 import { StyledTickButton, StyledTickItem, StyledTicksContainer } from './Slider.styles';
 import { calculateTicksRegions } from './utils';
-const SliderTicks = ({ ticks, min, max, orientation, onClick }) => {
-    const cellsCount = max - min + 1;
-    const ticksDefinitions = useMemo(() => calculateTicksRegions(ticks, min, max, orientation === 'horizontal'), [ticks, min, max, orientation]);
-    return (React.createElement(Grid, { container: orientation === 'horizontal'
-            ? {
-                cols: `minmax(0, 0.5fr) repeat(${cellsCount - 2}, minmax(0, 1fr)) minmax(0, 0.5fr)`
-            }
-            : { rows: `repeat(${cellsCount}, 1em)`, alignContent: 'between' }, as: StyledTicksContainer }, ticksDefinitions.map(tick => {
-        var _a;
-        return (React.createElement(StyledTickItem, { item: orientation === 'horizontal'
-                ? {
-                    colStartEnd: `${tick.start} / ${tick.end}`
-                }
-                : {
-                    rowStartEnd: `${-tick.start} / ${-tick.end}`
-                }, key: (_a = tick.label) !== null && _a !== void 0 ? _a : tick.value, orientation: orientation, lowerBoundaryItem: tick.value === min, upperBoundaryItem: tick.value === max },
-            React.createElement(StyledTickButton, { tabIndex: -1, role: 'button', "aria-hidden": true, onClick: () => onClick(tick.value) }, tick.label)));
-    })));
+const SliderTicks = ({ ticks, min, max, step, orientation, onClick }) => {
+    const cellsCount = (max - min) / step + 1;
+    const ticksDefinitions = useMemo(() => calculateTicksRegions(ticks, min, max, step, orientation === 'horizontal'), [ticks, min, max, orientation]);
+    let repeatCells;
+    let gridContainerConfig;
+    if (orientation === 'horizontal') {
+        repeatCells = cellsCount > 2 ? `repeat(${cellsCount - 2}, minmax(0, 1fr))` : '';
+        gridContainerConfig = {
+            cols: `minmax(0, 0.5fr) ${repeatCells} minmax(0, 0.5fr)`
+        };
+    }
+    else {
+        repeatCells = `repeat(${cellsCount}, 1em)`;
+        gridContainerConfig = { rows: repeatCells, alignContent: 'between' };
+    }
+    return (_jsx(Grid, { container: gridContainerConfig, as: StyledTicksContainer, children: ticksDefinitions.map(tick => {
+            return (_jsx(StyledTickItem, { item: orientation === 'horizontal'
+                    ? {
+                        colStartEnd: `${tick.start} / ${tick.end}`
+                    }
+                    : {
+                        rowStartEnd: `${-tick.start} / ${-tick.end}`
+                    }, orientation: orientation, lowerBoundaryItem: tick.value === min, upperBoundaryItem: tick.value === max, children: _jsx(StyledTickButton, { tabIndex: -1, role: 'button', "aria-hidden": true, onClick: () => onClick(tick.value), children: tick.label }, void 0) }, tick.label ?? tick.value));
+        }) }, void 0));
 };
 export default SliderTicks;
 //# sourceMappingURL=SliderTicks.js.map

package/lib/components/Slider/SliderTicks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderTicks.js","sourceRoot":"","sources":["../../../src/components/Slider/SliderTicks.tsx"],"names":[],"mappings":"AAAA,OAAO,~~KAAK,EAAE,~~EAAM,OAAO,EAAE,MAAM,OAAO,CAAC;~~AAE3C~~,OAAO,~~IAAI~~,MAAM,SAAS,CAAC;~~AAE3B~~,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEzF,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;~~AAUhD~~,MAAM,WAAW,GAAyB,CAAC,EACzC,KAAK,EACL,GAAG,EACH,GAAG,EACH,WAAW,EACX,OAAO,EACU,EAAE,EAAE;IACrB,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC;~~IAEjC~~,MAAM,gBAAgB,GAAG,OAAO,CAC9B,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,WAAW,KAAK,YAAY,CAAC,~~EAC1E~~,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,WAAW,CAAC,CAC/B,CAAC;IAEF,~~OAAO~~,~~CACL~~,~~oBAAC~~,IAAI,~~IACH~~,~~SAAS~~,~~EACP~~,WAAW,KAAK,YAAY;~~YAC1B~~,CAAC,CAAC~~;gBACE~~,~~IAAI~~,~~EAAE~~,~~2BAA2B~~,UAAU,GAAG,CAAC,~~oCAAoC;aACpF;YACH~~,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,UAAU,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,~~EAErE~~,EAAE,EAAE,oBAAoB,~~IAEvB~~,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE~~;;QAC3B~~,OAAO,CACL,~~oBAAC~~,cAAc,IACb,IAAI,EACF,WAAW,KAAK,YAAY;~~gBAC1B~~,CAAC,CAAC;~~oBACE~~,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,MAAM,IAAI,CAAC,GAAG,EAAE;~~iBAC3C~~;~~gBACH~~,CAAC,CAAC;~~oBACE~~,WAAW,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE;~~iBAC7C~~,~~EAEP~~,~~GAAG,EAAE,MAAA,IAAI,CAAC,KAAK,mCAAI,IAAI,CAAC,KAAK,EAC7B,~~WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,GAAG,EACrC,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,GAAG;YAErC,~~oBAAC~~,gBAAgB,IACf,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ,uBAEb,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,~~IAEjC~~,IAAI,CAAC,KAAK,~~CACM~~,~~CACJ~~,CAClB,CAAC;~~IACJ~~,CAAC,CAAC,~~CACG~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import ~~React,~~ { FC, useMemo } from 'react';\n\nimport Grid from '../Grid';\n\nimport { StyledTickButton, StyledTickItem, StyledTicksContainer } from './Slider.styles';\nimport SliderProps from './Slider.types';\nimport { calculateTicksRegions } from './utils';\n\ninterface SliderTicksProps {\n ticks: NonNullable<SliderProps['ticks']>;\n min: number;\n max: number;\n orientation: NonNullable<SliderProps['orientation']>;\n onClick: (value: number) => void;\n}\n\nconst SliderTicks: FC<SliderTicksProps> = ({\n ticks,\n min,\n max,\n orientation,\n onClick\n}: SliderTicksProps) => {\n const cellsCount = max - min + 1;\n\n const ticksDefinitions = useMemo(\n () => calculateTicksRegions(ticks, min, max, orientation === 'horizontal'),\n [ticks, min, max, orientation]\n );\n\n ~~return~~ (\n ~~<Grid\~~n ~~container={\n~~ orientation === 'horizontal'~~\n ?~~ {\n ~~cols:~~ ~~`minmax(0,~~ ~~0.5fr)~~ repeat(${cellsCount - 2}, minmax(0, 1fr)) minmax(0, 0.5fr)`\n }\n : { ~~rows:~~ `repeat(${cellsCount}, 1em)`, alignContent: 'between' }\n }\n as={StyledTicksContainer}\n >\n {ticksDefinitions.map(tick => {\n return (\n <StyledTickItem\n item={\n orientation === 'horizontal'\n ? {\n colStartEnd: `${tick.start} / ${tick.end}`\n }\n : {\n rowStartEnd: `${-tick.start} / ${-tick.end}`\n }\n }\n key={tick.label ?? tick.value}\n orientation={orientation}\n lowerBoundaryItem={tick.value === min}\n upperBoundaryItem={tick.value === max}\n >\n <StyledTickButton\n tabIndex={-1}\n role='button'\n aria-hidden\n onClick={() => onClick(tick.value)}\n >\n {tick.label}\n </StyledTickButton>\n </StyledTickItem>\n );\n })}\n </Grid>\n );\n};\n\nexport default SliderTicks;\n"]}
1	+ {"version":3,"file":"SliderTicks.js","sourceRoot":"","sources":["../../../src/components/Slider/SliderTicks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,OAAO,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,IAA4B,MAAM,SAAS,CAAC;AAEnD,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEzF,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAWhD,MAAM,WAAW,GAAyB,CAAC,EACzC,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,WAAW,EACX,OAAO,EACU,EAAE,EAAE;IACrB,MAAM,UAAU,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC;IAE1C,MAAM,gBAAgB,GAAG,OAAO,CAC9B,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,KAAK,YAAY,CAAC,EAChF,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,WAAW,CAAC,CAC/B,CAAC;IAEF,IAAI,WAAmB,CAAC;IACxB,IAAI,mBAAuC,CAAC;IAC5C,IAAI,WAAW,KAAK,YAAY,EAAE;QAChC,WAAW,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,UAAU,UAAU,GAAG,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC;QAChF,mBAAmB,GAAG;YACpB,IAAI,EAAE,oBAAoB,WAAW,mBAAmB;SACzD,CAAC;KACH;SAAM;QACL,WAAW,GAAG,UAAU,UAAU,QAAQ,CAAC;QAC3C,mBAAmB,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;KACtE;IAED,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB,EAAE,EAAE,EAAE,oBAAoB,YAC3D,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC3B,OAAO,CACL,KAAC,cAAc,IACb,IAAI,EACF,WAAW,KAAK,YAAY;oBAC1B,CAAC,CAAC;wBACE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,MAAM,IAAI,CAAC,GAAG,EAAE;qBAC3C;oBACH,CAAC,CAAC;wBACE,WAAW,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE;qBAC7C,EAGP,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,GAAG,EACrC,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,GAAG,YAErC,KAAC,gBAAgB,IACf,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ,uBAEb,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,YAEjC,IAAI,CAAC,KAAK,WACM,IAZd,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAad,CAClB,CAAC;QACJ,CAAC,CAAC,WACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FC, useMemo } from 'react';\n\nimport Grid, { GridContainerProps } from '../Grid';\n\nimport { StyledTickButton, StyledTickItem, StyledTicksContainer } from './Slider.styles';\nimport SliderProps from './Slider.types';\nimport { calculateTicksRegions } from './utils';\n\ninterface SliderTicksProps {\n ticks: NonNullable<SliderProps['ticks']>;\n min: number;\n max: number;\n step: number;\n orientation: NonNullable<SliderProps['orientation']>;\n onClick: (value: number) => void;\n}\n\nconst SliderTicks: FC<SliderTicksProps> = ({\n ticks,\n min,\n max,\n step,\n orientation,\n onClick\n}: SliderTicksProps) => {\n const cellsCount = (max - min) / step + 1;\n\n const ticksDefinitions = useMemo(\n () => calculateTicksRegions(ticks, min, max, step, orientation === 'horizontal'),\n [ticks, min, max, orientation]\n );\n\n let repeatCells: string;\n let gridContainerConfig: GridContainerProps;\n if (orientation === 'horizontal') {\n repeatCells = cellsCount > 2 ? `repeat(${cellsCount - 2}, minmax(0, 1fr))` : '';\n gridContainerConfig = {\n cols: `minmax(0, 0.5fr) ${repeatCells} minmax(0, 0.5fr)`\n };\n } else {\n repeatCells = `repeat(${cellsCount}, 1em)`;\n gridContainerConfig = { rows: repeatCells, alignContent: 'between' };\n }\n\n return (\n <Grid container={gridContainerConfig} as={StyledTicksContainer}>\n {ticksDefinitions.map(tick => {\n return (\n <StyledTickItem\n item={\n orientation === 'horizontal'\n ? {\n colStartEnd: `${tick.start} / ${tick.end}`\n }\n : {\n rowStartEnd: `${-tick.start} / ${-tick.end}`\n }\n }\n key={tick.label ?? tick.value}\n orientation={orientation}\n lowerBoundaryItem={tick.value === min}\n upperBoundaryItem={tick.value === max}\n >\n <StyledTickButton\n tabIndex={-1}\n role='button'\n aria-hidden\n onClick={() => onClick(tick.value)}\n >\n {tick.label}\n </StyledTickButton>\n </StyledTickItem>\n );\n })}\n </Grid>\n );\n};\n\nexport default SliderTicks;\n"]}