@nizivo/react 0.0.0-stage → 0.2.0

package/dist/_engines/react-aria/menu.client.js

@@ -0,0 +1,229 @@
+"use client";
+import { mergeProps } from "../../contracts/merge-props.js";
+import { details } from "../../contracts/details.js";
+import { stateAttrs } from "../../contracts/state.js";
+import { defined, engineDom } from "./dom.js";
+import { EngineLocale } from "./locale.client.js";
+import { popupStyle, resolveSide, toPlacement } from "./overlay.client.js";
+import { useOpenState } from "./open-state.client.js";
+import { ReturnFocus, useTabOut, useTriggerRef } from "./popup.client.js";
+import { OutsidePress } from "./outside-press.client.js";
+import { Children, createContext, createElement, isValidElement, use, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Header, Menu, MenuItem, MenuSection, MenuTrigger, Popover, RootMenuTriggerStateContext, Separator, useLocale } from "react-aria-components";
+//#region src/_engines/react-aria/menu.client.tsx
+/**
+* Uncontrolled checkbox and radio state, kept by the Root: the popup and everything in it unmount on
+* close, so state held there would reset on every open. A checkbox item is identified by its text, a
+* radio group by its items' values; without either, the state lasts while the popup is open.
+*/
+const Kept = createContext(null);
+function useKept(key, initial, read) {
+	const store = use(Kept);
+	const [value, setValue] = useState(() => {
+		const kept = key === void 0 ? void 0 : store?.get(key);
+		return read(kept) ? kept : initial;
+	});
+	return [value, (next) => {
+		if (key !== void 0) store?.set(key, next);
+		setValue(next);
+	}];
+}
+const isBoolean = (value) => typeof value === "boolean";
+const isChoice = (value) => typeof value === "string" || value === null;
+/** The `value` props of the radio items under `children`, through fragments and wrappers. */
+function itemValues(children, out = []) {
+	Children.forEach(children, (child) => {
+		if (!isValidElement(child)) return;
+		if (typeof child.props.value === "string") out.push(child.props.value);
+		else itemValues(child.props.children, out);
+	});
+	return out;
+}
+const Root = ({ open, defaultOpen, onOpenChange, children }) => {
+	const [store] = useState(() => /* @__PURE__ */ new Map());
+	const [isOpen, setOpen, key] = useOpenState(open, defaultOpen, onOpenChange);
+	return /* @__PURE__ */ jsx(EngineLocale, { children: /* @__PURE__ */ jsx(Kept, {
+		value: store,
+		children: /* @__PURE__ */ jsx(MenuTrigger, {
+			isOpen,
+			onOpenChange: setOpen,
+			children
+		}, key)
+	}) });
+};
+const Trigger = ({ render, children, ...dom }) => {
+	const open = use(RootMenuTriggerStateContext)?.isOpen ?? false;
+	return /* @__PURE__ */ jsx(Button, {
+		render: (p, rp) => {
+			const s = {
+				open,
+				pressed: rp.isPressed && !open,
+				focusVisible: rp.isFocusVisible,
+				disabled: rp.isDisabled
+			};
+			return render(mergeProps(engineDom(p), dom, stateAttrs(s)), s);
+		},
+		children
+	});
+};
+/**
+* The engine names the menu by its trigger (`aria-labelledby`), which would outrank an `aria-label`
+* the leaf passes; with one, the label names the menu instead.
+*/
+function listDom(engine, list) {
+	const out = engineDom(engine);
+	if (list["aria-label"] !== void 0) delete out["aria-labelledby"];
+	return out;
+}
+const Popup = ({ side, align, sideOffset, container, list, render, children, ...dom }) => {
+	const { direction } = useLocale();
+	const popup = useRef(null);
+	const tabOut = useTabOut(popup);
+	const trigger = useTriggerRef();
+	return /* @__PURE__ */ jsxs(Popover, {
+		placement: toPlacement(side, align),
+		offset: sideOffset,
+		...defined({ UNSTABLE_portalContainer: container ?? void 0 }),
+		render: (p, rp) => {
+			const s = {
+				entering: rp.isEntering,
+				exiting: rp.isExiting,
+				side: resolveSide(rp.placement, side, direction)
+			};
+			const engine = {
+				...engineDom(p),
+				style: popupStyle(p.style)
+			};
+			const attrs = stateAttrs({
+				open: !rp.isExiting,
+				...s,
+				align
+			});
+			return render(mergeProps(engine, dom, attrs, { ref: popup }), s);
+		},
+		children: [
+			/* @__PURE__ */ jsx(ReturnFocus, {
+				trigger,
+				popup
+			}),
+			/* @__PURE__ */ jsx(OutsidePress, { popup }),
+			/* @__PURE__ */ jsx(Menu, {
+				render: (p) => createElement("div", mergeProps(listDom(p, list), list, { onKeyDown: tabOut })),
+				children
+			})
+		]
+	});
+};
+const Item = ({ textValue, disabled, onAction, closeOnSelect, href, target, rel, download, hrefLang, ping, referrerPolicy, render, children, ...dom }) => /* @__PURE__ */ jsx(MenuItem, {
+	...defined({
+		textValue,
+		isDisabled: disabled,
+		onAction,
+		shouldCloseOnSelect: closeOnSelect,
+		href,
+		target,
+		rel,
+		download,
+		hrefLang,
+		ping,
+		referrerPolicy
+	}),
+	render: (p, rp) => {
+		const s = {
+			highlighted: rp.isFocused,
+			disabled: rp.isDisabled,
+			focusVisible: rp.isFocusVisible,
+			checked: false
+		};
+		return render(mergeProps(engineDom(p), dom, stateAttrs(s)), s);
+	},
+	children
+});
+/**
+* React Aria derives checkbox semantics from a selection scope (a Menu or MenuSection with
+* `selectionMode`), which would turn every item in that scope into a checkbox. A checkbox item owns
+* its own state instead: the adapter keeps it, toggles it on the item's action and writes the
+* `menuitemcheckbox` role and `aria-checked` the engine would have written.
+*/
+const CheckboxItem = ({ checked, defaultChecked, onCheckedChange, textValue, disabled, onAction, closeOnSelect, render, children, ...dom }) => {
+	const [own, setOwn] = useKept(textValue === void 0 ? void 0 : `checkbox:${textValue}`, defaultChecked ?? false, isBoolean);
+	const isChecked = checked ?? own;
+	return /* @__PURE__ */ jsx(MenuItem, {
+		...defined({
+			textValue,
+			isDisabled: disabled
+		}),
+		shouldCloseOnSelect: closeOnSelect ?? false,
+		onAction: () => {
+			const next = !isChecked;
+			if (checked === void 0) setOwn(next);
+			onCheckedChange?.(next, details("item-press"));
+			onAction?.();
+		},
+		render: (p, rp) => {
+			const s = {
+				highlighted: rp.isFocused,
+				disabled: rp.isDisabled,
+				focusVisible: rp.isFocusVisible,
+				checked: isChecked
+			};
+			const aria = {
+				role: "menuitemcheckbox",
+				"aria-checked": isChecked
+			};
+			return render(mergeProps(engineDom(p), aria, dom, stateAttrs(s)), s);
+		},
+		children
+	});
+};
+/** A single-selection scope: React Aria gives its items `menuitemradio` and `aria-checked`. */
+const RadioGroup = ({ value, defaultValue, onValueChange, render, children, ...dom }) => {
+	const values = itemValues(children);
+	const [own, setOwn] = useKept(values.length === 0 ? void 0 : `radio:${values.join("\0")}`, defaultValue ?? null, isChoice);
+	const current = value === void 0 ? own : value;
+	return /* @__PURE__ */ jsx(MenuSection, {
+		selectionMode: "single",
+		disallowEmptySelection: true,
+		selectedKeys: current === null ? [] : [current],
+		onSelectionChange: (selection) => {
+			if (selection === "all") return;
+			const [key] = selection;
+			if (key === void 0) return;
+			if (value === void 0) setOwn(String(key));
+			onValueChange?.(String(key), details("unknown"));
+		},
+		render: (p) => render(mergeProps(engineDom(p), dom), {}),
+		children
+	});
+};
+const RadioItem = ({ value, textValue, disabled, onAction, closeOnSelect, render, children, ...dom }) => /* @__PURE__ */ jsx(MenuItem, {
+	id: value,
+	...defined({
+		textValue,
+		isDisabled: disabled,
+		onAction,
+		shouldCloseOnSelect: closeOnSelect
+	}),
+	render: (p, rp) => {
+		const s = {
+			highlighted: rp.isFocused,
+			disabled: rp.isDisabled,
+			focusVisible: rp.isFocusVisible,
+			checked: rp.isSelected
+		};
+		return render(mergeProps(engineDom(p), dom, stateAttrs(s)), s);
+	},
+	children
+});
+const Group = ({ render, children, ...dom }) => /* @__PURE__ */ jsx(MenuSection, {
+	render: (p) => render(mergeProps(engineDom(p), dom), {}),
+	children
+});
+const GroupLabel = ({ render, children, ...dom }) => /* @__PURE__ */ jsx(Header, {
+	render: (p) => render(mergeProps(engineDom(p), dom), {}),
+	children
+});
+const Separator$1 = ({ render, ...dom }) => /* @__PURE__ */ jsx(Separator, { render: (p) => render(mergeProps(engineDom(p), dom), {}) });
+//#endregion
+export { CheckboxItem, Group, GroupLabel, Item, Popup, RadioGroup, RadioItem, Root, Separator$1 as Separator, Trigger };

package/dist/_engines/react-aria/open-state.client.js

@@ -0,0 +1,53 @@
+"use client";
+import { details } from "../../contracts/details.js";
+import { createContext, useLayoutEffect, useRef, useState } from "react";
+//#region src/_engines/react-aria/open-state.client.tsx
+/**
+* The key, for a popup part whose Root keeps other state in the engine (Select's value): that part
+* remounts its popup instead.
+*/
+const PopupKey = createContext(0);
+/**
+* `[isOpen, setOpen, key]` for the engine: the consumer's `open`, else the Root's own state, and the
+* key to render the engine's root with.
+*/
+function useOpenState(open, defaultOpen, onOpenChange) {
+	const [own, setOwn] = useState(defaultOpen ?? false);
+	const [key, setKey] = useState(0);
+	const controlled = open !== void 0;
+	const isOpen = controlled ? open : own;
+	const latest = useRef({
+		controlled,
+		onOpenChange
+	});
+	useLayoutEffect(() => {
+		latest.current = {
+			controlled,
+			onOpenChange
+		};
+	});
+	const seenClosed = useRef(false);
+	const armed = useRef(false);
+	useLayoutEffect(() => {
+		if (!isOpen) seenClosed.current = true;
+		armed.current = isOpen && seenClosed.current;
+	}, [isOpen]);
+	useLayoutEffect(() => () => {
+		if (!armed.current) return;
+		armed.current = false;
+		if (!latest.current.controlled) setOwn(false);
+		setKey((k) => k + 1);
+		latest.current.onOpenChange?.(false, details("hidden"));
+	}, []);
+	const setOpen = (next) => {
+		if (!controlled) setOwn(next);
+		onOpenChange?.(next, details("unknown"));
+	};
+	return [
+		isOpen,
+		setOpen,
+		key
+	];
+}
+//#endregion
+export { PopupKey, useOpenState };

package/dist/_engines/react-aria/outside-press.client.js

@@ -0,0 +1,61 @@
+"use client";
+import { returnAfterClose } from "./popup.client.js";
+import { use, useEffect, useLayoutEffect, useRef } from "react";
+import { OverlayTriggerStateContext } from "react-aria-components";
+//#region src/_engines/react-aria/outside-press.client.tsx
+/**
+* The family's open popups, in open order. Its own list, not popup.client's registry: a Select's
+* hidden collection pass registers and unregisters there under the same ref. Only entries on the
+* page count.
+*/
+const STACK = [];
+const onPage = (popup) => popup.current?.isConnected === true;
+/**
+* Outside press for a popup opened inside another overlay (§12.2 Dismiss stack). React Aria's
+* useInteractOutside ignores every press inside an element marked top-layer, and the family's
+* nested-portal containers carry that mark (§12.1 L2), so a press on a nested popup's underlay, or
+* anywhere else in its parent's container, never reached the engine's dismiss logic: a Select or
+* Menu inside a Dialog stayed open (weeks 4 to 12; found in week 13). The family completes it: a
+* press that starts and ends outside `popup`, inside a top-layer element that is not Nizivo's own
+* top layer (the toast region and announcer, `data-nz-top-layer`, dismiss nothing) and not on a
+* tooltip, closes `popup` when it is the topmost. Every other press stays with the engine. The
+* element is read at the press: a Select's popup is attached after this component's first effect.
+*/
+function OutsidePress({ popup, dismissable = true }) {
+	const context = use(OverlayTriggerStateContext);
+	const state = useRef(context);
+	useLayoutEffect(() => {
+		state.current = context;
+	});
+	useEffect(() => {
+		STACK.push(popup);
+		const ours = (event) => {
+			const element = popup.current;
+			const { target } = event;
+			if (!dismissable || event.button > 0 || element === null || !(target instanceof Element) || element.contains(target)) return false;
+			const host = target.closest("[data-react-aria-top-layer]");
+			return host !== null && host.closest("[data-nz-top-layer]") === null && target.closest("[role=\"tooltip\"]") === null && STACK.findLast(onPage) === popup;
+		};
+		let started = false;
+		const down = (event) => {
+			started = ours(event);
+		};
+		const up = (event) => {
+			if (started && ours(event)) {
+				returnAfterClose(popup);
+				state.current?.close();
+			}
+			started = false;
+		};
+		document.addEventListener("pointerdown", down, true);
+		document.addEventListener("pointerup", up, true);
+		return () => {
+			STACK.splice(STACK.lastIndexOf(popup), 1);
+			document.removeEventListener("pointerdown", down, true);
+			document.removeEventListener("pointerup", up, true);
+		};
+	}, [popup, dismissable]);
+	return null;
+}
+//#endregion
+export { OutsidePress };

package/dist/_engines/react-aria/overlay.client.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { UNSAFE_PortalProvider } from "react-aria/PortalProvider";
+//#region src/_engines/react-aria/overlay.client.tsx
+/** Nested overlays rendered inside `children` portal into `container` (§12.1 L2). */
+function OverlayScope({ container, children }) {
+	return /* @__PURE__ */ jsx(UNSAFE_PortalProvider, {
+		getContainer: () => container.current ?? (typeof document === "undefined" ? null : document.body),
+		children
+	});
+}
+/** React Aria's inert exemption, as props for an element the adapter renders itself. */
+const TOP_LAYER = { "data-react-aria-top-layer": "" };
+/** Maps Nizivo's `data-nz-top-layer` to React Aria's inert exemption. */
+function markTopLayer(element) {
+	element.setAttribute("data-react-aria-top-layer", "");
+	return () => element.removeAttribute("data-react-aria-top-layer");
+}
+/** Logical side + alignment → a React Aria placement. */
+function toPlacement(side, align) {
+	if (align === "center") return side;
+	if (side === "top" || side === "bottom") return `${side} ${align}`;
+	return `${side} ${align === "start" ? "top" : "bottom"}`;
+}
+/** The resolved physical side: the engine's placement after flip and RTL, else the requested side. */
+function resolveSide(placement, requested, direction) {
+	if (placement === "top" || placement === "bottom" || placement === "left" || placement === "right") return placement;
+	if (requested === "start") return direction === "rtl" ? "right" : "left";
+	if (requested === "end") return direction === "rtl" ? "left" : "right";
+	return requested;
+}
+/**
+* The engine's positioning style without its fixed `z-index` (popups sit in the one
+* `--nz-z-overlay` band, §12.1), plus the runtime variables Nizivo documents (§8.3).
+*/
+function popupStyle(style) {
+	if (typeof style !== "object" || style === null) return void 0;
+	const out = {};
+	for (const [key, value] of Object.entries(style)) if (key !== "zIndex") out[key] = value;
+	if (out["--trigger-width"] != null) out["--nz-trigger-width"] = out["--trigger-width"];
+	if (out["--trigger-anchor-point"] != null) out["--nz-transform-origin"] = out["--trigger-anchor-point"];
+	if (typeof out["maxHeight"] === "number") out["--nz-available-height"] = `${out["maxHeight"]}px`;
+	return out;
+}
+//#endregion
+export { OverlayScope, TOP_LAYER, markTopLayer, popupStyle, resolveSide, toPlacement };

package/dist/_engines/react-aria/popover.client.js

@@ -0,0 +1,148 @@
+"use client";
+import { mergeProps } from "../../contracts/merge-props.js";
+import { stateAttrs } from "../../contracts/state.js";
+import { defined, engineDom } from "./dom.js";
+import { EngineLocale } from "./locale.client.js";
+import { OverlayScope, markTopLayer, popupStyle, resolveSide, toPlacement } from "./overlay.client.js";
+import { useOpenState } from "./open-state.client.js";
+import { InitialFocus, ReturnFocus, useTriggerRef } from "./popup.client.js";
+import { OutsidePress } from "./outside-press.client.js";
+import { createElement, use, useCallback, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogTrigger, Heading, OverlayTriggerStateContext, Popover, Text, useLocale } from "react-aria-components";
+//#region src/_engines/react-aria/popover.client.tsx
+const Root = ({ open, defaultOpen, onOpenChange, children }) => {
+	const [isOpen, setOpen, key] = useOpenState(open, defaultOpen, onOpenChange);
+	return /* @__PURE__ */ jsx(EngineLocale, { children: /* @__PURE__ */ jsx(DialogTrigger, {
+		isOpen,
+		onOpenChange: setOpen,
+		children
+	}, key) });
+};
+const Trigger = ({ render, children, ...dom }) => {
+	const open = use(OverlayTriggerStateContext)?.isOpen ?? false;
+	return /* @__PURE__ */ jsx(Button, {
+		render: (p, rp) => {
+			const s = {
+				open,
+				pressed: rp.isPressed && !open,
+				focusVisible: rp.isFocusVisible,
+				disabled: rp.isDisabled
+			};
+			return render(mergeProps(engineDom(p), dom, stateAttrs(s)), s);
+		},
+		children
+	});
+};
+/**
+* The nested-portal container (§12.1 L2): a box-less element right after the popup, in the
+* container the popup portaled into, so overlays opened inside the popover paint above it. It is not
+* inside the popup, which scrolls (a clip) and scales while it enters. The engine hides everything
+* outside a modal popover, so it carries the family's top-layer exemption, as the Dialog's does: a
+* tooltip portaled there stays hoverable (WCAG 1.4.13). Created here, not by React, because the
+* engine owns the popup's portal and nothing can render a sibling into it. A hidden anchor inside
+* the popup makes it with a stable callback ref: in the commit that inserts the popup, so a tooltip
+* shown by the initial focus (a passive effect) already finds it; a ref merged into the popup's own
+* props would be a new function, detached and attached again, on every render.
+*/
+function useNestedContainer() {
+	const container = useRef(null);
+	return {
+		container,
+		anchor: useCallback((element) => {
+			const popup = element?.parentElement;
+			if (popup == null) return void 0;
+			const nested = popup.ownerDocument.createElement("div");
+			nested.style.display = "contents";
+			const undo = markTopLayer(nested);
+			popup.after(nested);
+			container.current = nested;
+			return () => {
+				undo();
+				nested.remove();
+				if (container.current === nested) container.current = null;
+			};
+		}, [])
+	};
+}
+const Popup = ({ side, align, sideOffset, container, contentProps, initialFocus, "aria-label": label, "aria-labelledby": labelledBy, "aria-describedby": describedBy, render, children, ...dom }) => {
+	const { direction } = useLocale();
+	const popup = useRef(null);
+	const content = useRef(null);
+	const { container: nested, anchor } = useNestedContainer();
+	const trigger = useTriggerRef();
+	return /* @__PURE__ */ jsxs(Popover, {
+		placement: toPlacement(side, align),
+		offset: sideOffset,
+		...defined({ UNSTABLE_portalContainer: container ?? void 0 }),
+		render: (p, rp) => {
+			const s = {
+				entering: rp.isEntering,
+				exiting: rp.isExiting,
+				side: resolveSide(rp.placement, side, direction)
+			};
+			const engine = {
+				...engineDom(p),
+				style: popupStyle(p.style)
+			};
+			const attrs = stateAttrs({
+				open: !rp.isExiting,
+				...s,
+				align
+			});
+			return render(mergeProps(engine, dom, attrs, { ref: popup }), s);
+		},
+		children: [/* @__PURE__ */ jsx("span", {
+			hidden: true,
+			ref: anchor
+		}), /* @__PURE__ */ jsxs(Dialog, {
+			...defined({
+				"aria-label": label,
+				"aria-labelledby": labelledBy,
+				"aria-describedby": describedBy
+			}),
+			render: (p) => createElement("section", mergeProps(engineDom(p), contentProps, { ref: content })),
+			children: [
+				/* @__PURE__ */ jsx(InitialFocus, {
+					content,
+					resolve: initialFocus
+				}),
+				/* @__PURE__ */ jsx(ReturnFocus, {
+					trigger,
+					popup
+				}),
+				/* @__PURE__ */ jsx(OutsidePress, { popup }),
+				/* @__PURE__ */ jsx(OverlayScope, {
+					container: nested,
+					children
+				})
+			]
+		})]
+	});
+};
+const Title = ({ level, render, children, ...dom }) => /* @__PURE__ */ jsx(Heading, {
+	slot: "title",
+	level,
+	render: (p) => render(mergeProps(engineDom(p), dom), {}),
+	children
+});
+const Description = ({ render, children, ...dom }) => /* @__PURE__ */ jsx(Text, {
+	slot: "description",
+	elementType: "p",
+	render: (p) => render(mergeProps(engineDom(p), dom), {}),
+	children
+});
+const Close = ({ render, children, ...dom }) => /* @__PURE__ */ jsx(Button, {
+	slot: "close",
+	render: (p, rp) => {
+		const s = {
+			pressed: rp.isPressed,
+			focusVisible: rp.isFocusVisible,
+			disabled: rp.isDisabled
+		};
+		return render(mergeProps(engineDom(p), dom, stateAttrs(s)), s);
+	},
+	children
+});
+//#endregion
+export { Close, Description, Popup, Root, Title, Trigger };