{\r\n field: F;\r\n filter: FilterValue;\r\n size: FilterSize;\r\n autoOpen: boolean;\r\n onValueChange: (value: unknown) => void;\r\n}\r\n\r\n/**\r\n * The value segment of a pill. Renders the control matching the field type,\r\n * or nothing when the operator's shape is `\"none\"` (`is empty`), so custom\r\n * chip compositions are correct without re-implementing that rule.\r\n */\r\nfunction FilterChipValue() {\r\n const { field, filter, size, autoOpen } = useFilterChip();\r\n const { updateFilter } = useFiltersActions();\r\n const onValueChange = React.useCallback(\r\n (nextValue: unknown) => updateFilter(filter.id, { value: nextValue }),\r\n [updateFilter, filter.id],\r\n );\r\n\r\n if (operatorShapeFor(field, filter.operator) === \"none\") return null;\r\n\r\n switch (field.type) {\r\n case \"select\":\r\n case \"multiselect\":\r\n return (\r\n \r\n );\r\n case \"text\":\r\n return (\r\n \r\n );\r\n case \"number\":\r\n return (\r\n \r\n );\r\n case \"custom\":\r\n return (\r\n \r\n {field.renderValue({\r\n value: filter.value,\r\n operator: filter.operator,\r\n onValueChange,\r\n size,\r\n field,\r\n })}\r\n
\r\n );\r\n default:\r\n return null;\r\n }\r\n}\r\n\r\n/** Accessible name for a value input, folding in string affixes (\"$\", \"hrs\"). */\r\nfunction valueAriaLabel(\r\n field: TextFilterField | NumberFilterField,\r\n part: string,\r\n): string {\r\n const affixes = [field.prefix, field.suffix].filter(\r\n (affix): affix is string => typeof affix === \"string\",\r\n );\r\n return [`${field.label} ${part}`, ...affixes].join(\" \");\r\n}\r\n\r\n// ----- Select / multiselect ----------------------------------------------\r\n\r\nconst VALUE_TRIGGER_CLASSES =\r\n \"text-foreground data-popup-open:bg-surface-hover rounded-none font-normal focus-visible:-outline-offset-2\";\r\n\r\nfunction OptionContent({ option }: { option: FilterOption }) {\r\n return (\r\n \r\n {option.icon}\r\n {option.label}\r\n \r\n );\r\n}\r\n\r\ninterface OptionsTriggerProps {\r\n size: FilterSize;\r\n icon?: React.ReactNode;\r\n text: string;\r\n isPlaceholder: boolean;\r\n /** Accessible name with field context, e.g. \"Status value: Done\". */\r\n \"aria-label\": string;\r\n}\r\n\r\n/** Shared ghost trigger for the single- and multi-select value popups. */\r\nfunction OptionsTrigger({\r\n size,\r\n icon,\r\n text,\r\n isPlaceholder,\r\n \"aria-label\": ariaLabel,\r\n}: OptionsTriggerProps) {\r\n return (\r\n (\r\n \r\n \r\n {icon}\r\n \r\n {text}\r\n \r\n \r\n \r\n )}\r\n />\r\n );\r\n}\r\n\r\n/**\r\n * The searchable popup shell shared by the value pickers and the add-filter\r\n * menu: bordered search header, empty state, and the option list.\r\n */\r\nfunction FilterSearchPopup({\r\n placeholder,\r\n empty,\r\n className,\r\n children,\r\n}: {\r\n placeholder: string;\r\n empty: React.ReactNode;\r\n className?: string;\r\n children: React.ComponentProps[\"children\"];\r\n}) {\r\n return (\r\n \r\n \r\n \r\n
\r\n {empty}\r\n {children}\r\n \r\n );\r\n}\r\n\r\nfunction OptionsPopup({\r\n children,\r\n}: {\r\n children: React.ComponentProps[\"children\"];\r\n}) {\r\n const { labels } = useFiltersActions();\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n}\r\n\r\n/** Value control for `select` and `multiselect` fields. */\r\nfunction OptionsValueControl({\r\n field,\r\n filter,\r\n size,\r\n autoOpen,\r\n onValueChange,\r\n}: ValueControlProps) {\r\n const { labels } = useFiltersActions();\r\n // Capture once at mount so the uncontrolled open state never changes.\r\n const [initialOpen] = React.useState(autoOpen);\r\n const placeholder = field.placeholder ?? labels.selectValue;\r\n\r\n if (field.type === \"multiselect\") {\r\n const values = asStringArray(filter.value);\r\n const selected = field.options.filter((option) =>\r\n values.includes(option.value),\r\n );\r\n const atMax =\r\n field.maxSelections != null && values.length >= field.maxSelections;\r\n const display =\r\n selected.length === 0\r\n ? placeholder\r\n : selected.length === 1\r\n ? selected[0].label\r\n : `${selected[0].label} +${selected.length - 1}`;\r\n\r\n return (\r\n \r\n items={field.options}\r\n multiple\r\n value={selected}\r\n defaultOpen={initialOpen}\r\n onValueChange={(next) => {\r\n // Reject selections past the cap; the controlled value snaps back.\r\n if (\r\n field.maxSelections != null &&\r\n next.length > field.maxSelections\r\n ) {\r\n return;\r\n }\r\n onValueChange(next.map((option) => option.value));\r\n }}\r\n itemToStringLabel={(option) => option.label}\r\n >\r\n \r\n \r\n {(option: FilterOption) => (\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n );\r\n }\r\n\r\n const selected =\r\n field.options.find((option) => option.value === filter.value) ?? null;\r\n\r\n return (\r\n \r\n items={field.options}\r\n value={selected}\r\n defaultOpen={initialOpen}\r\n onValueChange={(next) => onValueChange(next ? next.value : null)}\r\n itemToStringLabel={(option) => option.label}\r\n >\r\n \r\n \r\n {(option: FilterOption) => (\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n );\r\n}\r\n\r\n// ----- Text / number ------------------------------------------------------\r\n\r\n/**\r\n * The value segment wrapper for inline inputs. Owns the `filter-chip-value`\r\n * slot and flanks the input with muted prefix/suffix text (e.g. `$`, `%`).\r\n */\r\nfunction ValueSegment({\r\n prefix,\r\n suffix,\r\n children,\r\n}: {\r\n prefix?: React.ReactNode;\r\n suffix?: React.ReactNode;\r\n children: React.ReactNode;\r\n}) {\r\n return (\r\n \r\n {prefix ? (\r\n \r\n {prefix}\r\n \r\n ) : null}\r\n {children}\r\n {suffix ? (\r\n \r\n {suffix}\r\n \r\n ) : null}\r\n \r\n );\r\n}\r\n\r\nfunction TextValueControl({\r\n field,\r\n filter,\r\n size,\r\n autoOpen,\r\n onValueChange,\r\n}: ValueControlProps) {\r\n const { labels } = useFiltersActions();\r\n return (\r\n \r\n onValueChange(event.target.value)}\r\n />\r\n \r\n );\r\n}\r\n\r\nfunction NumberValueField({\r\n value,\r\n size,\r\n step,\r\n placeholder,\r\n autoFocus,\r\n prefix,\r\n suffix,\r\n \"aria-label\": ariaLabel,\r\n onValueChange,\r\n}: {\r\n value: number | null;\r\n size: FilterSize;\r\n step?: number;\r\n placeholder?: string;\r\n autoFocus?: boolean;\r\n prefix?: React.ReactNode;\r\n suffix?: React.ReactNode;\r\n \"aria-label\": string;\r\n onValueChange: (value: number | null) => void;\r\n}) {\r\n // Base UI's NumberField.Input is a text input with numeric semantics (no\r\n // native spinner) and handles parsing, arrow-key stepping, and clamping.\r\n // `allowWheelScrub` lets the wheel adjust the value while the input is\r\n // focused and hovered (it won't hijack ordinary page scrolling).\r\n return (\r\n \r\n onValueChange(next)}\r\n className={cn(\"flex flex-none items-center\", FILTER_SIZES[size].height)}\r\n >\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nfunction NumberValueControl({\r\n field,\r\n filter,\r\n size,\r\n autoOpen,\r\n onValueChange,\r\n}: ValueControlProps) {\r\n const { labels } = useFiltersActions();\r\n\r\n if (operatorShapeFor(field, filter.operator) === \"range\") {\r\n const range = asNumberRange(filter.value);\r\n return (\r\n <>\r\n onValueChange({ ...range, min })}\r\n />\r\n onValueChange({ ...range, max })}\r\n />\r\n \r\n );\r\n }\r\n\r\n return (\r\n \r\n );\r\n}\r\n\r\nexport { FilterChipValue, FilterSearchPopup };\r\n",
"type": "registry:ui",
"target": "components/ui/cubby-ui/filters/filters-value-controls.tsx"
}
],
"type": "registry:ui"
}