@panneau/lists 5.0.0-alpha.16 → 5.0.0-alpha.18

package/dist/layouts/TableLayout.js

@@ -1,11 +1,12 @@
 import { messages } from "../messages.js";
 import { ItemTitle } from "./ItemTitle.js";
+import { RowActionsFit, fitContent, useRowActionsFit } from "../actions/fit.js";
 import { cx } from "../cx.js";
 import TableLayout_module_default from "./TableLayout.module.js";
 import { c } from "react/compiler-runtime";
 import { Checkbox, Icon, usePanneauIntl } from "@panneau/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
+import { ArrowDown, ArrowUp, ArrowUpDown, ImageOff } from "lucide-react";
 //#region src/layouts/TableLayout.tsx
 /** The sort direction of a column, from the first `sort` value. */
 function getSortDirection(sort, column) {
@@ -18,12 +19,39 @@ function alignClass(column) {
 	return column.align === "end" ? TableLayout_module_default.end : void 0;
 }
 /**
-* Items as a table, with sortable column headers. On narrow lists (phones), each row turns into a
-* block that shows the label of each value.
+* The thumbnail of an item, before its title (decision 0061): a square of its image, loaded when it
+* comes into view, or a placeholder. It has no text: the title is next to it.
+*/
+function Thumbnail(t0) {
+	const $ = c(2);
+	const { url } = t0;
+	let t1;
+	if ($[0] !== url) {
+		t1 = /* @__PURE__ */ jsx("span", {
+			className: TableLayout_module_default.thumbnail,
+			children: url !== null ? /* @__PURE__ */ jsx("img", {
+				src: url,
+				alt: "",
+				loading: "lazy",
+				decoding: "async"
+			}) : /* @__PURE__ */ jsx(Icon, {
+				icon: ImageOff,
+				size: "sm"
+			})
+		});
+		$[0] = url;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+/**
+* Items as a table, with sortable column headers. With the image of items (`getItemImage`), each
+* title starts with a thumbnail. On narrow lists (phones), each row turns into a block that shows
+* the label of each value.
 */
 function TableLayout(t0) {
-	const $ = c(56);
-	const { items, columns, renderValue, getItemLabel, getItemHref, isCurrent, selectable, isSelected, onToggle, renderActions, sort, onSort, label, pageSelection, renderCell } = t0;
+	const $ = c(67);
+	const { items, columns, renderValue, getItemLabel, getItemHref, getItemImage, isCurrent, selectable, isSelected, onToggle, renderActions, sort, onSort, label, pageSelection, renderCell } = t0;
 	const intl = usePanneauIntl();
 	let actions;
 	let t1;
@@ -46,20 +74,28 @@ function TableLayout(t0) {
 	}
 	const hasActions = t1;
 	let t2;
-	if ($[6] !== pageSelection || $[7] !== selectable) {
-		t2 = selectable ? /* @__PURE__ */ jsx("th", {
-			className: TableLayout_module_default.check,
-			children: pageSelection
-		}) : null;
-		$[6] = pageSelection;
-		$[7] = selectable;
+	if ($[6] !== columns || $[7] !== items) {
+		t2 = fitContent(items, columns);
+		$[6] = columns;
+		$[7] = items;
 		$[8] = t2;
 	} else t2 = $[8];
+	const [fitLevel, measureList] = useRowActionsFit(t2);
 	let t3;
-	if ($[9] !== columns || $[10] !== onSort || $[11] !== sort) {
-		let t4;
-		if ($[13] !== onSort || $[14] !== sort) {
-			t4 = (column) => {
+	if ($[9] !== pageSelection || $[10] !== selectable) {
+		t3 = selectable ? /* @__PURE__ */ jsx("th", {
+			className: TableLayout_module_default.check,
+			children: pageSelection
+		}) : null;
+		$[9] = pageSelection;
+		$[10] = selectable;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== columns || $[13] !== onSort || $[14] !== sort) {
+		let t5;
+		if ($[16] !== onSort || $[17] !== sort) {
+			t5 = (column) => {
 				const direction = getSortDirection(sort, column);
 				return /* @__PURE__ */ jsx("th", {
 					scope: "col",
@@ -80,46 +116,46 @@ function TableLayout(t0) {
 					}) : column.label ?? column.id
 				}, column.id);
 			};
-			$[13] = onSort;
-			$[14] = sort;
-			$[15] = t4;
-		} else t4 = $[15];
-		t3 = columns.map(t4);
-		$[9] = columns;
-		$[10] = onSort;
-		$[11] = sort;
-		$[12] = t3;
-	} else t3 = $[12];
-	let t4;
-	if ($[16] !== hasActions || $[17] !== intl) {
-		t4 = hasActions ? /* @__PURE__ */ jsx("th", {
+			$[16] = onSort;
+			$[17] = sort;
+			$[18] = t5;
+		} else t5 = $[18];
+		t4 = columns.map(t5);
+		$[12] = columns;
+		$[13] = onSort;
+		$[14] = sort;
+		$[15] = t4;
+	} else t4 = $[15];
+	let t5;
+	if ($[19] !== hasActions || $[20] !== intl) {
+		t5 = hasActions ? /* @__PURE__ */ jsx("th", {
 			className: TableLayout_module_default.actionsCell,
 			children: /* @__PURE__ */ jsx("span", {
 				className: TableLayout_module_default.visuallyHidden,
 				children: intl.formatMessage(messages.actions)
 			})
 		}) : null;
-		$[16] = hasActions;
-		$[17] = intl;
-		$[18] = t4;
-	} else t4 = $[18];
-	let t5;
-	if ($[19] !== t2 || $[20] !== t3 || $[21] !== t4) {
-		t5 = /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-			t2,
+		$[19] = hasActions;
+		$[20] = intl;
+		$[21] = t5;
+	} else t5 = $[21];
+	let t6;
+	if ($[22] !== t3 || $[23] !== t4 || $[24] !== t5) {
+		t6 = /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
 			t3,
-			t4
+			t4,
+			t5
 		] }) });
-		$[19] = t2;
-		$[20] = t3;
-		$[21] = t4;
-		$[22] = t5;
-	} else t5 = $[22];
-	let t6;
-	if ($[23] !== actions || $[24] !== columns || $[25] !== getItemHref || $[26] !== getItemLabel || $[27] !== hasActions || $[28] !== intl || $[29] !== isCurrent || $[30] !== isSelected || $[31] !== items || $[32] !== onToggle || $[33] !== renderCell || $[34] !== renderValue || $[35] !== selectable) {
-		let t7;
-		if ($[37] !== actions || $[38] !== columns || $[39] !== getItemHref || $[40] !== getItemLabel || $[41] !== hasActions || $[42] !== intl || $[43] !== isCurrent || $[44] !== isSelected || $[45] !== onToggle || $[46] !== renderCell || $[47] !== renderValue || $[48] !== selectable) {
-			t7 = (item_0, row) => {
+		$[22] = t3;
+		$[23] = t4;
+		$[24] = t5;
+		$[25] = t6;
+	} else t6 = $[25];
+	let t7;
+	if ($[26] !== actions || $[27] !== columns || $[28] !== getItemHref || $[29] !== getItemImage || $[30] !== getItemLabel || $[31] !== hasActions || $[32] !== intl || $[33] !== isCurrent || $[34] !== isSelected || $[35] !== items || $[36] !== onToggle || $[37] !== renderCell || $[38] !== renderValue || $[39] !== selectable) {
+		let t8;
+		if ($[41] !== actions || $[42] !== columns || $[43] !== getItemHref || $[44] !== getItemImage || $[45] !== getItemLabel || $[46] !== hasActions || $[47] !== intl || $[48] !== isCurrent || $[49] !== isSelected || $[50] !== onToggle || $[51] !== renderCell || $[52] !== renderValue || $[53] !== selectable) {
+			t8 = (item_0, row) => {
 				const selected = selectable && isSelected(item_0);
 				const href = getItemHref?.(item_0) ?? null;
 				const current = isCurrent?.(item_0) ?? false;
@@ -141,12 +177,16 @@ function TableLayout(t0) {
 								current,
 								children: renderValue(item_0, column_0)
 							}) : renderValue(item_0, column_0);
+							const cell = /* @__PURE__ */ jsx("span", { children: renderCell !== void 0 ? renderCell(item_0, column_0, content) : content });
 							return /* @__PURE__ */ jsxs("td", {
 								className: cx(alignClass(column_0), index === 0 && TableLayout_module_default.title),
 								children: [/* @__PURE__ */ jsx("span", {
 									className: TableLayout_module_default.cellLabel,
 									children: column_0.label ?? column_0.id
-								}), /* @__PURE__ */ jsx("span", { children: renderCell !== void 0 ? renderCell(item_0, column_0, content) : content })]
+								}), index === 0 && getItemImage !== void 0 ? /* @__PURE__ */ jsxs("span", {
+									className: TableLayout_module_default.withThumbnail,
+									children: [/* @__PURE__ */ jsx(Thumbnail, { url: getItemImage(item_0) }), cell]
+								}) : cell]
 							}, column_0.id);
 						}),
 						hasActions ? /* @__PURE__ */ jsx("td", {
@@ -156,58 +196,78 @@ function TableLayout(t0) {
 					]
 				}, item_0.id);
 			};
-			$[37] = actions;
-			$[38] = columns;
-			$[39] = getItemHref;
-			$[40] = getItemLabel;
-			$[41] = hasActions;
-			$[42] = intl;
-			$[43] = isCurrent;
-			$[44] = isSelected;
-			$[45] = onToggle;
-			$[46] = renderCell;
-			$[47] = renderValue;
-			$[48] = selectable;
-			$[49] = t7;
-		} else t7 = $[49];
-		t6 = items.map(t7);
-		$[23] = actions;
-		$[24] = columns;
-		$[25] = getItemHref;
-		$[26] = getItemLabel;
-		$[27] = hasActions;
-		$[28] = intl;
-		$[29] = isCurrent;
-		$[30] = isSelected;
-		$[31] = items;
-		$[32] = onToggle;
-		$[33] = renderCell;
-		$[34] = renderValue;
-		$[35] = selectable;
-		$[36] = t6;
-	} else t6 = $[36];
-	let t7;
-	if ($[50] !== t6) {
-		t7 = /* @__PURE__ */ jsx("tbody", { children: t6 });
-		$[50] = t6;
-		$[51] = t7;
-	} else t7 = $[51];
+			$[41] = actions;
+			$[42] = columns;
+			$[43] = getItemHref;
+			$[44] = getItemImage;
+			$[45] = getItemLabel;
+			$[46] = hasActions;
+			$[47] = intl;
+			$[48] = isCurrent;
+			$[49] = isSelected;
+			$[50] = onToggle;
+			$[51] = renderCell;
+			$[52] = renderValue;
+			$[53] = selectable;
+			$[54] = t8;
+		} else t8 = $[54];
+		t7 = items.map(t8);
+		$[26] = actions;
+		$[27] = columns;
+		$[28] = getItemHref;
+		$[29] = getItemImage;
+		$[30] = getItemLabel;
+		$[31] = hasActions;
+		$[32] = intl;
+		$[33] = isCurrent;
+		$[34] = isSelected;
+		$[35] = items;
+		$[36] = onToggle;
+		$[37] = renderCell;
+		$[38] = renderValue;
+		$[39] = selectable;
+		$[40] = t7;
+	} else t7 = $[40];
 	let t8;
-	if ($[52] !== label || $[53] !== t5 || $[54] !== t7) {
-		t8 = /* @__PURE__ */ jsx("div", {
+	if ($[55] !== t7) {
+		t8 = /* @__PURE__ */ jsx("tbody", { children: t7 });
+		$[55] = t7;
+		$[56] = t8;
+	} else t8 = $[56];
+	let t9;
+	if ($[57] !== label || $[58] !== t6 || $[59] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("table", {
+			className: TableLayout_module_default.table,
+			"aria-label": label,
+			children: [t6, t8]
+		});
+		$[57] = label;
+		$[58] = t6;
+		$[59] = t8;
+		$[60] = t9;
+	} else t9 = $[60];
+	let t10;
+	if ($[61] !== measureList || $[62] !== t9) {
+		t10 = /* @__PURE__ */ jsx("div", {
 			className: TableLayout_module_default.scroller,
-			children: /* @__PURE__ */ jsxs("table", {
-				className: TableLayout_module_default.table,
-				"aria-label": label,
-				children: [t5, t7]
-			})
+			ref: measureList,
+			children: t9
+		});
+		$[61] = measureList;
+		$[62] = t9;
+		$[63] = t10;
+	} else t10 = $[63];
+	let t11;
+	if ($[64] !== fitLevel || $[65] !== t10) {
+		t11 = /* @__PURE__ */ jsx(RowActionsFit, {
+			value: fitLevel,
+			children: t10
 		});
-		$[52] = label;
-		$[53] = t5;
-		$[54] = t7;
-		$[55] = t8;
-	} else t8 = $[55];
-	return t8;
+		$[64] = fitLevel;
+		$[65] = t10;
+		$[66] = t11;
+	} else t11 = $[66];
+	return t11;
 }
 function _temp(node) {
 	return node !== null;

package/dist/layouts/TableLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableLayout.js","names":["ArrowDown","ArrowUp","ArrowUpDown","Checkbox","Icon","usePanneauIntl","cx","messages","ListColumn","ListLayoutProps","ItemTitle","styles","getSortDirection","sort","column","first","id","alignClass","align","center","end","undefined","TableLayout","t0","$","_c","items","columns","renderValue","getItemLabel","getItemHref","isCurrent","selectable","isSelected","onToggle","renderActions","onSort","label","pageSelection","renderCell","intl","actions","t1","t2","item","map","some","_temp","hasActions","check","t3","t4","direction","width","sortable","sorted","sortIcon","actionsCell","visuallyHidden","formatMessage","t5","t6","t7","item_0","row","selected","href","current","selectItem","column_0","index","content","title","cellLabel","t8","scroller","table","node","styles","_c"],"sources":["../../src/layouts/TableLayout.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react';\n\nimport { Checkbox, Icon, usePanneauIntl } from '@panneau/ui';\n\nimport { cx } from '../cx';\nimport { messages } from '../messages';\nimport type { ListColumn, ListLayoutProps } from '../types';\nimport { ItemTitle } from './ItemTitle';\nimport styles from './TableLayout.module.css';\n\n/** The sort direction of a column, from the first `sort` value. */\nexport function getSortDirection(\n    sort: readonly string[],\n    column: ListColumn,\n): 'ascending' | 'descending' | null {\n    const first = sort[0];\n    if (first === column.id) {\n        return 'ascending';\n    }\n    return first === `-${column.id}` ? 'descending' : null;\n}\n\nfunction alignClass(column: ListColumn): string | undefined {\n    if (column.align === 'center') {\n        return styles.center;\n    }\n    return column.align === 'end' ? styles.end : undefined;\n}\n\n/**\n * Items as a table, with sortable column headers. On narrow lists (phones), each row turns into a\n * block that shows the label of each value.\n */\nexport function TableLayout({\n    items,\n    columns,\n    renderValue,\n    getItemLabel,\n    getItemHref,\n    isCurrent,\n    selectable,\n    isSelected,\n    onToggle,\n    renderActions,\n    sort,\n    onSort,\n    label,\n    pageSelection,\n    renderCell,\n}: ListLayoutProps) {\n    const intl = usePanneauIntl();\n    const actions = items.map((item) => renderActions(item));\n    const hasActions = actions.some((node) => node !== null);\n    return (\n        <div className={styles.scroller}>\n            <table className={styles.table} aria-label={label}>\n                <thead>\n                    <tr>\n                        {selectable ? <th className={styles.check}>{pageSelection}</th> : null}\n                        {columns.map((column) => {\n                            const direction = getSortDirection(sort, column);\n                            return (\n                                <th\n                                    key={column.id}\n                                    scope=\"col\"\n                                    className={alignClass(column)}\n                                    style={\n                                        column.width !== undefined\n                                            ? { width: column.width }\n                                            : undefined\n                                    }\n                                    aria-sort={\n                                        column.sortable === true ? (direction ?? 'none') : undefined\n                                    }\n                                >\n                                    {column.sortable === true ? (\n                                        <button\n                                            type=\"button\"\n                                            className={cx(\n                                                styles.sort,\n                                                direction !== null && styles.sorted,\n                                            )}\n                                            onClick={() => onSort(column)}\n                                        >\n                                            {column.label ?? column.id}\n                                            <span className={styles.sortIcon}>\n                                                <Icon\n                                                    icon={\n                                                        direction === 'ascending'\n                                                            ? ArrowUp\n                                                            : direction === 'descending'\n                                                              ? ArrowDown\n                                                              : ArrowUpDown\n                                                    }\n                                                    size=\"sm\"\n                                                />\n                                            </span>\n                                        </button>\n                                    ) : (\n                                        (column.label ?? column.id)\n                                    )}\n                                </th>\n                            );\n                        })}\n                        {hasActions ? (\n                            <th className={styles.actionsCell}>\n                                <span className={styles.visuallyHidden}>\n                                    {intl.formatMessage(messages.actions)}\n                                </span>\n                            </th>\n                        ) : null}\n                    </tr>\n                </thead>\n                <tbody>\n                    {items.map((item, row) => {\n                        const selected = selectable && isSelected(item);\n                        const href = getItemHref?.(item) ?? null;\n                        const current = isCurrent?.(item) ?? false;\n                        return (\n                            <tr\n                                key={item.id}\n                                data-selected={selected || undefined}\n                                data-current={current || undefined}\n                            >\n                                {selectable ? (\n                                    <td className={styles.check}>\n                                        <Checkbox\n                                            aria-label={intl.formatMessage(messages.selectItem, {\n                                                item: getItemLabel(item),\n                                            })}\n                                            isSelected={selected}\n                                            onChange={() => onToggle(item)}\n                                        />\n                                    </td>\n                                ) : null}\n                                {columns.map((column, index) => {\n                                    const content =\n                                        index === 0 ? (\n                                            <ItemTitle href={href} current={current}>\n                                                {renderValue(item, column)}\n                                            </ItemTitle>\n                                        ) : (\n                                            renderValue(item, column)\n                                        );\n                                    return (\n                                        <td\n                                            key={column.id}\n                                            className={cx(\n                                                alignClass(column),\n                                                index === 0 && styles.title,\n                                            )}\n                                        >\n                                            <span className={styles.cellLabel}>\n                                                {column.label ?? column.id}\n                                            </span>\n                                            <span>\n                                                {renderCell !== undefined\n                                                    ? renderCell(item, column, content)\n                                                    : content}\n                                            </span>\n                                        </td>\n                                    );\n                                })}\n                                {hasActions ? (\n                                    <td className={styles.actionsCell}>{actions[row]}</td>\n                                ) : null}\n                            </tr>\n                        );\n                    })}\n                </tbody>\n            </table>\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"TableLayout.js","names":["ArrowDown","ArrowUp","ArrowUpDown","ImageOff","Checkbox","Icon","usePanneauIntl","RowActionsFit","fitContent","useRowActionsFit","cx","messages","ListColumn","ListLayoutProps","ItemTitle","styles","getSortDirection","sort","column","first","id","alignClass","align","center","end","undefined","Thumbnail","t0","$","_c","url","t1","thumbnail","TableLayout","items","columns","renderValue","getItemLabel","getItemHref","getItemImage","isCurrent","selectable","isSelected","onToggle","renderActions","onSort","label","pageSelection","renderCell","intl","actions","t2","item","map","some","_temp","hasActions","fitLevel","measureList","t3","check","t4","t5","direction","width","sortable","sorted","sortIcon","actionsCell","visuallyHidden","formatMessage","t6","t7","t8","item_0","row","selected","href","current","selectItem","column_0","index","content","cell","title","cellLabel","withThumbnail","t9","table","t10","scroller","t11","node","styles","_c"],"sources":["../../src/layouts/TableLayout.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp, ArrowUpDown, ImageOff } from 'lucide-react';\n\nimport { Checkbox, Icon, usePanneauIntl } from '@panneau/ui';\n\nimport { RowActionsFit, fitContent, useRowActionsFit } from '../actions/fit';\nimport { cx } from '../cx';\nimport { messages } from '../messages';\nimport type { ListColumn, ListLayoutProps } from '../types';\nimport { ItemTitle } from './ItemTitle';\nimport styles from './TableLayout.module.css';\n\n/** The sort direction of a column, from the first `sort` value. */\nexport function getSortDirection(\n    sort: readonly string[],\n    column: ListColumn,\n): 'ascending' | 'descending' | null {\n    const first = sort[0];\n    if (first === column.id) {\n        return 'ascending';\n    }\n    return first === `-${column.id}` ? 'descending' : null;\n}\n\nfunction alignClass(column: ListColumn): string | undefined {\n    if (column.align === 'center') {\n        return styles.center;\n    }\n    return column.align === 'end' ? styles.end : undefined;\n}\n\n/**\n * The thumbnail of an item, before its title (decision 0061): a square of its image, loaded when it\n * comes into view, or a placeholder. It has no text: the title is next to it.\n */\nfunction Thumbnail({ url }: { url: string | null }) {\n    return (\n        <span className={styles.thumbnail}>\n            {url !== null ? (\n                <img src={url} alt=\"\" loading=\"lazy\" decoding=\"async\" />\n            ) : (\n                <Icon icon={ImageOff} size=\"sm\" />\n            )}\n        </span>\n    );\n}\n\n/**\n * Items as a table, with sortable column headers. With the image of items (`getItemImage`), each\n * title starts with a thumbnail. On narrow lists (phones), each row turns into a block that shows\n * the label of each value.\n */\nexport function TableLayout({\n    items,\n    columns,\n    renderValue,\n    getItemLabel,\n    getItemHref,\n    getItemImage,\n    isCurrent,\n    selectable,\n    isSelected,\n    onToggle,\n    renderActions,\n    sort,\n    onSort,\n    label,\n    pageSelection,\n    renderCell,\n}: ListLayoutProps) {\n    const intl = usePanneauIntl();\n    const actions = items.map((item) => renderActions(item));\n    const hasActions = actions.some((node) => node !== null);\n    const [fitLevel, measureList] = useRowActionsFit(fitContent(items, columns));\n    return (\n        <RowActionsFit value={fitLevel}>\n            <div className={styles.scroller} ref={measureList}>\n                <table className={styles.table} aria-label={label}>\n                    <thead>\n                        <tr>\n                            {selectable ? <th className={styles.check}>{pageSelection}</th> : null}\n                            {columns.map((column) => {\n                                const direction = getSortDirection(sort, column);\n                                return (\n                                    <th\n                                        key={column.id}\n                                        scope=\"col\"\n                                        className={alignClass(column)}\n                                        style={\n                                            column.width !== undefined\n                                                ? { width: column.width }\n                                                : undefined\n                                        }\n                                        aria-sort={\n                                            column.sortable === true\n                                                ? (direction ?? 'none')\n                                                : undefined\n                                        }\n                                    >\n                                        {column.sortable === true ? (\n                                            <button\n                                                type=\"button\"\n                                                className={cx(\n                                                    styles.sort,\n                                                    direction !== null && styles.sorted,\n                                                )}\n                                                onClick={() => onSort(column)}\n                                            >\n                                                {column.label ?? column.id}\n                                                <span className={styles.sortIcon}>\n                                                    <Icon\n                                                        icon={\n                                                            direction === 'ascending'\n                                                                ? ArrowUp\n                                                                : direction === 'descending'\n                                                                  ? ArrowDown\n                                                                  : ArrowUpDown\n                                                        }\n                                                        size=\"sm\"\n                                                    />\n                                                </span>\n                                            </button>\n                                        ) : (\n                                            (column.label ?? column.id)\n                                        )}\n                                    </th>\n                                );\n                            })}\n                            {hasActions ? (\n                                <th className={styles.actionsCell}>\n                                    <span className={styles.visuallyHidden}>\n                                        {intl.formatMessage(messages.actions)}\n                                    </span>\n                                </th>\n                            ) : null}\n                        </tr>\n                    </thead>\n                    <tbody>\n                        {items.map((item, row) => {\n                            const selected = selectable && isSelected(item);\n                            const href = getItemHref?.(item) ?? null;\n                            const current = isCurrent?.(item) ?? false;\n                            return (\n                                <tr\n                                    key={item.id}\n                                    data-selected={selected || undefined}\n                                    data-current={current || undefined}\n                                >\n                                    {selectable ? (\n                                        <td className={styles.check}>\n                                            <Checkbox\n                                                aria-label={intl.formatMessage(\n                                                    messages.selectItem,\n                                                    {\n                                                        item: getItemLabel(item),\n                                                    },\n                                                )}\n                                                isSelected={selected}\n                                                onChange={() => onToggle(item)}\n                                            />\n                                        </td>\n                                    ) : null}\n                                    {columns.map((column, index) => {\n                                        const content =\n                                            index === 0 ? (\n                                                <ItemTitle href={href} current={current}>\n                                                    {renderValue(item, column)}\n                                                </ItemTitle>\n                                            ) : (\n                                                renderValue(item, column)\n                                            );\n                                        const cell = (\n                                            <span>\n                                                {renderCell !== undefined\n                                                    ? renderCell(item, column, content)\n                                                    : content}\n                                            </span>\n                                        );\n                                        return (\n                                            <td\n                                                key={column.id}\n                                                className={cx(\n                                                    alignClass(column),\n                                                    index === 0 && styles.title,\n                                                )}\n                                            >\n                                                <span className={styles.cellLabel}>\n                                                    {column.label ?? column.id}\n                                                </span>\n                                                {index === 0 && getItemImage !== undefined ? (\n                                                    <span className={styles.withThumbnail}>\n                                                        <Thumbnail url={getItemImage(item)} />\n                                                        {cell}\n                                                    </span>\n                                                ) : (\n                                                    cell\n                                                )}\n                                            </td>\n                                        );\n                                    })}\n                                    {hasActions ? (\n                                        <td className={styles.actionsCell}>{actions[row]}</td>\n                                    ) : null}\n                                </tr>\n                            );\n                        })}\n                    </tbody>\n                </table>\n            </div>\n        </RowActionsFit>\n    );\n}\n"],"mappings":"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"}

package/dist/layouts/TableLayout.module.js

@@ -3,6 +3,8 @@ import "./TableLayout.css";
 var scroller = "panneau-table-layout-scroller";
 var table = "panneau-table-layout-table";
 var title = "panneau-table-layout-title";
+var withThumbnail = "panneau-table-layout-with-thumbnail";
+var thumbnail = "panneau-table-layout-thumbnail";
 var center = "panneau-table-layout-center";
 var end = "panneau-table-layout-end";
 var check = "panneau-table-layout-check";
@@ -16,6 +18,8 @@ var TableLayout_module_default = {
 	scroller,
 	table,
 	title,
+	withThumbnail,
+	thumbnail,
 	center,
 	end,
 	check,
@@ -27,6 +31,6 @@ var TableLayout_module_default = {
 	visuallyHidden
 };
 //#endregion
-export { actionsCell, cellLabel, center, check, TableLayout_module_default as default, end, scroller, sort, sortIcon, sorted, table, title, visuallyHidden };
+export { actionsCell, cellLabel, center, check, TableLayout_module_default as default, end, scroller, sort, sortIcon, sorted, table, thumbnail, title, visuallyHidden, withThumbnail };
 
 //# sourceMappingURL=TableLayout.module.js.map

package/dist/layouts/TableLayout.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableLayout.module.js","names":[],"sources":["../../src/layouts/TableLayout.module.css"],"sourcesContent":[".scroller {\n    overflow-x: auto;\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-lg);\n    background-color: var(--panneau-color-surface);\n}\n\n.table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: var(--panneau-font-size-md);\n}\n\n.table th,\n.table td {\n    padding: var(--panneau-row-padding-y) var(--panneau-space-3);\n    text-align: start;\n    vertical-align: middle;\n    border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.table th {\n    font-size: var(--panneau-font-size-sm);\n    font-weight: var(--panneau-font-weight-medium);\n    color: var(--panneau-color-text-muted);\n    white-space: nowrap;\n    background-color: var(--panneau-color-surface-sunken);\n}\n\n/* The title stays readable in a narrow list, such as next to an item's details: the table\n * scrolls instead. */\n.table td.title {\n    min-width: 12rem;\n}\n\n.table tbody tr:last-child td {\n    border-bottom: 0;\n}\n\n.table tbody tr[data-selected] {\n    background-color: var(--panneau-color-accent-subtle);\n}\n\n/* The item shown next to the list: a bar on its first cell. */\n.table tbody tr[data-current] td:first-child {\n    box-shadow: inset 3px 0 0 var(--panneau-color-accent);\n}\n\n.table tbody tr[data-current] {\n    background-color: var(--panneau-color-hover);\n}\n\n.center {\n    text-align: center !important;\n}\n\n.end {\n    text-align: end !important;\n}\n\n.check {\n    width: 1px;\n}\n\n.actionsCell {\n    width: 1px;\n    text-align: end !important;\n    white-space: nowrap;\n}\n\n/* As narrow as the actions of the row on one line: they only wrap in a narrow list. */\n.table .actionsCell > * {\n    flex-wrap: nowrap;\n}\n\n.sort {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-1);\n    margin: calc(-1 * var(--panneau-space-1)) calc(-1 * var(--panneau-space-2));\n    padding: var(--panneau-space-1) var(--panneau-space-2);\n    font: inherit;\n    color: inherit;\n    background: none;\n    border: 0;\n    border-radius: var(--panneau-radius-sm);\n    cursor: pointer;\n}\n\n.sort:hover {\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-hover);\n}\n\n.sort:focus-visible {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 1px;\n}\n\n.sortIcon {\n    opacity: 0.5;\n}\n\n.sorted .sortIcon {\n    opacity: 1;\n}\n\n.cellLabel {\n    display: none;\n}\n\n.visuallyHidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n}\n\n/* Narrow lists (phones): each row is a block, with the label of each value next to it. */\n@container panneau-list (max-width: 40rem) {\n    .scroller {\n        overflow: visible;\n        background: none;\n        border: 0;\n    }\n\n    /* The labels of the cells replace the headers, and the list's sort select their buttons. */\n    .table thead {\n        display: none;\n    }\n\n    .table,\n    .table tbody,\n    .table tr,\n    .table td {\n        display: block;\n    }\n\n    .table tbody {\n        display: grid;\n        gap: var(--panneau-space-2);\n    }\n\n    .table tr {\n        position: relative;\n        padding: var(--panneau-space-2) 0;\n        background-color: var(--panneau-color-surface);\n        border: var(--panneau-border-width) solid var(--panneau-color-border);\n        border-radius: var(--panneau-radius-lg);\n    }\n\n    .table td {\n        display: grid;\n        grid-template-columns: minmax(5rem, 35%) 1fr;\n        gap: var(--panneau-space-2);\n        padding: var(--panneau-space-1) var(--panneau-space-3);\n        text-align: start !important;\n        border: 0;\n    }\n\n    .table td.check,\n    .table td.actionsCell {\n        display: flex;\n        width: auto;\n    }\n\n    .table td.actionsCell > * {\n        flex-wrap: wrap;\n    }\n\n    .table td.check {\n        position: absolute;\n        top: var(--panneau-space-2);\n        inset-inline-end: var(--panneau-space-2);\n        padding: 0;\n    }\n\n    .table td.actionsCell {\n        justify-content: flex-start;\n        flex-wrap: wrap;\n        padding-top: var(--panneau-space-2);\n    }\n\n    .table td.title {\n        display: block;\n        min-width: 0;\n        padding-inline-end: var(--panneau-space-10);\n        font-weight: var(--panneau-font-weight-medium);\n    }\n\n    .table td.title .cellLabel {\n        display: none;\n    }\n\n    .cellLabel {\n        display: block;\n        font-size: var(--panneau-font-size-sm);\n        color: var(--panneau-color-text-muted);\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"TableLayout.module.js","names":[],"sources":["../../src/layouts/TableLayout.module.css"],"sourcesContent":[".scroller {\n    overflow-x: auto;\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-lg);\n    background-color: var(--panneau-color-surface);\n}\n\n.table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: var(--panneau-font-size-md);\n}\n\n.table th,\n.table td {\n    padding: var(--panneau-row-padding-y) var(--panneau-space-3);\n    text-align: start;\n    vertical-align: middle;\n    border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.table th {\n    font-size: var(--panneau-font-size-sm);\n    font-weight: var(--panneau-font-weight-medium);\n    color: var(--panneau-color-text-muted);\n    white-space: nowrap;\n    background-color: var(--panneau-color-surface-sunken);\n}\n\n/* The title stays readable in a narrow list, such as next to an item's details: the table\n * scrolls instead. */\n.table td.title {\n    min-width: 12rem;\n}\n\n.table tbody tr:last-child td {\n    border-bottom: 0;\n}\n\n.table tbody tr[data-selected] {\n    background-color: var(--panneau-color-accent-subtle);\n}\n\n/* The item shown next to the list: a bar on its first cell. */\n.table tbody tr[data-current] td:first-child {\n    box-shadow: inset 3px 0 0 var(--panneau-color-accent);\n}\n\n.table tbody tr[data-current] {\n    background-color: var(--panneau-color-hover);\n}\n\n/* The thumbnail of an item, before its title (decision 0061). */\n.withThumbnail {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-3);\n}\n\n.withThumbnail > :last-child {\n    min-width: 0;\n}\n\n.thumbnail {\n    display: flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n    width: 2.5rem;\n    height: 2.5rem;\n    overflow: hidden;\n    color: var(--panneau-color-text-muted);\n    background-color: var(--panneau-color-surface-sunken);\n    border-radius: var(--panneau-radius-sm);\n}\n\n.thumbnail img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n\n.center {\n    text-align: center !important;\n}\n\n.end {\n    text-align: end !important;\n}\n\n.check {\n    width: 1px;\n}\n\n.actionsCell {\n    width: 1px;\n    text-align: end !important;\n    white-space: nowrap;\n}\n\n/* As narrow as the actions of the row on one line: they only wrap in a narrow list. */\n.table .actionsCell > * {\n    flex-wrap: nowrap;\n}\n\n.sort {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-1);\n    margin: calc(-1 * var(--panneau-space-1)) calc(-1 * var(--panneau-space-2));\n    padding: var(--panneau-space-1) var(--panneau-space-2);\n    font: inherit;\n    color: inherit;\n    background: none;\n    border: 0;\n    border-radius: var(--panneau-radius-sm);\n    cursor: pointer;\n}\n\n.sort:hover {\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-hover);\n}\n\n.sort:focus-visible {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 1px;\n}\n\n.sortIcon {\n    opacity: 0.5;\n}\n\n.sorted .sortIcon {\n    opacity: 1;\n}\n\n.cellLabel {\n    display: none;\n}\n\n.visuallyHidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n}\n\n/* Narrow lists (phones): each row is a block, with the label of each value next to it. */\n@container panneau-list (max-width: 40rem) {\n    .scroller {\n        overflow: visible;\n        background: none;\n        border: 0;\n    }\n\n    /* The labels of the cells replace the headers, and the list's sort select their buttons. */\n    .table thead {\n        display: none;\n    }\n\n    .table,\n    .table tbody,\n    .table tr,\n    .table td {\n        display: block;\n    }\n\n    .table tbody {\n        display: grid;\n        gap: var(--panneau-space-2);\n    }\n\n    .table tr {\n        position: relative;\n        padding: var(--panneau-space-2) 0;\n        background-color: var(--panneau-color-surface);\n        border: var(--panneau-border-width) solid var(--panneau-color-border);\n        border-radius: var(--panneau-radius-lg);\n    }\n\n    .table td {\n        display: grid;\n        grid-template-columns: minmax(5rem, 35%) 1fr;\n        gap: var(--panneau-space-2);\n        padding: var(--panneau-space-1) var(--panneau-space-3);\n        text-align: start !important;\n        border: 0;\n    }\n\n    .table td.check,\n    .table td.actionsCell {\n        display: flex;\n        width: auto;\n    }\n\n    .table td.actionsCell > * {\n        flex-wrap: wrap;\n    }\n\n    .table td.check {\n        position: absolute;\n        top: var(--panneau-space-2);\n        inset-inline-end: var(--panneau-space-2);\n        padding: 0;\n    }\n\n    .table td.actionsCell {\n        justify-content: flex-start;\n        flex-wrap: wrap;\n        padding-top: var(--panneau-space-2);\n    }\n\n    .table td.title {\n        display: block;\n        min-width: 0;\n        padding-inline-end: var(--panneau-space-10);\n        font-weight: var(--panneau-font-weight-medium);\n    }\n\n    .table td.title .cellLabel {\n        display: none;\n    }\n\n    .cellLabel {\n        display: block;\n        font-size: var(--panneau-font-size-sm);\n        color: var(--panneau-color-text-muted);\n    }\n}\n"],"mappings":""}

package/dist/types.d.ts

@@ -156,7 +156,10 @@ export interface ListLayoutProps {
     label: string;
     /** The checkbox that selects the page, for layouts that show it in a header. */
     pageSelection: ReactNode;
-    /** The URL of the image of an item (`itemImage` of the resource), for the gallery. */
+    /**
+     * The URL of the image of an item (`itemImage` of the resource), or `null` for an item without
+     * one: the gallery shows it, and the table its thumbnail. `undefined` when items have no image.
+     */
     getItemImage?: ((item: ListItem) => string | null) | undefined;
     /** The month of the calendar, in the `calendar` layout. */
     calendar?: ListCalendarProps | undefined;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EACR,SAAS,EACT,MAAM,EACN,WAAW,EACX,KAAK,EACL,MAAM,EACN,WAAW,EACX,MAAM,EACN,SAAS,EACZ,MAAM,mBAAmB,CAAC;AAE3B;;;GAGG;AACH,MAAM,WAAW,QAAQ;IACrB,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B;AAED;;;GAGG;AACH,MAAM,WAAW,UAAU;IACvB,yFAAyF;IACzF,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,4FAA4F;IAC5F,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,uFAAuF;IACvF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,SAAS,CAAC;CAC1C;AAED,mEAAmE;AACnE,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,EAAE,UAAU,CAAC;IACnB,qCAAqC;IACrC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACvB;AAED,2FAA2F;AAC3F,MAAM,MAAM,YAAY,GAAG,aAAa,CAAC,YAAY,CAAC,CAAC;AAEvD,8DAA8D;AAC9D,MAAM,WAAW,eAAe;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,KAAK,EAAE,WAAW,CAAC;IACnB,gCAAgC;IAChC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,gGAAgG;IAChG,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,+FAA+F;IAC/F,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,OAAO,EAAE,SAAS,QAAQ,EAAE,CAAC;CAChC;AAED,gGAAgG;AAChG,MAAM,WAAW,iBAAiB;IAC9B,OAAO,EAAE,MAAM,CAAC;CACnB;AAED;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,eAAe,KAAK,OAAO,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;AAEhG;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,eAAe,KAAK,OAAO,CAAC;AAEpE,uEAAuE;AACvE,MAAM,WAAW,mBAAmB;IAChC,4DAA4D;IAC5D,IAAI,EAAE,QAAQ,CAAC;IACf,gCAAgC;IAChC,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;CAClB;AAED;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,mBAAmB,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC;AAEtF,iCAAiC;AACjC,MAAM,WAAW,kBAAkB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,kFAAkF;IAClF,KAAK,EAAE,OAAO,CAAC;IACf,8DAA8D;IAC9D,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,GAAG,SAAS,KAAK,IAAI,CAAC;IACnD,qFAAqF;IACrF,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,gDAAgD;IAChD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;CACnD;AAED,2DAA2D;AAC3D,MAAM,MAAM,WAAW,GAAG,aAAa,CAAC,kBAAkB,CAAC,CAAC;AAE5D,sGAAsG;AACtG,MAAM,WAAW,iBAAiB;IAC9B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACrC,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,GAAG,IAAI,CAAC;CACzC;AAED,qEAAqE;AACrE,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAC;IAC3B,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,mEAAmE;IACnE,WAAW,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,KAAK,SAAS,CAAC;IAC/D,mEAAmE;IACnE,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC;IACzC,iDAAiD;IACjD,WAAW,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IAC9D,6FAA6F;IAC7F,SAAS,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC,GAAG,SAAS,CAAC;IACtD,qCAAqC;IACrC,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC;IACxC,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACnC,yDAAyD;IACzD,aAAa,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,SAAS,CAAC;IAC7C,sEAAsE;IACtE,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;IACxB,MAAM,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,aAAa,EAAE,SAAS,CAAC;IACzB,sFAAsF;IACtF,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IAC/D,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAC;IACzC;;;OAGG;IACH,UAAU,CAAC,EACP,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;CAC3F;AAED,+CAA+C;AAC/C,MAAM,MAAM,eAAe,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EACR,SAAS,EACT,MAAM,EACN,WAAW,EACX,KAAK,EACL,MAAM,EACN,WAAW,EACX,MAAM,EACN,SAAS,EACZ,MAAM,mBAAmB,CAAC;AAE3B;;;GAGG;AACH,MAAM,WAAW,QAAQ;IACrB,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B;AAED;;;GAGG;AACH,MAAM,WAAW,UAAU;IACvB,yFAAyF;IACzF,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,4FAA4F;IAC5F,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,uFAAuF;IACvF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,SAAS,CAAC;CAC1C;AAED,mEAAmE;AACnE,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,EAAE,UAAU,CAAC;IACnB,qCAAqC;IACrC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACvB;AAED,2FAA2F;AAC3F,MAAM,MAAM,YAAY,GAAG,aAAa,CAAC,YAAY,CAAC,CAAC;AAEvD,8DAA8D;AAC9D,MAAM,WAAW,eAAe;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,KAAK,EAAE,WAAW,CAAC;IACnB,gCAAgC;IAChC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,gGAAgG;IAChG,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,+FAA+F;IAC/F,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,OAAO,EAAE,SAAS,QAAQ,EAAE,CAAC;CAChC;AAED,gGAAgG;AAChG,MAAM,WAAW,iBAAiB;IAC9B,OAAO,EAAE,MAAM,CAAC;CACnB;AAED;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,eAAe,KAAK,OAAO,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;AAEhG;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,eAAe,KAAK,OAAO,CAAC;AAEpE,uEAAuE;AACvE,MAAM,WAAW,mBAAmB;IAChC,4DAA4D;IAC5D,IAAI,EAAE,QAAQ,CAAC;IACf,gCAAgC;IAChC,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;CAClB;AAED;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,mBAAmB,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC;AAEtF,iCAAiC;AACjC,MAAM,WAAW,kBAAkB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,kFAAkF;IAClF,KAAK,EAAE,OAAO,CAAC;IACf,8DAA8D;IAC9D,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,GAAG,SAAS,KAAK,IAAI,CAAC;IACnD,qFAAqF;IACrF,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,gDAAgD;IAChD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;CACnD;AAED,2DAA2D;AAC3D,MAAM,MAAM,WAAW,GAAG,aAAa,CAAC,kBAAkB,CAAC,CAAC;AAE5D,sGAAsG;AACtG,MAAM,WAAW,iBAAiB;IAC9B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACrC,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,GAAG,IAAI,CAAC;CACzC;AAED,qEAAqE;AACrE,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAC;IAC3B,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,mEAAmE;IACnE,WAAW,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,KAAK,SAAS,CAAC;IAC/D,mEAAmE;IACnE,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC;IACzC,iDAAiD;IACjD,WAAW,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IAC9D,6FAA6F;IAC7F,SAAS,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC,GAAG,SAAS,CAAC;IACtD,qCAAqC;IACrC,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC;IACxC,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACnC,yDAAyD;IACzD,aAAa,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,SAAS,CAAC;IAC7C,sEAAsE;IACtE,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;IACxB,MAAM,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,aAAa,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IAC/D,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAC;IACzC;;;OAGG;IACH,UAAU,CAAC,EACP,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;CAC3F;AAED,+CAA+C;AAC/C,MAAM,MAAM,eAAe,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/lists",
-    "version": "5.0.0-alpha.16",
+    "version": "5.0.0-alpha.18",
     "description": "Lists of Panneau: columns with displays, table and cards layouts, sorting, filters, search, pagination, selection and actions, driven by the list state of @panneau/core.",
     "type": "module",
     "license": "MIT",
@@ -37,14 +37,14 @@
         "react-intl": "^12.0.0"
     },
     "dependencies": {
-        "@panneau/core": "5.0.0-alpha.16",
-        "@panneau/fields": "5.0.0-alpha.16",
-        "@panneau/intl": "5.0.0-alpha.16",
-        "@panneau/protocol": "5.0.0-alpha.16",
-        "@panneau/ui": "5.0.0-alpha.16",
+        "@panneau/core": "5.0.0-alpha.18",
+        "@panneau/fields": "5.0.0-alpha.18",
+        "@panneau/intl": "5.0.0-alpha.18",
+        "@panneau/protocol": "5.0.0-alpha.18",
+        "@panneau/ui": "5.0.0-alpha.18",
         "lucide-react": "^1.57.0"
     },
     "devDependencies": {
-        "@panneau/data": "5.0.0-alpha.16"
+        "@panneau/data": "5.0.0-alpha.18"
     }
 }