@iress-oss/ids-components 6.0.1 → 6.1.0

package/dist/{useAutocompleteSearch-BJ_hhoKp.js → useAutocompleteSearch-DxKxs6HH.js}

@@ -79,7 +79,7 @@ function l(e, t, r) {
 }
 //#endregion
 //#region src/components/Autocomplete/hooks/useAutocompleteSearch.tsx
-var u = 500, d = 1, f = (e) => e instanceof Error && e.message ? e.message : typeof e == "string" ? e : !0, p = () => {
+var u = 500, d = 1, f = 250, p = (e) => e instanceof Error && e.message ? e.message : typeof e == "string" ? e : !0, m = () => {
 	let [t, r] = o(!1), [i, a] = o(!1), [s, c] = o([]), [l, u] = o(!1);
 	return {
 		loading: t,
@@ -108,58 +108,63 @@ var u = 500, d = 1, f = (e) => e instanceof Error && e.message ? e.message : typ
 			a(!1);
 		}, [])
 	};
-}, m = (e, r) => {
-	let i = a(""), o = n((e) => i.current === e, []), s = n((e) => {
+}, h = (e, r) => {
+	let i = a(""), o = a(null), s = n(() => {
+		o.current &&= (clearTimeout(o.current), null);
+	}, []), c = n((e) => i.current === e, []), l = n((e) => {
 		i.current = e;
 	}, []);
 	return {
 		handleAsync: n(async (t, n, i, a = !1) => {
-			if (o(n) && !a) return;
-			let c = ++r.current;
-			if (s(n), n.length >= i || a) {
-				e.setLoadingState(!0), e.clearErrorState();
+			if (c(n) && !a) return;
+			let u = ++r.current;
+			if (l(n), n.length >= i || a) {
+				s(), e.clearErrorState(), o.current = setTimeout(() => {
+					e.setLoadingState(!0);
+				}, f);
 				try {
 					let i = await t(n);
-					if (c !== r.current) return;
-					e.setSearched(!0), e.updateWithResults(i, n);
+					if (u !== r.current) return;
+					s(), e.setSearched(!0), e.updateWithResults(i, n);
 				} catch (t) {
-					if (c !== r.current) return;
-					e.setSearched(!0), e.updateWithError(f(t));
+					if (u !== r.current) return;
+					s(), e.setSearched(!0), e.updateWithError(p(t));
 				}
-			} else e.reset();
+			} else s(), e.reset();
 		}, [
 			e,
-			o,
-			s,
-			r
+			c,
+			l,
+			r,
+			s
 		]),
 		handleSync: n((n, r, i, a = !1) => {
-			if (!(o(r) && !a)) if (s(r), r.length >= i || a) {
+			if (!(c(r) && !a)) if (l(r), r.length >= i || a) {
 				e.setSearched(!0);
 				let i = t(r, n);
 				e.updateWithResults(i, r);
 			} else e.reset();
 		}, [
 			e,
-			o,
-			s
+			c,
+			l
 		])
 	};
-}, h = ({ debounceThreshold: e = u, disabled: t = !1, initialOptions: i = [], minSearchLength: o = d, options: s = [], query: c = "" }) => {
-	let f = p(), h = m(f, a(0)), [g] = l(c, e), _ = n((e = !1) => {
+}, g = ({ debounceThreshold: e = u, disabled: t = !1, initialOptions: i = [], minSearchLength: o = d, options: s = [], query: c = "" }) => {
+	let f = m(), p = h(f, a(0)), [g] = l(c, e), _ = n((e = !1) => {
 		if (!t) {
 			if (typeof s == "function") {
-				h.handleAsync(s, g, o, e);
+				p.handleAsync(s, g, o, e);
 				return;
 			}
-			h.handleSync(s, g, o, e);
+			p.handleSync(s, g, o, e);
 		}
 	}, [
 		t,
 		g,
 		o,
 		s,
-		h
+		p
 	]);
 	r(() => {
 		t || _();
@@ -179,4 +184,4 @@ var u = 500, d = 1, f = (e) => e instanceof Error && e.message ? e.message : typ
 	};
 };
 //#endregion
-export { h as t };
+export { g as t };

package/package.json

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

package/dist/Autocomplete-CuUjmIAw.js

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