@panneau/lists 4.1.1 → 5.0.0-alpha.1

package/dist/layouts/CardsLayout.css

@@ -0,0 +1,72 @@
+.panneau-cards-Z7Eoyl {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
+    gap: var(--panneau-space-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.panneau-card-3yuJKc {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-2);
+    padding: var(--panneau-space-3);
+    background-color: var(--panneau-color-surface);
+    border: var(--panneau-border-width) solid var(--panneau-color-border);
+    border-radius: var(--panneau-radius-lg);
+}
+
+.panneau-card-3yuJKc[data-selected] {
+    background-color: var(--panneau-color-accent-subtle);
+    border-color: var(--panneau-color-border-control);
+}
+
+.panneau-header-8nkYnu {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--panneau-space-2);
+}
+
+.panneau-title-D4GR87 {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    font-size: var(--panneau-font-size-lg);
+    font-weight: var(--panneau-font-weight-medium);
+    line-height: var(--panneau-line-height-tight);
+}
+
+.panneau-values-JmHWF4 {
+    display: grid;
+    gap: var(--panneau-space-1);
+    margin: 0;
+    font-size: var(--panneau-font-size-md);
+}
+
+.panneau-value--4Hmov {
+    display: grid;
+    grid-template-columns: minmax(5rem, 40%) 1fr;
+    gap: var(--panneau-space-2);
+}
+
+.panneau-value--4Hmov dt {
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-value--4Hmov dd {
+    margin: 0;
+    min-width: 0;
+}
+
+.panneau-actions-gw5-oU {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--panneau-space-1);
+    margin-top: auto;
+    padding-top: var(--panneau-space-1);
+}
+
+.panneau-pageSelection-r1GtpS {
+    margin-bottom: var(--panneau-space-2);
+}

package/dist/layouts/CardsLayout.d.ts

@@ -0,0 +1,4 @@
+import type { ListLayoutProps } from '../types';
+/** Items as cards: the first column is the title, the others are listed under it. */
+export declare function CardsLayout({ items, columns, renderValue, getItemLabel, getItemHref, selectable, isSelected, onToggle, renderActions, label, pageSelection, }: ListLayoutProps): import("react").JSX.Element;
+//# sourceMappingURL=CardsLayout.d.ts.map

package/dist/layouts/CardsLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardsLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/CardsLayout.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAIhD,qFAAqF;AACrF,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,OAAO,EACP,WAAW,EACX,YAAY,EACZ,WAAW,EACX,UAAU,EACV,UAAU,EACV,QAAQ,EACR,aAAa,EACb,KAAK,EACL,aAAa,GAChB,EAAE,eAAe,+BAqDjB"}

package/dist/layouts/CardsLayout.js

@@ -0,0 +1,111 @@
+import { messages } from "../messages.js";
+import CardsLayout_module_default from "./CardsLayout.module.js";
+import { ItemTitle } from "./ItemTitle.js";
+import { c } from "react/compiler-runtime";
+import { Checkbox, usePanneauIntl } from "@panneau/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/layouts/CardsLayout.tsx
+/** Items as cards: the first column is the title, the others are listed under it. */
+function CardsLayout(t0) {
+	const $ = c(26);
+	const { items, columns, renderValue, getItemLabel, getItemHref, selectable, isSelected, onToggle, renderActions, label, pageSelection } = t0;
+	const intl = usePanneauIntl();
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== columns || $[1] !== getItemHref || $[2] !== getItemLabel || $[3] !== intl || $[4] !== isSelected || $[5] !== items || $[6] !== label || $[7] !== onToggle || $[8] !== pageSelection || $[9] !== renderActions || $[10] !== renderValue || $[11] !== selectable) {
+		const [title, ...others] = columns;
+		if ($[16] !== pageSelection || $[17] !== selectable) {
+			t4 = selectable ? /* @__PURE__ */ jsx("div", {
+				className: CardsLayout_module_default.pageSelection,
+				children: pageSelection
+			}) : null;
+			$[16] = pageSelection;
+			$[17] = selectable;
+			$[18] = t4;
+		} else t4 = $[18];
+		t1 = CardsLayout_module_default.cards;
+		t2 = label;
+		t3 = items.map((item) => {
+			const selected = selectable && isSelected(item);
+			const actions = renderActions(item);
+			return /* @__PURE__ */ jsxs("li", {
+				className: CardsLayout_module_default.card,
+				"data-selected": selected || void 0,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: CardsLayout_module_default.header,
+						children: [/* @__PURE__ */ jsx("div", {
+							className: CardsLayout_module_default.title,
+							children: /* @__PURE__ */ jsx(ItemTitle, {
+								href: getItemHref?.(item) ?? null,
+								children: title !== void 0 ? renderValue(item, title) : getItemLabel(item)
+							})
+						}), selectable ? /* @__PURE__ */ jsx(Checkbox, {
+							"aria-label": intl.formatMessage(messages.selectItem, { item: getItemLabel(item) }),
+							isSelected: selected,
+							onChange: () => onToggle(item)
+						}) : null]
+					}),
+					others.length > 0 ? /* @__PURE__ */ jsx("dl", {
+						className: CardsLayout_module_default.values,
+						children: others.map((column) => /* @__PURE__ */ jsxs("div", {
+							className: CardsLayout_module_default.value,
+							children: [/* @__PURE__ */ jsx("dt", { children: column.label ?? column.id }), /* @__PURE__ */ jsx("dd", { children: renderValue(item, column) })]
+						}, column.id))
+					}) : null,
+					actions !== null ? /* @__PURE__ */ jsx("div", {
+						className: CardsLayout_module_default.actions,
+						children: actions
+					}) : null
+				]
+			}, item.id);
+		});
+		$[0] = columns;
+		$[1] = getItemHref;
+		$[2] = getItemLabel;
+		$[3] = intl;
+		$[4] = isSelected;
+		$[5] = items;
+		$[6] = label;
+		$[7] = onToggle;
+		$[8] = pageSelection;
+		$[9] = renderActions;
+		$[10] = renderValue;
+		$[11] = selectable;
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t4;
+	} else {
+		t1 = $[12];
+		t2 = $[13];
+		t3 = $[14];
+		t4 = $[15];
+	}
+	let t5;
+	if ($[19] !== t1 || $[20] !== t2 || $[21] !== t3) {
+		t5 = /* @__PURE__ */ jsx("ul", {
+			className: t1,
+			"aria-label": t2,
+			children: t3
+		});
+		$[19] = t1;
+		$[20] = t2;
+		$[21] = t3;
+		$[22] = t5;
+	} else t5 = $[22];
+	let t6;
+	if ($[23] !== t4 || $[24] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", { children: [t4, t5] });
+		$[23] = t4;
+		$[24] = t5;
+		$[25] = t6;
+	} else t6 = $[25];
+	return t6;
+}
+//#endregion
+export { CardsLayout };
+
+//# sourceMappingURL=CardsLayout.js.map

package/dist/layouts/CardsLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardsLayout.js","names":["pageSelection","label","selected","actions","_c","styles"],"sources":["../../src/layouts/CardsLayout.tsx"],"sourcesContent":["import { Checkbox, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport type { ListLayoutProps } from '../types';\nimport styles from './CardsLayout.module.css';\nimport { ItemTitle } from './ItemTitle';\n\n/** Items as cards: the first column is the title, the others are listed under it. */\nexport function CardsLayout({\n    items,\n    columns,\n    renderValue,\n    getItemLabel,\n    getItemHref,\n    selectable,\n    isSelected,\n    onToggle,\n    renderActions,\n    label,\n    pageSelection,\n}: ListLayoutProps) {\n    const intl = usePanneauIntl();\n    const [title, ...others] = columns;\n    return (\n        <div>\n            {selectable ? <div className={styles.pageSelection}>{pageSelection}</div> : null}\n            <ul className={styles.cards} aria-label={label}>\n                {items.map((item) => {\n                    const selected = selectable && isSelected(item);\n                    const actions = renderActions(item);\n                    return (\n                        <li\n                            key={item.id}\n                            className={styles.card}\n                            data-selected={selected || undefined}\n                        >\n                            <div className={styles.header}>\n                                <div className={styles.title}>\n                                    <ItemTitle href={getItemHref?.(item) ?? null}>\n                                        {title !== undefined\n                                            ? renderValue(item, title)\n                                            : getItemLabel(item)}\n                                    </ItemTitle>\n                                </div>\n                                {selectable ? (\n                                    <Checkbox\n                                        aria-label={intl.formatMessage(messages.selectItem, {\n                                            item: getItemLabel(item),\n                                        })}\n                                        isSelected={selected}\n                                        onChange={() => onToggle(item)}\n                                    />\n                                ) : null}\n                            </div>\n                            {others.length > 0 ? (\n                                <dl className={styles.values}>\n                                    {others.map((column) => (\n                                        <div key={column.id} className={styles.value}>\n                                            <dt>{column.label ?? column.id}</dt>\n                                            <dd>{renderValue(item, column)}</dd>\n                                        </div>\n                                    ))}\n                                </dl>\n                            ) : null}\n                            {actions !== null ? (\n                                <div className={styles.actions}>{actions}</div>\n                            ) : null}\n                        </li>\n                    );\n                })}\n            </ul>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/layouts/CardsLayout.module.js

@@ -0,0 +1,24 @@
+import "./CardsLayout.css";
+//#region src/layouts/CardsLayout.module.css
+var cards = "panneau-cards-Z7Eoyl";
+var card = "panneau-card-3yuJKc";
+var header = "panneau-header-8nkYnu";
+var title = "panneau-title-D4GR87";
+var values = "panneau-values-JmHWF4";
+var value = "panneau-value--4Hmov";
+var actions = "panneau-actions-gw5-oU";
+var pageSelection = "panneau-pageSelection-r1GtpS";
+var CardsLayout_module_default = {
+	cards,
+	card,
+	header,
+	title,
+	values,
+	value,
+	actions,
+	pageSelection
+};
+//#endregion
+export { actions, card, cards, CardsLayout_module_default as default, header, pageSelection, title, value, values };
+
+//# sourceMappingURL=CardsLayout.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardsLayout.module.js","names":[],"sources":["../../src/layouts/CardsLayout.module.css"],"sourcesContent":[".cards {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));\n    gap: var(--panneau-space-3);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.card {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-2);\n    padding: var(--panneau-space-3);\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.card[data-selected] {\n    background-color: var(--panneau-color-accent-subtle);\n    border-color: var(--panneau-color-border-control);\n}\n\n.header {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--panneau-space-2);\n}\n\n.title {\n    flex: 1;\n    min-width: 0;\n    margin: 0;\n    font-size: var(--panneau-font-size-lg);\n    font-weight: var(--panneau-font-weight-medium);\n    line-height: var(--panneau-line-height-tight);\n}\n\n.values {\n    display: grid;\n    gap: var(--panneau-space-1);\n    margin: 0;\n    font-size: var(--panneau-font-size-md);\n}\n\n.value {\n    display: grid;\n    grid-template-columns: minmax(5rem, 40%) 1fr;\n    gap: var(--panneau-space-2);\n}\n\n.value dt {\n    color: var(--panneau-color-text-muted);\n}\n\n.value dd {\n    margin: 0;\n    min-width: 0;\n}\n\n.actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-1);\n    margin-top: auto;\n    padding-top: var(--panneau-space-1);\n}\n\n.pageSelection {\n    margin-bottom: var(--panneau-space-2);\n}\n"],"mappings":""}

package/dist/layouts/ItemTitle.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+/**
+ * The title of an item, as a link to it when the list has one. Links go through React Aria, so an
+ * app's `RouterProvider` handles them with its router.
+ */
+export declare function ItemTitle({ href, children }: {
+    href: string | null;
+    children: ReactNode;
+}): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+//# sourceMappingURL=ItemTitle.d.ts.map

package/dist/layouts/ItemTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemTitle.d.ts","sourceRoot":"","sources":["../../src/layouts/ItemTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+TASzF"}

package/dist/layouts/ItemTitle.js

@@ -0,0 +1,30 @@
+import link_module_default from "./link.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Link } from "react-aria-components";
+//#region src/layouts/ItemTitle.tsx
+/**
+* The title of an item, as a link to it when the list has one. Links go through React Aria, so an
+* app's `RouterProvider` handles them with its router.
+*/
+function ItemTitle(t0) {
+	const $ = c(3);
+	const { href, children } = t0;
+	if (href === null) return children;
+	let t1;
+	if ($[0] !== children || $[1] !== href) {
+		t1 = /* @__PURE__ */ jsx(Link, {
+			className: link_module_default.link,
+			href,
+			children
+		});
+		$[0] = children;
+		$[1] = href;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+//#endregion
+export { ItemTitle };
+
+//# sourceMappingURL=ItemTitle.js.map

package/dist/layouts/ItemTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemTitle.js","names":["href","children","_c","styles"],"sources":["../../src/layouts/ItemTitle.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Link } from 'react-aria-components';\n\nimport styles from './link.module.css';\n\n/**\n * The title of an item, as a link to it when the list has one. Links go through React Aria, so an\n * app's `RouterProvider` handles them with its router.\n */\nexport function ItemTitle({ href, children }: { href: string | null; children: ReactNode }) {\n    if (href === null) {\n        return children;\n    }\n    return (\n        <Link className={styles.link} href={href}>\n            {children}\n        </Link>\n    );\n}\n"],"mappings":";;;;;;;;;AASA,SAAO,UAAA,IAAA;CAAA,MAAA,IAAAE,EAAA,CAAA;CAAmB,MAAA,EAAA,MAAA,aAAA;CACtB,IAAI,SAAS,MAAI,OACN;CACV,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,MAAA;EAEG,KAAA,oBAAC,MAAD;GAAiB,WAAAC,oBAAM;GAAa;GAC/B;EADA,CAAA;EAEE,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFP;AAEO"}

package/dist/layouts/TableLayout.css

@@ -0,0 +1,177 @@
+.panneau-scroller-dntHlH {
+    overflow-x: auto;
+    border: var(--panneau-border-width) solid var(--panneau-color-border);
+    border-radius: var(--panneau-radius-lg);
+    background-color: var(--panneau-color-surface);
+}
+
+.panneau-table-adJh-G {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--panneau-font-size-md);
+}
+
+.panneau-table-adJh-G th,
+.panneau-table-adJh-G td {
+    padding: var(--panneau-space-2) var(--panneau-space-3);
+    text-align: start;
+    vertical-align: middle;
+    border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);
+}
+
+.panneau-table-adJh-G th {
+    font-size: var(--panneau-font-size-sm);
+    font-weight: var(--panneau-font-weight-medium);
+    color: var(--panneau-color-text-muted);
+    white-space: nowrap;
+    background-color: var(--panneau-color-surface-sunken);
+}
+
+.panneau-table-adJh-G tbody tr:last-child td {
+    border-bottom: 0;
+}
+
+.panneau-table-adJh-G tbody tr[data-selected] {
+    background-color: var(--panneau-color-accent-subtle);
+}
+
+.panneau-center-Fx-12L {
+    text-align: center !important;
+}
+
+.panneau-end-Jr3hRc {
+    text-align: end !important;
+}
+
+.panneau-check-E5-IqZ {
+    width: 1px;
+}
+
+.panneau-actionsCell-dzoCuU {
+    width: 1px;
+    text-align: end !important;
+    white-space: nowrap;
+}
+
+.panneau-sort-t4x1tD {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--panneau-space-1);
+    margin: calc(-1 * var(--panneau-space-1)) calc(-1 * var(--panneau-space-2));
+    padding: var(--panneau-space-1) var(--panneau-space-2);
+    font: inherit;
+    color: inherit;
+    background: none;
+    border: 0;
+    border-radius: var(--panneau-radius-sm);
+    cursor: pointer;
+}
+
+.panneau-sort-t4x1tD:hover {
+    color: var(--panneau-color-text);
+    background-color: var(--panneau-color-hover);
+}
+
+.panneau-sort-t4x1tD:focus-visible {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: 1px;
+}
+
+.panneau-sortIcon-5pp-ve {
+    opacity: 0.5;
+}
+
+.panneau-sorted-a6Fwul .panneau-sortIcon-5pp-ve {
+    opacity: 1;
+}
+
+.panneau-cellLabel-tiliX5 {
+    display: none;
+}
+
+.panneau-visuallyHidden--8qvnp {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+}
+
+/* Narrow lists (phones): each row is a block, with the label of each value next to it. */
+@container panneau-list (max-width: 40rem) {
+    .panneau-scroller-dntHlH {
+        overflow: visible;
+        background: none;
+        border: 0;
+    }
+
+    /* The labels of the cells replace the headers, and the list's sort select their buttons. */
+    .panneau-table-adJh-G thead {
+        display: none;
+    }
+
+    .panneau-table-adJh-G,
+    .panneau-table-adJh-G tbody,
+    .panneau-table-adJh-G tr,
+    .panneau-table-adJh-G td {
+        display: block;
+    }
+
+    .panneau-table-adJh-G tbody {
+        display: grid;
+        gap: var(--panneau-space-2);
+    }
+
+    .panneau-table-adJh-G tr {
+        position: relative;
+        padding: var(--panneau-space-2) 0;
+        background-color: var(--panneau-color-surface);
+        border: var(--panneau-border-width) solid var(--panneau-color-border);
+        border-radius: var(--panneau-radius-lg);
+    }
+
+    .panneau-table-adJh-G td {
+        display: grid;
+        grid-template-columns: minmax(5rem, 35%) 1fr;
+        gap: var(--panneau-space-2);
+        padding: var(--panneau-space-1) var(--panneau-space-3);
+        text-align: start !important;
+        border: 0;
+    }
+
+    .panneau-table-adJh-G td.panneau-check-E5-IqZ,
+    .panneau-table-adJh-G td.panneau-actionsCell-dzoCuU {
+        display: flex;
+        width: auto;
+    }
+
+    .panneau-table-adJh-G td.panneau-check-E5-IqZ {
+        position: absolute;
+        top: var(--panneau-space-2);
+        inset-inline-end: var(--panneau-space-2);
+        padding: 0;
+    }
+
+    .panneau-table-adJh-G td.panneau-actionsCell-dzoCuU {
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        padding-top: var(--panneau-space-2);
+    }
+
+    .panneau-table-adJh-G td.panneau-title-KEAnyJ {
+        display: block;
+        padding-inline-end: var(--panneau-space-10);
+        font-weight: var(--panneau-font-weight-medium);
+    }
+
+    .panneau-table-adJh-G td.panneau-title-KEAnyJ .panneau-cellLabel-tiliX5 {
+        display: none;
+    }
+
+    .panneau-cellLabel-tiliX5 {
+        display: block;
+        font-size: var(--panneau-font-size-sm);
+        color: var(--panneau-color-text-muted);
+    }
+}

package/dist/layouts/TableLayout.d.ts

@@ -0,0 +1,9 @@
+import type { ListColumn, ListLayoutProps } from '../types';
+/** The sort direction of a column, from the first `sort` value. */
+export declare function getSortDirection(sort: readonly string[], column: ListColumn): 'ascending' | 'descending' | null;
+/**
+ * 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.
+ */
+export declare function TableLayout({ items, columns, renderValue, getItemLabel, getItemHref, selectable, isSelected, onToggle, renderActions, sort, onSort, label, pageSelection, }: ListLayoutProps): import("react").JSX.Element;
+//# sourceMappingURL=TableLayout.d.ts.map

package/dist/layouts/TableLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/TableLayout.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAI5D,mEAAmE;AACnE,wBAAgB,gBAAgB,CAC5B,IAAI,EAAE,SAAS,MAAM,EAAE,EACvB,MAAM,EAAE,UAAU,GACnB,WAAW,GAAG,YAAY,GAAG,IAAI,CAMnC;AASD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,OAAO,EACP,WAAW,EACX,YAAY,EACZ,WAAW,EACX,UAAU,EACV,UAAU,EACV,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,MAAM,EACN,KAAK,EACL,aAAa,GAChB,EAAE,eAAe,+BAiHjB"}

package/dist/layouts/TableLayout.js

@@ -0,0 +1,208 @@
+import { messages } from "../messages.js";
+import { ItemTitle } from "./ItemTitle.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";
+//#region src/layouts/TableLayout.tsx
+/** The sort direction of a column, from the first `sort` value. */
+function getSortDirection(sort, column) {
+	const first = sort[0];
+	if (first === column.id) return "ascending";
+	return first === `-${column.id}` ? "descending" : null;
+}
+function alignClass(column) {
+	if (column.align === "center") return TableLayout_module_default.center;
+	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.
+*/
+function TableLayout(t0) {
+	const $ = c(52);
+	const { items, columns, renderValue, getItemLabel, getItemHref, selectable, isSelected, onToggle, renderActions, sort, onSort, label, pageSelection } = t0;
+	const intl = usePanneauIntl();
+	let actions;
+	let t1;
+	if ($[0] !== items || $[1] !== renderActions) {
+		let t2;
+		if ($[4] !== renderActions) {
+			t2 = (item) => renderActions(item);
+			$[4] = renderActions;
+			$[5] = t2;
+		} else t2 = $[5];
+		actions = items.map(t2);
+		t1 = actions.some(_temp);
+		$[0] = items;
+		$[1] = renderActions;
+		$[2] = actions;
+		$[3] = t1;
+	} else {
+		actions = $[2];
+		t1 = $[3];
+	}
+	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;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== columns || $[10] !== onSort || $[11] !== sort) {
+		let t4;
+		if ($[13] !== onSort || $[14] !== sort) {
+			t4 = (column) => {
+				const direction = getSortDirection(sort, column);
+				return /* @__PURE__ */ jsx("th", {
+					scope: "col",
+					className: alignClass(column),
+					style: column.width !== void 0 ? { width: column.width } : void 0,
+					"aria-sort": column.sortable === true ? direction ?? "none" : void 0,
+					children: column.sortable === true ? /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: cx(TableLayout_module_default.sort, direction !== null && TableLayout_module_default.sorted),
+						onClick: () => onSort(column),
+						children: [column.label ?? column.id, /* @__PURE__ */ jsx("span", {
+							className: TableLayout_module_default.sortIcon,
+							children: /* @__PURE__ */ jsx(Icon, {
+								icon: direction === "ascending" ? ArrowUp : direction === "descending" ? ArrowDown : ArrowUpDown,
+								size: "sm"
+							})
+						})]
+					}) : 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", {
+			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,
+			t3,
+			t4
+		] }) });
+		$[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] !== isSelected || $[30] !== items || $[31] !== onToggle || $[32] !== renderValue || $[33] !== selectable) {
+		let t7;
+		if ($[35] !== actions || $[36] !== columns || $[37] !== getItemHref || $[38] !== getItemLabel || $[39] !== hasActions || $[40] !== intl || $[41] !== isSelected || $[42] !== onToggle || $[43] !== renderValue || $[44] !== selectable) {
+			t7 = (item_0, row) => {
+				const selected = selectable && isSelected(item_0);
+				const href = getItemHref?.(item_0) ?? null;
+				return /* @__PURE__ */ jsxs("tr", {
+					"data-selected": selected || void 0,
+					children: [
+						selectable ? /* @__PURE__ */ jsx("td", {
+							className: TableLayout_module_default.check,
+							children: /* @__PURE__ */ jsx(Checkbox, {
+								"aria-label": intl.formatMessage(messages.selectItem, { item: getItemLabel(item_0) }),
+								isSelected: selected,
+								onChange: () => onToggle(item_0)
+							})
+						}) : null,
+						columns.map((column_0, index) => /* @__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: index === 0 ? /* @__PURE__ */ jsx(ItemTitle, {
+								href,
+								children: renderValue(item_0, column_0)
+							}) : renderValue(item_0, column_0) })]
+						}, column_0.id)),
+						hasActions ? /* @__PURE__ */ jsx("td", {
+							className: TableLayout_module_default.actionsCell,
+							children: actions[row]
+						}) : null
+					]
+				}, item_0.id);
+			};
+			$[35] = actions;
+			$[36] = columns;
+			$[37] = getItemHref;
+			$[38] = getItemLabel;
+			$[39] = hasActions;
+			$[40] = intl;
+			$[41] = isSelected;
+			$[42] = onToggle;
+			$[43] = renderValue;
+			$[44] = selectable;
+			$[45] = t7;
+		} else t7 = $[45];
+		t6 = items.map(t7);
+		$[23] = actions;
+		$[24] = columns;
+		$[25] = getItemHref;
+		$[26] = getItemLabel;
+		$[27] = hasActions;
+		$[28] = intl;
+		$[29] = isSelected;
+		$[30] = items;
+		$[31] = onToggle;
+		$[32] = renderValue;
+		$[33] = selectable;
+		$[34] = t6;
+	} else t6 = $[34];
+	let t7;
+	if ($[46] !== t6) {
+		t7 = /* @__PURE__ */ jsx("tbody", { children: t6 });
+		$[46] = t6;
+		$[47] = t7;
+	} else t7 = $[47];
+	let t8;
+	if ($[48] !== label || $[49] !== t5 || $[50] !== t7) {
+		t8 = /* @__PURE__ */ jsx("div", {
+			className: TableLayout_module_default.scroller,
+			children: /* @__PURE__ */ jsxs("table", {
+				className: TableLayout_module_default.table,
+				"aria-label": label,
+				children: [t5, t7]
+			})
+		});
+		$[48] = label;
+		$[49] = t5;
+		$[50] = t7;
+		$[51] = t8;
+	} else t8 = $[51];
+	return t8;
+}
+function _temp(node) {
+	return node !== null;
+}
+//#endregion
+export { TableLayout, getSortDirection };
+
+//# sourceMappingURL=TableLayout.js.map