@lucasbernardosn/react-table 0.1.0 → 0.2.0

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

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

@@ -6,12 +6,21 @@ export type DataTableScrollAreaProps = ScrollArea.RootProps;
  * borda, `Viewport`, `Content` e as barras. Os filhos vão no `Content`, e as props no `Root`.
  *
  * O viewport é o ancestral que rola, e é nele que o cabeçalho sticky se ancora. Na largura,
- * abraça o grid e para no pai. Na altura, tem a das linhas: dentro de um pai com altura
- * limitada, encolhe e as linhas rolam por dentro; sem limite, cresce e só rola na horizontal.
+ * 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, só no eixo que transborda: não passam por cima das
- * linhas, da seleção nem das colunas fixadas. A vertical começa abaixo do `DataTable.Header`,
- * cuja altura é medida aqui.
+ * 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;

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

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

@@ -10,12 +10,21 @@ import { mergeRefs } from "@lucasbernardosn/react-utils";
 * borda, `Viewport`, `Content` e as barras. Os filhos vão no `Content`, e as props no `Root`.
 *
 * O viewport é o ancestral que rola, e é nele que o cabeçalho sticky se ancora. Na largura,
-* abraça o grid e para no pai. Na altura, tem a das linhas: dentro de um pai com altura
-* limitada, encolhe e as linhas rolam por dentro; sem limite, cresce e só rola na horizontal.
+* 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, só no eixo que transborda: não passam por cima das
-* linhas, da seleção nem das colunas fixadas. A vertical começa abaixo do `DataTable.Header`,
-* cuja altura é medida aqui.
+* 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;
@@ -35,8 +44,8 @@ const DataTableScrollArea = (props) => {
 			"[--scroll-area-scrollbar-inset:0px]",
 			"[--scroll-area-thumb-size:--spacing(1)]",
 			"pointer-fine:[--scroll-area-thumb-size:--spacing(1.5)]",
-			"data-has-overflow-y:pe-(--scroll-area-scrollbar-size)",
-			"data-has-overflow-x:pb-(--scroll-area-scrollbar-size)"
+			"pe-(--scroll-area-scrollbar-size)",
+			"pb-(--scroll-area-scrollbar-size)"
 		], className),
 		...rest,
 		children: [
@@ -92,6 +101,7 @@ const DataTableScrollArea = (props) => {
 							"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",

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-selection-bar.js","names":[],"sources":["../../../../src/components/data-table/selection/data-table-selection-bar.tsx"],"sourcesContent":["import { ActionBar } from '@lucasbernardosn/react-ui/overlays/action-bar';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport type { TableWith } from '../../../types';\nimport { DataTableSelectedCount } from '../pagination/data-table-selected-count';\n\nexport type DataTableSelectionBarProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  ActionBar.PopupProps,\n  {\n    /** A tabela. Exige `rowSelectionFeature`. */\n    table: TableWith<TFeatures, TData, 'rowSelectionFeature'>;\n    /**\n     * As ações da seleção. Recebe os ids das linhas marcadas, inclusive os de outras páginas e os\n     * de linhas que não estão carregadas: o app resolve o id para o registro.\n     */\n    children?: (selectedIds: string[]) => React.ReactNode;\n    /** A posição da barra no rodapé da tela. */\n    placement?: ActionBar.RootProps['placement'];\n    /**\n     * O texto lido pelo leitor de tela no resumo, que limpa a seleção.\n     * @default 'Limpar seleção'\n     */\n    clearLabel?: string;\n  }\n>;\n\n/**\n * A barra de ações da seleção, fixa no rodapé da tela: aparece com ao menos uma linha marcada e\n * some ao limpar. Monta o `ActionBar` do `ui` e liga à tabela o que é igual em toda lista: a\n * abertura pela contagem, o texto do resumo e a limpeza da seleção.\n *\n * O resumo (\"3 selecionadas\") é o botão que limpa a seleção, e o Esc também a limpa. As ações são\n * do app: entram como `children`, que recebe os ids marcados. A barra não confirma nada nem sabe\n * o que as ações fazem.\n *\n * Os ids vêm do estado da seleção e valem para toda a tabela, e não só para a página à vista.\n * Quando um filtro muda as linhas, a seleção continua com ids que sumiram da tela: quem filtra\n * decide se a limpa (`table.resetRowSelection()`).\n *\n * @example\n * ```tsx\n * <DataTable.SelectionBar table={table}>\n *   {(selectedIds) => (\n *     <Button onClick={() => removeAll(selectedIds)}>Excluir</Button>\n *   )}\n * </DataTable.SelectionBar>\n * ```\n */\nexport const DataTableSelectionBar = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableSelectionBarProps<TFeatures, TData>,\n) => {\n  const {\n    table,\n    children,\n    placement,\n    clearLabel = 'Limpar seleção',\n    ...rest\n  } = props;\n\n  /** Os ids marcados: o estado só guarda as linhas marcadas. Re-renderiza quando muda. */\n  const selectedIds = useSelector(table.atoms.rowSelection, (rowSelection) =>\n    Object.keys(rowSelection),\n  );\n\n  return (\n    <ActionBar.Root\n      placement={placement}\n      open={selectedIds.length > 0}\n      onOpenChange={(open) => {\n        if (!open) {\n          table.resetRowSelection(true);\n        }\n      }}\n    >\n      <ActionBar.Portal>\n        <ActionBar.Popup\n          data-component=\"DataTable.SelectionBar\"\n          {...rest}\n        >\n          <ActionBar.SelectionTrigger\n            onClick={() => table.resetRowSelection(true)}\n          >\n            <DataTableSelectedCount\n              table={table}\n              className=\"text-gray-12\"\n            />\n            <span className=\"sr-only\">{clearLabel}</span>\n          </ActionBar.SelectionTrigger>\n\n          {children?.(selectedIds)}\n        </ActionBar.Popup>\n      </ActionBar.Portal>\n    </ActionBar.Root>\n  );\n};\n\nDataTableSelectionBar.displayName = 'DataTable.SelectionBar';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,MAAa,yBAIX,UACG;CACH,MAAM,EACJ,OACA,UACA,WACA,aAAa,kBACb,GAAG,SACD;;CAGJ,MAAM,cAAc,YAAY,MAAM,MAAM,eAAe,iBACzD,OAAO,KAAK,YAAY,CAC1B;CAEA,OACE,oBAAC,UAAU,MAAX;EACa;EACX,MAAM,YAAY,SAAS;EAC3B,eAAe,SAAS;GACtB,IAAI,CAAC,MACH,MAAM,kBAAkB,IAAI;EAEhC;EAEA,UAAA,oBAAC,UAAU,QAAX,EAAA,UACE,qBAAC,UAAU,OAAX;GACE,kBAAe;GACf,GAAI;GAFN,UAAA,CAIE,qBAAC,UAAU,kBAAX;IACE,eAAe,MAAM,kBAAkB,IAAI;IAD7C,UAAA,CAGE,oBAAC,wBAAD;KACS;KACP,WAAU;IACX,CAAA,GACD,oBAAC,QAAD;KAAM,WAAU;KAAW,UAAA;IAAiB,CAAA,CAClB;GAE3B,CAAA,GAAA,WAAW,WAAW,CACR;EACD,CAAA,EAAA,CAAA;CACJ,CAAA;AAEpB;AAEA,sBAAsB,cAAc"}

package/dist/components/data-table/toolbar/data-table-density-select.d.ts

@@ -11,7 +11,7 @@ export type DataTableDensitySelectProps<TFeatures extends TableFeatures, TData e
   table: TableWith<TFeatures, TData, 'rowDensityFeature'>;
   /**
    * O nome de cada densidade.
-   * @default { compact: 'Compacta', standard: 'Padrão', comfortable: 'Confortável' }
+   * @default { compact: 'Compacta', standard: 'Padrão', airy: 'Arejada' }
    */
   labels?: Partial<Record<RowDensity, string>>;
   /**

package/dist/components/data-table/toolbar/data-table-density-select.js

@@ -5,12 +5,12 @@ import { Select } from "@lucasbernardosn/react-ui/collections/select";
 const DEFAULT_LABELS = {
 	compact: "Compacta",
 	standard: "Padrão",
-	comfortable: "Confortável"
+	airy: "Arejada"
 };
 const DENSITIES = [
 	"compact",
 	"standard",
-	"comfortable"
+	"airy"
 ];
 /**
 * O select da densidade das linhas, para a barra de ferramentas. Sem rótulo visível: o nome para

package/dist/components/data-table/toolbar/data-table-density-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-density-select.js","names":[],"sources":["../../../../src/components/data-table/toolbar/data-table-density-select.tsx"],"sourcesContent":["import { Select } from '@lucasbernardosn/react-ui/collections/select';\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';\n\nexport type DataTableDensitySelectProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  Select.TriggerProps,\n  {\n    /** A tabela. Exige `rowDensityFeature`. */\n    table: TableWith<TFeatures, TData, 'rowDensityFeature'>;\n    /**\n     * O nome de cada densidade.\n     * @default { compact: 'Compacta', standard: 'Padrão', comfortable: 'Confortável' }\n     */\n    labels?: Partial<Record<RowDensity, string>>;\n    /**\n     * O tamanho do select.\n     * @default 'sm'\n     */\n    size?: Select.RootProps<RowDensity>['size'];\n  }\n>;\n\nconst DEFAULT_LABELS: Record<RowDensity, string> = {\n  compact: 'Compacta',\n  standard: 'Padrão',\n  comfortable: 'Confortável',\n};\n\nconst DENSITIES: RowDensity[] = ['compact', 'standard', 'comfortable'];\n\n/**\n * O select da densidade das linhas, para a barra de ferramentas. Sem rótulo visível: o nome para\n * o leitor de tela é \"Densidade\", trocável pelo `aria-label`.\n *\n * Renderiza o `Select` do `ui` por dentro; as props passam para o trigger.\n *\n * @example\n * ```tsx\n * <DataTable.DensitySelect table={table} />\n * ```\n */\nexport const DataTableDensitySelect = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableDensitySelectProps<TFeatures, TData>,\n) => {\n  const { table, labels, size = 'sm', disabled, ...rest } = props;\n\n  /** Re-renderiza quando a densidade muda. */\n  const density = useSelector(table.atoms.rowDensity);\n\n  const items = DENSITIES.map((value) => ({\n    label: labels?.[value] ?? DEFAULT_LABELS[value],\n    value,\n  }));\n\n  return (\n    <Select.Root<RowDensity>\n      size={size}\n      value={density}\n      items={items}\n      disabled={disabled}\n      onValueChange={(value) => {\n        if (value !== null) {\n          table.setRowDensity(value);\n        }\n      }}\n    >\n      <Select.Trigger\n        data-component=\"DataTable.DensitySelect\"\n        aria-label=\"Densidade\"\n        {...rest}\n      >\n        <Select.Value />\n        <Select.Icon />\n      </Select.Trigger>\n\n      <Select.Portal>\n        <Select.Positioner alignItemWithTrigger={false}>\n          <Select.Popup>\n            <Select.List>\n              {items.map((item) => (\n                <Select.Item\n                  key={item.value}\n                  value={item.value}\n                >\n                  <Select.ItemIndicator />\n                  <Select.ItemText>{item.label}</Select.ItemText>\n                </Select.Item>\n              ))}\n            </Select.List>\n          </Select.Popup>\n        </Select.Positioner>\n      </Select.Portal>\n    </Select.Root>\n  );\n};\n\nDataTableDensitySelect.displayName = 'DataTable.DensitySelect';\n"],"mappings":";;;;AA4BA,MAAM,iBAA6C;CACjD,SAAS;CACT,UAAU;CACV,aAAa;AACf;AAEA,MAAM,YAA0B;CAAC;CAAW;CAAY;AAAa;;;;;;;;;;;;AAarE,MAAa,0BAIX,UACG;CACH,MAAM,EAAE,OAAO,QAAQ,OAAO,MAAM,UAAU,GAAG,SAAS;;CAG1D,MAAM,UAAU,YAAY,MAAM,MAAM,UAAU;CAElD,MAAM,QAAQ,UAAU,KAAK,WAAW;EACtC,OAAO,SAAS,UAAU,eAAe;EACzC;CACF,EAAE;CAEF,OACE,qBAAC,OAAO,MAAR;EACQ;EACN,OAAO;EACA;EACG;EACV,gBAAgB,UAAU;GACxB,IAAI,UAAU,MACZ,MAAM,cAAc,KAAK;EAE7B;EATF,UAAA,CAWE,qBAAC,OAAO,SAAR;GACE,kBAAe;GACf,cAAW;GACX,GAAI;GAHN,UAAA,CAKE,oBAAC,OAAO,OAAR,CAAe,CAAA,GACf,oBAAC,OAAO,MAAR,CAAc,CAAA,CACA;EAEhB,CAAA,GAAA,oBAAC,OAAO,QAAR,EAAA,UACE,oBAAC,OAAO,YAAR;GAAmB,sBAAsB;GACvC,UAAA,oBAAC,OAAO,OAAR,EAAA,UACE,oBAAC,OAAO,MAAR,EAAA,UACG,MAAM,KAAK,SACV,qBAAC,OAAO,MAAR;IAEE,OAAO,KAAK;IAFd,UAAA,CAIE,oBAAC,OAAO,eAAR,CAAuB,CAAA,GACvB,oBAAC,OAAO,UAAR,EAAA,UAAkB,KAAK,MAAuB,CAAA,CACnC;GALN,GAAA,KAAK,KAKC,CACd,EACU,CAAA,EACD,CAAA;EACG,CAAA,EACN,CAAA,CACJ;;AAEjB;AAEA,uBAAuB,cAAc"}
+{"version":3,"file":"data-table-density-select.js","names":[],"sources":["../../../../src/components/data-table/toolbar/data-table-density-select.tsx"],"sourcesContent":["import { Select } from '@lucasbernardosn/react-ui/collections/select';\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';\n\nexport type DataTableDensitySelectProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  Select.TriggerProps,\n  {\n    /** A tabela. Exige `rowDensityFeature`. */\n    table: TableWith<TFeatures, TData, 'rowDensityFeature'>;\n    /**\n     * O nome de cada densidade.\n     * @default { compact: 'Compacta', standard: 'Padrão', airy: 'Arejada' }\n     */\n    labels?: Partial<Record<RowDensity, string>>;\n    /**\n     * O tamanho do select.\n     * @default 'sm'\n     */\n    size?: Select.RootProps<RowDensity>['size'];\n  }\n>;\n\nconst DEFAULT_LABELS: Record<RowDensity, string> = {\n  compact: 'Compacta',\n  standard: 'Padrão',\n  airy: 'Arejada',\n};\n\nconst DENSITIES: RowDensity[] = ['compact', 'standard', 'airy'];\n\n/**\n * O select da densidade das linhas, para a barra de ferramentas. Sem rótulo visível: o nome para\n * o leitor de tela é \"Densidade\", trocável pelo `aria-label`.\n *\n * Renderiza o `Select` do `ui` por dentro; as props passam para o trigger.\n *\n * @example\n * ```tsx\n * <DataTable.DensitySelect table={table} />\n * ```\n */\nexport const DataTableDensitySelect = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableDensitySelectProps<TFeatures, TData>,\n) => {\n  const { table, labels, size = 'sm', disabled, ...rest } = props;\n\n  /** Re-renderiza quando a densidade muda. */\n  const density = useSelector(table.atoms.rowDensity);\n\n  const items = DENSITIES.map((value) => ({\n    label: labels?.[value] ?? DEFAULT_LABELS[value],\n    value,\n  }));\n\n  return (\n    <Select.Root<RowDensity>\n      size={size}\n      value={density}\n      items={items}\n      disabled={disabled}\n      onValueChange={(value) => {\n        if (value !== null) {\n          table.setRowDensity(value);\n        }\n      }}\n    >\n      <Select.Trigger\n        data-component=\"DataTable.DensitySelect\"\n        aria-label=\"Densidade\"\n        {...rest}\n      >\n        <Select.Value />\n        <Select.Icon />\n      </Select.Trigger>\n\n      <Select.Portal>\n        <Select.Positioner alignItemWithTrigger={false}>\n          <Select.Popup>\n            <Select.List>\n              {items.map((item) => (\n                <Select.Item\n                  key={item.value}\n                  value={item.value}\n                >\n                  <Select.ItemIndicator />\n                  <Select.ItemText>{item.label}</Select.ItemText>\n                </Select.Item>\n              ))}\n            </Select.List>\n          </Select.Popup>\n        </Select.Positioner>\n      </Select.Portal>\n    </Select.Root>\n  );\n};\n\nDataTableDensitySelect.displayName = 'DataTable.DensitySelect';\n"],"mappings":";;;;AA4BA,MAAM,iBAA6C;CACjD,SAAS;CACT,UAAU;CACV,MAAM;AACR;AAEA,MAAM,YAA0B;CAAC;CAAW;CAAY;AAAM;;;;;;;;;;;;AAa9D,MAAa,0BAIX,UACG;CACH,MAAM,EAAE,OAAO,QAAQ,OAAO,MAAM,UAAU,GAAG,SAAS;;CAG1D,MAAM,UAAU,YAAY,MAAM,MAAM,UAAU;CAElD,MAAM,QAAQ,UAAU,KAAK,WAAW;EACtC,OAAO,SAAS,UAAU,eAAe;EACzC;CACF,EAAE;CAEF,OACE,qBAAC,OAAO,MAAR;EACQ;EACN,OAAO;EACA;EACG;EACV,gBAAgB,UAAU;GACxB,IAAI,UAAU,MACZ,MAAM,cAAc,KAAK;EAE7B;EATF,UAAA,CAWE,qBAAC,OAAO,SAAR;GACE,kBAAe;GACf,cAAW;GACX,GAAI;GAHN,UAAA,CAKE,oBAAC,OAAO,OAAR,CAAe,CAAA,GACf,oBAAC,OAAO,MAAR,CAAc,CAAA,CACA;EAEhB,CAAA,GAAA,oBAAC,OAAO,QAAR,EAAA,UACE,oBAAC,OAAO,YAAR;GAAmB,sBAAsB;GACvC,UAAA,oBAAC,OAAO,OAAR,EAAA,UACE,oBAAC,OAAO,MAAR,EAAA,UACG,MAAM,KAAK,SACV,qBAAC,OAAO,MAAR;IAEE,OAAO,KAAK;IAFd,UAAA,CAIE,oBAAC,OAAO,eAAR,CAAuB,CAAA,GACvB,oBAAC,OAAO,UAAR,EAAA,UAAkB,KAAK,MAAuB,CAAA,CACnC;GALN,GAAA,KAAK,KAKC,CACd,EACU,CAAA,EACD,CAAA;EACG,CAAA,EACN,CAAA,CACJ;;AAEjB;AAEA,uBAAuB,cAAc"}

package/dist/components/data-table/toolbar/data-table-sort-column-select.d.ts

@@ -26,7 +26,8 @@ export type DataTableSortColumnSelectProps<TFeatures extends TableFeatures, TDat
 /**
  * O select da coluna da ordenação, para onde o cabeçalho não serve de controle, como no celular.
  * Lista as colunas visíveis que ordenam, e "Sem ordenação" no topo; a coluna da ordenação atual
- * entra no fim mesmo escondida. Escolher uma coluna troca a
+ * entra no fim mesmo escondida. Com `enableSortingRemoval: false` na tabela, que deixa a lista
+ * sempre ordenada, o "Sem ordenação" não aparece. Escolher uma coluna troca a
  * ordenação inteira por ela, na direção atual, ou na primeira da coluna sem ordenação antes. Com
  * a ordenação por várias colunas, mostra a primeira.
  *

package/dist/components/data-table/toolbar/data-table-sort-column-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-sort-column-select.d.ts","names":[],"sources":["../../../../src/components/data-table/toolbar/data-table-sort-column-select.tsx"],"mappings":";;;;;;YAWY,+BACV,kBAAkB,eAClB,cAAc,WACZ,cACF,OAAO;;EAGL,OAAO,UAAU,WAAW;;;;;EAK5B,YAAY,QAAQ,OAAO,WAAW;;;;;EAKtC;;;;;EAKA,OAAO,OAAO;;;;;;;;;;;;;;;;;;qBAuBL;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,+BAA+B,WAAW,yBAAM,IAAA"}
+{"version":3,"file":"data-table-sort-column-select.d.ts","names":[],"sources":["../../../../src/components/data-table/toolbar/data-table-sort-column-select.tsx"],"mappings":";;;;;;YAWY,+BACV,kBAAkB,eAClB,cAAc,WACZ,cACF,OAAO;;EAGL,OAAO,UAAU,WAAW;;;;;EAK5B,YAAY,QAAQ,OAAO,WAAW;;;;;EAKtC;;;;;EAKA,OAAO,OAAO;;;;;;;;;;;;;;;;;;;qBAwBL;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,+BAA+B,WAAW,yBAAM,IAAA"}

package/dist/components/data-table/toolbar/data-table-sort-column-select.js

@@ -9,7 +9,8 @@ const NO_SORTING = "";
 /**
 * O select da coluna da ordenação, para onde o cabeçalho não serve de controle, como no celular.
 * Lista as colunas visíveis que ordenam, e "Sem ordenação" no topo; a coluna da ordenação atual
-* entra no fim mesmo escondida. Escolher uma coluna troca a
+* entra no fim mesmo escondida. Com `enableSortingRemoval: false` na tabela, que deixa a lista
+* sempre ordenada, o "Sem ordenação" não aparece. Escolher uma coluna troca a
 * ordenação inteira por ela, na direção atual, ou na primeira da coluna sem ordenação antes. Com
 * a ordenação por várias colunas, mostra a primeira.
 *
@@ -32,10 +33,10 @@ const DataTableSortColumnSelect = (props) => {
 	* usuário mas ordenada pelo código. Sem ela, o trigger mostraria o id.
 	*/
 	const sortedColumn = sortedColumnId === NO_SORTING || sortableColumns.some((column) => column.id === sortedColumnId) ? void 0 : table.getColumn(sortedColumnId);
-	const items = [{
+	const items = [...table.options.enableSortingRemoval !== false ? [{
 		label: noSortingLabel,
 		value: NO_SORTING
-	}, ...[...sortableColumns, ...sortedColumn ? [sortedColumn] : []].map((column) => ({
+	}] : [], ...[...sortableColumns, ...sortedColumn ? [sortedColumn] : []].map((column) => ({
 		label: getLabel(column),
 		value: column.id
 	}))];

package/dist/components/data-table/toolbar/data-table-sort-column-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-sort-column-select.js","names":[],"sources":["../../../../src/components/data-table/toolbar/data-table-sort-column-select.tsx"],"sourcesContent":["import { Select } from '@lucasbernardosn/react-ui/collections/select';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { Column, RowData, TableFeatures } from '@tanstack/react-table';\nimport type { TableWith } from '../../../types';\nimport {\n  getDefaultColumnLabel,\n  hasColumnFeature,\n  hasTableFeature,\n} from '../../../utils';\n\nexport type DataTableSortColumnSelectProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  Select.TriggerProps,\n  {\n    /** A tabela. Exige `rowSortingFeature`. */\n    table: TableWith<TFeatures, TData, 'rowSortingFeature'>;\n    /**\n     * O nome de uma coluna.\n     * @default getDefaultColumnLabel: o `header` quando é texto, e o id quando não é\n     */\n    getLabel?: (column: Column<TFeatures, TData>) => string;\n    /**\n     * O nome da opção que tira a ordenação.\n     * @default 'Sem ordenação'\n     */\n    noSortingLabel?: string;\n    /**\n     * O tamanho do select.\n     * @default 'sm'\n     */\n    size?: Select.RootProps<string>['size'];\n  }\n>;\n\n/** O valor da opção que tira a ordenação. Um id de coluna nunca é vazio. */\nconst NO_SORTING = '';\n\n/**\n * O select da coluna da ordenação, para onde o cabeçalho não serve de controle, como no celular.\n * Lista as colunas visíveis que ordenam, e \"Sem ordenação\" no topo; a coluna da ordenação atual\n * entra no fim mesmo escondida. Escolher uma coluna troca a\n * ordenação inteira por ela, na direção atual, ou na primeira da coluna sem ordenação antes. Com\n * a ordenação por várias colunas, mostra a primeira.\n *\n * Vai junto com o `DataTable.SortDirectionSelect`. Quando aparecem é do app, pela `className`\n * (ex.: `sm:hidden`). Renderiza o `Select` do `ui` por dentro; as props passam para o trigger.\n *\n * @example\n * ```tsx\n * <DataTable.SortColumnSelect table={table} className=\"sm:hidden\" />\n * <DataTable.SortDirectionSelect table={table} className=\"sm:hidden\" />\n * ```\n */\nexport const DataTableSortColumnSelect = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableSortColumnSelectProps<TFeatures, TData>,\n) => {\n  const {\n    table,\n    getLabel = getDefaultColumnLabel,\n    noSortingLabel = 'Sem ordenação',\n    size = 'sm',\n    disabled,\n    ...rest\n  } = props;\n\n  /** Re-renderiza quando a primeira coluna da ordenação muda. */\n  const sortedColumnId = useSelector(\n    table.atoms.sorting,\n    (sorting) => sorting[0]?.id ?? NO_SORTING,\n  );\n\n  /**\n   * As colunas, que o TanStack memoiza: re-renderiza quando a ordem ou a visibilidade mudam. A\n   * visibilidade é opcional, então assina o store.\n   */\n  const columns = useSelector(table.store, () =>\n    hasTableFeature(table, 'columnVisibilityFeature')\n      ? table.getVisibleLeafColumns()\n      : table.getAllLeafColumns(),\n  );\n\n  const sortableColumns = columns.filter(\n    (column) =>\n      hasColumnFeature(column, 'rowSortingFeature') && column.getCanSort(),\n  );\n\n  /**\n   * A coluna da ordenação entra no fim mesmo fora da lista: escondida, ou sem a ordenação pelo\n   * usuário mas ordenada pelo código. Sem ela, o trigger mostraria o id.\n   */\n  const sortedColumn =\n    sortedColumnId === NO_SORTING ||\n    sortableColumns.some((column) => column.id === sortedColumnId)\n      ? undefined\n      : table.getColumn(sortedColumnId);\n\n  const items = [\n    { label: noSortingLabel, value: NO_SORTING },\n    ...[...sortableColumns, ...(sortedColumn ? [sortedColumn] : [])].map(\n      (column) => ({ label: getLabel(column), value: column.id }),\n    ),\n  ];\n\n  const handleValueChange = (columnId: string | null) => {\n    if (columnId === null || columnId === NO_SORTING) {\n      table.resetSorting(true);\n\n      return;\n    }\n\n    const column = table.getColumn(columnId);\n\n    if (!(column && hasColumnFeature(column, 'rowSortingFeature'))) {\n      return;\n    }\n\n    table.setSorting((sorting) => [\n      {\n        id: columnId,\n        desc: sorting[0]?.desc ?? column.getFirstSortDir() === 'desc',\n      },\n    ]);\n  };\n\n  return (\n    <Select.Root<string>\n      size={size}\n      value={sortedColumnId}\n      items={items}\n      disabled={disabled}\n      onValueChange={handleValueChange}\n    >\n      <Select.Trigger\n        data-component=\"DataTable.SortColumnSelect\"\n        aria-label=\"Ordenar por\"\n        {...rest}\n      >\n        <Select.Value />\n        <Select.Icon />\n      </Select.Trigger>\n\n      <Select.Portal>\n        <Select.Positioner alignItemWithTrigger={false}>\n          <Select.Popup>\n            <Select.List>\n              {items.map((item) => (\n                <Select.Item\n                  key={item.value}\n                  value={item.value}\n                >\n                  <Select.ItemIndicator />\n                  <Select.ItemText>{item.label}</Select.ItemText>\n                </Select.Item>\n              ))}\n            </Select.List>\n          </Select.Popup>\n        </Select.Positioner>\n      </Select.Portal>\n    </Select.Root>\n  );\n};\n\nDataTableSortColumnSelect.displayName = 'DataTable.SortColumnSelect';\n"],"mappings":";;;;;;;AAsCA,MAAM,aAAa;;;;;;;;;;;;;;;;;AAkBnB,MAAa,6BAIX,UACG;CACH,MAAM,EACJ,OACA,WAAW,uBACX,iBAAiB,iBACjB,OAAO,MACP,UACA,GAAG,SACD;;CAGJ,MAAM,iBAAiB,YACrB,MAAM,MAAM,UACX,YAAY,QAAQ,EAAE,EAAE,MAAM,UACjC;CAYA,MAAM,kBANU,YAAY,MAAM,aAChC,gBAAgB,OAAO,yBAAyB,IAC5C,MAAM,sBAAsB,IAC5B,MAAM,kBAAkB,CAGA,CAAC,CAAC,QAC7B,WACC,iBAAiB,QAAQ,mBAAmB,KAAK,OAAO,WAAW,CACvE;;;;;CAMA,MAAM,eACJ,mBAAmB,cACnB,gBAAgB,MAAM,WAAW,OAAO,OAAO,cAAc,IACzD,KAAA,IACA,MAAM,UAAU,cAAc;CAEpC,MAAM,QAAQ,CACZ;EAAE,OAAO;EAAgB,OAAO;CAAW,GAC3C,GAAG,CAAC,GAAG,iBAAiB,GAAI,eAAe,CAAC,YAAY,IAAI,CAAC,CAAE,CAAC,CAAC,KAC9D,YAAY;EAAE,OAAO,SAAS,MAAM;EAAG,OAAO,OAAO;CAAG,EAC3D,CACF;CAEA,MAAM,qBAAqB,aAA4B;EACrD,IAAI,aAAa,QAAQ,aAAa,YAAY;GAChD,MAAM,aAAa,IAAI;GAEvB;EACF;EAEA,MAAM,SAAS,MAAM,UAAU,QAAQ;EAEvC,IAAI,EAAE,UAAU,iBAAiB,QAAQ,mBAAmB,IAC1D;EAGF,MAAM,YAAY,YAAY,CAC5B;GACE,IAAI;GACJ,MAAM,QAAQ,EAAE,EAAE,QAAQ,OAAO,gBAAgB,MAAM;EACzD,CACF,CAAC;CACH;CAEA,OACE,qBAAC,OAAO,MAAR;EACQ;EACN,OAAO;EACA;EACG;EACV,eAAe;EALjB,UAAA,CAOE,qBAAC,OAAO,SAAR;GACE,kBAAe;GACf,cAAW;GACX,GAAI;GAHN,UAAA,CAKE,oBAAC,OAAO,OAAR,CAAe,CAAA,GACf,oBAAC,OAAO,MAAR,CAAc,CAAA,CACA;EAEhB,CAAA,GAAA,oBAAC,OAAO,QAAR,EAAA,UACE,oBAAC,OAAO,YAAR;GAAmB,sBAAsB;GACvC,UAAA,oBAAC,OAAO,OAAR,EAAA,UACE,oBAAC,OAAO,MAAR,EAAA,UACG,MAAM,KAAK,SACV,qBAAC,OAAO,MAAR;IAEE,OAAO,KAAK;IAFd,UAAA,CAIE,oBAAC,OAAO,eAAR,CAAuB,CAAA,GACvB,oBAAC,OAAO,UAAR,EAAA,UAAkB,KAAK,MAAuB,CAAA,CACnC;GALN,GAAA,KAAK,KAKC,CACd,EACU,CAAA,EACD,CAAA;EACG,CAAA,EACN,CAAA,CACJ;;AAEjB;AAEA,0BAA0B,cAAc"}
+{"version":3,"file":"data-table-sort-column-select.js","names":[],"sources":["../../../../src/components/data-table/toolbar/data-table-sort-column-select.tsx"],"sourcesContent":["import { Select } from '@lucasbernardosn/react-ui/collections/select';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { Column, RowData, TableFeatures } from '@tanstack/react-table';\nimport type { TableWith } from '../../../types';\nimport {\n  getDefaultColumnLabel,\n  hasColumnFeature,\n  hasTableFeature,\n} from '../../../utils';\n\nexport type DataTableSortColumnSelectProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  Select.TriggerProps,\n  {\n    /** A tabela. Exige `rowSortingFeature`. */\n    table: TableWith<TFeatures, TData, 'rowSortingFeature'>;\n    /**\n     * O nome de uma coluna.\n     * @default getDefaultColumnLabel: o `header` quando é texto, e o id quando não é\n     */\n    getLabel?: (column: Column<TFeatures, TData>) => string;\n    /**\n     * O nome da opção que tira a ordenação.\n     * @default 'Sem ordenação'\n     */\n    noSortingLabel?: string;\n    /**\n     * O tamanho do select.\n     * @default 'sm'\n     */\n    size?: Select.RootProps<string>['size'];\n  }\n>;\n\n/** O valor da opção que tira a ordenação. Um id de coluna nunca é vazio. */\nconst NO_SORTING = '';\n\n/**\n * O select da coluna da ordenação, para onde o cabeçalho não serve de controle, como no celular.\n * Lista as colunas visíveis que ordenam, e \"Sem ordenação\" no topo; a coluna da ordenação atual\n * entra no fim mesmo escondida. Com `enableSortingRemoval: false` na tabela, que deixa a lista\n * sempre ordenada, o \"Sem ordenação\" não aparece. Escolher uma coluna troca a\n * ordenação inteira por ela, na direção atual, ou na primeira da coluna sem ordenação antes. Com\n * a ordenação por várias colunas, mostra a primeira.\n *\n * Vai junto com o `DataTable.SortDirectionSelect`. Quando aparecem é do app, pela `className`\n * (ex.: `sm:hidden`). Renderiza o `Select` do `ui` por dentro; as props passam para o trigger.\n *\n * @example\n * ```tsx\n * <DataTable.SortColumnSelect table={table} className=\"sm:hidden\" />\n * <DataTable.SortDirectionSelect table={table} className=\"sm:hidden\" />\n * ```\n */\nexport const DataTableSortColumnSelect = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableSortColumnSelectProps<TFeatures, TData>,\n) => {\n  const {\n    table,\n    getLabel = getDefaultColumnLabel,\n    noSortingLabel = 'Sem ordenação',\n    size = 'sm',\n    disabled,\n    ...rest\n  } = props;\n\n  /** Re-renderiza quando a primeira coluna da ordenação muda. */\n  const sortedColumnId = useSelector(\n    table.atoms.sorting,\n    (sorting) => sorting[0]?.id ?? NO_SORTING,\n  );\n\n  /**\n   * As colunas, que o TanStack memoiza: re-renderiza quando a ordem ou a visibilidade mudam. A\n   * visibilidade é opcional, então assina o store.\n   */\n  const columns = useSelector(table.store, () =>\n    hasTableFeature(table, 'columnVisibilityFeature')\n      ? table.getVisibleLeafColumns()\n      : table.getAllLeafColumns(),\n  );\n\n  const sortableColumns = columns.filter(\n    (column) =>\n      hasColumnFeature(column, 'rowSortingFeature') && column.getCanSort(),\n  );\n\n  /**\n   * A coluna da ordenação entra no fim mesmo fora da lista: escondida, ou sem a ordenação pelo\n   * usuário mas ordenada pelo código. Sem ela, o trigger mostraria o id.\n   */\n  const sortedColumn =\n    sortedColumnId === NO_SORTING ||\n    sortableColumns.some((column) => column.id === sortedColumnId)\n      ? undefined\n      : table.getColumn(sortedColumnId);\n\n  const canRemoveSorting = table.options.enableSortingRemoval !== false;\n\n  const items = [\n    ...(canRemoveSorting ? [{ label: noSortingLabel, value: NO_SORTING }] : []),\n    ...[...sortableColumns, ...(sortedColumn ? [sortedColumn] : [])].map(\n      (column) => ({ label: getLabel(column), value: column.id }),\n    ),\n  ];\n\n  const handleValueChange = (columnId: string | null) => {\n    if (columnId === null || columnId === NO_SORTING) {\n      table.resetSorting(true);\n\n      return;\n    }\n\n    const column = table.getColumn(columnId);\n\n    if (!(column && hasColumnFeature(column, 'rowSortingFeature'))) {\n      return;\n    }\n\n    table.setSorting((sorting) => [\n      {\n        id: columnId,\n        desc: sorting[0]?.desc ?? column.getFirstSortDir() === 'desc',\n      },\n    ]);\n  };\n\n  return (\n    <Select.Root<string>\n      size={size}\n      value={sortedColumnId}\n      items={items}\n      disabled={disabled}\n      onValueChange={handleValueChange}\n    >\n      <Select.Trigger\n        data-component=\"DataTable.SortColumnSelect\"\n        aria-label=\"Ordenar por\"\n        {...rest}\n      >\n        <Select.Value />\n        <Select.Icon />\n      </Select.Trigger>\n\n      <Select.Portal>\n        <Select.Positioner alignItemWithTrigger={false}>\n          <Select.Popup>\n            <Select.List>\n              {items.map((item) => (\n                <Select.Item\n                  key={item.value}\n                  value={item.value}\n                >\n                  <Select.ItemIndicator />\n                  <Select.ItemText>{item.label}</Select.ItemText>\n                </Select.Item>\n              ))}\n            </Select.List>\n          </Select.Popup>\n        </Select.Positioner>\n      </Select.Portal>\n    </Select.Root>\n  );\n};\n\nDataTableSortColumnSelect.displayName = 'DataTable.SortColumnSelect';\n"],"mappings":";;;;;;;AAsCA,MAAM,aAAa;;;;;;;;;;;;;;;;;;AAmBnB,MAAa,6BAIX,UACG;CACH,MAAM,EACJ,OACA,WAAW,uBACX,iBAAiB,iBACjB,OAAO,MACP,UACA,GAAG,SACD;;CAGJ,MAAM,iBAAiB,YACrB,MAAM,MAAM,UACX,YAAY,QAAQ,EAAE,EAAE,MAAM,UACjC;CAYA,MAAM,kBANU,YAAY,MAAM,aAChC,gBAAgB,OAAO,yBAAyB,IAC5C,MAAM,sBAAsB,IAC5B,MAAM,kBAAkB,CAGA,CAAC,CAAC,QAC7B,WACC,iBAAiB,QAAQ,mBAAmB,KAAK,OAAO,WAAW,CACvE;;;;;CAMA,MAAM,eACJ,mBAAmB,cACnB,gBAAgB,MAAM,WAAW,OAAO,OAAO,cAAc,IACzD,KAAA,IACA,MAAM,UAAU,cAAc;CAIpC,MAAM,QAAQ,CACZ,GAHuB,MAAM,QAAQ,yBAAyB,QAGvC,CAAC;EAAE,OAAO;EAAgB,OAAO;CAAW,CAAC,IAAI,CAAC,GACzE,GAAG,CAAC,GAAG,iBAAiB,GAAI,eAAe,CAAC,YAAY,IAAI,CAAC,CAAE,CAAC,CAAC,KAC9D,YAAY;EAAE,OAAO,SAAS,MAAM;EAAG,OAAO,OAAO;CAAG,EAC3D,CACF;CAEA,MAAM,qBAAqB,aAA4B;EACrD,IAAI,aAAa,QAAQ,aAAa,YAAY;GAChD,MAAM,aAAa,IAAI;GAEvB;EACF;EAEA,MAAM,SAAS,MAAM,UAAU,QAAQ;EAEvC,IAAI,EAAE,UAAU,iBAAiB,QAAQ,mBAAmB,IAC1D;EAGF,MAAM,YAAY,YAAY,CAC5B;GACE,IAAI;GACJ,MAAM,QAAQ,EAAE,EAAE,QAAQ,OAAO,gBAAgB,MAAM;EACzD,CACF,CAAC;CACH;CAEA,OACE,qBAAC,OAAO,MAAR;EACQ;EACN,OAAO;EACA;EACG;EACV,eAAe;EALjB,UAAA,CAOE,qBAAC,OAAO,SAAR;GACE,kBAAe;GACf,cAAW;GACX,GAAI;GAHN,UAAA,CAKE,oBAAC,OAAO,OAAR,CAAe,CAAA,GACf,oBAAC,OAAO,MAAR,CAAc,CAAA,CACA;EAEhB,CAAA,GAAA,oBAAC,OAAO,QAAR,EAAA,UACE,oBAAC,OAAO,YAAR;GAAmB,sBAAsB;GACvC,UAAA,oBAAC,OAAO,OAAR,EAAA,UACE,oBAAC,OAAO,MAAR,EAAA,UACG,MAAM,KAAK,SACV,qBAAC,OAAO,MAAR;IAEE,OAAO,KAAK;IAFd,UAAA,CAIE,oBAAC,OAAO,eAAR,CAAuB,CAAA,GACvB,oBAAC,OAAO,UAAR,EAAA,UAAkB,KAAK,MAAuB,CAAA,CACnC;GALN,GAAA,KAAK,KAKC,CACd,EACU,CAAA,EACD,CAAA;EACG,CAAA,EACN,CAAA,CACJ;;AAEjB;AAEA,0BAA0B,cAAc"}

package/dist/features/row-density/row-density-feature.d.ts

@@ -18,7 +18,7 @@ import { TableFeature } from "@tanstack/react-table";
  *   initialState: { rowDensity: 'compact' },
  * });
  *
- * table.setRowDensity('comfortable');
+ * table.setRowDensity('airy');
  * ```
  */
 export declare const rowDensityFeature: TableFeature;

package/dist/features/row-density/row-density-feature.js

@@ -22,7 +22,7 @@ const getInitialRowDensity = (initialState) => initialState.rowDensity ?? DEFAUL
 *   initialState: { rowDensity: 'compact' },
 * });
 *
-* table.setRowDensity('comfortable');
+* table.setRowDensity('airy');
 * ```
 */
 const rowDensityFeature = {

package/dist/features/row-density/row-density-feature.js.map

@@ -1 +1 @@
-{"version":3,"file":"row-density-feature.js","names":[],"sources":["../../../src/features/row-density/row-density-feature.ts"],"sourcesContent":["import {\n  assignTableAPIs,\n  makeStateUpdater,\n  setStateSlice,\n  type TableFeature,\n  type TableState_All,\n  type Updater,\n} from '@tanstack/react-table';\nimport type { RowDensity } from './row-density-feature.types';\n\n/** A densidade sem `initialState`. */\nconst DEFAULT_ROW_DENSITY: RowDensity = 'standard';\n\n/** A densidade de um estado inicial, ou a padrão quando ele não traz. */\nconst getInitialRowDensity = (initialState: Partial<TableState_All>) =>\n  initialState.rowDensity ?? DEFAULT_ROW_DENSITY;\n\n/**\n * Feature do TanStack Table para a densidade das linhas. Registre com essa chave:\n * `tableFeatures({ rowDensityFeature })`.\n *\n * Só guarda o estado: o `DataTable.Root` o lê e marca o grid com `data-density`, de onde as\n * células tiram altura e espaçamento.\n *\n * @example\n * ```ts\n * const features = tableFeatures({ columnSizingFeature, rowDensityFeature });\n *\n * const table = useTable({\n *   features,\n *   columns,\n *   data,\n *   initialState: { rowDensity: 'compact' },\n * });\n *\n * table.setRowDensity('comfortable');\n * ```\n */\nexport const rowDensityFeature: TableFeature = {\n  getInitialState: (initialState) => ({\n    rowDensity: DEFAULT_ROW_DENSITY,\n    ...initialState,\n  }),\n\n  getDefaultTableOptions: (table) => ({\n    onRowDensityChange: makeStateUpdater('rowDensity', table),\n  }),\n\n  constructTableAPIs: (table) => {\n    assignTableAPIs('rowDensityFeature', table, {\n      table_setRowDensity: {\n        fn: (updater: Updater<RowDensity>) =>\n          setStateSlice(table, 'rowDensity', updater),\n      },\n      table_resetRowDensity: {\n        fn: (defaultState?: boolean) =>\n          setStateSlice(\n            table,\n            'rowDensity',\n            defaultState\n              ? DEFAULT_ROW_DENSITY\n              : getInitialRowDensity(table.initialState),\n          ),\n      },\n    });\n  },\n};\n"],"mappings":";;;AAWA,MAAM,sBAAkC;;AAGxC,MAAM,wBAAwB,iBAC5B,aAAa,cAAc;;;;;;;;;;;;;;;;;;;;;;AAuB7B,MAAa,oBAAkC;CAC7C,kBAAkB,kBAAkB;EAClC,YAAY;EACZ,GAAG;CACL;CAEA,yBAAyB,WAAW,EAClC,oBAAoB,iBAAiB,cAAc,KAAK,EAC1D;CAEA,qBAAqB,UAAU;EAC7B,gBAAgB,qBAAqB,OAAO;GAC1C,qBAAqB,EACnB,KAAK,YACH,cAAc,OAAO,cAAc,OAAO,EAC9C;GACA,uBAAuB,EACrB,KAAK,iBACH,cACE,OACA,cACA,eACI,sBACA,qBAAqB,MAAM,YAAY,CAC7C,EACJ;EACF,CAAC;CACH;AACF"}
+{"version":3,"file":"row-density-feature.js","names":[],"sources":["../../../src/features/row-density/row-density-feature.ts"],"sourcesContent":["import {\n  assignTableAPIs,\n  makeStateUpdater,\n  setStateSlice,\n  type TableFeature,\n  type TableState_All,\n  type Updater,\n} from '@tanstack/react-table';\nimport type { RowDensity } from './row-density-feature.types';\n\n/** A densidade sem `initialState`. */\nconst DEFAULT_ROW_DENSITY: RowDensity = 'standard';\n\n/** A densidade de um estado inicial, ou a padrão quando ele não traz. */\nconst getInitialRowDensity = (initialState: Partial<TableState_All>) =>\n  initialState.rowDensity ?? DEFAULT_ROW_DENSITY;\n\n/**\n * Feature do TanStack Table para a densidade das linhas. Registre com essa chave:\n * `tableFeatures({ rowDensityFeature })`.\n *\n * Só guarda o estado: o `DataTable.Root` o lê e marca o grid com `data-density`, de onde as\n * células tiram altura e espaçamento.\n *\n * @example\n * ```ts\n * const features = tableFeatures({ columnSizingFeature, rowDensityFeature });\n *\n * const table = useTable({\n *   features,\n *   columns,\n *   data,\n *   initialState: { rowDensity: 'compact' },\n * });\n *\n * table.setRowDensity('airy');\n * ```\n */\nexport const rowDensityFeature: TableFeature = {\n  getInitialState: (initialState) => ({\n    rowDensity: DEFAULT_ROW_DENSITY,\n    ...initialState,\n  }),\n\n  getDefaultTableOptions: (table) => ({\n    onRowDensityChange: makeStateUpdater('rowDensity', table),\n  }),\n\n  constructTableAPIs: (table) => {\n    assignTableAPIs('rowDensityFeature', table, {\n      table_setRowDensity: {\n        fn: (updater: Updater<RowDensity>) =>\n          setStateSlice(table, 'rowDensity', updater),\n      },\n      table_resetRowDensity: {\n        fn: (defaultState?: boolean) =>\n          setStateSlice(\n            table,\n            'rowDensity',\n            defaultState\n              ? DEFAULT_ROW_DENSITY\n              : getInitialRowDensity(table.initialState),\n          ),\n      },\n    });\n  },\n};\n"],"mappings":";;;AAWA,MAAM,sBAAkC;;AAGxC,MAAM,wBAAwB,iBAC5B,aAAa,cAAc;;;;;;;;;;;;;;;;;;;;;;AAuB7B,MAAa,oBAAkC;CAC7C,kBAAkB,kBAAkB;EAClC,YAAY;EACZ,GAAG;CACL;CAEA,yBAAyB,WAAW,EAClC,oBAAoB,iBAAiB,cAAc,KAAK,EAC1D;CAEA,qBAAqB,UAAU;EAC7B,gBAAgB,qBAAqB,OAAO;GAC1C,qBAAqB,EACnB,KAAK,YACH,cAAc,OAAO,cAAc,OAAO,EAC9C;GACA,uBAAuB,EACrB,KAAK,iBACH,cACE,OACA,cACA,eACI,sBACA,qBAAqB,MAAM,YAAY,CAC7C,EACJ;EACF,CAAC;CACH;AACF"}

package/dist/features/row-density/row-density-feature.types.d.ts

@@ -1,7 +1,7 @@
 import { OnChangeFn, RowData, TableFeature, TableFeatures, Updater } from "@tanstack/react-table";
 //#region src/features/row-density/row-density-feature.types.d.ts
 /** A densidade das linhas: altura e espaçamento de células e headers. */
-export type RowDensity = 'compact' | 'standard' | 'comfortable';
+export type RowDensity = 'compact' | 'standard' | 'airy';
 /** O estado da feature. */
 export type TableState_RowDensity = {
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucasbernardosn/react-table",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Composable data table parts on TanStack Table v9, styled with @lucasbernardosn/react-ui.",
   "type": "module",
   "exports": {
@@ -27,15 +27,15 @@
     "@dnd-kit/dom": "0.5.0",
     "@dnd-kit/helpers": "0.5.0",
     "@dnd-kit/react": "0.5.0",
-    "@lucasbernardosn/utils": "^0.1.0",
+    "@lucasbernardosn/utils": "^0.2.0",
     "@phosphor-icons/react": "2.1.10",
     "@tanstack/react-store": "0.11.2"
   },
   "devDependencies": {
     "@biomejs/biome": "2.5.15",
-    "@lucasbernardosn/react-ui": "0.1.0",
-    "@lucasbernardosn/react-utils": "0.1.0",
-    "@lucasbernardosn/tsconfig": "1.0.0",
+    "@lucasbernardosn/react-ui": "0.2.0",
+    "@lucasbernardosn/react-utils": "0.2.0",
+    "@lucasbernardosn/tsconfig": "0.2.0",
     "@tanstack/react-table": "9.2.4",
     "@testing-library/jest-dom": "7.0.1",
     "@testing-library/react": "16.3.3",
@@ -52,8 +52,8 @@
     "vitest": "5.0.3"
   },
   "peerDependencies": {
-    "@lucasbernardosn/react-ui": "^0.1.0",
-    "@lucasbernardosn/react-utils": "^0.1.0",
+    "@lucasbernardosn/react-ui": "^0.2.0",
+    "@lucasbernardosn/react-utils": "^0.2.0",
     "@tanstack/react-table": "^9.2.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

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

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

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

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