@lucasbernardosn/react-table 0.0.0-stage → 0.2.0

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

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

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

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

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

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

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

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

package/dist/components/data-table/root/data-table-grid-class-names.js

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,30 @@
+import { ScrollArea } from "@lucasbernardosn/react-ui/layout/scroll-area";
+//#region src/components/data-table/root/data-table-scroll-area.d.ts
+export type DataTableScrollAreaProps = ScrollArea.RootProps;
+/**
+ * A área de rolagem da tabela, montada com o `ScrollArea` da lib: `Root`, uma moldura com a
+ * borda, `Viewport`, `Content` e as barras. Os filhos vão no `Content`, e as props no `Root`.
+ *
+ * O viewport é o ancestral que rola, e é nele que o cabeçalho sticky se ancora. Na largura,
+ * abraça o grid e para no pai. Na altura, tem a das linhas: dentro de um pai com altura definida
+ * (`h-*`, ou um pai flex com altura definida), encolhe e as linhas rolam por dentro; sem limite,
+ * cresce e só rola na horizontal. Um pai só com `max-height` não basta: o viewport não resolve a
+ * altura dele, e as linhas além do limite ficam cortadas, sem rolagem.
+ *
+ * As barras ficam numa faixa fora da moldura: não passam por cima das linhas, da seleção nem das
+ * colunas fixadas. A faixa fica reservada nos dois eixos mesmo sem transbordo, e fica vazia
+ * quando não há o que rolar. A vertical começa abaixo do `DataTable.Header`, cuja altura é medida
+ * aqui.
+ *
+ * Monta também a barra de carga (`data-loading` do `DataTable.Root`) e a guia do resize, a linha
+ * que o `DataTable.ResizeHandle` mostra na altura toda da moldura (no vazio, só no cabeçalho). Os
+ * dois são internos: o
+ * `data-component="DataTable.ResizeGuide"` da guia não é uma parte pública, e ninguém precisa
+ * lê-lo.
+ */
+export declare const DataTableScrollArea: {
+  (props: DataTableScrollAreaProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-scroll-area.d.ts.map

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

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

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

@@ -0,0 +1,137 @@
+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 definida
+* (`h-*`, ou um pai flex com altura definida), encolhe e as linhas rolam por dentro; sem limite,
+* cresce e só rola na horizontal. Um pai só com `max-height` não basta: o viewport não resolve a
+* altura dele, e as linhas além do limite ficam cortadas, sem rolagem.
+*
+* As barras ficam numa faixa fora da moldura: não passam por cima das linhas, da seleção nem das
+* colunas fixadas. A faixa fica reservada nos dois eixos mesmo sem transbordo, e fica vazia
+* quando não há o que rolar. A vertical começa abaixo do `DataTable.Header`, cuja altura é medida
+* aqui.
+*
+* Monta também a barra de carga (`data-loading` do `DataTable.Root`) e a guia do resize, a linha
+* que o `DataTable.ResizeHandle` mostra na altura toda da moldura (no vazio, só no cabeçalho). Os
+* dois são internos: o
+* `data-component="DataTable.ResizeGuide"` da guia não é uma parte pública, e ninguém precisa
+* lê-lo.
+*/
+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)]",
+			"pe-(--scroll-area-scrollbar-size)",
+			"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!",
+							"group-has-[[data-component='DataTable.Empty']]/data-table-frame: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 definida\n * (`h-*`, ou um pai flex com altura definida), encolhe e as linhas rolam por dentro; sem limite,\n * cresce e só rola na horizontal. Um pai só com `max-height` não basta: o viewport não resolve a\n * altura dele, e as linhas além do limite ficam cortadas, sem rolagem.\n *\n * As barras ficam numa faixa fora da moldura: não passam por cima das linhas, da seleção nem das\n * colunas fixadas. A faixa fica reservada nos dois eixos mesmo sem transbordo, e fica vazia\n * quando não há o que rolar. A vertical começa abaixo do `DataTable.Header`, cuja altura é medida\n * aqui.\n *\n * Monta também a barra de carga (`data-loading` do `DataTable.Root`) e a guia do resize, a linha\n * que o `DataTable.ResizeHandle` mostra na altura toda da moldura (no vazio, só no cabeçalho). Os\n * dois são internos: o\n * `data-component=\"DataTable.ResizeGuide\"` da guia não é uma parte pública, e ninguém precisa\n * lê-lo.\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 reservada nos dois eixos, com ou sem transbordo: só no eixo que transborda, ela\n          // entraria quando as linhas ou as colunas passam do espaço, e a moldura saltaria 12px. O\n          // Base UI põe as barras nas bordas do `Root`, que com o padding caem fora da moldura.\n          'pe-(--scroll-area-scrollbar-size)',\n          '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. No vazio também: sem linhas, a guia cortaria a mensagem ao meio.\n            'not-supports-[anchor-name:--a]:hidden!',\n            \"group-has-[[data-component='DataTable.Empty']]/data-table-frame: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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,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;GAKA;GACA;EACF,GACA,SACF;EACA,GAAI;EA3BN,UAAA;GA6BE,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;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"}