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

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

@@ -0,0 +1,607 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { RotateCcw, X, Plus, Trash2 } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../Button/button.js";
+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 { SurfaceHeader, COMPACT_HEADER_SLOT, SurfaceBody } from "../../patterns/overlay-surface/overlay-surface.js";
+import { PopoverTitle, PopoverClose } from "../Popover/popover.js";
+import { ButtonDivider } from "../Button/button-group.js";
+import { FieldControlGroup } from "../FieldControlGroup/field-control-group.js";
+import { getColumnId, getColumnMeta, getColumnLabel } from "./lib/column-meta.js";
+import { DEFAULT_OPERATOR, getOperatorSpec, getValueShape, OPERATOR_REGISTRY, DATE_RELATIVE_OPTIONS, DATE_RELATIVE_GROUPS } from "./filter-operators.js";
+import { isFilterTreeEqual } from "./filter-tree.js";
+import { createEmptyFilterTree, dataTableFilterMatch, evaluateTree, isFilterTreeActive } from "./filter-tree.js";
+let _idSeed = 0;
+const newId = () => `f${++_idSeed}-${Date.now().toString(36)}`;
+function extractColumns(columns) {
+  const out = [];
+  for (const col of columns) {
+    const id = getColumnId(col);
+    if (!id || id === "__select__") continue;
+    const meta = getColumnMeta(col);
+    const type = meta == null ? void 0 : meta.type;
+    if (!type) continue;
+    if ((meta == null ? void 0 : meta.filterable) === false) continue;
+    out.push({
+      id,
+      label: getColumnLabel(col, id),
+      type,
+      options: meta == null ? void 0 : meta.options,
+      people: meta == null ? void 0 : meta.people,
+      includeTime: meta == null ? void 0 : meta.includeTime
+    });
+  }
+  return out;
+}
+function getOperatorOptions(type) {
+  const registry = type && OPERATOR_REGISTRY[type] ? OPERATOR_REGISTRY[type] : OPERATOR_REGISTRY.string;
+  return registry.map((op) => ({ value: op.op, label: 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 newCondition = (firstCol) => ({
+  kind: "cond",
+  id: newId(),
+  field: (firstCol == null ? void 0 : firstCol.id) ?? "",
+  op: firstCol ? getDefaultOperator(firstCol.type) : "",
+  value: "",
+  datePrecision: datePrecisionOf(firstCol)
+});
+const newEmptyCondition = () => ({
+  kind: "cond",
+  id: newId(),
+  field: "",
+  op: "",
+  value: ""
+});
+const newGroup = (firstCol) => ({
+  kind: "group",
+  id: newId(),
+  conjunction: "or",
+  // group 內 default OR(對齊 ref 圖)
+  children: [newCondition(firstCol)]
+});
+const newEmptyGroup = () => ({
+  kind: "group",
+  id: newId(),
+  conjunction: "or",
+  children: [newEmptyCondition()]
+});
+function FilterValuePicker({
+  shape,
+  value,
+  onChange,
+  colInfo,
+  disabled,
+  ariaLabel,
+  className
+}) {
+  if (!shape || disabled) {
+    return /* @__PURE__ */ jsx(Input, { size: "sm", value: "", onChange: () => {
+    }, placeholder: "輸入值…", 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: "輸入值…",
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ jsx(
+        NumberInput,
+        {
+          size: "sm",
+          value: typeof value === "number" ? value : null,
+          onChange: (v) => onChange(v ?? ""),
+          placeholder: "輸入數字…",
+          "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: o.label,
+        group: o.group
+      }));
+      return /* @__PURE__ */ jsx(
+        Select,
+        {
+          size: "sm",
+          options: opts,
+          groups: DATE_RELATIVE_GROUPS,
+          value: String(value ?? ""),
+          onChange: (v) => onChange(v),
+          placeholder: "選擇相對日期",
+          "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: "選擇值",
+          "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: "選擇值…",
+          "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
+        }
+      );
+    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),
+          "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),
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    }
+    default:
+      return null;
+  }
+}
+function DataTableFilterPanelInner({
+  mode,
+  columns,
+  value,
+  onChange,
+  defaultValue,
+  prefilledColumnId,
+  onPrefillConsumed,
+  onClose,
+  className
+}, ref) {
+  const filterableColumns = React.useMemo(() => extractColumns(columns), [columns]);
+  const fieldOptions = React.useMemo(
+    () => filterableColumns.map((c) => ({ value: c.id, label: c.label })),
+    [filterableColumns]
+  );
+  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 (value.mode === "flat") {
+      onChange({ ...value, children: [newEmptyCondition()] });
+    } else {
+      onChange({ ...value, children: [newEmptyGroup()] });
+    }
+  }, [filterableColumns.length]);
+  React.useEffect(() => {
+    if (!prefilledColumnId) return;
+    const colInfo = filterableColumns.find((c) => c.id === prefilledColumnId);
+    if (colInfo) {
+      const cond = {
+        kind: "cond",
+        id: newId(),
+        field: prefilledColumnId,
+        op: getDefaultOperator(colInfo.type),
+        value: "",
+        // 2026-07-14 deep-audit fix:補 datePrecision(原漏 → datetime(includeTime=true)欄
+        // prefill 掉到 undefined=day 精度忽略 ms;對齊初始 add / changeField 路徑的 datePrecisionOf)
+        datePrecision: datePrecisionOf(colInfo)
+      };
+      if (value.mode === "flat") {
+        onChange({ ...value, children: [...value.children, cond] });
+      } else {
+        if (value.children.length === 0) {
+          onChange({ ...value, children: [{ ...newGroup(colInfo), children: [cond] }] });
+        } else {
+          const updatedGroups = value.children.map(
+            (g, i) => i === 0 ? { ...g, children: [...g.children, cond] } : g
+          );
+          onChange({ ...value, children: updatedGroups });
+        }
+      }
+    }
+    onPrefillConsumed == null ? void 0 : onPrefillConsumed();
+  }, [prefilledColumnId]);
+  const flatTree = value.mode === "flat" ? value : null;
+  const updateFlatCondition = (id, patch) => {
+    if (!flatTree) return;
+    onChange({
+      ...flatTree,
+      children: flatTree.children.map((c) => c.id === id ? { ...c, ...patch } : c)
+    });
+  };
+  const removeFlatCondition = (id) => {
+    if (!flatTree) return;
+    onChange({ ...flatTree, children: flatTree.children.filter((c) => c.id !== id) });
+  };
+  const addFlatCondition = () => {
+    if (!flatTree) return;
+    onChange({ ...flatTree, children: [...flatTree.children, newEmptyCondition()] });
+  };
+  const setFlatConjunction = (conj) => {
+    if (!flatTree) return;
+    onChange({ ...flatTree, conjunction: conj });
+  };
+  const nestedTree = value.mode === "nested" ? value : null;
+  const updateGroup = (groupId, patch) => {
+    if (!nestedTree) return;
+    onChange({
+      ...nestedTree,
+      children: nestedTree.children.map((g) => g.id === groupId ? { ...g, ...patch } : g)
+    });
+  };
+  const updateGroupCondition = (groupId, condId, patch) => {
+    if (!nestedTree) return;
+    onChange({
+      ...nestedTree,
+      children: nestedTree.children.map(
+        (g) => g.id === groupId ? { ...g, children: g.children.map((c) => c.id === condId ? { ...c, ...patch } : c) } : g
+      )
+    });
+  };
+  const removeGroupCondition = (groupId, condId) => {
+    if (!nestedTree) return;
+    onChange({
+      ...nestedTree,
+      children: nestedTree.children.map(
+        (g) => g.id === groupId ? { ...g, children: g.children.filter((c) => c.id !== condId) } : g
+      )
+    });
+  };
+  const addConditionToGroup = (groupId) => {
+    if (!nestedTree) return;
+    onChange({
+      ...nestedTree,
+      children: nestedTree.children.map(
+        (g) => g.id === groupId ? { ...g, children: [...g.children, newEmptyCondition()] } : g
+      )
+    });
+  };
+  const removeGroup = (groupId) => {
+    if (!nestedTree) return;
+    onChange({ ...nestedTree, children: nestedTree.children.filter((g) => g.id !== groupId) });
+  };
+  const addGroup = () => {
+    if (!nestedTree) return;
+    onChange({ ...nestedTree, children: [...nestedTree.children, newEmptyGroup()] });
+  };
+  const setRootConjunction = (conj) => {
+    if (!nestedTree) return;
+    onChange({ ...nestedTree, conjunction: conj });
+  };
+  return (
+    // 寬度策略:desktop 680px;mobile 縮到 viewport 內留 32px 邊(避溢出 popover 切右半)。
+    // 對齊 Notion / Airtable 的 advanced filter 在 mobile 走 full-width 邊處理。
+    // **#8 fix(2026-05-04)**:popover width by mode(由 cell min-w 與 group nested chrome 反推)
+    //   flat:cell ConjunctionLabel(80) + gap-2(8) + FCG(field-min 160 + op-min 120 + value 200) +
+    //         gap-2(8) + trash(28) + 2×loose padding(32) = ~636 → 640px
+    //   nested:再加 group p-2 (16) + outer ConjunctionLabel (80) + outer gap (8) → ~740 → 760px
+    //   對齊 Airtable / Notion / Linear filter row 視覺密度 @benchmark-unverified(non-OSS)
+    // **K11 fix(2026-05-04)**:viewport-aware scroll chain invariant
+    //   parent PopoverContent 是 flex flex-col + max-h + overflow-hidden,
+    //   panel root 必 forward `flex flex-col h-full` 才能讓 SurfaceBody flex-1 min-h-0 overflow-y-auto 生效
+    //   無此 forward → 中間 wrapper 斷鏈 → body 不 scroll(ProfileCard 因為自身設 max-h flex-col 才繞過)
+    //   詳 overlay-surface.spec.md「viewport-aware scroll chain invariant」段
+    // K11 v2 fix(2026-05-04):flex item 預設 min-h:auto 讓 content 撐 height,h-full 失效。
+    // 必加 `min-h-0` 才能讓 panel 在 PopoverContent max-h cap 下正確 shrink + body scroll。
+    /* @__PURE__ */ jsxs("div", { ref, className: cn(
+      "flex flex-col h-full min-h-0",
+      mode === "nested" ? "w-[min(760px,calc(100vw-2rem))]" : "w-[min(640px,calc(100vw-2rem))]",
+      className
+    ), children: [
+      /* @__PURE__ */ jsxs(SurfaceHeader, { className: COMPACT_HEADER_SLOT, children: [
+        /* @__PURE__ */ jsx(PopoverTitle, { className: "flex-1", children: "篩選" }),
+        defaultValue && !isFilterTreeEqual(value, defaultValue) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "text",
+              size: "sm",
+              iconOnly: true,
+              startIcon: RotateCcw,
+              "aria-label": "恢復預設",
+              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 }) })
+      ] }),
+      /* @__PURE__ */ jsxs(SurfaceBody, { className: "flex flex-col gap-[var(--layout-space-tight)]", children: [
+        flatTree && flatTree.children.map((cond, idx) => /* @__PURE__ */ jsx(
+          FilterRow,
+          {
+            index: idx,
+            condition: cond,
+            conjunction: flatTree.conjunction,
+            filterableColumns,
+            fieldOptions,
+            onChangeConjunction: setFlatConjunction,
+            onChangeField: (v) => {
+              const newCol = filterableColumns.find((c) => c.id === v);
+              updateFlatCondition(cond.id, { field: v, op: getDefaultOperator(newCol == null ? void 0 : newCol.type), value: "", datePrecision: datePrecisionOf(newCol) });
+            },
+            onChangeOp: (v) => updateFlatCondition(cond.id, { op: v, value: "" }),
+            onChangeValue: (v) => updateFlatCondition(cond.id, { value: v }),
+            onRemove: () => removeFlatCondition(cond.id)
+          },
+          cond.id
+        )),
+        nestedTree && nestedTree.children.map((group, gIdx) => /* @__PURE__ */ jsx(
+          GroupBlock,
+          {
+            index: gIdx,
+            group,
+            rootConjunction: nestedTree.conjunction,
+            filterableColumns,
+            fieldOptions,
+            onChangeRootConjunction: setRootConjunction,
+            onChangeGroupConjunction: (c) => updateGroup(group.id, { conjunction: c }),
+            onChangeCondition: (condId, patch) => updateGroupCondition(group.id, condId, patch),
+            onRemoveCondition: (condId) => removeGroupCondition(group.id, condId),
+            onAddCondition: () => addConditionToGroup(group.id),
+            onRemoveGroup: () => removeGroup(group.id)
+          },
+          group.id
+        )),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "tertiary",
+            size: "sm",
+            startIcon: Plus,
+            onClick: mode === "flat" ? addFlatCondition : addGroup,
+            children: mode === "nested" ? "加入篩選器" : "加篩選"
+          }
+        ) })
+      ] })
+    ] })
+  );
+}
+const DataTableFilterPanel = React.forwardRef(DataTableFilterPanelInner);
+DataTableFilterPanel.displayName = "DataTableFilterPanel";
+const CONJ_OPTIONS = [
+  { value: "and", label: "And" },
+  { value: "or", label: "Or" }
+];
+function ConjunctionLabel({
+  index,
+  conjunction,
+  onChange
+}) {
+  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" });
+  }
+  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 });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "w-20 shrink-0", children: /* @__PURE__ */ jsx(
+    Select,
+    {
+      size: "sm",
+      options: CONJ_OPTIONS,
+      value: conjunction,
+      onChange: (v) => onChange(v),
+      minRows: 2,
+      "aria-label": "連接詞 — 同 group 共用"
+    }
+  ) });
+}
+function FilterRow({
+  index,
+  condition,
+  conjunction,
+  filterableColumns,
+  fieldOptions,
+  onChangeConjunction,
+  onChangeField,
+  onChangeOp,
+  onChangeValue,
+  onRemove
+}) {
+  const colInfo = filterableColumns.find((c) => c.id === condition.field);
+  const operatorOptions = getOperatorOptions(colInfo == null ? void 0 : colInfo.type);
+  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__ */ 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",
+          size: "sm",
+          options: fieldOptions,
+          value: condition.field,
+          onChange: onChangeField,
+          placeholder: "選擇欄位",
+          "aria-label": "篩選欄位"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          className: hasValueCell ? "!w-[var(--data-table-filter-op-width)] flex-shrink-0" : "!flex-1 !min-w-0",
+          size: "sm",
+          options: operatorOptions,
+          value: condition.op,
+          onChange: onChangeOp,
+          disabled: !hasField,
+          placeholder: "運算子",
+          "aria-label": "篩選運算子"
+        }
+      ),
+      hasValueCell && /* @__PURE__ */ jsx(
+        FilterValuePicker,
+        {
+          shape: valueShape,
+          value: condition.value,
+          onChange: onChangeValue,
+          colInfo,
+          disabled: !hasField,
+          ariaLabel: colInfo ? `${colInfo.label} 篩選值` : "篩選值",
+          className: "!flex-1 !min-w-0"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", iconOnly: true, startIcon: Trash2, "aria-label": "刪除", onClick: onRemove })
+  ] });
+}
+function GroupBlock({
+  index,
+  group,
+  rootConjunction,
+  filterableColumns,
+  fieldOptions,
+  onChangeRootConjunction,
+  onChangeGroupConjunction,
+  onChangeCondition,
+  onRemoveCondition,
+  onAddCondition,
+  onRemoveGroup
+}) {
+  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__ */ 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,
+        {
+          index: cIdx,
+          condition: cond,
+          conjunction: group.conjunction,
+          filterableColumns,
+          fieldOptions,
+          onChangeConjunction: onChangeGroupConjunction,
+          onChangeField: (v) => {
+            const newCol = filterableColumns.find((c) => c.id === v);
+            onChangeCondition(cond.id, { field: v, op: getDefaultOperator(newCol == null ? void 0 : newCol.type), value: "", datePrecision: datePrecisionOf(newCol) });
+          },
+          onChangeOp: (v) => onChangeCondition(cond.id, { op: v, value: "" }),
+          onChangeValue: (v) => onChangeCondition(cond.id, { value: v }),
+          onRemove: () => onRemoveCondition(cond.id)
+        },
+        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: "移除空群組" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  DataTableFilterPanel,
+  createEmptyFilterTree,
+  dataTableFilterMatch,
+  evaluateTree,
+  isFilterTreeActive
+};
+//# sourceMappingURL=data-table-filter-panel.js.map