@hanzogui/animations-motion 8.3.1 → 8.3.2

package/dist/esm/createAnimations.mjs

@@ -1,683 +0,0 @@
-import { getEffectiveAnimation, normalizeTransition } from "@hanzogui/animation-helpers";
-import { ResetPresence, usePresence } from "@hanzogui/use-presence";
-import { fixStyles, getConfig, getSplitStyles, hooks, styleToCSS, Text, useComposedRefs, useIsomorphicLayoutEffect, useThemeWithState, View } from "@hanzogui/web";
-import { useAnimate, useMotionValue, useMotionValueEvent } from "motion/react";
-import React, { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-const isServer = typeof window === "undefined";
-function useAnimateSSRSafe() {
-  if (isServer) {
-    return [useRef(null), () => {}];
-  }
-  return useAnimate();
-}
-const MotionValueStrategy = /* @__PURE__ */new WeakMap();
-const PendingMotionOnFinish = /* @__PURE__ */new WeakMap();
-function settlePendingMotionOnFinish(mv, controls) {
-  const onFinish = PendingMotionOnFinish.get(mv);
-  if (!onFinish) return;
-  PendingMotionOnFinish.delete(mv);
-  controls.then(() => onFinish()).catch(() => onFinish());
-}
-function createAnimations(animations) {
-  let isHydratingGlobal;
-  const hydratingComponents = /* @__PURE__ */new Set();
-  return {
-    View: MotionView,
-    Text: MotionText,
-    isReactNative: false,
-    inputStyle: "css",
-    outputStyle: "inline",
-    avoidReRenders: true,
-    animations,
-    usePresence,
-    ResetPresence,
-    onMount() {
-      isHydratingGlobal = false;
-      hydratingComponents.forEach(cb => cb());
-    },
-    useAnimations: animationProps => {
-      if (isHydratingGlobal === void 0 && !getConfig().settings.disableSSR) {
-        isHydratingGlobal = true;
-      }
-      const {
-        props,
-        style,
-        componentState,
-        stateRef,
-        useStyleEmitter,
-        presence,
-        styleProps
-      } = animationProps;
-      const animationKey = Array.isArray(props.transition) ? props.transition[0] : props.transition;
-      const isComponentHydrating = componentState.unmounted === true;
-      const isMounting = componentState.unmounted === "should-enter";
-      const isEntering = !!componentState.unmounted;
-      const isExiting = presence?.[0] === false;
-      const sendExitComplete = presence?.[1];
-      const refs = useRef(null);
-      if (!refs.current) {
-        refs.current = {
-          isFirstRender: true,
-          lastDoAnimate: null,
-          lastDontAnimate: null,
-          controls: null,
-          lastAnimateAt: 0,
-          disposed: false,
-          wasExiting: false,
-          isExiting: false,
-          sendExitComplete: void 0,
-          animationState: "default",
-          frozenExitTarget: null,
-          exitCompleteScheduled: false,
-          wasEntering: false,
-          wasDisabled: false,
-          wasNoClass: !!styleProps.noClass
-        };
-      }
-      const justFinishedEntering = refs.current.wasEntering && !isEntering;
-      useEffect(() => {
-        refs.current.wasEntering = isEntering;
-      });
-      const animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
-      const disableAnimation = isComponentHydrating || isMounting || !animationKey;
-      const [scope, animate] = useAnimateSSRSafe();
-      refs.current.isExiting = isExiting;
-      refs.current.sendExitComplete = sendExitComplete;
-      refs.current.animationState = animationState;
-      const justStartedExiting = isExiting && !refs.current.wasExiting;
-      const justStoppedExiting = !isExiting && refs.current.wasExiting;
-      if (justStartedExiting || justStoppedExiting) {
-        refs.current.frozenExitTarget = null;
-        refs.current.exitCompleteScheduled = false;
-      }
-      useEffect(() => {
-        refs.current.wasExiting = isExiting;
-      });
-      const {
-        dontAnimate = {},
-        doAnimate,
-        animationOptions
-      } = getMotionAnimatedProps(props, style, disableAnimation, animationState);
-      const [firstRenderStyle] = useState(style);
-      if (refs.current.isFirstRender) {
-        refs.current.lastDontAnimate = firstRenderStyle;
-      }
-      const [isHydrating, setIsHydrating] = useState(isHydratingGlobal);
-      useLayoutEffect(() => {
-        if (isHydratingGlobal) {
-          hydratingComponents.add(() => {
-            setIsHydrating(false);
-          });
-        }
-        return () => {
-          refs.current.disposed = true;
-        };
-      }, []);
-      const flushAnimation = ({
-        doAnimate: doAnimateRaw = {},
-        animationOptions: passedOptions = {},
-        dontAnimate: dontAnimate2
-      }) => {
-        let startedControls = null;
-        const isCurrentlyExiting = refs.current.isExiting;
-        const currentSendExitComplete = refs.current.sendExitComplete;
-        let doAnimate2 = doAnimateRaw;
-        if (isCurrentlyExiting && refs.current.frozenExitTarget) {
-          doAnimate2 = refs.current.frozenExitTarget;
-        }
-        const animationOptions2 = isCurrentlyExiting && currentSendExitComplete ? getAnimationOptions(props.transition ?? null, "exit") : passedOptions;
-        try {
-          const node = stateRef.current.host;
-          if (refs.current.isFirstRender) {
-            refs.current.lastDontAnimate = null;
-            refs.current.lastDoAnimate = null;
-          }
-          if (process.env.NODE_ENV === "development") {
-            if (props["debug"] && props["debug"] !== "profile") {
-              console.groupCollapsed(`[motion] animate (${JSON.stringify(getDiff(refs.current.lastDoAnimate, doAnimate2), null, 2)})`);
-              console.info({
-                props,
-                componentState,
-                doAnimate: doAnimate2,
-                dontAnimate: dontAnimate2,
-                animationOptions: animationOptions2,
-                animationProps,
-                lastDoAnimate: {
-                  ...refs.current.lastDoAnimate
-                },
-                lastDontAnimate: {
-                  ...refs.current.lastDontAnimate
-                },
-                isExiting,
-                style,
-                node
-              });
-              console.groupCollapsed(`trace >`);
-              console.trace();
-              console.groupEnd();
-              console.groupEnd();
-            }
-          }
-          if (!(node instanceof HTMLElement)) {
-            return;
-          }
-          const prevDont = refs.current.lastDontAnimate;
-          if (dontAnimate2) {
-            if (prevDont) {
-              removeRemovedStyles(prevDont, dontAnimate2, node, doAnimate2);
-              const changed = getDiff(prevDont, dontAnimate2);
-              if (changed) {
-                Object.assign(node.style, changed);
-              }
-            } else {
-              Object.assign(node.style, dontAnimate2);
-            }
-          }
-          if (doAnimate2) {
-            if (prevDont) {
-              for (const key in prevDont) {
-                if (key in doAnimate2) {
-                  node.style[key] = prevDont[key];
-                  if (refs.current.lastDoAnimate) {
-                    refs.current.lastDoAnimate[key] = prevDont[key];
-                  }
-                }
-              }
-            }
-            const lastAnimated = refs.current.lastDoAnimate;
-            if (lastAnimated) {
-              removeRemovedStyles(lastAnimated, doAnimate2, node, dontAnimate2);
-            }
-            const diff = getDiff(refs.current.lastDoAnimate, doAnimate2);
-            if (diff) {
-              if (isCurrentlyExiting && !refs.current.frozenExitTarget) {
-                refs.current.frozenExitTarget = {
-                  ...doAnimate2
-                };
-              }
-              const isPopperPosition = node.hasAttribute("data-popper-animate-position");
-              let midFlightValues = null;
-              if (refs.current.controls) {
-                try {
-                  const computed = getComputedStyle(node);
-                  midFlightValues = {};
-                  for (const key in diff) {
-                    const val = computed[key];
-                    if (val !== void 0 && val !== "") {
-                      midFlightValues[key] = val;
-                    }
-                  }
-                } catch {}
-                if (isCurrentlyExiting) {
-                  refs.current.controls.stop();
-                }
-                if (midFlightValues) {
-                  for (const key in midFlightValues) {
-                    ;
-                    node.style[key] = midFlightValues[key];
-                  }
-                }
-                if (isPopperPosition) {
-                  const anims = node.getAnimations();
-                  for (const anim of anims) {
-                    anim.cancel();
-                  }
-                }
-              }
-              const fixedDiff = fixTransparentColors(diff, refs.current.lastDoAnimate, doAnimate2);
-              if ((isPopperPosition || isCurrentlyExiting) && midFlightValues?.transform && fixedDiff.transform) {
-                fixedDiff.transform = [midFlightValues.transform, fixedDiff.transform];
-              }
-              startedControls = animate(scope.current, fixedDiff, animationOptions2);
-              refs.current.controls = startedControls;
-              refs.current.lastAnimateAt = Date.now();
-            }
-          }
-          refs.current.lastDontAnimate = dontAnimate2 ? {
-            ...dontAnimate2
-          } : {};
-          refs.current.lastDoAnimate = doAnimate2 ? {
-            ...doAnimate2
-          } : {};
-        } finally {
-          if (isCurrentlyExiting && currentSendExitComplete) {
-            if (startedControls) {
-              refs.current.exitCompleteScheduled = true;
-              startedControls.finished.then(() => {
-                if (refs.current.isExiting) {
-                  currentSendExitComplete();
-                }
-              }).catch(() => {
-                if (refs.current.isExiting) {
-                  currentSendExitComplete();
-                }
-              });
-            } else if (!refs.current.exitCompleteScheduled) {
-              currentSendExitComplete();
-            }
-          }
-        }
-      };
-      useStyleEmitter?.((nextStyle, effectiveTransition) => {
-        const animationProps2 = getMotionAnimatedProps(props, nextStyle, disableAnimation, refs.current.animationState, effectiveTransition);
-        flushAnimation(animationProps2);
-      });
-      useIsomorphicLayoutEffect(() => {
-        if (refs.current.isFirstRender) {
-          refs.current.isFirstRender = false;
-          refs.current.wasDisabled = disableAnimation;
-          if (isHydrating) {
-            if (doAnimate && Object.keys(doAnimate).length > 0) {
-              refs.current.lastDoAnimate = {
-                ...doAnimate
-              };
-            } else {
-              refs.current.lastDoAnimate = dontAnimate ? {
-                ...dontAnimate
-              } : {};
-            }
-            refs.current.lastDontAnimate = dontAnimate ? {
-              ...dontAnimate
-            } : {};
-            refs.current.lastAnimateAt = Date.now();
-            return;
-          }
-          refs.current.lastDontAnimate = dontAnimate ? {
-            ...dontAnimate
-          } : {};
-          refs.current.lastDoAnimate = doAnimate ? {
-            ...doAnimate
-          } : {};
-          return;
-        }
-        const justEnabled = refs.current.wasDisabled && !disableAnimation;
-        refs.current.wasDisabled = disableAnimation;
-        const justStrippedClasses = !refs.current.wasNoClass && !!styleProps.noClass;
-        refs.current.wasNoClass = !!styleProps.noClass;
-        if ((justEnabled || justStrippedClasses) && animationState !== "enter") {
-          const node = stateRef.current.host;
-          if (node instanceof HTMLElement) {
-            if (dontAnimate) Object.assign(node.style, dontAnimate);
-            if (doAnimate) Object.assign(node.style, doAnimate);
-          }
-          refs.current.lastDontAnimate = dontAnimate ? {
-            ...dontAnimate
-          } : {};
-          refs.current.lastDoAnimate = doAnimate ? {
-            ...doAnimate
-          } : {};
-          return;
-        }
-        flushAnimation({
-          doAnimate,
-          dontAnimate,
-          animationOptions
-        });
-      }, [style, isExiting, disableAnimation, styleProps.noClass]);
-      if (process.env.NODE_ENV === "development") {
-        if (props["debug"] && props["debug"] !== "profile") {
-          console.groupCollapsed(`[motion] render`);
-          console.info({
-            style,
-            doAnimate,
-            dontAnimate,
-            scope,
-            animationOptions,
-            isExiting,
-            isFirstRender: refs.current.isFirstRender,
-            animationProps
-          });
-          console.groupEnd();
-        }
-      }
-      return {
-        style: firstRenderStyle,
-        ref: scope,
-        render: "div"
-      };
-    },
-    useAnimatedNumber(initial) {
-      const motionValue = useMotionValue(initial);
-      return React.useMemo(() => ({
-        getInstance() {
-          return motionValue;
-        },
-        getValue() {
-          return motionValue.get();
-        },
-        setValue(next, config = {
-          type: "spring"
-        }, onFinish) {
-          if (config.type === "direct") {
-            MotionValueStrategy.set(motionValue, {
-              type: "direct"
-            });
-            motionValue.set(next);
-            onFinish?.();
-            return;
-          }
-          MotionValueStrategy.set(motionValue, config);
-          if (onFinish) {
-            const prior = PendingMotionOnFinish.get(motionValue);
-            if (prior) {
-              PendingMotionOnFinish.delete(motionValue);
-              prior();
-            }
-            PendingMotionOnFinish.set(motionValue, onFinish);
-          }
-          motionValue.set(next);
-        },
-        stop() {
-          motionValue.stop();
-        }
-      }), [motionValue]);
-    },
-    useAnimatedNumberReaction({
-      value
-    }, onValue) {
-      const instance = value.getInstance();
-      useMotionValueEvent(instance, "change", onValue);
-    },
-    useAnimatedNumberStyle(val, getStyleProp) {
-      const motionValue = val.getInstance();
-      const getStyleRef = useRef(getStyleProp);
-      getStyleRef.current = getStyleProp;
-      return useMemo(() => {
-        return {
-          getStyle: cur => {
-            return getStyleRef.current(cur);
-          },
-          motionValue
-        };
-      }, []);
-    },
-    useAnimatedNumbersStyle(vals, getStyleProp) {
-      const motionValues = vals.map(v => v.getInstance());
-      const getStyleRef = useRef(getStyleProp);
-      getStyleRef.current = getStyleProp;
-      return useMemo(() => {
-        return {
-          getStyle: (...currentValues) => getStyleRef.current(...currentValues),
-          motionValues
-        };
-      }, []);
-    }
-  };
-  function getMotionAnimatedProps(props, style, disable, animationState = "default", transitionOverride) {
-    if (disable) {
-      return {
-        dontAnimate: style
-      };
-    }
-    const animationOptions = getAnimationOptions(transitionOverride ?? props.transition ?? null, animationState);
-    let dontAnimate;
-    let doAnimate;
-    const animateOnly = props.animateOnly;
-    for (const key in style) {
-      const value = style[key];
-      if (disableAnimationProps.has(key) || animateOnly && !animateOnly.includes(key)) {
-        dontAnimate ||= {};
-        dontAnimate[key] = value;
-      } else {
-        doAnimate ||= {};
-        doAnimate[key] = value;
-      }
-    }
-    return {
-      dontAnimate,
-      doAnimate,
-      animationOptions
-    };
-  }
-  function getAnimationOptions(transitionProp, animationState = "default") {
-    const normalized = normalizeTransition(transitionProp);
-    let effectiveKey = getEffectiveAnimation(normalized, animationState);
-    if (!effectiveKey && animationState === "default") {
-      effectiveKey = normalized.enter || normalized.exit || null;
-    }
-    const globalConfigOverride = normalized.config ? {
-      ...normalized.config
-    } : void 0;
-    if (!effectiveKey && Object.keys(normalized.properties).length === 0 && !globalConfigOverride) {
-      return {};
-    }
-    const defaultConfig = effectiveKey ? withInferredType(animations[effectiveKey]) : null;
-    const delay = normalized.delay;
-    const result = {};
-    if (defaultConfig) {
-      Object.assign(result, defaultConfig);
-    }
-    if (globalConfigOverride) {
-      Object.assign(result, globalConfigOverride);
-      if (result.type === void 0 && result.duration !== void 0 && result.damping === void 0 && result.stiffness === void 0 && result.mass === void 0) {
-        result.type = "tween";
-      }
-    }
-    if (delay) {
-      result.delay = delay;
-    }
-    if (defaultConfig || globalConfigOverride || delay) {
-      result.default = {
-        ...defaultConfig,
-        ...globalConfigOverride,
-        ...(delay ? {
-          delay
-        } : null)
-      };
-    }
-    for (const [propName, animationNameOrConfig] of Object.entries(normalized.properties)) {
-      if (typeof animationNameOrConfig === "string") {
-        result[propName] = withInferredType(animations[animationNameOrConfig]);
-      } else if (animationNameOrConfig && typeof animationNameOrConfig === "object") {
-        const baseConfig = animationNameOrConfig.type ? withInferredType(animations[animationNameOrConfig.type]) : defaultConfig;
-        result[propName] = {
-          ...baseConfig,
-          ...animationNameOrConfig
-        };
-      }
-    }
-    convertMsToS(result);
-    convertMsToS(result.default);
-    for (const key in result) {
-      if (key !== "default" && typeof result[key] === "object") {
-        convertMsToS(result[key]);
-      }
-    }
-    return result;
-  }
-}
-function withInferredType(config) {
-  if (!config) {
-    return {
-      type: "spring"
-    };
-  }
-  const isTimingBased = config.duration !== void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
-  return {
-    type: isTimingBased ? "tween" : "spring",
-    ...config
-  };
-}
-function convertMsToS(config) {
-  if (!config) return;
-  if (typeof config.delay === "number") config.delay = config.delay / 1e3;
-  if (typeof config.duration === "number") {
-    const isTimingBased = config.type === "tween" || config.type === void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
-    if (isTimingBased) {
-      config.duration = config.duration / 1e3;
-    }
-  }
-}
-function removeRemovedStyles(prev, next, node, dontClearIfIn) {
-  for (const key in prev) {
-    if (!(key in next)) {
-      if (dontClearIfIn && key in dontClearIfIn) {
-        continue;
-      }
-      node.style[key] = "";
-    }
-  }
-}
-const disableAnimationProps = /* @__PURE__ */new Set(["alignContent", "alignItems", "boxSizing", "contain", "containerType", "display", "flexBasis", "flexDirection", "fontFamily", "justifyContent", "overflow", "overflowX", "overflowY", "pointerEvents", "position", "textWrap", "userSelect"]);
-const MotionView = createMotionView("div");
-const MotionText = createMotionView("span");
-function createMotionView(defaultTag) {
-  const isText = defaultTag === "span";
-  const Component = forwardRef((propsIn, ref) => {
-    const {
-      forwardedRef,
-      animation,
-      render = defaultTag,
-      style,
-      ...propsRest
-    } = propsIn;
-    const [scope, animate] = useAnimateSSRSafe();
-    const hostRef = useRef(null);
-    const composedRefs = useComposedRefs(forwardedRef, ref, hostRef, scope);
-    const stateRef = useRef(null);
-    if (!stateRef.current) {
-      stateRef.current = {
-        get host() {
-          return hostRef.current;
-        }
-      };
-    }
-    const [_, state] = useThemeWithState({});
-    const styles = Array.isArray(style) ? style : [style];
-    const [animatedStyle, nonAnimatedStyles] = (() => {
-      let animatedStyle2;
-      const nonAnimatedStyles2 = [];
-      for (const style2 of styles) {
-        if (style2.getStyle) {
-          animatedStyle2 = style2;
-        } else {
-          nonAnimatedStyles2.push(style2);
-        }
-      }
-      return [animatedStyle2, nonAnimatedStyles2];
-    })();
-    function getProps(props2) {
-      const out = getSplitStyles(props2, isText ? Text.staticConfig : View.staticConfig, state?.theme, state?.name, {
-        unmounted: false
-      }, {
-        isAnimated: false,
-        noClass: true,
-        resolveValues: "auto"
-      });
-      if (!out) {
-        return {};
-      }
-      if (out.viewProps.style) {
-        fixStyles(out.viewProps.style);
-        styleToCSS(out.viewProps.style);
-      }
-      return out.viewProps;
-    }
-    const props = getProps({
-      ...propsRest,
-      style: nonAnimatedStyles
-    });
-    const Element = render || "div";
-    const transformedProps = hooks.usePropsTransform?.(render, props, stateRef, false);
-    useEffect(() => {
-      if (!animatedStyle) return;
-      if (animatedStyle.motionValues) {
-        const mvs = animatedStyle.motionValues;
-        const unsubs = mvs.map(mv => mv.on("change", () => {
-          const currentValues = mvs.map(v => v.get());
-          const nextStyle = animatedStyle.getStyle(...currentValues);
-          const animationConfig = MotionValueStrategy.get(mv);
-          const node = hostRef.current;
-          const webStyle = getProps({
-            style: nextStyle
-          }).style;
-          if (webStyle && node instanceof HTMLElement) {
-            const motionAnimationConfig = animationConfig?.type === "timing" ? {
-              type: "tween",
-              duration: (animationConfig?.duration || 0) / 1e3
-            } : animationConfig?.type === "direct" ? {
-              type: "tween",
-              duration: 0
-            } : {
-              type: "spring",
-              ...animationConfig
-            };
-            const controls = animate(node, webStyle, motionAnimationConfig);
-            settlePendingMotionOnFinish(mv, controls);
-          }
-        }));
-        return () => unsubs.forEach(fn => fn());
-      }
-      if (!animatedStyle.motionValue) return;
-      return animatedStyle.motionValue.on("change", value => {
-        const nextStyle = animatedStyle.getStyle(value);
-        const animationConfig = MotionValueStrategy.get(animatedStyle.motionValue);
-        const node = hostRef.current;
-        const webStyle = getProps({
-          style: nextStyle
-        }).style;
-        if (webStyle && node instanceof HTMLElement) {
-          const motionAnimationConfig = animationConfig?.type === "timing" ? {
-            type: "tween",
-            duration: (animationConfig?.duration || 0) / 1e3
-          } : animationConfig?.type === "direct" ? {
-            type: "tween",
-            duration: 0
-          } : {
-            type: "spring",
-            ...animationConfig
-          };
-          const controls = animate(node, webStyle, motionAnimationConfig);
-          settlePendingMotionOnFinish(animatedStyle.motionValue, controls);
-        }
-      });
-    }, [animatedStyle]);
-    return /* @__PURE__ */jsx(Element, {
-      ...transformedProps,
-      ref: composedRefs
-    });
-  });
-  Component["acceptRenderProp"] = true;
-  return Component;
-}
-function getDiff(previous, next) {
-  if (!previous) {
-    return next;
-  }
-  let diff = null;
-  for (const key in next) {
-    if (next[key] !== previous[key]) {
-      diff ||= {};
-      diff[key] = next[key];
-    }
-  }
-  return diff;
-}
-function fixTransparentColors(diff, previous, next) {
-  let result = diff;
-  for (const key in diff) {
-    if (diff[key] === "transparent") {
-      let fixed = "rgba(0, 0, 0, 0)";
-      const candidates = [previous?.[key], next?.[key]];
-      for (const candidate of candidates) {
-        if (typeof candidate === "string" && candidate !== "transparent") {
-          const rgbaMatch = candidate.match(/^rgba?\(([^,]+),\s*([^,]+),\s*([^,)]+)/);
-          if (rgbaMatch) {
-            fixed = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0)`;
-            break;
-          }
-        }
-      }
-      if (result === diff) {
-        result = {
-          ...diff
-        };
-      }
-      result[key] = fixed;
-    }
-  }
-  return result;
-}
-export { createAnimations, disableAnimationProps };
-//# sourceMappingURL=createAnimations.mjs.map