@gridkitjs/dom 0.2.0 → 0.3.0

package/dist/index.js

@@ -66,6 +66,153 @@ function bodyRowFrom(target) {
   };
 }
 
+// src/checklist/attachChecklist.ts
+var ITEM = "[data-gridkit-checklist-item]";
+var INDEX = "data-gridkit-checklist-index";
+function indexOf(item) {
+  return Number(item.getAttribute(INDEX));
+}
+function attachChecklist(list, options) {
+  let count = 0;
+  let active = 0;
+  let pending = null;
+  function items() {
+    return Array.from(list.querySelectorAll(ITEM));
+  }
+  function itemAt(index) {
+    return list.querySelector(
+      `${ITEM}[${INDEX}="${String(index)}"]`
+    );
+  }
+  function itemOf(target) {
+    const item = target instanceof Element ? target.closest(ITEM) : null;
+    return item !== null && list.contains(item) ? item : null;
+  }
+  function setTabStop() {
+    const all = items();
+    const stop = all.find((item) => indexOf(item) === active) ?? all[0];
+    for (const item of all) {
+      item.tabIndex = item === stop ? 0 : -1;
+    }
+  }
+  function makeActive(index) {
+    if (index !== active) {
+      active = index;
+      options.onFocusChange?.(index);
+    }
+  }
+  function moveTo(index) {
+    if (count === 0) {
+      return;
+    }
+    const target = Math.max(0, Math.min(index, count - 1));
+    makeActive(target);
+    setTabStop();
+    options.scrollToIndex(target);
+    const item = itemAt(target);
+    if (item === null) {
+      pending = target;
+    } else {
+      pending = null;
+      item.focus({ preventScroll: true });
+    }
+  }
+  function pageSize() {
+    const top = list.getBoundingClientRect().top + list.clientTop;
+    const bottom = top + list.clientHeight;
+    const whole = items().filter((item) => {
+      const box = item.getBoundingClientRect();
+      return box.top >= top && box.bottom <= bottom;
+    }).length;
+    return Math.max(1, whole);
+  }
+  function onKeyDown2(event) {
+    const item = itemOf(event.target);
+    if (item === null || event.isComposing || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+      return;
+    }
+    switch (event.key) {
+      case "ArrowDown":
+        moveTo(active + 1);
+        break;
+      case "ArrowUp":
+        moveTo(active - 1);
+        break;
+      case "Home":
+        moveTo(0);
+        break;
+      case "End":
+        moveTo(count - 1);
+        break;
+      case "PageDown":
+        moveTo(active + pageSize());
+        break;
+      case "PageUp":
+        moveTo(active - pageSize());
+        break;
+      case " ":
+        if (!event.repeat) {
+          options.onToggle(indexOf(item));
+        }
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+  }
+  function onFocusIn(event) {
+    const item = itemOf(event.target);
+    if (item !== null) {
+      pending = null;
+      makeActive(indexOf(item));
+      setTabStop();
+    }
+  }
+  function onClick(event) {
+    const item = itemOf(event.target);
+    if (item !== null) {
+      options.onToggle(indexOf(item));
+      item.focus({ preventScroll: true });
+    }
+  }
+  const observer = new MutationObserver(() => {
+    setTabStop();
+    const item = pending === null ? null : itemAt(pending);
+    if (item === null) {
+      return;
+    }
+    pending = null;
+    const focused = document.activeElement;
+    if (focused === null || focused === document.body || list.contains(focused)) {
+      item.focus({ preventScroll: true });
+    }
+  });
+  observer.observe(list, {
+    childList: true,
+    subtree: true,
+    attributeFilter: [INDEX]
+  });
+  setTabStop();
+  list.addEventListener("keydown", onKeyDown2);
+  list.addEventListener("focusin", onFocusIn);
+  list.addEventListener("click", onClick);
+  return {
+    setCount(next) {
+      count = next;
+      active = Math.max(0, Math.min(active, count - 1));
+      setTabStop();
+    },
+    focusItem: moveTo,
+    detach() {
+      pending = null;
+      observer.disconnect();
+      list.removeEventListener("keydown", onKeyDown2);
+      list.removeEventListener("focusin", onFocusIn);
+      list.removeEventListener("click", onClick);
+    }
+  };
+}
+
 // src/contextMenu/attachContextMenuTrigger.ts
 var LONG_PRESS_DELAY = 500;
 var LONG_PRESS_SLOP = 10;
@@ -249,6 +396,105 @@ function measureColumnContent(table, columnId) {
   return widest;
 }
 
+// src/clipboard.ts
+async function writeItem(clipboard, { text, html }) {
+  await clipboard.write([
+    new ClipboardItem({
+      "text/plain": new Blob([text], { type: "text/plain" }),
+      "text/html": new Blob([html], { type: "text/html" })
+    })
+  ]);
+}
+function copyThroughEvent({ text, html }) {
+  const previous = document.activeElement;
+  const field = document.createElement("textarea");
+  field.value = text;
+  field.readOnly = true;
+  field.setAttribute("aria-hidden", "true");
+  field.style.position = "fixed";
+  field.style.top = "0";
+  field.style.left = "-9999px";
+  document.body.append(field);
+  function onCopy(event) {
+    if (event.clipboardData === null) {
+      return;
+    }
+    event.clipboardData.setData("text/plain", text);
+    event.clipboardData.setData("text/html", html);
+    event.preventDefault();
+  }
+  document.addEventListener("copy", onCopy, { capture: true, once: true });
+  try {
+    field.focus({ preventScroll: true });
+    field.select();
+    const legacy = document;
+    return legacy.execCommand("copy");
+  } finally {
+    document.removeEventListener("copy", onCopy, { capture: true });
+    field.remove();
+    if (previous instanceof HTMLElement) {
+      previous.focus({ preventScroll: true });
+    }
+  }
+}
+var TEXTLESS_INPUTS = /* @__PURE__ */ new Set([
+  "button",
+  "checkbox",
+  "color",
+  "file",
+  "image",
+  "radio",
+  "range",
+  "reset",
+  "submit"
+]);
+function isTextField(target) {
+  return target instanceof HTMLTextAreaElement || target instanceof HTMLInputElement && !TEXTLESS_INPUTS.has(target.type) || target instanceof HTMLElement && target.isContentEditable;
+}
+function isNativeCopy(target) {
+  const selection = document.getSelection();
+  return isTextField(target) || selection !== null && !selection.isCollapsed;
+}
+async function writeClipboard(content) {
+  const attempts = [];
+  const clipboard = navigator.clipboard;
+  if (clipboard !== void 0) {
+    if (typeof ClipboardItem === "function") {
+      attempts.push(() => writeItem(clipboard, content));
+    }
+    attempts.push(() => clipboard.writeText(content.text));
+  }
+  let failure = null;
+  for (const attempt of attempts) {
+    try {
+      await attempt();
+      return;
+    } catch (error) {
+      failure = error;
+    }
+  }
+  if (!copyThroughEvent(content)) {
+    throw new Error("The browser refused to write to the clipboard.", {
+      cause: failure
+    });
+  }
+}
+
+// src/download.ts
+function downloadBlob(blob, fileName) {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = fileName;
+  link.hidden = true;
+  document.body.append(link);
+  link.click();
+  link.remove();
+  setTimeout(() => {
+    URL.revokeObjectURL(url);
+  }, 0);
+}
+
 // src/dragReorder.ts
 var DRAG_THRESHOLD = 4;
 var NO_DRAG = {
@@ -532,7 +778,7 @@ function attachInfiniteScroll(root, options) {
 
 // src/menu/attachMenu.ts
 import { nextMenuIndex, typeaheadIndex } from "@gridkitjs/core";
-var ITEM = [
+var ITEM2 = [
   '[role="menuitem"][data-gridkit-menu-item]',
   '[role="menuitemcheckbox"][data-gridkit-menu-item]',
   '[role="menuitemradio"][data-gridkit-menu-item]'
@@ -568,10 +814,10 @@ function attachMenu(panel, options) {
   let hovered = null;
   let hoverTimer;
   function items() {
-    return Array.from(panel.querySelectorAll(ITEM));
+    return Array.from(panel.querySelectorAll(ITEM2));
   }
   function itemOf(target) {
-    const item = target instanceof Element ? target.closest(ITEM) : null;
+    const item = target instanceof Element ? target.closest(ITEM2) : null;
     return item !== null && panel.contains(item) ? item : null;
   }
   function setTabStop(stop) {
@@ -826,6 +1072,11 @@ function placeOverlay(anchor, panel, viewport, options = {}) {
 
 // src/overlay/attachOverlay.ts
 var FOCUSABLE = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]";
+function tabbables(panel) {
+  return Array.from(panel.querySelectorAll(FOCUSABLE)).filter(
+    (element) => element.tabIndex >= 0 && !element.matches(":disabled") && element.checkVisibility({ visibilityProperty: true })
+  );
+}
 function anchorRect(anchor) {
   if (anchor instanceof Element) {
     const { top, left, width, height } = anchor.getBoundingClientRect();
@@ -897,6 +1148,28 @@ function attachOverlay(anchor, panel, options) {
       onDismiss("blur");
     }
   }
+  function onTrapKeyDown(event) {
+    if (event.key !== "Tab" || event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || !(event.target instanceof Node) || isInsideOverlayAbove(stacked, event.target)) {
+      return;
+    }
+    const stops = tabbables(panel).filter(
+      (element) => !isInsideOverlayAbove(stacked, element)
+    );
+    const first = stops[0];
+    const last = stops.at(-1);
+    if (first === void 0 || last === void 0) {
+      event.preventDefault();
+      return;
+    }
+    const position = event.target.compareDocumentPosition(
+      event.shiftKey ? first : last
+    );
+    const leaving = event.shiftKey ? (position & Node.DOCUMENT_POSITION_PRECEDING) === 0 : (position & Node.DOCUMENT_POSITION_FOLLOWING) === 0;
+    if (leaving) {
+      event.preventDefault();
+      (event.shiftKey ? last : first).focus();
+    }
+  }
   function onWindowBlur() {
     onDismiss("blur");
   }
@@ -937,6 +1210,9 @@ function attachOverlay(anchor, panel, options) {
   window.addEventListener("resize", onResize);
   window.addEventListener("blur", onWindowBlur);
   panel.addEventListener("focusout", onFocusOut);
+  if (options.trapFocus === true) {
+    panel.addEventListener("keydown", onTrapKeyDown);
+  }
   if (options.ignoreScrollAfterInput === true) {
     panel.addEventListener("input", onInput);
     panel.addEventListener("change", onInput);
@@ -956,6 +1232,7 @@ function attachOverlay(anchor, panel, options) {
     window.removeEventListener("resize", onResize);
     window.removeEventListener("blur", onWindowBlur);
     panel.removeEventListener("focusout", onFocusOut);
+    panel.removeEventListener("keydown", onTrapKeyDown);
     panel.removeEventListener("input", onInput);
     panel.removeEventListener("change", onInput);
     if (settlingFrame !== null) {
@@ -1152,7 +1429,7 @@ function attachToolbar(toolbar) {
       }
     );
   }
-  function indexOf(all2, node) {
+  function indexOf2(all2, node) {
     return node instanceof Node ? all2.findIndex((control) => control.entry.contains(node)) : -1;
   }
   function setTabStop(next) {
@@ -1167,7 +1444,7 @@ function attachToolbar(toolbar) {
       return;
     }
     const all2 = controls();
-    const from = indexOf(all2, event.target);
+    const from = indexOf2(all2, event.target);
     if (from === -1) {
       return;
     }
@@ -1184,7 +1461,7 @@ function attachToolbar(toolbar) {
   }
   function onFocusIn(event) {
     const all2 = controls();
-    const control = all2[indexOf(all2, event.target)];
+    const control = all2[indexOf2(all2, event.target)];
     if (control !== void 0) {
       setTabStop(control.target);
     }
@@ -1197,7 +1474,7 @@ function attachToolbar(toolbar) {
   });
   const all = controls();
   setTabStop(
-    all[indexOf(all, document.activeElement)]?.target ?? all[0]?.target
+    all[indexOf2(all, document.activeElement)]?.target ?? all[0]?.target
   );
   toolbar.addEventListener("keydown", onKeyDown2);
   toolbar.addEventListener("focusin", onFocusIn);
@@ -1293,8 +1570,139 @@ function observeToolbarOverflow(toolbar, options) {
     }
   };
 }
+
+// src/print/printDocument.ts
+var RETURN_EVENTS = ["pointerdown", "keydown"];
+var printing = false;
+function createFrame(bodyHtml) {
+  const frame = document.createElement("iframe");
+  frame.setAttribute("aria-hidden", "true");
+  frame.tabIndex = -1;
+  frame.style.position = "fixed";
+  frame.style.right = "0";
+  frame.style.bottom = "0";
+  frame.style.width = "0";
+  frame.style.height = "0";
+  frame.style.border = "0";
+  frame.srcdoc = `<!doctype html><html><head><meta charset="utf-8"></head><body>${bodyHtml}</body></html>`;
+  return frame;
+}
+function load(frame) {
+  return new Promise((resolve, reject) => {
+    frame.addEventListener(
+      "load",
+      () => {
+        if (frame.contentWindow === null) {
+          reject(new Error("The print frame has no window."));
+        } else {
+          resolve(frame.contentWindow);
+        }
+      },
+      { once: true }
+    );
+    document.body.append(frame);
+  });
+}
+function fill(view, { title, styles }) {
+  const { document: frameDocument } = view;
+  frameDocument.title = title;
+  const style = frameDocument.createElement("style");
+  style.textContent = styles;
+  frameDocument.head.append(style);
+}
+function print(view) {
+  const listeners = [
+    [view, "afterprint"],
+    ...RETURN_EVENTS.flatMap((type) => [
+      [view, type],
+      [window, type]
+    ])
+  ];
+  return new Promise((resolve) => {
+    function done() {
+      for (const [target, type] of listeners) {
+        target.removeEventListener(type, done, { capture: true });
+      }
+      resolve();
+    }
+    for (const [target, type] of listeners) {
+      target.addEventListener(type, done, { capture: true });
+    }
+    view.focus();
+    view.print();
+  });
+}
+async function printDocument(options) {
+  if (printing) {
+    return;
+  }
+  printing = true;
+  const previous = document.activeElement;
+  const frame = createFrame(options.bodyHtml);
+  try {
+    const view = await load(frame);
+    fill(view, options);
+    await view.document.fonts.ready;
+    await print(view);
+  } finally {
+    frame.remove();
+    printing = false;
+    if (previous instanceof HTMLElement) {
+      previous.focus({ preventScroll: true });
+    }
+  }
+}
+
+// src/print/styles.ts
+var GROUP_INDENT = "12pt";
+var CELL_PADDING_X = "5pt";
+var DEEPEST_INDENTED_LEVEL = 6;
+function pageRules({ paperSize, orientation, pageNumbers }) {
+  const numbers = pageNumbers ? `@bottom-right { content: counter(page) " / " counter(pages); font: 8pt system-ui, sans-serif; color: #555; }` : "";
+  return `@page { size: ${paperSize} ${orientation}; margin: 12mm; ${numbers} }`;
+}
+function indentRule(selector, level) {
+  return `${selector} > td:first-child { padding-left: calc(${CELL_PADDING_X} + ${String(level)} * ${GROUP_INDENT}); }`;
+}
+function groupIndentRules() {
+  const rules = [
+    indentRule('.export-group:not([data-level="0"])', DEEPEST_INDENTED_LEVEL)
+  ];
+  for (let level = 1; level < DEEPEST_INDENTED_LEVEL; level++) {
+    rules.push(
+      indentRule(`.export-group[data-level="${String(level)}"]`, level)
+    );
+  }
+  return rules.join("\n");
+}
+var BASE_RULES = `html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+body { margin: 0; background: #fff; color: #000; font: 10pt/1.35 system-ui, sans-serif; }
+.gridkit-print-header { margin-bottom: 8pt; }
+.print-title { margin: 0; font-size: 14pt; }
+.print-subtitle, .print-timestamp { margin: 2pt 0 0; color: #444; }
+.gridkit-print-footer { margin-top: 8pt; color: #444; }
+.gridkit-export-table { width: 100%; border-collapse: collapse; }
+.gridkit-export-table thead { display: table-header-group; }
+.gridkit-export-table tfoot { display: table-row-group; }
+.gridkit-export-table tr { break-inside: avoid; }
+.gridkit-export-table th, .gridkit-export-table td { border: 1px solid #bbb; padding: 3pt ${CELL_PADDING_X}; text-align: left; vertical-align: top; }
+.gridkit-export-table th { background: #eee; font-weight: 600; }
+.export-group > td { background: #f5f5f5; font-weight: 600; }
+.export-group-summary > td, .gridkit-export-table tfoot td { font-weight: 600; }
+.gridkit-export-table tfoot td { border-top: 2px solid #888; }`;
+var FIT_TO_WIDTH_RULES = `.gridkit-export-table { table-layout: fixed; font-size: 8pt; }
+.gridkit-export-table th, .gridkit-export-table td { overflow-wrap: anywhere; }`;
+function printStyles(page) {
+  return [
+    pageRules(page),
+    BASE_RULES,
+    groupIndentRules(),
+    page.fitToWidth ? FIT_TO_WIDTH_RULES : ""
+  ].filter((rules) => rules !== "").join("\n");
+}
 export {
   NO_DRAG,
+  attachChecklist,
   attachContextMenuTrigger,
   attachInfiniteScroll,
   attachMenu,
@@ -1305,16 +1713,21 @@ export {
   createGridFocus,
   createLiveAnnouncer,
   createRowVirtualizer,
+  downloadBlob,
   findBodyRow,
   groupRowFrom,
+  isNativeCopy,
   measureColumnContent,
   measurePageSize,
   observeElementWidth,
   observeToolbarOverflow,
   placeOverlay,
+  printDocument,
+  printStyles,
   resolveColumnDropTarget,
   resolveGroupByDropTarget,
   startColumnResizeGesture,
-  startDragReorder
+  startDragReorder,
+  writeClipboard
 };
 //# sourceMappingURL=index.js.map