@iress-oss/ids-components 6.0.1 → 6.1.0

package/dist/patterns/DropdownMenu/DropdownMenu.js

@@ -4,152 +4,163 @@ import { n } from "../../is-valid-prop-BoZ7GJt2.js";
 import { GlobalCSSClass as r } from "../../enums.js";
 import { IressIcon as i } from "../../components/Icon/Icon.js";
 import { t as a } from "../../Button-bZPKq0ue.js";
-import { propagateTestid as o } from "../../helpers/utility/propagateTestid.js";
-import { toArray as s } from "../../helpers/formatting/toArray.js";
-import { useControlledState as c } from "../../hooks/useControlledState.js";
-import { useIdIfNeeded as ee } from "../../hooks/useIdIfNeeded.js";
+import { IressText as o } from "../../components/Text/Text.js";
+import { propagateTestid as s } from "../../helpers/utility/propagateTestid.js";
+import { IressSpinner as ee } from "../../components/Spinner/Spinner.js";
+import { toArray as te } from "../../helpers/formatting/toArray.js";
+import { useControlledState as ne } from "../../hooks/useControlledState.js";
+import { useIdIfNeeded as c } from "../../hooks/useIdIfNeeded.js";
 import { IressPopover as l } from "../../components/Popover/Popover.js";
 import { usePopoverItem as u } from "../../components/Popover/hooks/usePopoverItem.js";
-import { t as d } from "../../useAutocompleteSearch-BJ_hhoKp.js";
-import { IressDivider as f } from "../../components/Divider/Divider.js";
-import { IressSelectMenu as p } from "../../components/Select/SelectMenu/SelectMenu.js";
-import { IressSelectSearchInput as m } from "../../components/Select/SelectSearchInput/SelectSearchInput.js";
-import { IressStyled as h } from "../../components/Styled/Styled.js";
-import { dropdownMenu as g } from "./DropdownMenu.styles.js";
-import { useDropdownMenuFlags as te } from "./hooks/useDropdownMenuFlags.js";
-import { forwardRef as _, useImperativeHandle as v, useMemo as y, useRef as b, useState as x } from "react";
-import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
+import { t as re } from "../../useAutocompleteSearch-DxKxs6HH.js";
+import { IressDivider as ie } from "../../components/Divider/Divider.js";
+import { IressInline as ae } from "../../components/Inline/Inline.js";
+import { IressSelectMenu as d } from "../../components/Select/SelectMenu/SelectMenu.js";
+import { IressSelectSearchInput as f } from "../../components/Select/SelectSearchInput/SelectSearchInput.js";
+import { IressStyled as p } from "../../components/Styled/Styled.js";
+import { dropdownMenu as m } from "./DropdownMenu.styles.js";
+import { useDropdownMenuFlags as h } from "./hooks/useDropdownMenuFlags.js";
+import { forwardRef as g, useImperativeHandle as _, useMemo as v, useRef as y, useState as b } from "react";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
 //#region src/patterns/DropdownMenu/DropdownMenu.tsx
-var T = g.raw(), E = g(), D = _((e, t) => {
-	let n = b(null), { isActiveInPopover: r, ...i } = u();
-	return v(t, () => n.current), /* @__PURE__ */ C(a, {
+var oe = m.raw(), w = m(), se = g((e, t) => {
+	let n = y(null), { isActiveInPopover: r, ...i } = u();
+	return _(t, () => n.current), /* @__PURE__ */ S(a, {
 		...e,
 		...i,
-		className: E.reset,
+		className: w.reset,
 		mode: "quaternary",
 		ref: (e) => {
 			n.current = e, i?.ref?.(n.current);
 		}
 	});
-}), O = _(({ activatorStyle: a = {}, align: u = "bottom-start", container: g, className: _, "data-testid": O, defaultSelected: ne, debounceThreshold: re, footer: ie, header: ae, label: k, id: oe, initialOptions: se, inputProps: ce = {
+}), T = g(({ activatorStyle: a = {}, align: u = "bottom-start", container: m, className: g, "data-testid": T, defaultSelected: ce, debounceThreshold: le, footer: ue, header: de, label: E, id: fe, initialOptions: pe, inputProps: D = {
 	clearable: !0,
-	prepend: /* @__PURE__ */ C(i, { name: "search" })
-}, limitDesktop: le = 12, limitMobile: A = 6, multiSelect: j, onChange: M, onReset: N, options: P, searchable: F, searchNoResultsText: I, selected: L, selectedOptionsText: R = " ({{numOptions}})", visibleResetButton: z, ...B }, V) => {
-	let H = ee({ id: oe }), U = `${H}-sr-text`, W = b(null), G = y(() => F ?? typeof P == "function", [P, F]), ue = {
+	prepend: /* @__PURE__ */ S(i, { name: "search" })
+}, limitDesktop: O = 12, limitMobile: k = 6, multiSelect: A, onChange: j, onReset: M, options: N, searchable: P, searchNoResultsText: F, selected: I, selectedOptionsText: L = " ({{numOptions}})", visibleResetButton: R, ...z }, B) => {
+	let V = c({ id: fe }), H = `${V}-sr-text`, U = y(null), W = v(() => P ?? typeof N == "function", [N, P]), me = {
 		clearable: !0,
-		prepend: /* @__PURE__ */ C(i, { name: "search" }),
-		...ce
-	}, { value: K, setValue: de } = c({
+		prepend: /* @__PURE__ */ S(i, { name: "search" }),
+		...D
+	}, { value: G, setValue: K } = ne({
 		component: "IressDropdownMenu",
-		defaultValue: ne,
-		value: L
-	}), [fe, q] = x(""), [J, Y] = x(!1), [pe, me] = y(() => n(B), [B]), [he, ge] = y(() => n(a), [a]), _e = (e) => {
+		defaultValue: ce,
+		value: I
+	}), [he, q] = b(""), [J, Y] = b(!1), [ge, _e] = v(() => n(z), [z]), [ve, ye] = v(() => n(a), [a]), be = (e) => {
 		q(e.target.value);
-	}, ve = () => {
+	}, xe = () => {
 		q("");
-	}, ye = (e) => {
-		e && (M?.(e), de(e), j || Y(!1));
-	}, be = () => {
-		N?.(), j || Y(!1);
+	}, Se = (e) => {
+		e && (j?.(e), K(e), A || Y(!1));
+	}, Ce = () => {
+		K(void 0), M?.(), A || Y(!1);
 	};
-	v(V, () => ({
-		...W.current,
+	_(B, () => ({
+		...U.current,
 		clearSearch: () => q("")
 	}));
-	let { debouncedQuery: xe, loading: X, results: Z, shouldShowInstructions: Q, shouldShowDebounceWaiting: Se, shouldShowNoResults: Ce } = d({
-		debounceThreshold: re,
-		initialOptions: se ?? (typeof P == "function" ? void 0 : P),
-		options: P,
-		query: fe
-	}), $ = te({
-		debouncedQuery: xe,
+	let { debouncedQuery: we, loading: X, results: Z, shouldShowInstructions: Te, shouldShowDebounceWaiting: Q, shouldShowNoResults: Ee } = re({
+		debounceThreshold: le,
+		initialOptions: pe ?? (typeof N == "function" ? void 0 : N),
+		options: N,
+		query: he
+	}), $ = h({
+		debouncedQuery: we,
 		loading: X,
 		results: Z,
-		searchable: G,
-		shouldShowInstructions: Q,
-		shouldShowDebounceWaiting: Se,
-		shouldShowNoResults: Ce,
-		visibleResetButton: z
-	}), we = y(() => {
-		let e = s(K);
-		return j ? /* @__PURE__ */ w(S, { children: [k, R.replace("{{numOptions}}", e.length.toString())] }) : e[0]?.label ?? k;
+		searchable: W,
+		shouldShowInstructions: Te,
+		shouldShowDebounceWaiting: Q,
+		shouldShowNoResults: Ee,
+		visibleResetButton: R
+	}), De = v(() => {
+		let e = te(G);
+		return A ? /* @__PURE__ */ C(x, { children: [E, L.replace("{{numOptions}}", e.length.toString())] }) : e[0]?.label ?? E;
 	}, [
-		K,
-		j,
-		k,
-		R
-	]), Te = y(() => X ? "loading" : J && !Z.length ? I : J && Z.length ? `${Z.length} results` : k, [
-		k,
+		G,
+		A,
+		E,
+		L
+	]), Oe = v(() => X ? "loading" : J && !Z.length ? F : J && Z.length ? `${Z.length} results` : E, [
+		E,
 		X,
 		Z.length,
-		I,
+		F,
 		J
 	]);
-	return /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ w(l, {
+	return /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ C(l, {
 		matchActivatorWidth: !0,
-		...me,
-		activator: /* @__PURE__ */ C("button", {
-			...ge,
-			"aria-describedby": U,
-			"data-testid": a?.["data-testid"] ?? o(O, "activator-button__button"),
+		..._e,
+		activator: /* @__PURE__ */ S("button", {
+			...ye,
+			"aria-describedby": H,
+			"data-testid": a?.["data-testid"] ?? s(T, "activator-button__button"),
 			onClick: () => Y(!0),
-			className: t(a?.className, e(T.activator, he)),
-			children: we
+			className: t(a?.className, e(oe.activator, ve)),
+			children: De
 		}),
 		align: u,
-		className: t(_, e(pe), E.root, r.Filter),
-		container: g,
+		className: t(g, e(ge), w.root, r.Filter),
+		container: m,
 		contentStyle: {
-			className: E.popoverContent,
+			className: w.popoverContent,
 			p: "none"
 		},
-		"data-testid": O,
-		id: H,
+		"data-testid": T,
+		id: V,
 		show: J,
 		onActivated: () => Y(!0),
 		onDeactivated: () => Y(!1),
-		ref: W,
+		ref: U,
 		type: "listbox",
 		children: [
-			ae,
-			$.showHeader && /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ w(h, {
-				className: E.searchHeader,
-				children: [G && /* @__PURE__ */ C(m, {
-					...ue,
+			de,
+			$.showHeader && /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ C(p, {
+				className: w.searchHeader,
+				children: [W && /* @__PURE__ */ S(f, {
+					...me,
 					role: "searchbox",
-					className: E.searchInput,
-					"data-testid": o(O, "input"),
-					loading: X,
-					onChange: _e,
-					onClear: ve
-				}), z && K && /* @__PURE__ */ C(D, {
-					"data-testid": o(O, "reset-button"),
-					onClick: be,
-					children: typeof z == "string" ? z : "Reset filter"
+					className: w.searchInput,
+					"data-testid": s(T, "input"),
+					onChange: be,
+					onClear: xe
+				}), R && G && /* @__PURE__ */ S(se, {
+					"data-testid": s(T, "reset-button"),
+					onClick: Ce,
+					children: typeof R == "string" ? R : "Reset filter"
 				})]
-			}), $.showResults && /* @__PURE__ */ C(f, {})] }),
-			$.showResults && /* @__PURE__ */ C(p, {
-				className: E.optionList,
-				"data-testid": o(O, "menu"),
+			}), $.showResults && /* @__PURE__ */ S(ie, {})] }),
+			$.showResults && /* @__PURE__ */ S(d, {
+				className: w.optionList,
+				"data-testid": s(T, "menu"),
 				items: Z,
-				limitDesktop: le,
-				limitMobile: A,
-				multiSelect: j,
-				onChange: ye,
-				selected: K
+				limitDesktop: O,
+				limitMobile: k,
+				multiSelect: A,
+				onChange: Se,
+				selected: G
+			}),
+			$.showLoading && /* @__PURE__ */ C(ae, {
+				gap: "sm",
+				verticalAlign: "middle",
+				p: "spacing.3",
+				children: [/* @__PURE__ */ S(ee, { color: "colour.neutral.70" }), /* @__PURE__ */ S(o, {
+					color: "colour.neutral.70",
+					children: "Loading results..."
+				})]
 			}),
-			$.showNoResults && /* @__PURE__ */ C("div", {
-				className: E.noResults,
-				children: I
+			$.showNoResults && /* @__PURE__ */ S("div", {
+				className: w.noResults,
+				children: F
 			}),
-			ie
+			ue
 		]
-	}), /* @__PURE__ */ C(h, {
+	}), /* @__PURE__ */ S(p, {
 		srOnly: !0,
-		id: U,
-		children: Te
+		id: H,
+		children: Oe
 	})] });
 });
-O.displayName = "IressDropdownMenu";
+T.displayName = "IressDropdownMenu";
 //#endregion
-export { O as IressDropdownMenu };
+export { T as IressDropdownMenu };

package/dist/patterns/DropdownMenu/hooks/useDropdownMenuFlags.d.ts

@@ -2,6 +2,7 @@ import { AutocompleteSearchHookReturn } from '../../../components/Autocomplete';
 import { IressDropdownMenuProps } from '../DropdownMenu';
 export declare const useDropdownMenuFlags: ({ debouncedQuery, loading, results, searchable, visibleResetButton, }: Omit<AutocompleteSearchHookReturn, "clearError" | "error" | "startSearch" | "stopSearch"> & Pick<IressDropdownMenuProps, "searchable" | "visibleResetButton">) => {
     showHeader: string | boolean | undefined;
+    showLoading: boolean;
     showNoResults: string | false;
     showResults: boolean;
 };

package/dist/patterns/DropdownMenu/hooks/useDropdownMenuFlags.js

@@ -4,6 +4,7 @@ var t = ({ debouncedQuery: t, loading: n, results: r, searchable: i, visibleRese
 	let o = e(() => i || a, [i, a]), s = e(() => !!r.length, [r]);
 	return {
 		showHeader: o,
+		showLoading: e(() => n && !r.length, [n, r.length]),
 		showNoResults: e(() => r.length === 0 && !n && t, [
 			t,
 			n,

package/dist/patterns/Form/FormField/FormFieldset.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Control, FieldPath, FieldPathValue, FieldValues, UseControllerProps } from 'react-hook-form';
-import { IressFieldGroupProps } from '../../../components/Field';
+import { IressFieldGroupProps } from '../../../components/FieldGroup';
 import { CustomRules } from './helpers/transformCustomRulesToValidateRule';
 import { FormFieldRenderProps } from './FormField';
 export interface IressFormFieldsetProps<T extends FieldValues = FieldValues, TName extends FieldPath<T> = FieldPath<T>> extends Omit<IressFieldGroupProps, 'children' | 'htmlFor' | 'required' | 'join' | 'inline'>, Omit<UseControllerProps<T, FieldPath<T>>, 'disabled'> {

package/dist/patterns/Form/FormField/FormFieldset.js

@@ -1,5 +1,5 @@
 import { FormContext as e } from "../FormContext.js";
-import { IressFieldGroup as t } from "../../../components/Field/FieldGroup/FieldGroup.js";
+import { IressFieldGroup as t } from "../../../components/FieldGroup/FieldGroup.js";
 import { getErrorTypeMessage as n } from "./helpers/getErrorTypeMessage.js";
 import { transformCustomRulesToValidateRule as r } from "./helpers/transformCustomRulesToValidateRule.js";
 import { useFieldRenderProps as i } from "./hooks/useFieldRenderProps.js";

package/dist/patterns/Form/FormValidationSummary/FormValidationSummary.js

@@ -42,6 +42,7 @@ var c = e("div", { base: {
 			role: "none",
 			status: "danger",
 			variant: g,
+			multiLine: !0,
 			children: /* @__PURE__ */ s(i, {
 				..._,
 				"data-testid": t(u, "messages"),

package/dist/patterns/Form/components/LongForm.js

@@ -7,7 +7,7 @@ import { IressHookForm as a } from "../HookForm/HookForm.js";
 import { forwardRef as o, useMemo as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 import { useForm as u } from "react-hook-form";
-var d = o(({ actions: o, alert: d, children: f, className: p, criteriaMode: m, context: h, defaultValues: g, delayError: _, footer: v, heading: y, mode: b = "onBlur", panelStyle: x = { bg: "alt" }, progressive: S, resetOptions: C, resolver: w, reValidateMode: T = "onChange", shouldUseNativeValidation: E, shouldUnregister: D, sticky: O = !1, values: k, ...A }, j) => {
+var d = o(({ actions: o, alert: d, children: f, className: p, criteriaMode: m, context: h, defaultValues: g, delayError: _, footer: v, heading: y, mode: b = "onBlur", panelStyle: x = { p: "spacing.0" }, progressive: S, resetOptions: C, resolver: w, reValidateMode: T = "onChange", shouldUseNativeValidation: E, shouldUnregister: D, sticky: O = !1, values: k, ...A }, j) => {
 	let M = u({
 		criteriaMode: m,
 		context: h,
@@ -40,6 +40,7 @@ var d = o(({ actions: o, alert: d, children: f, className: p, criteriaMode: m, c
 				horizontalAlign: "between",
 				verticalAlign: "bottom",
 				className: N.header,
+				noWrap: !0,
 				children: [P, /* @__PURE__ */ c("div", {
 					className: N.actions,
 					children: o
@@ -48,6 +49,7 @@ var d = o(({ actions: o, alert: d, children: f, className: p, criteriaMode: m, c
 			/* @__PURE__ */ l(n, {
 				...x,
 				className: e(N.children, x.className),
+				noBorder: !0,
 				children: [d, f]
 			}),
 			v && /* @__PURE__ */ c("div", {

package/dist/patterns/Form/components/ShortForm.js

@@ -22,6 +22,7 @@ var l = i(({ actions: i, alert: l, children: u, className: d, criteriaMode: f, c
 		values: w
 	}), O = n({ pattern: "short" }), k = a(() => typeof g == "string" ? /* @__PURE__ */ o(t, {
 		element: "h2",
+		mb: "spacing.4",
 		children: g
 	}) : g, [g]);
 	return /* @__PURE__ */ s(r, {

package/dist/patterns/Loading/Loading.styles.d.ts

@@ -37,6 +37,9 @@ export declare const loading: import('../../styled-system/types').SlotRecipeRunt
                 opacity: number;
                 transition: "[opacity 0.3s ease-in-out]";
                 zIndex: "100";
+                display: "inline-flex";
+                alignItems: "center";
+                gap: "spacing.2";
             };
             overlay: {
                 position: "absolute";

package/dist/patterns/Loading/Loading.styles.js

@@ -37,7 +37,10 @@ var t = e({
 					borderRadius: "radius.system.tag",
 					opacity: 0,
 					transition: "[opacity 0.3s ease-in-out]",
-					zIndex: "100"
+					zIndex: "100",
+					display: "inline-flex",
+					alignItems: "center",
+					gap: "spacing.2"
 				},
 				overlay: {
 					position: "absolute",

package/dist/patterns/Loading/components/PageLoading.js

@@ -2,8 +2,8 @@ import { t as e } from "../../../cx-CZ8IJJTy.js";
 import { t } from "../../../factory-sKbby7-S.js";
 import { propagateTestid as n } from "../../../helpers/utility/propagateTestid.js";
 import { IressCard as r } from "../../../components/Card/Card.js";
-import { IressInline as i } from "../../../components/Inline/Inline.js";
-import { IressDivider as a } from "../../../components/Divider/Divider.js";
+import { IressDivider as i } from "../../../components/Divider/Divider.js";
+import { IressInline as a } from "../../../components/Inline/Inline.js";
 import { IressCol as o } from "../../../components/Col/Col.js";
 import { IressContainer as s } from "../../../components/Container/Container.js";
 import { IressStack as c } from "../../../components/Stack/Stack.js";
@@ -75,7 +75,7 @@ var _ = () => /* @__PURE__ */ h(o, {
 				children: [/* @__PURE__ */ h(u, {
 					textStyle: "typography.heading.1",
 					width: "25%"
-				}), /* @__PURE__ */ g(i, {
+				}), /* @__PURE__ */ g(a, {
 					gap: "lg",
 					children: [/* @__PURE__ */ h(u, {
 						textStyle: "typography.heading.4",
@@ -86,7 +86,7 @@ var _ = () => /* @__PURE__ */ h(o, {
 					})]
 				})]
 			}),
-			/* @__PURE__ */ h(a, {}),
+			/* @__PURE__ */ h(i, {}),
 			/* @__PURE__ */ g(l, {
 				gutter: "lg",
 				children: [

package/dist/patterns/Shadow/Shadow.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../Shadow-OHZiBoEb.js";
+import { t as e } from "../../Shadow-D2KoVwxD.js";
 export { e as IressShadow };

package/dist/patterns/Shadow/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../Shadow-OHZiBoEb.js";
+import { t as e } from "../../Shadow-D2KoVwxD.js";
 export { e as IressShadow };

package/dist/patterns/SideNav/SideNav.d.ts

@@ -30,6 +30,12 @@ export interface SideNavSideMenuGroup {
     children: SideNavSubItem[];
     /** Whether this drawer is active/expanded. */
     active?: boolean;
+    /** URL for the group activator link. */
+    href?: string;
+    /** Custom element type for third-party routing libraries. */
+    element?: ElementType;
+    /** Optional click handler for the group activator. */
+    onClick?: MouseEventHandler;
 }
 /**
  * A panel content entry — either a flat item or a group of items.

package/dist/patterns/SideNav/SideNav.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

@@ -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,