@alfakit/react 0.0.0-stage → 0.1.1

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

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

package/dist/components/table/filters.d.ts

@@ -0,0 +1,15 @@
+import { TableSchema } from "@alfakit/core";
+//#region src/components/table/filters.d.ts
+/**
+ * Filters are a small form whose state (keyed by filter name) is pushed into the query
+ * string. The server re-renders the table with the filtered records.
+ */
+export declare function TableFilters({ table, component }: {
+  table: TableSchema;
+  component: string;
+}): import("react").JSX.Element | null;
+export declare function FilterIndicators({ table }: {
+  table: TableSchema;
+}): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=filters.d.ts.map

package/dist/components/table/filters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filters.d.ts","names":[],"sources":["../../../src/components/table/filters.tsx"],"mappings":";;;;;;wBAwCgB,eAAe,OAAO;EAAe,OAAO;EAAa;oBAAmB,IAAA;wBAqR5E,mBAAmB;EAAW,OAAO;oBAAa,IAAA"}

package/dist/components/table/filters.js

@@ -0,0 +1,300 @@
+import { usePageSchema, usePanel, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../lib/icons.js";
+import { Badge } from "../ui/badge.js";
+import { Button } from "../ui/button.js";
+import { useStore } from "../../hooks/use-store.js";
+import { FormProvider } from "../form/form-context.js";
+import { SchemaRenderer } from "../schema/schema-renderer.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog.js";
+import { TableTriggerButton } from "./trigger-button.js";
+import { FilterFormSync, FormStore, filterFormComponents, filtersAreDeferred, filtersCollapsible, filtersFormWidthClass, filtersPlacement, removeAllFilterIndicators, removeFilterIndicator, triggerButtonView, visitTable } from "@alfakit/core";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, FilterIcon, XIcon } from "lucide-react";
+//#region src/components/table/filters.tsx
+/**
+* Filters are a small form whose state (keyed by filter name) is pushed into the query
+* string. The server re-renders the table with the filtered records.
+*/
+function TableFilters({ table, component }) {
+	const t = useT();
+	const panel = usePanel();
+	const page = usePageSchema();
+	const filters = useMemo(() => table.filters ?? [], [table.filters]);
+	const components = useMemo(() => table.filtersFormSchema ?? filterFormComponents(filters), [filters, table.filtersFormSchema]);
+	const [{ store, sync }] = useState(() => {
+		const store = new FormStore({
+			components,
+			state: table.filterState ?? {},
+			columns: table.filtersFormColumns ?? { default: 1 }
+		}, {
+			token: page?.token ?? "",
+			component: `${component}.filters`,
+			refreshUrl: void 0,
+			optionsUrl: panel.endpoints.schemaOptions
+		});
+		return {
+			store,
+			sync: new FilterFormSync(store)
+		};
+	});
+	useEffect(() => {
+		sync.receive({
+			components,
+			state: table.filterState,
+			columns: table.filtersFormColumns ?? { default: 1 }
+		});
+	}, [
+		sync,
+		components,
+		table.filterState,
+		table.filtersFormColumns
+	]);
+	useEffect(() => {
+		if (page?.token) store.setToken(page.token);
+	}, [store, page?.token]);
+	useEffect(() => () => store.destroy(), [store]);
+	const state = useStore(store.store);
+	const [open, setOpen] = useState(false);
+	const deferred = filtersAreDeferred(table);
+	const apply = () => {
+		sync.pushed(state.values);
+		visitTable(table.identifier, { filters: state.values }, ["page"]);
+	};
+	const discard = () => sync.discard({
+		components,
+		state: table.filterState,
+		columns: table.filtersFormColumns ?? { default: 1 }
+	});
+	useEffect(() => {
+		if (!state.dirty.size || deferred) return;
+		const timer = setTimeout(() => {
+			sync.pushed(state.values);
+			visitTable(table.identifier, { filters: state.values }, ["page"]);
+		}, 400);
+		return () => clearTimeout(timer);
+	}, [
+		sync,
+		state.values,
+		state.dirty,
+		table.identifier,
+		deferred
+	]);
+	if (filters.length === 0) return null;
+	const activeCount = table.filterIndicators?.length ?? 0;
+	const unsent = deferred && sync.hasUnsentChanges;
+	const resetView = triggerButtonView(table, "filtersReset", {
+		label: t("table.reset_filters", {}, "Reset"),
+		variant: "link"
+	});
+	const applyView = triggerButtonView(table, "filtersApply", {
+		label: t("table_filters.apply", {}, "Apply"),
+		variant: "default"
+	});
+	const trigger = triggerButtonView(table, "filters", {
+		label: t("table.filters", {}, "Filters"),
+		badge: activeCount > 0 ? activeCount : void 0
+	});
+	const resetButton = activeCount > 0 && resetView ? /* @__PURE__ */ jsx(TableTriggerButton, {
+		view: resetView,
+		"data-slot": "filters-reset",
+		onClick: () => visitTable(table.identifier, { filters: null }, ["page"])
+	}) : null;
+	const applyButton = applyView ? /* @__PURE__ */ jsx(TableTriggerButton, {
+		view: applyView,
+		"data-slot": "filters-apply",
+		disabled: !unsent,
+		onClick: () => {
+			apply();
+			setOpen(false);
+		}
+	}) : null;
+	const resetInHeader = table.filtersResetActionPosition === "header";
+	const triggerButton = trigger ? /* @__PURE__ */ jsx(TableTriggerButton, {
+		view: trigger,
+		defaultIcon: /* @__PURE__ */ jsx(Icon, {
+			name: "alfakit::tables.actions.filter",
+			fallback: FilterIcon
+		}),
+		responsiveLabel: !table.triggerActions?.filters,
+		active: activeCount > 0
+	}) : null;
+	const widthClass = filtersFormWidthClass(table);
+	const placement = filtersPlacement(table.filtersLayout);
+	const fields = /* @__PURE__ */ jsx(SchemaRenderer, {
+		components: state.components,
+		columns: state.columns,
+		className: "gap-4"
+	});
+	if (table.filtersLayout === "modal") return /* @__PURE__ */ jsxs(Dialog, {
+		open,
+		onOpenChange: (next) => {
+			if (!next) discard();
+			setOpen(next);
+		},
+		children: [triggerButton && /* @__PURE__ */ jsx(DialogTrigger, {
+			asChild: true,
+			children: triggerButton
+		}), /* @__PURE__ */ jsxs(DialogContent, {
+			className: widthClass ?? "sm:max-w-2xl",
+			children: [
+				/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: t("table.filters", {}, "Filters") }), /* @__PURE__ */ jsx(DialogDescription, {
+					className: "sr-only",
+					children: table.pluralModelLabel
+				})] }),
+				resetInHeader && resetButton && /* @__PURE__ */ jsx("div", {
+					className: "flex justify-end",
+					children: resetButton
+				}),
+				/* @__PURE__ */ jsx(FormProvider, {
+					store,
+					children: /* @__PURE__ */ jsx("div", {
+						className: "max-h-[60vh] overflow-y-auto",
+						children: fields
+					})
+				}),
+				/* @__PURE__ */ jsxs(DialogFooter, {
+					className: "items-center gap-2",
+					children: [
+						!resetInHeader && resetButton,
+						/* @__PURE__ */ jsx("span", { className: "flex-1" }),
+						/* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "outline",
+							size: "sm",
+							onClick: () => {
+								discard();
+								setOpen(false);
+							},
+							children: t("table_filters.cancel", {}, "Cancel")
+						}),
+						applyButton
+					]
+				})
+			]
+		})]
+	});
+	const form = /* @__PURE__ */ jsx(FormProvider, {
+		store,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4",
+			children: [
+				resetInHeader && resetButton && /* @__PURE__ */ jsx("div", {
+					className: "flex justify-end",
+					children: resetButton
+				}),
+				fields,
+				(!resetInHeader && resetButton || deferred && applyButton) && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-end gap-2",
+					children: [!resetInHeader && resetButton, deferred && applyButton]
+				})
+			]
+		})
+	});
+	if (placement === "before" || placement === "after") {
+		const collapsible = filtersCollapsible(table.filtersLayout);
+		return /* @__PURE__ */ jsxs("aside", {
+			"data-slot": "table-filters-sidebar",
+			"aria-label": t("table.filters", {}, "Filters"),
+			className: cn("bg-muted/30 rounded-lg border lg:w-72 lg:shrink-0", widthClass),
+			children: [collapsible ? /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "flex w-full items-center gap-2 p-4 text-sm font-medium",
+				"aria-expanded": open,
+				onClick: () => setOpen(!open),
+				children: [
+					/* @__PURE__ */ jsx(FilterIcon, { className: "size-4" }),
+					t("table.filters", {}, "Filters"),
+					activeCount > 0 && /* @__PURE__ */ jsx(Badge, {
+						className: "h-5 min-w-5 px-1",
+						children: activeCount
+					}),
+					/* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("ms-auto size-4 transition-transform", open && "rotate-180") })
+				]
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 px-4 pt-4 text-sm font-medium",
+				children: [/* @__PURE__ */ jsx(FilterIcon, { className: "size-4" }), t("table.filters", {}, "Filters")]
+			}), (!collapsible || open) && /* @__PURE__ */ jsx("div", {
+				className: cn("p-4", collapsible && "border-t"),
+				children: form
+			})]
+		});
+	}
+	if (table.filtersLayout === "above-content-collapsible") return /* @__PURE__ */ jsxs("div", {
+		className: "bg-muted/30 rounded-lg border",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "flex w-full items-center gap-2 p-4 text-sm font-medium",
+			"aria-expanded": open,
+			onClick: () => setOpen(!open),
+			children: [
+				/* @__PURE__ */ jsx(FilterIcon, { className: "size-4" }),
+				t("table.filters", {}, "Filters"),
+				activeCount > 0 && /* @__PURE__ */ jsx(Badge, {
+					className: "h-5 min-w-5 px-1",
+					children: activeCount
+				}),
+				/* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("ms-auto size-4 transition-transform", open && "rotate-180") })
+			]
+		}), open && /* @__PURE__ */ jsx("div", {
+			className: "border-t p-4",
+			children: form
+		})]
+	});
+	if (table.filtersLayout.startsWith("above-content") || table.filtersLayout === "below-content") return /* @__PURE__ */ jsx("div", {
+		className: "bg-muted/30 rounded-lg border p-4",
+		children: form
+	});
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [triggerButton && /* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: triggerButton
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			align: "end",
+			className: cn(widthClass ? ["w-[calc(100vw-2rem)]", widthClass] : "w-80 sm:w-96", table.filtersFormMaxHeight && "overflow-y-auto"),
+			style: table.filtersFormMaxHeight ? { maxHeight: table.filtersFormMaxHeight } : void 0,
+			children: form
+		})]
+	});
+}
+function FilterIndicators({ table }) {
+	const t = useT();
+	const indicators = table.filterIndicators ?? [];
+	if (indicators.length === 0) return null;
+	const removeAll = indicators.some((indicator) => indicator.removable !== false) ? triggerButtonView(table, "filtersRemoveAll", {
+		label: t("table.remove_all_filters", {}, "Remove all filters"),
+		showLabel: false,
+		variant: "ghost"
+	}) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-wrap items-center gap-2",
+		"data-slot": "filter-indicators",
+		children: [indicators.map((indicator) => /* @__PURE__ */ jsxs(Badge, {
+			variant: "secondary",
+			className: cn("gap-1", indicator.removable !== false && "pe-1"),
+			children: [indicator.label, indicator.removable !== false && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": `${t("table.remove_filter", {}, "Remove filter")}: ${indicator.label}`,
+				className: "hover:bg-foreground/10 rounded-sm",
+				onClick: () => visitTable(table.identifier, { filters: removeFilterIndicator(table.filterState, indicator) }, ["page"]),
+				children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+			})]
+		}, `${indicator.filter}-${indicator.removeField ?? ""}-${indicator.label}`)), removeAll && /* @__PURE__ */ jsx(TableTriggerButton, {
+			view: removeAll,
+			defaultIcon: /* @__PURE__ */ jsx(Icon, {
+				name: "alfakit::tables.filters.remove-all-button",
+				fallback: XIcon
+			}),
+			"data-slot": "filters-remove-all",
+			onClick: () => visitTable(table.identifier, { filters: removeAllFilterIndicators(table.filterState, table.filterIndicators) }, ["page"])
+		})]
+	});
+}
+//#endregion
+export { FilterIndicators, TableFilters };
+
+//# sourceMappingURL=filters.js.map

package/dist/components/table/filters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filters.js","names":[],"sources":["../../../src/components/table/filters.tsx"],"sourcesContent":["import type { TableSchema } from '@alfakit/core'\nimport {\n  FilterFormSync,\n  FormStore,\n  filterFormComponents,\n  filtersAreDeferred,\n  filtersCollapsible,\n  filtersFormWidthClass,\n  filtersPlacement,\n  removeAllFilterIndicators,\n  removeFilterIndicator,\n  triggerButtonView,\n  visitTable,\n} from '@alfakit/core'\nimport { ChevronDownIcon, FilterIcon, XIcon } from 'lucide-react'\nimport { useEffect, useMemo, useState } from 'react'\nimport { usePageSchema, usePanel, useT } from '../../context'\nimport { useStore } from '../../hooks/use-store'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { FormProvider } from '../form/form-context'\nimport { SchemaRenderer } from '../schema/schema-renderer'\nimport { Badge } from '../ui/badge'\nimport { Button } from '../ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '../ui/dialog'\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'\nimport { TableTriggerButton } from './trigger-button'\n\n/**\n * Filters are a small form whose state (keyed by filter name) is pushed into the query\n * string. The server re-renders the table with the filtered records.\n */\nexport function TableFilters({ table, component }: { table: TableSchema; component: string }) {\n  const t = useT()\n  const panel = usePanel()\n  const page = usePageSchema()\n  const filters = useMemo(() => table.filters ?? [], [table.filters])\n\n  // `filtersFormSchema()` lays the filters out itself.\n  const components = useMemo(\n    () => table.filtersFormSchema ?? filterFormComponents(filters),\n    [filters, table.filtersFormSchema],\n  )\n\n  // One store per table; server responses are merged in by FilterFormSync so typing that\n  // happens while a filter request is in flight is never reset.\n  const [{ store, sync }] = useState(() => {\n    const store = new FormStore(\n      {\n        components,\n        state: table.filterState ?? {},\n        columns: table.filtersFormColumns ?? { default: 1 },\n      },\n      {\n        token: page?.token ?? '',\n        component: `${component}.filters`,\n        refreshUrl: undefined,\n        optionsUrl: panel.endpoints.schemaOptions,\n      },\n    )\n\n    return { store, sync: new FilterFormSync(store) }\n  })\n\n  useEffect(() => {\n    sync.receive({\n      components,\n      state: table.filterState,\n      columns: table.filtersFormColumns ?? { default: 1 },\n    })\n  }, [sync, components, table.filterState, table.filtersFormColumns])\n\n  useEffect(() => {\n    if (page?.token) {\n      store.setToken(page.token)\n    }\n  }, [store, page?.token])\n\n  useEffect(() => () => store.destroy(), [store])\n\n  const state = useStore(store.store)\n  const [open, setOpen] = useState(false)\n  const deferred = filtersAreDeferred(table)\n\n  const apply = () => {\n    sync.pushed(state.values)\n    visitTable(\n      table.identifier,\n      { filters: state.values as Record<string, Record<string, unknown>> },\n      ['page'],\n    )\n  }\n\n  const discard = () =>\n    sync.discard({\n      components,\n      state: table.filterState,\n      columns: table.filtersFormColumns ?? { default: 1 },\n    })\n\n  // Push changes to the server (debounced by the browser's natural typing pauses), unless\n  // the filters wait for the Apply button.\n  useEffect(() => {\n    if (!state.dirty.size || deferred) {\n      return\n    }\n\n    const timer = setTimeout(() => {\n      sync.pushed(state.values)\n      visitTable(\n        table.identifier,\n        { filters: state.values as Record<string, Record<string, unknown>> },\n        ['page'],\n      )\n    }, 400)\n\n    return () => clearTimeout(timer)\n  }, [sync, state.values, state.dirty, table.identifier, deferred])\n\n  if (filters.length === 0) {\n    return null\n  }\n\n  const activeCount = table.filterIndicators?.length ?? 0\n\n  const unsent = deferred && sync.hasUnsentChanges\n  // `filtersResetAction()` / `filtersApplyAction()` / `filtersTriggerAction()`.\n  const resetView = triggerButtonView(table, 'filtersReset', {\n    label: t('table.reset_filters', {}, 'Reset'),\n    variant: 'link',\n  })\n  const applyView = triggerButtonView(table, 'filtersApply', {\n    label: t('table_filters.apply', {}, 'Apply'),\n    variant: 'default',\n  })\n  const trigger = triggerButtonView(table, 'filters', {\n    label: t('table.filters', {}, 'Filters'),\n    badge: activeCount > 0 ? activeCount : undefined,\n  })\n  const resetButton =\n    activeCount > 0 && resetView ? (\n      <TableTriggerButton\n        view={resetView}\n        data-slot=\"filters-reset\"\n        onClick={() => visitTable(table.identifier, { filters: null }, ['page'])}\n      />\n    ) : null\n  const applyButton = applyView ? (\n    <TableTriggerButton\n      view={applyView}\n      data-slot=\"filters-apply\"\n      disabled={!unsent}\n      onClick={() => {\n        apply()\n        setOpen(false)\n      }}\n    />\n  ) : null\n  const resetInHeader = table.filtersResetActionPosition === 'header'\n  const triggerButton = trigger ? (\n    <TableTriggerButton\n      view={trigger}\n      defaultIcon={<Icon name=\"alfakit::tables.actions.filter\" fallback={FilterIcon} />}\n      responsiveLabel={!table.triggerActions?.filters}\n      active={activeCount > 0}\n    />\n  ) : null\n\n  const widthClass = filtersFormWidthClass(table)\n  const placement = filtersPlacement(table.filtersLayout)\n\n  const fields = (\n    <SchemaRenderer components={state.components} columns={state.columns} className=\"gap-4\" />\n  )\n\n  if (table.filtersLayout === 'modal') {\n    return (\n      <Dialog\n        open={open}\n        onOpenChange={(next) => {\n          // Dismissing the dialog drops edits that were not applied.\n          if (!next) discard()\n          setOpen(next)\n        }}\n      >\n        {triggerButton && <DialogTrigger asChild>{triggerButton}</DialogTrigger>}\n        <DialogContent className={widthClass ?? 'sm:max-w-2xl'}>\n          <DialogHeader>\n            <DialogTitle>{t('table.filters', {}, 'Filters')}</DialogTitle>\n            <DialogDescription className=\"sr-only\">{table.pluralModelLabel}</DialogDescription>\n          </DialogHeader>\n          {resetInHeader && resetButton && <div className=\"flex justify-end\">{resetButton}</div>}\n          <FormProvider store={store}>\n            <div className=\"max-h-[60vh] overflow-y-auto\">{fields}</div>\n          </FormProvider>\n          <DialogFooter className=\"items-center gap-2\">\n            {!resetInHeader && resetButton}\n            <span className=\"flex-1\" />\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => {\n                discard()\n                setOpen(false)\n              }}\n            >\n              {t('table_filters.cancel', {}, 'Cancel')}\n            </Button>\n            {applyButton}\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    )\n  }\n\n  const form = (\n    <FormProvider store={store}>\n      <div className=\"flex flex-col gap-4\">\n        {resetInHeader && resetButton && <div className=\"flex justify-end\">{resetButton}</div>}\n        {fields}\n        {((!resetInHeader && resetButton) || (deferred && applyButton)) && (\n          <div className=\"flex items-center justify-end gap-2\">\n            {!resetInHeader && resetButton}\n            {deferred && applyButton}\n          </div>\n        )}\n      </div>\n    </FormProvider>\n  )\n\n  if (placement === 'before' || placement === 'after') {\n    const collapsible = filtersCollapsible(table.filtersLayout)\n\n    return (\n      <aside\n        data-slot=\"table-filters-sidebar\"\n        aria-label={t('table.filters', {}, 'Filters')}\n        className={cn('bg-muted/30 rounded-lg border lg:w-72 lg:shrink-0', widthClass)}\n      >\n        {collapsible ? (\n          <button\n            type=\"button\"\n            className=\"flex w-full items-center gap-2 p-4 text-sm font-medium\"\n            aria-expanded={open}\n            onClick={() => setOpen(!open)}\n          >\n            <FilterIcon className=\"size-4\" />\n            {t('table.filters', {}, 'Filters')}\n            {activeCount > 0 && <Badge className=\"h-5 min-w-5 px-1\">{activeCount}</Badge>}\n            <ChevronDownIcon\n              className={cn('ms-auto size-4 transition-transform', open && 'rotate-180')}\n            />\n          </button>\n        ) : (\n          <div className=\"flex items-center gap-2 px-4 pt-4 text-sm font-medium\">\n            <FilterIcon className=\"size-4\" />\n            {t('table.filters', {}, 'Filters')}\n          </div>\n        )}\n        {(!collapsible || open) && (\n          <div className={cn('p-4', collapsible && 'border-t')}>{form}</div>\n        )}\n      </aside>\n    )\n  }\n\n  if (table.filtersLayout === 'above-content-collapsible') {\n    return (\n      <div className=\"bg-muted/30 rounded-lg border\">\n        <button\n          type=\"button\"\n          className=\"flex w-full items-center gap-2 p-4 text-sm font-medium\"\n          aria-expanded={open}\n          onClick={() => setOpen(!open)}\n        >\n          <FilterIcon className=\"size-4\" />\n          {t('table.filters', {}, 'Filters')}\n          {activeCount > 0 && <Badge className=\"h-5 min-w-5 px-1\">{activeCount}</Badge>}\n          <ChevronDownIcon\n            className={cn('ms-auto size-4 transition-transform', open && 'rotate-180')}\n          />\n        </button>\n        {open && <div className=\"border-t p-4\">{form}</div>}\n      </div>\n    )\n  }\n\n  if (table.filtersLayout.startsWith('above-content') || table.filtersLayout === 'below-content') {\n    return <div className=\"bg-muted/30 rounded-lg border p-4\">{form}</div>\n  }\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      {triggerButton && <PopoverTrigger asChild>{triggerButton}</PopoverTrigger>}\n      <PopoverContent\n        align=\"end\"\n        className={cn(\n          widthClass ? ['w-[calc(100vw-2rem)]', widthClass] : 'w-80 sm:w-96',\n          table.filtersFormMaxHeight && 'overflow-y-auto',\n        )}\n        style={table.filtersFormMaxHeight ? { maxHeight: table.filtersFormMaxHeight } : undefined}\n      >\n        {form}\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport function FilterIndicators({ table }: { table: TableSchema }) {\n  const t = useT()\n  const indicators = table.filterIndicators ?? []\n\n  if (indicators.length === 0) {\n    return null\n  }\n\n  // `filtersRemoveAllAction()`; shown while any indicator can be removed.\n  const removeAll = indicators.some((indicator) => indicator.removable !== false)\n    ? triggerButtonView(table, 'filtersRemoveAll', {\n        label: t('table.remove_all_filters', {}, 'Remove all filters'),\n        showLabel: false,\n        variant: 'ghost',\n      })\n    : null\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-2\" data-slot=\"filter-indicators\">\n      {indicators.map((indicator) => (\n        <Badge\n          key={`${indicator.filter}-${indicator.removeField ?? ''}-${indicator.label}`}\n          variant=\"secondary\"\n          className={cn('gap-1', indicator.removable !== false && 'pe-1')}\n        >\n          {indicator.label}\n          {indicator.removable !== false && (\n            <button\n              type=\"button\"\n              aria-label={`${t('table.remove_filter', {}, 'Remove filter')}: ${indicator.label}`}\n              className=\"hover:bg-foreground/10 rounded-sm\"\n              onClick={() =>\n                visitTable(\n                  table.identifier,\n                  { filters: removeFilterIndicator(table.filterState, indicator) },\n                  ['page'],\n                )\n              }\n            >\n              <XIcon className=\"size-3\" />\n            </button>\n          )}\n        </Badge>\n      ))}\n      {removeAll && (\n        <TableTriggerButton\n          view={removeAll}\n          defaultIcon={<Icon name=\"alfakit::tables.filters.remove-all-button\" fallback={XIcon} />}\n          data-slot=\"filters-remove-all\"\n          onClick={() =>\n            visitTable(\n              table.identifier,\n              { filters: removeAllFilterIndicators(table.filterState, table.filterIndicators) },\n              ['page'],\n            )\n          }\n        />\n      )}\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/table/grouping.js

@@ -0,0 +1,194 @@
+import { useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../lib/icons.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { Checkbox } from "../ui/checkbox.js";
+import { TableCell, TableRow } from "../ui/table.js";
+import { TableTriggerButton } from "./trigger-button.js";
+import { initialCollapsedGroups, registerTablePersistence, toggleCollapsedGroup, triggerButtonView, visitTable } from "@alfakit/core";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronRightIcon, LayersIcon } from "lucide-react";
+//#region src/components/table/grouping.tsx
+/** The "group by" menu: one of the table's groups (or none) and the direction. */
+function TableGroupingMenu({ table }) {
+	const t = useT();
+	if (!table.groups || table.groups.length === 0) return null;
+	const active = table.grouping?.group ?? "";
+	const groups = table.groups;
+	const trigger = triggerButtonView(table, "groupRecords", { label: t("table_grouping.group_by", {}, "Group by") });
+	const changeGroup = (group) => visitTable(table.identifier, { group }, ["page"]);
+	const changeDirection = (direction) => visitTable(table.identifier, { groupDirection: direction === "desc" ? "desc" : "asc" }, ["page"]);
+	const inDropdownOnly = Boolean(table.groupingSettingsInDropdownOnDesktop);
+	const inline = inDropdownOnly ? null : /* @__PURE__ */ jsxs("div", {
+		"data-slot": "table-grouping-inline",
+		className: "hidden items-center gap-2 text-sm sm:flex",
+		children: [/* @__PURE__ */ jsxs("label", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: t("table_grouping.group_by", {}, "Group by")
+			}), /* @__PURE__ */ jsxs("select", {
+				value: active,
+				onChange: (event) => changeGroup(event.target.value),
+				className: "border-input h-8 rounded-md border bg-transparent px-2 text-sm",
+				children: [/* @__PURE__ */ jsx("option", {
+					value: "",
+					children: t("table_grouping.none", {}, "No grouping")
+				}), groups.map((group) => /* @__PURE__ */ jsx("option", {
+					value: group.id,
+					children: group.label
+				}, group.id))]
+			})]
+		}), table.grouping && !table.groupingDirectionSettingHidden && /* @__PURE__ */ jsxs("label", {
+			className: "flex items-center",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: t("table_grouping.direction", {}, "Group direction")
+			}), /* @__PURE__ */ jsxs("select", {
+				value: table.grouping.direction,
+				onChange: (event) => changeDirection(event.target.value),
+				className: "border-input h-8 rounded-md border bg-transparent px-2 text-sm",
+				children: [/* @__PURE__ */ jsx("option", {
+					value: "asc",
+					children: t("table_grouping.ascending", {}, "Ascending")
+				}), /* @__PURE__ */ jsx("option", {
+					value: "desc",
+					children: t("table_grouping.descending", {}, "Descending")
+				})]
+			})]
+		})]
+	});
+	if (!trigger) return inline;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [inline, /* @__PURE__ */ jsx("div", {
+		className: cn(!inDropdownOnly && "sm:hidden"),
+		children: /* @__PURE__ */ jsx(TableGroupingDropdown, {
+			table,
+			groups,
+			trigger,
+			active,
+			onGroup: changeGroup,
+			onDirection: changeDirection
+		})
+	})] });
+}
+function TableGroupingDropdown({ table, groups, trigger, active, onGroup, onDirection }) {
+	const t = useT();
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(TableTriggerButton, {
+			view: trigger,
+			defaultIcon: /* @__PURE__ */ jsx(Icon, {
+				name: "alfakit::tables.actions.group",
+				fallback: LayersIcon
+			}),
+			responsiveLabel: !table.triggerActions?.groupRecords,
+			active: Boolean(table.grouping)
+		})
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		align: "end",
+		className: "min-w-48",
+		children: [
+			/* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("table_grouping.group_by", {}, "Group by") }),
+			/* @__PURE__ */ jsxs(DropdownMenuRadioGroup, {
+				value: active,
+				onValueChange: onGroup,
+				children: [/* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+					value: "",
+					children: t("table_grouping.none", {}, "No grouping")
+				}), groups.map((group) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+					value: group.id,
+					children: group.label
+				}, group.id))]
+			}),
+			table.grouping && !table.groupingDirectionSettingHidden && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+				/* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("table_grouping.direction", {}, "Group direction") }),
+				/* @__PURE__ */ jsxs(DropdownMenuRadioGroup, {
+					value: table.grouping.direction,
+					onValueChange: onDirection,
+					children: [/* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+						value: "asc",
+						children: t("table_grouping.ascending", {}, "Ascending")
+					}), /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+						value: "desc",
+						children: t("table_grouping.descending", {}, "Descending")
+					})]
+				})
+			] })
+		]
+	})] });
+}
+/** A group heading row (`data-slot="table-group"`), with a collapse toggle when collapsible. */
+function GroupHeaderRow({ group, collapsed, collapsible, colSpan, onToggle, selection }) {
+	const t = useT();
+	const content = /* @__PURE__ */ jsxs("span", {
+		className: "flex flex-col items-start",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "font-medium",
+			children: group.title
+		}), group.description && /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground text-xs font-normal",
+			children: group.description
+		})]
+	});
+	return /* @__PURE__ */ jsx(TableRow, {
+		"data-slot": "table-group",
+		className: "bg-muted/50 hover:bg-muted/50",
+		children: /* @__PURE__ */ jsx(TableCell, {
+			colSpan,
+			className: "py-2",
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-3",
+				children: [selection && /* @__PURE__ */ jsx(Checkbox, {
+					checked: selection.checked,
+					onCheckedChange: (checked) => selection.onChange(checked === true),
+					"aria-label": t("table.select_group", { group: group.title }, "Select group :group")
+				}), collapsible ? /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "focus-visible:ring-ring/50 flex items-center gap-2 rounded-sm text-start outline-none focus-visible:ring-[3px]",
+					"aria-expanded": !collapsed,
+					"aria-label": `${collapsed ? t("table_grouping.expand", {}, "Expand group") : t("table_grouping.collapse", {}, "Collapse group")}: ${group.title}`,
+					onClick: onToggle,
+					children: [collapsed ? /* @__PURE__ */ jsx(ChevronRightIcon, {
+						className: "size-4 shrink-0 rtl:rotate-180",
+						"aria-hidden": "true"
+					}) : /* @__PURE__ */ jsx(Icon, {
+						name: "alfakit::tables.grouping.collapse-button",
+						fallback: ChevronDownIcon,
+						className: "size-4 shrink-0",
+						"aria-hidden": "true"
+					}), content]
+				}) : content]
+			})
+		})
+	});
+}
+/**
+* Collapsed group keys. Starts collapsed for `collapsedGroupsByDefault()` and resets when
+* the table is grouped differently.
+*/
+function useCollapsedGroups(table) {
+	const groupId = table.grouping ? `${table.grouping.group}:${table.grouping.direction}` : "";
+	const [state, setState] = useState(() => ({
+		groupId,
+		collapsed: initialCollapsedGroups(table)
+	}));
+	if (state.groupId !== groupId) setState({
+		groupId,
+		collapsed: initialCollapsedGroups(table)
+	});
+	return [state.collapsed, (key) => setState((current) => ({
+		...current,
+		collapsed: toggleCollapsedGroup(current.collapsed, key)
+	}))];
+}
+/** Register the table's session-persisted keys so cleared values are sent explicitly. */
+function useTablePersistence(table) {
+	const keys = (table.persistedState ?? []).join(",");
+	useEffect(() => registerTablePersistence(table.identifier, keys ? keys.split(",") : void 0), [table.identifier, keys]);
+}
+//#endregion
+export { GroupHeaderRow, TableGroupingMenu, useCollapsedGroups, useTablePersistence };
+
+//# sourceMappingURL=grouping.js.map

package/dist/components/table/grouping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grouping.js","names":[],"sources":["../../../src/components/table/grouping.tsx"],"sourcesContent":["import type {\n  ColumnSchema,\n  TableRecordGroupSchema,\n  TableSchema,\n  TriggerButtonView,\n} from '@alfakit/core'\nimport {\n  initialCollapsedGroups,\n  registerTablePersistence,\n  toggleCollapsedGroup,\n  triggerButtonView,\n  visitTable,\n} from '@alfakit/core'\nimport { ChevronDownIcon, ChevronRightIcon, LayersIcon } from 'lucide-react'\nimport { useEffect, useState } from 'react'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { Checkbox } from '../ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu'\nimport { TableCell, TableRow } from '../ui/table'\nimport { TableTriggerButton } from './trigger-button'\n\n/** The \"group by\" menu: one of the table's groups (or none) and the direction. */\nexport function TableGroupingMenu({ table }: { table: TableSchema }) {\n  const t = useT()\n\n  if (!table.groups || table.groups.length === 0) {\n    return null\n  }\n\n  const active = table.grouping?.group ?? ''\n  const groups = table.groups\n  // `groupRecordsTriggerAction()`.\n  const trigger = triggerButtonView(table, 'groupRecords', {\n    label: t('table_grouping.group_by', {}, 'Group by'),\n  })\n  const changeGroup = (group: string) => visitTable(table.identifier, { group }, ['page'])\n  const changeDirection = (direction: string) =>\n    visitTable(table.identifier, { groupDirection: direction === 'desc' ? 'desc' : 'asc' }, [\n      'page',\n    ])\n  const inDropdownOnly = Boolean(table.groupingSettingsInDropdownOnDesktop)\n\n  // Desktop default: the settings inline in the toolbar (the dropdown is for phones).\n  const inline = inDropdownOnly ? null : (\n    <div data-slot=\"table-grouping-inline\" className=\"hidden items-center gap-2 text-sm sm:flex\">\n      <label className=\"flex items-center gap-2\">\n        <span className=\"text-muted-foreground\">\n          {t('table_grouping.group_by', {}, 'Group by')}\n        </span>\n        <select\n          value={active}\n          onChange={(event) => changeGroup(event.target.value)}\n          className=\"border-input h-8 rounded-md border bg-transparent px-2 text-sm\"\n        >\n          <option value=\"\">{t('table_grouping.none', {}, 'No grouping')}</option>\n          {groups.map((group) => (\n            <option key={group.id} value={group.id}>\n              {group.label}\n            </option>\n          ))}\n        </select>\n      </label>\n      {table.grouping && !table.groupingDirectionSettingHidden && (\n        <label className=\"flex items-center\">\n          <span className=\"sr-only\">{t('table_grouping.direction', {}, 'Group direction')}</span>\n          <select\n            value={table.grouping.direction}\n            onChange={(event) => changeDirection(event.target.value)}\n            className=\"border-input h-8 rounded-md border bg-transparent px-2 text-sm\"\n          >\n            <option value=\"asc\">{t('table_grouping.ascending', {}, 'Ascending')}</option>\n            <option value=\"desc\">{t('table_grouping.descending', {}, 'Descending')}</option>\n          </select>\n        </label>\n      )}\n    </div>\n  )\n\n  if (!trigger) return inline\n\n  return (\n    <>\n      {inline}\n      <div className={cn(!inDropdownOnly && 'sm:hidden')}>\n        <TableGroupingDropdown\n          table={table}\n          groups={groups}\n          trigger={trigger}\n          active={active}\n          onGroup={changeGroup}\n          onDirection={changeDirection}\n        />\n      </div>\n    </>\n  )\n}\n\nfunction TableGroupingDropdown({\n  table,\n  groups,\n  trigger,\n  active,\n  onGroup,\n  onDirection,\n}: {\n  table: TableSchema\n  groups: NonNullable<TableSchema['groups']>\n  trigger: TriggerButtonView\n  active: string\n  onGroup: (group: string) => void\n  onDirection: (direction: string) => void\n}) {\n  const t = useT()\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <TableTriggerButton\n          view={trigger}\n          defaultIcon={<Icon name=\"alfakit::tables.actions.group\" fallback={LayersIcon} />}\n          responsiveLabel={!table.triggerActions?.groupRecords}\n          active={Boolean(table.grouping)}\n        />\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"min-w-48\">\n        <DropdownMenuLabel>{t('table_grouping.group_by', {}, 'Group by')}</DropdownMenuLabel>\n        <DropdownMenuRadioGroup value={active} onValueChange={onGroup}>\n          <DropdownMenuRadioItem value=\"\">\n            {t('table_grouping.none', {}, 'No grouping')}\n          </DropdownMenuRadioItem>\n          {groups.map((group) => (\n            <DropdownMenuRadioItem key={group.id} value={group.id}>\n              {group.label}\n            </DropdownMenuRadioItem>\n          ))}\n        </DropdownMenuRadioGroup>\n        {table.grouping && !table.groupingDirectionSettingHidden && (\n          <>\n            <DropdownMenuSeparator />\n            <DropdownMenuLabel>\n              {t('table_grouping.direction', {}, 'Group direction')}\n            </DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={table.grouping.direction} onValueChange={onDirection}>\n              <DropdownMenuRadioItem value=\"asc\">\n                {t('table_grouping.ascending', {}, 'Ascending')}\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"desc\">\n                {t('table_grouping.descending', {}, 'Descending')}\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </>\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\n/** A group heading row (`data-slot=\"table-group\"`), with a collapse toggle when collapsible. */\nexport function GroupHeaderRow({\n  group,\n  collapsed,\n  collapsible,\n  colSpan,\n  onToggle,\n  selection,\n}: {\n  group: TableRecordGroupSchema\n  collapsed: boolean\n  collapsible: boolean\n  colSpan: number\n  onToggle: () => void\n  /** `selectGroupsOnly()`: a checkbox selecting the group's records on the page. */\n  selection?: { checked: boolean | 'indeterminate'; onChange: (checked: boolean) => void }\n}) {\n  const t = useT()\n  const content = (\n    <span className=\"flex flex-col items-start\">\n      <span className=\"font-medium\">{group.title}</span>\n      {group.description && (\n        <span className=\"text-muted-foreground text-xs font-normal\">{group.description}</span>\n      )}\n    </span>\n  )\n\n  return (\n    <TableRow data-slot=\"table-group\" className=\"bg-muted/50 hover:bg-muted/50\">\n      <TableCell colSpan={colSpan} className=\"py-2\">\n        <span className=\"flex items-center gap-3\">\n          {selection && (\n            <Checkbox\n              checked={selection.checked}\n              onCheckedChange={(checked) => selection.onChange(checked === true)}\n              aria-label={t('table.select_group', { group: group.title }, 'Select group :group')}\n            />\n          )}\n          {collapsible ? (\n            <button\n              type=\"button\"\n              className=\"focus-visible:ring-ring/50 flex items-center gap-2 rounded-sm text-start outline-none focus-visible:ring-[3px]\"\n              aria-expanded={!collapsed}\n              aria-label={`${collapsed ? t('table_grouping.expand', {}, 'Expand group') : t('table_grouping.collapse', {}, 'Collapse group')}: ${group.title}`}\n              onClick={onToggle}\n            >\n              {collapsed ? (\n                <ChevronRightIcon className=\"size-4 shrink-0 rtl:rotate-180\" aria-hidden=\"true\" />\n              ) : (\n                <Icon\n                  name=\"alfakit::tables.grouping.collapse-button\"\n                  fallback={ChevronDownIcon}\n                  className=\"size-4 shrink-0\"\n                  aria-hidden=\"true\"\n                />\n              )}\n              {content}\n            </button>\n          ) : (\n            content\n          )}\n        </span>\n      </TableCell>\n    </TableRow>\n  )\n}\n\n/**\n * Collapsed group keys. Starts collapsed for `collapsedGroupsByDefault()` and resets when\n * the table is grouped differently.\n */\nexport function useCollapsedGroups(\n  table: Pick<TableSchema, 'grouping' | 'recordGroups'>,\n): [Set<string>, (key: string) => void] {\n  const groupId = table.grouping ? `${table.grouping.group}:${table.grouping.direction}` : ''\n  const [state, setState] = useState(() => ({\n    groupId,\n    collapsed: initialCollapsedGroups(table),\n  }))\n\n  if (state.groupId !== groupId) {\n    setState({ groupId, collapsed: initialCollapsedGroups(table) })\n  }\n\n  return [\n    state.collapsed,\n    (key: string) =>\n      setState((current) => ({\n        ...current,\n        collapsed: toggleCollapsedGroup(current.collapsed, key),\n      })),\n  ]\n}\n\n/** Register the table's session-persisted keys so cleared values are sent explicitly. */\nexport function useTablePersistence(table: Pick<TableSchema, 'identifier' | 'persistedState'>) {\n  const keys = (table.persistedState ?? []).join(',')\n\n  useEffect(\n    () => registerTablePersistence(table.identifier, keys ? keys.split(',') : undefined),\n    [table.identifier, keys],\n  )\n}\n\n/** Number of cells in a row of `columns` plus leading and trailing cells. */\nexport function rowCellCount(columns: ColumnSchema[], leading: number, trailing: number): number {\n  return columns.length + leading + trailing\n}\n"],"mappings":"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"}

package/dist/components/table/index.d.ts

@@ -0,0 +1,10 @@
+import { TableCellContent } from "./cells.js";
+import { ColumnManager } from "./column-manager.js";
+import { ContentLayout, ContentLayoutSort } from "./content-layout.js";
+import { FilterIndicators, TableFilters } from "./filters.js";
+import { TablePagination } from "./pagination.js";
+import { RecordCell } from "./record-cell.js";
+import { Spreadsheet } from "./spreadsheet-lazy.js";
+import { DataTable } from "./table-block.js";
+import { TableViews } from "./table-views.js";
+export { ColumnManager, ContentLayout, ContentLayoutSort, DataTable, FilterIndicators, RecordCell, Spreadsheet, TableCellContent, TableFilters, TablePagination, TableViews };