@qijenchen/design-system 0.1.0-beta.84 → 0.1.0-beta.86

package/dist/components/DataTable/data-table.js

@@ -189,12 +189,24 @@ function DraggableHeaderCell({
   const childProps = children.props;
   const { role: _draggableRole, ...draggableAttrs } = draggable.attributes;
   const indicatorClass = dropIndicatorSide === "before" ? dropIndicatorColumn.pseudoBefore : dropIndicatorSide === "after" ? dropIndicatorColumn.pseudoAfter : "";
+  const rawListeners = draggable.listeners;
+  const guardedListeners = rawListeners ? {
+    ...rawListeners,
+    onKeyDown: (e) => {
+      var _a;
+      const target = e.target;
+      if (target !== e.currentTarget && target.closest('button, a, input, select, textarea, [role="menuitem"], [role="separator"]')) {
+        return;
+      }
+      (_a = rawListeners.onKeyDown) == null ? void 0 : _a.call(rawListeners, e);
+    }
+  } : rawListeners;
   return React.cloneElement(children, {
     ref: setRefs,
     style: { ...childProps.style ?? {}, ...dragStyle },
     "data-column-id": id,
     "data-column-locked": isLocked || void 0,
-    ...disabled ? {} : { ...draggableAttrs, ...draggable.listeners },
+    ...disabled ? {} : { ...draggableAttrs, ...guardedListeners ?? {} },
     // 2026-05-06 v14.9 cursor canonical(對齊 Notion / Jira):
     // **idle hover NOT 顯 cursor-grab** — header click 觸發 sort,grab cursor 會誤導 user 以為「點 = 拖」;
     // **drag activation 後**(isDragging=true,過 8px activationConstraint)才顯 cursor-grabbing。
@@ -326,7 +338,6 @@ const MemoCellSlot = React.memo(function MemoCellSlot2({
   size,
   autoRowHeight,
   isEditable,
-  isDisabled,
   onCommitCell,
   onCancelCell,
   onCellCommitLive,
@@ -335,9 +346,7 @@ const MemoCellSlot = React.memo(function MemoCellSlot2({
   const onCommit = React.useCallback((next) => onCommitCell(rowId, colId, next), [onCommitCell, rowId, colId]);
   const onCommitLive = React.useCallback((next) => onCellCommitLive == null ? void 0 : onCellCommitLive(rowId, colId, next), [onCellCommitLive, rowId, colId]);
   const onCancel = React.useCallback(() => onCancelCell(rowId, colId), [onCancelCell, rowId, colId]);
-  const onRequestEdit = React.useCallback(() => {
-    if (!isDisabled) onEnterEdit(rowId, colId);
-  }, [onEnterEdit, isDisabled, rowId, colId]);
+  const onRequestEdit = React.useCallback(() => onEnterEdit(rowId, colId), [onEnterEdit, rowId, colId]);
   return /* @__PURE__ */ jsx(
     Cell,
     {
@@ -347,7 +356,6 @@ const MemoCellSlot = React.memo(function MemoCellSlot2({
       size,
       autoRowHeight,
       isEditable,
-      isDisabled,
       onCommit,
       onCommitLive,
       onCancel,
@@ -460,18 +468,9 @@ function DataTableInner({
     },
     []
   );
-  const isCellDisabled = React.useCallback(
-    // any-allow: free-form consumer meta — same rationale as L143 renderTypedValue
-    (meta, row) => {
-      const d = meta == null ? void 0 : meta.disabled;
-      if (typeof d === "function") return d(row) === true;
-      return d === true;
-    },
-    []
-  );
   const canEditCell = React.useCallback(
-    (meta, row) => isCellEditable(meta, row) && !isCellDisabled(meta, row),
-    [isCellEditable, isCellDisabled]
+    (meta, row) => isCellEditable(meta, row),
+    [isCellEditable]
   );
   const [sorting, setSorting] = React.useState(((_a = tableOptions == null ? void 0 : tableOptions.state) == null ? void 0 : _a.sorting) ?? []);
   const [columnVisibility, setColumnVisibility] = useControllable({
@@ -775,12 +774,11 @@ function DataTableInner({
     const rowId = cell.row.id;
     const colId = cell.column.id;
     const editable = isCellEditable(meta, cell.row.original);
-    const disabled = isCellDisabled(meta, cell.row.original);
     const isEditingThisCell = editingCellId === cellEditId(rowId, colId);
     let content;
     if (colType) {
       const Cell = resolveCellComponent(colType);
-      const cellMode = experimentalActiveEditorController && isEditingThisCell ? "display" : isEditingThisCell && !disabled ? "edit" : "display";
+      const cellMode = experimentalActiveEditorController && isEditingThisCell ? "view" : isEditingThisCell ? "edit" : "view";
       content = /* @__PURE__ */ jsx(
         MemoCellSlot,
         {
@@ -793,7 +791,6 @@ function DataTableInner({
           size,
           autoRowHeight,
           isEditable: editable,
-          isDisabled: disabled,
           onCommitCell: commitCell,
           onCancelCell: cancelCellEdit,
           onCellCommitLive: onCellCommit,
@@ -891,11 +888,10 @@ function DataTableInner({
     const cellRowId = cell.row.id;
     const cellColId = cell.column.id;
     const cellEditable = isCellEditable(meta, cell.row.original);
-    const cellDisabled = isCellDisabled(meta, cell.row.original);
     const isEditingThisCell = editingCellId === cellEditId(cellRowId, cellColId);
     const cellSpreadsheetId = `${cellRowId}:${cellColId}`;
     const isSelectedCell = spreadsheetMode && selectedCellId === cellSpreadsheetId;
-    const onEditableCellClick = cellEditable && !cellDisabled && colType !== "boolean" && colType !== "url" && !isEditingThisCell ? (e) => {
+    const onEditableCellClick = cellEditable && colType !== "boolean" && colType !== "url" && !isEditingThisCell ? (e) => {
       if (spreadsheetMode) {
         if (e.shiftKey && rangeAnchor != null) {
           setRangeFocus(cellSpreadsheetId);
@@ -949,7 +945,6 @@ function DataTableInner({
         "data-column-id": cell.column.id,
         "data-cell-id": `${cell.row.id}:${cell.column.id}`,
         "data-range-cell": spreadsheetMode && rangeCellIdSet.has(`${cell.row.id}:${cell.column.id}`) ? "" : void 0,
-        "data-cell-disabled": cellDisabled ? "true" : void 0,
         "aria-describedby": cellErrorId,
         "aria-invalid": hasCellError || void 0,
         className: cn(
@@ -988,19 +983,16 @@ function DataTableInner({
           // 跟 cell 4 邊 inset divider 視覺相疊(同 pixel)= 1 line visual,不雙線。
           inlineEdit && "dtCellGrid",
           onEditableCellClick && ["cursor-pointer", nakedCellEditableDisplayHover],
-          // editable cell display hover affordance(對齊 Notion / Airtable hover-cell-shows-border canonical)
+          // editable cell view hover affordance(對齊 Notion / Airtable hover-cell-shows-border canonical)
           // a11y(2026-07-14 dim-10 修):非 spreadsheet inlineEdit cell 可 Tab 聚焦(見下方
           // tabIndex/onKeyDown)— focus-visible ring 對齊本檔 expand button / sortable header canonical。
           onEditableCellClick && !spreadsheetMode && "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
-          // 2026-05-13 Q3 cell disabled SSOT(per codex Q3 verdict + user 拍板「全部馬不停蹄做完」):
-          // bg `--bg-disabled` component-state token(color.spec.md:671 owner)+ cursor 抑制 click affordance。
-          cellDisabled && "bg-disabled cursor-not-allowed",
           // z-10 raise inline-edit cell;portal mode 不需(layer z-3 already on top)。
           isEditingThisCell && !experimentalActiveEditorController && "z-10"
         ),
         style: {
           ...columnSizeStyle(cell.column, { resize: enableColumnResize, isSystemCol: isSystemColumn(cell.column.id) }),
-          // Padding override 只在 inline-edit cell(naked Field 撐滿 cell);portal mode cell 走正常 display padding
+          // Padding override 只在 inline-edit cell(naked Field 撐滿 cell);portal mode cell 走正常 view padding
           ...isEditingThisCell && !experimentalActiveEditorController ? {} : cellPadding,
           // Slice D Step 2(2026-05-10):flag 開時 set CSS variable 抑制 Field naked hover outline,
           // 讓 overlay layer 接管 hover ring paint(per RFC Contract 8 「one geometry owner, two paint owners」)。
@@ -1238,7 +1230,7 @@ function DataTableInner({
     },
     // D3 dep-hygiene fix(2026-07-06):handler 內(portal edit Enter 分支)呼叫的是 canEditCell,
     // 非 isCellEditable — 原 deps 列 isCellEditable 是靠 canEditCell identity-stable 才無實害的
-    // stale-closure 地雷;改列真實依賴 canEditCell(其 useCallback deps 已含 isCellEditable + isCellDisabled)。
+    // stale-closure 地雷;改列真實依賴 canEditCell(其 useCallback deps 已含 isCellEditable)。
     [
       enabled,
       mode,
@@ -1386,16 +1378,34 @@ function DataTableInner({
             const colOptIn = (colMeta == null ? void 0 : colMeta.resizable) !== false;
             const isResizable = enableColumnResize && !isSystemColumn(colId) && colOptIn;
             const isResizing = (_b2 = (_a3 = header.column).getIsResizing) == null ? void 0 : _b2.call(_a3);
+            const effectiveMinWidth = header.column.columnDef.minSize ?? MIN_COLUMN_WIDTH;
+            const currentWidth = Math.round(header.column.getSize());
+            const RESIZE_KEY_STEP = 16;
             if (!showDivider && !isResizable) return null;
             return /* @__PURE__ */ jsx(
               "span",
               {
                 role: isResizable ? "separator" : void 0,
                 "aria-orientation": isResizable ? "vertical" : void 0,
-                "aria-label": isResizable ? "拖曳調整欄寬" : void 0,
+                "aria-label": isResizable ? "調整欄寬" : void 0,
+                tabIndex: isResizable ? 0 : void 0,
+                "aria-valuenow": isResizable ? currentWidth : void 0,
+                "aria-valuemin": isResizable ? effectiveMinWidth : void 0,
+                "aria-valuetext": isResizable ? `${currentWidth}px` : void 0,
+                onKeyDown: isResizable ? (e) => {
+                  let next = null;
+                  if (e.key === "ArrowLeft") next = Math.max(effectiveMinWidth, currentWidth - RESIZE_KEY_STEP);
+                  else if (e.key === "ArrowRight") next = currentWidth + RESIZE_KEY_STEP;
+                  else if (e.key === "Home") next = effectiveMinWidth;
+                  if (next == null) return;
+                  e.preventDefault();
+                  e.stopPropagation();
+                  table.setColumnSizing((prev) => ({ ...prev, [colId]: next }));
+                } : void 0,
                 className: cn(
                   "group/resize absolute top-0 bottom-0 right-0 -mr-[3px] w-[7px]",
-                  isResizable && "cursor-col-resize select-none"
+                  isResizable && "cursor-col-resize select-none",
+                  isResizable && "focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring"
                 ),
                 onPointerDownCapture: isResizable ? (e) => {
                   var _a4;
@@ -1627,7 +1637,9 @@ function DataTableInner({
               ref: centerBodyRef,
               "data-datatable-hscroll": true,
               "data-datatable-panel": "center",
-              className: "flex-1 min-w-0 overflow-x-auto overflow-y-auto",
+              tabIndex: enabled || spreadsheetMode ? void 0 : 0,
+              "aria-label": enabled || spreadsheetMode ? void 0 : "表格內容,可捲動",
+              className: "flex-1 min-w-0 overflow-x-auto overflow-y-auto focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring",
               style: isFillHeight && bodyMaxHeight != null ? { maxHeight: bodyMaxHeight } : hasHeightConstraint ? { maxHeight: height } : void 0,
               onScroll: onCenterBodyScroll,
               children: /* @__PURE__ */ jsx("div", { style: { minWidth: centerColsWidth }, children: renderBodyRows(centerCols, true, false) })