@maanlamp/react-web-ui 0.0.0-stage → 0.1.1

package/dist/components/combobox-field/combobox-items.js

@@ -0,0 +1,27 @@
+import { OPTIONS_LOADED, optionsLoad } from "../field/options-load.js";
+// src/components/combobox-field/combobox-items.ts
+/**
+* The items of a source, as far as they have loaded.
+*
+* @example
+* itemsOf({ items: ["a", "b"] }); // ["a", "b"]
+*/
+var itemsOf = (source) => source.query === void 0 ? source.items : source.query.data?.pages.flatMap((page) => page.items ?? []) ?? [];
+/**
+* The load of a source: a list's own `load`, or the paged query's.
+*
+* @example
+* loadOf({ items: statuses }, () => true); // { status: "success" }
+*/
+var loadOf = (source, retryable) => source.query === void 0 ? source.load ?? OPTIONS_LOADED : optionsLoad(source.query, retryable);
+/**
+* A paged query's progress once it holds data, else nothing.
+*
+* @example
+* pagedProgress({ items: statuses }); // undefined
+*/
+var pagedProgress = (source) => source.query?.data === void 0 ? void 0 : {
+	totalCount: source.query.data.pages.at(0)?.totalCount,
+	isFetchingNextPage: source.query.isFetchingNextPage
+};
+export { itemsOf, loadOf, pagedProgress };

package/dist/components/combobox-field/combobox-popup-body.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from "react";
+import { type OptionsLoad, type OptionsLoadLabels } from "../field/index.ts";
+import type { PagedProgress, PagedQuery } from "./combobox-items.ts";
+/** The copy a combobox's popup shows about its options. */
+export type ComboboxPopupLabels = OptionsLoadLabels & Readonly<{
+    /** Shown when the search matches nothing. */
+    noResultsLabel: string;
+    /** The search box's accessible name, such as "Search". */
+    searchLabel: string;
+    /** Read while a paged query fetches its next page. */
+    loadingMoreLabel: string;
+    /** The match count of a paged query, such as "40 results". */
+    resultsLabel: (count: number) => string;
+}>;
+type ComboboxPopupBodyProps<TItem> = Readonly<{
+    copy: ComboboxPopupLabels;
+    load: OptionsLoad;
+    paged: PagedProgress | undefined;
+    pagedQuery: PagedQuery<TItem> | undefined;
+    noOptions: boolean;
+    multiple: boolean;
+    itemKey: (item: TItem) => string;
+    renderItem: (item: TItem) => ReactNode;
+}>;
+/**
+ * What a combobox field's popup holds: the search box, the load status with a
+ * retry where one can help, the empty state and the list, which loads the next
+ * page of a paged query as it nears its end.
+ *
+ * @example
+ * <ComboboxPopupBody copy={copy} load={load} … />
+ */
+export declare const ComboboxPopupBody: <TItem>({ copy, load, paged, pagedQuery, noOptions, multiple, itemKey, renderItem, }: ComboboxPopupBodyProps<TItem>) => ReactNode;
+export {};
+//# sourceMappingURL=combobox-popup-body.d.ts.map

package/dist/components/combobox-field/combobox-popup-body.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-popup-body.d.ts","sourceRoot":"","sources":["../../../src/components/combobox-field/combobox-popup-body.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAG/C,OAAO,EACN,KAAK,WAAW,EAChB,KAAK,iBAAiB,EAEtB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAAK,EACX,aAAa,EACb,UAAU,EACV,MAAM,qBAAqB,CAAC;AAE7B,2DAA2D;AAC3D,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,GAClD,QAAQ,CAAC;IACR,6CAA6C;IAC7C,cAAc,EAAE,MAAM,CAAC;IACvB,0DAA0D;IAC1D,WAAW,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,gBAAgB,EAAE,MAAM,CAAC;IACzB,8DAA8D;IAC9D,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACxC,CAAC,CAAC;AAmBJ,KAAK,sBAAsB,CAAC,KAAK,IAAI,QAAQ,CAAC;IAC7C,IAAI,EAAE,mBAAmB,CAAC;IAC1B,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,aAAa,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE,UAAU,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC;IACjC,UAAU,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,SAAS,CAAC;CACvC,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,GAAI,KAAK,gFASpC,sBAAsB,CAAC,KAAK,CAAC,KAAG,SA8DlC,CAAC"}

package/dist/components/combobox-field/combobox-popup-body.js

@@ -0,0 +1,142 @@
+import { useInfiniteScroll } from "../../lib/use-infinite-scroll.js";
+import { Button } from "../button/button.js";
+import { optionsLoadMessage } from "../field/options-load.js";
+import { Spinner } from "../spinner/spinner.js";
+import { Combobox } from "./combobox.js";
+import { c } from "react/compiler-runtime";
+import { useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/components/combobox-field/combobox-popup-body.tsx
+var statusMessage = (copy, load, paged) => {
+	const loadMessage = optionsLoadMessage(load, copy);
+	if (loadMessage !== void 0 || paged === void 0) return loadMessage;
+	if (paged.isFetchingNextPage) return copy.loadingMoreLabel;
+	return paged.totalCount === void 0 ? void 0 : copy.resultsLabel(paged.totalCount);
+};
+/**
+* What a combobox field's popup holds: the search box, the load status with a
+* retry where one can help, the empty state and the list, which loads the next
+* page of a paged query as it nears its end.
+*
+* @example
+* <ComboboxPopupBody copy={copy} load={load} … />
+*/
+var ComboboxPopupBody = (t0) => {
+	const $ = c(34);
+	const { copy, load, paged, pagedQuery, noOptions, multiple, itemKey, renderItem } = t0;
+	const listRef = useRef(null);
+	const searchRef = useRef(null);
+	const retry = load.status === "error" ? load.retry : void 0;
+	const t1 = pagedQuery !== void 0 && pagedQuery.hasNextPage && !pagedQuery.isFetchingNextPage;
+	let t2;
+	if ($[0] !== pagedQuery) {
+		t2 = () => {
+			pagedQuery?.fetchNextPage();
+		};
+		$[0] = pagedQuery;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== t1 || $[3] !== t2) {
+		t3 = {
+			ref: listRef,
+			enabled: t1,
+			onLoadMore: t2
+		};
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+	} else t3 = $[4];
+	useInfiniteScroll(t3);
+	let t4;
+	if ($[5] !== copy.searchLabel) {
+		t4 = /* @__PURE__ */ jsx(Combobox.Search, {
+			ref: searchRef,
+			label: copy.searchLabel
+		});
+		$[5] = copy.searchLabel;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== load.status || $[8] !== paged?.isFetchingNextPage) {
+		t5 = (load.status === "pending" || paged?.isFetchingNextPage === true) && /* @__PURE__ */ jsx(Spinner, { size: 1 });
+		$[7] = load.status;
+		$[8] = paged?.isFetchingNextPage;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== copy || $[11] !== load || $[12] !== paged) {
+		t6 = statusMessage(copy, load, paged);
+		$[10] = copy;
+		$[11] = load;
+		$[12] = paged;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t5 || $[15] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Combobox.Status, { children: [t5, t6] });
+		$[14] = t5;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== copy.retryLabel || $[18] !== retry) {
+		t8 = retry !== void 0 && /* @__PURE__ */ jsx(Button, {
+			variant: "tertiary",
+			size: "sm",
+			onClick: () => {
+				retry();
+				searchRef.current?.focus();
+			},
+			children: copy.retryLabel
+		});
+		$[17] = copy.retryLabel;
+		$[18] = retry;
+		$[19] = t8;
+	} else t8 = $[19];
+	let t9;
+	if ($[20] !== t7 || $[21] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Combobox.StatusArea, { children: [t7, t8] });
+		$[20] = t7;
+		$[21] = t8;
+		$[22] = t9;
+	} else t9 = $[22];
+	const t10 = load.status === "success" ? noOptions ? copy.noOptionsLabel : copy.noResultsLabel : null;
+	let t11;
+	if ($[23] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Combobox.Empty, { children: t10 });
+		$[23] = t10;
+		$[24] = t11;
+	} else t11 = $[24];
+	let t12;
+	if ($[25] !== itemKey || $[26] !== multiple || $[27] !== renderItem) {
+		t12 = /* @__PURE__ */ jsx(Combobox.List, {
+			ref: listRef,
+			children: (item) => /* @__PURE__ */ jsx(Combobox.Option, {
+				value: item,
+				multiple,
+				children: renderItem(item)
+			}, itemKey(item))
+		});
+		$[25] = itemKey;
+		$[26] = multiple;
+		$[27] = renderItem;
+		$[28] = t12;
+	} else t12 = $[28];
+	let t13;
+	if ($[29] !== t11 || $[30] !== t12 || $[31] !== t4 || $[32] !== t9) {
+		t13 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			t4,
+			t9,
+			t11,
+			t12
+		] });
+		$[29] = t11;
+		$[30] = t12;
+		$[31] = t4;
+		$[32] = t9;
+		$[33] = t13;
+	} else t13 = $[33];
+	return t13;
+};
+export { ComboboxPopupBody };