npm - @qijenchen/design-system - Versions diffs - 0.1.0-beta.13 → 0.1.0-beta.130 - Mend

@qijenchen/design-system 0.1.0-beta.13 → 0.1.0-beta.130

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1751) hide show

package/dist/components/DataTable/data-table-filter-value-picker.js ADDED Viewed

@@ -0,0 +1,205 @@
+import { jsx } from "react/jsx-runtime";
+import { Select } from "../Select/select.js";
+import { Combobox } from "../Combobox/combobox.js";
+import { Input } from "../Input/input.js";
+import { NumberInput } from "../NumberInput/number-input.js";
+import { DatePickerRange, DatePicker as DatePickerWithRange } from "../DatePicker/date-picker.js";
+import { PeoplePicker } from "../PeoplePicker/people-picker.js";
+import { DATE_RELATIVE_OPTIONS, DATE_RELATIVE_GROUPS } from "./filter-operators.js";
+function FilterValuePicker({
+  shape,
+  value,
+  onChange,
+  colInfo,
+  disabled,
+  ariaLabel,
+  labels,
+  className
+}) {
+  if (!shape || disabled) {
+    return /* @__PURE__ */ jsx(Input, { size: "sm", value: "", onChange: () => {
+    }, placeholder: labels.valuePlaceholder, disabled: true, "aria-label": ariaLabel, className });
+  }
+  switch (shape) {
+    case "none":
+      return null;
+    case "text":
+      return /* @__PURE__ */ jsx(
+        Input,
+        {
+          size: "sm",
+          value: String(value ?? ""),
+          onChange: (e) => onChange(e.target.value),
+          placeholder: labels.valuePlaceholder,
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ jsx(
+        NumberInput,
+        {
+          size: "sm",
+          value: typeof value === "number" ? value : null,
+          onChange: (v) => onChange(v ?? ""),
+          placeholder: labels.numberPlaceholder,
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    case "date_single":
+      return /* @__PURE__ */ jsx(
+        DatePickerWithRange,
+        {
+          size: "sm",
+          value: typeof value === "string" ? value : null,
+          onChange: (v) => onChange(v ?? ""),
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    case "date_range":
+      return /* @__PURE__ */ jsx(
+        DatePickerRange,
+        {
+          size: "sm",
+          value: Array.isArray(value) && value.length === 2 ? value : null,
+          onChange: (v) => onChange(v),
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    case "date_relative": {
+      const opts = DATE_RELATIVE_OPTIONS.map((o) => ({
+        value: o.value,
+        label: labels.relativeDateOptionLabels[o.value] ?? o.label,
+        group: o.group
+      }));
+      const groups = DATE_RELATIVE_GROUPS.map((group) => ({
+        key: group.key,
+        label: labels.relativeDateGroupLabels[group.key] ?? group.label
+      }));
+      return /* @__PURE__ */ jsx(
+        Select,
+        {
+          size: "sm",
+          options: opts,
+          groups,
+          value: String(value ?? ""),
+          onChange: (v) => onChange(v),
+          placeholder: labels.relativeDatePlaceholder,
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    }
+    case "select_single": {
+      const opts = ((colInfo == null ? void 0 : colInfo.options) ?? []).map((o) => ({
+        value: o.value,
+        label: o.label
+      }));
+      return /* @__PURE__ */ jsx(
+        Select,
+        {
+          size: "sm",
+          options: opts,
+          value: String(value ?? ""),
+          onChange: (v) => onChange(v),
+          placeholder: labels.singleSelectPlaceholder,
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    }
+    case "select_multi": {
+      const opts = ((colInfo == null ? void 0 : colInfo.options) ?? []).map((o) => ({
+        value: o.value,
+        label: o.label
+      }));
+      const arr = Array.isArray(value) ? value : [];
+      return /* @__PURE__ */ jsx(
+        Combobox,
+        {
+          size: "sm",
+          options: opts,
+          value: arr,
+          onChange: (v) => onChange(v),
+          placeholder: labels.multiSelectPlaceholder,
+          emptyText: labels.multiSelectEmptyText,
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    }
+    case "datetime_single":
+      return /* @__PURE__ */ jsx(
+        DatePickerWithRange,
+        {
+          size: "sm",
+          showTime: true,
+          value: typeof value === "string" ? value : null,
+          onChange: (v) => onChange(v ?? ""),
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    case "datetime_range":
+      return /* @__PURE__ */ jsx(
+        DatePickerRange,
+        {
+          size: "sm",
+          showTime: true,
+          value: Array.isArray(value) && value.length === 2 ? value : null,
+          onChange: (v) => onChange(v),
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    // person_single / person_multi — 走 PeoplePicker(2026-05-07 升級,對齊 cell-registry SSOT)。
+    // colInfo.people 來自 column meta.people。Filter value:
+    //   - person_single:存 PersonValue | null(picker emit array,我們取 [0])
+    //   - person_multi:存 PersonValue[]
+    case "person_single": {
+      const v = value;
+      return /* @__PURE__ */ jsx(
+        PeoplePicker,
+        {
+          size: "sm",
+          value: v ?? null,
+          people: (colInfo == null ? void 0 : colInfo.people) ?? [],
+          onChange: (next) => onChange(next[0] ?? null),
+          placeholder: labels.peoplePlaceholder,
+          searchPlaceholder: labels.peopleSearchPlaceholder,
+          searchAriaLabel: labels.peopleSearchAriaLabel,
+          emptyText: labels.peopleEmptyText,
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    }
+    case "person_multi": {
+      const v = Array.isArray(value) ? value : [];
+      return /* @__PURE__ */ jsx(
+        PeoplePicker,
+        {
+          size: "sm",
+          value: v,
+          people: (colInfo == null ? void 0 : colInfo.people) ?? [],
+          onChange: (next) => onChange(next),
+          placeholder: labels.peoplePlaceholder,
+          searchPlaceholder: labels.peopleSearchPlaceholder,
+          searchAriaLabel: labels.peopleSearchAriaLabel,
+          emptyText: labels.peopleEmptyText,
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    }
+    default:
+      return null;
+  }
+}
+export {
+  FilterValuePicker
+};
+//# sourceMappingURL=data-table-filter-value-picker.js.map

package/dist/components/DataTable/data-table-filter-value-picker.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"data-table-filter-value-picker.js","sources":["../../../src/components/DataTable/data-table-filter-value-picker.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved(2026-07-14 自 data-table-filter-panel.tsx 拆檔搬移,原檔級 escape 隨段落帶入)。\n// @internal — DS-internal 單元(FilterValuePicker value-picker switcher,只被\n// data-table-filter-group.tsx FilterRow 消費);不隨 index.ts re-export 進 npm public surface。\n// ────────────────────────────── 消費的 SSOT ──────────────────────────────\n// - Field controls(Family 4,統一 size=\"sm\"):Input / NumberInput / Select / Combobox /\n// DatePicker + DatePickerRange(showTime)/ PeoplePicker — 按 ValueShape dispatch\n// (ValueShape ↔ picker 對照 canonical:./data-table.spec.md「三、Operator × ValueShape SSOT」)\n// - className 直接 forward 給 inner Field control(不另開 wrapper div)—\n// field-control-group.spec.md「forward className」canonical(2026-05-04 #2 fix)\n// - Operator / ValueShape SSOT:./filter-operators.ts(DATE_RELATIVE_OPTIONS / DATE_RELATIVE_GROUPS)\n// - Person pool:PeoplePicker PersonValue(對齊 cell-registry meta.people SSOT)\n// 設計規則:./filter-operators.spec.md「ValueShape canonical」+ ./data-table.spec.md「進階篩選」段\n\nimport { Select, type SelectOption } from '@/design-system/components/Select/select'\nimport { Combobox } from '@/design-system/components/Combobox/combobox'\nimport { Input } from '@/design-system/components/Input/input'\nimport { NumberInput } from '@/design-system/components/NumberInput/number-input'\nimport { DatePicker, DatePickerRange } from '@/design-system/components/DatePicker/date-picker'\nimport { PeoplePicker } from '@/design-system/components/PeoplePicker/people-picker'\nimport type { PersonValue } from '@/design-system/components/PeoplePicker/person-display'\nimport {\n DATE_RELATIVE_OPTIONS,\n DATE_RELATIVE_GROUPS,\n type ValueShape,\n} from './filter-operators'\nimport type { DataTableFilterPanelLabels } from './data-table-filter-labels'\n\n// ── FilterValuePicker(value-picker switcher per ValueShape)────────────────\n//\n// 2026-05-03 M21 retract:本 helper 原獨立檔 filter-value-picker.tsx(187 行 / 1 consumer),\n// claim「未來 inline filter UI 共用」= premature abstraction → inline 回 panel。\n// 2026-07-14 拆檔 refactor:panel 822 行過 800 hard cap(file-size escalation)→ 重新抽出為\n// @internal 私有模組(非 public API 抽象,與 M21 不衝突;consumer 仍只見 DataTableFilterPanel)。\n\nexport interface FilterValuePickerColInfo {\n id: string\n label: string\n options?: Array<{ value: string; label: string }>\n /** Person pool — person/multiPerson filter picker 用(2026-05-07 升級,SSOT 對齊 cell-registry) */\n people?: Array<{ name: string; avatarUrl?: string; description?: string }>\n}\n\nexport interface FilterValuePickerProps {\n shape: ValueShape | null\n value: unknown\n onChange: (v: unknown) => void\n colInfo?: FilterValuePickerColInfo\n disabled?: boolean\n /** 用 column.label 組「{label} 篩選值」(panel 每 row 不顯式 label,a11y 必填) */\n ariaLabel?: string\n /** Resolved panel labels; placeholders and relative-date labels share one SSOT. */\n labels: DataTableFilterPanelLabels\n /** Forward 給內部 Field control 的 className(2026-05-04 #2 fix)\n * 避免外層包 wrapper div 破壞 FieldControlGroup CSS variants(rounded radii / margin overlap) */\n className?: string\n}\n\nexport function FilterValuePicker({\n shape,\n value,\n onChange,\n colInfo,\n disabled,\n ariaLabel,\n labels,\n className,\n}: FilterValuePickerProps) {\n if (!shape || disabled) {\n return <Input size=\"sm\" value=\"\" onChange={() => {}} placeholder={labels.valuePlaceholder} disabled aria-label={ariaLabel} className={className} />\n }\n\n switch (shape) {\n case 'none':\n return null\n\n case 'text':\n return (\n <Input\n size=\"sm\"\n value={String(value ?? '')}\n onChange={(e) => onChange(e.target.value)}\n placeholder={labels.valuePlaceholder}\n aria-label={ariaLabel}\n className={className}\n />\n )\n\n case 'number':\n return (\n <NumberInput\n size=\"sm\"\n value={typeof value === 'number' ? value : null}\n onChange={(v) => onChange(v ?? '')}\n placeholder={labels.numberPlaceholder}\n aria-label={ariaLabel}\n className={className}\n />\n )\n\n case 'date_single':\n return (\n <DatePicker\n size=\"sm\"\n value={typeof value === 'string' ? value : null}\n onChange={(v) => onChange(v ?? '')}\n aria-label={ariaLabel}\n className={className}\n />\n )\n\n case 'date_range':\n return (\n <DatePickerRange\n size=\"sm\"\n value={Array.isArray(value) && value.length === 2\n ? (value as [string | null, string | null])\n : null}\n onChange={(v) => onChange(v)}\n aria-label={ariaLabel}\n className={className}\n />\n )\n\n case 'date_relative': {\n // 群組分類:Past / Current / Future(對齊 Linear / Notion idiom),走 Select.groups → SelectMenu\n const opts: SelectOption[] = DATE_RELATIVE_OPTIONS.map((o) => ({\n value: o.value,\n label: labels.relativeDateOptionLabels[o.value] ?? o.label,\n group: o.group,\n }))\n const groups = DATE_RELATIVE_GROUPS.map((group) => ({\n key: group.key,\n label: labels.relativeDateGroupLabels[group.key] ?? group.label,\n }))\n return (\n <Select\n size=\"sm\"\n options={opts}\n groups={groups}\n value={String(value ?? '')}\n onChange={(v) => onChange(v)}\n placeholder={labels.relativeDatePlaceholder}\n aria-label={ariaLabel}\n className={className}\n />\n )\n }\n\n case 'select_single': {\n const opts: SelectOption[] = (colInfo?.options ?? []).map((o) => ({\n value: o.value,\n label: o.label,\n }))\n return (\n <Select\n size=\"sm\"\n options={opts}\n value={String(value ?? '')}\n onChange={(v) => onChange(v)}\n placeholder={labels.singleSelectPlaceholder}\n aria-label={ariaLabel}\n className={className}\n />\n )\n }\n\n case 'select_multi': {\n const opts = (colInfo?.options ?? []).map((o) => ({\n value: o.value,\n label: o.label,\n }))\n const arr = Array.isArray(value) ? (value as string[]) : []\n return (\n <Combobox\n size=\"sm\"\n options={opts}\n value={arr}\n onChange={(v) => onChange(v)}\n placeholder={labels.multiSelectPlaceholder}\n emptyText={labels.multiSelectEmptyText}\n aria-label={ariaLabel}\n className={className}\n />\n )\n }\n\n case 'datetime_single':\n return (\n <DatePicker\n size=\"sm\"\n showTime\n value={typeof value === 'string' ? value : null}\n onChange={(v) => onChange(v ?? '')}\n aria-label={ariaLabel}\n className={className}\n />\n )\n\n case 'datetime_range':\n return (\n <DatePickerRange\n size=\"sm\"\n showTime\n value={Array.isArray(value) && value.length === 2\n ? (value as [string | null, string | null])\n : null}\n onChange={(v) => onChange(v)}\n aria-label={ariaLabel}\n className={className}\n />\n )\n\n // person_single / person_multi — 走 PeoplePicker(2026-05-07 升級,對齊 cell-registry SSOT)。\n // colInfo.people 來自 column meta.people。Filter value:\n // - person_single:存 PersonValue | null(picker emit array,我們取 [0])\n // - person_multi:存 PersonValue[]\n case 'person_single': {\n const v = value as PersonValue | null | undefined\n return (\n <PeoplePicker\n size=\"sm\"\n value={v ?? null}\n people={colInfo?.people ?? []}\n onChange={(next) => onChange(next[0] ?? null)}\n placeholder={labels.peoplePlaceholder}\n searchPlaceholder={labels.peopleSearchPlaceholder}\n searchAriaLabel={labels.peopleSearchAriaLabel}\n emptyText={labels.peopleEmptyText}\n aria-label={ariaLabel}\n className={className}\n />\n )\n }\n case 'person_multi': {\n const v = Array.isArray(value) ? (value as PersonValue[]) : []\n return (\n <PeoplePicker\n size=\"sm\"\n value={v}\n people={colInfo?.people ?? []}\n onChange={(next) => onChange(next)}\n placeholder={labels.peoplePlaceholder}\n searchPlaceholder={labels.peopleSearchPlaceholder}\n searchAriaLabel={labels.peopleSearchAriaLabel}\n emptyText={labels.peopleEmptyText}\n aria-label={ariaLabel}\n className={className}\n />\n )\n }\n default:\n return null\n }\n}\n"],"names":["DatePicker"],"mappings":"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"}

package/dist/components/DataTable/data-table-interaction-layer.d.ts CHANGED Viewed

@@ -2,11 +2,12 @@
  * DataTableInteractionLayer — Slice D Step 1A scaffold(per `.claude/planning/datatable-spreadsheet-rfc.md`)
  *
  * Singleton overlay root inside DataTable(M21 private,不抽 global pattern)。
- * 5 sub-layer children(per RFC §Overlay Geometry):
+ * Sub-layer children(2026-07-04 對齊實作;原 RFC 5-layer 清單含未實作元件):
  *   - HoverCellRect(z 1):hover 邊框,「one geometry owner, two paint owners」(Contract 8)
- *   - SelectionRect / RangeRect(z 1.5):spreadsheet mode 才顯示(Contract 5,defer)
+ *   - SelectionRing(z 2):spreadsheet mode selected cell 1px ring(CELL_RING_STYLES.selected)
  *   - ActiveEditorHost(z 3):portal active edit Field(Slice C wire-up)
- *   - NestedPortalRegistry(z 4):date/select popup 註冊為 inside editor(Contract 7)
+ *   -(range 視覺 = CSS [data-range-cell] cell-bg,非 layer 元件;nested popup 走 Radix idiom
+ *     見 active-editor-controller.ts — RangeRect / NestedPortalRegistry 元件不存在)
  *
  * Slice D Step 1A scope:
  *   - getCellRect(cellId)geometry source(per Contract 8)
@@ -25,15 +26,16 @@ interface CellRect {
 interface DataTableInteractionLayerProps {
     /** Flag default false:不破現有 outline。enable 後 hover/editor 走 overlay。 */
     enabled: boolean;
-    /** Container ref;layer absolute position 對 container origin */
+    /** Container ref;geometry source(getCellRect 由此 query cell DOM)。layer root 本身是
+     *  position:fixed inset:0 viewport-anchor(見 render),非 container-origin absolute */
     containerRef: React.RefObject<HTMLDivElement | null>;
     /** Per Contract 15:`cellClickEntersEdit` predicate;hover overlay 顯示與否 */
     cellClickEntersEdit?: (cellId: CellId) => boolean;
     /**
-     * Slice D Step 3 scaffold(2026-05-10):active editor cell id。null = 無 active editor。
-     * 當前只 render rect placeholder layer(z-index 3,higher than hover ring z-index 1)。
-     * Future:ActiveEditorHost portal active edit Field per Contract 8 「two paint owners」。
-     * Wire-up 走 codex Q-7 string-first canary(text cell first,picker types 漸進)。
+     * Active editor cell id。null = 無 active editor。
+     * 已接線(Slice D Step 5 完成,2026-07-14 docblock 對齊):activeEditorEnabled +
+     * activeEditorCellId + activeEditorRender 齊 → ActiveEditorHost(z 3)portal render
+     * 真 edit Field(per Contract 8「two paint owners」)。
      */
     activeEditorCellId?: CellId | null;
     /**
@@ -50,29 +52,24 @@ interface DataTableInteractionLayerProps {
      * Layer renders solid border SelectionRect(per user「不要 dash 直接實的就好」)。
      */
     selectedCellId?: CellId | null;
-    /**
-     * Slice D Step 4 range support(per user「應該支援 range」+ codex Q2.1 Airtable/AG Grid
-     * cite):range cell IDs from anchor↔focus rectangle。Layer renders bg-fill RangeRect
-     * (z 1,bg `--primary-subtle`)+ selection border on focus cell。
-     */
-    rangeCellIds?: CellId[];
     /**
      * Slice D Step 5(D.3 portal Field,2026-05-10 user 拍板「在乎完美乾淨」+ codex Q6.1
      * 撤回 defer):active editor render callback。當 activeEditorEnabled + activeEditorCellId
      * truthy → layer call this 拿 React node(已 bind value/onCommit/onCancel from controller),
      * 在 ActiveEditorHost portal(z 3,float rect)render 之。
      *
-     * Per codex Q6.2 outline:cell 永遠 mode="display"(SSOT preserved);portal host 渲
-     * mode="edit" 同 registry component;float pass-through + z-index 3 cover display below。
+     * Per codex Q6.2 outline:cell 永遠 mode="view"(SSOT preserved);portal host 渲
+     * mode="edit" 同 registry component;float pass-through + z-index 3 cover view below。
      */
     activeEditorRender?: (cellId: CellId, rect: CellRect) => React.ReactNode;
 }
 /**
- * Singleton interaction layer。
+ * Singleton interaction layer(全 sub-layer 已接線;2026-07-14 docblock 對齊實作)。
  *
- * Slice D Step 1A:HoverCellRect only。
- * Slice D Step 2/3/4:SelectionRect / ActiveEditorHost / RangeRect 漸進加入。
+ * 現況:HoverCellRect(z 1)+ SelectionRing(z 2)+ ActiveEditorHost(z 3,portal edit Field);
+ * range 視覺走 cell 自身 CSS `[data-range-cell]`(RangeRect / rangeCellIds prop 已 retire)。
+ * layer root = position:fixed inset:0 viewport-anchor,pointerEvents:none(僅 ActiveEditorHost 開 auto)。
  */
-export declare function DataTableInteractionLayer({ enabled, containerRef, cellClickEntersEdit, activeEditorCellId, activeEditorEnabled, activeEditorRender, selectedCellId, rangeCellIds: _rangeCellIds, }: DataTableInteractionLayerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function DataTableInteractionLayer({ enabled, containerRef, cellClickEntersEdit, activeEditorCellId, activeEditorEnabled, activeEditorRender, selectedCellId, }: DataTableInteractionLayerProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=data-table-interaction-layer.d.ts.map

package/dist/components/DataTable/data-table-interaction-layer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table-interaction-layer.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/data-table-interaction-layer.tsx"],"names":[],"mappings":"~~AAAA;;;;;;;;;;;;;;;GAeG~~;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,KAAK,MAAM,GAAG,MAAM,CAAA;AAEpB,UAAU,QAAQ;IAChB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED,UAAU,8BAA8B;IACtC,uEAAuE;IACvE,OAAO,EAAE,OAAO,CAAA;IAChB~~,+DAA+D~~;~~IAC/D~~,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACpD,yEAAyE;IACzE,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAA;IACjD;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAClC;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B~~;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB~~;;;;;;;;OAQG;IACH,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,KAAK,KAAK,CAAC,SAAS,CAAA;CACzE;AAsJD~~;;;;;GAKG~~;AACH,wBAAgB,yBAAyB,CAAC,EACxC,OAAO,EACP,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,mBAA2B,EAC3B,kBAAkB,EAClB,cAAqB,~~EAErB~~,~~YAAY,~~EAAE,~~aAAa,GAC5B,EAAE,~~8BAA8B,kDAqFhC"}
1	+ {"version":3,"file":"data-table-interaction-layer.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/data-table-interaction-layer.tsx"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,KAAK,MAAM,GAAG,MAAM,CAAA;AAEpB,UAAU,QAAQ;IAChB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED,UAAU,8BAA8B;IACtC,uEAAuE;IACvE,OAAO,EAAE,OAAO,CAAA;IAChB;uFACmF;IACnF,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACpD,yEAAyE;IACzE,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAA;IACjD;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAClC;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B;;;;;;;;OAQG;IACH,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,KAAK,KAAK,CAAC,SAAS,CAAA;CACzE;AAsJD;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,OAAO,EACP,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,mBAA2B,EAC3B,kBAAkB,EAClB,cAAqB,GACtB,EAAE,8BAA8B,kDAqFhC"}

package/dist/components/DataTable/data-table-interaction-layer.js CHANGED Viewed

@@ -87,9 +87,7 @@ function DataTableInteractionLayer({
   activeEditorCellId,
   activeEditorEnabled = false,
   activeEditorRender,
-  selectedCellId = null,
-  // rangeCellIds retired 2026-05-10(outer ring 已 retire,range visual 靠 cell-bg `[data-range-cell]`)
-  rangeCellIds: _rangeCellIds
+  selectedCellId = null
 }) {
   const hoveredCellId = useHoveredCell(containerRef, enabled);
   useReactiveRect(containerRef, enabled);

package/dist/components/DataTable/data-table-interaction-layer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table-interaction-layer.js","sources":["../../../src/components/DataTable/data-table-interaction-layer.tsx"],"sourcesContent":["/*\n DataTableInteractionLayer — Slice D Step 1A scaffold(per `.claude/planning/datatable-spreadsheet-rfc.md`)\n \n Singleton overlay root inside DataTable(M21 private,不抽 global pattern)。\n * 5 sub-layer children(per RFC §Overlay Geometry):\n * - HoverCellRect(z 1):hover 邊框,「one geometry owner, two paint owners」(Contract 8)\n * - SelectionRect / RangeRect(z 1.5):spreadsheet mode 才顯示(Contract 5,defer)\n * - ActiveEditorHost(z 3):portal active edit Field(Slice C wire-up)\n * - NestedPortalRegistry(z 4):date/select popup 註冊為 inside editor(Contract 7)\n \n Slice D Step 1A scope:\n * - getCellRect(cellId)geometry source(per Contract 8)\n * - HoverCellRect 1 layer 先做(Contract 8 / Contract 15 cellClickEntersEdit predicate)\n * - 默認 disabled via `experimentalSpreadsheetOverlay` flag,不破現有 outline\n * - 後續 Step 1B/C/D 漸進切換 + 拆 outline\n /\n\nimport as React from 'react'\n\ntype CellId = string\n\ninterface CellRect {\n x: number\n y: number\n width: number\n height: number\n}\n\ninterface DataTableInteractionLayerProps {\n /** Flag default false:不破現有 outline。enable 後 hover/editor 走 overlay。 /\n enabled: boolean\n /* Container ref;layer absolute position 對 container origin /\n containerRef: React.RefObject<HTMLDivElement \| null>\n /* Per Contract 15:`cellClickEntersEdit` predicate;hover overlay 顯示與否 /\n cellClickEntersEdit?: (cellId: CellId) => boolean\n /\n Slice D Step 3 scaffold(2026-05-10):active editor cell id。null = 無 active editor。\n * 當前只 render rect placeholder layer(z-index 3,higher than hover ring z-index 1)。\n * Future:ActiveEditorHost portal active edit Field per Contract 8 「two paint owners」。\n * Wire-up 走 codex Q-7 string-first canary(text cell first,picker types 漸進)。\n /\n activeEditorCellId?: CellId \| null\n /\n Slice D Step 3.x flag:啟用 ActiveEditorHost dashed scaffold rect rendering。\n * 2026-05-10 bug fix(user 圖1 雙 ring 同時顯示):dashed scaffold 之前綁\n * `enabled`(= experimentalSpreadsheetOverlay)→ 任何 cell 進 edit mode 就 leak\n * 出 dashed rect。改 gate 給 `experimentalActiveEditorController`(Step 3.3 真\n * portal Field 工作),hover overlay scope 不會看到 dashed scaffold。\n /\n activeEditorEnabled?: boolean\n /\n Slice D Step 4(spreadsheet semantics,2026-05-10 user 圖1 ask + RFC Contract 5):\n * Excel-like 選取 cell ID。Click 1 select / Click 2 enter edit。\n * Layer renders solid border SelectionRect(per user「不要 dash 直接實的就好」)。\n /\n selectedCellId?: CellId \| null\n /\n Slice D Step 4 range support(per user「應該支援 range」+ codex Q2.1 Airtable/AG Grid\n * cite):range cell IDs from anchor↔focus rectangle。Layer renders bg-fill RangeRect\n * (z 1,bg `--primary-subtle`)+ selection border on focus cell。\n /\n rangeCellIds?: CellId[]\n /\n Slice D Step 5(D.3 portal Field,2026-05-10 user 拍板「在乎完美乾淨」+ codex Q6.1\n * 撤回 defer):active editor render callback。當 activeEditorEnabled + activeEditorCellId\n * truthy → layer call this 拿 React node(已 bind value/onCommit/onCancel from controller),\n * 在 ActiveEditorHost portal(z 3,float rect)render 之。\n \n Per codex Q6.2 outline:cell 永遠 mode=\"display\"(SSOT preserved);portal host 渲\n * mode=\"edit\" 同 registry component;float pass-through + z-index 3 cover display below。\n /\n activeEditorRender?: (cellId: CellId, rect: CellRect) => React.ReactNode\n}\n\n/\n `getCellRect(cellId)` geometry source(per Contract 8)。\n \n 從 DOM 量(per-call `getBoundingClientRect()`)而非 layoutCache,因為:\n * 1. cell DOM 是 React-rendered,getBoundingClientRect 永遠是 source of truth\n * 2. layoutCache 需另寫 invalidation logic,added complexity\n * 3. Hover overlay re-render 頻率低(per cell hover,不是 per frame)\n \n 0.5px sub-pixel snap per RFC §Overlay Geometry。\n /\nfunction getCellRect(containerEl: HTMLElement \| null, cellId: CellId): CellRect \| null {\n if (!containerEl) return null\n const cellEl = containerEl.querySelector<HTMLElement>(`[data-cell-id=\"${cellId}\"]`)\n if (!cellEl) return null\n // Page-absolute coords for viewport-fixed layer(per Step 1C bug fix:layer\n // 用 position:fixed,讓 paint owner 跟 reference frame 解耦 outer container 的 positioning)。\n // 2026-05-10 v3 fix(user 圖5 SSOT consistency):float coords no rounding。\n // Cell 自身 layout 用 sub-pixel float position(CSS 不 snap to integer)— 跨 cell 累積\n // 常見 144.328 / 244.0 / 524.172 等 fractional。任何 Math.round / floor / ceil 都引入\n // varying rounding error(visual audit verified:dx=0.17/0.5/0.83 不一致)。\n // Float pass-through + outline + outline-offset:-1px(下方 paint)→ overlay 永遠跟\n // cell exact pixel-perfect overlap,user verbatim「在內容起始位置不變的前提下讓\n // overlay 的邊框直接剛好壓住 cell 邊框」達成。\n const rect = cellEl.getBoundingClientRect()\n return {\n x: rect.x,\n y: rect.y,\n width: rect.width,\n height: rect.height,\n }\n}\n\n/\n Issue 6 viewport clip(2026-05-10):cell 跟 panel(left/center/right)bounding rect 一起取,\n * layer 用 panel rect 當 clip viewport intersect cell rect → overlay 永不畫到 panel 外。\n \n Per codex 13-issues verdict:「getCellRect 找最近 scroll viewport;intersect(cellRect, viewportRect),\n * 空 → 不 render,部分 → clipped rect render。」\n \n 對齊 AG Grid `cellsForRangeSet` viewport-aware paint / Glide DataGrid clip helpers /\n * Notion sticky-cell virtualizer mask。\n /\ninterface CellGeometry {\n /* Cell exact viewport rect(no rounding,float pass-through per Bug 5 SSOT) /\n rect: CellRect\n /* Nearest panel container rect(left/center/right body)— clip viewport for overlays /\n clipRect: CellRect\n /* Panel identifier(`left` / `center` / `right`)— grouped range outer ring 分段用 /\n panel: 'left' \| 'center' \| 'right'\n}\n\nfunction getCellGeometry(containerEl: HTMLElement \| null, cellId: CellId): CellGeometry \| null {\n if (!containerEl) return null\n const cellEl = containerEl.querySelector<HTMLElement>(`[data-cell-id=\"${cellId}\"]`)\n if (!cellEl) return null\n const panelEl = cellEl.closest<HTMLElement>('[data-datatable-panel]')\n if (!panelEl) return null\n const panel = panelEl.dataset.datatablePanel as 'left' \| 'center' \| 'right'\n const cellR = cellEl.getBoundingClientRect()\n const panelR = panelEl.getBoundingClientRect()\n return {\n rect: { x: cellR.x, y: cellR.y, width: cellR.width, height: cellR.height },\n clipRect: { x: panelR.x, y: panelR.y, width: panelR.width, height: panelR.height },\n panel,\n }\n}\n\n\n/\n Reactive rect sync hook — 確保 overlay rect 跨 RWD / scroll / resize 永遠對齊 cell(2026-05-10\n * user 拍板「所有 overlay 在各種 RWD 和捲動時都能處在正確位置上」)。\n \n 監聽 3 source(rAF coalesce 避 frame storm):\n * 1. window scroll(capture mode 抓 nested table body scroll + page scroll)\n * 2. window resize(viewport size change → cell width 變)\n * 3. ResizeObserver on container(column resize / table dimension 變)\n \n 每次事件 fire → setVersion(v+1) → 觸發 layer re-render → rect 用最新 getBoundingClientRect\n * 重算。getBoundingClientRect 本身永遠 return 當下 viewport-relative coords,沒 stale cache。\n \n Per codex(brief: codex-brief-rwd-future-2026-05-10):rAF coalesce 不需要 debounce,scroll\n * 跟到不延遲才對(Glide / AG Grid 同 idiom)。\n /\nfunction useReactiveRect(containerRef: React.RefObject<HTMLElement \| null>, enabled: boolean) {\n const [, setVersion] = React.useState(0)\n React.useEffect(() => {\n if (!enabled) return\n let rafId: number \| null = null\n const force = () => {\n if (rafId !== null) return\n rafId = requestAnimationFrame(() => {\n rafId = null\n setVersion((v) => v + 1)\n })\n }\n window.addEventListener('scroll', force, { capture: true, passive: true })\n window.addEventListener('resize', force, { passive: true })\n const container = containerRef.current\n let ro: ResizeObserver \| null = null\n if (container && typeof ResizeObserver !== 'undefined') {\n ro = new ResizeObserver(force)\n ro.observe(container)\n }\n return () => {\n window.removeEventListener('scroll', force, { capture: true } as EventListenerOptions)\n window.removeEventListener('resize', force)\n if (ro) ro.disconnect()\n if (rafId !== null) cancelAnimationFrame(rafId)\n }\n }, [enabled, containerRef])\n}\n\n/\n Hover state hook — 監聽 container hover events,track hovered cell id。\n \n Implementation:event delegation on container(不 per-cell mount listeners),\n * 利用 `data-cell-id` attribute + closest()。\n /\nfunction useHoveredCell(\n containerRef: React.RefObject<HTMLElement \| null>,\n enabled: boolean,\n): CellId \| null {\n const [hoveredCellId, setHoveredCellId] = React.useState<CellId \| null>(null)\n\n React.useEffect(() => {\n if (!enabled) { setHoveredCellId(null); return }\n const container = containerRef.current\n if (!container) return\n\n const handleMouseOver = (e: MouseEvent) => {\n const target = e.target as HTMLElement \| null\n const cellEl = target?.closest<HTMLElement>('[data-cell-id]')\n const id = cellEl?.dataset.cellId ?? null\n setHoveredCellId(id)\n }\n const handleMouseLeave = () => setHoveredCellId(null)\n\n container.addEventListener('mouseover', handleMouseOver)\n container.addEventListener('mouseleave', handleMouseLeave)\n return () => {\n container.removeEventListener('mouseover', handleMouseOver)\n container.removeEventListener('mouseleave', handleMouseLeave)\n }\n }, [enabled, containerRef])\n\n return hoveredCellId\n}\n\n/\n Singleton interaction layer。\n \n Slice D Step 1A:HoverCellRect only。\n * Slice D Step 2/3/4:SelectionRect / ActiveEditorHost / RangeRect 漸進加入。\n /\nexport function DataTableInteractionLayer({\n enabled,\n containerRef,\n cellClickEntersEdit,\n activeEditorCellId,\n activeEditorEnabled = false,\n activeEditorRender,\n selectedCellId = null,\n // rangeCellIds retired 2026-05-10(outer ring 已 retire,range visual 靠 cell-bg `[data-range-cell]`)\n rangeCellIds: _rangeCellIds,\n}: DataTableInteractionLayerProps) {\n const hoveredCellId = useHoveredCell(containerRef, enabled)\n // 2026-05-10 RWD/scroll sync(per user mandate「所有 overlay 在各種 RWD 和捲動時都處在正確位置」):\n // window scroll(capture)+ resize + ResizeObserver(container)→ rAF coalesced re-render → rect 重算\n useReactiveRect(containerRef, enabled)\n\n // Contract 14 state precedence:editing > selected > hover(per RFC §State Precedence Matrix)\n const isEditingHovered = activeEditorCellId != null && activeEditorCellId === hoveredCellId\n const isSelectedHovered = selectedCellId != null && selectedCellId === hoveredCellId\n const shouldShowHover = enabled && hoveredCellId != null && !isEditingHovered && !isSelectedHovered\n && (cellClickEntersEdit ? cellClickEntersEdit(hoveredCellId) : true)\n\n // Issue 6 viewport clip(2026-05-10):每個 overlay rect 都跟最近 panel(left/center/right body)\n // intersect。Cell scroll 出 panel viewport(H scroll / pinned 範圍)→ rect null → 不 render;\n // 部分 → 用 ClipMask wrap 在 panel viewport 內裁切,outline 永遠在 cell 真邊但被 mask 限制視覺。\n const hoverGeo = shouldShowHover\n ? getCellGeometry(containerRef.current, hoveredCellId!)\n : null\n\n // Slice D Step 3 scaffold:ActiveEditorHost rect placeholder(per Contract 8 active editor paint owner)。\n // 2026-05-10 bug fix:gate by `activeEditorEnabled` flag(Step 3.3 portal Field work)。\n // Issue 6:active editor host 不做 viewport clip(per codex「editor 必可見」),\n // 仍走原 path 從 getCellRect 取 viewport coords。User 應將 active editor cell 滾到 viewport 內。\n const activeEditorRect = activeEditorEnabled && activeEditorCellId != null\n ? getCellRect(containerRef.current, activeEditorCellId)\n : null\n\n // Slice D Step 4(spreadsheet semantics):SelectionRect + RangeRect with viewport clip。\n const selectedGeo = enabled && selectedCellId != null\n ? getCellGeometry(containerRef.current, selectedCellId)\n : null\n\n // 2026-05-10 retire `rangeOuterRingsByPanel` calc + render(per user 抓 range 2px outer\n // ring 不需要 — cell-bg `--primary-subtle` 已給「這些 cell 在範圍內」訊號,outer ring 是\n // redundant visual)。`CellRangeOuterRing` primitive 已 retire(下方刪),getCellGeometry 仍\n // 給 hover / selected overlay 使用,保留。Future 若需 outer ring 復用,從 git history 取\n // commit `763b3ac`(Issue 6 viewport clip)的 implementation。\n\n if (!enabled) return null\n\n // Layer absolute fixed-position relative to viewport(避 outer container 缺 position:relative\n // 找錯 reference frame)。getCellRect 已 return container-relative,但這裡 set top/left 用\n // page coords 一致 — 改用 viewport-fixed 簡化。\n return (\n <div\n aria-hidden\n style={{ position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 1 }}\n >\n {/ HoverRing — kind=hover(1px var(--border-hover)) z 1。Wrap 在 ClipMask(panel viewport)\n 內 → cell scroll 出 panel 時 outline 自動被 mask 裁切,不會 leak 到 panel 外。 /}\n {hoverGeo && (\n <ClipMask clipRect={hoverGeo.clipRect}>\n <CellRingOverlay rect={toRelRect(hoverGeo.rect, hoverGeo.clipRect)} kind=\"hover\" />\n </ClipMask>\n )}\n {/ SelectionRing — kind=selected(1px var(--primary)) z 2,SSOT 同 hover wide /}\n {selectedGeo && (\n <ClipMask clipRect={selectedGeo.clipRect}>\n <CellRingOverlay\n rect={toRelRect(selectedGeo.rect, selectedGeo.clipRect)}\n kind=\"selected\"\n cellId={selectedCellId!}\n />\n </ClipMask>\n )}\n {/ 2026-05-10 retire RangeOuterRing(per user 抓 image 4 + verbatim「range 的 cell 本來就有顏色變化,\n 那樣就夠了,不需要再有 2px 藍色的框」)。Range visual now relies purely on cell-bg\n (`--primary-subtle` via `[data-range-cell]` CSS in `data-table.css`)+ focus cell 2px selected\n border。Outer 2px primary ring 從 Issue 6 ship 但 visual 太重 — bg-fill 已給「這些 cell 在範圍內」\n 訊號,outer ring 是 redundant。`rangeOuterRingsByPanel` 計算保留但不 render(future 若需 reinstate\n 只需打開 .map)。 /}\n {/ {rangeOuterRingsByPanel.map((group) => (\n <ClipMask key={group.panel} clipRect={group.clipRect}>\n <CellRangeOuterRing rect={toRelRect(group.bbox, group.clipRect)} />\n </ClipMask>\n ))} /}\n {/ ActiveEditorHost — z 3,float rect,pointerEvents:auto opaque host(NOT a ring)。\n Issue 6:active editor 不 clip(editor 必可見) — user 滾出 viewport 自負責。 /}\n {activeEditorRect && (\n <ActiveEditorHost rect={activeEditorRect}>\n {activeEditorRender ? activeEditorRender(activeEditorCellId!, activeEditorRect) : null}\n </ActiveEditorHost>\n )}\n </div>\n )\n}\n\n/\n `toRelRect(cellRect, clipRect)` — Issue 6 helper(2026-05-10):\n * 把 viewport coords cell rect 轉成 ClipMask containing-block 內 relative coords。\n * ClipMask 用 panel rect 做 absolute container + overflow:hidden,內部 child absolute 定位\n * 以 mask 為 reference frame,所以 cellRect.x - clipRect.x 才對齊 cell 真實位置。\n /\nfunction toRelRect(cellRect: CellRect, clipRect: CellRect): CellRect {\n return {\n x: cellRect.x - clipRect.x,\n y: cellRect.y - clipRect.y,\n width: cellRect.width,\n height: cellRect.height,\n }\n}\n\n// ── Private primitives(per codex unified-ring-overlay-2026-05-10 Final A')──────\n//\n// 三個 private primitive 各自 own 一個 paint concern:\n// 1. CellRingOverlay — outline ring(hover / selected / future focus / error)\n// 2. CellRangeFill — bg fill(range cells in spreadsheet mode)\n// 3. ActiveEditorHost — opaque host(portal Field edit)\n//\n// SSOT pattern(共 3 primitives):rect float pass-through + boxSizing:border-box +\n// pointerEvents 視 kind / position:absolute on viewport-fixed layer。\n//\n// Token mapping 集中 `CELL_RING_STYLES`(per codex Q3 verdict 不開 global `--cell-ring-` token,\n// 在 primitive 內 kind → semantic token mapping)。\n\nconst CELL_RING_STYLES = {\n hover: { width: 1, color: 'var(--border-hover)', zIndex: 1 },\n selected: { width: 1, color: 'var(--primary)', zIndex: 2 },\n // future kinds(per codex Q6 outline,加 entry 即可擴展):\n // focus: { width: 2, color: 'var(--primary)', zIndex: 2 },\n // error: { width: 1, color: 'var(--error)', zIndex: 2 },\n} as const\n\ntype CellRingKind = keyof typeof CELL_RING_STYLES\n\nfunction rectStyle(rect: CellRect): React.CSSProperties {\n return {\n position: 'absolute',\n left: rect.x,\n top: rect.y,\n width: rect.width,\n height: rect.height,\n }\n}\n\n/*\n CellRingOverlay — paint owner for hover / selected / future focus / error rings。\n \n 共用 SSOT(per Bug 5 fix + codex Q2 unified primitive):\n * - Float pass-through rect(getCellRect 不 round)\n * - outline + outline-offset:`-${width}px` paint 在 cell 既有 border 上 in-place\n * - boxSizing:border-box(避免 outline 影響 layout)\n * - pointerEvents:none(透視點擊穿透)\n * - transition:none(避 fade flash)\n /\nfunction CellRingOverlay({ rect, kind, cellId }: {\n rect: CellRect\n kind: CellRingKind\n cellId?: CellId\n}) {\n const ring = CELL_RING_STYLES[kind]\n const dataAttr = kind === 'selected' && cellId ? { 'data-selected-cell-id': cellId } : {}\n return (\n <div\n aria-hidden\n style={{\n ...rectStyle(rect),\n outline: `${ring.width}px solid ${ring.color}`,\n outlineOffset: `-${ring.width}px`,\n boxSizing: 'border-box',\n pointerEvents: 'none',\n transition: 'none',\n zIndex: ring.zIndex,\n }}\n {...dataAttr}\n />\n )\n}\n\n// `CellRangeOuterRing` primitive retired 2026-05-10(per user 「range cell 本來就有顏色變化\n// 那樣就夠了,不需要再有 2px 藍色的框」)。Source 留 git history commit `763b3ac`(Issue 6\n// viewport clip ship)若需 reinstate。\n\n/\n ClipMask — Issue 6 primitive(2026-05-10):panel viewport 裁切容器。\n \n 用在 hover / selected / range outer ring overlay,避免 cell 滾出 panel viewport(H scroll /\n * pinned 範圍)時 overlay 仍漂浮在 panel 外。Layer 是 `position: fixed` viewport-anchor,\n * ClipMask 用 panel rect 當 absolute container + `overflow: hidden` mask;child overlay 用\n * `toRelRect(cellRect, clipRect)` 算出 mask-relative 座標,在 mask 內精準定位但被 mask 邊緣裁切。\n \n 對齊 AG Grid `cellsForRangeSet` viewport-aware paint / Glide DataGrid clip helpers /\n * Notion sticky-cell virtualizer mask。\n /\nfunction ClipMask({ clipRect, children }: { clipRect: CellRect; children: React.ReactNode }) {\n return (\n <div\n aria-hidden\n style={{\n position: 'absolute',\n left: clipRect.x,\n top: clipRect.y,\n width: clipRect.width,\n height: clipRect.height,\n overflow: 'hidden',\n pointerEvents: 'none',\n }}\n >\n {children}\n </div>\n )\n}\n\n/\n ActiveEditorHost — opaque host for portal Field edit(D.3,Slice D Step 5)。\n \n Per codex Q2 verdict:不該進 CellRingOverlay primitive — 它是 host 不是 ring。\n * - pointerEvents:auto(child Field 接收 click / keyboard)\n * - background:var(--canvas)(opaque cover display Field below;Cell SSOT 保留)\n * - z-index 3(above hover / selected / range)\n * - children = activeEditorRender 的回傳 React node\n \n Empty children fallback = dashed debug indicator(no portal Field provided)。\n */\nfunction ActiveEditorHost({ rect, children }: { rect: CellRect; children: React.ReactNode }) {\n if (!children) {\n return (\n <div\n aria-hidden\n style={{\n ...rectStyle(rect),\n pointerEvents: 'none',\n zIndex: 3,\n border: '1px dashed var(--primary)',\n boxSizing: 'border-box',\n }}\n data-active-editor-host-scaffold\n />\n )\n }\n return (\n <div\n style={{\n ...rectStyle(rect),\n pointerEvents: 'auto',\n zIndex: 3,\n boxSizing: 'border-box',\n background: 'var(--canvas)',\n }}\n data-active-editor-host\n >\n {children}\n </div>\n )\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"data-table-interaction-layer.js","sources":["../../../src/components/DataTable/data-table-interaction-layer.tsx"],"sourcesContent":["// @internal — DS-internal 單元(viewport 覆蓋 paint layer,只被 data-table.tsx 內部消費);不隨 index.ts re-export 進 npm public surface。\n/*\n DataTableInteractionLayer — Slice D Step 1A scaffold(per `.claude/planning/datatable-spreadsheet-rfc.md`)\n \n Singleton overlay root inside DataTable(M21 private,不抽 global pattern)。\n * Sub-layer children(2026-07-04 對齊實作;原 RFC 5-layer 清單含未實作元件):\n * - HoverCellRect(z 1):hover 邊框,「one geometry owner, two paint owners」(Contract 8)\n * - SelectionRing(z 2):spreadsheet mode selected cell 1px ring(CELL_RING_STYLES.selected)\n * - ActiveEditorHost(z 3):portal active edit Field(Slice C wire-up)\n * -(range 視覺 = CSS [data-range-cell] cell-bg,非 layer 元件;nested popup 走 Radix idiom\n * 見 active-editor-controller.ts — RangeRect / NestedPortalRegistry 元件不存在)\n \n Slice D Step 1A scope:\n * - getCellRect(cellId)geometry source(per Contract 8)\n * - HoverCellRect 1 layer 先做(Contract 8 / Contract 15 cellClickEntersEdit predicate)\n * - 默認 disabled via `experimentalSpreadsheetOverlay` flag,不破現有 outline\n * - 後續 Step 1B/C/D 漸進切換 + 拆 outline\n /\n\nimport as React from 'react'\n\ntype CellId = string\n\ninterface CellRect {\n x: number\n y: number\n width: number\n height: number\n}\n\ninterface DataTableInteractionLayerProps {\n /** Flag default false:不破現有 outline。enable 後 hover/editor 走 overlay。 /\n enabled: boolean\n /* Container ref;geometry source(getCellRect 由此 query cell DOM)。layer root 本身是\n * position:fixed inset:0 viewport-anchor(見 render),非 container-origin absolute /\n containerRef: React.RefObject<HTMLDivElement \| null>\n /* Per Contract 15:`cellClickEntersEdit` predicate;hover overlay 顯示與否 /\n cellClickEntersEdit?: (cellId: CellId) => boolean\n /\n Active editor cell id。null = 無 active editor。\n * 已接線(Slice D Step 5 完成,2026-07-14 docblock 對齊):activeEditorEnabled +\n * activeEditorCellId + activeEditorRender 齊 → ActiveEditorHost(z 3)portal render\n * 真 edit Field(per Contract 8「two paint owners」)。\n /\n activeEditorCellId?: CellId \| null\n /\n Slice D Step 3.x flag:啟用 ActiveEditorHost dashed scaffold rect rendering。\n * 2026-05-10 bug fix(user 圖1 雙 ring 同時顯示):dashed scaffold 之前綁\n * `enabled`(= experimentalSpreadsheetOverlay)→ 任何 cell 進 edit mode 就 leak\n * 出 dashed rect。改 gate 給 `experimentalActiveEditorController`(Step 3.3 真\n * portal Field 工作),hover overlay scope 不會看到 dashed scaffold。\n /\n activeEditorEnabled?: boolean\n /\n Slice D Step 4(spreadsheet semantics,2026-05-10 user 圖1 ask + RFC Contract 5):\n * Excel-like 選取 cell ID。Click 1 select / Click 2 enter edit。\n * Layer renders solid border SelectionRect(per user「不要 dash 直接實的就好」)。\n /\n selectedCellId?: CellId \| null\n /\n Slice D Step 5(D.3 portal Field,2026-05-10 user 拍板「在乎完美乾淨」+ codex Q6.1\n * 撤回 defer):active editor render callback。當 activeEditorEnabled + activeEditorCellId\n * truthy → layer call this 拿 React node(已 bind value/onCommit/onCancel from controller),\n * 在 ActiveEditorHost portal(z 3,float rect)render 之。\n \n Per codex Q6.2 outline:cell 永遠 mode=\"view\"(SSOT preserved);portal host 渲\n * mode=\"edit\" 同 registry component;float pass-through + z-index 3 cover view below。\n /\n activeEditorRender?: (cellId: CellId, rect: CellRect) => React.ReactNode\n}\n\n/\n `getCellRect(cellId)` geometry source(per Contract 8)。\n \n 從 DOM 量(per-call `getBoundingClientRect()`)而非 layoutCache,因為:\n * 1. cell DOM 是 React-rendered,getBoundingClientRect 永遠是 source of truth\n * 2. layoutCache 需另寫 invalidation logic,added complexity\n * 3. Hover overlay re-render 頻率低(per cell hover,不是 per frame)\n \n Float coords pass-through — no rounding / no snap(v3 fix,見下方 v3 註解;原 RFC 0.5px snap 已撤)。\n /\nfunction getCellRect(containerEl: HTMLElement \| null, cellId: CellId): CellRect \| null {\n if (!containerEl) return null\n const cellEl = containerEl.querySelector<HTMLElement>(`[data-cell-id=\"${cellId}\"]`)\n if (!cellEl) return null\n // Page-absolute coords for viewport-fixed layer(per Step 1C bug fix:layer\n // 用 position:fixed,讓 paint owner 跟 reference frame 解耦 outer container 的 positioning)。\n // 2026-05-10 v3 fix(user 圖5 SSOT consistency):float coords no rounding。\n // Cell 自身 layout 用 sub-pixel float position(CSS 不 snap to integer)— 跨 cell 累積\n // 常見 144.328 / 244.0 / 524.172 等 fractional。任何 Math.round / floor / ceil 都引入\n // varying rounding error(visual audit verified:dx=0.17/0.5/0.83 不一致)。\n // Float pass-through + outline + outline-offset:-1px(下方 paint)→ overlay 永遠跟\n // cell exact pixel-perfect overlap,user verbatim「在內容起始位置不變的前提下讓\n // overlay 的邊框直接剛好壓住 cell 邊框」達成。\n const rect = cellEl.getBoundingClientRect()\n return {\n x: rect.x,\n y: rect.y,\n width: rect.width,\n height: rect.height,\n }\n}\n\n/\n Issue 6 viewport clip(2026-05-10):cell 跟 panel(left/center/right)bounding rect 一起取,\n * layer 用 panel rect 當 clip viewport intersect cell rect → overlay 永不畫到 panel 外。\n \n Per codex 13-issues verdict:「getCellRect 找最近 scroll viewport;intersect(cellRect, viewportRect),\n * 空 → 不 render,部分 → clipped rect render。」\n \n 對齊 AG Grid `cellsForRangeSet` viewport-aware paint / Glide DataGrid clip helpers /\n * Notion sticky-cell virtualizer mask。\n /\ninterface CellGeometry {\n /* Cell exact viewport rect(no rounding,float pass-through per Bug 5 SSOT) /\n rect: CellRect\n /* Nearest panel container rect(left/center/right body)— clip viewport for overlays /\n clipRect: CellRect\n /* Panel identifier(`left` / `center` / `right`)— grouped range outer ring 分段用 /\n panel: 'left' \| 'center' \| 'right'\n}\n\nfunction getCellGeometry(containerEl: HTMLElement \| null, cellId: CellId): CellGeometry \| null {\n if (!containerEl) return null\n const cellEl = containerEl.querySelector<HTMLElement>(`[data-cell-id=\"${cellId}\"]`)\n if (!cellEl) return null\n const panelEl = cellEl.closest<HTMLElement>('[data-datatable-panel]')\n if (!panelEl) return null\n const panel = panelEl.dataset.datatablePanel as 'left' \| 'center' \| 'right'\n const cellR = cellEl.getBoundingClientRect()\n const panelR = panelEl.getBoundingClientRect()\n return {\n rect: { x: cellR.x, y: cellR.y, width: cellR.width, height: cellR.height },\n clipRect: { x: panelR.x, y: panelR.y, width: panelR.width, height: panelR.height },\n panel,\n }\n}\n\n\n/\n Reactive rect sync hook — 確保 overlay rect 跨 RWD / scroll / resize 永遠對齊 cell(2026-05-10\n * user 拍板「所有 overlay 在各種 RWD 和捲動時都能處在正確位置上」)。\n \n 監聽 3 source(rAF coalesce 避 frame storm):\n * 1. window scroll(capture mode 抓 nested table body scroll + page scroll)\n * 2. window resize(viewport size change → cell width 變)\n * 3. ResizeObserver on container(column resize / table dimension 變)\n \n 每次事件 fire → setVersion(v+1) → 觸發 layer re-render → rect 用最新 getBoundingClientRect\n * 重算。getBoundingClientRect 本身永遠 return 當下 viewport-relative coords,沒 stale cache。\n \n Per codex(brief: codex-brief-rwd-future-2026-05-10):rAF coalesce 不需要 debounce,scroll\n * 跟到不延遲才對(Glide / AG Grid 同 idiom)。\n /\nfunction useReactiveRect(containerRef: React.RefObject<HTMLElement \| null>, enabled: boolean) {\n const [, setVersion] = React.useState(0)\n React.useEffect(() => {\n if (!enabled) return\n let rafId: number \| null = null\n const force = () => {\n if (rafId !== null) return\n rafId = requestAnimationFrame(() => {\n rafId = null\n setVersion((v) => v + 1)\n })\n }\n window.addEventListener('scroll', force, { capture: true, passive: true })\n window.addEventListener('resize', force, { passive: true })\n const container = containerRef.current\n let ro: ResizeObserver \| null = null\n if (container && typeof ResizeObserver !== 'undefined') {\n ro = new ResizeObserver(force)\n ro.observe(container)\n }\n return () => {\n window.removeEventListener('scroll', force, { capture: true } as EventListenerOptions)\n window.removeEventListener('resize', force)\n if (ro) ro.disconnect()\n if (rafId !== null) cancelAnimationFrame(rafId)\n }\n }, [enabled, containerRef])\n}\n\n/\n Hover state hook — 監聽 container hover events,track hovered cell id。\n \n Implementation:event delegation on container(不 per-cell mount listeners),\n * 利用 `data-cell-id` attribute + closest()。\n /\nfunction useHoveredCell(\n containerRef: React.RefObject<HTMLElement \| null>,\n enabled: boolean,\n): CellId \| null {\n const [hoveredCellId, setHoveredCellId] = React.useState<CellId \| null>(null)\n\n React.useEffect(() => {\n if (!enabled) { setHoveredCellId(null); return }\n const container = containerRef.current\n if (!container) return\n\n const handleMouseOver = (e: MouseEvent) => {\n const target = e.target as HTMLElement \| null\n const cellEl = target?.closest<HTMLElement>('[data-cell-id]')\n const id = cellEl?.dataset.cellId ?? null\n setHoveredCellId(id)\n }\n const handleMouseLeave = () => setHoveredCellId(null)\n\n container.addEventListener('mouseover', handleMouseOver)\n container.addEventListener('mouseleave', handleMouseLeave)\n return () => {\n container.removeEventListener('mouseover', handleMouseOver)\n container.removeEventListener('mouseleave', handleMouseLeave)\n }\n }, [enabled, containerRef])\n\n return hoveredCellId\n}\n\n/\n Singleton interaction layer(全 sub-layer 已接線;2026-07-14 docblock 對齊實作)。\n \n 現況:HoverCellRect(z 1)+ SelectionRing(z 2)+ ActiveEditorHost(z 3,portal edit Field);\n * range 視覺走 cell 自身 CSS `[data-range-cell]`(RangeRect / rangeCellIds prop 已 retire)。\n * layer root = position:fixed inset:0 viewport-anchor,pointerEvents:none(僅 ActiveEditorHost 開 auto)。\n /\nexport function DataTableInteractionLayer({\n enabled,\n containerRef,\n cellClickEntersEdit,\n activeEditorCellId,\n activeEditorEnabled = false,\n activeEditorRender,\n selectedCellId = null,\n}: DataTableInteractionLayerProps) {\n const hoveredCellId = useHoveredCell(containerRef, enabled)\n // 2026-05-10 RWD/scroll sync(per user mandate「所有 overlay 在各種 RWD 和捲動時都處在正確位置」):\n // window scroll(capture)+ resize + ResizeObserver(container)→ rAF coalesced re-render → rect 重算\n useReactiveRect(containerRef, enabled)\n\n // Contract 14 state precedence:editing > selected > hover(per RFC §State Precedence Matrix)\n const isEditingHovered = activeEditorCellId != null && activeEditorCellId === hoveredCellId\n const isSelectedHovered = selectedCellId != null && selectedCellId === hoveredCellId\n const shouldShowHover = enabled && hoveredCellId != null && !isEditingHovered && !isSelectedHovered\n && (cellClickEntersEdit ? cellClickEntersEdit(hoveredCellId) : true)\n\n // Issue 6 viewport clip(2026-05-10):每個 overlay rect 都跟最近 panel(left/center/right body)\n // intersect。Cell scroll 出 panel viewport(H scroll / pinned 範圍)→ rect null → 不 render;\n // 部分 → 用 ClipMask wrap 在 panel viewport 內裁切,outline 永遠在 cell 真邊但被 mask 限制視覺。\n const hoverGeo = shouldShowHover\n ? getCellGeometry(containerRef.current, hoveredCellId!)\n : null\n\n // Slice D Step 3 scaffold:ActiveEditorHost rect placeholder(per Contract 8 active editor paint owner)。\n // 2026-05-10 bug fix:gate by `activeEditorEnabled` flag(Step 3.3 portal Field work)。\n // Issue 6:active editor host 不做 viewport clip(per codex「editor 必可見」),\n // 仍走原 path 從 getCellRect 取 viewport coords。User 應將 active editor cell 滾到 viewport 內。\n const activeEditorRect = activeEditorEnabled && activeEditorCellId != null\n ? getCellRect(containerRef.current, activeEditorCellId)\n : null\n\n // Slice D Step 4(spreadsheet semantics):SelectionRing with viewport clip(RangeRect 已 retire — range 視覺走 CSS [data-range-cell])。\n const selectedGeo = enabled && selectedCellId != null\n ? getCellGeometry(containerRef.current, selectedCellId)\n : null\n\n // 2026-05-10 retire `rangeOuterRingsByPanel` calc + render(per user 抓 range 2px outer\n // ring 不需要 — cell-bg `--primary-subtle` 已給「這些 cell 在範圍內」訊號,outer ring 是\n // redundant visual)。`CellRangeOuterRing` primitive 已 retire(下方刪),getCellGeometry 仍\n // 給 hover / selected overlay 使用,保留。Future 若需 outer ring 復用,從 git history 取\n // commit `763b3ac`(Issue 6 viewport clip)的 implementation。\n\n if (!enabled) return null\n\n // Layer absolute fixed-position relative to viewport(避 outer container 缺 position:relative\n // 找錯 reference frame)。getCellRect 已 return container-relative,但這裡 set top/left 用\n // page coords 一致 — 改用 viewport-fixed 簡化。\n return (\n <div\n aria-hidden\n style={{ position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 1 }}\n >\n {/ HoverRing — kind=hover(1px var(--border-hover)) z 1。Wrap 在 ClipMask(panel viewport)\n 內 → cell scroll 出 panel 時 outline 自動被 mask 裁切,不會 leak 到 panel 外。 /}\n {hoverGeo && (\n <ClipMask clipRect={hoverGeo.clipRect}>\n <CellRingOverlay rect={toRelRect(hoverGeo.rect, hoverGeo.clipRect)} kind=\"hover\" />\n </ClipMask>\n )}\n {/ SelectionRing — kind=selected(1px var(--primary)) z 2,SSOT 同 hover wide /}\n {selectedGeo && (\n <ClipMask clipRect={selectedGeo.clipRect}>\n <CellRingOverlay\n rect={toRelRect(selectedGeo.rect, selectedGeo.clipRect)}\n kind=\"selected\"\n cellId={selectedCellId!}\n />\n </ClipMask>\n )}\n {/ 2026-05-10 retire RangeOuterRing(per user 抓 image 4 + verbatim「range 的 cell 本來就有顏色變化,\n 那樣就夠了,不需要再有 2px 藍色的框」)。Range visual now relies purely on cell-bg\n (`--primary-subtle` via `[data-range-cell]` CSS in `data-table.css`)+ focus cell 1px selected\n border。Outer 2px primary ring 從 Issue 6 ship 但 visual 太重 — bg-fill 已給「這些 cell 在範圍內」\n 訊號,outer ring 是 redundant。calc + render 皆已 retire(變數已移除;future 若需 reinstate\n 參考 git history 2026-05-10)。 /}\n {/ {rangeOuterRingsByPanel.map((group) => (\n <ClipMask key={group.panel} clipRect={group.clipRect}>\n <CellRangeOuterRing rect={toRelRect(group.bbox, group.clipRect)} />\n </ClipMask>\n ))} /}\n {/ ActiveEditorHost — z 3,float rect,pointerEvents:auto opaque host(NOT a ring)。\n Issue 6:active editor 不 clip(editor 必可見) — user 滾出 viewport 自負責。 /}\n {activeEditorRect && (\n <ActiveEditorHost rect={activeEditorRect}>\n {activeEditorRender ? activeEditorRender(activeEditorCellId!, activeEditorRect) : null}\n </ActiveEditorHost>\n )}\n </div>\n )\n}\n\n/\n `toRelRect(cellRect, clipRect)` — Issue 6 helper(2026-05-10):\n * 把 viewport coords cell rect 轉成 ClipMask containing-block 內 relative coords。\n * ClipMask 用 panel rect 做 absolute container + overflow:hidden,內部 child absolute 定位\n * 以 mask 為 reference frame,所以 cellRect.x - clipRect.x 才對齊 cell 真實位置。\n /\nfunction toRelRect(cellRect: CellRect, clipRect: CellRect): CellRect {\n return {\n x: cellRect.x - clipRect.x,\n y: cellRect.y - clipRect.y,\n width: cellRect.width,\n height: cellRect.height,\n }\n}\n\n// ── Private primitives(per codex unified-ring-overlay-2026-05-10 Final A')──────\n//\n// 三個 private primitive 各自 own 一個 paint concern(2026-07-14 對齊實作:CellRangeFill\n// 不存在 — range bg 走 cell 自身 CSS `[data-range-cell]`,非 layer 元件):\n// 1. CellRingOverlay — outline ring(hover / selected / future focus / error)\n// 2. ClipMask — panel viewport 裁切 wrapper(Issue 6 partial-visibility)\n// 3. ActiveEditorHost — opaque host(portal Field edit)\n//\n// SSOT pattern(共 3 primitives):rect float pass-through + boxSizing:border-box +\n// pointerEvents 視 kind / position:absolute on viewport-fixed layer。\n//\n// Token mapping 集中 `CELL_RING_STYLES`(per codex Q3 verdict 不開 global `--cell-ring-` token,\n// 在 primitive 內 kind → semantic token mapping)。\n\nconst CELL_RING_STYLES = {\n hover: { width: 1, color: 'var(--border-hover)', zIndex: 1 },\n selected: { width: 1, color: 'var(--primary)', zIndex: 2 },\n // future kinds(per codex Q6 outline,加 entry 即可擴展):\n // focus: { width: 2, color: 'var(--primary)', zIndex: 2 },\n // error: { width: 1, color: 'var(--error)', zIndex: 2 },\n} as const\n\ntype CellRingKind = keyof typeof CELL_RING_STYLES\n\nfunction rectStyle(rect: CellRect): React.CSSProperties {\n return {\n position: 'absolute',\n left: rect.x,\n top: rect.y,\n width: rect.width,\n height: rect.height,\n }\n}\n\n/*\n CellRingOverlay — paint owner for hover / selected / future focus / error rings。\n \n 共用 SSOT(per Bug 5 fix + codex Q2 unified primitive):\n * - Float pass-through rect(getCellRect 不 round)\n * - outline + outline-offset:`-${width}px` paint 在 cell 既有 border 上 in-place\n * - boxSizing:border-box(避免 outline 影響 layout)\n * - pointerEvents:none(透視點擊穿透)\n * - transition:none(避 fade flash)\n /\nfunction CellRingOverlay({ rect, kind, cellId }: {\n rect: CellRect\n kind: CellRingKind\n cellId?: CellId\n}) {\n const ring = CELL_RING_STYLES[kind]\n const dataAttr = kind === 'selected' && cellId ? { 'data-selected-cell-id': cellId } : {}\n return (\n <div\n aria-hidden\n style={{\n ...rectStyle(rect),\n outline: `${ring.width}px solid ${ring.color}`,\n outlineOffset: `-${ring.width}px`,\n boxSizing: 'border-box',\n pointerEvents: 'none',\n transition: 'none',\n zIndex: ring.zIndex,\n }}\n {...dataAttr}\n />\n )\n}\n\n// `CellRangeOuterRing` primitive retired 2026-05-10(per user 「range cell 本來就有顏色變化\n// 那樣就夠了,不需要再有 2px 藍色的框」)。Source 留 git history commit `763b3ac`(Issue 6\n// viewport clip ship)若需 reinstate。\n\n/\n ClipMask — Issue 6 primitive(2026-05-10):panel viewport 裁切容器。\n \n 用在 hover / selected / range outer ring overlay,避免 cell 滾出 panel viewport(H scroll /\n * pinned 範圍)時 overlay 仍漂浮在 panel 外。Layer 是 `position: fixed` viewport-anchor,\n * ClipMask 用 panel rect 當 absolute container + `overflow: hidden` mask;child overlay 用\n * `toRelRect(cellRect, clipRect)` 算出 mask-relative 座標,在 mask 內精準定位但被 mask 邊緣裁切。\n \n 對齊 AG Grid `cellsForRangeSet` viewport-aware paint / Glide DataGrid clip helpers /\n * Notion sticky-cell virtualizer mask。\n /\nfunction ClipMask({ clipRect, children }: { clipRect: CellRect; children: React.ReactNode }) {\n return (\n <div\n aria-hidden\n style={{\n position: 'absolute',\n left: clipRect.x,\n top: clipRect.y,\n width: clipRect.width,\n height: clipRect.height,\n overflow: 'hidden',\n pointerEvents: 'none',\n }}\n >\n {children}\n </div>\n )\n}\n\n/\n ActiveEditorHost — opaque host for portal Field edit(D.3,Slice D Step 5)。\n \n Per codex Q2 verdict:不該進 CellRingOverlay primitive — 它是 host 不是 ring。\n * - pointerEvents:auto(child Field 接收 click / keyboard)\n * - background:var(--canvas)(opaque cover view Field below;Cell SSOT 保留)\n * - z-index 3(above hover / selected / range)\n * - children = activeEditorRender 的回傳 React node\n \n Empty children fallback = dashed debug indicator(no portal Field provided)。\n */\nfunction ActiveEditorHost({ rect, children }: { rect: CellRect; children: React.ReactNode }) {\n if (!children) {\n return (\n <div\n aria-hidden\n style={{\n ...rectStyle(rect),\n pointerEvents: 'none',\n zIndex: 3,\n border: '1px dashed var(--primary)',\n boxSizing: 'border-box',\n }}\n data-active-editor-host-scaffold\n />\n )\n }\n return (\n <div\n style={{\n ...rectStyle(rect),\n pointerEvents: 'auto',\n zIndex: 3,\n boxSizing: 'border-box',\n background: 'var(--canvas)',\n }}\n data-active-editor-host\n >\n {children}\n </div>\n )\n}\n"],"names":[],"mappings":"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"}

package/dist/components/DataTable/data-table-sort-manager.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
+import * as React from 'react';
 import type { ColumnDef, SortingState } from '@tanstack/react-table';
-export interface DataTableSortManagerProps<TData> {
+export interface DataTableSortManagerProps<TData> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onReset'> {
     /** 可排序欄位來源(讀 columnDef.header / id);會自動排除 enableSorting=false */
     columns: ColumnDef<TData, any>[];
     /** 當前排序 state(TanStack SortingState) */
@@ -12,8 +13,7 @@ export interface DataTableSortManagerProps<TData> {
     onClose?: () => void;
     className?: string;
 }
-export declare function DataTableSortManager<TData>({ columns, sorting, onSortingChange, onReset, onClose, className, }: DataTableSortManagerProps<TData>): import("react/jsx-runtime").JSX.Element;
-export declare namespace DataTableSortManager {
-    var displayName: string;
-}
+export declare const DataTableSortManager: <TData>(props: DataTableSortManagerProps<TData> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.ReactElement;
 //# sourceMappingURL=data-table-sort-manager.d.ts.map

package/dist/components/DataTable/data-table-sort-manager.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table-sort-manager.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/data-table-sort-manager.tsx"],"names":[],"mappings":"~~AAIA~~,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAiCpE,MAAM,WAAW,yBAAyB,CAAC,KAAK;~~IAC9C~~,iEAAiE;IACjE,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAA;IAChC,wCAAwC;IACxC,OAAO,EAAE,YAAY,CAAA;IACrB,oBAAoB;IACpB,eAAe,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IAC7C,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;~~AAkBD~~,~~wBAAgB~~,oBAAoB,CAAC,KAAK,~~EAAE~~,~~EAC1C~~,~~OAAO~~,~~EACP~~,~~OAAO~~,~~EACP~~,~~eAAe~~,~~EACf~~,~~OAAO~~,~~EACP~~,~~OAAO~~,~~EACP~~,~~SAAS~~,~~GACV~~,~~EAAE~~,~~yBAAyB~~,CAAC,KAAK,CAAC,~~2CA2FlC;yBAlGe~~,~~oBAAoB~~"}
1	+ {"version":3,"file":"data-table-sort-manager.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/data-table-sort-manager.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAiCpE,MAAM,WAAW,yBAAyB,CAAC,KAAK,CAAE,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC7G,iEAAiE;IACjE,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAA;IAChC,wCAAwC;IACxC,OAAO,EAAE,YAAY,CAAA;IACrB,oBAAoB;IACpB,eAAe,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IAC7C,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA2HD,eAAO,MAAM,oBAAoB,EAAkD,CAAC,KAAK,EACvF,KAAK,EAAE,yBAAyB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;CAAE,KACnF,KAAK,CAAC,YAAY,CACtB"}

package/dist/components/DataTable/data-table-sort-manager.js ADDED Viewed

@@ -0,0 +1,150 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { RotateCcw, X, Plus, GripVertical, Trash2 } from "lucide-react";
+import { DndContext, closestCenter } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { cn } from "../../lib/utils.js";
+import { dragSourceStyle, dragHandleCursorClass } from "../../lib/drag-visual.js";
+import { Button } from "../Button/button.js";
+import { Select } from "../Select/select.js";
+import { SurfaceHeader, COMPACT_HEADER_SLOT, SurfaceBody } from "../../patterns/overlay-surface/overlay-surface.js";
+import { ButtonDivider } from "../Button/button-group.js";
+import { PopoverTitle, PopoverClose } from "../Popover/popover.js";
+import { ItemInlineActionButton } from "../../patterns/element-anatomy/item-anatomy.js";
+import { getColumnId, getColumnLabel } from "./lib/column-meta.js";
+function extractColumns(columns) {
+  const out = [];
+  for (const col of columns) {
+    const id = getColumnId(col);
+    if (!id || id === "__select__") continue;
+    if (col.enableSorting === false) continue;
+    out.push({ id, label: getColumnLabel(col, id), enableSorting: true });
+  }
+  return out;
+}
+const DIRECTION_OPTIONS = [
+  { value: "asc", label: "升冪" },
+  { value: "desc", label: "降冪" }
+];
+function DataTableSortManagerInner({
+  columns,
+  sorting,
+  onSortingChange,
+  onReset,
+  onClose,
+  className,
+  ...props
+}, ref) {
+  const sortableColumns = React.useMemo(() => extractColumns(columns), [columns]);
+  const fieldOptions = React.useMemo(
+    () => sortableColumns.map((c) => ({ value: c.id, label: c.label })),
+    [sortableColumns]
+  );
+  const updateAt = (index, patch) => {
+    const next = sorting.map((s, i) => i === index ? { ...s, ...patch } : s);
+    onSortingChange(next);
+  };
+  const removeAt = (index) => {
+    onSortingChange(sorting.filter((_, i) => i !== index));
+  };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const oldIndex = sorting.findIndex((s) => s.id === active.id);
+    const newIndex = sorting.findIndex((s) => s.id === over.id);
+    if (oldIndex < 0 || newIndex < 0) return;
+    const next = [...sorting];
+    const [moved] = next.splice(oldIndex, 1);
+    next.splice(newIndex, 0, moved);
+    onSortingChange(next);
+  };
+  const addSort = () => {
+    const used = new Set(sorting.map((s) => s.id));
+    const firstUnused = sortableColumns.find((c) => !used.has(c.id));
+    if (!firstUnused) return;
+    onSortingChange([...sorting, { id: firstUnused.id, desc: false }]);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col h-full min-h-0 w-[var(--data-table-sort-panel-width)]", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(SurfaceHeader, { className: COMPACT_HEADER_SLOT, children: [
+          /* @__PURE__ */ jsx(PopoverTitle, { className: "flex-1", children: "排序" }),
+          onReset && sorting.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", iconOnly: true, startIcon: RotateCcw, "aria-label": "重置", onClick: onReset }),
+            onClose && /* @__PURE__ */ jsx(ButtonDivider, {})
+          ] }),
+          onClose && /* @__PURE__ */ jsx(PopoverClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { "data-dismiss": true, iconOnly: true, dismiss: true, size: "sm", startIcon: X, "aria-label": "關閉", onClick: onClose }) })
+        ] }),
+        /* @__PURE__ */ jsxs(SurfaceBody, { className: "flex flex-col gap-[var(--layout-space-tight)]", children: [
+          sorting.length > 0 && /* @__PURE__ */ jsx(DndContext, { collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(SortableContext, { items: sorting.map((s) => s.id), strategy: verticalListSortingStrategy, children: sorting.map((sort, index) => {
+            const usedByOthers = new Set(sorting.filter((_, i) => i !== index).map((s) => s.id));
+            const optionsForRow = fieldOptions.filter((o) => !usedByOthers.has(o.value));
+            return /* @__PURE__ */ jsx(
+              SortRow,
+              {
+                sort,
+                optionsForRow,
+                onChangeId: (v) => updateAt(index, { id: v }),
+                onChangeDir: (v) => updateAt(index, { desc: v === "desc" }),
+                onRemove: () => removeAt(index)
+              },
+              sort.id
+            );
+          }) }) }),
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "tertiary",
+              size: "sm",
+              startIcon: Plus,
+              onClick: addSort,
+              disabled: sorting.length >= sortableColumns.length,
+              children: "加排序"
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+const DataTableSortManager = React.forwardRef(DataTableSortManagerInner);
+DataTableSortManager.displayName = "DataTableSortManager";
+function SortRow({
+  sort,
+  optionsForRow,
+  onChangeId,
+  onChangeDir,
+  onRemove
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: sort.id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    ...dragSourceStyle(isDragging)
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: setNodeRef, style, className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      ItemInlineActionButton,
+      {
+        icon: GripVertical,
+        size: "sm",
+        "aria-label": "拖曳重排",
+        className: dragHandleCursorClass,
+        ...attributes,
+        ...listeners
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(Select, { size: "sm", "aria-label": "排序欄位", options: optionsForRow, value: sort.id, onChange: onChangeId }) }),
+    /* @__PURE__ */ jsx("div", { className: "w-32 shrink-0", children: /* @__PURE__ */ jsx(Select, { size: "sm", "aria-label": "排序方向", options: DIRECTION_OPTIONS, value: sort.desc ? "desc" : "asc", onChange: onChangeDir, minRows: 2 }) }),
+    /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", iconOnly: true, startIcon: Trash2, "aria-label": "刪除", onClick: onRemove })
+  ] });
+}
+export {
+  DataTableSortManager
+};
+//# sourceMappingURL=data-table-sort-manager.js.map