@panneau/lists 5.0.0-alpha.3 → 5.0.0-alpha.5

package/dist/layouts/TableLayout.js

@@ -22,8 +22,8 @@ function alignClass(column) {
 * 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 $ = c(54);
+	const { items, columns, renderValue, getItemLabel, getItemHref, isCurrent, selectable, isSelected, onToggle, renderActions, sort, onSort, label, pageSelection } = t0;
 	const intl = usePanneauIntl();
 	let actions;
 	let t1;
@@ -116,14 +116,16 @@ function TableLayout(t0) {
 		$[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) {
+	if ($[23] !== actions || $[24] !== columns || $[25] !== getItemHref || $[26] !== getItemLabel || $[27] !== hasActions || $[28] !== intl || $[29] !== isCurrent || $[30] !== isSelected || $[31] !== items || $[32] !== onToggle || $[33] !== renderValue || $[34] !== selectable) {
 		let t7;
-		if ($[35] !== actions || $[36] !== columns || $[37] !== getItemHref || $[38] !== getItemLabel || $[39] !== hasActions || $[40] !== intl || $[41] !== isSelected || $[42] !== onToggle || $[43] !== renderValue || $[44] !== selectable) {
+		if ($[36] !== actions || $[37] !== columns || $[38] !== getItemHref || $[39] !== getItemLabel || $[40] !== hasActions || $[41] !== intl || $[42] !== isCurrent || $[43] !== isSelected || $[44] !== onToggle || $[45] !== renderValue || $[46] !== selectable) {
 			t7 = (item_0, row) => {
 				const selected = selectable && isSelected(item_0);
 				const href = getItemHref?.(item_0) ?? null;
+				const current = isCurrent?.(item_0) ?? false;
 				return /* @__PURE__ */ jsxs("tr", {
 					"data-selected": selected || void 0,
+					"data-current": current || void 0,
 					children: [
 						selectable ? /* @__PURE__ */ jsx("td", {
 							className: TableLayout_module_default.check,
@@ -140,6 +142,7 @@ function TableLayout(t0) {
 								children: column_0.label ?? column_0.id
 							}), /* @__PURE__ */ jsx("span", { children: index === 0 ? /* @__PURE__ */ jsx(ItemTitle, {
 								href,
+								current,
 								children: renderValue(item_0, column_0)
 							}) : renderValue(item_0, column_0) })]
 						}, column_0.id)),
@@ -150,18 +153,19 @@ function TableLayout(t0) {
 					]
 				}, 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];
+			$[36] = actions;
+			$[37] = columns;
+			$[38] = getItemHref;
+			$[39] = getItemLabel;
+			$[40] = hasActions;
+			$[41] = intl;
+			$[42] = isCurrent;
+			$[43] = isSelected;
+			$[44] = onToggle;
+			$[45] = renderValue;
+			$[46] = selectable;
+			$[47] = t7;
+		} else t7 = $[47];
 		t6 = items.map(t7);
 		$[23] = actions;
 		$[24] = columns;
@@ -169,21 +173,22 @@ function TableLayout(t0) {
 		$[26] = getItemLabel;
 		$[27] = hasActions;
 		$[28] = intl;
-		$[29] = isSelected;
-		$[30] = items;
-		$[31] = onToggle;
-		$[32] = renderValue;
-		$[33] = selectable;
-		$[34] = t6;
-	} else t6 = $[34];
+		$[29] = isCurrent;
+		$[30] = isSelected;
+		$[31] = items;
+		$[32] = onToggle;
+		$[33] = renderValue;
+		$[34] = selectable;
+		$[35] = t6;
+	} else t6 = $[35];
 	let t7;
-	if ($[46] !== t6) {
+	if ($[48] !== t6) {
 		t7 = /* @__PURE__ */ jsx("tbody", { children: t6 });
-		$[46] = t6;
-		$[47] = t7;
-	} else t7 = $[47];
+		$[48] = t6;
+		$[49] = t7;
+	} else t7 = $[49];
 	let t8;
-	if ($[48] !== label || $[49] !== t5 || $[50] !== t7) {
+	if ($[50] !== label || $[51] !== t5 || $[52] !== t7) {
 		t8 = /* @__PURE__ */ jsx("div", {
 			className: TableLayout_module_default.scroller,
 			children: /* @__PURE__ */ jsxs("table", {
@@ -192,11 +197,11 @@ function TableLayout(t0) {
 				children: [t5, t7]
 			})
 		});
-		$[48] = label;
-		$[49] = t5;
-		$[50] = t7;
-		$[51] = t8;
-	} else t8 = $[51];
+		$[50] = label;
+		$[51] = t5;
+		$[52] = t7;
+		$[53] = t8;
+	} else t8 = $[53];
 	return t8;
 }
 function _temp(node) {

package/dist/layouts/TableLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableLayout.js","names":["pageSelection","item","selected","column","href","label","styles","_c"],"sources":["../../src/layouts/TableLayout.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react';\n\nimport { Checkbox, Icon, usePanneauIntl } from '@panneau/ui';\n\nimport { cx } from '../cx';\nimport { messages } from '../messages';\nimport type { ListColumn, ListLayoutProps } from '../types';\nimport { ItemTitle } from './ItemTitle';\nimport styles from './TableLayout.module.css';\n\n/** The sort direction of a column, from the first `sort` value. */\nexport function getSortDirection(\n    sort: readonly string[],\n    column: ListColumn,\n): 'ascending' | 'descending' | null {\n    const first = sort[0];\n    if (first === column.id) {\n        return 'ascending';\n    }\n    return first === `-${column.id}` ? 'descending' : null;\n}\n\nfunction alignClass(column: ListColumn): string | undefined {\n    if (column.align === 'center') {\n        return styles.center;\n    }\n    return column.align === 'end' ? styles.end : undefined;\n}\n\n/**\n * Items as a table, with sortable column headers. On narrow lists (phones), each row turns into a\n * block that shows the label of each value.\n */\nexport function TableLayout({\n    items,\n    columns,\n    renderValue,\n    getItemLabel,\n    getItemHref,\n    selectable,\n    isSelected,\n    onToggle,\n    renderActions,\n    sort,\n    onSort,\n    label,\n    pageSelection,\n}: ListLayoutProps) {\n    const intl = usePanneauIntl();\n    const actions = items.map((item) => renderActions(item));\n    const hasActions = actions.some((node) => node !== null);\n    return (\n        <div className={styles.scroller}>\n            <table className={styles.table} aria-label={label}>\n                <thead>\n                    <tr>\n                        {selectable ? <th className={styles.check}>{pageSelection}</th> : null}\n                        {columns.map((column) => {\n                            const direction = getSortDirection(sort, column);\n                            return (\n                                <th\n                                    key={column.id}\n                                    scope=\"col\"\n                                    className={alignClass(column)}\n                                    style={\n                                        column.width !== undefined\n                                            ? { width: column.width }\n                                            : undefined\n                                    }\n                                    aria-sort={\n                                        column.sortable === true ? (direction ?? 'none') : undefined\n                                    }\n                                >\n                                    {column.sortable === true ? (\n                                        <button\n                                            type=\"button\"\n                                            className={cx(\n                                                styles.sort,\n                                                direction !== null && styles.sorted,\n                                            )}\n                                            onClick={() => onSort(column)}\n                                        >\n                                            {column.label ?? column.id}\n                                            <span className={styles.sortIcon}>\n                                                <Icon\n                                                    icon={\n                                                        direction === 'ascending'\n                                                            ? ArrowUp\n                                                            : direction === 'descending'\n                                                              ? ArrowDown\n                                                              : ArrowUpDown\n                                                    }\n                                                    size=\"sm\"\n                                                />\n                                            </span>\n                                        </button>\n                                    ) : (\n                                        (column.label ?? column.id)\n                                    )}\n                                </th>\n                            );\n                        })}\n                        {hasActions ? (\n                            <th className={styles.actionsCell}>\n                                <span className={styles.visuallyHidden}>\n                                    {intl.formatMessage(messages.actions)}\n                                </span>\n                            </th>\n                        ) : null}\n                    </tr>\n                </thead>\n                <tbody>\n                    {items.map((item, row) => {\n                        const selected = selectable && isSelected(item);\n                        const href = getItemHref?.(item) ?? null;\n                        return (\n                            <tr key={item.id} data-selected={selected || undefined}>\n                                {selectable ? (\n                                    <td className={styles.check}>\n                                        <Checkbox\n                                            aria-label={intl.formatMessage(messages.selectItem, {\n                                                item: getItemLabel(item),\n                                            })}\n                                            isSelected={selected}\n                                            onChange={() => onToggle(item)}\n                                        />\n                                    </td>\n                                ) : null}\n                                {columns.map((column, index) => (\n                                    <td\n                                        key={column.id}\n                                        className={cx(\n                                            alignClass(column),\n                                            index === 0 && styles.title,\n                                        )}\n                                    >\n                                        <span className={styles.cellLabel}>\n                                            {column.label ?? column.id}\n                                        </span>\n                                        <span>\n                                            {index === 0 ? (\n                                                <ItemTitle href={href}>\n                                                    {renderValue(item, column)}\n                                                </ItemTitle>\n                                            ) : (\n                                                renderValue(item, column)\n                                            )}\n                                        </span>\n                                    </td>\n                                ))}\n                                {hasActions ? (\n                                    <td className={styles.actionsCell}>{actions[row]}</td>\n                                ) : null}\n                            </tr>\n                        );\n                    })}\n                </tbody>\n            </table>\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"TableLayout.js","names":["pageSelection","item","selected","column","href","current","label","styles","_c"],"sources":["../../src/layouts/TableLayout.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react';\n\nimport { Checkbox, Icon, usePanneauIntl } from '@panneau/ui';\n\nimport { cx } from '../cx';\nimport { messages } from '../messages';\nimport type { ListColumn, ListLayoutProps } from '../types';\nimport { ItemTitle } from './ItemTitle';\nimport styles from './TableLayout.module.css';\n\n/** The sort direction of a column, from the first `sort` value. */\nexport function getSortDirection(\n    sort: readonly string[],\n    column: ListColumn,\n): 'ascending' | 'descending' | null {\n    const first = sort[0];\n    if (first === column.id) {\n        return 'ascending';\n    }\n    return first === `-${column.id}` ? 'descending' : null;\n}\n\nfunction alignClass(column: ListColumn): string | undefined {\n    if (column.align === 'center') {\n        return styles.center;\n    }\n    return column.align === 'end' ? styles.end : undefined;\n}\n\n/**\n * Items as a table, with sortable column headers. On narrow lists (phones), each row turns into a\n * block that shows the label of each value.\n */\nexport function TableLayout({\n    items,\n    columns,\n    renderValue,\n    getItemLabel,\n    getItemHref,\n    isCurrent,\n    selectable,\n    isSelected,\n    onToggle,\n    renderActions,\n    sort,\n    onSort,\n    label,\n    pageSelection,\n}: ListLayoutProps) {\n    const intl = usePanneauIntl();\n    const actions = items.map((item) => renderActions(item));\n    const hasActions = actions.some((node) => node !== null);\n    return (\n        <div className={styles.scroller}>\n            <table className={styles.table} aria-label={label}>\n                <thead>\n                    <tr>\n                        {selectable ? <th className={styles.check}>{pageSelection}</th> : null}\n                        {columns.map((column) => {\n                            const direction = getSortDirection(sort, column);\n                            return (\n                                <th\n                                    key={column.id}\n                                    scope=\"col\"\n                                    className={alignClass(column)}\n                                    style={\n                                        column.width !== undefined\n                                            ? { width: column.width }\n                                            : undefined\n                                    }\n                                    aria-sort={\n                                        column.sortable === true ? (direction ?? 'none') : undefined\n                                    }\n                                >\n                                    {column.sortable === true ? (\n                                        <button\n                                            type=\"button\"\n                                            className={cx(\n                                                styles.sort,\n                                                direction !== null && styles.sorted,\n                                            )}\n                                            onClick={() => onSort(column)}\n                                        >\n                                            {column.label ?? column.id}\n                                            <span className={styles.sortIcon}>\n                                                <Icon\n                                                    icon={\n                                                        direction === 'ascending'\n                                                            ? ArrowUp\n                                                            : direction === 'descending'\n                                                              ? ArrowDown\n                                                              : ArrowUpDown\n                                                    }\n                                                    size=\"sm\"\n                                                />\n                                            </span>\n                                        </button>\n                                    ) : (\n                                        (column.label ?? column.id)\n                                    )}\n                                </th>\n                            );\n                        })}\n                        {hasActions ? (\n                            <th className={styles.actionsCell}>\n                                <span className={styles.visuallyHidden}>\n                                    {intl.formatMessage(messages.actions)}\n                                </span>\n                            </th>\n                        ) : null}\n                    </tr>\n                </thead>\n                <tbody>\n                    {items.map((item, row) => {\n                        const selected = selectable && isSelected(item);\n                        const href = getItemHref?.(item) ?? null;\n                        const current = isCurrent?.(item) ?? false;\n                        return (\n                            <tr\n                                key={item.id}\n                                data-selected={selected || undefined}\n                                data-current={current || undefined}\n                            >\n                                {selectable ? (\n                                    <td className={styles.check}>\n                                        <Checkbox\n                                            aria-label={intl.formatMessage(messages.selectItem, {\n                                                item: getItemLabel(item),\n                                            })}\n                                            isSelected={selected}\n                                            onChange={() => onToggle(item)}\n                                        />\n                                    </td>\n                                ) : null}\n                                {columns.map((column, index) => (\n                                    <td\n                                        key={column.id}\n                                        className={cx(\n                                            alignClass(column),\n                                            index === 0 && styles.title,\n                                        )}\n                                    >\n                                        <span className={styles.cellLabel}>\n                                            {column.label ?? column.id}\n                                        </span>\n                                        <span>\n                                            {index === 0 ? (\n                                                <ItemTitle href={href} current={current}>\n                                                    {renderValue(item, column)}\n                                                </ItemTitle>\n                                            ) : (\n                                                renderValue(item, column)\n                                            )}\n                                        </span>\n                                    </td>\n                                ))}\n                                {hasActions ? (\n                                    <td className={styles.actionsCell}>{actions[row]}</td>\n                                ) : null}\n                            </tr>\n                        );\n                    })}\n                </tbody>\n            </table>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/layouts/TableLayout.module.js

@@ -2,6 +2,7 @@ import "./TableLayout.css";
 //#region src/layouts/TableLayout.module.css
 var scroller = "panneau-table-layout-scroller";
 var table = "panneau-table-layout-table";
+var title = "panneau-table-layout-title";
 var center = "panneau-table-layout-center";
 var end = "panneau-table-layout-end";
 var check = "panneau-table-layout-check";
@@ -11,10 +12,10 @@ var sortIcon = "panneau-table-layout-sort-icon";
 var sorted = "panneau-table-layout-sorted";
 var cellLabel = "panneau-table-layout-cell-label";
 var visuallyHidden = "panneau-table-layout-visually-hidden";
-var title = "panneau-table-layout-title";
 var TableLayout_module_default = {
 	scroller,
 	table,
+	title,
 	center,
 	end,
 	check,
@@ -23,8 +24,7 @@ var TableLayout_module_default = {
 	sortIcon,
 	sorted,
 	cellLabel,
-	visuallyHidden,
-	title
+	visuallyHidden
 };
 //#endregion
 export { actionsCell, cellLabel, center, check, TableLayout_module_default as default, end, scroller, sort, sortIcon, sorted, table, title, visuallyHidden };

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

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

package/dist/types.d.ts

@@ -97,6 +97,8 @@ export interface ListLayoutProps {
     getItemLabel: (item: ListItem) => string;
     /** A link to the item, when the list has one. */
     getItemHref?: ((item: ListItem) => string | null) | undefined;
+    /** Whether the item is the one shown next to the list, such as in a panel of its details. */
+    isCurrent?: ((item: ListItem) => boolean) | undefined;
     /** Whether items have checkboxes. */
     selectable: boolean;
     isSelected: (item: ListItem) => boolean;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/dist/useRenderValue.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import type { DisplayEntry, ListColumn, ListItem } from './types';
+/**
+ * Renders the value of a column for an item with its display: those given, over those of the
+ * plugins, over the built-in ones. Columns without a known display show their value as text.
+ */
+export declare function useRenderValue(displays?: Readonly<Record<string, DisplayEntry>>): (item: ListItem, column: ListColumn) => ReactNode;
+//# sourceMappingURL=useRenderValue.d.ts.map

package/dist/useRenderValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRenderValue.d.ts","sourceRoot":"","sources":["../src/useRenderValue.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGlE;;;GAGG;AACH,wBAAgB,cAAc,CAC1B,QAAQ,GAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAM,GACtD,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,KAAK,SAAS,CA4BnD"}

package/dist/useRenderValue.js

@@ -0,0 +1,64 @@
+import { getColumnValue } from "./values.js";
+import { builtInDisplays } from "./displays/displays.js";
+import { usePlugins } from "@panneau/core";
+import { usePanneauIntl } from "@panneau/ui";
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+//#region src/useRenderValue.tsx
+/**
+* Renders the value of a column for an item with its display: those given, over those of the
+* plugins, over the built-in ones. Columns without a known display show their value as text.
+*/
+function useRenderValue(t0) {
+	const $ = c(10);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const displays = t1;
+	const intl = usePanneauIntl();
+	const plugins = usePlugins();
+	let t2;
+	if ($[2] !== plugins.displays) {
+		t2 = Object.fromEntries(plugins.displays);
+		$[2] = plugins.displays;
+		$[3] = t2;
+	} else t2 = $[3];
+	const t3 = t2;
+	let t4;
+	if ($[4] !== displays || $[5] !== t3) {
+		t4 = {
+			...builtInDisplays,
+			...t3,
+			...displays
+		};
+		$[4] = displays;
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	const allDisplays = t4;
+	let t5;
+	if ($[7] !== allDisplays || $[8] !== intl) {
+		t5 = (item, column) => {
+			if (column.render !== void 0) return column.render(item);
+			const Display = (column.display !== void 0 && column.display !== null ? allDisplays[column.display] : void 0) ?? builtInDisplays.text;
+			if (Display === void 0) return null;
+			return /* @__PURE__ */ jsx(Display, {
+				value: getColumnValue(item, column, intl.locale),
+				item,
+				column,
+				field: column.field ?? null
+			});
+		};
+		$[7] = allDisplays;
+		$[8] = intl;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
+}
+//#endregion
+export { useRenderValue };
+
+//# sourceMappingURL=useRenderValue.js.map

package/dist/useRenderValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRenderValue.js","names":["item","column","_c"],"sources":["../src/useRenderValue.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { usePlugins } from '@panneau/core';\nimport { usePanneauIntl } from '@panneau/ui';\n\nimport { builtInDisplays } from './displays/displays';\nimport type { DisplayEntry, ListColumn, ListItem } from './types';\nimport { getColumnValue } from './values';\n\n/**\n * Renders the value of a column for an item with its display: those given, over those of the\n * plugins, over the built-in ones. Columns without a known display show their value as text.\n */\nexport function useRenderValue(\n    displays: Readonly<Record<string, DisplayEntry>> = {},\n): (item: ListItem, column: ListColumn) => ReactNode {\n    const intl = usePanneauIntl();\n    const plugins = usePlugins();\n    const allDisplays: Record<string, DisplayEntry> = {\n        ...builtInDisplays,\n        ...(Object.fromEntries(plugins.displays) as Record<string, DisplayEntry>),\n        ...displays,\n    };\n    return (item, column) => {\n        if (column.render !== undefined) {\n            return column.render(item);\n        }\n        const Display =\n            (column.display !== undefined && column.display !== null\n                ? allDisplays[column.display]\n                : undefined) ?? builtInDisplays.text;\n        if (Display === undefined) {\n            return null;\n        }\n        return (\n            <Display\n                value={getColumnValue(item, column, intl.locale)}\n                item={item}\n                column={column}\n                field={column.field ?? null}\n            />\n        );\n    };\n}\n"],"mappings":";;;;;;;;;;;AAaA,SAAO,eAAA,IAAA;CAAA,MAAA,IAAAE,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EACH,KAAA,OAAA,KAAA,IAAA,CAAoD,IAApD;EAAqD,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAArD,MAAA,WAAA;CAEA,MAAA,OAAa,eAAe;CAC5B,MAAA,UAAgB,WAAW;CAAE,IAAA;CAAA,IAAA,EAAA,OAAA,QAAA,UAAA;EAGrB,KAAA,OAAM,YAAa,QAAO,QAAS;EAAC,EAAA,KAAA,QAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAApC,MAAA,KAAA;CAAoE,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,IAAA;EAF1B,KAAA;GAAA,GAC3C;GAAe,GACd;GAAoE,GACrE;EACP;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAJD,MAAA,cAAkD;CAIhD,IAAA;CAAA,IAAA,EAAA,OAAA,eAAA,EAAA,OAAA,MAAA;EACK,MAAA,MAAA,WAAA;GACH,IAAI,OAAM,WAAY,KAAA,GAAS,OACpB,OAAM,OAAQ,IAAI;GAE7B,MAAA,WACK,OAAM,YAAa,KAAA,KAAa,OAAM,YAAa,OAC9C,YAAY,OAAM,WADvB,KAAA,MAEmB,gBAAe;GACvC,IAAI,YAAY,KAAA,GAAS,OACd;GACV,OAEG,oBAAC,SAAD;IACW,OAAA,eAAe,MAAM,QAAQ,KAAI,MAAO;IACzC;IACE;IACD,OAAA,OAAM,SAAN;GAAoB,CAAA;EAC7B;EAET,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAnBM;AAmBN"}

package/package.json

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