npm - @lucasbernardosn/react-table - Versions diffs - 0.1.0 → 0.3.0 - Mend

@lucasbernardosn/react-table 0.1.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (174) hide show

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

@@ -4,9 +4,9 @@ import { DataTablePageSizeSelect } from "./data-table-page-size-select.js";
 import { DataTablePageStatus } from "./data-table-page-status.js";
 import { DataTableRowRange } from "./data-table-row-range.js";
 import { DataTableSelectedCount } from "./data-table-selected-count.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps, useRender } from "@base-ui/react";
 import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-table/pagination/data-table-pagination.tsx
 /**
 * A barra da paginação, para baixo da tabela. Sem `children`, monta o padrão: à esquerda, a

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

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

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

@@ -3,7 +3,7 @@ import "../../../types/index.js";
 import { RowData, TableFeatures } from "@tanstack/react-table";
 import { useRender } from "@base-ui/react";
 import React from "react";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/data-table/pagination/data-table-row-range.d.ts
 /** As linhas da página atual e o total, para o texto do `DataTable.RowRange`. */
 export type DataTableRowRangeValues = {

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

@@ -1,7 +1,7 @@
 import { getDataTableLoadingWithoutRows } from "../loading/get-data-table-loading-without-rows.js";
 import { mergeProps, useRender } from "@base-ui/react";
-import { shallow, useSelector } from "@tanstack/react-store";
 import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+import { shallow, useSelector } from "@tanstack/react-store";
 //#region src/components/data-table/pagination/data-table-row-range.tsx
 /**
 * Quais linhas a página mostra, e de quantas: "11–20 de 243". Com a paginação pela API, o total

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

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

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

@@ -3,7 +3,7 @@ import "../../../types/index.js";
 import { RowData, TableFeatures } from "@tanstack/react-table";
 import { useRender } from "@base-ui/react";
 import React from "react";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/data-table/pagination/data-table-selected-count.d.ts
 export type DataTableSelectedCountProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'span'>, {
   /** A tabela. Exige `rowSelectionFeature`. */

package/dist/components/data-table/pagination/data-table-selected-count.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { mergeProps, useRender } from "@base-ui/react";
-import { useSelector } from "@tanstack/react-store";
 import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+import { useSelector } from "@tanstack/react-store";
 //#region src/components/data-table/pagination/data-table-selected-count.tsx
 /**
 * Quantas linhas estão marcadas: "3 selecionadas". Aparece também sem nenhuma, "0 selecionadas":

package/dist/components/data-table/pagination/data-table-selected-count.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table-selected-count.js","names":[],"sources":["../../../../src/components/data-table/pagination/data-table-selected-count.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport type { TableWith } from '../../../types';\n\nexport type DataTableSelectedCountProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n useRender.ComponentProps<'span'>,\n {\n /** A tabela. Exige `rowSelectionFeature`. /\n table: TableWith<TFeatures, TData, 'rowSelectionFeature'>;\n /\n Uma função que recebe quantas linhas estão marcadas e devolve o texto.\n * @default (count) => '3 selecionadas', '1 selecionada' ou '0 selecionadas'\n /\n children?: (count: number) => React.ReactNode;\n }\n>;\n\n/\n Quantas linhas estão marcadas: \"3 selecionadas\". Aparece também sem nenhuma, \"0 selecionadas\":\n * na barra da paginação, o lado esquerdo não some e volta a cada seleção.\n \n Conta os ids marcados no estado, e não as linhas carregadas: com a paginação pela API, entram as\n * marcadas em outras páginas. Exige o `getRowId` com o id do registro (ver\n * `DataTable.RowCheckbox`).\n \n @example\n * ```tsx\n * <DataTable.SelectedCount table={table}>\n * {(count) => `${count} de ${total}`}\n * </DataTable.SelectedCount>\n * ```\n /\nexport const DataTableSelectedCount = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: DataTableSelectedCountProps<TFeatures, TData>,\n) => {\n const { table, render, className, children, ...rest } = props;\n\n /* Re-renderiza quando o número de marcadas muda. */\n const count = useSelector(\n table.atoms.rowSelection,\n (rowSelection) => Object.values(rowSelection).filter(Boolean).length,\n );\n\n const baseProps = {\n 'data-component': 'DataTable.SelectedCount',\n className: mergeTwClassNames(\n [\n 'text-gray-11',\n 'text-sm',\n\n 'tabular-nums',\n 'whitespace-nowrap',\n ],\n className,\n ),\n children:\n children === undefined\n ? `${count.toLocaleString('pt-BR')} ${count === 1 ? 'selecionada' : 'selecionadas'}`\n : children(count),\n };\n\n return useRender({\n render,\n defaultTagName: 'span',\n props: mergeProps(baseProps, rest),\n });\n};\n\nDataTableSelectedCount.displayName = 'DataTable.SelectedCount';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuCA,MAAa,0BAIX,UACG;CACH,MAAM,EAAE,OAAO,QAAQ,WAAW,UAAU,GAAG,SAAS;;CAGxD,MAAM,QAAQ,YACZ,MAAM,MAAM,eACX,iBAAiB,OAAO,OAAO,YAAY,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,MAChE;CAEA,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,UACE,aAAa,KAAA,IACT,GAAG,MAAM,eAAe,OAAO,EAAE,GAAG,UAAU,IAAI,gBAAgB,mBAClE,SAAS,KAAK;CACtB;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,uBAAuB,cAAc"}
1	+ {"version":3,"file":"data-table-selected-count.js","names":[],"sources":["../../../../src/components/data-table/pagination/data-table-selected-count.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport type { TableWith } from '../../../types';\n\nexport type DataTableSelectedCountProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n useRender.ComponentProps<'span'>,\n {\n /** A tabela. Exige `rowSelectionFeature`. /\n table: TableWith<TFeatures, TData, 'rowSelectionFeature'>;\n /\n Uma função que recebe quantas linhas estão marcadas e devolve o texto.\n * @default (count) => '3 selecionadas', '1 selecionada' ou '0 selecionadas'\n /\n children?: (count: number) => React.ReactNode;\n }\n>;\n\n/\n Quantas linhas estão marcadas: \"3 selecionadas\". Aparece também sem nenhuma, \"0 selecionadas\":\n * na barra da paginação, o lado esquerdo não some e volta a cada seleção.\n \n Conta os ids marcados no estado, e não as linhas carregadas: com a paginação pela API, entram as\n * marcadas em outras páginas. Exige o `getRowId` com o id do registro (ver\n * `DataTable.RowCheckbox`).\n \n @example\n * ```tsx\n * <DataTable.SelectedCount table={table}>\n * {(count) => `${count} de ${total}`}\n * </DataTable.SelectedCount>\n * ```\n /\nexport const DataTableSelectedCount = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: DataTableSelectedCountProps<TFeatures, TData>,\n) => {\n const { table, render, className, children, ...rest } = props;\n\n /* Re-renderiza quando o número de marcadas muda. */\n const count = useSelector(\n table.atoms.rowSelection,\n (rowSelection) => Object.values(rowSelection).filter(Boolean).length,\n );\n\n const baseProps = {\n 'data-component': 'DataTable.SelectedCount',\n className: mergeTwClassNames(\n [\n 'text-gray-11',\n 'text-sm',\n\n 'tabular-nums',\n 'whitespace-nowrap',\n ],\n className,\n ),\n children:\n children === undefined\n ? `${count.toLocaleString('pt-BR')} ${count === 1 ? 'selecionada' : 'selecionadas'}`\n : children(count),\n };\n\n return useRender({\n render,\n defaultTagName: 'span',\n props: mergeProps(baseProps, rest),\n });\n};\n\nDataTableSelectedCount.displayName = 'DataTable.SelectedCount';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuCA,MAAa,0BAIX,UACG;CACH,MAAM,EAAE,OAAO,QAAQ,WAAW,UAAU,GAAG,SAAS;;CAGxD,MAAM,QAAQ,YACZ,MAAM,MAAM,eACX,iBAAiB,OAAO,OAAO,YAAY,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,MAChE;CAEA,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,UACE,aAAa,KAAA,IACT,GAAG,MAAM,eAAe,OAAO,EAAE,GAAG,UAAU,IAAI,gBAAgB,mBAClE,SAAS,KAAK;CACtB;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,uBAAuB,cAAc"}

package/dist/components/data-table/resize/data-table-resize-handle.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import "../../../types/index.js";
 import { RowData, TableFeatures } from "@tanstack/react-table";
 import { useRender } from "@base-ui/react";
 import React from "react";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/data-table/resize/data-table-resize-handle.d.ts
 export type DataTableResizeHandleProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'div'>, {
   /** O header da coluna. Exige `columnSizingFeature` e `columnResizingFeature`. */

package/dist/components/data-table/resize/data-table-resize-handle.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { useDataTableResizeScroll } from "./use-data-table-resize-scroll.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps, useRender } from "@base-ui/react";
-import { useSelector } from "@tanstack/react-store";
 import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+import { useSelector } from "@tanstack/react-store";
 import { useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { InteractionShield } from "@lucasbernardosn/react-ui/utilities/interaction-shield";
 //#region src/components/data-table/resize/data-table-resize-handle.tsx
 /**
@@ -73,6 +73,7 @@ const DataTableResizeHandle = (props) => {
 			"z-10",
 			"h-full",
 			"cursor-col-resize",
+			"in-[[role=columnheader]:has([data-popup-open])]:pointer-events-none",
 			"touch-none",
 			"select-none",
 			"before:absolute",
@@ -103,7 +104,7 @@ const DataTableResizeHandle = (props) => {
 		ref: [handleRef, ref ?? null],
 		props: mergeProps(baseProps, rest)
 	});
-	return header.column.getCanResize() ? /* @__PURE__ */ jsxs(Fragment, { children: [element, /* @__PURE__ */ jsx(InteractionShield, {
+	return header.column.getCanResize() ? /* @__PURE__ */ jsxs(Fragment$1, { children: [element, /* @__PURE__ */ jsx(InteractionShield, {
 		active: isResizing,
 		cursor: "col-resize"
 	})] }) : null;

package/dist/components/data-table/resize/data-table-resize-handle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table-resize-handle.js","names":[],"sources":["../../../../src/components/data-table/resize/data-table-resize-handle.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { InteractionShield } from '@lucasbernardosn/react-ui/utilities/interaction-shield';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport { useRef } from 'react';\nimport type { HeaderWith } from '../../../types';\nimport { useDataTableResizeScroll } from './use-data-table-resize-scroll';\n\nexport type DataTableResizeHandleProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n useRender.ComponentProps<'div'>,\n {\n /** O header da coluna. Exige `columnSizingFeature` e `columnResizingFeature`. /\n header: HeaderWith<\n TFeatures,\n TData,\n 'columnResizingFeature' \| 'columnSizingFeature'\n >;\n }\n>;\n\n/\n Área de agarre para redimensionar uma coluna, sobre a linha vertical do fim do header (que\n * precisa ser `relative`). Arrastar redimensiona; duplo clique devolve a coluna ao tamanho\n * definido.\n \n A caixa tem largura zero, e a área de agarre é um `::before` transparente de 12px centrado na\n * linha, metade sobre a coluna vizinha; na última coluna e antes de uma fixada do fim, toda do\n * lado de dentro. No repouso não aparece; no hover e no arrasto, o handle vira a âncora da\n * linha-guia, que a `DataTable.ScrollArea` desenha na altura toda da tabela.\n * Quando a borda chega à beira de uma fixada do fim ou ao fim da área visível, a rolagem\n * acompanha o arrasto. Numa coluna que não redimensiona (`enableResizing: false`), não\n * renderiza.\n \n Durante o arrasto, o `InteractionShield` do `ui` cobre a página: nada, dentro ou fora da\n * tabela, reage ao ponteiro, o cursor de resize vale em toda parte, e o texto não é selecionado.\n * A roda do mouse, por cima dele, não rola a tabela.\n \n Exige `columnResizeMode: 'onChange'` na tabela. Com o padrão do TanStack, `'onEnd'`, o tamanho\n * só muda ao soltar: no arrasto nada anda na tela (nem a coluna, nem o handle, nem a guia), e a\n * coluna pula no fim.\n \n @example\n * ```tsx\n * const table = useTable({ features, columns, data, columnResizeMode: 'onChange' });\n \n <DataTable.HeaderCell header={header}>\n * <DataTable.HeaderContent header={header} />\n * <DataTable.ResizeHandle header={header} />\n * </DataTable.HeaderCell>\n * ```\n /\nexport const DataTableResizeHandle = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: DataTableResizeHandleProps<TFeatures, TData>,\n) => {\n const { header, render, className, ref, ...rest } = props;\n\n const handleRef = useRef<HTMLDivElement>(null);\n\n /\n O atom do resize muda a cada tick do arrasto, mas o booleano só no começo e no fim: o handle\n * re-renderiza duas vezes por arrasto, e só o da coluna arrastada.\n /\n const isResizing = useSelector(header.column.table.atoms.columnResizing, () =>\n header.column.getIsResizing(),\n );\n\n useDataTableResizeScroll(header.column.table, isResizing, handleRef);\n\n const onResizeStart = header.getResizeHandler();\n\n /\n O duplo clique pelo `detail` do `mousedown`, que conta os cliques, e não pelo `dblclick`: o\n * arrasto começa no primeiro `mousedown`, o shield cobre o handle, e o `mouseup` cai nele. O\n * navegador então não manda o `click` nem o `dblclick` ao handle.\n */\n const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n if (event.detail === 2) {\n header.column.resetSize();\n\n return;\n }\n\n onResizeStart(event);\n };\n\n const baseProps = {\n 'data-component': 'DataTable.ResizeHandle',\n 'data-resizing': isResizing ? '' : undefined,\n // Só ponteiro: sem resize por teclado, um `separator` prometeria teclas que não existem.\n 'aria-hidden': true,\n onMouseDown: handleMouseDown,\n onTouchStart: onResizeStart,\n className: mergeTwClassNames(\n [\n // Sobre a linha vertical: o `right-0` é o fim do padding, e a borda de 1px que o\n // `divide-x` põe na célula vem logo depois. A última da linha não tem borda, e o\n // `right-px` põe o handle no mesmo ponto em relação ao fim dela. Antes de uma fixada do\n // fim, a célula também perde a borda, mas a linha passa a ser a da fixada, logo depois:\n // o `right-0` continua certo. Pela posição no DOM, com os seletores das bordas da\n // `DataTable.HeaderRow`, o handle e a borda não têm como discordar.\n 'absolute',\n 'top-0',\n 'right-0',\n 'in-[[role=columnheader]:last-child]:right-px',\n 'z-10',\n\n 'h-full',\n\n 'cursor-col-resize',\n // Sem isto, o arrasto no toque rola a página em vez de redimensionar.\n 'touch-none',\n 'select-none',\n\n // Área de agarre centrada na linha. Conteúdo recortado não recebe clique, então nada\n // entre o handle e o header pode ter `overflow: hidden`.\n 'before:absolute',\n 'before:top-0',\n 'before:right-0',\n 'before:h-full',\n 'before:w-3',\n 'before:translate-x-1.5',\n 'before:content-[\"\"]',\n\n // Onde a metade de fora não serve, os 12px ficam todos do lado de dentro. Na última da\n // linha, ela passaria do fim da tabela e acenderia a barra de rolagem horizontal sem\n // haver o que rolar; antes de uma fixada do fim, ficaria por baixo dela, sem pegar o\n // clique.\n 'in-[[role=columnheader]:last-child]:before:translate-x-0',\n 'in-[[role=columnheader]:has(+[data-pinned=end])]:before:translate-x-0',\n\n // A linha de 2px no cabeçalho, sobre a borda e 1px antes dela, no hover e no arrasto. Onde\n // há anchor positioning, a linha-guia cobre esta no mesmo lugar e segue pelo corpo; sem\n // ele, fica só esta.\n 'after:absolute',\n 'after:inset-y-0',\n 'after:left-0',\n 'after:w-0.5',\n 'after:-translate-x-1/2',\n 'after:content-[\"\"]',\n 'hover:after:bg-gray-9',\n 'data-resizing:after:bg-black',\n 'dark:data-resizing:after:bg-white',\n\n // A âncora da linha-guia (ver `DataTable.ScrollArea`), no hover e no arrasto. Um nome só\n // basta: no arrasto, o shield cobre os outros handles, e nenhum fica em hover junto com\n // o arrastado. Com o nome repetido, a guia iria para o último.\n 'hover:[anchor-name:--data-table-resize-handle]',\n 'data-resizing:[anchor-name:--data-table-resize-handle]',\n ],\n className,\n ),\n };\n\n const element = useRender({\n render,\n defaultTagName: 'div',\n ref: [handleRef, ref ?? null],\n props: mergeProps(baseProps, rest),\n });\n\n return header.column.getCanResize() ? (\n <>\n {element}\n <InteractionShield\n active={isResizing}\n cursor=\"col-resize\"\n />\n </>\n ) : null;\n};\n\nDataTableResizeHandle.displayName = 'DataTable.ResizeHandle';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,MAAa,yBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,WAAW,KAAK,GAAG,SAAS;CAEpD,MAAM,YAAY,OAAuB,IAAI;;;;;CAM7C,MAAM,aAAa,YAAY,OAAO,OAAO,MAAM,MAAM,sBACvD,OAAO,OAAO,cAAc,CAC9B;CAEA,yBAAyB,OAAO,OAAO,OAAO,YAAY,SAAS;CAEnE,MAAM,gBAAgB,OAAO,iBAAiB;;;;;;CAO9C,MAAM,mBAAmB,UAA4C;EACnE,IAAI,MAAM,WAAW,GAAG;GACtB,OAAO,OAAO,UAAU;GAExB;EACF;EAEA,cAAc,KAAK;CACrB;CAEA,MAAM,YAAY;EAChB,kBAAkB;EAClB,iBAAiB,aAAa,KAAK,KAAA;EAEnC,eAAe;EACf,aAAa;EACb,cAAc;EACd,WAAW,kBACT;GAOE;GACA;GACA;GACA;GACA;GAEA;GAEA;GAEA;GACA;GAIA;GACA;GACA;GACA;GACA;GACA;GACA;GAMA;GACA;GAKA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAKA;GACA;EACF,GACA,SACF;CACF;CAEA,MAAM,UAAU,UAAU;EACxB;EACA,gBAAgB;EAChB,KAAK,CAAC,WAAW,OAAO,IAAI;EAC5B,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;CAED,OAAO,OAAO,OAAO,aAAa,IAChC,qBAAA,~~UAAA~~,EAAA,UAAA,CACG,SACD,oBAAC,mBAAD;EACE,QAAQ;EACR,QAAO;CACR,CAAA,CACD,EAAA,CAAA,IACA;AACN;AAEA,sBAAsB,cAAc"}
1	+ {"version":3,"file":"data-table-resize-handle.js","names":[],"sources":["../../../../src/components/data-table/resize/data-table-resize-handle.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { InteractionShield } from '@lucasbernardosn/react-ui/utilities/interaction-shield';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport { useRef } from 'react';\nimport type { HeaderWith } from '../../../types';\nimport { useDataTableResizeScroll } from './use-data-table-resize-scroll';\n\nexport type DataTableResizeHandleProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n useRender.ComponentProps<'div'>,\n {\n /** O header da coluna. Exige `columnSizingFeature` e `columnResizingFeature`. /\n header: HeaderWith<\n TFeatures,\n TData,\n 'columnResizingFeature' \| 'columnSizingFeature'\n >;\n }\n>;\n\n/\n Área de agarre para redimensionar uma coluna, sobre a linha vertical do fim do header (que\n * precisa ser `relative`). Arrastar redimensiona; duplo clique devolve a coluna ao tamanho\n * definido.\n \n A caixa tem largura zero, e a área de agarre é um `::before` transparente de 12px centrado na\n * linha, metade sobre a coluna vizinha; na última coluna e antes de uma fixada do fim, toda do\n * lado de dentro. No repouso não aparece; no hover e no arrasto, o handle vira a âncora da\n * linha-guia, que a `DataTable.ScrollArea` desenha na altura toda da tabela.\n * Quando a borda chega à beira de uma fixada do fim ou ao fim da área visível, a rolagem\n * acompanha o arrasto. Numa coluna que não redimensiona (`enableResizing: false`), não\n * renderiza.\n \n Durante o arrasto, o `InteractionShield` do `ui` cobre a página: nada, dentro ou fora da\n * tabela, reage ao ponteiro, o cursor de resize vale em toda parte, e o texto não é selecionado.\n * A roda do mouse, por cima dele, não rola a tabela.\n \n Exige `columnResizeMode: 'onChange'` na tabela. Com o padrão do TanStack, `'onEnd'`, o tamanho\n * só muda ao soltar: no arrasto nada anda na tela (nem a coluna, nem o handle, nem a guia), e a\n * coluna pula no fim.\n \n @example\n * ```tsx\n * const table = useTable({ features, columns, data, columnResizeMode: 'onChange' });\n \n <DataTable.HeaderCell header={header}>\n * <DataTable.HeaderContent header={header} />\n * <DataTable.ResizeHandle header={header} />\n * </DataTable.HeaderCell>\n * ```\n /\nexport const DataTableResizeHandle = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: DataTableResizeHandleProps<TFeatures, TData>,\n) => {\n const { header, render, className, ref, ...rest } = props;\n\n const handleRef = useRef<HTMLDivElement>(null);\n\n /\n O atom do resize muda a cada tick do arrasto, mas o booleano só no começo e no fim: o handle\n * re-renderiza duas vezes por arrasto, e só o da coluna arrastada.\n /\n const isResizing = useSelector(header.column.table.atoms.columnResizing, () =>\n header.column.getIsResizing(),\n );\n\n useDataTableResizeScroll(header.column.table, isResizing, handleRef);\n\n const onResizeStart = header.getResizeHandler();\n\n /\n O duplo clique pelo `detail` do `mousedown`, que conta os cliques, e não pelo `dblclick`: o\n * arrasto começa no primeiro `mousedown`, o shield cobre o handle, e o `mouseup` cai nele. O\n * navegador então não manda o `click` nem o `dblclick` ao handle.\n */\n const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n if (event.detail === 2) {\n header.column.resetSize();\n\n return;\n }\n\n onResizeStart(event);\n };\n\n const baseProps = {\n 'data-component': 'DataTable.ResizeHandle',\n 'data-resizing': isResizing ? '' : undefined,\n // Só ponteiro: sem resize por teclado, um `separator` prometeria teclas que não existem.\n 'aria-hidden': true,\n onMouseDown: handleMouseDown,\n onTouchStart: onResizeStart,\n className: mergeTwClassNames(\n [\n // Sobre a linha vertical: o `right-0` é o fim do padding, e a borda de 1px que o\n // `divide-x` põe na célula vem logo depois. A última da linha não tem borda, e o\n // `right-px` põe o handle no mesmo ponto em relação ao fim dela. Antes de uma fixada do\n // fim, a célula também perde a borda, mas a linha passa a ser a da fixada, logo depois:\n // o `right-0` continua certo. Pela posição no DOM, com os seletores das bordas da\n // `DataTable.HeaderRow`, o handle e a borda não têm como discordar.\n 'absolute',\n 'top-0',\n 'right-0',\n 'in-[[role=columnheader]:last-child]:right-px',\n 'z-10',\n\n 'h-full',\n\n 'cursor-col-resize',\n // Com um menu aberto no gatilho da célula, o backdrop do Base UI deixa um recorte do\n // tamanho do gatilho, e a metade de dentro da área de agarre cairia nele: o hover acenderia\n // a linha-guia com o menu aberto.\n 'in-[[role=columnheader]:has([data-popup-open])]:pointer-events-none',\n // Sem isto, o arrasto no toque rola a página em vez de redimensionar.\n 'touch-none',\n 'select-none',\n\n // Área de agarre centrada na linha. Conteúdo recortado não recebe clique, então nada\n // entre o handle e o header pode ter `overflow: hidden`.\n 'before:absolute',\n 'before:top-0',\n 'before:right-0',\n 'before:h-full',\n 'before:w-3',\n 'before:translate-x-1.5',\n 'before:content-[\"\"]',\n\n // Onde a metade de fora não serve, os 12px ficam todos do lado de dentro. Na última da\n // linha, ela passaria do fim da tabela e acenderia a barra de rolagem horizontal sem\n // haver o que rolar; antes de uma fixada do fim, ficaria por baixo dela, sem pegar o\n // clique.\n 'in-[[role=columnheader]:last-child]:before:translate-x-0',\n 'in-[[role=columnheader]:has(+[data-pinned=end])]:before:translate-x-0',\n\n // A linha de 2px no cabeçalho, sobre a borda e 1px antes dela, no hover e no arrasto. Onde\n // há anchor positioning, a linha-guia cobre esta no mesmo lugar e segue pelo corpo; sem\n // ele, fica só esta.\n 'after:absolute',\n 'after:inset-y-0',\n 'after:left-0',\n 'after:w-0.5',\n 'after:-translate-x-1/2',\n 'after:content-[\"\"]',\n 'hover:after:bg-gray-9',\n 'data-resizing:after:bg-black',\n 'dark:data-resizing:after:bg-white',\n\n // A âncora da linha-guia (ver `DataTable.ScrollArea`), no hover e no arrasto. Um nome só\n // basta: no arrasto, o shield cobre os outros handles, e nenhum fica em hover junto com\n // o arrastado. Com o nome repetido, a guia iria para o último.\n 'hover:[anchor-name:--data-table-resize-handle]',\n 'data-resizing:[anchor-name:--data-table-resize-handle]',\n ],\n className,\n ),\n };\n\n const element = useRender({\n render,\n defaultTagName: 'div',\n ref: [handleRef, ref ?? null],\n props: mergeProps(baseProps, rest),\n });\n\n return header.column.getCanResize() ? (\n <>\n {element}\n <InteractionShield\n active={isResizing}\n cursor=\"col-resize\"\n />\n </>\n ) : null;\n};\n\nDataTableResizeHandle.displayName = 'DataTable.ResizeHandle';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,MAAa,yBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,WAAW,KAAK,GAAG,SAAS;CAEpD,MAAM,YAAY,OAAuB,IAAI;;;;;CAM7C,MAAM,aAAa,YAAY,OAAO,OAAO,MAAM,MAAM,sBACvD,OAAO,OAAO,cAAc,CAC9B;CAEA,yBAAyB,OAAO,OAAO,OAAO,YAAY,SAAS;CAEnE,MAAM,gBAAgB,OAAO,iBAAiB;;;;;;CAO9C,MAAM,mBAAmB,UAA4C;EACnE,IAAI,MAAM,WAAW,GAAG;GACtB,OAAO,OAAO,UAAU;GAExB;EACF;EAEA,cAAc,KAAK;CACrB;CAEA,MAAM,YAAY;EAChB,kBAAkB;EAClB,iBAAiB,aAAa,KAAK,KAAA;EAEnC,eAAe;EACf,aAAa;EACb,cAAc;EACd,WAAW,kBACT;GAOE;GACA;GACA;GACA;GACA;GAEA;GAEA;GAIA;GAEA;GACA;GAIA;GACA;GACA;GACA;GACA;GACA;GACA;GAMA;GACA;GAKA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAKA;GACA;EACF,GACA,SACF;CACF;CAEA,MAAM,UAAU,UAAU;EACxB;EACA,gBAAgB;EAChB,KAAK,CAAC,WAAW,OAAO,IAAI;EAC5B,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;CAED,OAAO,OAAO,OAAO,aAAa,IAChC,qBAAA,YAAA,EAAA,UAAA,CACG,SACD,oBAAC,mBAAD;EACE,QAAQ;EACR,QAAO;CACR,CAAA,CACD,EAAA,CAAA,IACA;AACN;AAEA,sBAAsB,cAAc"}

package/dist/components/data-table/root/{data-table-grid-classes.d.ts → data-table-grid-class-names.d.ts} RENAMED Viewed

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

package/dist/components/data-table/root/{data-table-grid-classes.js → data-table-grid-class-names.js} RENAMED Viewed

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

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

@@ -0,0 +1 @@

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

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

@@ -2,7 +2,7 @@ import { TableWith } from "../../../types/table-with.js";
 import "../../../types/index.js";
 import { RowData, TableFeatures } from "@tanstack/react-table";
 import { useRender } from "@base-ui/react";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/data-table/root/data-table-root.d.ts
 export type DataTableRootProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'div'>, {
   /** A tabela do `useTable`. Exige `columnSizingFeature`. */

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

@@ -2,8 +2,8 @@ import { hasTableFeature } from "../../../utils/has-feature.js";
 import { useDataTableLoading } from "../loading/use-data-table-loading.js";
 import { useDataTableColumnLayout } from "./use-data-table-column-layout.js";
 import { mergeProps, useRender } from "@base-ui/react";
-import { useSelector } from "@tanstack/react-store";
 import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+import { useSelector } from "@tanstack/react-store";
 //#region src/components/data-table/root/data-table-root.tsx
 /**
 * O elemento do grid (`role="table"`; com `activeRowFeature`, `role="grid"`, que diz ao leitor
@@ -49,13 +49,13 @@ const DataTableRoot = (props) => {
 			"w-(--data-table-width)",
 			"data-[density=compact]:[--data-table-header-height:--spacing(7)]",
 			"data-[density=compact]:[--data-table-row-height:--spacing(8)]",
-			"data-[density=compact]:[--data-table-cell-padding:--spacing(1.5)]",
+			"data-[density=compact]:[--data-table-cell-padding:--spacing(1)]",
 			"[--data-table-header-height:--spacing(8)]",
-			"[--data-table-row-height:--spacing(10)]",
+			"[--data-table-row-height:--spacing(9)]",
 			"[--data-table-cell-padding:--spacing(2)]",
-			"data-[density=comfortable]:[--data-table-header-height:--spacing(10)]",
-			"data-[density=comfortable]:[--data-table-row-height:--spacing(12)]",
-			"data-[density=comfortable]:[--data-table-cell-padding:--spacing(3)]"
+			"data-[density=airy]:[--data-table-header-height:--spacing(9)]",
+			"data-[density=airy]:[--data-table-row-height:--spacing(10)]",
+			"data-[density=airy]:[--data-table-cell-padding:--spacing(3)]"
 		], className)
 	};
 	return useRender({

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

	@@ -1 +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"}
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/ts-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 CHANGED Viewed

@@ -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.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { useDataTableHeaderOffset } from "./use-data-table-header-offset.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeStateClassNames, mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
 import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ScrollArea } from "@lucasbernardosn/react-ui/layout/scroll-area";
 import { mergeRefs } from "@lucasbernardosn/react-utils";
 //#region src/components/data-table/root/data-table-scroll-area.tsx
@@ -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: 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.
 *
-* 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.
+* 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 CHANGED Viewed

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

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

@@ -2,7 +2,7 @@ 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";
+import { MergeOverride } from "@lucasbernardosn/ts-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`. */

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

@@ -1,6 +1,6 @@
 import { hasRowFeature } from "../../../utils/has-feature.js";
-import { jsx } from "react/jsx-runtime";
 import { useSelector } from "@tanstack/react-store";
+import { jsx } from "react/jsx-runtime";
 import { Checkbox } from "@lucasbernardosn/react-ui/fields/checkbox";
 //#region src/components/data-table/selection/data-table-row-checkbox.tsx
 /**

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

	@@ -1 +1 @@
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"}
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/ts-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 CHANGED Viewed

@@ -2,7 +2,7 @@ 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";
+import { MergeOverride } from "@lucasbernardosn/ts-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`. */

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

@@ -1,6 +1,6 @@
 import { hasTableFeature } from "../../../utils/has-feature.js";
-import { jsx } from "react/jsx-runtime";
 import { useSelector } from "@tanstack/react-store";
+import { jsx } from "react/jsx-runtime";
 import { Checkbox } from "@lucasbernardosn/react-ui/fields/checkbox";
 //#region src/components/data-table/selection/data-table-select-all-checkbox.tsx
 /**

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

	@@ -1 +1 @@
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"}
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/ts-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"}