@eightshift/ui-components 6.0.13 → 6.1.1

package/dist/{proxy-B_RaYTfe.js → proxy-DFlYXk07.js}

@@ -1800,7 +1800,8 @@ class NativeAnimation extends WithPromise {
    * while deferring the commit until the next animation frame.
    */
   commitStyles() {
-    if (!this.isPseudoElement) {
+    const element = this.options?.element;
+    if (!this.isPseudoElement && element?.isConnected) {
       this.animation.commitStyles?.();
     }
   }
@@ -1948,7 +1949,7 @@ function makeAnimationInstant(options) {
   options.duration = 0;
   options.type = "keyframes";
 }
-const acceleratedValues = /* @__PURE__ */ new Set([
+const acceleratedValues$1 = /* @__PURE__ */ new Set([
   "opacity",
   "clipPath",
   "filter",
@@ -1964,7 +1965,7 @@ function supportsBrowserAnimation(options) {
     return false;
   }
   const { onUpdate, transformTemplate } = motionValue2.owner.getProps();
-  return supportsWaapi() && name && acceleratedValues.has(name) && (name !== "transform" || !transformTemplate) && /**
+  return supportsWaapi() && name && acceleratedValues$1.has(name) && (name !== "transform" || !transformTemplate) && /**
    * If we're outputting values to onUpdate then we can't use WAAPI as there's
    * no way to read the value from WAAPI every frame.
    */
@@ -2164,8 +2165,19 @@ function getFinalKeyframe(keyframes2, { repeat, repeatType = "loop" }, finalKeyf
   const index = repeat && repeatType !== "loop" && repeat % 2 === 1 ? 0 : resolvedKeyframes.length - 1;
   return resolvedKeyframes[index];
 }
+function resolveTransition(transition, parentTransition) {
+  if (transition?.inherit && parentTransition) {
+    const { inherit: _, ...rest } = transition;
+    return { ...parentTransition, ...rest };
+  }
+  return transition;
+}
 function getValueTransition(transition, key) {
-  return transition?.[key] ?? transition?.["default"] ?? transition;
+  const valueTransition = transition?.[key] ?? transition?.["default"] ?? transition;
+  if (valueTransition !== transition) {
+    return resolveTransition(valueTransition, transition);
+  }
+  return valueTransition;
 }
 function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
   return !!Object.keys(transition).length;
@@ -2208,7 +2220,7 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
       shouldSkip = true;
     }
   }
-  if (MotionGlobalConfig.instantAnimations || MotionGlobalConfig.skipAnimations) {
+  if (MotionGlobalConfig.instantAnimations || MotionGlobalConfig.skipAnimations || element?.shouldSkipAnimations) {
     shouldSkip = true;
     makeAnimationInstant(options);
     options.delay = 0;
@@ -2588,7 +2600,9 @@ function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
   return shouldBlock;
 }
 function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0, transitionOverride, type } = {}) {
-  let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = targetAndTransition;
+  let { transition, transitionEnd, ...target } = targetAndTransition;
+  const defaultTransition = visualElement.getDefaultTransition();
+  transition = transition ? resolveTransition(transition, defaultTransition) : defaultTransition;
   const reduceMotion = transition?.reduceMotion;
   if (transitionOverride)
     transition = transitionOverride;
@@ -2628,11 +2642,14 @@ function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0,
     }
   }
   if (transitionEnd) {
-    Promise.all(animations2).then(() => {
-      frame.update(() => {
-        transitionEnd && setTarget(visualElement, transitionEnd);
-      });
+    const applyTransitionEnd = () => frame.update(() => {
+      transitionEnd && setTarget(visualElement, transitionEnd);
     });
+    if (animations2.length) {
+      Promise.all(animations2).then(applyTransitionEnd);
+    } else {
+      applyTransitionEnd();
+    }
   }
   return animations2;
 }
@@ -2950,6 +2967,15 @@ class DOMKeyframesResolver extends KeyframeResolver {
     this.resolveNoneKeyframes();
   }
 }
+const acceleratedValues = /* @__PURE__ */ new Set([
+  "opacity",
+  "clipPath",
+  "filter",
+  "transform"
+  // TODO: Can be accelerated but currently disabled until https://issues.chromium.org/issues/41491098 is resolved
+  // or until we implement support for linear() easing.
+  // "background-color"
+]);
 function resolveElements(elementOrSelector, scope, selectorCache) {
   if (elementOrSelector == null) {
     return [];
@@ -3014,23 +3040,55 @@ function isValidHover(event) {
 }
 function hover(elementOrSelector, onHoverStart, options = {}) {
   const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options);
-  const onPointerEnter = (enterEvent) => {
-    if (!isValidHover(enterEvent))
-      return;
-    const { target } = enterEvent;
-    const onHoverEnd = onHoverStart(target, enterEvent);
-    if (typeof onHoverEnd !== "function" || !target)
-      return;
+  elements.forEach((element) => {
+    let isPressed = false;
+    let deferredHoverEnd = false;
+    let hoverEndCallback;
+    const removePointerLeave = () => {
+      element.removeEventListener("pointerleave", onPointerLeave);
+    };
+    const endHover = (event) => {
+      if (hoverEndCallback) {
+        hoverEndCallback(event);
+        hoverEndCallback = void 0;
+      }
+      removePointerLeave();
+    };
+    const onPointerUp = (event) => {
+      isPressed = false;
+      window.removeEventListener("pointerup", onPointerUp);
+      window.removeEventListener("pointercancel", onPointerUp);
+      if (deferredHoverEnd) {
+        deferredHoverEnd = false;
+        endHover(event);
+      }
+    };
+    const onPointerDown = () => {
+      isPressed = true;
+      window.addEventListener("pointerup", onPointerUp, eventOptions);
+      window.addEventListener("pointercancel", onPointerUp, eventOptions);
+    };
     const onPointerLeave = (leaveEvent) => {
-      if (!isValidHover(leaveEvent))
+      if (leaveEvent.pointerType === "touch")
+        return;
+      if (isPressed) {
+        deferredHoverEnd = true;
         return;
-      onHoverEnd(leaveEvent);
-      target.removeEventListener("pointerleave", onPointerLeave);
+      }
+      endHover(leaveEvent);
+    };
+    const onPointerEnter = (enterEvent) => {
+      if (!isValidHover(enterEvent))
+        return;
+      deferredHoverEnd = false;
+      const onHoverEnd = onHoverStart(element, enterEvent);
+      if (typeof onHoverEnd !== "function")
+        return;
+      hoverEndCallback = onHoverEnd;
+      element.addEventListener("pointerleave", onPointerLeave, eventOptions);
     };
-    target.addEventListener("pointerleave", onPointerLeave, eventOptions);
-  };
-  elements.forEach((element) => {
     element.addEventListener("pointerenter", onPointerEnter, eventOptions);
+    element.addEventListener("pointerdown", onPointerDown, eventOptions);
   });
   return cancel;
 }
@@ -3050,7 +3108,7 @@ const isPrimaryPointer = (event) => {
     return event.isPrimary !== false;
   }
 };
-const interactiveElements = /* @__PURE__ */ new Set([
+const keyboardAccessibleElements = /* @__PURE__ */ new Set([
   "BUTTON",
   "INPUT",
   "SELECT",
@@ -3058,7 +3116,11 @@ const interactiveElements = /* @__PURE__ */ new Set([
   "A"
 ]);
 function isElementKeyboardAccessible(element) {
-  return interactiveElements.has(element.tagName) || element.isContentEditable === true;
+  return keyboardAccessibleElements.has(element.tagName) || element.isContentEditable === true;
+}
+const textInputElements = /* @__PURE__ */ new Set(["INPUT", "SELECT", "TEXTAREA"]);
+function isElementTextInput(element) {
+  return textInputElements.has(element.tagName) || element.isContentEditable === true;
 }
 const isPressing = /* @__PURE__ */ new WeakSet();
 function filterEvents(callback) {
@@ -3092,13 +3154,19 @@ const enableKeyboardPress = (focusEvent, eventOptions) => {
 function isValidPressEvent(event) {
   return isPrimaryPointer(event) && !isDragActive();
 }
+const claimedPointerDownEvents = /* @__PURE__ */ new WeakSet();
 function press(targetOrSelector, onPressStart, options = {}) {
   const [targets, eventOptions, cancelEvents] = setupGesture(targetOrSelector, options);
   const startPress = (startEvent) => {
     const target = startEvent.currentTarget;
     if (!isValidPressEvent(startEvent))
       return;
+    if (claimedPointerDownEvents.has(startEvent))
+      return;
     isPressing.add(target);
+    if (options.stopPropagation) {
+      claimedPointerDownEvents.add(startEvent);
+    }
     const onPressEnd = onPressStart(target, startEvent);
     const onPointerEnd = (endEvent, success) => {
       window.removeEventListener("pointerup", onPointerUp);
@@ -3137,6 +3205,93 @@ function press(targetOrSelector, onPressStart, options = {}) {
 function isSVGElement(element) {
   return isObject(element) && "ownerSVGElement" in element;
 }
+const resizeHandlers = /* @__PURE__ */ new WeakMap();
+let observer;
+const getSize = (borderBoxAxis, svgAxis, htmlAxis) => (target, borderBoxSize) => {
+  if (borderBoxSize && borderBoxSize[0]) {
+    return borderBoxSize[0][borderBoxAxis + "Size"];
+  } else if (isSVGElement(target) && "getBBox" in target) {
+    return target.getBBox()[svgAxis];
+  } else {
+    return target[htmlAxis];
+  }
+};
+const getWidth = /* @__PURE__ */ getSize("inline", "width", "offsetWidth");
+const getHeight = /* @__PURE__ */ getSize("block", "height", "offsetHeight");
+function notifyTarget({ target, borderBoxSize }) {
+  resizeHandlers.get(target)?.forEach((handler) => {
+    handler(target, {
+      get width() {
+        return getWidth(target, borderBoxSize);
+      },
+      get height() {
+        return getHeight(target, borderBoxSize);
+      }
+    });
+  });
+}
+function notifyAll(entries) {
+  entries.forEach(notifyTarget);
+}
+function createResizeObserver() {
+  if (typeof ResizeObserver === "undefined")
+    return;
+  observer = new ResizeObserver(notifyAll);
+}
+function resizeElement(target, handler) {
+  if (!observer)
+    createResizeObserver();
+  const elements = resolveElements(target);
+  elements.forEach((element) => {
+    let elementHandlers = resizeHandlers.get(element);
+    if (!elementHandlers) {
+      elementHandlers = /* @__PURE__ */ new Set();
+      resizeHandlers.set(element, elementHandlers);
+    }
+    elementHandlers.add(handler);
+    observer?.observe(element);
+  });
+  return () => {
+    elements.forEach((element) => {
+      const elementHandlers = resizeHandlers.get(element);
+      elementHandlers?.delete(handler);
+      if (!elementHandlers?.size) {
+        observer?.unobserve(element);
+      }
+    });
+  };
+}
+const windowCallbacks = /* @__PURE__ */ new Set();
+let windowResizeHandler;
+function createWindowResizeHandler() {
+  windowResizeHandler = () => {
+    const info = {
+      get width() {
+        return window.innerWidth;
+      },
+      get height() {
+        return window.innerHeight;
+      }
+    };
+    windowCallbacks.forEach((callback) => callback(info));
+  };
+  window.addEventListener("resize", windowResizeHandler);
+}
+function resizeWindow(callback) {
+  windowCallbacks.add(callback);
+  if (!windowResizeHandler)
+    createWindowResizeHandler();
+  return () => {
+    windowCallbacks.delete(callback);
+    if (!windowCallbacks.size && typeof windowResizeHandler === "function") {
+      window.removeEventListener("resize", windowResizeHandler);
+      windowResizeHandler = void 0;
+    }
+  };
+}
+function resize(a, b) {
+  return typeof a === "function" ? resizeWindow(a) : resizeElement(a, b);
+}
 function isSVGSVGElement(element) {
   return isSVGElement(element) && element.tagName === "svg";
 }
@@ -3157,22 +3312,6 @@ const createBox = () => ({
   x: createAxis(),
   y: createAxis()
 });
-const prefersReducedMotion = { current: null };
-const hasReducedMotionListener = { current: false };
-const isBrowser = typeof window !== "undefined";
-function initPrefersReducedMotion() {
-  hasReducedMotionListener.current = true;
-  if (!isBrowser)
-    return;
-  if (window.matchMedia) {
-    const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
-    const setReducedMotionPreferences = () => prefersReducedMotion.current = motionMediaQuery.matches;
-    motionMediaQuery.addEventListener("change", setReducedMotionPreferences);
-    setReducedMotionPreferences();
-  } else {
-    prefersReducedMotion.current = false;
-  }
-}
 const visualElementStore = /* @__PURE__ */ new WeakMap();
 function isAnimationControls(v) {
   return v !== null && typeof v === "object" && typeof v.start === "function";
@@ -3224,6 +3363,22 @@ function updateMotionValuesFromProps(element, next, prev) {
   }
   return next;
 }
+const prefersReducedMotion = { current: null };
+const hasReducedMotionListener = { current: false };
+const isBrowser = typeof window !== "undefined";
+function initPrefersReducedMotion() {
+  hasReducedMotionListener.current = true;
+  if (!isBrowser)
+    return;
+  if (window.matchMedia) {
+    const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
+    const setReducedMotionPreferences = () => prefersReducedMotion.current = motionMediaQuery.matches;
+    motionMediaQuery.addEventListener("change", setReducedMotionPreferences);
+    setReducedMotionPreferences();
+  } else {
+    prefersReducedMotion.current = false;
+  }
+}
 const propEventHandlers = [
   "AnimationStart",
   "AnimationComplete",
@@ -3251,17 +3406,19 @@ class VisualElement {
   scrapeMotionValuesFromProps(_props, _prevProps, _visualElement) {
     return {};
   }
-  constructor({ parent, props, presenceContext, reducedMotionConfig, blockInitialAnimation, visualState }, options = {}) {
+  constructor({ parent, props, presenceContext, reducedMotionConfig, skipAnimations, blockInitialAnimation, visualState }, options = {}) {
     this.current = null;
     this.children = /* @__PURE__ */ new Set();
     this.isVariantNode = false;
     this.isControllingVariants = false;
     this.shouldReduceMotion = null;
+    this.shouldSkipAnimations = false;
     this.values = /* @__PURE__ */ new Map();
     this.KeyframeResolver = KeyframeResolver;
     this.features = {};
     this.valueSubscriptions = /* @__PURE__ */ new Map();
     this.prevMotionValues = {};
+    this.hasBeenMounted = false;
     this.events = {};
     this.propEventSubscriptions = {};
     this.notifyUpdate = () => this.notify("Update", this.latestValues);
@@ -3289,6 +3446,7 @@ class VisualElement {
     this.presenceContext = presenceContext;
     this.depth = parent ? parent.depth + 1 : 0;
     this.reducedMotionConfig = reducedMotionConfig;
+    this.skipAnimationsConfig = skipAnimations;
     this.options = options;
     this.blockInitialAnimation = Boolean(blockInitialAnimation);
     this.isControllingVariants = isControllingVariants(props);
@@ -3306,6 +3464,12 @@ class VisualElement {
     }
   }
   mount(instance) {
+    if (this.hasBeenMounted) {
+      for (const key in this.initialValues) {
+        this.values.get(key)?.jump(this.initialValues[key]);
+        this.latestValues[key] = this.initialValues[key];
+      }
+    }
     this.current = instance;
     visualElementStore.set(instance, this);
     if (this.projection && !this.projection.instance) {
@@ -3328,8 +3492,10 @@ class VisualElement {
     if (process.env.NODE_ENV !== "production") {
       warnOnce(this.shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled");
     }
+    this.shouldSkipAnimations = this.skipAnimationsConfig ?? false;
     this.parent?.addChild(this);
     this.update(this.props, this.presenceContext);
+    this.hasBeenMounted = true;
   }
   unmount() {
     this.projection && this.projection.unmount();
@@ -3364,6 +3530,23 @@ class VisualElement {
     if (this.valueSubscriptions.has(key)) {
       this.valueSubscriptions.get(key)();
     }
+    if (value.accelerate && acceleratedValues.has(key) && this.current instanceof HTMLElement) {
+      const { factory, keyframes: keyframes2, times, ease: ease2, duration } = value.accelerate;
+      const animation = new NativeAnimation({
+        element: this.current,
+        name: key,
+        keyframes: keyframes2,
+        times,
+        ease: ease2,
+        duration: /* @__PURE__ */ secondsToMilliseconds(duration)
+      });
+      const cleanup = factory(animation);
+      this.valueSubscriptions.set(key, () => {
+        cleanup();
+        animation.cancel();
+      });
+      return;
+    }
     const valueIsTransform = transformProps.has(key);
     if (valueIsTransform && this.onBindTransform) {
       this.onBindTransform();
@@ -4164,6 +4347,15 @@ function createAnimationState(visualElement) {
       ) {
         continue;
       }
+      if (type === "exit" && typeState.isActive && activeDelta !== true) {
+        if (typeState.prevResolvedValues) {
+          encounteredKeys = {
+            ...encounteredKeys,
+            ...typeState.prevResolvedValues
+          };
+        }
+        continue;
+      }
       const variantDidChange = checkVariantsDidChange(typeState.prevProp, prop);
       let shouldAnimateType = variantDidChange || // If we're making this variant active, we want to always make it active
       type === changedActiveType && typeState.isActive && !isInherited && propIsVariant || // If we removed a higher-priority variant (i is in reverse order)
@@ -4558,6 +4750,15 @@ class NodeStack {
   }
   add(node) {
     addUniqueItem(this.members, node);
+    for (let i = this.members.length - 1; i >= 0; i--) {
+      const m = this.members[i];
+      if (m === node || m === this.lead || m === this.prevLead)
+        continue;
+      const inst = m.instance;
+      if (inst && inst.isConnected === false && m.isPresent !== false && !m.snapshot) {
+        removeItem(this.members, m);
+      }
+    }
     node.scheduleRender();
   }
   remove(node) {
@@ -4579,7 +4780,8 @@ class NodeStack {
     let prevLead;
     for (let i = indexOfNode; i >= 0; i--) {
       const member = this.members[i];
-      if (member.isPresent !== false) {
+      const inst = member.instance;
+      if (member.isPresent !== false && (!inst || inst.isConnected !== false)) {
         prevLead = member;
         break;
       }
@@ -4605,16 +4807,20 @@ class NodeStack {
       const nextDep = node.options.layoutDependency;
       const dependencyMatches = prevDep !== void 0 && nextDep !== void 0 && prevDep === nextDep;
       if (!dependencyMatches) {
-        node.resumeFrom = prevLead;
-        if (preserveFollowOpacity) {
-          node.resumeFrom.preserveOpacity = true;
-        }
-        if (prevLead.snapshot) {
-          node.snapshot = prevLead.snapshot;
-          node.snapshot.latestValues = prevLead.animationValues || prevLead.latestValues;
-        }
-        if (node.root && node.root.isUpdating) {
-          node.isLayoutDirty = true;
+        const prevInstance = prevLead.instance;
+        const isStale = prevInstance && prevInstance.isConnected === false && !prevLead.snapshot;
+        if (!isStale) {
+          node.resumeFrom = prevLead;
+          if (preserveFollowOpacity) {
+            node.resumeFrom.preserveOpacity = true;
+          }
+          if (prevLead.snapshot) {
+            node.snapshot = prevLead.snapshot;
+            node.snapshot.latestValues = prevLead.animationValues || prevLead.latestValues;
+          }
+          if (node.root && node.root.isUpdating) {
+            node.isLayoutDirty = true;
+          }
         }
       }
       const { crossfade } = node.options;
@@ -5276,9 +5482,9 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
     show() {
       this.isVisible = true;
     }
-    scheduleRender(notifyAll = true) {
+    scheduleRender(notifyAll2 = true) {
       this.options.visualElement?.scheduleRender();
-      if (notifyAll) {
+      if (notifyAll2) {
         const stack = this.getStack();
         stack && stack.scheduleRender();
       }
@@ -5778,7 +5984,7 @@ function useComposedRefs(...refs) {
 class PopChildMeasure extends $dbSRa$react.Component {
   getSnapshotBeforeUpdate(prevProps) {
     const element = this.props.childRef.current;
-    if (element && prevProps.isPresent && !this.props.isPresent) {
+    if (element && prevProps.isPresent && !this.props.isPresent && this.props.pop !== false) {
       const parent = element.offsetParent;
       const parentWidth = isHTMLElement(parent) ? parent.offsetWidth || 0 : 0;
       const parentHeight = isHTMLElement(parent) ? parent.offsetHeight || 0 : 0;
@@ -5801,7 +6007,7 @@ class PopChildMeasure extends $dbSRa$react.Component {
     return this.props.children;
   }
 }
-function PopChild({ children, isPresent, anchorX, anchorY, root }) {
+function PopChild({ children, isPresent, anchorX, anchorY, root, pop }) {
   const id2 = useId();
   const ref = useRef(null);
   const size = useRef({
@@ -5817,7 +6023,7 @@ function PopChild({ children, isPresent, anchorX, anchorY, root }) {
   const composedRef = useComposedRefs(ref, childRef);
   useInsertionEffect(() => {
     const { width, height, top, left, right, bottom } = size.current;
-    if (isPresent || !ref.current || !width || !height)
+    if (isPresent || pop === false || !ref.current || !width || !height)
       return;
     const x = anchorX === "left" ? `left: ${left}` : `right: ${right}`;
     const y = anchorY === "bottom" ? `bottom: ${bottom}` : `top: ${top}`;
@@ -5844,7 +6050,7 @@ function PopChild({ children, isPresent, anchorX, anchorY, root }) {
       }
     };
   }, [isPresent]);
-  return jsx(PopChildMeasure, { isPresent, childRef: ref, sizeRef: size, children: $dbSRa$react.cloneElement(children, { ref: composedRef }) });
+  return jsx(PopChildMeasure, { isPresent, childRef: ref, sizeRef: size, pop, children: pop === false ? children : $dbSRa$react.cloneElement(children, { ref: composedRef }) });
 }
 const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, anchorY, root }) => {
   const presenceChildren = useConstant(newChildrenMap);
@@ -5880,9 +6086,7 @@ const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, p
   $dbSRa$react.useEffect(() => {
     !isPresent && !presenceChildren.size && onExitComplete && onExitComplete();
   }, [isPresent]);
-  if (mode === "popLayout") {
-    children = jsx(PopChild, { isPresent, anchorX, anchorY, root, children });
-  }
+  children = jsx(PopChild, { pop: mode === "popLayout", isPresent, anchorX, anchorY, root, children });
   return jsx(PresenceContext.Provider, { value: context, children });
 };
 function newChildrenMap() {
@@ -6063,6 +6267,7 @@ const validMotionProps = /* @__PURE__ */ new Set([
   "onViewportEnter",
   "onViewportLeave",
   "globalTapTarget",
+  "propagate",
   "ignoreStrict",
   "viewport"
 ]);
@@ -6337,7 +6542,9 @@ function useVisualElement(Component2, visualState, props, createVisualElement, P
   const { visualElement: parent } = useContext(MotionContext);
   const lazyContext = useContext(LazyContext);
   const presenceContext = useContext(PresenceContext);
-  const reducedMotionConfig = useContext(MotionConfigContext).reducedMotion;
+  const motionConfig = useContext(MotionConfigContext);
+  const reducedMotionConfig = motionConfig.reducedMotion;
+  const skipAnimations = motionConfig.skipAnimations;
   const visualElementRef = useRef(null);
   const hasMountedOnce = useRef(false);
   createVisualElement = createVisualElement || lazyContext.renderer;
@@ -6349,6 +6556,7 @@ function useVisualElement(Component2, visualState, props, createVisualElement, P
       presenceContext,
       blockInitialAnimation: presenceContext ? presenceContext.initial === false : false,
       reducedMotionConfig,
+      skipAnimations,
       isSVG
     });
     if (hasMountedOnce.current && visualElementRef.current) {
@@ -6790,6 +6998,9 @@ function getVelocity(history, timeDelta) {
   if (!timestampedPoint) {
     return { x: 0, y: 0 };
   }
+  if (timestampedPoint === history[0] && history.length > 2 && lastPoint.timestamp - timestampedPoint.timestamp > /* @__PURE__ */ secondsToMilliseconds(timeDelta) * 2) {
+    timestampedPoint = history[1];
+  }
   const time2 = /* @__PURE__ */ millisecondsToSeconds(lastPoint.timestamp - timestampedPoint.timestamp);
   if (time2 === 0) {
     return { x: 0, y: 0 };
@@ -6902,14 +7113,11 @@ class VisualElementDragControls {
       return;
     const onSessionStart = (event) => {
       if (snapToCursor) {
-        this.stopAnimation();
         this.snapToCursor(extractEventInfo(event).point);
-      } else {
-        this.pauseAnimation();
       }
+      this.stopAnimation();
     };
     const onStart = (event, info) => {
-      this.stopAnimation();
       const { drag: drag2, dragPropagation, onDragStart } = this.getProps();
       if (drag2 && !dragPropagation) {
         if (this.openDragLock)
@@ -6942,7 +7150,7 @@ class VisualElementDragControls {
         this.originPoint[axis] = current;
       });
       if (onDragStart) {
-        frame.postRender(() => onDragStart(event, info));
+        frame.update(() => onDragStart(event, info), false, true);
       }
       addValueToWillChange(this.visualElement, "transform");
       const { animationState } = this.visualElement;
@@ -6965,7 +7173,9 @@ class VisualElementDragControls {
       this.updateAxis("x", info.point, offset);
       this.updateAxis("y", info.point, offset);
       this.visualElement.render();
-      onDrag && onDrag(event, info);
+      if (onDrag) {
+        frame.update(() => onDrag(event, info), false, true);
+      }
     };
     const onSessionEnd = (event, info) => {
       this.latestPointerEvent = event;
@@ -6974,7 +7184,12 @@ class VisualElementDragControls {
       this.latestPointerEvent = null;
       this.latestPanInfo = null;
     };
-    const resumeAnimation = () => eachAxis((axis) => this.getAnimationState(axis) === "paused" && this.getAxisMotionValue(axis).animation?.play());
+    const resumeAnimation = () => {
+      const { dragSnapToOrigin: snap } = this.getProps();
+      if (snap || this.constraints) {
+        this.startAnimation({ x: 0, y: 0 });
+      }
+    };
     const { dragSnapToOrigin } = this.getProps();
     this.panSession = new PanSession(originEvent, {
       onSessionStart,
@@ -7061,7 +7276,7 @@ class VisualElementDragControls {
       }
     }
     this.elastic = resolveDragElastic(dragElastic);
-    if (prevConstraints !== this.constraints && layout2 && this.constraints && !this.hasMutatedConstraints) {
+    if (prevConstraints !== this.constraints && !isRefObject(dragConstraints) && layout2 && this.constraints && !this.hasMutatedConstraints) {
       eachAxis((axis) => {
         if (this.constraints !== false && this.getAxisMotionValue(axis)) {
           this.constraints[axis] = rebaseAxisConstraints(layout2.layoutBox[axis], this.constraints[axis]);
@@ -7124,12 +7339,6 @@ class VisualElementDragControls {
   stopAnimation() {
     eachAxis((axis) => this.getAxisMotionValue(axis).stop());
   }
-  pauseAnimation() {
-    eachAxis((axis) => this.getAxisMotionValue(axis).animation?.pause());
-  }
-  getAnimationState(axis) {
-    return this.getAxisMotionValue(axis).animation?.state;
-  }
   /**
    * Drag works differently depending on which props are provided.
    *
@@ -7181,6 +7390,7 @@ class VisualElementDragControls {
     this.visualElement.current.style.transform = transformTemplate ? transformTemplate({}, "") : "none";
     projection.root && projection.root.updateScroll();
     projection.updateLayout();
+    this.constraints = false;
     this.resolveConstraints();
     eachAxis((axis) => {
       if (!shouldDrag(axis, drag2, null))
@@ -7189,6 +7399,7 @@ class VisualElementDragControls {
       const { min, max } = this.constraints[axis];
       axisValue.set(mixNumber$1(min, max, boxProgress[axis]));
     });
+    this.visualElement.render();
   }
   addListeners() {
     if (!this.visualElement.current)
@@ -7198,15 +7409,19 @@ class VisualElementDragControls {
     const stopPointerListener = addPointerEvent(element, "pointerdown", (event) => {
       const { drag: drag2, dragListener = true } = this.getProps();
       const target = event.target;
-      const isClickingKeyboardAccessibleChild = target !== element && isElementKeyboardAccessible(target);
-      if (drag2 && dragListener && !isClickingKeyboardAccessibleChild) {
+      const isClickingTextInputChild = target !== element && isElementTextInput(target);
+      if (drag2 && dragListener && !isClickingTextInputChild) {
         this.start(event);
       }
     });
+    let stopResizeObservers;
     const measureDragConstraints = () => {
       const { dragConstraints } = this.getProps();
       if (isRefObject(dragConstraints) && dragConstraints.current) {
         this.constraints = this.resolveRefConstraints();
+        if (!stopResizeObservers) {
+          stopResizeObservers = startResizeObservers(element, dragConstraints.current, () => this.scalePositionWithinConstraints());
+        }
       }
     };
     const { projection } = this.visualElement;
@@ -7234,6 +7449,7 @@ class VisualElementDragControls {
       stopPointerListener();
       stopMeasureLayoutListener();
       stopLayoutUpdateListener && stopLayoutUpdateListener();
+      stopResizeObservers && stopResizeObservers();
     };
   }
   getProps() {
@@ -7250,6 +7466,24 @@ class VisualElementDragControls {
     };
   }
 }
+function skipFirstCall(callback) {
+  let isFirst = true;
+  return () => {
+    if (isFirst) {
+      isFirst = false;
+      return;
+    }
+    callback();
+  };
+}
+function startResizeObservers(element, constraintsElement, onResize) {
+  const stopElement = resize(element, skipFirstCall(onResize));
+  const stopContainer = resize(constraintsElement, skipFirstCall(onResize));
+  return () => {
+    stopElement();
+    stopContainer();
+  };
+}
 function shouldDrag(direction, drag2, currentDirection) {
   return (drag2 === true || drag2 === direction) && (currentDirection === null || currentDirection === direction);
 }
@@ -7296,7 +7530,7 @@ class DragGesture extends Feature {
 }
 const asyncHandler = (handler) => (event, info) => {
   if (handler) {
-    frame.postRender(() => handler(event, info));
+    frame.update(() => handler(event, info), false, true);
   }
 };
 class PanGesture extends Feature {
@@ -7315,7 +7549,7 @@ class PanGesture extends Feature {
     return {
       onSessionStart: asyncHandler(onPanSessionStart),
       onStart: asyncHandler(onPanStart),
-      onMove: onPan,
+      onMove: asyncHandler(onPan),
       onEnd: (event, info) => {
         delete this.session;
         if (onPanEnd) {
@@ -7515,10 +7749,14 @@ class PressGesture extends Feature {
     const { current } = this.node;
     if (!current)
       return;
+    const { globalTapTarget, propagate } = this.node.props;
     this.unmount = press(current, (_element, startEvent) => {
       handlePressEvent(this.node, startEvent, "Start");
       return (endEvent, { success }) => handlePressEvent(this.node, endEvent, success ? "End" : "Cancel");
-    }, { useGlobalTarget: this.node.props.globalTapTarget });
+    }, {
+      useGlobalTarget: globalTapTarget,
+      stopPropagation: propagate?.tap === false
+    });
   }
   unmount() {
   }