@chayns-components/core 5.0.0-beta.997 → 5.0.0

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSliderThumbLabel = exports.StyledSliderThumb = exports.StyledSliderInput = exports.StyledSlider = void 0;
-var _framerMotion = require("framer-motion");
+exports.StyledSliderThumbLabel = exports.StyledSliderThumb = exports.StyledSliderInput = exports.StyledSlider = exports.StyledHighlightedStep = void 0;
+var _react = require("motion/react");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledSlider = exports.StyledSlider = _styledComponents.default.div`
@@ -23,26 +23,15 @@ const StyledSlider = exports.StyledSlider = _styledComponents.default.div`
   $isDisabled
 }) => $isDisabled ? 0.5 : 1};
 `;
-const StyledSliderInput = exports.StyledSliderInput = (0, _styledComponents.default)(_framerMotion.motion.input).attrs(({
+const StyledSliderInput = exports.StyledSliderInput = (0, _styledComponents.default)(_react.motion.input).attrs(({
+  $background,
   $isInterval,
-  $value,
-  $thumbWidth,
-  $min,
-  $max,
-  theme
+  $thumbWidth
 }) => ({
   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
+    background: $background
   }
 }))`
     position: absolute;
@@ -93,7 +82,7 @@ const StyledSliderThumb = exports.StyledSliderThumb = _styledComponents.default.
     background-color: white;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
     pointer-events: none;
-    z-index: 3;
+    z-index: 5;
     position: absolute;
     display: flex;
     align-items: center;
@@ -162,4 +151,26 @@ const StyledSliderThumbLabel = exports.StyledSliderThumbLabel = _styledComponent
         z-index: -1;
     }
 `;
+const StyledHighlightedStep = exports.StyledHighlightedStep = _styledComponents.default.div`
+    background-color: ${({
+  $isDisabled,
+  $isFilled,
+  theme
+}) => {
+  if ($isDisabled) return 'rgb(215, 215, 215)';
+  if ($isFilled) return theme['409'];
+  return theme['403'];
+}};
+    border-radius: 50%;
+    height: 18px;
+    left: ${({
+  $leftPosition
+}) => $leftPosition}px;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 18px;
+    z-index: 3;
+`;
 //# sourceMappingURL=Slider.styles.js.map

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

@@ -1 +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":[]}
+{"version":3,"file":"Slider.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSlider","exports","styled","div","$isDisabled","StyledSliderInput","motion","input","attrs","$background","$isInterval","$thumbWidth","style","pointerEvents","width","background","StyledSliderThumb","$position","$isBigSlider","left","height","StyledSliderThumbLabel","span","$width","minWidth","top","StyledHighlightedStep","$isFilled","theme","$leftPosition"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\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    $background?: string;\n    $isInterval: boolean;\n    $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n    ({ $background, $isInterval, $thumbWidth }) => ({\n        style: {\n            pointerEvents: $isInterval ? 'none' : 'all',\n            width: `calc(100% - ${$thumbWidth}px)`,\n            background: $background,\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: 5;\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\ntype StyledHighlightedStepProps = WithTheme<{\n    $isDisabled: boolean;\n    $isFilled: boolean;\n    $leftPosition: number;\n}>;\n\nexport const StyledHighlightedStep = styled.div<StyledHighlightedStepProps>`\n    background-color: ${({ $isDisabled, $isFilled, theme }) => {\n        if ($isDisabled) return 'rgb(215, 215, 215)';\n        if ($isFilled) return theme['409'];\n        return theme['403'];\n    }};\n    border-radius: 50%;\n    height: 18px;\n    left: ${({ $leftPosition }) => $leftPosition}px;\n    pointer-events: none;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    width: 18px;\n    z-index: 3;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/slider-button/SliderButton.js

@@ -5,44 +5,46 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _chaynsApi = require("chayns-api");
-var _framerMotion = require("framer-motion");
-var _react = _interopRequireWildcard(require("react"));
-var _useElementSize = require("../../hooks/useElementSize");
+var _react = require("motion/react");
+var _react2 = _interopRequireWildcard(require("react"));
+var _element = require("../../hooks/element");
 var _calculate = require("../../utils/calculate");
 var _sliderButton = require("../../utils/sliderButton");
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _Popup = _interopRequireDefault(require("../popup/Popup"));
 var _SliderButton = require("./SliderButton.styles");
+var _styledComponents = require("styled-components");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const SliderButton = ({
-  selectedButtonId,
   isDisabled,
+  isSecondary,
   items,
-  onChange
+  onChange,
+  selectedButtonId
 }) => {
-  const [dragRange, setDragRange] = (0, _react.useState)({
+  const [dragRange, setDragRange] = (0, _react2.useState)({
     left: 0,
     right: 0
   });
-  const [shownItemsCount, setShownItemsCount] = (0, _react.useState)(items.length);
-  const [sliderSize, setSliderSize] = (0, _react.useState)({
+  const [shownItemsCount, setShownItemsCount] = (0, _react2.useState)(items.length);
+  const [sliderSize, setSliderSize] = (0, _react2.useState)({
     width: 0
   });
-  const [currentId, setCurrentId] = (0, _react.useState)('');
-  const [currentPopupId, setCurrentPopupId] = (0, _react.useState)('');
-  const [currentIndex, setCurrentIndex] = (0, _react.useState)(0);
-  const sliderButtonRef = (0, _react.useRef)(null);
-  const sliderButtonWrapperRef = (0, _react.useRef)(null);
-  const popupRef = (0, _react.useRef)(null);
-  const [scope, animate] = (0, _framerMotion.useAnimate)();
-  const initialItemWidth = (0, _react.useMemo)(() => (0, _calculate.calculateBiggestWidth)(items), [items]);
-  const elementSize = (0, _useElementSize.useElementSize)(sliderButtonRef);
-  (0, _react.useEffect)(() => {
+  const [currentId, setCurrentId] = (0, _react2.useState)('');
+  const [currentPopupId, setCurrentPopupId] = (0, _react2.useState)('');
+  const [currentIndex, setCurrentIndex] = (0, _react2.useState)(0);
+  const sliderButtonRef = (0, _react2.useRef)(null);
+  const sliderButtonWrapperRef = (0, _react2.useRef)(null);
+  const popupRef = (0, _react2.useRef)(null);
+  const [scope, animate] = (0, _react.useAnimate)();
+  const theme = (0, _styledComponents.useTheme)();
+  const initialItemWidth = (0, _react2.useMemo)(() => (0, _calculate.calculateBiggestWidth)(items), [items]);
+  const elementSize = (0, _element.useElementSize)(sliderButtonRef);
+  (0, _react2.useEffect)(() => {
     if (elementSize) setSliderSize(elementSize);
   }, [elementSize]);
-  const setPopupId = (0, _react.useCallback)(selectedId => {
+  const setPopupId = (0, _react2.useCallback)(selectedId => {
     const ids = items.slice(shownItemsCount - 1).map(({
       id
     }) => id);
@@ -54,8 +56,8 @@ const SliderButton = ({
     }
     setCurrentId(selectedId);
   }, [items, shownItemsCount]);
-  const isSliderBigger = (0, _react.useMemo)(() => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length - 1, [initialItemWidth, items.length, sliderSize]);
-  const maxShownItemsCount = (0, _react.useMemo)(() => {
+  const isSliderBigger = (0, _react2.useMemo)(() => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length - 1, [initialItemWidth, items.length, sliderSize]);
+  const maxShownItemsCount = (0, _react2.useMemo)(() => {
     let totalWidth = 0;
     let count = 0;
     while (count < items.length) {
@@ -67,13 +69,13 @@ const SliderButton = ({
     }
     return count;
   }, [items, sliderSize.width]);
-  const itemWidth = (0, _react.useMemo)(() => {
+  const itemWidth = (0, _react2.useMemo)(() => {
     const sliderWidth = (sliderSize === null || sliderSize === void 0 ? void 0 : sliderSize.width) || 0;
     const itemCount = items.length || 1;
     setShownItemsCount(isSliderBigger ? maxShownItemsCount : itemCount);
     return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);
   }, [isSliderBigger, items.length, maxShownItemsCount, sliderSize === null || sliderSize === void 0 ? void 0 : sliderSize.width]);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     if (sliderSize) {
       const sliderWidth = itemWidth * (items.length - 1);
       const count = Math.floor(sliderSize.width / itemWidth);
@@ -83,7 +85,7 @@ const SliderButton = ({
       });
     }
   }, [isSliderBigger, itemWidth, items.length, sliderSize]);
-  const animation = (0, _react.useCallback)(async x => {
+  const animation = (0, _react2.useCallback)(async x => {
     await animate(scope.current, {
       x
     }, {
@@ -91,11 +93,11 @@ const SliderButton = ({
       duration: 0.2
     });
   }, [animate, scope]);
-  const setItemPosition = (0, _react.useCallback)(index => {
+  const setItemPosition = (0, _react2.useCallback)(index => {
     setCurrentIndex(index);
     void animation(itemWidth * index);
   }, [animation, itemWidth]);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     if (typeof selectedButtonId === 'string') {
       let index = items.findIndex(({
         id
@@ -110,7 +112,7 @@ const SliderButton = ({
       }
     }
   }, [animation, dragRange.right, isSliderBigger, itemWidth, items, selectedButtonId, setItemPosition, setPopupId, shownItemsCount]);
-  const handleClick = (0, _react.useCallback)((id, index) => {
+  const handleClick = (0, _react2.useCallback)((id, index) => {
     if (isDisabled) {
       return;
     }
@@ -127,14 +129,39 @@ const SliderButton = ({
     }
     setItemPosition(index);
   }, [isDisabled, onChange, setItemPosition, setPopupId]);
-  const buttons = (0, _react.useMemo)(() => {
+  const backgroundColor = (0, _react2.useMemo)(() => {
+    let color;
+    if (isSecondary) {
+      color = theme['202'];
+    } else {
+      color = theme.buttonBackgroundColor ?? theme['408'];
+    }
+    if (theme.buttonDesign === '2') {
+      color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;
+    }
+    return color;
+  }, [isSecondary, theme]);
+  const thumbBackgroundColor = (0, _react2.useMemo)(() => {
+    let color;
+    if (isSecondary) {
+      color = theme['207'];
+    } else {
+      color = `rgba(${theme['405-rgb'] ?? ''}, 0.75)`;
+    }
+    if (theme.buttonDesign === '2') {
+      color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;
+    }
+    return color;
+  }, [isSecondary, theme]);
+  const buttons = (0, _react2.useMemo)(() => {
     if (items.length > shownItemsCount) {
       const newItems = items.slice(0, shownItemsCount - 1);
       const otherItems = items.slice(shownItemsCount - 1);
       const elements = newItems.map(({
         id,
         text
-      }, index) => /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonItem, {
+      }, index) => /*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButtonItem, {
+        $isSecondary: isSecondary,
         $width: itemWidth,
         key: `slider-button-${id}`,
         onClick: () => handleClick(id, index)
@@ -142,19 +169,20 @@ const SliderButton = ({
       const popupContent = otherItems.map(({
         id,
         text
-      }) => /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonPopupContentItem, {
+      }) => /*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButtonPopupContentItem, {
         key: `slider-button-${id}`,
         onClick: () => handleClick(id, newItems.length),
         $isSelected: id === currentPopupId
       }, text));
       const id = 'more';
-      elements.push(/*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonItem, {
+      elements.push(/*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButtonItem, {
+        $isSecondary: isSecondary,
         $width: itemWidth,
         key: `slider-button-${id}`
-      }, /*#__PURE__*/_react.default.createElement(_Popup.default, {
+      }, /*#__PURE__*/_react2.default.createElement(_Popup.default, {
         ref: popupRef,
-        content: /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonPopupContent, null, popupContent)
-      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        content: /*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButtonPopupContent, null, popupContent)
+      }, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
         icons: ['fa fa-ellipsis'],
         color: "white"
       }))));
@@ -163,28 +191,31 @@ const SliderButton = ({
     return items.map(({
       id,
       text
-    }) => /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonItem, {
+    }) => /*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButtonItem, {
+      $isSecondary: isSecondary,
       $width: itemWidth,
       key: `slider-button-${id}`
     }, text));
-  }, [currentPopupId, handleClick, itemWidth, items, shownItemsCount]);
-  const pseudoButtons = (0, _react.useMemo)(() => {
+  }, [currentPopupId, handleClick, isSecondary, itemWidth, items, shownItemsCount]);
+  const pseudoButtons = (0, _react2.useMemo)(() => {
     if (items.length > shownItemsCount) {
       const newItems = items.slice(0, shownItemsCount - 1);
       const elements = newItems.map(({
         id,
         text
-      }, index) => /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonItem, {
+      }, index) => /*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButtonItem, {
+        $isSecondary: isSecondary,
         $width: itemWidth,
         key: `pseudo-slider-button-${id}`,
         onClick: () => handleClick(id, index)
       }, text));
       const id = 'more';
-      elements.push(/*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonItem, {
+      elements.push(/*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButtonItem, {
+        $isSecondary: isSecondary,
         $width: itemWidth,
         key: `pseudo-slider-button-${id}`,
         onClick: () => handleClick(id, newItems.length)
-      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      }, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
         icons: ['fa fa-ellipsis']
       })));
       return elements;
@@ -192,27 +223,28 @@ const SliderButton = ({
     return items.map(({
       id,
       text
-    }, index) => /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonItem, {
+    }, index) => /*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButtonItem, {
+      $isSecondary: isSecondary,
       $width: itemWidth,
       key: `pseudo-slider-button-${id}`,
       onClick: () => handleClick(id, index)
     }, text));
-  }, [handleClick, itemWidth, items, shownItemsCount]);
+  }, [handleClick, isSecondary, itemWidth, items, shownItemsCount]);
 
   /**
    * Creates an array with the snap points relative to the width of the items
    */
-  const snapPoints = (0, _react.useMemo)(() => {
+  const snapPoints = (0, _react2.useMemo)(() => {
     const points = [0];
     for (let i = 1; i < items.length; i++) {
       points.push(itemWidth * i);
     }
     return points;
   }, [itemWidth, items.length]);
-  const handleDragStart = (0, _react.useCallback)(() => {
+  const handleDragStart = (0, _react2.useCallback)(() => {
     void (0, _chaynsApi.setRefreshScrollEnabled)(false);
   }, []);
-  const handleDragEnd = (0, _react.useCallback)(() => {
+  const handleDragEnd = (0, _react2.useCallback)(() => {
     void (0, _chaynsApi.setRefreshScrollEnabled)(true);
     const position = (0, _sliderButton.getThumbPosition)({
       scope,
@@ -269,12 +301,12 @@ const SliderButton = ({
       }
     }
   }, [animation, itemWidth, items, onChange, scope, shownItemsCount, snapPoints]);
-  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButton, {
+  return (0, _react2.useMemo)(() => /*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButton, {
     $isDisabled: isDisabled,
     ref: sliderButtonRef
-  }, /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonButtonsWrapper, {
+  }, /*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButtonButtonsWrapper, {
     $isInvisible: true
-  }, pseudoButtons), /*#__PURE__*/_react.default.createElement(_SliderButton.StyledMotionSliderButtonThumb, {
+  }, pseudoButtons), /*#__PURE__*/_react2.default.createElement(_SliderButton.StyledMotionSliderButtonThumb, {
     ref: scope,
     drag: isDisabled ? false : 'x',
     dragElastic: 0,
@@ -287,12 +319,18 @@ const SliderButton = ({
     $width: itemWidth,
     onDragEnd: handleDragEnd,
     onDragStart: handleDragStart,
-    onClick: () => handleClick(currentId, currentIndex)
-  }), /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonWrapper, {
+    onClick: () => handleClick(currentId, currentIndex),
+    style: {
+      backgroundColor: thumbBackgroundColor
+    }
+  }), /*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButtonWrapper, {
     $isDisabled: isDisabled,
     $width: !isSliderBigger ? dragRange.right + itemWidth : dragRange.right,
-    ref: sliderButtonWrapperRef
-  }, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonButtonsWrapper, null, buttons)))), [buttons, currentId, currentIndex, dragRange, handleClick, handleDragEnd, handleDragStart, isDisabled, isSliderBigger, itemWidth, pseudoButtons, scope]);
+    ref: sliderButtonWrapperRef,
+    style: {
+      backgroundColor
+    }
+  }, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, null, /*#__PURE__*/_react2.default.createElement(_SliderButton.StyledSliderButtonButtonsWrapper, null, buttons)))), [backgroundColor, buttons, currentId, currentIndex, dragRange, handleClick, handleDragEnd, handleDragStart, isDisabled, isSliderBigger, itemWidth, pseudoButtons, scope, thumbBackgroundColor]);
 };
 SliderButton.displayName = 'SliderButton';
 var _default = exports.default = SliderButton;

package/lib/cjs/components/slider-button/SliderButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderButton.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_useElementSize","_calculate","_sliderButton","_Icon","_interopRequireDefault","_Popup","_SliderButton","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SliderButton","selectedButtonId","isDisabled","items","onChange","dragRange","setDragRange","useState","left","right","shownItemsCount","setShownItemsCount","length","sliderSize","setSliderSize","width","currentId","setCurrentId","currentPopupId","setCurrentPopupId","currentIndex","setCurrentIndex","sliderButtonRef","useRef","sliderButtonWrapperRef","popupRef","scope","animate","useAnimate","initialItemWidth","useMemo","calculateBiggestWidth","elementSize","useElementSize","useEffect","setPopupId","useCallback","selectedId","ids","slice","map","id","newId","find","isSliderBigger","Math","floor","maxShownItemsCount","totalWidth","count","visibleItems","currentMaxWidth","itemWidth","sliderWidth","itemCount","animation","x","current","type","duration","setItemPosition","index","findIndex","handleClick","show","hide","buttons","newItems","otherItems","elements","text","createElement","StyledSliderButtonItem","$width","key","onClick","popupContent","StyledSliderButtonPopupContentItem","$isSelected","push","ref","content","StyledSliderButtonPopupContent","icons","color","pseudoButtons","snapPoints","points","handleDragStart","setRefreshScrollEnabled","handleDragEnd","position","getThumbPosition","middle","scrollLeft","getNearestPoint","nearestPoint","nearestIndex","_items$nearestIndex","StyledSliderButton","$isDisabled","StyledSliderButtonButtonsWrapper","$isInvisible","StyledMotionSliderButtonThumb","drag","dragElastic","dragConstraints","onDragEnd","onDragStart","StyledSliderButtonWrapper","AnimatePresence","displayName","_default","exports"],"sources":["../../../../src/components/slider-button/SliderButton.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport { AnimatePresence, useAnimate } from 'framer-motion';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { PopupRef } from '../../types/popup';\nimport type { SliderButtonItem } from '../../types/slider-button';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\nimport Icon from '../icon/Icon';\nimport Popup from '../popup/Popup';\nimport {\n    StyledMotionSliderButtonThumb,\n    StyledSliderButton,\n    StyledSliderButtonButtonsWrapper,\n    StyledSliderButtonItem,\n    StyledSliderButtonPopupContent,\n    StyledSliderButtonPopupContentItem,\n    StyledSliderButtonWrapper,\n} from './SliderButton.styles';\n\nexport type SliderButtonProps = {\n    /**\n     * Whether the button is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when a button is selected.\n     * @param id\n     */\n    onChange?: (id: string) => void;\n    /**\n     * The buttons that are slidable.\n     */\n    items: SliderButtonItem[];\n    /**\n     * The id of a button that should be selected.\n     */\n    selectedButtonId?: string;\n};\n\nconst SliderButton: FC<SliderButtonProps> = ({ selectedButtonId, isDisabled, items, onChange }) => {\n    const [dragRange, setDragRange] = useState({ left: 0, right: 0 });\n    const [shownItemsCount, setShownItemsCount] = useState(items.length);\n    const [sliderSize, setSliderSize] = useState({ width: 0 });\n    const [currentId, setCurrentId] = useState('');\n    const [currentPopupId, setCurrentPopupId] = useState('');\n    const [currentIndex, setCurrentIndex] = useState(0);\n\n    const sliderButtonRef = useRef<HTMLDivElement>(null);\n    const sliderButtonWrapperRef = useRef<HTMLDivElement>(null);\n    const popupRef = useRef<PopupRef>(null);\n\n    const [scope, animate] = useAnimate();\n\n    const initialItemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n    const elementSize = useElementSize(sliderButtonRef);\n\n    useEffect(() => {\n        if (elementSize) setSliderSize(elementSize);\n    }, [elementSize]);\n\n    const setPopupId = useCallback(\n        (selectedId: string) => {\n            const ids = items.slice(shownItemsCount - 1).map(({ id }) => id);\n\n            const newId = ids.find((id) => id === selectedId);\n\n            if (newId) {\n                setCurrentId('more');\n                setCurrentPopupId(newId);\n\n                return;\n            }\n\n            setCurrentId(selectedId);\n        },\n        [items, shownItemsCount],\n    );\n\n    const isSliderBigger = useMemo(\n        () => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length - 1,\n        [initialItemWidth, items.length, sliderSize],\n    );\n\n    const maxShownItemsCount = useMemo(() => {\n        let totalWidth = 0;\n        let count = 0;\n\n        while (count < items.length) {\n            const visibleItems = items.slice(0, count + 1);\n            const currentMaxWidth = calculateBiggestWidth(visibleItems) + 8;\n\n            if (totalWidth + currentMaxWidth > sliderSize.width) break;\n\n            totalWidth += currentMaxWidth;\n            count++;\n        }\n\n        return count;\n    }, [items, sliderSize.width]);\n\n    const itemWidth = useMemo(() => {\n        const sliderWidth = sliderSize?.width || 0;\n        const itemCount = items.length || 1;\n\n        setShownItemsCount(isSliderBigger ? maxShownItemsCount : itemCount);\n\n        return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);\n    }, [isSliderBigger, items.length, maxShownItemsCount, sliderSize?.width]);\n\n    useEffect(() => {\n        if (sliderSize) {\n            const sliderWidth = itemWidth * (items.length - 1);\n\n            const count = Math.floor(sliderSize.width / itemWidth);\n\n            setDragRange({ left: 0, right: isSliderBigger ? itemWidth * count : sliderWidth });\n        }\n    }, [isSliderBigger, itemWidth, items.length, sliderSize]);\n\n    const animation = useCallback(\n        async (x: number) => {\n            await animate(\n                scope.current,\n                { x },\n                {\n                    type: 'tween',\n                    duration: 0.2,\n                },\n            );\n        },\n        [animate, scope],\n    );\n\n    const setItemPosition = useCallback(\n        (index: number) => {\n            setCurrentIndex(index);\n\n            void animation(itemWidth * index);\n        },\n        [animation, itemWidth],\n    );\n\n    useEffect(() => {\n        if (typeof selectedButtonId === 'string') {\n            let index = items.findIndex(({ id }) => id === selectedButtonId);\n\n            setCurrentId(selectedButtonId);\n\n            setPopupId(selectedButtonId);\n\n            if (items.length > shownItemsCount && index > shownItemsCount - 1) {\n                index = shownItemsCount - 1;\n            }\n\n            if (index >= 0) {\n                setItemPosition(index);\n            }\n        }\n    }, [\n        animation,\n        dragRange.right,\n        isSliderBigger,\n        itemWidth,\n        items,\n        selectedButtonId,\n        setItemPosition,\n        setPopupId,\n        shownItemsCount,\n    ]);\n\n    const handleClick = useCallback(\n        (id: string, index: number) => {\n            if (isDisabled) {\n                return;\n            }\n\n            setPopupId(id);\n\n            if (typeof onChange === 'function' && id !== 'more') {\n                onChange(id);\n            }\n\n            if (popupRef.current) {\n                if (id === 'more') {\n                    popupRef.current.show();\n                } else {\n                    popupRef.current.hide();\n                }\n            }\n\n            setItemPosition(index);\n        },\n        [isDisabled, onChange, setItemPosition, setPopupId],\n    );\n\n    const buttons = useMemo(() => {\n        if (items.length > shownItemsCount) {\n            const newItems = items.slice(0, shownItemsCount - 1);\n            const otherItems = items.slice(shownItemsCount - 1);\n\n            const elements = newItems.map(({ id, text }, index) => (\n                <StyledSliderButtonItem\n                    $width={itemWidth}\n                    key={`slider-button-${id}`}\n                    onClick={() => handleClick(id, index)}\n                >\n                    {text}\n                </StyledSliderButtonItem>\n            ));\n\n            const popupContent = otherItems.map(({ id, text }) => (\n                <StyledSliderButtonPopupContentItem\n                    key={`slider-button-${id}`}\n                    onClick={() => handleClick(id, newItems.length)}\n                    $isSelected={id === currentPopupId}\n                >\n                    {text}\n                </StyledSliderButtonPopupContentItem>\n            ));\n\n            const id = 'more';\n\n            elements.push(\n                <StyledSliderButtonItem $width={itemWidth} key={`slider-button-${id}`}>\n                    <Popup\n                        ref={popupRef}\n                        content={\n                            <StyledSliderButtonPopupContent>\n                                {popupContent}\n                            </StyledSliderButtonPopupContent>\n                        }\n                    >\n                        <Icon icons={['fa fa-ellipsis']} color=\"white\" />\n                    </Popup>\n                </StyledSliderButtonItem>,\n            );\n\n            return elements;\n        }\n        return items.map(({ id, text }) => (\n            <StyledSliderButtonItem $width={itemWidth} key={`slider-button-${id}`}>\n                {text}\n            </StyledSliderButtonItem>\n        ));\n    }, [currentPopupId, handleClick, itemWidth, items, shownItemsCount]);\n\n    const pseudoButtons = useMemo(() => {\n        if (items.length > shownItemsCount) {\n            const newItems = items.slice(0, shownItemsCount - 1);\n\n            const elements = newItems.map(({ id, text }, index) => (\n                <StyledSliderButtonItem\n                    $width={itemWidth}\n                    key={`pseudo-slider-button-${id}`}\n                    onClick={() => handleClick(id, index)}\n                >\n                    {text}\n                </StyledSliderButtonItem>\n            ));\n\n            const id = 'more';\n\n            elements.push(\n                <StyledSliderButtonItem\n                    $width={itemWidth}\n                    key={`pseudo-slider-button-${id}`}\n                    onClick={() => handleClick(id, newItems.length)}\n                >\n                    <Icon icons={['fa fa-ellipsis']} />\n                </StyledSliderButtonItem>,\n            );\n\n            return elements;\n        }\n        return items.map(({ id, text }, index) => (\n            <StyledSliderButtonItem\n                $width={itemWidth}\n                key={`pseudo-slider-button-${id}`}\n                onClick={() => handleClick(id, index)}\n            >\n                {text}\n            </StyledSliderButtonItem>\n        ));\n    }, [handleClick, itemWidth, items, shownItemsCount]);\n\n    /**\n     * Creates an array with the snap points relative to the width of the items\n     */\n    const snapPoints = useMemo(() => {\n        const points = [0];\n\n        for (let i = 1; i < items.length; i++) {\n            points.push(itemWidth * i);\n        }\n\n        return points;\n    }, [itemWidth, items.length]);\n\n    const handleDragStart = useCallback(() => {\n        void setRefreshScrollEnabled(false);\n    }, []);\n\n    const handleDragEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        const position = getThumbPosition({ scope, itemWidth });\n\n        if (!position) {\n            return;\n        }\n\n        const { middle, left } = position;\n\n        let scrollLeft = 0;\n\n        if (sliderButtonWrapperRef.current) {\n            scrollLeft = sliderButtonWrapperRef.current.scrollLeft;\n\n            sliderButtonWrapperRef.current.scrollLeft = getNearestPoint({\n                snapPoints,\n                position: middle,\n                scrollLeft: scrollLeft - left,\n            }).nearestPoint;\n        }\n\n        const { nearestIndex } = getNearestPoint({\n            snapPoints,\n            position: middle,\n            scrollLeft,\n        });\n\n        const { nearestPoint } = getNearestPoint({\n            snapPoints,\n            position: middle,\n            scrollLeft: 0,\n        });\n\n        if (nearestPoint >= 0 && nearestIndex >= 0) {\n            void animation(nearestPoint);\n\n            let id;\n\n            if (nearestIndex === shownItemsCount - 1) {\n                id = 'more';\n            } else {\n                id = items[nearestIndex]?.id;\n            }\n\n            if (popupRef.current) {\n                if (id === 'more') {\n                    popupRef.current.show();\n                } else {\n                    popupRef.current.hide();\n                }\n            }\n\n            if (typeof onChange === 'function' && id && id !== 'more') {\n                onChange(id);\n            }\n        }\n    }, [animation, itemWidth, items, onChange, scope, shownItemsCount, snapPoints]);\n\n    return useMemo(\n        () => (\n            <StyledSliderButton $isDisabled={isDisabled} ref={sliderButtonRef}>\n                <StyledSliderButtonButtonsWrapper $isInvisible>\n                    {pseudoButtons}\n                </StyledSliderButtonButtonsWrapper>\n                <StyledMotionSliderButtonThumb\n                    ref={scope}\n                    drag={isDisabled ? false : 'x'}\n                    dragElastic={0}\n                    dragConstraints={\n                        isSliderBigger\n                            ? { ...dragRange, right: dragRange.right - itemWidth }\n                            : { ...dragRange }\n                    }\n                    $width={itemWidth}\n                    onDragEnd={handleDragEnd}\n                    onDragStart={handleDragStart}\n                    onClick={() => handleClick(currentId, currentIndex)}\n                />\n                <StyledSliderButtonWrapper\n                    $isDisabled={isDisabled}\n                    $width={!isSliderBigger ? dragRange.right + itemWidth : dragRange.right}\n                    ref={sliderButtonWrapperRef}\n                >\n                    <AnimatePresence>\n                        <StyledSliderButtonButtonsWrapper>\n                            {buttons}\n                        </StyledSliderButtonButtonsWrapper>\n                    </AnimatePresence>\n                </StyledSliderButtonWrapper>\n            </StyledSliderButton>\n        ),\n        [\n            buttons,\n            currentId,\n            currentIndex,\n            dragRange,\n            handleClick,\n            handleDragEnd,\n            handleDragStart,\n            isDisabled,\n            isSliderBigger,\n            itemWidth,\n            pseudoButtons,\n            scope,\n        ],\n    );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SliderButton.js","names":["_chaynsApi","require","_react","_react2","_interopRequireWildcard","_element","_calculate","_sliderButton","_Icon","_interopRequireDefault","_Popup","_SliderButton","_styledComponents","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SliderButton","isDisabled","isSecondary","items","onChange","selectedButtonId","dragRange","setDragRange","useState","left","right","shownItemsCount","setShownItemsCount","length","sliderSize","setSliderSize","width","currentId","setCurrentId","currentPopupId","setCurrentPopupId","currentIndex","setCurrentIndex","sliderButtonRef","useRef","sliderButtonWrapperRef","popupRef","scope","animate","useAnimate","theme","useTheme","initialItemWidth","useMemo","calculateBiggestWidth","elementSize","useElementSize","useEffect","setPopupId","useCallback","selectedId","ids","slice","map","id","newId","find","isSliderBigger","Math","floor","maxShownItemsCount","totalWidth","count","visibleItems","currentMaxWidth","itemWidth","sliderWidth","itemCount","animation","x","current","type","duration","setItemPosition","index","findIndex","handleClick","show","hide","backgroundColor","color","buttonBackgroundColor","buttonDesign","thumbBackgroundColor","buttons","newItems","otherItems","elements","text","createElement","StyledSliderButtonItem","$isSecondary","$width","key","onClick","popupContent","StyledSliderButtonPopupContentItem","$isSelected","push","ref","content","StyledSliderButtonPopupContent","icons","pseudoButtons","snapPoints","points","handleDragStart","setRefreshScrollEnabled","handleDragEnd","position","getThumbPosition","middle","scrollLeft","getNearestPoint","nearestPoint","nearestIndex","_items$nearestIndex","StyledSliderButton","$isDisabled","StyledSliderButtonButtonsWrapper","$isInvisible","StyledMotionSliderButtonThumb","drag","dragElastic","dragConstraints","onDragEnd","onDragStart","style","StyledSliderButtonWrapper","AnimatePresence","displayName","_default","exports"],"sources":["../../../../src/components/slider-button/SliderButton.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport { AnimatePresence, useAnimate } from 'motion/react';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useElementSize } from '../../hooks/element';\nimport { PopupRef } from '../../types/popup';\nimport type { SliderButtonItem } from '../../types/slider-button';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\nimport Icon from '../icon/Icon';\nimport Popup from '../popup/Popup';\nimport {\n    StyledMotionSliderButtonThumb,\n    StyledSliderButton,\n    StyledSliderButtonButtonsWrapper,\n    StyledSliderButtonItem,\n    StyledSliderButtonPopupContent,\n    StyledSliderButtonPopupContentItem,\n    StyledSliderButtonWrapper,\n} from './SliderButton.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport type SliderButtonProps = {\n    /**\n     * Whether the button is disabled and cannot be clicked anymore.\n     */\n    isDisabled?: boolean;\n    /**\n     * Displays the button in the secondary style.\n     */\n    isSecondary?: boolean;\n    /**\n     * The items that should be displayed in the slider button.\n     */\n    items: SliderButtonItem[];\n    /**\n     * Function to be executed when a button is selected. The id of the selected button is passed as an argument.\n     * @param id\n     */\n    onChange?: (id: string) => void;\n    /**\n     * The id of the button that should be selected.\n     */\n    selectedButtonId?: string;\n};\n\nconst SliderButton: FC<SliderButtonProps> = ({\n    isDisabled,\n    isSecondary,\n    items,\n    onChange,\n    selectedButtonId,\n}) => {\n    const [dragRange, setDragRange] = useState({ left: 0, right: 0 });\n    const [shownItemsCount, setShownItemsCount] = useState(items.length);\n    const [sliderSize, setSliderSize] = useState({ width: 0 });\n    const [currentId, setCurrentId] = useState('');\n    const [currentPopupId, setCurrentPopupId] = useState('');\n    const [currentIndex, setCurrentIndex] = useState(0);\n\n    const sliderButtonRef = useRef<HTMLDivElement>(null);\n    const sliderButtonWrapperRef = useRef<HTMLDivElement>(null);\n    const popupRef = useRef<PopupRef>(null);\n\n    const [scope, animate] = useAnimate();\n\n    const theme = useTheme() as Theme;\n\n    const initialItemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n    const elementSize = useElementSize(sliderButtonRef);\n\n    useEffect(() => {\n        if (elementSize) setSliderSize(elementSize);\n    }, [elementSize]);\n\n    const setPopupId = useCallback(\n        (selectedId: string) => {\n            const ids = items.slice(shownItemsCount - 1).map(({ id }) => id);\n\n            const newId = ids.find((id) => id === selectedId);\n\n            if (newId) {\n                setCurrentId('more');\n                setCurrentPopupId(newId);\n\n                return;\n            }\n\n            setCurrentId(selectedId);\n        },\n        [items, shownItemsCount],\n    );\n\n    const isSliderBigger = useMemo(\n        () => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length - 1,\n        [initialItemWidth, items.length, sliderSize],\n    );\n\n    const maxShownItemsCount = useMemo(() => {\n        let totalWidth = 0;\n        let count = 0;\n\n        while (count < items.length) {\n            const visibleItems = items.slice(0, count + 1);\n            const currentMaxWidth = calculateBiggestWidth(visibleItems) + 8;\n\n            if (totalWidth + currentMaxWidth > sliderSize.width) break;\n\n            totalWidth += currentMaxWidth;\n            count++;\n        }\n\n        return count;\n    }, [items, sliderSize.width]);\n\n    const itemWidth = useMemo(() => {\n        const sliderWidth = sliderSize?.width || 0;\n        const itemCount = items.length || 1;\n\n        setShownItemsCount(isSliderBigger ? maxShownItemsCount : itemCount);\n\n        return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);\n    }, [isSliderBigger, items.length, maxShownItemsCount, sliderSize?.width]);\n\n    useEffect(() => {\n        if (sliderSize) {\n            const sliderWidth = itemWidth * (items.length - 1);\n\n            const count = Math.floor(sliderSize.width / itemWidth);\n\n            setDragRange({ left: 0, right: isSliderBigger ? itemWidth * count : sliderWidth });\n        }\n    }, [isSliderBigger, itemWidth, items.length, sliderSize]);\n\n    const animation = useCallback(\n        async (x: number) => {\n            await animate(\n                scope.current,\n                { x },\n                {\n                    type: 'tween',\n                    duration: 0.2,\n                },\n            );\n        },\n        [animate, scope],\n    );\n\n    const setItemPosition = useCallback(\n        (index: number) => {\n            setCurrentIndex(index);\n\n            void animation(itemWidth * index);\n        },\n        [animation, itemWidth],\n    );\n\n    useEffect(() => {\n        if (typeof selectedButtonId === 'string') {\n            let index = items.findIndex(({ id }) => id === selectedButtonId);\n\n            setCurrentId(selectedButtonId);\n\n            setPopupId(selectedButtonId);\n\n            if (items.length > shownItemsCount && index > shownItemsCount - 1) {\n                index = shownItemsCount - 1;\n            }\n\n            if (index >= 0) {\n                setItemPosition(index);\n            }\n        }\n    }, [\n        animation,\n        dragRange.right,\n        isSliderBigger,\n        itemWidth,\n        items,\n        selectedButtonId,\n        setItemPosition,\n        setPopupId,\n        shownItemsCount,\n    ]);\n\n    const handleClick = useCallback(\n        (id: string, index: number) => {\n            if (isDisabled) {\n                return;\n            }\n\n            setPopupId(id);\n\n            if (typeof onChange === 'function' && id !== 'more') {\n                onChange(id);\n            }\n\n            if (popupRef.current) {\n                if (id === 'more') {\n                    popupRef.current.show();\n                } else {\n                    popupRef.current.hide();\n                }\n            }\n\n            setItemPosition(index);\n        },\n        [isDisabled, onChange, setItemPosition, setPopupId],\n    );\n\n    const backgroundColor = useMemo(() => {\n        let color;\n\n        if (isSecondary) {\n            color = theme['202'];\n        } else {\n            color = theme.buttonBackgroundColor ?? theme['408'];\n        }\n\n        if (theme.buttonDesign === '2') {\n            color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n        }\n\n        return color;\n    }, [isSecondary, theme]);\n\n    const thumbBackgroundColor = useMemo(() => {\n        let color;\n\n        if (isSecondary) {\n            color = theme['207'];\n        } else {\n            color = `rgba(${theme['405-rgb'] ?? ''}, 0.75)`;\n        }\n\n        if (theme.buttonDesign === '2') {\n            color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n        }\n\n        return color;\n    }, [isSecondary, theme]);\n\n    const buttons = useMemo(() => {\n        if (items.length > shownItemsCount) {\n            const newItems = items.slice(0, shownItemsCount - 1);\n            const otherItems = items.slice(shownItemsCount - 1);\n\n            const elements = newItems.map(({ id, text }, index) => (\n                <StyledSliderButtonItem\n                    $isSecondary={isSecondary}\n                    $width={itemWidth}\n                    key={`slider-button-${id}`}\n                    onClick={() => handleClick(id, index)}\n                >\n                    {text}\n                </StyledSliderButtonItem>\n            ));\n\n            const popupContent = otherItems.map(({ id, text }) => (\n                <StyledSliderButtonPopupContentItem\n                    key={`slider-button-${id}`}\n                    onClick={() => handleClick(id, newItems.length)}\n                    $isSelected={id === currentPopupId}\n                >\n                    {text}\n                </StyledSliderButtonPopupContentItem>\n            ));\n\n            const id = 'more';\n\n            elements.push(\n                <StyledSliderButtonItem\n                    $isSecondary={isSecondary}\n                    $width={itemWidth}\n                    key={`slider-button-${id}`}\n                >\n                    <Popup\n                        ref={popupRef}\n                        content={\n                            <StyledSliderButtonPopupContent>\n                                {popupContent}\n                            </StyledSliderButtonPopupContent>\n                        }\n                    >\n                        <Icon icons={['fa fa-ellipsis']} color=\"white\" />\n                    </Popup>\n                </StyledSliderButtonItem>,\n            );\n\n            return elements;\n        }\n        return items.map(({ id, text }) => (\n            <StyledSliderButtonItem\n                $isSecondary={isSecondary}\n                $width={itemWidth}\n                key={`slider-button-${id}`}\n            >\n                {text}\n            </StyledSliderButtonItem>\n        ));\n    }, [currentPopupId, handleClick, isSecondary, itemWidth, items, shownItemsCount]);\n\n    const pseudoButtons = useMemo(() => {\n        if (items.length > shownItemsCount) {\n            const newItems = items.slice(0, shownItemsCount - 1);\n\n            const elements = newItems.map(({ id, text }, index) => (\n                <StyledSliderButtonItem\n                    $isSecondary={isSecondary}\n                    $width={itemWidth}\n                    key={`pseudo-slider-button-${id}`}\n                    onClick={() => handleClick(id, index)}\n                >\n                    {text}\n                </StyledSliderButtonItem>\n            ));\n\n            const id = 'more';\n\n            elements.push(\n                <StyledSliderButtonItem\n                    $isSecondary={isSecondary}\n                    $width={itemWidth}\n                    key={`pseudo-slider-button-${id}`}\n                    onClick={() => handleClick(id, newItems.length)}\n                >\n                    <Icon icons={['fa fa-ellipsis']} />\n                </StyledSliderButtonItem>,\n            );\n\n            return elements;\n        }\n        return items.map(({ id, text }, index) => (\n            <StyledSliderButtonItem\n                $isSecondary={isSecondary}\n                $width={itemWidth}\n                key={`pseudo-slider-button-${id}`}\n                onClick={() => handleClick(id, index)}\n            >\n                {text}\n            </StyledSliderButtonItem>\n        ));\n    }, [handleClick, isSecondary, itemWidth, items, shownItemsCount]);\n\n    /**\n     * Creates an array with the snap points relative to the width of the items\n     */\n    const snapPoints = useMemo(() => {\n        const points = [0];\n\n        for (let i = 1; i < items.length; i++) {\n            points.push(itemWidth * i);\n        }\n\n        return points;\n    }, [itemWidth, items.length]);\n\n    const handleDragStart = useCallback(() => {\n        void setRefreshScrollEnabled(false);\n    }, []);\n\n    const handleDragEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        const position = getThumbPosition({ scope, itemWidth });\n\n        if (!position) {\n            return;\n        }\n\n        const { middle, left } = position;\n\n        let scrollLeft = 0;\n\n        if (sliderButtonWrapperRef.current) {\n            scrollLeft = sliderButtonWrapperRef.current.scrollLeft;\n\n            sliderButtonWrapperRef.current.scrollLeft = getNearestPoint({\n                snapPoints,\n                position: middle,\n                scrollLeft: scrollLeft - left,\n            }).nearestPoint;\n        }\n\n        const { nearestIndex } = getNearestPoint({\n            snapPoints,\n            position: middle,\n            scrollLeft,\n        });\n\n        const { nearestPoint } = getNearestPoint({\n            snapPoints,\n            position: middle,\n            scrollLeft: 0,\n        });\n\n        if (nearestPoint >= 0 && nearestIndex >= 0) {\n            void animation(nearestPoint);\n\n            let id;\n\n            if (nearestIndex === shownItemsCount - 1) {\n                id = 'more';\n            } else {\n                id = items[nearestIndex]?.id;\n            }\n\n            if (popupRef.current) {\n                if (id === 'more') {\n                    popupRef.current.show();\n                } else {\n                    popupRef.current.hide();\n                }\n            }\n\n            if (typeof onChange === 'function' && id && id !== 'more') {\n                onChange(id);\n            }\n        }\n    }, [animation, itemWidth, items, onChange, scope, shownItemsCount, snapPoints]);\n\n    return useMemo(\n        () => (\n            <StyledSliderButton $isDisabled={isDisabled} ref={sliderButtonRef}>\n                <StyledSliderButtonButtonsWrapper $isInvisible>\n                    {pseudoButtons}\n                </StyledSliderButtonButtonsWrapper>\n                <StyledMotionSliderButtonThumb\n                    ref={scope}\n                    drag={isDisabled ? false : 'x'}\n                    dragElastic={0}\n                    dragConstraints={\n                        isSliderBigger\n                            ? { ...dragRange, right: dragRange.right - itemWidth }\n                            : { ...dragRange }\n                    }\n                    $width={itemWidth}\n                    onDragEnd={handleDragEnd}\n                    onDragStart={handleDragStart}\n                    onClick={() => handleClick(currentId, currentIndex)}\n                    style={{ backgroundColor: thumbBackgroundColor }}\n                />\n                <StyledSliderButtonWrapper\n                    $isDisabled={isDisabled}\n                    $width={!isSliderBigger ? dragRange.right + itemWidth : dragRange.right}\n                    ref={sliderButtonWrapperRef}\n                    style={{ backgroundColor }}\n                >\n                    <AnimatePresence>\n                        <StyledSliderButtonButtonsWrapper>\n                            {buttons}\n                        </StyledSliderButtonButtonsWrapper>\n                    </AnimatePresence>\n                </StyledSliderButtonWrapper>\n            </StyledSliderButton>\n        ),\n        [\n            backgroundColor,\n            buttons,\n            currentId,\n            currentIndex,\n            dragRange,\n            handleClick,\n            handleDragEnd,\n            handleDragStart,\n            isDisabled,\n            isSliderBigger,\n            itemWidth,\n            pseudoButtons,\n            scope,\n            thumbBackgroundColor,\n        ],\n    );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/slider-button/SliderButton.styles.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledSliderButtonWrapper = exports.StyledSliderButtonPopupContentItem = exports.StyledSliderButtonPopupContent = exports.StyledSliderButtonItem = exports.StyledSliderButtonButtonsWrapper = exports.StyledSliderButton = exports.StyledMotionSliderButtonThumb = void 0;
-var _framerMotion = require("framer-motion");
+var _react = require("motion/react");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledSliderButton = exports.StyledSliderButton = _styledComponents.default.div`
@@ -17,9 +17,6 @@ const StyledSliderButton = exports.StyledSliderButton = _styledComponents.defaul
 `;
 const StyledSliderButtonWrapper = exports.StyledSliderButtonWrapper = _styledComponents.default.div`
     align-items: center;
-    background-color: ${({
-  theme
-}) => theme['408']};
     border-radius: 3px;
     border: none;
     color: white;
@@ -65,7 +62,10 @@ const StyledSliderButtonItem = exports.StyledSliderButtonItem = _styledComponent
     display: flex;
     white-space: nowrap;
     justify-content: center;
-    color: white;
+    color: ${({
+  $isSecondary,
+  theme
+}) => $isSecondary ? theme.text : theme.buttonColor ?? 'white'};
 `;
 const StyledSliderButtonPopupContent = exports.StyledSliderButtonPopupContent = _styledComponents.default.div`
     display: flex;
@@ -96,12 +96,9 @@ const StyledSliderButtonButtonsWrapper = exports.StyledSliderButtonButtonsWrappe
   $isInvisible
 }) => $isInvisible ? 'auto' : 'none'};
 `;
-const StyledMotionSliderButtonThumb = exports.StyledMotionSliderButtonThumb = (0, _styledComponents.default)(_framerMotion.motion.div)`
+const StyledMotionSliderButtonThumb = exports.StyledMotionSliderButtonThumb = (0, _styledComponents.default)(_react.motion.div)`
     font-size: 110%;
     font-family: 'Roboto Medium', serif;
-    background-color: ${({
-  theme
-}) => theme['405']};
     opacity: 1;
     width: ${({
   $width