@jielga/tmdatagrid 2.0.0-beta.9 → 2.0.0

package/src/{tmdatagrid/core → core}/columnUtils.ts

@@ -1,6 +1,7 @@
 import type { Row } from "@tanstack/react-table";
 import {
   getDefaultOperator,
+  getOperatorsForType,
   type TMDataGridColumnType,
   type TMDataGridFilterOperator,
 } from "./filterOperators";
@@ -37,17 +38,36 @@ export function getColumnType(column: ColumnLike): TMDataGridColumnType {
   return column.columnDef.meta?.type ?? "string";
 }
 
+/**
+ * The operators this column offers: the type's list, narrowed to
+ * `meta.filter.operators` when the column declares one. The type's order is
+ * kept so the menu reads the same on every column; an operator the type does
+ * not offer is dropped, and an allowlist that leaves nothing falls back to the
+ * type's full list rather than an empty menu.
+ */
+export function getColumnOperators(
+  column: ColumnLike,
+): readonly TMDataGridFilterOperator[] {
+  const offered = getOperatorsForType(getColumnType(column));
+  const allowed = column.columnDef.meta?.filter?.operators;
+  if (!allowed) return offered;
+  const narrowed = offered.filter((operator) => allowed.includes(operator));
+  return narrowed.length > 0 ? narrowed : offered;
+}
+
 /**
  * The operator a fresh filter on this column starts with -
- * `meta.filter.defaultOperator`, else the type's default.
+ * `meta.filter.defaultOperator`, else the type's default where the column
+ * offers it, else the first operator it does offer.
  */
 export function getColumnDefaultOperator(
   column: ColumnLike,
 ): TMDataGridFilterOperator {
-  return (
-    column.columnDef.meta?.filter?.defaultOperator ??
-    getDefaultOperator(getColumnType(column))
-  );
+  const declared = column.columnDef.meta?.filter?.defaultOperator;
+  if (declared) return declared;
+  const offered = getColumnOperators(column);
+  const typeDefault = getDefaultOperator(getColumnType(column));
+  return offered.includes(typeDefault) ? typeDefault : offered[0];
 }
 
 /**
@@ -139,3 +159,22 @@ export function isColumnReorderable(column: ColumnLike): boolean {
   if (column.columnDef.meta?.enableOrdering === false) return false;
   return column.parent === undefined;
 }
+
+/** The list length from which a column chooser shows its search box. */
+export const COLUMN_SEARCH_MIN = 6;
+
+/** `"auto"` shows the search box from `COLUMN_SEARCH_MIN` columns. */
+export type TMDataGridColumnSearchable = boolean | "auto";
+
+/**
+ * Whether a column list shows a search box. A handful of columns is read at
+ * a glance, so `"auto"` keeps the input out of the way until the list is long
+ * enough to need one.
+ */
+export function showColumnSearch(
+  searchable: TMDataGridColumnSearchable,
+  count: number,
+): boolean {
+  if (searchable === "auto") return count >= COLUMN_SEARCH_MIN;
+  return searchable;
+}

package/src/core/controlledStateSync.ts

@@ -0,0 +1,108 @@
+import type { ReadonlyStore, Store } from "@tanstack/store";
+
+/**
+ * Timing repair for TanStack's controlled-state sync.
+ *
+ * `useTable` calls `table.setOptions` from its render body, and that syncs
+ * `options.state` into the table's atoms. An atom write publishes the store
+ * synchronously, so every component subscribed to `table.store` schedules a
+ * setState while the consumer's component is still rendering - which React
+ * reports as "Cannot update a component (X) while rendering a different
+ * component (Y)", pointing at the consumer's component rather than at the
+ * grid.
+ *
+ * The write has to stay where it is: the atoms must hold the controlled value
+ * before the table builds its row models for that render. Only the
+ * notification is early, so it moves to a microtask. `getSnapshot` already
+ * returns the new value, so a component reads the same state either way; the
+ * subscription is only what schedules a re-render for the components the
+ * consumer's own render does not reach.
+ *
+ * Scope and assumptions. Only `table.store` is patched: a subscription made
+ * on `table.atoms.*` or `table.baseAtoms.*` keeps the synchronous timing.
+ * The patch leans on three table-core 9.0.0-beta.21 internals - the store is
+ * created once in `constructTable`, `useTable` returns a shallow copy that
+ * shares it, and the sync runs inside `setOptions` during render. The
+ * publish test in controlledState.test.tsx fails loudly if any of them
+ * moves; it is the guard for this module, not a redundant check. The
+ * intended end state - owning the controlled slices through `options.atoms`,
+ * which removes the render-time sync entirely - is in the backlog.
+ */
+
+type Observer = ((value: unknown) => void) | { next?: (value: unknown) => void };
+
+type Subscribe = (observer: Observer) => { unsubscribe: () => void };
+
+/**
+ * True while `useTable` is syncing controlled state inside a render pass.
+ * Process-global, so while one grid is inside its `useTable` call a publish
+ * on any patched store is deferred too - harmless, since nothing else runs
+ * during a synchronous render pass.
+ */
+let syncing = false;
+
+/**
+ * Called immediately before the `useTable` call that performs the sync.
+ *
+ * The microtask is the backstop that bounds the flag to the current task: if
+ * `useTable` throws and an error boundary unmounts the grid, nothing after
+ * the call runs, and without it every patched store would keep deferring its
+ * notifications for the life of the page.
+ */
+export function beginControlledStateSync(): void {
+  syncing = true;
+  queueMicrotask(() => {
+    syncing = false;
+  });
+}
+
+/**
+ * Called immediately after it - the prompt clear; correctness rests on the
+ * backstop above. Not a `finally` around the call, because hooks inside
+ * `try` opt the whole hook out of the React Compiler.
+ */
+export function endControlledStateSync(): void {
+  syncing = false;
+}
+
+const patched = new WeakSet<object>();
+
+/**
+ * Wraps a table store's `subscribe` so notifications raised during the sync
+ * are delivered in a microtask. Idempotent, and installed on the store object
+ * itself rather than on a copy of the table - rows hold the original, so
+ * `row.table.store` has to be the patched one.
+ */
+export function deferControlledStateSyncPublishes<TState>(
+  store: Store<TState> | ReadonlyStore<TState>,
+): void {
+  if (patched.has(store)) return;
+  patched.add(store);
+
+  const subscribe = store.subscribe.bind(store) as Subscribe;
+
+  (store as unknown as { subscribe: Subscribe }).subscribe = (observer) => {
+    const next =
+      typeof observer === "function" ? observer : observer.next?.bind(observer);
+    if (next === undefined) return subscribe(observer);
+
+    let live = true;
+    const subscription = subscribe((value) => {
+      if (!syncing) {
+        next(value);
+        return;
+      }
+      queueMicrotask(() => {
+        // The subscriber may have unmounted between the write and the flush.
+        if (live) next(value);
+      });
+    });
+
+    return {
+      unsubscribe: () => {
+        live = false;
+        subscription.unsubscribe();
+      },
+    };
+  };
+}

package/src/core/deletedRows.ts

@@ -0,0 +1,34 @@
+import type { RowData } from "@tanstack/react-table";
+import type { TMDataGridTable } from "../useTMDataGrid";
+
+/**
+ * Which rows of a table carry a deletion mark, for readers that hold the
+ * table and nothing else - `exportGrid` and the export data it builds on.
+ * The marks live in the edit engine, which those readers cannot reach; the
+ * hook registers the engine's answer per table instead. A table built without
+ * the grid has no marks.
+ */
+// Keyed on the store, not the table: `useTable` hands out a fresh shallow
+// copy of the table on every render, and every copy shares the one store.
+const sources = new WeakMap<object, (rowId: string) => boolean>();
+
+/** Registers the answer for one table; returns the unregister. */
+export function registerDeletedRows<TData extends RowData>(
+  table: TMDataGridTable<TData>,
+  isRowDeleted: (rowId: string) => boolean,
+): () => void {
+  sources.set(table.store, isRowDeleted);
+  return () => {
+    if (sources.get(table.store) === isRowDeleted) {
+      sources.delete(table.store);
+    }
+  };
+}
+
+/** Whether the row is marked for deletion under `editing.draft`. */
+export function isRowMarkedDeleted<TData extends RowData>(
+  table: TMDataGridTable<TData>,
+  rowId: string,
+): boolean {
+  return sources.get(table.store)?.(rowId) ?? false;
+}

package/src/core/dom.ts

@@ -0,0 +1,74 @@
+/**
+ * DOM checks that survive a second realm.
+ *
+ * The grid can be rendered through a portal into a window opened with
+ * `window.open`. That window is a separate JavaScript realm: its nodes and
+ * events are instances of *its* `Node`, `Element`, `HTMLInputElement` and
+ * `MouseEvent`, not the opener's. A plain `x instanceof HTMLInputElement`
+ * is therefore false for an input sitting in the grid's own window, and the
+ * check silently takes the wrong branch.
+ *
+ * Every helper here answers the same question either by duck-typing, or by
+ * taking the constructor from the realm the value itself came from.
+ */
+
+/**
+ * The window a node lives in - the realm to take its constructors from.
+ *
+ * A document made by `createHTMLDocument` has no window of its own, so the
+ * global one is the fallback.
+ */
+export function windowOf(node: Node): Window & typeof globalThis {
+  return node.ownerDocument?.defaultView ?? window;
+}
+
+/**
+ * Whether a value is a DOM node.
+ *
+ * Duck-typed on `nodeType`, because `instanceof Node` is false for a node
+ * from another realm.
+ */
+export function isNode(value: unknown): value is Node {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    typeof (value as Node).nodeType === "number"
+  );
+}
+
+/**
+ * Whether a value is an element - a node whose `nodeType` is 1
+ * (`Node.ELEMENT_NODE`), read as a number so no realm's constant is needed.
+ */
+export function isElement(value: unknown): value is Element {
+  return isNode(value) && value.nodeType === 1;
+}
+
+/** Whether a value is an HTML element, asked of its own realm's constructor. */
+export function isHTMLElement(value: unknown): value is HTMLElement {
+  return isElement(value) && value instanceof windowOf(value).HTMLElement;
+}
+
+/** Whether a value is an `<input>`, asked of its own realm's constructor. */
+export function isInputElement(value: unknown): value is HTMLInputElement {
+  return isElement(value) && value instanceof windowOf(value).HTMLInputElement;
+}
+
+/** Whether a value is a `<button>`, asked of its own realm's constructor. */
+export function isButtonElement(value: unknown): value is HTMLButtonElement {
+  return isElement(value) && value instanceof windowOf(value).HTMLButtonElement;
+}
+
+/**
+ * Whether an event is a mouse event, asked of the constructor in the event's
+ * own window.
+ *
+ * A browser-dispatched event carries that window in `view`; one built by hand
+ * may not, and its target still knows the window.
+ */
+export function isMouseEvent(event: Event): event is MouseEvent {
+  const view =
+    (event as UIEvent).view ??
+    (isNode(event.target) ? windowOf(event.target) : window);
+  return event instanceof (view as Window & typeof globalThis).MouseEvent;
+}