react-awesome-reveal 4.1.0 → 4.2.0

package/dist/index.mjs

@@ -345,10 +345,7 @@ var wobble = keyframes13`
 `;
 
 // src/Reveal.tsx
-import {
-  ClassNames,
-  css as css2
-} from "@emotion/react";
+import { ClassNames } from "@emotion/react";
 import { Children, isValidElement, useMemo } from "react";
 import { InView, useInView } from "react-intersection-observer";
 import { isFragment } from "react-is";
@@ -550,10 +547,14 @@ function getAnimationCss({
     animation-direction: normal;
     animation-fill-mode: both;
     animation-iteration-count: ${iterationCount};
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
   `;
 }
 
-// src/utils/react.ts
+// src/utils/guards.ts
 function isNullable(a) {
   return a == void 0;
 }
@@ -561,15 +562,22 @@ function isStringLike(value) {
   return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
 }
 
+// src/utils/patterns.ts
+function matchIf(onTrue, onFalse) {
+  return (condition) => condition ? onTrue() : onFalse();
+}
+function matchIfOrNull(onTrue) {
+  return matchIf(onTrue, () => null);
+}
+
 // src/Reveal.tsx
 import { Fragment, jsx } from "@emotion/react/jsx-runtime";
-var hiddenStyles = css2`
-  opacity: 0;
-`;
-var textBaseStyles = css2`
-  display: inline-block;
-  white-space: pre;
-`;
+function hideWhen(condition) {
+  return matchIf(
+    () => ({ opacity: 0 }),
+    () => ({ opacity: 1 })
+  )(condition);
+}
 var Reveal = (props) => {
   const {
     cascade = false,
@@ -579,7 +587,6 @@ var Reveal = (props) => {
     fraction = 0,
     keyframes: keyframes87 = fadeInLeft,
     triggerOnce = false,
-    css: revealCss,
     className,
     style,
     childClassName,
@@ -594,83 +601,91 @@ var Reveal = (props) => {
     }),
     [duration, keyframes87]
   );
-  if (isNullable(children)) {
+  if (isNullable(children))
     return null;
-  }
-  if (isStringLike(children)) {
-    return /* @__PURE__ */ jsx(TextReveal, {
-      ...props,
-      animationStyles,
-      children: String(children)
-    });
-  }
-  if (isFragment(children)) {
-    return /* @__PURE__ */ jsx(FragmentReveal, {
-      ...props,
-      animationStyles
-    });
-  }
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: Children.map(children, (node, index) => {
-      if (!isValidElement(node))
-        return null;
-      const inViewStyles = [revealCss, animationStyles];
-      const nodeDelay = delay + (cascade ? index * duration * damping : 0);
-      switch (node.type) {
-        case "ol":
-        case "ul":
-          return /* @__PURE__ */ jsx(ClassNames, {
-            children: ({ cx }) => /* @__PURE__ */ jsx(node.type, {
-              ...node.props,
-              className: cx(className, node.props.className),
-              style: { ...style, ...node.props.style },
-              children: /* @__PURE__ */ jsx(Reveal, {
-                ...props,
-                children: node.props.children
-              })
-            })
-          });
-        case "li":
-          return /* @__PURE__ */ jsx(InView, {
+  if (isStringLike(children))
+    return /* @__PURE__ */ jsx(TextReveal, { ...props, animationStyles, children: String(children) });
+  if (isFragment(children))
+    return /* @__PURE__ */ jsx(FragmentReveal, { ...props, animationStyles });
+  return /* @__PURE__ */ jsx(Fragment, { children: Children.map(children, (node, index) => {
+    if (!isValidElement(node))
+      return null;
+    const nodeDelay = delay + (cascade ? index * duration * damping : 0);
+    switch (node.type) {
+      case "ol":
+      case "ul":
+        return /* @__PURE__ */ jsx(ClassNames, { children: ({ cx }) => /* @__PURE__ */ jsx(
+          node.type,
+          {
+            ...node.props,
+            className: cx(className, node.props.className),
+            style: Object.assign({}, style, node.props.style),
+            children: /* @__PURE__ */ jsx(Reveal, { ...props, children: node.props.children })
+          }
+        ) });
+      case "li":
+        return /* @__PURE__ */ jsx(
+          InView,
+          {
             threshold: fraction,
             triggerOnce,
             onChange: onVisibilityChange,
-            children: ({ inView, ref }) => /* @__PURE__ */ jsx(ClassNames, {
-              children: ({ cx }) => /* @__PURE__ */ jsx(node.type, {
+            children: ({ inView, ref }) => /* @__PURE__ */ jsx(ClassNames, { children: ({ cx }) => /* @__PURE__ */ jsx(
+              node.type,
+              {
                 ...node.props,
                 ref,
                 className: cx(childClassName, node.props.className),
-                css: inView ? inViewStyles : hiddenStyles,
-                style: {
-                  ...childStyle,
-                  ...node.props.style,
-                  animationDelay: nodeDelay + "ms"
-                }
-              })
-            })
-          });
-        default:
-          return /* @__PURE__ */ jsx(InView, {
+                css: matchIfOrNull(() => animationStyles)(inView),
+                style: Object.assign(
+                  {},
+                  childStyle,
+                  node.props.style,
+                  hideWhen(!inView),
+                  { animationDelay: nodeDelay + "ms" }
+                )
+              }
+            ) })
+          }
+        );
+      default:
+        return /* @__PURE__ */ jsx(
+          InView,
+          {
             threshold: fraction,
             triggerOnce,
             onChange: onVisibilityChange,
-            children: ({ inView, ref }) => /* @__PURE__ */ jsx("div", {
-              ref,
-              className,
-              css: inView ? inViewStyles : hiddenStyles,
-              style: { ...style, animationDelay: nodeDelay + "ms" },
-              children: /* @__PURE__ */ jsx(ClassNames, {
-                children: ({ cx }) => /* @__PURE__ */ jsx(node.type, {
-                  ...node.props,
-                  className: cx(childClassName, node.props.className),
-                  style: { ...childStyle, ...node.props.style }
-                })
-              })
-            })
-          });
-      }
-    })
-  });
+            children: ({ inView, ref }) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref,
+                className,
+                css: matchIfOrNull(() => animationStyles)(inView),
+                style: Object.assign({}, style, {
+                  animationDelay: nodeDelay + "ms"
+                }),
+                children: /* @__PURE__ */ jsx(ClassNames, { children: ({ cx }) => /* @__PURE__ */ jsx(
+                  node.type,
+                  {
+                    ...node.props,
+                    className: cx(childClassName, node.props.className),
+                    style: Object.assign(
+                      {},
+                      childStyle,
+                      node.props.style
+                    )
+                  }
+                ) })
+              }
+            )
+          }
+        );
+    }
+  }) });
+};
+var textBaseStyles = {
+  display: "inline-block",
+  whiteSpace: "pre"
 };
 var TextReveal = (props) => {
   const {
@@ -681,7 +696,6 @@ var TextReveal = (props) => {
     duration = 1e3,
     fraction = 0,
     triggerOnce = false,
-    css: revealCss,
     className,
     style,
     children,
@@ -692,29 +706,34 @@ var TextReveal = (props) => {
     threshold: fraction,
     onChange: onVisibilityChange
   });
-  return cascade ? /* @__PURE__ */ jsx("div", {
-    ref,
-    className,
-    css: [revealCss, textBaseStyles],
-    style,
-    children: children.split("").map((char, index) => /* @__PURE__ */ jsx("span", {
-      css: inView ? animationStyles : hiddenStyles,
-      style: {
-        animationDelay: delay + index * duration * damping + "ms"
-      },
-      children: char
-    }, index))
-  }) : /* @__PURE__ */ jsx(FragmentReveal, {
-    ...props,
-    children
-  });
+  return matchIf(
+    () => /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className,
+        style: Object.assign({}, style, textBaseStyles),
+        children: children.split("").map((char, index) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            css: matchIfOrNull(() => animationStyles)(inView),
+            style: Object.assign({}, hideWhen(!inView), {
+              animationDelay: delay + index * duration * damping + "ms"
+            }),
+            children: char
+          },
+          index
+        ))
+      }
+    ),
+    () => /* @__PURE__ */ jsx(FragmentReveal, { ...props, children })
+  )(cascade);
 };
 var FragmentReveal = (props) => {
   const {
     animationStyles,
     fraction = 0,
     triggerOnce = false,
-    css: revealCss,
     className,
     style,
     children,
@@ -725,20 +744,24 @@ var FragmentReveal = (props) => {
     threshold: fraction,
     onChange: onVisibilityChange
   });
-  const inViewStyles = [revealCss, animationStyles];
-  return /* @__PURE__ */ jsx("div", {
-    ref,
-    className,
-    css: inView ? inViewStyles : hiddenStyles,
-    style,
-    children
-  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className,
+      css: matchIfOrNull(() => animationStyles)(inView),
+      style: Object.assign({}, style, hideWhen(!inView)),
+      children
+    }
+  );
 };
 
 // src/components/AttentionSeeker.tsx
 import { jsx as jsx2 } from "@emotion/react/jsx-runtime";
 function getStyles(effect) {
   switch (effect) {
+    case "bounce":
+      return [bounce, { transformOrigin: "center bottom" }];
     case "flash":
       return [flash];
     case "headShake":
@@ -763,19 +786,19 @@ function getStyles(effect) {
       return [tada];
     case "wobble":
       return [wobble];
-    case "bounce":
-    default:
-      return [bounce, { transformOrigin: "center bottom" }];
   }
 }
 var AttentionSeeker = (props) => {
-  const { effect = "bounce", ...rest } = props;
+  const { effect = "bounce", style, ...rest } = props;
   const [keyframes87, animationCss3] = useMemo2(() => getStyles(effect), [effect]);
-  return /* @__PURE__ */ jsx2(Reveal, {
-    keyframes: keyframes87,
-    css: animationCss3,
-    ...rest
-  });
+  return /* @__PURE__ */ jsx2(
+    Reveal,
+    {
+      keyframes: keyframes87,
+      style: Object.assign({}, style, animationCss3),
+      ...rest
+    }
+  );
 };
 
 // src/components/Bounce.tsx
@@ -1064,10 +1087,7 @@ var Bounce = (props) => {
     () => getStyles2(reverse, direction),
     [direction, reverse]
   );
-  return /* @__PURE__ */ jsx3(Reveal, {
-    keyframes: keyframes87,
-    ...rest
-  });
+  return /* @__PURE__ */ jsx3(Reveal, { keyframes: keyframes87, ...rest });
 };
 
 // src/components/Fade.tsx
@@ -1275,14 +1295,10 @@ var Fade = (props) => {
     () => getStyles3(big, reverse, direction),
     [big, direction, reverse]
   );
-  return /* @__PURE__ */ jsx4(Reveal, {
-    keyframes: keyframes87,
-    ...rest
-  });
+  return /* @__PURE__ */ jsx4(Reveal, { keyframes: keyframes87, ...rest });
 };
 
 // src/components/Flip.tsx
-import { css as css3 } from "@emotion/react";
 import { useMemo as useMemo5 } from "react";
 
 // src/animations/flippers/flip.ts
@@ -1421,25 +1437,25 @@ function getStyles4(reverse, direction) {
       return flip;
   }
 }
-var animationCss = css3`
-  backface-visibility: visible;
-`;
+var animationCss = {
+  backfaceVisibility: "visible"
+};
 var Flip = (props) => {
-  const { direction, reverse = false, ...rest } = props;
+  const { direction, reverse = false, style, ...rest } = props;
   const keyframes87 = useMemo5(
     () => getStyles4(reverse, direction),
     [direction, reverse]
   );
-  return /* @__PURE__ */ jsx5(Reveal, {
-    css: animationCss,
-    keyframes: keyframes87,
-    ...rest
-  });
+  return /* @__PURE__ */ jsx5(
+    Reveal,
+    {
+      keyframes: keyframes87,
+      style: Object.assign({}, style, animationCss),
+      ...rest
+    }
+  );
 };
 
-// src/components/Hinge.tsx
-import { css as css4 } from "@emotion/react";
-
 // src/animations/specials/hinge.ts
 import { keyframes as keyframes55 } from "@emotion/react";
 var hinge = keyframes55`
@@ -1518,24 +1534,25 @@ var rollOut = keyframes58`
 
 // src/components/Hinge.tsx
 import { jsx as jsx6 } from "@emotion/react/jsx-runtime";
-var animationCss2 = css4`
-  transform-origin: top left;
-`;
+var animationCss2 = {
+  transformOrigin: "top left"
+};
 var Hinge = (props) => {
-  return /* @__PURE__ */ jsx6(Reveal, {
-    css: animationCss2,
-    keyframes: hinge,
-    ...props
-  });
+  const { style, ...rest } = props;
+  return /* @__PURE__ */ jsx6(
+    Reveal,
+    {
+      keyframes: hinge,
+      style: Object.assign({}, style, animationCss2),
+      ...rest
+    }
+  );
 };
 
 // src/components/JackInTheBox.tsx
 import { jsx as jsx7 } from "@emotion/react/jsx-runtime";
 var JackInTheBox = (props) => {
-  return /* @__PURE__ */ jsx7(Reveal, {
-    keyframes: jackInTheBox,
-    ...props
-  });
+  return /* @__PURE__ */ jsx7(Reveal, { keyframes: jackInTheBox, ...props });
 };
 
 // src/components/Roll.tsx
@@ -1547,10 +1564,7 @@ function getStyles5(reverse) {
 var Roll = (props) => {
   const { reverse = false, ...rest } = props;
   const keyframes87 = useMemo6(() => getStyles5(reverse), [reverse]);
-  return /* @__PURE__ */ jsx8(Reveal, {
-    keyframes: keyframes87,
-    ...rest
-  });
+  return /* @__PURE__ */ jsx8(Reveal, { keyframes: keyframes87, ...rest });
 };
 
 // src/components/Rotate.tsx
@@ -1708,16 +1722,19 @@ function getStyles6(reverse, direction) {
   }
 }
 var Rotate = (props) => {
-  const { direction, reverse = false, ...rest } = props;
+  const { direction, reverse = false, style, ...rest } = props;
   const [keyframes87, animationCss3] = useMemo7(
     () => getStyles6(reverse, direction),
     [direction, reverse]
   );
-  return /* @__PURE__ */ jsx9(Reveal, {
-    css: animationCss3,
-    keyframes: keyframes87,
-    ...rest
-  });
+  return /* @__PURE__ */ jsx9(
+    Reveal,
+    {
+      keyframes: keyframes87,
+      style: Object.assign({}, style, animationCss3),
+      ...rest
+    }
+  );
 };
 
 // src/components/Slide.tsx
@@ -1848,10 +1865,7 @@ var Slide = (props) => {
     () => getStyles7(reverse, direction),
     [direction, reverse]
   );
-  return /* @__PURE__ */ jsx10(Reveal, {
-    keyframes: keyframes87,
-    ...rest
-  });
+  return /* @__PURE__ */ jsx10(Reveal, { keyframes: keyframes87, ...rest });
 };
 
 // src/components/Zoom.tsx
@@ -2033,10 +2047,7 @@ var Zoom = (props) => {
     () => getStyles8(reverse, direction),
     [direction, reverse]
   );
-  return /* @__PURE__ */ jsx11(Reveal, {
-    keyframes: keyframes87,
-    ...rest
-  });
+  return /* @__PURE__ */ jsx11(Reveal, { keyframes: keyframes87, ...rest });
 };
 export {
   AttentionSeeker,