@iress-oss/ids-components 6.1.0 → 6.2.0

package/.ai/components/select.md

@@ -109,6 +109,22 @@ By default, async searches are triggered after 1 character. Setting a higher val
 
 [View "AsyncOptionsMinSearchLength" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-select--async-options-min-search-length)
 
+### Custom error text
+
+When using asynchronous options, the `errorText` prop lets you customise the
+error message shown when the options function throws. By default, a generic
+danger alert is displayed.
+
+You can pass a `ReactNode` for a static message, or a render function
+`(error: boolean | string) => ReactNode` to access the error value and render
+it dynamically.
+
+```tsx
+<SelectAsyncErrorText />
+```
+
+[View "ErrorText" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-select--error-text)
+
 ### Initial options
 
 If you are using asynchronous options, you can provide an initial set of options to display before the user has interacted with the select using the `initialOptions` prop.

package/dist/Autocomplete-DKufjQU5.js

@@ -0,0 +1,324 @@
+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 };

package/dist/{Button-bZPKq0ue.js → Button-BY2qzshw.js}

@@ -1,9 +1,9 @@
-import { a as e, f as t, l as n, s as r, t as i } from "./css-D3KwXbP0.js";
-import { t as a } from "./cx-CZ8IJJTy.js";
-import { n as o } from "./is-valid-prop-BoZ7GJt2.js";
+import { a as e, f as t, l as n, s as r, t as i } from "./css-R34N3rft.js";
+import { t as a } from "./cx-QcEwjve6.js";
+import { n as o } from "./is-valid-prop-BVyYPT21.js";
 import { GlobalCSSClass as s } from "./enums.js";
 import { IressIcon as c } from "./components/Icon/Icon.js";
-import { t as l } from "./create-recipe-CYwSzH6a.js";
+import { t as l } from "./create-recipe-A316lnq3.js";
 import { IressSpinner as u } from "./components/Spinner/Spinner.js";
 import { useButtonGroupItem as d } from "./components/ButtonGroup/hooks/useButtonGroupItem.js";
 import { usePopover as f } from "./components/Popover/hooks/usePopover.js";

package/dist/{Provider-DvnuqPfQ.js → Provider-BNuRw7ck.js}

@@ -1,4 +1,4 @@
-import { p as e, u as t } from "./constants-D0UW4Ewm.js";
+import { p as e, u as t } from "./constants-DJz-xntC.js";
 import { IressIconProvider as n } from "./components/Icon/IconProvider.js";
 import { IressPopoverProvider as r } from "./components/Popover/PopoverProvider.js";
 import { IressModalProvider as i } from "./components/Modal/ModalProvider.js";
@@ -8,7 +8,7 @@ import { useEffect as s } from "react";
 import { createPortal as c } from "react-dom";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region ../tokens/dist/enums.js
-var d = /* @__PURE__ */ function(e) {
+var d = /*@__PURE__*/ function(e) {
 	return e.Color = "color", e.Dimension = "dimension", e.FontFamily = "fontFamily", e.FontSize = "fontSize", e.Background = "background", e.Border = "border", e.Radius = "radius", e.Shadow = "shadow", e.Typography = "typography", e;
 }({}), f = ".875rem", p = "Ubuntu, Helvetica, sans-serif", m = "Inter, Helvetica, sans-serif", h = ["https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"];
 d.FontSize, d.FontFamily, d.FontFamily, d.Typography, `${p}`, `${f}`, d.Typography, `${p}`, `${f}`, d.Typography, `${p}`, `${f}`, d.Typography, `${p}`, `${f}`, d.Typography, `${p}`, `${f}`, d.Typography, `${m}`, `${f}`, d.Typography, `${m}`, `${f}`, d.Typography, `${m}`, `${f}`, d.Typography, `${m}`, `${f}`, d.Typography, `${m}`, `${f}`, d.Typography, `${m}`, `${f}`, d.Typography, `${m}`, `${f}`, d.Typography, `${m}`, `${f}`, d.Typography, `${f}`;