@maanlamp/react-web-ui 0.0.0-stage → 0.1.0

package/dist/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,710 @@
+import SvgChevronRight from "../../vendor/@material-design-icons/svg/outlined/chevron_right.js";
+import SvgMoreHoriz from "../../vendor/@material-design-icons/svg/outlined/more_horiz.js";
+import { Button } from "../button/button.js";
+import { Icon } from "../icon/icon.js";
+import { Menu } from "../menu/menu.js";
+import { Tooltip } from "../tooltip/tooltip.js";
+import breadcrumbs_module_default from "./breadcrumbs.module.js";
+import { useFold } from "./use-fold.js";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useRender } from "@base-ui/react/use-render";
+// src/components/breadcrumbs/breadcrumbs.tsx
+var isClipped = (element) => element.scrollWidth > element.clientWidth;
+/**
+* Shows the full text of a crumb as a tooltip, only while the crumb cuts it
+* short.
+*/
+var ClippedHint = (t0) => {
+	const $ = c(7);
+	const { element, children } = t0;
+	let t1;
+	if ($[0] !== element) {
+		t1 = /* @__PURE__ */ jsx(Tooltip.Trigger, { render: element });
+		$[0] = element;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children) {
+		t2 = /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Popup, { children }) }) });
+		$[2] = children;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t1 || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Tooltip.Root, {
+			onOpenChange: _temp,
+			children: [t1, t2]
+		});
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+};
+/** The breadcrumb landmark. */
+var Root = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(breadcrumbs_module_default.root, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			defaultTagName: "nav",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
+};
+/**
+* The crumbs and separators on one line. A crumb that does not fit is cut
+* short, and the crumbs share the room equally.
+*/
+var List = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(breadcrumbs_module_default.list, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			defaultTagName: "ol",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
+};
+/** One crumb, holding a `Link`, the `Page` or the `Overflow`. */
+var Item = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(breadcrumbs_module_default.item, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			defaultTagName: "li",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
+};
+/**
+* A crumb leading to a page above the current one. It spreads every other prop
+* onto the `<a>` and forwards its ref, so a router's `createLink` can wrap it.
+* When it cuts its text short, it shows the full text as a tooltip.
+*/
+var BreadcrumbLink = (t0) => {
+	const $ = c(17);
+	let children;
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, children, ref, ...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];
+	}
+	let t1;
+	if ($[6] !== className) {
+		t1 = clsx(breadcrumbs_module_default.crumb, className);
+		$[6] = className;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== children || $[9] !== props || $[10] !== ref || $[11] !== render || $[12] !== t1) {
+		t2 = /* @__PURE__ */ jsx(LinkElement, {
+			render,
+			ref,
+			...props,
+			className: t1,
+			children
+		});
+		$[8] = children;
+		$[9] = props;
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t1;
+		$[13] = t2;
+	} else t2 = $[13];
+	let t3;
+	if ($[14] !== children || $[15] !== t2) {
+		t3 = /* @__PURE__ */ jsx(ClippedHint, {
+			element: t2,
+			children
+		});
+		$[14] = children;
+		$[15] = t2;
+		$[16] = t3;
+	} else t3 = $[16];
+	return t3;
+};
+var LinkElement = (t0) => {
+	const $ = c(8);
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = ref;
+		$[3] = render;
+	} else {
+		props = $[1];
+		ref = $[2];
+		render = $[3];
+	}
+	let t1;
+	if ($[4] !== props || $[5] !== ref || $[6] !== render) {
+		t1 = {
+			defaultTagName: "a",
+			render,
+			ref,
+			props
+		};
+		$[4] = props;
+		$[5] = ref;
+		$[6] = render;
+		$[7] = t1;
+	} else t1 = $[7];
+	return useRender(t1);
+};
+/**
+* The current page's crumb, which is not a link. When it cuts its text short,
+* it shows the full text as a tooltip.
+*/
+var Page = (t0) => {
+	const $ = c(13);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = clsx(breadcrumbs_module_default.crumb, className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== children || $[7] !== props || $[8] !== t1) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			"aria-current": "page",
+			...props,
+			className: t1,
+			children
+		});
+		$[6] = children;
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== children || $[11] !== t2) {
+		t3 = /* @__PURE__ */ jsx(ClippedHint, {
+			element: t2,
+			children
+		});
+		$[10] = children;
+		$[11] = t2;
+		$[12] = t3;
+	} else t3 = $[12];
+	return t3;
+};
+/** The decorative mark between two crumbs; a chevron unless given `children`. */
+var Separator = (t0) => {
+	const $ = c(18);
+	let children;
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, children, ref, ...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];
+	}
+	let t1;
+	if ($[6] !== className) {
+		t1 = clsx(breadcrumbs_module_default.separator, className);
+		$[6] = className;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== children) {
+		t2 = children ?? /* @__PURE__ */ jsx(Icon, {
+			svg: SvgChevronRight,
+			label: ""
+		});
+		$[8] = children;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== props || $[11] !== t1 || $[12] !== t2) {
+		t3 = {
+			...props,
+			"aria-hidden": true,
+			className: t1,
+			children: t2
+		};
+		$[10] = props;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	let t4;
+	if ($[14] !== ref || $[15] !== render || $[16] !== t3) {
+		t4 = {
+			defaultTagName: "li",
+			render,
+			ref,
+			props: t3
+		};
+		$[14] = ref;
+		$[15] = render;
+		$[16] = t3;
+		$[17] = t4;
+	} else t4 = $[17];
+	return useRender(t4);
+};
+/** A button that opens a menu of the crumbs the trail has no room for. */
+var Overflow = (t0) => {
+	const $ = c(7);
+	const { label, children } = t0;
+	let t1;
+	if ($[0] !== label) {
+		t1 = /* @__PURE__ */ jsx(Menu.Trigger, {
+			icon: SvgMoreHoriz,
+			label
+		});
+		$[0] = label;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children) {
+		t2 = /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+			align: "start",
+			sideOffset: 4,
+			children: /* @__PURE__ */ jsx(Menu.Popup, {
+				className: breadcrumbs_module_default.popup,
+				children
+			})
+		}) });
+		$[2] = children;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t1 || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Menu.Root, { children: [t1, t2] });
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+};
+/**
+* A hidden copy of the whole trail at its full length, with one separator and
+* the overflow button, for `useFold` to measure.
+*/
+var Gauge = (t0) => {
+	const $ = c(9);
+	const { labels, overflowLabel, ref } = t0;
+	let t1;
+	if ($[0] !== labels) {
+		t1 = labels.map(_temp2);
+		$[0] = labels;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Separator, { render: /* @__PURE__ */ jsx("li", { "data-gauge": "separator" }) });
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== overflowLabel) {
+		t3 = /* @__PURE__ */ jsx("li", {
+			"data-gauge": "overflow",
+			className: breadcrumbs_module_default.item,
+			children: /* @__PURE__ */ jsx(Button, {
+				variant: "tertiary",
+				iconOnly: true,
+				icon: SvgMoreHoriz,
+				label: overflowLabel
+			})
+		});
+		$[3] = overflowLabel;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== ref || $[6] !== t1 || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx("div", {
+			className: breadcrumbs_module_default.gauge,
+			"aria-hidden": true,
+			inert: true,
+			children: /* @__PURE__ */ jsxs("ol", {
+				ref,
+				className: breadcrumbs_module_default.gaugeList,
+				children: [
+					t1,
+					t2,
+					t3
+				]
+			})
+		});
+		$[5] = ref;
+		$[6] = t1;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+};
+var Ancestor = (t0) => {
+	const $ = c(6);
+	const { crumb } = t0;
+	let t1;
+	if ($[0] !== crumb.label || $[1] !== crumb.render) {
+		t1 = /* @__PURE__ */ jsx(Item, { children: crumb.render === void 0 ? /* @__PURE__ */ jsx("span", {
+			className: breadcrumbs_module_default.crumb,
+			children: crumb.label
+		}) : /* @__PURE__ */ jsx(BreadcrumbLink, {
+			render: crumb.render,
+			children: crumb.label
+		}) });
+		$[0] = crumb.label;
+		$[1] = crumb.render;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Separator, {});
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t1) {
+		t3 = /* @__PURE__ */ jsxs(Fragment, { children: [t1, t2] });
+		$[4] = t1;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+};
+/**
+* A trail of crumbs that fits its room: when it does not, the crumbs after the
+* first fold into an overflow menu, one by one, until it fits. The first crumb
+* and the current page stay. Renders nothing for a trail of one.
+*/
+var Trail = (t0) => {
+	const $ = c(37);
+	const { "aria-label": label, overflowLabel, crumbs, className } = t0;
+	const { root, gauge, folded } = useFold();
+	let t1;
+	if ($[0] !== crumbs) {
+		t1 = crumbs.at(-1);
+		$[0] = crumbs;
+		$[1] = t1;
+	} else t1 = $[1];
+	const current = t1;
+	if (crumbs.length < 2 || current === void 0) return null;
+	let T0;
+	let T1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	if ($[2] !== className || $[3] !== crumbs || $[4] !== folded || $[5] !== label || $[6] !== overflowLabel || $[7] !== root) {
+		const ancestors = crumbs.slice(0, -1);
+		const hidden = ancestors.slice(1, 1 + folded);
+		T1 = Root;
+		t5 = root;
+		t6 = label;
+		t7 = className;
+		T0 = List;
+		t2 = ancestors.slice(0, 1).map(_temp3);
+		t3 = hidden.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Item, { children: /* @__PURE__ */ jsx(Overflow, {
+			label: overflowLabel,
+			children: hidden.map(_temp4)
+		}) }), /* @__PURE__ */ jsx(Separator, {})] }) : null;
+		t4 = ancestors.slice(1 + hidden.length).map(_temp5);
+		$[2] = className;
+		$[3] = crumbs;
+		$[4] = folded;
+		$[5] = label;
+		$[6] = overflowLabel;
+		$[7] = root;
+		$[8] = T0;
+		$[9] = T1;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t6;
+		$[15] = t7;
+	} else {
+		T0 = $[8];
+		T1 = $[9];
+		t2 = $[10];
+		t3 = $[11];
+		t4 = $[12];
+		t5 = $[13];
+		t6 = $[14];
+		t7 = $[15];
+	}
+	let t8;
+	if ($[16] !== current.label) {
+		t8 = /* @__PURE__ */ jsx(Item, { children: /* @__PURE__ */ jsx(Page, { children: current.label }) });
+		$[16] = current.label;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== T0 || $[19] !== t2 || $[20] !== t3 || $[21] !== t4 || $[22] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(T0, { children: [
+			t2,
+			t3,
+			t4,
+			t8
+		] });
+		$[18] = T0;
+		$[19] = t2;
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t8;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] !== crumbs) {
+		t10 = crumbs.map(_temp6);
+		$[24] = crumbs;
+		$[25] = t10;
+	} else t10 = $[25];
+	let t11;
+	if ($[26] !== gauge || $[27] !== overflowLabel || $[28] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Gauge, {
+			ref: gauge,
+			labels: t10,
+			overflowLabel
+		});
+		$[26] = gauge;
+		$[27] = overflowLabel;
+		$[28] = t10;
+		$[29] = t11;
+	} else t11 = $[29];
+	let t12;
+	if ($[30] !== T1 || $[31] !== t11 || $[32] !== t5 || $[33] !== t6 || $[34] !== t7 || $[35] !== t9) {
+		t12 = /* @__PURE__ */ jsxs(T1, {
+			ref: t5,
+			"aria-label": t6,
+			className: t7,
+			children: [t9, t11]
+		});
+		$[30] = T1;
+		$[31] = t11;
+		$[32] = t5;
+		$[33] = t6;
+		$[34] = t7;
+		$[35] = t9;
+		$[36] = t12;
+	} else t12 = $[36];
+	return t12;
+};
+/**
+* The trail to the current page. Given `crumbs`, it folds what does not fit
+* into an overflow menu; the parts hanging off it compose a trail by hand.
+*
+* @example
+* <Breadcrumbs
+* 	aria-label="Breadcrumbs"
+* 	overflowLabel="Show more"
+* 	crumbs={[
+* 		{ id: "home", label: "Home", render: <Link to="/" /> },
+* 		{ id: "declarations", label: "Declarations", render: <Link to="/declarations" /> },
+* 		{ id: "declaration", label: "Declaration 2041" },
+* 	]}
+* />
+*/
+var Breadcrumbs = Object.assign(Trail, {
+	Root,
+	List,
+	Item,
+	Link: BreadcrumbLink,
+	Page,
+	Separator,
+	Overflow,
+	Gauge
+});
+function _temp(open, details) {
+	if (open && !(details.trigger !== void 0 && isClipped(details.trigger))) details.cancel();
+}
+function _temp2(label, index) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-gauge": "crumb",
+		className: breadcrumbs_module_default.item,
+		children: /* @__PURE__ */ jsx("span", {
+			className: breadcrumbs_module_default.crumb,
+			children: label
+		})
+	}, index);
+}
+function _temp3(crumb) {
+	return /* @__PURE__ */ jsx(Ancestor, { crumb }, crumb.id);
+}
+function _temp4(crumb_0) {
+	return crumb_0.render === void 0 ? /* @__PURE__ */ jsx(Menu.Item, {
+		label: crumb_0.textValue,
+		disabled: true,
+		children: crumb_0.label
+	}, crumb_0.id) : /* @__PURE__ */ jsx(Menu.LinkItem, {
+		label: crumb_0.textValue,
+		closeOnClick: true,
+		render: crumb_0.render,
+		children: crumb_0.label
+	}, crumb_0.id);
+}
+function _temp5(crumb_1) {
+	return /* @__PURE__ */ jsx(Ancestor, { crumb: crumb_1 }, crumb_1.id);
+}
+function _temp6(crumb_2) {
+	return crumb_2.label;
+}
+export { Breadcrumbs };

package/dist/components/breadcrumbs/breadcrumbs.module.js

@@ -0,0 +1,20 @@
+import './breadcrumbs.css';// src/components/breadcrumbs/breadcrumbs.module.scss
+var root = "_root_k1utk_3";
+var list = "_list_k1utk_7";
+var item = "_item_k1utk_14";
+var crumb = "_crumb_k1utk_19";
+var separator = "_separator_k1utk_34";
+var gauge = "_gauge_k1utk_39";
+var gaugeList = "_gaugeList_k1utk_46";
+var popup = "_popup_k1utk_52";
+var breadcrumbs_module_default = {
+	root,
+	list,
+	item,
+	crumb,
+	separator,
+	gauge,
+	gaugeList,
+	popup
+};
+export { crumb, breadcrumbs_module_default as default, gauge, gaugeList, item, list, popup, root, separator };

package/dist/components/breadcrumbs/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./breadcrumbs.tsx";
+export { useFold } from "./use-fold.ts";
+//# sourceMappingURL=index.d.ts.map