najm-kit 2.2.8 → 2.2.9

package/dist/index.mjs

@@ -12507,9 +12507,9 @@ function useDynamicPageSize(containerRef, effectiveViewMode) {
     const calculatePageSize = () => {
       const container2 = containerRef.current;
       if (!container2) return;
+      if (error || hasNoData && !isFilteredEmpty && !isLoading) return;
       const bodyEl = container2.querySelector("[data-ntable-body]");
       const tableHeaderEl = container2.querySelector("[data-ntable-table-header]");
-      const loadingHeaderEl = container2.querySelector("[data-ntable-loading-header]");
       const cardsGridEl = Array.from(
         container2.querySelectorAll(
           "[data-ntable-loading-cards-grid], [data-ntable-cards-grid]"
@@ -12525,11 +12525,6 @@ function useDynamicPageSize(containerRef, effectiveViewMode) {
         const gap = Number.parseFloat(rootStyles.rowGap || rootStyles.gap || "0") || 0;
         bodyHeight = rootHeight - headerHeight - paginationHeight - gap * ROOT_SECTION_GAP_COUNT;
       }
-      if (loadingHeaderEl && bodyEl) {
-        const bodyStyles = window.getComputedStyle(bodyEl);
-        const bodyGap = Number.parseFloat(bodyStyles.rowGap || bodyStyles.gap || "0") || 0;
-        bodyHeight = Math.max(0, bodyHeight - loadingHeaderEl.offsetHeight - bodyGap);
-      }
       const tableHeaderHeight = tableHeaderEl?.offsetHeight ?? DEFAULT_TABLE_HEADER_HEIGHT;
       const newPageSize = calculateDynamicPageSize({ bodyHeight, tableHeaderHeight });
       const calculatedMaxHeight = tableHeaderHeight + newPageSize * ROW_HEIGHT;
@@ -12578,7 +12573,7 @@ function useDynamicPageSize(containerRef, effectiveViewMode) {
       "[data-ntable-header], [data-ntable-body], [data-ntable-pagination], [data-ntable-table-header]"
     ).forEach((el) => resizeObserver.observe(el));
     container.querySelectorAll(
-      "[data-ntable-loading-header], [data-ntable-loading-cards-grid], [data-ntable-loading-card], [data-ntable-cards-grid]"
+      "[data-ntable-loading-cards-grid], [data-ntable-loading-card], [data-ntable-cards-grid]"
     ).forEach((el) => resizeObserver.observe(el));
     if (container.parentElement) resizeObserver.observe(container.parentElement);
     return () => resizeObserver.disconnect();
@@ -12612,6 +12607,7 @@ function useTable(effectiveViewModeOverride) {
   const onStateChange = useTableStore.use.onStateChange();
   const getRowId = useTableStore.use.getRowId();
   const manualPagination = useTableStore.use.manualPagination();
+  const hasDataRows = useTableStore.use.hasData();
   const pageCount = useTableStore.use.pageCount();
   const rowCount = useTableStore.use.rowCount();
   const storePagination = useTableStore.use.pagination();
@@ -12725,6 +12721,11 @@ function useTable(effectiveViewModeOverride) {
     tableConfig.getRowCanExpand = userGetRowCanExpand ? (row) => userGetRowCanExpand(row.original) : () => true;
   }
   const table = useReactTable(tableConfig);
+  const hasSeededTableRef = useRef(false);
+  if (!hasSeededTableRef.current) {
+    hasSeededTableRef.current = true;
+    syncWithProps({ table });
+  }
   useLayoutEffect(() => {
     syncWithProps({ table });
   }, [table]);
@@ -12745,12 +12746,17 @@ function useTable(effectiveViewModeOverride) {
     if (!dynamicPageSizeTarget || dynamicPageSizeTarget < 1) return;
     if (dynamicPageSizeTarget === storePagination.pageSize) return;
     const reported = reportedGeometryRef.current;
+    if (reported?.key === geometryKey && reported.target === dynamicPageSizeTarget) return;
     if (reported?.key === geometryKey && reported.count >= MAX_PAGE_SIZE_REPORTS_PER_GEOMETRY) return;
     const commit = () => {
       const current = reportedGeometryRef.current;
-      reportedGeometryRef.current = current?.key === geometryKey ? { key: geometryKey, count: current.count + 1 } : { key: geometryKey, count: 1 };
+      reportedGeometryRef.current = current?.key === geometryKey ? { key: geometryKey, count: current.count + 1, target: dynamicPageSizeTarget } : { key: geometryKey, count: 1, target: dynamicPageSizeTarget };
       setPagination({ pageIndex: storePagination.pageIndex, pageSize: dynamicPageSizeTarget });
     };
+    if (!hasDataRows) {
+      commit();
+      return;
+    }
     if (!reported) {
       commit();
       return;
@@ -12767,6 +12773,7 @@ function useTable(effectiveViewModeOverride) {
     dynamicPageSizeTarget,
     storePagination.pageIndex,
     storePagination.pageSize,
+    hasDataRows,
     setPagination
   ]);
   return { table, finalColumns, sorting, setSorting, columnFilters, setColumnFilters, columnVisibility, setColumnVisibility, globalFilter, setGlobalFilter };
@@ -12960,6 +12967,11 @@ function NTableContent({ effectiveMode }) {
   const onCellEdit = useTableStore.use.onCellEdit();
   useTableStore.use.isLoading();
   const error = useTableStore.use.error();
+  const contentDynamicHeight = useTableStore.use.dynamicHeight();
+  const contentManualPagination = useTableStore.use.manualPagination();
+  const contentCardPagination = useTableStore.use.cardPagination();
+  const contentCalculatedPageSize = useTableStore.use.calculatedPageSize();
+  const contentHasMeasuredLayout = useTableStore.use.hasMeasuredLayout();
   const hasNoData = useTableStore.use.hasNoData();
   const showContent = useTableStore.use.showContent();
   const classNames = useTableStore.use.classNames();
@@ -12981,6 +12993,9 @@ function NTableContent({ effectiveMode }) {
   if (error || hasNoData || !showContent || !table) return null;
   const isTableView = effectiveMode ? effectiveMode === "table" : storeIsTableView;
   if (!isTableView) return null;
+  const allRows = table.getRowModel().rows ?? [];
+  const clampRowsToMeasuredPage = contentDynamicHeight && contentManualPagination && contentCardPagination.mode === "paged" && contentHasMeasuredLayout && contentCalculatedPageSize > 0;
+  const visibleRows = clampRowsToMeasuredPage ? allRows.slice(0, contentCalculatedPageSize) : allRows;
   const getSortIcon = (column) => {
     const dir = column.getIsSorted();
     if (dir === "asc") return /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4" });
@@ -12993,13 +13008,22 @@ function NTableContent({ effectiveMode }) {
       axis: "both",
       "data-bordered": bordered === false ? "false" : bordered ? "true" : void 0,
       className: cn(
-        "min-h-0 flex-1 overflow-hidden rounded-md",
+        "min-h-0 overflow-hidden rounded-md",
+        // Under `dynamicHeight` the page size is the largest row count that
+        // fits, so the rows are always a little shorter than the space they
+        // were measured against — up to one row's worth. Growing into that
+        // remainder leaves the container's bottom edge floating below the last
+        // row. Sizing to content instead ends the border on the last row; the
+        // leftover belongs to the page, not to the table. Without
+        // `dynamicHeight` the row count is the caller's, so the container has
+        // to keep filling its height to stay a scroll viewport.
+        contentDynamicHeight ? "max-h-full shrink" : "flex-1",
         surface.className,
         classNames?.content
       ),
       style: surface.style,
       onContextMenu: handleBackgroundContextMenu,
-      children: /* @__PURE__ */ jsxs(Table, { children: [
+      children: /* @__PURE__ */ jsxs(Table, { className: "table-fixed", children: [
         /* @__PURE__ */ jsx(TableHeader, { "data-ntable-table-header": true, className: cn("bg-card sticky top-0 z-10", headerClassName, bordered === true && "[&_tr]:border-border", classNames?.tableHeader), children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsxs(TableRow, { style: rowBorderStyle, className: cn("hover:bg-transparent", bordered === true && "border-border"), children: [
           showCheckbox && /* @__PURE__ */ jsx(
             TableHead,
@@ -13030,7 +13054,7 @@ function NTableContent({ effectiveMode }) {
             return /* @__PURE__ */ jsx(
               TableHead,
               {
-                className: cn("text-foreground h-12", responsiveClass),
+                className: cn("text-foreground h-12 overflow-hidden text-ellipsis", responsiveClass),
                 style: headerCellStyle,
                 children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", header.column.getCanSort() && showSorting && "cursor-pointer select-none"), onClick: header.column.getToggleSortingHandler(), children: [
                   flexRender(header.column.columnDef.header, header.getContext()),
@@ -13041,7 +13065,7 @@ function NTableContent({ effectiveMode }) {
             );
           })
         ] }, hg.id)) }),
-        /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => {
+        /* @__PURE__ */ jsx(TableBody, { children: visibleRows.length ? visibleRows.map((row) => {
           const isSelectedByRowId = Boolean(selectedRowId && row.original?.id === selectedRowId);
           const canExpand = hasExpansion && row.getCanExpand();
           const isExpanded = canExpand && row.getIsExpanded();
@@ -13094,7 +13118,7 @@ function NTableContent({ effectiveMode }) {
                     const meta = columnDef.meta || {};
                     const isEditable = Boolean(onCellEdit) && Boolean(meta.editable);
                     const responsiveClass = resolveHiddenBelowClass(meta.hiddenBelow);
-                    return /* @__PURE__ */ jsx(TableCell, { className: cn("h-14", responsiveClass), children: isEditable ? /* @__PURE__ */ jsx(EditableCell, { cell, onCellEdit }) : flexRender(columnDef.cell, cell.getContext()) }, cell.id);
+                    return /* @__PURE__ */ jsx(TableCell, { title: typeof cell.getValue?.() === "string" ? cell.getValue() : void 0, className: cn("h-14 overflow-hidden text-ellipsis", responsiveClass), children: isEditable ? /* @__PURE__ */ jsx(EditableCell, { cell, onCellEdit }) : flexRender(columnDef.cell, cell.getContext()) }, cell.id);
                   })
                 ]
               }
@@ -13234,6 +13258,17 @@ function NDataCardShell({ row, onClick, onContextMenu, actions, children, classN
 var DEFAULT_ROWS2 = 6;
 var UNMEASURED_DYNAMIC_ROWS = 12;
 var DEFAULT_CARD_COUNT = 48;
+var VISUALLY_HIDDEN = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  margin: -1,
+  padding: 0,
+  overflow: "hidden",
+  clip: "rect(0,0,0,0)",
+  whiteSpace: "nowrap",
+  borderWidth: 0
+};
 function NTableCardSkeleton({ surface }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -13293,75 +13328,6 @@ function NTableCardSkeleton({ surface }) {
     }
   );
 }
-function NTableHeaderSkeleton() {
-  const filters = useTableStore.use.filters();
-  const showViewToggle = useTableStore.use.showViewToggle();
-  const showColumnVisibility = useTableStore.use.showColumnVisibility();
-  const showAddButton = useTableStore.use.showAddButton();
-  const hasHeaderSlot = Boolean(useTableStore.use.headerSlot());
-  const hasToolbar = Boolean(useTableStore.use.renderToolbar());
-  const filterCount = Math.min(Math.max(filters?.length ?? 0, 1), 3);
-  const hasActions = showViewToggle || showColumnVisibility || showAddButton || hasHeaderSlot || hasToolbar;
-  const hasSettings = showViewToggle || showColumnVisibility || hasHeaderSlot || hasToolbar;
-  if (!filters?.length && !hasActions) return null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-ntable-loading-header": true,
-      className: "flex shrink-0 flex-wrap items-center justify-between gap-2",
-      children: [
-        filters?.length ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-ntable-loading-desktop-filters": true,
-            className: "hidden min-w-0 flex-1 flex-wrap gap-2 md:flex",
-            children: Array.from({ length: filterCount }).map((_, index) => /* @__PURE__ */ jsx(
-              NSkeleton,
-              {
-                className: cn("h-10 w-full rounded-lg", index < 2 ? "max-w-64" : "max-w-48")
-              },
-              index
-            ))
-          }
-        ) : /* @__PURE__ */ jsx("span", { className: "hidden min-w-0 flex-1 md:block" }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-ntable-loading-mobile-toolbar": true,
-            className: "flex w-full min-w-0 items-center gap-2 md:hidden",
-            children: [
-              filters?.length ? /* @__PURE__ */ jsx(
-                NSkeleton,
-                {
-                  "data-ntable-loading-mobile-primary": true,
-                  className: "h-10 min-w-0 flex-1 rounded-lg"
-                }
-              ) : null,
-              filters?.length > 1 ? /* @__PURE__ */ jsx(
-                NSkeleton,
-                {
-                  "data-ntable-loading-mobile-filter-button": true,
-                  className: "h-10 w-10 shrink-0 rounded-lg"
-                }
-              ) : null,
-              showAddButton ? /* @__PURE__ */ jsx(
-                NSkeleton,
-                {
-                  "data-ntable-loading-mobile-add-button": true,
-                  className: "h-10 w-10 shrink-0 rounded-lg"
-                }
-              ) : null
-            ]
-          }
-        ),
-        hasActions && /* @__PURE__ */ jsxs("div", { className: "hidden shrink-0 gap-2 md:flex", children: [
-          hasSettings && /* @__PURE__ */ jsx(NSkeleton, { className: "h-10 w-10 rounded-lg" }),
-          showAddButton && /* @__PURE__ */ jsx(NSkeleton, { className: "h-10 w-10 rounded-lg" })
-        ] })
-      ]
-    }
-  );
-}
 function NTableLoadingSkeleton({ rows }) {
   const rawColumns = useTableStore.use.columns();
   const responsiveColumns = React__default.useMemo(() => filterResponsiveColumns(rawColumns), [rawColumns]);
@@ -13381,64 +13347,62 @@ function NTableLoadingSkeleton({ rows }) {
   const loadingText = useTableStore.use.loadingText();
   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, {}),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-testid": "ntable-loading-skeleton",
-        "data-ntable-loading-row-count": rowCount,
-        "data-bordered": surface.bordered === false ? "false" : surface.bordered ? "true" : void 0,
-        "aria-busy": "true",
-        "aria-label": loadingText,
-        role: "status",
-        style: surface.style,
-        className: cn("min-h-0 flex-1 rounded-md p-0", surface.className, dynamicHeight ? "overflow-hidden" : "najm-overlay-scroll", classNames?.content),
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: loadingText }),
-          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: dynamicHeight ? "najm-overlay-scroll h-full" : void 0, children: /* @__PURE__ */ jsxs(Table, { children: [
-            /* @__PURE__ */ jsx(TableHeader, { "data-ntable-table-header": true, className: cn(headerClassName, "sticky top-0 z-10", classNames?.tableHeader), children: /* @__PURE__ */ jsxs(TableRow, { className: "hover:bg-muted/30", children: [
-              showCheckbox && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Select column", className: "w-10 text-foreground h-12" }),
-              hasExpansion && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Expand column", className: "w-10 text-foreground h-12" }),
-              columns.map((col, i) => /* @__PURE__ */ jsx(
-                TableHead,
-                {
-                  className: cn("text-foreground h-12", resolveHiddenBelowClass(col?.meta?.hiddenBelow)),
-                  style: col?.size ? { width: col.size } : void 0,
-                  children: renderHeaderLabel(col?.header)
-                },
-                col?.id ?? col?.accessorKey ?? i
-              ))
-            ] }) }),
-            /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rowCount }).map((_, r) => /* @__PURE__ */ jsxs(TableRow, { children: [
-              showCheckbox && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10", children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-4" }) }),
-              hasExpansion && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10", children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-4" }) }),
-              columns.map((col, c) => /* @__PURE__ */ jsx(
-                TableCell,
-                {
-                  className: cn("h-14", resolveHiddenBelowClass(col?.meta?.hiddenBelow)),
-                  style: col?.size ? { width: col.size } : void 0,
-                  children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-full" })
-                },
-                `skeleton-${r}-${col?.id ?? col?.accessorKey ?? c}`
-              ))
-            ] }, `skeleton-${r}`)) })
-          ] }) })
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col gap-2", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "ntable-loading-skeleton",
+      "data-ntable-loading-row-count": rowCount,
+      "data-bordered": surface.bordered === false ? "false" : surface.bordered ? "true" : void 0,
+      "aria-busy": "true",
+      "aria-label": loadingText,
+      role: "status",
+      style: surface.style,
+      className: cn(
+        "min-h-0 rounded-md p-0",
+        surface.className,
+        // Sizes to its rows for the same reason `NTableContent` does, and it
+        // has to match: the skeleton draws exactly the row count the real
+        // table will render, so a box that fills its container here and hugs
+        // its rows there would visibly resize the instant the rows arrive —
+        // the one thing this whole layout is meant to avoid.
+        dynamicHeight ? "max-h-full shrink overflow-hidden" : "flex-1 najm-overlay-scroll",
+        classNames?.content
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { style: VISUALLY_HIDDEN, children: loadingText }),
+        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: dynamicHeight ? "najm-overlay-scroll" : void 0, children: /* @__PURE__ */ jsxs(Table, { className: "table-fixed", children: [
+          /* @__PURE__ */ jsx(TableHeader, { "data-ntable-table-header": true, className: cn(headerClassName, "sticky top-0 z-10", classNames?.tableHeader), children: /* @__PURE__ */ jsxs(TableRow, { className: "hover:bg-muted/30", children: [
+            showCheckbox && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Select column", className: "w-10 text-foreground h-12" }),
+            hasExpansion && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Expand column", className: "w-10 text-foreground h-12" }),
+            columns.map((col, i) => /* @__PURE__ */ jsx(
+              TableHead,
+              {
+                className: cn("text-foreground h-12", resolveHiddenBelowClass(col?.meta?.hiddenBelow)),
+                style: col?.size ? { width: col.size } : void 0,
+                children: renderHeaderLabel(col?.header)
+              },
+              col?.id ?? col?.accessorKey ?? i
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rowCount }).map((_, r) => /* @__PURE__ */ jsxs(TableRow, { children: [
+            showCheckbox && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10", children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-4" }) }),
+            hasExpansion && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10", children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-4" }) }),
+            columns.map((col, c) => /* @__PURE__ */ jsx(
+              TableCell,
+              {
+                className: cn("h-14", resolveHiddenBelowClass(col?.meta?.hiddenBelow)),
+                style: col?.size ? { width: col.size } : void 0,
+                children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-full" })
+              },
+              `skeleton-${r}-${col?.id ?? col?.accessorKey ?? c}`
+            ))
+          ] }, `skeleton-${r}`)) })
+        ] }) })
+      ]
+    }
+  ) });
 }
 function NTableCardsLoadingSkeleton({ rows }) {
-  const filters = useTableStore.use.filters();
-  const showViewToggle = useTableStore.use.showViewToggle();
-  const showColumnVisibility = useTableStore.use.showColumnVisibility();
-  const showAddButton = useTableStore.use.showAddButton();
-  const hasHeaderSlot = Boolean(useTableStore.use.headerSlot());
-  const hasToolbar = Boolean(useTableStore.use.renderToolbar());
-  const hasHeaderSkeleton = Boolean(
-    filters?.length || showViewToggle || showColumnVisibility || showAddButton || hasHeaderSlot || hasToolbar
-  );
   const classNames = useTableStore.use.classNames();
   const bordered = useTableStore.use.bordered();
   const borderColor = useTableStore.use.borderColor();
@@ -13458,33 +13422,30 @@ function NTableCardsLoadingSkeleton({ rows }) {
   }) : DEFAULT_CARD_COUNT);
   const defaultContainerClass = "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4";
   const containerClass = classNames?.cards ?? defaultContainerClass;
-  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2", children: [
-    hasHeaderSkeleton && /* @__PURE__ */ jsx(NTableHeaderSkeleton, {}),
-    /* @__PURE__ */ jsxs(
-      NajmScroll,
-      {
-        axis: "y",
-        "aria-busy": "true",
-        "aria-label": loadingText,
-        role: "status",
-        className: "min-h-0 flex-1 overflow-hidden",
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: loadingText }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              "data-testid": "ntable-cards-loading-skeleton",
-              "data-ntable-loading-cards-grid": true,
-              "data-ntable-loading-card-count": cardCount,
-              "aria-hidden": "true",
-              className: cn(containerClass),
-              children: Array.from({ length: cardCount }).map((_, index) => CardSkeletonComponent ? /* @__PURE__ */ jsx("div", { "data-ntable-loading-card": true, children: /* @__PURE__ */ jsx(CardSkeletonComponent, {}) }, index) : /* @__PURE__ */ jsx(NTableCardSkeleton, { surface }, index))
-            }
-          )
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col gap-2", children: /* @__PURE__ */ jsxs(
+    NajmScroll,
+    {
+      axis: "y",
+      "aria-busy": "true",
+      "aria-label": loadingText,
+      role: "status",
+      className: "min-h-0 flex-1 overflow-hidden",
+      children: [
+        /* @__PURE__ */ jsx("span", { style: VISUALLY_HIDDEN, children: loadingText }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-testid": "ntable-cards-loading-skeleton",
+            "data-ntable-loading-cards-grid": true,
+            "data-ntable-loading-card-count": cardCount,
+            "aria-hidden": "true",
+            className: cn(containerClass),
+            children: Array.from({ length: cardCount }).map((_, index) => CardSkeletonComponent ? /* @__PURE__ */ jsx("div", { "data-ntable-loading-card": true, children: /* @__PURE__ */ jsx(CardSkeletonComponent, {}) }, index) : /* @__PURE__ */ jsx(NTableCardSkeleton, { surface }, index))
+          }
+        )
+      ]
+    }
+  ) });
 }
 var DEFAULT_ROOT_MARGIN = "80px";
 function useCardContinuation({
@@ -13876,7 +13837,7 @@ function NTablePagination() {
   const setPagination = useTableStore.use.setPagination();
   const isPaginationControlled = useTableStore.use.isPaginationControlled();
   const bordered = useTableStore.use.bordered();
-  if (!table || !showPagination || effectiveViewMode === "json" || effectiveViewMode === "files") return null;
+  if (!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") {
@@ -13890,10 +13851,10 @@ function NTablePagination() {
       }
     );
   }
-  const filteredRows = table.getFilteredRowModel().rows;
-  const selectedRows = table.getFilteredSelectedRowModel().rows;
-  const { pageIndex, pageSize } = table.getState().pagination;
-  const effectivePageCount = manualPagination && pageCount !== void 0 ? pageCount : table.getPageCount();
+  const filteredRows = table ? table.getFilteredRowModel().rows : [];
+  const selectedRows = table ? table.getFilteredSelectedRowModel().rows : [];
+  const { pageIndex, pageSize } = table ? table.getState().pagination : pagination;
+  const effectivePageCount = manualPagination && pageCount !== void 0 ? pageCount : table ? table.getPageCount() : 1;
   const currentPagination = pagination ?? { pageIndex, pageSize };
   const currentPageSizeOptions = pageSizeOptions.includes(pageSize) ? pageSizeOptions : [...pageSizeOptions, pageSize].sort((a, b) => a - b);
   const navigate = (direction) => {
@@ -13941,10 +13902,10 @@ function NTablePagination() {
         effectivePageCount
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "hidden h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70 lg:flex", "aria-label": "First page", onClick: () => navigate("first"), disabled: !table.getCanPreviousPage?.() || pageIndex === 0, children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70", "aria-label": "Previous", onClick: () => navigate("prev"), disabled: !table.getCanPreviousPage?.() || pageIndex === 0, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70", "aria-label": "Next", onClick: () => navigate("next"), disabled: !table.getCanNextPage?.() || pageIndex >= effectivePageCount - 1, children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "hidden h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70 lg:flex", "aria-label": "Last page", onClick: () => navigate("last"), disabled: !table.getCanNextPage?.() || pageIndex >= effectivePageCount - 1, children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" }) })
+        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "hidden h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70 lg:flex", "aria-label": "First page", onClick: () => navigate("first"), disabled: !table?.getCanPreviousPage?.() || pageIndex === 0, children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70", "aria-label": "Previous", onClick: () => navigate("prev"), disabled: !table?.getCanPreviousPage?.() || pageIndex === 0, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70", "aria-label": "Next", onClick: () => navigate("next"), disabled: !table?.getCanNextPage?.() || pageIndex >= effectivePageCount - 1, children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "hidden h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70 lg:flex", "aria-label": "Last page", onClick: () => navigate("last"), disabled: !table?.getCanNextPage?.() || pageIndex >= effectivePageCount - 1, children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" }) })
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-none whitespace-nowrap text-sm text-muted-foreground max-sm:hidden", children: [
@@ -13955,10 +13916,14 @@ function NTablePagination() {
     ] })
   ] });
 }
+function PendingFilter({ placeholder, icon, bordered }) {
+  return /* @__PURE__ */ jsx(TextInput, { icon, value: "", onChange: () => {
+  }, placeholder, bordered, disabled: true });
+}
 function SearchFilter({ placeholder }) {
   const table = useTableStore.use.table();
   const bordered = useTableStore.use.bordered();
-  if (!table) return null;
+  if (!table) return /* @__PURE__ */ jsx(PendingFilter, { icon: Search, placeholder: placeholder ?? "Search\u2026", bordered });
   const value = table.getState().globalFilter ?? "";
   return /* @__PURE__ */ jsx(TextInput, { icon: Search, value, onChange: (v) => table.setGlobalFilter(v), placeholder: placeholder ?? "Search\u2026", bordered });
 }
@@ -13966,14 +13931,14 @@ function TextFilter({ name, placeholder, icon }) {
   const table = useTableStore.use.table();
   const bordered = useTableStore.use.bordered();
   const column = table?.getColumn?.(name);
-  if (!column) return null;
+  if (!column) return /* @__PURE__ */ jsx(PendingFilter, { icon, placeholder, bordered });
   return /* @__PURE__ */ jsx(TextInput, { icon, value: column.getFilterValue() ?? "", onChange: (value) => column.setFilterValue(value), placeholder, bordered });
 }
 function SelectFilter({ name, options, placeholder, inputType }) {
   const table = useTableStore.use.table();
   const bordered = useTableStore.use.bordered();
   const column = table?.getColumn?.(name);
-  if (!column) return null;
+  if (!column) return /* @__PURE__ */ jsx(PendingFilter, { placeholder: placeholder || "Filter...", bordered });
   const allOptions = [{ value: "__clear__", label: "All" }, ...options.map((o) => typeof o === "string" ? { value: o, label: o } : o)];
   const InputComponent = inputType === "combobox" ? ComboboxInput : SelectInput;
   return /* @__PURE__ */ jsx(InputComponent, { value: column.getFilterValue() ?? "", onChange: (value) => column.setFilterValue(value === "" || value === "__clear__" ? void 0 : value), items: allOptions, placeholder: placeholder || "Filter...", bordered });
@@ -13982,7 +13947,7 @@ function defaultWrapperClass(filter) {
   return filter.type === "search" ? "flex-1 min-w-[160px] max-w-sm" : "w-full sm:w-40 xl:w-56 shrink-0";
 }
 function RenderFilter({ filter, mobilePrimary = false }) {
-  const table = useTableStore.use.table();
+  useTableStore.use.table();
   const bordered = useTableStore.use.bordered();
   if (filter.type === "search") {
     return /* @__PURE__ */ jsx(SearchFilter, { placeholder: filter.placeholder });
@@ -14049,20 +14014,24 @@ function RenderFilter({ filter, mobilePrimary = false }) {
   if (filter.type === "text") {
     return /* @__PURE__ */ jsx(TextFilter, { name: filter.name, placeholder: filter.placeholder, icon: mobilePrimary ? Search : void 0 });
   }
-  if (!table) return null;
   return /* @__PURE__ */ jsx(SelectFilter, { name: filter.name, options: filter.options || [], placeholder: filter.placeholder, inputType: filter.type });
 }
 function TableFilters() {
   const filters = useTableStore.use.filters();
   if (!filters?.length) return null;
-  return /* @__PURE__ */ jsx("div", { "data-ntable-desktop-filters": true, className: "hidden flex-1 min-w-0 flex-wrap items-center gap-2 md:flex", children: filters.map((filter) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(defaultWrapperClass(filter), filter.className),
-      children: /* @__PURE__ */ jsx(RenderFilter, { filter })
-    },
-    filter.name
-  )) });
+  return (
+    // `min-h-10` is the height of one control row. Even if every filter inside
+    // resolves to nothing, the row cannot collapse and change what the body
+    // measures.
+    /* @__PURE__ */ jsx("div", { "data-ntable-desktop-filters": true, className: "hidden min-h-10 flex-1 min-w-0 flex-wrap items-center gap-2 md:flex", children: filters.map((filter) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(defaultWrapperClass(filter), filter.className),
+        children: /* @__PURE__ */ jsx(RenderFilter, { filter })
+      },
+      filter.name
+    )) })
+  );
 }
 function TableAddButton({ mobile = false }) {
   const onAddClick = useTableStore.use.onAddClick();
@@ -14213,12 +14182,14 @@ function NTableHeader() {
   const isCustomMode = useTableStore.use.isCustomMode();
   const showViewToggle = useTableStore.use.showViewToggle();
   const showColumnVisibility = useTableStore.use.showColumnVisibility();
-  const hideDataChrome = isLoading && !isRefreshing || error || hasNoData && !isFilteredEmpty;
+  const hideDataChrome = error || hasNoData && !isFilteredEmpty && !isLoading;
+  const isFirstLoad = Boolean(isLoading) && !isRefreshing;
+  const firstLoadChromeClass = isFirstLoad ? "pointer-events-none opacity-60" : void 0;
   if (isCustomMode) {
     if (!showViewToggle && !showColumnVisibility && !headerSlot && !hasControls) return null;
     if (hideDataChrome) return null;
     const justify2 = headerSlot ? "justify-between" : "justify-end";
-    return /* @__PURE__ */ jsxs("div", { "data-ntable-header": true, className: cn("flex shrink-0 items-center gap-0 lg:gap-3 flex-wrap lg:flex-nowrap", justify2, classNames?.header), children: [
+    return /* @__PURE__ */ jsxs("div", { "data-ntable-header": true, "aria-busy": isFirstLoad ? "true" : void 0, className: cn("flex shrink-0 items-center gap-0 lg:gap-3 flex-wrap lg:flex-nowrap", justify2, firstLoadChromeClass, classNames?.header), children: [
       headerSlot && /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: headerSlot }),
       hasControls && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 shrink-0", children: [
         /* @__PURE__ */ jsx("span", { className: "hidden md:contents", children: /* @__PURE__ */ jsx(TableSettingsMenu, {}) }),
@@ -14231,7 +14202,7 @@ function NTableHeader() {
   if (!hasFilters && !hasControls && !headerSlot && !hasToolbar) return null;
   if (hideDataChrome) return null;
   const justify = hasControls || headerSlot || hasToolbar ? "justify-between" : "justify-start";
-  return /* @__PURE__ */ jsxs("div", { "data-ntable-header": true, className: cn("flex shrink-0 items-center gap-0 lg:gap-3 flex-wrap lg:flex-nowrap", justify, classNames?.header), children: [
+  return /* @__PURE__ */ jsxs("div", { "data-ntable-header": true, "aria-busy": isFirstLoad ? "true" : void 0, className: cn("flex shrink-0 items-center gap-0 lg:gap-3 flex-wrap lg:flex-nowrap", justify, firstLoadChromeClass, classNames?.header), children: [
     /* @__PURE__ */ jsx(TableFilters, {}),
     /* @__PURE__ */ jsx(TableMobileToolbar, {}),
     headerSlot && /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: headerSlot }),
@@ -14342,12 +14313,27 @@ function TableLayout(props) {
         "data-ntable-body": true,
         "data-ntable-refreshing": isRefreshing ? "true" : void 0,
         "aria-busy": isRefreshing ? "true" : void 0,
-        className: "flex min-h-0 flex-1 flex-col gap-2 overflow-hidden",
+        className: "relative flex min-h-0 flex-1 flex-col gap-2 overflow-hidden",
         children: isCustomMode ? customRenderer ? customRenderer() : null : /* @__PURE__ */ jsxs(Fragment, { children: [
-          isLoading && !isRefreshing && (props.renderLoading ? /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderLoading() }) : props.responsiveSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { "data-ntable-skeleton-variant": "table", className: "hidden min-h-0 flex-1 flex-col lg:flex", children: /* @__PURE__ */ jsx(NTableLoadingSkeleton, {}) }),
-            /* @__PURE__ */ jsx("div", { "data-ntable-skeleton-variant": "cards", className: "flex min-h-0 flex-1 flex-col lg:hidden", children: /* @__PURE__ */ jsx(NTableCardsLoadingSkeleton, {}) })
-          ] }) : effectiveMode === "table" ? /* @__PURE__ */ jsx(NTableLoadingSkeleton, {}) : effectiveMode === "cards" ? /* @__PURE__ */ jsx(NTableCardsLoadingSkeleton, {}) : /* @__PURE__ */ jsx(NTableLoadingSkeleton, {})),
+          isLoading && !isRefreshing && // Absolutely positioned, the way every grid that measures its own
+          // page size does it: AG Grid paints its loading state as an
+          // overlay, and MUI's DataGrid renders `GridOverlay` on top of the
+          // rows rather than in place of them. A skeleton that occupies a
+          // slot in the layout is a second layout — the one the container
+          // gets measured in — and the page size derived from it is a page
+          // size for a table that no longer exists once rows land. Taking
+          // the skeleton out of flow leaves exactly one layout to measure.
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-ntable-loading-overlay": true,
+              className: "absolute inset-0 z-10 flex min-h-0 flex-col bg-background",
+              children: props.renderLoading ? /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderLoading() }) : props.responsiveSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { "data-ntable-skeleton-variant": "table", className: "hidden min-h-0 flex-1 flex-col lg:flex", children: /* @__PURE__ */ jsx(NTableLoadingSkeleton, {}) }),
+                /* @__PURE__ */ jsx("div", { "data-ntable-skeleton-variant": "cards", className: "flex min-h-0 flex-1 flex-col lg:hidden", children: /* @__PURE__ */ jsx(NTableCardsLoadingSkeleton, {}) })
+              ] }) : effectiveMode === "cards" ? /* @__PURE__ */ jsx(NTableCardsLoadingSkeleton, {}) : /* @__PURE__ */ jsx(NTableLoadingSkeleton, {})
+            }
+          ),
           error && !isLoading && /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderError ? props.renderError(error) : /* @__PURE__ */ jsx(NErrorState, { message: typeof error === "string" ? error : "An error occurred" }) }),
           showFilteredEmpty && /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderFilteredEmpty ? props.renderFilteredEmpty() : renderFilteredEmpty ? renderFilteredEmpty() : props.renderEmpty ? props.renderEmpty() : /* @__PURE__ */ jsx(DefaultTableFilteredEmptyState, {}) }),
           showEmpty && /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderEmpty ? props.renderEmpty() : /* @__PURE__ */ jsx(DefaultTableEmptyState, { title: noDataText }) }),

package/package.json

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