@imfusion/web-ui 0.11.1-dev.3.ga6fcf91c → 0.11.1-dev.30.g5f35727d

package/dist/{tabs-CU46aGud.js → tabs-U3Cg6YAw.js}

@@ -1,5 +1,5 @@
-import { n as e, r as t, t as n } from "./resolve-state-props-DQf9WiGv.js";
-import { mh as r, pM as i } from "./icons-BsK_o-Cb.js";
+import { a as e, o as t, s as n } from "./utils-RZJAXfcf.js";
+import { _M as r, mh as i } from "./icons-vc1WZCxX.js";
 import { t as a } from "./meta-V_KyLeGn.js";
 import { cva as o } from "class-variance-authority";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
@@ -26,8 +26,8 @@ function v({ variant: e = "default", icon: t = !1, children: n, ...a }) {
 			variant: e,
 			className: a.className
 		}),
-		children: [t && /* @__PURE__ */ s(i, {
-			glyph: r,
+		children: [t && /* @__PURE__ */ s(r, {
+			glyph: i,
 			strokeWidth: 2,
 			"aria-hidden": !0,
 			className: g.icon
@@ -78,7 +78,7 @@ function T(e) {
 		typeof e == "string" || typeof e == "number" ? t += String(e).trim().length : e != null && typeof e != "boolean" && (t += w);
 	}), t;
 }
-function ne({ style: t, shortcut: r, size: i, children: a, ...o }) {
+function ne({ style: n, shortcut: r, size: i, children: a, ...o }) {
 	let l = f(x), u = {
 		"--glyph-count": T(a),
 		"--max-glyphs": w
@@ -87,13 +87,13 @@ function ne({ style: t, shortcut: r, size: i, children: a, ...o }) {
 		"aria-keyshortcuts": r ? b(r) : void 0,
 		...o,
 		"data-imf-ui-component": "Toggle",
-		style: (n) => ({
+		style: (e) => ({
 			...u,
-			...e(t, n)
+			...t(n, e)
 		}),
-		className: (e) => C({
+		className: (t) => C({
 			size: i ?? l,
-			className: n(o.className, e)
+			className: e(o.className, t)
 		}),
 		children: [a, r && /* @__PURE__ */ s(v, {
 			variant: "flat",
@@ -110,15 +110,15 @@ var E = {
 	sm: E.sizeSm,
 	md: null
 } } });
-function ie({ size: e = "md", ...t }) {
+function ie({ size: t = "md", ...n }) {
 	return /* @__PURE__ */ s(x.Provider, {
-		value: e ?? "md",
+		value: t ?? "md",
 		children: /* @__PURE__ */ s(ee, {
-			...t,
+			...n,
 			"data-imf-ui-component": "ToggleGroup",
 			className: (r) => re({
-				size: e,
-				className: n(t.className, r)
+				size: t,
+				className: e(n.className, r)
 			})
 		})
 	});
@@ -126,23 +126,23 @@ function ie({ size: e = "md", ...t }) {
 var D = {
 	root: "imf-ui-switch-module-root",
 	thumb: "imf-ui-switch-module-thumb"
-}, ae = /* @__PURE__ */ t({
+}, ae = /* @__PURE__ */ n({
 	Root: () => A,
 	Thumb: () => j
 }), O = o(D.root), k = o(D.thumb);
-function A(e) {
+function A(t) {
 	return /* @__PURE__ */ s(m.Root, {
-		...e,
+		...t,
 		"data-imf-ui-component": "Switch.Root",
-		className: (t) => O({ className: n(e.className, t) })
+		className: (n) => O({ className: e(t.className, n) })
 	});
 }
 A.displayName = "Switch.Root";
-function j(e) {
+function j(t) {
 	return /* @__PURE__ */ s(m.Thumb, {
-		...e,
+		...t,
 		"data-imf-ui-component": "Switch.Thumb",
-		className: (t) => k({ className: n(e.className, t) })
+		className: (n) => k({ className: e(t.className, n) })
 	});
 }
 j.displayName = "Switch.Thumb";
@@ -286,7 +286,7 @@ var R = {
 	panelViewport: "imf-ui-tabs-module-panelViewport",
 	root: "imf-ui-tabs-module-root",
 	tab: "imf-ui-tabs-module-tab"
-}, z = /* @__PURE__ */ t({
+}, z = /* @__PURE__ */ n({
 	Indicator: () => Z,
 	List: () => Y,
 	Panel: () => $,
@@ -312,47 +312,47 @@ function q(e) {
 		t.disconnect(), r.disconnect();
 	};
 }
-function J(e) {
+function J(t) {
 	return /* @__PURE__ */ s(h.Root, {
-		...e,
+		...t,
 		"data-imf-ui-component": "Tabs.Root",
-		className: (t) => V({ className: n(e.className, t) })
+		className: (n) => V({ className: e(t.className, n) })
 	});
 }
 J.displayName = "Tabs.Root";
-function Y({ fill: e = !1, ref: t, ...r }) {
+function Y({ fill: t = !1, ref: n, ...r }) {
 	let i = d((e) => {
 		if (!e) return;
-		K(t, e);
-		let n = q(e);
+		K(n, e);
+		let t = q(e);
 		return () => {
-			n(), K(t, null);
+			t(), K(n, null);
 		};
-	}, [t]);
+	}, [n]);
 	return /* @__PURE__ */ s(h.List, {
 		...r,
 		ref: i,
 		"data-imf-ui-component": "Tabs.List",
-		className: (t) => B({
-			fill: e,
-			className: n(r.className, t)
+		className: (n) => B({
+			fill: t,
+			className: e(r.className, n)
 		})
 	});
 }
 Y.displayName = "Tabs.List";
-function X(e) {
+function X(t) {
 	return /* @__PURE__ */ s(h.Tab, {
-		...e,
+		...t,
 		"data-imf-ui-component": "Tabs.Tab",
-		className: (t) => H({ className: n(e.className, t) })
+		className: (n) => H({ className: e(t.className, n) })
 	});
 }
 X.displayName = "Tabs.Tab";
-function Z(e) {
+function Z(t) {
 	return /* @__PURE__ */ s(h.Indicator, {
-		...e,
+		...t,
 		"data-imf-ui-component": "Tabs.Indicator",
-		className: (t) => U({ className: n(e.className, t) })
+		className: (n) => U({ className: e(t.className, n) })
 	});
 }
 Z.displayName = "Tabs.Indicator";
@@ -364,11 +364,11 @@ function Q(e) {
 	});
 }
 Q.displayName = "Tabs.PanelViewport";
-function $(e) {
+function $(t) {
 	return /* @__PURE__ */ s(h.Panel, {
-		...e,
+		...t,
 		"data-imf-ui-component": "Tabs.Panel",
-		className: (t) => G({ className: n(e.className, t) })
+		className: (n) => G({ className: e(t.className, n) })
 	});
 }
 $.displayName = "Tabs.Panel";

package/dist/utils/index.d.ts

@@ -1 +1,3 @@
 export { resolveClassName, resolveStyle } from './resolve-state-props';
+export { ItemPartsContext, useItemParts, useItemPartId } from './item-parts';
+export { useStablePopupHeight } from './stable-popup-height';

package/dist/utils/item-parts.d.ts

@@ -0,0 +1,23 @@
+interface ItemParts {
+    labelId: string;
+    descriptionId: string;
+    setHasLabel: (has: boolean) => void;
+    setHasDescription: (has: boolean) => void;
+}
+export declare const ItemPartsContext: import('react').Context<ItemParts | null>;
+/** Creates the ids for one item. Spread `ariaProps` on the item and wrap its tree in `ItemPartsContext`. */
+export declare function useItemParts(): {
+    context: {
+        labelId: string;
+        descriptionId: string;
+        setHasLabel: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+        setHasDescription: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    };
+    ariaProps: {
+        "aria-labelledby": string | undefined;
+        "aria-describedby": string | undefined;
+    };
+};
+/** Returns the id an item's text or description part must render, or undefined outside an item. */
+export declare function useItemPartId(part: "label" | "description"): string | undefined;
+export {};

package/dist/utils/stable-popup-height.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Keeps a popup or inline list at the height it had when it mounted, so filtering does not shrink it under the pointer.
+ * Unmounting resets the height. Spread `style` before the consumer's style so theirs wins.
+ */
+export declare function useStablePopupHeight({ ref: forwardedRef }: {
+    ref?: React.Ref<HTMLDivElement>;
+}): {
+    ref: (node: HTMLDivElement | null) => void;
+    style: import('react').CSSProperties | undefined;
+};

package/dist/utils-RZJAXfcf.js

@@ -0,0 +1,56 @@
+import { createContext as e, useCallback as t, useContext as n, useEffect as r, useId as i, useMemo as a, useState as o } from "react";
+//#region \0rolldown/runtime.js
+var s = Object.defineProperty, c = (e, t) => {
+	let n = {};
+	for (var r in e) s(n, r, {
+		get: e[r],
+		enumerable: !0
+	});
+	return t || s(n, Symbol.toStringTag, { value: "Module" }), n;
+};
+//#endregion
+//#region src/utils/resolve-state-props.ts
+function l(e, t) {
+	return e instanceof Function ? e(t) : e;
+}
+function u(e, t) {
+	return l(e, t);
+}
+function d(e, t) {
+	return l(e, t);
+}
+//#endregion
+//#region src/utils/item-parts.tsx
+var f = e(null);
+function p() {
+	let e = i(), t = i(), [n, r] = o(!1), [s, c] = o(!1);
+	return {
+		context: a(() => ({
+			labelId: e,
+			descriptionId: t,
+			setHasLabel: r,
+			setHasDescription: c
+		}), [e, t]),
+		ariaProps: {
+			"aria-labelledby": n ? e : void 0,
+			"aria-describedby": s ? t : void 0
+		}
+	};
+}
+function m(e) {
+	let t = n(f), i = e === "label" ? t?.setHasLabel : t?.setHasDescription;
+	return r(() => (i?.(!0), () => i?.(!1)), [i]), e === "label" ? t?.labelId : t?.descriptionId;
+}
+//#endregion
+//#region src/utils/stable-popup-height.ts
+function h({ ref: e }) {
+	let [n, r] = o();
+	return {
+		ref: t((t) => {
+			typeof e == "function" ? e(t) : e && (e.current = t), t && r((e) => e ?? t.offsetHeight);
+		}, [e]),
+		style: n === void 0 ? void 0 : { minBlockSize: `min(${String(n)}px, var(--available-height, ${String(n)}px))` }
+	};
+}
+//#endregion
+export { u as a, p as i, f as n, d as o, m as r, c as s, h as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.11.1-dev.3.ga6fcf91c",
+  "version": "0.11.1-dev.30.g5f35727d",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "homepage": "https://imfusion.com",