vastgrid 0.1.0 → 0.2.0

package/dist/react/data-grid.js

@@ -0,0 +1,653 @@
+import { c as _c } from "react/compiler-runtime";
+import { lazy, Suspense, use, useEffect, useEffectEvent, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { createGridStore } from "../core/store.js";
+import { GridContext, LocaleContext, SaveContext } from "./context.js";
+import { GridBody } from "./grid-body.js";
+import { messagesFor } from "./messages.js";
+import { useSaveAction } from "./save.js";
+import { StaticRows } from "./static-rows.js";
+import { StatusBar } from "./status-bar.js";
+import { Toolbar } from "./toolbar.js";
+
+// The find bar and the detail panel load when they first open (§10 of react.md).
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FindBar = /*#__PURE__*/lazy(() => import("./find-bar.js").then(module => ({
+  default: module.FindBar
+})));
+const DetailPanel = /*#__PURE__*/lazy(() => import("./detail-panel.js").then(module => ({
+  default: module.DetailPanel
+})));
+
+/** What `ref` gives (§5.5 of react.md). */
+
+const transportIds = new WeakMap();
+let nextTransportId = 1;
+
+/** A number for each transport, for the key that makes a new store when the transport changes. */
+function transportId(transport) {
+  let id = transportIds.get(transport);
+  if (id === undefined) {
+    id = nextTransportId++;
+    transportIds.set(transport, id);
+  }
+  return id;
+}
+function isPromise(value) {
+  return typeof value?.then === "function";
+}
+const noSubscription = () => () => {};
+const browserLocale = () => navigator.language;
+const serverLocale = () => undefined;
+
+/**
+ * A data grid for tables of any size (§5.1 of react.md): it draws on a canvas, reads rows through a
+ * transport as you scroll, and is driven by the commands of the specification.
+ */
+export function DataGrid(props) {
+  const $ = _c(15);
+  if (props.store) {
+    let t0;
+    if ($[0] !== props) {
+      t0 = /*#__PURE__*/_jsx(Frame, {
+        ...props,
+        store: props.store
+      });
+      $[0] = props;
+      $[1] = t0;
+    } else {
+      t0 = $[1];
+    }
+    return t0;
+  }
+  const {
+    transport,
+    table
+  } = props;
+  if (!transport || table === undefined) {
+    throw new Error("DataGrid needs a store, or a transport and a table.");
+  }
+  let t0;
+  if ($[2] !== transport) {
+    t0 = transportId(transport);
+    $[2] = transport;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  const key = `${t0}\u0000${table}`;
+  if (isPromise(props.initial)) {
+    let t1;
+    if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = /*#__PURE__*/_jsx("div", {
+        className: "vg-root",
+        "aria-busy": "true"
+      });
+      $[4] = t1;
+    } else {
+      t1 = $[4];
+    }
+    let t2;
+    if ($[5] !== key || $[6] !== props || $[7] !== table || $[8] !== transport) {
+      t2 = /*#__PURE__*/_jsx(Suspense, {
+        fallback: t1,
+        children: /*#__PURE__*/_jsx(OwnStore, {
+          ...props,
+          transport: transport,
+          table: table
+        }, key)
+      });
+      $[5] = key;
+      $[6] = props;
+      $[7] = table;
+      $[8] = transport;
+      $[9] = t2;
+    } else {
+      t2 = $[9];
+    }
+    return t2;
+  }
+  let t1;
+  if ($[10] !== key || $[11] !== props || $[12] !== table || $[13] !== transport) {
+    t1 = /*#__PURE__*/_jsx(OwnStore, {
+      ...props,
+      transport: transport,
+      table: table
+    }, key);
+    $[10] = key;
+    $[11] = props;
+    $[12] = table;
+    $[13] = transport;
+    $[14] = t1;
+  } else {
+    t1 = $[14];
+  }
+  return t1;
+}
+
+/** A grid with a store of its own, made once and connected while it is mounted. */
+function OwnStore(props) {
+  const $ = _c(15);
+  const initial = isPromise(props.initial) ? use(props.initial) : props.initial;
+  let t0;
+  if ($[0] !== initial || $[1] !== props.defaultDocument || $[2] !== props.defaultSession || $[3] !== props.document || $[4] !== props.open || $[5] !== props.session || $[6] !== props.table || $[7] !== props.transport) {
+    t0 = () => createGridStore({
+      transport: props.transport,
+      table: props.table,
+      ...(props.open ? {
+        open: props.open
+      } : {}),
+      ...(props.document ?? props.defaultDocument ? {
+        document: props.document ?? props.defaultDocument
+      } : {}),
+      ...(props.session ?? props.defaultSession ? {
+        session: props.session ?? props.defaultSession
+      } : {}),
+      ...(initial ? {
+        initial
+      } : {})
+    });
+    $[0] = initial;
+    $[1] = props.defaultDocument;
+    $[2] = props.defaultSession;
+    $[3] = props.document;
+    $[4] = props.open;
+    $[5] = props.session;
+    $[6] = props.table;
+    $[7] = props.transport;
+    $[8] = t0;
+  } else {
+    t0 = $[8];
+  }
+  const [store] = useState(t0);
+  let t1;
+  let t2;
+  if ($[9] !== store) {
+    t1 = () => store.connect();
+    t2 = [store];
+    $[9] = store;
+    $[10] = t1;
+    $[11] = t2;
+  } else {
+    t1 = $[10];
+    t2 = $[11];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[12] !== props || $[13] !== store) {
+    t3 = /*#__PURE__*/_jsx(Frame, {
+      ...props,
+      store: store
+    });
+    $[12] = props;
+    $[13] = store;
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  return t3;
+}
+
+/** Makes a part of the state controlled by a prop (§5.2), and reports the changes that commands make. */
+function useControlled(store, part, value, onChange) {
+  const $ = _c(19);
+  const controlled = value !== undefined;
+  let t0;
+  if ($[0] !== onChange) {
+    t0 = next => onChange?.(next);
+    $[0] = onChange;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const report = useEffectEvent(t0);
+  let t1;
+  let t2;
+  if ($[2] !== controlled || $[3] !== part || $[4] !== store) {
+    t1 = () => {
+      store.control(part, controlled);
+    };
+    t2 = [store, part, controlled];
+    $[2] = controlled;
+    $[3] = part;
+    $[4] = store;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t1 = $[5];
+    t2 = $[6];
+  }
+  useLayoutEffect(t1, t2);
+  let t3;
+  let t4;
+  if ($[7] !== part || $[8] !== store || $[9] !== value) {
+    t3 = () => {
+      if (value === undefined) {
+        return;
+      }
+      if (part === "document") {
+        store.setDocument(value);
+      } else {
+        store.setSession(value);
+      }
+    };
+    t4 = [store, part, value];
+    $[7] = part;
+    $[8] = store;
+    $[9] = value;
+    $[10] = t3;
+    $[11] = t4;
+  } else {
+    t3 = $[10];
+    t4 = $[11];
+  }
+  useLayoutEffect(t3, t4);
+  let t5;
+  if ($[12] !== part || $[13] !== report || $[14] !== store) {
+    t5 = () => store.on(part, next_0 => report(next_0));
+    $[12] = part;
+    $[13] = report;
+    $[14] = store;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  let t6;
+  if ($[16] !== part || $[17] !== store) {
+    t6 = [store, part];
+    $[16] = part;
+    $[17] = store;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
+  }
+  useEffect(t5, t6);
+}
+function Frame(t0) {
+  const $ = _c(74);
+  const {
+    store,
+    toolbar: t1,
+    statusBar: t2,
+    checkboxes: t3,
+    columnGroups,
+    groupHeaderHeight,
+    wrapLines,
+    cellText,
+    cellStyle,
+    drawCell,
+    cellAction,
+    onCellAction,
+    detailPanel,
+    className,
+    style,
+    ref,
+    rowHeight,
+    headerHeight,
+    locale: given,
+    messages: replaced,
+    document,
+    onDocumentChange,
+    session,
+    onSessionChange,
+    onError,
+    "aria-label": ariaLabel
+  } = t0;
+  const toolbar = t1 === undefined ? true : t1;
+  const statusBar = t2 === undefined ? true : t2;
+  const checkboxes = t3 === undefined ? false : t3;
+  const detected = useSyncExternalStore(noSubscription, browserLocale, serverLocale);
+  const locale = given ?? detected;
+  let t4;
+  if ($[0] !== locale) {
+    t4 = messagesFor(locale);
+    $[0] = locale;
+    $[1] = t4;
+  } else {
+    t4 = $[1];
+  }
+  const base = t4;
+  let t5;
+  if ($[2] !== base || $[3] !== replaced) {
+    t5 = replaced ? {
+      ...base,
+      ...replaced
+    } : base;
+    $[2] = base;
+    $[3] = replaced;
+    $[4] = t5;
+  } else {
+    t5 = $[4];
+  }
+  const messages = t5;
+  let t6;
+  if ($[5] !== locale) {
+    t6 = new Intl.NumberFormat(locale);
+    $[5] = locale;
+    $[6] = t6;
+  } else {
+    t6 = $[6];
+  }
+  let t7;
+  if ($[7] !== locale || $[8] !== messages || $[9] !== t6) {
+    t7 = {
+      messages,
+      locale,
+      number: t6
+    };
+    $[7] = locale;
+    $[8] = messages;
+    $[9] = t6;
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  const language = t7;
+  const label = ariaLabel ?? messages.grid;
+  const scrollerRef = useRef(null);
+  const [notice, setNotice] = useState("");
+  const [finding, setFinding] = useState(false);
+  const detailOpen = useGridSelectorOf(store, _temp);
+  const saving = useSaveAction(store, language, setNotice);
+  const status = useGridSelectorOf(store, _temp2);
+  useControlled(store, "document", document, onDocumentChange);
+  useControlled(store, "session", session, onSessionChange);
+  let t8;
+  if ($[11] !== onError) {
+    t8 = error => onError?.(error);
+    $[11] = onError;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  const reportError = useEffectEvent(t8);
+  let t9;
+  if ($[13] !== reportError || $[14] !== store) {
+    t9 = () => store.on("error", error_0 => reportError(error_0));
+    $[13] = reportError;
+    $[14] = store;
+    $[15] = t9;
+  } else {
+    t9 = $[15];
+  }
+  let t10;
+  if ($[16] !== store) {
+    t10 = [store];
+    $[16] = store;
+    $[17] = t10;
+  } else {
+    t10 = $[17];
+  }
+  useEffect(t9, t10);
+  let t11;
+  let t12;
+  if ($[18] !== store) {
+    t11 = () => ({
+      store,
+      dispatch: store.dispatch,
+      focus: () => scrollerRef.current?.focus()
+    });
+    t12 = [store];
+    $[18] = store;
+    $[19] = t11;
+    $[20] = t12;
+  } else {
+    t11 = $[19];
+    t12 = $[20];
+  }
+  useImperativeHandle(ref, t11, t12);
+  const t13 = className ? `vg-root ${className}` : "vg-root";
+  let t14;
+  if ($[21] !== toolbar) {
+    t14 = toolbar && /*#__PURE__*/_jsx(Toolbar, {
+      announce: setNotice
+    });
+    $[21] = toolbar;
+    $[22] = t14;
+  } else {
+    t14 = $[22];
+  }
+  let t15;
+  if ($[23] !== finding) {
+    t15 = finding && /*#__PURE__*/_jsx(Suspense, {
+      fallback: null,
+      children: /*#__PURE__*/_jsx(FindBar, {
+        onClose: () => setFinding(false),
+        scrollerRef: scrollerRef
+      })
+    });
+    $[23] = finding;
+    $[24] = t15;
+  } else {
+    t15 = $[24];
+  }
+  let t16;
+  if ($[25] !== label) {
+    t16 = /*#__PURE__*/_jsx(StaticRows, {
+      label: label
+    });
+    $[25] = label;
+    $[26] = t16;
+  } else {
+    t16 = $[26];
+  }
+  let t17;
+  if ($[27] !== cellAction || $[28] !== cellStyle || $[29] !== cellText || $[30] !== drawCell) {
+    t17 = {
+      cellText,
+      cellStyle,
+      drawCell,
+      cellAction
+    };
+    $[27] = cellAction;
+    $[28] = cellStyle;
+    $[29] = cellText;
+    $[30] = drawCell;
+    $[31] = t17;
+  } else {
+    t17 = $[31];
+  }
+  let t18;
+  if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+    t18 = () => setFinding(true);
+    $[32] = t18;
+  } else {
+    t18 = $[32];
+  }
+  let t19;
+  if ($[33] !== checkboxes || $[34] !== columnGroups || $[35] !== groupHeaderHeight || $[36] !== headerHeight || $[37] !== label || $[38] !== onCellAction || $[39] !== rowHeight || $[40] !== t17 || $[41] !== wrapLines) {
+    t19 = /*#__PURE__*/_jsx(GridBody, {
+      rowHeight: rowHeight,
+      headerHeight: headerHeight,
+      checkboxes: checkboxes,
+      columnGroups: columnGroups,
+      groupHeaderHeight: groupHeaderHeight,
+      wrapLines: wrapLines,
+      hooks: t17,
+      onCellAction: onCellAction,
+      onFind: t18,
+      label: label,
+      scrollerRef: scrollerRef,
+      announce: setNotice
+    });
+    $[33] = checkboxes;
+    $[34] = columnGroups;
+    $[35] = groupHeaderHeight;
+    $[36] = headerHeight;
+    $[37] = label;
+    $[38] = onCellAction;
+    $[39] = rowHeight;
+    $[40] = t17;
+    $[41] = wrapLines;
+    $[42] = t19;
+  } else {
+    t19 = $[42];
+  }
+  let t20;
+  if ($[43] !== t16 || $[44] !== t19) {
+    t20 = /*#__PURE__*/_jsx(Suspense, {
+      fallback: t16,
+      children: t19
+    });
+    $[43] = t16;
+    $[44] = t19;
+    $[45] = t20;
+  } else {
+    t20 = $[45];
+  }
+  let t21;
+  if ($[46] !== detailOpen || $[47] !== detailPanel) {
+    t21 = detailOpen && /*#__PURE__*/_jsx(Suspense, {
+      fallback: null,
+      children: /*#__PURE__*/_jsx(DetailPanel, {
+        custom: detailPanel,
+        onClosed: () => scrollerRef.current?.focus({
+          preventScroll: true
+        })
+      })
+    });
+    $[46] = detailOpen;
+    $[47] = detailPanel;
+    $[48] = t21;
+  } else {
+    t21 = $[48];
+  }
+  let t22;
+  if ($[49] !== t20 || $[50] !== t21) {
+    t22 = /*#__PURE__*/_jsxs("div", {
+      className: "vg-main",
+      children: [t20, t21]
+    });
+    $[49] = t20;
+    $[50] = t21;
+    $[51] = t22;
+  } else {
+    t22 = $[51];
+  }
+  let t23;
+  if ($[52] !== statusBar) {
+    t23 = statusBar && /*#__PURE__*/_jsx(StatusBar, {
+      announce: setNotice,
+      onDone: () => scrollerRef.current?.focus({
+        preventScroll: true
+      })
+    });
+    $[52] = statusBar;
+    $[53] = t23;
+  } else {
+    t23 = $[53];
+  }
+  let t24;
+  if ($[54] !== notice) {
+    t24 = /*#__PURE__*/_jsx("div", {
+      className: "vg-sr-only",
+      "aria-live": "polite",
+      children: notice
+    });
+    $[54] = notice;
+    $[55] = t24;
+  } else {
+    t24 = $[55];
+  }
+  let t25;
+  if ($[56] !== status || $[57] !== style || $[58] !== t13 || $[59] !== t14 || $[60] !== t15 || $[61] !== t22 || $[62] !== t23 || $[63] !== t24) {
+    t25 = /*#__PURE__*/_jsxs("div", {
+      className: t13,
+      style: style,
+      "data-status": status,
+      children: [t14, t15, t22, t23, t24]
+    });
+    $[56] = status;
+    $[57] = style;
+    $[58] = t13;
+    $[59] = t14;
+    $[60] = t15;
+    $[61] = t22;
+    $[62] = t23;
+    $[63] = t24;
+    $[64] = t25;
+  } else {
+    t25 = $[64];
+  }
+  let t26;
+  if ($[65] !== saving || $[66] !== t25) {
+    t26 = /*#__PURE__*/_jsx(SaveContext, {
+      value: saving,
+      children: t25
+    });
+    $[65] = saving;
+    $[66] = t25;
+    $[67] = t26;
+  } else {
+    t26 = $[67];
+  }
+  let t27;
+  if ($[68] !== language || $[69] !== t26) {
+    t27 = /*#__PURE__*/_jsx(LocaleContext, {
+      value: language,
+      children: t26
+    });
+    $[68] = language;
+    $[69] = t26;
+    $[70] = t27;
+  } else {
+    t27 = $[70];
+  }
+  let t28;
+  if ($[71] !== store || $[72] !== t27) {
+    t28 = /*#__PURE__*/_jsx(GridContext, {
+      value: store,
+      children: t27
+    });
+    $[71] = store;
+    $[72] = t27;
+    $[73] = t28;
+  } else {
+    t28 = $[73];
+  }
+  return t28;
+}
+
+/** `useGridSelector` for a store given directly, before the context holds it. */
+function _temp2(snapshot_0) {
+  return snapshot_0.status;
+}
+function _temp(snapshot) {
+  return snapshot.session.detail?.open === true;
+}
+function useGridSelectorOf(store, selector) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] !== selector || $[1] !== store) {
+    t0 = () => selector(store.getSnapshot());
+    $[0] = selector;
+    $[1] = store;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const read = t0;
+  return useSyncExternalStore(store.subscribe, read, read);
+}
+
+/** Gives a store to the hooks of the components inside (§5.4 of react.md). */
+export function GridProvider(t0) {
+  const $ = _c(3);
+  const {
+    store,
+    children
+  } = t0;
+  let t1;
+  if ($[0] !== children || $[1] !== store) {
+    t1 = /*#__PURE__*/_jsx(GridContext, {
+      value: store,
+      children: children
+    });
+    $[0] = children;
+    $[1] = store;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+//# sourceMappingURL=data-grid.js.map