peter
17bb14fb18
- Combobox gains `error` (said in the list, not "No matches") and a soft `disabled` (keeps the focus, announced, opens and changes nothing). - UserPicker passes both: the share dialog's recipient picker is off while a share is pending, and the share and quota pickers say when the user list failed to load. - ChannelPicker and the Plex playlist/collection pickers say a failed load too. - The channel menu's Tags row says loading / failed instead of "no tags yet".
321 lines
14 KiB
TypeScript
321 lines
14 KiB
TypeScript
import clsx from "clsx";
|
||
import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
|
||
import { useTranslation } from "react-i18next";
|
||
import { Check, ChevronDown } from "lucide-react";
|
||
import { PopoverSurface, PopoverItem } from "./AnchoredPopover";
|
||
import { useAnchoredPopover } from "./anchoredPopoverHooks";
|
||
import { useScrollFade } from "../../lib/useScrollFade";
|
||
import { InnerInput } from "./Input";
|
||
import { DismissibleChip } from "./Chip";
|
||
import { fieldClass } from "./fieldStyles";
|
||
import { SURFACE } from "./surfaces";
|
||
|
||
// The universal combobox: a react-select / Overseerr-style "combi input" — selected values are
|
||
// removable chips that live INSIDE a text field you type into, and a checklist of options opens below.
|
||
// It is the ONE control for "pick value(s) from a (possibly large, possibly async) vocabulary": the E5
|
||
// Plex filters (genre / age-rating / studio, multi-select) and the collection picker (single-select,
|
||
// server-searched) are both instances, and the header search typeahead can move onto it later.
|
||
//
|
||
// All the fiddly parts live in the AnchoredPopover `combobox` mode, NOT here: floating-ui positioning,
|
||
// the paint-before-position + transform-clobber flash guards, the topmost-only Escape layer, and the
|
||
// FULL combobox ARIA tree (input role=combobox + aria-expanded/controls/activedescendant, listbox
|
||
// surface, option ids, virtual ↑/↓ arrow-nav that keeps the caret in the field). This component only
|
||
// adds the field chrome (chips + input + chevron), the query/selection state, and the big-vocabulary
|
||
// render cap. That is what makes it accessible where the old hand-rolled MultiSelectChips was not.
|
||
|
||
export interface ComboboxOption {
|
||
value: string;
|
||
/** Display text; defaults to `value`. */
|
||
label?: string;
|
||
/** A facet count shown at the row's end. */
|
||
count?: number;
|
||
disabled?: boolean;
|
||
}
|
||
|
||
export interface ComboboxProps {
|
||
/** Accessible name for the input (the section heading usually names it visibly too). */
|
||
label: string;
|
||
options: readonly ComboboxOption[];
|
||
/** Selected values. Single-select carries 0 or 1. */
|
||
selected: string[];
|
||
onChange: (next: string[]) => void;
|
||
/** Several values at once (chips accumulate) vs one (picking replaces + closes). Default true. */
|
||
multiple?: boolean;
|
||
/** Notified when the list opens/closes — a server-searched caller gates its fetch on `open`. */
|
||
onOpenChange?: (open: boolean) => void;
|
||
placeholder?: string;
|
||
/** Controlled query text — pass with `onQueryChange` for a server-searched (async) vocabulary; omit
|
||
* to let the combobox own the query state and filter `options` on the client. */
|
||
query?: string;
|
||
onQueryChange?: (q: string) => void;
|
||
/** Filter `options` by the query on the client (default). Set false when the caller already narrows
|
||
* the list server-side (then `options` arrives pre-filtered). */
|
||
clientFilter?: boolean;
|
||
loading?: boolean;
|
||
/** The options failed to load: said in the list instead of "No matches" (an error is not an empty
|
||
* result — E28 review J1). */
|
||
error?: string;
|
||
/** Takes no pick (e.g. the last one is still being written, J2). Soft, like `FocusSafeButton`: the
|
||
* field keeps the focus (a natively disabled one drops it to <body>), announced as unavailable. */
|
||
disabled?: boolean;
|
||
/** Shown when there are no options to list. */
|
||
emptyText?: string;
|
||
/** Cap on rendered rows for a huge vocabulary; the rest hide behind the search. Default 50. */
|
||
maxVisible?: number;
|
||
/** Custom row body (icon + label + count …); defaults to a checkbox + label + count. */
|
||
renderOption?: (option: ComboboxOption, isSelected: boolean) => ReactNode;
|
||
/** Chip/label text for a selected value whose option is not in the current (e.g. server-narrowed)
|
||
* list — the collection picker passes the stored title here so a reloaded filter still names itself. */
|
||
selectedLabels?: Record<string, string>;
|
||
}
|
||
|
||
export default function Combobox({
|
||
label,
|
||
options,
|
||
selected,
|
||
onChange,
|
||
multiple = true,
|
||
onOpenChange,
|
||
placeholder,
|
||
query: queryProp,
|
||
onQueryChange,
|
||
clientFilter = true,
|
||
loading = false,
|
||
error,
|
||
disabled = false,
|
||
emptyText,
|
||
maxVisible = 50,
|
||
renderOption,
|
||
selectedLabels,
|
||
}: ComboboxProps) {
|
||
const { t } = useTranslation();
|
||
const [open, setOpen] = useState(false);
|
||
// The query is controlled when the caller drives it (async search), else owned here.
|
||
const [queryState, setQueryState] = useState("");
|
||
const query = queryProp ?? queryState;
|
||
const setQuery = (q: string) => {
|
||
if (queryProp === undefined) setQueryState(q);
|
||
onQueryChange?.(q);
|
||
};
|
||
const inputRef = useRef<HTMLInputElement | null>(null);
|
||
const fade = useScrollFade();
|
||
|
||
// Remember each value's display label as options flow through, so a selected chip can name itself
|
||
// even after the option leaves the query-narrowed list (async single-select). Caller-supplied
|
||
// `selectedLabels` win (they survive a page reload where nothing has been fetched yet).
|
||
const labelCache = useRef<Record<string, string>>({});
|
||
useEffect(() => {
|
||
for (const o of options) if (o.label != null) labelCache.current[o.value] = o.label;
|
||
}, [options]);
|
||
const labelFor = (v: string) => selectedLabels?.[v] ?? labelCache.current[v] ?? v;
|
||
|
||
const setOpenAnd = (next: boolean) => {
|
||
if (next && disabled) return;
|
||
setOpen(next);
|
||
onOpenChange?.(next);
|
||
// Closing discards the typed query: the list is for "find and pick", and a leftover filter would
|
||
// hide everything worth seeing on the next open. It belongs HERE, not in an effect on `open`,
|
||
// because this is the single funnel every close goes through — floating-ui's dismiss, Escape and
|
||
// outside-click all arrive as onOpenChange, and the single-select commit calls it directly
|
||
// (verified: `setOpen` is called nowhere else). So the clear lands in the same commit as the
|
||
// close, and the controlled caller's onQueryChange fires once, from an event rather than a render.
|
||
if (!next) setQuery("");
|
||
};
|
||
const pop = useAnchoredPopover({ open, onOpenChange: setOpenAnd, mode: "combobox" });
|
||
// The input is the combobox reference for floating-ui AND our own focus target (the field's
|
||
// click-to-focus handler, and commit() re-focusing after a pick). A merged callback ref feeds the
|
||
// node to BOTH — without it `inputRef` stays null, so the field's onMouseDown guard (`e.target !==
|
||
// inputRef.current`) is always true and preventDefault() cancels the input's own click-focus, making
|
||
// the field impossible to type into with the mouse. Memoised so floating-ui's ref isn't re-attached
|
||
// every render.
|
||
const setInputRef = useCallback(
|
||
(node: HTMLInputElement | null) => {
|
||
pop.refs.setReference(node);
|
||
inputRef.current = node;
|
||
},
|
||
[pop.refs],
|
||
);
|
||
// `highlightIndex` = the row the user actually SEES highlighted (pointer hover, else keyboard); Enter
|
||
// commits THAT, not the bare keyboard `activeIndex` — otherwise arrow-then-hover-then-Enter would toggle
|
||
// a different option than the highlighted one, and a hover with no prior arrow (activeIndex still null)
|
||
// would make Enter a no-op over a highlighted row.
|
||
const { activeIndex, highlightIndex } = pop;
|
||
|
||
const filtered = useMemo(() => {
|
||
if (!clientFilter) return options;
|
||
const q = query.trim().toLowerCase();
|
||
if (!q) return options;
|
||
return options.filter((o) => (o.label ?? o.value).toLowerCase().includes(q));
|
||
}, [options, query, clientFilter]);
|
||
|
||
// Options arrive count-desc (facet order), so the capped default view is the most-common values; a
|
||
// footer flags how many more are reachable through the search.
|
||
const visible = filtered.slice(0, maxVisible);
|
||
const hiddenCount = filtered.length - visible.length;
|
||
|
||
const commit = (value: string) => {
|
||
if (disabled) return;
|
||
if (multiple) {
|
||
onChange(
|
||
selected.includes(value) ? selected.filter((x) => x !== value) : [...selected, value],
|
||
);
|
||
// Keep the field focused so the user can keep picking / typing; the list stays open.
|
||
inputRef.current?.focus();
|
||
} else {
|
||
// Single-select is final: close and DON'T re-focus — a refocus fires onFocus, which would
|
||
// immediately re-open the list (now that the merged ref makes focus() actually work).
|
||
onChange([value]);
|
||
setOpenAnd(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div>
|
||
{/* The field: removable chips + a free-text input + a chevron, styled as one input box. The whole
|
||
box is the POSITION anchor (the panel matches its width); the input is the combobox reference. */}
|
||
<div
|
||
ref={pop.refs.setPositionReference}
|
||
onMouseDown={(e) => {
|
||
// A press anywhere but the input (padding / a chip gap) focuses the field and opens the list —
|
||
// focus drives "open", so a caret click never toggles it shut. A press on a chip's × is its
|
||
// own control: it neither opens the list nor takes the focus (the × unmounts on the click,
|
||
// and a focused one would drop the focus to <body>).
|
||
if (e.target instanceof Element && e.target.closest("button")) {
|
||
e.preventDefault();
|
||
return;
|
||
}
|
||
if (e.target !== inputRef.current) {
|
||
e.preventDefault();
|
||
inputRef.current?.focus();
|
||
setOpenAnd(true);
|
||
}
|
||
}}
|
||
className={clsx(
|
||
fieldClass({ size: "free" }),
|
||
"flex min-h-8 w-full cursor-text flex-wrap items-center gap-1 px-1.5 py-0.5 text-sm",
|
||
disabled && "cursor-not-allowed opacity-50",
|
||
)}
|
||
>
|
||
{selected.map((v) => (
|
||
<DismissibleChip
|
||
key={v}
|
||
className="max-w-40"
|
||
onDismiss={() => !disabled && onChange(selected.filter((x) => x !== v))}
|
||
dismissLabel={t("common.removeNamed", { name: labelFor(v) })}
|
||
>
|
||
{labelFor(v)}
|
||
</DismissibleChip>
|
||
))}
|
||
<InnerInput
|
||
className="min-w-8 px-1 py-0.5"
|
||
ref={setInputRef}
|
||
{...pop.getReferenceProps({
|
||
onChange: (e) => {
|
||
setQuery((e.target as HTMLInputElement).value);
|
||
setOpenAnd(true);
|
||
},
|
||
onFocus: () => setOpenAnd(true),
|
||
onKeyDown: (e) => {
|
||
const idx = highlightIndex ?? activeIndex;
|
||
if (e.key === "Enter" && open && idx != null && visible[idx]) {
|
||
e.preventDefault(); // select the highlighted option, don't submit a surrounding form
|
||
if (!visible[idx].disabled) commit(visible[idx].value);
|
||
} else if (
|
||
e.key === "Backspace" &&
|
||
!disabled &&
|
||
query === "" &&
|
||
selected.length > 0
|
||
) {
|
||
// Backspace on an empty field removes the last chip (react-select behaviour).
|
||
onChange(selected.slice(0, -1));
|
||
}
|
||
},
|
||
})}
|
||
value={query}
|
||
readOnly={disabled}
|
||
aria-disabled={disabled || undefined}
|
||
aria-label={label}
|
||
placeholder={
|
||
selected.length === 0
|
||
? (placeholder ?? t("common.search", { defaultValue: "Search" }))
|
||
: ""
|
||
}
|
||
// min-w-8 (not -16): flex line-packing sizes the input at its MIN-width, so a wide 64px floor
|
||
// made a single chip + the reserved input + the chevron overflow a narrow rail field — wrapping
|
||
// the chevron to a second line while the (empty) input filled the first. A small floor keeps the
|
||
// chip + input + chevron on one line; flex-1 still grows the input to fill whatever room is left.
|
||
/>
|
||
<ChevronDown className="pointer-events-none mr-0.5 h-3.5 w-3.5 shrink-0 text-muted" />
|
||
</div>
|
||
|
||
<PopoverSurface
|
||
popover={pop}
|
||
ariaLabel={label}
|
||
className={`${SURFACE.menu} w-full animate-[popIn_0.16s_ease]`}
|
||
>
|
||
{/* The scroll box owns the height cap AND the scroll-fade mask (ref+style on the same element). */}
|
||
<div ref={fade.ref} style={fade.style} className="max-h-64 overflow-y-auto no-scrollbar">
|
||
{error && filtered.length === 0 ? (
|
||
<p role="alert" className="px-2 py-1.5 text-xs text-danger">
|
||
{error}
|
||
</p>
|
||
) : loading && filtered.length === 0 ? (
|
||
<p className="px-2 py-1.5 text-xs text-muted">{t("common.loading")}</p>
|
||
) : filtered.length === 0 ? (
|
||
<p className="px-2 py-1.5 text-xs text-muted">
|
||
{emptyText ?? t("common.noResults", { defaultValue: "No matches" })}
|
||
</p>
|
||
) : (
|
||
<>
|
||
{visible.map((o) => {
|
||
const on = selected.includes(o.value);
|
||
return (
|
||
<PopoverItem
|
||
key={o.value}
|
||
role="option"
|
||
selected={on}
|
||
disabled={o.disabled}
|
||
onSelect={() => commit(o.value)}
|
||
label={o.label ?? o.value}
|
||
className={`flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition ${
|
||
on ? "text-fg" : "text-muted"
|
||
}`}
|
||
>
|
||
{renderOption ? (
|
||
renderOption(o, on)
|
||
) : (
|
||
<>
|
||
<span
|
||
className={`flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded border ${
|
||
on ? "border-accent bg-accent text-accent-fg" : "border-border"
|
||
}`}
|
||
>
|
||
{on && <Check className="h-2.5 w-2.5" />}
|
||
</span>
|
||
<span className="flex-1 truncate">{o.label ?? o.value}</span>
|
||
{o.count != null && (
|
||
<span className="shrink-0 text-2xs tabular-nums text-muted">
|
||
{o.count}
|
||
</span>
|
||
)}
|
||
</>
|
||
)}
|
||
</PopoverItem>
|
||
);
|
||
})}
|
||
{hiddenCount > 0 && (
|
||
<p className="px-2 py-1.5 text-2xs text-muted">
|
||
{t("common.moreRefine", {
|
||
count: hiddenCount,
|
||
defaultValue: "{{count}} more — refine with search",
|
||
})}
|
||
</p>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
</PopoverSurface>
|
||
</div>
|
||
);
|
||
}
|