najm-kit 2.2.3 → 2.2.5

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;
@@ -12729,11 +12746,12 @@ 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 current = reportedGeometryRef.current;
       reportedGeometryRef.current = current?.key === geometryKey ? { key: geometryKey, count: current.count + 1 } : { key: geometryKey, count: 1 };
       setPagination({ pageIndex: storePagination.pageIndex, pageSize: dynamicPageSizeTarget });
-    }, DYNAMIC_PAGE_SIZE_DEBOUNCE_MS);
+    }, delay);
     return () => clearTimeout(timer);
   }, [
     manualPagination,
@@ -13210,6 +13228,7 @@ function NDataCardShell({ row, onClick, onContextMenu, actions, children, classN
   );
 }
 var DEFAULT_ROWS2 = 6;
+var UNMEASURED_DYNAMIC_ROWS = 32;
 var DEFAULT_CARD_COUNT = 48;
 function NTableCardSkeleton({ surface }) {
   return /* @__PURE__ */ jsx(
@@ -13356,7 +13375,7 @@ function NTableLoadingSkeleton({ rows }) {
   const userGetRowCanExpand = useTableStore.use.getRowCanExpand();
   const hasExpansion = Boolean(renderSubRow || userGetRowCanExpand);
   const loadingText = useTableStore.use.loadingText();
-  const rowCount = rows ?? (dynamicHeight && bodyHeight > 0 ? skeletonRowCount : DEFAULT_ROWS2);
+  const rowCount = rows ?? (dynamicHeight ? bodyHeight > 0 ? skeletonRowCount : UNMEASURED_DYNAMIC_ROWS : DEFAULT_ROWS2);
   const renderHeaderLabel = (header) => typeof header === "string" ? header : null;
   return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2", children: [
     /* @__PURE__ */ jsx(NTableHeaderSkeleton, {}),
@@ -13840,7 +13859,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();
@@ -13853,7 +13872,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") {
@@ -14334,7 +14353,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.3",
+  "version": "2.2.5",
   "license": "MIT",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",