@lucasbernardosn/react-table 0.0.0-stage → 0.1.0

package/dist/components/data-table/body/data-table-body.d.ts

@@ -0,0 +1,58 @@
+import { Row, RowData, Table, TableFeatures } from "@tanstack/react-table";
+import { useRender } from "@base-ui/react";
+import React from "react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/data-table/body/data-table-body.d.ts
+export type DataTableBodyProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'div'>, {
+  /** A tabela do `useTable`. */
+  table: Table<TFeatures, TData>;
+  /**
+   * Uma função que recebe cada linha do row model e devolve o elemento dela. Com nós comuns,
+   * quem usa faz o laço.
+   * @default (row) => <DataTable.Row row={row} />
+   */
+  children?: React.ReactNode | ((row: Row<TFeatures, TData>) => React.ReactNode);
+  /**
+   * Quantas linhas-fantasma o corpo desenha na carga sem linhas, com `loadingFeature`.
+   * @default 10
+   */
+  loadingRowCount?: number;
+}>;
+/**
+ * O corpo da tabela (`role="rowgroup"`).
+ *
+ * Com render-prop ou sem `children`, faz o laço sozinho: assina as linhas do row model e
+ * re-renderiza quando os dados, a ordenação ou a página mudam, sem o dono da tabela precisar
+ * re-renderizar. Com nós comuns, o laço é de quem usa, e o dono precisa re-renderizar quando as
+ * linhas mudam.
+ *
+ * Marca as linhas com `content-visibility: auto`: o que está fora da tela não entra no estilo,
+ * no layout nem na pintura, e o corpo aguenta centenas de linhas sem virtualização. Para
+ * desligar, passe `className="*:[content-visibility:visible]"`.
+ *
+ * Com `activeRowFeature`, quando a linha com foco sai (apagada, de outra página, filtrada), o foco
+ * volta para a linha ativa, se ela ficou, ou para a que tomou o lugar da que saiu.
+ *
+ * Com `rowPaginationFeature`, trocar de página ou de tamanho volta a rolagem vertical ao topo.
+ *
+ * Com `loadingFeature`, fica bloqueado (`inert`) enquanto carrega. Sem linhas, desenha
+ * linhas-fantasma com skeleton (`loadingRowCount`); com linhas, cada célula troca o conteúdo por um
+ * skeleton (ver `DataTable.Root`).
+ *
+ * @example
+ * ```tsx
+ * <DataTable.Body table={table}>
+ *   {(row) => (
+ *     <DataTable.Row row={row}>
+ *       {(cell) => <DataTable.Cell cell={cell} />}
+ *     </DataTable.Row>
+ *   )}
+ * </DataTable.Body>
+ * ```
+ */
+export declare const DataTableBody: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableBodyProps<TFeatures, TData>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-body.d.ts.map

package/dist/components/data-table/body/data-table-body.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-body.d.ts","names":[],"sources":["../../../../src/components/data-table/body/data-table-body.tsx"],"mappings":";;;;;YAgBY,mBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,OAAO,MAAM,WAAW;;;;;;EAMxB,WACI,MAAM,cACJ,KAAK,IAAI,WAAW,WAAW,MAAM;;;;;EAK3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAoCS;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,mBAAmB,WAAW,SAAM,MAAA,+BAAA,MAAA"}

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

@@ -0,0 +1,99 @@
+import { hasTableFeature } from "../../../utils/has-feature.js";
+import { getDataTableLoadingWithoutRows } from "../loading/get-data-table-loading-without-rows.js";
+import { useDataTableLoadingInert } from "../loading/use-data-table-loading-inert.js";
+import { useDataTablePageScrollReset } from "../pagination/use-data-table-page-scroll-reset.js";
+import { DATA_TABLE_GRID_CLASS_NAMES } from "../root/data-table-grid-classes.js";
+import { DataTableRow } from "./data-table-row.js";
+import { useDataTableRowFocusRecovery } from "./use-data-table-row-focus-recovery.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";
+import { Fragment as Fragment$1 } from "react";
+import { Skeleton } from "@lucasbernardosn/react-ui/feedback/skeleton";
+//#region src/components/data-table/body/data-table-body.tsx
+/**
+* O corpo da tabela (`role="rowgroup"`).
+*
+* Com render-prop ou sem `children`, faz o laço sozinho: assina as linhas do row model e
+* re-renderiza quando os dados, a ordenação ou a página mudam, sem o dono da tabela precisar
+* re-renderizar. Com nós comuns, o laço é de quem usa, e o dono precisa re-renderizar quando as
+* linhas mudam.
+*
+* Marca as linhas com `content-visibility: auto`: o que está fora da tela não entra no estilo,
+* no layout nem na pintura, e o corpo aguenta centenas de linhas sem virtualização. Para
+* desligar, passe `className="*:[content-visibility:visible]"`.
+*
+* Com `activeRowFeature`, quando a linha com foco sai (apagada, de outra página, filtrada), o foco
+* volta para a linha ativa, se ela ficou, ou para a que tomou o lugar da que saiu.
+*
+* Com `rowPaginationFeature`, trocar de página ou de tamanho volta a rolagem vertical ao topo.
+*
+* Com `loadingFeature`, fica bloqueado (`inert`) enquanto carrega. Sem linhas, desenha
+* linhas-fantasma com skeleton (`loadingRowCount`); com linhas, cada célula troca o conteúdo por um
+* skeleton (ver `DataTable.Root`).
+*
+* @example
+* ```tsx
+* <DataTable.Body table={table}>
+*   {(row) => (
+*     <DataTable.Row row={row}>
+*       {(cell) => <DataTable.Cell cell={cell} />}
+*     </DataTable.Row>
+*   )}
+* </DataTable.Body>
+* ```
+*/
+const DataTableBody = (props) => {
+	const { table, loadingRowCount = 10, render, className, children, ref, ...rest } = props;
+	/**
+	* Memoizado pelo TanStack: o array só muda com as linhas. Tamanho, colunas e seleção mudam o
+	* store, mas não o row model, e não re-renderizam o corpo.
+	*/
+	const rows = useSelector(table.store, () => table.getRowModel().rows);
+	const focusRecovery = useDataTableRowFocusRecovery(table, rows);
+	useDataTablePageScrollReset(table, focusRecovery.ref);
+	useDataTableLoadingInert(table, focusRecovery.ref);
+	/**
+	* Quantas colunas cada linha-fantasma tem, ou 0 sem elas: só na carga sem linhas. Re-renderiza
+	* quando as linhas-fantasma entram ou saem, ou quando as colunas visíveis mudam durante a carga.
+	*/
+	const ghostColumnCount = useSelector(table.store, () => {
+		if (!getDataTableLoadingWithoutRows(table)) return 0;
+		return hasTableFeature(table, "columnVisibilityFeature") ? table.getVisibleLeafColumns().length : table.getAllLeafColumns().length;
+	});
+	/** 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 ? rows.map((row) => /* @__PURE__ */ jsx(Fragment$1, { children: children === void 0 ? /* @__PURE__ */ jsx(DataTableRow, { row }) : children(row) }, row.id)) : children;
+	/**
+	* Fora da árvore de acessibilidade, que já sabe da espera pelo `aria-busy` do `DataTable.Root`.
+	* A grade é a da `DataTable.Row`, e o espaçamento repete o da `DataTable.Cell`.
+	*/
+	const ghostRows = Array.from({ length: loadingRowCount }, (_, rowIndex) => /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		"data-component": "DataTable.GhostRow",
+		className: mergeTwClassNames([DATA_TABLE_GRID_CLASS_NAMES, "last:border-b-0"]),
+		children: Array.from({ length: ghostColumnCount }, (_, columnIndex) => /* @__PURE__ */ jsx("div", {
+			className: "h-(--data-table-row-height) content-center px-(--data-table-cell-padding)",
+			children: /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-3/4" })
+		}, columnIndex))
+	}, rowIndex));
+	const baseProps = {
+		"data-component": "DataTable.Body",
+		role: "rowgroup",
+		onFocus: focusRecovery.onFocus,
+		onBlur: focusRecovery.onBlur,
+		className: mergeTwClassNames(["*:[content-visibility:auto]", "*:[contain-intrinsic-height:auto_calc(var(--data-table-row-height)+1px)]"], className),
+		children: ghostColumnCount > 0 ? ghostRows : content
+	};
+	return useRender({
+		render,
+		ref: [focusRecovery.ref, ref ?? null],
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+DataTableBody.displayName = "DataTable.Body";
+//#endregion
+export { DataTableBody };
+
+//# sourceMappingURL=data-table-body.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-body.js","names":["Fragment"],"sources":["../../../../src/components/data-table/body/data-table-body.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { Skeleton } from '@lucasbernardosn/react-ui/feedback/skeleton';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { Row, RowData, Table, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport { Fragment } from 'react';\nimport { hasTableFeature } from '../../../utils';\nimport { getDataTableLoadingWithoutRows } from '../loading/get-data-table-loading-without-rows';\nimport { useDataTableLoadingInert } from '../loading/use-data-table-loading-inert';\nimport { useDataTablePageScrollReset } from '../pagination/use-data-table-page-scroll-reset';\nimport { DATA_TABLE_GRID_CLASS_NAMES } from '../root/data-table-grid-classes';\nimport { DataTableRow } from './data-table-row';\nimport { useDataTableRowFocusRecovery } from './use-data-table-row-focus-recovery';\n\nexport type DataTableBodyProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  {\n    /** A tabela do `useTable`. */\n    table: Table<TFeatures, TData>;\n    /**\n     * Uma função que recebe cada linha do row model e devolve o elemento dela. Com nós comuns,\n     * quem usa faz o laço.\n     * @default (row) => <DataTable.Row row={row} />\n     */\n    children?:\n      | React.ReactNode\n      | ((row: Row<TFeatures, TData>) => React.ReactNode);\n    /**\n     * Quantas linhas-fantasma o corpo desenha na carga sem linhas, com `loadingFeature`.\n     * @default 10\n     */\n    loadingRowCount?: number;\n  }\n>;\n\n/**\n * O corpo da tabela (`role=\"rowgroup\"`).\n *\n * Com render-prop ou sem `children`, faz o laço sozinho: assina as linhas do row model e\n * re-renderiza quando os dados, a ordenação ou a página mudam, sem o dono da tabela precisar\n * re-renderizar. Com nós comuns, o laço é de quem usa, e o dono precisa re-renderizar quando as\n * linhas mudam.\n *\n * Marca as linhas com `content-visibility: auto`: o que está fora da tela não entra no estilo,\n * no layout nem na pintura, e o corpo aguenta centenas de linhas sem virtualização. Para\n * desligar, passe `className=\"*:[content-visibility:visible]\"`.\n *\n * Com `activeRowFeature`, quando a linha com foco sai (apagada, de outra página, filtrada), o foco\n * volta para a linha ativa, se ela ficou, ou para a que tomou o lugar da que saiu.\n *\n * Com `rowPaginationFeature`, trocar de página ou de tamanho volta a rolagem vertical ao topo.\n *\n * Com `loadingFeature`, fica bloqueado (`inert`) enquanto carrega. Sem linhas, desenha\n * linhas-fantasma com skeleton (`loadingRowCount`); com linhas, cada célula troca o conteúdo por um\n * skeleton (ver `DataTable.Root`).\n *\n * @example\n * ```tsx\n * <DataTable.Body table={table}>\n *   {(row) => (\n *     <DataTable.Row row={row}>\n *       {(cell) => <DataTable.Cell cell={cell} />}\n *     </DataTable.Row>\n *   )}\n * </DataTable.Body>\n * ```\n */\nexport const DataTableBody = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableBodyProps<TFeatures, TData>,\n) => {\n  const {\n    table,\n    loadingRowCount = 10,\n    render,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props;\n\n  /**\n   * Memoizado pelo TanStack: o array só muda com as linhas. Tamanho, colunas e seleção mudam o\n   * store, mas não o row model, e não re-renderizam o corpo.\n   */\n  const rows = useSelector(table.store, () => table.getRowModel().rows);\n\n  const focusRecovery = useDataTableRowFocusRecovery(table, rows);\n\n  useDataTablePageScrollReset(table, focusRecovery.ref);\n\n  useDataTableLoadingInert(table, focusRecovery.ref);\n\n  /**\n   * Quantas colunas cada linha-fantasma tem, ou 0 sem elas: só na carga sem linhas. Re-renderiza\n   * quando as linhas-fantasma entram ou saem, ou quando as colunas visíveis mudam durante a carga.\n   */\n  const ghostColumnCount = useSelector(table.store, () => {\n    if (!getDataTableLoadingWithoutRows(table)) {\n      return 0;\n    }\n\n    return hasTableFeature(table, 'columnVisibilityFeature')\n      ? table.getVisibleLeafColumns().length\n      : table.getAllLeafColumns().length;\n  });\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      ? rows.map((row) => (\n          <Fragment key={row.id}>\n            {children === undefined ? (\n              <DataTableRow row={row} />\n            ) : (\n              children(row)\n            )}\n          </Fragment>\n        ))\n      : children;\n\n  /**\n   * Fora da árvore de acessibilidade, que já sabe da espera pelo `aria-busy` do `DataTable.Root`.\n   * A grade é a da `DataTable.Row`, e o espaçamento repete o da `DataTable.Cell`.\n   */\n  const ghostRows = Array.from({ length: loadingRowCount }, (_, rowIndex) => (\n    <div\n      key={rowIndex}\n      aria-hidden={true}\n      data-component=\"DataTable.GhostRow\"\n      className={mergeTwClassNames([\n        DATA_TABLE_GRID_CLASS_NAMES,\n        'last:border-b-0',\n      ])}\n    >\n      {Array.from({ length: ghostColumnCount }, (_, columnIndex) => (\n        <div\n          key={columnIndex}\n          className=\"h-(--data-table-row-height) content-center px-(--data-table-cell-padding)\"\n        >\n          <Skeleton className=\"h-3 w-3/4\" />\n        </div>\n      ))}\n    </div>\n  ));\n\n  const baseProps = {\n    'data-component': 'DataTable.Body',\n    role: 'rowgroup',\n    onFocus: focusRecovery.onFocus,\n    onBlur: focusRecovery.onBlur,\n    className: mergeTwClassNames(\n      [\n        // As linhas fora da tela pulam estilo, layout e pintura. Sem isto, cada tick do arrasto\n        // de uma coluna, que reescreve a variável herdada do template no `Root`, recalcula todas\n        // as linhas, e com centenas delas o arrasto trava.\n        '*:[content-visibility:auto]',\n        // A altura de uma linha que ainda não apareceu: a da densidade mais a borda de baixo da\n        // `DataTable.Row`. Com `auto`, a linha que já apareceu guarda a altura medida. Uma\n        // estimativa errada faz a barra de rolagem pular quando as linhas entram na tela.\n        '*:[contain-intrinsic-height:auto_calc(var(--data-table-row-height)+1px)]',\n      ],\n      className,\n    ),\n    children: ghostColumnCount > 0 ? ghostRows : content,\n  };\n\n  return useRender({\n    render,\n    ref: [focusRecovery.ref, ref ?? null],\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTableBody.displayName = 'DataTable.Body';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEA,MAAa,iBAIX,UACG;CACH,MAAM,EACJ,OACA,kBAAkB,IAClB,QACA,WACA,UACA,KACA,GAAG,SACD;;;;;CAMJ,MAAM,OAAO,YAAY,MAAM,aAAa,MAAM,YAAY,CAAC,CAAC,IAAI;CAEpE,MAAM,gBAAgB,6BAA6B,OAAO,IAAI;CAE9D,4BAA4B,OAAO,cAAc,GAAG;CAEpD,yBAAyB,OAAO,cAAc,GAAG;;;;;CAMjD,MAAM,mBAAmB,YAAY,MAAM,aAAa;EACtD,IAAI,CAAC,+BAA+B,KAAK,GACvC,OAAO;EAGT,OAAO,gBAAgB,OAAO,yBAAyB,IACnD,MAAM,sBAAsB,CAAC,CAAC,SAC9B,MAAM,kBAAkB,CAAC,CAAC;CAChC,CAAC;;CAGD,MAAM,UACJ,OAAO,aAAa,cAAc,aAAa,KAAA,IAC3C,KAAK,KAAK,QACR,oBAACA,YAAD,EAAA,UACG,aAAa,KAAA,IACZ,oBAAC,cAAD,EAAmB,IAAM,CAAA,IAEzB,SAAS,GAAG,EAEN,GANK,IAAI,EAMT,CACX,IACD;;;;;CAMN,MAAM,YAAY,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,aAC5D,oBAAC,OAAD;EAEE,eAAa;EACb,kBAAe;EACf,WAAW,kBAAkB,CAC3B,6BACA,iBACF,CAAC;EAEA,UAAA,MAAM,KAAK,EAAE,QAAQ,iBAAiB,IAAI,GAAG,gBAC5C,oBAAC,OAAD;GAEE,WAAU;GAEV,UAAA,oBAAC,UAAD,EAAU,WAAU,YAAa,CAAA;EAC9B,GAJE,WAIF,CACN;CACE,GAhBE,QAgBF,CACN;CAED,MAAM,YAAY;EAChB,kBAAkB;EAClB,MAAM;EACN,SAAS,cAAc;EACvB,QAAQ,cAAc;EACtB,WAAW,kBACT,CAIE,+BAIA,0EACF,GACA,SACF;EACA,UAAU,mBAAmB,IAAI,YAAY;CAC/C;CAEA,OAAO,UAAU;EACf;EACA,KAAK,CAAC,cAAc,KAAK,OAAO,IAAI;EACpC,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,cAAc,cAAc"}

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

@@ -0,0 +1,26 @@
+import { Cell, RowData, TableFeatures } from "@tanstack/react-table";
+import { useRender } from "@base-ui/react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/data-table/body/data-table-cell.d.ts
+export type DataTableCellProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'div'>, {
+  /** A célula da linha. */
+  cell: Cell<TFeatures, TData>;
+}>;
+/**
+ * Uma célula do corpo (`role="cell"`). Sem `children`, mostra o `cell` da definição da coluna;
+ * com eles, mostra os `children`.
+ *
+ * Trunca o texto com reticências. Para arrumar o conteúdo em linha, como texto com ícone, passe
+ * `className="flex items-center gap-2"` e trunque o texto por conta própria.
+ *
+ * Com `columnAlignmentFeature`, alinha o conteúdo pelo `align` da coluna e o marca em
+ * `data-align`. Com `columnPinningFeature`, numa coluna fixada, gruda na borda do lado dela,
+ * marcada com `data-pinned`, e repete o fundo da `DataTable.Row` para cobrir o que rola por
+ * baixo.
+ */
+export declare const DataTableCell: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableCellProps<TFeatures, TData>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-cell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-cell.d.ts","names":[],"sources":["../../../../src/components/data-table/body/data-table-cell.tsx"],"mappings":";;;;YAeY,mBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,MAAM,KAAK,WAAW;;;;;;;;;;;;;;qBAgBb;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,mBAAmB,WAAW,yBAAM,+CAAA"}

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

@@ -0,0 +1,80 @@
+import { hasColumnFeature, hasTableFeature } from "../../../utils/has-feature.js";
+import { getDataTableColumnPinning, getDataTablePinnedStyle } from "../root/get-data-table-column-pinning.js";
+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/body/data-table-cell.tsx
+/**
+* Uma célula do corpo (`role="cell"`). Sem `children`, mostra o `cell` da definição da coluna;
+* com eles, mostra os `children`.
+*
+* Trunca o texto com reticências. Para arrumar o conteúdo em linha, como texto com ícone, passe
+* `className="flex items-center gap-2"` e trunque o texto por conta própria.
+*
+* Com `columnAlignmentFeature`, alinha o conteúdo pelo `align` da coluna e o marca em
+* `data-align`. Com `columnPinningFeature`, numa coluna fixada, gruda na borda do lado dela,
+* marcada com `data-pinned`, e repete o fundo da `DataTable.Row` para cobrir o que rola por
+* baixo.
+*/
+const DataTableCell = (props) => {
+	const { cell, render, className, children, ...rest } = props;
+	/**
+	* Sem assinatura: o alinhamento vem da definição da coluna, que não muda em runtime. Uma troca
+	* das colunas muda as células, e a `DataTable.Row` re-renderiza, com a célula junto.
+	*/
+	const align = hasColumnFeature(cell.column, "columnAlignmentFeature") ? cell.column.getAlign() : void 0;
+	/**
+	* Sem assinatura: o pinning muda as células da linha, e a `DataTable.Row` re-renderiza, com a
+	* célula junto. O deslocamento muda no resize, mas fica na variável que o `DataTable.Root`
+	* escreve.
+	*/
+	const pinning = getDataTableColumnPinning(cell.column);
+	const baseProps = {
+		"data-component": "DataTable.Cell",
+		"data-align": align,
+		"data-pinned": pinning.position || void 0,
+		role: hasTableFeature(cell.table, "activeRowFeature") ? "gridcell" : "cell",
+		style: getDataTablePinnedStyle(pinning),
+		className: mergeTwClassNames([
+			"block",
+			"content-center",
+			"min-w-0",
+			"truncate",
+			"data-[align=center]:text-center",
+			"data-[align=end]:text-end",
+			"h-(--data-table-row-height)",
+			"px-(--data-table-cell-padding)",
+			"data-pinned:sticky",
+			"data-pinned:z-1",
+			"data-pinned:bg-(--data-table-row-background)",
+			"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)]",
+			"text-sm",
+			"in-data-loading:text-[0px]",
+			"in-data-loading:*:hidden",
+			"in-data-loading:before:content-['']",
+			"in-data-loading:before:inline-block",
+			"in-data-loading:before:align-middle",
+			"in-data-loading:before:h-3",
+			"in-data-loading:before:w-3/4",
+			"in-data-loading:before:rounded-md",
+			"in-data-loading:before:corner-squircle",
+			"in-data-loading:before:bg-gray-6",
+			"in-data-loading:before:not-motion-reduced:animate-skeleton-pulse"
+		], className),
+		children: children === void 0 ? /* @__PURE__ */ jsx(FlexRender, { cell }) : children
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+DataTableCell.displayName = "DataTable.Cell";
+//#endregion
+export { DataTableCell };
+
+//# sourceMappingURL=data-table-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-cell.js","names":[],"sources":["../../../../src/components/data-table/body/data-table-cell.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport {\n  type Cell,\n  FlexRender,\n  type RowData,\n  type TableFeatures,\n} from '@tanstack/react-table';\nimport { hasColumnFeature, hasTableFeature } from '../../../utils';\nimport {\n  getDataTableColumnPinning,\n  getDataTablePinnedStyle,\n} from '../root/get-data-table-column-pinning';\n\nexport type DataTableCellProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  {\n    /** A célula da linha. */\n    cell: Cell<TFeatures, TData>;\n  }\n>;\n\n/**\n * Uma célula do corpo (`role=\"cell\"`). Sem `children`, mostra o `cell` da definição da coluna;\n * com eles, mostra os `children`.\n *\n * Trunca o texto com reticências. Para arrumar o conteúdo em linha, como texto com ícone, passe\n * `className=\"flex items-center gap-2\"` e trunque o texto por conta própria.\n *\n * Com `columnAlignmentFeature`, alinha o conteúdo pelo `align` da coluna e o marca em\n * `data-align`. Com `columnPinningFeature`, numa coluna fixada, gruda na borda do lado dela,\n * marcada com `data-pinned`, e repete o fundo da `DataTable.Row` para cobrir o que rola por\n * baixo.\n */\nexport const DataTableCell = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableCellProps<TFeatures, TData>,\n) => {\n  const { cell, render, className, children, ...rest } = props;\n\n  /**\n   * Sem assinatura: o alinhamento vem da definição da coluna, que não muda em runtime. Uma troca\n   * das colunas muda as células, e a `DataTable.Row` re-renderiza, com a célula junto.\n   */\n  const align = hasColumnFeature(cell.column, 'columnAlignmentFeature')\n    ? cell.column.getAlign()\n    : undefined;\n\n  /**\n   * Sem assinatura: o pinning muda as células da linha, e a `DataTable.Row` re-renderiza, com a\n   * célula junto. O deslocamento muda no resize, mas fica na variável que o `DataTable.Root`\n   * escreve.\n   */\n  const pinning = getDataTableColumnPinning(cell.column);\n\n  const baseProps = {\n    'data-component': 'DataTable.Cell',\n    'data-align': align,\n    'data-pinned': pinning.position || undefined,\n    // Dentro do `grid` do `DataTable.Root`, que a navegação por teclado liga, a célula é `gridcell`.\n    role: hasTableFeature(cell.table, 'activeRowFeature') ? 'gridcell' : 'cell',\n    style: getDataTablePinnedStyle(pinning),\n    className: mergeTwClassNames(\n      [\n        // Bloco, e não flex: só num bloco o texto ganha reticências. O `content-center` centraliza\n        // na vertical.\n        'block',\n        'content-center',\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.\n        'min-w-0',\n        'truncate',\n\n        // Pelo `text-align`: a célula é bloco, e o conteúdo em linha, como o checkbox, segue.\n        'data-[align=center]:text-center',\n        'data-[align=end]:text-end',\n\n        // Do `DataTable.Root`, pela densidade.\n        'h-(--data-table-row-height)',\n\n        'px-(--data-table-cell-padding)',\n\n        // Fixada: gruda por cima das células do centro, e o fundo da linha a deixa opaca.\n        'data-pinned:sticky',\n        'data-pinned:z-1',\n        'data-pinned:bg-(--data-table-row-background)',\n        // Sombra na borda da fixada, do lado em que o centro passa por baixo: na última do início e\n        // na primeira do fim. Mais forte no escuro, onde a do claro sumiria no fundo.\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        // A cor do texto vem da `DataTable.Row`, para a cor que o app puser na linha chegar aqui.\n        'text-sm',\n\n        // Carregamento (`data-loading` no `DataTable.Root`): o conteúdo some\n        // sem a célula mudar de tamanho, e um bloco com as classes do `Skeleton` do `ui` ocupa o\n        // lugar, alinhado como o conteúdo. Por CSS, para as células não re-renderizarem a cada\n        // carga. O texto vai a 0px, e não a transparente: senão empurraria o bloco no `center`.\n        'in-data-loading:text-[0px]',\n        'in-data-loading:*:hidden',\n        \"in-data-loading:before:content-['']\",\n        'in-data-loading:before:inline-block',\n        'in-data-loading:before:align-middle',\n        'in-data-loading:before:h-3',\n        'in-data-loading:before:w-3/4',\n        'in-data-loading:before:rounded-md',\n        'in-data-loading:before:corner-squircle',\n        'in-data-loading:before:bg-gray-6',\n        'in-data-loading:before:not-motion-reduced:animate-skeleton-pulse',\n      ],\n      className,\n    ),\n    children: children === undefined ? <FlexRender cell={cell} /> : children,\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTableCell.displayName = 'DataTable.Cell';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsCA,MAAa,iBAIX,UACG;CACH,MAAM,EAAE,MAAM,QAAQ,WAAW,UAAU,GAAG,SAAS;;;;;CAMvD,MAAM,QAAQ,iBAAiB,KAAK,QAAQ,wBAAwB,IAChE,KAAK,OAAO,SAAS,IACrB,KAAA;;;;;;CAOJ,MAAM,UAAU,0BAA0B,KAAK,MAAM;CAErD,MAAM,YAAY;EAChB,kBAAkB;EAClB,cAAc;EACd,eAAe,QAAQ,YAAY,KAAA;EAEnC,MAAM,gBAAgB,KAAK,OAAO,kBAAkB,IAAI,aAAa;EACrE,OAAO,wBAAwB,OAAO;EACtC,WAAW,kBACT;GAGE;GACA;GAGA;GACA;GAGA;GACA;GAGA;GAEA;GAGA;GACA;GACA;GAGA;GACA;GACA;GACA;GAGA;GAMA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,UAAU,aAAa,KAAA,IAAY,oBAAC,YAAD,EAAkB,KAAO,CAAA,IAAI;CAClE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,cAAc,cAAc"}

package/dist/components/data-table/body/data-table-empty.d.ts

@@ -0,0 +1,38 @@
+import { RowData, Table, TableFeatures } from "@tanstack/react-table";
+import { useRender } from "@base-ui/react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/data-table/body/data-table-empty.d.ts
+export type DataTableEmptyProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'div'>, {
+  /** A tabela do `useTable`. */
+  table: Table<TFeatures, TData>;
+}>;
+/**
+ * O estado vazio da tabela, para depois do `DataTable.Body`, dentro do `DataTable.Root`. Aparece
+ * quando o row model não tem linhas e a tabela não está carregando: com `loadingFeature`, a carga
+ * sem linhas mostra as linhas-fantasma do corpo, e não o vazio.
+ *
+ * Sem `children`, mostra o `EmptyState` do `ui`, sem moldura, com "Nenhum registro encontrado"
+ * e uma descrição que sugere ajustar os filtros. Com `children`, o conteúdo do app, como uma
+ * mensagem do filtro e um botão para limpá-lo. Fica centralizado na largura da tabela.
+ *
+ * @example
+ * ```tsx
+ * <DataTable.Root table={table}>
+ *   <DataTable.Header table={table} />
+ *   <DataTable.Body table={table} />
+ *   <DataTable.Empty table={table}>
+ *     <EmptyState.Root variant="plain">
+ *       <EmptyState.Content>
+ *         <EmptyState.Title>Nenhum cliente para este filtro</EmptyState.Title>
+ *       </EmptyState.Content>
+ *     </EmptyState.Root>
+ *   </DataTable.Empty>
+ * </DataTable.Root>
+ * ```
+ */
+export declare const DataTableEmpty: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableEmptyProps<TFeatures, TData>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-empty.d.ts.map

package/dist/components/data-table/body/data-table-empty.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-empty.d.ts","names":[],"sources":["../../../../src/components/data-table/body/data-table-empty.tsx"],"mappings":";;;;YASY,oBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,OAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;qBA4Bf;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,oBAAoB,WAAW,yBAAM,+CAAA"}

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

@@ -0,0 +1,71 @@
+import { hasTableFeature } from "../../../utils/has-feature.js";
+import { TrayIcon } from "@phosphor-icons/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps, useRender } from "@base-ui/react";
+import { useSelector } from "@tanstack/react-store";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+import { EmptyState } from "@lucasbernardosn/react-ui/feedback/empty-state";
+//#region src/components/data-table/body/data-table-empty.tsx
+/**
+* O estado vazio da tabela, para depois do `DataTable.Body`, dentro do `DataTable.Root`. Aparece
+* quando o row model não tem linhas e a tabela não está carregando: com `loadingFeature`, a carga
+* sem linhas mostra as linhas-fantasma do corpo, e não o vazio.
+*
+* Sem `children`, mostra o `EmptyState` do `ui`, sem moldura, com "Nenhum registro encontrado"
+* e uma descrição que sugere ajustar os filtros. Com `children`, o conteúdo do app, como uma
+* mensagem do filtro e um botão para limpá-lo. Fica centralizado na largura da tabela.
+*
+* @example
+* ```tsx
+* <DataTable.Root table={table}>
+*   <DataTable.Header table={table} />
+*   <DataTable.Body table={table} />
+*   <DataTable.Empty table={table}>
+*     <EmptyState.Root variant="plain">
+*       <EmptyState.Content>
+*         <EmptyState.Title>Nenhum cliente para este filtro</EmptyState.Title>
+*       </EmptyState.Content>
+*     </EmptyState.Root>
+*   </DataTable.Empty>
+* </DataTable.Root>
+* ```
+*/
+const DataTableEmpty = (props) => {
+	const { table, render, className, children, ...rest } = props;
+	/**
+	* Re-renderiza quando a tabela fica vazia ou deixa de ficar. O store: as linhas mudam com os
+	* dados, e o carregamento, com a feature opcional.
+	*/
+	const isEmpty = useSelector(table.store, () => table.getRowModel().rows.length === 0 && !(hasTableFeature(table, "loadingFeature") && table.atoms.isLoading.get()));
+	/** Dentro do `grid` do `DataTable.Root`, que a navegação por teclado liga, a célula é `gridcell`. */
+	const cellRole = hasTableFeature(table, "activeRowFeature") ? "gridcell" : "cell";
+	const baseProps = {
+		"data-component": "DataTable.Empty",
+		role: "row",
+		className: mergeTwClassNames(["py-8"], className),
+		children: /* @__PURE__ */ jsx("div", {
+			role: cellRole,
+			children: children === void 0 ? /* @__PURE__ */ jsxs(EmptyState.Root, {
+				variant: "plain",
+				children: [/* @__PURE__ */ jsx(EmptyState.Indicator, {
+					className: "text-gray-11",
+					children: /* @__PURE__ */ jsx(TrayIcon, {})
+				}), /* @__PURE__ */ jsxs(EmptyState.Content, { children: [/* @__PURE__ */ jsx(EmptyState.Title, {
+					className: "text-gray-11",
+					children: "Nenhum registro encontrado"
+				}), /* @__PURE__ */ jsx(EmptyState.Description, { children: "Não há registros para mostrar. Se houver filtros aplicados, tente ajustá-los." })] })]
+			}) : children
+		})
+	};
+	const element = useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+	return isEmpty ? element : null;
+};
+DataTableEmpty.displayName = "DataTable.Empty";
+//#endregion
+export { DataTableEmpty };
+
+//# sourceMappingURL=data-table-empty.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-empty.js","names":[],"sources":["../../../../src/components/data-table/body/data-table-empty.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { EmptyState } from '@lucasbernardosn/react-ui/feedback/empty-state';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { TrayIcon } from '@phosphor-icons/react';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, Table, TableFeatures } from '@tanstack/react-table';\nimport { hasTableFeature } from '../../../utils';\n\nexport type DataTableEmptyProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  {\n    /** A tabela do `useTable`. */\n    table: Table<TFeatures, TData>;\n  }\n>;\n\n/**\n * O estado vazio da tabela, para depois do `DataTable.Body`, dentro do `DataTable.Root`. Aparece\n * quando o row model não tem linhas e a tabela não está carregando: com `loadingFeature`, a carga\n * sem linhas mostra as linhas-fantasma do corpo, e não o vazio.\n *\n * Sem `children`, mostra o `EmptyState` do `ui`, sem moldura, com \"Nenhum registro encontrado\"\n * e uma descrição que sugere ajustar os filtros. Com `children`, o conteúdo do app, como uma\n * mensagem do filtro e um botão para limpá-lo. Fica centralizado na largura da tabela.\n *\n * @example\n * ```tsx\n * <DataTable.Root table={table}>\n *   <DataTable.Header table={table} />\n *   <DataTable.Body table={table} />\n *   <DataTable.Empty table={table}>\n *     <EmptyState.Root variant=\"plain\">\n *       <EmptyState.Content>\n *         <EmptyState.Title>Nenhum cliente para este filtro</EmptyState.Title>\n *       </EmptyState.Content>\n *     </EmptyState.Root>\n *   </DataTable.Empty>\n * </DataTable.Root>\n * ```\n */\nexport const DataTableEmpty = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableEmptyProps<TFeatures, TData>,\n) => {\n  const { table, render, className, children, ...rest } = props;\n\n  /**\n   * Re-renderiza quando a tabela fica vazia ou deixa de ficar. O store: as linhas mudam com os\n   * dados, e o carregamento, com a feature opcional.\n   */\n  const isEmpty = useSelector(\n    table.store,\n    () =>\n      table.getRowModel().rows.length === 0 &&\n      !(\n        hasTableFeature(table, 'loadingFeature') && table.atoms.isLoading.get()\n      ),\n  );\n\n  /** Dentro do `grid` do `DataTable.Root`, que a navegação por teclado liga, a célula é `gridcell`. */\n  const cellRole = hasTableFeature(table, 'activeRowFeature')\n    ? 'gridcell'\n    : 'cell';\n\n  const baseProps = {\n    'data-component': 'DataTable.Empty',\n    // Uma linha com uma célula: dentro de `table` e `grid`, o ARIA só aceita linhas.\n    role: 'row',\n    className: mergeTwClassNames(['py-8'], className),\n    children: (\n      <div role={cellRole}>\n        {children === undefined ? (\n          <EmptyState.Root variant=\"plain\">\n            <EmptyState.Indicator className=\"text-gray-11\">\n              <TrayIcon />\n            </EmptyState.Indicator>\n\n            <EmptyState.Content>\n              <EmptyState.Title className=\"text-gray-11\">\n                Nenhum registro encontrado\n              </EmptyState.Title>\n              <EmptyState.Description>\n                Não há registros para mostrar. Se houver filtros aplicados,\n                tente ajustá-los.\n              </EmptyState.Description>\n            </EmptyState.Content>\n          </EmptyState.Root>\n        ) : (\n          children\n        )}\n      </div>\n    ),\n  };\n\n  const element = useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n\n  return isEmpty ? element : null;\n};\n\nDataTableEmpty.displayName = 'DataTable.Empty';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAa,kBAIX,UACG;CACH,MAAM,EAAE,OAAO,QAAQ,WAAW,UAAU,GAAG,SAAS;;;;;CAMxD,MAAM,UAAU,YACd,MAAM,aAEJ,MAAM,YAAY,CAAC,CAAC,KAAK,WAAW,KACpC,EACE,gBAAgB,OAAO,gBAAgB,KAAK,MAAM,MAAM,UAAU,IAAI,EAE5E;;CAGA,MAAM,WAAW,gBAAgB,OAAO,kBAAkB,IACtD,aACA;CAEJ,MAAM,YAAY;EAChB,kBAAkB;EAElB,MAAM;EACN,WAAW,kBAAkB,CAAC,MAAM,GAAG,SAAS;EAChD,UACE,oBAAC,OAAD;GAAK,MAAM;GACR,UAAA,aAAa,KAAA,IACZ,qBAAC,WAAW,MAAZ;IAAiB,SAAQ;IAAzB,UAAA,CACE,oBAAC,WAAW,WAAZ;KAAsB,WAAU;KAC9B,UAAA,oBAAC,UAAD,CAAW,CAAA;IACS,CAAA,GAEtB,qBAAC,WAAW,SAAZ,EAAA,UAAA,CACE,oBAAC,WAAW,OAAZ;KAAkB,WAAU;KAAe,UAAA;IAEzB,CAAA,GAClB,oBAAC,WAAW,aAAZ,EAAA,UAAwB,gFAGA,CAAA,CACN,EAAA,CAAA,CACL;GAEjB,CAAA,IAAA;EAEC,CAAA;CAET;CAEA,MAAM,UAAU,UAAU;EACxB;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;CAED,OAAO,UAAU,UAAU;AAC7B;AAEA,eAAe,cAAc"}

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

@@ -0,0 +1,32 @@
+//#region src/components/data-table/body/data-table-row-focus.d.ts
+/**
+ * As linhas do corpo que contém o elemento, na ordem do DOM.
+ *
+ * @example
+ * ```ts
+ * getDataTableRowElements(rowElement).indexOf(rowElement);
+ * // → a posição da linha no corpo
+ * ```
+ */
+export declare const getDataTableRowElements: (element: Element) => HTMLElement[];
+/**
+ * A linha para onde uma tecla leva o foco: ↑↓ uma linha, Home e End a primeira e a última,
+ * PageUp e PageDown uma tela. Sem destino (outra tecla, um modificador, um campo de texto ou a
+ * ponta da tabela), `undefined`, e a tecla segue para o navegador.
+ *
+ * @example
+ * ```ts
+ * getDataTableRowKeyTarget(rowElement, event);
+ * // ↓ na terceira linha → o elemento da quarta
+ * ```
+ */
+export declare const getDataTableRowKeyTarget: (rowElement: HTMLElement, event: Pick<KeyboardEvent, "key" | "target" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey">) => HTMLElement | undefined;
+/**
+ * Foca a linha e a traz para a vista pelo caminho mais curto. O `focus()` sozinho às vezes
+ * centraliza a linha e a tabela pula; o `nearest` rola só o que falta, respeita o
+ * `scroll-padding-top` (a linha para abaixo do cabeçalho) e não mexe na rolagem horizontal, já
+ * que a linha é mais larga que a área visível.
+ */
+export declare const focusDataTableRow: (rowElement: HTMLElement) => void;
+//#endregion
+//# sourceMappingURL=data-table-row-focus.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-row-focus.d.ts","names":[],"sources":["../../../../src/components/data-table/body/data-table-row-focus.ts"],"mappings":";;;;;;;;;;qBAqBa,0BAA2B,SAAS,YAAO;;;;;;;;;;;;qBAmC3C,2BACX,YAAY,aACZ,OAAO,KACL,qFAED;;;;;;;qBA2CU,oBAAqB,YAAY"}

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

@@ -0,0 +1,58 @@
+import { getDataTableScrollParent } from "../root/get-data-table-scroll-parent.js";
+//#region src/components/data-table/body/data-table-row-focus.ts
+/** Um campo de texto dentro da linha fica com as setas, que movem o cursor nele. */
+const TEXT_ENTRY_SELECTOR = "input:not([type=\"checkbox\"], [type=\"radio\"], [type=\"button\"], [type=\"submit\"], [type=\"reset\"]), textarea, select, [contenteditable]:not([contenteditable=\"false\"])";
+/**
+* As linhas do corpo que contém o elemento, na ordem do DOM.
+*
+* @example
+* ```ts
+* getDataTableRowElements(rowElement).indexOf(rowElement);
+* // → a posição da linha no corpo
+* ```
+*/
+const getDataTableRowElements = (element) => Array.from(element.closest("[role=\"rowgroup\"]")?.querySelectorAll("[role=\"row\"]") ?? []);
+/**
+* Quantas linhas inteiras cabem na área visível, abaixo do cabeçalho: o passo do PageUp e do
+* PageDown.
+*/
+const getPageSize = (rowElement) => {
+	const scrollParent = getDataTableScrollParent(rowElement);
+	const visibleHeight = scrollParent ? scrollParent.clientHeight - (Number.parseFloat(getComputedStyle(scrollParent).scrollPaddingTop) || 0) : window.innerHeight;
+	return Math.max(1, Math.floor(visibleHeight / Math.max(1, rowElement.offsetHeight)));
+};
+/**
+* A linha para onde uma tecla leva o foco: ↑↓ uma linha, Home e End a primeira e a última,
+* PageUp e PageDown uma tela. Sem destino (outra tecla, um modificador, um campo de texto ou a
+* ponta da tabela), `undefined`, e a tecla segue para o navegador.
+*
+* @example
+* ```ts
+* getDataTableRowKeyTarget(rowElement, event);
+* // ↓ na terceira linha → o elemento da quarta
+* ```
+*/
+const getDataTableRowKeyTarget = (rowElement, event) => {
+	if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.target instanceof Element && event.target.matches(TEXT_ENTRY_SELECTOR)) return;
+	const rowElements = getDataTableRowElements(rowElement);
+	const index = rowElements.indexOf(rowElement);
+	const targetIndex = event.key === "ArrowDown" ? index + 1 : event.key === "ArrowUp" ? index - 1 : event.key === "Home" ? 0 : event.key === "End" ? rowElements.length - 1 : event.key === "PageDown" ? Math.min(index + getPageSize(rowElement), rowElements.length - 1) : event.key === "PageUp" ? Math.max(index - getPageSize(rowElement), 0) : -1;
+	return targetIndex === index ? void 0 : rowElements[targetIndex];
+};
+/**
+* Foca a linha e a traz para a vista pelo caminho mais curto. O `focus()` sozinho às vezes
+* centraliza a linha e a tabela pula; o `nearest` rola só o que falta, respeita o
+* `scroll-padding-top` (a linha para abaixo do cabeçalho) e não mexe na rolagem horizontal, já
+* que a linha é mais larga que a área visível.
+*/
+const focusDataTableRow = (rowElement) => {
+	rowElement.focus({ preventScroll: true });
+	rowElement.scrollIntoView({
+		block: "nearest",
+		inline: "nearest"
+	});
+};
+//#endregion
+export { focusDataTableRow, getDataTableRowElements, getDataTableRowKeyTarget };
+
+//# sourceMappingURL=data-table-row-focus.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-row-focus.js","names":[],"sources":["../../../../src/components/data-table/body/data-table-row-focus.ts"],"sourcesContent":["import { getDataTableScrollParent } from '../root/get-data-table-scroll-parent';\n\n/*\n * O foco entre as linhas, pelo DOM: as setas movem o foco para o elemento da linha vizinha, e a\n * `DataTable.Row` grava a linha ativa quando o recebe. A ordem das linhas é a do DOM, que é a do\n * row model.\n */\n\n/** Um campo de texto dentro da linha fica com as setas, que movem o cursor nele. */\nconst TEXT_ENTRY_SELECTOR =\n  'input:not([type=\"checkbox\"], [type=\"radio\"], [type=\"button\"], [type=\"submit\"], [type=\"reset\"]), textarea, select, [contenteditable]:not([contenteditable=\"false\"])';\n\n/**\n * As linhas do corpo que contém o elemento, na ordem do DOM.\n *\n * @example\n * ```ts\n * getDataTableRowElements(rowElement).indexOf(rowElement);\n * // → a posição da linha no corpo\n * ```\n */\nexport const getDataTableRowElements = (element: Element) =>\n  Array.from(\n    element\n      .closest('[role=\"rowgroup\"]')\n      ?.querySelectorAll<HTMLElement>('[role=\"row\"]') ?? [],\n  );\n\n/**\n * Quantas linhas inteiras cabem na área visível, abaixo do cabeçalho: o passo do PageUp e do\n * PageDown.\n */\nconst getPageSize = (rowElement: HTMLElement) => {\n  const scrollParent = getDataTableScrollParent(rowElement);\n  const visibleHeight = scrollParent\n    ? scrollParent.clientHeight -\n      (Number.parseFloat(getComputedStyle(scrollParent).scrollPaddingTop) || 0)\n    : window.innerHeight;\n\n  return Math.max(\n    1,\n    Math.floor(visibleHeight / Math.max(1, rowElement.offsetHeight)),\n  );\n};\n\n/**\n * A linha para onde uma tecla leva o foco: ↑↓ uma linha, Home e End a primeira e a última,\n * PageUp e PageDown uma tela. Sem destino (outra tecla, um modificador, um campo de texto ou a\n * ponta da tabela), `undefined`, e a tecla segue para o navegador.\n *\n * @example\n * ```ts\n * getDataTableRowKeyTarget(rowElement, event);\n * // ↓ na terceira linha → o elemento da quarta\n * ```\n */\nexport const getDataTableRowKeyTarget = (\n  rowElement: HTMLElement,\n  event: Pick<\n    KeyboardEvent,\n    'key' | 'target' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'\n  >,\n) => {\n  if (\n    event.altKey ||\n    event.ctrlKey ||\n    event.metaKey ||\n    event.shiftKey ||\n    (event.target instanceof Element &&\n      event.target.matches(TEXT_ENTRY_SELECTOR))\n  ) {\n    return undefined;\n  }\n\n  const rowElements = getDataTableRowElements(rowElement);\n  const index = rowElements.indexOf(rowElement);\n\n  const targetIndex =\n    event.key === 'ArrowDown'\n      ? index + 1\n      : event.key === 'ArrowUp'\n        ? index - 1\n        : event.key === 'Home'\n          ? 0\n          : event.key === 'End'\n            ? rowElements.length - 1\n            : event.key === 'PageDown'\n              ? Math.min(\n                  index + getPageSize(rowElement),\n                  rowElements.length - 1,\n                )\n              : event.key === 'PageUp'\n                ? Math.max(index - getPageSize(rowElement), 0)\n                : -1;\n\n  return targetIndex === index ? undefined : rowElements[targetIndex];\n};\n\n/**\n * Foca a linha e a traz para a vista pelo caminho mais curto. O `focus()` sozinho às vezes\n * centraliza a linha e a tabela pula; o `nearest` rola só o que falta, respeita o\n * `scroll-padding-top` (a linha para abaixo do cabeçalho) e não mexe na rolagem horizontal, já\n * que a linha é mais larga que a área visível.\n */\nexport const focusDataTableRow = (rowElement: HTMLElement) => {\n  rowElement.focus({ preventScroll: true });\n  rowElement.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n};\n"],"mappings":";;;AASA,MAAM,sBACJ;;;;;;;;;;AAWF,MAAa,2BAA2B,YACtC,MAAM,KACJ,QACG,QAAQ,qBAAmB,CAAC,EAC3B,iBAA8B,gBAAc,KAAK,CAAC,CACxD;;;;;AAMF,MAAM,eAAe,eAA4B;CAC/C,MAAM,eAAe,yBAAyB,UAAU;CACxD,MAAM,gBAAgB,eAClB,aAAa,gBACZ,OAAO,WAAW,iBAAiB,YAAY,CAAC,CAAC,gBAAgB,KAAK,KACvE,OAAO;CAEX,OAAO,KAAK,IACV,GACA,KAAK,MAAM,gBAAgB,KAAK,IAAI,GAAG,WAAW,YAAY,CAAC,CACjE;AACF;;;;;;;;;;;;AAaA,MAAa,4BACX,YACA,UAIG;CACH,IACE,MAAM,UACN,MAAM,WACN,MAAM,WACN,MAAM,YACL,MAAM,kBAAkB,WACvB,MAAM,OAAO,QAAQ,mBAAmB,GAE1C;CAGF,MAAM,cAAc,wBAAwB,UAAU;CACtD,MAAM,QAAQ,YAAY,QAAQ,UAAU;CAE5C,MAAM,cACJ,MAAM,QAAQ,cACV,QAAQ,IACR,MAAM,QAAQ,YACZ,QAAQ,IACR,MAAM,QAAQ,SACZ,IACA,MAAM,QAAQ,QACZ,YAAY,SAAS,IACrB,MAAM,QAAQ,aACZ,KAAK,IACH,QAAQ,YAAY,UAAU,GAC9B,YAAY,SAAS,CACvB,IACA,MAAM,QAAQ,WACZ,KAAK,IAAI,QAAQ,YAAY,UAAU,GAAG,CAAC,IAC3C;CAEhB,OAAO,gBAAgB,QAAQ,KAAA,IAAY,YAAY;AACzD;;;;;;;AAQA,MAAa,qBAAqB,eAA4B;CAC5D,WAAW,MAAM,EAAE,eAAe,KAAK,CAAC;CACxC,WAAW,eAAe;EAAE,OAAO;EAAW,QAAQ;CAAU,CAAC;AACnE"}

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

@@ -0,0 +1,67 @@
+import { Cell, Row, RowData, TableFeatures } from "@tanstack/react-table";
+import { useRender } from "@base-ui/react";
+import React from "react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/data-table/body/data-table-row.d.ts
+export type DataTableRowProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'div'>, {
+  /** A linha do row model. */
+  row: Row<TFeatures, TData>;
+  /**
+   * Uma função que recebe cada célula visível e devolve o elemento dela. Com nós comuns, quem
+   * usa faz o laço.
+   * @default (cell) => <DataTable.Cell cell={cell} />
+   */
+  children?: React.ReactNode | ((cell: Cell<TFeatures, TData>) => React.ReactNode);
+}>;
+/**
+ * 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>
+ * ```
+ */
+export declare const DataTableRow: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableRowProps<TFeatures, TData>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-row.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-row.d.ts","names":[],"sources":["../../../../src/components/data-table/body/data-table-row.tsx"],"mappings":";;;;;YAeY,kBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,KAAK,IAAI,WAAW;;;;;;EAMpB,WACI,MAAM,cACJ,MAAM,KAAK,WAAW,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAkDpC;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,kBAAkB,WAAW,SAAM,MAAA,+BAAA,MAAA"}