@lucasbernardosn/react-table 0.1.0 → 0.3.0

package/README.md

@@ -0,0 +1,269 @@
+# @lucasbernardosn/react-table
+
+Tabela de dados para React sobre o [TanStack Table v9](https://tanstack.com/table), montada em
+partes pequenas: cabeçalho, corpo, ordenação, seleção, paginação, redimensionamento, colunas
+fixadas, carregamento, navegação por teclado e menu de coluna. Cada parte assina só o estado que
+lê, então a tabela não re-renderiza inteira a cada mudança, e o app troca ou recompõe qualquer
+uma. O visual vem do [`@lucasbernardosn/react-ui`](https://www.npmjs.com/package/@lucasbernardosn/react-ui).
+
+## Instalação
+
+```bash
+pnpm add @lucasbernardosn/react-table @lucasbernardosn/react-ui @lucasbernardosn/react-utils \
+  @tanstack/react-table react react-dom
+```
+
+O React (19), o `@tanstack/react-table` (^9.2.4), o `react-ui` e o `react-utils` são peers: o app
+e a tabela precisam usar a mesma cópia de cada um.
+
+O Tailwind CSS v4 precisa ler as classes da tabela e do `react-ui`:
+
+```css
+@import 'tailwindcss';
+@import '@lucasbernardosn/react-ui/theme.css';
+
+@source '../node_modules/@lucasbernardosn/react-ui';
+@source '../node_modules/@lucasbernardosn/react-table';
+```
+
+O resto da configuração (o `isolation: isolate` na raiz do app, por exemplo) está no
+[README do `react-ui`](https://www.npmjs.com/package/@lucasbernardosn/react-ui#configuração).
+
+## Uso mínimo
+
+A tabela é do TanStack: o app registra as features que usa, define as colunas e chama o `useTable`.
+As partes recebem a `table`.
+
+```tsx
+import { DataTable } from '@lucasbernardosn/react-table/data-table';
+import {
+  columnSizingFeature,
+  createColumnHelper,
+  tableFeatures,
+  useTable,
+} from '@tanstack/react-table';
+
+type Person = { id: string; name: string; age: number };
+
+const features = tableFeatures({ columnSizingFeature });
+
+const columnHelper = createColumnHelper<typeof features, Person>();
+
+const columns = columnHelper.columns([
+  columnHelper.accessor('name', { header: 'Nome' }),
+  columnHelper.accessor('age', { header: 'Idade' }),
+]);
+
+export const PeopleTable = (props: { people: Person[] }) => {
+  const table = useTable(
+    { features, columns, data: props.people, getRowId: (row) => row.id },
+    () => null,
+  );
+
+  return (
+    <DataTable.ScrollArea>
+      <DataTable.Root table={table} aria-label="Pessoas">
+        <DataTable.Header table={table} />
+        <DataTable.Body table={table} />
+        <DataTable.Empty table={table} />
+      </DataTable.Root>
+    </DataTable.ScrollArea>
+  );
+};
+```
+
+- O `() => null` é o seletor do `useTable`: o dono da tabela não re-renderiza com o estado dela.
+  Cada parte assina o que lê.
+- O `DataTable.Root` não rola. O `DataTable.ScrollArea` dá a rolagem, a moldura e o cabeçalho
+  grudado no topo; a altura vem do pai.
+- Sem `children`, o `Header` e o `Body` fazem o laço sozinhos. Com uma render-prop, o app monta a
+  célula de cada header ou a linha de cada registro (ver [Compor as partes](#compor-as-partes)).
+
+## Features
+
+Uma parte exige a feature de que depende, e o tipo recusa uma tabela sem ela. As features do
+TanStack vêm de `@tanstack/react-table`; as próprias, de `@lucasbernardosn/react-table/features`.
+
+| Feature | Para quê |
+| ------- | -------- |
+| `columnSizingFeature` | Exigida pelo `Root`: o layout e a largura das colunas |
+| `columnResizingFeature` | O `ResizeHandle`. Exige `columnResizeMode: 'onChange'` nas opções |
+| `rowSortingFeature` | `SortTrigger`, `SortIndicator` e os itens de ordenação do menu |
+| `rowSelectionFeature` | `RowCheckbox`, `SelectAllCheckbox`, `selectionColumnDef` |
+| `rowPaginationFeature` | A barra e as partes da paginação |
+| `columnPinningFeature` | Colunas fixadas no início e no fim |
+| `columnVisibilityFeature` e `columnOrderingFeature` | O `ColumnsPanel` |
+| `rowDensityFeature` | `compact`, `standard` e `airy` |
+| `columnAlignmentFeature` | `align` (`start`, `center`, `end`) na definição da coluna |
+| `activeRowFeature` | Navegação por teclado: linha ativa, setas, Home, End, PageUp e PageDown |
+| `loadingFeature` | `isLoading`: skeleton, barra de carga e linhas-fantasma |
+
+## Partes
+
+Todas em `DataTable`, de `@lucasbernardosn/react-table/data-table`, menos as marcadas.
+
+| Área | Partes |
+| ---- | ------ |
+| Estrutura | `Root`, `ScrollArea` |
+| Cabeçalho | `Header`, `HeaderRow`, `HeaderCell`, `HeaderContent`, `HeaderButton` |
+| Corpo | `Body`, `Row`, `Cell`, `Empty` |
+| Ordenação | `SortTrigger`, `SortIndicator` |
+| Redimensionar | `ResizeHandle` |
+| Seleção | `RowCheckbox`, `SelectAllCheckbox`, `SelectionBar`, `selectionColumnDef()` |
+| Paginação | `Pagination`, `PageButton`, `PageStatus`, `RowRange`, `PageSizeSelect`, `SelectedCount` |
+| Barra | `DensitySelect`, `SortColumnSelect`, `SortDirectionSelect` |
+| Colunas (`ColumnsPanel`) | `Root`, `Item` |
+| Menu de coluna (`ColumnMenu`) | `Root`, `Trigger`, `Popup`, `SortItems`, `PinItems`, `HideItem` |
+
+O JSDoc de cada parte, no editor, diz o que ela exige e o que faz. Os textos padrão são em pt-BR:
+uma parte com vários textos aceita `labels`, e uma com texto montado de números aceita uma
+render-prop.
+
+## Compor as partes
+
+Um cabeçalho com ordenação, redimensionamento e a linha com seleção:
+
+```tsx
+<DataTable.Header table={table}>
+  {(header) => (
+    <DataTable.HeaderCell header={header}>
+      <DataTable.SortTrigger header={header}>
+        <DataTable.HeaderContent header={header} />
+        <DataTable.SortIndicator header={header} />
+      </DataTable.SortTrigger>
+
+      <DataTable.ResizeHandle header={header} />
+    </DataTable.HeaderCell>
+  )}
+</DataTable.Header>
+
+<DataTable.Body table={table}>
+  {(row) => (
+    <DataTable.Row
+      row={row}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter') {
+          open(row.original);
+        }
+      }}
+    >
+      {(cell) => <DataTable.Cell cell={cell} />}
+    </DataTable.Row>
+  )}
+</DataTable.Body>
+```
+
+A coluna de seleção é pronta: passe a definição ao `columnHelper.display`.
+
+```ts
+const columns = columnHelper.columns([
+  columnHelper.display(DataTable.selectionColumnDef()),
+  columnHelper.accessor('name', { header: 'Nome' }),
+]);
+```
+
+## Paginação e ordenação pela API
+
+Com `manualPagination` e `manualSorting`, a página e a ordem chegam prontas, e o total vem do
+`rowCount` (ou do `pageCount`; com `pageCount: -1`, o total é desconhecido: a próxima página segue
+habilitada, e a última não). A paginação e a ordenação ficam em atoms do app, que a tabela usa no
+lugar dos dela, e o dono os assina para montar a chave da consulta:
+
+```tsx
+const paginationAtom = useCreateAtom<PaginationState>({ pageIndex: 0, pageSize: 25 });
+const sortingAtom = useCreateAtom<SortingState>([]);
+
+const pagination = useSelector(paginationAtom);
+const sorting = useSelector(sortingAtom);
+
+const query = useQuery({
+  queryKey: ['people', pagination, sorting],
+  queryFn: () => fetchPeople(pagination, sorting),
+  placeholderData: keepPreviousData,
+});
+
+const table = useTable(
+  {
+    features,
+    columns,
+    data: query.data?.rows ?? [],
+    getRowId: (row) => row.id,
+    atoms: { pagination: paginationAtom, sorting: sortingAtom },
+    manualPagination: true,
+    manualSorting: true,
+    rowCount: query.data?.rowCount,
+    state: { isLoading: query.isPending || query.isPlaceholderData },
+  },
+  () => null,
+);
+```
+
+O `isLoading` é do app. Carregar é ter na tela linhas que não são as da consulta atual: a primeira
+carga, sem dados, ou a troca de página com a anterior no lugar (`keepPreviousData`). Uma busca em
+segundo plano que só confirma o que já está na tela não conta, e por isso a conta é
+`isPending || isPlaceholderData`, e não `isFetching`.
+
+Com `loadingFeature`, a tabela marca `aria-busy` e, depois de 200 ms, troca o conteúdo das células
+por um skeleton, mostra uma barra de carga sob o cabeçalho e bloqueia o corpo. Sem linhas, desenha
+linhas-fantasma. Uma resposta mais rápida que isso não mostra nada.
+
+## Gerenciador de colunas
+
+O `ColumnsPanel` lista as colunas de dados para marcar quais aparecem e arrastar para mudar a
+ordem. Fica num popover ou numa gaveta do app, que também cuida do gatilho e do "restaurar".
+
+```tsx
+import { ColumnsPanel } from '@lucasbernardosn/react-table/columns-panel';
+
+<Popover.Root>
+  <Popover.Trigger render={<Button />}>Colunas</Popover.Trigger>
+  <Popover.Portal>
+    <Popover.Positioner>
+      <Popover.Popup>
+        <ColumnsPanel.Root table={table} />
+      </Popover.Popup>
+    </Popover.Positioner>
+  </Popover.Portal>
+</Popover.Root>
+```
+
+Exige `columnOrderingFeature` e `columnVisibilityFeature`. Com `columnPinningFeature`, a lista
+mostra as colunas fixadas à parte, e só as do centro se arrastam.
+
+## Menu de coluna
+
+O `ColumnMenu` abre no header, no lugar do `SortTrigger`: ordenar, fixar no início ou no fim e
+ocultar a coluna. Cada grupo de itens só aparece com a feature registrada e permitida na coluna
+(`enableSorting`, `enablePinning`, `enableHiding`).
+
+```tsx
+import { ColumnMenu } from '@lucasbernardosn/react-table/column-menu';
+
+<DataTable.HeaderCell header={header}>
+  <ColumnMenu.Root>
+    <ColumnMenu.Trigger header={header}>
+      <DataTable.HeaderContent header={header} />
+      <DataTable.SortIndicator header={header} />
+    </ColumnMenu.Trigger>
+    <ColumnMenu.Popup header={header} />
+  </ColumnMenu.Root>
+
+  <DataTable.ResizeHandle header={header} />
+</DataTable.HeaderCell>
+```
+
+O `Popup` sem `children` monta os grupos padrão. Com `children`, o app escolhe, reordena ou soma
+itens do `Menu` do `ui`; `labels` troca os textos.
+
+## Utilitários
+
+Em `@lucasbernardosn/react-table/utils`: `getDefaultColumnLabel(column)`, o nome de uma coluna fora
+do cabeçalho (o `header` quando é texto, e o id quando não é), e os guards `hasTableFeature`,
+`hasColumnFeature`, `hasHeaderFeature` e `hasRowFeature`, que conferem em runtime se a feature está
+registrada e estreitam o tipo. Em `@lucasbernardosn/react-table/types`: `TableWith`, `ColumnWith`,
+`HeaderWith` e `RowWith`, o tipo do TanStack somado às APIs das features pedidas, para escrever
+uma parte própria que exige uma feature.
+
+## Licença
+
+MIT.

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

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

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

@@ -1,13 +1,13 @@
-import { HeaderWith } from "../../types/table-with.js";
+import { ColumnWith } from "../../types/table-with.js";
 import "../../types/index.js";
 import { ColumnMenuLabels } from "./column-menu-labels.js";
 import { RowData, TableFeatures } from "@tanstack/react-table";
 import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/column-menu/column-menu-hide-item.d.ts
 export type ColumnMenuHideItemProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Menu.ItemProps, {
-  /** O header da coluna. Exige `columnVisibilityFeature`. */
-  header: HeaderWith<TFeatures, TData, 'columnVisibilityFeature'>;
+  /** A coluna. Exige `columnVisibilityFeature`. */
+  column: ColumnWith<TFeatures, TData, 'columnVisibilityFeature'>;
   /** O texto do item, em `hide`; os outros textos não se aplicam aqui. */
   labels?: Partial<ColumnMenuLabels>;
 }>;

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 { Icon } from "@lucasbernardosn/react-ui/display/icon";
-import { EyeSlashIcon } from "@phosphor-icons/react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { EyeSlashIcon } from "@phosphor-icons/react";
+import { Icon } from "@lucasbernardosn/react-ui/display/icon";
 import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
 //#region src/components/column-menu/column-menu-hide-item.tsx
 /**
@@ -10,8 +10,7 @@ import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
 * app. Numa coluna com `enableHiding: false`, não renderiza.
 */
 const ColumnMenuHideItem = (props) => {
-	const { header, labels, children, ...rest } = props;
-	const { column } = header;
+	const { column, labels, children, ...rest } = props;
 	if (!column.getCanHide()) return null;
 	return /* @__PURE__ */ jsx(Menu.Item, {
 		...mergeProps({

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

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

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

@@ -1,20 +1,20 @@
-import { HeaderWith } from "../../types/table-with.js";
+import { ColumnWith } from "../../types/table-with.js";
 import "../../types/index.js";
 import { ColumnMenuLabels } from "./column-menu-labels.js";
 import { RowData, TableFeatures } from "@tanstack/react-table";
 import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/column-menu/column-menu-pin-items.d.ts
 export type ColumnMenuPinItemsProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Menu.GroupProps, {
-  /** O header da coluna. Exige `columnPinningFeature`. */
-  header: HeaderWith<TFeatures, TData, 'columnPinningFeature'>;
+  /** A coluna. Exige `columnPinningFeature`. */
+  column: ColumnWith<TFeatures, TData, 'columnPinningFeature'>;
   /** O texto dos itens; os que faltam ficam com o padrão. */
   labels?: Partial<ColumnMenuLabels>;
 }>;
 /**
  * Os itens da fixação: no início e no fim, com um check no lado atual, e "Desafixar" com a coluna
  * fixada. Nos dois lados, a coluna entra junto do centro, depois das que já estavam fixadas: as
- * das pontas, como a seleção e as ações, continuam nas pontas. Num header de grupo, fixa as
+ * das pontas, como a seleção e as ações, continuam nas pontas. Numa coluna de grupo, fixa as
  * colunas do grupo. Numa coluna com `enablePinning: false`, não renderiza.
  */
 export declare const ColumnMenuPinItems: {

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

@@ -1,20 +1,19 @@
 import { ColumnMenuCheck } from "./column-menu-check.js";
 import { COLUMN_MENU_DEFAULT_LABELS } from "./column-menu-labels.js";
-import { Icon } from "@lucasbernardosn/react-ui/display/icon";
-import { PushPinIcon, PushPinSlashIcon } from "@phosphor-icons/react";
+import { useSelector } from "@tanstack/react-store";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { PushPinIcon, PushPinSlashIcon } from "@phosphor-icons/react";
+import { Icon } from "@lucasbernardosn/react-ui/display/icon";
 import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
-import { useSelector } from "@tanstack/react-store";
 //#region src/components/column-menu/column-menu-pin-items.tsx
 /**
 * Os itens da fixação: no início e no fim, com um check no lado atual, e "Desafixar" com a coluna
 * fixada. Nos dois lados, a coluna entra junto do centro, depois das que já estavam fixadas: as
-* das pontas, como a seleção e as ações, continuam nas pontas. Num header de grupo, fixa as
+* das pontas, como a seleção e as ações, continuam nas pontas. Numa coluna de grupo, fixa as
 * colunas do grupo. Numa coluna com `enablePinning: false`, não renderiza.
 */
 const ColumnMenuPinItems = (props) => {
-	const { header, labels, ...rest } = props;
-	const { column } = header;
+	const { column, labels, ...rest } = props;
 	/** Re-renderiza quando esta coluna é fixada ou solta. */
 	const pinned = useSelector(column.table.atoms.columnPinning, () => column.getIsPinned());
 	if (!column.getCanPin()) return null;

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

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

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

@@ -1,7 +1,7 @@
 import { ColumnMenuLabels } from "./column-menu-labels.js";
 import { Header, RowData, TableFeatures } from "@tanstack/react-table";
 import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/column-menu/column-menu-popup.d.ts
 export type ColumnMenuPopupProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Menu.PopupProps, {
   /** O header da coluna. */
@@ -20,12 +20,13 @@ export type ColumnMenuPopupProps<TFeatures extends TableFeatures, TData extends
  * (`ColumnMenu.SortItems`), fixação (`ColumnMenu.PinItems`) e visibilidade
  * (`ColumnMenu.HideItem`). Cada grupo só aparece com a feature registrada na tabela e permitida na
  * coluna. Com `children`, eles substituem os grupos, para escolher, reordenar ou somar itens
- * próprios com o `Menu.Item`.
+ * próprios com o `Menu.Item`. Os grupos recebem a coluna, e não o header: servem também fora
+ * dele, como no `ColumnsPanel.Item`.
  *
  * @example
  * ```tsx
  * <ColumnMenu.Popup header={header}>
- *   <ColumnMenu.SortItems header={header} />
+ *   <ColumnMenu.SortItems column={header.column} />
  *   <Menu.Separator />
  *   <Menu.Item onClick={openFilter}>Filtrar</Menu.Item>
  * </ColumnMenu.Popup>

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

@@ -1,11 +1,11 @@
-import { hasHeaderFeature } from "../../utils/has-feature.js";
+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
@@ -16,12 +16,13 @@ import { Fragment as Fragment$1 } from "react";
 * (`ColumnMenu.SortItems`), fixação (`ColumnMenu.PinItems`) e visibilidade
 * (`ColumnMenu.HideItem`). Cada grupo só aparece com a feature registrada na tabela e permitida na
 * coluna. Com `children`, eles substituem os grupos, para escolher, reordenar ou somar itens
-* próprios com o `Menu.Item`.
+* próprios com o `Menu.Item`. Os grupos recebem a coluna, e não o header: servem também fora
+* dele, como no `ColumnsPanel.Item`.
 *
 * @example
 * ```tsx
 * <ColumnMenu.Popup header={header}>
-*   <ColumnMenu.SortItems header={header} />
+*   <ColumnMenu.SortItems column={header.column} />
 *   <Menu.Separator />
 *   <Menu.Item onClick={openFilter}>Filtrar</Menu.Item>
 * </ColumnMenu.Popup>
@@ -34,16 +35,16 @@ const ColumnMenuPopup = (props) => {
 	* para a linha separar só os grupos que aparecem.
 	*/
 	const groups = [
-		hasHeaderFeature(header, "rowSortingFeature") && header.column.getCanSort() && /* @__PURE__ */ jsx(ColumnMenuSortItems, {
-			header,
+		hasColumnFeature(header.column, "rowSortingFeature") && header.column.getCanSort() && /* @__PURE__ */ jsx(ColumnMenuSortItems, {
+			column: header.column,
 			labels
 		}, "sort"),
-		hasHeaderFeature(header, "columnPinningFeature") && header.column.getCanPin() && /* @__PURE__ */ jsx(ColumnMenuPinItems, {
-			header,
+		hasColumnFeature(header.column, "columnPinningFeature") && header.column.getCanPin() && /* @__PURE__ */ jsx(ColumnMenuPinItems, {
+			column: header.column,
 			labels
 		}, "pin"),
-		hasHeaderFeature(header, "columnVisibilityFeature") && header.column.getCanHide() && /* @__PURE__ */ jsx(ColumnMenuHideItem, {
-			header,
+		hasColumnFeature(header.column, "columnVisibilityFeature") && header.column.getCanHide() && /* @__PURE__ */ jsx(ColumnMenuHideItem, {
+			column: header.column,
 			labels
 		}, "hide")
 	].filter((group) => group !== false);
@@ -55,7 +56,7 @@ const ColumnMenuPopup = (props) => {
 			"data-component": "ColumnMenu.Popup",
 			className: mergeStateClassNames(["min-w-48"], className),
 			...rest,
-			children: children ?? groups.map((group, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [index > 0 && /* @__PURE__ */ jsx(Menu.Separator, {}), group] }, group.key))
+			children: children ?? groups.map((group, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 && /* @__PURE__ */ jsx(Menu.Separator, {}), group] }, group.key))
 		})
 	}) });
 };

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

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

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

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

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

@@ -1,20 +1,21 @@
-import { HeaderWith } from "../../types/table-with.js";
+import { ColumnWith } from "../../types/table-with.js";
 import "../../types/index.js";
 import { ColumnMenuLabels } from "./column-menu-labels.js";
 import { RowData, TableFeatures } from "@tanstack/react-table";
-import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
 import React from "react";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/column-menu/column-menu-sort-items.d.ts
 export type ColumnMenuSortItemsProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Menu.GroupProps, {
-  /** O header da coluna. Exige `rowSortingFeature`. */
-  header: HeaderWith<TFeatures, TData, 'rowSortingFeature'>;
+  /** A coluna. Exige `rowSortingFeature`. */
+  column: ColumnWith<TFeatures, TData, 'rowSortingFeature'>;
   /** O texto dos itens; os que faltam ficam com o padrão. */
   labels?: Partial<ColumnMenuLabels>;
 }>;
 /**
  * Os itens da ordenação: crescente e decrescente, com um check na direção atual, e "Remover
- * ordenação" com a coluna ordenada. O item troca a ordenação inteira por esta coluna; com Shift
+ * ordenação" com a coluna ordenada. Com `enableSortingRemoval: false` na tabela, que deixa a
+ * lista sempre ordenada, o "Remover ordenação" não aparece. O item troca a ordenação inteira por esta coluna; com Shift
  * (ou o `isMultiSortEvent` da tabela), soma a coluna à ordenação múltipla, como o
  * `DataTable.SortTrigger`.
  *

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

@@ -1,14 +1,15 @@
 import { ColumnMenuCheck } from "./column-menu-check.js";
 import { COLUMN_MENU_DEFAULT_LABELS } from "./column-menu-labels.js";
-import { Icon } from "@lucasbernardosn/react-ui/display/icon";
-import { CaretDownIcon, CaretUpIcon, XIcon } from "@phosphor-icons/react";
+import { useSelector } from "@tanstack/react-store";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { CaretDownIcon, CaretUpIcon, XIcon } from "@phosphor-icons/react";
+import { Icon } from "@lucasbernardosn/react-ui/display/icon";
 import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
-import { useSelector } from "@tanstack/react-store";
 //#region src/components/column-menu/column-menu-sort-items.tsx
 /**
 * Os itens da ordenação: crescente e decrescente, com um check na direção atual, e "Remover
-* ordenação" com a coluna ordenada. O item troca a ordenação inteira por esta coluna; com Shift
+* ordenação" com a coluna ordenada. Com `enableSortingRemoval: false` na tabela, que deixa a
+* lista sempre ordenada, o "Remover ordenação" não aparece. O item troca a ordenação inteira por esta coluna; com Shift
 * (ou o `isMultiSortEvent` da tabela), soma a coluna à ordenação múltipla, como o
 * `DataTable.SortTrigger`.
 *
@@ -16,11 +17,11 @@ import { useSelector } from "@tanstack/react-store";
 * `DataTable.HeaderCell`. Numa coluna que não ordena, não renderiza.
 */
 const ColumnMenuSortItems = (props) => {
-	const { header, labels, ...rest } = props;
-	const { column } = header;
+	const { column, labels, ...rest } = props;
 	/** Re-renderiza quando a direção desta coluna muda. */
 	const sorted = useSelector(column.table.atoms.sorting, () => column.getIsSorted());
 	if (!column.getCanSort()) return null;
+	const canRemoveSorting = column.table.options.enableSortingRemoval !== false;
 	const getLabel = (key) => labels?.[key] ?? COLUMN_MENU_DEFAULT_LABELS[key];
 	/** O mesmo critério do clique no header para somar a coluna à ordenação múltipla. */
 	const toggleSorting = (isDesc, event) => {
@@ -47,7 +48,7 @@ const ColumnMenuSortItems = (props) => {
 					sorted === "desc" && /* @__PURE__ */ jsx(ColumnMenuCheck, {})
 				]
 			}),
-			sorted && /* @__PURE__ */ jsxs(Menu.Item, {
+			sorted && canRemoveSorting && /* @__PURE__ */ jsxs(Menu.Item, {
 				onClick: () => column.clearSorting(),
 				children: [/* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(XIcon, {}) }), getLabel("clearSorting")]
 			})