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

package/dist/toolbar/LayoutSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutSwitch.js","names":["layout","label","_c","styles"],"sources":["../../src/toolbar/LayoutSwitch.tsx"],"sourcesContent":["import { LayoutGrid, type LucideIcon, Rows3, Square } from 'lucide-react';\nimport { ToggleButton, ToggleButtonGroup } from 'react-aria-components';\n\nimport { Icon, Tooltip, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport styles from './Toolbar.module.css';\n\nconst ICONS: Record<string, LucideIcon> = { table: Rows3, cards: LayoutGrid };\n\nexport interface LayoutSwitchProps {\n    layouts: readonly string[];\n    value: string;\n    onChange: (layout: string) => void;\n}\n\n/** Buttons to show the items as a table, as cards, or in a plugin's layout. */\nexport function LayoutSwitch({ layouts, value, onChange }: LayoutSwitchProps) {\n    const intl = usePanneauIntl();\n    const labels: Record<string, string> = {\n        table: intl.formatMessage(messages.layoutTable),\n        cards: intl.formatMessage(messages.layoutCards),\n    };\n    return (\n        <ToggleButtonGroup\n            aria-label={intl.formatMessage(messages.layout)}\n            selectionMode=\"single\"\n            disallowEmptySelection\n            selectedKeys={[value]}\n            onSelectionChange={(keys) => {\n                const [next] = [...keys];\n                if (next !== undefined) {\n                    onChange(String(next));\n                }\n            }}\n            className={styles.layouts}\n        >\n            {layouts.map((layout) => {\n                const label = labels[layout] ?? layout;\n                return (\n                    <Tooltip key={layout} content={label}>\n                        <ToggleButton\n                            id={layout}\n                            aria-label={label}\n                            className={styles.layoutButton}\n                        >\n                            <Icon icon={ICONS[layout] ?? Square} />\n                        </ToggleButton>\n                    </Tooltip>\n                );\n            })}\n        </ToggleButtonGroup>\n    );\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,QAAoC;CAAE,OAAO;CAAO,OAAO;AAAW;;AAS5E,SAAO,aAAA,IAAA;CAAA,MAAA,IAAAE,EAAA,EAAA;CAAsB,MAAA,EAAA,SAAA,OAAA,aAAA;CACzB,MAAA,OAAa,eAAe;CAAE,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA;EAEnB,KAAA,KAAI,cAAe,SAAQ,WAAY;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA;EACxC,KAAA,KAAI,cAAe,SAAQ,WAAY;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,OAAA,IAAA;EAFZ,KAAA;GAAA,OAC5B;GAAwC,OACxC;EACX;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAHD,MAAA,SAAuC;CAGrC,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA;EAGkB,KAAA,KAAI,cAAe,SAAQ,MAAO;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAGjC,KAAA,CAAC,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,UAAA;EACF,MAAA,SAAA;GACf,MAAA,CAAA,QAAe,CAAA,GAAI,IAAI;GACvB,IAAI,SAAS,KAAA,GACT,SAAS,OAAO,IAAI,CAAC;EACxB;EACJ,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,UAAA,EAAA,QAAA,SAAA;EAAA,IAAA;EAAA,IAAA,EAAA,QAAA,QAAA;GAGY,MAAA,WAAA;IACT,MAAA,QAAc,OAAO,WAAP;IAAyB,OAEnC,oBAAC,SAAD;KAA+BD,SAAA;KAC3B,UAAA,oBAAC,cAAD;MACQD,IAAA;MACQC,cAAA;MACD,WAAAE,uBAAM;MAEjB,UAAA,oBAAC,MAAD,EAAY,MAAA,MAAM,WAAN,OAAuB,CAAA;KAL1B,CAAA;IADT,GAAM,MAAN;GAQE;GAEjB,EAAA,MAAA;GAAA,EAAA,MAAA;EAAA,OAAA,KAAA,EAAA;EAbA,KAAA,QAAO,IAAK,EAaZ;EAAC,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EA1BN,KAAA,oBAAC,mBAAD;GACgB,cAAA;GACE,eAAA;GACd,wBAAA;GACc,cAAA;GACK,mBAAA;GAMR,WAAAA,uBAAM;GAEhB,UAAA;EAba,CAAA;EA2BE,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OA3BpB;AA2BoB"}
+{"version":3,"file":"LayoutSwitch.js","names":["CalendarDays","Images","LayoutGrid","LucideIcon","Rows3","Square","ToggleButton","ToggleButtonGroup","Icon","Tooltip","usePanneauIntl","messages","styles","ICONS","Record","table","cards","gallery","calendar","LayoutSwitchProps","layouts","value","onChange","layout","LayoutSwitch","t0","$","_c","intl","t1","formatMessage","layoutTable","t2","layoutCards","t3","layoutGallery","t4","layoutCalendar","t5","labels","t6","t7","t8","keys","next","undefined","String","t9","t10","label","layoutButton","map","_c","styles"],"sources":["../../src/toolbar/LayoutSwitch.tsx"],"sourcesContent":["import { CalendarDays, Images, LayoutGrid, type LucideIcon, Rows3, Square } from 'lucide-react';\nimport { ToggleButton, ToggleButtonGroup } from 'react-aria-components';\n\nimport { Icon, Tooltip, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport styles from './Toolbar.module.css';\n\nconst ICONS: Record<string, LucideIcon> = {\n    table: Rows3,\n    cards: LayoutGrid,\n    gallery: Images,\n    calendar: CalendarDays,\n};\n\nexport interface LayoutSwitchProps {\n    layouts: readonly string[];\n    value: string;\n    onChange: (layout: string) => void;\n}\n\n/** Buttons to show the items as a table, as cards, or in a plugin's layout. */\nexport function LayoutSwitch({ layouts, value, onChange }: LayoutSwitchProps) {\n    const intl = usePanneauIntl();\n    const labels: Record<string, string> = {\n        table: intl.formatMessage(messages.layoutTable),\n        cards: intl.formatMessage(messages.layoutCards),\n        gallery: intl.formatMessage(messages.layoutGallery),\n        calendar: intl.formatMessage(messages.layoutCalendar),\n    };\n    return (\n        <ToggleButtonGroup\n            aria-label={intl.formatMessage(messages.layout)}\n            selectionMode=\"single\"\n            disallowEmptySelection\n            selectedKeys={[value]}\n            onSelectionChange={(keys) => {\n                const [next] = [...keys];\n                if (next !== undefined) {\n                    onChange(String(next));\n                }\n            }}\n            className={styles.layouts}\n        >\n            {layouts.map((layout) => {\n                const label = labels[layout] ?? layout;\n                return (\n                    <Tooltip key={layout} content={label}>\n                        <ToggleButton\n                            id={layout}\n                            aria-label={label}\n                            className={styles.layoutButton}\n                        >\n                            <Icon icon={ICONS[layout] ?? Square} />\n                        </ToggleButton>\n                    </Tooltip>\n                );\n            })}\n        </ToggleButtonGroup>\n    );\n}\n"],"mappings":"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"}

package/dist/toolbar/Pagination.d.ts

@@ -1,3 +1,4 @@
+import type { ListResponse } from '@panneau/protocol';
 export interface PaginationProps {
     page: number;
     perPage: number;
@@ -10,4 +11,36 @@ export interface PaginationProps {
 }
 /** The range of items shown, the page, and buttons to the previous and next pages. */
 export declare function Pagination({ page, perPage, total, onPageChange, perPageOptions, onPerPageChange, }: PaginationProps): import("react").JSX.Element;
+export interface CursorPaginationProps {
+    perPage: number;
+    /** Whether there is a page before: the list isn't on its first page. */
+    hasPrevious: boolean;
+    /** Whether there is a page after: the page has a `nextCursor`. */
+    hasNext: boolean;
+    onPrevious: () => void;
+    onNext: () => void;
+    /** Page sizes to choose from. Without them, the page size can't be changed. */
+    perPageOptions?: readonly number[] | undefined;
+    onPerPageChange?: (perPage: number) => void;
+}
+/**
+ * Buttons to the previous and next pages of a list paged with cursors, which has no page numbers
+ * and no total (decision 0039).
+ */
+export declare function CursorPagination({ perPage, hasPrevious, hasNext, onPrevious, onNext, perPageOptions, onPerPageChange, }: CursorPaginationProps): import("react").JSX.Element;
+/**
+ * The props of a `ListView` that page it, from the `meta` of a page of the list: `total` for
+ * numbered pages, `cursors` for a list paged with cursors.
+ *
+ * ```tsx
+ * <ListView {...getPagingProps(data?.meta)} items={data?.data} … />
+ * ```
+ */
+export declare function getPagingProps(meta: ListResponse['meta'] | undefined): {
+    total?: number;
+    cursors?: {
+        next: string | null;
+        previous?: string | null;
+    };
+};
 //# sourceMappingURL=Pagination.d.ts.map

package/dist/toolbar/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/toolbar/Pagination.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,+EAA+E;IAC/E,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IAC/C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,sFAAsF;AACtF,wBAAgB,UAAU,CAAC,EACvB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,YAAY,EACZ,cAAmB,EACnB,eAAe,GAClB,EAAE,eAAe,+BAyCjB"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/toolbar/Pagination.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOtD,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,+EAA+E;IAC/E,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IAC/C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,sFAAsF;AACtF,wBAAgB,UAAU,CAAC,EACvB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,YAAY,EACZ,cAAmB,EACnB,eAAe,GAClB,EAAE,eAAe,+BAyCjB;AAED,MAAM,WAAW,qBAAqB;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,wEAAwE;IACxE,WAAW,EAAE,OAAO,CAAC;IACrB,kEAAkE;IAClE,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IAC/C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC7B,OAAO,EACP,WAAW,EACX,OAAO,EACP,UAAU,EACV,MAAM,EACN,cAAmB,EACnB,eAAe,GAClB,EAAE,qBAAqB,+BAmCvB;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,GAAG,SAAS,GAAG;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;CAC/D,CAaA"}

package/dist/toolbar/Pagination.js

@@ -1,62 +1,302 @@
 import { messages } from "../messages.js";
 import Toolbar_module_default from "./Toolbar.module.js";
+import { c } from "react/compiler-runtime";
 import { IconButton, Select, usePanneauIntl } from "@panneau/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight } from "lucide-react";
+import { isCursorPage } from "@panneau/protocol/runtime";
 //#region src/toolbar/Pagination.tsx
 /** The range of items shown, the page, and buttons to the previous and next pages. */
-function Pagination({ page, perPage, total, onPageChange, perPageOptions = [], onPerPageChange }) {
+function Pagination(t0) {
+	const $ = c(44);
+	const { page, perPage, total, onPageChange, perPageOptions: t1, onPerPageChange } = t0;
+	const perPageOptions = t1 === void 0 ? [] : t1;
 	const intl = usePanneauIntl();
 	const lastPage = Math.max(1, Math.ceil(total / perPage));
 	const start = total === 0 ? 0 : (page - 1) * perPage + 1;
 	const end = Math.min(total, page * perPage);
-	const sizes = [.../* @__PURE__ */ new Set([...perPageOptions, perPage])].sort((a, b) => a - b);
-	return /* @__PURE__ */ jsxs("nav", {
-		"aria-label": intl.formatMessage(messages.pagination),
-		className: Toolbar_module_default.pagination,
-		children: [/* @__PURE__ */ jsx("span", { children: intl.formatMessage(messages.range, {
+	const sizes = [.../* @__PURE__ */ new Set([...perPageOptions, perPage])].sort(_temp);
+	let t2;
+	if ($[0] !== intl) {
+		t2 = intl.formatMessage(messages.pagination);
+		$[0] = intl;
+		$[1] = t2;
+	} else t2 = $[1];
+	const t3 = Toolbar_module_default;
+	let t4;
+	if ($[2] !== end || $[3] !== intl || $[4] !== start || $[5] !== total) {
+		t4 = intl.formatMessage(messages.range, {
 			start,
 			end,
 			total
-		}) }), /* @__PURE__ */ jsxs("div", {
-			className: Toolbar_module_default.pages,
+		});
+		$[2] = end;
+		$[3] = intl;
+		$[4] = start;
+		$[5] = total;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t4) {
+		t5 = /* @__PURE__ */ jsx("span", { children: t4 });
+		$[7] = t4;
+		$[8] = t5;
+	} else t5 = $[8];
+	const t6 = Toolbar_module_default;
+	const t7 = perPageOptions.length > 0 && onPerPageChange !== void 0 ? /* @__PURE__ */ jsx(Select, {
+		"aria-label": intl.formatMessage(messages.perPage),
+		options: sizes.map(_temp2),
+		value: perPage,
+		onChange: (value) => {
+			if (typeof value === "number") onPerPageChange(value);
+		},
+		className: Toolbar_module_default.perPage
+	}) : null;
+	let t8;
+	if ($[9] !== intl) {
+		t8 = intl.formatMessage(messages.previousPage);
+		$[9] = intl;
+		$[10] = t8;
+	} else t8 = $[10];
+	const t9 = page <= 1;
+	let t10;
+	if ($[11] !== onPageChange || $[12] !== page) {
+		t10 = () => onPageChange(page - 1);
+		$[11] = onPageChange;
+		$[12] = page;
+		$[13] = t10;
+	} else t10 = $[13];
+	let t11;
+	if ($[14] !== t10 || $[15] !== t8 || $[16] !== t9) {
+		t11 = /* @__PURE__ */ jsx(IconButton, {
+			icon: ChevronLeft,
+			label: t8,
+			isDisabled: t9,
+			onPress: t10
+		});
+		$[14] = t10;
+		$[15] = t8;
+		$[16] = t9;
+		$[17] = t11;
+	} else t11 = $[17];
+	let t12;
+	if ($[18] !== intl || $[19] !== lastPage || $[20] !== page) {
+		t12 = intl.formatMessage(messages.pageOf, {
+			page,
+			lastPage
+		});
+		$[18] = intl;
+		$[19] = lastPage;
+		$[20] = page;
+		$[21] = t12;
+	} else t12 = $[21];
+	let t13;
+	if ($[22] !== t12) {
+		t13 = /* @__PURE__ */ jsx("span", {
+			"aria-current": "page",
+			children: t12
+		});
+		$[22] = t12;
+		$[23] = t13;
+	} else t13 = $[23];
+	let t14;
+	if ($[24] !== intl) {
+		t14 = intl.formatMessage(messages.nextPage);
+		$[24] = intl;
+		$[25] = t14;
+	} else t14 = $[25];
+	const t15 = page >= lastPage;
+	let t16;
+	if ($[26] !== onPageChange || $[27] !== page) {
+		t16 = () => onPageChange(page + 1);
+		$[26] = onPageChange;
+		$[27] = page;
+		$[28] = t16;
+	} else t16 = $[28];
+	let t17;
+	if ($[29] !== t14 || $[30] !== t15 || $[31] !== t16) {
+		t17 = /* @__PURE__ */ jsx(IconButton, {
+			icon: ChevronRight,
+			label: t14,
+			isDisabled: t15,
+			onPress: t16
+		});
+		$[29] = t14;
+		$[30] = t15;
+		$[31] = t16;
+		$[32] = t17;
+	} else t17 = $[32];
+	let t18;
+	if ($[33] !== t11 || $[34] !== t13 || $[35] !== t17 || $[36] !== t6.pages || $[37] !== t7) {
+		t18 = /* @__PURE__ */ jsxs("div", {
+			className: t6.pages,
 			children: [
-				perPageOptions.length > 0 && onPerPageChange !== void 0 ? /* @__PURE__ */ jsx(Select, {
-					"aria-label": intl.formatMessage(messages.perPage),
-					options: sizes.map((size) => ({
-						value: size,
-						label: String(size)
-					})),
-					value: perPage,
-					onChange: (value) => {
-						if (typeof value === "number") onPerPageChange(value);
-					},
-					className: Toolbar_module_default.perPage
-				}) : null,
-				/* @__PURE__ */ jsx(IconButton, {
-					icon: ChevronLeft,
-					label: intl.formatMessage(messages.previousPage),
-					isDisabled: page <= 1,
-					onPress: () => onPageChange(page - 1)
-				}),
-				/* @__PURE__ */ jsx("span", {
-					"aria-current": "page",
-					children: intl.formatMessage(messages.pageOf, {
-						page,
-						lastPage
-					})
-				}),
-				/* @__PURE__ */ jsx(IconButton, {
-					icon: ChevronRight,
-					label: intl.formatMessage(messages.nextPage),
-					isDisabled: page >= lastPage,
-					onPress: () => onPageChange(page + 1)
-				})
+				t7,
+				t11,
+				t13,
+				t17
 			]
-		})]
-	});
+		});
+		$[33] = t11;
+		$[34] = t13;
+		$[35] = t17;
+		$[36] = t6.pages;
+		$[37] = t7;
+		$[38] = t18;
+	} else t18 = $[38];
+	let t19;
+	if ($[39] !== t18 || $[40] !== t2 || $[41] !== t3.pagination || $[42] !== t5) {
+		t19 = /* @__PURE__ */ jsxs("nav", {
+			"aria-label": t2,
+			className: t3.pagination,
+			children: [t5, t18]
+		});
+		$[39] = t18;
+		$[40] = t2;
+		$[41] = t3.pagination;
+		$[42] = t5;
+		$[43] = t19;
+	} else t19 = $[43];
+	return t19;
+}
+function _temp2(size) {
+	return {
+		value: size,
+		label: String(size)
+	};
+}
+function _temp(a, b) {
+	return a - b;
+}
+/**
+* Buttons to the previous and next pages of a list paged with cursors, which has no page numbers
+* and no total (decision 0039).
+*/
+function CursorPagination(t0) {
+	const $ = c(25);
+	const { perPage, hasPrevious, hasNext, onPrevious, onNext, perPageOptions: t1, onPerPageChange } = t0;
+	const perPageOptions = t1 === void 0 ? [] : t1;
+	const intl = usePanneauIntl();
+	const sizes = [.../* @__PURE__ */ new Set([...perPageOptions, perPage])].sort(_temp3);
+	let t2;
+	if ($[0] !== intl) {
+		t2 = intl.formatMessage(messages.pagination);
+		$[0] = intl;
+		$[1] = t2;
+	} else t2 = $[1];
+	const t3 = Toolbar_module_default;
+	let t4;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx("span", {});
+		$[2] = t4;
+	} else t4 = $[2];
+	const t5 = Toolbar_module_default;
+	const t6 = perPageOptions.length > 0 && onPerPageChange !== void 0 ? /* @__PURE__ */ jsx(Select, {
+		"aria-label": intl.formatMessage(messages.perPage),
+		options: sizes.map(_temp4),
+		value: perPage,
+		onChange: (value) => {
+			if (typeof value === "number") onPerPageChange(value);
+		},
+		className: Toolbar_module_default.perPage
+	}) : null;
+	let t7;
+	if ($[3] !== intl) {
+		t7 = intl.formatMessage(messages.previousPage);
+		$[3] = intl;
+		$[4] = t7;
+	} else t7 = $[4];
+	const t8 = !hasPrevious;
+	let t9;
+	if ($[5] !== onPrevious || $[6] !== t7 || $[7] !== t8) {
+		t9 = /* @__PURE__ */ jsx(IconButton, {
+			icon: ChevronLeft,
+			label: t7,
+			isDisabled: t8,
+			onPress: onPrevious
+		});
+		$[5] = onPrevious;
+		$[6] = t7;
+		$[7] = t8;
+		$[8] = t9;
+	} else t9 = $[8];
+	let t10;
+	if ($[9] !== intl) {
+		t10 = intl.formatMessage(messages.nextPage);
+		$[9] = intl;
+		$[10] = t10;
+	} else t10 = $[10];
+	const t11 = !hasNext;
+	let t12;
+	if ($[11] !== onNext || $[12] !== t10 || $[13] !== t11) {
+		t12 = /* @__PURE__ */ jsx(IconButton, {
+			icon: ChevronRight,
+			label: t10,
+			isDisabled: t11,
+			onPress: onNext
+		});
+		$[11] = onNext;
+		$[12] = t10;
+		$[13] = t11;
+		$[14] = t12;
+	} else t12 = $[14];
+	let t13;
+	if ($[15] !== t12 || $[16] !== t5.pages || $[17] !== t6 || $[18] !== t9) {
+		t13 = /* @__PURE__ */ jsxs("div", {
+			className: t5.pages,
+			children: [
+				t6,
+				t9,
+				t12
+			]
+		});
+		$[15] = t12;
+		$[16] = t5.pages;
+		$[17] = t6;
+		$[18] = t9;
+		$[19] = t13;
+	} else t13 = $[19];
+	let t14;
+	if ($[20] !== t13 || $[21] !== t2 || $[22] !== t3.pagination || $[23] !== t4) {
+		t14 = /* @__PURE__ */ jsxs("nav", {
+			"aria-label": t2,
+			className: t3.pagination,
+			children: [t4, t13]
+		});
+		$[20] = t13;
+		$[21] = t2;
+		$[22] = t3.pagination;
+		$[23] = t4;
+		$[24] = t14;
+	} else t14 = $[24];
+	return t14;
+}
+/**
+* The props of a `ListView` that page it, from the `meta` of a page of the list: `total` for
+* numbered pages, `cursors` for a list paged with cursors.
+*
+* ```tsx
+* <ListView {...getPagingProps(data?.meta)} items={data?.data} … />
+* ```
+*/
+function _temp4(size) {
+	return {
+		value: size,
+		label: String(size)
+	};
+}
+function _temp3(a, b) {
+	return a - b;
+}
+function getPagingProps(meta) {
+	if (meta === void 0) return {};
+	if (isCursorPage(meta)) return { cursors: {
+		next: meta.nextCursor,
+		...meta.previousCursor !== void 0 ? { previous: meta.previousCursor } : {}
+	} };
+	return { total: meta.total };
 }
 //#endregion
-export { Pagination };
+export { CursorPagination, Pagination, getPagingProps };
 
 //# sourceMappingURL=Pagination.js.map

package/dist/toolbar/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":["styles"],"sources":["../../src/toolbar/Pagination.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from 'lucide-react';\n\nimport { IconButton, Select, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport styles from './Toolbar.module.css';\n\nexport interface PaginationProps {\n    page: number;\n    perPage: number;\n    /** How many items match the query, on every page. */\n    total: number;\n    onPageChange: (page: number) => void;\n    /** Page sizes to choose from. Without them, the page size can't be changed. */\n    perPageOptions?: readonly number[] | undefined;\n    onPerPageChange?: (perPage: number) => void;\n}\n\n/** The range of items shown, the page, and buttons to the previous and next pages. */\nexport function Pagination({\n    page,\n    perPage,\n    total,\n    onPageChange,\n    perPageOptions = [],\n    onPerPageChange,\n}: PaginationProps) {\n    const intl = usePanneauIntl();\n    const lastPage = Math.max(1, Math.ceil(total / perPage));\n    const start = total === 0 ? 0 : (page - 1) * perPage + 1;\n    const end = Math.min(total, page * perPage);\n    const sizes = [...new Set([...perPageOptions, perPage])].sort((a, b) => a - b);\n    return (\n        <nav aria-label={intl.formatMessage(messages.pagination)} className={styles.pagination}>\n            <span>{intl.formatMessage(messages.range, { start, end, total })}</span>\n            <div className={styles.pages}>\n                {perPageOptions.length > 0 && onPerPageChange !== undefined ? (\n                    <Select\n                        aria-label={intl.formatMessage(messages.perPage)}\n                        options={sizes.map((size) => ({ value: size, label: String(size) }))}\n                        value={perPage}\n                        onChange={(value) => {\n                            if (typeof value === 'number') {\n                                onPerPageChange(value);\n                            }\n                        }}\n                        className={styles.perPage}\n                    />\n                ) : null}\n                <IconButton\n                    icon={ChevronLeft}\n                    label={intl.formatMessage(messages.previousPage)}\n                    isDisabled={page <= 1}\n                    onPress={() => onPageChange(page - 1)}\n                />\n                <span aria-current=\"page\">\n                    {intl.formatMessage(messages.pageOf, { page, lastPage })}\n                </span>\n                <IconButton\n                    icon={ChevronRight}\n                    label={intl.formatMessage(messages.nextPage)}\n                    isDisabled={page >= lastPage}\n                    onPress={() => onPageChange(page + 1)}\n                />\n            </div>\n        </nav>\n    );\n}\n"],"mappings":";;;;;;;AAmBA,SAAgB,WAAW,EACvB,MACA,SACA,OACA,cACA,iBAAiB,CAAA,GACjB,mBACgB;CAChB,MAAM,OAAO,eAAe;CAC5B,MAAM,WAAW,KAAK,IAAI,GAAG,KAAK,KAAK,QAAQ,OAAO,CAAC;CACvD,MAAM,QAAQ,UAAU,IAAI,KAAK,OAAO,KAAK,UAAU;CACvD,MAAM,MAAM,KAAK,IAAI,OAAO,OAAO,OAAO;CAC1C,MAAM,QAAQ,CAAC,mBAAG,IAAI,IAAI,CAAC,GAAG,gBAAgB,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC;CAC7E,OACI,qBAAC,OAAD;EAAK,cAAY,KAAK,cAAc,SAAS,UAAU;EAAG,WAAWA,uBAAO;EAA5E,UAAA,CACI,oBAAC,QAAD,EAAA,UAAO,KAAK,cAAc,SAAS,OAAO;GAAE;GAAO;GAAK;EAAM,CAAC,EAAQ,CAAA,GACvE,qBAAC,OAAD;GAAK,WAAWA,uBAAO;GAAvB,UAAA;IACK,eAAe,SAAS,KAAK,oBAAoB,KAAA,IAC9C,oBAAC,QAAD;KACI,cAAY,KAAK,cAAc,SAAS,OAAO;KAC/C,SAAS,MAAM,KAAK,UAAU;MAAE,OAAO;MAAM,OAAO,OAAO,IAAI;KAAE,EAAE;KACnE,OAAO;KACP,WAAW,UAAU;MACjB,IAAI,OAAO,UAAU,UACjB,gBAAgB,KAAK;KAE7B;KACA,WAAWA,uBAAO;IAAQ,CAAA,IAE9B;IACJ,oBAAC,YAAD;KACI,MAAM;KACN,OAAO,KAAK,cAAc,SAAS,YAAY;KAC/C,YAAY,QAAQ;KACpB,eAAe,aAAa,OAAO,CAAC;IAAE,CAAA;IAE1C,oBAAC,QAAD;KAAM,gBAAa;KACd,UAAA,KAAK,cAAc,SAAS,QAAQ;MAAE;MAAM;KAAS,CAAC;IACrD,CAAA;IACN,oBAAC,YAAD;KACI,MAAM;KACN,OAAO,KAAK,cAAc,SAAS,QAAQ;KAC3C,YAAY,QAAQ;KACpB,eAAe,aAAa,OAAO,CAAC;IAAE,CAAA;GAEzC;EACJ,CAAA,CAAA;;AAEb"}
+{"version":3,"file":"Pagination.js","names":["ChevronLeft","ChevronRight","ListResponse","isCursorPage","IconButton","Select","usePanneauIntl","messages","styles","PaginationProps","page","perPage","total","onPageChange","perPageOptions","onPerPageChange","Pagination","t0","$","_c","t1","undefined","intl","lastPage","Math","max","ceil","start","end","min","sizes","Set","sort","_temp","t2","formatMessage","pagination","t4","range","t5","t7","length","map","_temp2","value","t8","previousPage","t9","t10","t11","t12","pageOf","t13","t14","nextPage","t15","t16","t17","t18","t6","pages","t19","t3","size","label","String","a","b","CursorPaginationProps","hasPrevious","hasNext","onPrevious","onNext","CursorPagination","_temp3","Symbol","for","_temp4","getPagingProps","meta","cursors","next","previous","nextCursor","previousCursor","_c","styles"],"sources":["../../src/toolbar/Pagination.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from 'lucide-react';\n\nimport type { ListResponse } from '@panneau/protocol';\nimport { isCursorPage } from '@panneau/protocol/runtime';\nimport { IconButton, Select, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport styles from './Toolbar.module.css';\n\nexport interface PaginationProps {\n    page: number;\n    perPage: number;\n    /** How many items match the query, on every page. */\n    total: number;\n    onPageChange: (page: number) => void;\n    /** Page sizes to choose from. Without them, the page size can't be changed. */\n    perPageOptions?: readonly number[] | undefined;\n    onPerPageChange?: (perPage: number) => void;\n}\n\n/** The range of items shown, the page, and buttons to the previous and next pages. */\nexport function Pagination({\n    page,\n    perPage,\n    total,\n    onPageChange,\n    perPageOptions = [],\n    onPerPageChange,\n}: PaginationProps) {\n    const intl = usePanneauIntl();\n    const lastPage = Math.max(1, Math.ceil(total / perPage));\n    const start = total === 0 ? 0 : (page - 1) * perPage + 1;\n    const end = Math.min(total, page * perPage);\n    const sizes = [...new Set([...perPageOptions, perPage])].sort((a, b) => a - b);\n    return (\n        <nav aria-label={intl.formatMessage(messages.pagination)} className={styles.pagination}>\n            <span>{intl.formatMessage(messages.range, { start, end, total })}</span>\n            <div className={styles.pages}>\n                {perPageOptions.length > 0 && onPerPageChange !== undefined ? (\n                    <Select\n                        aria-label={intl.formatMessage(messages.perPage)}\n                        options={sizes.map((size) => ({ value: size, label: String(size) }))}\n                        value={perPage}\n                        onChange={(value) => {\n                            if (typeof value === 'number') {\n                                onPerPageChange(value);\n                            }\n                        }}\n                        className={styles.perPage}\n                    />\n                ) : null}\n                <IconButton\n                    icon={ChevronLeft}\n                    label={intl.formatMessage(messages.previousPage)}\n                    isDisabled={page <= 1}\n                    onPress={() => onPageChange(page - 1)}\n                />\n                <span aria-current=\"page\">\n                    {intl.formatMessage(messages.pageOf, { page, lastPage })}\n                </span>\n                <IconButton\n                    icon={ChevronRight}\n                    label={intl.formatMessage(messages.nextPage)}\n                    isDisabled={page >= lastPage}\n                    onPress={() => onPageChange(page + 1)}\n                />\n            </div>\n        </nav>\n    );\n}\n\nexport interface CursorPaginationProps {\n    perPage: number;\n    /** Whether there is a page before: the list isn't on its first page. */\n    hasPrevious: boolean;\n    /** Whether there is a page after: the page has a `nextCursor`. */\n    hasNext: boolean;\n    onPrevious: () => void;\n    onNext: () => void;\n    /** Page sizes to choose from. Without them, the page size can't be changed. */\n    perPageOptions?: readonly number[] | undefined;\n    onPerPageChange?: (perPage: number) => void;\n}\n\n/**\n * Buttons to the previous and next pages of a list paged with cursors, which has no page numbers\n * and no total (decision 0039).\n */\nexport function CursorPagination({\n    perPage,\n    hasPrevious,\n    hasNext,\n    onPrevious,\n    onNext,\n    perPageOptions = [],\n    onPerPageChange,\n}: CursorPaginationProps) {\n    const intl = usePanneauIntl();\n    const sizes = [...new Set([...perPageOptions, perPage])].sort((a, b) => a - b);\n    return (\n        <nav aria-label={intl.formatMessage(messages.pagination)} className={styles.pagination}>\n            <span />\n            <div className={styles.pages}>\n                {perPageOptions.length > 0 && onPerPageChange !== undefined ? (\n                    <Select\n                        aria-label={intl.formatMessage(messages.perPage)}\n                        options={sizes.map((size) => ({ value: size, label: String(size) }))}\n                        value={perPage}\n                        onChange={(value) => {\n                            if (typeof value === 'number') {\n                                onPerPageChange(value);\n                            }\n                        }}\n                        className={styles.perPage}\n                    />\n                ) : null}\n                <IconButton\n                    icon={ChevronLeft}\n                    label={intl.formatMessage(messages.previousPage)}\n                    isDisabled={!hasPrevious}\n                    onPress={onPrevious}\n                />\n                <IconButton\n                    icon={ChevronRight}\n                    label={intl.formatMessage(messages.nextPage)}\n                    isDisabled={!hasNext}\n                    onPress={onNext}\n                />\n            </div>\n        </nav>\n    );\n}\n\n/**\n * The props of a `ListView` that page it, from the `meta` of a page of the list: `total` for\n * numbered pages, `cursors` for a list paged with cursors.\n *\n * ```tsx\n * <ListView {...getPagingProps(data?.meta)} items={data?.data} … />\n * ```\n */\nexport function getPagingProps(meta: ListResponse['meta'] | undefined): {\n    total?: number;\n    cursors?: { next: string | null; previous?: string | null };\n} {\n    if (meta === undefined) {\n        return {};\n    }\n    if (isCursorPage(meta)) {\n        return {\n            cursors: {\n                next: meta.nextCursor,\n                ...(meta.previousCursor !== undefined ? { previous: meta.previousCursor } : {}),\n            },\n        };\n    }\n    return { total: meta.total };\n}\n"],"mappings":"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"}

package/dist/toolbar/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","names":["Search","draft","setDraft","_c","styles"],"sources":["../../src/toolbar/SearchField.tsx"],"sourcesContent":["import { Search } from 'lucide-react';\n\nimport { Icon, TextInput, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport { useDraft } from '../useDraft';\nimport styles from './Toolbar.module.css';\n\nexport interface SearchFieldProps {\n    /** The search of the query. */\n    value: string;\n    /** Called once the user stops typing, or presses Enter. */\n    onChange: (q: string) => void;\n}\n\n/** The search of a list (`q`). */\nexport function SearchField({ value, onChange }: SearchFieldProps) {\n    const intl = usePanneauIntl();\n    const { draft, setDraft, flush } = useDraft(value, onChange);\n    return (\n        <TextInput\n            type=\"search\"\n            aria-label={intl.formatMessage(messages.search)}\n            placeholder={intl.formatMessage(messages.searchPlaceholder)}\n            prefix={<Icon icon={Search} />}\n            value={draft}\n            onChange={setDraft}\n            onKeyDown={(event) => {\n                if (event.key === 'Enter') {\n                    flush();\n                }\n            }}\n            className={styles.search}\n        />\n    );\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAO,YAAA,IAAA;CAAA,MAAA,IAAAG,EAAA,EAAA;CAAqB,MAAA,EAAA,OAAA,aAAA;CACxB,MAAA,OAAa,eAAe;CAC5B,MAAA,EAAA,OAAA,UAAA,UAAmC,SAAS,OAAO,QAAQ;CAAE,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA;EAIzC,KAAA,KAAI,cAAe,SAAQ,MAAO;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA;EAClC,KAAA,KAAI,cAAe,SAAQ,iBAAkB;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EACnD,KAAA,oBAAC,MAAD,EAAYH,MAAA,OAAM,CAAA;EAAI,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAGnB,MAAA,UAAA;GACP,IAAI,MAAK,QAAS,SACd,MAAM;EACT;EACJ,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA,EAAA,OAAA,YAAA,EAAA,OAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EAXL,KAAA,oBAAC,WAAD;GACS,MAAA;GACO,cAAA;GACC,aAAA;GACL,QAAA;GACDC,OAAA;GACGC,UAAA;GACC,WAAA;GAKA,WAAAE,uBAAM;EAAO,CAAA;EAC1B,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAbF;AAaE"}
+{"version":3,"file":"SearchField.js","names":["Search","Icon","TextInput","usePanneauIntl","messages","useDraft","styles","SearchFieldProps","value","onChange","q","SearchField","t0","$","_c","intl","draft","setDraft","flush","t1","formatMessage","search","t2","searchPlaceholder","t3","Symbol","for","t4","event","key","t5","_c","styles"],"sources":["../../src/toolbar/SearchField.tsx"],"sourcesContent":["import { Search } from 'lucide-react';\n\nimport { Icon, TextInput, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport { useDraft } from '../useDraft';\nimport styles from './Toolbar.module.css';\n\nexport interface SearchFieldProps {\n    /** The search of the query. */\n    value: string;\n    /** Called once the user stops typing, or presses Enter. */\n    onChange: (q: string) => void;\n}\n\n/** The search of a list (`q`). */\nexport function SearchField({ value, onChange }: SearchFieldProps) {\n    const intl = usePanneauIntl();\n    const { draft, setDraft, flush } = useDraft(value, onChange);\n    return (\n        <TextInput\n            type=\"search\"\n            aria-label={intl.formatMessage(messages.search)}\n            placeholder={intl.formatMessage(messages.searchPlaceholder)}\n            prefix={<Icon icon={Search} />}\n            value={draft}\n            onChange={setDraft}\n            onKeyDown={(event) => {\n                if (event.key === 'Enter') {\n                    flush();\n                }\n            }}\n            className={styles.search}\n        />\n    );\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAOW,YAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAqB,MAAA,EAAAN,OAAAC,aAAAG;CACxB,MAAAG,OAAaZ,eAAe;CAC5B,MAAA,EAAAa,OAAAC,UAAAC,UAAmCb,SAASG,OAAOC,QAAQ;CAAE,IAAAU;CAAA,IAAAN,EAAA,OAAAE,MAAA;EAIzCI,KAAAJ,KAAIK,cAAehB,SAAQiB,MAAO;EAACR,EAAA,KAAAE;EAAAF,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAE,MAAA;EAClCO,KAAAP,KAAIK,cAAehB,SAAQmB,iBAAkB;EAACV,EAAA,KAAAE;EAAAF,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,OAAAY,OAAAC,IAAA,2BAAA,GAAA;EACnDF,KAAA,oBAAC,MAAD,EAAYxB,MAAAA,OAAM,CAAA;EAAIa,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,OAAAK,OAAA;EAGnBS,MAAAC,UAAA;GACP,IAAIA,MAAKC,QAAS,SACdX,MAAM;EACT;EACJL,EAAA,KAAAK;EAAAL,EAAA,KAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,OAAAG,SAAAH,EAAA,OAAAI,YAAAJ,EAAA,OAAAM,MAAAN,EAAA,QAAAS,MAAAT,EAAA,QAAAc,IAAA;EAXLG,KAAA,oBAAC,WAAD;GACS,MAAA;GACO,cAAAX;GACC,aAAAG;GACL,QAAAE;GACDR,OAAAA;GACGC,UAAAA;GACC,WAAAU;GAKA,WAAArB,uBAAMe;EAAO,CAAA;EAC1BR,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAM;EAAAN,EAAA,MAAAS;EAAAT,EAAA,MAAAc;EAAAd,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,OAbFiB;AAaE"}

package/dist/toolbar/SortSelect.d.ts

@@ -1,4 +1,4 @@
-import type { ListColumn } from '../types';
+import type { ListColumn } from '../types.js';
 export interface SortSelectProps {
     columns: readonly ListColumn[];
     sort: readonly string[];

package/dist/toolbar/SortSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortSelect.js","names":["column","options","_c","styles"],"sources":["../../src/toolbar/SortSelect.tsx"],"sourcesContent":["import { Select, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport type { ListColumn } from '../types';\nimport styles from './Toolbar.module.css';\n\nexport interface SortSelectProps {\n    columns: readonly ListColumn[];\n    sort: readonly string[];\n    onChange: (sort: string[]) => void;\n}\n\nconst DEFAULT = '';\n\n/** The sort of a list without column headers (cards), by sortable column and direction. */\nexport function SortSelect({ columns, sort, onChange }: SortSelectProps) {\n    const intl = usePanneauIntl();\n    const sortable = columns.filter((column) => column.sortable === true);\n    const label = (column: ListColumn) =>\n        typeof column.label === 'string' ? column.label : column.id;\n    const options = [\n        { value: DEFAULT, label: intl.formatMessage(messages.defaultSort) },\n        ...sortable.flatMap((column) => [\n            {\n                value: column.id,\n                label: intl.formatMessage(messages.sortAscending, { column: label(column) }),\n            },\n            {\n                value: `-${column.id}`,\n                label: intl.formatMessage(messages.sortDescending, { column: label(column) }),\n            },\n        ]),\n    ];\n    const current = sort[0] ?? DEFAULT;\n    return (\n        <Select\n            label={intl.formatMessage(messages.sortBy)}\n            options={options}\n            value={options.some((option) => option.value === current) ? current : DEFAULT}\n            onChange={(value) =>\n                onChange(value === null || value === DEFAULT ? [] : [String(value)])\n            }\n            className={styles.sort}\n        />\n    );\n}\n"],"mappings":";;;;;;AAYA,IAAM,UAAU;;AAGhB,SAAO,WAAA,IAAA;CAAA,MAAA,IAAAE,EAAA,EAAA;CAAoB,MAAA,EAAA,SAAA,MAAA,aAAA;CACvB,MAAA,OAAa,eAAe;CAAE,IAAA;CAAA,IAAA,EAAA,OAAA,WAAA,EAAA,OAAA,MAAA;EAC9B,MAAA,WAAiB,QAAO,OAAQ,KAAoC;EACpE,MAAA,QAAc;EACkD,IAAA;EAAA,IAAA,EAAA,OAAA,MAAA;GAEnC,KAAA,KAAI,cAAe,SAAQ,WAAY;GAAC,EAAA,KAAA;GAAA,EAAA,KAAA;EAAA,OAAA,KAAA,EAAA;EAAA,IAAA;EAAA,IAAA,EAAA,OAAA,IAAA;GAAjE,KAAA;IAAA,OAAS;IAAO,OAAS;GAAyC;GAAC,EAAA,KAAA;GAAA,EAAA,KAAA;EAAA,OAAA,KAAA,EAAA;EAAA,IAAA;EAAA,IAAA,EAAA,OAAA,MAAA;GAC/C,MAAA,aAAY,CAC5B;IAAA,OACWF,SAAM;IAAG,OACT,KAAI,cAAe,SAAQ,eAAgB,EAAA,QAAU,MAAMA,QAAM,EAAE,CAAC;GAC/E,GACA;IAAA,OACW,IAAIA,SAAM;IAAK,OACf,KAAI,cAAe,SAAQ,gBAAiB,EAAA,QAAU,MAAMA,QAAM,EAAE,CAAC;GAChF,CAAC;GACJ,EAAA,KAAA;GAAA,EAAA,KAAA;EAAA,OAAA,KAAA,EAAA;EAXW,KAAA,CACZ,IAAmE,GAChE,SAAQ,QAAS,EASnB,CAAC;EACL,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAZD,MAAA,UAAgB;CAahB,MAAA,UAAgB,KAAI,MAAJ;CAAmB,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA;EAGpB,KAAA,KAAI,cAAe,SAAQ,MAAO;EAAC,EAAA,KAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAEnC,MAAA,KAAA,QAAO,MAAM,WAAY,OAAM,UAAW,OAA2B,IAArE,UAAA;CAAsE,IAAA;CAAA,IAAA,EAAA,QAAA,UAAA;EACnE,MAAA,UACN,SAAS,UAAU,QAAQ,UAAU,UAA5B,CAAA,IAAA,CAA4C,OAAO,KAAK,CAAC,CAAC;EAAC,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,WAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EAL5E,KAAA,oBAAC,QAAD;GACW,OAAA;GACE;GACF,OAAA;GACG,UAAA;GAGC,WAAAG,uBAAM;EAAK,CAAA;EACxB,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OARF;AAQE;AA5BH,SAAA,OAAA,UAAA;CAAA,OAIC,OAAOH,SAAM,UAAW,WAAWA,SAAM,QAASA,SAAM;AAAG;AAJ5D,SAAA,MAAA,QAAA;CAAA,OAEyC,OAAM,aAAc;AAAI"}
+{"version":3,"file":"SortSelect.js","names":["Select","usePanneauIntl","messages","ListColumn","styles","SortSelectProps","columns","sort","onChange","DEFAULT","SortSelect","t0","$","_c","intl","t1","sortable","filter","_temp","label","_temp2","t2","formatMessage","defaultSort","t3","value","t4","column_1","column","id","sortAscending","sortDescending","flatMap","options","current","sortBy","some","option","String","t5","column_0","_c","styles"],"sources":["../../src/toolbar/SortSelect.tsx"],"sourcesContent":["import { Select, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport type { ListColumn } from '../types';\nimport styles from './Toolbar.module.css';\n\nexport interface SortSelectProps {\n    columns: readonly ListColumn[];\n    sort: readonly string[];\n    onChange: (sort: string[]) => void;\n}\n\nconst DEFAULT = '';\n\n/** The sort of a list without column headers (cards), by sortable column and direction. */\nexport function SortSelect({ columns, sort, onChange }: SortSelectProps) {\n    const intl = usePanneauIntl();\n    const sortable = columns.filter((column) => column.sortable === true);\n    const label = (column: ListColumn) =>\n        typeof column.label === 'string' ? column.label : column.id;\n    const options = [\n        { value: DEFAULT, label: intl.formatMessage(messages.defaultSort) },\n        ...sortable.flatMap((column) => [\n            {\n                value: column.id,\n                label: intl.formatMessage(messages.sortAscending, { column: label(column) }),\n            },\n            {\n                value: `-${column.id}`,\n                label: intl.formatMessage(messages.sortDescending, { column: label(column) }),\n            },\n        ]),\n    ];\n    const current = sort[0] ?? DEFAULT;\n    return (\n        <Select\n            label={intl.formatMessage(messages.sortBy)}\n            options={options}\n            value={options.some((option) => option.value === current) ? current : DEFAULT}\n            onChange={(value) =>\n                onChange(value === null || value === DEFAULT ? [] : [String(value)])\n            }\n            className={styles.sort}\n        />\n    );\n}\n"],"mappings":";;;;;;AAYA,IAAMS,UAAU;;AAGhB,SAAOC,WAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAoB,MAAA,EAAAP,SAAAC,MAAAC,aAAAG;CACvB,MAAAG,OAAab,eAAe;CAAE,IAAAc;CAAA,IAAAH,EAAA,OAAAN,WAAAM,EAAA,OAAAE,MAAA;EAC9B,MAAAE,WAAiBV,QAAOW,OAAQC,KAAoC;EACpE,MAAAC,QAAcC;EACkD,IAAAC;EAAA,IAAAT,EAAA,OAAAE,MAAA;GAEnCO,KAAAP,KAAIQ,cAAepB,SAAQqB,WAAY;GAACX,EAAA,KAAAE;GAAAF,EAAA,KAAAS;EAAA,OAAAA,KAAAT,EAAA;EAAA,IAAAY;EAAA,IAAAZ,EAAA,OAAAS,IAAA;GAAjEG,KAAA;IAAAC,OAAShB;IAAOU,OAASE;GAAyC;GAACT,EAAA,KAAAS;GAAAT,EAAA,KAAAY;EAAA,OAAAA,KAAAZ,EAAA;EAAA,IAAAc;EAAA,IAAAd,EAAA,OAAAE,MAAA;GAC/CY,MAAAC,aAAY,CAC5B;IAAAF,OACWG,SAAMC;IAAGV,OACTL,KAAIQ,cAAepB,SAAQ4B,eAAgB,EAAAF,QAAUT,MAAMS,QAAM,EAAE,CAAC;GAC/E,GACA;IAAAH,OACW,IAAIG,SAAMC;IAAKV,OACfL,KAAIQ,cAAepB,SAAQ6B,gBAAiB,EAAAH,QAAUT,MAAMS,QAAM,EAAE,CAAC;GAChF,CAAC;GACJhB,EAAA,KAAAE;GAAAF,EAAA,KAAAc;EAAA,OAAAA,KAAAd,EAAA;EAXWG,KAAA,CACZS,IAAmE,GAChER,SAAQgB,QAASN,EASnB,CAAC;EACLd,EAAA,KAAAN;EAAAM,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAZD,MAAAqB,UAAgBlB;CAahB,MAAAmB,UAAgB3B,KAAI,MAAJE;CAAmB,IAAAY;CAAA,IAAAT,EAAA,OAAAE,MAAA;EAGpBO,KAAAP,KAAIQ,cAAepB,SAAQiC,MAAO;EAACvB,EAAA,KAAAE;EAAAF,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAEnC,MAAAY,KAAAS,QAAOG,MAAMC,WAAYA,OAAMZ,UAAWS,OAA2B,IAArEA,UAAAzB;CAAsE,IAAAiB;CAAA,IAAAd,EAAA,QAAAJ,UAAA;EACnEkB,MAAAD,UACNjB,SAASiB,UAAU,QAAQA,UAAUhB,UAA5B,CAAA,IAAA,CAA4C6B,OAAOb,KAAK,CAAC,CAAC;EAACb,EAAA,MAAAJ;EAAAI,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAA2B;CAAA,IAAA3B,EAAA,QAAAqB,WAAArB,EAAA,QAAAS,MAAAT,EAAA,QAAAY,MAAAZ,EAAA,QAAAc,IAAA;EAL5Ea,KAAA,oBAAC,QAAD;GACW,OAAAlB;GACEY;GACF,OAAAT;GACG,UAAAE;GAGC,WAAAtB,uBAAMG;EAAK,CAAA;EACxBK,EAAA,MAAAqB;EAAArB,EAAA,MAAAS;EAAAT,EAAA,MAAAY;EAAAZ,EAAA,MAAAc;EAAAd,EAAA,MAAA2B;CAAA,OAAAA,KAAA3B,EAAA;CAAA,OARF2B;AAQE;AA5BH,SAAAnB,OAAAoB,UAAA;CAAA,OAIC,OAAOZ,SAAMT,UAAW,WAAWS,SAAMT,QAASS,SAAMC;AAAG;AAJ5D,SAAAX,MAAAU,QAAA;CAAA,OAEyCA,OAAMZ,aAAc;AAAI"}

package/dist/toolbar/Toolbar.css

@@ -70,3 +70,39 @@
         width: 100%;
     }
 }
+
+.panneau-toolbar-columns {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--panneau-space-2);
+    min-width: 14rem;
+    max-height: 24rem;
+    overflow-y: auto;
+}
+
+.panneau-toolbar-column-list {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    gap: var(--panneau-space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.panneau-toolbar-column {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--panneau-space-2);
+    min-height: var(--panneau-control-height-sm);
+}
+
+.panneau-toolbar-column-label {
+    flex: 1;
+}
+
+.panneau-toolbar-column-moves {
+    display: inline-flex;
+}

package/dist/toolbar/Toolbar.module.js

@@ -7,6 +7,11 @@ var perPage = "panneau-toolbar-per-page";
 var layouts = "panneau-toolbar-layouts";
 var layoutButton = "panneau-toolbar-layout-button";
 var sort = "panneau-toolbar-sort";
+var columns = "panneau-toolbar-columns";
+var columnList = "panneau-toolbar-column-list";
+var column = "panneau-toolbar-column";
+var columnLabel = "panneau-toolbar-column-label";
+var columnMoves = "panneau-toolbar-column-moves";
 var Toolbar_module_default = {
 	search,
 	pagination,
@@ -14,9 +19,14 @@ var Toolbar_module_default = {
 	perPage,
 	layouts,
 	layoutButton,
-	sort
+	sort,
+	columns,
+	columnList,
+	column,
+	columnLabel,
+	columnMoves
 };
 //#endregion
-export { Toolbar_module_default as default, layoutButton, layouts, pages, pagination, perPage, search, sort };
+export { column, columnLabel, columnList, columnMoves, columns, Toolbar_module_default as default, layoutButton, layouts, pages, pagination, perPage, search, sort };
 
 //# sourceMappingURL=Toolbar.module.js.map

package/dist/toolbar/Toolbar.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.module.js","names":[],"sources":["../../src/toolbar/Toolbar.module.css"],"sourcesContent":[".search {\n    width: 16rem;\n    max-width: 100%;\n}\n\n.pagination {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--panneau-space-3);\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.pages {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n}\n\n.perPage {\n    width: 6rem;\n}\n\n.layouts {\n    display: inline-flex;\n    padding: 2px;\n    background-color: var(--panneau-color-surface-sunken);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-md);\n}\n\n.layoutButton {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: calc(var(--panneau-control-height) - 6px);\n    height: calc(var(--panneau-control-height) - 6px);\n    color: var(--panneau-color-text-muted);\n    background: none;\n    border: 0;\n    border-radius: var(--panneau-radius-sm);\n    cursor: pointer;\n}\n\n.layoutButton[data-hovered] {\n    color: var(--panneau-color-text);\n}\n\n.layoutButton[data-selected] {\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-surface);\n    box-shadow: var(--panneau-shadow-sm);\n}\n\n.layoutButton[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 1px;\n}\n\n.sort {\n    width: 14rem;\n    max-width: 100%;\n}\n\n@container panneau-list (max-width: 40rem) {\n    .search,\n    .sort {\n        width: 100%;\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"Toolbar.module.js","names":[],"sources":["../../src/toolbar/Toolbar.module.css"],"sourcesContent":[".search {\n    width: 16rem;\n    max-width: 100%;\n}\n\n.pagination {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--panneau-space-3);\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.pages {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n}\n\n.perPage {\n    width: 6rem;\n}\n\n.layouts {\n    display: inline-flex;\n    padding: 2px;\n    background-color: var(--panneau-color-surface-sunken);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-md);\n}\n\n.layoutButton {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: calc(var(--panneau-control-height) - 6px);\n    height: calc(var(--panneau-control-height) - 6px);\n    color: var(--panneau-color-text-muted);\n    background: none;\n    border: 0;\n    border-radius: var(--panneau-radius-sm);\n    cursor: pointer;\n}\n\n.layoutButton[data-hovered] {\n    color: var(--panneau-color-text);\n}\n\n.layoutButton[data-selected] {\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-surface);\n    box-shadow: var(--panneau-shadow-sm);\n}\n\n.layoutButton[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 1px;\n}\n\n.sort {\n    width: 14rem;\n    max-width: 100%;\n}\n\n@container panneau-list (max-width: 40rem) {\n    .search,\n    .sort {\n        width: 100%;\n    }\n}\n\n.columns {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--panneau-space-2);\n    min-width: 14rem;\n    max-height: 24rem;\n    overflow-y: auto;\n}\n\n.columnList {\n    display: flex;\n    flex-direction: column;\n    align-self: stretch;\n    gap: var(--panneau-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.column {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--panneau-space-2);\n    min-height: var(--panneau-control-height-sm);\n}\n\n.columnLabel {\n    flex: 1;\n}\n\n.columnMoves {\n    display: inline-flex;\n}\n"],"mappings":""}