@lucasbernardosn/react-table 0.0.0-stage → 0.2.0

package/dist/components/columns-panel/columns-panel-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"columns-panel-root.d.ts","names":[],"sources":["../../../src/components/columns-panel/columns-panel-root.tsx"],"mappings":";;;;;;;YAgBY,sBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,OAAO,UACL,WACA;;;;;;EAQF,WACI,MAAM,cACJ,QAAQ,OAAO,WAAW,QAAQ,kBAAkB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA+DvD;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,sBAAsB,WAAW,SAAM,MAAA,IAAA"}

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

@@ -0,0 +1,134 @@
+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 { isSortable } from "@dnd-kit/react/sortable";
+import { RestrictToVerticalAxis } from "@dnd-kit/abstract/modifiers";
+import { RestrictToElement } from "@dnd-kit/dom/modifiers";
+import { DragDropProvider } from "@dnd-kit/react";
+//#region src/components/columns-panel/columns-panel-root.tsx
+/** O nome de cada lista, na ordem das regiões: fixadas no início, centro e fixadas no fim. */
+const GROUP_LABELS = [
+	"Colunas fixadas no início",
+	"Colunas",
+	"Colunas fixadas no fim"
+];
+/**
+* A linha entre as listas, só visual (o alfinete já diz quais são fixadas), fica nas das fixadas,
+* do lado do centro, com o respiro. A lista do centro termina no primeiro e no último item: o
+* arrasto fica preso a ela, e com o respiro dentro dela, o item arrastado cobriria a linha.
+*/
+const GROUP_CLASS_NAMES = [
+	"mb-1 border-gray-6 border-b pb-1",
+	void 0,
+	"mt-1 border-gray-6 border-t pt-1"
+];
+/** As pontas sem fixadas: a mesma referência, para a tupla não mudar à toa. */
+const NO_COLUMNS = [];
+/** Se a coluna é de dados, e não de exibição (sem `accessorFn`, como a de seleção). */
+const isDataColumn = (column) => column.accessorFn !== void 0;
+/**
+* A lista das colunas da tabela: marca quais aparecem e arrasta para mudar a ordem. Para um
+* popover ou uma gaveta; a posição, o gatilho e o "restaurar" (`table.resetColumnOrder()`,
+* `table.resetColumnVisibility()`) são do app.
+*
+* Lista as colunas de dados. As de exibição (sem `accessorFn`, como a de seleção e a de ações)
+* ficam fora e no lugar: reordenar só troca as outras entre si. Com `columnPinningFeature`, a
+* tela vira até três listas (fixadas no início, centro e fixadas no fim), e só a do centro se
+* arrasta.
+*
+* O arrasto é pela alça, com o ponteiro ou o teclado (Espaço pega, setas movem, Espaço solta, Esc
+* cancela), e fica preso à lista do centro: não passa por cima das fixadas. O `Root` assina a
+* ordem e o pinning, e cada `ColumnsPanel.Item`, a visibilidade da coluna dele: funciona com o
+* dono da tabela em `() => null`.
+*
+* @example
+* ```tsx
+* <ColumnsPanel.Root table={table}>
+*   {(column, index) => (
+*     <ColumnsPanel.Item
+*       column={column}
+*       index={index}
+*       label={labels[column.id]}
+*     />
+*   )}
+* </ColumnsPanel.Root>
+* ```
+*/
+const ColumnsPanelRoot = (props) => {
+	const { table, render, className, children, ref, ...rest } = props;
+	/** A lista do centro, a única que se arrasta: o arrasto fica preso a ela. */
+	const centerListRef = useRef(null);
+	const groups = useSelector(table.store, () => hasTableFeature(table, "columnPinningFeature") ? [
+		table.getStartLeafColumns(),
+		table.getCenterLeafColumns(),
+		table.getEndLeafColumns()
+	] : [
+		NO_COLUMNS,
+		table.getAllLeafColumns(),
+		NO_COLUMNS
+	], { compare: shallow }).map((columns) => columns.filter(isDataColumn));
+	/** Preso à lista do centro, e só na vertical: fora dela não há destino. */
+	const modifiers = useMemo(() => [RestrictToVerticalAxis, RestrictToElement.configure({ element: () => centerListRef.current })], []);
+	const handleDragEnd = (event) => {
+		if (event.canceled) {
+			/** O Esc que cancela o arrasto pelo teclado não segue adiante: fecharia o popover em volta. */
+			if (event.nativeEvent instanceof KeyboardEvent && event.nativeEvent.key === "Escape") event.nativeEvent.stopPropagation();
+			return;
+		}
+		const { source } = event.operation;
+		/**
+		* A posição final vem do item arrastado, e não do destino: durante o arrasto, a lista já se
+		* reordena com o destino mais próximo, e soltar em cima de uma fixada, que não aceita nada,
+		* chega sem destino. Sem isso, a lista ficaria na ordem nova e a tabela, na antiga.
+		*/
+		if (!isSortable(source) || source.initialIndex === source.index) return;
+		table.setColumnOrder(getColumnsPanelColumnOrder(table.getAllLeafColumns().map((column) => column.id), (groups[1] ?? []).map((column) => column.id), source.initialIndex, source.index));
+	};
+	/**
+	* Com render-prop ou sem `children`, o laço é daqui, uma lista por grupo com colunas; com nós
+	* comuns, de quem usa.
+	*/
+	const content = typeof children === "function" || children === void 0 ? groups.map((columns, groupIndex) => columns.length > 0 && /* @__PURE__ */ jsx("ul", {
+		ref: groupIndex === 1 ? centerListRef : void 0,
+		"aria-label": GROUP_LABELS[groupIndex],
+		className: mergeTwClassNames([
+			"flex",
+			"flex-col",
+			"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, {
+			column,
+			index
+		}) : children(column, index) }, column.id))
+	}, groupIndex)) : children;
+	const element = useRender({
+		render,
+		ref,
+		defaultTagName: "div",
+		props: mergeProps({
+			"data-component": "ColumnsPanel.Root",
+			className: mergeTwClassNames([
+				"flex",
+				"w-56",
+				"flex-col"
+			], className),
+			children: content
+		}, rest)
+	});
+	return /* @__PURE__ */ jsx(DragDropProvider, {
+		modifiers,
+		onDragEnd: handleDragEnd,
+		children: element
+	});
+};
+ColumnsPanelRoot.displayName = "ColumnsPanel.Root";
+//#endregion
+export { ColumnsPanelRoot };
+
+//# sourceMappingURL=columns-panel-root.js.map

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

@@ -0,0 +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"}

package/dist/components/columns-panel/get-columns-panel-column-order.d.ts

@@ -0,0 +1,16 @@
+//#region src/components/columns-panel/get-columns-panel-column-order.d.ts
+/**
+ * A ordem completa das colunas depois de um arrasto na lista do centro. Move o item de
+ * `fromIndex` para `toIndex` entre os `centerIds`, e a nova ordem deles ocupa as posições que eles
+ * já tinham em `columnIds`: as colunas fora da lista (as de exibição e as fixadas) ficam onde
+ * estão.
+ *
+ * @example
+ * ```ts
+ * getColumnsPanelColumnOrder(['select', 'name', 'age', 'city'], ['name', 'age', 'city'], 0, 2);
+ * // → ['select', 'age', 'city', 'name']
+ * ```
+ */
+export declare const getColumnsPanelColumnOrder: (columnIds: readonly string[], centerIds: readonly string[], fromIndex: number, toIndex: number) => string[];
+//#endregion
+//# sourceMappingURL=get-columns-panel-column-order.d.ts.map

package/dist/components/columns-panel/get-columns-panel-column-order.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-columns-panel-column-order.d.ts","names":[],"sources":["../../../src/components/columns-panel/get-columns-panel-column-order.ts"],"mappings":";;;;;;;;;;;;;qBAca,6BACX,8BACA,8BACA,mBACA"}

package/dist/components/columns-panel/get-columns-panel-column-order.js

@@ -0,0 +1,24 @@
+import { arrayMove } from "@dnd-kit/helpers";
+//#region src/components/columns-panel/get-columns-panel-column-order.ts
+/**
+* A ordem completa das colunas depois de um arrasto na lista do centro. Move o item de
+* `fromIndex` para `toIndex` entre os `centerIds`, e a nova ordem deles ocupa as posições que eles
+* já tinham em `columnIds`: as colunas fora da lista (as de exibição e as fixadas) ficam onde
+* estão.
+*
+* @example
+* ```ts
+* getColumnsPanelColumnOrder(['select', 'name', 'age', 'city'], ['name', 'age', 'city'], 0, 2);
+* // → ['select', 'age', 'city', 'name']
+* ```
+*/
+const getColumnsPanelColumnOrder = (columnIds, centerIds, fromIndex, toIndex) => {
+	const nextCenterIds = arrayMove([...centerIds], fromIndex, toIndex);
+	const centerIdSet = new Set(centerIds);
+	let nextIndex = 0;
+	return columnIds.map((columnId) => centerIdSet.has(columnId) ? nextCenterIds[nextIndex++] ?? columnId : columnId);
+};
+//#endregion
+export { getColumnsPanelColumnOrder };
+
+//# sourceMappingURL=get-columns-panel-column-order.js.map

package/dist/components/columns-panel/get-columns-panel-column-order.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-columns-panel-column-order.js","names":[],"sources":["../../../src/components/columns-panel/get-columns-panel-column-order.ts"],"sourcesContent":["import { arrayMove } from '@dnd-kit/helpers';\n\n/**\n * A ordem completa das colunas depois de um arrasto na lista do centro. Move o item de\n * `fromIndex` para `toIndex` entre os `centerIds`, e a nova ordem deles ocupa as posições que eles\n * já tinham em `columnIds`: as colunas fora da lista (as de exibição e as fixadas) ficam onde\n * estão.\n *\n * @example\n * ```ts\n * getColumnsPanelColumnOrder(['select', 'name', 'age', 'city'], ['name', 'age', 'city'], 0, 2);\n * // → ['select', 'age', 'city', 'name']\n * ```\n */\nexport const getColumnsPanelColumnOrder = (\n  columnIds: readonly string[],\n  centerIds: readonly string[],\n  fromIndex: number,\n  toIndex: number,\n) => {\n  const nextCenterIds = arrayMove([...centerIds], fromIndex, toIndex);\n  const centerIdSet = new Set(centerIds);\n\n  let nextIndex = 0;\n\n  return columnIds.map((columnId) =>\n    centerIdSet.has(columnId)\n      ? (nextCenterIds[nextIndex++] ?? columnId)\n      : columnId,\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAa,8BACX,WACA,WACA,WACA,YACG;CACH,MAAM,gBAAgB,UAAU,CAAC,GAAG,SAAS,GAAG,WAAW,OAAO;CAClE,MAAM,cAAc,IAAI,IAAI,SAAS;CAErC,IAAI,YAAY;CAEhB,OAAO,UAAU,KAAK,aACpB,YAAY,IAAI,QAAQ,IACnB,cAAc,gBAAgB,WAC/B,QACN;AACF"}

package/dist/components/columns-panel/index.d.ts

@@ -0,0 +1,2 @@
+import { index_parts_d_exports } from "./index.parts.js";
+export { index_parts_d_exports as ColumnsPanel };

package/dist/components/columns-panel/index.js

@@ -0,0 +1,2 @@
+import { index_parts_exports } from "./index.parts.js";
+export { index_parts_exports as ColumnsPanel };

package/dist/components/columns-panel/index.parts.d.ts

@@ -0,0 +1,8 @@
+import { ColumnsPanelItem, ColumnsPanelItemProps } from "./columns-panel-item.js";
+import { ColumnsPanelRoot, ColumnsPanelRootProps } from "./columns-panel-root.js";
+declare namespace index_parts_d_exports {
+  export { ColumnsPanelItem as Item, ColumnsPanelItemProps as ItemProps, ColumnsPanelRoot as Root, ColumnsPanelRootProps as RootProps };
+}
+//#endregion
+export { ColumnsPanelItem as Item, type ColumnsPanelItemProps as ItemProps, ColumnsPanelRoot as Root, type ColumnsPanelRootProps as RootProps, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/components/columns-panel/index.parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.d.ts","names":[],"sources":["../../../src/components/columns-panel/index.parts.ts"],"mappings":""}

package/dist/components/columns-panel/index.parts.js

@@ -0,0 +1,12 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { ColumnsPanelItem } from "./columns-panel-item.js";
+import { ColumnsPanelRoot } from "./columns-panel-root.js";
+//#region src/components/columns-panel/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Item: () => ColumnsPanelItem,
+	Root: () => ColumnsPanelRoot
+});
+//#endregion
+export { ColumnsPanelItem as Item, ColumnsPanelRoot as Root, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/components/columns-panel/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../src/components/columns-panel/index.parts.ts"],"sourcesContent":["export { ColumnsPanelItem as Item } from './columns-panel-item';\nexport { ColumnsPanelRoot as Root } from './columns-panel-root';\n\n/* types */\n\nexport type { ColumnsPanelItemProps as ItemProps } from './columns-panel-item';\nexport type { ColumnsPanelRootProps as RootProps } from './columns-panel-root';\n"],"mappings":""}

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

@@ -0,0 +1,58 @@
+import { Row, RowData, Table, TableFeatures } from "@tanstack/react-table";
+import { useRender } from "@base-ui/react";
+import React from "react";
+import { MergeOverride } from "@lucasbernardosn/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`. */
+  table: Table<TFeatures, TData>;
+  /**
+   * Uma função que recebe cada linha do row model e devolve o elemento dela. Com nós comuns,
+   * quem usa faz o laço.
+   * @default (row) => <DataTable.Row row={row} />
+   */
+  children?: React.ReactNode | ((row: Row<TFeatures, TData>) => React.ReactNode);
+  /**
+   * Quantas linhas-fantasma o corpo desenha na carga sem linhas, com `loadingFeature`.
+   * @default 10
+   */
+  loadingRowCount?: number;
+}>;
+/**
+ * O corpo da tabela (`role="rowgroup"`).
+ *
+ * Com render-prop ou sem `children`, faz o laço sozinho: assina as linhas do row model e
+ * re-renderiza quando os dados, a ordenação ou a página mudam, sem o dono da tabela precisar
+ * re-renderizar. Com nós comuns, o laço é de quem usa, e o dono precisa re-renderizar quando as
+ * linhas mudam.
+ *
+ * Marca as linhas com `content-visibility: auto`: o que está fora da tela não entra no estilo,
+ * no layout nem na pintura, e o corpo aguenta centenas de linhas sem virtualização. Para
+ * desligar, passe `className="*:[content-visibility:visible]"`.
+ *
+ * Com `activeRowFeature`, quando a linha com foco sai (apagada, de outra página, filtrada), o foco
+ * volta para a linha ativa, se ela ficou, ou para a que tomou o lugar da que saiu.
+ *
+ * Com `rowPaginationFeature`, trocar de página ou de tamanho volta a rolagem vertical ao topo.
+ *
+ * Com `loadingFeature`, fica bloqueado (`inert`) enquanto carrega. Sem linhas, desenha
+ * linhas-fantasma com skeleton (`loadingRowCount`); com linhas, cada célula troca o conteúdo por um
+ * skeleton (ver `DataTable.Root`).
+ *
+ * @example
+ * ```tsx
+ * <DataTable.Body table={table}>
+ *   {(row) => (
+ *     <DataTable.Row row={row}>
+ *       {(cell) => <DataTable.Cell cell={cell} />}
+ *     </DataTable.Row>
+ *   )}
+ * </DataTable.Body>
+ * ```
+ */
+export declare const DataTableBody: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableBodyProps<TFeatures, TData>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-body.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-body.d.ts","names":[],"sources":["../../../../src/components/data-table/body/data-table-body.tsx"],"mappings":";;;;;YAgBY,mBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,OAAO,MAAM,WAAW;;;;;;EAMxB,WACI,MAAM,cACJ,KAAK,IAAI,WAAW,WAAW,MAAM;;;;;EAK3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAoCS;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,mBAAmB,WAAW,SAAM,MAAA,+BAAA,MAAA"}

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

@@ -0,0 +1,99 @@
+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 { 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";
+//#region src/components/data-table/body/data-table-body.tsx
+/**
+* O corpo da tabela (`role="rowgroup"`).
+*
+* Com render-prop ou sem `children`, faz o laço sozinho: assina as linhas do row model e
+* re-renderiza quando os dados, a ordenação ou a página mudam, sem o dono da tabela precisar
+* re-renderizar. Com nós comuns, o laço é de quem usa, e o dono precisa re-renderizar quando as
+* linhas mudam.
+*
+* Marca as linhas com `content-visibility: auto`: o que está fora da tela não entra no estilo,
+* no layout nem na pintura, e o corpo aguenta centenas de linhas sem virtualização. Para
+* desligar, passe `className="*:[content-visibility:visible]"`.
+*
+* Com `activeRowFeature`, quando a linha com foco sai (apagada, de outra página, filtrada), o foco
+* volta para a linha ativa, se ela ficou, ou para a que tomou o lugar da que saiu.
+*
+* Com `rowPaginationFeature`, trocar de página ou de tamanho volta a rolagem vertical ao topo.
+*
+* Com `loadingFeature`, fica bloqueado (`inert`) enquanto carrega. Sem linhas, desenha
+* linhas-fantasma com skeleton (`loadingRowCount`); com linhas, cada célula troca o conteúdo por um
+* skeleton (ver `DataTable.Root`).
+*
+* @example
+* ```tsx
+* <DataTable.Body table={table}>
+*   {(row) => (
+*     <DataTable.Row row={row}>
+*       {(cell) => <DataTable.Cell cell={cell} />}
+*     </DataTable.Row>
+*   )}
+* </DataTable.Body>
+* ```
+*/
+const DataTableBody = (props) => {
+	const { table, loadingRowCount = 10, render, className, children, ref, ...rest } = props;
+	/**
+	* Memoizado pelo TanStack: o array só muda com as linhas. Tamanho, colunas e seleção mudam o
+	* store, mas não o row model, e não re-renderizam o corpo.
+	*/
+	const rows = useSelector(table.store, () => table.getRowModel().rows);
+	const focusRecovery = useDataTableRowFocusRecovery(table, rows);
+	useDataTablePageScrollReset(table, focusRecovery.ref);
+	useDataTableLoadingInert(table, focusRecovery.ref);
+	/**
+	* Quantas colunas cada linha-fantasma tem, ou 0 sem elas: só na carga sem linhas. Re-renderiza
+	* quando as linhas-fantasma entram ou saem, ou quando as colunas visíveis mudam durante a carga.
+	*/
+	const ghostColumnCount = useSelector(table.store, () => {
+		if (!getDataTableLoadingWithoutRows(table)) return 0;
+		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;
+	/**
+	* 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`.
+	*/
+	const ghostRows = Array.from({ length: loadingRowCount }, (_, rowIndex) => /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		"data-component": "DataTable.GhostRow",
+		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" })
+		}, columnIndex))
+	}, rowIndex));
+	const baseProps = {
+		"data-component": "DataTable.Body",
+		role: "rowgroup",
+		onFocus: focusRecovery.onFocus,
+		onBlur: focusRecovery.onBlur,
+		className: mergeTwClassNames(["*:[content-visibility:auto]", "*:[contain-intrinsic-height:auto_calc(var(--data-table-row-height)+1px)]"], className),
+		children: ghostColumnCount > 0 ? ghostRows : content
+	};
+	return useRender({
+		render,
+		ref: [focusRecovery.ref, ref ?? null],
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+DataTableBody.displayName = "DataTable.Body";
+//#endregion
+export { DataTableBody };
+
+//# sourceMappingURL=data-table-body.js.map

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

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

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

@@ -0,0 +1,26 @@
+import { Cell, RowData, TableFeatures } from "@tanstack/react-table";
+import { useRender } from "@base-ui/react";
+import { MergeOverride } from "@lucasbernardosn/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. */
+  cell: Cell<TFeatures, TData>;
+}>;
+/**
+ * Uma célula do corpo (`role="cell"`). Sem `children`, mostra o `cell` da definição da coluna;
+ * com eles, mostra os `children`.
+ *
+ * Trunca o texto com reticências. Para arrumar o conteúdo em linha, como texto com ícone, passe
+ * `className="flex items-center gap-2"` e trunque o texto por conta própria.
+ *
+ * Com `columnAlignmentFeature`, alinha o conteúdo pelo `align` da coluna e o marca em
+ * `data-align`. Com `columnPinningFeature`, numa coluna fixada, gruda na borda do lado dela,
+ * marcada com `data-pinned`, e repete o fundo da `DataTable.Row` para cobrir o que rola por
+ * baixo.
+ */
+export declare const DataTableCell: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableCellProps<TFeatures, TData>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-cell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-cell.d.ts","names":[],"sources":["../../../../src/components/data-table/body/data-table-cell.tsx"],"mappings":";;;;YAeY,mBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,MAAM,KAAK,WAAW;;;;;;;;;;;;;;qBAgBb;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,mBAAmB,WAAW,yBAAM,+CAAA"}

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

@@ -0,0 +1,80 @@
+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";
+//#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;
+* com eles, mostra os `children`.
+*
+* Trunca o texto com reticências. Para arrumar o conteúdo em linha, como texto com ícone, passe
+* `className="flex items-center gap-2"` e trunque o texto por conta própria.
+*
+* Com `columnAlignmentFeature`, alinha o conteúdo pelo `align` da coluna e o marca em
+* `data-align`. Com `columnPinningFeature`, numa coluna fixada, gruda na borda do lado dela,
+* marcada com `data-pinned`, e repete o fundo da `DataTable.Row` para cobrir o que rola por
+* baixo.
+*/
+const DataTableCell = (props) => {
+	const { cell, render, className, children, ...rest } = props;
+	/**
+	* Sem assinatura: o alinhamento vem da definição da coluna, que não muda em runtime. Uma troca
+	* das colunas muda as células, e a `DataTable.Row` re-renderiza, com a célula junto.
+	*/
+	const align = hasColumnFeature(cell.column, "columnAlignmentFeature") ? cell.column.getAlign() : void 0;
+	/**
+	* Sem assinatura: o pinning muda as células da linha, e a `DataTable.Row` re-renderiza, com a
+	* célula junto. O deslocamento muda no resize, mas fica na variável que o `DataTable.Root`
+	* escreve.
+	*/
+	const pinning = getDataTableColumnPinning(cell.column);
+	const baseProps = {
+		"data-component": "DataTable.Cell",
+		"data-align": align,
+		"data-pinned": pinning.position || void 0,
+		role: hasTableFeature(cell.table, "activeRowFeature") ? "gridcell" : "cell",
+		style: getDataTablePinnedStyle(pinning),
+		className: mergeTwClassNames([
+			"block",
+			"content-center",
+			"min-w-0",
+			"truncate",
+			"data-[align=center]:text-center",
+			"data-[align=end]:text-end",
+			"h-(--data-table-row-height)",
+			"px-(--data-table-cell-padding)",
+			"data-pinned:sticky",
+			"data-pinned:z-1",
+			"data-pinned:bg-(--data-table-row-background)",
+			"data-[pinned=start]:has-[+:not([data-pinned=start])]:shadow-[6px_0_8px_-6px_rgb(0_0_0/0.12)]",
+			"dark:data-[pinned=start]:has-[+:not([data-pinned=start])]:shadow-[6px_0_8px_-6px_rgb(0_0_0/0.8)]",
+			"data-[pinned=end]:not-[[data-pinned=end]+*]:shadow-[-6px_0_8px_-6px_rgb(0_0_0/0.12)]",
+			"dark:data-[pinned=end]:not-[[data-pinned=end]+*]:shadow-[-6px_0_8px_-6px_rgb(0_0_0/0.8)]",
+			"text-sm",
+			"in-data-loading:text-[0px]",
+			"in-data-loading:*:hidden",
+			"in-data-loading:before:content-['']",
+			"in-data-loading:before:inline-block",
+			"in-data-loading:before:align-middle",
+			"in-data-loading:before:h-3",
+			"in-data-loading:before:w-3/4",
+			"in-data-loading:before:rounded-md",
+			"in-data-loading:before:corner-squircle",
+			"in-data-loading:before:bg-gray-6",
+			"in-data-loading:before:not-motion-reduced:animate-skeleton-pulse"
+		], className),
+		children: children === void 0 ? /* @__PURE__ */ jsx(FlexRender, { cell }) : children
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+DataTableCell.displayName = "DataTable.Cell";
+//#endregion
+export { DataTableCell };
+
+//# sourceMappingURL=data-table-cell.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,38 @@
+import { RowData, Table, TableFeatures } from "@tanstack/react-table";
+import { useRender } from "@base-ui/react";
+import { MergeOverride } from "@lucasbernardosn/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`. */
+  table: Table<TFeatures, TData>;
+}>;
+/**
+ * O estado vazio da tabela, para depois do `DataTable.Body`, dentro do `DataTable.Root`. Aparece
+ * quando o row model não tem linhas e a tabela não está carregando: com `loadingFeature`, a carga
+ * sem linhas mostra as linhas-fantasma do corpo, e não o vazio.
+ *
+ * Sem `children`, mostra o `EmptyState` do `ui`, sem moldura, com "Nenhum registro encontrado"
+ * e uma descrição que sugere ajustar os filtros. Com `children`, o conteúdo do app, como uma
+ * mensagem do filtro e um botão para limpá-lo. Fica centralizado na largura da tabela.
+ *
+ * @example
+ * ```tsx
+ * <DataTable.Root table={table}>
+ *   <DataTable.Header table={table} />
+ *   <DataTable.Body table={table} />
+ *   <DataTable.Empty table={table}>
+ *     <EmptyState.Root variant="plain">
+ *       <EmptyState.Content>
+ *         <EmptyState.Title>Nenhum cliente para este filtro</EmptyState.Title>
+ *       </EmptyState.Content>
+ *     </EmptyState.Root>
+ *   </DataTable.Empty>
+ * </DataTable.Root>
+ * ```
+ */
+export declare const DataTableEmpty: {
+  <TFeatures extends TableFeatures, TData extends RowData>(props: DataTableEmptyProps<TFeatures, TData>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=data-table-empty.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-empty.d.ts","names":[],"sources":["../../../../src/components/data-table/body/data-table-empty.tsx"],"mappings":";;;;YASY,oBACV,kBAAkB,eAClB,cAAc,WACZ,cACF,UAAU;;EAGR,OAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;qBA4Bf;GACX,kBAAkB,eAClB,cAAc,SAAO,OAEd,oBAAoB,WAAW,yBAAM,+CAAA"}