@webority/ui-react 0.110.2 → 0.111.0

package/dist/canvas-kit/kit.js

@@ -67714,10 +67714,10 @@ var CKe = ["end", "start"], wKe = [
 	"xl"
 ], TKe = [50, 90], EKe = (e) => Array.isArray(e) && e.length > 0 && e.every((e) => Number.isFinite(e) && e >= 10 && e <= 100);
 function DKe(e) {
-	let { marker: r, props: i } = H("AppDrawer", e), { open: a = !1, onClose: o, title: s, titleIcon: c, header: l, subtitle: u, ariaLabel: d, side: f = "end", size: p = "md", width: h, maxWidth: g, snapPoints: _ = TKe, defaultSnap: v = 0, sheet: y = !0, onSnapChange: b, onOpened: C, onClosed: w, dismissible: T = !0, closeLabel: E = "Close", staticBackdrop: D = !1, confirmDiscard: O, dirty: k = !1, bodyClassName: A = "", footer: j, className: M = "", style: N, children: P, ...F } = i;
-	U("AppDrawer", F), V("AppDrawer", "side", f, CKe), V("AppDrawer", "size", p, wKe), V("AppDrawer", "snapPoints", EKe(_) ? void 0 : JSON.stringify(_), ["an array of numbers from 10 to 100"]);
-	let I = x(null), L = x(null), R = x(null), [z, B] = S(!1);
-	L.current = {
+	let { marker: r, props: i } = H("AppDrawer", e), { open: a = !1, onClose: o, title: s, titleIcon: c, header: l, subtitle: u, ariaLabel: d, side: f = "end", size: p = "md", width: h, maxWidth: g, snapPoints: _ = TKe, defaultSnap: v = 0, sheet: y = !0, onSnapChange: b, onOpened: C, onClosed: w, dismissible: T = !0, closeLabel: E = "Close", staticBackdrop: D = !1, confirmDiscard: O, dirty: k = !1, headerClassName: A = "", bodyClassName: j = "", footer: M, className: N = "", style: P, children: F, ...I } = i;
+	U("AppDrawer", I), V("AppDrawer", "side", f, CKe), V("AppDrawer", "size", p, wKe), V("AppDrawer", "snapPoints", EKe(_) ? void 0 : JSON.stringify(_), ["an array of numbers from 10 to 100"]);
+	let L = x(null), R = x(null), z = x(null), [B, ee] = S(!1);
+	R.current = {
 		onClose: o,
 		onSnapChange: b,
 		onOpened: C,
@@ -67725,26 +67725,26 @@ function DKe(e) {
 		confirmDiscard: O,
 		dirty: k
 	}, m(() => {
-		a || B(!1);
+		a || ee(!1);
 	}, [a]), m(() => {
-		z && R.current?.focus();
-	}, [z]), m(() => {
-		let e = I.current;
+		B && z.current?.focus();
+	}, [B]), m(() => {
+		let e = L.current;
 		if (!e) return;
 		let t = (t) => {
 			if (t.target === e) {
-				if (t.preventDefault(), L.current.confirmDiscard && L.current.dirty) {
-					B(!0);
+				if (t.preventDefault(), R.current.confirmDiscard && R.current.dirty) {
+					ee(!0);
 					return;
 				}
-				L.current.onClose?.();
+				R.current.onClose?.();
 			}
 		}, n = (t) => {
-			t.target === e && L.current.onSnapChange?.(t.detail.index, t.detail.percent);
+			t.target === e && R.current.onSnapChange?.(t.detail.index, t.detail.percent);
 		}, r = (t) => {
-			t.target === e && L.current.onOpened?.();
+			t.target === e && R.current.onOpened?.();
 		}, i = (t) => {
-			t.target === e && L.current.onClosed?.();
+			t.target === e && R.current.onClosed?.();
 		}, a = (n) => {
 			n.target.closest?.("[data-wui-dismiss]") && t({
 				target: e,
@@ -67755,27 +67755,27 @@ function DKe(e) {
 			e.removeEventListener("wui-drawer-close", t), e.removeEventListener("wui-drawer-snap", n), e.removeEventListener("wui-drawer-opened", r), e.removeEventListener("wui-drawer-closed", i), e.removeEventListener("click", a);
 		};
 	}, []);
-	let ee = () => {
-		B(!1), I.current?.dispatchEvent(new CustomEvent("wui:drawer:discard", { bubbles: !0 })), L.current.onClose?.();
-	}, te = EKe(_) ? _ : TKe, ne = {
+	let te = () => {
+		ee(!1), L.current?.dispatchEvent(new CustomEvent("wui:drawer:discard", { bubbles: !0 })), R.current.onClose?.();
+	}, ne = EKe(_) ? _ : TKe, re = {
 		...h && { "--wui-drawer-width": h },
 		...g && { "--wui-drawer-max-width": g },
-		...N
+		...P
 	};
 	return n("wui-drawer", {
-		ref: I,
+		ref: L,
 		...r,
-		...F,
-		class: ["wui-drawer", M].filter(Boolean).join(" "),
+		...I,
+		class: ["wui-drawer", N].filter(Boolean).join(" "),
 		side: f,
 		size: p,
-		"snap-points": te.join(","),
+		"snap-points": ne.join(","),
 		"default-snap": String(v),
 		static: D ? "" : void 0,
 		"no-sheet": y ? void 0 : "",
 		"confirm-discard": O || void 0,
 		open: a ? "" : void 0,
-		style: ne,
+		style: re,
 		children: [t("div", {
 			className: "wui-drawer-backdrop",
 			"data-wui-drawer-backdrop": "",
@@ -67799,7 +67799,7 @@ function DKe(e) {
 					})
 				}),
 				l === void 0 ? n("div", {
-					className: "wui-drawer-header",
+					className: ["wui-drawer-header", A].filter(Boolean).join(" "),
 					"data-wui-drawer-grip": y ? "" : void 0,
 					children: [n("div", {
 						className: "wui-drawer-headtext",
@@ -67836,17 +67836,17 @@ function DKe(e) {
 					})]
 				}) : l,
 				t("div", {
-					className: ["wui-drawer-body", A].filter(Boolean).join(" "),
-					children: P
+					className: ["wui-drawer-body", j].filter(Boolean).join(" "),
+					children: F
 				}),
-				(j || z) && n("div", {
-					className: z ? "wui-drawer-footer wui-drawer-discarding" : "wui-drawer-footer",
-					children: [z && t(FHe, {
+				(M || B) && n("div", {
+					className: B ? "wui-drawer-footer wui-drawer-discarding" : "wui-drawer-footer",
+					children: [B && t(FHe, {
 						text: O,
-						confirmRef: R,
-						onDiscard: ee,
-						onKeep: () => B(!1)
-					}), j]
+						confirmRef: z,
+						onDiscard: te,
+						onKeep: () => ee(!1)
+					}), M]
 				})
 			]
 		})]
@@ -126832,14 +126832,14 @@ function Emt(e) {
 	let B = C > 0 ? {
 		...R,
 		"--wui-nav-item-height": `${C}px`
-	} : R, [ee, te] = S(() => k && g === void 0 && typeof document < "u" ? dmt(A) ?? !1 : !1), [ne, re] = S(!1), [ie, ae] = S(!1), [oe, se] = S(!1), ce = x(null), le = g ?? ee, ue = () => {
-		let e = !le;
+	} : R, [ee, te] = S(() => k && g === void 0 && typeof document < "u" ? dmt(A) ?? !1 : !1), [ne, re] = S(!1), [ie, ae] = S(!1), [oe, se] = S(!1), ce = x(null), le = x(null), ue = x(null), de = g ?? ee, fe = () => {
+		let e = !de;
 		g === void 0 && te(e), k && fmt(e, A), _?.(e);
-	}, de = a.some((e) => e.collapsible), [fe, pe] = S(() => de && typeof document < "u" ? pmt(j) : /* @__PURE__ */ new Set()), me = (e) => {
-		let t = new Set(fe);
-		t.has(e) ? t.delete(e) : t.add(e), pe(t), mmt(t, j);
-	}, he = y(() => Dmt(a, O), [a, O]), ge = v ? null : Mmt(he);
-	return m(() => {
+	}, pe = a.some((e) => e.collapsible), [me, he] = S(() => pe && typeof document < "u" ? pmt(j) : /* @__PURE__ */ new Set()), ge = (e) => {
+		let t = new Set(me);
+		t.has(e) ? t.delete(e) : t.add(e), he(t), mmt(t, j);
+	}, _e = y(() => Dmt(a, O), [a, O]), ve = v ? null : Mmt(_e);
+	m(() => {
 		let e = () => ae(window.scrollY > 4);
 		return e(), window.addEventListener("scroll", e, { passive: !0 }), () => window.removeEventListener("scroll", e);
 	}, []), m(() => {
@@ -126856,22 +126856,34 @@ function Emt(e) {
 		if (t(), typeof ResizeObserver > "u") return;
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => n.disconnect();
-	}, [he]), m(() => {
+	}, [_e]);
+	let ye = !!f;
+	return m(() => {
+		let e = ue.current, t = le.current;
+		if (!ye || !e || !t) return;
+		let n = () => t.style.setProperty("--app-footer-h", `${e.offsetHeight}px`);
+		n();
+		let r = typeof ResizeObserver > "u" ? null : new ResizeObserver(n);
+		return r?.observe(e), () => {
+			r?.disconnect(), t.style.removeProperty("--app-footer-h");
+		};
+	}, [ye]), m(() => {
 		if (!ne) return;
 		let e = (e) => {
 			e.key === "Escape" && re(!1);
 		};
 		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
 	}, [ne]), n("div", {
+		ref: le,
 		className: [
 			"app-shell",
-			le ? "collapsed" : "",
+			de ? "collapsed" : "",
 			v ? "no-sidebar" : "",
 			ne ? "mobile-open" : "",
 			L
 		].filter(Boolean).join(" "),
 		"data-density": b === "compact" ? "compact" : void 0,
-		"data-wui-folded-cookie": de ? j : void 0,
+		"data-wui-folded-cookie": pe ? j : void 0,
 		style: B,
 		...r,
 		...z,
@@ -126901,7 +126913,7 @@ function Emt(e) {
 						"aria-label": E,
 						ref: ce,
 						tabIndex: oe ? 0 : void 0,
-						children: he.map((e, r) => {
+						children: _e.map((e, r) => {
 							let i = e.items.map((e) => e.header == null ? t(Pmt, {
 								item: e,
 								linkComponent: D,
@@ -126925,7 +126937,7 @@ function Emt(e) {
 									})
 								]
 							}, e.key ?? e.label ?? `group-${r}`);
-							let a = !fe.has(e.key) || !!x9(e.items), o = `wui-nav-group-${e.key}`;
+							let a = !me.has(e.key) || !!x9(e.items), o = `wui-nav-group-${e.key}`;
 							return n("div", {
 								className: `app-nav-group wui-nav-group-collapsible${a ? "" : " wui-nav-group-folded"}`,
 								"data-wui-nav-group": e.key,
@@ -126934,7 +126946,7 @@ function Emt(e) {
 									className: "app-nav-group-label wui-nav-group-toggle",
 									"aria-expanded": a,
 									"aria-controls": o,
-									onClick: () => me(e.key),
+									onClick: () => ge(e.key),
 									children: [t("span", {
 										className: "wui-nav-group-text",
 										children: e.label
@@ -126963,9 +126975,9 @@ function Emt(e) {
 					!v && t("button", {
 						type: "button",
 						className: "app-sidebar-toggle",
-						onClick: ue,
-						"aria-label": le ? "Expand navigation" : "Collapse navigation",
-						"aria-expanded": !le,
+						onClick: fe,
+						"aria-label": de ? "Expand navigation" : "Collapse navigation",
+						"aria-expanded": !de,
 						children: t(W, {
 							name: "chevrons-left",
 							size: 20
@@ -127015,6 +127027,7 @@ function Emt(e) {
 					}),
 					f && t("footer", {
 						className: "app-footer",
+						ref: ue,
 						children: f
 					})
 				]
@@ -127023,16 +127036,16 @@ function Emt(e) {
 				className: "wui-shell-launcher",
 				children: p
 			}),
-			ge && n("nav", {
+			ve && n("nav", {
 				className: "wui-tabbar",
 				"aria-label": M,
-				children: [ge.tabs.map((e) => t(Nmt, {
+				children: [ve.tabs.map((e) => t(Nmt, {
 					tab: e,
 					linkComponent: D,
 					iconVariant: w
-				}, e.key ?? e.href)), ge.hasMore && n("button", {
+				}, e.key ?? e.href)), ve.hasMore && n("button", {
 					type: "button",
-					className: `wui-tabbar-item${ge.moreActive ? " active" : ""}`,
+					className: `wui-tabbar-item${ve.moreActive ? " active" : ""}`,
 					onClick: () => re(!0),
 					children: [t("span", {
 						className: "wui-tabbar-icon",
@@ -133203,7 +133216,7 @@ var Evt = u(function({ compact: r, tenant: i, "aria-label": a, className: o, ...
 		kind: "WeborityWeb",
 		library: {
 			name: "@webority/ui-react",
-			version: "0.110.2"
+			version: "0.111.0"
 		},
 		rendererProtocolVersion: 13,
 		platform: "Web",
@@ -140125,6 +140138,13 @@ var Evt = u(function({ compact: r, tenant: i, "aria-label": a, className: o, ...
 						required: !1,
 						description: "A custom header that replaces the default one (title, subtitle and close button)."
 					},
+					{
+						name: "headerClassName",
+						type: "string",
+						required: !1,
+						description: "Classes on the default header, so a product can style it without restyling the library class. Ignored when header replaces it.",
+						default: ""
+					},
 					{
 						name: "maxWidth",
 						type: "string",

package/dist/canvas-kit/manifest.json

@@ -2,7 +2,7 @@
   "kind": "WeborityWeb",
   "library": {
     "name": "@webority/ui-react",
-    "version": "0.110.2"
+    "version": "0.111.0"
   },
   "rendererProtocolVersion": 13,
   "platform": "Web",
@@ -7622,6 +7622,13 @@
           "required": false,
           "description": "A custom header that replaces the default one (title, subtitle and close button)."
         },
+        {
+          "name": "headerClassName",
+          "type": "string",
+          "required": false,
+          "description": "Classes on the default header, so a product can style it without restyling the library class. Ignored when header replaces it.",
+          "default": ""
+        },
         {
           "name": "maxWidth",
           "type": "string",

package/dist/canvas-kit/release.json

@@ -1,21 +1,21 @@
 {
   "name": "webority-web",
-  "version": "0.110.2",
+  "version": "0.111.0",
   "platform": "Web",
   "kitModuleVersion": 2,
   "rendererProtocolVersion": 13,
   "library": {
     "name": "@webority/ui-react",
-    "version": "0.110.2"
+    "version": "0.111.0"
   },
   "files": {
     "manifest.json": {
-      "sha256": "d96a59620dfea078c6a095c5e9fe2649ee198c252f7f8afa4f84e61c09f4040f",
-      "bytes": 856654
+      "sha256": "0f935fe1c69496a4da1a6781582fc4741d2651ebd94e9e35445257f1f0312237",
+      "bytes": 856948
     },
     "kit.js": {
-      "sha256": "6d9aadc59f0c6852059c71d0db1db0c771df10da8f4ad403bf5ba95ccf7e95a5",
-      "bytes": 10900270
+      "sha256": "d46a657191a71dd6192e991f240955527dc10ddadee0093545868f3d7e44c622",
+      "bytes": 10901000
     },
     "kit.css": {
       "sha256": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",

package/dist/components/AppDrawer.js

@@ -1 +1 @@
-import{splitMarkerProps as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import i from"../lib/DiscardPrompt.js";import{useEffect as a,useRef as o,useState as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";import"@webority/ui-elements/elements/drawer";var u=[`end`,`start`],d=[`sm`,`md`,`lg`,`xl`],f=[50,90],p=e=>Array.isArray(e)&&e.length>0&&e.every(e=>Number.isFinite(e)&&e>=10&&e<=100);function m(m){let{marker:h,props:g}=e(`AppDrawer`,m),{open:_=!1,onClose:v,title:y,titleIcon:b,header:x,subtitle:S,ariaLabel:C,side:w=`end`,size:T=`md`,width:E,maxWidth:D,snapPoints:O=f,defaultSnap:k=0,sheet:A=!0,onSnapChange:j,onOpened:M,onClosed:N,dismissible:P=!0,closeLabel:F=`Close`,staticBackdrop:I=!1,confirmDiscard:L,dirty:R=!1,bodyClassName:z=``,footer:B,className:V=``,style:H,children:U,...W}=g;n(`AppDrawer`,W),t(`AppDrawer`,`side`,w,u),t(`AppDrawer`,`size`,T,d),t(`AppDrawer`,`snapPoints`,p(O)?void 0:JSON.stringify(O),[`an array of numbers from 10 to 100`]);let G=o(null),K=o(null),q=o(null),[J,Y]=s(!1);K.current={onClose:v,onSnapChange:j,onOpened:M,onClosed:N,confirmDiscard:L,dirty:R},a(()=>{_||Y(!1)},[_]),a(()=>{J&&q.current?.focus()},[J]),a(()=>{let e=G.current;if(!e)return;let t=t=>{if(t.target===e){if(t.preventDefault(),K.current.confirmDiscard&&K.current.dirty){Y(!0);return}K.current.onClose?.()}},n=t=>{t.target===e&&K.current.onSnapChange?.(t.detail.index,t.detail.percent)},r=t=>{t.target===e&&K.current.onOpened?.()},i=t=>{t.target===e&&K.current.onClosed?.()},a=n=>{n.target.closest?.(`[data-wui-dismiss]`)&&t({target:e,preventDefault(){}})};return e.addEventListener(`wui-drawer-close`,t),e.addEventListener(`wui-drawer-snap`,n),e.addEventListener(`wui-drawer-opened`,r),e.addEventListener(`wui-drawer-closed`,i),e.addEventListener(`click`,a),()=>{e.removeEventListener(`wui-drawer-close`,t),e.removeEventListener(`wui-drawer-snap`,n),e.removeEventListener(`wui-drawer-opened`,r),e.removeEventListener(`wui-drawer-closed`,i),e.removeEventListener(`click`,a)}},[]);let X=()=>{Y(!1),G.current?.dispatchEvent(new CustomEvent(`wui:drawer:discard`,{bubbles:!0})),K.current.onClose?.()},Z=p(O)?O:f,Q={...E&&{"--wui-drawer-width":E},...D&&{"--wui-drawer-max-width":D},...H};return l(`wui-drawer`,{ref:G,...h,...W,class:[`wui-drawer`,V].filter(Boolean).join(` `),side:w,size:T,"snap-points":Z.join(`,`),"default-snap":String(k),static:I?``:void 0,"no-sheet":A?void 0:``,"confirm-discard":L||void 0,open:_?``:void 0,style:Q,children:[c(`div`,{className:`wui-drawer-backdrop`,"data-wui-drawer-backdrop":``,"aria-hidden":`true`}),l(`div`,{className:`wui-drawer-panel`,role:`dialog`,"aria-modal":`true`,"aria-label":C||y||void 0,tabIndex:-1,children:[A&&c(`div`,{className:`wui-drawer-grip`,"data-wui-drawer-grip":``,children:c(`div`,{className:`wui-drawer-handle`,role:`slider`,tabIndex:0,"aria-orientation":`vertical`,"aria-label":`Sheet height`})}),x===void 0?l(`div`,{className:`wui-drawer-header`,"data-wui-drawer-grip":A?``:void 0,children:[l(`div`,{className:`wui-drawer-headtext`,children:[y&&l(`div`,{className:`wui-drawer-title`,children:[b&&c(`span`,{className:`wui-drawer-title-ic`,children:c(r,{name:b,size:18})}),y]}),S&&c(`div`,{className:`wui-drawer-subtitle`,children:S})]}),P&&c(`button`,{type:`button`,className:`wui-drawer-close`,"data-wui-drawer-close":``,"aria-label":F,children:c(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:c(`path`,{d:`M18 6 6 18M6 6l12 12`})})})]}):x,c(`div`,{className:[`wui-drawer-body`,z].filter(Boolean).join(` `),children:U}),(B||J)&&l(`div`,{className:J?`wui-drawer-footer wui-drawer-discarding`:`wui-drawer-footer`,children:[J&&c(i,{text:L,confirmRef:q,onDiscard:X,onKeep:()=>Y(!1)}),B]})]})]})}export{m as default};
+import{splitMarkerProps as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import i from"../lib/DiscardPrompt.js";import{useEffect as a,useRef as o,useState as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";import"@webority/ui-elements/elements/drawer";var u=[`end`,`start`],d=[`sm`,`md`,`lg`,`xl`],f=[50,90],p=e=>Array.isArray(e)&&e.length>0&&e.every(e=>Number.isFinite(e)&&e>=10&&e<=100);function m(m){let{marker:h,props:g}=e(`AppDrawer`,m),{open:_=!1,onClose:v,title:y,titleIcon:b,header:x,subtitle:S,ariaLabel:C,side:w=`end`,size:T=`md`,width:E,maxWidth:D,snapPoints:O=f,defaultSnap:k=0,sheet:A=!0,onSnapChange:j,onOpened:M,onClosed:N,dismissible:P=!0,closeLabel:F=`Close`,staticBackdrop:I=!1,confirmDiscard:L,dirty:R=!1,headerClassName:z=``,bodyClassName:B=``,footer:V,className:H=``,style:U,children:W,...G}=g;n(`AppDrawer`,G),t(`AppDrawer`,`side`,w,u),t(`AppDrawer`,`size`,T,d),t(`AppDrawer`,`snapPoints`,p(O)?void 0:JSON.stringify(O),[`an array of numbers from 10 to 100`]);let K=o(null),q=o(null),J=o(null),[Y,X]=s(!1);q.current={onClose:v,onSnapChange:j,onOpened:M,onClosed:N,confirmDiscard:L,dirty:R},a(()=>{_||X(!1)},[_]),a(()=>{Y&&J.current?.focus()},[Y]),a(()=>{let e=K.current;if(!e)return;let t=t=>{if(t.target===e){if(t.preventDefault(),q.current.confirmDiscard&&q.current.dirty){X(!0);return}q.current.onClose?.()}},n=t=>{t.target===e&&q.current.onSnapChange?.(t.detail.index,t.detail.percent)},r=t=>{t.target===e&&q.current.onOpened?.()},i=t=>{t.target===e&&q.current.onClosed?.()},a=n=>{n.target.closest?.(`[data-wui-dismiss]`)&&t({target:e,preventDefault(){}})};return e.addEventListener(`wui-drawer-close`,t),e.addEventListener(`wui-drawer-snap`,n),e.addEventListener(`wui-drawer-opened`,r),e.addEventListener(`wui-drawer-closed`,i),e.addEventListener(`click`,a),()=>{e.removeEventListener(`wui-drawer-close`,t),e.removeEventListener(`wui-drawer-snap`,n),e.removeEventListener(`wui-drawer-opened`,r),e.removeEventListener(`wui-drawer-closed`,i),e.removeEventListener(`click`,a)}},[]);let Z=()=>{X(!1),K.current?.dispatchEvent(new CustomEvent(`wui:drawer:discard`,{bubbles:!0})),q.current.onClose?.()},Q=p(O)?O:f,$={...E&&{"--wui-drawer-width":E},...D&&{"--wui-drawer-max-width":D},...U};return l(`wui-drawer`,{ref:K,...h,...G,class:[`wui-drawer`,H].filter(Boolean).join(` `),side:w,size:T,"snap-points":Q.join(`,`),"default-snap":String(k),static:I?``:void 0,"no-sheet":A?void 0:``,"confirm-discard":L||void 0,open:_?``:void 0,style:$,children:[c(`div`,{className:`wui-drawer-backdrop`,"data-wui-drawer-backdrop":``,"aria-hidden":`true`}),l(`div`,{className:`wui-drawer-panel`,role:`dialog`,"aria-modal":`true`,"aria-label":C||y||void 0,tabIndex:-1,children:[A&&c(`div`,{className:`wui-drawer-grip`,"data-wui-drawer-grip":``,children:c(`div`,{className:`wui-drawer-handle`,role:`slider`,tabIndex:0,"aria-orientation":`vertical`,"aria-label":`Sheet height`})}),x===void 0?l(`div`,{className:[`wui-drawer-header`,z].filter(Boolean).join(` `),"data-wui-drawer-grip":A?``:void 0,children:[l(`div`,{className:`wui-drawer-headtext`,children:[y&&l(`div`,{className:`wui-drawer-title`,children:[b&&c(`span`,{className:`wui-drawer-title-ic`,children:c(r,{name:b,size:18})}),y]}),S&&c(`div`,{className:`wui-drawer-subtitle`,children:S})]}),P&&c(`button`,{type:`button`,className:`wui-drawer-close`,"data-wui-drawer-close":``,"aria-label":F,children:c(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:c(`path`,{d:`M18 6 6 18M6 6l12 12`})})})]}):x,c(`div`,{className:[`wui-drawer-body`,B].filter(Boolean).join(` `),children:W}),(V||Y)&&l(`div`,{className:Y?`wui-drawer-footer wui-drawer-discarding`:`wui-drawer-footer`,children:[Y&&c(i,{text:L,confirmRef:J,onDiscard:Z,onKeep:()=>X(!1)}),V]})]})]})}export{m as default};

package/dist/components/AppShell.js

@@ -1 +1 @@
-import{splitMarkerProps as e}from"../lib/wuiMarker.js";import{devWarn as t}from"../lib/devWarn.js";import n from"./warnInvalidValue.js";import r from"./warnUnknownProps.js";import i from"./AppIcon.js";import a from"./AppAvatar.js";import{navMatchScore as o}from"../lib/navMatch.js";import{SHELL_FOLDED_COOKIE as s,readNavFolded as c,readShellCollapsed as l,writeNavFolded as u,writeShellCollapsed as d}from"../lib/shellCookie.js";import{initScrollEdges as f}from"@webority/ui-elements/helpers";import{useEffect as p,useId as m,useMemo as h,useRef as g,useState as _}from"react";import{Fragment as v,jsx as y,jsxs as b}from"react/jsx-runtime";var x=99,S=4,C=5,w=/^[a-z0-9-]+$/,T=[`prefix`,`exact`],E=[`comfortable`,`compact`],D=[`default`,`primary`],O=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`],k=new Set([`key`,`label`,`icon`,`iconVariant`,`iconSize`,`href`,`badge`,`badgeTone`,`badgeTitle`,`newUntil`,`trailingIcon`,`active`,`match`,`matchAlso`,`tab`,`tabLabel`,`children`]),A=e=>e>x?`${x}+`:String(e),j=new Intl.DateTimeFormat(`en-CA`,{timeZone:`Asia/Kolkata`}),M=e=>{if(typeof e!=`string`||!/^\d{4}-\d{2}-\d{2}$/.test(e))return!1;let t=new Date(`${e}T00:00:00Z`);return Number.isNaN(t.getTime())||t.toISOString().slice(0,10)!==e?!1:j.format(new Date)<=e};function ee(t){let{marker:a,props:o}=e(`AppShell`,t),{groups:m=[],brand:v,sidebarStart:x,sidebarStartCompact:S,sidebarFooter:C,topbarStart:w,topbarEnd:T,footer:k,launcher:A,children:j,collapsed:M,onCollapsedChange:ee,noSidebar:N=!1,density:P=`comfortable`,itemHeight:F,iconVariant:I,topbarTone:L=`default`,navLabel:B=`Main navigation`,linkComponent:V,currentPath:H,rememberCollapsed:U=!1,collapsedCookie:W=`wui-shell-collapsed`,foldedCookie:G=s,tabBarLabel:se=`Quick navigation`,moreLabel:ce=`More`,userMenu:K,notifications:q,search:le,className:ue=``,style:de,...fe}=o;r(`AppShell`,fe),n(`AppShell`,`density`,P,E),n(`AppShell`,`topbarTone`,L,D),n(`AppShell`,`iconVariant`,I,O);let pe=F>0?{...de,"--wui-nav-item-height":`${F}px`}:de,[me,he]=_(()=>U&&M===void 0&&typeof document<`u`?l(W)??!1:!1),[J,Y]=_(!1),[ge,_e]=_(!1),[ve,ye]=_(!1),X=g(null),Z=M??me,be=()=>{let e=!Z;M===void 0&&he(e),U&&d(e,W),ee?.(e)},xe=m.some(e=>e.collapsible),[Se,Ce]=_(()=>xe&&typeof document<`u`?c(G):new Set),we=e=>{let t=new Set(Se);t.has(e)?t.delete(e):t.add(e),Ce(t),u(t,G)},Q=h(()=>te(m,H),[m,H]),$=N?null:ne(Q);return p(()=>{let e=()=>_e(window.scrollY>4);return e(),window.addEventListener(`scroll`,e,{passive:!0}),()=>window.removeEventListener(`scroll`,e)},[]),p(()=>{f()},[]),p(()=>{let e=X.current,t=e?.querySelector(`.app-nav-item[aria-current="page"]`);if(!e||!t)return;let n=t.getBoundingClientRect(),r=e.getBoundingClientRect();n.top<r.top?e.scrollTop-=r.top-n.top:n.bottom>r.bottom&&(e.scrollTop+=n.bottom-r.bottom)},[]),p(()=>{let e=X.current;if(!e)return;let t=()=>ye(e.scrollHeight>e.clientHeight);if(t(),typeof ResizeObserver>`u`)return;let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[Q]),p(()=>{if(!J)return;let e=e=>{e.key===`Escape`&&Y(!1)};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[J]),b(`div`,{className:[`app-shell`,Z?`collapsed`:``,N?`no-sidebar`:``,J?`mobile-open`:``,ue].filter(Boolean).join(` `),"data-density":P===`compact`?`compact`:void 0,"data-wui-folded-cookie":xe?G:void 0,style:pe,...a,...fe,children:[y(`a`,{className:`wui-skip-link`,href:`#main-content`,children:`Skip to content`}),b(`aside`,{className:`app-sidebar`,children:[v&&y(`div`,{className:`app-sidebar-brand`,children:v}),x&&y(`div`,{className:`app-sidebar-start`,children:x}),S&&y(`div`,{className:`app-sidebar-start-compact`,children:S}),y(`nav`,{className:`app-sidebar-scroll`,"aria-label":B,ref:X,tabIndex:ve?0:void 0,children:Q.map((e,t)=>{let n=e.items.map(e=>e.header==null?y(z,{item:e,linkComponent:V,onNavigate:()=>Y(!1),iconVariant:I},e.key??e.href??e.label):y(`div`,{className:`wui-nav-header`,children:e.header},e.key??e.header));if(!e.collapsible)return b(`div`,{className:`app-nav-group`,children:[e.label&&y(`div`,{className:`app-nav-group-label`,children:e.label}),n,e.after&&y(`div`,{className:`wui-nav-group-after`,children:e.after})]},e.key??e.label??`group-${t}`);let r=!Se.has(e.key)||!!R(e.items),a=`wui-nav-group-${e.key}`;return b(`div`,{className:`app-nav-group wui-nav-group-collapsible${r?``:` wui-nav-group-folded`}`,"data-wui-nav-group":e.key,children:[b(`button`,{type:`button`,className:`app-nav-group-label wui-nav-group-toggle`,"aria-expanded":r,"aria-controls":a,onClick:()=>we(e.key),children:[y(`span`,{className:`wui-nav-group-text`,children:e.label}),y(`span`,{className:`wui-nav-group-caret`,children:y(i,{name:`chevron-down`,size:16})})]}),b(`div`,{className:`wui-nav-group-body`,id:a,children:[n,e.after&&y(`div`,{className:`wui-nav-group-after`,children:e.after})]})]},e.key??`group-${t}`)})}),C&&y(`div`,{className:`app-sidebar-foot`,children:C}),!N&&y(`button`,{type:`button`,className:`app-sidebar-toggle`,onClick:be,"aria-label":Z?`Expand navigation`:`Collapse navigation`,"aria-expanded":!Z,children:y(i,{name:`chevrons-left`,size:20})})]}),b(`div`,{className:`app-main`,children:[b(`header`,{className:`app-topbar${ge?` scrolled`:``}`,"data-tone":L===`primary`?`primary`:void 0,children:[b(`div`,{className:`app-topbar-start`,children:[y(`button`,{type:`button`,className:`app-topbar-menu`,onClick:()=>Y(!0),"aria-label":`Open navigation`,"aria-expanded":J,children:y(i,{name:`menu`,size:18})}),w,le&&y(oe,{config:le})]}),b(`div`,{className:`app-topbar-end`,children:[T,q&&y(ae,{config:q}),K&&y(ie,{config:K,linkComponent:V})]})]}),y(`main`,{className:`app-content`,id:`main-content`,children:j}),k&&y(`footer`,{className:`app-footer`,children:k})]}),A&&y(`div`,{className:`wui-shell-launcher`,children:A}),$&&b(`nav`,{className:`wui-tabbar`,"aria-label":se,children:[$.tabs.map(e=>y(re,{tab:e,linkComponent:V,iconVariant:I},e.key??e.href)),$.hasMore&&b(`button`,{type:`button`,className:`wui-tabbar-item${$.moreActive?` active`:``}`,onClick:()=>Y(!0),children:[y(`span`,{className:`wui-tabbar-icon`,children:y(i,{name:`more`,size:24})}),y(`span`,{className:`wui-tabbar-label`,children:ce})]})]}),y(`button`,{type:`button`,className:`app-scrim`,onClick:()=>Y(!1),"aria-label":`Close navigation`,tabIndex:J?0:-1})]})}function te(e,t){for(let t of e)t.collapsible&&L(t);let i=(e,t=!1)=>(e??[]).map(e=>Array.isArray(e.children)?{...e,children:i(e.children)}:{...e}).filter(e=>P(e)?t:(e.children?.length??0)>0||!!e.href),a=e.map(e=>({...e,items:F(i(e.items,!0))})).filter(e=>e.items.some(e=>!P(e))),s=[],c=e=>{for(let t of e)P(t)||(s.push(t),t.children&&c(t.children))};for(let e of a)c(e.items);for(let e of s)r(`AppShell items`,N(e)),n(`AppShell`,`match`,e.match,T),n(`AppShell`,`iconVariant`,e.iconVariant,O);let l=null;if(t!=null&&!s.some(e=>e.active===!0)){let e=-1;for(let n of s){if(n.active!=null||n.children?.length&&!n.href)continue;let r=o(t,n.href,{exact:n.match===`exact`,also:n.matchAlso});if(r<0)continue;let i=n.match===`exact`&&o(t,n.href,{exact:!0})>=0?1/0:r;i>e&&(e=i,l=n)}}for(let e of s)e.active=e.active??e===l;return a}function N(e){return Object.fromEntries(Object.entries(e).filter(([e])=>!k.has(e)))}var P=e=>e.header!=null;function F(e){return e.filter((t,n)=>{if(!P(t))return!0;let r=e.findIndex((e,t)=>t>n&&P(e));return e.slice(n+1,r<0?void 0:r).length>0})}var I=new Set;function L(e){if(e.key!=null&&w.test(e.key))return;let n=e.key==null?`<AppShell> a collapsible group needs a key so its folded state can be remembered.`:`<AppShell> collapsible group key "${e.key}" must use lower-case letters, digits and hyphens.`,r=!0;try{r=process.env.NODE_ENV!==`production`}catch{r=!0}!r||I.has(n)||(I.add(n),t(n))}function ne(e){let t=[],n=e=>{for(let r of e)P(r)||(r.children?.length?n(r.children):t.push(r))};for(let t of e)n(t.items);let r=t.filter(e=>e.tab);if(r.length===0)return null;let i=r.length<t.length,a=i?S:C;if(r.length>a)throw Error(`<AppShell>: ${r.length} items carry tab: true, but the phone tab bar holds ${a} (${i?`4 plus More, because other items exist`:`5 when every item is a tab`}). Flag fewer items.`);return{tabs:r,hasMore:i,moreActive:t.some(e=>!e.tab&&e.active)}}function re({tab:e,linkComponent:t,iconVariant:n}){let r=`wui-tabbar-item${e.active?` active`:``}`,a=b(v,{children:[e.icon&&y(`span`,{className:`wui-tabbar-icon`,children:typeof e.icon==`string`?y(i,{name:e.icon,size:24,variant:e.iconVariant??n}):e.icon}),y(`span`,{className:`wui-tabbar-label`,children:e.tabLabel??e.label}),e.badge!=null&&y(`span`,{className:`wui-tabbar-badge${e.badgeTone?` tone-${e.badgeTone}`:``}`,title:e.badgeTitle||void 0,children:e.badge})]}),o=e.active?`page`:void 0;return t?y(t,{className:r,to:e.href,"aria-current":o,children:a}):y(`a`,{className:r,href:e.href,"aria-current":o,children:a})}function R(e){for(let t of e){if(t.active)return t;let e=t.children?.length?R(t.children):void 0;if(e)return e}}function z({item:e,linkComponent:t,onNavigate:n,depth:r=0,iconVariant:a}){let o=r>0,s=r>1?` wui-nav-depth-${Math.min(r,6)}`:``,c=Array.isArray(e.children)&&e.children.length>0,l=c?R(e.children):void 0,u=!!l,d=l?l.key??l.href??l.label:null,[f,m]=_(u);p(()=>{d!=null&&m(!0)},[d]);let h=typeof e.label==`string`?e.label:void 0,g=!o&&e.icon&&y(`span`,{className:`app-nav-icon`,children:typeof e.icon==`string`?y(i,{name:e.icon,size:e.iconSize??22,variant:e.iconVariant??a}):e.icon}),x=e.badge!=null&&y(`span`,{className:`app-nav-badge${e.badgeTone?` tone-${e.badgeTone}`:``}`,title:e.badgeTitle||void 0,children:e.badge}),S=M(e.newUntil)&&y(`span`,{className:`wui-nav-new`,children:`New`}),C=b(v,{children:[g,y(`span`,{className:`app-nav-text`,children:e.label}),S,x,e.trailingIcon&&y(`span`,{className:`app-nav-trailing`,children:typeof e.trailingIcon==`string`?y(i,{name:e.trailingIcon,size:16}):e.trailingIcon})]}),w=e.active?`page`:void 0;if(c){let c=y(`div`,{className:`app-nav-sub${f?` expanded`:``}`,inert:!f,"aria-hidden":!f||void 0,children:y(`div`,{className:`app-nav-sub-inner`,children:e.children.map(e=>y(z,{item:e,linkComponent:t,onNavigate:n,depth:r+1,iconVariant:a},e.key??e.href))})});if(e.href){let r=t?y(t,{className:`wui-nav-split-link`,to:e.href,"aria-current":w,onClick:n,children:C}):y(`a`,{className:`wui-nav-split-link`,href:e.href,"aria-current":w,onClick:n,children:C});return b(v,{children:[b(`div`,{className:`app-nav-item has-children wui-nav-split${o?` app-nav-subitem`:``}${u||e.active?` active`:``}${s}`,"data-label":h,children:[r,y(`button`,{type:`button`,className:`app-nav-caret wui-nav-split-toggle`,"aria-expanded":f,"aria-label":`Show or hide ${h??``} pages`,onClick:()=>m(e=>!e),children:y(i,{name:`chevron-right`,size:16})})]}),c]})}return b(v,{children:[b(`button`,{type:`button`,className:`app-nav-item${o?` app-nav-subitem`:``} has-children${u?` active`:``}${s}`,"aria-expanded":f,"data-label":h,onClick:()=>m(e=>!e),children:[g,y(`span`,{className:`app-nav-text`,children:e.label}),S,x,y(`span`,{className:`app-nav-caret`,children:y(i,{name:`chevron-right`,size:16})})]}),c]})}let T=`app-nav-item${o?` app-nav-subitem`:``}${e.active?` active`:``}${s}`;return t?y(t,{className:T,to:e.href,"aria-current":w,"data-label":h,onClick:n,children:C}):y(`a`,{className:T,href:e.href,"aria-current":w,"data-label":h,onClick:n,children:C})}function B(){let[e,t]=_(!1),n=g(null);return p(()=>{if(!e)return;let r=e=>{n.current?.contains(e.target)||t(!1)},i=e=>{e.key===`Escape`&&(t(!1),n.current?.querySelector(`button`)?.focus())};return document.addEventListener(`mousedown`,r),document.addEventListener(`keydown`,i),()=>{document.removeEventListener(`mousedown`,r),document.removeEventListener(`keydown`,i)}},[e]),{open:e,setOpen:t,ref:n}}function ie({config:e,linkComponent:t}){let n=m(),{open:r,setOpen:o,ref:s}=B(),{name:c,role:l,roles:u=[],photo:d,profileHref:f,profileLabel:p=`My profile`,onLogout:h,logoutAction:g,logoutLabel:_=`Sign out`,items:x=[]}=e;if(!c)throw Error(`<AppShell> userMenu.name is required; the trigger and the avatar are named from it.`);let S=u.map(e=>(e??``).trim()).filter(Boolean),C=()=>o(!1),w=(e,n,r,i)=>t?y(t,{className:`dropdown-item`,to:e,onClick:i,children:n},r):y(`a`,{className:`dropdown-item`,href:e,onClick:i,children:n},r),T=b(v,{children:[y(i,{name:`log-out`,size:18}),_]});return b(`div`,{className:`dropdown wui-usermenu`,ref:s,children:[b(`button`,{type:`button`,id:n,className:`wui-usermenu-trigger`,"aria-expanded":r,"aria-label":`Account menu for ${c}`,onClick:()=>o(e=>!e),children:[y(a,{name:c,src:d,tone:`auto`}),b(`span`,{className:`wui-usermenu-text`,children:[y(`span`,{className:`wui-usermenu-name`,children:c}),l&&y(`span`,{className:`wui-usermenu-role`,children:l})]}),y(i,{name:`chevron-down`,size:14,className:`wui-usermenu-caret`})]}),b(`div`,{className:`dropdown-menu dropdown-menu-end wui-usermenu-menu${r?` show`:``}`,"aria-labelledby":n,"data-bs-popper":r?`static`:void 0,children:[b(`div`,{className:`wui-usermenu-head`,children:[y(a,{name:c,src:d,size:`lg`,tone:`auto`}),b(`div`,{className:`wui-usermenu-who`,children:[y(`div`,{className:`wui-usermenu-name`,children:c}),l&&y(`div`,{className:`wui-usermenu-role`,children:l}),S.length>0&&b(`div`,{className:`wui-usermenu-roles`,children:[y(`span`,{className:`wui-usermenu-roles-label`,children:S.length===1?`Role:`:`Roles:`}),` ${S.join(`, `)}`]})]})]}),f&&w(f,b(v,{children:[y(i,{name:`user`,size:18}),p]}),void 0,C),x.map(e=>{if(e.divider)return y(`hr`,{className:`dropdown-divider`},e.key);let t=b(v,{children:[e.icon&&y(i,{name:e.icon,size:18}),e.label]}),n=()=>{e.onClick?.(),C()};return e.href?w(e.href,t,e.key,n):y(`button`,{type:`button`,className:`dropdown-item`,onClick:n,children:t},e.key)}),g?y(`form`,{method:`post`,action:g,className:`wui-usermenu-logout`,children:y(`button`,{type:`submit`,className:`dropdown-item danger`,children:T})}):h&&y(`button`,{type:`button`,className:`dropdown-item danger`,onClick:()=>{C(),h()},children:T})]})]})}function ae({config:e}){let t=m(),{open:n,setOpen:r,ref:a}=B(),{unread:o=0,items:s,loading:c=!1,onOpen:l,onMarkAllRead:u,viewAllHref:d,label:f=`Notifications`,emptyText:h=`You are all caught up.`}=e,[x,S]=_(``),C=g(o);p(()=>{C.current!==o&&(C.current=o,S(o===0?`No unread notifications`:`${A(o)} unread notifications`))},[o]);let w=null;return s?.length?w=y(`div`,{className:`wui-bell-items`,children:s.map((e,t)=>{let n=`wui-bell-item${e.read?` wui-bell-item-read`:``}`,r=b(v,{children:[y(`span`,{className:`wui-bell-dot`,"aria-hidden":`true`}),e.icon&&y(`span`,{className:`wui-bell-icon`,children:y(i,{name:e.icon,size:18})}),b(`span`,{className:`wui-bell-body`,children:[!e.read&&y(`span`,{className:`visually-hidden`,children:`Unread: `}),y(`span`,{className:`wui-bell-item-title`,children:e.title}),e.time&&y(`span`,{className:`wui-bell-when`,children:e.time})]})]});return e.href?y(`a`,{className:n,href:e.href,"data-id":e.id,children:r},e.id??t):y(`div`,{className:n,"data-id":e.id,children:r},e.id??t)})}):c?w=y(`div`,{className:`wui-bell-state`,children:`Loading…`}):s&&(w=y(`div`,{className:`wui-bell-state`,children:h})),b(`div`,{className:`dropdown wui-bell`,ref:a,children:[b(`button`,{type:`button`,id:t,className:`topbar-icon-btn wui-bell-trigger`,"aria-expanded":n,"aria-label":o===0?f:`${f}, ${A(o)} unread`,onClick:()=>{let e=!n;r(e),e&&l?.()},children:[y(i,{name:`notification`,size:20}),y(`span`,{className:`wui-bell-count`,"aria-hidden":`true`,hidden:o===0,children:A(o)})]}),y(`span`,{className:`visually-hidden`,"aria-live":`polite`,children:x}),b(`div`,{className:`dropdown-menu dropdown-menu-end wui-bell-menu${n?` show`:``}`,"aria-labelledby":t,"data-bs-popper":n?`static`:void 0,children:[b(`div`,{className:`wui-bell-head`,children:[y(`span`,{className:`wui-bell-title`,children:f}),u&&y(`button`,{type:`button`,className:`wui-bell-markall`,onClick:u,children:`Mark all read`})]}),y(`div`,{className:`wui-bell-list`,"aria-busy":c||void 0,children:w}),d&&y(`a`,{className:`wui-bell-foot`,href:d,children:`View all`})]})]})}var V=e=>!!e&&(e.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(e.tagName));function oe({config:e}){let t=m(),{value:n=``,onChange:r,results:a=null,loading:o=!1,onSelect:s,onSubmit:c,placeholder:l=`Search`}=e,[u,d]=_(!1),[f,v]=_(!1),[x,S]=_({results:null,index:-1}),C=x.results===a?x.index:-1,w=e=>S({results:a,index:e}),T=g(null),E=g(null),D=g([]),O=h(()=>(a??[]).flatMap(e=>e.hits??[]),[a]),k=a!=null&&!f,A=O.length;p(()=>{let e=e=>{e.key!==`/`||e.ctrlKey||e.metaKey||e.altKey||V(e.target)||(e.preventDefault(),d(!0),E.current?.focus())},t=e=>{T.current?.contains(e.target)||(v(!0),d(!1))};return document.addEventListener(`keydown`,e),document.addEventListener(`pointerdown`,t),()=>{document.removeEventListener(`keydown`,e),document.removeEventListener(`pointerdown`,t)}},[]);let j=e=>{if(e.key===`ArrowDown`||e.key===`ArrowUp`){if(!k||A===0)return;e.preventDefault(),w((C+(e.key===`ArrowDown`?1:-1)+A)%A)}else e.key===`Enter`?k&&C>=0&&D.current[C]?(e.preventDefault(),D.current[C].click()):c&&n.trim()!==``&&(e.preventDefault(),c(n.trim())):e.key===`Escape`&&(k?(e.preventDefault(),v(!0)):u&&(e.preventDefault(),d(!1)))},M=-1;return D.current=[],b(`div`,{className:`wui-topsearch${u?` is-open`:``}${o?` is-loading`:``}`,ref:T,children:[y(`button`,{type:`button`,className:`topbar-icon-btn wui-topsearch-open`,"aria-label":l,"aria-expanded":u,"aria-controls":`${t}-panel`,onClick:()=>{let e=!u;d(e),e&&E.current?.focus()},children:y(i,{name:`search`,size:20})}),b(`div`,{className:`wui-topsearch-panel`,id:`${t}-panel`,children:[b(`div`,{className:`search-wrap`,children:[y(i,{name:`search`,size:18,className:`search-icon`}),y(`input`,{ref:E,type:`search`,className:`form-control input search-input`,id:`${t}-input`,placeholder:l,"aria-label":l,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":k,"aria-controls":`${t}-list`,"aria-activedescendant":k&&C>=0?`${t}-opt-${C}`:void 0,autoComplete:`off`,value:n,onChange:e=>{v(!1),r?.(e.target.value)},onKeyDown:j})]}),y(`div`,{className:`wui-topsearch-results`,id:`${t}-list`,role:`listbox`,"aria-label":`Search results`,hidden:!k,children:k&&b(`div`,{className:`wui-topsearch-groups`,role:`presentation`,children:[A===0&&b(`div`,{className:`wui-topsearch-empty`,role:`option`,"aria-disabled":`true`,"aria-selected":`false`,children:[`No results for “`,n,`”`]}),a.filter(e=>e.hits?.length).map((e,n)=>b(`div`,{className:`wui-topsearch-group`,role:`group`,"aria-label":e.label??``,children:[e.label&&y(`div`,{className:`wui-topsearch-group-label`,role:`presentation`,children:e.label}),e.hits.map(e=>{M+=1;let n=M;return b(`a`,{className:`wui-topsearch-hit${n===C?` is-active`:``}`,role:`option`,"aria-selected":n===C,id:`${t}-opt-${n}`,href:e.href,ref:e=>{D.current[n]=e},onClick:t=>s?.(e,t),children:[e.icon&&y(`span`,{className:`wui-topsearch-hit-icon`,children:y(i,{name:e.icon,size:18})}),b(`span`,{className:`wui-topsearch-hit-text`,children:[y(`span`,{className:`wui-topsearch-hit-title`,children:e.title}),e.subtitle&&y(`span`,{className:`wui-topsearch-hit-sub`,children:e.subtitle})]})]},`${e.href}-${n}`)})]},e.label??n))]})})]}),y(`span`,{className:`visually-hidden`,"aria-live":`polite`,children:k?A===0?`No results`:`${A} ${A===1?`result`:`results`}`:``})]})}export{ee as default};
+import{splitMarkerProps as e}from"../lib/wuiMarker.js";import{devWarn as t}from"../lib/devWarn.js";import n from"./warnInvalidValue.js";import r from"./warnUnknownProps.js";import i from"./AppIcon.js";import a from"./AppAvatar.js";import{navMatchScore as o}from"../lib/navMatch.js";import{SHELL_FOLDED_COOKIE as s,readNavFolded as c,readShellCollapsed as l,writeNavFolded as u,writeShellCollapsed as d}from"../lib/shellCookie.js";import{initScrollEdges as f}from"@webority/ui-elements/helpers";import{useEffect as p,useId as m,useMemo as h,useRef as g,useState as _}from"react";import{Fragment as v,jsx as y,jsxs as b}from"react/jsx-runtime";var x=99,S=4,C=5,w=/^[a-z0-9-]+$/,T=[`prefix`,`exact`],E=[`comfortable`,`compact`],D=[`default`,`primary`],O=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`],k=new Set([`key`,`label`,`icon`,`iconVariant`,`iconSize`,`href`,`badge`,`badgeTone`,`badgeTitle`,`newUntil`,`trailingIcon`,`active`,`match`,`matchAlso`,`tab`,`tabLabel`,`children`]),A=e=>e>x?`${x}+`:String(e),j=new Intl.DateTimeFormat(`en-CA`,{timeZone:`Asia/Kolkata`}),M=e=>{if(typeof e!=`string`||!/^\d{4}-\d{2}-\d{2}$/.test(e))return!1;let t=new Date(`${e}T00:00:00Z`);return Number.isNaN(t.getTime())||t.toISOString().slice(0,10)!==e?!1:j.format(new Date)<=e};function ee(t){let{marker:a,props:o}=e(`AppShell`,t),{groups:m=[],brand:v,sidebarStart:x,sidebarStartCompact:S,sidebarFooter:C,topbarStart:w,topbarEnd:T,footer:k,launcher:A,children:j,collapsed:M,onCollapsedChange:ee,noSidebar:N=!1,density:P=`comfortable`,itemHeight:F,iconVariant:I,topbarTone:L=`default`,navLabel:z=`Main navigation`,linkComponent:B,currentPath:ce,rememberCollapsed:V=!1,collapsedCookie:H=`wui-shell-collapsed`,foldedCookie:U=s,tabBarLabel:le=`Quick navigation`,moreLabel:ue=`More`,userMenu:W,notifications:G,search:K,className:de=``,style:fe,...q}=o;r(`AppShell`,q),n(`AppShell`,`density`,P,E),n(`AppShell`,`topbarTone`,L,D),n(`AppShell`,`iconVariant`,I,O);let pe=F>0?{...fe,"--wui-nav-item-height":`${F}px`}:fe,[me,he]=_(()=>V&&M===void 0&&typeof document<`u`?l(H)??!1:!1),[J,Y]=_(!1),[ge,_e]=_(!1),[ve,ye]=_(!1),X=g(null),be=g(null),xe=g(null),Z=M??me,Se=()=>{let e=!Z;M===void 0&&he(e),V&&d(e,H),ee?.(e)},Ce=m.some(e=>e.collapsible),[we,Te]=_(()=>Ce&&typeof document<`u`?c(U):new Set),Ee=e=>{let t=new Set(we);t.has(e)?t.delete(e):t.add(e),Te(t),u(t,U)},Q=h(()=>te(m,ce),[m,ce]),$=N?null:ne(Q);p(()=>{let e=()=>_e(window.scrollY>4);return e(),window.addEventListener(`scroll`,e,{passive:!0}),()=>window.removeEventListener(`scroll`,e)},[]),p(()=>{f()},[]),p(()=>{let e=X.current,t=e?.querySelector(`.app-nav-item[aria-current="page"]`);if(!e||!t)return;let n=t.getBoundingClientRect(),r=e.getBoundingClientRect();n.top<r.top?e.scrollTop-=r.top-n.top:n.bottom>r.bottom&&(e.scrollTop+=n.bottom-r.bottom)},[]),p(()=>{let e=X.current;if(!e)return;let t=()=>ye(e.scrollHeight>e.clientHeight);if(t(),typeof ResizeObserver>`u`)return;let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[Q]);let De=!!k;return p(()=>{let e=xe.current,t=be.current;if(!De||!e||!t)return;let n=()=>t.style.setProperty(`--app-footer-h`,`${e.offsetHeight}px`);n();let r=typeof ResizeObserver>`u`?null:new ResizeObserver(n);return r?.observe(e),()=>{r?.disconnect(),t.style.removeProperty(`--app-footer-h`)}},[De]),p(()=>{if(!J)return;let e=e=>{e.key===`Escape`&&Y(!1)};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[J]),b(`div`,{ref:be,className:[`app-shell`,Z?`collapsed`:``,N?`no-sidebar`:``,J?`mobile-open`:``,de].filter(Boolean).join(` `),"data-density":P===`compact`?`compact`:void 0,"data-wui-folded-cookie":Ce?U:void 0,style:pe,...a,...q,children:[y(`a`,{className:`wui-skip-link`,href:`#main-content`,children:`Skip to content`}),b(`aside`,{className:`app-sidebar`,children:[v&&y(`div`,{className:`app-sidebar-brand`,children:v}),x&&y(`div`,{className:`app-sidebar-start`,children:x}),S&&y(`div`,{className:`app-sidebar-start-compact`,children:S}),y(`nav`,{className:`app-sidebar-scroll`,"aria-label":z,ref:X,tabIndex:ve?0:void 0,children:Q.map((e,t)=>{let n=e.items.map(e=>e.header==null?y(ie,{item:e,linkComponent:B,onNavigate:()=>Y(!1),iconVariant:I},e.key??e.href??e.label):y(`div`,{className:`wui-nav-header`,children:e.header},e.key??e.header));if(!e.collapsible)return b(`div`,{className:`app-nav-group`,children:[e.label&&y(`div`,{className:`app-nav-group-label`,children:e.label}),n,e.after&&y(`div`,{className:`wui-nav-group-after`,children:e.after})]},e.key??e.label??`group-${t}`);let r=!we.has(e.key)||!!R(e.items),a=`wui-nav-group-${e.key}`;return b(`div`,{className:`app-nav-group wui-nav-group-collapsible${r?``:` wui-nav-group-folded`}`,"data-wui-nav-group":e.key,children:[b(`button`,{type:`button`,className:`app-nav-group-label wui-nav-group-toggle`,"aria-expanded":r,"aria-controls":a,onClick:()=>Ee(e.key),children:[y(`span`,{className:`wui-nav-group-text`,children:e.label}),y(`span`,{className:`wui-nav-group-caret`,children:y(i,{name:`chevron-down`,size:16})})]}),b(`div`,{className:`wui-nav-group-body`,id:a,children:[n,e.after&&y(`div`,{className:`wui-nav-group-after`,children:e.after})]})]},e.key??`group-${t}`)})}),C&&y(`div`,{className:`app-sidebar-foot`,children:C}),!N&&y(`button`,{type:`button`,className:`app-sidebar-toggle`,onClick:Se,"aria-label":Z?`Expand navigation`:`Collapse navigation`,"aria-expanded":!Z,children:y(i,{name:`chevrons-left`,size:20})})]}),b(`div`,{className:`app-main`,children:[b(`header`,{className:`app-topbar${ge?` scrolled`:``}`,"data-tone":L===`primary`?`primary`:void 0,children:[b(`div`,{className:`app-topbar-start`,children:[y(`button`,{type:`button`,className:`app-topbar-menu`,onClick:()=>Y(!0),"aria-label":`Open navigation`,"aria-expanded":J,children:y(i,{name:`menu`,size:18})}),w,K&&y(se,{config:K})]}),b(`div`,{className:`app-topbar-end`,children:[T,G&&y(oe,{config:G}),W&&y(ae,{config:W,linkComponent:B})]})]}),y(`main`,{className:`app-content`,id:`main-content`,children:j}),k&&y(`footer`,{className:`app-footer`,ref:xe,children:k})]}),A&&y(`div`,{className:`wui-shell-launcher`,children:A}),$&&b(`nav`,{className:`wui-tabbar`,"aria-label":le,children:[$.tabs.map(e=>y(re,{tab:e,linkComponent:B,iconVariant:I},e.key??e.href)),$.hasMore&&b(`button`,{type:`button`,className:`wui-tabbar-item${$.moreActive?` active`:``}`,onClick:()=>Y(!0),children:[y(`span`,{className:`wui-tabbar-icon`,children:y(i,{name:`more`,size:24})}),y(`span`,{className:`wui-tabbar-label`,children:ue})]})]}),y(`button`,{type:`button`,className:`app-scrim`,onClick:()=>Y(!1),"aria-label":`Close navigation`,tabIndex:J?0:-1})]})}function te(e,t){for(let t of e)t.collapsible&&L(t);let i=(e,t=!1)=>(e??[]).map(e=>Array.isArray(e.children)?{...e,children:i(e.children)}:{...e}).filter(e=>P(e)?t:(e.children?.length??0)>0||!!e.href),a=e.map(e=>({...e,items:F(i(e.items,!0))})).filter(e=>e.items.some(e=>!P(e))),s=[],c=e=>{for(let t of e)P(t)||(s.push(t),t.children&&c(t.children))};for(let e of a)c(e.items);for(let e of s)r(`AppShell items`,N(e)),n(`AppShell`,`match`,e.match,T),n(`AppShell`,`iconVariant`,e.iconVariant,O);let l=null;if(t!=null&&!s.some(e=>e.active===!0)){let e=-1;for(let n of s){if(n.active!=null||n.children?.length&&!n.href)continue;let r=o(t,n.href,{exact:n.match===`exact`,also:n.matchAlso});if(r<0)continue;let i=n.match===`exact`&&o(t,n.href,{exact:!0})>=0?1/0:r;i>e&&(e=i,l=n)}}for(let e of s)e.active=e.active??e===l;return a}function N(e){return Object.fromEntries(Object.entries(e).filter(([e])=>!k.has(e)))}var P=e=>e.header!=null;function F(e){return e.filter((t,n)=>{if(!P(t))return!0;let r=e.findIndex((e,t)=>t>n&&P(e));return e.slice(n+1,r<0?void 0:r).length>0})}var I=new Set;function L(e){if(e.key!=null&&w.test(e.key))return;let n=e.key==null?`<AppShell> a collapsible group needs a key so its folded state can be remembered.`:`<AppShell> collapsible group key "${e.key}" must use lower-case letters, digits and hyphens.`,r=!0;try{r=process.env.NODE_ENV!==`production`}catch{r=!0}!r||I.has(n)||(I.add(n),t(n))}function ne(e){let t=[],n=e=>{for(let r of e)P(r)||(r.children?.length?n(r.children):t.push(r))};for(let t of e)n(t.items);let r=t.filter(e=>e.tab);if(r.length===0)return null;let i=r.length<t.length,a=i?S:C;if(r.length>a)throw Error(`<AppShell>: ${r.length} items carry tab: true, but the phone tab bar holds ${a} (${i?`4 plus More, because other items exist`:`5 when every item is a tab`}). Flag fewer items.`);return{tabs:r,hasMore:i,moreActive:t.some(e=>!e.tab&&e.active)}}function re({tab:e,linkComponent:t,iconVariant:n}){let r=`wui-tabbar-item${e.active?` active`:``}`,a=b(v,{children:[e.icon&&y(`span`,{className:`wui-tabbar-icon`,children:typeof e.icon==`string`?y(i,{name:e.icon,size:24,variant:e.iconVariant??n}):e.icon}),y(`span`,{className:`wui-tabbar-label`,children:e.tabLabel??e.label}),e.badge!=null&&y(`span`,{className:`wui-tabbar-badge${e.badgeTone?` tone-${e.badgeTone}`:``}`,title:e.badgeTitle||void 0,children:e.badge})]}),o=e.active?`page`:void 0;return t?y(t,{className:r,to:e.href,"aria-current":o,children:a}):y(`a`,{className:r,href:e.href,"aria-current":o,children:a})}function R(e){for(let t of e){if(t.active)return t;let e=t.children?.length?R(t.children):void 0;if(e)return e}}function ie({item:e,linkComponent:t,onNavigate:n,depth:r=0,iconVariant:a}){let o=r>0,s=r>1?` wui-nav-depth-${Math.min(r,6)}`:``,c=Array.isArray(e.children)&&e.children.length>0,l=c?R(e.children):void 0,u=!!l,d=l?l.key??l.href??l.label:null,[f,m]=_(u);p(()=>{d!=null&&m(!0)},[d]);let h=typeof e.label==`string`?e.label:void 0,g=!o&&e.icon&&y(`span`,{className:`app-nav-icon`,children:typeof e.icon==`string`?y(i,{name:e.icon,size:e.iconSize??22,variant:e.iconVariant??a}):e.icon}),x=e.badge!=null&&y(`span`,{className:`app-nav-badge${e.badgeTone?` tone-${e.badgeTone}`:``}`,title:e.badgeTitle||void 0,children:e.badge}),S=M(e.newUntil)&&y(`span`,{className:`wui-nav-new`,children:`New`}),C=b(v,{children:[g,y(`span`,{className:`app-nav-text`,children:e.label}),S,x,e.trailingIcon&&y(`span`,{className:`app-nav-trailing`,children:typeof e.trailingIcon==`string`?y(i,{name:e.trailingIcon,size:16}):e.trailingIcon})]}),w=e.active?`page`:void 0;if(c){let c=y(`div`,{className:`app-nav-sub${f?` expanded`:``}`,inert:!f,"aria-hidden":!f||void 0,children:y(`div`,{className:`app-nav-sub-inner`,children:e.children.map(e=>y(ie,{item:e,linkComponent:t,onNavigate:n,depth:r+1,iconVariant:a},e.key??e.href))})});if(e.href){let r=t?y(t,{className:`wui-nav-split-link`,to:e.href,"aria-current":w,onClick:n,children:C}):y(`a`,{className:`wui-nav-split-link`,href:e.href,"aria-current":w,onClick:n,children:C});return b(v,{children:[b(`div`,{className:`app-nav-item has-children wui-nav-split${o?` app-nav-subitem`:``}${u||e.active?` active`:``}${s}`,"data-label":h,children:[r,y(`button`,{type:`button`,className:`app-nav-caret wui-nav-split-toggle`,"aria-expanded":f,"aria-label":`Show or hide ${h??``} pages`,onClick:()=>m(e=>!e),children:y(i,{name:`chevron-right`,size:16})})]}),c]})}return b(v,{children:[b(`button`,{type:`button`,className:`app-nav-item${o?` app-nav-subitem`:``} has-children${u?` active`:``}${s}`,"aria-expanded":f,"data-label":h,onClick:()=>m(e=>!e),children:[g,y(`span`,{className:`app-nav-text`,children:e.label}),S,x,y(`span`,{className:`app-nav-caret`,children:y(i,{name:`chevron-right`,size:16})})]}),c]})}let T=`app-nav-item${o?` app-nav-subitem`:``}${e.active?` active`:``}${s}`;return t?y(t,{className:T,to:e.href,"aria-current":w,"data-label":h,onClick:n,children:C}):y(`a`,{className:T,href:e.href,"aria-current":w,"data-label":h,onClick:n,children:C})}function z(){let[e,t]=_(!1),n=g(null);return p(()=>{if(!e)return;let r=e=>{n.current?.contains(e.target)||t(!1)},i=e=>{e.key===`Escape`&&(t(!1),n.current?.querySelector(`button`)?.focus())};return document.addEventListener(`mousedown`,r),document.addEventListener(`keydown`,i),()=>{document.removeEventListener(`mousedown`,r),document.removeEventListener(`keydown`,i)}},[e]),{open:e,setOpen:t,ref:n}}function ae({config:e,linkComponent:t}){let n=m(),{open:r,setOpen:o,ref:s}=z(),{name:c,role:l,roles:u=[],photo:d,profileHref:f,profileLabel:p=`My profile`,onLogout:h,logoutAction:g,logoutLabel:_=`Sign out`,items:x=[]}=e;if(!c)throw Error(`<AppShell> userMenu.name is required; the trigger and the avatar are named from it.`);let S=u.map(e=>(e??``).trim()).filter(Boolean),C=()=>o(!1),w=(e,n,r,i)=>t?y(t,{className:`dropdown-item`,to:e,onClick:i,children:n},r):y(`a`,{className:`dropdown-item`,href:e,onClick:i,children:n},r),T=b(v,{children:[y(i,{name:`log-out`,size:18}),_]});return b(`div`,{className:`dropdown wui-usermenu`,ref:s,children:[b(`button`,{type:`button`,id:n,className:`wui-usermenu-trigger`,"aria-expanded":r,"aria-label":`Account menu for ${c}`,onClick:()=>o(e=>!e),children:[y(a,{name:c,src:d,tone:`auto`}),b(`span`,{className:`wui-usermenu-text`,children:[y(`span`,{className:`wui-usermenu-name`,children:c}),l&&y(`span`,{className:`wui-usermenu-role`,children:l})]}),y(i,{name:`chevron-down`,size:14,className:`wui-usermenu-caret`})]}),b(`div`,{className:`dropdown-menu dropdown-menu-end wui-usermenu-menu${r?` show`:``}`,"aria-labelledby":n,"data-bs-popper":r?`static`:void 0,children:[b(`div`,{className:`wui-usermenu-head`,children:[y(a,{name:c,src:d,size:`lg`,tone:`auto`}),b(`div`,{className:`wui-usermenu-who`,children:[y(`div`,{className:`wui-usermenu-name`,children:c}),l&&y(`div`,{className:`wui-usermenu-role`,children:l}),S.length>0&&b(`div`,{className:`wui-usermenu-roles`,children:[y(`span`,{className:`wui-usermenu-roles-label`,children:S.length===1?`Role:`:`Roles:`}),` ${S.join(`, `)}`]})]})]}),f&&w(f,b(v,{children:[y(i,{name:`user`,size:18}),p]}),void 0,C),x.map(e=>{if(e.divider)return y(`hr`,{className:`dropdown-divider`},e.key);let t=b(v,{children:[e.icon&&y(i,{name:e.icon,size:18}),e.label]}),n=()=>{e.onClick?.(),C()};return e.href?w(e.href,t,e.key,n):y(`button`,{type:`button`,className:`dropdown-item`,onClick:n,children:t},e.key)}),g?y(`form`,{method:`post`,action:g,className:`wui-usermenu-logout`,children:y(`button`,{type:`submit`,className:`dropdown-item danger`,children:T})}):h&&y(`button`,{type:`button`,className:`dropdown-item danger`,onClick:()=>{C(),h()},children:T})]})]})}function oe({config:e}){let t=m(),{open:n,setOpen:r,ref:a}=z(),{unread:o=0,items:s,loading:c=!1,onOpen:l,onMarkAllRead:u,viewAllHref:d,label:f=`Notifications`,emptyText:h=`You are all caught up.`}=e,[x,S]=_(``),C=g(o);p(()=>{C.current!==o&&(C.current=o,S(o===0?`No unread notifications`:`${A(o)} unread notifications`))},[o]);let w=null;return s?.length?w=y(`div`,{className:`wui-bell-items`,children:s.map((e,t)=>{let n=`wui-bell-item${e.read?` wui-bell-item-read`:``}`,r=b(v,{children:[y(`span`,{className:`wui-bell-dot`,"aria-hidden":`true`}),e.icon&&y(`span`,{className:`wui-bell-icon`,children:y(i,{name:e.icon,size:18})}),b(`span`,{className:`wui-bell-body`,children:[!e.read&&y(`span`,{className:`visually-hidden`,children:`Unread: `}),y(`span`,{className:`wui-bell-item-title`,children:e.title}),e.time&&y(`span`,{className:`wui-bell-when`,children:e.time})]})]});return e.href?y(`a`,{className:n,href:e.href,"data-id":e.id,children:r},e.id??t):y(`div`,{className:n,"data-id":e.id,children:r},e.id??t)})}):c?w=y(`div`,{className:`wui-bell-state`,children:`Loading…`}):s&&(w=y(`div`,{className:`wui-bell-state`,children:h})),b(`div`,{className:`dropdown wui-bell`,ref:a,children:[b(`button`,{type:`button`,id:t,className:`topbar-icon-btn wui-bell-trigger`,"aria-expanded":n,"aria-label":o===0?f:`${f}, ${A(o)} unread`,onClick:()=>{let e=!n;r(e),e&&l?.()},children:[y(i,{name:`notification`,size:20}),y(`span`,{className:`wui-bell-count`,"aria-hidden":`true`,hidden:o===0,children:A(o)})]}),y(`span`,{className:`visually-hidden`,"aria-live":`polite`,children:x}),b(`div`,{className:`dropdown-menu dropdown-menu-end wui-bell-menu${n?` show`:``}`,"aria-labelledby":t,"data-bs-popper":n?`static`:void 0,children:[b(`div`,{className:`wui-bell-head`,children:[y(`span`,{className:`wui-bell-title`,children:f}),u&&y(`button`,{type:`button`,className:`wui-bell-markall`,onClick:u,children:`Mark all read`})]}),y(`div`,{className:`wui-bell-list`,"aria-busy":c||void 0,children:w}),d&&y(`a`,{className:`wui-bell-foot`,href:d,children:`View all`})]})]})}var B=e=>!!e&&(e.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(e.tagName));function se({config:e}){let t=m(),{value:n=``,onChange:r,results:a=null,loading:o=!1,onSelect:s,onSubmit:c,placeholder:l=`Search`}=e,[u,d]=_(!1),[f,v]=_(!1),[x,S]=_({results:null,index:-1}),C=x.results===a?x.index:-1,w=e=>S({results:a,index:e}),T=g(null),E=g(null),D=g([]),O=h(()=>(a??[]).flatMap(e=>e.hits??[]),[a]),k=a!=null&&!f,A=O.length;p(()=>{let e=e=>{e.key!==`/`||e.ctrlKey||e.metaKey||e.altKey||B(e.target)||(e.preventDefault(),d(!0),E.current?.focus())},t=e=>{T.current?.contains(e.target)||(v(!0),d(!1))};return document.addEventListener(`keydown`,e),document.addEventListener(`pointerdown`,t),()=>{document.removeEventListener(`keydown`,e),document.removeEventListener(`pointerdown`,t)}},[]);let j=e=>{if(e.key===`ArrowDown`||e.key===`ArrowUp`){if(!k||A===0)return;e.preventDefault(),w((C+(e.key===`ArrowDown`?1:-1)+A)%A)}else e.key===`Enter`?k&&C>=0&&D.current[C]?(e.preventDefault(),D.current[C].click()):c&&n.trim()!==``&&(e.preventDefault(),c(n.trim())):e.key===`Escape`&&(k?(e.preventDefault(),v(!0)):u&&(e.preventDefault(),d(!1)))},M=-1;return D.current=[],b(`div`,{className:`wui-topsearch${u?` is-open`:``}${o?` is-loading`:``}`,ref:T,children:[y(`button`,{type:`button`,className:`topbar-icon-btn wui-topsearch-open`,"aria-label":l,"aria-expanded":u,"aria-controls":`${t}-panel`,onClick:()=>{let e=!u;d(e),e&&E.current?.focus()},children:y(i,{name:`search`,size:20})}),b(`div`,{className:`wui-topsearch-panel`,id:`${t}-panel`,children:[b(`div`,{className:`search-wrap`,children:[y(i,{name:`search`,size:18,className:`search-icon`}),y(`input`,{ref:E,type:`search`,className:`form-control input search-input`,id:`${t}-input`,placeholder:l,"aria-label":l,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":k,"aria-controls":`${t}-list`,"aria-activedescendant":k&&C>=0?`${t}-opt-${C}`:void 0,autoComplete:`off`,value:n,onChange:e=>{v(!1),r?.(e.target.value)},onKeyDown:j})]}),y(`div`,{className:`wui-topsearch-results`,id:`${t}-list`,role:`listbox`,"aria-label":`Search results`,hidden:!k,children:k&&b(`div`,{className:`wui-topsearch-groups`,role:`presentation`,children:[A===0&&b(`div`,{className:`wui-topsearch-empty`,role:`option`,"aria-disabled":`true`,"aria-selected":`false`,children:[`No results for “`,n,`”`]}),a.filter(e=>e.hits?.length).map((e,n)=>b(`div`,{className:`wui-topsearch-group`,role:`group`,"aria-label":e.label??``,children:[e.label&&y(`div`,{className:`wui-topsearch-group-label`,role:`presentation`,children:e.label}),e.hits.map(e=>{M+=1;let n=M;return b(`a`,{className:`wui-topsearch-hit${n===C?` is-active`:``}`,role:`option`,"aria-selected":n===C,id:`${t}-opt-${n}`,href:e.href,ref:e=>{D.current[n]=e},onClick:t=>s?.(e,t),children:[e.icon&&y(`span`,{className:`wui-topsearch-hit-icon`,children:y(i,{name:e.icon,size:18})}),b(`span`,{className:`wui-topsearch-hit-text`,children:[y(`span`,{className:`wui-topsearch-hit-title`,children:e.title}),e.subtitle&&y(`span`,{className:`wui-topsearch-hit-sub`,children:e.subtitle})]})]},`${e.href}-${n}`)})]},e.label??n))]})})]}),y(`span`,{className:`visually-hidden`,"aria-live":`polite`,children:k?A===0?`No results`:`${A} ${A===1?`result`:`results`}`:``})]})}export{ee as default};

package/dist/guidance.json

@@ -2,7 +2,7 @@
   "format": "webority-guidance/1",
   "package": {
     "name": "@webority/ui-react",
-    "version": "0.110.2"
+    "version": "0.111.0"
   },
   "components": [
     {

package/dist/types/components/AppDrawer.d.ts

@@ -35,6 +35,7 @@ import "@webority/ui-elements/elements/drawer";
  * @param {boolean} [props.dirty]
  * @param {import('react').ReactNode} [props.footer]
  * @param {string} [props.className]
+ * @param {string} [props.headerClassName] Classes on the default header; ignored when `header` replaces it.
  * @param {string} [props.bodyClassName]
  * @param {import('react').CSSProperties} [props.style]
  * @param {import('react').ReactNode} props.children
@@ -117,6 +118,11 @@ export default function AppDrawer(props: {
      * @default ""
      */
     className?: string;
+    /**
+     * Classes on the default header, so a product can style it without restyling the library class. Ignored when header replaces it.
+     * @default ""
+     */
+    headerClassName?: string;
     /**
      * Classes on the scrolling body, such as p-0 to drop its padding.
      * @default ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.110.2",
+  "version": "0.111.0",
   "description": "Webority shared React component library — App* primitives on react-bootstrap + the @webority/theme design system.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -29,8 +29,8 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@webority/theme": "0.110.2",
-    "@webority/ui-elements": "0.110.2"
+    "@webority/theme": "0.111.0",
+    "@webority/ui-elements": "0.111.0"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.28.0",
@@ -56,8 +56,8 @@
     "typescript": "^7.0.2",
     "vite": "^8.0.12",
     "vitest": "5.0.1",
-    "@webority/canvas-kit": "0.110.2",
-    "@webority/tokens": "0.110.2"
+    "@webority/canvas-kit": "0.111.0",
+    "@webority/tokens": "0.111.0"
   },
   "scripts": {
     "build": "vite build && tsc -p tsconfig.json && node ../../scripts/inject-meta-docs.mjs && node ../canvas-kit/dist/cli.js build --config canvas-kit.json --out dist/canvas-kit && node ../canvas-kit/dist/cli.js guidance --config canvas-kit.json --out dist/guidance.json && node ../../scripts/sync-rcl-assets.mjs analytics",