@lucasbernardosn/react-table 0.3.0 → 0.5.0

package/dist/components/column-menu/column-menu-check.js

@@ -1,6 +1,6 @@
-import { jsx } from "react/jsx-runtime";
-import { CheckIcon } from "@phosphor-icons/react";
 import { Icon } from "@lucasbernardosn/react-ui/display/icon";
+import { CheckIcon } from "@phosphor-icons/react";
+import { jsx } from "react/jsx-runtime";
 //#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.js

@@ -1,8 +1,8 @@
 import { COLUMN_MENU_DEFAULT_LABELS } from "./column-menu-labels.js";
-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 { EyeSlashIcon } from "@phosphor-icons/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react";
 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-pin-items.js

@@ -1,10 +1,10 @@
 import { ColumnMenuCheck } from "./column-menu-check.js";
 import { COLUMN_MENU_DEFAULT_LABELS } from "./column-menu-labels.js";
-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 { PushPinIcon, PushPinSlashIcon } from "@phosphor-icons/react";
+import { jsx, jsxs } from "react/jsx-runtime";
 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-popup.d.ts

@@ -13,8 +13,9 @@ export type ColumnMenuPopupProps<TFeatures extends TableFeatures, TData extends
 }>;
 /**
  * A caixa do menu da coluna, já com o `Menu.Portal` e o `Menu.Positioner`. As props passam para o
- * `Menu.Popup`. Abre encostada no header, e a largura mínima cabe o item mais longo: sem ela, o
- * menu cresceria quando o "Remover ordenação" aparece.
+ * `Menu.Popup`, e os itens (os grupos padrão ou os `children`) ficam num `Menu.List` próprio, que
+ * rola. Abre encostada no header, e a largura mínima cabe o item mais longo: sem ela, o menu
+ * cresceria quando o "Remover ordenação" aparece.
  *
  * Sem `children`, mostra os grupos padrão separados por linhas: ordenação
  * (`ColumnMenu.SortItems`), fixação (`ColumnMenu.PinItems`) e visibilidade

package/dist/components/column-menu/column-menu-popup.js

@@ -2,15 +2,16 @@ 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
-* `Menu.Popup`. Abre encostada no header, e a largura mínima cabe o item mais longo: sem ela, o
-* menu cresceria quando o "Remover ordenação" aparece.
+* `Menu.Popup`, e os itens (os grupos padrão ou os `children`) ficam num `Menu.List` próprio, que
+* rola. Abre encostada no header, e a largura mínima cabe o item mais longo: sem ela, o menu
+* cresceria quando o "Remover ordenação" aparece.
 *
 * Sem `children`, mostra os grupos padrão separados por linhas: ordenação
 * (`ColumnMenu.SortItems`), fixação (`ColumnMenu.PinItems`) e visibilidade
@@ -56,7 +57,7 @@ const ColumnMenuPopup = (props) => {
 			"data-component": "ColumnMenu.Popup",
 			className: mergeStateClassNames(["min-w-48"], className),
 			...rest,
-			children: children ?? groups.map((group, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 && /* @__PURE__ */ jsx(Menu.Separator, {}), group] }, group.key))
+			children: /* @__PURE__ */ jsx(Menu.List, { children: children ?? groups.map((group, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [index > 0 && /* @__PURE__ */ jsx(Menu.Separator, {}), group] }, group.key)) })
 		})
 	}) });
 };

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

@@ -1 +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"}
+{"version":3,"file":"column-menu-popup.js","names":["Fragment"],"sources":["../../../src/components/column-menu/column-menu-popup.tsx"],"sourcesContent":["import { Menu } from '@lucasbernardosn/react-ui/overlays/menu';\nimport { mergeStateClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport type { Header, RowData, TableFeatures } from '@tanstack/react-table';\nimport { Fragment } from 'react';\nimport { hasColumnFeature } from '../../utils';\nimport { ColumnMenuHideItem } from './column-menu-hide-item';\nimport type { ColumnMenuLabels } from './column-menu-labels';\nimport { ColumnMenuPinItems } from './column-menu-pin-items';\nimport { ColumnMenuSortItems } from './column-menu-sort-items';\n\nexport type ColumnMenuPopupProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = MergeOverride<\n  Menu.PopupProps,\n  {\n    /** O header da coluna. */\n    header: Header<TFeatures, TData>;\n    /** O texto dos itens padrão; os que faltam ficam com o padrão. Sem efeito com `children`. */\n    labels?: Partial<ColumnMenuLabels>;\n    /** As props do `Menu.Positioner`, como `side` e `align`. */\n    positionerProps?: Menu.PositionerProps;\n  }\n>;\n\n/**\n * A caixa do menu da coluna, já com o `Menu.Portal` e o `Menu.Positioner`. As props passam para o\n * `Menu.Popup`, e os itens (os grupos padrão ou os `children`) ficam num `Menu.List` próprio, que\n * rola. Abre encostada no header, e a largura mínima cabe o item mais longo: sem ela, o menu\n * 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          <Menu.List>\n            {children ??\n              groups.map((group, index) => (\n                <Fragment key={group.key}>\n                  {index > 0 && <Menu.Separator />}\n                  {group}\n                </Fragment>\n              ))}\n          </Menu.List>\n        </Menu.Popup>\n      </Menu.Positioner>\n    </Menu.Portal>\n  );\n};\n\nColumnMenuPopup.displayName = 'ColumnMenu.Popup';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,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;GAEJ,UAAA,oBAAC,KAAK,MAAN,EAAA,UACG,YACC,OAAO,KAAK,OAAO,UACjB,qBAACA,YAAD,EAAA,UAAA,CACG,QAAQ,KAAK,oBAAC,KAAK,WAAN,CAAiB,CAAA,GAC9B,KACO,EAAA,GAHK,MAAM,GAGX,CACX,EACM,CAAA;EACD,CAAA;CACG,CAAA,EACN,CAAA;AAEjB;AAEA,gBAAgB,cAAc"}

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

@@ -2,8 +2,8 @@ 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 React from "react";
 import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
+import React from "react";
 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, {

package/dist/components/column-menu/column-menu-sort-items.js

@@ -1,10 +1,10 @@
 import { ColumnMenuCheck } from "./column-menu-check.js";
 import { COLUMN_MENU_DEFAULT_LABELS } from "./column-menu-labels.js";
-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 { CaretDownIcon, CaretUpIcon, XIcon } from "@phosphor-icons/react";
+import { jsx, jsxs } from "react/jsx-runtime";
 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-trigger.js

@@ -1,10 +1,10 @@
 import { hasHeaderFeature } from "../../utils/has-feature.js";
 import { DataTableHeaderButton } from "../data-table/header/data-table-header-button.js";
-import { mergeProps } from "@base-ui/react";
-import { mergeStateClassNames } from "@lucasbernardosn/react-ui/utils";
-import { useSelector } from "@tanstack/react-store";
 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";
 //#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/columns-panel/columns-panel-item.js

@@ -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 { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
 import { useSelector } from "@tanstack/react-store";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ListIcon, PushPinIcon } from "@phosphor-icons/react";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+import { useSortable } from "@dnd-kit/react/sortable";
 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
@@ -79,7 +79,7 @@ const ColumnsPanelItem = (props) => {
 				align: "end",
 				children: /* @__PURE__ */ jsx(Menu.Popup, {
 					className: "min-w-48",
-					children: /* @__PURE__ */ jsx(ColumnMenuPinItems, { column })
+					children: /* @__PURE__ */ jsx(Menu.List, { children: /* @__PURE__ */ jsx(ColumnMenuPinItems, { column }) })
 				})
 			}) })] }),
 			pinned === false ? /* @__PURE__ */ jsx(IconButton, {

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

@@ -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/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"}
+{"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                    <Menu.List>\n                      <ColumnMenuPinItems column={column} />\n                    </Menu.List>\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,KAAK,MAAN,EAAA,UACE,oBAAC,oBAAD,EAA4B,OAAS,CAAA,EAC5B,CAAA;IACD,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.js

@@ -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 { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
 import { shallow, useSelector } from "@tanstack/react-store";
-import { Fragment, useMemo, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+import { Fragment as Fragment$1, useMemo, useRef } from "react";
 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, { children: children === void 0 ? hasColumnFeature(column, "columnVisibilityFeature") && /* @__PURE__ */ jsx(ColumnsPanelItem, {
+		children: columns.map((column, index) => /* @__PURE__ */ jsx(Fragment$1, { 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

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

package/dist/components/data-table/body/data-table-body.js

@@ -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 { 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";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+import { Fragment as Fragment$1 } from "react";
+import { Skeleton } from "@lucasbernardosn/react-ui/feedback/skeleton";
 //#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, { 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$1, { 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

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

package/dist/components/data-table/body/data-table-cell.js

@@ -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;

package/dist/components/data-table/body/data-table-empty.js

@@ -1,10 +1,10 @@
 import { hasTableFeature } from "../../../utils/has-feature.js";
+import { TrayIcon } from "@phosphor-icons/react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps, useRender } from "@base-ui/react";
-import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
 import { useSelector } from "@tanstack/react-store";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
 import { EmptyState } from "@lucasbernardosn/react-ui/feedback/empty-state";
-import { TrayIcon } from "@phosphor-icons/react";
 //#region src/components/data-table/body/data-table-empty.tsx
 /**
 * O estado vazio da tabela, para depois do `DataTable.Body`, dentro do `DataTable.Root`. Aparece

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

@@ -51,7 +51,7 @@ export type DataTableRowProps<TFeatures extends TableFeatures, TData extends Row
  *   }}
  *   className={
  *     row.original.overdue
- *       ? '[--data-table-row-background:var(--color-gray-2)] text-gray-11'
+ *       ? '[--data-table-row-background:var(--gray-2)] text-gray-11'
  *       : undefined
  *   }
  * >

package/dist/components/data-table/body/data-table-row.js

@@ -2,11 +2,11 @@ import { hasRowFeature } from "../../../utils/has-feature.js";
 import { focusDataTableRow, getDataTableRowKeyTarget } from "./data-table-row-focus.js";
 import { dataTableGridClassNames } from "../root/data-table-grid-class-names.js";
 import { DataTableCell } from "./data-table-cell.js";
+import { jsx } from "react/jsx-runtime";
 import { mergeProps, useRender } from "@base-ui/react";
-import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
 import { shallow, useSelector } from "@tanstack/react-store";
-import { Fragment } from "react";
-import { jsx } from "react/jsx-runtime";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+import { Fragment as Fragment$1 } from "react";
 //#region src/components/data-table/body/data-table-row.tsx
 /**
 * Uma linha do corpo (`role="row"`). É um grid com as colunas do `--data-table-template`, que o
@@ -46,7 +46,7 @@ import { jsx } from "react/jsx-runtime";
 *   }}
 *   className={
 *     row.original.overdue
-*       ? '[--data-table-row-background:var(--color-gray-2)] text-gray-11'
+*       ? '[--data-table-row-background:var(--gray-2)] text-gray-11'
 *       : undefined
 *   }
 * >
@@ -105,7 +105,7 @@ const DataTableRow = (props) => {
 	};
 	const isNavigable = hasRowFeature(row, "activeRowFeature");
 	/** 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 ? cells.map((cell) => /* @__PURE__ */ jsx(Fragment, { children: children === void 0 ? /* @__PURE__ */ jsx(DataTableCell, { cell }) : children(cell) }, cell.id)) : children;
+	const content = typeof children === "function" || children === void 0 ? cells.map((cell) => /* @__PURE__ */ jsx(Fragment$1, { children: children === void 0 ? /* @__PURE__ */ jsx(DataTableCell, { cell }) : children(cell) }, cell.id)) : children;
 	const baseProps = {
 		"data-component": "DataTable.Row",
 		"data-selected": isSelected ? "" : void 0,
@@ -122,11 +122,11 @@ const DataTableRow = (props) => {
 			"[--data-table-row-base:var(--color-white)]",
 			"dark:[--data-table-row-base:#0b0b0b]",
 			"[--data-table-row-background:var(--data-table-row-base)]",
-			"hover:[--data-table-row-background:var(--color-gray-2)]",
-			"data-selected:[--data-table-row-background:var(--color-gray-3)]",
-			"data-selected:hover:[--data-table-row-background:var(--color-gray-4)]",
-			"has-[[data-popup-open]]:[--data-table-row-background:var(--color-gray-2)]",
-			"data-selected:has-[[data-popup-open]]:[--data-table-row-background:var(--color-gray-4)]",
+			"hover:[--data-table-row-background:var(--gray-2)]",
+			"data-selected:[--data-table-row-background:var(--gray-3)]",
+			"data-selected:hover:[--data-table-row-background:var(--gray-4)]",
+			"has-[[data-popup-open]]:[--data-table-row-background:var(--gray-2)]",
+			"data-selected:has-[[data-popup-open]]:[--data-table-row-background:var(--gray-4)]",
 			"bg-(--data-table-row-background)",
 			"text-gray-12",
 			"outline-none",

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

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

package/dist/components/data-table/header/data-table-header-cell.js

@@ -1,10 +1,10 @@
 import { hasColumnFeature, hasHeaderFeature } from "../../../utils/has-feature.js";
 import { getDataTableColumnPinning, getDataTablePinnedStyle } from "../root/get-data-table-column-pinning.js";
 import { DataTableHeaderContent } from "./data-table-header-content.js";
+import { jsx } from "react/jsx-runtime";
 import { mergeProps, useRender } from "@base-ui/react";
-import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
 import { useSelector } from "@tanstack/react-store";
-import { jsx } from "react/jsx-runtime";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
 //#region src/components/data-table/header/data-table-header-cell.tsx
 /**
 * A célula de um header (`role="columnheader"`). Num header de grupo, ocupa as colunas que o

package/dist/components/data-table/header/data-table-header-content.js

@@ -1,7 +1,7 @@
 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/header/data-table-header-content.tsx
 /**
 * O conteúdo do header: o `header` da definição da coluna, truncado com reticências. Num header

package/dist/components/data-table/header/data-table-header.js

@@ -1,11 +1,11 @@
 import { hasTableFeature } from "../../../utils/has-feature.js";
 import { DataTableHeaderCell } from "./data-table-header-cell.js";
 import { DataTableHeaderRow } from "./data-table-header-row.js";
+import { jsx } from "react/jsx-runtime";
 import { mergeProps, useRender } from "@base-ui/react";
-import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
 import { shallow, useSelector } from "@tanstack/react-store";
-import { Fragment } from "react";
-import { jsx } from "react/jsx-runtime";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+import { Fragment as Fragment$1 } from "react";
 //#region src/components/data-table/header/data-table-header.tsx
 /**
 * O cabeçalho da tabela (`role="rowgroup"`), grudado no topo da área de rolagem.
@@ -56,7 +56,7 @@ const DataTableHeader = (props) => {
 	* Com render-prop ou sem `children`, o laço é daqui, com uma `HeaderRow` por grupo; com nós
 	* comuns, de quem usa.
 	*/
-	const content = typeof children === "function" || children === void 0 ? headerRows.map((headerRow) => /* @__PURE__ */ jsx(DataTableHeaderRow, { children: headerRow.headers.map((header) => /* @__PURE__ */ jsx(Fragment, { children: children === void 0 ? /* @__PURE__ */ jsx(DataTableHeaderCell, { header }) : children(header) }, header.id)) }, headerRow.depth)) : children;
+	const content = typeof children === "function" || children === void 0 ? headerRows.map((headerRow) => /* @__PURE__ */ jsx(DataTableHeaderRow, { children: headerRow.headers.map((header) => /* @__PURE__ */ jsx(Fragment$1, { children: children === void 0 ? /* @__PURE__ */ jsx(DataTableHeaderCell, { header }) : children(header) }, header.id)) }, headerRow.depth)) : children;
 	const baseProps = {
 		"data-component": "DataTable.Header",
 		role: "rowgroup",

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-header.js","names":[],"sources":["../../../../src/components/data-table/header/data-table-header.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { shallow, useSelector } from '@tanstack/react-store';\nimport type {\n  Header,\n  RowData,\n  Table,\n  TableFeatures,\n} from '@tanstack/react-table';\nimport type React from 'react';\nimport { Fragment } from 'react';\nimport { hasTableFeature } from '../../../utils';\nimport { DataTableHeaderCell } from './data-table-header-cell';\nimport { DataTableHeaderRow } from './data-table-header-row';\n\nexport type DataTableHeaderProps<\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 header e devolve a célula dele: o `Header` monta uma\n     * `DataTable.HeaderRow` por grupo de headers e chama a função para cada header. Com nós\n     * comuns, quem usa faz o laço.\n     * @default (header) => <DataTable.HeaderCell header={header} />\n     */\n    children?:\n      | React.ReactNode\n      | ((header: Header<TFeatures, TData>) => React.ReactNode);\n  }\n>;\n\n/**\n * O cabeçalho da tabela (`role=\"rowgroup\"`), grudado no topo da área de rolagem.\n *\n * Com render-prop ou sem `children`, faz o laço sozinho: assina os grupos de headers e só\n * re-renderiza quando a estrutura das colunas muda (`columns`, ordem, visibilidade, pinning),\n * sem o dono da tabela precisar re-renderizar. Com nós comuns, o laço é de quem usa, e o dono\n * precisa re-renderizar quando a estrutura muda.\n *\n * Com `columnPinningFeature`, monta as linhas com os grupos de cada região (as fixadas no início,\n * o centro e as fixadas no fim): um grupo cujas colunas atravessam a fronteira da fixação vira um\n * header em cada região, e a parte fixada gruda.\n *\n * @example\n * ```tsx\n * <DataTable.Header table={table}>\n *   {(header) => (\n *     <DataTable.HeaderCell header={header}>\n *       <DataTable.HeaderContent header={header} />\n *       <DataTable.ResizeHandle header={header} />\n *     </DataTable.HeaderCell>\n *   )}\n * </DataTable.Header>\n * ```\n */\nexport const DataTableHeader = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableHeaderProps<TFeatures, TData>,\n) => {\n  const { table, render, className, children, ...rest } = props;\n\n  /**\n   * Os grupos que o TanStack memoiza, numa tupla: o `shallow` compara item a item, e só\n   * re-renderiza quando a estrutura das colunas muda. Tamanho, ordenação e seleção mudam o store,\n   * mas não os grupos. Com pinning, os grupos de cada região: o de uma região só tem as colunas\n   * dela.\n   */\n  const regionHeaderGroups = useSelector(\n    table.store,\n    () =>\n      hasTableFeature(table, 'columnPinningFeature')\n        ? [\n            table.getStartHeaderGroups(),\n            table.getCenterHeaderGroups(),\n            table.getEndHeaderGroups(),\n          ]\n        : [table.getHeaderGroups()],\n    { compare: shallow },\n  );\n\n  /**\n   * As linhas do cabeçalho, uma por profundidade, com os headers das regiões na ordem do\n   * template. Toda região tem o mesmo número de grupos, o da coluna mais funda.\n   */\n  const headerRows = (regionHeaderGroups[0] ?? []).map((headerGroup) => ({\n    depth: headerGroup.depth,\n    headers: regionHeaderGroups.flatMap(\n      (headerGroups) => headerGroups[headerGroup.depth]?.headers ?? [],\n    ),\n  }));\n\n  /**\n   * Com render-prop ou sem `children`, o laço é daqui, com uma `HeaderRow` por grupo; com nós\n   * comuns, de quem usa.\n   */\n  const content =\n    typeof children === 'function' || children === undefined\n      ? headerRows.map((headerRow) => (\n          <DataTableHeaderRow key={headerRow.depth}>\n            {headerRow.headers.map((header) => (\n              <Fragment key={header.id}>\n                {children === undefined ? (\n                  <DataTableHeaderCell header={header} />\n                ) : (\n                  children(header)\n                )}\n              </Fragment>\n            ))}\n          </DataTableHeaderRow>\n        ))\n      : children;\n\n  const baseProps = {\n    'data-component': 'DataTable.Header',\n    role: 'rowgroup',\n    className: mergeTwClassNames(\n      [\n        // Gruda no ancestral que rola, como o viewport do `DataTable.ScrollArea`.\n        'sticky',\n        'top-0',\n        'z-10',\n      ],\n      className,\n    ),\n    children: content,\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTableHeader.displayName = 'DataTable.Header';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DA,MAAa,mBAIX,UACG;CACH,MAAM,EAAE,OAAO,QAAQ,WAAW,UAAU,GAAG,SAAS;;;;;;;CAQxD,MAAM,qBAAqB,YACzB,MAAM,aAEJ,gBAAgB,OAAO,sBAAsB,IACzC;EACE,MAAM,qBAAqB;EAC3B,MAAM,sBAAsB;EAC5B,MAAM,mBAAmB;CAC3B,IACA,CAAC,MAAM,gBAAgB,CAAC,GAC9B,EAAE,SAAS,QAAQ,CACrB;;;;;CAMA,MAAM,cAAc,mBAAmB,MAAM,CAAC,EAAA,CAAG,KAAK,iBAAiB;EACrE,OAAO,YAAY;EACnB,SAAS,mBAAmB,SACzB,iBAAiB,aAAa,YAAY,MAAM,EAAE,WAAW,CAAC,CACjE;CACF,EAAE;;;;;CAMF,MAAM,UACJ,OAAO,aAAa,cAAc,aAAa,KAAA,IAC3C,WAAW,KAAK,cACd,oBAAC,oBAAD,EAAA,UACG,UAAU,QAAQ,KAAK,WACtB,oBAAC,UAAD,EAAA,UACG,aAAa,KAAA,IACZ,oBAAC,qBAAD,EAA6B,OAAS,CAAA,IAEtC,SAAS,MAAM,EAET,GANK,OAAO,EAMZ,CACX,EACiB,GAVK,UAAU,KAUf,CACrB,IACD;CAEN,MAAM,YAAY;EAChB,kBAAkB;EAClB,MAAM;EACN,WAAW,kBACT;GAEE;GACA;GACA;EACF,GACA,SACF;EACA,UAAU;CACZ;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"data-table-header.js","names":["Fragment"],"sources":["../../../../src/components/data-table/header/data-table-header.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '@lucasbernardosn/react-ui/utils';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { shallow, useSelector } from '@tanstack/react-store';\nimport type {\n  Header,\n  RowData,\n  Table,\n  TableFeatures,\n} from '@tanstack/react-table';\nimport type React from 'react';\nimport { Fragment } from 'react';\nimport { hasTableFeature } from '../../../utils';\nimport { DataTableHeaderCell } from './data-table-header-cell';\nimport { DataTableHeaderRow } from './data-table-header-row';\n\nexport type DataTableHeaderProps<\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 header e devolve a célula dele: o `Header` monta uma\n     * `DataTable.HeaderRow` por grupo de headers e chama a função para cada header. Com nós\n     * comuns, quem usa faz o laço.\n     * @default (header) => <DataTable.HeaderCell header={header} />\n     */\n    children?:\n      | React.ReactNode\n      | ((header: Header<TFeatures, TData>) => React.ReactNode);\n  }\n>;\n\n/**\n * O cabeçalho da tabela (`role=\"rowgroup\"`), grudado no topo da área de rolagem.\n *\n * Com render-prop ou sem `children`, faz o laço sozinho: assina os grupos de headers e só\n * re-renderiza quando a estrutura das colunas muda (`columns`, ordem, visibilidade, pinning),\n * sem o dono da tabela precisar re-renderizar. Com nós comuns, o laço é de quem usa, e o dono\n * precisa re-renderizar quando a estrutura muda.\n *\n * Com `columnPinningFeature`, monta as linhas com os grupos de cada região (as fixadas no início,\n * o centro e as fixadas no fim): um grupo cujas colunas atravessam a fronteira da fixação vira um\n * header em cada região, e a parte fixada gruda.\n *\n * @example\n * ```tsx\n * <DataTable.Header table={table}>\n *   {(header) => (\n *     <DataTable.HeaderCell header={header}>\n *       <DataTable.HeaderContent header={header} />\n *       <DataTable.ResizeHandle header={header} />\n *     </DataTable.HeaderCell>\n *   )}\n * </DataTable.Header>\n * ```\n */\nexport const DataTableHeader = <\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableHeaderProps<TFeatures, TData>,\n) => {\n  const { table, render, className, children, ...rest } = props;\n\n  /**\n   * Os grupos que o TanStack memoiza, numa tupla: o `shallow` compara item a item, e só\n   * re-renderiza quando a estrutura das colunas muda. Tamanho, ordenação e seleção mudam o store,\n   * mas não os grupos. Com pinning, os grupos de cada região: o de uma região só tem as colunas\n   * dela.\n   */\n  const regionHeaderGroups = useSelector(\n    table.store,\n    () =>\n      hasTableFeature(table, 'columnPinningFeature')\n        ? [\n            table.getStartHeaderGroups(),\n            table.getCenterHeaderGroups(),\n            table.getEndHeaderGroups(),\n          ]\n        : [table.getHeaderGroups()],\n    { compare: shallow },\n  );\n\n  /**\n   * As linhas do cabeçalho, uma por profundidade, com os headers das regiões na ordem do\n   * template. Toda região tem o mesmo número de grupos, o da coluna mais funda.\n   */\n  const headerRows = (regionHeaderGroups[0] ?? []).map((headerGroup) => ({\n    depth: headerGroup.depth,\n    headers: regionHeaderGroups.flatMap(\n      (headerGroups) => headerGroups[headerGroup.depth]?.headers ?? [],\n    ),\n  }));\n\n  /**\n   * Com render-prop ou sem `children`, o laço é daqui, com uma `HeaderRow` por grupo; com nós\n   * comuns, de quem usa.\n   */\n  const content =\n    typeof children === 'function' || children === undefined\n      ? headerRows.map((headerRow) => (\n          <DataTableHeaderRow key={headerRow.depth}>\n            {headerRow.headers.map((header) => (\n              <Fragment key={header.id}>\n                {children === undefined ? (\n                  <DataTableHeaderCell header={header} />\n                ) : (\n                  children(header)\n                )}\n              </Fragment>\n            ))}\n          </DataTableHeaderRow>\n        ))\n      : children;\n\n  const baseProps = {\n    'data-component': 'DataTable.Header',\n    role: 'rowgroup',\n    className: mergeTwClassNames(\n      [\n        // Gruda no ancestral que rola, como o viewport do `DataTable.ScrollArea`.\n        'sticky',\n        'top-0',\n        'z-10',\n      ],\n      className,\n    ),\n    children: content,\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataTableHeader.displayName = 'DataTable.Header';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DA,MAAa,mBAIX,UACG;CACH,MAAM,EAAE,OAAO,QAAQ,WAAW,UAAU,GAAG,SAAS;;;;;;;CAQxD,MAAM,qBAAqB,YACzB,MAAM,aAEJ,gBAAgB,OAAO,sBAAsB,IACzC;EACE,MAAM,qBAAqB;EAC3B,MAAM,sBAAsB;EAC5B,MAAM,mBAAmB;CAC3B,IACA,CAAC,MAAM,gBAAgB,CAAC,GAC9B,EAAE,SAAS,QAAQ,CACrB;;;;;CAMA,MAAM,cAAc,mBAAmB,MAAM,CAAC,EAAA,CAAG,KAAK,iBAAiB;EACrE,OAAO,YAAY;EACnB,SAAS,mBAAmB,SACzB,iBAAiB,aAAa,YAAY,MAAM,EAAE,WAAW,CAAC,CACjE;CACF,EAAE;;;;;CAMF,MAAM,UACJ,OAAO,aAAa,cAAc,aAAa,KAAA,IAC3C,WAAW,KAAK,cACd,oBAAC,oBAAD,EAAA,UACG,UAAU,QAAQ,KAAK,WACtB,oBAACA,YAAD,EAAA,UACG,aAAa,KAAA,IACZ,oBAAC,qBAAD,EAA6B,OAAS,CAAA,IAEtC,SAAS,MAAM,EAET,GANK,OAAO,EAMZ,CACX,EACiB,GAVK,UAAU,KAUf,CACrB,IACD;CAEN,MAAM,YAAY;EAChB,kBAAkB;EAClB,MAAM;EACN,WAAW,kBACT;GAEE;GACA;GACA;EACF,GACA,SACF;EACA,UAAU;CACZ;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,gBAAgB,cAAc"}

package/dist/components/data-table/index.parts.js

@@ -1,4 +1,5 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { DataTableHeaderButton } from "./header/data-table-header-button.js";
 import { DataTableCell } from "./body/data-table-cell.js";
 import { DataTableRow } from "./body/data-table-row.js";
 import { DataTableBody } from "./body/data-table-body.js";
@@ -7,7 +8,6 @@ import { DataTableHeaderContent } from "./header/data-table-header-content.js";
 import { DataTableHeaderCell } from "./header/data-table-header-cell.js";
 import { DataTableHeaderRow } from "./header/data-table-header-row.js";
 import { DataTableHeader } from "./header/data-table-header.js";
-import { DataTableHeaderButton } from "./header/data-table-header-button.js";
 import { DataTablePageButton } from "./pagination/data-table-page-button.js";
 import { DataTablePageSizeSelect } from "./pagination/data-table-page-size-select.js";
 import { DataTablePageStatus } from "./pagination/data-table-page-status.js";

package/dist/components/data-table/pagination/data-table-page-button.js

@@ -1,6 +1,6 @@
-import { useSelector } from "@tanstack/react-store";
-import { jsx } from "react/jsx-runtime";
 import { CaretDoubleLeftIcon, CaretDoubleRightIcon, CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
+import { jsx } from "react/jsx-runtime";
+import { useSelector } from "@tanstack/react-store";
 import { IconButton } from "@lucasbernardosn/react-ui/buttons/icon-button";
 //#region src/components/data-table/pagination/data-table-page-button.tsx
 const PAGE_LABELS = {

package/dist/components/data-table/pagination/data-table-page-size-select.js

@@ -1,6 +1,6 @@
-import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
-import { useSelector } from "@tanstack/react-store";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useSelector } from "@tanstack/react-store";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
 import { Select } from "@lucasbernardosn/react-ui/collections/select";
 //#region src/components/data-table/pagination/data-table-page-size-select.tsx
 const DEFAULT_PAGE_SIZE_OPTIONS = [

package/dist/components/data-table/pagination/data-table-page-status.js

@@ -1,7 +1,7 @@
 import { getDataTableLoadingWithoutRows } from "../loading/get-data-table-loading-without-rows.js";
 import { mergeProps, useRender } from "@base-ui/react";
-import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
 import { shallow, useSelector } from "@tanstack/react-store";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
 //#region src/components/data-table/pagination/data-table-page-status.tsx
 /**
 * Qual a página atual, e de quantas: "Página 2 de 10". Sem o total de páginas, só "Página 2",

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

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

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

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

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

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

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

@@ -1,9 +1,9 @@
 import { useDataTableResizeScroll } from "./use-data-table-resize-scroll.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps, useRender } from "@base-ui/react";
-import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
 import { useSelector } from "@tanstack/react-store";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
 import { useRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { InteractionShield } from "@lucasbernardosn/react-ui/utilities/interaction-shield";
 //#region src/components/data-table/resize/data-table-resize-handle.tsx
 /**
@@ -104,7 +104,7 @@ const DataTableResizeHandle = (props) => {
 		ref: [handleRef, ref ?? null],
 		props: mergeProps(baseProps, rest)
 	});
-	return header.column.getCanResize() ? /* @__PURE__ */ jsxs(Fragment$1, { children: [element, /* @__PURE__ */ jsx(InteractionShield, {
+	return header.column.getCanResize() ? /* @__PURE__ */ jsxs(Fragment, { children: [element, /* @__PURE__ */ jsx(InteractionShield, {
 		active: isResizing,
 		cursor: "col-resize"
 	})] }) : null;

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

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

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

@@ -2,8 +2,8 @@ import { hasTableFeature } from "../../../utils/has-feature.js";
 import { useDataTableLoading } from "../loading/use-data-table-loading.js";
 import { useDataTableColumnLayout } from "./use-data-table-column-layout.js";
 import { mergeProps, useRender } from "@base-ui/react";
-import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
 import { useSelector } from "@tanstack/react-store";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
 //#region src/components/data-table/root/data-table-root.tsx
 /**
 * O elemento do grid (`role="table"`; com `activeRowFeature`, `role="grid"`, que diz ao leitor

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lucasbernardosn/react-table",
-  "version": "0.3.0",
-  "description": "Composable data table parts on TanStack Table v9, styled with @lucasbernardosn/react-ui.",
+  "version": "0.5.0",
+  "description": "Tabela de dados para React, em partes pequenas, sobre o TanStack Table v9 e com o visual do @lucasbernardosn/react-ui.",
   "type": "module",
   "exports": {
     "./types": {
@@ -27,14 +27,14 @@
     "@dnd-kit/dom": "0.5.0",
     "@dnd-kit/helpers": "0.5.0",
     "@dnd-kit/react": "0.5.0",
-    "@lucasbernardosn/ts-utils": "^0.3.0",
+    "@lucasbernardosn/ts-utils": "^0.5.0",
     "@phosphor-icons/react": "2.1.10",
     "@tanstack/react-store": "0.11.2"
   },
   "devDependencies": {
     "@biomejs/biome": "2.6.3",
-    "@lucasbernardosn/react-ui": "0.3.0",
-    "@lucasbernardosn/react-utils": "0.3.0",
+    "@lucasbernardosn/react-ui": "0.5.0",
+    "@lucasbernardosn/react-utils": "0.5.0",
     "@lucasbernardosn/ts-config": "0.2.0",
     "@tanstack/react-table": "9.2.4",
     "@testing-library/jest-dom": "7.0.1",
@@ -53,8 +53,8 @@
     "vitest": "5.0.3"
   },
   "peerDependencies": {
-    "@lucasbernardosn/react-ui": "^0.3.0",
-    "@lucasbernardosn/react-utils": "^0.3.0",
+    "@lucasbernardosn/react-ui": "^0.5.0",
+    "@lucasbernardosn/react-utils": "^0.5.0",
     "@tanstack/react-table": "^9.2.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -63,6 +63,15 @@
     "dist"
   ],
   "sideEffects": false,
+  "keywords": [
+    "react",
+    "table",
+    "data-table",
+    "tanstack-table",
+    "tailwindcss",
+    "typescript",
+    "pt-br"
+  ],
   "license": "MIT",
   "publishConfig": {
     "access": "public"