@seekalfred/primitives 0.6.0 → 0.7.1

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,37 @@ 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.
 */
-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 +62,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 +91,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" }] }]}
 * />
 */
 /**
@@ -157,7 +157,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);
@@ -183,115 +330,84 @@ 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(Button$1, {
+									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$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, {
 						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

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

@@ -1 +1 @@
-{"version":3,"file":"filter-bar.js","names":[],"sources":["../../src/filter-bar/filter-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useCallback, useEffect, useRef, useState, type ReactNode } from \"react\";\nimport type { Key } from \"react-aria-components\";\n\nimport { Badge } from \"../badge/badge.js\";\nimport { Button } from \"../button/button.js\";\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { useLeavingList } from \"../lib/leaving-list.js\";\nimport { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect, useMorphWidth } from \"../lib/motion.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { Popover, PopoverTrigger } from \"../popover/popover.js\";\nimport { Select, SelectItem } from \"../select/select.js\";\n\n/**\n * FilterBar -- a list toolbar that keeps the controls people use every time\n * in the row and puts every other dropdown filter behind ONE \"Filters\"\n * button.\n *\n * Why it exists: list screens grew a row of four to seven dropdowns beside\n * the search box and the status tabs. At desktop width that row wraps onto a\n * second line; on a phone it scrolls sideways. The bar keeps the row to one\n * line and makes what IS filtered visible as chips instead of as the\n * resting text of a dropdown.\n *\n * Three regions:\n *\n * - `inline`: always in the row, at its start (status tabs, the search box).\n * - the Filters button: a popover with a one-column form, one full-width\n *   Select per filter with its label above. The button carries a count badge\n *   of the filters that are set.\n * - `end`: always in the row, at its end (a count, Export, a view toggle).\n *\n * While any filter is set, a list of chips sits under the row, each reading\n * \"Label: option label\" with its own remove button, plus \"Clear all\".\n *\n * The bar holds NO filter state. Every value and every change belongs to the\n * caller: removing a chip hands the filter's `emptyValue` back to its\n * `onChange`; Clear all does that for each set filter, or calls\n * `onClearAll` when the caller resets its filters in one step.\n *\n * Accessibility comes from the parts: the popover is a dialog named by its\n * trigger, the trigger carries `aria-expanded`, focus moves into the popover\n * and is contained there, Escape closes it and focus returns to the trigger.\n */\n\nexport const filterBarVariants = cva([\"flex flex-col gap-2 box-border font-sans\"]);\n\nexport const filterBarRowVariants = cva([\"flex flex-wrap items-center gap-2\"]);\n\nexport const filterBarChipVariants = cva([\n  \"inline-flex items-center gap-1 rounded-full\",\n  \"border-(length:--border-width) border-border bg-muted\",\n  \"ps-3 pe-1 text-xs leading-(--leading-snug) text-foreground\",\n  \"box-border font-sans\",\n]);\n\n/** One option of a dropdown filter. */\nexport interface FilterBarOption {\n  /** The option's value, handed to `onChange`. */\n  id: Key;\n  /** The option's text: in the list, on the trigger and on the chip. */\n  label: string;\n}\n\n/** A dropdown filter, rendered as a Select in the popover. */\nexport interface FilterBarSelectField {\n  /** Stable identity, used as the React key. */\n  id: string;\n  /** The field's name: the label above the dropdown and the start of its chip. */\n  label: string;\n  /** The current value. `null` reads as not set. */\n  value: Key | null;\n  /** The value that means \"not filtered\" (the \"All\" option's id). */\n  emptyValue: Key;\n  /** The options, the \"All\" option included. */\n  options: readonly FilterBarOption[];\n  /** Told the chosen option's id, or `emptyValue` when the chip is removed. */\n  onChange: (value: Key) => void;\n}\n\n/**\n * A filter that is not a plain dropdown (a date range, a searchable picker):\n * the caller renders the control and says what its chip reads.\n */\nexport interface FilterBarCustomField {\n  /** Stable identity, used as the React key. */\n  id: string;\n  /** The start of its chip. The control rendered by `render` names itself. */\n  label: string;\n  /** The control, rendered in the popover. */\n  render: () => ReactNode;\n  /** The chip's value text while the filter is set, or `null` while it is not. */\n  activeLabel: string | null;\n  /** Unsets the filter: the chip's remove button and Clear all call it. */\n  onClear: () => void;\n}\n\nexport type FilterBarField = FilterBarSelectField | FilterBarCustomField;\n\nexport interface FilterBarProps {\n  /** Always in the row, at its start: status tabs and the search box. */\n  inline?: ReactNode;\n  /** Always in the row, at its end: a count, Export, a view toggle. */\n  end?: ReactNode;\n  /** The filters behind the Filters button. With none, no button renders. */\n  filters: readonly FilterBarField[];\n  /** Resets every filter in one step. Without it, each set filter is handed its `emptyValue`. */\n  onClearAll?: () => void;\n  /**\n   * The button's text, and the popover's name.\n   *\n   * @default \"Filters\"\n   */\n  buttonLabel?: string;\n  /**\n   * The text of both Clear all buttons.\n   *\n   * @default \"Clear all\"\n   */\n  clearAllLabel?: string;\n  /**\n   * The text of the button that closes the popover.\n   *\n   * @default \"Done\"\n   */\n  doneLabel?: string;\n  /**\n   * The accessible name of the list of chips.\n   *\n   * @default \"Filters set\"\n   */\n  chipsLabel?: string;\n  /**\n   * The accessible name of a chip's remove button, given the chip's text.\n   *\n   * @default (text) => `Remove filter ${text}`\n   */\n  removeLabel?: (chipText: string) => string;\n  /** Extra classes on the root. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nconst isCustom = (f: FilterBarField): f is FilterBarCustomField => \"render\" in f;\n\ninterface Chip {\n  id: string;\n  text: string;\n  clear: () => void;\n}\n\n/** The set filters, each with its chip text and how to unset it. */\nfunction chipsFor(filters: readonly FilterBarField[]): Chip[] {\n  const chips: Chip[] = [];\n  for (const f of filters) {\n    if (isCustom(f)) {\n      if (f.activeLabel != null) chips.push({ id: f.id, text: `${f.label}: ${f.activeLabel}`, clear: f.onClear });\n      continue;\n    }\n    if (f.value == null || f.value === f.emptyValue) continue;\n    const option = f.options.find((o) => o.id === f.value);\n    chips.push({\n      id: f.id,\n      text: `${f.label}: ${option ? option.label : String(f.value)}`,\n      clear: () => f.onChange(f.emptyValue),\n    });\n  }\n  return chips;\n}\n\n/** A funnel, drawn inline: this package ships no icon dependency. */\nfunction FunnelGlyph() {\n  return (\n    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" aria-hidden=\"true\">\n      <path d=\"M2 3h12M4.5 8h7M7 13h2\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\nfunction CrossGlyph() {\n  return (\n    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" aria-hidden=\"true\">\n      <path d=\"M4 4l8 8M12 4l-8 8\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\n/**\n * A list toolbar with its dropdown filters behind one Filters button.\n *\n * @example\n * <FilterBar\n *   inline={<SearchField aria-label=\"Search\" />}\n *   end={<Button>Export</Button>}\n *   filters={[{ id: \"region\", label: \"Region\", value, emptyValue: \"all\", onChange: setValue,\n *     options: [{ id: \"all\", label: \"All regions\" }, { id: \"nsw\", label: \"NSW\" }] }]}\n * />\n */\n/**\n * One place in the chip row, for a chip or for Clear all. A slot added after the\n * first render opens from nothing while its content fades up and scales in, so the\n * chips beside it glide over; one that is removed stays, shrinking and collapsing,\n * until its exit ends. Nothing animates at first render.\n */\nfunction Slot({\n  leaving,\n  ready,\n  onDone,\n  id,\n  children,\n}: {\n  leaving: boolean;\n  ready: boolean;\n  onDone: (id: string) => void;\n  id: string;\n  children: ReactNode;\n}) {\n  // Decided once, at this slot's own mount.\n  const [fresh] = useState(ready);\n  const remove = useCallback(() => onDone(id), [onDone, id]);\n  useExitBackstop(leaving, remove, 900);\n  // Reduced motion removes it at once: an animation that is switched off never ends.\n  useIsomorphicLayoutEffect(() => {\n    if (leaving && prefersReducedMotion()) remove();\n  }, [leaving, remove]);\n  return (\n    <li\n      data-slot={leaving ? \"filter-bar-leaving\" : undefined}\n      aria-hidden={leaving || undefined}\n      ref={(node) => {\n        if (!node) return;\n        if (leaving) node.setAttribute(\"inert\", \"\");\n        else node.removeAttribute(\"inert\");\n      }}\n      onAnimationEnd={(event) => {\n        if (leaving && event.target === event.currentTarget && event.animationName === \"chip-slot-out\")\n          remove();\n      }}\n      className={cnAll(\n        \"min-w-0 flex-none [interpolate-size:allow-keywords]\",\n        leaving\n          ? \"pointer-events-none motion-safe:animate-chip-out\"\n          : fresh && \"motion-safe:animate-chip-in motion-reduce:animate-fade-in\",\n      )}\n    >\n      {children}\n    </li>\n  );\n}\n\n/** A chip's text: a changed value swaps (the new text rises in) and the chip's width springs to it. */\nfunction ChipText({ text }: { text: string }) {\n  const content = useRef<HTMLSpanElement>(null);\n  useMorphWidth(content, text);\n  return (\n    <span className=\"button-slot\">\n      <span ref={content} className=\"inline-flex flex-none items-center\">\n        <SwapText swapKey={text} className=\"inline-block\">\n          {text}\n        </SwapText>\n      </span>\n    </span>\n  );\n}\n\nexport const FilterBar = forwardRef<HTMLDivElement, FilterBarProps>(function FilterBar(\n  {\n    inline,\n    end,\n    filters,\n    onClearAll,\n    buttonLabel = \"Filters\",\n    clearAllLabel = \"Clear all\",\n    doneLabel = \"Done\",\n    chipsLabel = \"Filters set\",\n    removeLabel = (text) => `Remove filter ${text}`,\n    className,\n  },\n  ref,\n) {\n  const [open, setOpen] = useState(false);\n  const chips = chipsFor(filters);\n  const [ready, setReady] = useState(false);\n  useEffect(() => {\n    // A frame after mount: chips added from then on arrive animated, the first ones do not.\n    const frame = requestAnimationFrame(() => setReady(true));\n    return () => cancelAnimationFrame(frame);\n  }, []);\n  // The chips, with Clear all as the row's last place, each kept on screen while it leaves.\n  const places = useLeavingList([\n    ...chips.map((chip) => ({ id: chip.id, chip })),\n    ...(chips.length > 0 ? [{ id: \"\\u0000clear\", chip: null }] : []),\n  ]);\n  const frame = useRef<HTMLDivElement>(null);\n  const row = useRef<HTMLUListElement>(null);\n  // The row follows its height when a chip makes a line wrap or unwrap.\n  useHeightFollow(frame, row, chips.map((chip) => chip.id).join());\n  const clearAll = () => {\n    if (onClearAll) onClearAll();\n    else for (const c of chips) c.clear();\n  };\n\n  return (\n    <div ref={ref} data-slot=\"filter-bar\" className={cn(filterBarVariants(), className)}>\n      <div data-slot=\"filter-bar-row\" className={filterBarRowVariants()}>\n        {inline}\n        {filters.length > 0 ? (\n          <PopoverTrigger isOpen={open} onOpenChange={setOpen}>\n            <Button variant=\"outlineNeutral\" size=\"sm\" startIcon={<FunnelGlyph />} data-slot=\"filter-bar-button\">\n              {buttonLabel}\n              {chips.length > 0 ? (\n                <Badge tone=\"primary\" appearance=\"solid\" size=\"sm\" shape=\"pill\" data-slot=\"filter-bar-count\">\n                  {chips.length}\n                </Badge>\n              ) : null}\n            </Button>\n            <Popover placement=\"bottom start\" className=\"w-80 max-w-[calc(100vw-2rem)]\">\n              <div data-slot=\"filter-bar-panel\" className=\"flex flex-col gap-3\">\n                <p className=\"m-0 text-sm font-semibold\">{buttonLabel}</p>\n                {filters.map((f) =>\n                  isCustom(f) ? (\n                    <div key={f.id}>{f.render()}</div>\n                  ) : (\n                    <Select\n                      key={f.id}\n                      label={f.label}\n                      size=\"sm\"\n                      selectedKey={f.value}\n                      onSelectionChange={(key) => {\n                        if (key != null) f.onChange(key);\n                      }}\n                    >\n                      {f.options.map((o) => (\n                        <SelectItem key={o.id} id={o.id} textValue={o.label}>\n                          {o.label}\n                        </SelectItem>\n                      ))}\n                    </Select>\n                  ),\n                )}\n                <div className=\"flex items-center justify-between gap-2 pt-1\">\n                  <Button variant=\"ghost\" size=\"sm\" onPress={clearAll} isDisabled={chips.length === 0}>\n                    {clearAllLabel}\n                  </Button>\n                  <Button variant=\"primary\" size=\"sm\" onPress={() => setOpen(false)}>\n                    {doneLabel}\n                  </Button>\n                </div>\n              </div>\n            </Popover>\n          </PopoverTrigger>\n        ) : null}\n        {end ? <div className=\"ms-auto flex flex-wrap items-center gap-2\">{end}</div> : null}\n      </div>\n      {places.list.length > 0 ? (\n        <div ref={frame} data-slot=\"filter-bar-chips-frame\" className=\"height-follow\">\n          <ul\n            ref={row}\n            aria-label={chipsLabel}\n            data-slot=\"filter-bar-chips\"\n            className=\"m-0 flex list-none flex-wrap items-center gap-2 p-0\"\n          >\n            {places.list.map(({ item, leaving }) =>\n              item.chip ? (\n                <Slot key={item.id} id={item.id} leaving={leaving} ready={ready} onDone={places.done}>\n                  <span data-slot=\"filter-bar-chip\" className={filterBarChipVariants()}>\n                    <ChipText text={item.chip.text} />\n                    <Button\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      aria-label={removeLabel(item.chip.text)}\n                      onPress={item.chip.clear}\n                      className=\"h-6 px-1\"\n                    >\n                      <CrossGlyph />\n                    </Button>\n                  </span>\n                </Slot>\n              ) : (\n                <Slot key={item.id} id={item.id} leaving={leaving} ready={ready} onDone={places.done}>\n                  <Button variant=\"link\" size=\"sm\" onPress={clearAll}>\n                    {clearAllLabel}\n                  </Button>\n                </Slot>\n              ),\n            )}\n          </ul>\n        </div>\n      ) : null}\n    </div>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"filter-bar.js","names":["Button","AriaMenu","MenuItem","Popover"],"sources":["../../src/filter-bar/filter-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useCallback, useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { Menu as AriaMenu, type Key } from \"react-aria-components\";\n\nimport { Button } from \"../button/button.js\";\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { useLeavingList } from \"../lib/leaving-list.js\";\nimport { useMenuHighlight } from \"../lib/menu-highlight.js\";\nimport { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect, useMorphWidth } from \"../lib/motion.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { MenuItem, menuVariants } from \"../menu/menu.js\";\nimport { Popover, PopoverTrigger } from \"../popover/popover.js\";\n\n/**\n * FilterBar -- a filter toolbar: one pill that shows what is filtered as\n * removable chips (\"No filters applied\" while nothing is), with an \"Add filter\"\n * button that opens a menu of the filters.\n *\n * Why it exists: list screens grew a row of four to seven dropdowns beside\n * the search box and the status tabs. At desktop width that row wraps onto a\n * second line; on a phone it scrolls sideways. The bar keeps the row to one\n * line and makes what IS filtered visible as chips instead of as the\n * resting text of a dropdown.\n *\n * Three regions, all inside the one pill:\n *\n * - `inline`: always in the pill, at its start (status tabs, a search box).\n * - the chips, then \"Clear all\" once any filter is set; or the empty note.\n * - the Add filter button, then `end`: always in the pill, at its end (a\n *   count, Export, a view toggle).\n *\n * The button opens a menu of the filters: each row is the filter's icon and\n * name, the value it holds now, and a chevron. A row opens that filter's own\n * options in the same panel (a back button returns to the list); choosing an\n * option sets the filter and closes the menu. A custom filter shows its own\n * control in that step.\n *\n * The bar holds NO filter state. Every value and every change belongs to the\n * caller: removing a chip hands the filter's `emptyValue` back to its\n * `onChange`; Clear all does that for each set filter, or calls\n * `onClearAll` when the caller resets its filters in one step.\n *\n * Accessibility comes from the parts: the panel is a dialog named by its\n * trigger, the trigger carries `aria-expanded`, focus moves into the panel and\n * is contained there, Escape closes it and focus returns to the trigger, and\n * each list is a real menu with arrow keys and type-ahead.\n */\n\n/** The toolbar: one pill with a light border on the surface. */\nexport const filterBarVariants = cva([\n  \"flex flex-wrap items-center gap-x-3 gap-y-2 rounded-full\",\n  \"border-(length:--border-width) border-border bg-surface\",\n  \"px-4 py-2 box-border font-sans\",\n]);\n\n/** The group at the pill's end: the Add filter button and the caller's `end`. */\nexport const filterBarRowVariants = cva([\"ms-auto flex flex-wrap items-center gap-2\"]);\n\nexport const filterBarChipVariants = cva([\n  \"inline-flex items-center gap-1 rounded-full\",\n  \"border-(length:--border-width) border-border bg-muted\",\n  \"ps-3 pe-1 text-xs leading-(--leading-snug) text-foreground\",\n  \"box-border font-sans\",\n]);\n\n/** One option of a dropdown filter. */\nexport interface FilterBarOption {\n  /** The option's value, handed to `onChange`. */\n  id: Key;\n  /** The option's text: in the list, on the trigger and on the chip. */\n  label: string;\n}\n\n/** A dropdown filter: a row in the Add filter menu that opens its options. */\nexport interface FilterBarSelectField {\n  /** Stable identity, used as the React key. */\n  id: string;\n  /** The field's name: its row in the menu and the start of its chip. */\n  label: string;\n  /** An icon before the name in the menu row. Mark it `aria-hidden`. */\n  icon?: ReactNode;\n  /** The current value. `null` reads as not set. */\n  value: Key | null;\n  /** The value that means \"not filtered\" (the \"All\" option's id). */\n  emptyValue: Key;\n  /** The options, the \"All\" option included. */\n  options: readonly FilterBarOption[];\n  /** Told the chosen option's id, or `emptyValue` when the chip is removed. */\n  onChange: (value: Key) => void;\n}\n\n/**\n * A filter that is not a plain dropdown (a date range, a searchable picker):\n * the caller renders the control and says what its chip reads.\n */\nexport interface FilterBarCustomField {\n  /** Stable identity, used as the React key. */\n  id: string;\n  /** The start of its chip, and its row in the menu. The control rendered by `render` names itself. */\n  label: string;\n  /** An icon before the name in the menu row. Mark it `aria-hidden`. */\n  icon?: ReactNode;\n  /** The control, rendered in the menu's step for this filter. */\n  render: () => ReactNode;\n  /** The chip's value text while the filter is set, or `null` while it is not. */\n  activeLabel: string | null;\n  /** Unsets the filter: the chip's remove button and Clear all call it. */\n  onClear: () => void;\n}\n\nexport type FilterBarField = FilterBarSelectField | FilterBarCustomField;\n\nexport interface FilterBarProps {\n  /** Always in the pill, at its start: status tabs and the search box. */\n  inline?: ReactNode;\n  /** Always in the pill, at its end: a count, Export, a view toggle. */\n  end?: ReactNode;\n  /** The filters in the Add filter menu. With none, no button renders. */\n  filters: readonly FilterBarField[];\n  /** Resets every filter in one step. Without it, each set filter is handed its `emptyValue`. */\n  onClearAll?: () => void;\n  /**\n   * The button's text, and the menu's name.\n   *\n   * @default \"Add filter\"\n   */\n  buttonLabel?: string;\n  /**\n   * The text of Clear all.\n   *\n   * @default \"Clear all\"\n   */\n  clearAllLabel?: string;\n  /**\n   * Ignored: the menu has no Done button, because choosing an option closes it.\n   *\n   * @deprecated Kept so existing callers still compile.\n   */\n  doneLabel?: string;\n  /**\n   * The note shown while no filter is set.\n   *\n   * @default \"No filters applied\"\n   */\n  emptyLabel?: string;\n  /**\n   * The accessible name of the list of chips.\n   *\n   * @default \"Filters set\"\n   */\n  chipsLabel?: string;\n  /**\n   * The accessible name of a chip's remove button, given the chip's text.\n   *\n   * @default (text) => `Remove filter ${text}`\n   */\n  removeLabel?: (chipText: string) => string;\n  /**\n   * The accessible name of the menu's back button.\n   *\n   * @default \"Back to filters\"\n   */\n  backLabel?: string;\n  /** Extra classes on the root. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nconst isCustom = (f: FilterBarField): f is FilterBarCustomField => \"render\" in f;\n\ninterface Chip {\n  id: string;\n  text: string;\n  clear: () => void;\n}\n\n/** What a filter holds now, for its menu row and its chip: `null` while it is not set. */\nfunction valueOf(f: FilterBarField): string | null {\n  if (isCustom(f)) return f.activeLabel;\n  if (f.value == null || f.value === f.emptyValue) return null;\n  const option = f.options.find((o) => o.id === f.value);\n  return option ? option.label : String(f.value);\n}\n\n/** The set filters, each with its chip text and how to unset it. */\nfunction chipsFor(filters: readonly FilterBarField[]): Chip[] {\n  const chips: Chip[] = [];\n  for (const f of filters) {\n    const value = valueOf(f);\n    if (value == null) continue;\n    chips.push({\n      id: f.id,\n      text: `${f.label}: ${value}`,\n      clear: isCustom(f) ? f.onClear : () => f.onChange(f.emptyValue),\n    });\n  }\n  return chips;\n}\n\nfunction Glyph({ path }: { path: string }) {\n  return (\n    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" aria-hidden=\"true\">\n      <path d={path} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nconst PlusGlyph = () => <Glyph path=\"M8 3v10M3 8h10\" />;\nconst CrossGlyph = () => <Glyph path=\"M4 4l8 8M12 4l-8 8\" />;\nconst ChevronRightGlyph = () => <Glyph path=\"M6 3l5 5-5 5\" />;\nconst ChevronLeftGlyph = () => <Glyph path=\"M10 3 5 8l5 5\" />;\nconst CheckGlyph = () => <Glyph path=\"M3 8.5l3.5 3.5L13 4.5\" />;\n\n/**\n * A list toolbar with its filters behind one Add filter button.\n *\n * @example\n * <FilterBar\n *   end={<Button>Export</Button>}\n *   filters={[{ id: \"status\", label: \"Status\", icon: <StatusIcon aria-hidden />, value, emptyValue: \"all\",\n *     onChange: setValue, options: [{ id: \"all\", label: \"Any status\" }, { id: \"open\", label: \"Open\" }] }]}\n * />\n */\n/**\n * One place in the chip row, for a chip or for Clear all. A slot added after the\n * first render opens from nothing while its content fades up and scales in, so the\n * chips beside it glide over; one that is removed stays, shrinking and collapsing,\n * until its exit ends. Nothing animates at first render.\n */\nfunction Slot({\n  leaving,\n  ready,\n  onDone,\n  id,\n  children,\n}: {\n  leaving: boolean;\n  ready: boolean;\n  onDone: (id: string) => void;\n  id: string;\n  children: ReactNode;\n}) {\n  // Decided once, at this slot's own mount.\n  const [fresh] = useState(ready);\n  const remove = useCallback(() => onDone(id), [onDone, id]);\n  useExitBackstop(leaving, remove, 900);\n  // Reduced motion removes it at once: an animation that is switched off never ends.\n  useIsomorphicLayoutEffect(() => {\n    if (leaving && prefersReducedMotion()) remove();\n  }, [leaving, remove]);\n  return (\n    <li\n      data-slot={leaving ? \"filter-bar-leaving\" : undefined}\n      aria-hidden={leaving || undefined}\n      ref={(node) => {\n        if (!node) return;\n        if (leaving) node.setAttribute(\"inert\", \"\");\n        else node.removeAttribute(\"inert\");\n      }}\n      onAnimationEnd={(event) => {\n        if (leaving && event.target === event.currentTarget && event.animationName === \"chip-slot-out\")\n          remove();\n      }}\n      className={cnAll(\n        \"min-w-0 flex-none [interpolate-size:allow-keywords]\",\n        leaving\n          ? \"pointer-events-none motion-safe:animate-chip-out\"\n          : fresh && \"motion-safe:animate-chip-in motion-reduce:animate-fade-in\",\n      )}\n    >\n      {children}\n    </li>\n  );\n}\n\n/** A chip's text: a changed value swaps (the new text rises in) and the chip's width springs to it. */\nfunction ChipText({ text }: { text: string }) {\n  const content = useRef<HTMLSpanElement>(null);\n  useMorphWidth(content, text);\n  return (\n    <span className=\"button-slot\">\n      <span ref={content} className=\"inline-flex flex-none items-center\">\n        <SwapText swapKey={text} className=\"inline-block\">\n          {text}\n        </SwapText>\n      </span>\n    </span>\n  );\n}\n\n/** A filter's icon, drawn at the control icon size in the secondary ink. */\nfunction RowIcon({ icon }: { icon: ReactNode }) {\n  return icon ? (\n    <span aria-hidden=\"true\" className=\"inline-flex text-text-secondary\">\n      {icon}\n    </span>\n  ) : null;\n}\n\n/** The note for no filters. Arriving after the first render (the last chip has gone) it fades in; at first render it does not. */\nfunction EmptyNote({ ready, children }: { ready: boolean; children: ReactNode }) {\n  // Decided once, at this note's own mount: adding the class later would start the animation on a note already on screen.\n  const [fresh] = useState(ready);\n  return (\n    <span\n      data-slot=\"filter-bar-empty\"\n      className={cn(\"text-sm text-text-secondary\" + (fresh ? \" motion-safe:animate-fade-in\" : \"\"))}\n    >\n      {children}\n    </span>\n  );\n}\n\nconst STEP = \"motion-safe:animate-filter-step-in motion-reduce:animate-fade-in\";\n\n/**\n * The Add filter menu's panel, in two steps: the list of filters, then the\n * chosen filter's options (or its own control). A step arrives from the side it\n * was reached from; the first one, on open, does not animate by itself (the\n * popover grows from the button instead).\n */\nfunction FilterPanel({\n  filters,\n  label,\n  backLabel,\n  onClose,\n}: {\n  filters: readonly FilterBarField[];\n  label: string;\n  backLabel: string;\n  onClose: () => void;\n}) {\n  const [fieldId, setFieldId] = useState<string | null>(null);\n  // null until the user has navigated: the first step does not animate by itself.\n  const [dir, setDir] = useState<1 | -1 | null>(null);\n  // The filter whose step we came back from: focus returns to its row.\n  const [returnTo, setReturnTo] = useState<string | null>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const bindFields = useMenuHighlight();\n  const bindOptions = useMenuHighlight();\n  const field = filters.find((f) => f.id === fieldId) ?? null;\n\n  // Coming back, focus lands on the row that was opened rather than on the first one.\n  // The rows of a React Aria menu land a frame after it mounts, so this waits for the row.\n  useEffect(() => {\n    if (field || returnTo === null) return;\n    const id = returnTo;\n    let frame = 0;\n    let tries = 0;\n    const focusRow = () => {\n      const row = Array.from(\n        listRef.current?.querySelectorAll<HTMLElement>(\"[data-slot='menu-item']\") ?? [],\n      ).find((node) => node.dataset.key === id);\n      if (row) row.focus();\n      else if (tries++ < 20) frame = requestAnimationFrame(focusRow);\n    };\n    focusRow();\n    return () => cancelAnimationFrame(frame);\n  }, [field, returnTo]);\n\n  const open = (id: Key) => {\n    setDir(1);\n    setFieldId(String(id));\n  };\n  const back = () => {\n    if (!field) return;\n    setReturnTo(field.id);\n    setDir(-1);\n    setFieldId(null);\n  };\n  const stepClass = dir === null ? \"\" : cn(STEP + (dir === 1 ? \" [--step-dir:1]\" : \" [--step-dir:-1]\"));\n\n  return (\n    <div data-slot=\"filter-bar-panel\" className=\"overflow-x-clip\">\n      {field ? (\n        <div\n          key={field.id}\n          className={stepClass}\n          onKeyDown={(event) => {\n            // Arrow left steps back, from the options list; a custom control keeps its own keys.\n            if (event.key === \"ArrowLeft\" && !isCustom(field)) {\n              event.preventDefault();\n              back();\n            }\n          }}\n        >\n          <div className=\"flex items-center gap-1 px-1 pb-1\">\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              aria-label={backLabel}\n              onPress={back}\n              className=\"size-8 flex-none rounded-full\"\n            >\n              <ChevronLeftGlyph />\n            </Button>\n            <span className=\"min-w-0 truncate text-sm font-medium text-foreground\">{field.label}</span>\n          </div>\n          {isCustom(field) ? (\n            <div className=\"p-1.5\">{field.render()}</div>\n          ) : (\n            <AriaMenu\n              ref={bindOptions}\n              aria-label={field.label}\n              data-slot=\"filter-bar-options\"\n              autoFocus=\"first\"\n              selectionMode=\"single\"\n              disallowEmptySelection\n              selectedKeys={field.value == null ? [] : [field.value]}\n              onAction={(key) => {\n                field.onChange(key);\n                onClose();\n              }}\n              className={menuVariants()}\n            >\n              {field.options.map((o) => (\n                <MenuItem key={o.id} id={o.id} textValue={o.label}>\n                  <span className=\"min-w-0 flex-1 truncate\">{o.label}</span>\n                  <span\n                    aria-hidden=\"true\"\n                    className={\n                      o.id === field.value\n                        ? \"inline-flex text-foreground\"\n                        : \"inline-flex text-foreground opacity-0\"\n                    }\n                  >\n                    <CheckGlyph />\n                  </span>\n                </MenuItem>\n              ))}\n            </AriaMenu>\n          )}\n        </div>\n      ) : (\n        <div key=\"fields\" ref={listRef} className={stepClass}>\n          <AriaMenu\n            ref={bindFields}\n            aria-label={label}\n            data-slot=\"filter-bar-fields\"\n            autoFocus={returnTo === null ? \"first\" : false}\n            onAction={open}\n            // Choosing a filter opens its options; it must not close the panel.\n            onClose={() => {}}\n            className={menuVariants()}\n          >\n            {filters.map((f) => {\n              const value = valueOf(f);\n              return (\n                <MenuItem key={f.id} id={f.id} textValue={f.label}>\n                  <RowIcon icon={f.icon} />\n                  <span className=\"min-w-0 flex-1 truncate\">{f.label}</span>\n                  {value ? (\n                    <span className=\"max-w-24 truncate text-xs text-text-secondary\">{value}</span>\n                  ) : null}\n                  <span aria-hidden=\"true\" className=\"inline-flex text-text-secondary\">\n                    <ChevronRightGlyph />\n                  </span>\n                </MenuItem>\n              );\n            })}\n          </AriaMenu>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const FilterBar = forwardRef<HTMLDivElement, FilterBarProps>(function FilterBar(\n  {\n    inline,\n    end,\n    filters,\n    onClearAll,\n    buttonLabel = \"Add filter\",\n    clearAllLabel = \"Clear all\",\n    emptyLabel = \"No filters applied\",\n    chipsLabel = \"Filters set\",\n    removeLabel = (text) => `Remove filter ${text}`,\n    backLabel = \"Back to filters\",\n    className,\n  },\n  ref,\n) {\n  const [open, setOpen] = useState(false);\n  const chips = chipsFor(filters);\n  const [ready, setReady] = useState(false);\n  useEffect(() => {\n    // A frame after mount: chips added from then on arrive animated, the first ones do not.\n    const frame = requestAnimationFrame(() => setReady(true));\n    return () => cancelAnimationFrame(frame);\n  }, []);\n  // The chips, with Clear all as the row's last place, each kept on screen while it leaves.\n  const places = useLeavingList([\n    ...chips.map((chip) => ({ id: chip.id, chip })),\n    ...(chips.length > 0 ? [{ id: \"\\u0000clear\", chip: null }] : []),\n  ]);\n  const frame = useRef<HTMLDivElement>(null);\n  const row = useRef<HTMLUListElement>(null);\n  // The row follows its height when a chip makes a line wrap or unwrap.\n  useHeightFollow(frame, row, chips.map((chip) => chip.id).join());\n  const clearAll = () => {\n    if (onClearAll) onClearAll();\n    else for (const c of chips) c.clear();\n  };\n\n  return (\n    <div ref={ref} data-slot=\"filter-bar\" className={cn(filterBarVariants(), className)}>\n      {inline ? <div className=\"flex flex-wrap items-center gap-2\">{inline}</div> : null}\n      <div\n        data-slot=\"filter-bar-chips-area\"\n        className=\"flex min-h-(--density-control-h-sm) min-w-0 flex-[1_1_8rem] items-center\"\n      >\n        {places.list.length > 0 ? (\n          <div ref={frame} data-slot=\"filter-bar-chips-frame\" className=\"height-follow min-w-0\">\n            <ul\n              ref={row}\n              aria-label={chipsLabel}\n              data-slot=\"filter-bar-chips\"\n              className=\"m-0 flex list-none flex-wrap items-center gap-2 p-0\"\n            >\n              {places.list.map(({ item, leaving }) =>\n                item.chip ? (\n                  <Slot key={item.id} id={item.id} leaving={leaving} ready={ready} onDone={places.done}>\n                    <span data-slot=\"filter-bar-chip\" className={filterBarChipVariants()}>\n                      <ChipText text={item.chip.text} />\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        aria-label={removeLabel(item.chip.text)}\n                        onPress={item.chip.clear}\n                        className=\"h-6 px-1\"\n                      >\n                        <CrossGlyph />\n                      </Button>\n                    </span>\n                  </Slot>\n                ) : (\n                  <Slot key={item.id} id={item.id} leaving={leaving} ready={ready} onDone={places.done}>\n                    <Button variant=\"link\" size=\"sm\" onPress={clearAll}>\n                      {clearAllLabel}\n                    </Button>\n                  </Slot>\n                ),\n              )}\n            </ul>\n          </div>\n        ) : (\n          <EmptyNote ready={ready}>{emptyLabel}</EmptyNote>\n        )}\n      </div>\n      {filters.length > 0 || end ? (\n        <div data-slot=\"filter-bar-actions\" className={filterBarRowVariants()}>\n          {filters.length > 0 ? (\n            <PopoverTrigger isOpen={open} onOpenChange={setOpen}>\n              <Button\n                variant=\"outlineNeutral\"\n                size=\"sm\"\n                startIcon={<PlusGlyph />}\n                data-slot=\"filter-bar-button\"\n              >\n                {buttonLabel}\n              </Button>\n              <Popover\n                placement=\"bottom end\"\n                offset={8}\n                className=\"w-64 max-w-[calc(100vw-2rem)] p-1.5\"\n              >\n                <FilterPanel\n                  filters={filters}\n                  label={buttonLabel}\n                  backLabel={backLabel}\n                  onClose={() => setOpen(false)}\n                />\n              </Popover>\n            </PopoverTrigger>\n          ) : null}\n          {end}\n        </div>\n      ) : null}\n    </div>\n  );\n});\n"],"mappings":"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"}