@panneau/lists 5.0.0-alpha.21 → 5.0.0-alpha.22

package/dist/ListView.js

@@ -1,8 +1,8 @@
 import { getActionHref, groupListActions, hasScope, isAllowedOn } from "./actions/actions.js";
 import { messages } from "./messages.js";
 import { ConfirmDialog, needsConfirmation } from "./actions/ConfirmDialog.js";
-import { getColumnValue, toText } from "./values.js";
 import { getImageUrl } from "./images.js";
+import { getColumnValue, toText } from "./values.js";
 import { getCalendarTimeZone } from "./layouts/calendarDays.js";
 import { cx } from "./cx.js";
 import { builtInLayouts } from "./layouts/builtIn.js";
@@ -27,7 +27,7 @@ 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 { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 //#region src/ListView.tsx
 function keyOf(action, item) {
 	return item !== void 0 ? `${action.id}\u0000${item.id}` : action.id;
@@ -38,25 +38,26 @@ function keyOf(action, item) {
 * fetches nothing: the caller gives the items of the list's query and their total.
 */
 function ListView(t0) {
-	const $ = c(116);
-	const { list, items, columns: allColumns, columnChoice: t1, total, cursors, isLoading: t2, error: t3, onRetry, filters: t4, fields: t5, search: t6, layouts: t7, layout: controlledLayout, onLayoutChange, perPageOptions, selectable: selectableProp, actions: actionsProp, onAction, previewAction, actionIcons, itemTitle, itemImage, calendar: t8, primaryAction: primaryActionProp, getItemLabel: getItemLabelProp, getItemHref, getLinkHref, currentItemId: t9, displays, layoutComponents, filterControls, inlineEdit: t10, onInlineEdit, formatError: t11, toolbar, emptyMessage, "aria-label": ariaLabel, className } = t0;
+	const $ = c(123);
+	const { list, items, columns: allColumns, columnChoice: t1, total, cursors, isLoading: t2, error: t3, onRetry, filters: t4, fields: t5, search: t6, layouts: t7, layout: controlledLayout, onLayoutChange, perPageOptions, selectable: selectableProp, actions: actionsProp, onAction, previewAction, actionIcons, itemTitle, itemImage, calendar: t8, primaryAction: primaryActionProp, getItemLabel: getItemLabelProp, getItemHref, getLinkHref, currentItemId: t9, highlightedItemId: t10, displays, layoutComponents, filterControls, inlineEdit: t11, onInlineEdit, formatError: t12, toolbar, emptyMessage, "aria-label": ariaLabel, className } = t0;
 	const columnChoice = t1 === void 0 ? true : t1;
 	const isLoading = t2 === void 0 ? false : t2;
 	const error = t3 === void 0 ? null : t3;
-	let t12;
+	let t13;
 	if ($[0] !== t4) {
-		t12 = t4 === void 0 ? [] : t4;
+		t13 = t4 === void 0 ? [] : t4;
 		$[0] = t4;
-		$[1] = t12;
-	} else t12 = $[1];
-	const filtersProp = t12;
+		$[1] = t13;
+	} else t13 = $[1];
+	const filtersProp = t13;
 	const fields = t5 === void 0 ? [] : t5;
 	const search = t6 === void 0 ? false : t6;
 	const layoutsProp = t7 === void 0 ? ["table"] : t7;
 	const calendar = t8 === void 0 ? null : t8;
 	const currentItemId = t9 === void 0 ? null : t9;
-	const inlineEdit = t10 === void 0 ? [] : t10;
-	const formatError = t11 === void 0 ? formatRuleFailure : t11;
+	const highlightedItemId = t10 === void 0 ? null : t10;
+	const inlineEdit = t11 === void 0 ? [] : t11;
+	const formatError = t12 === void 0 ? formatRuleFailure : t12;
 	const intl = usePanneauIntl();
 	const toasts = useToast();
 	const plugins = usePlugins();
@@ -65,16 +66,17 @@ function ListView(t0) {
 	const [confirming, setConfirming] = useState(null);
 	const [preview, setPreview] = useState(null);
 	const confirmation = useRef(0);
+	const root = useRef(null);
 	const [pending, setPending] = useState(null);
-	let t13;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t13 = {};
-		$[2] = t13;
-	} else t13 = $[2];
-	const [saved, setSaved] = useState(t13);
 	let t14;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = {};
+		$[2] = t14;
+	} else t14 = $[2];
+	const [saved, setSaved] = useState(t14);
+	let t15;
 	if ($[3] !== items) {
-		t14 = (item) => {
+		t15 = (item) => {
 			const base = items?.find((candidate) => candidate.id === item.id);
 			if (base !== void 0) setSaved((current) => ({
 				...current,
@@ -85,108 +87,108 @@ function ListView(t0) {
 			}));
 		};
 		$[3] = items;
-		$[4] = t14;
-	} else t14 = $[4];
-	const showItem = t14;
-	let t15;
+		$[4] = t15;
+	} else t15 = $[4];
+	const showItem = t15;
+	let t16;
 	if ($[5] !== ariaLabel || $[6] !== intl) {
-		t15 = ariaLabel ?? intl.formatMessage(messages.list);
+		t16 = ariaLabel ?? intl.formatMessage(messages.list);
 		$[5] = ariaLabel;
 		$[6] = intl;
-		$[7] = t15;
-	} else t15 = $[7];
-	const label = t15;
-	let t16;
+		$[7] = t16;
+	} else t16 = $[7];
+	const label = t16;
+	let t17;
 	if ($[8] !== saved) {
-		t16 = (item_0) => saved[item_0.id]?.base === item_0 ? saved[item_0.id]?.item ?? item_0 : item_0;
+		t17 = (item_0) => saved[item_0.id]?.base === item_0 ? saved[item_0.id]?.item ?? item_0 : item_0;
 		$[8] = saved;
-		$[9] = t16;
-	} else t16 = $[9];
-	const pageItems = (items ?? []).map(t16);
+		$[9] = t17;
+	} else t17 = $[9];
+	const pageItems = (items ?? []).map(t17);
 	const count = total ?? pageItems.length;
-	let t17;
+	let t18;
 	if ($[10] !== query.sort) {
-		t17 = query.sort ?? [];
+		t18 = query.sort ?? [];
 		$[10] = query.sort;
-		$[11] = t17;
-	} else t17 = $[11];
-	const sort = t17;
-	let t18;
+		$[11] = t18;
+	} else t18 = $[11];
+	const sort = t18;
+	let t19;
 	if ($[12] !== plugins.listLayouts) {
-		t18 = Object.fromEntries(plugins.listLayouts);
+		t19 = Object.fromEntries(plugins.listLayouts);
 		$[12] = plugins.listLayouts;
-		$[13] = t18;
-	} else t18 = $[13];
-	const t19 = t18;
-	let t20;
-	if ($[14] !== layoutComponents || $[15] !== t19) {
-		t20 = {
+		$[13] = t19;
+	} else t19 = $[13];
+	const t20 = t19;
+	let t21;
+	if ($[14] !== layoutComponents || $[15] !== t20) {
+		t21 = {
 			...builtInLayouts,
-			...t19,
+			...t20,
 			...layoutComponents
 		};
 		$[14] = layoutComponents;
-		$[15] = t19;
-		$[16] = t20;
-	} else t20 = $[16];
-	const allLayouts = t20;
-	let t21;
+		$[15] = t20;
+		$[16] = t21;
+	} else t21 = $[16];
+	const allLayouts = t21;
+	let t22;
 	if ($[17] !== allLayouts || $[18] !== calendar || $[19] !== itemImage) {
-		t21 = (id) => allLayouts[id] !== void 0 && (id !== "gallery" || itemImage !== void 0) && (id !== "calendar" || calendar !== null);
+		t22 = (id) => allLayouts[id] !== void 0 && (id !== "gallery" || itemImage !== void 0) && (id !== "calendar" || calendar !== null);
 		$[17] = allLayouts;
 		$[18] = calendar;
 		$[19] = itemImage;
-		$[20] = t21;
-	} else t21 = $[20];
-	const available = layoutsProp.filter(t21);
+		$[20] = t22;
+	} else t22 = $[20];
+	const available = layoutsProp.filter(t22);
 	const layouts = available.length > 0 ? available : ["table"];
 	const chosenLayout = view.layout !== void 0 && layouts.includes(view.layout) ? view.layout : void 0;
 	const layout = controlledLayout ?? chosenLayout ?? layouts[0] ?? "table";
 	const columns = getShownColumns(allColumns, view.columns);
 	const Layout = allLayouts[layout] ?? builtInLayouts.table;
 	const inCalendar = layout === "calendar" && calendar !== null;
-	let t22;
+	let t23;
 	if ($[21] !== calendar || $[22] !== filtersProp || $[23] !== inCalendar) {
-		t22 = inCalendar ? filtersProp.filter((filter) => filter.id !== calendar.filter) : filtersProp;
+		t23 = inCalendar ? filtersProp.filter((filter) => filter.id !== calendar.filter) : filtersProp;
 		$[21] = calendar;
 		$[22] = filtersProp;
 		$[23] = inCalendar;
-		$[24] = t22;
-	} else t22 = $[24];
-	const filters = t22;
-	let t23;
+		$[24] = t23;
+	} else t23 = $[24];
+	const filters = t23;
+	let t24;
 	if ($[25] !== calendar || $[26] !== inCalendar || $[27] !== query.filter) {
-		t23 = Object.fromEntries(Object.entries(query.filter ?? {}).filter((t24) => {
-			const [id_0] = t24;
+		t24 = Object.fromEntries(Object.entries(query.filter ?? {}).filter((t25) => {
+			const [id_0] = t25;
 			return !(inCalendar && id_0 === calendar.filter);
 		}));
 		$[25] = calendar;
 		$[26] = inCalendar;
 		$[27] = query.filter;
-		$[28] = t23;
-	} else t23 = $[28];
-	const filterValues = t23;
-	let t24;
+		$[28] = t24;
+	} else t24 = $[28];
+	const filterValues = t24;
+	let t25;
 	if ($[29] !== filterValues || $[30] !== query.q) {
-		t24 = Object.keys(filterValues).length > 0 || (query.q ?? "") !== "";
+		t25 = Object.keys(filterValues).length > 0 || (query.q ?? "") !== "";
 		$[29] = filterValues;
 		$[30] = query.q;
-		$[31] = t24;
-	} else t24 = $[31];
-	const hasQuery = t24;
+		$[31] = t25;
+	} else t25 = $[31];
+	const hasQuery = t25;
 	const grouped = groupListActions(actionsProp);
 	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;
-	let t25;
+	let t26;
 	if ($[32] !== selection) {
-		t25 = (item_1) => isItemSelected(selection, item_1.id);
+		t26 = (item_1) => isItemSelected(selection, item_1.id);
 		$[32] = selection;
-		$[33] = t25;
-	} else t25 = $[33];
-	const selectedItems = pageItems.filter(t25);
+		$[33] = t26;
+	} else t26 = $[33];
+	const selectedItems = pageItems.filter(t26);
 	const pageSelection = getPageSelection(selection, pageItems);
 	const getItemLabel = (item_2) => {
 		if (getItemLabelProp !== void 0) return getItemLabelProp(item_2);
@@ -302,14 +304,14 @@ function ListView(t0) {
 			primary: primaryAction
 		});
 	};
-	let t26;
+	let t27;
 	if ($[34] !== intl) {
-		t26 = intl.formatMessage(messages.selectPage);
+		t27 = intl.formatMessage(messages.selectPage);
 		$[34] = intl;
-		$[35] = t26;
-	} else t26 = $[35];
+		$[35] = t27;
+	} else t27 = $[35];
 	const pageCheckbox = /* @__PURE__ */ jsx(Checkbox, {
-		"aria-label": t26,
+		"aria-label": t27,
 		isSelected: pageSelection === "all",
 		isIndeterminate: pageSelection === "some",
 		isDisabled: pageItems.length === 0,
@@ -322,56 +324,56 @@ function ListView(t0) {
 	const sortable = allColumns.some(_temp5);
 	const choosesColumns = columnChoice && allColumns.length > 1;
 	const showToolbar = search || filters.length > 0 || sortable || choosesColumns || layouts.length > 1 || resourceActions.length > 0 || toolbar !== void 0;
-	let t27;
+	let t28;
 	if ($[36] !== filterValues || $[37] !== list || $[38] !== query.q) {
-		t27 = function clearFilters() {
+		t28 = function clearFilters() {
 			Object.keys(filterValues).forEach((id_2) => list.setFilter(id_2, void 0));
 			if ((query.q ?? "") !== "") list.setSearch("");
 		};
 		$[36] = filterValues;
 		$[37] = list;
 		$[38] = query.q;
-		$[39] = t27;
-	} else t27 = $[39];
-	const clearFilters = t27;
-	let t28;
+		$[39] = t28;
+	} else t28 = $[39];
+	const clearFilters = t28;
+	let t29;
 	bb0: {
 		if (error !== null) {
-			let t29;
+			let t30;
 			if ($[40] !== intl) {
-				t29 = intl.formatMessage(messages.loadFailed);
+				t30 = intl.formatMessage(messages.loadFailed);
 				$[40] = intl;
-				$[41] = t29;
-			} else t29 = $[41];
-			let t30;
+				$[41] = t30;
+			} else t30 = $[41];
+			let t31;
 			if ($[42] !== intl || $[43] !== onRetry) {
-				t30 = onRetry !== void 0 ? /* @__PURE__ */ jsx(Button, {
+				t31 = onRetry !== void 0 ? /* @__PURE__ */ jsx(Button, {
 					size: "sm",
 					onPress: onRetry,
 					children: intl.formatMessage(messages.retry)
 				}) : void 0;
 				$[42] = intl;
 				$[43] = onRetry;
-				$[44] = t30;
-			} else t30 = $[44];
-			let t31;
-			if ($[45] !== error.message || $[46] !== t29 || $[47] !== t30) {
-				t31 = /* @__PURE__ */ jsx(Alert, {
+				$[44] = t31;
+			} else t31 = $[44];
+			let t32;
+			if ($[45] !== error.message || $[46] !== t30 || $[47] !== t31) {
+				t32 = /* @__PURE__ */ jsx(Alert, {
 					tone: "danger",
-					title: t29,
-					actions: t30,
+					title: t30,
+					actions: t31,
 					children: error.message
 				});
 				$[45] = error.message;
-				$[46] = t29;
-				$[47] = t30;
-				$[48] = t31;
-			} else t31 = $[48];
-			t28 = t31;
+				$[46] = t30;
+				$[47] = t31;
+				$[48] = t32;
+			} else t32 = $[48];
+			t29 = t32;
 			break bb0;
 		}
 		if (items === void 0) {
-			t28 = /* @__PURE__ */ jsx(ListSkeleton, {
+			t29 = /* @__PURE__ */ jsx(ListSkeleton, {
 				Layout,
 				columns,
 				perPage: query.perPage,
@@ -382,23 +384,23 @@ function ListView(t0) {
 			break bb0;
 		}
 		if (pageItems.length === 0 && !inCalendar) {
-			let t29;
+			let t30;
 			if ($[49] !== emptyMessage || $[50] !== hasQuery || $[51] !== intl) {
-				t29 = hasQuery ? intl.formatMessage(messages.noResults) : emptyMessage ?? intl.formatMessage(messages.empty);
+				t30 = hasQuery ? intl.formatMessage(messages.noResults) : emptyMessage ?? intl.formatMessage(messages.empty);
 				$[49] = emptyMessage;
 				$[50] = hasQuery;
 				$[51] = intl;
-				$[52] = t29;
-			} else t29 = $[52];
-			let t30;
-			if ($[53] !== t29) {
-				t30 = /* @__PURE__ */ jsx("p", { children: t29 });
-				$[53] = t29;
-				$[54] = t30;
-			} else t30 = $[54];
+				$[52] = t30;
+			} else t30 = $[52];
 			let t31;
+			if ($[53] !== t30) {
+				t31 = /* @__PURE__ */ jsx("p", { children: t30 });
+				$[53] = t30;
+				$[54] = t31;
+			} else t31 = $[54];
+			let t32;
 			if ($[55] !== clearFilters || $[56] !== hasQuery || $[57] !== intl) {
-				t31 = hasQuery ? /* @__PURE__ */ jsx(Button, {
+				t32 = hasQuery ? /* @__PURE__ */ jsx(Button, {
 					size: "sm",
 					onPress: () => clearFilters(),
 					children: intl.formatMessage(messages.clearFilters)
@@ -406,58 +408,64 @@ function ListView(t0) {
 				$[55] = clearFilters;
 				$[56] = hasQuery;
 				$[57] = intl;
-				$[58] = t31;
-			} else t31 = $[58];
-			let t32;
-			if ($[59] !== t30 || $[60] !== t31) {
-				t32 = /* @__PURE__ */ jsxs("div", {
+				$[58] = t32;
+			} else t32 = $[58];
+			let t33;
+			if ($[59] !== t31 || $[60] !== t32) {
+				t33 = /* @__PURE__ */ jsxs("div", {
 					className: ListView_module_default.state,
-					children: [t30, t31]
+					children: [t31, t32]
 				});
-				$[59] = t30;
-				$[60] = t31;
-				$[61] = t32;
-			} else t32 = $[61];
-			t28 = t32;
+				$[59] = t31;
+				$[60] = t32;
+				$[61] = t33;
+			} else t33 = $[61];
+			t29 = t33;
 			break bb0;
 		}
-		let t29;
+		let t30;
 		if ($[62] !== itemImage) {
-			t29 = itemImage !== void 0 ? (item_9) => getImageUrl(item_9[itemImage]) : void 0;
+			t30 = itemImage !== void 0 ? (item_9) => getImageUrl(item_9[itemImage]) : void 0;
 			$[62] = itemImage;
-			$[63] = t29;
-		} else t29 = $[63];
-		let t30;
+			$[63] = t30;
+		} else t30 = $[63];
+		let t31;
 		if ($[64] !== currentItemId) {
-			t30 = (item_10) => item_10.id === currentItemId;
+			t31 = (item_10) => item_10.id === currentItemId;
 			$[64] = currentItemId;
-			$[65] = t30;
-		} else t30 = $[65];
-		let t31;
-		if ($[66] !== selection) {
-			t31 = (item_11) => isItemSelected(selection, item_11.id);
-			$[66] = selection;
-			$[67] = t31;
-		} else t31 = $[67];
+			$[65] = t31;
+		} else t31 = $[65];
 		let t32;
-		if ($[68] !== list) {
-			t32 = (item_12) => list.toggle(item_12.id);
-			$[68] = list;
-			$[69] = t32;
-		} else t32 = $[69];
+		if ($[66] !== highlightedItemId) {
+			t32 = (item_11) => item_11.id === highlightedItemId;
+			$[66] = highlightedItemId;
+			$[67] = t32;
+		} else t32 = $[67];
 		let t33;
+		if ($[68] !== selection) {
+			t33 = (item_12) => isItemSelected(selection, item_12.id);
+			$[68] = selection;
+			$[69] = t33;
+		} else t33 = $[69];
+		let t34;
 		if ($[70] !== list) {
-			t33 = (column_3) => list.toggleSort(column_3.id);
+			t34 = (item_13) => list.toggle(item_13.id);
 			$[70] = list;
-			$[71] = t33;
-		} else t33 = $[71];
-		t28 = /* @__PURE__ */ jsx(Layout, {
+			$[71] = t34;
+		} else t34 = $[71];
+		let t35;
+		if ($[72] !== list) {
+			t35 = (column_3) => list.toggleSort(column_3.id);
+			$[72] = list;
+			$[73] = t35;
+		} else t35 = $[73];
+		t29 = /* @__PURE__ */ jsx(Layout, {
 			items: pageItems,
 			columns,
 			renderValue,
 			getItemLabel,
 			getItemHref,
-			getItemImage: t29,
+			getItemImage: t30,
 			calendar: inCalendar ? {
 				field: calendar.field,
 				timeZone: getCalendarTimeZone([...fields, ...allColumns.map(_temp6)].find((field_0) => field_0?.name === calendar.field)),
@@ -465,26 +473,50 @@ function ListView(t0) {
 				onMonthChange: (month) => list.setMonth(month),
 				more: total !== void 0 && total > pageItems.length ? { total } : cursors !== void 0 && cursors.next !== null ? { total: null } : null
 			} : void 0,
-			isCurrent: t30,
+			isCurrent: t31,
+			isHighlighted: t32,
 			selectable,
-			isSelected: t31,
-			onToggle: t32,
+			isSelected: t33,
+			onToggle: t34,
 			renderActions,
 			sort,
-			onSort: t33,
+			onSort: t35,
 			label,
 			pageSelection: pageCheckbox,
 			renderCell
 		});
 	}
-	const body = t28;
-	let t29;
-	if ($[72] !== className) {
-		t29 = cx(ListView_module_default.list, className);
-		$[72] = className;
-		$[73] = t29;
-	} else t29 = $[73];
-	const t30 = showToolbar ? /* @__PURE__ */ jsxs("div", {
+	const body = t29;
+	const highlightShown = highlightedItemId !== null && pageItems.some((item_14) => item_14.id === highlightedItemId);
+	let t30;
+	if ($[74] !== highlightShown) {
+		t30 = () => {
+			if (!highlightShown) return;
+			const element = root.current?.querySelector("[data-highlighted]");
+			const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+			element?.scrollIntoView?.({
+				block: "nearest",
+				behavior: reduced ? "auto" : "smooth"
+			});
+		};
+		$[74] = highlightShown;
+		$[75] = t30;
+	} else t30 = $[75];
+	let t31;
+	if ($[76] !== highlightShown || $[77] !== highlightedItemId) {
+		t31 = [highlightShown, highlightedItemId];
+		$[76] = highlightShown;
+		$[77] = highlightedItemId;
+		$[78] = t31;
+	} else t31 = $[78];
+	useEffect(t30, t31);
+	let t32;
+	if ($[79] !== className) {
+		t32 = cx(ListView_module_default.list, className);
+		$[79] = className;
+		$[80] = t32;
+	} else t32 = $[80];
+	const t33 = showToolbar ? /* @__PURE__ */ jsxs("div", {
 		className: ListView_module_default.toolbar,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: ListView_module_default.toolbarStart,
@@ -538,43 +570,43 @@ function ListView(t0) {
 			]
 		})]
 	}) : null;
-	let t31;
-	let t32;
-	if ($[74] !== list) {
-		t31 = (id_4) => list.setFilter(id_4, void 0);
-		t32 = () => list.setSearch("");
-		$[74] = list;
-		$[75] = t31;
-		$[76] = t32;
+	let t34;
+	let t35;
+	if ($[81] !== list) {
+		t34 = (id_4) => list.setFilter(id_4, void 0);
+		t35 = () => list.setSearch("");
+		$[81] = list;
+		$[82] = t34;
+		$[83] = t35;
 	} else {
-		t31 = $[75];
-		t32 = $[76];
+		t34 = $[82];
+		t35 = $[83];
 	}
-	let t33;
-	if ($[77] !== allColumns || $[78] !== clearFilters || $[79] !== fields || $[80] !== filterLabels.labels || $[81] !== filterValues || $[82] !== filters || $[83] !== query.q || $[84] !== t31 || $[85] !== t32) {
-		t33 = /* @__PURE__ */ jsx(FilterChips, {
+	let t36;
+	if ($[84] !== allColumns || $[85] !== clearFilters || $[86] !== fields || $[87] !== filterLabels.labels || $[88] !== filterValues || $[89] !== filters || $[90] !== query.q || $[91] !== t34 || $[92] !== t35) {
+		t36 = /* @__PURE__ */ jsx(FilterChips, {
 			filters,
 			values: filterValues,
 			q: query.q,
-			onRemove: t31,
-			onClearSearch: t32,
+			onRemove: t34,
+			onClearSearch: t35,
 			onClear: clearFilters,
 			columns: allColumns,
 			fields,
 			labels: filterLabels.labels
 		});
-		$[77] = allColumns;
-		$[78] = clearFilters;
-		$[79] = fields;
-		$[80] = filterLabels.labels;
-		$[81] = filterValues;
-		$[82] = filters;
-		$[83] = query.q;
-		$[84] = t31;
-		$[85] = t32;
-		$[86] = t33;
-	} else t33 = $[86];
-	const t34 = selectedCount > 0 ? /* @__PURE__ */ jsxs("div", {
+		$[84] = allColumns;
+		$[85] = clearFilters;
+		$[86] = fields;
+		$[87] = filterLabels.labels;
+		$[88] = filterValues;
+		$[89] = filters;
+		$[90] = query.q;
+		$[91] = t34;
+		$[92] = t35;
+		$[93] = t36;
+	} else t36 = $[93];
+	const t37 = selectedCount > 0 ? /* @__PURE__ */ jsxs("div", {
 		className: ListView_module_default.selection,
 		children: [
 			/* @__PURE__ */ jsx("span", {
@@ -597,7 +629,7 @@ function ListView(t0) {
 			selectionActions.length > 0 ? /* @__PURE__ */ jsx("div", {
 				className: ListView_module_default.selectionActions,
 				children: selectionActions.map((action_10) => {
-					const skipped_0 = selectedItems.filter((item_13) => !isAllowedOn(action_10, item_13)).length;
+					const skipped_0 = selectedItems.filter((item_15) => !isAllowedOn(action_10, item_15)).length;
 					return /* @__PURE__ */ jsx(ActionButton, {
 						action: action_10,
 						icons: actionIcons,
@@ -611,21 +643,21 @@ function ListView(t0) {
 			}) : null
 		]
 	}) : null;
-	const t35 = isLoading && items !== void 0;
-	let t36;
-	if ($[87] !== body || $[88] !== t35) {
-		t36 = /* @__PURE__ */ jsx("div", {
+	const t38 = isLoading && items !== void 0;
+	let t39;
+	if ($[94] !== body || $[95] !== t38) {
+		t39 = /* @__PURE__ */ jsx("div", {
 			className: ListView_module_default.body,
-			"aria-busy": t35,
+			"aria-busy": t38,
 			children: body
 		});
-		$[87] = body;
-		$[88] = t35;
-		$[89] = t36;
-	} else t36 = $[89];
-	let t37;
-	if ($[90] !== cursors || $[91] !== error || $[92] !== inCalendar || $[93] !== list || $[94] !== pageItems || $[95] !== perPageOptions || $[96] !== query.cursor || $[97] !== query.page || $[98] !== query.perPage || $[99] !== total) {
-		t37 = inCalendar ? null : cursors !== void 0 && error === null ? /* @__PURE__ */ jsx(CursorPagination, {
+		$[94] = body;
+		$[95] = t38;
+		$[96] = t39;
+	} else t39 = $[96];
+	let t40;
+	if ($[97] !== cursors || $[98] !== error || $[99] !== inCalendar || $[100] !== list || $[101] !== pageItems || $[102] !== perPageOptions || $[103] !== query.cursor || $[104] !== query.page || $[105] !== query.perPage || $[106] !== total) {
+		t40 = inCalendar ? null : cursors !== void 0 && error === null ? /* @__PURE__ */ jsx(CursorPagination, {
 			perPage: query.perPage ?? pageItems.length,
 			hasPrevious: query.cursor !== void 0,
 			hasNext: cursors.next !== null,
@@ -643,61 +675,62 @@ function ListView(t0) {
 			perPageOptions,
 			onPerPageChange: (perPage_0) => list.setPerPage(perPage_0)
 		}) : null;
-		$[90] = cursors;
-		$[91] = error;
-		$[92] = inCalendar;
-		$[93] = list;
-		$[94] = pageItems;
-		$[95] = perPageOptions;
-		$[96] = query.cursor;
-		$[97] = query.page;
-		$[98] = query.perPage;
-		$[99] = total;
-		$[100] = t37;
-	} else t37 = $[100];
-	let t38;
-	if ($[101] !== execute) {
-		t38 = (event_1) => void execute(event_1);
-		$[101] = execute;
-		$[102] = t38;
-	} else t38 = $[102];
-	let t39;
-	if ($[103] !== closeConfirmation || $[104] !== confirming || $[105] !== preview || $[106] !== t38) {
-		t39 = /* @__PURE__ */ jsx(ConfirmDialog, {
+		$[97] = cursors;
+		$[98] = error;
+		$[99] = inCalendar;
+		$[100] = list;
+		$[101] = pageItems;
+		$[102] = perPageOptions;
+		$[103] = query.cursor;
+		$[104] = query.page;
+		$[105] = query.perPage;
+		$[106] = total;
+		$[107] = t40;
+	} else t40 = $[107];
+	let t41;
+	if ($[108] !== execute) {
+		t41 = (event_1) => void execute(event_1);
+		$[108] = execute;
+		$[109] = t41;
+	} else t41 = $[109];
+	let t42;
+	if ($[110] !== closeConfirmation || $[111] !== confirming || $[112] !== preview || $[113] !== t41) {
+		t42 = /* @__PURE__ */ jsx(ConfirmDialog, {
 			event: confirming,
 			preview,
-			onConfirm: t38,
+			onConfirm: t41,
 			onCancel: closeConfirmation
 		});
-		$[103] = closeConfirmation;
-		$[104] = confirming;
-		$[105] = preview;
-		$[106] = t38;
-		$[107] = t39;
-	} else t39 = $[107];
-	let t40;
-	if ($[108] !== t29 || $[109] !== t30 || $[110] !== t33 || $[111] !== t34 || $[112] !== t36 || $[113] !== t37 || $[114] !== t39) {
-		t40 = /* @__PURE__ */ jsxs("div", {
-			className: t29,
+		$[110] = closeConfirmation;
+		$[111] = confirming;
+		$[112] = preview;
+		$[113] = t41;
+		$[114] = t42;
+	} else t42 = $[114];
+	let t43;
+	if ($[115] !== t32 || $[116] !== t33 || $[117] !== t36 || $[118] !== t37 || $[119] !== t39 || $[120] !== t40 || $[121] !== t42) {
+		t43 = /* @__PURE__ */ jsxs("div", {
+			ref: root,
+			className: t32,
 			children: [
-				t30,
 				t33,
-				t34,
 				t36,
 				t37,
-				t39
+				t39,
+				t40,
+				t42
 			]
 		});
-		$[108] = t29;
-		$[109] = t30;
-		$[110] = t33;
-		$[111] = t34;
-		$[112] = t36;
-		$[113] = t37;
-		$[114] = t39;
-		$[115] = t40;
-	} else t40 = $[115];
-	return t40;
+		$[115] = t32;
+		$[116] = t33;
+		$[117] = t36;
+		$[118] = t37;
+		$[119] = t39;
+		$[120] = t40;
+		$[121] = t42;
+		$[122] = t43;
+	} else t43 = $[122];
+	return t43;
 }
 function _temp6(column_2) {
 	return column_2.field;