najm-kit 2.2.4 → 2.2.6

package/dist/index.mjs

@@ -12127,7 +12127,24 @@ var computeFlags = (state) => {
   const hasControls = Boolean(state.showColumnVisibility || state.showAddButton || state.showViewToggle);
   const isRefreshing = Boolean(state.isLoading) && hasData;
   const showContent = !state.error && !hasNoData && !isFilteredEmpty && (!state.isLoading || hasData);
-  return { hasData, hasNoData, isTableView, isCardView, isJsonView, isFilesView, isCustomMode, hasActions, hasControls, isRefreshing, showContent, showPagination: state.showPagination && showContent };
+  return {
+    hasData,
+    hasNoData,
+    isTableView,
+    isCardView,
+    isJsonView,
+    isFilesView,
+    isCustomMode,
+    hasActions,
+    hasControls,
+    isRefreshing,
+    showContent,
+    // Rendered during a first load too, so the bar occupies its height while
+    // the skeleton is up. Without it the body is one bar taller than it will be
+    // once rows arrive, the measured page size is one row too many, and that
+    // row is visibly removed the moment the table loads.
+    showPagination: state.showPagination && (showContent || Boolean(state.isLoading))
+  };
 };
 var createSelectors = (_store) => {
   const store = _store;
@@ -12721,7 +12738,7 @@ function useTable(effectiveViewModeOverride) {
   const dynamicPageSizeTarget = renderedMode === "cards" ? calculatedCardPageSize : calculatedPageSize;
   const geometryKey = `${Math.round(measuredBodyWidth / GEOMETRY_BUCKET_PX)}x${Math.round(measuredBodyHeight / GEOMETRY_BUCKET_PX)}`;
   const reportedGeometryRef = useRef(null);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!manualPagination || !dynamicHeight) return;
     if (cardPagination.mode !== "paged") return;
     if (!hasMeasuredLayout || measuredBodyHeight <= 0) return;
@@ -12729,12 +12746,16 @@ function useTable(effectiveViewModeOverride) {
     if (dynamicPageSizeTarget === storePagination.pageSize) return;
     const reported = reportedGeometryRef.current;
     if (reported?.key === geometryKey && reported.count >= MAX_PAGE_SIZE_REPORTS_PER_GEOMETRY) return;
-    const delay = reported ? DYNAMIC_PAGE_SIZE_DEBOUNCE_MS : 0;
-    const timer = setTimeout(() => {
+    const commit = () => {
       const current = reportedGeometryRef.current;
       reportedGeometryRef.current = current?.key === geometryKey ? { key: geometryKey, count: current.count + 1 } : { key: geometryKey, count: 1 };
       setPagination({ pageIndex: storePagination.pageIndex, pageSize: dynamicPageSizeTarget });
-    }, delay);
+    };
+    if (!reported) {
+      commit();
+      return;
+    }
+    const timer = setTimeout(commit, DYNAMIC_PAGE_SIZE_DEBOUNCE_MS);
     return () => clearTimeout(timer);
   }, [
     manualPagination,
@@ -13842,7 +13863,7 @@ function CardLoadMorePagination({
 function NTablePagination() {
   const table = useTableStore.use.table();
   const showPagination = useTableStore.use.showPagination();
-  const showContent = useTableStore.use.showContent();
+  useTableStore.use.showContent();
   const pageSizeOptions = useTableStore.use.pageSizeOptions();
   const classNames = useTableStore.use.classNames();
   const effectiveViewMode = useTableStore.use.effectiveViewMode();
@@ -13855,7 +13876,7 @@ function NTablePagination() {
   const setPagination = useTableStore.use.setPagination();
   const isPaginationControlled = useTableStore.use.isPaginationControlled();
   const bordered = useTableStore.use.bordered();
-  if (!table || !showContent || !showPagination || effectiveViewMode === "json" || effectiveViewMode === "files") return null;
+  if (!table || !showPagination || effectiveViewMode === "json" || effectiveViewMode === "files") return null;
   if (cardPagination.mode === "all") return null;
   if (effectiveViewMode === "cards" && cardPagination.mode === "infinite") return null;
   if (effectiveViewMode === "cards" && cardPagination.mode === "load-more") {
@@ -14336,7 +14357,18 @@ function TableLayout(props) {
         ] })
       }
     ),
-    /* @__PURE__ */ jsx("div", { "data-ntable-pagination": true, className: "min-w-0 shrink-0 bg-background text-foreground", children: /* @__PURE__ */ jsx(NTablePagination, {}) })
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-ntable-pagination": true,
+        "aria-hidden": isLoading && !isRefreshing ? "true" : void 0,
+        className: cn(
+          "min-w-0 shrink-0 bg-background text-foreground",
+          isLoading && !isRefreshing && "invisible"
+        ),
+        children: /* @__PURE__ */ jsx(NTablePagination, {})
+      }
+    )
   ] });
 }
 function NTable(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "2.2.4",
+  "version": "2.2.6",
   "license": "MIT",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",