@seekalfred/primitives 0.5.1 → 0.7.1

package/dist/filter-bar/filter-bar.d.ts

@@ -0,0 +1,142 @@
+import { ReactNode } from "react";
+import { Key } from "react-aria-components";
+//#region src/filter-bar/filter-bar.d.ts
+/**
+ * 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
+ * second line; on a phone it scrolls sideways. The bar keeps the row to one
+ * line and makes what IS filtered visible as chips instead of as the
+ * resting text of a dropdown.
+ *
+ * Three regions, all inside the one pill:
+ *
+ * - `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).
+ *
+ * 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 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.
+ */
+/** The toolbar: one pill with a light border on the surface. */
+export declare const filterBarVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** The group at the pill's end: the Add filter button and the caller's `end`. */
+export declare const filterBarRowVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const filterBarChipVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** One option of a dropdown filter. */
+export interface FilterBarOption {
+  /** The option's value, handed to `onChange`. */
+  id: Key;
+  /** The option's text: in the list, on the trigger and on the chip. */
+  label: string;
+}
+/** A dropdown filter: a row in the Add filter menu that opens its options. */
+export interface FilterBarSelectField {
+  /** Stable identity, used as the React key. */
+  id: string;
+  /** The field's name: its row in the menu and the start of its chip. */
+  label: string;
+  /** An icon before the name in the menu row. Mark it `aria-hidden`. */
+  icon?: ReactNode;
+  /** The current value. `null` reads as not set. */
+  value: Key | null;
+  /** The value that means "not filtered" (the "All" option's id). */
+  emptyValue: Key;
+  /** The options, the "All" option included. */
+  options: readonly FilterBarOption[];
+  /** Told the chosen option's id, or `emptyValue` when the chip is removed. */
+  onChange: (value: Key) => void;
+}
+/**
+ * A filter that is not a plain dropdown (a date range, a searchable picker):
+ * the caller renders the control and says what its chip reads.
+ */
+export interface FilterBarCustomField {
+  /** Stable identity, used as the React key. */
+  id: string;
+  /** The start of its chip, and its row in the menu. The control rendered by `render` names itself. */
+  label: string;
+  /** An icon before the name in the menu row. Mark it `aria-hidden`. */
+  icon?: ReactNode;
+  /** The control, rendered in the menu's step for this filter. */
+  render: () => ReactNode;
+  /** The chip's value text while the filter is set, or `null` while it is not. */
+  activeLabel: string | null;
+  /** Unsets the filter: the chip's remove button and Clear all call it. */
+  onClear: () => void;
+}
+export type FilterBarField = FilterBarSelectField | FilterBarCustomField;
+export interface FilterBarProps {
+  /** Always in the pill, at its start: status tabs and the search box. */
+  inline?: ReactNode;
+  /** Always in the pill, at its end: a count, Export, a view toggle. */
+  end?: ReactNode;
+  /** The filters in the Add filter menu. With none, no button renders. */
+  filters: readonly FilterBarField[];
+  /** Resets every filter in one step. Without it, each set filter is handed its `emptyValue`. */
+  onClearAll?: () => void;
+  /**
+   * The button's text, and the menu's name.
+   *
+   * @default "Add filter"
+   */
+  buttonLabel?: string;
+  /**
+   * The text of Clear all.
+   *
+   * @default "Clear all"
+   */
+  clearAllLabel?: string;
+  /**
+   * Ignored: the menu has no Done button, because choosing an option closes it.
+   *
+   * @deprecated Kept so existing callers still compile.
+   */
+  doneLabel?: string;
+  /**
+   * The note shown while no filter is set.
+   *
+   * @default "No filters applied"
+   */
+  emptyLabel?: string;
+  /**
+   * The accessible name of the list of chips.
+   *
+   * @default "Filters set"
+   */
+  chipsLabel?: string;
+  /**
+   * The accessible name of a chip's remove button, given the chip's text.
+   *
+   * @default (text) => `Remove filter ${text}`
+   */
+  removeLabel?: (chipText: string) => string;
+  /**
+   * The accessible name of the menu's back button.
+   *
+   * @default "Back to filters"
+   */
+  backLabel?: string;
+  /** Extra classes on the root. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+export declare const FilterBar: import("react").ForwardRefExoticComponent<FilterBarProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+//# sourceMappingURL=filter-bar.d.ts.map

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

@@ -0,0 +1,416 @@
+"use client";
+import { cn, cnAll } from "../lib/cn.js";
+import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect, useMorphWidth } from "../lib/motion.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 { 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 { 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 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
+* second line; on a phone it scrolls sideways. The bar keeps the row to one
+* line and makes what IS filtered visible as chips instead of as the
+* resting text of a dropdown.
+*
+* Three regions, all inside the one pill:
+*
+* - `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).
+*
+* 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 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.
+*/
+/** 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",
+	"ps-3 pe-1 text-xs leading-(--leading-snug) text-foreground",
+	"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) {
+		const value = valueOf(f);
+		if (value == null) continue;
+		chips.push({
+			id: f.id,
+			text: `${f.label}: ${value}`,
+			clear: isCustom(f) ? f.onClear : () => f.onChange(f.emptyValue)
+		});
+	}
+	return chips;
+}
+function Glyph({ path }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			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 filters behind one Add filter button.
+*
+* @example
+* <FilterBar
+*   end={<Button>Export</Button>}
+*   filters={[{ id: "status", label: "Status", icon: <StatusIcon aria-hidden />, value, emptyValue: "all",
+*     onChange: setValue, options: [{ id: "all", label: "Any status" }, { id: "open", label: "Open" }] }]}
+* />
+*/
+/**
+* One place in the chip row, for a chip or for Clear all. A slot added after the
+* first render opens from nothing while its content fades up and scales in, so the
+* chips beside it glide over; one that is removed stays, shrinking and collapsing,
+* until its exit ends. Nothing animates at first render.
+*/
+function Slot({ leaving, ready, onDone, id, children }) {
+	const [fresh] = useState(ready);
+	const remove = useCallback(() => onDone(id), [onDone, id]);
+	useExitBackstop(leaving, remove, 900);
+	useIsomorphicLayoutEffect(() => {
+		if (leaving && prefersReducedMotion()) remove();
+	}, [leaving, remove]);
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": leaving ? "filter-bar-leaving" : void 0,
+		"aria-hidden": leaving || void 0,
+		ref: (node) => {
+			if (!node) return;
+			if (leaving) node.setAttribute("inert", "");
+			else node.removeAttribute("inert");
+		},
+		onAnimationEnd: (event) => {
+			if (leaving && event.target === event.currentTarget && event.animationName === "chip-slot-out") remove();
+		},
+		className: cnAll("min-w-0 flex-none [interpolate-size:allow-keywords]", leaving ? "pointer-events-none motion-safe:animate-chip-out" : fresh && "motion-safe:animate-chip-in motion-reduce:animate-fade-in"),
+		children
+	});
+}
+/** 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);
+	useMorphWidth(content, text);
+	return /* @__PURE__ */ jsx("span", {
+		className: "button-slot",
+		children: /* @__PURE__ */ jsx("span", {
+			ref: content,
+			className: "inline-flex flex-none items-center",
+			children: /* @__PURE__ */ jsx(SwapText, {
+				swapKey: text,
+				className: "inline-block",
+				children: text
+			})
+		})
+	});
+}
+/** 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);
+	useEffect(() => {
+		const frame = requestAnimationFrame(() => setReady(true));
+		return () => cancelAnimationFrame(frame);
+	}, []);
+	const places = useLeavingList([...chips.map((chip) => ({
+		id: chip.id,
+		chip
+	})), ...chips.length > 0 ? [{
+		id: "\0clear",
+		chip: null
+	}] : []]);
+	const frame = useRef(null);
+	const row = useRef(null);
+	useHeightFollow(frame, row, chips.map((chip) => chip.id).join());
+	const clearAll = () => {
+		if (onClearAll) onClearAll();
+		else for (const c of chips) c.clear();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "filter-bar",
+		className: cn(filterBarVariants(), className),
+		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__ */ jsx(Button$1, {
+						variant: "outlineNeutral",
+						size: "sm",
+						startIcon: /* @__PURE__ */ jsx(PlusGlyph, {}),
+						"data-slot": "filter-bar-button",
+						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]
+			}) : null
+		]
+	});
+});
+//#endregion
+export { FilterBar, filterBarChipVariants, filterBarRowVariants, filterBarVariants };
+
+//# sourceMappingURL=filter-bar.js.map

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

@@ -0,0 +1 @@
+{"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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"}

package/dist/filter-bar/index.d.ts

@@ -0,0 +1,2 @@
+import { FilterBar, FilterBarCustomField, FilterBarField, FilterBarOption, FilterBarProps, FilterBarSelectField, filterBarChipVariants, filterBarRowVariants, filterBarVariants } from "./filter-bar.js";
+export { FilterBar, type FilterBarCustomField, type FilterBarField, type FilterBarOption, type FilterBarProps, type FilterBarSelectField, filterBarChipVariants, filterBarRowVariants, filterBarVariants };

package/dist/filter-bar/index.js

@@ -0,0 +1,2 @@
+import { FilterBar, filterBarChipVariants, filterBarRowVariants, filterBarVariants } from "./filter-bar.js";
+export { FilterBar, filterBarChipVariants, filterBarRowVariants, filterBarVariants };