@facter/ds-core 1.22.0 → 1.24.0

package/dist/index.d.mts

@@ -304,6 +304,8 @@ interface DataTableProps<TData extends object> {
      * Quando true, a tabela não faz paginação local e depende do servidor.
      */
     manualPagination?: boolean;
+    /** Número inicial de items por página (default: 10) */
+    initialPageSize?: number;
     /**
      * Total de páginas (obrigatório se manualPagination=true).
      * Usado para calcular navegação quando dados vêm do servidor.
@@ -396,11 +398,15 @@ interface DataTableContentProps {
     /**
      * Habilita scroll vertical com altura calculada automaticamente.
      * O header das colunas fica sticky e apenas as rows fazem scroll.
-     * O bottomOffset controla a margem inferior (default: 16px).
      */
     scrollable?: boolean;
-    /** Margem inferior em px para o cálculo de altura automática (default: 16) */
+    /** Margem inferior em px para o cálculo de altura automática (default: 68) */
     scrollBottomOffset?: number;
+    /**
+     * Calcula automaticamente o número de rows por página baseado na altura disponível.
+     * Mede do início do tbody até o final do viewport, descontando pagination e margem.
+     */
+    autoPageSize?: boolean;
     /** Custom className */
     className?: string;
 }
@@ -541,7 +547,7 @@ declare const DENSITY_CONFIG: {
     };
 };
 
-declare function DataTableRoot<TData extends object>({ children, data, columns, getRowId, manualPagination, pageCount, className, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+declare function DataTableRoot<TData extends object>({ children, data, columns, getRowId, manualPagination, pageCount, initialPageSize, className, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
 declare namespace DataTableRoot {
     var displayName: string;
 }
@@ -2716,15 +2722,11 @@ declare function useAvailableHeight<T extends HTMLElement = HTMLDivElement>(opti
 };
 
 interface UseAutoPageSizeOptions {
-    /** Height of each row in pixels (default: 49 — default density + border) */
+    /** Height of each row in pixels (default: 49) */
     rowHeight?: number;
-    /** Height of the column header in pixels (default: 41) */
-    headerHeight?: number;
-    /** Height of the pagination bar in pixels (default: 52) */
-    paginationHeight?: number;
-    /** Extra bottom offset in pixels (default: 16) */
+    /** Extra offset below the table in pixels — pagination, margins, etc (default: 64) */
     bottomOffset?: number;
-    /** Minimum rows per page (default: 5) */
+    /** Minimum rows per page (default: 3) */
     minRows?: number;
     /** Maximum rows per page (default: 50) */
     maxRows?: number;
@@ -2735,22 +2737,11 @@ interface UseAutoPageSizeOptions {
  * Hook that calculates the optimal number of rows per page
  * based on the available viewport height.
  *
- * Returns the calculated perPage as default. If the user manually
- * changes the page size, respects their choice.
+ * The ref should point to the element where rows START (e.g. tbody container).
+ * The hook measures from ref.top to viewport bottom, subtracts bottomOffset,
+ * and divides by rowHeight.
  *
- * @example
- * ```tsx
- * function MyTable() {
- *   const { ref, perPage, setPerPage } = useAutoPageSize()
- *   return (
- *     <div ref={ref}>
- *       <DataTable data={data} columns={columns}>
- *         <DataTable.Pagination onPageSizeChange={setPerPage} />
- *       </DataTable>
- *     </div>
- *   )
- * }
- * ```
+ * If the user manually changes page size, their choice is respected.
  */
 declare function useAutoPageSize<T extends HTMLElement = HTMLDivElement>(options?: UseAutoPageSizeOptions): {
     ref: React$1.RefObject<T | null>;
@@ -2758,7 +2749,6 @@ declare function useAutoPageSize<T extends HTMLElement = HTMLDivElement>(options
     setPerPage: (size: number) => void;
     autoPerPage: number;
     isAutoSized: boolean;
-    isReady: boolean;
 };
 
 type Theme = 'dark' | 'light' | 'system';

package/dist/index.d.ts

@@ -304,6 +304,8 @@ interface DataTableProps<TData extends object> {
      * Quando true, a tabela não faz paginação local e depende do servidor.
      */
     manualPagination?: boolean;
+    /** Número inicial de items por página (default: 10) */
+    initialPageSize?: number;
     /**
      * Total de páginas (obrigatório se manualPagination=true).
      * Usado para calcular navegação quando dados vêm do servidor.
@@ -396,11 +398,15 @@ interface DataTableContentProps {
     /**
      * Habilita scroll vertical com altura calculada automaticamente.
      * O header das colunas fica sticky e apenas as rows fazem scroll.
-     * O bottomOffset controla a margem inferior (default: 16px).
      */
     scrollable?: boolean;
-    /** Margem inferior em px para o cálculo de altura automática (default: 16) */
+    /** Margem inferior em px para o cálculo de altura automática (default: 68) */
     scrollBottomOffset?: number;
+    /**
+     * Calcula automaticamente o número de rows por página baseado na altura disponível.
+     * Mede do início do tbody até o final do viewport, descontando pagination e margem.
+     */
+    autoPageSize?: boolean;
     /** Custom className */
     className?: string;
 }
@@ -541,7 +547,7 @@ declare const DENSITY_CONFIG: {
     };
 };
 
-declare function DataTableRoot<TData extends object>({ children, data, columns, getRowId, manualPagination, pageCount, className, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+declare function DataTableRoot<TData extends object>({ children, data, columns, getRowId, manualPagination, pageCount, initialPageSize, className, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
 declare namespace DataTableRoot {
     var displayName: string;
 }
@@ -2716,15 +2722,11 @@ declare function useAvailableHeight<T extends HTMLElement = HTMLDivElement>(opti
 };
 
 interface UseAutoPageSizeOptions {
-    /** Height of each row in pixels (default: 49 — default density + border) */
+    /** Height of each row in pixels (default: 49) */
     rowHeight?: number;
-    /** Height of the column header in pixels (default: 41) */
-    headerHeight?: number;
-    /** Height of the pagination bar in pixels (default: 52) */
-    paginationHeight?: number;
-    /** Extra bottom offset in pixels (default: 16) */
+    /** Extra offset below the table in pixels — pagination, margins, etc (default: 64) */
     bottomOffset?: number;
-    /** Minimum rows per page (default: 5) */
+    /** Minimum rows per page (default: 3) */
     minRows?: number;
     /** Maximum rows per page (default: 50) */
     maxRows?: number;
@@ -2735,22 +2737,11 @@ interface UseAutoPageSizeOptions {
  * Hook that calculates the optimal number of rows per page
  * based on the available viewport height.
  *
- * Returns the calculated perPage as default. If the user manually
- * changes the page size, respects their choice.
+ * The ref should point to the element where rows START (e.g. tbody container).
+ * The hook measures from ref.top to viewport bottom, subtracts bottomOffset,
+ * and divides by rowHeight.
  *
- * @example
- * ```tsx
- * function MyTable() {
- *   const { ref, perPage, setPerPage } = useAutoPageSize()
- *   return (
- *     <div ref={ref}>
- *       <DataTable data={data} columns={columns}>
- *         <DataTable.Pagination onPageSizeChange={setPerPage} />
- *       </DataTable>
- *     </div>
- *   )
- * }
- * ```
+ * If the user manually changes page size, their choice is respected.
  */
 declare function useAutoPageSize<T extends HTMLElement = HTMLDivElement>(options?: UseAutoPageSizeOptions): {
     ref: React$1.RefObject<T | null>;
@@ -2758,7 +2749,6 @@ declare function useAutoPageSize<T extends HTMLElement = HTMLDivElement>(options
     setPerPage: (size: number) => void;
     autoPerPage: number;
     isAutoSized: boolean;
-    isReady: boolean;
 };
 
 type Theme = 'dark' | 'light' | 'system';

package/dist/index.js

@@ -1141,7 +1141,8 @@ function useDataTableInternal({
   columns,
   getRowId,
   manualPagination = false,
-  pageCount: externalPageCount
+  pageCount: externalPageCount,
+  initialPageSize = 10
 }) {
   const [rowSelection, setRowSelection] = React10__namespace.useState({});
   const [columnVisibility, setColumnVisibility] = React10__namespace.useState({});
@@ -1151,7 +1152,7 @@ function useDataTableInternal({
   const [density, setDensity] = React10__namespace.useState("default");
   const [pagination, setPagination] = React10__namespace.useState({
     pageIndex: 0,
-    pageSize: 10
+    pageSize: initialPageSize
   });
   const table = reactTable.useReactTable({
     data,
@@ -1374,6 +1375,7 @@ function DataTableRoot({
   getRowId,
   manualPagination,
   pageCount,
+  initialPageSize,
   className
 }) {
   const { table, meta, density, setDensity, pageIndex, pageSize } = useDataTableInternal({
@@ -1381,7 +1383,8 @@ function DataTableRoot({
     columns,
     getRowId,
     manualPagination,
-    pageCount
+    pageCount,
+    initialPageSize
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
     DataTableProvider,
@@ -1452,27 +1455,23 @@ function useAvailableHeight(options = {}) {
 function useAutoPageSize(options = {}) {
   const {
     rowHeight = 49,
-    headerHeight = 41,
-    paginationHeight = 52,
-    bottomOffset = 16,
-    minRows = 5,
+    bottomOffset = 64,
+    minRows = 3,
     maxRows = 50,
     enabled = true
   } = options;
   const ref = React10.useRef(null);
   const [autoPerPage, setAutoPerPage] = React10.useState(minRows);
   const [userOverride, setUserOverride] = React10.useState(null);
-  const hasCalculated = React10.useRef(false);
   const calculate = React10.useCallback(() => {
     const el = ref.current;
     if (!el || !enabled) return;
     const rect = el.getBoundingClientRect();
-    const availableHeight = window.innerHeight - rect.top - headerHeight - paginationHeight - bottomOffset;
+    const availableHeight = window.innerHeight - rect.top - bottomOffset;
     const rows = Math.floor(availableHeight / rowHeight);
     const clamped = Math.max(minRows, Math.min(maxRows, rows));
     setAutoPerPage(clamped);
-    hasCalculated.current = true;
-  }, [rowHeight, headerHeight, paginationHeight, bottomOffset, minRows, maxRows, enabled]);
+  }, [rowHeight, bottomOffset, minRows, maxRows, enabled]);
   React10.useEffect(() => {
     if (!enabled) return;
     const frame = requestAnimationFrame(calculate);
@@ -1485,14 +1484,12 @@ function useAutoPageSize(options = {}) {
   const setPerPage = React10.useCallback((size) => {
     setUserOverride(size);
   }, []);
-  const perPage = userOverride ?? autoPerPage;
   return {
     ref,
-    perPage,
+    perPage: userOverride ?? autoPerPage,
     setPerPage,
     autoPerPage,
-    isAutoSized: userOverride === null,
-    isReady: hasCalculated.current
+    isAutoSized: userOverride === null
   };
 }
 var Table = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1580,6 +1577,7 @@ var DataTableContent = React10__namespace.memo(function DataTableContent2({
   onRowClick,
   scrollable = false,
   scrollBottomOffset = 68,
+  autoPageSize = false,
   className
 }) {
   const table = useDataTable();
@@ -1587,15 +1585,36 @@ var DataTableContent = React10__namespace.memo(function DataTableContent2({
   const { density } = useDataTableDensity();
   const { config: emptyStateConfig } = useDataTableEmptyStateConfig();
   const { isLoading, skeletonRows } = useDataTableLoadingState();
-  const { ref, style: scrollStyle } = useAvailableHeight({
+  const { setPageSize } = useDataTablePagination();
+  const tbodyRef = React10__namespace.useRef(null);
+  const { ref: scrollRef, style: scrollStyle } = useAvailableHeight({
     bottomOffset: scrollBottomOffset,
     enabled: scrollable
   });
   const densityStyles = DENSITY_CONFIG[density];
+  const rowHeight = densityStyles.rowHeight + 1;
   const cellClasses = cn(densityStyles.padding, densityStyles.fontSize);
   const columnCount = table.getVisibleLeafColumns().length;
   const hasRows = table.getRowModel().rows?.length > 0;
   const effectiveStickyHeader = stickyHeader || scrollable;
+  React10__namespace.useEffect(() => {
+    if (!autoPageSize) return;
+    const calculate = () => {
+      const tbody = tbodyRef.current;
+      if (!tbody) return;
+      const rect = tbody.getBoundingClientRect();
+      const available = window.innerHeight - rect.top - 68;
+      const rows = Math.floor(available / rowHeight);
+      const clamped = Math.max(3, Math.min(50, rows));
+      setPageSize(clamped);
+    };
+    const frame = requestAnimationFrame(calculate);
+    window.addEventListener("resize", calculate);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("resize", calculate);
+    };
+  }, [autoPageSize, rowHeight, setPageSize]);
   if (!hasRows && isEmpty && !isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       EmptyState,
@@ -1610,7 +1629,7 @@ var DataTableContent = React10__namespace.memo(function DataTableContent2({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      ref,
+      ref: scrollRef,
       className: cn("rounded-md overflow-auto bg-card", className),
       style: scrollStyle,
       children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
@@ -1634,7 +1653,7 @@ var DataTableContent = React10__namespace.memo(function DataTableContent2({
             )) }, headerGroup.id))
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: isLoading ? Array.from({ length: skeletonRows }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: "animate-pulse", children: Array.from({ length: columnCount || 4 }).map((_2, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: cellClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-muted rounded w-3/4" }) }, colIndex)) }, `skeleton-${index}`)) : table.getRowModel().rows.map((row, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(TableBody, { ref: tbodyRef, children: isLoading ? Array.from({ length: skeletonRows }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: "animate-pulse", children: Array.from({ length: columnCount || 4 }).map((_2, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: cellClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-muted rounded w-3/4" }) }, colIndex)) }, `skeleton-${index}`)) : table.getRowModel().rows.map((row, index) => /* @__PURE__ */ jsxRuntime.jsx(
           TableRow,
           {
             "data-state": row.getIsSelected() && "selected",
@@ -1814,7 +1833,6 @@ var DataTablePagination = React10__namespace.memo(function DataTablePagination2(
     firstPage,
     lastPage
   } = paginationHook;
-  console.log("[DataTablePagination] render", { mode, pageIndex, pageSize, externalPageCount, internalPageCount });
   const pageCount = mode === "server" && externalPageCount !== void 0 ? externalPageCount : internalPageCount;
   const canGoPrevious = pageIndex > 0;
   const canGoNext = pageIndex < pageCount - 1;
@@ -1892,11 +1910,7 @@ var DataTablePagination = React10__namespace.memo(function DataTablePagination2(
                 variant: "outline",
                 size: "icon-sm",
                 className: "h-8 w-8 p-0",
-                onClick: () => {
-                  console.log("[DataTablePagination] nextPage clicked, current pageIndex:", pageIndex);
-                  nextPage();
-                  console.log("[DataTablePagination] nextPage called");
-                },
+                onClick: nextPage,
                 disabled: !canGoNext,
                 "aria-label": "Pr\xF3xima p\xE1gina",
                 children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })