@keenaioc/data-view 0.2.0-alpha.12 → 0.2.0-alpha.15

package/dist/data-view.js

@@ -2,6 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Fragment, Children, useEffect, useId, useMemo, useRef, useState, } from "react";
 import { columnMovePeers, moveColumnSetting } from "./field-order.js";
+import { ActionMenu } from "./action-menu.js";
+import { rowActionItems, retainHistoryAfterRowDelete } from "./row-actions.js";
+import { rowGroupPaths } from "./row-move.js";
 import { ColumnMenu } from "./column-menu.js";
 import { headerItems, changeHeaderView, FieldActionForm, ColumnFilterForm, FilterValueInput } from "./column-actions.js";
 import { GroupSettings } from "./group-settings.js";
@@ -44,9 +47,14 @@ function DataViewInner(props) {
     const [scrollTop, setScrollTop] = useState(0);
     const [focus, setFocus] = useState(null);
     const [anchor, setAnchor] = useState(null);
+    const headerDragUntil = useRef(0);
+    const [attachmentTarget, setAttachmentTarget] = useState(null);
     const [detailId, setDetailId] = useState(null);
     const [dialog, setDialog] = useState(null);
     const menuId = useId();
+    const rowMenuId = useId();
+    const [rowMenu, setRowMenu] = useState(null);
+    const [rowDelete, setRowDelete] = useState(null);
     const [headerMenu, setHeaderMenu] = useState(null);
     const [fieldAction, setFieldAction] = useState(null);
     const [pending, setPending] = useState(null);
@@ -102,8 +110,9 @@ function DataViewInner(props) {
     } }; window.addEventListener("beforeunload", leave); return () => window.removeEventListener("beforeunload", leave); }, []);
     const selected = selectedRowIds ?? localSelected;
     const selectable = permissions?.canSelectRows !== false;
-    const controlColumn = selectable || !!props.rowMove || features.rowOpen === true;
-    const controlWidth = (selectable ? 32 : 0) + (props.rowMove ? 24 : 0) + (features.rowOpen === true ? 28 : 0);
+    const rowMenuEnabled = !!props.onRowChange && features.rowMenu !== false;
+    const controlColumn = selectable || !!props.rowMove || features.rowOpen === true || rowMenuEnabled;
+    const controlWidth = (selectable ? 32 : 0) + (props.rowMove ? 24 : 0) + (features.rowOpen === true ? 28 : 0) + (rowMenuEnabled ? 28 : 0);
     const move = useRowMove(props, activeView, rootRef, (id, action) => writes.current.run([id], action));
     const configurable = permissions?.canConfigureView !== false;
     const canManageFields = Boolean(onFieldChange && permissions?.canManageFields === true && access === "granted");
@@ -145,17 +154,31 @@ function DataViewInner(props) {
             setViewSaveState(e instanceof DataViewConflictError ? "conflict" : "failed"); });
     }
     function patchView(patch, scope = "layout") { setView({ ...viewRef.current, ...patch }, scope); }
+    const updateView = useRef(setView);
+    updateView.current = setView;
+    const stopResize = useRef(null);
+    useEffect(() => () => stopResize.current?.(), []);
     function patchLocation(patch) { patchView({ location: { ...viewRef.current.location, ...patch } }, "navigation"); }
     const query = useMemo(() => createDataViewQuery(activeView), [activeView.filters, activeView.sorts, activeView.groups, search]);
     const queryKey = dataViewQueryKey(query);
     const remoteStale = !!props.remote && props.remote.queryKey !== queryKey;
+    const rowContext = useRef({ props, query, queryKey, selected });
+    rowContext.current = { props, query, queryKey, selected };
+    useEffect(() => {
+        const unavailable = (target) => target && (target.queryKey !== queryKey || !rowMenuEnabled || access !== "granted" || loading || error || !rows.some(row => getRowId(row) === target.rowId));
+        if (unavailable(rowMenu))
+            setRowMenu(null);
+        if (unavailable(rowDelete))
+            setRowDelete(null);
+    }, [rows, queryKey, rowMenuEnabled, access, loading, error, rowMenu, rowDelete, getRowId]);
+    useEffect(() => { setRowMenu(null); setRowDelete(null); }, [props.presentation, activeView.viewType]);
     const queryCallback = useRef(props.onQueryChange);
     queryCallback.current = props.onQueryChange;
     const previousQuery = useRef(queryKey);
     useEffect(() => { if (access === "granted" && !loading && !error)
         queryCallback.current?.(query); }, [queryKey, props.onQueryChange, access, loading, error]);
     useEffect(() => { if (previousQuery.current === queryKey)
-        return; previousQuery.current = queryKey; setLocalSelected([]); onSelectionChange?.([]); setFocus(null); setAnchor(null); setEditing(null); setUndoStack([]); setRedoStack([]); }, [queryKey]);
+        return; previousQuery.current = queryKey; setLocalSelected([]); onSelectionChange?.([]); setFocus(null); setAnchor(null); setEditing(null); setUndoStack([]); setRedoStack([]); setAttachmentTarget(null); }, [queryKey]);
     const canFilter = permissions?.canFilter ?? configurable;
     const canSort = permissions?.canSort ?? configurable;
     const processedRows = useMemo(() => {
@@ -169,8 +192,8 @@ function DataViewInner(props) {
     const groups = fullGroups;
     const visible = useMemo(() => visibleFields(fields, activeView), [activeView, fields]);
     const tableColumnCount = visible.length + (controlColumn ? 1 : 0) + (canManageFields ? 1 : 0);
-    const pinnedOffsets = useMemo(() => getPinnedOffsets(activeView.columns, controlWidth), [activeView.columns, selectable]);
-    const ganttLeftOffsets = useMemo(() => getPinnedOffsets(activeView.columns, 44), [activeView.columns]);
+    const pinnedOffsets = useMemo(() => getPinnedOffsets(activeView.columns, controlWidth), [activeView.columns, controlWidth]);
+    const ganttLeftOffsets = useMemo(() => getPinnedOffsets(activeView.columns, 44 + (rowMenuEnabled ? 28 : 0)), [activeView.columns, rowMenuEnabled]);
     const ganttRightOffsets = useMemo(() => getRightPinnedOffsets(activeView.columns), [activeView.columns]);
     const tableWidth = visible.reduce((total, item) => total + item.column.width, (controlWidth) + addColumnWidth);
     const collapsed = useMemo(() => new Set(activeView.collapsedGroups), [activeView.collapsedGroups]);
@@ -198,7 +221,7 @@ function DataViewInner(props) {
         const field = fields.find((f) => f.id === id) ?? availableFields.find((f) => !f.renderAction && canRead(row, f));
         if (field && (field.internal || !canRead(row, field)))
             return "無權限";
-        return props.getRowLabel?.(row)?.trim() || (field ? formatReadableValue(getFieldValue(row, field), { ...field, internal: false }, row) : "") || "未命名工作";
+        return props.getRowLabel?.(row)?.trim() || (field ? formatReadableValue(getFieldValue(row, field), { ...field, internal: false }, row).trim() : "") || "未命名工作";
     }
     function openRow(row) { if (features.rowOpen === false)
         return; if (props.onRowOpen)
@@ -261,10 +284,16 @@ function DataViewInner(props) {
     }
     function resizeColumn(fieldId, startWidth, event) {
         event.preventDefault();
+        stopResize.current?.();
         const startX = event.clientX;
         function move(pointer) {
+            const current = rowContext.current.props;
+            if (current.access === "denied" || current.loading || current.error || current.permissions?.canConfigureView === false || !current.fields.some(field => field.id === fieldId && !field.internal) || !viewRef.current.columns.some(column => column.fieldId === fieldId && column.visible)) {
+                up();
+                return;
+            }
             const width = normalizeColumnWidth(startWidth + pointer.clientX - startX);
-            setView({
+            updateView.current({
                 ...viewRef.current,
                 columns: viewRef.current.columns.map((column) => column.fieldId === fieldId ? { ...column, width } : column),
             });
@@ -273,7 +302,10 @@ function DataViewInner(props) {
             window.removeEventListener("pointermove", move);
             window.removeEventListener("pointerup", up);
             window.removeEventListener("pointercancel", up);
+            if (stopResize.current === up)
+                stopResize.current = null;
         }
+        stopResize.current = up;
         window.addEventListener("pointermove", move);
         window.addEventListener("pointerup", up);
         window.addEventListener("pointercancel", up);
@@ -380,7 +412,18 @@ function DataViewInner(props) {
                         setEditing(null);
                         setCellStatuses((current) => ({ ...current, [key]: { state: "saving" } }));
                         try {
-                            await writes.current.run([rowId], () => onRequestAttachment({ row, rowId, field, files }));
+                            await writes.current.run([rowId], () => {
+                                const current = rowContext.current;
+                                const fresh = current.props.rows.find(row => current.props.getRowId(row) === rowId);
+                                const definition = current.props.fields.find(item => item.id === field.id);
+                                if (!fresh || !definition || definition.type !== field.type)
+                                    throw new DataViewConflictError("資料列或欄位已變更，請重新選擇附件");
+                                if (current.queryKey !== queryKey || current.props.remote && current.props.remote.queryKey !== current.queryKey)
+                                    throw new DataViewConflictError("查詢已變更，請重新選擇附件");
+                                if (!current.props.onRequestAttachment || current.props.access === "denied" || current.props.loading || current.props.error || current.props.remote?.loading || !canWriteField(fresh, definition, current.props.permissions))
+                                    throw new Error("沒有附件上傳權限或資料仍在載入");
+                                return current.props.onRequestAttachment({ row: fresh, rowId, field: definition, files });
+                            });
                             setCellStatuses((current) => ({ ...current, [key]: { state: "saved" } }));
                         }
                         catch (uploadError) {
@@ -393,9 +436,13 @@ function DataViewInner(props) {
         }
         if (field.type === "relation" && !field.Editor && !field.renderQuickView && !field.render && canWriteField(row, field, permissions) && (onBatchCommit || onCellCommit))
             return _jsxs("div", { className: "hy-dv-relation-cell", children: [_jsx(RelationSelect, { value: value, row: row, field: field, disabled: !canEdit(row, field), onCommit: (next) => void commitCell(row, field, next), onCancel: () => setEditing(null) }), status && _jsx(SaveBadge, { state: status.state, message: status.message })] });
+        if (field.type === "attachment" && surface !== "detail" && !field.render && !field.Editor && !field.renderQuickView) {
+            const count = spec.isEmpty(value) ? 0 : Array.isArray(value) ? value.length : 1;
+            return _jsxs("div", { className: "hy-dv-attachment-cell", children: [count > 0 || canEdit(row, field) ? _jsx("button", { type: "button", className: "hy-dv-attachment-count", "aria-haspopup": "dialog", "aria-label": `${readableLabel(row)} ${field.label}：${count ? `${count} 個附件，查看附件` : "新增附件"}`, title: count ? `${count} 個附件` : "新增附件", disabled: status?.state === "saving", onClick: () => { setAttachmentTarget({ rowId, fieldId: field.id }); setEditing(null); }, children: count > 0 ? `+${count}` : null }) : null, status && _jsx(SaveBadge, { state: status.state, message: status.message })] });
+        }
         if (field.type === "attachment")
             return _jsxs("div", { className: "hy-dv-attachment-cell", children: [(!spec.isEmpty(value) || !canEdit(row, field) || field.render) && renderFieldValue(value, field, row), canEdit(row, field) && _jsx("button", { className: "hy-dv-attachment-add", type: "button", "aria-label": "\u65B0\u589E\u9644\u4EF6", title: "\u65B0\u589E\u9644\u4EF6", onClick: () => setEditing({ rowId, fieldId: field.id, surface }), children: _jsx("svg", { "aria-hidden": "true", focusable: "false", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" }) }) }), status && _jsx(SaveBadge, { state: status.state, message: status.message })] });
-        return _jsxs("button", { type: "button", className: `hy-dv-cell-button ${canEdit(row, field) ? "is-editable" : ""} ${spec.toggleValue ? "is-toggle" : ""}`, role: spec.toggleValue ? "checkbox" : undefined, "aria-checked": spec.toggleValue ? Boolean(value) : undefined, "aria-label": spec.toggleValue ? `${rowId} ${field.label}` : undefined, "aria-busy": status?.state === "saving", tabIndex: surface === "desktop" ? -1 : undefined, onClick: (event) => {
+        return _jsxs("button", { type: "button", className: `hy-dv-cell-button ${canEdit(row, field) ? "is-editable" : ""} ${spec.toggleValue ? "is-toggle" : ""}`, role: spec.toggleValue ? "checkbox" : undefined, "aria-checked": spec.toggleValue ? Boolean(value) : undefined, "aria-label": spec.toggleValue ? `${readableLabel(row)} ${field.label}` : undefined, "aria-busy": status?.state === "saving", tabIndex: surface === "desktop" ? -1 : undefined, onClick: (event) => {
                 if (event.shiftKey && surface === "desktop")
                     return;
                 setFocus({ rowId, fieldId: field.id });
@@ -458,8 +505,8 @@ function DataViewInner(props) {
                 if (validation)
                     throw new Error(validation);
                 setOperation({ state: "saving", message: `正在儲存 ${changes.length} 格` });
-                await onBatchCommit({ ...request, changes });
-                if (features.undo !== false && request.reason !== "undo" && request.reason !== "redo") {
+                const result = await onBatchCommit({ ...request, changes });
+                if (features.undo !== false && request.reason !== "undo" && request.reason !== "redo" && result?.history !== "skip") {
                     setUndoStack((stack) => [...stack.slice(-19), { changes: changes.map((c) => ({ ...c, previousValue: structuredClone(c.previousValue), nextValue: structuredClone(c.nextValue) })), scheduleGuard: request.scheduleGuard ? structuredClone(request.scheduleGuard) : undefined }]);
                     setRedoStack([]);
                 }
@@ -487,6 +534,76 @@ function DataViewInner(props) {
         setDialog("review");
         setEditing(null);
     }
+    function rowOperationBlocked() {
+        const current = rowContext.current;
+        return busyRef.current || busy || !current.props.onRowChange || current.props.features?.rowMenu === false || current.props.access === "denied" || !!current.props.loading || !!current.props.error || !!current.props.remote?.loading || (!!current.props.remote && current.props.remote.queryKey !== current.queryKey);
+    }
+    function showRowMenu(row, anchor, point) {
+        if (rowOperationBlocked())
+            return;
+        setHeaderMenu(null);
+        setRowDelete(null);
+        setRowMenu({ rowId: getRowId(row), anchor, point, queryKey });
+    }
+    function rowContextEvent(row, event) {
+        if (!rowMenuEnabled || rowOperationBlocked() || event.defaultPrevented)
+            return;
+        if (event.type !== "contextmenu" && !("key" in event && (event.key === "ContextMenu" || event.key === "F10" && event.shiftKey)))
+            return;
+        const target = event.target;
+        if (target.closest?.("input,textarea,select,a,[contenteditable]:not([contenteditable='false']),.hy-dv-action-cell,.hy-dv-editor-wrap"))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const anchor = target.closest?.("[data-hy-cell]") ?? event.currentTarget;
+        showRowMenu(row, anchor, event.type === "contextmenu" && "clientX" in event ? { x: event.clientX, y: event.clientY } : undefined);
+    }
+    function rowMenuTrigger(row) {
+        return rowMenuEnabled && _jsx("button", { type: "button", className: "hy-dv-row-menu-trigger", "aria-label": `${readableLabel(row)}資料列操作`, title: "\u8CC7\u6599\u5217\u64CD\u4F5C", "aria-haspopup": "menu", "aria-expanded": rowMenu?.rowId === getRowId(row), "aria-controls": rowMenu?.rowId === getRowId(row) ? rowMenuId : undefined, disabled: rowOperationBlocked(), onPointerDown: event => event.stopPropagation(), onClick: event => { event.stopPropagation(); showRowMenu(row, event.currentTarget); }, children: "\u22EF" });
+    }
+    async function applyRowChange(action, target) {
+        if (rowOperationBlocked())
+            return false;
+        busyRef.current = true;
+        setOperation({ state: "saving", message: action === "delete" ? "正在刪除此筆…" : "正在新增一筆…" });
+        try {
+            await writes.current.run(["*"], async () => {
+                const current = rowContext.current;
+                const row = current.props.rows.find(row => current.props.getRowId(row) === target.rowId);
+                if (target.queryKey !== current.queryKey || current.props.remote && current.props.remote.queryKey !== current.queryKey)
+                    throw new DataViewConflictError("查詢已變更，請重新選擇資料列");
+                if (!row)
+                    throw new DataViewConflictError("資料列已不存在，請重新選擇");
+                if (!current.props.onRowChange || current.props.features?.rowMenu === false || current.props.access === "denied" || current.props.loading || current.props.error || current.props.remote?.loading || current.props.permissions?.canChangeRow?.(row, action) !== true)
+                    throw new Error("沒有此列操作權限或資料仍在載入");
+                const path = rowGroupPaths([row], current.props.fields, current.query.groups, current.props.getRowId).rowPaths.get(target.rowId) ?? [];
+                if (action !== "delete" && (path.length !== current.query.groups.length || path.some(p => p.valueKey === "__restricted__")))
+                    throw new Error("無法在不可讀的分組新增資料");
+                await current.props.onRowChange({ id: newOperationId(), action, row, rowId: target.rowId, groupPath: path, query: structuredClone(current.query) });
+            });
+            if (action === "delete") {
+                setUndoStack(stack => retainHistoryAfterRowDelete(stack, target.rowId));
+                setRedoStack(stack => retainHistoryAfterRowDelete(stack, target.rowId));
+                changeSelection(rowContext.current.selected.filter(id => id !== target.rowId));
+                setFocus(current => current?.rowId === target.rowId ? null : current);
+                setAnchor(current => current?.rowId === target.rowId ? null : current);
+                setEditing(current => current?.rowId === target.rowId ? null : current);
+                setDetailId(current => current === target.rowId ? null : current);
+                setAttachmentTarget(current => current?.rowId === target.rowId ? null : current);
+                setQuick(current => current?.rowId === target.rowId ? null : current);
+                setRowDelete(null);
+            }
+            setOperation({ state: "saved", message: action === "delete" ? "已刪除此筆" : "已新增一筆；顯示位置依目前排序、分組與篩選" });
+            return true;
+        }
+        catch (error) {
+            reportFailure(error);
+            return false;
+        }
+        finally {
+            busyRef.current = false;
+        }
+    }
     async function applyFieldChange(change) {
         if (!onFieldChange || busyRef.current || latest.current.access !== "granted")
             return false;
@@ -498,7 +615,15 @@ function DataViewInner(props) {
         busyRef.current = true;
         setOperation({ state: "saving", message: "正在儲存欄位結構" });
         try {
-            await writes.current.run(["*"], () => onFieldChange(change));
+            await writes.current.run(["*"], () => {
+                const current = rowContext.current.props;
+                if (!current.onFieldChange || current.access === "denied" || current.loading || current.error)
+                    throw new Error("沒有管理欄位的權限或資料仍在載入");
+                const validation = validateFieldChange(current.fields, change, current.permissions);
+                if (validation)
+                    throw new Error(validation);
+                return current.onFieldChange(change);
+            });
             setUndoStack([]);
             setRedoStack([]);
             setFocus(null);
@@ -628,6 +753,14 @@ function DataViewInner(props) {
             event.preventDefault();
             const row = desktopRows[range.row];
             const field = visible[range.col].field;
+            const attachmentCount = event.target.closest("td")?.querySelector(".hy-dv-attachment-count");
+            if (attachmentCount) {
+                if (!attachmentCount.disabled) {
+                    attachmentCount.focus();
+                    attachmentCount.click();
+                }
+                return;
+            }
             const relationSelect = event.target.closest("td")?.querySelector(".hy-dv-relation-select");
             if (relationSelect && !relationSelect.disabled) {
                 relationSelect.focus();
@@ -711,15 +844,35 @@ function DataViewInner(props) {
     }
     const range = gridRange();
     const desktopRowIndices = new Map(desktopRows.map((row, index) => [getRowId(row), index]));
-    return _jsxs("section", { ref: rootRef, className: `hy-dv density-${activeView.density ?? "standard"} presentation-${props.presentation ?? "auto"} chrome-${props.chrome ?? "standard"} ${props.height !== undefined ? "has-total-height" : ""}`, style: { height: props.height, "--hy-row-height": `${rowHeight}px`, "--hy-header-height": `${metrics.headerHeight}px`, "--hy-group-height": `${metrics.groupHeight}px`, "--hy-cell-font": `${metrics.cellFontSize}px`, "--hy-cell-line": `${metrics.cellLineHeight}px`, "--hy-header-font": `${metrics.headerFontSize}px`, "--hy-cell-padding": `${metrics.cellPadding}px`, "--hy-header-left": `${metrics.headerPaddingLeft}px`, "--hy-header-right": `${metrics.headerPaddingRight}px`, "--hy-control-height": `${metrics.controlHeight}px`, "--hy-action-height": `${metrics.actionHeight}px`, "--hy-badge-height": `${metrics.badgeHeight}px`, "--hy-badge-font": `${metrics.badgeFontSize}px`, "--hy-badge-padding": `${metrics.badgePadding}px`, "--hy-viewport-height": typeof props.viewportHeight === "number" ? `${props.viewportHeight}px` : props.viewportHeight ?? "560px", "--hy-scrollbar-height": `${metrics.scrollbarHeight}px`, "--hy-scrollbar-thumb": `${metrics.scrollbarThumb}px` }, "aria-label": title, onKeyDown: handleKey, onCopy: handleCopy, onPaste: handlePaste, children: [_jsxs("div", { className: "hy-dv-heading", children: [_jsxs("header", { className: "hy-dv-titlebar", children: [props.headerStart, _jsxs("div", { children: [_jsx("h2", { children: title }), _jsx("span", { children: props.remote ? `符合 ${remoteStale ? "…" : props.remote.total ?? "…"} 筆，已載入 ${processedRows.length} 筆${props.remote.complete && !remoteStale ? "（完整）" : "（尚未完整）"}` : `${processedRows.length} / ${rows.length} 筆` })] }), _jsxs("div", { className: "hy-dv-title-status", children: [selected.length > 0 && _jsxs("span", { children: ["\u5DF2\u9078 ", selected.length, " \u7B46"] }), !props.hideViewSaveStatus && _jsx(SaveBadge, { state: viewSaveState, prefix: "\u6AA2\u8996" }), !props.hideViewSaveStatus && (viewSaveState === "failed" || viewSaveState === "conflict") && _jsx("button", { onClick: () => setView(viewRef.current), children: "\u91CD\u8A66\u5132\u5B58" })] }), props.headerEnd] }), features.viewTabs !== false && _jsxs("nav", { className: "hy-dv-view-tabs", "aria-label": "\u8CC7\u6599\u8996\u5716", children: [[["table", "資料表格"], ["gantt", "甘特圖"], ["calendar", "行事曆"]].map(([type, label]) => _jsx("button", { "aria-pressed": activeView.viewType === type, disabled: permissions?.canSwitchView === false, onClick: () => { patchView({ viewType: type }, configurable ? "layout" : "navigation"); setEditing(null); setPanel(null); }, children: label }, type)), configurable && features.viewSettings !== false && _jsx("button", { onClick: () => setPanel(panel === "settings" ? null : "settings"), children: activeView.viewType === "gantt" ? "甘特圖設定" : activeView.viewType === "calendar" ? "行事曆設定" : "視圖設定" })] })] }), _jsxs(DataViewToolbar, { compact: props.chrome === "compact", start: props.toolbarStart, end: props.toolbarEnd, secondary: _jsxs(_Fragment, { children: [configurable && features.columns !== false && _jsx(ToolbarButton, { active: panel === "columns", onClick: () => setPanel(panel === "columns" ? null : "columns"), children: "\u96FB\u8166\u8868\u683C\u6B04\u4F4D" }), configurable && features.colors !== false && _jsx(ToolbarButton, { active: panel === "colors", onClick: () => setPanel(panel === "colors" ? null : "colors"), children: "\u586B\u8272" }), canManageFields && _jsxs(_Fragment, { children: [_jsx(ToolbarButton, { onClick: () => { setPanel(null); setDialog("add-field"); }, children: "\uFF0B \u65B0\u589E\u6B04\u4F4D" }), _jsx(ToolbarButton, { onClick: () => { setPanel(null); setDialog("fields"); }, children: "\u7BA1\u7406\u6B04\u4F4D" })] }), onBatchCommit && _jsxs(_Fragment, { children: [features.batch !== false && _jsxs("button", { disabled: !selectedRows.length || busy, onClick: () => { setPanel(null); setDialog("batch"); }, children: ["\u6279\u6B21\u4FEE\u6539 ", selectedRows.length || ""] }), features.undo !== false && _jsx("button", { disabled: !undoStack.length || busy, onClick: () => void historyAction("undo"), children: "\u5FA9\u539F" }), features.redo !== false && _jsx("button", { disabled: !redoStack.length || busy, onClick: () => void historyAction("redo"), children: "\u91CD\u505A" })] }), selected.length > 0 && _jsx(ToolbarButton, { onClick: () => changeSelection([]), children: "\u6E05\u9664\u9078\u53D6" }), activeView.groups.length > 0 && permissions?.canCollapseGroups !== false && _jsxs(_Fragment, { children: [_jsx(ToolbarButton, { onClick: () => setAllGroups(true), children: "\u5168\u90E8\u6536\u5408" }), _jsx(ToolbarButton, { onClick: () => setAllGroups(false), children: "\u5168\u90E8\u5C55\u958B" })] })] }), children: [features.search !== false && permissions?.canSearch !== false && _jsxs("label", { className: "hy-dv-search", children: [_jsx("span", { "aria-hidden": true, children: "\u2315" }), _jsx("input", { "aria-label": searchPlaceholder, value: search, onChange: (event) => patchLocation({ search: event.target.value, tableTop: 0, ganttTop: 0 }), placeholder: searchPlaceholder })] }), canFilter && features.filter !== false && _jsxs(ToolbarButton, { active: panel === "filter" || activeView.filters.rules.length > 0, onClick: () => setPanel(panel === "filter" ? null : "filter"), children: ["\u7BE9\u9078 ", activeView.filters.rules.length || ""] }), canSort && features.sort !== false && _jsxs(ToolbarButton, { active: panel === "sort" || activeView.sorts.length > 0, onClick: () => setPanel(panel === "sort" ? null : "sort"), children: ["\u6392\u5E8F ", activeView.sorts.length || ""] }), configurable && features.group !== false && _jsxs(ToolbarButton, { active: panel === "group" || activeView.groups.length > 0, onClick: () => setPanel(panel === "group" ? null : "group"), children: ["\u5206\u7D44 ", activeView.groups.length || ""] }), props.onPresentationChange && _jsxs("select", { "aria-label": "\u5448\u73FE\u65B9\u5F0F", value: props.presentation ?? "auto", onChange: (e) => props.onPresentationChange?.(e.target.value), children: [_jsx("option", { value: "auto", children: "\u81EA\u52D5" }), _jsx("option", { value: "table", children: "\u8868\u683C" }), _jsx("option", { value: "cards", children: "\u5361\u7247" })] })] }), move.message && _jsx("p", { role: "status", children: move.message }), operation.state !== "idle" && _jsxs("div", { className: `hy-dv-operation is-${operation.state}`, role: operation.state === "failed" || operation.state === "conflict" ? "alert" : "status", children: [_jsx(SaveBadge, { state: operation.state }), _jsx("span", { children: operation.message })] }), panel && (configurable || panel === "filter" && canFilter || panel === "sort" && canSort) && _jsxs("div", { className: "hy-dv-panel-wrap", children: [panel === "filter" && _jsx(FilterPanel, { fields: availableFields, view: activeView, onChange: (v) => setView(v, "query"), onClose: () => setPanel(null) }), panel === "sort" && _jsx(SortPanel, { fields: availableFields, view: activeView, onChange: (v) => setView(v, "query"), onClose: () => setPanel(null) }), panel === "group" && _jsx(PanelShell, { title: "\u5206\u7D44\u8A2D\u5B9A", onClose: () => setPanel(null), children: _jsx(GroupSettings, { fields: fields, rows: remoteStale ? [] : rows, view: activeView, onChange: setView }) }), panel === "columns" && _jsx(ColumnPanel, { fields: availableFields, view: { ...activeView, columns: activeView.columns.filter((c) => availableFields.some((f) => f.id === c.fieldId)) }, onChange: setView, onClose: () => setPanel(null), dragged: draggedColumn, setDragged: setDraggedColumn, drop: dropColumn }), panel === "settings" && _jsx(PanelShell, { title: "\u8996\u5716\u8A2D\u5B9A", onClose: () => setPanel(null), children: _jsx(ViewSettings, { fields: availableFields, view: activeView, onChange: setView }) }), panel === "colors" && _jsx(PanelShell, { title: "\u586B\u8272\u898F\u5247", onClose: () => setPanel(null), children: _jsx(ColorSettings, { fields: availableFields, view: activeView, onChange: setView }) })] }), _jsx("div", { className: "hy-dv-body", children: remoteStale || props.remote?.loading && !processedRows.length ? _jsx(LoadingState, {}) : processedRows.length === 0 && props.remote?.error ? _jsx(StateCard, { title: "\u67E5\u8A62\u5931\u6557", message: props.remote.error, tone: "error" }) : processedRows.length === 0 ? _jsx(StateCard, { title: "\u6C92\u6709\u7B26\u5408\u689D\u4EF6\u7684\u8CC7\u6599", message: rows.length === 0 ? emptyMessage : "請調整搜尋或篩選條件。" }) : activeView.viewType !== "table" ? _jsx(ScheduleView, { metrics: metrics, getRowLabel: readableLabel, groupLabel: groupLabel, onLoadNearEnd: loadNearEnd, allRows: rows, dependencies: ganttDependencies, onDependencyChange: onGanttDependencyChange && permissions?.canManageDependencies === true ? changeDependency : undefined, onScheduleCommit: onBatchCommit ? execute : undefined, rows: processedRows, renderMobileRow: (row) => _jsx("dl", { className: "hy-dv-schedule-fields", children: mobileFields.filter((field) => canRead(row, field)).map((field) => _jsxs(Fragment, { children: [_jsx("dt", { children: field.label }), _jsx("dd", { children: renderCell(row, field, "mobile") })] }, field.id)) }), onLocationChange: patchLocation, onToggleGroup: toggleGroup, renderLeftHeader: () => _jsxs("tr", { children: [_jsx("th", { className: "hy-dv-open-header is-pinned", style: { left: 0 }, children: "\u8A73\u60C5" }), visible.map((v) => renderColumnHeader(v.field, v.column, true))] }), renderLeftRow: (row) => _jsxs("tr", { children: [_jsx("td", { className: "is-pinned", style: { left: 0 }, children: _jsx("button", { "aria-label": `開啟 ${getRowId(row)} 詳情`, onClick: () => openRow(row), children: "\u2197" }) }), visible.map(({ field }) => _jsx("td", { className: ganttLeftOffsets.has(field.id) || ganttRightOffsets.has(field.id) ? "is-pinned" : "", style: { left: ganttLeftOffsets.get(field.id), right: ganttRightOffsets.get(field.id), backgroundColor: colorMap.get(getRowId(row))?.get(field.id) ?? colorMap.get(getRowId(row))?.get("row") }, children: _jsx("div", { className: "hy-dv-gantt-cell", children: renderCell(row, field, "gantt") }) }, field.id))] }, getRowId(row)), fields: fields, getRowId: getRowId, view: activeView, permissions: permissions, busy: busy, onCommit: onBatchCommit ? (changes) => execute({ id: newOperationId(), reason: "edit", changes }) : undefined, onOpen: openRow }, activeView.viewType) : _jsxs(_Fragment, { children: [_jsx("div", { className: "hy-dv-desktop", children: _jsx("div", { ref: scrollRef, className: `hy-dv-table-scroll ${virtual ? "is-virtual" : ""}`, onScroll: (event) => { setScrollTop(event.currentTarget.scrollTop); loadNearEnd(event.currentTarget); if (bottomRef.current)
+    return _jsxs("section", { ref: rootRef, className: `hy-dv density-${activeView.density ?? "standard"} presentation-${props.presentation ?? "auto"} chrome-${props.chrome ?? "standard"} ${props.height !== undefined ? "has-total-height" : ""}`, style: { height: props.height, "--hy-row-height": `${rowHeight}px`, "--hy-header-height": `${metrics.headerHeight}px`, "--hy-group-height": `${metrics.groupHeight}px`, "--hy-cell-font": `${metrics.cellFontSize}px`, "--hy-cell-line": `${metrics.cellLineHeight}px`, "--hy-header-font": `${metrics.headerFontSize}px`, "--hy-cell-padding": `${metrics.cellPadding}px`, "--hy-header-left": `${metrics.headerPaddingLeft}px`, "--hy-header-right": `${metrics.headerPaddingRight}px`, "--hy-control-height": `${metrics.controlHeight}px`, "--hy-action-height": `${metrics.actionHeight}px`, "--hy-badge-height": `${metrics.badgeHeight}px`, "--hy-badge-font": `${metrics.badgeFontSize}px`, "--hy-badge-padding": `${metrics.badgePadding}px`, "--hy-viewport-height": typeof props.viewportHeight === "number" ? `${props.viewportHeight}px` : props.viewportHeight ?? "560px", "--hy-scrollbar-height": `${metrics.scrollbarHeight}px`, "--hy-scrollbar-thumb": `${metrics.scrollbarThumb}px` }, "aria-label": title, onKeyDown: handleKey, onCopy: handleCopy, onPaste: handlePaste, children: [_jsxs("div", { className: "hy-dv-heading", children: [_jsxs("header", { className: "hy-dv-titlebar", children: [props.headerStart, _jsxs("div", { children: [_jsx("h2", { children: title }), _jsx("span", { children: props.remote ? `符合 ${remoteStale ? "…" : props.remote.total ?? "…"} 筆，已載入 ${processedRows.length} 筆${props.remote.complete && !remoteStale ? "（完整）" : "（尚未完整）"}` : `${processedRows.length} / ${rows.length} 筆` })] }), _jsxs("div", { className: "hy-dv-title-status", children: [selected.length > 0 && _jsxs("span", { children: ["\u5DF2\u9078 ", selected.length, " \u7B46"] }), !props.hideViewSaveStatus && _jsx(SaveBadge, { state: viewSaveState, prefix: "\u6AA2\u8996" }), !props.hideViewSaveStatus && (viewSaveState === "failed" || viewSaveState === "conflict") && _jsx("button", { onClick: () => setView(viewRef.current), children: "\u91CD\u8A66\u5132\u5B58" })] }), props.headerEnd] }), features.viewTabs !== false && _jsxs("nav", { className: "hy-dv-view-tabs", "aria-label": "\u8CC7\u6599\u8996\u5716", children: [[["table", "資料表格"], ["gantt", "甘特圖"], ["calendar", "行事曆"]].map(([type, label]) => _jsx("button", { "aria-pressed": activeView.viewType === type, disabled: permissions?.canSwitchView === false, onClick: () => { patchView({ viewType: type }, configurable ? "layout" : "navigation"); setEditing(null); setPanel(null); }, children: label }, type)), configurable && features.viewSettings !== false && _jsx("button", { onClick: () => setPanel(panel === "settings" ? null : "settings"), children: activeView.viewType === "gantt" ? "甘特圖設定" : activeView.viewType === "calendar" ? "行事曆設定" : "視圖設定" })] })] }), _jsxs(DataViewToolbar, { compact: props.chrome === "compact", start: props.toolbarStart, end: props.toolbarEnd, secondary: _jsxs(_Fragment, { children: [configurable && features.columns !== false && _jsx(ToolbarButton, { active: panel === "columns", onClick: () => setPanel(panel === "columns" ? null : "columns"), children: "\u96FB\u8166\u8868\u683C\u6B04\u4F4D" }), configurable && features.colors !== false && _jsx(ToolbarButton, { active: panel === "colors", onClick: () => setPanel(panel === "colors" ? null : "colors"), children: "\u586B\u8272" }), canManageFields && _jsxs(_Fragment, { children: [_jsx(ToolbarButton, { onClick: () => { setPanel(null); setDialog("add-field"); }, children: "\uFF0B \u65B0\u589E\u6B04\u4F4D" }), _jsx(ToolbarButton, { onClick: () => { setPanel(null); setDialog("fields"); }, children: "\u7BA1\u7406\u6B04\u4F4D" })] }), onBatchCommit && _jsxs(_Fragment, { children: [features.batch !== false && _jsxs("button", { disabled: !selectedRows.length || busy, onClick: () => { setPanel(null); setDialog("batch"); }, children: ["\u6279\u6B21\u4FEE\u6539 ", selectedRows.length || ""] }), features.undo !== false && _jsx("button", { disabled: !undoStack.length || busy, onClick: () => void historyAction("undo"), children: "\u5FA9\u539F" }), features.redo !== false && _jsx("button", { disabled: !redoStack.length || busy, onClick: () => void historyAction("redo"), children: "\u91CD\u505A" })] }), selected.length > 0 && _jsx(ToolbarButton, { onClick: () => changeSelection([]), children: "\u6E05\u9664\u9078\u53D6" }), activeView.groups.length > 0 && permissions?.canCollapseGroups !== false && _jsxs(_Fragment, { children: [_jsx(ToolbarButton, { onClick: () => setAllGroups(true), children: "\u5168\u90E8\u6536\u5408" }), _jsx(ToolbarButton, { onClick: () => setAllGroups(false), children: "\u5168\u90E8\u5C55\u958B" })] })] }), children: [features.search !== false && permissions?.canSearch !== false && _jsxs("label", { className: "hy-dv-search", children: [_jsx("span", { "aria-hidden": true, children: "\u2315" }), _jsx("input", { "aria-label": searchPlaceholder, value: search, onChange: (event) => patchLocation({ search: event.target.value, tableTop: 0, ganttTop: 0 }), placeholder: searchPlaceholder })] }), canFilter && features.filter !== false && _jsxs(ToolbarButton, { active: panel === "filter" || activeView.filters.rules.length > 0, onClick: () => setPanel(panel === "filter" ? null : "filter"), children: ["\u7BE9\u9078 ", activeView.filters.rules.length || ""] }), canSort && features.sort !== false && _jsxs(ToolbarButton, { active: panel === "sort" || activeView.sorts.length > 0, onClick: () => setPanel(panel === "sort" ? null : "sort"), children: ["\u6392\u5E8F ", activeView.sorts.length || ""] }), configurable && features.group !== false && _jsxs(ToolbarButton, { active: panel === "group" || activeView.groups.length > 0, onClick: () => setPanel(panel === "group" ? null : "group"), children: ["\u5206\u7D44 ", activeView.groups.length || ""] }), props.onPresentationChange && _jsxs("select", { "aria-label": "\u5448\u73FE\u65B9\u5F0F", value: props.presentation ?? "auto", onChange: (e) => props.onPresentationChange?.(e.target.value), children: [_jsx("option", { value: "auto", children: "\u81EA\u52D5" }), _jsx("option", { value: "table", children: "\u8868\u683C" }), _jsx("option", { value: "cards", children: "\u5361\u7247" })] })] }), move.message && _jsx("p", { role: "status", children: move.message }), operation.state !== "idle" && _jsxs("div", { className: `hy-dv-operation is-${operation.state}`, role: operation.state === "failed" || operation.state === "conflict" ? "alert" : "status", children: [_jsx(SaveBadge, { state: operation.state }), _jsx("span", { children: operation.message })] }), panel && (configurable || panel === "filter" && canFilter || panel === "sort" && canSort) && _jsxs("div", { className: "hy-dv-panel-wrap", children: [panel === "filter" && _jsx(FilterPanel, { fields: availableFields, view: activeView, onChange: (v) => setView(v, "query"), onClose: () => setPanel(null) }), panel === "sort" && _jsx(SortPanel, { fields: availableFields, view: activeView, onChange: (v) => setView(v, "query"), onClose: () => setPanel(null) }), panel === "group" && _jsx(PanelShell, { title: "\u5206\u7D44\u8A2D\u5B9A", onClose: () => setPanel(null), children: _jsx(GroupSettings, { fields: fields, rows: remoteStale ? [] : rows, view: activeView, onChange: setView }) }), panel === "columns" && _jsx(ColumnPanel, { fields: availableFields, view: { ...activeView, columns: activeView.columns.filter((c) => availableFields.some((f) => f.id === c.fieldId)) }, onChange: setView, onClose: () => setPanel(null), dragged: draggedColumn, setDragged: setDraggedColumn, drop: dropColumn }), panel === "settings" && _jsx(PanelShell, { title: "\u8996\u5716\u8A2D\u5B9A", onClose: () => setPanel(null), children: _jsx(ViewSettings, { fields: availableFields, view: activeView, onChange: setView }) }), panel === "colors" && _jsx(PanelShell, { title: "\u586B\u8272\u898F\u5247", onClose: () => setPanel(null), children: _jsx(ColorSettings, { fields: availableFields, view: activeView, onChange: setView }) })] }), _jsx("div", { className: "hy-dv-body", children: remoteStale || props.remote?.loading && !processedRows.length ? _jsx(LoadingState, {}) : processedRows.length === 0 && props.remote?.error ? _jsx(StateCard, { title: "\u67E5\u8A62\u5931\u6557", message: props.remote.error, tone: "error" }) : processedRows.length === 0 ? _jsx(StateCard, { title: "\u6C92\u6709\u7B26\u5408\u689D\u4EF6\u7684\u8CC7\u6599", message: rows.length === 0 ? emptyMessage : "請調整搜尋或篩選條件。" }) : activeView.viewType !== "table" ? _jsx(ScheduleView, { controlWidth: 44 + (rowMenuEnabled ? 28 : 0), metrics: metrics, getRowLabel: readableLabel, groupLabel: groupLabel, onLoadNearEnd: loadNearEnd, allRows: rows, dependencies: ganttDependencies, onDependencyChange: onGanttDependencyChange && permissions?.canManageDependencies === true ? changeDependency : undefined, onScheduleCommit: onBatchCommit ? execute : undefined, rows: processedRows, renderMobileRow: (row) => _jsx("dl", { className: "hy-dv-schedule-fields", children: mobileFields.filter((field) => canRead(row, field)).map((field) => _jsxs(Fragment, { children: [_jsx("dt", { children: field.label }), _jsx("dd", { children: renderCell(row, field, "mobile") })] }, field.id)) }), onLocationChange: patchLocation, onToggleGroup: toggleGroup, renderLeftHeader: () => _jsxs("tr", { children: [_jsx("th", { className: "hy-dv-open-header is-pinned", style: { left: 0 }, children: "\u8A73\u60C5" }), visible.map((v) => renderColumnHeader(v.field, v.column, true))] }), renderLeftRow: (row) => _jsxs("tr", { tabIndex: rowMenuEnabled ? -1 : undefined, onContextMenu: event => rowContextEvent(row, event), onKeyDown: event => rowContextEvent(row, event), children: [_jsx("td", { className: "is-pinned", style: { left: 0 }, children: _jsxs("div", { className: "hy-dv-row-controls", children: [rowMenuTrigger(row), _jsx("button", { "aria-label": `開啟 ${readableLabel(row)} 詳情`, onClick: () => openRow(row), children: "\u2197" })] }) }), visible.map(({ field }) => _jsx("td", { className: ganttLeftOffsets.has(field.id) || ganttRightOffsets.has(field.id) ? "is-pinned" : "", style: { left: ganttLeftOffsets.get(field.id), right: ganttRightOffsets.get(field.id), backgroundColor: colorMap.get(getRowId(row))?.get(field.id) ?? colorMap.get(getRowId(row))?.get("row") }, children: _jsx("div", { className: "hy-dv-gantt-cell", children: renderCell(row, field, "gantt") }) }, field.id))] }, getRowId(row)), fields: fields, getRowId: getRowId, view: activeView, permissions: permissions, busy: busy, onCommit: onBatchCommit ? (changes) => execute({ id: newOperationId(), reason: "edit", changes }) : undefined, onOpen: openRow }, activeView.viewType) : _jsxs(_Fragment, { children: [_jsx("div", { className: "hy-dv-desktop", children: _jsx("div", { ref: scrollRef, className: `hy-dv-table-scroll ${virtual ? "is-virtual" : ""}`, onScroll: (event) => { setScrollTop(event.currentTarget.scrollTop); loadNearEnd(event.currentTarget); if (bottomRef.current)
                                     bottomRef.current.scrollLeft = event.currentTarget.scrollLeft; patchLocation({ tableTop: event.currentTarget.scrollTop, tableLeft: event.currentTarget.scrollLeft }); }, children: _jsxs("table", { className: "hy-dv-table", style: { width: tableWidth }, "aria-label": "\u8CC7\u6599\u5132\u5B58\u683C", "aria-rowcount": desktopRows.length + 1, children: [_jsxs("colgroup", { children: [controlColumn && _jsx("col", { style: { width: controlWidth } }), visible.map(({ field, column }) => _jsx("col", { style: { width: column.width } }, field.id)), canManageFields && _jsx("col", { style: { width: addColumnWidth } })] }), _jsx("thead", { children: _jsxs("tr", { children: [controlColumn && _jsx("th", { className: "hy-dv-selection is-pinned", style: { left: 0 }, children: selectable && _jsx("input", { type: "checkbox", checked: allPageSelected, onChange: togglePageSelection, "aria-label": props.remote && !props.remote.complete ? "選取目前已載入資料" : "選取全部符合條件資料" }) }), visible.map(({ field, column }) => renderColumnHeader(field, column)), canManageFields && _jsx("th", { className: "hy-dv-add-column is-pinned", style: { right: 0 }, children: _jsx("button", { type: "button", disabled: busy, "aria-label": "\u65B0\u589E\u6B04\u4F4D", title: "\u65B0\u589E\u6B04\u4F4D", onClick: () => { setPanel(null); setDialog("add-field"); }, children: "\uFF0B" }) })] }) }), _jsxs("tbody", { children: [virtual && virtualStart > 0 && _jsx("tr", { "aria-hidden": true, children: _jsx("td", { colSpan: tableColumnCount, style: { height: windowed.before, padding: 0, border: 0 } }) }), flatEntries.slice(virtualStart, virtualEnd).map((entry) => entry.kind === "row" ? renderDesktopRow(entry.row) : _jsx("tr", { "data-group-key": entry.node.key, className: `hy-dv-group depth-${entry.node.depth} ${move.target?.position === "groupEnd" && move.target.targetGroupPath.at(-1)?.key === entry.node.key ? "is-drop-after" : ""}`, style: { height: entryHeights[flatEntries.indexOf(entry)] }, children: _jsx("td", { colSpan: tableColumnCount, children: _jsxs("button", { type: "button", onClick: () => toggleGroup(entry.node.key), "aria-expanded": !collapsed.has(entry.node.key), children: [collapsed.has(entry.node.key) ? "›" : "⌄", groupLabel(entry.node)] }) }) }, `group:${entry.node.key}`)), virtual && virtualEnd < flatEntries.length && _jsx("tr", { "aria-hidden": true, children: _jsx("td", { colSpan: tableColumnCount, style: { height: windowed.after, padding: 0, border: 0 } }) })] })] }) }) }), _jsx(VirtualList, { items: flatEntries, itemKey: (e) => e.kind === "group" ? `g:${e.node.key}` : getRowId(e.row), estimate: (e) => e.kind === "group" ? 40 : activeView.mobile?.presentation === "compact" ? 80 + mobileFields.length * 28 : 100 + mobileFields.length * 36, className: `hy-dv-mobile mobile-${activeView.mobile?.presentation ?? "cards"}`, initialTop: activeView.location?.mobileTop, onScroll: (el) => { loadNearEnd(el); patchLocation({ mobileTop: el.scrollTop }); }, renderItem: (entry) => entry.kind === "group" ? _jsxs("button", { "data-group-key": entry.node.key, className: "hy-dv-mobile-group-title", "aria-expanded": !collapsed.has(entry.node.key), onClick: () => toggleGroup(entry.node.key), children: [collapsed.has(entry.node.key) ? "›" : "⌄", groupLabel(entry.node)] }) : renderMobileCard(entry.row) }), _jsxs("p", { className: "hy-dv-keyboard-help", children: ["\u65B9\u5411\u9375\u79FB\u52D5 \u00B7 Shift\uFF0B\u65B9\u5411\u9375\u9078\u7BC4\u570D \u00B7 Enter \u7DE8\u8F2F \u00B7 Ctrl/Cmd\uFF0BC\uFF0FV \u8907\u88FD\u8CBC\u4E0A \u00B7 Delete \u6E05\u7A7A\u9810\u89BD", virtual ? ` · 連續捲動，共 ${desktopRows.length} 筆` : ""] }), props.bottomScrollbar !== false && tableWidth > viewportWidth && _jsx("div", { ref: bottomRef, className: "hy-dv-bottom-scroll", "aria-label": "\u8868\u683C\u6C34\u5E73\u6372\u52D5", onScroll: (e) => { if (scrollRef.current)
-                                scrollRef.current.scrollLeft = e.currentTarget.scrollLeft; }, children: _jsx("div", { style: { width: tableWidth, height: 1 } }) })] }) }), props.remote && _jsxs("div", { className: "hy-dv-load-status", role: props.remote.error ? "alert" : "status", children: [props.remote.error || (props.remote.loading || remoteStale ? "正在載入符合條件的資料…" : props.remote.complete ? `已完整載入 ${processedRows.length} 筆` : `尚未完整：已載入 ${processedRows.length}／${props.remote.total ?? "…"} 筆`), !props.remote.complete && !props.remote.loading && !remoteStale && _jsx("button", { onClick: props.remote.error ? props.remote.onRetry : props.remote.onLoadMore, children: props.remote.error ? "重新查詢" : "繼續載入" })] }), quick && (() => { const row = rows.find((r) => getRowId(r) === quick.rowId); const field = fields.find((f) => f.id === quick.fieldId); return row && field && !field.internal && canRead(row, field) && _jsxs(DataViewDialog, { title: field.label, onClose: () => setQuick(null), children: [field.renderQuickView?.({ row, field, value: getFieldValue(row, field), close: () => setQuick(null), openRow: () => { setQuick(null); openRow(row); } }), canEdit(row, field) && _jsx("button", { onClick: () => { setQuick(null); setDetailId(getRowId(row)); setEditing({ rowId: getRowId(row), fieldId: field.id, surface: "detail" }); }, children: "\u7DE8\u8F2F" })] }); })(), detailRow && _jsxs(DataViewDialog, { title: readableLabel(detailRow), busy: busy, onClose: () => { setDetailId(null); setEditing(null); }, children: [props.renderDetail ? props.renderDetail(detailContext(detailRow)) : _jsx("div", { className: "hy-dv-detail", children: availableFields.filter((field) => canRead(detailRow, field)).map((field) => _jsxs("label", { children: [_jsx("span", { children: field.label }), renderCell(detailRow, field, "detail")] }, field.id)) }), features.copy !== false && _jsx("button", { onClick: async () => { try {
+                                scrollRef.current.scrollLeft = e.currentTarget.scrollLeft; }, children: _jsx("div", { style: { width: tableWidth, height: 1 } }) })] }) }), props.remote && _jsxs("div", { className: "hy-dv-load-status", role: props.remote.error ? "alert" : "status", children: [props.remote.error || (props.remote.loading || remoteStale ? "正在載入符合條件的資料…" : props.remote.complete ? `已完整載入 ${processedRows.length} 筆` : `尚未完整：已載入 ${processedRows.length}／${props.remote.total ?? "…"} 筆`), !props.remote.complete && !props.remote.loading && !remoteStale && _jsx("button", { onClick: props.remote.error ? props.remote.onRetry : props.remote.onLoadMore, children: props.remote.error ? "重新查詢" : "繼續載入" })] }), attachmentTarget && (() => {
+                const row = rows.find(row => getRowId(row) === attachmentTarget.rowId);
+                const field = fields.find(field => field.id === attachmentTarget.fieldId);
+                return row && field && field.type === "attachment" && !field.internal && canRead(row, field) && _jsx(DataViewDialog, { title: `${readableLabel(row)} · ${field.label}`, busy: busy, onClose: () => { setAttachmentTarget(null); setEditing(null); }, children: renderCell(row, field, "detail") });
+            })(), quick && (() => { const row = rows.find((r) => getRowId(r) === quick.rowId); const field = fields.find((f) => f.id === quick.fieldId); return row && field && !field.internal && canRead(row, field) && _jsxs(DataViewDialog, { title: field.label, onClose: () => setQuick(null), children: [field.renderQuickView?.({ row, field, value: getFieldValue(row, field), close: () => setQuick(null), openRow: () => { setQuick(null); openRow(row); } }), canEdit(row, field) && _jsx("button", { onClick: () => { setQuick(null); setDetailId(getRowId(row)); setEditing({ rowId: getRowId(row), fieldId: field.id, surface: "detail" }); }, children: "\u7DE8\u8F2F" })] }); })(), detailRow && _jsxs(DataViewDialog, { title: readableLabel(detailRow), busy: busy, onClose: () => { setDetailId(null); setEditing(null); }, children: [props.renderDetail ? props.renderDetail(detailContext(detailRow)) : _jsx("div", { className: "hy-dv-detail", children: availableFields.filter((field) => canRead(detailRow, field)).map((field) => _jsxs("label", { children: [_jsx("span", { children: field.label }), renderCell(detailRow, field, "detail")] }, field.id)) }), features.copy !== false && _jsx("button", { onClick: async () => { try {
                             await navigator.clipboard.writeText(formatReadableRow(detailRow, availableFields));
                             setOperation({ state: "saved", message: "已複製可讀內容" });
                         }
                         catch {
                             reportFailure(new Error("無法使用剪貼簿，請確認瀏覽器權限"));
-                        } }, children: "\u8907\u88FD\u6587\u5B57" }), props.renderDetailFooter?.(detailContext(detailRow)), operation.state !== "idle" && _jsx("p", { role: "status", children: operation.message })] }), headerMenu && features.columnMenu !== false && (() => {
+                        } }, children: "\u8907\u88FD\u6587\u5B57" }), props.renderDetailFooter?.(detailContext(detailRow)), operation.state !== "idle" && _jsx("p", { role: "status", children: operation.message })] }), rowMenu && rowMenuEnabled && (() => {
+                const row = rows.find(row => getRowId(row) === rowMenu.rowId);
+                return row && _jsx(ActionMenu, { id: rowMenuId, label: `${readableLabel(row)}資料列操作`, anchor: rowMenu.anchor, point: rowMenu.point, items: rowActionItems(row, permissions, rowOperationBlocked()), onClose: () => setRowMenu(null), onChoose: action => {
+                        if (rowOperationBlocked() || permissions?.canChangeRow?.(row, action) !== true)
+                            return;
+                        setRowMenu(null);
+                        if (action === "delete") {
+                            setOperation({ state: "idle", message: "" });
+                            setRowDelete(rowMenu);
+                        }
+                        else
+                            void applyRowChange(action, rowMenu);
+                    } });
+            })(), rowDelete && (() => {
+                const row = rows.find(row => getRowId(row) === rowDelete.rowId);
+                return row && _jsxs(DataViewDialog, { title: `刪除此筆：${readableLabel(row)}`, busy: busy, onClose: () => { rowDelete.anchor.focus(); setRowDelete(null); }, children: [_jsxs("p", { children: ["\u78BA\u8A8D\u522A\u9664\u300C", readableLabel(row), "\u300D\uFF1F\u53EA\u522A\u9664\u6B64\u7B46\uFF0C\u4E0D\u5305\u542B\u5176\u4ED6\u5DF2\u9078\u53D6\u8CC7\u6599\u3002\u522A\u9664\u4E0D\u7D0D\u5165\u5132\u5B58\u683C\u5FA9\u539F\u3002"] }), _jsx("button", { type: "button", autoFocus: true, disabled: busy, onClick: () => { rowDelete.anchor.focus(); setRowDelete(null); }, children: "\u53D6\u6D88" }), _jsx("button", { type: "button", className: "hy-dv-danger", disabled: rowOperationBlocked() || permissions?.canChangeRow?.(row, "delete") !== true, onClick: () => void applyRowChange("delete", rowDelete), children: "\u78BA\u8A8D\u522A\u9664\u6B64\u7B46" }), (operation.state === "failed" || operation.state === "conflict") && _jsx("p", { role: "alert", children: operation.message })] });
+            })(), headerMenu && features.columnMenu !== false && (() => {
                 const field = availableFields.find((item) => item.id === headerMenu.fieldId);
                 return field && _jsx(ColumnMenu, { id: menuId, label: field.label, anchor: headerMenu.anchor, items: headerItems({ field, fields, view: activeView, permissions, features, hasFieldCallback: !!onFieldChange, busy }), onChoose: (action) => chooseHeaderAction(field, action), onClose: () => setHeaderMenu(null) });
             })(), fieldAction && (() => {
@@ -748,11 +901,11 @@ function DataViewInner(props) {
         const rowId = getRowId(row);
         const index = desktopRowIndices.get(rowId) ?? 0;
         const colors = colorMap.get(rowId);
-        return _jsxs("tr", { "data-move-row": rowId, "aria-rowindex": index + 2, className: `${selectedSet.has(rowId) ? "is-selected" : ""} ${move.sourceId === rowId ? "is-moving" : ""} ${move.target?.targetRowId === rowId ? `is-drop-${move.target.position}` : ""}`, style: { height: rowHeight }, children: [controlColumn && _jsx("td", { className: "hy-dv-selection is-pinned", style: { left: 0 }, children: _jsxs("div", { className: "hy-dv-row-controls", children: [props.rowMove && _jsx("button", { className: "hy-dv-row-drag", "aria-label": `移動 ${readableLabel(row)}`, disabled: move.pending || props.rowMove.canMove?.(row) === false, onPointerDown: (e) => move.start(rowId, e), onKeyDown: (e) => move.key(rowId, e), children: "\u283F" }), selectable && _jsx("input", { type: "checkbox", checked: selected.includes(rowId), onChange: () => toggleRow(rowId), "aria-label": `選取資料 ${readableLabel(row)}` }), features.rowOpen === true && _jsx("button", { "aria-label": `開啟 ${readableLabel(row)}`, onClick: () => openRow(row), children: "\u2197" })] }) }), visible.map(({ field }, col) => {
+        return _jsxs("tr", { "data-move-row": rowId, tabIndex: rowMenuEnabled ? -1 : undefined, onContextMenu: event => rowContextEvent(row, event), onKeyDown: event => rowContextEvent(row, event), "aria-rowindex": index + 2, className: `${selectedSet.has(rowId) ? "is-selected" : ""} ${move.sourceId === rowId ? "is-moving" : ""} ${move.target?.targetRowId === rowId ? `is-drop-${move.target.position}` : ""}`, style: { height: rowHeight }, children: [controlColumn && _jsx("td", { className: "hy-dv-selection is-pinned", style: { left: 0 }, children: _jsxs("div", { className: "hy-dv-row-controls", children: [rowMenuTrigger(row), props.rowMove && _jsx("button", { className: "hy-dv-row-drag", "aria-label": `移動 ${readableLabel(row)}`, disabled: move.pending || props.rowMove.canMove?.(row) === false, onPointerDown: (e) => move.start(rowId, e), onKeyDown: (e) => move.key(rowId, e), children: "\u283F" }), selectable && _jsx("input", { type: "checkbox", checked: selected.includes(rowId), onChange: () => toggleRow(rowId), "aria-label": `選取資料 ${readableLabel(row)}` }), features.rowOpen === true && _jsx("button", { "aria-label": `開啟 ${readableLabel(row)}`, onClick: () => openRow(row), children: "\u2197" })] }) }), visible.map(({ field }, col) => {
                     const left = pinnedOffsets.get(field.id);
                     const right = rightOffsets.get(field.id);
                     const inRange = range && index >= range.fromRow && index <= range.toRow && col >= range.fromCol && col <= range.toCol;
-                    return _jsx("td", { "data-hy-cell": true, "data-row-id": rowId, "data-field-id": field.id, tabIndex: range && focus ? focus.rowId === rowId && focus.fieldId === field.id ? 0 : -1 : index === 0 && col === 0 ? 0 : -1, "aria-label": `${rowId} ${field.label}`, onFocus: () => setFocus({ rowId, fieldId: field.id }), onClick: (event) => { if (event.shiftKey) {
+                    return _jsx("td", { "data-hy-cell": true, "data-row-id": rowId, "data-field-id": field.id, tabIndex: range && focus ? focus.rowId === rowId && focus.fieldId === field.id ? 0 : -1 : index === 0 && col === 0 ? 0 : -1, "aria-label": `${readableLabel(row)} ${field.label}`, onFocus: () => setFocus({ rowId, fieldId: field.id }), onClick: (event) => { if (event.shiftKey) {
                             setAnchor(anchor ?? focus);
                             setFocus({ rowId, fieldId: field.id });
                         } }, className: `${left === undefined && right === undefined ? "" : "is-pinned"} ${inRange ? "is-range" : ""}`, style: { left, right, backgroundColor: colors?.get(field.id) ?? colors?.get("row") }, children: _jsx("div", { className: "hy-dv-cell-content", children: renderCell(row, field, "desktop") }) }, field.id);
@@ -780,15 +933,21 @@ function DataViewInner(props) {
     function renderColumnHeader(field, column, gantt = false) {
         const left = (gantt ? ganttLeftOffsets : pinnedOffsets).get(field.id);
         const right = (gantt ? ganttRightOffsets : rightOffsets).get(field.id);
-        return _jsxs("th", { draggable: configurable, onDragStart: () => setDraggedColumn(field.id), onDragOver: (event) => event.preventDefault(), onDrop: () => dropColumn(field.id), className: left === undefined && right === undefined ? "" : "is-pinned", style: { left, right }, children: [_jsxs("div", { className: "hy-dv-column-heading", children: [_jsx("span", { className: "hy-dv-column-title", children: field.label }), activeView.sorts.findIndex((rule) => rule.fieldId === field.id) >= 0 && _jsxs("small", { children: [activeView.sorts.findIndex((rule) => rule.fieldId === field.id) + 1, activeView.sorts.find((rule) => rule.fieldId === field.id)?.direction === "asc" ? "↑" : "↓"] }), features.columnMenu !== false && (configurable || canManageFields || canFilter || canSort) && _jsx("button", { type: "button", className: "hy-dv-header-menu-trigger", "aria-label": `${field.label}欄位操作`, title: `${field.label}欄位操作`, "aria-haspopup": "menu", "aria-expanded": headerMenu?.fieldId === field.id, "aria-controls": headerMenu?.fieldId === field.id ? menuId : undefined, draggable: false, onDragStart: (event) => { event.preventDefault(); event.stopPropagation(); }, onPointerDown: (event) => event.stopPropagation(), onClick: (event) => { event.stopPropagation(); setHeaderMenu(headerMenu?.fieldId === field.id ? null : { fieldId: field.id, anchor: event.currentTarget }); }, onKeyDown: (event) => { if (event.key === "ArrowDown") {
-                                event.preventDefault();
-                                event.stopPropagation();
-                                setHeaderMenu({ fieldId: field.id, anchor: event.currentTarget });
-                            } }, children: "\u2304" })] }), configurable && _jsx("span", { className: "hy-dv-resize", onPointerDown: (event) => resizeColumn(field.id, column.width, event), "aria-hidden": true })] }, field.id);
+        const hasMenu = features.columnMenu !== false && (configurable || canManageFields || canFilter || canSort);
+        const sortIndex = activeView.sorts.findIndex(rule => rule.fieldId === field.id);
+        const heading = _jsxs(_Fragment, { children: [_jsx("span", { className: "hy-dv-column-title", children: field.label }), sortIndex >= 0 && _jsxs("small", { children: [sortIndex + 1, activeView.sorts[sortIndex].direction === "asc" ? "↑" : "↓"] })] });
+        return _jsxs("th", { draggable: configurable, onDragStart: () => { headerDragUntil.current = Infinity; setDraggedColumn(field.id); }, onDragEnd: () => { headerDragUntil.current = Date.now() + 100; setDraggedColumn(null); }, onDragOver: event => event.preventDefault(), onDrop: () => dropColumn(field.id), className: `${left === undefined && right === undefined ? "" : "is-pinned"} ${hasMenu ? "has-column-menu" : ""}`, style: { left, right }, children: [hasMenu ? _jsx("button", { type: "button", className: "hy-dv-column-heading hy-dv-header-menu-trigger", "aria-label": `${field.label}欄位操作`, title: field.label, "aria-haspopup": "menu", "aria-expanded": headerMenu?.fieldId === field.id, "aria-controls": headerMenu?.fieldId === field.id ? menuId : undefined, draggable: configurable, onClick: event => { event.stopPropagation(); if (Date.now() < headerDragUntil.current)
+                        return; setRowMenu(null); setHeaderMenu(headerMenu?.fieldId === field.id ? null : { fieldId: field.id, anchor: event.currentTarget }); }, onKeyDown: event => { if (event.key === "ArrowDown") {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        setRowMenu(null);
+                        setHeaderMenu({ fieldId: field.id, anchor: event.currentTarget });
+                    } }, children: heading })
+                    : _jsx("div", { className: "hy-dv-column-heading", title: field.label, children: heading }), configurable && _jsx("span", { className: "hy-dv-resize", onPointerDown: event => { event.stopPropagation(); resizeColumn(field.id, column.width, event); }, onClick: event => event.stopPropagation(), "aria-hidden": true })] }, field.id);
     }
     function renderMobileCard(row) {
         const rowId = getRowId(row);
-        return _jsxs("article", { "data-move-row": rowId, className: `hy-dv-card ${selected.includes(rowId) ? "is-selected" : ""}`, style: { backgroundColor: colorMap.get(rowId)?.get("row") }, children: [selectable && _jsxs("label", { className: "hy-dv-card-select", children: [_jsx("input", { type: "checkbox", checked: selected.includes(rowId), onChange: () => toggleRow(rowId) }), " \u9078\u53D6"] }), activeView.mobile?.summaryFieldId && _jsx("button", { className: "hy-dv-mobile-summary", onClick: () => openRow(row), children: readableLabel(row) }), props.renderMobileRow ? props.renderMobileRow(detailContext(row)) : _jsx("dl", { children: mobileFields.map((field) => canRead(row, field) && _jsxs(Fragment, { children: [_jsx("dt", { children: field.label }), _jsx("dd", { style: { backgroundColor: colorMap.get(rowId)?.get(field.id) }, children: renderCell(row, field, "mobile") })] }, field.id)) }), props.rowMove && _jsx("button", { className: "hy-dv-row-drag", "aria-label": `移動 ${readableLabel(row)}`, disabled: move.pending || props.rowMove.canMove?.(row) === false, onPointerDown: (e) => move.start(rowId, e), onKeyDown: (e) => move.key(rowId, e), children: "\u283F" }), _jsx("button", { className: "hy-dv-detail-button", onClick: () => openRow(row), children: "\u67E5\u770B\u8A73\u60C5" })] }, rowId);
+        return _jsxs("article", { "data-move-row": rowId, tabIndex: rowMenuEnabled ? -1 : undefined, onContextMenu: event => rowContextEvent(row, event), onKeyDown: event => rowContextEvent(row, event), className: `hy-dv-card ${selected.includes(rowId) ? "is-selected" : ""}`, style: { backgroundColor: colorMap.get(rowId)?.get("row") }, children: [rowMenuTrigger(row), selectable && _jsxs("label", { className: "hy-dv-card-select", children: [_jsx("input", { type: "checkbox", checked: selected.includes(rowId), onChange: () => toggleRow(rowId) }), " \u9078\u53D6"] }), activeView.mobile?.summaryFieldId && _jsx("button", { className: "hy-dv-mobile-summary", onClick: () => openRow(row), children: readableLabel(row) }), props.renderMobileRow ? props.renderMobileRow(detailContext(row)) : _jsx("dl", { children: mobileFields.map((field) => canRead(row, field) && _jsxs(Fragment, { children: [_jsx("dt", { children: field.label }), _jsx("dd", { style: { backgroundColor: colorMap.get(rowId)?.get(field.id) }, children: renderCell(row, field, "mobile") })] }, field.id)) }), props.rowMove && _jsx("button", { className: "hy-dv-row-drag", "aria-label": `移動 ${readableLabel(row)}`, disabled: move.pending || props.rowMove.canMove?.(row) === false, onPointerDown: (e) => move.start(rowId, e), onKeyDown: (e) => move.key(rowId, e), children: "\u283F" }), _jsx("button", { className: "hy-dv-detail-button", onClick: () => openRow(row), children: "\u67E5\u770B\u8A73\u60C5" })] }, rowId);
     }
 }
 function ToolbarButton({ children, active = false, onClick }) {