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

@lucasbernardosn/react-table 0.2.0 → 0.3.0

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

Files changed (161) hide show

package/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-check.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { Icon } from "@lucasbernardosn/react-ui/display/icon";
-import { CheckIcon } from "@phosphor-icons/react";
 import { jsx } from "react/jsx-runtime";
+import { CheckIcon } from "@phosphor-icons/react";
+import { Icon } from "@lucasbernardosn/react-ui/display/icon";
 //#region src/components/column-menu/column-menu-check.tsx
 /**
 * O check do estado atual num item do menu da coluna, encostado à direita. Decorativo, como todo

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 CHANGED Viewed

@@ -1,8 +1,8 @@
 import { COLUMN_MENU_DEFAULT_LABELS } from "./column-menu-labels.js";
-import { Icon } from "@lucasbernardosn/react-ui/display/icon";
-import { EyeSlashIcon } from "@phosphor-icons/react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { EyeSlashIcon } from "@phosphor-icons/react";
+import { Icon } from "@lucasbernardosn/react-ui/display/icon";
 import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
 //#region src/components/column-menu/column-menu-hide-item.tsx
 /**

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 CHANGED Viewed

@@ -1,10 +1,10 @@
 import { ColumnMenuCheck } from "./column-menu-check.js";
 import { COLUMN_MENU_DEFAULT_LABELS } from "./column-menu-labels.js";
-import { Icon } from "@lucasbernardosn/react-ui/display/icon";
-import { PushPinIcon, PushPinSlashIcon } from "@phosphor-icons/react";
+import { useSelector } from "@tanstack/react-store";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { PushPinIcon, PushPinSlashIcon } from "@phosphor-icons/react";
+import { Icon } from "@lucasbernardosn/react-ui/display/icon";
 import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
-import { useSelector } from "@tanstack/react-store";
 //#region src/components/column-menu/column-menu-pin-items.tsx
 /**
 * Os itens da fixação: no início e no fim, com um check no lado atual, e "Desafixar" com a coluna

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 CHANGED Viewed

@@ -2,10 +2,10 @@ import { hasColumnFeature } from "../../utils/has-feature.js";
 import { ColumnMenuHideItem } from "./column-menu-hide-item.js";
 import { ColumnMenuPinItems } from "./column-menu-pin-items.js";
 import { ColumnMenuSortItems } from "./column-menu-sort-items.js";
+import { mergeStateClassNames } from "@lucasbernardosn/react-ui/utils";
+import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
-import { mergeStateClassNames } from "@lucasbernardosn/react-ui/utils";
-import { Fragment as Fragment$1 } from "react";
 //#region src/components/column-menu/column-menu-popup.tsx
 /**
 * A caixa do menu da coluna, já com o `Menu.Portal` e o `Menu.Positioner`. As props passam para o
@@ -56,7 +56,7 @@ const ColumnMenuPopup = (props) => {
 			"data-component": "ColumnMenu.Popup",
 			className: mergeStateClassNames(["min-w-48"], className),
 			...rest,
-			children: children ?? groups.map((group, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [index > 0 && /* @__PURE__ */ jsx(Menu.Separator, {}), group] }, group.key))
+			children: children ?? groups.map((group, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 && /* @__PURE__ */ jsx(Menu.Separator, {}), group] }, group.key))
 		})
 	}) });
 };

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":[],"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,qBAAC,UAAD,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

@@ -2,9 +2,9 @@ import { ColumnWith } from "../../types/table-with.js";
 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 React from "react";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
+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 CHANGED Viewed

@@ -1,10 +1,10 @@
 import { ColumnMenuCheck } from "./column-menu-check.js";
 import { COLUMN_MENU_DEFAULT_LABELS } from "./column-menu-labels.js";
-import { Icon } from "@lucasbernardosn/react-ui/display/icon";
-import { CaretDownIcon, CaretUpIcon, XIcon } from "@phosphor-icons/react";
+import { useSelector } from "@tanstack/react-store";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { CaretDownIcon, CaretUpIcon, XIcon } from "@phosphor-icons/react";
+import { Icon } from "@lucasbernardosn/react-ui/display/icon";
 import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
-import { useSelector } from "@tanstack/react-store";
 //#region src/components/column-menu/column-menu-sort-items.tsx
 /**
 * Os itens da ordenação: crescente e decrescente, com um check na direção atual, e "Remover

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 CHANGED Viewed

@@ -1,10 +1,10 @@
 import { hasHeaderFeature } from "../../utils/has-feature.js";
 import { DataTableHeaderButton } from "../data-table/header/data-table-header-button.js";
-import { jsx } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react";
-import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
-import { useSelector } from "@tanstack/react-store";
 import { mergeStateClassNames } from "@lucasbernardosn/react-ui/utils";
+import { useSelector } from "@tanstack/react-store";
+import { jsx } from "react/jsx-runtime";
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
 //#region src/components/column-menu/column-menu-trigger.tsx
 /**
 * O botão que abre o menu da coluna: o `DataTable.HeaderButton`, do tamanho da célula do header,

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 CHANGED Viewed

@@ -1,15 +1,15 @@
 import { getDefaultColumnLabel } from "../../utils/get-default-column-label.js";
 import { hasColumnFeature } from "../../utils/has-feature.js";
 import { ColumnMenuPinItems } from "../column-menu/column-menu-pin-items.js";
-import { ListIcon, PushPinIcon } from "@phosphor-icons/react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps, useRender } from "@base-ui/react";
-import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
-import { useSelector } from "@tanstack/react-store";
 import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
-import { useSortable } from "@dnd-kit/react/sortable";
+import { useSelector } from "@tanstack/react-store";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ListIcon, PushPinIcon } from "@phosphor-icons/react";
 import { IconButton } from "@lucasbernardosn/react-ui/buttons/icon-button";
 import { Checkbox } from "@lucasbernardosn/react-ui/fields/checkbox";
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
+import { useSortable } from "@dnd-kit/react/sortable";
 //#region src/components/columns-panel/columns-panel-item.tsx
 /**
 * Uma coluna no `ColumnsPanel.Root`: o checkbox de visibilidade, o nome e, à direita, a alça de

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 CHANGED Viewed

@@ -1,11 +1,11 @@
 import { hasColumnFeature, hasTableFeature } from "../../utils/has-feature.js";
 import { ColumnsPanelItem } from "./columns-panel-item.js";
 import { getColumnsPanelColumnOrder } from "./get-columns-panel-column-order.js";
-import { jsx } from "react/jsx-runtime";
 import { mergeProps, useRender } from "@base-ui/react";
-import { shallow, useSelector } from "@tanstack/react-store";
 import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
-import { Fragment as Fragment$1, useMemo, useRef } from "react";
+import { shallow, useSelector } from "@tanstack/react-store";
+import { Fragment, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
 import { isSortable } from "@dnd-kit/react/sortable";
 import { RestrictToVerticalAxis } from "@dnd-kit/abstract/modifiers";
 import { RestrictToElement } from "@dnd-kit/dom/modifiers";
@@ -102,7 +102,7 @@ const ColumnsPanelRoot = (props) => {
 			"gap-0.5",
 			GROUP_CLASS_NAMES[groupIndex]
 		]),
-		children: columns.map((column, index) => /* @__PURE__ */ jsx(Fragment$1, { children: children === void 0 ? hasColumnFeature(column, "columnVisibilityFeature") && /* @__PURE__ */ jsx(ColumnsPanelItem, {
+		children: columns.map((column, index) => /* @__PURE__ */ jsx(Fragment, { children: children === void 0 ? hasColumnFeature(column, "columnVisibilityFeature") && /* @__PURE__ */ jsx(ColumnsPanelItem, {
 			column,
 			index
 		}) : children(column, index) }, column.id))

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":[],"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,oBAAC,UAAD,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 CHANGED Viewed

@@ -5,12 +5,12 @@ import { useDataTablePageScrollReset } from "../pagination/use-data-table-page-s
 import { dataTableGridClassNames } from "../root/data-table-grid-class-names.js";
 import { DataTableRow } from "./data-table-row.js";
 import { useDataTableRowFocusRecovery } from "./use-data-table-row-focus-recovery.js";
-import { jsx } from "react/jsx-runtime";
 import { mergeProps, useRender } from "@base-ui/react";
-import { useSelector } from "@tanstack/react-store";
-import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
-import { Fragment as Fragment$1 } from "react";
 import { Skeleton } from "@lucasbernardosn/react-ui/feedback/skeleton";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+import { useSelector } from "@tanstack/react-store";
+import { Fragment } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/data-table/body/data-table-body.tsx
 /**
 * O corpo da tabela (`role="rowgroup"`).
@@ -63,7 +63,7 @@ const DataTableBody = (props) => {
 		return hasTableFeature(table, "columnVisibilityFeature") ? table.getVisibleLeafColumns().length : table.getAllLeafColumns().length;
 	});
 	/** Com render-prop ou sem `children`, o laço é daqui; com nós comuns, de quem usa. */
-	const content = typeof children === "function" || children === void 0 ? rows.map((row) => /* @__PURE__ */ jsx(Fragment$1, { children: children === void 0 ? /* @__PURE__ */ jsx(DataTableRow, { row }) : children(row) }, row.id)) : children;
+	const content = typeof children === "function" || children === void 0 ? rows.map((row) => /* @__PURE__ */ jsx(Fragment, { children: children === void 0 ? /* @__PURE__ */ jsx(DataTableRow, { row }) : children(row) }, row.id)) : children;
 	/**
 	* Fora da árvore de acessibilidade, que já sabe da espera pelo `aria-busy` do `DataTable.Root`.
 	* A grade é a da `DataTable.Row`, e o espaçamento repete o da `DataTable.Cell`.

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":[],"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,oBAAC,UAAD,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 CHANGED Viewed

@@ -1,9 +1,9 @@
 import { hasColumnFeature, hasTableFeature } from "../../../utils/has-feature.js";
 import { getDataTableColumnPinning, getDataTablePinnedStyle } from "../root/get-data-table-column-pinning.js";
 import { FlexRender } from "@tanstack/react-table";
-import { jsx } from "react/jsx-runtime";
 import { mergeProps, useRender } from "@base-ui/react";
 import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/data-table/body/data-table-cell.tsx
 /**
 * Uma célula do corpo (`role="cell"`). Sem `children`, mostra o `cell` da definição da coluna;