@ex-grid/react 0.0.0-stage → 0.2.0-rc.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 AkiraMisawa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,42 @@
-# Temporary Holding Version
+# @ex-grid/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+ExGrid for React: the Script Core's Framework Adapter, which mounts an Excel-like grid for reading money and risk numbers in a React tree.
+
+It is one of the packages of the ExGrid family: Excel-like grids, sheets, pivot tables and charts for reading
+money and risk numbers, published to npm under `@ex-grid` and to NuGet for Blazor, at one shared version.
+
+## Install
+
+```sh
+npm install @ex-grid/react react react-dom
+```
+
+`react` and `react-dom` are peer dependencies: your application provides them, at the versions `package.json` names.
+
+It depends on exactly the version of `@ex-grid/core` it was built with, so upgrade the family's packages together.
+
+What it draws reads this stylesheet. Import it once in your application:
+
+```ts
+import '@ex-grid/core/styles.css';
+```
+
+## Documentation
+
+[ExGrid on the documentation site](https://akiramisawa.github.io/ex-grid/exgrid), read for React with the switch at the top, and every
+version's [Release Notes](https://akiramisawa.github.io/ex-grid/release-notes).
+
+> **The API may still change.** While the version is `0.x`, it may change from one version to the next; each
+> version's Release Notes say what changed. A prerelease, a version with a suffix such as `-rc.1`, passed every
+> test layer in CI on the commit it was built from. A version without a suffix is published only once the
+> project's [Definition of Done](https://github.com/AkiraMisawa/ex-grid/blob/main/docs/definition-of-done.md) is
+> signed off on it.
+
+## Requirements
+
+- **Chrome or Edge.** They are the supported browsers; Safari and Firefox are out of scope.
+- **React 19.0.0 or a later 19.x.**
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,309 @@
+/**
+ * ExGrid for React: the Script Core's Framework Adapter (ADR-0350). `ExGrid` renders the element the core
+ * draws into and hands the core its props; everything the grid shows and decides is the core's.
+ *
+ * @packageDocumentation
+ */
+
+import type { CellEditorView } from '@ex-grid/core';
+import type { FilterPanelView } from '@ex-grid/core';
+import type { FindPanelView } from '@ex-grid/core';
+import { FocusEvent as FocusEvent_2 } from 'react';
+import type { FormulaBarTextView } from '@ex-grid/core';
+import type { GridCellEditorSlotContext } from '@ex-grid/core';
+import type { GridCellMessageSlotContext } from '@ex-grid/core';
+import type { GridChrome } from '@ex-grid/core';
+import type { GridColumn } from '@ex-grid/core';
+import type { GridColumnMenuSlotContext } from '@ex-grid/core';
+import type { GridContextMenuSlotContext } from '@ex-grid/core';
+import type { GridEditorCompletionSlotContext } from '@ex-grid/core';
+import type { GridFilterPanelSlotContext } from '@ex-grid/core';
+import type { GridFindPanelSlotContext } from '@ex-grid/core';
+import type { GridFormulaBarTextSlotContext } from '@ex-grid/core';
+import { GridHandle } from '@ex-grid/core';
+import type { GridLoadingIndicatorSlotContext } from '@ex-grid/core';
+import type { GridMenuSlotContext } from '@ex-grid/core';
+import type { GridNameBoxSlotContext } from '@ex-grid/core';
+import { GridOptions } from '@ex-grid/core';
+import type { GridSelectionSummarySlotContext } from '@ex-grid/core';
+import type { GridTemplateCell } from '@ex-grid/core';
+import { KeyboardEvent as KeyboardEvent_2 } from 'react';
+import { MouseEvent as MouseEvent_2 } from 'react';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+import { Ref } from 'react';
+
+/** What {@link useCellEditor} hands the editor's contents. */
+export declare interface CellEditorHandles {
+    /** What the editor shows besides its text: the mode, a Reject's sentence, a pending commit. */
+    readonly view: CellEditorView;
+    /** Takes the text field, which the core reads and writes, and which takes the keyboard as the editor opens. */
+    readonly field: (control: HTMLInputElement | HTMLTextAreaElement | null) => void;
+    /** The text the field opens holding: hand it to the field as its default, and no value, since the text is the
+     * core's to read and write (ADR-0010). */
+    readonly defaultValue: string;
+}
+
+/** The ExGrid's Chrome as the core takes it: each slot's render function as a mount function that renders it
+ * through the ExGrid's portals (ADR-0350 section 9). A render function handed again in another `chrome` keeps the
+ * mount function `made` holds for it, so a part the core keeps standing, the Formula Bar's fields, is not drawn again.
+ * Which slots there are is the core's to check, as it checks a mount function handed it directly; a render function
+ * that is not a function is named here, in React's terms. Exported for the family's Framework Adapters, whose products
+ * hand ExGrid's Chrome on to the grids they draw, not for a Consumer. */
+export declare function chromeMounts<Row>(given: ExGridChrome<Row> | undefined, portals: GridPortals, made: ChromeMountsMade): GridChrome<Row> | undefined;
+
+/** The mount functions made for an ExGrid's render functions, by slot: one handed again is mounted by the same. */
+export declare type ChromeMountsMade = Map<string, {
+    readonly render: unknown;
+    readonly portals: GridPortals;
+    readonly mount: (slot: HTMLElement, context: unknown) => () => void;
+}>;
+
+/** The props {@link useEditorCompletion} hands a candidate: spread them onto the element that draws it. */
+export declare interface CompletionOptionProps {
+    /** The id the editor names while the candidate is chosen. */
+    readonly id: string;
+    /** A candidate is an option of the list. */
+    readonly role: 'option';
+    /** Whether the candidate is the chosen one. */
+    readonly 'aria-selected': boolean;
+    /** A click accepts the candidate; the core's box takes the press, keeping the keyboard in the editor. */
+    readonly onClick: () => void;
+}
+
+/** What {@link useEditorCompletion} hands the completion list. */
+export declare interface EditorCompletionHandles {
+    /** The props of the list: spread them onto the element holding the candidates. */
+    readonly list: {
+        readonly id: string;
+        readonly role: 'listbox';
+    };
+    /** The props of the candidate at an index. */
+    readonly option: (index: number) => CompletionOptionProps;
+}
+
+/**
+ * An Excel-like grid. The element it renders is the grid's instance root, which the Script Core owns; every
+ * render hands the core the props again, and what did not change costs nothing (ADR-0003).
+ */
+export declare function ExGrid<Row>(props: ExGridProps<Row>): ReactElement;
+
+/**
+ * What a ref to an ExGrid reaches: the Script Core's grid handle, less what the adapter itself does with it
+ * (taking the props again, and destroying the grid on unmount). Asked of a grid not mounted, it throws, but for
+ * the keyboard's hand-offs: `returnKeyboard` then does nothing, and `handKeyboardTo` focuses the control itself
+ * (DC-61).
+ */
+export declare type ExGridApi<Row> = Omit<GridHandle<Row>, 'update' | 'destroy' | 'holdSettled'>;
+
+/**
+ * The Chrome slots an ExGrid takes, each a render function of what the core hands that slot (ADR-0390 section 3).
+ * A slot not given is drawn by the built-in Chrome. A render function is read when its part opens: a part standing
+ * keeps the render it opened with. Its answer is rendered as a component of its own, so it may hold state, kept
+ * while the part stands, and a hook belongs in a component it renders.
+ */
+export declare interface ExGridChrome<Row> {
+    /** The column menu's commands (ADR-0010, ADR-0044), drawn with {@link useMenuItems}. */
+    readonly columnMenu?: (context: GridColumnMenuSlotContext) => ReactNode;
+    /** The Context Menu (ADR-0036), drawn with {@link useMenuItems}. */
+    readonly contextMenu?: (context: GridContextMenuSlotContext<Row>) => ReactNode;
+    /** A column's filter panel, under the column menu's commands (ADR-0009, ADR-0044), drawn with {@link useFilterPanel}. */
+    readonly filterPanel?: (context: GridFilterPanelSlotContext) => ReactNode;
+    /** The find panel and its Replace (ADR-0055, ADR-0332), drawn with {@link useFindPanel}. */
+    readonly findPanel?: (context: GridFindPanelSlotContext) => ReactNode;
+    /** The Cell Editor's field (ADR-0010), drawn with {@link useCellEditor}. */
+    readonly cellEditor?: (context: GridCellEditorSlotContext) => ReactNode;
+    /** A cell's message (ADR-0034): its text, drawn in the core's box below the cell. */
+    readonly cellMessage?: (context: GridCellMessageSlotContext) => ReactNode;
+    /** The loading indicator (ADR-0010), at the grid's foot: nothing while nothing loads. */
+    readonly loadingIndicator?: (context: GridLoadingIndicatorSlotContext) => ReactNode;
+    /** The Selection Summary's figures (ADR-0130), drawn in the core's box in the status line. */
+    readonly selectionSummary?: (context: GridSelectionSummarySlotContext) => ReactNode;
+    /** The Formula Bar's text field (ADR-0051), drawn with {@link useFormulaBarText}. Another render function draws
+     * the field again: hold the function in a constant or a memo, not inline. */
+    readonly formulaBarText?: (context: GridFormulaBarTextSlotContext) => ReactNode;
+    /** The Formula Bar's Name Box (ADR-0051), drawn with {@link useNameBox}. */
+    readonly nameBox?: (context: GridNameBoxSlotContext) => ReactNode;
+    /** The completion list and argument hint beneath the editor (ADR-0051), drawn with {@link useEditorCompletion}. */
+    readonly editorCompletion?: (context: GridEditorCompletionSlotContext) => ReactNode;
+}
+
+/**
+ * An ExGrid's props: the Script Core's options, whole. `locale` is the browser's language where not given,
+ * read once when the grid is made (ADR-0370 section 10); the core never reads it on its own. `temporal` is
+ * never the browser's: a grid with a Date column whose filter is offered is given one on every browser
+ * alike, or refused on every browser alike (ADR-0350 section 16).
+ */
+export declare type ExGridProps<Row> = Omit<GridOptions<Row>, 'chrome'> & {
+    /** A ref to what the Consumer may ask of the grid it rendered. */
+    readonly ref?: Ref<ExGridApi<Row>>;
+    /** The Chrome slots a Wrapper renders, each a render function of its context (ADR-0390). */
+    readonly chrome?: ExGridChrome<Row>;
+};
+
+/** What {@link useFilterPanel} hands a filter panel's contents. */
+export declare interface FilterPanelHandles {
+    /** What the panel shows now, drawn again at each change the core makes to it. */
+    readonly view: FilterPanelView;
+    /** Takes the panel's first control: Tab on a command focuses it (ADR-0044). */
+    readonly first: (control: HTMLElement | null) => void;
+    /** Takes the panel's last control: Shift+Tab on a command wraps there (ADR-0044). */
+    readonly last: (control: HTMLElement | null) => void;
+    /** Takes the field a search is typed into, Excel's E: the value list's search box, or the first condition's
+     * value where no list stands (ADR-0044). */
+    readonly search: (control: HTMLElement | null) => void;
+    /** The value list's key handler, on the element that holds its checkboxes and "(Select All)", never on a text
+     * field: Excel's letters run their command through the core, and their default is prevented (ADR-0044). */
+    readonly onValueListKeyDown: (event: KeyboardEvent_2) => void;
+}
+
+/** What {@link useFindPanel} hands a find panel's contents. */
+export declare interface FindPanelHandles {
+    /** What the panel shows now, drawn again at each change the core makes to it. */
+    readonly view: FindPanelView;
+    /** Takes the find field, which each request of the core's puts the keyboard on, its text selected (FD-1). */
+    readonly field: (control: HTMLElement | null) => void;
+}
+
+/** What {@link useFormulaBarText} hands the Formula Bar's text field. */
+export declare interface FormulaBarTextHandles {
+    /** What the field shows besides its text: whether it takes typing, and whether its text is borrowed. */
+    readonly view: FormulaBarTextView;
+    /** Takes the text field, which the core reads and writes. Draw it uncontrolled, with no value. */
+    readonly field: (control: HTMLInputElement | HTMLTextAreaElement | null) => void;
+}
+
+/**
+ * The portals of one ExGrid. The core mounts and takes away content in its own pass, outside React; each change
+ * asks for one render of the ExGrid, made at once in the next microtask, so a slot's content stands, and its
+ * control has taken a keyboard it was asked to, before the browser hands over the next input (the spine's sixth
+ * rule).
+ *
+ * Exported for the family's Framework Adapters (`@ex-grid/sheet-react`, `@ex-grid/pivot-react`,
+ * `@ex-grid/chart-react`), whose components render a product's Chrome slots the same way, not for a Consumer: the
+ * component holds one for its lifetime, renders its {@link GridPortals.elements} beside its root, and calls
+ * {@link GridPortals.begin} and {@link GridPortals.end} as its product is made and goes.
+ */
+export declare class GridPortals {
+    #private;
+    /** `render` asks the component holding the portals to render again, once per change. */
+    constructor(render: () => void);
+    /** A slot's content, made once per mount: the ExGrid rendering again hands React the same element, and every
+     * slot whose content was not mounted again skips its render (ADR-0003). */
+    set(id: string, slot: HTMLElement, show: () => ReactNode): void;
+    /** Takes away the content set for `id`. */
+    delete(id: string): void;
+    /** Mounts `show` into `slot`, keyed by the slot, and answers the cleanup the core calls: the core's mount
+     * function's shape, `(slot, context) => cleanup` (ADR-0350 section 9). */
+    mount(slot: HTMLElement, show: () => ReactNode): () => void;
+    /** A grid is made, after one this component held went, as StrictMode makes it again: it renders again. */
+    begin(): void;
+    /** The grid is going, and its content with it: nothing renders for it again. */
+    end(): void;
+    /** The portals, as the ExGrid renders them beside its root. */
+    elements(): ReactElement[];
+}
+
+/** The props {@link useMenuItems} hands each item: spread them onto the control that draws it. */
+export declare interface MenuItemProps {
+    /** The item's role in the menu the core named. */
+    readonly role: 'menuitem';
+    /** Takes the control the item is drawn as, which the hook focuses. */
+    readonly ref: (control: HTMLElement | null) => void;
+    /** Whether the command may not run: a disabled item is shown, and never focused or run. */
+    readonly disabled: boolean;
+    /** The same, for assistive technology, on a control that is not a button. */
+    readonly 'aria-disabled': boolean;
+    /** Focusable by the menu, never a tab stop: Tab is the menu's key (ADR-0039). */
+    readonly tabIndex: -1;
+    /** Marks an enabled item as one of the grid's own controls whose click and keys it takes in turn (ADR-0240). */
+    readonly 'data-ex-claims': 'click keydown' | undefined;
+    /** Hands every key on the item to the core, and does what it answers. */
+    readonly onKeyDown: (event: KeyboardEvent_2) => void;
+    /** Runs the command, as the core runs it. */
+    readonly onClick: (event: MouseEvent_2) => void;
+    /** Tells the core the item took DOM focus, so the menu's place follows it (ADR-0039). */
+    readonly onFocus: (event: FocusEvent_2) => void;
+}
+
+/** What {@link useNameBox} hands the Name Box. */
+export declare interface NameBoxHandles {
+    /** Takes the text input, which the core reads and writes. Draw it uncontrolled, with no value: an input, since
+     * Enter in a textarea submits nothing. */
+    readonly field: (control: HTMLInputElement | null) => void;
+}
+
+/**
+ * A Template Column (ADR-0020): its cells render `render`'s answer in place of their value's text, which is
+ * still read for sorting, filtering, Find and copy. `render` is handed the cell: its row, its column, and a
+ * focus request, non-zero on exactly one render after Space engaged the cell, which a control answers by
+ * handing itself to `takeKeyboard` from a layout effect (ADR-0037). A component it renders keeps its state
+ * while its cell is painted, through a new version of its row where the source has a Row Key; without one a
+ * new instance is another row (ADR-0140), rendered afresh. `render` only makes elements: a hook belongs in
+ * the component it renders. Make the column once, outside the render
+ * of the component that holds the grid, as every column: a new column is a new declaration, and every row
+ * paints again (ADR-0003).
+ */
+export declare function templateColumn<Row>(column: TemplateColumnOptions<Row>, render: (cell: GridTemplateCell<Row>) => ReactNode): GridColumn<Row>;
+
+/** A Template Column's declaration: a column's, whose cells React renders in place of their value's text. */
+export declare type TemplateColumnOptions<Row> = Omit<GridColumn<Row>, 'template' | 'actions'>;
+
+/**
+ * Draws the Cell Editor's slot from its context (ADR-0390 section 3): one text field, uncontrolled, opening with the
+ * core's text, which the core reads at each commit and writes where it types itself, as from the Formula Bar. The
+ * field takes the keyboard once drawn, the caret at its end. Enter, Tab, Escape, F2 and Overwrite's arrows are the
+ * core's, so the contents draw no key handler of their own.
+ */
+export declare function useCellEditor(context: GridCellEditorSlotContext): CellEditorHandles;
+
+/**
+ * Draws the completion slot from its context (ADR-0390 section 3): the ids the editor names, and a click on a
+ * candidate accepting it. The core's box keeps the keyboard in the editor, and ↑, ↓, Tab and Escape are the
+ * editor's, so the contents draw no key handler and take no focus.
+ */
+export declare function useEditorCompletion(context: GridEditorCompletionSlotContext): EditorCompletionHandles;
+
+/**
+ * Draws a filter panel slot from its context (ADR-0390 section 3): the core's view, read again at each change, and
+ * the control the core asks for the keyboard. Each choice goes to the context's setter, which is what it means; the
+ * hook focuses the control a request names, through the core, once it is drawn, and answers each request once,
+ * whichever component of the contents holds the hook when it comes.
+ */
+export declare function useFilterPanel(context: GridFilterPanelSlotContext): FilterPanelHandles;
+
+/**
+ * Draws the find panel slot from its context (ADR-0390 section 3): the core's view, read again at each change, and
+ * the find field, which takes the keyboard at each request of the core's, answered once. Each change and step goes to
+ * the context; Enter in a field is the core's form's, so the contents draw no form and no key handler of their own.
+ */
+export declare function useFindPanel(context: GridFindPanelSlotContext): FindPanelHandles;
+
+/**
+ * Draws the Formula Bar's text slot from its context (ADR-0390 section 3): one text field, uncontrolled, which the
+ * core fills with the Focus cell's text, names and makes read only, and whose typing is the Cell Editor's (ADR-0051).
+ * Enter, Tab, Escape and F2 are the core's, so the contents draw no key handler of their own.
+ */
+export declare function useFormulaBarText(context: GridFormulaBarTextSlotContext): FormulaBarTextHandles;
+
+/** Holds an ExGrid's portals, and a render of the component that asks for one; a family adapter's component holds
+ * its product's the same way. */
+export declare function useGridPortals(): GridPortals;
+
+/**
+ * Draws a menu slot's items from its context (ADR-0390 section 3): answers the props of the item at `index` of
+ * `context.commands`, one item per command, in that order. Every key on an item is the core's table against the
+ * place the core keeps, and its default is prevented: a move focuses the item it names, a run invokes the command,
+ * a close closes the menu, and a move into the column's filter the core has made. The first enabled item takes the
+ * keyboard at each focus request, without scrolling the menu (ADR-0039).
+ */
+export declare function useMenuItems(context: GridMenuSlotContext): (index: number) => MenuItemProps;
+
+/**
+ * Draws the Name Box's slot from its context (ADR-0390 section 3): one text field, uncontrolled, which the core
+ * fills with the Focus's name. Enter is the core's form's and Escape the core's, so the contents draw no form and no
+ * key handler of their own.
+ */
+export declare function useNameBox(context: GridNameBoxSlotContext): NameBoxHandles;
+
+export { }

package/dist/index.js

@@ -0,0 +1,371 @@
+// src/ex-grid.ts
+import { createElement as createElement2, Fragment, useImperativeHandle, useLayoutEffect as useLayoutEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
+import { createGrid } from "@ex-grid/core";
+
+// src/chrome.ts
+import {
+  useLayoutEffect,
+  useRef,
+  useState,
+  useSyncExternalStore
+} from "react";
+import { answerMenuKey, answerValueListKey, takeFilterFocus, takeFindFocus, takeMenuFocus } from "@ex-grid/core";
+function chromeMounts(given, portals, made) {
+  const chrome = given;
+  if (chrome === void 0) return void 0;
+  if (typeof chrome !== "object" || chrome === null) {
+    throw new TypeError("chrome is an object of Chrome slots, each a render function of its context (ADR-0390).");
+  }
+  return Object.fromEntries(Object.entries(chrome).map(([name, render]) => {
+    if (render === void 0) return [name, void 0];
+    if (typeof render !== "function") throw new TypeError(`chrome.${name} is a render function of the slot's context (ADR-0390).`);
+    const before = made.get(name);
+    if (before?.render === render && before.portals === portals) return [name, before.mount];
+    const mount = (slot, context) => portals.mount(slot, () => {
+      const node = Reflect.apply(render, void 0, [context]);
+      return node;
+    });
+    made.set(name, { render, portals, mount });
+    return [name, mount];
+  }));
+}
+function useMenuItems(context) {
+  const items = useRef([]);
+  const answered = useRef(void 0);
+  const drawn = (index) => {
+    const item = items.current[index];
+    if (item === void 0 || item === null) {
+      throw new Error(`The menu's item ${index} is not drawn: spread useMenuItems' props onto the control of every command, and forward its ref.`);
+    }
+    return item;
+  };
+  useLayoutEffect(() => {
+    if (answered.current === context.focusRequest) return;
+    answered.current = context.focusRequest;
+    takeMenuFocus(context, drawn);
+  }, [context]);
+  return (index) => {
+    const command = context.commands[index];
+    if (command === void 0) {
+      throw new RangeError(`useMenuItems is asked for item ${index} of a menu of ${context.commands.length} commands.`);
+    }
+    return {
+      role: "menuitem",
+      ref: (control) => {
+        items.current[index] = control;
+      },
+      disabled: !command.enabled,
+      "aria-disabled": !command.enabled,
+      tabIndex: -1,
+      "data-ex-claims": command.enabled ? "click keydown" : void 0,
+      onKeyDown: (event) => {
+        if (within(event)) answerMenuKey(context, event, drawn);
+      },
+      onClick: (event) => {
+        if (within(event)) command.invoke();
+      },
+      onFocus: (event) => {
+        if (within(event)) context.itemFocused(index);
+      }
+    };
+  };
+}
+function within(event) {
+  return event.target instanceof Node && event.currentTarget instanceof Node && event.currentTarget.contains(event.target);
+}
+function useFilterPanel(context) {
+  const view = useSyncExternalStore(context.subscribe, context.view);
+  const controls = useRef({ first: null, last: null, search: null });
+  useLayoutEffect(() => {
+    if (context.focusTarget === void 0 || answeredRequests.has(context)) return;
+    answeredRequests.add(context);
+    takeFilterFocus(context, (target) => {
+      const control = controls.current[target];
+      return control === null ? void 0 : control;
+    });
+  }, [context]);
+  const [refs] = useState(() => {
+    const taking = (target) => (control) => {
+      controls.current[target] = control;
+    };
+    return { first: taking("first"), last: taking("last"), search: taking("search") };
+  });
+  return {
+    view,
+    ...refs,
+    onValueListKeyDown: (event) => {
+      if (within(event)) answerValueListKey(context, event.nativeEvent);
+    }
+  };
+}
+var answeredRequests = /* @__PURE__ */ new WeakSet();
+function useFindPanel(context) {
+  const view = useSyncExternalStore(context.subscribe, context.view);
+  const control = useRef(null);
+  useLayoutEffect(() => {
+    if (answeredFinds.has(context)) return;
+    answeredFinds.add(context);
+    if (control.current === null) throw new Error("The find panel's field is not drawn: hand useFindPanel's `field` ref to the find field.");
+    takeFindFocus(context, control.current);
+  }, [context]);
+  const [field] = useState(() => (element) => {
+    control.current = element;
+  });
+  return { view, field };
+}
+var answeredFinds = /* @__PURE__ */ new WeakSet();
+function useCellEditor(context) {
+  const view = useSyncExternalStore(context.subscribe, context.view);
+  const control = useRef(null);
+  const handed = useRef(null);
+  useLayoutEffect(() => {
+    const field2 = control.current;
+    if (!answeredEditors.has(context)) {
+      answeredEditors.add(context);
+      if (field2 === null) throw new Error("The cell editor's field is not drawn: hand useCellEditor's `field` ref to the text field.");
+    } else if (field2 === null || field2 === handed.current) {
+      return;
+    }
+    handed.current = field2;
+    context.takeFocus(field2);
+  });
+  const [field] = useState(() => (element) => {
+    control.current = element;
+  });
+  return { view, field, defaultValue: context.initialText };
+}
+var answeredEditors = /* @__PURE__ */ new WeakSet();
+function useHandedField(takeField, name) {
+  const control = useRef(null);
+  const handed = useRef(null);
+  useLayoutEffect(() => {
+    const field2 = control.current;
+    if (field2 === null && handed.current === null) throw new Error(`The ${name}'s field is not drawn: hand the hook's \`field\` ref to the text field.`);
+    if (field2 === null || field2 === handed.current) return;
+    handed.current = field2;
+    takeField(field2);
+  });
+  const [field] = useState(() => (element) => {
+    control.current = element;
+  });
+  return field;
+}
+function useFormulaBarText(context) {
+  const view = useSyncExternalStore(context.subscribe, context.view);
+  const field = useHandedField(context.takeField, "Formula Bar's text");
+  return { view, field };
+}
+function useNameBox(context) {
+  return { field: useHandedField(context.takeField, "Name Box") };
+}
+function useEditorCompletion(context) {
+  return {
+    list: { id: context.listId, role: "listbox" },
+    option: (index) => ({
+      id: context.optionId(index),
+      role: "option",
+      "aria-selected": index === context.selected,
+      onClick: () => {
+        context.accept(index);
+      }
+    })
+  };
+}
+
+// src/portals.ts
+import { createElement, useReducer } from "react";
+import { createPortal, flushSync } from "react-dom";
+function SlotContent({ show }) {
+  return show();
+}
+var GridPortals = class {
+  #portals = /* @__PURE__ */ new Map();
+  #render;
+  #owed = false;
+  #live = true;
+  /** `render` asks the component holding the portals to render again, once per change. */
+  constructor(render) {
+    this.#render = render;
+  }
+  /** A slot's content, made once per mount: the ExGrid rendering again hands React the same element, and every
+   * slot whose content was not mounted again skips its render (ADR-0003). */
+  set(id, slot, show) {
+    this.#portals.set(id, createPortal(createElement(SlotContent, { show }), slot, id));
+    this.#owe();
+  }
+  /** Takes away the content set for `id`. */
+  delete(id) {
+    this.#portals.delete(id);
+    this.#owe();
+  }
+  /** Mounts `show` into `slot`, keyed by the slot, and answers the cleanup the core calls: the core's mount
+   * function's shape, `(slot, context) => cleanup` (ADR-0350 section 9). */
+  mount(slot, show) {
+    const id = slotIdOf(slot);
+    this.set(id, slot, show);
+    return () => {
+      this.delete(id);
+    };
+  }
+  /** A grid is made, after one this component held went, as StrictMode makes it again: it renders again. */
+  begin() {
+    this.#live = true;
+  }
+  /** The grid is going, and its content with it: nothing renders for it again. */
+  end() {
+    this.#live = false;
+    this.#portals.clear();
+  }
+  /** The portals, as the ExGrid renders them beside its root. */
+  elements() {
+    return [...this.#portals.values()];
+  }
+  #owe() {
+    if (this.#owed || !this.#live) return;
+    this.#owed = true;
+    queueMicrotask(() => {
+      this.#owed = false;
+      if (this.#live) flushSync(this.#render);
+    });
+  }
+};
+var portalsOf = /* @__PURE__ */ new WeakMap();
+var slotIds = /* @__PURE__ */ new WeakMap();
+var slots = 0;
+function slotIdOf(slot) {
+  let id = slotIds.get(slot);
+  if (id === void 0) {
+    slots += 1;
+    id = `ex-slot-${slots}`;
+    slotIds.set(slot, id);
+  }
+  return id;
+}
+function useGridPortals() {
+  const [, rendered] = useReducer((count) => count + 1, 0);
+  const [portals] = useReducer((held) => held, void 0, () => new GridPortals(rendered));
+  return portals;
+}
+function holdPortals(root, portals) {
+  portalsOf.set(root, portals);
+}
+function portalsAround(slot) {
+  for (let at = slot.parentElement; at !== null; at = at.parentElement) {
+    const portals = portalsOf.get(at);
+    if (portals !== void 0) return portals;
+  }
+  return void 0;
+}
+
+// src/ex-grid.ts
+function withLocale(props, browserLocale) {
+  return props.locale === void 0 ? { ...props, locale: browserLocale } : props;
+}
+function ExGrid(props) {
+  const { ref, chrome, ...options } = props;
+  const element = useRef2(null);
+  const grid = useRef2(void 0);
+  const browserLocale = useRef2(void 0);
+  const portals = useGridPortals();
+  const [made] = useState2(() => /* @__PURE__ */ new Map());
+  const mounts = useMemo(() => chromeMounts(chrome, portals, made), [chrome, portals, made]);
+  useLayoutEffect2(() => {
+    const root = element.current;
+    if (root === null) throw new Error("Internal: React mounted no element for the grid to draw into.");
+    holdPortals(root, portals);
+    browserLocale.current ??= navigator.language;
+    const taken = withLocale(mounts === void 0 ? options : { ...options, chrome: mounts }, browserLocale.current);
+    if (grid.current === void 0) {
+      portals.begin();
+      grid.current = createGrid(root, taken);
+    } else {
+      grid.current.update(taken);
+    }
+  });
+  useImperativeHandle(ref, () => ({
+    placeSelection: (range, focus, rowSequenceVersion) => mounted(grid.current).placeSelection(range, focus, rowSequenceVersion),
+    placeMatch: (cell, rowSequenceVersion) => mounted(grid.current).placeMatch(cell, rowSequenceVersion),
+    readView: () => mounted(grid.current).readView(),
+    announce: (sentence) => {
+      mounted(grid.current).announce(sentence);
+    },
+    writePointedText: (text) => mounted(grid.current).writePointedText(text),
+    takeBackPointedText: () => mounted(grid.current).takeBackPointedText(),
+    showViewWith: (view, rowSequenceVersion, place) => {
+      mounted(grid.current).showViewWith(view, rowSequenceVersion, place);
+    },
+    showNewView: (rowSequenceVersion, place) => {
+      mounted(grid.current).showNewView(rowSequenceVersion, place);
+    },
+    // Before the grid is drawn no edit can be open on it.
+    readEditText: () => grid.current?.readEditText(),
+    focus: () => {
+      mounted(grid.current).focus();
+    },
+    // Before the grid is drawn there is no keyboard of its own to give back, and the control takes it by its
+    // own focus, as the C# core's does before it attaches (DC-61).
+    returnKeyboard: (from) => {
+      grid.current?.returnKeyboard(from);
+    },
+    handKeyboardTo: (control, how) => {
+      if (grid.current === void 0) control.focus({ preventScroll: how?.preventScroll === true });
+      else grid.current.handKeyboardTo(control, how);
+    },
+    keyName: (event) => mounted(grid.current).keyName(event),
+    openPopover: (content, label, closed) => mounted(grid.current).openPopover(content, label, closed),
+    closePopover: () => {
+      mounted(grid.current).closePopover();
+    },
+    get canSummarize() {
+      return mounted(grid.current).canSummarize;
+    },
+    refreshSummary: () => {
+      mounted(grid.current).refreshSummary();
+    },
+    inOrder: (handling) => mounted(grid.current).inOrder(handling),
+    cancellableInOrder: (handling, cancelledTooLate) => mounted(grid.current).cancellableInOrder(handling, cancelledTooLate)
+  }), []);
+  useLayoutEffect2(() => () => {
+    portals.end();
+    grid.current?.destroy();
+    grid.current = void 0;
+    browserLocale.current = void 0;
+  }, [portals]);
+  return createElement2(Fragment, null, createElement2("div", { ref: element }), ...portals.elements());
+}
+function mounted(grid) {
+  if (grid === void 0) throw new Error("This ExGrid is not mounted: a grid not drawn is asked nothing.");
+  return grid;
+}
+
+// src/template-column.ts
+function templateColumn(column, render) {
+  if (typeof render !== "function") {
+    throw new TypeError(`Column '${column.name}': render is a function of the cell, answering what it shows.`);
+  }
+  return Object.freeze({
+    ...column,
+    template: (slot, cell) => {
+      const portals = portalsAround(slot);
+      if (portals === void 0) {
+        throw new TypeError(`Column '${column.name}' is a React Template Column, which renders only inside an ExGrid of @ex-grid/react.`);
+      }
+      return portals.mount(slot, () => render(cell));
+    }
+  });
+}
+export {
+  ExGrid,
+  GridPortals,
+  chromeMounts,
+  templateColumn,
+  useCellEditor,
+  useEditorCompletion,
+  useFilterPanel,
+  useFindPanel,
+  useFormulaBarText,
+  useGridPortals,
+  useMenuItems,
+  useNameBox
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/ex-grid.ts", "../src/chrome.ts", "../src/portals.ts", "../src/template-column.ts"],
+  "sourcesContent": ["// The React Framework Adapter (ADR-0350 section 3): it renders the element the Script Core draws into,\n// hands the core its props, and unmounts it. It holds no state of the grid's, draws nothing inside the\n// instance root, and decides nothing. The rows are never React's: a component per row would repeat,\n// through `memo`, the fight with re-rendering that ADR-0003 measured.\n\nimport { createElement, Fragment, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, type ReactElement, type Ref } from 'react';\nimport { createGrid, type GridHandle, type GridOptions } from '@ex-grid/core';\nimport { chromeMounts, type ChromeMountsMade, type ExGridChrome } from './chrome';\nimport { holdPortals, useGridPortals } from './portals';\n\n/**\n * An ExGrid's props: the Script Core's options, whole. `locale` is the browser's language where not given,\n * read once when the grid is made (ADR-0370 section 10); the core never reads it on its own. `temporal` is\n * never the browser's: a grid with a Date column whose filter is offered is given one on every browser\n * alike, or refused on every browser alike (ADR-0350 section 16).\n */\nexport type ExGridProps<Row> = Omit<GridOptions<Row>, 'chrome'> & {\n    /** A ref to what the Consumer may ask of the grid it rendered. */\n    readonly ref?: Ref<ExGridApi<Row>>;\n    /** The Chrome slots a Wrapper renders, each a render function of its context (ADR-0390). */\n    readonly chrome?: ExGridChrome<Row>;\n};\n\n/**\n * What a ref to an ExGrid reaches: the Script Core's grid handle, less what the adapter itself does with it\n * (taking the props again, and destroying the grid on unmount). Asked of a grid not mounted, it throws, but for\n * the keyboard's hand-offs: `returnKeyboard` then does nothing, and `handKeyboardTo` focuses the control itself\n * (DC-61).\n */\nexport type ExGridApi<Row> = Omit<GridHandle<Row>, 'update' | 'destroy' | 'holdSettled'>;\n\n/** The props as the core takes them: the browser's language where the Consumer gave no locale. */\nfunction withLocale<Row>(props: GridOptions<Row>, browserLocale: string): GridOptions<Row> {\n    return props.locale === undefined ? { ...props, locale: browserLocale } : props;\n}\n\n/**\n * An Excel-like grid. The element it renders is the grid's instance root, which the Script Core owns; every\n * render hands the core the props again, and what did not change costs nothing (ADR-0003).\n */\nexport function ExGrid<Row>(props: ExGridProps<Row>): ReactElement {\n    const { ref, chrome, ...options } = props;\n    const element = useRef<HTMLDivElement>(null);\n    const grid = useRef<GridHandle<Row> | undefined>(undefined);\n    const browserLocale = useRef<string | undefined>(undefined);\n    // The Template cells' content and the Chrome slots', rendered by this component into the slots the core keeps\n    // (ADR-0020, ADR-0390).\n    const portals = useGridPortals();\n    // Made again only when the Consumer hands another chrome: the ExGrid renders for every portal change. A render\n    // function handed again keeps its mount function.\n    const [made] = useState<ChromeMountsMade>(() => new Map());\n    const mounts = useMemo(() => chromeMounts(chrome, portals, made), [chrome, portals, made]);\n    // Drawn before the browser paints, so a mounted grid is never seen empty.\n    useLayoutEffect(() => {\n        const root = element.current;\n        if (root === null) throw new Error('Internal: React mounted no element for the grid to draw into.');\n        holdPortals(root, portals);\n        browserLocale.current ??= navigator.language;\n        const taken = withLocale(mounts === undefined ? options : { ...options, chrome: mounts }, browserLocale.current);\n        if (grid.current === undefined) {\n            portals.begin();\n            grid.current = createGrid(root, taken);\n        } else {\n            grid.current.update(taken);\n        }\n    });\n    useImperativeHandle(ref, () => ({\n        placeSelection: (range, focus, rowSequenceVersion) => mounted(grid.current).placeSelection(range, focus, rowSequenceVersion),\n        placeMatch: (cell, rowSequenceVersion) => mounted(grid.current).placeMatch(cell, rowSequenceVersion),\n        readView: () => mounted(grid.current).readView(),\n        announce: (sentence) => { mounted(grid.current).announce(sentence); },\n        writePointedText: (text) => mounted(grid.current).writePointedText(text),\n        takeBackPointedText: () => mounted(grid.current).takeBackPointedText(),\n        showViewWith: (view, rowSequenceVersion, place) => { mounted(grid.current).showViewWith(view, rowSequenceVersion, place); },\n        showNewView: (rowSequenceVersion, place) => { mounted(grid.current).showNewView(rowSequenceVersion, place); },\n        // Before the grid is drawn no edit can be open on it.\n        readEditText: () => grid.current?.readEditText(),\n        focus: () => { mounted(grid.current).focus(); },\n        // Before the grid is drawn there is no keyboard of its own to give back, and the control takes it by its\n        // own focus, as the C# core's does before it attaches (DC-61).\n        returnKeyboard: (from) => { grid.current?.returnKeyboard(from); },\n        handKeyboardTo: (control, how) => {\n            if (grid.current === undefined) control.focus({ preventScroll: how?.preventScroll === true });\n            else grid.current.handKeyboardTo(control, how);\n        },\n        keyName: (event) => mounted(grid.current).keyName(event),\n        openPopover: (content, label, closed) => mounted(grid.current).openPopover(content, label, closed),\n        closePopover: () => { mounted(grid.current).closePopover(); },\n        get canSummarize() {\n            return mounted(grid.current).canSummarize;\n        },\n        refreshSummary: () => { mounted(grid.current).refreshSummary(); },\n        inOrder: (handling) => mounted(grid.current).inOrder(handling),\n        cancellableInOrder: (handling, cancelledTooLate) => mounted(grid.current).cancellableInOrder(handling, cancelledTooLate),\n    }), []);\n    useLayoutEffect(() => () => {\n        // The content goes with the grid, and nothing renders for it again.\n        portals.end();\n        grid.current?.destroy();\n        grid.current = undefined;\n        browserLocale.current = undefined;\n    }, [portals]);\n    return createElement(Fragment, null, createElement('div', { ref: element }), ...portals.elements());\n}\n\nfunction mounted<Row>(grid: GridHandle<Row> | undefined): GridHandle<Row> {\n    if (grid === undefined) throw new Error('This ExGrid is not mounted: a grid not drawn is asked nothing.');\n    return grid;\n}\n", "// The Chrome slots for React (ADR-0350 section 3, ADR-0390 section 3): a Wrapper, or a Consumer's own design\n// system, renders a part of the grid's chrome in place of the built-in one, as a render function of what the core\n// hands the slot. The ExGrid draws it through a portal into the slot the core made. What the part means stays\n// the core's: the hooks here carry a key, a click and a focus request to the core and do what it answers, so a\n// Wrapper draws its own components and decides nothing.\n\nimport {\n    useLayoutEffect, useRef, useState, useSyncExternalStore, type FocusEvent as ReactFocusEvent, type KeyboardEvent as ReactKeyboardEvent,\n    type MouseEvent as ReactMouseEvent, type ReactNode, type SyntheticEvent,\n} from 'react';\nimport { answerMenuKey, answerValueListKey, takeFilterFocus, takeFindFocus, takeMenuFocus } from '@ex-grid/core';\nimport type {\n    CellEditorView, FilterPanelView, FindPanelView, FormulaBarTextView, GridCellEditorSlotContext, GridCellMessageSlotContext, GridChrome,\n    GridColumnMenuSlotContext, GridContextMenuSlotContext, GridEditorCompletionSlotContext, GridFilterPanelSlotContext, GridFindPanelSlotContext,\n    GridFormulaBarTextSlotContext, GridLoadingIndicatorSlotContext, GridMenuSlotContext, GridNameBoxSlotContext, GridSelectionSummarySlotContext,\n} from '@ex-grid/core';\nimport type { GridPortals } from './portals';\n\n/**\n * The Chrome slots an ExGrid takes, each a render function of what the core hands that slot (ADR-0390 section 3).\n * A slot not given is drawn by the built-in Chrome. A render function is read when its part opens: a part standing\n * keeps the render it opened with. Its answer is rendered as a component of its own, so it may hold state, kept\n * while the part stands, and a hook belongs in a component it renders.\n */\nexport interface ExGridChrome<Row> {\n    /** The column menu's commands (ADR-0010, ADR-0044), drawn with {@link useMenuItems}. */\n    readonly columnMenu?: (context: GridColumnMenuSlotContext) => ReactNode;\n    /** The Context Menu (ADR-0036), drawn with {@link useMenuItems}. */\n    readonly contextMenu?: (context: GridContextMenuSlotContext<Row>) => ReactNode;\n    /** A column's filter panel, under the column menu's commands (ADR-0009, ADR-0044), drawn with {@link useFilterPanel}. */\n    readonly filterPanel?: (context: GridFilterPanelSlotContext) => ReactNode;\n    /** The find panel and its Replace (ADR-0055, ADR-0332), drawn with {@link useFindPanel}. */\n    readonly findPanel?: (context: GridFindPanelSlotContext) => ReactNode;\n    /** The Cell Editor's field (ADR-0010), drawn with {@link useCellEditor}. */\n    readonly cellEditor?: (context: GridCellEditorSlotContext) => ReactNode;\n    /** A cell's message (ADR-0034): its text, drawn in the core's box below the cell. */\n    readonly cellMessage?: (context: GridCellMessageSlotContext) => ReactNode;\n    /** The loading indicator (ADR-0010), at the grid's foot: nothing while nothing loads. */\n    readonly loadingIndicator?: (context: GridLoadingIndicatorSlotContext) => ReactNode;\n    /** The Selection Summary's figures (ADR-0130), drawn in the core's box in the status line. */\n    readonly selectionSummary?: (context: GridSelectionSummarySlotContext) => ReactNode;\n    /** The Formula Bar's text field (ADR-0051), drawn with {@link useFormulaBarText}. Another render function draws\n     * the field again: hold the function in a constant or a memo, not inline. */\n    readonly formulaBarText?: (context: GridFormulaBarTextSlotContext) => ReactNode;\n    /** The Formula Bar's Name Box (ADR-0051), drawn with {@link useNameBox}. */\n    readonly nameBox?: (context: GridNameBoxSlotContext) => ReactNode;\n    /** The completion list and argument hint beneath the editor (ADR-0051), drawn with {@link useEditorCompletion}. */\n    readonly editorCompletion?: (context: GridEditorCompletionSlotContext) => ReactNode;\n}\n\n/** The mount functions made for an ExGrid's render functions, by slot: one handed again is mounted by the same. */\nexport type ChromeMountsMade = Map<string, {\n    readonly render: unknown; readonly portals: GridPortals; readonly mount: (slot: HTMLElement, context: unknown) => () => void;\n}>;\n\n/** The ExGrid's Chrome as the core takes it: each slot's render function as a mount function that renders it\n * through the ExGrid's portals (ADR-0350 section 9). A render function handed again in another `chrome` keeps the\n * mount function `made` holds for it, so a part the core keeps standing, the Formula Bar's fields, is not drawn again.\n * Which slots there are is the core's to check, as it checks a mount function handed it directly; a render function\n * that is not a function is named here, in React's terms. Exported for the family's Framework Adapters, whose products\n * hand ExGrid's Chrome on to the grids they draw, not for a Consumer. */\nexport function chromeMounts<Row>(given: ExGridChrome<Row> | undefined, portals: GridPortals, made: ChromeMountsMade): GridChrome<Row> | undefined {\n    // Checked as a script may hand it, whatever its type says.\n    const chrome: unknown = given;\n    if (chrome === undefined) return undefined;\n    if (typeof chrome !== 'object' || chrome === null) {\n        throw new TypeError('chrome is an object of Chrome slots, each a render function of its context (ADR-0390).');\n    }\n    return Object.fromEntries(Object.entries(chrome).map(([name, render]: [string, unknown]) => {\n        if (render === undefined) return [name, undefined];\n        if (typeof render !== 'function') throw new TypeError(`chrome.${name} is a render function of the slot's context (ADR-0390).`);\n        const before = made.get(name);\n        if (before?.render === render && before.portals === portals) return [name, before.mount];\n        const mount = (slot: HTMLElement, context: unknown): (() => void) => portals.mount(slot, () => {\n            // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- the core hands each slot's mount that slot's context, the one its render function takes\n            const node = Reflect.apply(render, undefined, [context]) as ReactNode;\n            return node;\n        });\n        made.set(name, { render, portals, mount });\n        return [name, mount];\n    }));\n}\n\n/** The props {@link useMenuItems} hands each item: spread them onto the control that draws it. */\nexport interface MenuItemProps {\n    /** The item's role in the menu the core named. */\n    readonly role: 'menuitem';\n    /** Takes the control the item is drawn as, which the hook focuses. */\n    readonly ref: (control: HTMLElement | null) => void;\n    /** Whether the command may not run: a disabled item is shown, and never focused or run. */\n    readonly disabled: boolean;\n    /** The same, for assistive technology, on a control that is not a button. */\n    readonly 'aria-disabled': boolean;\n    /** Focusable by the menu, never a tab stop: Tab is the menu's key (ADR-0039). */\n    readonly tabIndex: -1;\n    /** Marks an enabled item as one of the grid's own controls whose click and keys it takes in turn (ADR-0240). */\n    readonly 'data-ex-claims': 'click keydown' | undefined;\n    /** Hands every key on the item to the core, and does what it answers. */\n    readonly onKeyDown: (event: ReactKeyboardEvent) => void;\n    /** Runs the command, as the core runs it. */\n    readonly onClick: (event: ReactMouseEvent) => void;\n    /** Tells the core the item took DOM focus, so the menu's place follows it (ADR-0039). */\n    readonly onFocus: (event: ReactFocusEvent) => void;\n}\n\n/**\n * Draws a menu slot's items from its context (ADR-0390 section 3): answers the props of the item at `index` of\n * `context.commands`, one item per command, in that order. Every key on an item is the core's table against the\n * place the core keeps, and its default is prevented: a move focuses the item it names, a run invokes the command,\n * a close closes the menu, and a move into the column's filter the core has made. The first enabled item takes the\n * keyboard at each focus request, without scrolling the menu (ADR-0039).\n */\nexport function useMenuItems(context: GridMenuSlotContext): (index: number) => MenuItemProps {\n    const items = useRef<(HTMLElement | null)[]>([]);\n    const answered = useRef<number | undefined>(undefined);\n    // The control item `index` is drawn as: one the contents never drew with these props can take no keyboard.\n    const drawn = (index: number): HTMLElement => {\n        const item = items.current[index];\n        if (item === undefined || item === null) {\n            throw new Error(`The menu's item ${index} is not drawn: spread useMenuItems' props onto the control of every command, and forward its ref.`);\n        }\n        return item;\n    };\n    useLayoutEffect(() => {\n        if (answered.current === context.focusRequest) return;\n        answered.current = context.focusRequest;\n        takeMenuFocus(context, drawn);\n    }, [context]);\n    return (index: number): MenuItemProps => {\n        const command = context.commands[index];\n        if (command === undefined) {\n            throw new RangeError(`useMenuItems is asked for item ${index} of a menu of ${context.commands.length} commands.`);\n        }\n        return {\n            role: 'menuitem',\n            ref: control => { items.current[index] = control; },\n            disabled: !command.enabled,\n            'aria-disabled': !command.enabled,\n            tabIndex: -1,\n            'data-ex-claims': command.enabled ? 'click keydown' : undefined,\n            onKeyDown: event => {\n                // Only the item's own: an event from a popup the item opened through a portal reaches it in React's\n                // tree, but is not inside it in the page, and is that popup's.\n                if (within(event)) answerMenuKey(context, event, drawn);\n            },\n            onClick: event => { if (within(event)) command.invoke(); },\n            onFocus: event => { if (within(event)) context.itemFocused(index); },\n        };\n    };\n}\n\n/** Whether an event happened inside the item it reached, in the page and not only in React's tree. */\nfunction within(event: SyntheticEvent): boolean {\n    return event.target instanceof Node && event.currentTarget instanceof Node && event.currentTarget.contains(event.target);\n}\n\n/** What {@link useFilterPanel} hands a filter panel's contents. */\nexport interface FilterPanelHandles {\n    /** What the panel shows now, drawn again at each change the core makes to it. */\n    readonly view: FilterPanelView;\n    /** Takes the panel's first control: Tab on a command focuses it (ADR-0044). */\n    readonly first: (control: HTMLElement | null) => void;\n    /** Takes the panel's last control: Shift+Tab on a command wraps there (ADR-0044). */\n    readonly last: (control: HTMLElement | null) => void;\n    /** Takes the field a search is typed into, Excel's E: the value list's search box, or the first condition's\n     * value where no list stands (ADR-0044). */\n    readonly search: (control: HTMLElement | null) => void;\n    /** The value list's key handler, on the element that holds its checkboxes and \"(Select All)\", never on a text\n     * field: Excel's letters run their command through the core, and their default is prevented (ADR-0044). */\n    readonly onValueListKeyDown: (event: ReactKeyboardEvent) => void;\n}\n\n/**\n * Draws a filter panel slot from its context (ADR-0390 section 3): the core's view, read again at each change, and\n * the control the core asks for the keyboard. Each choice goes to the context's setter, which is what it means; the\n * hook focuses the control a request names, through the core, once it is drawn, and answers each request once,\n * whichever component of the contents holds the hook when it comes.\n */\nexport function useFilterPanel(context: GridFilterPanelSlotContext): FilterPanelHandles {\n    const view = useSyncExternalStore(context.subscribe, context.view);\n    const controls = useRef<Record<FocusTarget, HTMLElement | null>>({ first: null, last: null, search: null });\n    useLayoutEffect(() => {\n        if (context.focusTarget === undefined || answeredRequests.has(context)) return;\n        answeredRequests.add(context);\n        takeFilterFocus(context, target => {\n            const control = controls.current[target];\n            return control === null ? undefined : control;\n        });\n    }, [context]);\n    // Made once, so a render hands React the same refs and it does not take them away and back.\n    const [refs] = useState(() => {\n        const taking = (target: FocusTarget) => (control: HTMLElement | null): void => { controls.current[target] = control; };\n        return { first: taking('first'), last: taking('last'), search: taking('search') };\n    });\n    return {\n        view,\n        ...refs,\n        onValueListKeyDown: event => {\n            if (within(event)) answerValueListKey(context, event.nativeEvent);\n        },\n    };\n}\n\ntype FocusTarget = NonNullable<GridFilterPanelSlotContext['focusTarget']>;\n\n/** The contexts whose focus request has been answered. Each request comes in a context of its own, so one answered is\n * never answered again: not by a component of the contents mounted after it, nor by an effect run twice. */\nconst answeredRequests = new WeakSet<GridFilterPanelSlotContext>();\n\n/** What {@link useFindPanel} hands a find panel's contents. */\nexport interface FindPanelHandles {\n    /** What the panel shows now, drawn again at each change the core makes to it. */\n    readonly view: FindPanelView;\n    /** Takes the find field, which each request of the core's puts the keyboard on, its text selected (FD-1). */\n    readonly field: (control: HTMLElement | null) => void;\n}\n\n/**\n * Draws the find panel slot from its context (ADR-0390 section 3): the core's view, read again at each change, and\n * the find field, which takes the keyboard at each request of the core's, answered once. Each change and step goes to\n * the context; Enter in a field is the core's form's, so the contents draw no form and no key handler of their own.\n */\nexport function useFindPanel(context: GridFindPanelSlotContext): FindPanelHandles {\n    const view = useSyncExternalStore(context.subscribe, context.view);\n    const control = useRef<HTMLElement | null>(null);\n    useLayoutEffect(() => {\n        if (answeredFinds.has(context)) return;\n        answeredFinds.add(context);\n        if (control.current === null) throw new Error(\"The find panel's field is not drawn: hand useFindPanel's `field` ref to the find field.\");\n        takeFindFocus(context, control.current);\n    }, [context]);\n    const [field] = useState(() => (element: HTMLElement | null): void => { control.current = element; });\n    return { view, field };\n}\n\n/** The find panel's contexts whose request has been answered, as {@link answeredRequests} keeps the filter panel's. */\nconst answeredFinds = new WeakSet<GridFindPanelSlotContext>();\n\n/** What {@link useCellEditor} hands the editor's contents. */\nexport interface CellEditorHandles {\n    /** What the editor shows besides its text: the mode, a Reject's sentence, a pending commit. */\n    readonly view: CellEditorView;\n    /** Takes the text field, which the core reads and writes, and which takes the keyboard as the editor opens. */\n    readonly field: (control: HTMLInputElement | HTMLTextAreaElement | null) => void;\n    /** The text the field opens holding: hand it to the field as its default, and no value, since the text is the\n     * core's to read and write (ADR-0010). */\n    readonly defaultValue: string;\n}\n\n/**\n * Draws the Cell Editor's slot from its context (ADR-0390 section 3): one text field, uncontrolled, opening with the\n * core's text, which the core reads at each commit and writes where it types itself, as from the Formula Bar. The\n * field takes the keyboard once drawn, the caret at its end. Enter, Tab, Escape, F2 and Overwrite's arrows are the\n * core's, so the contents draw no key handler of their own.\n */\nexport function useCellEditor(context: GridCellEditorSlotContext): CellEditorHandles {\n    const view = useSyncExternalStore(context.subscribe, context.view);\n    const control = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n    const handed = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n    // After every render: the field drawn first is handed over for the keyboard the opening owes, and a field drawn\n    // anew, an input swapped for a textarea say, is handed over too, so the core reads it and it keeps the keyboard.\n    useLayoutEffect(() => {\n        const field = control.current;\n        if (!answeredEditors.has(context)) {\n            answeredEditors.add(context);\n            if (field === null) throw new Error(\"The cell editor's field is not drawn: hand useCellEditor's `field` ref to the text field.\");\n        } else if (field === null || field === handed.current) {\n            return;\n        }\n        handed.current = field;\n        context.takeFocus(field);\n    });\n    const [field] = useState(() => (element: HTMLInputElement | HTMLTextAreaElement | null): void => { control.current = element; });\n    return { view, field, defaultValue: context.initialText };\n}\n\n/** The editors whose opening request has been answered: StrictMode runs an effect twice, and the keyboard is taken\n * once. */\nconst answeredEditors = new WeakSet<GridCellEditorSlotContext>();\n\n/** Hands `takeField` the field `control` holds after every render where it is another than the one handed last: the\n * Formula Bar's fields are the core's to read and write, and take the keyboard only by the user's press. The first\n * render must draw it; a render that draws none for a while leaves the one handed last standing. */\nfunction useHandedField(takeField: (control: HTMLElement) => void, name: string): (element: EditorField | null) => void {\n    const control = useRef<EditorField | null>(null);\n    const handed = useRef<EditorField | null>(null);\n    useLayoutEffect(() => {\n        const field = control.current;\n        if (field === null && handed.current === null) throw new Error(`The ${name}'s field is not drawn: hand the hook's \\`field\\` ref to the text field.`);\n        if (field === null || field === handed.current) return;\n        handed.current = field;\n        takeField(field);\n    });\n    const [field] = useState(() => (element: EditorField | null): void => { control.current = element; });\n    return field;\n}\n\n/** A text field the core reads and writes. */\ntype EditorField = HTMLInputElement | HTMLTextAreaElement;\n\n/** What {@link useFormulaBarText} hands the Formula Bar's text field. */\nexport interface FormulaBarTextHandles {\n    /** What the field shows besides its text: whether it takes typing, and whether its text is borrowed. */\n    readonly view: FormulaBarTextView;\n    /** Takes the text field, which the core reads and writes. Draw it uncontrolled, with no value. */\n    readonly field: (control: HTMLInputElement | HTMLTextAreaElement | null) => void;\n}\n\n/**\n * Draws the Formula Bar's text slot from its context (ADR-0390 section 3): one text field, uncontrolled, which the\n * core fills with the Focus cell's text, names and makes read only, and whose typing is the Cell Editor's (ADR-0051).\n * Enter, Tab, Escape and F2 are the core's, so the contents draw no key handler of their own.\n */\nexport function useFormulaBarText(context: GridFormulaBarTextSlotContext): FormulaBarTextHandles {\n    const view = useSyncExternalStore(context.subscribe, context.view);\n    const field = useHandedField(context.takeField, 'Formula Bar\\'s text');\n    return { view, field };\n}\n\n/** What {@link useNameBox} hands the Name Box. */\nexport interface NameBoxHandles {\n    /** Takes the text input, which the core reads and writes. Draw it uncontrolled, with no value: an input, since\n     * Enter in a textarea submits nothing. */\n    readonly field: (control: HTMLInputElement | null) => void;\n}\n\n/**\n * Draws the Name Box's slot from its context (ADR-0390 section 3): one text field, uncontrolled, which the core\n * fills with the Focus's name. Enter is the core's form's and Escape the core's, so the contents draw no form and no\n * key handler of their own.\n */\nexport function useNameBox(context: GridNameBoxSlotContext): NameBoxHandles {\n    return { field: useHandedField(context.takeField, 'Name Box') };\n}\n\n/** The props {@link useEditorCompletion} hands a candidate: spread them onto the element that draws it. */\nexport interface CompletionOptionProps {\n    /** The id the editor names while the candidate is chosen. */\n    readonly id: string;\n    /** A candidate is an option of the list. */\n    readonly role: 'option';\n    /** Whether the candidate is the chosen one. */\n    readonly 'aria-selected': boolean;\n    /** A click accepts the candidate; the core's box takes the press, keeping the keyboard in the editor. */\n    readonly onClick: () => void;\n}\n\n/** What {@link useEditorCompletion} hands the completion list. */\nexport interface EditorCompletionHandles {\n    /** The props of the list: spread them onto the element holding the candidates. */\n    readonly list: { readonly id: string; readonly role: 'listbox' };\n    /** The props of the candidate at an index. */\n    readonly option: (index: number) => CompletionOptionProps;\n}\n\n/**\n * Draws the completion slot from its context (ADR-0390 section 3): the ids the editor names, and a click on a\n * candidate accepting it. The core's box keeps the keyboard in the editor, and \u2191, \u2193, Tab and Escape are the\n * editor's, so the contents draw no key handler and take no focus.\n */\nexport function useEditorCompletion(context: GridEditorCompletionSlotContext): EditorCompletionHandles {\n    return {\n        list: { id: context.listId, role: 'listbox' },\n        option: index => ({\n            id: context.optionId(index),\n            role: 'option',\n            'aria-selected': index === context.selected,\n            onClick: () => { context.accept(index); },\n        }),\n    };\n}\n", "// The portals of one ExGrid (ADR-0350 section 9): the core mounts content into slots it keeps, a Template cell's\n// (ADR-0020) or a Chrome slot's (ADR-0390), and this hands React each slot to render into, as a portal of the\n// ExGrid the slot stands in. A portal is keyed by its slot, so content mounted again on the same slot, for a\n// focus request or for a new version of its row, is the same component given new props, and keeps its state.\n\nimport { createElement, useReducer, type ReactElement, type ReactNode } from 'react';\nimport { createPortal, flushSync } from 'react-dom';\n\n/** What a slot shows: its render, rendered as a component of its own, so a render that throws reaches the\n * Consumer's error boundary. */\nfunction SlotContent({ show }: { readonly show: () => ReactNode }): ReactNode {\n    return show();\n}\n\n/**\n * The portals of one ExGrid. The core mounts and takes away content in its own pass, outside React; each change\n * asks for one render of the ExGrid, made at once in the next microtask, so a slot's content stands, and its\n * control has taken a keyboard it was asked to, before the browser hands over the next input (the spine's sixth\n * rule).\n *\n * Exported for the family's Framework Adapters (`@ex-grid/sheet-react`, `@ex-grid/pivot-react`,\n * `@ex-grid/chart-react`), whose components render a product's Chrome slots the same way, not for a Consumer: the\n * component holds one for its lifetime, renders its {@link GridPortals.elements} beside its root, and calls\n * {@link GridPortals.begin} and {@link GridPortals.end} as its product is made and goes.\n */\nexport class GridPortals {\n    readonly #portals = new Map<string, ReactElement>();\n    readonly #render: () => void;\n    #owed = false;\n    #live = true;\n\n    /** `render` asks the component holding the portals to render again, once per change. */\n    constructor(render: () => void) {\n        this.#render = render;\n    }\n\n    /** A slot's content, made once per mount: the ExGrid rendering again hands React the same element, and every\n     * slot whose content was not mounted again skips its render (ADR-0003). */\n    set(id: string, slot: HTMLElement, show: () => ReactNode): void {\n        this.#portals.set(id, createPortal(createElement(SlotContent, { show }), slot, id));\n        this.#owe();\n    }\n\n    /** Takes away the content set for `id`. */\n    delete(id: string): void {\n        this.#portals.delete(id);\n        this.#owe();\n    }\n\n    /** Mounts `show` into `slot`, keyed by the slot, and answers the cleanup the core calls: the core's mount\n     * function's shape, `(slot, context) => cleanup` (ADR-0350 section 9). */\n    mount(slot: HTMLElement, show: () => ReactNode): () => void {\n        const id = slotIdOf(slot);\n        this.set(id, slot, show);\n        return () => { this.delete(id); };\n    }\n\n    /** A grid is made, after one this component held went, as StrictMode makes it again: it renders again. */\n    begin(): void {\n        this.#live = true;\n    }\n\n    /** The grid is going, and its content with it: nothing renders for it again. */\n    end(): void {\n        this.#live = false;\n        this.#portals.clear();\n    }\n\n    /** The portals, as the ExGrid renders them beside its root. */\n    elements(): ReactElement[] {\n        return [...this.#portals.values()];\n    }\n\n    #owe(): void {\n        if (this.#owed || !this.#live) return;\n        this.#owed = true;\n        queueMicrotask(() => {\n            this.#owed = false;\n            if (this.#live) flushSync(this.#render);\n        });\n    }\n}\n\n/** The portals of each ExGrid, by the element it renders: the grid's instance root. */\nconst portalsOf = new WeakMap<Element, GridPortals>();\nconst slotIds = new WeakMap<HTMLElement, string>();\nlet slots = 0;\n\n/** A slot's key, the same for as long as the slot stands. */\nfunction slotIdOf(slot: HTMLElement): string {\n    let id = slotIds.get(slot);\n    if (id === undefined) {\n        slots += 1;\n        id = `ex-slot-${slots}`;\n        slotIds.set(slot, id);\n    }\n    return id;\n}\n\n/** Holds an ExGrid's portals, and a render of the component that asks for one; a family adapter's component holds\n * its product's the same way. */\nexport function useGridPortals(): GridPortals {\n    const [, rendered] = useReducer((count: number) => count + 1, 0);\n    const [portals] = useReducer((held: GridPortals) => held, undefined, () => new GridPortals(rendered));\n    return portals;\n}\n\n/** Ties an ExGrid's portals to the element it renders, for its slots to find. */\nexport function holdPortals(root: Element, portals: GridPortals): void {\n    portalsOf.set(root, portals);\n}\n\n/** The portals of the ExGrid `slot` stands in, or undefined outside one. */\nexport function portalsAround(slot: HTMLElement): GridPortals | undefined {\n    for (let at: Element | null = slot.parentElement; at !== null; at = at.parentElement) {\n        const portals = portalsOf.get(at);\n        if (portals !== undefined) return portals;\n    }\n    return undefined;\n}\n", "// A Template Column for React (ADR-0020, ADR-0350 section 16): the core mounts a cell's content into a slot it\n// keeps, and this mount hands React the slot to render into, through the ExGrid's portals. A cell mounted again,\n// for a focus request or for a new version of its row under a Row Key, is the same component given new props,\n// and keeps its state.\n\nimport type { ReactNode } from 'react';\nimport type { GridColumn, GridTemplateCell } from '@ex-grid/core';\nimport { portalsAround } from './portals';\n\n/** A Template Column's declaration: a column's, whose cells React renders in place of their value's text. */\nexport type TemplateColumnOptions<Row> = Omit<GridColumn<Row>, 'template' | 'actions'>;\n\n/**\n * A Template Column (ADR-0020): its cells render `render`'s answer in place of their value's text, which is\n * still read for sorting, filtering, Find and copy. `render` is handed the cell: its row, its column, and a\n * focus request, non-zero on exactly one render after Space engaged the cell, which a control answers by\n * handing itself to `takeKeyboard` from a layout effect (ADR-0037). A component it renders keeps its state\n * while its cell is painted, through a new version of its row where the source has a Row Key; without one a\n * new instance is another row (ADR-0140), rendered afresh. `render` only makes elements: a hook belongs in\n * the component it renders. Make the column once, outside the render\n * of the component that holds the grid, as every column: a new column is a new declaration, and every row\n * paints again (ADR-0003).\n */\nexport function templateColumn<Row>(column: TemplateColumnOptions<Row>, render: (cell: GridTemplateCell<Row>) => ReactNode): GridColumn<Row> {\n    if (typeof render !== 'function') {\n        throw new TypeError(`Column '${column.name}': render is a function of the cell, answering what it shows.`);\n    }\n    return Object.freeze({\n        ...column,\n        template: (slot: HTMLElement, cell: GridTemplateCell<Row>) => {\n            const portals = portalsAround(slot);\n            if (portals === undefined) {\n                throw new TypeError(`Column '${column.name}' is a React Template Column, which renders only inside an ExGrid of @ex-grid/react.`);\n            }\n            return portals.mount(slot, () => render(cell));\n        },\n    });\n}\n"],
+  "mappings": "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",
+  "names": ["createElement", "useLayoutEffect", "useRef", "useState", "field", "useRef", "useState", "useLayoutEffect", "createElement"]
+}

package/package.json

@@ -1,6 +1,32 @@
 {
   "name": "@ex-grid/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0-rc.1",
+  "description": "ExGrid for React: the Script Core's Framework Adapter, which mounts an Excel-like grid for reading money and risk numbers in a React tree.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AkiraMisawa/ex-grid.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://akiramisawa.github.io/ex-grid/",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist/index.js",
+    "dist/index.js.map",
+    "dist/index.d.ts"
+  ],
+  "dependencies": {
+    "@ex-grid/core": "0.2.0-rc.1"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}