@chayns-components/typewriter 5.0.53-alpha.1 → 5.0.53

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

@@ -32,13 +32,13 @@ const AnimatedTypewriterText = ({
       };
       const lastParentWithContent = traverseNodes(ref);
 
-      // Removes the cursor marker from the previous render.
+      // Removes lastWithContent class from all elements
       ref.classList.remove('typewriter-lastWithContent');
-      ref.querySelectorAll('.typewriter-lastWithContent').forEach(element => {
+      ref.querySelectorAll('.lastWithContent').forEach(element => {
         element.classList.remove('typewriter-lastWithContent');
       });
 
-      // Adds the cursor marker to the last element that still contains text.
+      // Adds lastWithContent class to the last element with content
       if (lastParentWithContent) {
         lastParentWithContent.classList.add('typewriter-lastWithContent');
       } else {

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

@@ -1 +1 @@
-{"version":3,"file":"AnimatedTypewriterText.js","names":["_react","_interopRequireWildcard","require","_Typewriter","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AnimatedTypewriterText","shouldHideCursor","shownText","shouldRemainSingleLine","textStyle","updateTypewriterCursor","useCallback","ref","traverseNodes","node","_node$textContent","nodeType","Node","TEXT_NODE","textContent","trim","parentElement","childNodes","Array","from","length","result","lastParentWithContent","classList","remove","querySelectorAll","forEach","element","add","useMemo","createElement","StyledTypewriterText","dangerouslySetInnerHTML","__html","$shouldRemainSingleLine","style","$isAnimatingText","_default","exports"],"sources":["../../../../src/components/typewriter/AnimatedTypewriterText.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport { CSSPropertiesWithVars } from 'styled-components/dist/types';\nimport { StyledTypewriterText } from './Typewriter.styles';\n\ntype AnimatedTypewriterTextProps = {\n    shouldHideCursor: boolean;\n    shownText: string;\n    textStyle?: CSSPropertiesWithVars;\n    shouldRemainSingleLine: boolean;\n};\n\nconst AnimatedTypewriterText: FC<AnimatedTypewriterTextProps> = ({\n    shouldHideCursor,\n    shownText,\n    shouldRemainSingleLine,\n    textStyle,\n}) => {\n    const updateTypewriterCursor = useCallback(\n        (ref: HTMLSpanElement | null) => {\n            if (ref && !shouldHideCursor) {\n                // Finds the last text node with content.\n                const traverseNodes = (node: Node): HTMLElement | null => {\n                    if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {\n                        return node.parentElement;\n                    }\n\n                    const childNodes = Array.from(node.childNodes);\n                    for (let i = childNodes.length - 1; i >= 0; i--) {\n                        const result = traverseNodes(childNodes[i] as Node);\n                        if (result) {\n                            return result;\n                        }\n                    }\n\n                    return null;\n                };\n\n                const lastParentWithContent = traverseNodes(ref);\n\n                // Removes the cursor marker from the previous render.\n                ref.classList.remove('typewriter-lastWithContent');\n                ref.querySelectorAll('.typewriter-lastWithContent').forEach((element) => {\n                    element.classList.remove('typewriter-lastWithContent');\n                });\n\n                // Adds the cursor marker to the last element that still contains text.\n                if (lastParentWithContent) {\n                    lastParentWithContent.classList.add('typewriter-lastWithContent');\n                } else {\n                    ref.classList.add('typewriter-lastWithContent');\n                }\n            }\n        },\n        [shouldHideCursor],\n    );\n\n    return useMemo(\n        () => (\n            <StyledTypewriterText\n                ref={(ref) => updateTypewriterCursor(ref)}\n                dangerouslySetInnerHTML={{ __html: shownText }}\n                $shouldRemainSingleLine={shouldRemainSingleLine}\n                style={textStyle}\n                $isAnimatingText\n            />\n        ),\n        [shownText, shouldRemainSingleLine, textStyle, updateTypewriterCursor],\n    );\n};\n\nexport default AnimatedTypewriterText;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,WAAA,GAAAD,OAAA;AAA2D,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAS3D,MAAMkB,sBAAuD,GAAGA,CAAC;EAC7DC,gBAAgB;EAChBC,SAAS;EACTC,sBAAsB;EACtBC;AACJ,CAAC,KAAK;EACF,MAAMC,sBAAsB,GAAG,IAAAC,kBAAW,EACrCC,GAA2B,IAAK;IAC7B,IAAIA,GAAG,IAAI,CAACN,gBAAgB,EAAE;MAC1B;MACA,MAAMO,aAAa,GAAIC,IAAU,IAAyB;QAAA,IAAAC,iBAAA;QACtD,IAAID,IAAI,CAACE,QAAQ,KAAKC,IAAI,CAACC,SAAS,KAAAH,iBAAA,GAAID,IAAI,CAACK,WAAW,cAAAJ,iBAAA,eAAhBA,iBAAA,CAAkBK,IAAI,CAAC,CAAC,EAAE;UAC9D,OAAON,IAAI,CAACO,aAAa;QAC7B;QAEA,MAAMC,UAAU,GAAGC,KAAK,CAACC,IAAI,CAACV,IAAI,CAACQ,UAAU,CAAC;QAC9C,KAAK,IAAI7B,CAAC,GAAG6B,UAAU,CAACG,MAAM,GAAG,CAAC,EAAEhC,CAAC,IAAI,CAAC,EAAEA,CAAC,EAAE,EAAE;UAC7C,MAAMiC,MAAM,GAAGb,aAAa,CAACS,UAAU,CAAC7B,CAAC,CAAS,CAAC;UACnD,IAAIiC,MAAM,EAAE;YACR,OAAOA,MAAM;UACjB;QACJ;QAEA,OAAO,IAAI;MACf,CAAC;MAED,MAAMC,qBAAqB,GAAGd,aAAa,CAACD,GAAG,CAAC;;MAEhD;MACAA,GAAG,CAACgB,SAAS,CAACC,MAAM,CAAC,4BAA4B,CAAC;MAClDjB,GAAG,CAACkB,gBAAgB,CAAC,6BAA6B,CAAC,CAACC,OAAO,CAAEC,OAAO,IAAK;QACrEA,OAAO,CAACJ,SAAS,CAACC,MAAM,CAAC,4BAA4B,CAAC;MAC1D,CAAC,CAAC;;MAEF;MACA,IAAIF,qBAAqB,EAAE;QACvBA,qBAAqB,CAACC,SAAS,CAACK,GAAG,CAAC,4BAA4B,CAAC;MACrE,CAAC,MAAM;QACHrB,GAAG,CAACgB,SAAS,CAACK,GAAG,CAAC,4BAA4B,CAAC;MACnD;IACJ;EACJ,CAAC,EACD,CAAC3B,gBAAgB,CACrB,CAAC;EAED,OAAO,IAAA4B,cAAO,EACV,mBACIpD,MAAA,CAAAc,OAAA,CAAAuC,aAAA,CAAClD,WAAA,CAAAmD,oBAAoB;IACjBxB,GAAG,EAAGA,GAAG,IAAKF,sBAAsB,CAACE,GAAG,CAAE;IAC1CyB,uBAAuB,EAAE;MAAEC,MAAM,EAAE/B;IAAU,CAAE;IAC/CgC,uBAAuB,EAAE/B,sBAAuB;IAChDgC,KAAK,EAAE/B,SAAU;IACjBgC,gBAAgB;EAAA,CACnB,CACJ,EACD,CAAClC,SAAS,EAAEC,sBAAsB,EAAEC,SAAS,EAAEC,sBAAsB,CACzE,CAAC;AACL,CAAC;AAAC,IAAAgC,QAAA,GAAAC,OAAA,CAAA/C,OAAA,GAEaS,sBAAsB","ignoreList":[]}
+{"version":3,"file":"AnimatedTypewriterText.js","names":["_react","_interopRequireWildcard","require","_Typewriter","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AnimatedTypewriterText","shouldHideCursor","shownText","shouldRemainSingleLine","textStyle","updateTypewriterCursor","useCallback","ref","traverseNodes","node","_node$textContent","nodeType","Node","TEXT_NODE","textContent","trim","parentElement","childNodes","Array","from","length","result","lastParentWithContent","classList","remove","querySelectorAll","forEach","element","add","useMemo","createElement","StyledTypewriterText","dangerouslySetInnerHTML","__html","$shouldRemainSingleLine","style","$isAnimatingText","_default","exports"],"sources":["../../../../src/components/typewriter/AnimatedTypewriterText.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport { CSSPropertiesWithVars } from 'styled-components/dist/types';\nimport { StyledTypewriterText } from './Typewriter.styles';\n\ntype AnimatedTypewriterTextProps = {\n    shouldHideCursor: boolean;\n    shownText: string;\n    textStyle?: CSSPropertiesWithVars;\n    shouldRemainSingleLine: boolean;\n};\n\nconst AnimatedTypewriterText: FC<AnimatedTypewriterTextProps> = ({\n    shouldHideCursor,\n    shownText,\n    shouldRemainSingleLine,\n    textStyle,\n}) => {\n    const updateTypewriterCursor = useCallback(\n        (ref: HTMLSpanElement | null) => {\n            if (ref && !shouldHideCursor) {\n                // Finds the last text node with content.\n                const traverseNodes = (node: Node): HTMLElement | null => {\n                    if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {\n                        return node.parentElement;\n                    }\n\n                    const childNodes = Array.from(node.childNodes);\n                    for (let i = childNodes.length - 1; i >= 0; i--) {\n                        const result = traverseNodes(childNodes[i] as Node);\n                        if (result) {\n                            return result;\n                        }\n                    }\n\n                    return null;\n                };\n\n                const lastParentWithContent = traverseNodes(ref);\n\n                // Removes lastWithContent class from all elements\n                ref.classList.remove('typewriter-lastWithContent');\n                ref.querySelectorAll('.lastWithContent').forEach((element) => {\n                    element.classList.remove('typewriter-lastWithContent');\n                });\n\n                // Adds lastWithContent class to the last element with content\n                if (lastParentWithContent) {\n                    lastParentWithContent.classList.add('typewriter-lastWithContent');\n                } else {\n                    ref.classList.add('typewriter-lastWithContent');\n                }\n            }\n        },\n        [shouldHideCursor],\n    );\n\n    return useMemo(\n        () => (\n            <StyledTypewriterText\n                ref={(ref) => updateTypewriterCursor(ref)}\n                dangerouslySetInnerHTML={{ __html: shownText }}\n                $shouldRemainSingleLine={shouldRemainSingleLine}\n                style={textStyle}\n                $isAnimatingText\n            />\n        ),\n        [shownText, shouldRemainSingleLine, textStyle, updateTypewriterCursor],\n    );\n};\n\nexport default AnimatedTypewriterText;\n"],"mappings":"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","ignoreList":[]}

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

@@ -14,7 +14,6 @@ var _speed = require("../../types/speed");
 var _AnimatedTypewriterText = _interopRequireDefault(require("./AnimatedTypewriterText"));
 var _Typewriter = require("./Typewriter.styles");
 var _utils = require("./utils");
-var _useTypewriterAnimation = _interopRequireDefault(require("./useTypewriterAnimation"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
@@ -47,6 +46,9 @@ const Typewriter = ({
   var _colorScheme$designSe5, _colorScheme$designSe6, _colorScheme$designSe9, _colorScheme$designSe0;
   const [currentChildrenIndex, setCurrentChildrenIndex] = (0, _react.useState)(0);
   const [hasRenderedChildrenOnce, setHasRenderedChildrenOnce] = (0, _react.useState)(false);
+  const [shouldPreventBlinkingCursor, setShouldPreventBlinkingCursor] = (0, _react.useState)(false);
+  const [isResetAnimationActive, setIsResetAnimationActive] = (0, _react.useState)(false);
+  const [shouldStopAnimation, setShouldStopAnimation] = (0, _react.useState)(false);
   const autoSpeed = (0, _react.useRef)();
   const autoSteps = (0, _react.useRef)(animationSteps);
   const functions = (0, _chaynsApi.useFunctions)();
@@ -106,6 +108,8 @@ const Typewriter = ({
     lastLength: charactersCount,
     ema: charactersCount / (autoSpeedBaseFactor / 1000)
   });
+  const [shownCharCount, setShownCharCount] = (0, _react.useState)(charactersCount > 0 ? 0 : textContent.length);
+  const currentPosition = (0, _react.useRef)(0);
   (0, _react.useEffect)(() => {
     if (shouldUseResetAnimation) {
       chunkIntervalExponentialMovingAverage.current = {
@@ -131,38 +135,100 @@ const Typewriter = ({
     autoSpeed.current = calculatedAutoSpeed;
     autoSteps.current = steps;
   }, [animationSteps, charactersCount, shouldCalcAutoSpeed]);
-  const handleSetNextChildrenIndex = (0, _react.useCallback)(() => {
-    setCurrentChildrenIndex(prevIndex => {
-      const nextIndex = prevIndex + 1;
-      return nextIndex > childrenCount - 1 ? 0 : nextIndex;
-    });
-  }, [childrenCount]);
-  const {
-    handleClick,
-    isResetAnimationActive,
-    shownCharCount,
-    shouldPreventBlinkingCursor
-  } = (0, _useTypewriterAnimation.default)({
-    areMultipleChildrenGiven,
-    autoSpeedRef: autoSpeed,
-    autoStepsRef: autoSteps,
-    charactersCount,
-    cursorType,
-    nextTextDelay,
-    onAdvanceText: handleSetNextChildrenIndex,
-    onResetAnimationEnd,
-    onResetAnimationStart,
-    onTypingAnimationEnd,
-    onTypingAnimationStart,
-    resetDelay,
-    resetSpeed,
-    shouldUseResetAnimation,
-    shouldWaitForContent,
-    speed,
-    startDelay,
-    textContentLength: textContent.length
-  });
   const isAnimatingText = shownCharCount < textContent.length || shouldForceCursorAnimation || areMultipleChildrenGiven || textContent.length === 0;
+  const handleClick = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    event.preventDefault();
+    setShouldStopAnimation(true);
+  }, []);
+  const handleSetNextChildrenIndex = (0, _react.useCallback)(() => setCurrentChildrenIndex(() => {
+    let newIndex = currentChildrenIndex + 1;
+    if (newIndex > childrenCount - 1) {
+      newIndex = 0;
+    }
+    return newIndex;
+  }), [childrenCount, currentChildrenIndex]);
+  (0, _react.useEffect)(() => {
+    let interval;
+    if (shouldStopAnimation || charactersCount === 0) {
+      setShownCharCount(textContent.length);
+      currentPosition.current = textContent.length;
+    } else if (isResetAnimationActive) {
+      if (typeof onResetAnimationStart === 'function') {
+        onResetAnimationStart();
+      }
+      interval = window.setInterval(() => {
+        setShownCharCount(prevState => {
+          const nextState = prevState - autoSteps.current;
+          currentPosition.current = nextState;
+          if (nextState === 0) {
+            window.clearInterval(interval);
+            if (typeof onResetAnimationEnd === 'function') {
+              onResetAnimationEnd();
+            }
+            if (areMultipleChildrenGiven) {
+              setTimeout(() => {
+                setIsResetAnimationActive(false);
+                handleSetNextChildrenIndex();
+              }, nextTextDelay);
+            }
+          }
+          return nextState;
+        });
+      }, resetSpeed);
+    } else {
+      const startTypingAnimation = () => {
+        if (cursorType === _cursor.CursorType.Thin) {
+          setShouldPreventBlinkingCursor(true);
+        }
+        if (typeof onTypingAnimationStart === 'function') {
+          onTypingAnimationStart();
+        }
+        const runTypingInterval = () => {
+          setShownCharCount(prevState => {
+            let nextState = Math.min(prevState + autoSteps.current, charactersCount);
+            if (nextState >= charactersCount && !shouldWaitForContent) {
+              window.clearInterval(interval);
+              if (cursorType === _cursor.CursorType.Thin) {
+                setShouldPreventBlinkingCursor(false);
+              }
+              if (typeof onTypingAnimationEnd === 'function') {
+                onTypingAnimationEnd();
+              }
+
+              /**
+               * At this point, the next value for "shownCharCount" is deliberately set to
+               * the length of the textContent 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);
+              }
+            }
+            currentPosition.current = nextState;
+            return nextState;
+          });
+        };
+        interval = window.setInterval(runTypingInterval, autoSpeed.current ?? speed);
+      };
+      if (startDelay) {
+        setTimeout(startTypingAnimation, startDelay);
+      } else {
+        startTypingAnimation();
+      }
+    }
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [areMultipleChildrenGiven, autoSteps, charactersCount, cursorType, handleSetNextChildrenIndex, isResetAnimationActive, nextTextDelay, onResetAnimationEnd, onResetAnimationStart, onTypingAnimationEnd, onTypingAnimationStart, resetDelay, resetSpeed, shouldStopAnimation, shouldUseResetAnimation, shouldWaitForContent, speed, startDelay, textContent.length]);
   (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","_cursor","_speed","_AnimatedTypewriterText","_interopRequireDefault","_Typewriter","_utils","_useTypewriterAnimation","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","Typewriter","children","cursorType","CursorType","Default","nextTextDelay","TypewriterDelay","Medium","onFinish","onResetAnimationEnd","animationSteps","onResetAnimationStart","onTypingAnimationEnd","onTypingAnimationStart","pseudoChildren","resetDelay","shouldForceCursorAnimation","shouldHideCursor","shouldRemainSingleLine","shouldSortChildrenRandomly","shouldUseAnimationHeight","shouldUseResetAnimation","shouldWaitForContent","speed","TypewriterSpeed","resetSpeed","startDelay","None","textStyle","shouldCalcAutoSpeed","autoSpeedBaseFactor","_colorScheme$designSe5","_colorScheme$designSe6","_colorScheme$designSe9","_colorScheme$designSe0","currentChildrenIndex","setCurrentChildrenIndex","useState","hasRenderedChildrenOnce","setHasRenderedChildrenOnce","autoSpeed","useRef","autoSteps","functions","useFunctions","values","useValues","colorScheme","useColorScheme","sortedChildren","useMemo","Array","isArray","shuffleArray","areMultipleChildrenGiven","childrenCount","length","textContent","_colorScheme$designSe3","_colorScheme$designSe4","currentChildren","_colorScheme$designSe","_colorScheme$designSe2","React","isValidElement","renderToString","createElement","ChaynsProvider","data","isModule","ColorSchemeProvider","color","designSettings","colorMode","style","display","className","charactersCount","getCharactersCount","chunkIntervalExponentialMovingAverage","lastLength","ema","current","updateChunkStreamingSpeedEMA","currentLength","state","undefined","calculatedAutoSpeed","steps","calculateAutoSpeed","handleSetNextChildrenIndex","useCallback","prevIndex","nextIndex","handleClick","isResetAnimationActive","shownCharCount","shouldPreventBlinkingCursor","useTypewriterAnimation","autoSpeedRef","autoStepsRef","onAdvanceText","textContentLength","isAnimatingText","shownText","getSubTextFromHTML","pseudoTextHTML","_colorScheme$designSe7","_colorScheme$designSe8","pseudoText","StyledTypewriter","$cursorType","onClick","$isAnimatingText","$shouldHideCursor","$shouldPreventBlinkAnimation","StyledTypewriterText","$shouldRemainSingleLine","dangerouslySetInnerHTML","__html","StyledTypewriterPseudoText","createPortal","position","visibility","document","body","displayName","_default","exports"],"sources":["../../../../src/components/typewriter/Typewriter.tsx"],"sourcesContent":["import { ColorSchemeProvider, useColorScheme } 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    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { renderToString } from 'react-dom/server';\nimport { CSSPropertiesWithVars } from 'styled-components/dist/types';\nimport { CursorType } from '../../types/cursor';\nimport { TypewriterDelay, TypewriterSpeed } from '../../types/speed';\nimport AnimatedTypewriterText from './AnimatedTypewriterText';\nimport {\n    StyledTypewriter,\n    StyledTypewriterPseudoText,\n    StyledTypewriterText,\n} from './Typewriter.styles';\nimport {\n    calculateAutoSpeed,\n    ChunkStreamingSpeedState,\n    getCharactersCount,\n    getSubTextFromHTML,\n    shuffleArray,\n    updateChunkStreamingSpeedEMA,\n} from './utils';\nimport useTypewriterAnimation from './useTypewriterAnimation';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport type TypewriterProps = {\n    /**\n     * The number of characters that will be animated per animation step.\n     *\n     * The step is advanced by the requestAnimationFrame-driven scheduler. When\n     * `shouldCalcAutoSpeed` is enabled, the component may override this value dynamically.\n     */\n    animationSteps?: number;\n    /**\n     * The content to type.\n     *\n     * Strings are animated directly. React elements and arrays are rendered to HTML first so the\n     * typewriter can preserve nested markup and inline components.\n     */\n    children: ReactElement | ReactElement[] | string | string[];\n    /**\n     * The type of the cursor. Use the `CursorType` enum for this prop.\n     */\n    cursorType?: CursorType;\n    /**\n     * The delay in milliseconds before the next text is shown.\n     *\n     * This prop is only used when `children` is an array.\n     */\n    nextTextDelay?: TypewriterDelay;\n    /**\n     * Function that is executed when the entire typewriter animation has finished.\n     *\n     * This callback is not used while more texts are still queued.\n     */\n    onFinish?: VoidFunction;\n    /**\n     * Function that is executed when the reset animation has finished.\n     *\n     * This callback only runs when `shouldUseResetAnimation` is enabled.\n     */\n    onResetAnimationEnd?: VoidFunction;\n    /**\n     * Function that is executed when the reset animation has started.\n     *\n     * This callback only runs when `shouldUseResetAnimation` is enabled.\n     */\n    onResetAnimationStart?: VoidFunction;\n    /**\n     * Function that is executed when the typing animation has finished.\n     *\n     * If multiple texts are given, this function will be executed for each text.\n     */\n    onTypingAnimationEnd?: VoidFunction;\n    /**\n     * Function that is executed when the typing animation has started.\n     *\n     * If multiple texts are given, this function will be executed for each text.\n     */\n    onTypingAnimationStart?: VoidFunction;\n    /**\n     * Invisible content that defines the reserved layout size while the animation is running.\n     *\n     * When omitted, the visible `children` are used as the layout template.\n     */\n    pseudoChildren?: ReactElement | string;\n    /**\n     * Waiting time in milliseconds before the typewriter resets the text.\n     *\n     * This prop is only used when `children` is an array.\n     */\n    resetDelay?: TypewriterDelay;\n    /**\n     * The reset speed of the animation. Use the `TypewriterSpeed` enum for this prop.\n     */\n    resetSpeed?: TypewriterSpeed | number;\n    /**\n     * Keeps the cursor animated even if the current text is not actively changing.\n     */\n    shouldForceCursorAnimation?: boolean;\n    /**\n     * Hides the cursor entirely.\n     */\n    shouldHideCursor?: boolean;\n    /**\n     * Keeps the content on a single line and applies ellipsis overflow handling.\n     */\n    shouldRemainSingleLine?: boolean;\n    /**\n     * Randomizes the order of `children` when multiple texts are provided.\n     */\n    shouldSortChildrenRandomly?: boolean;\n    /**\n     * Makes the hidden sizing text follow the currently revealed chunk instead of the full content.\n     */\n    shouldUseAnimationHeight?: boolean;\n    /**\n     * Derives the typing cadence from the observed streaming rate.\n     */\n    shouldCalcAutoSpeed?: boolean;\n    /**\n     * Base factor used to initialize the auto-speed EMA.\n     */\n    autoSpeedBaseFactor?: number;\n    /**\n     * Animates the reset between multiple texts with a backspace-like effect.\n     */\n    shouldUseResetAnimation?: boolean;\n    /**\n     * Keeps the typewriter active while waiting for new content to arrive.\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     * Inline styles for the visible text element.\n     */\n    textStyle?: CSSPropertiesWithVars;\n};\n\nconst Typewriter: FC<TypewriterProps> = ({\n    children,\n    cursorType = CursorType.Default,\n    nextTextDelay = TypewriterDelay.Medium,\n    onFinish,\n    onResetAnimationEnd,\n    animationSteps = 1,\n    onResetAnimationStart,\n    onTypingAnimationEnd,\n    onTypingAnimationStart,\n    pseudoChildren,\n    resetDelay = TypewriterDelay.Medium,\n    shouldForceCursorAnimation = false,\n    shouldHideCursor = false,\n    shouldRemainSingleLine = false,\n    shouldSortChildrenRandomly = false,\n    shouldUseAnimationHeight = false,\n    shouldUseResetAnimation = false,\n    shouldWaitForContent,\n    speed = TypewriterSpeed.Medium,\n    resetSpeed = speed,\n    startDelay = TypewriterDelay.None,\n    textStyle,\n    shouldCalcAutoSpeed = false,\n    autoSpeedBaseFactor = 2000,\n}) => {\n    const [currentChildrenIndex, setCurrentChildrenIndex] = useState(0);\n    const [hasRenderedChildrenOnce, setHasRenderedChildrenOnce] = useState(false);\n    const autoSpeed = useRef<number>();\n    const autoSteps = useRef<number>(animationSteps);\n\n    const functions = useFunctions();\n    const values = useValues();\n\n    const colorScheme = useColorScheme();\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={colorScheme?.designSettings?.color}\n                                  colorMode={colorScheme?.designSettings?.colorMode}\n                                  style={{ display: 'inline' }}\n                              >\n                                  <span className=\"notranslate\">{currentChildren}</span>\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={colorScheme?.designSettings?.color}\n                          colorMode={colorScheme?.designSettings?.colorMode}\n                          style={{ display: 'inline' }}\n                      >\n                          <span className=\"notranslate\">{sortedChildren}</span>\n                      </ColorSchemeProvider>\n                  </ChaynsProvider>,\n              )\n            : (sortedChildren as string);\n    }, [\n        areMultipleChildrenGiven,\n        colorScheme?.designSettings?.color,\n        colorScheme?.designSettings?.colorMode,\n        currentChildrenIndex,\n        functions,\n        sortedChildren,\n        values,\n    ]);\n\n    const charactersCount = useMemo(() => getCharactersCount(textContent), [textContent]);\n    const chunkIntervalExponentialMovingAverage = useRef<ChunkStreamingSpeedState>({\n        lastLength: charactersCount,\n        ema: charactersCount / (autoSpeedBaseFactor / 1000),\n    });\n\n    useEffect(() => {\n        if (shouldUseResetAnimation) {\n            chunkIntervalExponentialMovingAverage.current = {\n                ema: charactersCount / (autoSpeedBaseFactor / 1000),\n                lastLength: charactersCount,\n            };\n        }\n        chunkIntervalExponentialMovingAverage.current = updateChunkStreamingSpeedEMA({\n            currentLength: charactersCount,\n            state: chunkIntervalExponentialMovingAverage.current,\n        });\n    }, [autoSpeedBaseFactor, charactersCount, shouldUseResetAnimation]);\n\n    useEffect(() => {\n        if (!shouldCalcAutoSpeed) {\n            autoSpeed.current = undefined;\n            autoSteps.current = animationSteps;\n            return;\n        }\n        const { speed: calculatedAutoSpeed, steps } = calculateAutoSpeed(\n            chunkIntervalExponentialMovingAverage.current.ema,\n        );\n\n        autoSpeed.current = calculatedAutoSpeed;\n        autoSteps.current = steps;\n    }, [animationSteps, charactersCount, shouldCalcAutoSpeed]);\n\n    const handleSetNextChildrenIndex = useCallback(() => {\n        setCurrentChildrenIndex((prevIndex) => {\n            const nextIndex = prevIndex + 1;\n\n            return nextIndex > childrenCount - 1 ? 0 : nextIndex;\n        });\n    }, [childrenCount]);\n\n    const { handleClick, isResetAnimationActive, shownCharCount, shouldPreventBlinkingCursor } =\n        useTypewriterAnimation({\n            areMultipleChildrenGiven,\n            autoSpeedRef: autoSpeed,\n            autoStepsRef: autoSteps,\n            charactersCount,\n            cursorType,\n            nextTextDelay,\n            onAdvanceText: handleSetNextChildrenIndex,\n            onResetAnimationEnd,\n            onResetAnimationStart,\n            onTypingAnimationEnd,\n            onTypingAnimationStart,\n            resetDelay,\n            resetSpeed,\n            shouldUseResetAnimation,\n            shouldWaitForContent,\n            speed,\n            startDelay,\n            textContentLength: textContent.length,\n        });\n\n    const isAnimatingText =\n        shownCharCount < textContent.length ||\n        shouldForceCursorAnimation ||\n        areMultipleChildrenGiven ||\n        textContent.length === 0;\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={colorScheme?.designSettings?.color}\n                              colorMode={colorScheme?.designSettings?.colorMode}\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    }, [\n        colorScheme?.designSettings?.color,\n        colorScheme?.designSettings?.colorMode,\n        functions,\n        pseudoChildren,\n        shouldUseAnimationHeight,\n        shownCharCount,\n        textContent,\n        values,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledTypewriter\n                $cursorType={cursorType}\n                onClick={isAnimatingText ? handleClick : undefined}\n                $isAnimatingText={isAnimatingText}\n                $shouldHideCursor={shouldHideCursor}\n                $shouldPreventBlinkAnimation={shouldPreventBlinkingCursor}\n            >\n                {isAnimatingText ? (\n                    <AnimatedTypewriterText\n                        shouldHideCursor={shouldHideCursor}\n                        shouldRemainSingleLine={shouldRemainSingleLine}\n                        shownText={shownText}\n                        textStyle={textStyle}\n                    />\n                ) : (\n                    <StyledTypewriterText\n                        className=\"notranslate\"\n                        $shouldRemainSingleLine={shouldRemainSingleLine}\n                        dangerouslySetInnerHTML={\n                            typeof sortedChildren === 'string' ? { __html: shownText } : undefined\n                        }\n                        style={textStyle}\n                    >\n                        {typeof sortedChildren !== 'string' ? sortedChildren : undefined}\n                    </StyledTypewriterText>\n                )}\n                {isAnimatingText && (\n                    <StyledTypewriterPseudoText\n                        $isAnimatingText={isAnimatingText}\n                        $shouldHideCursor={shouldHideCursor}\n                        dangerouslySetInnerHTML={{ __html: pseudoTextHTML }}\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 a 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            cursorType,\n            handleClick,\n            hasRenderedChildrenOnce,\n            isAnimatingText,\n            pseudoTextHTML,\n            shouldHideCursor,\n            shouldPreventBlinkingCursor,\n            shouldRemainSingleLine,\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","_cursor","_speed","_AnimatedTypewriterText","_interopRequireDefault","_Typewriter","_utils","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","Typewriter","children","cursorType","CursorType","Default","nextTextDelay","TypewriterDelay","Medium","onFinish","onResetAnimationEnd","animationSteps","onResetAnimationStart","onTypingAnimationEnd","onTypingAnimationStart","pseudoChildren","resetDelay","shouldForceCursorAnimation","shouldHideCursor","shouldRemainSingleLine","shouldSortChildrenRandomly","shouldUseAnimationHeight","shouldUseResetAnimation","shouldWaitForContent","speed","TypewriterSpeed","resetSpeed","startDelay","None","textStyle","shouldCalcAutoSpeed","autoSpeedBaseFactor","_colorScheme$designSe5","_colorScheme$designSe6","_colorScheme$designSe9","_colorScheme$designSe0","currentChildrenIndex","setCurrentChildrenIndex","useState","hasRenderedChildrenOnce","setHasRenderedChildrenOnce","shouldPreventBlinkingCursor","setShouldPreventBlinkingCursor","isResetAnimationActive","setIsResetAnimationActive","shouldStopAnimation","setShouldStopAnimation","autoSpeed","useRef","autoSteps","functions","useFunctions","values","useValues","colorScheme","useColorScheme","sortedChildren","useMemo","Array","isArray","shuffleArray","areMultipleChildrenGiven","childrenCount","length","textContent","_colorScheme$designSe3","_colorScheme$designSe4","currentChildren","_colorScheme$designSe","_colorScheme$designSe2","React","isValidElement","renderToString","createElement","ChaynsProvider","data","isModule","ColorSchemeProvider","color","designSettings","colorMode","style","display","className","charactersCount","getCharactersCount","chunkIntervalExponentialMovingAverage","lastLength","ema","shownCharCount","setShownCharCount","currentPosition","current","updateChunkStreamingSpeedEMA","currentLength","state","undefined","calculatedAutoSpeed","steps","calculateAutoSpeed","isAnimatingText","handleClick","useCallback","event","stopPropagation","preventDefault","handleSetNextChildrenIndex","newIndex","interval","setInterval","prevState","nextState","clearInterval","setTimeout","startTypingAnimation","Thin","runTypingInterval","Math","min","shownText","getSubTextFromHTML","pseudoTextHTML","_colorScheme$designSe7","_colorScheme$designSe8","pseudoText","StyledTypewriter","$cursorType","onClick","$isAnimatingText","$shouldHideCursor","$shouldPreventBlinkAnimation","StyledTypewriterText","$shouldRemainSingleLine","dangerouslySetInnerHTML","__html","StyledTypewriterPseudoText","createPortal","position","visibility","document","body","displayName","_default","exports"],"sources":["../../../../src/components/typewriter/Typewriter.tsx"],"sourcesContent":["import { ColorSchemeProvider, useColorScheme } 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    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { renderToString } from 'react-dom/server';\nimport { CSSPropertiesWithVars } from 'styled-components/dist/types';\nimport { CursorType } from '../../types/cursor';\nimport { TypewriterDelay, TypewriterSpeed } from '../../types/speed';\nimport AnimatedTypewriterText from './AnimatedTypewriterText';\nimport {\n    StyledTypewriter,\n    StyledTypewriterPseudoText,\n    StyledTypewriterText,\n} from './Typewriter.styles';\nimport {\n    calculateAutoSpeed,\n    ChunkStreamingSpeedState,\n    getCharactersCount,\n    getSubTextFromHTML,\n    shuffleArray,\n    updateChunkStreamingSpeedEMA,\n} from './utils';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport type TypewriterProps = {\n    /**\n     * The number of characters that will be animated per animation cycle.\n     */\n    animationSteps?: number;\n    /**\n     * The text to type\n     */\n    children: ReactElement | ReactElement[] | string | string[];\n    /**\n     * The type of the cursor. Use the CursorType enum for this prop.\n     */\n    cursorType?: CursorType;\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     * Function that is executed when the reset animation has finished. This function will not be\n     * executed if `shouldUseResetAnimation` is not set to `true`.\n     */\n    onResetAnimationEnd?: VoidFunction;\n    /**\n     * Function that is executed when the reset animation has started. This function will not be\n     * executed if `shouldUseResetAnimation` is not set to `true`.\n     */\n    onResetAnimationStart?: VoidFunction;\n    /**\n     * Function that is executed when the typing animation has finished. If multiple texts are given,\n     * this function will be executed for each text.\n     */\n    onTypingAnimationEnd?: VoidFunction;\n    /**\n     * Function that is executed when the typing animation has started. If multiple texts are given,\n     * this function will be executed for each text.\n     */\n    onTypingAnimationStart?: 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     * The reset speed of the animation. Use the TypewriterSpeed enum for this prop.\n     */\n    resetSpeed?: TypewriterSpeed | number;\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     * Whether the content should remain a single line.\n     */\n    shouldRemainSingleLine?: 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     * Whether the animation speed should be calculated with the chunk interval.\n     */\n    shouldCalcAutoSpeed?: boolean;\n    /**\n     * Sets how long the animation should last when `shouldCalcAutoSpeed` is enabled in milliseconds.\n     * When chunks are streamed, this value will only be used for the initial speed and then change to the speed characters are added at\n     */\n    autoSpeedBaseFactor?: number;\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?: CSSPropertiesWithVars;\n};\n\nconst Typewriter: FC<TypewriterProps> = ({\n    children,\n    cursorType = CursorType.Default,\n    nextTextDelay = TypewriterDelay.Medium,\n    onFinish,\n    onResetAnimationEnd,\n    animationSteps = 1,\n    onResetAnimationStart,\n    onTypingAnimationEnd,\n    onTypingAnimationStart,\n    pseudoChildren,\n    resetDelay = TypewriterDelay.Medium,\n    shouldForceCursorAnimation = false,\n    shouldHideCursor = false,\n    shouldRemainSingleLine = false,\n    shouldSortChildrenRandomly = false,\n    shouldUseAnimationHeight = false,\n    shouldUseResetAnimation = false,\n    shouldWaitForContent,\n    speed = TypewriterSpeed.Medium,\n    resetSpeed = speed,\n    startDelay = TypewriterDelay.None,\n    textStyle,\n    shouldCalcAutoSpeed = false,\n    autoSpeedBaseFactor = 2000,\n}) => {\n    const [currentChildrenIndex, setCurrentChildrenIndex] = useState(0);\n    const [hasRenderedChildrenOnce, setHasRenderedChildrenOnce] = useState(false);\n    const [shouldPreventBlinkingCursor, setShouldPreventBlinkingCursor] = useState(false);\n    const [isResetAnimationActive, setIsResetAnimationActive] = useState(false);\n    const [shouldStopAnimation, setShouldStopAnimation] = useState(false);\n    const autoSpeed = useRef<number>();\n    const autoSteps = useRef<number>(animationSteps);\n\n    const functions = useFunctions();\n    const values = useValues();\n\n    const colorScheme = useColorScheme();\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={colorScheme?.designSettings?.color}\n                                  colorMode={colorScheme?.designSettings?.colorMode}\n                                  style={{ display: 'inline' }}\n                              >\n                                  <span className=\"notranslate\">{currentChildren}</span>\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={colorScheme?.designSettings?.color}\n                          colorMode={colorScheme?.designSettings?.colorMode}\n                          style={{ display: 'inline' }}\n                      >\n                          <span className=\"notranslate\">{sortedChildren}</span>\n                      </ColorSchemeProvider>\n                  </ChaynsProvider>,\n              )\n            : (sortedChildren as string);\n    }, [\n        areMultipleChildrenGiven,\n        colorScheme?.designSettings?.color,\n        colorScheme?.designSettings?.colorMode,\n        currentChildrenIndex,\n        functions,\n        sortedChildren,\n        values,\n    ]);\n\n    const charactersCount = useMemo(() => getCharactersCount(textContent), [textContent]);\n    const chunkIntervalExponentialMovingAverage = useRef<ChunkStreamingSpeedState>({\n        lastLength: charactersCount,\n        ema: charactersCount / (autoSpeedBaseFactor / 1000),\n    });\n\n    const [shownCharCount, setShownCharCount] = useState(\n        charactersCount > 0 ? 0 : textContent.length,\n    );\n\n    const currentPosition = useRef(0);\n\n    useEffect(() => {\n        if (shouldUseResetAnimation) {\n            chunkIntervalExponentialMovingAverage.current = {\n                ema: charactersCount / (autoSpeedBaseFactor / 1000),\n                lastLength: charactersCount,\n            };\n        }\n        chunkIntervalExponentialMovingAverage.current = updateChunkStreamingSpeedEMA({\n            currentLength: charactersCount,\n            state: chunkIntervalExponentialMovingAverage.current,\n        });\n    }, [autoSpeedBaseFactor, charactersCount, shouldUseResetAnimation]);\n\n    useEffect(() => {\n        if (!shouldCalcAutoSpeed) {\n            autoSpeed.current = undefined;\n            autoSteps.current = animationSteps;\n            return;\n        }\n        const { speed: calculatedAutoSpeed, steps } = calculateAutoSpeed(\n            chunkIntervalExponentialMovingAverage.current.ema,\n        );\n\n        autoSpeed.current = calculatedAutoSpeed;\n        autoSteps.current = steps;\n    }, [animationSteps, charactersCount, shouldCalcAutoSpeed]);\n\n    const isAnimatingText =\n        shownCharCount < textContent.length ||\n        shouldForceCursorAnimation ||\n        areMultipleChildrenGiven ||\n        textContent.length === 0;\n\n    const handleClick = useCallback((event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n\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            currentPosition.current = textContent.length;\n        } else if (isResetAnimationActive) {\n            if (typeof onResetAnimationStart === 'function') {\n                onResetAnimationStart();\n            }\n\n            interval = window.setInterval(() => {\n                setShownCharCount((prevState) => {\n                    const nextState = prevState - autoSteps.current;\n                    currentPosition.current = nextState;\n\n                    if (nextState === 0) {\n                        window.clearInterval(interval);\n\n                        if (typeof onResetAnimationEnd === 'function') {\n                            onResetAnimationEnd();\n                        }\n\n                        if (areMultipleChildrenGiven) {\n                            setTimeout(() => {\n                                setIsResetAnimationActive(false);\n                                handleSetNextChildrenIndex();\n                            }, nextTextDelay);\n                        }\n                    }\n\n                    return nextState;\n                });\n            }, resetSpeed);\n        } else {\n            const startTypingAnimation = () => {\n                if (cursorType === CursorType.Thin) {\n                    setShouldPreventBlinkingCursor(true);\n                }\n\n                if (typeof onTypingAnimationStart === 'function') {\n                    onTypingAnimationStart();\n                }\n\n                const runTypingInterval = () => {\n                    setShownCharCount((prevState) => {\n                        let nextState = Math.min(prevState + autoSteps.current, charactersCount);\n\n                        if (nextState >= charactersCount && !shouldWaitForContent) {\n                            window.clearInterval(interval);\n\n                            if (cursorType === CursorType.Thin) {\n                                setShouldPreventBlinkingCursor(false);\n                            }\n\n                            if (typeof onTypingAnimationEnd === 'function') {\n                                onTypingAnimationEnd();\n                            }\n\n                            /**\n                             * At this point, the next value for \"shownCharCount\" is deliberately set to\n                             * the length of the textContent 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                        currentPosition.current = nextState;\n\n                        return nextState;\n                    });\n                };\n                interval = window.setInterval(runTypingInterval, autoSpeed.current ?? speed);\n            };\n\n            if (startDelay) {\n                setTimeout(startTypingAnimation, startDelay);\n            } else {\n                startTypingAnimation();\n            }\n        }\n\n        return () => {\n            window.clearInterval(interval);\n        };\n    }, [\n        areMultipleChildrenGiven,\n        autoSteps,\n        charactersCount,\n        cursorType,\n        handleSetNextChildrenIndex,\n        isResetAnimationActive,\n        nextTextDelay,\n        onResetAnimationEnd,\n        onResetAnimationStart,\n        onTypingAnimationEnd,\n        onTypingAnimationStart,\n        resetDelay,\n        resetSpeed,\n        shouldStopAnimation,\n        shouldUseResetAnimation,\n        shouldWaitForContent,\n        speed,\n        startDelay,\n        textContent.length,\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={colorScheme?.designSettings?.color}\n                              colorMode={colorScheme?.designSettings?.colorMode}\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    }, [\n        colorScheme?.designSettings?.color,\n        colorScheme?.designSettings?.colorMode,\n        functions,\n        pseudoChildren,\n        shouldUseAnimationHeight,\n        shownCharCount,\n        textContent,\n        values,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledTypewriter\n                $cursorType={cursorType}\n                onClick={isAnimatingText ? handleClick : undefined}\n                $isAnimatingText={isAnimatingText}\n                $shouldHideCursor={shouldHideCursor}\n                $shouldPreventBlinkAnimation={shouldPreventBlinkingCursor}\n            >\n                {isAnimatingText ? (\n                    <AnimatedTypewriterText\n                        shouldHideCursor={shouldHideCursor}\n                        shouldRemainSingleLine={shouldRemainSingleLine}\n                        shownText={shownText}\n                        textStyle={textStyle}\n                    />\n                ) : (\n                    <StyledTypewriterText\n                        className=\"notranslate\"\n                        $shouldRemainSingleLine={shouldRemainSingleLine}\n                        dangerouslySetInnerHTML={\n                            typeof sortedChildren === 'string' ? { __html: shownText } : undefined\n                        }\n                        style={textStyle}\n                    >\n                        {typeof sortedChildren !== 'string' ? sortedChildren : undefined}\n                    </StyledTypewriterText>\n                )}\n                {isAnimatingText && (\n                    <StyledTypewriterPseudoText\n                        $isAnimatingText={isAnimatingText}\n                        $shouldHideCursor={shouldHideCursor}\n                        dangerouslySetInnerHTML={{ __html: pseudoTextHTML }}\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 a 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            cursorType,\n            handleClick,\n            hasRenderedChildrenOnce,\n            isAnimatingText,\n            pseudoTextHTML,\n            shouldHideCursor,\n            shouldPreventBlinkingCursor,\n            shouldRemainSingleLine,\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/AnimatedTypewriterText.js

@@ -24,13 +24,13 @@ const AnimatedTypewriterText = ({
       };
       const lastParentWithContent = traverseNodes(ref);
 
-      // Removes the cursor marker from the previous render.
+      // Removes lastWithContent class from all elements
       ref.classList.remove('typewriter-lastWithContent');
-      ref.querySelectorAll('.typewriter-lastWithContent').forEach(element => {
+      ref.querySelectorAll('.lastWithContent').forEach(element => {
         element.classList.remove('typewriter-lastWithContent');
       });
 
-      // Adds the cursor marker to the last element that still contains text.
+      // Adds lastWithContent class to the last element with content
       if (lastParentWithContent) {
         lastParentWithContent.classList.add('typewriter-lastWithContent');
       } else {

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

@@ -1 +1 @@
-{"version":3,"file":"AnimatedTypewriterText.js","names":["React","useCallback","useMemo","StyledTypewriterText","AnimatedTypewriterText","shouldHideCursor","shownText","shouldRemainSingleLine","textStyle","updateTypewriterCursor","ref","traverseNodes","node","nodeType","Node","TEXT_NODE","textContent","trim","parentElement","childNodes","Array","from","i","length","result","lastParentWithContent","classList","remove","querySelectorAll","forEach","element","add","createElement","dangerouslySetInnerHTML","__html","$shouldRemainSingleLine","style","$isAnimatingText"],"sources":["../../../../src/components/typewriter/AnimatedTypewriterText.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport { CSSPropertiesWithVars } from 'styled-components/dist/types';\nimport { StyledTypewriterText } from './Typewriter.styles';\n\ntype AnimatedTypewriterTextProps = {\n    shouldHideCursor: boolean;\n    shownText: string;\n    textStyle?: CSSPropertiesWithVars;\n    shouldRemainSingleLine: boolean;\n};\n\nconst AnimatedTypewriterText: FC<AnimatedTypewriterTextProps> = ({\n    shouldHideCursor,\n    shownText,\n    shouldRemainSingleLine,\n    textStyle,\n}) => {\n    const updateTypewriterCursor = useCallback(\n        (ref: HTMLSpanElement | null) => {\n            if (ref && !shouldHideCursor) {\n                // Finds the last text node with content.\n                const traverseNodes = (node: Node): HTMLElement | null => {\n                    if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {\n                        return node.parentElement;\n                    }\n\n                    const childNodes = Array.from(node.childNodes);\n                    for (let i = childNodes.length - 1; i >= 0; i--) {\n                        const result = traverseNodes(childNodes[i] as Node);\n                        if (result) {\n                            return result;\n                        }\n                    }\n\n                    return null;\n                };\n\n                const lastParentWithContent = traverseNodes(ref);\n\n                // Removes the cursor marker from the previous render.\n                ref.classList.remove('typewriter-lastWithContent');\n                ref.querySelectorAll('.typewriter-lastWithContent').forEach((element) => {\n                    element.classList.remove('typewriter-lastWithContent');\n                });\n\n                // Adds the cursor marker to the last element that still contains text.\n                if (lastParentWithContent) {\n                    lastParentWithContent.classList.add('typewriter-lastWithContent');\n                } else {\n                    ref.classList.add('typewriter-lastWithContent');\n                }\n            }\n        },\n        [shouldHideCursor],\n    );\n\n    return useMemo(\n        () => (\n            <StyledTypewriterText\n                ref={(ref) => updateTypewriterCursor(ref)}\n                dangerouslySetInnerHTML={{ __html: shownText }}\n                $shouldRemainSingleLine={shouldRemainSingleLine}\n                style={textStyle}\n                $isAnimatingText\n            />\n        ),\n        [shownText, shouldRemainSingleLine, textStyle, updateTypewriterCursor],\n    );\n};\n\nexport default AnimatedTypewriterText;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAEvD,SAASC,oBAAoB,QAAQ,qBAAqB;AAS1D,MAAMC,sBAAuD,GAAGA,CAAC;EAC7DC,gBAAgB;EAChBC,SAAS;EACTC,sBAAsB;EACtBC;AACJ,CAAC,KAAK;EACF,MAAMC,sBAAsB,GAAGR,WAAW,CACrCS,GAA2B,IAAK;IAC7B,IAAIA,GAAG,IAAI,CAACL,gBAAgB,EAAE;MAC1B;MACA,MAAMM,aAAa,GAAIC,IAAU,IAAyB;QACtD,IAAIA,IAAI,CAACC,QAAQ,KAAKC,IAAI,CAACC,SAAS,IAAIH,IAAI,CAACI,WAAW,EAAEC,IAAI,CAAC,CAAC,EAAE;UAC9D,OAAOL,IAAI,CAACM,aAAa;QAC7B;QAEA,MAAMC,UAAU,GAAGC,KAAK,CAACC,IAAI,CAACT,IAAI,CAACO,UAAU,CAAC;QAC9C,KAAK,IAAIG,CAAC,GAAGH,UAAU,CAACI,MAAM,GAAG,CAAC,EAAED,CAAC,IAAI,CAAC,EAAEA,CAAC,EAAE,EAAE;UAC7C,MAAME,MAAM,GAAGb,aAAa,CAACQ,UAAU,CAACG,CAAC,CAAS,CAAC;UACnD,IAAIE,MAAM,EAAE;YACR,OAAOA,MAAM;UACjB;QACJ;QAEA,OAAO,IAAI;MACf,CAAC;MAED,MAAMC,qBAAqB,GAAGd,aAAa,CAACD,GAAG,CAAC;;MAEhD;MACAA,GAAG,CAACgB,SAAS,CAACC,MAAM,CAAC,4BAA4B,CAAC;MAClDjB,GAAG,CAACkB,gBAAgB,CAAC,6BAA6B,CAAC,CAACC,OAAO,CAAEC,OAAO,IAAK;QACrEA,OAAO,CAACJ,SAAS,CAACC,MAAM,CAAC,4BAA4B,CAAC;MAC1D,CAAC,CAAC;;MAEF;MACA,IAAIF,qBAAqB,EAAE;QACvBA,qBAAqB,CAACC,SAAS,CAACK,GAAG,CAAC,4BAA4B,CAAC;MACrE,CAAC,MAAM;QACHrB,GAAG,CAACgB,SAAS,CAACK,GAAG,CAAC,4BAA4B,CAAC;MACnD;IACJ;EACJ,CAAC,EACD,CAAC1B,gBAAgB,CACrB,CAAC;EAED,OAAOH,OAAO,CACV,mBACIF,KAAA,CAAAgC,aAAA,CAAC7B,oBAAoB;IACjBO,GAAG,EAAGA,GAAG,IAAKD,sBAAsB,CAACC,GAAG,CAAE;IAC1CuB,uBAAuB,EAAE;MAAEC,MAAM,EAAE5B;IAAU,CAAE;IAC/C6B,uBAAuB,EAAE5B,sBAAuB;IAChD6B,KAAK,EAAE5B,SAAU;IACjB6B,gBAAgB;EAAA,CACnB,CACJ,EACD,CAAC/B,SAAS,EAAEC,sBAAsB,EAAEC,SAAS,EAAEC,sBAAsB,CACzE,CAAC;AACL,CAAC;AAED,eAAeL,sBAAsB","ignoreList":[]}
+{"version":3,"file":"AnimatedTypewriterText.js","names":["React","useCallback","useMemo","StyledTypewriterText","AnimatedTypewriterText","shouldHideCursor","shownText","shouldRemainSingleLine","textStyle","updateTypewriterCursor","ref","traverseNodes","node","nodeType","Node","TEXT_NODE","textContent","trim","parentElement","childNodes","Array","from","i","length","result","lastParentWithContent","classList","remove","querySelectorAll","forEach","element","add","createElement","dangerouslySetInnerHTML","__html","$shouldRemainSingleLine","style","$isAnimatingText"],"sources":["../../../../src/components/typewriter/AnimatedTypewriterText.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport { CSSPropertiesWithVars } from 'styled-components/dist/types';\nimport { StyledTypewriterText } from './Typewriter.styles';\n\ntype AnimatedTypewriterTextProps = {\n    shouldHideCursor: boolean;\n    shownText: string;\n    textStyle?: CSSPropertiesWithVars;\n    shouldRemainSingleLine: boolean;\n};\n\nconst AnimatedTypewriterText: FC<AnimatedTypewriterTextProps> = ({\n    shouldHideCursor,\n    shownText,\n    shouldRemainSingleLine,\n    textStyle,\n}) => {\n    const updateTypewriterCursor = useCallback(\n        (ref: HTMLSpanElement | null) => {\n            if (ref && !shouldHideCursor) {\n                // Finds the last text node with content.\n                const traverseNodes = (node: Node): HTMLElement | null => {\n                    if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {\n                        return node.parentElement;\n                    }\n\n                    const childNodes = Array.from(node.childNodes);\n                    for (let i = childNodes.length - 1; i >= 0; i--) {\n                        const result = traverseNodes(childNodes[i] as Node);\n                        if (result) {\n                            return result;\n                        }\n                    }\n\n                    return null;\n                };\n\n                const lastParentWithContent = traverseNodes(ref);\n\n                // Removes lastWithContent class from all elements\n                ref.classList.remove('typewriter-lastWithContent');\n                ref.querySelectorAll('.lastWithContent').forEach((element) => {\n                    element.classList.remove('typewriter-lastWithContent');\n                });\n\n                // Adds lastWithContent class to the last element with content\n                if (lastParentWithContent) {\n                    lastParentWithContent.classList.add('typewriter-lastWithContent');\n                } else {\n                    ref.classList.add('typewriter-lastWithContent');\n                }\n            }\n        },\n        [shouldHideCursor],\n    );\n\n    return useMemo(\n        () => (\n            <StyledTypewriterText\n                ref={(ref) => updateTypewriterCursor(ref)}\n                dangerouslySetInnerHTML={{ __html: shownText }}\n                $shouldRemainSingleLine={shouldRemainSingleLine}\n                style={textStyle}\n                $isAnimatingText\n            />\n        ),\n        [shownText, shouldRemainSingleLine, textStyle, updateTypewriterCursor],\n    );\n};\n\nexport default AnimatedTypewriterText;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAEvD,SAASC,oBAAoB,QAAQ,qBAAqB;AAS1D,MAAMC,sBAAuD,GAAGA,CAAC;EAC7DC,gBAAgB;EAChBC,SAAS;EACTC,sBAAsB;EACtBC;AACJ,CAAC,KAAK;EACF,MAAMC,sBAAsB,GAAGR,WAAW,CACrCS,GAA2B,IAAK;IAC7B,IAAIA,GAAG,IAAI,CAACL,gBAAgB,EAAE;MAC1B;MACA,MAAMM,aAAa,GAAIC,IAAU,IAAyB;QACtD,IAAIA,IAAI,CAACC,QAAQ,KAAKC,IAAI,CAACC,SAAS,IAAIH,IAAI,CAACI,WAAW,EAAEC,IAAI,CAAC,CAAC,EAAE;UAC9D,OAAOL,IAAI,CAACM,aAAa;QAC7B;QAEA,MAAMC,UAAU,GAAGC,KAAK,CAACC,IAAI,CAACT,IAAI,CAACO,UAAU,CAAC;QAC9C,KAAK,IAAIG,CAAC,GAAGH,UAAU,CAACI,MAAM,GAAG,CAAC,EAAED,CAAC,IAAI,CAAC,EAAEA,CAAC,EAAE,EAAE;UAC7C,MAAME,MAAM,GAAGb,aAAa,CAACQ,UAAU,CAACG,CAAC,CAAS,CAAC;UACnD,IAAIE,MAAM,EAAE;YACR,OAAOA,MAAM;UACjB;QACJ;QAEA,OAAO,IAAI;MACf,CAAC;MAED,MAAMC,qBAAqB,GAAGd,aAAa,CAACD,GAAG,CAAC;;MAEhD;MACAA,GAAG,CAACgB,SAAS,CAACC,MAAM,CAAC,4BAA4B,CAAC;MAClDjB,GAAG,CAACkB,gBAAgB,CAAC,kBAAkB,CAAC,CAACC,OAAO,CAAEC,OAAO,IAAK;QAC1DA,OAAO,CAACJ,SAAS,CAACC,MAAM,CAAC,4BAA4B,CAAC;MAC1D,CAAC,CAAC;;MAEF;MACA,IAAIF,qBAAqB,EAAE;QACvBA,qBAAqB,CAACC,SAAS,CAACK,GAAG,CAAC,4BAA4B,CAAC;MACrE,CAAC,MAAM;QACHrB,GAAG,CAACgB,SAAS,CAACK,GAAG,CAAC,4BAA4B,CAAC;MACnD;IACJ;EACJ,CAAC,EACD,CAAC1B,gBAAgB,CACrB,CAAC;EAED,OAAOH,OAAO,CACV,mBACIF,KAAA,CAAAgC,aAAA,CAAC7B,oBAAoB;IACjBO,GAAG,EAAGA,GAAG,IAAKD,sBAAsB,CAACC,GAAG,CAAE;IAC1CuB,uBAAuB,EAAE;MAAEC,MAAM,EAAE5B;IAAU,CAAE;IAC/C6B,uBAAuB,EAAE5B,sBAAuB;IAChD6B,KAAK,EAAE5B,SAAU;IACjB6B,gBAAgB;EAAA,CACnB,CACJ,EACD,CAAC/B,SAAS,EAAEC,sBAAsB,EAAEC,SAAS,EAAEC,sBAAsB,CACzE,CAAC;AACL,CAAC;AAED,eAAeL,sBAAsB","ignoreList":[]}

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

@@ -8,7 +8,6 @@ import { TypewriterDelay, TypewriterSpeed } from '../../types/speed';
 import AnimatedTypewriterText from './AnimatedTypewriterText';
 import { StyledTypewriter, StyledTypewriterPseudoText, StyledTypewriterText } from './Typewriter.styles';
 import { calculateAutoSpeed, getCharactersCount, getSubTextFromHTML, shuffleArray, updateChunkStreamingSpeedEMA } from './utils';
-import useTypewriterAnimation from './useTypewriterAnimation';
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 const Typewriter = ({
   children,
@@ -38,6 +37,9 @@ const Typewriter = ({
 }) => {
   const [currentChildrenIndex, setCurrentChildrenIndex] = useState(0);
   const [hasRenderedChildrenOnce, setHasRenderedChildrenOnce] = useState(false);
+  const [shouldPreventBlinkingCursor, setShouldPreventBlinkingCursor] = useState(false);
+  const [isResetAnimationActive, setIsResetAnimationActive] = useState(false);
+  const [shouldStopAnimation, setShouldStopAnimation] = useState(false);
   const autoSpeed = useRef();
   const autoSteps = useRef(animationSteps);
   const functions = useFunctions();
@@ -95,6 +97,8 @@ const Typewriter = ({
     lastLength: charactersCount,
     ema: charactersCount / (autoSpeedBaseFactor / 1000)
   });
+  const [shownCharCount, setShownCharCount] = useState(charactersCount > 0 ? 0 : textContent.length);
+  const currentPosition = useRef(0);
   useEffect(() => {
     if (shouldUseResetAnimation) {
       chunkIntervalExponentialMovingAverage.current = {
@@ -120,38 +124,100 @@ const Typewriter = ({
     autoSpeed.current = calculatedAutoSpeed;
     autoSteps.current = steps;
   }, [animationSteps, charactersCount, shouldCalcAutoSpeed]);
-  const handleSetNextChildrenIndex = useCallback(() => {
-    setCurrentChildrenIndex(prevIndex => {
-      const nextIndex = prevIndex + 1;
-      return nextIndex > childrenCount - 1 ? 0 : nextIndex;
-    });
-  }, [childrenCount]);
-  const {
-    handleClick,
-    isResetAnimationActive,
-    shownCharCount,
-    shouldPreventBlinkingCursor
-  } = useTypewriterAnimation({
-    areMultipleChildrenGiven,
-    autoSpeedRef: autoSpeed,
-    autoStepsRef: autoSteps,
-    charactersCount,
-    cursorType,
-    nextTextDelay,
-    onAdvanceText: handleSetNextChildrenIndex,
-    onResetAnimationEnd,
-    onResetAnimationStart,
-    onTypingAnimationEnd,
-    onTypingAnimationStart,
-    resetDelay,
-    resetSpeed,
-    shouldUseResetAnimation,
-    shouldWaitForContent,
-    speed,
-    startDelay,
-    textContentLength: textContent.length
-  });
   const isAnimatingText = shownCharCount < textContent.length || shouldForceCursorAnimation || areMultipleChildrenGiven || textContent.length === 0;
+  const handleClick = useCallback(event => {
+    event.stopPropagation();
+    event.preventDefault();
+    setShouldStopAnimation(true);
+  }, []);
+  const handleSetNextChildrenIndex = useCallback(() => setCurrentChildrenIndex(() => {
+    let newIndex = currentChildrenIndex + 1;
+    if (newIndex > childrenCount - 1) {
+      newIndex = 0;
+    }
+    return newIndex;
+  }), [childrenCount, currentChildrenIndex]);
+  useEffect(() => {
+    let interval;
+    if (shouldStopAnimation || charactersCount === 0) {
+      setShownCharCount(textContent.length);
+      currentPosition.current = textContent.length;
+    } else if (isResetAnimationActive) {
+      if (typeof onResetAnimationStart === 'function') {
+        onResetAnimationStart();
+      }
+      interval = window.setInterval(() => {
+        setShownCharCount(prevState => {
+          const nextState = prevState - autoSteps.current;
+          currentPosition.current = nextState;
+          if (nextState === 0) {
+            window.clearInterval(interval);
+            if (typeof onResetAnimationEnd === 'function') {
+              onResetAnimationEnd();
+            }
+            if (areMultipleChildrenGiven) {
+              setTimeout(() => {
+                setIsResetAnimationActive(false);
+                handleSetNextChildrenIndex();
+              }, nextTextDelay);
+            }
+          }
+          return nextState;
+        });
+      }, resetSpeed);
+    } else {
+      const startTypingAnimation = () => {
+        if (cursorType === CursorType.Thin) {
+          setShouldPreventBlinkingCursor(true);
+        }
+        if (typeof onTypingAnimationStart === 'function') {
+          onTypingAnimationStart();
+        }
+        const runTypingInterval = () => {
+          setShownCharCount(prevState => {
+            let nextState = Math.min(prevState + autoSteps.current, charactersCount);
+            if (nextState >= charactersCount && !shouldWaitForContent) {
+              window.clearInterval(interval);
+              if (cursorType === CursorType.Thin) {
+                setShouldPreventBlinkingCursor(false);
+              }
+              if (typeof onTypingAnimationEnd === 'function') {
+                onTypingAnimationEnd();
+              }
+
+              /**
+               * At this point, the next value for "shownCharCount" is deliberately set to
+               * the length of the textContent 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);
+              }
+            }
+            currentPosition.current = nextState;
+            return nextState;
+          });
+        };
+        interval = window.setInterval(runTypingInterval, autoSpeed.current ?? speed);
+      };
+      if (startDelay) {
+        setTimeout(startTypingAnimation, startDelay);
+      } else {
+        startTypingAnimation();
+      }
+    }
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [areMultipleChildrenGiven, autoSteps, charactersCount, cursorType, handleSetNextChildrenIndex, isResetAnimationActive, nextTextDelay, onResetAnimationEnd, onResetAnimationStart, onTypingAnimationEnd, onTypingAnimationStart, resetDelay, resetSpeed, shouldStopAnimation, shouldUseResetAnimation, shouldWaitForContent, speed, startDelay, textContent.length]);
   useEffect(() => {
     if (!isAnimatingText && typeof onFinish === 'function') {
       onFinish();