@gridkitjs/dom 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,739 @@
+// src/announcer.ts
+var NO_BREAK_SPACE = String.fromCodePoint(160);
+function createLiveAnnouncer(container = document.body) {
+  const region = document.createElement("div");
+  region.className = "gridkit-sr-only";
+  region.setAttribute("role", "status");
+  region.setAttribute("aria-live", "polite");
+  container.append(region);
+  let last = "";
+  let padded = false;
+  return {
+    announce(text) {
+      padded = text === last && !padded;
+      last = text;
+      region.textContent = padded ? text + NO_BREAK_SPACE : text;
+    },
+    destroy() {
+      region.remove();
+    }
+  };
+}
+
+// src/bodyTargets.ts
+function rowIndexOf(row) {
+  const attribute = row.getAttribute("data-gridkit-row-index");
+  return attribute === null ? null : Number(attribute);
+}
+function bodyCellFrom(target) {
+  if (!(target instanceof Element)) {
+    return null;
+  }
+  const cell = target.closest("td[data-gridkit-column]");
+  const row = cell?.parentElement;
+  const columnId = cell?.getAttribute("data-gridkit-column");
+  const rowIndex = row === null || row === void 0 ? null : rowIndexOf(row);
+  if (!(cell instanceof HTMLTableCellElement) || !(row instanceof HTMLTableRowElement) || columnId === null || columnId === void 0 || rowIndex === null) {
+    return null;
+  }
+  return { rowIndex, columnIndex: cell.cellIndex, columnId };
+}
+function groupRowFrom(target) {
+  if (!(target instanceof Element)) {
+    return null;
+  }
+  const row = target.closest("tr[data-gridkit-group]");
+  const groupId = row?.getAttribute("data-gridkit-group");
+  const rowIndex = row === null ? null : rowIndexOf(row);
+  if (!(row instanceof HTMLTableRowElement) || groupId === null || groupId === void 0 || rowIndex === null) {
+    return null;
+  }
+  return { rowIndex, groupId };
+}
+function bodyRowFrom(target) {
+  if (!(target instanceof Element)) {
+    return null;
+  }
+  const row = target.closest("tr[data-gridkit-row-index]");
+  const rowIndex = row === null ? null : rowIndexOf(row);
+  if (rowIndex === null) {
+    return null;
+  }
+  const cell = target.closest("td[data-gridkit-column]");
+  return {
+    rowIndex,
+    columnId: cell?.parentElement === row ? cell.getAttribute("data-gridkit-column") : null
+  };
+}
+
+// src/columnResize.ts
+import { applyColumnResize } from "@gridkitjs/core";
+
+// src/pointerGesture.ts
+function isPrimaryPress(press) {
+  return press.button === 0 && press.isPrimary;
+}
+function startPointerGesture(element, pointerId, handlers) {
+  element.setPointerCapture(pointerId);
+  function stop() {
+    element.removeEventListener("pointermove", move);
+    element.removeEventListener("pointerup", end);
+    element.removeEventListener("pointercancel", cancel);
+    window.removeEventListener("keydown", onKeyDown);
+    if (element.hasPointerCapture(pointerId)) {
+      element.releasePointerCapture(pointerId);
+    }
+  }
+  function move(event) {
+    handlers.onMove(event);
+  }
+  function end() {
+    stop();
+    handlers.onEnd();
+  }
+  function cancel() {
+    stop();
+    handlers.onCancel();
+  }
+  function onKeyDown(event) {
+    if (event.key === "Escape") {
+      cancel();
+    }
+  }
+  element.addEventListener("pointermove", move);
+  element.addEventListener("pointerup", end);
+  element.addEventListener("pointercancel", cancel);
+  window.addEventListener("keydown", onKeyDown);
+}
+
+// src/columnResize.ts
+function startColumnResizeGesture(handle, press, session, handlers) {
+  if (!isPrimaryPress(press)) {
+    return false;
+  }
+  press.preventDefault();
+  let width = session.startWidth;
+  startPointerGesture(handle, press.pointerId, {
+    onMove(event) {
+      width = applyColumnResize(session, event.clientX);
+      handlers.onMove(width);
+    },
+    onEnd() {
+      handlers.onEnd(width === session.startWidth ? null : width);
+    },
+    onCancel() {
+      handlers.onCancel();
+    }
+  });
+  return true;
+}
+function measureColumnContent(table, columnId) {
+  const cells = table.querySelectorAll(
+    `td[data-gridkit-column="${CSS.escape(columnId)}"]`
+  );
+  const range = document.createRange();
+  let widest = null;
+  for (const cell of cells) {
+    range.selectNodeContents(cell);
+    const style = getComputedStyle(cell);
+    const width = range.getBoundingClientRect().width + parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
+    if (widest === null || width > widest) {
+      widest = width;
+    }
+  }
+  return widest;
+}
+
+// src/dragReorder.ts
+var DRAG_THRESHOLD = 4;
+var NO_DRAG = {
+  draggedId: null,
+  dropTarget: null,
+  ghostTransform: null
+};
+function startDragReorder(id, grabElement, press, handlers) {
+  if (!isPrimaryPress(press)) {
+    return false;
+  }
+  const { pointerId, clientX: startX } = press;
+  const grabX = startX - grabElement.getBoundingClientRect().left;
+  let dragging = false;
+  let target = null;
+  startPointerGesture(grabElement, pointerId, {
+    onMove(moveEvent) {
+      const { clientX, clientY } = moveEvent;
+      if (!dragging) {
+        if (Math.abs(clientX - startX) < DRAG_THRESHOLD) {
+          return;
+        }
+        dragging = true;
+      }
+      target = handlers.resolveTarget(clientX, clientY, id);
+      handlers.onState({
+        draggedId: id,
+        dropTarget: target,
+        ghostTransform: `translate(${String(clientX - grabX)}px, ${String(clientY)}px)`
+      });
+    },
+    onEnd() {
+      const dropped = target;
+      handlers.onState(NO_DRAG);
+      if (dragging && dropped !== null) {
+        handlers.onDrop(dropped, id);
+      }
+    },
+    onCancel() {
+      target = null;
+      handlers.onState(NO_DRAG);
+    }
+  });
+  return true;
+}
+
+// src/dropTargets.ts
+import {
+  movesColumn,
+  movesGroupBy,
+  resolveDropBefore
+} from "@gridkitjs/core";
+function elementAt(x, y, selector) {
+  return document.elementFromPoint(x, y)?.closest(selector) ?? null;
+}
+function sideOf(element, x) {
+  const rect = element.getBoundingClientRect();
+  return x < rect.left + rect.width / 2 ? "before" : "after";
+}
+function resolveGroupByDropTarget(clientX, clientY, movedId, groupBy) {
+  const overBar = elementAt(clientX, clientY, "[data-gridkit-group-by-bar]");
+  if (overBar === null) {
+    return null;
+  }
+  const overChip = elementAt(clientX, clientY, "[data-gridkit-group-chip]");
+  const chipId = overChip?.getAttribute("data-gridkit-group-chip");
+  const beforeColumnId = overChip && chipId ? resolveDropBefore(
+    groupBy.map((entry) => entry.columnId),
+    chipId,
+    sideOf(overChip, clientX)
+  ) : null;
+  return movesGroupBy(groupBy, movedId, beforeColumnId) ? { kind: "group-by", beforeColumnId } : null;
+}
+function resolveColumnDropTarget(clientX, clientY, movedId, { order, groupBy, groupByDraggableIds }) {
+  const over = elementAt(clientX, clientY, "th[data-gridkit-column]");
+  const overId = over?.getAttribute("data-gridkit-column");
+  const beforeId = over && overId ? resolveDropBefore(order, overId, sideOf(over, clientX)) : void 0;
+  if (beforeId !== void 0) {
+    return movesColumn(order, movedId, beforeId) ? { kind: "column-order", beforeId } : null;
+  }
+  const alreadyGrouped = groupBy.some((entry) => entry.columnId === movedId);
+  return groupByDraggableIds.has(movedId) && !alreadyGrouped ? resolveGroupByDropTarget(clientX, clientY, movedId, groupBy) : null;
+}
+
+// src/elementWidth.ts
+function observeElementWidth(element, onWidth) {
+  onWidth(element.clientWidth);
+  const observer = new ResizeObserver(() => {
+    onWidth(element.clientWidth);
+  });
+  observer.observe(element);
+  return () => {
+    observer.disconnect();
+  };
+}
+
+// src/gridFocus.ts
+import {
+  clampFocus,
+  HEADER_ROW,
+  nextFocusForKey
+} from "@gridkitjs/core";
+var FALLBACK_PAGE = 10;
+function cellIn(row, columnIndex) {
+  if (row === null) {
+    return null;
+  }
+  return row.cells[Math.min(columnIndex, row.cells.length - 1)] ?? null;
+}
+function findBodyRow(bodyTable, rowIndex) {
+  return bodyTable?.tBodies[0]?.querySelector(
+    `:scope > tr[data-gridkit-row-index="${String(rowIndex)}"]`
+  ) ?? null;
+}
+function measurePageSize(bodyTable) {
+  const firstRow = bodyTable?.tBodies[0]?.rows[0];
+  const viewport = bodyTable?.parentElement;
+  if (firstRow === void 0 || viewport === null || viewport === void 0 || firstRow.offsetHeight === 0) {
+    return FALLBACK_PAGE;
+  }
+  return Math.max(1, Math.floor(viewport.clientHeight / firstRow.offsetHeight));
+}
+function createGridFocus(initialOptions) {
+  let options = initialOptions;
+  let rows = null;
+  const listeners = /* @__PURE__ */ new Set();
+  let stored = { rowIndex: HEADER_ROW, columnIndex: 0 };
+  let snapshot = {
+    stored,
+    rowCount: options.rowCount,
+    columnCount: options.columnCount,
+    focus: clampFocus(stored, options.rowCount, options.columnCount)
+  };
+  let pendingMove = null;
+  function getFocus() {
+    if (snapshot.stored !== stored || snapshot.rowCount !== options.rowCount || snapshot.columnCount !== options.columnCount) {
+      snapshot = {
+        stored,
+        rowCount: options.rowCount,
+        columnCount: options.columnCount,
+        focus: clampFocus(stored, options.rowCount, options.columnCount)
+      };
+    }
+    return snapshot.focus;
+  }
+  function focusCell(rowIndex, columnIndex) {
+    const next = clampFocus(
+      { rowIndex, columnIndex },
+      options.rowCount,
+      options.columnCount
+    );
+    const current = getFocus();
+    if (next.rowIndex === current.rowIndex && next.columnIndex === current.columnIndex) {
+      return;
+    }
+    pendingMove = next;
+    stored = next;
+    for (const listener of listeners) {
+      listener();
+    }
+  }
+  return {
+    getFocus,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    setOptions(next) {
+      options = next;
+    },
+    focusCell,
+    handleKey(key, modifiers, pageSize) {
+      const next = nextFocusForKey(
+        key,
+        modifiers,
+        getFocus(),
+        options.rowCount,
+        options.columnCount,
+        pageSize,
+        options.isSkippableRow
+      );
+      if (next === null) {
+        return false;
+      }
+      focusCell(next.rowIndex, next.columnIndex);
+      return true;
+    },
+    attach(next) {
+      rows = next;
+      return () => {
+        if (rows === next) {
+          rows = null;
+        }
+      };
+    },
+    focusDrawnCell(drawn) {
+      if (rows === null || pendingMove === null || snapshot.stored !== pendingMove || snapshot.focus !== drawn) {
+        return;
+      }
+      const cell = cellIn(
+        drawn.rowIndex === HEADER_ROW ? rows.getHeaderRow() : rows.getBodyRow(drawn.rowIndex),
+        drawn.columnIndex
+      );
+      if (cell !== null) {
+        pendingMove = null;
+        cell.focus();
+        return;
+      }
+      const range = options.virtualRange;
+      if (range != null && drawn.rowIndex !== HEADER_ROW && (drawn.rowIndex < range.startIndex || drawn.rowIndex > range.endIndex)) {
+        range.scrollToIndex(drawn.rowIndex);
+        return;
+      }
+      pendingMove = null;
+    }
+  };
+}
+
+// src/infiniteScroll.ts
+function attachInfiniteScroll(root, options) {
+  let latest = options;
+  let intersecting = false;
+  let fired = false;
+  let wasLoading = options.isLoadingMore ?? false;
+  let observer = null;
+  let observed = null;
+  function maybeLoadMore() {
+    if (!intersecting || !latest.hasMore || (latest.isLoadingMore ?? false) || fired) {
+      return;
+    }
+    fired = true;
+    latest.onLoadMore?.();
+  }
+  function disconnect() {
+    observer?.disconnect();
+    observer = null;
+    observed = null;
+    intersecting = false;
+  }
+  function observe() {
+    const sentinel = latest.hasMore ? latest.sentinel : null;
+    const rootMargin = latest.rootMargin ?? "200px";
+    if (observed !== null && observed.sentinel === sentinel && observed.rootMargin === rootMargin) {
+      return;
+    }
+    disconnect();
+    if (sentinel === null) {
+      return;
+    }
+    observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[entries.length - 1];
+        if (entry === void 0) {
+          return;
+        }
+        intersecting = entry.isIntersecting;
+        maybeLoadMore();
+      },
+      { root, rootMargin }
+    );
+    observer.observe(sentinel);
+    observed = { sentinel, rootMargin };
+  }
+  observe();
+  return {
+    update(next) {
+      latest = next;
+      const loading = next.isLoadingMore ?? false;
+      if (wasLoading && !loading) {
+        fired = false;
+        maybeLoadMore();
+      }
+      wasLoading = loading;
+      observe();
+    },
+    detach: disconnect
+  };
+}
+
+// src/overlay/placeOverlay.ts
+var OPPOSITE_SIDE = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left"
+};
+function isVertical(side) {
+  return side === "top" || side === "bottom";
+}
+function roomBeside(side, anchor, viewport) {
+  switch (side) {
+    case "top":
+      return anchor.top;
+    case "bottom":
+      return viewport.height - (anchor.top + anchor.height);
+    case "left":
+      return anchor.left;
+    case "right":
+      return viewport.width - (anchor.left + anchor.width);
+  }
+}
+function chooseSide(preferred, needed, anchor, viewport) {
+  const opposite = OPPOSITE_SIDE[preferred];
+  const room = roomBeside(preferred, anchor, viewport);
+  const oppositeRoom = roomBeside(opposite, anchor, viewport);
+  if (room >= needed) {
+    return preferred;
+  }
+  return oppositeRoom >= needed || oppositeRoom > room ? opposite : preferred;
+}
+function chooseAlign(preferred, fitsAtStart, fitsAtEnd) {
+  if (preferred === "start") {
+    return fitsAtStart || !fitsAtEnd ? "start" : "end";
+  }
+  return fitsAtEnd || !fitsAtStart ? "end" : "start";
+}
+function offsetBeside(side, anchor, panel, gap) {
+  switch (side) {
+    case "top":
+      return anchor.top - gap - panel.height;
+    case "bottom":
+      return anchor.top + anchor.height + gap;
+    case "left":
+      return anchor.left - gap - panel.width;
+    case "right":
+      return anchor.left + anchor.width + gap;
+  }
+}
+function clampIntoView(value, limit) {
+  return Math.max(0, Math.min(value, limit));
+}
+function placeOverlay(anchor, panel, viewport, options = {}) {
+  const [preferredSide, preferredAlign] = (options.placement ?? "bottom-start").split("-");
+  const gap = options.gap ?? 0;
+  const vertical = isVertical(preferredSide);
+  const side = chooseSide(
+    preferredSide,
+    (vertical ? panel.height : panel.width) + gap,
+    anchor,
+    viewport
+  );
+  const anchorStart = vertical ? anchor.left : anchor.top;
+  const anchorEnd = anchorStart + (vertical ? anchor.width : anchor.height);
+  const extent = vertical ? panel.width : panel.height;
+  const room = vertical ? viewport.width : viewport.height;
+  const align = chooseAlign(
+    preferredAlign,
+    anchorStart + extent <= room,
+    anchorEnd - extent >= 0
+  );
+  const along = align === "start" ? anchorStart : anchorEnd - extent;
+  const away = offsetBeside(side, anchor, panel, gap);
+  return {
+    top: clampIntoView(vertical ? away : along, viewport.height - panel.height),
+    left: clampIntoView(vertical ? along : away, viewport.width - panel.width),
+    placement: `${side}-${align}`
+  };
+}
+
+// src/overlay/attachOverlay.ts
+var FOCUSABLE = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]";
+function anchorRect(anchor) {
+  if (anchor instanceof Element) {
+    const { top, left, width, height } = anchor.getBoundingClientRect();
+    return { top, left, width, height };
+  }
+  return { top: anchor.y, left: anchor.x, width: 0, height: 0 };
+}
+function attachOverlay(anchor, panel, options) {
+  const { onDismiss } = options;
+  const returnFocusTo = options.returnFocusTo === void 0 ? document.activeElement instanceof HTMLElement ? document.activeElement : null : options.returnFocusTo;
+  function belongs(target) {
+    return target instanceof Node && (panel.contains(target) || anchor instanceof Element && anchor.contains(target));
+  }
+  function onKeyDown(event) {
+    if (event.key === "Escape") {
+      onDismiss("escape");
+    }
+  }
+  function onPointerDown(event) {
+    if (!belongs(event.target)) {
+      onDismiss("outside");
+    }
+  }
+  function onScroll(event) {
+    if (!(event.target instanceof Node && panel.contains(event.target))) {
+      onDismiss("scroll");
+    }
+  }
+  function onResize() {
+    onDismiss("resize");
+  }
+  function onFocusOut(event) {
+    if (event.relatedTarget !== null && !belongs(event.relatedTarget)) {
+      onDismiss("blur");
+    }
+  }
+  function onWindowBlur() {
+    onDismiss("blur");
+  }
+  panel.style.position = "fixed";
+  panel.style.top = "0px";
+  panel.style.left = "0px";
+  const { width, height } = panel.getBoundingClientRect();
+  const position = placeOverlay(
+    anchorRect(anchor),
+    { width, height },
+    {
+      width: document.documentElement.clientWidth,
+      height: document.documentElement.clientHeight
+    },
+    options
+  );
+  panel.style.top = `${String(position.top)}px`;
+  panel.style.left = `${String(position.left)}px`;
+  panel.setAttribute("data-gridkit-placement", position.placement);
+  const first = panel.querySelector(FOCUSABLE);
+  if (first === null && !panel.hasAttribute("tabindex")) {
+    panel.tabIndex = -1;
+  }
+  (first ?? panel).focus({ preventScroll: true });
+  document.addEventListener("keydown", onKeyDown, true);
+  document.addEventListener("pointerdown", onPointerDown, true);
+  window.addEventListener("scroll", onScroll, { capture: true, passive: true });
+  window.addEventListener("resize", onResize);
+  window.addEventListener("blur", onWindowBlur);
+  panel.addEventListener("focusout", onFocusOut);
+  let attached = true;
+  return () => {
+    if (!attached) {
+      return;
+    }
+    attached = false;
+    document.removeEventListener("keydown", onKeyDown, true);
+    document.removeEventListener("pointerdown", onPointerDown, true);
+    window.removeEventListener("scroll", onScroll, { capture: true });
+    window.removeEventListener("resize", onResize);
+    window.removeEventListener("blur", onWindowBlur);
+    panel.removeEventListener("focusout", onFocusOut);
+    const active = document.activeElement;
+    if (returnFocusTo !== null && (active === null || active === document.body || panel.contains(active))) {
+      returnFocusTo.focus({ preventScroll: true });
+    }
+  };
+}
+
+// src/rowVirtualizer.ts
+import { visibleRange } from "@gridkitjs/core";
+function sameRange(a, b) {
+  return a.startIndex === b.startIndex && a.endIndex === b.endIndex && a.offsetBefore === b.offsetBefore && a.offsetAfter === b.offsetAfter;
+}
+function createRowVirtualizer(scrollElement, options) {
+  const { estimatedRowHeight, overscan, onRange } = options;
+  let heights = [];
+  let scrollTop = scrollElement.scrollTop;
+  let viewportHeight = scrollElement.clientHeight;
+  let range = null;
+  let destroyed = false;
+  let pendingScroll;
+  const elements = /* @__PURE__ */ new Map();
+  const indexByElement = /* @__PURE__ */ new Map();
+  const refCallbacks = /* @__PURE__ */ new Map();
+  function recompute() {
+    if (destroyed) {
+      return;
+    }
+    const next = visibleRange(
+      heights,
+      estimatedRowHeight,
+      scrollTop,
+      viewportHeight,
+      overscan
+    );
+    if (range !== null && sameRange(range, next)) {
+      return;
+    }
+    range = next;
+    onRange(next);
+  }
+  const rowObserver = new ResizeObserver((entries) => {
+    let changed = false;
+    for (const entry of entries) {
+      const index = indexByElement.get(entry.target);
+      if (index === void 0) continue;
+      const height = entry.target.getBoundingClientRect().height;
+      if (heights[index] !== height) {
+        heights[index] = height;
+        changed = true;
+      }
+    }
+    if (changed) {
+      recompute();
+    }
+  });
+  const viewportObserver = new ResizeObserver(() => {
+    viewportHeight = scrollElement.clientHeight;
+    recompute();
+  });
+  viewportObserver.observe(scrollElement);
+  function handleScroll() {
+    scrollTop = scrollElement.scrollTop;
+    recompute();
+  }
+  scrollElement.addEventListener("scroll", handleScroll, { passive: true });
+  function estimateOffsetBefore(index) {
+    let total = 0;
+    for (let current = 0; current < index; current++) {
+      total += heights[current] ?? estimatedRowHeight;
+    }
+    return total;
+  }
+  recompute();
+  return {
+    setRowCount(count) {
+      heights = Array.from({ length: count }, (_, index) => heights[index]);
+      recompute();
+    },
+    resetHeights() {
+      heights = new Array(heights.length).fill(void 0);
+      recompute();
+    },
+    measureRow(index) {
+      let callback = refCallbacks.get(index);
+      if (callback === void 0) {
+        callback = (element) => {
+          const previous = elements.get(index);
+          if (previous !== void 0) {
+            rowObserver.unobserve(previous);
+            indexByElement.delete(previous);
+            elements.delete(index);
+          }
+          if (element === null || destroyed) {
+            return;
+          }
+          elements.set(index, element);
+          indexByElement.set(element, index);
+          rowObserver.observe(element);
+          if (pendingScroll?.index === index) {
+            element.scrollIntoView(pendingScroll.options);
+            pendingScroll = void 0;
+          }
+        };
+        refCallbacks.set(index, callback);
+      }
+      return callback;
+    },
+    scrollToIndex(index, scrollOptions) {
+      if (heights.length === 0) {
+        return;
+      }
+      const clamped = Math.max(0, Math.min(index, heights.length - 1));
+      const mounted = elements.get(clamped);
+      if (mounted !== void 0) {
+        mounted.scrollIntoView(scrollOptions);
+        return;
+      }
+      pendingScroll = { index: clamped, options: scrollOptions };
+      scrollElement.scrollTop = estimateOffsetBefore(clamped);
+    },
+    destroy() {
+      destroyed = true;
+      pendingScroll = void 0;
+      scrollElement.removeEventListener("scroll", handleScroll);
+      viewportObserver.disconnect();
+      rowObserver.disconnect();
+      elements.clear();
+      indexByElement.clear();
+    }
+  };
+}
+export {
+  NO_DRAG,
+  attachInfiniteScroll,
+  attachOverlay,
+  bodyCellFrom,
+  bodyRowFrom,
+  createGridFocus,
+  createLiveAnnouncer,
+  createRowVirtualizer,
+  findBodyRow,
+  groupRowFrom,
+  measureColumnContent,
+  measurePageSize,
+  observeElementWidth,
+  placeOverlay,
+  resolveColumnDropTarget,
+  resolveGroupByDropTarget,
+  startColumnResizeGesture,
+  startDragReorder
+};
+//# sourceMappingURL=index.js.map