@dnd-kit/dom 0.0.1

package/utilities.js

@@ -0,0 +1,626 @@
+import { Rectangle } from '@dnd-kit/geometry';
+
+// src/utilities/bounding-rectangle/getBoundingRectangle.ts
+function getBoundingRectangle(element) {
+  const { width, height, top, left, bottom, right } = element.getBoundingClientRect();
+  return { width, height, top, left, bottom, right };
+}
+
+// src/utilities/execution-context/canUseDOM.ts
+var canUseDOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+
+// src/utilities/type-guards/isWindow.ts
+function isWindow(element) {
+  const elementString = Object.prototype.toString.call(element);
+  return elementString === "[object Window]" || // In Electron context the Window object serializes to [object global]
+  elementString === "[object global]";
+}
+
+// src/utilities/type-guards/isNode.ts
+function isNode(node) {
+  return "nodeType" in node;
+}
+
+// src/utilities/execution-context/getWindow.ts
+function getWindow(target) {
+  if (!target) {
+    return window;
+  }
+  if (isWindow(target)) {
+    return target;
+  }
+  if (!isNode(target)) {
+    return window;
+  }
+  return target.ownerDocument?.defaultView ?? window;
+}
+
+// src/utilities/type-guards/isDocument.ts
+function isDocument(node) {
+  const { Document } = getWindow(node);
+  return node instanceof Document;
+}
+
+// src/utilities/type-guards/isHTMLElement.ts
+function isHTMLElement(node) {
+  if (isWindow(node)) {
+    return false;
+  }
+  return node instanceof getWindow(node).HTMLElement;
+}
+
+// src/utilities/execution-context/getDocument.ts
+function getDocument(target) {
+  if (!target) {
+    return document;
+  }
+  if (isWindow(target)) {
+    return target.document;
+  }
+  if (!isNode(target)) {
+    return document;
+  }
+  if (isDocument(target)) {
+    return target;
+  }
+  if (isHTMLElement(target)) {
+    return target.ownerDocument;
+  }
+  return document;
+}
+
+// src/utilities/bounding-rectangle/getViewportBoundingRectangle.ts
+function getViewportBoundingRectangle(element) {
+  const { documentElement } = getDocument(element);
+  const width = documentElement.clientWidth;
+  const height = documentElement.clientHeight;
+  return {
+    top: 0,
+    left: 0,
+    right: width,
+    bottom: height,
+    width,
+    height
+  };
+}
+
+// src/utilities/element/cloneElement.ts
+function cloneElement(element) {
+  const selector = "input, textarea, select, canvas, [contenteditable]";
+  const clonedElement = element.cloneNode(true);
+  const fields = Array.from(element.querySelectorAll(selector));
+  const clonedFields = Array.from(clonedElement.querySelectorAll(selector));
+  clonedFields.forEach((field, index) => {
+    const originalField = fields[index];
+    if (isField(field) && isField(originalField)) {
+      if (field.type !== "file") {
+        field.value = originalField.value;
+      }
+      if (field.type === "radio" && field.name) {
+        field.name = `Cloned__${field.name}`;
+      }
+    }
+    if (field instanceof HTMLCanvasElement && originalField instanceof HTMLCanvasElement && originalField.width > 0 && originalField.height > 0) {
+      const destCtx = field.getContext("2d");
+      destCtx?.drawImage(originalField, 0, 0);
+    }
+  });
+  return clonedElement;
+}
+function isField(element) {
+  return "value" in element;
+}
+
+// src/utilities/type-guards/supportsStyle.ts
+function supportsStyle(element) {
+  return "style" in element && element.style instanceof getWindow(element).CSSStyleDeclaration;
+}
+
+// src/utilities/element/createPlaceholder.ts
+function createPlaceholder(element, clone = false) {
+  const placeholder = cloneElement(element);
+  if (supportsStyle(placeholder)) {
+    if (!clone) {
+      placeholder.style.setProperty("opacity", "0");
+    }
+  }
+  placeholder.setAttribute("inert", "true");
+  placeholder.setAttribute("tab-index", "-1");
+  placeholder.setAttribute("aria-hidden", "true");
+  return placeholder;
+}
+
+// src/utilities/event-listeners/Listeners.ts
+var Listeners = class {
+  constructor() {
+    this.entries = /* @__PURE__ */ new Set();
+    this.clear = () => {
+      for (const entry of this.entries) {
+        const [target, { type, listener, options }] = entry;
+        target.removeEventListener(type, listener, options);
+      }
+      this.entries.clear();
+    };
+  }
+  bind(target, input) {
+    const listeners = Array.isArray(input) ? input : [input];
+    const entries = [];
+    for (const descriptor of listeners) {
+      const { type, listener, options } = descriptor;
+      const entry = [target, descriptor];
+      target.addEventListener(type, listener, options);
+      this.entries.add(entry);
+      entries.push(entry);
+    }
+    return function cleanup() {
+      for (const [target2, { type, listener, options }] of entries) {
+        target2.removeEventListener(type, listener, options);
+      }
+    };
+  }
+};
+
+// src/utilities/popover/supportsPopover.ts
+function supportsPopover(element) {
+  return "showPopover" in element && "hidePopover" in element && typeof element.showPopover === "function" && typeof element.hidePopover === "function";
+}
+
+// src/utilities/popover/showPopover.ts
+function showPopover(element) {
+  if (supportsPopover(element) && element.isConnected) {
+    element.showPopover();
+  }
+}
+
+// src/utilities/scroll/documentScrollingElement.ts
+function isDocumentScrollingElement(element) {
+  if (!canUseDOM || !element) {
+    return false;
+  }
+  return element === getDocument(element).scrollingElement;
+}
+
+// src/utilities/scroll/getScrollPosition.ts
+function getScrollPosition(scrollableElement) {
+  const rect = isDocumentScrollingElement(scrollableElement) ? getViewportBoundingRectangle(scrollableElement) : getBoundingRectangle(scrollableElement);
+  const dimensions = isDocumentScrollingElement(scrollableElement) ? {
+    height: window.innerHeight,
+    width: window.innerWidth
+  } : {
+    height: scrollableElement.clientHeight,
+    width: scrollableElement.clientWidth
+  };
+  const position = {
+    current: {
+      x: scrollableElement.scrollLeft,
+      y: scrollableElement.scrollTop
+    },
+    max: {
+      x: scrollableElement.scrollWidth - dimensions.width,
+      y: scrollableElement.scrollHeight - dimensions.height
+    }
+  };
+  const isTop = position.current.y <= 0;
+  const isLeft = position.current.x <= 0;
+  const isBottom = position.current.y >= position.max.y;
+  const isRight = position.current.x >= position.max.x;
+  return {
+    rect,
+    position,
+    isTop,
+    isLeft,
+    isBottom,
+    isRight
+  };
+}
+
+// src/utilities/scroll/canScroll.ts
+function canScroll(scrollableElement, by) {
+  const { isTop, isBottom, isLeft, isRight, position } = getScrollPosition(scrollableElement);
+  const { x, y } = by ?? { x: 0, y: 0 };
+  const top = !isTop && position.current.y + y > 0;
+  const bottom = !isBottom && position.current.y + y < position.max.y;
+  const left = !isLeft && position.current.x + x > 0;
+  const right = !isRight && position.current.x + x < position.max.x;
+  return {
+    top,
+    bottom,
+    left,
+    right,
+    x: left || right,
+    y: top || bottom
+  };
+}
+
+// src/utilities/type-guards/isSVGElement.ts
+function isSVGElement(node) {
+  return node instanceof getWindow(node).SVGElement;
+}
+
+// src/utilities/scroll/isFixed.ts
+function isFixed(node, computedStyle = getWindow(node).getComputedStyle(node)) {
+  return computedStyle.position === "fixed" || computedStyle.position === "sticky";
+}
+
+// src/utilities/scroll/isScrollable.ts
+function isScrollable(element, computedStyle = getWindow(element).getComputedStyle(
+  element
+)) {
+  const overflowRegex = /(auto|scroll|overlay)/;
+  const properties = ["overflow", "overflowX", "overflowY"];
+  return properties.find((property) => {
+    const value = computedStyle[property];
+    return typeof value === "string" ? overflowRegex.test(value) : false;
+  }) != null;
+}
+
+// src/utilities/scroll/getScrollableAncestors.ts
+var defaultOptions = {
+  excludeElement: true
+};
+function getScrollableAncestors(element, options = defaultOptions) {
+  const { limit, excludeElement } = options;
+  const scrollParents = [];
+  function findScrollableAncestors(node) {
+    if (limit != null && scrollParents.length >= limit) {
+      return scrollParents;
+    }
+    if (!node) {
+      return scrollParents;
+    }
+    if (isDocument(node) && node.scrollingElement != null && !scrollParents.includes(node.scrollingElement)) {
+      scrollParents.push(node.scrollingElement);
+      return scrollParents;
+    }
+    if (!isHTMLElement(node)) {
+      if (isSVGElement(node)) {
+        return findScrollableAncestors(node.parentElement);
+      }
+      return scrollParents;
+    }
+    if (scrollParents.includes(node)) {
+      return scrollParents;
+    }
+    const { getComputedStyle } = getWindow(node);
+    const computedStyle = getComputedStyle(node);
+    if (excludeElement && node === element) ; else if (isScrollable(node, computedStyle)) {
+      scrollParents.push(node);
+    }
+    if (isFixed(node, computedStyle)) {
+      return scrollParents;
+    }
+    return findScrollableAncestors(node.parentNode);
+  }
+  if (!element) {
+    return scrollParents;
+  }
+  return findScrollableAncestors(element);
+}
+function getFirstScrollableAncestor(node) {
+  const [firstScrollableAncestor] = getScrollableAncestors(node, { limit: 1 });
+  return firstScrollableAncestor ?? null;
+}
+
+// src/utilities/scroll/detectScrollIntent.ts
+var ScrollDirection = /* @__PURE__ */ ((ScrollDirection2) => {
+  ScrollDirection2[ScrollDirection2["Idle"] = 0] = "Idle";
+  ScrollDirection2[ScrollDirection2["Forward"] = 1] = "Forward";
+  ScrollDirection2[ScrollDirection2["Reverse"] = -1] = "Reverse";
+  return ScrollDirection2;
+})(ScrollDirection || {});
+var defaultThreshold = {
+  x: 0.2,
+  y: 0.2
+};
+function detectScrollIntent(scrollableElement, coordinates, intent, acceleration = 25, thresholdPercentage = defaultThreshold) {
+  const {
+    rect: scrollContainerRect,
+    isTop,
+    isBottom,
+    isLeft,
+    isRight
+  } = getScrollPosition(scrollableElement);
+  const direction = {
+    x: 0 /* Idle */,
+    y: 0 /* Idle */
+  };
+  const speed = {
+    x: 0,
+    y: 0
+  };
+  const threshold = {
+    height: scrollContainerRect.height * thresholdPercentage.y,
+    width: scrollContainerRect.width * thresholdPercentage.x
+  };
+  if (!isTop && coordinates.y <= scrollContainerRect.top + threshold.height && intent?.y !== 1 /* Forward */) {
+    direction.y = -1 /* Reverse */;
+    speed.y = acceleration * Math.abs(
+      (scrollContainerRect.top + threshold.height - coordinates.y) / threshold.height
+    );
+  } else if (!isBottom && coordinates.y >= scrollContainerRect.bottom - threshold.height && intent?.y !== -1 /* Reverse */) {
+    direction.y = 1 /* Forward */;
+    speed.y = acceleration * Math.abs(
+      (scrollContainerRect.bottom - threshold.height - coordinates.y) / threshold.height
+    );
+  }
+  if (!isRight && coordinates.x >= scrollContainerRect.right - threshold.width && intent?.x !== -1 /* Reverse */) {
+    direction.x = 1 /* Forward */;
+    speed.x = acceleration * Math.abs(
+      (scrollContainerRect.right - threshold.width - coordinates.x) / threshold.width
+    );
+  } else if (!isLeft && coordinates.x <= scrollContainerRect.left + threshold.width && intent?.x !== 1 /* Forward */) {
+    direction.x = -1 /* Reverse */;
+    speed.x = acceleration * Math.abs(
+      (scrollContainerRect.left + threshold.width - coordinates.x) / threshold.width
+    );
+  }
+  return {
+    direction,
+    speed
+  };
+}
+
+// src/utilities/scroll/scrollIntoViewIfNeeded.ts
+function supportsScrollIntoViewIfNeeded(element) {
+  return "scrollIntoViewIfNeeded" in element && typeof element.scrollIntoViewIfNeeded === "function";
+}
+function scrollIntoViewIfNeeded(el, centerIfNeeded = false) {
+  if (supportsScrollIntoViewIfNeeded(el)) {
+    el.scrollIntoViewIfNeeded(centerIfNeeded);
+    return;
+  }
+  if (!(el instanceof HTMLElement)) {
+    return el.scrollIntoView();
+  }
+  var [parent] = getScrollableAncestors(el, { limit: 1 });
+  if (!(parent instanceof HTMLElement)) {
+    return;
+  }
+  const parentComputedStyle = getWindow(parent).getComputedStyle(parent, null), parentBorderTopWidth = parseInt(
+    parentComputedStyle.getPropertyValue("border-top-width")
+  ), parentBorderLeftWidth = parseInt(
+    parentComputedStyle.getPropertyValue("border-left-width")
+  ), overTop = el.offsetTop - parent.offsetTop < parent.scrollTop, overBottom = el.offsetTop - parent.offsetTop + el.clientHeight - parentBorderTopWidth > parent.scrollTop + parent.clientHeight, overLeft = el.offsetLeft - parent.offsetLeft < parent.scrollLeft, overRight = el.offsetLeft - parent.offsetLeft + el.clientWidth - parentBorderLeftWidth > parent.scrollLeft + parent.clientWidth, alignWithTop = overTop && !overBottom;
+  if ((overTop || overBottom) && centerIfNeeded) {
+    parent.scrollTop = el.offsetTop - parent.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + el.clientHeight / 2;
+  }
+  if ((overLeft || overRight) && centerIfNeeded) {
+    parent.scrollLeft = el.offsetLeft - parent.offsetLeft - parent.clientWidth / 2 - parentBorderLeftWidth + el.clientWidth / 2;
+  }
+  if ((overTop || overBottom || overLeft || overRight) && !centerIfNeeded) {
+    el.scrollIntoView(alignWithTop);
+  }
+}
+
+// src/utilities/scheduler/scheduler.ts
+var Scheduler = class {
+  constructor() {
+    this.tasks = /* @__PURE__ */ new Set();
+    this.flush = () => {
+      const tasks = this.tasks;
+      this.animationFrame = void 0;
+      this.tasks = /* @__PURE__ */ new Set();
+      for (const task of tasks) {
+        task();
+      }
+    };
+  }
+  schedule(task) {
+    this.tasks.add(task);
+    if (!this.animationFrame) {
+      this.animationFrame = requestAnimationFrame(this.flush);
+    }
+  }
+};
+var scheduler = new Scheduler();
+
+// src/utilities/transform/inverseTransform.ts
+function inverseTransform(rect, parsedTransform, transformOrigin) {
+  const { scaleX, scaleY, x: translateX, y: translateY } = parsedTransform;
+  const x = rect.left - translateX - (1 - scaleX) * parseFloat(transformOrigin);
+  const y = rect.top - translateY - (1 - scaleY) * parseFloat(transformOrigin.slice(transformOrigin.indexOf(" ") + 1));
+  const w = scaleX ? rect.width / scaleX : rect.width;
+  const h = scaleY ? rect.height / scaleY : rect.height;
+  return {
+    width: w,
+    height: h,
+    top: y,
+    right: x + w,
+    bottom: y + h,
+    left: x
+  };
+}
+
+// src/utilities/styles/Styles.ts
+var Styles = class {
+  constructor(element) {
+    this.element = element;
+    this.initial = /* @__PURE__ */ new Map();
+  }
+  set(properties, prefix = "") {
+    const { element } = this;
+    if (!supportsStyle(element)) {
+      return;
+    }
+    for (const [key, value] of Object.entries(properties)) {
+      const property = `${prefix}${key}`;
+      if (!this.initial.has(property)) {
+        this.initial.set(property, element.style.getPropertyValue(property));
+      }
+      element.style.setProperty(
+        property,
+        typeof value === "string" ? value : `${value}px`
+      );
+    }
+  }
+  remove(properties, prefix = "") {
+    const { element } = this;
+    if (!supportsStyle(element)) {
+      return;
+    }
+    for (const key of properties) {
+      const property = `${prefix}${key}`;
+      element.style.removeProperty(property);
+    }
+  }
+  reset() {
+    const { element } = this;
+    if (!supportsStyle(element)) {
+      return;
+    }
+    for (const [key, value] of this.initial) {
+      element.style.setProperty(key, value);
+    }
+    if (element.getAttribute("style") === "") {
+      element.removeAttribute("style");
+    }
+  }
+};
+
+// src/utilities/transform/animateTransform.ts
+function animateTransform({
+  element,
+  keyframes,
+  options,
+  onReady,
+  onFinish
+}) {
+  const styles = new Styles(element);
+  const { transitionProperty } = getWindow(element).getComputedStyle(element);
+  const properties = transitionProperty.split(", ");
+  styles.set({
+    "transition-property": properties.length ? properties.filter(
+      (property) => !property.includes("transform") && !property.includes("translate")
+    ).join(", ") : "none"
+  });
+  onReady?.();
+  element.animate(keyframes, options).finished.then(() => {
+    onFinish?.();
+    styles.reset();
+  });
+}
+
+// src/utilities/transform/parseScale.ts
+function parseScale(scale) {
+  if (scale === "none") {
+    return null;
+  }
+  const values = scale.split(" ");
+  const x = parseFloat(values[0]);
+  const y = parseFloat(values[1]);
+  if (isNaN(x) && isNaN(y)) {
+    return null;
+  }
+  return {
+    x: isNaN(x) ? y : x,
+    y: isNaN(y) ? x : y
+  };
+}
+
+// src/utilities/transform/parseTranslate.ts
+function parseTranslate(translate) {
+  if (translate === "none") {
+    return null;
+  }
+  const [x, y, z = "0"] = translate.split(" ");
+  const output = { x: parseFloat(x), y: parseFloat(y), z: parseInt(z, 10) };
+  if (isNaN(output.x) && isNaN(output.y)) {
+    return null;
+  }
+  return {
+    x: isNaN(output.x) ? 0 : output.x,
+    y: isNaN(output.y) ? 0 : output.y,
+    z: isNaN(output.z) ? 0 : output.z
+  };
+}
+
+// src/utilities/transform/parseTransform.ts
+function parseTransform(computedStyles) {
+  const { scale, transform, translate } = computedStyles;
+  const parsedScale = parseScale(scale);
+  const parsedTranslate = parseTranslate(translate);
+  if (parsedScale && parsedTranslate) {
+    return {
+      x: parsedTranslate.x,
+      y: parsedTranslate.y,
+      z: parsedTranslate.z,
+      scaleX: parsedScale.x,
+      scaleY: parsedScale.y
+    };
+  }
+  const parsedMatrix = parseTransformMatrix(transform);
+  if (!parsedMatrix && !parsedScale && !parsedTranslate) {
+    return null;
+  }
+  return {
+    x: parsedTranslate?.x ?? parsedMatrix?.x ?? 0,
+    y: parsedTranslate?.y ?? parsedMatrix?.y ?? 0,
+    scaleX: parsedScale?.x ?? parsedMatrix?.scaleX ?? 1,
+    scaleY: parsedScale?.y ?? parsedMatrix?.scaleY ?? 1
+  };
+}
+function parseTransformMatrix(transform) {
+  if (transform.startsWith("matrix3d(")) {
+    const transformArray = transform.slice(9, -1).split(/, /);
+    return {
+      x: +transformArray[12],
+      y: +transformArray[13],
+      scaleX: +transformArray[0],
+      scaleY: +transformArray[5]
+    };
+  } else if (transform.startsWith("matrix(")) {
+    const transformArray = transform.slice(7, -1).split(/, /);
+    return {
+      x: +transformArray[4],
+      y: +transformArray[5],
+      scaleX: +transformArray[0],
+      scaleY: +transformArray[3]
+    };
+  }
+  return null;
+}
+
+// src/utilities/transform/stringifyTransform.ts
+function stringifyTransform({ x, y, z, scaleX, scaleY }) {
+  return `translate3d(${x}px, ${y}px, ${z ?? 0}) scale(${scaleX}, ${scaleY})`;
+}
+
+// src/utilities/shapes/DOMRectangle.ts
+var DOMRectangle = class extends Rectangle {
+  constructor(element, ignoreTransforms = false) {
+    let { top, left, right, bottom, width, height } = getBoundingRectangle(element);
+    const computedStyles = getWindow(element).getComputedStyle(element);
+    const parsedTransform = parseTransform(computedStyles);
+    const scale = {
+      x: parsedTransform?.scaleX ?? 1,
+      y: parsedTransform?.scaleY ?? 1
+    };
+    if (parsedTransform && ignoreTransforms) {
+      const updated = inverseTransform(
+        { top, left, right, bottom, width, height },
+        parsedTransform,
+        computedStyles.transformOrigin
+      );
+      top = updated.top;
+      left = updated.left;
+      width = updated.width;
+      height = updated.height;
+    }
+    super(left, top, width, height);
+    this.scale = scale;
+  }
+};
+
+// src/utilities/type-guards/isKeyboardEvent.ts
+function isKeyboardEvent(event) {
+  return event instanceof KeyboardEvent;
+}
+
+// src/utilities/type-guards/supportsViewTransition.ts
+function supportsViewTransition(document2) {
+  return "startViewTransition" in document2;
+}
+
+export { DOMRectangle, Listeners, Scheduler, ScrollDirection, Styles, animateTransform, canScroll, canUseDOM, cloneElement, createPlaceholder, detectScrollIntent, getBoundingRectangle, getDocument, getFirstScrollableAncestor, getScrollableAncestors, getViewportBoundingRectangle, getWindow, inverseTransform, isDocumentScrollingElement, isKeyboardEvent, parseTransform, scheduler, scrollIntoViewIfNeeded, showPopover, stringifyTransform, supportsPopover, supportsStyle, supportsViewTransition };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=utilities.js.map