@iress-oss/ids-components 6.0.1 → 6.2.0

package/dist/patterns/SideNav/SideNav.js

@@ -1,7 +1,7 @@
-import { t as e } from "../../css-D3KwXbP0.js";
-import { t } from "../../cx-CZ8IJJTy.js";
-import { n } from "../../is-valid-prop-BoZ7GJt2.js";
-import { t as r } from "../../factory-sKbby7-S.js";
+import { t as e } from "../../css-R34N3rft.js";
+import { t } from "../../cx-QcEwjve6.js";
+import { n } from "../../is-valid-prop-BVyYPT21.js";
+import { t as r } from "../../factory-BKr3zaf6.js";
 import { GlobalCSSClass as i } from "../../enums.js";
 import { IressText as a } from "../../components/Text/Text.js";
 import { propagateTestid as o } from "../../helpers/utility/propagateTestid.js";
@@ -11,104 +11,110 @@ import { IressMenuGroup as l } from "../../components/Menu/MenuGroup/MenuGroup.j
 import { sideNav as u } from "./SideNav.styles.js";
 import { useSideNavState as d } from "./hooks/useSideNavState.js";
 import { isSideNavGroup as f } from "./SideNav.helpers.js";
-import { useMemo as p } from "react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useMemo as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/patterns/SideNav/SideNav.tsx
-var g = ({ "aria-label": g = "Side navigation", activeItemKey: _, className: v, collapseLabel: y = "Collapse navigation", "data-testid": b, defaultExpanded: x, expanded: S, expandLabel: C = "Expand navigation", footer: w, header: T, items: E, numbered: D = !1, onActiveItemKeyChange: O, onExpandedChange: k, sideMenuItems: A, sideMenuLabel: j, style: M, width: N, ...P }) => {
-	let [F, I] = p(() => n(P), [P]), L = typeof N == "number" ? `${N}px` : N, { isExpanded: R, toggleExpanded: z, resolvedActiveItemKey: B, setActiveItemKey: V, panelContent: H, panelLabel: U, hasPanelContent: W } = d({
-		items: E,
-		activeItemKey: _,
-		onActiveItemKeyChange: O,
-		sideMenuItems: A,
-		sideMenuLabel: j,
-		expanded: S,
-		defaultExpanded: x,
-		onExpandedChange: k
-	}), G = u({ expanded: R }), K = u.raw({ expanded: R });
-	return /* @__PURE__ */ h(r.nav, {
-		...I,
-		"aria-label": g,
-		className: t(e(K.root, F), v, i.SideNav),
-		"data-testid": b,
+var _ = ({ "aria-label": _ = "Side navigation", activeItemKey: v, className: y, collapseLabel: b = "Collapse navigation", "data-testid": x, defaultExpanded: S, expanded: C, expandLabel: w = "Expand navigation", footer: T, header: E, items: D, numbered: O = !1, onActiveItemKeyChange: k, onExpandedChange: A, sideMenuItems: j, sideMenuLabel: M, style: N, width: P, ...F }) => {
+	let [I, L] = p(() => n(F), [F]), R = typeof P == "number" ? `${P}px` : P, { isExpanded: z, toggleExpanded: B, resolvedActiveItemKey: V, setActiveItemKey: H, panelContent: U, panelLabel: W, hasPanelContent: G } = d({
+		items: D,
+		activeItemKey: v,
+		onActiveItemKeyChange: k,
+		sideMenuItems: j,
+		sideMenuLabel: M,
+		expanded: C,
+		defaultExpanded: S,
+		onExpandedChange: A
+	}), [K, q] = m(() => U.find((e) => f(e) && e.active)?.key), J = u({ expanded: z }), Y = u.raw({ expanded: z });
+	return /* @__PURE__ */ g(r.nav, {
+		...L,
+		"aria-label": _,
+		className: t(e(Y.root, I), y, i.SideNav),
+		"data-testid": x,
 		style: {
-			"--iress-width": L,
-			...M
+			"--iress-width": R,
+			...N
 		},
-		children: [/* @__PURE__ */ h(s, {
+		children: [/* @__PURE__ */ g(s, {
 			variant: "rail",
-			"data-testid": o(b, "rail"),
-			children: [E.map((e) => /* @__PURE__ */ m(c, {
+			"data-testid": o(x, "rail"),
+			children: [D.map((e) => /* @__PURE__ */ h(c, {
 				icon: e.icon,
 				href: e.href,
 				element: e.element,
 				onClick: (t) => {
-					V(e.key), e.onClick?.(t);
+					H(e.key), e.onClick?.(t);
 				},
 				"aria-label": e.ariaLabel ?? (typeof e.label == "string" ? e.label : void 0),
-				selected: B === e.key,
-				"data-testid": o(b, `rail-item-${e.key}`),
+				selected: V === e.key,
+				"data-testid": o(x, `rail-item-${e.key}`),
 				divider: e.divider,
 				children: e.label
-			}, e.key)), /* @__PURE__ */ m(c, {
-				className: G.toggle,
-				listItemStyle: { className: G.toggle },
-				icon: R ? "keyboard_double_arrow_left" : "keyboard_double_arrow_right",
-				onClick: z,
-				"aria-expanded": R,
-				"aria-label": R ? y : C,
-				"data-testid": o(b, "toggle"),
-				children: R ? y : C
+			}, e.key)), /* @__PURE__ */ h(c, {
+				className: J.toggle,
+				listItemStyle: { className: J.toggle },
+				icon: z ? "keyboard_double_arrow_left" : "keyboard_double_arrow_right",
+				onClick: B,
+				"aria-expanded": z,
+				"aria-label": z ? b : w,
+				"data-testid": o(x, "toggle"),
+				children: z ? b : w
 			})]
-		}), /* @__PURE__ */ m("div", {
-			className: G.panel,
-			"data-testid": o(b, "panel"),
-			"aria-hidden": !R,
-			children: /* @__PURE__ */ m("div", {
-				className: G.panelContent,
-				children: /* @__PURE__ */ h("div", {
-					className: G.panelContentInner,
+		}), /* @__PURE__ */ h("div", {
+			className: J.panel,
+			"data-testid": o(x, "panel"),
+			"aria-hidden": !z,
+			children: /* @__PURE__ */ h("div", {
+				className: J.panelContent,
+				children: /* @__PURE__ */ g("div", {
+					className: J.panelContentInner,
 					children: [
-						T && /* @__PURE__ */ m("div", {
-							className: G.header,
-							"data-testid": o(b, "header"),
-							children: T
+						E && /* @__PURE__ */ h("div", {
+							className: J.header,
+							"data-testid": o(x, "header"),
+							children: E
 						}),
-						U && /* @__PURE__ */ m(a, {
-							className: G.panelHeading,
+						W && /* @__PURE__ */ h(a, {
+							className: J.panelHeading,
 							element: "h2",
 							textStyle: "typography.heading.3",
-							"data-testid": o(b, "panel-heading"),
-							children: U
+							"data-testid": o(x, "panel-heading"),
+							children: W
 						}),
-						W && /* @__PURE__ */ m(s, {
+						G && /* @__PURE__ */ h(s, {
 							variant: "side",
-							numbered: D,
-							"data-testid": o(b, "side-menu"),
-							children: H.map((e, t) => f(e) ? /* @__PURE__ */ m(l, {
+							numbered: O,
+							"data-testid": o(x, "side-menu"),
+							children: U.map((e, t) => f(e) ? /* @__PURE__ */ h(l, {
 								label: e.label,
-								defaultActive: e.active,
-								"data-testid": o(b, `side-group-${e.key ?? t}`),
-								children: e.children.map((e, t) => /* @__PURE__ */ m(c, {
+								href: e.href,
+								element: e.element,
+								onClick: e.onClick,
+								active: K === e.key,
+								onActiveChange: (t) => q(t ? e.key : void 0),
+								"data-testid": o(x, `side-group-${e.key ?? t}`),
+								children: e.children.map((e, t) => /* @__PURE__ */ h(c, {
 									href: e.href,
 									element: e.element,
 									onClick: e.onClick,
 									selected: e.active,
-									"data-testid": o(b, `side-item-${e.key ?? t}`),
+									"data-testid": o(x, `side-item-${e.key ?? t}`),
 									children: e.label
 								}, e.key ?? t))
-							}, e.key ?? t) : /* @__PURE__ */ m(c, {
+							}, e.key ?? t) : /* @__PURE__ */ h(c, {
 								href: e.href,
 								element: e.element,
-								onClick: e.onClick,
+								onClick: (t) => {
+									q(void 0), e.onClick?.(t);
+								},
 								selected: e.active,
-								"data-testid": o(b, `side-item-${e.key ?? t}`),
+								"data-testid": o(x, `side-item-${e.key ?? t}`),
 								children: e.label
 							}, e.key ?? t))
 						}),
-						w && /* @__PURE__ */ m("div", {
-							className: G.footer,
-							"data-testid": o(b, "footer"),
-							children: w
+						T && /* @__PURE__ */ h("div", {
+							className: J.footer,
+							"data-testid": o(x, "footer"),
+							children: T
 						})
 					]
 				})
@@ -116,6 +122,6 @@ var g = ({ "aria-label": g = "Side navigation", activeItemKey: _, className: v,
 		})]
 	});
 };
-g.displayName = "IressSideNav";
+_.displayName = "IressSideNav";
 //#endregion
-export { g as IressSideNav };
+export { _ as IressSideNav };

package/dist/patterns/SideNav/SideNav.styles.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../sva-DOLIp5Dd.js";
+import { t as e } from "../../sva-DGhdmNso.js";
 //#region src/patterns/SideNav/SideNav.styles.ts
 var t = e({
 	slots: [
@@ -30,7 +30,10 @@ var t = e({
 			overflow: "hidden",
 			transition: "[max-width 0.3s ease-in-out]"
 		},
-		panelContent: { width: "var(--iress-width, 260px)" },
+		panelContent: {
+			width: "var(--iress-width, 260px)",
+			height: "12/12"
+		},
 		panelContentInner: {
 			display: "flex",
 			flexDirection: "column",
@@ -38,7 +41,8 @@ var t = e({
 			borderRadius: "radius.system.layout",
 			m: "spacing.4",
 			boxShadow: "0 4px 20px #00327126",
-			pb: "spacing.2"
+			pb: "spacing.2",
+			maxHeight: "[calc(100% - ({spacing.spacing.4} * 2))]"
 		},
 		panelHeading: {
 			flexShrink: 0,

package/dist/rolldown-runtime-3b4jIN3o.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescriptor, r = Object.getOwnPropertyNames, i = Object.getPrototypeOf, a = Object.prototype.hasOwnProperty, o = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), s = (e, i, o, s) => {
+	if (i && typeof i == "object" || typeof i == "function") for (var c = r(i), l = 0, u = c.length, d; l < u; l++) d = c[l], !a.call(e, d) && d !== o && t(e, d, {
+		get: ((e) => i[e]).bind(null, d),
+		enumerable: !(s = n(i, d)) || s.enumerable
+	});
+	return e;
+}, c = (n, r, a) => (a = n == null ? {} : e(i(n)), s(r || !n || !n.__esModule ? t(a, "default", {
+	value: n,
+	enumerable: !0
+}) : a, n));
+//#endregion
+export { c as n, o as t };