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

package/src/components/DataTable/data-table-filter-value-picker.tsx

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

package/src/components/DataTable/data-table-interaction-layer.tsx

@@ -1,12 +1,14 @@
+// @internal — DS-internal 單元(viewport 覆蓋 paint layer,只被 data-table.tsx 內部消費);不隨 index.ts re-export 進 npm public surface。
 /**
  * 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)
@@ -29,15 +31,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
   /**
@@ -54,20 +57,14 @@ 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
 }
@@ -80,7 +77,7 @@ interface DataTableInteractionLayerProps {
  *   2. layoutCache 需另寫 invalidation logic,added complexity
  *   3. Hover overlay re-render 頻率低(per cell hover,不是 per frame)
  *
- * 0.5px sub-pixel snap per RFC §Overlay Geometry。
+ * Float coords pass-through — no rounding / no snap(v3 fix,見下方 v3 註解;原 RFC 0.5px snap 已撤)。
  */
 function getCellRect(containerEl: HTMLElement | null, cellId: CellId): CellRect | null {
   if (!containerEl) return null
@@ -221,10 +218,11 @@ function useHoveredCell(
 }
 
 /**
- * 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 function DataTableInteractionLayer({
   enabled,
@@ -234,8 +232,6 @@ export function DataTableInteractionLayer({
   activeEditorEnabled = false,
   activeEditorRender,
   selectedCellId = null,
-  // rangeCellIds retired 2026-05-10(outer ring 已 retire,range visual 靠 cell-bg `[data-range-cell]`)
-  rangeCellIds: _rangeCellIds,
 }: DataTableInteractionLayerProps) {
   const hoveredCellId = useHoveredCell(containerRef, enabled)
   // 2026-05-10 RWD/scroll sync(per user mandate「所有 overlay 在各種 RWD 和捲動時都處在正確位置」):
@@ -263,7 +259,7 @@ export function DataTableInteractionLayer({
     ? getCellRect(containerRef.current, activeEditorCellId)
     : null
 
-  // Slice D Step 4(spreadsheet semantics):SelectionRect + RangeRect with viewport clip。
+  // Slice D Step 4(spreadsheet semantics):SelectionRing with viewport clip(RangeRect 已 retire — range 視覺走 CSS [data-range-cell])。
   const selectedGeo = enabled && selectedCellId != null
     ? getCellGeometry(containerRef.current, selectedCellId)
     : null
@@ -303,10 +299,10 @@ export function DataTableInteractionLayer({
       )}
       {/* 2026-05-10 retire RangeOuterRing(per user 抓 image 4 + verbatim「range 的 cell 本來就有顏色變化,
           那樣就夠了,不需要再有 2px 藍色的框」)。Range visual now relies purely on cell-bg
-          (`--primary-subtle` via `[data-range-cell]` CSS in `data-table.css`)+ focus cell 2px selected
+          (`--primary-subtle` via `[data-range-cell]` CSS in `data-table.css`)+ focus cell 1px selected
           border。Outer 2px primary ring 從 Issue 6 ship 但 visual 太重 — bg-fill 已給「這些 cell 在範圍內」
-          訊號,outer ring 是 redundant。`rangeOuterRingsByPanel` 計算保留但不 render(future 若需 reinstate
-          只需打開 .map)。 */}
+          訊號,outer ring 是 redundant。calc + render 皆已 retire(變數已移除;future 若需 reinstate
+          參考 git history 2026-05-10)。 */}
       {/* {rangeOuterRingsByPanel.map((group) => (
         <ClipMask key={group.panel} clipRect={group.clipRect}>
           <CellRangeOuterRing rect={toRelRect(group.bbox, group.clipRect)} />
@@ -340,9 +336,10 @@ function toRelRect(cellRect: CellRect, clipRect: CellRect): CellRect {
 
 // ── Private primitives(per codex unified-ring-overlay-2026-05-10 Final A')──────
 //
-// 三個 private primitive 各自 own 一個 paint concern:
+// 三個 private primitive 各自 own 一個 paint concern(2026-07-14 對齊實作:CellRangeFill
+// 不存在 — range bg 走 cell 自身 CSS `[data-range-cell]`,非 layer 元件):
 //   1. CellRingOverlay  — outline ring(hover / selected / future focus / error)
-//   2. CellRangeFill    — bg fill(range cells in spreadsheet mode)
+//   2. ClipMask         — panel viewport 裁切 wrapper(Issue 6 partial-visibility)
 //   3. ActiveEditorHost — opaque host(portal Field edit)
 //
 // SSOT pattern(共 3 primitives):rect float pass-through + boxSizing:border-box +
@@ -444,7 +441,7 @@ function ClipMask({ clipRect, children }: { clipRect: CellRect; children: React.
  *
  * Per codex Q2 verdict:不該進 CellRingOverlay primitive — 它是 host 不是 ring。
  *   - pointerEvents:auto(child Field 接收 click / keyboard)
- *   - background:var(--canvas)(opaque cover display Field below;Cell SSOT 保留)
+ *   - background:var(--canvas)(opaque cover view Field below;Cell SSOT 保留)
  *   - z-index 3(above hover / selected / range)
  *   - children = activeEditorRender 的回傳 React node
  *

package/src/components/DataTable/data-table-sort-manager.tsx

@@ -10,7 +10,7 @@ import { cn } from '@/lib/utils'
 import { dragSourceStyle, dragHandleCursorClass } from '@/design-system/lib/drag-visual'
 import { Button } from '@/design-system/components/Button/button'
 import { Select, type SelectOption } from '@/design-system/components/Select/select'
-import { SurfaceHeader, SurfaceBody } from '@/design-system/patterns/overlay-surface/overlay-surface'
+import { SurfaceHeader, SurfaceBody, COMPACT_HEADER_SLOT } from '@/design-system/patterns/overlay-surface/overlay-surface'
 import { ButtonDivider } from '@/design-system/components/Button/button-group'
 import { PopoverTitle, PopoverClose } from '@/design-system/components/Popover/popover'
 import { ItemInlineActionButton } from '@/design-system/patterns/element-anatomy/item-anatomy'
@@ -26,7 +26,7 @@ import { getColumnId, getColumnLabel } from './lib/column-meta'
  * Source-of-truth: TanStack `SortingState`(同 `useReactTable.state.sorting`)。
  * 跟 cell click sort 共享 state — single source-of-truth across cell + panel。
  *
- * MVP: reorder 用 ↑/↓ button(DnD 留 phase 2 跟 column reorder 一起做)。
+ * Reorder:DnD(useSortable + GripVertical handle,見下方 SortRow)——原 MVP ↑/↓ button 已退役。
  */
 
 interface SortColumn {
@@ -35,7 +35,7 @@ interface SortColumn {
   enableSorting?: boolean
 }
 
-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) */
@@ -65,14 +65,15 @@ const DIRECTION_OPTIONS: SelectOption[] = [
   { value: 'desc', label: '降冪' },
 ]
 
-export function DataTableSortManager<TData>({
+function DataTableSortManagerInner<TData>({
   columns,
   sorting,
   onSortingChange,
   onReset,
   onClose,
   className,
-}: DataTableSortManagerProps<TData>) {
+  ...props
+}: DataTableSortManagerProps<TData>, ref: React.ForwardedRef<HTMLDivElement>) {
   const sortableColumns = React.useMemo(() => extractColumns(columns), [columns])
   const fieldOptions: SelectOption[] = React.useMemo(
     () => sortableColumns.map((c) => ({ value: c.id, label: c.label })),
@@ -107,9 +108,13 @@ export function DataTableSortManager<TData>({
   // K11 fix(2026-05-04): viewport-aware scroll chain invariant — 詳 overlay-surface.spec.md
   // 2026-05-23 Phase A.4 Decision 2: w-[480px] → token `--data-table-sort-panel-width`(SSOT in uiSize.css)
   return (
-    <div className={cn('flex flex-col h-full min-h-0 w-[var(--data-table-sort-panel-width)]', className)}>
-      {/* Popover 派輕量 chrome — slot 縮 20 匹配 PopoverTitle text-body line-height,header 自然 ~45px */}
-      <SurfaceHeader className="[--chrome-slot-h:1.25rem]">
+    <div
+      ref={ref}
+      className={cn('flex flex-col h-full min-h-0 w-[var(--data-table-sort-panel-width)]', className)}
+      {...props}
+    >
+      {/* Popover 派輕量 chrome — slot 走 COMPACT_HEADER_SLOT(=21,衍生自 PopoverTitle text-body line-box),header 自然 ~45px */}
+      <SurfaceHeader className={COMPACT_HEADER_SLOT}>
         <PopoverTitle className="flex-1">排序</PopoverTitle>
         {onReset && sorting.length > 0 && (
           <>
@@ -165,7 +170,10 @@ export function DataTableSortManager<TData>({
   )
 }
 
-DataTableSortManager.displayName = 'DataTableSortManager'
+export const DataTableSortManager = React.forwardRef(DataTableSortManagerInner) as <TData>(
+  props: DataTableSortManagerProps<TData> & { ref?: React.ForwardedRef<HTMLDivElement> }
+) => React.ReactElement
+;(DataTableSortManager as { displayName?: string }).displayName = 'DataTableSortManager'
 
 // SortRow:DnD-enabled row。GripVertical 為 drag listener handle(對齊 Notion / Airtable 拖曳 idiom)。
 function SortRow({
@@ -197,11 +205,11 @@ function SortRow({
         {...listeners}
       />
       <div className="flex-1 min-w-0">
-        <Select size="sm" options={optionsForRow} value={sort.id} onChange={onChangeId} />
+        <Select size="sm" aria-label="排序欄位" options={optionsForRow} value={sort.id} onChange={onChangeId} />
       </div>
       <div className="w-32 shrink-0">
         {/* minRows={2} — 升冪/降冪只 2 選項,顯式縮 menu 高度(Q5) */}
-        <Select size="sm" options={DIRECTION_OPTIONS} value={sort.desc ? 'desc' : 'asc'} onChange={onChangeDir} minRows={2} />
+        <Select size="sm" aria-label="排序方向" options={DIRECTION_OPTIONS} value={sort.desc ? 'desc' : 'asc'} onChange={onChangeDir} minRows={2} />
       </div>
       {/* Trash 用 text Button(Q4 對齊 filter panel)— form-control row 必 Field 同高 */}
       <Button variant="text" size="sm" iconOnly startIcon={Trash2} aria-label="刪除" onClick={onRemove} />