vastgrid 0.1.0 → 0.2.0

package/src/react/accessible-rows.tsx

@@ -0,0 +1,242 @@
+import { startTransition, useEffect, useState } from "react";
+import { type ActiveCell, type CellRange, type DisplayedColumn, type SortKey, textOf } from "vastgrid-spec";
+import type { GridCanvas, Settled } from "../canvas/grid-canvas.js";
+import type { GridStore } from "../core/store.js";
+import { useGridSelector, useGridStore } from "./hooks.js";
+
+/** Rows and columns that the accessibility tree holds at most. */
+const MAX_ROWS = 200;
+const MAX_COLUMNS = 60;
+
+/** The id of the element of a cell, for `aria-activedescendant`. */
+export function cellId(id: string, row: number, column: number) {
+  return `${id}-r${row}-c${column}`;
+}
+
+interface Box {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+interface Cell extends Box {
+  column: number;
+  name: string;
+  text: string;
+  /** What the colors of a style rule mean (§5.1), read by screen readers. */
+  description?: string;
+  /** A link or a button (`cellAction`), with its name for screen readers. */
+  action?: { kind: "link" | "button"; label?: string };
+}
+
+interface ShownRow {
+  row: number;
+  cells: Cell[];
+}
+
+/** The display positions of the columns on screen: those that scroll into view, and those pinned. */
+function shownColumns(settled: Settled, columns: readonly DisplayedColumn[]): number[] {
+  const shown: number[] = [];
+  for (let column = 0; column < columns.length && shown.length < MAX_COLUMNS; column++) {
+    const scrolls = column >= settled.left && column <= settled.right;
+    if (scrolls || columns[column].setting.pin !== undefined) shown.push(column);
+  }
+  return shown;
+}
+
+/** A box of the canvas, in the scroller's content. */
+function boxOf(canvas: GridCanvas, x: number, y: number, width: number, height: number): Box {
+  return { left: canvas.geometry.scrollX.native + x, top: canvas.geometry.scrollY.native + y, width, height };
+}
+
+/** A row's cells; a row that is not on screen is placed at the top of the screen. */
+function readRow(
+  canvas: GridCanvas,
+  store: GridStore,
+  columns: readonly DisplayedColumn[],
+  shown: readonly number[],
+  row: number,
+  onScreen: boolean,
+): ShownRow {
+  const { geometry } = canvas;
+  const y = onScreen ? geometry.rowY(row) : geometry.headerHeight;
+  const cells = shown.map((column) => {
+    const item = columns[column].column;
+    const value = store.cell(row, item.name);
+    return {
+      column,
+      name: item.name,
+      text: value === undefined || value === null ? "" : canvas.text(row, item, value),
+      description: canvas.styleOf(row, item.name)?.description,
+      action: canvas.actionAt(row, column)?.action,
+      ...boxOf(canvas, geometry.columnX(column), y, geometry.columnWidth(column), geometry.rowHeight),
+    };
+  });
+  return { row, cells };
+}
+
+/**
+ * Where the headers and the cells on screen are, in the scroller's content, and their text. The canvas and the
+ * cache change inside their objects, so `settled` is an argument: they are read again when scrolling pauses or
+ * rows arrive (memoization, React Compiler's included, keys on it), and not when the selection moves.
+ */
+function readScreen(canvas: GridCanvas, store: GridStore, settled: Settled, columns: readonly DisplayedColumn[]) {
+  const { geometry } = canvas;
+  const shown = shownColumns(settled, columns);
+  const header = shown.map((column) => ({
+    column,
+    name: columns[column].column.name,
+    text: columns[column].setting.format?.label ?? columns[column].column.name,
+    groups: canvas.groupNames(column).join(" › "),
+    ...boxOf(canvas, geometry.columnX(column), 0, geometry.columnWidth(column), geometry.headerHeight),
+  }));
+  const rows: ShownRow[] = [];
+  const end = Math.min(settled.top + settled.rows, settled.top + MAX_ROWS);
+  for (let row = settled.top; row < end; row++) rows.push(readRow(canvas, store, columns, shown, row, true));
+  return { header, rows, shown, end };
+}
+
+/** The display positions of a row's selected cells (§5.2), as text that stays the same while they do. */
+function selectedOf(ranges: readonly CellRange[] | undefined, active: ActiveCell | undefined, row: ShownRow) {
+  const selected: number[] = [];
+  for (const cell of row.cells) {
+    const inRange = (ranges ?? []).some(
+      (range) =>
+        (range.rows === "all" || (row.row >= range.rows[0] && row.row < range.rows[1])) &&
+        (range.columns === "all" || range.columns.includes(cell.name)),
+    );
+    if (inRange || (active?.row === row.row && active.column === cell.name)) selected.push(cell.column);
+  }
+  return selected.join(",");
+}
+
+function sortOf(sort: readonly SortKey[] | undefined, column: string) {
+  const key = sort?.find((item) => item.column === column);
+  return key ? (key.direction === "asc" ? "ascending" : "descending") : undefined;
+}
+
+const style = (box: Box) => ({ left: box.left, top: box.top, width: box.width, height: box.height });
+
+/** A row of the accessibility tree; it renders again only when its cells or its selected cells change. */
+function AccessibleRow({ id, row, selected }: { id: string; row: ShownRow; selected: string }) {
+  const marked = new Set(selected === "" ? [] : selected.split(",").map(Number));
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: ARIA grid pattern over a canvas.
+    // biome-ignore lint/a11y/useFocusableInteractive: focus stays on the grid (aria-activedescendant).
+    <div role="row" aria-rowindex={row.row + 2}>
+      {row.cells.map((cell) => (
+        // biome-ignore lint/a11y/useSemanticElements: ARIA grid pattern over a canvas.
+        // biome-ignore lint/a11y/useFocusableInteractive: focus stays on the grid (aria-activedescendant).
+        <div
+          key={cell.name}
+          id={cellId(id, row.row, cell.column)}
+          role="gridcell"
+          aria-colindex={cell.column + 1}
+          aria-selected={marked.has(cell.column)}
+          aria-description={cell.description}
+          style={style(cell)}
+        >
+          {cell.action?.kind === "link" ? (
+            // biome-ignore lint/a11y/useSemanticElements: the cell's link is drawn on the canvas; this names it.
+            // biome-ignore lint/a11y/useFocusableInteractive: focus stays on the grid (aria-activedescendant).
+            <span role="link" aria-label={cell.action.label}>
+              {cell.text}
+            </span>
+          ) : cell.action?.kind === "button" ? (
+            // biome-ignore lint/a11y/useSemanticElements: the cell's button is drawn on the canvas; this names it.
+            // biome-ignore lint/a11y/useFocusableInteractive: focus stays on the grid (aria-activedescendant).
+            <span role="button" aria-label={cell.action.label}>
+              {cell.text}
+            </span>
+          ) : (
+            cell.text
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * The rows on screen as ARIA rows and cells under the canvas (§6.4 of react.md), placed over the cells they
+ * stand for and drawn transparent, with the row of the active cell when it is elsewhere. They follow the canvas
+ * when scrolling pauses, in a Transition: one commit at a lower priority than anything the person does.
+ */
+export function AccessibleRows({ canvas, id }: { canvas: GridCanvas; id: string }) {
+  const { geometry } = canvas;
+  const store = useGridStore();
+  const [settled, setSettled] = useState(() => canvas.getSettled());
+  useEffect(
+    () =>
+      canvas.subscribeSettled(() => {
+        startTransition(() => setSettled(canvas.getSettled()));
+      }),
+    [canvas],
+  );
+  const columns = useGridSelector((snapshot) => snapshot.displayed);
+  const sort = useGridSelector((snapshot) => snapshot.document.plan?.sort);
+  const selection = useGridSelector((snapshot) => snapshot.session.selection);
+  const active = useGridSelector((snapshot) => snapshot.session.active);
+  const totals = useGridSelector((snapshot) => snapshot.totals);
+  const screen = readScreen(canvas, store, settled, columns);
+  const elsewhere =
+    active && (active.row < settled.top || active.row >= screen.end) && active.row < geometry.rowCount
+      ? readRow(canvas, store, columns, screen.shown, active.row, false)
+      : null;
+  const rows = elsewhere ? [...screen.rows, elsewhere].sort((a, b) => a.row - b.row) : screen.rows;
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: ARIA grid pattern over a canvas.
+    <div className="vg-a11y" role="rowgroup">
+      {/* biome-ignore lint/a11y/useSemanticElements: ARIA grid pattern over a canvas. */}
+      {/* biome-ignore lint/a11y/useFocusableInteractive: focus stays on the grid (aria-activedescendant). */}
+      <div role="row" aria-rowindex={1}>
+        {screen.header.map((cell) => (
+          // biome-ignore lint/a11y/useSemanticElements: ARIA grid pattern over a canvas.
+          // biome-ignore lint/a11y/useFocusableInteractive: focus stays on the grid (aria-activedescendant).
+          <div
+            key={cell.name}
+            role="columnheader"
+            aria-colindex={cell.column + 1}
+            aria-sort={sortOf(sort, cell.name)}
+            aria-description={cell.groups || undefined}
+            style={style(cell)}
+          >
+            {cell.text}
+          </div>
+        ))}
+      </div>
+      {rows.map((row) => (
+        <AccessibleRow key={row.row} id={id} row={row} selected={selectedOf(selection, active, row)} />
+      ))}
+      {geometry.footer > 0 && (
+        // The totals row (§5.1 of the specification), after the rows.
+        // biome-ignore lint/a11y/useSemanticElements: ARIA grid pattern over a canvas.
+        // biome-ignore lint/a11y/useFocusableInteractive: focus stays on the grid (aria-activedescendant).
+        <div role="row" aria-rowindex={geometry.rowCount + 2}>
+          {screen.header.map((cell) => {
+            const value = totals?.values[cell.name];
+            const type = totals?.columns[cell.name];
+            return (
+              // biome-ignore lint/a11y/useSemanticElements: ARIA grid pattern over a canvas.
+              // biome-ignore lint/a11y/useFocusableInteractive: focus stays on the grid (aria-activedescendant).
+              <div
+                key={cell.name}
+                role="gridcell"
+                aria-colindex={cell.column + 1}
+                style={{
+                  left: cell.left,
+                  top: geometry.bottom,
+                  width: cell.width,
+                  height: geometry.footer,
+                }}
+              >
+                {value === undefined || value === null || !type ? "" : (textOf(value, type) ?? "")}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/react/cell-editor.tsx

@@ -0,0 +1,216 @@
+import {
+  type CompositionEvent,
+  type FocusEvent,
+  type FormEvent,
+  type KeyboardEvent,
+  type Ref,
+  type RefObject,
+  use,
+  useId,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { CommandError, type Editor } from "vastgrid-spec";
+import type { GridCanvas } from "../canvas/grid-canvas.js";
+import { isApple, keyCommand } from "../canvas/keys.js";
+import type { GridStore } from "../core/store.js";
+import { LocaleContext, SaveContext } from "./context.js";
+import { useGridSelector, useGridStore } from "./hooks.js";
+
+/** What the grid asks of the editor while it handles a key. */
+export interface EditorControl {
+  /** Places the editor over the editor's cell and gives it the focus, before the key's text arrives. */
+  open(): void;
+}
+
+/** Whether an editor of the session is for the same cell as another. */
+function sameCell(a: Editor | undefined, b: Editor | undefined) {
+  return a !== undefined && b !== undefined && a.row === b.row && a.column === b.column;
+}
+
+/** Grows the editor with its lines, from the cell's height up. */
+function fit(textarea: HTMLTextAreaElement) {
+  textarea.style.height = "";
+  textarea.style.height = `${Math.max(textarea.offsetHeight, textarea.scrollHeight)}px`;
+}
+
+/** Places the editor's box over the cell of the session's editor, hidden while the cell is scrolled away. */
+function place(box: HTMLDivElement | null, store: GridStore, canvas: GridCanvas) {
+  const current = store.getSnapshot().session.editor;
+  if (!box || !current) return;
+  const at = store.getSnapshot().displayed.findIndex((item) => item.column.name === current.column);
+  if (at < 0) return;
+  const cell = canvas.geometry.cellBox(current.row, at);
+  box.style.left = `${cell.left}px`;
+  box.style.top = `${cell.top}px`;
+  box.style.minWidth = `${Math.max(cell.width, 60)}px`;
+  box.style.setProperty("--vg-editor-height", `${cell.height}px`);
+  box.style.visibility = cell.shown ? "" : "hidden";
+}
+
+export interface CellEditorProps {
+  canvas: GridCanvas;
+  scrollerRef: RefObject<HTMLDivElement | null>;
+  announce: (text: string) => void;
+  ref?: Ref<EditorControl>;
+}
+
+/**
+ * The text field over the cell being edited (§6.5 of the specification), the session's `editor`. It stays in the
+ * page while no cell is edited, so that a key that types text, an IME's included, moves into it with its text:
+ * the grid opens the editor and gives it the focus before the browser handles the key. Enter saves and moves down
+ * (Shift+Enter up), Tab saves and moves right (Shift+Tab left), Esc cancels, and Alt+Enter (also ⌃↩ on Apple
+ * platforms) starts a new line. Keys that end an IME composition are left to the IME.
+ */
+export function CellEditor({ canvas, scrollerRef, announce, ref }: CellEditorProps) {
+  const store = useGridStore();
+  const { messages, number } = use(LocaleContext);
+  const saving = use(SaveContext);
+  const editor = useGridSelector((snapshot) => snapshot.session.editor);
+  const columns = useGridSelector((snapshot) => snapshot.displayed);
+  const boxRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const shown = useRef<Editor | undefined>(undefined);
+  const [problem, setProblem] = useState<{ editor: Editor; text: string } | null>(null);
+  const hintId = useId();
+  const errorId = useId();
+  const column = editor ? columns.findIndex((item) => item.column.name === editor.column) : -1;
+  const open = editor !== undefined && column >= 0;
+  const error = problem && sameCell(problem.editor, editor) ? problem.text : null;
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: () => {
+        place(boxRef.current, store, canvas);
+        textareaRef.current?.focus({ preventScroll: true });
+      },
+    }),
+    [store, canvas],
+  );
+
+  // Over its cell, and again at every frame the canvas draws (scrolling, resizing).
+  // biome-ignore lint/correctness/useExhaustiveDependencies: the editor's row and column are the triggers.
+  useLayoutEffect(() => {
+    if (!open) return;
+    const box = boxRef.current;
+    place(box, store, canvas);
+    return canvas.subscribeFrames(() => place(box, store, canvas));
+  }, [canvas, store, open, editor?.row, column]);
+
+  // An editor that opens starts with its text: the cell's (F2, a double click) or empty for the key being typed.
+  useLayoutEffect(() => {
+    const textarea = textareaRef.current;
+    const before = shown.current;
+    shown.current = editor;
+    if (!textarea) return;
+    if (editor && !sameCell(before, editor)) {
+      textarea.value = editor.text;
+      textarea.setSelectionRange(editor.text.length, editor.text.length);
+      textarea.style.height = "";
+      if (document.activeElement !== textarea) textarea.focus({ preventScroll: true });
+      fit(textarea);
+    } else if (!editor && before && document.activeElement === textarea) {
+      // Closed: the focus goes back to the grid.
+      scrollerRef.current?.focus({ preventScroll: true });
+    }
+  }, [editor, scrollerRef]);
+
+  const change = (text: string) => {
+    if (store.getSnapshot().session.editor) store.dispatchSync({ command: "edit.change", text });
+  };
+
+  /** Writes the text (`edit.commit`); resolves with whether it was written. */
+  const commit = async (move: "up" | "down" | "left" | "right" | null) => {
+    const textarea = textareaRef.current;
+    const current = store.getSnapshot().session.editor;
+    if (!textarea || !current) return false;
+    setProblem(null);
+    change(textarea.value);
+    const outcome = await store.dispatch({ command: "edit.commit", move });
+    if (outcome.ok) return true;
+    const reason = outcome.error instanceof CommandError ? outcome.error.reason : null;
+    if (reason === "invalid_value") setProblem({ editor: current, text: messages.invalidValue(current.column) });
+    else if (reason === "read_only") setProblem({ editor: current, text: messages.readOnly });
+    else announce(messages.failed(outcome.error.message));
+    return false;
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    // The grid does not handle keys typed into the editor.
+    event.stopPropagation();
+    if (!open || event.nativeEvent.isComposing || event.keyCode === 229) return;
+    const textarea = event.currentTarget;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      store.dispatchSync({ command: "edit.cancel" });
+    } else if (event.key === "Enter" && (event.altKey || (isApple() && event.ctrlKey))) {
+      event.preventDefault();
+      textarea.setRangeText("\n", textarea.selectionStart, textarea.selectionEnd, "end");
+      change(textarea.value);
+      fit(textarea);
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      void commit(event.shiftKey ? "up" : "down");
+    } else if (event.key === "Tab") {
+      event.preventDefault();
+      void commit(event.shiftKey ? "left" : "right");
+    } else if (saving && keyCommand(event, isApple())?.command === "save") {
+      // The modifier and S writes the text, then saves, as a spreadsheet does.
+      if (store.getSnapshot().table?.capabilities.save !== true) return;
+      event.preventDefault();
+      void commit(null).then((written) => {
+        if (written) saving.save();
+      });
+    }
+  };
+
+  const onInput = (event: FormEvent<HTMLTextAreaElement>) => {
+    fit(event.currentTarget);
+    // While an IME composes, the text is not the person's yet: it is taken when the composition ends.
+    if (!(event.nativeEvent as InputEvent).isComposing) change(event.currentTarget.value);
+  };
+
+  const onCompositionEnd = (event: CompositionEvent<HTMLTextAreaElement>) => change(event.currentTarget.value);
+
+  // Leaving the editor for another place of the page saves it, as a spreadsheet does.
+  const onBlur = (event: FocusEvent<HTMLTextAreaElement>) => {
+    if (open && event.relatedTarget !== null) void commit(null);
+  };
+
+  return (
+    <div className="vg-editor" ref={boxRef} data-open={open || undefined} data-invalid={error ? true : undefined}>
+      <textarea
+        ref={textareaRef}
+        className="vg-editor-input"
+        tabIndex={open ? 0 : -1}
+        aria-hidden={open ? undefined : true}
+        aria-label={editor ? messages.editing(number.format(editor.row + 1), editor.column) : undefined}
+        aria-invalid={error ? true : undefined}
+        aria-describedby={open ? (error ? `${errorId} ${hintId}` : hintId) : undefined}
+        spellCheck={false}
+        autoComplete="off"
+        autoCapitalize="off"
+        rows={1}
+        onKeyDown={onKeyDown}
+        onInput={onInput}
+        onCompositionEnd={onCompositionEnd}
+        onBlur={onBlur}
+      />
+      {open && (
+        <span id={hintId} className="vg-sr-only">
+          {messages.editorHint}
+        </span>
+      )}
+      {open && error && (
+        <div className="vg-editor-note">
+          <span id={errorId} className="vg-editor-error" role="alert">
+            {error}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/react/cell-menu.tsx

@@ -0,0 +1,166 @@
+import { type KeyboardEvent, type ToggleEvent, use, useLayoutEffect, useRef, useState } from "react";
+import { type GridCommand, isBlank, type JsonValue, joinParts, textOf } from "vastgrid-spec";
+import { filterParts } from "../core/filters.js";
+import { LocaleContext } from "./context.js";
+import { useGridSelector, useGridStore } from "./hooks.js";
+
+/** Where the cell menu opens: a cell of the view, at a point of the page. */
+export interface CellMenuTarget {
+  row: number;
+  column: string;
+  x: number;
+  y: number;
+}
+
+/** Arrows, Home and End move the focus among the items of a menu (the menu pattern of the ARIA Authoring Practices). */
+function moveFocus(event: KeyboardEvent<HTMLDivElement>) {
+  const items = [...event.currentTarget.querySelectorAll<HTMLButtonElement>("button:not(:disabled)")];
+  const at = items.indexOf(document.activeElement as HTMLButtonElement);
+  const next =
+    event.key === "ArrowDown"
+      ? (at + 1) % items.length
+      : event.key === "ArrowUp"
+        ? (at - 1 + items.length) % items.length
+        : event.key === "Home"
+          ? 0
+          : event.key === "End"
+            ? items.length - 1
+            : -1;
+  if (next < 0 || items.length === 0) return;
+  event.preventDefault();
+  items[next].focus();
+}
+
+/**
+ * The menu of a cell (a right click on it, Shift+F10 or the context menu key): copying the selection, filtering the
+ * column to the cell's value or excluding it (`filter.column`, replacing the column's conditions), showing the
+ * value in full (read again without the text limit when the engine cut it, §8.4), and the detail panel.
+ */
+export function CellMenu({
+  target,
+  onClose,
+  copy,
+}: {
+  target: CellMenuTarget | null;
+  onClose: () => void;
+  copy: () => void;
+}) {
+  const store = useGridStore();
+  const { messages } = use(LocaleContext);
+  const ref = useRef<HTMLDivElement>(null);
+  const [full, setFull] = useState<string | null>(null);
+  const [shown, setShown] = useState(target);
+  if (shown !== target) {
+    setShown(target);
+    setFull(null);
+  }
+  const column = useGridSelector((snapshot) =>
+    target ? snapshot.displayed.find((item) => item.column.name === target.column)?.column : undefined,
+  );
+  const filters = useGridSelector(
+    (snapshot) => snapshot.table?.capabilities.plan?.where !== false && snapshot.document.plan?.aggregate === undefined,
+  );
+
+  useLayoutEffect(() => {
+    const menu = ref.current;
+    if (!menu || !target) return;
+    if (!menu.matches(":popover-open")) menu.showPopover();
+    menu.querySelector<HTMLElement>("button:not(:disabled)")?.focus();
+  }, [target]);
+
+  useLayoutEffect(() => {
+    const menu = ref.current;
+    if (!menu || !target) return;
+    const rect = menu.getBoundingClientRect();
+    menu.style.left = `${Math.max(8, Math.min(target.x, window.innerWidth - rect.width - 8))}px`;
+    menu.style.top = `${Math.max(8, Math.min(target.y, window.innerHeight - rect.height - 8))}px`;
+  });
+
+  const onToggle = (event: ToggleEvent<HTMLDivElement>) => {
+    if (event.newState === "closed") onClose();
+  };
+
+  const value: JsonValue | undefined = target ? store.cell(target.row, target.column) : undefined;
+  if (!target || !column || value === undefined) {
+    return <div ref={ref} popover="auto" className="vg-menu vg-cell-menu" onToggle={onToggle} />;
+  }
+  const close = () => ref.current?.hidePopover();
+  const run = (command: GridCommand) => {
+    close();
+    void store.dispatch(command);
+  };
+  const filterTo = (exclude: boolean) => {
+    const blank = isBlank(value, column);
+    const where = joinParts(filterParts({ kind: "values", values: blank ? [] : [value], blank, exclude }, column));
+    run({ command: "filter.column", column: column.name, where: where ?? null });
+  };
+  const showFull = () => {
+    if (!store.isCut(target.row, target.column)) {
+      setFull(textOf(value, column) ?? "");
+      return;
+    }
+    setFull(messages.loading);
+    store
+      .fullValue(target.row, target.column)
+      .then((read) => setFull(textOf(read.value, read.column) ?? ""))
+      .catch((error: unknown) => setFull(messages.failed(error instanceof Error ? error.message : String(error))));
+  };
+
+  return (
+    <div
+      ref={ref}
+      popover="auto"
+      role="dialog"
+      className="vg-menu vg-cell-menu"
+      aria-label={messages.cellMenu}
+      onToggle={onToggle}
+    >
+      {full !== null ? (
+        <section aria-label={messages.fullValue}>
+          <p className="vg-filter__title">{column.name}</p>
+          <pre className="vg-cell-menu__value" tabIndex={-1}>
+            {full}
+          </pre>
+          <button type="button" className="vg-menu__item" onClick={close}>
+            {messages.close}
+          </button>
+        </section>
+      ) : (
+        <div role="menu" aria-label={messages.cellMenu} onKeyDown={moveFocus}>
+          <button
+            type="button"
+            role="menuitem"
+            className="vg-menu__item"
+            onClick={() => {
+              close();
+              copy();
+            }}
+          >
+            {messages.copy}
+          </button>
+          {filters && (
+            <>
+              <button type="button" role="menuitem" className="vg-menu__item" onClick={() => filterTo(false)}>
+                {messages.filterToValue}
+              </button>
+              <button type="button" role="menuitem" className="vg-menu__item" onClick={() => filterTo(true)}>
+                {messages.excludeValue}
+              </button>
+            </>
+          )}
+          <button type="button" role="menuitem" className="vg-menu__item" disabled={value === null} onClick={showFull}>
+            {messages.fullValue}
+          </button>
+          <button
+            type="button"
+            role="menuitem"
+            className="vg-menu__item"
+            onClick={() => run({ command: "detail.open" })}
+          >
+            {messages.details}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}