"use client"; import { useId, useMemo, useState } from "react"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@/components/registry/primitives/core/accordion"; import { Badge } from "@/components/registry/primitives/core/badge"; import { Button } from "@/components/registry/primitives/core/button"; import { Checkbox } from "@/components/registry/primitives/core/checkbox"; import { Input } from "@/components/registry/primitives/core/input"; import { Label } from "@/components/registry/primitives/core/label"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/registry/primitives/core/popover"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/registry/primitives/core/select"; import { Slider } from "@/components/registry/primitives/core/slider"; import { cn } from "@/lib/registry/cn"; import type { SearchFacet } from "./types"; export type FacetListVariant = | "default" | "compact" | "products-pills-select" | "search-facets-card" | "search-facets-muted" | "search-facets-facets" | "search-facets-panel"; export interface FacetListProps { facets: SearchFacet[]; selectedValues?: Record>; selectedRanges?: Record; onValueToggle?: ( facetId: string, valueId: string, nextChecked: boolean, ) => void; onRangeChange?: ( facetId: string, nextRange: { min: number; max: number }, ) => void; variant?: FacetListVariant; showFacetLabels?: boolean; defaultOpenFacetIds?: string[]; className?: string; } export interface FacetFilterControlProps { facets: SearchFacet[]; buttonLabel?: string; facetListVariant?: FacetListVariant; selectedValues?: Record>; selectedRanges?: Record; onValueToggle?: ( facetId: string, valueId: string, nextChecked: boolean, ) => void; onRangeChange?: ( facetId: string, nextRange: { min: number; max: number }, ) => void; onOpen?: () => void; onRemoveChip?: (id: string) => void; onClear?: () => void; className?: string; popoverClassName?: string; } const getFacetBounds = (facet: SearchFacet): { min: number; max: number } => { const mins = facet.values .map((value) => value.min) .filter((value): value is number => typeof value === "number"); const maxes = facet.values .map((value) => value.max) .filter((value): value is number => typeof value === "number"); const min = mins.length ? Math.min(...mins) : 0; const max = maxes.length ? Math.max(...maxes) : 100; return { min, max: Math.max(max, min) }; }; const clampRange = ( nextRange: { min: number; max: number }, bounds: { min: number; max: number }, ) => { const clampedMin = Math.min(Math.max(nextRange.min, bounds.min), bounds.max); const clampedMax = Math.min(Math.max(nextRange.max, bounds.min), bounds.max); return { min: Math.min(clampedMin, clampedMax), max: Math.max(clampedMin, clampedMax), }; }; const COLOR_NAME_TO_HEX: Record = { black: "#111111", white: "#ffffff", gray: "#6b7280", grey: "#6b7280", red: "#dc2626", orange: "#ea580c", yellow: "#ca8a04", green: "#16a34a", blue: "#2563eb", indigo: "#4f46e5", purple: "#7c3aed", pink: "#db2777", brown: "#7c4a2d", silver: "#9ca3af", gold: "#ca8a04", }; const inferSwatch = (text: string): string | undefined => { const value = text.trim().toLowerCase(); if (/^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(value)) return value; if (value.startsWith("rgb(") || value.startsWith("rgba(")) return value; if (value.startsWith("hsl(") || value.startsWith("hsla(")) return value; return COLOR_NAME_TO_HEX[value]; }; type FacetChip = | { id: string; label: string; facetId: string; valueId: string; kind: "value"; swatch?: string; } | { id: string; label: string; facetId: string; kind: "range" }; const buildValueChips = ( facets: SearchFacet[], selectedValues: Record>, ): FacetChip[] => { const chips: FacetChip[] = []; for (const facet of facets) { const selectedSet = selectedValues[facet.id]; if (!selectedSet || selectedSet.size === 0) continue; for (const value of facet.values) { if (!selectedSet.has(value.id)) continue; const swatch = value.swatch ?? inferSwatch(value.text); chips.push({ id: `${facet.id}:${value.id}`, label: `${facet.label}: ${value.text}`, facetId: facet.id, valueId: value.id, kind: "value", ...(swatch !== undefined ? { swatch } : {}), }); } } return chips; }; const buildRangeChips = ( facets: SearchFacet[], selectedRanges: Record, ): FacetChip[] => { const chips: FacetChip[] = []; for (const facet of facets) { if (facet.type !== "range") continue; const current = selectedRanges[facet.id]; if (!current) continue; const bounds = getFacetBounds(facet); if (current.min === bounds.min && current.max === bounds.max) continue; chips.push({ id: `${facet.id}:range`, label: `${facet.label}: ${current.min} - ${current.max}`, facetId: facet.id, kind: "range", }); } return chips; }; type ValueToggle = (facetId: string, valueId: string, checked: boolean) => void; function ProductsPillsSelectBody({ facet, idBase: _idBase, selectedValues, onValueToggle, }: { facet: SearchFacet; idBase: string; selectedValues?: Record>; onValueToggle?: ValueToggle; }) { const selectedSet = selectedValues?.[facet.id] ?? new Set(); const selectedValueId = Array.from(selectedSet)[0] ?? "__all__"; const optionValues = [ { id: "__all__", text: "All", count: undefined as number | undefined }, ...facet.values, ]; const selectOne = (nextValue: string) => { for (const valueId of selectedSet) { onValueToggle?.(facet.id, valueId, false); } if (nextValue !== "__all__") { onValueToggle?.(facet.id, nextValue, true); } }; return (

{optionValues.map((value) => { const isActive = value.id === "__all__" ? selectedSet.size === 0 : selectedSet.has(value.id); return ( ); })}

); } function SizeInlineBody({ facet, idBase, selectedValues, onValueToggle, }: { facet: SearchFacet; idBase: string; selectedValues?: Record>; onValueToggle?: ValueToggle; }) { return (

{facet.values.map((value) => { const isChecked = selectedValues?.[facet.id]?.has(value.id) ?? false; const checkboxId = `${idBase}-${facet.id}-${value.id}`; return ( onValueToggle?.(facet.id, value.id, Boolean(checked)) } /> {value.text} ); })}

); } function ColorCirclesBody({ facet, idBase, selectedValues, onValueToggle, }: { facet: SearchFacet; idBase: string; selectedValues?: Record>; onValueToggle?: ValueToggle; }) { return (

{facet.values.map((value) => { const isChecked = selectedValues?.[facet.id]?.has(value.id) ?? false; const checkboxId = `${idBase}-${facet.id}-${value.id}`; const swatch = value.swatch ?? inferSwatch(value.text) ?? "#9ca3af"; return ( onValueToggle?.(facet.id, value.id, Boolean(checked)) } /> ); })}

); } function DefaultListBody({ facet, idBase, selectedValues, onValueToggle, isCompact, isSearchFacetsPanelVariant, isSearchFacetsVariant, }: { facet: SearchFacet; idBase: string; selectedValues?: Record>; onValueToggle?: ValueToggle; isCompact: boolean; isSearchFacetsPanelVariant: boolean; isSearchFacetsVariant: boolean; }) { return (

); } /** * Shared facet list UI for rendering list-type facet values with checkboxes. */ export function FacetList({ facets, selectedValues, selectedRanges, onValueToggle, onRangeChange, variant = "default", showFacetLabels = true, defaultOpenFacetIds, className, }: FacetListProps) { const idBase = useId(); const isCompact = variant === "compact"; const isSearchFacetsFacetsVariant = variant === "search-facets-facets" || variant === "search-facets-card"; const isSearchFacetsPanelVariant = variant === "search-facets-panel" || variant === "search-facets-muted"; const isProductsPillsSelectVariant = variant === "products-pills-select"; const isSearchFacetsMutedVariant = variant === "search-facets-panel" || variant === "search-facets-muted"; const isSearchFacetsVariant = isSearchFacetsFacetsVariant || isSearchFacetsPanelVariant; const [localRanges, setLocalRanges] = useState< Record >({}); const getCurrentRange = (facet: SearchFacet) => { const bounds = getFacetBounds(facet); return selectedRanges?.[facet.id] ?? localRanges[facet.id] ?? bounds; }; const updateRange = ( facet: SearchFacet, nextRange: { min: number; max: number }, ) => { const bounds = getFacetBounds(facet); const normalizedRange = clampRange(nextRange, bounds); setLocalRanges((prev) => ({ ...prev, [facet.id]: normalizedRange, })); onRangeChange?.(facet.id, normalizedRange); }; const renderFacetBody = (facet: SearchFacet) => { if (facet.type === "range") { const bounds = getFacetBounds(facet); const currentRange = getCurrentRange(facet); return (

Min { const nextMin = Number(event.target.value); if (Number.isNaN(nextMin)) return; updateRange(facet, { min: nextMin, max: currentRange.max, }); }} />

Max { const nextMax = Number(event.target.value); if (Number.isNaN(nextMax)) return; updateRange(facet, { min: currentRange.min, max: nextMax, }); }} />

{ updateRange(facet, { min: nextValue[0] ?? bounds.min, max: nextValue[1] ?? bounds.max, }); }} />

); } const displayMode = facet.display ?? (facet.values.some((value) => value.swatch || inferSwatch(value.text)) ? "color-circles" : "default"); if (isProductsPillsSelectVariant) { return ( ); } if (displayMode === "size-inline") { return ( ); } if (displayMode === "color-circles") { return ( ); } return ( ); }; if (isSearchFacetsVariant) { return ( {facets.map((facet) => ( {facet.label}

{renderFacetBody(facet)}

))} ); } return (

{facets.map((facet) => (

{showFacetLabels ? (

{facet.label}

) : null} {renderFacetBody(facet)}

))}

); } /** * Interactive facet filter control with trigger button, popover, chips, and clear actions. */ export function FacetFilterControl({ facets, buttonLabel = "Filter", facetListVariant = "compact", selectedValues: controlledSelectedValues, selectedRanges: controlledSelectedRanges, onValueToggle, onRangeChange, onOpen, onRemoveChip, onClear, className, popoverClassName, }: FacetFilterControlProps) { const [isOpen, setIsOpen] = useState(false); const [selectedValuesState, setSelectedValuesState] = useState< Record> >({}); const [selectedRangesState, setSelectedRangesState] = useState< Record >({}); const resolvedSelectedValues = controlledSelectedValues ?? selectedValuesState; const resolvedSelectedRanges = controlledSelectedRanges ?? selectedRangesState; const isControlled = Boolean( controlledSelectedValues || controlledSelectedRanges, ); const chips = useMemo( () => [ ...buildValueChips(facets, resolvedSelectedValues), ...buildRangeChips(facets, resolvedSelectedRanges), ], [facets, resolvedSelectedRanges, resolvedSelectedValues], ); const updateFacetValue = ( facetId: string, valueId: string, nextChecked: boolean, ) => { if (isControlled) { onValueToggle?.(facetId, valueId, nextChecked); return; } setSelectedValuesState((prev) => { const next = { ...prev }; const set = new Set(next[facetId] ?? []); if (nextChecked) { set.add(valueId); } else { set.delete(valueId); } if (set.size === 0) { delete next[facetId]; } else { next[facetId] = set; } return next; }); }; const removeChip = (facetId: string, valueId: string, chipId: string) => { if (isControlled) { if (valueId === "__range__") { const facet = facets.find((entry) => entry.id === facetId); const bounds = facet ? getFacetBounds(facet) : { min: 0, max: 0 }; onRangeChange?.(facetId, bounds); } else { onValueToggle?.(facetId, valueId, false); } onRemoveChip?.(chipId); return; } if (valueId === "__range__") { setSelectedRangesState((prev) => { const next = { ...prev }; delete next[facetId]; return next; }); } else { setSelectedValuesState((prev) => { const next = { ...prev }; const set = new Set(next[facetId] ?? []); set.delete(valueId); if (set.size === 0) { delete next[facetId]; } else { next[facetId] = set; } return next; }); } onRemoveChip?.(chipId); }; const clearAll = () => { if (isControlled) { onClear?.(); return; } setSelectedValuesState({}); setSelectedRangesState({}); onClear?.(); }; return (

{ if (isControlled) { onRangeChange?.(facetId, nextRange); return; } setSelectedRangesState((prev) => ({ ...prev, [facetId]: nextRange, })); }} variant={facetListVariant} showFacetLabels />

{chips.map((chip) => ( ))} {chips.length > 0 ? ( ) : null}

); } export default FacetList;

Facet List

Showcase

Facet List