@qijenchen/design-system 0.1.0-beta.96 → 0.1.0-beta.99

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

@@ -5,39 +5,39 @@ import { Select } from "../Select/select.js";
 import { FieldControlGroup } from "../FieldControlGroup/field-control-group.js";
 import { DEFAULT_OPERATOR, getOperatorSpec, getValueShape, OPERATOR_REGISTRY } from "./filter-operators.js";
 import { FilterValuePicker } from "./data-table-filter-value-picker.js";
-function getOperatorOptions(type) {
+function getOperatorOptions(type, operatorLabels) {
   const registry = type && OPERATOR_REGISTRY[type] ? OPERATOR_REGISTRY[type] : OPERATOR_REGISTRY.string;
-  return registry.map((op) => ({ value: op.op, label: op.label }));
+  return registry.map((op) => ({ value: op.op, label: operatorLabels[op.op] ?? op.label }));
 }
 function getDefaultOperator(type) {
   return type && DEFAULT_OPERATOR[type] || DEFAULT_OPERATOR.string;
 }
 const datePrecisionOf = (col) => (col == null ? void 0 : col.type) === "date" ? col.includeTime ? "ms" : "day" : void 0;
-const CONJ_OPTIONS = [
-  { value: "and", label: "And" },
-  { value: "or", label: "Or" }
-];
 function ConjunctionLabel({
   index,
   conjunction,
-  onChange
+  onChange,
+  labels
 }) {
   if (index === 0) {
-    return /* @__PURE__ */ jsx("div", { className: "w-20 shrink-0 text-body text-fg-muted px-[var(--field-px)] self-center", children: "Where" });
+    return /* @__PURE__ */ jsx("div", { className: "w-20 shrink-0 text-body text-fg-secondary px-[var(--field-px)] self-center", children: labels.where });
   }
   if (index >= 2) {
-    const label = conjunction === "and" ? "And" : "Or";
-    return /* @__PURE__ */ jsx("div", { className: "w-20 shrink-0 text-body text-fg-muted px-[var(--field-px)] self-center", children: label });
+    const label = conjunction === "and" ? labels.and : labels.or;
+    return /* @__PURE__ */ jsx("div", { className: "w-20 shrink-0 text-body text-fg-secondary px-[var(--field-px)] self-center", children: label });
   }
   return /* @__PURE__ */ jsx("div", { className: "w-20 shrink-0", children: /* @__PURE__ */ jsx(
     Select,
     {
       size: "sm",
-      options: CONJ_OPTIONS,
+      options: [
+        { value: "and", label: labels.and },
+        { value: "or", label: labels.or }
+      ],
       value: conjunction,
       onChange: (v) => onChange(v),
       minRows: 2,
-      "aria-label": "連接詞 — 同 group 共用"
+      "aria-label": labels.conjunctionAriaLabel
     }
   ) });
 }
@@ -51,27 +51,28 @@ function FilterRow({
   onChangeField,
   onChangeOp,
   onChangeValue,
-  onRemove
+  onRemove,
+  labels
 }) {
   const colInfo = filterableColumns.find((c) => c.id === condition.field);
-  const operatorOptions = getOperatorOptions(colInfo == null ? void 0 : colInfo.type);
+  const operatorOptions = getOperatorOptions(colInfo == null ? void 0 : colInfo.type, labels.operatorLabels);
   const hasField = !!condition.field;
   const opSpec = colInfo ? getOperatorSpec(colInfo.type, condition.op) : null;
   const valueShape = colInfo && opSpec ? getValueShape(opSpec, colInfo.type, colInfo.includeTime) : null;
   const hasValueCell = valueShape !== "none";
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx(ConjunctionLabel, { index, conjunction, onChange: onChangeConjunction }),
+    /* @__PURE__ */ jsx(ConjunctionLabel, { index, conjunction, onChange: onChangeConjunction, labels }),
     /* @__PURE__ */ jsxs(FieldControlGroup, { block: true, className: "flex-1 min-w-0", children: [
       /* @__PURE__ */ jsx(
         Select,
         {
-          className: "!w-[var(--data-table-filter-field-width)] flex-shrink-0",
+          className: "!w-[var(--data-table-filter-field-width)] flex-shrink-0 [&_.text-fg-muted]:!text-fg-secondary",
           size: "sm",
           options: fieldOptions,
           value: condition.field,
           onChange: onChangeField,
-          placeholder: "選擇欄位",
-          "aria-label": "篩選欄位"
+          placeholder: labels.fieldPlaceholder,
+          "aria-label": labels.fieldAriaLabel
         }
       ),
       /* @__PURE__ */ jsx(
@@ -83,8 +84,8 @@ function FilterRow({
           value: condition.op,
           onChange: onChangeOp,
           disabled: !hasField,
-          placeholder: "運算子",
-          "aria-label": "篩選運算子"
+          placeholder: labels.operatorPlaceholder,
+          "aria-label": labels.operatorAriaLabel
         }
       ),
       hasValueCell && /* @__PURE__ */ jsx(
@@ -95,12 +96,13 @@ function FilterRow({
           onChange: onChangeValue,
           colInfo,
           disabled: !hasField,
-          ariaLabel: colInfo ? `${colInfo.label} 篩選值` : "篩選值",
+          ariaLabel: labels.filterValueAriaLabel(colInfo == null ? void 0 : colInfo.label),
+          labels,
           className: "!flex-1 !min-w-0"
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", iconOnly: true, startIcon: Trash2, "aria-label": "刪除", onClick: onRemove })
+    /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", iconOnly: true, startIcon: Trash2, "aria-label": labels.deleteCondition, onClick: onRemove })
   ] });
 }
 function GroupBlock({
@@ -114,10 +116,12 @@ function GroupBlock({
   onChangeCondition,
   onRemoveCondition,
   onAddCondition,
-  onRemoveGroup
+  onRemoveGroup,
+  canAddCondition,
+  labels
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
-    /* @__PURE__ */ jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsx(ConjunctionLabel, { index, conjunction: rootConjunction, onChange: onChangeRootConjunction }) }),
+    /* @__PURE__ */ jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsx(ConjunctionLabel, { index, conjunction: rootConjunction, onChange: onChangeRootConjunction, labels }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 rounded-md bg-muted p-2 flex flex-col gap-2", children: [
       group.children.map((cond, cIdx) => /* @__PURE__ */ jsx(
         FilterRow,
@@ -134,13 +138,14 @@ function GroupBlock({
           },
           onChangeOp: (v) => onChangeCondition(cond.id, { op: v, value: "" }),
           onChangeValue: (v) => onChangeCondition(cond.id, { value: v }),
-          onRemove: () => onRemoveCondition(cond.id)
+          onRemove: () => onRemoveCondition(cond.id),
+          labels
         },
         cond.id
       )),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", startIcon: Plus, onClick: onAddCondition, children: "加入巢狀篩選" }),
-        group.children.length === 0 && /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", startIcon: Trash2, danger: true, onClick: onRemoveGroup, children: "移除空群組" })
+        /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", startIcon: Plus, onClick: onAddCondition, disabled: !canAddCondition, children: labels.addNestedFilter }),
+        group.children.length === 0 && /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", startIcon: Trash2, danger: true, onClick: onRemoveGroup, children: labels.removeEmptyGroup })
       ] })
     ] })
   ] });

package/dist/components/DataTable/data-table-filter-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-filter-group.js","sources":["../../../src/components/DataTable/data-table-filter-group.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 單元(filter row / nested-group renderer + 共用 column/operator\n// helpers;GroupBlock 為 nested-group renderer,FilterRow / ConjunctionLabel 為其 row 構件、\n// flat mode 共用。只被 data-table-filter-panel.tsx 消費);不隨 index.ts re-export 進 npm public surface。\n// ────────────────────────────── 消費的 SSOT ──────────────────────────────\n// - FieldControlGroup:field + op + value border-collapse 接合(field-control-group.spec.md;\n//   FilterValuePicker 為 direct child,className forward 不開 wrapper div — 2026-05-04 #2 fix)\n// - Button(variant=\"text\" iconOnly)row meta trash / Select(size=\"sm\")conjunction・field・op\n//   (data-table.spec.md「四、UI canonical」:trash = form-control row text Button;A6 conjunction)\n// - Width tokens:--data-table-filter-field-width / --data-table-filter-op-width(uiSize.css SSOT,\n//   2026-05-23 Phase A.4 Decision 2)\n// - Operator SSOT:./filter-operators.ts OPERATOR_REGISTRY(禁 hardcode op 字串)\n// - Group container 灰底 bg-muted:color.spec.md L651-654 靜態低重要 surface semantic(2026-05-09 Q3 A)\n// 設計規則:./filter-operators.spec.md + ./data-table.spec.md「進階篩選」段\n\nimport { Plus, Trash2 } from 'lucide-react'\nimport { Button } from '@/design-system/components/Button/button'\nimport { Select, type SelectOption } from '@/design-system/components/Select/select'\nimport { FieldControlGroup } from '@/design-system/components/FieldControlGroup/field-control-group'\nimport type { ColumnType } from './column-types'\nimport {\n  OPERATOR_REGISTRY,\n  DEFAULT_OPERATOR,\n  getOperatorSpec,\n  getValueShape,\n  type ValueShape,\n} from './filter-operators'\nimport type { Conjunction, FilterCondition, FilterGroup } from './filter-tree'\nimport { FilterValuePicker } from './data-table-filter-value-picker'\n\n// ── Shared internal types + operator helpers(panel orchestration 也消費)────\n\nexport interface FilterColumn {\n  id: string\n  label: string\n  type: ColumnType\n  options?: Array<{ value: string; label: string }>\n  /** People pool for person/multiPerson filter picker(對齊 cell-registry meta.people SSOT)*/\n  people?: Array<{ name: string; avatarUrl?: string; description?: string }>\n  includeTime?: boolean\n}\n\nfunction getOperatorOptions(type?: ColumnType): SelectOption[] {\n  const registry = type && OPERATOR_REGISTRY[type] ? OPERATOR_REGISTRY[type] : OPERATOR_REGISTRY.string\n  return registry.map((op) => ({ value: op.op, label: op.label }))\n}\n\nexport function getDefaultOperator(type?: ColumnType): string {\n  return (type && DEFAULT_OPERATOR[type]) || DEFAULT_OPERATOR.string\n}\n\n// Q6(2026-07-04):date 欄位把比對精度寫進 condition(includeTime=true → ms,否則 day)。\n// 'time' 欄暫不寫(值非完整日期,truncate 語意不成立;見 filter-operators.spec v3 time 註)。\nexport const datePrecisionOf = (col: FilterColumn | undefined): 'day' | 'ms' | undefined =>\n  col?.type === 'date' ? (col.includeTime ? 'ms' : 'day') : undefined\n\n// ── ConjunctionLabel ───────────────────────────────────────────────────\n\nconst CONJ_OPTIONS: SelectOption[] = [\n  { value: 'and', label: 'And' },\n  { value: 'or', label: 'Or' },\n]\n\nfunction ConjunctionLabel({\n  index, conjunction, onChange,\n}: { index: number; conjunction: Conjunction; onChange: (c: Conjunction) => void }) {\n  // index === 0:首 row 顯示靜態「Where」label\n  // index === 1:**唯一可改**的 AND/OR Select(連動整 group conjunction)\n  // index ≥ 2:被連動的 row,read-only 顯示當前 conjunction 文字(同 Where 視覺,A6 canonical)\n  //   對齊 Airtable / Notion / Linear 共識 @benchmark-unverified(non-OSS)\n  //   px-[var(--field-px)] 對齊 Field 內部 padding 12px(Q13)\n  if (index === 0) {\n    return <div className=\"w-20 shrink-0 text-body text-fg-muted px-[var(--field-px)] self-center\">Where</div>\n  }\n  if (index >= 2) {\n    const label = conjunction === 'and' ? 'And' : 'Or'\n    return <div className=\"w-20 shrink-0 text-body text-fg-muted px-[var(--field-px)] self-center\">{label}</div>\n  }\n  // index === 1:可切換的 AND/OR Select\n  // minRows={2} — And/Or 2 選項,顯式縮 menu 高度避免 reserve 3 row 空白(Q5)\n  return (\n    <div className=\"w-20 shrink-0\">\n      <Select\n        size=\"sm\"\n        options={CONJ_OPTIONS}\n        value={conjunction}\n        onChange={(v) => onChange(v as Conjunction)}\n        minRows={2}\n        aria-label=\"連接詞 — 同 group 共用\"\n      />\n    </div>\n  )\n}\n\n// ── FilterRow(flat 用 + group 內共用) ──────────────────────────────\n\nexport function FilterRow({\n  index, condition, conjunction, filterableColumns, fieldOptions,\n  onChangeConjunction, onChangeField, onChangeOp, onChangeValue, onRemove,\n}: {\n  index: number\n  condition: FilterCondition\n  conjunction: Conjunction\n  filterableColumns: FilterColumn[]\n  fieldOptions: SelectOption[]\n  onChangeConjunction: (c: Conjunction) => void\n  onChangeField: (v: string) => void\n  onChangeOp: (v: string) => void\n  onChangeValue: (v: unknown) => void\n  onRemove: () => void\n}) {\n  const colInfo = filterableColumns.find((c) => c.id === condition.field)\n  const operatorOptions = getOperatorOptions(colInfo?.type)\n  const hasField = !!condition.field\n  const opSpec = colInfo ? getOperatorSpec(colInfo.type, condition.op) : null\n  const valueShape: ValueShape | null = colInfo && opSpec\n    ? getValueShape(opSpec, colInfo.type, colInfo.includeTime)\n    : null\n  // op 'is_set' / 'is_not_set' 等 shape='none' → 無 value cell,op 自動 expand 填剩餘寬\n  // 對齊 Notion / Airtable / Linear filter row 行為\n  // 注意:valueShape=null(初始無 field 選)時仍 render value cell(disabled placeholder)— 只 'none' 才 fold\n  const hasValueCell = valueShape !== 'none'\n\n  // FieldControlGroup 接合 field + op + value 視覺(2026-05-04 E refactor + 多輪 fix):\n  //   - border collapse 取代 3 顆獨立 Select 並排,對齊 Airtable / Linear / Notion filter row idiom\n  //   - ConjunctionLabel + Trash 在 group 外層(meta actions,不屬 control 一體)\n  //   - **#5 fix**:row 內水平 gap = `gap-2` (8px),layoutSpace 規則 5 緊密相關\n  //   - **#9 fix**:cell 用 `min-w-[]`(field 160 / op 120),value flex-1 min-w-0,讓 long label 可撐寬\n  //   - **#2 fix**:FilterValuePicker 直接是 FieldControlGroup direct child(無 wrapper div),CSS variants 命中正確\n  return (\n    <div className=\"flex items-center gap-2\">\n      <ConjunctionLabel index={index} conjunction={conjunction} onChange={onChangeConjunction} />\n      {/* **#9 fix(2026-05-04 v4)**:Field controls trigger `w-full` override 外 className,改用 Tailwind `!`\n          important 強制 override(`!w-[160px]` / `!w-[120px]`),value 用 `!flex-1 !min-w-0`。\n          Select 元件本身沒 destructure `style` prop 所以 inline style flex-basis 行不通,只能用 className。 */}\n      <FieldControlGroup block className=\"flex-1 min-w-0\">\n        {/* 2026-05-23 Phase A.4 Decision 2:`!w-[160px]` / `!w-[120px]` → tokens\n            `--data-table-filter-field-width` / `--data-table-filter-op-width`(SSOT in uiSize.css)\n            Behavior preserved 完好如初:flat + nested 同 width(token 是 design constant) */}\n        <Select\n          className=\"!w-[var(--data-table-filter-field-width)] flex-shrink-0\"\n          size=\"sm\"\n          options={fieldOptions}\n          value={condition.field}\n          onChange={onChangeField}\n          placeholder=\"選擇欄位\"\n          aria-label=\"篩選欄位\"\n        />\n        <Select\n          className={hasValueCell ? '!w-[var(--data-table-filter-op-width)] flex-shrink-0' : '!flex-1 !min-w-0'}\n          size=\"sm\"\n          options={operatorOptions}\n          value={condition.op}\n          onChange={onChangeOp}\n          disabled={!hasField}\n          placeholder=\"運算子\"\n          aria-label=\"篩選運算子\"\n        />\n        {hasValueCell && (\n          <FilterValuePicker\n            shape={valueShape}\n            value={condition.value}\n            onChange={onChangeValue}\n            colInfo={colInfo}\n            disabled={!hasField}\n            ariaLabel={colInfo ? `${colInfo.label} 篩選值` : '篩選值'}\n            className=\"!flex-1 !min-w-0\"\n          />\n        )}\n      </FieldControlGroup>\n      {/* Trash 用 text Button — filter row 是 form-control row,Field 同高對齊(28 md) */}\n      <Button variant=\"text\" size=\"sm\" iconOnly startIcon={Trash2} aria-label=\"刪除\" onClick={onRemove} />\n    </div>\n  )\n}\n\n// ── GroupBlock(nested 用) ────────────────────────────────────────────\n\nexport function GroupBlock({\n  index, group, rootConjunction, filterableColumns, fieldOptions,\n  onChangeRootConjunction, onChangeGroupConjunction,\n  onChangeCondition, onRemoveCondition, onAddCondition, onRemoveGroup,\n}: {\n  index: number\n  group: FilterGroup\n  rootConjunction: Conjunction\n  filterableColumns: FilterColumn[]\n  fieldOptions: SelectOption[]\n  onChangeRootConjunction: (c: Conjunction) => void\n  onChangeGroupConjunction: (c: Conjunction) => void\n  onChangeCondition: (condId: string, patch: Partial<FilterCondition>) => void\n  onRemoveCondition: (condId: string) => void\n  onAddCondition: () => void\n  onRemoveGroup: () => void\n}) {\n  return (\n    <div className=\"flex items-start gap-2\">\n      <div className=\"pt-2\">\n        <ConjunctionLabel index={index} conjunction={rootConjunction} onChange={onChangeRootConjunction} />\n      </div>\n      {/* Group container 灰底 — `bg-muted`(`--muted` neutral-2,user 2026-05-09 拍板 Q3 A)。對齊 color.spec.md L651-654 「table header / tab / code block / skeleton」靜態低重要 surface semantic */}\n      <div className=\"flex-1 min-w-0 rounded-md bg-muted p-2 flex flex-col gap-2\">\n        {group.children.map((cond, cIdx) => (\n          <FilterRow\n            key={cond.id}\n            index={cIdx}\n            condition={cond}\n            conjunction={group.conjunction}\n            filterableColumns={filterableColumns}\n            fieldOptions={fieldOptions}\n            onChangeConjunction={onChangeGroupConjunction}\n            onChangeField={(v) => {\n              const newCol = filterableColumns.find((c) => c.id === v)\n              onChangeCondition(cond.id, { field: v, op: getDefaultOperator(newCol?.type), value: '', datePrecision: datePrecisionOf(newCol) })\n            }}\n            onChangeOp={(v) => onChangeCondition(cond.id, { op: v, value: '' })}\n            onChangeValue={(v) => onChangeCondition(cond.id, { value: v })}\n            onRemove={() => onRemoveCondition(cond.id)}\n          />\n        ))}\n        {/* Q9 — text variant 對齊 inline 派 + 視覺輕量 */}\n        <div className=\"flex items-center justify-between\">\n          <Button variant=\"text\" size=\"sm\" startIcon={Plus} onClick={onAddCondition}>加入巢狀篩選</Button>\n          {group.children.length === 0 && (\n            <Button variant=\"text\" size=\"sm\" startIcon={Trash2} danger onClick={onRemoveGroup}>移除空群組</Button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"data-table-filter-group.js","sources":["../../../src/components/DataTable/data-table-filter-group.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 單元(filter row / nested-group renderer + 共用 column/operator\n// helpers;GroupBlock 為 nested-group renderer,FilterRow / ConjunctionLabel 為其 row 構件、\n// flat mode 共用。只被 data-table-filter-panel.tsx 消費);不隨 index.ts re-export 進 npm public surface。\n// ────────────────────────────── 消費的 SSOT ──────────────────────────────\n// - FieldControlGroup:field + op + value border-collapse 接合(field-control-group.spec.md;\n//   FilterValuePicker 為 direct child,className forward 不開 wrapper div — 2026-05-04 #2 fix)\n// - Button(variant=\"text\" iconOnly)row meta trash / Select(size=\"sm\")conjunction・field・op\n//   (data-table.spec.md「四、UI canonical」:trash = form-control row text Button;A6 conjunction)\n// - Width tokens:--data-table-filter-field-width / --data-table-filter-op-width(uiSize.css SSOT,\n//   2026-05-23 Phase A.4 Decision 2)\n// - Operator SSOT:./filter-operators.ts OPERATOR_REGISTRY(禁 hardcode op 字串)\n// - Group container 灰底 bg-muted:color.spec.md L651-654 靜態低重要 surface semantic(2026-05-09 Q3 A)\n// 設計規則:./filter-operators.spec.md + ./data-table.spec.md「進階篩選」段\n\nimport { Plus, Trash2 } from 'lucide-react'\nimport { Button } from '@/design-system/components/Button/button'\nimport { Select, type SelectOption } from '@/design-system/components/Select/select'\nimport { FieldControlGroup } from '@/design-system/components/FieldControlGroup/field-control-group'\nimport type { ColumnType } from './column-types'\nimport {\n  OPERATOR_REGISTRY,\n  DEFAULT_OPERATOR,\n  getOperatorSpec,\n  getValueShape,\n  type ValueShape,\n} from './filter-operators'\nimport type { Conjunction, FilterCondition, FilterGroup } from './filter-tree'\nimport { FilterValuePicker } from './data-table-filter-value-picker'\nimport type { DataTableFilterPanelLabels } from './data-table-filter-labels'\n\n// ── Shared internal types + operator helpers(panel orchestration 也消費)────\n\nexport interface FilterColumn {\n  id: string\n  label: string\n  type: ColumnType\n  options?: Array<{ value: string; label: string }>\n  /** People pool for person/multiPerson filter picker(對齊 cell-registry meta.people SSOT)*/\n  people?: Array<{ name: string; avatarUrl?: string; description?: string }>\n  includeTime?: boolean\n}\n\nfunction getOperatorOptions(\n  type: ColumnType | undefined,\n  operatorLabels: DataTableFilterPanelLabels['operatorLabels'],\n): SelectOption[] {\n  const registry = type && OPERATOR_REGISTRY[type] ? OPERATOR_REGISTRY[type] : OPERATOR_REGISTRY.string\n  return registry.map((op) => ({ value: op.op, label: operatorLabels[op.op] ?? op.label }))\n}\n\nexport function getDefaultOperator(type?: ColumnType): string {\n  return (type && DEFAULT_OPERATOR[type]) || DEFAULT_OPERATOR.string\n}\n\n// Q6(2026-07-04):date 欄位把比對精度寫進 condition(includeTime=true → ms,否則 day)。\n// 'time' 欄暫不寫(值非完整日期,truncate 語意不成立;見 filter-operators.spec v3 time 註)。\nexport const datePrecisionOf = (col: FilterColumn | undefined): 'day' | 'ms' | undefined =>\n  col?.type === 'date' ? (col.includeTime ? 'ms' : 'day') : undefined\n\n// ── ConjunctionLabel ───────────────────────────────────────────────────\n\nfunction ConjunctionLabel({\n  index, conjunction, onChange, labels,\n}: {\n  index: number\n  conjunction: Conjunction\n  onChange: (c: Conjunction) => void\n  labels: DataTableFilterPanelLabels\n}) {\n  // index === 0:首 row 顯示靜態「Where」label\n  // index === 1:**唯一可改**的 AND/OR Select(連動整 group conjunction)\n  // index ≥ 2:被連動的 row,read-only 顯示當前 conjunction 文字(同 Where 視覺,A6 canonical)\n  //   對齊 Airtable / Notion / Linear 共識 @benchmark-unverified(non-OSS)\n  //   px-[var(--field-px)] 對齊 Field 內部 padding 12px(Q13)\n  if (index === 0) {\n    return <div className=\"w-20 shrink-0 text-body text-fg-secondary px-[var(--field-px)] self-center\">{labels.where}</div>\n  }\n  if (index >= 2) {\n    const label = conjunction === 'and' ? labels.and : labels.or\n    return <div className=\"w-20 shrink-0 text-body text-fg-secondary px-[var(--field-px)] self-center\">{label}</div>\n  }\n  // index === 1:可切換的 AND/OR Select\n  // minRows={2} — And/Or 2 選項,顯式縮 menu 高度避免 reserve 3 row 空白(Q5)\n  return (\n    <div className=\"w-20 shrink-0\">\n      <Select\n        size=\"sm\"\n        options={[\n          { value: 'and', label: labels.and },\n          { value: 'or', label: labels.or },\n        ]}\n        value={conjunction}\n        onChange={(v) => onChange(v as Conjunction)}\n        minRows={2}\n        aria-label={labels.conjunctionAriaLabel}\n      />\n    </div>\n  )\n}\n\n// ── FilterRow(flat 用 + group 內共用) ──────────────────────────────\n\nexport function FilterRow({\n  index, condition, conjunction, filterableColumns, fieldOptions,\n  onChangeConjunction, onChangeField, onChangeOp, onChangeValue, onRemove, labels,\n}: {\n  index: number\n  condition: FilterCondition\n  conjunction: Conjunction\n  filterableColumns: FilterColumn[]\n  fieldOptions: SelectOption[]\n  onChangeConjunction: (c: Conjunction) => void\n  onChangeField: (v: string) => void\n  onChangeOp: (v: string) => void\n  onChangeValue: (v: unknown) => void\n  onRemove: () => void\n  labels: DataTableFilterPanelLabels\n}) {\n  const colInfo = filterableColumns.find((c) => c.id === condition.field)\n  const operatorOptions = getOperatorOptions(colInfo?.type, labels.operatorLabels)\n  const hasField = !!condition.field\n  const opSpec = colInfo ? getOperatorSpec(colInfo.type, condition.op) : null\n  const valueShape: ValueShape | null = colInfo && opSpec\n    ? getValueShape(opSpec, colInfo.type, colInfo.includeTime)\n    : null\n  // op 'is_set' / 'is_not_set' 等 shape='none' → 無 value cell,op 自動 expand 填剩餘寬\n  // 對齊 Notion / Airtable / Linear filter row 行為\n  // 注意:valueShape=null(初始無 field 選)時仍 render value cell(disabled placeholder)— 只 'none' 才 fold\n  const hasValueCell = valueShape !== 'none'\n\n  // FieldControlGroup 接合 field + op + value 視覺(2026-05-04 E refactor + 多輪 fix):\n  //   - border collapse 取代 3 顆獨立 Select 並排,對齊 Airtable / Linear / Notion filter row idiom\n  //   - ConjunctionLabel + Trash 在 group 外層(meta actions,不屬 control 一體)\n  //   - **#5 fix**:row 內水平 gap = `gap-2` (8px),layoutSpace 規則 5 緊密相關\n  //   - **#9 fix**:cell 用 `min-w-[]`(field 160 / op 120),value flex-1 min-w-0,讓 long label 可撐寬\n  //   - **#2 fix**:FilterValuePicker 直接是 FieldControlGroup direct child(無 wrapper div),CSS variants 命中正確\n  return (\n    <div className=\"flex items-center gap-2\">\n      <ConjunctionLabel index={index} conjunction={conjunction} onChange={onChangeConjunction} labels={labels} />\n      {/* **#9 fix(2026-05-04 v4)**:Field controls trigger `w-full` override 外 className,改用 Tailwind `!`\n          important 強制 override(`!w-[160px]` / `!w-[120px]`),value 用 `!flex-1 !min-w-0`。\n          Select 元件本身沒 destructure `style` prop 所以 inline style flex-basis 行不通,只能用 className。 */}\n      <FieldControlGroup block className=\"flex-1 min-w-0\">\n        {/* 2026-05-23 Phase A.4 Decision 2:`!w-[160px]` / `!w-[120px]` → tokens\n            `--data-table-filter-field-width` / `--data-table-filter-op-width`(SSOT in uiSize.css)\n            Behavior preserved 完好如初:flat + nested 同 width(token 是 design constant) */}\n        <Select\n          className=\"!w-[var(--data-table-filter-field-width)] flex-shrink-0 [&_.text-fg-muted]:!text-fg-secondary\"\n          size=\"sm\"\n          options={fieldOptions}\n          value={condition.field}\n          onChange={onChangeField}\n          placeholder={labels.fieldPlaceholder}\n          aria-label={labels.fieldAriaLabel}\n        />\n        <Select\n          className={hasValueCell ? '!w-[var(--data-table-filter-op-width)] flex-shrink-0' : '!flex-1 !min-w-0'}\n          size=\"sm\"\n          options={operatorOptions}\n          value={condition.op}\n          onChange={onChangeOp}\n          disabled={!hasField}\n          placeholder={labels.operatorPlaceholder}\n          aria-label={labels.operatorAriaLabel}\n        />\n        {hasValueCell && (\n          <FilterValuePicker\n            shape={valueShape}\n            value={condition.value}\n            onChange={onChangeValue}\n            colInfo={colInfo}\n            disabled={!hasField}\n            ariaLabel={labels.filterValueAriaLabel(colInfo?.label)}\n            labels={labels}\n            className=\"!flex-1 !min-w-0\"\n          />\n        )}\n      </FieldControlGroup>\n      {/* Trash 用 text Button — filter row 是 form-control row,Field 同高對齊(28 md) */}\n      <Button variant=\"text\" size=\"sm\" iconOnly startIcon={Trash2} aria-label={labels.deleteCondition} onClick={onRemove} />\n    </div>\n  )\n}\n\n// ── GroupBlock(nested 用) ────────────────────────────────────────────\n\nexport function GroupBlock({\n  index, group, rootConjunction, filterableColumns, fieldOptions,\n  onChangeRootConjunction, onChangeGroupConjunction,\n  onChangeCondition, onRemoveCondition, onAddCondition, onRemoveGroup,\n  canAddCondition, labels,\n}: {\n  index: number\n  group: FilterGroup\n  rootConjunction: Conjunction\n  filterableColumns: FilterColumn[]\n  fieldOptions: SelectOption[]\n  onChangeRootConjunction: (c: Conjunction) => void\n  onChangeGroupConjunction: (c: Conjunction) => void\n  onChangeCondition: (condId: string, patch: Partial<FilterCondition>) => void\n  onRemoveCondition: (condId: string) => void\n  onAddCondition: () => void\n  onRemoveGroup: () => void\n  canAddCondition: boolean\n  labels: DataTableFilterPanelLabels\n}) {\n  return (\n    <div className=\"flex items-start gap-2\">\n      <div className=\"pt-2\">\n        <ConjunctionLabel index={index} conjunction={rootConjunction} onChange={onChangeRootConjunction} labels={labels} />\n      </div>\n      {/* Group container 灰底 — `bg-muted`(`--muted` neutral-2,user 2026-05-09 拍板 Q3 A)。對齊 color.spec.md L651-654 「table header / tab / code block / skeleton」靜態低重要 surface semantic */}\n      <div className=\"flex-1 min-w-0 rounded-md bg-muted p-2 flex flex-col gap-2\">\n        {group.children.map((cond, cIdx) => (\n          <FilterRow\n            key={cond.id}\n            index={cIdx}\n            condition={cond}\n            conjunction={group.conjunction}\n            filterableColumns={filterableColumns}\n            fieldOptions={fieldOptions}\n            onChangeConjunction={onChangeGroupConjunction}\n            onChangeField={(v) => {\n              const newCol = filterableColumns.find((c) => c.id === v)\n              onChangeCondition(cond.id, { field: v, op: getDefaultOperator(newCol?.type), value: '', datePrecision: datePrecisionOf(newCol) })\n            }}\n            onChangeOp={(v) => onChangeCondition(cond.id, { op: v, value: '' })}\n            onChangeValue={(v) => onChangeCondition(cond.id, { value: v })}\n            onRemove={() => onRemoveCondition(cond.id)}\n            labels={labels}\n          />\n        ))}\n        {/* Q9 — text variant 對齊 inline 派 + 視覺輕量 */}\n        <div className=\"flex items-center justify-between\">\n          <Button variant=\"text\" size=\"sm\" startIcon={Plus} onClick={onAddCondition} disabled={!canAddCondition}>\n            {labels.addNestedFilter}\n          </Button>\n          {group.children.length === 0 && (\n            <Button variant=\"text\" size=\"sm\" startIcon={Trash2} danger onClick={onRemoveGroup}>\n              {labels.removeEmptyGroup}\n            </Button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/components/DataTable/data-table-filter-labels.d.ts

@@ -0,0 +1,44 @@
+import type { DATE_RELATIVE_GROUPS, DATE_RELATIVE_OPTIONS } from './filter-operators';
+type RelativeDateGroupKey = (typeof DATE_RELATIVE_GROUPS)[number]['key'];
+type RelativeDateValue = (typeof DATE_RELATIVE_OPTIONS)[number]['value'];
+export interface DataTableFilterPanelLabels {
+    title: string;
+    resetToDefault: string;
+    close: string;
+    where: string;
+    and: string;
+    or: string;
+    conjunctionAriaLabel: string;
+    fieldPlaceholder: string;
+    fieldAriaLabel: string;
+    operatorPlaceholder: string;
+    operatorAriaLabel: string;
+    valuePlaceholder: string;
+    numberPlaceholder: string;
+    relativeDatePlaceholder: string;
+    singleSelectPlaceholder: string;
+    multiSelectPlaceholder: string;
+    multiSelectEmptyText: string;
+    peoplePlaceholder: string;
+    peopleSearchPlaceholder: string;
+    peopleSearchAriaLabel: string;
+    peopleEmptyText: string;
+    filterValueAriaLabel: (columnLabel?: string) => string;
+    deleteCondition: string;
+    addFilter: string;
+    addGroup: string;
+    addNestedFilter: string;
+    removeEmptyGroup: string;
+    /**
+     * Operator key → visible label override. Missing keys fall back to
+     * `OPERATOR_REGISTRY` labels, preserving the registry as the default SSOT.
+     */
+    operatorLabels: Partial<Record<string, string>>;
+    /** Relative-date group/value overrides; missing keys retain registry defaults. */
+    relativeDateGroupLabels: Partial<Record<RelativeDateGroupKey, string>>;
+    relativeDateOptionLabels: Partial<Record<RelativeDateValue, string>>;
+}
+export declare const DATA_TABLE_FILTER_PANEL_DEFAULT_LABELS: DataTableFilterPanelLabels;
+export declare function resolveDataTableFilterPanelLabels(overrides?: Partial<DataTableFilterPanelLabels>): DataTableFilterPanelLabels;
+export {};
+//# sourceMappingURL=data-table-filter-labels.d.ts.map

package/dist/components/DataTable/data-table-filter-labels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-filter-labels.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/data-table-filter-labels.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAErF,KAAK,oBAAoB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAA;AACxE,KAAK,iBAAiB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA;AAExE,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,MAAM,CAAA;IACb,cAAc,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,EAAE,EAAE,MAAM,CAAA;IACV,oBAAoB,EAAE,MAAM,CAAA;IAC5B,gBAAgB,EAAE,MAAM,CAAA;IACxB,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,iBAAiB,EAAE,MAAM,CAAA;IACzB,gBAAgB,EAAE,MAAM,CAAA;IACxB,iBAAiB,EAAE,MAAM,CAAA;IACzB,uBAAuB,EAAE,MAAM,CAAA;IAC/B,uBAAuB,EAAE,MAAM,CAAA;IAC/B,sBAAsB,EAAE,MAAM,CAAA;IAC9B,oBAAoB,EAAE,MAAM,CAAA;IAC5B,iBAAiB,EAAE,MAAM,CAAA;IACzB,uBAAuB,EAAE,MAAM,CAAA;IAC/B,qBAAqB,EAAE,MAAM,CAAA;IAC7B,eAAe,EAAE,MAAM,CAAA;IACvB,oBAAoB,EAAE,CAAC,WAAW,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IACtD,eAAe,EAAE,MAAM,CAAA;IACvB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,eAAe,EAAE,MAAM,CAAA;IACvB,gBAAgB,EAAE,MAAM,CAAA;IACxB;;;OAGG;IACH,cAAc,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAC/C,kFAAkF;IAClF,uBAAuB,EAAE,OAAO,CAAC,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC,CAAA;IACtE,wBAAwB,EAAE,OAAO,CAAC,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAA;CACrE;AAGD,eAAO,MAAM,sCAAsC,EAAE,0BA+BpD,CAAA;AAED,wBAAgB,iCAAiC,CAC/C,SAAS,CAAC,EAAE,OAAO,CAAC,0BAA0B,CAAC,GAC9C,0BAA0B,CAiB5B"}

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

@@ -0,0 +1,55 @@
+const DATA_TABLE_FILTER_PANEL_DEFAULT_LABELS = {
+  title: "篩選",
+  resetToDefault: "恢復預設",
+  close: "關閉",
+  where: "Where",
+  and: "And",
+  or: "Or",
+  conjunctionAriaLabel: "連接詞 — 同 group 共用",
+  fieldPlaceholder: "選擇欄位",
+  fieldAriaLabel: "篩選欄位",
+  operatorPlaceholder: "運算子",
+  operatorAriaLabel: "篩選運算子",
+  valuePlaceholder: "輸入值…",
+  numberPlaceholder: "輸入數字…",
+  relativeDatePlaceholder: "選擇相對日期",
+  singleSelectPlaceholder: "選擇值",
+  multiSelectPlaceholder: "選擇值…",
+  multiSelectEmptyText: "沒有符合的值",
+  peoplePlaceholder: "選擇人員",
+  peopleSearchPlaceholder: "搜尋人員…",
+  peopleSearchAriaLabel: "搜尋篩選人員",
+  peopleEmptyText: "沒有符合的人員",
+  filterValueAriaLabel: (columnLabel) => columnLabel ? `${columnLabel} 篩選值` : "篩選值",
+  deleteCondition: "刪除",
+  addFilter: "加篩選",
+  addGroup: "加入篩選器",
+  addNestedFilter: "加入巢狀篩選",
+  removeEmptyGroup: "移除空群組",
+  operatorLabels: {},
+  relativeDateGroupLabels: {},
+  relativeDateOptionLabels: {}
+};
+function resolveDataTableFilterPanelLabels(overrides) {
+  return {
+    ...DATA_TABLE_FILTER_PANEL_DEFAULT_LABELS,
+    ...overrides,
+    operatorLabels: {
+      ...DATA_TABLE_FILTER_PANEL_DEFAULT_LABELS.operatorLabels,
+      ...overrides == null ? void 0 : overrides.operatorLabels
+    },
+    relativeDateGroupLabels: {
+      ...DATA_TABLE_FILTER_PANEL_DEFAULT_LABELS.relativeDateGroupLabels,
+      ...overrides == null ? void 0 : overrides.relativeDateGroupLabels
+    },
+    relativeDateOptionLabels: {
+      ...DATA_TABLE_FILTER_PANEL_DEFAULT_LABELS.relativeDateOptionLabels,
+      ...overrides == null ? void 0 : overrides.relativeDateOptionLabels
+    }
+  };
+}
+export {
+  DATA_TABLE_FILTER_PANEL_DEFAULT_LABELS,
+  resolveDataTableFilterPanelLabels
+};
+//# sourceMappingURL=data-table-filter-labels.js.map

package/dist/components/DataTable/data-table-filter-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-filter-labels.js","sources":["../../../src/components/DataTable/data-table-filter-labels.ts"],"sourcesContent":["// @internal — DataTableFilterPanel chrome/operator/value-picker labels shared by\n// panel orchestration, row/group rendering, and value-picker dispatch.\n\nimport type { DATE_RELATIVE_GROUPS, DATE_RELATIVE_OPTIONS } from './filter-operators'\n\ntype RelativeDateGroupKey = (typeof DATE_RELATIVE_GROUPS)[number]['key']\ntype RelativeDateValue = (typeof DATE_RELATIVE_OPTIONS)[number]['value']\n\nexport interface DataTableFilterPanelLabels {\n  title: string\n  resetToDefault: string\n  close: string\n  where: string\n  and: string\n  or: string\n  conjunctionAriaLabel: string\n  fieldPlaceholder: string\n  fieldAriaLabel: string\n  operatorPlaceholder: string\n  operatorAriaLabel: string\n  valuePlaceholder: string\n  numberPlaceholder: string\n  relativeDatePlaceholder: string\n  singleSelectPlaceholder: string\n  multiSelectPlaceholder: string\n  multiSelectEmptyText: string\n  peoplePlaceholder: string\n  peopleSearchPlaceholder: string\n  peopleSearchAriaLabel: string\n  peopleEmptyText: string\n  filterValueAriaLabel: (columnLabel?: string) => string\n  deleteCondition: string\n  addFilter: string\n  addGroup: string\n  addNestedFilter: string\n  removeEmptyGroup: string\n  /**\n   * Operator key → visible label override. Missing keys fall back to\n   * `OPERATOR_REGISTRY` labels, preserving the registry as the default SSOT.\n   */\n  operatorLabels: Partial<Record<string, string>>\n  /** Relative-date group/value overrides; missing keys retain registry defaults. */\n  relativeDateGroupLabels: Partial<Record<RelativeDateGroupKey, string>>\n  relativeDateOptionLabels: Partial<Record<RelativeDateValue, string>>\n}\n\n// code-quality-allow: dead-export — public i18n defaults, re-exported by panel.\nexport const DATA_TABLE_FILTER_PANEL_DEFAULT_LABELS: DataTableFilterPanelLabels = {\n  title: '篩選',\n  resetToDefault: '恢復預設',\n  close: '關閉',\n  where: 'Where',\n  and: 'And',\n  or: 'Or',\n  conjunctionAriaLabel: '連接詞 — 同 group 共用',\n  fieldPlaceholder: '選擇欄位',\n  fieldAriaLabel: '篩選欄位',\n  operatorPlaceholder: '運算子',\n  operatorAriaLabel: '篩選運算子',\n  valuePlaceholder: '輸入值…',\n  numberPlaceholder: '輸入數字…',\n  relativeDatePlaceholder: '選擇相對日期',\n  singleSelectPlaceholder: '選擇值',\n  multiSelectPlaceholder: '選擇值…',\n  multiSelectEmptyText: '沒有符合的值',\n  peoplePlaceholder: '選擇人員',\n  peopleSearchPlaceholder: '搜尋人員…',\n  peopleSearchAriaLabel: '搜尋篩選人員',\n  peopleEmptyText: '沒有符合的人員',\n  filterValueAriaLabel: (columnLabel) => columnLabel ? `${columnLabel} 篩選值` : '篩選值',\n  deleteCondition: '刪除',\n  addFilter: '加篩選',\n  addGroup: '加入篩選器',\n  addNestedFilter: '加入巢狀篩選',\n  removeEmptyGroup: '移除空群組',\n  operatorLabels: {},\n  relativeDateGroupLabels: {},\n  relativeDateOptionLabels: {},\n}\n\nexport function resolveDataTableFilterPanelLabels(\n  overrides?: Partial<DataTableFilterPanelLabels>,\n): DataTableFilterPanelLabels {\n  return {\n    ...DATA_TABLE_FILTER_PANEL_DEFAULT_LABELS,\n    ...overrides,\n    operatorLabels: {\n      ...DATA_TABLE_FILTER_PANEL_DEFAULT_LABELS.operatorLabels,\n      ...overrides?.operatorLabels,\n    },\n    relativeDateGroupLabels: {\n      ...DATA_TABLE_FILTER_PANEL_DEFAULT_LABELS.relativeDateGroupLabels,\n      ...overrides?.relativeDateGroupLabels,\n    },\n    relativeDateOptionLabels: {\n      ...DATA_TABLE_FILTER_PANEL_DEFAULT_LABELS.relativeDateOptionLabels,\n      ...overrides?.relativeDateOptionLabels,\n    },\n  }\n}\n"],"names":[],"mappings":"AA+CO,MAAM,yCAAqE;AAAA,EAChF,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,sBAAsB;AAAA,EACtB,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,wBAAwB;AAAA,EACxB,sBAAsB;AAAA,EACtB,mBAAmB;AAAA,EACnB,yBAAyB;AAAA,EACzB,uBAAuB;AAAA,EACvB,iBAAiB;AAAA,EACjB,sBAAsB,CAAC,gBAAgB,cAAc,GAAG,WAAW,SAAS;AAAA,EAC5E,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,gBAAgB,CAAA;AAAA,EAChB,yBAAyB,CAAA;AAAA,EACzB,0BAA0B,CAAA;AAC5B;AAEO,SAAS,kCACd,WAC4B;AAC5B,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,IACH,gBAAgB;AAAA,MACd,GAAG,uCAAuC;AAAA,MAC1C,GAAG,uCAAW;AAAA,IAAA;AAAA,IAEhB,yBAAyB;AAAA,MACvB,GAAG,uCAAuC;AAAA,MAC1C,GAAG,uCAAW;AAAA,IAAA;AAAA,IAEhB,0BAA0B;AAAA,MACxB,GAAG,uCAAuC;AAAA,MAC1C,GAAG,uCAAW;AAAA,IAAA;AAAA,EAChB;AAEJ;"}

package/dist/components/DataTable/data-table-filter-panel.d.ts

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import type { ColumnDef } from '@tanstack/react-table';
 import { createEmptyFilterTree, isFilterTreeActive, evaluateTree, dataTableFilterMatch, type Conjunction, type FilterCondition, type FilterGroup, type FilterTree, type FilterTreeFlat, type FilterTreeNested } from './filter-tree';
+import { DATA_TABLE_FILTER_PANEL_DEFAULT_LABELS, type DataTableFilterPanelLabels } from './data-table-filter-labels';
 export { createEmptyFilterTree, isFilterTreeActive, evaluateTree, dataTableFilterMatch, };
 export type { Conjunction, FilterCondition, FilterGroup, FilterTree, FilterTreeFlat, FilterTreeNested };
+export { DATA_TABLE_FILTER_PANEL_DEFAULT_LABELS };
+export type { DataTableFilterPanelLabels };
 export interface DataTableFilterPanelProps<TData> {
     /** 可被 filter 的 columns */
     columns: ColumnDef<TData, any>[];
@@ -19,6 +22,14 @@ export interface DataTableFilterPanelProps<TData> {
     /** Cell ⌄ menu「Filter by this」帶入的 column id(自動 add 一條 condition) */
     prefilledColumnId?: string;
     onPrefillConsumed?: () => void;
+    /**
+     * Condition leaf 上限(flat children 或 nested 所有 group.children 的總和)。
+     * 預設不限。到上限後所有 add 路徑與 prefill 都 fail closed；controlled value
+     * 已超過上限時保留原資料、不裁切，只停用後續新增。
+     */
+    maxConditions?: number;
+    /** Panel chrome/operator/value-picker labels. Nested maps are deep-merged with defaults. */
+    labels?: Partial<DataTableFilterPanelLabels>;
     onClose?: () => void;
     className?: string;
 }

package/dist/components/DataTable/data-table-filter-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-filter-panel.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/data-table-filter-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAgBtD,OAAO,EACL,qBAAqB,EACrB,kBAAkB,EAElB,YAAY,EACZ,oBAAoB,EACpB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACtB,MAAM,eAAe,CAAA;AAGtB,OAAO,EACL,qBAAqB,EACrB,kBAAkB,EAClB,YAAY,EACZ,oBAAoB,GACrB,CAAA;AACD,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,cAAc,EAAE,gBAAgB,EAAE,CAAA;AAsFvG,MAAM,WAAW,yBAAyB,CAAC,KAAK;IAI9C,0BAA0B;IAC1B,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAA;IAChC,gCAAgC;IAChC,KAAK,EAAE,UAAU,CAAA;IACjB,wBAAwB;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAA;IACpC;;;;OAIG;IACH,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB,oEAAoE;IACpE,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA6PD,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"}
+{"version":3,"file":"data-table-filter-panel.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/data-table-filter-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAgBtD,OAAO,EACL,qBAAqB,EACrB,kBAAkB,EAElB,YAAY,EACZ,oBAAoB,EACpB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACtB,MAAM,eAAe,CAAA;AACtB,OAAO,EACL,sCAAsC,EAEtC,KAAK,0BAA0B,EAChC,MAAM,4BAA4B,CAAA;AAGnC,OAAO,EACL,qBAAqB,EACrB,kBAAkB,EAClB,YAAY,EACZ,oBAAoB,GACrB,CAAA;AACD,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,cAAc,EAAE,gBAAgB,EAAE,CAAA;AACvG,OAAO,EAAE,sCAAsC,EAAE,CAAA;AACjD,YAAY,EAAE,0BAA0B,EAAE,CAAA;AAiG1C,MAAM,WAAW,yBAAyB,CAAC,KAAK;IAI9C,0BAA0B;IAC1B,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAA;IAChC,gCAAgC;IAChC,KAAK,EAAE,UAAU,CAAA;IACjB,wBAAwB;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAA;IACpC;;;;OAIG;IACH,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB,oEAAoE;IACpE,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,4FAA4F;IAC5F,MAAM,CAAC,EAAE,OAAO,CAAC,0BAA0B,CAAC,CAAA;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA2QD,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-filter-panel.js

@@ -10,6 +10,8 @@ import { getColumnId, getColumnMeta, getColumnLabel } from "./lib/column-meta.js
 import { datePrecisionOf, getDefaultOperator, FilterRow, GroupBlock } from "./data-table-filter-group.js";
 import { isFilterTreeEqual } from "./filter-tree.js";
 import { createEmptyFilterTree, dataTableFilterMatch, evaluateTree, isFilterTreeActive } from "./filter-tree.js";
+import { resolveDataTableFilterPanelLabels } from "./data-table-filter-labels.js";
+import { DATA_TABLE_FILTER_PANEL_DEFAULT_LABELS } from "./data-table-filter-labels.js";
 let _idSeed = 0;
 const newId = () => `f${++_idSeed}-${Date.now().toString(36)}`;
 function extractColumns(columns) {
@@ -60,6 +62,12 @@ const newEmptyGroup = () => ({
   conjunction: "or",
   children: [newEmptyCondition()]
 });
+const countFilterConditions = (tree) => tree.mode === "flat" ? tree.children.length : tree.children.reduce((total, group) => total + group.children.length, 0);
+const normalizeMaxConditions = (maxConditions) => {
+  if (maxConditions === void 0 || maxConditions === Number.POSITIVE_INFINITY) return Number.POSITIVE_INFINITY;
+  if (!Number.isFinite(maxConditions)) return 0;
+  return Math.max(0, Math.floor(maxConditions));
+};
 function DataTableFilterPanelInner({
   columns,
   value,
@@ -67,6 +75,8 @@ function DataTableFilterPanelInner({
   defaultValue,
   prefilledColumnId,
   onPrefillConsumed,
+  maxConditions,
+  labels: labelsOverride,
   onClose,
   className
 }, ref) {
@@ -75,12 +85,20 @@ function DataTableFilterPanelInner({
     () => filterableColumns.map((c) => ({ value: c.id, label: c.label })),
     [filterableColumns]
   );
+  const labels = React.useMemo(
+    () => resolveDataTableFilterPanelLabels(labelsOverride),
+    [labelsOverride]
+  );
+  const conditionCount = countFilterConditions(value);
+  const normalizedMaxConditions = normalizeMaxConditions(maxConditions);
+  const canAddCondition = conditionCount < normalizedMaxConditions;
   const initialMountDoneRef = React.useRef(false);
   React.useEffect(() => {
     if (initialMountDoneRef.current) return;
     initialMountDoneRef.current = true;
     if (filterableColumns.length === 0) return;
     if (value.children.length > 0) return;
+    if (!canAddCondition) return;
     if (value.mode === "flat") {
       onChange({ ...value, children: [newEmptyCondition()] });
     } else {
@@ -90,7 +108,7 @@ function DataTableFilterPanelInner({
   React.useEffect(() => {
     if (!prefilledColumnId) return;
     const colInfo = filterableColumns.find((c) => c.id === prefilledColumnId);
-    if (colInfo) {
+    if (colInfo && canAddCondition) {
       const cond = {
         kind: "cond",
         id: newId(),
@@ -129,7 +147,7 @@ function DataTableFilterPanelInner({
     onChange({ ...flatTree, children: flatTree.children.filter((c) => c.id !== id) });
   };
   const addFlatCondition = () => {
-    if (!flatTree) return;
+    if (!flatTree || !canAddCondition) return;
     onChange({ ...flatTree, children: [...flatTree.children, newEmptyCondition()] });
   };
   const setFlatConjunction = (conj) => {
@@ -163,7 +181,7 @@ function DataTableFilterPanelInner({
     });
   };
   const addConditionToGroup = (groupId) => {
-    if (!nestedTree) return;
+    if (!nestedTree || !canAddCondition) return;
     onChange({
       ...nestedTree,
       children: nestedTree.children.map(
@@ -176,7 +194,7 @@ function DataTableFilterPanelInner({
     onChange({ ...nestedTree, children: nestedTree.children.filter((g) => g.id !== groupId) });
   };
   const addGroup = () => {
-    if (!nestedTree) return;
+    if (!nestedTree || !canAddCondition) return;
     onChange({ ...nestedTree, children: [...nestedTree.children, newEmptyGroup()] });
   };
   const setRootConjunction = (conj) => {
@@ -204,7 +222,7 @@ function DataTableFilterPanelInner({
       className
     ), children: [
       /* @__PURE__ */ jsxs(SurfaceHeader, { className: COMPACT_HEADER_SLOT, children: [
-        /* @__PURE__ */ jsx(PopoverTitle, { className: "flex-1", children: "篩選" }),
+        /* @__PURE__ */ jsx(PopoverTitle, { className: "flex-1", children: labels.title }),
         defaultValue && !isFilterTreeEqual(value, defaultValue) && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
             Button,
@@ -213,13 +231,13 @@ function DataTableFilterPanelInner({
               size: "sm",
               iconOnly: true,
               startIcon: RotateCcw,
-              "aria-label": "恢復預設",
+              "aria-label": labels.resetToDefault,
               onClick: () => onChange(defaultValue)
             }
           ),
           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 }) })
+        onClose && /* @__PURE__ */ jsx(PopoverClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { "data-dismiss": true, iconOnly: true, dismiss: true, size: "sm", startIcon: X, "aria-label": labels.close, onClick: onClose }) })
       ] }),
       /* @__PURE__ */ jsxs(SurfaceBody, { className: "flex flex-col gap-[var(--layout-space-tight)]", children: [
         flatTree && flatTree.children.map((cond, idx) => /* @__PURE__ */ jsx(
@@ -237,7 +255,8 @@ function DataTableFilterPanelInner({
             },
             onChangeOp: (v) => updateFlatCondition(cond.id, { op: v, value: "" }),
             onChangeValue: (v) => updateFlatCondition(cond.id, { value: v }),
-            onRemove: () => removeFlatCondition(cond.id)
+            onRemove: () => removeFlatCondition(cond.id),
+            labels
           },
           cond.id
         )),
@@ -254,7 +273,9 @@ function DataTableFilterPanelInner({
             onChangeCondition: (condId, patch) => updateGroupCondition(group.id, condId, patch),
             onRemoveCondition: (condId) => removeGroupCondition(group.id, condId),
             onAddCondition: () => addConditionToGroup(group.id),
-            onRemoveGroup: () => removeGroup(group.id)
+            onRemoveGroup: () => removeGroup(group.id),
+            canAddCondition,
+            labels
           },
           group.id
         )),
@@ -265,7 +286,8 @@ function DataTableFilterPanelInner({
             size: "sm",
             startIcon: Plus,
             onClick: value.mode === "flat" ? addFlatCondition : addGroup,
-            children: value.mode === "nested" ? "加入篩選器" : "加篩選"
+            disabled: !canAddCondition,
+            children: value.mode === "nested" ? labels.addGroup : labels.addFilter
           }
         ) })
       ] })
@@ -275,6 +297,7 @@ function DataTableFilterPanelInner({
 const DataTableFilterPanel = React.forwardRef(DataTableFilterPanelInner);
 DataTableFilterPanel.displayName = "DataTableFilterPanel";
 export {
+  DATA_TABLE_FILTER_PANEL_DEFAULT_LABELS,
   DataTableFilterPanel,
   createEmptyFilterTree,
   dataTableFilterMatch,