@facter/ds-core 1.23.0 → 1.24.0

package/dist/index.mjs

@@ -1424,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);
@@ -1457,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(
@@ -1552,6 +1546,7 @@ var DataTableContent = React10.memo(function DataTableContent2({
   onRowClick,
   scrollable = false,
   scrollBottomOffset = 68,
+  autoPageSize = false,
   className
 }) {
   const table = useDataTable();
@@ -1559,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,
@@ -1582,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: [
@@ -1606,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",