@webority/ui-react 0.36.0 → 0.37.0

package/dist/components/AppShell.js

@@ -235,34 +235,35 @@ function C({ tab: e, linkComponent: t }) {
 		children: i
 	});
 }
-function w({ item: e, linkComponent: t, onNavigate: r, sub: i = !1 }) {
-	let a = Array.isArray(e.children) && e.children.length > 0, o = a && e.children.some((e) => e.active), [c, l] = d(o);
+function w({ item: e, linkComponent: t, onNavigate: r, depth: i = 0 }) {
+	let a = i > 0, o = i > 1 ? { "--wui-nav-depth": i } : void 0, c = Array.isArray(e.children) && e.children.length > 0, l = c && e.children.some((e) => e.active), [u, h] = d(l);
 	s(() => {
-		o && !c && l(!0);
-	}, [o, c]);
-	let u = typeof e.label == "string" ? e.label : void 0, h = !i && e.icon && /* @__PURE__ */ p("span", {
+		l && !u && h(!0);
+	}, [l, u]);
+	let g = typeof e.label == "string" ? e.label : void 0, _ = !a && e.icon && /* @__PURE__ */ p("span", {
 		className: "app-nav-icon",
 		children: typeof e.icon == "string" ? /* @__PURE__ */ p(n, {
 			name: e.icon,
 			size: 22
 		}) : e.icon
-	}), g = e.badge != null && /* @__PURE__ */ p("span", {
+	}), v = e.badge != null && /* @__PURE__ */ p("span", {
 		className: `app-nav-badge${e.badgeTone ? ` tone-${e.badgeTone}` : ""}`,
 		children: e.badge
 	});
-	if (a) return /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ m("button", {
+	if (c) return /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ m("button", {
 		type: "button",
-		className: `app-nav-item has-children${o ? " active" : ""}`,
-		"aria-expanded": c,
-		"data-label": u,
-		onClick: () => l((e) => !e),
+		className: `app-nav-item${a ? " app-nav-subitem" : ""} has-children${l ? " active" : ""}`,
+		style: o,
+		"aria-expanded": u,
+		"data-label": g,
+		onClick: () => h((e) => !e),
 		children: [
-			h,
+			_,
 			/* @__PURE__ */ p("span", {
 				className: "app-nav-text",
 				children: e.label
 			}),
-			g,
+			v,
 			/* @__PURE__ */ p("span", {
 				className: "app-nav-caret",
 				children: /* @__PURE__ */ p(n, {
@@ -272,26 +273,26 @@ function w({ item: e, linkComponent: t, onNavigate: r, sub: i = !1 }) {
 			})
 		]
 	}), /* @__PURE__ */ p("div", {
-		className: `app-nav-sub${c ? " expanded" : ""}`,
-		inert: !c,
-		"aria-hidden": !c || void 0,
+		className: `app-nav-sub${u ? " expanded" : ""}`,
+		inert: !u,
+		"aria-hidden": !u || void 0,
 		children: /* @__PURE__ */ p("div", {
 			className: "app-nav-sub-inner",
 			children: e.children.map((e) => /* @__PURE__ */ p(w, {
 				item: e,
 				linkComponent: t,
 				onNavigate: r,
-				sub: !0
+				depth: i + 1
 			}, e.key ?? e.href))
 		})
 	})] });
-	let _ = `app-nav-item${i ? " app-nav-subitem" : ""}${e.active ? " active" : ""}`, v = /* @__PURE__ */ m(f, { children: [
-		h,
+	let y = `app-nav-item${a ? " app-nav-subitem" : ""}${e.active ? " active" : ""}`, b = /* @__PURE__ */ m(f, { children: [
+		_,
 		/* @__PURE__ */ p("span", {
 			className: "app-nav-text",
 			children: e.label
 		}),
-		g,
+		v,
 		e.trailingIcon && /* @__PURE__ */ p("span", {
 			className: "app-nav-trailing",
 			children: typeof e.trailingIcon == "string" ? /* @__PURE__ */ p(n, {
@@ -299,21 +300,23 @@ function w({ item: e, linkComponent: t, onNavigate: r, sub: i = !1 }) {
 				size: 16
 			}) : e.trailingIcon
 		})
-	] }), y = e.active ? "page" : void 0;
+	] }), x = e.active ? "page" : void 0;
 	return t ? /* @__PURE__ */ p(t, {
-		className: _,
+		className: y,
+		style: o,
 		to: e.href,
-		"aria-current": y,
-		"data-label": u,
+		"aria-current": x,
+		"data-label": g,
 		onClick: r,
-		children: v
+		children: b
 	}) : /* @__PURE__ */ p("a", {
-		className: _,
+		className: y,
+		style: o,
 		href: e.href,
-		"aria-current": y,
-		"data-label": u,
+		"aria-current": x,
+		"data-label": g,
 		onClick: r,
-		children: v
+		children: b
 	});
 }
 function T() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.36.0",
+  "version": "0.37.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/ui-elements": "0.36.0",
-    "@webority/theme": "0.36.0"
+    "@webority/theme": "0.37.0",
+    "@webority/ui-elements": "0.37.0"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.6.0 || ^0.7.0 || ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0",