@squadbase/vantage 0.6.2-dev1.ac99e02 → 0.6.2-dev1.d7c0911

package/registry/ui/filter-bar.tsx

@@ -1,5 +1,7 @@
 // Copied by `vantage add ui filter-bar`. This file is yours to edit.
-// Generated from @squadbase/vantage src/components/filter-bar.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/components/filter-bar.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 /**
  * FilterBar — a compound filter row. `<FilterBar>` holds the (always
  * controlled) filter values on context; the select, multi-select, active-chip
@@ -77,29 +79,49 @@ export interface FilterBarSelectProps {
   label: string
   options: FilterOption[]
   placeholder?: string
+  /**
+   * 渡すと、選択肢の先頭に「絞り込まない」項目をこの文言で足す（例: `"すべて"`）。選ぶとこのキーを値から外す（`undefined`）ので、
+   * アクティブチップにも出ない。絞り込んでいないときのトリガーは `placeholder`（既定は `label`）のまま。既定は足さない。
+   * @example allLabel="すべて"
+   */
+  allLabel?: string
   className?: string
 }
 
+/** 「すべて」項目の値。実際の選択肢の値と衝突しない内部用の印で、`onChange` には渡らない。 */
+const ALL_VALUE = "__squadkit_all__"
+
 export function FilterBarSelect({
   filterKey,
   label,
   options,
   placeholder,
+  allLabel,
   className,
 }: FilterBarSelectProps) {
   const { value, onChange } = useFilterBar()
+  const hasAll = allLabel !== undefined
+  const items = hasAll ? [{ value: ALL_VALUE, label: allLabel }, ...options] : options
+  const current = value[filterKey] as string | undefined
 
   // Base UI reports `null` when the selection is cleared — drop the key so
-  // "no filter" reads as absent rather than as an empty string.
+  // "no filter" reads as absent rather than as an empty string. "すべて" does the same.
   const handleChange = (selected: string | null) =>
-    onChange({ ...value, [filterKey]: selected ?? undefined })
+    onChange({ ...value, [filterKey]: selected === null || selected === ALL_VALUE ? undefined : selected })
 
   return (
-    <Select value={(value[filterKey] as string) ?? ""} onValueChange={handleChange}>
+    <Select
+      // FilterOption is already `{ value, label }` — Base UI uses it to show the
+      // label (not the raw value) in the trigger.
+      items={items}
+      value={current ?? ""}
+      onValueChange={handleChange}
+    >
       <SelectTrigger size="sm" aria-label={label} data-slot="filter-bar-select" className={className}>
         <SelectValue placeholder={placeholder ?? label} />
       </SelectTrigger>
       <SelectContent>
+        {hasAll && <SelectItem value={ALL_VALUE}>{allLabel}</SelectItem>}
         {options.map((option) => (
           <SelectItem key={option.value} value={option.value} disabled={option.disabled}>
             {option.label}
@@ -322,10 +344,14 @@ export interface FilterBarPresetProps {
   className?: string
 }
 
+/** Not given yet (a draft fills props in steps): render empty, keep the same value between renders. */
+const NO_FILTERS: never[] = []
+const NO_FILTER_VALUES: FilterValues = {}
+
 /** The whole row built from a `FilterConfig[]`. */
 export function FilterBarPreset({
-  filters,
-  value,
+  filters = NO_FILTERS,
+  value = NO_FILTER_VALUES,
   onChange,
   onClear,
   className,
@@ -340,6 +366,7 @@ export function FilterBarPreset({
               filterKey={filter.key}
               label={filter.label}
               placeholder={filter.placeholder}
+              allLabel={filter.allLabel}
               options={filter.options ?? []}
             />
           )