@seekalfred/primitives 0.6.0 → 0.7.3

package/dist/filter-bar/filter-bar.js

@@ -1,21 +1,22 @@
 "use client";
 import { cn, cnAll } from "../lib/cn.js";
 import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect, useMorphWidth } from "../lib/motion.js";
-import { Button } from "../button/button.js";
+import { Button as Button$1 } from "../button/button.js";
 import { SwapText } from "../lib/swap-text.js";
 import { useHeightFollow } from "../lib/height-follow.js";
-import { Badge } from "../badge/badge.js";
-import { Popover, PopoverTrigger } from "../popover/popover.js";
+import { useMenuHighlight } from "../lib/menu-highlight.js";
+import { MenuItem as MenuItem$1, menuVariants } from "../menu/menu.js";
+import { Popover as Popover$1, PopoverTrigger } from "../popover/popover.js";
 import { useLeavingList } from "../lib/leaving-list.js";
-import { Select, SelectItem } from "../select/select.js";
 import { cva } from "class-variance-authority";
 import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { Menu } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/filter-bar/filter-bar.tsx
 /**
-* FilterBar -- a list toolbar that keeps the controls people use every time
-* in the row and puts every other dropdown filter behind ONE "Filters"
-* button.
+* FilterBar -- a filter toolbar: one pill that shows what is filtered as
+* removable chips ("No filters applied" while nothing is), with an "Add filter"
+* button that opens a menu of the filters.
 *
 * Why it exists: list screens grew a row of four to seven dropdowns beside
 * the search box and the status tabs. At desktop width that row wraps onto a
@@ -23,28 +24,40 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * line and makes what IS filtered visible as chips instead of as the
 * resting text of a dropdown.
 *
-* Three regions:
+* Three regions, all inside the one pill:
 *
-* - `inline`: always in the row, at its start (status tabs, the search box).
-* - the Filters button: a popover with a one-column form, one full-width
-*   Select per filter with its label above. The button carries a count badge
-*   of the filters that are set.
-* - `end`: always in the row, at its end (a count, Export, a view toggle).
+* - `inline`: always in the pill, at its start (status tabs, a search box).
+* - the chips, then "Clear all" once any filter is set; or the empty note.
+* - the Add filter button, then `end`: always in the pill, at its end (a
+*   count, Export, a view toggle).
 *
-* While any filter is set, a list of chips sits under the row, each reading
-* "Label: option label" with its own remove button, plus "Clear all".
+* The button opens a menu of the filters: each row is the filter's icon and
+* name, the value it holds now, and a chevron. A row opens that filter's own
+* options in the same panel (a back button returns to the list); choosing an
+* option sets the filter and closes the menu. A custom filter shows its own
+* control in that step.
 *
 * The bar holds NO filter state. Every value and every change belongs to the
 * caller: removing a chip hands the filter's `emptyValue` back to its
 * `onChange`; Clear all does that for each set filter, or calls
 * `onClearAll` when the caller resets its filters in one step.
 *
-* Accessibility comes from the parts: the popover is a dialog named by its
-* trigger, the trigger carries `aria-expanded`, focus moves into the popover
-* and is contained there, Escape closes it and focus returns to the trigger.
+* Accessibility comes from the parts: the panel is a dialog named by its
+* trigger, the trigger carries `aria-expanded`, focus moves into the panel and
+* is contained there, Escape closes it and focus returns to the trigger, and
+* each list is a real menu with arrow keys and type-ahead. Removing a chip, by
+* keyboard or pointer, moves focus to the chip that takes its place (the one
+* before it when it was last); removing the last chip, or Clear all, moves it to
+* the Add filter button.
 */
-const filterBarVariants = cva(["flex flex-col gap-2 box-border font-sans"]);
-const filterBarRowVariants = cva(["flex flex-wrap items-center gap-2"]);
+/** The toolbar: one pill with a light border on the surface. */
+const filterBarVariants = cva([
+	"flex flex-wrap items-center gap-x-3 gap-y-2 rounded-full",
+	"border-(length:--border-width) border-border bg-surface",
+	"px-4 py-2 box-border font-sans"
+]);
+/** The group at the pill's end: the Add filter button and the caller's `end`. */
+const filterBarRowVariants = cva(["ms-auto flex flex-wrap items-center gap-2"]);
 const filterBarChipVariants = cva([
 	"inline-flex items-center gap-1 rounded-full",
 	"border-(length:--border-width) border-border bg-muted",
@@ -52,43 +65,28 @@ const filterBarChipVariants = cva([
 	"box-border font-sans"
 ]);
 const isCustom = (f) => "render" in f;
+/** What a filter holds now, for its menu row and its chip: `null` while it is not set. */
+function valueOf(f) {
+	if (isCustom(f)) return f.activeLabel;
+	if (f.value == null || f.value === f.emptyValue) return null;
+	const option = f.options.find((o) => o.id === f.value);
+	return option ? option.label : String(f.value);
+}
 /** The set filters, each with its chip text and how to unset it. */
 function chipsFor(filters) {
 	const chips = [];
 	for (const f of filters) {
-		if (isCustom(f)) {
-			if (f.activeLabel != null) chips.push({
-				id: f.id,
-				text: `${f.label}: ${f.activeLabel}`,
-				clear: f.onClear
-			});
-			continue;
-		}
-		if (f.value == null || f.value === f.emptyValue) continue;
-		const option = f.options.find((o) => o.id === f.value);
+		const value = valueOf(f);
+		if (value == null) continue;
 		chips.push({
 			id: f.id,
-			text: `${f.label}: ${option ? option.label : String(f.value)}`,
-			clear: () => f.onChange(f.emptyValue)
+			text: `${f.label}: ${value}`,
+			clear: isCustom(f) ? f.onClear : () => f.onChange(f.emptyValue)
 		});
 	}
 	return chips;
 }
-/** A funnel, drawn inline: this package ships no icon dependency. */
-function FunnelGlyph() {
-	return /* @__PURE__ */ jsx("svg", {
-		viewBox: "0 0 16 16",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "1.5",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("path", {
-			d: "M2 3h12M4.5 8h7M7 13h2",
-			strokeLinecap: "round"
-		})
-	});
-}
-function CrossGlyph() {
+function Glyph({ path }) {
 	return /* @__PURE__ */ jsx("svg", {
 		viewBox: "0 0 16 16",
 		fill: "none",
@@ -96,20 +94,25 @@ function CrossGlyph() {
 		strokeWidth: "1.5",
 		"aria-hidden": "true",
 		children: /* @__PURE__ */ jsx("path", {
-			d: "M4 4l8 8M12 4l-8 8",
-			strokeLinecap: "round"
+			d: path,
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
 		})
 	});
 }
+const PlusGlyph = () => /* @__PURE__ */ jsx(Glyph, { path: "M8 3v10M3 8h10" });
+const CrossGlyph = () => /* @__PURE__ */ jsx(Glyph, { path: "M4 4l8 8M12 4l-8 8" });
+const ChevronRightGlyph = () => /* @__PURE__ */ jsx(Glyph, { path: "M6 3l5 5-5 5" });
+const ChevronLeftGlyph = () => /* @__PURE__ */ jsx(Glyph, { path: "M10 3 5 8l5 5" });
+const CheckGlyph = () => /* @__PURE__ */ jsx(Glyph, { path: "M3 8.5l3.5 3.5L13 4.5" });
 /**
-* A list toolbar with its dropdown filters behind one Filters button.
+* A list toolbar with its filters behind one Add filter button.
 *
 * @example
 * <FilterBar
-*   inline={<SearchField aria-label="Search" />}
 *   end={<Button>Export</Button>}
-*   filters={[{ id: "region", label: "Region", value, emptyValue: "all", onChange: setValue,
-*     options: [{ id: "all", label: "All regions" }, { id: "nsw", label: "NSW" }] }]}
+*   filters={[{ id: "status", label: "Status", icon: <StatusIcon aria-hidden />, value, emptyValue: "all",
+*     onChange: setValue, options: [{ id: "all", label: "Any status" }, { id: "open", label: "Open" }] }]}
 * />
 */
 /**
@@ -140,6 +143,23 @@ function Slot({ leaving, ready, onDone, id, children }) {
 		children
 	});
 }
+/**
+* A chip's remove button. It registers itself with the bar under its chip's id
+* through a ref callback that stays the same across renders, so React does not
+* detach and re-attach it on every commit.
+*/
+function ChipRemove({ id, label, register, onPress }) {
+	const ref = useCallback((node) => register(id, node), [register, id]);
+	return /* @__PURE__ */ jsx(Button$1, {
+		ref,
+		variant: "ghost",
+		size: "sm",
+		"aria-label": label,
+		onPress,
+		className: "h-6 rounded-full px-1 data-[focus-visible]:-outline-offset-(--focus-ring-width)",
+		children: /* @__PURE__ */ jsx(CrossGlyph, {})
+	});
+}
 /** A chip's text: a changed value swaps (the new text rises in) and the chip's width springs to it. */
 function ChipText({ text }) {
 	const content = useRef(null);
@@ -157,7 +177,154 @@ function ChipText({ text }) {
 		})
 	});
 }
-const FilterBar = forwardRef(function FilterBar({ inline, end, filters, onClearAll, buttonLabel = "Filters", clearAllLabel = "Clear all", doneLabel = "Done", chipsLabel = "Filters set", removeLabel = (text) => `Remove filter ${text}`, className }, ref) {
+/** A filter's icon, drawn at the control icon size in the secondary ink. */
+function RowIcon({ icon }) {
+	return icon ? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "inline-flex text-text-secondary",
+		children: icon
+	}) : null;
+}
+/** The note for no filters. Arriving after the first render (the last chip has gone) it fades in; at first render it does not. */
+function EmptyNote({ ready, children }) {
+	const [fresh] = useState(ready);
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "filter-bar-empty",
+		className: cn("text-sm text-text-secondary" + (fresh ? " motion-safe:animate-fade-in" : "")),
+		children
+	});
+}
+const STEP = "motion-safe:animate-filter-step-in motion-reduce:animate-fade-in";
+/**
+* The Add filter menu's panel, in two steps: the list of filters, then the
+* chosen filter's options (or its own control). A step arrives from the side it
+* was reached from; the first one, on open, does not animate by itself (the
+* popover grows from the button instead).
+*/
+function FilterPanel({ filters, label, backLabel, onClose }) {
+	const [fieldId, setFieldId] = useState(null);
+	const [dir, setDir] = useState(null);
+	const [returnTo, setReturnTo] = useState(null);
+	const listRef = useRef(null);
+	const bindFields = useMenuHighlight();
+	const bindOptions = useMenuHighlight();
+	const field = filters.find((f) => f.id === fieldId) ?? null;
+	useEffect(() => {
+		if (field || returnTo === null) return;
+		const id = returnTo;
+		let frame = 0;
+		let tries = 0;
+		const focusRow = () => {
+			const row = Array.from(listRef.current?.querySelectorAll("[data-slot='menu-item']") ?? []).find((node) => node.dataset.key === id);
+			if (row) row.focus();
+			else if (tries++ < 20) frame = requestAnimationFrame(focusRow);
+		};
+		focusRow();
+		return () => cancelAnimationFrame(frame);
+	}, [field, returnTo]);
+	const open = (id) => {
+		setDir(1);
+		setFieldId(String(id));
+	};
+	const back = () => {
+		if (!field) return;
+		setReturnTo(field.id);
+		setDir(-1);
+		setFieldId(null);
+	};
+	const stepClass = dir === null ? "" : cn(STEP + (dir === 1 ? " [--step-dir:1]" : " [--step-dir:-1]"));
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "filter-bar-panel",
+		className: "overflow-x-clip",
+		children: field ? /* @__PURE__ */ jsxs("div", {
+			className: stepClass,
+			onKeyDown: (event) => {
+				if (event.key === "ArrowLeft" && !isCustom(field)) {
+					event.preventDefault();
+					back();
+				}
+			},
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1 px-1 pb-1",
+				children: [/* @__PURE__ */ jsx(Button$1, {
+					variant: "ghost",
+					size: "icon",
+					"aria-label": backLabel,
+					onPress: back,
+					className: "size-8 flex-none rounded-full",
+					children: /* @__PURE__ */ jsx(ChevronLeftGlyph, {})
+				}), /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 truncate text-sm font-medium text-foreground",
+					children: field.label
+				})]
+			}), isCustom(field) ? /* @__PURE__ */ jsx("div", {
+				className: "p-1.5",
+				children: field.render()
+			}) : /* @__PURE__ */ jsx(Menu, {
+				ref: bindOptions,
+				"aria-label": field.label,
+				"data-slot": "filter-bar-options",
+				autoFocus: "first",
+				selectionMode: "single",
+				disallowEmptySelection: true,
+				selectedKeys: field.value == null ? [] : [field.value],
+				onAction: (key) => {
+					field.onChange(key);
+					onClose();
+				},
+				className: menuVariants(),
+				children: field.options.map((o) => /* @__PURE__ */ jsxs(MenuItem$1, {
+					id: o.id,
+					textValue: o.label,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate",
+						children: o.label
+					}), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: o.id === field.value ? "inline-flex text-foreground" : "inline-flex text-foreground opacity-0",
+						children: /* @__PURE__ */ jsx(CheckGlyph, {})
+					})]
+				}, o.id))
+			})]
+		}, field.id) : /* @__PURE__ */ jsx("div", {
+			ref: listRef,
+			className: stepClass,
+			children: /* @__PURE__ */ jsx(Menu, {
+				ref: bindFields,
+				"aria-label": label,
+				"data-slot": "filter-bar-fields",
+				autoFocus: returnTo === null ? "first" : false,
+				onAction: open,
+				onClose: () => {},
+				className: menuVariants(),
+				children: filters.map((f) => {
+					const value = valueOf(f);
+					return /* @__PURE__ */ jsxs(MenuItem$1, {
+						id: f.id,
+						textValue: f.label,
+						children: [
+							/* @__PURE__ */ jsx(RowIcon, { icon: f.icon }),
+							/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 flex-1 truncate",
+								children: f.label
+							}),
+							value ? /* @__PURE__ */ jsx("span", {
+								className: "max-w-24 truncate text-xs text-text-secondary",
+								children: value
+							}) : null,
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "inline-flex text-text-secondary",
+								children: /* @__PURE__ */ jsx(ChevronRightGlyph, {})
+							})
+						]
+					}, f.id);
+				})
+			})
+		}, "fields")
+	});
+}
+const FilterBar = forwardRef(function FilterBar({ inline, end, filters, onClearAll, buttonLabel = "Add filter", clearAllLabel = "Clear all", emptyLabel = "No filters applied", chipsLabel = "Filters set", removeLabel = (text) => `Remove filter ${text}`, backLabel = "Back to filters", className }, ref) {
 	const [open, setOpen] = useState(false);
 	const chips = chipsFor(filters);
 	const [ready, setReady] = useState(false);
@@ -174,8 +341,30 @@ const FilterBar = forwardRef(function FilterBar({ inline, end, filters, onClearA
 	}] : []]);
 	const frame = useRef(null);
 	const row = useRef(null);
-	useHeightFollow(frame, row, chips.map((chip) => chip.id).join());
+	const chipKey = chips.map((chip) => chip.id).join();
+	useHeightFollow(frame, row, chipKey);
+	const removeButtons = useRef(/* @__PURE__ */ new Map());
+	const registerRemove = useCallback((id, node) => {
+		if (node) removeButtons.current.set(id, node);
+		else removeButtons.current.delete(id);
+	}, []);
+	const addButton = useRef(null);
+	const focusAfter = useRef(null);
+	const noteFocusAfter = (after) => {
+		focusAfter.current = after;
+		requestAnimationFrame(() => {
+			if (focusAfter.current === after) focusAfter.current = null;
+		});
+	};
+	useIsomorphicLayoutEffect(() => {
+		const after = focusAfter.current;
+		if (after === null) return;
+		focusAfter.current = null;
+		const next = after === "add" || chips.length === 0 ? null : chips[Math.min(after, chips.length - 1)];
+		(next ? removeButtons.current.get(next.id) : addButton.current)?.focus();
+	}, [chipKey]);
 	const clearAll = () => {
+		noteFocusAfter("add");
 		if (onClearAll) onClearAll();
 		else for (const c of chips) c.clear();
 	};
@@ -183,115 +372,86 @@ const FilterBar = forwardRef(function FilterBar({ inline, end, filters, onClearA
 		ref,
 		"data-slot": "filter-bar",
 		className: cn(filterBarVariants(), className),
-		children: [/* @__PURE__ */ jsxs("div", {
-			"data-slot": "filter-bar-row",
-			className: filterBarRowVariants(),
-			children: [
-				inline,
-				filters.length > 0 ? /* @__PURE__ */ jsxs(PopoverTrigger, {
+		children: [
+			inline ? /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: inline
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				"data-slot": "filter-bar-chips-area",
+				className: "flex min-h-(--density-control-h-sm) min-w-0 flex-[1_1_8rem] items-center",
+				children: places.list.length > 0 ? /* @__PURE__ */ jsx("div", {
+					ref: frame,
+					"data-slot": "filter-bar-chips-frame",
+					className: "height-follow min-w-0",
+					children: /* @__PURE__ */ jsx("ul", {
+						ref: row,
+						"aria-label": chipsLabel,
+						"data-slot": "filter-bar-chips",
+						className: "m-0 flex list-none flex-wrap items-center gap-2 p-0",
+						children: places.list.map(({ item, leaving }) => item.chip ? /* @__PURE__ */ jsx(Slot, {
+							id: item.id,
+							leaving,
+							ready,
+							onDone: places.done,
+							children: /* @__PURE__ */ jsxs("span", {
+								"data-slot": "filter-bar-chip",
+								className: filterBarChipVariants(),
+								children: [/* @__PURE__ */ jsx(ChipText, { text: item.chip.text }), /* @__PURE__ */ jsx(ChipRemove, {
+									id: item.id,
+									label: removeLabel(item.chip.text),
+									register: registerRemove,
+									onPress: () => {
+										noteFocusAfter(chips.findIndex((chip) => chip.id === item.id));
+										item.chip.clear();
+									}
+								})]
+							})
+						}, item.id) : /* @__PURE__ */ jsx(Slot, {
+							id: item.id,
+							leaving,
+							ready,
+							onDone: places.done,
+							children: /* @__PURE__ */ jsx(Button$1, {
+								variant: "link",
+								size: "sm",
+								onPress: clearAll,
+								children: clearAllLabel
+							})
+						}, item.id))
+					})
+				}) : /* @__PURE__ */ jsx(EmptyNote, {
+					ready,
+					children: emptyLabel
+				})
+			}),
+			filters.length > 0 || end ? /* @__PURE__ */ jsxs("div", {
+				"data-slot": "filter-bar-actions",
+				className: filterBarRowVariants(),
+				children: [filters.length > 0 ? /* @__PURE__ */ jsxs(PopoverTrigger, {
 					isOpen: open,
 					onOpenChange: setOpen,
-					children: [/* @__PURE__ */ jsxs(Button, {
+					children: [/* @__PURE__ */ jsx(Button$1, {
+						ref: addButton,
 						variant: "outlineNeutral",
 						size: "sm",
-						startIcon: /* @__PURE__ */ jsx(FunnelGlyph, {}),
+						startIcon: /* @__PURE__ */ jsx(PlusGlyph, {}),
 						"data-slot": "filter-bar-button",
-						children: [buttonLabel, chips.length > 0 ? /* @__PURE__ */ jsx(Badge, {
-							tone: "primary",
-							appearance: "solid",
-							size: "sm",
-							shape: "pill",
-							"data-slot": "filter-bar-count",
-							children: chips.length
-						}) : null]
-					}), /* @__PURE__ */ jsx(Popover, {
-						placement: "bottom start",
-						className: "w-80 max-w-[calc(100vw-2rem)]",
-						children: /* @__PURE__ */ jsxs("div", {
-							"data-slot": "filter-bar-panel",
-							className: "flex flex-col gap-3",
-							children: [
-								/* @__PURE__ */ jsx("p", {
-									className: "m-0 text-sm font-semibold",
-									children: buttonLabel
-								}),
-								filters.map((f) => isCustom(f) ? /* @__PURE__ */ jsx("div", { children: f.render() }, f.id) : /* @__PURE__ */ jsx(Select, {
-									label: f.label,
-									size: "sm",
-									selectedKey: f.value,
-									onSelectionChange: (key) => {
-										if (key != null) f.onChange(key);
-									},
-									children: f.options.map((o) => /* @__PURE__ */ jsx(SelectItem, {
-										id: o.id,
-										textValue: o.label,
-										children: o.label
-									}, o.id))
-								}, f.id)),
-								/* @__PURE__ */ jsxs("div", {
-									className: "flex items-center justify-between gap-2 pt-1",
-									children: [/* @__PURE__ */ jsx(Button, {
-										variant: "ghost",
-										size: "sm",
-										onPress: clearAll,
-										isDisabled: chips.length === 0,
-										children: clearAllLabel
-									}), /* @__PURE__ */ jsx(Button, {
-										variant: "primary",
-										size: "sm",
-										onPress: () => setOpen(false),
-										children: doneLabel
-									})]
-								})
-							]
+						children: buttonLabel
+					}), /* @__PURE__ */ jsx(Popover$1, {
+						placement: "bottom end",
+						offset: 8,
+						className: "w-64 max-w-[calc(100vw-2rem)] p-1.5",
+						children: /* @__PURE__ */ jsx(FilterPanel, {
+							filters,
+							label: buttonLabel,
+							backLabel,
+							onClose: () => setOpen(false)
 						})
 					})]
-				}) : null,
-				end ? /* @__PURE__ */ jsx("div", {
-					className: "ms-auto flex flex-wrap items-center gap-2",
-					children: end
-				}) : null
-			]
-		}), places.list.length > 0 ? /* @__PURE__ */ jsx("div", {
-			ref: frame,
-			"data-slot": "filter-bar-chips-frame",
-			className: "height-follow",
-			children: /* @__PURE__ */ jsx("ul", {
-				ref: row,
-				"aria-label": chipsLabel,
-				"data-slot": "filter-bar-chips",
-				className: "m-0 flex list-none flex-wrap items-center gap-2 p-0",
-				children: places.list.map(({ item, leaving }) => item.chip ? /* @__PURE__ */ jsx(Slot, {
-					id: item.id,
-					leaving,
-					ready,
-					onDone: places.done,
-					children: /* @__PURE__ */ jsxs("span", {
-						"data-slot": "filter-bar-chip",
-						className: filterBarChipVariants(),
-						children: [/* @__PURE__ */ jsx(ChipText, { text: item.chip.text }), /* @__PURE__ */ jsx(Button, {
-							variant: "ghost",
-							size: "sm",
-							"aria-label": removeLabel(item.chip.text),
-							onPress: item.chip.clear,
-							className: "h-6 px-1",
-							children: /* @__PURE__ */ jsx(CrossGlyph, {})
-						})]
-					})
-				}, item.id) : /* @__PURE__ */ jsx(Slot, {
-					id: item.id,
-					leaving,
-					ready,
-					onDone: places.done,
-					children: /* @__PURE__ */ jsx(Button, {
-						variant: "link",
-						size: "sm",
-						onPress: clearAll,
-						children: clearAllLabel
-					})
-				}, item.id))
-			})
-		}) : null]
+				}) : null, end]
+			}) : null
+		]
 	});
 });
 //#endregion