@lucasbernardosn/react-table 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,127 @@
+import { useDataTableHeaderOffset } from "./use-data-table-header-offset.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeStateClassNames, mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+import { useMemo } from "react";
+import { ScrollArea } from "@lucasbernardosn/react-ui/layout/scroll-area";
+import { mergeRefs } from "@lucasbernardosn/react-utils";
+//#region src/components/data-table/root/data-table-scroll-area.tsx
+/**
+* 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.
+*/
+const DataTableScrollArea = (props) => {
+	const { className, children, ref, ...rest } = props;
+	const headerOffsetRef = useDataTableHeaderOffset();
+	/**
+	* O ref de quem usa e o da medida do cabeçalho, no mesmo elemento. Memoizado: um callback novo
+	* a cada render desligaria e religaria o observer.
+	*/
+	const rootRef = useMemo(() => mergeRefs(headerOffsetRef, ref), [headerOffsetRef, ref]);
+	return /* @__PURE__ */ jsxs(ScrollArea.Root, {
+		ref: rootRef,
+		"data-component": "DataTable.ScrollArea",
+		className: mergeStateClassNames([
+			"w-max",
+			"max-w-full",
+			"[--scroll-area-scrollbar-size:--spacing(3)]",
+			"[--scroll-area-scrollbar-inset:0px]",
+			"[--scroll-area-thumb-size:--spacing(1)]",
+			"pointer-fine:[--scroll-area-thumb-size:--spacing(1.5)]",
+			"data-has-overflow-y:pe-(--scroll-area-scrollbar-size)",
+			"data-has-overflow-x:pb-(--scroll-area-scrollbar-size)"
+		], className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: mergeTwClassNames([
+					"h-full",
+					"relative",
+					"group/data-table-frame",
+					"overflow-clip",
+					"rounded-md",
+					"corner-squircle",
+					"border",
+					"border-gray-6",
+					"focus-ring-inside",
+					"[--focus-ring-offset:-1px]",
+					"ring-gray-12"
+				]),
+				children: [
+					/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+						focusRing: true,
+						className: "overscroll-x-contain scroll-pt-(--data-table-header-offset)",
+						children: /* @__PURE__ */ jsx(ScrollArea.Content, { children })
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"aria-hidden": true,
+						"data-component": "DataTable.LoadingBar",
+						className: mergeTwClassNames([
+							"hidden",
+							"group-has-[[data-component='DataTable.Root'][data-loading]]/data-table-frame:block",
+							"pointer-events-none",
+							"absolute",
+							"inset-x-0",
+							"top-[calc(var(--data-table-header-offset,0px)-1px)]",
+							"z-30",
+							"h-0.5",
+							"overflow-hidden",
+							"before:content-['']",
+							"before:absolute",
+							"before:inset-y-0",
+							"before:w-2/5",
+							"before:rounded-full",
+							"before:bg-gray-11",
+							"not-motion-reduced:before:animate-progress-indeterminate",
+							"motion-reduced:before:w-full",
+							"motion-reduced:before:bg-gray-8"
+						])
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"aria-hidden": true,
+						"data-component": "DataTable.ResizeGuide",
+						className: mergeTwClassNames([
+							"hidden",
+							"group-has-[[data-component='DataTable.ResizeHandle']:hover]/data-table-frame:block",
+							"group-has-[[data-component='DataTable.ResizeHandle'][data-resizing]]/data-table-frame:block",
+							"not-supports-[anchor-name:--a]:hidden!",
+							"pointer-events-none",
+							"absolute",
+							"inset-y-0",
+							"z-30",
+							"w-0.5",
+							"left-[anchor(left)]",
+							"-translate-x-1/2",
+							"[position-anchor:--data-table-resize-handle]",
+							"bg-gray-9",
+							"group-has-[[data-component='DataTable.ResizeHandle'][data-resizing]]/data-table-frame:bg-black",
+							"dark:group-has-[[data-component='DataTable.ResizeHandle'][data-resizing]]/data-table-frame:bg-white"
+						])
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+				orientation: "vertical",
+				className: "mt-[calc(var(--data-table-header-offset,0px)+1px)]",
+				children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {})
+			}),
+			/* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+				orientation: "horizontal",
+				children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {})
+			}),
+			/* @__PURE__ */ jsx(ScrollArea.Corner, {})
+		]
+	});
+};
+DataTableScrollArea.displayName = "DataTable.ScrollArea";
+//#endregion
+export { DataTableScrollArea };
+
+//# sourceMappingURL=data-table-scroll-area.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-scroll-area.js","names":[],"sources":["../../../../src/components/data-table/root/data-table-scroll-area.tsx"],"sourcesContent":["import { ScrollArea } from '@lucasbernardosn/react-ui/layout/scroll-area';\nimport {\n  mergeStateClassNames,\n  mergeTwClassNames,\n} from '@lucasbernardosn/react-ui/utils';\nimport { mergeRefs } from '@lucasbernardosn/react-utils';\nimport { useMemo } from 'react';\nimport { useDataTableHeaderOffset } from './use-data-table-header-offset';\n\nexport type DataTableScrollAreaProps = ScrollArea.RootProps;\n\n/**\n * A área de rolagem da tabela, montada com o `ScrollArea` da lib: `Root`, uma moldura com a\n * borda, `Viewport`, `Content` e as barras. Os filhos vão no `Content`, e as props no `Root`.\n *\n * O viewport é o ancestral que rola, e é nele que o cabeçalho sticky se ancora. Na largura,\n * abraça o grid e para no pai. Na altura, tem a das linhas: dentro de um pai com altura\n * limitada, encolhe e as linhas rolam por dentro; sem limite, cresce e só rola na horizontal.\n *\n * As barras ficam numa faixa fora da moldura, só no eixo que transborda: não passam por cima das\n * linhas, da seleção nem das colunas fixadas. A vertical começa abaixo do `DataTable.Header`,\n * cuja altura é medida aqui.\n */\nexport const DataTableScrollArea = (props: DataTableScrollAreaProps) => {\n  const { className, children, ref, ...rest } = props;\n\n  const headerOffsetRef = useDataTableHeaderOffset();\n\n  /**\n   * O ref de quem usa e o da medida do cabeçalho, no mesmo elemento. Memoizado: um callback novo\n   * a cada render desligaria e religaria o observer.\n   */\n  const rootRef = useMemo(\n    () => mergeRefs(headerOffsetRef, ref),\n    [headerOffsetRef, ref],\n  );\n\n  return (\n    <ScrollArea.Root\n      ref={rootRef}\n      data-component=\"DataTable.ScrollArea\"\n      className={mergeStateClassNames(\n        [\n          // Sem `flex-1`: a altura é a das linhas, e o `flex-shrink` do item para no pai. O\n          // `overflow-hidden` do `ScrollArea.Root` zera o mínimo, e as linhas passam a rolar.\n\n          // Abraça o grid, que mede pelo `min-width: fit-content` do `Content`, mais a faixa das\n          // barras, e para no pai.\n          'w-max',\n          'max-w-full',\n\n          // A faixa das barras: 12px sem recuo, com o polegar mais fino centralizado nela.\n          '[--scroll-area-scrollbar-size:--spacing(3)]',\n          '[--scroll-area-scrollbar-inset:0px]',\n          '[--scroll-area-thumb-size:--spacing(1)]',\n          'pointer-fine:[--scroll-area-thumb-size:--spacing(1.5)]',\n\n          // A faixa só existe no eixo que transborda. O Base UI põe as barras nas bordas do\n          // `Root`, que com o padding caem fora da moldura.\n          'data-has-overflow-y:pe-(--scroll-area-scrollbar-size)',\n          'data-has-overflow-x:pb-(--scroll-area-scrollbar-size)',\n        ],\n        className,\n      )}\n      {...rest}\n    >\n      <div\n        className={mergeTwClassNames([\n          // A altura do `Root` sem a faixa de baixo, para o viewport rolar dentro dela.\n          'h-full',\n\n          // Referência da barra do carregamento, que se posiciona aqui e lê o `data-loading` do grid.\n          'relative',\n          'group/data-table-frame',\n\n          // A borda cerca só a tabela, e não a faixa das barras. Num elemento que não rola: no\n          // viewport, ela subiria junto com as linhas. O `overflow-clip` recorta o cabeçalho\n          // sticky contra o raio sem virar contêiner de rolagem, e o sticky segue no viewport.\n          'overflow-clip',\n          'rounded-md',\n          'corner-squircle',\n          'border',\n          'border-gray-6',\n\n          // O anel do viewport, que se marca com `data-focus-ring`: o tema o pinta no pai\n          // direto, que é esta moldura, e não mais o `Root`.\n          'focus-ring-inside',\n          '[--focus-ring-offset:-1px]',\n          'ring-gray-12',\n        ])}\n      >\n        <ScrollArea.Viewport\n          focusRing={true}\n          // O arrasto horizontal no fim do curso não vira \"voltar página\"; o eixo Y fica livre\n          // para o pull to refresh. O `scroll-padding-top` faz a linha que recebe o foco parar\n          // abaixo do cabeçalho sticky, e não embaixo dele.\n          className=\"overscroll-x-contain scroll-pt-(--data-table-header-offset)\"\n        >\n          <ScrollArea.Content>{children}</ScrollArea.Content>\n        </ScrollArea.Viewport>\n\n        <div\n          aria-hidden={true}\n          data-component=\"DataTable.LoadingBar\"\n          className={mergeTwClassNames([\n            // A barra do carregamento (`data-loading` no `DataTable.Root`), na borda de baixo do\n            // cabeçalho. Na moldura, e não no cabeçalho: não acompanha a rolagem horizontal e\n            // cobre sempre a largura visível. O seletor nomeia o `Root`: o `Skeleton` do `ui`\n            // também marca `data-loading`, e um dentro de uma célula acenderia a barra.\n            'hidden',\n            \"group-has-[[data-component='DataTable.Root'][data-loading]]/data-table-frame:block\",\n            'pointer-events-none',\n            'absolute',\n            'inset-x-0',\n            'top-[calc(var(--data-table-header-offset,0px)-1px)]',\n            'z-30',\n            'h-0.5',\n            'overflow-hidden',\n\n            // Sem progresso real, um trecho corre de um lado ao outro, sem pausa. A animação do\n            // tema pede o trecho com 2/5 da largura. Com movimento reduzido, a barra fica parada\n            // e inteira.\n            \"before:content-['']\",\n            'before:absolute',\n            'before:inset-y-0',\n            'before:w-2/5',\n            'before:rounded-full',\n            'before:bg-gray-11',\n            'not-motion-reduced:before:animate-progress-indeterminate',\n            'motion-reduced:before:w-full',\n            'motion-reduced:before:bg-gray-8',\n          ])}\n        />\n\n        <div\n          aria-hidden={true}\n          data-component=\"DataTable.ResizeGuide\"\n          className={mergeTwClassNames([\n            // A linha-guia do resize, na altura toda da tabela, presa à linha vertical da coluna\n            // pela âncora que o `DataTable.ResizeHandle` marca no hover e no arrasto. Na moldura e\n            // acima das fixadas: a borda da coluna pode passar por baixo de uma fixada, e a guia\n            // segue à vista.\n            'hidden',\n            \"group-has-[[data-component='DataTable.ResizeHandle']:hover]/data-table-frame:block\",\n            \"group-has-[[data-component='DataTable.ResizeHandle'][data-resizing]]/data-table-frame:block\",\n            // Sem anchor positioning, a guia ficaria no canto da moldura: fica só a linha do\n            // handle, no cabeçalho.\n            'not-supports-[anchor-name:--a]:hidden!',\n            'pointer-events-none',\n            'absolute',\n            'inset-y-0',\n            'z-30',\n            // No lugar da linha do handle: centrada nele, sobre a borda e 1px antes dela.\n            'w-0.5',\n            'left-[anchor(left)]',\n            '-translate-x-1/2',\n            '[position-anchor:--data-table-resize-handle]',\n            'bg-gray-9',\n            \"group-has-[[data-component='DataTable.ResizeHandle'][data-resizing]]/data-table-frame:bg-black\",\n            \"dark:group-has-[[data-component='DataTable.ResizeHandle'][data-resizing]]/data-table-frame:bg-white\",\n          ])}\n        />\n      </div>\n\n      <ScrollArea.Scrollbar\n        orientation=\"vertical\"\n        // Começa abaixo do cabeçalho sticky, na altura da primeira linha: a do cabeçalho mais a\n        // borda de cima da moldura.\n        className=\"mt-[calc(var(--data-table-header-offset,0px)+1px)]\"\n      >\n        <ScrollArea.Thumb />\n      </ScrollArea.Scrollbar>\n\n      <ScrollArea.Scrollbar orientation=\"horizontal\">\n        <ScrollArea.Thumb />\n      </ScrollArea.Scrollbar>\n\n      <ScrollArea.Corner />\n    </ScrollArea.Root>\n  );\n};\n\nDataTableScrollArea.displayName = 'DataTable.ScrollArea';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuBA,MAAa,uBAAuB,UAAoC;CACtE,MAAM,EAAE,WAAW,UAAU,KAAK,GAAG,SAAS;CAE9C,MAAM,kBAAkB,yBAAyB;;;;;CAMjD,MAAM,UAAU,cACR,UAAU,iBAAiB,GAAG,GACpC,CAAC,iBAAiB,GAAG,CACvB;CAEA,OACE,qBAAC,WAAW,MAAZ;EACE,KAAK;EACL,kBAAe;EACf,WAAW,qBACT;GAME;GACA;GAGA;GACA;GACA;GACA;GAIA;GACA;EACF,GACA,SACF;EACA,GAAI;EA1BN,UAAA;GA4BE,qBAAC,OAAD;IACE,WAAW,kBAAkB;KAE3B;KAGA;KACA;KAKA;KACA;KACA;KACA;KACA;KAIA;KACA;KACA;IACF,CAAC;IAvBH,UAAA;KAyBE,oBAAC,WAAW,UAAZ;MACE,WAAW;MAIX,WAAU;MAEV,UAAA,oBAAC,WAAW,SAAZ,EAAqB,SAA6B,CAAA;KAC/B,CAAA;KAErB,oBAAC,OAAD;MACE,eAAa;MACb,kBAAe;MACf,WAAW,kBAAkB;OAK3B;OACA;OACA;OACA;OACA;OACA;OACA;OACA;OACA;OAKA;OACA;OACA;OACA;OACA;OACA;OACA;OACA;OACA;MACF,CAAC;KACF,CAAA;KAED,oBAAC,OAAD;MACE,eAAa;MACb,kBAAe;MACf,WAAW,kBAAkB;OAK3B;OACA;OACA;OAGA;OACA;OACA;OACA;OACA;OAEA;OACA;OACA;OACA;OACA;OACA;OACA;MACF,CAAC;KACF,CAAA;IACE;;GAEL,oBAAC,WAAW,WAAZ;IACE,aAAY;IAGZ,WAAU;IAEV,UAAA,oBAAC,WAAW,OAAZ,CAAmB,CAAA;GACC,CAAA;GAEtB,oBAAC,WAAW,WAAZ;IAAsB,aAAY;IAChC,UAAA,oBAAC,WAAW,OAAZ,CAAmB,CAAA;GACC,CAAA;GAEtB,oBAAC,WAAW,QAAZ,CAAoB,CAAA;EACL;;AAErB;AAEA,oBAAoB,cAAc"}

package/dist/components/data-table/root/get-data-table-column-layout.d.ts

@@ -0,0 +1,45 @@
+import { TableWith } from "../../../types/table-with.js";
+import "../../../types/index.js";
+import { RowData, TableFeatures } from "@tanstack/react-table";
+//#region src/components/data-table/root/get-data-table-column-layout.d.ts
+/** O layout das colunas do grid, nos valores que o `Root` põe nas variáveis CSS. */
+export type DataTableColumnLayout = {
+  /** A largura de cada coluna visível, em px, na ordem das células. */
+  template: string;
+  /** A soma das larguras, em px. */
+  width: string;
+  /**
+   * O deslocamento de cada coluna fixada, em px, pelo nome da variável que a célula dela lê: no
+   * início, a soma das fixadas antes dela; no fim, a das fixadas depois.
+   */
+  offsets: Record<string, string>;
+  /**
+   * A largura das colunas fixadas de cada lado, em px: o `scroll-padding` lateral do contêiner que
+   * rola. Sem ele, o foco num elemento coberto por uma fixada não rola até ele, porque para o
+   * navegador o elemento já está na área visível.
+   */
+  scrollPadding: {
+    start: string;
+    end: string;
+  };
+};
+/**
+ * O layout das colunas visíveis, a partir dos headers folha: a linha de headers que
+ * particiona as colunas fixadas na mesma ordem de `row.getVisibleCells()`, então os tracks
+ * batem com as células.
+ *
+ * @example
+ * ```ts
+ * // Colunas visíveis de 44, 150 e 100px, com a primeira e a segunda fixadas no início:
+ * getDataTableColumnLayout(table);
+ * // → {
+ * //   template: '44px 150px 100px',
+ * //   width: '294px',
+ * //   offsets: { '--data-table-pin-start-0': '0px', '--data-table-pin-start-1': '44px' },
+ * //   scrollPadding: { start: '194px', end: '0px' },
+ * // }
+ * ```
+ */
+export declare const getDataTableColumnLayout: <TFeatures extends TableFeatures, TData extends RowData>(table: TableWith<TFeatures, TData, "columnSizingFeature">) => DataTableColumnLayout;
+//#endregion
+//# sourceMappingURL=get-data-table-column-layout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"get-data-table-column-layout.d.ts","names":[],"sources":["../../../../src/components/data-table/root/get-data-table-column-layout.ts"],"mappings":";;;;;YASY;;EAEV;;EAEA;;;;;EAKA,SAAS;;;;;;EAMT;IAAiB;IAAe;;;;;;;;;;;;;;;;;;;;qBAoBrB,2BACX,kBAAkB,eAClB,cAAc,SAEd,OAAO,UAAU,WAAW,kCAC3B"}

package/dist/components/data-table/root/get-data-table-column-layout.js

@@ -0,0 +1,55 @@
+import { hasHeaderFeature, hasTableFeature } from "../../../utils/has-feature.js";
+import { getDataTableColumnPinning, getDataTablePinnedOffsetVariable } from "./get-data-table-column-pinning.js";
+//#region src/components/data-table/root/get-data-table-column-layout.ts
+/**
+* O layout das colunas visíveis, a partir dos headers folha: a linha de headers que
+* particiona as colunas fixadas na mesma ordem de `row.getVisibleCells()`, então os tracks
+* batem com as células.
+*
+* @example
+* ```ts
+* // Colunas visíveis de 44, 150 e 100px, com a primeira e a segunda fixadas no início:
+* getDataTableColumnLayout(table);
+* // → {
+* //   template: '44px 150px 100px',
+* //   width: '294px',
+* //   offsets: { '--data-table-pin-start-0': '0px', '--data-table-pin-start-1': '44px' },
+* //   scrollPadding: { start: '194px', end: '0px' },
+* // }
+* ```
+*/
+const getDataTableColumnLayout = (table) => {
+	/**
+	* O tipo já exige `columnSizingFeature`: isto é o caso sem TypeScript, em que uma coluna fora
+	* do template desalinharia o grid em silêncio.
+	*/
+	if (!hasTableFeature(table, "columnSizingFeature")) throw new Error("DataTable.Root: a tabela precisa de `columnSizingFeature` nas features.");
+	/**
+	* Com a feature registrada, todo header passa: o guard só estreita o header, que sai da tabela
+	* sem as features.
+	*/
+	const leafHeaders = (table.getHeaderGroups().at(-1)?.headers ?? []).filter((header) => hasHeaderFeature(header, "columnSizingFeature"));
+	/**
+	* Só das colunas visíveis, que são as que têm célula. O índice da variável é o da fixação, que
+	* a célula também lê.
+	*/
+	const offsets = leafHeaders.flatMap((header) => {
+		const pinning = getDataTableColumnPinning(header.column);
+		return pinning.position === "start" ? [[getDataTablePinnedOffsetVariable("start", pinning.index), `${header.column.getStart("start")}px`]] : pinning.position === "end" ? [[getDataTablePinnedOffsetVariable("end", pinning.index), `${header.column.getAfter("end")}px`]] : [];
+	});
+	/** A soma das larguras das colunas visíveis fixadas de um lado. */
+	const getPinnedWidth = (position) => leafHeaders.filter((header) => getDataTableColumnPinning(header.column).position === position).reduce((width, header) => width + header.getSize(), 0);
+	return {
+		template: leafHeaders.map((header) => `${header.getSize()}px`).join(" "),
+		width: `${table.getTotalSize()}px`,
+		offsets: Object.fromEntries(offsets),
+		scrollPadding: {
+			start: `${getPinnedWidth("start")}px`,
+			end: `${getPinnedWidth("end")}px`
+		}
+	};
+};
+//#endregion
+export { getDataTableColumnLayout };
+
+//# sourceMappingURL=get-data-table-column-layout.js.map

package/dist/components/data-table/root/get-data-table-column-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-data-table-column-layout.js","names":[],"sources":["../../../../src/components/data-table/root/get-data-table-column-layout.ts"],"sourcesContent":["import type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { TableWith } from '../../../types';\nimport { hasHeaderFeature, hasTableFeature } from '../../../utils';\nimport {\n  getDataTableColumnPinning,\n  getDataTablePinnedOffsetVariable,\n} from './get-data-table-column-pinning';\n\n/** O layout das colunas do grid, nos valores que o `Root` põe nas variáveis CSS. */\nexport type DataTableColumnLayout = {\n  /** A largura de cada coluna visível, em px, na ordem das células. */\n  template: string;\n  /** A soma das larguras, em px. */\n  width: string;\n  /**\n   * O deslocamento de cada coluna fixada, em px, pelo nome da variável que a célula dela lê: no\n   * início, a soma das fixadas antes dela; no fim, a das fixadas depois.\n   */\n  offsets: Record<string, string>;\n  /**\n   * A largura das colunas fixadas de cada lado, em px: o `scroll-padding` lateral do contêiner que\n   * rola. Sem ele, o foco num elemento coberto por uma fixada não rola até ele, porque para o\n   * navegador o elemento já está na área visível.\n   */\n  scrollPadding: { start: string; end: string };\n};\n\n/**\n * O layout das colunas visíveis, a partir dos headers folha: a linha de headers que\n * particiona as colunas fixadas na mesma ordem de `row.getVisibleCells()`, então os tracks\n * batem com as células.\n *\n * @example\n * ```ts\n * // Colunas visíveis de 44, 150 e 100px, com a primeira e a segunda fixadas no início:\n * getDataTableColumnLayout(table);\n * // → {\n * //   template: '44px 150px 100px',\n * //   width: '294px',\n * //   offsets: { '--data-table-pin-start-0': '0px', '--data-table-pin-start-1': '44px' },\n * //   scrollPadding: { start: '194px', end: '0px' },\n * // }\n * ```\n */\nexport const getDataTableColumnLayout = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  table: TableWith<TFeatures, TData, 'columnSizingFeature'>,\n): DataTableColumnLayout => {\n  /**\n   * O tipo já exige `columnSizingFeature`: isto é o caso sem TypeScript, em que uma coluna fora\n   * do template desalinharia o grid em silêncio.\n   */\n  if (!hasTableFeature(table, 'columnSizingFeature')) {\n    throw new Error(\n      'DataTable.Root: a tabela precisa de `columnSizingFeature` nas features.',\n    );\n  }\n\n  /**\n   * Com a feature registrada, todo header passa: o guard só estreita o header, que sai da tabela\n   * sem as features.\n   */\n  const leafHeaders = (table.getHeaderGroups().at(-1)?.headers ?? []).filter(\n    (header) => hasHeaderFeature(header, 'columnSizingFeature'),\n  );\n\n  /**\n   * Só das colunas visíveis, que são as que têm célula. O índice da variável é o da fixação, que\n   * a célula também lê.\n   */\n  const offsets = leafHeaders.flatMap((header): [string, string][] => {\n    const pinning = getDataTableColumnPinning(header.column);\n\n    return pinning.position === 'start'\n      ? [\n          [\n            getDataTablePinnedOffsetVariable('start', pinning.index),\n            `${header.column.getStart('start')}px`,\n          ],\n        ]\n      : pinning.position === 'end'\n        ? [\n            [\n              getDataTablePinnedOffsetVariable('end', pinning.index),\n              `${header.column.getAfter('end')}px`,\n            ],\n          ]\n        : [];\n  });\n\n  /** A soma das larguras das colunas visíveis fixadas de um lado. */\n  const getPinnedWidth = (position: 'start' | 'end') =>\n    leafHeaders\n      .filter(\n        (header) =>\n          getDataTableColumnPinning(header.column).position === position,\n      )\n      .reduce((width, header) => width + header.getSize(), 0);\n\n  return {\n    template: leafHeaders.map((header) => `${header.getSize()}px`).join(' '),\n    width: `${table.getTotalSize()}px`,\n    offsets: Object.fromEntries(offsets),\n    scrollPadding: {\n      start: `${getPinnedWidth('start')}px`,\n      end: `${getPinnedWidth('end')}px`,\n    },\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4CA,MAAa,4BAIX,UAC0B;;;;;CAK1B,IAAI,CAAC,gBAAgB,OAAO,qBAAqB,GAC/C,MAAM,IAAI,MACR,yEACF;;;;;CAOF,MAAM,eAAe,MAAM,gBAAgB,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,WAAW,CAAC,EAAA,CAAG,QACjE,WAAW,iBAAiB,QAAQ,qBAAqB,CAC5D;;;;;CAMA,MAAM,UAAU,YAAY,SAAS,WAA+B;EAClE,MAAM,UAAU,0BAA0B,OAAO,MAAM;EAEvD,OAAO,QAAQ,aAAa,UACxB,CACE,CACE,iCAAiC,SAAS,QAAQ,KAAK,GACvD,GAAG,OAAO,OAAO,SAAS,OAAO,EAAE,GACrC,CACF,IACA,QAAQ,aAAa,QACnB,CACE,CACE,iCAAiC,OAAO,QAAQ,KAAK,GACrD,GAAG,OAAO,OAAO,SAAS,KAAK,EAAE,GACnC,CACF,IACA,CAAC;CACT,CAAC;;CAGD,MAAM,kBAAkB,aACtB,YACG,QACE,WACC,0BAA0B,OAAO,MAAM,CAAC,CAAC,aAAa,QAC1D,CAAC,CACA,QAAQ,OAAO,WAAW,QAAQ,OAAO,QAAQ,GAAG,CAAC;CAE1D,OAAO;EACL,UAAU,YAAY,KAAK,WAAW,GAAG,OAAO,QAAQ,EAAE,GAAG,CAAC,CAAC,KAAK,GAAG;EACvE,OAAO,GAAG,MAAM,aAAa,EAAE;EAC/B,SAAS,OAAO,YAAY,OAAO;EACnC,eAAe;GACb,OAAO,GAAG,eAAe,OAAO,EAAE;GAClC,KAAK,GAAG,eAAe,KAAK,EAAE;EAChC;CACF;AACF"}

package/dist/components/data-table/root/get-data-table-column-pinning.d.ts

@@ -0,0 +1,46 @@
+import { Column, ColumnPinningPosition, RowData, TableFeatures } from "@tanstack/react-table";
+import React from "react";
+//#region src/components/data-table/root/get-data-table-column-pinning.d.ts
+/** Onde uma coluna está fixada, e a posição dela entre as fixadas do mesmo lado. */
+export type DataTableColumnPinning = {
+  /** O lado da fixação, ou `false` fora dela. */
+  position: ColumnPinningPosition;
+  /** O `column.getPinnedIndex()`: a posição no estado do pinning, que conta as escondidas. */
+  index: number;
+};
+/**
+ * A fixação de uma coluna. Sem `columnPinningFeature`, a coluna não está fixada.
+ *
+ * @example
+ * ```ts
+ * // Com `columnPinning: { start: ['select', 'name'], end: [] }`:
+ * getDataTableColumnPinning(table.getColumn('name'));
+ * // → { position: 'start', index: 1 }
+ * ```
+ */
+export declare const getDataTableColumnPinning: <TFeatures extends TableFeatures, TData extends RowData, TValue>(column: Column<TFeatures, TData, TValue>) => DataTableColumnPinning;
+/**
+ * O nome da variável com o deslocamento de uma coluna fixada: o `DataTable.Root` escreve, e a
+ * célula e o header da coluna leem. Os dois lados usam o mesmo índice, o da fixação, e batem
+ * mesmo com uma coluna fixada escondida.
+ *
+ * @example
+ * ```ts
+ * getDataTablePinnedOffsetVariable('start', 1);
+ * // → '--data-table-pin-start-1'
+ * ```
+ */
+export declare const getDataTablePinnedOffsetVariable: (position: "start" | "end", index: number) => string;
+/**
+ * O estilo de uma célula fixada: o deslocamento do lado dela, pela variável que o
+ * `DataTable.Root` escreve. Fora da fixação, nenhum.
+ *
+ * @example
+ * ```ts
+ * getDataTablePinnedStyle({ position: 'start', index: 1 });
+ * // → { insetInlineStart: 'var(--data-table-pin-start-1)' }
+ * ```
+ */
+export declare const getDataTablePinnedStyle: (pinning: DataTableColumnPinning) => React.CSSProperties | undefined;
+//#endregion
+//# sourceMappingURL=get-data-table-column-pinning.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"get-data-table-column-pinning.d.ts","names":[],"sources":["../../../../src/components/data-table/root/get-data-table-column-pinning.ts"],"mappings":";;;;YAUY;;EAEV,UAAU;;EAEV;;;;;;;;;;;;qBAaW,4BACX,kBAAkB,eAClB,cAAc,SACd,QAEA,QAAQ,OAAO,WAAW,OAAO,YAChC;;;;;;;;;;;;qBAgBU,mCACX,2BACA;;;;;;;;;;;qBAaW,0BACX,SAAS,2BACR,MAAM"}

package/dist/components/data-table/root/get-data-table-column-pinning.js

@@ -0,0 +1,46 @@
+import { hasColumnFeature } from "../../../utils/has-feature.js";
+//#region src/components/data-table/root/get-data-table-column-pinning.ts
+/**
+* A fixação de uma coluna. Sem `columnPinningFeature`, a coluna não está fixada.
+*
+* @example
+* ```ts
+* // Com `columnPinning: { start: ['select', 'name'], end: [] }`:
+* getDataTableColumnPinning(table.getColumn('name'));
+* // → { position: 'start', index: 1 }
+* ```
+*/
+const getDataTableColumnPinning = (column) => hasColumnFeature(column, "columnPinningFeature") ? {
+	position: column.getIsPinned(),
+	index: column.getPinnedIndex()
+} : {
+	position: false,
+	index: 0
+};
+/**
+* O nome da variável com o deslocamento de uma coluna fixada: o `DataTable.Root` escreve, e a
+* célula e o header da coluna leem. Os dois lados usam o mesmo índice, o da fixação, e batem
+* mesmo com uma coluna fixada escondida.
+*
+* @example
+* ```ts
+* getDataTablePinnedOffsetVariable('start', 1);
+* // → '--data-table-pin-start-1'
+* ```
+*/
+const getDataTablePinnedOffsetVariable = (position, index) => `--data-table-pin-${position}-${index}`;
+/**
+* O estilo de uma célula fixada: o deslocamento do lado dela, pela variável que o
+* `DataTable.Root` escreve. Fora da fixação, nenhum.
+*
+* @example
+* ```ts
+* getDataTablePinnedStyle({ position: 'start', index: 1 });
+* // → { insetInlineStart: 'var(--data-table-pin-start-1)' }
+* ```
+*/
+const getDataTablePinnedStyle = (pinning) => pinning.position === "start" ? { insetInlineStart: `var(${getDataTablePinnedOffsetVariable("start", pinning.index)})` } : pinning.position === "end" ? { insetInlineEnd: `var(${getDataTablePinnedOffsetVariable("end", pinning.index)})` } : void 0;
+//#endregion
+export { getDataTableColumnPinning, getDataTablePinnedOffsetVariable, getDataTablePinnedStyle };
+
+//# sourceMappingURL=get-data-table-column-pinning.js.map

package/dist/components/data-table/root/get-data-table-column-pinning.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-data-table-column-pinning.js","names":[],"sources":["../../../../src/components/data-table/root/get-data-table-column-pinning.ts"],"sourcesContent":["import type {\n  Column,\n  ColumnPinningPosition,\n  RowData,\n  TableFeatures,\n} from '@tanstack/react-table';\nimport type React from 'react';\nimport { hasColumnFeature } from '../../../utils';\n\n/** Onde uma coluna está fixada, e a posição dela entre as fixadas do mesmo lado. */\nexport type DataTableColumnPinning = {\n  /** O lado da fixação, ou `false` fora dela. */\n  position: ColumnPinningPosition;\n  /** O `column.getPinnedIndex()`: a posição no estado do pinning, que conta as escondidas. */\n  index: number;\n};\n\n/**\n * A fixação de uma coluna. Sem `columnPinningFeature`, a coluna não está fixada.\n *\n * @example\n * ```ts\n * // Com `columnPinning: { start: ['select', 'name'], end: [] }`:\n * getDataTableColumnPinning(table.getColumn('name'));\n * // → { position: 'start', index: 1 }\n * ```\n */\nexport const getDataTableColumnPinning = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue,\n>(\n  column: Column<TFeatures, TData, TValue>,\n): DataTableColumnPinning =>\n  hasColumnFeature(column, 'columnPinningFeature')\n    ? { position: column.getIsPinned(), index: column.getPinnedIndex() }\n    : { position: false, index: 0 };\n\n/**\n * O nome da variável com o deslocamento de uma coluna fixada: o `DataTable.Root` escreve, e a\n * célula e o header da coluna leem. Os dois lados usam o mesmo índice, o da fixação, e batem\n * mesmo com uma coluna fixada escondida.\n *\n * @example\n * ```ts\n * getDataTablePinnedOffsetVariable('start', 1);\n * // → '--data-table-pin-start-1'\n * ```\n */\nexport const getDataTablePinnedOffsetVariable = (\n  position: 'start' | 'end',\n  index: number,\n) => `--data-table-pin-${position}-${index}`;\n\n/**\n * O estilo de uma célula fixada: o deslocamento do lado dela, pela variável que o\n * `DataTable.Root` escreve. Fora da fixação, nenhum.\n *\n * @example\n * ```ts\n * getDataTablePinnedStyle({ position: 'start', index: 1 });\n * // → { insetInlineStart: 'var(--data-table-pin-start-1)' }\n * ```\n */\nexport const getDataTablePinnedStyle = (\n  pinning: DataTableColumnPinning,\n): React.CSSProperties | undefined =>\n  pinning.position === 'start'\n    ? {\n        insetInlineStart: `var(${getDataTablePinnedOffsetVariable('start', pinning.index)})`,\n      }\n    : pinning.position === 'end'\n      ? {\n          insetInlineEnd: `var(${getDataTablePinnedOffsetVariable('end', pinning.index)})`,\n        }\n      : undefined;\n"],"mappings":";;;;;;;;;;;;AA2BA,MAAa,6BAKX,WAEA,iBAAiB,QAAQ,sBAAsB,IAC3C;CAAE,UAAU,OAAO,YAAY;CAAG,OAAO,OAAO,eAAe;AAAE,IACjE;CAAE,UAAU;CAAO,OAAO;AAAE;;;;;;;;;;;;AAalC,MAAa,oCACX,UACA,UACG,oBAAoB,SAAS,GAAG;;;;;;;;;;;AAYrC,MAAa,2BACX,YAEA,QAAQ,aAAa,UACjB,EACE,kBAAkB,OAAO,iCAAiC,SAAS,QAAQ,KAAK,EAAE,GACpF,IACA,QAAQ,aAAa,QACnB,EACE,gBAAgB,OAAO,iCAAiC,OAAO,QAAQ,KAAK,EAAE,GAChF,IACA,KAAA"}

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

@@ -0,0 +1,13 @@
+//#region src/components/data-table/root/get-data-table-scroll-parent.d.ts
+/**
+ * O ancestral que rola a tabela. A `DataTable.ScrollArea` põe nele o `scroll-padding-top` com a
+ * altura do cabeçalho.
+ *
+ * @example
+ * ```ts
+ * getDataTableScrollParent(bodyElement)?.scrollTo({ top: 0 });
+ * ```
+ */
+export declare const getDataTableScrollParent: (element: Element) => HTMLElement | undefined;
+//#endregion
+//# sourceMappingURL=get-data-table-scroll-parent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"get-data-table-scroll-parent.d.ts","names":[],"sources":["../../../../src/components/data-table/root/get-data-table-scroll-parent.ts"],"mappings":";;;;;;;;;;qBASa,2BAA4B,SAAS,YAAO"}

package/dist/components/data-table/root/get-data-table-scroll-parent.js

@@ -0,0 +1,20 @@
+//#region src/components/data-table/root/get-data-table-scroll-parent.ts
+/**
+* O ancestral que rola a tabela. A `DataTable.ScrollArea` põe nele o `scroll-padding-top` com a
+* altura do cabeçalho.
+*
+* @example
+* ```ts
+* getDataTableScrollParent(bodyElement)?.scrollTo({ top: 0 });
+* ```
+*/
+const getDataTableScrollParent = (element) => {
+	for (let parent = element.parentElement; parent; parent = parent.parentElement) {
+		const { overflowY } = getComputedStyle(parent);
+		if (overflowY === "auto" || overflowY === "scroll") return parent;
+	}
+};
+//#endregion
+export { getDataTableScrollParent };
+
+//# sourceMappingURL=get-data-table-scroll-parent.js.map

package/dist/components/data-table/root/get-data-table-scroll-parent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-data-table-scroll-parent.js","names":[],"sources":["../../../../src/components/data-table/root/get-data-table-scroll-parent.ts"],"sourcesContent":["/**\n * O ancestral que rola a tabela. A `DataTable.ScrollArea` põe nele o `scroll-padding-top` com a\n * altura do cabeçalho.\n *\n * @example\n * ```ts\n * getDataTableScrollParent(bodyElement)?.scrollTo({ top: 0 });\n * ```\n */\nexport const getDataTableScrollParent = (element: Element) => {\n  for (\n    let parent = element.parentElement;\n    parent;\n    parent = parent.parentElement\n  ) {\n    const { overflowY } = getComputedStyle(parent);\n\n    if (overflowY === 'auto' || overflowY === 'scroll') {\n      return parent;\n    }\n  }\n\n  return undefined;\n};\n"],"mappings":";;;;;;;;;;AASA,MAAa,4BAA4B,YAAqB;CAC5D,KACE,IAAI,SAAS,QAAQ,eACrB,QACA,SAAS,OAAO,eAChB;EACA,MAAM,EAAE,cAAc,iBAAiB,MAAM;EAE7C,IAAI,cAAc,UAAU,cAAc,UACxC,OAAO;CAEX;AAGF"}

package/dist/components/data-table/root/use-data-table-column-layout.d.ts

@@ -0,0 +1,25 @@
+import { TableWith } from "../../../types/table-with.js";
+import "../../../types/index.js";
+import { RowData, TableFeatures } from "@tanstack/react-table";
+//#region src/components/data-table/root/use-data-table-column-layout.d.ts
+/**
+ * Sincroniza o layout das colunas com o elemento do grid, nas variáveis que as partes leem:
+ *
+ * - `--data-table-template`: a largura de cada coluna visível, em px, na ordem das células;
+ * - `--data-table-width`: a soma delas;
+ * - `--data-table-pin-<lado>-<n>`: o deslocamento de cada coluna fixada, que a célula dela lê.
+ *
+ * Escreve também o `scroll-padding` lateral do contêiner que rola, com a largura das fixadas de
+ * cada lado: o foco que vai para um elemento coberto por uma fixada (o Tab no cabeçalho, um
+ * controle numa célula) rola até ele.
+ *
+ * Assina o store da tabela, fora do React: quando tamanho, visibilidade, ordem ou pinning das
+ * colunas mudam, só as variáveis mudam, sem render. A cada render do `Root` também sincroniza,
+ * para `columns` novos, que não passam pelo store. Nos dois casos, só toca no estilo se o layout
+ * mudou, e tira a variável de uma coluna que deixou de ser fixada.
+ *
+ * Devolve o callback ref do elemento do grid.
+ */
+export declare const useDataTableColumnLayout: <TFeatures extends TableFeatures, TData extends RowData>(table: TableWith<TFeatures, TData, "columnSizingFeature">) => (element: HTMLDivElement | null) => void;
+//#endregion
+//# sourceMappingURL=use-data-table-column-layout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-data-table-column-layout.d.ts","names":[],"sources":["../../../../src/components/data-table/root/use-data-table-column-layout.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;qBAwBa,2BACX,kBAAkB,eAClB,cAAc,SAEd,OAAO,UAAU,WAAW,mCAA6B,SA8E7C"}

package/dist/components/data-table/root/use-data-table-column-layout.js

@@ -0,0 +1,106 @@
+import { getDataTableScrollParent } from "./get-data-table-scroll-parent.js";
+import { getDataTableColumnLayout } from "./get-data-table-column-layout.js";
+import { useCallback, useLayoutEffect, useRef } from "react";
+//#region src/components/data-table/root/use-data-table-column-layout.ts
+/**
+* Sincroniza o layout das colunas com o elemento do grid, nas variáveis que as partes leem:
+*
+* - `--data-table-template`: a largura de cada coluna visível, em px, na ordem das células;
+* - `--data-table-width`: a soma delas;
+* - `--data-table-pin-<lado>-<n>`: o deslocamento de cada coluna fixada, que a célula dela lê.
+*
+* Escreve também o `scroll-padding` lateral do contêiner que rola, com a largura das fixadas de
+* cada lado: o foco que vai para um elemento coberto por uma fixada (o Tab no cabeçalho, um
+* controle numa célula) rola até ele.
+*
+* Assina o store da tabela, fora do React: quando tamanho, visibilidade, ordem ou pinning das
+* colunas mudam, só as variáveis mudam, sem render. A cada render do `Root` também sincroniza,
+* para `columns` novos, que não passam pelo store. Nos dois casos, só toca no estilo se o layout
+* mudou, e tira a variável de uma coluna que deixou de ser fixada.
+*
+* Devolve o callback ref do elemento do grid.
+*/
+const useDataTableColumnLayout = (table) => {
+	/**
+	* O elemento do grid, ligado pelo callback ref devolvido no fim.
+	*/
+	const elementRef = useRef(null);
+	/**
+	* As variáveis aplicadas no elemento atual, pelo nome. O `syncColumnLayout` compara com elas e
+	* só toca no estilo do que mudou: a maioria das mudanças do store (seleção, página) não mexe
+	* nas colunas.
+	*/
+	const lastVariablesRef = useRef({});
+	/**
+	* O contêiner que rola, procurado uma vez ao ligar o elemento: a busca lê o estilo computado dos
+	* ancestrais, e a cada tick do arrasto de uma coluna forçaria um recálculo de estilo.
+	*/
+	const scrollParentRef = useRef(void 0);
+	/** O `scroll-padding` lateral aplicado no contêiner, para só tocar no estilo se mudou. */
+	const lastScrollPaddingRef = useRef("");
+	/**
+	* A tabela do último render. O objeto `table` é novo a cada render; lido por ref, ele não entra
+	* nas dependências da assinatura, que senão seria desfeita e refeita em todo render.
+	*/
+	const tableRef = useRef(table);
+	/**
+	* Calcula o layout e o aplica no elemento, se mudou. Chamado de três lugares: ao ligar um
+	* elemento, depois de cada commit e a cada mudança do store. Lê tudo por ref, então a
+	* identidade é estável e não refaz o callback ref nem a assinatura.
+	*/
+	const syncColumnLayout = useCallback(() => {
+		const element = elementRef.current;
+		if (!element) return;
+		const layout = getDataTableColumnLayout(tableRef.current);
+		const variables = {
+			"--data-table-template": layout.template,
+			"--data-table-width": layout.width,
+			...layout.offsets
+		};
+		const lastVariables = lastVariablesRef.current;
+		for (const name of Object.keys(lastVariables)) if (!(name in variables)) element.style.removeProperty(name);
+		for (const [name, value] of Object.entries(variables)) if (lastVariables[name] !== value) element.style.setProperty(name, value);
+		lastVariablesRef.current = variables;
+		const scrollParent = scrollParentRef.current;
+		const scrollPadding = `${layout.scrollPadding.start} ${layout.scrollPadding.end}`;
+		if (scrollParent && lastScrollPaddingRef.current !== scrollPadding) {
+			scrollParent.style.scrollPaddingInline = scrollPadding;
+			lastScrollPaddingRef.current = scrollPadding;
+		}
+	}, []);
+	/**
+	* Um elemento novo (outro `render`, ou um remount só do elemento) nasce sem as variáveis. O que
+	* está em `lastVariablesRef` era do anterior: sem descartar, o sync acharia que nada mudou e não
+	* aplicaria no novo.
+	*/
+	const ref = useCallback((element) => {
+		elementRef.current = element;
+		lastVariablesRef.current = {};
+		scrollParentRef.current = element ? getDataTableScrollParent(element) : void 0;
+		lastScrollPaddingRef.current = "";
+		syncColumnLayout();
+	}, [syncColumnLayout]);
+	/**
+	* Sem dependências: roda depois de todo commit do `Root`. Cobre o que muda as colunas sem passar
+	* pelo store, como `columns` novos. Layout effect, e não effect, para o grid nunca pintar com o
+	* template antigo.
+	*/
+	useLayoutEffect(() => {
+		tableRef.current = table;
+		syncColumnLayout();
+	});
+	/**
+	* Tamanho, visibilidade, ordem e pinning mudam pelo store, inclusive a cada tick do arrasto de
+	* uma coluna: sincronizar daqui mantém tudo isso fora do React, sem render. O store é estável,
+	* então a assinatura vive enquanto o `Root` estiver montado.
+	*/
+	useLayoutEffect(() => {
+		const subscription = table.store.subscribe(syncColumnLayout);
+		return () => subscription.unsubscribe();
+	}, [table.store, syncColumnLayout]);
+	return ref;
+};
+//#endregion
+export { useDataTableColumnLayout };
+
+//# sourceMappingURL=use-data-table-column-layout.js.map

package/dist/components/data-table/root/use-data-table-column-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-data-table-column-layout.js","names":[],"sources":["../../../../src/components/data-table/root/use-data-table-column-layout.ts"],"sourcesContent":["import type { RowData, TableFeatures } from '@tanstack/react-table';\nimport { useCallback, useLayoutEffect, useRef } from 'react';\nimport type { TableWith } from '../../../types';\nimport { getDataTableColumnLayout } from './get-data-table-column-layout';\nimport { getDataTableScrollParent } from './get-data-table-scroll-parent';\n\n/**\n * Sincroniza o layout das colunas com o elemento do grid, nas variáveis que as partes leem:\n *\n * - `--data-table-template`: a largura de cada coluna visível, em px, na ordem das células;\n * - `--data-table-width`: a soma delas;\n * - `--data-table-pin-<lado>-<n>`: o deslocamento de cada coluna fixada, que a célula dela lê.\n *\n * Escreve também o `scroll-padding` lateral do contêiner que rola, com a largura das fixadas de\n * cada lado: o foco que vai para um elemento coberto por uma fixada (o Tab no cabeçalho, um\n * controle numa célula) rola até ele.\n *\n * Assina o store da tabela, fora do React: quando tamanho, visibilidade, ordem ou pinning das\n * colunas mudam, só as variáveis mudam, sem render. A cada render do `Root` também sincroniza,\n * para `columns` novos, que não passam pelo store. Nos dois casos, só toca no estilo se o layout\n * mudou, e tira a variável de uma coluna que deixou de ser fixada.\n *\n * Devolve o callback ref do elemento do grid.\n */\nexport const useDataTableColumnLayout = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  table: TableWith<TFeatures, TData, 'columnSizingFeature'>,\n) => {\n  /**\n   * O elemento do grid, ligado pelo callback ref devolvido no fim.\n   */\n  const elementRef = useRef<HTMLDivElement | null>(null);\n\n  /**\n   * As variáveis aplicadas no elemento atual, pelo nome. O `syncColumnLayout` compara com elas e\n   * só toca no estilo do que mudou: a maioria das mudanças do store (seleção, página) não mexe\n   * nas colunas.\n   */\n  const lastVariablesRef = useRef<Record<string, string>>({});\n\n  /**\n   * O contêiner que rola, procurado uma vez ao ligar o elemento: a busca lê o estilo computado dos\n   * ancestrais, e a cada tick do arrasto de uma coluna forçaria um recálculo de estilo.\n   */\n  const scrollParentRef = useRef<HTMLElement | undefined>(undefined);\n\n  /** O `scroll-padding` lateral aplicado no contêiner, para só tocar no estilo se mudou. */\n  const lastScrollPaddingRef = useRef('');\n\n  /**\n   * A tabela do último render. O objeto `table` é novo a cada render; lido por ref, ele não entra\n   * nas dependências da assinatura, que senão seria desfeita e refeita em todo render.\n   */\n  const tableRef = useRef(table);\n\n  /**\n   * Calcula o layout e o aplica no elemento, se mudou. Chamado de três lugares: ao ligar um\n   * elemento, depois de cada commit e a cada mudança do store. Lê tudo por ref, então a\n   * identidade é estável e não refaz o callback ref nem a assinatura.\n   */\n  const syncColumnLayout = useCallback(() => {\n    const element = elementRef.current;\n\n    if (!element) {\n      return;\n    }\n\n    const layout = getDataTableColumnLayout(tableRef.current);\n    const variables: Record<string, string> = {\n      '--data-table-template': layout.template,\n      '--data-table-width': layout.width,\n      ...layout.offsets,\n    };\n    const lastVariables = lastVariablesRef.current;\n\n    for (const name of Object.keys(lastVariables)) {\n      if (!(name in variables)) {\n        element.style.removeProperty(name);\n      }\n    }\n\n    for (const [name, value] of Object.entries(variables)) {\n      if (lastVariables[name] !== value) {\n        element.style.setProperty(name, value);\n      }\n    }\n\n    lastVariablesRef.current = variables;\n\n    const scrollParent = scrollParentRef.current;\n    const scrollPadding = `${layout.scrollPadding.start} ${layout.scrollPadding.end}`;\n\n    if (scrollParent && lastScrollPaddingRef.current !== scrollPadding) {\n      scrollParent.style.scrollPaddingInline = scrollPadding;\n      lastScrollPaddingRef.current = scrollPadding;\n    }\n  }, []);\n\n  /**\n   * Um elemento novo (outro `render`, ou um remount só do elemento) nasce sem as variáveis. O que\n   * está em `lastVariablesRef` era do anterior: sem descartar, o sync acharia que nada mudou e não\n   * aplicaria no novo.\n   */\n  const ref = useCallback(\n    (element: HTMLDivElement | null) => {\n      elementRef.current = element;\n      lastVariablesRef.current = {};\n      scrollParentRef.current = element\n        ? getDataTableScrollParent(element)\n        : undefined;\n      lastScrollPaddingRef.current = '';\n\n      syncColumnLayout();\n    },\n    [syncColumnLayout],\n  );\n\n  /**\n   * Sem dependências: roda depois de todo commit do `Root`. Cobre o que muda as colunas sem passar\n   * pelo store, como `columns` novos. Layout effect, e não effect, para o grid nunca pintar com o\n   * template antigo.\n   */\n  useLayoutEffect(() => {\n    tableRef.current = table;\n\n    syncColumnLayout();\n  });\n\n  /**\n   * Tamanho, visibilidade, ordem e pinning mudam pelo store, inclusive a cada tick do arrasto de\n   * uma coluna: sincronizar daqui mantém tudo isso fora do React, sem render. O store é estável,\n   * então a assinatura vive enquanto o `Root` estiver montado.\n   */\n  useLayoutEffect(() => {\n    const subscription = table.store.subscribe(syncColumnLayout);\n\n    return () => subscription.unsubscribe();\n  }, [table.store, syncColumnLayout]);\n\n  return ref;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,4BAIX,UACG;;;;CAIH,MAAM,aAAa,OAA8B,IAAI;;;;;;CAOrD,MAAM,mBAAmB,OAA+B,CAAC,CAAC;;;;;CAM1D,MAAM,kBAAkB,OAAgC,KAAA,CAAS;;CAGjE,MAAM,uBAAuB,OAAO,EAAE;;;;;CAMtC,MAAM,WAAW,OAAO,KAAK;;;;;;CAO7B,MAAM,mBAAmB,kBAAkB;EACzC,MAAM,UAAU,WAAW;EAE3B,IAAI,CAAC,SACH;EAGF,MAAM,SAAS,yBAAyB,SAAS,OAAO;EACxD,MAAM,YAAoC;GACxC,yBAAyB,OAAO;GAChC,sBAAsB,OAAO;GAC7B,GAAG,OAAO;EACZ;EACA,MAAM,gBAAgB,iBAAiB;EAEvC,KAAK,MAAM,QAAQ,OAAO,KAAK,aAAa,GAC1C,IAAI,EAAE,QAAQ,YACZ,QAAQ,MAAM,eAAe,IAAI;EAIrC,KAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,SAAS,GAClD,IAAI,cAAc,UAAU,OAC1B,QAAQ,MAAM,YAAY,MAAM,KAAK;EAIzC,iBAAiB,UAAU;EAE3B,MAAM,eAAe,gBAAgB;EACrC,MAAM,gBAAgB,GAAG,OAAO,cAAc,MAAM,GAAG,OAAO,cAAc;EAE5E,IAAI,gBAAgB,qBAAqB,YAAY,eAAe;GAClE,aAAa,MAAM,sBAAsB;GACzC,qBAAqB,UAAU;EACjC;CACF,GAAG,CAAC,CAAC;;;;;;CAOL,MAAM,MAAM,aACT,YAAmC;EAClC,WAAW,UAAU;EACrB,iBAAiB,UAAU,CAAC;EAC5B,gBAAgB,UAAU,UACtB,yBAAyB,OAAO,IAChC,KAAA;EACJ,qBAAqB,UAAU;EAE/B,iBAAiB;CACnB,GACA,CAAC,gBAAgB,CACnB;;;;;;CAOA,sBAAsB;EACpB,SAAS,UAAU;EAEnB,iBAAiB;CACnB,CAAC;;;;;;CAOD,sBAAsB;EACpB,MAAM,eAAe,MAAM,MAAM,UAAU,gBAAgB;EAE3D,aAAa,aAAa,YAAY;CACxC,GAAG,CAAC,MAAM,OAAO,gBAAgB,CAAC;CAElC,OAAO;AACT"}

package/dist/components/data-table/root/use-data-table-header-offset.d.ts

@@ -0,0 +1,15 @@
+//#region src/components/data-table/root/use-data-table-header-offset.d.ts
+/**
+ * Mede a altura do `DataTable.Header` dentro do contêiner e a escreve em
+ * `--data-table-header-offset`, no próprio contêiner. A barra de rolagem vertical lê a variável
+ * para começar abaixo do cabeçalho, que é sticky e cobriria o começo dela.
+ *
+ * Mede pelo `ResizeObserver`, fora do React: a altura muda com a densidade e com os níveis de um
+ * cabeçalho agrupado, sem render do contêiner. O cabeçalho é procurado quando o contêiner monta;
+ * um que monte depois não é medido, e a barra começa no topo.
+ *
+ * Devolve o callback ref do contêiner.
+ */
+export declare const useDataTableHeaderOffset: () => (element: HTMLElement | null) => void;
+//#endregion
+//# sourceMappingURL=use-data-table-header-offset.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-data-table-header-offset.d.ts","names":[],"sources":["../../../../src/components/data-table/root/use-data-table-header-offset.ts"],"mappings":";;;;;;;;;;;;qBAgBa,iCAAwB,SAIN"}

package/dist/components/data-table/root/use-data-table-header-offset.js

@@ -0,0 +1,35 @@
+import { useCallback, useRef } from "react";
+//#region src/components/data-table/root/use-data-table-header-offset.ts
+/** O cabeçalho da tabela, pelo `data-component` que o `DataTable.Header` põe. */
+const HEADER_SELECTOR = "[data-component=\"DataTable.Header\"]";
+/**
+* Mede a altura do `DataTable.Header` dentro do contêiner e a escreve em
+* `--data-table-header-offset`, no próprio contêiner. A barra de rolagem vertical lê a variável
+* para começar abaixo do cabeçalho, que é sticky e cobriria o começo dela.
+*
+* Mede pelo `ResizeObserver`, fora do React: a altura muda com a densidade e com os níveis de um
+* cabeçalho agrupado, sem render do contêiner. O cabeçalho é procurado quando o contêiner monta;
+* um que monte depois não é medido, e a barra começa no topo.
+*
+* Devolve o callback ref do contêiner.
+*/
+const useDataTableHeaderOffset = () => {
+	/** O observer do contêiner atual, desligado quando o elemento sai ou é trocado. */
+	const observerRef = useRef(null);
+	return useCallback((element) => {
+		observerRef.current?.disconnect();
+		observerRef.current = null;
+		const header = element?.querySelector(HEADER_SELECTOR);
+		if (!(element && header)) return;
+		const observer = new ResizeObserver(([entry]) => {
+			const height = entry?.borderBoxSize[0]?.blockSize ?? 0;
+			element.style.setProperty("--data-table-header-offset", `${height}px`);
+		});
+		observer.observe(header);
+		observerRef.current = observer;
+	}, []);
+};
+//#endregion
+export { useDataTableHeaderOffset };
+
+//# sourceMappingURL=use-data-table-header-offset.js.map