@lucasbernardosn/react-table 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Lucas Bernardo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,269 @@
-# Temporary Holding Version
+# @lucasbernardosn/react-table
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+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 repositório](https://github.com/LucasBernardoSN/react-monorepo#uso).
+
+## 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/_virtual/_rolldown/runtime.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll };

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

@@ -0,0 +1,8 @@
+//#region src/components/column-menu/column-menu-check.d.ts
+/**
+ * O check do estado atual num item do menu da coluna, encostado à direita. Decorativo, como todo
+ * `Icon`: o `Menu` do `ui` ainda não tem item de rádio, que anunciaria o marcado.
+ */
+export declare const ColumnMenuCheck: () => import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=column-menu-check.d.ts.map

package/dist/components/column-menu/column-menu-check.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-check.d.ts","names":[],"sources":["../../../src/components/column-menu/column-menu-check.tsx"],"mappings":";;;;;qBAOa,uCAAe,IAAA"}

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

@@ -0,0 +1,17 @@
+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
+* `Icon`: o `Menu` do `ui` ainda não tem item de rádio, que anunciaria o marcado.
+*/
+const ColumnMenuCheck = () => /* @__PURE__ */ jsx(Icon, {
+	"data-component": "ColumnMenu.Check",
+	render: /* @__PURE__ */ jsx(CheckIcon, {}),
+	className: "ms-auto"
+});
+//#endregion
+export { ColumnMenuCheck };
+
+//# sourceMappingURL=column-menu-check.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-check.js","names":[],"sources":["../../../src/components/column-menu/column-menu-check.tsx"],"sourcesContent":["import { Icon } from '@lucasbernardosn/react-ui/display/icon';\nimport { CheckIcon } from '@phosphor-icons/react';\n\n/**\n * O check do estado atual num item do menu da coluna, encostado à direita. Decorativo, como todo\n * `Icon`: o `Menu` do `ui` ainda não tem item de rádio, que anunciaria o marcado.\n */\nexport const ColumnMenuCheck = () => (\n  <Icon\n    data-component=\"ColumnMenu.Check\"\n    render={<CheckIcon />}\n    className=\"ms-auto\"\n  />\n);\n"],"mappings":";;;;;;;;AAOA,MAAa,wBACX,oBAAC,MAAD;CACE,kBAAe;CACf,QAAQ,oBAAC,WAAD,CAAY,CAAA;CACpB,WAAU;AACX,CAAA"}

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

@@ -0,0 +1,23 @@
+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";
+//#region src/components/column-menu/column-menu-hide-item.d.ts
+export type ColumnMenuHideItemProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Menu.ItemProps, {
+  /** A coluna. Exige `columnVisibilityFeature`. */
+  column: ColumnWith<TFeatures, TData, 'columnVisibilityFeature'>;
+  /** O texto do item, em `hide`; os outros textos não se aplicam aqui. */
+  labels?: Partial<ColumnMenuLabels>;
+}>;
+/**
+ * O item que esconde a coluna. Ela volta pelo `ColumnsPanel`, ou pelo estado de visibilidade no
+ * app. Numa coluna com `enableHiding: false`, não renderiza.
+ */
+export declare const ColumnMenuHideItem: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: ColumnMenuHideItemProps<TFeatures, TData>): import("react").JSX.Element | null;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=column-menu-hide-item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-hide-item.d.ts","names":[],"sources":["../../../src/components/column-menu/column-menu-hide-item.tsx"],"mappings":";;;;;;;YAYY,wBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,KAAK;;EAGH,QAAQ,WAAW,WAAW;;EAE9B,SAAS,QAAQ;;;;;;qBAQR;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,wBAAwB,WAAW,yBAAM,IAAA"}

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

@@ -0,0 +1,27 @@
+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 { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
+//#region src/components/column-menu/column-menu-hide-item.tsx
+/**
+* O item que esconde a coluna. Ela volta pelo `ColumnsPanel`, ou pelo estado de visibilidade no
+* app. Numa coluna com `enableHiding: false`, não renderiza.
+*/
+const ColumnMenuHideItem = (props) => {
+	const { column, labels, children, ...rest } = props;
+	if (!column.getCanHide()) return null;
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		...mergeProps({
+			"data-component": "ColumnMenu.HideItem",
+			onClick: () => column.toggleVisibility(false)
+		}, rest),
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(EyeSlashIcon, {}) }), labels?.hide ?? COLUMN_MENU_DEFAULT_LABELS.hide] })
+	});
+};
+ColumnMenuHideItem.displayName = "ColumnMenu.HideItem";
+//#endregion
+export { ColumnMenuHideItem };
+
+//# sourceMappingURL=column-menu-hide-item.js.map

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

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

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

@@ -0,0 +1,21 @@
+//#region src/components/column-menu/column-menu-labels.d.ts
+/** O texto de cada item do menu da coluna. */
+export type ColumnMenuLabels = {
+  /** Ordena a coluna em ordem crescente. */
+  sortAsc: string;
+  /** Ordena a coluna em ordem decrescente. */
+  sortDesc: string;
+  /** Tira a coluna da ordenação. */
+  clearSorting: string;
+  /** Fixa a coluna no início. */
+  pinStart: string;
+  /** Fixa a coluna no fim. */
+  pinEnd: string;
+  /** Solta a coluna fixada. */
+  unpin: string;
+  /** Esconde a coluna. */
+  hide: string;
+};
+export declare const COLUMN_MENU_DEFAULT_LABELS: ColumnMenuLabels;
+//#endregion
+//# sourceMappingURL=column-menu-labels.d.ts.map

package/dist/components/column-menu/column-menu-labels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-labels.d.ts","names":[],"sources":["../../../src/components/column-menu/column-menu-labels.ts"],"mappings":";;YACY;;EAEV;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;qBAGW,4BAA4B"}

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

@@ -0,0 +1,14 @@
+//#region src/components/column-menu/column-menu-labels.ts
+const COLUMN_MENU_DEFAULT_LABELS = {
+	sortAsc: "Crescente",
+	sortDesc: "Decrescente",
+	clearSorting: "Remover ordenação",
+	pinStart: "Fixar no início",
+	pinEnd: "Fixar no fim",
+	unpin: "Desafixar",
+	hide: "Ocultar coluna"
+};
+//#endregion
+export { COLUMN_MENU_DEFAULT_LABELS };
+
+//# sourceMappingURL=column-menu-labels.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-labels.js","names":[],"sources":["../../../src/components/column-menu/column-menu-labels.ts"],"sourcesContent":["/** O texto de cada item do menu da coluna. */\nexport type ColumnMenuLabels = {\n  /** Ordena a coluna em ordem crescente. */\n  sortAsc: string;\n  /** Ordena a coluna em ordem decrescente. */\n  sortDesc: string;\n  /** Tira a coluna da ordenação. */\n  clearSorting: string;\n  /** Fixa a coluna no início. */\n  pinStart: string;\n  /** Fixa a coluna no fim. */\n  pinEnd: string;\n  /** Solta a coluna fixada. */\n  unpin: string;\n  /** Esconde a coluna. */\n  hide: string;\n};\n\nexport const COLUMN_MENU_DEFAULT_LABELS: ColumnMenuLabels = {\n  sortAsc: 'Crescente',\n  sortDesc: 'Decrescente',\n  clearSorting: 'Remover ordenação',\n  pinStart: 'Fixar no início',\n  pinEnd: 'Fixar no fim',\n  unpin: 'Desafixar',\n  hide: 'Ocultar coluna',\n};\n"],"mappings":";AAkBA,MAAa,6BAA+C;CAC1D,SAAS;CACT,UAAU;CACV,cAAc;CACd,UAAU;CACV,QAAQ;CACR,OAAO;CACP,MAAM;AACR"}

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

@@ -0,0 +1,25 @@
+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";
+//#region src/components/column-menu/column-menu-pin-items.d.ts
+export type ColumnMenuPinItemsProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<Menu.GroupProps, {
+  /** A coluna. Exige `columnPinningFeature`. */
+  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. Numa coluna de grupo, fixa as
+ * colunas do grupo. Numa coluna com `enablePinning: false`, não renderiza.
+ */
+export declare const ColumnMenuPinItems: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: ColumnMenuPinItemsProps<TFeatures, TData>): import("react").JSX.Element | null;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=column-menu-pin-items.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-pin-items.d.ts","names":[],"sources":["../../../src/components/column-menu/column-menu-pin-items.tsx"],"mappings":";;;;;;;YAaY,wBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,KAAK;;EAGH,QAAQ,WAAW,WAAW;;EAE9B,SAAS,QAAQ;;;;;;;;qBAUR;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,wBAAwB,WAAW,yBAAM,IAAA"}

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

@@ -0,0 +1,64 @@
+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 { 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
+* 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. Numa coluna de grupo, fixa as
+* colunas do grupo. Numa coluna com `enablePinning: false`, não renderiza.
+*/
+const ColumnMenuPinItems = (props) => {
+	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;
+	const getLabel = (key) => labels?.[key] ?? COLUMN_MENU_DEFAULT_LABELS[key];
+	/**
+	* Fixa no começo da lista do fim, a mais perto do centro. O `column.pin('end')` acrescenta no
+	* fim da lista, que é a borda da tabela: a coluna passaria das que já estavam fixadas, como a de
+	* ações, enquanto no início ela fica junto do centro. Usa as colunas-folha, como o `pin`.
+	*/
+	const pinToEnd = () => {
+		const columnIds = column.getLeafColumns().map((leaf) => leaf.id);
+		column.table.setColumnPinning((old) => ({
+			start: old.start.filter((id) => !columnIds.includes(id)),
+			end: [...columnIds, ...old.end.filter((id) => !columnIds.includes(id))]
+		}));
+	};
+	return /* @__PURE__ */ jsxs(Menu.Group, {
+		"data-component": "ColumnMenu.PinItems",
+		...rest,
+		children: [
+			/* @__PURE__ */ jsxs(Menu.Item, {
+				onClick: () => column.pin("start"),
+				children: [
+					/* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(PushPinIcon, {}) }),
+					getLabel("pinStart"),
+					pinned === "start" && /* @__PURE__ */ jsx(ColumnMenuCheck, {})
+				]
+			}),
+			/* @__PURE__ */ jsxs(Menu.Item, {
+				onClick: pinToEnd,
+				children: [
+					/* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(PushPinIcon, {}) }),
+					getLabel("pinEnd"),
+					pinned === "end" && /* @__PURE__ */ jsx(ColumnMenuCheck, {})
+				]
+			}),
+			pinned && /* @__PURE__ */ jsxs(Menu.Item, {
+				onClick: () => column.pin(false),
+				children: [/* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(PushPinSlashIcon, {}) }), getLabel("unpin")]
+			})
+		]
+	});
+};
+ColumnMenuPinItems.displayName = "ColumnMenu.PinItems";
+//#endregion
+export { ColumnMenuPinItems };
+
+//# sourceMappingURL=column-menu-pin-items.js.map

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

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

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

@@ -0,0 +1,40 @@
+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";
+//#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. */
+  header: Header<TFeatures, TData>;
+  /** O texto dos itens padrão; os que faltam ficam com o padrão. Sem efeito com `children`. */
+  labels?: Partial<ColumnMenuLabels>;
+  /** As props do `Menu.Positioner`, como `side` e `align`. */
+  positionerProps?: Menu.PositionerProps;
+}>;
+/**
+ * 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.
+ *
+ * Sem `children`, mostra os grupos padrão separados por linhas: ordenação
+ * (`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`. 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 column={header.column} />
+ *   <Menu.Separator />
+ *   <Menu.Item onClick={openFilter}>Filtrar</Menu.Item>
+ * </ColumnMenu.Popup>
+ * ```
+ */
+export declare const ColumnMenuPopup: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: ColumnMenuPopupProps<TFeatures, TData>): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=column-menu-popup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"column-menu-popup.d.ts","names":[],"sources":["../../../src/components/column-menu/column-menu-popup.tsx"],"mappings":";;;;;YAWY,qBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,KAAK;;EAGH,QAAQ,OAAO,WAAW;;EAE1B,SAAS,QAAQ;;EAEjB,kBAAkB,KAAK;;;;;;;;;;;;;;;;;;;;;;;qBAyBd;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,qBAAqB,WAAW,yBAAM,IAAA"}