@chayns-components/core 5.0.0-beta.866 → 5.0.0-beta.868

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

@@ -30,6 +30,9 @@ const SliderButton = ({
   const [sliderSize, setSliderSize] = (0, _react.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);
@@ -39,14 +42,37 @@ const SliderButton = ({
   (0, _react.useEffect)(() => {
     if (elementSize) setSliderSize(elementSize);
   }, [elementSize]);
+  const setPopupId = (0, _react.useCallback)(selectedId => {
+    const ids = items.slice(shownItemsCount - 1).map(({
+      id
+    }) => id);
+    const newId = ids.find(id => id === selectedId);
+    if (newId) {
+      setCurrentId('more');
+      setCurrentPopupId(newId);
+      return;
+    }
+    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)(() => {
+    let totalWidth = 0;
+    let count = 0;
+    while (count < items.length) {
+      const visibleItems = items.slice(0, count + 1);
+      const currentMaxWidth = (0, _calculate.calculateBiggestWidth)(visibleItems) + 8;
+      if (totalWidth + currentMaxWidth > sliderSize.width) break;
+      totalWidth += currentMaxWidth;
+      count++;
+    }
+    return count;
+  }, [items, sliderSize.width]);
   const itemWidth = (0, _react.useMemo)(() => {
     const sliderWidth = (sliderSize === null || sliderSize === void 0 ? void 0 : sliderSize.width) || 0;
-    const maxShownItemsCount = Math.floor(sliderWidth / initialItemWidth);
     const itemCount = items.length || 1;
     setShownItemsCount(isSliderBigger ? maxShownItemsCount : itemCount);
     return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);
-  }, [initialItemWidth, isSliderBigger, items.length, sliderSize === null || sliderSize === void 0 ? void 0 : sliderSize.width]);
+  }, [isSliderBigger, items.length, maxShownItemsCount, sliderSize === null || sliderSize === void 0 ? void 0 : sliderSize.width]);
   (0, _react.useEffect)(() => {
     if (sliderSize) {
       const sliderWidth = itemWidth * (items.length - 1);
@@ -66,6 +92,7 @@ const SliderButton = ({
     });
   }, [animate, scope]);
   const setItemPosition = (0, _react.useCallback)(index => {
+    setCurrentIndex(index);
     void animation(itemWidth * index);
   }, [animation, itemWidth]);
   (0, _react.useEffect)(() => {
@@ -73,6 +100,8 @@ const SliderButton = ({
       let index = items.findIndex(({
         id
       }) => id === selectedButtonId);
+      setCurrentId(selectedButtonId);
+      setPopupId(selectedButtonId);
       if (items.length > shownItemsCount && index > shownItemsCount - 1) {
         index = shownItemsCount - 1;
       }
@@ -80,11 +109,12 @@ const SliderButton = ({
         setItemPosition(index);
       }
     }
-  }, [animation, dragRange.right, isSliderBigger, itemWidth, items, selectedButtonId, setItemPosition, shownItemsCount]);
+  }, [animation, dragRange.right, isSliderBigger, itemWidth, items, selectedButtonId, setItemPosition, setPopupId, shownItemsCount]);
   const handleClick = (0, _react.useCallback)((id, index) => {
     if (isDisabled) {
       return;
     }
+    setPopupId(id);
     if (typeof onChange === 'function' && id !== 'more') {
       onChange(id);
     }
@@ -96,7 +126,7 @@ const SliderButton = ({
       }
     }
     setItemPosition(index);
-  }, [isDisabled, onChange, setItemPosition]);
+  }, [isDisabled, onChange, setItemPosition, setPopupId]);
   const buttons = (0, _react.useMemo)(() => {
     if (items.length > shownItemsCount) {
       const newItems = items.slice(0, shownItemsCount - 1);
@@ -114,7 +144,8 @@ const SliderButton = ({
         text
       }) => /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonPopupContentItem, {
         key: `slider-button-${id}`,
-        onClick: () => handleClick(id, newItems.length)
+        onClick: () => handleClick(id, newItems.length),
+        $isSelected: id === currentPopupId
       }, text));
       const id = 'more';
       elements.push(/*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonItem, {
@@ -136,7 +167,7 @@ const SliderButton = ({
       $width: itemWidth,
       key: `slider-button-${id}`
     }, text));
-  }, [handleClick, itemWidth, items, shownItemsCount]);
+  }, [currentPopupId, handleClick, itemWidth, items, shownItemsCount]);
   const pseudoButtons = (0, _react.useMemo)(() => {
     if (items.length > shownItemsCount) {
       const newItems = items.slice(0, shownItemsCount - 1);
@@ -178,6 +209,9 @@ const SliderButton = ({
     }
     return points;
   }, [itemWidth, items.length]);
+  const handleDragStart = (0, _react.useCallback)(() => {
+    void (0, _chaynsApi.setRefreshScrollEnabled)(false);
+  }, []);
   const handleDragEnd = (0, _react.useCallback)(() => {
     void (0, _chaynsApi.setRefreshScrollEnabled)(true);
     const position = (0, _sliderButton.getThumbPosition)({
@@ -251,12 +285,14 @@ const SliderButton = ({
       ...dragRange
     },
     $width: itemWidth,
-    onDragEnd: handleDragEnd
+    onDragEnd: handleDragEnd,
+    onDragStart: handleDragStart,
+    onClick: () => handleClick(currentId, currentIndex)
   }), /*#__PURE__*/_react.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, dragRange, handleDragEnd, isDisabled, isSliderBigger, itemWidth, pseudoButtons, scope]);
+  }, /*#__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]);
 };
 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","sliderButtonRef","useRef","sliderButtonWrapperRef","popupRef","scope","animate","useAnimate","initialItemWidth","useMemo","calculateBiggestWidth","elementSize","useElementSize","useEffect","isSliderBigger","Math","floor","itemWidth","sliderWidth","maxShownItemsCount","itemCount","count","animation","useCallback","x","current","type","duration","setItemPosition","index","findIndex","id","handleClick","show","hide","buttons","newItems","slice","otherItems","elements","map","text","createElement","StyledSliderButtonItem","$width","key","onClick","popupContent","StyledSliderButtonPopupContentItem","push","ref","content","StyledSliderButtonPopupContent","icons","color","pseudoButtons","snapPoints","points","handleDragEnd","setRefreshScrollEnabled","position","getThumbPosition","middle","scrollLeft","getNearestPoint","nearestPoint","nearestIndex","_items$nearestIndex","StyledSliderButton","$isDisabled","StyledSliderButtonButtonsWrapper","$isInvisible","StyledMotionSliderButtonThumb","drag","dragElastic","dragConstraints","onDragEnd","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\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 isSliderBigger = useMemo(\n        () => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length - 1,\n        [initialItemWidth, items.length, sliderSize],\n    );\n\n    const itemWidth = useMemo(() => {\n        const sliderWidth = sliderSize?.width || 0;\n        const maxShownItemsCount = Math.floor(sliderWidth / initialItemWidth);\n        const itemCount = items.length || 1;\n\n        setShownItemsCount(isSliderBigger ? maxShownItemsCount : itemCount);\n\n        return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);\n    }, [initialItemWidth, isSliderBigger, items.length, 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            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            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        shownItemsCount,\n    ]);\n\n    const handleClick = useCallback(\n        (id: string, index: number) => {\n            if (isDisabled) {\n                return;\n            }\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],\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                >\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    }, [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 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                />\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            dragRange,\n            handleDragEnd,\n            isDisabled,\n            isSliderBigger,\n            itemWidth,\n            pseudoButtons,\n            scope,\n        ],\n    );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAC,uBAAA,CAAAH,OAAA;AACA,IAAAI,eAAA,GAAAJ,OAAA;AAGA,IAAAK,UAAA,GAAAL,OAAA;AACA,IAAAM,aAAA,GAAAN,OAAA;AACA,IAAAO,KAAA,GAAAC,sBAAA,CAAAR,OAAA;AACA,IAAAS,MAAA,GAAAD,sBAAA,CAAAR,OAAA;AACA,IAAAU,aAAA,GAAAV,OAAA;AAQ+B,SAAAQ,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AAsB/B,MAAMW,YAAmC,GAAGA,CAAC;EAAEC,gBAAgB;EAAEC,UAAU;EAAEC,KAAK;EAAEC;AAAS,CAAC,KAAK;EAC/F,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAC,eAAQ,EAAC;IAAEC,IAAI,EAAE,CAAC;IAAEC,KAAK,EAAE;EAAE,CAAC,CAAC;EACjE,MAAM,CAACC,eAAe,EAAEC,kBAAkB,CAAC,GAAG,IAAAJ,eAAQ,EAACJ,KAAK,CAACS,MAAM,CAAC;EACpE,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAP,eAAQ,EAAC;IAAEQ,KAAK,EAAE;EAAE,CAAC,CAAC;EAE1D,MAAMC,eAAe,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EACpD,MAAMC,sBAAsB,GAAG,IAAAD,aAAM,EAAiB,IAAI,CAAC;EAC3D,MAAME,QAAQ,GAAG,IAAAF,aAAM,EAAW,IAAI,CAAC;EAEvC,MAAM,CAACG,KAAK,EAAEC,OAAO,CAAC,GAAG,IAAAC,wBAAU,EAAC,CAAC;EAErC,MAAMC,gBAAgB,GAAG,IAAAC,cAAO,EAAC,MAAM,IAAAC,gCAAqB,EAACtB,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAC7E,MAAMuB,WAAW,GAAG,IAAAC,8BAAc,EAACX,eAAe,CAAC;EAEnD,IAAAY,gBAAS,EAAC,MAAM;IACZ,IAAIF,WAAW,EAAEZ,aAAa,CAACY,WAAW,CAAC;EAC/C,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,MAAMG,cAAc,GAAG,IAAAL,cAAO,EAC1B,MAAMX,UAAU,IAAIiB,IAAI,CAACC,KAAK,CAAClB,UAAU,CAACE,KAAK,GAAGQ,gBAAgB,CAAC,GAAGpB,KAAK,CAACS,MAAM,GAAG,CAAC,EACtF,CAACW,gBAAgB,EAAEpB,KAAK,CAACS,MAAM,EAAEC,UAAU,CAC/C,CAAC;EAED,MAAMmB,SAAS,GAAG,IAAAR,cAAO,EAAC,MAAM;IAC5B,MAAMS,WAAW,GAAG,CAAApB,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEE,KAAK,KAAI,CAAC;IAC1C,MAAMmB,kBAAkB,GAAGJ,IAAI,CAACC,KAAK,CAACE,WAAW,GAAGV,gBAAgB,CAAC;IACrE,MAAMY,SAAS,GAAGhC,KAAK,CAACS,MAAM,IAAI,CAAC;IAEnCD,kBAAkB,CAACkB,cAAc,GAAGK,kBAAkB,GAAGC,SAAS,CAAC;IAEnE,OAAOF,WAAW,IAAIJ,cAAc,GAAGK,kBAAkB,GAAGC,SAAS,CAAC;EAC1E,CAAC,EAAE,CAACZ,gBAAgB,EAAEM,cAAc,EAAE1B,KAAK,CAACS,MAAM,EAAEC,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEE,KAAK,CAAC,CAAC;EAEvE,IAAAa,gBAAS,EAAC,MAAM;IACZ,IAAIf,UAAU,EAAE;MACZ,MAAMoB,WAAW,GAAGD,SAAS,IAAI7B,KAAK,CAACS,MAAM,GAAG,CAAC,CAAC;MAElD,MAAMwB,KAAK,GAAGN,IAAI,CAACC,KAAK,CAAClB,UAAU,CAACE,KAAK,GAAGiB,SAAS,CAAC;MAEtD1B,YAAY,CAAC;QAAEE,IAAI,EAAE,CAAC;QAAEC,KAAK,EAAEoB,cAAc,GAAGG,SAAS,GAAGI,KAAK,GAAGH;MAAY,CAAC,CAAC;IACtF;EACJ,CAAC,EAAE,CAACJ,cAAc,EAAEG,SAAS,EAAE7B,KAAK,CAACS,MAAM,EAAEC,UAAU,CAAC,CAAC;EAEzD,MAAMwB,SAAS,GAAG,IAAAC,kBAAW,EACzB,MAAOC,CAAS,IAAK;IACjB,MAAMlB,OAAO,CACTD,KAAK,CAACoB,OAAO,EACb;MAAED;IAAE,CAAC,EACL;MACIE,IAAI,EAAE,OAAO;MACbC,QAAQ,EAAE;IACd,CACJ,CAAC;EACL,CAAC,EACD,CAACrB,OAAO,EAAED,KAAK,CACnB,CAAC;EAED,MAAMuB,eAAe,GAAG,IAAAL,kBAAW,EAC9BM,KAAa,IAAK;IACf,KAAKP,SAAS,CAACL,SAAS,GAAGY,KAAK,CAAC;EACrC,CAAC,EACD,CAACP,SAAS,EAAEL,SAAS,CACzB,CAAC;EAED,IAAAJ,gBAAS,EAAC,MAAM;IACZ,IAAI,OAAO3B,gBAAgB,KAAK,QAAQ,EAAE;MACtC,IAAI2C,KAAK,GAAGzC,KAAK,CAAC0C,SAAS,CAAC,CAAC;QAAEC;MAAG,CAAC,KAAKA,EAAE,KAAK7C,gBAAgB,CAAC;MAEhE,IAAIE,KAAK,CAACS,MAAM,GAAGF,eAAe,IAAIkC,KAAK,GAAGlC,eAAe,GAAG,CAAC,EAAE;QAC/DkC,KAAK,GAAGlC,eAAe,GAAG,CAAC;MAC/B;MAEA,IAAIkC,KAAK,IAAI,CAAC,EAAE;QACZD,eAAe,CAACC,KAAK,CAAC;MAC1B;IACJ;EACJ,CAAC,EAAE,CACCP,SAAS,EACThC,SAAS,CAACI,KAAK,EACfoB,cAAc,EACdG,SAAS,EACT7B,KAAK,EACLF,gBAAgB,EAChB0C,eAAe,EACfjC,eAAe,CAClB,CAAC;EAEF,MAAMqC,WAAW,GAAG,IAAAT,kBAAW,EAC3B,CAACQ,EAAU,EAAEF,KAAa,KAAK;IAC3B,IAAI1C,UAAU,EAAE;MACZ;IACJ;IAEA,IAAI,OAAOE,QAAQ,KAAK,UAAU,IAAI0C,EAAE,KAAK,MAAM,EAAE;MACjD1C,QAAQ,CAAC0C,EAAE,CAAC;IAChB;IAEA,IAAI3B,QAAQ,CAACqB,OAAO,EAAE;MAClB,IAAIM,EAAE,KAAK,MAAM,EAAE;QACf3B,QAAQ,CAACqB,OAAO,CAACQ,IAAI,CAAC,CAAC;MAC3B,CAAC,MAAM;QACH7B,QAAQ,CAACqB,OAAO,CAACS,IAAI,CAAC,CAAC;MAC3B;IACJ;IAEAN,eAAe,CAACC,KAAK,CAAC;EAC1B,CAAC,EACD,CAAC1C,UAAU,EAAEE,QAAQ,EAAEuC,eAAe,CAC1C,CAAC;EAED,MAAMO,OAAO,GAAG,IAAA1B,cAAO,EAAC,MAAM;IAC1B,IAAIrB,KAAK,CAACS,MAAM,GAAGF,eAAe,EAAE;MAChC,MAAMyC,QAAQ,GAAGhD,KAAK,CAACiD,KAAK,CAAC,CAAC,EAAE1C,eAAe,GAAG,CAAC,CAAC;MACpD,MAAM2C,UAAU,GAAGlD,KAAK,CAACiD,KAAK,CAAC1C,eAAe,GAAG,CAAC,CAAC;MAEnD,MAAM4C,QAAQ,GAAGH,QAAQ,CAACI,GAAG,CAAC,CAAC;QAAET,EAAE;QAAEU;MAAK,CAAC,EAAEZ,KAAK,kBAC9CzE,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAAC9E,aAAA,CAAA+E,sBAAsB;QACnBC,MAAM,EAAE3B,SAAU;QAClB4B,GAAG,EAAE,iBAAiBd,EAAE,EAAG;QAC3Be,OAAO,EAAEA,CAAA,KAAMd,WAAW,CAACD,EAAE,EAAEF,KAAK;MAAE,GAErCY,IACmB,CAC3B,CAAC;MAEF,MAAMM,YAAY,GAAGT,UAAU,CAACE,GAAG,CAAC,CAAC;QAAET,EAAE;QAAEU;MAAK,CAAC,kBAC7CrF,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAAC9E,aAAA,CAAAoF,kCAAkC;QAC/BH,GAAG,EAAE,iBAAiBd,EAAE,EAAG;QAC3Be,OAAO,EAAEA,CAAA,KAAMd,WAAW,CAACD,EAAE,EAAEK,QAAQ,CAACvC,MAAM;MAAE,GAE/C4C,IAC+B,CACvC,CAAC;MAEF,MAAMV,EAAE,GAAG,MAAM;MAEjBQ,QAAQ,CAACU,IAAI,cACT7F,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAAC9E,aAAA,CAAA+E,sBAAsB;QAACC,MAAM,EAAE3B,SAAU;QAAC4B,GAAG,EAAE,iBAAiBd,EAAE;MAAG,gBAClE3E,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAAC/E,MAAA,CAAAI,OAAK;QACFmF,GAAG,EAAE9C,QAAS;QACd+C,OAAO,eACH/F,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAAC9E,aAAA,CAAAwF,8BAA8B,QAC1BL,YAC2B;MACnC,gBAED3F,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAACjF,KAAA,CAAAM,OAAI;QAACsF,KAAK,EAAE,CAAC,gBAAgB,CAAE;QAACC,KAAK,EAAC;MAAO,CAAE,CAC7C,CACa,CAC5B,CAAC;MAED,OAAOf,QAAQ;IACnB;IACA,OAAOnD,KAAK,CAACoD,GAAG,CAAC,CAAC;MAAET,EAAE;MAAEU;IAAK,CAAC,kBAC1BrF,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAAC9E,aAAA,CAAA+E,sBAAsB;MAACC,MAAM,EAAE3B,SAAU;MAAC4B,GAAG,EAAE,iBAAiBd,EAAE;IAAG,GACjEU,IACmB,CAC3B,CAAC;EACN,CAAC,EAAE,CAACT,WAAW,EAAEf,SAAS,EAAE7B,KAAK,EAAEO,eAAe,CAAC,CAAC;EAEpD,MAAM4D,aAAa,GAAG,IAAA9C,cAAO,EAAC,MAAM;IAChC,IAAIrB,KAAK,CAACS,MAAM,GAAGF,eAAe,EAAE;MAChC,MAAMyC,QAAQ,GAAGhD,KAAK,CAACiD,KAAK,CAAC,CAAC,EAAE1C,eAAe,GAAG,CAAC,CAAC;MAEpD,MAAM4C,QAAQ,GAAGH,QAAQ,CAACI,GAAG,CAAC,CAAC;QAAET,EAAE;QAAEU;MAAK,CAAC,EAAEZ,KAAK,kBAC9CzE,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAAC9E,aAAA,CAAA+E,sBAAsB;QACnBC,MAAM,EAAE3B,SAAU;QAClB4B,GAAG,EAAE,wBAAwBd,EAAE,EAAG;QAClCe,OAAO,EAAEA,CAAA,KAAMd,WAAW,CAACD,EAAE,EAAEF,KAAK;MAAE,GAErCY,IACmB,CAC3B,CAAC;MAEF,MAAMV,EAAE,GAAG,MAAM;MAEjBQ,QAAQ,CAACU,IAAI,cACT7F,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAAC9E,aAAA,CAAA+E,sBAAsB;QACnBC,MAAM,EAAE3B,SAAU;QAClB4B,GAAG,EAAE,wBAAwBd,EAAE,EAAG;QAClCe,OAAO,EAAEA,CAAA,KAAMd,WAAW,CAACD,EAAE,EAAEK,QAAQ,CAACvC,MAAM;MAAE,gBAEhDzC,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAACjF,KAAA,CAAAM,OAAI;QAACsF,KAAK,EAAE,CAAC,gBAAgB;MAAE,CAAE,CACd,CAC5B,CAAC;MAED,OAAOd,QAAQ;IACnB;IACA,OAAOnD,KAAK,CAACoD,GAAG,CAAC,CAAC;MAAET,EAAE;MAAEU;IAAK,CAAC,EAAEZ,KAAK,kBACjCzE,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAAC9E,aAAA,CAAA+E,sBAAsB;MACnBC,MAAM,EAAE3B,SAAU;MAClB4B,GAAG,EAAE,wBAAwBd,EAAE,EAAG;MAClCe,OAAO,EAAEA,CAAA,KAAMd,WAAW,CAACD,EAAE,EAAEF,KAAK;IAAE,GAErCY,IACmB,CAC3B,CAAC;EACN,CAAC,EAAE,CAACT,WAAW,EAAEf,SAAS,EAAE7B,KAAK,EAAEO,eAAe,CAAC,CAAC;;EAEpD;AACJ;AACA;EACI,MAAM6D,UAAU,GAAG,IAAA/C,cAAO,EAAC,MAAM;IAC7B,MAAMgD,MAAM,GAAG,CAAC,CAAC,CAAC;IAElB,KAAK,IAAI1E,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGK,KAAK,CAACS,MAAM,EAAEd,CAAC,EAAE,EAAE;MACnC0E,MAAM,CAACR,IAAI,CAAChC,SAAS,GAAGlC,CAAC,CAAC;IAC9B;IAEA,OAAO0E,MAAM;EACjB,CAAC,EAAE,CAACxC,SAAS,EAAE7B,KAAK,CAACS,MAAM,CAAC,CAAC;EAE7B,MAAM6D,aAAa,GAAG,IAAAnC,kBAAW,EAAC,MAAM;IACpC,KAAK,IAAAoC,kCAAuB,EAAC,IAAI,CAAC;IAElC,MAAMC,QAAQ,GAAG,IAAAC,8BAAgB,EAAC;MAAExD,KAAK;MAAEY;IAAU,CAAC,CAAC;IAEvD,IAAI,CAAC2C,QAAQ,EAAE;MACX;IACJ;IAEA,MAAM;MAAEE,MAAM;MAAErE;IAAK,CAAC,GAAGmE,QAAQ;IAEjC,IAAIG,UAAU,GAAG,CAAC;IAElB,IAAI5D,sBAAsB,CAACsB,OAAO,EAAE;MAChCsC,UAAU,GAAG5D,sBAAsB,CAACsB,OAAO,CAACsC,UAAU;MAEtD5D,sBAAsB,CAACsB,OAAO,CAACsC,UAAU,GAAG,IAAAC,6BAAe,EAAC;QACxDR,UAAU;QACVI,QAAQ,EAAEE,MAAM;QAChBC,UAAU,EAAEA,UAAU,GAAGtE;MAC7B,CAAC,CAAC,CAACwE,YAAY;IACnB;IAEA,MAAM;MAAEC;IAAa,CAAC,GAAG,IAAAF,6BAAe,EAAC;MACrCR,UAAU;MACVI,QAAQ,EAAEE,MAAM;MAChBC;IACJ,CAAC,CAAC;IAEF,MAAM;MAAEE;IAAa,CAAC,GAAG,IAAAD,6BAAe,EAAC;MACrCR,UAAU;MACVI,QAAQ,EAAEE,MAAM;MAChBC,UAAU,EAAE;IAChB,CAAC,CAAC;IAEF,IAAIE,YAAY,IAAI,CAAC,IAAIC,YAAY,IAAI,CAAC,EAAE;MACxC,KAAK5C,SAAS,CAAC2C,YAAY,CAAC;MAE5B,IAAIlC,EAAE;MAEN,IAAImC,YAAY,KAAKvE,eAAe,GAAG,CAAC,EAAE;QACtCoC,EAAE,GAAG,MAAM;MACf,CAAC,MAAM;QAAA,IAAAoC,mBAAA;QACHpC,EAAE,IAAAoC,mBAAA,GAAG/E,KAAK,CAAC8E,YAAY,CAAC,cAAAC,mBAAA,uBAAnBA,mBAAA,CAAqBpC,EAAE;MAChC;MAEA,IAAI3B,QAAQ,CAACqB,OAAO,EAAE;QAClB,IAAIM,EAAE,KAAK,MAAM,EAAE;UACf3B,QAAQ,CAACqB,OAAO,CAACQ,IAAI,CAAC,CAAC;QAC3B,CAAC,MAAM;UACH7B,QAAQ,CAACqB,OAAO,CAACS,IAAI,CAAC,CAAC;QAC3B;MACJ;MAEA,IAAI,OAAO7C,QAAQ,KAAK,UAAU,IAAI0C,EAAE,IAAIA,EAAE,KAAK,MAAM,EAAE;QACvD1C,QAAQ,CAAC0C,EAAE,CAAC;MAChB;IACJ;EACJ,CAAC,EAAE,CAACT,SAAS,EAAEL,SAAS,EAAE7B,KAAK,EAAEC,QAAQ,EAAEgB,KAAK,EAAEV,eAAe,EAAE6D,UAAU,CAAC,CAAC;EAE/E,OAAO,IAAA/C,cAAO,EACV,mBACIrD,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAAC9E,aAAA,CAAAwG,kBAAkB;IAACC,WAAW,EAAElF,UAAW;IAAC+D,GAAG,EAAEjD;EAAgB,gBAC9D7C,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAAC9E,aAAA,CAAA0G,gCAAgC;IAACC,YAAY;EAAA,GACzChB,aAC6B,CAAC,eACnCnG,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAAC9E,aAAA,CAAA4G,6BAA6B;IAC1BtB,GAAG,EAAE7C,KAAM;IACXoE,IAAI,EAAEtF,UAAU,GAAG,KAAK,GAAG,GAAI;IAC/BuF,WAAW,EAAE,CAAE;IACfC,eAAe,EACX7D,cAAc,GACR;MAAE,GAAGxB,SAAS;MAAEI,KAAK,EAAEJ,SAAS,CAACI,KAAK,GAAGuB;IAAU,CAAC,GACpD;MAAE,GAAG3B;IAAU,CACxB;IACDsD,MAAM,EAAE3B,SAAU;IAClB2D,SAAS,EAAElB;EAAc,CAC5B,CAAC,eACFtG,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAAC9E,aAAA,CAAAiH,yBAAyB;IACtBR,WAAW,EAAElF,UAAW;IACxByD,MAAM,EAAE,CAAC9B,cAAc,GAAGxB,SAAS,CAACI,KAAK,GAAGuB,SAAS,GAAG3B,SAAS,CAACI,KAAM;IACxEwD,GAAG,EAAE/C;EAAuB,gBAE5B/C,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAACvF,aAAA,CAAA2H,eAAe,qBACZ1H,MAAA,CAAAW,OAAA,CAAA2E,aAAA,CAAC9E,aAAA,CAAA0G,gCAAgC,QAC5BnC,OAC6B,CACrB,CACM,CACX,CACvB,EACD,CACIA,OAAO,EACP7C,SAAS,EACToE,aAAa,EACbvE,UAAU,EACV2B,cAAc,EACdG,SAAS,EACTsC,aAAa,EACblD,KAAK,CAEb,CAAC;AACL,CAAC;AAEDpB,YAAY,CAAC8F,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAlH,OAAA,GAE3BkB,YAAY","ignoreList":[]}
+{"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":[]}

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

@@ -69,12 +69,16 @@ const StyledSliderButtonItem = exports.StyledSliderButtonItem = _styledComponent
 const StyledSliderButtonPopupContent = exports.StyledSliderButtonPopupContent = _styledComponents.default.div`
     display: flex;
     flex-direction: column;
-    padding: 7px 12px;
 `;
 const StyledSliderButtonPopupContentItem = exports.StyledSliderButtonPopupContentItem = _styledComponents.default.div`
     font-size: 110%;
     font-family: 'Roboto Medium', serif;
     cursor: pointer;
+    background-color: ${({
+  $isSelected,
+  theme
+}) => $isSelected ? theme['secondary-102'] : undefined};
+    padding: 4px 12px;
 `;
 const StyledSliderButtonButtonsWrapper = exports.StyledSliderButtonButtonsWrapper = _styledComponents.default.div`
     position: absolute;

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

@@ -1 +1 @@
-{"version":3,"file":"SliderButton.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSliderButton","exports","styled","div","$isDisabled","StyledSliderButtonWrapper","theme","$width","StyledSliderButtonItem","StyledSliderButtonPopupContent","StyledSliderButtonPopupContentItem","StyledSliderButtonButtonsWrapper","$isInvisible","StyledMotionSliderButtonThumb","motion"],"sources":["../../../../src/components/slider-button/SliderButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSliderButtonProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledSliderButton = styled.div<StyledSliderButtonProps>`\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    width: 100%;\n    touch-action: none;\n`;\n\ntype StyledSliderButtonWrapperProps = WithTheme<{ $width: number; $isDisabled?: boolean }>;\n\nexport const StyledSliderButtonWrapper = styled.div<StyledSliderButtonWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledMotionSliderButtonThumbProps) => theme['408']};\n    border-radius: 3px;\n    border: none;\n    color: white;\n    cursor: pointer;\n    display: inline-flex;\n    line-height: 1.15;\n    height: 32px;\n    position: relative;\n    user-select: none;\n    transition: opacity 0.3s ease;\n\n    width: ${({ $width }) => $width}px;\n\n    max-width: 100%;\n    overflow-x: ${({ $isDisabled }) => ($isDisabled ? 'hidden' : 'scroll')};\n    overflow-y: hidden;\n\n    // Chrome\n    &::-webkit-scrollbar {\n        display: none;\n    }\n\n    // IE and Edge\n    -ms-overflow-style: none;\n\n    // Firefox\n    scrollbar-width: none;\n`;\n\ntype StyledSliderButtonItemProps = WithTheme<{ $width: number }>;\n\nexport const StyledSliderButtonItem = styled.div<StyledSliderButtonItemProps>`\n    font-size: 110%;\n    font-family: 'Roboto Medium', serif;\n    padding: 7px 12px;\n    min-width: ${({ $width }) => $width}px;\n    max-width: ${({ $width }) => $width}px;\n    display: flex;\n    white-space: nowrap;\n    justify-content: center;\n    color: white;\n`;\n\nexport const StyledSliderButtonPopupContent = styled.div`\n    display: flex;\n    flex-direction: column;\n    padding: 7px 12px;\n`;\n\nexport const StyledSliderButtonPopupContentItem = styled.div`\n    font-size: 110%;\n    font-family: 'Roboto Medium', serif;\n    cursor: pointer;\n`;\n\ntype StyledSliderButtonButtonsWrapperProps = WithTheme<{ $isInvisible?: boolean }>;\n\nexport const StyledSliderButtonButtonsWrapper = styled.div<StyledSliderButtonButtonsWrapperProps>`\n    position: absolute;\n    z-index: ${({ $isInvisible }) => ($isInvisible ? '2' : '4')};\n    opacity: ${({ $isInvisible }) => ($isInvisible ? 0 : 1)};\n    display: flex;\n    cursor: pointer;\n    align-items: center;\n    pointer-events: ${({ $isInvisible }) => ($isInvisible ? 'auto' : 'none')};\n`;\n\ntype StyledMotionSliderButtonThumbProps = WithTheme<{ $width: number }>;\n\nexport const StyledMotionSliderButtonThumb = styled(motion.div)<StyledMotionSliderButtonThumbProps>`\n    font-size: 110%;\n    font-family: 'Roboto Medium', serif;\n    background-color: ${({ theme }: StyledSliderButtonProps) => theme['405']};\n    opacity: 1;\n    width: ${({ $width }) => $width - 8}px;\n    position: absolute;\n    border-radius: 2px;\n    top: 4px;\n    left: 4px;\n    white-space: nowrap;\n    z-index: 3;\n    height: 24px;\n    padding: 7px 12px;\n    display: flex;\n    color: white;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAKhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA4B;AACrE,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,CAAC;AAIM,MAAMC,yBAAyB,GAAAJ,OAAA,CAAAI,yBAAA,GAAGH,yBAAM,CAACC,GAAmC;AACnF;AACA,wBAAwB,CAAC;EAAEG;AAA0C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACnC;AACA;AACA,kBAAkB,CAAC;EAAEH;AAAY,CAAC,KAAMA,WAAW,GAAG,QAAQ,GAAG,QAAS;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMI,sBAAsB,GAAAP,OAAA,CAAAO,sBAAA,GAAGN,yBAAM,CAACC,GAAgC;AAC7E;AACA;AACA;AACA,iBAAiB,CAAC;EAAEI;AAAO,CAAC,KAAKA,MAAM;AACvC,iBAAiB,CAAC;EAAEA;AAAO,CAAC,KAAKA,MAAM;AACvC;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAME,8BAA8B,GAAAR,OAAA,CAAAQ,8BAAA,GAAGP,yBAAM,CAACC,GAAG;AACxD;AACA;AACA;AACA,CAAC;AAEM,MAAMO,kCAAkC,GAAAT,OAAA,CAAAS,kCAAA,GAAGR,yBAAM,CAACC,GAAG;AAC5D;AACA;AACA;AACA,CAAC;AAIM,MAAMQ,gCAAgC,GAAAV,OAAA,CAAAU,gCAAA,GAAGT,yBAAM,CAACC,GAA0C;AACjG;AACA,eAAe,CAAC;EAAES;AAAa,CAAC,KAAMA,YAAY,GAAG,GAAG,GAAG,GAAI;AAC/D,eAAe,CAAC;EAAEA;AAAa,CAAC,KAAMA,YAAY,GAAG,CAAC,GAAG,CAAE;AAC3D;AACA;AACA;AACA,sBAAsB,CAAC;EAAEA;AAAa,CAAC,KAAMA,YAAY,GAAG,MAAM,GAAG,MAAO;AAC5E,CAAC;AAIM,MAAMC,6BAA6B,GAAAZ,OAAA,CAAAY,6BAAA,GAAG,IAAAX,yBAAM,EAACY,oBAAM,CAACX,GAAG,CAAqC;AACnG;AACA;AACA,wBAAwB,CAAC;EAAEG;AAA+B,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC5E;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM,GAAG,CAAC;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"SliderButton.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSliderButton","exports","styled","div","$isDisabled","StyledSliderButtonWrapper","theme","$width","StyledSliderButtonItem","StyledSliderButtonPopupContent","StyledSliderButtonPopupContentItem","$isSelected","undefined","StyledSliderButtonButtonsWrapper","$isInvisible","StyledMotionSliderButtonThumb","motion"],"sources":["../../../../src/components/slider-button/SliderButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSliderButtonProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledSliderButton = styled.div<StyledSliderButtonProps>`\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    width: 100%;\n    touch-action: none;\n`;\n\ntype StyledSliderButtonWrapperProps = WithTheme<{ $width: number; $isDisabled?: boolean }>;\n\nexport const StyledSliderButtonWrapper = styled.div<StyledSliderButtonWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledMotionSliderButtonThumbProps) => theme['408']};\n    border-radius: 3px;\n    border: none;\n    color: white;\n    cursor: pointer;\n    display: inline-flex;\n    line-height: 1.15;\n    height: 32px;\n    position: relative;\n    user-select: none;\n    transition: opacity 0.3s ease;\n\n    width: ${({ $width }) => $width}px;\n\n    max-width: 100%;\n    overflow-x: ${({ $isDisabled }) => ($isDisabled ? 'hidden' : 'scroll')};\n    overflow-y: hidden;\n\n    // Chrome\n    &::-webkit-scrollbar {\n        display: none;\n    }\n\n    // IE and Edge\n    -ms-overflow-style: none;\n\n    // Firefox\n    scrollbar-width: none;\n`;\n\ntype StyledSliderButtonItemProps = WithTheme<{ $width: number }>;\n\nexport const StyledSliderButtonItem = styled.div<StyledSliderButtonItemProps>`\n    font-size: 110%;\n    font-family: 'Roboto Medium', serif;\n    padding: 7px 12px;\n    min-width: ${({ $width }) => $width}px;\n    max-width: ${({ $width }) => $width}px;\n    display: flex;\n    white-space: nowrap;\n    justify-content: center;\n    color: white;\n`;\n\nexport const StyledSliderButtonPopupContent = styled.div`\n    display: flex;\n    flex-direction: column;\n`;\n\ntype StyledSliderButtonPopupContentItemProps = WithTheme<{ $isSelected?: boolean }>;\n\nexport const StyledSliderButtonPopupContentItem = styled.div<StyledSliderButtonPopupContentItemProps>`\n    font-size: 110%;\n    font-family: 'Roboto Medium', serif;\n    cursor: pointer;\n    background-color: ${({ $isSelected, theme }: StyledSliderButtonPopupContentItemProps) =>\n        $isSelected ? theme['secondary-102'] : undefined};\n    padding: 4px 12px;\n`;\n\ntype StyledSliderButtonButtonsWrapperProps = WithTheme<{ $isInvisible?: boolean }>;\n\nexport const StyledSliderButtonButtonsWrapper = styled.div<StyledSliderButtonButtonsWrapperProps>`\n    position: absolute;\n    z-index: ${({ $isInvisible }) => ($isInvisible ? '2' : '4')};\n    opacity: ${({ $isInvisible }) => ($isInvisible ? 0 : 1)};\n    display: flex;\n    cursor: pointer;\n    align-items: center;\n    pointer-events: ${({ $isInvisible }) => ($isInvisible ? 'auto' : 'none')};\n`;\n\ntype StyledMotionSliderButtonThumbProps = WithTheme<{ $width: number }>;\n\nexport const StyledMotionSliderButtonThumb = styled(motion.div)<StyledMotionSliderButtonThumbProps>`\n    font-size: 110%;\n    font-family: 'Roboto Medium', serif;\n    background-color: ${({ theme }: StyledSliderButtonProps) => theme['405']};\n    opacity: 1;\n    width: ${({ $width }) => $width - 8}px;\n    position: absolute;\n    border-radius: 2px;\n    top: 4px;\n    left: 4px;\n    white-space: nowrap;\n    z-index: 3;\n    height: 24px;\n    padding: 7px 12px;\n    display: flex;\n    color: white;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAKhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA4B;AACrE,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,CAAC;AAIM,MAAMC,yBAAyB,GAAAJ,OAAA,CAAAI,yBAAA,GAAGH,yBAAM,CAACC,GAAmC;AACnF;AACA,wBAAwB,CAAC;EAAEG;AAA0C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACnC;AACA;AACA,kBAAkB,CAAC;EAAEH;AAAY,CAAC,KAAMA,WAAW,GAAG,QAAQ,GAAG,QAAS;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMI,sBAAsB,GAAAP,OAAA,CAAAO,sBAAA,GAAGN,yBAAM,CAACC,GAAgC;AAC7E;AACA;AACA;AACA,iBAAiB,CAAC;EAAEI;AAAO,CAAC,KAAKA,MAAM;AACvC,iBAAiB,CAAC;EAAEA;AAAO,CAAC,KAAKA,MAAM;AACvC;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAME,8BAA8B,GAAAR,OAAA,CAAAQ,8BAAA,GAAGP,yBAAM,CAACC,GAAG;AACxD;AACA;AACA,CAAC;AAIM,MAAMO,kCAAkC,GAAAT,OAAA,CAAAS,kCAAA,GAAGR,yBAAM,CAACC,GAA4C;AACrG;AACA;AACA;AACA,wBAAwB,CAAC;EAAEQ,WAAW;EAAEL;AAA+C,CAAC,KAChFK,WAAW,GAAGL,KAAK,CAAC,eAAe,CAAC,GAAGM,SAAS;AACxD;AACA,CAAC;AAIM,MAAMC,gCAAgC,GAAAZ,OAAA,CAAAY,gCAAA,GAAGX,yBAAM,CAACC,GAA0C;AACjG;AACA,eAAe,CAAC;EAAEW;AAAa,CAAC,KAAMA,YAAY,GAAG,GAAG,GAAG,GAAI;AAC/D,eAAe,CAAC;EAAEA;AAAa,CAAC,KAAMA,YAAY,GAAG,CAAC,GAAG,CAAE;AAC3D;AACA;AACA;AACA,sBAAsB,CAAC;EAAEA;AAAa,CAAC,KAAMA,YAAY,GAAG,MAAM,GAAG,MAAO;AAC5E,CAAC;AAIM,MAAMC,6BAA6B,GAAAd,OAAA,CAAAc,6BAAA,GAAG,IAAAb,yBAAM,EAACc,oBAAM,CAACb,GAAG,CAAqC;AACnG;AACA;AACA,wBAAwB,CAAC;EAAEG;AAA+B,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC5E;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM,GAAG,CAAC;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -22,6 +22,9 @@ const SliderButton = _ref => {
   const [sliderSize, setSliderSize] = useState({
     width: 0
   });
+  const [currentId, setCurrentId] = useState('');
+  const [currentPopupId, setCurrentPopupId] = useState('');
+  const [currentIndex, setCurrentIndex] = useState(0);
   const sliderButtonRef = useRef(null);
   const sliderButtonWrapperRef = useRef(null);
   const popupRef = useRef(null);
@@ -31,14 +34,40 @@ const SliderButton = _ref => {
   useEffect(() => {
     if (elementSize) setSliderSize(elementSize);
   }, [elementSize]);
+  const setPopupId = useCallback(selectedId => {
+    const ids = items.slice(shownItemsCount - 1).map(_ref2 => {
+      let {
+        id
+      } = _ref2;
+      return id;
+    });
+    const newId = ids.find(id => id === selectedId);
+    if (newId) {
+      setCurrentId('more');
+      setCurrentPopupId(newId);
+      return;
+    }
+    setCurrentId(selectedId);
+  }, [items, shownItemsCount]);
   const isSliderBigger = useMemo(() => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length - 1, [initialItemWidth, items.length, sliderSize]);
+  const maxShownItemsCount = useMemo(() => {
+    let totalWidth = 0;
+    let count = 0;
+    while (count < items.length) {
+      const visibleItems = items.slice(0, count + 1);
+      const currentMaxWidth = calculateBiggestWidth(visibleItems) + 8;
+      if (totalWidth + currentMaxWidth > sliderSize.width) break;
+      totalWidth += currentMaxWidth;
+      count++;
+    }
+    return count;
+  }, [items, sliderSize.width]);
   const itemWidth = useMemo(() => {
     const sliderWidth = sliderSize?.width || 0;
-    const maxShownItemsCount = Math.floor(sliderWidth / initialItemWidth);
     const itemCount = items.length || 1;
     setShownItemsCount(isSliderBigger ? maxShownItemsCount : itemCount);
     return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);
-  }, [initialItemWidth, isSliderBigger, items.length, sliderSize?.width]);
+  }, [isSliderBigger, items.length, maxShownItemsCount, sliderSize?.width]);
   useEffect(() => {
     if (sliderSize) {
       const sliderWidth = itemWidth * (items.length - 1);
@@ -58,16 +87,19 @@ const SliderButton = _ref => {
     });
   }, [animate, scope]);
   const setItemPosition = useCallback(index => {
+    setCurrentIndex(index);
     void animation(itemWidth * index);
   }, [animation, itemWidth]);
   useEffect(() => {
     if (typeof selectedButtonId === 'string') {
-      let index = items.findIndex(_ref2 => {
+      let index = items.findIndex(_ref3 => {
         let {
           id
-        } = _ref2;
+        } = _ref3;
         return id === selectedButtonId;
       });
+      setCurrentId(selectedButtonId);
+      setPopupId(selectedButtonId);
       if (items.length > shownItemsCount && index > shownItemsCount - 1) {
         index = shownItemsCount - 1;
       }
@@ -75,11 +107,12 @@ const SliderButton = _ref => {
         setItemPosition(index);
       }
     }
-  }, [animation, dragRange.right, isSliderBigger, itemWidth, items, selectedButtonId, setItemPosition, shownItemsCount]);
+  }, [animation, dragRange.right, isSliderBigger, itemWidth, items, selectedButtonId, setItemPosition, setPopupId, shownItemsCount]);
   const handleClick = useCallback((id, index) => {
     if (isDisabled) {
       return;
     }
+    setPopupId(id);
     if (typeof onChange === 'function' && id !== 'more') {
       onChange(id);
     }
@@ -91,30 +124,31 @@ const SliderButton = _ref => {
       }
     }
     setItemPosition(index);
-  }, [isDisabled, onChange, setItemPosition]);
+  }, [isDisabled, onChange, setItemPosition, setPopupId]);
   const buttons = useMemo(() => {
     if (items.length > shownItemsCount) {
       const newItems = items.slice(0, shownItemsCount - 1);
       const otherItems = items.slice(shownItemsCount - 1);
-      const elements = newItems.map((_ref3, index) => {
+      const elements = newItems.map((_ref4, index) => {
         let {
           id,
           text
-        } = _ref3;
+        } = _ref4;
         return /*#__PURE__*/React.createElement(StyledSliderButtonItem, {
           $width: itemWidth,
           key: `slider-button-${id}`,
           onClick: () => handleClick(id, index)
         }, text);
       });
-      const popupContent = otherItems.map(_ref4 => {
+      const popupContent = otherItems.map(_ref5 => {
         let {
           id,
           text
-        } = _ref4;
+        } = _ref5;
         return /*#__PURE__*/React.createElement(StyledSliderButtonPopupContentItem, {
           key: `slider-button-${id}`,
-          onClick: () => handleClick(id, newItems.length)
+          onClick: () => handleClick(id, newItems.length),
+          $isSelected: id === currentPopupId
         }, text);
       });
       const id = 'more';
@@ -130,25 +164,25 @@ const SliderButton = _ref => {
       }))));
       return elements;
     }
-    return items.map(_ref5 => {
+    return items.map(_ref6 => {
       let {
         id,
         text
-      } = _ref5;
+      } = _ref6;
       return /*#__PURE__*/React.createElement(StyledSliderButtonItem, {
         $width: itemWidth,
         key: `slider-button-${id}`
       }, text);
     });
-  }, [handleClick, itemWidth, items, shownItemsCount]);
+  }, [currentPopupId, handleClick, itemWidth, items, shownItemsCount]);
   const pseudoButtons = useMemo(() => {
     if (items.length > shownItemsCount) {
       const newItems = items.slice(0, shownItemsCount - 1);
-      const elements = newItems.map((_ref6, index) => {
+      const elements = newItems.map((_ref7, index) => {
         let {
           id,
           text
-        } = _ref6;
+        } = _ref7;
         return /*#__PURE__*/React.createElement(StyledSliderButtonItem, {
           $width: itemWidth,
           key: `pseudo-slider-button-${id}`,
@@ -165,11 +199,11 @@ const SliderButton = _ref => {
       })));
       return elements;
     }
-    return items.map((_ref7, index) => {
+    return items.map((_ref8, index) => {
       let {
         id,
         text
-      } = _ref7;
+      } = _ref8;
       return /*#__PURE__*/React.createElement(StyledSliderButtonItem, {
         $width: itemWidth,
         key: `pseudo-slider-button-${id}`,
@@ -188,6 +222,9 @@ const SliderButton = _ref => {
     }
     return points;
   }, [itemWidth, items.length]);
+  const handleDragStart = useCallback(() => {
+    void setRefreshScrollEnabled(false);
+  }, []);
   const handleDragEnd = useCallback(() => {
     void setRefreshScrollEnabled(true);
     const position = getThumbPosition({
@@ -260,12 +297,14 @@ const SliderButton = _ref => {
       ...dragRange
     },
     $width: itemWidth,
-    onDragEnd: handleDragEnd
+    onDragEnd: handleDragEnd,
+    onDragStart: handleDragStart,
+    onClick: () => handleClick(currentId, currentIndex)
   }), /*#__PURE__*/React.createElement(StyledSliderButtonWrapper, {
     $isDisabled: isDisabled,
     $width: !isSliderBigger ? dragRange.right + itemWidth : dragRange.right,
     ref: sliderButtonWrapperRef
-  }, /*#__PURE__*/React.createElement(AnimatePresence, null, /*#__PURE__*/React.createElement(StyledSliderButtonButtonsWrapper, null, buttons)))), [buttons, dragRange, handleDragEnd, isDisabled, isSliderBigger, itemWidth, pseudoButtons, scope]);
+  }, /*#__PURE__*/React.createElement(AnimatePresence, null, /*#__PURE__*/React.createElement(StyledSliderButtonButtonsWrapper, null, buttons)))), [buttons, currentId, currentIndex, dragRange, handleClick, handleDragEnd, handleDragStart, isDisabled, isSliderBigger, itemWidth, pseudoButtons, scope]);
 };
 SliderButton.displayName = 'SliderButton';
 export default SliderButton;

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

@@ -1 +1 @@
-{"version":3,"file":"SliderButton.js","names":["setRefreshScrollEnabled","AnimatePresence","useAnimate","React","useCallback","useEffect","useMemo","useRef","useState","useElementSize","calculateBiggestWidth","getNearestPoint","getThumbPosition","Icon","Popup","StyledMotionSliderButtonThumb","StyledSliderButton","StyledSliderButtonButtonsWrapper","StyledSliderButtonItem","StyledSliderButtonPopupContent","StyledSliderButtonPopupContentItem","StyledSliderButtonWrapper","SliderButton","_ref","selectedButtonId","isDisabled","items","onChange","dragRange","setDragRange","left","right","shownItemsCount","setShownItemsCount","length","sliderSize","setSliderSize","width","sliderButtonRef","sliderButtonWrapperRef","popupRef","scope","animate","initialItemWidth","elementSize","isSliderBigger","Math","floor","itemWidth","sliderWidth","maxShownItemsCount","itemCount","count","animation","x","current","type","duration","setItemPosition","index","findIndex","_ref2","id","handleClick","show","hide","buttons","newItems","slice","otherItems","elements","map","_ref3","text","createElement","$width","key","onClick","popupContent","_ref4","push","ref","content","icons","color","_ref5","pseudoButtons","_ref6","_ref7","snapPoints","points","i","handleDragEnd","position","middle","scrollLeft","nearestPoint","nearestIndex","$isDisabled","$isInvisible","drag","dragElastic","dragConstraints","onDragEnd","displayName"],"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\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 isSliderBigger = useMemo(\n        () => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length - 1,\n        [initialItemWidth, items.length, sliderSize],\n    );\n\n    const itemWidth = useMemo(() => {\n        const sliderWidth = sliderSize?.width || 0;\n        const maxShownItemsCount = Math.floor(sliderWidth / initialItemWidth);\n        const itemCount = items.length || 1;\n\n        setShownItemsCount(isSliderBigger ? maxShownItemsCount : itemCount);\n\n        return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);\n    }, [initialItemWidth, isSliderBigger, items.length, 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            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            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        shownItemsCount,\n    ]);\n\n    const handleClick = useCallback(\n        (id: string, index: number) => {\n            if (isDisabled) {\n                return;\n            }\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],\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                >\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    }, [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 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                />\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            dragRange,\n            handleDragEnd,\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":["setRefreshScrollEnabled","AnimatePresence","useAnimate","React","useCallback","useEffect","useMemo","useRef","useState","useElementSize","calculateBiggestWidth","getNearestPoint","getThumbPosition","Icon","Popup","StyledMotionSliderButtonThumb","StyledSliderButton","StyledSliderButtonButtonsWrapper","StyledSliderButtonItem","StyledSliderButtonPopupContent","StyledSliderButtonPopupContentItem","StyledSliderButtonWrapper","SliderButton","_ref","selectedButtonId","isDisabled","items","onChange","dragRange","setDragRange","left","right","shownItemsCount","setShownItemsCount","length","sliderSize","setSliderSize","width","currentId","setCurrentId","currentPopupId","setCurrentPopupId","currentIndex","setCurrentIndex","sliderButtonRef","sliderButtonWrapperRef","popupRef","scope","animate","initialItemWidth","elementSize","setPopupId","selectedId","ids","slice","map","_ref2","id","newId","find","isSliderBigger","Math","floor","maxShownItemsCount","totalWidth","count","visibleItems","currentMaxWidth","itemWidth","sliderWidth","itemCount","animation","x","current","type","duration","setItemPosition","index","findIndex","_ref3","handleClick","show","hide","buttons","newItems","otherItems","elements","_ref4","text","createElement","$width","key","onClick","popupContent","_ref5","$isSelected","push","ref","content","icons","color","_ref6","pseudoButtons","_ref7","_ref8","snapPoints","points","i","handleDragStart","handleDragEnd","position","middle","scrollLeft","nearestPoint","nearestIndex","$isDisabled","$isInvisible","drag","dragElastic","dragConstraints","onDragEnd","onDragStart","displayName"],"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":[]}

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

@@ -80,51 +80,58 @@ export const StyledSliderButtonItem = styled.div`
 export const StyledSliderButtonPopupContent = styled.div`
     display: flex;
     flex-direction: column;
-    padding: 7px 12px;
 `;
 export const StyledSliderButtonPopupContentItem = styled.div`
     font-size: 110%;
     font-family: 'Roboto Medium', serif;
     cursor: pointer;
+    background-color: ${_ref7 => {
+  let {
+    $isSelected,
+    theme
+  } = _ref7;
+  return $isSelected ? theme['secondary-102'] : undefined;
+}};
+    padding: 4px 12px;
 `;
 export const StyledSliderButtonButtonsWrapper = styled.div`
     position: absolute;
-    z-index: ${_ref7 => {
+    z-index: ${_ref8 => {
   let {
     $isInvisible
-  } = _ref7;
+  } = _ref8;
   return $isInvisible ? '2' : '4';
 }};
-    opacity: ${_ref8 => {
+    opacity: ${_ref9 => {
   let {
     $isInvisible
-  } = _ref8;
+  } = _ref9;
   return $isInvisible ? 0 : 1;
 }};
     display: flex;
     cursor: pointer;
     align-items: center;
-    pointer-events: ${_ref9 => {
+    pointer-events: ${_ref10 => {
   let {
     $isInvisible
-  } = _ref9;
+  } = _ref10;
   return $isInvisible ? 'auto' : 'none';
 }};
 `;
 export const StyledMotionSliderButtonThumb = styled(motion.div)`
     font-size: 110%;
     font-family: 'Roboto Medium', serif;
-    background-color: ${_ref10 => {
+    background-color: ${_ref11 => {
   let {
     theme
-  } = _ref10;
+  } = _ref11;
   return theme['405'];
 }};
     opacity: 1;
-    width: ${_ref11 => {
+    width: ${_ref12 => {
   let {
     $width
-  } = _ref11;
+  } = _ref12;
   return $width - 8;
 }}px;
     position: absolute;

package/lib/esm/components/slider-button/SliderButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderButton.styles.js","names":["motion","styled","StyledSliderButton","div","_ref","$isDisabled","StyledSliderButtonWrapper","_ref2","theme","_ref3","$width","_ref4","StyledSliderButtonItem","_ref5","_ref6","StyledSliderButtonPopupContent","StyledSliderButtonPopupContentItem","StyledSliderButtonButtonsWrapper","_ref7","$isInvisible","_ref8","_ref9","StyledMotionSliderButtonThumb","_ref10","_ref11"],"sources":["../../../../src/components/slider-button/SliderButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSliderButtonProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledSliderButton = styled.div<StyledSliderButtonProps>`\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    width: 100%;\n    touch-action: none;\n`;\n\ntype StyledSliderButtonWrapperProps = WithTheme<{ $width: number; $isDisabled?: boolean }>;\n\nexport const StyledSliderButtonWrapper = styled.div<StyledSliderButtonWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledMotionSliderButtonThumbProps) => theme['408']};\n    border-radius: 3px;\n    border: none;\n    color: white;\n    cursor: pointer;\n    display: inline-flex;\n    line-height: 1.15;\n    height: 32px;\n    position: relative;\n    user-select: none;\n    transition: opacity 0.3s ease;\n\n    width: ${({ $width }) => $width}px;\n\n    max-width: 100%;\n    overflow-x: ${({ $isDisabled }) => ($isDisabled ? 'hidden' : 'scroll')};\n    overflow-y: hidden;\n\n    // Chrome\n    &::-webkit-scrollbar {\n        display: none;\n    }\n\n    // IE and Edge\n    -ms-overflow-style: none;\n\n    // Firefox\n    scrollbar-width: none;\n`;\n\ntype StyledSliderButtonItemProps = WithTheme<{ $width: number }>;\n\nexport const StyledSliderButtonItem = styled.div<StyledSliderButtonItemProps>`\n    font-size: 110%;\n    font-family: 'Roboto Medium', serif;\n    padding: 7px 12px;\n    min-width: ${({ $width }) => $width}px;\n    max-width: ${({ $width }) => $width}px;\n    display: flex;\n    white-space: nowrap;\n    justify-content: center;\n    color: white;\n`;\n\nexport const StyledSliderButtonPopupContent = styled.div`\n    display: flex;\n    flex-direction: column;\n    padding: 7px 12px;\n`;\n\nexport const StyledSliderButtonPopupContentItem = styled.div`\n    font-size: 110%;\n    font-family: 'Roboto Medium', serif;\n    cursor: pointer;\n`;\n\ntype StyledSliderButtonButtonsWrapperProps = WithTheme<{ $isInvisible?: boolean }>;\n\nexport const StyledSliderButtonButtonsWrapper = styled.div<StyledSliderButtonButtonsWrapperProps>`\n    position: absolute;\n    z-index: ${({ $isInvisible }) => ($isInvisible ? '2' : '4')};\n    opacity: ${({ $isInvisible }) => ($isInvisible ? 0 : 1)};\n    display: flex;\n    cursor: pointer;\n    align-items: center;\n    pointer-events: ${({ $isInvisible }) => ($isInvisible ? 'auto' : 'none')};\n`;\n\ntype StyledMotionSliderButtonThumbProps = WithTheme<{ $width: number }>;\n\nexport const StyledMotionSliderButtonThumb = styled(motion.div)<StyledMotionSliderButtonThumbProps>`\n    font-size: 110%;\n    font-family: 'Roboto Medium', serif;\n    background-color: ${({ theme }: StyledSliderButtonProps) => theme['405']};\n    opacity: 1;\n    width: ${({ $width }) => $width - 8}px;\n    position: absolute;\n    border-radius: 2px;\n    top: 4px;\n    left: 4px;\n    white-space: nowrap;\n    z-index: 3;\n    height: 24px;\n    padding: 7px 12px;\n    display: flex;\n    color: white;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAA4B;AACrE,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC3D;AACA;AACA,CAAC;AAID,OAAO,MAAMC,yBAAyB,GAAGL,MAAM,CAACE,GAAmC;AACnF;AACA,wBAAwBI,KAAA;EAAA,IAAC;IAAEC;EAA0C,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA;AACnC;AACA;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEN;EAAY,CAAC,GAAAM,KAAA;EAAA,OAAMN,WAAW,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAC;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMO,sBAAsB,GAAGX,MAAM,CAACE,GAAgC;AAC7E;AACA;AACA;AACA,iBAAiBU,KAAA;EAAA,IAAC;IAAEH;EAAO,CAAC,GAAAG,KAAA;EAAA,OAAKH,MAAM;AAAA;AACvC,iBAAiBI,KAAA;EAAA,IAAC;IAAEJ;EAAO,CAAC,GAAAI,KAAA;EAAA,OAAKJ,MAAM;AAAA;AACvC;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMK,8BAA8B,GAAGd,MAAM,CAACE,GAAG;AACxD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMa,kCAAkC,GAAGf,MAAM,CAACE,GAAG;AAC5D;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMc,gCAAgC,GAAGhB,MAAM,CAACE,GAA0C;AACjG;AACA,eAAee,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OAAMC,YAAY,GAAG,GAAG,GAAG,GAAG;AAAA,CAAC;AAC/D,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAa,CAAC,GAAAC,KAAA;EAAA,OAAMD,YAAY,GAAG,CAAC,GAAG,CAAC;AAAA,CAAC;AAC3D;AACA;AACA;AACA,sBAAsBE,KAAA;EAAA,IAAC;IAAEF;EAAa,CAAC,GAAAE,KAAA;EAAA,OAAMF,YAAY,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AAC5E,CAAC;AAID,OAAO,MAAMG,6BAA6B,GAAGrB,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqC;AACnG;AACA;AACA,wBAAwBoB,MAAA;EAAA,IAAC;IAAEf;EAA+B,CAAC,GAAAe,MAAA;EAAA,OAAKf,KAAK,CAAC,KAAK,CAAC;AAAA;AAC5E;AACA,aAAagB,MAAA;EAAA,IAAC;IAAEd;EAAO,CAAC,GAAAc,MAAA;EAAA,OAAKd,MAAM,GAAG,CAAC;AAAA;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"SliderButton.styles.js","names":["motion","styled","StyledSliderButton","div","_ref","$isDisabled","StyledSliderButtonWrapper","_ref2","theme","_ref3","$width","_ref4","StyledSliderButtonItem","_ref5","_ref6","StyledSliderButtonPopupContent","StyledSliderButtonPopupContentItem","_ref7","$isSelected","undefined","StyledSliderButtonButtonsWrapper","_ref8","$isInvisible","_ref9","_ref10","StyledMotionSliderButtonThumb","_ref11","_ref12"],"sources":["../../../../src/components/slider-button/SliderButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSliderButtonProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledSliderButton = styled.div<StyledSliderButtonProps>`\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    width: 100%;\n    touch-action: none;\n`;\n\ntype StyledSliderButtonWrapperProps = WithTheme<{ $width: number; $isDisabled?: boolean }>;\n\nexport const StyledSliderButtonWrapper = styled.div<StyledSliderButtonWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledMotionSliderButtonThumbProps) => theme['408']};\n    border-radius: 3px;\n    border: none;\n    color: white;\n    cursor: pointer;\n    display: inline-flex;\n    line-height: 1.15;\n    height: 32px;\n    position: relative;\n    user-select: none;\n    transition: opacity 0.3s ease;\n\n    width: ${({ $width }) => $width}px;\n\n    max-width: 100%;\n    overflow-x: ${({ $isDisabled }) => ($isDisabled ? 'hidden' : 'scroll')};\n    overflow-y: hidden;\n\n    // Chrome\n    &::-webkit-scrollbar {\n        display: none;\n    }\n\n    // IE and Edge\n    -ms-overflow-style: none;\n\n    // Firefox\n    scrollbar-width: none;\n`;\n\ntype StyledSliderButtonItemProps = WithTheme<{ $width: number }>;\n\nexport const StyledSliderButtonItem = styled.div<StyledSliderButtonItemProps>`\n    font-size: 110%;\n    font-family: 'Roboto Medium', serif;\n    padding: 7px 12px;\n    min-width: ${({ $width }) => $width}px;\n    max-width: ${({ $width }) => $width}px;\n    display: flex;\n    white-space: nowrap;\n    justify-content: center;\n    color: white;\n`;\n\nexport const StyledSliderButtonPopupContent = styled.div`\n    display: flex;\n    flex-direction: column;\n`;\n\ntype StyledSliderButtonPopupContentItemProps = WithTheme<{ $isSelected?: boolean }>;\n\nexport const StyledSliderButtonPopupContentItem = styled.div<StyledSliderButtonPopupContentItemProps>`\n    font-size: 110%;\n    font-family: 'Roboto Medium', serif;\n    cursor: pointer;\n    background-color: ${({ $isSelected, theme }: StyledSliderButtonPopupContentItemProps) =>\n        $isSelected ? theme['secondary-102'] : undefined};\n    padding: 4px 12px;\n`;\n\ntype StyledSliderButtonButtonsWrapperProps = WithTheme<{ $isInvisible?: boolean }>;\n\nexport const StyledSliderButtonButtonsWrapper = styled.div<StyledSliderButtonButtonsWrapperProps>`\n    position: absolute;\n    z-index: ${({ $isInvisible }) => ($isInvisible ? '2' : '4')};\n    opacity: ${({ $isInvisible }) => ($isInvisible ? 0 : 1)};\n    display: flex;\n    cursor: pointer;\n    align-items: center;\n    pointer-events: ${({ $isInvisible }) => ($isInvisible ? 'auto' : 'none')};\n`;\n\ntype StyledMotionSliderButtonThumbProps = WithTheme<{ $width: number }>;\n\nexport const StyledMotionSliderButtonThumb = styled(motion.div)<StyledMotionSliderButtonThumbProps>`\n    font-size: 110%;\n    font-family: 'Roboto Medium', serif;\n    background-color: ${({ theme }: StyledSliderButtonProps) => theme['405']};\n    opacity: 1;\n    width: ${({ $width }) => $width - 8}px;\n    position: absolute;\n    border-radius: 2px;\n    top: 4px;\n    left: 4px;\n    white-space: nowrap;\n    z-index: 3;\n    height: 24px;\n    padding: 7px 12px;\n    display: flex;\n    color: white;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAA4B;AACrE,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC3D;AACA;AACA,CAAC;AAID,OAAO,MAAMC,yBAAyB,GAAGL,MAAM,CAACE,GAAmC;AACnF;AACA,wBAAwBI,KAAA;EAAA,IAAC;IAAEC;EAA0C,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA;AACnC;AACA;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEN;EAAY,CAAC,GAAAM,KAAA;EAAA,OAAMN,WAAW,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAC;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMO,sBAAsB,GAAGX,MAAM,CAACE,GAAgC;AAC7E;AACA;AACA;AACA,iBAAiBU,KAAA;EAAA,IAAC;IAAEH;EAAO,CAAC,GAAAG,KAAA;EAAA,OAAKH,MAAM;AAAA;AACvC,iBAAiBI,KAAA;EAAA,IAAC;IAAEJ;EAAO,CAAC,GAAAI,KAAA;EAAA,OAAKJ,MAAM;AAAA;AACvC;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMK,8BAA8B,GAAGd,MAAM,CAACE,GAAG;AACxD;AACA;AACA,CAAC;AAID,OAAO,MAAMa,kCAAkC,GAAGf,MAAM,CAACE,GAA4C;AACrG;AACA;AACA;AACA,wBAAwBc,KAAA;EAAA,IAAC;IAAEC,WAAW;IAAEV;EAA+C,CAAC,GAAAS,KAAA;EAAA,OAChFC,WAAW,GAAGV,KAAK,CAAC,eAAe,CAAC,GAAGW,SAAS;AAAA;AACxD;AACA,CAAC;AAID,OAAO,MAAMC,gCAAgC,GAAGnB,MAAM,CAACE,GAA0C;AACjG;AACA,eAAekB,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OAAMC,YAAY,GAAG,GAAG,GAAG,GAAG;AAAA,CAAC;AAC/D,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAa,CAAC,GAAAC,KAAA;EAAA,OAAMD,YAAY,GAAG,CAAC,GAAG,CAAC;AAAA,CAAC;AAC3D;AACA;AACA;AACA,sBAAsBE,MAAA;EAAA,IAAC;IAAEF;EAAa,CAAC,GAAAE,MAAA;EAAA,OAAMF,YAAY,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AAC5E,CAAC;AAID,OAAO,MAAMG,6BAA6B,GAAGxB,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqC;AACnG;AACA;AACA,wBAAwBuB,MAAA;EAAA,IAAC;IAAElB;EAA+B,CAAC,GAAAkB,MAAA;EAAA,OAAKlB,KAAK,CAAC,KAAK,CAAC;AAAA;AAC5E;AACA,aAAamB,MAAA;EAAA,IAAC;IAAEjB;EAAO,CAAC,GAAAiB,MAAA;EAAA,OAAKjB,MAAM,GAAG,CAAC;AAAA;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/types/components/slider-button/SliderButton.styles.d.ts

@@ -13,7 +13,10 @@ type StyledSliderButtonItemProps = WithTheme<{
 }>;
 export declare const StyledSliderButtonItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSliderButtonItemProps>> & string;
 export declare const StyledSliderButtonPopupContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledSliderButtonPopupContentItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+type StyledSliderButtonPopupContentItemProps = WithTheme<{
+    $isSelected?: boolean;
+}>;
+export declare const StyledSliderButtonPopupContentItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSliderButtonPopupContentItemProps>> & string;
 type StyledSliderButtonButtonsWrapperProps = WithTheme<{
     $isInvisible?: boolean;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.866",
+    "version": "5.0.0-beta.868",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -87,5 +87,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "15a8b63d6fba67dbce431668094f11476be6b141"
+    "gitHead": "ea5cd501f8288c2cd0e02eab9f5092fc744be1e2"
 }