@panneau/lists 5.0.0-alpha.1 → 5.0.0-alpha.10

package/dist/ListView.js

@@ -2,23 +2,26 @@ import { getActionHref, groupListActions, hasScope, isAllowedOn } from "./action
 import { messages } from "./messages.js";
 import { ConfirmDialog, needsConfirmation } from "./actions/ConfirmDialog.js";
 import { getColumnValue, toText } from "./values.js";
-import { builtInDisplays } from "./displays/displays.js";
 import { cx } from "./cx.js";
 import { builtInLayouts } from "./layouts/builtIn.js";
+import { useRenderValue } from "./useRenderValue.js";
+import { ListSkeleton } from "./ListSkeleton.js";
 import ListView_module_default from "./ListView.module.js";
 import { ActionButton } from "./actions/ActionButton.js";
 import { RowActions } from "./actions/RowActions.js";
 import { FilterChips, FilterControls, useFilterLabels } from "./filters/Filters.js";
 import { countSelected, getPageSelection, isItemSelected } from "./selection.js";
 import { LayoutSwitch } from "./toolbar/LayoutSwitch.js";
-import { Pagination } from "./toolbar/Pagination.js";
+import { CursorPagination, Pagination } from "./toolbar/Pagination.js";
 import { SearchField } from "./toolbar/SearchField.js";
 import { SortSelect } from "./toolbar/SortSelect.js";
 import { useListState } from "./useListState.js";
-import { usePlugins } from "@panneau/core";
-import { Alert, Button, Checkbox, Spinner, usePanneauIntl, useToast } from "@panneau/ui";
+import { selectItemActions, usePlugins } from "@panneau/core";
+import { c } from "react/compiler-runtime";
+import { getActionLabel } from "@panneau/intl";
+import { Alert, Button, Checkbox, usePanneauIntl, useToast } from "@panneau/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useRef, useState } from "react";
 //#region src/ListView.tsx
 function keyOf(action, item) {
 	return item !== void 0 ? `${action.id}\u0000${item.id}` : action.id;
@@ -28,7 +31,34 @@ function keyOf(action, item) {
 * cards), with sorting, search, filters and their chips, pagination, selection and actions. It
 * fetches nothing: the caller gives the items of the list's query and their total.
 */
-function ListView({ list, items, columns, total, isLoading = false, error = null, onRetry, filters = [], fields = [], search = false, layouts: layoutsProp = ["table"], layout: controlledLayout, onLayoutChange, perPageOptions, selectable: selectableProp, actions: actionsProp, onAction, actionIcons, itemTitle, getItemLabel: getItemLabelProp, getItemHref, displays, layoutComponents, filterControls, toolbar, emptyMessage, "aria-label": ariaLabel, className }) {
+function ListView(t0) {
+	const $ = c(120);
+	const { list, items, columns, total, cursors, isLoading: t1, error: t2, onRetry, filters: t3, fields: t4, search: t5, layouts: t6, layout: controlledLayout, onLayoutChange, perPageOptions, selectable: selectableProp, actions: actionsProp, onAction, previewAction, actionIcons, itemTitle, getItemLabel: getItemLabelProp, getItemHref, getLinkHref, currentItemId: t7, displays, layoutComponents, filterControls, toolbar, emptyMessage, "aria-label": ariaLabel, className } = t0;
+	const isLoading = t1 === void 0 ? false : t1;
+	const error = t2 === void 0 ? null : t2;
+	let t8;
+	if ($[0] !== t3) {
+		t8 = t3 === void 0 ? [] : t3;
+		$[0] = t3;
+		$[1] = t8;
+	} else t8 = $[1];
+	const filters = t8;
+	let t9;
+	if ($[2] !== t4) {
+		t9 = t4 === void 0 ? [] : t4;
+		$[2] = t4;
+		$[3] = t9;
+	} else t9 = $[3];
+	const fields = t9;
+	const search = t5 === void 0 ? false : t5;
+	let t10;
+	if ($[4] !== t6) {
+		t10 = t6 === void 0 ? ["table"] : t6;
+		$[4] = t6;
+		$[5] = t10;
+	} else t10 = $[5];
+	const layoutsProp = t10;
+	const currentItemId = t7 === void 0 ? null : t7;
 	const intl = usePanneauIntl();
 	const toasts = useToast();
 	const plugins = usePlugins();
@@ -36,288 +66,591 @@ function ListView({ list, items, columns, total, isLoading = false, error = null
 	const filterLabels = useFilterLabels();
 	const [uncontrolledLayout, setLayout] = useState(null);
 	const [confirming, setConfirming] = useState(null);
+	const [preview, setPreview] = useState(null);
+	const confirmation = useRef(0);
 	const [pending, setPending] = useState(null);
-	const label = ariaLabel ?? intl.formatMessage(messages.list);
+	let t11;
+	if ($[6] !== ariaLabel || $[7] !== intl) {
+		t11 = ariaLabel ?? intl.formatMessage(messages.list);
+		$[6] = ariaLabel;
+		$[7] = intl;
+		$[8] = t11;
+	} else t11 = $[8];
+	const label = t11;
 	const pageItems = items ?? [];
 	const count = total ?? pageItems.length;
-	const sort = query.sort ?? [];
-	const filterValues = query.filter ?? {};
-	const hasQuery = Object.keys(filterValues).length > 0 || (query.q ?? "") !== "";
-	const allDisplays = {
-		...builtInDisplays,
-		...Object.fromEntries(plugins.displays),
-		...displays
-	};
-	const allLayouts = {
-		...builtInLayouts,
-		...Object.fromEntries(plugins.listLayouts),
-		...layoutComponents
-	};
-	const available = layoutsProp.filter((id) => allLayouts[id] !== void 0);
-	const layouts = available.length > 0 ? available : ["table"];
+	let t12;
+	if ($[9] !== query.sort) {
+		t12 = query.sort ?? [];
+		$[9] = query.sort;
+		$[10] = t12;
+	} else t12 = $[10];
+	const sort = t12;
+	let t13;
+	if ($[11] !== query.filter) {
+		t13 = query.filter ?? {};
+		$[11] = query.filter;
+		$[12] = t13;
+	} else t13 = $[12];
+	const filterValues = t13;
+	let t14;
+	if ($[13] !== filterValues || $[14] !== query.q) {
+		t14 = Object.keys(filterValues).length > 0 || (query.q ?? "") !== "";
+		$[13] = filterValues;
+		$[14] = query.q;
+		$[15] = t14;
+	} else t14 = $[15];
+	const hasQuery = t14;
+	let t15;
+	if ($[16] !== plugins.listLayouts) {
+		t15 = Object.fromEntries(plugins.listLayouts);
+		$[16] = plugins.listLayouts;
+		$[17] = t15;
+	} else t15 = $[17];
+	const t16 = t15;
+	let t17;
+	if ($[18] !== layoutComponents || $[19] !== t16) {
+		t17 = {
+			...builtInLayouts,
+			...t16,
+			...layoutComponents
+		};
+		$[18] = layoutComponents;
+		$[19] = t16;
+		$[20] = t17;
+	} else t17 = $[20];
+	const allLayouts = t17;
+	let t18;
+	if ($[21] !== allLayouts || $[22] !== layoutsProp) {
+		let t19;
+		if ($[24] !== allLayouts) {
+			t19 = (id) => allLayouts[id] !== void 0;
+			$[24] = allLayouts;
+			$[25] = t19;
+		} else t19 = $[25];
+		t18 = layoutsProp.filter(t19);
+		$[21] = allLayouts;
+		$[22] = layoutsProp;
+		$[23] = t18;
+	} else t18 = $[23];
+	const available = t18;
+	let t19;
+	if ($[26] !== available) {
+		t19 = available.length > 0 ? available : ["table"];
+		$[26] = available;
+		$[27] = t19;
+	} else t19 = $[27];
+	const layouts = t19;
 	const layout = controlledLayout ?? uncontrolledLayout ?? layouts[0] ?? "table";
 	const Layout = allLayouts[layout] ?? builtInLayouts.table;
 	const grouped = groupListActions(actionsProp);
-	const rowActions = grouped.row.filter((action) => hasScope(action, "item"));
-	const rowMenu = grouped.menu.filter((action_0) => hasScope(action_0, "item"));
-	const toolbarActions = [...grouped.toolbar, ...grouped.menu].filter((action_1, index, all) => (hasScope(action_1, "selection") || hasScope(action_1, "resource")) && all.findIndex((candidate) => candidate.id === action_1.id) === index);
-	const selectionActions = toolbarActions.filter((action_2) => hasScope(action_2, "selection"));
-	const resourceActions = toolbarActions.filter((action_3) => hasScope(action_3, "resource"));
+	const toolbarActions = [...grouped.toolbar, ...grouped.menu].filter(_temp);
+	const selectionActions = toolbarActions.filter(_temp2);
+	const resourceActions = toolbarActions.filter(_temp3);
 	const selectable = selectableProp ?? selectionActions.length > 0;
 	const selectedCount = selectable ? countSelected(selection, count) : 0;
-	const selectedItems = pageItems.filter((item) => isItemSelected(selection, item.id));
+	let t20;
+	if ($[28] !== selection) {
+		t20 = (item) => isItemSelected(selection, item.id);
+		$[28] = selection;
+		$[29] = t20;
+	} else t20 = $[29];
+	const selectedItems = pageItems.filter(t20);
 	const pageSelection = getPageSelection(selection, pageItems);
-	const getItemLabel = (item_0) => {
-		if (getItemLabelProp !== void 0) return getItemLabelProp(item_0);
-		const titleColumn = columns.find((column) => column.id === itemTitle) ?? (itemTitle === void 0 ? columns[0] : void 0);
-		const title = titleColumn !== void 0 ? toText(getColumnValue(item_0, titleColumn, intl.locale), intl.locale) : itemTitle !== void 0 ? toText(item_0[itemTitle], intl.locale) : "";
-		return title !== "" ? title : item_0.id;
-	};
-	const renderValue = (item_1, column_0) => {
-		if (column_0.render !== void 0) return column_0.render(item_1);
-		const Display = (column_0.display !== void 0 && column_0.display !== null ? allDisplays[column_0.display] : void 0) ?? builtInDisplays.text;
-		if (Display === void 0) return null;
-		return /* @__PURE__ */ jsx(Display, {
-			value: getColumnValue(item_1, column_0, intl.locale),
-			item: item_1,
-			column: column_0,
-			field: column_0.field ?? null
-		});
+	let t21;
+	if ($[30] !== columns || $[31] !== getItemLabelProp || $[32] !== intl.locale || $[33] !== itemTitle) {
+		t21 = (item_0) => {
+			if (getItemLabelProp !== void 0) return getItemLabelProp(item_0);
+			const titleColumn = columns.find((column) => column.id === itemTitle) ?? (itemTitle === void 0 ? columns[0] : void 0);
+			const title = titleColumn !== void 0 ? toText(getColumnValue(item_0, titleColumn, intl.locale), intl.locale) : itemTitle !== void 0 ? toText(item_0[itemTitle], intl.locale) : "";
+			return title !== "" ? title : item_0.id;
+		};
+		$[30] = columns;
+		$[31] = getItemLabelProp;
+		$[32] = intl.locale;
+		$[33] = itemTitle;
+		$[34] = t21;
+	} else t21 = $[34];
+	const getItemLabel = t21;
+	const renderValue = useRenderValue(displays);
+	const closeConfirmation = () => {
+		confirmation.current = confirmation.current + 1;
+		setConfirming(null);
+		setPreview(null);
 	};
 	const execute = async (event) => {
-		setConfirming(null);
+		closeConfirmation();
 		setPending(keyOf(event.action, event.item));
-		try {
-			const outcome = await onAction?.(event);
+		await Promise.resolve().then(() => onAction?.(event)).then((outcome) => {
 			if (event.scope === "selection" && outcome !== false) list.clearSelection();
-		} catch (caught) {
+		}).catch((caught) => {
 			toasts.show({
-				title: intl.formatMessage(messages.actionFailed, { action: event.action.label }),
+				title: intl.formatMessage(messages.actionFailed, { action: getActionLabel(event.action, intl) }),
 				...caught instanceof Error && caught.message !== "" ? { description: caught.message } : {},
 				tone: "danger"
 			});
-		} finally {
-			setPending(null);
-		}
+		});
+		setPending(null);
 	};
 	const run = (event_0) => {
+		const { action: action_2, selection: selection_0 } = event_0;
+		if (previewAction !== void 0 && action_2.dryRun === true && selection_0 !== void 0 && "query" in selection_0) {
+			const current = confirmation.current = confirmation.current + 1;
+			const asks = action_2.confirm !== void 0 && action_2.confirm !== false;
+			setConfirming(event_0);
+			setPreview({ status: "loading" });
+			previewAction(event_0).then((result) => {
+				if (confirmation.current !== current) return;
+				if ((result?.skipped ?? event_0.skipped.length) === 0 && !asks) execute(event_0);
+				else setPreview(result !== null ? {
+					status: "done",
+					...result
+				} : null);
+			}, () => {
+				if (confirmation.current !== current) return;
+				if (needsConfirmation(event_0)) setPreview(null);
+				else execute(event_0);
+			});
+			return;
+		}
 		if (needsConfirmation(event_0)) setConfirming(event_0);
 		else execute(event_0);
 	};
-	const runOnItem = (action_4, item_2) => run({
-		action: action_4,
+	const runOnItem = (action_3, item_1) => run({
+		action: action_3,
 		scope: "item",
-		item: item_2,
+		item: item_1,
 		count: 1,
 		skipped: []
 	});
-	const runOnSelection = (action_5) => {
+	const runOnSelection = (action_4) => {
 		const selected = list.getSelection();
 		if (selected === null) return;
 		run({
-			action: action_5,
+			action: action_4,
 			scope: "selection",
 			selection: selected,
 			count: selectedCount,
-			skipped: selectedItems.filter((item_3) => !isAllowedOn(action_5, item_3))
+			skipped: selectedItems.filter((item_2) => !isAllowedOn(action_4, item_2))
 		});
 	};
-	const runOnResource = (action_6) => run({
-		action: action_6,
+	const runOnResource = (action_5) => run({
+		action: action_5,
 		scope: "resource",
 		count,
 		skipped: []
 	});
-	const renderActions = (item_4) => {
-		const allowed = rowActions.filter((action_7) => isAllowedOn(action_7, item_4));
-		const menu = rowMenu.filter((action_8) => isAllowedOn(action_8, item_4));
+	const renderActions = (item_3) => {
+		const allowed = selectItemActions(grouped.row, item_3, "row", { getLinkHref });
+		const menu = selectItemActions(grouped.menu, item_3, "menu", { getLinkHref });
 		if (allowed.length === 0 && menu.length === 0) return null;
-		const running = pending?.endsWith(`\u0000${item_4.id}`) === true ? pending.split("\0")[0] : null;
+		const running = pending?.endsWith(`\u0000${item_3.id}`) === true ? pending.split("\0")[0] : null;
 		return /* @__PURE__ */ jsx(RowActions, {
-			item: item_4,
-			itemLabel: getItemLabel(item_4),
+			itemLabel: getItemLabel(item_3),
 			actions: allowed,
 			menu,
 			pending: running ?? null,
-			onRun: (action_9) => runOnItem(action_9, item_4),
+			onRun: (action_6) => runOnItem(action_6, item_3),
 			icons: actionIcons
 		});
 	};
+	let t22;
+	if ($[35] !== intl) {
+		t22 = intl.formatMessage(messages.selectPage);
+		$[35] = intl;
+		$[36] = t22;
+	} else t22 = $[36];
 	const pageCheckbox = /* @__PURE__ */ jsx(Checkbox, {
-		"aria-label": intl.formatMessage(messages.selectPage),
+		"aria-label": t22,
 		isSelected: pageSelection === "all",
 		isIndeterminate: pageSelection === "some",
 		isDisabled: pageItems.length === 0,
 		onChange: () => {
-			const ids = pageItems.map((item_5) => item_5.id);
+			const ids = pageItems.map(_temp4);
 			if (pageSelection === "all") list.deselect(ids);
 			else list.select(ids);
 		}
 	});
-	const sortable = columns.some((column_1) => column_1.sortable === true);
+	const sortable = columns.some(_temp5);
 	const showToolbar = search || filters.length > 0 || sortable || layouts.length > 1 || resourceActions.length > 0 || toolbar !== void 0;
-	const body = (() => {
-		if (error !== null) return /* @__PURE__ */ jsx(Alert, {
-			tone: "danger",
-			title: intl.formatMessage(messages.loadFailed),
-			actions: onRetry !== void 0 ? /* @__PURE__ */ jsx(Button, {
-				size: "sm",
-				onPress: onRetry,
-				children: intl.formatMessage(messages.retry)
-			}) : void 0,
-			children: error.message
-		});
-		if (items === void 0) return /* @__PURE__ */ jsx("div", {
-			className: ListView_module_default.state,
-			children: /* @__PURE__ */ jsx(Spinner, { showLabel: true })
-		});
-		if (pageItems.length === 0) return /* @__PURE__ */ jsxs("div", {
-			className: ListView_module_default.state,
-			children: [/* @__PURE__ */ jsx("p", { children: hasQuery ? intl.formatMessage(messages.noResults) : emptyMessage ?? intl.formatMessage(messages.empty) }), hasQuery ? /* @__PURE__ */ jsx(Button, {
-				size: "sm",
-				onPress: () => clearFilters(),
-				children: intl.formatMessage(messages.clearFilters)
-			}) : null]
-		});
-		return /* @__PURE__ */ jsx(Layout, {
+	let t23;
+	if ($[37] !== filterValues || $[38] !== list || $[39] !== query.q) {
+		t23 = function clearFilters() {
+			Object.keys(filterValues).forEach((id_0) => list.setFilter(id_0, void 0));
+			if ((query.q ?? "") !== "") list.setSearch("");
+		};
+		$[37] = filterValues;
+		$[38] = list;
+		$[39] = query.q;
+		$[40] = t23;
+	} else t23 = $[40];
+	const clearFilters = t23;
+	let t24;
+	bb0: {
+		if (error !== null) {
+			let t25;
+			if ($[41] !== intl) {
+				t25 = intl.formatMessage(messages.loadFailed);
+				$[41] = intl;
+				$[42] = t25;
+			} else t25 = $[42];
+			let t26;
+			if ($[43] !== intl || $[44] !== onRetry) {
+				t26 = onRetry !== void 0 ? /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					onPress: onRetry,
+					children: intl.formatMessage(messages.retry)
+				}) : void 0;
+				$[43] = intl;
+				$[44] = onRetry;
+				$[45] = t26;
+			} else t26 = $[45];
+			let t27;
+			if ($[46] !== error.message || $[47] !== t25 || $[48] !== t26) {
+				t27 = /* @__PURE__ */ jsx(Alert, {
+					tone: "danger",
+					title: t25,
+					actions: t26,
+					children: error.message
+				});
+				$[46] = error.message;
+				$[47] = t25;
+				$[48] = t26;
+				$[49] = t27;
+			} else t27 = $[49];
+			t24 = t27;
+			break bb0;
+		}
+		if (items === void 0) {
+			let t25;
+			if ($[50] !== Layout || $[51] !== columns || $[52] !== label || $[53] !== query.perPage || $[54] !== sort) {
+				t25 = /* @__PURE__ */ jsx(ListSkeleton, {
+					Layout,
+					columns,
+					perPage: query.perPage,
+					sort,
+					label
+				});
+				$[50] = Layout;
+				$[51] = columns;
+				$[52] = label;
+				$[53] = query.perPage;
+				$[54] = sort;
+				$[55] = t25;
+			} else t25 = $[55];
+			t24 = t25;
+			break bb0;
+		}
+		if (pageItems.length === 0) {
+			let t25;
+			if ($[56] !== emptyMessage || $[57] !== hasQuery || $[58] !== intl) {
+				t25 = hasQuery ? intl.formatMessage(messages.noResults) : emptyMessage ?? intl.formatMessage(messages.empty);
+				$[56] = emptyMessage;
+				$[57] = hasQuery;
+				$[58] = intl;
+				$[59] = t25;
+			} else t25 = $[59];
+			let t26;
+			if ($[60] !== t25) {
+				t26 = /* @__PURE__ */ jsx("p", { children: t25 });
+				$[60] = t25;
+				$[61] = t26;
+			} else t26 = $[61];
+			let t27;
+			if ($[62] !== clearFilters || $[63] !== hasQuery || $[64] !== intl) {
+				t27 = hasQuery ? /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					onPress: () => clearFilters(),
+					children: intl.formatMessage(messages.clearFilters)
+				}) : null;
+				$[62] = clearFilters;
+				$[63] = hasQuery;
+				$[64] = intl;
+				$[65] = t27;
+			} else t27 = $[65];
+			let t28;
+			if ($[66] !== t26 || $[67] !== t27) {
+				t28 = /* @__PURE__ */ jsxs("div", {
+					className: ListView_module_default.state,
+					children: [t26, t27]
+				});
+				$[66] = t26;
+				$[67] = t27;
+				$[68] = t28;
+			} else t28 = $[68];
+			t24 = t28;
+			break bb0;
+		}
+		let t25;
+		if ($[69] !== currentItemId) {
+			t25 = (item_5) => item_5.id === currentItemId;
+			$[69] = currentItemId;
+			$[70] = t25;
+		} else t25 = $[70];
+		let t26;
+		if ($[71] !== selection) {
+			t26 = (item_6) => isItemSelected(selection, item_6.id);
+			$[71] = selection;
+			$[72] = t26;
+		} else t26 = $[72];
+		let t27;
+		if ($[73] !== list) {
+			t27 = (item_7) => list.toggle(item_7.id);
+			$[73] = list;
+			$[74] = t27;
+		} else t27 = $[74];
+		let t28;
+		if ($[75] !== list) {
+			t28 = (column_1) => list.toggleSort(column_1.id);
+			$[75] = list;
+			$[76] = t28;
+		} else t28 = $[76];
+		t24 = /* @__PURE__ */ jsx(Layout, {
 			items: pageItems,
 			columns,
 			renderValue,
 			getItemLabel,
 			getItemHref,
+			isCurrent: t25,
 			selectable,
-			isSelected: (item_6) => isItemSelected(selection, item_6.id),
-			onToggle: (item_7) => list.toggle(item_7.id),
+			isSelected: t26,
+			onToggle: t27,
 			renderActions,
 			sort,
-			onSort: (column_2) => list.toggleSort(column_2.id),
+			onSort: t28,
 			label,
 			pageSelection: pageCheckbox
 		});
-	})();
-	function clearFilters() {
-		Object.keys(filterValues).forEach((id_0) => list.setFilter(id_0, void 0));
-		if ((query.q ?? "") !== "") list.setSearch("");
 	}
-	return /* @__PURE__ */ jsxs("div", {
-		className: cx(ListView_module_default.list, className),
-		children: [
-			showToolbar ? /* @__PURE__ */ jsxs("div", {
-				className: ListView_module_default.toolbar,
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: ListView_module_default.toolbarStart,
-					children: [search ? /* @__PURE__ */ jsx(SearchField, {
-						value: query.q ?? "",
-						onChange: (q) => list.setSearch(q)
-					}) : null, filters.length > 0 ? /* @__PURE__ */ jsx(FilterControls, {
-						filters,
-						values: filterValues,
-						onChange: (id_1, value) => list.setFilter(id_1, value),
-						onLabel: filterLabels.remember,
-						controls: filterControls,
-						columns,
-						fields,
-						labels: filterLabels.labels
-					}) : null]
-				}), /* @__PURE__ */ jsxs("div", {
-					className: ListView_module_default.toolbarEnd,
-					children: [
-						sortable ? /* @__PURE__ */ jsx("div", {
-							className: layout === "table" ? ListView_module_default.tableSort : void 0,
-							children: /* @__PURE__ */ jsx(SortSelect, {
-								columns,
-								sort,
-								onChange: (next) => list.setSort(next)
-							})
-						}) : null,
-						layouts.length > 1 ? /* @__PURE__ */ jsx(LayoutSwitch, {
-							layouts,
-							value: layout,
-							onChange: (next_0) => {
-								setLayout(next_0);
-								onLayoutChange?.(next_0);
-							}
-						}) : null,
-						resourceActions.filter((action_10) => selectedCount === 0 || !hasScope(action_10, "selection")).map((action_11) => /* @__PURE__ */ jsx(ActionButton, {
-							action: action_11,
-							icons: actionIcons,
-							size: "md",
-							href: getActionHref(action_11),
-							isPending: pending === keyOf(action_11),
-							onPress: () => runOnResource(action_11)
-						}, action_11.id)),
-						toolbar
-					]
-				})]
-			}) : null,
-			/* @__PURE__ */ jsx(FilterChips, {
+	const body = t24;
+	let t25;
+	if ($[77] !== className) {
+		t25 = cx(ListView_module_default.list, className);
+		$[77] = className;
+		$[78] = t25;
+	} else t25 = $[78];
+	const t26 = showToolbar ? /* @__PURE__ */ jsxs("div", {
+		className: ListView_module_default.toolbar,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: ListView_module_default.toolbarStart,
+			children: [search ? /* @__PURE__ */ jsx(SearchField, {
+				value: query.q ?? "",
+				onChange: (q) => list.setSearch(q)
+			}) : null, filters.length > 0 ? /* @__PURE__ */ jsx(FilterControls, {
 				filters,
 				values: filterValues,
-				q: query.q,
-				onRemove: (id_2) => list.setFilter(id_2, void 0),
-				onClearSearch: () => list.setSearch(""),
-				onClear: clearFilters,
+				onChange: (id_1, value) => list.setFilter(id_1, value),
+				onLabel: filterLabels.remember,
+				controls: filterControls,
 				columns,
 				fields,
 				labels: filterLabels.labels
+			}) : null]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: ListView_module_default.toolbarEnd,
+			children: [
+				sortable ? /* @__PURE__ */ jsx("div", {
+					className: layout === "table" ? ListView_module_default.tableSort : void 0,
+					children: /* @__PURE__ */ jsx(SortSelect, {
+						columns,
+						sort,
+						onChange: (next) => list.setSort(next)
+					})
+				}) : null,
+				layouts.length > 1 ? /* @__PURE__ */ jsx(LayoutSwitch, {
+					layouts,
+					value: layout,
+					onChange: (next_0) => {
+						setLayout(next_0);
+						onLayoutChange?.(next_0);
+					}
+				}) : null,
+				resourceActions.filter((action_7) => selectedCount === 0 || !hasScope(action_7, "selection")).map((action_8) => /* @__PURE__ */ jsx(ActionButton, {
+					action: action_8,
+					icons: actionIcons,
+					size: "md",
+					href: getActionHref(action_8),
+					isPending: pending === keyOf(action_8),
+					onPress: () => runOnResource(action_8)
+				}, action_8.id)),
+				toolbar
+			]
+		})]
+	}) : null;
+	let t27;
+	let t28;
+	if ($[79] !== list) {
+		t27 = (id_2) => list.setFilter(id_2, void 0);
+		t28 = () => list.setSearch("");
+		$[79] = list;
+		$[80] = t27;
+		$[81] = t28;
+	} else {
+		t27 = $[80];
+		t28 = $[81];
+	}
+	let t29;
+	if ($[82] !== clearFilters || $[83] !== columns || $[84] !== fields || $[85] !== filterLabels.labels || $[86] !== filterValues || $[87] !== filters || $[88] !== query.q || $[89] !== t27 || $[90] !== t28) {
+		t29 = /* @__PURE__ */ jsx(FilterChips, {
+			filters,
+			values: filterValues,
+			q: query.q,
+			onRemove: t27,
+			onClearSearch: t28,
+			onClear: clearFilters,
+			columns,
+			fields,
+			labels: filterLabels.labels
+		});
+		$[82] = clearFilters;
+		$[83] = columns;
+		$[84] = fields;
+		$[85] = filterLabels.labels;
+		$[86] = filterValues;
+		$[87] = filters;
+		$[88] = query.q;
+		$[89] = t27;
+		$[90] = t28;
+		$[91] = t29;
+	} else t29 = $[91];
+	const t30 = selectedCount > 0 ? /* @__PURE__ */ jsxs("div", {
+		className: ListView_module_default.selection,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: ListView_module_default.selectionCount,
+				role: "status",
+				children: selection.mode === "all" ? intl.formatMessage(messages.allMatchingSelected, { total: selectedCount }) : intl.formatMessage(messages.selectedCount, { count: selectedCount })
 			}),
-			selectedCount > 0 ? /* @__PURE__ */ jsxs("div", {
-				className: ListView_module_default.selection,
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						className: ListView_module_default.selectionCount,
-						role: "status",
-						children: selection.mode === "all" ? intl.formatMessage(messages.allMatchingSelected, { total: selectedCount }) : intl.formatMessage(messages.selectedCount, { count: selectedCount })
-					}),
-					selection.mode === "ids" && pageSelection === "all" && count > pageItems.length ? /* @__PURE__ */ jsx(Button, {
-						size: "sm",
-						variant: "ghost",
-						onPress: () => list.selectAllMatching(),
-						children: intl.formatMessage(messages.selectAllMatching, { total: count })
-					}) : null,
-					/* @__PURE__ */ jsx(Button, {
-						size: "sm",
-						variant: "ghost",
-						onPress: () => list.clearSelection(),
-						children: intl.formatMessage(messages.clearSelection)
-					}),
-					selectionActions.length > 0 ? /* @__PURE__ */ jsx("div", {
-						className: ListView_module_default.selectionActions,
-						children: selectionActions.map((action_12) => {
-							const skipped = selectedItems.filter((item_8) => !isAllowedOn(action_12, item_8)).length;
-							return /* @__PURE__ */ jsx(ActionButton, {
-								action: action_12,
-								icons: actionIcons,
-								size: "md",
-								href: null,
-								isPending: pending === keyOf(action_12),
-								isDisabled: pending !== null && pending !== keyOf(action_12) || skipped >= selectedCount,
-								onPress: () => runOnSelection(action_12)
-							}, action_12.id);
-						})
-					}) : null
-				]
+			selection.mode === "ids" && pageSelection === "all" && count > pageItems.length ? /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: "ghost",
+				onPress: () => list.selectAllMatching(),
+				children: intl.formatMessage(messages.selectAllMatching, { total: count })
 			}) : null,
-			/* @__PURE__ */ jsx("div", {
-				className: ListView_module_default.body,
-				"aria-busy": isLoading && items !== void 0,
-				children: body
+			/* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: "ghost",
+				onPress: () => list.clearSelection(),
+				children: intl.formatMessage(messages.clearSelection)
 			}),
-			total !== void 0 && error === null && total > 0 ? /* @__PURE__ */ jsx(Pagination, {
-				page: query.page ?? 1,
-				perPage: query.perPage ?? pageItems.length,
-				total,
-				onPageChange: (page) => list.setPage(page),
-				perPageOptions,
-				onPerPageChange: (perPage) => list.setPerPage(perPage)
-			}) : null,
-			/* @__PURE__ */ jsx(ConfirmDialog, {
-				event: confirming,
-				onConfirm: (event_1) => void execute(event_1),
-				onCancel: () => setConfirming(null)
-			})
+			selectionActions.length > 0 ? /* @__PURE__ */ jsx("div", {
+				className: ListView_module_default.selectionActions,
+				children: selectionActions.map((action_9) => {
+					const skipped_0 = selectedItems.filter((item_8) => !isAllowedOn(action_9, item_8)).length;
+					return /* @__PURE__ */ jsx(ActionButton, {
+						action: action_9,
+						icons: actionIcons,
+						size: "md",
+						href: null,
+						isPending: pending === keyOf(action_9),
+						isDisabled: pending !== null && pending !== keyOf(action_9) || skipped_0 >= selectedCount,
+						onPress: () => runOnSelection(action_9)
+					}, action_9.id);
+				})
+			}) : null
 		]
-	});
+	}) : null;
+	const t31 = isLoading && items !== void 0;
+	let t32;
+	if ($[92] !== body || $[93] !== t31) {
+		t32 = /* @__PURE__ */ jsx("div", {
+			className: ListView_module_default.body,
+			"aria-busy": t31,
+			children: body
+		});
+		$[92] = body;
+		$[93] = t31;
+		$[94] = t32;
+	} else t32 = $[94];
+	let t33;
+	if ($[95] !== cursors || $[96] !== error || $[97] !== list || $[98] !== pageItems || $[99] !== perPageOptions || $[100] !== query.cursor || $[101] !== query.page || $[102] !== query.perPage || $[103] !== total) {
+		t33 = cursors !== void 0 && error === null ? /* @__PURE__ */ jsx(CursorPagination, {
+			perPage: query.perPage ?? pageItems.length,
+			hasPrevious: query.cursor !== void 0,
+			hasNext: cursors.next !== null,
+			onPrevious: () => list.previousPage(cursors.previous),
+			onNext: () => {
+				if (cursors.next !== null) list.nextPage(cursors.next);
+			},
+			perPageOptions,
+			onPerPageChange: (perPage) => list.setPerPage(perPage)
+		}) : total !== void 0 && error === null && total > 0 ? /* @__PURE__ */ jsx(Pagination, {
+			page: query.page ?? 1,
+			perPage: query.perPage ?? pageItems.length,
+			total,
+			onPageChange: (page) => list.setPage(page),
+			perPageOptions,
+			onPerPageChange: (perPage_0) => list.setPerPage(perPage_0)
+		}) : null;
+		$[95] = cursors;
+		$[96] = error;
+		$[97] = list;
+		$[98] = pageItems;
+		$[99] = perPageOptions;
+		$[100] = query.cursor;
+		$[101] = query.page;
+		$[102] = query.perPage;
+		$[103] = total;
+		$[104] = t33;
+	} else t33 = $[104];
+	let t34;
+	if ($[105] !== execute) {
+		t34 = (event_1) => void execute(event_1);
+		$[105] = execute;
+		$[106] = t34;
+	} else t34 = $[106];
+	let t35;
+	if ($[107] !== closeConfirmation || $[108] !== confirming || $[109] !== preview || $[110] !== t34) {
+		t35 = /* @__PURE__ */ jsx(ConfirmDialog, {
+			event: confirming,
+			preview,
+			onConfirm: t34,
+			onCancel: closeConfirmation
+		});
+		$[107] = closeConfirmation;
+		$[108] = confirming;
+		$[109] = preview;
+		$[110] = t34;
+		$[111] = t35;
+	} else t35 = $[111];
+	let t36;
+	if ($[112] !== t25 || $[113] !== t26 || $[114] !== t29 || $[115] !== t30 || $[116] !== t32 || $[117] !== t33 || $[118] !== t35) {
+		t36 = /* @__PURE__ */ jsxs("div", {
+			className: t25,
+			children: [
+				t26,
+				t29,
+				t30,
+				t32,
+				t33,
+				t35
+			]
+		});
+		$[112] = t25;
+		$[113] = t26;
+		$[114] = t29;
+		$[115] = t30;
+		$[116] = t32;
+		$[117] = t33;
+		$[118] = t35;
+		$[119] = t36;
+	} else t36 = $[119];
+	return t36;
+}
+function _temp5(column_0) {
+	return column_0.sortable === true;
+}
+function _temp4(item_4) {
+	return item_4.id;
+}
+function _temp3(action_1) {
+	return hasScope(action_1, "resource");
+}
+function _temp2(action_0) {
+	return hasScope(action_0, "selection");
+}
+function _temp(action, index, all) {
+	return (hasScope(action, "selection") || hasScope(action, "resource")) && all.findIndex((candidate) => candidate.id === action.id) === index;
 }
 //#endregion
 export { ListView };