@chayns-components/core 5.0.0-beta.601 → 5.0.0-beta.602

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _framerMotion = require("framer-motion");
 var _react = _interopRequireWildcard(require("react"));
+var _useElementSize = require("../../hooks/useElementSize");
 var _calculate = require("../../utils/calculate");
 var _sliderButton = require("../../utils/sliderButton");
 var _SliderButton = require("./SliderButton.styles");
@@ -23,14 +24,23 @@ const SliderButton = ({
     right: 0
   });
   const sliderButtonRef = (0, _react.useRef)(null);
+  const sliderButtonWrapperRef = (0, _react.useRef)(null);
+  const timeout = (0, _react.useRef)();
+  const preventHandleScroll = (0, _react.useRef)(false);
   const [scope, animate] = (0, _framerMotion.useAnimate)();
   const itemWidth = (0, _react.useMemo)(() => (0, _calculate.calculateBiggestWidth)(items), [items]);
+  const sliderSize = (0, _useElementSize.useElementSize)(sliderButtonRef);
+  const isSliderBigger = (0, _react.useMemo)(() => sliderSize && sliderSize.width < itemWidth * (items.length - 1), [itemWidth, items.length, sliderSize]);
   (0, _react.useEffect)(() => {
-    setDragRange({
-      left: 0,
-      right: itemWidth * (items.length - 1)
-    });
-  }, [itemWidth, items.length]);
+    if (sliderSize) {
+      const sliderWidth = itemWidth * (items.length - 1);
+      const count = Math.floor(sliderSize.width / itemWidth);
+      setDragRange({
+        left: 0,
+        right: isSliderBigger ? itemWidth * count : sliderWidth
+      });
+    }
+  }, [isSliderBigger, itemWidth, items.length, sliderSize]);
   const animation = (0, _react.useCallback)(async x => {
     await animate(scope.current, {
       x
@@ -61,8 +71,20 @@ const SliderButton = ({
     if (typeof onChange === 'function') {
       onChange(id);
     }
-    void animation(itemWidth * index);
-  }, [animation, isDisabled, itemWidth, onChange]);
+    if (!isSliderBigger) {
+      void animation(itemWidth * index);
+      return;
+    }
+    const count = dragRange.right / itemWidth;
+    if (items.length - count >= index) {
+      void animation(0);
+    } else {
+      void animation(itemWidth * (count - (items.length - index)));
+    }
+    if (sliderButtonWrapperRef.current) {
+      sliderButtonWrapperRef.current.scrollLeft = itemWidth * index;
+    }
+  }, [animation, dragRange.right, isDisabled, isSliderBigger, itemWidth, items.length, onChange]);
   const buttons = (0, _react.useMemo)(() => items.map(({
     id,
     text
@@ -98,22 +120,45 @@ const SliderButton = ({
       return;
     }
     const {
-      nearestPoint,
+      middle,
+      left
+    } = position;
+    let scrollLeft = 0;
+    if (sliderButtonWrapperRef.current) {
+      scrollLeft = sliderButtonWrapperRef.current.scrollLeft;
+      sliderButtonWrapperRef.current.scrollLeft = (0, _sliderButton.getNearestPoint)({
+        snapPoints,
+        position: middle,
+        scrollLeft: scrollLeft - left
+      }).nearestPoint;
+    }
+    const {
       nearestIndex
     } = (0, _sliderButton.getNearestPoint)({
       snapPoints,
-      position
+      position: middle,
+      scrollLeft
+    });
+    const {
+      nearestPoint
+    } = (0, _sliderButton.getNearestPoint)({
+      snapPoints,
+      position: middle,
+      scrollLeft: 0
     });
     if (nearestPoint >= 0 && nearestIndex >= 0) {
       var _items$nearestIndex;
       void animation(nearestPoint);
       const id = (_items$nearestIndex = items[nearestIndex]) === null || _items$nearestIndex === void 0 ? void 0 : _items$nearestIndex.id;
+      setSelectedButton(id);
       if (typeof onChange === 'function' && id) {
         onChange(id);
       }
     }
+    preventHandleScroll.current = false;
   }, [animation, itemWidth, items, onChange, scope, snapPoints]);
   const handleWhileDrag = (0, _react.useCallback)(() => {
+    preventHandleScroll.current = true;
     const position = (0, _sliderButton.getThumbPosition)({
       scope,
       itemWidth
@@ -121,34 +166,96 @@ const SliderButton = ({
     if (!position) {
       return;
     }
-    if (sliderButtonRef.current) {
-      sliderButtonRef.current.scrollLeft = (position - itemWidth / 2) / 1.1;
+    const {
+      right,
+      left,
+      middle
+    } = position;
+    let scrollLeft = 0;
+    const scrollSpeed = 3;
+    if (sliderButtonWrapperRef.current) {
+      if (right >= dragRange.right) {
+        sliderButtonWrapperRef.current.scrollLeft += scrollSpeed;
+      }
+      if (left <= dragRange.left) {
+        sliderButtonWrapperRef.current.scrollLeft -= scrollSpeed;
+      }
+      scrollLeft = sliderButtonWrapperRef.current.scrollLeft;
     }
     const {
       nearestIndex
     } = (0, _sliderButton.getNearestPoint)({
       snapPoints,
-      position
+      position: middle,
+      scrollLeft
     });
     if (nearestIndex >= 0) {
       var _items$nearestIndex2;
       setSelectedButton((_items$nearestIndex2 = items[nearestIndex]) === null || _items$nearestIndex2 === void 0 ? void 0 : _items$nearestIndex2.id);
     }
-  }, [itemWidth, items, scope, snapPoints]);
+  }, [dragRange, itemWidth, items, scope, snapPoints]);
+
+  // With this, the handleScroll works before the thumb is moved the first time.
+  (0, _react.useEffect)(() => {
+    void animation(1);
+    void animation(0);
+  }, [animation]);
+  const handleScroll = (0, _react.useCallback)(event => {
+    if (preventHandleScroll.current) {
+      return;
+    }
+    const position = (0, _sliderButton.getThumbPosition)({
+      scope,
+      itemWidth
+    });
+    if (!position) {
+      return;
+    }
+    const {
+      middle
+    } = position;
+    const {
+      scrollLeft
+    } = event.target;
+    const {
+      nearestIndex
+    } = (0, _sliderButton.getNearestPoint)({
+      snapPoints,
+      position: middle,
+      scrollLeft
+    });
+    if (nearestIndex >= 0) {
+      var _items$nearestIndex3;
+      setSelectedButton((_items$nearestIndex3 = items[nearestIndex]) === null || _items$nearestIndex3 === void 0 ? void 0 : _items$nearestIndex3.id);
+    }
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+    timeout.current = window.setTimeout(() => {
+      handleDragEnd();
+    }, 200);
+  }, [handleDragEnd, itemWidth, items, scope, snapPoints]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButton, {
     $isDisabled: isDisabled,
     ref: sliderButtonRef
-  }, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, buttons, /*#__PURE__*/_react.default.createElement(_SliderButton.StyledMotionSliderButtonThumb, {
+  }, /*#__PURE__*/_react.default.createElement(_SliderButton.StyledMotionSliderButtonThumb, {
     ref: scope,
     drag: isDisabled ? false : 'x',
     dragElastic: 0,
-    dragConstraints: {
+    dragConstraints: isSliderBigger ? {
+      ...dragRange,
+      right: dragRange.right - itemWidth
+    } : {
       ...dragRange
     },
     $width: itemWidth,
     onDrag: handleWhileDrag,
     onDragEnd: handleDragEnd
-  }, thumbText))), [buttons, dragRange, handleDragEnd, handleWhileDrag, isDisabled, itemWidth, scope, thumbText]);
+  }, thumbText), /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonWrapper, {
+    $width: !isSliderBigger ? dragRange.right + itemWidth : dragRange.right,
+    ref: sliderButtonWrapperRef,
+    onScroll: handleScroll
+  }, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonButtonsWrapper, null, buttons)))), [buttons, dragRange, handleDragEnd, handleScroll, handleWhileDrag, isDisabled, isSliderBigger, itemWidth, scope, thumbText]);
 };
 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":["_framerMotion","require","_react","_interopRequireWildcard","_calculate","_sliderButton","_SliderButton","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SliderButton","selectedButtonId","isDisabled","items","onChange","selectedButton","setSelectedButton","useState","undefined","dragRange","setDragRange","left","right","sliderButtonRef","useRef","scope","animate","useAnimate","itemWidth","useMemo","calculateBiggestWidth","useEffect","length","animation","useCallback","x","current","type","duration","index","findIndex","id","_items$","handleClick","buttons","map","text","createElement","StyledSliderButtonItem","$width","key","onClick","$isSelected","thumbText","selectedItem","find","snapPoints","points","push","handleDragEnd","position","getThumbPosition","nearestPoint","nearestIndex","getNearestPoint","_items$nearestIndex","handleWhileDrag","scrollLeft","_items$nearestIndex2","StyledSliderButton","$isDisabled","ref","AnimatePresence","StyledMotionSliderButtonThumb","drag","dragElastic","dragConstraints","onDrag","onDragEnd","displayName","_default","exports"],"sources":["../../../../src/components/slider-button/SliderButton.tsx"],"sourcesContent":["import { AnimatePresence, useAnimate } from 'framer-motion';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { SliderButtonItem } from '../../types/slider-button';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\nimport {\n    StyledMotionSliderButtonThumb,\n    StyledSliderButton,\n    StyledSliderButtonItem,\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 [selectedButton, setSelectedButton] = useState<string | undefined>(undefined);\n    const [dragRange, setDragRange] = useState({ left: 0, right: 0 });\n\n    const sliderButtonRef = useRef<HTMLDivElement>(null);\n\n    const [scope, animate] = useAnimate();\n\n    const itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n\n    useEffect(() => {\n        setDragRange({ left: 0, right: itemWidth * (items.length - 1) });\n    }, [itemWidth, items.length]);\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    useEffect(() => {\n        if (selectedButtonId) {\n            setSelectedButton(selectedButtonId);\n\n            const index = items.findIndex(({ id }) => id === selectedButtonId);\n\n            if (index >= 0) {\n                void animation(itemWidth * index);\n            }\n        } else {\n            setSelectedButton(items[0]?.id);\n        }\n    }, [animation, itemWidth, items, selectedButtonId]);\n\n    const handleClick = useCallback(\n        (id: string, index: number) => {\n            if (isDisabled) {\n                return;\n            }\n\n            setSelectedButton(id);\n\n            if (typeof onChange === 'function') {\n                onChange(id);\n            }\n\n            void animation(itemWidth * index);\n        },\n        [animation, isDisabled, itemWidth, onChange],\n    );\n\n    const buttons = useMemo(\n        () =>\n            items.map(({ id, text }, index) => (\n                <StyledSliderButtonItem\n                    $width={itemWidth}\n                    key={`slider-button-${id}`}\n                    onClick={() => handleClick(id, index)}\n                    $isSelected={id === selectedButton}\n                >\n                    {text}\n                </StyledSliderButtonItem>\n            )),\n        [handleClick, itemWidth, items, selectedButton],\n    );\n\n    const thumbText = useMemo(() => {\n        const selectedItem = items.find(({ id }) => id === selectedButton);\n\n        return selectedItem ? selectedItem.text : '';\n    }, [items, selectedButton]);\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        const position = getThumbPosition({ scope, itemWidth });\n\n        if (!position) {\n            return;\n        }\n\n        const { nearestPoint, nearestIndex } = getNearestPoint({ snapPoints, position });\n\n        if (nearestPoint >= 0 && nearestIndex >= 0) {\n            void animation(nearestPoint);\n\n            const id = items[nearestIndex]?.id;\n\n            if (typeof onChange === 'function' && id) {\n                onChange(id);\n            }\n        }\n    }, [animation, itemWidth, items, onChange, scope, snapPoints]);\n\n    const handleWhileDrag = useCallback(() => {\n        const position = getThumbPosition({ scope, itemWidth });\n\n        if (!position) {\n            return;\n        }\n\n        if (sliderButtonRef.current) {\n            sliderButtonRef.current.scrollLeft = (position - itemWidth / 2) / 1.1;\n        }\n\n        const { nearestIndex } = getNearestPoint({ snapPoints, position });\n\n        if (nearestIndex >= 0) {\n            setSelectedButton(items[nearestIndex]?.id);\n        }\n    }, [itemWidth, items, scope, snapPoints]);\n\n    return useMemo(\n        () => (\n            <StyledSliderButton $isDisabled={isDisabled} ref={sliderButtonRef}>\n                <AnimatePresence>\n                    {buttons}\n                    <StyledMotionSliderButtonThumb\n                        ref={scope}\n                        drag={isDisabled ? false : 'x'}\n                        dragElastic={0}\n                        dragConstraints={{ ...dragRange }}\n                        $width={itemWidth}\n                        onDrag={handleWhileDrag}\n                        onDragEnd={handleDragEnd}\n                    >\n                        {thumbText}\n                    </StyledMotionSliderButtonThumb>\n                </AnimatePresence>\n            </StyledSliderButton>\n        ),\n        [\n            buttons,\n            dragRange,\n            handleDragEnd,\n            handleWhileDrag,\n            isDisabled,\n            itemWidth,\n            scope,\n            thumbText,\n        ],\n    );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AAEA,IAAAG,UAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,aAAA,GAAAL,OAAA;AAI+B,SAAAM,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,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,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAsB/B,MAAMW,YAAmC,GAAGA,CAAC;EAAEC,gBAAgB;EAAEC,UAAU;EAAEC,KAAK;EAAEC;AAAS,CAAC,KAAK;EAC/F,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAC,eAAQ,EAAqBC,SAAS,CAAC;EACnF,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAH,eAAQ,EAAC;IAAEI,IAAI,EAAE,CAAC;IAAEC,KAAK,EAAE;EAAE,CAAC,CAAC;EAEjE,MAAMC,eAAe,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAEpD,MAAM,CAACC,KAAK,EAAEC,OAAO,CAAC,GAAG,IAAAC,wBAAU,EAAC,CAAC;EAErC,MAAMC,SAAS,GAAG,IAAAC,cAAO,EAAC,MAAM,IAAAC,gCAAqB,EAACjB,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEtE,IAAAkB,gBAAS,EAAC,MAAM;IACZX,YAAY,CAAC;MAAEC,IAAI,EAAE,CAAC;MAAEC,KAAK,EAAEM,SAAS,IAAIf,KAAK,CAACmB,MAAM,GAAG,CAAC;IAAE,CAAC,CAAC;EACpE,CAAC,EAAE,CAACJ,SAAS,EAAEf,KAAK,CAACmB,MAAM,CAAC,CAAC;EAE7B,MAAMC,SAAS,GAAG,IAAAC,kBAAW,EACzB,MAAOC,CAAS,IAAK;IACjB,MAAMT,OAAO,CACTD,KAAK,CAACW,OAAO,EACb;MAAED;IAAE,CAAC,EACL;MACIE,IAAI,EAAE,OAAO;MACbC,QAAQ,EAAE;IACd,CACJ,CAAC;EACL,CAAC,EACD,CAACZ,OAAO,EAAED,KAAK,CACnB,CAAC;EAED,IAAAM,gBAAS,EAAC,MAAM;IACZ,IAAIpB,gBAAgB,EAAE;MAClBK,iBAAiB,CAACL,gBAAgB,CAAC;MAEnC,MAAM4B,KAAK,GAAG1B,KAAK,CAAC2B,SAAS,CAAC,CAAC;QAAEC;MAAG,CAAC,KAAKA,EAAE,KAAK9B,gBAAgB,CAAC;MAElE,IAAI4B,KAAK,IAAI,CAAC,EAAE;QACZ,KAAKN,SAAS,CAACL,SAAS,GAAGW,KAAK,CAAC;MACrC;IACJ,CAAC,MAAM;MAAA,IAAAG,OAAA;MACH1B,iBAAiB,EAAA0B,OAAA,GAAC7B,KAAK,CAAC,CAAC,CAAC,cAAA6B,OAAA,uBAARA,OAAA,CAAUD,EAAE,CAAC;IACnC;EACJ,CAAC,EAAE,CAACR,SAAS,EAAEL,SAAS,EAAEf,KAAK,EAAEF,gBAAgB,CAAC,CAAC;EAEnD,MAAMgC,WAAW,GAAG,IAAAT,kBAAW,EAC3B,CAACO,EAAU,EAAEF,KAAa,KAAK;IAC3B,IAAI3B,UAAU,EAAE;MACZ;IACJ;IAEAI,iBAAiB,CAACyB,EAAE,CAAC;IAErB,IAAI,OAAO3B,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAAC2B,EAAE,CAAC;IAChB;IAEA,KAAKR,SAAS,CAACL,SAAS,GAAGW,KAAK,CAAC;EACrC,CAAC,EACD,CAACN,SAAS,EAAErB,UAAU,EAAEgB,SAAS,EAAEd,QAAQ,CAC/C,CAAC;EAED,MAAM8B,OAAO,GAAG,IAAAf,cAAO,EACnB,MACIhB,KAAK,CAACgC,GAAG,CAAC,CAAC;IAAEJ,EAAE;IAAEK;EAAK,CAAC,EAAEP,KAAK,kBAC1BtD,MAAA,CAAAW,OAAA,CAAAmD,aAAA,CAAC1D,aAAA,CAAA2D,sBAAsB;IACnBC,MAAM,EAAErB,SAAU;IAClBsB,GAAG,EAAG,iBAAgBT,EAAG,EAAE;IAC3BU,OAAO,EAAEA,CAAA,KAAMR,WAAW,CAACF,EAAE,EAAEF,KAAK,CAAE;IACtCa,WAAW,EAAEX,EAAE,KAAK1B;EAAe,GAElC+B,IACmB,CAC3B,CAAC,EACN,CAACH,WAAW,EAAEf,SAAS,EAAEf,KAAK,EAAEE,cAAc,CAClD,CAAC;EAED,MAAMsC,SAAS,GAAG,IAAAxB,cAAO,EAAC,MAAM;IAC5B,MAAMyB,YAAY,GAAGzC,KAAK,CAAC0C,IAAI,CAAC,CAAC;MAAEd;IAAG,CAAC,KAAKA,EAAE,KAAK1B,cAAc,CAAC;IAElE,OAAOuC,YAAY,GAAGA,YAAY,CAACR,IAAI,GAAG,EAAE;EAChD,CAAC,EAAE,CAACjC,KAAK,EAAEE,cAAc,CAAC,CAAC;;EAE3B;AACJ;AACA;EACI,MAAMyC,UAAU,GAAG,IAAA3B,cAAO,EAAC,MAAM;IAC7B,MAAM4B,MAAM,GAAG,CAAC,CAAC,CAAC;IAElB,KAAK,IAAIjD,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGK,KAAK,CAACmB,MAAM,EAAExB,CAAC,EAAE,EAAE;MACnCiD,MAAM,CAACC,IAAI,CAAC9B,SAAS,GAAGpB,CAAC,CAAC;IAC9B;IAEA,OAAOiD,MAAM;EACjB,CAAC,EAAE,CAAC7B,SAAS,EAAEf,KAAK,CAACmB,MAAM,CAAC,CAAC;EAE7B,MAAM2B,aAAa,GAAG,IAAAzB,kBAAW,EAAC,MAAM;IACpC,MAAM0B,QAAQ,GAAG,IAAAC,8BAAgB,EAAC;MAAEpC,KAAK;MAAEG;IAAU,CAAC,CAAC;IAEvD,IAAI,CAACgC,QAAQ,EAAE;MACX;IACJ;IAEA,MAAM;MAAEE,YAAY;MAAEC;IAAa,CAAC,GAAG,IAAAC,6BAAe,EAAC;MAAER,UAAU;MAAEI;IAAS,CAAC,CAAC;IAEhF,IAAIE,YAAY,IAAI,CAAC,IAAIC,YAAY,IAAI,CAAC,EAAE;MAAA,IAAAE,mBAAA;MACxC,KAAKhC,SAAS,CAAC6B,YAAY,CAAC;MAE5B,MAAMrB,EAAE,IAAAwB,mBAAA,GAAGpD,KAAK,CAACkD,YAAY,CAAC,cAAAE,mBAAA,uBAAnBA,mBAAA,CAAqBxB,EAAE;MAElC,IAAI,OAAO3B,QAAQ,KAAK,UAAU,IAAI2B,EAAE,EAAE;QACtC3B,QAAQ,CAAC2B,EAAE,CAAC;MAChB;IACJ;EACJ,CAAC,EAAE,CAACR,SAAS,EAAEL,SAAS,EAAEf,KAAK,EAAEC,QAAQ,EAAEW,KAAK,EAAE+B,UAAU,CAAC,CAAC;EAE9D,MAAMU,eAAe,GAAG,IAAAhC,kBAAW,EAAC,MAAM;IACtC,MAAM0B,QAAQ,GAAG,IAAAC,8BAAgB,EAAC;MAAEpC,KAAK;MAAEG;IAAU,CAAC,CAAC;IAEvD,IAAI,CAACgC,QAAQ,EAAE;MACX;IACJ;IAEA,IAAIrC,eAAe,CAACa,OAAO,EAAE;MACzBb,eAAe,CAACa,OAAO,CAAC+B,UAAU,GAAG,CAACP,QAAQ,GAAGhC,SAAS,GAAG,CAAC,IAAI,GAAG;IACzE;IAEA,MAAM;MAAEmC;IAAa,CAAC,GAAG,IAAAC,6BAAe,EAAC;MAAER,UAAU;MAAEI;IAAS,CAAC,CAAC;IAElE,IAAIG,YAAY,IAAI,CAAC,EAAE;MAAA,IAAAK,oBAAA;MACnBpD,iBAAiB,EAAAoD,oBAAA,GAACvD,KAAK,CAACkD,YAAY,CAAC,cAAAK,oBAAA,uBAAnBA,oBAAA,CAAqB3B,EAAE,CAAC;IAC9C;EACJ,CAAC,EAAE,CAACb,SAAS,EAAEf,KAAK,EAAEY,KAAK,EAAE+B,UAAU,CAAC,CAAC;EAEzC,OAAO,IAAA3B,cAAO,EACV,mBACI5C,MAAA,CAAAW,OAAA,CAAAmD,aAAA,CAAC1D,aAAA,CAAAgF,kBAAkB;IAACC,WAAW,EAAE1D,UAAW;IAAC2D,GAAG,EAAEhD;EAAgB,gBAC9DtC,MAAA,CAAAW,OAAA,CAAAmD,aAAA,CAAChE,aAAA,CAAAyF,eAAe,QACX5B,OAAO,eACR3D,MAAA,CAAAW,OAAA,CAAAmD,aAAA,CAAC1D,aAAA,CAAAoF,6BAA6B;IAC1BF,GAAG,EAAE9C,KAAM;IACXiD,IAAI,EAAE9D,UAAU,GAAG,KAAK,GAAG,GAAI;IAC/B+D,WAAW,EAAE,CAAE;IACfC,eAAe,EAAE;MAAE,GAAGzD;IAAU,CAAE;IAClC8B,MAAM,EAAErB,SAAU;IAClBiD,MAAM,EAAEX,eAAgB;IACxBY,SAAS,EAAEnB;EAAc,GAExBN,SAC0B,CAClB,CACD,CACvB,EACD,CACIT,OAAO,EACPzB,SAAS,EACTwC,aAAa,EACbO,eAAe,EACftD,UAAU,EACVgB,SAAS,EACTH,KAAK,EACL4B,SAAS,CAEjB,CAAC;AACL,CAAC;AAED3C,YAAY,CAACqE,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAArF,OAAA,GAE3Bc,YAAY","ignoreList":[]}
+{"version":3,"file":"SliderButton.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_useElementSize","_calculate","_sliderButton","_SliderButton","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SliderButton","selectedButtonId","isDisabled","items","onChange","selectedButton","setSelectedButton","useState","undefined","dragRange","setDragRange","left","right","sliderButtonRef","useRef","sliderButtonWrapperRef","timeout","preventHandleScroll","scope","animate","useAnimate","itemWidth","useMemo","calculateBiggestWidth","sliderSize","useElementSize","isSliderBigger","width","length","useEffect","sliderWidth","count","Math","floor","animation","useCallback","x","current","type","duration","index","findIndex","id","_items$","handleClick","scrollLeft","buttons","map","text","createElement","StyledSliderButtonItem","$width","key","onClick","$isSelected","thumbText","selectedItem","find","snapPoints","points","push","handleDragEnd","position","getThumbPosition","middle","getNearestPoint","nearestPoint","nearestIndex","_items$nearestIndex","handleWhileDrag","scrollSpeed","_items$nearestIndex2","handleScroll","event","target","_items$nearestIndex3","clearTimeout","window","setTimeout","StyledSliderButton","$isDisabled","ref","StyledMotionSliderButtonThumb","drag","dragElastic","dragConstraints","onDrag","onDragEnd","StyledSliderButtonWrapper","onScroll","AnimatePresence","StyledSliderButtonButtonsWrapper","displayName","_default","exports"],"sources":["../../../../src/components/slider-button/SliderButton.tsx"],"sourcesContent":["import { AnimatePresence, useAnimate } from 'framer-motion';\nimport React, { FC, UIEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport type { SliderButtonItem } from '../../types/slider-button';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\nimport {\n    StyledMotionSliderButtonThumb,\n    StyledSliderButton,\n    StyledSliderButtonButtonsWrapper,\n    StyledSliderButtonItem,\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 [selectedButton, setSelectedButton] = useState<string | undefined>(undefined);\n    const [dragRange, setDragRange] = useState({ left: 0, right: 0 });\n\n    const sliderButtonRef = useRef<HTMLDivElement>(null);\n    const sliderButtonWrapperRef = useRef<HTMLDivElement>(null);\n    const timeout = useRef<number>();\n    const preventHandleScroll = useRef(false);\n\n    const [scope, animate] = useAnimate();\n\n    const itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n\n    const sliderSize = useElementSize(sliderButtonRef);\n\n    const isSliderBigger = useMemo(\n        () => sliderSize && sliderSize.width < itemWidth * (items.length - 1),\n        [itemWidth, items.length, sliderSize],\n    );\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    useEffect(() => {\n        if (selectedButtonId) {\n            setSelectedButton(selectedButtonId);\n\n            const index = items.findIndex(({ id }) => id === selectedButtonId);\n\n            if (index >= 0) {\n                void animation(itemWidth * index);\n            }\n        } else {\n            setSelectedButton(items[0]?.id);\n        }\n    }, [animation, itemWidth, items, selectedButtonId]);\n\n    const handleClick = useCallback(\n        (id: string, index: number) => {\n            if (isDisabled) {\n                return;\n            }\n\n            setSelectedButton(id);\n\n            if (typeof onChange === 'function') {\n                onChange(id);\n            }\n\n            if (!isSliderBigger) {\n                void animation(itemWidth * index);\n\n                return;\n            }\n\n            const count = dragRange.right / itemWidth;\n\n            if (items.length - count >= index) {\n                void animation(0);\n            } else {\n                void animation(itemWidth * (count - (items.length - index)));\n            }\n\n            if (sliderButtonWrapperRef.current) {\n                sliderButtonWrapperRef.current.scrollLeft = itemWidth * index;\n            }\n        },\n        [animation, dragRange.right, isDisabled, isSliderBigger, itemWidth, items.length, onChange],\n    );\n\n    const buttons = useMemo(\n        () =>\n            items.map(({ id, text }, index) => (\n                <StyledSliderButtonItem\n                    $width={itemWidth}\n                    key={`slider-button-${id}`}\n                    onClick={() => handleClick(id, index)}\n                    $isSelected={id === selectedButton}\n                >\n                    {text}\n                </StyledSliderButtonItem>\n            )),\n        [handleClick, itemWidth, items, selectedButton],\n    );\n\n    const thumbText = useMemo(() => {\n        const selectedItem = items.find(({ id }) => id === selectedButton);\n\n        return selectedItem ? selectedItem.text : '';\n    }, [items, selectedButton]);\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        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            const id = items[nearestIndex]?.id;\n\n            setSelectedButton(id);\n\n            if (typeof onChange === 'function' && id) {\n                onChange(id);\n            }\n        }\n\n        preventHandleScroll.current = false;\n    }, [animation, itemWidth, items, onChange, scope, snapPoints]);\n\n    const handleWhileDrag = useCallback(() => {\n        preventHandleScroll.current = true;\n\n        const position = getThumbPosition({ scope, itemWidth });\n\n        if (!position) {\n            return;\n        }\n\n        const { right, left, middle } = position;\n\n        let scrollLeft = 0;\n\n        const scrollSpeed = 3;\n\n        if (sliderButtonWrapperRef.current) {\n            if (right >= dragRange.right) {\n                sliderButtonWrapperRef.current.scrollLeft += scrollSpeed;\n            }\n\n            if (left <= dragRange.left) {\n                sliderButtonWrapperRef.current.scrollLeft -= scrollSpeed;\n            }\n\n            scrollLeft = sliderButtonWrapperRef.current.scrollLeft;\n        }\n\n        const { nearestIndex } = getNearestPoint({ snapPoints, position: middle, scrollLeft });\n\n        if (nearestIndex >= 0) {\n            setSelectedButton(items[nearestIndex]?.id);\n        }\n    }, [dragRange, itemWidth, items, scope, snapPoints]);\n\n    // With this, the handleScroll works before the thumb is moved the first time.\n    useEffect(() => {\n        void animation(1);\n        void animation(0);\n    }, [animation]);\n\n    const handleScroll = useCallback(\n        (event: UIEvent<HTMLElement>) => {\n            if (preventHandleScroll.current) {\n                return;\n            }\n\n            const position = getThumbPosition({ scope, itemWidth });\n\n            if (!position) {\n                return;\n            }\n\n            const { middle } = position;\n\n            const { scrollLeft } = event.target as HTMLDivElement;\n\n            const { nearestIndex } = getNearestPoint({ snapPoints, position: middle, scrollLeft });\n\n            if (nearestIndex >= 0) {\n                setSelectedButton(items[nearestIndex]?.id);\n            }\n\n            if (timeout.current) {\n                clearTimeout(timeout.current);\n            }\n\n            timeout.current = window.setTimeout(() => {\n                handleDragEnd();\n            }, 200);\n        },\n        [handleDragEnd, itemWidth, items, scope, snapPoints],\n    );\n\n    return useMemo(\n        () => (\n            <StyledSliderButton $isDisabled={isDisabled} ref={sliderButtonRef}>\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                    onDrag={handleWhileDrag}\n                    onDragEnd={handleDragEnd}\n                >\n                    {thumbText}\n                </StyledMotionSliderButtonThumb>\n                <StyledSliderButtonWrapper\n                    $width={!isSliderBigger ? dragRange.right + itemWidth : dragRange.right}\n                    ref={sliderButtonWrapperRef}\n                    onScroll={handleScroll}\n                >\n                    <AnimatePresence>\n                        <StyledSliderButtonButtonsWrapper>\n                            {buttons}\n                        </StyledSliderButtonButtonsWrapper>\n                    </AnimatePresence>\n                </StyledSliderButtonWrapper>\n            </StyledSliderButton>\n        ),\n        [\n            buttons,\n            dragRange,\n            handleDragEnd,\n            handleScroll,\n            handleWhileDrag,\n            isDisabled,\n            isSliderBigger,\n            itemWidth,\n            scope,\n            thumbText,\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

@@ -3,11 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSliderButtonItem = exports.StyledSliderButton = exports.StyledMotionSliderButtonThumb = void 0;
+exports.StyledSliderButtonWrapper = exports.StyledSliderButtonItem = exports.StyledSliderButtonButtonsWrapper = exports.StyledSliderButton = exports.StyledMotionSliderButtonThumb = void 0;
 var _framerMotion = require("framer-motion");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const StyledSliderButton = exports.StyledSliderButton = _styledComponents.default.div`
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
+    width: 100%;
+`;
+const StyledSliderButtonWrapper = exports.StyledSliderButtonWrapper = _styledComponents.default.div`
     align-items: center;
     background-color: ${({
   theme
@@ -18,15 +24,16 @@ const StyledSliderButton = exports.StyledSliderButton = _styledComponents.defaul
     cursor: pointer;
     display: inline-flex;
     line-height: 1.15;
-    min-height: 32px;
-    opacity: ${({
-  $isDisabled
-}) => $isDisabled ? 0.5 : 1};
+    height: 32px;
     position: relative;
     user-select: none;
     transition: opacity 0.3s ease;
     z-index: 1;
 
+    width: ${({
+  $width
+}) => $width}px;
+
     max-width: 100%;
     overflow-x: scroll;
 
@@ -54,6 +61,11 @@ const StyledSliderButtonItem = exports.StyledSliderButtonItem = _styledComponent
     display: flex;
     justify-content: center;
 `;
+const StyledSliderButtonButtonsWrapper = exports.StyledSliderButtonButtonsWrapper = _styledComponents.default.div`
+    position: absolute;
+    display: flex;
+    align-items: center;
+`;
 const StyledMotionSliderButtonThumb = exports.StyledMotionSliderButtonThumb = (0, _styledComponents.default)(_framerMotion.motion.div)`
     font-size: 110%;
     font-family: 'Roboto Medium', serif;
@@ -67,9 +79,11 @@ const StyledMotionSliderButtonThumb = exports.StyledMotionSliderButtonThumb = (0
     border-radius: 3px;
     box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
     z-index: 3;
-    height: 100%;
+    height: 32px;
     padding: 7px 12px;
     display: flex;
     justify-content: center;
+    align-items: center;
+    cursor: pointer;
 `;
 //# sourceMappingURL=SliderButton.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SliderButton.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledSliderButton","exports","styled","div","theme","$isDisabled","StyledSliderButtonItem","$width","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    align-items: center;\n    background-color: ${({ theme }: StyledSliderButtonProps) => theme['404']};\n    border-radius: 3px;\n    border: none;\n    color: white;\n    cursor: pointer;\n    display: inline-flex;\n    line-height: 1.15;\n    min-height: 32px;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    user-select: none;\n    transition: opacity 0.3s ease;\n    z-index: 1;\n\n    max-width: 100%;\n    overflow-x: scroll;\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<{ $isSelected: boolean; $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    justify-content: center;\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 }: StyledMotionSliderButtonThumbProps) => theme['408']};\n    width: ${({ $width }) => $width}px;\n    position: absolute;\n    border-radius: 3px;\n    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n    z-index: 3;\n    height: 100%;\n    padding: 7px 12px;\n    display: flex;\n    justify-content: center;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAKhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA6B;AACtE;AACA,wBAAwB,CAAC;EAAEC;AAA+B,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAE;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAG;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,sBAAsB,GAAAL,OAAA,CAAAK,sBAAA,GAAGJ,yBAAM,CAACC,GAAiC;AAC9E;AACA;AACA;AACA,iBAAiB,CAAC;EAAEI;AAAO,CAAC,KAAKA,MAAO;AACxC,iBAAiB,CAAC;EAAEA;AAAO,CAAC,KAAKA,MAAO;AACxC;AACA;AACA,CAAC;AAIM,MAAMC,6BAA6B,GAAAP,OAAA,CAAAO,6BAAA,GAAG,IAAAN,yBAAM,EAACO,oBAAM,CAACN,GAAG,CAAsC;AACpG;AACA;AACA,wBAAwB,CAAC;EAAEC;AAA0C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAE;AACxF,aAAa,CAAC;EAAEG;AAAO,CAAC,KAAKA,MAAO;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"SliderButton.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledSliderButton","exports","styled","div","$isDisabled","StyledSliderButtonWrapper","theme","$width","StyledSliderButtonItem","StyledSliderButtonButtonsWrapper","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`;\n\ntype StyledSliderButtonWrapperProps = WithTheme<{ $width: number }>;\n\nexport const StyledSliderButtonWrapper = styled.div<StyledSliderButtonWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledSliderButtonProps) => theme['404']};\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    z-index: 1;\n\n    width: ${({ $width }) => $width}px;\n\n    max-width: 100%;\n    overflow-x: scroll;\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<{ $isSelected: boolean; $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    justify-content: center;\n`;\n\nexport const StyledSliderButtonButtonsWrapper = styled.div`\n    position: absolute;\n    display: flex;\n    align-items: center;\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 }: StyledMotionSliderButtonThumbProps) => theme['408']};\n    width: ${({ $width }) => $width}px;\n    position: absolute;\n    border-radius: 3px;\n    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n    z-index: 3;\n    height: 32px;\n    padding: 7px 12px;\n    display: flex;\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,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAKhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA6B;AACtE,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAG;AAC5D;AACA,CAAC;AAIM,MAAMC,yBAAyB,GAAAJ,OAAA,CAAAI,yBAAA,GAAGH,yBAAM,CAACC,GAAoC;AACpF;AACA,wBAAwB,CAAC;EAAEG;AAA+B,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAE;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAO;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,sBAAsB,GAAAP,OAAA,CAAAO,sBAAA,GAAGN,yBAAM,CAACC,GAAiC;AAC9E;AACA;AACA;AACA,iBAAiB,CAAC;EAAEI;AAAO,CAAC,KAAKA,MAAO;AACxC,iBAAiB,CAAC;EAAEA;AAAO,CAAC,KAAKA,MAAO;AACxC;AACA;AACA,CAAC;AAEM,MAAME,gCAAgC,GAAAR,OAAA,CAAAQ,gCAAA,GAAGP,yBAAM,CAACC,GAAI;AAC3D;AACA;AACA;AACA,CAAC;AAIM,MAAMO,6BAA6B,GAAAT,OAAA,CAAAS,6BAAA,GAAG,IAAAR,yBAAM,EAACS,oBAAM,CAACR,GAAG,CAAsC;AACpG;AACA;AACA,wBAAwB,CAAC;EAAEG;AAA0C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAE;AACxF,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAO;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/utils/sliderButton.js

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.getThumbPosition = exports.getNearestPoint = void 0;
 const getNearestPoint = ({
   snapPoints,
-  position
+  position,
+  scrollLeft
 }) => {
   let nearestIndex = -1;
   let nearestPoint = -Infinity;
   for (let i = 0; i < snapPoints.length; i++) {
     const index = snapPoints[i];
-    if (index && index < position && index > nearestPoint) {
+    if (index && index < position + scrollLeft && index > nearestPoint) {
       nearestPoint = index;
       nearestIndex = i;
     }
@@ -44,10 +45,14 @@ const getThumbPosition = ({
       position = parseFloat(match[1]);
     }
   }
-  if (!position) {
+  if (typeof position !== 'number' && !position) {
     return undefined;
   }
-  return position + itemWidth / 2;
+  return {
+    left: position,
+    right: position + itemWidth,
+    middle: position + itemWidth / 2
+  };
 };
 exports.getThumbPosition = getThumbPosition;
 //# sourceMappingURL=sliderButton.js.map

package/lib/cjs/utils/sliderButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"sliderButton.js","names":["getNearestPoint","snapPoints","position","nearestIndex","nearestPoint","Infinity","i","length","index","exports","getThumbPosition","itemWidth","scope","current","undefined","transform","style","match","parseFloat"],"sources":["../../../src/utils/sliderButton.ts"],"sourcesContent":["import type { AnimationScope } from 'framer-motion';\n\ninterface GetNearestPointProps {\n    position: number;\n    snapPoints: number[];\n}\nexport const getNearestPoint = ({ snapPoints, position }: GetNearestPointProps) => {\n    let nearestIndex = -1;\n    let nearestPoint = -Infinity;\n\n    for (let i = 0; i < snapPoints.length; i++) {\n        const index = snapPoints[i];\n\n        if (index && index < position && index > nearestPoint) {\n            nearestPoint = index;\n            nearestIndex = i;\n        }\n    }\n\n    nearestIndex = nearestIndex === -1 ? 0 : nearestIndex;\n    nearestPoint = nearestPoint === -Infinity ? 0 : nearestPoint;\n\n    return { nearestIndex, nearestPoint };\n};\n\ninterface GetThumbPositionProps {\n    scope: AnimationScope;\n    itemWidth: number;\n}\n\nexport const getThumbPosition = ({ itemWidth, scope }: GetThumbPositionProps) => {\n    if (!scope.current) {\n        return undefined;\n    }\n\n    const { transform } = (scope.current as HTMLElement).style;\n    let position;\n\n    if (transform === 'none') {\n        position = 0;\n    } else {\n        const match = transform.match(/translateX\\(([-\\d.]+)px\\)/);\n\n        if (match && match[1]) {\n            position = parseFloat(match[1]);\n        }\n    }\n\n    if (!position) {\n        return undefined;\n    }\n\n    return position + itemWidth / 2;\n};\n"],"mappings":";;;;;;AAMO,MAAMA,eAAe,GAAGA,CAAC;EAAEC,UAAU;EAAEC;AAA+B,CAAC,KAAK;EAC/E,IAAIC,YAAY,GAAG,CAAC,CAAC;EACrB,IAAIC,YAAY,GAAG,CAACC,QAAQ;EAE5B,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGL,UAAU,CAACM,MAAM,EAAED,CAAC,EAAE,EAAE;IACxC,MAAME,KAAK,GAAGP,UAAU,CAACK,CAAC,CAAC;IAE3B,IAAIE,KAAK,IAAIA,KAAK,GAAGN,QAAQ,IAAIM,KAAK,GAAGJ,YAAY,EAAE;MACnDA,YAAY,GAAGI,KAAK;MACpBL,YAAY,GAAGG,CAAC;IACpB;EACJ;EAEAH,YAAY,GAAGA,YAAY,KAAK,CAAC,CAAC,GAAG,CAAC,GAAGA,YAAY;EACrDC,YAAY,GAAGA,YAAY,KAAK,CAACC,QAAQ,GAAG,CAAC,GAAGD,YAAY;EAE5D,OAAO;IAAED,YAAY;IAAEC;EAAa,CAAC;AACzC,CAAC;AAACK,OAAA,CAAAT,eAAA,GAAAA,eAAA;AAOK,MAAMU,gBAAgB,GAAGA,CAAC;EAAEC,SAAS;EAAEC;AAA6B,CAAC,KAAK;EAC7E,IAAI,CAACA,KAAK,CAACC,OAAO,EAAE;IAChB,OAAOC,SAAS;EACpB;EAEA,MAAM;IAAEC;EAAU,CAAC,GAAIH,KAAK,CAACC,OAAO,CAAiBG,KAAK;EAC1D,IAAId,QAAQ;EAEZ,IAAIa,SAAS,KAAK,MAAM,EAAE;IACtBb,QAAQ,GAAG,CAAC;EAChB,CAAC,MAAM;IACH,MAAMe,KAAK,GAAGF,SAAS,CAACE,KAAK,CAAC,2BAA2B,CAAC;IAE1D,IAAIA,KAAK,IAAIA,KAAK,CAAC,CAAC,CAAC,EAAE;MACnBf,QAAQ,GAAGgB,UAAU,CAACD,KAAK,CAAC,CAAC,CAAC,CAAC;IACnC;EACJ;EAEA,IAAI,CAACf,QAAQ,EAAE;IACX,OAAOY,SAAS;EACpB;EAEA,OAAOZ,QAAQ,GAAGS,SAAS,GAAG,CAAC;AACnC,CAAC;AAACF,OAAA,CAAAC,gBAAA,GAAAA,gBAAA","ignoreList":[]}
+{"version":3,"file":"sliderButton.js","names":["getNearestPoint","snapPoints","position","scrollLeft","nearestIndex","nearestPoint","Infinity","i","length","index","exports","getThumbPosition","itemWidth","scope","current","undefined","transform","style","match","parseFloat","left","right","middle"],"sources":["../../../src/utils/sliderButton.ts"],"sourcesContent":["import type { AnimationScope } from 'framer-motion';\n\ninterface GetNearestPointProps {\n    position: number;\n    snapPoints: number[];\n    scrollLeft: number;\n}\nexport const getNearestPoint = ({ snapPoints, position, scrollLeft }: GetNearestPointProps) => {\n    let nearestIndex = -1;\n    let nearestPoint = -Infinity;\n\n    for (let i = 0; i < snapPoints.length; i++) {\n        const index = snapPoints[i];\n\n        if (index && index < position + scrollLeft && index > nearestPoint) {\n            nearestPoint = index;\n            nearestIndex = i;\n        }\n    }\n\n    nearestIndex = nearestIndex === -1 ? 0 : nearestIndex;\n    nearestPoint = nearestPoint === -Infinity ? 0 : nearestPoint;\n\n    return { nearestIndex, nearestPoint };\n};\n\ninterface GetThumbPositionProps {\n    scope: AnimationScope;\n    itemWidth: number;\n}\n\nexport const getThumbPosition = ({ itemWidth, scope }: GetThumbPositionProps) => {\n    if (!scope.current) {\n        return undefined;\n    }\n\n    const { transform } = (scope.current as HTMLElement).style;\n    let position;\n\n    if (transform === 'none') {\n        position = 0;\n    } else {\n        const match = transform.match(/translateX\\(([-\\d.]+)px\\)/);\n\n        if (match && match[1]) {\n            position = parseFloat(match[1]);\n        }\n    }\n\n    if (typeof position !== 'number' && !position) {\n        return undefined;\n    }\n\n    return { left: position, right: position + itemWidth, middle: position + itemWidth / 2 };\n};\n"],"mappings":";;;;;;AAOO,MAAMA,eAAe,GAAGA,CAAC;EAAEC,UAAU;EAAEC,QAAQ;EAAEC;AAAiC,CAAC,KAAK;EAC3F,IAAIC,YAAY,GAAG,CAAC,CAAC;EACrB,IAAIC,YAAY,GAAG,CAACC,QAAQ;EAE5B,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGN,UAAU,CAACO,MAAM,EAAED,CAAC,EAAE,EAAE;IACxC,MAAME,KAAK,GAAGR,UAAU,CAACM,CAAC,CAAC;IAE3B,IAAIE,KAAK,IAAIA,KAAK,GAAGP,QAAQ,GAAGC,UAAU,IAAIM,KAAK,GAAGJ,YAAY,EAAE;MAChEA,YAAY,GAAGI,KAAK;MACpBL,YAAY,GAAGG,CAAC;IACpB;EACJ;EAEAH,YAAY,GAAGA,YAAY,KAAK,CAAC,CAAC,GAAG,CAAC,GAAGA,YAAY;EACrDC,YAAY,GAAGA,YAAY,KAAK,CAACC,QAAQ,GAAG,CAAC,GAAGD,YAAY;EAE5D,OAAO;IAAED,YAAY;IAAEC;EAAa,CAAC;AACzC,CAAC;AAACK,OAAA,CAAAV,eAAA,GAAAA,eAAA;AAOK,MAAMW,gBAAgB,GAAGA,CAAC;EAAEC,SAAS;EAAEC;AAA6B,CAAC,KAAK;EAC7E,IAAI,CAACA,KAAK,CAACC,OAAO,EAAE;IAChB,OAAOC,SAAS;EACpB;EAEA,MAAM;IAAEC;EAAU,CAAC,GAAIH,KAAK,CAACC,OAAO,CAAiBG,KAAK;EAC1D,IAAIf,QAAQ;EAEZ,IAAIc,SAAS,KAAK,MAAM,EAAE;IACtBd,QAAQ,GAAG,CAAC;EAChB,CAAC,MAAM;IACH,MAAMgB,KAAK,GAAGF,SAAS,CAACE,KAAK,CAAC,2BAA2B,CAAC;IAE1D,IAAIA,KAAK,IAAIA,KAAK,CAAC,CAAC,CAAC,EAAE;MACnBhB,QAAQ,GAAGiB,UAAU,CAACD,KAAK,CAAC,CAAC,CAAC,CAAC;IACnC;EACJ;EAEA,IAAI,OAAOhB,QAAQ,KAAK,QAAQ,IAAI,CAACA,QAAQ,EAAE;IAC3C,OAAOa,SAAS;EACpB;EAEA,OAAO;IAAEK,IAAI,EAAElB,QAAQ;IAAEmB,KAAK,EAAEnB,QAAQ,GAAGU,SAAS;IAAEU,MAAM,EAAEpB,QAAQ,GAAGU,SAAS,GAAG;EAAE,CAAC;AAC5F,CAAC;AAACF,OAAA,CAAAC,gBAAA,GAAAA,gBAAA","ignoreList":[]}

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

@@ -1,8 +1,9 @@
 import { AnimatePresence, useAnimate } from 'framer-motion';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useElementSize } from '../../hooks/useElementSize';
 import { calculateBiggestWidth } from '../../utils/calculate';
 import { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';
-import { StyledMotionSliderButtonThumb, StyledSliderButton, StyledSliderButtonItem } from './SliderButton.styles';
+import { StyledMotionSliderButtonThumb, StyledSliderButton, StyledSliderButtonButtonsWrapper, StyledSliderButtonItem, StyledSliderButtonWrapper } from './SliderButton.styles';
 const SliderButton = _ref => {
   let {
     selectedButtonId,
@@ -16,14 +17,23 @@ const SliderButton = _ref => {
     right: 0
   });
   const sliderButtonRef = useRef(null);
+  const sliderButtonWrapperRef = useRef(null);
+  const timeout = useRef();
+  const preventHandleScroll = useRef(false);
   const [scope, animate] = useAnimate();
   const itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);
+  const sliderSize = useElementSize(sliderButtonRef);
+  const isSliderBigger = useMemo(() => sliderSize && sliderSize.width < itemWidth * (items.length - 1), [itemWidth, items.length, sliderSize]);
   useEffect(() => {
-    setDragRange({
-      left: 0,
-      right: itemWidth * (items.length - 1)
-    });
-  }, [itemWidth, items.length]);
+    if (sliderSize) {
+      const sliderWidth = itemWidth * (items.length - 1);
+      const count = Math.floor(sliderSize.width / itemWidth);
+      setDragRange({
+        left: 0,
+        right: isSliderBigger ? itemWidth * count : sliderWidth
+      });
+    }
+  }, [isSliderBigger, itemWidth, items.length, sliderSize]);
   const animation = useCallback(async x => {
     await animate(scope.current, {
       x
@@ -56,8 +66,20 @@ const SliderButton = _ref => {
     if (typeof onChange === 'function') {
       onChange(id);
     }
-    void animation(itemWidth * index);
-  }, [animation, isDisabled, itemWidth, onChange]);
+    if (!isSliderBigger) {
+      void animation(itemWidth * index);
+      return;
+    }
+    const count = dragRange.right / itemWidth;
+    if (items.length - count >= index) {
+      void animation(0);
+    } else {
+      void animation(itemWidth * (count - (items.length - index)));
+    }
+    if (sliderButtonWrapperRef.current) {
+      sliderButtonWrapperRef.current.scrollLeft = itemWidth * index;
+    }
+  }, [animation, dragRange.right, isDisabled, isSliderBigger, itemWidth, items.length, onChange]);
   const buttons = useMemo(() => items.map((_ref3, index) => {
     let {
       id,
@@ -99,21 +121,44 @@ const SliderButton = _ref => {
       return;
     }
     const {
-      nearestPoint,
+      middle,
+      left
+    } = position;
+    let scrollLeft = 0;
+    if (sliderButtonWrapperRef.current) {
+      scrollLeft = sliderButtonWrapperRef.current.scrollLeft;
+      sliderButtonWrapperRef.current.scrollLeft = getNearestPoint({
+        snapPoints,
+        position: middle,
+        scrollLeft: scrollLeft - left
+      }).nearestPoint;
+    }
+    const {
       nearestIndex
     } = getNearestPoint({
       snapPoints,
-      position
+      position: middle,
+      scrollLeft
+    });
+    const {
+      nearestPoint
+    } = getNearestPoint({
+      snapPoints,
+      position: middle,
+      scrollLeft: 0
     });
     if (nearestPoint >= 0 && nearestIndex >= 0) {
       void animation(nearestPoint);
       const id = items[nearestIndex]?.id;
+      setSelectedButton(id);
       if (typeof onChange === 'function' && id) {
         onChange(id);
       }
     }
+    preventHandleScroll.current = false;
   }, [animation, itemWidth, items, onChange, scope, snapPoints]);
   const handleWhileDrag = useCallback(() => {
+    preventHandleScroll.current = true;
     const position = getThumbPosition({
       scope,
       itemWidth
@@ -121,33 +166,94 @@ const SliderButton = _ref => {
     if (!position) {
       return;
     }
-    if (sliderButtonRef.current) {
-      sliderButtonRef.current.scrollLeft = (position - itemWidth / 2) / 1.1;
+    const {
+      right,
+      left,
+      middle
+    } = position;
+    let scrollLeft = 0;
+    const scrollSpeed = 3;
+    if (sliderButtonWrapperRef.current) {
+      if (right >= dragRange.right) {
+        sliderButtonWrapperRef.current.scrollLeft += scrollSpeed;
+      }
+      if (left <= dragRange.left) {
+        sliderButtonWrapperRef.current.scrollLeft -= scrollSpeed;
+      }
+      scrollLeft = sliderButtonWrapperRef.current.scrollLeft;
+    }
+    const {
+      nearestIndex
+    } = getNearestPoint({
+      snapPoints,
+      position: middle,
+      scrollLeft
+    });
+    if (nearestIndex >= 0) {
+      setSelectedButton(items[nearestIndex]?.id);
+    }
+  }, [dragRange, itemWidth, items, scope, snapPoints]);
+
+  // With this, the handleScroll works before the thumb is moved the first time.
+  useEffect(() => {
+    void animation(1);
+    void animation(0);
+  }, [animation]);
+  const handleScroll = useCallback(event => {
+    if (preventHandleScroll.current) {
+      return;
+    }
+    const position = getThumbPosition({
+      scope,
+      itemWidth
+    });
+    if (!position) {
+      return;
     }
+    const {
+      middle
+    } = position;
+    const {
+      scrollLeft
+    } = event.target;
     const {
       nearestIndex
     } = getNearestPoint({
       snapPoints,
-      position
+      position: middle,
+      scrollLeft
     });
     if (nearestIndex >= 0) {
       setSelectedButton(items[nearestIndex]?.id);
     }
-  }, [itemWidth, items, scope, snapPoints]);
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+    timeout.current = window.setTimeout(() => {
+      handleDragEnd();
+    }, 200);
+  }, [handleDragEnd, itemWidth, items, scope, snapPoints]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledSliderButton, {
     $isDisabled: isDisabled,
     ref: sliderButtonRef
-  }, /*#__PURE__*/React.createElement(AnimatePresence, null, buttons, /*#__PURE__*/React.createElement(StyledMotionSliderButtonThumb, {
+  }, /*#__PURE__*/React.createElement(StyledMotionSliderButtonThumb, {
     ref: scope,
     drag: isDisabled ? false : 'x',
     dragElastic: 0,
-    dragConstraints: {
+    dragConstraints: isSliderBigger ? {
+      ...dragRange,
+      right: dragRange.right - itemWidth
+    } : {
       ...dragRange
     },
     $width: itemWidth,
     onDrag: handleWhileDrag,
     onDragEnd: handleDragEnd
-  }, thumbText))), [buttons, dragRange, handleDragEnd, handleWhileDrag, isDisabled, itemWidth, scope, thumbText]);
+  }, thumbText), /*#__PURE__*/React.createElement(StyledSliderButtonWrapper, {
+    $width: !isSliderBigger ? dragRange.right + itemWidth : dragRange.right,
+    ref: sliderButtonWrapperRef,
+    onScroll: handleScroll
+  }, /*#__PURE__*/React.createElement(AnimatePresence, null, /*#__PURE__*/React.createElement(StyledSliderButtonButtonsWrapper, null, buttons)))), [buttons, dragRange, handleDragEnd, handleScroll, handleWhileDrag, isDisabled, isSliderBigger, itemWidth, scope, thumbText]);
 };
 SliderButton.displayName = 'SliderButton';
 export default SliderButton;

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

@@ -1 +1 @@
-{"version":3,"file":"SliderButton.js","names":["AnimatePresence","useAnimate","React","useCallback","useEffect","useMemo","useRef","useState","calculateBiggestWidth","getNearestPoint","getThumbPosition","StyledMotionSliderButtonThumb","StyledSliderButton","StyledSliderButtonItem","SliderButton","_ref","selectedButtonId","isDisabled","items","onChange","selectedButton","setSelectedButton","undefined","dragRange","setDragRange","left","right","sliderButtonRef","scope","animate","itemWidth","length","animation","x","current","type","duration","index","findIndex","_ref2","id","handleClick","buttons","map","_ref3","text","createElement","$width","key","onClick","$isSelected","thumbText","selectedItem","find","_ref4","snapPoints","points","i","push","handleDragEnd","position","nearestPoint","nearestIndex","handleWhileDrag","scrollLeft","$isDisabled","ref","drag","dragElastic","dragConstraints","onDrag","onDragEnd","displayName"],"sources":["../../../../src/components/slider-button/SliderButton.tsx"],"sourcesContent":["import { AnimatePresence, useAnimate } from 'framer-motion';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { SliderButtonItem } from '../../types/slider-button';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\nimport {\n    StyledMotionSliderButtonThumb,\n    StyledSliderButton,\n    StyledSliderButtonItem,\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 [selectedButton, setSelectedButton] = useState<string | undefined>(undefined);\n    const [dragRange, setDragRange] = useState({ left: 0, right: 0 });\n\n    const sliderButtonRef = useRef<HTMLDivElement>(null);\n\n    const [scope, animate] = useAnimate();\n\n    const itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n\n    useEffect(() => {\n        setDragRange({ left: 0, right: itemWidth * (items.length - 1) });\n    }, [itemWidth, items.length]);\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    useEffect(() => {\n        if (selectedButtonId) {\n            setSelectedButton(selectedButtonId);\n\n            const index = items.findIndex(({ id }) => id === selectedButtonId);\n\n            if (index >= 0) {\n                void animation(itemWidth * index);\n            }\n        } else {\n            setSelectedButton(items[0]?.id);\n        }\n    }, [animation, itemWidth, items, selectedButtonId]);\n\n    const handleClick = useCallback(\n        (id: string, index: number) => {\n            if (isDisabled) {\n                return;\n            }\n\n            setSelectedButton(id);\n\n            if (typeof onChange === 'function') {\n                onChange(id);\n            }\n\n            void animation(itemWidth * index);\n        },\n        [animation, isDisabled, itemWidth, onChange],\n    );\n\n    const buttons = useMemo(\n        () =>\n            items.map(({ id, text }, index) => (\n                <StyledSliderButtonItem\n                    $width={itemWidth}\n                    key={`slider-button-${id}`}\n                    onClick={() => handleClick(id, index)}\n                    $isSelected={id === selectedButton}\n                >\n                    {text}\n                </StyledSliderButtonItem>\n            )),\n        [handleClick, itemWidth, items, selectedButton],\n    );\n\n    const thumbText = useMemo(() => {\n        const selectedItem = items.find(({ id }) => id === selectedButton);\n\n        return selectedItem ? selectedItem.text : '';\n    }, [items, selectedButton]);\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        const position = getThumbPosition({ scope, itemWidth });\n\n        if (!position) {\n            return;\n        }\n\n        const { nearestPoint, nearestIndex } = getNearestPoint({ snapPoints, position });\n\n        if (nearestPoint >= 0 && nearestIndex >= 0) {\n            void animation(nearestPoint);\n\n            const id = items[nearestIndex]?.id;\n\n            if (typeof onChange === 'function' && id) {\n                onChange(id);\n            }\n        }\n    }, [animation, itemWidth, items, onChange, scope, snapPoints]);\n\n    const handleWhileDrag = useCallback(() => {\n        const position = getThumbPosition({ scope, itemWidth });\n\n        if (!position) {\n            return;\n        }\n\n        if (sliderButtonRef.current) {\n            sliderButtonRef.current.scrollLeft = (position - itemWidth / 2) / 1.1;\n        }\n\n        const { nearestIndex } = getNearestPoint({ snapPoints, position });\n\n        if (nearestIndex >= 0) {\n            setSelectedButton(items[nearestIndex]?.id);\n        }\n    }, [itemWidth, items, scope, snapPoints]);\n\n    return useMemo(\n        () => (\n            <StyledSliderButton $isDisabled={isDisabled} ref={sliderButtonRef}>\n                <AnimatePresence>\n                    {buttons}\n                    <StyledMotionSliderButtonThumb\n                        ref={scope}\n                        drag={isDisabled ? false : 'x'}\n                        dragElastic={0}\n                        dragConstraints={{ ...dragRange }}\n                        $width={itemWidth}\n                        onDrag={handleWhileDrag}\n                        onDragEnd={handleDragEnd}\n                    >\n                        {thumbText}\n                    </StyledMotionSliderButtonThumb>\n                </AnimatePresence>\n            </StyledSliderButton>\n        ),\n        [\n            buttons,\n            dragRange,\n            handleDragEnd,\n            handleWhileDrag,\n            isDisabled,\n            itemWidth,\n            scope,\n            thumbText,\n        ],\n    );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SliderButton.js","names":["AnimatePresence","useAnimate","React","useCallback","useEffect","useMemo","useRef","useState","useElementSize","calculateBiggestWidth","getNearestPoint","getThumbPosition","StyledMotionSliderButtonThumb","StyledSliderButton","StyledSliderButtonButtonsWrapper","StyledSliderButtonItem","StyledSliderButtonWrapper","SliderButton","_ref","selectedButtonId","isDisabled","items","onChange","selectedButton","setSelectedButton","undefined","dragRange","setDragRange","left","right","sliderButtonRef","sliderButtonWrapperRef","timeout","preventHandleScroll","scope","animate","itemWidth","sliderSize","isSliderBigger","width","length","sliderWidth","count","Math","floor","animation","x","current","type","duration","index","findIndex","_ref2","id","handleClick","scrollLeft","buttons","map","_ref3","text","createElement","$width","key","onClick","$isSelected","thumbText","selectedItem","find","_ref4","snapPoints","points","i","push","handleDragEnd","position","middle","nearestPoint","nearestIndex","handleWhileDrag","scrollSpeed","handleScroll","event","target","clearTimeout","window","setTimeout","$isDisabled","ref","drag","dragElastic","dragConstraints","onDrag","onDragEnd","onScroll","displayName"],"sources":["../../../../src/components/slider-button/SliderButton.tsx"],"sourcesContent":["import { AnimatePresence, useAnimate } from 'framer-motion';\nimport React, { FC, UIEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport type { SliderButtonItem } from '../../types/slider-button';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\nimport {\n    StyledMotionSliderButtonThumb,\n    StyledSliderButton,\n    StyledSliderButtonButtonsWrapper,\n    StyledSliderButtonItem,\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 [selectedButton, setSelectedButton] = useState<string | undefined>(undefined);\n    const [dragRange, setDragRange] = useState({ left: 0, right: 0 });\n\n    const sliderButtonRef = useRef<HTMLDivElement>(null);\n    const sliderButtonWrapperRef = useRef<HTMLDivElement>(null);\n    const timeout = useRef<number>();\n    const preventHandleScroll = useRef(false);\n\n    const [scope, animate] = useAnimate();\n\n    const itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n\n    const sliderSize = useElementSize(sliderButtonRef);\n\n    const isSliderBigger = useMemo(\n        () => sliderSize && sliderSize.width < itemWidth * (items.length - 1),\n        [itemWidth, items.length, sliderSize],\n    );\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    useEffect(() => {\n        if (selectedButtonId) {\n            setSelectedButton(selectedButtonId);\n\n            const index = items.findIndex(({ id }) => id === selectedButtonId);\n\n            if (index >= 0) {\n                void animation(itemWidth * index);\n            }\n        } else {\n            setSelectedButton(items[0]?.id);\n        }\n    }, [animation, itemWidth, items, selectedButtonId]);\n\n    const handleClick = useCallback(\n        (id: string, index: number) => {\n            if (isDisabled) {\n                return;\n            }\n\n            setSelectedButton(id);\n\n            if (typeof onChange === 'function') {\n                onChange(id);\n            }\n\n            if (!isSliderBigger) {\n                void animation(itemWidth * index);\n\n                return;\n            }\n\n            const count = dragRange.right / itemWidth;\n\n            if (items.length - count >= index) {\n                void animation(0);\n            } else {\n                void animation(itemWidth * (count - (items.length - index)));\n            }\n\n            if (sliderButtonWrapperRef.current) {\n                sliderButtonWrapperRef.current.scrollLeft = itemWidth * index;\n            }\n        },\n        [animation, dragRange.right, isDisabled, isSliderBigger, itemWidth, items.length, onChange],\n    );\n\n    const buttons = useMemo(\n        () =>\n            items.map(({ id, text }, index) => (\n                <StyledSliderButtonItem\n                    $width={itemWidth}\n                    key={`slider-button-${id}`}\n                    onClick={() => handleClick(id, index)}\n                    $isSelected={id === selectedButton}\n                >\n                    {text}\n                </StyledSliderButtonItem>\n            )),\n        [handleClick, itemWidth, items, selectedButton],\n    );\n\n    const thumbText = useMemo(() => {\n        const selectedItem = items.find(({ id }) => id === selectedButton);\n\n        return selectedItem ? selectedItem.text : '';\n    }, [items, selectedButton]);\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        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            const id = items[nearestIndex]?.id;\n\n            setSelectedButton(id);\n\n            if (typeof onChange === 'function' && id) {\n                onChange(id);\n            }\n        }\n\n        preventHandleScroll.current = false;\n    }, [animation, itemWidth, items, onChange, scope, snapPoints]);\n\n    const handleWhileDrag = useCallback(() => {\n        preventHandleScroll.current = true;\n\n        const position = getThumbPosition({ scope, itemWidth });\n\n        if (!position) {\n            return;\n        }\n\n        const { right, left, middle } = position;\n\n        let scrollLeft = 0;\n\n        const scrollSpeed = 3;\n\n        if (sliderButtonWrapperRef.current) {\n            if (right >= dragRange.right) {\n                sliderButtonWrapperRef.current.scrollLeft += scrollSpeed;\n            }\n\n            if (left <= dragRange.left) {\n                sliderButtonWrapperRef.current.scrollLeft -= scrollSpeed;\n            }\n\n            scrollLeft = sliderButtonWrapperRef.current.scrollLeft;\n        }\n\n        const { nearestIndex } = getNearestPoint({ snapPoints, position: middle, scrollLeft });\n\n        if (nearestIndex >= 0) {\n            setSelectedButton(items[nearestIndex]?.id);\n        }\n    }, [dragRange, itemWidth, items, scope, snapPoints]);\n\n    // With this, the handleScroll works before the thumb is moved the first time.\n    useEffect(() => {\n        void animation(1);\n        void animation(0);\n    }, [animation]);\n\n    const handleScroll = useCallback(\n        (event: UIEvent<HTMLElement>) => {\n            if (preventHandleScroll.current) {\n                return;\n            }\n\n            const position = getThumbPosition({ scope, itemWidth });\n\n            if (!position) {\n                return;\n            }\n\n            const { middle } = position;\n\n            const { scrollLeft } = event.target as HTMLDivElement;\n\n            const { nearestIndex } = getNearestPoint({ snapPoints, position: middle, scrollLeft });\n\n            if (nearestIndex >= 0) {\n                setSelectedButton(items[nearestIndex]?.id);\n            }\n\n            if (timeout.current) {\n                clearTimeout(timeout.current);\n            }\n\n            timeout.current = window.setTimeout(() => {\n                handleDragEnd();\n            }, 200);\n        },\n        [handleDragEnd, itemWidth, items, scope, snapPoints],\n    );\n\n    return useMemo(\n        () => (\n            <StyledSliderButton $isDisabled={isDisabled} ref={sliderButtonRef}>\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                    onDrag={handleWhileDrag}\n                    onDragEnd={handleDragEnd}\n                >\n                    {thumbText}\n                </StyledMotionSliderButtonThumb>\n                <StyledSliderButtonWrapper\n                    $width={!isSliderBigger ? dragRange.right + itemWidth : dragRange.right}\n                    ref={sliderButtonWrapperRef}\n                    onScroll={handleScroll}\n                >\n                    <AnimatePresence>\n                        <StyledSliderButtonButtonsWrapper>\n                            {buttons}\n                        </StyledSliderButtonButtonsWrapper>\n                    </AnimatePresence>\n                </StyledSliderButtonWrapper>\n            </StyledSliderButton>\n        ),\n        [\n            buttons,\n            dragRange,\n            handleDragEnd,\n            handleScroll,\n            handleWhileDrag,\n            isDisabled,\n            isSliderBigger,\n            itemWidth,\n            scope,\n            thumbText,\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

@@ -1,11 +1,20 @@
 import { motion } from 'framer-motion';
 import styled from 'styled-components';
 export const StyledSliderButton = styled.div`
+    opacity: ${_ref => {
+  let {
+    $isDisabled
+  } = _ref;
+  return $isDisabled ? 0.5 : 1;
+}};
+    width: 100%;
+`;
+export const StyledSliderButtonWrapper = styled.div`
     align-items: center;
-    background-color: ${_ref => {
+    background-color: ${_ref2 => {
   let {
     theme
-  } = _ref;
+  } = _ref2;
   return theme['404'];
 }};
     border-radius: 3px;
@@ -14,18 +23,19 @@ export const StyledSliderButton = styled.div`
     cursor: pointer;
     display: inline-flex;
     line-height: 1.15;
-    min-height: 32px;
-    opacity: ${_ref2 => {
-  let {
-    $isDisabled
-  } = _ref2;
-  return $isDisabled ? 0.5 : 1;
-}};
+    height: 32px;
     position: relative;
     user-select: none;
     transition: opacity 0.3s ease;
     z-index: 1;
 
+    width: ${_ref3 => {
+  let {
+    $width
+  } = _ref3;
+  return $width;
+}}px;
+
     max-width: 100%;
     overflow-x: scroll;
 
@@ -44,43 +54,50 @@ export const StyledSliderButtonItem = styled.div`
     font-size: 110%;
     font-family: 'Roboto Medium', serif;
     padding: 7px 12px;
-    min-width: ${_ref3 => {
+    min-width: ${_ref4 => {
   let {
     $width
-  } = _ref3;
+  } = _ref4;
   return $width;
 }}px;
-    max-width: ${_ref4 => {
+    max-width: ${_ref5 => {
   let {
     $width
-  } = _ref4;
+  } = _ref5;
   return $width;
 }}px;
     display: flex;
     justify-content: center;
 `;
+export const StyledSliderButtonButtonsWrapper = styled.div`
+    position: absolute;
+    display: flex;
+    align-items: center;
+`;
 export const StyledMotionSliderButtonThumb = styled(motion.div)`
     font-size: 110%;
     font-family: 'Roboto Medium', serif;
-    background-color: ${_ref5 => {
+    background-color: ${_ref6 => {
   let {
     theme
-  } = _ref5;
+  } = _ref6;
   return theme['408'];
 }};
-    width: ${_ref6 => {
+    width: ${_ref7 => {
   let {
     $width
-  } = _ref6;
+  } = _ref7;
   return $width;
 }}px;
     position: absolute;
     border-radius: 3px;
     box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
     z-index: 3;
-    height: 100%;
+    height: 32px;
     padding: 7px 12px;
     display: flex;
     justify-content: center;
+    align-items: center;
+    cursor: pointer;
 `;
 //# sourceMappingURL=SliderButton.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SliderButton.styles.js","names":["motion","styled","StyledSliderButton","div","_ref","theme","_ref2","$isDisabled","StyledSliderButtonItem","_ref3","$width","_ref4","StyledMotionSliderButtonThumb","_ref5","_ref6"],"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    align-items: center;\n    background-color: ${({ theme }: StyledSliderButtonProps) => theme['404']};\n    border-radius: 3px;\n    border: none;\n    color: white;\n    cursor: pointer;\n    display: inline-flex;\n    line-height: 1.15;\n    min-height: 32px;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    user-select: none;\n    transition: opacity 0.3s ease;\n    z-index: 1;\n\n    max-width: 100%;\n    overflow-x: scroll;\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<{ $isSelected: boolean; $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    justify-content: center;\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 }: StyledMotionSliderButtonThumbProps) => theme['408']};\n    width: ${({ $width }) => $width}px;\n    position: absolute;\n    border-radius: 3px;\n    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n    z-index: 3;\n    height: 100%;\n    padding: 7px 12px;\n    display: flex;\n    justify-content: center;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAA6B;AACtE;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAA+B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OAAMC,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGP,MAAM,CAACE,GAAiC;AAC9E;AACA;AACA;AACA,iBAAiBM,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA,CAAC;AACxC,iBAAiBC,KAAA;EAAA,IAAC;IAAED;EAAO,CAAC,GAAAC,KAAA;EAAA,OAAKD,MAAM;AAAA,CAAC;AACxC;AACA;AACA,CAAC;AAID,OAAO,MAAME,6BAA6B,GAAGX,MAAM,CAACD,MAAM,CAACG,GAAG,CAAsC;AACpG;AACA;AACA,wBAAwBU,KAAA;EAAA,IAAC;IAAER;EAA0C,CAAC,GAAAQ,KAAA;EAAA,OAAKR,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACxF,aAAaS,KAAA;EAAA,IAAC;IAAEJ;EAAO,CAAC,GAAAI,KAAA;EAAA,OAAKJ,MAAM;AAAA,CAAC;AACpC;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","StyledSliderButtonItem","_ref4","_ref5","StyledSliderButtonButtonsWrapper","StyledMotionSliderButtonThumb","_ref6","_ref7"],"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`;\n\ntype StyledSliderButtonWrapperProps = WithTheme<{ $width: number }>;\n\nexport const StyledSliderButtonWrapper = styled.div<StyledSliderButtonWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledSliderButtonProps) => theme['404']};\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    z-index: 1;\n\n    width: ${({ $width }) => $width}px;\n\n    max-width: 100%;\n    overflow-x: scroll;\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<{ $isSelected: boolean; $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    justify-content: center;\n`;\n\nexport const StyledSliderButtonButtonsWrapper = styled.div`\n    position: absolute;\n    display: flex;\n    align-items: center;\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 }: StyledMotionSliderButtonThumbProps) => theme['408']};\n    width: ${({ $width }) => $width}px;\n    position: absolute;\n    border-radius: 3px;\n    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n    z-index: 3;\n    height: 32px;\n    padding: 7px 12px;\n    display: flex;\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,GAA6B;AACtE,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC5D;AACA,CAAC;AAID,OAAO,MAAMC,yBAAyB,GAAGL,MAAM,CAACE,GAAoC;AACpF;AACA,wBAAwBI,KAAA;EAAA,IAAC;IAAEC;EAA+B,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA,CAAC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGV,MAAM,CAACE,GAAiC;AAC9E;AACA;AACA;AACA,iBAAiBS,KAAA;EAAA,IAAC;IAAEF;EAAO,CAAC,GAAAE,KAAA;EAAA,OAAKF,MAAM;AAAA,CAAC;AACxC,iBAAiBG,KAAA;EAAA,IAAC;IAAEH;EAAO,CAAC,GAAAG,KAAA;EAAA,OAAKH,MAAM;AAAA,CAAC;AACxC;AACA;AACA,CAAC;AAED,OAAO,MAAMI,gCAAgC,GAAGb,MAAM,CAACE,GAAI;AAC3D;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMY,6BAA6B,GAAGd,MAAM,CAACD,MAAM,CAACG,GAAG,CAAsC;AACpG;AACA;AACA,wBAAwBa,KAAA;EAAA,IAAC;IAAER;EAA0C,CAAC,GAAAQ,KAAA;EAAA,OAAKR,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACxF,aAAaS,KAAA;EAAA,IAAC;IAAEP;EAAO,CAAC,GAAAO,KAAA;EAAA,OAAKP,MAAM;AAAA,CAAC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/utils/sliderButton.js

@@ -1,13 +1,14 @@
 export const getNearestPoint = _ref => {
   let {
     snapPoints,
-    position
+    position,
+    scrollLeft
   } = _ref;
   let nearestIndex = -1;
   let nearestPoint = -Infinity;
   for (let i = 0; i < snapPoints.length; i++) {
     const index = snapPoints[i];
-    if (index && index < position && index > nearestPoint) {
+    if (index && index < position + scrollLeft && index > nearestPoint) {
       nearestPoint = index;
       nearestIndex = i;
     }
@@ -39,9 +40,13 @@ export const getThumbPosition = _ref2 => {
       position = parseFloat(match[1]);
     }
   }
-  if (!position) {
+  if (typeof position !== 'number' && !position) {
     return undefined;
   }
-  return position + itemWidth / 2;
+  return {
+    left: position,
+    right: position + itemWidth,
+    middle: position + itemWidth / 2
+  };
 };
 //# sourceMappingURL=sliderButton.js.map

package/lib/esm/utils/sliderButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"sliderButton.js","names":["getNearestPoint","_ref","snapPoints","position","nearestIndex","nearestPoint","Infinity","i","length","index","getThumbPosition","_ref2","itemWidth","scope","current","undefined","transform","style","match","parseFloat"],"sources":["../../../src/utils/sliderButton.ts"],"sourcesContent":["import type { AnimationScope } from 'framer-motion';\n\ninterface GetNearestPointProps {\n    position: number;\n    snapPoints: number[];\n}\nexport const getNearestPoint = ({ snapPoints, position }: GetNearestPointProps) => {\n    let nearestIndex = -1;\n    let nearestPoint = -Infinity;\n\n    for (let i = 0; i < snapPoints.length; i++) {\n        const index = snapPoints[i];\n\n        if (index && index < position && index > nearestPoint) {\n            nearestPoint = index;\n            nearestIndex = i;\n        }\n    }\n\n    nearestIndex = nearestIndex === -1 ? 0 : nearestIndex;\n    nearestPoint = nearestPoint === -Infinity ? 0 : nearestPoint;\n\n    return { nearestIndex, nearestPoint };\n};\n\ninterface GetThumbPositionProps {\n    scope: AnimationScope;\n    itemWidth: number;\n}\n\nexport const getThumbPosition = ({ itemWidth, scope }: GetThumbPositionProps) => {\n    if (!scope.current) {\n        return undefined;\n    }\n\n    const { transform } = (scope.current as HTMLElement).style;\n    let position;\n\n    if (transform === 'none') {\n        position = 0;\n    } else {\n        const match = transform.match(/translateX\\(([-\\d.]+)px\\)/);\n\n        if (match && match[1]) {\n            position = parseFloat(match[1]);\n        }\n    }\n\n    if (!position) {\n        return undefined;\n    }\n\n    return position + itemWidth / 2;\n};\n"],"mappings":"AAMA,OAAO,MAAMA,eAAe,GAAGC,IAAA,IAAoD;EAAA,IAAnD;IAAEC,UAAU;IAAEC;EAA+B,CAAC,GAAAF,IAAA;EAC1E,IAAIG,YAAY,GAAG,CAAC,CAAC;EACrB,IAAIC,YAAY,GAAG,CAACC,QAAQ;EAE5B,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGL,UAAU,CAACM,MAAM,EAAED,CAAC,EAAE,EAAE;IACxC,MAAME,KAAK,GAAGP,UAAU,CAACK,CAAC,CAAC;IAE3B,IAAIE,KAAK,IAAIA,KAAK,GAAGN,QAAQ,IAAIM,KAAK,GAAGJ,YAAY,EAAE;MACnDA,YAAY,GAAGI,KAAK;MACpBL,YAAY,GAAGG,CAAC;IACpB;EACJ;EAEAH,YAAY,GAAGA,YAAY,KAAK,CAAC,CAAC,GAAG,CAAC,GAAGA,YAAY;EACrDC,YAAY,GAAGA,YAAY,KAAK,CAACC,QAAQ,GAAG,CAAC,GAAGD,YAAY;EAE5D,OAAO;IAAED,YAAY;IAAEC;EAAa,CAAC;AACzC,CAAC;AAOD,OAAO,MAAMK,gBAAgB,GAAGC,KAAA,IAAiD;EAAA,IAAhD;IAAEC,SAAS;IAAEC;EAA6B,CAAC,GAAAF,KAAA;EACxE,IAAI,CAACE,KAAK,CAACC,OAAO,EAAE;IAChB,OAAOC,SAAS;EACpB;EAEA,MAAM;IAAEC;EAAU,CAAC,GAAIH,KAAK,CAACC,OAAO,CAAiBG,KAAK;EAC1D,IAAId,QAAQ;EAEZ,IAAIa,SAAS,KAAK,MAAM,EAAE;IACtBb,QAAQ,GAAG,CAAC;EAChB,CAAC,MAAM;IACH,MAAMe,KAAK,GAAGF,SAAS,CAACE,KAAK,CAAC,2BAA2B,CAAC;IAE1D,IAAIA,KAAK,IAAIA,KAAK,CAAC,CAAC,CAAC,EAAE;MACnBf,QAAQ,GAAGgB,UAAU,CAACD,KAAK,CAAC,CAAC,CAAC,CAAC;IACnC;EACJ;EAEA,IAAI,CAACf,QAAQ,EAAE;IACX,OAAOY,SAAS;EACpB;EAEA,OAAOZ,QAAQ,GAAGS,SAAS,GAAG,CAAC;AACnC,CAAC","ignoreList":[]}
+{"version":3,"file":"sliderButton.js","names":["getNearestPoint","_ref","snapPoints","position","scrollLeft","nearestIndex","nearestPoint","Infinity","i","length","index","getThumbPosition","_ref2","itemWidth","scope","current","undefined","transform","style","match","parseFloat","left","right","middle"],"sources":["../../../src/utils/sliderButton.ts"],"sourcesContent":["import type { AnimationScope } from 'framer-motion';\n\ninterface GetNearestPointProps {\n    position: number;\n    snapPoints: number[];\n    scrollLeft: number;\n}\nexport const getNearestPoint = ({ snapPoints, position, scrollLeft }: GetNearestPointProps) => {\n    let nearestIndex = -1;\n    let nearestPoint = -Infinity;\n\n    for (let i = 0; i < snapPoints.length; i++) {\n        const index = snapPoints[i];\n\n        if (index && index < position + scrollLeft && index > nearestPoint) {\n            nearestPoint = index;\n            nearestIndex = i;\n        }\n    }\n\n    nearestIndex = nearestIndex === -1 ? 0 : nearestIndex;\n    nearestPoint = nearestPoint === -Infinity ? 0 : nearestPoint;\n\n    return { nearestIndex, nearestPoint };\n};\n\ninterface GetThumbPositionProps {\n    scope: AnimationScope;\n    itemWidth: number;\n}\n\nexport const getThumbPosition = ({ itemWidth, scope }: GetThumbPositionProps) => {\n    if (!scope.current) {\n        return undefined;\n    }\n\n    const { transform } = (scope.current as HTMLElement).style;\n    let position;\n\n    if (transform === 'none') {\n        position = 0;\n    } else {\n        const match = transform.match(/translateX\\(([-\\d.]+)px\\)/);\n\n        if (match && match[1]) {\n            position = parseFloat(match[1]);\n        }\n    }\n\n    if (typeof position !== 'number' && !position) {\n        return undefined;\n    }\n\n    return { left: position, right: position + itemWidth, middle: position + itemWidth / 2 };\n};\n"],"mappings":"AAOA,OAAO,MAAMA,eAAe,GAAGC,IAAA,IAAgE;EAAA,IAA/D;IAAEC,UAAU;IAAEC,QAAQ;IAAEC;EAAiC,CAAC,GAAAH,IAAA;EACtF,IAAII,YAAY,GAAG,CAAC,CAAC;EACrB,IAAIC,YAAY,GAAG,CAACC,QAAQ;EAE5B,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGN,UAAU,CAACO,MAAM,EAAED,CAAC,EAAE,EAAE;IACxC,MAAME,KAAK,GAAGR,UAAU,CAACM,CAAC,CAAC;IAE3B,IAAIE,KAAK,IAAIA,KAAK,GAAGP,QAAQ,GAAGC,UAAU,IAAIM,KAAK,GAAGJ,YAAY,EAAE;MAChEA,YAAY,GAAGI,KAAK;MACpBL,YAAY,GAAGG,CAAC;IACpB;EACJ;EAEAH,YAAY,GAAGA,YAAY,KAAK,CAAC,CAAC,GAAG,CAAC,GAAGA,YAAY;EACrDC,YAAY,GAAGA,YAAY,KAAK,CAACC,QAAQ,GAAG,CAAC,GAAGD,YAAY;EAE5D,OAAO;IAAED,YAAY;IAAEC;EAAa,CAAC;AACzC,CAAC;AAOD,OAAO,MAAMK,gBAAgB,GAAGC,KAAA,IAAiD;EAAA,IAAhD;IAAEC,SAAS;IAAEC;EAA6B,CAAC,GAAAF,KAAA;EACxE,IAAI,CAACE,KAAK,CAACC,OAAO,EAAE;IAChB,OAAOC,SAAS;EACpB;EAEA,MAAM;IAAEC;EAAU,CAAC,GAAIH,KAAK,CAACC,OAAO,CAAiBG,KAAK;EAC1D,IAAIf,QAAQ;EAEZ,IAAIc,SAAS,KAAK,MAAM,EAAE;IACtBd,QAAQ,GAAG,CAAC;EAChB,CAAC,MAAM;IACH,MAAMgB,KAAK,GAAGF,SAAS,CAACE,KAAK,CAAC,2BAA2B,CAAC;IAE1D,IAAIA,KAAK,IAAIA,KAAK,CAAC,CAAC,CAAC,EAAE;MACnBhB,QAAQ,GAAGiB,UAAU,CAACD,KAAK,CAAC,CAAC,CAAC,CAAC;IACnC;EACJ;EAEA,IAAI,OAAOhB,QAAQ,KAAK,QAAQ,IAAI,CAACA,QAAQ,EAAE;IAC3C,OAAOa,SAAS;EACpB;EAEA,OAAO;IAAEK,IAAI,EAAElB,QAAQ;IAAEmB,KAAK,EAAEnB,QAAQ,GAAGU,SAAS;IAAEU,MAAM,EAAEpB,QAAQ,GAAGU,SAAS,GAAG;EAAE,CAAC;AAC5F,CAAC","ignoreList":[]}

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

@@ -5,11 +5,16 @@ type StyledSliderButtonProps = WithTheme<{
     $isDisabled?: boolean;
 }>;
 export declare const StyledSliderButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSliderButtonProps>> & string;
+type StyledSliderButtonWrapperProps = WithTheme<{
+    $width: number;
+}>;
+export declare const StyledSliderButtonWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSliderButtonWrapperProps>> & string;
 type StyledSliderButtonItemProps = WithTheme<{
     $isSelected: boolean;
     $width: number;
 }>;
 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 StyledSliderButtonButtonsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 type StyledMotionSliderButtonThumbProps = WithTheme<{
     $width: number;
 }>;

package/lib/types/utils/sliderButton.d.ts

@@ -2,8 +2,9 @@ import type { AnimationScope } from 'framer-motion';
 interface GetNearestPointProps {
     position: number;
     snapPoints: number[];
+    scrollLeft: number;
 }
-export declare const getNearestPoint: ({ snapPoints, position }: GetNearestPointProps) => {
+export declare const getNearestPoint: ({ snapPoints, position, scrollLeft }: GetNearestPointProps) => {
     nearestIndex: number;
     nearestPoint: number;
 };
@@ -11,5 +12,9 @@ interface GetThumbPositionProps {
     scope: AnimationScope;
     itemWidth: number;
 }
-export declare const getThumbPosition: ({ itemWidth, scope }: GetThumbPositionProps) => number | undefined;
+export declare const getThumbPosition: ({ itemWidth, scope }: GetThumbPositionProps) => {
+    left: number;
+    right: number;
+    middle: number;
+} | undefined;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.601",
+    "version": "5.0.0-beta.602",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -83,5 +83,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "d0ddb1eca07e17250d093a2f68de4fe8c89f2d62"
+    "gitHead": "24e553c3b9526581091d125fe8c500dbd87e5b87"
 }