@dnd-kit/dom 0.1.7 → 0.1.8-beta-20250504131722

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnd-kit/dom",
-  "version": "0.1.7",
+  "version": "0.1.8-beta-20250504131722",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",
@@ -74,10 +74,10 @@
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
-    "@dnd-kit/abstract": "^0.1.7",
-    "@dnd-kit/collision": "^0.1.7",
-    "@dnd-kit/geometry": "^0.1.7",
-    "@dnd-kit/state": "^0.1.7",
+    "@dnd-kit/abstract": "0.1.8-beta-20250504131722",
+    "@dnd-kit/collision": "0.1.8-beta-20250504131722",
+    "@dnd-kit/geometry": "0.1.8-beta-20250504131722",
+    "@dnd-kit/state": "0.1.8-beta-20250504131722",
     "tslib": "^2.6.2"
   },
   "devDependencies": {

package/utilities.cjs

@@ -513,18 +513,59 @@ function canScroll(scrollableElement, by) {
   };
 }
 
+// src/utilities/scheduling/scheduler.ts
+var Scheduler = class {
+  constructor(scheduler4) {
+    this.scheduler = scheduler4;
+    this.pending = false;
+    this.tasks = /* @__PURE__ */ new Set();
+    this.resolvers = /* @__PURE__ */ new Set();
+    this.flush = () => {
+      const { tasks, resolvers } = this;
+      this.pending = false;
+      this.tasks = /* @__PURE__ */ new Set();
+      this.resolvers = /* @__PURE__ */ new Set();
+      for (const task of tasks) {
+        task();
+      }
+      for (const resolve of resolvers) {
+        resolve();
+      }
+    };
+  }
+  schedule(task) {
+    this.tasks.add(task);
+    if (!this.pending) {
+      this.pending = true;
+      this.scheduler(this.flush);
+    }
+    return new Promise((resolve) => this.resolvers.add(resolve));
+  }
+};
+var scheduler = new Scheduler(
+  (callback) => requestAnimationFrame(callback)
+);
+
 // src/utilities/styles/getComputedStyles.ts
-function getComputedStyles(element) {
-  return getWindow(element).getComputedStyle(element);
+var scheduler2 = new Scheduler((callback) => setTimeout(callback, 50));
+var cachedStyles = /* @__PURE__ */ new Map();
+var clear = cachedStyles.clear.bind(cachedStyles);
+function getComputedStyles(element, cached = false) {
+  let styles = cachedStyles.get(element);
+  if (cached && styles) return styles;
+  styles = getWindow(element).getComputedStyle(element);
+  cachedStyles.set(element, styles);
+  scheduler2.schedule(clear);
+  return styles;
 }
 
 // src/utilities/scroll/isFixed.ts
-function isFixed(node, computedStyle = getComputedStyles(node)) {
+function isFixed(node, computedStyle = getComputedStyles(node, true)) {
   return computedStyle.position === "fixed" || computedStyle.position === "sticky";
 }
 
 // src/utilities/scroll/isScrollable.ts
-function isScrollable(element, computedStyle = getComputedStyles(element)) {
+function isScrollable(element, computedStyle = getComputedStyles(element, true)) {
   const overflowRegex = /(auto|scroll|overlay)/;
   const properties = ["overflow", "overflowX", "overflowY"];
   return properties.some((property) => {
@@ -560,7 +601,7 @@ function getScrollableAncestors(element, options = defaultOptions) {
     if (scrollParents.has(node)) {
       return scrollParents;
     }
-    const computedStyle = getComputedStyles(node);
+    const computedStyle = getComputedStyles(node, true);
     if (excludeElement && node === element) ; else if (isScrollable(node, computedStyle)) {
       scrollParents.add(node);
     }
@@ -604,7 +645,7 @@ function getFrameTransform(el, boundary = window.frameElement) {
     if (frame === boundary) {
       return transform;
     }
-    const rect = frame.getBoundingClientRect();
+    const rect = getBoundingRectangle(frame);
     const { x: scaleX, y: scaleY } = getScale(frame, rect);
     transform.x = transform.x + rect.left;
     transform.y = transform.y + rect.top;
@@ -614,7 +655,7 @@ function getFrameTransform(el, boundary = window.frameElement) {
   }
   return transform;
 }
-function getScale(element, boundingRectangle = element.getBoundingClientRect()) {
+function getScale(element, boundingRectangle = getBoundingRectangle(element)) {
   const width = Math.round(boundingRectangle.width);
   const height = Math.round(boundingRectangle.height);
   if (isHTMLElement(element)) {
@@ -623,7 +664,7 @@ function getScale(element, boundingRectangle = element.getBoundingClientRect())
       y: height / element.offsetHeight
     };
   }
-  const styles = getComputedStyles(element);
+  const styles = getComputedStyles(element, true);
   return {
     x: (parseFloat(styles.width) || width) / width,
     y: (parseFloat(styles.height) || height) / height
@@ -736,7 +777,7 @@ function detectScrollIntent(scrollableElement, coordinates, intent, acceleration
   const { x, y } = coordinates;
   const { rect, isTop, isBottom, isLeft, isRight } = getScrollPosition(scrollableElement);
   const frameTransform = getFrameTransform(scrollableElement);
-  const computedStyles = getComputedStyles(scrollableElement);
+  const computedStyles = getComputedStyles(scrollableElement, true);
   const parsedTransform = parseTransform(computedStyles);
   const isXAxisInverted = parsedTransform !== null ? (parsedTransform == null ? void 0 : parsedTransform.scaleX) < 0 : false;
   const isYAxisInverted = parsedTransform !== null ? (parsedTransform == null ? void 0 : parsedTransform.scaleY) < 0 : false;
@@ -802,7 +843,7 @@ function scrollIntoViewIfNeeded(el, centerIfNeeded = false) {
   if (!isHTMLElement(parent)) {
     return;
   }
-  const parentComputedStyle = getComputedStyles(parent), parentBorderTopWidth = parseInt(
+  const parentComputedStyle = getComputedStyles(parent, true), parentBorderTopWidth = parseInt(
     parentComputedStyle.getPropertyValue("border-top-width")
   ), parentBorderLeftWidth = parseInt(
     parentComputedStyle.getPropertyValue("border-left-width")
@@ -818,39 +859,6 @@ function scrollIntoViewIfNeeded(el, centerIfNeeded = false) {
   }
 }
 
-// src/utilities/scheduling/scheduler.ts
-var Scheduler = class {
-  constructor(scheduler3) {
-    this.scheduler = scheduler3;
-    this.pending = false;
-    this.tasks = /* @__PURE__ */ new Set();
-    this.resolvers = /* @__PURE__ */ new Set();
-    this.flush = () => {
-      const { tasks, resolvers } = this;
-      this.pending = false;
-      this.tasks = /* @__PURE__ */ new Set();
-      this.resolvers = /* @__PURE__ */ new Set();
-      for (const task of tasks) {
-        task();
-      }
-      for (const resolve of resolvers) {
-        resolve();
-      }
-    };
-  }
-  schedule(task) {
-    this.tasks.add(task);
-    if (!this.pending) {
-      this.pending = true;
-      this.scheduler(this.flush);
-    }
-    return new Promise((resolve) => this.resolvers.add(resolve));
-  }
-};
-var scheduler = new Scheduler(
-  (callback) => requestAnimationFrame(callback)
-);
-
 // src/utilities/transform/inverseTransform.ts
 function inverseTransform(rect, parsedTransform, transformOrigin) {
   const { scaleX, scaleY, x: translateX, y: translateY } = parsedTransform;
@@ -1011,16 +1019,16 @@ function getProjectedTransform(element) {
   }
   return projectedTransform;
 }
-var scheduler2 = new Scheduler((callback) => setTimeout(callback, 0));
+var scheduler3 = new Scheduler((callback) => setTimeout(callback, 0));
 var animations = /* @__PURE__ */ new Map();
-var clear = animations.clear.bind(animations);
+var clear2 = animations.clear.bind(animations);
 function getDocumentAnimations(element) {
   const document2 = element.ownerDocument;
   let documentAnimations = animations.get(document2);
   if (documentAnimations) return documentAnimations;
   documentAnimations = document2.getAnimations();
   animations.set(document2, documentAnimations);
-  scheduler2.schedule(clear);
+  scheduler3.schedule(clear2);
   const elementAnimations = documentAnimations.filter(
     (animation) => isKeyframeEffect(animation.effect) && animation.effect.target === element
   );