@lucasbernardosn/react-table 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,87 @@
+import { hasTableFeature } from "../../../utils/has-feature.js";
+import { DataTablePageButton } from "./data-table-page-button.js";
+import { DataTablePageSizeSelect } from "./data-table-page-size-select.js";
+import { DataTablePageStatus } from "./data-table-page-status.js";
+import { DataTableRowRange } from "./data-table-row-range.js";
+import { DataTableSelectedCount } from "./data-table-selected-count.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps, useRender } from "@base-ui/react";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+//#region src/components/data-table/pagination/data-table-pagination.tsx
+/**
+* A barra da paginação, para baixo da tabela. Sem `children`, monta o padrão: à esquerda, a
+* contagem de selecionadas (com `rowSelectionFeature`); à direita, o `DataTable.PageSizeSelect`,
+* o `DataTable.RowRange`, o `DataTable.PageStatus` e os quatro `DataTable.PageButton`. Com
+* `children`, o app compõe as partes, cada uma com a `table`. Em tela estreita, os grupos quebram
+* linha.
+*
+* Funciona com a paginação local (`createPaginatedRowModel`) e com a da API
+* (`manualPagination`, com o `rowCount` ou o `pageCount`).
+*
+* É um `nav` com o nome "Paginação", trocável pelo `aria-label`: um marco, que o leitor de tela
+* lista e para onde salta.
+*
+* @example
+* ```tsx
+* <DataTable.Pagination table={table}>
+*   <DataTable.PageStatus table={table} />
+*   <DataTable.PageButton table={table} page="previous" />
+*   <DataTable.PageButton table={table} page="next" />
+* </DataTable.Pagination>
+* ```
+*/
+const DataTablePagination = (props) => {
+	const { table, render, className, children, ...rest } = props;
+	const content = children === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [hasTableFeature(table, "rowSelectionFeature") && /* @__PURE__ */ jsx(DataTableSelectedCount, { table }), /* @__PURE__ */ jsxs("div", {
+		className: "ms-auto flex flex-wrap items-center gap-x-4 gap-y-2",
+		children: [
+			/* @__PURE__ */ jsx(DataTablePageSizeSelect, { table }),
+			/* @__PURE__ */ jsx(DataTableRowRange, { table }),
+			/* @__PURE__ */ jsx(DataTablePageStatus, { table }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1",
+				children: [
+					/* @__PURE__ */ jsx(DataTablePageButton, {
+						table,
+						page: "first"
+					}),
+					/* @__PURE__ */ jsx(DataTablePageButton, {
+						table,
+						page: "previous"
+					}),
+					/* @__PURE__ */ jsx(DataTablePageButton, {
+						table,
+						page: "next"
+					}),
+					/* @__PURE__ */ jsx(DataTablePageButton, {
+						table,
+						page: "last"
+					})
+				]
+			})
+		]
+	})] }) : children;
+	const baseProps = {
+		"data-component": "DataTable.Pagination",
+		"aria-label": "Paginação",
+		className: mergeTwClassNames([
+			"flex",
+			"flex-wrap",
+			"items-center",
+			"justify-between",
+			"gap-x-6",
+			"gap-y-2"
+		], className),
+		children: content
+	};
+	return useRender({
+		render,
+		defaultTagName: "nav",
+		props: mergeProps(baseProps, rest)
+	});
+};
+DataTablePagination.displayName = "DataTable.Pagination";
+//#endregion
+export { DataTablePagination };
+
+//# sourceMappingURL=data-table-pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-pagination.js","names":[],"sources":["../../../../src/components/data-table/pagination/data-table-pagination.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { TableWith } from '../../../types';\nimport { hasTableFeature } from '../../../utils';\nimport { DataTablePageButton } from './data-table-page-button';\nimport { DataTablePageSizeSelect } from './data-table-page-size-select';\nimport { DataTablePageStatus } from './data-table-page-status';\nimport { DataTableRowRange } from './data-table-row-range';\nimport { DataTableSelectedCount } from './data-table-selected-count';\n\nexport type DataTablePaginationProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'nav'>,\n  {\n    /** A tabela. Exige `rowPaginationFeature`. */\n    table: TableWith<TFeatures, TData, 'rowPaginationFeature'>;\n  }\n>;\n\n/**\n * A barra da paginação, para baixo da tabela. Sem `children`, monta o padrão: à esquerda, a\n * contagem de selecionadas (com `rowSelectionFeature`); à direita, o `DataTable.PageSizeSelect`,\n * o `DataTable.RowRange`, o `DataTable.PageStatus` e os quatro `DataTable.PageButton`. Com\n * `children`, o app compõe as partes, cada uma com a `table`. Em tela estreita, os grupos quebram\n * linha.\n *\n * Funciona com a paginação local (`createPaginatedRowModel`) e com a da API\n * (`manualPagination`, com o `rowCount` ou o `pageCount`).\n *\n * É um `nav` com o nome \"Paginação\", trocável pelo `aria-label`: um marco, que o leitor de tela\n * lista e para onde salta.\n *\n * @example\n * ```tsx\n * <DataTable.Pagination table={table}>\n *   <DataTable.PageStatus table={table} />\n *   <DataTable.PageButton table={table} page=\"previous\" />\n *   <DataTable.PageButton table={table} page=\"next\" />\n * </DataTable.Pagination>\n * ```\n */\nexport const DataTablePagination = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTablePaginationProps<TFeatures, TData>,\n) => {\n  const { table, render, className, children, ...rest } = props;\n\n  const content =\n    children === undefined ? (\n      <>\n        {hasTableFeature(table, 'rowSelectionFeature') && (\n          <DataTableSelectedCount table={table} />\n        )}\n\n        {/* À direita mesmo sozinho, sem a contagem: o `justify-between` o levaria para a\n            esquerda. */}\n        <div className=\"ms-auto flex flex-wrap items-center gap-x-4 gap-y-2\">\n          <DataTablePageSizeSelect table={table} />\n          <DataTableRowRange table={table} />\n          <DataTablePageStatus table={table} />\n\n          <div className=\"flex items-center gap-1\">\n            <DataTablePageButton\n              table={table}\n              page=\"first\"\n            />\n            <DataTablePageButton\n              table={table}\n              page=\"previous\"\n            />\n            <DataTablePageButton\n              table={table}\n              page=\"next\"\n            />\n            <DataTablePageButton\n              table={table}\n              page=\"last\"\n            />\n          </div>\n        </div>\n      </>\n    ) : (\n      children\n    );\n\n  const baseProps = {\n    'data-component': 'DataTable.Pagination',\n    'aria-label': 'Paginação',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-wrap',\n        'items-center',\n        'justify-between',\n        'gap-x-6',\n        'gap-y-2',\n      ],\n      className,\n    ),\n    children: content,\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'nav',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTablePagination.displayName = 'DataTable.Pagination';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAa,uBAIX,UACG;CACH,MAAM,EAAE,OAAO,QAAQ,WAAW,UAAU,GAAG,SAAS;CAExD,MAAM,UACJ,aAAa,KAAA,IACX,qBAAA,UAAA,EAAA,UAAA,CACG,gBAAgB,OAAO,qBAAqB,KAC3C,oBAAC,wBAAD,EAA+B,MAAQ,CAAA,GAKzC,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,oBAAC,yBAAD,EAAgC,MAAQ,CAAA;GACxC,oBAAC,mBAAD,EAA0B,MAAQ,CAAA;GAClC,oBAAC,qBAAD,EAA4B,MAAQ,CAAA;GAEpC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,qBAAD;MACS;MACP,MAAK;KACN,CAAA;KACD,oBAAC,qBAAD;MACS;MACP,MAAK;KACN,CAAA;KACD,oBAAC,qBAAD;MACS;MACP,MAAK;KACN,CAAA;KACD,oBAAC,qBAAD;MACS;MACP,MAAK;KACN,CAAA;IACE;;EACF;CACL,CAAA,CAAA,EAAA,CAAA,IAEF;CAGJ,MAAM,YAAY;EAChB,kBAAkB;EAClB,cAAc;EACd,WAAW,kBACT;GACE;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,oBAAoB,cAAc"}

package/dist/components/data-table/pagination/data-table-row-range.d.ts

@@ -0,0 +1,49 @@
+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 React from "react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/data-table/pagination/data-table-row-range.d.ts
+/** As linhas da página atual e o total, para o texto do `DataTable.RowRange`. */
+export type DataTableRowRangeValues = {
+  /** A posição da primeira linha da página, a partir de 1, ou 0 sem linhas. */
+  firstRow: number;
+  /** A posição da última linha da página, ou 0 sem linhas. */
+  lastRow: number;
+  /**
+   * O total de linhas, ou `-1` sem ele: na paginação pela API, sem o `rowCount` da tabela, e, com
+   * `loadingFeature`, na carga sem linhas, antes de o total chegar.
+   */
+  rowCount: number;
+};
+export type DataTableRowRangeProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'span'>, {
+  /** A tabela. Exige `rowPaginationFeature`. */
+  table: TableWith<TFeatures, TData, 'rowPaginationFeature'>;
+  /**
+   * Uma função que recebe as posições e o total e devolve o texto.
+   * @default ({ firstRow, lastRow, rowCount }) => '11–20 de 243', ou '11–20' sem o total
+   */
+  children?: (values: DataTableRowRangeValues) => React.ReactNode;
+}>;
+/**
+ * Quais linhas a página mostra, e de quantas: "11–20 de 243". Com a paginação pela API, o total
+ * vem do `rowCount` da tabela; sem ele, só "11–20". Na carga sem linhas, como a primeira, fica
+ * vazio: o total ainda não chegou.
+ *
+ * Marca `role="status"`: quando o intervalo muda, como na troca de página, o leitor de tela
+ * anuncia o texto novo sem mover o foco.
+ *
+ * @example
+ * ```tsx
+ * <DataTable.RowRange table={table}>
+ *   {({ rowCount }) => `${rowCount} pessoas`}
+ * </DataTable.RowRange>
+ * ```
+ */
+export declare const DataTableRowRange: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableRowRangeProps<TFeatures, TData>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-row-range.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-row-range.d.ts","names":[],"sources":["../../../../src/components/data-table/pagination/data-table-row-range.tsx"],"mappings":";;;;;;;;YAUY;;EAEV;;EAEA;;;;;EAKA;;YAGU,uBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,OAAO,UAAU,WAAW;;;;;EAK5B,YAAY,QAAQ,4BAA4B,MAAM;;;;;;;;;;;;;;;;;qBAmB7C;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,uBAAuB,WAAW,SAAM,MAAA,+BAAA,MAAA"}

package/dist/components/data-table/pagination/data-table-row-range.js

@@ -0,0 +1,63 @@
+import { getDataTableLoadingWithoutRows } from "../loading/get-data-table-loading-without-rows.js";
+import { mergeProps, useRender } from "@base-ui/react";
+import { shallow, useSelector } from "@tanstack/react-store";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+//#region src/components/data-table/pagination/data-table-row-range.tsx
+/**
+* Quais linhas a página mostra, e de quantas: "11–20 de 243". Com a paginação pela API, o total
+* vem do `rowCount` da tabela; sem ele, só "11–20". Na carga sem linhas, como a primeira, fica
+* vazio: o total ainda não chegou.
+*
+* Marca `role="status"`: quando o intervalo muda, como na troca de página, o leitor de tela
+* anuncia o texto novo sem mover o foco.
+*
+* @example
+* ```tsx
+* <DataTable.RowRange table={table}>
+*   {({ rowCount }) => `${rowCount} pessoas`}
+* </DataTable.RowRange>
+* ```
+*/
+const DataTableRowRange = (props) => {
+	const { table, render, className, children, ...rest } = props;
+	/**
+	* Re-renderiza quando a página, o tamanho dela ou as linhas mudam. O store, e não só o atom da
+	* paginação: as linhas da página e o total mudam com os dados.
+	*/
+	const values = useSelector(table.store, () => {
+		const { pageIndex, pageSize } = table.atoms.pagination.get();
+		const pageRowCount = table.getRowModel().rows.length;
+		const offset = pageIndex * pageSize;
+		return {
+			firstRow: pageRowCount === 0 ? 0 : offset + 1,
+			lastRow: pageRowCount === 0 ? 0 : offset + pageRowCount,
+			rowCount: getDataTableLoadingWithoutRows(table) || table.options.manualPagination && table.options.rowCount === void 0 ? -1 : table.getRowCount()
+		};
+	}, { compare: shallow });
+	/** Re-renderiza quando a carga sem linhas começa ou termina. */
+	const isLoadingWithoutRows = useSelector(table.store, () => getDataTableLoadingWithoutRows(table));
+	const range = values.lastRow === 0 ? "0" : `${values.firstRow.toLocaleString("pt-BR")}–${values.lastRow.toLocaleString("pt-BR")}`;
+	/** Na carga sem linhas, "0" diria que não há nada, e não que ainda não se sabe. */
+	const defaultText = isLoadingWithoutRows ? "" : values.rowCount === -1 ? range : `${range} de ${values.rowCount.toLocaleString("pt-BR")}`;
+	const baseProps = {
+		"data-component": "DataTable.RowRange",
+		role: "status",
+		className: mergeTwClassNames([
+			"text-gray-11",
+			"text-sm",
+			"tabular-nums",
+			"whitespace-nowrap"
+		], className),
+		children: children === void 0 ? defaultText : children(values)
+	};
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, rest)
+	});
+};
+DataTableRowRange.displayName = "DataTable.RowRange";
+//#endregion
+export { DataTableRowRange };
+
+//# sourceMappingURL=data-table-row-range.js.map

package/dist/components/data-table/pagination/data-table-row-range.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-row-range.js","names":[],"sources":["../../../../src/components/data-table/pagination/data-table-row-range.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 { RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport type { TableWith } from '../../../types';\nimport { getDataTableLoadingWithoutRows } from '../loading/get-data-table-loading-without-rows';\n\n/** As linhas da página atual e o total, para o texto do `DataTable.RowRange`. */\nexport type DataTableRowRangeValues = {\n  /** A posição da primeira linha da página, a partir de 1, ou 0 sem linhas. */\n  firstRow: number;\n  /** A posição da última linha da página, ou 0 sem linhas. */\n  lastRow: number;\n  /**\n   * O total de linhas, ou `-1` sem ele: na paginação pela API, sem o `rowCount` da tabela, e, com\n   * `loadingFeature`, na carga sem linhas, antes de o total chegar.\n   */\n  rowCount: number;\n};\n\nexport type DataTableRowRangeProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  useRender.ComponentProps<'span'>,\n  {\n    /** A tabela. Exige `rowPaginationFeature`. */\n    table: TableWith<TFeatures, TData, 'rowPaginationFeature'>;\n    /**\n     * Uma função que recebe as posições e o total e devolve o texto.\n     * @default ({ firstRow, lastRow, rowCount }) => '11–20 de 243', ou '11–20' sem o total\n     */\n    children?: (values: DataTableRowRangeValues) => React.ReactNode;\n  }\n>;\n\n/**\n * Quais linhas a página mostra, e de quantas: \"11–20 de 243\". Com a paginação pela API, o total\n * vem do `rowCount` da tabela; sem ele, só \"11–20\". Na carga sem linhas, como a primeira, fica\n * vazio: o total ainda não chegou.\n *\n * Marca `role=\"status\"`: quando o intervalo muda, como na troca de página, o leitor de tela\n * anuncia o texto novo sem mover o foco.\n *\n * @example\n * ```tsx\n * <DataTable.RowRange table={table}>\n *   {({ rowCount }) => `${rowCount} pessoas`}\n * </DataTable.RowRange>\n * ```\n */\nexport const DataTableRowRange = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableRowRangeProps<TFeatures, TData>,\n) => {\n  const { table, render, className, children, ...rest } = props;\n\n  /**\n   * Re-renderiza quando a página, o tamanho dela ou as linhas mudam. O store, e não só o atom da\n   * paginação: as linhas da página e o total mudam com os dados.\n   */\n  const values = useSelector(\n    table.store,\n    (): DataTableRowRangeValues => {\n      const { pageIndex, pageSize } = table.atoms.pagination.get();\n      const pageRowCount = table.getRowModel().rows.length;\n      const offset = pageIndex * pageSize;\n\n      return {\n        firstRow: pageRowCount === 0 ? 0 : offset + 1,\n        lastRow: pageRowCount === 0 ? 0 : offset + pageRowCount,\n        // Sem o `rowCount`, o `getRowCount()` do TanStack conta as linhas carregadas, que na\n        // paginação pela API são só as da página.\n        rowCount:\n          getDataTableLoadingWithoutRows(table) ||\n          (table.options.manualPagination &&\n            table.options.rowCount === undefined)\n            ? -1\n            : table.getRowCount(),\n      };\n    },\n    { compare: shallow },\n  );\n\n  /** Re-renderiza quando a carga sem linhas começa ou termina. */\n  const isLoadingWithoutRows = useSelector(table.store, () =>\n    getDataTableLoadingWithoutRows(table),\n  );\n\n  const range =\n    values.lastRow === 0\n      ? '0'\n      : `${values.firstRow.toLocaleString('pt-BR')}–${values.lastRow.toLocaleString('pt-BR')}`;\n\n  /** Na carga sem linhas, \"0\" diria que não há nada, e não que ainda não se sabe. */\n  const defaultText = isLoadingWithoutRows\n    ? ''\n    : values.rowCount === -1\n      ? range\n      : `${range} de ${values.rowCount.toLocaleString('pt-BR')}`;\n\n  const baseProps = {\n    'data-component': 'DataTable.RowRange',\n    role: 'status',\n    className: mergeTwClassNames(\n      ['text-gray-11', 'text-sm', 'tabular-nums', 'whitespace-nowrap'],\n      className,\n    ),\n    children: children === undefined ? defaultText : children(values),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTableRowRange.displayName = 'DataTable.RowRange';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqDA,MAAa,qBAIX,UACG;CACH,MAAM,EAAE,OAAO,QAAQ,WAAW,UAAU,GAAG,SAAS;;;;;CAMxD,MAAM,SAAS,YACb,MAAM,aACyB;EAC7B,MAAM,EAAE,WAAW,aAAa,MAAM,MAAM,WAAW,IAAI;EAC3D,MAAM,eAAe,MAAM,YAAY,CAAC,CAAC,KAAK;EAC9C,MAAM,SAAS,YAAY;EAE3B,OAAO;GACL,UAAU,iBAAiB,IAAI,IAAI,SAAS;GAC5C,SAAS,iBAAiB,IAAI,IAAI,SAAS;GAG3C,UACE,+BAA+B,KAAK,KACnC,MAAM,QAAQ,oBACb,MAAM,QAAQ,aAAa,KAAA,IACzB,KACA,MAAM,YAAY;EAC1B;CACF,GACA,EAAE,SAAS,QAAQ,CACrB;;CAGA,MAAM,uBAAuB,YAAY,MAAM,aAC7C,+BAA+B,KAAK,CACtC;CAEA,MAAM,QACJ,OAAO,YAAY,IACf,MACA,GAAG,OAAO,SAAS,eAAe,OAAO,EAAE,GAAG,OAAO,QAAQ,eAAe,OAAO;;CAGzF,MAAM,cAAc,uBAChB,KACA,OAAO,aAAa,KAClB,QACA,GAAG,MAAM,MAAM,OAAO,SAAS,eAAe,OAAO;CAE3D,MAAM,YAAY;EAChB,kBAAkB;EAClB,MAAM;EACN,WAAW,kBACT;GAAC;GAAgB;GAAW;GAAgB;EAAmB,GAC/D,SACF;EACA,UAAU,aAAa,KAAA,IAAY,cAAc,SAAS,MAAM;CAClE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}

package/dist/components/data-table/pagination/data-table-selected-count.d.ts

@@ -0,0 +1,37 @@
+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 React from "react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/data-table/pagination/data-table-selected-count.d.ts
+export type DataTableSelectedCountProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'span'>, {
+  /** A tabela. Exige `rowSelectionFeature`. */
+  table: TableWith<TFeatures, TData, 'rowSelectionFeature'>;
+  /**
+   * Uma função que recebe quantas linhas estão marcadas e devolve o texto.
+   * @default (count) => '3 selecionadas', '1 selecionada' ou '0 selecionadas'
+   */
+  children?: (count: number) => React.ReactNode;
+}>;
+/**
+ * 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>
+ * ```
+ */
+export declare const DataTableSelectedCount: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableSelectedCountProps<TFeatures, TData>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-selected-count.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-selected-count.d.ts","names":[],"sources":["../../../../src/components/data-table/pagination/data-table-selected-count.tsx"],"mappings":";;;;;;;YAQY,4BACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,OAAO,UAAU,WAAW;;;;;EAK5B,YAAY,kBAAkB,MAAM;;;;;;;;;;;;;;;;;qBAmB3B;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,4BAA4B,WAAW,SAAM,MAAA,+BAAA,MAAA"}

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,116 @@
+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",
+			"in-[[role=columnheader]:has([data-popup-open])]:pointer-events-none",
+			"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        // Com um menu aberto no gatilho da célula, o backdrop do Base UI deixa um recorte do\n        // tamanho do gatilho, e a metade de dentro da área de agarre cairia nele: o hover acenderia\n        // a linha-guia com o menu aberto.\n        'in-[[role=columnheader]:has([data-popup-open])]:pointer-events-none',\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;GAIA;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"}