@superad/ui 0.1.1

package/es/Table/react/a11y.mjs

@@ -0,0 +1,72 @@
+"use client";
+import { describeCellValue, isGroupTitleRecord } from "../core/cellValue.mjs";
+import { getScenegraph, isTableReleased } from "../vtable/vtableAdapter.mjs";
+import { countGroupRecords } from "../canvas/groupTitle.mjs";
+import { styles } from "./style.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Table/react/a11y.tsx
+const readA11yCellText = (table, col, row) => {
+	try {
+		const define = table.getBodyColumnDefine?.(col, row);
+		return describeCellValue(table.getCellValue(col, row), {
+			duration: define?.superadDuration,
+			kind: define?.superadKind,
+			options: define?.superadOptions
+		}, table.getCellOriginRecord(col, row));
+	} catch {
+		return "";
+	}
+};
+/** Visually hidden role=grid mirror of the visible viewport for screen readers. */
+const TableA11yLayer = ({ table, version }) => {
+	const scenegraph = getScenegraph(table);
+	if (isTableReleased(table)) return null;
+	const headerRows = table.columnHeaderLevelCount ?? 1;
+	const rowCount = table.rowCount ?? 0;
+	const colCount = table.colCount ?? 0;
+	const startRow = Math.max(headerRows, scenegraph.proxy?.rowStart ?? headerRows);
+	const fallbackEnd = Math.min(rowCount - 1, headerRows + 24);
+	const endRow = Math.min(rowCount - 1, scenegraph.proxy?.rowEnd ?? fallbackEnd);
+	const rows = [];
+	for (let row = startRow; row <= endRow; row += 1) rows.push(row);
+	const headerCells = [];
+	for (let col = 0; col < colCount; col += 1) headerCells.push(readA11yCellText(table, col, 0));
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-colcount": colCount,
+		"aria-rowcount": rowCount,
+		className: styles.a11yGrid,
+		"data-a11y-version": version,
+		"data-superad-a11y": "",
+		role: "grid",
+		tabIndex: 0,
+		children: [/* @__PURE__ */ jsx("div", {
+			"aria-rowindex": 1,
+			role: "row",
+			children: headerCells.map((text, index) => /* @__PURE__ */ jsx("div", {
+				"aria-colindex": index + 1,
+				role: "columnheader",
+				children: text
+			}, index))
+		}), rows.map((row) => {
+			const record = table.getCellOriginRecord?.(0, row);
+			const groupTitle = isGroupTitleRecord(record);
+			return /* @__PURE__ */ jsx("div", {
+				"aria-rowindex": row + 1,
+				role: "row",
+				children: Array.from({ length: colCount }, (_, col) => /* @__PURE__ */ jsx("div", {
+					"aria-colindex": col + 1,
+					role: "gridcell",
+					children: groupTitle && col === 0 ? (() => {
+						const name = String(record?.vtableMergeName ?? "");
+						const count = countGroupRecords(record);
+						return count > 0 ? `${name} 共${count}个` : name;
+					})() : readA11yCellText(table, col, row)
+				}, col))
+			}, row);
+		})]
+	});
+};
+//#endregion
+export { TableA11yLayer };
+
+//# sourceMappingURL=a11y.mjs.map

package/es/Table/react/a11y.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"a11y.mjs","names":[],"sources":["../../../src/Table/react/a11y.tsx"],"sourcesContent":["'use client';\n\nimport type { ListTable as ListTableInstance } from '@visactor/vtable';\n\nimport { countGroupRecords } from '../canvas/groupTitle';\nimport { describeCellValue, isGroupTitleRecord } from '../core/cellValue';\nimport type { SuperAdCellMarkers } from '../vtable/columns';\nimport { getScenegraph, isTableReleased } from '../vtable/vtableAdapter';\nimport { styles } from './style';\n\nconst readA11yCellText = (table: ListTableInstance, col: number, row: number): string => {\n  try {\n    const define = (\n      table as {\n        getBodyColumnDefine?: (col: number, row: number) => SuperAdCellMarkers | undefined;\n      }\n    ).getBodyColumnDefine?.(col, row);\n    // 读的是**画面上显示的那个文本**，不是记录里的原始值：select / tag 的标签映射、user 的\n    // 姓名、数组的分隔符都闭包在 painter 里，直接 `String(value)` 会让读屏念出 `done`，\n    // 对象值更是一串 `[object Object]`。\n    return describeCellValue(\n      table.getCellValue(col, row),\n      {\n        duration: define?.superadDuration,\n        kind: define?.superadKind,\n        options: define?.superadOptions,\n      },\n      table.getCellOriginRecord(col, row),\n    );\n  } catch {\n    return '';\n  }\n};\n\n/** Visually hidden role=grid mirror of the visible viewport for screen readers. */\nexport const TableA11yLayer = ({\n  table,\n  version,\n}: {\n  table: ListTableInstance;\n  version: number;\n}) => {\n  const scenegraph = getScenegraph(table);\n  // 表被 release() 之后 scenegraph 是 null，下面每一行都会抛。这一层是纯镜像，表没了就没有\n  // 可镜像的内容，直接不渲染；新表 onReady 时会 bump version 让它回来。\n  if (isTableReleased(table)) return null;\n  const headerRows = table.columnHeaderLevelCount ?? 1;\n  const rowCount = table.rowCount ?? 0;\n  const colCount = table.colCount ?? 0;\n  const startRow = Math.max(headerRows, scenegraph.proxy?.rowStart ?? headerRows);\n  const fallbackEnd = Math.min(rowCount - 1, headerRows + 24);\n  const endRow = Math.min(rowCount - 1, scenegraph.proxy?.rowEnd ?? fallbackEnd);\n  const rows: number[] = [];\n\n  for (let row = startRow; row <= endRow; row += 1) rows.push(row);\n\n  const headerCells: string[] = [];\n  for (let col = 0; col < colCount; col += 1) headerCells.push(readA11yCellText(table, col, 0));\n\n  return (\n    <div\n      aria-colcount={colCount}\n      aria-rowcount={rowCount}\n      className={styles.a11yGrid}\n      data-a11y-version={version}\n      data-superad-a11y=\"\"\n      role=\"grid\"\n      tabIndex={0}\n    >\n      <div aria-rowindex={1} role=\"row\">\n        {headerCells.map((text, index) => (\n          // 表头是定长、永不重排的列列表，列序号就是它的稳定标识（表头文本可能重复甚至为空）。\n          // eslint-disable-next-line @eslint-react/no-array-index-key\n          <div aria-colindex={index + 1} key={index} role=\"columnheader\">\n            {text}\n          </div>\n        ))}\n      </div>\n      {rows.map((row) => {\n        const record = table.getCellOriginRecord?.(0, row) as\n          { vtableMerge?: boolean; vtableMergeName?: unknown } | undefined;\n        // Annotated as boolean so the type guard does not narrow `record` and drop the\n        // vtableMergeName this branch still reads.\n        const groupTitle: boolean = isGroupTitleRecord(record);\n\n        return (\n          <div aria-rowindex={row + 1} key={row} role=\"row\">\n            {Array.from({ length: colCount }, (_, col) => (\n              <div aria-colindex={col + 1} key={col} role=\"gridcell\">\n                {groupTitle && col === 0\n                  ? (() => {\n                      // 与画布同口径：分组名 + 「共 N 个」。\n                      const name = String(record?.vtableMergeName ?? '');\n                      const count = countGroupRecords(record);\n                      return count > 0 ? `${name} 共${count}个` : name;\n                    })()\n                  : readA11yCellText(table, col, row)}\n              </div>\n            ))}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAUA,MAAM,oBAAoB,OAA0B,KAAa,QAAwB;CACvF,IAAI;EACF,MAAM,SACJ,MAGA,sBAAsB,KAAK,GAAG;EAIhC,OAAO,kBACL,MAAM,aAAa,KAAK,GAAG,GAC3B;GACE,UAAU,QAAQ;GAClB,MAAM,QAAQ;GACd,SAAS,QAAQ;EACnB,GACA,MAAM,oBAAoB,KAAK,GAAG,CACpC;CACF,QAAQ;EACN,OAAO;CACT;AACF;;AAGA,MAAa,kBAAkB,EAC7B,OACA,cAII;CACJ,MAAM,aAAa,cAAc,KAAK;CAGtC,IAAI,gBAAgB,KAAK,GAAG,OAAO;CACnC,MAAM,aAAa,MAAM,0BAA0B;CACnD,MAAM,WAAW,MAAM,YAAY;CACnC,MAAM,WAAW,MAAM,YAAY;CACnC,MAAM,WAAW,KAAK,IAAI,YAAY,WAAW,OAAO,YAAY,UAAU;CAC9E,MAAM,cAAc,KAAK,IAAI,WAAW,GAAG,aAAa,EAAE;CAC1D,MAAM,SAAS,KAAK,IAAI,WAAW,GAAG,WAAW,OAAO,UAAU,WAAW;CAC7E,MAAM,OAAiB,CAAC;CAExB,KAAK,IAAI,MAAM,UAAU,OAAO,QAAQ,OAAO,GAAG,KAAK,KAAK,GAAG;CAE/D,MAAM,cAAwB,CAAC;CAC/B,KAAK,IAAI,MAAM,GAAG,MAAM,UAAU,OAAO,GAAG,YAAY,KAAK,iBAAiB,OAAO,KAAK,CAAC,CAAC;CAE5F,OACE,qBAAC,OAAD;EACE,iBAAe;EACf,iBAAe;EACf,WAAW,OAAO;EAClB,qBAAmB;EACnB,qBAAkB;EAClB,MAAK;EACL,UAAU;EAPZ,UAAA,CASE,oBAAC,OAAD;GAAK,iBAAe;GAAG,MAAK;GACzB,UAAA,YAAY,KAAK,MAAM,UAGtB,oBAAC,OAAD;IAAK,iBAAe,QAAQ;IAAe,MAAK;IAC7C,UAAA;GACE,GAF+B,KAE/B,CACN;EACE,CAAA,GACJ,KAAK,KAAK,QAAQ;GACjB,MAAM,SAAS,MAAM,sBAAsB,GAAG,GAAG;GAIjD,MAAM,aAAsB,mBAAmB,MAAM;GAErD,OACE,oBAAC,OAAD;IAAK,iBAAe,MAAM;IAAa,MAAK;IACzC,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAS,IAAI,GAAG,QACpC,oBAAC,OAAD;KAAK,iBAAe,MAAM;KAAa,MAAK;KACzC,UAAA,cAAc,QAAQ,WACZ;MAEL,MAAM,OAAO,OAAO,QAAQ,mBAAmB,EAAE;MACjD,MAAM,QAAQ,kBAAkB,MAAM;MACtC,OAAO,QAAQ,IAAI,GAAG,KAAK,IAAI,MAAM,KAAK;KAC5C,EAAA,CAAG,IACH,iBAAiB,OAAO,KAAK,GAAG;IACjC,GAT6B,GAS7B,CACN;GACE,GAb6B,GAa7B;EAET,CAAC,CACE;;AAET"}

package/es/Table/react/editors/base.mjs

@@ -0,0 +1,427 @@
+"use client";
+import { antdLocaleFor, readTableI18n, tableText } from "../../core/tableI18n.mjs";
+import { updateCellContent, updateNextFrame } from "../../vtable/vtableAdapter.mjs";
+import { copyToClipboard } from "../../../utils/copyToClipboard.mjs";
+import { styles } from "../style.mjs";
+import { ConfigProvider, Empty, Input } from "antd";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createRoot } from "react-dom/client";
+import { ValidateEnum } from "@visactor/vtable-editors";
+//#region src/Table/react/editors/base.tsx
+/** 按表记录：模块级单例会让一张表关掉 picker 之后，另一张表 160ms 内的点击被误吞。 */
+const pickerClosedAt = /* @__PURE__ */ new WeakMap();
+/**
+* 编辑器里的 Ctrl/Cmd+A 必须**留在输入框里**。
+*
+* 引擎在 `table.getElement()` 上监听 keydown（编辑器 DOM 正是它的子节点），见到这个组合就
+* `preventDefault()` + `deelTableSelectAll()`：输入框里的文本永远选不中，紧接着的输入是
+* **插到光标处**而不是替换 —— 数字列会写出用户没打算写的值，JSON 列直接判非法。引擎自带的
+* `InputEditor` 专门为它加了 `stopPropagation()`，我们的编辑器要对齐。
+*
+* 监听挂在编辑器根节点的**冒泡**阶段：事件先到输入框自己，再被这里截住，不再往上走到表元素。
+*/
+const keepSelectAllInEditor = (root) => {
+	root.addEventListener("keydown", (event) => {
+		if ((event.ctrlKey || event.metaKey) && (event.key === "a" || event.key === "A")) event.stopPropagation();
+	});
+};
+const markPickerClosed = (table) => {
+	if (table == null || typeof table !== "object") return;
+	pickerClosedAt.set(table, Date.now());
+};
+const pickerJustClosed = (table) => {
+	if (table == null || typeof table !== "object") return false;
+	const at = pickerClosedAt.get(table);
+	return at != null && Date.now() - at < 160;
+};
+const POPUP_SELECTOR = ".ant-picker-dropdown, .ant-picker-panel-container, .ant-picker-footer";
+/** 浮层离容器左右边缘留出的缝。贴边看起来像是被裁掉。 */
+const EDGE_GUTTER = 8;
+/**
+* 水平方向把浮层收进容器：右缘放不下先向左回移，回移到头还放不下就收窄。
+*
+* `rect` 是相对**容器**（VTable 传进来的 container 就是 `table.getElement()`）的，所以夹取的
+* 右界取 `container.clientWidth`，与 `left` 同源。保的是「在容器可视宽度内展示全」，不是视口。
+*
+* **调用方必须先把浮层挂进容器**，否则这里读不到 `parentElement`，夹取被整条跳过。
+*/
+const clampHorizontal = (element, rect, desiredWidth) => {
+	const containerWidth = element.parentElement?.clientWidth;
+	const left = rect.left - 1;
+	if (containerWidth == null || containerWidth <= 0) return {
+		left,
+		width: desiredWidth
+	};
+	const width = Math.min(desiredWidth, Math.max(containerWidth - 16, 1));
+	const maxLeft = Math.max(containerWidth - width - EDGE_GUTTER, EDGE_GUTTER);
+	return {
+		left: Math.min(left, maxLeft),
+		width
+	};
+};
+const applyOverlayBox = (element, rect) => {
+	const { left, width } = clampHorizontal(element, rect, Math.max(rect.width + 2, 240));
+	element.style.top = `${rect.top - 1}px`;
+	element.style.left = `${left}px`;
+	element.style.width = `${width}px`;
+	element.style.minHeight = `${Math.max(rect.height, 32)}px`;
+	element.style.height = `${Math.max(rect.height, 32)}px`;
+};
+/**
+* `rect` 是**相对表格**的，而 `window.innerHeight` 是视口单位 —— 翻转判断必须加上表格自己在
+* 视口里的位置，否则两者不同源、算式再对也不成立。
+*
+* 曾经这里取的是 `element.parentElement` 的 top。挂载点未必就是 `rect` 的基准元素（VTable 传进来
+* 的 container 与表格元素不是同一个），实测面板超出视口 105px 却完全不翻转 —— 而单看算式
+* （`containerTop + belowTop + estimatedHeight > innerHeight`）是满足翻转条件的。
+*/
+/** 面板的最大高度，翻转判断按它估高（见 `placePicker`）。**必须与 `styles.picker` 的
+* `max-height` 一致**：`placePicker` 优先读计算样式，这里是读不到时的兜底。 */
+const PANEL_MAX_HEIGHT = 320;
+const placePicker = (element, rect, minWidth = 240, baseTop = 0) => {
+	const { left, width } = clampHorizontal(element, rect, Math.max(rect.width + 2, minWidth));
+	const estimatedHeight = Number.parseFloat(getComputedStyle(element).maxHeight) || PANEL_MAX_HEIGHT;
+	const belowTop = rect.top + rect.height + 4;
+	let top = belowTop;
+	if (typeof window !== "undefined" && baseTop + belowTop + estimatedHeight > window.innerHeight) top = Math.max(rect.top - estimatedHeight - 4, 0);
+	element.style.top = `${top}px`;
+	element.style.left = `${left}px`;
+	element.style.minWidth = `${width}px`;
+	element.style.width = `${width}px`;
+	element.style.height = "auto";
+	element.style.maxHeight = `${PANEL_MAX_HEIGHT}px`;
+};
+const detach = (element) => {
+	element?.parentElement?.removeChild(element);
+};
+const COPY_ICON = "<svg fill=\"none\" height=\"14\" viewBox=\"0 0 16 16\" width=\"14\"><rect height=\"8\" rx=\"1.5\" stroke=\"currentColor\" width=\"8\" x=\"5\" y=\"5\"/><path d=\"M3 11V4.5A1.5 1.5 0 0 1 4.5 3H11\" stroke=\"currentColor\" stroke-linecap=\"round\"/></svg>";
+const createCopyButton = (getValue, table) => {
+	const button = document.createElement("button");
+	button.type = "button";
+	button.className = styles.copyButton;
+	button.setAttribute("aria-label", tableText(table, "copy"));
+	button.innerHTML = COPY_ICON;
+	button.addEventListener("mousedown", (event) => event.preventDefault());
+	button.addEventListener("click", (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		copyToClipboard(getValue());
+	});
+	return button;
+};
+/** 提交被拒时打在编辑器宿主上的属性，样式见 `styles.editor`。 */
+const INVALID_ATTR = "data-superad-invalid";
+/**
+* 提交被拒时给出**可见**反馈。静默拒绝和静默改型一样糟：用户按了回车，什么都没发生。
+*/
+const markEditorInvalid = (host) => {
+	host?.setAttribute(INVALID_ATTR, "");
+};
+/** 重新编辑即清掉非法态，否则用户改对了还是红的。 */
+const watchEditorValidity = (host, input) => {
+	input.addEventListener("input", () => host.removeAttribute(INVALID_ATTR));
+};
+/**
+* 点在编辑器**外面**就提交（inline 编辑器用，picker 走自己的 `onDocumentPointerDown`）。
+*
+* 引擎的提交手势只有三类，**全部绑在 canvas 或表元素上**：canvas 上的 pointerdown、
+* `table.getElement()` 上的 Enter/Tab/Escape/方向键。于是「打开编辑器 → 输入 → 点页面别处」
+* 这条路什么都不触发：编辑器既不提交也不关闭，用户以为已经保存。表随后被卸载/更新时走的是
+* `cancelEditCell`（不写值），输入就此**静默丢失**。
+*
+* 返回解绑函数，`onEnd` 里调用。
+*/
+const watchOutsideCommit = (host, getTable) => {
+	const onPointerDown = (event) => {
+		if (host.contains(event.target)) return;
+		getTable()?.completeEditCell?.();
+	};
+	document.addEventListener("pointerdown", onPointerDown, true);
+	return () => document.removeEventListener("pointerdown", onPointerDown, true);
+};
+/**
+* 编辑器渲染在**自己的 React root** 里（`createRoot(mount)`，由 VTable 的编辑器协议驱动），
+* 而 React context 不跨 root —— 这里这个 `ConfigProvider` 拿不到外层 `ThemeProvider` 的主题，
+* 不显式传 `theme` 就会退回 antd 默认（主色 `#1677ff` 的蓝）。
+*
+* 实测：日期面板的「此刻 / 确定」按钮与选中日期都是 `rgb(22,119,255)`，而本项目的
+* `--ant-color-primary` 是 `#222222`（近黑）。同一个 root 里所有 antd 组件（Input / Empty /
+* Avatar…）都受这一条影响。主题由 `table.__superadTheme` 送进来，与 canvas 调色板走同一条通道
+* （见 `useTableRenderState`）。
+*
+* 弹层仍然 portal 到 `document.body`：挂进表格容器的话，鼠标扫过弹层会命中表格的
+* pointermove，凭空点亮 hover 悬浮框。
+*/
+const wrapEditor = (node, theme, locale) => /* @__PURE__ */ jsx(ConfigProvider, {
+	getPopupContainer: () => document.body,
+	locale: antdLocaleFor(locale),
+	theme,
+	children: node
+});
+/**
+* 提交时**自己补写一次**。
+*
+* 引擎在「分组 + 树」的**嵌套行**上写入会失败：`_CachedDataSource` 映射不到记录，
+* `changeCellValues` **静默无操作**（`changeCellValue` 则直接抛
+* `TypeError: Cannot read properties of undefined (reading 'toString')`）。
+* 症状是「编辑完值不见了」，而且整张表和原始 records 里都找不到它 —— 触发条件是
+* **有子节点的行**，以及**嵌在它们下面的行**，平铺表完全不受影响。
+*
+* 这里按 `getCellOriginRecord` 拿到记录对象直接写；调用方再返回 `invalidateExit`，
+* 引擎会 `setValue(旧值)` + `doExit()` —— 它自己那次写入本来就会失败，不影响我们写进去
+* 的值。正常行上是同值重写，无害。
+*
+* `invalidateExit` 会调 `setValue` 回滚，值已由这里写好，所以调用方给个空实现即可。
+*
+* 注意：inline 那三个编辑器**没有继承 `ReactEditor`**（它们是独立类、只 implements 接口），
+* 所以这里是自由函数而不是基类方法 —— 只挂在基类上会漏掉它们。
+*/
+const writeBackOnCommit = (editor) => {
+	const table = editor.table;
+	const cell = table?.editorManager?.editCell;
+	if (table == null || cell == null || editor.cancelled === true) return;
+	const record = table.getCellOriginRecord?.(cell.col, cell.row);
+	const field = table.getBodyColumnDefine?.(cell.col, cell.row)?.field;
+	const value = editor.getValue();
+	if (record != null && field != null && record[field] !== value) {
+		record[field] = value;
+		updateCellContent(table, cell.col, cell.row);
+		updateNextFrame(table);
+	}
+};
+var ReactEditor = class {
+	constructor() {
+		this.kind = "inline";
+		this.cancelled = false;
+		this.ended = false;
+		this.onDocumentPointerDown = (event) => {
+			if (this.mount && this.isEditorElement(event.target) === false) {
+				this.beforeFinish();
+				this.finish();
+			}
+		};
+	}
+	attach(container, rect, className = styles.editor) {
+		const mount = document.createElement("div");
+		mount.className = className;
+		container.appendChild(mount);
+		applyOverlayBox(mount, rect);
+		keepSelectAllInEditor(mount);
+		document.addEventListener("pointerdown", this.onDocumentPointerDown, true);
+		this.mount = mount;
+		this.root = createRoot(mount);
+	}
+	/**
+	* 提交前的收尾钩子。`ArrayEditor` 用它把**还没回车**的草稿收进值里：document 的捕获
+	* pointerdown 先于输入框的 blur 跑，等到 blur 再 `commitDraft` 已经晚了（编辑器已结束）。
+	*/
+	beforeFinish() {}
+	validateValue() {
+		writeBackOnCommit(this);
+		return ValidateEnum.invalidateExit;
+	}
+	/** `invalidateExit` 会调它回滚，值已由 `writeBackOnCommit` 写好 —— 空实现即可。 */
+	setValue() {}
+	paint(node) {
+		this.root?.render(wrapEditor(node, this.antdTheme(), readTableI18n(this.table).locale));
+	}
+	/**
+	* 当前主题。由 `createTableOption` 写进 `customConfig`（与 `__superadPalette` 同一条通道），
+	* 主题变化时随 option 重建一起更新。
+	*/
+	antdTheme() {
+		return this.table?.options?.customConfig?.__superadTheme;
+	}
+	/** 表格元素在视口里的顶边 —— `rect` 是相对表格的，翻转判断要拿它换算。 */
+	tableTop() {
+		const element = this.table?.getElement?.();
+		return element ? element.getBoundingClientRect().top : 0;
+	}
+	finish() {
+		if (this.ended) return;
+		this.ended = true;
+		this.endEdit?.();
+	}
+	getValue() {
+		return this.cancelled ? this.original : this.current;
+	}
+	onEnd() {
+		if (this.kind === "picker") markPickerClosed(this.table);
+		document.removeEventListener("pointerdown", this.onDocumentPointerDown, true);
+		this.root?.unmount();
+		detach(this.mount);
+		this.root = void 0;
+		this.mount = void 0;
+		this.endEdit = void 0;
+	}
+	isEditorElement(target) {
+		return Boolean(this.mount?.contains(target) || typeof target?.closest === "function" && target.closest(POPUP_SELECTOR));
+	}
+	adjustPosition(rect) {
+		if (this.mount) applyOverlayBox(this.mount, rect);
+	}
+};
+/**
+* Shared picker for list-backed editors (options, people, …). The panel, the search
+* box and the keyboard handling are identical across them, so they live here once and
+* each editor supplies only its item shape through the hooks below.
+*/
+var ListPickerEditor = class extends ReactEditor {
+	constructor(multiple = false) {
+		super();
+		this.kind = "picker";
+		this.activeIndex = 0;
+		this.query = "";
+		this.selected = [];
+		this.initialKeys = "";
+		this.multiple = multiple;
+	}
+	/** 搜索框的占位文案。各 picker 自己说清楚搜的是什么。 */
+	searchPlaceholder() {
+		return tableText(this.table, "search");
+	}
+	/**
+	* 面板的最小宽度。默认 240（Notion 人员 / 选项浮层实测宽度）；
+	* 地址表单要更宽，因为它是两列字段。
+	*/
+	panelMinWidth() {
+		return 240;
+	}
+	onStart({ container, endEdit, referencePosition, table, value }) {
+		this.table = table;
+		this.ended = false;
+		this.cancelled = false;
+		this.endEdit = endEdit;
+		this.original = value;
+		this.query = "";
+		this.activeIndex = 0;
+		this.selected = this.fromValue(value);
+		this.initialKeys = this.selectedKeys();
+		this.syncCurrent();
+		this.attach(container, referencePosition.rect, styles.picker);
+		this.place(referencePosition.rect);
+		this.paint(this.panel());
+	}
+	adjustPosition(rect) {
+		this.place(rect);
+	}
+	selectedKeys() {
+		return this.selected.map((item) => this.keyOf(item)).sort().join("\0");
+	}
+	syncCurrent() {
+		this.current = this.selectedKeys() === this.initialKeys ? this.original : this.publish(this.selected);
+	}
+	place(rect) {
+		if (this.mount) placePicker(this.mount, rect, this.panelMinWidth(), this.tableTop());
+	}
+	visible() {
+		return this.candidates().filter((item) => this.matches(item, this.query));
+	}
+	has(item) {
+		const key = this.keyOf(item);
+		return this.selected.some((entry) => this.keyOf(entry) === key);
+	}
+	removeSelected(item) {
+		const key = this.keyOf(item);
+		this.selected = this.selected.filter((entry) => this.keyOf(entry) !== key);
+		this.syncCurrent();
+		this.activeIndex = Math.max(0, Math.min(this.activeIndex, this.visible().length - 1));
+		this.paint(this.panel());
+	}
+	toggle(item) {
+		if (this.multiple === false) {
+			this.selected = this.has(item) ? [] : [item];
+			this.syncCurrent();
+			this.finish();
+			return;
+		}
+		this.selected = this.has(item) ? this.selected.filter((entry) => this.keyOf(entry) !== this.keyOf(item)) : [...this.selected, item];
+		this.syncCurrent();
+		this.paint(this.panel());
+	}
+	moveActive(delta, rowCount) {
+		this.activeIndex = Math.min(Math.max(this.activeIndex + delta, 0), Math.max(rowCount - 1, 0));
+		this.paint(this.panel());
+	}
+	selectActive(items) {
+		const item = items[this.activeIndex];
+		if (item) this.toggle(item);
+	}
+	activate(index) {
+		if (this.activeIndex === index) return;
+		this.activeIndex = index;
+		this.paint(this.panel());
+	}
+	panel() {
+		const items = this.visible();
+		const rowCount = items.length;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(Input, {
+				autoFocus: true,
+				className: styles.pickerSearch,
+				placeholder: this.searchPlaceholder(),
+				size: "middle",
+				value: this.query,
+				variant: "borderless",
+				onChange: (event) => {
+					this.query = event.target.value;
+					this.activeIndex = 0;
+					this.paint(this.panel());
+				},
+				onKeyDown: (event) => {
+					if (event.key === "Backspace" && this.query === "" && this.multiple && this.selected.length > 0) {
+						event.preventDefault();
+						event.stopPropagation();
+						const last = this.selected.at(-1);
+						if (last) this.removeSelected(last);
+						return;
+					}
+					if (event.key === "ArrowDown") {
+						event.preventDefault();
+						event.stopPropagation();
+						this.moveActive(1, rowCount);
+						return;
+					}
+					if (event.key === "ArrowUp") {
+						event.preventDefault();
+						event.stopPropagation();
+						this.moveActive(-1, rowCount);
+						return;
+					}
+					if (event.key === "Enter") {
+						event.preventDefault();
+						event.stopPropagation();
+						this.selectActive(items);
+						return;
+					}
+					if (event.key === "Escape") {
+						event.preventDefault();
+						event.stopPropagation();
+						this.cancelled = true;
+						this.finish();
+					}
+				}
+			}),
+			items.length === 0 ? /* @__PURE__ */ jsx(Empty, {
+				description: tableText(this.table, "noMatch"),
+				image: Empty.PRESENTED_IMAGE_SIMPLE
+			}) : null,
+			items.map((item, index) => /* @__PURE__ */ jsxs("button", {
+				className: styles.pickerItem,
+				"data-active": index === this.activeIndex ? "true" : "false",
+				type: "button",
+				onClick: () => this.toggle(item),
+				onMouseEnter: () => this.activate(index),
+				children: [this.renderRow(item), /* @__PURE__ */ jsx("span", {
+					className: styles.check,
+					children: this.has(item) ? "✓" : ""
+				})]
+			}, this.keyOf(item)))
+		] });
+	}
+};
+const isPickerEditor = (editor) => Boolean(editor && typeof editor === "object" && "kind" in editor && editor.kind === "picker");
+//#endregion
+export { INVALID_ATTR, ListPickerEditor, ReactEditor, applyOverlayBox, createCopyButton, detach, isPickerEditor, keepSelectAllInEditor, markEditorInvalid, markPickerClosed, pickerJustClosed, placePicker, watchEditorValidity, watchOutsideCommit, writeBackOnCommit };
+
+//# sourceMappingURL=base.mjs.map

package/es/Table/react/editors/base.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.mjs","names":[],"sources":["../../../../src/Table/react/editors/base.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type EditContext,\n  type IEditor,\n  type RectProps,\n  ValidateEnum,\n} from '@visactor/vtable-editors';\nimport { ConfigProvider, Empty, Input, type ThemeConfig } from 'antd';\nimport { type ReactNode } from 'react';\nimport { createRoot, type Root } from 'react-dom/client';\n\nimport { copyToClipboard } from '@/utils/copyToClipboard';\n\nimport { antdLocaleFor, readTableI18n, tableText } from '../../core/tableI18n';\nimport { updateCellContent, updateNextFrame } from '../../vtable/vtableAdapter';\nimport { styles } from '../style';\n\nexport type EditorKind = 'inline' | 'picker';\n\nexport interface TableEditor {\n  kind: EditorKind;\n}\n\n/** 按表记录：模块级单例会让一张表关掉 picker 之后，另一张表 160ms 内的点击被误吞。 */\nconst pickerClosedAt = new WeakMap<object, number>();\n\n/**\n * 编辑器里的 Ctrl/Cmd+A 必须**留在输入框里**。\n *\n * 引擎在 `table.getElement()` 上监听 keydown（编辑器 DOM 正是它的子节点），见到这个组合就\n * `preventDefault()` + `deelTableSelectAll()`：输入框里的文本永远选不中，紧接着的输入是\n * **插到光标处**而不是替换 —— 数字列会写出用户没打算写的值，JSON 列直接判非法。引擎自带的\n * `InputEditor` 专门为它加了 `stopPropagation()`，我们的编辑器要对齐。\n *\n * 监听挂在编辑器根节点的**冒泡**阶段：事件先到输入框自己，再被这里截住，不再往上走到表元素。\n */\nexport const keepSelectAllInEditor = (root: HTMLElement): void => {\n  root.addEventListener('keydown', (event) => {\n    if ((event.ctrlKey || event.metaKey) && (event.key === 'a' || event.key === 'A')) {\n      event.stopPropagation();\n    }\n  });\n};\n\nexport const markPickerClosed = (table?: unknown) => {\n  if (table == null || typeof table !== 'object') return;\n  pickerClosedAt.set(table as object, Date.now());\n};\n\nexport const pickerJustClosed = (table?: unknown) => {\n  if (table == null || typeof table !== 'object') return false;\n  const at = pickerClosedAt.get(table as object);\n  return at != null && Date.now() - at < 160;\n};\n\nconst POPUP_SELECTOR = '.ant-picker-dropdown, .ant-picker-panel-container, .ant-picker-footer';\n\n/** 浮层离容器左右边缘留出的缝。贴边看起来像是被裁掉。 */\nconst EDGE_GUTTER = 8;\n\n/**\n * 水平方向把浮层收进容器：右缘放不下先向左回移，回移到头还放不下就收窄。\n *\n * `rect` 是相对**容器**（VTable 传进来的 container 就是 `table.getElement()`）的，所以夹取的\n * 右界取 `container.clientWidth`，与 `left` 同源。保的是「在容器可视宽度内展示全」，不是视口。\n *\n * **调用方必须先把浮层挂进容器**，否则这里读不到 `parentElement`，夹取被整条跳过。\n */\nconst clampHorizontal = (\n  element: HTMLElement,\n  rect: RectProps,\n  desiredWidth: number,\n): { left: number; width: number } => {\n  const containerWidth = element.parentElement?.clientWidth;\n  const left = rect.left - 1;\n  if (containerWidth == null || containerWidth <= 0) return { left, width: desiredWidth };\n\n  // 容器比浮层还窄（窄容器 / 窄视口里的表）时只能收窄：光回移左缘也顶不住，右侧照样探出去。\n  const width = Math.min(desiredWidth, Math.max(containerWidth - EDGE_GUTTER * 2, 1));\n  const maxLeft = Math.max(containerWidth - width - EDGE_GUTTER, EDGE_GUTTER);\n\n  return { left: Math.min(left, maxLeft), width };\n};\n\nexport const applyOverlayBox = (element: HTMLElement, rect: RectProps) => {\n  const { left, width } = clampHorizontal(element, rect, Math.max(rect.width + 2, 240));\n  element.style.top = `${rect.top - 1}px`;\n  element.style.left = `${left}px`;\n  element.style.width = `${width}px`;\n  element.style.minHeight = `${Math.max(rect.height, 32)}px`;\n  element.style.height = `${Math.max(rect.height, 32)}px`;\n};\n\n/**\n * `rect` 是**相对表格**的，而 `window.innerHeight` 是视口单位 —— 翻转判断必须加上表格自己在\n * 视口里的位置，否则两者不同源、算式再对也不成立。\n *\n * 曾经这里取的是 `element.parentElement` 的 top。挂载点未必就是 `rect` 的基准元素（VTable 传进来\n * 的 container 与表格元素不是同一个），实测面板超出视口 105px 却完全不翻转 —— 而单看算式\n * （`containerTop + belowTop + estimatedHeight > innerHeight`）是满足翻转条件的。\n */\n/** 面板的最大高度，翻转判断按它估高（见 `placePicker`）。**必须与 `styles.picker` 的\n * `max-height` 一致**：`placePicker` 优先读计算样式，这里是读不到时的兜底。 */\nconst PANEL_MAX_HEIGHT = 320;\n\nexport const placePicker = (element: HTMLElement, rect: RectProps, minWidth = 240, baseTop = 0) => {\n  const { left, width } = clampHorizontal(element, rect, Math.max(rect.width + 2, minWidth));\n  // 用面板的 max-height 估高，**不能用 `scrollHeight`**：`attach` 刚把高度设成单元格高度，\n  // 而且 React 的首次渲染还没落地 —— 此刻 scrollHeight 是 36 之类的中间值（不是 0，所以连\n  // `|| 240` 的兜底都救不回来），翻转判断因此算出「放得下」，而实际超出视口 105px 却完全不翻。\n  const estimatedHeight =\n    Number.parseFloat(getComputedStyle(element).maxHeight) || PANEL_MAX_HEIGHT;\n  const belowTop = rect.top + rect.height + 4;\n  let top = belowTop;\n\n  if (typeof window !== 'undefined' && baseTop + belowTop + estimatedHeight > window.innerHeight) {\n    top = Math.max(rect.top - estimatedHeight - 4, 0);\n  }\n\n  element.style.top = `${top}px`;\n  element.style.left = `${left}px`;\n  // min-width 跟着夹取后的宽度写：照 minWidth 原样写会在窄容器里把面板重新顶宽。\n  element.style.minWidth = `${width}px`;\n  element.style.width = `${width}px`;\n  element.style.height = 'auto';\n  element.style.maxHeight = `${PANEL_MAX_HEIGHT}px`;\n};\n\nexport const detach = (element?: HTMLElement) => {\n  element?.parentElement?.removeChild(element);\n};\n\nconst COPY_ICON =\n  '<svg fill=\"none\" height=\"14\" viewBox=\"0 0 16 16\" width=\"14\"><rect height=\"8\" rx=\"1.5\" stroke=\"currentColor\" width=\"8\" x=\"5\" y=\"5\"/><path d=\"M3 11V4.5A1.5 1.5 0 0 1 4.5 3H11\" stroke=\"currentColor\" stroke-linecap=\"round\"/></svg>';\n\nexport const createCopyButton = (getValue: () => string, table?: unknown) => {\n  const button = document.createElement('button');\n  button.type = 'button';\n  button.className = styles.copyButton;\n  button.setAttribute('aria-label', tableText(table, 'copy'));\n  button.innerHTML = COPY_ICON;\n  button.addEventListener('mousedown', (event) => event.preventDefault());\n  button.addEventListener('click', (event) => {\n    event.preventDefault();\n    event.stopPropagation();\n    void copyToClipboard(getValue());\n  });\n\n  return button;\n};\n\n/** 提交被拒时打在编辑器宿主上的属性，样式见 `styles.editor`。 */\nexport const INVALID_ATTR = 'data-superad-invalid';\n\n/**\n * 提交被拒时给出**可见**反馈。静默拒绝和静默改型一样糟：用户按了回车，什么都没发生。\n */\nexport const markEditorInvalid = (host?: HTMLElement): void => {\n  host?.setAttribute(INVALID_ATTR, '');\n};\n\n/** 重新编辑即清掉非法态，否则用户改对了还是红的。 */\nexport const watchEditorValidity = (host: HTMLElement, input: HTMLElement): void => {\n  input.addEventListener('input', () => host.removeAttribute(INVALID_ATTR));\n};\n\n/**\n * 点在编辑器**外面**就提交（inline 编辑器用，picker 走自己的 `onDocumentPointerDown`）。\n *\n * 引擎的提交手势只有三类，**全部绑在 canvas 或表元素上**：canvas 上的 pointerdown、\n * `table.getElement()` 上的 Enter/Tab/Escape/方向键。于是「打开编辑器 → 输入 → 点页面别处」\n * 这条路什么都不触发：编辑器既不提交也不关闭，用户以为已经保存。表随后被卸载/更新时走的是\n * `cancelEditCell`（不写值），输入就此**静默丢失**。\n *\n * 返回解绑函数，`onEnd` 里调用。\n */\nexport const watchOutsideCommit = (host: HTMLElement, getTable: () => unknown): (() => void) => {\n  const onPointerDown = (event: PointerEvent) => {\n    if (host.contains(event.target as Node)) return;\n\n    (getTable() as { completeEditCell?: () => void } | undefined)?.completeEditCell?.();\n  };\n\n  document.addEventListener('pointerdown', onPointerDown, true);\n\n  return () => document.removeEventListener('pointerdown', onPointerDown, true);\n};\n\n/**\n * 编辑器渲染在**自己的 React root** 里（`createRoot(mount)`，由 VTable 的编辑器协议驱动），\n * 而 React context 不跨 root —— 这里这个 `ConfigProvider` 拿不到外层 `ThemeProvider` 的主题，\n * 不显式传 `theme` 就会退回 antd 默认（主色 `#1677ff` 的蓝）。\n *\n * 实测：日期面板的「此刻 / 确定」按钮与选中日期都是 `rgb(22,119,255)`，而本项目的\n * `--ant-color-primary` 是 `#222222`（近黑）。同一个 root 里所有 antd 组件（Input / Empty /\n * Avatar…）都受这一条影响。主题由 `table.__superadTheme` 送进来，与 canvas 调色板走同一条通道\n * （见 `useTableRenderState`）。\n *\n * 弹层仍然 portal 到 `document.body`：挂进表格容器的话，鼠标扫过弹层会命中表格的\n * pointermove，凭空点亮 hover 悬浮框。\n */\nconst wrapEditor = (node: ReactNode, theme?: ThemeConfig, locale?: string) => (\n  <ConfigProvider\n    getPopupContainer={() => document.body}\n    locale={antdLocaleFor(locale)}\n    theme={theme}\n  >\n    {node}\n  </ConfigProvider>\n);\n\n/**\n * 提交时**自己补写一次**。\n *\n * 引擎在「分组 + 树」的**嵌套行**上写入会失败：`_CachedDataSource` 映射不到记录，\n * `changeCellValues` **静默无操作**（`changeCellValue` 则直接抛\n * `TypeError: Cannot read properties of undefined (reading 'toString')`）。\n * 症状是「编辑完值不见了」，而且整张表和原始 records 里都找不到它 —— 触发条件是\n * **有子节点的行**，以及**嵌在它们下面的行**，平铺表完全不受影响。\n *\n * 这里按 `getCellOriginRecord` 拿到记录对象直接写；调用方再返回 `invalidateExit`，\n * 引擎会 `setValue(旧值)` + `doExit()` —— 它自己那次写入本来就会失败，不影响我们写进去\n * 的值。正常行上是同值重写，无害。\n *\n * `invalidateExit` 会调 `setValue` 回滚，值已由这里写好，所以调用方给个空实现即可。\n *\n * 注意：inline 那三个编辑器**没有继承 `ReactEditor`**（它们是独立类、只 implements 接口），\n * 所以这里是自由函数而不是基类方法 —— 只挂在基类上会漏掉它们。\n */\nexport const writeBackOnCommit = (editor: {\n  getValue: () => unknown;\n  table?: unknown;\n  cancelled?: boolean;\n}): void => {\n  const table = editor.table as\n    | {\n        editorManager?: { editCell?: { col: number; row: number } };\n        getBodyColumnDefine?: (col: number, row: number) => { field?: string } | undefined;\n        getCellOriginRecord?: (col: number, row: number) => Record<string, unknown> | undefined;\n      }\n    | undefined;\n  const cell = table?.editorManager?.editCell;\n\n  if (table == null || cell == null || editor.cancelled === true) return;\n\n  const record = table.getCellOriginRecord?.(cell.col, cell.row);\n  const field = table.getBodyColumnDefine?.(cell.col, cell.row)?.field;\n  const value = editor.getValue();\n\n  if (record != null && field != null && record[field] !== value) {\n    record[field] = value;\n    updateCellContent(table as never, cell.col, cell.row);\n    updateNextFrame(table as never);\n  }\n};\n\nexport abstract class ReactEditor<V> implements IEditor<V>, TableEditor {\n  kind: EditorKind = 'inline';\n  protected current!: V;\n  protected original!: V;\n  protected cancelled = false;\n  protected ended = false;\n  protected endEdit?: () => void;\n  protected mount?: HTMLDivElement;\n  /** picker 关闭要靠它标明是哪张表，所以 onStart 里要把它存下来。 */\n  protected table?: unknown;\n  private root?: Root;\n\n  abstract onStart(context: EditContext<V>): void;\n\n  protected attach(container: HTMLElement, rect: RectProps, className = styles.editor) {\n    const mount = document.createElement('div');\n    mount.className = className;\n\n    // 先挂进容器再定位：applyOverlayBox / placePicker 的水平夹取要读 parentElement.clientWidth。\n    container.appendChild(mount);\n    applyOverlayBox(mount, rect);\n    // 面板里的搜索框 / antd 日期输入框都在表元素内部，Ctrl+A 同样会被引擎吞掉（见\n    // `keepSelectAllInEditor`）。\n    keepSelectAllInEditor(mount);\n    document.addEventListener('pointerdown', this.onDocumentPointerDown, true);\n\n    this.mount = mount;\n    this.root = createRoot(mount);\n  }\n\n  /**\n   * 提交前的收尾钩子。`ArrayEditor` 用它把**还没回车**的草稿收进值里：document 的捕获\n   * pointerdown 先于输入框的 blur 跑，等到 blur 再 `commitDraft` 已经晚了（编辑器已结束）。\n   */\n  protected beforeFinish(): void {}\n\n  private onDocumentPointerDown = (event: PointerEvent) => {\n    if (this.mount && this.isEditorElement(event.target as HTMLElement) === false) {\n      // 点面板外 = 提交，不是取消。inline 编辑器在 VTable 那边走的是 completeEdit（提交），\n      // picker 若在这里判取消，多选（tag / user 默认 multiple）就完全没有提交手势 —— 每勾\n      // 一项只重绘不 finish，用户点走即整份丢弃。取消只剩 Escape。\n      this.beforeFinish();\n      this.finish();\n    }\n  };\n\n  validateValue(): ValidateEnum {\n    writeBackOnCommit(this as never);\n    return ValidateEnum.invalidateExit;\n  }\n\n  /** `invalidateExit` 会调它回滚，值已由 `writeBackOnCommit` 写好 —— 空实现即可。 */\n  setValue(): void {}\n\n  protected paint(node: ReactNode) {\n    this.root?.render(wrapEditor(node, this.antdTheme(), readTableI18n(this.table).locale));\n  }\n\n  /**\n   * 当前主题。由 `createTableOption` 写进 `customConfig`（与 `__superadPalette` 同一条通道），\n   * 主题变化时随 option 重建一起更新。\n   */\n  protected antdTheme(): ThemeConfig | undefined {\n    return (\n      this.table as\n        | {\n            __superadTheme?: ThemeConfig;\n            options?: { customConfig?: { __superadTheme?: ThemeConfig } };\n          }\n        | undefined\n    )?.options?.customConfig?.__superadTheme;\n  }\n\n  /** 表格元素在视口里的顶边 —— `rect` 是相对表格的，翻转判断要拿它换算。 */\n  protected tableTop(): number {\n    const element = (this.table as { getElement?: () => HTMLElement } | undefined)?.getElement?.();\n    return element ? element.getBoundingClientRect().top : 0;\n  }\n\n  protected finish() {\n    if (this.ended) return;\n    this.ended = true;\n    this.endEdit?.();\n  }\n\n  getValue() {\n    return this.cancelled ? this.original : this.current;\n  }\n\n  onEnd() {\n    if (this.kind === 'picker') markPickerClosed(this.table);\n    document.removeEventListener('pointerdown', this.onDocumentPointerDown, true);\n    this.root?.unmount();\n    detach(this.mount);\n    this.root = undefined;\n    this.mount = undefined;\n    this.endEdit = undefined;\n  }\n\n  isEditorElement(target: HTMLElement) {\n    return Boolean(\n      this.mount?.contains(target) ||\n      (typeof target?.closest === 'function' && target.closest(POPUP_SELECTOR)),\n    );\n  }\n\n  adjustPosition(rect: RectProps) {\n    if (this.mount) applyOverlayBox(this.mount, rect);\n  }\n}\n\n/**\n * Shared picker for list-backed editors (options, people, …). The panel, the search\n * box and the keyboard handling are identical across them, so they live here once and\n * each editor supplies only its item shape through the hooks below.\n */\nexport abstract class ListPickerEditor<TItem, V> extends ReactEditor<V> {\n  kind: EditorKind = 'picker';\n  protected activeIndex = 0;\n  protected multiple: boolean;\n  protected query = '';\n  protected selected: TItem[] = [];\n\n  constructor(multiple = false) {\n    super();\n    this.multiple = multiple;\n  }\n\n  /** Every candidate, before the search query is applied. */\n  protected abstract candidates(): TItem[];\n  /** The items a cell value names. */\n  protected abstract fromValue(value: V): TItem[];\n  /** Stable identity, used for React keys and for equality. */\n  protected abstract keyOf(item: TItem): string;\n  protected abstract matches(item: TItem, query: string): boolean;\n  /** 候选列表里一行长什么样。已选项只靠行尾的 ✓ 标出来，面板顶部不再另起一排 chip。 */\n  protected abstract renderRow(item: TItem): ReactNode;\n  /** The value the cell keeps for the current selection. */\n  protected abstract publish(items: TItem[]): V;\n\n  /** 搜索框的占位文案。各 picker 自己说清楚搜的是什么。 */\n  protected searchPlaceholder(): string {\n    return tableText(this.table, 'search');\n  }\n\n  /**\n   * 面板的最小宽度。默认 240（Notion 人员 / 选项浮层实测宽度）；\n   * 地址表单要更宽，因为它是两列字段。\n   */\n  protected panelMinWidth(): number {\n    return 240;\n  }\n\n  onStart({ container, endEdit, referencePosition, table, value }: EditContext<V>) {\n    this.table = table;\n    this.ended = false;\n    this.cancelled = false;\n    this.endEdit = endEdit;\n    this.original = value;\n    this.query = '';\n    this.activeIndex = 0;\n    this.selected = this.fromValue(value);\n    this.initialKeys = this.selectedKeys();\n    this.syncCurrent();\n    this.attach(container, referencePosition.rect, styles.picker);\n    this.place(referencePosition.rect);\n    this.paint(this.panel());\n  }\n\n  adjustPosition(rect: RectProps) {\n    this.place(rect);\n  }\n\n  /** 打开那一刻选中项的键快照 —— 用来判断用户到底动没动过。 */\n  private initialKeys = '';\n\n  private selectedKeys(): string {\n    return this.selected\n      .map((item) => this.keyOf(item))\n      .sort()\n      .join('\\u0000');\n  }\n\n  protected syncCurrent() {\n    // **没动过就原样回传使用方的值。** `fromValue` → `publish` 是一次归一化往返：\n    // `'a@b.com'` 会变成 `['a@b.com']`、`{ name }` 会变成 `[{ name }]`。而单击即开、\n    // 点面板外即提交 —— 用户只是看了一眼再点走，照归一化结果写回去就是**静默改型**：\n    // 使用方按 string 读该字段的代码从此拿到数组。inline 编辑器一直守着这条\n    // （`raw === this.displayed ? this.original : raw`），picker 这边漏了。\n    this.current =\n      this.selectedKeys() === this.initialKeys ? this.original : this.publish(this.selected);\n  }\n\n  private place(rect: RectProps) {\n    if (this.mount) placePicker(this.mount, rect, this.panelMinWidth(), this.tableTop());\n  }\n\n  private visible() {\n    return this.candidates().filter((item) => this.matches(item, this.query));\n  }\n\n  private has(item: TItem) {\n    const key = this.keyOf(item);\n    return this.selected.some((entry) => this.keyOf(entry) === key);\n  }\n\n  private removeSelected(item: TItem) {\n    const key = this.keyOf(item);\n    this.selected = this.selected.filter((entry) => this.keyOf(entry) !== key);\n    this.syncCurrent();\n    // candidates() 可能回退成已选项（UserEditor 没传 users 时就是这样），删一个 chip 就会\n    // 让候选列变短。不夹紧的话 activeIndex 越界，Enter 静默失效且没有任何行是高亮的。\n    // 下界也要夹：候选清空时 `length - 1` 是 -1，留个负数会让后面每次 paint 都不高亮任何行。\n    this.activeIndex = Math.max(0, Math.min(this.activeIndex, this.visible().length - 1));\n    this.paint(this.panel());\n  }\n\n  private toggle(item: TItem) {\n    if (this.multiple === false) {\n      // **再点一次已选中的那一项 = 取消**。单选没有别的手势能回到空值：「清空」行与面板顶部的\n      // 已选 chip 都已移除，而单元格 chip 上那颗 × 是纯鼠标的（span + onClick，不可聚焦）。\n      // 走这一条路，键盘也就通了（方向键 + 回车）。\n      this.selected = this.has(item) ? [] : [item];\n      this.syncCurrent();\n      this.finish();\n      return;\n    }\n\n    this.selected = this.has(item)\n      ? this.selected.filter((entry) => this.keyOf(entry) !== this.keyOf(item))\n      : [...this.selected, item];\n    this.syncCurrent();\n    this.paint(this.panel());\n  }\n\n  private moveActive(delta: number, rowCount: number) {\n    this.activeIndex = Math.min(Math.max(this.activeIndex + delta, 0), Math.max(rowCount - 1, 0));\n    this.paint(this.panel());\n  }\n\n  private selectActive(items: TItem[]) {\n    const item = items[this.activeIndex];\n    if (item) this.toggle(item);\n  }\n\n  private activate(index: number) {\n    if (this.activeIndex === index) return;\n    this.activeIndex = index;\n    this.paint(this.panel());\n  }\n\n  private panel() {\n    const items = this.visible();\n    const rowCount = items.length;\n\n    return (\n      <>\n        <Input\n          autoFocus\n          className={styles.pickerSearch}\n          placeholder={this.searchPlaceholder()}\n          size=\"middle\"\n          value={this.query}\n          variant=\"borderless\"\n          onChange={(event) => {\n            this.query = event.target.value;\n            this.activeIndex = 0;\n            this.paint(this.panel());\n          }}\n          onKeyDown={(event) => {\n            if (\n              event.key === 'Backspace' &&\n              this.query === '' &&\n              this.multiple &&\n              this.selected.length > 0\n            ) {\n              event.preventDefault();\n              event.stopPropagation();\n              const last = this.selected.at(-1);\n              if (last) this.removeSelected(last);\n              return;\n            }\n            if (event.key === 'ArrowDown') {\n              event.preventDefault();\n              event.stopPropagation();\n              this.moveActive(1, rowCount);\n              return;\n            }\n            if (event.key === 'ArrowUp') {\n              event.preventDefault();\n              event.stopPropagation();\n              this.moveActive(-1, rowCount);\n              return;\n            }\n            if (event.key === 'Enter') {\n              event.preventDefault();\n              event.stopPropagation();\n              this.selectActive(items);\n              return;\n            }\n            if (event.key === 'Escape') {\n              event.preventDefault();\n              event.stopPropagation();\n              this.cancelled = true;\n              this.finish();\n            }\n          }}\n        />\n        {items.length === 0 ? (\n          <Empty\n            description={tableText(this.table, 'noMatch')}\n            image={Empty.PRESENTED_IMAGE_SIMPLE}\n          />\n        ) : null}\n        {items.map((item, index) => (\n          <button\n            className={styles.pickerItem}\n            data-active={index === this.activeIndex ? 'true' : 'false'}\n            key={this.keyOf(item)}\n            type=\"button\"\n            onClick={() => this.toggle(item)}\n            onMouseEnter={() => this.activate(index)}\n          >\n            {this.renderRow(item)}\n            <span className={styles.check}>{this.has(item) ? '✓' : ''}</span>\n          </button>\n        ))}\n      </>\n    );\n  }\n}\n\nexport const isPickerEditor = (editor: unknown): editor is TableEditor =>\n  Boolean(\n    editor &&\n    typeof editor === 'object' &&\n    'kind' in editor &&\n    (editor as TableEditor).kind === 'picker',\n  );\n"],"mappings":"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"}