@iress-oss/ids-components 6.0.1 → 6.1.0

package/dist/Autocomplete-BRGD9dSh.js

@@ -0,0 +1,321 @@
+import { t as e } from "./cx-CZ8IJJTy.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 c } from "./components/Alert/Alert.js";
+import { autoComplete as ie } from "./components/Autocomplete/Autocomplete.styles.js";
+import { getFormControlValueAsStringIfDefined as l } 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 se } from "./components/Input/Input.js";
+import { getValueAsEvent as u } from "./helpers/form/getValueAsEvent.js";
+import { t as ce } from "./useAutocompleteSearch-DxKxs6HH.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 pe } from "./components/Select/hooks/useSelectState.js";
+import { forwardRef as h, useCallback as me, useEffect as g, useImperativeHandle as he, useMemo as _, useRef as v, useState as y } from "react";
+import { Fragment as ge, jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/components/Select/Select.tsx
+var S = (e) => typeof e == "object" && !!e && "label" in e, C = (e, t) => {
+	for (let n of t) if (n.children) {
+		let t = C(e, n.children);
+		if (t) return t;
+	} else if (n.value !== void 0 && n.value === e) return n;
+}, w = (e, t) => {
+	if (S(e)) return e;
+	if (typeof t != "function") return C(e, t) ?? (typeof e == "number" ? C(String(e), t) : void 0);
+}, T = (e, t) => {
+	if (e !== void 0) {
+		if (Array.isArray(e)) {
+			let r = e, i = r.map((e) => w(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 w(e, t);
+	}
+}, E = h(({ align: r = "bottom-start", autoHighlight: i = !0, className: a, defaultValue: o, disabled: s, footer: ee, header: re, id: c, matchActivatorWidth: ie = !0, multiSelect: l, multiSelectLimit: se, name: u, onChange: d, onBlur: f, options: p, native: h, placeholder: C, readOnly: w, renderHiddenInput: E, renderLabel: D, renderOptions: _e, required: O, type: k, value: A, virtualFocus: j, width: M, ...N }, P) => {
+	ae({
+		component: "IressSelect",
+		defaultValue: o
+	});
+	let [F, I] = y(!1), L = F && !s, [R, ve] = y(""), z = _(() => T(A, p), [A, p]), B = _(() => T(o, p), [o, p]);
+	g(() => {
+		A !== void 0 && !S(A) && z === void 0 && typeof p == "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");
+	}, [
+		A,
+		z,
+		p
+	]);
+	let { value: V, setValue: H, getValuesString: U, getLabelsString: ye } = pe({
+		component: "IressSelect",
+		defaultValue: B,
+		multiple: l,
+		value: z
+	}), W = v(null), G = v(null), K = v(null), { value: q } = te(typeof h == "string" ? {
+		xs: !0,
+		[h]: !1
+	} : { xs: h }, { disabled: !h }), { append: be, debounceThreshold: xe, initialOptions: J, minSearchLength: Y, onActivated: X, onDeactivated: Se, prepend: Ce, selectedOptionsText: we, ...Z } = N, { debouncedQuery: Te, error: Ee, results: De, stopSearch: Oe, loading: ke, shouldShowInstructions: Ae, shouldShowNoResults: je } = ce({
+		debounceThreshold: xe,
+		disabled: !F || !!q,
+		initialOptions: J,
+		minSearchLength: Y,
+		options: p,
+		query: R
+	});
+	he(P, () => q ? {
+		focus: () => G.current?.focus(),
+		blur: () => G.current?.blur(),
+		input: G.current ?? null
+	} : W.current ? {
+		...W.current,
+		focus: () => W.current?.getActivator()?.focus(),
+		blur: () => W.current?.getActivator()?.blur(),
+		hiddenInput: K.current ?? void 0,
+		input: K.current ?? null
+	} : {
+		hiddenInput: K.current ?? void 0,
+		input: K.current ?? null,
+		focus: () => K.current?.focus(),
+		blur: () => K.current?.blur()
+	}, [q]), g(() => {
+		F ? X?.() : Se?.();
+	}, [
+		X,
+		Se,
+		F
+	]);
+	let Me = me((e) => {
+		if (!f) return;
+		let t = e.currentTarget, n = e.relatedTarget;
+		!F && (!n || !t.contains(n)) && f(e), e.stopPropagation();
+	}, [f, F]);
+	if (w) return /* @__PURE__ */ b(oe, {
+		value: U(),
+		ref: K,
+		variant: w,
+		name: u,
+		disabled: s,
+		required: O,
+		children: ye(", ")
+	});
+	if (q) {
+		if (p 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__ */ b(fe, {
+			className: e(a, t.Select),
+			"data-testid": Z["data-testid"],
+			disabled: s,
+			id: c,
+			name: u,
+			onChange: (e, t) => {
+				d?.(e, t?.value ?? null, t), H(t);
+			},
+			options: p,
+			placeholder: typeof h == "string" ? C ?? "" : C,
+			style: Z.style,
+			value: V,
+			width: M,
+			ref: G
+		});
+	}
+	let Q = typeof p == "function", Ne = j ?? !Q, Pe = k ?? (Q ? void 0 : "listbox"), $ = le({ width: M }), Fe = () => {
+		I(!0);
+	}, Ie = () => {
+		I(!1), Oe();
+	};
+	return /* @__PURE__ */ x(ge, { children: [/* @__PURE__ */ b(de, {
+		"data-testid": Z["data-testid"],
+		getValuesString: U,
+		name: u,
+		renderHiddenInput: E,
+		required: O,
+		value: V,
+		disabled: s,
+		ref: K
+	}), /* @__PURE__ */ b(ne, {
+		...Z,
+		activator: /* @__PURE__ */ b(ue, {
+			append: be,
+			async: Q,
+			disabled: s,
+			error: Ee,
+			id: c,
+			loading: ke,
+			multiSelect: l,
+			multiSelectLimit: se,
+			onChange: d,
+			placeholder: C,
+			prepend: Ce,
+			renderLabel: D,
+			selectedOptionsText: we,
+			setValue: H,
+			setShow: I,
+			show: F,
+			value: V
+		}),
+		align: r,
+		className: e(a, $.root, t.Select),
+		contentClassName: e($.popoverContent),
+		contentStyle: {
+			...Z.contentStyle,
+			p: "none"
+		},
+		matchActivatorWidth: ie,
+		onActivated: Fe,
+		onDeactivated: Ie,
+		ref: W,
+		show: L,
+		type: Pe,
+		virtualFocus: Ne,
+		onBlur: Me,
+		children: /* @__PURE__ */ x("div", {
+			className: $.wrapper,
+			children: [
+				re,
+				/* @__PURE__ */ b(m, {
+					autoHighlight: i,
+					debouncedQuery: Te,
+					error: Ee,
+					initialOptions: J,
+					loading: ke,
+					minSearchLength: Y,
+					multiSelect: l,
+					onChange: d,
+					options: p,
+					query: R,
+					renderOptions: _e,
+					results: De,
+					setQuery: ve,
+					setShow: I,
+					setValue: H,
+					shouldShowInstructions: Ae,
+					shouldShowNoResults: je,
+					show: L,
+					value: V
+				}),
+				ee
+			]
+		})
+	})] });
+});
+E.displayName = "IressSelect";
+//#endregion
+//#region src/components/Autocomplete/Autocomplete.tsx
+var D = h(({ alwaysShowOnFocus: n, append: te = /* @__PURE__ */ b(r, { name: "search" }), autoComplete: ne = "off", autoSelect: ae = !0, className: le, clearable: ue = !0, "data-testid": m, debounceThreshold: de, defaultValue: fe, errorText: pe = /* @__PURE__ */ b(c, {
+	status: "danger",
+	mb: "none",
+	borderRadius: "radius.system.form",
+	children: "An unknown error occurred. Please contact support if the error persists."
+}), initialOptions: h, limitDesktop: me = 12, limitMobile: he = 6, minSearchLength: _, noResultsText: v, onChange: S, onClear: C, onFocus: w, options: T, popoverProps: { autoHighlight: E = !1, append: D, prepend: _e, ...O } = {}, readOnly: k, value: A, ...j }, M) => {
+	let [N, P] = y(!1), { value: F, setValue: I } = ee({
+		component: "IressAutocomplete",
+		defaultValue: fe,
+		value: A
+	}), [L, R] = y(!1), { clearError: ve, debouncedQuery: z, error: B, loading: V, results: H, startSearch: U, stopSearch: ye, shouldShowInstructions: W, shouldShowNoResults: G } = ce({
+		debounceThreshold: de,
+		initialOptions: h,
+		minSearchLength: _,
+		options: T,
+		query: l(F)
+	});
+	if (g(() => {
+		L && !N && H.length > 0 && F && P(!0);
+	}, [
+		H.length,
+		N,
+		L,
+		F
+	]), g(() => {
+		V && L && P(!0);
+	}, [V, L]), g(() => {
+		B && P(!0);
+	}, [B]), k) return /* @__PURE__ */ b(oe, {
+		value: F,
+		variant: k
+	});
+	let K = (e, t) => {
+		S?.(e, t), I(t), R(!!t);
+	}, q = (e) => {
+		C?.(e), I("");
+	}, be = (e) => {
+		w?.(e), h?.length && P(!0);
+	}, xe = (e) => {
+		let t = s(e)?.[0];
+		S?.(u(t?.label), t?.label, t), I(t?.label), P(!1), R(!1);
+	}, J = () => {
+		(!n || !F) && ye(), ve(), P(!1), F && R(!1);
+	}, Y = (e) => {
+		j.onKeyDown?.(e), e.key === "ArrowDown" && (!N || !L) && (H.length || U(!0), R(!0), P(!0));
+	}, X = ie({ isEmpty: H.length === 0 && !V && !B && !W && !G });
+	return /* @__PURE__ */ x(re, {
+		...O,
+		activator: /* @__PURE__ */ b(se, {
+			...j,
+			append: te,
+			autoComplete: ne,
+			clearable: ue,
+			"data-testid": a(m, "input"),
+			onChange: K,
+			onClear: q,
+			onFocus: be,
+			onKeyDown: Y,
+			value: F,
+			ref: M
+		}),
+		autoHighlight: E,
+		className: e(le, O.className, X.root, t.Autocomplete),
+		contentClassName: e(O.contentClassName, X.popoverContent),
+		contentStyle: O.contentStyle,
+		"data-testid": m,
+		minLength: 0,
+		onActivated: () => (L || n) && P(!0),
+		onDeactivated: J,
+		show: N,
+		type: "listbox",
+		focusStartIndex: 0,
+		children: [
+			V && !H.length && /* @__PURE__ */ x(f, {
+				gap: "sm",
+				verticalAlign: "middle",
+				p: "spacing.3",
+				children: [/* @__PURE__ */ b(o, { color: "colour.neutral.70" }), /* @__PURE__ */ b(i, {
+					color: "colour.neutral.70",
+					children: "Loading results..."
+				})]
+			}),
+			H.length > 0 && /* @__PURE__ */ x(ge, { children: [
+				_e,
+				/* @__PURE__ */ b(p, {
+					changeOnBlur: ae,
+					className: e(X.optionList),
+					"data-testid": a(m, "menu"),
+					items: H,
+					limitDesktop: me,
+					limitMobile: he,
+					onChange: xe,
+					selected: { label: z }
+				}),
+				D
+			] }),
+			B && pe,
+			W && !B && /* @__PURE__ */ b(d, { minSearchLength: _ ?? 1 }),
+			G && !B && v
+		]
+	});
+});
+D.displayName = "IressAutocomplete";
+//#endregion
+export { E as n, D as t };