actual-css 0.4.2 → 0.5.0

package/src/js/surface.js

@@ -4,6 +4,7 @@ import { EVENTS } from "./events.js";
 import { autoUpdate, reposition, repositionAt } from "./floating.js";
 
 import { CLASSES } from "./selectors.js";
+import { waitForTransitions } from "./transition.js";
 
 const openSurfaces = new Set();
 const surfaceMap = new WeakMap();
@@ -46,16 +47,6 @@ function reaperFor(menu) {
   return reaper;
 }
 
-function waitForAnimations(...elements) {
-  const animations = elements
-    .filter(Boolean)
-    .flatMap((el) =>
-      typeof el.getAnimations === "function" ? el.getAnimations({ subtree: true }) : [],
-    );
-
-  return Promise.allSettled(animations.map((animation) => animation.finished));
-}
-
 function getSurfaceRoot(menu, anchor) {
   return anchor?.closest("dialog") || menu.closest("dialog") || menu.ownerDocument.body;
 }
@@ -360,7 +351,7 @@ export function closeSurface(menu, opts = {}) {
     state.restoreFocusTo.focus({ preventScroll: true });
   }
 
-  waitForAnimations(menu, backdrop).then(() => {
+  waitForTransitions(menu, backdrop).then(() => {
     if (!state || state.closeId !== closeId) return;
     state.isSheet = false;
     menu.classList.remove(CLASSES.sheet);

package/src/js/transition.js

@@ -0,0 +1,20 @@
+/*
+ * CSS transition lifecycle.
+ *
+ * getAnimations() exposes both CSS transitions and keyframe animations.
+ * Cleanup that belongs to a state transition must not wait for arbitrary
+ * author animations, which may be infinite. CSSTransition instances expose
+ * transitionProperty; using that structural contract avoids a global check
+ * and keeps component JavaScript independent from the properties CSS owns.
+ */
+
+export function waitForTransitions(...elements) {
+  const transitions = elements
+    .filter(Boolean)
+    .flatMap((element) =>
+      typeof element.getAnimations === "function" ? element.getAnimations({ subtree: true }) : [],
+    )
+    .filter((animation) => typeof animation.transitionProperty === "string");
+
+  return Promise.allSettled(transitions.map((transition) => transition.finished));
+}