@facter/ds-core 1.23.0 → 1.24.0

package/dist/index.d.mts

@@ -398,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;
 }
@@ -2718,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;
@@ -2737,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>;
@@ -2760,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

@@ -398,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;
 }
@@ -2718,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;
@@ -2737,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>;
@@ -2760,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

@@ -1455,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);
@@ -1488,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(
@@ -1583,6 +1577,7 @@ var DataTableContent = React10__namespace.memo(function DataTableContent2({
   onRowClick,
   scrollable = false,
   scrollBottomOffset = 68,
+  autoPageSize = false,
   className
 }) {
   const table = useDataTable();
@@ -1590,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,
@@ -1613,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: [
@@ -1637,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",