@threadlabs/looma 0.2.5 → 0.2.7

package/dist/ui-tree.entry-7PYQ5RIN.js

@@ -1,470 +0,0 @@
-import {
-  dispatchDetail
-} from "./chunk-UL7UIUJZ.js";
-import {
-  Host,
-  getElement,
-  h,
-  registerInstance
-} from "./chunk-24OTMNIU.js";
-
-// dist/esm/ui-tree.entry.js
-function classifyDropPosition(rect, clientY, acceptsChildren) {
-  const progress = rect.height > 0 ? Math.min(1, Math.max(0, (clientY - rect.top) / rect.height)) : 0.5;
-  if (!acceptsChildren)
-    return progress < 0.5 ? "before" : "after";
-  if (progress < 0.25)
-    return "before";
-  if (progress > 0.75)
-    return "after";
-  return "inside";
-}
-function setElementDragImage(dataTransfer, element) {
-  if (!dataTransfer || typeof dataTransfer.setDragImage !== "function")
-    return;
-  const { height } = element.getBoundingClientRect();
-  dataTransfer.setDragImage(element, 16, Math.max(0, height / 2));
-}
-function createHoverIntent(delay, onIntent) {
-  let timer;
-  let pendingKey;
-  function cancel() {
-    if (timer)
-      clearTimeout(timer);
-    timer = void 0;
-    pendingKey = void 0;
-  }
-  return {
-    schedule(key) {
-      if (pendingKey === key && timer)
-        return;
-      cancel();
-      pendingKey = key;
-      timer = setTimeout(() => {
-        timer = void 0;
-        const resolvedKey = pendingKey;
-        pendingKey = void 0;
-        if (resolvedKey)
-          onIntent(resolvedKey);
-      }, Math.max(0, delay));
-    },
-    cancel,
-    destroy: cancel
-  };
-}
-var uiTreeCss = () => `:host{--ui-tree-indent:16px;--ui-tree-gutter:0px;display:block;min-inline-size:0;padding-inline-start:var(--ui-tree-gutter)}::slotted(ui-tree-item){--ui-tree-indent:inherit}`;
-var UITree = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  get host() {
-    return getElement(this);
-  }
-  label = "Tree";
-  hoverExpandDelay = 700;
-  /** Maximum resulting item depth accepted by pointer reordering. Zero is unlimited. */
-  maxDepth = 0;
-  source = null;
-  target = null;
-  position = null;
-  rejectedTarget = null;
-  rejectedPosition = null;
-  rejection = null;
-  hoverIntent = null;
-  structureObserver = null;
-  tabStop = null;
-  componentDidLoad() {
-    this.hoverIntent = createHoverIntent(this.hoverExpandDelay, this.expandTarget);
-    this.host.addEventListener("dragstart", this.onDragStart);
-    this.host.addEventListener("drag", this.onDrag);
-    this.host.addEventListener("dragenter", this.onDragOver);
-    this.host.addEventListener("dragover", this.onDragOver);
-    this.host.addEventListener("dragleave", this.onDragLeave);
-    this.host.addEventListener("drop", this.onDrop);
-    this.host.addEventListener("dragend", this.onDragEnd);
-    this.host.addEventListener("keydown", this.onKeyDown);
-    this.host.addEventListener("focusin", this.onFocusIn);
-    this.host.addEventListener("ui-tree-expansion-change", this.onExpansionChange);
-    this.syncStructuralLevels();
-    this.structureObserver = new MutationObserver(this.syncStructuralLevels);
-    this.structureObserver.observe(this.host, { childList: true, subtree: true });
-  }
-  disconnectedCallback() {
-    this.hoverIntent?.destroy();
-    this.host.removeEventListener("dragstart", this.onDragStart);
-    this.host.removeEventListener("drag", this.onDrag);
-    this.host.removeEventListener("dragenter", this.onDragOver);
-    this.host.removeEventListener("dragover", this.onDragOver);
-    this.host.removeEventListener("dragleave", this.onDragLeave);
-    this.host.removeEventListener("drop", this.onDrop);
-    this.host.removeEventListener("dragend", this.onDragEnd);
-    this.host.removeEventListener("keydown", this.onKeyDown);
-    this.host.removeEventListener("focusin", this.onFocusIn);
-    this.host.removeEventListener("ui-tree-expansion-change", this.onExpansionChange);
-    this.structureObserver?.disconnect();
-    this.structureObserver = null;
-  }
-  syncStructuralLevels = () => {
-    for (const item of Array.from(this.host.querySelectorAll("ui-tree-item"))) {
-      item.dispatchEvent(new CustomEvent("ui-tree-structure-sync"));
-    }
-    this.syncTabStop();
-  };
-  syncTabStop(preferred) {
-    const items = this.visibleItems();
-    const next = preferred && items.includes(preferred) ? preferred : this.tabStop && items.includes(this.tabStop) ? this.tabStop : items[0] ?? null;
-    this.tabStop = next;
-    for (const item of items) {
-      item.dispatchEvent(new CustomEvent("ui-tree-roving-tab-stop", {
-        detail: { active: item === next }
-      }));
-    }
-  }
-  itemFromEvent(event) {
-    return event.composedPath().find((node) => node instanceof HTMLElement && node.localName === "ui-tree-item") ?? null;
-  }
-  eventTargetsInteractiveContent(event) {
-    for (const node of event.composedPath()) {
-      if (node instanceof HTMLElement && node.localName === "ui-tree-item")
-        break;
-      if (node instanceof HTMLElement && node.matches('a, button, input, select, textarea, [role="button"], [role="link"]')) {
-        return true;
-      }
-    }
-    return false;
-  }
-  itemId(item) {
-    return item.itemId || item.getAttribute("item-id") || "";
-  }
-  rowFor(item) {
-    return item.shadowRoot?.querySelector('[part="row"]') ?? null;
-  }
-  itemAtPoint(clientX, clientY) {
-    let element = this.host.ownerDocument.elementFromPoint(clientX, clientY);
-    while (element) {
-      if (element.localName === "ui-tree-item" && this.host.contains(element)) {
-        return element;
-      }
-      const root = element.getRootNode();
-      element = root instanceof ShadowRoot ? root.host : element.parentElement;
-    }
-    return null;
-  }
-  isWithinTree(node) {
-    let element = node instanceof HTMLElement ? node : null;
-    while (element) {
-      if (element === this.host || this.host.contains(element))
-        return true;
-      const root = element.getRootNode();
-      element = root instanceof ShadowRoot ? root.host : element.parentElement;
-    }
-    return false;
-  }
-  acceptsChildren(item) {
-    return Boolean(item.container ?? item.hasAttribute("container")) && !Boolean(item.disabled ?? item.hasAttribute("disabled"));
-  }
-  itemMetadata(item) {
-    return {
-      type: item.getAttribute("data-drag-type") || item.getAttribute("drag-type") || "item",
-      scope: item.getAttribute("data-drop-scope") || item.getAttribute("drop-scope") || "",
-      accepts: (item.getAttribute("data-accepts") || item.getAttribute("accepts") || "").split(",").map((value) => value.trim()).filter(Boolean)
-    };
-  }
-  constraintDepth(item) {
-    if (item.dropDepth !== void 0)
-      return item.dropDepth;
-    const dropDepth = item.getAttribute("drop-depth");
-    if (dropDepth !== null)
-      return Number(dropDepth);
-    return Number(item.getAttribute("aria-level")) || 1;
-  }
-  subtreeDepth(item) {
-    if (item.subtreeDepth !== void 0)
-      return Math.max(0, Math.floor(item.subtreeDepth));
-    const override = item.getAttribute("subtree-depth");
-    if (override !== null)
-      return Math.max(0, Math.floor(Number(override)));
-    return Array.from(item.querySelectorAll("ui-tree-item")).reduce((deepest, descendant) => {
-      let nesting = 0;
-      let ancestor = descendant.parentElement?.closest("ui-tree-item") ?? null;
-      while (ancestor && ancestor !== item) {
-        nesting += 1;
-        ancestor = ancestor.parentElement?.closest("ui-tree-item") ?? null;
-      }
-      return ancestor === item ? Math.max(deepest, nesting + 1) : deepest;
-    }, 0);
-  }
-  dropRejection(source, target, position) {
-    if (source.contains(target))
-      return { reason: "descendant" };
-    const sourceMeta = this.itemMetadata(source);
-    const targetMeta = this.itemMetadata(target);
-    if (position === "inside") {
-      if (!this.acceptsChildren(target) || targetMeta.accepts.length > 0 && !targetMeta.accepts.includes(sourceMeta.type)) {
-        return { reason: "incompatible" };
-      }
-    } else if (sourceMeta.type !== targetMeta.type) {
-      return { reason: "incompatible" };
-    }
-    const maxDepth = Math.max(0, Math.floor(this.maxDepth));
-    if (maxDepth > 0) {
-      const targetDepth = Math.max(0, Math.floor(this.constraintDepth(target)));
-      const subtreeDepth = this.subtreeDepth(source);
-      const resultingDepth = targetDepth + (position === "inside" ? 1 : 0) + subtreeDepth;
-      if (resultingDepth > maxDepth)
-        return { reason: "max-depth", maxDepth, resultingDepth };
-    }
-    return null;
-  }
-  clearTarget() {
-    this.target?.removeAttribute("data-drop-position");
-    this.target = null;
-    this.position = null;
-    this.hoverIntent?.cancel();
-  }
-  clearRejection() {
-    this.rejectedTarget = null;
-    this.rejectedPosition = null;
-    this.rejection = null;
-  }
-  finishDrag() {
-    this.source?.removeAttribute("data-dragging");
-    this.source = null;
-    this.clearTarget();
-    this.clearRejection();
-  }
-  expandTarget = (itemId) => {
-    const item = Array.from(this.host.querySelectorAll("ui-tree-item")).find((candidate) => this.itemId(candidate) === itemId);
-    if (!item || item.getAttribute("aria-expanded") !== "false")
-      return;
-    item.dispatchEvent(new CustomEvent("ui-tree-auto-expand"));
-  };
-  onDragStart = (event) => {
-    const item = this.itemFromEvent(event);
-    if (!item || !Boolean(item.sortable ?? item.hasAttribute("sortable")) || Boolean(item.disabled ?? item.hasAttribute("disabled")))
-      return;
-    const fromHandle = event.composedPath().some((node) => node instanceof HTMLElement && node.getAttribute("part") === "drag-handle");
-    if (!fromHandle) {
-      event.preventDefault();
-      return;
-    }
-    const sourceId = this.itemId(item);
-    const row = this.rowFor(item);
-    if (!sourceId || !row) {
-      event.preventDefault();
-      return;
-    }
-    this.source = item;
-    item.setAttribute("data-dragging", "true");
-    if (event.dataTransfer) {
-      event.dataTransfer.effectAllowed = "move";
-      event.dataTransfer.setData("text/plain", sourceId);
-    }
-    setElementDragImage(event.dataTransfer, row);
-  };
-  updateTarget(target, clientY, dataTransfer) {
-    if (!this.source)
-      return false;
-    if (!target || target === this.source) {
-      this.clearTarget();
-      this.clearRejection();
-      return false;
-    }
-    const row = this.rowFor(target);
-    if (!row)
-      return false;
-    const position = classifyDropPosition(row.getBoundingClientRect(), clientY, this.acceptsChildren(target));
-    const rejection = this.dropRejection(this.source, target, position);
-    if (rejection) {
-      if (dataTransfer)
-        dataTransfer.dropEffect = "none";
-      this.clearTarget();
-      if (rejection.reason === "max-depth") {
-        this.rejectedTarget = target;
-        this.rejectedPosition = position;
-        this.rejection = rejection;
-      } else {
-        this.clearRejection();
-      }
-      return false;
-    }
-    this.clearRejection();
-    if (dataTransfer)
-      dataTransfer.dropEffect = "move";
-    if (this.target !== target || this.position !== position) {
-      this.clearTarget();
-      this.target = target;
-      this.position = position;
-      target.setAttribute("data-drop-position", position);
-    }
-    if (position === "inside" && target.getAttribute("aria-expanded") === "false") {
-      this.hoverIntent?.schedule(this.itemId(target));
-    } else {
-      this.hoverIntent?.cancel();
-    }
-    return true;
-  }
-  onDrag = (event) => {
-    if (!this.source || event.clientX === 0 && event.clientY === 0)
-      return;
-    const target = this.itemAtPoint(event.clientX, event.clientY);
-    if (target)
-      this.updateTarget(target, event.clientY, event.dataTransfer);
-  };
-  onDragOver = (event) => {
-    if (!this.source)
-      return;
-    const target = this.itemFromEvent(event);
-    if (this.updateTarget(target, event.clientY, event.dataTransfer)) {
-      event.preventDefault();
-    }
-  };
-  onDragLeave = (event) => {
-    if (this.isWithinTree(event.relatedTarget))
-      return;
-    if (this.itemAtPoint(event.clientX, event.clientY))
-      return;
-    this.clearTarget();
-    this.clearRejection();
-  };
-  dispatchReorder(source, target, position) {
-    const sourceId = this.itemId(source);
-    const targetId = this.itemId(target);
-    if (!sourceId || !targetId)
-      return;
-    if (position === "inside")
-      this.expandTarget(targetId);
-    const sourceMeta = this.itemMetadata(source);
-    const targetMeta = this.itemMetadata(target);
-    dispatchDetail(this.host, "reorder", {
-      sourceId,
-      targetId,
-      position,
-      sourceType: sourceMeta.type,
-      targetType: targetMeta.type,
-      sourceScope: sourceMeta.scope,
-      targetScope: targetMeta.scope,
-      trigger: "pointer"
-    });
-  }
-  dispatchReorderRejected(source, target, position, rejection) {
-    const sourceId = this.itemId(source);
-    const targetId = this.itemId(target);
-    if (!sourceId || !targetId)
-      return;
-    dispatchDetail(this.host, "reorder-rejected", {
-      sourceId,
-      targetId,
-      position,
-      reason: "max-depth",
-      maxDepth: rejection.maxDepth,
-      resultingDepth: rejection.resultingDepth,
-      trigger: "pointer"
-    });
-  }
-  onDrop = (event) => {
-    if (!this.source || !this.target || !this.position)
-      return;
-    event.preventDefault();
-    this.dispatchReorder(this.source, this.target, this.position);
-    this.finishDrag();
-  };
-  onDragEnd = (event) => {
-    if (this.source) {
-      if (this.rejectedTarget && this.rejectedPosition && this.rejection) {
-        this.dispatchReorderRejected(this.source, this.rejectedTarget, this.rejectedPosition, this.rejection);
-        this.finishDrag();
-        return;
-      }
-      const target = this.itemAtPoint(event.clientX, event.clientY);
-      if (target && target !== this.source) {
-        const row = this.rowFor(target);
-        if (row) {
-          const position = classifyDropPosition(row.getBoundingClientRect(), event.clientY, this.acceptsChildren(target));
-          const rejection = this.dropRejection(this.source, target, position);
-          if (!rejection) {
-            this.dispatchReorder(this.source, target, position);
-          } else if (rejection.reason === "max-depth") {
-            this.dispatchReorderRejected(this.source, target, position, rejection);
-          }
-        }
-      }
-    }
-    this.finishDrag();
-  };
-  visibleItems() {
-    return Array.from(this.host.querySelectorAll("ui-tree-item")).filter((item) => item.getClientRects().length > 0 && !item.hasAttribute("disabled"));
-  }
-  parentItem(item) {
-    const parent = item.parentElement?.closest("ui-tree-item") ?? null;
-    return parent && this.host.contains(parent) ? parent : null;
-  }
-  firstVisibleChild(item, items) {
-    return items.find((candidate) => this.parentItem(candidate) === item) ?? null;
-  }
-  focusItem(item) {
-    this.syncTabStop(item);
-    item.focus();
-  }
-  requestExpansion(item, expanded) {
-    item.dispatchEvent(new CustomEvent("ui-tree-request-expanded", {
-      detail: { expanded, trigger: "keyboard" }
-    }));
-  }
-  onFocusIn = (event) => {
-    if (this.eventTargetsInteractiveContent(event))
-      return;
-    const item = this.itemFromEvent(event);
-    if (item)
-      this.syncTabStop(item);
-  };
-  onExpansionChange = () => {
-    requestAnimationFrame(() => this.syncTabStop());
-  };
-  onKeyDown = (event) => {
-    if (this.eventTargetsInteractiveContent(event))
-      return;
-    const current = this.itemFromEvent(event);
-    if (!current)
-      return;
-    const items = this.visibleItems();
-    const index = items.indexOf(current);
-    if (index < 0)
-      return;
-    const next = event.key === "ArrowDown" ? items[index + 1] : event.key === "ArrowUp" ? items[index - 1] : event.key === "Home" ? items[0] : event.key === "End" ? items.at(-1) : null;
-    if (next) {
-      event.preventDefault();
-      this.focusItem(next);
-      return;
-    }
-    if (event.key === "ArrowLeft") {
-      if (current.getAttribute("aria-expanded") === "true") {
-        event.preventDefault();
-        this.requestExpansion(current, false);
-      } else if (this.parentItem(current)) {
-        event.preventDefault();
-        this.focusItem(this.parentItem(current));
-      }
-      return;
-    }
-    if (event.key === "ArrowRight") {
-      if (current.getAttribute("aria-expanded") === "false") {
-        event.preventDefault();
-        this.requestExpansion(current, true);
-      } else if (current.getAttribute("aria-expanded") === "true") {
-        const child = this.firstVisibleChild(current, items);
-        if (child) {
-          event.preventDefault();
-          this.focusItem(child);
-        }
-      }
-    }
-  };
-  render() {
-    return h(Host, { key: "bae06665078a67c59db2d9e72c7dea6ddeeb9e56", role: "tree", "aria-label": this.label || "Tree" }, h("slot", { key: "232cb02f1a50bc5e18a92c0d8677e917870ec75e" }));
-  }
-};
-UITree.style = uiTreeCss();
-export {
-  UITree as ui_tree
-};