@chayns-components/typewriter 5.0.0-beta.837 → 5.0.0-beta.840

package/lib/cjs/components/typewriter/Typewriter.js

@@ -50,7 +50,6 @@ const Typewriter = ({
   textStyle
 }) => {
   const [currentChildrenIndex, setCurrentChildrenIndex] = (0, _react.useState)(0);
-  const [shouldCount, setShouldCount] = (0, _react.useState)(true);
   const [hasRenderedChildrenOnce, setHasRenderedChildrenOnce] = (0, _react.useState)(false);
   const functions = (0, _chaynsApi.useFunctions)();
   const values = (0, _chaynsApi.useValues)();
@@ -101,13 +100,6 @@ const Typewriter = ({
   const [isResetAnimationActive, setIsResetAnimationActive] = (0, _react.useState)(false);
   const [shownCharCount, setShownCharCount] = (0, _react.useState)(charactersCount > 0 ? 0 : textContent.length);
   const [shouldStopAnimation, setShouldStopAnimation] = (0, _react.useState)(false);
-  const [prevChildren, setPrevChildren] = (0, _react.useState)(children);
-  (0, _react.useEffect)(() => {
-    if (children !== prevChildren) {
-      setShouldCount(true);
-      setPrevChildren(children);
-    }
-  }, [children, prevChildren]);
   const isAnimatingText = shownCharCount < textContent.length || shouldForceCursorAnimation || areMultipleChildrenGiven || textContent.length === 0;
   const handleClick = (0, _react.useCallback)(() => {
     setShouldStopAnimation(true);
@@ -143,32 +135,25 @@ const Typewriter = ({
       setTimeout(() => {
         interval = window.setInterval(() => {
           setShownCharCount(prevState => {
-            let nextState = prevState;
-            if (shouldCount) {
-              nextState = prevState + 1;
-            }
-            if (nextState >= charactersCount) {
-              if (shouldWaitForContent) {
-                setShouldCount(false);
-              } else {
-                window.clearInterval(interval);
+            let nextState = Math.min(prevState + 1, charactersCount);
+            if (nextState >= charactersCount && !shouldWaitForContent) {
+              window.clearInterval(interval);
 
-                /**
-                 * At this point, the next value for "shownCharCount" is deliberately set to
-                 * the length of the textContent in order to correctly display HTML elements
-                 * after the last letter.
-                 */
-                nextState = textContent.length;
-                if (areMultipleChildrenGiven) {
-                  setTimeout(() => {
-                    if (shouldUseResetAnimation) {
-                      setIsResetAnimationActive(true);
-                    } else {
-                      setShownCharCount(0);
-                      setTimeout(handleSetNextChildrenIndex, nextTextDelay);
-                    }
-                  }, resetDelay);
-                }
+              /**
+               * At this point, the next value for "shownCharCount" is deliberately set to
+               * the length of the textContent in order to correctly display HTML elements
+               * after the last letter.
+               */
+              nextState = textContent.length;
+              if (areMultipleChildrenGiven) {
+                setTimeout(() => {
+                  if (shouldUseResetAnimation) {
+                    setIsResetAnimationActive(true);
+                  } else {
+                    setShownCharCount(0);
+                    setTimeout(handleSetNextChildrenIndex, nextTextDelay);
+                  }
+                }, resetDelay);
               }
             }
             return nextState;
@@ -179,7 +164,7 @@ const Typewriter = ({
     return () => {
       window.clearInterval(interval);
     };
-  }, [speed, resetDelay, shouldCount, childrenCount, charactersCount, textContent.length, shouldStopAnimation, shouldWaitForContent, isResetAnimationActive, shouldUseResetAnimation, areMultipleChildrenGiven, handleSetNextChildrenIndex, nextTextDelay, startDelay]);
+  }, [speed, resetDelay, childrenCount, charactersCount, textContent.length, shouldStopAnimation, shouldWaitForContent, isResetAnimationActive, shouldUseResetAnimation, areMultipleChildrenGiven, handleSetNextChildrenIndex, nextTextDelay, startDelay]);
   (0, _react.useEffect)(() => {
     if (!isAnimatingText && typeof onFinish === 'function') {
       onFinish();

package/lib/cjs/components/typewriter/Typewriter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typewriter.js","names":["_core","require","_chaynsApi","_react","_interopRequireWildcard","_reactDom","_server","_Typewriter","_utils","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","TypewriterDelay","exports","TypewriterSpeed","Typewriter","children","nextTextDelay","Medium","onFinish","pseudoChildren","resetDelay","shouldForceCursorAnimation","shouldHideCursor","shouldSortChildrenRandomly","shouldUseAnimationHeight","shouldUseResetAnimation","shouldWaitForContent","speed","startDelay","None","textStyle","currentChildrenIndex","setCurrentChildrenIndex","useState","shouldCount","setShouldCount","hasRenderedChildrenOnce","setHasRenderedChildrenOnce","functions","useFunctions","values","useValues","sortedChildren","useMemo","Array","isArray","shuffleArray","areMultipleChildrenGiven","childrenCount","length","textContent","currentChildren","React","isValidElement","renderToString","createElement","ChaynsProvider","data","isModule","ColorSchemeProvider","color","colorMode","style","display","charactersCount","getCharactersCount","isResetAnimationActive","setIsResetAnimationActive","shownCharCount","setShownCharCount","shouldStopAnimation","setShouldStopAnimation","prevChildren","setPrevChildren","isAnimatingText","handleClick","useCallback","handleSetNextChildrenIndex","newIndex","interval","setInterval","prevState","nextState","clearInterval","setTimeout","shownText","getSubTextFromHTML","pseudoTextHTML","pseudoText","StyledTypewriter","onClick","StyledTypewriterText","dangerouslySetInnerHTML","__html","$isAnimatingText","$shouldHideCursor","StyledTypewriterPseudoText","createPortal","position","visibility","document","body","displayName","_default"],"sources":["../../../../src/components/typewriter/Typewriter.tsx"],"sourcesContent":["import { ColorSchemeProvider } from '@chayns-components/core';\nimport { ChaynsProvider, useFunctions, useValues } from 'chayns-api';\nimport React, {\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useMemo,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { renderToString } from 'react-dom/server';\nimport {\n    StyledTypewriter,\n    StyledTypewriterPseudoText,\n    StyledTypewriterText,\n} from './Typewriter.styles';\nimport { getCharactersCount, getSubTextFromHTML, shuffleArray } from './utils';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\n// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterDelay {\n    ExtraSlow = 4000,\n    Slow = 2000,\n    Medium = 1000,\n    Fast = 500,\n    ExtraFast = 250,\n    None = 0,\n}\n\n// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterSpeed {\n    ExtraSlow = 40,\n    Slow = 20,\n    Medium = 10,\n    Fast = 5,\n    ExtraFast = 2.5,\n}\n\nexport type TypewriterProps = {\n    /**\n     * The text to type\n     */\n    children: ReactElement | ReactElement[] | string | string[];\n    /**\n     * The delay in milliseconds before the next text is shown.\n     * This prop is only used if multiple texts are given.\n     */\n    nextTextDelay?: TypewriterDelay;\n    /**\n     * Function that is executed when the typewriter animation has finished. This function will not\n     * be executed if multiple texts are used.\n     */\n    onFinish?: VoidFunction;\n    /**\n     * Pseudo-element to be rendered invisible during animation to define the size of the element\n     * for the typewriter effect. By default, the \"children\" is used for this purpose.\n     */\n    pseudoChildren?: ReactElement | string;\n    /**\n     * Waiting time in milliseconds before the typewriter resets the text.\n     * This prop is only used if multiple texts are given.\n     */\n    resetDelay?: TypewriterDelay;\n    /**\n     * Specifies whether the cursor should be forced to animate even if no text is currently animated.\n     */\n    shouldForceCursorAnimation?: boolean;\n    /**\n     * Specifies whether the cursor should be hidden\n     */\n    shouldHideCursor?: boolean;\n    /**\n     * Specifies whether the children should be sorted randomly if there are multiple texts.\n     * This makes the typewriter start with a different text each time and also changes them\n     * in a random order.\n     */\n    shouldSortChildrenRandomly?: boolean;\n    /**\n     * Specifies whether the animation should use its full height or the height of the current\n     * chunk.\n     */\n    shouldUseAnimationHeight?: boolean;\n    /**\n     * Specifies whether the reset of the text should be animated with a backspace animation for\n     * multiple texts.\n     */\n    shouldUseResetAnimation?: boolean;\n    /**\n     * Whether the typewriter should wait for new content\n     */\n    shouldWaitForContent?: boolean;\n    /**\n     * The speed of the animation. Use the TypewriterSpeed enum for this prop.\n     */\n    speed?: TypewriterSpeed | number;\n    /**\n     * The delay in milliseconds before the typewriter starts typing.\n     */\n    startDelay?: TypewriterDelay;\n    /**\n     * The style of the typewriter text element\n     */\n    textStyle?: React.CSSProperties;\n};\n\nconst Typewriter: FC<TypewriterProps> = ({\n    children,\n    nextTextDelay = TypewriterDelay.Medium,\n    onFinish,\n    pseudoChildren,\n    resetDelay = TypewriterDelay.Medium,\n    shouldForceCursorAnimation = false,\n    shouldHideCursor = false,\n    shouldSortChildrenRandomly = false,\n    shouldUseAnimationHeight = false,\n    shouldUseResetAnimation = false,\n    shouldWaitForContent,\n    speed = TypewriterSpeed.Medium,\n    startDelay = TypewriterDelay.None,\n    textStyle,\n}) => {\n    const [currentChildrenIndex, setCurrentChildrenIndex] = useState(0);\n    const [shouldCount, setShouldCount] = useState(true);\n    const [hasRenderedChildrenOnce, setHasRenderedChildrenOnce] = useState(false);\n\n    const functions = useFunctions();\n    const values = useValues();\n\n    useIsomorphicLayoutEffect(() => {\n        if (children) {\n            setHasRenderedChildrenOnce(false);\n        }\n    }, [children]);\n\n    useEffect(() => {\n        if (!hasRenderedChildrenOnce) {\n            setHasRenderedChildrenOnce(true);\n        }\n    }, [hasRenderedChildrenOnce]);\n\n    const sortedChildren = useMemo(\n        () =>\n            Array.isArray(children) && shouldSortChildrenRandomly\n                ? shuffleArray<ReactElement | string>(children)\n                : children,\n        [children, shouldSortChildrenRandomly],\n    );\n\n    const areMultipleChildrenGiven = Array.isArray(sortedChildren);\n    const childrenCount = areMultipleChildrenGiven ? sortedChildren.length : 1;\n\n    const textContent = useMemo(() => {\n        if (areMultipleChildrenGiven) {\n            const currentChildren = sortedChildren[currentChildrenIndex];\n\n            if (currentChildren) {\n                return React.isValidElement(currentChildren)\n                    ? renderToString(\n                          <ChaynsProvider data={values} functions={functions} isModule>\n                              <ColorSchemeProvider\n                                  color=\"#005EB8\"\n                                  colorMode={0}\n                                  style={{ display: 'inline' }}\n                              >\n                                  {currentChildren}\n                              </ColorSchemeProvider>\n                          </ChaynsProvider>,\n                      )\n                    : (currentChildren as string);\n            }\n\n            return '';\n        }\n\n        return React.isValidElement(sortedChildren)\n            ? renderToString(\n                  <ChaynsProvider data={values} functions={functions} isModule>\n                      <ColorSchemeProvider\n                          color=\"#005EB8\"\n                          colorMode={0}\n                          style={{ display: 'inline' }}\n                      >\n                          {sortedChildren}\n                      </ColorSchemeProvider>\n                  </ChaynsProvider>,\n              )\n            : (sortedChildren as string);\n    }, [areMultipleChildrenGiven, currentChildrenIndex, functions, sortedChildren, values]);\n\n    const charactersCount = useMemo(() => getCharactersCount(textContent), [textContent]);\n\n    const [isResetAnimationActive, setIsResetAnimationActive] = useState(false);\n    const [shownCharCount, setShownCharCount] = useState(\n        charactersCount > 0 ? 0 : textContent.length,\n    );\n    const [shouldStopAnimation, setShouldStopAnimation] = useState(false);\n    const [prevChildren, setPrevChildren] = useState<TypewriterProps['children']>(children);\n\n    useEffect(() => {\n        if (children !== prevChildren) {\n            setShouldCount(true);\n            setPrevChildren(children);\n        }\n    }, [children, prevChildren]);\n\n    const isAnimatingText =\n        shownCharCount < textContent.length ||\n        shouldForceCursorAnimation ||\n        areMultipleChildrenGiven ||\n        textContent.length === 0;\n\n    const handleClick = useCallback(() => {\n        setShouldStopAnimation(true);\n    }, []);\n\n    const handleSetNextChildrenIndex = useCallback(\n        () =>\n            setCurrentChildrenIndex(() => {\n                let newIndex = currentChildrenIndex + 1;\n\n                if (newIndex > childrenCount - 1) {\n                    newIndex = 0;\n                }\n\n                return newIndex;\n            }),\n        [childrenCount, currentChildrenIndex],\n    );\n\n    useEffect(() => {\n        let interval: number | undefined;\n\n        if (shouldStopAnimation || charactersCount === 0) {\n            setShownCharCount(textContent.length);\n        } else if (isResetAnimationActive) {\n            interval = window.setInterval(() => {\n                setShownCharCount((prevState) => {\n                    const nextState = prevState - 1;\n\n                    if (nextState === 0) {\n                        window.clearInterval(interval);\n\n                        if (areMultipleChildrenGiven) {\n                            setTimeout(() => {\n                                setIsResetAnimationActive(false);\n                                handleSetNextChildrenIndex();\n                            }, nextTextDelay);\n                        }\n                    }\n\n                    return nextState;\n                });\n            }, speed);\n        } else {\n            setTimeout(() => {\n                interval = window.setInterval(() => {\n                    setShownCharCount((prevState) => {\n                        let nextState = prevState;\n\n                        if (shouldCount) {\n                            nextState = prevState + 1;\n                        }\n\n                        if (nextState >= charactersCount) {\n                            if (shouldWaitForContent) {\n                                setShouldCount(false);\n                            } else {\n                                window.clearInterval(interval);\n\n                                /**\n                                 * At this point, the next value for \"shownCharCount\" is deliberately set to\n                                 * the length of the textContent in order to correctly display HTML elements\n                                 * after the last letter.\n                                 */\n                                nextState = textContent.length;\n\n                                if (areMultipleChildrenGiven) {\n                                    setTimeout(() => {\n                                        if (shouldUseResetAnimation) {\n                                            setIsResetAnimationActive(true);\n                                        } else {\n                                            setShownCharCount(0);\n                                            setTimeout(handleSetNextChildrenIndex, nextTextDelay);\n                                        }\n                                    }, resetDelay);\n                                }\n                            }\n                        }\n\n                        return nextState;\n                    });\n                }, speed);\n            }, startDelay);\n        }\n\n        return () => {\n            window.clearInterval(interval);\n        };\n    }, [\n        speed,\n        resetDelay,\n        shouldCount,\n        childrenCount,\n        charactersCount,\n        textContent.length,\n        shouldStopAnimation,\n        shouldWaitForContent,\n        isResetAnimationActive,\n        shouldUseResetAnimation,\n        areMultipleChildrenGiven,\n        handleSetNextChildrenIndex,\n        nextTextDelay,\n        startDelay,\n    ]);\n\n    useEffect(() => {\n        if (!isAnimatingText && typeof onFinish === 'function') {\n            onFinish();\n        }\n    }, [isAnimatingText, onFinish]);\n\n    const shownText = useMemo(\n        () => getSubTextFromHTML(textContent, shownCharCount),\n        [shownCharCount, textContent],\n    );\n\n    const pseudoTextHTML = useMemo(() => {\n        if (pseudoChildren) {\n            const pseudoText = React.isValidElement(pseudoChildren)\n                ? renderToString(\n                      <ChaynsProvider data={values} functions={functions} isModule>\n                          <ColorSchemeProvider\n                              color=\"#005EB8\"\n                              colorMode={0}\n                              style={{ display: 'inline' }}\n                          >\n                              {pseudoChildren}\n                          </ColorSchemeProvider>\n                      </ChaynsProvider>,\n                  )\n                : (pseudoChildren as string);\n\n            if (shouldUseAnimationHeight) {\n                return getSubTextFromHTML(pseudoText, shownCharCount);\n            }\n\n            return pseudoText;\n        }\n\n        if (shouldUseAnimationHeight && textContent) {\n            return getSubTextFromHTML(textContent, shownCharCount);\n        }\n\n        return textContent || '&#8203;';\n    }, [functions, pseudoChildren, shouldUseAnimationHeight, shownCharCount, textContent, values]);\n\n    return useMemo(\n        () => (\n            <StyledTypewriter onClick={handleClick}>\n                {isAnimatingText ? (\n                    <StyledTypewriterText\n                        dangerouslySetInnerHTML={{ __html: shownText }}\n                        $isAnimatingText\n                        $shouldHideCursor={shouldHideCursor}\n                        style={textStyle}\n                    />\n                ) : (\n                    <StyledTypewriterText style={textStyle}>{sortedChildren}</StyledTypewriterText>\n                )}\n                {isAnimatingText && (\n                    <StyledTypewriterPseudoText\n                        dangerouslySetInnerHTML={{ __html: pseudoTextHTML }}\n                        $isAnimatingText\n                        $shouldHideCursor={shouldHideCursor}\n                    />\n                )}\n                {/*\n                    The following is needed because some components like the CodeHighlighter will not render correct\n                    if the element is not rendered on client before...\n                */}\n                {!hasRenderedChildrenOnce &&\n                    createPortal(\n                        <div style={{ position: 'absolute', visibility: 'hidden' }}>\n                            {children}\n                        </div>,\n                        document.body,\n                    )}\n            </StyledTypewriter>\n        ),\n        [\n            children,\n            handleClick,\n            hasRenderedChildrenOnce,\n            isAnimatingText,\n            pseudoTextHTML,\n            shouldHideCursor,\n            shownText,\n            sortedChildren,\n            textStyle,\n        ],\n    );\n};\n\nTypewriter.displayName = 'Typewriter';\n\nexport default Typewriter;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Typewriter.js","names":["_core","require","_chaynsApi","_react","_interopRequireWildcard","_reactDom","_server","_Typewriter","_utils","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","TypewriterDelay","exports","TypewriterSpeed","Typewriter","children","nextTextDelay","Medium","onFinish","pseudoChildren","resetDelay","shouldForceCursorAnimation","shouldHideCursor","shouldSortChildrenRandomly","shouldUseAnimationHeight","shouldUseResetAnimation","shouldWaitForContent","speed","startDelay","None","textStyle","currentChildrenIndex","setCurrentChildrenIndex","useState","hasRenderedChildrenOnce","setHasRenderedChildrenOnce","functions","useFunctions","values","useValues","sortedChildren","useMemo","Array","isArray","shuffleArray","areMultipleChildrenGiven","childrenCount","length","textContent","currentChildren","React","isValidElement","renderToString","createElement","ChaynsProvider","data","isModule","ColorSchemeProvider","color","colorMode","style","display","charactersCount","getCharactersCount","isResetAnimationActive","setIsResetAnimationActive","shownCharCount","setShownCharCount","shouldStopAnimation","setShouldStopAnimation","isAnimatingText","handleClick","useCallback","handleSetNextChildrenIndex","newIndex","interval","setInterval","prevState","nextState","clearInterval","setTimeout","Math","min","shownText","getSubTextFromHTML","pseudoTextHTML","pseudoText","StyledTypewriter","onClick","StyledTypewriterText","dangerouslySetInnerHTML","__html","$isAnimatingText","$shouldHideCursor","StyledTypewriterPseudoText","createPortal","position","visibility","document","body","displayName","_default"],"sources":["../../../../src/components/typewriter/Typewriter.tsx"],"sourcesContent":["import { ColorSchemeProvider } from '@chayns-components/core';\nimport { ChaynsProvider, useFunctions, useValues } from 'chayns-api';\nimport React, {\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useMemo,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { renderToString } from 'react-dom/server';\nimport {\n    StyledTypewriter,\n    StyledTypewriterPseudoText,\n    StyledTypewriterText,\n} from './Typewriter.styles';\nimport { getCharactersCount, getSubTextFromHTML, shuffleArray } from './utils';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\n// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterDelay {\n    ExtraSlow = 4000,\n    Slow = 2000,\n    Medium = 1000,\n    Fast = 500,\n    ExtraFast = 250,\n    None = 0,\n}\n\n// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterSpeed {\n    ExtraSlow = 40,\n    Slow = 20,\n    Medium = 10,\n    Fast = 5,\n    ExtraFast = 2.5,\n}\n\nexport type TypewriterProps = {\n    /**\n     * The text to type\n     */\n    children: ReactElement | ReactElement[] | string | string[];\n    /**\n     * The delay in milliseconds before the next text is shown.\n     * This prop is only used if multiple texts are given.\n     */\n    nextTextDelay?: TypewriterDelay;\n    /**\n     * Function that is executed when the typewriter animation has finished. This function will not\n     * be executed if multiple texts are used.\n     */\n    onFinish?: VoidFunction;\n    /**\n     * Pseudo-element to be rendered invisible during animation to define the size of the element\n     * for the typewriter effect. By default, the \"children\" is used for this purpose.\n     */\n    pseudoChildren?: ReactElement | string;\n    /**\n     * Waiting time in milliseconds before the typewriter resets the text.\n     * This prop is only used if multiple texts are given.\n     */\n    resetDelay?: TypewriterDelay;\n    /**\n     * Specifies whether the cursor should be forced to animate even if no text is currently animated.\n     */\n    shouldForceCursorAnimation?: boolean;\n    /**\n     * Specifies whether the cursor should be hidden\n     */\n    shouldHideCursor?: boolean;\n    /**\n     * Specifies whether the children should be sorted randomly if there are multiple texts.\n     * This makes the typewriter start with a different text each time and also changes them\n     * in a random order.\n     */\n    shouldSortChildrenRandomly?: boolean;\n    /**\n     * Specifies whether the animation should use its full height or the height of the current\n     * chunk.\n     */\n    shouldUseAnimationHeight?: boolean;\n    /**\n     * Specifies whether the reset of the text should be animated with a backspace animation for\n     * multiple texts.\n     */\n    shouldUseResetAnimation?: boolean;\n    /**\n     * Whether the typewriter should wait for new content\n     */\n    shouldWaitForContent?: boolean;\n    /**\n     * The speed of the animation. Use the TypewriterSpeed enum for this prop.\n     */\n    speed?: TypewriterSpeed | number;\n    /**\n     * The delay in milliseconds before the typewriter starts typing.\n     */\n    startDelay?: TypewriterDelay;\n    /**\n     * The style of the typewriter text element\n     */\n    textStyle?: React.CSSProperties;\n};\n\nconst Typewriter: FC<TypewriterProps> = ({\n    children,\n    nextTextDelay = TypewriterDelay.Medium,\n    onFinish,\n    pseudoChildren,\n    resetDelay = TypewriterDelay.Medium,\n    shouldForceCursorAnimation = false,\n    shouldHideCursor = false,\n    shouldSortChildrenRandomly = false,\n    shouldUseAnimationHeight = false,\n    shouldUseResetAnimation = false,\n    shouldWaitForContent,\n    speed = TypewriterSpeed.Medium,\n    startDelay = TypewriterDelay.None,\n    textStyle,\n}) => {\n    const [currentChildrenIndex, setCurrentChildrenIndex] = useState(0);\n    const [hasRenderedChildrenOnce, setHasRenderedChildrenOnce] = useState(false);\n\n    const functions = useFunctions();\n    const values = useValues();\n\n    useIsomorphicLayoutEffect(() => {\n        if (children) {\n            setHasRenderedChildrenOnce(false);\n        }\n    }, [children]);\n\n    useEffect(() => {\n        if (!hasRenderedChildrenOnce) {\n            setHasRenderedChildrenOnce(true);\n        }\n    }, [hasRenderedChildrenOnce]);\n\n    const sortedChildren = useMemo(\n        () =>\n            Array.isArray(children) && shouldSortChildrenRandomly\n                ? shuffleArray<ReactElement | string>(children)\n                : children,\n        [children, shouldSortChildrenRandomly],\n    );\n\n    const areMultipleChildrenGiven = Array.isArray(sortedChildren);\n    const childrenCount = areMultipleChildrenGiven ? sortedChildren.length : 1;\n\n    const textContent = useMemo(() => {\n        if (areMultipleChildrenGiven) {\n            const currentChildren = sortedChildren[currentChildrenIndex];\n\n            if (currentChildren) {\n                return React.isValidElement(currentChildren)\n                    ? renderToString(\n                          <ChaynsProvider data={values} functions={functions} isModule>\n                              <ColorSchemeProvider\n                                  color=\"#005EB8\"\n                                  colorMode={0}\n                                  style={{ display: 'inline' }}\n                              >\n                                  {currentChildren}\n                              </ColorSchemeProvider>\n                          </ChaynsProvider>,\n                      )\n                    : (currentChildren as string);\n            }\n\n            return '';\n        }\n\n        return React.isValidElement(sortedChildren)\n            ? renderToString(\n                  <ChaynsProvider data={values} functions={functions} isModule>\n                      <ColorSchemeProvider\n                          color=\"#005EB8\"\n                          colorMode={0}\n                          style={{ display: 'inline' }}\n                      >\n                          {sortedChildren}\n                      </ColorSchemeProvider>\n                  </ChaynsProvider>,\n              )\n            : (sortedChildren as string);\n    }, [areMultipleChildrenGiven, currentChildrenIndex, functions, sortedChildren, values]);\n\n    const charactersCount = useMemo(() => getCharactersCount(textContent), [textContent]);\n\n    const [isResetAnimationActive, setIsResetAnimationActive] = useState(false);\n    const [shownCharCount, setShownCharCount] = useState(\n        charactersCount > 0 ? 0 : textContent.length,\n    );\n    const [shouldStopAnimation, setShouldStopAnimation] = useState(false);\n\n    const isAnimatingText =\n        shownCharCount < textContent.length ||\n        shouldForceCursorAnimation ||\n        areMultipleChildrenGiven ||\n        textContent.length === 0;\n\n    const handleClick = useCallback(() => {\n        setShouldStopAnimation(true);\n    }, []);\n\n    const handleSetNextChildrenIndex = useCallback(\n        () =>\n            setCurrentChildrenIndex(() => {\n                let newIndex = currentChildrenIndex + 1;\n\n                if (newIndex > childrenCount - 1) {\n                    newIndex = 0;\n                }\n\n                return newIndex;\n            }),\n        [childrenCount, currentChildrenIndex],\n    );\n\n    useEffect(() => {\n        let interval: number | undefined;\n\n        if (shouldStopAnimation || charactersCount === 0) {\n            setShownCharCount(textContent.length);\n        } else if (isResetAnimationActive) {\n            interval = window.setInterval(() => {\n                setShownCharCount((prevState) => {\n                    const nextState = prevState - 1;\n\n                    if (nextState === 0) {\n                        window.clearInterval(interval);\n\n                        if (areMultipleChildrenGiven) {\n                            setTimeout(() => {\n                                setIsResetAnimationActive(false);\n                                handleSetNextChildrenIndex();\n                            }, nextTextDelay);\n                        }\n                    }\n\n                    return nextState;\n                });\n            }, speed);\n        } else {\n            setTimeout(() => {\n                interval = window.setInterval(() => {\n                    setShownCharCount((prevState) => {\n                        let nextState = Math.min(prevState + 1, charactersCount);\n\n                        if (nextState >= charactersCount && !shouldWaitForContent) {\n                            window.clearInterval(interval);\n\n                            /**\n                             * At this point, the next value for \"shownCharCount\" is deliberately set to\n                             * the length of the textContent in order to correctly display HTML elements\n                             * after the last letter.\n                             */\n                            nextState = textContent.length;\n\n                            if (areMultipleChildrenGiven) {\n                                setTimeout(() => {\n                                    if (shouldUseResetAnimation) {\n                                        setIsResetAnimationActive(true);\n                                    } else {\n                                        setShownCharCount(0);\n                                        setTimeout(handleSetNextChildrenIndex, nextTextDelay);\n                                    }\n                                }, resetDelay);\n                            }\n                        }\n\n                        return nextState;\n                    });\n                }, speed);\n            }, startDelay);\n        }\n\n        return () => {\n            window.clearInterval(interval);\n        };\n    }, [\n        speed,\n        resetDelay,\n        childrenCount,\n        charactersCount,\n        textContent.length,\n        shouldStopAnimation,\n        shouldWaitForContent,\n        isResetAnimationActive,\n        shouldUseResetAnimation,\n        areMultipleChildrenGiven,\n        handleSetNextChildrenIndex,\n        nextTextDelay,\n        startDelay,\n    ]);\n\n    useEffect(() => {\n        if (!isAnimatingText && typeof onFinish === 'function') {\n            onFinish();\n        }\n    }, [isAnimatingText, onFinish]);\n\n    const shownText = useMemo(\n        () => getSubTextFromHTML(textContent, shownCharCount),\n        [shownCharCount, textContent],\n    );\n\n    const pseudoTextHTML = useMemo(() => {\n        if (pseudoChildren) {\n            const pseudoText = React.isValidElement(pseudoChildren)\n                ? renderToString(\n                      <ChaynsProvider data={values} functions={functions} isModule>\n                          <ColorSchemeProvider\n                              color=\"#005EB8\"\n                              colorMode={0}\n                              style={{ display: 'inline' }}\n                          >\n                              {pseudoChildren}\n                          </ColorSchemeProvider>\n                      </ChaynsProvider>,\n                  )\n                : (pseudoChildren as string);\n\n            if (shouldUseAnimationHeight) {\n                return getSubTextFromHTML(pseudoText, shownCharCount);\n            }\n\n            return pseudoText;\n        }\n\n        if (shouldUseAnimationHeight && textContent) {\n            return getSubTextFromHTML(textContent, shownCharCount);\n        }\n\n        return textContent || '&#8203;';\n    }, [functions, pseudoChildren, shouldUseAnimationHeight, shownCharCount, textContent, values]);\n\n    return useMemo(\n        () => (\n            <StyledTypewriter onClick={handleClick}>\n                {isAnimatingText ? (\n                    <StyledTypewriterText\n                        dangerouslySetInnerHTML={{ __html: shownText }}\n                        $isAnimatingText\n                        $shouldHideCursor={shouldHideCursor}\n                        style={textStyle}\n                    />\n                ) : (\n                    <StyledTypewriterText style={textStyle}>{sortedChildren}</StyledTypewriterText>\n                )}\n                {isAnimatingText && (\n                    <StyledTypewriterPseudoText\n                        dangerouslySetInnerHTML={{ __html: pseudoTextHTML }}\n                        $isAnimatingText\n                        $shouldHideCursor={shouldHideCursor}\n                    />\n                )}\n                {/*\n                    The following is needed because some components like the CodeHighlighter will not render correct\n                    if the element is not rendered on client before...\n                */}\n                {!hasRenderedChildrenOnce &&\n                    createPortal(\n                        <div style={{ position: 'absolute', visibility: 'hidden' }}>\n                            {children}\n                        </div>,\n                        document.body,\n                    )}\n            </StyledTypewriter>\n        ),\n        [\n            children,\n            handleClick,\n            hasRenderedChildrenOnce,\n            isAnimatingText,\n            pseudoTextHTML,\n            shouldHideCursor,\n            shownText,\n            sortedChildren,\n            textStyle,\n        ],\n    );\n};\n\nTypewriter.displayName = 'Typewriter';\n\nexport default Typewriter;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/typewriter/Typewriter.js

@@ -45,7 +45,6 @@ const Typewriter = _ref => {
     textStyle
   } = _ref;
   const [currentChildrenIndex, setCurrentChildrenIndex] = useState(0);
-  const [shouldCount, setShouldCount] = useState(true);
   const [hasRenderedChildrenOnce, setHasRenderedChildrenOnce] = useState(false);
   const functions = useFunctions();
   const values = useValues();
@@ -96,13 +95,6 @@ const Typewriter = _ref => {
   const [isResetAnimationActive, setIsResetAnimationActive] = useState(false);
   const [shownCharCount, setShownCharCount] = useState(charactersCount > 0 ? 0 : textContent.length);
   const [shouldStopAnimation, setShouldStopAnimation] = useState(false);
-  const [prevChildren, setPrevChildren] = useState(children);
-  useEffect(() => {
-    if (children !== prevChildren) {
-      setShouldCount(true);
-      setPrevChildren(children);
-    }
-  }, [children, prevChildren]);
   const isAnimatingText = shownCharCount < textContent.length || shouldForceCursorAnimation || areMultipleChildrenGiven || textContent.length === 0;
   const handleClick = useCallback(() => {
     setShouldStopAnimation(true);
@@ -138,32 +130,25 @@ const Typewriter = _ref => {
       setTimeout(() => {
         interval = window.setInterval(() => {
           setShownCharCount(prevState => {
-            let nextState = prevState;
-            if (shouldCount) {
-              nextState = prevState + 1;
-            }
-            if (nextState >= charactersCount) {
-              if (shouldWaitForContent) {
-                setShouldCount(false);
-              } else {
-                window.clearInterval(interval);
+            let nextState = Math.min(prevState + 1, charactersCount);
+            if (nextState >= charactersCount && !shouldWaitForContent) {
+              window.clearInterval(interval);
 
-                /**
-                 * At this point, the next value for "shownCharCount" is deliberately set to
-                 * the length of the textContent in order to correctly display HTML elements
-                 * after the last letter.
-                 */
-                nextState = textContent.length;
-                if (areMultipleChildrenGiven) {
-                  setTimeout(() => {
-                    if (shouldUseResetAnimation) {
-                      setIsResetAnimationActive(true);
-                    } else {
-                      setShownCharCount(0);
-                      setTimeout(handleSetNextChildrenIndex, nextTextDelay);
-                    }
-                  }, resetDelay);
-                }
+              /**
+               * At this point, the next value for "shownCharCount" is deliberately set to
+               * the length of the textContent in order to correctly display HTML elements
+               * after the last letter.
+               */
+              nextState = textContent.length;
+              if (areMultipleChildrenGiven) {
+                setTimeout(() => {
+                  if (shouldUseResetAnimation) {
+                    setIsResetAnimationActive(true);
+                  } else {
+                    setShownCharCount(0);
+                    setTimeout(handleSetNextChildrenIndex, nextTextDelay);
+                  }
+                }, resetDelay);
               }
             }
             return nextState;
@@ -174,7 +159,7 @@ const Typewriter = _ref => {
     return () => {
       window.clearInterval(interval);
     };
-  }, [speed, resetDelay, shouldCount, childrenCount, charactersCount, textContent.length, shouldStopAnimation, shouldWaitForContent, isResetAnimationActive, shouldUseResetAnimation, areMultipleChildrenGiven, handleSetNextChildrenIndex, nextTextDelay, startDelay]);
+  }, [speed, resetDelay, childrenCount, charactersCount, textContent.length, shouldStopAnimation, shouldWaitForContent, isResetAnimationActive, shouldUseResetAnimation, areMultipleChildrenGiven, handleSetNextChildrenIndex, nextTextDelay, startDelay]);
   useEffect(() => {
     if (!isAnimatingText && typeof onFinish === 'function') {
       onFinish();

package/lib/esm/components/typewriter/Typewriter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typewriter.js","names":["ColorSchemeProvider","ChaynsProvider","useFunctions","useValues","React","useCallback","useEffect","useLayoutEffect","useMemo","useState","createPortal","renderToString","StyledTypewriter","StyledTypewriterPseudoText","StyledTypewriterText","getCharactersCount","getSubTextFromHTML","shuffleArray","useIsomorphicLayoutEffect","window","TypewriterDelay","TypewriterSpeed","Typewriter","_ref","children","nextTextDelay","Medium","onFinish","pseudoChildren","resetDelay","shouldForceCursorAnimation","shouldHideCursor","shouldSortChildrenRandomly","shouldUseAnimationHeight","shouldUseResetAnimation","shouldWaitForContent","speed","startDelay","None","textStyle","currentChildrenIndex","setCurrentChildrenIndex","shouldCount","setShouldCount","hasRenderedChildrenOnce","setHasRenderedChildrenOnce","functions","values","sortedChildren","Array","isArray","areMultipleChildrenGiven","childrenCount","length","textContent","currentChildren","isValidElement","createElement","data","isModule","color","colorMode","style","display","charactersCount","isResetAnimationActive","setIsResetAnimationActive","shownCharCount","setShownCharCount","shouldStopAnimation","setShouldStopAnimation","prevChildren","setPrevChildren","isAnimatingText","handleClick","handleSetNextChildrenIndex","newIndex","interval","setInterval","prevState","nextState","clearInterval","setTimeout","shownText","pseudoTextHTML","pseudoText","onClick","dangerouslySetInnerHTML","__html","$isAnimatingText","$shouldHideCursor","position","visibility","document","body","displayName"],"sources":["../../../../src/components/typewriter/Typewriter.tsx"],"sourcesContent":["import { ColorSchemeProvider } from '@chayns-components/core';\nimport { ChaynsProvider, useFunctions, useValues } from 'chayns-api';\nimport React, {\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useMemo,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { renderToString } from 'react-dom/server';\nimport {\n    StyledTypewriter,\n    StyledTypewriterPseudoText,\n    StyledTypewriterText,\n} from './Typewriter.styles';\nimport { getCharactersCount, getSubTextFromHTML, shuffleArray } from './utils';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\n// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterDelay {\n    ExtraSlow = 4000,\n    Slow = 2000,\n    Medium = 1000,\n    Fast = 500,\n    ExtraFast = 250,\n    None = 0,\n}\n\n// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterSpeed {\n    ExtraSlow = 40,\n    Slow = 20,\n    Medium = 10,\n    Fast = 5,\n    ExtraFast = 2.5,\n}\n\nexport type TypewriterProps = {\n    /**\n     * The text to type\n     */\n    children: ReactElement | ReactElement[] | string | string[];\n    /**\n     * The delay in milliseconds before the next text is shown.\n     * This prop is only used if multiple texts are given.\n     */\n    nextTextDelay?: TypewriterDelay;\n    /**\n     * Function that is executed when the typewriter animation has finished. This function will not\n     * be executed if multiple texts are used.\n     */\n    onFinish?: VoidFunction;\n    /**\n     * Pseudo-element to be rendered invisible during animation to define the size of the element\n     * for the typewriter effect. By default, the \"children\" is used for this purpose.\n     */\n    pseudoChildren?: ReactElement | string;\n    /**\n     * Waiting time in milliseconds before the typewriter resets the text.\n     * This prop is only used if multiple texts are given.\n     */\n    resetDelay?: TypewriterDelay;\n    /**\n     * Specifies whether the cursor should be forced to animate even if no text is currently animated.\n     */\n    shouldForceCursorAnimation?: boolean;\n    /**\n     * Specifies whether the cursor should be hidden\n     */\n    shouldHideCursor?: boolean;\n    /**\n     * Specifies whether the children should be sorted randomly if there are multiple texts.\n     * This makes the typewriter start with a different text each time and also changes them\n     * in a random order.\n     */\n    shouldSortChildrenRandomly?: boolean;\n    /**\n     * Specifies whether the animation should use its full height or the height of the current\n     * chunk.\n     */\n    shouldUseAnimationHeight?: boolean;\n    /**\n     * Specifies whether the reset of the text should be animated with a backspace animation for\n     * multiple texts.\n     */\n    shouldUseResetAnimation?: boolean;\n    /**\n     * Whether the typewriter should wait for new content\n     */\n    shouldWaitForContent?: boolean;\n    /**\n     * The speed of the animation. Use the TypewriterSpeed enum for this prop.\n     */\n    speed?: TypewriterSpeed | number;\n    /**\n     * The delay in milliseconds before the typewriter starts typing.\n     */\n    startDelay?: TypewriterDelay;\n    /**\n     * The style of the typewriter text element\n     */\n    textStyle?: React.CSSProperties;\n};\n\nconst Typewriter: FC<TypewriterProps> = ({\n    children,\n    nextTextDelay = TypewriterDelay.Medium,\n    onFinish,\n    pseudoChildren,\n    resetDelay = TypewriterDelay.Medium,\n    shouldForceCursorAnimation = false,\n    shouldHideCursor = false,\n    shouldSortChildrenRandomly = false,\n    shouldUseAnimationHeight = false,\n    shouldUseResetAnimation = false,\n    shouldWaitForContent,\n    speed = TypewriterSpeed.Medium,\n    startDelay = TypewriterDelay.None,\n    textStyle,\n}) => {\n    const [currentChildrenIndex, setCurrentChildrenIndex] = useState(0);\n    const [shouldCount, setShouldCount] = useState(true);\n    const [hasRenderedChildrenOnce, setHasRenderedChildrenOnce] = useState(false);\n\n    const functions = useFunctions();\n    const values = useValues();\n\n    useIsomorphicLayoutEffect(() => {\n        if (children) {\n            setHasRenderedChildrenOnce(false);\n        }\n    }, [children]);\n\n    useEffect(() => {\n        if (!hasRenderedChildrenOnce) {\n            setHasRenderedChildrenOnce(true);\n        }\n    }, [hasRenderedChildrenOnce]);\n\n    const sortedChildren = useMemo(\n        () =>\n            Array.isArray(children) && shouldSortChildrenRandomly\n                ? shuffleArray<ReactElement | string>(children)\n                : children,\n        [children, shouldSortChildrenRandomly],\n    );\n\n    const areMultipleChildrenGiven = Array.isArray(sortedChildren);\n    const childrenCount = areMultipleChildrenGiven ? sortedChildren.length : 1;\n\n    const textContent = useMemo(() => {\n        if (areMultipleChildrenGiven) {\n            const currentChildren = sortedChildren[currentChildrenIndex];\n\n            if (currentChildren) {\n                return React.isValidElement(currentChildren)\n                    ? renderToString(\n                          <ChaynsProvider data={values} functions={functions} isModule>\n                              <ColorSchemeProvider\n                                  color=\"#005EB8\"\n                                  colorMode={0}\n                                  style={{ display: 'inline' }}\n                              >\n                                  {currentChildren}\n                              </ColorSchemeProvider>\n                          </ChaynsProvider>,\n                      )\n                    : (currentChildren as string);\n            }\n\n            return '';\n        }\n\n        return React.isValidElement(sortedChildren)\n            ? renderToString(\n                  <ChaynsProvider data={values} functions={functions} isModule>\n                      <ColorSchemeProvider\n                          color=\"#005EB8\"\n                          colorMode={0}\n                          style={{ display: 'inline' }}\n                      >\n                          {sortedChildren}\n                      </ColorSchemeProvider>\n                  </ChaynsProvider>,\n              )\n            : (sortedChildren as string);\n    }, [areMultipleChildrenGiven, currentChildrenIndex, functions, sortedChildren, values]);\n\n    const charactersCount = useMemo(() => getCharactersCount(textContent), [textContent]);\n\n    const [isResetAnimationActive, setIsResetAnimationActive] = useState(false);\n    const [shownCharCount, setShownCharCount] = useState(\n        charactersCount > 0 ? 0 : textContent.length,\n    );\n    const [shouldStopAnimation, setShouldStopAnimation] = useState(false);\n    const [prevChildren, setPrevChildren] = useState<TypewriterProps['children']>(children);\n\n    useEffect(() => {\n        if (children !== prevChildren) {\n            setShouldCount(true);\n            setPrevChildren(children);\n        }\n    }, [children, prevChildren]);\n\n    const isAnimatingText =\n        shownCharCount < textContent.length ||\n        shouldForceCursorAnimation ||\n        areMultipleChildrenGiven ||\n        textContent.length === 0;\n\n    const handleClick = useCallback(() => {\n        setShouldStopAnimation(true);\n    }, []);\n\n    const handleSetNextChildrenIndex = useCallback(\n        () =>\n            setCurrentChildrenIndex(() => {\n                let newIndex = currentChildrenIndex + 1;\n\n                if (newIndex > childrenCount - 1) {\n                    newIndex = 0;\n                }\n\n                return newIndex;\n            }),\n        [childrenCount, currentChildrenIndex],\n    );\n\n    useEffect(() => {\n        let interval: number | undefined;\n\n        if (shouldStopAnimation || charactersCount === 0) {\n            setShownCharCount(textContent.length);\n        } else if (isResetAnimationActive) {\n            interval = window.setInterval(() => {\n                setShownCharCount((prevState) => {\n                    const nextState = prevState - 1;\n\n                    if (nextState === 0) {\n                        window.clearInterval(interval);\n\n                        if (areMultipleChildrenGiven) {\n                            setTimeout(() => {\n                                setIsResetAnimationActive(false);\n                                handleSetNextChildrenIndex();\n                            }, nextTextDelay);\n                        }\n                    }\n\n                    return nextState;\n                });\n            }, speed);\n        } else {\n            setTimeout(() => {\n                interval = window.setInterval(() => {\n                    setShownCharCount((prevState) => {\n                        let nextState = prevState;\n\n                        if (shouldCount) {\n                            nextState = prevState + 1;\n                        }\n\n                        if (nextState >= charactersCount) {\n                            if (shouldWaitForContent) {\n                                setShouldCount(false);\n                            } else {\n                                window.clearInterval(interval);\n\n                                /**\n                                 * At this point, the next value for \"shownCharCount\" is deliberately set to\n                                 * the length of the textContent in order to correctly display HTML elements\n                                 * after the last letter.\n                                 */\n                                nextState = textContent.length;\n\n                                if (areMultipleChildrenGiven) {\n                                    setTimeout(() => {\n                                        if (shouldUseResetAnimation) {\n                                            setIsResetAnimationActive(true);\n                                        } else {\n                                            setShownCharCount(0);\n                                            setTimeout(handleSetNextChildrenIndex, nextTextDelay);\n                                        }\n                                    }, resetDelay);\n                                }\n                            }\n                        }\n\n                        return nextState;\n                    });\n                }, speed);\n            }, startDelay);\n        }\n\n        return () => {\n            window.clearInterval(interval);\n        };\n    }, [\n        speed,\n        resetDelay,\n        shouldCount,\n        childrenCount,\n        charactersCount,\n        textContent.length,\n        shouldStopAnimation,\n        shouldWaitForContent,\n        isResetAnimationActive,\n        shouldUseResetAnimation,\n        areMultipleChildrenGiven,\n        handleSetNextChildrenIndex,\n        nextTextDelay,\n        startDelay,\n    ]);\n\n    useEffect(() => {\n        if (!isAnimatingText && typeof onFinish === 'function') {\n            onFinish();\n        }\n    }, [isAnimatingText, onFinish]);\n\n    const shownText = useMemo(\n        () => getSubTextFromHTML(textContent, shownCharCount),\n        [shownCharCount, textContent],\n    );\n\n    const pseudoTextHTML = useMemo(() => {\n        if (pseudoChildren) {\n            const pseudoText = React.isValidElement(pseudoChildren)\n                ? renderToString(\n                      <ChaynsProvider data={values} functions={functions} isModule>\n                          <ColorSchemeProvider\n                              color=\"#005EB8\"\n                              colorMode={0}\n                              style={{ display: 'inline' }}\n                          >\n                              {pseudoChildren}\n                          </ColorSchemeProvider>\n                      </ChaynsProvider>,\n                  )\n                : (pseudoChildren as string);\n\n            if (shouldUseAnimationHeight) {\n                return getSubTextFromHTML(pseudoText, shownCharCount);\n            }\n\n            return pseudoText;\n        }\n\n        if (shouldUseAnimationHeight && textContent) {\n            return getSubTextFromHTML(textContent, shownCharCount);\n        }\n\n        return textContent || '&#8203;';\n    }, [functions, pseudoChildren, shouldUseAnimationHeight, shownCharCount, textContent, values]);\n\n    return useMemo(\n        () => (\n            <StyledTypewriter onClick={handleClick}>\n                {isAnimatingText ? (\n                    <StyledTypewriterText\n                        dangerouslySetInnerHTML={{ __html: shownText }}\n                        $isAnimatingText\n                        $shouldHideCursor={shouldHideCursor}\n                        style={textStyle}\n                    />\n                ) : (\n                    <StyledTypewriterText style={textStyle}>{sortedChildren}</StyledTypewriterText>\n                )}\n                {isAnimatingText && (\n                    <StyledTypewriterPseudoText\n                        dangerouslySetInnerHTML={{ __html: pseudoTextHTML }}\n                        $isAnimatingText\n                        $shouldHideCursor={shouldHideCursor}\n                    />\n                )}\n                {/*\n                    The following is needed because some components like the CodeHighlighter will not render correct\n                    if the element is not rendered on client before...\n                */}\n                {!hasRenderedChildrenOnce &&\n                    createPortal(\n                        <div style={{ position: 'absolute', visibility: 'hidden' }}>\n                            {children}\n                        </div>,\n                        document.body,\n                    )}\n            </StyledTypewriter>\n        ),\n        [\n            children,\n            handleClick,\n            hasRenderedChildrenOnce,\n            isAnimatingText,\n            pseudoTextHTML,\n            shouldHideCursor,\n            shownText,\n            sortedChildren,\n            textStyle,\n        ],\n    );\n};\n\nTypewriter.displayName = 'Typewriter';\n\nexport default Typewriter;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Typewriter.js","names":["ColorSchemeProvider","ChaynsProvider","useFunctions","useValues","React","useCallback","useEffect","useLayoutEffect","useMemo","useState","createPortal","renderToString","StyledTypewriter","StyledTypewriterPseudoText","StyledTypewriterText","getCharactersCount","getSubTextFromHTML","shuffleArray","useIsomorphicLayoutEffect","window","TypewriterDelay","TypewriterSpeed","Typewriter","_ref","children","nextTextDelay","Medium","onFinish","pseudoChildren","resetDelay","shouldForceCursorAnimation","shouldHideCursor","shouldSortChildrenRandomly","shouldUseAnimationHeight","shouldUseResetAnimation","shouldWaitForContent","speed","startDelay","None","textStyle","currentChildrenIndex","setCurrentChildrenIndex","hasRenderedChildrenOnce","setHasRenderedChildrenOnce","functions","values","sortedChildren","Array","isArray","areMultipleChildrenGiven","childrenCount","length","textContent","currentChildren","isValidElement","createElement","data","isModule","color","colorMode","style","display","charactersCount","isResetAnimationActive","setIsResetAnimationActive","shownCharCount","setShownCharCount","shouldStopAnimation","setShouldStopAnimation","isAnimatingText","handleClick","handleSetNextChildrenIndex","newIndex","interval","setInterval","prevState","nextState","clearInterval","setTimeout","Math","min","shownText","pseudoTextHTML","pseudoText","onClick","dangerouslySetInnerHTML","__html","$isAnimatingText","$shouldHideCursor","position","visibility","document","body","displayName"],"sources":["../../../../src/components/typewriter/Typewriter.tsx"],"sourcesContent":["import { ColorSchemeProvider } from '@chayns-components/core';\nimport { ChaynsProvider, useFunctions, useValues } from 'chayns-api';\nimport React, {\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useMemo,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { renderToString } from 'react-dom/server';\nimport {\n    StyledTypewriter,\n    StyledTypewriterPseudoText,\n    StyledTypewriterText,\n} from './Typewriter.styles';\nimport { getCharactersCount, getSubTextFromHTML, shuffleArray } from './utils';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\n// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterDelay {\n    ExtraSlow = 4000,\n    Slow = 2000,\n    Medium = 1000,\n    Fast = 500,\n    ExtraFast = 250,\n    None = 0,\n}\n\n// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterSpeed {\n    ExtraSlow = 40,\n    Slow = 20,\n    Medium = 10,\n    Fast = 5,\n    ExtraFast = 2.5,\n}\n\nexport type TypewriterProps = {\n    /**\n     * The text to type\n     */\n    children: ReactElement | ReactElement[] | string | string[];\n    /**\n     * The delay in milliseconds before the next text is shown.\n     * This prop is only used if multiple texts are given.\n     */\n    nextTextDelay?: TypewriterDelay;\n    /**\n     * Function that is executed when the typewriter animation has finished. This function will not\n     * be executed if multiple texts are used.\n     */\n    onFinish?: VoidFunction;\n    /**\n     * Pseudo-element to be rendered invisible during animation to define the size of the element\n     * for the typewriter effect. By default, the \"children\" is used for this purpose.\n     */\n    pseudoChildren?: ReactElement | string;\n    /**\n     * Waiting time in milliseconds before the typewriter resets the text.\n     * This prop is only used if multiple texts are given.\n     */\n    resetDelay?: TypewriterDelay;\n    /**\n     * Specifies whether the cursor should be forced to animate even if no text is currently animated.\n     */\n    shouldForceCursorAnimation?: boolean;\n    /**\n     * Specifies whether the cursor should be hidden\n     */\n    shouldHideCursor?: boolean;\n    /**\n     * Specifies whether the children should be sorted randomly if there are multiple texts.\n     * This makes the typewriter start with a different text each time and also changes them\n     * in a random order.\n     */\n    shouldSortChildrenRandomly?: boolean;\n    /**\n     * Specifies whether the animation should use its full height or the height of the current\n     * chunk.\n     */\n    shouldUseAnimationHeight?: boolean;\n    /**\n     * Specifies whether the reset of the text should be animated with a backspace animation for\n     * multiple texts.\n     */\n    shouldUseResetAnimation?: boolean;\n    /**\n     * Whether the typewriter should wait for new content\n     */\n    shouldWaitForContent?: boolean;\n    /**\n     * The speed of the animation. Use the TypewriterSpeed enum for this prop.\n     */\n    speed?: TypewriterSpeed | number;\n    /**\n     * The delay in milliseconds before the typewriter starts typing.\n     */\n    startDelay?: TypewriterDelay;\n    /**\n     * The style of the typewriter text element\n     */\n    textStyle?: React.CSSProperties;\n};\n\nconst Typewriter: FC<TypewriterProps> = ({\n    children,\n    nextTextDelay = TypewriterDelay.Medium,\n    onFinish,\n    pseudoChildren,\n    resetDelay = TypewriterDelay.Medium,\n    shouldForceCursorAnimation = false,\n    shouldHideCursor = false,\n    shouldSortChildrenRandomly = false,\n    shouldUseAnimationHeight = false,\n    shouldUseResetAnimation = false,\n    shouldWaitForContent,\n    speed = TypewriterSpeed.Medium,\n    startDelay = TypewriterDelay.None,\n    textStyle,\n}) => {\n    const [currentChildrenIndex, setCurrentChildrenIndex] = useState(0);\n    const [hasRenderedChildrenOnce, setHasRenderedChildrenOnce] = useState(false);\n\n    const functions = useFunctions();\n    const values = useValues();\n\n    useIsomorphicLayoutEffect(() => {\n        if (children) {\n            setHasRenderedChildrenOnce(false);\n        }\n    }, [children]);\n\n    useEffect(() => {\n        if (!hasRenderedChildrenOnce) {\n            setHasRenderedChildrenOnce(true);\n        }\n    }, [hasRenderedChildrenOnce]);\n\n    const sortedChildren = useMemo(\n        () =>\n            Array.isArray(children) && shouldSortChildrenRandomly\n                ? shuffleArray<ReactElement | string>(children)\n                : children,\n        [children, shouldSortChildrenRandomly],\n    );\n\n    const areMultipleChildrenGiven = Array.isArray(sortedChildren);\n    const childrenCount = areMultipleChildrenGiven ? sortedChildren.length : 1;\n\n    const textContent = useMemo(() => {\n        if (areMultipleChildrenGiven) {\n            const currentChildren = sortedChildren[currentChildrenIndex];\n\n            if (currentChildren) {\n                return React.isValidElement(currentChildren)\n                    ? renderToString(\n                          <ChaynsProvider data={values} functions={functions} isModule>\n                              <ColorSchemeProvider\n                                  color=\"#005EB8\"\n                                  colorMode={0}\n                                  style={{ display: 'inline' }}\n                              >\n                                  {currentChildren}\n                              </ColorSchemeProvider>\n                          </ChaynsProvider>,\n                      )\n                    : (currentChildren as string);\n            }\n\n            return '';\n        }\n\n        return React.isValidElement(sortedChildren)\n            ? renderToString(\n                  <ChaynsProvider data={values} functions={functions} isModule>\n                      <ColorSchemeProvider\n                          color=\"#005EB8\"\n                          colorMode={0}\n                          style={{ display: 'inline' }}\n                      >\n                          {sortedChildren}\n                      </ColorSchemeProvider>\n                  </ChaynsProvider>,\n              )\n            : (sortedChildren as string);\n    }, [areMultipleChildrenGiven, currentChildrenIndex, functions, sortedChildren, values]);\n\n    const charactersCount = useMemo(() => getCharactersCount(textContent), [textContent]);\n\n    const [isResetAnimationActive, setIsResetAnimationActive] = useState(false);\n    const [shownCharCount, setShownCharCount] = useState(\n        charactersCount > 0 ? 0 : textContent.length,\n    );\n    const [shouldStopAnimation, setShouldStopAnimation] = useState(false);\n\n    const isAnimatingText =\n        shownCharCount < textContent.length ||\n        shouldForceCursorAnimation ||\n        areMultipleChildrenGiven ||\n        textContent.length === 0;\n\n    const handleClick = useCallback(() => {\n        setShouldStopAnimation(true);\n    }, []);\n\n    const handleSetNextChildrenIndex = useCallback(\n        () =>\n            setCurrentChildrenIndex(() => {\n                let newIndex = currentChildrenIndex + 1;\n\n                if (newIndex > childrenCount - 1) {\n                    newIndex = 0;\n                }\n\n                return newIndex;\n            }),\n        [childrenCount, currentChildrenIndex],\n    );\n\n    useEffect(() => {\n        let interval: number | undefined;\n\n        if (shouldStopAnimation || charactersCount === 0) {\n            setShownCharCount(textContent.length);\n        } else if (isResetAnimationActive) {\n            interval = window.setInterval(() => {\n                setShownCharCount((prevState) => {\n                    const nextState = prevState - 1;\n\n                    if (nextState === 0) {\n                        window.clearInterval(interval);\n\n                        if (areMultipleChildrenGiven) {\n                            setTimeout(() => {\n                                setIsResetAnimationActive(false);\n                                handleSetNextChildrenIndex();\n                            }, nextTextDelay);\n                        }\n                    }\n\n                    return nextState;\n                });\n            }, speed);\n        } else {\n            setTimeout(() => {\n                interval = window.setInterval(() => {\n                    setShownCharCount((prevState) => {\n                        let nextState = Math.min(prevState + 1, charactersCount);\n\n                        if (nextState >= charactersCount && !shouldWaitForContent) {\n                            window.clearInterval(interval);\n\n                            /**\n                             * At this point, the next value for \"shownCharCount\" is deliberately set to\n                             * the length of the textContent in order to correctly display HTML elements\n                             * after the last letter.\n                             */\n                            nextState = textContent.length;\n\n                            if (areMultipleChildrenGiven) {\n                                setTimeout(() => {\n                                    if (shouldUseResetAnimation) {\n                                        setIsResetAnimationActive(true);\n                                    } else {\n                                        setShownCharCount(0);\n                                        setTimeout(handleSetNextChildrenIndex, nextTextDelay);\n                                    }\n                                }, resetDelay);\n                            }\n                        }\n\n                        return nextState;\n                    });\n                }, speed);\n            }, startDelay);\n        }\n\n        return () => {\n            window.clearInterval(interval);\n        };\n    }, [\n        speed,\n        resetDelay,\n        childrenCount,\n        charactersCount,\n        textContent.length,\n        shouldStopAnimation,\n        shouldWaitForContent,\n        isResetAnimationActive,\n        shouldUseResetAnimation,\n        areMultipleChildrenGiven,\n        handleSetNextChildrenIndex,\n        nextTextDelay,\n        startDelay,\n    ]);\n\n    useEffect(() => {\n        if (!isAnimatingText && typeof onFinish === 'function') {\n            onFinish();\n        }\n    }, [isAnimatingText, onFinish]);\n\n    const shownText = useMemo(\n        () => getSubTextFromHTML(textContent, shownCharCount),\n        [shownCharCount, textContent],\n    );\n\n    const pseudoTextHTML = useMemo(() => {\n        if (pseudoChildren) {\n            const pseudoText = React.isValidElement(pseudoChildren)\n                ? renderToString(\n                      <ChaynsProvider data={values} functions={functions} isModule>\n                          <ColorSchemeProvider\n                              color=\"#005EB8\"\n                              colorMode={0}\n                              style={{ display: 'inline' }}\n                          >\n                              {pseudoChildren}\n                          </ColorSchemeProvider>\n                      </ChaynsProvider>,\n                  )\n                : (pseudoChildren as string);\n\n            if (shouldUseAnimationHeight) {\n                return getSubTextFromHTML(pseudoText, shownCharCount);\n            }\n\n            return pseudoText;\n        }\n\n        if (shouldUseAnimationHeight && textContent) {\n            return getSubTextFromHTML(textContent, shownCharCount);\n        }\n\n        return textContent || '&#8203;';\n    }, [functions, pseudoChildren, shouldUseAnimationHeight, shownCharCount, textContent, values]);\n\n    return useMemo(\n        () => (\n            <StyledTypewriter onClick={handleClick}>\n                {isAnimatingText ? (\n                    <StyledTypewriterText\n                        dangerouslySetInnerHTML={{ __html: shownText }}\n                        $isAnimatingText\n                        $shouldHideCursor={shouldHideCursor}\n                        style={textStyle}\n                    />\n                ) : (\n                    <StyledTypewriterText style={textStyle}>{sortedChildren}</StyledTypewriterText>\n                )}\n                {isAnimatingText && (\n                    <StyledTypewriterPseudoText\n                        dangerouslySetInnerHTML={{ __html: pseudoTextHTML }}\n                        $isAnimatingText\n                        $shouldHideCursor={shouldHideCursor}\n                    />\n                )}\n                {/*\n                    The following is needed because some components like the CodeHighlighter will not render correct\n                    if the element is not rendered on client before...\n                */}\n                {!hasRenderedChildrenOnce &&\n                    createPortal(\n                        <div style={{ position: 'absolute', visibility: 'hidden' }}>\n                            {children}\n                        </div>,\n                        document.body,\n                    )}\n            </StyledTypewriter>\n        ),\n        [\n            children,\n            handleClick,\n            hasRenderedChildrenOnce,\n            isAnimatingText,\n            pseudoTextHTML,\n            shouldHideCursor,\n            shownText,\n            sortedChildren,\n            textStyle,\n        ],\n    );\n};\n\nTypewriter.displayName = 'Typewriter';\n\nexport default Typewriter;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/typewriter",
-    "version": "5.0.0-beta.837",
+    "version": "5.0.0-beta.840",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -67,7 +67,7 @@
         "typescript": "^5.6.2"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.837"
+        "@chayns-components/core": "^5.0.0-beta.840"
     },
     "peerDependencies": {
         "chayns-api": ">=1.0.73",
@@ -79,5 +79,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "4cc7e7c300c4c4c1843190d2efd1313ce3adabb6"
+    "gitHead": "3c4c61ed583723172bc62ecc68898ed4110053e8"
 }