@chayns-components/core 5.0.0-beta.552 → 5.0.0-beta.554

package/lib/components/truncation/Truncation.js

@@ -1,5 +1,6 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { ClampPosition } from '../../types/truncation';
+import { debounce } from '../../utils/debounce';
 import { truncateElement } from '../../utils/truncation';
 import { StyledMotionTruncationContent, StyledTruncation, StyledTruncationClamp, StyledTruncationClampWrapper, StyledTruncationPseudoContent } from './Truncation.styles';
 const Truncation = _ref => {
@@ -29,6 +30,8 @@ const Truncation = _ref => {
   const originalChildrenRef = useRef(null);
   const hasCollapsed = useRef(false);
   const isAnimating = useRef(false);
+  const hasSizeRecentlyChanged = useRef(false);
+  const canResetSizeChanged = useRef(true);
   useEffect(() => {
     if (typeof isOpen === 'boolean') {
       setInternalIsOpen(isOpen);
@@ -46,9 +49,15 @@ const Truncation = _ref => {
     });
   }, [onChange]);
   const handleAnimationEnd = useCallback(() => {
-    setHasSizeChanged(false);
     hasCollapsed.current = true;
     isAnimating.current = false;
+    if (canResetSizeChanged.current) {
+      setHasSizeChanged(false);
+      canResetSizeChanged.current = false;
+    }
+    window.setTimeout(() => {
+      hasSizeRecentlyChanged.current = false;
+    }, 10);
     setShouldShowCollapsedElement(!internalIsOpen);
     window.setTimeout(() => {
       hasCollapsed.current = false;
@@ -80,14 +89,18 @@ const Truncation = _ref => {
       childrenRef.current.children[0].style.visibility = 'visible';
     }
   }, [children, internalIsOpen, shouldShowCollapsedElement]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (originalChildrenRef.current) {
       const resizeObserver = new ResizeObserver(entries => {
         if (entries && entries[0]) {
           const observedHeight = entries[0].contentRect.height;
           setOriginalHeight(observedHeight < originalBigHeight ? originalBigHeight : observedHeight);
-          if (!hasCollapsed.current && !isAnimating.current) {
+          if (!hasCollapsed.current && !isAnimating.current && !hasSizeRecentlyChanged.current) {
+            void debounce(() => {
+              canResetSizeChanged.current = true;
+            }, 250)();
             setHasSizeChanged(true);
+            hasSizeRecentlyChanged.current = true;
           }
         }
       });
@@ -98,14 +111,18 @@ const Truncation = _ref => {
     }
     return () => {};
   }, [originalBigHeight]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (pseudoChildrenRef.current) {
       const resizeObserver = new ResizeObserver(entries => {
         if (entries && entries[0]) {
           const observedHeight = entries[0].contentRect.height;
           setNewCollapsedHeight(observedHeight < originalSmallHeight ? originalSmallHeight : observedHeight);
-          if (!hasCollapsed.current && !isAnimating.current) {
+          if (!hasCollapsed.current && !isAnimating.current && !hasSizeRecentlyChanged.current) {
+            void debounce(() => {
+              canResetSizeChanged.current = true;
+            }, 250)();
             setHasSizeChanged(true);
+            hasSizeRecentlyChanged.current = true;
           }
         }
       });

package/lib/components/truncation/Truncation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Truncation.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","ClampPosition","truncateElement","StyledMotionTruncationContent","StyledTruncation","StyledTruncationClamp","StyledTruncationClampWrapper","StyledTruncationPseudoContent","Truncation","_ref","collapsedHeight","clampPosition","Right","isOpen","moreLabel","lessLabel","onChange","children","internalIsOpen","setInternalIsOpen","showClamp","setShowClamp","newCollapsedHeight","setNewCollapsedHeight","originalHeight","setOriginalHeight","shouldShowCollapsedElement","setShouldShowCollapsedElement","hasSizeChanged","setHasSizeChanged","initialRender","setInitialRender","originalSmallHeight","setOriginalSmallHeight","originalBigHeight","setOriginalBigHeight","pseudoChildrenRef","childrenRef","originalChildrenRef","hasCollapsed","isAnimating","handleClampClick","event","current","handleAnimationEnd","window","setTimeout","offsetHeight","firstChild","removeChild","appendChild","style","visibility","resizeObserver","ResizeObserver","entries","observedHeight","contentRect","height","observe","disconnect","createElement","className","ref","animate","initial","transition","type","duration","onAnimationComplete","onAnimationStart","$position","onClick"],"sources":["../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import React, {\n    FC,\n    MouseEvent,\n    MouseEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { ClampPosition } from '../../types/truncation';\nimport { truncateElement } from '../../utils/truncation';\nimport {\n    StyledMotionTruncationContent,\n    StyledTruncation,\n    StyledTruncationClamp,\n    StyledTruncationClampWrapper,\n    StyledTruncationPseudoContent,\n} from './Truncation.styles';\n\nexport type TruncationProps = {\n    /**\n     * The elements that should be expanding or collapsing.\n     */\n    children: ReactElement;\n    /**\n     * The position of the clamp.\n     */\n    clampPosition?: ClampPosition;\n    /**\n     * The height of the children Element in it`s collapsed state.\n     */\n    collapsedHeight?: number;\n    /**\n     * If set to true, the content is exposed.\n     */\n    isOpen?: boolean;\n    /**\n     * A text that should be displayed if the content is expanded.\n     */\n    lessLabel?: string;\n    /**\n     * A text that should be displayed if the content is collapsed.\n     */\n    moreLabel?: string;\n    /**\n     * Function to be executed when the component is expanding or collapsing.\n     */\n    onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n};\n\nconst Truncation: FC<TruncationProps> = ({\n    collapsedHeight = 150,\n    clampPosition = ClampPosition.Right,\n    isOpen,\n    moreLabel = 'Mehr',\n    lessLabel = 'Weniger',\n    onChange,\n    children,\n}) => {\n    const [internalIsOpen, setInternalIsOpen] = useState(false);\n    const [showClamp, setShowClamp] = useState(true);\n    const [newCollapsedHeight, setNewCollapsedHeight] = useState(collapsedHeight);\n    const [originalHeight, setOriginalHeight] = useState(0);\n    const [shouldShowCollapsedElement, setShouldShowCollapsedElement] = useState(true);\n    const [hasSizeChanged, setHasSizeChanged] = useState(false);\n    const [initialRender, setInitialRender] = useState(true);\n\n    const [originalSmallHeight, setOriginalSmallHeight] = useState(0);\n    const [originalBigHeight, setOriginalBigHeight] = useState(0);\n\n    useEffect(() => {\n        setInitialRender(false);\n    }, []);\n\n    const pseudoChildrenRef = useRef<HTMLDivElement>(null);\n    const childrenRef = useRef<HTMLDivElement>(null);\n    const originalChildrenRef = useRef<HTMLDivElement>(null);\n    const hasCollapsed = useRef(false);\n    const isAnimating = useRef(false);\n\n    useEffect(() => {\n        if (typeof isOpen === 'boolean') {\n            setInternalIsOpen(isOpen);\n            setShowClamp(!isOpen);\n        }\n    }, [isOpen]);\n\n    // Changes the state of the truncation\n    const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n        (event) => {\n            setInternalIsOpen((current) => {\n                if (typeof onChange === 'function') {\n                    onChange(event, !current);\n                }\n\n                return !current;\n            });\n        },\n        [onChange],\n    );\n\n    const handleAnimationEnd = useCallback(() => {\n        setHasSizeChanged(false);\n        hasCollapsed.current = true;\n        isAnimating.current = false;\n        setShouldShowCollapsedElement(!internalIsOpen);\n\n        window.setTimeout(() => {\n            hasCollapsed.current = false;\n        }, 30);\n    }, [internalIsOpen]);\n\n    useEffect(() => {\n        if (!pseudoChildrenRef.current) {\n            return;\n        }\n\n        setOriginalHeight(pseudoChildrenRef.current.offsetHeight);\n        setOriginalBigHeight(pseudoChildrenRef.current.offsetHeight);\n\n        truncateElement(pseudoChildrenRef.current, collapsedHeight);\n\n        setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);\n        setOriginalSmallHeight(pseudoChildrenRef.current.offsetHeight);\n    }, [collapsedHeight, pseudoChildrenRef]);\n\n    // Checks if the clamp should be shown\n    useEffect(() => {\n        if (pseudoChildrenRef.current && !hasSizeChanged && !initialRender) {\n            setShowClamp(originalHeight > newCollapsedHeight);\n        }\n    }, [collapsedHeight, hasSizeChanged, initialRender, newCollapsedHeight, originalHeight]);\n\n    useEffect(() => {\n        if (childrenRef.current && pseudoChildrenRef.current && originalChildrenRef.current) {\n            while (childrenRef.current.firstChild) {\n                childrenRef.current.removeChild(childrenRef.current.firstChild);\n            }\n\n            childrenRef.current.appendChild(\n                shouldShowCollapsedElement && !internalIsOpen\n                    ? pseudoChildrenRef.current\n                    : originalChildrenRef.current,\n            );\n\n            (childrenRef.current.children[0] as HTMLDivElement).style.visibility = 'visible';\n        }\n    }, [children, internalIsOpen, shouldShowCollapsedElement]);\n\n    useEffect(() => {\n        if (originalChildrenRef.current) {\n            const resizeObserver = new ResizeObserver((entries) => {\n                if (entries && entries[0]) {\n                    const observedHeight = entries[0].contentRect.height;\n\n                    setOriginalHeight(\n                        observedHeight < originalBigHeight ? originalBigHeight : observedHeight,\n                    );\n\n                    if (!hasCollapsed.current && !isAnimating.current) {\n                        setHasSizeChanged(true);\n                    }\n                }\n            });\n\n            resizeObserver.observe(originalChildrenRef.current);\n\n            return () => {\n                resizeObserver.disconnect();\n            };\n        }\n\n        return () => {};\n    }, [originalBigHeight]);\n\n    useEffect(() => {\n        if (pseudoChildrenRef.current) {\n            const resizeObserver = new ResizeObserver((entries) => {\n                if (entries && entries[0]) {\n                    const observedHeight = entries[0].contentRect.height;\n\n                    setNewCollapsedHeight(\n                        observedHeight < originalSmallHeight ? originalSmallHeight : observedHeight,\n                    );\n\n                    if (!hasCollapsed.current && !isAnimating.current) {\n                        setHasSizeChanged(true);\n                    }\n                }\n            });\n\n            resizeObserver.observe(pseudoChildrenRef.current);\n\n            return () => {\n                resizeObserver.disconnect();\n            };\n        }\n\n        return () => {};\n    }, [originalSmallHeight]);\n\n    return useMemo(\n        () => (\n            <StyledTruncation className=\"beta-chayns-truncation\">\n                <StyledTruncationPseudoContent ref={pseudoChildrenRef}>\n                    {children}\n                </StyledTruncationPseudoContent>\n                <StyledTruncationPseudoContent ref={originalChildrenRef}>\n                    {children}\n                </StyledTruncationPseudoContent>\n                <StyledMotionTruncationContent\n                    animate={{ height: internalIsOpen ? originalHeight : newCollapsedHeight }}\n                    initial={false}\n                    transition={{ type: 'tween', duration: hasSizeChanged ? 0 : 0.2 }}\n                    onAnimationComplete={handleAnimationEnd}\n                    onAnimationStart={() => {\n                        isAnimating.current = true;\n                    }}\n                    ref={childrenRef}\n                />\n                {showClamp && (\n                    <StyledTruncationClampWrapper $position={clampPosition}>\n                        <StyledTruncationClamp onClick={handleClampClick}>\n                            {internalIsOpen ? lessLabel : moreLabel}\n                        </StyledTruncationClamp>\n                    </StyledTruncationClampWrapper>\n                )}\n            </StyledTruncation>\n        ),\n        [\n            children,\n            clampPosition,\n            handleAnimationEnd,\n            handleClampClick,\n            hasSizeChanged,\n            internalIsOpen,\n            lessLabel,\n            moreLabel,\n            newCollapsedHeight,\n            originalHeight,\n            showClamp,\n        ],\n    );\n};\n\nexport default Truncation;\n"],"mappings":"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"}
+{"version":3,"file":"Truncation.js","names":["React","useCallback","useEffect","useLayoutEffect","useMemo","useRef","useState","ClampPosition","debounce","truncateElement","StyledMotionTruncationContent","StyledTruncation","StyledTruncationClamp","StyledTruncationClampWrapper","StyledTruncationPseudoContent","Truncation","_ref","collapsedHeight","clampPosition","Right","isOpen","moreLabel","lessLabel","onChange","children","internalIsOpen","setInternalIsOpen","showClamp","setShowClamp","newCollapsedHeight","setNewCollapsedHeight","originalHeight","setOriginalHeight","shouldShowCollapsedElement","setShouldShowCollapsedElement","hasSizeChanged","setHasSizeChanged","initialRender","setInitialRender","originalSmallHeight","setOriginalSmallHeight","originalBigHeight","setOriginalBigHeight","pseudoChildrenRef","childrenRef","originalChildrenRef","hasCollapsed","isAnimating","hasSizeRecentlyChanged","canResetSizeChanged","handleClampClick","event","current","handleAnimationEnd","window","setTimeout","offsetHeight","firstChild","removeChild","appendChild","style","visibility","resizeObserver","ResizeObserver","entries","observedHeight","contentRect","height","observe","disconnect","createElement","className","ref","animate","initial","transition","type","duration","onAnimationComplete","onAnimationStart","$position","onClick"],"sources":["../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import React, {\n    FC,\n    MouseEvent,\n    MouseEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { ClampPosition } from '../../types/truncation';\nimport { debounce } from '../../utils/debounce';\nimport { truncateElement } from '../../utils/truncation';\nimport {\n    StyledMotionTruncationContent,\n    StyledTruncation,\n    StyledTruncationClamp,\n    StyledTruncationClampWrapper,\n    StyledTruncationPseudoContent,\n} from './Truncation.styles';\n\nexport type TruncationProps = {\n    /**\n     * The elements that should be expanding or collapsing.\n     */\n    children: ReactElement;\n    /**\n     * The position of the clamp.\n     */\n    clampPosition?: ClampPosition;\n    /**\n     * The height of the children Element in it`s collapsed state.\n     */\n    collapsedHeight?: number;\n    /**\n     * If set to true, the content is exposed.\n     */\n    isOpen?: boolean;\n    /**\n     * A text that should be displayed if the content is expanded.\n     */\n    lessLabel?: string;\n    /**\n     * A text that should be displayed if the content is collapsed.\n     */\n    moreLabel?: string;\n    /**\n     * Function to be executed when the component is expanding or collapsing.\n     */\n    onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n};\n\nconst Truncation: FC<TruncationProps> = ({\n    collapsedHeight = 150,\n    clampPosition = ClampPosition.Right,\n    isOpen,\n    moreLabel = 'Mehr',\n    lessLabel = 'Weniger',\n    onChange,\n    children,\n}) => {\n    const [internalIsOpen, setInternalIsOpen] = useState(false);\n    const [showClamp, setShowClamp] = useState(true);\n    const [newCollapsedHeight, setNewCollapsedHeight] = useState(collapsedHeight);\n    const [originalHeight, setOriginalHeight] = useState(0);\n    const [shouldShowCollapsedElement, setShouldShowCollapsedElement] = useState(true);\n    const [hasSizeChanged, setHasSizeChanged] = useState(false);\n    const [initialRender, setInitialRender] = useState(true);\n\n    const [originalSmallHeight, setOriginalSmallHeight] = useState(0);\n    const [originalBigHeight, setOriginalBigHeight] = useState(0);\n\n    useEffect(() => {\n        setInitialRender(false);\n    }, []);\n\n    const pseudoChildrenRef = useRef<HTMLDivElement>(null);\n    const childrenRef = useRef<HTMLDivElement>(null);\n    const originalChildrenRef = useRef<HTMLDivElement>(null);\n    const hasCollapsed = useRef(false);\n    const isAnimating = useRef(false);\n    const hasSizeRecentlyChanged = useRef(false);\n    const canResetSizeChanged = useRef(true);\n\n    useEffect(() => {\n        if (typeof isOpen === 'boolean') {\n            setInternalIsOpen(isOpen);\n            setShowClamp(!isOpen);\n        }\n    }, [isOpen]);\n\n    // Changes the state of the truncation\n    const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n        (event) => {\n            setInternalIsOpen((current) => {\n                if (typeof onChange === 'function') {\n                    onChange(event, !current);\n                }\n\n                return !current;\n            });\n        },\n        [onChange],\n    );\n\n    const handleAnimationEnd = useCallback(() => {\n        hasCollapsed.current = true;\n        isAnimating.current = false;\n\n        if (canResetSizeChanged.current) {\n            setHasSizeChanged(false);\n            canResetSizeChanged.current = false;\n        }\n\n        window.setTimeout(() => {\n            hasSizeRecentlyChanged.current = false;\n        }, 10);\n\n        setShouldShowCollapsedElement(!internalIsOpen);\n\n        window.setTimeout(() => {\n            hasCollapsed.current = false;\n        }, 30);\n    }, [internalIsOpen]);\n\n    useEffect(() => {\n        if (!pseudoChildrenRef.current) {\n            return;\n        }\n\n        setOriginalHeight(pseudoChildrenRef.current.offsetHeight);\n        setOriginalBigHeight(pseudoChildrenRef.current.offsetHeight);\n\n        truncateElement(pseudoChildrenRef.current, collapsedHeight);\n\n        setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);\n        setOriginalSmallHeight(pseudoChildrenRef.current.offsetHeight);\n    }, [collapsedHeight, pseudoChildrenRef]);\n\n    // Checks if the clamp should be shown\n    useEffect(() => {\n        if (pseudoChildrenRef.current && !hasSizeChanged && !initialRender) {\n            setShowClamp(originalHeight > newCollapsedHeight);\n        }\n    }, [collapsedHeight, hasSizeChanged, initialRender, newCollapsedHeight, originalHeight]);\n\n    useEffect(() => {\n        if (childrenRef.current && pseudoChildrenRef.current && originalChildrenRef.current) {\n            while (childrenRef.current.firstChild) {\n                childrenRef.current.removeChild(childrenRef.current.firstChild);\n            }\n\n            childrenRef.current.appendChild(\n                shouldShowCollapsedElement && !internalIsOpen\n                    ? pseudoChildrenRef.current\n                    : originalChildrenRef.current,\n            );\n\n            (childrenRef.current.children[0] as HTMLDivElement).style.visibility = 'visible';\n        }\n    }, [children, internalIsOpen, shouldShowCollapsedElement]);\n\n    useLayoutEffect(() => {\n        if (originalChildrenRef.current) {\n            const resizeObserver = new ResizeObserver((entries) => {\n                if (entries && entries[0]) {\n                    const observedHeight = entries[0].contentRect.height;\n\n                    setOriginalHeight(\n                        observedHeight < originalBigHeight ? originalBigHeight : observedHeight,\n                    );\n\n                    if (\n                        !hasCollapsed.current &&\n                        !isAnimating.current &&\n                        !hasSizeRecentlyChanged.current\n                    ) {\n                        void debounce(() => {\n                            canResetSizeChanged.current = true;\n                        }, 250)();\n\n                        setHasSizeChanged(true);\n                        hasSizeRecentlyChanged.current = true;\n                    }\n                }\n            });\n\n            resizeObserver.observe(originalChildrenRef.current);\n\n            return () => {\n                resizeObserver.disconnect();\n            };\n        }\n\n        return () => {};\n    }, [originalBigHeight]);\n\n    useLayoutEffect(() => {\n        if (pseudoChildrenRef.current) {\n            const resizeObserver = new ResizeObserver((entries) => {\n                if (entries && entries[0]) {\n                    const observedHeight = entries[0].contentRect.height;\n\n                    setNewCollapsedHeight(\n                        observedHeight < originalSmallHeight ? originalSmallHeight : observedHeight,\n                    );\n\n                    if (\n                        !hasCollapsed.current &&\n                        !isAnimating.current &&\n                        !hasSizeRecentlyChanged.current\n                    ) {\n                        void debounce(() => {\n                            canResetSizeChanged.current = true;\n                        }, 250)();\n\n                        setHasSizeChanged(true);\n                        hasSizeRecentlyChanged.current = true;\n                    }\n                }\n            });\n\n            resizeObserver.observe(pseudoChildrenRef.current);\n\n            return () => {\n                resizeObserver.disconnect();\n            };\n        }\n\n        return () => {};\n    }, [originalSmallHeight]);\n\n    return useMemo(\n        () => (\n            <StyledTruncation className=\"beta-chayns-truncation\">\n                <StyledTruncationPseudoContent ref={pseudoChildrenRef}>\n                    {children}\n                </StyledTruncationPseudoContent>\n                <StyledTruncationPseudoContent ref={originalChildrenRef}>\n                    {children}\n                </StyledTruncationPseudoContent>\n                <StyledMotionTruncationContent\n                    animate={{ height: internalIsOpen ? originalHeight : newCollapsedHeight }}\n                    initial={false}\n                    transition={{ type: 'tween', duration: hasSizeChanged ? 0 : 0.2 }}\n                    onAnimationComplete={handleAnimationEnd}\n                    onAnimationStart={() => {\n                        isAnimating.current = true;\n                    }}\n                    ref={childrenRef}\n                />\n                {showClamp && (\n                    <StyledTruncationClampWrapper $position={clampPosition}>\n                        <StyledTruncationClamp onClick={handleClampClick}>\n                            {internalIsOpen ? lessLabel : moreLabel}\n                        </StyledTruncationClamp>\n                    </StyledTruncationClampWrapper>\n                )}\n            </StyledTruncation>\n        ),\n        [\n            children,\n            clampPosition,\n            handleAnimationEnd,\n            handleClampClick,\n            hasSizeChanged,\n            internalIsOpen,\n            lessLabel,\n            moreLabel,\n            newCollapsedHeight,\n            originalHeight,\n            showClamp,\n        ],\n    );\n};\n\nexport default Truncation;\n"],"mappings":"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"}

package/lib/components/truncation/Truncation.styles.js

@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components';
 import { ClampPosition } from '../../types/truncation';
 export const StyledTruncation = styled.div`
     position: relative;
+    overflow: hidden;
 `;
 
 // Fix framer-motion bug

package/lib/components/truncation/Truncation.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Truncation.styles.js","names":["motion","styled","css","ClampPosition","StyledTruncation","div","StyledMotionTruncationContent","StyledTruncationPseudoContent","StyledTruncationClampWrapper","_ref","$position","Left","Middle","StyledTruncationClamp","a"],"sources":["../../../src/components/truncation/Truncation.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { ClampPosition } from '../../types/truncation';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledTruncation = styled.div`\n    position: relative;\n`;\n\n// Fix framer-motion bug\nexport const StyledMotionTruncationContent = styled(motion.div)<FramerMotionBugFix>`\n    overflow: hidden;\n`;\n\nexport const StyledTruncationPseudoContent = styled.div`\n    visibility: hidden;\n    position: absolute;\n    width: fit-content;\n`;\n\ntype StyledTruncationClampWrapperProps = WithTheme<{ $position: ClampPosition }>;\n\nexport const StyledTruncationClampWrapper = styled.div<StyledTruncationClampWrapperProps>`\n    display: flex;\n\n    ${({ $position }) => {\n        switch ($position) {\n            case ClampPosition.Left:\n                return css`\n                    justify-content: left;\n                `;\n            case ClampPosition.Middle:\n                return css`\n                    justify-content: center;\n                `;\n            default:\n                return css`\n                    justify-content: right;\n                `;\n        }\n    }}\n`;\n\nexport const StyledTruncationClamp = styled.a`\n    cursor: pointer;\n    z-index: 2;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,aAAa,QAAQ,wBAAwB;AAGtD,OAAO,MAAMC,gBAAgB,GAAGH,MAAM,CAACI,GAAI;AAC3C;AACA,CAAC;;AAED;AACA,OAAO,MAAMC,6BAA6B,GAAGL,MAAM,CAACD,MAAM,CAACK,GAAG,CAAsB;AACpF;AACA,CAAC;AAED,OAAO,MAAME,6BAA6B,GAAGN,MAAM,CAACI,GAAI;AACxD;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMG,4BAA4B,GAAGP,MAAM,CAACI,GAAuC;AAC1F;AACA;AACA,MAAMI,IAAA,IAAmB;EAAA,IAAlB;IAAEC;EAAU,CAAC,GAAAD,IAAA;EACZ,QAAQC,SAAS;IACb,KAAKP,aAAa,CAACQ,IAAI;MACnB,OAAOT,GAAI;AAC3B;AACA,iBAAiB;IACL,KAAKC,aAAa,CAACS,MAAM;MACrB,OAAOV,GAAI;AAC3B;AACA,iBAAiB;IACL;MACI,OAAOA,GAAI;AAC3B;AACA,iBAAiB;EACT;AACJ,CAAE;AACN,CAAC;AAED,OAAO,MAAMW,qBAAqB,GAAGZ,MAAM,CAACa,CAAE;AAC9C;AACA;AACA,CAAC"}
+{"version":3,"file":"Truncation.styles.js","names":["motion","styled","css","ClampPosition","StyledTruncation","div","StyledMotionTruncationContent","StyledTruncationPseudoContent","StyledTruncationClampWrapper","_ref","$position","Left","Middle","StyledTruncationClamp","a"],"sources":["../../../src/components/truncation/Truncation.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { ClampPosition } from '../../types/truncation';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledTruncation = styled.div`\n    position: relative;\n    overflow: hidden;\n`;\n\n// Fix framer-motion bug\nexport const StyledMotionTruncationContent = styled(motion.div)<FramerMotionBugFix>`\n    overflow: hidden;\n`;\n\nexport const StyledTruncationPseudoContent = styled.div`\n    visibility: hidden;\n    position: absolute;\n    width: fit-content;\n`;\n\ntype StyledTruncationClampWrapperProps = WithTheme<{ $position: ClampPosition }>;\n\nexport const StyledTruncationClampWrapper = styled.div<StyledTruncationClampWrapperProps>`\n    display: flex;\n\n    ${({ $position }) => {\n        switch ($position) {\n            case ClampPosition.Left:\n                return css`\n                    justify-content: left;\n                `;\n            case ClampPosition.Middle:\n                return css`\n                    justify-content: center;\n                `;\n            default:\n                return css`\n                    justify-content: right;\n                `;\n        }\n    }}\n`;\n\nexport const StyledTruncationClamp = styled.a`\n    cursor: pointer;\n    z-index: 2;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,aAAa,QAAQ,wBAAwB;AAGtD,OAAO,MAAMC,gBAAgB,GAAGH,MAAM,CAACI,GAAI;AAC3C;AACA;AACA,CAAC;;AAED;AACA,OAAO,MAAMC,6BAA6B,GAAGL,MAAM,CAACD,MAAM,CAACK,GAAG,CAAsB;AACpF;AACA,CAAC;AAED,OAAO,MAAME,6BAA6B,GAAGN,MAAM,CAACI,GAAI;AACxD;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMG,4BAA4B,GAAGP,MAAM,CAACI,GAAuC;AAC1F;AACA;AACA,MAAMI,IAAA,IAAmB;EAAA,IAAlB;IAAEC;EAAU,CAAC,GAAAD,IAAA;EACZ,QAAQC,SAAS;IACb,KAAKP,aAAa,CAACQ,IAAI;MACnB,OAAOT,GAAI;AAC3B;AACA,iBAAiB;IACL,KAAKC,aAAa,CAACS,MAAM;MACrB,OAAOV,GAAI;AAC3B;AACA,iBAAiB;IACL;MACI,OAAOA,GAAI;AAC3B;AACA,iBAAiB;EACT;AACJ,CAAE;AACN,CAAC;AAED,OAAO,MAAMW,qBAAqB,GAAGZ,MAAM,CAACa,CAAE;AAC9C;AACA;AACA,CAAC"}

package/lib/utils/debounce.d.ts

@@ -0,0 +1 @@
+export declare const debounce: <F extends (...args: any[]) => any>(func: F, waitFor: number) => (...args: Parameters<F>) => Promise<ReturnType<F>>;

package/lib/utils/debounce.js

@@ -0,0 +1,17 @@
+export const debounce = (func, waitFor) => {
+  let timeout;
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return new Promise(resolve => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      timeout = setTimeout(() => resolve(func(...args)), waitFor);
+    });
+  };
+};
+//# sourceMappingURL=debounce.js.map

package/lib/utils/debounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"debounce.js","names":["debounce","func","waitFor","timeout","_len","arguments","length","args","Array","_key","Promise","resolve","clearTimeout","setTimeout"],"sources":["../../src/utils/debounce.ts"],"sourcesContent":["export const debounce = <F extends (...args: any[]) => any>(func: F, waitFor: number) => {\n    let timeout: string | number | NodeJS.Timeout | undefined;\n\n    return (...args: Parameters<F>): Promise<ReturnType<F>> =>\n        new Promise((resolve) => {\n            if (timeout) {\n                clearTimeout(timeout);\n            }\n\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n            timeout = setTimeout(() => resolve(func(...args)), waitFor);\n        });\n};\n"],"mappings":"AAAA,OAAO,MAAMA,QAAQ,GAAGA,CAAoCC,IAAO,EAAEC,OAAe,KAAK;EACrF,IAAIC,OAAqD;EAEzD,OAAO;IAAA,SAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAIC,IAAI,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAJF,IAAI,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;IAAA;IAAA,OACX,IAAIC,OAAO,CAAEC,OAAO,IAAK;MACrB,IAAIR,OAAO,EAAE;QACTS,YAAY,CAACT,OAAO,CAAC;MACzB;;MAEA;MACAA,OAAO,GAAGU,UAAU,CAAC,MAAMF,OAAO,CAACV,IAAI,CAAC,GAAGM,IAAI,CAAC,CAAC,EAAEL,OAAO,CAAC;IAC/D,CAAC,CAAC;EAAA;AACV,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.552",
+    "version": "5.0.0-beta.554",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -73,5 +73,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "5cb607bc45fb77381099c941231284c00218b462"
+    "gitHead": "c4b48186ce2303f0ed5e2eb63bd07483bfbc914a"
 }