@facter/ds-core 1.22.0 → 1.24.0

package/dist/index.mjs

@@ -1110,7 +1110,8 @@ function useDataTableInternal({
   columns,
   getRowId,
   manualPagination = false,
-  pageCount: externalPageCount
+  pageCount: externalPageCount,
+  initialPageSize = 10
 }) {
   const [rowSelection, setRowSelection] = React10.useState({});
   const [columnVisibility, setColumnVisibility] = React10.useState({});
@@ -1120,7 +1121,7 @@ function useDataTableInternal({
   const [density, setDensity] = React10.useState("default");
   const [pagination, setPagination] = React10.useState({
     pageIndex: 0,
-    pageSize: 10
+    pageSize: initialPageSize
   });
   const table = useReactTable({
     data,
@@ -1343,6 +1344,7 @@ function DataTableRoot({
   getRowId,
   manualPagination,
   pageCount,
+  initialPageSize,
   className
 }) {
   const { table, meta, density, setDensity, pageIndex, pageSize } = useDataTableInternal({
@@ -1350,7 +1352,8 @@ function DataTableRoot({
     columns,
     getRowId,
     manualPagination,
-    pageCount
+    pageCount,
+    initialPageSize
   });
   return /* @__PURE__ */ jsx(
     DataTableProvider,
@@ -1421,27 +1424,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 = useRef(null);
   const [autoPerPage, setAutoPerPage] = useState(minRows);
   const [userOverride, setUserOverride] = useState(null);
-  const hasCalculated = useRef(false);
   const calculate = 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]);
   useEffect(() => {
     if (!enabled) return;
     const frame = requestAnimationFrame(calculate);
@@ -1454,14 +1453,12 @@ function useAutoPageSize(options = {}) {
   const setPerPage = 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.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -1549,6 +1546,7 @@ var DataTableContent = React10.memo(function DataTableContent2({
   onRowClick,
   scrollable = false,
   scrollBottomOffset = 68,
+  autoPageSize = false,
   className
 }) {
   const table = useDataTable();
@@ -1556,15 +1554,36 @@ var DataTableContent = React10.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.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.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__ */ jsx(
       EmptyState,
@@ -1579,7 +1598,7 @@ var DataTableContent = React10.memo(function DataTableContent2({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      ref,
+      ref: scrollRef,
       className: cn("rounded-md overflow-auto bg-card", className),
       style: scrollStyle,
       children: /* @__PURE__ */ jsxs(Table, { children: [
@@ -1603,7 +1622,7 @@ var DataTableContent = React10.memo(function DataTableContent2({
             )) }, headerGroup.id))
           }
         ),
-        /* @__PURE__ */ jsx(TableBody, { children: isLoading ? Array.from({ length: skeletonRows }).map((_, index) => /* @__PURE__ */ jsx(TableRow, { className: "animate-pulse", children: Array.from({ length: columnCount || 4 }).map((_2, colIndex) => /* @__PURE__ */ jsx(TableCell, { className: cellClasses, children: /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded w-3/4" }) }, colIndex)) }, `skeleton-${index}`)) : table.getRowModel().rows.map((row, index) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(TableBody, { ref: tbodyRef, children: isLoading ? Array.from({ length: skeletonRows }).map((_, index) => /* @__PURE__ */ jsx(TableRow, { className: "animate-pulse", children: Array.from({ length: columnCount || 4 }).map((_2, colIndex) => /* @__PURE__ */ jsx(TableCell, { className: cellClasses, children: /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded w-3/4" }) }, colIndex)) }, `skeleton-${index}`)) : table.getRowModel().rows.map((row, index) => /* @__PURE__ */ jsx(
           TableRow,
           {
             "data-state": row.getIsSelected() && "selected",
@@ -1783,7 +1802,6 @@ var DataTablePagination = React10.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;
@@ -1861,11 +1879,7 @@ var DataTablePagination = React10.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__ */ jsx(ChevronRight, { className: "h-4 w-4" })