@hanzogui/animations-css 2.0.0-rc.41-hanzoai.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+  Copyright (c) 2020 Nate Wienert
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.

package/dist/cjs/createAnimations.cjs

@@ -0,0 +1,426 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var createAnimations_exports = {};
+__export(createAnimations_exports, {
+  createAnimations: () => createAnimations
+});
+module.exports = __toCommonJS(createAnimations_exports);
+var import_animation_helpers = require("@hanzogui/animation-helpers");
+var import_constants = require("@hanzogui/constants");
+var import_use_presence = require("@hanzogui/use-presence");
+var import_web = require("@hanzogui/web");
+var import_react = __toESM(require("react"), 1);
+const EXTRACT_MS_REGEX = /(\d+(?:\.\d+)?)\s*ms/;
+const EXTRACT_S_REGEX = /(\d+(?:\.\d+)?)\s*s/;
+function extractDuration(animation) {
+  const msMatch = animation.match(EXTRACT_MS_REGEX);
+  if (msMatch) {
+    return Number.parseInt(msMatch[1], 10);
+  }
+  const sMatch = animation.match(EXTRACT_S_REGEX);
+  if (sMatch) {
+    return Math.round(Number.parseFloat(sMatch[1]) * 1e3);
+  }
+  return 300;
+}
+const MS_DURATION_REGEX = /(\d+(?:\.\d+)?)\s*ms/;
+const S_DURATION_REGEX = /(\d+(?:\.\d+)?)\s*s(?!tiffness)/;
+function applyDurationOverride(animation, durationMs) {
+  const msReplaced = animation.replace(MS_DURATION_REGEX, `${durationMs}ms`);
+  if (msReplaced !== animation) {
+    return msReplaced;
+  }
+  const sReplaced = animation.replace(S_DURATION_REGEX, `${durationMs}ms`);
+  if (sReplaced !== animation) {
+    return sReplaced;
+  }
+  return `${durationMs}ms ${animation}`;
+}
+const TRANSFORM_KEYS = ["x", "y", "scale", "scaleX", "scaleY", "rotate", "rotateX", "rotateY", "rotateZ", "skewX", "skewY"];
+function buildTransformString(style) {
+  if (!style) return "";
+  const parts = [];
+  if (style.x !== void 0 || style.y !== void 0) {
+    const x = style.x ?? 0;
+    const y = style.y ?? 0;
+    parts.push(`translate(${x}px, ${y}px)`);
+  }
+  if (style.scale !== void 0) {
+    parts.push(`scale(${style.scale})`);
+  }
+  if (style.scaleX !== void 0) {
+    parts.push(`scaleX(${style.scaleX})`);
+  }
+  if (style.scaleY !== void 0) {
+    parts.push(`scaleY(${style.scaleY})`);
+  }
+  if (style.rotate !== void 0) {
+    const val = style.rotate;
+    const unit = typeof val === "string" && val.includes("deg") ? "" : "deg";
+    parts.push(`rotate(${val}${unit})`);
+  }
+  if (style.rotateX !== void 0) {
+    parts.push(`rotateX(${style.rotateX}deg)`);
+  }
+  if (style.rotateY !== void 0) {
+    parts.push(`rotateY(${style.rotateY}deg)`);
+  }
+  if (style.rotateZ !== void 0) {
+    parts.push(`rotateZ(${style.rotateZ}deg)`);
+  }
+  if (style.skewX !== void 0) {
+    parts.push(`skewX(${style.skewX}deg)`);
+  }
+  if (style.skewY !== void 0) {
+    parts.push(`skewY(${style.skewY}deg)`);
+  }
+  return parts.join(" ");
+}
+function applyStylesToNode(node, style) {
+  if (!style) return;
+  const transformStr = buildTransformString(style);
+  if (transformStr) {
+    node.style.transform = transformStr;
+  }
+  for (const [key, value] of Object.entries(style)) {
+    if (TRANSFORM_KEYS.includes(key)) continue;
+    if (value === void 0) continue;
+    if (key === "opacity") {
+      node.style.opacity = String(value);
+    } else if (key === "backgroundColor") {
+      node.style.backgroundColor = String(value);
+    } else if (key === "color") {
+      node.style.color = String(value);
+    } else {
+      node.style[key] = typeof value === "number" ? `${value}px` : String(value);
+    }
+  }
+}
+function createAnimations(animations) {
+  const reactionListeners = /* @__PURE__ */new WeakMap();
+  return {
+    animations,
+    usePresence: import_use_presence.usePresence,
+    ResetPresence: import_use_presence.ResetPresence,
+    inputStyle: "css",
+    outputStyle: "css",
+    useAnimatedNumber(initial) {
+      const [val, setVal] = import_react.default.useState(initial);
+      const finishTimerRef = import_react.default.useRef(null);
+      return {
+        getInstance() {
+          return setVal;
+        },
+        getValue() {
+          return val;
+        },
+        setValue(next, config, onFinish) {
+          setVal(next);
+          if (finishTimerRef.current) {
+            clearTimeout(finishTimerRef.current);
+            finishTimerRef.current = null;
+          }
+          if (onFinish) {
+            if (!config || config.type === "direct" || config.type === "timing" && config.duration === 0) {
+              onFinish();
+            } else {
+              const duration = config.type === "timing" ? config.duration : 300;
+              finishTimerRef.current = setTimeout(onFinish, duration);
+            }
+          }
+          const listeners = reactionListeners.get(setVal);
+          if (listeners) {
+            listeners.forEach(listener => listener(next));
+          }
+        },
+        stop() {
+          if (finishTimerRef.current) {
+            clearTimeout(finishTimerRef.current);
+            finishTimerRef.current = null;
+          }
+        }
+      };
+    },
+    useAnimatedNumberReaction({
+      value
+    }, onValue) {
+      import_react.default.useEffect(() => {
+        const instance = value.getInstance();
+        let queue = reactionListeners.get(instance);
+        if (!queue) {
+          const next = /* @__PURE__ */new Set();
+          reactionListeners.set(instance, next);
+          queue = next;
+        }
+        queue.add(onValue);
+        return () => {
+          queue?.delete(onValue);
+        };
+      }, []);
+    },
+    useAnimatedNumberStyle(val, getStyle) {
+      return getStyle(val.getValue());
+    },
+    useAnimatedNumbersStyle(vals, getStyle) {
+      return getStyle(...vals.map(v => v.getValue()));
+    },
+    // @ts-ignore - styleState is added by createComponent
+    useAnimations: ({
+      props,
+      presence,
+      style,
+      componentState,
+      stateRef,
+      styleState
+    }) => {
+      const isHydrating = componentState.unmounted === true;
+      const isEntering = !!componentState.unmounted;
+      const isExiting = presence?.[0] === false;
+      const sendExitComplete = presence?.[1];
+      const wasEnteringRef = import_react.default.useRef(isEntering);
+      const justFinishedEntering = wasEnteringRef.current && !isEntering;
+      import_react.default.useEffect(() => {
+        wasEnteringRef.current = isEntering;
+      });
+      const exitCycleIdRef = import_react.default.useRef(0);
+      const exitCompletedRef = import_react.default.useRef(false);
+      const wasExitingRef = import_react.default.useRef(false);
+      const exitInterruptedRef = import_react.default.useRef(false);
+      const justStartedExiting = isExiting && !wasExitingRef.current;
+      const justStoppedExiting = !isExiting && wasExitingRef.current;
+      if (justStartedExiting) {
+        exitCycleIdRef.current++;
+        exitCompletedRef.current = false;
+      }
+      if (justStoppedExiting) {
+        exitCycleIdRef.current++;
+        exitInterruptedRef.current = true;
+      }
+      import_react.default.useEffect(() => {
+        wasExitingRef.current = isExiting;
+      });
+      const effectiveTransition = styleState?.effectiveTransition ?? props.transition;
+      const normalized = (0, import_animation_helpers.normalizeTransition)(effectiveTransition);
+      const animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
+      const effectiveAnimationKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
+      const defaultAnimation = effectiveAnimationKey ? animations[effectiveAnimationKey] : null;
+      const animatedProperties = (0, import_animation_helpers.getAnimatedProperties)(normalized);
+      const hasDefault = normalized.default !== null || normalized.enter !== null || normalized.exit !== null;
+      const hasPerPropertyConfigs = animatedProperties.length > 0;
+      let keys;
+      if (props.animateOnly) {
+        keys = props.animateOnly;
+      } else if (hasPerPropertyConfigs && !hasDefault) {
+        keys = animatedProperties;
+      } else if (hasPerPropertyConfigs && hasDefault) {
+        keys = ["all", ...animatedProperties];
+      } else {
+        keys = ["all"];
+      }
+      (0, import_constants.useIsomorphicLayoutEffect)(() => {
+        const host = stateRef.current.host;
+        if (!sendExitComplete || !isExiting || !host) return;
+        const node = host;
+        const cycleId = exitCycleIdRef.current;
+        const completeExit = () => {
+          if (cycleId !== exitCycleIdRef.current) return;
+          if (exitCompletedRef.current) return;
+          exitCompletedRef.current = true;
+          sendExitComplete();
+        };
+        if (keys.length === 0) {
+          completeExit();
+          return;
+        }
+        let rafId;
+        const wasInterrupted = exitInterruptedRef.current;
+        let ignoreCancelEvents = wasInterrupted;
+        const enterStyle = props.enterStyle;
+        const exitStyle = props.exitStyle;
+        const delayStr2 = normalized.delay ? ` ${normalized.delay}ms` : "";
+        const durationOverride2 = normalized.config?.duration;
+        const exitTransitionString = keys.map(key => {
+          const propAnimation = normalized.properties[key];
+          let animationValue = null;
+          if (typeof propAnimation === "string") {
+            animationValue = animations[propAnimation];
+          } else if (propAnimation && typeof propAnimation === "object" && propAnimation.type) {
+            animationValue = animations[propAnimation.type];
+          } else if (defaultAnimation) {
+            animationValue = defaultAnimation;
+          }
+          if (animationValue && durationOverride2) {
+            animationValue = applyDurationOverride(animationValue, durationOverride2);
+          }
+          return animationValue ? `${key} ${animationValue}${delayStr2}` : null;
+        }).filter(Boolean).join(", ");
+        if (wasInterrupted) {
+          exitInterruptedRef.current = false;
+          node.style.transition = "none";
+          if (exitStyle) {
+            const resetStyle = {};
+            for (const key of Object.keys(exitStyle)) {
+              if (key === "opacity") {
+                resetStyle[key] = 1;
+              } else if (TRANSFORM_KEYS.includes(key)) {
+                resetStyle[key] = key === "scale" || key === "scaleX" || key === "scaleY" ? 1 : 0;
+              } else if (enterStyle?.[key] !== void 0) {
+                resetStyle[key] = enterStyle[key];
+              }
+            }
+            applyStylesToNode(node, resetStyle);
+          } else {
+            node.style.opacity = "1";
+            node.style.transform = "none";
+          }
+          void node.offsetHeight;
+        } else if (exitStyle) {
+          ignoreCancelEvents = true;
+          node.style.transition = "none";
+          const resetStyle = {};
+          for (const key of Object.keys(exitStyle)) {
+            if (key === "opacity") {
+              resetStyle[key] = 1;
+            } else if (TRANSFORM_KEYS.includes(key)) {
+              resetStyle[key] = key === "scale" || key === "scaleX" || key === "scaleY" ? 1 : 0;
+            } else if (enterStyle?.[key] !== void 0) {
+              resetStyle[key] = enterStyle[key];
+            }
+          }
+          applyStylesToNode(node, resetStyle);
+          void node.offsetHeight;
+          rafId = requestAnimationFrame(() => {
+            if (cycleId !== exitCycleIdRef.current) return;
+            node.style.transition = exitTransitionString;
+            void node.offsetHeight;
+            applyStylesToNode(node, exitStyle);
+            ignoreCancelEvents = false;
+          });
+        }
+        let maxDuration = defaultAnimation ? extractDuration(defaultAnimation) : 200;
+        const animationConfigs = (0, import_animation_helpers.getAnimationConfigsForKeys)(normalized, animations, keys, defaultAnimation);
+        for (const animationValue of animationConfigs.values()) {
+          if (animationValue) {
+            const duration = extractDuration(animationValue);
+            if (duration > maxDuration) {
+              maxDuration = duration;
+            }
+          }
+        }
+        const delay = normalized.delay ?? 0;
+        const fallbackTimeout = maxDuration + delay;
+        const timeoutId = setTimeout(() => {
+          completeExit();
+        }, fallbackTimeout);
+        const transitioningProps = new Set(keys);
+        let completedCount = 0;
+        const onFinishAnimation = event => {
+          if (event.target !== node) return;
+          const eventProp = event.propertyName;
+          if (transitioningProps.has(eventProp) || eventProp === "all") {
+            completedCount++;
+            if (completedCount >= transitioningProps.size) {
+              clearTimeout(timeoutId);
+              completeExit();
+            }
+          }
+        };
+        const onCancelAnimation = () => {
+          if (ignoreCancelEvents) return;
+          clearTimeout(timeoutId);
+          completeExit();
+        };
+        node.addEventListener("transitionend", onFinishAnimation);
+        node.addEventListener("transitioncancel", onCancelAnimation);
+        if (wasInterrupted) {
+          rafId = requestAnimationFrame(() => {
+            if (cycleId !== exitCycleIdRef.current) return;
+            node.style.transition = exitTransitionString;
+            void node.offsetHeight;
+            applyStylesToNode(node, exitStyle);
+            ignoreCancelEvents = false;
+          });
+        }
+        return () => {
+          clearTimeout(timeoutId);
+          if (rafId !== void 0) cancelAnimationFrame(rafId);
+          node.removeEventListener("transitionend", onFinishAnimation);
+          node.removeEventListener("transitioncancel", onCancelAnimation);
+          node.style.transition = "";
+        };
+      }, [sendExitComplete, isExiting, stateRef, keys, normalized, defaultAnimation, props.enterStyle, props.exitStyle]);
+      if (isHydrating) {
+        return null;
+      }
+      if (!(0, import_animation_helpers.hasAnimation)(normalized)) {
+        return null;
+      }
+      if (Array.isArray(style.transform)) {
+        style.transform = (0, import_web.transformsToString)(style.transform);
+      }
+      const delayStr = normalized.delay ? ` ${normalized.delay}ms` : "";
+      const durationOverride = normalized.config?.duration;
+      style.transition = keys.map(key => {
+        const propAnimation = normalized.properties[key];
+        let animationValue = null;
+        if (typeof propAnimation === "string") {
+          animationValue = animations[propAnimation];
+        } else if (propAnimation && typeof propAnimation === "object" && propAnimation.type) {
+          animationValue = animations[propAnimation.type];
+        } else if (defaultAnimation) {
+          animationValue = defaultAnimation;
+        }
+        if (animationValue && durationOverride) {
+          animationValue = applyDurationOverride(animationValue, durationOverride);
+        }
+        return animationValue ? `${key} ${animationValue}${delayStr}` : null;
+      }).filter(Boolean).join(", ");
+      if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+        console.info("CSS animation", {
+          props,
+          animations,
+          normalized,
+          defaultAnimation,
+          style,
+          isEntering,
+          isExiting
+        });
+      }
+      return {
+        style,
+        className: isEntering ? "t_unmounted" : ""
+      };
+    }
+  };
+}