npm - @chayns-components/core - Versions diffs - 5.0.0-beta.861 → 5.0.0-beta.866 - Mend

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

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

Files changed (11) hide show

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

@@ -7,43 +7,46 @@ exports.default = void 0;
 var _chaynsApi = require("chayns-api");
 var _framerMotion = require("framer-motion");
 var _react = _interopRequireWildcard(require("react"));
-var _styledComponents = require("styled-components");
 var _useElementSize = require("../../hooks/useElementSize");
 var _calculate = require("../../utils/calculate");
 var _sliderButton = require("../../utils/sliderButton");
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
+var _Popup = _interopRequireDefault(require("../popup/Popup"));
 var _SliderButton = require("./SliderButton.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const SliderButton = ({
   selectedButtonId,
   isDisabled,
   items,
-  onChange,
-  shouldUseFullWidth = false
+  onChange
 }) => {
-  const [selectedButton, setSelectedButton] = (0, _react.useState)(undefined);
   const [dragRange, setDragRange] = (0, _react.useState)({
     left: 0,
     right: 0
   });
+  const [shownItemsCount, setShownItemsCount] = (0, _react.useState)(items.length);
+  const [sliderSize, setSliderSize] = (0, _react.useState)({
+    width: 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 popupRef = (0, _react.useRef)(null);
   const [scope, animate] = (0, _framerMotion.useAnimate)();
   const initialItemWidth = (0, _react.useMemo)(() => (0, _calculate.calculateBiggestWidth)(items), [items]);
-  const sliderSize = (0, _useElementSize.useElementSize)(sliderButtonRef);
-  const theme = (0, _styledComponents.useTheme)();
-  const isSliderBigger = (0, _react.useMemo)(() => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length, [initialItemWidth, items.length, sliderSize]);
+  const elementSize = (0, _useElementSize.useElementSize)(sliderButtonRef);
+  (0, _react.useEffect)(() => {
+    if (elementSize) setSliderSize(elementSize);
+  }, [elementSize]);
+  const isSliderBigger = (0, _react.useMemo)(() => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length - 1, [initialItemWidth, items.length, sliderSize]);
   const itemWidth = (0, _react.useMemo)(() => {
-    if (shouldUseFullWidth) {
-      const sliderWidth = (sliderSize === null || sliderSize === void 0 ? void 0 : sliderSize.width) || 0;
-      const maxShownItemsCount = Math.floor(sliderWidth / initialItemWidth);
-      const itemCount = items.length || 1;
-      return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);
-    }
-    return initialItemWidth;
-  }, [initialItemWidth, isSliderBigger, items.length, shouldUseFullWidth, sliderSize === null || sliderSize === void 0 ? void 0 : sliderSize.width]);
+    const sliderWidth = (sliderSize === null || sliderSize === void 0 ? void 0 : sliderSize.width) || 0;
+    const maxShownItemsCount = Math.floor(sliderWidth / initialItemWidth);
+    const itemCount = items.length || 1;
+    setShownItemsCount(isSliderBigger ? maxShownItemsCount : itemCount);
+    return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);
+  }, [initialItemWidth, isSliderBigger, items.length, sliderSize === null || sliderSize === void 0 ? void 0 : sliderSize.width]);
   (0, _react.useEffect)(() => {
     if (sliderSize) {
       const sliderWidth = itemWidth * (items.length - 1);
@@ -63,60 +66,107 @@ const SliderButton = ({
     });
   }, [animate, scope]);
   const setItemPosition = (0, _react.useCallback)(index => {
-    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, isSliderBigger, itemWidth, items.length]);
+    void animation(itemWidth * index);
+  }, [animation, itemWidth]);
   (0, _react.useEffect)(() => {
-    if (selectedButtonId) {
-      setSelectedButton(selectedButtonId);
-      const index = items.findIndex(({
+    if (typeof selectedButtonId === 'string') {
+      let index = items.findIndex(({
         id
       }) => id === selectedButtonId);
+      if (items.length > shownItemsCount && index > shownItemsCount - 1) {
+        index = shownItemsCount - 1;
+      }
       if (index >= 0) {
         setItemPosition(index);
       }
-    } else {
-      var _items$;
-      setSelectedButton((_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.id);
     }
-  }, [animation, dragRange.right, isSliderBigger, itemWidth, items, selectedButtonId, setItemPosition]);
+  }, [animation, dragRange.right, isSliderBigger, itemWidth, items, selectedButtonId, setItemPosition, shownItemsCount]);
   const handleClick = (0, _react.useCallback)((id, index) => {
     if (isDisabled) {
       return;
     }
-    setSelectedButton(id);
-    if (typeof onChange === 'function') {
+    if (typeof onChange === 'function' && id !== 'more') {
       onChange(id);
     }
+    if (popupRef.current) {
+      if (id === 'more') {
+        popupRef.current.show();
+      } else {
+        popupRef.current.hide();
+      }
+    }
     setItemPosition(index);
   }, [isDisabled, onChange, setItemPosition]);
-  const buttons = (0, _react.useMemo)(() => items.map(({
-    id,
-    text
-  }, index) => /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonItem, {
-    $width: itemWidth,
-    key: `slider-button-${id}`,
-    onClick: () => handleClick(id, index),
-    $isSelected: id === selectedButton
-  }, text)), [handleClick, itemWidth, items, selectedButton]);
-  const thumbText = (0, _react.useMemo)(() => {
-    var _items$2;
-    const selectedItem = items.find(({
-      id
-    }) => id === selectedButton);
-    return selectedItem ? selectedItem.text : (_items$2 = items[0]) === null || _items$2 === void 0 ? void 0 : _items$2.text;
-  }, [items, selectedButton]);
+  const buttons = (0, _react.useMemo)(() => {
+    if (items.length > shownItemsCount) {
+      const newItems = items.slice(0, shownItemsCount - 1);
+      const otherItems = items.slice(shownItemsCount - 1);
+      const elements = newItems.map(({
+        id,
+        text
+      }, index) => /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonItem, {
+        $width: itemWidth,
+        key: `slider-button-${id}`,
+        onClick: () => handleClick(id, index)
+      }, text));
+      const popupContent = otherItems.map(({
+        id,
+        text
+      }) => /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonPopupContentItem, {
+        key: `slider-button-${id}`,
+        onClick: () => handleClick(id, newItems.length)
+      }, text));
+      const id = 'more';
+      elements.push(/*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonItem, {
+        $width: itemWidth,
+        key: `slider-button-${id}`
+      }, /*#__PURE__*/_react.default.createElement(_Popup.default, {
+        ref: popupRef,
+        content: /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonPopupContent, null, popupContent)
+      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        icons: ['fa fa-ellipsis'],
+        color: "white"
+      }))));
+      return elements;
+    }
+    return items.map(({
+      id,
+      text
+    }) => /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonItem, {
+      $width: itemWidth,
+      key: `slider-button-${id}`
+    }, text));
+  }, [handleClick, itemWidth, items, shownItemsCount]);
+  const pseudoButtons = (0, _react.useMemo)(() => {
+    if (items.length > shownItemsCount) {
+      const newItems = items.slice(0, shownItemsCount - 1);
+      const elements = newItems.map(({
+        id,
+        text
+      }, index) => /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonItem, {
+        $width: itemWidth,
+        key: `pseudo-slider-button-${id}`,
+        onClick: () => handleClick(id, index)
+      }, text));
+      const id = 'more';
+      elements.push(/*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonItem, {
+        $width: itemWidth,
+        key: `pseudo-slider-button-${id}`,
+        onClick: () => handleClick(id, newItems.length)
+      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        icons: ['fa fa-ellipsis']
+      })));
+      return elements;
+    }
+    return items.map(({
+      id,
+      text
+    }, index) => /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonItem, {
+      $width: itemWidth,
+      key: `pseudo-slider-button-${id}`,
+      onClick: () => handleClick(id, index)
+    }, text));
+  }, [handleClick, itemWidth, items, shownItemsCount]);
   /**
    * Creates an array with the snap points relative to the width of the items
@@ -165,100 +215,32 @@ const SliderButton = ({
       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);
+      let id;
+      if (nearestIndex === shownItemsCount - 1) {
+        id = 'more';
+      } else {
+        var _items$nearestIndex;
+        id = (_items$nearestIndex = items[nearestIndex]) === null || _items$nearestIndex === void 0 ? void 0 : _items$nearestIndex.id;
       }
-    }
-    preventHandleScroll.current = false;
-  }, [animation, itemWidth, items, onChange, scope, snapPoints]);
-  const handleWhileDrag = (0, _react.useCallback)(() => {
-    preventHandleScroll.current = true;
-    void (0, _chaynsApi.setRefreshScrollEnabled)(false);
-    const position = (0, _sliderButton.getThumbPosition)({
-      scope,
-      itemWidth
-    });
-    if (!position) {
-      return;
-    }
-    const {
-      right,
-      left,
-      middle
-    } = position;
-    let scrollLeft = 0;
-    const scrollSpeed = 3;
-    if (sliderButtonWrapperRef.current) {
-      if (right >= dragRange.right) {
-        sliderButtonWrapperRef.current.scrollLeft += scrollSpeed;
+      if (popupRef.current) {
+        if (id === 'more') {
+          popupRef.current.show();
+        } else {
+          popupRef.current.hide();
+        }
       }
-      if (left <= dragRange.left) {
-        sliderButtonWrapperRef.current.scrollLeft -= scrollSpeed;
+      if (typeof onChange === 'function' && id && id !== 'more') {
+        onChange(id);
       }
-      scrollLeft = sliderButtonWrapperRef.current.scrollLeft;
     }
-    const {
-      nearestIndex
-    } = (0, _sliderButton.getNearestPoint)({
-      snapPoints,
-      position: middle,
-      scrollLeft
-    });
-    if (nearestIndex >= 0) {
-      var _items$nearestIndex2;
-      setSelectedButton((_items$nearestIndex2 = items[nearestIndex]) === null || _items$nearestIndex2 === void 0 ? void 0 : _items$nearestIndex2.id);
-    }
-  }, [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;
-    }
-    void (0, _chaynsApi.setRefreshScrollEnabled)(false);
-    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]);
+  }, [animation, itemWidth, items, onChange, scope, shownItemsCount, snapPoints]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButton, {
     $isDisabled: isDisabled,
     ref: sliderButtonRef
-  }, /*#__PURE__*/_react.default.createElement(_SliderButton.StyledMotionSliderButtonThumb, {
+  }, /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonButtonsWrapper, {
+    $isInvisible: true
+  }, pseudoButtons), /*#__PURE__*/_react.default.createElement(_SliderButton.StyledMotionSliderButtonThumb, {
     ref: scope,
     drag: isDisabled ? false : 'x',
     dragElastic: 0,
@@ -269,20 +251,12 @@ const SliderButton = ({
       ...dragRange
     },
     $width: itemWidth,
-    onDrag: handleWhileDrag,
-    onDragEnd: handleDragEnd,
-    whileTap: isDisabled ? {} : {
-      backgroundColor: theme['407']
-    },
-    whileHover: isDisabled ? {} : {
-      backgroundColor: theme['409']
-    }
-  }, thumbText), /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonWrapper, {
+    onDragEnd: handleDragEnd
+  }), /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonWrapper, {
     $isDisabled: isDisabled,
     $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, theme, thumbText]);
+    ref: sliderButtonWrapperRef
+  }, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonButtonsWrapper, null, buttons)))), [buttons, dragRange, handleDragEnd, isDisabled, isSliderBigger, itemWidth, pseudoButtons, scope]);
 };
 SliderButton.displayName = 'SliderButton';
 var _default = exports.default = SliderButton;

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

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

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSliderButtonWrapper = exports.StyledSliderButtonItem = exports.StyledSliderButtonButtonsWrapper = exports.StyledSliderButton = exports.StyledMotionSliderButtonThumb = void 0;
+exports.StyledSliderButtonWrapper = exports.StyledSliderButtonPopupContentItem = exports.StyledSliderButtonPopupContent = exports.StyledSliderButtonItem = exports.StyledSliderButtonButtonsWrapper = exports.StyledSliderButton = exports.StyledMotionSliderButtonThumb = void 0;
 var _framerMotion = require("framer-motion");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -18,7 +18,7 @@ const StyledSliderButtonWrapper = exports.StyledSliderButtonWrapper = _styledCom
     align-items: center;
     background-color: ${({
   theme
-}) => theme['404']};
+}) => theme['408']};
     border-radius: 3px;
     border: none;
     color: white;
@@ -29,7 +29,6 @@ const StyledSliderButtonWrapper = exports.StyledSliderButtonWrapper = _styledCom
     position: relative;
     user-select: none;
     transition: opacity 0.3s ease;
-    z-index: 1;
     width: ${({
   $width
@@ -67,26 +66,48 @@ const StyledSliderButtonItem = exports.StyledSliderButtonItem = _styledComponent
     justify-content: center;
     color: white;
 `;
+const StyledSliderButtonPopupContent = exports.StyledSliderButtonPopupContent = _styledComponents.default.div`
+    display: flex;
+    flex-direction: column;
+    padding: 7px 12px;
+`;
+const StyledSliderButtonPopupContentItem = exports.StyledSliderButtonPopupContentItem = _styledComponents.default.div`
+    font-size: 110%;
+    font-family: 'Roboto Medium', serif;
+    cursor: pointer;
+`;
 const StyledSliderButtonButtonsWrapper = exports.StyledSliderButtonButtonsWrapper = _styledComponents.default.div`
     position: absolute;
+    z-index: ${({
+  $isInvisible
+}) => $isInvisible ? '2' : '4'};
+    opacity: ${({
+  $isInvisible
+}) => $isInvisible ? 0 : 1};
     display: flex;
+    cursor: pointer;
     align-items: center;
+    pointer-events: ${({
+  $isInvisible
+}) => $isInvisible ? 'auto' : 'none'};
 `;
 const StyledMotionSliderButtonThumb = exports.StyledMotionSliderButtonThumb = (0, _styledComponents.default)(_framerMotion.motion.div)`
     font-size: 110%;
     font-family: 'Roboto Medium', serif;
     background-color: ${({
   theme
-}) => theme['408']};
+}) => theme['405']};
+    opacity: 1;
     width: ${({
   $width
-}) => $width}px;
+}) => $width - 8}px;
     position: absolute;
-    border-radius: 3px;
-    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
+    border-radius: 2px;
+    top: 4px;
+    left: 4px;
     white-space: nowrap;
     z-index: 3;
-    height: 32px;
+    height: 24px;
     padding: 7px 12px;
     display: flex;
     color: white;

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

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

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

@@ -1,42 +1,44 @@
 import { setRefreshScrollEnabled } from 'chayns-api';
 import { AnimatePresence, useAnimate } from 'framer-motion';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useTheme } from 'styled-components';
 import { useElementSize } from '../../hooks/useElementSize';
 import { calculateBiggestWidth } from '../../utils/calculate';
 import { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';
-import { StyledMotionSliderButtonThumb, StyledSliderButton, StyledSliderButtonButtonsWrapper, StyledSliderButtonItem, StyledSliderButtonWrapper } from './SliderButton.styles';
+import Icon from '../icon/Icon';
+import Popup from '../popup/Popup';
+import { StyledMotionSliderButtonThumb, StyledSliderButton, StyledSliderButtonButtonsWrapper, StyledSliderButtonItem, StyledSliderButtonPopupContent, StyledSliderButtonPopupContentItem, StyledSliderButtonWrapper } from './SliderButton.styles';
 const SliderButton = _ref => {
   let {
     selectedButtonId,
     isDisabled,
     items,
-    onChange,
-    shouldUseFullWidth = false
+    onChange
   } = _ref;
-  const [selectedButton, setSelectedButton] = useState(undefined);
   const [dragRange, setDragRange] = useState({
     left: 0,
     right: 0
   });
+  const [shownItemsCount, setShownItemsCount] = useState(items.length);
+  const [sliderSize, setSliderSize] = useState({
+    width: 0
+  });
   const sliderButtonRef = useRef(null);
   const sliderButtonWrapperRef = useRef(null);
-  const timeout = useRef();
-  const preventHandleScroll = useRef(false);
+  const popupRef = useRef(null);
   const [scope, animate] = useAnimate();
   const initialItemWidth = useMemo(() => calculateBiggestWidth(items), [items]);
-  const sliderSize = useElementSize(sliderButtonRef);
-  const theme = useTheme();
-  const isSliderBigger = useMemo(() => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length, [initialItemWidth, items.length, sliderSize]);
+  const elementSize = useElementSize(sliderButtonRef);
+  useEffect(() => {
+    if (elementSize) setSliderSize(elementSize);
+  }, [elementSize]);
+  const isSliderBigger = useMemo(() => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length - 1, [initialItemWidth, items.length, sliderSize]);
   const itemWidth = useMemo(() => {
-    if (shouldUseFullWidth) {
-      const sliderWidth = sliderSize?.width || 0;
-      const maxShownItemsCount = Math.floor(sliderWidth / initialItemWidth);
-      const itemCount = items.length || 1;
-      return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);
-    }
-    return initialItemWidth;
-  }, [initialItemWidth, isSliderBigger, items.length, shouldUseFullWidth, sliderSize?.width]);
+    const sliderWidth = sliderSize?.width || 0;
+    const maxShownItemsCount = Math.floor(sliderWidth / initialItemWidth);
+    const itemCount = items.length || 1;
+    setShownItemsCount(isSliderBigger ? maxShownItemsCount : itemCount);
+    return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);
+  }, [initialItemWidth, isSliderBigger, items.length, sliderSize?.width]);
   useEffect(() => {
     if (sliderSize) {
       const sliderWidth = itemWidth * (items.length - 1);
@@ -56,67 +58,125 @@ const SliderButton = _ref => {
     });
   }, [animate, scope]);
   const setItemPosition = useCallback(index => {
-    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, isSliderBigger, itemWidth, items.length]);
+    void animation(itemWidth * index);
+  }, [animation, itemWidth]);
   useEffect(() => {
-    if (selectedButtonId) {
-      setSelectedButton(selectedButtonId);
-      const index = items.findIndex(_ref2 => {
+    if (typeof selectedButtonId === 'string') {
+      let index = items.findIndex(_ref2 => {
         let {
           id
         } = _ref2;
         return id === selectedButtonId;
       });
+      if (items.length > shownItemsCount && index > shownItemsCount - 1) {
+        index = shownItemsCount - 1;
+      }
       if (index >= 0) {
         setItemPosition(index);
       }
-    } else {
-      setSelectedButton(items[0]?.id);
     }
-  }, [animation, dragRange.right, isSliderBigger, itemWidth, items, selectedButtonId, setItemPosition]);
+  }, [animation, dragRange.right, isSliderBigger, itemWidth, items, selectedButtonId, setItemPosition, shownItemsCount]);
   const handleClick = useCallback((id, index) => {
     if (isDisabled) {
       return;
     }
-    setSelectedButton(id);
-    if (typeof onChange === 'function') {
+    if (typeof onChange === 'function' && id !== 'more') {
       onChange(id);
     }
+    if (popupRef.current) {
+      if (id === 'more') {
+        popupRef.current.show();
+      } else {
+        popupRef.current.hide();
+      }
+    }
     setItemPosition(index);
   }, [isDisabled, onChange, setItemPosition]);
-  const buttons = useMemo(() => items.map((_ref3, index) => {
-    let {
-      id,
-      text
-    } = _ref3;
-    return /*#__PURE__*/React.createElement(StyledSliderButtonItem, {
-      $width: itemWidth,
-      key: `slider-button-${id}`,
-      onClick: () => handleClick(id, index),
-      $isSelected: id === selectedButton
-    }, text);
-  }), [handleClick, itemWidth, items, selectedButton]);
-  const thumbText = useMemo(() => {
-    const selectedItem = items.find(_ref4 => {
+  const buttons = useMemo(() => {
+    if (items.length > shownItemsCount) {
+      const newItems = items.slice(0, shownItemsCount - 1);
+      const otherItems = items.slice(shownItemsCount - 1);
+      const elements = newItems.map((_ref3, index) => {
+        let {
+          id,
+          text
+        } = _ref3;
+        return /*#__PURE__*/React.createElement(StyledSliderButtonItem, {
+          $width: itemWidth,
+          key: `slider-button-${id}`,
+          onClick: () => handleClick(id, index)
+        }, text);
+      });
+      const popupContent = otherItems.map(_ref4 => {
+        let {
+          id,
+          text
+        } = _ref4;
+        return /*#__PURE__*/React.createElement(StyledSliderButtonPopupContentItem, {
+          key: `slider-button-${id}`,
+          onClick: () => handleClick(id, newItems.length)
+        }, text);
+      });
+      const id = 'more';
+      elements.push(/*#__PURE__*/React.createElement(StyledSliderButtonItem, {
+        $width: itemWidth,
+        key: `slider-button-${id}`
+      }, /*#__PURE__*/React.createElement(Popup, {
+        ref: popupRef,
+        content: /*#__PURE__*/React.createElement(StyledSliderButtonPopupContent, null, popupContent)
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icons: ['fa fa-ellipsis'],
+        color: "white"
+      }))));
+      return elements;
+    }
+    return items.map(_ref5 => {
       let {
-        id
-      } = _ref4;
-      return id === selectedButton;
+        id,
+        text
+      } = _ref5;
+      return /*#__PURE__*/React.createElement(StyledSliderButtonItem, {
+        $width: itemWidth,
+        key: `slider-button-${id}`
+      }, text);
     });
-    return selectedItem ? selectedItem.text : items[0]?.text;
-  }, [items, selectedButton]);
+  }, [handleClick, itemWidth, items, shownItemsCount]);
+  const pseudoButtons = useMemo(() => {
+    if (items.length > shownItemsCount) {
+      const newItems = items.slice(0, shownItemsCount - 1);
+      const elements = newItems.map((_ref6, index) => {
+        let {
+          id,
+          text
+        } = _ref6;
+        return /*#__PURE__*/React.createElement(StyledSliderButtonItem, {
+          $width: itemWidth,
+          key: `pseudo-slider-button-${id}`,
+          onClick: () => handleClick(id, index)
+        }, text);
+      });
+      const id = 'more';
+      elements.push(/*#__PURE__*/React.createElement(StyledSliderButtonItem, {
+        $width: itemWidth,
+        key: `pseudo-slider-button-${id}`,
+        onClick: () => handleClick(id, newItems.length)
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icons: ['fa fa-ellipsis']
+      })));
+      return elements;
+    }
+    return items.map((_ref7, index) => {
+      let {
+        id,
+        text
+      } = _ref7;
+      return /*#__PURE__*/React.createElement(StyledSliderButtonItem, {
+        $width: itemWidth,
+        key: `pseudo-slider-button-${id}`,
+        onClick: () => handleClick(id, index)
+      }, text);
+    });
+  }, [handleClick, itemWidth, items, shownItemsCount]);
   /**
    * Creates an array with the snap points relative to the width of the items
@@ -166,96 +226,30 @@ const SliderButton = _ref => {
     });
     if (nearestPoint >= 0 && nearestIndex >= 0) {
       void animation(nearestPoint);
-      const id = items[nearestIndex]?.id;
-      setSelectedButton(id);
-      if (typeof onChange === 'function' && id) {
-        onChange(id);
+      let id;
+      if (nearestIndex === shownItemsCount - 1) {
+        id = 'more';
+      } else {
+        id = items[nearestIndex]?.id;
       }
-    }
-    preventHandleScroll.current = false;
-  }, [animation, itemWidth, items, onChange, scope, snapPoints]);
-  const handleWhileDrag = useCallback(() => {
-    preventHandleScroll.current = true;
-    void setRefreshScrollEnabled(false);
-    const position = getThumbPosition({
-      scope,
-      itemWidth
-    });
-    if (!position) {
-      return;
-    }
-    const {
-      right,
-      left,
-      middle
-    } = position;
-    let scrollLeft = 0;
-    const scrollSpeed = 3;
-    if (sliderButtonWrapperRef.current) {
-      if (right >= dragRange.right) {
-        sliderButtonWrapperRef.current.scrollLeft += scrollSpeed;
+      if (popupRef.current) {
+        if (id === 'more') {
+          popupRef.current.show();
+        } else {
+          popupRef.current.hide();
+        }
       }
-      if (left <= dragRange.left) {
-        sliderButtonWrapperRef.current.scrollLeft -= scrollSpeed;
+      if (typeof onChange === 'function' && id && id !== 'more') {
+        onChange(id);
       }
-      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;
-    }
-    void setRefreshScrollEnabled(false);
-    const position = getThumbPosition({
-      scope,
-      itemWidth
-    });
-    if (!position) {
-      return;
-    }
-    const {
-      middle
-    } = position;
-    const {
-      scrollLeft
-    } = event.target;
-    const {
-      nearestIndex
-    } = getNearestPoint({
-      snapPoints,
-      position: middle,
-      scrollLeft
-    });
-    if (nearestIndex >= 0) {
-      setSelectedButton(items[nearestIndex]?.id);
-    }
-    if (timeout.current) {
-      clearTimeout(timeout.current);
-    }
-    timeout.current = window.setTimeout(() => {
-      handleDragEnd();
-    }, 200);
-  }, [handleDragEnd, itemWidth, items, scope, snapPoints]);
+  }, [animation, itemWidth, items, onChange, scope, shownItemsCount, snapPoints]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledSliderButton, {
     $isDisabled: isDisabled,
     ref: sliderButtonRef
-  }, /*#__PURE__*/React.createElement(StyledMotionSliderButtonThumb, {
+  }, /*#__PURE__*/React.createElement(StyledSliderButtonButtonsWrapper, {
+    $isInvisible: true
+  }, pseudoButtons), /*#__PURE__*/React.createElement(StyledMotionSliderButtonThumb, {
     ref: scope,
     drag: isDisabled ? false : 'x',
     dragElastic: 0,
@@ -266,20 +260,12 @@ const SliderButton = _ref => {
       ...dragRange
     },
     $width: itemWidth,
-    onDrag: handleWhileDrag,
-    onDragEnd: handleDragEnd,
-    whileTap: isDisabled ? {} : {
-      backgroundColor: theme['407']
-    },
-    whileHover: isDisabled ? {} : {
-      backgroundColor: theme['409']
-    }
-  }, thumbText), /*#__PURE__*/React.createElement(StyledSliderButtonWrapper, {
+    onDragEnd: handleDragEnd
+  }), /*#__PURE__*/React.createElement(StyledSliderButtonWrapper, {
     $isDisabled: isDisabled,
     $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, theme, thumbText]);
+    ref: sliderButtonWrapperRef
+  }, /*#__PURE__*/React.createElement(AnimatePresence, null, /*#__PURE__*/React.createElement(StyledSliderButtonButtonsWrapper, null, buttons)))), [buttons, dragRange, handleDragEnd, isDisabled, isSliderBigger, itemWidth, pseudoButtons, scope]);
 };
 SliderButton.displayName = 'SliderButton';
 export default SliderButton;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderButton.js","names":["setRefreshScrollEnabled","AnimatePresence","useAnimate","React","useCallback","useEffect","useMemo","useRef","useState","useTheme","useElementSize","calculateBiggestWidth","getNearestPoint","getThumbPosition","StyledMotionSliderButtonThumb","StyledSliderButton","StyledSliderButtonButtonsWrapper","StyledSliderButtonItem","StyledSliderButtonWrapper","SliderButton","_ref","selectedButtonId","isDisabled","items","onChange","shouldUseFullWidth","selectedButton","setSelectedButton","undefined","dragRange","setDragRange","left","right","sliderButtonRef","sliderButtonWrapperRef","timeout","preventHandleScroll","scope","animate","initialItemWidth","sliderSize","theme","isSliderBigger","Math","floor","width","length","itemWidth","sliderWidth","maxShownItemsCount","itemCount","count","animation","x","current","type","duration","setItemPosition","index","scrollLeft","findIndex","_ref2","id","handleClick","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","whileTap","backgroundColor","whileHover","onScroll","displayName"],"sources":["../../../../src/components/slider-button/SliderButton.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport { AnimatePresence, useAnimate } from 'framer-motion';\nimport React, { FC, UIEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport type { SliderButtonItem } from '../../types/slider-button';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\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 Whether the full width should be used if the slider is smaller.\n /\n shouldUseFullWidth?: boolean;\n};\n\nconst SliderButton: FC<SliderButtonProps> = ({\n selectedButtonId,\n isDisabled,\n items,\n onChange,\n shouldUseFullWidth = false,\n}) => {\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 initialItemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n const sliderSize = useElementSize(sliderButtonRef);\n\n const theme: Theme = useTheme();\n\n const isSliderBigger = useMemo(\n () => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length,\n [initialItemWidth, items.length, sliderSize],\n );\n\n const itemWidth = useMemo(() => {\n if (shouldUseFullWidth) {\n const sliderWidth = sliderSize?.width \|\| 0;\n const maxShownItemsCount = Math.floor(sliderWidth / initialItemWidth);\n const itemCount = items.length \|\| 1;\n\n return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);\n }\n\n return initialItemWidth;\n }, [initialItemWidth, isSliderBigger, items.length, shouldUseFullWidth, sliderSize?.width]);\n\n useEffect(() => {\n if (sliderSize) {\n const sliderWidth = itemWidth (items.length - 1);\n\n const count = Math.floor(sliderSize.width / itemWidth);\n\n setDragRange({ left: 0, right: isSliderBigger ? itemWidth * count : sliderWidth });\n }\n }, [isSliderBigger, itemWidth, items.length, sliderSize]);\n\n const animation = useCallback(\n async (x: number) => {\n await animate(\n scope.current,\n { x },\n {\n type: 'tween',\n duration: 0.2,\n },\n );\n },\n [animate, scope],\n );\n\n const setItemPosition = useCallback(\n (index: number) => {\n 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, isSliderBigger, itemWidth, items.length],\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 setItemPosition(index);\n }\n } else {\n setSelectedButton(items[0]?.id);\n }\n }, [\n animation,\n dragRange.right,\n isSliderBigger,\n itemWidth,\n items,\n selectedButtonId,\n setItemPosition,\n ]);\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 setItemPosition(index);\n },\n [isDisabled, onChange, setItemPosition],\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 : items[0]?.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 void setRefreshScrollEnabled(true);\n\n const position = getThumbPosition({ scope, itemWidth });\n\n if (!position) {\n return;\n }\n\n const { middle, left } = position;\n\n let scrollLeft = 0;\n\n if (sliderButtonWrapperRef.current) {\n scrollLeft = sliderButtonWrapperRef.current.scrollLeft;\n\n sliderButtonWrapperRef.current.scrollLeft = getNearestPoint({\n snapPoints,\n position: middle,\n scrollLeft: scrollLeft - left,\n }).nearestPoint;\n }\n\n const { nearestIndex } = getNearestPoint({\n snapPoints,\n position: middle,\n scrollLeft,\n });\n\n const { nearestPoint } = getNearestPoint({\n snapPoints,\n position: middle,\n scrollLeft: 0,\n });\n\n if (nearestPoint >= 0 && nearestIndex >= 0) {\n void animation(nearestPoint);\n\n 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 void setRefreshScrollEnabled(false);\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 void setRefreshScrollEnabled(false);\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 whileTap={isDisabled ? {} : { backgroundColor: theme['407'] }}\n whileHover={isDisabled ? {} : { backgroundColor: theme['409'] }}\n >\n {thumbText}\n </StyledMotionSliderButtonThumb>\n <StyledSliderButtonWrapper\n $isDisabled={isDisabled}\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 theme,\n thumbText,\n ],\n );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,YAAY;AACpD,SAASC,eAAe,EAAEC,UAAU,QAAQ,eAAe;AAC3D,OAAOC,KAAK,IAAiBC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC7F,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,cAAc,QAAQ,4BAA4B;AAE3D,SAASC,qBAAqB,QAAQ,uBAAuB;AAC7D,SAASC,eAAe,EAAEC,gBAAgB,QAAQ,0BAA0B;AAE5E,SACIC,6BAA6B,EAC7BC,kBAAkB,EAClBC,gCAAgC,EAChCC,sBAAsB,EACtBC,yBAAyB,QACtB,uBAAuB;AA0B9B,MAAMC,YAAmC,GAAGC,IAAA,IAMtC;EAAA,IANuC;IACzCC,gBAAgB;IAChBC,UAAU;IACVC,KAAK;IACLC,QAAQ;IACRC,kBAAkB,GAAG;EACzB,CAAC,GAAAL,IAAA;EACG,MAAM,CAACM,cAAc,EAAEC,iBAAiB,CAAC,GAAGnB,QAAQ,CAAqBoB,SAAS,CAAC;EACnF,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGtB,QAAQ,CAAC;IAAEuB,IAAI,EAAE,CAAC;IAAEC,KAAK,EAAE;EAAE,CAAC,CAAC;EAEjE,MAAMC,eAAe,GAAG1B,MAAM,CAAiB,IAAI,CAAC;EACpD,MAAM2B,sBAAsB,GAAG3B,MAAM,CAAiB,IAAI,CAAC;EAC3D,MAAM4B,OAAO,GAAG5B,MAAM,CAAS,CAAC;EAChC,MAAM6B,mBAAmB,GAAG7B,MAAM,CAAC,KAAK,CAAC;EAEzC,MAAM,CAAC8B,KAAK,EAAEC,OAAO,CAAC,GAAGpC,UAAU,CAAC,CAAC;EAErC,MAAMqC,gBAAgB,GAAGjC,OAAO,CAAC,MAAMK,qBAAqB,CAACY,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAC7E,MAAMiB,UAAU,GAAG9B,cAAc,CAACuB,eAAe,CAAC;EAElD,MAAMQ,KAAY,GAAGhC,QAAQ,CAAC,CAAC;EAE/B,MAAMiC,cAAc,GAAGpC,OAAO,CAC1B,MAAMkC,UAAU,IAAIG,IAAI,CAACC,KAAK,CAACJ,UAAU,CAACK,KAAK,GAAGN,gBAAgB,CAAC,GAAGhB,KAAK,CAACuB,MAAM,EAClF,CAACP,gBAAgB,EAAEhB,KAAK,CAACuB,MAAM,EAAEN,UAAU,CAC/C,CAAC;EAED,MAAMO,SAAS,GAAGzC,OAAO,CAAC,MAAM;IAC5B,IAAImB,kBAAkB,EAAE;MACpB,MAAMuB,WAAW,GAAGR,UAAU,EAAEK,KAAK,IAAI,CAAC;MAC1C,MAAMI,kBAAkB,GAAGN,IAAI,CAACC,KAAK,CAACI,WAAW,GAAGT,gBAAgB,CAAC;MACrE,MAAMW,SAAS,GAAG3B,KAAK,CAACuB,MAAM,IAAI,CAAC;MAEnC,OAAOE,WAAW,IAAIN,cAAc,GAAGO,kBAAkB,GAAGC,SAAS,CAAC;IAC1E;IAEA,OAAOX,gBAAgB;EAC3B,CAAC,EAAE,CAACA,gBAAgB,EAAEG,cAAc,EAAEnB,KAAK,CAACuB,MAAM,EAAErB,kBAAkB,EAAEe,UAAU,EAAEK,KAAK,CAAC,CAAC;EAE3FxC,SAAS,CAAC,MAAM;IACZ,IAAImC,UAAU,EAAE;MACZ,MAAMQ,WAAW,GAAGD,SAAS,IAAIxB,KAAK,CAACuB,MAAM,GAAG,CAAC,CAAC;MAElD,MAAMK,KAAK,GAAGR,IAAI,CAACC,KAAK,CAACJ,UAAU,CAACK,KAAK,GAAGE,SAAS,CAAC;MAEtDjB,YAAY,CAAC;QAAEC,IAAI,EAAE,CAAC;QAAEC,KAAK,EAAEU,cAAc,GAAGK,SAAS,GAAGI,KAAK,GAAGH;MAAY,CAAC,CAAC;IACtF;EACJ,CAAC,EAAE,CAACN,cAAc,EAAEK,SAAS,EAAExB,KAAK,CAACuB,MAAM,EAAEN,UAAU,CAAC,CAAC;EAEzD,MAAMY,SAAS,GAAGhD,WAAW,CACzB,MAAOiD,CAAS,IAAK;IACjB,MAAMf,OAAO,CACTD,KAAK,CAACiB,OAAO,EACb;MAAED;IAAE,CAAC,EACL;MACIE,IAAI,EAAE,OAAO;MACbC,QAAQ,EAAE;IACd,CACJ,CAAC;EACL,CAAC,EACD,CAAClB,OAAO,EAAED,KAAK,CACnB,CAAC;EAED,MAAMoB,eAAe,GAAGrD,WAAW,CAC9BsD,KAAa,IAAK;IACf,IAAI,CAAChB,cAAc,EAAE;MACjB,KAAKU,SAAS,CAACL,SAAS,GAAGW,KAAK,CAAC;MAEjC;IACJ;IAEA,MAAMP,KAAK,GAAGtB,SAAS,CAACG,KAAK,GAAGe,SAAS;IAEzC,IAAIxB,KAAK,CAACuB,MAAM,GAAGK,KAAK,IAAIO,KAAK,EAAE;MAC/B,KAAKN,SAAS,CAAC,CAAC,CAAC;IACrB,CAAC,MAAM;MACH,KAAKA,SAAS,CAACL,SAAS,IAAII,KAAK,IAAI5B,KAAK,CAACuB,MAAM,GAAGY,KAAK,CAAC,CAAC,CAAC;IAChE;IAEA,IAAIxB,sBAAsB,CAACoB,OAAO,EAAE;MAChCpB,sBAAsB,CAACoB,OAAO,CAACK,UAAU,GAAGZ,SAAS,GAAGW,KAAK;IACjE;EACJ,CAAC,EACD,CAACN,SAAS,EAAEvB,SAAS,CAACG,KAAK,EAAEU,cAAc,EAAEK,SAAS,EAAExB,KAAK,CAACuB,MAAM,CACxE,CAAC;EAEDzC,SAAS,CAAC,MAAM;IACZ,IAAIgB,gBAAgB,EAAE;MAClBM,iBAAiB,CAACN,gBAAgB,CAAC;MAEnC,MAAMqC,KAAK,GAAGnC,KAAK,CAACqC,SAAS,CAACC,KAAA;QAAA,IAAC;UAAEC;QAAG,CAAC,GAAAD,KAAA;QAAA,OAAKC,EAAE,KAAKzC,gBAAgB;MAAA,EAAC;MAElE,IAAIqC,KAAK,IAAI,CAAC,EAAE;QACZD,eAAe,CAACC,KAAK,CAAC;MAC1B;IACJ,CAAC,MAAM;MACH/B,iBAAiB,CAACJ,KAAK,CAAC,CAAC,CAAC,EAAEuC,EAAE,CAAC;IACnC;EACJ,CAAC,EAAE,CACCV,SAAS,EACTvB,SAAS,CAACG,KAAK,EACfU,cAAc,EACdK,SAAS,EACTxB,KAAK,EACLF,gBAAgB,EAChBoC,eAAe,CAClB,CAAC;EAEF,MAAMM,WAAW,GAAG3D,WAAW,CAC3B,CAAC0D,EAAU,EAAEJ,KAAa,KAAK;IAC3B,IAAIpC,UAAU,EAAE;MACZ;IACJ;IAEAK,iBAAiB,CAACmC,EAAE,CAAC;IAErB,IAAI,OAAOtC,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACsC,EAAE,CAAC;IAChB;IAEAL,eAAe,CAACC,KAAK,CAAC;EAC1B,CAAC,EACD,CAACpC,UAAU,EAAEE,QAAQ,EAAEiC,eAAe,CAC1C,CAAC;EAED,MAAMO,OAAO,GAAG1D,OAAO,CACnB,MACIiB,KAAK,CAAC0C,GAAG,CAAC,CAAAC,KAAA,EAAeR,KAAK;IAAA,IAAnB;MAAEI,EAAE;MAAEK;IAAK,CAAC,GAAAD,KAAA;IAAA,oBACnB/D,KAAA,CAAAiE,aAAA,CAACnD,sBAAsB;MACnBoD,MAAM,EAAEtB,SAAU;MAClBuB,GAAG,EAAE,iBAAiBR,EAAE,EAAG;MAC3BS,OAAO,EAAEA,CAAA,KAAMR,WAAW,CAACD,EAAE,EAAEJ,KAAK,CAAE;MACtCc,WAAW,EAAEV,EAAE,KAAKpC;IAAe,GAElCyC,IACmB,CAAC;EAAA,CAC5B,CAAC,EACN,CAACJ,WAAW,EAAEhB,SAAS,EAAExB,KAAK,EAAEG,cAAc,CAClD,CAAC;EAED,MAAM+C,SAAS,GAAGnE,OAAO,CAAC,MAAM;IAC5B,MAAMoE,YAAY,GAAGnD,KAAK,CAACoD,IAAI,CAACC,KAAA;MAAA,IAAC;QAAEd;MAAG,CAAC,GAAAc,KAAA;MAAA,OAAKd,EAAE,KAAKpC,cAAc;IAAA,EAAC;IAElE,OAAOgD,YAAY,GAAGA,YAAY,CAACP,IAAI,GAAG5C,KAAK,CAAC,CAAC,CAAC,EAAE4C,IAAI;EAC5D,CAAC,EAAE,CAAC5C,KAAK,EAAEG,cAAc,CAAC,CAAC;;EAE3B;AACJ;AACA;EACI,MAAMmD,UAAU,GAAGvE,OAAO,CAAC,MAAM;IAC7B,MAAMwE,MAAM,GAAG,CAAC,CAAC,CAAC;IAElB,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGxD,KAAK,CAACuB,MAAM,EAAEiC,CAAC,EAAE,EAAE;MACnCD,MAAM,CAACE,IAAI,CAACjC,SAAS,GAAGgC,CAAC,CAAC;IAC9B;IAEA,OAAOD,MAAM;EACjB,CAAC,EAAE,CAAC/B,SAAS,EAAExB,KAAK,CAACuB,MAAM,CAAC,CAAC;EAE7B,MAAMmC,aAAa,GAAG7E,WAAW,CAAC,MAAM;IACpC,KAAKJ,uBAAuB,CAAC,IAAI,CAAC;IAElC,MAAMkF,QAAQ,GAAGrE,gBAAgB,CAAC;MAAEwB,KAAK;MAAEU;IAAU,CAAC,CAAC;IAEvD,IAAI,CAACmC,QAAQ,EAAE;MACX;IACJ;IAEA,MAAM;MAAEC,MAAM;MAAEpD;IAAK,CAAC,GAAGmD,QAAQ;IAEjC,IAAIvB,UAAU,GAAG,CAAC;IAElB,IAAIzB,sBAAsB,CAACoB,OAAO,EAAE;MAChCK,UAAU,GAAGzB,sBAAsB,CAACoB,OAAO,CAACK,UAAU;MAEtDzB,sBAAsB,CAACoB,OAAO,CAACK,UAAU,GAAG/C,eAAe,CAAC;QACxDiE,UAAU;QACVK,QAAQ,EAAEC,MAAM;QAChBxB,UAAU,EAAEA,UAAU,GAAG5B;MAC7B,CAAC,CAAC,CAACqD,YAAY;IACnB;IAEA,MAAM;MAAEC;IAAa,CAAC,GAAGzE,eAAe,CAAC;MACrCiE,UAAU;MACVK,QAAQ,EAAEC,MAAM;MAChBxB;IACJ,CAAC,CAAC;IAEF,MAAM;MAAEyB;IAAa,CAAC,GAAGxE,eAAe,CAAC;MACrCiE,UAAU;MACVK,QAAQ,EAAEC,MAAM;MAChBxB,UAAU,EAAE;IAChB,CAAC,CAAC;IAEF,IAAIyB,YAAY,IAAI,CAAC,IAAIC,YAAY,IAAI,CAAC,EAAE;MACxC,KAAKjC,SAAS,CAACgC,YAAY,CAAC;MAE5B,MAAMtB,EAAE,GAAGvC,KAAK,CAAC8D,YAAY,CAAC,EAAEvB,EAAE;MAElCnC,iBAAiB,CAACmC,EAAE,CAAC;MAErB,IAAI,OAAOtC,QAAQ,KAAK,UAAU,IAAIsC,EAAE,EAAE;QACtCtC,QAAQ,CAACsC,EAAE,CAAC;MAChB;IACJ;IAEA1B,mBAAmB,CAACkB,OAAO,GAAG,KAAK;EACvC,CAAC,EAAE,CAACF,SAAS,EAAEL,SAAS,EAAExB,KAAK,EAAEC,QAAQ,EAAEa,KAAK,EAAEwC,UAAU,CAAC,CAAC;EAE9D,MAAMS,eAAe,GAAGlF,WAAW,CAAC,MAAM;IACtCgC,mBAAmB,CAACkB,OAAO,GAAG,IAAI;IAClC,KAAKtD,uBAAuB,CAAC,KAAK,CAAC;IAEnC,MAAMkF,QAAQ,GAAGrE,gBAAgB,CAAC;MAAEwB,KAAK;MAAEU;IAAU,CAAC,CAAC;IAEvD,IAAI,CAACmC,QAAQ,EAAE;MACX;IACJ;IAEA,MAAM;MAAElD,KAAK;MAAED,IAAI;MAAEoD;IAAO,CAAC,GAAGD,QAAQ;IAExC,IAAIvB,UAAU,GAAG,CAAC;IAElB,MAAM4B,WAAW,GAAG,CAAC;IAErB,IAAIrD,sBAAsB,CAACoB,OAAO,EAAE;MAChC,IAAItB,KAAK,IAAIH,SAAS,CAACG,KAAK,EAAE;QAC1BE,sBAAsB,CAACoB,OAAO,CAACK,UAAU,IAAI4B,WAAW;MAC5D;MAEA,IAAIxD,IAAI,IAAIF,SAAS,CAACE,IAAI,EAAE;QACxBG,sBAAsB,CAACoB,OAAO,CAACK,UAAU,IAAI4B,WAAW;MAC5D;MAEA5B,UAAU,GAAGzB,sBAAsB,CAACoB,OAAO,CAACK,UAAU;IAC1D;IAEA,MAAM;MAAE0B;IAAa,CAAC,GAAGzE,eAAe,CAAC;MAAEiE,UAAU;MAAEK,QAAQ,EAAEC,MAAM;MAAExB;IAAW,CAAC,CAAC;IAEtF,IAAI0B,YAAY,IAAI,CAAC,EAAE;MACnB1D,iBAAiB,CAACJ,KAAK,CAAC8D,YAAY,CAAC,EAAEvB,EAAE,CAAC;IAC9C;EACJ,CAAC,EAAE,CAACjC,SAAS,EAAEkB,SAAS,EAAExB,KAAK,EAAEc,KAAK,EAAEwC,UAAU,CAAC,CAAC;;EAEpD;EACAxE,SAAS,CAAC,MAAM;IACZ,KAAK+C,SAAS,CAAC,CAAC,CAAC;IACjB,KAAKA,SAAS,CAAC,CAAC,CAAC;EACrB,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf,MAAMoC,YAAY,GAAGpF,WAAW,CAC3BqF,KAA2B,IAAK;IAC7B,IAAIrD,mBAAmB,CAACkB,OAAO,EAAE;MAC7B;IACJ;IAEA,KAAKtD,uBAAuB,CAAC,KAAK,CAAC;IAEnC,MAAMkF,QAAQ,GAAGrE,gBAAgB,CAAC;MAAEwB,KAAK;MAAEU;IAAU,CAAC,CAAC;IAEvD,IAAI,CAACmC,QAAQ,EAAE;MACX;IACJ;IAEA,MAAM;MAAEC;IAAO,CAAC,GAAGD,QAAQ;IAE3B,MAAM;MAAEvB;IAAW,CAAC,GAAG8B,KAAK,CAACC,MAAwB;IAErD,MAAM;MAAEL;IAAa,CAAC,GAAGzE,eAAe,CAAC;MAAEiE,UAAU;MAAEK,QAAQ,EAAEC,MAAM;MAAExB;IAAW,CAAC,CAAC;IAEtF,IAAI0B,YAAY,IAAI,CAAC,EAAE;MACnB1D,iBAAiB,CAACJ,KAAK,CAAC8D,YAAY,CAAC,EAAEvB,EAAE,CAAC;IAC9C;IAEA,IAAI3B,OAAO,CAACmB,OAAO,EAAE;MACjBqC,YAAY,CAACxD,OAAO,CAACmB,OAAO,CAAC;IACjC;IAEAnB,OAAO,CAACmB,OAAO,GAAGsC,MAAM,CAACC,UAAU,CAAC,MAAM;MACtCZ,aAAa,CAAC,CAAC;IACnB,CAAC,EAAE,GAAG,CAAC;EACX,CAAC,EACD,CAACA,aAAa,EAAElC,SAAS,EAAExB,KAAK,EAAEc,KAAK,EAAEwC,UAAU,CACvD,CAAC;EAED,OAAOvE,OAAO,CACV,mBACIH,KAAA,CAAAiE,aAAA,CAACrD,kBAAkB;IAAC+E,WAAW,EAAExE,UAAW;IAACyE,GAAG,EAAE9D;EAAgB,gBAC9D9B,KAAA,CAAAiE,aAAA,CAACtD,6BAA6B;IAC1BiF,GAAG,EAAE1D,KAAM;IACX2D,IAAI,EAAE1E,UAAU,GAAG,KAAK,GAAG,GAAI;IAC/B2E,WAAW,EAAE,CAAE;IACfC,eAAe,EACXxD,cAAc,GACR;MAAE,GAAGb,SAAS;MAAEG,KAAK,EAAEH,SAAS,CAACG,KAAK,GAAGe;IAAU,CAAC,GACpD;MAAE,GAAGlB;IAAU,CACxB;IACDwC,MAAM,EAAEtB,SAAU;IAClBoD,MAAM,EAAEb,eAAgB;IACxBc,SAAS,EAAEnB,aAAc;IACzBoB,QAAQ,EAAE/E,UAAU,GAAG,CAAC,CAAC,GAAG;MAAEgF,eAAe,EAAE7D,KAAK,CAAC,KAAK;IAAE,CAAE;IAC9D8D,UAAU,EAAEjF,UAAU,GAAG,CAAC,CAAC,GAAG;MAAEgF,eAAe,EAAE7D,KAAK,CAAC,KAAK;IAAE;EAAE,GAE/DgC,SAC0B,CAAC,eAChCtE,KAAA,CAAAiE,aAAA,CAAClD,yBAAyB;IACtB4E,WAAW,EAAExE,UAAW;IACxB+C,MAAM,EAAE,CAAC3B,cAAc,GAAGb,SAAS,CAACG,KAAK,GAAGe,SAAS,GAAGlB,SAAS,CAACG,KAAM;IACxE+D,GAAG,EAAE7D,sBAAuB;IAC5BsE,QAAQ,EAAEhB;EAAa,gBAEvBrF,KAAA,CAAAiE,aAAA,CAACnE,eAAe,qBACZE,KAAA,CAAAiE,aAAA,CAACpD,gCAAgC,QAC5BgD,OAC6B,CACrB,CACM,CACX,CACvB,EACD,CACIA,OAAO,EACPnC,SAAS,EACToD,aAAa,EACbO,YAAY,EACZF,eAAe,EACfhE,UAAU,EACVoB,cAAc,EACdK,SAAS,EACTV,KAAK,EACLI,KAAK,EACLgC,SAAS,CAEjB,CAAC;AACL,CAAC;AAEDtD,YAAY,CAACsF,WAAW,GAAG,cAAc;AAEzC,eAAetF,YAAY","ignoreList":[]}
1	+ {"version":3,"file":"SliderButton.js","names":["setRefreshScrollEnabled","AnimatePresence","useAnimate","React","useCallback","useEffect","useMemo","useRef","useState","useElementSize","calculateBiggestWidth","getNearestPoint","getThumbPosition","Icon","Popup","StyledMotionSliderButtonThumb","StyledSliderButton","StyledSliderButtonButtonsWrapper","StyledSliderButtonItem","StyledSliderButtonPopupContent","StyledSliderButtonPopupContentItem","StyledSliderButtonWrapper","SliderButton","_ref","selectedButtonId","isDisabled","items","onChange","dragRange","setDragRange","left","right","shownItemsCount","setShownItemsCount","length","sliderSize","setSliderSize","width","sliderButtonRef","sliderButtonWrapperRef","popupRef","scope","animate","initialItemWidth","elementSize","isSliderBigger","Math","floor","itemWidth","sliderWidth","maxShownItemsCount","itemCount","count","animation","x","current","type","duration","setItemPosition","index","findIndex","_ref2","id","handleClick","show","hide","buttons","newItems","slice","otherItems","elements","map","_ref3","text","createElement","$width","key","onClick","popupContent","_ref4","push","ref","content","icons","color","_ref5","pseudoButtons","_ref6","_ref7","snapPoints","points","i","handleDragEnd","position","middle","scrollLeft","nearestPoint","nearestIndex","$isDisabled","$isInvisible","drag","dragElastic","dragConstraints","onDragEnd","displayName"],"sources":["../../../../src/components/slider-button/SliderButton.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport { AnimatePresence, useAnimate } from 'framer-motion';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { PopupRef } from '../../types/popup';\nimport type { SliderButtonItem } from '../../types/slider-button';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\nimport Icon from '../icon/Icon';\nimport Popup from '../popup/Popup';\nimport {\n StyledMotionSliderButtonThumb,\n StyledSliderButton,\n StyledSliderButtonButtonsWrapper,\n StyledSliderButtonItem,\n StyledSliderButtonPopupContent,\n StyledSliderButtonPopupContentItem,\n StyledSliderButtonWrapper,\n} from './SliderButton.styles';\n\nexport type SliderButtonProps = {\n /*\n Whether the button is disabled.\n /\n isDisabled?: boolean;\n /\n Function to be executed when a button is selected.\n * @param id\n /\n onChange?: (id: string) => void;\n /\n The buttons that are slidable.\n /\n items: SliderButtonItem[];\n /\n The id of a button that should be selected.\n /\n selectedButtonId?: string;\n};\n\nconst SliderButton: FC<SliderButtonProps> = ({ selectedButtonId, isDisabled, items, onChange }) => {\n const [dragRange, setDragRange] = useState({ left: 0, right: 0 });\n const [shownItemsCount, setShownItemsCount] = useState(items.length);\n const [sliderSize, setSliderSize] = useState({ width: 0 });\n\n const sliderButtonRef = useRef<HTMLDivElement>(null);\n const sliderButtonWrapperRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<PopupRef>(null);\n\n const [scope, animate] = useAnimate();\n\n const initialItemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n const elementSize = useElementSize(sliderButtonRef);\n\n useEffect(() => {\n if (elementSize) setSliderSize(elementSize);\n }, [elementSize]);\n\n const isSliderBigger = useMemo(\n () => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length - 1,\n [initialItemWidth, items.length, sliderSize],\n );\n\n const itemWidth = useMemo(() => {\n const sliderWidth = sliderSize?.width \|\| 0;\n const maxShownItemsCount = Math.floor(sliderWidth / initialItemWidth);\n const itemCount = items.length \|\| 1;\n\n setShownItemsCount(isSliderBigger ? maxShownItemsCount : itemCount);\n\n return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);\n }, [initialItemWidth, isSliderBigger, items.length, sliderSize?.width]);\n\n useEffect(() => {\n if (sliderSize) {\n const sliderWidth = itemWidth (items.length - 1);\n\n const count = Math.floor(sliderSize.width / itemWidth);\n\n setDragRange({ left: 0, right: isSliderBigger ? itemWidth * count : sliderWidth });\n }\n }, [isSliderBigger, itemWidth, items.length, sliderSize]);\n\n const animation = useCallback(\n async (x: number) => {\n await animate(\n scope.current,\n { x },\n {\n type: 'tween',\n duration: 0.2,\n },\n );\n },\n [animate, scope],\n );\n\n const setItemPosition = useCallback(\n (index: number) => {\n void animation(itemWidth * index);\n },\n [animation, itemWidth],\n );\n\n useEffect(() => {\n if (typeof selectedButtonId === 'string') {\n let index = items.findIndex(({ id }) => id === selectedButtonId);\n\n if (items.length > shownItemsCount && index > shownItemsCount - 1) {\n index = shownItemsCount - 1;\n }\n\n if (index >= 0) {\n setItemPosition(index);\n }\n }\n }, [\n animation,\n dragRange.right,\n isSliderBigger,\n itemWidth,\n items,\n selectedButtonId,\n setItemPosition,\n shownItemsCount,\n ]);\n\n const handleClick = useCallback(\n (id: string, index: number) => {\n if (isDisabled) {\n return;\n }\n\n if (typeof onChange === 'function' && id !== 'more') {\n onChange(id);\n }\n\n if (popupRef.current) {\n if (id === 'more') {\n popupRef.current.show();\n } else {\n popupRef.current.hide();\n }\n }\n\n setItemPosition(index);\n },\n [isDisabled, onChange, setItemPosition],\n );\n\n const buttons = useMemo(() => {\n if (items.length > shownItemsCount) {\n const newItems = items.slice(0, shownItemsCount - 1);\n const otherItems = items.slice(shownItemsCount - 1);\n\n const elements = newItems.map(({ id, text }, index) => (\n <StyledSliderButtonItem\n $width={itemWidth}\n key={`slider-button-${id}`}\n onClick={() => handleClick(id, index)}\n >\n {text}\n </StyledSliderButtonItem>\n ));\n\n const popupContent = otherItems.map(({ id, text }) => (\n <StyledSliderButtonPopupContentItem\n key={`slider-button-${id}`}\n onClick={() => handleClick(id, newItems.length)}\n >\n {text}\n </StyledSliderButtonPopupContentItem>\n ));\n\n const id = 'more';\n\n elements.push(\n <StyledSliderButtonItem $width={itemWidth} key={`slider-button-${id}`}>\n <Popup\n ref={popupRef}\n content={\n <StyledSliderButtonPopupContent>\n {popupContent}\n </StyledSliderButtonPopupContent>\n }\n >\n <Icon icons={['fa fa-ellipsis']} color=\"white\" />\n </Popup>\n </StyledSliderButtonItem>,\n );\n\n return elements;\n }\n return items.map(({ id, text }) => (\n <StyledSliderButtonItem $width={itemWidth} key={`slider-button-${id}`}>\n {text}\n </StyledSliderButtonItem>\n ));\n }, [handleClick, itemWidth, items, shownItemsCount]);\n\n const pseudoButtons = useMemo(() => {\n if (items.length > shownItemsCount) {\n const newItems = items.slice(0, shownItemsCount - 1);\n\n const elements = newItems.map(({ id, text }, index) => (\n <StyledSliderButtonItem\n $width={itemWidth}\n key={`pseudo-slider-button-${id}`}\n onClick={() => handleClick(id, index)}\n >\n {text}\n </StyledSliderButtonItem>\n ));\n\n const id = 'more';\n\n elements.push(\n <StyledSliderButtonItem\n $width={itemWidth}\n key={`pseudo-slider-button-${id}`}\n onClick={() => handleClick(id, newItems.length)}\n >\n <Icon icons={['fa fa-ellipsis']} />\n </StyledSliderButtonItem>,\n );\n\n return elements;\n }\n return items.map(({ id, text }, index) => (\n <StyledSliderButtonItem\n $width={itemWidth}\n key={`pseudo-slider-button-${id}`}\n onClick={() => handleClick(id, index)}\n >\n {text}\n </StyledSliderButtonItem>\n ));\n }, [handleClick, itemWidth, items, shownItemsCount]);\n\n /*\n Creates an array with the snap points relative to the width of the items\n /\n const snapPoints = useMemo(() => {\n const points = [0];\n\n for (let i = 1; i < items.length; i++) {\n points.push(itemWidth i);\n }\n\n return points;\n }, [itemWidth, items.length]);\n\n const handleDragEnd = useCallback(() => {\n void setRefreshScrollEnabled(true);\n\n const position = getThumbPosition({ scope, itemWidth });\n\n if (!position) {\n return;\n }\n\n const { middle, left } = position;\n\n let scrollLeft = 0;\n\n if (sliderButtonWrapperRef.current) {\n scrollLeft = sliderButtonWrapperRef.current.scrollLeft;\n\n sliderButtonWrapperRef.current.scrollLeft = getNearestPoint({\n snapPoints,\n position: middle,\n scrollLeft: scrollLeft - left,\n }).nearestPoint;\n }\n\n const { nearestIndex } = getNearestPoint({\n snapPoints,\n position: middle,\n scrollLeft,\n });\n\n const { nearestPoint } = getNearestPoint({\n snapPoints,\n position: middle,\n scrollLeft: 0,\n });\n\n if (nearestPoint >= 0 && nearestIndex >= 0) {\n void animation(nearestPoint);\n\n let id;\n\n if (nearestIndex === shownItemsCount - 1) {\n id = 'more';\n } else {\n id = items[nearestIndex]?.id;\n }\n\n if (popupRef.current) {\n if (id === 'more') {\n popupRef.current.show();\n } else {\n popupRef.current.hide();\n }\n }\n\n if (typeof onChange === 'function' && id && id !== 'more') {\n onChange(id);\n }\n }\n }, [animation, itemWidth, items, onChange, scope, shownItemsCount, snapPoints]);\n\n return useMemo(\n () => (\n <StyledSliderButton $isDisabled={isDisabled} ref={sliderButtonRef}>\n <StyledSliderButtonButtonsWrapper $isInvisible>\n {pseudoButtons}\n </StyledSliderButtonButtonsWrapper>\n <StyledMotionSliderButtonThumb\n ref={scope}\n drag={isDisabled ? false : 'x'}\n dragElastic={0}\n dragConstraints={\n isSliderBigger\n ? { ...dragRange, right: dragRange.right - itemWidth }\n : { ...dragRange }\n }\n $width={itemWidth}\n onDragEnd={handleDragEnd}\n />\n <StyledSliderButtonWrapper\n $isDisabled={isDisabled}\n $width={!isSliderBigger ? dragRange.right + itemWidth : dragRange.right}\n ref={sliderButtonWrapperRef}\n >\n <AnimatePresence>\n <StyledSliderButtonButtonsWrapper>\n {buttons}\n </StyledSliderButtonButtonsWrapper>\n </AnimatePresence>\n </StyledSliderButtonWrapper>\n </StyledSliderButton>\n ),\n [\n buttons,\n dragRange,\n handleDragEnd,\n isDisabled,\n isSliderBigger,\n itemWidth,\n pseudoButtons,\n scope,\n ],\n );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":"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","ignoreList":[]}

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

@@ -16,7 +16,7 @@ export const StyledSliderButtonWrapper = styled.div`
   let {
     theme
   } = _ref2;
-  return theme['404'];
+  return theme['408'];
 }};
     border-radius: 3px;
     border: none;
@@ -28,7 +28,6 @@ export const StyledSliderButtonWrapper = styled.div`
     position: relative;
     user-select: none;
     transition: opacity 0.3s ease;
-    z-index: 1;
     width: ${_ref3 => {
   let {
@@ -78,32 +77,63 @@ export const StyledSliderButtonItem = styled.div`
     justify-content: center;
     color: white;
 `;
+export const StyledSliderButtonPopupContent = styled.div`
+    display: flex;
+    flex-direction: column;
+    padding: 7px 12px;
+`;
+export const StyledSliderButtonPopupContentItem = styled.div`
+    font-size: 110%;
+    font-family: 'Roboto Medium', serif;
+    cursor: pointer;
+`;
 export const StyledSliderButtonButtonsWrapper = styled.div`
     position: absolute;
+    z-index: ${_ref7 => {
+  let {
+    $isInvisible
+  } = _ref7;
+  return $isInvisible ? '2' : '4';
+}};
+    opacity: ${_ref8 => {
+  let {
+    $isInvisible
+  } = _ref8;
+  return $isInvisible ? 0 : 1;
+}};
     display: flex;
+    cursor: pointer;
     align-items: center;
+    pointer-events: ${_ref9 => {
+  let {
+    $isInvisible
+  } = _ref9;
+  return $isInvisible ? 'auto' : 'none';
+}};
 `;
 export const StyledMotionSliderButtonThumb = styled(motion.div)`
     font-size: 110%;
     font-family: 'Roboto Medium', serif;
-    background-color: ${_ref7 => {
+    background-color: ${_ref10 => {
   let {
     theme
-  } = _ref7;
-  return theme['408'];
+  } = _ref10;
+  return theme['405'];
 }};
-    width: ${_ref8 => {
+    opacity: 1;
+    width: ${_ref11 => {
   let {
     $width
-  } = _ref8;
-  return $width;
+  } = _ref11;
+  return $width - 8;
 }}px;
     position: absolute;
-    border-radius: 3px;
-    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
+    border-radius: 2px;
+    top: 4px;
+    left: 4px;
     white-space: nowrap;
     z-index: 3;
-    height: 32px;
+    height: 24px;
     padding: 7px 12px;
     display: flex;
     color: white;

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

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

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

@@ -18,10 +18,6 @@ export type SliderButtonProps = {
      * The id of a button that should be selected.
      */
     selectedButtonId?: string;
-    /**
-     * Whether the full width should be used if the slider is smaller.
-     */
-    shouldUseFullWidth?: boolean;
 };
 declare const SliderButton: FC<SliderButtonProps>;
 export default SliderButton;

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

@@ -9,11 +9,15 @@ type StyledSliderButtonWrapperProps = WithTheme<{
 }>;
 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;
+export declare const StyledSliderButtonPopupContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledSliderButtonPopupContentItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+type StyledSliderButtonButtonsWrapperProps = WithTheme<{
+    $isInvisible?: boolean;
+}>;
+export declare const StyledSliderButtonButtonsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSliderButtonButtonsWrapperProps>> & string;
 type StyledMotionSliderButtonThumbProps = WithTheme<{
     $width: number;
 }>;

package/package.json CHANGED Viewed

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