@iress-oss/ids-components 6.2.1 → 6.3.0

package/.ai/patterns/form.md

@@ -530,6 +530,38 @@ Some use cases:
 
 [View "ValidationSummary" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-form--validation-summary)
 
+### Controlling screen reader announcements
+
+By default, `IressFormValidationSummary` uses `role="alert"` (an assertive live region), which causes screen readers to interrupt the user and read out the entire error list immediately. When using `mode="onBlur"`, a new error is added every time the user leaves a field — this can be disruptive.
+
+You have two options for a less intrusive experience:
+
+**Option 1 — Polite announcements via `aria-live`**
+
+Pass `aria-live="polite"` and `role="status"` to `IressFormValidationSummary` to switch to a polite live region. Screen readers will wait for a pause in user activity before announcing changes.
+
+```tsx
+<IressForm mode="onBlur">
+  <IressFormValidationSummary aria-live="polite" role="status" srOnly />
+  {/* fields */}
+</IressForm>
+```
+
+**Option 2 — Only announce on submit via `updateErrorSummaryOnSubmit`**
+
+Pass `updateErrorSummaryOnSubmit` to `IressForm` (or `IressHookForm`) to prevent the summary from updating while the user is still filling in the form. The summary will only be populated — and announced — when the form is submitted.
+
+```tsx
+<IressForm mode="onBlur" updateErrorSummaryOnSubmit>
+  {/* fields */}
+</IressForm>
+```
+
+| Approach | When to use |
+|---|---|
+| `aria-live="polite"` on `IressFormValidationSummary` | Real-time feedback is still desirable but should not interrupt the user |
+| `updateErrorSummaryOnSubmit` on `IressForm` | Errors should only be announced once the user tries to submit |
+
 ## Migration to version 5 and beyond
 
 The previous form components contained a lot of logic to translate the HTML5 validation API to a format that matched the design system’s guidelines. This allowed users to use the default props of input such as `pattern` and `required`, and be assured that the `IressField` would display errors accordingly.

package/dist/Autocomplete-ZqkibVwt.js

@@ -0,0 +1,327 @@
+import { t as e } from "./cx-QcEwjve6.js";
+import { GlobalCSSClass as t } from "./enums.js";
+import { idsLogger as n } from "./helpers/utility/idsLogger.js";
+import { IressIcon as r } from "./components/Icon/Icon.js";
+import { IressText as i } from "./components/Text/Text.js";
+import { propagateTestid as a } from "./helpers/utility/propagateTestid.js";
+import { IressSpinner as o } from "./components/Spinner/Spinner.js";
+import { toArray as s } from "./helpers/formatting/toArray.js";
+import { useControlledState as ee } from "./hooks/useControlledState.js";
+import { useResponsiveProps as te } from "./hooks/useResponsiveProps.js";
+import { IressPopover as ne } from "./components/Popover/Popover.js";
+import { IressInputPopover as re } from "./components/Popover/InputPopover/InputPopover.js";
+import { IressAlert as ie } from "./components/Alert/Alert.js";
+import { autoComplete as c } from "./components/Autocomplete/Autocomplete.styles.js";
+import { getFormControlValueAsStringIfDefined as ae } from "./helpers/form/getFormControlValueAsStringIfDefined.js";
+import { useNoDefaultValueInForms as oe } from "./patterns/Form/hooks/useNoDefaultValueInForms.js";
+import { IressReadonly as se } from "./components/Readonly/Readonly.js";
+import { IressInput as l } from "./components/Input/Input.js";
+import { getValueAsEvent as ce } from "./helpers/form/getValueAsEvent.js";
+import { t as le } from "./useAutocompleteSearch-BYzUn7Ag.js";
+import { AutocompleteInstructions as u } from "./components/Autocomplete/components/AutocompleteInstructions.js";
+import { select as ue } from "./components/Select/Select.styles.js";
+import { IressInline as d } from "./components/Inline/Inline.js";
+import { SelectActivator as de } from "./components/Select/components/SelectActivator.js";
+import { IressSelectMenu as f } from "./components/Select/SelectMenu/SelectMenu.js";
+import { SelectOptions as p } from "./components/Select/components/SelectOptions.js";
+import { SelectHiddenInput as fe } from "./components/Select/components/SelectHiddenInput.js";
+import { NativeSelect as pe } from "./components/Select/components/NativeSelect.js";
+import { useSelectState as me } from "./components/Select/hooks/useSelectState.js";
+import { forwardRef as m, useCallback as he, useEffect as h, useImperativeHandle as ge, useMemo as g, useRef as _, useState as v } from "react";
+import { Fragment as _e, jsx as y, jsxs as b } from "react/jsx-runtime";
+//#region src/components/Select/Select.tsx
+var x = (e) => typeof e == "object" && !!e && "label" in e, S = (e, t) => {
+	for (let n of t) if (n.children) {
+		let t = S(e, n.children);
+		if (t) return t;
+	} else if (n.value !== void 0 && n.value === e) return n;
+}, C = (e, t) => {
+	if (x(e)) return e;
+	if (typeof t != "function") return S(e, t) ?? (typeof e == "number" ? S(String(e), t) : void 0);
+}, w = (e, t) => {
+	if (e !== void 0) {
+		if (Array.isArray(e)) {
+			let r = e, i = r.map((e) => C(e, t)).filter((e) => e !== void 0);
+			return i.length < r.length && typeof t != "function" && n(`IressSelect: ${r.length - i.length} value(s) could not be resolved to matching options and were dropped.`, "warn"), i;
+		}
+		return C(e, t);
+	}
+}, T = m(({ align: r = "bottom-start", autoHighlight: i = !0, className: a, defaultValue: o, disabled: s, errorText: ee, footer: re, header: ie, id: c, matchActivatorWidth: ae = !0, multiSelect: l, multiSelectLimit: ce, name: u, onChange: d, onBlur: f, options: m, native: S, placeholder: C, readOnly: T, renderHiddenInput: E, renderLabel: ve, renderOptions: ye, required: D, type: O, value: k, virtualFocus: A, width: j, ...M }, N) => {
+	oe({
+		component: "IressSelect",
+		defaultValue: o
+	});
+	let [P, F] = v(!1), I = P && !s, [L, be] = v(""), R = g(() => w(k, m), [k, m]), z = g(() => w(o, m), [o, m]);
+	h(() => {
+		k !== void 0 && !x(k) && R === void 0 && typeof m == "function" && n("IressSelect: A primitive value was passed but cannot be resolved because options are asynchronous. Pass a LabelValueMeta object instead when using async options, otherwise the component will behave as uncontrolled.", "warn");
+	}, [
+		k,
+		R,
+		m
+	]);
+	let { value: B, setValue: V, getValuesString: H, getLabelsString: xe } = me({
+		component: "IressSelect",
+		defaultValue: z,
+		multiple: l,
+		value: R
+	}), U = _(null), W = _(null), G = _(null), { value: K } = te(typeof S == "string" ? {
+		xs: !0,
+		[S]: !1
+	} : { xs: S }, { disabled: !S }), { append: Se, container: q, debounceThreshold: Ce, initialOptions: J, loadingDelay: Y, minSearchLength: we, onActivated: Te, onDeactivated: Ee, prepend: De, selectedOptionsText: Oe, ...X } = M, { debouncedQuery: ke, error: Ae, results: je, stopSearch: Me, loading: Z, shouldShowInstructions: Ne, shouldShowNoResults: Pe } = le({
+		debounceThreshold: Ce,
+		disabled: !P || !!K,
+		initialOptions: J,
+		loadingDelay: Y,
+		minSearchLength: we,
+		options: m,
+		query: L
+	});
+	ge(N, () => K ? {
+		focus: () => W.current?.focus(),
+		blur: () => W.current?.blur(),
+		input: W.current ?? null
+	} : U.current ? {
+		...U.current,
+		focus: () => U.current?.getActivator()?.focus(),
+		blur: () => U.current?.getActivator()?.blur(),
+		hiddenInput: G.current ?? void 0,
+		input: G.current ?? null
+	} : {
+		hiddenInput: G.current ?? void 0,
+		input: G.current ?? null,
+		focus: () => G.current?.focus(),
+		blur: () => G.current?.blur()
+	}, [K]), h(() => {
+		P ? Te?.() : Ee?.();
+	}, [
+		Te,
+		Ee,
+		P
+	]);
+	let Fe = he((e) => {
+		if (!f) return;
+		let t = e.currentTarget, n = e.relatedTarget;
+		!P && (!n || !t.contains(n)) && f(e), e.stopPropagation();
+	}, [f, P]);
+	if (T) return /* @__PURE__ */ y(se, {
+		value: H(),
+		ref: G,
+		variant: T,
+		name: u,
+		disabled: s,
+		required: D,
+		children: xe(", ")
+	});
+	if (K) {
+		if (m instanceof Function) throw Error("[IressSelect] The native select does not support asynchronous options. Please provide options as an array.");
+		if (l) throw Error("[IressSelect] The native select does not support multiple selection. Please remove the multiSelect prop or use the non-native select.");
+		return /* @__PURE__ */ y(pe, {
+			className: e(a, t.Select),
+			"data-testid": X["data-testid"],
+			disabled: s,
+			id: c,
+			name: u,
+			onBlur: f,
+			onChange: (e, t) => {
+				d?.(e, t?.value ?? null, t), V(t);
+			},
+			options: m,
+			placeholder: typeof S == "string" ? C ?? "" : C,
+			style: X.style,
+			value: B,
+			width: j,
+			ref: W
+		});
+	}
+	let Q = typeof m == "function", Ie = A ?? !Q, Le = O ?? (Q ? void 0 : "listbox"), $ = ue({ width: j }), Re = () => {
+		F(!0);
+	}, ze = () => {
+		F(!1), Me();
+	};
+	return /* @__PURE__ */ b(_e, { children: [/* @__PURE__ */ y(fe, {
+		"data-testid": X["data-testid"],
+		getValuesString: H,
+		name: u,
+		renderHiddenInput: E,
+		required: D,
+		value: B,
+		disabled: s,
+		ref: G
+	}), /* @__PURE__ */ y(ne, {
+		...X,
+		activator: /* @__PURE__ */ y(de, {
+			append: Se,
+			async: Q,
+			disabled: s,
+			error: Ae,
+			id: c,
+			loading: Z,
+			multiSelect: l,
+			multiSelectLimit: ce,
+			onChange: d,
+			placeholder: C,
+			popoverContainer: q,
+			prepend: De,
+			renderLabel: ve,
+			selectedOptionsText: Oe,
+			setValue: V,
+			setShow: F,
+			show: P,
+			value: B
+		}),
+		align: r,
+		className: e(a, $.root, t.Select),
+		container: q,
+		contentClassName: e($.popoverContent),
+		contentStyle: {
+			...X.contentStyle,
+			p: "none"
+		},
+		matchActivatorWidth: ae,
+		onActivated: Re,
+		onDeactivated: ze,
+		ref: U,
+		show: I,
+		type: Le,
+		virtualFocus: Ie,
+		onBlur: Fe,
+		children: /* @__PURE__ */ b("div", {
+			className: $.wrapper,
+			children: [
+				ie,
+				/* @__PURE__ */ y(p, {
+					autoHighlight: i,
+					debouncedQuery: ke,
+					error: Ae,
+					errorText: ee,
+					initialOptions: J,
+					loading: Z,
+					minSearchLength: we,
+					multiSelect: l,
+					onChange: d,
+					options: m,
+					query: L,
+					renderOptions: ye,
+					results: je,
+					setQuery: be,
+					setShow: F,
+					setValue: V,
+					shouldShowInstructions: Ne,
+					shouldShowNoResults: Pe,
+					show: I,
+					value: B
+				}),
+				re
+			]
+		})
+	})] });
+});
+T.displayName = "IressSelect";
+//#endregion
+//#region src/components/Autocomplete/Autocomplete.tsx
+var E = m(({ alwaysShowOnFocus: n, append: te = /* @__PURE__ */ y(r, { name: "search" }), autoComplete: ne = "off", autoSelect: oe = !0, className: ue, clearable: de = !0, "data-testid": p, debounceThreshold: fe, defaultValue: pe, errorText: me = /* @__PURE__ */ y(ie, {
+	status: "danger",
+	mb: "none",
+	variant: "full-width",
+	children: "An unknown error occurred. Please contact support if the error persists."
+}), initialOptions: m, loadingDelay: he, limitDesktop: ge = 12, limitMobile: g = 6, minSearchLength: _, noResultsText: x, onChange: S, onClear: C, onFocus: w, options: T, popoverProps: { autoHighlight: E = !1, append: ve, prepend: ye, ...D } = {}, readOnly: O, value: k, ...A }, j) => {
+	let [M, N] = v(!1), { value: P, setValue: F } = ee({
+		component: "IressAutocomplete",
+		defaultValue: pe,
+		value: k
+	}), [I, L] = v(!1), { clearError: be, debouncedQuery: R, error: z, loading: B, results: V, startSearch: H, stopSearch: xe, shouldShowInstructions: U, shouldShowNoResults: W } = le({
+		debounceThreshold: fe,
+		initialOptions: m,
+		loadingDelay: he,
+		minSearchLength: _,
+		options: T,
+		query: ae(P)
+	});
+	if (h(() => {
+		I && !M && V.length > 0 && P && N(!0);
+	}, [
+		V.length,
+		M,
+		I,
+		P
+	]), h(() => {
+		B && I && N(!0);
+	}, [B, I]), h(() => {
+		z && N(!0);
+	}, [z]), O) return /* @__PURE__ */ y(se, {
+		value: P,
+		variant: O
+	});
+	let G = (e, t) => {
+		S?.(e, t), F(t), L(!!t);
+	}, K = (e) => {
+		C?.(e), F("");
+	}, Se = (e) => {
+		w?.(e), m?.length && N(!0);
+	}, q = (e) => {
+		let t = s(e)?.[0];
+		S?.(ce(t?.label), t?.label, t), F(t?.label), N(!1), L(!1);
+	}, Ce = () => {
+		(!n || !P) && xe(), be(), N(!1), P && L(!1);
+	}, J = (e) => {
+		A.onKeyDown?.(e), e.key === "ArrowDown" && (!M || !I) && (V.length || H(!0), L(!0), N(!0));
+	}, Y = c({ isEmpty: V.length === 0 && !B && !z && !U && !W });
+	return /* @__PURE__ */ b(re, {
+		...D,
+		activator: /* @__PURE__ */ y(l, {
+			...A,
+			append: te,
+			autoComplete: ne,
+			clearable: de,
+			"data-testid": a(p, "input"),
+			onChange: G,
+			onClear: K,
+			onFocus: Se,
+			onKeyDown: J,
+			value: P,
+			ref: j
+		}),
+		autoHighlight: E,
+		className: e(ue, D.className, Y.root, t.Autocomplete),
+		contentClassName: e(D.contentClassName, Y.popoverContent),
+		contentStyle: D.contentStyle,
+		"data-testid": p,
+		minLength: 0,
+		onActivated: () => (I || n) && N(!0),
+		onDeactivated: Ce,
+		show: M,
+		type: "listbox",
+		focusStartIndex: 0,
+		children: [
+			B && !V.length && /* @__PURE__ */ b(d, {
+				gap: "sm",
+				verticalAlign: "middle",
+				p: "spacing.3",
+				children: [/* @__PURE__ */ y(o, { color: "colour.neutral.70" }), /* @__PURE__ */ y(i, {
+					color: "colour.neutral.70",
+					children: "Loading results..."
+				})]
+			}),
+			V.length > 0 && /* @__PURE__ */ b(_e, { children: [
+				ye,
+				/* @__PURE__ */ y(f, {
+					changeOnBlur: oe,
+					className: e(Y.optionList),
+					"data-testid": a(p, "menu"),
+					items: V,
+					limitDesktop: ge,
+					limitMobile: g,
+					onChange: q,
+					selected: { label: R }
+				}),
+				ve
+			] }),
+			z && me,
+			U && !z && /* @__PURE__ */ y(u, { minSearchLength: _ ?? 1 }),
+			W && !z && x
+		]
+	});
+});
+E.displayName = "IressAutocomplete";
+//#endregion
+export { T as n, E as t };

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../Autocomplete-DKufjQU5.js";
+import { t as e } from "../../Autocomplete-ZqkibVwt.js";
 export { e as IressAutocomplete };

package/dist/components/Autocomplete/index.js

@@ -1,4 +1,4 @@
 import { autoComplete as e } from "./Autocomplete.styles.js";
 import { t } from "../../useAutocompleteSearch-BYzUn7Ag.js";
-import { t as n } from "../../Autocomplete-DKufjQU5.js";
+import { t as n } from "../../Autocomplete-ZqkibVwt.js";
 export { n as IressAutocomplete, e as autoComplete, t as useAutocompleteSearch };

package/dist/components/Field/Field.d.ts

@@ -40,6 +40,12 @@ export type IressFieldProps<E extends 'div' | 'fieldset' = 'div', ELabel extends
      * Validation errors to be displayed above the field, an array of validation messages to be displayed in `IressValidationSummary`.
      */
     errorMessages?: ValidationMessageObj[];
+    /**
+     * ID for the error container element, used to associate the error message with the form control via `aria-describedby`.
+     * When `error` or `errorMessages` are present and `htmlFor` is set, this is automatically derived as `${htmlFor}-error`.
+     * Override only if you need a custom error container ID.
+     */
+    errorId?: string;
     /**
      * Renders the group in a read-only state (no asterisk symbol).
      * Use `'locked'` when the control is read-only due to permissions.
@@ -56,6 +62,6 @@ export type IressFieldProps<E extends 'div' | 'fieldset' = 'div', ELabel extends
     supplementary?: ReactNode;
 };
 export declare const IressField: {
-    ({ children, className, "data-testid": dataTestId, error, errorMessages, hiddenLabel, hint, horizontal, label, labelWidth, required, readOnly, removeErrorMargin, supplementary, ...restProps }: IressFieldProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, className, "data-testid": dataTestId, error, errorId, errorMessages, hiddenLabel, hint, horizontal, label, labelWidth, required, readOnly, removeErrorMargin, supplementary, ...restProps }: IressFieldProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/Field/Field.js

@@ -12,57 +12,58 @@ import { FieldHint as u } from "./components/FieldHint.js";
 import { isValidElement as d } from "react";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/Field/Field.tsx
-var m = ({ children: m, className: h, "data-testid": g, error: _, errorMessages: v, hiddenLabel: y, hint: b, horizontal: x, label: S, labelWidth: C, required: w, readOnly: T, removeErrorMargin: E = !1, supplementary: D, ...O }) => {
-	let { htmlFor: k } = O, A;
-	A = k === void 0 && d(m) ? o(m)[0].props.id : k;
-	let j = c.raw({
-		hasError: !!_ || !!v?.length,
-		hasHint: !!b,
-		hiddenLabel: y,
-		horizontal: x,
+var m = ({ children: m, className: h, "data-testid": g, error: _, errorId: v, errorMessages: y, hiddenLabel: b, hint: x, horizontal: S, label: C, labelWidth: w, required: T, readOnly: E, removeErrorMargin: D = !1, supplementary: O, ...k }) => {
+	let { htmlFor: A } = k, j;
+	j = A === void 0 && d(m) ? o(m)[0].props.id : A;
+	let M = !!_ || !!y?.length, N = v ?? (M && j ? `${j}-error` : void 0), P = c.raw({
+		hasError: M,
+		hasHint: !!x,
+		hiddenLabel: b,
+		horizontal: S,
 		multipleFields: !1,
-		removeErrorMargin: E
-	}), [M, N] = n(O), P = !!T, F = () => {
+		removeErrorMargin: D
+	}), [F, I] = n(k), L = !!E, R = () => {
 		let t = /* @__PURE__ */ f(s, {
-			className: e(j.label),
+			className: e(P.label),
 			"data-testid": a(g, "label"),
-			hiddenLabel: y,
-			htmlFor: A,
-			readOnly: T,
-			required: !P && !!w,
-			children: S
+			hiddenLabel: b,
+			htmlFor: j,
+			readOnly: E,
+			required: !L && !!T,
+			children: C
 		});
-		return b ? /* @__PURE__ */ f(u, {
-			hint: b,
-			horizontal: x,
-			hiddenLabel: y,
+		return x ? /* @__PURE__ */ f(u, {
+			hint: x,
+			horizontal: S,
+			hiddenLabel: b,
 			dataTestId: g,
 			children: t
 		}) : t;
 	};
 	return /* @__PURE__ */ p(r.div, {
-		className: t(h, e(j.root, M), i.Field),
-		style: { ...x && C && { gridTemplateColumns: `${C} 1fr` } },
+		className: t(h, e(P.root, F), i.Field),
+		style: { ...S && w && { gridTemplateColumns: `${w} 1fr` } },
 		"data-testid": g,
-		...N,
+		...I,
 		children: [
 			/* @__PURE__ */ f(r.div, {
-				className: e(j.labelContainer),
-				children: F()
+				className: e(P.labelContainer),
+				children: R()
 			}),
 			/* @__PURE__ */ f(r.div, {
-				className: e(j.fieldContainer),
+				className: e(P.fieldContainer),
 				children: /* @__PURE__ */ f("div", {
-					className: e(j.element),
+					className: e(P.element),
 					children: m
 				})
 			}),
 			/* @__PURE__ */ f(l, {
-				className: e(j.footer),
+				className: e(P.footer),
 				"data-testid": a(g, "error"),
 				error: _,
-				errorMessages: v,
-				supplementary: D
+				errorId: N,
+				errorMessages: y,
+				supplementary: O
 			})
 		]
 	});

package/dist/components/Field/components/FieldFooter.d.ts

@@ -6,6 +6,10 @@ export interface FieldFooterProps extends IressStyledProps {
      * Validation error to be displayed above the field.
      */
     error?: ReactNode;
+    /**
+     * ID for the error container element, used to associate the error message with the form control via `aria-describedby`.
+     */
+    errorId?: string;
     /**
      * Validation errors to be displayed above the field, an array of validation messages to be displayed in `IressValidationSummary`.
      */
@@ -20,6 +24,6 @@ export interface FieldFooterProps extends IressStyledProps {
     supplementary?: ReactNode;
 }
 export declare const FieldFooter: {
-    ({ className, "data-testid": dataTestId, error, errorMessages, multipleFields, supplementary, ...restProps }: FieldFooterProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ className, "data-testid": dataTestId, error, errorId, errorMessages, multipleFields, supplementary, ...restProps }: FieldFooterProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

package/dist/components/Field/components/FieldFooter.js

@@ -12,31 +12,32 @@ import { jsx as d, jsxs as f } from "react/jsx-runtime";
 var p = (e) => /* @__PURE__ */ d(r, {
 	name: "cancel",
 	...e
-}), m = ({ className: r, "data-testid": m, error: h, errorMessages: g = [], multipleFields: _, supplementary: v, ...y }) => {
-	let b = a({ multipleFields: _ }), x = u(null), S = u(null), C = l(() => !!h || g.length > 0, [h, g.length]);
+}), m = ({ className: r, "data-testid": m, error: h, errorId: g, errorMessages: _ = [], multipleFields: v, supplementary: y, ...b }) => {
+	let x = a({ multipleFields: v }), S = u(null), C = u(null), w = l(() => !!h || _.length > 0, [h, _.length]);
 	return c(() => {
-		if (!x.current || S.current === C) {
-			S.current = C;
+		if (!S.current || C.current === w) {
+			C.current = w;
 			return;
 		}
-		x.current.classList.remove(e({ animationStyle: "field-footer" })), x.current.offsetHeight, S.current = C, x.current.classList.add(e({ animationStyle: "field-footer" }));
-	}, [C]), !v && !C ? null : /* @__PURE__ */ f(n.div, {
-		...y,
-		className: t(r, b.footer),
-		ref: x,
-		children: [C && /* @__PURE__ */ d(s, {
+		S.current.classList.remove(e({ animationStyle: "field-footer" })), S.current.offsetHeight, C.current = w, S.current.classList.add(e({ animationStyle: "field-footer" }));
+	}, [w]), !y && !w ? null : /* @__PURE__ */ f(n.div, {
+		...b,
+		className: t(r, x.footer),
+		ref: S,
+		children: [w && /* @__PURE__ */ d(s, {
+			id: g,
 			itemStyle: { textStyle: "typography.body.sm" },
-			messages: o(g, "message"),
+			messages: o(_, "message"),
 			"data-testid": m,
 			prefix: /* @__PURE__ */ d(p, {
 				"aria-label": "Error: ",
-				className: b.footerIcon
+				className: x.footerIcon
 			}),
 			visiblePrefix: !0,
 			children: h
-		}), !C && /* @__PURE__ */ d(i, {
-			className: b.supplementary,
-			children: v
+		}), !w && /* @__PURE__ */ d(i, {
+			className: x.supplementary,
+			children: y
 		})]
 	});
 };

package/dist/components/Select/Select.js

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

package/dist/components/Select/SelectTags/SelectTags.d.ts

@@ -30,6 +30,6 @@ export interface IressSelectTagsProps extends Omit<IressSelectActivatorProps, 'w
     limit?: number;
 }
 export declare const IressSelectTags: {
-    ({ append, className, "data-testid": dataTestId, id, limit, onDelete, onDeleteAll, onToggleActions, placeholder, prepend, selected, selectedOptionsText, ...restProps }: IressSelectTagsProps): import("react/jsx-runtime").JSX.Element;
+    ({ append, className, "data-testid": dataTestId, id, limit, onDelete, onDeleteAll, onToggleActions, placeholder, popoverContainer, prepend, selected, selectedOptionsText, ...restProps }: IressSelectTagsProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -26,25 +26,25 @@ 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: g, selectedOptionsText: v }) => {
-	let [C, w] = y(!1), T = c(), E = f(), D = _((e, t) => {
-		i?.(g.find((t) => t.label === e), t), t.stopPropagation(), S(T, t);
+}, C = ({ "data-testid": e, limit: t = 5, onDelete: i, onDeleteAll: o, onToggleActions: s, popoverContainer: g, selectedArray: v, selectedOptionsText: C }) => {
+	let [w, T] = y(!1), E = c(), D = f(), O = _((e, t) => {
+		i?.(v.find((t) => t.label === e), t), t.stopPropagation(), S(E, t);
 	}, [
 		i,
-		T,
-		g
-	]), O = _((e) => {
-		o?.(e), T?.getFocusableActivator()?.focus();
-	}, [o, T]);
-	return C && g.length || !t || g.length <= t ? g.map((t) => /* @__PURE__ */ b(p, {
-		className: E.tag,
+		E,
+		v
+	]), k = _((e) => {
+		o?.(e), E?.getFocusableActivator()?.focus();
+	}, [o, E]);
+	return w && v.length || !t || v.length <= t ? v.map((t) => /* @__PURE__ */ b(p, {
+		className: D.tag,
 		"data-testid": a(e, "tag"),
 		deleteButtonText: `Delete ${t.label}`,
-		onDelete: D,
+		onDelete: O,
 		compact: !0,
 		children: t.label
 	}, u(t.value) ?? t.label)) : /* @__PURE__ */ b(p, {
-		className: E.tag,
+		className: D.tag,
 		"data-testid": a(e, "tag"),
 		deleteButton: /* @__PURE__ */ b(l, {
 			activator: /* @__PURE__ */ b(r, {
@@ -56,55 +56,56 @@ var S = (e, t) => {
 			}),
 			onActivated: () => s?.(!0),
 			onClick: (e) => {
-				e.stopPropagation(), S(T, e);
+				e.stopPropagation(), S(E, e);
 			},
 			onDeactivated: () => s?.(!1),
-			container: document.body,
+			container: g ?? document.body,
 			align: "bottom-end",
 			contentStyle: { p: "none" },
 			virtualFocus: !0,
 			children: /* @__PURE__ */ x(m, { children: [/* @__PURE__ */ b(h, {
-				onClick: () => w(!0),
+				onClick: () => T(!0),
 				children: "Expand all"
 			}), /* @__PURE__ */ b(h, {
-				onClick: O,
+				onClick: k,
 				children: "Delete all"
 			})] })
 		}),
 		compact: !0,
-		children: d(g, v)
+		children: d(v, C)
 	});
-}, 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 });
+}, w = ({ append: n = "", className: r, "data-testid": a, id: s, limit: c = 5, onDelete: l, onDeleteAll: u, onToggleActions: d, placeholder: p, popoverContainer: m, prepend: h, selected: _, selectedOptionsText: y = "{{numOptions}} selected", ...S }) => {
+	let w = v(() => o(_), [_]), T = !w.length && p, E = !!w.length, D = f({ showDefaultChevron: n == null || n === "" || !n });
 	return /* @__PURE__ */ x(i, {
-		...y,
+		...S,
 		id: s,
 		tabIndex: 0,
-		className: e(r, E.root, t.FormElementInner, t.SelectTags),
+		className: e(r, D.root, t.FormElementInner, t.SelectTags),
 		children: [
-			m && /* @__PURE__ */ b("span", {
-				className: E.prepend,
-				children: m
+			h && /* @__PURE__ */ b("span", {
+				className: D.prepend,
+				children: h
 			}),
-			w && /* @__PURE__ */ b(i, {
-				className: E.placeholder,
+			T && /* @__PURE__ */ b(i, {
+				className: D.placeholder,
 				children: p
 			}),
-			T && /* @__PURE__ */ b(g, {
+			E && /* @__PURE__ */ b(g, {
 				gap: "sm",
-				className: E.tagsList,
+				className: D.tagsList,
 				children: /* @__PURE__ */ b(C, {
 					"data-testid": a,
 					limit: c,
 					onDelete: l,
 					onDeleteAll: u,
 					onToggleActions: d,
-					selectedArray: S,
-					selectedOptionsText: _
+					popoverContainer: m,
+					selectedArray: w,
+					selectedOptionsText: y
 				})
 			}),
 			/* @__PURE__ */ b("button", {
-				className: E.append,
+				className: D.append,
 				role: "combobox",
 				"aria-label": "Select options",
 				children: n

package/dist/components/Select/components/NativeSelect.js

@@ -29,7 +29,7 @@ var f = l(({ className: l, "data-testid": f, options: p, onChange: m, placeholde
 				m?.(e, t);
 			},
 			ref: b,
-			value: o(_?.value ?? _?.label),
+			value: o(_?.value ?? _?.label) ?? "",
 			children: [h !== void 0 && /* @__PURE__ */ u("option", {
 				value: "",
 				children: h

package/dist/components/Select/components/SelectActivator.d.ts

@@ -2,6 +2,7 @@ import { IressSelectProps, SelectLabelRenderProps } from '../Select';
 import { LabelValueMeta } from '../../../interfaces';
 import { ReactNode } from 'react';
 import { IressInputProps } from '../../Input';
+import { FloatingUIContainer } from '../../../types';
 export interface IressSelectActivatorProps {
     /**
      * Append content.
@@ -12,6 +13,12 @@ export interface IressSelectActivatorProps {
      * Placeholder, shown when there is nothing selected.
      */
     placeholder?: ReactNode;
+    /**
+     * The container element to render the multiselect tags actions popover into.
+     * Useful when rendering inside a Shadow DOM or a custom portal root.
+     * Defaults to `document.body`. Pass `null` to render the popover inline.
+     */
+    popoverContainer?: FloatingUIContainer;
     /**
      * Prepend content.
      */
@@ -30,12 +37,12 @@ export interface IressSelectActivatorProps {
      */
     width?: IressInputProps['width'];
 }
-interface SelectActivatorProps<TMultiple extends boolean = false> extends Pick<IressSelectProps<TMultiple>, 'disabled' | 'id' | 'multiSelect' | 'multiSelectLimit' | 'onChange' | 'placeholder' | 'renderLabel' | 'append' | 'prepend' | 'selectedOptionsText'>, Omit<SelectLabelRenderProps<TMultiple>, 'close'> {
+interface SelectActivatorProps<TMultiple extends boolean = false> extends Pick<IressSelectProps<TMultiple>, 'disabled' | 'id' | 'multiSelect' | 'multiSelectLimit' | 'onChange' | 'placeholder' | 'renderLabel' | 'append' | 'prepend' | 'selectedOptionsText'>, Pick<IressSelectActivatorProps, 'popoverContainer'>, Omit<SelectLabelRenderProps<TMultiple>, 'close'> {
     async?: boolean;
     setShow: (show: boolean) => void;
 }
 export declare const SelectActivator: {
-    <TMultiple extends boolean = false>({ append, async, id, disabled, error, loading, multiSelect, multiSelectLimit, onChange, placeholder, prepend, renderLabel, selectedOptionsText, setShow, setValue, show, value, }: SelectActivatorProps<TMultiple>): import("react/jsx-runtime").JSX.Element;
+    <TMultiple extends boolean = false>({ append, async, id, disabled, error, loading, multiSelect, multiSelectLimit, onChange, placeholder, popoverContainer, prepend, renderLabel, selectedOptionsText, setShow, setValue, show, value, }: SelectActivatorProps<TMultiple>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/Select/components/SelectActivator.js

@@ -5,45 +5,46 @@ import { IressSelectTags as r } from "../SelectTags/SelectTags.js";
 import { toPrimitiveValue as i } from "../helpers/toPrimitiveValue.js";
 import { jsx as a } from "react/jsx-runtime";
 //#region src/components/Select/components/SelectActivator.tsx
-var o = ({ append: o, async: s, id: c, disabled: l, error: u, loading: d, multiSelect: f, multiSelectLimit: p, onChange: m, placeholder: h, prepend: g, renderLabel: _, selectedOptionsText: v, setShow: y, setValue: b, show: x, value: S }) => _ ? _({
-	close: () => y(!1),
+var o = ({ append: o, async: s, id: c, disabled: l, error: u, loading: d, multiSelect: f, multiSelectLimit: p, onChange: m, placeholder: h, popoverContainer: g, prepend: _, renderLabel: v, selectedOptionsText: y, setShow: b, setValue: x, show: S, value: C }) => v ? v({
+	close: () => b(!1),
 	disabled: l,
 	error: u,
 	loading: d,
-	setValue: b,
-	show: x,
-	value: S
+	setValue: x,
+	show: S,
+	value: C
 }) : f ? /* @__PURE__ */ a(r, {
 	append: o,
 	id: c,
 	limit: p,
 	onDelete: (n) => {
 		if (!n) return;
-		let r = e(S).filter((e) => e.label !== n.label);
-		b(r);
+		let r = e(C).filter((e) => e.label !== n.label);
+		x(r);
 		let a = i(r);
 		m?.(t(a), a, r);
 	},
 	onDeleteAll: () => {
 		let e = [];
-		b(e);
+		x(e);
 		let n = i(e);
 		m?.(t(n), n, e);
 	},
-	onToggleActions: () => y(!1),
+	onToggleActions: () => b(!1),
 	placeholder: h,
-	prepend: g,
-	selected: S,
-	selectedOptionsText: v
+	popoverContainer: g,
+	prepend: _,
+	selected: C,
+	selectedOptionsText: y
 }) : /* @__PURE__ */ a(n, {
 	append: o,
 	id: c,
 	disabled: l,
 	placeholder: h,
-	prepend: g,
+	prepend: _,
 	role: s ? void 0 : "combobox",
-	selected: S,
-	selectedOptionsText: v
+	selected: C,
+	selectedOptionsText: y
 });
 o.displayName = "SelectActivator";
 //#endregion

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-DKufjQU5.js";
+import { n as c } from "../../Autocomplete-ZqkibVwt.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 };

package/dist/main.js

@@ -66,7 +66,7 @@ import { IressSelectHeading as Ae } from "./components/Select/SelectHeading/Sele
 import { IressSelectMenu as je } from "./components/Select/SelectMenu/SelectMenu.js";
 import { IressSelectSearchInput as Me } from "./components/Select/SelectSearchInput/SelectSearchInput.js";
 import { nativeSelect as Ne } from "./components/Select/components/NativeSelect.styles.js";
-import { n as Pe, t as Fe } from "./Autocomplete-DKufjQU5.js";
+import { n as Pe, t as Fe } from "./Autocomplete-ZqkibVwt.js";
 import { IressSelectBody as Ie } from "./components/Select/SelectBody/SelectBody.js";
 import { IressSelectCreate as Le } from "./components/Select/SelectCreate/SelectCreate.js";
 import { avatar as Re } from "./components/Avatar/Avatar.styles.js";

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

@@ -55,6 +55,15 @@ export interface FormFieldRenderProps<T extends FieldValues> extends ControllerR
      * ID of the field. It is automatically generated based on the name of the field and its parent form.
      */
     id: string;
+    /**
+     * References the ID of the error message container when the field has a validation error,
+     * so that assistive technologies can associate the error with the control.
+     */
+    'aria-describedby'?: string;
+    /**
+     * Set to `true` when the field has a validation error, indicating an invalid state to assistive technologies.
+     */
+    'aria-invalid'?: boolean;
 }
 /**
  * Props for the `IressFormField` `render` prop, second argument.

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

@@ -27,21 +27,26 @@ var f = ({ control: f, defaultValue: p, name: m, render: h, renderSupplementary:
 		m,
 		b
 	]);
-	let O = {
-		...i(w),
-		id: `${S.id}__${m}`
-	}, k = {
+	let O = i(w), k = `${S.id}__${m}-error`, A = !!D && !b, j = {
+		...O,
+		id: `${S.id}__${m}`,
+		...A ? {
+			"aria-describedby": k,
+			"aria-invalid": !0
+		} : {}
+	}, M = {
 		formState: T,
 		fieldState: E
 	};
 	return /* @__PURE__ */ l(t, {
-		errorMessages: D && !b ? [{ message: D }] : void 0,
+		errorMessages: A ? [{ message: D }] : void 0,
 		htmlFor: `${S.id}__${m}`,
 		readOnly: b,
 		required: !!C?.required,
-		supplementary: /* @__PURE__ */ u(c, { children: [g?.(O, k), y] }),
+		supplementary: /* @__PURE__ */ u(c, { children: [g?.(j, M), y] }),
 		...x,
-		children: h(O, k)
+		errorId: k,
+		children: h(j, M)
 	});
 };
 f.displayName = "IressFormField";

package/dist/patterns/Form/FormValidationSummary/FormValidationSummary.d.ts

@@ -13,6 +13,6 @@ export type IressFormValidationSummaryProps = Omit<IressValidationSummaryProps,
  * Validation summary messages based on the form context from react-hook-form
  */
 export declare const IressFormValidationSummary: {
-    ({ actions, children, "data-testid": testId, footer, heading, itemStyle, icon, srOnly, variant, ...restProps }: IressFormValidationSummaryProps): import("react/jsx-runtime").JSX.Element;
+    ({ actions, children, "data-testid": testId, footer, heading, itemStyle, icon, srOnly, variant, role, "aria-live": ariaLive, ...restProps }: IressFormValidationSummaryProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -13,27 +13,31 @@ var c = e("div", { base: {
 } }, { defaultProps: {
 	role: "alert",
 	tabIndex: -1
-} }), l = ({ actions: e, children: l, "data-testid": u, footer: d, heading: f = /* @__PURE__ */ s("h3", { children: "There was a problem submitting this form" }), itemStyle: p, icon: m, srOnly: h, variant: g, ..._ }) => {
-	let v = o(r);
-	if (!v) throw Error("IressFormValidationSummary must be used within a IressForm");
-	let y = Object.entries(v.errorMessages).filter(([, e]) => !!e);
-	if (y.length === 0 || l) return /* @__PURE__ */ s(c, {
+} }), l = ({ actions: e, children: l, "data-testid": u, footer: d, heading: f = /* @__PURE__ */ s("h3", { children: "There was a problem submitting this form" }), itemStyle: p, icon: m, srOnly: h, variant: g, role: _, "aria-live": v, ...y }) => {
+	let b = o(r);
+	if (!b) throw Error("IressFormValidationSummary must be used within a IressForm");
+	let x = Object.entries(b.errorMessages).filter(([, e]) => !!e);
+	if (x.length === 0 || l) return /* @__PURE__ */ s(c, {
 		"data-testid": u,
 		srOnly: h,
-		ref: v.setFocusOnError,
+		ref: b.setFocusOnError,
+		..._ !== void 0 && { role: _ },
+		...v !== void 0 && { "aria-live": v },
 		children: l
 	});
-	let b = y.map(([e, t]) => {
-		let n = `${v?.id}__${e}`, r = document.getElementById(n), i = r?.labels, o = Array.from(i ?? []), s = r?.closest("fieldset")?.querySelector("legend");
+	let S = x.map(([e, t]) => {
+		let n = `${b?.id}__${e}`, r = document.getElementById(n), i = r?.labels, o = Array.from(i ?? []), s = r?.closest("fieldset")?.querySelector("legend");
 		return {
 			linkToTarget: n,
 			message: `${`${o[0]?.dataset?.name ?? s?.dataset?.name ?? a(e)}: `}${t}`
 		};
 	});
 	return /* @__PURE__ */ s(c, {
-		ref: v.setFocusOnError,
+		ref: b.setFocusOnError,
 		"data-testid": u,
 		srOnly: h,
+		..._ !== void 0 && { role: _ },
+		...v !== void 0 && { "aria-live": v },
 		children: /* @__PURE__ */ s(n, {
 			actions: e,
 			footer: d,
@@ -44,13 +48,13 @@ var c = e("div", { base: {
 			variant: g,
 			multiLine: !0,
 			children: /* @__PURE__ */ s(i, {
-				..._,
+				...y,
 				"data-testid": t(u, "messages"),
 				itemStyle: {
 					"data-testid": t(u, "error"),
 					...p
 				},
-				messages: b
+				messages: S
 			})
 		})
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iress-oss/ids-components",
-  "version": "6.2.1",
+  "version": "6.3.0",
   "description": "Iress React Component Library",
   "license": "Apache-2.0",
   "type": "module",

package/dist/Autocomplete-DKufjQU5.js

@@ -1,324 +0,0 @@
-import { t as e } from "./cx-QcEwjve6.js";
-import { GlobalCSSClass as t } from "./enums.js";
-import { idsLogger as n } from "./helpers/utility/idsLogger.js";
-import { IressIcon as r } from "./components/Icon/Icon.js";
-import { IressText as i } from "./components/Text/Text.js";
-import { propagateTestid as a } from "./helpers/utility/propagateTestid.js";
-import { IressSpinner as o } from "./components/Spinner/Spinner.js";
-import { toArray as s } from "./helpers/formatting/toArray.js";
-import { useControlledState as c } from "./hooks/useControlledState.js";
-import { useResponsiveProps as ee } from "./hooks/useResponsiveProps.js";
-import { IressPopover as te } from "./components/Popover/Popover.js";
-import { IressInputPopover as ne } from "./components/Popover/InputPopover/InputPopover.js";
-import { IressAlert as re } from "./components/Alert/Alert.js";
-import { autoComplete as l } from "./components/Autocomplete/Autocomplete.styles.js";
-import { getFormControlValueAsStringIfDefined as ie } from "./helpers/form/getFormControlValueAsStringIfDefined.js";
-import { useNoDefaultValueInForms as ae } from "./patterns/Form/hooks/useNoDefaultValueInForms.js";
-import { IressReadonly as oe } from "./components/Readonly/Readonly.js";
-import { IressInput as u } from "./components/Input/Input.js";
-import { getValueAsEvent as se } from "./helpers/form/getValueAsEvent.js";
-import { t as ce } from "./useAutocompleteSearch-BYzUn7Ag.js";
-import { AutocompleteInstructions as d } from "./components/Autocomplete/components/AutocompleteInstructions.js";
-import { select as le } from "./components/Select/Select.styles.js";
-import { IressInline as f } from "./components/Inline/Inline.js";
-import { SelectActivator as ue } from "./components/Select/components/SelectActivator.js";
-import { IressSelectMenu as p } from "./components/Select/SelectMenu/SelectMenu.js";
-import { SelectOptions as m } from "./components/Select/components/SelectOptions.js";
-import { SelectHiddenInput as de } from "./components/Select/components/SelectHiddenInput.js";
-import { NativeSelect as fe } from "./components/Select/components/NativeSelect.js";
-import { useSelectState as h } from "./components/Select/hooks/useSelectState.js";
-import { forwardRef as g, useCallback as pe, useEffect as _, useImperativeHandle as me, useMemo as v, useRef as y, useState as b } from "react";
-import { Fragment as he, jsx as x, jsxs as S } from "react/jsx-runtime";
-//#region src/components/Select/Select.tsx
-var C = (e) => typeof e == "object" && !!e && "label" in e, w = (e, t) => {
-	for (let n of t) if (n.children) {
-		let t = w(e, n.children);
-		if (t) return t;
-	} else if (n.value !== void 0 && n.value === e) return n;
-}, T = (e, t) => {
-	if (C(e)) return e;
-	if (typeof t != "function") return w(e, t) ?? (typeof e == "number" ? w(String(e), t) : void 0);
-}, E = (e, t) => {
-	if (e !== void 0) {
-		if (Array.isArray(e)) {
-			let r = e, i = r.map((e) => T(e, t)).filter((e) => e !== void 0);
-			return i.length < r.length && typeof t != "function" && n(`IressSelect: ${r.length - i.length} value(s) could not be resolved to matching options and were dropped.`, "warn"), i;
-		}
-		return T(e, t);
-	}
-}, D = g(({ align: r = "bottom-start", autoHighlight: i = !0, className: a, defaultValue: o, disabled: s, errorText: c, footer: ne, header: re, id: l, matchActivatorWidth: ie = !0, multiSelect: u, multiSelectLimit: se, name: d, onChange: f, onBlur: p, options: g, native: w, placeholder: T, readOnly: D, renderHiddenInput: O, renderLabel: ge, renderOptions: _e, required: k, type: A, value: j, virtualFocus: M, width: N, ...P }, F) => {
-	ae({
-		component: "IressSelect",
-		defaultValue: o
-	});
-	let [I, L] = b(!1), R = I && !s, [z, ve] = b(""), B = v(() => E(j, g), [j, g]), V = v(() => E(o, g), [o, g]);
-	_(() => {
-		j !== void 0 && !C(j) && B === void 0 && typeof g == "function" && n("IressSelect: A primitive value was passed but cannot be resolved because options are asynchronous. Pass a LabelValueMeta object instead when using async options, otherwise the component will behave as uncontrolled.", "warn");
-	}, [
-		j,
-		B,
-		g
-	]);
-	let { value: H, setValue: U, getValuesString: W, getLabelsString: ye } = h({
-		component: "IressSelect",
-		defaultValue: V,
-		multiple: u,
-		value: B
-	}), G = y(null), K = y(null), q = y(null), { value: J } = ee(typeof w == "string" ? {
-		xs: !0,
-		[w]: !1
-	} : { xs: w }, { disabled: !w }), { append: be, debounceThreshold: xe, initialOptions: Y, loadingDelay: Se, minSearchLength: X, onActivated: Ce, onDeactivated: we, prepend: Te, selectedOptionsText: Ee, ...Z } = P, { debouncedQuery: De, error: Oe, results: ke, stopSearch: Ae, loading: je, shouldShowInstructions: Me, shouldShowNoResults: Ne } = ce({
-		debounceThreshold: xe,
-		disabled: !I || !!J,
-		initialOptions: Y,
-		loadingDelay: Se,
-		minSearchLength: X,
-		options: g,
-		query: z
-	});
-	me(F, () => J ? {
-		focus: () => K.current?.focus(),
-		blur: () => K.current?.blur(),
-		input: K.current ?? null
-	} : G.current ? {
-		...G.current,
-		focus: () => G.current?.getActivator()?.focus(),
-		blur: () => G.current?.getActivator()?.blur(),
-		hiddenInput: q.current ?? void 0,
-		input: q.current ?? null
-	} : {
-		hiddenInput: q.current ?? void 0,
-		input: q.current ?? null,
-		focus: () => q.current?.focus(),
-		blur: () => q.current?.blur()
-	}, [J]), _(() => {
-		I ? Ce?.() : we?.();
-	}, [
-		Ce,
-		we,
-		I
-	]);
-	let Pe = pe((e) => {
-		if (!p) return;
-		let t = e.currentTarget, n = e.relatedTarget;
-		!I && (!n || !t.contains(n)) && p(e), e.stopPropagation();
-	}, [p, I]);
-	if (D) return /* @__PURE__ */ x(oe, {
-		value: W(),
-		ref: q,
-		variant: D,
-		name: d,
-		disabled: s,
-		required: k,
-		children: ye(", ")
-	});
-	if (J) {
-		if (g instanceof Function) throw Error("[IressSelect] The native select does not support asynchronous options. Please provide options as an array.");
-		if (u) throw Error("[IressSelect] The native select does not support multiple selection. Please remove the multiSelect prop or use the non-native select.");
-		return /* @__PURE__ */ x(fe, {
-			className: e(a, t.Select),
-			"data-testid": Z["data-testid"],
-			disabled: s,
-			id: l,
-			name: d,
-			onChange: (e, t) => {
-				f?.(e, t?.value ?? null, t), U(t);
-			},
-			options: g,
-			placeholder: typeof w == "string" ? T ?? "" : T,
-			style: Z.style,
-			value: H,
-			width: N,
-			ref: K
-		});
-	}
-	let Q = typeof g == "function", Fe = M ?? !Q, Ie = A ?? (Q ? void 0 : "listbox"), $ = le({ width: N }), Le = () => {
-		L(!0);
-	}, Re = () => {
-		L(!1), Ae();
-	};
-	return /* @__PURE__ */ S(he, { children: [/* @__PURE__ */ x(de, {
-		"data-testid": Z["data-testid"],
-		getValuesString: W,
-		name: d,
-		renderHiddenInput: O,
-		required: k,
-		value: H,
-		disabled: s,
-		ref: q
-	}), /* @__PURE__ */ x(te, {
-		...Z,
-		activator: /* @__PURE__ */ x(ue, {
-			append: be,
-			async: Q,
-			disabled: s,
-			error: Oe,
-			id: l,
-			loading: je,
-			multiSelect: u,
-			multiSelectLimit: se,
-			onChange: f,
-			placeholder: T,
-			prepend: Te,
-			renderLabel: ge,
-			selectedOptionsText: Ee,
-			setValue: U,
-			setShow: L,
-			show: I,
-			value: H
-		}),
-		align: r,
-		className: e(a, $.root, t.Select),
-		contentClassName: e($.popoverContent),
-		contentStyle: {
-			...Z.contentStyle,
-			p: "none"
-		},
-		matchActivatorWidth: ie,
-		onActivated: Le,
-		onDeactivated: Re,
-		ref: G,
-		show: R,
-		type: Ie,
-		virtualFocus: Fe,
-		onBlur: Pe,
-		children: /* @__PURE__ */ S("div", {
-			className: $.wrapper,
-			children: [
-				re,
-				/* @__PURE__ */ x(m, {
-					autoHighlight: i,
-					debouncedQuery: De,
-					error: Oe,
-					errorText: c,
-					initialOptions: Y,
-					loading: je,
-					minSearchLength: X,
-					multiSelect: u,
-					onChange: f,
-					options: g,
-					query: z,
-					renderOptions: _e,
-					results: ke,
-					setQuery: ve,
-					setShow: L,
-					setValue: U,
-					shouldShowInstructions: Me,
-					shouldShowNoResults: Ne,
-					show: R,
-					value: H
-				}),
-				ne
-			]
-		})
-	})] });
-});
-D.displayName = "IressSelect";
-//#endregion
-//#region src/components/Autocomplete/Autocomplete.tsx
-var O = g(({ alwaysShowOnFocus: n, append: ee = /* @__PURE__ */ x(r, { name: "search" }), autoComplete: te = "off", autoSelect: ae = !0, className: le, clearable: ue = !0, "data-testid": m, debounceThreshold: de, defaultValue: fe, errorText: h = /* @__PURE__ */ x(re, {
-	status: "danger",
-	mb: "none",
-	variant: "full-width",
-	children: "An unknown error occurred. Please contact support if the error persists."
-}), initialOptions: g, loadingDelay: pe, limitDesktop: me = 12, limitMobile: v = 6, minSearchLength: y, noResultsText: C, onChange: w, onClear: T, onFocus: E, options: D, popoverProps: { autoHighlight: O = !1, append: ge, prepend: _e, ...k } = {}, readOnly: A, value: j, ...M }, N) => {
-	let [P, F] = b(!1), { value: I, setValue: L } = c({
-		component: "IressAutocomplete",
-		defaultValue: fe,
-		value: j
-	}), [R, z] = b(!1), { clearError: ve, debouncedQuery: B, error: V, loading: H, results: U, startSearch: W, stopSearch: ye, shouldShowInstructions: G, shouldShowNoResults: K } = ce({
-		debounceThreshold: de,
-		initialOptions: g,
-		loadingDelay: pe,
-		minSearchLength: y,
-		options: D,
-		query: ie(I)
-	});
-	if (_(() => {
-		R && !P && U.length > 0 && I && F(!0);
-	}, [
-		U.length,
-		P,
-		R,
-		I
-	]), _(() => {
-		H && R && F(!0);
-	}, [H, R]), _(() => {
-		V && F(!0);
-	}, [V]), A) return /* @__PURE__ */ x(oe, {
-		value: I,
-		variant: A
-	});
-	let q = (e, t) => {
-		w?.(e, t), L(t), z(!!t);
-	}, J = (e) => {
-		T?.(e), L("");
-	}, be = (e) => {
-		E?.(e), g?.length && F(!0);
-	}, xe = (e) => {
-		let t = s(e)?.[0];
-		w?.(se(t?.label), t?.label, t), L(t?.label), F(!1), z(!1);
-	}, Y = () => {
-		(!n || !I) && ye(), ve(), F(!1), I && z(!1);
-	}, Se = (e) => {
-		M.onKeyDown?.(e), e.key === "ArrowDown" && (!P || !R) && (U.length || W(!0), z(!0), F(!0));
-	}, X = l({ isEmpty: U.length === 0 && !H && !V && !G && !K });
-	return /* @__PURE__ */ S(ne, {
-		...k,
-		activator: /* @__PURE__ */ x(u, {
-			...M,
-			append: ee,
-			autoComplete: te,
-			clearable: ue,
-			"data-testid": a(m, "input"),
-			onChange: q,
-			onClear: J,
-			onFocus: be,
-			onKeyDown: Se,
-			value: I,
-			ref: N
-		}),
-		autoHighlight: O,
-		className: e(le, k.className, X.root, t.Autocomplete),
-		contentClassName: e(k.contentClassName, X.popoverContent),
-		contentStyle: k.contentStyle,
-		"data-testid": m,
-		minLength: 0,
-		onActivated: () => (R || n) && F(!0),
-		onDeactivated: Y,
-		show: P,
-		type: "listbox",
-		focusStartIndex: 0,
-		children: [
-			H && !U.length && /* @__PURE__ */ S(f, {
-				gap: "sm",
-				verticalAlign: "middle",
-				p: "spacing.3",
-				children: [/* @__PURE__ */ x(o, { color: "colour.neutral.70" }), /* @__PURE__ */ x(i, {
-					color: "colour.neutral.70",
-					children: "Loading results..."
-				})]
-			}),
-			U.length > 0 && /* @__PURE__ */ S(he, { children: [
-				_e,
-				/* @__PURE__ */ x(p, {
-					changeOnBlur: ae,
-					className: e(X.optionList),
-					"data-testid": a(m, "menu"),
-					items: U,
-					limitDesktop: me,
-					limitMobile: v,
-					onChange: xe,
-					selected: { label: B }
-				}),
-				ge
-			] }),
-			V && h,
-			G && !V && /* @__PURE__ */ x(d, { minSearchLength: y ?? 1 }),
-			K && !V && C
-		]
-	});
-});
-O.displayName = "IressAutocomplete";
-//#endregion
-export { D as n, O as t };