@chayns-components/core 5.0.0-beta.98 → 5.0.0-beta.982

package/lib/cjs/components/slider/Slider.js

@@ -0,0 +1,328 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _chaynsApi = require("chayns-api");
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = require("styled-components");
+var _useElementSize = require("../../hooks/useElementSize");
+var _slider = require("../../utils/slider");
+var _Slider = require("./Slider.styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Slider = ({
+  maxValue,
+  minValue,
+  value,
+  onSelect,
+  onChange,
+  interval,
+  isDisabled,
+  thumbLabelFormatter,
+  shouldShowThumbLabel = false,
+  steps = 1
+}) => {
+  const [fromValue, setFromValue] = (0, _react.useState)(0);
+  const [toValue, setToValue] = (0, _react.useState)(maxValue);
+  const [thumbWidth, setThumbWidth] = (0, _react.useState)(20);
+  const [isBigSlider, setIsBigSlider] = (0, _react.useState)(false);
+  const fromSliderRef = (0, _react.useRef)(null);
+  const toSliderRef = (0, _react.useRef)(null);
+  const fromSliderThumbRef = (0, _react.useRef)(null);
+  const toSliderThumbRef = (0, _react.useRef)(null);
+  const fromSliderThumbContentRef = (0, _react.useRef)(null);
+  const toSliderThumbContentRef = (0, _react.useRef)(null);
+  const sliderWrapperRef = (0, _react.useRef)(null);
+  const sliderWrapperSize = (0, _useElementSize.useElementSize)(sliderWrapperRef);
+  const theme = (0, _styledComponents.useTheme)();
+  (0, _react.useEffect)(() => {
+    if (shouldShowThumbLabel) {
+      setThumbWidth((0, _slider.getThumbMaxWidth)({
+        maxNumber: maxValue,
+        thumbLabelFormatter
+      }));
+    }
+  }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);
+
+  /**
+   * This function sets the value
+   */
+  (0, _react.useEffect)(() => {
+    if (typeof value !== 'number') {
+      return;
+    }
+    if (value >= minValue && value <= maxValue) {
+      setFromValue(value);
+    }
+  }, [maxValue, minValue, value]);
+  (0, _react.useEffect)(() => {
+    if (fromValue > toValue) {
+      setFromValue(toValue);
+    }
+    if (toValue < fromValue) {
+      setToValue(fromValue);
+    }
+  }, [fromValue, toValue]);
+  const handleMouseUp = (0, _react.useCallback)(() => {
+    var _fromSliderRef$curren, _toSliderRef$current;
+    if (isDisabled) {
+      return;
+    }
+    const from = Number((_fromSliderRef$curren = fromSliderRef.current) === null || _fromSliderRef$curren === void 0 ? void 0 : _fromSliderRef$curren.value);
+    const to = Number((_toSliderRef$current = toSliderRef.current) === null || _toSliderRef$current === void 0 ? void 0 : _toSliderRef$current.value);
+    if (typeof onSelect === 'function') {
+      onSelect(interval ? undefined : from, interval ? {
+        maxValue: to,
+        minValue: from
+      } : undefined);
+    }
+  }, [interval, isDisabled, onSelect]);
+  const handleControlFromSlider = (0, _react.useCallback)(event => {
+    if (!fromSliderRef.current || !toSliderRef.current) {
+      return;
+    }
+    let newValue = Number(event.target.value);
+    if (newValue > maxValue || newValue > maxValue - maxValue % steps) {
+      newValue = maxValue;
+    } else if (newValue < minValue) {
+      newValue = minValue;
+    } else {
+      newValue = Math.round(newValue / steps) * steps;
+    }
+    setFromValue(newValue);
+    const to = Number(toSliderRef.current.value);
+    if (typeof onChange === 'function') {
+      onChange(undefined, {
+        maxValue: to,
+        minValue: newValue
+      });
+    }
+    (0, _slider.fillSlider)({
+      toSlider: toSliderRef.current,
+      fromSlider: fromSliderRef.current,
+      fromValue: newValue,
+      theme
+    });
+    if (newValue > to) {
+      fromSliderRef.current.value = String(to);
+    } else {
+      fromSliderRef.current.value = String(newValue);
+    }
+  }, [maxValue, minValue, onChange, steps, theme]);
+  const handleControlToSlider = (0, _react.useCallback)(event => {
+    if (isDisabled) {
+      return;
+    }
+    if (!fromSliderRef.current || !toSliderRef.current) {
+      return;
+    }
+    let newValue = Number(event.target.value);
+    if (newValue > maxValue || newValue > maxValue - maxValue % steps) {
+      newValue = maxValue;
+    } else if (newValue < minValue) {
+      newValue = minValue;
+    } else {
+      newValue = Math.round(newValue / steps) * steps;
+    }
+    setToValue(newValue);
+    const from = Number(fromSliderRef.current.value);
+    if (typeof onChange === 'function') {
+      onChange(undefined, {
+        maxValue: newValue,
+        minValue: from
+      });
+    }
+    (0, _slider.fillSlider)({
+      toSlider: toSliderRef.current,
+      fromSlider: fromSliderRef.current,
+      toValue: newValue,
+      theme
+    });
+    if (from <= newValue) {
+      toSliderRef.current.value = String(newValue);
+    } else {
+      toSliderRef.current.value = String(from);
+    }
+  }, [isDisabled, maxValue, minValue, onChange, steps, theme]);
+  (0, _react.useEffect)(() => {
+    if (!fromSliderRef.current || !toSliderRef.current || !interval) {
+      return;
+    }
+    setFromValue(interval.minValue);
+    setToValue(interval.maxValue);
+    fromSliderRef.current.value = String(interval.minValue);
+    toSliderRef.current.value = String(interval.maxValue);
+    (0, _slider.fillSlider)({
+      fromSlider: fromSliderRef.current,
+      toSlider: toSliderRef.current,
+      theme
+    });
+    // Note: interval can´t be in the deps because of rerender
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [theme]);
+
+  /**
+   * This function updates the value
+   */
+  const handleInputChange = (0, _react.useCallback)(event => {
+    if (isDisabled) {
+      return;
+    }
+    let newValue = Number(event.target.value);
+    if (newValue > maxValue || newValue > maxValue - maxValue % steps) {
+      newValue = maxValue;
+    } else if (newValue < minValue) {
+      newValue = minValue;
+    } else {
+      newValue = Math.round(newValue / steps) * steps;
+    }
+    if (interval) {
+      handleControlFromSlider(event);
+      return;
+    }
+    setFromValue(newValue);
+    if (onChange) {
+      onChange(newValue);
+    }
+  }, [handleControlFromSlider, interval, isDisabled, maxValue, minValue, onChange, steps]);
+  const fromSliderThumbPosition = (0, _react.useMemo)(() => {
+    if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {
+      return (0, _slider.calculateGradientOffset)({
+        max: maxValue,
+        min: minValue,
+        value: fromValue,
+        thumbWidth: 20,
+        containerWidth: fromSliderRef.current.offsetWidth
+      });
+    }
+    return 0;
+  }, [fromValue, maxValue, minValue, sliderWrapperSize]);
+  const toSliderThumbPosition = (0, _react.useMemo)(() => {
+    if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {
+      return (0, _slider.calculateGradientOffset)({
+        max: maxValue,
+        min: minValue,
+        value: toValue,
+        thumbWidth: 20,
+        containerWidth: toSliderRef.current.offsetWidth
+      });
+    }
+    return 0;
+  }, [toValue, minValue, maxValue, sliderWrapperSize]);
+  const toSliderThumbContentPosition = (0, _react.useMemo)(() => (0, _slider.calculatePopupPosition)({
+    min: minValue,
+    max: maxValue,
+    sliderValue: toValue,
+    popupWidth: thumbWidth
+  }), [maxValue, minValue, thumbWidth, toValue]);
+  const fromSliderThumbContentPosition = (0, _react.useMemo)(() => (0, _slider.calculatePopupPosition)({
+    min: minValue,
+    max: maxValue,
+    sliderValue: fromValue,
+    popupWidth: thumbWidth
+  }), [fromValue, maxValue, minValue, thumbWidth]);
+  const handleTouchStart = (0, _react.useCallback)(() => {
+    if (isDisabled) {
+      return;
+    }
+    void (0, _chaynsApi.setRefreshScrollEnabled)(false);
+    if (shouldShowThumbLabel) {
+      setIsBigSlider(true);
+    }
+  }, [isDisabled, shouldShowThumbLabel]);
+  const handleTouchEnd = (0, _react.useCallback)(() => {
+    var _fromSliderRef$curren2, _toSliderRef$current2;
+    if (isDisabled) {
+      return;
+    }
+    void (0, _chaynsApi.setRefreshScrollEnabled)(true);
+    const from = Number((_fromSliderRef$curren2 = fromSliderRef.current) === null || _fromSliderRef$curren2 === void 0 ? void 0 : _fromSliderRef$curren2.value);
+    const to = Number((_toSliderRef$current2 = toSliderRef.current) === null || _toSliderRef$current2 === void 0 ? void 0 : _toSliderRef$current2.value);
+    if (typeof onSelect === 'function') {
+      onSelect(interval ? undefined : from, interval ? {
+        maxValue: to,
+        minValue: from
+      } : undefined);
+    }
+    if (shouldShowThumbLabel) {
+      setIsBigSlider(false);
+    }
+  }, [interval, isDisabled, onSelect, shouldShowThumbLabel]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Slider.StyledSlider, {
+    ref: sliderWrapperRef,
+    $isDisabled: isDisabled
+  }, /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderInput, {
+    animate: {
+      height: isBigSlider ? 30 : 10
+    },
+    initial: {
+      height: 10
+    },
+    exit: {
+      height: 10
+    },
+    $thumbWidth: 40,
+    ref: fromSliderRef,
+    $isInterval: !!interval,
+    type: "range",
+    value: fromValue,
+    step: 0.01,
+    max: maxValue,
+    min: minValue,
+    onTouchStart: handleTouchStart,
+    onTouchEnd: handleTouchEnd,
+    onChange: handleInputChange,
+    onMouseUp: handleMouseUp,
+    $max: maxValue,
+    $min: minValue,
+    $value: fromValue
+  }), /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderThumb, {
+    ref: fromSliderThumbRef,
+    $position: fromSliderThumbPosition,
+    $isBigSlider: isBigSlider
+  }, shouldShowThumbLabel && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderThumbLabel, {
+    $width: thumbWidth,
+    $isBigSlider: isBigSlider,
+    $position: fromSliderThumbContentPosition,
+    ref: fromSliderThumbContentRef
+  }, typeof thumbLabelFormatter === 'function' ? thumbLabelFormatter(fromValue) : fromValue)), interval && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderThumb, {
+    ref: toSliderThumbRef,
+    $position: toSliderThumbPosition,
+    $isBigSlider: isBigSlider
+  }, shouldShowThumbLabel && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderThumbLabel, {
+    $width: thumbWidth,
+    $isBigSlider: isBigSlider,
+    $position: toSliderThumbContentPosition,
+    ref: toSliderThumbContentRef
+  }, typeof thumbLabelFormatter === 'function' ? thumbLabelFormatter(toValue) : toValue)), interval && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderInput, {
+    animate: {
+      height: isBigSlider ? 30 : 10
+    },
+    initial: {
+      height: 10
+    },
+    exit: {
+      height: 10
+    },
+    $thumbWidth: 40,
+    $max: maxValue,
+    $min: minValue,
+    $value: toValue,
+    ref: toSliderRef,
+    $isInterval: !!interval,
+    type: "range",
+    value: toValue,
+    step: 0.01,
+    max: maxValue,
+    min: minValue,
+    onTouchStart: handleTouchStart,
+    onTouchEnd: handleTouchEnd,
+    onChange: handleControlToSlider,
+    onMouseUp: handleMouseUp
+  })), [isDisabled, isBigSlider, interval, fromValue, maxValue, minValue, handleTouchStart, handleTouchEnd, handleInputChange, handleMouseUp, fromSliderThumbPosition, shouldShowThumbLabel, thumbWidth, fromSliderThumbContentPosition, thumbLabelFormatter, toSliderThumbPosition, toSliderThumbContentPosition, toValue, handleControlToSlider]);
+};
+Slider.displayName = 'Slider';
+var _default = exports.default = Slider;
+//# sourceMappingURL=Slider.js.map

package/lib/cjs/components/slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_styledComponents","_useElementSize","_slider","_Slider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Slider","maxValue","minValue","value","onSelect","onChange","interval","isDisabled","thumbLabelFormatter","shouldShowThumbLabel","steps","fromValue","setFromValue","useState","toValue","setToValue","thumbWidth","setThumbWidth","isBigSlider","setIsBigSlider","fromSliderRef","useRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","fromSliderThumbContentRef","toSliderThumbContentRef","sliderWrapperRef","sliderWrapperSize","useElementSize","theme","useTheme","useEffect","getThumbMaxWidth","maxNumber","handleMouseUp","useCallback","_fromSliderRef$curren","_toSliderRef$current","from","Number","current","to","undefined","handleControlFromSlider","event","newValue","target","Math","round","fillSlider","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","fromSliderThumbPosition","useMemo","calculateGradientOffset","max","min","containerWidth","offsetWidth","toSliderThumbPosition","toSliderThumbContentPosition","calculatePopupPosition","sliderValue","popupWidth","fromSliderThumbContentPosition","handleTouchStart","setRefreshScrollEnabled","handleTouchEnd","_fromSliderRef$curren2","_toSliderRef$current2","createElement","StyledSlider","ref","$isDisabled","StyledSliderInput","animate","height","initial","exit","$thumbWidth","$isInterval","type","step","onTouchStart","onTouchEnd","onMouseUp","$max","$min","$value","StyledSliderThumb","$position","$isBigSlider","StyledSliderThumbLabel","$width","displayName","_default","exports"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport {\n    calculateGradientOffset,\n    calculatePopupPosition,\n    fillSlider,\n    getThumbMaxWidth,\n} from '../../utils/slider';\nimport {\n    StyledSlider,\n    StyledSliderInput,\n    StyledSliderThumb,\n    StyledSliderThumbLabel,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n    maxValue: number;\n    minValue: number;\n}\n\nexport type SliderProps = {\n    /**\n     * The range that can be selected with two thumbs..\n     */\n    interval?: SliderInterval;\n    /**\n     * Whether the slider is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The maximum value of the slider.\n     */\n    maxValue: number;\n    /**\n     * The minimum value of the slider.\n     */\n    minValue: number;\n    /**\n     * Function that will be executed when the value is selected.\n     */\n    onSelect?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Function that will be executed when the value is changed.\n     */\n    onChange?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Whether the current value should be displayed inside the slider thumb.\n     */\n    shouldShowThumbLabel?: boolean;\n    /**\n     * The steps of the slider.\n     */\n    steps?: number;\n    /**\n     * A function to format the thumb label.\n     */\n    thumbLabelFormatter?: (value: number) => string;\n    /**\n     * the Value that the slider should have.\n     */\n    value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n    maxValue,\n    minValue,\n    value,\n    onSelect,\n    onChange,\n    interval,\n    isDisabled,\n    thumbLabelFormatter,\n    shouldShowThumbLabel = false,\n    steps = 1,\n}) => {\n    const [fromValue, setFromValue] = useState(0);\n    const [toValue, setToValue] = useState(maxValue);\n    const [thumbWidth, setThumbWidth] = useState(20);\n    const [isBigSlider, setIsBigSlider] = useState(false);\n\n    const fromSliderRef = useRef<HTMLInputElement>(null);\n    const toSliderRef = useRef<HTMLInputElement>(null);\n    const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n    const toSliderThumbRef = useRef<HTMLDivElement>(null);\n    const fromSliderThumbContentRef = useRef<HTMLDivElement>(null);\n    const toSliderThumbContentRef = useRef<HTMLDivElement>(null);\n    const sliderWrapperRef = useRef<HTMLDivElement>(null);\n\n    const sliderWrapperSize = useElementSize(sliderWrapperRef);\n\n    const theme = useTheme();\n\n    useEffect(() => {\n        if (shouldShowThumbLabel) {\n            setThumbWidth(getThumbMaxWidth({ maxNumber: maxValue, thumbLabelFormatter }));\n        }\n    }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);\n\n    /**\n     * This function sets the value\n     */\n    useEffect(() => {\n        if (typeof value !== 'number') {\n            return;\n        }\n\n        if (value >= minValue && value <= maxValue) {\n            setFromValue(value);\n        }\n    }, [maxValue, minValue, value]);\n\n    useEffect(() => {\n        if (fromValue > toValue) {\n            setFromValue(toValue);\n        }\n\n        if (toValue < fromValue) {\n            setToValue(fromValue);\n        }\n    }, [fromValue, toValue]);\n\n    const handleMouseUp = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        const from = Number(fromSliderRef.current?.value);\n        const to = Number(toSliderRef.current?.value);\n\n        if (typeof onSelect === 'function') {\n            onSelect(\n                interval ? undefined : from,\n                interval ? { maxValue: to, minValue: from } : undefined,\n            );\n        }\n    }, [interval, isDisabled, onSelect]);\n\n    const handleControlFromSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            let newValue = Number(event.target.value);\n\n            if (newValue > maxValue || newValue > maxValue - (maxValue % steps)) {\n                newValue = maxValue;\n            } else if (newValue < minValue) {\n                newValue = minValue;\n            } else {\n                newValue = Math.round(newValue / steps) * steps;\n            }\n\n            setFromValue(newValue);\n\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: newValue });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                fromValue: newValue,\n                theme,\n            });\n\n            if (newValue > to) {\n                fromSliderRef.current.value = String(to);\n            } else {\n                fromSliderRef.current.value = String(newValue);\n            }\n        },\n        [maxValue, minValue, onChange, steps, theme],\n    );\n\n    const handleControlToSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            if (isDisabled) {\n                return;\n            }\n\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            let newValue = Number(event.target.value);\n\n            if (newValue > maxValue || newValue > maxValue - (maxValue % steps)) {\n                newValue = maxValue;\n            } else if (newValue < minValue) {\n                newValue = minValue;\n            } else {\n                newValue = Math.round(newValue / steps) * steps;\n            }\n\n            setToValue(newValue);\n\n            const from = Number(fromSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: newValue, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                toValue: newValue,\n                theme,\n            });\n\n            if (from <= newValue) {\n                toSliderRef.current.value = String(newValue);\n            } else {\n                toSliderRef.current.value = String(from);\n            }\n        },\n        [isDisabled, maxValue, minValue, onChange, steps, theme],\n    );\n\n    useEffect(() => {\n        if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n            return;\n        }\n\n        setFromValue(interval.minValue);\n        setToValue(interval.maxValue);\n\n        fromSliderRef.current.value = String(interval.minValue);\n        toSliderRef.current.value = String(interval.maxValue);\n\n        fillSlider({\n            fromSlider: fromSliderRef.current,\n            toSlider: toSliderRef.current,\n            theme,\n        });\n        // Note: interval can´t be in the deps because of rerender\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [theme]);\n\n    /**\n     * This function updates the value\n     */\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            if (isDisabled) {\n                return;\n            }\n\n            let newValue = Number(event.target.value);\n\n            if (newValue > maxValue || newValue > maxValue - (maxValue % steps)) {\n                newValue = maxValue;\n            } else if (newValue < minValue) {\n                newValue = minValue;\n            } else {\n                newValue = Math.round(newValue / steps) * steps;\n            }\n\n            if (interval) {\n                handleControlFromSlider(event);\n\n                return;\n            }\n\n            setFromValue(newValue);\n\n            if (onChange) {\n                onChange(newValue);\n            }\n        },\n        [handleControlFromSlider, interval, isDisabled, maxValue, minValue, onChange, steps],\n    );\n\n    const fromSliderThumbPosition = useMemo(() => {\n        if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {\n            return calculateGradientOffset({\n                max: maxValue,\n                min: minValue,\n                value: fromValue,\n                thumbWidth: 20,\n                containerWidth: fromSliderRef.current.offsetWidth,\n            });\n        }\n\n        return 0;\n    }, [fromValue, maxValue, minValue, sliderWrapperSize]);\n\n    const toSliderThumbPosition = useMemo(() => {\n        if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {\n            return calculateGradientOffset({\n                max: maxValue,\n                min: minValue,\n                value: toValue,\n                thumbWidth: 20,\n                containerWidth: toSliderRef.current.offsetWidth,\n            });\n        }\n        return 0;\n    }, [toValue, minValue, maxValue, sliderWrapperSize]);\n\n    const toSliderThumbContentPosition = useMemo(\n        () =>\n            calculatePopupPosition({\n                min: minValue,\n                max: maxValue,\n                sliderValue: toValue,\n                popupWidth: thumbWidth,\n            }),\n        [maxValue, minValue, thumbWidth, toValue],\n    );\n\n    const fromSliderThumbContentPosition = useMemo(\n        () =>\n            calculatePopupPosition({\n                min: minValue,\n                max: maxValue,\n                sliderValue: fromValue,\n                popupWidth: thumbWidth,\n            }),\n        [fromValue, maxValue, minValue, thumbWidth],\n    );\n\n    const handleTouchStart = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        void setRefreshScrollEnabled(false);\n\n        if (shouldShowThumbLabel) {\n            setIsBigSlider(true);\n        }\n    }, [isDisabled, shouldShowThumbLabel]);\n\n    const handleTouchEnd = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        void setRefreshScrollEnabled(true);\n\n        const from = Number(fromSliderRef.current?.value);\n        const to = Number(toSliderRef.current?.value);\n\n        if (typeof onSelect === 'function') {\n            onSelect(\n                interval ? undefined : from,\n                interval ? { maxValue: to, minValue: from } : undefined,\n            );\n        }\n\n        if (shouldShowThumbLabel) {\n            setIsBigSlider(false);\n        }\n    }, [interval, isDisabled, onSelect, shouldShowThumbLabel]);\n\n    return useMemo(\n        () => (\n            <StyledSlider ref={sliderWrapperRef} $isDisabled={isDisabled}>\n                <StyledSliderInput\n                    animate={{ height: isBigSlider ? 30 : 10 }}\n                    initial={{ height: 10 }}\n                    exit={{ height: 10 }}\n                    $thumbWidth={40}\n                    ref={fromSliderRef}\n                    $isInterval={!!interval}\n                    type=\"range\"\n                    value={fromValue}\n                    step={0.01}\n                    max={maxValue}\n                    min={minValue}\n                    onTouchStart={handleTouchStart}\n                    onTouchEnd={handleTouchEnd}\n                    onChange={handleInputChange}\n                    onMouseUp={handleMouseUp}\n                    $max={maxValue}\n                    $min={minValue}\n                    $value={fromValue}\n                />\n                <StyledSliderThumb\n                    ref={fromSliderThumbRef}\n                    $position={fromSliderThumbPosition}\n                    $isBigSlider={isBigSlider}\n                >\n                    {shouldShowThumbLabel && (\n                        <StyledSliderThumbLabel\n                            $width={thumbWidth}\n                            $isBigSlider={isBigSlider}\n                            $position={fromSliderThumbContentPosition}\n                            ref={fromSliderThumbContentRef}\n                        >\n                            {typeof thumbLabelFormatter === 'function'\n                                ? thumbLabelFormatter(fromValue)\n                                : fromValue}\n                        </StyledSliderThumbLabel>\n                    )}\n                </StyledSliderThumb>\n                {interval && (\n                    <StyledSliderThumb\n                        ref={toSliderThumbRef}\n                        $position={toSliderThumbPosition}\n                        $isBigSlider={isBigSlider}\n                    >\n                        {shouldShowThumbLabel && (\n                            <StyledSliderThumbLabel\n                                $width={thumbWidth}\n                                $isBigSlider={isBigSlider}\n                                $position={toSliderThumbContentPosition}\n                                ref={toSliderThumbContentRef}\n                            >\n                                {typeof thumbLabelFormatter === 'function'\n                                    ? thumbLabelFormatter(toValue)\n                                    : toValue}\n                            </StyledSliderThumbLabel>\n                        )}\n                    </StyledSliderThumb>\n                )}\n                {interval && (\n                    <StyledSliderInput\n                        animate={{ height: isBigSlider ? 30 : 10 }}\n                        initial={{ height: 10 }}\n                        exit={{ height: 10 }}\n                        $thumbWidth={40}\n                        $max={maxValue}\n                        $min={minValue}\n                        $value={toValue}\n                        ref={toSliderRef}\n                        $isInterval={!!interval}\n                        type=\"range\"\n                        value={toValue}\n                        step={0.01}\n                        max={maxValue}\n                        min={minValue}\n                        onTouchStart={handleTouchStart}\n                        onTouchEnd={handleTouchEnd}\n                        onChange={handleControlToSlider}\n                        onMouseUp={handleMouseUp}\n                    />\n                )}\n            </StyledSlider>\n        ),\n        [\n            isDisabled,\n            isBigSlider,\n            interval,\n            fromValue,\n            maxValue,\n            minValue,\n            handleTouchStart,\n            handleTouchEnd,\n            handleInputChange,\n            handleMouseUp,\n            fromSliderThumbPosition,\n            shouldShowThumbLabel,\n            thumbWidth,\n            fromSliderThumbContentPosition,\n            thumbLabelFormatter,\n            toSliderThumbPosition,\n            toSliderThumbContentPosition,\n            toValue,\n            handleControlToSlider,\n        ],\n    );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/slider/Slider.styles.js

@@ -0,0 +1,165 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSliderThumbLabel = exports.StyledSliderThumb = exports.StyledSliderInput = exports.StyledSlider = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledSlider = exports.StyledSlider = _styledComponents.default.div`
+    width: 100%;
+    height: 30px;
+    cursor: ${({
+  $isDisabled
+}) => $isDisabled ? 'default' : 'pointer'} !important;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    touch-action: none;
+    user-select: none;
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
+`;
+const StyledSliderInput = exports.StyledSliderInput = (0, _styledComponents.default)(_framerMotion.motion.input).attrs(({
+  $isInterval,
+  $value,
+  $thumbWidth,
+  $min,
+  $max,
+  theme
+}) => ({
+  style: {
+    pointerEvents: $isInterval ? 'none' : 'all',
+    width: `calc(100% - ${$thumbWidth}px)`,
+    background: !$isInterval ? `linear-gradient(
+            to right,
+            ${theme['409'] ?? ''} 0%,
+            ${theme['409'] ?? ''}
+            ${($value - $min) / ($max - $min) * 100}%,
+            ${theme['403'] ?? ''}
+            ${($value - $min) / ($max - $min) * 100}%,
+            ${theme['403'] ?? ''}
+        )` : undefined
+  }
+}))`
+    position: absolute;
+    border-radius: 100px;
+    -webkit-appearance: none;
+
+    outline: none;
+    cursor: pointer !important;
+    z-index: 2;
+    appearance: none;
+
+    // Slider thumb for chrome
+    &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 50px;
+        height: 20px;
+        cursor: pointer;
+        opacity: 0;
+        pointer-events: all;
+        position: relative;
+    }
+
+    // slider thumb for firefox
+
+    &::-moz-range-thumb {
+        width: 50px;
+        height: 20px;
+        cursor: pointer;
+        opacity: 0;
+        pointer-events: all;
+        position: relative;
+    }
+`;
+const StyledSliderThumb = exports.StyledSliderThumb = _styledComponents.default.div.attrs(({
+  $position,
+  $isBigSlider
+}) => ({
+  style: {
+    left: `${$position}px`,
+    height: `${$isBigSlider ? 0 : 20}px`
+  }
+}))`
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    border-radius: 100px;
+    background-color: white;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+    pointer-events: none;
+    z-index: 3;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 8px;
+    white-space: nowrap;
+    top: 5px;
+
+    transition: top 0.2s ease 0s;
+`;
+const StyledSliderThumbLabel = exports.StyledSliderThumbLabel = _styledComponents.default.span.attrs(({
+  $position,
+  $isBigSlider,
+  $width
+}) => ({
+  style: {
+    minWidth: `${$width}px`,
+    top: `-${$isBigSlider ? 56 : 48}px`,
+    left: `${$position}px`
+  }
+}))`
+    pointer-events: none;
+    color: #222;
+
+    height: 20px;
+    cursor: pointer;
+    border-radius: 3px;
+    background-color: white;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+    z-index: 3;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+    white-space: nowrap;
+
+    transition: top 0.2s ease 0s;
+
+    &::after {
+        background-color: inherit;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        border-right: 1px solid rgba(0, 0, 0, 0.1);
+        box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4);
+        content: '';
+        height: 14px;
+        position: absolute;
+        width: 14px;
+        z-index: -2;
+        left: ${({
+  $position
+}) => $position * -1}px;
+        transform: rotate(225deg);
+        bottom: -7px;
+    }
+
+    &::before {
+        background-color: inherit;
+        bottom: 0;
+        content: '';
+        left: 0;
+        position: absolute;
+        right: 0;
+        border-radius: 3px;
+        top: 0;
+        z-index: -1;
+    }
+`;
+//# sourceMappingURL=Slider.styles.js.map

package/lib/cjs/components/slider/Slider.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSlider","exports","styled","div","$isDisabled","StyledSliderInput","motion","input","attrs","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","$position","$isBigSlider","left","height","StyledSliderThumbLabel","span","$width","minWidth","top"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSliderProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledSlider = styled.div<StyledSliderProps>`\n    width: 100%;\n    height: 30px;\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')} !important;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n    user-select: none;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n    $min: number;\n    $max: number;\n    $value: number;\n    $isInterval: boolean;\n    $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n    ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n        style: {\n            pointerEvents: $isInterval ? 'none' : 'all',\n            width: `calc(100% - ${$thumbWidth}px)`,\n            background: !$isInterval\n                ? `linear-gradient(\n            to right,\n            ${(theme as Theme)['409'] ?? ''} 0%,\n            ${(theme as Theme)['409'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n        )`\n                : undefined,\n        },\n    }),\n)`\n    position: absolute;\n    border-radius: 100px;\n    -webkit-appearance: none;\n\n    outline: none;\n    cursor: pointer !important;\n    z-index: 2;\n    appearance: none;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n\n    // slider thumb for firefox\n\n    &::-moz-range-thumb {\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{\n    $position: number;\n    $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(\n    ({ $position, $isBigSlider }) => ({\n        style: {\n            left: `${$position}px`,\n            height: `${$isBigSlider ? 0 : 20}px`,\n        },\n    }),\n)`\n    width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n    top: 5px;\n\n    transition: top 0.2s ease 0s;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<{\n    $position: number;\n    $width: number;\n    $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumbLabel = styled.span.attrs<StyledSliderThumbLabelProps>(\n    ({ $position, $isBigSlider, $width }) => ({\n        style: {\n            minWidth: `${$width}px`,\n            top: `-${$isBigSlider ? 56 : 48}px`,\n            left: `${$position}px`,\n        },\n    }),\n)`\n    pointer-events: none;\n    color: #222;\n\n    height: 20px;\n    cursor: pointer;\n    border-radius: 3px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px;\n    white-space: nowrap;\n\n    transition: top 0.2s ease 0s;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n        left: ${({ $position }) => $position * -1}px;\n        transform: rotate(225deg);\n        bottom: -7px;\n    }\n\n    &::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        border-radius: 3px;\n        top: 0;\n        z-index: -1;\n    }\n`;\n"],"mappings":"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","ignoreList":[]}