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

@lucasbernardosn/react-table 0.2.0 → 0.4.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 (128) hide show

package/README.md CHANGED Viewed

@@ -27,7 +27,7 @@ O Tailwind CSS v4 precisa ler as classes da tabela e do `react-ui`:
 ```
 O resto da configuração (o `isolation: isolate` na raiz do app, por exemplo) está no
-[README do repositório](https://github.com/LucasBernardoSN/react-monorepo#uso).
+[README do `react-ui`](https://www.npmjs.com/package/@lucasbernardosn/react-ui#configuração).
 ## Uso mínimo

package/dist/components/column-menu/column-menu-hide-item.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import "../../types/index.js";
 import { ColumnMenuLabels } from "./column-menu-labels.js";
 import { RowData, TableFeatures } from "@tanstack/react-table";
 import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/column-menu/column-menu-hide-item.d.ts
 export type ColumnMenuHideItemProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Menu.ItemProps, {
   /** A coluna. Exige `columnVisibilityFeature`. */

package/dist/components/column-menu/column-menu-hide-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"column-menu-hide-item.js","names":[],"sources":["../../../src/components/column-menu/column-menu-hide-item.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react';\nimport { Icon } from '@lucasbernardosn/react-ui/display/icon';\nimport { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { EyeSlashIcon } from '@phosphor-icons/react';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { ColumnWith } from '../../types';\nimport {\n COLUMN_MENU_DEFAULT_LABELS,\n type ColumnMenuLabels,\n} from './column-menu-labels';\n\nexport type ColumnMenuHideItemProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n Menu.ItemProps,\n {\n /** A coluna. Exige `columnVisibilityFeature`. /\n column: ColumnWith<TFeatures, TData, 'columnVisibilityFeature'>;\n /* O texto do item, em `hide`; os outros textos não se aplicam aqui. /\n labels?: Partial<ColumnMenuLabels>;\n }\n>;\n\n/\n O item que esconde a coluna. Ela volta pelo `ColumnsPanel`, ou pelo estado de visibilidade no\n * app. Numa coluna com `enableHiding: false`, não renderiza.\n */\nexport const ColumnMenuHideItem = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: ColumnMenuHideItemProps<TFeatures, TData>,\n) => {\n const { column, labels, children, ...rest } = props;\n\n if (!column.getCanHide()) {\n return null;\n }\n\n return (\n <Menu.Item\n {...mergeProps(\n {\n 'data-component': 'ColumnMenu.HideItem',\n onClick: () => column.toggleVisibility(false),\n },\n rest,\n )}\n >\n {children ?? (\n <>\n <Icon render={<EyeSlashIcon />} />\n {labels?.hide ?? COLUMN_MENU_DEFAULT_LABELS.hide}\n </>\n )}\n </Menu.Item>\n );\n};\n\nColumnMenuHideItem.displayName = 'ColumnMenu.HideItem';\n"],"mappings":";;;;;;;;;;;AA6BA,MAAa,sBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,UAAU,GAAG,SAAS;CAE9C,IAAI,CAAC,OAAO,WAAW,GACrB,OAAO;CAGT,OACE,oBAAC,KAAK,MAAN;EACE,GAAI,WACF;GACE,kBAAkB;GAClB,eAAe,OAAO,iBAAiB,KAAK;EAC9C,GACA,IACF;EAEC,UAAA,YACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,cAAD,CAAe,CAAA,EAAI,CAAA,GAChC,QAAQ,QAAQ,2BAA2B,IAC5C,EAAA,CAAA;CAEK,CAAA;AAEf;AAEA,mBAAmB,cAAc"}
1	+ {"version":3,"file":"column-menu-hide-item.js","names":[],"sources":["../../../src/components/column-menu/column-menu-hide-item.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react';\nimport { Icon } from '@lucasbernardosn/react-ui/display/icon';\nimport { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { EyeSlashIcon } from '@phosphor-icons/react';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { ColumnWith } from '../../types';\nimport {\n COLUMN_MENU_DEFAULT_LABELS,\n type ColumnMenuLabels,\n} from './column-menu-labels';\n\nexport type ColumnMenuHideItemProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n Menu.ItemProps,\n {\n /** A coluna. Exige `columnVisibilityFeature`. /\n column: ColumnWith<TFeatures, TData, 'columnVisibilityFeature'>;\n /* O texto do item, em `hide`; os outros textos não se aplicam aqui. /\n labels?: Partial<ColumnMenuLabels>;\n }\n>;\n\n/\n O item que esconde a coluna. Ela volta pelo `ColumnsPanel`, ou pelo estado de visibilidade no\n * app. Numa coluna com `enableHiding: false`, não renderiza.\n */\nexport const ColumnMenuHideItem = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: ColumnMenuHideItemProps<TFeatures, TData>,\n) => {\n const { column, labels, children, ...rest } = props;\n\n if (!column.getCanHide()) {\n return null;\n }\n\n return (\n <Menu.Item\n {...mergeProps(\n {\n 'data-component': 'ColumnMenu.HideItem',\n onClick: () => column.toggleVisibility(false),\n },\n rest,\n )}\n >\n {children ?? (\n <>\n <Icon render={<EyeSlashIcon />} />\n {labels?.hide ?? COLUMN_MENU_DEFAULT_LABELS.hide}\n </>\n )}\n </Menu.Item>\n );\n};\n\nColumnMenuHideItem.displayName = 'ColumnMenu.HideItem';\n"],"mappings":";;;;;;;;;;;AA6BA,MAAa,sBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,UAAU,GAAG,SAAS;CAE9C,IAAI,CAAC,OAAO,WAAW,GACrB,OAAO;CAGT,OACE,oBAAC,KAAK,MAAN;EACE,GAAI,WACF;GACE,kBAAkB;GAClB,eAAe,OAAO,iBAAiB,KAAK;EAC9C,GACA,IACF;EAEC,UAAA,YACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,cAAD,CAAe,CAAA,EAAI,CAAA,GAChC,QAAQ,QAAQ,2BAA2B,IAC5C,EAAA,CAAA;CAEK,CAAA;AAEf;AAEA,mBAAmB,cAAc"}

package/dist/components/column-menu/column-menu-pin-items.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import "../../types/index.js";
 import { ColumnMenuLabels } from "./column-menu-labels.js";
 import { RowData, TableFeatures } from "@tanstack/react-table";
 import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/column-menu/column-menu-pin-items.d.ts
 export type ColumnMenuPinItemsProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Menu.GroupProps, {
   /** A coluna. Exige `columnPinningFeature`. */

package/dist/components/column-menu/column-menu-pin-items.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"column-menu-pin-items.js","names":[],"sources":["../../../src/components/column-menu/column-menu-pin-items.tsx"],"sourcesContent":["import { Icon } from '@lucasbernardosn/react-ui/display/icon';\nimport { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { PushPinIcon, PushPinSlashIcon } from '@phosphor-icons/react';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { ColumnWith } from '../../types';\nimport { ColumnMenuCheck } from './column-menu-check';\nimport {\n COLUMN_MENU_DEFAULT_LABELS,\n type ColumnMenuLabels,\n} from './column-menu-labels';\n\nexport type ColumnMenuPinItemsProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n Menu.GroupProps,\n {\n /** A coluna. Exige `columnPinningFeature`. /\n column: ColumnWith<TFeatures, TData, 'columnPinningFeature'>;\n /* O texto dos itens; os que faltam ficam com o padrão. /\n labels?: Partial<ColumnMenuLabels>;\n }\n>;\n\n/\n Os itens da fixação: no início e no fim, com um check no lado atual, e \"Desafixar\" com a coluna\n * fixada. Nos dois lados, a coluna entra junto do centro, depois das que já estavam fixadas: as\n * das pontas, como a seleção e as ações, continuam nas pontas. Numa coluna de grupo, fixa as\n * colunas do grupo. Numa coluna com `enablePinning: false`, não renderiza.\n /\nexport const ColumnMenuPinItems = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: ColumnMenuPinItemsProps<TFeatures, TData>,\n) => {\n const { column, labels, ...rest } = props;\n\n /* Re-renderiza quando esta coluna é fixada ou solta. /\n const pinned = useSelector(column.table.atoms.columnPinning, () =>\n column.getIsPinned(),\n );\n\n if (!column.getCanPin()) {\n return null;\n }\n\n const getLabel = (key: keyof ColumnMenuLabels) =>\n labels?.[key] ?? COLUMN_MENU_DEFAULT_LABELS[key];\n\n /\n Fixa no começo da lista do fim, a mais perto do centro. O `column.pin('end')` acrescenta no\n * fim da lista, que é a borda da tabela: a coluna passaria das que já estavam fixadas, como a de\n * ações, enquanto no início ela fica junto do centro. Usa as colunas-folha, como o `pin`.\n */\n const pinToEnd = () => {\n const columnIds = column.getLeafColumns().map((leaf) => leaf.id);\n\n column.table.setColumnPinning((old) => ({\n start: old.start.filter((id) => !columnIds.includes(id)),\n end: [...columnIds, ...old.end.filter((id) => !columnIds.includes(id))],\n }));\n };\n\n return (\n <Menu.Group\n data-component=\"ColumnMenu.PinItems\"\n {...rest}\n >\n <Menu.Item onClick={() => column.pin('start')}>\n <Icon render={<PushPinIcon />} />\n {getLabel('pinStart')}\n {pinned === 'start' && <ColumnMenuCheck />}\n </Menu.Item>\n\n <Menu.Item onClick={pinToEnd}>\n <Icon render={<PushPinIcon />} />\n {getLabel('pinEnd')}\n {pinned === 'end' && <ColumnMenuCheck />}\n </Menu.Item>\n\n {pinned && (\n <Menu.Item onClick={() => column.pin(false)}>\n <Icon render={<PushPinSlashIcon />} />\n {getLabel('unpin')}\n </Menu.Item>\n )}\n </Menu.Group>\n );\n};\n\nColumnMenuPinItems.displayName = 'ColumnMenu.PinItems';\n"],"mappings":";;;;;;;;;;;;;;AAgCA,MAAa,sBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,GAAG,SAAS;;CAGpC,MAAM,SAAS,YAAY,OAAO,MAAM,MAAM,qBAC5C,OAAO,YAAY,CACrB;CAEA,IAAI,CAAC,OAAO,UAAU,GACpB,OAAO;CAGT,MAAM,YAAY,QAChB,SAAS,QAAQ,2BAA2B;;;;;;CAO9C,MAAM,iBAAiB;EACrB,MAAM,YAAY,OAAO,eAAe,CAAC,CAAC,KAAK,SAAS,KAAK,EAAE;EAE/D,OAAO,MAAM,kBAAkB,SAAS;GACtC,OAAO,IAAI,MAAM,QAAQ,OAAO,CAAC,UAAU,SAAS,EAAE,CAAC;GACvD,KAAK,CAAC,GAAG,WAAW,GAAG,IAAI,IAAI,QAAQ,OAAO,CAAC,UAAU,SAAS,EAAE,CAAC,CAAC;EACxE,EAAE;CACJ;CAEA,OACE,qBAAC,KAAK,OAAN;EACE,kBAAe;EACf,GAAI;EAFN,UAAA;GAIE,qBAAC,KAAK,MAAN;IAAW,eAAe,OAAO,IAAI,OAAO;IAA5C,UAAA;KACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,aAAD,CAAc,CAAA,EAAI,CAAA;KAC/B,SAAS,UAAU;KACnB,WAAW,WAAW,oBAAC,iBAAD,CAAkB,CAAA;IAChC;;GAEX,qBAAC,KAAK,MAAN;IAAW,SAAS;IAApB,UAAA;KACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,aAAD,CAAc,CAAA,EAAI,CAAA;KAC/B,SAAS,QAAQ;KACjB,WAAW,SAAS,oBAAC,iBAAD,CAAkB,CAAA;IAC9B;;GAEV,UACC,qBAAC,KAAK,MAAN;IAAW,eAAe,OAAO,IAAI,KAAK;IAA1C,UAAA,CACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,kBAAD,CAAmB,CAAA,EAAI,CAAA,GACpC,SAAS,OAAO,CACR;;EAEH;;AAEhB;AAEA,mBAAmB,cAAc"}
1	+ {"version":3,"file":"column-menu-pin-items.js","names":[],"sources":["../../../src/components/column-menu/column-menu-pin-items.tsx"],"sourcesContent":["import { Icon } from '@lucasbernardosn/react-ui/display/icon';\nimport { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { PushPinIcon, PushPinSlashIcon } from '@phosphor-icons/react';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { ColumnWith } from '../../types';\nimport { ColumnMenuCheck } from './column-menu-check';\nimport {\n COLUMN_MENU_DEFAULT_LABELS,\n type ColumnMenuLabels,\n} from './column-menu-labels';\n\nexport type ColumnMenuPinItemsProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n Menu.GroupProps,\n {\n /** A coluna. Exige `columnPinningFeature`. /\n column: ColumnWith<TFeatures, TData, 'columnPinningFeature'>;\n /* O texto dos itens; os que faltam ficam com o padrão. /\n labels?: Partial<ColumnMenuLabels>;\n }\n>;\n\n/\n Os itens da fixação: no início e no fim, com um check no lado atual, e \"Desafixar\" com a coluna\n * fixada. Nos dois lados, a coluna entra junto do centro, depois das que já estavam fixadas: as\n * das pontas, como a seleção e as ações, continuam nas pontas. Numa coluna de grupo, fixa as\n * colunas do grupo. Numa coluna com `enablePinning: false`, não renderiza.\n /\nexport const ColumnMenuPinItems = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: ColumnMenuPinItemsProps<TFeatures, TData>,\n) => {\n const { column, labels, ...rest } = props;\n\n /* Re-renderiza quando esta coluna é fixada ou solta. /\n const pinned = useSelector(column.table.atoms.columnPinning, () =>\n column.getIsPinned(),\n );\n\n if (!column.getCanPin()) {\n return null;\n }\n\n const getLabel = (key: keyof ColumnMenuLabels) =>\n labels?.[key] ?? COLUMN_MENU_DEFAULT_LABELS[key];\n\n /\n Fixa no começo da lista do fim, a mais perto do centro. O `column.pin('end')` acrescenta no\n * fim da lista, que é a borda da tabela: a coluna passaria das que já estavam fixadas, como a de\n * ações, enquanto no início ela fica junto do centro. Usa as colunas-folha, como o `pin`.\n */\n const pinToEnd = () => {\n const columnIds = column.getLeafColumns().map((leaf) => leaf.id);\n\n column.table.setColumnPinning((old) => ({\n start: old.start.filter((id) => !columnIds.includes(id)),\n end: [...columnIds, ...old.end.filter((id) => !columnIds.includes(id))],\n }));\n };\n\n return (\n <Menu.Group\n data-component=\"ColumnMenu.PinItems\"\n {...rest}\n >\n <Menu.Item onClick={() => column.pin('start')}>\n <Icon render={<PushPinIcon />} />\n {getLabel('pinStart')}\n {pinned === 'start' && <ColumnMenuCheck />}\n </Menu.Item>\n\n <Menu.Item onClick={pinToEnd}>\n <Icon render={<PushPinIcon />} />\n {getLabel('pinEnd')}\n {pinned === 'end' && <ColumnMenuCheck />}\n </Menu.Item>\n\n {pinned && (\n <Menu.Item onClick={() => column.pin(false)}>\n <Icon render={<PushPinSlashIcon />} />\n {getLabel('unpin')}\n </Menu.Item>\n )}\n </Menu.Group>\n );\n};\n\nColumnMenuPinItems.displayName = 'ColumnMenu.PinItems';\n"],"mappings":";;;;;;;;;;;;;;AAgCA,MAAa,sBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,GAAG,SAAS;;CAGpC,MAAM,SAAS,YAAY,OAAO,MAAM,MAAM,qBAC5C,OAAO,YAAY,CACrB;CAEA,IAAI,CAAC,OAAO,UAAU,GACpB,OAAO;CAGT,MAAM,YAAY,QAChB,SAAS,QAAQ,2BAA2B;;;;;;CAO9C,MAAM,iBAAiB;EACrB,MAAM,YAAY,OAAO,eAAe,CAAC,CAAC,KAAK,SAAS,KAAK,EAAE;EAE/D,OAAO,MAAM,kBAAkB,SAAS;GACtC,OAAO,IAAI,MAAM,QAAQ,OAAO,CAAC,UAAU,SAAS,EAAE,CAAC;GACvD,KAAK,CAAC,GAAG,WAAW,GAAG,IAAI,IAAI,QAAQ,OAAO,CAAC,UAAU,SAAS,EAAE,CAAC,CAAC;EACxE,EAAE;CACJ;CAEA,OACE,qBAAC,KAAK,OAAN;EACE,kBAAe;EACf,GAAI;EAFN,UAAA;GAIE,qBAAC,KAAK,MAAN;IAAW,eAAe,OAAO,IAAI,OAAO;IAA5C,UAAA;KACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,aAAD,CAAc,CAAA,EAAI,CAAA;KAC/B,SAAS,UAAU;KACnB,WAAW,WAAW,oBAAC,iBAAD,CAAkB,CAAA;IAChC;;GAEX,qBAAC,KAAK,MAAN;IAAW,SAAS;IAApB,UAAA;KACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,aAAD,CAAc,CAAA,EAAI,CAAA;KAC/B,SAAS,QAAQ;KACjB,WAAW,SAAS,oBAAC,iBAAD,CAAkB,CAAA;IAC9B;;GAEV,UACC,qBAAC,KAAK,MAAN;IAAW,eAAe,OAAO,IAAI,KAAK;IAA1C,UAAA,CACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,kBAAD,CAAmB,CAAA,EAAI,CAAA,GACpC,SAAS,OAAO,CACR;;EAEH;;AAEhB;AAEA,mBAAmB,cAAc"}

package/dist/components/column-menu/column-menu-popup.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { ColumnMenuLabels } from "./column-menu-labels.js";
 import { Header, RowData, TableFeatures } from "@tanstack/react-table";
 import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/column-menu/column-menu-popup.d.ts
 export type ColumnMenuPopupProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Menu.PopupProps, {
   /** O header da coluna. */

package/dist/components/column-menu/column-menu-popup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"column-menu-popup.js","names":["Fragment"],"sources":["../../../src/components/column-menu/column-menu-popup.tsx"],"sourcesContent":["import { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport { mergeStateClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport type { Header, RowData, TableFeatures } from '@tanstack/react-table';\nimport { Fragment } from 'react';\nimport { hasColumnFeature } from '../../utils';\nimport { ColumnMenuHideItem } from './column-menu-hide-item';\nimport type { ColumnMenuLabels } from './column-menu-labels';\nimport { ColumnMenuPinItems } from './column-menu-pin-items';\nimport { ColumnMenuSortItems } from './column-menu-sort-items';\n\nexport type ColumnMenuPopupProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n Menu.PopupProps,\n {\n /** O header da coluna. /\n header: Header<TFeatures, TData>;\n /* O texto dos itens padrão; os que faltam ficam com o padrão. Sem efeito com `children`. /\n labels?: Partial<ColumnMenuLabels>;\n /* As props do `Menu.Positioner`, como `side` e `align`. /\n positionerProps?: Menu.PositionerProps;\n }\n>;\n\n/\n A caixa do menu da coluna, já com o `Menu.Portal` e o `Menu.Positioner`. As props passam para o\n * `Menu.Popup`. Abre encostada no header, e a largura mínima cabe o item mais longo: sem ela, o\n * menu cresceria quando o \"Remover ordenação\" aparece.\n \n Sem `children`, mostra os grupos padrão separados por linhas: ordenação\n * (`ColumnMenu.SortItems`), fixação (`ColumnMenu.PinItems`) e visibilidade\n * (`ColumnMenu.HideItem`). Cada grupo só aparece com a feature registrada na tabela e permitida na\n * coluna. Com `children`, eles substituem os grupos, para escolher, reordenar ou somar itens\n * próprios com o `Menu.Item`. Os grupos recebem a coluna, e não o header: servem também fora\n * dele, como no `ColumnsPanel.Item`.\n \n @example\n * ```tsx\n * <ColumnMenu.Popup header={header}>\n * <ColumnMenu.SortItems column={header.column} />\n * <Menu.Separator />\n * <Menu.Item onClick={openFilter}>Filtrar</Menu.Item>\n * </ColumnMenu.Popup>\n * ```\n /\nexport const ColumnMenuPopup = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: ColumnMenuPopupProps<TFeatures, TData>,\n) => {\n const { header, labels, positionerProps, className, children, ...rest } =\n props;\n\n /\n Os grupos padrão que a coluna aceita. A conta é feita aqui, e não pelo `null` de cada grupo,\n * para a linha separar só os grupos que aparecem.\n */\n const groups = [\n hasColumnFeature(header.column, 'rowSortingFeature') &&\n header.column.getCanSort() && (\n <ColumnMenuSortItems\n key=\"sort\"\n column={header.column}\n labels={labels}\n />\n ),\n hasColumnFeature(header.column, 'columnPinningFeature') &&\n header.column.getCanPin() && (\n <ColumnMenuPinItems\n key=\"pin\"\n column={header.column}\n labels={labels}\n />\n ),\n hasColumnFeature(header.column, 'columnVisibilityFeature') &&\n header.column.getCanHide() && (\n <ColumnMenuHideItem\n key=\"hide\"\n column={header.column}\n labels={labels}\n />\n ),\n ].filter((group) => group !== false);\n\n return (\n <Menu.Portal>\n <Menu.Positioner\n sideOffset={0}\n // Fixar ou mover a coluna leva o header para outro lugar enquanto o menu fecha: seguindo o\n // trigger, o menu deslizaria até lá na animação de saída. A rolagem continua acompanhada.\n disableAnchorTracking={true}\n {...positionerProps}\n >\n <Menu.Popup\n data-component=\"ColumnMenu.Popup\"\n className={mergeStateClassNames(['min-w-48'], className)}\n {...rest}\n >\n {children ??\n groups.map((group, index) => (\n <Fragment key={group.key}>\n {index > 0 && <Menu.Separator />}\n {group}\n </Fragment>\n ))}\n </Menu.Popup>\n </Menu.Positioner>\n </Menu.Portal>\n );\n};\n\nColumnMenuPopup.displayName = 'ColumnMenu.Popup';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,mBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,iBAAiB,WAAW,UAAU,GAAG,SAC/D;;;;;CAMF,MAAM,SAAS;EACb,iBAAiB,OAAO,QAAQ,mBAAmB,KACjD,OAAO,OAAO,WAAW,KACvB,oBAAC,qBAAD;GAEE,QAAQ,OAAO;GACP;EACT,GAHK,MAGL;EAEL,iBAAiB,OAAO,QAAQ,sBAAsB,KACpD,OAAO,OAAO,UAAU,KACtB,oBAAC,oBAAD;GAEE,QAAQ,OAAO;GACP;EACT,GAHK,KAGL;EAEL,iBAAiB,OAAO,QAAQ,yBAAyB,KACvD,OAAO,OAAO,WAAW,KACvB,oBAAC,oBAAD;GAEE,QAAQ,OAAO;GACP;EACT,GAHK,MAGL;CAEP,CAAC,CAAC,QAAQ,UAAU,UAAU,KAAK;CAEnC,OACE,oBAAC,KAAK,QAAN,EAAA,UACE,oBAAC,KAAK,YAAN;EACE,YAAY;EAGZ,uBAAuB;EACvB,GAAI;EAEJ,UAAA,oBAAC,KAAK,OAAN;GACE,kBAAe;GACf,WAAW,qBAAqB,CAAC,UAAU,GAAG,SAAS;GACvD,GAAI;GAEH,UAAA,YACC,OAAO,KAAK,OAAO,UACjB,qBAACA,YAAD,EAAA,UAAA,CACG,QAAQ,KAAK,oBAAC,KAAK,WAAN,CAAiB,CAAA,GAC9B,KACO,EAAA,GAHK,MAAM,GAGX,CACX;EACO,CAAA;CACG,CAAA,EACN,CAAA;AAEjB;AAEA,gBAAgB,cAAc"}
1	+ {"version":3,"file":"column-menu-popup.js","names":["Fragment"],"sources":["../../../src/components/column-menu/column-menu-popup.tsx"],"sourcesContent":["import { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport { mergeStateClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport type { Header, RowData, TableFeatures } from '@tanstack/react-table';\nimport { Fragment } from 'react';\nimport { hasColumnFeature } from '../../utils';\nimport { ColumnMenuHideItem } from './column-menu-hide-item';\nimport type { ColumnMenuLabels } from './column-menu-labels';\nimport { ColumnMenuPinItems } from './column-menu-pin-items';\nimport { ColumnMenuSortItems } from './column-menu-sort-items';\n\nexport type ColumnMenuPopupProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n Menu.PopupProps,\n {\n /** O header da coluna. /\n header: Header<TFeatures, TData>;\n /* O texto dos itens padrão; os que faltam ficam com o padrão. Sem efeito com `children`. /\n labels?: Partial<ColumnMenuLabels>;\n /* As props do `Menu.Positioner`, como `side` e `align`. /\n positionerProps?: Menu.PositionerProps;\n }\n>;\n\n/\n A caixa do menu da coluna, já com o `Menu.Portal` e o `Menu.Positioner`. As props passam para o\n * `Menu.Popup`. Abre encostada no header, e a largura mínima cabe o item mais longo: sem ela, o\n * menu cresceria quando o \"Remover ordenação\" aparece.\n \n Sem `children`, mostra os grupos padrão separados por linhas: ordenação\n * (`ColumnMenu.SortItems`), fixação (`ColumnMenu.PinItems`) e visibilidade\n * (`ColumnMenu.HideItem`). Cada grupo só aparece com a feature registrada na tabela e permitida na\n * coluna. Com `children`, eles substituem os grupos, para escolher, reordenar ou somar itens\n * próprios com o `Menu.Item`. Os grupos recebem a coluna, e não o header: servem também fora\n * dele, como no `ColumnsPanel.Item`.\n \n @example\n * ```tsx\n * <ColumnMenu.Popup header={header}>\n * <ColumnMenu.SortItems column={header.column} />\n * <Menu.Separator />\n * <Menu.Item onClick={openFilter}>Filtrar</Menu.Item>\n * </ColumnMenu.Popup>\n * ```\n /\nexport const ColumnMenuPopup = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: ColumnMenuPopupProps<TFeatures, TData>,\n) => {\n const { header, labels, positionerProps, className, children, ...rest } =\n props;\n\n /\n Os grupos padrão que a coluna aceita. A conta é feita aqui, e não pelo `null` de cada grupo,\n * para a linha separar só os grupos que aparecem.\n */\n const groups = [\n hasColumnFeature(header.column, 'rowSortingFeature') &&\n header.column.getCanSort() && (\n <ColumnMenuSortItems\n key=\"sort\"\n column={header.column}\n labels={labels}\n />\n ),\n hasColumnFeature(header.column, 'columnPinningFeature') &&\n header.column.getCanPin() && (\n <ColumnMenuPinItems\n key=\"pin\"\n column={header.column}\n labels={labels}\n />\n ),\n hasColumnFeature(header.column, 'columnVisibilityFeature') &&\n header.column.getCanHide() && (\n <ColumnMenuHideItem\n key=\"hide\"\n column={header.column}\n labels={labels}\n />\n ),\n ].filter((group) => group !== false);\n\n return (\n <Menu.Portal>\n <Menu.Positioner\n sideOffset={0}\n // Fixar ou mover a coluna leva o header para outro lugar enquanto o menu fecha: seguindo o\n // trigger, o menu deslizaria até lá na animação de saída. A rolagem continua acompanhada.\n disableAnchorTracking={true}\n {...positionerProps}\n >\n <Menu.Popup\n data-component=\"ColumnMenu.Popup\"\n className={mergeStateClassNames(['min-w-48'], className)}\n {...rest}\n >\n {children ??\n groups.map((group, index) => (\n <Fragment key={group.key}>\n {index > 0 && <Menu.Separator />}\n {group}\n </Fragment>\n ))}\n </Menu.Popup>\n </Menu.Positioner>\n </Menu.Portal>\n );\n};\n\nColumnMenuPopup.displayName = 'ColumnMenu.Popup';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,mBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,iBAAiB,WAAW,UAAU,GAAG,SAC/D;;;;;CAMF,MAAM,SAAS;EACb,iBAAiB,OAAO,QAAQ,mBAAmB,KACjD,OAAO,OAAO,WAAW,KACvB,oBAAC,qBAAD;GAEE,QAAQ,OAAO;GACP;EACT,GAHK,MAGL;EAEL,iBAAiB,OAAO,QAAQ,sBAAsB,KACpD,OAAO,OAAO,UAAU,KACtB,oBAAC,oBAAD;GAEE,QAAQ,OAAO;GACP;EACT,GAHK,KAGL;EAEL,iBAAiB,OAAO,QAAQ,yBAAyB,KACvD,OAAO,OAAO,WAAW,KACvB,oBAAC,oBAAD;GAEE,QAAQ,OAAO;GACP;EACT,GAHK,MAGL;CAEP,CAAC,CAAC,QAAQ,UAAU,UAAU,KAAK;CAEnC,OACE,oBAAC,KAAK,QAAN,EAAA,UACE,oBAAC,KAAK,YAAN;EACE,YAAY;EAGZ,uBAAuB;EACvB,GAAI;EAEJ,UAAA,oBAAC,KAAK,OAAN;GACE,kBAAe;GACf,WAAW,qBAAqB,CAAC,UAAU,GAAG,SAAS;GACvD,GAAI;GAEH,UAAA,YACC,OAAO,KAAK,OAAO,UACjB,qBAACA,YAAD,EAAA,UAAA,CACG,QAAQ,KAAK,oBAAC,KAAK,WAAN,CAAiB,CAAA,GAC9B,KACO,EAAA,GAHK,MAAM,GAGX,CACX;EACO,CAAA;CACG,CAAA,EACN,CAAA;AAEjB;AAEA,gBAAgB,cAAc"}

package/dist/components/column-menu/column-menu-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"column-menu-root.js","names":[],"sources":["../../../src/components/column-menu/column-menu-root.tsx"],"sourcesContent":["import { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport type { AnyType } from '@lucasbernardosn/utils';\n\nexport type ColumnMenuRootProps<Payload = unknown> = Menu.RootProps<Payload>;\n\n/*\n O estado do menu da coluna: o `Menu.Root` do `ui`, para o menu inteiro sair do mesmo namespace.\n * Não renderiza elemento.\n \n Vai dentro da `DataTable.HeaderCell`, no lugar do `DataTable.SortTrigger`: numa coluna com\n * menu, o clique no header abre o menu, e a ordenação passa para os itens dele.\n \n @example\n * ```tsx\n * <DataTable.Header table={table}>\n * {(header) => (\n * <DataTable.HeaderCell header={header}>\n * <ColumnMenu.Root>\n * <ColumnMenu.Trigger header={header}>\n * <DataTable.HeaderContent header={header} />\n * <DataTable.SortIndicator header={header} />\n * </ColumnMenu.Trigger>\n * <ColumnMenu.Popup header={header} />\n * </ColumnMenu.Root>\n * <DataTable.ResizeHandle header={header} />\n * </DataTable.HeaderCell>\n * )}\n * </DataTable.Header>\n * ```\n */\nexport const ColumnMenuRoot = <Payload extends AnyType = unknown>(\n props: ColumnMenuRootProps<Payload>,\n) => {\n return <Menu.Root<Payload> {...props} />;\n};\n\nColumnMenuRoot.displayName = 'ColumnMenu.Root';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAa,kBACX,UACG;CACH,OAAO,oBAAC,KAAK,MAAN,EAAoB,GAAI,MAAQ,CAAA;AACzC;AAEA,eAAe,cAAc"}
1	+ {"version":3,"file":"column-menu-root.js","names":[],"sources":["../../../src/components/column-menu/column-menu-root.tsx"],"sourcesContent":["import { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport type { AnyType } from '@lucasbernardosn/ts-utils';\n\nexport type ColumnMenuRootProps<Payload = unknown> = Menu.RootProps<Payload>;\n\n/*\n O estado do menu da coluna: o `Menu.Root` do `ui`, para o menu inteiro sair do mesmo namespace.\n * Não renderiza elemento.\n \n Vai dentro da `DataTable.HeaderCell`, no lugar do `DataTable.SortTrigger`: numa coluna com\n * menu, o clique no header abre o menu, e a ordenação passa para os itens dele.\n \n @example\n * ```tsx\n * <DataTable.Header table={table}>\n * {(header) => (\n * <DataTable.HeaderCell header={header}>\n * <ColumnMenu.Root>\n * <ColumnMenu.Trigger header={header}>\n * <DataTable.HeaderContent header={header} />\n * <DataTable.SortIndicator header={header} />\n * </ColumnMenu.Trigger>\n * <ColumnMenu.Popup header={header} />\n * </ColumnMenu.Root>\n * <DataTable.ResizeHandle header={header} />\n * </DataTable.HeaderCell>\n * )}\n * </DataTable.Header>\n * ```\n */\nexport const ColumnMenuRoot = <Payload extends AnyType = unknown>(\n props: ColumnMenuRootProps<Payload>,\n) => {\n return <Menu.Root<Payload> {...props} />;\n};\n\nColumnMenuRoot.displayName = 'ColumnMenu.Root';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAa,kBACX,UACG;CACH,OAAO,oBAAC,KAAK,MAAN,EAAoB,GAAI,MAAQ,CAAA;AACzC;AAEA,eAAe,cAAc"}

package/dist/components/column-menu/column-menu-sort-items.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import { ColumnMenuLabels } from "./column-menu-labels.js";
 import { RowData, TableFeatures } from "@tanstack/react-table";
 import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
 import React from "react";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/column-menu/column-menu-sort-items.d.ts
 export type ColumnMenuSortItemsProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Menu.GroupProps, {
   /** A coluna. Exige `rowSortingFeature`. */

package/dist/components/column-menu/column-menu-sort-items.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"column-menu-sort-items.js","names":[],"sources":["../../../src/components/column-menu/column-menu-sort-items.tsx"],"sourcesContent":["import { Icon } from '@lucasbernardosn/react-ui/display/icon';\nimport { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { CaretDownIcon, CaretUpIcon, XIcon } from '@phosphor-icons/react';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport type { ColumnWith } from '../../types';\nimport { ColumnMenuCheck } from './column-menu-check';\nimport {\n COLUMN_MENU_DEFAULT_LABELS,\n type ColumnMenuLabels,\n} from './column-menu-labels';\n\nexport type ColumnMenuSortItemsProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n Menu.GroupProps,\n {\n /** A coluna. Exige `rowSortingFeature`. /\n column: ColumnWith<TFeatures, TData, 'rowSortingFeature'>;\n /* O texto dos itens; os que faltam ficam com o padrão. /\n labels?: Partial<ColumnMenuLabels>;\n }\n>;\n\n/\n Os itens da ordenação: crescente e decrescente, com um check na direção atual, e \"Remover\n * ordenação\" com a coluna ordenada. Com `enableSortingRemoval: false` na tabela, que deixa a\n * lista sempre ordenada, o \"Remover ordenação\" não aparece. O item troca a ordenação inteira por esta coluna; com Shift\n * (ou o `isMultiSortEvent` da tabela), soma a coluna à ordenação múltipla, como o\n * `DataTable.SortTrigger`.\n \n O check é só visual: a direção chega ao leitor de tela pelo `aria-sort` da\n * `DataTable.HeaderCell`. Numa coluna que não ordena, não renderiza.\n /\nexport const ColumnMenuSortItems = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: ColumnMenuSortItemsProps<TFeatures, TData>,\n) => {\n const { column, labels, ...rest } = props;\n\n /* Re-renderiza quando a direção desta coluna muda. /\n const sorted = useSelector(column.table.atoms.sorting, () =>\n column.getIsSorted(),\n );\n\n if (!column.getCanSort()) {\n return null;\n }\n\n const canRemoveSorting = column.table.options.enableSortingRemoval !== false;\n\n const getLabel = (key: keyof ColumnMenuLabels) =>\n labels?.[key] ?? COLUMN_MENU_DEFAULT_LABELS[key];\n\n /* O mesmo critério do clique no header para somar a coluna à ordenação múltipla. */\n const toggleSorting = (isDesc: boolean, event: React.MouseEvent) => {\n const isMulti =\n column.getCanMultiSort() &&\n (column.table.options.isMultiSortEvent?.(event) ?? false);\n\n column.toggleSorting(isDesc, isMulti);\n };\n\n return (\n <Menu.Group\n data-component=\"ColumnMenu.SortItems\"\n {...rest}\n >\n <Menu.Item onClick={(event) => toggleSorting(false, event)}>\n <Icon render={<CaretUpIcon />} />\n {getLabel('sortAsc')}\n {sorted === 'asc' && <ColumnMenuCheck />}\n </Menu.Item>\n\n <Menu.Item onClick={(event) => toggleSorting(true, event)}>\n <Icon render={<CaretDownIcon />} />\n {getLabel('sortDesc')}\n {sorted === 'desc' && <ColumnMenuCheck />}\n </Menu.Item>\n\n {sorted && canRemoveSorting && (\n <Menu.Item onClick={() => column.clearSorting()}>\n <Icon render={<XIcon />} />\n {getLabel('clearSorting')}\n </Menu.Item>\n )}\n </Menu.Group>\n );\n};\n\nColumnMenuSortItems.displayName = 'ColumnMenu.SortItems';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqCA,MAAa,uBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,GAAG,SAAS;;CAGpC,MAAM,SAAS,YAAY,OAAO,MAAM,MAAM,eAC5C,OAAO,YAAY,CACrB;CAEA,IAAI,CAAC,OAAO,WAAW,GACrB,OAAO;CAGT,MAAM,mBAAmB,OAAO,MAAM,QAAQ,yBAAyB;CAEvE,MAAM,YAAY,QAChB,SAAS,QAAQ,2BAA2B;;CAG9C,MAAM,iBAAiB,QAAiB,UAA4B;EAClE,MAAM,UACJ,OAAO,gBAAgB,MACtB,OAAO,MAAM,QAAQ,mBAAmB,KAAK,KAAK;EAErD,OAAO,cAAc,QAAQ,OAAO;CACtC;CAEA,OACE,qBAAC,KAAK,OAAN;EACE,kBAAe;EACf,GAAI;EAFN,UAAA;GAIE,qBAAC,KAAK,MAAN;IAAW,UAAU,UAAU,cAAc,OAAO,KAAK;IAAzD,UAAA;KACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,aAAD,CAAc,CAAA,EAAI,CAAA;KAC/B,SAAS,SAAS;KAClB,WAAW,SAAS,oBAAC,iBAAD,CAAkB,CAAA;IAC9B;;GAEX,qBAAC,KAAK,MAAN;IAAW,UAAU,UAAU,cAAc,MAAM,KAAK;IAAxD,UAAA;KACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,eAAD,CAAgB,CAAA,EAAI,CAAA;KACjC,SAAS,UAAU;KACnB,WAAW,UAAU,oBAAC,iBAAD,CAAkB,CAAA;IAC/B;;GAEV,UAAU,oBACT,qBAAC,KAAK,MAAN;IAAW,eAAe,OAAO,aAAa;IAA9C,UAAA,CACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,OAAD,CAAQ,CAAA,EAAI,CAAA,GACzB,SAAS,cAAc,CACf;;EAEH;;AAEhB;AAEA,oBAAoB,cAAc"}
1	+ {"version":3,"file":"column-menu-sort-items.js","names":[],"sources":["../../../src/components/column-menu/column-menu-sort-items.tsx"],"sourcesContent":["import { Icon } from '@lucasbernardosn/react-ui/display/icon';\nimport { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { CaretDownIcon, CaretUpIcon, XIcon } from '@phosphor-icons/react';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport type { ColumnWith } from '../../types';\nimport { ColumnMenuCheck } from './column-menu-check';\nimport {\n COLUMN_MENU_DEFAULT_LABELS,\n type ColumnMenuLabels,\n} from './column-menu-labels';\n\nexport type ColumnMenuSortItemsProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n Menu.GroupProps,\n {\n /** A coluna. Exige `rowSortingFeature`. /\n column: ColumnWith<TFeatures, TData, 'rowSortingFeature'>;\n /* O texto dos itens; os que faltam ficam com o padrão. /\n labels?: Partial<ColumnMenuLabels>;\n }\n>;\n\n/\n Os itens da ordenação: crescente e decrescente, com um check na direção atual, e \"Remover\n * ordenação\" com a coluna ordenada. Com `enableSortingRemoval: false` na tabela, que deixa a\n * lista sempre ordenada, o \"Remover ordenação\" não aparece. O item troca a ordenação inteira por esta coluna; com Shift\n * (ou o `isMultiSortEvent` da tabela), soma a coluna à ordenação múltipla, como o\n * `DataTable.SortTrigger`.\n \n O check é só visual: a direção chega ao leitor de tela pelo `aria-sort` da\n * `DataTable.HeaderCell`. Numa coluna que não ordena, não renderiza.\n /\nexport const ColumnMenuSortItems = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: ColumnMenuSortItemsProps<TFeatures, TData>,\n) => {\n const { column, labels, ...rest } = props;\n\n /* Re-renderiza quando a direção desta coluna muda. /\n const sorted = useSelector(column.table.atoms.sorting, () =>\n column.getIsSorted(),\n );\n\n if (!column.getCanSort()) {\n return null;\n }\n\n const canRemoveSorting = column.table.options.enableSortingRemoval !== false;\n\n const getLabel = (key: keyof ColumnMenuLabels) =>\n labels?.[key] ?? COLUMN_MENU_DEFAULT_LABELS[key];\n\n /* O mesmo critério do clique no header para somar a coluna à ordenação múltipla. */\n const toggleSorting = (isDesc: boolean, event: React.MouseEvent) => {\n const isMulti =\n column.getCanMultiSort() &&\n (column.table.options.isMultiSortEvent?.(event) ?? false);\n\n column.toggleSorting(isDesc, isMulti);\n };\n\n return (\n <Menu.Group\n data-component=\"ColumnMenu.SortItems\"\n {...rest}\n >\n <Menu.Item onClick={(event) => toggleSorting(false, event)}>\n <Icon render={<CaretUpIcon />} />\n {getLabel('sortAsc')}\n {sorted === 'asc' && <ColumnMenuCheck />}\n </Menu.Item>\n\n <Menu.Item onClick={(event) => toggleSorting(true, event)}>\n <Icon render={<CaretDownIcon />} />\n {getLabel('sortDesc')}\n {sorted === 'desc' && <ColumnMenuCheck />}\n </Menu.Item>\n\n {sorted && canRemoveSorting && (\n <Menu.Item onClick={() => column.clearSorting()}>\n <Icon render={<XIcon />} />\n {getLabel('clearSorting')}\n </Menu.Item>\n )}\n </Menu.Group>\n );\n};\n\nColumnMenuSortItems.displayName = 'ColumnMenu.SortItems';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqCA,MAAa,uBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,GAAG,SAAS;;CAGpC,MAAM,SAAS,YAAY,OAAO,MAAM,MAAM,eAC5C,OAAO,YAAY,CACrB;CAEA,IAAI,CAAC,OAAO,WAAW,GACrB,OAAO;CAGT,MAAM,mBAAmB,OAAO,MAAM,QAAQ,yBAAyB;CAEvE,MAAM,YAAY,QAChB,SAAS,QAAQ,2BAA2B;;CAG9C,MAAM,iBAAiB,QAAiB,UAA4B;EAClE,MAAM,UACJ,OAAO,gBAAgB,MACtB,OAAO,MAAM,QAAQ,mBAAmB,KAAK,KAAK;EAErD,OAAO,cAAc,QAAQ,OAAO;CACtC;CAEA,OACE,qBAAC,KAAK,OAAN;EACE,kBAAe;EACf,GAAI;EAFN,UAAA;GAIE,qBAAC,KAAK,MAAN;IAAW,UAAU,UAAU,cAAc,OAAO,KAAK;IAAzD,UAAA;KACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,aAAD,CAAc,CAAA,EAAI,CAAA;KAC/B,SAAS,SAAS;KAClB,WAAW,SAAS,oBAAC,iBAAD,CAAkB,CAAA;IAC9B;;GAEX,qBAAC,KAAK,MAAN;IAAW,UAAU,UAAU,cAAc,MAAM,KAAK;IAAxD,UAAA;KACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,eAAD,CAAgB,CAAA,EAAI,CAAA;KACjC,SAAS,UAAU;KACnB,WAAW,UAAU,oBAAC,iBAAD,CAAkB,CAAA;IAC/B;;GAEV,UAAU,oBACT,qBAAC,KAAK,MAAN;IAAW,eAAe,OAAO,aAAa;IAA9C,UAAA,CACE,oBAAC,MAAD,EAAM,QAAQ,oBAAC,OAAD,CAAQ,CAAA,EAAI,CAAA,GACzB,SAAS,cAAc,CACf;;EAEH;;AAEhB;AAEA,oBAAoB,cAAc"}

package/dist/components/column-menu/column-menu-trigger.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Header, RowData, TableFeatures } from "@tanstack/react-table";
 import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/column-menu/column-menu-trigger.d.ts
 export type ColumnMenuTriggerProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Menu.TriggerProps, {
   /** O header da coluna. */

package/dist/components/column-menu/column-menu-trigger.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"column-menu-trigger.js","names":[],"sources":["../../../src/components/column-menu/column-menu-trigger.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react';\nimport { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport { mergeStateClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { Header, RowData, TableFeatures } from '@tanstack/react-table';\nimport { hasHeaderFeature } from '../../utils';\nimport { DataTableHeaderButton } from '../data-table/header/data-table-header-button';\n\nexport type ColumnMenuTriggerProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n Menu.TriggerProps,\n {\n /** O header da coluna. /\n header: Header<TFeatures, TData>;\n }\n>;\n\n/\n O botão que abre o menu da coluna: o `DataTable.HeaderButton`, do tamanho da célula do header,\n * com o `Menu.Trigger`. Os filhos são o que ele mostra, em geral o `DataTable.HeaderContent` e o\n * `DataTable.SortIndicator`.\n \n Com `rowSortingFeature`, marca a direção em `data-sorted` e, numa coluna `align: 'end'`,\n * inverte a ordem dos filhos, como o `DataTable.SortTrigger`. Enquanto o menu está aberto, o\n * fundo fica no do hover.\n /\nexport const ColumnMenuTrigger = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: ColumnMenuTriggerProps<TFeatures, TData>,\n) => {\n const { header, className, ...rest } = props;\n\n /\n Re-renderiza quando a direção desta coluna muda. A ordenação é opcional, então assina o\n * store.\n */\n const sorted = useSelector(header.column.table.store, () =>\n hasHeaderFeature(header, 'rowSortingFeature')\n ? header.column.getIsSorted()\n : false,\n );\n\n const baseProps = {\n 'data-component': 'ColumnMenu.Trigger',\n 'data-sorted': sorted \|\| undefined,\n className: mergeStateClassNames(\n [\n // Os mesmos do `DataTable.SortTrigger`, onde estão explicados.\n 'in-data-[align=end]:flex-row-reverse',\n 'data-sorted:text-gray-12',\n\n 'data-popup-open:bg-gray-3',\n ],\n className,\n ),\n };\n\n return (\n <Menu.Trigger\n render={<DataTableHeaderButton />}\n {...mergeProps(baseProps, rest)}\n />\n );\n};\n\nColumnMenuTrigger.displayName = 'ColumnMenu.Trigger';\n"],"mappings":";;;;;;;;;;;;;;;;;AA6BA,MAAa,qBAIX,UACG;CACH,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAYvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,eARa,YAAY,OAAO,OAAO,MAAM,aAC7C,iBAAiB,QAAQ,mBAAmB,IACxC,OAAO,OAAO,YAAY,IAC1B,KAKgB,KAAK,KAAA;EACzB,WAAW,qBACT;GAEE;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OACE,oBAAC,KAAK,SAAN;EACE,QAAQ,oBAAC,uBAAD,CAAwB,CAAA;EAChC,GAAI,WAAW,WAAW,IAAI;CAC/B,CAAA;AAEL;AAEA,kBAAkB,cAAc"}
1	+ {"version":3,"file":"column-menu-trigger.js","names":[],"sources":["../../../src/components/column-menu/column-menu-trigger.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react';\nimport { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport { mergeStateClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { Header, RowData, TableFeatures } from '@tanstack/react-table';\nimport { hasHeaderFeature } from '../../utils';\nimport { DataTableHeaderButton } from '../data-table/header/data-table-header-button';\n\nexport type ColumnMenuTriggerProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n Menu.TriggerProps,\n {\n /** O header da coluna. /\n header: Header<TFeatures, TData>;\n }\n>;\n\n/\n O botão que abre o menu da coluna: o `DataTable.HeaderButton`, do tamanho da célula do header,\n * com o `Menu.Trigger`. Os filhos são o que ele mostra, em geral o `DataTable.HeaderContent` e o\n * `DataTable.SortIndicator`.\n \n Com `rowSortingFeature`, marca a direção em `data-sorted` e, numa coluna `align: 'end'`,\n * inverte a ordem dos filhos, como o `DataTable.SortTrigger`. Enquanto o menu está aberto, o\n * fundo fica no do hover.\n /\nexport const ColumnMenuTrigger = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: ColumnMenuTriggerProps<TFeatures, TData>,\n) => {\n const { header, className, ...rest } = props;\n\n /\n Re-renderiza quando a direção desta coluna muda. A ordenação é opcional, então assina o\n * store.\n */\n const sorted = useSelector(header.column.table.store, () =>\n hasHeaderFeature(header, 'rowSortingFeature')\n ? header.column.getIsSorted()\n : false,\n );\n\n const baseProps = {\n 'data-component': 'ColumnMenu.Trigger',\n 'data-sorted': sorted \|\| undefined,\n className: mergeStateClassNames(\n [\n // Os mesmos do `DataTable.SortTrigger`, onde estão explicados.\n 'in-data-[align=end]:flex-row-reverse',\n 'data-sorted:text-gray-12',\n\n 'data-popup-open:bg-gray-3',\n ],\n className,\n ),\n };\n\n return (\n <Menu.Trigger\n render={<DataTableHeaderButton />}\n {...mergeProps(baseProps, rest)}\n />\n );\n};\n\nColumnMenuTrigger.displayName = 'ColumnMenu.Trigger';\n"],"mappings":";;;;;;;;;;;;;;;;;AA6BA,MAAa,qBAIX,UACG;CACH,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAYvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,eARa,YAAY,OAAO,OAAO,MAAM,aAC7C,iBAAiB,QAAQ,mBAAmB,IACxC,OAAO,OAAO,YAAY,IAC1B,KAKgB,KAAK,KAAA;EACzB,WAAW,qBACT;GAEE;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OACE,oBAAC,KAAK,SAAN;EACE,QAAQ,oBAAC,uBAAD,CAAwB,CAAA;EAChC,GAAI,WAAW,WAAW,IAAI;CAC/B,CAAA;AAEL;AAEA,kBAAkB,cAAc"}

package/dist/components/columns-panel/columns-panel-item.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { ColumnWith } 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/columns-panel/columns-panel-item.d.ts
 export type ColumnsPanelItemProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'li'>, {
   /** A coluna. Exige `columnVisibilityFeature`. */

package/dist/components/columns-panel/columns-panel-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"columns-panel-item.js","names":[],"sources":["../../../src/components/columns-panel/columns-panel-item.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { useSortable } from '@dnd-kit/react/sortable';\nimport { IconButton } from '@lucasbernardosn/react-ui/buttons/icon-button';\nimport { Checkbox } from '@lucasbernardosn/react-ui/fields/checkbox';\nimport { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { ListIcon, PushPinIcon } from '@phosphor-icons/react';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { ColumnWith } from '../../types';\nimport { getDefaultColumnLabel, hasColumnFeature } from '../../utils';\nimport { ColumnMenuPinItems } from '../column-menu/column-menu-pin-items';\n\nexport type ColumnsPanelItemProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n useRender.ComponentProps<'li'>,\n {\n /** A coluna. Exige `columnVisibilityFeature`. /\n column: ColumnWith<TFeatures, TData, 'columnVisibilityFeature'>;\n /* A posição da coluna no grupo dela (fixadas no início, centro ou fixadas no fim). /\n index: number;\n /\n O nome da coluna.\n * @default getDefaultColumnLabel(column): o `header` quando é texto, e o id quando não é\n /\n label?: string;\n }\n>;\n\n/\n Uma coluna no `ColumnsPanel.Root`: o checkbox de visibilidade, o nome e, à direita, a alça de\n * arrastar. Só a alça pega o arrasto; o resto fica livre para o clique no checkbox. Uma coluna com\n * `enableHiding: false` fica com o checkbox desabilitado.\n \n Com `columnPinningFeature`, um alfinete antes da alça abre o menu da fixação, com os itens do\n * `ColumnMenu.PinItems`: fixa e solta a coluna sem o header, como nos cards ou numa coluna sem o\n * menu da coluna. Preenchido, a coluna está fixada. A fixada não tem alça e não se arrasta: o\n * `columnOrder` só ordena as colunas do centro, e as fixadas ficam nas pontas. Numa coluna com\n * `enablePinning: false`, o alfinete não aparece.\n /\nexport const ColumnsPanelItem = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: ColumnsPanelItemProps<TFeatures, TData>,\n) => {\n const { column, index, label, render, className, ref, ...rest } = props;\n\n /* Re-renderiza quando esta coluna aparece ou some. /\n const isVisible = useSelector(column.table.atoms.columnVisibility, () =>\n column.getIsVisible(),\n );\n\n /\n Re-renderiza quando esta coluna é fixada ou solta. O pinning é opcional, então assina o\n * store.\n /\n const pinned = useSelector(column.table.store, () =>\n hasColumnFeature(column, 'columnPinningFeature')\n ? column.getIsPinned()\n : false,\n );\n\n const columnLabel = label ?? getDefaultColumnLabel(column);\n\n /* O grupo separa as regiões: o arrasto não leva uma coluna do centro para as fixadas. */\n const sortable = useSortable({\n id: column.id,\n index,\n group: pinned \|\| 'center',\n disabled: pinned !== false,\n });\n\n const baseProps = {\n 'data-component': 'ColumnsPanel.Item',\n 'data-dragging': sortable.isDragging ? '' : undefined,\n 'data-pinned': pinned \|\| undefined,\n className: mergeTwClassNames(\n [\n 'flex',\n 'h-8',\n 'items-center',\n 'gap-2',\n\n 'rounded-md',\n 'corner-squircle',\n 'ps-2',\n 'pe-1',\n\n 'text-sm',\n\n // Em arrasto, destacada sobre as outras.\n 'data-dragging:bg-gray-3',\n 'data-dragging:shadow-md',\n ],\n className,\n ),\n children: (\n <>\n <label className=\"flex min-w-0 flex-1 items-center gap-2 select-none\">\n <Checkbox.Root\n checked={isVisible}\n disabled={!column.getCanHide()}\n onCheckedChange={(checked) => column.toggleVisibility(checked)}\n >\n <Checkbox.Indicator />\n </Checkbox.Root>\n\n <span className={isVisible ? 'truncate' : 'truncate text-gray-11'}>\n {columnLabel}\n </span>\n </label>\n\n {hasColumnFeature(column, 'columnPinningFeature') &&\n column.getCanPin() && (\n <Menu.Root>\n <Menu.Trigger\n render={\n <IconButton\n variant=\"ghost\"\n size=\"2xs\"\n icon={<PushPinIcon weight={pinned ? 'fill' : 'regular'} />}\n aria-label={`Fixação da coluna ${columnLabel}`}\n className={pinned ? 'text-gray-12' : 'text-gray-11'}\n />\n }\n />\n\n <Menu.Portal>\n <Menu.Positioner align=\"end\">\n <Menu.Popup className=\"min-w-48\">\n <ColumnMenuPinItems column={column} />\n </Menu.Popup>\n </Menu.Positioner>\n </Menu.Portal>\n </Menu.Root>\n )}\n\n {pinned === false ? (\n <IconButton\n ref={sortable.handleRef}\n variant=\"ghost\"\n size=\"2xs\"\n icon={<ListIcon />}\n aria-label={`Mover a coluna ${columnLabel}`}\n // `touch-none`: no toque, o gesto arrasta em vez de rolar.\n className=\"cursor-grab touch-none text-gray-11 active:cursor-grabbing\"\n />\n ) : (\n // A fixada não se arrasta: o espaço da alça fica vazio, para o alfinete ficar alinhado\n // com o das outras.\n <span\n aria-hidden=\"true\"\n className=\"inline-flex size-6 shrink-0\"\n />\n )}\n </>\n ),\n };\n\n return useRender({\n render,\n ref: [sortable.ref, ref ?? null],\n defaultTagName: 'li',\n props: mergeProps(baseProps, rest),\n });\n};\n\nColumnsPanelItem.displayName = 'ColumnsPanel.Item';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,oBAIX,UACG;CACH,MAAM,EAAE,QAAQ,OAAO,OAAO,QAAQ,WAAW,KAAK,GAAG,SAAS;;CAGlE,MAAM,YAAY,YAAY,OAAO,MAAM,MAAM,wBAC/C,OAAO,aAAa,CACtB;;;;;CAMA,MAAM,SAAS,YAAY,OAAO,MAAM,aACtC,iBAAiB,QAAQ,sBAAsB,IAC3C,OAAO,YAAY,IACnB,KACN;CAEA,MAAM,cAAc,SAAS,sBAAsB,MAAM;;CAGzD,MAAM,WAAW,YAAY;EAC3B,IAAI,OAAO;EACX;EACA,OAAO,UAAU;EACjB,UAAU,WAAW;CACvB,CAAC;CAED,MAAM,YAAY;EAChB,kBAAkB;EAClB,iBAAiB,SAAS,aAAa,KAAK,KAAA;EAC5C,eAAe,UAAU,KAAA;EACzB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;GAEA;GAGA;GACA;EACF,GACA,SACF;EACA,UACE,qBAAA,UAAA,EAAA,UAAA;GACE,qBAAC,SAAD;IAAO,WAAU;IAAjB,UAAA,CACE,oBAAC,SAAS,MAAV;KACE,SAAS;KACT,UAAU,CAAC,OAAO,WAAW;KAC7B,kBAAkB,YAAY,OAAO,iBAAiB,OAAO;KAE7D,UAAA,oBAAC,SAAS,WAAV,CAAqB,CAAA;IACR,CAAA,GAEf,oBAAC,QAAD;KAAM,WAAW,YAAY,aAAa;KACvC,UAAA;IACG,CAAA,CACD;;GAEN,iBAAiB,QAAQ,sBAAsB,KAC9C,OAAO,UAAU,KACf,qBAAC,KAAK,MAAN,EAAA,UAAA,CACE,oBAAC,KAAK,SAAN,EACE,QACE,oBAAC,YAAD;IACE,SAAQ;IACR,MAAK;IACL,MAAM,oBAAC,aAAD,EAAa,QAAQ,SAAS,SAAS,UAAY,CAAA;IACzD,cAAY,qBAAqB;IACjC,WAAW,SAAS,iBAAiB;GACtC,CAAA,EAEJ,CAAA,GAED,oBAAC,KAAK,QAAN,EAAA,UACE,oBAAC,KAAK,YAAN;IAAiB,OAAM;IACrB,UAAA,oBAAC,KAAK,OAAN;KAAY,WAAU;KACpB,UAAA,oBAAC,oBAAD,EAA4B,OAAS,CAAA;IAC3B,CAAA;GACG,CAAA,EACN,CAAA,CACJ,EAAA,CAAA;GAGd,WAAW,QACV,oBAAC,YAAD;IACE,KAAK,SAAS;IACd,SAAQ;IACR,MAAK;IACL,MAAM,oBAAC,UAAD,CAAW,CAAA;IACjB,cAAY,kBAAkB;IAE9B,WAAU;GACX,CAAA,IAID,oBAAC,QAAD;IACE,eAAY;IACZ,WAAU;GACX,CAAA;EAEH,EAAA,CAAA;CAEN;CAEA,OAAO,UAAU;EACf;EACA,KAAK,CAAC,SAAS,KAAK,OAAO,IAAI;EAC/B,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,iBAAiB,cAAc"}
1	+ {"version":3,"file":"columns-panel-item.js","names":[],"sources":["../../../src/components/columns-panel/columns-panel-item.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { useSortable } from '@dnd-kit/react/sortable';\nimport { IconButton } from '@lucasbernardosn/react-ui/buttons/icon-button';\nimport { Checkbox } from '@lucasbernardosn/react-ui/fields/checkbox';\nimport { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { ListIcon, PushPinIcon } from '@phosphor-icons/react';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, TableFeatures } from '@tanstack/react-table';\nimport type { ColumnWith } from '../../types';\nimport { getDefaultColumnLabel, hasColumnFeature } from '../../utils';\nimport { ColumnMenuPinItems } from '../column-menu/column-menu-pin-items';\n\nexport type ColumnsPanelItemProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n useRender.ComponentProps<'li'>,\n {\n /** A coluna. Exige `columnVisibilityFeature`. /\n column: ColumnWith<TFeatures, TData, 'columnVisibilityFeature'>;\n /* A posição da coluna no grupo dela (fixadas no início, centro ou fixadas no fim). /\n index: number;\n /\n O nome da coluna.\n * @default getDefaultColumnLabel(column): o `header` quando é texto, e o id quando não é\n /\n label?: string;\n }\n>;\n\n/\n Uma coluna no `ColumnsPanel.Root`: o checkbox de visibilidade, o nome e, à direita, a alça de\n * arrastar. Só a alça pega o arrasto; o resto fica livre para o clique no checkbox. Uma coluna com\n * `enableHiding: false` fica com o checkbox desabilitado.\n \n Com `columnPinningFeature`, um alfinete antes da alça abre o menu da fixação, com os itens do\n * `ColumnMenu.PinItems`: fixa e solta a coluna sem o header, como nos cards ou numa coluna sem o\n * menu da coluna. Preenchido, a coluna está fixada. A fixada não tem alça e não se arrasta: o\n * `columnOrder` só ordena as colunas do centro, e as fixadas ficam nas pontas. Numa coluna com\n * `enablePinning: false`, o alfinete não aparece.\n /\nexport const ColumnsPanelItem = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: ColumnsPanelItemProps<TFeatures, TData>,\n) => {\n const { column, index, label, render, className, ref, ...rest } = props;\n\n /* Re-renderiza quando esta coluna aparece ou some. /\n const isVisible = useSelector(column.table.atoms.columnVisibility, () =>\n column.getIsVisible(),\n );\n\n /\n Re-renderiza quando esta coluna é fixada ou solta. O pinning é opcional, então assina o\n * store.\n /\n const pinned = useSelector(column.table.store, () =>\n hasColumnFeature(column, 'columnPinningFeature')\n ? column.getIsPinned()\n : false,\n );\n\n const columnLabel = label ?? getDefaultColumnLabel(column);\n\n /* O grupo separa as regiões: o arrasto não leva uma coluna do centro para as fixadas. */\n const sortable = useSortable({\n id: column.id,\n index,\n group: pinned \|\| 'center',\n disabled: pinned !== false,\n });\n\n const baseProps = {\n 'data-component': 'ColumnsPanel.Item',\n 'data-dragging': sortable.isDragging ? '' : undefined,\n 'data-pinned': pinned \|\| undefined,\n className: mergeTwClassNames(\n [\n 'flex',\n 'h-8',\n 'items-center',\n 'gap-2',\n\n 'rounded-md',\n 'corner-squircle',\n 'ps-2',\n 'pe-1',\n\n 'text-sm',\n\n // Em arrasto, destacada sobre as outras.\n 'data-dragging:bg-gray-3',\n 'data-dragging:shadow-md',\n ],\n className,\n ),\n children: (\n <>\n <label className=\"flex min-w-0 flex-1 items-center gap-2 select-none\">\n <Checkbox.Root\n checked={isVisible}\n disabled={!column.getCanHide()}\n onCheckedChange={(checked) => column.toggleVisibility(checked)}\n >\n <Checkbox.Indicator />\n </Checkbox.Root>\n\n <span className={isVisible ? 'truncate' : 'truncate text-gray-11'}>\n {columnLabel}\n </span>\n </label>\n\n {hasColumnFeature(column, 'columnPinningFeature') &&\n column.getCanPin() && (\n <Menu.Root>\n <Menu.Trigger\n render={\n <IconButton\n variant=\"ghost\"\n size=\"2xs\"\n icon={<PushPinIcon weight={pinned ? 'fill' : 'regular'} />}\n aria-label={`Fixação da coluna ${columnLabel}`}\n className={pinned ? 'text-gray-12' : 'text-gray-11'}\n />\n }\n />\n\n <Menu.Portal>\n <Menu.Positioner align=\"end\">\n <Menu.Popup className=\"min-w-48\">\n <ColumnMenuPinItems column={column} />\n </Menu.Popup>\n </Menu.Positioner>\n </Menu.Portal>\n </Menu.Root>\n )}\n\n {pinned === false ? (\n <IconButton\n ref={sortable.handleRef}\n variant=\"ghost\"\n size=\"2xs\"\n icon={<ListIcon />}\n aria-label={`Mover a coluna ${columnLabel}`}\n // `touch-none`: no toque, o gesto arrasta em vez de rolar.\n className=\"cursor-grab touch-none text-gray-11 active:cursor-grabbing\"\n />\n ) : (\n // A fixada não se arrasta: o espaço da alça fica vazio, para o alfinete ficar alinhado\n // com o das outras.\n <span\n aria-hidden=\"true\"\n className=\"inline-flex size-6 shrink-0\"\n />\n )}\n </>\n ),\n };\n\n return useRender({\n render,\n ref: [sortable.ref, ref ?? null],\n defaultTagName: 'li',\n props: mergeProps(baseProps, rest),\n });\n};\n\nColumnsPanelItem.displayName = 'ColumnsPanel.Item';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,oBAIX,UACG;CACH,MAAM,EAAE,QAAQ,OAAO,OAAO,QAAQ,WAAW,KAAK,GAAG,SAAS;;CAGlE,MAAM,YAAY,YAAY,OAAO,MAAM,MAAM,wBAC/C,OAAO,aAAa,CACtB;;;;;CAMA,MAAM,SAAS,YAAY,OAAO,MAAM,aACtC,iBAAiB,QAAQ,sBAAsB,IAC3C,OAAO,YAAY,IACnB,KACN;CAEA,MAAM,cAAc,SAAS,sBAAsB,MAAM;;CAGzD,MAAM,WAAW,YAAY;EAC3B,IAAI,OAAO;EACX;EACA,OAAO,UAAU;EACjB,UAAU,WAAW;CACvB,CAAC;CAED,MAAM,YAAY;EAChB,kBAAkB;EAClB,iBAAiB,SAAS,aAAa,KAAK,KAAA;EAC5C,eAAe,UAAU,KAAA;EACzB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;GAEA;GAGA;GACA;EACF,GACA,SACF;EACA,UACE,qBAAA,UAAA,EAAA,UAAA;GACE,qBAAC,SAAD;IAAO,WAAU;IAAjB,UAAA,CACE,oBAAC,SAAS,MAAV;KACE,SAAS;KACT,UAAU,CAAC,OAAO,WAAW;KAC7B,kBAAkB,YAAY,OAAO,iBAAiB,OAAO;KAE7D,UAAA,oBAAC,SAAS,WAAV,CAAqB,CAAA;IACR,CAAA,GAEf,oBAAC,QAAD;KAAM,WAAW,YAAY,aAAa;KACvC,UAAA;IACG,CAAA,CACD;;GAEN,iBAAiB,QAAQ,sBAAsB,KAC9C,OAAO,UAAU,KACf,qBAAC,KAAK,MAAN,EAAA,UAAA,CACE,oBAAC,KAAK,SAAN,EACE,QACE,oBAAC,YAAD;IACE,SAAQ;IACR,MAAK;IACL,MAAM,oBAAC,aAAD,EAAa,QAAQ,SAAS,SAAS,UAAY,CAAA;IACzD,cAAY,qBAAqB;IACjC,WAAW,SAAS,iBAAiB;GACtC,CAAA,EAEJ,CAAA,GAED,oBAAC,KAAK,QAAN,EAAA,UACE,oBAAC,KAAK,YAAN;IAAiB,OAAM;IACrB,UAAA,oBAAC,KAAK,OAAN;KAAY,WAAU;KACpB,UAAA,oBAAC,oBAAD,EAA4B,OAAS,CAAA;IAC3B,CAAA;GACG,CAAA,EACN,CAAA,CACJ,EAAA,CAAA;GAGd,WAAW,QACV,oBAAC,YAAD;IACE,KAAK,SAAS;IACd,SAAQ;IACR,MAAK;IACL,MAAM,oBAAC,UAAD,CAAW,CAAA;IACjB,cAAY,kBAAkB;IAE9B,WAAU;GACX,CAAA,IAID,oBAAC,QAAD;IACE,eAAY;IACZ,WAAU;GACX,CAAA;EAEH,EAAA,CAAA;CAEN;CAEA,OAAO,UAAU;EACf;EACA,KAAK,CAAC,SAAS,KAAK,OAAO,IAAI;EAC/B,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,iBAAiB,cAAc"}

package/dist/components/columns-panel/columns-panel-root.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import "../../types/index.js";
 import { Column, 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/columns-panel/columns-panel-root.d.ts
 export type ColumnsPanelRootProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'div'>, {
   /** A tabela. Exige `columnOrderingFeature` e `columnVisibilityFeature`. */

package/dist/components/columns-panel/columns-panel-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"columns-panel-root.js","names":["Fragment"],"sources":["../../../src/components/columns-panel/columns-panel-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { RestrictToVerticalAxis } from '@dnd-kit/abstract/modifiers';\nimport { RestrictToElement } from '@dnd-kit/dom/modifiers';\nimport { DragDropProvider } from '@dnd-kit/react';\nimport { isSortable } from '@dnd-kit/react/sortable';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { shallow, useSelector } from '@tanstack/react-store';\nimport type { Column, RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport { Fragment, useMemo, useRef } from 'react';\nimport type { TableWith } from '../../types';\nimport { hasColumnFeature, hasTableFeature } from '../../utils';\nimport { ColumnsPanelItem } from './columns-panel-item';\nimport { getColumnsPanelColumnOrder } from './get-columns-panel-column-order';\n\nexport type ColumnsPanelRootProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n useRender.ComponentProps<'div'>,\n {\n /** A tabela. Exige `columnOrderingFeature` e `columnVisibilityFeature`. /\n table: TableWith<\n TFeatures,\n TData,\n 'columnOrderingFeature' \| 'columnVisibilityFeature'\n >;\n /\n Uma função que recebe cada coluna e a posição dela no grupo e devolve o item. Repasse a\n * posição ao `ColumnsPanel.Item`, que a usa no arrasto. Com nós comuns, quem usa faz o laço.\n * @default (column, index) => <ColumnsPanel.Item column={column} index={index} />\n /\n children?:\n \| React.ReactNode\n \| ((column: Column<TFeatures, TData>, index: number) => React.ReactNode);\n }\n>;\n\n/* Evento de fim de arrasto, como o `DragDropProvider` o entrega. /\ntype DragEndEvent = Parameters<\n NonNullable<React.ComponentProps<typeof DragDropProvider>['onDragEnd']>\n>[0];\n\n/* O nome de cada lista, na ordem das regiões: fixadas no início, centro e fixadas no fim. /\nconst GROUP_LABELS = [\n 'Colunas fixadas no início',\n 'Colunas',\n 'Colunas fixadas no fim',\n];\n\n/\n A linha entre as listas, só visual (o alfinete já diz quais são fixadas), fica nas das fixadas,\n * do lado do centro, com o respiro. A lista do centro termina no primeiro e no último item: o\n * arrasto fica preso a ela, e com o respiro dentro dela, o item arrastado cobriria a linha.\n /\nconst GROUP_CLASS_NAMES = [\n 'mb-1 border-gray-6 border-b pb-1',\n undefined,\n 'mt-1 border-gray-6 border-t pt-1',\n];\n\n/* As pontas sem fixadas: a mesma referência, para a tupla não mudar à toa. /\nconst NO_COLUMNS: never[] = [];\n\n/* Se a coluna é de dados, e não de exibição (sem `accessorFn`, como a de seleção). /\nconst isDataColumn = <TFeatures extends TableFeatures, TData extends RowData>(\n column: Column<TFeatures, TData>,\n) => column.accessorFn !== undefined;\n\n/\n A lista das colunas da tabela: marca quais aparecem e arrasta para mudar a ordem. Para um\n * popover ou uma gaveta; a posição, o gatilho e o \"restaurar\" (`table.resetColumnOrder()`,\n * `table.resetColumnVisibility()`) são do app.\n \n Lista as colunas de dados. As de exibição (sem `accessorFn`, como a de seleção e a de ações)\n * ficam fora e no lugar: reordenar só troca as outras entre si. Com `columnPinningFeature`, a\n * tela vira até três listas (fixadas no início, centro e fixadas no fim), e só a do centro se\n * arrasta.\n \n O arrasto é pela alça, com o ponteiro ou o teclado (Espaço pega, setas movem, Espaço solta, Esc\n * cancela), e fica preso à lista do centro: não passa por cima das fixadas. O `Root` assina a\n * ordem e o pinning, e cada `ColumnsPanel.Item`, a visibilidade da coluna dele: funciona com o\n * dono da tabela em `() => null`.\n \n @example\n * ```tsx\n * <ColumnsPanel.Root table={table}>\n * {(column, index) => (\n * <ColumnsPanel.Item\n * column={column}\n * index={index}\n * label={labels[column.id]}\n * />\n * )}\n * </ColumnsPanel.Root>\n * ```\n /\nexport const ColumnsPanelRoot = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: ColumnsPanelRootProps<TFeatures, TData>,\n) => {\n const { table, render, className, children, ref, ...rest } = props;\n\n /* A lista do centro, a única que se arrasta: o arrasto fica preso a ela. /\n const centerListRef = useRef<HTMLUListElement>(null);\n\n /\n As colunas das três regiões, que o TanStack memoiza, numa tupla: o `shallow` compara item a\n * item, e só re-renderiza quando a ordem ou o pinning mudam. Já na ordem final: o\n * `columnOrder` vale dentro de cada região.\n /\n const regions = useSelector(\n table.store,\n () =>\n hasTableFeature(table, 'columnPinningFeature')\n ? [\n table.getStartLeafColumns(),\n table.getCenterLeafColumns(),\n table.getEndLeafColumns(),\n ]\n : [NO_COLUMNS, table.getAllLeafColumns(), NO_COLUMNS],\n { compare: shallow },\n );\n\n const groups = regions.map((columns) => columns.filter(isDataColumn));\n\n /* Preso à lista do centro, e só na vertical: fora dela não há destino. /\n const modifiers = useMemo(\n () => [\n RestrictToVerticalAxis,\n RestrictToElement.configure({ element: () => centerListRef.current }),\n ],\n [],\n );\n\n const handleDragEnd = (event: DragEndEvent) => {\n if (event.canceled) {\n /* O Esc que cancela o arrasto pelo teclado não segue adiante: fecharia o popover em volta. /\n if (\n event.nativeEvent instanceof KeyboardEvent &&\n event.nativeEvent.key === 'Escape'\n ) {\n event.nativeEvent.stopPropagation();\n }\n\n return;\n }\n\n const { source } = event.operation;\n\n /\n A posição final vem do item arrastado, e não do destino: durante o arrasto, a lista já se\n * reordena com o destino mais próximo, e soltar em cima de uma fixada, que não aceita nada,\n * chega sem destino. Sem isso, a lista ficaria na ordem nova e a tabela, na antiga.\n /\n if (!isSortable(source) \|\| source.initialIndex === source.index) {\n return;\n }\n\n table.setColumnOrder(\n getColumnsPanelColumnOrder(\n table.getAllLeafColumns().map((column) => column.id),\n (groups[1] ?? []).map((column) => column.id),\n source.initialIndex,\n source.index,\n ),\n );\n };\n\n /\n Com render-prop ou sem `children`, o laço é daqui, uma lista por grupo com colunas; com nós\n * comuns, de quem usa.\n */\n const content =\n typeof children === 'function' \|\| children === undefined\n ? groups.map(\n (columns, groupIndex) =>\n columns.length > 0 && (\n <ul\n key={groupIndex}\n ref={groupIndex === 1 ? centerListRef : undefined}\n aria-label={GROUP_LABELS[groupIndex]}\n className={mergeTwClassNames([\n 'flex',\n 'flex-col',\n 'gap-0.5',\n GROUP_CLASS_NAMES[groupIndex],\n ])}\n >\n {columns.map((column, index) => (\n <Fragment key={column.id}>\n {children === undefined\n ? hasColumnFeature(column, 'columnVisibilityFeature') && (\n <ColumnsPanelItem\n column={column}\n index={index}\n />\n )\n : children(column, index)}\n </Fragment>\n ))}\n </ul>\n ),\n )\n : children;\n\n const element = useRender({\n render,\n ref,\n defaultTagName: 'div',\n props: mergeProps(\n {\n 'data-component': 'ColumnsPanel.Root',\n className: mergeTwClassNames(['flex', 'w-56', 'flex-col'], className),\n children: content,\n },\n rest,\n ),\n });\n\n return (\n <DragDropProvider\n modifiers={modifiers}\n onDragEnd={handleDragEnd}\n >\n {element}\n </DragDropProvider>\n );\n};\n\nColumnsPanelRoot.displayName = 'ColumnsPanel.Root';\n"],"mappings":";;;;;;;;;;;;;;AA6CA,MAAM,eAAe;CACnB;CACA;CACA;AACF;;;;;;AAOA,MAAM,oBAAoB;CACxB;CACA,KAAA;CACA;AACF;;AAGA,MAAM,aAAsB,CAAC;;AAG7B,MAAM,gBACJ,WACG,OAAO,eAAe,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8B3B,MAAa,oBAIX,UACG;CACH,MAAM,EAAE,OAAO,QAAQ,WAAW,UAAU,KAAK,GAAG,SAAS;;CAG7D,MAAM,gBAAgB,OAAyB,IAAI;CAoBnD,MAAM,SAbU,YACd,MAAM,aAEJ,gBAAgB,OAAO,sBAAsB,IACzC;EACE,MAAM,oBAAoB;EAC1B,MAAM,qBAAqB;EAC3B,MAAM,kBAAkB;CAC1B,IACA;EAAC;EAAY,MAAM,kBAAkB;EAAG;CAAU,GACxD,EAAE,SAAS,QAAQ,CAGA,CAAC,CAAC,KAAK,YAAY,QAAQ,OAAO,YAAY,CAAC;;CAGpE,MAAM,YAAY,cACV,CACJ,wBACA,kBAAkB,UAAU,EAAE,eAAe,cAAc,QAAQ,CAAC,CACtE,GACA,CAAC,CACH;CAEA,MAAM,iBAAiB,UAAwB;EAC7C,IAAI,MAAM,UAAU;;GAElB,IACE,MAAM,uBAAuB,iBAC7B,MAAM,YAAY,QAAQ,UAE1B,MAAM,YAAY,gBAAgB;GAGpC;EACF;EAEA,MAAM,EAAE,WAAW,MAAM;;;;;;EAOzB,IAAI,CAAC,WAAW,MAAM,KAAK,OAAO,iBAAiB,OAAO,OACxD;EAGF,MAAM,eACJ,2BACE,MAAM,kBAAkB,CAAC,CAAC,KAAK,WAAW,OAAO,EAAE,IAClD,OAAO,MAAM,CAAC,EAAA,CAAG,KAAK,WAAW,OAAO,EAAE,GAC3C,OAAO,cACP,OAAO,KACT,CACF;CACF;;;;;CAMA,MAAM,UACJ,OAAO,aAAa,cAAc,aAAa,KAAA,IAC3C,OAAO,KACJ,SAAS,eACR,QAAQ,SAAS,KACf,oBAAC,MAAD;EAEE,KAAK,eAAe,IAAI,gBAAgB,KAAA;EACxC,cAAY,aAAa;EACzB,WAAW,kBAAkB;GAC3B;GACA;GACA;GACA,kBAAkB;EACpB,CAAC;EAEA,UAAA,QAAQ,KAAK,QAAQ,UACpB,oBAACA,YAAD,EAAA,UACG,aAAa,KAAA,IACV,iBAAiB,QAAQ,yBAAyB,KAChD,oBAAC,kBAAD;GACU;GACD;EACR,CAAA,IAEH,SAAS,QAAQ,KAAK,EAClB,GATK,OAAO,EASZ,CACX;CACC,GAtBG,UAsBH,CAEV,IACA;CAEN,MAAM,UAAU,UAAU;EACxB;EACA;EACA,gBAAgB;EAChB,OAAO,WACL;GACE,kBAAkB;GAClB,WAAW,kBAAkB;IAAC;IAAQ;IAAQ;GAAU,GAAG,SAAS;GACpE,UAAU;EACZ,GACA,IACF;CACF,CAAC;CAED,OACE,oBAAC,kBAAD;EACa;EACX,WAAW;EAEV,UAAA;CACe,CAAA;AAEtB;AAEA,iBAAiB,cAAc"}
1	+ {"version":3,"file":"columns-panel-root.js","names":["Fragment"],"sources":["../../../src/components/columns-panel/columns-panel-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { RestrictToVerticalAxis } from '@dnd-kit/abstract/modifiers';\nimport { RestrictToElement } from '@dnd-kit/dom/modifiers';\nimport { DragDropProvider } from '@dnd-kit/react';\nimport { isSortable } from '@dnd-kit/react/sortable';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { shallow, useSelector } from '@tanstack/react-store';\nimport type { Column, RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport { Fragment, useMemo, useRef } from 'react';\nimport type { TableWith } from '../../types';\nimport { hasColumnFeature, hasTableFeature } from '../../utils';\nimport { ColumnsPanelItem } from './columns-panel-item';\nimport { getColumnsPanelColumnOrder } from './get-columns-panel-column-order';\n\nexport type ColumnsPanelRootProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n useRender.ComponentProps<'div'>,\n {\n /** A tabela. Exige `columnOrderingFeature` e `columnVisibilityFeature`. /\n table: TableWith<\n TFeatures,\n TData,\n 'columnOrderingFeature' \| 'columnVisibilityFeature'\n >;\n /\n Uma função que recebe cada coluna e a posição dela no grupo e devolve o item. Repasse a\n * posição ao `ColumnsPanel.Item`, que a usa no arrasto. Com nós comuns, quem usa faz o laço.\n * @default (column, index) => <ColumnsPanel.Item column={column} index={index} />\n /\n children?:\n \| React.ReactNode\n \| ((column: Column<TFeatures, TData>, index: number) => React.ReactNode);\n }\n>;\n\n/* Evento de fim de arrasto, como o `DragDropProvider` o entrega. /\ntype DragEndEvent = Parameters<\n NonNullable<React.ComponentProps<typeof DragDropProvider>['onDragEnd']>\n>[0];\n\n/* O nome de cada lista, na ordem das regiões: fixadas no início, centro e fixadas no fim. /\nconst GROUP_LABELS = [\n 'Colunas fixadas no início',\n 'Colunas',\n 'Colunas fixadas no fim',\n];\n\n/\n A linha entre as listas, só visual (o alfinete já diz quais são fixadas), fica nas das fixadas,\n * do lado do centro, com o respiro. A lista do centro termina no primeiro e no último item: o\n * arrasto fica preso a ela, e com o respiro dentro dela, o item arrastado cobriria a linha.\n /\nconst GROUP_CLASS_NAMES = [\n 'mb-1 border-gray-6 border-b pb-1',\n undefined,\n 'mt-1 border-gray-6 border-t pt-1',\n];\n\n/* As pontas sem fixadas: a mesma referência, para a tupla não mudar à toa. /\nconst NO_COLUMNS: never[] = [];\n\n/* Se a coluna é de dados, e não de exibição (sem `accessorFn`, como a de seleção). /\nconst isDataColumn = <TFeatures extends TableFeatures, TData extends RowData>(\n column: Column<TFeatures, TData>,\n) => column.accessorFn !== undefined;\n\n/\n A lista das colunas da tabela: marca quais aparecem e arrasta para mudar a ordem. Para um\n * popover ou uma gaveta; a posição, o gatilho e o \"restaurar\" (`table.resetColumnOrder()`,\n * `table.resetColumnVisibility()`) são do app.\n \n Lista as colunas de dados. As de exibição (sem `accessorFn`, como a de seleção e a de ações)\n * ficam fora e no lugar: reordenar só troca as outras entre si. Com `columnPinningFeature`, a\n * tela vira até três listas (fixadas no início, centro e fixadas no fim), e só a do centro se\n * arrasta.\n \n O arrasto é pela alça, com o ponteiro ou o teclado (Espaço pega, setas movem, Espaço solta, Esc\n * cancela), e fica preso à lista do centro: não passa por cima das fixadas. O `Root` assina a\n * ordem e o pinning, e cada `ColumnsPanel.Item`, a visibilidade da coluna dele: funciona com o\n * dono da tabela em `() => null`.\n \n @example\n * ```tsx\n * <ColumnsPanel.Root table={table}>\n * {(column, index) => (\n * <ColumnsPanel.Item\n * column={column}\n * index={index}\n * label={labels[column.id]}\n * />\n * )}\n * </ColumnsPanel.Root>\n * ```\n /\nexport const ColumnsPanelRoot = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: ColumnsPanelRootProps<TFeatures, TData>,\n) => {\n const { table, render, className, children, ref, ...rest } = props;\n\n /* A lista do centro, a única que se arrasta: o arrasto fica preso a ela. /\n const centerListRef = useRef<HTMLUListElement>(null);\n\n /\n As colunas das três regiões, que o TanStack memoiza, numa tupla: o `shallow` compara item a\n * item, e só re-renderiza quando a ordem ou o pinning mudam. Já na ordem final: o\n * `columnOrder` vale dentro de cada região.\n /\n const regions = useSelector(\n table.store,\n () =>\n hasTableFeature(table, 'columnPinningFeature')\n ? [\n table.getStartLeafColumns(),\n table.getCenterLeafColumns(),\n table.getEndLeafColumns(),\n ]\n : [NO_COLUMNS, table.getAllLeafColumns(), NO_COLUMNS],\n { compare: shallow },\n );\n\n const groups = regions.map((columns) => columns.filter(isDataColumn));\n\n /* Preso à lista do centro, e só na vertical: fora dela não há destino. /\n const modifiers = useMemo(\n () => [\n RestrictToVerticalAxis,\n RestrictToElement.configure({ element: () => centerListRef.current }),\n ],\n [],\n );\n\n const handleDragEnd = (event: DragEndEvent) => {\n if (event.canceled) {\n /* O Esc que cancela o arrasto pelo teclado não segue adiante: fecharia o popover em volta. /\n if (\n event.nativeEvent instanceof KeyboardEvent &&\n event.nativeEvent.key === 'Escape'\n ) {\n event.nativeEvent.stopPropagation();\n }\n\n return;\n }\n\n const { source } = event.operation;\n\n /\n A posição final vem do item arrastado, e não do destino: durante o arrasto, a lista já se\n * reordena com o destino mais próximo, e soltar em cima de uma fixada, que não aceita nada,\n * chega sem destino. Sem isso, a lista ficaria na ordem nova e a tabela, na antiga.\n /\n if (!isSortable(source) \|\| source.initialIndex === source.index) {\n return;\n }\n\n table.setColumnOrder(\n getColumnsPanelColumnOrder(\n table.getAllLeafColumns().map((column) => column.id),\n (groups[1] ?? []).map((column) => column.id),\n source.initialIndex,\n source.index,\n ),\n );\n };\n\n /\n Com render-prop ou sem `children`, o laço é daqui, uma lista por grupo com colunas; com nós\n * comuns, de quem usa.\n */\n const content =\n typeof children === 'function' \|\| children === undefined\n ? groups.map(\n (columns, groupIndex) =>\n columns.length > 0 && (\n <ul\n key={groupIndex}\n ref={groupIndex === 1 ? centerListRef : undefined}\n aria-label={GROUP_LABELS[groupIndex]}\n className={mergeTwClassNames([\n 'flex',\n 'flex-col',\n 'gap-0.5',\n GROUP_CLASS_NAMES[groupIndex],\n ])}\n >\n {columns.map((column, index) => (\n <Fragment key={column.id}>\n {children === undefined\n ? hasColumnFeature(column, 'columnVisibilityFeature') && (\n <ColumnsPanelItem\n column={column}\n index={index}\n />\n )\n : children(column, index)}\n </Fragment>\n ))}\n </ul>\n ),\n )\n : children;\n\n const element = useRender({\n render,\n ref,\n defaultTagName: 'div',\n props: mergeProps(\n {\n 'data-component': 'ColumnsPanel.Root',\n className: mergeTwClassNames(['flex', 'w-56', 'flex-col'], className),\n children: content,\n },\n rest,\n ),\n });\n\n return (\n <DragDropProvider\n modifiers={modifiers}\n onDragEnd={handleDragEnd}\n >\n {element}\n </DragDropProvider>\n );\n};\n\nColumnsPanelRoot.displayName = 'ColumnsPanel.Root';\n"],"mappings":";;;;;;;;;;;;;;AA6CA,MAAM,eAAe;CACnB;CACA;CACA;AACF;;;;;;AAOA,MAAM,oBAAoB;CACxB;CACA,KAAA;CACA;AACF;;AAGA,MAAM,aAAsB,CAAC;;AAG7B,MAAM,gBACJ,WACG,OAAO,eAAe,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8B3B,MAAa,oBAIX,UACG;CACH,MAAM,EAAE,OAAO,QAAQ,WAAW,UAAU,KAAK,GAAG,SAAS;;CAG7D,MAAM,gBAAgB,OAAyB,IAAI;CAoBnD,MAAM,SAbU,YACd,MAAM,aAEJ,gBAAgB,OAAO,sBAAsB,IACzC;EACE,MAAM,oBAAoB;EAC1B,MAAM,qBAAqB;EAC3B,MAAM,kBAAkB;CAC1B,IACA;EAAC;EAAY,MAAM,kBAAkB;EAAG;CAAU,GACxD,EAAE,SAAS,QAAQ,CAGA,CAAC,CAAC,KAAK,YAAY,QAAQ,OAAO,YAAY,CAAC;;CAGpE,MAAM,YAAY,cACV,CACJ,wBACA,kBAAkB,UAAU,EAAE,eAAe,cAAc,QAAQ,CAAC,CACtE,GACA,CAAC,CACH;CAEA,MAAM,iBAAiB,UAAwB;EAC7C,IAAI,MAAM,UAAU;;GAElB,IACE,MAAM,uBAAuB,iBAC7B,MAAM,YAAY,QAAQ,UAE1B,MAAM,YAAY,gBAAgB;GAGpC;EACF;EAEA,MAAM,EAAE,WAAW,MAAM;;;;;;EAOzB,IAAI,CAAC,WAAW,MAAM,KAAK,OAAO,iBAAiB,OAAO,OACxD;EAGF,MAAM,eACJ,2BACE,MAAM,kBAAkB,CAAC,CAAC,KAAK,WAAW,OAAO,EAAE,IAClD,OAAO,MAAM,CAAC,EAAA,CAAG,KAAK,WAAW,OAAO,EAAE,GAC3C,OAAO,cACP,OAAO,KACT,CACF;CACF;;;;;CAMA,MAAM,UACJ,OAAO,aAAa,cAAc,aAAa,KAAA,IAC3C,OAAO,KACJ,SAAS,eACR,QAAQ,SAAS,KACf,oBAAC,MAAD;EAEE,KAAK,eAAe,IAAI,gBAAgB,KAAA;EACxC,cAAY,aAAa;EACzB,WAAW,kBAAkB;GAC3B;GACA;GACA;GACA,kBAAkB;EACpB,CAAC;EAEA,UAAA,QAAQ,KAAK,QAAQ,UACpB,oBAACA,YAAD,EAAA,UACG,aAAa,KAAA,IACV,iBAAiB,QAAQ,yBAAyB,KAChD,oBAAC,kBAAD;GACU;GACD;EACR,CAAA,IAEH,SAAS,QAAQ,KAAK,EAClB,GATK,OAAO,EASZ,CACX;CACC,GAtBG,UAsBH,CAEV,IACA;CAEN,MAAM,UAAU,UAAU;EACxB;EACA;EACA,gBAAgB;EAChB,OAAO,WACL;GACE,kBAAkB;GAClB,WAAW,kBAAkB;IAAC;IAAQ;IAAQ;GAAU,GAAG,SAAS;GACpE,UAAU;EACZ,GACA,IACF;CACF,CAAC;CAED,OACE,oBAAC,kBAAD;EACa;EACX,WAAW;EAEV,UAAA;CACe,CAAA;AAEtB;AAEA,iBAAiB,cAAc"}

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

@@ -1,7 +1,7 @@
 import { Row, RowData, Table, 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/body/data-table-body.d.ts
 export type DataTableBodyProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'div'>, {
   /** A tabela do `useTable`. */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table-body.js","names":["Fragment"],"sources":["../../../../src/components/data-table/body/data-table-body.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { Skeleton } from '@lucasbernardosn/react-ui/feedback/skeleton';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { Row, RowData, Table, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport { Fragment } from 'react';\nimport { hasTableFeature } from '../../../utils';\nimport { getDataTableLoadingWithoutRows } from '../loading/get-data-table-loading-without-rows';\nimport { useDataTableLoadingInert } from '../loading/use-data-table-loading-inert';\nimport { useDataTablePageScrollReset } from '../pagination/use-data-table-page-scroll-reset';\nimport { dataTableGridClassNames } from '../root/data-table-grid-class-names';\nimport { DataTableRow } from './data-table-row';\nimport { useDataTableRowFocusRecovery } from './use-data-table-row-focus-recovery';\n\nexport type DataTableBodyProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n useRender.ComponentProps<'div'>,\n {\n /** A tabela do `useTable`. /\n table: Table<TFeatures, TData>;\n /\n Uma função que recebe cada linha do row model e devolve o elemento dela. Com nós comuns,\n * quem usa faz o laço.\n * @default (row) => <DataTable.Row row={row} />\n /\n children?:\n \| React.ReactNode\n \| ((row: Row<TFeatures, TData>) => React.ReactNode);\n /\n Quantas linhas-fantasma o corpo desenha na carga sem linhas, com `loadingFeature`.\n * @default 10\n /\n loadingRowCount?: number;\n }\n>;\n\n/\n O corpo da tabela (`role=\"rowgroup\"`).\n \n Com render-prop ou sem `children`, faz o laço sozinho: assina as linhas do row model e\n * re-renderiza quando os dados, a ordenação ou a página mudam, sem o dono da tabela precisar\n * re-renderizar. Com nós comuns, o laço é de quem usa, e o dono precisa re-renderizar quando as\n * linhas mudam.\n \n Marca as linhas com `content-visibility: auto`: o que está fora da tela não entra no estilo,\n * no layout nem na pintura, e o corpo aguenta centenas de linhas sem virtualização. Para\n * desligar, passe `className=\":[content-visibility:visible]\"`.\n \n * Com `activeRowFeature`, quando a linha com foco sai (apagada, de outra página, filtrada), o foco\n * volta para a linha ativa, se ela ficou, ou para a que tomou o lugar da que saiu.\n \n Com `rowPaginationFeature`, trocar de página ou de tamanho volta a rolagem vertical ao topo.\n \n Com `loadingFeature`, fica bloqueado (`inert`) enquanto carrega. Sem linhas, desenha\n * linhas-fantasma com skeleton (`loadingRowCount`); com linhas, cada célula troca o conteúdo por um\n * skeleton (ver `DataTable.Root`).\n \n @example\n * ```tsx\n * <DataTable.Body table={table}>\n * {(row) => (\n * <DataTable.Row row={row}>\n * {(cell) => <DataTable.Cell cell={cell} />}\n * </DataTable.Row>\n * )}\n * </DataTable.Body>\n * ```\n /\nexport const DataTableBody = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: DataTableBodyProps<TFeatures, TData>,\n) => {\n const {\n table,\n loadingRowCount = 10,\n render,\n className,\n children,\n ref,\n ...rest\n } = props;\n\n /\n Memoizado pelo TanStack: o array só muda com as linhas. Tamanho, colunas e seleção mudam o\n * store, mas não o row model, e não re-renderizam o corpo.\n /\n const rows = useSelector(table.store, () => table.getRowModel().rows);\n\n const focusRecovery = useDataTableRowFocusRecovery(table, rows);\n\n useDataTablePageScrollReset(table, focusRecovery.ref);\n\n useDataTableLoadingInert(table, focusRecovery.ref);\n\n /\n Quantas colunas cada linha-fantasma tem, ou 0 sem elas: só na carga sem linhas. Re-renderiza\n * quando as linhas-fantasma entram ou saem, ou quando as colunas visíveis mudam durante a carga.\n /\n const ghostColumnCount = useSelector(table.store, () => {\n if (!getDataTableLoadingWithoutRows(table)) {\n return 0;\n }\n\n return hasTableFeature(table, 'columnVisibilityFeature')\n ? table.getVisibleLeafColumns().length\n : table.getAllLeafColumns().length;\n });\n\n /* Com render-prop ou sem `children`, o laço é daqui; com nós comuns, de quem usa. /\n const content =\n typeof children === 'function' \|\| children === undefined\n ? rows.map((row) => (\n <Fragment key={row.id}>\n {children === undefined ? (\n <DataTableRow row={row} />\n ) : (\n children(row)\n )}\n </Fragment>\n ))\n : children;\n\n /\n Fora da árvore de acessibilidade, que já sabe da espera pelo `aria-busy` do `DataTable.Root`.\n * A grade é a da `DataTable.Row`, e o espaçamento repete o da `DataTable.Cell`.\n /\n const ghostRows = Array.from({ length: loadingRowCount }, (_, rowIndex) => (\n <div\n key={rowIndex}\n aria-hidden={true}\n data-component=\"DataTable.GhostRow\"\n className={mergeTwClassNames([\n dataTableGridClassNames,\n 'last:border-b-0',\n ])}\n >\n {Array.from({ length: ghostColumnCount }, (_, columnIndex) => (\n <div\n key={columnIndex}\n className=\"h-(--data-table-row-height) content-center px-(--data-table-cell-padding)\"\n >\n <Skeleton className=\"h-3 w-3/4\" />\n </div>\n ))}\n </div>\n ));\n\n const baseProps = {\n 'data-component': 'DataTable.Body',\n role: 'rowgroup',\n onFocus: focusRecovery.onFocus,\n onBlur: focusRecovery.onBlur,\n className: mergeTwClassNames(\n [\n // As linhas fora da tela pulam estilo, layout e pintura. Sem isto, cada tick do arrasto\n // de uma coluna, que reescreve a variável herdada do template no `Root`, recalcula todas\n // as linhas, e com centenas delas o arrasto trava.\n ':[content-visibility:auto]',\n // A altura de uma linha que ainda não apareceu: a da densidade mais a borda de baixo da\n // `DataTable.Row`. Com `auto`, a linha que já apareceu guarda a altura medida. Uma\n // estimativa errada faz a barra de rolagem pular quando as linhas entram na tela.\n '*:[contain-intrinsic-height:auto_calc(var(--data-table-row-height)+1px)]',\n ],\n className,\n ),\n children: ghostColumnCount > 0 ? ghostRows : content,\n };\n\n return useRender({\n render,\n ref: [focusRecovery.ref, ref ?? null],\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n};\n\nDataTableBody.displayName = 'DataTable.Body';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEA,MAAa,iBAIX,UACG;CACH,MAAM,EACJ,OACA,kBAAkB,IAClB,QACA,WACA,UACA,KACA,GAAG,SACD;;;;;CAMJ,MAAM,OAAO,YAAY,MAAM,aAAa,MAAM,YAAY,CAAC,CAAC,IAAI;CAEpE,MAAM,gBAAgB,6BAA6B,OAAO,IAAI;CAE9D,4BAA4B,OAAO,cAAc,GAAG;CAEpD,yBAAyB,OAAO,cAAc,GAAG;;;;;CAMjD,MAAM,mBAAmB,YAAY,MAAM,aAAa;EACtD,IAAI,CAAC,+BAA+B,KAAK,GACvC,OAAO;EAGT,OAAO,gBAAgB,OAAO,yBAAyB,IACnD,MAAM,sBAAsB,CAAC,CAAC,SAC9B,MAAM,kBAAkB,CAAC,CAAC;CAChC,CAAC;;CAGD,MAAM,UACJ,OAAO,aAAa,cAAc,aAAa,KAAA,IAC3C,KAAK,KAAK,QACR,oBAACA,YAAD,EAAA,UACG,aAAa,KAAA,IACZ,oBAAC,cAAD,EAAmB,IAAM,CAAA,IAEzB,SAAS,GAAG,EAEN,GANK,IAAI,EAMT,CACX,IACD;;;;;CAMN,MAAM,YAAY,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,aAC5D,oBAAC,OAAD;EAEE,eAAa;EACb,kBAAe;EACf,WAAW,kBAAkB,CAC3B,yBACA,iBACF,CAAC;EAEA,UAAA,MAAM,KAAK,EAAE,QAAQ,iBAAiB,IAAI,GAAG,gBAC5C,oBAAC,OAAD;GAEE,WAAU;GAEV,UAAA,oBAAC,UAAD,EAAU,WAAU,YAAa,CAAA;EAC9B,GAJE,WAIF,CACN;CACE,GAhBE,QAgBF,CACN;CAED,MAAM,YAAY;EAChB,kBAAkB;EAClB,MAAM;EACN,SAAS,cAAc;EACvB,QAAQ,cAAc;EACtB,WAAW,kBACT,CAIE,+BAIA,0EACF,GACA,SACF;EACA,UAAU,mBAAmB,IAAI,YAAY;CAC/C;CAEA,OAAO,UAAU;EACf;EACA,KAAK,CAAC,cAAc,KAAK,OAAO,IAAI;EACpC,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,cAAc,cAAc"}
1	+ {"version":3,"file":"data-table-body.js","names":["Fragment"],"sources":["../../../../src/components/data-table/body/data-table-body.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { Skeleton } from '@lucasbernardosn/react-ui/feedback/skeleton';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { useSelector } from '@tanstack/react-store';\nimport type { Row, RowData, Table, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport { Fragment } from 'react';\nimport { hasTableFeature } from '../../../utils';\nimport { getDataTableLoadingWithoutRows } from '../loading/get-data-table-loading-without-rows';\nimport { useDataTableLoadingInert } from '../loading/use-data-table-loading-inert';\nimport { useDataTablePageScrollReset } from '../pagination/use-data-table-page-scroll-reset';\nimport { dataTableGridClassNames } from '../root/data-table-grid-class-names';\nimport { DataTableRow } from './data-table-row';\nimport { useDataTableRowFocusRecovery } from './use-data-table-row-focus-recovery';\n\nexport type DataTableBodyProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n useRender.ComponentProps<'div'>,\n {\n /** A tabela do `useTable`. /\n table: Table<TFeatures, TData>;\n /\n Uma função que recebe cada linha do row model e devolve o elemento dela. Com nós comuns,\n * quem usa faz o laço.\n * @default (row) => <DataTable.Row row={row} />\n /\n children?:\n \| React.ReactNode\n \| ((row: Row<TFeatures, TData>) => React.ReactNode);\n /\n Quantas linhas-fantasma o corpo desenha na carga sem linhas, com `loadingFeature`.\n * @default 10\n /\n loadingRowCount?: number;\n }\n>;\n\n/\n O corpo da tabela (`role=\"rowgroup\"`).\n \n Com render-prop ou sem `children`, faz o laço sozinho: assina as linhas do row model e\n * re-renderiza quando os dados, a ordenação ou a página mudam, sem o dono da tabela precisar\n * re-renderizar. Com nós comuns, o laço é de quem usa, e o dono precisa re-renderizar quando as\n * linhas mudam.\n \n Marca as linhas com `content-visibility: auto`: o que está fora da tela não entra no estilo,\n * no layout nem na pintura, e o corpo aguenta centenas de linhas sem virtualização. Para\n * desligar, passe `className=\":[content-visibility:visible]\"`.\n \n * Com `activeRowFeature`, quando a linha com foco sai (apagada, de outra página, filtrada), o foco\n * volta para a linha ativa, se ela ficou, ou para a que tomou o lugar da que saiu.\n \n Com `rowPaginationFeature`, trocar de página ou de tamanho volta a rolagem vertical ao topo.\n \n Com `loadingFeature`, fica bloqueado (`inert`) enquanto carrega. Sem linhas, desenha\n * linhas-fantasma com skeleton (`loadingRowCount`); com linhas, cada célula troca o conteúdo por um\n * skeleton (ver `DataTable.Root`).\n \n @example\n * ```tsx\n * <DataTable.Body table={table}>\n * {(row) => (\n * <DataTable.Row row={row}>\n * {(cell) => <DataTable.Cell cell={cell} />}\n * </DataTable.Row>\n * )}\n * </DataTable.Body>\n * ```\n /\nexport const DataTableBody = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: DataTableBodyProps<TFeatures, TData>,\n) => {\n const {\n table,\n loadingRowCount = 10,\n render,\n className,\n children,\n ref,\n ...rest\n } = props;\n\n /\n Memoizado pelo TanStack: o array só muda com as linhas. Tamanho, colunas e seleção mudam o\n * store, mas não o row model, e não re-renderizam o corpo.\n /\n const rows = useSelector(table.store, () => table.getRowModel().rows);\n\n const focusRecovery = useDataTableRowFocusRecovery(table, rows);\n\n useDataTablePageScrollReset(table, focusRecovery.ref);\n\n useDataTableLoadingInert(table, focusRecovery.ref);\n\n /\n Quantas colunas cada linha-fantasma tem, ou 0 sem elas: só na carga sem linhas. Re-renderiza\n * quando as linhas-fantasma entram ou saem, ou quando as colunas visíveis mudam durante a carga.\n /\n const ghostColumnCount = useSelector(table.store, () => {\n if (!getDataTableLoadingWithoutRows(table)) {\n return 0;\n }\n\n return hasTableFeature(table, 'columnVisibilityFeature')\n ? table.getVisibleLeafColumns().length\n : table.getAllLeafColumns().length;\n });\n\n /* Com render-prop ou sem `children`, o laço é daqui; com nós comuns, de quem usa. /\n const content =\n typeof children === 'function' \|\| children === undefined\n ? rows.map((row) => (\n <Fragment key={row.id}>\n {children === undefined ? (\n <DataTableRow row={row} />\n ) : (\n children(row)\n )}\n </Fragment>\n ))\n : children;\n\n /\n Fora da árvore de acessibilidade, que já sabe da espera pelo `aria-busy` do `DataTable.Root`.\n * A grade é a da `DataTable.Row`, e o espaçamento repete o da `DataTable.Cell`.\n /\n const ghostRows = Array.from({ length: loadingRowCount }, (_, rowIndex) => (\n <div\n key={rowIndex}\n aria-hidden={true}\n data-component=\"DataTable.GhostRow\"\n className={mergeTwClassNames([\n dataTableGridClassNames,\n 'last:border-b-0',\n ])}\n >\n {Array.from({ length: ghostColumnCount }, (_, columnIndex) => (\n <div\n key={columnIndex}\n className=\"h-(--data-table-row-height) content-center px-(--data-table-cell-padding)\"\n >\n <Skeleton className=\"h-3 w-3/4\" />\n </div>\n ))}\n </div>\n ));\n\n const baseProps = {\n 'data-component': 'DataTable.Body',\n role: 'rowgroup',\n onFocus: focusRecovery.onFocus,\n onBlur: focusRecovery.onBlur,\n className: mergeTwClassNames(\n [\n // As linhas fora da tela pulam estilo, layout e pintura. Sem isto, cada tick do arrasto\n // de uma coluna, que reescreve a variável herdada do template no `Root`, recalcula todas\n // as linhas, e com centenas delas o arrasto trava.\n ':[content-visibility:auto]',\n // A altura de uma linha que ainda não apareceu: a da densidade mais a borda de baixo da\n // `DataTable.Row`. Com `auto`, a linha que já apareceu guarda a altura medida. Uma\n // estimativa errada faz a barra de rolagem pular quando as linhas entram na tela.\n '*:[contain-intrinsic-height:auto_calc(var(--data-table-row-height)+1px)]',\n ],\n className,\n ),\n children: ghostColumnCount > 0 ? ghostRows : content,\n };\n\n return useRender({\n render,\n ref: [focusRecovery.ref, ref ?? null],\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n};\n\nDataTableBody.displayName = 'DataTable.Body';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEA,MAAa,iBAIX,UACG;CACH,MAAM,EACJ,OACA,kBAAkB,IAClB,QACA,WACA,UACA,KACA,GAAG,SACD;;;;;CAMJ,MAAM,OAAO,YAAY,MAAM,aAAa,MAAM,YAAY,CAAC,CAAC,IAAI;CAEpE,MAAM,gBAAgB,6BAA6B,OAAO,IAAI;CAE9D,4BAA4B,OAAO,cAAc,GAAG;CAEpD,yBAAyB,OAAO,cAAc,GAAG;;;;;CAMjD,MAAM,mBAAmB,YAAY,MAAM,aAAa;EACtD,IAAI,CAAC,+BAA+B,KAAK,GACvC,OAAO;EAGT,OAAO,gBAAgB,OAAO,yBAAyB,IACnD,MAAM,sBAAsB,CAAC,CAAC,SAC9B,MAAM,kBAAkB,CAAC,CAAC;CAChC,CAAC;;CAGD,MAAM,UACJ,OAAO,aAAa,cAAc,aAAa,KAAA,IAC3C,KAAK,KAAK,QACR,oBAACA,YAAD,EAAA,UACG,aAAa,KAAA,IACZ,oBAAC,cAAD,EAAmB,IAAM,CAAA,IAEzB,SAAS,GAAG,EAEN,GANK,IAAI,EAMT,CACX,IACD;;;;;CAMN,MAAM,YAAY,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,aAC5D,oBAAC,OAAD;EAEE,eAAa;EACb,kBAAe;EACf,WAAW,kBAAkB,CAC3B,yBACA,iBACF,CAAC;EAEA,UAAA,MAAM,KAAK,EAAE,QAAQ,iBAAiB,IAAI,GAAG,gBAC5C,oBAAC,OAAD;GAEE,WAAU;GAEV,UAAA,oBAAC,UAAD,EAAU,WAAU,YAAa,CAAA;EAC9B,GAJE,WAIF,CACN;CACE,GAhBE,QAgBF,CACN;CAED,MAAM,YAAY;EAChB,kBAAkB;EAClB,MAAM;EACN,SAAS,cAAc;EACvB,QAAQ,cAAc;EACtB,WAAW,kBACT,CAIE,+BAIA,0EACF,GACA,SACF;EACA,UAAU,mBAAmB,IAAI,YAAY;CAC/C;CAEA,OAAO,UAAU;EACf;EACA,KAAK,CAAC,cAAc,KAAK,OAAO,IAAI;EACpC,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,cAAc,cAAc"}

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

@@ -1,6 +1,6 @@
 import { Cell, 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/body/data-table-cell.d.ts
 export type DataTableCellProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'div'>, {
   /** A célula da linha. */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table-cell.js","names":[],"sources":["../../../../src/components/data-table/body/data-table-cell.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport {\n type Cell,\n FlexRender,\n type RowData,\n type TableFeatures,\n} from '@tanstack/react-table';\nimport { hasColumnFeature, hasTableFeature } from '../../../utils';\nimport {\n getDataTableColumnPinning,\n getDataTablePinnedStyle,\n} from '../root/get-data-table-column-pinning';\n\nexport type DataTableCellProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n useRender.ComponentProps<'div'>,\n {\n /** A célula da linha. /\n cell: Cell<TFeatures, TData>;\n }\n>;\n\n/\n Uma célula do corpo (`role=\"cell\"`). Sem `children`, mostra o `cell` da definição da coluna;\n * com eles, mostra os `children`.\n \n Trunca o texto com reticências. Para arrumar o conteúdo em linha, como texto com ícone, passe\n * `className=\"flex items-center gap-2\"` e trunque o texto por conta própria.\n \n Com `columnAlignmentFeature`, alinha o conteúdo pelo `align` da coluna e o marca em\n * `data-align`. Com `columnPinningFeature`, numa coluna fixada, gruda na borda do lado dela,\n * marcada com `data-pinned`, e repete o fundo da `DataTable.Row` para cobrir o que rola por\n * baixo.\n /\nexport const DataTableCell = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: DataTableCellProps<TFeatures, TData>,\n) => {\n const { cell, render, className, children, ...rest } = props;\n\n /\n Sem assinatura: o alinhamento vem da definição da coluna, que não muda em runtime. Uma troca\n * das colunas muda as células, e a `DataTable.Row` re-renderiza, com a célula junto.\n /\n const align = hasColumnFeature(cell.column, 'columnAlignmentFeature')\n ? cell.column.getAlign()\n : undefined;\n\n /\n Sem assinatura: o pinning muda as células da linha, e a `DataTable.Row` re-renderiza, com a\n * célula junto. O deslocamento muda no resize, mas fica na variável que o `DataTable.Root`\n * escreve.\n /\n const pinning = getDataTableColumnPinning(cell.column);\n\n const baseProps = {\n 'data-component': 'DataTable.Cell',\n 'data-align': align,\n 'data-pinned': pinning.position \|\| undefined,\n // Dentro do `grid` do `DataTable.Root`, que a navegação por teclado liga, a célula é `gridcell`.\n role: hasTableFeature(cell.table, 'activeRowFeature') ? 'gridcell' : 'cell',\n style: getDataTablePinnedStyle(pinning),\n className: mergeTwClassNames(\n [\n // Bloco, e não flex: só num bloco o texto ganha reticências. O `content-center` centraliza\n // na vertical.\n 'block',\n 'content-center',\n // Item de grid tem `min-width: auto`: sem isto, um conteúdo longo alarga o track, e a\n // coluna deixa de bater com o template.\n 'min-w-0',\n 'truncate',\n\n // Pelo `text-align`: a célula é bloco, e o conteúdo em linha, como o checkbox, segue.\n 'data-[align=center]:text-center',\n 'data-[align=end]:text-end',\n\n // Do `DataTable.Root`, pela densidade.\n 'h-(--data-table-row-height)',\n\n 'px-(--data-table-cell-padding)',\n\n // Fixada: gruda por cima das células do centro, e o fundo da linha a deixa opaca.\n 'data-pinned:sticky',\n 'data-pinned:z-1',\n 'data-pinned:bg-(--data-table-row-background)',\n // Sombra na borda da fixada, do lado em que o centro passa por baixo: na última do início e\n // na primeira do fim. Mais forte no escuro, onde a do claro sumiria no fundo.\n 'data-[pinned=start]:has-[+:not([data-pinned=start])]:shadow-[6px_0_8px_-6px_rgb(0_0_0/0.12)]',\n 'dark:data-[pinned=start]:has-[+:not([data-pinned=start])]:shadow-[6px_0_8px_-6px_rgb(0_0_0/0.8)]',\n 'data-[pinned=end]:not-[[data-pinned=end]+]:shadow-[-6px_0_8px_-6px_rgb(0_0_0/0.12)]',\n 'dark:data-[pinned=end]:not-[[data-pinned=end]+]:shadow-[-6px_0_8px_-6px_rgb(0_0_0/0.8)]',\n\n // A cor do texto vem da `DataTable.Row`, para a cor que o app puser na linha chegar aqui.\n 'text-sm',\n\n // Carregamento (`data-loading` no `DataTable.Root`): o conteúdo some\n // sem a célula mudar de tamanho, e um bloco com as classes do `Skeleton` do `ui` ocupa o\n // lugar, alinhado como o conteúdo. Por CSS, para as células não re-renderizarem a cada\n // carga. O texto vai a 0px, e não a transparente: senão empurraria o bloco no `center`.\n 'in-data-loading:text-[0px]',\n 'in-data-loading::hidden',\n \"in-data-loading:before:content-['']\",\n 'in-data-loading:before:inline-block',\n 'in-data-loading:before:align-middle',\n 'in-data-loading:before:h-3',\n 'in-data-loading:before:w-3/4',\n 'in-data-loading:before:rounded-md',\n 'in-data-loading:before:corner-squircle',\n 'in-data-loading:before:bg-gray-6',\n 'in-data-loading:before:not-motion-reduced:animate-skeleton-pulse',\n ],\n className,\n ),\n children: children === undefined ? <FlexRender cell={cell} /> : children,\n };\n\n return useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n};\n\nDataTableCell.displayName = 'DataTable.Cell';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsCA,MAAa,iBAIX,UACG;CACH,MAAM,EAAE,MAAM,QAAQ,WAAW,UAAU,GAAG,SAAS;;;;;CAMvD,MAAM,QAAQ,iBAAiB,KAAK,QAAQ,wBAAwB,IAChE,KAAK,OAAO,SAAS,IACrB,KAAA;;;;;;CAOJ,MAAM,UAAU,0BAA0B,KAAK,MAAM;CAErD,MAAM,YAAY;EAChB,kBAAkB;EAClB,cAAc;EACd,eAAe,QAAQ,YAAY,KAAA;EAEnC,MAAM,gBAAgB,KAAK,OAAO,kBAAkB,IAAI,aAAa;EACrE,OAAO,wBAAwB,OAAO;EACtC,WAAW,kBACT;GAGE;GACA;GAGA;GACA;GAGA;GACA;GAGA;GAEA;GAGA;GACA;GACA;GAGA;GACA;GACA;GACA;GAGA;GAMA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,UAAU,aAAa,KAAA,IAAY,oBAAC,YAAD,EAAkB,KAAO,CAAA,IAAI;CAClE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,cAAc,cAAc"}
1	+ {"version":3,"file":"data-table-cell.js","names":[],"sources":["../../../../src/components/data-table/body/data-table-cell.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport {\n type Cell,\n FlexRender,\n type RowData,\n type TableFeatures,\n} from '@tanstack/react-table';\nimport { hasColumnFeature, hasTableFeature } from '../../../utils';\nimport {\n getDataTableColumnPinning,\n getDataTablePinnedStyle,\n} from '../root/get-data-table-column-pinning';\n\nexport type DataTableCellProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n useRender.ComponentProps<'div'>,\n {\n /** A célula da linha. /\n cell: Cell<TFeatures, TData>;\n }\n>;\n\n/\n Uma célula do corpo (`role=\"cell\"`). Sem `children`, mostra o `cell` da definição da coluna;\n * com eles, mostra os `children`.\n \n Trunca o texto com reticências. Para arrumar o conteúdo em linha, como texto com ícone, passe\n * `className=\"flex items-center gap-2\"` e trunque o texto por conta própria.\n \n Com `columnAlignmentFeature`, alinha o conteúdo pelo `align` da coluna e o marca em\n * `data-align`. Com `columnPinningFeature`, numa coluna fixada, gruda na borda do lado dela,\n * marcada com `data-pinned`, e repete o fundo da `DataTable.Row` para cobrir o que rola por\n * baixo.\n /\nexport const DataTableCell = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: DataTableCellProps<TFeatures, TData>,\n) => {\n const { cell, render, className, children, ...rest } = props;\n\n /\n Sem assinatura: o alinhamento vem da definição da coluna, que não muda em runtime. Uma troca\n * das colunas muda as células, e a `DataTable.Row` re-renderiza, com a célula junto.\n /\n const align = hasColumnFeature(cell.column, 'columnAlignmentFeature')\n ? cell.column.getAlign()\n : undefined;\n\n /\n Sem assinatura: o pinning muda as células da linha, e a `DataTable.Row` re-renderiza, com a\n * célula junto. O deslocamento muda no resize, mas fica na variável que o `DataTable.Root`\n * escreve.\n /\n const pinning = getDataTableColumnPinning(cell.column);\n\n const baseProps = {\n 'data-component': 'DataTable.Cell',\n 'data-align': align,\n 'data-pinned': pinning.position \|\| undefined,\n // Dentro do `grid` do `DataTable.Root`, que a navegação por teclado liga, a célula é `gridcell`.\n role: hasTableFeature(cell.table, 'activeRowFeature') ? 'gridcell' : 'cell',\n style: getDataTablePinnedStyle(pinning),\n className: mergeTwClassNames(\n [\n // Bloco, e não flex: só num bloco o texto ganha reticências. O `content-center` centraliza\n // na vertical.\n 'block',\n 'content-center',\n // Item de grid tem `min-width: auto`: sem isto, um conteúdo longo alarga o track, e a\n // coluna deixa de bater com o template.\n 'min-w-0',\n 'truncate',\n\n // Pelo `text-align`: a célula é bloco, e o conteúdo em linha, como o checkbox, segue.\n 'data-[align=center]:text-center',\n 'data-[align=end]:text-end',\n\n // Do `DataTable.Root`, pela densidade.\n 'h-(--data-table-row-height)',\n\n 'px-(--data-table-cell-padding)',\n\n // Fixada: gruda por cima das células do centro, e o fundo da linha a deixa opaca.\n 'data-pinned:sticky',\n 'data-pinned:z-1',\n 'data-pinned:bg-(--data-table-row-background)',\n // Sombra na borda da fixada, do lado em que o centro passa por baixo: na última do início e\n // na primeira do fim. Mais forte no escuro, onde a do claro sumiria no fundo.\n 'data-[pinned=start]:has-[+:not([data-pinned=start])]:shadow-[6px_0_8px_-6px_rgb(0_0_0/0.12)]',\n 'dark:data-[pinned=start]:has-[+:not([data-pinned=start])]:shadow-[6px_0_8px_-6px_rgb(0_0_0/0.8)]',\n 'data-[pinned=end]:not-[[data-pinned=end]+]:shadow-[-6px_0_8px_-6px_rgb(0_0_0/0.12)]',\n 'dark:data-[pinned=end]:not-[[data-pinned=end]+]:shadow-[-6px_0_8px_-6px_rgb(0_0_0/0.8)]',\n\n // A cor do texto vem da `DataTable.Row`, para a cor que o app puser na linha chegar aqui.\n 'text-sm',\n\n // Carregamento (`data-loading` no `DataTable.Root`): o conteúdo some\n // sem a célula mudar de tamanho, e um bloco com as classes do `Skeleton` do `ui` ocupa o\n // lugar, alinhado como o conteúdo. Por CSS, para as células não re-renderizarem a cada\n // carga. O texto vai a 0px, e não a transparente: senão empurraria o bloco no `center`.\n 'in-data-loading:text-[0px]',\n 'in-data-loading::hidden',\n \"in-data-loading:before:content-['']\",\n 'in-data-loading:before:inline-block',\n 'in-data-loading:before:align-middle',\n 'in-data-loading:before:h-3',\n 'in-data-loading:before:w-3/4',\n 'in-data-loading:before:rounded-md',\n 'in-data-loading:before:corner-squircle',\n 'in-data-loading:before:bg-gray-6',\n 'in-data-loading:before:not-motion-reduced:animate-skeleton-pulse',\n ],\n className,\n ),\n children: children === undefined ? <FlexRender cell={cell} /> : children,\n };\n\n return useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n};\n\nDataTableCell.displayName = 'DataTable.Cell';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsCA,MAAa,iBAIX,UACG;CACH,MAAM,EAAE,MAAM,QAAQ,WAAW,UAAU,GAAG,SAAS;;;;;CAMvD,MAAM,QAAQ,iBAAiB,KAAK,QAAQ,wBAAwB,IAChE,KAAK,OAAO,SAAS,IACrB,KAAA;;;;;;CAOJ,MAAM,UAAU,0BAA0B,KAAK,MAAM;CAErD,MAAM,YAAY;EAChB,kBAAkB;EAClB,cAAc;EACd,eAAe,QAAQ,YAAY,KAAA;EAEnC,MAAM,gBAAgB,KAAK,OAAO,kBAAkB,IAAI,aAAa;EACrE,OAAO,wBAAwB,OAAO;EACtC,WAAW,kBACT;GAGE;GACA;GAGA;GACA;GAGA;GACA;GAGA;GAEA;GAGA;GACA;GACA;GAGA;GACA;GACA;GACA;GAGA;GAMA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,UAAU,aAAa,KAAA,IAAY,oBAAC,YAAD,EAAkB,KAAO,CAAA,IAAI;CAClE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,cAAc,cAAc"}

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

@@ -1,6 +1,6 @@
 import { RowData, Table, 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/body/data-table-empty.d.ts
 export type DataTableEmptyProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'div'>, {
   /** A tabela do `useTable`. */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table-empty.js","names":[],"sources":["../../../../src/components/data-table/body/data-table-empty.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { EmptyState } from '@lucasbernardosn/react-ui/feedback/empty-state';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { TrayIcon } from '@phosphor-icons/react';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, Table, TableFeatures } from '@tanstack/react-table';\nimport { hasTableFeature } from '../../../utils';\n\nexport type DataTableEmptyProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n useRender.ComponentProps<'div'>,\n {\n /** A tabela do `useTable`. /\n table: Table<TFeatures, TData>;\n }\n>;\n\n/\n O estado vazio da tabela, para depois do `DataTable.Body`, dentro do `DataTable.Root`. Aparece\n * quando o row model não tem linhas e a tabela não está carregando: com `loadingFeature`, a carga\n * sem linhas mostra as linhas-fantasma do corpo, e não o vazio.\n \n Sem `children`, mostra o `EmptyState` do `ui`, sem moldura, com \"Nenhum registro encontrado\"\n * e uma descrição que sugere ajustar os filtros. Com `children`, o conteúdo do app, como uma\n * mensagem do filtro e um botão para limpá-lo. Fica centralizado na largura da tabela.\n \n @example\n * ```tsx\n * <DataTable.Root table={table}>\n * <DataTable.Header table={table} />\n * <DataTable.Body table={table} />\n * <DataTable.Empty table={table}>\n * <EmptyState.Root variant=\"plain\">\n * <EmptyState.Content>\n * <EmptyState.Title>Nenhum cliente para este filtro</EmptyState.Title>\n * </EmptyState.Content>\n * </EmptyState.Root>\n * </DataTable.Empty>\n * </DataTable.Root>\n * ```\n /\nexport const DataTableEmpty = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: DataTableEmptyProps<TFeatures, TData>,\n) => {\n const { table, render, className, children, ...rest } = props;\n\n /\n Re-renderiza quando a tabela fica vazia ou deixa de ficar. O store: as linhas mudam com os\n * dados, e o carregamento, com a feature opcional.\n /\n const isEmpty = useSelector(\n table.store,\n () =>\n table.getRowModel().rows.length === 0 &&\n !(\n hasTableFeature(table, 'loadingFeature') && table.atoms.isLoading.get()\n ),\n );\n\n /* Dentro do `grid` do `DataTable.Root`, que a navegação por teclado liga, a célula é `gridcell`. */\n const cellRole = hasTableFeature(table, 'activeRowFeature')\n ? 'gridcell'\n : 'cell';\n\n const baseProps = {\n 'data-component': 'DataTable.Empty',\n // Uma linha com uma célula: dentro de `table` e `grid`, o ARIA só aceita linhas.\n role: 'row',\n className: mergeTwClassNames(['py-8'], className),\n children: (\n <div role={cellRole}>\n {children === undefined ? (\n <EmptyState.Root variant=\"plain\">\n <EmptyState.Indicator className=\"text-gray-11\">\n <TrayIcon />\n </EmptyState.Indicator>\n\n <EmptyState.Content>\n <EmptyState.Title className=\"text-gray-11\">\n Nenhum registro encontrado\n </EmptyState.Title>\n <EmptyState.Description>\n Não há registros para mostrar. Se houver filtros aplicados,\n tente ajustá-los.\n </EmptyState.Description>\n </EmptyState.Content>\n </EmptyState.Root>\n ) : (\n children\n )}\n </div>\n ),\n };\n\n const element = useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n\n return isEmpty ? element : null;\n};\n\nDataTableEmpty.displayName = 'DataTable.Empty';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAa,kBAIX,UACG;CACH,MAAM,EAAE,OAAO,QAAQ,WAAW,UAAU,GAAG,SAAS;;;;;CAMxD,MAAM,UAAU,YACd,MAAM,aAEJ,MAAM,YAAY,CAAC,CAAC,KAAK,WAAW,KACpC,EACE,gBAAgB,OAAO,gBAAgB,KAAK,MAAM,MAAM,UAAU,IAAI,EAE5E;;CAGA,MAAM,WAAW,gBAAgB,OAAO,kBAAkB,IACtD,aACA;CAEJ,MAAM,YAAY;EAChB,kBAAkB;EAElB,MAAM;EACN,WAAW,kBAAkB,CAAC,MAAM,GAAG,SAAS;EAChD,UACE,oBAAC,OAAD;GAAK,MAAM;GACR,UAAA,aAAa,KAAA,IACZ,qBAAC,WAAW,MAAZ;IAAiB,SAAQ;IAAzB,UAAA,CACE,oBAAC,WAAW,WAAZ;KAAsB,WAAU;KAC9B,UAAA,oBAAC,UAAD,CAAW,CAAA;IACS,CAAA,GAEtB,qBAAC,WAAW,SAAZ,EAAA,UAAA,CACE,oBAAC,WAAW,OAAZ;KAAkB,WAAU;KAAe,UAAA;IAEzB,CAAA,GAClB,oBAAC,WAAW,aAAZ,EAAA,UAAwB,gFAGA,CAAA,CACN,EAAA,CAAA,CACL;GAEjB,CAAA,IAAA;EAEC,CAAA;CAET;CAEA,MAAM,UAAU,UAAU;EACxB;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;CAED,OAAO,UAAU,UAAU;AAC7B;AAEA,eAAe,cAAc"}
1	+ {"version":3,"file":"data-table-empty.js","names":[],"sources":["../../../../src/components/data-table/body/data-table-empty.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { EmptyState } from '@lucasbernardosn/react-ui/feedback/empty-state';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { TrayIcon } from '@phosphor-icons/react';\nimport { useSelector } from '@tanstack/react-store';\nimport type { RowData, Table, TableFeatures } from '@tanstack/react-table';\nimport { hasTableFeature } from '../../../utils';\n\nexport type DataTableEmptyProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n useRender.ComponentProps<'div'>,\n {\n /** A tabela do `useTable`. /\n table: Table<TFeatures, TData>;\n }\n>;\n\n/\n O estado vazio da tabela, para depois do `DataTable.Body`, dentro do `DataTable.Root`. Aparece\n * quando o row model não tem linhas e a tabela não está carregando: com `loadingFeature`, a carga\n * sem linhas mostra as linhas-fantasma do corpo, e não o vazio.\n \n Sem `children`, mostra o `EmptyState` do `ui`, sem moldura, com \"Nenhum registro encontrado\"\n * e uma descrição que sugere ajustar os filtros. Com `children`, o conteúdo do app, como uma\n * mensagem do filtro e um botão para limpá-lo. Fica centralizado na largura da tabela.\n \n @example\n * ```tsx\n * <DataTable.Root table={table}>\n * <DataTable.Header table={table} />\n * <DataTable.Body table={table} />\n * <DataTable.Empty table={table}>\n * <EmptyState.Root variant=\"plain\">\n * <EmptyState.Content>\n * <EmptyState.Title>Nenhum cliente para este filtro</EmptyState.Title>\n * </EmptyState.Content>\n * </EmptyState.Root>\n * </DataTable.Empty>\n * </DataTable.Root>\n * ```\n /\nexport const DataTableEmpty = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: DataTableEmptyProps<TFeatures, TData>,\n) => {\n const { table, render, className, children, ...rest } = props;\n\n /\n Re-renderiza quando a tabela fica vazia ou deixa de ficar. O store: as linhas mudam com os\n * dados, e o carregamento, com a feature opcional.\n /\n const isEmpty = useSelector(\n table.store,\n () =>\n table.getRowModel().rows.length === 0 &&\n !(\n hasTableFeature(table, 'loadingFeature') && table.atoms.isLoading.get()\n ),\n );\n\n /* Dentro do `grid` do `DataTable.Root`, que a navegação por teclado liga, a célula é `gridcell`. */\n const cellRole = hasTableFeature(table, 'activeRowFeature')\n ? 'gridcell'\n : 'cell';\n\n const baseProps = {\n 'data-component': 'DataTable.Empty',\n // Uma linha com uma célula: dentro de `table` e `grid`, o ARIA só aceita linhas.\n role: 'row',\n className: mergeTwClassNames(['py-8'], className),\n children: (\n <div role={cellRole}>\n {children === undefined ? (\n <EmptyState.Root variant=\"plain\">\n <EmptyState.Indicator className=\"text-gray-11\">\n <TrayIcon />\n </EmptyState.Indicator>\n\n <EmptyState.Content>\n <EmptyState.Title className=\"text-gray-11\">\n Nenhum registro encontrado\n </EmptyState.Title>\n <EmptyState.Description>\n Não há registros para mostrar. Se houver filtros aplicados,\n tente ajustá-los.\n </EmptyState.Description>\n </EmptyState.Content>\n </EmptyState.Root>\n ) : (\n children\n )}\n </div>\n ),\n };\n\n const element = useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n\n return isEmpty ? element : null;\n};\n\nDataTableEmpty.displayName = 'DataTable.Empty';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAa,kBAIX,UACG;CACH,MAAM,EAAE,OAAO,QAAQ,WAAW,UAAU,GAAG,SAAS;;;;;CAMxD,MAAM,UAAU,YACd,MAAM,aAEJ,MAAM,YAAY,CAAC,CAAC,KAAK,WAAW,KACpC,EACE,gBAAgB,OAAO,gBAAgB,KAAK,MAAM,MAAM,UAAU,IAAI,EAE5E;;CAGA,MAAM,WAAW,gBAAgB,OAAO,kBAAkB,IACtD,aACA;CAEJ,MAAM,YAAY;EAChB,kBAAkB;EAElB,MAAM;EACN,WAAW,kBAAkB,CAAC,MAAM,GAAG,SAAS;EAChD,UACE,oBAAC,OAAD;GAAK,MAAM;GACR,UAAA,aAAa,KAAA,IACZ,qBAAC,WAAW,MAAZ;IAAiB,SAAQ;IAAzB,UAAA,CACE,oBAAC,WAAW,WAAZ;KAAsB,WAAU;KAC9B,UAAA,oBAAC,UAAD,CAAW,CAAA;IACS,CAAA,GAEtB,qBAAC,WAAW,SAAZ,EAAA,UAAA,CACE,oBAAC,WAAW,OAAZ;KAAkB,WAAU;KAAe,UAAA;IAEzB,CAAA,GAClB,oBAAC,WAAW,aAAZ,EAAA,UAAwB,gFAGA,CAAA,CACN,EAAA,CAAA,CACL;GAEjB,CAAA,IAAA;EAEC,CAAA;CAET;CAEA,MAAM,UAAU,UAAU;EACxB;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;CAED,OAAO,UAAU,UAAU;AAC7B;AAEA,eAAe,cAAc"}

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

@@ -1,7 +1,7 @@
 import { Cell, Row, 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/body/data-table-row.d.ts
 export type DataTableRowProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'div'>, {
   /** A linha do row model. */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table-row.js","names":["Fragment"],"sources":["../../../../src/components/data-table/body/data-table-row.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 { Cell, Row, RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport { Fragment } from 'react';\nimport { hasRowFeature } from '../../../utils';\nimport { dataTableGridClassNames } from '../root/data-table-grid-class-names';\nimport { DataTableCell } from './data-table-cell';\nimport {\n focusDataTableRow,\n getDataTableRowKeyTarget,\n} from './data-table-row-focus';\n\nexport type DataTableRowProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n useRender.ComponentProps<'div'>,\n {\n /** A linha do row model. /\n row: Row<TFeatures, TData>;\n /\n Uma função que recebe cada célula visível e devolve o elemento dela. Com nós comuns, quem\n * usa faz o laço.\n * @default (cell) => <DataTable.Cell cell={cell} />\n /\n children?:\n \| React.ReactNode\n \| ((cell: Cell<TFeatures, TData>) => React.ReactNode);\n }\n>;\n\n/\n Uma linha do corpo (`role=\"row\"`). É um grid com as colunas do `--data-table-template`, que o\n * `DataTable.Root` escreve.\n \n Com render-prop ou sem `children`, faz o laço das células sozinha: assina as próprias células e\n * re-renderiza quando a ordem, a visibilidade ou o pinning das colunas mudam, que não mudam o row\n * model e não passam pelo `DataTable.Body`. Com `columnVisibilityFeature`, são as células\n * visíveis; sem ela, todas. Com `columnPinningFeature`, vêm na ordem das regiões: as fixadas no\n * início, as do centro e as fixadas no fim.\n \n Com `rowSelectionFeature`, a linha selecionada ganha `data-selected` e o fundo destacado, e com\n * `activeRowFeature`, também o `aria-selected`. O clique na linha não seleciona: o `onClick` fica\n * livre, e a seleção é do `DataTable.RowCheckbox` e do Espaço.\n \n Com `activeRowFeature`, entra na navegação por teclado. A linha ativa tem o ponto de Tab (sem\n * ela no row model, a primeira), e receber o foco, pelo teclado ou pelo clique, torna esta a\n * ativa, marcada com `data-active`. ↑↓, Home, End, PageUp e PageDown movem o foco entre as\n * linhas, e o Espaço alterna a seleção, com Shift para o intervalo. Os atalhos são do app, no\n * `onKeyDown`, que roda antes: um `preventDefault()` cancela o da linha. Num campo de texto de\n * dentro, as setas ficam com o campo.\n \n O fundo fica na variável `--data-table-row-background`, que as células fixadas repetem: o\n * hover a troca para `gray-2`, a selecionada para `gray-3`, e as duas juntas, para `gray-4`. Para\n * colorir uma linha, troque a variável, e não use `bg-`, que deixaria as fixadas com a cor\n antiga. A cor do texto fica na linha, e as células herdam.\n \n @example\n * ```tsx\n * <DataTable.Row\n * row={row}\n * onClick={() => openCustomer(row.original)}\n * onKeyDown={(event) => {\n * if (event.key === 'Enter') {\n * openCustomer(row.original);\n * }\n * }}\n * className={\n * row.original.overdue\n * ? '[--data-table-row-background:var(--color-gray-2)] text-gray-11'\n * : undefined\n * }\n * >\n * {(cell) => <DataTable.Cell cell={cell} />}\n * </DataTable.Row>\n * ```\n /\nexport const DataTableRow = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: DataTableRowProps<TFeatures, TData>,\n) => {\n const { row, render, className, children, ...rest } = props;\n\n /\n As listas que o TanStack memoiza, numa tupla: o `shallow` compara item a item, e só\n * re-renderiza quando uma delas muda com as colunas. Todas seguem a ordem dos headers folha, que\n * é a do template, e as células caem nos tracks certos. Com pinning, as três regiões, que\n * ordenam as fixadas mesmo sem `columnVisibilityFeature`.\n /\n const cellGroups = useSelector(\n row.table.store,\n () =>\n hasRowFeature(row, 'columnPinningFeature')\n ? [\n row.getStartVisibleCells(),\n row.getCenterVisibleCells(),\n row.getEndVisibleCells(),\n ]\n : hasRowFeature(row, 'columnVisibilityFeature')\n ? [row.getVisibleCells()]\n : [row.getAllCells()],\n { compare: shallow },\n );\n\n const cells = cellGroups.flat();\n\n /\n Só re-renderiza quando esta linha é marcada ou desmarcada. A seleção é opcional, então assina\n * o store; sem `rowSelectionFeature`, nenhuma linha fica selecionada.\n /\n const isSelected = useSelector(\n row.table.store,\n () => hasRowFeature(row, 'rowSelectionFeature') && row.getIsSelected(),\n );\n\n /\n O ponto de Tab da tabela: a linha ativa ou, sem ela no row model, a primeira. Re-renderiza\n * quando o ponto de Tab entra ou sai daqui. A navegação é opcional, então assina o store; sem\n * `activeRowFeature`, nenhuma linha entra no Tab.\n /\n const isTabStop = useSelector(row.table.store, () => {\n if (!hasRowFeature(row, 'activeRowFeature')) {\n return false;\n }\n\n const activeRow = row.table.getActiveRow();\n\n return activeRow\n ? activeRow.id === row.id\n : row.table.getRowModel().rows[0]?.id === row.id;\n });\n\n /* Só re-renderiza quando esta linha vira ou deixa de ser a ativa. /\n const isActive = useSelector(\n row.table.store,\n () => hasRowFeature(row, 'activeRowFeature') && row.getIsActive(),\n );\n\n /* Receber o foco, nela ou num controle de dentro, torna esta a linha ativa. /\n const handleFocus = () => {\n if (hasRowFeature(row, 'activeRowFeature') && !row.getIsActive()) {\n row.table.setActiveRowId(row.id);\n }\n };\n\n /* As teclas da navegação. O `onKeyDown` do app roda antes e cancela com `preventDefault()`. /\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (!hasRowFeature(row, 'activeRowFeature') \|\| event.defaultPrevented) {\n return;\n }\n\n /* Na própria linha: num controle de dentro, como o checkbox, o Espaço é dele. /\n if (event.key === ' ' && event.target === event.currentTarget) {\n if (hasRowFeature(row, 'rowSelectionFeature') && row.getCanSelect()) {\n event.preventDefault();\n\n /* O handler do checkbox: lê o Shift do evento, para o intervalo, e move a âncora. /\n row.getToggleSelectedHandler()({\n target: { checked: !row.getIsSelected() },\n nativeEvent: event.nativeEvent,\n });\n }\n\n return;\n }\n\n const targetRow = getDataTableRowKeyTarget(event.currentTarget, event);\n\n if (targetRow) {\n event.preventDefault();\n focusDataTableRow(targetRow);\n }\n };\n\n const isNavigable = hasRowFeature(row, 'activeRowFeature');\n\n /* Com render-prop ou sem `children`, o laço é daqui; com nós comuns, de quem usa. */\n const content =\n typeof children === 'function' \|\| children === undefined\n ? cells.map((cell) => (\n <Fragment key={cell.id}>\n {children === undefined ? (\n <DataTableCell cell={cell} />\n ) : (\n children(cell)\n )}\n </Fragment>\n ))\n : children;\n\n const baseProps = {\n 'data-component': 'DataTable.Row',\n 'data-selected': isSelected ? '' : undefined,\n 'data-active': isActive ? '' : undefined,\n role: 'row',\n // Só no `grid`: o ARIA não define o atributo na linha de uma `table`, e o leitor o ignora.\n 'aria-selected':\n isNavigable && hasRowFeature(row, 'rowSelectionFeature')\n ? isSelected\n : undefined,\n tabIndex: isNavigable ? (isTabStop ? 0 : -1) : undefined,\n onFocus: handleFocus,\n onKeyDown: handleKeyDown,\n className: mergeTwClassNames(\n [\n // O anel de foco se posiciona por aqui.\n 'relative',\n\n dataTableGridClassNames,\n // Sem a linha horizontal na última: embaixo dela já vem a borda da área de rolagem, e as\n // duas somariam 2px.\n 'last:border-b-0',\n\n // O fundo numa variável, que as células fixadas repetem para ficarem opacas. A base é\n // branca no claro e quase preta no escuro, numa variável à parte: a variante `dark` e o\n // `hover` disputariam a mesma propriedade, e a ordem delas no CSS decidiria. O hover sobe\n // um passo, a selecionada outro, e a selecionada com hover mais um: sem isso, passar o\n // mouse por ela não mudaria nada. Escala curta, para o fundo dos botões `ghost` das\n // células (`gray-3`) aparecer sobre a linha em hover.\n '[--data-table-row-base:var(--color-white)]',\n 'dark:[--data-table-row-base:#0b0b0b]',\n '[--data-table-row-background:var(--data-table-row-base)]',\n 'hover:[--data-table-row-background:var(--color-gray-2)]',\n 'data-selected:[--data-table-row-background:var(--color-gray-3)]',\n 'data-selected:hover:[--data-table-row-background:var(--color-gray-4)]',\n // Com um menu aberto num controle da linha, ela fica como em hover, com o ponteiro onde\n // estiver: o backdrop do menu cobre o resto da linha e deixa um recorte só sobre o\n // gatilho, e o `:hover` acenderia e apagaria a linha conforme o ponteiro passa por ele.\n 'has-[[data-popup-open]]:[--data-table-row-background:var(--color-gray-2)]',\n 'data-selected:has-[[data-popup-open]]:[--data-table-row-background:var(--color-gray-4)]',\n 'bg-(--data-table-row-background)',\n\n 'text-gray-12',\n\n // O anel de foco, com o foco na linha ou num controle de dentro, pelo teclado ou pelo\n // clique: com `focus-visible`, o clique tornaria a linha ativa sem mostrar qual é. Num\n // `::after` por cima das células fixadas (`z-1`), que cobririam o `outline` e o\n // `box-shadow` da própria linha. Por dentro: a linha seguinte cobriria o que sai por baixo.\n 'outline-none',\n 'after:pointer-events-none',\n 'after:absolute',\n 'after:inset-0',\n 'after:z-2',\n 'after:content-[\"\"]',\n 'focus-within:after:outline-2',\n 'focus-within:after:-outline-offset-2',\n 'focus-within:after:outline-gray-12',\n ],\n className,\n ),\n children: content,\n };\n\n return useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n};\n\nDataTableRow.displayName = 'DataTable.Row';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA,MAAa,gBAIX,UACG;CACH,MAAM,EAAE,KAAK,QAAQ,WAAW,UAAU,GAAG,SAAS;CAuBtD,MAAM,QAfa,YACjB,IAAI,MAAM,aAER,cAAc,KAAK,sBAAsB,IACrC;EACE,IAAI,qBAAqB;EACzB,IAAI,sBAAsB;EAC1B,IAAI,mBAAmB;CACzB,IACA,cAAc,KAAK,yBAAyB,IAC1C,CAAC,IAAI,gBAAgB,CAAC,IACtB,CAAC,IAAI,YAAY,CAAC,GAC1B,EAAE,SAAS,QAAQ,CAGE,CAAC,CAAC,KAAK;;;;;CAM9B,MAAM,aAAa,YACjB,IAAI,MAAM,aACJ,cAAc,KAAK,qBAAqB,KAAK,IAAI,cAAc,CACvE;;;;;;CAOA,MAAM,YAAY,YAAY,IAAI,MAAM,aAAa;EACnD,IAAI,CAAC,cAAc,KAAK,kBAAkB,GACxC,OAAO;EAGT,MAAM,YAAY,IAAI,MAAM,aAAa;EAEzC,OAAO,YACH,UAAU,OAAO,IAAI,KACrB,IAAI,MAAM,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,IAAI;CAClD,CAAC;;CAGD,MAAM,WAAW,YACf,IAAI,MAAM,aACJ,cAAc,KAAK,kBAAkB,KAAK,IAAI,YAAY,CAClE;;CAGA,MAAM,oBAAoB;EACxB,IAAI,cAAc,KAAK,kBAAkB,KAAK,CAAC,IAAI,YAAY,GAC7D,IAAI,MAAM,eAAe,IAAI,EAAE;CAEnC;;CAGA,MAAM,iBAAiB,UAA+C;EACpE,IAAI,CAAC,cAAc,KAAK,kBAAkB,KAAK,MAAM,kBACnD;;EAIF,IAAI,MAAM,QAAQ,OAAO,MAAM,WAAW,MAAM,eAAe;GAC7D,IAAI,cAAc,KAAK,qBAAqB,KAAK,IAAI,aAAa,GAAG;IACnE,MAAM,eAAe;;IAGrB,IAAI,yBAAyB,CAAC,CAAC;KAC7B,QAAQ,EAAE,SAAS,CAAC,IAAI,cAAc,EAAE;KACxC,aAAa,MAAM;IACrB,CAAC;GACH;GAEA;EACF;EAEA,MAAM,YAAY,yBAAyB,MAAM,eAAe,KAAK;EAErE,IAAI,WAAW;GACb,MAAM,eAAe;GACrB,kBAAkB,SAAS;EAC7B;CACF;CAEA,MAAM,cAAc,cAAc,KAAK,kBAAkB;;CAGzD,MAAM,UACJ,OAAO,aAAa,cAAc,aAAa,KAAA,IAC3C,MAAM,KAAK,SACT,oBAACA,YAAD,EAAA,UACG,aAAa,KAAA,IACZ,oBAAC,eAAD,EAAqB,KAAO,CAAA,IAE5B,SAAS,IAAI,EAEP,GANK,KAAK,EAMV,CACX,IACD;CAEN,MAAM,YAAY;EAChB,kBAAkB;EAClB,iBAAiB,aAAa,KAAK,KAAA;EACnC,eAAe,WAAW,KAAK,KAAA;EAC/B,MAAM;EAEN,iBACE,eAAe,cAAc,KAAK,qBAAqB,IACnD,aACA,KAAA;EACN,UAAU,cAAe,YAAY,IAAI,KAAM,KAAA;EAC/C,SAAS;EACT,WAAW;EACX,WAAW,kBACT;GAEE;GAEA;GAGA;GAQA;GACA;GACA;GACA;GACA;GACA;GAIA;GACA;GACA;GAEA;GAMA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,UAAU;CACZ;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,aAAa,cAAc"}
1	+ {"version":3,"file":"data-table-row.js","names":["Fragment"],"sources":["../../../../src/components/data-table/body/data-table-row.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 { Cell, Row, RowData, TableFeatures } from '@tanstack/react-table';\nimport type React from 'react';\nimport { Fragment } from 'react';\nimport { hasRowFeature } from '../../../utils';\nimport { dataTableGridClassNames } from '../root/data-table-grid-class-names';\nimport { DataTableCell } from './data-table-cell';\nimport {\n focusDataTableRow,\n getDataTableRowKeyTarget,\n} from './data-table-row-focus';\n\nexport type DataTableRowProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n useRender.ComponentProps<'div'>,\n {\n /** A linha do row model. /\n row: Row<TFeatures, TData>;\n /\n Uma função que recebe cada célula visível e devolve o elemento dela. Com nós comuns, quem\n * usa faz o laço.\n * @default (cell) => <DataTable.Cell cell={cell} />\n /\n children?:\n \| React.ReactNode\n \| ((cell: Cell<TFeatures, TData>) => React.ReactNode);\n }\n>;\n\n/\n Uma linha do corpo (`role=\"row\"`). É um grid com as colunas do `--data-table-template`, que o\n * `DataTable.Root` escreve.\n \n Com render-prop ou sem `children`, faz o laço das células sozinha: assina as próprias células e\n * re-renderiza quando a ordem, a visibilidade ou o pinning das colunas mudam, que não mudam o row\n * model e não passam pelo `DataTable.Body`. Com `columnVisibilityFeature`, são as células\n * visíveis; sem ela, todas. Com `columnPinningFeature`, vêm na ordem das regiões: as fixadas no\n * início, as do centro e as fixadas no fim.\n \n Com `rowSelectionFeature`, a linha selecionada ganha `data-selected` e o fundo destacado, e com\n * `activeRowFeature`, também o `aria-selected`. O clique na linha não seleciona: o `onClick` fica\n * livre, e a seleção é do `DataTable.RowCheckbox` e do Espaço.\n \n Com `activeRowFeature`, entra na navegação por teclado. A linha ativa tem o ponto de Tab (sem\n * ela no row model, a primeira), e receber o foco, pelo teclado ou pelo clique, torna esta a\n * ativa, marcada com `data-active`. ↑↓, Home, End, PageUp e PageDown movem o foco entre as\n * linhas, e o Espaço alterna a seleção, com Shift para o intervalo. Os atalhos são do app, no\n * `onKeyDown`, que roda antes: um `preventDefault()` cancela o da linha. Num campo de texto de\n * dentro, as setas ficam com o campo.\n \n O fundo fica na variável `--data-table-row-background`, que as células fixadas repetem: o\n * hover a troca para `gray-2`, a selecionada para `gray-3`, e as duas juntas, para `gray-4`. Para\n * colorir uma linha, troque a variável, e não use `bg-`, que deixaria as fixadas com a cor\n antiga. A cor do texto fica na linha, e as células herdam.\n \n @example\n * ```tsx\n * <DataTable.Row\n * row={row}\n * onClick={() => openCustomer(row.original)}\n * onKeyDown={(event) => {\n * if (event.key === 'Enter') {\n * openCustomer(row.original);\n * }\n * }}\n * className={\n * row.original.overdue\n * ? '[--data-table-row-background:var(--color-gray-2)] text-gray-11'\n * : undefined\n * }\n * >\n * {(cell) => <DataTable.Cell cell={cell} />}\n * </DataTable.Row>\n * ```\n /\nexport const DataTableRow = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: DataTableRowProps<TFeatures, TData>,\n) => {\n const { row, render, className, children, ...rest } = props;\n\n /\n As listas que o TanStack memoiza, numa tupla: o `shallow` compara item a item, e só\n * re-renderiza quando uma delas muda com as colunas. Todas seguem a ordem dos headers folha, que\n * é a do template, e as células caem nos tracks certos. Com pinning, as três regiões, que\n * ordenam as fixadas mesmo sem `columnVisibilityFeature`.\n /\n const cellGroups = useSelector(\n row.table.store,\n () =>\n hasRowFeature(row, 'columnPinningFeature')\n ? [\n row.getStartVisibleCells(),\n row.getCenterVisibleCells(),\n row.getEndVisibleCells(),\n ]\n : hasRowFeature(row, 'columnVisibilityFeature')\n ? [row.getVisibleCells()]\n : [row.getAllCells()],\n { compare: shallow },\n );\n\n const cells = cellGroups.flat();\n\n /\n Só re-renderiza quando esta linha é marcada ou desmarcada. A seleção é opcional, então assina\n * o store; sem `rowSelectionFeature`, nenhuma linha fica selecionada.\n /\n const isSelected = useSelector(\n row.table.store,\n () => hasRowFeature(row, 'rowSelectionFeature') && row.getIsSelected(),\n );\n\n /\n O ponto de Tab da tabela: a linha ativa ou, sem ela no row model, a primeira. Re-renderiza\n * quando o ponto de Tab entra ou sai daqui. A navegação é opcional, então assina o store; sem\n * `activeRowFeature`, nenhuma linha entra no Tab.\n /\n const isTabStop = useSelector(row.table.store, () => {\n if (!hasRowFeature(row, 'activeRowFeature')) {\n return false;\n }\n\n const activeRow = row.table.getActiveRow();\n\n return activeRow\n ? activeRow.id === row.id\n : row.table.getRowModel().rows[0]?.id === row.id;\n });\n\n /* Só re-renderiza quando esta linha vira ou deixa de ser a ativa. /\n const isActive = useSelector(\n row.table.store,\n () => hasRowFeature(row, 'activeRowFeature') && row.getIsActive(),\n );\n\n /* Receber o foco, nela ou num controle de dentro, torna esta a linha ativa. /\n const handleFocus = () => {\n if (hasRowFeature(row, 'activeRowFeature') && !row.getIsActive()) {\n row.table.setActiveRowId(row.id);\n }\n };\n\n /* As teclas da navegação. O `onKeyDown` do app roda antes e cancela com `preventDefault()`. /\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (!hasRowFeature(row, 'activeRowFeature') \|\| event.defaultPrevented) {\n return;\n }\n\n /* Na própria linha: num controle de dentro, como o checkbox, o Espaço é dele. /\n if (event.key === ' ' && event.target === event.currentTarget) {\n if (hasRowFeature(row, 'rowSelectionFeature') && row.getCanSelect()) {\n event.preventDefault();\n\n /* O handler do checkbox: lê o Shift do evento, para o intervalo, e move a âncora. /\n row.getToggleSelectedHandler()({\n target: { checked: !row.getIsSelected() },\n nativeEvent: event.nativeEvent,\n });\n }\n\n return;\n }\n\n const targetRow = getDataTableRowKeyTarget(event.currentTarget, event);\n\n if (targetRow) {\n event.preventDefault();\n focusDataTableRow(targetRow);\n }\n };\n\n const isNavigable = hasRowFeature(row, 'activeRowFeature');\n\n /* Com render-prop ou sem `children`, o laço é daqui; com nós comuns, de quem usa. */\n const content =\n typeof children === 'function' \|\| children === undefined\n ? cells.map((cell) => (\n <Fragment key={cell.id}>\n {children === undefined ? (\n <DataTableCell cell={cell} />\n ) : (\n children(cell)\n )}\n </Fragment>\n ))\n : children;\n\n const baseProps = {\n 'data-component': 'DataTable.Row',\n 'data-selected': isSelected ? '' : undefined,\n 'data-active': isActive ? '' : undefined,\n role: 'row',\n // Só no `grid`: o ARIA não define o atributo na linha de uma `table`, e o leitor o ignora.\n 'aria-selected':\n isNavigable && hasRowFeature(row, 'rowSelectionFeature')\n ? isSelected\n : undefined,\n tabIndex: isNavigable ? (isTabStop ? 0 : -1) : undefined,\n onFocus: handleFocus,\n onKeyDown: handleKeyDown,\n className: mergeTwClassNames(\n [\n // O anel de foco se posiciona por aqui.\n 'relative',\n\n dataTableGridClassNames,\n // Sem a linha horizontal na última: embaixo dela já vem a borda da área de rolagem, e as\n // duas somariam 2px.\n 'last:border-b-0',\n\n // O fundo numa variável, que as células fixadas repetem para ficarem opacas. A base é\n // branca no claro e quase preta no escuro, numa variável à parte: a variante `dark` e o\n // `hover` disputariam a mesma propriedade, e a ordem delas no CSS decidiria. O hover sobe\n // um passo, a selecionada outro, e a selecionada com hover mais um: sem isso, passar o\n // mouse por ela não mudaria nada. Escala curta, para o fundo dos botões `ghost` das\n // células (`gray-3`) aparecer sobre a linha em hover.\n '[--data-table-row-base:var(--color-white)]',\n 'dark:[--data-table-row-base:#0b0b0b]',\n '[--data-table-row-background:var(--data-table-row-base)]',\n 'hover:[--data-table-row-background:var(--color-gray-2)]',\n 'data-selected:[--data-table-row-background:var(--color-gray-3)]',\n 'data-selected:hover:[--data-table-row-background:var(--color-gray-4)]',\n // Com um menu aberto num controle da linha, ela fica como em hover, com o ponteiro onde\n // estiver: o backdrop do menu cobre o resto da linha e deixa um recorte só sobre o\n // gatilho, e o `:hover` acenderia e apagaria a linha conforme o ponteiro passa por ele.\n 'has-[[data-popup-open]]:[--data-table-row-background:var(--color-gray-2)]',\n 'data-selected:has-[[data-popup-open]]:[--data-table-row-background:var(--color-gray-4)]',\n 'bg-(--data-table-row-background)',\n\n 'text-gray-12',\n\n // O anel de foco, com o foco na linha ou num controle de dentro, pelo teclado ou pelo\n // clique: com `focus-visible`, o clique tornaria a linha ativa sem mostrar qual é. Num\n // `::after` por cima das células fixadas (`z-1`), que cobririam o `outline` e o\n // `box-shadow` da própria linha. Por dentro: a linha seguinte cobriria o que sai por baixo.\n 'outline-none',\n 'after:pointer-events-none',\n 'after:absolute',\n 'after:inset-0',\n 'after:z-2',\n 'after:content-[\"\"]',\n 'focus-within:after:outline-2',\n 'focus-within:after:-outline-offset-2',\n 'focus-within:after:outline-gray-12',\n ],\n className,\n ),\n children: content,\n };\n\n return useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n};\n\nDataTableRow.displayName = 'DataTable.Row';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA,MAAa,gBAIX,UACG;CACH,MAAM,EAAE,KAAK,QAAQ,WAAW,UAAU,GAAG,SAAS;CAuBtD,MAAM,QAfa,YACjB,IAAI,MAAM,aAER,cAAc,KAAK,sBAAsB,IACrC;EACE,IAAI,qBAAqB;EACzB,IAAI,sBAAsB;EAC1B,IAAI,mBAAmB;CACzB,IACA,cAAc,KAAK,yBAAyB,IAC1C,CAAC,IAAI,gBAAgB,CAAC,IACtB,CAAC,IAAI,YAAY,CAAC,GAC1B,EAAE,SAAS,QAAQ,CAGE,CAAC,CAAC,KAAK;;;;;CAM9B,MAAM,aAAa,YACjB,IAAI,MAAM,aACJ,cAAc,KAAK,qBAAqB,KAAK,IAAI,cAAc,CACvE;;;;;;CAOA,MAAM,YAAY,YAAY,IAAI,MAAM,aAAa;EACnD,IAAI,CAAC,cAAc,KAAK,kBAAkB,GACxC,OAAO;EAGT,MAAM,YAAY,IAAI,MAAM,aAAa;EAEzC,OAAO,YACH,UAAU,OAAO,IAAI,KACrB,IAAI,MAAM,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,IAAI;CAClD,CAAC;;CAGD,MAAM,WAAW,YACf,IAAI,MAAM,aACJ,cAAc,KAAK,kBAAkB,KAAK,IAAI,YAAY,CAClE;;CAGA,MAAM,oBAAoB;EACxB,IAAI,cAAc,KAAK,kBAAkB,KAAK,CAAC,IAAI,YAAY,GAC7D,IAAI,MAAM,eAAe,IAAI,EAAE;CAEnC;;CAGA,MAAM,iBAAiB,UAA+C;EACpE,IAAI,CAAC,cAAc,KAAK,kBAAkB,KAAK,MAAM,kBACnD;;EAIF,IAAI,MAAM,QAAQ,OAAO,MAAM,WAAW,MAAM,eAAe;GAC7D,IAAI,cAAc,KAAK,qBAAqB,KAAK,IAAI,aAAa,GAAG;IACnE,MAAM,eAAe;;IAGrB,IAAI,yBAAyB,CAAC,CAAC;KAC7B,QAAQ,EAAE,SAAS,CAAC,IAAI,cAAc,EAAE;KACxC,aAAa,MAAM;IACrB,CAAC;GACH;GAEA;EACF;EAEA,MAAM,YAAY,yBAAyB,MAAM,eAAe,KAAK;EAErE,IAAI,WAAW;GACb,MAAM,eAAe;GACrB,kBAAkB,SAAS;EAC7B;CACF;CAEA,MAAM,cAAc,cAAc,KAAK,kBAAkB;;CAGzD,MAAM,UACJ,OAAO,aAAa,cAAc,aAAa,KAAA,IAC3C,MAAM,KAAK,SACT,oBAACA,YAAD,EAAA,UACG,aAAa,KAAA,IACZ,oBAAC,eAAD,EAAqB,KAAO,CAAA,IAE5B,SAAS,IAAI,EAEP,GANK,KAAK,EAMV,CACX,IACD;CAEN,MAAM,YAAY;EAChB,kBAAkB;EAClB,iBAAiB,aAAa,KAAK,KAAA;EACnC,eAAe,WAAW,KAAK,KAAA;EAC/B,MAAM;EAEN,iBACE,eAAe,cAAc,KAAK,qBAAqB,IACnD,aACA,KAAA;EACN,UAAU,cAAe,YAAY,IAAI,KAAM,KAAA;EAC/C,SAAS;EACT,WAAW;EACX,WAAW,kBACT;GAEE;GAEA;GAGA;GAQA;GACA;GACA;GACA;GACA;GACA;GAIA;GACA;GACA;GAEA;GAMA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,UAAU;CACZ;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,aAAa,cAAc"}

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

@@ -1,6 +1,6 @@
 import { Header, 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/header/data-table-header-cell.d.ts
 export type DataTableHeaderCellProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'div'>, {
   /** O header da coluna. */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table-header-cell.js","names":[],"sources":["../../../../src/components/data-table/header/data-table-header-cell.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 { Header, RowData, TableFeatures } from '@tanstack/react-table';\nimport { hasColumnFeature, hasHeaderFeature } from '../../../utils';\nimport {\n getDataTableColumnPinning,\n getDataTablePinnedStyle,\n} from '../root/get-data-table-column-pinning';\nimport { DataTableHeaderContent } from './data-table-header-content';\n\nexport type DataTableHeaderCellProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n useRender.ComponentProps<'div'>,\n {\n /** O header da coluna. /\n header: Header<TFeatures, TData>;\n }\n>;\n\n/\n A célula de um header (`role=\"columnheader\"`). Num header de grupo, ocupa as colunas que o\n * grupo abrange; num placeholder, fica vazia e marcada com `data-placeholder`.\n \n Com `rowSortingFeature`, marca a direção da ordenação em `aria-sort` e `data-sorted`. Com\n * `columnAlignmentFeature`, alinha o conteúdo pelo `align` da coluna e o marca em `data-align`.\n * Com `columnPinningFeature`, num header fixado, gruda na borda do lado dele, marcado com\n * `data-pinned`.\n \n Sem `children`, mostra o `DataTable.HeaderContent`. Com eles, monte o conteúdo, o\n * `DataTable.HeaderContent` incluso, e o `DataTable.ResizeHandle`, que se ancora na borda daqui.\n \n @example\n * ```tsx\n * <DataTable.HeaderCell header={header}>\n * <DataTable.HeaderContent header={header} />\n * <DataTable.ResizeHandle header={header} />\n * </DataTable.HeaderCell>\n * ```\n /\nexport const DataTableHeaderCell = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: DataTableHeaderCellProps<TFeatures, TData>,\n) => {\n const { header, render, className, children, ...rest } = props;\n\n /\n Só re-renderiza quando a ordenação desta coluna muda. A ordenação é opcional, então assina o\n * store, e o guard estreita o header; sem `rowSortingFeature`, fica `false`.\n /\n const sorted = useSelector(header.column.table.store, () =>\n hasHeaderFeature(header, 'rowSortingFeature')\n ? header.column.getIsSorted()\n : false,\n );\n\n /\n Sem assinatura: o alinhamento vem da definição da coluna, que não muda em runtime. Num grupo,\n * é o da definição do grupo.\n /\n const align = hasColumnFeature(header.column, 'columnAlignmentFeature')\n ? header.column.getAlign()\n : undefined;\n\n /\n A fixação vem da coluna folha da ponta: a primeira, no início, e a última, no fim, com o\n * deslocamento dela. Num grupo, o `getIsPinned()` diz fixado se qualquer folha for, e só a folha\n * da ponta sabe o lado e o lugar. Sem assinatura: o pinning muda os grupos, e o\n * `DataTable.Header` re-renderiza, com o header junto.\n /\n const leafHeaders = header\n .getLeafHeaders()\n .filter((leafHeader) => leafHeader.subHeaders.length === 0);\n const startPinning = getDataTableColumnPinning(\n (leafHeaders.at(0) ?? header).column,\n );\n const pinning =\n startPinning.position === 'start'\n ? startPinning\n : getDataTableColumnPinning((leafHeaders.at(-1) ?? header).column);\n\n const isGroup = header.colSpan > 1;\n\n const baseProps = {\n 'data-component': 'DataTable.HeaderCell',\n 'data-placeholder': header.isPlaceholder ? '' : undefined,\n 'data-sorted': sorted \|\| undefined,\n 'data-align': align,\n 'data-pinned': pinning.position \|\| undefined,\n role: 'columnheader',\n 'aria-sort':\n sorted === 'asc'\n ? 'ascending'\n : sorted === 'desc'\n ? 'descending'\n : undefined,\n 'aria-colspan': isGroup ? header.colSpan : undefined,\n style: {\n // Os tracks do grid são os das colunas folha: o grupo abrange os das colunas dele.\n gridColumn: isGroup ? `span ${header.colSpan}` : undefined,\n ...getDataTablePinnedStyle(pinning),\n },\n className: mergeTwClassNames(\n [\n // O `DataTable.ResizeHandle` se posiciona por aqui.\n 'relative',\n\n 'flex',\n 'items-center',\n 'gap-1',\n // Vale para o conteúdo solto. O `DataTable.HeaderButton` ocupa a célula e segue o\n // `data-align` daqui por conta própria.\n 'data-[align=center]:justify-center',\n 'data-[align=end]:justify-end',\n\n // Item de grid tem `min-width: auto`: sem isto, um conteúdo longo alarga o track, e a\n // coluna deixa de bater com o template. Sem `overflow-hidden`: quem trunca é o\n // `DataTable.HeaderContent`, e o recorte aqui cortaria a área de agarre do handle.\n 'min-w-0',\n\n // Do `DataTable.Root`, pela densidade.\n 'h-(--data-table-header-height)',\n\n 'px-(--data-table-cell-padding)',\n\n // Fixado: gruda acima dos handles de resize das colunas do centro (`z-10`), que passam por\n // baixo dele.\n 'data-pinned:sticky',\n 'data-pinned:z-20',\n // A sombra na borda da fixada, como na `DataTable.Cell`.\n 'data-[pinned=start]:has-[+:not([data-pinned=start])]:shadow-[6px_0_8px_-6px_rgb(0_0_0/0.12)]',\n 'dark:data-[pinned=start]:has-[+:not([data-pinned=start])]:shadow-[6px_0_8px_-6px_rgb(0_0_0/0.8)]',\n 'data-[pinned=end]:not-[[data-pinned=end]+]:shadow-[-6px_0_8px_-6px_rgb(0_0_0/0.12)]',\n 'dark:data-[pinned=end]:not-[[data-pinned=end]+*]:shadow-[-6px_0_8px_-6px_rgb(0_0_0/0.8)]',\n\n // Opaco: o cabeçalho gruda, e as linhas passam por baixo; fixado, o centro também.\n 'bg-gray-2',\n\n 'text-xs',\n 'font-medium',\n 'text-gray-11',\n ],\n className,\n ),\n children:\n children === undefined ? (\n <DataTableHeaderContent header={header} />\n ) : (\n children\n ),\n };\n\n return useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n};\n\nDataTableHeaderCell.displayName = 'DataTable.HeaderCell';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,uBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,WAAW,UAAU,GAAG,SAAS;;;;;CAMzD,MAAM,SAAS,YAAY,OAAO,OAAO,MAAM,aAC7C,iBAAiB,QAAQ,mBAAmB,IACxC,OAAO,OAAO,YAAY,IAC1B,KACN;;;;;CAMA,MAAM,QAAQ,iBAAiB,OAAO,QAAQ,wBAAwB,IAClE,OAAO,OAAO,SAAS,IACvB,KAAA;;;;;;;CAQJ,MAAM,cAAc,OACjB,eAAe,CAAC,CAChB,QAAQ,eAAe,WAAW,WAAW,WAAW,CAAC;CAC5D,MAAM,eAAe,2BAClB,YAAY,GAAG,CAAC,KAAK,OAAA,CAAQ,MAChC;CACA,MAAM,UACJ,aAAa,aAAa,UACtB,eACA,2BAA2B,YAAY,GAAG,EAAE,KAAK,OAAA,CAAQ,MAAM;CAErE,MAAM,UAAU,OAAO,UAAU;CAEjC,MAAM,YAAY;EAChB,kBAAkB;EAClB,oBAAoB,OAAO,gBAAgB,KAAK,KAAA;EAChD,eAAe,UAAU,KAAA;EACzB,cAAc;EACd,eAAe,QAAQ,YAAY,KAAA;EACnC,MAAM;EACN,aACE,WAAW,QACP,cACA,WAAW,SACT,eACA,KAAA;EACR,gBAAgB,UAAU,OAAO,UAAU,KAAA;EAC3C,OAAO;GAEL,YAAY,UAAU,QAAQ,OAAO,YAAY,KAAA;GACjD,GAAG,wBAAwB,OAAO;EACpC;EACA,WAAW,kBACT;GAEE;GAEA;GACA;GACA;GAGA;GACA;GAKA;GAGA;GAEA;GAIA;GACA;GAEA;GACA;GACA;GACA;GAGA;GAEA;GACA;GACA;EACF,GACA,SACF;EACA,UACE,aAAa,KAAA,IACX,oBAAC,wBAAD,EAAgC,OAAS,CAAA,IAEzC;CAEN;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,oBAAoB,cAAc"}
1	+ {"version":3,"file":"data-table-header-cell.js","names":[],"sources":["../../../../src/components/data-table/header/data-table-header-cell.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 { Header, RowData, TableFeatures } from '@tanstack/react-table';\nimport { hasColumnFeature, hasHeaderFeature } from '../../../utils';\nimport {\n getDataTableColumnPinning,\n getDataTablePinnedStyle,\n} from '../root/get-data-table-column-pinning';\nimport { DataTableHeaderContent } from './data-table-header-content';\n\nexport type DataTableHeaderCellProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = MergeOverride<\n useRender.ComponentProps<'div'>,\n {\n /** O header da coluna. /\n header: Header<TFeatures, TData>;\n }\n>;\n\n/\n A célula de um header (`role=\"columnheader\"`). Num header de grupo, ocupa as colunas que o\n * grupo abrange; num placeholder, fica vazia e marcada com `data-placeholder`.\n \n Com `rowSortingFeature`, marca a direção da ordenação em `aria-sort` e `data-sorted`. Com\n * `columnAlignmentFeature`, alinha o conteúdo pelo `align` da coluna e o marca em `data-align`.\n * Com `columnPinningFeature`, num header fixado, gruda na borda do lado dele, marcado com\n * `data-pinned`.\n \n Sem `children`, mostra o `DataTable.HeaderContent`. Com eles, monte o conteúdo, o\n * `DataTable.HeaderContent` incluso, e o `DataTable.ResizeHandle`, que se ancora na borda daqui.\n \n @example\n * ```tsx\n * <DataTable.HeaderCell header={header}>\n * <DataTable.HeaderContent header={header} />\n * <DataTable.ResizeHandle header={header} />\n * </DataTable.HeaderCell>\n * ```\n /\nexport const DataTableHeaderCell = <\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(\n props: DataTableHeaderCellProps<TFeatures, TData>,\n) => {\n const { header, render, className, children, ...rest } = props;\n\n /\n Só re-renderiza quando a ordenação desta coluna muda. A ordenação é opcional, então assina o\n * store, e o guard estreita o header; sem `rowSortingFeature`, fica `false`.\n /\n const sorted = useSelector(header.column.table.store, () =>\n hasHeaderFeature(header, 'rowSortingFeature')\n ? header.column.getIsSorted()\n : false,\n );\n\n /\n Sem assinatura: o alinhamento vem da definição da coluna, que não muda em runtime. Num grupo,\n * é o da definição do grupo.\n /\n const align = hasColumnFeature(header.column, 'columnAlignmentFeature')\n ? header.column.getAlign()\n : undefined;\n\n /\n A fixação vem da coluna folha da ponta: a primeira, no início, e a última, no fim, com o\n * deslocamento dela. Num grupo, o `getIsPinned()` diz fixado se qualquer folha for, e só a folha\n * da ponta sabe o lado e o lugar. Sem assinatura: o pinning muda os grupos, e o\n * `DataTable.Header` re-renderiza, com o header junto.\n /\n const leafHeaders = header\n .getLeafHeaders()\n .filter((leafHeader) => leafHeader.subHeaders.length === 0);\n const startPinning = getDataTableColumnPinning(\n (leafHeaders.at(0) ?? header).column,\n );\n const pinning =\n startPinning.position === 'start'\n ? startPinning\n : getDataTableColumnPinning((leafHeaders.at(-1) ?? header).column);\n\n const isGroup = header.colSpan > 1;\n\n const baseProps = {\n 'data-component': 'DataTable.HeaderCell',\n 'data-placeholder': header.isPlaceholder ? '' : undefined,\n 'data-sorted': sorted \|\| undefined,\n 'data-align': align,\n 'data-pinned': pinning.position \|\| undefined,\n role: 'columnheader',\n 'aria-sort':\n sorted === 'asc'\n ? 'ascending'\n : sorted === 'desc'\n ? 'descending'\n : undefined,\n 'aria-colspan': isGroup ? header.colSpan : undefined,\n style: {\n // Os tracks do grid são os das colunas folha: o grupo abrange os das colunas dele.\n gridColumn: isGroup ? `span ${header.colSpan}` : undefined,\n ...getDataTablePinnedStyle(pinning),\n },\n className: mergeTwClassNames(\n [\n // O `DataTable.ResizeHandle` se posiciona por aqui.\n 'relative',\n\n 'flex',\n 'items-center',\n 'gap-1',\n // Vale para o conteúdo solto. O `DataTable.HeaderButton` ocupa a célula e segue o\n // `data-align` daqui por conta própria.\n 'data-[align=center]:justify-center',\n 'data-[align=end]:justify-end',\n\n // Item de grid tem `min-width: auto`: sem isto, um conteúdo longo alarga o track, e a\n // coluna deixa de bater com o template. Sem `overflow-hidden`: quem trunca é o\n // `DataTable.HeaderContent`, e o recorte aqui cortaria a área de agarre do handle.\n 'min-w-0',\n\n // Do `DataTable.Root`, pela densidade.\n 'h-(--data-table-header-height)',\n\n 'px-(--data-table-cell-padding)',\n\n // Fixado: gruda acima dos handles de resize das colunas do centro (`z-10`), que passam por\n // baixo dele.\n 'data-pinned:sticky',\n 'data-pinned:z-20',\n // A sombra na borda da fixada, como na `DataTable.Cell`.\n 'data-[pinned=start]:has-[+:not([data-pinned=start])]:shadow-[6px_0_8px_-6px_rgb(0_0_0/0.12)]',\n 'dark:data-[pinned=start]:has-[+:not([data-pinned=start])]:shadow-[6px_0_8px_-6px_rgb(0_0_0/0.8)]',\n 'data-[pinned=end]:not-[[data-pinned=end]+]:shadow-[-6px_0_8px_-6px_rgb(0_0_0/0.12)]',\n 'dark:data-[pinned=end]:not-[[data-pinned=end]+*]:shadow-[-6px_0_8px_-6px_rgb(0_0_0/0.8)]',\n\n // Opaco: o cabeçalho gruda, e as linhas passam por baixo; fixado, o centro também.\n 'bg-gray-2',\n\n 'text-xs',\n 'font-medium',\n 'text-gray-11',\n ],\n className,\n ),\n children:\n children === undefined ? (\n <DataTableHeaderContent header={header} />\n ) : (\n children\n ),\n };\n\n return useRender({\n render,\n defaultTagName: 'div',\n props: mergeProps(baseProps, rest),\n });\n};\n\nDataTableHeaderCell.displayName = 'DataTable.HeaderCell';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,uBAIX,UACG;CACH,MAAM,EAAE,QAAQ,QAAQ,WAAW,UAAU,GAAG,SAAS;;;;;CAMzD,MAAM,SAAS,YAAY,OAAO,OAAO,MAAM,aAC7C,iBAAiB,QAAQ,mBAAmB,IACxC,OAAO,OAAO,YAAY,IAC1B,KACN;;;;;CAMA,MAAM,QAAQ,iBAAiB,OAAO,QAAQ,wBAAwB,IAClE,OAAO,OAAO,SAAS,IACvB,KAAA;;;;;;;CAQJ,MAAM,cAAc,OACjB,eAAe,CAAC,CAChB,QAAQ,eAAe,WAAW,WAAW,WAAW,CAAC;CAC5D,MAAM,eAAe,2BAClB,YAAY,GAAG,CAAC,KAAK,OAAA,CAAQ,MAChC;CACA,MAAM,UACJ,aAAa,aAAa,UACtB,eACA,2BAA2B,YAAY,GAAG,EAAE,KAAK,OAAA,CAAQ,MAAM;CAErE,MAAM,UAAU,OAAO,UAAU;CAEjC,MAAM,YAAY;EAChB,kBAAkB;EAClB,oBAAoB,OAAO,gBAAgB,KAAK,KAAA;EAChD,eAAe,UAAU,KAAA;EACzB,cAAc;EACd,eAAe,QAAQ,YAAY,KAAA;EACnC,MAAM;EACN,aACE,WAAW,QACP,cACA,WAAW,SACT,eACA,KAAA;EACR,gBAAgB,UAAU,OAAO,UAAU,KAAA;EAC3C,OAAO;GAEL,YAAY,UAAU,QAAQ,OAAO,YAAY,KAAA;GACjD,GAAG,wBAAwB,OAAO;EACpC;EACA,WAAW,kBACT;GAEE;GAEA;GACA;GACA;GAGA;GACA;GAKA;GAGA;GAEA;GAIA;GACA;GAEA;GACA;GACA;GACA;GAGA;GAEA;GACA;GACA;EACF,GACA,SACF;EACA,UACE,aAAa,KAAA,IACX,oBAAC,wBAAD,EAAgC,OAAS,CAAA,IAEzC;CAEN;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,oBAAoB,cAAc"}