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

package/README.md

@@ -87,11 +87,11 @@ const { data, isFetching, error } = useResourceList('pages', query); // @panneau
 | Pagination | With `total`: the range, previous and next pages, and the page size (`perPageOptions`)                                                                                       |
 | Selection  | Checkboxes, the page, then "select all N items", which selects every item matching the query, with exceptions                                                                |
 | Actions    | `row` (buttons), `menu` (the row's menu), `toolbar` (selection and resource actions), with `confirm`, hidden by abilities ([0011](../../docs/decisions/0011-permissions.md)) |
-| States     | A spinner, an error with a retry, an empty message, and "no results" with a button that clears the filters                                                                   |
+| States     | Skeleton rows of the columns while `items` is `undefined`, an error with a retry, an empty message, and "no results" with a button that clears the filters                   |
 
-An action shows the Lucide icon it names (`"icon": "send"`, through `getNamedIcon()` of `@panneau/ui`), or the icon of a built-in action (`edit`, `delete`…). Actions written in code can get icon components by id instead, which win over names: `actionIcons={{ archive: Archive }}`.
+An action shows the icon it names (`"icon": "send"`, through `getNamedIcon()` of `@panneau/ui`, which needs an `iconLoader` on `PanneauRoot`, such as `lucideIconLoader` of `@panneau/ui/named-icons`), or the icon of a built-in action (`edit`, `delete`…). Actions written in code can get icon components by id instead, which win over names: `actionIcons={{ archive: Archive }}`.
 
-Lists confirm an action when it has `confirm` (its title and message are ICU messages with `{count}`), or when some selected items don't allow it, then call `onAction` with the action, its scope, the item or the `Selection` of the protocol, the count and the skipped items. A promise shows the action as pending; when it rejects, a toast says that it failed. After a selection action, the selection is cleared.
+Lists confirm an action when it has `confirm` (its title and message are ICU messages with `{count}`), or when some selected items don't allow it. For every item matching a query, they only know the current page: with `previewAction` (`useActionPreview()` of `@panneau/actions`), an action that declares `dryRun` asks the backend first, and the confirmation gives its count of skipped items. Then they call `onAction` with the action, its scope, the item or the `Selection` of the protocol, the count and the skipped items. A promise shows the action as pending; when it rejects, a toast says that it failed. After a selection action, the selection is cleared.
 
 A `relation` filter keeps ids in the query (`filter[author]=7`). Its chip and picker show the labels of the items it picked, and those of ids from the URL once the relation source's `resolve()` gives them.
 

package/dist/ItemDetails.css

@@ -0,0 +1,34 @@
+.panneau-item-details-details {
+    container: panneau-item-details / inline-size;
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-3);
+    margin: 0;
+}
+
+.panneau-item-details-entry {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-1);
+    min-width: 0;
+}
+
+.panneau-item-details-label {
+    color: var(--panneau-color-text-muted);
+    font-size: var(--panneau-font-size-sm);
+}
+
+.panneau-item-details-value {
+    min-width: 0;
+    margin: 0;
+    overflow-wrap: anywhere;
+}
+
+/* Wide enough: the label and its value side by side. */
+@container panneau-item-details (min-width: 30rem) {
+    .panneau-item-details-entry {
+        display: grid;
+        grid-template-columns: minmax(8rem, 30%) minmax(0, 1fr);
+        gap: var(--panneau-space-3);
+    }
+}

package/dist/ItemDetails.d.ts

@@ -0,0 +1,18 @@
+import type { DisplayEntry, ListColumn, ListItem } from './types.js';
+export interface ItemDetailsProps {
+    /** The item. `undefined` while it loads: the labels, with a skeleton of each value. */
+    item: ListItem | undefined;
+    /** The values to show, with their label and display, in order. */
+    columns: readonly ListColumn[];
+    /** Displays by name, over the built-in ones and those of the plugins. */
+    displays?: Readonly<Record<string, DisplayEntry>>;
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * The values of one item, each with its label, shown with the displays of the lists: for the
+ * details of an item next to its list, or anywhere a read-only view of it is needed. While the
+ * item loads, it draws the labels with a skeleton of each value (decision 0034).
+ */
+export declare function ItemDetails({ item, columns, displays, 'aria-label': ariaLabel, className, }: ItemDetailsProps): import("react").JSX.Element;
+//# sourceMappingURL=ItemDetails.d.ts.map

package/dist/ItemDetails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemDetails.d.ts","sourceRoot":"","sources":["../src/ItemDetails.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAMlE,MAAM,WAAW,gBAAgB;IAC7B,uFAAuF;IACvF,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B,kEAAkE;IAClE,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EACxB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,SAAS,GACZ,EAAE,gBAAgB,+BA6BlB"}

package/dist/ItemDetails.js

@@ -0,0 +1,104 @@
+import { messages } from "./messages.js";
+import { cx } from "./cx.js";
+import ItemDetails_module_default from "./ItemDetails.module.js";
+import { useRenderValue } from "./useRenderValue.js";
+import { c } from "react/compiler-runtime";
+import { LoadingRegion, Skeleton, usePanneauIntl } from "@panneau/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ItemDetails.tsx
+/** Widths of the values of a skeleton, varied so they read as text. */
+var WIDTHS = [
+	"70%",
+	"40%",
+	"55%",
+	"30%",
+	"65%"
+];
+/**
+* The values of one item, each with its label, shown with the displays of the lists: for the
+* details of an item next to its list, or anywhere a read-only view of it is needed. While the
+* item loads, it draws the labels with a skeleton of each value (decision 0034).
+*/
+function ItemDetails(t0) {
+	const $ = c(20);
+	const { item, columns, displays, "aria-label": ariaLabel, className } = t0;
+	const intl = usePanneauIntl();
+	const renderValue = useRenderValue(displays);
+	let t1;
+	if ($[0] !== className) {
+		t1 = cx(ItemDetails_module_default.details, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== columns || $[3] !== item || $[4] !== renderValue) {
+		let t3;
+		if ($[6] !== item || $[7] !== renderValue) {
+			t3 = (column, index) => /* @__PURE__ */ jsxs("div", {
+				className: ItemDetails_module_default.entry,
+				children: [/* @__PURE__ */ jsx("dt", {
+					className: ItemDetails_module_default.label,
+					children: column.label ?? column.id
+				}), /* @__PURE__ */ jsx("dd", {
+					className: ItemDetails_module_default.value,
+					children: item !== void 0 ? renderValue(item, column) : /* @__PURE__ */ jsx(Skeleton, { width: WIDTHS[index % WIDTHS.length] })
+				})]
+			}, column.id);
+			$[6] = item;
+			$[7] = renderValue;
+			$[8] = t3;
+		} else t3 = $[8];
+		t2 = columns.map(t3);
+		$[2] = columns;
+		$[3] = item;
+		$[4] = renderValue;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[9] !== ariaLabel || $[10] !== t1 || $[11] !== t2) {
+		t3 = /* @__PURE__ */ jsx("dl", {
+			"aria-label": ariaLabel,
+			className: t1,
+			children: t2
+		});
+		$[9] = ariaLabel;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+	} else t3 = $[12];
+	const details = t3;
+	if (item === void 0) {
+		let t4;
+		if ($[13] !== intl) {
+			t4 = intl.formatMessage(messages.loadingItem);
+			$[13] = intl;
+			$[14] = t4;
+		} else t4 = $[14];
+		let t5;
+		if ($[15] !== details) {
+			t5 = /* @__PURE__ */ jsx("div", {
+				inert: true,
+				"aria-hidden": "true",
+				children: details
+			});
+			$[15] = details;
+			$[16] = t5;
+		} else t5 = $[16];
+		let t6;
+		if ($[17] !== t4 || $[18] !== t5) {
+			t6 = /* @__PURE__ */ jsx(LoadingRegion, {
+				label: t4,
+				children: t5
+			});
+			$[17] = t4;
+			$[18] = t5;
+			$[19] = t6;
+		} else t6 = $[19];
+		return t6;
+	}
+	return details;
+}
+//#endregion
+export { ItemDetails };
+
+//# sourceMappingURL=ItemDetails.js.map

package/dist/ItemDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemDetails.js","names":["LoadingRegion","Skeleton","usePanneauIntl","styles","cx","messages","DisplayEntry","ListColumn","ListItem","useRenderValue","WIDTHS","ItemDetailsProps","item","columns","displays","Readonly","Record","className","ItemDetails","t0","$","_c","ariaLabel","intl","renderValue","t1","details","t2","t3","column","index","id","entry","label","value","undefined","length","map","t4","formatMessage","loadingItem","t5","t6","_c","styles"],"sources":["../src/ItemDetails.tsx"],"sourcesContent":["import { LoadingRegion, Skeleton, usePanneauIntl } from '@panneau/ui';\n\nimport styles from './ItemDetails.module.css';\nimport { cx } from './cx';\nimport { messages } from './messages';\nimport type { DisplayEntry, ListColumn, ListItem } from './types';\nimport { useRenderValue } from './useRenderValue';\n\n/** Widths of the values of a skeleton, varied so they read as text. */\nconst WIDTHS = ['70%', '40%', '55%', '30%', '65%'];\n\nexport interface ItemDetailsProps {\n    /** The item. `undefined` while it loads: the labels, with a skeleton of each value. */\n    item: ListItem | undefined;\n    /** The values to show, with their label and display, in order. */\n    columns: readonly ListColumn[];\n    /** Displays by name, over the built-in ones and those of the plugins. */\n    displays?: Readonly<Record<string, DisplayEntry>>;\n    'aria-label'?: string;\n    className?: string;\n}\n\n/**\n * The values of one item, each with its label, shown with the displays of the lists: for the\n * details of an item next to its list, or anywhere a read-only view of it is needed. While the\n * item loads, it draws the labels with a skeleton of each value (decision 0034).\n */\nexport function ItemDetails({\n    item,\n    columns,\n    displays,\n    'aria-label': ariaLabel,\n    className,\n}: ItemDetailsProps) {\n    const intl = usePanneauIntl();\n    const renderValue = useRenderValue(displays);\n    const details = (\n        <dl aria-label={ariaLabel} className={cx(styles.details, className)}>\n            {columns.map((column, index) => (\n                <div key={column.id} className={styles.entry}>\n                    <dt className={styles.label}>{column.label ?? column.id}</dt>\n                    <dd className={styles.value}>\n                        {item !== undefined ? (\n                            renderValue(item, column)\n                        ) : (\n                            <Skeleton width={WIDTHS[index % WIDTHS.length]} />\n                        )}\n                    </dd>\n                </div>\n            ))}\n        </dl>\n    );\n    if (item === undefined) {\n        return (\n            <LoadingRegion label={intl.formatMessage(messages.loadingItem)}>\n                <div inert aria-hidden=\"true\">\n                    {details}\n                </div>\n            </LoadingRegion>\n        );\n    }\n    return details;\n}\n"],"mappings":";;;;;;;;;AASA,IAAMU,SAAS;CAAC;CAAO;CAAO;CAAO;CAAO;AAAK;;;;;;AAkBjD,SAAOQ,YAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAqB,MAAA,EAAAT,MAAAC,SAAAC,UAAA,cAAAQ,WAAAL,cAAAE;CAOxB,MAAAI,OAAarB,eAAe;CAC5B,MAAAsB,cAAoBf,eAAeK,QAAQ;CAAE,IAAAW;CAAA,IAAAL,EAAA,OAAAH,WAAA;EAEHQ,KAAArB,GAAGD,2BAAMuB,SAAUT,SAAS;EAACG,EAAA,KAAAH;EAAAG,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAP,WAAAO,EAAA,OAAAR,QAAAQ,EAAA,OAAAI,aAAA;EAAA,IAAAI;EAAA,IAAAR,EAAA,OAAAR,QAAAQ,EAAA,OAAAI,aAAA;GAClDI,MAAAC,QAAAC,UACT,qBAAA,OAAA;IAAgC,WAAA3B,2BAAM6B;IAAtC,UAAA,CACI,oBAAA,MAAA;KAAe,WAAA7B,2BAAM8B;KAASJ,UAAAA,OAAMI,SAAUJ,OAAME;IAAS,CAAA,GAC7D,oBAAA,MAAA;KAAe,WAAA5B,2BAAM+B;KAChBtB,UAAAA,SAASuB,KAAAA,IACNX,YAAYZ,MAAMiB,MAGtB,IADI,oBAAC,UAAD,EAAiB,OAAAnB,OAAOoB,QAAQpB,OAAM0B,QAAQ,CAAA;IAEjD,CAAA,CACH;GATIP,GAAAA,OAAME,EASV;GACTX,EAAA,KAAAR;GAAAQ,EAAA,KAAAI;GAAAJ,EAAA,KAAAQ;EAAA,OAAAA,KAAAR,EAAA;EAXAO,KAAAd,QAAOwB,IAAKT,EAWZ;EAACR,EAAA,KAAAP;EAAAO,EAAA,KAAAR;EAAAQ,EAAA,KAAAI;EAAAJ,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAE,aAAAF,EAAA,QAAAK,MAAAL,EAAA,QAAAO,IAAA;EAZNC,KAAA,oBAAA,MAAA;GAAgBN,cAAAA;GAAsB,WAAAG;GACjCE,UAAAA;EAYA,CAAA;EAAAP,EAAA,KAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAdT,MAAAM,UACIE;CAeJ,IAAIhB,SAASuB,KAAAA,GAAS;EAAA,IAAAG;EAAA,IAAAlB,EAAA,QAAAG,MAAA;GAEQe,KAAAf,KAAIgB,cAAelC,SAAQmC,WAAY;GAACpB,EAAA,MAAAG;GAAAH,EAAA,MAAAkB;EAAA,OAAAA,KAAAlB,EAAA;EAAA,IAAAqB;EAAA,IAAArB,EAAA,QAAAM,SAAA;GAC1De,KAAA,oBAAA,OAAA;IAAK,OAAA;IAAkB,eAAA;IAClBf,UAAAA;GACC,CAAA;GAAAN,EAAA,MAAAM;GAAAN,EAAA,MAAAqB;EAAA,OAAAA,KAAArB,EAAA;EAAA,IAAAsB;EAAA,IAAAtB,EAAA,QAAAkB,MAAAlB,EAAA,QAAAqB,IAAA;GAHVC,KAAA,oBAAC,eAAD;IAAsB,OAAAJ;IAClBG,UAAAA;GADU,CAAA;GAIErB,EAAA,MAAAkB;GAAAlB,EAAA,MAAAqB;GAAArB,EAAA,MAAAsB;EAAA,OAAAA,KAAAtB,EAAA;EAAA,OAJhBsB;CAIgB;CAEvB,OACMhB;AAAO"}

package/dist/ItemDetails.module.js

@@ -0,0 +1,16 @@
+import "./ItemDetails.css";
+//#region src/ItemDetails.module.css
+var details = "panneau-item-details-details";
+var entry = "panneau-item-details-entry";
+var label = "panneau-item-details-label";
+var value = "panneau-item-details-value";
+var ItemDetails_module_default = {
+	details,
+	entry,
+	label,
+	value
+};
+//#endregion
+export { ItemDetails_module_default as default, details, entry, label, value };
+
+//# sourceMappingURL=ItemDetails.module.js.map

package/dist/ItemDetails.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemDetails.module.js","names":[],"sources":["../src/ItemDetails.module.css"],"sourcesContent":[".details {\n    container: panneau-item-details / inline-size;\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-3);\n    margin: 0;\n}\n\n.entry {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n    min-width: 0;\n}\n\n.label {\n    color: var(--panneau-color-text-muted);\n    font-size: var(--panneau-font-size-sm);\n}\n\n.value {\n    min-width: 0;\n    margin: 0;\n    overflow-wrap: anywhere;\n}\n\n/* Wide enough: the label and its value side by side. */\n@container panneau-item-details (min-width: 30rem) {\n    .entry {\n        display: grid;\n        grid-template-columns: minmax(8rem, 30%) minmax(0, 1fr);\n        gap: var(--panneau-space-3);\n    }\n}\n"],"mappings":""}

package/dist/List.d.ts

@@ -1,6 +1,6 @@
 import { type ListOptions } from '@panneau/core';
-import { type ListViewProps } from './ListView';
-import type { ListItem } from './types';
+import { type ListViewProps } from './ListView.js';
+import type { ListItem } from './types.js';
 export interface ListProps extends Omit<ListViewProps, 'list' | 'total' | 'items'> {
     /** Every item: the list searches, filters, sorts and paginates them in memory. */
     items: readonly ListItem[] | undefined;

package/dist/List.js

@@ -1,6 +1,7 @@
 import { ListView } from "./ListView.js";
 import { applyListQuery } from "./query.js";
 import { useList } from "@panneau/core";
+import { c } from "react/compiler-runtime";
 import { usePanneauIntl } from "@panneau/ui";
 import { jsx } from "react/jsx-runtime";
 //#region src/List.tsx
@@ -12,25 +13,66 @@ import { jsx } from "react/jsx-runtime";
 *
 * The page size and the default sort are read once.
 */
-function List({ items, perPage = 20, defaultSort = [], router, ...props }) {
+function List(t0) {
+	const $ = c(15);
+	const { items, perPage: t1, defaultSort: t2, router, ...props } = t0;
+	const perPage = t1 === void 0 ? 20 : t1;
+	let t3;
+	if ($[0] !== t2) {
+		t3 = t2 === void 0 ? [] : t2;
+		$[0] = t2;
+		$[1] = t3;
+	} else t3 = $[1];
+	const defaultSort = t3;
 	const intl = usePanneauIntl();
-	const { query, list } = useList({
-		defaults: {
+	let t4;
+	if ($[2] !== defaultSort || $[3] !== perPage) {
+		t4 = {
 			perPage,
 			sort: defaultSort
-		},
-		...router !== void 0 ? { router } : {}
-	});
+		};
+		$[2] = defaultSort;
+		$[3] = perPage;
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] !== router) {
+		t5 = router !== void 0 ? { router } : {};
+		$[5] = router;
+		$[6] = t5;
+	} else t5 = $[6];
+	let t6;
+	if ($[7] !== t4 || $[8] !== t5) {
+		t6 = {
+			defaults: t4,
+			...t5
+		};
+		$[7] = t4;
+		$[8] = t5;
+		$[9] = t6;
+	} else t6 = $[9];
+	const { query, list } = useList(t6);
 	const result = items !== void 0 ? applyListQuery(items, query, {
 		columns: props.columns,
 		locale: intl.locale
 	}) : void 0;
-	return /* @__PURE__ */ jsx(ListView, {
-		...props,
-		list,
-		items: result?.items,
-		total: result?.total
-	});
+	const t7 = result?.items;
+	const t8 = result?.total;
+	let t9;
+	if ($[10] !== list || $[11] !== props || $[12] !== t7 || $[13] !== t8) {
+		t9 = /* @__PURE__ */ jsx(ListView, {
+			...props,
+			list,
+			items: t7,
+			total: t8
+		});
+		$[10] = list;
+		$[11] = props;
+		$[12] = t7;
+		$[13] = t8;
+		$[14] = t9;
+	} else t9 = $[14];
+	return t9;
 }
 //#endregion
 export { List };

package/dist/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","names":[],"sources":["../src/List.tsx"],"sourcesContent":["import { type ListOptions, useList } from '@panneau/core';\nimport { usePanneauIntl } from '@panneau/ui';\n\nimport { ListView, type ListViewProps } from './ListView';\nimport { applyListQuery } from './query';\nimport type { ListItem } from './types';\n\nexport interface ListProps extends Omit<ListViewProps, 'list' | 'total' | 'items'> {\n    /** Every item: the list searches, filters, sorts and paginates them in memory. */\n    items: readonly ListItem[] | undefined;\n    /** Items per page. Defaults to 20. */\n    perPage?: number;\n    /** Default sort, as `sort` query values (`['-published_at']`). */\n    defaultSort?: string[];\n    /**\n     * Keeps the query in a router (`createHistoryRouter()`). Defaults to the router of the closest\n     * `PanneauProvider`; `null` keeps it in memory.\n     */\n    router?: ListOptions['router'];\n}\n\n/**\n * A list of items held in memory, from columns and items, with or without a definition. It\n * creates its state with `useList()` of `@panneau/core`, and applies the query to `items` itself.\n * For items fetched page by page, create the state with `useList()`, fetch its `query`, and render\n * `ListView`.\n *\n * The page size and the default sort are read once.\n */\nexport function List({ items, perPage = 20, defaultSort = [], router, ...props }: ListProps) {\n    const intl = usePanneauIntl();\n    const { query, list } = useList({\n        defaults: { perPage, sort: defaultSort },\n        ...(router !== undefined ? { router } : {}),\n    });\n    const result =\n        items !== undefined\n            ? applyListQuery(items, query, { columns: props.columns, locale: intl.locale })\n            : undefined;\n    return <ListView {...props} list={list} items={result?.items} total={result?.total} />;\n}\n"],"mappings":";;;;;;;;;;;;;;AA6BA,SAAgB,KAAK,EAAE,OAAO,UAAU,IAAI,cAAc,CAAA,GAAI,QAAQ,GAAG,SAAoB;CACzF,MAAM,OAAO,eAAe;CAC5B,MAAM,EAAE,OAAO,SAAS,QAAQ;EAC5B,UAAU;GAAE;GAAS,MAAM;EAAY;EACvC,GAAI,WAAW,KAAA,IAAY,EAAE,OAAO,IAAI,CAAC;CAC7C,CAAC;CACD,MAAM,SACF,UAAU,KAAA,IACJ,eAAe,OAAO,OAAO;EAAE,SAAS,MAAM;EAAS,QAAQ,KAAK;CAAO,CAAC,IAC5E,KAAA;CACV,OAAO,oBAAC,UAAD;EAAU,GAAI;EAAa;EAAM,OAAO,QAAQ;EAAO,OAAO,QAAQ;CAAM,CAAA;AACvF"}
+{"version":3,"file":"List.js","names":["ListOptions","useList","usePanneauIntl","ListView","ListViewProps","applyListQuery","ListItem","ListProps","Omit","items","perPage","defaultSort","router","List","t0","$","_c","t1","t2","props","undefined","t3","intl","t4","sort","t5","t6","defaults","query","list","result","columns","locale","t7","t8","total","t9","_c"],"sources":["../src/List.tsx"],"sourcesContent":["import { type ListOptions, useList } from '@panneau/core';\nimport { usePanneauIntl } from '@panneau/ui';\n\nimport { ListView, type ListViewProps } from './ListView';\nimport { applyListQuery } from './query';\nimport type { ListItem } from './types';\n\nexport interface ListProps extends Omit<ListViewProps, 'list' | 'total' | 'items'> {\n    /** Every item: the list searches, filters, sorts and paginates them in memory. */\n    items: readonly ListItem[] | undefined;\n    /** Items per page. Defaults to 20. */\n    perPage?: number;\n    /** Default sort, as `sort` query values (`['-published_at']`). */\n    defaultSort?: string[];\n    /**\n     * Keeps the query in a router (`createHistoryRouter()`). Defaults to the router of the closest\n     * `PanneauProvider`; `null` keeps it in memory.\n     */\n    router?: ListOptions['router'];\n}\n\n/**\n * A list of items held in memory, from columns and items, with or without a definition. It\n * creates its state with `useList()` of `@panneau/core`, and applies the query to `items` itself.\n * For items fetched page by page, create the state with `useList()`, fetch its `query`, and render\n * `ListView`.\n *\n * The page size and the default sort are read once.\n */\nexport function List({ items, perPage = 20, defaultSort = [], router, ...props }: ListProps) {\n    const intl = usePanneauIntl();\n    const { query, list } = useList({\n        defaults: { perPage, sort: defaultSort },\n        ...(router !== undefined ? { router } : {}),\n    });\n    const result =\n        items !== undefined\n            ? applyListQuery(items, query, { columns: props.columns, locale: intl.locale })\n            : undefined;\n    return <ListView {...props} list={list} items={result?.items} total={result?.total} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,SAAOa,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAc,MAAA,EAAAP,OAAAC,SAAAO,IAAAN,aAAAO,IAAAN,QAAA,GAAAO,UAAAL;CAAS,MAAAJ,UAAAO,OAAAG,KAAAA,IAAA,KAAAH;CAAY,IAAAI;CAAA,IAAAN,EAAA,OAAAG,IAAA;EAAEG,KAAAH,OAAAE,KAAAA,IAAA,CAAA,IAAAF;EAAgBH,EAAA,KAAAG;EAAAH,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAhB,MAAAJ,cAAAU;CACxC,MAAAC,OAAapB,eAAe;CAAE,IAAAqB;CAAA,IAAAR,EAAA,OAAAJ,eAAAI,EAAA,OAAAL,SAAA;EAEhBa,KAAA;GAAAb;GAAAc,MAAiBb;EAAY;EAACI,EAAA,KAAAJ;EAAAI,EAAA,KAAAL;EAAAK,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,OAAAH,QAAA;EACpCa,KAAAb,WAAWQ,KAAAA,IAAX,EAAAR,OAAqC,IAArC,CAAqC;EAACG,EAAA,KAAAH;EAAAG,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,OAAAQ,MAAAR,EAAA,OAAAU,IAAA;EAFdC,KAAA;GAAAC,UAClBJ;GAA8B,GACpCE;EACR;EAACV,EAAA,KAAAQ;EAAAR,EAAA,KAAAU;EAAAV,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAHD,MAAA,EAAAa,OAAAC,SAAwB5B,QAAQyB,EAG/B;CACD,MAAAI,SACIrB,UAAUW,KAAAA,IACJf,eAAeI,OAAOmB,OAAO;EAAAG,SAAWZ,MAAKY;EAAQC,QAAUV,KAAIU;CAAQ,CACnE,IAFdZ,KAAAA;CAG2C,MAAAa,KAAAH,QAAMrB;CAAgB,MAAAyB,KAAAJ,QAAMK;CAAO,IAAAC;CAAA,IAAArB,EAAA,QAAAc,QAAAd,EAAA,QAAAI,SAAAJ,EAAA,QAAAkB,MAAAlB,EAAA,QAAAmB,IAAA;EAA3EE,KAAA,oBAAC,UAAD;GAAS,GAAKjB;GAAaU;GAAa,OAAAI;GAAsB,OAAAC;EAAa,CAAA;EAAInB,EAAA,MAAAc;EAAAd,EAAA,MAAAI;EAAAJ,EAAA,MAAAkB;EAAAlB,EAAA,MAAAmB;EAAAnB,EAAA,MAAAqB;CAAA,OAAAA,KAAArB,EAAA;CAAA,OAA/EqB;AAA+E"}

package/dist/ListSkeleton.d.ts

@@ -0,0 +1,17 @@
+import type { ListColumn, ListLayoutEntry } from './types.js';
+export interface ListSkeletonProps {
+    Layout: ListLayoutEntry;
+    columns: readonly ListColumn[];
+    /** The page size: as many rows, up to what fits. */
+    perPage: number | undefined;
+    sort: readonly string[];
+    label: string;
+}
+/**
+ * The first page of a list that loads (decision 0034): the list's own layout, with its columns
+ * and a skeleton for each value, as many rows as the page size, up to what fits. The layout is
+ * inert and hidden: its headers can't be used before the items are there, and the status message
+ * of the region says that the list loads.
+ */
+export declare function ListSkeleton({ Layout, columns, perPage, sort, label }: ListSkeletonProps): import("react").JSX.Element;
+//# sourceMappingURL=ListSkeleton.d.ts.map

package/dist/ListSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListSkeleton.d.ts","sourceRoot":"","sources":["../src/ListSkeleton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAY,eAAe,EAAE,MAAM,SAAS,CAAC;AAUrE,MAAM,WAAW,iBAAiB;IAC9B,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,oDAAoD;IACpD,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,iBAAiB,+BAgCxF"}

package/dist/ListSkeleton.js

@@ -0,0 +1,111 @@
+import { messages } from "./messages.js";
+import { c } from "react/compiler-runtime";
+import { LoadingRegion, Skeleton, usePanneauIntl } from "@panneau/ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/ListSkeleton.tsx
+/** The most rows a skeleton draws: about what fits in a window. */
+var MAX_ROWS = 10;
+/** Widths of the values, varied so the rows read as text. */
+var WIDTHS = [
+	"72%",
+	"48%",
+	"64%",
+	"40%",
+	"56%",
+	"80%"
+];
+var none = () => null;
+var nothing = () => void 0;
+/**
+* The first page of a list that loads (decision 0034): the list's own layout, with its columns
+* and a skeleton for each value, as many rows as the page size, up to what fits. The layout is
+* inert and hidden: its headers can't be used before the items are there, and the status message
+* of the region says that the list loads.
+*/
+function ListSkeleton(t0) {
+	const $ = c(17);
+	const { Layout, columns, perPage, sort, label } = t0;
+	const intl = usePanneauIntl();
+	const rows = Math.max(1, Math.min(perPage ?? MAX_ROWS, MAX_ROWS));
+	let t1;
+	if ($[0] !== rows) {
+		t1 = Array.from({ length: rows }, _temp);
+		$[0] = rows;
+		$[1] = t1;
+	} else t1 = $[1];
+	const items = t1;
+	let t2;
+	if ($[2] !== columns || $[3] !== items) {
+		t2 = (item, column) => {
+			const offset = items.indexOf(item) + columns.indexOf(column);
+			return /* @__PURE__ */ jsx(Skeleton, { width: WIDTHS[offset % WIDTHS.length] });
+		};
+		$[2] = columns;
+		$[3] = items;
+		$[4] = t2;
+	} else t2 = $[4];
+	const renderValue = t2;
+	let t3;
+	if ($[5] !== intl) {
+		t3 = intl.formatMessage(messages.loading);
+		$[5] = intl;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== Layout || $[8] !== columns || $[9] !== items || $[10] !== label || $[11] !== renderValue || $[12] !== sort) {
+		t4 = /* @__PURE__ */ jsx("div", {
+			inert: true,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(Layout, {
+				items,
+				columns,
+				renderValue,
+				getItemLabel: _temp2,
+				getItemHref: none,
+				isCurrent: _temp3,
+				selectable: false,
+				isSelected: _temp4,
+				onToggle: nothing,
+				renderActions: none,
+				sort,
+				onSort: nothing,
+				label,
+				pageSelection: null
+			})
+		});
+		$[7] = Layout;
+		$[8] = columns;
+		$[9] = items;
+		$[10] = label;
+		$[11] = renderValue;
+		$[12] = sort;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== t3 || $[15] !== t4) {
+		t5 = /* @__PURE__ */ jsx(LoadingRegion, {
+			label: t3,
+			children: t4
+		});
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = t5;
+	} else t5 = $[16];
+	return t5;
+}
+function _temp4() {
+	return false;
+}
+function _temp3() {
+	return false;
+}
+function _temp2(item_0) {
+	return item_0.id;
+}
+function _temp(_, index) {
+	return { id: `skeleton-${String(index)}` };
+}
+//#endregion
+export { ListSkeleton };
+
+//# sourceMappingURL=ListSkeleton.js.map

package/dist/ListSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListSkeleton.js","names":["ReactNode","LoadingRegion","Skeleton","usePanneauIntl","messages","ListColumn","ListItem","ListLayoutEntry","MAX_ROWS","WIDTHS","none","nothing","undefined","ListSkeletonProps","Layout","columns","perPage","sort","label","ListSkeleton","t0","$","_c","intl","rows","Math","max","min","t1","Array","from","length","_temp","items","t2","item","column","offset","indexOf","renderValue","t3","formatMessage","loading","t4","_temp2","_temp3","_temp4","t5","item_0","id","_","index","String","_c"],"sources":["../src/ListSkeleton.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { LoadingRegion, Skeleton, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from './messages';\nimport type { ListColumn, ListItem, ListLayoutEntry } from './types';\n\n/** The most rows a skeleton draws: about what fits in a window. */\nconst MAX_ROWS = 10;\n/** Widths of the values, varied so the rows read as text. */\nconst WIDTHS = ['72%', '48%', '64%', '40%', '56%', '80%'];\n\nconst none = () => null;\nconst nothing = () => undefined;\n\nexport interface ListSkeletonProps {\n    Layout: ListLayoutEntry;\n    columns: readonly ListColumn[];\n    /** The page size: as many rows, up to what fits. */\n    perPage: number | undefined;\n    sort: readonly string[];\n    label: string;\n}\n\n/**\n * The first page of a list that loads (decision 0034): the list's own layout, with its columns\n * and a skeleton for each value, as many rows as the page size, up to what fits. The layout is\n * inert and hidden: its headers can't be used before the items are there, and the status message\n * of the region says that the list loads.\n */\nexport function ListSkeleton({ Layout, columns, perPage, sort, label }: ListSkeletonProps) {\n    const intl = usePanneauIntl();\n    const rows = Math.max(1, Math.min(perPage ?? MAX_ROWS, MAX_ROWS));\n    const items: ListItem[] = Array.from({ length: rows }, (_, index) => ({\n        id: `skeleton-${String(index)}`,\n    }));\n    const renderValue = (item: ListItem, column: ListColumn): ReactNode => {\n        const offset = items.indexOf(item) + columns.indexOf(column);\n        return <Skeleton width={WIDTHS[offset % WIDTHS.length]} />;\n    };\n    return (\n        <LoadingRegion label={intl.formatMessage(messages.loading)}>\n            <div inert aria-hidden=\"true\">\n                <Layout\n                    items={items}\n                    columns={columns}\n                    renderValue={renderValue}\n                    getItemLabel={(item) => item.id}\n                    getItemHref={none}\n                    isCurrent={() => false}\n                    selectable={false}\n                    isSelected={() => false}\n                    onToggle={nothing}\n                    renderActions={none}\n                    sort={sort}\n                    onSort={nothing}\n                    label={label}\n                    pageSelection={null}\n                />\n            </div>\n        </LoadingRegion>\n    );\n}\n"],"mappings":";;;;;;AAQA,IAAMQ,WAAW;;AAEjB,IAAMC,SAAS;CAAC;CAAO;CAAO;CAAO;CAAO;CAAO;AAAK;AAExD,IAAMC,aAAa;AACnB,IAAMC,gBAAgBC,KAAAA;;;;;;;AAiBtB,SAAOO,aAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAsB,MAAA,EAAAR,QAAAC,SAAAC,SAAAC,MAAAC,UAAAE;CACzB,MAAAG,OAAapB,eAAe;CAC5B,MAAAqB,OAAaC,KAAIC,IAAK,GAAGD,KAAIE,IAAKX,WAAAR,UAAqBA,QAAQ,CAAC;CAAE,IAAAoB;CAAA,IAAAP,EAAA,OAAAG,MAAA;EACxCI,KAAAC,MAAKC,KAAM,EAAAC,QAAUP,KAAK,GAAGQ,KAErD;EAACX,EAAA,KAAAG;EAAAH,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAFH,MAAAY,QAA0BL;CAEtB,IAAAM;CAAA,IAAAb,EAAA,OAAAN,WAAAM,EAAA,OAAAY,OAAA;EACgBC,MAAAC,MAAAC,WAAA;GAChB,MAAAC,SAAeJ,MAAKK,QAASH,IAAI,IAAIpB,QAAOuB,QAASF,MAAM;GAAE,OACtD,oBAAC,UAAD,EAAiB,OAAA3B,OAAO4B,SAAS5B,OAAMsB,QAAQ,CAAA;EAAI;EAC7DV,EAAA,KAAAN;EAAAM,EAAA,KAAAY;EAAAZ,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAHD,MAAAkB,cAAoBL;CAGlB,IAAAM;CAAA,IAAAnB,EAAA,OAAAE,MAAA;EAEwBiB,KAAAjB,KAAIkB,cAAerC,SAAQsC,OAAQ;EAACrB,EAAA,KAAAE;EAAAF,EAAA,KAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,IAAAsB;CAAA,IAAAtB,EAAA,OAAAP,UAAAO,EAAA,OAAAN,WAAAM,EAAA,OAAAY,SAAAZ,EAAA,QAAAH,SAAAG,EAAA,QAAAkB,eAAAlB,EAAA,QAAAJ,MAAA;EACtD0B,KAAA,oBAAA,OAAA;GAAK,OAAA;GAAkB,eAAA;GACnB,UAAA,oBAAC,QAAD;IACWV;IACElB;IACIwB;IACC,cAAAK;IACDlC,aAAAA;IACF,WAAAmC;IACC,YAAA;IACA,YAAAC;IACFnC,UAAAA;IACKD,eAAAA;IACTO;IACEN,QAAAA;IACDO;IACQ,eAAA;GAAI,CAAA;EAErB,CAAA;EAAAG,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAY;EAAAZ,EAAA,MAAAH;EAAAG,EAAA,MAAAkB;EAAAlB,EAAA,MAAAJ;EAAAI,EAAA,MAAAsB;CAAA,OAAAA,KAAAtB,EAAA;CAAA,IAAA0B;CAAA,IAAA1B,EAAA,QAAAmB,MAAAnB,EAAA,QAAAsB,IAAA;EAlBVI,KAAA,oBAAC,eAAD;GAAsB,OAAAP;GAClBG,UAAAA;EADU,CAAA;EAmBEtB,EAAA,MAAAmB;EAAAnB,EAAA,MAAAsB;EAAAtB,EAAA,MAAA0B;CAAA,OAAAA,KAAA1B,EAAA;CAAA,OAnBhB0B;AAmBgB;AA9BjB,SAAAD,SAAA;CAAA,OAqB+B;AAAK;AArBpC,SAAAD,SAAA;CAAA,OAmB8B;AAAK;AAnBnC,SAAAD,OAAAI,QAAA;CAAA,OAiBqCb,OAAIc;AAAG;AAjB5C,SAAAjB,MAAAkB,GAAAC,OAAA;CAAA,OAGmE,EAAAF,IAC9D,YAAYG,OAAOD,KAAK,IAChC;AAAC"}

package/dist/ListView.css

@@ -1,4 +1,4 @@
-.panneau-list-BmsDb5 {
+.panneau-list-view-list {
     container: panneau-list / inline-size;
     display: flex;
     flex-direction: column;
@@ -6,14 +6,14 @@
     min-width: 0;
 }
 
-.panneau-toolbar-Q043Ps {
+.panneau-list-view-toolbar {
     display: flex;
     flex-wrap: wrap;
     align-items: flex-end;
     gap: var(--panneau-space-3);
 }
 
-.panneau-toolbarStart-hzlm5k {
+.panneau-list-view-toolbar-start {
     display: flex;
     flex: 1 1 auto;
     flex-wrap: wrap;
@@ -22,7 +22,7 @@
     min-width: 0;
 }
 
-.panneau-toolbarEnd-0mOtOR {
+.panneau-list-view-toolbar-end {
     display: flex;
     flex-wrap: wrap;
     align-items: flex-end;
@@ -31,11 +31,11 @@
 }
 
 /* With the table layout, the column headers sort, until the list is too narrow to show them. */
-.panneau-tableSort-w-YpFE {
+.panneau-list-view-table-sort {
     display: none;
 }
 
-.panneau-selection-MHT4Rl {
+.panneau-list-view-selection {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -47,23 +47,23 @@
     border-radius: var(--panneau-radius-lg);
 }
 
-.panneau-selectionCount-maD7mZ {
+.panneau-list-view-selection-count {
     font-weight: var(--panneau-font-weight-medium);
 }
 
-.panneau-selectionActions-lQgDIc {
+.panneau-list-view-selection-actions {
     display: flex;
     flex-wrap: wrap;
     gap: var(--panneau-space-2);
     margin-inline-start: auto;
 }
 
-.panneau-body-m0W7NQ[aria-busy='true'] {
+.panneau-list-view-body[aria-busy='true'] {
     opacity: 0.6;
     transition: opacity var(--panneau-duration);
 }
 
-.panneau-state-VVBIkb {
+.panneau-list-view-state {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -76,26 +76,26 @@
     border-radius: var(--panneau-radius-lg);
 }
 
-.panneau-state-VVBIkb p {
+.panneau-list-view-state p {
     margin: 0;
 }
 
 @container panneau-list (max-width: 40rem) {
-    .panneau-toolbarStart-hzlm5k,
-    .panneau-toolbarEnd-0mOtOR {
+    .panneau-list-view-toolbar-start,
+    .panneau-list-view-toolbar-end {
         flex-basis: 100%;
     }
 
-    .panneau-toolbarEnd-0mOtOR {
+    .panneau-list-view-toolbar-end {
         margin-inline-start: 0;
     }
 
-    .panneau-tableSort-w-YpFE {
+    .panneau-list-view-table-sort {
         display: block;
         width: 100%;
     }
 
-    .panneau-selectionActions-lQgDIc {
+    .panneau-list-view-selection-actions {
         margin-inline-start: 0;
     }
 }

package/dist/ListView.d.ts

@@ -1,13 +1,16 @@
 import { type ReactNode } from 'react';
 import type { List } from '@panneau/core';
-import type { Field, Filter } from '@panneau/protocol';
-import { type ListActions } from './actions/actions';
-import type { ActionIcons } from './actions/icons';
-import type { DisplayEntry, FilterEntry, ListActionHandler, ListColumn, ListItem, ListLayoutEntry } from './types';
+import type { Action, Field, Filter } from '@panneau/protocol';
+import { type ListActions } from './actions/actions.js';
+import type { ActionIcons } from './actions/icons.js';
+import type { DisplayEntry, FilterEntry, ListActionHandler, ListActionPreviewer, ListColumn, ListItem, ListLayoutEntry } from './types.js';
 export interface ListViewProps {
     /** The list state of `@panneau/core` (`useList()`): query and selection. */
     list: List;
-    /** The items of the current page. `undefined` while they load for the first time. */
+    /**
+     * The items of the current page. `undefined` while they load for the first time: the list
+     * draws a skeleton of its rows, from its columns and its page size.
+     */
     items: readonly ListItem[] | undefined;
     columns: readonly ListColumn[];
     /**
@@ -15,6 +18,15 @@ export interface ListViewProps {
      * pagination and offers to select every matching item. Without it, `items` is the whole list.
      */
     total?: number | undefined;
+    /**
+     * The cursors of the page, for a list paged with cursors (`nextCursor` and `previousCursor`
+     * of its `meta`): the list then has buttons to the previous and next pages, without page
+     * numbers or a total, and doesn't offer to select every matching item.
+     */
+    cursors?: {
+        next: string | null;
+        previous?: string | null | undefined;
+    } | undefined;
     /** Shows that items are loading. Items already shown stay, dimmed. */
     isLoading?: boolean;
     /** An error while loading: an alert with a retry replaces the items. */
@@ -42,6 +54,12 @@ export interface ListViewProps {
     actions?: ListActions;
     /** Runs an action, after its confirmation. */
     onAction?: ListActionHandler;
+    /**
+     * Asks the backend how many items of a query selection ("Select all N items") an action will
+     * skip, before the confirmation: the list only knows the abilities of the current page. Only
+     * for actions with `dryRun`. `useActionPreview()` of `@panneau/actions` is one.
+     */
+    previewAction?: ListActionPreviewer;
     /**
      * Icons of actions by action id (`{ archive: Archive }`), for actions written in code. They
      * win over the Lucide icon an action names (`"icon": "archive"`).
@@ -53,6 +71,17 @@ export interface ListViewProps {
     getItemLabel?: (item: ListItem) => string;
     /** A link to an item, on its title. */
     getItemHref?: (item: ListItem) => string | null;
+    /**
+     * The link of a built-in `show` or `edit` action without a `url` or a `route` (decision 0040),
+     * which the caller resolves to its own routes. Without it, or when it answers `null`, the list
+     * leaves those links out.
+     */
+    getLinkHref?: (action: Action, item: ListItem) => string | null;
+    /**
+     * The item shown next to the list, such as in a panel of its details: its row is marked, and
+     * the link of its title is the current page.
+     */
+    currentItemId?: string | null;
     /** Displays by name, over the built-in ones and those of the plugins. */
     displays?: Readonly<Record<string, DisplayEntry>>;
     /** Layouts by id, over the built-in ones and those of the plugins. */
@@ -72,5 +101,5 @@ export interface ListViewProps {
  * cards), with sorting, search, filters and their chips, pagination, selection and actions. It
  * fetches nothing: the caller gives the items of the list's query and their total.
  */
-export declare function ListView({ list, items, columns, total, isLoading, error, onRetry, filters, fields, search, layouts: layoutsProp, layout: controlledLayout, onLayoutChange, perPageOptions, selectable: selectableProp, actions: actionsProp, onAction, actionIcons, itemTitle, getItemLabel: getItemLabelProp, getItemHref, displays, layoutComponents, filterControls, toolbar, emptyMessage, 'aria-label': ariaLabel, className, }: ListViewProps): import("react").JSX.Element;
+export declare function ListView({ list, items, columns, total, cursors, isLoading, error, onRetry, filters, fields, search, layouts: layoutsProp, layout: controlledLayout, onLayoutChange, perPageOptions, selectable: selectableProp, actions: actionsProp, onAction, previewAction, actionIcons, itemTitle, getItemLabel: getItemLabelProp, getItemHref, getLinkHref, currentItemId, displays, layoutComponents, filterControls, toolbar, emptyMessage, 'aria-label': ariaLabel, className, }: ListViewProps): import("react").JSX.Element;
 //# sourceMappingURL=ListView.d.ts.map