@lucasbernardosn/react-table 0.0.0-stage → 0.1.0

package/dist/components/data-table/body/data-table-row.js

@@ -0,0 +1,150 @@
+import { hasRowFeature } from "../../../utils/has-feature.js";
+import { focusDataTableRow, getDataTableRowKeyTarget } from "./data-table-row-focus.js";
+import { DATA_TABLE_GRID_CLASS_NAMES } from "../root/data-table-grid-classes.js";
+import { DataTableCell } from "./data-table-cell.js";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps, useRender } from "@base-ui/react";
+import { shallow, useSelector } from "@tanstack/react-store";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+import { Fragment as Fragment$1 } from "react";
+//#region src/components/data-table/body/data-table-row.tsx
+/**
+* Uma linha do corpo (`role="row"`). É um grid com as colunas do `--data-table-template`, que o
+* `DataTable.Root` escreve.
+*
+* Com render-prop ou sem `children`, faz o laço das células sozinha: assina as próprias células e
+* re-renderiza quando a ordem, a visibilidade ou o pinning das colunas mudam, que não mudam o row
+* model e não passam pelo `DataTable.Body`. Com `columnVisibilityFeature`, são as células
+* visíveis; sem ela, todas. Com `columnPinningFeature`, vêm na ordem das regiões: as fixadas no
+* início, as do centro e as fixadas no fim.
+*
+* Com `rowSelectionFeature`, a linha selecionada ganha `data-selected` e o fundo destacado, e com
+* `activeRowFeature`, também o `aria-selected`. O clique na linha não seleciona: o `onClick` fica
+* livre, e a seleção é do `DataTable.RowCheckbox` e do Espaço.
+*
+* Com `activeRowFeature`, entra na navegação por teclado. A linha ativa tem o ponto de Tab (sem
+* ela no row model, a primeira), e receber o foco, pelo teclado ou pelo clique, torna esta a
+* ativa, marcada com `data-active`. ↑↓, Home, End, PageUp e PageDown movem o foco entre as
+* linhas, e o Espaço alterna a seleção, com Shift para o intervalo. Os atalhos são do app, no
+* `onKeyDown`, que roda antes: um `preventDefault()` cancela o da linha. Num campo de texto de
+* dentro, as setas ficam com o campo.
+*
+* O fundo fica na variável `--data-table-row-background`, que as células fixadas repetem: o
+* hover e a selecionada a trocam para `gray-3`, e as duas juntas, para `gray-4`. Para colorir uma
+* linha, troque a variável, e não use `bg-*`, que deixaria as fixadas com a cor antiga. A cor do
+* texto fica na linha, e as células herdam.
+*
+* @example
+* ```tsx
+* <DataTable.Row
+*   row={row}
+*   onClick={() => openCustomer(row.original)}
+*   onKeyDown={(event) => {
+*     if (event.key === 'Enter') {
+*       openCustomer(row.original);
+*     }
+*   }}
+*   className={
+*     row.original.overdue
+*       ? '[--data-table-row-background:var(--color-gray-2)] text-gray-11'
+*       : undefined
+*   }
+* >
+*   {(cell) => <DataTable.Cell cell={cell} />}
+* </DataTable.Row>
+* ```
+*/
+const DataTableRow = (props) => {
+	const { row, render, className, children, ...rest } = props;
+	const cells = useSelector(row.table.store, () => hasRowFeature(row, "columnPinningFeature") ? [
+		row.getStartVisibleCells(),
+		row.getCenterVisibleCells(),
+		row.getEndVisibleCells()
+	] : hasRowFeature(row, "columnVisibilityFeature") ? [row.getVisibleCells()] : [row.getAllCells()], { compare: shallow }).flat();
+	/**
+	* Só re-renderiza quando esta linha é marcada ou desmarcada. A seleção é opcional, então assina
+	* o store; sem `rowSelectionFeature`, nenhuma linha fica selecionada.
+	*/
+	const isSelected = useSelector(row.table.store, () => hasRowFeature(row, "rowSelectionFeature") && row.getIsSelected());
+	/**
+	* O ponto de Tab da tabela: a linha ativa ou, sem ela no row model, a primeira. Re-renderiza
+	* quando o ponto de Tab entra ou sai daqui. A navegação é opcional, então assina o store; sem
+	* `activeRowFeature`, nenhuma linha entra no Tab.
+	*/
+	const isTabStop = useSelector(row.table.store, () => {
+		if (!hasRowFeature(row, "activeRowFeature")) return false;
+		const activeRow = row.table.getActiveRow();
+		return activeRow ? activeRow.id === row.id : row.table.getRowModel().rows[0]?.id === row.id;
+	});
+	/** Só re-renderiza quando esta linha vira ou deixa de ser a ativa. */
+	const isActive = useSelector(row.table.store, () => hasRowFeature(row, "activeRowFeature") && row.getIsActive());
+	/** Receber o foco, nela ou num controle de dentro, torna esta a linha ativa. */
+	const handleFocus = () => {
+		if (hasRowFeature(row, "activeRowFeature") && !row.getIsActive()) row.table.setActiveRowId(row.id);
+	};
+	/** As teclas da navegação. O `onKeyDown` do app roda antes e cancela com `preventDefault()`. */
+	const handleKeyDown = (event) => {
+		if (!hasRowFeature(row, "activeRowFeature") || event.defaultPrevented) return;
+		/** Na própria linha: num controle de dentro, como o checkbox, o Espaço é dele. */
+		if (event.key === " " && event.target === event.currentTarget) {
+			if (hasRowFeature(row, "rowSelectionFeature") && row.getCanSelect()) {
+				event.preventDefault();
+				/** O handler do checkbox: lê o Shift do evento, para o intervalo, e move a âncora. */
+				row.getToggleSelectedHandler()({
+					target: { checked: !row.getIsSelected() },
+					nativeEvent: event.nativeEvent
+				});
+			}
+			return;
+		}
+		const targetRow = getDataTableRowKeyTarget(event.currentTarget, event);
+		if (targetRow) {
+			event.preventDefault();
+			focusDataTableRow(targetRow);
+		}
+	};
+	const isNavigable = hasRowFeature(row, "activeRowFeature");
+	/** Com render-prop ou sem `children`, o laço é daqui; com nós comuns, de quem usa. */
+	const content = typeof children === "function" || children === void 0 ? cells.map((cell) => /* @__PURE__ */ jsx(Fragment$1, { children: children === void 0 ? /* @__PURE__ */ jsx(DataTableCell, { cell }) : children(cell) }, cell.id)) : children;
+	const baseProps = {
+		"data-component": "DataTable.Row",
+		"data-selected": isSelected ? "" : void 0,
+		"data-active": isActive ? "" : void 0,
+		role: "row",
+		"aria-selected": isNavigable && hasRowFeature(row, "rowSelectionFeature") ? isSelected : void 0,
+		tabIndex: isNavigable ? isTabStop ? 0 : -1 : void 0,
+		onFocus: handleFocus,
+		onKeyDown: handleKeyDown,
+		className: mergeTwClassNames([
+			"relative",
+			DATA_TABLE_GRID_CLASS_NAMES,
+			"last:border-b-0",
+			"[--data-table-row-background:var(--color-gray-1)]",
+			"hover:[--data-table-row-background:var(--color-gray-3)]",
+			"data-selected:[--data-table-row-background:var(--color-gray-3)]",
+			"data-selected:hover:[--data-table-row-background:var(--color-gray-4)]",
+			"bg-(--data-table-row-background)",
+			"text-gray-12",
+			"outline-none",
+			"after:pointer-events-none",
+			"after:absolute",
+			"after:inset-0",
+			"after:z-2",
+			"after:content-[\"\"]",
+			"focus-within:after:outline-2",
+			"focus-within:after:-outline-offset-2",
+			"focus-within:after:outline-gray-12"
+		], className),
+		children: content
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+DataTableRow.displayName = "DataTable.Row";
+//#endregion
+export { DataTableRow };
+
+//# sourceMappingURL=data-table-row.js.map

package/dist/components/data-table/body/data-table-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-row.js","names":["Fragment"],"sources":["../../../../src/components/data-table/body/data-table-row.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { shallow, useSelector } from '@tanstack/react-store';\nimport type { Cell, Row, RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport { Fragment } from 'react';\nimport { hasRowFeature } from '../../../utils';\nimport { DATA_TABLE_GRID_CLASS_NAMES } from '../root/data-table-grid-classes';\nimport { DataTableCell } from './data-table-cell';\nimport {\n  focusDataTableRow,\n  getDataTableRowKeyTarget,\n} from './data-table-row-focus';\n\nexport type DataTableRowProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  {\n    /** A linha do row model. */\n    row: Row<TFeatures, TData>;\n    /**\n     * Uma função que recebe cada célula visível e devolve o elemento dela. Com nós comuns, quem\n     * usa faz o laço.\n     * @default (cell) => <DataTable.Cell cell={cell} />\n     */\n    children?:\n      | React.ReactNode\n      | ((cell: Cell<TFeatures, TData>) => React.ReactNode);\n  }\n>;\n\n/**\n * Uma linha do corpo (`role=\"row\"`). É um grid com as colunas do `--data-table-template`, que o\n * `DataTable.Root` escreve.\n *\n * Com render-prop ou sem `children`, faz o laço das células sozinha: assina as próprias células e\n * re-renderiza quando a ordem, a visibilidade ou o pinning das colunas mudam, que não mudam o row\n * model e não passam pelo `DataTable.Body`. Com `columnVisibilityFeature`, são as células\n * visíveis; sem ela, todas. Com `columnPinningFeature`, vêm na ordem das regiões: as fixadas no\n * início, as do centro e as fixadas no fim.\n *\n * Com `rowSelectionFeature`, a linha selecionada ganha `data-selected` e o fundo destacado, e com\n * `activeRowFeature`, também o `aria-selected`. O clique na linha não seleciona: o `onClick` fica\n * livre, e a seleção é do `DataTable.RowCheckbox` e do Espaço.\n *\n * Com `activeRowFeature`, entra na navegação por teclado. A linha ativa tem o ponto de Tab (sem\n * ela no row model, a primeira), e receber o foco, pelo teclado ou pelo clique, torna esta a\n * ativa, marcada com `data-active`. ↑↓, Home, End, PageUp e PageDown movem o foco entre as\n * linhas, e o Espaço alterna a seleção, com Shift para o intervalo. Os atalhos são do app, no\n * `onKeyDown`, que roda antes: um `preventDefault()` cancela o da linha. Num campo de texto de\n * dentro, as setas ficam com o campo.\n *\n * O fundo fica na variável `--data-table-row-background`, que as células fixadas repetem: o\n * hover e a selecionada a trocam para `gray-3`, e as duas juntas, para `gray-4`. Para colorir uma\n * linha, troque a variável, e não use `bg-*`, que deixaria as fixadas com a cor antiga. A cor do\n * texto fica na linha, e as células herdam.\n *\n * @example\n * ```tsx\n * <DataTable.Row\n *   row={row}\n *   onClick={() => openCustomer(row.original)}\n *   onKeyDown={(event) => {\n *     if (event.key === 'Enter') {\n *       openCustomer(row.original);\n *     }\n *   }}\n *   className={\n *     row.original.overdue\n *       ? '[--data-table-row-background:var(--color-gray-2)] text-gray-11'\n *       : undefined\n *   }\n * >\n *   {(cell) => <DataTable.Cell cell={cell} />}\n * </DataTable.Row>\n * ```\n */\nexport const DataTableRow = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableRowProps<TFeatures, TData>,\n) => {\n  const { row, render, className, children, ...rest } = props;\n\n  /**\n   * As listas que o TanStack memoiza, numa tupla: o `shallow` compara item a item, e só\n   * re-renderiza quando uma delas muda com as colunas. Todas seguem a ordem dos headers folha, que\n   * é a do template, e as células caem nos tracks certos. Com pinning, as três regiões, que\n   * ordenam as fixadas mesmo sem `columnVisibilityFeature`.\n   */\n  const cellGroups = useSelector(\n    row.table.store,\n    () =>\n      hasRowFeature(row, 'columnPinningFeature')\n        ? [\n            row.getStartVisibleCells(),\n            row.getCenterVisibleCells(),\n            row.getEndVisibleCells(),\n          ]\n        : hasRowFeature(row, 'columnVisibilityFeature')\n          ? [row.getVisibleCells()]\n          : [row.getAllCells()],\n    { compare: shallow },\n  );\n\n  const cells = cellGroups.flat();\n\n  /**\n   * Só re-renderiza quando esta linha é marcada ou desmarcada. A seleção é opcional, então assina\n   * o store; sem `rowSelectionFeature`, nenhuma linha fica selecionada.\n   */\n  const isSelected = useSelector(\n    row.table.store,\n    () => hasRowFeature(row, 'rowSelectionFeature') && row.getIsSelected(),\n  );\n\n  /**\n   * O ponto de Tab da tabela: a linha ativa ou, sem ela no row model, a primeira. Re-renderiza\n   * quando o ponto de Tab entra ou sai daqui. A navegação é opcional, então assina o store; sem\n   * `activeRowFeature`, nenhuma linha entra no Tab.\n   */\n  const isTabStop = useSelector(row.table.store, () => {\n    if (!hasRowFeature(row, 'activeRowFeature')) {\n      return false;\n    }\n\n    const activeRow = row.table.getActiveRow();\n\n    return activeRow\n      ? activeRow.id === row.id\n      : row.table.getRowModel().rows[0]?.id === row.id;\n  });\n\n  /** Só re-renderiza quando esta linha vira ou deixa de ser a ativa. */\n  const isActive = useSelector(\n    row.table.store,\n    () => hasRowFeature(row, 'activeRowFeature') && row.getIsActive(),\n  );\n\n  /** Receber o foco, nela ou num controle de dentro, torna esta a linha ativa. */\n  const handleFocus = () => {\n    if (hasRowFeature(row, 'activeRowFeature') && !row.getIsActive()) {\n      row.table.setActiveRowId(row.id);\n    }\n  };\n\n  /** As teclas da navegação. O `onKeyDown` do app roda antes e cancela com `preventDefault()`. */\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!hasRowFeature(row, 'activeRowFeature') || event.defaultPrevented) {\n      return;\n    }\n\n    /** Na própria linha: num controle de dentro, como o checkbox, o Espaço é dele. */\n    if (event.key === ' ' && event.target === event.currentTarget) {\n      if (hasRowFeature(row, 'rowSelectionFeature') && row.getCanSelect()) {\n        event.preventDefault();\n\n        /** O handler do checkbox: lê o Shift do evento, para o intervalo, e move a âncora. */\n        row.getToggleSelectedHandler()({\n          target: { checked: !row.getIsSelected() },\n          nativeEvent: event.nativeEvent,\n        });\n      }\n\n      return;\n    }\n\n    const targetRow = getDataTableRowKeyTarget(event.currentTarget, event);\n\n    if (targetRow) {\n      event.preventDefault();\n      focusDataTableRow(targetRow);\n    }\n  };\n\n  const isNavigable = hasRowFeature(row, 'activeRowFeature');\n\n  /** Com render-prop ou sem `children`, o laço é daqui; com nós comuns, de quem usa. */\n  const content =\n    typeof children === 'function' || children === undefined\n      ? cells.map((cell) => (\n          <Fragment key={cell.id}>\n            {children === undefined ? (\n              <DataTableCell cell={cell} />\n            ) : (\n              children(cell)\n            )}\n          </Fragment>\n        ))\n      : children;\n\n  const baseProps = {\n    'data-component': 'DataTable.Row',\n    'data-selected': isSelected ? '' : undefined,\n    'data-active': isActive ? '' : undefined,\n    role: 'row',\n    // Só no `grid`: o ARIA não define o atributo na linha de uma `table`, e o leitor o ignora.\n    'aria-selected':\n      isNavigable && hasRowFeature(row, 'rowSelectionFeature')\n        ? isSelected\n        : undefined,\n    tabIndex: isNavigable ? (isTabStop ? 0 : -1) : undefined,\n    onFocus: handleFocus,\n    onKeyDown: handleKeyDown,\n    className: mergeTwClassNames(\n      [\n        // O anel de foco se posiciona por aqui.\n        'relative',\n\n        DATA_TABLE_GRID_CLASS_NAMES,\n        // Sem a linha horizontal na última: embaixo dela já vem a borda da área de rolagem, e as\n        // duas somariam 2px.\n        'last:border-b-0',\n\n        // O fundo numa variável, que as células fixadas repetem para ficarem opacas. A selecionada\n        // e o hover têm a mesma cor, e a selecionada com hover sobe um passo: sem isso, passar o\n        // mouse por ela não mudaria nada.\n        '[--data-table-row-background:var(--color-gray-1)]',\n        'hover:[--data-table-row-background:var(--color-gray-3)]',\n        'data-selected:[--data-table-row-background:var(--color-gray-3)]',\n        'data-selected:hover:[--data-table-row-background:var(--color-gray-4)]',\n        'bg-(--data-table-row-background)',\n\n        'text-gray-12',\n\n        // O anel de foco, com o foco na linha ou num controle de dentro, pelo teclado ou pelo\n        // clique: com `focus-visible`, o clique tornaria a linha ativa sem mostrar qual é. Num\n        // `::after` por cima das células fixadas (`z-1`), que cobririam o `outline` e o\n        // `box-shadow` da própria linha. Por dentro: a linha seguinte cobriria o que sai por baixo.\n        'outline-none',\n        'after:pointer-events-none',\n        'after:absolute',\n        'after:inset-0',\n        'after:z-2',\n        'after:content-[\"\"]',\n        'focus-within:after:outline-2',\n        'focus-within:after:-outline-offset-2',\n        'focus-within:after:outline-gray-12',\n      ],\n      className,\n    ),\n    children: content,\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTableRow.displayName = 'DataTable.Row';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA,MAAa,gBAIX,UACG;CACH,MAAM,EAAE,KAAK,QAAQ,WAAW,UAAU,GAAG,SAAS;CAuBtD,MAAM,QAfa,YACjB,IAAI,MAAM,aAER,cAAc,KAAK,sBAAsB,IACrC;EACE,IAAI,qBAAqB;EACzB,IAAI,sBAAsB;EAC1B,IAAI,mBAAmB;CACzB,IACA,cAAc,KAAK,yBAAyB,IAC1C,CAAC,IAAI,gBAAgB,CAAC,IACtB,CAAC,IAAI,YAAY,CAAC,GAC1B,EAAE,SAAS,QAAQ,CAGE,CAAC,CAAC,KAAK;;;;;CAM9B,MAAM,aAAa,YACjB,IAAI,MAAM,aACJ,cAAc,KAAK,qBAAqB,KAAK,IAAI,cAAc,CACvE;;;;;;CAOA,MAAM,YAAY,YAAY,IAAI,MAAM,aAAa;EACnD,IAAI,CAAC,cAAc,KAAK,kBAAkB,GACxC,OAAO;EAGT,MAAM,YAAY,IAAI,MAAM,aAAa;EAEzC,OAAO,YACH,UAAU,OAAO,IAAI,KACrB,IAAI,MAAM,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,IAAI;CAClD,CAAC;;CAGD,MAAM,WAAW,YACf,IAAI,MAAM,aACJ,cAAc,KAAK,kBAAkB,KAAK,IAAI,YAAY,CAClE;;CAGA,MAAM,oBAAoB;EACxB,IAAI,cAAc,KAAK,kBAAkB,KAAK,CAAC,IAAI,YAAY,GAC7D,IAAI,MAAM,eAAe,IAAI,EAAE;CAEnC;;CAGA,MAAM,iBAAiB,UAA+C;EACpE,IAAI,CAAC,cAAc,KAAK,kBAAkB,KAAK,MAAM,kBACnD;;EAIF,IAAI,MAAM,QAAQ,OAAO,MAAM,WAAW,MAAM,eAAe;GAC7D,IAAI,cAAc,KAAK,qBAAqB,KAAK,IAAI,aAAa,GAAG;IACnE,MAAM,eAAe;;IAGrB,IAAI,yBAAyB,CAAC,CAAC;KAC7B,QAAQ,EAAE,SAAS,CAAC,IAAI,cAAc,EAAE;KACxC,aAAa,MAAM;IACrB,CAAC;GACH;GAEA;EACF;EAEA,MAAM,YAAY,yBAAyB,MAAM,eAAe,KAAK;EAErE,IAAI,WAAW;GACb,MAAM,eAAe;GACrB,kBAAkB,SAAS;EAC7B;CACF;CAEA,MAAM,cAAc,cAAc,KAAK,kBAAkB;;CAGzD,MAAM,UACJ,OAAO,aAAa,cAAc,aAAa,KAAA,IAC3C,MAAM,KAAK,SACT,oBAACA,YAAD,EAAA,UACG,aAAa,KAAA,IACZ,oBAAC,eAAD,EAAqB,KAAO,CAAA,IAE5B,SAAS,IAAI,EAEP,GANK,KAAK,EAMV,CACX,IACD;CAEN,MAAM,YAAY;EAChB,kBAAkB;EAClB,iBAAiB,aAAa,KAAK,KAAA;EACnC,eAAe,WAAW,KAAK,KAAA;EAC/B,MAAM;EAEN,iBACE,eAAe,cAAc,KAAK,qBAAqB,IACnD,aACA,KAAA;EACN,UAAU,cAAe,YAAY,IAAI,KAAM,KAAA;EAC/C,SAAS;EACT,WAAW;EACX,WAAW,kBACT;GAEE;GAEA;GAGA;GAKA;GACA;GACA;GACA;GACA;GAEA;GAMA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,UAAU;CACZ;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,aAAa,cAAc"}

package/dist/components/data-table/body/use-data-table-row-focus-recovery.d.ts

@@ -0,0 +1,19 @@
+import { Row, RowData, Table, TableFeatures } from "@tanstack/react-table";
+import React from "react";
+//#region src/components/data-table/body/use-data-table-row-focus-recovery.d.ts
+/**
+ * Devolve o foco a uma linha quando a que o tinha sai do corpo: apagada, de outra página,
+ * filtrada ou movida pela ordenação. Sem isto, o foco cai no `body`, e o teclado perde a tabela.
+ *
+ * O foco vai para a linha ativa, se ela continua no corpo; senão, para a que ficou na posição da
+ * que saiu, ou para a última. Com o foco fora da tabela, nada muda. Só com `activeRowFeature`.
+ *
+ * Devolve o ref e os handlers de foco do elemento do corpo.
+ */
+export declare const useDataTableRowFocusRecovery: <TFeatures extends TableFeatures, TData extends RowData>(table: Table<TFeatures, TData>, rows: Row<TFeatures, TData>[]) => {
+  ref: React.RefObject<HTMLDivElement | null>;
+  onFocus: (event: React.FocusEvent<HTMLDivElement>) => void;
+  onBlur: (event: React.FocusEvent<HTMLDivElement>) => void;
+};
+//#endregion
+//# sourceMappingURL=use-data-table-row-focus-recovery.d.ts.map

package/dist/components/data-table/body/use-data-table-row-focus-recovery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-data-table-row-focus-recovery.d.ts","names":[],"sources":["../../../../src/components/data-table/body/use-data-table-row-focus-recovery.ts"],"mappings":";;;;;;;;;;;;qBAkBa,+BACX,kBAAkB,eAClB,cAAc,SAEd,OAAO,MAAM,WAAW,QACxB,MAAM,IAAI,WAAW;;EAQG,UAAA,OAAA,MAAM,WAAW;EAUlB,SAAA,OAAA,MAAM,WAAW"}

package/dist/components/data-table/body/use-data-table-row-focus-recovery.js

@@ -0,0 +1,64 @@
+import { hasTableFeature } from "../../../utils/has-feature.js";
+import { focusDataTableRow, getDataTableRowElements } from "./data-table-row-focus.js";
+import { useLayoutEffect, useRef } from "react";
+//#region src/components/data-table/body/use-data-table-row-focus-recovery.ts
+/**
+* Devolve o foco a uma linha quando a que o tinha sai do corpo: apagada, de outra página,
+* filtrada ou movida pela ordenação. Sem isto, o foco cai no `body`, e o teclado perde a tabela.
+*
+* O foco vai para a linha ativa, se ela continua no corpo; senão, para a que ficou na posição da
+* que saiu, ou para a última. Com o foco fora da tabela, nada muda. Só com `activeRowFeature`.
+*
+* Devolve o ref e os handlers de foco do elemento do corpo.
+*/
+const useDataTableRowFocusRecovery = (table, rows) => {
+	/** O elemento do corpo. */
+	const ref = useRef(null);
+	/** Se o foco está numa linha daqui, e a posição dela, gravados a cada foco recebido. */
+	const focusRef = useRef({
+		isInside: false,
+		index: 0
+	});
+	const onFocus = (event) => {
+		const rowElement = event.target.closest("[role=\"row\"]");
+		const index = rowElement instanceof HTMLElement ? getDataTableRowElements(event.currentTarget).indexOf(rowElement) : -1;
+		focusRef.current = {
+			isInside: true,
+			index: Math.max(index, 0)
+		};
+	};
+	const onBlur = (event) => {
+		if (event.relatedTarget && event.currentTarget.contains(event.relatedTarget)) return;
+		/**
+		* O Chrome também avisa a saída quando a linha com foco é removida, antes de tirá-la do DOM.
+		* Só depois do commit dá para separar: se o efeito abaixo devolveu o foco, ele não saiu.
+		*/
+		queueMicrotask(() => {
+			focusRef.current.isInside = Boolean(ref.current?.contains(document.activeElement));
+		});
+	};
+	/**
+	* Depois de cada mudança das linhas, já com o DOM atualizado. Layout effect, e não effect, para
+	* o foco voltar antes da pintura.
+	*/
+	useLayoutEffect(() => {
+		const element = ref.current;
+		const { activeElement } = document;
+		if (!(element && focusRef.current.isInside) || activeElement && activeElement !== document.body || !hasTableFeature(table, "activeRowFeature")) return;
+		const rowElements = getDataTableRowElements(element);
+		const activeRowId = table.getActiveRow()?.id;
+		const activeIndex = rows.findIndex((row) => row.id === activeRowId);
+		const targetRow = rowElements[activeIndex >= 0 ? activeIndex : Math.min(focusRef.current.index, rowElements.length - 1)];
+		if (targetRow) focusDataTableRow(targetRow);
+		else focusRef.current.isInside = false;
+	}, [table, rows]);
+	return {
+		ref,
+		onFocus,
+		onBlur
+	};
+};
+//#endregion
+export { useDataTableRowFocusRecovery };
+
+//# sourceMappingURL=use-data-table-row-focus-recovery.js.map

package/dist/components/data-table/body/use-data-table-row-focus-recovery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-data-table-row-focus-recovery.js","names":[],"sources":["../../../../src/components/data-table/body/use-data-table-row-focus-recovery.ts"],"sourcesContent":["import type { Row, RowData, Table, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport { useLayoutEffect, useRef } from 'react';\nimport { hasTableFeature } from '../../../utils';\nimport {\n  focusDataTableRow,\n  getDataTableRowElements,\n} from './data-table-row-focus';\n\n/**\n * Devolve o foco a uma linha quando a que o tinha sai do corpo: apagada, de outra página,\n * filtrada ou movida pela ordenação. Sem isto, o foco cai no `body`, e o teclado perde a tabela.\n *\n * O foco vai para a linha ativa, se ela continua no corpo; senão, para a que ficou na posição da\n * que saiu, ou para a última. Com o foco fora da tabela, nada muda. Só com `activeRowFeature`.\n *\n * Devolve o ref e os handlers de foco do elemento do corpo.\n */\nexport const useDataTableRowFocusRecovery = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  table: Table<TFeatures, TData>,\n  rows: Row<TFeatures, TData>[],\n) => {\n  /** O elemento do corpo. */\n  const ref = useRef<HTMLDivElement | null>(null);\n\n  /** Se o foco está numa linha daqui, e a posição dela, gravados a cada foco recebido. */\n  const focusRef = useRef({ isInside: false, index: 0 });\n\n  const onFocus = (event: React.FocusEvent<HTMLDivElement>) => {\n    const rowElement = event.target.closest('[role=\"row\"]');\n    const index =\n      rowElement instanceof HTMLElement\n        ? getDataTableRowElements(event.currentTarget).indexOf(rowElement)\n        : -1;\n\n    focusRef.current = { isInside: true, index: Math.max(index, 0) };\n  };\n\n  const onBlur = (event: React.FocusEvent<HTMLDivElement>) => {\n    if (\n      event.relatedTarget &&\n      event.currentTarget.contains(event.relatedTarget)\n    ) {\n      return;\n    }\n\n    /**\n     * O Chrome também avisa a saída quando a linha com foco é removida, antes de tirá-la do DOM.\n     * Só depois do commit dá para separar: se o efeito abaixo devolveu o foco, ele não saiu.\n     */\n    queueMicrotask(() => {\n      focusRef.current.isInside = Boolean(\n        ref.current?.contains(document.activeElement),\n      );\n    });\n  };\n\n  /**\n   * Depois de cada mudança das linhas, já com o DOM atualizado. Layout effect, e não effect, para\n   * o foco voltar antes da pintura.\n   */\n  useLayoutEffect(() => {\n    const element = ref.current;\n    const { activeElement } = document;\n\n    if (\n      !(element && focusRef.current.isInside) ||\n      (activeElement && activeElement !== document.body) ||\n      !hasTableFeature(table, 'activeRowFeature')\n    ) {\n      return;\n    }\n\n    const rowElements = getDataTableRowElements(element);\n    const activeRowId = table.getActiveRow()?.id;\n    const activeIndex = rows.findIndex((row) => row.id === activeRowId);\n    const targetRow =\n      rowElements[\n        activeIndex >= 0\n          ? activeIndex\n          : Math.min(focusRef.current.index, rowElements.length - 1)\n      ];\n\n    if (targetRow) {\n      focusDataTableRow(targetRow);\n    } else {\n      focusRef.current.isInside = false;\n    }\n  }, [table, rows]);\n\n  return { ref, onFocus, onBlur };\n};\n"],"mappings":";;;;;;;;;;;;;AAkBA,MAAa,gCAIX,OACA,SACG;;CAEH,MAAM,MAAM,OAA8B,IAAI;;CAG9C,MAAM,WAAW,OAAO;EAAE,UAAU;EAAO,OAAO;CAAE,CAAC;CAErD,MAAM,WAAW,UAA4C;EAC3D,MAAM,aAAa,MAAM,OAAO,QAAQ,gBAAc;EACtD,MAAM,QACJ,sBAAsB,cAClB,wBAAwB,MAAM,aAAa,CAAC,CAAC,QAAQ,UAAU,IAC/D;EAEN,SAAS,UAAU;GAAE,UAAU;GAAM,OAAO,KAAK,IAAI,OAAO,CAAC;EAAE;CACjE;CAEA,MAAM,UAAU,UAA4C;EAC1D,IACE,MAAM,iBACN,MAAM,cAAc,SAAS,MAAM,aAAa,GAEhD;;;;;EAOF,qBAAqB;GACnB,SAAS,QAAQ,WAAW,QAC1B,IAAI,SAAS,SAAS,SAAS,aAAa,CAC9C;EACF,CAAC;CACH;;;;;CAMA,sBAAsB;EACpB,MAAM,UAAU,IAAI;EACpB,MAAM,EAAE,kBAAkB;EAE1B,IACE,EAAE,WAAW,SAAS,QAAQ,aAC7B,iBAAiB,kBAAkB,SAAS,QAC7C,CAAC,gBAAgB,OAAO,kBAAkB,GAE1C;EAGF,MAAM,cAAc,wBAAwB,OAAO;EACnD,MAAM,cAAc,MAAM,aAAa,CAAC,EAAE;EAC1C,MAAM,cAAc,KAAK,WAAW,QAAQ,IAAI,OAAO,WAAW;EAClE,MAAM,YACJ,YACE,eAAe,IACX,cACA,KAAK,IAAI,SAAS,QAAQ,OAAO,YAAY,SAAS,CAAC;EAG/D,IAAI,WACF,kBAAkB,SAAS;OAE3B,SAAS,QAAQ,WAAW;CAEhC,GAAG,CAAC,OAAO,IAAI,CAAC;CAEhB,OAAO;EAAE;EAAK;EAAS;CAAO;AAChC"}

package/dist/components/data-table/header/data-table-header-button.d.ts

@@ -0,0 +1,25 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/data-table/header/data-table-header-button.d.ts
+export type DataTableHeaderButtonProps = useRender.ComponentProps<'button'>;
+/**
+ * O botão do tamanho da célula do header, sem ação: a base do `DataTable.SortTrigger` e de outros
+ * gatilhos do header, como o de um popover da coluna. Ocupa a `DataTable.HeaderCell` inteira; nas
+ * bordas, a área de agarre do `DataTable.ResizeHandle` fica por cima. Alinha o conteúdo pelo
+ * `data-align` da `DataTable.HeaderCell`, sem precisar do header.
+ *
+ * @example
+ * ```tsx
+ * <Popover.Root>
+ *   <Popover.Trigger render={<DataTable.HeaderButton />}>
+ *     <DataTable.HeaderContent header={header} />
+ *   </Popover.Trigger>
+ *   …
+ * </Popover.Root>
+ * ```
+ */
+export declare const DataTableHeaderButton: {
+  (props: DataTableHeaderButtonProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-header-button.d.ts.map

package/dist/components/data-table/header/data-table-header-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-header-button.d.ts","names":[],"sources":["../../../../src/components/data-table/header/data-table-header-button.tsx"],"mappings":";;YAGY,6BAA6B,UAAU;;;;;;;;;;;;;;;;;qBAkBtC;GAAgC,OAAA,6CAA0B,+CAAA"}

package/dist/components/data-table/header/data-table-header-button.js

@@ -0,0 +1,57 @@
+import { mergeProps, useRender } from "@base-ui/react";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+//#region src/components/data-table/header/data-table-header-button.tsx
+/**
+* O botão do tamanho da célula do header, sem ação: a base do `DataTable.SortTrigger` e de outros
+* gatilhos do header, como o de um popover da coluna. Ocupa a `DataTable.HeaderCell` inteira; nas
+* bordas, a área de agarre do `DataTable.ResizeHandle` fica por cima. Alinha o conteúdo pelo
+* `data-align` da `DataTable.HeaderCell`, sem precisar do header.
+*
+* @example
+* ```tsx
+* <Popover.Root>
+*   <Popover.Trigger render={<DataTable.HeaderButton />}>
+*     <DataTable.HeaderContent header={header} />
+*   </Popover.Trigger>
+*   …
+* </Popover.Root>
+* ```
+*/
+const DataTableHeaderButton = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "DataTable.HeaderButton",
+		type: render === void 0 ? "button" : void 0,
+		className: mergeTwClassNames([
+			"flex-1",
+			"self-stretch",
+			"min-w-0",
+			"-mx-(--data-table-cell-padding)",
+			"px-(--data-table-cell-padding)",
+			"flex",
+			"items-center",
+			"gap-1",
+			"in-data-[align=center]:justify-center",
+			"in-data-[align=end]:[justify-content:end]",
+			"text-start",
+			"enabled:cursor-pointer",
+			"enabled:hover:bg-gray-3",
+			"enabled:hover:transition-[background-color]",
+			"enabled:hover:ease-in",
+			"enabled:hover:duration-150",
+			"focus-ring-outside",
+			"[--focus-ring-offset:-2px]",
+			"ring-gray-12"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "button",
+		props: mergeProps(baseProps, rest)
+	});
+};
+DataTableHeaderButton.displayName = "DataTable.HeaderButton";
+//#endregion
+export { DataTableHeaderButton };
+
+//# sourceMappingURL=data-table-header-button.js.map

package/dist/components/data-table/header/data-table-header-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-header-button.js","names":[],"sources":["../../../../src/components/data-table/header/data-table-header-button.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\n\nexport type DataTableHeaderButtonProps = useRender.ComponentProps<'button'>;\n\n/**\n * O botão do tamanho da célula do header, sem ação: a base do `DataTable.SortTrigger` e de outros\n * gatilhos do header, como o de um popover da coluna. Ocupa a `DataTable.HeaderCell` inteira; nas\n * bordas, a área de agarre do `DataTable.ResizeHandle` fica por cima. Alinha o conteúdo pelo\n * `data-align` da `DataTable.HeaderCell`, sem precisar do header.\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger render={<DataTable.HeaderButton />}>\n *     <DataTable.HeaderContent header={header} />\n *   </Popover.Trigger>\n *   …\n * </Popover.Root>\n * ```\n */\nexport const DataTableHeaderButton = (props: DataTableHeaderButtonProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'DataTable.HeaderButton',\n    // Só no `button` padrão: com `render`, o elemento é de quem passou, como o `span` do\n    // `DataTable.SortTrigger` numa coluna que não ordena.\n    type: render === undefined ? 'button' : undefined,\n    className: mergeTwClassNames(\n      [\n        // A célula inteira, com um padding só: sai do padding da `DataTable.HeaderCell` pela\n        // margem negativa e põe o mesmo por dentro. O texto fica na linha do texto das células,\n        // em qualquer densidade.\n        'flex-1',\n        'self-stretch',\n        'min-w-0',\n        '-mx-(--data-table-cell-padding)',\n        'px-(--data-table-cell-padding)',\n\n        'flex',\n        'items-center',\n        'gap-1',\n        // Pelo `data-align` da `DataTable.HeaderCell`. `end`, e não o `flex-end` do\n        // `justify-end`: segue o fim da linha mesmo com a ordem invertida (`flex-row-reverse`).\n        'in-data-[align=center]:justify-center',\n        'in-data-[align=end]:[justify-content:end]',\n\n        // O `text-align: center` do botão centralizaria o texto truncado.\n        'text-start',\n\n        // `:enabled` só casa com o botão: um `span` fica de fora. O fundo do hover sobe um passo do\n        // `gray-2` do cabeçalho, a mesma cor do hover da linha; o texto não muda. A transição só\n        // durante o hover, como no `Button` do `ui`.\n        'enabled:cursor-pointer',\n        'enabled:hover:bg-gray-3',\n        'enabled:hover:transition-[background-color]',\n        'enabled:hover:ease-in',\n        'enabled:hover:duration-150',\n\n        // Por dentro: a célula vizinha pinta depois e cobriria um anel por fora.\n        'focus-ring-outside',\n        '[--focus-ring-offset:-2px]',\n        'ring-gray-12',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'button',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTableHeaderButton.displayName = 'DataTable.HeaderButton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqBA,MAAa,yBAAyB,UAAsC;CAC1E,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAGlB,MAAM,WAAW,KAAA,IAAY,WAAW,KAAA;EACxC,WAAW,kBACT;GAIE;GACA;GACA;GACA;GACA;GAEA;GACA;GACA;GAGA;GACA;GAGA;GAKA;GACA;GACA;GACA;GACA;GAGA;GACA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,sBAAsB,cAAc"}

package/dist/components/data-table/header/data-table-header-cell.d.ts

@@ -0,0 +1,34 @@
+import { Header, RowData, TableFeatures } from "@tanstack/react-table";
+import { useRender } from "@base-ui/react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/data-table/header/data-table-header-cell.d.ts
+export type DataTableHeaderCellProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'div'>, {
+  /** O header da coluna. */
+  header: Header<TFeatures, TData>;
+}>;
+/**
+ * A célula de um header (`role="columnheader"`). Num header de grupo, ocupa as colunas que o
+ * grupo abrange; num placeholder, fica vazia e marcada com `data-placeholder`.
+ *
+ * Com `rowSortingFeature`, marca a direção da ordenação em `aria-sort` e `data-sorted`. Com
+ * `columnAlignmentFeature`, alinha o conteúdo pelo `align` da coluna e o marca em `data-align`.
+ * Com `columnPinningFeature`, num header fixado, gruda na borda do lado dele, marcado com
+ * `data-pinned`.
+ *
+ * Sem `children`, mostra o `DataTable.HeaderContent`. Com eles, monte o conteúdo, o
+ * `DataTable.HeaderContent` incluso, e o `DataTable.ResizeHandle`, que se ancora na borda daqui.
+ *
+ * @example
+ * ```tsx
+ * <DataTable.HeaderCell header={header}>
+ *   <DataTable.HeaderContent header={header} />
+ *   <DataTable.ResizeHandle header={header} />
+ * </DataTable.HeaderCell>
+ * ```
+ */
+export declare const DataTableHeaderCell: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableHeaderCellProps<TFeatures, TData>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-header-cell.d.ts.map

package/dist/components/data-table/header/data-table-header-cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-header-cell.d.ts","names":[],"sources":["../../../../src/components/data-table/header/data-table-header-cell.tsx"],"mappings":";;;;YAYY,yBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,QAAQ,OAAO,WAAW;;;;;;;;;;;;;;;;;;;;;;qBAwBjB;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,yBAAyB,WAAW,yBAAM,+CAAA"}

package/dist/components/data-table/header/data-table-header-cell.js

@@ -0,0 +1,97 @@
+import { hasColumnFeature, hasHeaderFeature } from "../../../utils/has-feature.js";
+import { getDataTableColumnPinning, getDataTablePinnedStyle } from "../root/get-data-table-column-pinning.js";
+import { DataTableHeaderContent } from "./data-table-header-content.js";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps, useRender } from "@base-ui/react";
+import { useSelector } from "@tanstack/react-store";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+//#region src/components/data-table/header/data-table-header-cell.tsx
+/**
+* A célula de um header (`role="columnheader"`). Num header de grupo, ocupa as colunas que o
+* grupo abrange; num placeholder, fica vazia e marcada com `data-placeholder`.
+*
+* Com `rowSortingFeature`, marca a direção da ordenação em `aria-sort` e `data-sorted`. Com
+* `columnAlignmentFeature`, alinha o conteúdo pelo `align` da coluna e o marca em `data-align`.
+* Com `columnPinningFeature`, num header fixado, gruda na borda do lado dele, marcado com
+* `data-pinned`.
+*
+* Sem `children`, mostra o `DataTable.HeaderContent`. Com eles, monte o conteúdo, o
+* `DataTable.HeaderContent` incluso, e o `DataTable.ResizeHandle`, que se ancora na borda daqui.
+*
+* @example
+* ```tsx
+* <DataTable.HeaderCell header={header}>
+*   <DataTable.HeaderContent header={header} />
+*   <DataTable.ResizeHandle header={header} />
+* </DataTable.HeaderCell>
+* ```
+*/
+const DataTableHeaderCell = (props) => {
+	const { header, render, className, children, ...rest } = props;
+	/**
+	* Só re-renderiza quando a ordenação desta coluna muda. A ordenação é opcional, então assina o
+	* store, e o guard estreita o header; sem `rowSortingFeature`, fica `false`.
+	*/
+	const sorted = useSelector(header.column.table.store, () => hasHeaderFeature(header, "rowSortingFeature") ? header.column.getIsSorted() : false);
+	/**
+	* Sem assinatura: o alinhamento vem da definição da coluna, que não muda em runtime. Num grupo,
+	* é o da definição do grupo.
+	*/
+	const align = hasColumnFeature(header.column, "columnAlignmentFeature") ? header.column.getAlign() : void 0;
+	/**
+	* A fixação vem da coluna folha da ponta: a primeira, no início, e a última, no fim, com o
+	* deslocamento dela. Num grupo, o `getIsPinned()` diz fixado se qualquer folha for, e só a folha
+	* da ponta sabe o lado e o lugar. Sem assinatura: o pinning muda os grupos, e o
+	* `DataTable.Header` re-renderiza, com o header junto.
+	*/
+	const leafHeaders = header.getLeafHeaders().filter((leafHeader) => leafHeader.subHeaders.length === 0);
+	const startPinning = getDataTableColumnPinning((leafHeaders.at(0) ?? header).column);
+	const pinning = startPinning.position === "start" ? startPinning : getDataTableColumnPinning((leafHeaders.at(-1) ?? header).column);
+	const isGroup = header.colSpan > 1;
+	const baseProps = {
+		"data-component": "DataTable.HeaderCell",
+		"data-placeholder": header.isPlaceholder ? "" : void 0,
+		"data-sorted": sorted || void 0,
+		"data-align": align,
+		"data-pinned": pinning.position || void 0,
+		role: "columnheader",
+		"aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0,
+		"aria-colspan": isGroup ? header.colSpan : void 0,
+		style: {
+			gridColumn: isGroup ? `span ${header.colSpan}` : void 0,
+			...getDataTablePinnedStyle(pinning)
+		},
+		className: mergeTwClassNames([
+			"relative",
+			"flex",
+			"items-center",
+			"gap-1",
+			"data-[align=center]:justify-center",
+			"data-[align=end]:justify-end",
+			"min-w-0",
+			"h-(--data-table-header-height)",
+			"px-(--data-table-cell-padding)",
+			"data-pinned:sticky",
+			"data-pinned:z-20",
+			"data-[pinned=start]:has-[+:not([data-pinned=start])]:shadow-[6px_0_8px_-6px_rgb(0_0_0/0.12)]",
+			"dark:data-[pinned=start]:has-[+:not([data-pinned=start])]:shadow-[6px_0_8px_-6px_rgb(0_0_0/0.8)]",
+			"data-[pinned=end]:not-[[data-pinned=end]+*]:shadow-[-6px_0_8px_-6px_rgb(0_0_0/0.12)]",
+			"dark:data-[pinned=end]:not-[[data-pinned=end]+*]:shadow-[-6px_0_8px_-6px_rgb(0_0_0/0.8)]",
+			"bg-gray-2",
+			"text-xs",
+			"font-medium",
+			"text-gray-11"
+		], className),
+		children: children === void 0 ? /* @__PURE__ */ jsx(DataTableHeaderContent, { header }) : children
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+DataTableHeaderCell.displayName = "DataTable.HeaderCell";
+//#endregion
+export { DataTableHeaderCell };
+
+//# sourceMappingURL=data-table-header-cell.js.map

package/dist/components/data-table/header/data-table-header-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-header-cell.js","names":[],"sources":["../../../../src/components/data-table/header/data-table-header-cell.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { Header, RowData, TableFeatures } from '@tanstack/react-table';\nimport { hasColumnFeature, hasHeaderFeature } from '../../../utils';\nimport {\n  getDataTableColumnPinning,\n  getDataTablePinnedStyle,\n} from '../root/get-data-table-column-pinning';\nimport { DataTableHeaderContent } from './data-table-header-content';\n\nexport type DataTableHeaderCellProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  {\n    /** O header da coluna. */\n    header: Header<TFeatures, TData>;\n  }\n>;\n\n/**\n * A célula de um header (`role=\"columnheader\"`). Num header de grupo, ocupa as colunas que o\n * grupo abrange; num placeholder, fica vazia e marcada com `data-placeholder`.\n *\n * Com `rowSortingFeature`, marca a direção da ordenação em `aria-sort` e `data-sorted`. Com\n * `columnAlignmentFeature`, alinha o conteúdo pelo `align` da coluna e o marca em `data-align`.\n * Com `columnPinningFeature`, num header fixado, gruda na borda do lado dele, marcado com\n * `data-pinned`.\n *\n * Sem `children`, mostra o `DataTable.HeaderContent`. Com eles, monte o conteúdo, o\n * `DataTable.HeaderContent` incluso, e o `DataTable.ResizeHandle`, que se ancora na borda daqui.\n *\n * @example\n * ```tsx\n * <DataTable.HeaderCell header={header}>\n *   <DataTable.HeaderContent header={header} />\n *   <DataTable.ResizeHandle header={header} />\n * </DataTable.HeaderCell>\n * ```\n */\nexport const DataTableHeaderCell = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableHeaderCellProps<TFeatures, TData>,\n) => {\n  const { header, render, className, children, ...rest } = props;\n\n  /**\n   * Só re-renderiza quando a ordenação desta coluna muda. A ordenação é opcional, então assina o\n   * store, e o guard estreita o header; sem `rowSortingFeature`, fica `false`.\n   */\n  const sorted = useSelector(header.column.table.store, () =>\n    hasHeaderFeature(header, 'rowSortingFeature')\n      ? header.column.getIsSorted()\n      : false,\n  );\n\n  /**\n   * Sem assinatura: o alinhamento vem da definição da coluna, que não muda em runtime. Num grupo,\n   * é o da definição do grupo.\n   */\n  const align = hasColumnFeature(header.column, 'columnAlignmentFeature')\n    ? header.column.getAlign()\n    : undefined;\n\n  /**\n   * A fixação vem da coluna folha da ponta: a primeira, no início, e a última, no fim, com o\n   * deslocamento dela. Num grupo, o `getIsPinned()` diz fixado se qualquer folha for, e só a folha\n   * da ponta sabe o lado e o lugar. Sem assinatura: o pinning muda os grupos, e o\n   * `DataTable.Header` re-renderiza, com o header junto.\n   */\n  const leafHeaders = header\n    .getLeafHeaders()\n    .filter((leafHeader) => leafHeader.subHeaders.length === 0);\n  const startPinning = getDataTableColumnPinning(\n    (leafHeaders.at(0) ?? header).column,\n  );\n  const pinning =\n    startPinning.position === 'start'\n      ? startPinning\n      : getDataTableColumnPinning((leafHeaders.at(-1) ?? header).column);\n\n  const isGroup = header.colSpan > 1;\n\n  const baseProps = {\n    'data-component': 'DataTable.HeaderCell',\n    'data-placeholder': header.isPlaceholder ? '' : undefined,\n    'data-sorted': sorted || undefined,\n    'data-align': align,\n    'data-pinned': pinning.position || undefined,\n    role: 'columnheader',\n    'aria-sort':\n      sorted === 'asc'\n        ? 'ascending'\n        : sorted === 'desc'\n          ? 'descending'\n          : undefined,\n    'aria-colspan': isGroup ? header.colSpan : undefined,\n    style: {\n      // Os tracks do grid são os das colunas folha: o grupo abrange os das colunas dele.\n      gridColumn: isGroup ? `span ${header.colSpan}` : undefined,\n      ...getDataTablePinnedStyle(pinning),\n    },\n    className: mergeTwClassNames(\n      [\n        // O `DataTable.ResizeHandle` se posiciona por aqui.\n        'relative',\n\n        'flex',\n        'items-center',\n        'gap-1',\n        // Vale para o conteúdo solto. O `DataTable.HeaderButton` ocupa a célula e segue o\n        // `data-align` daqui por conta própria.\n        'data-[align=center]:justify-center',\n        'data-[align=end]:justify-end',\n\n        // Item de grid tem `min-width: auto`: sem isto, um conteúdo longo alarga o track, e a\n        // coluna deixa de bater com o template. Sem `overflow-hidden`: quem trunca é o\n        // `DataTable.HeaderContent`, e o recorte aqui cortaria a área de agarre do handle.\n        'min-w-0',\n\n        // Do `DataTable.Root`, pela densidade.\n        'h-(--data-table-header-height)',\n\n        'px-(--data-table-cell-padding)',\n\n        // Fixado: gruda acima dos handles de resize das colunas do centro (`z-10`), que passam por\n        // baixo dele.\n        'data-pinned:sticky',\n        'data-pinned:z-20',\n        // A sombra na borda da fixada, como na `DataTable.Cell`.\n        'data-[pinned=start]:has-[+:not([data-pinned=start])]:shadow-[6px_0_8px_-6px_rgb(0_0_0/0.12)]',\n        'dark:data-[pinned=start]:has-[+:not([data-pinned=start])]:shadow-[6px_0_8px_-6px_rgb(0_0_0/0.8)]',\n        'data-[pinned=end]:not-[[data-pinned=end]+*]:shadow-[-6px_0_8px_-6px_rgb(0_0_0/0.12)]',\n        'dark:data-[pinned=end]:not-[[data-pinned=end]+*]:shadow-[-6px_0_8px_-6px_rgb(0_0_0/0.8)]',\n\n        // Opaco: o cabeçalho gruda, e as linhas passam por baixo; fixado, o centro também.\n        'bg-gray-2',\n\n        'text-xs',\n        'font-medium',\n        'text-gray-11',\n      ],\n      className,\n    ),\n    children:\n      children === undefined ? (\n        <DataTableHeaderContent header={header} />\n      ) : (\n        children\n      ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTableHeaderCell.displayName = 'DataTable.HeaderCell';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,uBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,WAAW,UAAU,GAAG,SAAS;;;;;CAMzD,MAAM,SAAS,YAAY,OAAO,OAAO,MAAM,aAC7C,iBAAiB,QAAQ,mBAAmB,IACxC,OAAO,OAAO,YAAY,IAC1B,KACN;;;;;CAMA,MAAM,QAAQ,iBAAiB,OAAO,QAAQ,wBAAwB,IAClE,OAAO,OAAO,SAAS,IACvB,KAAA;;;;;;;CAQJ,MAAM,cAAc,OACjB,eAAe,CAAC,CAChB,QAAQ,eAAe,WAAW,WAAW,WAAW,CAAC;CAC5D,MAAM,eAAe,2BAClB,YAAY,GAAG,CAAC,KAAK,OAAA,CAAQ,MAChC;CACA,MAAM,UACJ,aAAa,aAAa,UACtB,eACA,2BAA2B,YAAY,GAAG,EAAE,KAAK,OAAA,CAAQ,MAAM;CAErE,MAAM,UAAU,OAAO,UAAU;CAEjC,MAAM,YAAY;EAChB,kBAAkB;EAClB,oBAAoB,OAAO,gBAAgB,KAAK,KAAA;EAChD,eAAe,UAAU,KAAA;EACzB,cAAc;EACd,eAAe,QAAQ,YAAY,KAAA;EACnC,MAAM;EACN,aACE,WAAW,QACP,cACA,WAAW,SACT,eACA,KAAA;EACR,gBAAgB,UAAU,OAAO,UAAU,KAAA;EAC3C,OAAO;GAEL,YAAY,UAAU,QAAQ,OAAO,YAAY,KAAA;GACjD,GAAG,wBAAwB,OAAO;EACpC;EACA,WAAW,kBACT;GAEE;GAEA;GACA;GACA;GAGA;GACA;GAKA;GAGA;GAEA;GAIA;GACA;GAEA;GACA;GACA;GACA;GAGA;GAEA;GACA;GACA;EACF,GACA,SACF;EACA,UACE,aAAa,KAAA,IACX,oBAAC,wBAAD,EAAgC,OAAS,CAAA,IAEzC;CAEN;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,oBAAoB,cAAc"}

package/dist/components/data-table/header/data-table-header-content.d.ts

@@ -0,0 +1,21 @@
+import { Header, RowData, TableFeatures } from "@tanstack/react-table";
+import { useRender } from "@base-ui/react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/data-table/header/data-table-header-content.d.ts
+export type DataTableHeaderContentProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'span'>, {
+  /** O header da coluna. */
+  header: Header<TFeatures, TData>;
+}>;
+/**
+ * O conteúdo do header: o `header` da definição da coluna, truncado com reticências. Num header
+ * placeholder, fica vazio. Com `children`, eles substituem o da definição.
+ *
+ * Existe à parte porque o `DataTable.HeaderCell` não pode recortar: a área de agarre do
+ * `DataTable.ResizeHandle` passa da borda dele, e conteúdo recortado não recebe clique.
+ */
+export declare const DataTableHeaderContent: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableHeaderContentProps<TFeatures, TData>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-header-content.d.ts.map

package/dist/components/data-table/header/data-table-header-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-header-content.d.ts","names":[],"sources":["../../../../src/components/data-table/header/data-table-header-content.tsx"],"mappings":";;;;YAUY,4BACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,QAAQ,OAAO,WAAW;;;;;;;;;qBAWjB;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,4BAA4B,WAAW,yBAAM,+CAAA"}

package/dist/components/data-table/header/data-table-header-content.js

@@ -0,0 +1,37 @@
+import { FlexRender } from "@tanstack/react-table";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps, useRender } from "@base-ui/react";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+//#region src/components/data-table/header/data-table-header-content.tsx
+/**
+* O conteúdo do header: o `header` da definição da coluna, truncado com reticências. Num header
+* placeholder, fica vazio. Com `children`, eles substituem o da definição.
+*
+* Existe à parte porque o `DataTable.HeaderCell` não pode recortar: a área de agarre do
+* `DataTable.ResizeHandle` passa da borda dele, e conteúdo recortado não recebe clique.
+*/
+const DataTableHeaderContent = (props) => {
+	const { header, render, className, children, ...rest } = props;
+	const content = header.isPlaceholder ? null : /* @__PURE__ */ jsx(FlexRender, { header });
+	const baseProps = {
+		"data-component": "DataTable.HeaderContent",
+		className: mergeTwClassNames([
+			"block",
+			"min-w-0",
+			"truncate",
+			"-m-1",
+			"p-1"
+		], className),
+		children: children === void 0 ? content : children
+	};
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, rest)
+	});
+};
+DataTableHeaderContent.displayName = "DataTable.HeaderContent";
+//#endregion
+export { DataTableHeaderContent };
+
+//# sourceMappingURL=data-table-header-content.js.map

package/dist/components/data-table/header/data-table-header-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-header-content.js","names":[],"sources":["../../../../src/components/data-table/header/data-table-header-content.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport {\n  FlexRender,\n  type Header,\n  type RowData,\n  type TableFeatures,\n} from '@tanstack/react-table';\n\nexport type DataTableHeaderContentProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'span'>,\n  {\n    /** O header da coluna. */\n    header: Header<TFeatures, TData>;\n  }\n>;\n\n/**\n * O conteúdo do header: o `header` da definição da coluna, truncado com reticências. Num header\n * placeholder, fica vazio. Com `children`, eles substituem o da definição.\n *\n * Existe à parte porque o `DataTable.HeaderCell` não pode recortar: a área de agarre do\n * `DataTable.ResizeHandle` passa da borda dele, e conteúdo recortado não recebe clique.\n */\nexport const DataTableHeaderContent = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableHeaderContentProps<TFeatures, TData>,\n) => {\n  const { header, render, className, children, ...rest } = props;\n\n  const content = header.isPlaceholder ? null : <FlexRender header={header} />;\n\n  const baseProps = {\n    'data-component': 'DataTable.HeaderContent',\n    className: mergeTwClassNames(\n      [\n        // `span` em bloco: trunca como um bloco e ainda cabe num botão, que só aceita conteúdo\n        // inline.\n        'block',\n        'min-w-0',\n        'truncate',\n\n        // Afasta a borda do recorte 4px sem mover o conteúdo: cabe o anel de foco de um\n        // controle aqui dentro, como o \"selecionar tudo\".\n        '-m-1',\n        'p-1',\n      ],\n      className,\n    ),\n    children: children === undefined ? content : children,\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTableHeaderContent.displayName = 'DataTable.HeaderContent';\n"],"mappings":";;;;;;;;;;;;AA4BA,MAAa,0BAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEzD,MAAM,UAAU,OAAO,gBAAgB,OAAO,oBAAC,YAAD,EAAoB,OAAS,CAAA;CAE3E,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAGE;GACA;GACA;GAIA;GACA;EACF,GACA,SACF;EACA,UAAU,aAAa,KAAA,IAAY,UAAU;CAC/C;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,uBAAuB,cAAc"}

package/dist/components/data-table/header/data-table-header-row.d.ts

@@ -0,0 +1,15 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/data-table/header/data-table-header-row.d.ts
+export type DataTableHeaderRowProps = useRender.ComponentProps<'div'>;
+/**
+ * Uma linha de headers (`role="row"`), por grupo de headers. É um grid com as colunas do
+ * `--data-table-template`, que o `DataTable.Root` escreve.
+ *
+ * O `DataTable.Header` com render-prop já monta uma por grupo; use direto só no laço feito à mão.
+ */
+export declare const DataTableHeaderRow: {
+  (props: DataTableHeaderRowProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-header-row.d.ts.map

package/dist/components/data-table/header/data-table-header-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-header-row.d.ts","names":[],"sources":["../../../../src/components/data-table/header/data-table-header-row.tsx"],"mappings":";;YAIY,0BAA0B,UAAU;;;;;;;qBAQnC;GAA6B,OAAA,0CAAuB,+CAAA"}