@panneau/lists 5.0.0-alpha.12 → 5.0.0-alpha.13

package/dist/ListView.js

@@ -9,14 +9,19 @@ 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 { getShownColumns } from "./columns.js";
 import { FilterChips, FilterControls, useFilterLabels } from "./filters/Filters.js";
+import { getImageUrl } from "./images.js";
+import { InlineCell } from "./inline/InlineCell.js";
+import { getInlineField } from "./inline/editable.js";
 import { countSelected, getPageSelection, isItemSelected } from "./selection.js";
+import { ColumnMenu } from "./toolbar/ColumnMenu.js";
 import { LayoutSwitch } from "./toolbar/LayoutSwitch.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 { selectItemActions, usePlugins } from "@panneau/core";
+import { currentMonth, formatRuleFailure, 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";
@@ -32,147 +37,187 @@ function keyOf(action, item) {
 * fetches nothing: the caller gives the items of the list's query and their total.
 */
 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 $ = c(118);
+	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, getItemLabel: getItemLabelProp, getItemHref, getLinkHref, currentItemId: t9, displays, layoutComponents, filterControls, inlineEdit: t10, onInlineEdit, formatError: t11, 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;
+	if ($[0] !== t4) {
+		t12 = t4 === void 0 ? [] : t4;
+		$[0] = t4;
+		$[1] = t12;
+	} else t12 = $[1];
+	const filtersProp = t12;
+	let t13;
+	if ($[2] !== t5) {
+		t13 = t5 === void 0 ? [] : t5;
+		$[2] = t5;
+		$[3] = t13;
+	} else t13 = $[3];
+	const fields = t13;
+	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 intl = usePanneauIntl();
 	const toasts = useToast();
 	const plugins = usePlugins();
-	const { query, selection } = useListState(list);
+	const { query, view, selection } = useListState(list);
 	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);
-	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;
-	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;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = {};
+		$[4] = t14;
+	} else t14 = $[4];
+	const [saved, setSaved] = useState(t14);
 	let t15;
-	if ($[16] !== plugins.listLayouts) {
-		t15 = Object.fromEntries(plugins.listLayouts);
-		$[16] = plugins.listLayouts;
-		$[17] = t15;
-	} else t15 = $[17];
-	const t16 = t15;
+	if ($[5] !== items) {
+		t15 = (item) => {
+			const base = items?.find((candidate) => candidate.id === item.id);
+			if (base !== void 0) setSaved((current) => ({
+				...current,
+				[item.id]: {
+					base,
+					item
+				}
+			}));
+		};
+		$[5] = items;
+		$[6] = t15;
+	} else t15 = $[6];
+	const showItem = t15;
+	let t16;
+	if ($[7] !== ariaLabel || $[8] !== intl) {
+		t16 = ariaLabel ?? intl.formatMessage(messages.list);
+		$[7] = ariaLabel;
+		$[8] = intl;
+		$[9] = t16;
+	} else t16 = $[9];
+	const label = t16;
 	let t17;
-	if ($[18] !== layoutComponents || $[19] !== t16) {
-		t17 = {
+	if ($[10] !== saved) {
+		t17 = (item_0) => saved[item_0.id]?.base === item_0 ? saved[item_0.id]?.item ?? item_0 : item_0;
+		$[10] = saved;
+		$[11] = t17;
+	} else t17 = $[11];
+	const pageItems = (items ?? []).map(t17);
+	const count = total ?? pageItems.length;
+	let t18;
+	if ($[12] !== query.sort) {
+		t18 = query.sort ?? [];
+		$[12] = query.sort;
+		$[13] = t18;
+	} else t18 = $[13];
+	const sort = t18;
+	let t19;
+	if ($[14] !== plugins.listLayouts) {
+		t19 = Object.fromEntries(plugins.listLayouts);
+		$[14] = plugins.listLayouts;
+		$[15] = t19;
+	} else t19 = $[15];
+	const t20 = t19;
+	let t21;
+	if ($[16] !== layoutComponents || $[17] !== t20) {
+		t21 = {
 			...builtInLayouts,
-			...t16,
+			...t20,
 			...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";
+		$[16] = layoutComponents;
+		$[17] = t20;
+		$[18] = t21;
+	} else t21 = $[18];
+	const allLayouts = t21;
+	let t22;
+	if ($[19] !== allLayouts || $[20] !== calendar || $[21] !== itemImage) {
+		t22 = (id) => allLayouts[id] !== void 0 && (id !== "gallery" || itemImage !== void 0) && (id !== "calendar" || calendar !== null);
+		$[19] = allLayouts;
+		$[20] = calendar;
+		$[21] = itemImage;
+		$[22] = t22;
+	} else t22 = $[22];
+	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 t23;
+	if ($[23] !== calendar || $[24] !== filtersProp || $[25] !== inCalendar) {
+		t23 = inCalendar ? filtersProp.filter((filter) => filter.id !== calendar.filter) : filtersProp;
+		$[23] = calendar;
+		$[24] = filtersProp;
+		$[25] = inCalendar;
+		$[26] = t23;
+	} else t23 = $[26];
+	const filters = t23;
+	let t24;
+	if ($[27] !== calendar || $[28] !== inCalendar || $[29] !== query.filter) {
+		t24 = Object.fromEntries(Object.entries(query.filter ?? {}).filter((t25) => {
+			const [id_0] = t25;
+			return !(inCalendar && id_0 === calendar.filter);
+		}));
+		$[27] = calendar;
+		$[28] = inCalendar;
+		$[29] = query.filter;
+		$[30] = t24;
+	} else t24 = $[30];
+	const filterValues = t24;
+	let t25;
+	if ($[31] !== filterValues || $[32] !== query.q) {
+		t25 = Object.keys(filterValues).length > 0 || (query.q ?? "") !== "";
+		$[31] = filterValues;
+		$[32] = query.q;
+		$[33] = t25;
+	} else t25 = $[33];
+	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 t20;
-	if ($[28] !== selection) {
-		t20 = (item) => isItemSelected(selection, item.id);
-		$[28] = selection;
-		$[29] = t20;
-	} else t20 = $[29];
-	const selectedItems = pageItems.filter(t20);
+	let t26;
+	if ($[34] !== selection) {
+		t26 = (item_1) => isItemSelected(selection, item_1.id);
+		$[34] = selection;
+		$[35] = t26;
+	} else t26 = $[35];
+	const selectedItems = pageItems.filter(t26);
 	const pageSelection = getPageSelection(selection, pageItems);
-	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 getItemLabel = (item_2) => {
+		if (getItemLabelProp !== void 0) return getItemLabelProp(item_2);
+		const titleColumn = allColumns.find((column) => column.id === itemTitle) ?? (itemTitle === void 0 ? columns[0] : void 0);
+		const title = titleColumn !== void 0 ? toText(getColumnValue(item_2, titleColumn, intl.locale), intl.locale) : itemTitle !== void 0 ? toText(item_2[itemTitle], intl.locale) : "";
+		return title !== "" ? title : item_2.id;
+	};
 	const renderValue = useRenderValue(displays);
+	const renderCell = (item_3, column_0, content) => {
+		const field = onInlineEdit !== void 0 ? getInlineField(column_0, item_3, inlineEdit) : null;
+		if (field === null || onInlineEdit === void 0) return content;
+		return /* @__PURE__ */ jsx(InlineCell, {
+			item: item_3,
+			field,
+			itemLabel: getItemLabel(item_3),
+			renderValue: (current_0) => renderValue(current_0, column_0),
+			onSave: (base_0, value) => onInlineEdit({
+				item: base_0,
+				field,
+				value
+			}),
+			onItem: showItem,
+			formatError: (failure) => formatError(failure, field.name),
+			children: content
+		}, `${item_3.id}\u0000${column_0.id}`);
+	};
 	const closeConfirmation = () => {
 		confirmation.current = confirmation.current + 1;
 		setConfirming(null);
@@ -195,19 +240,19 @@ function ListView(t0) {
 	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 current_1 = 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 (confirmation.current !== current_1) 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 (confirmation.current !== current_1) return;
 				if (needsConfirmation(event_0)) setPreview(null);
 				else execute(event_0);
 			});
@@ -216,10 +261,10 @@ function ListView(t0) {
 		if (needsConfirmation(event_0)) setConfirming(event_0);
 		else execute(event_0);
 	};
-	const runOnItem = (action_3, item_1) => run({
+	const runOnItem = (action_3, item_4) => run({
 		action: action_3,
 		scope: "item",
-		item: item_1,
+		item: item_4,
 		count: 1,
 		skipped: []
 	});
@@ -231,7 +276,7 @@ function ListView(t0) {
 			scope: "selection",
 			selection: selected,
 			count: selectedCount,
-			skipped: selectedItems.filter((item_2) => !isAllowedOn(action_4, item_2))
+			skipped: selectedItems.filter((item_5) => !isAllowedOn(action_4, item_5))
 		});
 	};
 	const runOnResource = (action_5) => run({
@@ -240,28 +285,28 @@ function ListView(t0) {
 		count,
 		skipped: []
 	});
-	const renderActions = (item_3) => {
-		const allowed = selectItemActions(grouped.row, item_3, "row", { getLinkHref });
-		const menu = selectItemActions(grouped.menu, item_3, "menu", { getLinkHref });
+	const renderActions = (item_6) => {
+		const allowed = selectItemActions(grouped.row, item_6, "row", { getLinkHref });
+		const menu = selectItemActions(grouped.menu, item_6, "menu", { getLinkHref });
 		if (allowed.length === 0 && menu.length === 0) return null;
-		const running = pending?.endsWith(`\u0000${item_3.id}`) === true ? pending.split("\0")[0] : null;
+		const running = pending?.endsWith(`\u0000${item_6.id}`) === true ? pending.split("\0")[0] : null;
 		return /* @__PURE__ */ jsx(RowActions, {
-			itemLabel: getItemLabel(item_3),
+			itemLabel: getItemLabel(item_6),
 			actions: allowed,
 			menu,
 			pending: running ?? null,
-			onRun: (action_6) => runOnItem(action_6, item_3),
+			onRun: (action_6) => runOnItem(action_6, item_6),
 			icons: actionIcons
 		});
 	};
-	let t22;
-	if ($[35] !== intl) {
-		t22 = intl.formatMessage(messages.selectPage);
-		$[35] = intl;
-		$[36] = t22;
-	} else t22 = $[36];
+	let t27;
+	if ($[36] !== intl) {
+		t27 = intl.formatMessage(messages.selectPage);
+		$[36] = intl;
+		$[37] = t27;
+	} else t27 = $[37];
 	const pageCheckbox = /* @__PURE__ */ jsx(Checkbox, {
-		"aria-label": t22,
+		"aria-label": t27,
 		isSelected: pageSelection === "all",
 		isIndeterminate: pageSelection === "some",
 		isDisabled: pageItems.length === 0,
@@ -271,165 +316,170 @@ function ListView(t0) {
 			else list.select(ids);
 		}
 	});
-	const sortable = columns.some(_temp5);
-	const showToolbar = search || filters.length > 0 || sortable || layouts.length > 1 || resourceActions.length > 0 || toolbar !== void 0;
-	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));
+	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 t28;
+	if ($[38] !== filterValues || $[39] !== list || $[40] !== query.q) {
+		t28 = function clearFilters() {
+			Object.keys(filterValues).forEach((id_1) => list.setFilter(id_1, void 0));
 			if ((query.q ?? "") !== "") list.setSearch("");
 		};
-		$[37] = filterValues;
-		$[38] = list;
-		$[39] = query.q;
-		$[40] = t23;
-	} else t23 = $[40];
-	const clearFilters = t23;
-	let t24;
+		$[38] = filterValues;
+		$[39] = list;
+		$[40] = query.q;
+		$[41] = t28;
+	} else t28 = $[41];
+	const clearFilters = t28;
+	let t29;
 	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, {
+			let t30;
+			if ($[42] !== intl) {
+				t30 = intl.formatMessage(messages.loadFailed);
+				$[42] = intl;
+				$[43] = t30;
+			} else t30 = $[43];
+			let t31;
+			if ($[44] !== intl || $[45] !== onRetry) {
+				t31 = 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, {
+				$[44] = intl;
+				$[45] = onRetry;
+				$[46] = t31;
+			} else t31 = $[46];
+			let t32;
+			if ($[47] !== error.message || $[48] !== t30 || $[49] !== t31) {
+				t32 = /* @__PURE__ */ jsx(Alert, {
 					tone: "danger",
-					title: t25,
-					actions: t26,
+					title: t30,
+					actions: t31,
 					children: error.message
 				});
-				$[46] = error.message;
-				$[47] = t25;
-				$[48] = t26;
-				$[49] = t27;
-			} else t27 = $[49];
-			t24 = t27;
+				$[47] = error.message;
+				$[48] = t30;
+				$[49] = t31;
+				$[50] = t32;
+			} else t32 = $[50];
+			t29 = t32;
 			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;
+			t29 = /* @__PURE__ */ jsx(ListSkeleton, {
+				Layout,
+				columns,
+				perPage: query.perPage,
+				sort,
+				label
+			});
 			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, {
+		if (pageItems.length === 0 && !inCalendar) {
+			let t30;
+			if ($[51] !== emptyMessage || $[52] !== hasQuery || $[53] !== intl) {
+				t30 = hasQuery ? intl.formatMessage(messages.noResults) : emptyMessage ?? intl.formatMessage(messages.empty);
+				$[51] = emptyMessage;
+				$[52] = hasQuery;
+				$[53] = intl;
+				$[54] = t30;
+			} else t30 = $[54];
+			let t31;
+			if ($[55] !== t30) {
+				t31 = /* @__PURE__ */ jsx("p", { children: t30 });
+				$[55] = t30;
+				$[56] = t31;
+			} else t31 = $[56];
+			let t32;
+			if ($[57] !== clearFilters || $[58] !== hasQuery || $[59] !== intl) {
+				t32 = 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", {
+				$[57] = clearFilters;
+				$[58] = hasQuery;
+				$[59] = intl;
+				$[60] = t32;
+			} else t32 = $[60];
+			let t33;
+			if ($[61] !== t31 || $[62] !== t32) {
+				t33 = /* @__PURE__ */ jsxs("div", {
 					className: ListView_module_default.state,
-					children: [t26, t27]
+					children: [t31, t32]
 				});
-				$[66] = t26;
-				$[67] = t27;
-				$[68] = t28;
-			} else t28 = $[68];
-			t24 = t28;
+				$[61] = t31;
+				$[62] = t32;
+				$[63] = t33;
+			} else t33 = $[63];
+			t29 = t33;
 			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, {
+		let t30;
+		if ($[64] !== itemImage) {
+			t30 = itemImage !== void 0 ? (item_8) => getImageUrl(item_8[itemImage]) : void 0;
+			$[64] = itemImage;
+			$[65] = t30;
+		} else t30 = $[65];
+		let t31;
+		if ($[66] !== currentItemId) {
+			t31 = (item_9) => item_9.id === currentItemId;
+			$[66] = currentItemId;
+			$[67] = t31;
+		} else t31 = $[67];
+		let t32;
+		if ($[68] !== selection) {
+			t32 = (item_10) => isItemSelected(selection, item_10.id);
+			$[68] = selection;
+			$[69] = t32;
+		} else t32 = $[69];
+		let t33;
+		if ($[70] !== list) {
+			t33 = (item_11) => list.toggle(item_11.id);
+			$[70] = list;
+			$[71] = t33;
+		} else t33 = $[71];
+		let t34;
+		if ($[72] !== list) {
+			t34 = (column_2) => list.toggleSort(column_2.id);
+			$[72] = list;
+			$[73] = t34;
+		} else t34 = $[73];
+		t29 = /* @__PURE__ */ jsx(Layout, {
 			items: pageItems,
 			columns,
 			renderValue,
 			getItemLabel,
 			getItemHref,
-			isCurrent: t25,
+			getItemImage: t30,
+			calendar: inCalendar ? {
+				field: calendar.field,
+				month: view.month ?? currentMonth(),
+				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: t31,
 			selectable,
-			isSelected: t26,
-			onToggle: t27,
+			isSelected: t32,
+			onToggle: t33,
 			renderActions,
 			sort,
-			onSort: t28,
+			onSort: t34,
 			label,
-			pageSelection: pageCheckbox
+			pageSelection: pageCheckbox,
+			renderCell
 		});
 	}
-	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", {
+	const body = t29;
+	let t30;
+	if ($[74] !== className) {
+		t30 = cx(ListView_module_default.list, className);
+		$[74] = className;
+		$[75] = t30;
+	} else t30 = $[75];
+	const t31 = showToolbar ? /* @__PURE__ */ jsxs("div", {
 		className: ListView_module_default.toolbar,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: ListView_module_default.toolbarStart,
@@ -439,10 +489,10 @@ function ListView(t0) {
 			}) : null, filters.length > 0 ? /* @__PURE__ */ jsx(FilterControls, {
 				filters,
 				values: filterValues,
-				onChange: (id_1, value) => list.setFilter(id_1, value),
+				onChange: (id_2, value_0) => list.setFilter(id_2, value_0),
 				onLabel: filterLabels.remember,
 				controls: filterControls,
-				columns,
+				columns: allColumns,
 				fields,
 				labels: filterLabels.labels
 			}) : null]
@@ -452,7 +502,7 @@ function ListView(t0) {
 				sortable ? /* @__PURE__ */ jsx("div", {
 					className: layout === "table" ? ListView_module_default.tableSort : void 0,
 					children: /* @__PURE__ */ jsx(SortSelect, {
-						columns,
+						columns: allColumns,
 						sort,
 						onChange: (next) => list.setSort(next)
 					})
@@ -461,10 +511,16 @@ function ListView(t0) {
 					layouts,
 					value: layout,
 					onChange: (next_0) => {
-						setLayout(next_0);
+						if (controlledLayout === void 0) list.setLayout(next_0);
 						onLayoutChange?.(next_0);
 					}
 				}) : null,
+				choosesColumns ? /* @__PURE__ */ jsx(ColumnMenu, {
+					columns: allColumns,
+					shown: columns,
+					onChange: (ids_0) => list.setColumns(ids_0),
+					onReset: view.columns !== void 0 ? () => list.resetColumns() : null
+				}) : null,
 				resourceActions.filter((action_7) => selectedCount === 0 || !hasScope(action_7, "selection")).map((action_8) => /* @__PURE__ */ jsx(ActionButton, {
 					action: action_8,
 					icons: actionIcons,
@@ -477,43 +533,43 @@ function ListView(t0) {
 			]
 		})]
 	}) : 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;
+	let t32;
+	let t33;
+	if ($[76] !== list) {
+		t32 = (id_3) => list.setFilter(id_3, void 0);
+		t33 = () => list.setSearch("");
+		$[76] = list;
+		$[77] = t32;
+		$[78] = t33;
 	} else {
-		t27 = $[80];
-		t28 = $[81];
+		t32 = $[77];
+		t33 = $[78];
 	}
-	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, {
+	let t34;
+	if ($[79] !== allColumns || $[80] !== clearFilters || $[81] !== fields || $[82] !== filterLabels.labels || $[83] !== filterValues || $[84] !== filters || $[85] !== query.q || $[86] !== t32 || $[87] !== t33) {
+		t34 = /* @__PURE__ */ jsx(FilterChips, {
 			filters,
 			values: filterValues,
 			q: query.q,
-			onRemove: t27,
-			onClearSearch: t28,
+			onRemove: t32,
+			onClearSearch: t33,
 			onClear: clearFilters,
-			columns,
+			columns: allColumns,
 			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", {
+		$[79] = allColumns;
+		$[80] = clearFilters;
+		$[81] = fields;
+		$[82] = filterLabels.labels;
+		$[83] = filterValues;
+		$[84] = filters;
+		$[85] = query.q;
+		$[86] = t32;
+		$[87] = t33;
+		$[88] = t34;
+	} else t34 = $[88];
+	const t35 = selectedCount > 0 ? /* @__PURE__ */ jsxs("div", {
 		className: ListView_module_default.selection,
 		children: [
 			/* @__PURE__ */ jsx("span", {
@@ -536,7 +592,7 @@ function ListView(t0) {
 			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;
+					const skipped_0 = selectedItems.filter((item_12) => !isAllowedOn(action_9, item_12)).length;
 					return /* @__PURE__ */ jsx(ActionButton, {
 						action: action_9,
 						icons: actionIcons,
@@ -550,21 +606,21 @@ function ListView(t0) {
 			}) : null
 		]
 	}) : null;
-	const t31 = isLoading && items !== void 0;
-	let t32;
-	if ($[92] !== body || $[93] !== t31) {
-		t32 = /* @__PURE__ */ jsx("div", {
+	const t36 = isLoading && items !== void 0;
+	let t37;
+	if ($[89] !== body || $[90] !== t36) {
+		t37 = /* @__PURE__ */ jsx("div", {
 			className: ListView_module_default.body,
-			"aria-busy": t31,
+			"aria-busy": t36,
 			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, {
+		$[89] = body;
+		$[90] = t36;
+		$[91] = t37;
+	} else t37 = $[91];
+	let t38;
+	if ($[92] !== cursors || $[93] !== error || $[94] !== inCalendar || $[95] !== list || $[96] !== pageItems || $[97] !== perPageOptions || $[98] !== query.cursor || $[99] !== query.page || $[100] !== query.perPage || $[101] !== total) {
+		t38 = inCalendar ? null : cursors !== void 0 && error === null ? /* @__PURE__ */ jsx(CursorPagination, {
 			perPage: query.perPage ?? pageItems.length,
 			hasPrevious: query.cursor !== void 0,
 			hasNext: cursors.next !== null,
@@ -582,66 +638,67 @@ function ListView(t0) {
 			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, {
+		$[92] = cursors;
+		$[93] = error;
+		$[94] = inCalendar;
+		$[95] = list;
+		$[96] = pageItems;
+		$[97] = perPageOptions;
+		$[98] = query.cursor;
+		$[99] = query.page;
+		$[100] = query.perPage;
+		$[101] = total;
+		$[102] = t38;
+	} else t38 = $[102];
+	let t39;
+	if ($[103] !== execute) {
+		t39 = (event_1) => void execute(event_1);
+		$[103] = execute;
+		$[104] = t39;
+	} else t39 = $[104];
+	let t40;
+	if ($[105] !== closeConfirmation || $[106] !== confirming || $[107] !== preview || $[108] !== t39) {
+		t40 = /* @__PURE__ */ jsx(ConfirmDialog, {
 			event: confirming,
 			preview,
-			onConfirm: t34,
+			onConfirm: t39,
 			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,
+		$[105] = closeConfirmation;
+		$[106] = confirming;
+		$[107] = preview;
+		$[108] = t39;
+		$[109] = t40;
+	} else t40 = $[109];
+	let t41;
+	if ($[110] !== t30 || $[111] !== t31 || $[112] !== t34 || $[113] !== t35 || $[114] !== t37 || $[115] !== t38 || $[116] !== t40) {
+		t41 = /* @__PURE__ */ jsxs("div", {
+			className: t30,
 			children: [
-				t26,
-				t29,
-				t30,
-				t32,
-				t33,
-				t35
+				t31,
+				t34,
+				t35,
+				t37,
+				t38,
+				t40
 			]
 		});
-		$[112] = t25;
-		$[113] = t26;
-		$[114] = t29;
-		$[115] = t30;
-		$[116] = t32;
-		$[117] = t33;
-		$[118] = t35;
-		$[119] = t36;
-	} else t36 = $[119];
-	return t36;
+		$[110] = t30;
+		$[111] = t31;
+		$[112] = t34;
+		$[113] = t35;
+		$[114] = t37;
+		$[115] = t38;
+		$[116] = t40;
+		$[117] = t41;
+	} else t41 = $[117];
+	return t41;
 }
-function _temp5(column_0) {
-	return column_0.sortable === true;
+function _temp5(column_1) {
+	return column_1.sortable === true;
 }
-function _temp4(item_4) {
-	return item_4.id;
+function _temp4(item_7) {
+	return item_7.id;
 }
 function _temp3(action_1) {
 	return hasScope(action_1, "resource");
@@ -650,7 +707,7 @@ 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;
+	return (hasScope(action, "selection") || hasScope(action, "resource")) && all.findIndex((candidate_0) => candidate_0.id === action.id) === index;
 }
 //#endregion
 export { ListView };