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

@lucasbernardosn/react-table 0.1.0 → 0.3.0

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

Files changed (174) hide show

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

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

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

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

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

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

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

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

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

@@ -2,7 +2,7 @@ import { ColumnWith } from "../../types/table-with.js";
 import "../../types/index.js";
 import { RowData, TableFeatures } from "@tanstack/react-table";
 import { useRender } from "@base-ui/react";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/columns-panel/columns-panel-item.d.ts
 export type ColumnsPanelItemProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'li'>, {
   /** A coluna. Exige `columnVisibilityFeature`. */
@@ -20,8 +20,11 @@ export type ColumnsPanelItemProps<TFeatures extends TableFeatures, TData extends
  * arrastar. Só a alça pega o arrasto; o resto fica livre para o clique no checkbox. Uma coluna com
  * `enableHiding: false` fica com o checkbox desabilitado.
  *
- * Com `columnPinningFeature`, a coluna fixada troca a alça por um alfinete e não se arrasta: o
- * `columnOrder` só ordena as colunas do centro, e as fixadas ficam nas pontas.
+ * Com `columnPinningFeature`, um alfinete antes da alça abre o menu da fixação, com os itens do
+ * `ColumnMenu.PinItems`: fixa e solta a coluna sem o header, como nos cards ou numa coluna sem o
+ * menu da coluna. Preenchido, a coluna está fixada. A fixada não tem alça e não se arrasta: o
+ * `columnOrder` só ordena as colunas do centro, e as fixadas ficam nas pontas. Numa coluna com
+ * `enablePinning: false`, o alfinete não aparece.
  */
 export declare const ColumnsPanelItem: {
   <TFeatures extends TableFeatures, TData extends RowData>(props: ColumnsPanelItemProps<TFeatures, TData>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

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

@@ -1,22 +1,26 @@
 import { getDefaultColumnLabel } from "../../utils/get-default-column-label.js";
 import { hasColumnFeature } from "../../utils/has-feature.js";
-import { Icon } from "@lucasbernardosn/react-ui/display/icon";
-import { ListIcon, PushPinIcon } from "@phosphor-icons/react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ColumnMenuPinItems } from "../column-menu/column-menu-pin-items.js";
 import { mergeProps, useRender } from "@base-ui/react";
-import { useSelector } from "@tanstack/react-store";
 import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
-import { useSortable } from "@dnd-kit/react/sortable";
+import { useSelector } from "@tanstack/react-store";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ListIcon, PushPinIcon } from "@phosphor-icons/react";
 import { IconButton } from "@lucasbernardosn/react-ui/buttons/icon-button";
 import { Checkbox } from "@lucasbernardosn/react-ui/fields/checkbox";
+import { Menu } from "@lucasbernardosn/react-ui/overlays/menu";
+import { useSortable } from "@dnd-kit/react/sortable";
 //#region src/components/columns-panel/columns-panel-item.tsx
 /**
 * Uma coluna no `ColumnsPanel.Root`: o checkbox de visibilidade, o nome e, à direita, a alça de
 * arrastar. Só a alça pega o arrasto; o resto fica livre para o clique no checkbox. Uma coluna com
 * `enableHiding: false` fica com o checkbox desabilitado.
 *
-* Com `columnPinningFeature`, a coluna fixada troca a alça por um alfinete e não se arrasta: o
-* `columnOrder` só ordena as colunas do centro, e as fixadas ficam nas pontas.
+* Com `columnPinningFeature`, um alfinete antes da alça abre o menu da fixação, com os itens do
+* `ColumnMenu.PinItems`: fixa e solta a coluna sem o header, como nos cards ou numa coluna sem o
+* menu da coluna. Preenchido, a coluna está fixada. A fixada não tem alça e não se arrasta: o
+* `columnOrder` só ordena as colunas do centro, e as fixadas ficam nas pontas. Numa coluna com
+* `enablePinning: false`, o alfinete não aparece.
 */
 const ColumnsPanelItem = (props) => {
 	const { column, index, label, render, className, ref, ...rest } = props;
@@ -52,31 +56,44 @@ const ColumnsPanelItem = (props) => {
 			"data-dragging:bg-gray-3",
 			"data-dragging:shadow-md"
 		], className),
-		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("label", {
-			className: "flex min-w-0 flex-1 items-center gap-2 select-none",
-			children: [/* @__PURE__ */ jsx(Checkbox.Root, {
-				checked: isVisible,
-				disabled: !column.getCanHide(),
-				onCheckedChange: (checked) => column.toggleVisibility(checked),
-				children: /* @__PURE__ */ jsx(Checkbox.Indicator, {})
-			}), /* @__PURE__ */ jsx("span", {
-				className: isVisible ? "truncate" : "truncate text-gray-11",
-				children: columnLabel
-			})]
-		}), pinned === false ? /* @__PURE__ */ jsx(IconButton, {
-			ref: sortable.handleRef,
-			variant: "ghost",
-			size: "2xs",
-			icon: /* @__PURE__ */ jsx(ListIcon, {}),
-			"aria-label": `Mover a coluna ${columnLabel}`,
-			className: "cursor-grab touch-none text-gray-11 active:cursor-grabbing"
-		}) : /* @__PURE__ */ jsxs("span", {
-			className: "inline-flex size-6 shrink-0 items-center justify-center text-gray-11",
-			children: [/* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(PushPinIcon, {}) }), /* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: "Fixada"
-			})]
-		})] })
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsxs("label", {
+				className: "flex min-w-0 flex-1 items-center gap-2 select-none",
+				children: [/* @__PURE__ */ jsx(Checkbox.Root, {
+					checked: isVisible,
+					disabled: !column.getCanHide(),
+					onCheckedChange: (checked) => column.toggleVisibility(checked),
+					children: /* @__PURE__ */ jsx(Checkbox.Indicator, {})
+				}), /* @__PURE__ */ jsx("span", {
+					className: isVisible ? "truncate" : "truncate text-gray-11",
+					children: columnLabel
+				})]
+			}),
+			hasColumnFeature(column, "columnPinningFeature") && column.getCanPin() && /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(Menu.Trigger, { render: /* @__PURE__ */ jsx(IconButton, {
+				variant: "ghost",
+				size: "2xs",
+				icon: /* @__PURE__ */ jsx(PushPinIcon, { weight: pinned ? "fill" : "regular" }),
+				"aria-label": `Fixação da coluna ${columnLabel}`,
+				className: pinned ? "text-gray-12" : "text-gray-11"
+			}) }), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+				align: "end",
+				children: /* @__PURE__ */ jsx(Menu.Popup, {
+					className: "min-w-48",
+					children: /* @__PURE__ */ jsx(ColumnMenuPinItems, { column })
+				})
+			}) })] }),
+			pinned === false ? /* @__PURE__ */ jsx(IconButton, {
+				ref: sortable.handleRef,
+				variant: "ghost",
+				size: "2xs",
+				icon: /* @__PURE__ */ jsx(ListIcon, {}),
+				"aria-label": `Mover a coluna ${columnLabel}`,
+				className: "cursor-grab touch-none text-gray-11 active:cursor-grabbing"
+			}) : /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "inline-flex size-6 shrink-0"
+			})
+		] })
 	};
 	return useRender({
 		render,

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

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

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

@@ -3,7 +3,7 @@ import "../../types/index.js";
 import { Column, RowData, TableFeatures } from "@tanstack/react-table";
 import { useRender } from "@base-ui/react";
 import React from "react";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/columns-panel/columns-panel-root.d.ts
 export type ColumnsPanelRootProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'div'>, {
   /** A tabela. Exige `columnOrderingFeature` e `columnVisibilityFeature`. */

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

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

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

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

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

@@ -1,7 +1,7 @@
 import { Row, RowData, Table, TableFeatures } from "@tanstack/react-table";
 import { useRender } from "@base-ui/react";
 import React from "react";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/data-table/body/data-table-body.d.ts
 export type DataTableBodyProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'div'>, {
   /** A tabela do `useTable`. */

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

@@ -2,15 +2,15 @@ import { hasTableFeature } from "../../../utils/has-feature.js";
 import { getDataTableLoadingWithoutRows } from "../loading/get-data-table-loading-without-rows.js";
 import { useDataTableLoadingInert } from "../loading/use-data-table-loading-inert.js";
 import { useDataTablePageScrollReset } from "../pagination/use-data-table-page-scroll-reset.js";
-import { DATA_TABLE_GRID_CLASS_NAMES } from "../root/data-table-grid-classes.js";
+import { dataTableGridClassNames } from "../root/data-table-grid-class-names.js";
 import { DataTableRow } from "./data-table-row.js";
 import { useDataTableRowFocusRecovery } from "./use-data-table-row-focus-recovery.js";
-import { jsx } from "react/jsx-runtime";
 import { mergeProps, useRender } from "@base-ui/react";
-import { useSelector } from "@tanstack/react-store";
-import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
-import { Fragment as Fragment$1 } from "react";
 import { Skeleton } from "@lucasbernardosn/react-ui/feedback/skeleton";
+import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+import { useSelector } from "@tanstack/react-store";
+import { Fragment } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/data-table/body/data-table-body.tsx
 /**
 * O corpo da tabela (`role="rowgroup"`).
@@ -63,7 +63,7 @@ const DataTableBody = (props) => {
 		return hasTableFeature(table, "columnVisibilityFeature") ? table.getVisibleLeafColumns().length : table.getAllLeafColumns().length;
 	});
 	/** Com render-prop ou sem `children`, o laço é daqui; com nós comuns, de quem usa. */
-	const content = typeof children === "function" || children === void 0 ? rows.map((row) => /* @__PURE__ */ jsx(Fragment$1, { children: children === void 0 ? /* @__PURE__ */ jsx(DataTableRow, { row }) : children(row) }, row.id)) : children;
+	const content = typeof children === "function" || children === void 0 ? rows.map((row) => /* @__PURE__ */ jsx(Fragment, { children: children === void 0 ? /* @__PURE__ */ jsx(DataTableRow, { row }) : children(row) }, row.id)) : children;
 	/**
 	* Fora da árvore de acessibilidade, que já sabe da espera pelo `aria-busy` do `DataTable.Root`.
 	* A grade é a da `DataTable.Row`, e o espaçamento repete o da `DataTable.Cell`.
@@ -71,7 +71,7 @@ const DataTableBody = (props) => {
 	const ghostRows = Array.from({ length: loadingRowCount }, (_, rowIndex) => /* @__PURE__ */ jsx("div", {
 		"aria-hidden": true,
 		"data-component": "DataTable.GhostRow",
-		className: mergeTwClassNames([DATA_TABLE_GRID_CLASS_NAMES, "last:border-b-0"]),
+		className: mergeTwClassNames([dataTableGridClassNames, "last:border-b-0"]),
 		children: Array.from({ length: ghostColumnCount }, (_, columnIndex) => /* @__PURE__ */ jsx("div", {
 			className: "h-(--data-table-row-height) content-center px-(--data-table-cell-padding)",
 			children: /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-3/4" })

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

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

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

@@ -1,6 +1,6 @@
 import { Cell, RowData, TableFeatures } from "@tanstack/react-table";
 import { useRender } from "@base-ui/react";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/data-table/body/data-table-cell.d.ts
 export type DataTableCellProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'div'>, {
   /** A célula da linha. */

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { RowData, Table, TableFeatures } from "@tanstack/react-table";
 import { useRender } from "@base-ui/react";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/data-table/body/data-table-empty.d.ts
 export type DataTableEmptyProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'div'>, {
   /** A tabela do `useTable`. */

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

@@ -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 { useSelector } from "@tanstack/react-store";
 import { mergeTwClassNames } from "@lucasbernardosn/react-ui/utils";
+import { useSelector } from "@tanstack/react-store";
+import { jsx, jsxs } from "react/jsx-runtime";
 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-empty.js.map CHANGED Viewed

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

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

@@ -1,7 +1,7 @@
 import { Cell, Row, RowData, TableFeatures } from "@tanstack/react-table";
 import { useRender } from "@base-ui/react";
 import React from "react";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 //#region src/components/data-table/body/data-table-row.d.ts
 export type DataTableRowProps<TFeatures extends TableFeatures, TData extends RowData> = MergeOverride<useRender.ComponentProps<'div'>, {
   /** A linha do row model. */
@@ -35,9 +35,9 @@ export type DataTableRowProps<TFeatures extends TableFeatures, TData extends Row
  * dentro, as setas ficam com o campo.
  *
  * O fundo fica na variável `--data-table-row-background`, que as células fixadas repetem: o
- * hover e a selecionada a trocam para `gray-3`, e as duas juntas, para `gray-4`. Para colorir uma
- * linha, troque a variável, e não use `bg-*`, que deixaria as fixadas com a cor antiga. A cor do
- * texto fica na linha, e as células herdam.
+ * hover a troca para `gray-2`, a selecionada para `gray-3`, e as duas juntas, para `gray-4`. Para
+ * colorir uma linha, troque a variável, e não use `bg-*`, que deixaria as fixadas com a cor
+ * antiga. A cor do texto fica na linha, e as células herdam.
  *
  * @example
  * ```tsx