@chayns-components/typewriter 5.0.0-beta.90 → 5.0.0-beta.901

package/README.md

@@ -4,8 +4,8 @@
     </h1>
     <p>A set of beautiful React components for developing your own applications with chayns.</p>
     <div>
-        <img src="https://img.shields.io/npm/dm/@chayns-components/typewriter.svg?style=for-the-badge" alt="" />
-        <img src="https://img.shields.io/npm/v/@chayns-components/typewriter?style=for-the-badge" alt="" />
+        <img src="https://img.shields.io/npm/dm/@chayns-components/core.svg?style=for-the-badge" alt="" />
+        <img src="https://img.shields.io/npm/v/@chayns-components/core?style=for-the-badge" alt="" />
         <img src="https://img.shields.io/github/license/TobitSoftware/chayns-components?style=for-the-badge" alt="" />
         <img src="https://img.shields.io/github/contributors/TobitSoftware/chayns-components?style=for-the-badge" alt="" />
     </div>
@@ -15,7 +15,7 @@
 
 ## Installation
 
-First you need to install the typewriter part of the chayns-components.
+First you need to install the core part of the chayns-components.
 
 ```bash
 # NPM
@@ -31,15 +31,4 @@ yarn add @chayns-components/typewriter
 
 ## Usage
 
-You can use the components in your project as in the following example.
-
-```typescript jsx
-import { Typewriter } from '@chayns-components/typewriter';
-
-<Typewriter>
-    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
-    ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
-    dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor
-    sit amet.
-</Typewriter>;
-```
+For detailed usage visit the [storybook](https://components.chayns.site/storybook).

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

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Typewriter = require("./Typewriter.styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const AnimatedTypewriterText = ({
+  shouldHideCursor,
+  shownText,
+  textStyle
+}) => {
+  const updateTypewriterCursor = (0, _react.useCallback)(ref => {
+    if (ref && !shouldHideCursor) {
+      // Finds the last text node with content.
+      const traverseNodes = node => {
+        var _node$textContent;
+        if (node.nodeType === Node.TEXT_NODE && (_node$textContent = node.textContent) !== null && _node$textContent !== void 0 && _node$textContent.trim()) {
+          return node.parentElement;
+        }
+        const childNodes = Array.from(node.childNodes);
+        for (let i = childNodes.length - 1; i >= 0; i--) {
+          const result = traverseNodes(childNodes[i]);
+          if (result) {
+            return result;
+          }
+        }
+        return null;
+      };
+      const lastParentWithContent = traverseNodes(ref);
+
+      // Removes lastWithContent class from all elements
+      ref.classList.remove('typewriter-lastWithContent');
+      ref.querySelectorAll('.lastWithContent').forEach(element => {
+        element.classList.remove('typewriter-lastWithContent');
+      });
+
+      // Adds lastWithContent class to the last element with content
+      if (lastParentWithContent) {
+        lastParentWithContent.classList.add('typewriter-lastWithContent');
+      } else {
+        ref.classList.add('typewriter-lastWithContent');
+      }
+    }
+  }, [shouldHideCursor]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriterText, {
+    ref: ref => updateTypewriterCursor(ref),
+    dangerouslySetInnerHTML: {
+      __html: shownText
+    },
+    style: textStyle,
+    $isAnimatingText: true
+  }), [updateTypewriterCursor, shownText, textStyle]);
+};
+var _default = exports.default = AnimatedTypewriterText;
+//# sourceMappingURL=AnimatedTypewriterText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedTypewriterText.js","names":["_react","_interopRequireWildcard","require","_Typewriter","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","AnimatedTypewriterText","shouldHideCursor","shownText","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","style","$isAnimatingText","_default","exports"],"sources":["../../../../src/components/typewriter/AnimatedTypewriterText.tsx"],"sourcesContent":["import React, {FC, useCallback, useEffect, useMemo, useRef} from 'react';\nimport {StyledTypewriterText} from \"./Typewriter.styles\";\n\ntype AnimatedTypewriterTextProps = {\n    shouldHideCursor: boolean;\n    shownText: string;\n    textStyle?: React.CSSProperties;\n};\n\nconst AnimatedTypewriterText: FC<AnimatedTypewriterTextProps> = ({\n    shouldHideCursor,\n    shownText,\n    textStyle\n}) => {\n    const updateTypewriterCursor = useCallback((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    }, [shouldHideCursor]);\n\n    return useMemo(() => (\n        <StyledTypewriterText\n            ref={(ref) => updateTypewriterCursor(ref)}\n            dangerouslySetInnerHTML={{ __html: shownText }}\n            style={textStyle}\n            $isAnimatingText\n        />\n    ), [updateTypewriterCursor, shownText, textStyle]);\n};\n\nexport default AnimatedTypewriterText;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,229 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TypewriterSpeed = exports.TypewriterDelay = void 0;
+var _core = require("@chayns-components/core");
+var _chaynsApi = require("chayns-api");
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _server = require("react-dom/server");
+var _Typewriter = require("./Typewriter.styles");
+var _utils = require("./utils");
+var _AnimatedTypewriterText = _interopRequireDefault(require("./AnimatedTypewriterText"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
+
+// noinspection JSUnusedGlobalSymbols
+let TypewriterDelay = exports.TypewriterDelay = /*#__PURE__*/function (TypewriterDelay) {
+  TypewriterDelay[TypewriterDelay["ExtraSlow"] = 4000] = "ExtraSlow";
+  TypewriterDelay[TypewriterDelay["Slow"] = 2000] = "Slow";
+  TypewriterDelay[TypewriterDelay["Medium"] = 1000] = "Medium";
+  TypewriterDelay[TypewriterDelay["Fast"] = 500] = "Fast";
+  TypewriterDelay[TypewriterDelay["ExtraFast"] = 250] = "ExtraFast";
+  TypewriterDelay[TypewriterDelay["None"] = 0] = "None";
+  return TypewriterDelay;
+}({}); // noinspection JSUnusedGlobalSymbols
+let TypewriterSpeed = exports.TypewriterSpeed = /*#__PURE__*/function (TypewriterSpeed) {
+  TypewriterSpeed[TypewriterSpeed["ExtraSlow"] = 40] = "ExtraSlow";
+  TypewriterSpeed[TypewriterSpeed["Slow"] = 20] = "Slow";
+  TypewriterSpeed[TypewriterSpeed["Medium"] = 10] = "Medium";
+  TypewriterSpeed[TypewriterSpeed["Fast"] = 5] = "Fast";
+  TypewriterSpeed[TypewriterSpeed["ExtraFast"] = 2.5] = "ExtraFast";
+  return TypewriterSpeed;
+}({});
+const Typewriter = ({
+  children,
+  nextTextDelay = TypewriterDelay.Medium,
+  onFinish,
+  pseudoChildren,
+  resetDelay = TypewriterDelay.Medium,
+  shouldForceCursorAnimation = false,
+  shouldHideCursor = false,
+  shouldSortChildrenRandomly = false,
+  shouldUseAnimationHeight = false,
+  shouldUseResetAnimation = false,
+  shouldWaitForContent,
+  speed = TypewriterSpeed.Medium,
+  startDelay = TypewriterDelay.None,
+  textStyle
+}) => {
+  const [currentChildrenIndex, setCurrentChildrenIndex] = (0, _react.useState)(0);
+  const [hasRenderedChildrenOnce, setHasRenderedChildrenOnce] = (0, _react.useState)(false);
+  const functions = (0, _chaynsApi.useFunctions)();
+  const values = (0, _chaynsApi.useValues)();
+  useIsomorphicLayoutEffect(() => {
+    if (children) {
+      setHasRenderedChildrenOnce(false);
+    }
+  }, [children]);
+  (0, _react.useEffect)(() => {
+    if (!hasRenderedChildrenOnce) {
+      setHasRenderedChildrenOnce(true);
+    }
+  }, [hasRenderedChildrenOnce]);
+  const sortedChildren = (0, _react.useMemo)(() => Array.isArray(children) && shouldSortChildrenRandomly ? (0, _utils.shuffleArray)(children) : children, [children, shouldSortChildrenRandomly]);
+  const areMultipleChildrenGiven = Array.isArray(sortedChildren);
+  const childrenCount = areMultipleChildrenGiven ? sortedChildren.length : 1;
+  const textContent = (0, _react.useMemo)(() => {
+    if (areMultipleChildrenGiven) {
+      const currentChildren = sortedChildren[currentChildrenIndex];
+      if (currentChildren) {
+        return /*#__PURE__*/_react.default.isValidElement(currentChildren) ? (0, _server.renderToString)(/*#__PURE__*/_react.default.createElement(_chaynsApi.ChaynsProvider, {
+          data: values,
+          functions: functions,
+          isModule: true
+        }, /*#__PURE__*/_react.default.createElement(_core.ColorSchemeProvider, {
+          color: "#005EB8",
+          colorMode: 0,
+          style: {
+            display: 'inline'
+          }
+        }, currentChildren))) : currentChildren;
+      }
+      return '';
+    }
+    return /*#__PURE__*/_react.default.isValidElement(sortedChildren) ? (0, _server.renderToString)(/*#__PURE__*/_react.default.createElement(_chaynsApi.ChaynsProvider, {
+      data: values,
+      functions: functions,
+      isModule: true
+    }, /*#__PURE__*/_react.default.createElement(_core.ColorSchemeProvider, {
+      color: "#005EB8",
+      colorMode: 0,
+      style: {
+        display: 'inline'
+      }
+    }, sortedChildren))) : sortedChildren;
+  }, [areMultipleChildrenGiven, currentChildrenIndex, functions, sortedChildren, values]);
+  const charactersCount = (0, _react.useMemo)(() => (0, _utils.getCharactersCount)(textContent), [textContent]);
+  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 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);
+    } else if (isResetAnimationActive) {
+      interval = window.setInterval(() => {
+        setShownCharCount(prevState => {
+          const nextState = prevState - 1;
+          if (nextState === 0) {
+            window.clearInterval(interval);
+            if (areMultipleChildrenGiven) {
+              setTimeout(() => {
+                setIsResetAnimationActive(false);
+                handleSetNextChildrenIndex();
+              }, nextTextDelay);
+            }
+          }
+          return nextState;
+        });
+      }, speed);
+    } else {
+      const setInterval = () => {
+        interval = window.setInterval(() => {
+          setShownCharCount(prevState => {
+            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);
+              }
+            }
+            return nextState;
+          });
+        }, speed);
+      };
+      if (startDelay) {
+        setTimeout(setInterval, startDelay);
+      } else {
+        setInterval();
+      }
+    }
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [speed, resetDelay, childrenCount, charactersCount, textContent.length, shouldStopAnimation, shouldWaitForContent, isResetAnimationActive, shouldUseResetAnimation, areMultipleChildrenGiven, handleSetNextChildrenIndex, nextTextDelay, startDelay]);
+  (0, _react.useEffect)(() => {
+    if (!isAnimatingText && typeof onFinish === 'function') {
+      onFinish();
+    }
+  }, [isAnimatingText, onFinish]);
+  const shownText = (0, _react.useMemo)(() => (0, _utils.getSubTextFromHTML)(textContent, shownCharCount), [shownCharCount, textContent]);
+  const pseudoTextHTML = (0, _react.useMemo)(() => {
+    if (pseudoChildren) {
+      const pseudoText = /*#__PURE__*/_react.default.isValidElement(pseudoChildren) ? (0, _server.renderToString)(/*#__PURE__*/_react.default.createElement(_chaynsApi.ChaynsProvider, {
+        data: values,
+        functions: functions,
+        isModule: true
+      }, /*#__PURE__*/_react.default.createElement(_core.ColorSchemeProvider, {
+        color: "#005EB8",
+        colorMode: 0,
+        style: {
+          display: 'inline'
+        }
+      }, pseudoChildren))) : pseudoChildren;
+      if (shouldUseAnimationHeight) {
+        return (0, _utils.getSubTextFromHTML)(pseudoText, shownCharCount);
+      }
+      return pseudoText;
+    }
+    if (shouldUseAnimationHeight && textContent) {
+      return (0, _utils.getSubTextFromHTML)(textContent, shownCharCount);
+    }
+    return textContent || '&#8203;';
+  }, [functions, pseudoChildren, shouldUseAnimationHeight, shownCharCount, textContent, values]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriter, {
+    onClick: isAnimatingText ? handleClick : undefined,
+    $isAnimatingText: isAnimatingText,
+    $shouldHideCursor: shouldHideCursor
+  }, isAnimatingText ? /*#__PURE__*/_react.default.createElement(_AnimatedTypewriterText.default, {
+    shouldHideCursor: shouldHideCursor,
+    shownText: shownText,
+    textStyle: textStyle
+  }) : /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriterText, {
+    style: textStyle
+  }, sortedChildren), isAnimatingText && /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriterPseudoText, {
+    dangerouslySetInnerHTML: {
+      __html: pseudoTextHTML
+    }
+  }), !hasRenderedChildrenOnce && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: 'absolute',
+      visibility: 'hidden'
+    }
+  }, children), document.body)), [children, handleClick, hasRenderedChildrenOnce, isAnimatingText, pseudoTextHTML, shouldHideCursor, shownText, sortedChildren, textStyle]);
+};
+Typewriter.displayName = 'Typewriter';
+var _default = exports.default = Typewriter;
+//# sourceMappingURL=Typewriter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Typewriter.js","names":["_core","require","_chaynsApi","_react","_interopRequireWildcard","_reactDom","_server","_Typewriter","_utils","_AnimatedTypewriterText","_interopRequireDefault","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","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","event","stopPropagation","preventDefault","handleSetNextChildrenIndex","newIndex","interval","setInterval","prevState","nextState","clearInterval","setTimeout","Math","min","shownText","getSubTextFromHTML","pseudoTextHTML","pseudoText","StyledTypewriter","onClick","undefined","$isAnimatingText","$shouldHideCursor","StyledTypewriterText","StyledTypewriterPseudoText","dangerouslySetInnerHTML","__html","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    useRef,\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';\nimport AnimatedTypewriterText from \"./AnimatedTypewriterText\";\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((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        } 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            const setInterval = () => {\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            };\n\n            if (startDelay) {\n                setTimeout(setInterval, startDelay);\n            } else {\n                setInterval();\n            }\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\n                onClick={isAnimatingText ? handleClick : undefined}\n                $isAnimatingText={isAnimatingText}\n                $shouldHideCursor={shouldHideCursor}\n            >\n                {isAnimatingText ? (\n                    <AnimatedTypewriterText\n                        shouldHideCursor={shouldHideCursor}\n                        shownText={shownText}\n                        textStyle={textStyle}\n                    />\n                ) : (\n                    <StyledTypewriterText style={textStyle}>{sortedChildren}</StyledTypewriterText>\n                )}\n                {isAnimatingText && (\n                    <StyledTypewriterPseudoText\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 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/cjs/components/typewriter/Typewriter.styles.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledTypewriterText = exports.StyledTypewriterPseudoText = exports.StyledTypewriter = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const typewriterCursorElement = ({
+  $isAnimatingText,
+  $shouldHideCursor
+}) => $isAnimatingText && !$shouldHideCursor && (0, _styledComponents.css)`
+      .typewriter-lastWithContent {
+        &:after {
+          animation: ${blinkAnimation} 1s steps(2, start) infinite;
+          color: ${({
+  theme
+}) => theme.text};
+          content: '▋';
+          margin-left: 0.25rem;
+          opacity: 0.85;
+          position: relative;
+          vertical-align: baseline;
+        }
+      }
+    `;
+const StyledTypewriter = exports.StyledTypewriter = _styledComponents.default.div`
+    align-items: inherit;
+    display: flex;
+    position: relative;
+    width: 100%;
+    ${typewriterCursorElement}
+`;
+const blinkAnimation = (0, _styledComponents.keyframes)`
+  100% {
+    visibility: hidden;
+  }
+`;
+const StyledTypewriterPseudoText = exports.StyledTypewriterPseudoText = _styledComponents.default.span`
+    opacity: 0;
+    pointer-events: none;
+    user-select: none;
+    width: 100%;
+`;
+const StyledTypewriterText = exports.StyledTypewriterText = _styledComponents.default.span`
+    color: inherit;
+    position: ${({
+  $isAnimatingText
+}) => $isAnimatingText ? 'absolute' : 'relative'};
+    width: 100%;
+
+    ${({
+  $isAnimatingText
+}) => $isAnimatingText && (0, _styledComponents.css)`
+            pointer-events: none;
+        `}
+`;
+//# sourceMappingURL=Typewriter.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Typewriter.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","typewriterCursorElement","$isAnimatingText","$shouldHideCursor","css","blinkAnimation","theme","text","StyledTypewriter","exports","styled","div","keyframes","StyledTypewriterPseudoText","span","StyledTypewriterText"],"sources":["../../../../src/components/typewriter/Typewriter.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled, { css, keyframes } from 'styled-components';\n\nconst typewriterCursorElement = ({\n    $isAnimatingText,\n    $shouldHideCursor,\n}: {\n    $isAnimatingText?: boolean;\n    $shouldHideCursor?: boolean;\n}) =>\n    $isAnimatingText &&\n    !$shouldHideCursor &&\n    css`\n      .typewriter-lastWithContent {\n        &:after {\n          animation: ${blinkAnimation} 1s steps(2, start) infinite;\n          color: ${({ theme }: StyledTypewriterTextProps) => theme.text};\n          content: '▋';\n          margin-left: 0.25rem;\n          opacity: 0.85;\n          position: relative;\n          vertical-align: baseline;\n        }\n      }\n    `;\n\ntype StyledTypewriterProps = WithTheme<{\n    $isAnimatingText?: boolean;\n    $shouldHideCursor?: boolean;\n}>;\n\nexport const StyledTypewriter = styled.div<StyledTypewriterProps>`\n    align-items: inherit;\n    display: flex;\n    position: relative;\n    width: 100%;\n    ${typewriterCursorElement}\n`;\n\nconst blinkAnimation = keyframes`\n  100% {\n    visibility: hidden;\n  }\n`;\n\nexport const StyledTypewriterPseudoText = styled.span`\n    opacity: 0;\n    pointer-events: none;\n    user-select: none;\n    width: 100%;\n`;\n\ntype StyledTypewriterTextProps = WithTheme<{\n    $isAnimatingText?: boolean;\n}>;\n\nexport const StyledTypewriterText = styled.span<StyledTypewriterTextProps>`\n    color: inherit;\n    position: ${({ $isAnimatingText }) => ($isAnimatingText ? 'absolute' : 'relative')};\n    width: 100%;\n\n    ${({ $isAnimatingText }) =>\n        $isAnimatingText &&\n        css`\n            pointer-events: none;\n        `}\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA2D,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAE3D,MAAMW,uBAAuB,GAAGA,CAAC;EAC7BC,gBAAgB;EAChBC;AAIJ,CAAC,KACGD,gBAAgB,IAChB,CAACC,iBAAiB,IAClB,IAAAC,qBAAG;AACP;AACA;AACA,uBAAuBC,cAAc;AACrC,mBAAmB,CAAC;EAAEC;AAAiC,CAAC,KAAKA,KAAK,CAACC,IAAI;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AAOE,MAAMC,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAGE,yBAAM,CAACC,GAA0B;AACjE;AACA;AACA;AACA;AACA,MAAMV,uBAAuB;AAC7B,CAAC;AAED,MAAMI,cAAc,GAAG,IAAAO,2BAAS;AAChC;AACA;AACA;AACA,CAAC;AAEM,MAAMC,0BAA0B,GAAAJ,OAAA,CAAAI,0BAAA,GAAGH,yBAAM,CAACI,IAAI;AACrD;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMC,oBAAoB,GAAAN,OAAA,CAAAM,oBAAA,GAAGL,yBAAM,CAACI,IAA+B;AAC1E;AACA,gBAAgB,CAAC;EAAEZ;AAAiB,CAAC,KAAMA,gBAAgB,GAAG,UAAU,GAAG,UAAW;AACtF;AACA;AACA,MAAM,CAAC;EAAEA;AAAiB,CAAC,KACnBA,gBAAgB,IAChB,IAAAE,qBAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}

package/lib/{components → cjs/components}/typewriter/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSubTextFromHTML = exports.getCharactersCount = void 0;
+exports.shuffleArray = exports.getSubTextFromHTML = exports.getCharactersCount = void 0;
 /**
  * This function extracts a part of the text from an HTML text. The HTML elements themselves are
  * returned in the result. In addition, the function ensures that the closing tag of the Bold HTML
@@ -20,7 +20,9 @@ const getSubTextFromHTML = (html, length) => {
   let text = '';
   let currLength = 0;
   const traverse = element => {
-    if (element.nodeType === 3 && typeof element.textContent === 'string') {
+    if (element.nodeName === 'TWIGNORE') {
+      text += element.innerHTML;
+    } else if (element.nodeType === 3 && typeof element.textContent === 'string') {
       const nodeText = element.textContent;
       if (currLength + nodeText.length <= length) {
         text += nodeText;
@@ -64,9 +66,15 @@ const getCharactersCount = html => {
   div.innerHTML = html;
   let count = 0;
   const traverse = node => {
-    if (node.nodeType === 3 && typeof node.textContent === 'string') {
+    if (node.nodeName === 'TWIGNORE') {
+      count += 1;
+    } else if (node.nodeType === 3 && typeof node.textContent === 'string') {
       count += node.textContent.trim().length;
     } else if (node.nodeType === 1) {
+      if (node.nodeName === 'CODE' && node.textContent !== null) {
+        count += node.textContent.length;
+        return;
+      }
       Array.from(node.childNodes).forEach(traverse);
     }
   };
@@ -74,4 +82,13 @@ const getCharactersCount = html => {
   return count;
 };
 exports.getCharactersCount = getCharactersCount;
+const shuffleArray = array => {
+  const result = Array.from(array);
+  for (let i = result.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [result[i], result[j]] = [result[j], result[i]];
+  }
+  return result;
+};
+exports.shuffleArray = shuffleArray;
 //# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["getSubTextFromHTML","html","length","div","document","createElement","innerHTML","text","currLength","traverse","element","nodeName","nodeType","textContent","nodeText","substring","toLowerCase","attributes","attribute","name","value","i","childNodes","childNode","exports","getCharactersCount","count","node","trim","Array","from","forEach","shuffleArray","array","result","j","Math","floor","random"],"sources":["../../../../src/components/typewriter/utils.ts"],"sourcesContent":["/**\n * This function extracts a part of the text from an HTML text. The HTML elements themselves are\n * returned in the result. In addition, the function ensures that the closing tag of the Bold HTML\n * element is also returned for text that is cut off in the middle of a Bold element, for example.\n *\n * @param html - The text from which a part should be taken\n * @param length - The length of the text to be extracted\n *\n * @return string - The text part with the specified length - additionally the HTML elements are added\n */\nexport const getSubTextFromHTML = (html: string, length: number): string => {\n    const div = document.createElement('div');\n\n    div.innerHTML = html;\n\n    let text = '';\n    let currLength = 0;\n\n    const traverse = (element: Element): boolean => {\n        if (element.nodeName === 'TWIGNORE') {\n            text += element.innerHTML;\n        } else if (element.nodeType === 3 && typeof element.textContent === 'string') {\n            const nodeText = element.textContent;\n\n            if (currLength + nodeText.length <= length) {\n                text += nodeText;\n                currLength += nodeText.length;\n            } else {\n                text += nodeText.substring(0, length - currLength);\n\n                return false;\n            }\n        } else if (element.nodeType === 1) {\n            const nodeName = element.nodeName.toLowerCase();\n\n            let attributes = '';\n\n            // @ts-expect-error: Type is correct here\n            // eslint-disable-next-line no-restricted-syntax\n            for (const attribute of element.attributes) {\n                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/restrict-template-expressions\n                attributes += ` ${attribute.name}=\"${attribute.value}\"`;\n            }\n\n            text += `<${nodeName}${attributes}>`;\n\n            for (let i = 0; i < element.childNodes.length; i++) {\n                const childNode = element.childNodes[i];\n\n                if (childNode && !traverse(childNode as Element)) {\n                    return false;\n                }\n            }\n\n            text += `</${nodeName}>`;\n        }\n\n        return true;\n    };\n\n    for (let i = 0; i < div.childNodes.length; i++) {\n        const childNode = div.childNodes[i];\n\n        if (childNode && !traverse(childNode as Element)) {\n            return text;\n        }\n    }\n\n    return text;\n};\n\nexport const getCharactersCount = (html: string): number => {\n    const div = document.createElement('div');\n\n    div.innerHTML = html;\n\n    let count = 0;\n\n    const traverse = (node: Node): void => {\n        if (node.nodeName === 'TWIGNORE') {\n            count += 1;\n        } else if (node.nodeType === 3 && typeof node.textContent === 'string') {\n            count += node.textContent.trim().length;\n        } else if (node.nodeType === 1) {\n            if (node.nodeName === 'CODE' && node.textContent !== null) {\n                count += node.textContent.length;\n\n                return;\n            }\n\n            Array.from(node.childNodes).forEach(traverse);\n        }\n    };\n\n    Array.from(div.childNodes).forEach(traverse);\n\n    return count;\n};\n\nexport const shuffleArray = <T>(array: T[]): T[] => {\n    const result = Array.from(array);\n\n    for (let i = result.length - 1; i > 0; i--) {\n        const j = Math.floor(Math.random() * (i + 1));\n\n        [result[i], result[j]] = [result[j]!, result[i]!];\n    }\n\n    return result;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Typewriter", {
+  enumerable: true,
+  get: function () {
+    return _Typewriter.default;
+  }
+});
+Object.defineProperty(exports, "TypewriterDelay", {
+  enumerable: true,
+  get: function () {
+    return _Typewriter.TypewriterDelay;
+  }
+});
+Object.defineProperty(exports, "TypewriterSpeed", {
+  enumerable: true,
+  get: function () {
+    return _Typewriter.TypewriterSpeed;
+  }
+});
+var _Typewriter = _interopRequireWildcard(require("./components/typewriter/Typewriter"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+//# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Typewriter","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set"],"sources":["../../src/index.ts"],"sourcesContent":["export {\n    default as Typewriter,\n    TypewriterDelay,\n    TypewriterSpeed,\n} from './components/typewriter/Typewriter';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,uBAAA,CAAAC,OAAA;AAI4C,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA","ignoreList":[]}

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

@@ -0,0 +1,51 @@
+import React, { useCallback, useMemo } from 'react';
+import { StyledTypewriterText } from "./Typewriter.styles";
+const AnimatedTypewriterText = _ref => {
+  let {
+    shouldHideCursor,
+    shownText,
+    textStyle
+  } = _ref;
+  const updateTypewriterCursor = useCallback(ref => {
+    if (ref && !shouldHideCursor) {
+      // Finds the last text node with content.
+      const traverseNodes = node => {
+        if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
+          return node.parentElement;
+        }
+        const childNodes = Array.from(node.childNodes);
+        for (let i = childNodes.length - 1; i >= 0; i--) {
+          const result = traverseNodes(childNodes[i]);
+          if (result) {
+            return result;
+          }
+        }
+        return null;
+      };
+      const lastParentWithContent = traverseNodes(ref);
+
+      // Removes lastWithContent class from all elements
+      ref.classList.remove('typewriter-lastWithContent');
+      ref.querySelectorAll('.lastWithContent').forEach(element => {
+        element.classList.remove('typewriter-lastWithContent');
+      });
+
+      // Adds lastWithContent class to the last element with content
+      if (lastParentWithContent) {
+        lastParentWithContent.classList.add('typewriter-lastWithContent');
+      } else {
+        ref.classList.add('typewriter-lastWithContent');
+      }
+    }
+  }, [shouldHideCursor]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledTypewriterText, {
+    ref: ref => updateTypewriterCursor(ref),
+    dangerouslySetInnerHTML: {
+      __html: shownText
+    },
+    style: textStyle,
+    $isAnimatingText: true
+  }), [updateTypewriterCursor, shownText, textStyle]);
+};
+export default AnimatedTypewriterText;
+//# sourceMappingURL=AnimatedTypewriterText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedTypewriterText.js","names":["React","useCallback","useMemo","StyledTypewriterText","AnimatedTypewriterText","_ref","shouldHideCursor","shownText","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","style","$isAnimatingText"],"sources":["../../../../src/components/typewriter/AnimatedTypewriterText.tsx"],"sourcesContent":["import React, {FC, useCallback, useEffect, useMemo, useRef} from 'react';\nimport {StyledTypewriterText} from \"./Typewriter.styles\";\n\ntype AnimatedTypewriterTextProps = {\n    shouldHideCursor: boolean;\n    shownText: string;\n    textStyle?: React.CSSProperties;\n};\n\nconst AnimatedTypewriterText: FC<AnimatedTypewriterTextProps> = ({\n    shouldHideCursor,\n    shownText,\n    textStyle\n}) => {\n    const updateTypewriterCursor = useCallback((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    }, [shouldHideCursor]);\n\n    return useMemo(() => (\n        <StyledTypewriterText\n            ref={(ref) => updateTypewriterCursor(ref)}\n            dangerouslySetInnerHTML={{ __html: shownText }}\n            style={textStyle}\n            $isAnimatingText\n        />\n    ), [updateTypewriterCursor, shownText, textStyle]);\n};\n\nexport default AnimatedTypewriterText;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAOC,WAAW,EAAaC,OAAO,QAAe,OAAO;AACxE,SAAQC,oBAAoB,QAAO,qBAAqB;AAQxD,MAAMC,sBAAuD,GAAGC,IAAA,IAI1D;EAAA,IAJ2D;IAC7DC,gBAAgB;IAChBC,SAAS;IACTC;EACJ,CAAC,GAAAH,IAAA;EACG,MAAMI,sBAAsB,GAAGR,WAAW,CAAES,GAA2B,IAAK;IACxE,IAAIA,GAAG,IAAI,CAACJ,gBAAgB,EAAE;MAC1B;MACA,MAAMK,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,CAACC,OAAO,IAAI;QACxDA,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,EAAE,CAACzB,gBAAgB,CAAC,CAAC;EAEtB,OAAOJ,OAAO,CAAC,mBACXF,KAAA,CAAAgC,aAAA,CAAC7B,oBAAoB;IACjBO,GAAG,EAAGA,GAAG,IAAKD,sBAAsB,CAACC,GAAG,CAAE;IAC1CuB,uBAAuB,EAAE;MAAEC,MAAM,EAAE3B;IAAU,CAAE;IAC/C4B,KAAK,EAAE3B,SAAU;IACjB4B,gBAAgB;EAAA,CACnB,CACJ,EAAE,CAAC3B,sBAAsB,EAAEF,SAAS,EAAEC,SAAS,CAAC,CAAC;AACtD,CAAC;AAED,eAAeJ,sBAAsB","ignoreList":[]}