@gridkitjs/dom 0.0.0-stage → 0.2.0

package/dist/index.js

@@ -0,0 +1,1320 @@
+// 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/contextMenu/attachContextMenuTrigger.ts
+var LONG_PRESS_DELAY = 500;
+var LONG_PRESS_SLOP = 10;
+function isContextMenuKey(event) {
+  if (event.ctrlKey || event.altKey || event.metaKey) {
+    return false;
+  }
+  return event.key === "ContextMenu" || event.key === "F10" && event.shiftKey;
+}
+function attachContextMenuTrigger(root, options) {
+  let swallowContextMenu = false;
+  let swallowClick = false;
+  let press = null;
+  function ask(event, point, source) {
+    const { target } = event;
+    return !event.defaultPrevented && target instanceof Element && root.contains(target) && options.onRequest({ target, point, source });
+  }
+  function request(event, point, source) {
+    if (!ask(event, point, source)) {
+      return false;
+    }
+    event.preventDefault();
+    return true;
+  }
+  function cancelPress() {
+    if (press !== null) {
+      window.clearTimeout(press.timer);
+      press = null;
+    }
+  }
+  function onKeyDown2(event) {
+    swallowContextMenu = false;
+    swallowClick = false;
+    if (isContextMenuKey(event) && request(event, null, "keyboard")) {
+      swallowContextMenu = true;
+    }
+  }
+  function onPointerDown(event) {
+    swallowContextMenu = false;
+    swallowClick = false;
+    cancelPress();
+    if (event.pointerType !== "touch" || !event.isPrimary) {
+      return;
+    }
+    const point = { x: event.clientX, y: event.clientY };
+    press = {
+      pointerId: event.pointerId,
+      ...point,
+      timer: window.setTimeout(() => {
+        press = null;
+        if (ask(event, point, "pointer")) {
+          swallowContextMenu = true;
+          swallowClick = true;
+        }
+      }, LONG_PRESS_DELAY)
+    };
+  }
+  function onPointerMove(event) {
+    if (press?.pointerId === event.pointerId && Math.hypot(event.clientX - press.x, event.clientY - press.y) > LONG_PRESS_SLOP) {
+      cancelPress();
+    }
+  }
+  function onPointerEnd(event) {
+    if (press?.pointerId === event.pointerId) {
+      cancelPress();
+    }
+  }
+  function onClick(event) {
+    if (swallowClick) {
+      swallowClick = false;
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+  function onContextMenu(event) {
+    if (swallowContextMenu) {
+      swallowContextMenu = false;
+      event.preventDefault();
+      return;
+    }
+    const touching = press !== null;
+    cancelPress();
+    if (request(event, { x: event.clientX, y: event.clientY }, "pointer") && touching) {
+      swallowClick = true;
+    }
+  }
+  document.addEventListener("keydown", onKeyDown2);
+  document.addEventListener("pointerdown", onPointerDown, true);
+  document.addEventListener("pointermove", onPointerMove, true);
+  document.addEventListener("pointerup", onPointerEnd, true);
+  document.addEventListener("pointercancel", onPointerEnd, true);
+  document.addEventListener("click", onClick, true);
+  document.addEventListener("contextmenu", onContextMenu);
+  return () => {
+    cancelPress();
+    document.removeEventListener("keydown", onKeyDown2);
+    document.removeEventListener("pointerdown", onPointerDown, true);
+    document.removeEventListener("pointermove", onPointerMove, true);
+    document.removeEventListener("pointerup", onPointerEnd, true);
+    document.removeEventListener("pointercancel", onPointerEnd, true);
+    document.removeEventListener("click", onClick, true);
+    document.removeEventListener("contextmenu", onContextMenu);
+  };
+}
+
+// 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", onKeyDown2);
+    if (element.hasPointerCapture(pointerId)) {
+      element.releasePointerCapture(pointerId);
+    }
+  }
+  function move(event) {
+    handlers.onMove(event);
+  }
+  function end() {
+    stop();
+    handlers.onEnd();
+  }
+  function cancel() {
+    stop();
+    handlers.onCancel();
+  }
+  function onKeyDown2(event) {
+    if (event.key === "Escape") {
+      cancel();
+    }
+  }
+  element.addEventListener("pointermove", move);
+  element.addEventListener("pointerup", end);
+  element.addEventListener("pointercancel", cancel);
+  window.addEventListener("keydown", onKeyDown2);
+}
+
+// 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/menu/attachMenu.ts
+import { nextMenuIndex, typeaheadIndex } from "@gridkitjs/core";
+var ITEM = [
+  '[role="menuitem"][data-gridkit-menu-item]',
+  '[role="menuitemcheckbox"][data-gridkit-menu-item]',
+  '[role="menuitemradio"][data-gridkit-menu-item]'
+].join(", ");
+var HOVER_DELAY = 150;
+var TYPEAHEAD_TIMEOUT = 500;
+var AS_ENTRY = { type: "item" };
+var MOVES = {
+  ArrowDown: "next",
+  ArrowUp: "previous",
+  Home: "first",
+  End: "last"
+};
+function idOf(item) {
+  return item.getAttribute("data-gridkit-menu-item") ?? "";
+}
+function isDisabled(item) {
+  return item.getAttribute("aria-disabled") === "true";
+}
+function opensSubmenu(item) {
+  const popup = item.getAttribute("aria-haspopup");
+  return popup === "menu" || popup === "true";
+}
+function labelOf(item) {
+  return (item.getAttribute("aria-label") ?? item.textContent).trim();
+}
+function isTypeahead(event) {
+  return /^\S$/u.test(event.key) && !event.ctrlKey && !event.metaKey && !event.altKey;
+}
+function attachMenu(panel, options) {
+  let typed = "";
+  let typeaheadTimer;
+  let hovered = null;
+  let hoverTimer;
+  function items() {
+    return Array.from(panel.querySelectorAll(ITEM));
+  }
+  function itemOf(target) {
+    const item = target instanceof Element ? target.closest(ITEM) : null;
+    return item !== null && panel.contains(item) ? item : null;
+  }
+  function setTabStop(stop) {
+    for (const item of items()) {
+      item.tabIndex = item === stop ? 0 : -1;
+    }
+  }
+  function focus(item) {
+    setTabStop(item);
+    item.focus();
+  }
+  function openSubmenu(item, focusTo) {
+    if (!isDisabled(item)) {
+      options.onOpenSubmenu?.(idOf(item), { focus: focusTo });
+    }
+  }
+  function choose(item, focusTo) {
+    if (opensSubmenu(item)) {
+      openSubmenu(item, focusTo);
+    } else if (!isDisabled(item)) {
+      options.onActivate(idOf(item));
+    }
+  }
+  function typeahead(key, all, from) {
+    typed += key;
+    window.clearTimeout(typeaheadTimer);
+    typeaheadTimer = window.setTimeout(() => {
+      typed = "";
+    }, TYPEAHEAD_TIMEOUT);
+    const match = all[typeaheadIndex(all.map(labelOf), from, typed)];
+    if (match !== void 0) {
+      focus(match);
+    }
+  }
+  function onKeyDown2(event) {
+    if (event.isComposing) {
+      return;
+    }
+    const all = items();
+    const item = itemOf(event.target);
+    const from = item === null ? -1 : all.indexOf(item);
+    const move = MOVES[event.key];
+    if (move !== void 0) {
+      const next = all[nextMenuIndex(
+        all.map(() => AS_ENTRY),
+        from,
+        move
+      )];
+      if (next !== void 0) {
+        focus(next);
+      }
+    } else if (event.key === "Enter" || event.key === " ") {
+      if (item !== null) {
+        choose(item, "first");
+      }
+    } else if (event.key === "ArrowRight") {
+      if (item !== null && opensSubmenu(item)) {
+        openSubmenu(item, "first");
+      }
+    } else if (event.key === "ArrowLeft") {
+      options.onCloseSubmenu?.();
+    } else if (event.key === "Tab") {
+      options.onClose("tab");
+    } else if (isTypeahead(event)) {
+      typeahead(event.key, all, from);
+    } else {
+      return;
+    }
+    event.preventDefault();
+  }
+  function onFocusIn(event) {
+    const item = itemOf(event.target);
+    if (item !== null) {
+      setTabStop(item);
+    }
+  }
+  function onClick(event) {
+    const item = itemOf(event.target);
+    if (item !== null) {
+      choose(item, "none");
+    }
+  }
+  function onPointerMove(event) {
+    if (event.pointerType === "touch") {
+      return;
+    }
+    const item = itemOf(event.target);
+    if (item !== null && document.activeElement !== item) {
+      focus(item);
+    }
+    if (item === hovered) {
+      return;
+    }
+    hovered = item;
+    window.clearTimeout(hoverTimer);
+    if (item !== null) {
+      hoverTimer = window.setTimeout(() => {
+        if (opensSubmenu(item) && !isDisabled(item)) {
+          openSubmenu(item, "none");
+        } else {
+          options.onCollapseSubmenu?.();
+        }
+      }, HOVER_DELAY);
+    }
+  }
+  function onPointerLeave() {
+    hovered = null;
+    window.clearTimeout(hoverTimer);
+  }
+  const focused = itemOf(document.activeElement);
+  setTabStop(focused ?? items()[0]);
+  panel.addEventListener("keydown", onKeyDown2);
+  panel.addEventListener("focusin", onFocusIn);
+  panel.addEventListener("click", onClick);
+  panel.addEventListener("pointermove", onPointerMove);
+  panel.addEventListener("pointerleave", onPointerLeave);
+  return {
+    focusItem(which) {
+      const all = items();
+      const item = typeof which === "number" ? all[which] : all.find((candidate) => idOf(candidate) === which);
+      if (item !== void 0) {
+        focus(item);
+      }
+    },
+    detach() {
+      window.clearTimeout(typeaheadTimer);
+      window.clearTimeout(hoverTimer);
+      panel.removeEventListener("keydown", onKeyDown2);
+      panel.removeEventListener("focusin", onFocusIn);
+      panel.removeEventListener("click", onClick);
+      panel.removeEventListener("pointermove", onPointerMove);
+      panel.removeEventListener("pointerleave", onPointerLeave);
+    }
+  };
+}
+
+// src/overlay/overlayStack.ts
+var stack = [];
+function onKeyDown(event) {
+  const topmost = stack.at(-1);
+  if (event.key !== "Escape" || event.isComposing || topmost === void 0) {
+    return;
+  }
+  event.preventDefault();
+  event.stopPropagation();
+  topmost.onEscape();
+}
+function pushOverlay(overlay) {
+  if (stack.length === 0) {
+    window.addEventListener("keydown", onKeyDown, true);
+  }
+  stack.push(overlay);
+}
+function removeOverlay(overlay) {
+  const index = stack.indexOf(overlay);
+  if (index === -1) {
+    return;
+  }
+  const above = stack.splice(index).slice(1).reverse();
+  for (const child of above) {
+    child.onParentDetached();
+  }
+  if (stack.length === 0) {
+    window.removeEventListener("keydown", onKeyDown, true);
+  }
+}
+function isInsideOverlayAbove(overlay, target) {
+  const index = stack.indexOf(overlay);
+  return index !== -1 && stack.slice(index + 1).some((above) => above.panel.contains(target));
+}
+
+// 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 offset = options.offset ?? 0;
+  const vertical = isVertical(preferredSide);
+  const side = chooseSide(
+    preferredSide,
+    (vertical ? panel.height : panel.width) + gap,
+    anchor,
+    viewport
+  );
+  const anchorStart = (vertical ? anchor.left : anchor.top) + offset;
+  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 initialFocusTarget(panel, initialFocus) {
+  if (initialFocus === "none") {
+    return null;
+  }
+  if (initialFocus instanceof HTMLElement) {
+    return initialFocus;
+  }
+  const first = initialFocus === "first" ? panel.querySelector(FOCUSABLE) : null;
+  if (first !== null) {
+    return first;
+  }
+  if (!panel.hasAttribute("tabindex")) {
+    panel.tabIndex = -1;
+  }
+  return panel;
+}
+function attachOverlay(anchor, panel, options) {
+  const { onDismiss } = options;
+  const returnFocusTo = options.returnFocusTo === void 0 ? document.activeElement instanceof HTMLElement ? document.activeElement : null : options.returnFocusTo;
+  const stacked = {
+    panel,
+    onEscape: () => {
+      onDismiss("escape");
+    },
+    onParentDetached: () => {
+      onDismiss("parent");
+      detach();
+    }
+  };
+  function inside(target) {
+    return target instanceof Node && (panel.contains(target) || isInsideOverlayAbove(stacked, target));
+  }
+  function belongs(target) {
+    return inside(target) || anchor instanceof Element && target instanceof Node && anchor.contains(target);
+  }
+  function onPointerDown(event) {
+    if (!belongs(event.target)) {
+      onDismiss("outside");
+    }
+  }
+  let settlingFrame = null;
+  function onInput() {
+    if (settlingFrame !== null) {
+      cancelAnimationFrame(settlingFrame);
+    }
+    settlingFrame = requestAnimationFrame(() => {
+      settlingFrame = requestAnimationFrame(() => {
+        settlingFrame = null;
+      });
+    });
+  }
+  function onScroll(event) {
+    if (!inside(event.target) && settlingFrame === null) {
+      onDismiss("scroll");
+    }
+  }
+  function onResize() {
+    onDismiss("resize");
+  }
+  function onFocusOut(event) {
+    if (event.relatedTarget !== null && !belongs(event.relatedTarget)) {
+      onDismiss("blur");
+    }
+  }
+  function onWindowBlur() {
+    onDismiss("blur");
+  }
+  let lastAnchorBox = null;
+  function anchorBox() {
+    if (lastAnchorBox === null || !(anchor instanceof Element) || anchor.isConnected) {
+      lastAnchorBox = anchorRect(anchor);
+    }
+    return lastAnchorBox;
+  }
+  function place() {
+    panel.style.top = "0px";
+    panel.style.left = "0px";
+    const { width, height } = panel.getBoundingClientRect();
+    const position = placeOverlay(
+      anchorBox(),
+      { 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);
+  }
+  panel.style.position = "fixed";
+  place();
+  const resizeObserver = new ResizeObserver(place);
+  resizeObserver.observe(panel);
+  pushOverlay(stacked);
+  initialFocusTarget(panel, options.initialFocus ?? "first")?.focus({
+    preventScroll: 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);
+  if (options.ignoreScrollAfterInput === true) {
+    panel.addEventListener("input", onInput);
+    panel.addEventListener("change", onInput);
+  }
+  let attached = true;
+  function detach() {
+    if (!attached) {
+      return;
+    }
+    attached = false;
+    const active = document.activeElement;
+    const focusInside = active === null || active === document.body || inside(active);
+    removeOverlay(stacked);
+    resizeObserver.disconnect();
+    document.removeEventListener("pointerdown", onPointerDown, true);
+    window.removeEventListener("scroll", onScroll, { capture: true });
+    window.removeEventListener("resize", onResize);
+    window.removeEventListener("blur", onWindowBlur);
+    panel.removeEventListener("focusout", onFocusOut);
+    panel.removeEventListener("input", onInput);
+    panel.removeEventListener("change", onInput);
+    if (settlingFrame !== null) {
+      cancelAnimationFrame(settlingFrame);
+    }
+    if (returnFocusTo !== null && focusInside) {
+      returnFocusTo.focus({ preventScroll: true });
+    }
+  }
+  return detach;
+}
+
+// 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();
+    }
+  };
+}
+
+// src/toolbar/attachToolbar.ts
+import { nextMenuIndex as nextMenuIndex2 } from "@gridkitjs/core";
+var ENTRY = "[data-gridkit-toolbar-item]";
+var FOCUSABLE2 = [
+  "button:not(:disabled)",
+  "input:not(:disabled)",
+  "select:not(:disabled)",
+  "textarea:not(:disabled)",
+  "a[href]",
+  "[tabindex]"
+].join(", ");
+var MOVES2 = {
+  ArrowRight: "next",
+  ArrowLeft: "previous",
+  Home: "first",
+  End: "last"
+};
+var AS_ENTRY2 = { type: "item" };
+var CARETLESS_INPUTS = /* @__PURE__ */ new Set([
+  "button",
+  "checkbox",
+  "color",
+  "file",
+  "image",
+  "radio",
+  "range",
+  "reset",
+  "submit"
+]);
+function targetOf(entry) {
+  return entry.matches(FOCUSABLE2) ? entry : entry.querySelector(FOCUSABLE2);
+}
+function textFieldOf(target) {
+  return target instanceof HTMLTextAreaElement || target instanceof HTMLInputElement && !CARETLESS_INPUTS.has(target.type) ? target : null;
+}
+function belongsToField(target, move) {
+  if (target instanceof HTMLElement && target.isContentEditable) {
+    return true;
+  }
+  const field = textFieldOf(target);
+  if (field === null) {
+    return false;
+  }
+  const { selectionStart, selectionEnd, value } = field;
+  if (move === "first" || move === "last" || selectionStart === null || selectionStart !== selectionEnd) {
+    return true;
+  }
+  return move === "previous" ? selectionStart > 0 : selectionStart < value.length;
+}
+function attachToolbar(toolbar) {
+  let stop;
+  function controls() {
+    return Array.from(toolbar.querySelectorAll(ENTRY)).flatMap(
+      (entry) => {
+        const target = targetOf(entry);
+        return target === null ? [] : [{ entry, target }];
+      }
+    );
+  }
+  function indexOf(all2, node) {
+    return node instanceof Node ? all2.findIndex((control) => control.entry.contains(node)) : -1;
+  }
+  function setTabStop(next) {
+    stop = next;
+    for (const { target } of controls()) {
+      target.tabIndex = target === next ? 0 : -1;
+    }
+  }
+  function onKeyDown2(event) {
+    const move = MOVES2[event.key];
+    if (move === void 0 || event.isComposing || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || belongsToField(event.target, move)) {
+      return;
+    }
+    const all2 = controls();
+    const from = indexOf(all2, event.target);
+    if (from === -1) {
+      return;
+    }
+    const next = all2[nextMenuIndex2(
+      all2.map(() => AS_ENTRY2),
+      from,
+      move
+    )];
+    if (next !== void 0) {
+      event.preventDefault();
+      setTabStop(next.target);
+      next.target.focus();
+    }
+  }
+  function onFocusIn(event) {
+    const all2 = controls();
+    const control = all2[indexOf(all2, event.target)];
+    if (control !== void 0) {
+      setTabStop(control.target);
+    }
+  }
+  const observer = new MutationObserver(() => {
+    const all2 = controls();
+    setTabStop(
+      all2.find(({ target }) => target === stop)?.target ?? all2[0]?.target
+    );
+  });
+  const all = controls();
+  setTabStop(
+    all[indexOf(all, document.activeElement)]?.target ?? all[0]?.target
+  );
+  toolbar.addEventListener("keydown", onKeyDown2);
+  toolbar.addEventListener("focusin", onFocusIn);
+  observer.observe(toolbar, { childList: true, subtree: true });
+  return () => {
+    observer.disconnect();
+    toolbar.removeEventListener("keydown", onKeyDown2);
+    toolbar.removeEventListener("focusin", onFocusIn);
+  };
+}
+
+// src/toolbar/observeToolbarOverflow.ts
+import {
+  fitToolbarItems,
+  isPinnedToolbarItem
+} from "@gridkitjs/core";
+var ENTRY_ATTRIBUTE = "data-gridkit-toolbar-item";
+var MORE_ATTRIBUTE = "data-gridkit-toolbar-more";
+function pixels(value) {
+  return Number.parseFloat(value) || 0;
+}
+function outerWidth(element) {
+  const style = getComputedStyle(element);
+  return element.getBoundingClientRect().width + pixels(style.marginLeft) + pixels(style.marginRight);
+}
+function observeToolbarOverflow(toolbar, options) {
+  let current = options;
+  const widths = /* @__PURE__ */ new Map();
+  let moreWidth = 0;
+  let reported;
+  function drawnEntries() {
+    return Array.from(
+      toolbar.querySelectorAll(`[${ENTRY_ATTRIBUTE}]`)
+    );
+  }
+  function measure() {
+    for (const element of drawnEntries()) {
+      if (element.hasAttribute(MORE_ATTRIBUTE)) {
+        moreWidth = outerWidth(element);
+      } else {
+        widths.set(
+          element.getAttribute(ENTRY_ATTRIBUTE) ?? "",
+          outerWidth(element)
+        );
+      }
+    }
+    const style = getComputedStyle(toolbar);
+    const gap = pixels(style.columnGap);
+    const fit = fitToolbarItems({
+      widths: current.items.map(
+        (item) => (item.type === "spacer" ? 0 : widths.get(item.key) ?? 0) + gap
+      ),
+      available: toolbar.clientWidth - pixels(style.paddingLeft) - pixels(style.paddingRight) + gap,
+      moreWidth: moreWidth + gap,
+      pinned: current.items.map(isPinnedToolbarItem)
+    });
+    if (fit !== reported) {
+      reported = fit;
+      current.onChange(fit);
+    }
+  }
+  const resizes = new ResizeObserver(measure);
+  function observeSizes() {
+    resizes.disconnect();
+    resizes.observe(toolbar);
+    for (const element of drawnEntries()) {
+      resizes.observe(element);
+    }
+  }
+  const draws = new MutationObserver(() => {
+    observeSizes();
+    measure();
+  });
+  observeSizes();
+  draws.observe(toolbar, { childList: true, subtree: true });
+  measure();
+  return {
+    update(next) {
+      const labels = new Map(
+        current.items.map((item) => [item.key, item.label])
+      );
+      for (const item of next.items) {
+        if (labels.has(item.key) && labels.get(item.key) !== item.label) {
+          widths.delete(item.key);
+        }
+      }
+      current = next;
+      measure();
+    },
+    detach() {
+      resizes.disconnect();
+      draws.disconnect();
+    }
+  };
+}
+export {
+  NO_DRAG,
+  attachContextMenuTrigger,
+  attachInfiniteScroll,
+  attachMenu,
+  attachOverlay,
+  attachToolbar,
+  bodyCellFrom,
+  bodyRowFrom,
+  createGridFocus,
+  createLiveAnnouncer,
+  createRowVirtualizer,
+  findBodyRow,
+  groupRowFrom,
+  measureColumnContent,
+  measurePageSize,
+  observeElementWidth,
+  observeToolbarOverflow,
+  placeOverlay,
+  resolveColumnDropTarget,
+  resolveGroupByDropTarget,
+  startColumnResizeGesture,
+  startDragReorder
+};
+//# sourceMappingURL=index.js.map