@casualoffice/sheets 0.9.0 → 0.10.0

package/src/chrome/MenuBar.tsx

@@ -0,0 +1,336 @@
+/**
+ * MenuBar — the built-in dropdown menu row for `<CasualSheets chrome>`.
+ *
+ * Office-style horizontal menu strip (no logo, no title — the host frames the
+ * editor with its own bar): Edit · Insert · Format · Data. Each button opens a
+ * dropdown of items that dispatch a single verified Univer command through
+ * `CasualSheetsAPI.executeCommand`, then close the menu.
+ *
+ * Self-contained: only one menu is open at a time; Escape and an outside
+ * pointerdown close it. Every command id below was verified against the fork
+ * (`vendor/univer-revamp/packages`); items whose command can't be verified are
+ * omitted rather than dispatched blindly.
+ */
+
+import { useEffect, useRef, useState, type CSSProperties } from 'react';
+import type { CasualSheetsAPI } from '../sheets/api';
+import { Icon } from './Icon';
+import { ensureChromeFonts } from './fonts';
+
+type MenuId = 'edit' | 'insert' | 'format' | 'data' | 'view';
+
+interface MenuItem {
+  /** Stable id — drives the per-item testid `cs-menuitem-<id>`. */
+  id: string;
+  label: string;
+  command: string;
+  icon?: string;
+  params?: object;
+}
+
+interface Menu {
+  id: MenuId;
+  label: string;
+  items: MenuItem[];
+}
+
+// All command ids below verified via:
+//   grep -rhoE "id: '(sheet\.command\.[a-z.-]+)'" vendor/univer-revamp/packages | sort -u
+//   (undo/redo: univer.command.undo / .redo in packages/core undoredo)
+const MENUS: Menu[] = [
+  {
+    id: 'edit',
+    label: 'Edit',
+    items: [
+      { id: 'undo', label: 'Undo', command: 'univer.command.undo', icon: 'undo' },
+      { id: 'redo', label: 'Redo', command: 'univer.command.redo', icon: 'redo' },
+      { id: 'cut', label: 'Cut', command: 'univer.command.cut', icon: 'content_cut' },
+      { id: 'copy', label: 'Copy', command: 'univer.command.copy', icon: 'content_copy' },
+      { id: 'paste', label: 'Paste', command: 'univer.command.paste', icon: 'content_paste' },
+    ],
+  },
+  {
+    id: 'insert',
+    label: 'Insert',
+    items: [
+      {
+        id: 'insert-row',
+        label: 'Insert row above',
+        command: 'sheet.command.insert-row-before',
+        icon: 'add_row_above',
+      },
+      {
+        id: 'insert-col',
+        label: 'Insert column left',
+        command: 'sheet.command.insert-col-before',
+        icon: 'add_column_left',
+      },
+      {
+        id: 'delete-row',
+        label: 'Delete row',
+        command: 'sheet.command.remove-row',
+        icon: 'delete',
+      },
+      {
+        id: 'delete-col',
+        label: 'Delete column',
+        command: 'sheet.command.remove-col',
+        icon: 'delete',
+      },
+    ],
+  },
+  {
+    id: 'format',
+    label: 'Format',
+    items: [
+      { id: 'bold', label: 'Bold', command: 'sheet.command.set-range-bold', icon: 'format_bold' },
+      {
+        id: 'italic',
+        label: 'Italic',
+        command: 'sheet.command.set-range-italic',
+        icon: 'format_italic',
+      },
+      {
+        id: 'underline',
+        label: 'Underline',
+        command: 'sheet.command.set-range-underline',
+        icon: 'format_underlined',
+      },
+      {
+        id: 'wrap-text',
+        label: 'Wrap text',
+        command: 'sheet.command.set-text-wrap',
+        icon: 'wrap_text',
+      },
+      {
+        id: 'clear-format',
+        label: 'Clear formatting',
+        command: 'sheet.command.clear-selection-format',
+        icon: 'format_clear',
+      },
+    ],
+  },
+  {
+    id: 'data',
+    label: 'Data',
+    items: [
+      {
+        id: 'sort-asc',
+        label: 'Sort ascending',
+        command: 'sheet.command.sort-range-asc',
+        icon: 'arrow_upward',
+      },
+      {
+        id: 'sort-desc',
+        label: 'Sort descending',
+        command: 'sheet.command.sort-range-desc',
+        icon: 'arrow_downward',
+      },
+      {
+        id: 'toggle-filter',
+        label: 'Toggle filter',
+        command: 'sheet.command.smart-toggle-filter',
+        icon: 'filter_alt',
+      },
+    ],
+  },
+  {
+    id: 'view',
+    label: 'View',
+    items: [
+      {
+        id: 'freeze',
+        label: 'Freeze panes',
+        command: 'sheet.command.set-selection-frozen',
+        icon: 'table_view',
+      },
+      {
+        id: 'unfreeze',
+        label: 'Unfreeze panes',
+        command: 'sheet.command.cancel-frozen',
+        icon: 'grid_off',
+      },
+      {
+        id: 'toggle-gridlines',
+        label: 'Toggle gridlines',
+        command: 'sheet.command.toggle-gridlines',
+        icon: 'grid_on',
+      },
+    ],
+  },
+];
+
+const BAR_STYLE: CSSProperties = {
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  gap: 2,
+  padding: '2px 6px',
+  borderBottom: '1px solid var(--cs-chrome-border, #e6e9ee)',
+  background: 'var(--cs-chrome-bg, #eef1f5)',
+  flex: '0 0 auto',
+  userSelect: 'none',
+  font: 'inherit',
+  fontSize: 13,
+};
+
+const MENU_BTN_STYLE: CSSProperties = {
+  height: 26,
+  display: 'inline-flex',
+  alignItems: 'center',
+  padding: '0 10px',
+  border: 'none',
+  borderRadius: 6,
+  background: 'transparent',
+  cursor: 'pointer',
+  color: 'var(--cs-chrome-fg, #201f1e)',
+  font: 'inherit',
+  fontSize: 13,
+};
+
+const DROPDOWN_STYLE: CSSProperties = {
+  position: 'absolute',
+  top: '100%',
+  minWidth: 200,
+  marginTop: 2,
+  padding: 4,
+  display: 'flex',
+  flexDirection: 'column',
+  border: '1px solid var(--cs-chrome-border, #e6e9ee)',
+  borderRadius: 8,
+  background: 'var(--cs-chrome-input-bg, #fff)',
+  boxShadow: '0 6px 20px rgba(0,0,0,0.16)',
+  zIndex: 1000,
+};
+
+const ITEM_STYLE: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 10,
+  width: '100%',
+  height: 30,
+  padding: '0 10px',
+  border: 'none',
+  borderRadius: 6,
+  background: 'transparent',
+  cursor: 'pointer',
+  color: 'var(--cs-chrome-fg, #201f1e)',
+  font: 'inherit',
+  fontSize: 13,
+  textAlign: 'left',
+};
+
+export interface MenuBarProps {
+  /** Live API, or `null` until the editor is ready. */
+  api: CasualSheetsAPI | null;
+}
+
+export function MenuBar({ api }: MenuBarProps) {
+  const [open, setOpen] = useState<MenuId | null>(null);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    ensureChromeFonts();
+  }, []);
+
+  // Close on Escape + on a pointerdown outside the menu bar.
+  useEffect(() => {
+    if (open === null) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(null);
+    };
+    const onDown = (e: PointerEvent) => {
+      if (!rootRef.current?.contains(e.target as Node)) setOpen(null);
+    };
+    document.addEventListener('keydown', onKey);
+    document.addEventListener('pointerdown', onDown, true);
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      document.removeEventListener('pointerdown', onDown, true);
+    };
+  }, [open]);
+
+  const run = (item: MenuItem) => {
+    setOpen(null);
+    void api?.executeCommand(item.command, item.params);
+  };
+
+  return (
+    <div
+      ref={rootRef}
+      style={BAR_STYLE}
+      data-testid="cs-menubar"
+      role="menubar"
+      aria-label="Menu bar"
+    >
+      {MENUS.map((menu) => {
+        const isOpen = open === menu.id;
+        return (
+          <div key={menu.id} style={{ position: 'relative' }}>
+            <button
+              type="button"
+              data-menu={menu.id}
+              aria-haspopup="menu"
+              aria-expanded={isOpen}
+              style={{
+                ...MENU_BTN_STYLE,
+                background: isOpen ? 'var(--cs-chrome-active, #e6f3f7)' : 'transparent',
+                color: isOpen ? 'var(--cs-chrome-active-fg, #0e7490)' : MENU_BTN_STYLE.color,
+              }}
+              // mousedown (not click) so the grid selection isn't lost first;
+              // toggle the menu open/closed.
+              onMouseDown={(e) => {
+                e.preventDefault();
+                setOpen((cur) => (cur === menu.id ? null : menu.id));
+              }}
+              onMouseEnter={(e) => {
+                // Hover-to-switch once a menu is already open (Office behaviour).
+                if (open !== null && open !== menu.id) setOpen(menu.id);
+                else if (!isOpen)
+                  e.currentTarget.style.background = 'var(--cs-chrome-hover, rgba(0,0,0,0.06))';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = isOpen
+                  ? 'var(--cs-chrome-active, #e6f3f7)'
+                  : 'transparent';
+              }}
+            >
+              {menu.label}
+            </button>
+            {isOpen && (
+              <div style={DROPDOWN_STYLE} role="menu" aria-label={menu.label}>
+                {menu.items.map((item) => (
+                  <button
+                    key={item.id}
+                    type="button"
+                    role="menuitem"
+                    data-testid={`cs-menuitem-${item.id}`}
+                    disabled={!api}
+                    style={{ ...ITEM_STYLE, opacity: api ? 1 : 0.5 }}
+                    onMouseDown={(e) => {
+                      e.preventDefault();
+                      run(item);
+                    }}
+                    onMouseEnter={(e) => {
+                      e.currentTarget.style.background = 'var(--cs-chrome-hover, rgba(0,0,0,0.06))';
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.background = 'transparent';
+                    }}
+                  >
+                    {item.icon ? (
+                      <Icon name={item.icon} size={18} />
+                    ) : (
+                      <span style={{ width: 18 }} aria-hidden />
+                    )}
+                    <span>{item.label}</span>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/chrome/NameBox.tsx

@@ -0,0 +1,347 @@
+/**
+ * NameBox — the Excel "Name Box" for `<CasualSheets chrome>`.
+ *
+ * A small editable box that mirrors the active cell's A1 reference live, and
+ * lets you navigate by typing a reference (e.g. `B5` or `A1:C3`) + Enter. Self-
+ * contained: reads the active selection through `CasualSheetsAPI` and navigates
+ * through the FUniver facade (`getRange(a1).activate()`) — no app context, no
+ * named-range support (defined names land with the rich name-box later).
+ *
+ * The orchestrator uses this to replace the static name-box span currently
+ * inside FormulaBar.tsx; this component does NOT edit FormulaBar.
+ */
+
+import { useEffect, useRef, useState, type CSSProperties, type KeyboardEvent } from 'react';
+import { ICommandService } from '@univerjs/core';
+import type { CasualSheetsAPI } from '../sheets/api';
+import { Icon } from './Icon';
+
+/** A defined name as surfaced by the FWorkbook facade. */
+interface DefinedNameEntry {
+  name: string;
+  ref: string;
+}
+
+/**
+ * Read the active workbook's defined names through the FWorkbook facade
+ * (`getDefinedNames()` → `FDefinedName[]`, each with `getName()` +
+ * `getFormulaOrRefString()`). Returns [] when the facade/API is unavailable —
+ * never invents an API.
+ */
+function readDefinedNames(api: CasualSheetsAPI | null): DefinedNameEntry[] {
+  if (!api) return [];
+  try {
+    const wb = api.univer.getActiveWorkbook() as unknown as {
+      getDefinedNames?: () => Array<{
+        getName?: () => string;
+        getFormulaOrRefString?: () => string;
+      }>;
+    } | null;
+    const names = wb?.getDefinedNames?.();
+    if (!names) return [];
+    return names
+      .map((dn) => ({
+        name: dn.getName?.() ?? '',
+        ref: dn.getFormulaOrRefString?.() ?? '',
+      }))
+      .filter((e) => e.name !== '');
+  } catch {
+    return [];
+  }
+}
+
+/** A1 column letters from a 0-based column index (0→A, 26→AA). */
+function colToLetters(col: number): string {
+  let s = '';
+  let n = col;
+  do {
+    s = String.fromCharCode(65 + (n % 26)) + s;
+    n = Math.floor(n / 26) - 1;
+  } while (n >= 0);
+  return s;
+}
+
+/** The active selection's top-left A1 reference, or '' when unavailable. */
+function readActiveRef(api: CasualSheetsAPI): string {
+  const sel = api.getSelection();
+  if (!sel) return '';
+  const { startRow, startColumn } = sel.range;
+  return colToLetters(startColumn) + (startRow + 1);
+}
+
+const BOX_STYLE: CSSProperties = {
+  flex: '0 0 auto',
+  width: 80,
+  height: 24,
+  padding: '0 8px',
+  border: '1px solid var(--cs-chrome-border, #e6e9ee)',
+  borderRadius: 4,
+  background: 'var(--cs-chrome-input-bg, #fff)',
+  color: 'var(--cs-chrome-fg, #201f1e)',
+  font: 'inherit',
+  fontSize: 13,
+  textAlign: 'center',
+  boxSizing: 'border-box',
+};
+
+const ROOT_STYLE: CSSProperties = {
+  flex: '0 0 auto',
+  display: 'inline-flex',
+  alignItems: 'center',
+  position: 'relative',
+};
+
+const DROPDOWN_BTN_STYLE: CSSProperties = {
+  flex: '0 0 auto',
+  width: 20,
+  height: 24,
+  marginLeft: 2,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  border: 'none',
+  borderRadius: 4,
+  background: 'transparent',
+  color: 'var(--cs-chrome-fg, #201f1e)',
+  cursor: 'pointer',
+  padding: 0,
+};
+
+const MENU_STYLE: CSSProperties = {
+  position: 'absolute',
+  top: '100%',
+  left: 0,
+  marginTop: 4,
+  zIndex: 1000,
+  minWidth: 160,
+  maxHeight: 280,
+  overflowY: 'auto',
+  padding: 4,
+  borderRadius: 8,
+  border: '1px solid var(--cs-chrome-border, #e6e9ee)',
+  background: 'var(--cs-chrome-input-bg, #fff)',
+  boxShadow: '0 6px 20px rgba(0,0,0,0.18)',
+};
+
+const MENU_ITEM_STYLE: CSSProperties = {
+  display: 'flex',
+  alignItems: 'baseline',
+  justifyContent: 'space-between',
+  gap: 12,
+  width: '100%',
+  height: 28,
+  padding: '0 8px',
+  border: 'none',
+  borderRadius: 6,
+  background: 'transparent',
+  color: 'var(--cs-chrome-fg, #201f1e)',
+  font: 'inherit',
+  fontSize: 13,
+  textAlign: 'left',
+  cursor: 'pointer',
+  boxSizing: 'border-box',
+};
+
+const MENU_EMPTY_STYLE: CSSProperties = {
+  padding: '6px 8px',
+  color: 'var(--cs-chrome-muted, #8a8886)',
+  fontSize: 12,
+  whiteSpace: 'nowrap',
+};
+
+const ITEM_REF_STYLE: CSSProperties = {
+  color: 'var(--cs-chrome-muted, #8a8886)',
+  fontSize: 11,
+  flex: '0 0 auto',
+};
+
+export interface NameBoxProps {
+  /** Live API, or `null` until the editor is ready. */
+  api: CasualSheetsAPI | null;
+}
+
+export function NameBox({ api }: NameBoxProps) {
+  // The A1 reference of the active cell.
+  const [ref, setRef] = useState('');
+  // null = mirror the active cell; a string = the user is typing.
+  const [draft, setDraft] = useState<string | null>(null);
+  const draftRef = useRef<string | null>(null);
+  draftRef.current = draft;
+  const inputRef = useRef<HTMLInputElement>(null);
+  // The defined-names dropdown: open state, current entries, and a root ref for
+  // outside-pointerdown detection (mirrors ColorPicker's popover pattern).
+  const [open, setOpen] = useState(false);
+  const [names, setNames] = useState<DefinedNameEntry[]>([]);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  // Reflect the active cell: subscribe to command activity (covers selection
+  // moves) and re-read the reference — unless the user is mid-edit.
+  useEffect(() => {
+    if (!api) return;
+    const refresh = () => {
+      if (draftRef.current !== null) return;
+      setRef(readActiveRef(api));
+    };
+    refresh();
+    const injector = (api.univer as unknown as { _injector?: { get(t: unknown): unknown } })
+      ._injector;
+    const cmd = injector?.get(ICommandService) as
+      | { onCommandExecuted: (cb: () => void) => { dispose: () => void } }
+      | undefined;
+    const sub = cmd?.onCommandExecuted(() => refresh());
+    return () => sub?.dispose();
+  }, [api]);
+
+  // While the dropdown is open, close it on Escape or any outside pointerdown.
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e: PointerEvent) => {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
+    };
+    const onKeyDown = (e: globalThis.KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('pointerdown', onPointerDown, true);
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown, true);
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [open]);
+
+  /** Navigate to the typed A1 reference / range. Invalid input is ignored. */
+  const navigate = (text: string) => {
+    const t = text.trim();
+    setDraft(null);
+    if (!api || t === '') {
+      setRef(readActiveRef(api ?? ({} as CasualSheetsAPI)));
+      return;
+    }
+    const sheet = api.univer.getActiveWorkbook()?.getActiveSheet();
+    if (!sheet) return;
+    try {
+      // FRange.getRange parses an A1 string ("B5") or range ("A1:C3").
+      const range = (sheet as unknown as { getRange(a1: string): { activate(): void } }).getRange(
+        t,
+      );
+      range.activate();
+    } catch {
+      // Invalid reference — fall back to the current selection.
+      setRef(readActiveRef(api));
+    }
+  };
+
+  // Open the dropdown: refresh the defined-name list from the live workbook,
+  // then toggle. mousedown (not click) so the grid selection isn't lost first.
+  const toggleDropdown = () => {
+    setOpen((cur) => {
+      const next = !cur;
+      if (next) setNames(readDefinedNames(api));
+      return next;
+    });
+  };
+
+  // Navigate to a defined name's range. The ref may carry a sheet prefix
+  // ("Sheet1!$A$1") and absolute `$` markers — strip both, then reuse the same
+  // getRange(...).activate() path the typed-reference navigation uses.
+  const navigateName = (entry: DefinedNameEntry) => {
+    setOpen(false);
+    const raw = entry.ref.trim();
+    if (raw === '') return;
+    const afterSheet = raw.includes('!') ? raw.slice(raw.lastIndexOf('!') + 1) : raw;
+    const a1 = afterSheet.replace(/\$/g, '');
+    navigate(a1);
+  };
+
+  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      navigate((e.target as HTMLInputElement).value);
+      (e.target as HTMLInputElement).blur();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      setDraft(null);
+      setRef(api ? readActiveRef(api) : '');
+      (e.target as HTMLInputElement).blur();
+    }
+  };
+
+  const shown = draft ?? ref;
+
+  return (
+    <div ref={rootRef} style={ROOT_STYLE}>
+      <input
+        ref={inputRef}
+        type="text"
+        aria-label="Name box"
+        title="Name box"
+        data-testid="cs-namebox-input"
+        style={BOX_STYLE}
+        value={shown}
+        disabled={!api}
+        onChange={(e) => setDraft(e.target.value)}
+        onKeyDown={onKeyDown}
+        onFocus={(e) => e.currentTarget.select()}
+        onBlur={() => {
+          // Abandon any uncommitted edit without navigating.
+          if (draftRef.current !== null) {
+            setDraft(null);
+            setRef(api ? readActiveRef(api) : '');
+          }
+        }}
+      />
+      <button
+        type="button"
+        title="Defined names"
+        aria-label="Defined names"
+        aria-haspopup="true"
+        aria-expanded={open}
+        data-testid="cs-namebox-dropdown"
+        style={{
+          ...DROPDOWN_BTN_STYLE,
+          background: open ? 'var(--cs-chrome-active, #e6f3f7)' : 'transparent',
+          color: open ? 'var(--cs-chrome-active-fg, #0e7490)' : DROPDOWN_BTN_STYLE.color,
+        }}
+        disabled={!api}
+        // mousedown (not click) so the grid's selection isn't lost first.
+        onMouseDown={(e) => {
+          e.preventDefault();
+          toggleDropdown();
+        }}
+      >
+        <Icon name="expand_more" size={18} />
+      </button>
+      {open && (
+        <div style={MENU_STYLE} role="menu" data-testid="cs-namebox-menu">
+          {names.length === 0 ? (
+            <div style={MENU_EMPTY_STYLE}>No names</div>
+          ) : (
+            names.map((entry, i) => (
+              <button
+                key={entry.name}
+                type="button"
+                role="menuitem"
+                title={entry.ref || entry.name}
+                data-testid={`cs-namebox-name-${i}`}
+                style={MENU_ITEM_STYLE}
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  navigateName(entry);
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = 'var(--cs-chrome-hover, rgba(0,0,0,0.06))';
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = 'transparent';
+                }}
+              >
+                <span>{entry.name}</span>
+                {entry.ref && <span style={ITEM_REF_STYLE}>{entry.ref}</span>}
+              </button>
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+}