@jonmilner/ui 0.5.0 → 0.5.1

package/dist/MultiSelect/client.d.mts

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import "@base-ui/react/select";
 //#region src/MultiSelect/client.d.ts
 export type Option = {
   disabled?: boolean;

package/dist/MultiSelect/client.mjs

@@ -1,56 +1,57 @@
 "use client";
-import { Box as e } from "../Box/index.mjs";
-import { Text as t } from "../Text/index.mjs";
-import { PopupScope as n, triggerElement as r, usePopupScope as i } from "../popup/client.mjs";
-import { Field as a } from "../Field/index.mjs";
-import { ChevronDownIcon as o } from "../icons/ChevronDownIcon.mjs";
-import { labels as s, popup as c, summary as l, trigger as u, value as d } from "./MultiSelect.css.mjs";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { createContext as m, use as h, useId as g, useLayoutEffect as _, useMemo as v, useRef as y, useState as b } from "react";
-import { Select as x } from "@base-ui/react/select";
+import { splitStyleProps as e } from "../styles/split-style-props.mjs";
+import { Box as t } from "../Box/index.mjs";
+import { Text as n } from "../Text/index.mjs";
+import { PopupScope as r, triggerElement as i, useClosingRule as a, usePopupScope as o, useRecordOpenChange as s } from "../popup/client.mjs";
+import { Field as c } from "../Field/index.mjs";
+import { ChevronDownIcon as l } from "../icons/ChevronDownIcon.mjs";
+import { labels as u, popup as d, summary as f, trigger as p, value as m } from "./MultiSelect.css.mjs";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { createContext as _, use as v, useId as y, useLayoutEffect as b, useMemo as x, useRef as S, useState as C } from "react";
+import { Select as w } from "@base-ui/react/select";
 //#region src/MultiSelect/client.tsx
-function S({ options: e, placeholder: t, countLabel: n, disabled: a }) {
-	let { ref: s } = i(), c = v(() => new Map(e.map((e) => [e.value, e.label])), [e]);
-	return /* @__PURE__ */ f(x.Trigger, {
-		disabled: a,
-		ref: s,
-		render: r({
+function T({ options: e, placeholder: t, countLabel: n, disabled: r }) {
+	let { ref: a } = o(), s = x(() => new Map(e.map((e) => [e.value, e.label])), [e]);
+	return /* @__PURE__ */ h(w.Trigger, {
+		disabled: r,
+		ref: a,
+		render: i({
 			variant: "secondary",
-			iconEnd: o,
-			className: u,
-			children: /* @__PURE__ */ f(x.Value, {
-				className: d,
+			iconEnd: l,
+			className: p,
+			children: /* @__PURE__ */ h(w.Value, {
+				className: m,
 				placeholder: t,
-				children: (e) => e.length > 0 ? /* @__PURE__ */ f(C, {
+				children: (e) => e.length > 0 ? /* @__PURE__ */ h(E, {
 					count: n.replaceAll("{count}", String(e.length)),
-					labels: e.map((e) => c.get(e) ?? e)
+					labels: e.map((e) => s.get(e) ?? e)
 				}) : t
 			})
 		})
 	});
 }
-function C({ labels: n, count: r }) {
-	let i = y(null), [a, o] = b(!0), c = n.join(", ");
-	_(() => {
+function E({ labels: e, count: r }) {
+	let i = S(null), [a, o] = C(!0), s = e.join(", ");
+	b(() => {
 		let e = i.current;
 		if (!e) return;
 		let t = () => o(e.scrollWidth <= e.clientWidth);
 		t(), document.fonts?.ready.then(t);
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => n.disconnect();
-	}, [c]);
-	let u = !a && n.length > 1;
-	return /* @__PURE__ */ p(e, {
+	}, [s]);
+	let c = !a && e.length > 1;
+	return /* @__PURE__ */ g(t, {
 		as: "span",
-		className: l,
-		children: [/* @__PURE__ */ f(t, {
-			"aria-hidden": u || void 0,
+		className: f,
+		children: [/* @__PURE__ */ h(n, {
+			"aria-hidden": c || void 0,
 			as: "span",
-			className: s,
+			className: u,
 			ref: i,
 			truncate: "box",
-			children: c
-		}), u && /* @__PURE__ */ f(t, {
+			children: s
+		}), c && /* @__PURE__ */ h(n, {
 			as: "span",
 			className: "_1seauxl4",
 			truncate: "box",
@@ -58,39 +59,73 @@ function C({ labels: n, count: r }) {
 		})]
 	});
 }
-var w = m(void 0);
-function T({ children: e }) {
-	return /* @__PURE__ */ f(n, { children: /* @__PURE__ */ f(w, {
-		value: g(),
+var D = _(void 0);
+function O({ children: e }) {
+	return /* @__PURE__ */ h(r, { children: /* @__PURE__ */ h(D, {
+		value: y(),
 		children: e
 	}) });
 }
-function E({ children: e }) {
-	return /* @__PURE__ */ f(a.Label, {
-		id: h(w),
+function k(e) {
+	return /* @__PURE__ */ h(w.Root, {
+		...e,
+		multiple: !0,
+		onOpenChange: s()
+	});
+}
+function A({ children: e }) {
+	return /* @__PURE__ */ h(c.Label, {
+		id: v(D),
 		nativeLabel: !1,
 		children: e
 	});
 }
-function D({ children: t }) {
-	return /* @__PURE__ */ f(x.Popup, {
-		"aria-labelledby": h(w),
-		render: /* @__PURE__ */ f(e, {
+function j({ children: e }) {
+	return /* @__PURE__ */ h(w.Popup, {
+		"aria-labelledby": v(D),
+		render: /* @__PURE__ */ h(t, {
 			backgroundColor: "bgRaised",
 			borderRadius: "med",
 			boxShadow: "med",
-			className: c,
+			className: d,
 			padding: "4"
 		}),
-		children: t
+		children: e
 	});
 }
-function O({ children: e }) {
-	let { container: t } = i();
-	return /* @__PURE__ */ f(x.Portal, {
+function M({ children: e }) {
+	let { container: t } = o();
+	return /* @__PURE__ */ h(w.Portal, {
 		container: t,
 		children: e
 	});
 }
+function N({ children: t }) {
+	return /* @__PURE__ */ h(w.Positioner, {
+		align: "start",
+		alignItemWithTrigger: !1,
+		collisionPadding: 8,
+		render: (t, { open: n }) => {
+			let [, r] = e(t);
+			return /* @__PURE__ */ h(P, {
+				...r,
+				open: n
+			});
+		},
+		side: "bottom",
+		sideOffset: 4,
+		children: t
+	});
+}
+function P({ open: e, ref: n, ...r }) {
+	return /* @__PURE__ */ h(t, {
+		...r,
+		...a(n, {
+			finalFocus: !1,
+			open: e
+		}),
+		zIndex: "popover"
+	});
+}
 //#endregion
-export { E as MultiSelectLabel, D as MultiSelectPopup, O as MultiSelectPortal, T as MultiSelectScope, S as MultiSelectTrigger };
+export { A as MultiSelectLabel, j as MultiSelectPopup, M as MultiSelectPortal, N as MultiSelectPositioner, k as MultiSelectRoot, O as MultiSelectScope, T as MultiSelectTrigger };

package/dist/MultiSelect/index.mjs

@@ -3,73 +3,64 @@ import { Text as t } from "../Text/index.mjs";
 import { CheckIcon as n } from "../icons/CheckIcon.mjs";
 import { Field as r } from "../Field/index.mjs";
 import { check as i, item as a } from "./MultiSelect.css.mjs";
-import { MultiSelectLabel as o, MultiSelectPopup as s, MultiSelectPortal as c, MultiSelectScope as l, MultiSelectTrigger as u } from "./client.mjs";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { Select as p } from "@base-ui/react/select";
+import { MultiSelectLabel as o, MultiSelectPopup as s, MultiSelectPortal as c, MultiSelectPositioner as l, MultiSelectRoot as u, MultiSelectScope as d, MultiSelectTrigger as f } from "./client.mjs";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Select as h } from "@base-ui/react/select";
 //#region src/MultiSelect/index.tsx
-function m({ options: m, value: h, defaultValue: g, onValueChange: _, label: v, description: y, error: b, placeholder: x = "Select", countLabel: S = "{count} selected", disabled: C = !1, required: w = !1, name: T, className: E, style: D, ...O }) {
-	return /* @__PURE__ */ f(r, {
-		...O,
-		className: E,
-		disabled: C,
-		invalid: b != null && b !== !1 && b !== "",
-		style: D,
+function g({ options: g, value: _, defaultValue: v, onValueChange: y, label: b, description: x, error: S, placeholder: C = "Select", countLabel: w = "{count} selected", disabled: T = !1, required: E = !1, name: D, className: O, style: k, ...A }) {
+	return /* @__PURE__ */ m(r, {
+		...A,
+		className: O,
+		disabled: T,
+		invalid: S != null && S !== !1 && S !== "",
+		style: k,
 		children: [
-			/* @__PURE__ */ d(l, { children: /* @__PURE__ */ f(p.Root, {
-				defaultValue: g,
-				disabled: C,
-				multiple: !0,
-				name: T,
-				onValueChange: _,
-				required: w,
-				value: h,
+			/* @__PURE__ */ p(d, { children: /* @__PURE__ */ m(u, {
+				defaultValue: v,
+				disabled: T,
+				name: D,
+				onValueChange: y,
+				required: E,
+				value: _,
 				children: [
-					/* @__PURE__ */ d(o, { children: v }),
-					/* @__PURE__ */ d(u, {
-						countLabel: S,
-						disabled: C,
-						options: m,
-						placeholder: x
+					/* @__PURE__ */ p(o, { children: b }),
+					/* @__PURE__ */ p(f, {
+						countLabel: w,
+						disabled: T,
+						options: g,
+						placeholder: C
 					}),
-					/* @__PURE__ */ d(c, { children: /* @__PURE__ */ d(p.Positioner, {
-						align: "start",
-						alignItemWithTrigger: !1,
-						collisionPadding: 8,
-						render: /* @__PURE__ */ d(e, { zIndex: "popover" }),
-						side: "bottom",
-						sideOffset: 4,
-						children: /* @__PURE__ */ d(s, { children: m.map((r) => /* @__PURE__ */ f(p.Item, {
-							disabled: r.disabled,
-							label: r.label,
-							render: /* @__PURE__ */ d(e, {
-								alignItems: "center",
-								borderRadius: "sm",
-								className: a,
-								display: "flex",
-								gap: "8",
-								minBlockSize: "sm",
-								paddingInline: "12"
-							}),
-							value: r.value,
-							children: [/* @__PURE__ */ d(n, {
-								className: i,
+					/* @__PURE__ */ p(c, { children: /* @__PURE__ */ p(l, { children: /* @__PURE__ */ p(s, { children: g.map((r) => /* @__PURE__ */ m(h.Item, {
+						disabled: r.disabled,
+						label: r.label,
+						render: /* @__PURE__ */ p(e, {
+							alignItems: "center",
+							borderRadius: "sm",
+							className: a,
+							display: "flex",
+							gap: "8",
+							minBlockSize: "sm",
+							paddingInline: "12"
+						}),
+						value: r.value,
+						children: [/* @__PURE__ */ p(n, {
+							className: i,
+							size: "sm"
+						}), /* @__PURE__ */ p(h.ItemText, {
+							render: /* @__PURE__ */ p(t, {
+								as: "span",
+								font: "label",
 								size: "sm"
-							}), /* @__PURE__ */ d(p.ItemText, {
-								render: /* @__PURE__ */ d(t, {
-									as: "span",
-									font: "label",
-									size: "sm"
-								}),
-								children: r.label
-							})]
-						}, r.value)) })
-					}) })
+							}),
+							children: r.label
+						})]
+					}, r.value)) }) }) })
 				]
 			}) }),
-			y != null && /* @__PURE__ */ d(r.Description, { children: y }),
-			/* @__PURE__ */ d(r.Error, { children: b })
+			x != null && /* @__PURE__ */ p(r.Description, { children: x }),
+			/* @__PURE__ */ p(r.Error, { children: S })
 		]
 	});
 }
 //#endregion
-export { m as MultiSelect };
+export { g as MultiSelect };

package/dist/docs/MultiSelect.md

@@ -89,7 +89,8 @@ A form field for picking any number of values from a list too long to show at on
 ## Accessibility
 
 - The trigger is a button with `aria-haspopup="listbox"` and `aria-expanded`, labelled by the `Field` label and described by the description and error. The popup is `role="listbox"` with `aria-multiselectable="true"`, options are `role="option"` with `aria-selected`.
-- Opening from the keyboard focuses an option; focus stays in the list until it closes, then returns to the trigger. Choosing an option toggles it and leaves the list open, so several can be picked in one visit.
+- Opening from the keyboard focuses an option; focus stays in the list until it closes. Choosing an option toggles it and leaves the list open, so several can be picked in one visit. Closed by Esc or the trigger, focus returns at once to the trigger, so a Tab pressed while the list fades goes on to the next control. A press outside or a Tab out leaves focus to Base UI.
+- A closed list stays on the page while it fades out, but is `inert` and `aria-hidden` from the moment it closes, so a list opened during the fade (the next filter's) is the only one a screen reader or a role query finds, and nothing in the fading one takes focus or a click (ADR 0113).
 - Selection is a check mark on the option as well as its highlight, so it is not color alone. The check's space is always in the row, so the text never shifts.
 - The trigger summary is text: the joined labels, or the count. When the count replaces the labels, the labels are hidden from assistive technology so the count is read once.
 - The shared focus ring shows on the trigger and, from the keyboard, on the highlighted option. Under forced colors the highlighted option is `Highlight` with `HighlightText`, and the popup keeps its border.

package/dist/docs/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./manifest.schema.json",
   "package": "@jonmilner/ui",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "components": [
     {
       "name": "AlertDialog",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jonmilner/ui",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "files": [
     "dist",
     "THIRD_PARTY_NOTICES.md"