@igne-agency/react-web-ui 0.4.0 → 0.6.0

package/dist/components/popover/popover.js

@@ -4,6 +4,7 @@ import { useIntent } from "../../lib/use-intent.js";
 import { Skeleton } from "../skeleton/skeleton.js";
 import popover_module_default from "./popover.module.js";
 import { c } from "react/compiler-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
@@ -112,145 +113,266 @@ var Positioner = (t0) => {
 	} else t4 = $[10];
 	return t4;
 };
-var SkeletonText = (t0) => {
-	const $ = c(8);
-	const { children, className } = t0;
+/**
+* The popover's surface. While `loading`, its `Status` speaks and its
+* `Skeleton`s draw as placeholders.
+*
+* @example
+* <Popover.Popup loading={rate.isPending}>…</Popover.Popup>
+*/
+var Popup = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
 	let t1;
-	if ($[0] !== className) {
-		t1 = clsx(popover_module_default.skeletonText, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
+	if ($[0] !== t0) {
+		({loading: t1, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
+	} else {
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
+	}
+	const loading = t1 === void 0 ? false : t1;
 	let t2;
-	if ($[2] !== children) {
-		t2 = /* @__PURE__ */ jsx("span", {
-			className: popover_module_default.skeletonTextContent,
-			children
-		});
-		$[2] = children;
-		$[3] = t2;
-	} else t2 = $[3];
+	if ($[4] !== loading) {
+		t2 = {
+			busy: loading,
+			busyAfter: 0
+		};
+		$[4] = loading;
+		$[5] = t2;
+	} else t2 = $[5];
+	const busy = useBusyPhase(t2) !== "fresh";
 	let t3;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ jsx(Skeleton, { className: popover_module_default.skeletonTextOverlay });
-		$[4] = t3;
-	} else t3 = $[4];
+	if ($[6] !== className) {
+		t3 = clsx(popover_module_default.popup, className);
+		$[6] = className;
+		$[7] = t3;
+	} else t3 = $[7];
 	let t4;
-	if ($[5] !== t1 || $[6] !== t2) {
-		t4 = /* @__PURE__ */ jsxs("span", {
-			className: t1,
-			children: [t2, t3]
+	if ($[8] !== props || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Popover.Popup, {
+			className: t3,
+			...props
 		});
-		$[5] = t1;
-		$[6] = t2;
-		$[7] = t4;
-	} else t4 = $[7];
-	return t4;
+		$[8] = props;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== busy || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsx(LoadingContext, {
+			value: busy,
+			children: t4
+		});
+		$[11] = busy;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
 };
 /**
-* The popover's surface. While `loading`, its title and values draw as
-* placeholders and `loadingLabel` is announced once.
+* A hidden live region that announces its children once while the popup is
+* loading, such as "Loading the rate".
+*
+* @example
+* <Popover.Status>Loading the rate</Popover.Status>
 */
-var Popup = (t0) => {
-	const $ = c(21);
+var Status = (t0) => {
+	const $ = c(16);
 	let children;
 	let className;
-	let loadingLabel;
 	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = render;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		ref = $[4];
+		render = $[5];
+	}
+	const loading = useContext(LoadingContext);
 	let t1;
+	if ($[6] !== className) {
+		t1 = clsx(popover_module_default.visuallyHidden, className);
+		$[6] = className;
+		$[7] = t1;
+	} else t1 = $[7];
+	const t2 = loading ? children : null;
+	let t3;
+	if ($[8] !== props || $[9] !== t1 || $[10] !== t2) {
+		t3 = {
+			role: "status",
+			...props,
+			className: t1,
+			children: t2
+		};
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== ref || $[13] !== render || $[14] !== t3) {
+		t4 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			props: t3
+		};
+		$[12] = ref;
+		$[13] = render;
+		$[14] = t3;
+		$[15] = t4;
+	} else t4 = $[15];
+	return useRender(t4);
+};
+/**
+* Text inside a `Title` or a `RowValue` that draws as a placeholder of its
+* width while the popup is loading, and stays readable to assistive tech.
+* Otherwise it renders its children as they are.
+*
+* @example
+* <Popover.RowValue numeric><Popover.Skeleton>{rate.data?.base}</Popover.Skeleton></Popover.RowValue>
+*/
+var PopoverSkeleton = (t0) => {
+	const $ = c(25);
+	let children;
+	let className;
+	let props;
+	let ref;
+	let render;
 	if ($[0] !== t0) {
-		({loading: t1, loadingLabel, className, children, ...props} = t0);
+		({render, className, ref, children, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
-		$[3] = loadingLabel;
-		$[4] = props;
-		$[5] = t1;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = render;
 	} else {
 		children = $[1];
 		className = $[2];
-		loadingLabel = $[3];
-		props = $[4];
-		t1 = $[5];
+		props = $[3];
+		ref = $[4];
+		render = $[5];
 	}
-	const loading = t1 === void 0 ? false : t1;
+	const loading = useContext(LoadingContext);
+	let t1;
+	if ($[6] !== className) {
+		t1 = clsx(popover_module_default.skeletonText, className);
+		$[6] = className;
+		$[7] = t1;
+	} else t1 = $[7];
 	let t2;
-	if ($[6] !== loading) {
-		t2 = {
-			busy: loading,
-			busyAfter: 0
-		};
-		$[6] = loading;
-		$[7] = t2;
-	} else t2 = $[7];
-	const busy = useBusyPhase(t2) !== "fresh";
+	if ($[8] !== children) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			className: popover_module_default.skeletonTextContent,
+			children
+		});
+		$[8] = children;
+		$[9] = t2;
+	} else t2 = $[9];
 	let t3;
-	if ($[8] !== className) {
-		t3 = clsx(popover_module_default.popup, className);
-		$[8] = className;
-		$[9] = t3;
-	} else t3 = $[9];
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Skeleton, { className: popover_module_default.skeletonTextOverlay });
+		$[10] = t3;
+	} else t3 = $[10];
 	let t4;
-	if ($[10] !== busy || $[11] !== loadingLabel) {
-		t4 = busy ? /* @__PURE__ */ jsx("div", {
-			role: "status",
-			children: /* @__PURE__ */ jsx("span", {
-				className: popover_module_default.visuallyHidden,
-				children: loadingLabel
-			})
-		}) : null;
-		$[10] = busy;
-		$[11] = loadingLabel;
+	if ($[11] !== children) {
+		t4 = /* @__PURE__ */ jsx("span", {
+			className: popover_module_default.visuallyHidden,
+			children
+		});
+		$[11] = children;
 		$[12] = t4;
 	} else t4 = $[12];
 	let t5;
-	if ($[13] !== busy || $[14] !== children) {
-		t5 = /* @__PURE__ */ jsx(LoadingContext, {
-			value: busy,
-			children
-		});
-		$[13] = busy;
-		$[14] = children;
+	if ($[13] !== t2 || $[14] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t2,
+			t3,
+			t4
+		] });
+		$[13] = t2;
+		$[14] = t4;
 		$[15] = t5;
 	} else t5 = $[15];
 	let t6;
-	if ($[16] !== props || $[17] !== t3 || $[18] !== t4 || $[19] !== t5) {
-		t6 = /* @__PURE__ */ jsxs(Popover.Popup, {
-			className: t3,
+	if ($[16] !== props || $[17] !== t1 || $[18] !== t5) {
+		t6 = {
 			...props,
-			children: [t4, t5]
-		});
+			className: t1,
+			children: t5
+		};
 		$[16] = props;
-		$[17] = t3;
-		$[18] = t4;
-		$[19] = t5;
-		$[20] = t6;
-	} else t6 = $[20];
-	return t6;
+		$[17] = t1;
+		$[18] = t5;
+		$[19] = t6;
+	} else t6 = $[19];
+	let t7;
+	if ($[20] !== loading || $[21] !== ref || $[22] !== render || $[23] !== t6) {
+		t7 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			enabled: loading,
+			props: t6
+		};
+		$[20] = loading;
+		$[21] = ref;
+		$[22] = render;
+		$[23] = t6;
+		$[24] = t7;
+	} else t7 = $[24];
+	const element = useRender(t7);
+	return loading ? element : children;
 };
-/** The arrow pointing from the popup at its trigger. */
+/**
+* The arrow pointing from the popup at its trigger: the kit's own shape, or the
+* children given in its place.
+*
+* @example
+* <Popover.Arrow />
+*/
 var Arrow = (t0) => {
-	const $ = c(9);
+	const $ = c(12);
+	let children;
 	let className;
 	let props;
 	if ($[0] !== t0) {
-		({className, ...props} = t0);
+		({className, children, ...props} = t0);
 		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
 	} else {
-		className = $[1];
-		props = $[2];
+		children = $[1];
+		className = $[2];
+		props = $[3];
 	}
 	let t1;
-	if ($[3] !== className) {
+	if ($[4] !== className) {
 		t1 = clsx(popover_module_default.arrow, className);
-		$[3] = className;
-		$[4] = t1;
-	} else t1 = $[4];
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
 	let t2;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx("svg", {
+	if ($[6] !== children) {
+		t2 = children ?? /* @__PURE__ */ jsx("svg", {
 			width: "16",
 			height: "8",
 			viewBox: "0 0 16 8",
@@ -260,71 +382,54 @@ var Arrow = (t0) => {
 				d: "M0 9 V8 L8 0 L16 8 V9 Z"
 			})
 		});
-		$[5] = t2;
-	} else t2 = $[5];
+		$[6] = children;
+		$[7] = t2;
+	} else t2 = $[7];
 	let t3;
-	if ($[6] !== props || $[7] !== t1) {
+	if ($[8] !== props || $[9] !== t1 || $[10] !== t2) {
 		t3 = /* @__PURE__ */ jsx(Popover.Arrow, {
 			className: t1,
 			...props,
 			children: t2
 		});
-		$[6] = props;
-		$[7] = t1;
-		$[8] = t3;
-	} else t3 = $[8];
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
 	return t3;
 };
 /** The popover's heading, which names it. */
 var Title = (t0) => {
-	const $ = c(13);
-	let children;
+	const $ = c(8);
 	let className;
 	let props;
 	if ($[0] !== t0) {
-		({className, children, ...props} = t0);
+		({className, ...props} = t0);
 		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = props;
+		$[1] = className;
+		$[2] = props;
 	} else {
-		children = $[1];
-		className = $[2];
-		props = $[3];
+		className = $[1];
+		props = $[2];
 	}
-	const loading = useContext(LoadingContext);
 	let t1;
-	if ($[4] !== className) {
+	if ($[3] !== className) {
 		t1 = clsx(popover_module_default.title, className);
-		$[4] = className;
-		$[5] = t1;
-	} else t1 = $[5];
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
 	let t2;
-	if ($[6] !== children || $[7] !== loading) {
-		t2 = loading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SkeletonText, {
-			className: popover_module_default.titleSkeleton,
-			children
-		}), /* @__PURE__ */ jsx("span", {
-			className: popover_module_default.visuallyHidden,
-			children
-		})] }) : children;
-		$[6] = children;
-		$[7] = loading;
-		$[8] = t2;
-	} else t2 = $[8];
-	let t3;
-	if ($[9] !== props || $[10] !== t1 || $[11] !== t2) {
-		t3 = /* @__PURE__ */ jsx(Popover.Title, {
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Popover.Title, {
 			className: t1,
-			...props,
-			children: t2
+			...props
 		});
-		$[9] = props;
-		$[10] = t1;
-		$[11] = t2;
-		$[12] = t3;
-	} else t3 = $[12];
-	return t3;
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 };
 /** A table of `Row`s whose labels and values line up in two columns. */
 var Rows = (t0) => {
@@ -422,124 +527,130 @@ var RowLabel = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
-/** The row's value, beside its label; a placeholder while the popup is loading. */
+/** The row's value, beside its label. */
 var RowValue = (t0) => {
-	const $ = c(15);
-	let children;
+	const $ = c(10);
 	let className;
 	let numeric;
 	let props;
 	if ($[0] !== t0) {
-		({numeric, className, children, ...props} = t0);
+		({numeric, className, ...props} = t0);
 		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = numeric;
-		$[4] = props;
+		$[1] = className;
+		$[2] = numeric;
+		$[3] = props;
 	} else {
-		children = $[1];
-		className = $[2];
-		numeric = $[3];
-		props = $[4];
+		className = $[1];
+		numeric = $[2];
+		props = $[3];
 	}
-	const loading = useContext(LoadingContext);
 	let t1;
-	if ($[5] !== className) {
+	if ($[4] !== className) {
 		t1 = clsx(popover_module_default.rowValue, className);
-		$[5] = className;
-		$[6] = t1;
-	} else t1 = $[6];
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
 	const t2 = numeric || void 0;
 	let t3;
-	if ($[7] !== children || $[8] !== loading) {
-		t3 = loading ? /* @__PURE__ */ jsx(SkeletonText, {
-			className: popover_module_default.valueSkeleton,
-			children
-		}) : children;
-		$[7] = children;
-		$[8] = loading;
-		$[9] = t3;
-	} else t3 = $[9];
-	let t4;
-	if ($[10] !== props || $[11] !== t1 || $[12] !== t2 || $[13] !== t3) {
-		t4 = /* @__PURE__ */ jsx("span", {
+	if ($[6] !== props || $[7] !== t1 || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx("span", {
 			className: t1,
 			"data-numeric": t2,
-			...props,
-			children: t3
+			...props
 		});
-		$[10] = props;
-		$[11] = t1;
-		$[12] = t2;
-		$[13] = t3;
-		$[14] = t4;
-	} else t4 = $[14];
-	return t4;
+		$[6] = props;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
 };
-/** `Portal`, `Positioner` and `Popup` in one: the popover's surface, placed against its trigger. */
+/**
+* `Portal`, `Positioner` and `Popup` in one: the popover's surface, placed
+* against its trigger. With a `loadingLabel` it holds the `Status` that
+* announces it.
+*/
 var Content = (t0) => {
-	const $ = c(18);
+	const $ = c(24);
 	let align;
 	let alignOffset;
+	let children;
 	let container;
+	let loadingLabel;
 	let props;
 	let side;
 	let sideOffset;
 	if ($[0] !== t0) {
-		({container, side, sideOffset, align, alignOffset, ...props} = t0);
+		({container, side, sideOffset, align, alignOffset, loadingLabel, children, ...props} = t0);
 		$[0] = t0;
 		$[1] = align;
 		$[2] = alignOffset;
-		$[3] = container;
-		$[4] = props;
-		$[5] = side;
-		$[6] = sideOffset;
+		$[3] = children;
+		$[4] = container;
+		$[5] = loadingLabel;
+		$[6] = props;
+		$[7] = side;
+		$[8] = sideOffset;
 	} else {
 		align = $[1];
 		alignOffset = $[2];
-		container = $[3];
-		props = $[4];
-		side = $[5];
-		sideOffset = $[6];
+		children = $[3];
+		container = $[4];
+		loadingLabel = $[5];
+		props = $[6];
+		side = $[7];
+		sideOffset = $[8];
 	}
 	let t1;
-	if ($[7] !== props) {
-		t1 = /* @__PURE__ */ jsx(Popup, { ...props });
-		$[7] = props;
-		$[8] = t1;
-	} else t1 = $[8];
+	if ($[9] !== loadingLabel) {
+		t1 = loadingLabel === void 0 ? null : /* @__PURE__ */ jsx(Status, { children: loadingLabel });
+		$[9] = loadingLabel;
+		$[10] = t1;
+	} else t1 = $[10];
 	let t2;
-	if ($[9] !== align || $[10] !== alignOffset || $[11] !== side || $[12] !== sideOffset || $[13] !== t1) {
-		t2 = /* @__PURE__ */ jsx(Positioner, {
-			side,
-			sideOffset,
-			align,
-			alignOffset,
-			children: t1
+	if ($[11] !== children || $[12] !== props || $[13] !== t1) {
+		t2 = /* @__PURE__ */ jsxs(Popup, {
+			...props,
+			children: [t1, children]
 		});
-		$[9] = align;
-		$[10] = alignOffset;
-		$[11] = side;
-		$[12] = sideOffset;
+		$[11] = children;
+		$[12] = props;
 		$[13] = t1;
 		$[14] = t2;
 	} else t2 = $[14];
 	let t3;
-	if ($[15] !== container || $[16] !== t2) {
-		t3 = /* @__PURE__ */ jsx(Popover.Portal, {
-			container,
+	if ($[15] !== align || $[16] !== alignOffset || $[17] !== side || $[18] !== sideOffset || $[19] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Positioner, {
+			side,
+			sideOffset,
+			align,
+			alignOffset,
 			children: t2
 		});
-		$[15] = container;
-		$[16] = t2;
-		$[17] = t3;
-	} else t3 = $[17];
-	return t3;
+		$[15] = align;
+		$[16] = alignOffset;
+		$[17] = side;
+		$[18] = sideOffset;
+		$[19] = t2;
+		$[20] = t3;
+	} else t3 = $[20];
+	let t4;
+	if ($[21] !== container || $[22] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Popover.Portal, {
+			container,
+			children: t3
+		});
+		$[21] = container;
+		$[22] = t3;
+		$[23] = t4;
+	} else t4 = $[23];
+	return t4;
 };
 /**
 * A rich popover over base-ui's `Popover`, with a `Title` and rows of labelled
-* values. `Content` bundles the portal, positioner and popup; the unbundled
-* parts stay.
+* values. `Content` bundles the portal, positioner and popup, and the `Status`
+* for a `loadingLabel`; the unbundled parts stay. While loading, text wrapped in
+* a `Skeleton` draws as a placeholder.
 *
 * @example
 * <Popover.Root>
@@ -552,7 +663,9 @@ var Content = (t0) => {
 *     <Popover.Rows>
 *       <Popover.Row>
 *         <Popover.RowLabel>Base</Popover.RowLabel>
-*         <Popover.RowValue numeric>{rate.data?.base}</Popover.RowValue>
+*         <Popover.RowValue numeric>
+*           <Popover.Skeleton>{rate.data?.base}</Popover.Skeleton>
+*         </Popover.RowValue>
 *       </Popover.Row>
 *     </Popover.Rows>
 *   </Popover.Content>
@@ -565,6 +678,8 @@ var Popover$1 = {
 	Positioner,
 	Popup,
 	Content,
+	Status,
+	Skeleton: PopoverSkeleton,
 	Arrow,
 	Title,
 	Rows,