vastgrid 0.1.0 → 0.2.0

package/dist/react/grid-body.js

@@ -0,0 +1,1389 @@
+import { c as _c } from "react/compiler-runtime";
+import { lazy, Suspense, use, useEffect, useEffectEvent, useId, useLayoutEffect, useRef, useState } from "react";
+import { browser } from "react-dom";
+import { CommandError } from "vastgrid-spec";
+import { GridCanvas } from "../canvas/grid-canvas.js";
+import { isApple, keyCommand, typesText } from "../canvas/keys.js";
+import { allState, checkedCount, checkState } from "../core/checked.js";
+import { AccessibleRows, cellId } from "./accessible-rows.js";
+import { CellEditor } from "./cell-editor.js";
+import { LocaleContext, SaveContext } from "./context.js";
+import { useGridSelector, useGridStore } from "./hooks.js";
+
+// The menus load when they first open (§10 of react.md).
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ColumnMenu = /*#__PURE__*/lazy(() => import("./column-menu.js").then(module => ({
+  default: module.ColumnMenu
+})));
+const CellMenu = /*#__PURE__*/lazy(() => import("./cell-menu.js").then(module => ({
+  default: module.CellMenu
+})));
+/** The members of a keyboard event that the grid's keys read. */
+function pick(event) {
+  return {
+    key: event.key,
+    shiftKey: event.shiftKey,
+    altKey: event.altKey,
+    ctrlKey: event.ctrlKey,
+    metaKey: event.metaKey
+  };
+}
+
+/** Writes the output of `copy` (§6.6) into a clipboard. */
+function writeClipboard(data, output) {
+  const {
+    tsv,
+    html
+  } = output;
+  data.setData("text/plain", tsv);
+  data.setData("text/html", html);
+}
+async function writeClipboardLater(output) {
+  const {
+    tsv,
+    html
+  } = output;
+  const clipboard = typeof navigator === "undefined" ? undefined : navigator.clipboard;
+  if (!clipboard) return;
+  if (typeof ClipboardItem === "function" && clipboard.write) {
+    await clipboard.write([new ClipboardItem({
+      "text/plain": new Blob([tsv], {
+        type: "text/plain"
+      }),
+      "text/html": new Blob([html], {
+        type: "text/html"
+      })
+    })]);
+  } else {
+    await clipboard.writeText(tsv);
+  }
+}
+
+/** Copies the selection: at once when its rows are read, after reading them otherwise. */
+function useClipboard(store, scroller, announce) {
+  const $ = _c(11);
+  const {
+    messages,
+    number
+  } = use(LocaleContext);
+  let t0;
+  if ($[0] !== announce || $[1] !== messages || $[2] !== number) {
+    t0 = (output, failure) => {
+      announce(failure === null ? messages.copied(number.format(countCells(output))) : messages.failed(failure));
+    };
+    $[0] = announce;
+    $[1] = messages;
+    $[2] = number;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  const report = useEffectEvent(t0);
+  let t1;
+  if ($[4] !== report || $[5] !== scroller.current || $[6] !== store) {
+    t1 = () => {
+      const element = scroller.current;
+      if (!element) {
+        return;
+      }
+      const onBeforeCopy = event => {
+        if (document.activeElement === element) {
+          event.preventDefault();
+        }
+      };
+      const onCopy = event_0 => {
+        if (document.activeElement !== element || !event_0.clipboardData) {
+          return;
+        }
+        event_0.preventDefault();
+        const outcome = store.dispatchSync({
+          command: "copy"
+        });
+        if (outcome.ok) {
+          writeClipboard(event_0.clipboardData, outcome.output);
+          report(outcome.output, null);
+          return;
+        }
+        if (!(outcome.error instanceof CommandError) || outcome.error.reason !== "not_loaded") {
+          report(null, outcome.error.message);
+          return;
+        }
+        store.dispatch({
+          command: "copy"
+        }).then(async later => {
+          if (!later.ok) {
+            report(null, later.error.message);
+            return;
+          }
+          await writeClipboardLater(later.output);
+          report(later.output, null);
+        });
+      };
+      document.addEventListener("beforecopy", onBeforeCopy);
+      const onPaste = event_1 => {
+        if (document.activeElement !== element || !event_1.clipboardData) {
+          return;
+        }
+        event_1.preventDefault();
+        const text = event_1.clipboardData.getData("text/plain");
+        const html = event_1.clipboardData.getData("text/html");
+        const clipboard = text ? {
+          text
+        } : html ? {
+          html
+        } : {};
+        store.dispatch({
+          command: "edit.paste"
+        }, {
+          clipboard
+        }).then(outcome_0 => {
+          if (!outcome_0.ok) {
+            report(null, outcome_0.error.message);
+          }
+        });
+      };
+      document.addEventListener("copy", onCopy);
+      document.addEventListener("paste", onPaste);
+      return () => {
+        document.removeEventListener("beforecopy", onBeforeCopy);
+        document.removeEventListener("copy", onCopy);
+        document.removeEventListener("paste", onPaste);
+      };
+    };
+    $[4] = report;
+    $[5] = scroller.current;
+    $[6] = store;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  let t2;
+  if ($[8] !== scroller || $[9] !== store) {
+    t2 = [store, scroller];
+    $[8] = scroller;
+    $[9] = store;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  useEffect(t1, t2);
+}
+
+/** The cells of a copy: its TSV's fields. */
+function countCells(output) {
+  const {
+    tsv
+  } = output;
+  if (tsv === "") return 0;
+  return tsv.split("\n").reduce((count, line) => count + line.split("\t").length, 0);
+}
+
+/** A click or Space on a cell that is a link or a button (`cellAction`). */
+
+/**
+ * The canvas and the scroller over it (§6 of react.md): keys and pointers become commands, the canvas draws
+ * the store without rendering React, and the accessibility rows follow when scrolling pauses. Rendered only in
+ * the browser: on the server, the nearest Suspense boundary sends its fallback, the first rows as HTML.
+ */
+export function GridBody(t0) {
+  const $ = _c(176);
+  const {
+    rowHeight,
+    headerHeight,
+    checkboxes: t1,
+    columnGroups,
+    groupHeaderHeight,
+    wrapLines,
+    hooks,
+    onCellAction,
+    onFind,
+    label,
+    scrollerRef,
+    announce
+  } = t0;
+  const checkboxes = t1 === undefined ? false : t1;
+  use(browser("The grid draws on a canvas, which only the browser has."));
+  const store = useGridStore();
+  let t2;
+  if ($[0] !== headerHeight || $[1] !== rowHeight) {
+    t2 = () => new GridCanvas({
+      rowHeight,
+      headerHeight
+    });
+    $[0] = headerHeight;
+    $[1] = rowHeight;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const [canvas] = useState(t2);
+  const {
+    geometry
+  } = canvas;
+  const rootRef = useRef(null);
+  const canvasRef = useRef(null);
+  const sizerRef = useRef(null);
+  const drag = useRef(null);
+  const editor = useRef(null);
+  const {
+    messages,
+    locale,
+    number
+  } = use(LocaleContext);
+  const saving = use(SaveContext);
+  const follow = useRef(null);
+  const id = useId();
+  const rowCount = useGridSelector(_temp);
+  const columns = useGridSelector(_temp2);
+  const busy = useGridSelector(_temp3);
+  const active = useGridSelector(_temp4);
+  const [menu, setMenu] = useState(null);
+  const totalsRow = useGridSelector(_temp6);
+  const pressed = useRef(false);
+  const later = useRef(null);
+  const [cellMenu, setCellMenu] = useState(null);
+  let t3;
+  let t4;
+  if ($[3] !== canvas || $[4] !== headerHeight || $[5] !== rowHeight) {
+    t3 = () => {
+      canvas.setSizes(rowHeight, headerHeight);
+    };
+    t4 = [canvas, rowHeight, headerHeight];
+    $[3] = canvas;
+    $[4] = headerHeight;
+    $[5] = rowHeight;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t3 = $[6];
+    t4 = $[7];
+  }
+  useLayoutEffect(t3, t4);
+  let t5;
+  let t6;
+  if ($[8] !== canvas || $[9] !== locale) {
+    t5 = () => {
+      canvas.setLocale(locale);
+    };
+    t6 = [canvas, locale];
+    $[8] = canvas;
+    $[9] = locale;
+    $[10] = t5;
+    $[11] = t6;
+  } else {
+    t5 = $[10];
+    t6 = $[11];
+  }
+  useLayoutEffect(t5, t6);
+  let t7;
+  let t8;
+  if ($[12] !== canvas || $[13] !== checkboxes) {
+    t7 = () => {
+      canvas.setCheckboxes(checkboxes);
+    };
+    t8 = [canvas, checkboxes];
+    $[12] = canvas;
+    $[13] = checkboxes;
+    $[14] = t7;
+    $[15] = t8;
+  } else {
+    t7 = $[14];
+    t8 = $[15];
+  }
+  useLayoutEffect(t7, t8);
+  let t10;
+  let t9;
+  if ($[16] !== canvas || $[17] !== wrapLines) {
+    t9 = () => {
+      canvas.setWrapLines(wrapLines);
+    };
+    t10 = [canvas, wrapLines];
+    $[16] = canvas;
+    $[17] = wrapLines;
+    $[18] = t10;
+    $[19] = t9;
+  } else {
+    t10 = $[18];
+    t9 = $[19];
+  }
+  useLayoutEffect(t9, t10);
+  let t11;
+  let t12;
+  if ($[20] !== canvas || $[21] !== columnGroups || $[22] !== groupHeaderHeight) {
+    t11 = () => {
+      canvas.setColumnGroups(columnGroups, groupHeaderHeight);
+    };
+    t12 = [canvas, columnGroups, groupHeaderHeight];
+    $[20] = canvas;
+    $[21] = columnGroups;
+    $[22] = groupHeaderHeight;
+    $[23] = t11;
+    $[24] = t12;
+  } else {
+    t11 = $[23];
+    t12 = $[24];
+  }
+  useLayoutEffect(t11, t12);
+  const {
+    cellText,
+    cellStyle,
+    drawCell,
+    cellAction
+  } = hooks;
+  let t13;
+  let t14;
+  if ($[25] !== canvas || $[26] !== cellAction || $[27] !== cellStyle || $[28] !== cellText || $[29] !== drawCell) {
+    t13 = () => {
+      canvas.setHooks({
+        cellText,
+        cellStyle,
+        drawCell,
+        cellAction
+      });
+    };
+    t14 = [canvas, cellText, cellStyle, drawCell, cellAction];
+    $[25] = canvas;
+    $[26] = cellAction;
+    $[27] = cellStyle;
+    $[28] = cellText;
+    $[29] = drawCell;
+    $[30] = t13;
+    $[31] = t14;
+  } else {
+    t13 = $[30];
+    t14 = $[31];
+  }
+  useLayoutEffect(t13, t14);
+  let t15;
+  let t16;
+  if ($[32] !== canvas || $[33] !== scrollerRef || $[34] !== store) {
+    t15 = () => {
+      const root = rootRef.current;
+      const element = canvasRef.current;
+      const scroller = scrollerRef.current;
+      const sizer = sizerRef.current;
+      if (!root || !element || !scroller || !sizer) {
+        return;
+      }
+      const detach = canvas.attach({
+        root,
+        canvas: element,
+        scroller,
+        sizer
+      }, store);
+      canvas.draw();
+      return () => {
+        if (follow.current) {
+          cancelAnimationFrame(follow.current.frame);
+        }
+        follow.current = null;
+        detach();
+      };
+    };
+    t16 = [canvas, store, scrollerRef];
+    $[32] = canvas;
+    $[33] = scrollerRef;
+    $[34] = store;
+    $[35] = t15;
+    $[36] = t16;
+  } else {
+    t15 = $[35];
+    t16 = $[36];
+  }
+  useLayoutEffect(t15, t16);
+  useClipboard(store, scrollerRef, announce);
+  const point = _temp7;
+  let t17;
+  if ($[37] !== store) {
+    t17 = column => store.getSnapshot().displayed[column]?.column.name;
+    $[37] = store;
+    $[38] = t17;
+  } else {
+    t17 = $[38];
+  }
+  const nameOf = t17;
+  let onPointerDown;
+  let onPointerMove;
+  let onPointerUp;
+  let toggleCheck;
+  if ($[39] !== announce || $[40] !== canvas || $[41] !== columns || $[42] !== geometry || $[43] !== messages || $[44] !== nameOf || $[45] !== number || $[46] !== store) {
+    onPointerDown = event_0 => {
+      pressed.current = event_0.buttons !== 0;
+      if (event_0.button !== 0) {
+        return;
+      }
+      const scroller_0 = event_0.currentTarget;
+      const {
+        x,
+        y
+      } = point(event_0);
+      if (x > scroller_0.clientWidth || y > scroller_0.clientHeight) {
+        return;
+      }
+      scroller_0.focus({
+        preventScroll: true
+      });
+      event_0.preventDefault();
+      const hit = geometry.hit(x, y);
+      const primary = isApple() ? event_0.metaKey : event_0.ctrlKey;
+      const mode = event_0.shiftKey ? "extend" : primary ? "add" : "replace";
+      const start = (kind, last, t18) => {
+        const extra = t18 === undefined ? {} : t18;
+        drag.current = {
+          kind,
+          pointer: event_0.pointerId,
+          last,
+          column: 0,
+          width: 0,
+          x: event_0.clientX,
+          ...extra
+        };
+        scroller_0.setPointerCapture(event_0.pointerId);
+      };
+      if (hit.area === "cell") {
+        const column_0 = nameOf(hit.column);
+        if (column_0 === undefined) {
+          return;
+        }
+        store.dispatch({
+          command: "select",
+          row: hit.row,
+          column: column_0,
+          mode
+        });
+        start("cells", `${hit.row}:${hit.column}`);
+      } else {
+        if (hit.area === "gutter" && hit.check) {
+          toggleCheck(hit.row);
+        } else {
+          if (hit.area === "corner" && hit.check) {
+            const {
+              session,
+              document,
+              view
+            } = store.getSnapshot();
+            const all = allState(session.checked, document.plan, view?.rowCount ?? 0);
+            dispatchCheck(all === "all" ? {
+              command: "check.clear"
+            } : {
+              command: "check.all"
+            });
+          } else {
+            if (hit.area === "group" && hit.level !== undefined) {
+              const span = canvas.groupSpan(hit.column, hit.level);
+              const from = span && nameOf(span[0]);
+              const to = span && nameOf(span[1]);
+              if (from && to && span) {
+                store.dispatch({
+                  command: "select.columns",
+                  from,
+                  to,
+                  mode
+                });
+                const names = columns.slice(span[0], span[1] + 1).map(_temp8);
+                start("move", "", {
+                  column: span[0],
+                  names
+                });
+              }
+            } else {
+              if (hit.area === "gutter") {
+                store.dispatch({
+                  command: "select.rows",
+                  from: hit.row,
+                  to: hit.row,
+                  mode
+                });
+                start("rows", String(hit.row));
+              } else {
+                if (hit.area === "corner") {
+                  store.dispatch({
+                    command: "select.all"
+                  });
+                } else {
+                  if (hit.area === "header") {
+                    const column_1 = nameOf(hit.column);
+                    if (column_1 === undefined) {
+                      return;
+                    }
+                    if (hit.menu) {
+                      return;
+                    }
+                    if (hit.edge) {
+                      start("resize", "", {
+                        column: hit.column,
+                        width: geometry.columnWidth(hit.column)
+                      });
+                    } else {
+                      start("move", "", {
+                        column: hit.column,
+                        names: movedWith(column_1),
+                        shift: event_0.shiftKey
+                      });
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    };
+    let t19;
+    if ($[51] !== geometry || $[52] !== nameOf || $[53] !== store) {
+      t19 = (scroller_1, current, x_0, y_0) => {
+        const hit_0 = geometry.hit(Math.max(geometry.gutterWidth + 1, Math.min(scroller_1.clientWidth - 1, x_0)), Math.max(geometry.headerHeight + 1, Math.min(geometry.bottom - 1, y_0)));
+        if (current.kind === "cells" && hit_0.area === "cell") {
+          const key = `${hit_0.row}:${hit_0.column}`;
+          const column_2 = nameOf(hit_0.column);
+          if (key === current.last || column_2 === undefined) {
+            return;
+          }
+          current.last = key;
+          store.dispatch({
+            command: "select",
+            row: hit_0.row,
+            column: column_2,
+            mode: "extend"
+          });
+        } else {
+          if (current.kind === "rows" && (hit_0.area === "cell" || hit_0.area === "gutter")) {
+            const key_0 = String(hit_0.row);
+            if (key_0 === current.last) {
+              return;
+            }
+            current.last = key_0;
+            const anchor = store.getSnapshot().session.anchor?.row ?? hit_0.row;
+            store.dispatch({
+              command: "select.rows",
+              from: anchor,
+              to: hit_0.row,
+              mode: "extend"
+            });
+          }
+        }
+      };
+      $[51] = geometry;
+      $[52] = nameOf;
+      $[53] = store;
+      $[54] = t19;
+    } else {
+      t19 = $[54];
+    }
+    const extendTo = t19;
+    let t20;
+    if ($[55] === Symbol.for("react.memo_cache_sentinel")) {
+      t20 = () => {
+        if (follow.current) {
+          cancelAnimationFrame(follow.current.frame);
+        }
+        follow.current = null;
+      };
+      $[55] = t20;
+    } else {
+      t20 = $[55];
+    }
+    const stopFollowing = t20;
+    let t21;
+    if ($[56] !== extendTo || $[57] !== geometry.bottom || $[58] !== geometry.gutterWidth || $[59] !== geometry.headerHeight) {
+      t21 = (scroller_2, x_1, y_1) => {
+        const beyondY = y_1 < geometry.headerHeight ? y_1 - geometry.headerHeight : y_1 > geometry.bottom ? y_1 - geometry.bottom : 0;
+        const beyondX = x_1 < geometry.gutterWidth ? x_1 - geometry.gutterWidth : x_1 > scroller_2.clientWidth ? x_1 - scroller_2.clientWidth : 0;
+        if (beyondX === 0 && beyondY === 0) {
+          stopFollowing();
+          return;
+        }
+        if (follow.current) {
+          follow.current.x = x_1;
+          follow.current.y = y_1;
+          return;
+        }
+        const state = {
+          frame: 0,
+          x: x_1,
+          y: y_1
+        };
+        follow.current = state;
+        const step = () => {
+          const current_0 = drag.current;
+          if (follow.current !== state || !current_0) {
+            return;
+          }
+          const dy = state.y < geometry.headerHeight ? state.y - geometry.headerHeight : Math.max(0, state.y - geometry.bottom);
+          const dx = state.x < geometry.gutterWidth ? state.x - geometry.gutterWidth : Math.max(0, state.x - scroller_2.clientWidth);
+          scroller_2.scrollTop = scroller_2.scrollTop + Math.sign(dy) * Math.min(80, Math.abs(dy) / 2 + 4);
+          if (current_0.kind === "cells") {
+            scroller_2.scrollLeft = scroller_2.scrollLeft + Math.sign(dx) * Math.min(80, Math.abs(dx) / 2 + 4);
+          }
+          extendTo(scroller_2, current_0, state.x, state.y);
+          state.frame = requestAnimationFrame(step);
+        };
+        state.frame = requestAnimationFrame(step);
+      };
+      $[56] = extendTo;
+      $[57] = geometry.bottom;
+      $[58] = geometry.gutterWidth;
+      $[59] = geometry.headerHeight;
+      $[60] = t21;
+    } else {
+      t21 = $[60];
+    }
+    const followPointer = t21;
+    onPointerMove = event_1 => {
+      const current_1 = drag.current;
+      const {
+        x: x_2,
+        y: y_2
+      } = point(event_1);
+      if (!current_1) {
+        const hit_1 = geometry.hit(x_2, y_2);
+        const action = hit_1.area === "cell" ? canvas.actionAt(hit_1.row, hit_1.column)?.action : undefined;
+        event_1.currentTarget.style.cursor = hit_1.area === "header" && hit_1.edge ? "col-resize" : action ? action.cursor ?? "pointer" : "";
+        return;
+      }
+      if (current_1.kind === "resize") {
+        canvas.previewWidth(current_1.column, current_1.width + event_1.clientX - current_1.x);
+        return;
+      }
+      if (current_1.kind === "move") {
+        if (!current_1.moving && Math.abs(event_1.clientX - current_1.x) < 5) {
+          return;
+        }
+        current_1.moving = true;
+        const target = dropAt(x_2, current_1.names ?? []);
+        current_1.before = target?.before;
+        canvas.previewDrop(target ? target.x : null);
+        return;
+      }
+      extendTo(event_1.currentTarget, current_1, x_2, y_2);
+      followPointer(event_1.currentTarget, x_2, y_2);
+    };
+    let t22;
+    if ($[61] !== canvas || $[62] !== nameOf || $[63] !== store) {
+      t22 = event_2 => {
+        pressed.current = false;
+        if (later.current && event_2.type === "pointerup") {
+          later.current();
+        }
+        later.current = null;
+        const current_2 = drag.current;
+        if (!current_2 || current_2.pointer !== event_2.pointerId) {
+          return;
+        }
+        drag.current = null;
+        stopFollowing();
+        event_2.currentTarget.releasePointerCapture(event_2.pointerId);
+        if (current_2.kind === "move") {
+          canvas.previewDrop(null);
+          const name = nameOf(current_2.column);
+          if (!current_2.moving) {
+            if (current_2.names?.length === 1 && name !== undefined && event_2.type === "pointerup") {
+              store.dispatch({
+                command: "sort.toggle",
+                column: name,
+                ...(current_2.shift ? {
+                  add: true
+                } : {})
+              });
+            }
+            return;
+          }
+          if (current_2.before !== undefined && current_2.names && event_2.type === "pointerup") {
+            store.dispatch({
+              command: "column.move",
+              names: current_2.names,
+              before: current_2.before
+            });
+          }
+          return;
+        }
+        if (current_2.kind !== "resize") {
+          return;
+        }
+        const name_0 = nameOf(current_2.column);
+        const width = Math.max(40, Math.min(100000, Math.round(current_2.width + event_2.clientX - current_2.x)));
+        if (name_0 !== undefined) {
+          store.dispatch({
+            command: "column.resize",
+            name: name_0,
+            width
+          }).then(() => canvas.previewWidth(current_2.column, null));
+        } else {
+          canvas.previewWidth(current_2.column, null);
+        }
+      };
+      $[61] = canvas;
+      $[62] = nameOf;
+      $[63] = store;
+      $[64] = t22;
+    } else {
+      t22 = $[64];
+    }
+    onPointerUp = t22;
+    const dispatchCheck = command => {
+      store.dispatch(command).then(outcome => {
+        if (!outcome.ok) {
+          announce(outcome.error instanceof CommandError && outcome.error.reason === "unknown_state" ? messages.checkedUnknown : messages.failed(outcome.error.message));
+          return;
+        }
+        const {
+          session: session_0,
+          document: document_0,
+          view: view_0
+        } = store.getSnapshot();
+        const count = checkedCount(session_0.checked, document_0.plan, view_0?.rowCount ?? 0);
+        announce(count === null ? messages.checkedUnknown : messages.checkedRows(number.format(count)));
+      });
+    };
+    toggleCheck = row => {
+      const key_1 = store.rowKey(row);
+      if (!key_1) {
+        return;
+      }
+      const {
+        session: session_1,
+        document: document_1
+      } = store.getSnapshot();
+      const state_0 = checkState(session_1.checked, document_1.plan, key_1);
+      dispatchCheck({
+        command: state_0 === "checked" ? "uncheck" : "check",
+        keys: [key_1]
+      });
+    };
+    const movedWith = name_1 => {
+      const last_0 = store.getSnapshot().session.selection?.at(-1);
+      if (last_0 && last_0.rows === "all" && last_0.columns !== "all" && last_0.columns.includes(name_1)) {
+        return columns.map(_temp9).filter(item_2 => last_0.columns.includes(item_2));
+      }
+      return [name_1];
+    };
+    const dropAt = (x_3, names_0) => {
+      if (columns.length === 0) {
+        return;
+      }
+      let at = geometry.columnAt(Math.max(geometry.gutterWidth, x_3));
+      if (at < 0) {
+        at = x_3 < geometry.gutterWidth ? 0 : columns.length - 1;
+      }
+      const middle = geometry.columnX(at) + geometry.columnWidth(at) / 2;
+      const index = x_3 < middle ? at : at + 1;
+      const before = index < columns.length ? columns[index].column.name : null;
+      const moved = names_0.map(name_2 => columns.findIndex(item_3 => item_3.column.name === name_2));
+      if (before !== null && names_0.includes(before)) {
+        return;
+      }
+      if (moved.length > 0 && index === Math.max(...moved) + 1 && moved.every((item_4, i) => item_4 === moved[0] + i)) {
+        return;
+      }
+      const lineX = index < columns.length ? geometry.columnX(index) : geometry.columnX(at) + geometry.columnWidth(at);
+      return {
+        before,
+        x: lineX
+      };
+    };
+    $[39] = announce;
+    $[40] = canvas;
+    $[41] = columns;
+    $[42] = geometry;
+    $[43] = messages;
+    $[44] = nameOf;
+    $[45] = number;
+    $[46] = store;
+    $[47] = onPointerDown;
+    $[48] = onPointerMove;
+    $[49] = onPointerUp;
+    $[50] = toggleCheck;
+  } else {
+    onPointerDown = $[47];
+    onPointerMove = $[48];
+    onPointerUp = $[49];
+    toggleCheck = $[50];
+  }
+  let t18;
+  if ($[65] !== geometry || $[66] !== scrollerRef) {
+    t18 = (column_3, index_0) => {
+      const scroller_3 = scrollerRef.current;
+      if (!scroller_3) {
+        return;
+      }
+      const rect_0 = scroller_3.getBoundingClientRect();
+      setMenu({
+        column: column_3,
+        x: rect_0.left + Math.max(0, geometry.columnX(index_0) + geometry.columnWidth(index_0) - 200),
+        y: rect_0.top + geometry.headerHeight
+      });
+    };
+    $[65] = geometry;
+    $[66] = scrollerRef;
+    $[67] = t18;
+  } else {
+    t18 = $[67];
+  }
+  const openMenu = t18;
+  let act;
+  let onClick;
+  if ($[68] !== canvas || $[69] !== geometry || $[70] !== nameOf || $[71] !== onCellAction || $[72] !== openMenu || $[73] !== store) {
+    onClick = event_3 => {
+      const rect_1 = event_3.currentTarget.getBoundingClientRect();
+      const hit_2 = geometry.hit(event_3.clientX - rect_1.left, event_3.clientY - rect_1.top);
+      const column_4 = nameOf(hit_2.column);
+      if (hit_2.area === "header" && hit_2.menu && column_4 !== undefined) {
+        openMenu(column_4, hit_2.column);
+      }
+      if (hit_2.area === "cell" && !event_3.shiftKey && !event_3.metaKey && !event_3.ctrlKey) {
+        act(hit_2.row, hit_2.column);
+      }
+    };
+    act = (row_0, column_5) => {
+      const found = canvas.actionAt(row_0, column_5);
+      if (!found || !onCellAction) {
+        return false;
+      }
+      onCellAction({
+        ...found.cell,
+        action: found.action,
+        key: store.rowKey(row_0)
+      });
+      return true;
+    };
+    $[68] = canvas;
+    $[69] = geometry;
+    $[70] = nameOf;
+    $[71] = onCellAction;
+    $[72] = openMenu;
+    $[73] = store;
+    $[74] = act;
+    $[75] = onClick;
+  } else {
+    act = $[74];
+    onClick = $[75];
+  }
+  let onContextMenu;
+  if ($[76] !== geometry || $[77] !== nameOf || $[78] !== store) {
+    onContextMenu = event_4 => {
+      const rect_2 = event_4.currentTarget.getBoundingClientRect();
+      const hit_3 = geometry.hit(event_4.clientX - rect_2.left, event_4.clientY - rect_2.top);
+      const column_6 = nameOf(hit_3.column);
+      if (hit_3.area !== "header" && hit_3.area !== "cell" || column_6 === undefined) {
+        return;
+      }
+      event_4.preventDefault();
+      const at_0 = {
+        x: event_4.clientX,
+        y: event_4.clientY
+      };
+      let open;
+      if (hit_3.area === "header") {
+        open = () => setMenu({
+          column: column_6,
+          ...at_0
+        });
+      } else {
+        if (!isSelected(hit_3.row, column_6)) {
+          store.dispatch({
+            command: "select",
+            row: hit_3.row,
+            column: column_6
+          });
+        }
+        open = () => setCellMenu({
+          row: hit_3.row,
+          column: column_6,
+          ...at_0
+        });
+      }
+      if (pressed.current) {
+        later.current = open;
+      } else {
+        open();
+      }
+    };
+    const isSelected = (row_1, column_7) => {
+      const {
+        selection,
+        active: active_0
+      } = store.getSnapshot().session;
+      if (!selection) {
+        return active_0?.row === row_1 && active_0.column === column_7;
+      }
+      return selection.some(range => (range.rows === "all" || row_1 >= range.rows[0] && row_1 < range.rows[1]) && (range.columns === "all" || range.columns.includes(column_7)));
+    };
+    $[76] = geometry;
+    $[77] = nameOf;
+    $[78] = store;
+    $[79] = onContextMenu;
+  } else {
+    onContextMenu = $[79];
+  }
+  let t19;
+  if ($[80] !== announce || $[81] !== messages || $[82] !== number || $[83] !== store) {
+    t19 = () => {
+      store.dispatch({
+        command: "copy"
+      }).then(async outcome_0 => {
+        if (!outcome_0.ok) {
+          announce(messages.failed(outcome_0.error.message));
+          return;
+        }
+        ;
+        try {
+          await writeClipboardLater(outcome_0.output);
+          announce(messages.copied(number.format(countCells(outcome_0.output))));
+        } catch (t20) {
+          const error = t20;
+          announce(messages.failed(error instanceof Error ? error.message : String(error)));
+        }
+      });
+    };
+    $[80] = announce;
+    $[81] = messages;
+    $[82] = number;
+    $[83] = store;
+    $[84] = t19;
+  } else {
+    t19 = $[84];
+  }
+  const copySelection = t19;
+  let t20;
+  if ($[85] !== columns || $[86] !== geometry || $[87] !== scrollerRef || $[88] !== store) {
+    t20 = () => {
+      const scroller_4 = scrollerRef.current;
+      const active_1 = store.getSnapshot().session.active;
+      if (!scroller_4 || !active_1) {
+        return;
+      }
+      const index_1 = columns.findIndex(item_5 => item_5.column.name === active_1.column);
+      if (index_1 < 0) {
+        return;
+      }
+      const box = geometry.cellBox(active_1.row, index_1);
+      const rect_3 = scroller_4.getBoundingClientRect();
+      setCellMenu({
+        row: active_1.row,
+        column: active_1.column,
+        x: rect_3.left + box.left,
+        y: rect_3.top + box.top + box.height
+      });
+    };
+    $[85] = columns;
+    $[86] = geometry;
+    $[87] = scrollerRef;
+    $[88] = store;
+    $[89] = t20;
+  } else {
+    t20 = $[89];
+  }
+  const openCellMenu = t20;
+  let t21;
+  if ($[90] !== scrollerRef) {
+    t21 = () => {
+      setCellMenu(null);
+      scrollerRef.current?.focus({
+        preventScroll: true
+      });
+    };
+    $[90] = scrollerRef;
+    $[91] = t21;
+  } else {
+    t21 = $[91];
+  }
+  const closeCellMenu = t21;
+  let t22;
+  if ($[92] !== scrollerRef) {
+    t22 = () => {
+      setMenu(null);
+      scrollerRef.current?.focus({
+        preventScroll: true
+      });
+    };
+    $[92] = scrollerRef;
+    $[93] = t22;
+  } else {
+    t22 = $[93];
+  }
+  const closeMenu = t22;
+  let onDoubleClick;
+  let startEditing;
+  if ($[94] !== announce || $[95] !== geometry || $[96] !== messages || $[97] !== nameOf || $[98] !== store) {
+    onDoubleClick = event_5 => {
+      const rect_4 = event_5.currentTarget.getBoundingClientRect();
+      const hit_4 = geometry.hit(event_5.clientX - rect_4.left, event_5.clientY - rect_4.top);
+      const name_3 = nameOf(hit_4.column);
+      if (hit_4.area === "header" && hit_4.edge && name_3 !== undefined) {
+        store.dispatch({
+          command: "column.resize",
+          name: name_3,
+          width: null
+        });
+      } else {
+        if (hit_4.area === "cell") {
+          startEditing(undefined);
+        }
+      }
+    };
+    startEditing = text => {
+      const outcome_1 = store.dispatchSync(text === undefined ? {
+        command: "edit.begin"
+      } : {
+        command: "edit.begin",
+        text
+      });
+      if (outcome_1.ok) {
+        if (store.getSnapshot().session.editor) {
+          editor.current?.open();
+        }
+        return true;
+      }
+      if (outcome_1.error instanceof CommandError && outcome_1.error.reason === "read_only") {
+        announce(messages.readOnly);
+      } else {
+        announce(messages.failed(outcome_1.error.message));
+      }
+      return false;
+    };
+    $[94] = announce;
+    $[95] = geometry;
+    $[96] = messages;
+    $[97] = nameOf;
+    $[98] = store;
+    $[99] = onDoubleClick;
+    $[100] = startEditing;
+  } else {
+    onDoubleClick = $[99];
+    startEditing = $[100];
+  }
+  let t23;
+  if ($[101] !== act || $[102] !== checkboxes || $[103] !== columns || $[104] !== onFind || $[105] !== openCellMenu || $[106] !== openMenu || $[107] !== saving || $[108] !== startEditing || $[109] !== store || $[110] !== toggleCheck) {
+    t23 = event_6 => {
+      if (event_6.target !== event_6.currentTarget) {
+        return;
+      }
+      const composing = event_6.nativeEvent.isComposing || event_6.keyCode === 229;
+      if (!composing && event_6.key === " " && !event_6.altKey && !event_6.ctrlKey && !event_6.metaKey && !event_6.shiftKey) {
+        const active_2 = store.getSnapshot().session.active;
+        if (!active_2) {
+          return;
+        }
+        const column_8 = columns.findIndex(item_6 => item_6.column.name === active_2.column);
+        if (act(active_2.row, column_8)) {
+          event_6.preventDefault();
+          return;
+        }
+        if (!checkboxes) {
+          return;
+        }
+        event_6.preventDefault();
+        toggleCheck(active_2.row);
+        return;
+      }
+      if ((isApple() ? event_6.metaKey : event_6.ctrlKey) && (event_6.key === "f" || event_6.key === "F") && !event_6.altKey) {
+        if (!onFind || store.getSnapshot().table?.capabilities.find !== true) {
+          return;
+        }
+        event_6.preventDefault();
+        onFind();
+        return;
+      }
+      if (event_6.key === "ContextMenu" || event_6.key === "F10" && event_6.shiftKey) {
+        event_6.preventDefault();
+        openCellMenu();
+        return;
+      }
+      if (!composing && event_6.altKey && event_6.key === "Enter" && !event_6.ctrlKey && !event_6.metaKey && !event_6.shiftKey) {
+        event_6.preventDefault();
+        const open_0 = store.getSnapshot().session.detail?.open === true;
+        store.dispatch({
+          command: open_0 ? "detail.close" : "detail.open"
+        });
+        return;
+      }
+      if (event_6.altKey && event_6.key === "ArrowDown" && !event_6.ctrlKey && !event_6.metaKey) {
+        const column_9 = store.getSnapshot().session.active?.column;
+        const index_2 = columns.findIndex(item_7 => item_7.column.name === column_9);
+        if (column_9 === undefined || index_2 < 0) {
+          return;
+        }
+        event_6.preventDefault();
+        openMenu(column_9, index_2);
+        return;
+      }
+      if (typesText({
+        ...pick(event_6),
+        keyCode: event_6.keyCode,
+        isComposing: event_6.nativeEvent.isComposing
+      })) {
+        if (!startEditing("")) {
+          event_6.preventDefault();
+        }
+        return;
+      }
+      const command_0 = keyCommand(event_6, isApple());
+      if (!command_0) {
+        return;
+      }
+      if (command_0.command === "save") {
+        if (!saving || store.getSnapshot().table?.capabilities.save !== true) {
+          return;
+        }
+        event_6.preventDefault();
+        saving.save();
+        return;
+      }
+      event_6.preventDefault();
+      store.dispatch(command_0);
+    };
+    $[101] = act;
+    $[102] = checkboxes;
+    $[103] = columns;
+    $[104] = onFind;
+    $[105] = openCellMenu;
+    $[106] = openMenu;
+    $[107] = saving;
+    $[108] = startEditing;
+    $[109] = store;
+    $[110] = toggleCheck;
+    $[111] = t23;
+  } else {
+    t23 = $[111];
+  }
+  const onKeyDown = t23;
+  let t24;
+  let t25;
+  let t26;
+  let t27;
+  let t28;
+  let t29;
+  let t30;
+  let t31;
+  let t32;
+  let t33;
+  let t34;
+  let t35;
+  let t36;
+  if ($[112] !== active || $[113] !== busy || $[114] !== columns || $[115] !== id || $[116] !== label || $[117] !== rowCount || $[118] !== scrollerRef || $[119] !== totalsRow) {
+    const activeColumn = active ? columns.findIndex(item_8 => item_8.column.name === active.column) : 0;
+    const activeRow = active?.row ?? 0;
+    const activeShown = rowCount > 0 && activeColumn >= 0;
+    t34 = "vg-body";
+    t35 = rootRef;
+    if ($[133] === Symbol.for("react.memo_cache_sentinel")) {
+      t36 = /*#__PURE__*/_jsx("canvas", {
+        className: "vg-canvas",
+        ref: canvasRef
+      });
+      $[133] = t36;
+    } else {
+      t36 = $[133];
+    }
+    t24 = "vg-scroller";
+    t25 = scrollerRef;
+    t26 = "grid";
+    t27 = 0;
+    t28 = label;
+    t29 = rowCount + 1 + (totalsRow ? 1 : 0);
+    t30 = columns.length;
+    t31 = "true";
+    t32 = busy;
+    t33 = activeShown ? cellId(id, activeRow, activeColumn) : undefined;
+    $[112] = active;
+    $[113] = busy;
+    $[114] = columns;
+    $[115] = id;
+    $[116] = label;
+    $[117] = rowCount;
+    $[118] = scrollerRef;
+    $[119] = totalsRow;
+    $[120] = t24;
+    $[121] = t25;
+    $[122] = t26;
+    $[123] = t27;
+    $[124] = t28;
+    $[125] = t29;
+    $[126] = t30;
+    $[127] = t31;
+    $[128] = t32;
+    $[129] = t33;
+    $[130] = t34;
+    $[131] = t35;
+    $[132] = t36;
+  } else {
+    t24 = $[120];
+    t25 = $[121];
+    t26 = $[122];
+    t27 = $[123];
+    t28 = $[124];
+    t29 = $[125];
+    t30 = $[126];
+    t31 = $[127];
+    t32 = $[128];
+    t33 = $[129];
+    t34 = $[130];
+    t35 = $[131];
+    t36 = $[132];
+  }
+  let t37;
+  if ($[134] === Symbol.for("react.memo_cache_sentinel")) {
+    t37 = /*#__PURE__*/_jsx("div", {
+      className: "vg-sizer",
+      ref: sizerRef
+    });
+    $[134] = t37;
+  } else {
+    t37 = $[134];
+  }
+  let t38;
+  if ($[135] !== canvas || $[136] !== id) {
+    t38 = /*#__PURE__*/_jsx(AccessibleRows, {
+      canvas: canvas,
+      id: id
+    });
+    $[135] = canvas;
+    $[136] = id;
+    $[137] = t38;
+  } else {
+    t38 = $[137];
+  }
+  let t39;
+  if ($[138] !== onClick || $[139] !== onContextMenu || $[140] !== onDoubleClick || $[141] !== onKeyDown || $[142] !== onPointerDown || $[143] !== onPointerMove || $[144] !== onPointerUp || $[145] !== t24 || $[146] !== t25 || $[147] !== t26 || $[148] !== t27 || $[149] !== t28 || $[150] !== t29 || $[151] !== t30 || $[152] !== t31 || $[153] !== t32 || $[154] !== t33 || $[155] !== t38) {
+    t39 = /*#__PURE__*/_jsxs("div", {
+      className: t24,
+      ref: t25,
+      role: t26,
+      tabIndex: t27,
+      "aria-label": t28,
+      "aria-rowcount": t29,
+      "aria-colcount": t30,
+      "aria-multiselectable": t31,
+      "aria-busy": t32,
+      "aria-activedescendant": t33,
+      onKeyDown: onKeyDown,
+      onPointerDown: onPointerDown,
+      onPointerMove: onPointerMove,
+      onPointerUp: onPointerUp,
+      onPointerCancel: onPointerUp,
+      onDoubleClick: onDoubleClick,
+      onClick: onClick,
+      onContextMenu: onContextMenu,
+      children: [t37, t38]
+    });
+    $[138] = onClick;
+    $[139] = onContextMenu;
+    $[140] = onDoubleClick;
+    $[141] = onKeyDown;
+    $[142] = onPointerDown;
+    $[143] = onPointerMove;
+    $[144] = onPointerUp;
+    $[145] = t24;
+    $[146] = t25;
+    $[147] = t26;
+    $[148] = t27;
+    $[149] = t28;
+    $[150] = t29;
+    $[151] = t30;
+    $[152] = t31;
+    $[153] = t32;
+    $[154] = t33;
+    $[155] = t38;
+    $[156] = t39;
+  } else {
+    t39 = $[156];
+  }
+  let t40;
+  if ($[157] !== announce || $[158] !== canvas || $[159] !== scrollerRef) {
+    t40 = /*#__PURE__*/_jsx(CellEditor, {
+      canvas: canvas,
+      scrollerRef: scrollerRef,
+      announce: announce,
+      ref: editor
+    });
+    $[157] = announce;
+    $[158] = canvas;
+    $[159] = scrollerRef;
+    $[160] = t40;
+  } else {
+    t40 = $[160];
+  }
+  let t41;
+  if ($[161] !== closeMenu || $[162] !== menu) {
+    t41 = menu && /*#__PURE__*/_jsx(Suspense, {
+      fallback: null,
+      children: /*#__PURE__*/_jsx(ColumnMenu, {
+        target: menu,
+        onClose: closeMenu
+      })
+    });
+    $[161] = closeMenu;
+    $[162] = menu;
+    $[163] = t41;
+  } else {
+    t41 = $[163];
+  }
+  let t42;
+  if ($[164] !== cellMenu || $[165] !== closeCellMenu || $[166] !== copySelection) {
+    t42 = cellMenu && /*#__PURE__*/_jsx(Suspense, {
+      fallback: null,
+      children: /*#__PURE__*/_jsx(CellMenu, {
+        target: cellMenu,
+        onClose: closeCellMenu,
+        copy: copySelection
+      })
+    });
+    $[164] = cellMenu;
+    $[165] = closeCellMenu;
+    $[166] = copySelection;
+    $[167] = t42;
+  } else {
+    t42 = $[167];
+  }
+  let t43;
+  if ($[168] !== t34 || $[169] !== t35 || $[170] !== t36 || $[171] !== t39 || $[172] !== t40 || $[173] !== t41 || $[174] !== t42) {
+    t43 = /*#__PURE__*/_jsxs("div", {
+      className: t34,
+      ref: t35,
+      children: [t36, t39, t40, t41, t42]
+    });
+    $[168] = t34;
+    $[169] = t35;
+    $[170] = t36;
+    $[171] = t39;
+    $[172] = t40;
+    $[173] = t41;
+    $[174] = t42;
+    $[175] = t43;
+  } else {
+    t43 = $[175];
+  }
+  return t43;
+}
+function _temp9(item_1) {
+  return item_1.column.name;
+}
+function _temp8(item_0) {
+  return item_0.column.name;
+}
+function _temp7(event) {
+  const rect = event.currentTarget.getBoundingClientRect();
+  return {
+    x: event.clientX - rect.left,
+    y: event.clientY - rect.top
+  };
+}
+function _temp6(snapshot_3) {
+  return !snapshot_3.document.plan?.aggregate && snapshot_3.displayed.some(_temp5);
+}
+function _temp5(item) {
+  return item.setting.total !== undefined;
+}
+function _temp4(snapshot_2) {
+  return snapshot_2.session.active;
+}
+function _temp3(snapshot_1) {
+  return snapshot_1.view === null || snapshot_1.pending !== null;
+}
+function _temp2(snapshot_0) {
+  return snapshot_0.displayed;
+}
+function _temp(snapshot) {
+  return snapshot.view?.rowCount ?? 0;
+}
+//# sourceMappingURL=grid-body.js.map