@lucasbernardosn/react-table 0.0.0-stage → 0.2.0

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 a troca para `gray-2`, a selecionada 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"}

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

@@ -0,0 +1,154 @@
+import { hasRowFeature } from "../../../utils/has-feature.js";
+import { focusDataTableRow, getDataTableRowKeyTarget } from "./data-table-row-focus.js";
+import { dataTableGridClassNames } from "../root/data-table-grid-class-names.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 a troca para `gray-2`, a selecionada 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",
+			dataTableGridClassNames,
+			"last:border-b-0",
+			"[--data-table-row-base:var(--color-white)]",
+			"dark:[--data-table-row-base:#0b0b0b]",
+			"[--data-table-row-background:var(--data-table-row-base)]",
+			"hover:[--data-table-row-background:var(--color-gray-2)]",
+			"data-selected:[--data-table-row-background:var(--color-gray-3)]",
+			"data-selected:hover:[--data-table-row-background:var(--color-gray-4)]",
+			"has-[[data-popup-open]]:[--data-table-row-background:var(--color-gray-2)]",
+			"data-selected:has-[[data-popup-open]]:[--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 { dataTableGridClassNames } from '../root/data-table-grid-class-names';\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 a troca para `gray-2`, a selecionada para `gray-3`, e as duas juntas, para `gray-4`. Para\n * colorir uma linha, troque a variável, e não use `bg-*`, que deixaria as fixadas com a cor\n * antiga. A cor do 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        dataTableGridClassNames,\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 base é\n        // branca no claro e quase preta no escuro, numa variável à parte: a variante `dark` e o\n        // `hover` disputariam a mesma propriedade, e a ordem delas no CSS decidiria. O hover sobe\n        // um passo, a selecionada outro, e a selecionada com hover mais um: sem isso, passar o\n        // mouse por ela não mudaria nada. Escala curta, para o fundo dos botões `ghost` das\n        // células (`gray-3`) aparecer sobre a linha em hover.\n        '[--data-table-row-base:var(--color-white)]',\n        'dark:[--data-table-row-base:#0b0b0b]',\n        '[--data-table-row-background:var(--data-table-row-base)]',\n        'hover:[--data-table-row-background:var(--color-gray-2)]',\n        'data-selected:[--data-table-row-background:var(--color-gray-3)]',\n        'data-selected:hover:[--data-table-row-background:var(--color-gray-4)]',\n        // Com um menu aberto num controle da linha, ela fica como em hover, com o ponteiro onde\n        // estiver: o backdrop do menu cobre o resto da linha e deixa um recorte só sobre o\n        // gatilho, e o `:hover` acenderia e apagaria a linha conforme o ponteiro passa por ele.\n        'has-[[data-popup-open]]:[--data-table-row-background:var(--color-gray-2)]',\n        'data-selected:has-[[data-popup-open]]:[--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;GAQA;GACA;GACA;GACA;GACA;GACA;GAIA;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