@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/table/column-manager.js

@@ -0,0 +1,338 @@
+import { useDirection, usePanel, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../lib/icons.js";
+import { Button } from "../ui/button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
+import { Checkbox } from "../ui/checkbox.js";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog.js";
+import { showToast } from "../notifications/flash-toasts.js";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "../ui/sheet.js";
+import { TableTriggerButton } from "./trigger-button.js";
+import { FILTERS_MODAL_WIDTH_CLASSES, columnDraftChanged, columnManagerPosition, columnOrderChanged, defaultVisibleColumns, gridColumnsClasses, keepMoveButtonFocus, moveColumnInManager, moveColumnTo, orderColumnsBy, saveColumnOrder, slideOverSide, toggleVisibleColumn, triggerButtonView, visitTable } from "@alfakit/core";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronUpIcon, Columns3Icon, GripVerticalIcon } from "lucide-react";
+//#region src/components/table/column-manager.tsx
+/**
+* The column manager: show / hide toggleable columns (kept in the query string) and,
+* with `reorderableColumns()`, move columns (stored per user on the server) by dragging a
+* row onto another or with the move up / down buttons (the keyboard path).
+*
+* `deferColumnManager()` keeps toggles in a draft until "Apply"; `columnManagerLayout()`
+* opens it in a dialog; `columnManagerColumns()` lays the list out in a grid.
+*/
+function ColumnManager({ table, token, component }) {
+	const t = useT();
+	const panel = usePanel();
+	const direction = useDirection();
+	const [open, setOpen] = useState(false);
+	const [saving, setSaving] = useState(false);
+	const [dragging, setDragging] = useState(null);
+	const [dropTarget, setDropTarget] = useState(null);
+	const [draft, setDraft] = useState(null);
+	const [orderState, setOrderState] = useState(null);
+	const [announcement, setAnnouncement] = useState("");
+	const idBase = useId();
+	const reorderable = Boolean(table.reorderableColumns && panel.endpoints.tableColumns);
+	const toggleable = Boolean(table.toggleableColumns);
+	const deferred = Boolean(table.deferColumnManager);
+	const orderDraft = orderState && (deferred || orderState.columns === table.columns) ? orderState.order : null;
+	const setOrderDraft = (order) => setOrderState(order ? {
+		order,
+		columns: table.columns
+	} : null);
+	const appliedNames = table.columns.map((column) => column.name);
+	const names = orderDraft ?? appliedNames;
+	const columns = orderColumnsBy(reorderable ? table.columns : table.columns.filter((column) => column.toggleable), orderDraft);
+	const visible = draft ?? table.visibleColumns;
+	if (!toggleable && !reorderable) return null;
+	const trigger = triggerButtonView(table, "columnManager", {
+		label: t("table.columns", {}, "Columns"),
+		showLabel: false
+	});
+	if (!trigger) return null;
+	const toggle = (name) => {
+		const next = toggleVisibleColumn(visible, name);
+		if (deferred) setDraft(next);
+		else visitTable(table.identifier, { columns: next }, ["page"]);
+	};
+	const save = async (order) => {
+		if (!panel.endpoints.tableColumns) return false;
+		setSaving(true);
+		try {
+			await saveColumnOrder(panel.endpoints.tableColumns, token, component, order);
+			return true;
+		} catch (error) {
+			showToast({
+				id: "alfakit-column-order-failed",
+				title: t("table.column_order_failed", {}, "Couldn't save the column order"),
+				body: error instanceof Error ? error.message : String(error),
+				status: "danger",
+				format: "alfakit"
+			});
+			return false;
+		} finally {
+			setSaving(false);
+		}
+	};
+	const announce = (name, order) => {
+		const { position, count, group } = columnManagerPosition(order, name, table.columnGroups);
+		const label = table.columns.find((column) => column.name === name)?.label ?? name;
+		const replace = {
+			column: label,
+			position,
+			count,
+			group: group ?? ""
+		};
+		setAnnouncement(group ? deferred ? t("table.column_manager.reordered_in_group_deferred", replace, `${label} moved to position ${position} of ${count} in ${group}. Apply columns to save your changes.`) : t("table.column_manager.reordered_in_group", replace, `${label} moved to position ${position} of ${count} in ${group}.`) : deferred ? t("table.column_manager.reordered_deferred", replace, `${label} moved to position ${position} of ${count}. Apply columns to save your changes.`) : t("table.column_manager.reordered", replace, `${label} moved to position ${position} of ${count}.`));
+	};
+	const reorder = (name, order) => {
+		if (saving || !columnOrderChanged(names, order)) return;
+		setOrderDraft(order);
+		setAnnouncement("");
+		if (deferred) {
+			announce(name, order);
+			return;
+		}
+		save(order).then((saved) => saved ? announce(name, order) : setOrderDraft(null));
+	};
+	const move = (name, offset, button) => {
+		keepMoveButtonFocus(button);
+		reorder(name, moveColumnInManager(names, name, offset, table.columnGroups));
+	};
+	const orderChanged = Boolean(orderDraft && columnOrderChanged(appliedNames, orderDraft));
+	const apply = () => {
+		if (orderDraft && orderChanged) save(orderDraft);
+		if (draft && columnDraftChanged(table.visibleColumns, draft)) visitTable(table.identifier, { columns: draft }, ["page"]);
+		setDraft(null);
+		setOrderDraft(null);
+		setAnnouncement("");
+		setOpen(false);
+	};
+	const reset = () => {
+		if (reorderable) {
+			setOrderDraft(null);
+			save([]);
+		}
+		if (toggleable) {
+			setDraft(null);
+			visitTable(table.identifier, { columns: defaultVisibleColumns(table) }, ["page"]);
+		}
+	};
+	const resetView = triggerButtonView(table, "columnManagerReset", {
+		label: toggleable ? t("table.reset_columns", {}, "Reset") : t("table.reset_column_order", {}, "Reset column order"),
+		variant: "ghost"
+	});
+	const applyView = deferred ? triggerButtonView(table, "columnManagerApply", {
+		label: t("table_filters.apply", {}, "Apply"),
+		variant: "default"
+	}) : null;
+	const resetButton = resetView ? /* @__PURE__ */ jsx(TableTriggerButton, {
+		view: resetView,
+		disabled: saving,
+		"data-slot": "column-manager-reset",
+		className: cn(!applyView && "w-full"),
+		onClick: reset
+	}) : null;
+	const inHeader = table.columnManagerResetActionPosition === "header";
+	const list = /* @__PURE__ */ jsx("ul", {
+		className: cn(table.columnManagerColumns ? ["grid gap-0.5", gridColumnsClasses(table.columnManagerColumns)] : "flex flex-col gap-0.5"),
+		"aria-label": t("table.columns", {}, "Columns"),
+		children: columns.map((column) => {
+			const { position, count, group } = columnManagerPosition(names, column.name, table.columnGroups);
+			const positionId = `${idBase}-${column.name}-position`;
+			return /* @__PURE__ */ jsxs("li", {
+				"data-column": column.name,
+				draggable: reorderable && !saving,
+				onDragStart: (event) => {
+					if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+					setDragging(column.name);
+				},
+				onDragOver: (event) => {
+					if (dragging === null) return;
+					event.preventDefault();
+					if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+					setDropTarget(column.name);
+				},
+				onDragLeave: () => dropTarget === column.name && setDropTarget(null),
+				onDragEnd: () => {
+					setDragging(null);
+					setDropTarget(null);
+				},
+				onDrop: (event) => {
+					event.preventDefault();
+					if (dragging !== null && dragging !== column.name) reorder(dragging, moveColumnTo(names, dragging, column.name));
+					setDragging(null);
+					setDropTarget(null);
+				},
+				className: cn("flex items-center gap-2 rounded-md px-2 py-1 text-sm", reorderable && "cursor-grab", dragging === column.name && "opacity-50", dropTarget === column.name && dragging !== column.name && "bg-muted"),
+				children: [
+					reorderable && /* @__PURE__ */ jsx(GripVerticalIcon, {
+						className: "text-muted-foreground size-4 shrink-0",
+						"aria-hidden": "true"
+					}),
+					column.toggleable ? /* @__PURE__ */ jsxs("label", {
+						className: "flex min-w-0 flex-1 items-center gap-2",
+						children: [/* @__PURE__ */ jsx(Checkbox, {
+							checked: visible.includes(column.name),
+							onCheckedChange: () => toggle(column.name)
+						}), /* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: column.label
+						})]
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate",
+						children: column.label
+					}),
+					reorderable && /* @__PURE__ */ jsxs("span", {
+						className: "flex shrink-0 items-center",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								id: positionId,
+								className: "sr-only",
+								"data-slot": "column-manager-position",
+								children: group ? t("table.column_manager.position_in_group", {
+									position,
+									count,
+									group
+								}, `Position ${position} of ${count} in ${group}.`) : t("table.column_manager.position", {
+									position,
+									count
+								}, `Position ${position} of ${count}.`)
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "icon-xs",
+								disabled: position <= 1,
+								"aria-disabled": saving || void 0,
+								"aria-describedby": positionId,
+								"aria-label": t("table.move_column_up", { column: column.label }, `Move ${column.label} up`),
+								onClick: (event) => move(column.name, -1, event.currentTarget),
+								children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "icon-xs",
+								disabled: position >= count,
+								"aria-disabled": saving || void 0,
+								"aria-describedby": positionId,
+								"aria-label": t("table.move_column_down", { column: column.label }, `Move ${column.label} down`),
+								onClick: (event) => move(column.name, 1, event.currentTarget),
+								children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+							})
+						]
+					})
+				]
+			}, column.name);
+		})
+	});
+	const body = /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1",
+		children: [
+			inHeader && resetButton && /* @__PURE__ */ jsx("div", {
+				className: "flex justify-end",
+				children: resetButton
+			}),
+			list,
+			reorderable && /* @__PURE__ */ jsx("div", {
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				className: "sr-only",
+				"data-slot": "column-manager-announcement",
+				children: announcement
+			}),
+			(!inHeader && resetButton || applyView) && /* @__PURE__ */ jsxs("div", {
+				className: "mt-1 flex items-center justify-end gap-2",
+				children: [!inHeader && resetButton, applyView && /* @__PURE__ */ jsx(TableTriggerButton, {
+					view: applyView,
+					"data-slot": "column-manager-apply",
+					disabled: !orderChanged && (!draft || !columnDraftChanged(table.visibleColumns, draft)),
+					onClick: apply
+				})]
+			})
+		]
+	});
+	const onOpenChange = (next) => {
+		if (!next) {
+			setDraft(null);
+			if (deferred) setOrderDraft(null);
+			setAnnouncement("");
+		}
+		setOpen(next);
+	};
+	const triggerButton = /* @__PURE__ */ jsx(TableTriggerButton, {
+		view: trigger,
+		defaultIcon: /* @__PURE__ */ jsx(Icon, {
+			name: "alfakit::tables.actions.column-manager",
+			fallback: Columns3Icon
+		}),
+		"aria-label": trigger.showLabel ? void 0 : trigger.label
+	});
+	if (table.columnManagerLayout === "modal") {
+		const modal = table.triggerActions?.columnManager?.modal;
+		const heading = modal?.heading ?? t("table.columns", {}, "Columns");
+		const description = modal?.description ?? table.pluralModelLabel;
+		const widthClass = modal?.width ? FILTERS_MODAL_WIDTH_CLASSES[modal.width] : void 0;
+		if (modal?.slideOver) return /* @__PURE__ */ jsxs(Sheet, {
+			open,
+			onOpenChange,
+			children: [/* @__PURE__ */ jsx(SheetTrigger, {
+				asChild: true,
+				children: triggerButton
+			}), /* @__PURE__ */ jsxs(SheetContent, {
+				side: slideOverSide(modal.slideOverPosition, direction),
+				className: cn("flex w-full flex-col gap-0 p-0", widthClass ?? "sm:max-w-md"),
+				"data-slot": "column-manager",
+				"data-slide-over": "",
+				children: [/* @__PURE__ */ jsxs(SheetHeader, {
+					className: "border-b",
+					children: [/* @__PURE__ */ jsx(SheetTitle, { children: heading }), /* @__PURE__ */ jsx(SheetDescription, {
+						className: modal.description ? void 0 : "sr-only",
+						children: description
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex-1 overflow-y-auto p-4",
+					children: body
+				})]
+			})]
+		});
+		return /* @__PURE__ */ jsxs(Dialog, {
+			open,
+			onOpenChange,
+			children: [/* @__PURE__ */ jsx(DialogTrigger, {
+				asChild: true,
+				children: triggerButton
+			}), /* @__PURE__ */ jsxs(DialogContent, {
+				className: widthClass ?? "sm:max-w-lg",
+				"data-slot": "column-manager",
+				children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: heading }), /* @__PURE__ */ jsx(DialogDescription, {
+					className: modal?.description ? void 0 : "sr-only",
+					children: description
+				})] }), /* @__PURE__ */ jsx("div", {
+					className: "max-h-[60vh] overflow-y-auto",
+					children: body
+				})]
+			})]
+		});
+	}
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: triggerButton
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			align: "end",
+			className: cn("p-2", table.columnManagerColumns ? "w-auto min-w-64" : "w-64"),
+			"data-slot": "column-manager",
+			children: body
+		})]
+	});
+}
+//#endregion
+export { ColumnManager };
+
+//# sourceMappingURL=column-manager.js.map

package/dist/components/table/column-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-manager.js","names":[],"sources":["../../../src/components/table/column-manager.tsx"],"sourcesContent":["import type { TableSchema } from '@alfakit/core'\nimport {\n  columnDraftChanged,\n  columnManagerPosition,\n  columnOrderChanged,\n  defaultVisibleColumns,\n  FILTERS_MODAL_WIDTH_CLASSES,\n  gridColumnsClasses,\n  keepMoveButtonFocus,\n  moveColumnInManager,\n  moveColumnTo,\n  orderColumnsBy,\n  saveColumnOrder,\n  slideOverSide,\n  toggleVisibleColumn,\n  triggerButtonView,\n  visitTable,\n} from '@alfakit/core'\nimport { ChevronDownIcon, ChevronUpIcon, Columns3Icon, GripVerticalIcon } from 'lucide-react'\nimport { useId, useState, type ReactNode } from 'react'\nimport { useDirection, usePanel, useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { showToast } from '../notifications/flash-toasts'\nimport { Button } from '../ui/button'\nimport { Checkbox } from '../ui/checkbox'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '../ui/dialog'\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '../ui/sheet'\nimport { TableTriggerButton } from './trigger-button'\n\n/**\n * The column manager: show / hide toggleable columns (kept in the query string) and,\n * with `reorderableColumns()`, move columns (stored per user on the server) by dragging a\n * row onto another or with the move up / down buttons (the keyboard path).\n *\n * `deferColumnManager()` keeps toggles in a draft until \"Apply\"; `columnManagerLayout()`\n * opens it in a dialog; `columnManagerColumns()` lays the list out in a grid.\n */\nexport function ColumnManager({\n  table,\n  token,\n  component,\n}: {\n  table: TableSchema\n  token: string\n  component: string\n}) {\n  const t = useT()\n  const panel = usePanel()\n  const direction = useDirection()\n  const [open, setOpen] = useState(false)\n  const [saving, setSaving] = useState(false)\n  const [dragging, setDragging] = useState<string | null>(null)\n  const [dropTarget, setDropTarget] = useState<string | null>(null)\n  // Toggles of a deferred column manager wait here until \"Apply\".\n  const [draft, setDraft] = useState<string[] | null>(null)\n  // A moved column order: the draft of a deferred column manager, or shown at once\n  // while it is saved.\n  // It belongs to the columns it was made from: the server's next order replaces the\n  // one shown while saving.\n  const [orderState, setOrderState] = useState<{\n    order: string[]\n    columns: TableSchema['columns']\n  } | null>(null)\n  // Screen-reader announcement of the last move.\n  const [announcement, setAnnouncement] = useState('')\n  const idBase = useId()\n  const reorderable = Boolean(table.reorderableColumns && panel.endpoints.tableColumns)\n  const toggleable = Boolean(table.toggleableColumns)\n  const deferred = Boolean(table.deferColumnManager)\n  const orderDraft =\n    orderState && (deferred || orderState.columns === table.columns) ? orderState.order : null\n  const setOrderDraft = (order: string[] | null) =>\n    setOrderState(order ? { order, columns: table.columns } : null)\n  const appliedNames = table.columns.map((column) => column.name)\n  const names = orderDraft ?? appliedNames\n  const columns = orderColumnsBy(\n    reorderable ? table.columns : table.columns.filter((column) => column.toggleable),\n    orderDraft,\n  )\n  const visible = draft ?? table.visibleColumns\n\n  if (!toggleable && !reorderable) return null\n\n  const trigger = triggerButtonView(table, 'columnManager', {\n    label: t('table.columns', {}, 'Columns'),\n    showLabel: false,\n  })\n\n  if (!trigger) return null\n\n  const toggle = (name: string) => {\n    const next = toggleVisibleColumn(visible, name)\n\n    if (deferred) {\n      setDraft(next)\n    } else {\n      visitTable(table.identifier, { columns: next }, ['page'])\n    }\n  }\n\n  const save = async (order: string[]): Promise<boolean> => {\n    if (!panel.endpoints.tableColumns) return false\n\n    setSaving(true)\n\n    try {\n      await saveColumnOrder(panel.endpoints.tableColumns, token, component, order)\n\n      return true\n    } catch (error) {\n      showToast({\n        id: 'alfakit-column-order-failed',\n        title: t('table.column_order_failed', {}, \"Couldn't save the column order\"),\n        body: error instanceof Error ? error.message : String(error),\n        status: 'danger',\n        format: 'alfakit',\n      })\n\n      return false\n    } finally {\n      setSaving(false)\n    }\n  }\n\n  const announce = (name: string, order: string[]) => {\n    const { position, count, group } = columnManagerPosition(order, name, table.columnGroups)\n    const label = table.columns.find((column) => column.name === name)?.label ?? name\n    const replace = { column: label, position, count, group: group ?? '' }\n\n    setAnnouncement(\n      group\n        ? deferred\n          ? t(\n              'table.column_manager.reordered_in_group_deferred',\n              replace,\n              `${label} moved to position ${position} of ${count} in ${group}. Apply columns to save your changes.`,\n            )\n          : t(\n              'table.column_manager.reordered_in_group',\n              replace,\n              `${label} moved to position ${position} of ${count} in ${group}.`,\n            )\n        : deferred\n          ? t(\n              'table.column_manager.reordered_deferred',\n              replace,\n              `${label} moved to position ${position} of ${count}. Apply columns to save your changes.`,\n            )\n          : t(\n              'table.column_manager.reordered',\n              replace,\n              `${label} moved to position ${position} of ${count}.`,\n            ),\n    )\n  }\n\n  // A new order: kept as a draft until \"Apply\" (`deferColumnManager()`), else saved now.\n  const reorder = (name: string, order: string[]) => {\n    if (saving || !columnOrderChanged(names, order)) return\n\n    setOrderDraft(order)\n    setAnnouncement('')\n\n    if (deferred) {\n      announce(name, order)\n\n      return\n    }\n\n    void save(order).then((saved) => (saved ? announce(name, order) : setOrderDraft(null)))\n  }\n\n  const move = (name: string, offset: -1 | 1, button: HTMLElement) => {\n    keepMoveButtonFocus(button)\n    reorder(name, moveColumnInManager(names, name, offset, table.columnGroups))\n  }\n\n  const orderChanged = Boolean(orderDraft && columnOrderChanged(appliedNames, orderDraft))\n\n  const apply = () => {\n    if (orderDraft && orderChanged) void save(orderDraft)\n\n    if (draft && columnDraftChanged(table.visibleColumns, draft)) {\n      visitTable(table.identifier, { columns: draft }, ['page'])\n    }\n\n    setDraft(null)\n    setOrderDraft(null)\n    setAnnouncement('')\n    setOpen(false)\n  }\n\n  // Reset: the defined column order and, for toggleable columns, the default visibility.\n  const reset = () => {\n    if (reorderable) {\n      setOrderDraft(null)\n      void save([])\n    }\n\n    if (toggleable) {\n      setDraft(null)\n      visitTable(table.identifier, { columns: defaultVisibleColumns(table) }, ['page'])\n    }\n  }\n\n  const resetView = triggerButtonView(table, 'columnManagerReset', {\n    label: toggleable\n      ? t('table.reset_columns', {}, 'Reset')\n      : t('table.reset_column_order', {}, 'Reset column order'),\n    variant: 'ghost',\n  })\n  const applyView = deferred\n    ? triggerButtonView(table, 'columnManagerApply', {\n        label: t('table_filters.apply', {}, 'Apply'),\n        variant: 'default',\n      })\n    : null\n  const resetButton = resetView ? (\n    <TableTriggerButton\n      view={resetView}\n      disabled={saving}\n      data-slot=\"column-manager-reset\"\n      className={cn(!applyView && 'w-full')}\n      onClick={reset}\n    />\n  ) : null\n  const inHeader = table.columnManagerResetActionPosition === 'header'\n\n  const list = (\n    <ul\n      className={cn(\n        table.columnManagerColumns\n          ? ['grid gap-0.5', gridColumnsClasses(table.columnManagerColumns)]\n          : 'flex flex-col gap-0.5',\n      )}\n      aria-label={t('table.columns', {}, 'Columns')}\n    >\n      {columns.map((column) => {\n        const { position, count, group } = columnManagerPosition(\n          names,\n          column.name,\n          table.columnGroups,\n        )\n        const positionId = `${idBase}-${column.name}-position`\n\n        return (\n          <li\n            key={column.name}\n            data-column={column.name}\n            draggable={reorderable && !saving}\n            onDragStart={(event) => {\n              if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'\n              setDragging(column.name)\n            }}\n            onDragOver={(event) => {\n              if (dragging === null) return\n\n              event.preventDefault()\n              if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'\n              setDropTarget(column.name)\n            }}\n            onDragLeave={() => dropTarget === column.name && setDropTarget(null)}\n            onDragEnd={() => {\n              setDragging(null)\n              setDropTarget(null)\n            }}\n            onDrop={(event) => {\n              event.preventDefault()\n\n              if (dragging !== null && dragging !== column.name) {\n                reorder(dragging, moveColumnTo(names, dragging, column.name))\n              }\n\n              setDragging(null)\n              setDropTarget(null)\n            }}\n            className={cn(\n              'flex items-center gap-2 rounded-md px-2 py-1 text-sm',\n              reorderable && 'cursor-grab',\n              dragging === column.name && 'opacity-50',\n              dropTarget === column.name && dragging !== column.name && 'bg-muted',\n            )}\n          >\n            {reorderable && (\n              <GripVerticalIcon\n                className=\"text-muted-foreground size-4 shrink-0\"\n                aria-hidden=\"true\"\n              />\n            )}\n            {column.toggleable ? (\n              <label className=\"flex min-w-0 flex-1 items-center gap-2\">\n                <Checkbox\n                  checked={visible.includes(column.name)}\n                  onCheckedChange={() => toggle(column.name)}\n                />\n                <span className=\"truncate\">{column.label}</span>\n              </label>\n            ) : (\n              <span className=\"min-w-0 flex-1 truncate\">{column.label}</span>\n            )}\n            {reorderable && (\n              <span className=\"flex shrink-0 items-center\">\n                <span id={positionId} className=\"sr-only\" data-slot=\"column-manager-position\">\n                  {group\n                    ? t(\n                        'table.column_manager.position_in_group',\n                        { position, count, group },\n                        `Position ${position} of ${count} in ${group}.`,\n                      )\n                    : t(\n                        'table.column_manager.position',\n                        { position, count },\n                        `Position ${position} of ${count}.`,\n                      )}\n                </span>\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-xs\"\n                  disabled={position <= 1}\n                  aria-disabled={saving || undefined}\n                  aria-describedby={positionId}\n                  aria-label={t(\n                    'table.move_column_up',\n                    { column: column.label },\n                    `Move ${column.label} up`,\n                  )}\n                  onClick={(event) => move(column.name, -1, event.currentTarget)}\n                >\n                  <ChevronUpIcon />\n                </Button>\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-xs\"\n                  disabled={position >= count}\n                  aria-disabled={saving || undefined}\n                  aria-describedby={positionId}\n                  aria-label={t(\n                    'table.move_column_down',\n                    { column: column.label },\n                    `Move ${column.label} down`,\n                  )}\n                  onClick={(event) => move(column.name, 1, event.currentTarget)}\n                >\n                  <ChevronDownIcon />\n                </Button>\n              </span>\n            )}\n          </li>\n        )\n      })}\n    </ul>\n  )\n\n  const body: ReactNode = (\n    <div className=\"flex flex-col gap-1\">\n      {inHeader && resetButton && <div className=\"flex justify-end\">{resetButton}</div>}\n      {list}\n      {reorderable && (\n        <div\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n          className=\"sr-only\"\n          data-slot=\"column-manager-announcement\"\n        >\n          {announcement}\n        </div>\n      )}\n      {((!inHeader && resetButton) || applyView) && (\n        <div className=\"mt-1 flex items-center justify-end gap-2\">\n          {!inHeader && resetButton}\n          {applyView && (\n            <TableTriggerButton\n              view={applyView}\n              data-slot=\"column-manager-apply\"\n              disabled={\n                !orderChanged && (!draft || !columnDraftChanged(table.visibleColumns, draft))\n              }\n              onClick={apply}\n            />\n          )}\n        </div>\n      )}\n    </div>\n  )\n\n  const onOpenChange = (next: boolean) => {\n    // Closing without \"Apply\" drops the draft.\n    if (!next) {\n      setDraft(null)\n      if (deferred) setOrderDraft(null)\n      setAnnouncement('')\n    }\n    setOpen(next)\n  }\n\n  const triggerButton = (\n    <TableTriggerButton\n      view={trigger}\n      defaultIcon={<Icon name=\"alfakit::tables.actions.column-manager\" fallback={Columns3Icon} />}\n      aria-label={trigger.showLabel ? undefined : trigger.label}\n    />\n  )\n\n  if (table.columnManagerLayout === 'modal') {\n    // `columnManagerTriggerAction()` may set `slideOver()`, `modalWidth()` and the heading.\n    const modal = table.triggerActions?.columnManager?.modal\n    const heading = modal?.heading ?? t('table.columns', {}, 'Columns')\n    const description = modal?.description ?? table.pluralModelLabel\n    const widthClass = modal?.width ? FILTERS_MODAL_WIDTH_CLASSES[modal.width] : undefined\n\n    if (modal?.slideOver) {\n      return (\n        <Sheet open={open} onOpenChange={onOpenChange}>\n          <SheetTrigger asChild>{triggerButton}</SheetTrigger>\n          <SheetContent\n            side={slideOverSide(modal.slideOverPosition, direction)}\n            className={cn('flex w-full flex-col gap-0 p-0', widthClass ?? 'sm:max-w-md')}\n            data-slot=\"column-manager\"\n            data-slide-over=\"\"\n          >\n            <SheetHeader className=\"border-b\">\n              <SheetTitle>{heading}</SheetTitle>\n              <SheetDescription className={modal.description ? undefined : 'sr-only'}>\n                {description}\n              </SheetDescription>\n            </SheetHeader>\n            <div className=\"flex-1 overflow-y-auto p-4\">{body}</div>\n          </SheetContent>\n        </Sheet>\n      )\n    }\n\n    return (\n      <Dialog open={open} onOpenChange={onOpenChange}>\n        <DialogTrigger asChild>{triggerButton}</DialogTrigger>\n        <DialogContent className={widthClass ?? 'sm:max-w-lg'} data-slot=\"column-manager\">\n          <DialogHeader>\n            <DialogTitle>{heading}</DialogTitle>\n            <DialogDescription className={modal?.description ? undefined : 'sr-only'}>\n              {description}\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"max-h-[60vh] overflow-y-auto\">{body}</div>\n        </DialogContent>\n      </Dialog>\n    )\n  }\n\n  return (\n    <Popover open={open} onOpenChange={onOpenChange}>\n      <PopoverTrigger asChild>{triggerButton}</PopoverTrigger>\n      <PopoverContent\n        align=\"end\"\n        className={cn('p-2', table.columnManagerColumns ? 'w-auto min-w-64' : 'w-64')}\n        data-slot=\"column-manager\"\n      >\n        {body}\n      </PopoverContent>\n    </Popover>\n  )\n}\n"],"mappings":"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"}

package/dist/components/table/content-layout.d.ts

@@ -0,0 +1,30 @@
+import { ActionContext, ColumnSchema, TableRecordSchema, TableSchema, TableSelection } from "@alfakit/core";
+//#region src/components/table/content-layout.d.ts
+export interface ContentLayoutProps {
+  table: TableSchema;
+  records: TableRecordSchema[];
+  columns: ColumnSchema[];
+  token: string;
+  component: string;
+  context: ActionContext;
+  selectable: boolean;
+  selection: TableSelection;
+  onRecordClick: (record: TableRecordSchema) => void;
+}
+/**
+ * Records arranged by a content layout (`Split`, `Stack`, `Panel`, `Grid`) instead of
+ * a row of cells, optionally as cards in a `contentGrid()`. Long pages render only the
+ * records in view (plus a few around them), by whole rows of the card grid; the list
+ * keeps `aria-setsize` / `aria-posinset` so assistive technology knows the real positions.
+ */
+export declare function ContentLayout(props: ContentLayoutProps): import("react").JSX.Element;
+/**
+ * Sorting for content layouts, which have no column headers: a select of the sortable
+ * columns and a direction toggle.
+ */
+export declare function ContentLayoutSort({ table, columns }: {
+  table: TableSchema;
+  columns: ColumnSchema[];
+}): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=content-layout.d.ts.map

package/dist/components/table/content-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-layout.d.ts","names":[],"sources":["../../../src/components/table/content-layout.tsx"],"mappings":";;iBAkCiB;EACf,OAAO;EACP,SAAS;EACT,SAAS;EACT;EACA;EACA,SAAS;EACT;EACA,WAAW;EACX,gBAAgB,QAAQ;;;;;;;;wBAiBV,cAAc,OAAO,qCAAkB,IAAA;;;;;wBAkPvC,oBACd,OACA;EAEA,OAAO;EACP,SAAS;oBACV,IAAA"}

package/dist/components/table/content-layout.js

@@ -0,0 +1,224 @@
+import { useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../ui/button.js";
+import { extraProps } from "../../lib/attributes.js";
+import { ActionList } from "../actions/action-list.js";
+import { useVirtualList } from "../../hooks/use-virtual-list.js";
+import { Checkbox } from "../ui/checkbox.js";
+import { RecordCell } from "./record-cell.js";
+import { VIRTUAL_ESTIMATES, columnSpanClasses, columnStartClasses, columnVisibilityClasses, gridColumnsClasses, layoutNodeGrows, layoutVisibilityClasses, primaryColumnName, recordActionsAtStart, splitClasses, stackClasses, virtualizeOptions, visitTable } from "@alfakit/core";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDownIcon, ArrowUpIcon, ChevronDownIcon } from "lucide-react";
+//#region src/components/table/content-layout.tsx
+function hasCollapsiblePanel(nodes) {
+	return nodes.some((node) => node.type !== "Column" && (node.type === "Panel" && Boolean(node.collapsible) || hasCollapsiblePanel(node.schema)));
+}
+/**
+* Records arranged by a content layout (`Split`, `Stack`, `Panel`, `Grid`) instead of
+* a row of cells, optionally as cards in a `contentGrid()`. Long pages render only the
+* records in view (plus a few around them), by whole rows of the card grid; the list
+* keeps `aria-setsize` / `aria-posinset` so assistive technology knows the real positions.
+*/
+function ContentLayout(props) {
+	const { table, records } = props;
+	const grid = table.contentGrid;
+	const { range, indexes, style, attach, item } = useVirtualList(records.length, virtualizeOptions(table.virtualize, VIRTUAL_ESTIMATES.item, grid ? 16 : 0, grid ? "auto" : 1));
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "table-content",
+		role: range.active ? "list" : void 0,
+		ref: attach,
+		style,
+		className: cn(grid ? cn("grid gap-4 p-4", gridColumnsClasses(grid)) : "divide-y"),
+		children: indexes.map((index) => {
+			const record = records[index];
+			return /* @__PURE__ */ jsx(ContentRecord, {
+				...props,
+				record,
+				card: Boolean(grid),
+				index,
+				position: range.active ? {
+					size: records.length,
+					item
+				} : void 0
+			}, String(record.key));
+		})
+	});
+}
+function ContentRecord({ table, record, columns, token, component, context, selectable, selection, onRecordClick, card, index, position }) {
+	const t = useT();
+	const panelId = useId();
+	const layout = table.contentLayout ?? [];
+	const collapsible = hasCollapsiblePanel(layout);
+	const startsCollapsed = !layout.some((node) => node.type === "Panel" && node.collapsible && !node.collapsed);
+	const [open, setOpen] = useState(!startsCollapsed);
+	const clickable = Boolean(record.url || table.recordAction);
+	const primary = primaryColumnName(columns);
+	const visible = new Set(columns.map((column) => column.name));
+	const selected = selection.isSelected(record.key);
+	const renderNode = (node, index, inSplit = false) => {
+		const grows = inSplit && layoutNodeGrows(node, columns);
+		const sizing = inSplit ? grows ? "min-w-0 flex-1" : "shrink-0" : void 0;
+		const span = cn(columnSpanClasses(node.columnSpan), columnStartClasses(node.columnStart));
+		if (node.type === "Column") {
+			const column = columns.find((item) => item.name === node.name);
+			if (!column || !visible.has(column.name)) return null;
+			return /* @__PURE__ */ jsx("div", {
+				"data-column": column.name,
+				className: cn(sizing, span, columnVisibilityClasses(column, "block")),
+				children: /* @__PURE__ */ jsx(RecordCell, {
+					column,
+					record,
+					token,
+					component,
+					context,
+					clickable,
+					primary: column.name === primary,
+					hasRecordAction: Boolean(table.recordAction),
+					onRecordClick
+				})
+			}, `column:${column.name}`);
+		}
+		const visibility = layoutVisibilityClasses(node);
+		const key = `${node.type}:${index}`;
+		switch (node.type) {
+			case "Split": return /* @__PURE__ */ jsx("div", {
+				"data-layout": "split",
+				...extraProps(node.extraAttributes, cn(splitClasses(node), visibility, sizing, span)),
+				children: node.schema.map((child, childIndex) => renderNode(child, childIndex, true))
+			}, key);
+			case "Stack": return /* @__PURE__ */ jsx("div", {
+				"data-layout": "stack",
+				...extraProps(node.extraAttributes, cn(stackClasses(node), visibility, sizing, span)),
+				children: node.schema.map((child, childIndex) => renderNode(child, childIndex))
+			}, key);
+			case "Grid": return /* @__PURE__ */ jsx("div", {
+				"data-layout": "grid",
+				...extraProps(node.extraAttributes, cn("grid gap-2", gridColumnsClasses(node.columns), visibility, sizing, span)),
+				children: node.schema.map((child, childIndex) => renderNode(child, childIndex))
+			}, key);
+			case "Panel":
+				if (node.collapsible && !open) return null;
+				return /* @__PURE__ */ jsx("div", {
+					"data-layout": "panel",
+					...extraProps(node.extraAttributes, cn("bg-muted/50 flex flex-col gap-2 rounded-lg p-3", visibility, sizing, span)),
+					children: node.schema.map((child, childIndex) => renderNode(child, childIndex))
+				}, key);
+			default: return null;
+		}
+	};
+	const main = layout.filter((node) => !(node.type === "Panel" && node.collapsible));
+	const details = layout.filter((node) => node.type === "Panel" && node.collapsible);
+	const atStart = recordActionsAtStart(table.recordActionsPosition);
+	const actions = record.actions?.length ? /* @__PURE__ */ jsx("div", {
+		className: "shrink-0",
+		onClick: (event) => event.stopPropagation(),
+		children: /* @__PURE__ */ jsx(ActionList, {
+			actions: record.actions,
+			context: {
+				...context,
+				record: record.key
+			},
+			size: "sm",
+			align: "end",
+			className: "flex-nowrap"
+		})
+	}) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "table-record",
+		"data-state": selected ? "selected" : void 0,
+		"data-index": index,
+		ref: position?.item,
+		role: position ? "listitem" : void 0,
+		"aria-setsize": position?.size,
+		"aria-posinset": position ? index + 1 : void 0,
+		className: cn("flex flex-col gap-3 p-4", card && "bg-card rounded-lg border shadow-xs", clickable && "hover:bg-muted/40 cursor-pointer", selected && "bg-muted/60", record.classes),
+		onClick: () => clickable && onRecordClick(record),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-3",
+			children: [
+				atStart && table.recordActionsPosition === "before-cells" && actions,
+				selectable && /* @__PURE__ */ jsx("div", {
+					className: "pt-0.5",
+					onClick: (event) => event.stopPropagation(),
+					children: record.selectable !== false && /* @__PURE__ */ jsx(Checkbox, {
+						checked: selected,
+						onCheckedChange: (checked) => selection.toggle(record.key, checked === true),
+						"aria-label": t("table.select_row", {}, "Select row")
+					})
+				}),
+				atStart && table.recordActionsPosition === "before-columns" && actions,
+				/* @__PURE__ */ jsx("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-3",
+					children: main.map((node, index) => renderNode(node, index))
+				}),
+				!atStart && actions,
+				collapsible && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "icon-sm",
+					"aria-expanded": open,
+					"aria-controls": open ? panelId : void 0,
+					"aria-label": open ? t("table.hide_details", {}, "Hide details") : t("table.show_details", {}, "Show details"),
+					onClick: (event) => {
+						event.stopPropagation();
+						setOpen(!open);
+					},
+					children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("transition-transform", open && "rotate-180") })
+				})
+			]
+		}), open && details.length > 0 && /* @__PURE__ */ jsx("div", {
+			id: panelId,
+			className: "flex flex-col gap-3",
+			children: details.map((node, index) => renderNode(node, main.length + index))
+		})]
+	});
+}
+/**
+* Sorting for content layouts, which have no column headers: a select of the sortable
+* columns and a direction toggle.
+*/
+function ContentLayoutSort({ table, columns }) {
+	const t = useT();
+	const sortable = columns.filter((column) => column.sortable);
+	if (sortable.length === 0) return null;
+	const direction = table.sort?.direction ?? "asc";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1",
+		children: [/* @__PURE__ */ jsxs("label", {
+			className: "flex items-center gap-2 text-sm",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: t("table.sort_by", {}, "Sort by")
+			}), /* @__PURE__ */ jsxs("select", {
+				value: table.sort?.column ?? "",
+				onChange: (event) => visitTable(table.identifier, {
+					sort: event.target.value || null,
+					direction: event.target.value ? direction : null
+				}, ["page"]),
+				className: "border-input h-8 rounded-md border bg-transparent px-2 text-sm",
+				children: [/* @__PURE__ */ jsx("option", {
+					value: "",
+					children: table.defaultSortOptionLabel ?? t("table.sort_by", {}, "Sort by")
+				}), sortable.map((column) => /* @__PURE__ */ jsx("option", {
+					value: column.name,
+					children: column.label
+				}, column.name))]
+			})]
+		}), table.sort && /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "outline",
+			size: "icon-sm",
+			"aria-label": direction === "asc" ? t("table.sort_ascending", {}, "Ascending") : t("table.sort_descending", {}, "Descending"),
+			onClick: () => visitTable(table.identifier, {
+				sort: table.sort?.column ?? null,
+				direction: direction === "asc" ? "desc" : "asc"
+			}, ["page"]),
+			children: direction === "asc" ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : /* @__PURE__ */ jsx(ArrowDownIcon, {})
+		})]
+	});
+}
+//#endregion
+export { ContentLayout, ContentLayoutSort };
+
+//# sourceMappingURL=content-layout.js.map