@arwes/react-text - npm Package Compare versions

Comparing version 1.0.0-next.24041801 to 1.0.0-next.24041802

build/cjs/Text/Text.js

@@ -5,3 +5,2 @@ "use strict";
 const react_1 = require("react");
-const react_2 = require("@emotion/react");
 const tools_1 = require("@arwes/tools");
@@ -15,3 +14,3 @@ const react_tools_1 = require("@arwes/react-tools");
 const Text = (props) => {
-    const { as: asProvided = 'p', className, contentClassName, children, manager, easing, fixed, hideOnExited = true, hideOnEntered, elementRef: elementRefProvided, ...otherProps } = props;
+    const { as: asProvided = 'p', className, contentClassName, contentStyle, children, manager, easing, fixed, hideOnEntered, hideOnExited = true, elementRef: elementRefProvided, ...otherProps } = props;
     const as = (0, react_1.useMemo)(() => asProvided, []);
@@ -25,2 +24,6 @@ const [childrenText, setChildrenText] = (0, react_1.useState)('');
     const [isEntered, setIsEntered] = (0, react_1.useState)(() => animator?.node.state === animator_1.ANIMATOR_STATES.entered);
+    const contentVisibility = (0, react_1.useMemo)(() => animator &&
+        ((!isEntered && !isExited) || (hideOnEntered && isEntered) || (hideOnExited && isExited))
+        ? 'hidden'
+        : 'visible', [animator, hideOnEntered, isEntered, hideOnExited, isExited]);
     (0, react_1.useEffect)(() => {
@@ -40,2 +43,7 @@ setChildrenText(contentElementRef.current?.textContent ?? '');
         }
+        const rootElement = elementRef.current;
+        const contentElement = contentElementRef.current;
+        if (!rootElement || !contentElement) {
+            return;
+        }
         if (!fixed) {
@@ -55,8 +63,8 @@ const settings = animator.node.control.getSettings();
         }
-        const transitioner = manager === 'decipher' ? text_1.transitionTextDecipher : text_1.transitionTextSequence;
         const transition = (duration, isEntering) => {
+            const transitioner = manager === 'decipher' ? text_1.transitionTextDecipher : text_1.transitionTextSequence;
             transitionControl.current?.cancel();
             transitionControl.current = transitioner({
-                rootElement: elementRef.current,
-                contentElement: contentElementRef.current,
+                rootElement,
+                contentElement,
                 duration,
@@ -95,19 +103,24 @@ isEntering,
     }, [animator, childrenText]);
-    return (0, react_2.jsx)(as, {
+    (0, react_1.useEffect)(() => {
+        if (contentElementRef.current) {
+            contentElementRef.current.style.visibility = contentVisibility;
+        }
+    }, [contentVisibility]);
+    return (0, react_1.createElement)(as, {
         ...otherProps,
         className: (0, tools_1.cx)(TEXT_CLASS, className),
-        css: {
-            position: 'relative'
+        style: {
+            position: 'relative',
+            ...otherProps.style
         },
         ref: (0, react_tools_1.mergeRefs)(elementRefProvided, elementRef)
-    }, (0, react_2.jsx)('span', {
+    }, (0, react_1.createElement)('span', {
         ref: contentElementRef,
         className: (0, tools_1.cx)(`${TEXT_CLASS}__content`, contentClassName),
-        css: {
+        style: {
             position: 'relative',
             zIndex: 1,
             display: 'inline-block',
-            visibility: animator && ((hideOnEntered && isEntered) || (hideOnExited && isExited))
-                ? 'hidden'
-                : 'visible'
+            ...contentStyle,
+            visibility: contentVisibility
         }
@@ -114,0 +127,0 @@ }, children));

build/esm/Text/Text.d.ts

@@ -1,2 +0,2 @@
-import { type ReactNode, type ReactElement, type HTMLProps, type ForwardedRef } from 'react';
+import { type ReactNode, type ReactElement, type HTMLProps, type ForwardedRef, type CSSProperties } from 'react';
 import { type easing } from '@arwes/animated';
@@ -8,2 +8,3 @@ import { type TextTransitionManager } from '@arwes/text';
     contentClassName?: string;
+    contentStyle?: CSSProperties;
     elementRef?: ForwardedRef<E>;
@@ -17,4 +18,4 @@ manager?: TextTransitionManager;
     fixed?: boolean;
+    hideOnEntered?: boolean;
     hideOnExited?: boolean;
-    hideOnEntered?: boolean;
     children: ReactNode;
@@ -21,0 +22,0 @@ }

build/esm/Text/Text.js

@@ -1,3 +0,2 @@
-import { useMemo, useState, useRef, useEffect } from 'react';
-import { jsx } from '@emotion/react';
+import { createElement, useMemo, useState, useRef, useEffect } from 'react';
 import { cx } from '@arwes/tools';
@@ -10,3 +9,3 @@ import { mergeRefs } from '@arwes/react-tools';
 const Text = (props) => {
-    const { as: asProvided = 'p', className, contentClassName, children, manager, easing, fixed, hideOnExited = true, hideOnEntered, elementRef: elementRefProvided, ...otherProps } = props;
+    const { as: asProvided = 'p', className, contentClassName, contentStyle, children, manager, easing, fixed, hideOnEntered, hideOnExited = true, elementRef: elementRefProvided, ...otherProps } = props;
     const as = useMemo(() => asProvided, []);
@@ -20,2 +19,6 @@ const [childrenText, setChildrenText] = useState('');
     const [isEntered, setIsEntered] = useState(() => animator?.node.state === STATES.entered);
+    const contentVisibility = useMemo(() => animator &&
+        ((!isEntered && !isExited) || (hideOnEntered && isEntered) || (hideOnExited && isExited))
+        ? 'hidden'
+        : 'visible', [animator, hideOnEntered, isEntered, hideOnExited, isExited]);
     useEffect(() => {
@@ -35,2 +38,7 @@ setChildrenText(contentElementRef.current?.textContent ?? '');
         }
+        const rootElement = elementRef.current;
+        const contentElement = contentElementRef.current;
+        if (!rootElement || !contentElement) {
+            return;
+        }
         if (!fixed) {
@@ -50,8 +58,8 @@ const settings = animator.node.control.getSettings();
         }
-        const transitioner = manager === 'decipher' ? transitionTextDecipher : transitionTextSequence;
         const transition = (duration, isEntering) => {
+            const transitioner = manager === 'decipher' ? transitionTextDecipher : transitionTextSequence;
             transitionControl.current?.cancel();
             transitionControl.current = transitioner({
-                rootElement: elementRef.current,
-                contentElement: contentElementRef.current,
+                rootElement,
+                contentElement,
                 duration,
@@ -90,19 +98,24 @@ isEntering,
     }, [animator, childrenText]);
-    return jsx(as, {
+    useEffect(() => {
+        if (contentElementRef.current) {
+            contentElementRef.current.style.visibility = contentVisibility;
+        }
+    }, [contentVisibility]);
+    return createElement(as, {
         ...otherProps,
         className: cx(TEXT_CLASS, className),
-        css: {
-            position: 'relative'
+        style: {
+            position: 'relative',
+            ...otherProps.style
         },
         ref: mergeRefs(elementRefProvided, elementRef)
-    }, jsx('span', {
+    }, createElement('span', {
         ref: contentElementRef,
         className: cx(`${TEXT_CLASS}__content`, contentClassName),
-        css: {
+        style: {
             position: 'relative',
             zIndex: 1,
             display: 'inline-block',
-            visibility: animator && ((hideOnEntered && isEntered) || (hideOnExited && isExited))
-                ? 'hidden'
-                : 'visible'
+            ...contentStyle,
+            visibility: contentVisibility
         }
@@ -109,0 +122,0 @@ }, children));

package.json

 {
   "name": "@arwes/react-text",
-  "version": "1.0.0-next.24041801",
+  "version": "1.0.0-next.24041802",
   "publishConfig": {
@@ -46,7 +46,7 @@ "access": "public"
   "dependencies": {
-    "@arwes/animator": "^1.0.0-next.24041801",
-    "@arwes/react-animator": "^1.0.0-next.24041801",
-    "@arwes/react-tools": "^1.0.0-next.24041801",
-    "@arwes/text": "^1.0.0-next.24041801",
-    "@arwes/tools": "^1.0.0-next.24041801",
+    "@arwes/animator": "^1.0.0-next.24041802",
+    "@arwes/react-animator": "^1.0.0-next.24041802",
+    "@arwes/react-tools": "^1.0.0-next.24041802",
+    "@arwes/text": "^1.0.0-next.24041802",
+    "@arwes/tools": "^1.0.0-next.24041802",
     "tslib": "2"
@@ -60,3 +60,3 @@ },
   },
-  "gitHead": "ee772f4eda2e2feb74a995234a2bc59667330d67"
+  "gitHead": "aa67665195fd80fa75b4f18239081529b7602729"
 }

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14921

increased by8.3%

Lines of code

294

increased by10.11%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updated@arwes/animator@^1.0.0-next.24041802

• Updated@arwes/react-animator@^1.0.0-next.24041802

• Updated@arwes/react-tools@^1.0.0-next.24041802

• Updated@arwes/text@^1.0.0-next.24041802

• Updated@arwes/tools@^1.0.0-next.24041802