@box/combobox-with-api 1.42.32 → 1.42.34

package/dist/chunks/combobox-with-api-error.js

@@ -0,0 +1,18 @@
+import e from "../esm/lib/components/combobox-with-api/messages.js";
+import { Combobox as t, Text as n } from "@box/blueprint-web";
+import { forwardRef as r } from "react";
+import { FormattedMessage as i } from "react-intl";
+import { jsx as a } from "react/jsx-runtime";
+import '../styles/combobox-with-api-error.css';var o = { container: "_container_1ozsi_1" }, s = /* @__PURE__ */ r(({ onTryAgain: r }, s) => /* @__PURE__ */ a(t.Option, {
+	onClick: r,
+	children: /* @__PURE__ */ a("div", {
+		ref: s,
+		className: o.container,
+		children: /* @__PURE__ */ a(n, {
+			as: "span",
+			color: "textOnLightLink",
+			children: /* @__PURE__ */ a(i, { ...e.loadingResultsError })
+		})
+	})
+}));
+export { s as t };

package/dist/chunks/combobox-with-api-pagination.js

@@ -0,0 +1,168 @@
+import e from "../esm/lib/components/combobox-with-api-pagination/messages.js";
+import { useAsyncList as t } from "../esm/lib/components/combobox-with-api-pagination/use-async-list.js";
+import { useControllableState as n } from "../esm/lib/components/combobox-with-api-pagination/utils/use-controllable-state.js";
+import { useTrackVisibility as r } from "../esm/lib/components/combobox-with-api-pagination/utils/use-intersection-observer.js";
+import { ComboboxItemValue as ee } from "@ariakit/react";
+import { Combobox as i, InlineNotice as a, LoadingIndicator as o, Text as s, useForkRef as c } from "@box/blueprint-web";
+import { Loader as l, Search as u } from "@box/blueprint-web-assets/icons/Fill";
+import { IconIconOnLightSecondary as d, Size1 as f, Size6 as p } from "@box/blueprint-web-assets/tokens/tokens";
+import m from "clsx";
+import { forwardRef as h, useCallback as g, useEffect as _, useMemo as v, useRef as y, useState as b } from "react";
+import { FormattedMessage as x, useIntl as S } from "react-intl";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+import '../styles/combobox-with-api-pagination.css';var E = {
+	container: "_container_19k3s_2",
+	disabled: "_disabled_19k3s_8",
+	highlightOptionText: "_highlightOptionText_19k3s_12",
+	selected: "_selected_19k3s_24",
+	option: "_option_19k3s_35",
+	errorComboboxOption: "_errorComboboxOption_19k3s_39",
+	errorComboboxOptionText: "_errorComboboxOptionText_19k3s_44"
+}, D = /* @__PURE__ */ h(({ onTryAgain: t }, n) => {
+	let { formatMessage: r } = S();
+	return /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ w(a, {
+		variant: "error",
+		variantIconAriaLabel: r(e.loadingResultsErrorIconLabel),
+		children: /* @__PURE__ */ w(x, { ...e.loadingResultsErrorMessage })
+	}), /* @__PURE__ */ w(i.Option, {
+		ref: n,
+		className: E.errorComboboxOption,
+		onClick: t,
+		children: /* @__PURE__ */ T(s, {
+			as: "span",
+			className: E.errorComboboxOptionText,
+			color: "textOnLightLink",
+			variant: "bodyDefaultBold",
+			children: [/* @__PURE__ */ w(x, { ...e.loadingResultsErrorAction }), /* @__PURE__ */ w(l, {
+				color: "currentColor",
+				height: "12px",
+				width: "12px"
+			})]
+		})
+	})] });
+}), O = "__LOADING__", k = "__LOADING_ERROR__", te = "0px 0px 20px 0px", ne = /* @__PURE__ */ w(u, {
+	color: d,
+	height: p,
+	role: "presentation",
+	style: {
+		padding: f,
+		boxSizing: "border-box"
+	},
+	width: p
+}), A = /* @__PURE__ */ h(function(a, s) {
+	let { dataTargetId: l, defaultFetcher: u, initialOpen: d = !1, onInputValueChange: f, value: p, onValueChange: h, onOpenChange: x, noResultMessage: C, defaultValue: T = [], loadingAriaLabel: A, multiselect: j = !1, disabled: M, className: N, displaySingleSelectionAsChip: P = !0, ...re } = a, { formatMessage: F } = S(), I = y(null), L = y(!0), [R, z] = b(d), B = t({ async load({ marker: e, searchInput: t, signal: n }) {
+		let r = await u({
+			signal: n,
+			marker: e,
+			searchInput: t
+		});
+		return {
+			items: r.options,
+			marker: r.marker
+		};
+	} }), V = y(!1), H = g(() => {
+		V.current ||= (B.reload(), !0);
+	}, []), [U, W] = n({
+		prop: p,
+		defaultProp: T,
+		onChange: h
+	}), G = !j && U.length === 1, K = G && !M, q = g((e) => {
+		z(e), x?.(e);
+	}, [x]), J = (e) => {
+		M || (e === void 0 ? (W([]), (!L.current || !P) && (B.search(""), L.current = !0)) : Array.isArray(e) ? W(e) : (W([e]), j || (z(!1), x?.(!1))));
+	}, Y = v(() => U.length === 0 ? j ? [] : void 0 : j ? U : U[0], [j, U]), X = v(() => U.filter((e) => !B.items.some((t) => t.value === e.value)), [U, B.items]), ie = (t) => {
+		let { value: n, displayValue: r, ...a } = t;
+		if (n === O) return B.hasNextPage ? /* @__PURE__ */ w(i.Option, {
+			...a,
+			ref: oe,
+			disabled: !0,
+			value: n,
+			children: /* @__PURE__ */ w(o, {
+				"aria-label": F(e.loadingMoreAriaLabel),
+				style: { position: "unset" }
+			})
+		}) : null;
+		if (n === k && B.hasError && !B.isEmpty) return /* @__PURE__ */ w(D, { onTryAgain: () => {
+			B.loadMore(), I.current?.focus();
+		} });
+		if (X.some((e) => e.value === n)) return null;
+		let s = U.some((e) => e.value === n);
+		return /* @__PURE__ */ w(i.Option, {
+			...a,
+			className: E.option,
+			value: n,
+			children: /* @__PURE__ */ w(ee, {
+				className: m(E.highlightOptionText, s && E.selected),
+				value: r || n
+			})
+		});
+	}, Z = (e) => {
+		if (f?.(e), G && e === "") {
+			L.current = !1;
+			return;
+		}
+		B.search(e);
+	}, ae = () => {
+		B.reload(), I.current?.focus();
+	}, Q;
+	Q = B.hasError && !B.isLoading ? /* @__PURE__ */ w(D, { onTryAgain: ae }) : B.isEmpty && !B.isLoading ? C || F(e.noResults) : void 0;
+	let [oe, { rootRef: se, isVisible: $ }] = r({ rootMargin: te });
+	_(() => {
+		if (!($ && B.hasNextPage)) return;
+		let e = setTimeout(() => {
+			B.loadMore();
+		}, 100);
+		return () => {
+			clearTimeout(e);
+		};
+	}, [$]);
+	let ce = v(() => {
+		let e = B.hasNextPage ? {
+			displayValue: O,
+			value: O
+		} : null, t = !e && B.hasError && !B.isEmpty ? {
+			displayValue: k,
+			value: k
+		} : null;
+		return [
+			...B.items,
+			...X,
+			e,
+			t
+		].filter(Boolean);
+	}, [
+		B.hasNextPage,
+		B.hasError,
+		B.isEmpty,
+		B.items,
+		X
+	]);
+	return /* @__PURE__ */ w(i, {
+		...re,
+		ref: c(I, s),
+		as: "input",
+		className: m(N, { [E.disabled]: K }),
+		clearButtonAriaLabel: F(e.clearButtonAriaLabel),
+		clearOnBlur: !1,
+		"data-target-id": l,
+		disabled: M || G && P,
+		displaySingleSelectionAsChip: P,
+		displayValue: (e) => e.displayValue || e.value,
+		endComboboxIcon: ne,
+		focusLoop: !1,
+		getPopoverRef: se,
+		loading: B.isReloading,
+		loadingAriaLabel: A || F(e.loadingAriaLabel),
+		multiselect: j,
+		noResultMessage: Q,
+		onFocus: H,
+		onInputValueChange: Z,
+		onOpenChange: q,
+		onValueChange: J,
+		open: R,
+		options: ce,
+		renderOption: ie,
+		value: Y
+	});
+});
+export { A as t };

package/dist/chunks/combobox-with-api-pagination2.js

@@ -0,0 +1,229 @@
+function e(e) {
+	return {
+		marker: e.marker,
+		options: e.options.map(({ value: e, displayValue: t }) => t ? {
+			displayValue: t,
+			value: e
+		} : { value: e })
+	};
+}
+var t = [
+	{
+		value: "0",
+		displayValue: "Alabama"
+	},
+	{
+		value: "1",
+		displayValue: "Alaska"
+	},
+	{
+		value: "2",
+		displayValue: "Arizona"
+	},
+	{
+		value: "3",
+		displayValue: "Arkansas"
+	},
+	{
+		value: "4",
+		displayValue: "California"
+	},
+	{
+		value: "5",
+		displayValue: "Colorado"
+	},
+	{
+		value: "6",
+		displayValue: "Connecticut"
+	},
+	{
+		value: "7",
+		displayValue: "Delaware"
+	},
+	{
+		value: "8",
+		displayValue: "Florida"
+	},
+	{
+		value: "9",
+		displayValue: "Georgia"
+	},
+	{
+		value: "10",
+		displayValue: "Hawaii"
+	},
+	{
+		value: "11",
+		displayValue: "Idaho"
+	},
+	{
+		value: "12",
+		displayValue: "Illinois"
+	},
+	{
+		value: "13",
+		displayValue: "Indiana"
+	},
+	{
+		value: "14",
+		displayValue: "Iowa"
+	},
+	{
+		value: "15",
+		displayValue: "Kansas"
+	},
+	{
+		value: "16",
+		displayValue: "Kentucky"
+	},
+	{
+		value: "17",
+		displayValue: "Louisiana"
+	},
+	{
+		value: "18",
+		displayValue: "Maine"
+	},
+	{
+		value: "19",
+		displayValue: "Maryland"
+	},
+	{
+		value: "20",
+		displayValue: "Massachusetts"
+	},
+	{
+		value: "21",
+		displayValue: "Michigan"
+	},
+	{
+		value: "22",
+		displayValue: "Minnesota"
+	},
+	{
+		value: "23",
+		displayValue: "Mississippi"
+	},
+	{
+		value: "24",
+		displayValue: "Missouri"
+	},
+	{
+		value: "25",
+		displayValue: "Montana"
+	},
+	{
+		value: "26",
+		displayValue: "Nebraska"
+	},
+	{
+		value: "27",
+		displayValue: "Nevada"
+	},
+	{
+		value: "28",
+		displayValue: "New Hampshire"
+	},
+	{
+		value: "29",
+		displayValue: "New Jersey"
+	},
+	{
+		value: "30",
+		displayValue: "New Mexico"
+	},
+	{
+		value: "31",
+		displayValue: "New York"
+	},
+	{
+		value: "32",
+		displayValue: "North Carolina"
+	},
+	{
+		value: "33",
+		displayValue: "North Dakota"
+	},
+	{
+		value: "34",
+		displayValue: "Ohio"
+	},
+	{
+		value: "35",
+		displayValue: "Oklahoma"
+	},
+	{
+		value: "36",
+		displayValue: "Oregon"
+	},
+	{
+		value: "37",
+		displayValue: "Pennsylvania"
+	},
+	{
+		value: "38",
+		displayValue: "Rhode Island"
+	},
+	{
+		value: "39",
+		displayValue: "South Carolina"
+	},
+	{
+		value: "40",
+		displayValue: "South Dakota"
+	},
+	{
+		value: "41",
+		displayValue: "Tennessee"
+	},
+	{
+		value: "42",
+		displayValue: "Texas"
+	},
+	{
+		value: "43",
+		displayValue: "Utah"
+	},
+	{
+		value: "44",
+		displayValue: "Vermont"
+	},
+	{
+		value: "45",
+		displayValue: "Virginia"
+	},
+	{
+		value: "46",
+		displayValue: "Washington"
+	},
+	{
+		value: "47",
+		displayValue: "West Virginia"
+	},
+	{
+		value: "48",
+		displayValue: "Wisconsin"
+	},
+	{
+		value: "49",
+		displayValue: "Wyoming"
+	}
+], n = (e) => t.find((t) => t.displayValue === e), r = 10, i = (e, t) => {
+	let n = (parseInt(e, 10) || 0) * r, i = n + r;
+	return t.slice(n, i).map(({ displayValue: e, value: t }) => ({
+		displayValue: e,
+		value: t
+	}));
+}, a = (e, t) => (parseInt(e, 10) || 0) * r + r < t.length ? ((parseInt(e, 10) || 0) + 1).toString() : void 0, o = (() => {
+	let n = 0;
+	return async ({ delay: r, signal: o, searchInput: s, marker: c, failOnLoadMore: l, failOnLoadMoreTimes: u = 2 ** 53 - 1, options: d = t }) => {
+		if (r && await new Promise((e) => setTimeout(e, r)), o.aborted) return Promise.reject(new DOMException("Aborted", "AbortError"));
+		if (l && c != null && n < u) return n += 1, Promise.reject();
+		let f = d.filter(({ displayValue: e, value: t }) => e ? e.toLowerCase().includes(s.toLowerCase()) : t.toLowerCase().includes(s.toLowerCase()));
+		return e(await Promise.resolve({
+			marker: a(c, f),
+			options: i(c, f)
+		}));
+	};
+})();
+export { o as n, t as r, n as t };