@lucasbernardosn/react-table 0.0.0-stage → 0.1.0

package/dist/components/data-table/pagination/data-table-selected-count.js

@@ -0,0 +1,44 @@
+import { mergeProps, useRender } from "@base-ui/react";
+import { useSelector } from "@tanstack/react-store";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+//#region src/components/data-table/pagination/data-table-selected-count.tsx
+/**
+* Quantas linhas estão marcadas: "3 selecionadas". Aparece também sem nenhuma, "0 selecionadas":
+* na barra da paginação, o lado esquerdo não some e volta a cada seleção.
+*
+* Conta os ids marcados no estado, e não as linhas carregadas: com a paginação pela API, entram as
+* marcadas em outras páginas. Exige o `getRowId` com o id do registro (ver
+* `DataTable.RowCheckbox`).
+*
+* @example
+* ```tsx
+* <DataTable.SelectedCount table={table}>
+*   {(count) => `${count} de ${total}`}
+* </DataTable.SelectedCount>
+* ```
+*/
+const DataTableSelectedCount = (props) => {
+	const { table, render, className, children, ...rest } = props;
+	/** Re-renderiza quando o número de marcadas muda. */
+	const count = useSelector(table.atoms.rowSelection, (rowSelection) => Object.values(rowSelection).filter(Boolean).length);
+	const baseProps = {
+		"data-component": "DataTable.SelectedCount",
+		className: mergeTwClassNames([
+			"text-gray-11",
+			"text-sm",
+			"tabular-nums",
+			"whitespace-nowrap"
+		], className),
+		children: children === void 0 ? `${count.toLocaleString("pt-BR")} ${count === 1 ? "selecionada" : "selecionadas"}` : children(count)
+	};
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, rest)
+	});
+};
+DataTableSelectedCount.displayName = "DataTable.SelectedCount";
+//#endregion
+export { DataTableSelectedCount };
+
+//# sourceMappingURL=data-table-selected-count.js.map

package/dist/components/data-table/pagination/data-table-selected-count.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-selected-count.js","names":[],"sources":["../../../../src/components/data-table/pagination/data-table-selected-count.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport type { TableWith } from '../../../types';\n\nexport type DataTableSelectedCountProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'span'>,\n  {\n    /** A tabela. Exige `rowSelectionFeature`. */\n    table: TableWith<TFeatures, TData, 'rowSelectionFeature'>;\n    /**\n     * Uma função que recebe quantas linhas estão marcadas e devolve o texto.\n     * @default (count) => '3 selecionadas', '1 selecionada' ou '0 selecionadas'\n     */\n    children?: (count: number) => React.ReactNode;\n  }\n>;\n\n/**\n * Quantas linhas estão marcadas: \"3 selecionadas\". Aparece também sem nenhuma, \"0 selecionadas\":\n * na barra da paginação, o lado esquerdo não some e volta a cada seleção.\n *\n * Conta os ids marcados no estado, e não as linhas carregadas: com a paginação pela API, entram as\n * marcadas em outras páginas. Exige o `getRowId` com o id do registro (ver\n * `DataTable.RowCheckbox`).\n *\n * @example\n * ```tsx\n * <DataTable.SelectedCount table={table}>\n *   {(count) => `${count} de ${total}`}\n * </DataTable.SelectedCount>\n * ```\n */\nexport const DataTableSelectedCount = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableSelectedCountProps<TFeatures, TData>,\n) => {\n  const { table, render, className, children, ...rest } = props;\n\n  /** Re-renderiza quando o número de marcadas muda. */\n  const count = useSelector(\n    table.atoms.rowSelection,\n    (rowSelection) => Object.values(rowSelection).filter(Boolean).length,\n  );\n\n  const baseProps = {\n    'data-component': 'DataTable.SelectedCount',\n    className: mergeTwClassNames(\n      [\n        'text-gray-11',\n        'text-sm',\n\n        'tabular-nums',\n        'whitespace-nowrap',\n      ],\n      className,\n    ),\n    children:\n      children === undefined\n        ? `${count.toLocaleString('pt-BR')} ${count === 1 ? 'selecionada' : 'selecionadas'}`\n        : children(count),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTableSelectedCount.displayName = 'DataTable.SelectedCount';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuCA,MAAa,0BAIX,UACG;CACH,MAAM,EAAE,OAAO,QAAQ,WAAW,UAAU,GAAG,SAAS;;CAGxD,MAAM,QAAQ,YACZ,MAAM,MAAM,eACX,iBAAiB,OAAO,OAAO,YAAY,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,MAChE;CAEA,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,UACE,aAAa,KAAA,IACT,GAAG,MAAM,eAAe,OAAO,EAAE,GAAG,UAAU,IAAI,gBAAgB,mBAClE,SAAS,KAAK;CACtB;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,uBAAuB,cAAc"}

package/dist/components/data-table/pagination/use-data-table-page-scroll-reset.d.ts

@@ -0,0 +1,15 @@
+import { RowData, Table, TableFeatures } from "@tanstack/react-table";
+import React from "react";
+//#region src/components/data-table/pagination/use-data-table-page-scroll-reset.d.ts
+/**
+ * Volta a rolagem vertical ao topo quando a página ou o tamanho dela mudam. Sem isto, quem rolou
+ * até o fim e passou de página cai no fim da página seguinte. A rolagem horizontal fica. Só com
+ * `rowPaginationFeature`.
+ *
+ * Assina a paginação fora do React, como o bloqueio da carga: rolar não re-renderiza o corpo, que
+ * recriaria todas as linhas. Na paginação pela API, a página muda antes de as linhas chegarem, e
+ * um render ali seria à toa.
+ */
+export declare const useDataTablePageScrollReset: <TFeatures extends TableFeatures, TData extends RowData>(table: Table<TFeatures, TData>, ref: React.RefObject<HTMLElement | null>) => void;
+//#endregion
+//# sourceMappingURL=use-data-table-page-scroll-reset.d.ts.map

package/dist/components/data-table/pagination/use-data-table-page-scroll-reset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-data-table-page-scroll-reset.d.ts","names":[],"sources":["../../../../src/components/data-table/pagination/use-data-table-page-scroll-reset.ts"],"mappings":";;;;;;;;;;;;qBAea,8BACX,kBAAkB,eAClB,cAAc,SAEd,OAAO,MAAM,WAAW,QACxB,KAAK,MAAM,UAAU"}

package/dist/components/data-table/pagination/use-data-table-page-scroll-reset.js

@@ -0,0 +1,38 @@
+import { hasTableFeature } from "../../../utils/has-feature.js";
+import { getDataTableScrollParent } from "../root/get-data-table-scroll-parent.js";
+import { useLayoutEffect } from "react";
+//#region src/components/data-table/pagination/use-data-table-page-scroll-reset.ts
+/**
+* Volta a rolagem vertical ao topo quando a página ou o tamanho dela mudam. Sem isto, quem rolou
+* até o fim e passou de página cai no fim da página seguinte. A rolagem horizontal fica. Só com
+* `rowPaginationFeature`.
+*
+* Assina a paginação fora do React, como o bloqueio da carga: rolar não re-renderiza o corpo, que
+* recriaria todas as linhas. Na paginação pela API, a página muda antes de as linhas chegarem, e
+* um render ali seria à toa.
+*/
+const useDataTablePageScrollReset = (table, ref) => {
+	useLayoutEffect(() => {
+		if (!hasTableFeature(table, "rowPaginationFeature")) return;
+		const paginationAtom = table.atoms.pagination;
+		/** A página e o tamanho num texto, para comparar com `===`. */
+		const getPageKey = () => {
+			const { pageIndex, pageSize } = paginationAtom.get();
+			return `${pageIndex}:${pageSize}`;
+		};
+		/** A página da última rolagem: na montagem, não rola. */
+		let lastPageKey = getPageKey();
+		const subscription = paginationAtom.subscribe(() => {
+			const pageKey = getPageKey();
+			if (pageKey === lastPageKey) return;
+			lastPageKey = pageKey;
+			const scrollParent = ref.current && getDataTableScrollParent(ref.current);
+			if (scrollParent) scrollParent.scrollTop = 0;
+		});
+		return () => subscription.unsubscribe();
+	}, [table, ref]);
+};
+//#endregion
+export { useDataTablePageScrollReset };
+
+//# sourceMappingURL=use-data-table-page-scroll-reset.js.map

package/dist/components/data-table/pagination/use-data-table-page-scroll-reset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-data-table-page-scroll-reset.js","names":[],"sources":["../../../../src/components/data-table/pagination/use-data-table-page-scroll-reset.ts"],"sourcesContent":["import type { RowData, Table, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport { useLayoutEffect } from 'react';\nimport { hasTableFeature } from '../../../utils';\nimport { getDataTableScrollParent } from '../root/get-data-table-scroll-parent';\n\n/**\n * Volta a rolagem vertical ao topo quando a página ou o tamanho dela mudam. Sem isto, quem rolou\n * até o fim e passou de página cai no fim da página seguinte. A rolagem horizontal fica. Só com\n * `rowPaginationFeature`.\n *\n * Assina a paginação fora do React, como o bloqueio da carga: rolar não re-renderiza o corpo, que\n * recriaria todas as linhas. Na paginação pela API, a página muda antes de as linhas chegarem, e\n * um render ali seria à toa.\n */\nexport const useDataTablePageScrollReset = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  table: Table<TFeatures, TData>,\n  ref: React.RefObject<HTMLElement | null>,\n) => {\n  useLayoutEffect(() => {\n    if (!hasTableFeature(table, 'rowPaginationFeature')) {\n      return;\n    }\n\n    const paginationAtom = table.atoms.pagination;\n\n    /** A página e o tamanho num texto, para comparar com `===`. */\n    const getPageKey = () => {\n      const { pageIndex, pageSize } = paginationAtom.get();\n\n      return `${pageIndex}:${pageSize}`;\n    };\n\n    /** A página da última rolagem: na montagem, não rola. */\n    let lastPageKey = getPageKey();\n\n    const subscription = paginationAtom.subscribe(() => {\n      const pageKey = getPageKey();\n\n      if (pageKey === lastPageKey) {\n        return;\n      }\n\n      lastPageKey = pageKey;\n\n      const scrollParent = ref.current && getDataTableScrollParent(ref.current);\n\n      if (scrollParent) {\n        scrollParent.scrollTop = 0;\n      }\n    });\n\n    return () => subscription.unsubscribe();\n  }, [table, ref]);\n};\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAa,+BAIX,OACA,QACG;CACH,sBAAsB;EACpB,IAAI,CAAC,gBAAgB,OAAO,sBAAsB,GAChD;EAGF,MAAM,iBAAiB,MAAM,MAAM;;EAGnC,MAAM,mBAAmB;GACvB,MAAM,EAAE,WAAW,aAAa,eAAe,IAAI;GAEnD,OAAO,GAAG,UAAU,GAAG;EACzB;;EAGA,IAAI,cAAc,WAAW;EAE7B,MAAM,eAAe,eAAe,gBAAgB;GAClD,MAAM,UAAU,WAAW;GAE3B,IAAI,YAAY,aACd;GAGF,cAAc;GAEd,MAAM,eAAe,IAAI,WAAW,yBAAyB,IAAI,OAAO;GAExE,IAAI,cACF,aAAa,YAAY;EAE7B,CAAC;EAED,aAAa,aAAa,YAAY;CACxC,GAAG,CAAC,OAAO,GAAG,CAAC;AACjB"}

package/dist/components/data-table/resize/data-table-resize-handle.d.ts

@@ -0,0 +1,48 @@
+import { HeaderWith } from "../../../types/table-with.js";
+import "../../../types/index.js";
+import { 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/resize/data-table-resize-handle.d.ts
+export type DataTableResizeHandleProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'div'>, {
+  /** O header da coluna. Exige `columnSizingFeature` e `columnResizingFeature`. */
+  header: HeaderWith<TFeatures, TData, 'columnResizingFeature' | 'columnSizingFeature'>;
+}>;
+/**
+ * Área de agarre para redimensionar uma coluna, sobre a linha vertical do fim do header (que
+ * precisa ser `relative`). Arrastar redimensiona; duplo clique devolve a coluna ao tamanho
+ * definido.
+ *
+ * A caixa tem largura zero, e a área de agarre é um `::before` transparente de 12px centrado na
+ * linha, metade sobre a coluna vizinha; na última coluna e antes de uma fixada do fim, toda do
+ * lado de dentro. No repouso não aparece; no hover e no arrasto, o handle vira a âncora da
+ * linha-guia, que a `DataTable.ScrollArea` desenha na altura toda da tabela.
+ * Quando a borda chega à beira de uma fixada do fim ou ao fim da área visível, a rolagem
+ * acompanha o arrasto. Numa coluna que não redimensiona (`enableResizing: false`), não
+ * renderiza.
+ *
+ * Durante o arrasto, o `InteractionShield` do `ui` cobre a página: nada, dentro ou fora da
+ * tabela, reage ao ponteiro, o cursor de resize vale em toda parte, e o texto não é selecionado.
+ * A roda do mouse, por cima dele, não rola a tabela.
+ *
+ * Exige `columnResizeMode: 'onChange'` na tabela. Com o padrão do TanStack, `'onEnd'`, o tamanho
+ * só muda ao soltar: no arrasto nada anda na tela (nem a coluna, nem o handle, nem a guia), e a
+ * coluna pula no fim.
+ *
+ * @example
+ * ```tsx
+ * const table = useTable({ features, columns, data, columnResizeMode: 'onChange' });
+ *
+ * <DataTable.HeaderCell header={header}>
+ *   <DataTable.HeaderContent header={header} />
+ *   <DataTable.ResizeHandle header={header} />
+ * </DataTable.HeaderCell>
+ * ```
+ */
+export declare const DataTableResizeHandle: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableResizeHandleProps<TFeatures, TData>): React.JSX.Element | null;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-resize-handle.d.ts.map

package/dist/components/data-table/resize/data-table-resize-handle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-resize-handle.d.ts","names":[],"sources":["../../../../src/components/data-table/resize/data-table-resize-handle.tsx"],"mappings":";;;;;;;YAWY,2BACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,QAAQ,WACN,WACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAqCO;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,2BAA2B,WAAW,SAAM,MAAA,IAAA"}

package/dist/components/data-table/resize/data-table-resize-handle.js

@@ -0,0 +1,115 @@
+import { useDataTableResizeScroll } from "./use-data-table-resize-scroll.js";
+import { Fragment, 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 { useRef } from "react";
+import { InteractionShield } from "@lucasbernardosn/react-ui/utilities/interaction-shield";
+//#region src/components/data-table/resize/data-table-resize-handle.tsx
+/**
+* Área de agarre para redimensionar uma coluna, sobre a linha vertical do fim do header (que
+* precisa ser `relative`). Arrastar redimensiona; duplo clique devolve a coluna ao tamanho
+* definido.
+*
+* A caixa tem largura zero, e a área de agarre é um `::before` transparente de 12px centrado na
+* linha, metade sobre a coluna vizinha; na última coluna e antes de uma fixada do fim, toda do
+* lado de dentro. No repouso não aparece; no hover e no arrasto, o handle vira a âncora da
+* linha-guia, que a `DataTable.ScrollArea` desenha na altura toda da tabela.
+* Quando a borda chega à beira de uma fixada do fim ou ao fim da área visível, a rolagem
+* acompanha o arrasto. Numa coluna que não redimensiona (`enableResizing: false`), não
+* renderiza.
+*
+* Durante o arrasto, o `InteractionShield` do `ui` cobre a página: nada, dentro ou fora da
+* tabela, reage ao ponteiro, o cursor de resize vale em toda parte, e o texto não é selecionado.
+* A roda do mouse, por cima dele, não rola a tabela.
+*
+* Exige `columnResizeMode: 'onChange'` na tabela. Com o padrão do TanStack, `'onEnd'`, o tamanho
+* só muda ao soltar: no arrasto nada anda na tela (nem a coluna, nem o handle, nem a guia), e a
+* coluna pula no fim.
+*
+* @example
+* ```tsx
+* const table = useTable({ features, columns, data, columnResizeMode: 'onChange' });
+*
+* <DataTable.HeaderCell header={header}>
+*   <DataTable.HeaderContent header={header} />
+*   <DataTable.ResizeHandle header={header} />
+* </DataTable.HeaderCell>
+* ```
+*/
+const DataTableResizeHandle = (props) => {
+	const { header, render, className, ref, ...rest } = props;
+	const handleRef = useRef(null);
+	/**
+	* O atom do resize muda a cada tick do arrasto, mas o booleano só no começo e no fim: o handle
+	* re-renderiza duas vezes por arrasto, e só o da coluna arrastada.
+	*/
+	const isResizing = useSelector(header.column.table.atoms.columnResizing, () => header.column.getIsResizing());
+	useDataTableResizeScroll(header.column.table, isResizing, handleRef);
+	const onResizeStart = header.getResizeHandler();
+	/**
+	* O duplo clique pelo `detail` do `mousedown`, que conta os cliques, e não pelo `dblclick`: o
+	* arrasto começa no primeiro `mousedown`, o shield cobre o handle, e o `mouseup` cai nele. O
+	* navegador então não manda o `click` nem o `dblclick` ao handle.
+	*/
+	const handleMouseDown = (event) => {
+		if (event.detail === 2) {
+			header.column.resetSize();
+			return;
+		}
+		onResizeStart(event);
+	};
+	const baseProps = {
+		"data-component": "DataTable.ResizeHandle",
+		"data-resizing": isResizing ? "" : void 0,
+		"aria-hidden": true,
+		onMouseDown: handleMouseDown,
+		onTouchStart: onResizeStart,
+		className: mergeTwClassNames([
+			"absolute",
+			"top-0",
+			"right-0",
+			"in-[[role=columnheader]:last-child]:right-px",
+			"z-10",
+			"h-full",
+			"cursor-col-resize",
+			"touch-none",
+			"select-none",
+			"before:absolute",
+			"before:top-0",
+			"before:right-0",
+			"before:h-full",
+			"before:w-3",
+			"before:translate-x-1.5",
+			"before:content-[\"\"]",
+			"in-[[role=columnheader]:last-child]:before:translate-x-0",
+			"in-[[role=columnheader]:has(+[data-pinned=end])]:before:translate-x-0",
+			"after:absolute",
+			"after:inset-y-0",
+			"after:left-0",
+			"after:w-0.5",
+			"after:-translate-x-1/2",
+			"after:content-[\"\"]",
+			"hover:after:bg-gray-9",
+			"data-resizing:after:bg-black",
+			"dark:data-resizing:after:bg-white",
+			"hover:[anchor-name:--data-table-resize-handle]",
+			"data-resizing:[anchor-name:--data-table-resize-handle]"
+		], className)
+	};
+	const element = useRender({
+		render,
+		defaultTagName: "div",
+		ref: [handleRef, ref ?? null],
+		props: mergeProps(baseProps, rest)
+	});
+	return header.column.getCanResize() ? /* @__PURE__ */ jsxs(Fragment, { children: [element, /* @__PURE__ */ jsx(InteractionShield, {
+		active: isResizing,
+		cursor: "col-resize"
+	})] }) : null;
+};
+DataTableResizeHandle.displayName = "DataTable.ResizeHandle";
+//#endregion
+export { DataTableResizeHandle };
+
+//# sourceMappingURL=data-table-resize-handle.js.map

package/dist/components/data-table/resize/data-table-resize-handle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-resize-handle.js","names":[],"sources":["../../../../src/components/data-table/resize/data-table-resize-handle.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { InteractionShield } from '@lucasbernardosn/react-ui/utilities/interaction-shield';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport { useRef } from 'react';\nimport type { HeaderWith } from '../../../types';\nimport { useDataTableResizeScroll } from './use-data-table-resize-scroll';\n\nexport type DataTableResizeHandleProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  {\n    /** O header da coluna. Exige `columnSizingFeature` e `columnResizingFeature`. */\n    header: HeaderWith<\n      TFeatures,\n      TData,\n      'columnResizingFeature' | 'columnSizingFeature'\n    >;\n  }\n>;\n\n/**\n * Área de agarre para redimensionar uma coluna, sobre a linha vertical do fim do header (que\n * precisa ser `relative`). Arrastar redimensiona; duplo clique devolve a coluna ao tamanho\n * definido.\n *\n * A caixa tem largura zero, e a área de agarre é um `::before` transparente de 12px centrado na\n * linha, metade sobre a coluna vizinha; na última coluna e antes de uma fixada do fim, toda do\n * lado de dentro. No repouso não aparece; no hover e no arrasto, o handle vira a âncora da\n * linha-guia, que a `DataTable.ScrollArea` desenha na altura toda da tabela.\n * Quando a borda chega à beira de uma fixada do fim ou ao fim da área visível, a rolagem\n * acompanha o arrasto. Numa coluna que não redimensiona (`enableResizing: false`), não\n * renderiza.\n *\n * Durante o arrasto, o `InteractionShield` do `ui` cobre a página: nada, dentro ou fora da\n * tabela, reage ao ponteiro, o cursor de resize vale em toda parte, e o texto não é selecionado.\n * A roda do mouse, por cima dele, não rola a tabela.\n *\n * Exige `columnResizeMode: 'onChange'` na tabela. Com o padrão do TanStack, `'onEnd'`, o tamanho\n * só muda ao soltar: no arrasto nada anda na tela (nem a coluna, nem o handle, nem a guia), e a\n * coluna pula no fim.\n *\n * @example\n * ```tsx\n * const table = useTable({ features, columns, data, columnResizeMode: 'onChange' });\n *\n * <DataTable.HeaderCell header={header}>\n *   <DataTable.HeaderContent header={header} />\n *   <DataTable.ResizeHandle header={header} />\n * </DataTable.HeaderCell>\n * ```\n */\nexport const DataTableResizeHandle = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableResizeHandleProps<TFeatures, TData>,\n) => {\n  const { header, render, className, ref, ...rest } = props;\n\n  const handleRef = useRef<HTMLDivElement>(null);\n\n  /**\n   * O atom do resize muda a cada tick do arrasto, mas o booleano só no começo e no fim: o handle\n   * re-renderiza duas vezes por arrasto, e só o da coluna arrastada.\n   */\n  const isResizing = useSelector(header.column.table.atoms.columnResizing, () =>\n    header.column.getIsResizing(),\n  );\n\n  useDataTableResizeScroll(header.column.table, isResizing, handleRef);\n\n  const onResizeStart = header.getResizeHandler();\n\n  /**\n   * O duplo clique pelo `detail` do `mousedown`, que conta os cliques, e não pelo `dblclick`: o\n   * arrasto começa no primeiro `mousedown`, o shield cobre o handle, e o `mouseup` cai nele. O\n   * navegador então não manda o `click` nem o `dblclick` ao handle.\n   */\n  const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.detail === 2) {\n      header.column.resetSize();\n\n      return;\n    }\n\n    onResizeStart(event);\n  };\n\n  const baseProps = {\n    'data-component': 'DataTable.ResizeHandle',\n    'data-resizing': isResizing ? '' : undefined,\n    // Só ponteiro: sem resize por teclado, um `separator` prometeria teclas que não existem.\n    'aria-hidden': true,\n    onMouseDown: handleMouseDown,\n    onTouchStart: onResizeStart,\n    className: mergeTwClassNames(\n      [\n        // Sobre a linha vertical: o `right-0` é o fim do padding, e a borda de 1px que o\n        // `divide-x` põe na célula vem logo depois. A última da linha não tem borda, e o\n        // `right-px` põe o handle no mesmo ponto em relação ao fim dela. Antes de uma fixada do\n        // fim, a célula também perde a borda, mas a linha passa a ser a da fixada, logo depois:\n        // o `right-0` continua certo. Pela posição no DOM, com os seletores das bordas da\n        // `DataTable.HeaderRow`, o handle e a borda não têm como discordar.\n        'absolute',\n        'top-0',\n        'right-0',\n        'in-[[role=columnheader]:last-child]:right-px',\n        'z-10',\n\n        'h-full',\n\n        'cursor-col-resize',\n        // Sem isto, o arrasto no toque rola a página em vez de redimensionar.\n        'touch-none',\n        'select-none',\n\n        // Área de agarre centrada na linha. Conteúdo recortado não recebe clique, então nada\n        // entre o handle e o header pode ter `overflow: hidden`.\n        'before:absolute',\n        'before:top-0',\n        'before:right-0',\n        'before:h-full',\n        'before:w-3',\n        'before:translate-x-1.5',\n        'before:content-[\"\"]',\n\n        // Onde a metade de fora não serve, os 12px ficam todos do lado de dentro. Na última da\n        // linha, ela passaria do fim da tabela e acenderia a barra de rolagem horizontal sem\n        // haver o que rolar; antes de uma fixada do fim, ficaria por baixo dela, sem pegar o\n        // clique.\n        'in-[[role=columnheader]:last-child]:before:translate-x-0',\n        'in-[[role=columnheader]:has(+[data-pinned=end])]:before:translate-x-0',\n\n        // A linha de 2px no cabeçalho, sobre a borda e 1px antes dela, no hover e no arrasto. Onde\n        // há anchor positioning, a linha-guia cobre esta no mesmo lugar e segue pelo corpo; sem\n        // ele, fica só esta.\n        'after:absolute',\n        'after:inset-y-0',\n        'after:left-0',\n        'after:w-0.5',\n        'after:-translate-x-1/2',\n        'after:content-[\"\"]',\n        'hover:after:bg-gray-9',\n        'data-resizing:after:bg-black',\n        'dark:data-resizing:after:bg-white',\n\n        // A âncora da linha-guia (ver `DataTable.ScrollArea`), no hover e no arrasto. Um nome só\n        // basta: no arrasto, o shield cobre os outros handles, e nenhum fica em hover junto com\n        // o arrastado. Com o nome repetido, a guia iria para o último.\n        'hover:[anchor-name:--data-table-resize-handle]',\n        'data-resizing:[anchor-name:--data-table-resize-handle]',\n      ],\n      className,\n    ),\n  };\n\n  const element = useRender({\n    render,\n    defaultTagName: 'div',\n    ref: [handleRef, ref ?? null],\n    props: mergeProps(baseProps, rest),\n  });\n\n  return header.column.getCanResize() ? (\n    <>\n      {element}\n      <InteractionShield\n        active={isResizing}\n        cursor=\"col-resize\"\n      />\n    </>\n  ) : null;\n};\n\nDataTableResizeHandle.displayName = 'DataTable.ResizeHandle';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,MAAa,yBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,WAAW,KAAK,GAAG,SAAS;CAEpD,MAAM,YAAY,OAAuB,IAAI;;;;;CAM7C,MAAM,aAAa,YAAY,OAAO,OAAO,MAAM,MAAM,sBACvD,OAAO,OAAO,cAAc,CAC9B;CAEA,yBAAyB,OAAO,OAAO,OAAO,YAAY,SAAS;CAEnE,MAAM,gBAAgB,OAAO,iBAAiB;;;;;;CAO9C,MAAM,mBAAmB,UAA4C;EACnE,IAAI,MAAM,WAAW,GAAG;GACtB,OAAO,OAAO,UAAU;GAExB;EACF;EAEA,cAAc,KAAK;CACrB;CAEA,MAAM,YAAY;EAChB,kBAAkB;EAClB,iBAAiB,aAAa,KAAK,KAAA;EAEnC,eAAe;EACf,aAAa;EACb,cAAc;EACd,WAAW,kBACT;GAOE;GACA;GACA;GACA;GACA;GAEA;GAEA;GAEA;GACA;GAIA;GACA;GACA;GACA;GACA;GACA;GACA;GAMA;GACA;GAKA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAKA;GACA;EACF,GACA,SACF;CACF;CAEA,MAAM,UAAU,UAAU;EACxB;EACA,gBAAgB;EAChB,KAAK,CAAC,WAAW,OAAO,IAAI;EAC5B,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;CAED,OAAO,OAAO,OAAO,aAAa,IAChC,qBAAA,UAAA,EAAA,UAAA,CACG,SACD,oBAAC,mBAAD;EACE,QAAQ;EACR,QAAO;CACR,CAAA,CACD,EAAA,CAAA,IACA;AACN;AAEA,sBAAsB,cAAc"}

package/dist/components/data-table/resize/use-data-table-resize-scroll.d.ts

@@ -0,0 +1,18 @@
+import { RowData, Table, TableFeatures } from "@tanstack/react-table";
+import React from "react";
+//#region src/components/data-table/resize/use-data-table-resize-scroll.d.ts
+/**
+ * No arrasto do resize, a rolagem acompanha a borda da coluna quando ela chega à beira de uma
+ * fixada do fim ou ao fim da área visível: a borda para ali, e as colunas de antes andam para a
+ * esquerda. Sem isto, a coluna cresceria por baixo da fixada, ou fora da vista, e nada mudaria na
+ * tela enquanto o ponteiro anda. Coluna fixada fica de fora: a borda dela não sai da vista.
+ *
+ * Assina o store só durante o arrasto, fora do React, e mede numa microtarefa: ela roda depois de
+ * todas as assinaturas da mesma mudança, inclusive a do `DataTable.Root`, que escreve o template
+ * das colunas, e antes da pintura. A medida já tem a largura nova, e a borda não chega a aparecer
+ * além da beira. O viewport e as fixadas do fim são lidos no começo do arrasto: o pinning não muda
+ * no meio dele.
+ */
+export declare const useDataTableResizeScroll: <TFeatures extends TableFeatures, TData extends RowData>(table: Table<TFeatures, TData>, isResizing: boolean, ref: React.RefObject<HTMLElement | null>) => void;
+//#endregion
+//# sourceMappingURL=use-data-table-resize-scroll.d.ts.map

package/dist/components/data-table/resize/use-data-table-resize-scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-data-table-resize-scroll.d.ts","names":[],"sources":["../../../../src/components/data-table/resize/use-data-table-resize-scroll.ts"],"mappings":";;;;;;;;;;;;;;;qBAiBa,2BACX,kBAAkB,eAClB,cAAc,SAEd,OAAO,MAAM,WAAW,QACxB,qBACA,KAAK,MAAM,UAAU"}

package/dist/components/data-table/resize/use-data-table-resize-scroll.js

@@ -0,0 +1,55 @@
+import { getDataTableScrollParent } from "../root/get-data-table-scroll-parent.js";
+import { useEffect } from "react";
+//#region src/components/data-table/resize/use-data-table-resize-scroll.ts
+/**
+* No arrasto do resize, a rolagem acompanha a borda da coluna quando ela chega à beira de uma
+* fixada do fim ou ao fim da área visível: a borda para ali, e as colunas de antes andam para a
+* esquerda. Sem isto, a coluna cresceria por baixo da fixada, ou fora da vista, e nada mudaria na
+* tela enquanto o ponteiro anda. Coluna fixada fica de fora: a borda dela não sai da vista.
+*
+* Assina o store só durante o arrasto, fora do React, e mede numa microtarefa: ela roda depois de
+* todas as assinaturas da mesma mudança, inclusive a do `DataTable.Root`, que escreve o template
+* das colunas, e antes da pintura. A medida já tem a largura nova, e a borda não chega a aparecer
+* além da beira. O viewport e as fixadas do fim são lidos no começo do arrasto: o pinning não muda
+* no meio dele.
+*/
+const useDataTableResizeScroll = (table, isResizing, ref) => {
+	const { store } = table;
+	useEffect(() => {
+		if (!isResizing) return;
+		const handle = ref.current;
+		const headerCell = handle?.closest("[role=\"columnheader\"]");
+		const viewport = handle ? getDataTableScrollParent(handle) : void 0;
+		if (!(headerCell instanceof HTMLElement && viewport) || headerCell.dataset.pinned) return;
+		/** As fixadas do fim, na mesma linha do cabeçalho. */
+		const endPinnedCells = Array.from(headerCell.parentElement?.querySelectorAll("[data-pinned=\"end\"]") ?? []);
+		/** Uma medida por mudança: o store pode avisar mais de uma vez antes da microtarefa. */
+		let isScheduled = false;
+		/**
+		* Rola o quanto a borda passou da área visível do centro: o começo da primeira fixada do fim
+		* ou, sem ela, o fim do viewport.
+		*/
+		const scrollToEdge = () => {
+			isScheduled = false;
+			const viewportRect = viewport.getBoundingClientRect();
+			const visibleEnd = Math.min(viewportRect.left + viewport.clientLeft + viewport.clientWidth, ...endPinnedCells.map((cell) => cell.getBoundingClientRect().left));
+			const overflow = headerCell.getBoundingClientRect().right - visibleEnd;
+			if (overflow > 0) viewport.scrollLeft += overflow;
+		};
+		const subscription = store.subscribe(() => {
+			if (!isScheduled) {
+				isScheduled = true;
+				queueMicrotask(scrollToEdge);
+			}
+		});
+		return () => subscription.unsubscribe();
+	}, [
+		isResizing,
+		ref,
+		store
+	]);
+};
+//#endregion
+export { useDataTableResizeScroll };
+
+//# sourceMappingURL=use-data-table-resize-scroll.js.map

package/dist/components/data-table/resize/use-data-table-resize-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-data-table-resize-scroll.js","names":[],"sources":["../../../../src/components/data-table/resize/use-data-table-resize-scroll.ts"],"sourcesContent":["import type { RowData, Table, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport { useEffect } from 'react';\nimport { getDataTableScrollParent } from '../root/get-data-table-scroll-parent';\n\n/**\n * No arrasto do resize, a rolagem acompanha a borda da coluna quando ela chega à beira de uma\n * fixada do fim ou ao fim da área visível: a borda para ali, e as colunas de antes andam para a\n * esquerda. Sem isto, a coluna cresceria por baixo da fixada, ou fora da vista, e nada mudaria na\n * tela enquanto o ponteiro anda. Coluna fixada fica de fora: a borda dela não sai da vista.\n *\n * Assina o store só durante o arrasto, fora do React, e mede numa microtarefa: ela roda depois de\n * todas as assinaturas da mesma mudança, inclusive a do `DataTable.Root`, que escreve o template\n * das colunas, e antes da pintura. A medida já tem a largura nova, e a borda não chega a aparecer\n * além da beira. O viewport e as fixadas do fim são lidos no começo do arrasto: o pinning não muda\n * no meio dele.\n */\nexport const useDataTableResizeScroll = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  table: Table<TFeatures, TData>,\n  isResizing: boolean,\n  ref: React.RefObject<HTMLElement | null>,\n) => {\n  const { store } = table;\n\n  useEffect(() => {\n    if (!isResizing) {\n      return;\n    }\n\n    const handle = ref.current;\n    const headerCell = handle?.closest('[role=\"columnheader\"]');\n    const viewport = handle ? getDataTableScrollParent(handle) : undefined;\n\n    if (\n      !(headerCell instanceof HTMLElement && viewport) ||\n      headerCell.dataset.pinned\n    ) {\n      return;\n    }\n\n    /** As fixadas do fim, na mesma linha do cabeçalho. */\n    const endPinnedCells = Array.from(\n      headerCell.parentElement?.querySelectorAll('[data-pinned=\"end\"]') ?? [],\n    );\n\n    /** Uma medida por mudança: o store pode avisar mais de uma vez antes da microtarefa. */\n    let isScheduled = false;\n\n    /**\n     * Rola o quanto a borda passou da área visível do centro: o começo da primeira fixada do fim\n     * ou, sem ela, o fim do viewport.\n     */\n    const scrollToEdge = () => {\n      isScheduled = false;\n\n      const viewportRect = viewport.getBoundingClientRect();\n      const visibleEnd = Math.min(\n        viewportRect.left + viewport.clientLeft + viewport.clientWidth,\n        ...endPinnedCells.map((cell) => cell.getBoundingClientRect().left),\n      );\n      const overflow = headerCell.getBoundingClientRect().right - visibleEnd;\n\n      if (overflow > 0) {\n        viewport.scrollLeft += overflow;\n      }\n    };\n\n    const subscription = store.subscribe(() => {\n      if (!isScheduled) {\n        isScheduled = true;\n        queueMicrotask(scrollToEdge);\n      }\n    });\n\n    return () => subscription.unsubscribe();\n  }, [isResizing, ref, store]);\n};\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAa,4BAIX,OACA,YACA,QACG;CACH,MAAM,EAAE,UAAU;CAElB,gBAAgB;EACd,IAAI,CAAC,YACH;EAGF,MAAM,SAAS,IAAI;EACnB,MAAM,aAAa,QAAQ,QAAQ,yBAAuB;EAC1D,MAAM,WAAW,SAAS,yBAAyB,MAAM,IAAI,KAAA;EAE7D,IACE,EAAE,sBAAsB,eAAe,aACvC,WAAW,QAAQ,QAEnB;;EAIF,MAAM,iBAAiB,MAAM,KAC3B,WAAW,eAAe,iBAAiB,uBAAqB,KAAK,CAAC,CACxE;;EAGA,IAAI,cAAc;;;;;EAMlB,MAAM,qBAAqB;GACzB,cAAc;GAEd,MAAM,eAAe,SAAS,sBAAsB;GACpD,MAAM,aAAa,KAAK,IACtB,aAAa,OAAO,SAAS,aAAa,SAAS,aACnD,GAAG,eAAe,KAAK,SAAS,KAAK,sBAAsB,CAAC,CAAC,IAAI,CACnE;GACA,MAAM,WAAW,WAAW,sBAAsB,CAAC,CAAC,QAAQ;GAE5D,IAAI,WAAW,GACb,SAAS,cAAc;EAE3B;EAEA,MAAM,eAAe,MAAM,gBAAgB;GACzC,IAAI,CAAC,aAAa;IAChB,cAAc;IACd,eAAe,YAAY;GAC7B;EACF,CAAC;EAED,aAAa,aAAa,YAAY;CACxC,GAAG;EAAC;EAAY;EAAK;CAAK,CAAC;AAC7B"}

package/dist/components/data-table/root/data-table-grid-classes.d.ts

@@ -0,0 +1,10 @@
+//#region src/components/data-table/root/data-table-grid-classes.d.ts
+/**
+ * A grade de uma linha, comum à `DataTable.Row`, à `DataTable.HeaderRow` e às linhas-fantasma do
+ * `DataTable.Body`: o grid com o template das colunas, a linha vertical entre as células e a
+ * horizontal embaixo. Num lugar só, para as três não divergirem; a regra da última linha fica em
+ * cada uma.
+ */
+export declare const DATA_TABLE_GRID_CLASS_NAMES: string[];
+//#endregion
+//# sourceMappingURL=data-table-grid-classes.d.ts.map

package/dist/components/data-table/root/data-table-grid-classes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-grid-classes.d.ts","names":[],"sources":["../../../../src/components/data-table/root/data-table-grid-classes.ts"],"mappings":";;;;;;;qBAMa"}

package/dist/components/data-table/root/data-table-grid-classes.js

@@ -0,0 +1,22 @@
+//#region src/components/data-table/root/data-table-grid-classes.ts
+/**
+* A grade de uma linha, comum à `DataTable.Row`, à `DataTable.HeaderRow` e às linhas-fantasma do
+* `DataTable.Body`: o grid com o template das colunas, a linha vertical entre as células e a
+* horizontal embaixo. Num lugar só, para as três não divergirem; a regra da última linha fica em
+* cada uma.
+*/
+const DATA_TABLE_GRID_CLASS_NAMES = [
+	"grid",
+	"grid-cols-(--data-table-template)",
+	"divide-x",
+	"divide-gray-6",
+	"*:data-[pinned=end]:border-s",
+	"*:data-[pinned=end]:border-gray-6",
+	"*:has-[+[data-pinned=end]]:border-e-0",
+	"border-b",
+	"border-gray-6"
+];
+//#endregion
+export { DATA_TABLE_GRID_CLASS_NAMES };
+
+//# sourceMappingURL=data-table-grid-classes.js.map

package/dist/components/data-table/root/data-table-grid-classes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-grid-classes.js","names":[],"sources":["../../../../src/components/data-table/root/data-table-grid-classes.ts"],"sourcesContent":["/**\n * A grade de uma linha, comum à `DataTable.Row`, à `DataTable.HeaderRow` e às linhas-fantasma do\n * `DataTable.Body`: o grid com o template das colunas, a linha vertical entre as células e a\n * horizontal embaixo. Num lugar só, para as três não divergirem; a regra da última linha fica em\n * cada uma.\n */\nexport const DATA_TABLE_GRID_CLASS_NAMES: string[] = [\n  'grid',\n  'grid-cols-(--data-table-template)',\n\n  // Linha vertical entre as células: o `divide-x` põe borda no fim de cada filho, menos no\n  // último, e assim a linha não tem borda na ponta direita. Fica na linha, e não na célula, para\n  // a célula não precisar saber se é a última.\n  'divide-x',\n  'divide-gray-6',\n  // Na fixada do fim, a linha vertical fica do lado do início, e a célula antes dela perde a do\n  // fim: o centro rola por baixo e levaria a borda junto, e as duas somariam 2px quando encostam.\n  '*:data-[pinned=end]:border-s',\n  '*:data-[pinned=end]:border-gray-6',\n  '*:has-[+[data-pinned=end]]:border-e-0',\n\n  // Linha horizontal embaixo da linha.\n  'border-b',\n  'border-gray-6',\n];\n"],"mappings":";;;;;;;AAMA,MAAa,8BAAwC;CACnD;CACA;CAKA;CACA;CAGA;CACA;CACA;CAGA;CACA;AACF"}

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

@@ -0,0 +1,41 @@
+import { TableWith } from "../../../types/table-with.js";
+import "../../../types/index.js";
+import { RowData, TableFeatures } from "@tanstack/react-table";
+import { useRender } from "@base-ui/react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/data-table/root/data-table-root.d.ts
+export type DataTableRootProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'div'>, {
+  /** A tabela do `useTable`. Exige `columnSizingFeature`. */
+  table: TableWith<TFeatures, TData, 'columnSizingFeature'>;
+}>;
+/**
+ * O elemento do grid (`role="table"`; com `activeRowFeature`, `role="grid"`, que diz ao leitor
+ * de tela que as setas são da tabela). Escreve as variáveis das colunas, que toda
+ * `DataTable.Row` lê, e tem a largura exata da soma delas.
+ *
+ * Declara também a altura das linhas e dos headers e o espaçamento das células, que as partes
+ * leem. Com `rowDensityFeature`, marca o grid com `data-density`, e esses valores seguem a
+ * densidade; para outros valores, redefina as variáveis pela `className`.
+ *
+ * Com `loadingFeature`, marca `aria-busy` enquanto carrega e, depois de 200ms, `data-loading`: as
+ * células trocam o conteúdo por um skeleton, e o `DataTable.ScrollArea` mostra uma barra sob o
+ * cabeçalho. Uma resposta mais rápida que isso não mostra nada.
+ *
+ * Não rola: para rolar, e para o cabeçalho grudar, ponha-o num `DataTable.ScrollArea` ou em
+ * outro contêiner com `overflow`.
+ *
+ * @example
+ * ```tsx
+ * <DataTable.ScrollArea>
+ *   <DataTable.Root table={table} aria-label="Clientes">
+ *     …
+ *   </DataTable.Root>
+ * </DataTable.ScrollArea>
+ * ```
+ */
+export declare const DataTableRoot: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableRootProps<TFeatures, TData>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-root.d.ts.map

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

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

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

@@ -0,0 +1,72 @@
+import { hasTableFeature } from "../../../utils/has-feature.js";
+import { useDataTableLoading } from "../loading/use-data-table-loading.js";
+import { useDataTableColumnLayout } from "./use-data-table-column-layout.js";
+import { mergeProps, useRender } from "@base-ui/react";
+import { useSelector } from "@tanstack/react-store";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+//#region src/components/data-table/root/data-table-root.tsx
+/**
+* O elemento do grid (`role="table"`; com `activeRowFeature`, `role="grid"`, que diz ao leitor
+* de tela que as setas são da tabela). Escreve as variáveis das colunas, que toda
+* `DataTable.Row` lê, e tem a largura exata da soma delas.
+*
+* Declara também a altura das linhas e dos headers e o espaçamento das células, que as partes
+* leem. Com `rowDensityFeature`, marca o grid com `data-density`, e esses valores seguem a
+* densidade; para outros valores, redefina as variáveis pela `className`.
+*
+* Com `loadingFeature`, marca `aria-busy` enquanto carrega e, depois de 200ms, `data-loading`: as
+* células trocam o conteúdo por um skeleton, e o `DataTable.ScrollArea` mostra uma barra sob o
+* cabeçalho. Uma resposta mais rápida que isso não mostra nada.
+*
+* Não rola: para rolar, e para o cabeçalho grudar, ponha-o num `DataTable.ScrollArea` ou em
+* outro contêiner com `overflow`.
+*
+* @example
+* ```tsx
+* <DataTable.ScrollArea>
+*   <DataTable.Root table={table} aria-label="Clientes">
+*     …
+*   </DataTable.Root>
+* </DataTable.ScrollArea>
+* ```
+*/
+const DataTableRoot = (props) => {
+	const { table, render, className, ref, ...rest } = props;
+	const rootRef = useDataTableColumnLayout(table);
+	/**
+	* Re-renderiza só o `Root`, e só quando a densidade muda: as linhas chegam prontas por
+	* `children`, e as células mudam de tamanho pelas variáveis, sem render.
+	*/
+	const density = useSelector(table.store, () => hasTableFeature(table, "rowDensityFeature") ? table.atoms.rowDensity.get() : void 0);
+	const loading = useDataTableLoading(table);
+	const baseProps = {
+		"data-component": "DataTable.Root",
+		"data-density": density,
+		"data-loading": loading.isLoadingVisible ? "" : void 0,
+		"aria-busy": loading.isLoading || void 0,
+		role: hasTableFeature(table, "activeRowFeature") ? "grid" : "table",
+		className: mergeTwClassNames([
+			"w-(--data-table-width)",
+			"data-[density=compact]:[--data-table-header-height:--spacing(7)]",
+			"data-[density=compact]:[--data-table-row-height:--spacing(8)]",
+			"data-[density=compact]:[--data-table-cell-padding:--spacing(1.5)]",
+			"[--data-table-header-height:--spacing(8)]",
+			"[--data-table-row-height:--spacing(10)]",
+			"[--data-table-cell-padding:--spacing(2)]",
+			"data-[density=comfortable]:[--data-table-header-height:--spacing(10)]",
+			"data-[density=comfortable]:[--data-table-row-height:--spacing(12)]",
+			"data-[density=comfortable]:[--data-table-cell-padding:--spacing(3)]"
+		], className)
+	};
+	return useRender({
+		render,
+		ref: [rootRef, ref ?? null],
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+DataTableRoot.displayName = "DataTable.Root";
+//#endregion
+export { DataTableRoot };
+
+//# sourceMappingURL=data-table-root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-root.js","names":[],"sources":["../../../../src/components/data-table/root/data-table-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { RowDensity } from '../../../features';\nimport type { TableWith } from '../../../types';\nimport { hasTableFeature } from '../../../utils';\nimport { useDataTableLoading } from '../loading/use-data-table-loading';\nimport { useDataTableColumnLayout } from './use-data-table-column-layout';\n\nexport type DataTableRootProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  {\n    /** A tabela do `useTable`. Exige `columnSizingFeature`. */\n    table: TableWith<TFeatures, TData, 'columnSizingFeature'>;\n  }\n>;\n\n/**\n * O elemento do grid (`role=\"table\"`; com `activeRowFeature`, `role=\"grid\"`, que diz ao leitor\n * de tela que as setas são da tabela). Escreve as variáveis das colunas, que toda\n * `DataTable.Row` lê, e tem a largura exata da soma delas.\n *\n * Declara também a altura das linhas e dos headers e o espaçamento das células, que as partes\n * leem. Com `rowDensityFeature`, marca o grid com `data-density`, e esses valores seguem a\n * densidade; para outros valores, redefina as variáveis pela `className`.\n *\n * Com `loadingFeature`, marca `aria-busy` enquanto carrega e, depois de 200ms, `data-loading`: as\n * células trocam o conteúdo por um skeleton, e o `DataTable.ScrollArea` mostra uma barra sob o\n * cabeçalho. Uma resposta mais rápida que isso não mostra nada.\n *\n * Não rola: para rolar, e para o cabeçalho grudar, ponha-o num `DataTable.ScrollArea` ou em\n * outro contêiner com `overflow`.\n *\n * @example\n * ```tsx\n * <DataTable.ScrollArea>\n *   <DataTable.Root table={table} aria-label=\"Clientes\">\n *     …\n *   </DataTable.Root>\n * </DataTable.ScrollArea>\n * ```\n */\nexport const DataTableRoot = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableRootProps<TFeatures, TData>,\n) => {\n  const { table, render, className, ref, ...rest } = props;\n\n  const rootRef = useDataTableColumnLayout(table);\n\n  /**\n   * Re-renderiza só o `Root`, e só quando a densidade muda: as linhas chegam prontas por\n   * `children`, e as células mudam de tamanho pelas variáveis, sem render.\n   */\n  const density = useSelector(table.store, (): RowDensity | undefined =>\n    hasTableFeature(table, 'rowDensityFeature')\n      ? table.atoms.rowDensity.get()\n      : undefined,\n  );\n\n  const loading = useDataTableLoading(table);\n\n  const baseProps = {\n    'data-component': 'DataTable.Root',\n    'data-density': density,\n    'data-loading': loading.isLoadingVisible ? '' : undefined,\n    // Avisa o leitor de tela que o conteúdo está mudando, e que deve esperar para ler.\n    'aria-busy': loading.isLoading || undefined,\n    role: hasTableFeature(table, 'activeRowFeature') ? 'grid' : 'table',\n    className: mergeTwClassNames(\n      [\n        // Largura definida, e não `max-content`: com zoom, o px fracionário faria o conteúdo e\n        // as larguras das partes se medirem em ciclo, e o cabeçalho e o corpo parariam em\n        // larguras diferentes. Antes do primeiro sync, a variável não existe e vale `auto`.\n        'w-(--data-table-width)',\n\n        'data-[density=compact]:[--data-table-header-height:--spacing(7)]',\n        'data-[density=compact]:[--data-table-row-height:--spacing(8)]',\n        'data-[density=compact]:[--data-table-cell-padding:--spacing(1.5)]',\n\n        // Densidade: a padrão vale também sem `rowDensityFeature`.\n        '[--data-table-header-height:--spacing(8)]',\n        '[--data-table-row-height:--spacing(10)]',\n        '[--data-table-cell-padding:--spacing(2)]',\n\n        'data-[density=comfortable]:[--data-table-header-height:--spacing(10)]',\n        'data-[density=comfortable]:[--data-table-row-height:--spacing(12)]',\n        'data-[density=comfortable]:[--data-table-cell-padding:--spacing(3)]',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    ref: [rootRef, ref ?? null],\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTableRoot.displayName = 'DataTable.Root';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,iBAIX,UACG;CACH,MAAM,EAAE,OAAO,QAAQ,WAAW,KAAK,GAAG,SAAS;CAEnD,MAAM,UAAU,yBAAyB,KAAK;;;;;CAM9C,MAAM,UAAU,YAAY,MAAM,aAChC,gBAAgB,OAAO,mBAAmB,IACtC,MAAM,MAAM,WAAW,IAAI,IAC3B,KAAA,CACN;CAEA,MAAM,UAAU,oBAAoB,KAAK;CAEzC,MAAM,YAAY;EAChB,kBAAkB;EAClB,gBAAgB;EAChB,gBAAgB,QAAQ,mBAAmB,KAAK,KAAA;EAEhD,aAAa,QAAQ,aAAa,KAAA;EAClC,MAAM,gBAAgB,OAAO,kBAAkB,IAAI,SAAS;EAC5D,WAAW,kBACT;GAIE;GAEA;GACA;GACA;GAGA;GACA;GACA;GAEA;GACA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,KAAK,CAAC,SAAS,OAAO,IAAI;EAC1B,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,cAAc,cAAc"}

package/dist/components/data-table/root/data-table-scroll-area.d.ts

@@ -0,0 +1,21 @@
+import { ScrollArea } from "@lucasbernardosn/react-ui/layout/scroll-area";
+//#region src/components/data-table/root/data-table-scroll-area.d.ts
+export type DataTableScrollAreaProps = ScrollArea.RootProps;
+/**
+ * A área de rolagem da tabela, montada com o `ScrollArea` da lib: `Root`, uma moldura com a
+ * borda, `Viewport`, `Content` e as barras. Os filhos vão no `Content`, e as props no `Root`.
+ *
+ * O viewport é o ancestral que rola, e é nele que o cabeçalho sticky se ancora. Na largura,
+ * abraça o grid e para no pai. Na altura, tem a das linhas: dentro de um pai com altura
+ * limitada, encolhe e as linhas rolam por dentro; sem limite, cresce e só rola na horizontal.
+ *
+ * As barras ficam numa faixa fora da moldura, só no eixo que transborda: não passam por cima das
+ * linhas, da seleção nem das colunas fixadas. A vertical começa abaixo do `DataTable.Header`,
+ * cuja altura é medida aqui.
+ */
+export declare const DataTableScrollArea: {
+  (props: DataTableScrollAreaProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-scroll-area.d.ts.map

package/dist/components/data-table/root/data-table-scroll-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-scroll-area.d.ts","names":[],"sources":["../../../../src/components/data-table/root/data-table-scroll-area.tsx"],"mappings":";;YASY,2BAA2B,WAAW;;;;;;;;;;;;;qBAcrC;GAA8B,OAAA,2CAAwB,IAAA"}