@iress-oss/ids-components 6.0.0 → 6.1.0

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-BL3YAhE_.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-BL3YAhE_.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,