@lucasbernardosn/react-table 0.0.0-stage → 0.2.0

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-data-table-header-offset.js","names":[],"sources":["../../../../src/components/data-table/root/use-data-table-header-offset.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\n/** O cabeçalho da tabela, pelo `data-component` que o `DataTable.Header` põe. */\nconst HEADER_SELECTOR = '[data-component=\"DataTable.Header\"]';\n\n/**\n * Mede a altura do `DataTable.Header` dentro do contêiner e a escreve em\n * `--data-table-header-offset`, no próprio contêiner. A barra de rolagem vertical lê a variável\n * para começar abaixo do cabeçalho, que é sticky e cobriria o começo dela.\n *\n * Mede pelo `ResizeObserver`, fora do React: a altura muda com a densidade e com os níveis de um\n * cabeçalho agrupado, sem render do contêiner. O cabeçalho é procurado quando o contêiner monta;\n * um que monte depois não é medido, e a barra começa no topo.\n *\n * Devolve o callback ref do contêiner.\n */\nexport const useDataTableHeaderOffset = () => {\n  /** O observer do contêiner atual, desligado quando o elemento sai ou é trocado. */\n  const observerRef = useRef<ResizeObserver | null>(null);\n\n  return useCallback((element: HTMLElement | null) => {\n    observerRef.current?.disconnect();\n    observerRef.current = null;\n\n    const header = element?.querySelector(HEADER_SELECTOR);\n\n    if (!(element && header)) {\n      return;\n    }\n\n    const observer = new ResizeObserver(([entry]) => {\n      const height = entry?.borderBoxSize[0]?.blockSize ?? 0;\n\n      element.style.setProperty('--data-table-header-offset', `${height}px`);\n    });\n\n    observer.observe(header);\n    observerRef.current = observer;\n  }, []);\n};\n"],"mappings":";;;AAGA,MAAM,kBAAkB;;;;;;;;;;;;AAaxB,MAAa,iCAAiC;;CAE5C,MAAM,cAAc,OAA8B,IAAI;CAEtD,OAAO,aAAa,YAAgC;EAClD,YAAY,SAAS,WAAW;EAChC,YAAY,UAAU;EAEtB,MAAM,SAAS,SAAS,cAAc,eAAe;EAErD,IAAI,EAAE,WAAW,SACf;EAGF,MAAM,WAAW,IAAI,gBAAgB,CAAC,WAAW;GAC/C,MAAM,SAAS,OAAO,cAAc,EAAE,EAAE,aAAa;GAErD,QAAQ,MAAM,YAAY,8BAA8B,GAAG,OAAO,GAAG;EACvE,CAAC;EAED,SAAS,QAAQ,MAAM;EACvB,YAAY,UAAU;CACxB,GAAG,CAAC,CAAC;AACP"}

package/dist/components/data-table/selection/data-table-row-checkbox.d.ts

@@ -0,0 +1,33 @@
+import { RowWith } from "../../../types/table-with.js";
+import "../../../types/index.js";
+import { RowData, TableFeatures } from "@tanstack/react-table";
+import { Checkbox } from "@lucasbernardosn/react-ui/fields/checkbox";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/data-table/selection/data-table-row-checkbox.d.ts
+export type DataTableRowCheckboxProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Omit<Checkbox.RootProps, 'checked' | 'defaultChecked' | 'indeterminate' | 'onCheckedChange'>, {
+  /** A linha. Exige `rowSelectionFeature`. */
+  row: RowWith<TFeatures, TData, 'rowSelectionFeature'>;
+}>;
+/**
+ * O checkbox de seleção de uma linha, para a célula de uma coluna de seleção. Shift+clique
+ * seleciona o intervalo desde a última linha marcada (`enableRowRangeSelection: false` desliga).
+ * Numa linha que não seleciona (`enableRowSelection`), fica desabilitado; com sub-linhas em parte
+ * selecionadas, mostra o estado misto.
+ *
+ * A seleção guarda só os ids das linhas (`{ [rowId]: true }`) e sobrevive à troca de página: com
+ * a paginação pela API, os ids de outras páginas ficam no estado, e a linha volta marcada quando
+ * a página volta. Para isso, a tabela precisa do `getRowId` com o id do registro: sem ele, o id é
+ * a posição na página, que se repete em todas, e marcar a primeira linha de uma marcaria a
+ * primeira de todas. Os dados das linhas de outras páginas não estão na tabela
+ * (`getSelectedRowModel()` só traz as carregadas): para agir sobre a seleção, mande os ids à API
+ * e limpe com `table.resetRowSelection()` depois.
+ *
+ * Assina só a seleção. As props do `Checkbox.Root` passam adiante, como `colorScheme` e
+ * `aria-label`.
+ */
+export declare const DataTableRowCheckbox: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableRowCheckboxProps<TFeatures, TData>): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-row-checkbox.d.ts.map

package/dist/components/data-table/selection/data-table-row-checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-row-checkbox.d.ts","names":[],"sources":["../../../../src/components/data-table/selection/data-table-row-checkbox.tsx"],"mappings":";;;;;;YAOY,0BACV,kBAAkB,eAClB,cAAc,WACZ,cACF,KACE,SAAS;;EAKT,KAAK,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;qBAqBf;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,0BAA0B,WAAW,yBAAM,IAAA"}

package/dist/components/data-table/selection/data-table-row-checkbox.js

@@ -0,0 +1,50 @@
+import { hasRowFeature } from "../../../utils/has-feature.js";
+import { jsx } from "react/jsx-runtime";
+import { useSelector } from "@tanstack/react-store";
+import { Checkbox } from "@lucasbernardosn/react-ui/fields/checkbox";
+//#region src/components/data-table/selection/data-table-row-checkbox.tsx
+/**
+* O checkbox de seleção de uma linha, para a célula de uma coluna de seleção. Shift+clique
+* seleciona o intervalo desde a última linha marcada (`enableRowRangeSelection: false` desliga).
+* Numa linha que não seleciona (`enableRowSelection`), fica desabilitado; com sub-linhas em parte
+* selecionadas, mostra o estado misto.
+*
+* A seleção guarda só os ids das linhas (`{ [rowId]: true }`) e sobrevive à troca de página: com
+* a paginação pela API, os ids de outras páginas ficam no estado, e a linha volta marcada quando
+* a página volta. Para isso, a tabela precisa do `getRowId` com o id do registro: sem ele, o id é
+* a posição na página, que se repete em todas, e marcar a primeira linha de uma marcaria a
+* primeira de todas. Os dados das linhas de outras páginas não estão na tabela
+* (`getSelectedRowModel()` só traz as carregadas): para agir sobre a seleção, mande os ids à API
+* e limpe com `table.resetRowSelection()` depois.
+*
+* Assina só a seleção. As props do `Checkbox.Root` passam adiante, como `colorScheme` e
+* `aria-label`.
+*/
+const DataTableRowCheckbox = (props) => {
+	const { row, children, ...rest } = props;
+	/**
+	* O estado do checkbox num valor só, para uma assinatura por linha. Re-renderiza quando muda a
+	* seleção desta linha ou das sub-linhas; as sub-linhas mudam com os dados, que já trazem uma
+	* linha nova por prop.
+	*/
+	const checkedState = useSelector(row.table.atoms.rowSelection, () => row.getIsSelected() ? "checked" : row.getIsSomeSelected() ? "indeterminate" : "unchecked");
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		"data-component": "DataTable.RowCheckbox",
+		"aria-label": "Selecionar linha",
+		checked: checkedState === "checked",
+		indeterminate: checkedState === "indeterminate",
+		disabled: !row.getCanSelect(),
+		tabIndex: hasRowFeature(row, "activeRowFeature") ? -1 : void 0,
+		onCheckedChange: (checked, eventDetails) => row.getToggleSelectedHandler()({
+			target: { checked },
+			nativeEvent: eventDetails.event
+		}),
+		...rest,
+		children: children === void 0 ? /* @__PURE__ */ jsx(Checkbox.Indicator, {}) : children
+	});
+};
+DataTableRowCheckbox.displayName = "DataTable.RowCheckbox";
+//#endregion
+export { DataTableRowCheckbox };
+
+//# sourceMappingURL=data-table-row-checkbox.js.map

package/dist/components/data-table/selection/data-table-row-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-row-checkbox.js","names":[],"sources":["../../../../src/components/data-table/selection/data-table-row-checkbox.tsx"],"sourcesContent":["import { Checkbox } from '@lucasbernardosn/react-ui/fields/checkbox';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { RowWith } from '../../../types';\nimport { hasRowFeature } from '../../../utils';\n\nexport type DataTableRowCheckboxProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  Omit<\n    Checkbox.RootProps,\n    'checked' | 'defaultChecked' | 'indeterminate' | 'onCheckedChange'\n  >,\n  {\n    /** A linha. Exige `rowSelectionFeature`. */\n    row: RowWith<TFeatures, TData, 'rowSelectionFeature'>;\n  }\n>;\n\n/**\n * O checkbox de seleção de uma linha, para a célula de uma coluna de seleção. Shift+clique\n * seleciona o intervalo desde a última linha marcada (`enableRowRangeSelection: false` desliga).\n * Numa linha que não seleciona (`enableRowSelection`), fica desabilitado; com sub-linhas em parte\n * selecionadas, mostra o estado misto.\n *\n * A seleção guarda só os ids das linhas (`{ [rowId]: true }`) e sobrevive à troca de página: com\n * a paginação pela API, os ids de outras páginas ficam no estado, e a linha volta marcada quando\n * a página volta. Para isso, a tabela precisa do `getRowId` com o id do registro: sem ele, o id é\n * a posição na página, que se repete em todas, e marcar a primeira linha de uma marcaria a\n * primeira de todas. Os dados das linhas de outras páginas não estão na tabela\n * (`getSelectedRowModel()` só traz as carregadas): para agir sobre a seleção, mande os ids à API\n * e limpe com `table.resetRowSelection()` depois.\n *\n * Assina só a seleção. As props do `Checkbox.Root` passam adiante, como `colorScheme` e\n * `aria-label`.\n */\nexport const DataTableRowCheckbox = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableRowCheckboxProps<TFeatures, TData>,\n) => {\n  const { row, children, ...rest } = props;\n\n  /**\n   * O estado do checkbox num valor só, para uma assinatura por linha. Re-renderiza quando muda a\n   * seleção desta linha ou das sub-linhas; as sub-linhas mudam com os dados, que já trazem uma\n   * linha nova por prop.\n   */\n  const checkedState = useSelector(row.table.atoms.rowSelection, () =>\n    row.getIsSelected()\n      ? 'checked'\n      : row.getIsSomeSelected()\n        ? 'indeterminate'\n        : 'unchecked',\n  );\n\n  return (\n    <Checkbox.Root\n      data-component=\"DataTable.RowCheckbox\"\n      aria-label=\"Selecionar linha\"\n      checked={checkedState === 'checked'}\n      indeterminate={checkedState === 'indeterminate'}\n      disabled={!row.getCanSelect()}\n      // Com a navegação, a tabela tem um ponto de Tab só, a linha ativa, e o Espaço nela alterna\n      // a seleção. O clique continua.\n      tabIndex={hasRowFeature(row, 'activeRowFeature') ? -1 : undefined}\n      // O handler lê `target.checked` e o Shift do evento; o Base UI entrega os dois separados.\n      onCheckedChange={(checked, eventDetails) =>\n        row.getToggleSelectedHandler()({\n          target: { checked },\n          nativeEvent: eventDetails.event,\n        })\n      }\n      {...rest}\n    >\n      {children === undefined ? <Checkbox.Indicator /> : children}\n    </Checkbox.Root>\n  );\n};\n\nDataTableRowCheckbox.displayName = 'DataTable.RowCheckbox';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAa,wBAIX,UACG;CACH,MAAM,EAAE,KAAK,UAAU,GAAG,SAAS;;;;;;CAOnC,MAAM,eAAe,YAAY,IAAI,MAAM,MAAM,oBAC/C,IAAI,cAAc,IACd,YACA,IAAI,kBAAkB,IACpB,kBACA,WACR;CAEA,OACE,oBAAC,SAAS,MAAV;EACE,kBAAe;EACf,cAAW;EACX,SAAS,iBAAiB;EAC1B,eAAe,iBAAiB;EAChC,UAAU,CAAC,IAAI,aAAa;EAG5B,UAAU,cAAc,KAAK,kBAAkB,IAAI,KAAK,KAAA;EAExD,kBAAkB,SAAS,iBACzB,IAAI,yBAAyB,CAAC,CAAC;GAC7B,QAAQ,EAAE,QAAQ;GAClB,aAAa,aAAa;EAC5B,CAAC;EAEH,GAAI;EAEH,UAAA,aAAa,KAAA,IAAY,oBAAC,SAAS,WAAV,CAAqB,CAAA,IAAI;CACtC,CAAA;AAEnB;AAEA,qBAAqB,cAAc"}

package/dist/components/data-table/selection/data-table-select-all-checkbox.d.ts

@@ -0,0 +1,31 @@
+import { TableWith } from "../../../types/table-with.js";
+import "../../../types/index.js";
+import { RowData, TableFeatures } from "@tanstack/react-table";
+import { Checkbox } from "@lucasbernardosn/react-ui/fields/checkbox";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/data-table/selection/data-table-select-all-checkbox.d.ts
+export type DataTableSelectAllCheckboxProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Omit<Checkbox.RootProps, 'checked' | 'defaultChecked' | 'indeterminate' | 'onCheckedChange'>, {
+  /** A tabela. Exige `rowSelectionFeature`. */
+  table: TableWith<TFeatures, TData, 'rowSelectionFeature'>;
+  /**
+   * O que o checkbox marca e mede: as linhas da página ou todas as linhas da tabela. Com
+   * paginação, a página: o checkbox fica no cabeçalho da página à vista, e marcar linhas
+   * escondidas em outras surpreende. Com a paginação pela API (`manualPagination`), a tabela só
+   * tem a página carregada, e `'all'` contaria os ids selecionados em outras páginas.
+   * @default 'page' com `rowPaginationFeature`, 'all' sem
+   */
+  scope?: 'page' | 'all';
+}>;
+/**
+ * O checkbox que marca ou desmarca todas as linhas, para o header de uma coluna de seleção. Com
+ * parte das linhas marcadas, mostra o estado misto; o clique então marca todas. Com
+ * `loadingFeature`, fica desabilitado enquanto a tabela carrega.
+ *
+ * As props do `Checkbox.Root` passam adiante, como `colorScheme` e `aria-label`.
+ */
+export declare const DataTableSelectAllCheckbox: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableSelectAllCheckboxProps<TFeatures, TData>): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-select-all-checkbox.d.ts.map

package/dist/components/data-table/selection/data-table-select-all-checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-select-all-checkbox.d.ts","names":[],"sources":["../../../../src/components/data-table/selection/data-table-select-all-checkbox.tsx"],"mappings":";;;;;;YAOY,gCACV,kBAAkB,eAClB,cAAc,WACZ,cACF,KACE,SAAS;;EAKT,OAAO,UAAU,WAAW;;;;;;;;EAQ5B;;;;;;;;;qBAWS;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,gCAAgC,WAAW,yBAAM,IAAA"}

package/dist/components/data-table/selection/data-table-select-all-checkbox.js

@@ -0,0 +1,44 @@
+import { hasTableFeature } from "../../../utils/has-feature.js";
+import { jsx } from "react/jsx-runtime";
+import { useSelector } from "@tanstack/react-store";
+import { Checkbox } from "@lucasbernardosn/react-ui/fields/checkbox";
+//#region src/components/data-table/selection/data-table-select-all-checkbox.tsx
+/**
+* O checkbox que marca ou desmarca todas as linhas, para o header de uma coluna de seleção. Com
+* parte das linhas marcadas, mostra o estado misto; o clique então marca todas. Com
+* `loadingFeature`, fica desabilitado enquanto a tabela carrega.
+*
+* As props do `Checkbox.Root` passam adiante, como `colorScheme` e `aria-label`.
+*/
+const DataTableSelectAllCheckbox = (props) => {
+	const { table, scope, children, ...rest } = props;
+	const isPageScope = scope === void 0 ? hasTableFeature(table, "rowPaginationFeature") : scope === "page";
+	/**
+	* O estado do checkbox num valor só. Re-renderiza quando ele muda. O store, e não só o atom da
+	* seleção: o resultado também muda com as linhas, como na troca de página ou de dados.
+	*/
+	const checkedState = useSelector(table.store, () => {
+		if (isPageScope) return table.getIsAllPageRowsSelected() ? "checked" : table.getIsSomePageRowsSelected() ? "indeterminate" : "unchecked";
+		return table.getIsAllRowsSelected() ? "checked" : table.getIsSomeRowsSelected() ? "indeterminate" : "unchecked";
+	});
+	/**
+	* Re-renderiza quando o carregamento liga ou desliga. A feature é opcional: assina o store. Na
+	* hora, e não depois dos 200ms do visual, para não sobrar uma janela em que o clique passa.
+	*/
+	const isLoading = useSelector(table.store, () => hasTableFeature(table, "loadingFeature") && table.atoms.isLoading.get());
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		"data-component": "DataTable.SelectAllCheckbox",
+		"aria-label": isPageScope ? "Selecionar todas as linhas da página" : "Selecionar todas as linhas",
+		checked: checkedState === "checked",
+		indeterminate: checkedState === "indeterminate",
+		disabled: isLoading,
+		onCheckedChange: (checked) => isPageScope ? table.toggleAllPageRowsSelected(checked) : table.toggleAllRowsSelected(checked),
+		...rest,
+		children: children === void 0 ? /* @__PURE__ */ jsx(Checkbox.Indicator, {}) : children
+	});
+};
+DataTableSelectAllCheckbox.displayName = "DataTable.SelectAllCheckbox";
+//#endregion
+export { DataTableSelectAllCheckbox };
+
+//# sourceMappingURL=data-table-select-all-checkbox.js.map

package/dist/components/data-table/selection/data-table-select-all-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-select-all-checkbox.js","names":[],"sources":["../../../../src/components/data-table/selection/data-table-select-all-checkbox.tsx"],"sourcesContent":["import { Checkbox } from '@lucasbernardosn/react-ui/fields/checkbox';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { TableWith } from '../../../types';\nimport { hasTableFeature } from '../../../utils';\n\nexport type DataTableSelectAllCheckboxProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  Omit<\n    Checkbox.RootProps,\n    'checked' | 'defaultChecked' | 'indeterminate' | 'onCheckedChange'\n  >,\n  {\n    /** A tabela. Exige `rowSelectionFeature`. */\n    table: TableWith<TFeatures, TData, 'rowSelectionFeature'>;\n    /**\n     * O que o checkbox marca e mede: as linhas da página ou todas as linhas da tabela. Com\n     * paginação, a página: o checkbox fica no cabeçalho da página à vista, e marcar linhas\n     * escondidas em outras surpreende. Com a paginação pela API (`manualPagination`), a tabela só\n     * tem a página carregada, e `'all'` contaria os ids selecionados em outras páginas.\n     * @default 'page' com `rowPaginationFeature`, 'all' sem\n     */\n    scope?: 'page' | 'all';\n  }\n>;\n\n/**\n * O checkbox que marca ou desmarca todas as linhas, para o header de uma coluna de seleção. Com\n * parte das linhas marcadas, mostra o estado misto; o clique então marca todas. Com\n * `loadingFeature`, fica desabilitado enquanto a tabela carrega.\n *\n * As props do `Checkbox.Root` passam adiante, como `colorScheme` e `aria-label`.\n */\nexport const DataTableSelectAllCheckbox = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableSelectAllCheckboxProps<TFeatures, TData>,\n) => {\n  const { table, scope, children, ...rest } = props;\n\n  const isPageScope =\n    scope === undefined\n      ? hasTableFeature(table, 'rowPaginationFeature')\n      : scope === 'page';\n\n  /**\n   * O estado do checkbox num valor só. Re-renderiza quando ele muda. O store, e não só o atom da\n   * seleção: o resultado também muda com as linhas, como na troca de página ou de dados.\n   */\n  const checkedState = useSelector(table.store, () => {\n    if (isPageScope) {\n      return table.getIsAllPageRowsSelected()\n        ? 'checked'\n        : table.getIsSomePageRowsSelected()\n          ? 'indeterminate'\n          : 'unchecked';\n    }\n\n    return table.getIsAllRowsSelected()\n      ? 'checked'\n      : table.getIsSomeRowsSelected()\n        ? 'indeterminate'\n        : 'unchecked';\n  });\n\n  /**\n   * Re-renderiza quando o carregamento liga ou desliga. A feature é opcional: assina o store. Na\n   * hora, e não depois dos 200ms do visual, para não sobrar uma janela em que o clique passa.\n   */\n  const isLoading = useSelector(\n    table.store,\n    () =>\n      hasTableFeature(table, 'loadingFeature') && table.atoms.isLoading.get(),\n  );\n\n  return (\n    <Checkbox.Root\n      data-component=\"DataTable.SelectAllCheckbox\"\n      aria-label={\n        isPageScope\n          ? 'Selecionar todas as linhas da página'\n          : 'Selecionar todas as linhas'\n      }\n      checked={checkedState === 'checked'}\n      indeterminate={checkedState === 'indeterminate'}\n      // Durante a carga, as linhas ainda são as antigas: marcar todas marcaria os ids delas.\n      disabled={isLoading}\n      onCheckedChange={(checked) =>\n        isPageScope\n          ? table.toggleAllPageRowsSelected(checked)\n          : table.toggleAllRowsSelected(checked)\n      }\n      {...rest}\n    >\n      {children === undefined ? <Checkbox.Indicator /> : children}\n    </Checkbox.Root>\n  );\n};\n\nDataTableSelectAllCheckbox.displayName = 'DataTable.SelectAllCheckbox';\n"],"mappings":";;;;;;;;;;;;AAoCA,MAAa,8BAIX,UACG;CACH,MAAM,EAAE,OAAO,OAAO,UAAU,GAAG,SAAS;CAE5C,MAAM,cACJ,UAAU,KAAA,IACN,gBAAgB,OAAO,sBAAsB,IAC7C,UAAU;;;;;CAMhB,MAAM,eAAe,YAAY,MAAM,aAAa;EAClD,IAAI,aACF,OAAO,MAAM,yBAAyB,IAClC,YACA,MAAM,0BAA0B,IAC9B,kBACA;EAGR,OAAO,MAAM,qBAAqB,IAC9B,YACA,MAAM,sBAAsB,IAC1B,kBACA;CACR,CAAC;;;;;CAMD,MAAM,YAAY,YAChB,MAAM,aAEJ,gBAAgB,OAAO,gBAAgB,KAAK,MAAM,MAAM,UAAU,IAAI,CAC1E;CAEA,OACE,oBAAC,SAAS,MAAV;EACE,kBAAe;EACf,cACE,cACI,yCACA;EAEN,SAAS,iBAAiB;EAC1B,eAAe,iBAAiB;EAEhC,UAAU;EACV,kBAAkB,YAChB,cACI,MAAM,0BAA0B,OAAO,IACvC,MAAM,sBAAsB,OAAO;EAEzC,GAAI;EAEH,UAAA,aAAa,KAAA,IAAY,oBAAC,SAAS,WAAV,CAAqB,CAAA,IAAI;CACtC,CAAA;AAEnB;AAEA,2BAA2B,cAAc"}

package/dist/components/data-table/selection/data-table-selection-bar.d.ts

@@ -0,0 +1,51 @@
+import { TableWith } from "../../../types/table-with.js";
+import "../../../types/index.js";
+import { RowData, TableFeatures } from "@tanstack/react-table";
+import React from "react";
+import { ActionBar } from "@lucasbernardosn/react-ui/overlays/action-bar";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/data-table/selection/data-table-selection-bar.d.ts
+export type DataTableSelectionBarProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<ActionBar.PopupProps, {
+  /** A tabela. Exige `rowSelectionFeature`. */
+  table: TableWith<TFeatures, TData, 'rowSelectionFeature'>;
+  /**
+   * As ações da seleção. Recebe os ids das linhas marcadas, inclusive os de outras páginas e os
+   * de linhas que não estão carregadas: o app resolve o id para o registro.
+   */
+  children?: (selectedIds: string[]) => React.ReactNode;
+  /** A posição da barra no rodapé da tela. */
+  placement?: ActionBar.RootProps['placement'];
+  /**
+   * O texto lido pelo leitor de tela no resumo, que limpa a seleção.
+   * @default 'Limpar seleção'
+   */
+  clearLabel?: string;
+}>;
+/**
+ * A barra de ações da seleção, fixa no rodapé da tela: aparece com ao menos uma linha marcada e
+ * some ao limpar. Monta o `ActionBar` do `ui` e liga à tabela o que é igual em toda lista: a
+ * abertura pela contagem, o texto do resumo e a limpeza da seleção.
+ *
+ * O resumo ("3 selecionadas") é o botão que limpa a seleção, e o Esc também a limpa. As ações são
+ * do app: entram como `children`, que recebe os ids marcados. A barra não confirma nada nem sabe
+ * o que as ações fazem.
+ *
+ * Os ids vêm do estado da seleção e valem para toda a tabela, e não só para a página à vista.
+ * Quando um filtro muda as linhas, a seleção continua com ids que sumiram da tela: quem filtra
+ * decide se a limpa (`table.resetRowSelection()`).
+ *
+ * @example
+ * ```tsx
+ * <DataTable.SelectionBar table={table}>
+ *   {(selectedIds) => (
+ *     <Button onClick={() => removeAll(selectedIds)}>Excluir</Button>
+ *   )}
+ * </DataTable.SelectionBar>
+ * ```
+ */
+export declare const DataTableSelectionBar: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableSelectionBarProps<TFeatures, TData>): React.JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-selection-bar.d.ts.map

package/dist/components/data-table/selection/data-table-selection-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-selection-bar.d.ts","names":[],"sources":["../../../../src/components/data-table/selection/data-table-selection-bar.tsx"],"mappings":";;;;;;;YAQY,2BACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,OAAO,UAAU,WAAW;;;;;EAK5B,YAAY,0BAA0B,MAAM;;EAE5C,YAAY,UAAU;;;;;EAKtB;;;;;;;;;;;;;;;;;;;;;;;;qBA0BS;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,2BAA2B,WAAW,SAAM,MAAA,IAAA"}

package/dist/components/data-table/selection/data-table-selection-bar.js

@@ -0,0 +1,58 @@
+import { DataTableSelectedCount } from "../pagination/data-table-selected-count.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useSelector } from "@tanstack/react-store";
+import { ActionBar } from "@lucasbernardosn/react-ui/overlays/action-bar";
+//#region src/components/data-table/selection/data-table-selection-bar.tsx
+/**
+* A barra de ações da seleção, fixa no rodapé da tela: aparece com ao menos uma linha marcada e
+* some ao limpar. Monta o `ActionBar` do `ui` e liga à tabela o que é igual em toda lista: a
+* abertura pela contagem, o texto do resumo e a limpeza da seleção.
+*
+* O resumo ("3 selecionadas") é o botão que limpa a seleção, e o Esc também a limpa. As ações são
+* do app: entram como `children`, que recebe os ids marcados. A barra não confirma nada nem sabe
+* o que as ações fazem.
+*
+* Os ids vêm do estado da seleção e valem para toda a tabela, e não só para a página à vista.
+* Quando um filtro muda as linhas, a seleção continua com ids que sumiram da tela: quem filtra
+* decide se a limpa (`table.resetRowSelection()`).
+*
+* @example
+* ```tsx
+* <DataTable.SelectionBar table={table}>
+*   {(selectedIds) => (
+*     <Button onClick={() => removeAll(selectedIds)}>Excluir</Button>
+*   )}
+* </DataTable.SelectionBar>
+* ```
+*/
+const DataTableSelectionBar = (props) => {
+	const { table, children, placement, clearLabel = "Limpar seleção", ...rest } = props;
+	/** Os ids marcados: o estado só guarda as linhas marcadas. Re-renderiza quando muda. */
+	const selectedIds = useSelector(table.atoms.rowSelection, (rowSelection) => Object.keys(rowSelection));
+	return /* @__PURE__ */ jsx(ActionBar.Root, {
+		placement,
+		open: selectedIds.length > 0,
+		onOpenChange: (open) => {
+			if (!open) table.resetRowSelection(true);
+		},
+		children: /* @__PURE__ */ jsx(ActionBar.Portal, { children: /* @__PURE__ */ jsxs(ActionBar.Popup, {
+			"data-component": "DataTable.SelectionBar",
+			...rest,
+			children: [/* @__PURE__ */ jsxs(ActionBar.SelectionTrigger, {
+				onClick: () => table.resetRowSelection(true),
+				children: [/* @__PURE__ */ jsx(DataTableSelectedCount, {
+					table,
+					className: "text-gray-12"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: clearLabel
+				})]
+			}), children?.(selectedIds)]
+		}) })
+	});
+};
+DataTableSelectionBar.displayName = "DataTable.SelectionBar";
+//#endregion
+export { DataTableSelectionBar };
+
+//# sourceMappingURL=data-table-selection-bar.js.map