@iress-oss/ids-components 6.0.1 → 6.1.0

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

package/dist/components/Select/components/SelectOptions.js

@@ -1,149 +1,162 @@
-import { toArray as e } from "../../../helpers/formatting/toArray.js";
-import { IressAlert as t } from "../../Alert/Alert.js";
-import { getValueAsEvent as n } from "../../../helpers/form/getValueAsEvent.js";
-import { IressMenuDivider as r } from "../../Menu/MenuDivider/MenuDivider.js";
-import { toPrimitiveValue as i } from "../helpers/toPrimitiveValue.js";
-import { IressSelectSearch as a } from "../SelectSearch/SelectSearch.js";
-import { IressSelectHeading as o } from "../SelectHeading/SelectHeading.js";
-import { IressSelectMenu as s } from "../SelectMenu/SelectMenu.js";
-import { IressSelectSearchInput as c } from "../SelectSearchInput/SelectSearchInput.js";
-import { useCallback as l, useEffect as u, useId as d, useRef as f } from "react";
-import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { IressText as e } from "../../Text/Text.js";
+import { IressSpinner as t } from "../../Spinner/Spinner.js";
+import { toArray as n } from "../../../helpers/formatting/toArray.js";
+import { IressAlert as r } from "../../Alert/Alert.js";
+import { getValueAsEvent as i } from "../../../helpers/form/getValueAsEvent.js";
+import { IressMenuDivider as a } from "../../Menu/MenuDivider/MenuDivider.js";
+import { IressInline as o } from "../../Inline/Inline.js";
+import { toPrimitiveValue as s } from "../helpers/toPrimitiveValue.js";
+import { IressSelectSearch as c } from "../SelectSearch/SelectSearch.js";
+import { IressSelectHeading as l } from "../SelectHeading/SelectHeading.js";
+import { IressSelectMenu as u } from "../SelectMenu/SelectMenu.js";
+import { IressSelectSearchInput as d } from "../SelectSearchInput/SelectSearchInput.js";
+import { useCallback as f, useEffect as p, useId as m, useRef as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/components/Select/components/SelectOptions.tsx
-var g = ({ minSearchLength: e, multiSelect: t, onChange: n, query: r, results: i, shouldShowInstructions: a, shouldShowNoResults: o, value: c }) => /* @__PURE__ */ m(s, {
-	heading: t ? "Search results" : void 0,
-	items: i,
-	multiSelect: t,
+var y = ({ debouncedQuery: e, minSearchLength: t, multiSelect: n, onChange: r, query: i, results: a, shouldShowInstructions: o, shouldShowNoResults: s, value: c }) => /* @__PURE__ */ _(u, {
+	heading: n && a.length && e ? `Search results (${a.length})` : void 0,
+	items: a,
+	multiSelect: n,
 	noResults: (() => {
-		if (r) {
-			if (a) return `Type at least ${e} character${e === 1 ? "" : "s"} to search`;
-			if (o) return "No results found";
+		if (i) {
+			if (o) return `Type at least ${t} character${t === 1 ? "" : "s"} to search`;
+			if (s) return "No results found";
 		}
 	})(),
-	onChange: n,
+	onChange: r,
 	selected: c,
-	hideSelectedItems: t
+	hideSelectedItems: n
 });
-g.displayName = "SelectAsyncResults";
-var _ = ({ error: e }) => e ? /* @__PURE__ */ m(t, {
+y.displayName = "SelectAsyncResults";
+var b = ({ error: e }) => e ? /* @__PURE__ */ _(r, {
 	status: "danger",
-	children: typeof e == "string" ? e : /* @__PURE__ */ h(p, { children: [
+	children: typeof e == "string" ? e : /* @__PURE__ */ v(g, { children: [
 		"An unknown error occurred.",
-		/* @__PURE__ */ m("br", {}),
+		/* @__PURE__ */ _("br", {}),
 		" Please contact support if the error persists."
 	] })
 }) : null;
-_.displayName = "SelectAsyncError";
-var v = ({ autoHighlight: t, error: n, loading: i, minSearchLength: l, multiSelect: p, onChange: v, onClear: y, query: b, results: x, setQuery: S, show: C, value: w, shouldShowInstructions: T, shouldShowNoResults: E }) => {
-	let D = e(w).map((e) => {
+b.displayName = "SelectAsyncError";
+var x = ({ autoHighlight: r, debouncedQuery: i, error: s, loading: f, minSearchLength: g, multiSelect: x, onChange: S, onClear: C, query: w, results: T, setQuery: E, show: D, value: O, shouldShowInstructions: k, shouldShowNoResults: A }) => {
+	let j = n(O).map((e) => {
 		let { formattedLabel: t, ...n } = e;
 		return n;
-	}), O = !n && (!!x?.length || b && !i), k = !!D.length && p, A = O && k, j = f(null), M = d();
-	u(() => {
-		C || S?.("");
-	}, [C, S]);
-	let N = k ? D.length + 1 : 0;
-	return /* @__PURE__ */ h(a, {
-		activator: /* @__PURE__ */ m(c, {
+	}), M = !s && (!!T?.length || w && !f), N = !!j.length && x, P = M && N, F = h(null), I = m();
+	p(() => {
+		D || E?.("");
+	}, [D, E]);
+	let L = N ? j.length + 1 : 0;
+	return /* @__PURE__ */ v(c, {
+		activator: /* @__PURE__ */ _(d, {
 			"aria-label": "Search",
-			loading: i,
-			onChange: (e) => S?.(e.target.value),
-			ref: j,
+			onChange: (e) => E?.(e.target.value),
+			ref: F,
 			placeholder: "Search and select",
-			value: b
+			value: w
 		}),
-		autoHighlight: t,
-		focusStartIndex: t ? b && O ? N : +!!k : void 0,
+		autoHighlight: r,
+		focusStartIndex: r ? w && M ? L : +!!N : void 0,
 		children: [
-			k && /* @__PURE__ */ m(s, {
-				"aria-labelledby": M,
-				heading: /* @__PURE__ */ m(o, {
+			N && /* @__PURE__ */ _(u, {
+				"aria-labelledby": I,
+				heading: /* @__PURE__ */ _(l, {
 					clearAll: !0,
 					onClearAll: (e) => {
-						y?.(e), j.current?.focus();
+						C?.(e), F.current?.focus();
 					},
-					children: /* @__PURE__ */ h("h2", {
-						id: M,
+					children: /* @__PURE__ */ v("span", {
+						id: I,
 						children: [
 							"Selected (",
-							D.length,
+							j.length,
 							")"
 						]
 					})
 				}),
-				items: D,
-				multiSelect: p,
-				onChange: v,
-				selected: w
+				items: j,
+				multiSelect: x,
+				onChange: S,
+				selected: O
 			}),
-			A && /* @__PURE__ */ m(r, {}),
-			O && /* @__PURE__ */ m(g, {
-				minSearchLength: l,
-				multiSelect: p,
-				onChange: v,
-				query: b,
-				results: x,
-				value: w,
-				shouldShowInstructions: T,
-				shouldShowNoResults: E
+			P && /* @__PURE__ */ _(a, {}),
+			f && !T.length && /* @__PURE__ */ v(o, {
+				gap: "sm",
+				verticalAlign: "middle",
+				p: "spacing.3",
+				children: [/* @__PURE__ */ _(t, { color: "colour.neutral.70" }), /* @__PURE__ */ _(e, {
+					color: "colour.neutral.70",
+					children: "Loading results..."
+				})]
 			}),
-			/* @__PURE__ */ m(_, { error: n })
+			M && /* @__PURE__ */ _(y, {
+				debouncedQuery: i,
+				minSearchLength: g,
+				multiSelect: x,
+				onChange: S,
+				query: w,
+				results: T,
+				value: O,
+				shouldShowInstructions: k,
+				shouldShowNoResults: A
+			}),
+			/* @__PURE__ */ _(b, { error: s })
 		]
 	});
 };
-v.displayName = "SelectAsyncOptions";
-var y = ({ autoHighlight: e, debouncedQuery: t, error: r, initialOptions: a, loading: o, minSearchLength: c, multiSelect: u, onChange: d, options: f, query: p, renderOptions: h, results: g, setQuery: _, setShow: y, setValue: b, show: x, shouldShowInstructions: S, shouldShowNoResults: C, value: w }) => {
-	let T = typeof f == "function", E = a ?? (T ? [] : f), D = g.length ? g : E, O = l((e) => {
-		b(e);
-		let t = i(e);
-		d?.(n(t), t, e), u || y(!1);
+x.displayName = "SelectAsyncOptions";
+var S = ({ autoHighlight: e, debouncedQuery: t, error: n, initialOptions: r, loading: a, minSearchLength: o, multiSelect: c, onChange: l, options: d, query: p, renderOptions: m, results: h, setQuery: g, setShow: v, setValue: y, show: b, shouldShowInstructions: S, shouldShowNoResults: C, value: w }) => {
+	let T = typeof d == "function", E = r ?? (T ? [] : d), D = h.length ? h : E, O = f((e) => {
+		y(e);
+		let t = s(e);
+		l?.(i(t), t, e), c || v(!1);
 	}, [
+		v,
 		y,
-		b,
-		d,
-		u
-	]), k = l((e) => {
+		l,
+		c
+	]), k = f((e) => {
 		e.stopPropagation();
 		let t = [];
-		b(t);
-		let r = i(t);
-		d?.(n(r), r, t);
-	}, [b, d]);
-	return h ? h({
-		close: () => y(!1),
+		y(t);
+		let n = s(t);
+		l?.(i(n), n, t);
+	}, [y, l]);
+	return m ? m({
+		close: () => v(!1),
 		debouncedQuery: t,
-		error: r,
+		error: n,
 		handleClear: k,
 		handleMenuChange: O,
-		loading: o,
+		loading: a,
 		query: p,
 		results: D,
-		setValue: b,
-		setQuery: _,
-		show: x,
+		setValue: y,
+		setQuery: g,
+		show: b,
 		value: w
-	}) : T ? /* @__PURE__ */ m(v, {
+	}) : T ? /* @__PURE__ */ _(x, {
 		autoHighlight: e,
-		error: r,
-		loading: o,
-		minSearchLength: c,
-		multiSelect: u,
+		debouncedQuery: t,
+		error: n,
+		loading: a,
+		minSearchLength: o,
+		multiSelect: c,
 		onChange: O,
 		onClear: k,
 		query: p,
-		results: g,
-		setQuery: _,
-		show: x,
+		results: h,
+		setQuery: g,
+		show: b,
 		value: w,
 		shouldShowInstructions: S,
 		shouldShowNoResults: C
-	}) : /* @__PURE__ */ m(s, {
+	}) : /* @__PURE__ */ _(u, {
 		items: D,
-		multiSelect: u,
+		multiSelect: c,
 		onChange: O,
 		selected: w
 	});
 };
-y.displayName = "SelectOptions";
+S.displayName = "SelectOptions";
 //#endregion
-export { y as SelectOptions };
+export { S as SelectOptions };

package/dist/components/Select/index.js

@@ -6,7 +6,7 @@ import { IressSelectHeading as i } from "./SelectHeading/SelectHeading.js";
 import { IressSelectMenu as a } from "./SelectMenu/SelectMenu.js";
 import { IressSelectSearchInput as o } from "./SelectSearchInput/SelectSearchInput.js";
 import { nativeSelect as s } from "./components/NativeSelect.styles.js";
-import { n as c } from "../../Autocomplete-CuUjmIAw.js";
+import { n as c } from "../../Autocomplete-BRGD9dSh.js";
 import { IressSelectBody as l } from "./SelectBody/SelectBody.js";
 import { IressSelectCreate as u } from "./SelectCreate/SelectCreate.js";
 export { c as IressSelect, l as IressSelectBody, u as IressSelectCreate, i as IressSelectHeading, t as IressSelectLabel, a as IressSelectMenu, r as IressSelectSearch, o as IressSelectSearchInput, n as IressSelectTags, s as nativeSelect, e as select };