@chayns-components/typewriter 5.0.0-beta.54 → 5.0.0-beta.541

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/components/typewriter/Typewriter.d.ts

@@ -1,9 +1,69 @@
-import { FC } from 'react';
+import React, { FC, ReactElement } from 'react';
+export declare enum TypewriterResetDelay {
+    Slow = 4000,
+    Medium = 2000,
+    Fast = 1000
+}
+export declare enum TypewriterSpeed {
+    Slow = 35,
+    Medium = 25,
+    Fast = 15
+}
 export type TypewriterProps = {
     /**
      * The text to type
      */
-    children: string;
+    children: ReactElement | ReactElement[] | string | string[];
+    /**
+     * Function that is executed when the typewriter animation has finished. This function will not
+     * be executed if multiple texts are used.
+     */
+    onFinish?: VoidFunction;
+    /**
+     * Pseudo-element to be rendered invisible during animation to define the size of the element
+     * for the typewriter effect. By default, the "children" is used for this purpose.
+     */
+    pseudoChildren?: ReactElement | string;
+    /**
+     * Waiting time before the typewriter resets the content if multiple texts are given
+     */
+    resetDelay?: TypewriterResetDelay;
+    /**
+     * Specifies whether the cursor should be forced to animate even if no text is currently animated.
+     */
+    shouldForceCursorAnimation?: boolean;
+    /**
+     * Specifies whether the cursor should be hidden
+     */
+    shouldHideCursor?: boolean;
+    /**
+     * Specifies whether the children should be sorted randomly if there are multiple texts.
+     * This makes the typewriter start with a different text each time and also changes them
+     * in a random order.
+     */
+    shouldSortChildrenRandomly?: boolean;
+    /**
+     * Specifies whether the animation should use its full height or the height of the current
+     * chunk.
+     */
+    shouldUseAnimationHeight?: boolean;
+    /**
+     * Specifies whether the reset of the text should be animated with a backspace animation for
+     * multiple texts.
+     */
+    shouldUseResetAnimation?: boolean;
+    /**
+     * Whether the typewriter should wait for new content
+     */
+    shouldWaitForContent?: boolean;
+    /**
+     * The speed of the animation. Use the TypewriterSpeed enum for this prop.
+     */
+    speed?: TypewriterSpeed | number;
+    /**
+     * The style of the typewriter text element
+     */
+    textStyle?: React.CSSProperties;
 };
 declare const Typewriter: FC<TypewriterProps>;
 export default Typewriter;

package/lib/components/typewriter/Typewriter.js

@@ -1,55 +1,183 @@
-"use strict";
+import { ColorSchemeProvider } from '@chayns-components/core';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { renderToString } from 'react-dom/server';
+import { StyledTypewriter, StyledTypewriterPseudoText, StyledTypewriterText } from './Typewriter.styles';
+import { getCharactersCount, getSubTextFromHTML, shuffleArray } from './utils';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Typewriter = require("./Typewriter.styles");
-var _utils = require("./utils");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// noinspection JSUnusedGlobalSymbols
+export let TypewriterResetDelay = /*#__PURE__*/function (TypewriterResetDelay) {
+  TypewriterResetDelay[TypewriterResetDelay["Slow"] = 4000] = "Slow";
+  TypewriterResetDelay[TypewriterResetDelay["Medium"] = 2000] = "Medium";
+  TypewriterResetDelay[TypewriterResetDelay["Fast"] = 1000] = "Fast";
+  return TypewriterResetDelay;
+}({});
+
+// noinspection JSUnusedGlobalSymbols
+export let TypewriterSpeed = /*#__PURE__*/function (TypewriterSpeed) {
+  TypewriterSpeed[TypewriterSpeed["Slow"] = 35] = "Slow";
+  TypewriterSpeed[TypewriterSpeed["Medium"] = 25] = "Medium";
+  TypewriterSpeed[TypewriterSpeed["Fast"] = 15] = "Fast";
+  return TypewriterSpeed;
+}({});
 const Typewriter = _ref => {
   let {
-    children
+    children,
+    onFinish,
+    pseudoChildren,
+    resetDelay = TypewriterResetDelay.Medium,
+    shouldForceCursorAnimation = false,
+    shouldHideCursor = false,
+    shouldSortChildrenRandomly = false,
+    shouldUseAnimationHeight = false,
+    shouldUseResetAnimation = false,
+    shouldWaitForContent,
+    speed = TypewriterSpeed.Medium,
+    textStyle
   } = _ref;
-  const [shownCharCount, setShownCharCount] = (0, _react.useState)(0);
-  const [shouldStopAnimation, setShouldStopAnimation] = (0, _react.useState)(false);
-  const isAnimatingText = shownCharCount !== children.length;
-  const handleClick = (0, _react.useCallback)(() => {
+  const [currentChildrenIndex, setCurrentChildrenIndex] = useState(0);
+  const [shouldCount, setShouldCount] = useState(true);
+  const sortedChildren = useMemo(() => Array.isArray(children) && shouldSortChildrenRandomly ? shuffleArray(children) : children, [children, shouldSortChildrenRandomly]);
+  const areMultipleChildrenGiven = Array.isArray(sortedChildren);
+  const childrenCount = areMultipleChildrenGiven ? sortedChildren.length : 1;
+  const textContent = useMemo(() => {
+    if (areMultipleChildrenGiven) {
+      const currentChildren = sortedChildren[currentChildrenIndex];
+      if (currentChildren) {
+        return /*#__PURE__*/React.isValidElement(currentChildren) ? renderToString( /*#__PURE__*/React.createElement(ColorSchemeProvider, {
+          color: "#005EB8",
+          colorMode: 0
+        }, currentChildren)) : currentChildren;
+      }
+      return '';
+    }
+    return /*#__PURE__*/React.isValidElement(sortedChildren) ? renderToString( /*#__PURE__*/React.createElement(ColorSchemeProvider, {
+      color: "#005EB8",
+      colorMode: 0
+    }, sortedChildren)) : sortedChildren;
+  }, [areMultipleChildrenGiven, currentChildrenIndex, sortedChildren]);
+  const charactersCount = useMemo(() => getCharactersCount(textContent), [textContent]);
+  const [isResetAnimationActive, setIsResetAnimationActive] = useState(false);
+  const [shownCharCount, setShownCharCount] = useState(charactersCount > 0 ? 0 : textContent.length);
+  const [shouldStopAnimation, setShouldStopAnimation] = useState(false);
+  const [prevChildren, setPrevChildren] = useState(children);
+  useEffect(() => {
+    if (children !== prevChildren) {
+      setShouldCount(true);
+      setPrevChildren(children);
+    }
+  }, [children, prevChildren]);
+  const isAnimatingText = shownCharCount < textContent.length || shouldForceCursorAnimation || areMultipleChildrenGiven || textContent.length === 0;
+  const handleClick = useCallback(() => {
     setShouldStopAnimation(true);
   }, []);
-  (0, _react.useEffect)(() => {
+  const handleSetNextChildrenIndex = useCallback(() => setCurrentChildrenIndex(() => {
+    let newIndex = currentChildrenIndex + 1;
+    if (newIndex > childrenCount - 1) {
+      newIndex = 0;
+    }
+    return newIndex;
+  }), [childrenCount, currentChildrenIndex]);
+  useEffect(() => {
     let interval;
-    if (shouldStopAnimation) {
-      setShownCharCount(children.length);
-    } else {
-      setShownCharCount(0);
+    if (shouldStopAnimation || charactersCount === 0) {
+      setShownCharCount(textContent.length);
+    } else if (isResetAnimationActive) {
       interval = window.setInterval(() => {
         setShownCharCount(prevState => {
-          const nextState = prevState + 1;
-          if (nextState === children.length) {
+          const nextState = prevState - 1;
+          if (nextState === 0) {
             window.clearInterval(interval);
+            if (areMultipleChildrenGiven) {
+              setTimeout(() => {
+                setIsResetAnimationActive(false);
+                handleSetNextChildrenIndex();
+              }, resetDelay);
+            }
+          }
+          return nextState;
+        });
+      }, speed);
+    } else {
+      interval = window.setInterval(() => {
+        setShownCharCount(prevState => {
+          let nextState = prevState;
+          if (shouldCount) {
+            nextState = prevState + 1;
+          }
+          if (nextState >= charactersCount) {
+            if (shouldWaitForContent) {
+              setShouldCount(false);
+            } else {
+              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, resetDelay / 2);
+                  }
+                }, resetDelay);
+              }
+            }
           }
           return nextState;
         });
-      }, 35);
+      }, speed);
     }
     return () => {
       window.clearInterval(interval);
     };
-  }, [children.length, shouldStopAnimation]);
-  const shownText = (0, _react.useMemo)(() => (0, _utils.getSubTextFromHTML)(children, shownCharCount), [children, shownCharCount]);
-  return /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriter, {
+  }, [shouldStopAnimation, speed, textContent.length, charactersCount, isResetAnimationActive, areMultipleChildrenGiven, resetDelay, childrenCount, handleSetNextChildrenIndex, shouldUseResetAnimation, shouldCount, shouldWaitForContent]);
+  useEffect(() => {
+    if (!isAnimatingText && typeof onFinish === 'function') {
+      onFinish();
+    }
+  }, [isAnimatingText, onFinish]);
+  const shownText = useMemo(() => getSubTextFromHTML(textContent, shownCharCount), [shownCharCount, textContent]);
+  const pseudoTextHTML = useMemo(() => {
+    if (pseudoChildren) {
+      const pseudoText = /*#__PURE__*/React.isValidElement(pseudoChildren) ? renderToString( /*#__PURE__*/React.createElement(ColorSchemeProvider, {
+        color: "#005EB8",
+        colorMode: 0
+      }, pseudoChildren)) : pseudoChildren;
+      if (shouldUseAnimationHeight) {
+        return getSubTextFromHTML(pseudoText, shownCharCount);
+      }
+      return pseudoText;
+    }
+    if (shouldUseAnimationHeight && textContent) {
+      return getSubTextFromHTML(textContent, shownCharCount);
+    }
+    return textContent || '&#8203;';
+  }, [pseudoChildren, shouldUseAnimationHeight, shownCharCount, textContent]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledTypewriter, {
     onClick: handleClick
-  }, /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriterText, {
+  }, isAnimatingText && /*#__PURE__*/React.createElement(StyledTypewriterText, {
     dangerouslySetInnerHTML: {
       __html: shownText
     },
-    isAnimatingText: isAnimatingText
-  }), isAnimatingText && /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriterPseudoText, null, children));
+    $isAnimatingText: true,
+    $shouldHideCursor: shouldHideCursor,
+    style: textStyle
+  }), /*#__PURE__*/React.createElement(StyledTypewriterText, {
+    style: isAnimatingText ? {
+      visibility: 'hidden',
+      position: 'absolute'
+    } : textStyle
+  }, sortedChildren), isAnimatingText && /*#__PURE__*/React.createElement(StyledTypewriterPseudoText, {
+    dangerouslySetInnerHTML: {
+      __html: pseudoTextHTML
+    }
+  })), [handleClick, isAnimatingText, pseudoTextHTML, shouldHideCursor, shownText, sortedChildren, textStyle]);
 };
 Typewriter.displayName = 'Typewriter';
-var _default = Typewriter;
-exports.default = _default;
+export default Typewriter;
 //# sourceMappingURL=Typewriter.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Typewriter.js","names":["Typewriter","children","shownCharCount","setShownCharCount","useState","shouldStopAnimation","setShouldStopAnimation","isAnimatingText","length","handleClick","useCallback","useEffect","interval","window","setInterval","prevState","nextState","clearInterval","shownText","useMemo","getSubTextFromHTML","__html","displayName"],"sources":["../../../src/components/typewriter/Typewriter.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport {\n    StyledTypewriter,\n    StyledTypewriterPseudoText,\n    StyledTypewriterText,\n} from './Typewriter.styles';\nimport { getSubTextFromHTML } from './utils';\n\nexport type TypewriterProps = {\n    /**\n     * The text to type\n     */\n    children: string;\n};\n\nconst Typewriter: FC<TypewriterProps> = ({ children }) => {\n    const [shownCharCount, setShownCharCount] = useState(0);\n    const [shouldStopAnimation, setShouldStopAnimation] = useState(false);\n\n    const isAnimatingText = shownCharCount !== children.length;\n\n    const handleClick = useCallback(() => {\n        setShouldStopAnimation(true);\n    }, []);\n\n    useEffect(() => {\n        let interval: number | undefined;\n\n        if (shouldStopAnimation) {\n            setShownCharCount(children.length);\n        } else {\n            setShownCharCount(0);\n\n            interval = window.setInterval(() => {\n                setShownCharCount((prevState) => {\n                    const nextState = prevState + 1;\n\n                    if (nextState === children.length) {\n                        window.clearInterval(interval);\n                    }\n\n                    return nextState;\n                });\n            }, 35);\n        }\n\n        return () => {\n            window.clearInterval(interval);\n        };\n    }, [children.length, shouldStopAnimation]);\n\n    const shownText = useMemo(\n        () => getSubTextFromHTML(children, shownCharCount),\n        [children, shownCharCount]\n    );\n\n    return (\n        <StyledTypewriter onClick={handleClick}>\n            <StyledTypewriterText\n                dangerouslySetInnerHTML={{ __html: shownText }}\n                isAnimatingText={isAnimatingText}\n            />\n            {isAnimatingText && <StyledTypewriterPseudoText>{children}</StyledTypewriterPseudoText>}\n        </StyledTypewriter>\n    );\n};\n\nTypewriter.displayName = 'Typewriter';\n\nexport default Typewriter;\n"],"mappings":";;;;;;AAAA;AACA;AAKA;AAA6C;AAAA;AAS7C,MAAMA,UAA+B,GAAG,QAAkB;EAAA,IAAjB;IAAEC;EAAS,CAAC;EACjD,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAC,eAAQ,EAAC,CAAC,CAAC;EACvD,MAAM,CAACC,mBAAmB,EAAEC,sBAAsB,CAAC,GAAG,IAAAF,eAAQ,EAAC,KAAK,CAAC;EAErE,MAAMG,eAAe,GAAGL,cAAc,KAAKD,QAAQ,CAACO,MAAM;EAE1D,MAAMC,WAAW,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAClCJ,sBAAsB,CAAC,IAAI,CAAC;EAChC,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAK,gBAAS,EAAC,MAAM;IACZ,IAAIC,QAA4B;IAEhC,IAAIP,mBAAmB,EAAE;MACrBF,iBAAiB,CAACF,QAAQ,CAACO,MAAM,CAAC;IACtC,CAAC,MAAM;MACHL,iBAAiB,CAAC,CAAC,CAAC;MAEpBS,QAAQ,GAAGC,MAAM,CAACC,WAAW,CAAC,MAAM;QAChCX,iBAAiB,CAAEY,SAAS,IAAK;UAC7B,MAAMC,SAAS,GAAGD,SAAS,GAAG,CAAC;UAE/B,IAAIC,SAAS,KAAKf,QAAQ,CAACO,MAAM,EAAE;YAC/BK,MAAM,CAACI,aAAa,CAACL,QAAQ,CAAC;UAClC;UAEA,OAAOI,SAAS;QACpB,CAAC,CAAC;MACN,CAAC,EAAE,EAAE,CAAC;IACV;IAEA,OAAO,MAAM;MACTH,MAAM,CAACI,aAAa,CAACL,QAAQ,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,CAACX,QAAQ,CAACO,MAAM,EAAEH,mBAAmB,CAAC,CAAC;EAE1C,MAAMa,SAAS,GAAG,IAAAC,cAAO,EACrB,MAAM,IAAAC,yBAAkB,EAACnB,QAAQ,EAAEC,cAAc,CAAC,EAClD,CAACD,QAAQ,EAAEC,cAAc,CAAC,CAC7B;EAED,oBACI,6BAAC,4BAAgB;IAAC,OAAO,EAAEO;EAAY,gBACnC,6BAAC,gCAAoB;IACjB,uBAAuB,EAAE;MAAEY,MAAM,EAAEH;IAAU,CAAE;IAC/C,eAAe,EAAEX;EAAgB,EACnC,EACDA,eAAe,iBAAI,6BAAC,sCAA0B,QAAEN,QAAQ,CAA8B,CACxE;AAE3B,CAAC;AAEDD,UAAU,CAACsB,WAAW,GAAG,YAAY;AAAC,eAEvBtB,UAAU;AAAA"}
+{"version":3,"file":"Typewriter.js","names":["ColorSchemeProvider","React","useCallback","useEffect","useMemo","useState","renderToString","StyledTypewriter","StyledTypewriterPseudoText","StyledTypewriterText","getCharactersCount","getSubTextFromHTML","shuffleArray","TypewriterResetDelay","TypewriterSpeed","Typewriter","_ref","children","onFinish","pseudoChildren","resetDelay","Medium","shouldForceCursorAnimation","shouldHideCursor","shouldSortChildrenRandomly","shouldUseAnimationHeight","shouldUseResetAnimation","shouldWaitForContent","speed","textStyle","currentChildrenIndex","setCurrentChildrenIndex","shouldCount","setShouldCount","sortedChildren","Array","isArray","areMultipleChildrenGiven","childrenCount","length","textContent","currentChildren","isValidElement","createElement","color","colorMode","charactersCount","isResetAnimationActive","setIsResetAnimationActive","shownCharCount","setShownCharCount","shouldStopAnimation","setShouldStopAnimation","prevChildren","setPrevChildren","isAnimatingText","handleClick","handleSetNextChildrenIndex","newIndex","interval","window","setInterval","prevState","nextState","clearInterval","setTimeout","shownText","pseudoTextHTML","pseudoText","onClick","dangerouslySetInnerHTML","__html","$isAnimatingText","$shouldHideCursor","style","visibility","position","displayName"],"sources":["../../../src/components/typewriter/Typewriter.tsx"],"sourcesContent":["import { ColorSchemeProvider } from '@chayns-components/core';\nimport React, { FC, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\nimport { renderToString } from 'react-dom/server';\nimport {\n    StyledTypewriter,\n    StyledTypewriterPseudoText,\n    StyledTypewriterText,\n} from './Typewriter.styles';\nimport { getCharactersCount, getSubTextFromHTML, shuffleArray } from './utils';\n\n// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterResetDelay {\n    Slow = 4000,\n    Medium = 2000,\n    Fast = 1000,\n}\n\n// noinspection JSUnusedGlobalSymbols\nexport enum TypewriterSpeed {\n    Slow = 35,\n    Medium = 25,\n    Fast = 15,\n}\n\nexport type TypewriterProps = {\n    /**\n     * The text to type\n     */\n    children: ReactElement | ReactElement[] | string | string[];\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 before the typewriter resets the content if multiple texts are given\n     */\n    resetDelay?: TypewriterResetDelay;\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 style of the typewriter text element\n     */\n    textStyle?: React.CSSProperties;\n};\n\nconst Typewriter: FC<TypewriterProps> = ({\n    children,\n    onFinish,\n    pseudoChildren,\n    resetDelay = TypewriterResetDelay.Medium,\n    shouldForceCursorAnimation = false,\n    shouldHideCursor = false,\n    shouldSortChildrenRandomly = false,\n    shouldUseAnimationHeight = false,\n    shouldUseResetAnimation = false,\n    shouldWaitForContent,\n    speed = TypewriterSpeed.Medium,\n    textStyle,\n}) => {\n    const [currentChildrenIndex, setCurrentChildrenIndex] = useState(0);\n    const [shouldCount, setShouldCount] = useState(true);\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                          <ColorSchemeProvider color=\"#005EB8\" colorMode={0}>\n                              {currentChildren}\n                          </ColorSchemeProvider>,\n                      )\n                    : (currentChildren as string);\n            }\n\n            return '';\n        }\n\n        return React.isValidElement(sortedChildren)\n            ? renderToString(\n                  <ColorSchemeProvider color=\"#005EB8\" colorMode={0}>\n                      {sortedChildren}\n                  </ColorSchemeProvider>,\n              )\n            : (sortedChildren as string);\n    }, [areMultipleChildrenGiven, currentChildrenIndex, sortedChildren]);\n\n    const charactersCount = useMemo(() => getCharactersCount(textContent), [textContent]);\n\n    const [isResetAnimationActive, setIsResetAnimationActive] = useState(false);\n    const [shownCharCount, setShownCharCount] = useState(\n        charactersCount > 0 ? 0 : textContent.length,\n    );\n    const [shouldStopAnimation, setShouldStopAnimation] = useState(false);\n    const [prevChildren, setPrevChildren] = useState<TypewriterProps['children']>(children);\n\n    useEffect(() => {\n        if (children !== prevChildren) {\n            setShouldCount(true);\n            setPrevChildren(children);\n        }\n    }, [children, prevChildren]);\n\n    const isAnimatingText =\n        shownCharCount < textContent.length ||\n        shouldForceCursorAnimation ||\n        areMultipleChildrenGiven ||\n        textContent.length === 0;\n\n    const handleClick = useCallback(() => {\n        setShouldStopAnimation(true);\n    }, []);\n\n    const handleSetNextChildrenIndex = useCallback(\n        () =>\n            setCurrentChildrenIndex(() => {\n                let newIndex = currentChildrenIndex + 1;\n\n                if (newIndex > childrenCount - 1) {\n                    newIndex = 0;\n                }\n\n                return newIndex;\n            }),\n        [childrenCount, currentChildrenIndex],\n    );\n\n    useEffect(() => {\n        let interval: number | undefined;\n\n        if (shouldStopAnimation || charactersCount === 0) {\n            setShownCharCount(textContent.length);\n        } else if (isResetAnimationActive) {\n            interval = window.setInterval(() => {\n                setShownCharCount((prevState) => {\n                    const nextState = prevState - 1;\n\n                    if (nextState === 0) {\n                        window.clearInterval(interval);\n\n                        if (areMultipleChildrenGiven) {\n                            setTimeout(() => {\n                                setIsResetAnimationActive(false);\n                                handleSetNextChildrenIndex();\n                            }, resetDelay);\n                        }\n                    }\n\n                    return nextState;\n                });\n            }, speed);\n        } else {\n            interval = window.setInterval(() => {\n                setShownCharCount((prevState) => {\n                    let nextState = prevState;\n\n                    if (shouldCount) {\n                        nextState = prevState + 1;\n                    }\n\n                    if (nextState >= charactersCount) {\n                        if (shouldWaitForContent) {\n                            setShouldCount(false);\n                        } else {\n                            window.clearInterval(interval);\n\n                            /**\n                             * At this point, the next value for \"shownCharCount\" is deliberately set to\n                             * the length of the textContent in order to correctly display HTML elements\n                             * after the last letter.\n                             */\n                            nextState = textContent.length;\n\n                            if (areMultipleChildrenGiven) {\n                                setTimeout(() => {\n                                    if (shouldUseResetAnimation) {\n                                        setIsResetAnimationActive(true);\n                                    } else {\n                                        setShownCharCount(0);\n                                        setTimeout(handleSetNextChildrenIndex, resetDelay / 2);\n                                    }\n                                }, resetDelay);\n                            }\n                        }\n                    }\n\n                    return nextState;\n                });\n            }, speed);\n        }\n\n        return () => {\n            window.clearInterval(interval);\n        };\n    }, [\n        shouldStopAnimation,\n        speed,\n        textContent.length,\n        charactersCount,\n        isResetAnimationActive,\n        areMultipleChildrenGiven,\n        resetDelay,\n        childrenCount,\n        handleSetNextChildrenIndex,\n        shouldUseResetAnimation,\n        shouldCount,\n        shouldWaitForContent,\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                      <ColorSchemeProvider color=\"#005EB8\" colorMode={0}>\n                          {pseudoChildren}\n                      </ColorSchemeProvider>,\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    }, [pseudoChildren, shouldUseAnimationHeight, shownCharCount, textContent]);\n\n    return useMemo(\n        () => (\n            <StyledTypewriter onClick={handleClick}>\n                {isAnimatingText && (\n                    <StyledTypewriterText\n                        dangerouslySetInnerHTML={{ __html: shownText }}\n                        $isAnimatingText\n                        $shouldHideCursor={shouldHideCursor}\n                        style={textStyle}\n                    />\n                )}\n                <StyledTypewriterText\n                    style={\n                        isAnimatingText ? { visibility: 'hidden', position: 'absolute' } : textStyle\n                    }\n                >\n                    {sortedChildren}\n                </StyledTypewriterText>\n                {isAnimatingText && (\n                    <StyledTypewriterPseudoText\n                        dangerouslySetInnerHTML={{ __html: pseudoTextHTML }}\n                    />\n                )}\n            </StyledTypewriter>\n        ),\n        [\n            handleClick,\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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"}

package/lib/components/typewriter/Typewriter.styles.d.ts

@@ -1,7 +1,10 @@
-export declare const StyledTypewriter: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledTypewriterPseudoText: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledTypewriterText: import("styled-components").StyledComponent<"div", any, {
-    isAnimatingText: boolean;
-} & {
-    theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
-}, never>;
+/// <reference types="react" />
+import type { WithTheme } from '@chayns-components/core';
+export declare const StyledTypewriter: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledTypewriterPseudoText: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
+type StyledTypewriterTextProps = WithTheme<{
+    $isAnimatingText?: boolean;
+    $shouldHideCursor?: boolean;
+}>;
+export declare const StyledTypewriterText: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledTypewriterTextProps>>;
+export {};

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

@@ -1,61 +1,51 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledTypewriterText = exports.StyledTypewriterPseudoText = exports.StyledTypewriter = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const StyledTypewriter = _styledComponents.default.div`
+import styled, { css, keyframes } from 'styled-components';
+export const StyledTypewriter = styled.div`
+    align-items: inherit;
+    display: flex;
     position: relative;
+    width: 100%;
 `;
-exports.StyledTypewriter = StyledTypewriter;
-const blinkAnimation = (0, _styledComponents.keyframes)`
+const blinkAnimation = keyframes`
   100% {
     visibility: hidden;
   }
 `;
-const StyledTypewriterPseudoText = _styledComponents.default.div`
+export const StyledTypewriterPseudoText = styled.span`
     opacity: 0;
     pointer-events: none;
     user-select: none;
 `;
-exports.StyledTypewriterPseudoText = StyledTypewriterPseudoText;
-const StyledTypewriterText = _styledComponents.default.div`
-    color: ${_ref => {
+export const StyledTypewriterText = styled.span`
+    color: inherit;
+    position: ${_ref => {
   let {
-    theme
+    $isAnimatingText
   } = _ref;
-  return theme.text;
-}};
-    position: ${_ref2 => {
-  let {
-    isAnimatingText
-  } = _ref2;
-  return isAnimatingText ? 'absolute' : 'relative';
+  return $isAnimatingText ? 'absolute' : 'relative';
 }};
+    width: 100%;
 
-    ${_ref3 => {
+    ${_ref2 => {
   let {
-    isAnimatingText
-  } = _ref3;
-  return isAnimatingText && (0, _styledComponents.css)`
+    $isAnimatingText,
+    $shouldHideCursor
+  } = _ref2;
+  return $isAnimatingText && !$shouldHideCursor && css`
             &:after {
                 animation: ${blinkAnimation} 1s steps(5, start) infinite;
-                color: ${_ref4 => {
+                color: ${_ref3 => {
     let {
       theme
-    } = _ref4;
+    } = _ref3;
     return theme.text;
   }};
                 content: '▋';
                 margin-left: 0.25rem;
                 opacity: 0.85;
+                position: absolute;
                 vertical-align: baseline;
             }
         `;
 }}
 `;
-exports.StyledTypewriterText = StyledTypewriterText;
 //# sourceMappingURL=Typewriter.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Typewriter.styles.js","names":["StyledTypewriter","styled","div","blinkAnimation","keyframes","StyledTypewriterPseudoText","StyledTypewriterText","theme","text","isAnimatingText","css"],"sources":["../../../src/components/typewriter/Typewriter.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled, { css, keyframes } from 'styled-components';\n\nexport const StyledTypewriter = styled.div`\n    position: relative;\n`;\n\nconst blinkAnimation = keyframes`\n  100% {\n    visibility: hidden;\n  }\n`;\n\nexport const StyledTypewriterPseudoText = styled.div`\n    opacity: 0;\n    pointer-events: none;\n    user-select: none;\n`;\n\ntype StyledTypewriterTextProps = WithTheme<{\n    isAnimatingText: boolean;\n}>;\n\nexport const StyledTypewriterText = styled.div<StyledTypewriterTextProps>`\n    color: ${({ theme }: StyledTypewriterTextProps) => theme.text};\n    position: ${({ isAnimatingText }) => (isAnimatingText ? 'absolute' : 'relative')};\n\n    ${({ isAnimatingText }) =>\n        isAnimatingText &&\n        css`\n            &:after {\n                animation: ${blinkAnimation} 1s steps(5, start) infinite;\n                color: ${({ theme }: StyledTypewriterTextProps) => theme.text};\n                content: '▋';\n                margin-left: 0.25rem;\n                opacity: 0.85;\n                vertical-align: baseline;\n            }\n        `}\n`;\n"],"mappings":";;;;;;AACA;AAA2D;AAAA;AAEpD,MAAMA,gBAAgB,GAAGC,yBAAM,CAACC,GAAI;AAC3C;AACA,CAAC;AAAC;AAEF,MAAMC,cAAc,GAAG,IAAAC,2BAAS,CAAC;AACjC;AACA;AACA;AACA,CAAC;AAEM,MAAMC,0BAA0B,GAAGJ,yBAAM,CAACC,GAAI;AACrD;AACA;AACA;AACA,CAAC;AAAC;AAMK,MAAMI,oBAAoB,GAAGL,yBAAM,CAACC,GAA+B;AAC1E,aAAa;EAAA,IAAC;IAAEK;EAAiC,CAAC;EAAA,OAAKA,KAAK,CAACC,IAAI;AAAA,CAAC;AAClE,gBAAgB;EAAA,IAAC;IAAEC;EAAgB,CAAC;EAAA,OAAMA,eAAe,GAAG,UAAU,GAAG,UAAU;AAAA,CAAE;AACrF;AACA,MAAM;EAAA,IAAC;IAAEA;EAAgB,CAAC;EAAA,OAClBA,eAAe,IACf,IAAAC,qBAAG,CAAC;AACZ;AACA,6BAA6BP,cAAe;AAC5C,yBAAyB;IAAA,IAAC;MAAEI;IAAiC,CAAC;IAAA,OAAKA,KAAK,CAACC,IAAI;EAAA,CAAC;AAC9E;AACA;AACA;AACA;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAAC"}
+{"version":3,"file":"Typewriter.styles.js","names":["styled","css","keyframes","StyledTypewriter","div","blinkAnimation","StyledTypewriterPseudoText","span","StyledTypewriterText","_ref","$isAnimatingText","_ref2","$shouldHideCursor","_ref3","theme","text"],"sources":["../../../src/components/typewriter/Typewriter.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled, { css, keyframes } from 'styled-components';\n\nexport const StyledTypewriter = styled.div`\n    align-items: inherit;\n    display: flex;\n    position: relative;\n    width: 100%;\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`;\n\ntype StyledTypewriterTextProps = WithTheme<{\n    $isAnimatingText?: boolean;\n    $shouldHideCursor?: boolean;\n}>;\n\nexport const StyledTypewriterText = styled.span<StyledTypewriterTextProps>`\n    color: inherit;\n    position: ${({ $isAnimatingText }) => ($isAnimatingText ? 'absolute' : 'relative')};\n    width: 100%;\n\n    ${({ $isAnimatingText, $shouldHideCursor }) =>\n        $isAnimatingText &&\n        !$shouldHideCursor &&\n        css`\n            &:after {\n                animation: ${blinkAnimation} 1s steps(5, start) infinite;\n                color: ${({ theme }: StyledTypewriterTextProps) => theme.text};\n                content: '▋';\n                margin-left: 0.25rem;\n                opacity: 0.85;\n                position: absolute;\n                vertical-align: baseline;\n            }\n        `}\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAE1D,OAAO,MAAMC,gBAAgB,GAAGH,MAAM,CAACI,GAAI;AAC3C;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,cAAc,GAAGH,SAAU;AACjC;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMI,0BAA0B,GAAGN,MAAM,CAACO,IAAK;AACtD;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,oBAAoB,GAAGR,MAAM,CAACO,IAAgC;AAC3E;AACA,gBAAgBE,IAAA;EAAA,IAAC;IAAEC;EAAiB,CAAC,GAAAD,IAAA;EAAA,OAAMC,gBAAgB,GAAG,UAAU,GAAG,UAAU;AAAA,CAAE;AACvF;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAED,gBAAgB;IAAEE;EAAkB,CAAC,GAAAD,KAAA;EAAA,OACtCD,gBAAgB,IAChB,CAACE,iBAAiB,IAClBX,GAAI;AACZ;AACA,6BAA6BI,cAAe;AAC5C,yBAAyBQ,KAAA;IAAA,IAAC;MAAEC;IAAiC,CAAC,GAAAD,KAAA;IAAA,OAAKC,KAAK,CAACC,IAAI;EAAA,CAAC;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC"}

package/lib/components/typewriter/utils.d.ts

@@ -9,3 +9,5 @@
  * @return string - The text part with the specified length - additionally the HTML elements are added
  */
 export declare const getSubTextFromHTML: (html: string, length: number) => string;
+export declare const getCharactersCount: (html: string) => number;
+export declare const shuffleArray: <T>(array: T[]) => T[];

package/lib/components/typewriter/utils.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getSubTextFromHTML = 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
@@ -14,14 +8,14 @@ exports.getSubTextFromHTML = void 0;
  *
  * @return string - The text part with the specified length - additionally the HTML elements are added
  */
-const getSubTextFromHTML = (html, length) => {
+export const getSubTextFromHTML = (html, length) => {
   const div = document.createElement('div');
   div.innerHTML = html;
   let text = '';
   let currLength = 0;
-  const traverse = node => {
-    if (node.nodeType === 3 && typeof node.textContent === 'string') {
-      const nodeText = node.textContent;
+  const traverse = element => {
+    if (element.nodeType === 3 && typeof element.textContent === 'string') {
+      const nodeText = element.textContent;
       if (currLength + nodeText.length <= length) {
         text += nodeText;
         currLength += nodeText.length;
@@ -29,11 +23,19 @@ const getSubTextFromHTML = (html, length) => {
         text += nodeText.substring(0, length - currLength);
         return false;
       }
-    } else if (node.nodeType === 1) {
-      const nodeName = node.nodeName.toLowerCase();
-      text += `<${nodeName}>`;
-      for (let i = 0; i < node.childNodes.length; i++) {
-        const childNode = node.childNodes[i];
+    } else if (element.nodeType === 1) {
+      const nodeName = element.nodeName.toLowerCase();
+      let attributes = '';
+
+      // @ts-expect-error: Type is correct here
+      // eslint-disable-next-line no-restricted-syntax
+      for (const attribute of element.attributes) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/restrict-template-expressions
+        attributes += ` ${attribute.name}="${attribute.value}"`;
+      }
+      text += `<${nodeName}${attributes}>`;
+      for (let i = 0; i < element.childNodes.length; i++) {
+        const childNode = element.childNodes[i];
         if (childNode && !traverse(childNode)) {
           return false;
         }
@@ -50,5 +52,30 @@ const getSubTextFromHTML = (html, length) => {
   }
   return text;
 };
-exports.getSubTextFromHTML = getSubTextFromHTML;
+export const getCharactersCount = html => {
+  const div = document.createElement('div');
+  div.innerHTML = html;
+  let count = 0;
+  const traverse = node => {
+    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);
+    }
+  };
+  Array.from(div.childNodes).forEach(traverse);
+  return count;
+};
+export 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;
+};
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":["getSubTextFromHTML","html","length","div","document","createElement","innerHTML","text","currLength","traverse","node","nodeType","textContent","nodeText","substring","nodeName","toLowerCase","i","childNodes","childNode"],"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 = (node: Node): boolean => {\n        if (node.nodeType === 3 && typeof node.textContent === 'string') {\n            const nodeText = node.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 (node.nodeType === 1) {\n            const nodeName = node.nodeName.toLowerCase();\n\n            text += `<${nodeName}>`;\n\n            for (let i = 0; i < node.childNodes.length; i++) {\n                const childNode = node.childNodes[i];\n\n                if (childNode && !traverse(childNode)) {\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)) {\n            return text;\n        }\n    }\n\n    return text;\n};\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,kBAAkB,GAAG,CAACC,IAAY,EAAEC,MAAc,KAAa;EACxE,MAAMC,GAAG,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAEzCF,GAAG,CAACG,SAAS,GAAGL,IAAI;EAEpB,IAAIM,IAAI,GAAG,EAAE;EACb,IAAIC,UAAU,GAAG,CAAC;EAElB,MAAMC,QAAQ,GAAIC,IAAU,IAAc;IACtC,IAAIA,IAAI,CAACC,QAAQ,KAAK,CAAC,IAAI,OAAOD,IAAI,CAACE,WAAW,KAAK,QAAQ,EAAE;MAC7D,MAAMC,QAAQ,GAAGH,IAAI,CAACE,WAAW;MAEjC,IAAIJ,UAAU,GAAGK,QAAQ,CAACX,MAAM,IAAIA,MAAM,EAAE;QACxCK,IAAI,IAAIM,QAAQ;QAChBL,UAAU,IAAIK,QAAQ,CAACX,MAAM;MACjC,CAAC,MAAM;QACHK,IAAI,IAAIM,QAAQ,CAACC,SAAS,CAAC,CAAC,EAAEZ,MAAM,GAAGM,UAAU,CAAC;QAElD,OAAO,KAAK;MAChB;IACJ,CAAC,MAAM,IAAIE,IAAI,CAACC,QAAQ,KAAK,CAAC,EAAE;MAC5B,MAAMI,QAAQ,GAAGL,IAAI,CAACK,QAAQ,CAACC,WAAW,EAAE;MAE5CT,IAAI,IAAK,IAAGQ,QAAS,GAAE;MAEvB,KAAK,IAAIE,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGP,IAAI,CAACQ,UAAU,CAAChB,MAAM,EAAEe,CAAC,EAAE,EAAE;QAC7C,MAAME,SAAS,GAAGT,IAAI,CAACQ,UAAU,CAACD,CAAC,CAAC;QAEpC,IAAIE,SAAS,IAAI,CAACV,QAAQ,CAACU,SAAS,CAAC,EAAE;UACnC,OAAO,KAAK;QAChB;MACJ;MAEAZ,IAAI,IAAK,KAAIQ,QAAS,GAAE;IAC5B;IAEA,OAAO,IAAI;EACf,CAAC;EAED,KAAK,IAAIE,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGd,GAAG,CAACe,UAAU,CAAChB,MAAM,EAAEe,CAAC,EAAE,EAAE;IAC5C,MAAME,SAAS,GAAGhB,GAAG,CAACe,UAAU,CAACD,CAAC,CAAC;IAEnC,IAAIE,SAAS,IAAI,CAACV,QAAQ,CAACU,SAAS,CAAC,EAAE;MACnC,OAAOZ,IAAI;IACf;EACJ;EAEA,OAAOA,IAAI;AACf,CAAC;AAAC"}
+{"version":3,"file":"utils.js","names":["getSubTextFromHTML","html","length","div","document","createElement","innerHTML","text","currLength","traverse","element","nodeType","textContent","nodeText","substring","nodeName","toLowerCase","attributes","attribute","name","value","i","childNodes","childNode","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.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.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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"}

package/lib/index.d.ts

@@ -1 +1 @@
-export { default as Typewriter } from './components/typewriter/Typewriter';
+export { default as Typewriter, TypewriterSpeed } from './components/typewriter/Typewriter';

package/lib/index.js

@@ -1,14 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Typewriter", {
-  enumerable: true,
-  get: function () {
-    return _Typewriter.default;
-  }
-});
-var _Typewriter = _interopRequireDefault(require("./components/typewriter/Typewriter"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+export { default as Typewriter, TypewriterSpeed } from './components/typewriter/Typewriter';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["export { default as Typewriter } from './components/typewriter/Typewriter';\n"],"mappings":";;;;;;;;;;;AAAA;AAA2E"}
+{"version":3,"file":"index.js","names":["default","Typewriter","TypewriterSpeed"],"sources":["../src/index.ts"],"sourcesContent":["export { default as Typewriter, TypewriterSpeed } from './components/typewriter/Typewriter';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,UAAU,EAAEC,eAAe,QAAQ,oCAAoC"}

package/package.json

@@ -1,7 +1,14 @@
 {
     "name": "@chayns-components/typewriter",
-    "version": "5.0.0-beta.54",
+    "version": "5.0.0-beta.541",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
+    "sideEffects": false,
+    "browserslist": [
+        ">0.5%",
+        "not dead",
+        "not op_mini all",
+        "not IE 11"
+    ],
     "keywords": [
         "chayns",
         "react",
@@ -33,35 +40,34 @@
         "url": "https://github.com/TobitSoftware/chayns-components/issues"
     },
     "devDependencies": {
-        "@babel/cli": "^7.20.7",
-        "@babel/core": "^7.20.12",
-        "@babel/preset-env": "^7.20.2",
-        "@babel/preset-react": "^7.18.6",
-        "@babel/preset-typescript": "^7.18.6",
-        "@types/react": "^17.0.53",
-        "@types/react-dom": "^17.0.18",
-        "@types/styled-components": "^5.1.26",
-        "@types/uuid": "^9.0.0",
-        "babel-loader": "^8.3.0",
-        "lerna": "^6.4.1",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "typescript": "^4.9.5"
+        "@babel/cli": "^7.23.9",
+        "@babel/core": "^7.23.9",
+        "@babel/preset-env": "^7.23.9",
+        "@babel/preset-react": "^7.23.3",
+        "@babel/preset-typescript": "^7.23.3",
+        "@types/react": "^18.2.57",
+        "@types/react-dom": "^18.2.19",
+        "@types/styled-components": "^5.1.34",
+        "@types/uuid": "^9.0.8",
+        "babel-loader": "^9.1.3",
+        "lerna": "^8.1.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "styled-components": "^6.1.8",
+        "typescript": "^5.3.3"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.54",
-        "@chayns/colors": "^2.0.0",
-        "clsx": "^1.2.1",
-        "framer-motion": "^6.5.1",
-        "styled-components": "^5.3.6",
-        "uuid": "^9.0.0"
+        "@chayns-components/core": "^5.0.0-beta.541"
     },
     "peerDependencies": {
+        "chayns-api": ">=1.0.50",
+        "framer-motion": ">=10.18.0",
         "react": ">=16.14.0",
-        "react-dom": ">=16.14.0"
+        "react-dom": ">=16.14.0",
+        "styled-components": ">=5.3.11"
     },
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "5938050611ab8bd504ef5b610189548d5a62ba7d"
+    "gitHead": "26fa52ee4630cf44ac662066594254f69b7ac3bf"
 }