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

@lucasbernardosn/react-table 0.2.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 (161) hide show

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
 /**
@@ -104,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 // 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,~~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-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

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)]',\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"}
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.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

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"}

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

@@ -3,7 +3,7 @@ import "../../../types/index.js";
 import { RowData, TableFeatures } from "@tanstack/react-table";
 import React from "react";
 import { ActionBar } from "@lucasbernardosn/react-ui/overlays/action-bar";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/data-table/selection/data-table-selection-bar.d.ts
 export type DataTableSelectionBarProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<ActionBar.PopupProps, {
   /** A tabela. Exige `rowSelectionFeature`. */

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

@@ -1,6 +1,6 @@
 import { DataTableSelectedCount } from "../pagination/data-table-selected-count.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useSelector } from "@tanstack/react-store";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ActionBar } from "@lucasbernardosn/react-ui/overlays/action-bar";
 //#region src/components/data-table/selection/data-table-selection-bar.tsx
 /**

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

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

package/dist/components/data-table/sorting/data-table-sort-indicator.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { HeaderWith } 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/sorting/data-table-sort-indicator.d.ts
 export type DataTableSortIndicatorProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'span'>, {
   /** O header da coluna. Exige `rowSortingFeature`. */

package/dist/components/data-table/sorting/data-table-sort-indicator.js CHANGED Viewed

@@ -1,9 +1,9 @@
-import { Icon } from "@lucasbernardosn/react-ui/display/icon";
-import { CaretDownIcon, CaretUpDownIcon, CaretUpIcon } from "@phosphor-icons/react";
-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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CaretDownIcon, CaretUpDownIcon, CaretUpIcon } from "@phosphor-icons/react";
+import { Icon } from "@lucasbernardosn/react-ui/display/icon";
 //#region src/components/data-table/sorting/data-table-sort-indicator.tsx
 /**
 * O ícone da direção da ordenação: seta para cima, para baixo, ou dupla e apagada com a coluna

package/dist/components/data-table/sorting/data-table-sort-indicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table-sort-indicator.js","names":[],"sources":["../../../../src/components/data-table/sorting/data-table-sort-indicator.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { Icon } from '@lucasbernardosn/react-ui/display/icon';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport {\n CaretDownIcon,\n CaretUpDownIcon,\n CaretUpIcon,\n} from '@phosphor-icons/react';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { HeaderWith } from '../../../types';\n\nexport type DataTableSortIndicatorProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n useRender.ComponentProps<'span'>,\n {\n /** O header da coluna. Exige `rowSortingFeature`. /\n header: HeaderWith<TFeatures, TData, 'rowSortingFeature'>;\n }\n>;\n\n/\n O ícone da direção da ordenação: seta para cima, para baixo, ou dupla e apagada com a coluna\n * fora da ordenação. Com mais de uma coluna ordenada, mostra também a posição desta. Com\n * `children`, eles substituem o ícone; a direção fica em `data-sorted`.\n \n Numa coluna que não ordena (`enableSorting: false`, ou sem accessor), não renderiza.\n \n É decorativo (`aria-hidden`): a direção chega ao leitor de tela pelo `aria-sort` do\n * `DataTable.HeaderCell`.\n /\nexport const DataTableSortIndicator = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: DataTableSortIndicatorProps<TFeatures, TData>,\n) => {\n const { header, render, className, children, ...rest } = props;\n\n const { table } = header.column;\n\n /\n Só re-renderiza quando a direção desta coluna muda, e só o atom da ordenação roda o seletor.\n /\n const sorted = useSelector(table.atoms.sorting, () =>\n header.column.getIsSorted(),\n );\n\n /\n A posição na ordenação, de 1 em diante, só com mais de uma coluna ordenada: com uma só, o\n * número não diz nada. Re-renderiza quando a posição desta coluna muda.\n */\n const position = useSelector(table.atoms.sorting, (sorting) => {\n const index = header.column.getSortIndex();\n\n return index >= 0 && sorting.length > 1 ? index + 1 : undefined;\n });\n\n const icon =\n sorted === 'asc' ? (\n <CaretUpIcon />\n ) : sorted === 'desc' ? (\n <CaretDownIcon />\n ) : (\n <CaretUpDownIcon />\n );\n\n const baseProps = {\n 'data-component': 'DataTable.SortIndicator',\n 'data-sorted': sorted \|\| undefined,\n 'aria-hidden': true,\n className: mergeTwClassNames(\n [\n 'inline-flex',\n 'shrink-0',\n 'items-center',\n 'gap-0.5',\n\n 'text-gray-8',\n 'data-sorted:text-gray-12',\n\n 'text-2xs',\n 'tabular-nums',\n ],\n className,\n ),\n children:\n children === undefined ? (\n <>\n <Icon\n render={icon}\n className=\"size-3.5\"\n />\n {position}\n </>\n ) : (\n children\n ),\n };\n\n const element = useRender({\n render,\n defaultTagName: 'span',\n props: mergeProps(baseProps, rest),\n });\n\n return header.column.getCanSort() ? element : null;\n};\n\nDataTableSortIndicator.displayName = 'DataTable.SortIndicator';\n"],"mappings":";;;;;;;;;;;;;;;;;AAkCA,MAAa,0BAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEzD,MAAM,EAAE,UAAU,OAAO;;;;CAKzB,MAAM,SAAS,YAAY,MAAM,MAAM,eACrC,OAAO,OAAO,YAAY,CAC5B;;;;;CAMA,MAAM,WAAW,YAAY,MAAM,MAAM,UAAU,YAAY;EAC7D,MAAM,QAAQ,OAAO,OAAO,aAAa;EAEzC,OAAO,SAAS,KAAK,QAAQ,SAAS,IAAI,QAAQ,IAAI,KAAA;CACxD,CAAC;CAED,MAAM,OACJ,WAAW,QACT,oBAAC,aAAD,CAAc,CAAA,IACZ,WAAW,SACb,oBAAC,eAAD,CAAgB,CAAA,IAEhB,oBAAC,iBAAD,CAAkB,CAAA;CAGtB,MAAM,YAAY;EAChB,kBAAkB;EAClB,eAAe,UAAU,KAAA;EACzB,eAAe;EACf,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,UACE,aAAa,KAAA,IACX,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;GACE,QAAQ;GACR,WAAU;EACX,CAAA,GACA,QACD,EAAA,CAAA,IAEF;CAEN;CAEA,MAAM,UAAU,UAAU;EACxB;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;CAED,OAAO,OAAO,OAAO,WAAW,IAAI,UAAU;AAChD;AAEA,uBAAuB,cAAc"}
1	+ {"version":3,"file":"data-table-sort-indicator.js","names":[],"sources":["../../../../src/components/data-table/sorting/data-table-sort-indicator.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { Icon } from '@lucasbernardosn/react-ui/display/icon';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport {\n CaretDownIcon,\n CaretUpDownIcon,\n CaretUpIcon,\n} from '@phosphor-icons/react';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { HeaderWith } from '../../../types';\n\nexport type DataTableSortIndicatorProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n useRender.ComponentProps<'span'>,\n {\n /** O header da coluna. Exige `rowSortingFeature`. /\n header: HeaderWith<TFeatures, TData, 'rowSortingFeature'>;\n }\n>;\n\n/\n O ícone da direção da ordenação: seta para cima, para baixo, ou dupla e apagada com a coluna\n * fora da ordenação. Com mais de uma coluna ordenada, mostra também a posição desta. Com\n * `children`, eles substituem o ícone; a direção fica em `data-sorted`.\n \n Numa coluna que não ordena (`enableSorting: false`, ou sem accessor), não renderiza.\n \n É decorativo (`aria-hidden`): a direção chega ao leitor de tela pelo `aria-sort` do\n * `DataTable.HeaderCell`.\n /\nexport const DataTableSortIndicator = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: DataTableSortIndicatorProps<TFeatures, TData>,\n) => {\n const { header, render, className, children, ...rest } = props;\n\n const { table } = header.column;\n\n /\n Só re-renderiza quando a direção desta coluna muda, e só o atom da ordenação roda o seletor.\n /\n const sorted = useSelector(table.atoms.sorting, () =>\n header.column.getIsSorted(),\n );\n\n /\n A posição na ordenação, de 1 em diante, só com mais de uma coluna ordenada: com uma só, o\n * número não diz nada. Re-renderiza quando a posição desta coluna muda.\n */\n const position = useSelector(table.atoms.sorting, (sorting) => {\n const index = header.column.getSortIndex();\n\n return index >= 0 && sorting.length > 1 ? index + 1 : undefined;\n });\n\n const icon =\n sorted === 'asc' ? (\n <CaretUpIcon />\n ) : sorted === 'desc' ? (\n <CaretDownIcon />\n ) : (\n <CaretUpDownIcon />\n );\n\n const baseProps = {\n 'data-component': 'DataTable.SortIndicator',\n 'data-sorted': sorted \|\| undefined,\n 'aria-hidden': true,\n className: mergeTwClassNames(\n [\n 'inline-flex',\n 'shrink-0',\n 'items-center',\n 'gap-0.5',\n\n 'text-gray-8',\n 'data-sorted:text-gray-12',\n\n 'text-2xs',\n 'tabular-nums',\n ],\n className,\n ),\n children:\n children === undefined ? (\n <>\n <Icon\n render={icon}\n className=\"size-3.5\"\n />\n {position}\n </>\n ) : (\n children\n ),\n };\n\n const element = useRender({\n render,\n defaultTagName: 'span',\n props: mergeProps(baseProps, rest),\n });\n\n return header.column.getCanSort() ? element : null;\n};\n\nDataTableSortIndicator.displayName = 'DataTable.SortIndicator';\n"],"mappings":";;;;;;;;;;;;;;;;;AAkCA,MAAa,0BAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEzD,MAAM,EAAE,UAAU,OAAO;;;;CAKzB,MAAM,SAAS,YAAY,MAAM,MAAM,eACrC,OAAO,OAAO,YAAY,CAC5B;;;;;CAMA,MAAM,WAAW,YAAY,MAAM,MAAM,UAAU,YAAY;EAC7D,MAAM,QAAQ,OAAO,OAAO,aAAa;EAEzC,OAAO,SAAS,KAAK,QAAQ,SAAS,IAAI,QAAQ,IAAI,KAAA;CACxD,CAAC;CAED,MAAM,OACJ,WAAW,QACT,oBAAC,aAAD,CAAc,CAAA,IACZ,WAAW,SACb,oBAAC,eAAD,CAAgB,CAAA,IAEhB,oBAAC,iBAAD,CAAkB,CAAA;CAGtB,MAAM,YAAY;EAChB,kBAAkB;EAClB,eAAe,UAAU,KAAA;EACzB,eAAe;EACf,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,UACE,aAAa,KAAA,IACX,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;GACE,QAAQ;GACR,WAAU;EACX,CAAA,GACA,QACD,EAAA,CAAA,IAEF;CAEN;CAEA,MAAM,UAAU,UAAU;EACxB;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;CAED,OAAO,OAAO,OAAO,WAAW,IAAI,UAAU;AAChD;AAEA,uBAAuB,cAAc"}

package/dist/components/data-table/sorting/data-table-sort-trigger.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { HeaderWith } 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/sorting/data-table-sort-trigger.d.ts
 export type DataTableSortTriggerProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'button'>, {
   /** O header da coluna. Exige `rowSortingFeature`. */

package/dist/components/data-table/sorting/data-table-sort-trigger.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { DataTableHeaderButton } from "../header/data-table-header-button.js";
-import { jsx } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react";
-import { useSelector } from "@tanstack/react-store";
 import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+import { useSelector } from "@tanstack/react-store";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/data-table/sorting/data-table-sort-trigger.tsx
 /**
 * O botão que alterna a ordenação da coluna: crescente, decrescente e sem ordenação, ou o ciclo

package/dist/components/data-table/sorting/data-table-sort-trigger.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table-sort-trigger.js","names":[],"sources":["../../../../src/components/data-table/sorting/data-table-sort-trigger.tsx"],"sourcesContent":["import { mergeProps, type 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 { HeaderWith } from '../../../types';\nimport { DataTableHeaderButton } from '../header/data-table-header-button';\n\nexport type DataTableSortTriggerProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n useRender.ComponentProps<'button'>,\n {\n /** O header da coluna. Exige `rowSortingFeature`. /\n header: HeaderWith<TFeatures, TData, 'rowSortingFeature'>;\n }\n>;\n\n/\n O botão que alterna a ordenação da coluna: crescente, decrescente e sem ordenação, ou o ciclo\n * configurado nas opções da tabela. Com Shift, ordena por mais de uma coluna. Serve à ordenação\n * local (`sortedRowModel`) e à da API (`manualSorting`).\n \n É o `DataTable.HeaderButton` com a ação de ordenar: ocupa a célula do header, e as bordas ficam\n * com a área de agarre do `DataTable.ResizeHandle`. Os filhos são o que ele mostra, em geral o\n * `DataTable.HeaderContent` e o `DataTable.SortIndicator`. Marca a direção em `data-sorted`. Numa\n * coluna `align: 'end'`, a ordem dos filhos se inverte: o indicador vem antes do texto, e o texto\n * encosta na mesma borda dos valores.\n \n Numa coluna que não ordena (`enableSorting: false`, ou sem accessor), vira um `span` sem ação,\n * marcado com `data-disabled`: o layout não muda, e um controle dentro dele, como o checkbox da\n * coluna de seleção, continua clicável. Um botão desabilitado engoliria o clique.\n /\nexport const DataTableSortTrigger = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: DataTableSortTriggerProps<TFeatures, TData>,\n) => {\n const { header, render, className, ...rest } = props;\n\n /\n Só re-renderiza quando a direção desta coluna muda, e só o atom da ordenação roda o seletor:\n * redimensionar ou selecionar não chega aqui.\n */\n const sorted = useSelector(header.column.table.atoms.sorting, () =>\n header.column.getIsSorted(),\n );\n\n const canSort = header.column.getCanSort();\n\n const baseProps = {\n 'data-component': 'DataTable.SortTrigger',\n 'data-sorted': sorted \|\| undefined,\n 'data-disabled': canSort ? undefined : '',\n onClick: canSort ? header.column.getToggleSortingHandler() : undefined,\n className: mergeTwClassNames(\n [\n // Invertida, a linha começa pelo fim: o texto fica na borda, e o indicador antes dele.\n 'in-data-[align=end]:flex-row-reverse',\n\n 'data-sorted:text-gray-12',\n ],\n className,\n ),\n };\n\n return (\n <DataTableHeaderButton\n {...mergeProps(baseProps, rest)}\n render={render ?? (canSort ? undefined : <span />)}\n />\n );\n};\n\nDataTableSortTrigger.displayName = 'DataTable.SortTrigger';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkCA,MAAa,wBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,WAAW,GAAG,SAAS;;;;;CAM/C,MAAM,SAAS,YAAY,OAAO,OAAO,MAAM,MAAM,eACnD,OAAO,OAAO,YAAY,CAC5B;CAEA,MAAM,UAAU,OAAO,OAAO,WAAW;CAEzC,MAAM,YAAY;EAChB,kBAAkB;EAClB,eAAe,UAAU,KAAA;EACzB,iBAAiB,UAAU,KAAA,IAAY;EACvC,SAAS,UAAU,OAAO,OAAO,wBAAwB,IAAI,KAAA;EAC7D,WAAW,kBACT,CAEE,wCAEA,0BACF,GACA,SACF;CACF;CAEA,OACE,oBAAC,uBAAD;EACE,GAAI,WAAW,WAAW,IAAI;EAC9B,QAAQ,WAAW,UAAU,KAAA,IAAY,oBAAC,QAAD,CAAO,CAAA;CACjD,CAAA;AAEL;AAEA,qBAAqB,cAAc"}
1	+ {"version":3,"file":"data-table-sort-trigger.js","names":[],"sources":["../../../../src/components/data-table/sorting/data-table-sort-trigger.tsx"],"sourcesContent":["import { mergeProps, type 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 { HeaderWith } from '../../../types';\nimport { DataTableHeaderButton } from '../header/data-table-header-button';\n\nexport type DataTableSortTriggerProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n useRender.ComponentProps<'button'>,\n {\n /** O header da coluna. Exige `rowSortingFeature`. /\n header: HeaderWith<TFeatures, TData, 'rowSortingFeature'>;\n }\n>;\n\n/\n O botão que alterna a ordenação da coluna: crescente, decrescente e sem ordenação, ou o ciclo\n * configurado nas opções da tabela. Com Shift, ordena por mais de uma coluna. Serve à ordenação\n * local (`sortedRowModel`) e à da API (`manualSorting`).\n \n É o `DataTable.HeaderButton` com a ação de ordenar: ocupa a célula do header, e as bordas ficam\n * com a área de agarre do `DataTable.ResizeHandle`. Os filhos são o que ele mostra, em geral o\n * `DataTable.HeaderContent` e o `DataTable.SortIndicator`. Marca a direção em `data-sorted`. Numa\n * coluna `align: 'end'`, a ordem dos filhos se inverte: o indicador vem antes do texto, e o texto\n * encosta na mesma borda dos valores.\n \n Numa coluna que não ordena (`enableSorting: false`, ou sem accessor), vira um `span` sem ação,\n * marcado com `data-disabled`: o layout não muda, e um controle dentro dele, como o checkbox da\n * coluna de seleção, continua clicável. Um botão desabilitado engoliria o clique.\n /\nexport const DataTableSortTrigger = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: DataTableSortTriggerProps<TFeatures, TData>,\n) => {\n const { header, render, className, ...rest } = props;\n\n /\n Só re-renderiza quando a direção desta coluna muda, e só o atom da ordenação roda o seletor:\n * redimensionar ou selecionar não chega aqui.\n */\n const sorted = useSelector(header.column.table.atoms.sorting, () =>\n header.column.getIsSorted(),\n );\n\n const canSort = header.column.getCanSort();\n\n const baseProps = {\n 'data-component': 'DataTable.SortTrigger',\n 'data-sorted': sorted \|\| undefined,\n 'data-disabled': canSort ? undefined : '',\n onClick: canSort ? header.column.getToggleSortingHandler() : undefined,\n className: mergeTwClassNames(\n [\n // Invertida, a linha começa pelo fim: o texto fica na borda, e o indicador antes dele.\n 'in-data-[align=end]:flex-row-reverse',\n\n 'data-sorted:text-gray-12',\n ],\n className,\n ),\n };\n\n return (\n <DataTableHeaderButton\n {...mergeProps(baseProps, rest)}\n render={render ?? (canSort ? undefined : <span />)}\n />\n );\n};\n\nDataTableSortTrigger.displayName = 'DataTable.SortTrigger';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkCA,MAAa,wBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,WAAW,GAAG,SAAS;;;;;CAM/C,MAAM,SAAS,YAAY,OAAO,OAAO,MAAM,MAAM,eACnD,OAAO,OAAO,YAAY,CAC5B;CAEA,MAAM,UAAU,OAAO,OAAO,WAAW;CAEzC,MAAM,YAAY;EAChB,kBAAkB;EAClB,eAAe,UAAU,KAAA;EACzB,iBAAiB,UAAU,KAAA,IAAY;EACvC,SAAS,UAAU,OAAO,OAAO,wBAAwB,IAAI,KAAA;EAC7D,WAAW,kBACT,CAEE,wCAEA,0BACF,GACA,SACF;CACF;CAEA,OACE,oBAAC,uBAAD;EACE,GAAI,WAAW,WAAW,IAAI;EAC9B,QAAQ,WAAW,UAAU,KAAA,IAAY,oBAAC,QAAD,CAAO,CAAA;CACjD,CAAA;AAEL;AAEA,qBAAqB,cAAc"}

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

@@ -4,7 +4,7 @@ import { RowDensity } from "../../../features/row-density/row-density-feature.ty
 import "../../../features/index.js";
 import { RowData, TableFeatures } from "@tanstack/react-table";
 import { Select } from "@lucasbernardosn/react-ui/collections/select";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/data-table/toolbar/data-table-density-select.d.ts
 export type DataTableDensitySelectProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Select.TriggerProps, {
   /** A tabela. Exige `rowDensityFeature`. */

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

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useSelector } from "@tanstack/react-store";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Select } from "@lucasbernardosn/react-ui/collections/select";
 //#region src/components/data-table/toolbar/data-table-density-select.tsx
 const DEFAULT_LABELS = {

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

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

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

@@ -2,7 +2,7 @@ import { TableWith } from "../../../types/table-with.js";
 import "../../../types/index.js";
 import { Column, RowData, TableFeatures } from "@tanstack/react-table";
 import { Select } from "@lucasbernardosn/react-ui/collections/select";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/data-table/toolbar/data-table-sort-column-select.d.ts
 export type DataTableSortColumnSelectProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Select.TriggerProps, {
   /** A tabela. Exige `rowSortingFeature`. */

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

@@ -1,7 +1,7 @@
 import { getDefaultColumnLabel } from "../../../utils/get-default-column-label.js";
 import { hasColumnFeature, hasTableFeature } from "../../../utils/has-feature.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useSelector } from "@tanstack/react-store";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Select } from "@lucasbernardosn/react-ui/collections/select";
 //#region src/components/data-table/toolbar/data-table-sort-column-select.tsx
 /** O valor da opção que tira a ordenação. Um id de coluna nunca é vazio. */

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

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

package/dist/components/data-table/toolbar/data-table-sort-direction-select.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { TableWith } from "../../../types/table-with.js";
 import "../../../types/index.js";
 import { RowData, SortDirection, TableFeatures } from "@tanstack/react-table";
 import { Select } from "@lucasbernardosn/react-ui/collections/select";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/data-table/toolbar/data-table-sort-direction-select.d.ts
 export type DataTableSortDirectionSelectProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Select.TriggerProps, {
   /** A tabela. Exige `rowSortingFeature`. */

package/dist/components/data-table/toolbar/data-table-sort-direction-select.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useSelector } from "@tanstack/react-store";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Select } from "@lucasbernardosn/react-ui/collections/select";
 //#region src/components/data-table/toolbar/data-table-sort-direction-select.tsx
 const DEFAULT_LABELS = {