@iress-oss/ids-components 6.0.0 → 6.1.0

package/dist/components/Menu/Menu.styles.js

@@ -50,6 +50,13 @@ var t = e({
 			display: "flex",
 			flexDirection: "column"
 		} }
+	}, {
+		layout: "stack",
+		variant: ["rail", "side"],
+		css: { root: {
+			flexWrap: "nowrap",
+			scrollable: "y"
+		} }
 	}],
 	defaultVariants: { layout: "stack" }
 });

package/dist/components/Menu/MenuGroup/MenuGroup.d.ts

@@ -1,9 +1,9 @@
-import { ReactNode } from 'react';
+import { ElementType, MouseEventHandler, ReactNode } from 'react';
 import { TextElements } from '../../Text';
 import { IressMenuTextProps } from '../MenuText/MenuText';
 import { IressPopoverProps } from '../../Popover';
 import { MenuVariants } from '../Menu';
-type MenuGroupRestProps<TLabel extends TextElements = 'h2', TVariant extends MenuVariants = undefined> = TVariant extends 'subdraw' ? Omit<IressPopoverProps, 'children' | 'activator'> : Omit<IressMenuTextProps<TLabel>, 'children'>;
+type MenuGroupRestProps<TLabel extends TextElements = 'h2', TVariant extends MenuVariants = undefined> = TVariant extends 'subdraw' ? Omit<IressPopoverProps, 'children' | 'activator'> : Omit<IressMenuTextProps<TLabel>, 'children' | 'element'>;
 export type IressMenuGroupProps<TLabel extends TextElements = 'h2', TVariant extends MenuVariants = undefined> = MenuGroupRestProps<TLabel, TVariant> & {
     /**
      * Whether this header is active/expanded, revealing child drawer items.
@@ -32,11 +32,26 @@ export type IressMenuGroupProps<TLabel extends TextElements = 'h2', TVariant ext
      * Adds a divider after the group.
      */
     divider?: boolean;
+    /**
+     * Custom element type for the activator (e.g. for third-party routing).
+     * Only used when parent Menu has variant="side".
+     */
+    element?: ElementType;
+    /**
+     * URL for the group activator link.
+     * Only used when parent Menu has variant="side".
+     */
+    href?: string;
     /**
      * Callback fired when the active/expanded state changes.
      * Only used when parent Menu has variant="side".
      */
     onActiveChange?: (active?: boolean) => void;
+    /**
+     * Click handler for the group activator.
+     * Only used when parent Menu has variant="side".
+     */
+    onClick?: MouseEventHandler;
     /**
      * Variant of the menu group.
      * - `undefined` (default): Renders inline with label as heading and children below.
@@ -53,7 +68,7 @@ export type IressMenuGroupProps<TLabel extends TextElements = 'h2', TVariant ext
  * a fly-over submenu containing the group's children.
  */
 export declare const IressMenuGroup: {
-    <E extends TextElements = "div", TVariant extends MenuVariants = undefined>({ append, active: activeProp, children, className, defaultActive, divider, label, onActiveChange, variant: variantProp, "data-testid": dataTestId, ...restProps }: IressMenuGroupProps<E, TVariant>): import("react/jsx-runtime").JSX.Element;
+    <E extends TextElements = "div", TVariant extends MenuVariants = undefined>({ append, active: activeProp, children, className, defaultActive, divider, element, href, label, onActiveChange, onClick, variant: variantProp, "data-testid": dataTestId, ...restProps }: IressMenuGroupProps<E, TVariant>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/Menu/MenuGroup/MenuGroup.js

@@ -9,40 +9,44 @@ import { IressPopover as s } from "../../Popover/Popover.js";
 import { IressMenu as c, MenuContext as l } from "../Menu.js";
 import { menuGroup as u } from "./MenuGroup.styles.js";
 import { IressMenuDivider as d } from "../MenuDivider/MenuDivider.js";
-import { IressMenuHeading as f } from "../MenuText/MenuText.js";
-import { IressMenuItem as p } from "../MenuItem/MenuItem.js";
+import { IressMenuItem as f } from "../MenuItem/MenuItem.js";
+import { IressMenuHeading as p } from "../MenuHeading/MenuHeading.js";
 import { useContext as m } from "react";
 import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/components/Menu/MenuGroup/MenuGroup.tsx
-var v = ({ append: v, active: y, children: b, className: x, defaultActive: S, divider: C, label: w, onActiveChange: T, variant: E, "data-testid": D, ...O }) => {
-	let k = a(O), A = m(l), j = o(), M = E ?? A?.variant;
-	if (M && (j?.type === "listbox" || A?.role === "listbox")) throw Error("[IressMenuGroup] IressMenu with variants cannot be used within a Menu with role=\"listbox\" or Popover with type=\"listbox\", as it is not intended for that use case. Please unset the variant for grouping in listbox contexts.");
-	let { value: N, setValue: P } = i({
+var v = ({ append: v, active: y, children: b, className: x, defaultActive: S, divider: C, element: w, href: T, label: E, onActiveChange: D, onClick: O, variant: k, "data-testid": A, ...j }) => {
+	let M = a(j), N = m(l), P = o(), F = k ?? N?.variant;
+	if (F && (P?.type === "listbox" || N?.role === "listbox")) throw Error("[IressMenuGroup] IressMenu with variants cannot be used within a Menu with role=\"listbox\" or Popover with type=\"listbox\", as it is not intended for that use case. Please unset the variant for grouping in listbox contexts.");
+	let { value: I, setValue: L } = i({
 		component: "IressMenuGroup",
 		defaultValue: S,
-		onChange: T,
+		onChange: D,
 		value: y
 	});
-	if (M == "side") {
+	if (F == "side") {
 		let n = u({
-			numbered: A?.numbered,
-			open: N
+			numbered: N?.numbered,
+			open: I
 		});
 		return /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("div", {
 			className: e(n.root, x),
-			...O,
-			"data-testid": D,
-			children: [/* @__PURE__ */ g(p, {
+			...j,
+			"data-testid": A,
+			children: [/* @__PURE__ */ g(f, {
 				className: e(n.activator, t.MenuGroupActivator),
-				"data-testid": r(D, "activator"),
-				onClick: () => P(!N),
-				"aria-expanded": N,
-				id: k,
-				"aria-controls": `${k}-content`,
-				children: w
+				"data-testid": r(A, "activator"),
+				href: T,
+				element: w,
+				onClick: (e) => {
+					L(!I), O?.(e);
+				},
+				"aria-expanded": I,
+				id: M,
+				"aria-controls": `${M}-content`,
+				children: E
 			}), /* @__PURE__ */ g("div", {
 				className: e(n.wrapper, t.MenuGroup),
-				id: `${k}-content`,
+				id: `${M}-content`,
 				children: /* @__PURE__ */ g("div", {
 					className: n.content,
 					children: b
@@ -50,34 +54,34 @@ var v = ({ append: v, active: y, children: b, className: x, defaultActive: S, di
 			})]
 		}), C && /* @__PURE__ */ g(d, {})] });
 	}
-	return M == "subdraw" ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(s, {
+	return F == "subdraw" ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(s, {
 		align: "right-start",
 		nested: !0,
 		offset: {
 			mainAxis: 0,
 			crossAxis: 0
 		},
-		type: A?.role === "list" ? void 0 : A?.role,
-		virtualFocus: j?.isVirtualFocus,
+		type: N?.role === "list" ? void 0 : N?.role,
+		virtualFocus: P?.isVirtualFocus,
 		contentStyle: { p: "none" },
-		...O,
+		...j,
 		className: e(t.MenuGroup, x),
-		"data-testid": r(D, "subdraw"),
-		activator: /* @__PURE__ */ g(p, {
+		"data-testid": r(A, "subdraw"),
+		activator: /* @__PURE__ */ g(f, {
 			append: v ?? /* @__PURE__ */ g(n, { name: "keyboard_arrow_right" }),
 			className: t.MenuGroupActivator,
-			"data-testid": r(D, "subdraw__trigger"),
-			children: w
+			"data-testid": r(A, "subdraw__trigger"),
+			children: E
 		}),
 		children: /* @__PURE__ */ g(c, { children: b })
 	}), C && /* @__PURE__ */ g(d, {})] }) : /* @__PURE__ */ _(h, { children: [
-		/* @__PURE__ */ g(f, {
-			"data-testid": D,
-			...O,
+		/* @__PURE__ */ g(p, {
+			"data-testid": A,
+			...j,
 			className: e(t.MenuGroup, x),
-			srOnly: M == "rail" ? !0 : void 0,
-			width: M == "rail" ? "auto" : void 0,
-			children: w
+			srOnly: F == "rail" ? !0 : void 0,
+			width: F == "rail" ? "auto" : void 0,
+			children: E
 		}),
 		b,
 		C && /* @__PURE__ */ g(d, {})

package/dist/components/Menu/MenuHeading/MenuHeading.d.ts

@@ -0,0 +1,20 @@
+import { TextElements } from '../../Text';
+import { IressMenuTextProps } from '../MenuText/MenuText';
+export type { IressMenuTextProps as IressMenuHeadingProps } from '../MenuText/MenuText';
+/**
+ * A heading element within a menu, used to label groups of menu items.
+ *
+ * @example
+ * ```tsx
+ * import { IressMenu, IressMenuHeading, IressMenuItem } from '@iress-oss/ids-components';
+ *
+ * <IressMenu>
+ *   <IressMenuHeading>Actions</IressMenuHeading>
+ *   <IressMenuItem>Edit</IressMenuItem>
+ * </IressMenu>
+ * ```
+ */
+export declare const IressMenuHeading: {
+    <E extends TextElements = "h2">({ className, element, textStyle, ...restProps }: IressMenuTextProps<E>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Menu/MenuHeading/MenuHeading.js

@@ -0,0 +1,14 @@
+import { t as e } from "../../../cx-CZ8IJJTy.js";
+import { GlobalCSSClass as t } from "../../../enums.js";
+import { IressMenuText as n } from "../MenuText/MenuText.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Menu/MenuHeading/MenuHeading.tsx
+var i = ({ className: i, element: a = "h2", textStyle: o = "typography.body.md.medium", ...s }) => /* @__PURE__ */ r(n, {
+	element: a,
+	textStyle: o,
+	...s,
+	className: e(i, t.MenuHeading)
+});
+i.displayName = "IressMenuHeading";
+//#endregion
+export { i as IressMenuHeading };

package/dist/components/Menu/MenuItem/MenuItem.styles.js

@@ -194,6 +194,15 @@ var t = e({
 				"option"
 			],
 			css: { root: { focusable: "colour.primary.onFill" } }
+		},
+		{
+			variant: "side",
+			selected: !0,
+			css: { root: {
+				bg: "colour.neutral.20",
+				color: "colour.primary.text",
+				_after: { width: "menu.indicator" }
+			} }
 		}
 	],
 	defaultVariants: { layout: "stack" }

package/dist/components/Menu/MenuText/MenuText.d.ts

@@ -16,10 +16,6 @@ export type IressMenuTextProps<E extends TextElements = 'div'> = IressTextProps<
     prepend?: ReactNode;
 };
 export declare const IressMenuText: {
-    <E extends TextElements = "div">({ append, children, className, "data-testid": dataTestid, divider, element, prepend, role, textStyle, ...restProps }: IressMenuTextProps<E>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export declare const IressMenuHeading: {
-    <E extends TextElements = "h2">({ className, element, textStyle, ...restProps }: IressMenuTextProps<E>): import("react/jsx-runtime").JSX.Element;
+    <E extends TextElements = "div">({ append, children, className, "data-testid": dataTestid, divider, element, prepend, role, textStyle, width, ...restProps }: IressMenuTextProps<E>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/Menu/MenuText/MenuText.js

@@ -23,39 +23,33 @@ var p = (e, t) => (e && [
 	"typography.heading.3",
 	"typography.heading.4",
 	"typography.heading.5"
-].includes(t)), m = ({ append: m, children: h, className: g, "data-testid": _, divider: v, element: y, prepend: b, role: x, textStyle: S, ...C }) => {
-	let w = l(a), T = c() ?? x, E = o.raw({
-		layout: w?.layout,
+].includes(t)), m = ({ append: m, children: h, className: g, "data-testid": _, divider: v, element: y, prepend: b, role: x, textStyle: S, width: C = "12/12", ...w }) => {
+	let T = l(a), E = c() ?? x, D = o.raw({
+		layout: T?.layout,
 		isHeading: p(y, S),
 		hasAppendOrPrepend: !!(m ?? b)
-	}), [D, O] = n(C);
+	}), [O, k] = n(w);
 	return /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ f("div", {
-		className: t(g, e(E.root, D), r.MenuText),
+		className: t(g, e(D.root, O, { width: C }), r.MenuText),
 		"data-testid": _,
-		role: T,
+		role: E,
 		children: [
 			b && /* @__PURE__ */ d("div", { children: b }),
 			/* @__PURE__ */ d(i, {
-				...O,
-				className: e(E.contents),
+				...k,
+				className: e(D.contents),
 				element: y,
 				textStyle: S,
+				width: C,
 				children: h
 			}),
 			m && /* @__PURE__ */ d("div", {
-				className: e(E.append),
+				className: e(D.append),
 				children: m
 			})
 		]
 	}), v && /* @__PURE__ */ d(s, { mt: "spacing.1" })] });
 };
 m.displayName = "IressMenuText";
-var h = ({ className: e, element: n = "h2", textStyle: i = "typography.body.md.medium", ...a }) => /* @__PURE__ */ d(m, {
-	element: n,
-	textStyle: i,
-	...a,
-	className: t(e, r.MenuHeading)
-});
-h.displayName = "IressMenuHeading";
 //#endregion
-export { h as IressMenuHeading, m as IressMenuText };
+export { m as IressMenuText };

package/dist/components/Menu/index.d.ts

@@ -7,3 +7,4 @@ export * from './MenuDivider/MenuDivider';
 export * from './MenuGroup/MenuGroup';
 export * from './MenuItem/MenuItem';
 export * from './MenuText/MenuText';
+export * from './MenuHeading/MenuHeading';

package/dist/components/Menu/index.js

@@ -3,7 +3,8 @@ import { IressMenu as t } from "./Menu.js";
 import { menuItem as n } from "./MenuItem/MenuItem.styles.js";
 import { menuGroup as r } from "./MenuGroup/MenuGroup.styles.js";
 import { IressMenuDivider as i } from "./MenuDivider/MenuDivider.js";
-import { IressMenuHeading as a, IressMenuText as o } from "./MenuText/MenuText.js";
-import { IressMenuItem as s } from "./MenuItem/MenuItem.js";
+import { IressMenuItem as a } from "./MenuItem/MenuItem.js";
+import { IressMenuText as o } from "./MenuText/MenuText.js";
+import { IressMenuHeading as s } from "./MenuHeading/MenuHeading.js";
 import { IressMenuGroup as c } from "./MenuGroup/MenuGroup.js";
-export { t as IressMenu, i as IressMenuDivider, c as IressMenuGroup, a as IressMenuHeading, s as IressMenuItem, o as IressMenuText, e as menu, r as menuGroup, n as menuItem };
+export { t as IressMenu, i as IressMenuDivider, c as IressMenuGroup, s as IressMenuHeading, a as IressMenuItem, o as IressMenuText, e as menu, r as menuGroup, n as menuItem };

package/dist/components/Select/Select.js

@@ -1,2 +1,2 @@
-import { n as e } from "../../Autocomplete-CuUjmIAw.js";
+import { n as e } from "../../Autocomplete-BRGD9dSh.js";
 export { e as IressSelect };

package/dist/components/Select/SelectHeading/SelectHeading.js

@@ -3,8 +3,8 @@ import { GlobalCSSClass as t } from "../../../enums.js";
 import { t as n } from "../../../Button-bZPKq0ue.js";
 import { usePopoverItem as r } from "../../Popover/hooks/usePopoverItem.js";
 import { select as i } from "../Select.styles.js";
-import { IressInline as a } from "../../Inline/Inline.js";
-import { IressMenuHeading as o } from "../../Menu/MenuText/MenuText.js";
+import { IressMenuHeading as a } from "../../Menu/MenuHeading/MenuHeading.js";
+import { IressInline as o } from "../../Inline/Inline.js";
 import { forwardRef as s, useImperativeHandle as c, useRef as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/Select/SelectHeading/SelectHeading.tsx
@@ -15,17 +15,17 @@ var f = i(), p = s((i, a) => {
 		...d,
 		className: e(f.dropdownClear, t.SelectClearButton),
 		active: s,
-		mode: "tertiary",
+		mode: "quaternary",
 		ref: (e) => {
 			o.current = e, d?.ref?.(o.current);
 		}
 	});
-}), m = ({ children: n, className: r, clearAll: i, onClearAll: s, textStyle: c = "typography.heading.4", ...l }) => /* @__PURE__ */ u(o, {
+}), m = ({ children: n, className: r, clearAll: i, onClearAll: s, textStyle: c = "typography.body.md.medium", ...l }) => /* @__PURE__ */ u(a, {
 	...l,
 	className: e(f.dropdownSelectedHeading, r, t.SelectHeading),
 	role: void 0,
 	textStyle: c,
-	children: /* @__PURE__ */ d(a, {
+	children: /* @__PURE__ */ d(o, {
 		horizontalAlign: "between",
 		verticalAlign: "middle",
 		children: [n, i && /* @__PURE__ */ u(p, {

package/dist/components/Select/SelectTags/SelectTags.js

@@ -12,9 +12,9 @@ import { getFormControlValueAsStringIfDefined as u } from "../../../helpers/form
 import { composeLabelValueDescriptor as d } from "../../../helpers/label-value/composeLabelValueDescriptor.js";
 import { selectTags as f } from "./SelectTags.styles.js";
 import { IressTag as p } from "../../Tag/Tag.js";
-import { IressInline as m } from "../../Inline/Inline.js";
-import { IressMenu as h } from "../../Menu/Menu.js";
-import { IressMenuItem as g } from "../../Menu/MenuItem/MenuItem.js";
+import { IressMenu as m } from "../../Menu/Menu.js";
+import { IressMenuItem as h } from "../../Menu/MenuItem/MenuItem.js";
+import { IressInline as g } from "../../Inline/Inline.js";
 import { useCallback as _, useMemo as v, useState as y } from "react";
 import { jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region src/components/Select/SelectTags/SelectTags.tsx
@@ -26,17 +26,17 @@ var S = (e, t) => {
 		let e = r.indexOf(t.currentTarget), i = r.filter((e) => e !== t.currentTarget), a = Math.max(e - 1, 0);
 		!i[a] && i[0] ? i[0].focus() : i[0] ? i[a].focus() : n?.focus();
 	}
-}, C = ({ "data-testid": e, limit: t = 5, onDelete: i, onDeleteAll: o, onToggleActions: s, selectedArray: m, selectedOptionsText: v }) => {
+}, C = ({ "data-testid": e, limit: t = 5, onDelete: i, onDeleteAll: o, onToggleActions: s, selectedArray: g, selectedOptionsText: v }) => {
 	let [C, w] = y(!1), T = c(), E = f(), D = _((e, t) => {
-		i?.(m.find((t) => t.label === e), t), t.stopPropagation(), S(T, t);
+		i?.(g.find((t) => t.label === e), t), t.stopPropagation(), S(T, t);
 	}, [
 		i,
 		T,
-		m
+		g
 	]), O = _((e) => {
 		o?.(e), T?.getFocusableActivator()?.focus();
 	}, [o, T]);
-	return C && m.length || !t || m.length <= t ? m.map((t) => /* @__PURE__ */ b(p, {
+	return C && g.length || !t || g.length <= t ? g.map((t) => /* @__PURE__ */ b(p, {
 		className: E.tag,
 		"data-testid": a(e, "tag"),
 		deleteButtonText: `Delete ${t.label}`,
@@ -63,34 +63,34 @@ var S = (e, t) => {
 			align: "bottom-end",
 			contentStyle: { p: "none" },
 			virtualFocus: !0,
-			children: /* @__PURE__ */ x(h, { children: [/* @__PURE__ */ b(g, {
+			children: /* @__PURE__ */ x(m, { children: [/* @__PURE__ */ b(h, {
 				onClick: () => w(!0),
 				children: "Expand all"
-			}), /* @__PURE__ */ b(g, {
+			}), /* @__PURE__ */ b(h, {
 				onClick: O,
 				children: "Delete all"
 			})] })
 		}),
 		compact: !0,
-		children: d(m, v)
+		children: d(g, v)
 	});
-}, w = ({ append: n = "", className: r, "data-testid": a, id: s, limit: c = 5, onDelete: l, onDeleteAll: u, onToggleActions: d, placeholder: p, prepend: h, selected: g, selectedOptionsText: _ = "{{numOptions}} selected", ...y }) => {
-	let S = v(() => o(g), [g]), w = !S.length && p, T = !!S.length, E = f({ showDefaultChevron: n == null || n === "" || !n });
+}, w = ({ append: n = "", className: r, "data-testid": a, id: s, limit: c = 5, onDelete: l, onDeleteAll: u, onToggleActions: d, placeholder: p, prepend: m, selected: h, selectedOptionsText: _ = "{{numOptions}} selected", ...y }) => {
+	let S = v(() => o(h), [h]), w = !S.length && p, T = !!S.length, E = f({ showDefaultChevron: n == null || n === "" || !n });
 	return /* @__PURE__ */ x(i, {
 		...y,
 		id: s,
 		tabIndex: 0,
 		className: e(r, E.root, t.FormElementInner, t.SelectTags),
 		children: [
-			h && /* @__PURE__ */ b("span", {
+			m && /* @__PURE__ */ b("span", {
 				className: E.prepend,
-				children: h
+				children: m
 			}),
 			w && /* @__PURE__ */ b(i, {
 				className: E.placeholder,
 				children: p
 			}),
-			T && /* @__PURE__ */ b(m, {
+			T && /* @__PURE__ */ b(g, {
 				gap: "sm",
 				className: E.tagsList,
 				children: /* @__PURE__ */ b(C, {