@chayns-components/core 5.0.0-beta.851 → 5.0.0-beta.852

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

@@ -36,10 +36,11 @@ const SliderButton = ({
   const theme = (0, _styledComponents.useTheme)();
   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) {
+    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 / itemCount;
+      return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);
     }
     return initialItemWidth;
   }, [initialItemWidth, isSliderBigger, items.length, shouldUseFullWidth, sliderSize === null || sliderSize === void 0 ? void 0 : sliderSize.width]);

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

@@ -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","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 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":[]}
+{"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":[]}

package/lib/cjs/components/text-area/TextArea.js

@@ -11,7 +11,7 @@ var _Input = require("../input/Input.styles");
 var _TextArea = require("./TextArea.styles");
 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 TextArea = ({
+const TextArea = /*#__PURE__*/(0, _react.forwardRef)(({
   isDisabled,
   isInvalid,
   placeholder,
@@ -21,7 +21,7 @@ const TextArea = ({
   onBlur,
   maxHeight = '120px',
   minHeight = '41px'
-}) => {
+}, ref) => {
   var _rightElement$props;
   const [isOverflowing, setIsOverflowing] = (0, _react.useState)(false);
   const areaProvider = (0, _react.useContext)(_AreaContextProvider.AreaContext);
@@ -40,6 +40,7 @@ const TextArea = ({
       setIsOverflowing(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));
     }
   }, [maxHeight]);
+  (0, _react.useImperativeHandle)(ref, () => textareaRef.current);
 
   /**
    * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the "textareaRef".
@@ -70,7 +71,7 @@ const TextArea = ({
   }), !value && /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabelWrapper, null, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabel, {
     $isInvalid: isInvalid
   }, placeholder))), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, null, rightElement)), [browser === null || browser === void 0 ? void 0 : browser.name, isDisabled, isInvalid, isOverflowing, maxHeight, minHeight, onBlur, onChange, placeholder, rightElement, shouldChangeColor, shouldShowBorder, value]);
-};
+});
 TextArea.displayName = 'TextArea';
 var _default = exports.default = TextArea;
 //# sourceMappingURL=TextArea.js.map

package/lib/cjs/components/text-area/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_AreaContextProvider","_Input","_TextArea","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TextArea","isDisabled","isInvalid","placeholder","value","onChange","rightElement","onBlur","maxHeight","minHeight","_rightElement$props","isOverflowing","setIsOverflowing","useState","areaProvider","useContext","AreaContext","textareaRef","useRef","browser","getDevice","shouldShowBorder","props","style","backgroundColor","undefined","shouldChangeColor","useMemo","adjustTextareaHeight","useCallback","current","height","scrollHeight","parseInt","toString","useEffect","length","createElement","StyledTextArea","$isDisabled","StyledTextAreaContentWrapper","$isInvalid","$shouldChangeColor","StyledTextAreaContent","StyledTextAreaInput","$browser","name","disabled","ref","$maxHeight","$minHeight","$isOverflowing","rows","StyledTextAreaLabelWrapper","StyledTextAreaLabel","StyledInputRightElement","displayName","_default","exports"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    FocusEventHandler,\n    ReactElement,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n    StyledTextArea,\n    StyledTextAreaContent,\n    StyledTextAreaContentWrapper,\n    StyledTextAreaInput,\n    StyledTextAreaLabel,\n    StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\n\nexport type TextAreaProps = {\n    /**\n     * Disables the text area so that it cannot be changed.\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the text area is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * The maximum height of the text area.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * The minimum height of the text area.\n     */\n    minHeight?: CSSProperties['minHeight'];\n    /**\n     * Function that is executed when the text area loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the text of the text area changes.\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Placeholder for the text area field.\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Value if the text area should be controlled.\n     */\n    value?: string;\n};\n\nconst TextArea: FC<TextAreaProps> = ({\n    isDisabled,\n    isInvalid,\n    placeholder,\n    value,\n    onChange,\n    rightElement,\n    onBlur,\n    maxHeight = '120px',\n    minHeight = '41px',\n}) => {\n    const [isOverflowing, setIsOverflowing] = useState(false);\n\n    const areaProvider = useContext(AreaContext);\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n    const { browser } = getDevice();\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    const adjustTextareaHeight = useCallback(() => {\n        if (textareaRef.current) {\n            textareaRef.current.style.height = 'auto';\n            textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n            setIsOverflowing(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));\n        }\n    }, [maxHeight]);\n\n    /**\n     * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n     * To maintain the functionality while clearing the input, the length need to be greater than -1.\n     */\n    useEffect(() => {\n        if (typeof value === 'string' && value.length > -1) {\n            adjustTextareaHeight();\n        }\n    }, [adjustTextareaHeight, value]);\n\n    return useMemo(\n        () => (\n            <StyledTextArea $isDisabled={isDisabled}>\n                <StyledTextAreaContentWrapper\n                    $isInvalid={isInvalid}\n                    $shouldChangeColor={shouldChangeColor}\n                >\n                    <StyledTextAreaContent>\n                        <StyledTextAreaInput\n                            $browser={browser?.name}\n                            disabled={isDisabled}\n                            $isInvalid={isInvalid}\n                            ref={textareaRef}\n                            value={value}\n                            onBlur={onBlur}\n                            onChange={onChange}\n                            $maxHeight={maxHeight}\n                            $minHeight={minHeight}\n                            $isOverflowing={isOverflowing}\n                            rows={1}\n                        />\n                        {!value && (\n                            <StyledTextAreaLabelWrapper>\n                                <StyledTextAreaLabel $isInvalid={isInvalid}>\n                                    {placeholder}\n                                </StyledTextAreaLabel>\n                            </StyledTextAreaLabelWrapper>\n                        )}\n                    </StyledTextAreaContent>\n                    {rightElement && shouldShowBorder && rightElement}\n                </StyledTextAreaContentWrapper>\n                {rightElement && !shouldShowBorder && (\n                    <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                )}\n            </StyledTextArea>\n        ),\n        [\n            browser?.name,\n            isDisabled,\n            isInvalid,\n            isOverflowing,\n            maxHeight,\n            minHeight,\n            onBlur,\n            onChange,\n            placeholder,\n            rightElement,\n            shouldChangeColor,\n            shouldShowBorder,\n            value,\n        ],\n    );\n};\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TextArea.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_AreaContextProvider","_Input","_TextArea","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TextArea","forwardRef","isDisabled","isInvalid","placeholder","value","onChange","rightElement","onBlur","maxHeight","minHeight","ref","_rightElement$props","isOverflowing","setIsOverflowing","useState","areaProvider","useContext","AreaContext","textareaRef","useRef","browser","getDevice","shouldShowBorder","props","style","backgroundColor","undefined","shouldChangeColor","useMemo","adjustTextareaHeight","useCallback","current","height","scrollHeight","parseInt","toString","useImperativeHandle","useEffect","length","createElement","StyledTextArea","$isDisabled","StyledTextAreaContentWrapper","$isInvalid","$shouldChangeColor","StyledTextAreaContent","StyledTextAreaInput","$browser","name","disabled","$maxHeight","$minHeight","$isOverflowing","rows","StyledTextAreaLabelWrapper","StyledTextAreaLabel","StyledInputRightElement","displayName","_default","exports"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    ReactElement,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n    StyledTextArea,\n    StyledTextAreaContent,\n    StyledTextAreaContentWrapper,\n    StyledTextAreaInput,\n    StyledTextAreaLabel,\n    StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\n\nexport type TextAreaProps = {\n    /**\n     * Disables the text area so that it cannot be changed.\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the text area is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * The maximum height of the text area.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * The minimum height of the text area.\n     */\n    minHeight?: CSSProperties['minHeight'];\n    /**\n     * Function that is executed when the text area loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the text of the text area changes.\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Placeholder for the text area field.\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Value if the text area should be controlled.\n     */\n    value?: string;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n    (\n        {\n            isDisabled,\n            isInvalid,\n            placeholder,\n            value,\n            onChange,\n            rightElement,\n            onBlur,\n            maxHeight = '120px',\n            minHeight = '41px',\n        },\n        ref,\n    ) => {\n        const [isOverflowing, setIsOverflowing] = useState(false);\n\n        const areaProvider = useContext(AreaContext);\n\n        const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n        const { browser } = getDevice();\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const adjustTextareaHeight = useCallback(() => {\n            if (textareaRef.current) {\n                textareaRef.current.style.height = 'auto';\n                textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n                setIsOverflowing(\n                    textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n                );\n            }\n        }, [maxHeight]);\n\n        useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n        /**\n         * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n         * To maintain the functionality while clearing the input, the length need to be greater than -1.\n         */\n        useEffect(() => {\n            if (typeof value === 'string' && value.length > -1) {\n                adjustTextareaHeight();\n            }\n        }, [adjustTextareaHeight, value]);\n\n        return useMemo(\n            () => (\n                <StyledTextArea $isDisabled={isDisabled}>\n                    <StyledTextAreaContentWrapper\n                        $isInvalid={isInvalid}\n                        $shouldChangeColor={shouldChangeColor}\n                    >\n                        <StyledTextAreaContent>\n                            <StyledTextAreaInput\n                                $browser={browser?.name}\n                                disabled={isDisabled}\n                                $isInvalid={isInvalid}\n                                ref={textareaRef}\n                                value={value}\n                                onBlur={onBlur}\n                                onChange={onChange}\n                                $maxHeight={maxHeight}\n                                $minHeight={minHeight}\n                                $isOverflowing={isOverflowing}\n                                rows={1}\n                            />\n                            {!value && (\n                                <StyledTextAreaLabelWrapper>\n                                    <StyledTextAreaLabel $isInvalid={isInvalid}>\n                                        {placeholder}\n                                    </StyledTextAreaLabel>\n                                </StyledTextAreaLabelWrapper>\n                            )}\n                        </StyledTextAreaContent>\n                        {rightElement && shouldShowBorder && rightElement}\n                    </StyledTextAreaContentWrapper>\n                    {rightElement && !shouldShowBorder && (\n                        <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                    )}\n                </StyledTextArea>\n            ),\n            [\n                browser?.name,\n                isDisabled,\n                isInvalid,\n                isOverflowing,\n                maxHeight,\n                minHeight,\n                onBlur,\n                onChange,\n                placeholder,\n                rightElement,\n                shouldChangeColor,\n                shouldShowBorder,\n                value,\n            ],\n        );\n    },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}

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

@@ -29,10 +29,11 @@ const SliderButton = _ref => {
   const theme = useTheme();
   const isSliderBigger = useMemo(() => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length, [initialItemWidth, items.length, sliderSize]);
   const itemWidth = useMemo(() => {
-    if (!isSliderBigger && shouldUseFullWidth) {
+    if (shouldUseFullWidth) {
       const sliderWidth = sliderSize?.width || 0;
+      const maxShownItemsCount = Math.floor(sliderWidth / initialItemWidth);
       const itemCount = items.length || 1;
-      return sliderWidth / itemCount;
+      return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);
     }
     return initialItemWidth;
   }, [initialItemWidth, isSliderBigger, items.length, shouldUseFullWidth, sliderSize?.width]);

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

@@ -1 +1 @@
-{"version":3,"file":"SliderButton.js","names":["setRefreshScrollEnabled","AnimatePresence","useAnimate","React","useCallback","useEffect","useMemo","useRef","useState","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 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":[]}
+{"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":"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","ignoreList":[]}

package/lib/esm/components/text-area/TextArea.js

@@ -1,9 +1,9 @@
 import { getDevice } from 'chayns-api';
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { AreaContext } from '../area-provider/AreaContextProvider';
 import { StyledInputRightElement } from '../input/Input.styles';
 import { StyledTextArea, StyledTextAreaContent, StyledTextAreaContentWrapper, StyledTextAreaInput, StyledTextAreaLabel, StyledTextAreaLabelWrapper } from './TextArea.styles';
-const TextArea = _ref => {
+const TextArea = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     isDisabled,
     isInvalid,
@@ -32,6 +32,7 @@ const TextArea = _ref => {
       setIsOverflowing(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));
     }
   }, [maxHeight]);
+  useImperativeHandle(ref, () => textareaRef.current);
 
   /**
    * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the "textareaRef".
@@ -62,7 +63,7 @@ const TextArea = _ref => {
   }), !value && /*#__PURE__*/React.createElement(StyledTextAreaLabelWrapper, null, /*#__PURE__*/React.createElement(StyledTextAreaLabel, {
     $isInvalid: isInvalid
   }, placeholder))), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement)), [browser?.name, isDisabled, isInvalid, isOverflowing, maxHeight, minHeight, onBlur, onChange, placeholder, rightElement, shouldChangeColor, shouldShowBorder, value]);
-};
+});
 TextArea.displayName = 'TextArea';
 export default TextArea;
 //# sourceMappingURL=TextArea.js.map

package/lib/esm/components/text-area/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","names":["getDevice","React","useCallback","useContext","useEffect","useMemo","useRef","useState","AreaContext","StyledInputRightElement","StyledTextArea","StyledTextAreaContent","StyledTextAreaContentWrapper","StyledTextAreaInput","StyledTextAreaLabel","StyledTextAreaLabelWrapper","TextArea","_ref","isDisabled","isInvalid","placeholder","value","onChange","rightElement","onBlur","maxHeight","minHeight","isOverflowing","setIsOverflowing","areaProvider","textareaRef","browser","shouldShowBorder","props","style","backgroundColor","undefined","shouldChangeColor","adjustTextareaHeight","current","height","scrollHeight","parseInt","toString","length","createElement","$isDisabled","$isInvalid","$shouldChangeColor","$browser","name","disabled","ref","$maxHeight","$minHeight","$isOverflowing","rows","displayName"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    FocusEventHandler,\n    ReactElement,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n    StyledTextArea,\n    StyledTextAreaContent,\n    StyledTextAreaContentWrapper,\n    StyledTextAreaInput,\n    StyledTextAreaLabel,\n    StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\n\nexport type TextAreaProps = {\n    /**\n     * Disables the text area so that it cannot be changed.\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the text area is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * The maximum height of the text area.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * The minimum height of the text area.\n     */\n    minHeight?: CSSProperties['minHeight'];\n    /**\n     * Function that is executed when the text area loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the text of the text area changes.\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Placeholder for the text area field.\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Value if the text area should be controlled.\n     */\n    value?: string;\n};\n\nconst TextArea: FC<TextAreaProps> = ({\n    isDisabled,\n    isInvalid,\n    placeholder,\n    value,\n    onChange,\n    rightElement,\n    onBlur,\n    maxHeight = '120px',\n    minHeight = '41px',\n}) => {\n    const [isOverflowing, setIsOverflowing] = useState(false);\n\n    const areaProvider = useContext(AreaContext);\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n    const { browser } = getDevice();\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    const adjustTextareaHeight = useCallback(() => {\n        if (textareaRef.current) {\n            textareaRef.current.style.height = 'auto';\n            textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n            setIsOverflowing(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));\n        }\n    }, [maxHeight]);\n\n    /**\n     * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n     * To maintain the functionality while clearing the input, the length need to be greater than -1.\n     */\n    useEffect(() => {\n        if (typeof value === 'string' && value.length > -1) {\n            adjustTextareaHeight();\n        }\n    }, [adjustTextareaHeight, value]);\n\n    return useMemo(\n        () => (\n            <StyledTextArea $isDisabled={isDisabled}>\n                <StyledTextAreaContentWrapper\n                    $isInvalid={isInvalid}\n                    $shouldChangeColor={shouldChangeColor}\n                >\n                    <StyledTextAreaContent>\n                        <StyledTextAreaInput\n                            $browser={browser?.name}\n                            disabled={isDisabled}\n                            $isInvalid={isInvalid}\n                            ref={textareaRef}\n                            value={value}\n                            onBlur={onBlur}\n                            onChange={onChange}\n                            $maxHeight={maxHeight}\n                            $minHeight={minHeight}\n                            $isOverflowing={isOverflowing}\n                            rows={1}\n                        />\n                        {!value && (\n                            <StyledTextAreaLabelWrapper>\n                                <StyledTextAreaLabel $isInvalid={isInvalid}>\n                                    {placeholder}\n                                </StyledTextAreaLabel>\n                            </StyledTextAreaLabelWrapper>\n                        )}\n                    </StyledTextAreaContent>\n                    {rightElement && shouldShowBorder && rightElement}\n                </StyledTextAreaContentWrapper>\n                {rightElement && !shouldShowBorder && (\n                    <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                )}\n            </StyledTextArea>\n        ),\n        [\n            browser?.name,\n            isDisabled,\n            isInvalid,\n            isOverflowing,\n            maxHeight,\n            minHeight,\n            onBlur,\n            onChange,\n            placeholder,\n            rightElement,\n            shouldChangeColor,\n            shouldShowBorder,\n            value,\n        ],\n    );\n};\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TextArea.js","names":["getDevice","React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","AreaContext","StyledInputRightElement","StyledTextArea","StyledTextAreaContent","StyledTextAreaContentWrapper","StyledTextAreaInput","StyledTextAreaLabel","StyledTextAreaLabelWrapper","TextArea","_ref","ref","isDisabled","isInvalid","placeholder","value","onChange","rightElement","onBlur","maxHeight","minHeight","isOverflowing","setIsOverflowing","areaProvider","textareaRef","browser","shouldShowBorder","props","style","backgroundColor","undefined","shouldChangeColor","adjustTextareaHeight","current","height","scrollHeight","parseInt","toString","length","createElement","$isDisabled","$isInvalid","$shouldChangeColor","$browser","name","disabled","$maxHeight","$minHeight","$isOverflowing","rows","displayName"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    ReactElement,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n    StyledTextArea,\n    StyledTextAreaContent,\n    StyledTextAreaContentWrapper,\n    StyledTextAreaInput,\n    StyledTextAreaLabel,\n    StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\n\nexport type TextAreaProps = {\n    /**\n     * Disables the text area so that it cannot be changed.\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the text area is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * The maximum height of the text area.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * The minimum height of the text area.\n     */\n    minHeight?: CSSProperties['minHeight'];\n    /**\n     * Function that is executed when the text area loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the text of the text area changes.\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Placeholder for the text area field.\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Value if the text area should be controlled.\n     */\n    value?: string;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n    (\n        {\n            isDisabled,\n            isInvalid,\n            placeholder,\n            value,\n            onChange,\n            rightElement,\n            onBlur,\n            maxHeight = '120px',\n            minHeight = '41px',\n        },\n        ref,\n    ) => {\n        const [isOverflowing, setIsOverflowing] = useState(false);\n\n        const areaProvider = useContext(AreaContext);\n\n        const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n        const { browser } = getDevice();\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const adjustTextareaHeight = useCallback(() => {\n            if (textareaRef.current) {\n                textareaRef.current.style.height = 'auto';\n                textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n                setIsOverflowing(\n                    textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n                );\n            }\n        }, [maxHeight]);\n\n        useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n        /**\n         * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n         * To maintain the functionality while clearing the input, the length need to be greater than -1.\n         */\n        useEffect(() => {\n            if (typeof value === 'string' && value.length > -1) {\n                adjustTextareaHeight();\n            }\n        }, [adjustTextareaHeight, value]);\n\n        return useMemo(\n            () => (\n                <StyledTextArea $isDisabled={isDisabled}>\n                    <StyledTextAreaContentWrapper\n                        $isInvalid={isInvalid}\n                        $shouldChangeColor={shouldChangeColor}\n                    >\n                        <StyledTextAreaContent>\n                            <StyledTextAreaInput\n                                $browser={browser?.name}\n                                disabled={isDisabled}\n                                $isInvalid={isInvalid}\n                                ref={textareaRef}\n                                value={value}\n                                onBlur={onBlur}\n                                onChange={onChange}\n                                $maxHeight={maxHeight}\n                                $minHeight={minHeight}\n                                $isOverflowing={isOverflowing}\n                                rows={1}\n                            />\n                            {!value && (\n                                <StyledTextAreaLabelWrapper>\n                                    <StyledTextAreaLabel $isInvalid={isInvalid}>\n                                        {placeholder}\n                                    </StyledTextAreaLabel>\n                                </StyledTextAreaLabelWrapper>\n                            )}\n                        </StyledTextAreaContent>\n                        {rightElement && shouldShowBorder && rightElement}\n                    </StyledTextAreaContentWrapper>\n                    {rightElement && !shouldShowBorder && (\n                        <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                    )}\n                </StyledTextArea>\n            ),\n            [\n                browser?.name,\n                isDisabled,\n                isInvalid,\n                isOverflowing,\n                maxHeight,\n                minHeight,\n                onBlur,\n                onChange,\n                placeholder,\n                rightElement,\n                shouldChangeColor,\n                shouldShowBorder,\n                value,\n            ],\n        );\n    },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}

package/lib/types/components/text-area/TextArea.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEventHandler, CSSProperties, FC, FocusEventHandler, ReactElement } from 'react';
+import React, { ChangeEventHandler, CSSProperties, FocusEventHandler, ReactElement } from 'react';
 export type TextAreaProps = {
     /**
      * Disables the text area so that it cannot be changed.
@@ -37,5 +37,5 @@ export type TextAreaProps = {
      */
     value?: string;
 };
-declare const TextArea: FC<TextAreaProps>;
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default TextArea;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.851",
+    "version": "5.0.0-beta.852",
     "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": "6ab184f1878ccbe5711517cdbe851b06849d3326"
+    "gitHead": "64b62b37c9f3e380fbd61560a35ec1c82caf42d6"
 }