npm - @chayns-components/core - Versions diffs - 5.0.0-beta.844 → 5.0.0-beta.848 - Mend

@chayns-components/core 5.0.0-beta.844 → 5.0.0-beta.848

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 (10) hide show

package/lib/cjs/components/icon/Icon.js CHANGED Viewed

@@ -57,9 +57,15 @@ const Icon = ({
     $size: size
   }, icons.map(icon => {
     const stackSizeFactor = (0, _icon.getStackSizeFactor)(icon);
-    const isIconStyleGiven = /fa[srltd]|fa-(?:regular|solid|thin|light|duotone|sharp)/.test(icon);
-    const iconStyle = isIconStyleGiven ? undefined : (theme === null || theme === void 0 ? void 0 : theme.iconStyle) ?? 'fa-regular';
-    const iconClasses = (0, _clsx.default)(iconStyle, icon, {
+    // const isIconStyleGiven =
+    //     /fa[srltd]|fa-(?:regular|solid|thin|light|duotone|sharp)/.test(icon);
+    //
+    // const iconStyle = isIconStyleGiven
+    //     ? undefined
+    //     : (theme?.iconStyle as string) ?? 'fa-regular';
+    const iconClasses = (0, _clsx.default)(icon, {
       'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined
     });
     return /*#__PURE__*/_react.default.createElement(_Icon.StyledIcon, {

package/lib/cjs/components/icon/Icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon.js","names":["_clsx","_interopRequireDefault","require","_react","_styledComponents","_icon","_Icon","e","__esModule","default","Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","theme","useTheme","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","createElement","StyledIconWrapper","$isDisabled","undefined","$isOnClick","$size","map","~~isIconStyleGiven","test","iconStyle","~~iconClasses","StyledIcon","$color","includes","$fontSize","$isStacked","key","displayName","_default","exports"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { useTheme } from 'styled-components';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\n\nexport type IconProps = {\n /*\n Additional class names for the root element\n /\n className?: string;\n /\n The color of the icon\n /\n color?: string;\n /\n The FontAwesome or tobit icons to render. Multiple icons are stacked.\n /\n icons: string[];\n /\n Disables the icon so that it cannot be clicked anymore\n /\n isDisabled?: boolean;\n /\n Function to be executed when the icon was clicked\n /\n onClick?: MouseEventHandler<HTMLSpanElement>;\n /\n Function to be executed when the icon was double-clicked\n /\n onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n /\n Function to be executed when a mouse button is pressed on the icon\n /\n onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n /\n Size of the icon in pixel\n /\n size?: number;\n /\n Stops event propagation on click\n /\n shouldStopPropagation?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n className,\n color,\n icons,\n isDisabled,\n onClick,\n onDoubleClick,\n onMouseDown,\n size = 15,\n shouldStopPropagation,\n}) => {\n const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n };\n\n const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onDoubleClick === 'function') {\n onDoubleClick(event);\n }\n };\n\n const theme = useTheme();\n\n let maxStackSizeFactor = 1;\n\n icons.forEach((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n maxStackSizeFactor = stackSizeFactor;\n }\n });\n\n const shouldUseStackedIcon = icons.length > 1;\n\n const wrapperClasses = clsx(\n 'beta-chayns-icon',\n shouldUseStackedIcon ? 'fa-stack' : '',\n className,\n );\n\n return (\n <StyledIconWrapper\n className={wrapperClasses}\n $isDisabled={isDisabled}\n onClick={typeof onClick === 'function' ? handleClick : undefined}\n $isOnClick={typeof onClick === 'function'}\n onDoubleClick={typeof onDoubleClick === 'function' ? handleDoubleClick : undefined}\n onMouseDown={onMouseDown}\n $size={size}\n >\n {icons.map((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n const isIconStyleGiven =\n /fa[srltd]\|fa-(?:regular\|solid\|thin\|light\|duotone\|sharp)/.test(icon);\n\n const iconStyle = isIconStyleGiven\n ? undefined\n : (theme?.iconStyle as string) ?? 'fa-regular';\n\n const iconClasses = clsx(~~iconStyle,~~ icon, {\n 'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n });\n\n return (\n <StyledIcon\n className={iconClasses}\n $color={icon.includes('fa-inverse') ? 'white' : color}\n $fontSize={((stackSizeFactor \|\| 1) / maxStackSizeFactor) size}\n $isStacked={shouldUseStackedIcon}\n key={icon}\n $size={size}\n />\n );\n })}\n </StyledIconWrapper>\n );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAA8D,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAyC9D,MAAMG,IAAmB,GAAGA,CAAC;EACzBC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,UAAU;EACVC,OAAO;EACPC,aAAa;EACbC,WAAW;EACXC,IAAI,GAAG,EAAE;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,WAA+C,GAAIC,KAAK,IAAK;IAC/D,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEA,IAAI,OAAOP,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACM,KAAK,CAAC;IAClB;EACJ,CAAC;EAED,MAAME,iBAAqD,GAAIF,KAAK,IAAK;IACrE,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEA,IAAI,OAAON,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACK,KAAK,CAAC;IACxB;EACJ,CAAC;EAED,MAAMG,KAAK,GAAG,IAAAC,0BAAQ,EAAC,CAAC;EAExB,IAAIC,kBAAkB,GAAG,CAAC;EAE1Bb,KAAK,CAACc,OAAO,CAAEC,IAAI,IAAK;IACpB,MAAMC,eAAe,GAAG,IAAAC,wBAAkB,EAACF,IAAI,CAAC;IAEhD,IAAIC,eAAe,IAAIA,eAAe,GAAGH,kBAAkB,EAAE;MACzDA,kBAAkB,GAAGG,eAAe;IACxC;EACJ,CAAC,CAAC;EAEF,MAAME,oBAAoB,GAAGlB,KAAK,CAACmB,MAAM,GAAG,CAAC;EAE7C,MAAMC,cAAc,GAAG,IAAAC,aAAI,EACvB,kBAAkB,EAClBH,oBAAoB,GAAG,UAAU,GAAG,EAAE,EACtCpB,SACJ,CAAC;EAED,oBACIR,MAAA,CAAAM,OAAA,CAAA0B,aAAA,CAAC7B,KAAA,CAAA8B,iBAAiB;IACdzB,SAAS,EAAEsB,cAAe;IAC1BI,WAAW,EAAEvB,UAAW;IACxBC,OAAO,EAAE,OAAOA,OAAO,KAAK,UAAU,GAAGK,WAAW,GAAGkB,SAAU;IACjEC,UAAU,EAAE,OAAOxB,OAAO,KAAK,UAAW;IAC1CC,aAAa,EAAE,OAAOA,aAAa,KAAK,UAAU,GAAGO,iBAAiB,GAAGe,SAAU;IACnFrB,WAAW,EAAEA,WAAY;IACzBuB,KAAK,EAAEtB;EAAK,GAEXL,KAAK,CAAC4B,GAAG,CAAEb,IAAI,IAAK;IACjB,MAAMC,eAAe,GAAG,IAAAC,wBAAkB,EAACF,IAAI,CAAC;IAEhD~~,MAAMc,gBAAgB,GAClB,yDAAyD,CAACC,IAAI,CAACf,IAAI,CAAC~~;~~IAExE,MAAMgB,SAAS,GAAGF,gBAAgB,GAC5BJ,SAAS,GACT,CAACd,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEoB,SAAS,KAAe,YAAY~~;~~IAElD~~,~~MAAMC~~,WAAW,GAAG,~~IAAAX~~,aAAI,~~EAACU~~,~~SAAS,EAAEhB,~~IAAI,EAAE;~~MACtC~~,aAAa,EAAEG,oBAAoB,IAAIF,eAAe,KAAKS;IAC/D,CAAC,CAAC;IAEF,oBACInC,MAAA,CAAAM,OAAA,CAAA0B,aAAA,CAAC7B,KAAA,~~CAAAwC~~,UAAU;~~MACPnC~~,SAAS,~~EAAEkC~~,WAAY;MACvBE,MAAM,~~EAAEnB~~,IAAI,~~CAACoB~~,QAAQ,CAAC,YAAY,CAAC,GAAG,OAAO,~~GAAGpC~~,KAAM;~~MACtDqC~~,SAAS,EAAG,~~CAACpB~~,eAAe,IAAI,CAAC,IAAIH,kBAAkB,GAAIR,IAAK;~~MAChEgC~~,UAAU,~~EAAEnB~~,oBAAqB;~~MACjCoB~~,GAAG,~~EAAEvB~~,IAAK;MACVY,KAAK,EAAEtB;IAAK,CACf,CAAC;EAEV,CAAC,CACc,CAAC;AAE5B,CAAC;AAEDR,IAAI,~~CAAC0C~~,WAAW,GAAG,MAAM;AAAC,IAAAC,QAAA,GAAAC,OAAA,~~CAAA7C~~,OAAA,GAEXC,IAAI","ignoreList":[]}
1	+ {"version":3,"file":"Icon.js","names":["_clsx","_interopRequireDefault","require","_react","_styledComponents","_icon","_Icon","e","__esModule","default","Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","theme","useTheme","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","createElement","StyledIconWrapper","$isDisabled","undefined","$isOnClick","$size","map","iconClasses","StyledIcon","$color","includes","$fontSize","$isStacked","key","displayName","_default","exports"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { useTheme } from 'styled-components';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\n\nexport type IconProps = {\n /*\n Additional class names for the root element\n /\n className?: string;\n /\n The color of the icon\n /\n color?: string;\n /\n The FontAwesome or tobit icons to render. Multiple icons are stacked.\n /\n icons: string[];\n /\n Disables the icon so that it cannot be clicked anymore\n /\n isDisabled?: boolean;\n /\n Function to be executed when the icon was clicked\n /\n onClick?: MouseEventHandler<HTMLSpanElement>;\n /\n Function to be executed when the icon was double-clicked\n /\n onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n /\n Function to be executed when a mouse button is pressed on the icon\n /\n onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n /\n Size of the icon in pixel\n /\n size?: number;\n /\n Stops event propagation on click\n /\n shouldStopPropagation?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n className,\n color,\n icons,\n isDisabled,\n onClick,\n onDoubleClick,\n onMouseDown,\n size = 15,\n shouldStopPropagation,\n}) => {\n const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n };\n\n const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onDoubleClick === 'function') {\n onDoubleClick(event);\n }\n };\n\n const theme = useTheme();\n\n let maxStackSizeFactor = 1;\n\n icons.forEach((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n maxStackSizeFactor = stackSizeFactor;\n }\n });\n\n const shouldUseStackedIcon = icons.length > 1;\n\n const wrapperClasses = clsx(\n 'beta-chayns-icon',\n shouldUseStackedIcon ? 'fa-stack' : '',\n className,\n );\n\n return (\n <StyledIconWrapper\n className={wrapperClasses}\n $isDisabled={isDisabled}\n onClick={typeof onClick === 'function' ? handleClick : undefined}\n $isOnClick={typeof onClick === 'function'}\n onDoubleClick={typeof onDoubleClick === 'function' ? handleDoubleClick : undefined}\n onMouseDown={onMouseDown}\n $size={size}\n >\n {icons.map((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n // const isIconStyleGiven =\n // /fa[srltd]\|fa-(?:regular\|solid\|thin\|light\|duotone\|sharp)/.test(icon);\n //\n // const iconStyle = isIconStyleGiven\n // ? undefined\n // : (theme?.iconStyle as string) ?? 'fa-regular';\n\n const iconClasses = clsx(icon, {\n 'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n });\n\n return (\n <StyledIcon\n className={iconClasses}\n $color={icon.includes('fa-inverse') ? 'white' : color}\n $fontSize={((stackSizeFactor \|\| 1) / maxStackSizeFactor) size}\n $isStacked={shouldUseStackedIcon}\n key={icon}\n $size={size}\n />\n );\n })}\n </StyledIconWrapper>\n );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"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","ignoreList":[]}

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

@@ -18,7 +18,8 @@ const SliderButton = ({
   selectedButtonId,
   isDisabled,
   items,
-  onChange
+  onChange,
+  shouldUseFullWidth = false
 }) => {
   const [selectedButton, setSelectedButton] = (0, _react.useState)(undefined);
   const [dragRange, setDragRange] = (0, _react.useState)({
@@ -30,10 +31,18 @@ const SliderButton = ({
   const timeout = (0, _react.useRef)();
   const preventHandleScroll = (0, _react.useRef)(false);
   const [scope, animate] = (0, _framerMotion.useAnimate)();
-  const itemWidth = (0, _react.useMemo)(() => (0, _calculate.calculateBiggestWidth)(items), [items]);
+  const 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 / itemWidth) < items.length, [itemWidth, items.length, sliderSize]);
+  const isSliderBigger = (0, _react.useMemo)(() => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length, [initialItemWidth, items.length, sliderSize]);
+  const itemWidth = (0, _react.useMemo)(() => {
+    if (!isSliderBigger && shouldUseFullWidth) {
+      const sliderWidth = (sliderSize === null || sliderSize === void 0 ? void 0 : sliderSize.width) || 0;
+      const itemCount = items.length || 1;
+      return sliderWidth / itemCount;
+    }
+    return (0, _calculate.calculateBiggestWidth)(items);
+  }, [isSliderBigger, items, shouldUseFullWidth, sliderSize === null || sliderSize === void 0 ? void 0 : sliderSize.width]);
   (0, _react.useEffect)(() => {
     if (sliderSize) {
       const sliderWidth = itemWidth * (items.length - 1);

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","selectedButton","setSelectedButton","useState","undefined","dragRange","setDragRange","left","right","sliderButtonRef","useRef","sliderButtonWrapperRef","timeout","preventHandleScroll","scope","animate","useAnimate","itemWidth","useMemo","calculateBiggestWidth","sliderSize","useElementSize","theme","useTheme","isSliderBigger","Math","floor","width","length","useEffect","sliderWidth","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\nconst SliderButton: FC<SliderButtonProps> = ({ selectedButtonId, isDisabled, items, onChange }) => {\n const [selectedButton, setSelectedButton] = useState<string \| undefined>(undefined);\n const [dragRange, setDragRange] = useState({ left: 0, right: 0 });\n\n const sliderButtonRef = useRef<HTMLDivElement>(null);\n const sliderButtonWrapperRef = useRef<HTMLDivElement>(null);\n const timeout = useRef<number>();\n const preventHandleScroll = useRef(false);\n\n const [scope, animate] = useAnimate();\n\n const itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n\n const sliderSize = useElementSize(sliderButtonRef);\n\n const theme: Theme = useTheme();\n\n const isSliderBigger = useMemo(\n () => sliderSize && Math.floor(sliderSize.width / itemWidth) < items.length,\n [itemWidth, items.length, sliderSize],\n );\n\n useEffect(() => {\n if (sliderSize) {\n const sliderWidth = itemWidth (items.length - 1);\n\n const count = Math.floor(sliderSize.width / itemWidth);\n\n setDragRange({ left: 0, right: isSliderBigger ? itemWidth * count : sliderWidth });\n }\n }, [isSliderBigger, itemWidth, items.length, sliderSize]);\n\n const animation = useCallback(\n async (x: number) => {\n await animate(\n scope.current,\n { x },\n {\n type: 'tween',\n duration: 0.2,\n },\n );\n },\n [animate, scope],\n );\n\n 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 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","_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","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 (!isSliderBigger && shouldUseFullWidth) {\n const sliderWidth = sliderSize?.width \|\| 0;\n const itemCount = items.length \|\| 1;\n\n return sliderWidth / itemCount;\n }\n\n return calculateBiggestWidth(items);\n }, [isSliderBigger, items, 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 thumbText,\n ],\n );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/icon/Icon.js CHANGED Viewed

@@ -51,9 +51,15 @@ const Icon = _ref => {
     $size: size
   }, icons.map(icon => {
     const stackSizeFactor = getStackSizeFactor(icon);
-    const isIconStyleGiven = /fa[srltd]|fa-(?:regular|solid|thin|light|duotone|sharp)/.test(icon);
-    const iconStyle = isIconStyleGiven ? undefined : theme?.iconStyle ?? 'fa-regular';
-    const iconClasses = clsx(iconStyle, icon, {
+    // const isIconStyleGiven =
+    //     /fa[srltd]|fa-(?:regular|solid|thin|light|duotone|sharp)/.test(icon);
+    //
+    // const iconStyle = isIconStyleGiven
+    //     ? undefined
+    //     : (theme?.iconStyle as string) ?? 'fa-regular';
+    const iconClasses = clsx(icon, {
       'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined
     });
     return /*#__PURE__*/React.createElement(StyledIcon, {

package/lib/esm/components/icon/Icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon.js","names":["clsx","React","useTheme","getStackSizeFactor","StyledIcon","StyledIconWrapper","Icon","_ref","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","theme","maxStackSizeFactor","forEach","icon","stackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","createElement","$isDisabled","undefined","$isOnClick","$size","map","~~isIconStyleGiven","test","iconStyle","~~iconClasses","$color","includes","$fontSize","$isStacked","key","displayName"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { useTheme } from 'styled-components';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\n\nexport type IconProps = {\n /*\n Additional class names for the root element\n /\n className?: string;\n /\n The color of the icon\n /\n color?: string;\n /\n The FontAwesome or tobit icons to render. Multiple icons are stacked.\n /\n icons: string[];\n /\n Disables the icon so that it cannot be clicked anymore\n /\n isDisabled?: boolean;\n /\n Function to be executed when the icon was clicked\n /\n onClick?: MouseEventHandler<HTMLSpanElement>;\n /\n Function to be executed when the icon was double-clicked\n /\n onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n /\n Function to be executed when a mouse button is pressed on the icon\n /\n onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n /\n Size of the icon in pixel\n /\n size?: number;\n /\n Stops event propagation on click\n /\n shouldStopPropagation?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n className,\n color,\n icons,\n isDisabled,\n onClick,\n onDoubleClick,\n onMouseDown,\n size = 15,\n shouldStopPropagation,\n}) => {\n const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n };\n\n const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onDoubleClick === 'function') {\n onDoubleClick(event);\n }\n };\n\n const theme = useTheme();\n\n let maxStackSizeFactor = 1;\n\n icons.forEach((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n maxStackSizeFactor = stackSizeFactor;\n }\n });\n\n const shouldUseStackedIcon = icons.length > 1;\n\n const wrapperClasses = clsx(\n 'beta-chayns-icon',\n shouldUseStackedIcon ? 'fa-stack' : '',\n className,\n );\n\n return (\n <StyledIconWrapper\n className={wrapperClasses}\n $isDisabled={isDisabled}\n onClick={typeof onClick === 'function' ? handleClick : undefined}\n $isOnClick={typeof onClick === 'function'}\n onDoubleClick={typeof onDoubleClick === 'function' ? handleDoubleClick : undefined}\n onMouseDown={onMouseDown}\n $size={size}\n >\n {icons.map((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n const isIconStyleGiven =\n /fa[srltd]\|fa-(?:regular\|solid\|thin\|light\|duotone\|sharp)/.test(icon);\n\n const iconStyle = isIconStyleGiven\n ? undefined\n : (theme?.iconStyle as string) ?? 'fa-regular';\n\n const iconClasses = clsx(~~iconStyle,~~ icon, {\n 'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n });\n\n return (\n <StyledIcon\n className={iconClasses}\n $color={icon.includes('fa-inverse') ? 'white' : color}\n $fontSize={((stackSizeFactor \|\| 1) / maxStackSizeFactor) size}\n $isStacked={shouldUseStackedIcon}\n key={icon}\n $size={size}\n />\n );\n })}\n </StyledIconWrapper>\n );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"AAAA,OAAOA,IAAI,MAAM,MAAM;AACvB,OAAOC,KAAK,MAAiC,OAAO;AACpD,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,kBAAkB,QAAQ,kBAAkB;AACrD,SAASC,UAAU,EAAEC,iBAAiB,QAAQ,eAAe;AAyC7D,MAAMC,IAAmB,GAAGC,IAAA,IAUtB;EAAA,IAVuB;IACzBC,SAAS;IACTC,KAAK;IACLC,KAAK;IACLC,UAAU;IACVC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,IAAI,GAAG,EAAE;IACTC;EACJ,CAAC,GAAAT,IAAA;EACG,MAAMU,WAA+C,GAAIC,KAAK,IAAK;IAC/D,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEA,IAAI,OAAOP,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACM,KAAK,CAAC;IAClB;EACJ,CAAC;EAED,MAAME,iBAAqD,GAAIF,KAAK,IAAK;IACrE,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEA,IAAI,OAAON,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACK,KAAK,CAAC;IACxB;EACJ,CAAC;EAED,MAAMG,KAAK,GAAGnB,QAAQ,CAAC,CAAC;EAExB,IAAIoB,kBAAkB,GAAG,CAAC;EAE1BZ,KAAK,CAACa,OAAO,CAAEC,IAAI,IAAK;IACpB,MAAMC,eAAe,GAAGtB,kBAAkB,CAACqB,IAAI,CAAC;IAEhD,IAAIC,eAAe,IAAIA,eAAe,GAAGH,kBAAkB,EAAE;MACzDA,kBAAkB,GAAGG,eAAe;IACxC;EACJ,CAAC,CAAC;EAEF,MAAMC,oBAAoB,GAAGhB,KAAK,CAACiB,MAAM,GAAG,CAAC;EAE7C,MAAMC,cAAc,GAAG5B,IAAI,CACvB,kBAAkB,EAClB0B,oBAAoB,GAAG,UAAU,GAAG,EAAE,EACtClB,SACJ,CAAC;EAED,oBACIP,KAAA,CAAA4B,aAAA,CAACxB,iBAAiB;IACdG,SAAS,EAAEoB,cAAe;IAC1BE,WAAW,EAAEnB,UAAW;IACxBC,OAAO,EAAE,OAAOA,OAAO,KAAK,UAAU,GAAGK,WAAW,GAAGc,SAAU;IACjEC,UAAU,EAAE,OAAOpB,OAAO,KAAK,UAAW;IAC1CC,aAAa,EAAE,OAAOA,aAAa,KAAK,UAAU,GAAGO,iBAAiB,GAAGW,SAAU;IACnFjB,WAAW,EAAEA,WAAY;IACzBmB,KAAK,EAAElB;EAAK,GAEXL,KAAK,CAACwB,GAAG,CAAEV,IAAI,IAAK;IACjB,MAAMC,eAAe,GAAGtB,kBAAkB,CAACqB,IAAI,CAAC;IAEhD~~,MAAMW,gBAAgB,GAClB,yDAAyD,CAACC,IAAI,CAACZ,IAAI,CAAC~~;~~IAExE,MAAMa,SAAS,GAAGF,gBAAgB,GAC5BJ,SAAS,GACRV,KAAK,EAAEgB,SAAS,IAAe,YAAY~~;~~IAElD~~,~~MAAMC~~,WAAW,~~GAAGtC~~,IAAI,~~CAACqC~~,~~SAAS,EAAEb,~~IAAI,EAAE;~~MACtC~~,aAAa,EAAEE,oBAAoB,IAAID,eAAe,KAAKM;IAC/D,CAAC,CAAC;IAEF,oBACI9B,KAAA,CAAA4B,aAAA,CAACzB,UAAU;MACPI,SAAS,~~EAAE8B~~,WAAY;MACvBC,MAAM,~~EAAEf~~,IAAI,~~CAACgB~~,QAAQ,CAAC,YAAY,CAAC,GAAG,OAAO,~~GAAG/B~~,KAAM;~~MACtDgC~~,SAAS,EAAG,~~CAAChB~~,eAAe,IAAI,CAAC,IAAIH,kBAAkB,GAAIP,IAAK;~~MAChE2B~~,UAAU,~~EAAEhB~~,oBAAqB;~~MACjCiB~~,GAAG,~~EAAEnB~~,IAAK;MACVS,KAAK,EAAElB;IAAK,CACf,CAAC;EAEV,CAAC,CACc,CAAC;AAE5B,CAAC;AAEDT,IAAI,~~CAACsC~~,WAAW,GAAG,MAAM;AAEzB,~~eAAetC~~,IAAI","ignoreList":[]}
1	+ {"version":3,"file":"Icon.js","names":["clsx","React","useTheme","getStackSizeFactor","StyledIcon","StyledIconWrapper","Icon","_ref","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","theme","maxStackSizeFactor","forEach","icon","stackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","createElement","$isDisabled","undefined","$isOnClick","$size","map","iconClasses","$color","includes","$fontSize","$isStacked","key","displayName"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { useTheme } from 'styled-components';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\n\nexport type IconProps = {\n /*\n Additional class names for the root element\n /\n className?: string;\n /\n The color of the icon\n /\n color?: string;\n /\n The FontAwesome or tobit icons to render. Multiple icons are stacked.\n /\n icons: string[];\n /\n Disables the icon so that it cannot be clicked anymore\n /\n isDisabled?: boolean;\n /\n Function to be executed when the icon was clicked\n /\n onClick?: MouseEventHandler<HTMLSpanElement>;\n /\n Function to be executed when the icon was double-clicked\n /\n onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n /\n Function to be executed when a mouse button is pressed on the icon\n /\n onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n /\n Size of the icon in pixel\n /\n size?: number;\n /\n Stops event propagation on click\n /\n shouldStopPropagation?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n className,\n color,\n icons,\n isDisabled,\n onClick,\n onDoubleClick,\n onMouseDown,\n size = 15,\n shouldStopPropagation,\n}) => {\n const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n };\n\n const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onDoubleClick === 'function') {\n onDoubleClick(event);\n }\n };\n\n const theme = useTheme();\n\n let maxStackSizeFactor = 1;\n\n icons.forEach((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n maxStackSizeFactor = stackSizeFactor;\n }\n });\n\n const shouldUseStackedIcon = icons.length > 1;\n\n const wrapperClasses = clsx(\n 'beta-chayns-icon',\n shouldUseStackedIcon ? 'fa-stack' : '',\n className,\n );\n\n return (\n <StyledIconWrapper\n className={wrapperClasses}\n $isDisabled={isDisabled}\n onClick={typeof onClick === 'function' ? handleClick : undefined}\n $isOnClick={typeof onClick === 'function'}\n onDoubleClick={typeof onDoubleClick === 'function' ? handleDoubleClick : undefined}\n onMouseDown={onMouseDown}\n $size={size}\n >\n {icons.map((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n // const isIconStyleGiven =\n // /fa[srltd]\|fa-(?:regular\|solid\|thin\|light\|duotone\|sharp)/.test(icon);\n //\n // const iconStyle = isIconStyleGiven\n // ? undefined\n // : (theme?.iconStyle as string) ?? 'fa-regular';\n\n const iconClasses = clsx(icon, {\n 'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n });\n\n return (\n <StyledIcon\n className={iconClasses}\n $color={icon.includes('fa-inverse') ? 'white' : color}\n $fontSize={((stackSizeFactor \|\| 1) / maxStackSizeFactor) size}\n $isStacked={shouldUseStackedIcon}\n key={icon}\n $size={size}\n />\n );\n })}\n </StyledIconWrapper>\n );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"AAAA,OAAOA,IAAI,MAAM,MAAM;AACvB,OAAOC,KAAK,MAAiC,OAAO;AACpD,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,kBAAkB,QAAQ,kBAAkB;AACrD,SAASC,UAAU,EAAEC,iBAAiB,QAAQ,eAAe;AAyC7D,MAAMC,IAAmB,GAAGC,IAAA,IAUtB;EAAA,IAVuB;IACzBC,SAAS;IACTC,KAAK;IACLC,KAAK;IACLC,UAAU;IACVC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,IAAI,GAAG,EAAE;IACTC;EACJ,CAAC,GAAAT,IAAA;EACG,MAAMU,WAA+C,GAAIC,KAAK,IAAK;IAC/D,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEA,IAAI,OAAOP,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACM,KAAK,CAAC;IAClB;EACJ,CAAC;EAED,MAAME,iBAAqD,GAAIF,KAAK,IAAK;IACrE,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEA,IAAI,OAAON,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACK,KAAK,CAAC;IACxB;EACJ,CAAC;EAED,MAAMG,KAAK,GAAGnB,QAAQ,CAAC,CAAC;EAExB,IAAIoB,kBAAkB,GAAG,CAAC;EAE1BZ,KAAK,CAACa,OAAO,CAAEC,IAAI,IAAK;IACpB,MAAMC,eAAe,GAAGtB,kBAAkB,CAACqB,IAAI,CAAC;IAEhD,IAAIC,eAAe,IAAIA,eAAe,GAAGH,kBAAkB,EAAE;MACzDA,kBAAkB,GAAGG,eAAe;IACxC;EACJ,CAAC,CAAC;EAEF,MAAMC,oBAAoB,GAAGhB,KAAK,CAACiB,MAAM,GAAG,CAAC;EAE7C,MAAMC,cAAc,GAAG5B,IAAI,CACvB,kBAAkB,EAClB0B,oBAAoB,GAAG,UAAU,GAAG,EAAE,EACtClB,SACJ,CAAC;EAED,oBACIP,KAAA,CAAA4B,aAAA,CAACxB,iBAAiB;IACdG,SAAS,EAAEoB,cAAe;IAC1BE,WAAW,EAAEnB,UAAW;IACxBC,OAAO,EAAE,OAAOA,OAAO,KAAK,UAAU,GAAGK,WAAW,GAAGc,SAAU;IACjEC,UAAU,EAAE,OAAOpB,OAAO,KAAK,UAAW;IAC1CC,aAAa,EAAE,OAAOA,aAAa,KAAK,UAAU,GAAGO,iBAAiB,GAAGW,SAAU;IACnFjB,WAAW,EAAEA,WAAY;IACzBmB,KAAK,EAAElB;EAAK,GAEXL,KAAK,CAACwB,GAAG,CAAEV,IAAI,IAAK;IACjB,MAAMC,eAAe,GAAGtB,kBAAkB,CAACqB,IAAI,CAAC;;IAEhD;IACA;IACA;IACA;IACA;IACA;;IAEA,MAAMW,WAAW,GAAGnC,IAAI,CAACwB,IAAI,EAAE;MAC3B,aAAa,EAAEE,oBAAoB,IAAID,eAAe,KAAKM;IAC/D,CAAC,CAAC;IAEF,oBACI9B,KAAA,CAAA4B,aAAA,CAACzB,UAAU;MACPI,SAAS,EAAE2B,WAAY;MACvBC,MAAM,EAAEZ,IAAI,CAACa,QAAQ,CAAC,YAAY,CAAC,GAAG,OAAO,GAAG5B,KAAM;MACtD6B,SAAS,EAAG,CAACb,eAAe,IAAI,CAAC,IAAIH,kBAAkB,GAAIP,IAAK;MAChEwB,UAAU,EAAEb,oBAAqB;MACjCc,GAAG,EAAEhB,IAAK;MACVS,KAAK,EAAElB;IAAK,CACf,CAAC;EAEV,CAAC,CACc,CAAC;AAE5B,CAAC;AAEDT,IAAI,CAACmC,WAAW,GAAG,MAAM;AAEzB,eAAenC,IAAI","ignoreList":[]}

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

@@ -11,7 +11,8 @@ const SliderButton = _ref => {
     selectedButtonId,
     isDisabled,
     items,
-    onChange
+    onChange,
+    shouldUseFullWidth = false
   } = _ref;
   const [selectedButton, setSelectedButton] = useState(undefined);
   const [dragRange, setDragRange] = useState({
@@ -23,10 +24,18 @@ const SliderButton = _ref => {
   const timeout = useRef();
   const preventHandleScroll = useRef(false);
   const [scope, animate] = useAnimate();
-  const itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);
+  const initialItemWidth = useMemo(() => calculateBiggestWidth(items), [items]);
   const sliderSize = useElementSize(sliderButtonRef);
   const theme = useTheme();
-  const isSliderBigger = useMemo(() => sliderSize && Math.floor(sliderSize.width / itemWidth) < items.length, [itemWidth, items.length, sliderSize]);
+  const isSliderBigger = useMemo(() => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length, [initialItemWidth, items.length, sliderSize]);
+  const itemWidth = useMemo(() => {
+    if (!isSliderBigger && shouldUseFullWidth) {
+      const sliderWidth = sliderSize?.width || 0;
+      const itemCount = items.length || 1;
+      return sliderWidth / itemCount;
+    }
+    return calculateBiggestWidth(items);
+  }, [isSliderBigger, items, shouldUseFullWidth, sliderSize?.width]);
   useEffect(() => {
     if (sliderSize) {
       const sliderWidth = itemWidth * (items.length - 1);

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","selectedButton","setSelectedButton","undefined","dragRange","setDragRange","left","right","sliderButtonRef","sliderButtonWrapperRef","timeout","preventHandleScroll","scope","animate","itemWidth","sliderSize","theme","isSliderBigger","Math","floor","width","length","sliderWidth","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\nconst SliderButton: FC<SliderButtonProps> = ({ selectedButtonId, isDisabled, items, onChange }) => {\n const [selectedButton, setSelectedButton] = useState<string \| undefined>(undefined);\n const [dragRange, setDragRange] = useState({ left: 0, right: 0 });\n\n const sliderButtonRef = useRef<HTMLDivElement>(null);\n const sliderButtonWrapperRef = useRef<HTMLDivElement>(null);\n const timeout = useRef<number>();\n const preventHandleScroll = useRef(false);\n\n const [scope, animate] = useAnimate();\n\n const itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n\n const sliderSize = useElementSize(sliderButtonRef);\n\n const theme: Theme = useTheme();\n\n const isSliderBigger = useMemo(\n () => sliderSize && Math.floor(sliderSize.width / itemWidth) < items.length,\n [itemWidth, items.length, sliderSize],\n );\n\n useEffect(() => {\n if (sliderSize) {\n const sliderWidth = itemWidth (items.length - 1);\n\n const count = Math.floor(sliderSize.width / itemWidth);\n\n setDragRange({ left: 0, right: isSliderBigger ? itemWidth * count : sliderWidth });\n }\n }, [isSliderBigger, itemWidth, items.length, sliderSize]);\n\n const animation = useCallback(\n async (x: number) => {\n await animate(\n scope.current,\n { x },\n {\n type: 'tween',\n duration: 0.2,\n },\n );\n },\n [animate, scope],\n );\n\n 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 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":["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","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 (!isSliderBigger && shouldUseFullWidth) {\n const sliderWidth = sliderSize?.width \|\| 0;\n const itemCount = items.length \|\| 1;\n\n return sliderWidth / itemCount;\n }\n\n return calculateBiggestWidth(items);\n }, [isSliderBigger, items, 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 thumbText,\n ],\n );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":"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","ignoreList":[]}

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

@@ -18,6 +18,10 @@ 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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.844",
+    "version": "5.0.0-beta.848",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -85,5 +85,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "4d96c4ab39328c93246cd73a90cf63ffbffcb20a"
+    "gitHead": "60b73c9646f075f2b9ce2a6a05ddf6c7a0649990"
 }