@moving-walls/design-system 1.0.18 → 1.0.19

package/dist/index.esm.js

@@ -49253,6 +49253,169 @@ function getRowSelectionOption(rowSelection, serverSidePagination) {
   }
   return rowSelection;
 }
+/* ------------------------------------------------------------------ */
+/*  Server-side pagination bar – replaces AG Grid's built-in panel    */
+/*  when serverSidePagination=true to avoid page-reset feedback loops */
+/* ------------------------------------------------------------------ */
+var paginationBtnStyle = function paginationBtnStyle(disabled) {
+  return {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 32,
+    height: 32,
+    border: '1px solid #e2e8f0',
+    borderRadius: 6,
+    background: disabled ? 'transparent' : '#fff',
+    color: disabled ? '#cbd5e1' : '#475569',
+    cursor: disabled ? 'default' : 'pointer',
+    fontSize: 16,
+    lineHeight: 1,
+    transition: 'background 0.15s, border-color 0.15s'
+  };
+};
+var ServerSidePaginationBar = /*#__PURE__*/React__default.memo(function ServerSidePaginationBar(_ref) {
+  var totalCount = _ref.totalCount,
+    currentPage = _ref.currentPage,
+    pageSize = _ref.pageSize,
+    onPageChange = _ref.onPageChange,
+    onPageSizeChange = _ref.onPageSizeChange,
+    _ref$pageSizeSelector = _ref.pageSizeSelector,
+    pageSizeSelector = _ref$pageSizeSelector === void 0 ? DEFAULT_PAGE_SIZE_SELECTOR : _ref$pageSizeSelector;
+  var totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+  var start = totalCount === 0 ? 0 : (currentPage - 1) * pageSize + 1;
+  var end = Math.min(currentPage * pageSize, totalCount);
+  var atFirst = currentPage <= 1;
+  var atLast = currentPage >= totalPages;
+  return jsxs("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      gap: 16,
+      padding: '10px 16px',
+      borderTop: '1px solid #e2e8f0',
+      fontSize: 13,
+      color: '#64748b',
+      background: '#fff',
+      flexShrink: 0,
+      minHeight: 48
+    },
+    role: "navigation",
+    "aria-label": "Pagination",
+    children: [jsxs("span", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 6
+      },
+      children: [jsx("span", {
+        children: "Page Size:"
+      }), jsx("select", {
+        value: pageSize,
+        onChange: function onChange(e) {
+          return onPageSizeChange(Number(e.target.value));
+        },
+        style: {
+          border: '1px solid #e2e8f0',
+          borderRadius: 6,
+          padding: '4px 8px',
+          fontSize: 13,
+          background: '#fff',
+          color: '#334155',
+          cursor: 'pointer',
+          outline: 'none'
+        },
+        children: pageSizeSelector.map(function (size) {
+          return jsx("option", {
+            value: size,
+            children: size
+          }, size);
+        })
+      })]
+    }), jsxs("span", {
+      style: {
+        display: 'flex',
+        gap: 4
+      },
+      children: [jsx("strong", {
+        style: {
+          color: '#334155'
+        },
+        children: start
+      }), ' to ', jsx("strong", {
+        style: {
+          color: '#334155'
+        },
+        children: end
+      }), ' of ', jsx("strong", {
+        style: {
+          color: '#334155'
+        },
+        children: totalCount
+      })]
+    }), jsxs("span", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 4
+      },
+      children: [jsx("button", {
+        type: "button",
+        disabled: atFirst,
+        onClick: function onClick() {
+          return onPageChange(1);
+        },
+        style: paginationBtnStyle(atFirst),
+        "aria-label": "First Page",
+        children: "\u226A"
+      }), jsx("button", {
+        type: "button",
+        disabled: atFirst,
+        onClick: function onClick() {
+          return onPageChange(currentPage - 1);
+        },
+        style: paginationBtnStyle(atFirst),
+        "aria-label": "Previous Page",
+        children: "\u2039"
+      }), jsxs("span", {
+        style: {
+          margin: '0 8px',
+          fontSize: 13
+        },
+        children: ["Page ", jsx("strong", {
+          style: {
+            color: '#334155'
+          },
+          children: currentPage
+        }), " of ", jsx("strong", {
+          style: {
+            color: '#334155'
+          },
+          children: totalPages
+        })]
+      }), jsx("button", {
+        type: "button",
+        disabled: atLast,
+        onClick: function onClick() {
+          return onPageChange(currentPage + 1);
+        },
+        style: paginationBtnStyle(atLast),
+        "aria-label": "Next Page",
+        children: "\u203A"
+      }), jsx("button", {
+        type: "button",
+        disabled: atLast,
+        onClick: function onClick() {
+          return onPageChange(totalPages);
+        },
+        style: paginationBtnStyle(atLast),
+        "aria-label": "Last Page",
+        children: "\u226B"
+      })]
+    })]
+  });
+});
 function AgGridTableInner(props) {
   var _a, _b;
   var rowData = props.rowData,
@@ -49297,7 +49460,8 @@ function AgGridTableInner(props) {
         state: sortStateToColumnState(sortState)
       });
     }
-    if (serverSidePagination && serverSideConfig) {
+    // For non-server-side pagination, sync AG Grid's internal page
+    if (!serverSidePagination && serverSideConfig) {
       isPaginationFromExternalRef.current = true;
       event.api.paginationGoToPage(serverSideConfig.currentPage - 1);
       event.api.setGridOption("paginationPageSize", serverSideConfig.pageSize);
@@ -49310,8 +49474,9 @@ function AgGridTableInner(props) {
       state: sortStateToColumnState(sortState)
     });
   }, [sortState]);
+  // Sync AG Grid internal page — only for NON-server-side pagination
   useEffect(function () {
-    if (!serverSidePagination || !serverSideConfig || !apiRef.current) return;
+    if (serverSidePagination || !serverSideConfig || !apiRef.current) return;
     var api = apiRef.current;
     var currentGridPage = api.paginationGetCurrentPage();
     var currentGridSize = api.paginationGetPageSize();
@@ -49324,8 +49489,12 @@ function AgGridTableInner(props) {
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [serverSidePagination, serverSideConfig === null || serverSideConfig === void 0 ? void 0 : serverSideConfig.currentPage, serverSideConfig === null || serverSideConfig === void 0 ? void 0 : serverSideConfig.pageSize]);
+  // onPaginationChanged — only relevant for NON-server-side mode
   var onPaginationChanged = useCallback(function (event) {
-    if (!serverSidePagination || !serverSideConfig || !event.api) return;
+    // When serverSidePagination is true, AG Grid's pagination is disabled;
+    // our custom bar handles page changes directly. Ignore all grid events.
+    if (serverSidePagination) return;
+    if (!serverSideConfig || !event.api) return;
     if (event.newData) return;
     if (isPaginationFromExternalRef.current) {
       isPaginationFromExternalRef.current = false;
@@ -49396,45 +49565,57 @@ function AgGridTableInner(props) {
       width: "100%"
     };
   }, [height]);
-  return jsx("div", {
-    className: "".concat(AG_GRID_THEME_CLASS, " ag-grid-table-wrapper ").concat(className),
-    style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : {
-      height: "100%",
-      width: "100%"
-    },
-    children: jsx(AgGridReact, {
-      ref: gridRef,
-      rowData: rowData,
-      columnDefs: columnDefsWithVisibility,
-      getRowId: function getRowId(params) {
-        return _getRowId(params.data);
+  // When serverSidePagination is true, disable AG Grid's built-in pagination.
+  // We render our own bar below with proper React click handlers.
+  var useGridPagination = !serverSidePagination && pagination;
+  return jsxs(Fragment, {
+    children: [jsx("div", {
+      className: "".concat(AG_GRID_THEME_CLASS, " ag-grid-table-wrapper ").concat(className),
+      style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : {
+        height: "100%",
+        width: "100%"
       },
-      loading: loading,
-      overlayNoRowsTemplate: "<span class=\"ag-overlay-no-rows-center\">".concat(escapeOverlayText(emptyMessage), "</span>"),
-      rowSelection: getRowSelectionOption(rowSelection, serverSidePagination),
-      popupParent: typeof document !== "undefined" ? document.body : null,
-      onGridReady: onGridReady,
-      onSortChanged: onSortChanged,
-      onPaginationChanged: onPaginationChanged,
-      onSelectionChanged: rowSelection !== false ? onSelectionChanged : undefined,
-      defaultColDef: Object.assign({
-        sortable: false,
-        resizable: true
-      }, defaultColDef),
-      domLayout: domLayout,
-      rowHeight: 60,
-      suppressRowTransform: true,
-      headerHeight: 44,
-      pagination: pagination,
-      paginationPageSize: (_a = serverSideConfig === null || serverSideConfig === void 0 ? void 0 : serverSideConfig.pageSize) !== null && _a !== void 0 ? _a : 10,
-      paginationPageSizeSelector: (_b = serverSideConfig === null || serverSideConfig === void 0 ? void 0 : serverSideConfig.pageSizeSelector) !== null && _b !== void 0 ? _b : DEFAULT_PAGE_SIZE_SELECTOR,
-      cacheBlockSize: cacheBlockSize,
-      pinnedBottomRowData: footerData === null || footerData === void 0 ? void 0 : footerData.map(function (row, i) {
-        return _typeof(row) === "object" && row !== null && !("id" in row) ? Object.assign(Object.assign({}, row), {
-          id: "pinned-bottom-".concat(i)
-        }) : row;
+      children: jsx(AgGridReact, {
+        ref: gridRef,
+        rowData: rowData,
+        columnDefs: columnDefsWithVisibility,
+        getRowId: function getRowId(params) {
+          return _getRowId(params.data);
+        },
+        loading: loading,
+        overlayNoRowsTemplate: "<span class=\"ag-overlay-no-rows-center\">".concat(escapeOverlayText(emptyMessage), "</span>"),
+        rowSelection: getRowSelectionOption(rowSelection, serverSidePagination),
+        popupParent: typeof document !== "undefined" ? document.body : null,
+        onGridReady: onGridReady,
+        onSortChanged: onSortChanged,
+        onPaginationChanged: useGridPagination ? onPaginationChanged : undefined,
+        onSelectionChanged: rowSelection !== false ? onSelectionChanged : undefined,
+        defaultColDef: Object.assign({
+          sortable: false,
+          resizable: true
+        }, defaultColDef),
+        domLayout: domLayout,
+        rowHeight: 60,
+        suppressRowTransform: true,
+        headerHeight: 44,
+        pagination: useGridPagination,
+        paginationPageSize: useGridPagination ? (_a = serverSideConfig === null || serverSideConfig === void 0 ? void 0 : serverSideConfig.pageSize) !== null && _a !== void 0 ? _a : 10 : undefined,
+        paginationPageSizeSelector: useGridPagination ? (_b = serverSideConfig === null || serverSideConfig === void 0 ? void 0 : serverSideConfig.pageSizeSelector) !== null && _b !== void 0 ? _b : DEFAULT_PAGE_SIZE_SELECTOR : undefined,
+        cacheBlockSize: cacheBlockSize,
+        pinnedBottomRowData: footerData === null || footerData === void 0 ? void 0 : footerData.map(function (row, i) {
+          return _typeof(row) === "object" && row !== null && !("id" in row) ? Object.assign(Object.assign({}, row), {
+            id: "pinned-bottom-".concat(i)
+          }) : row;
+        })
       })
-    })
+    }), serverSidePagination && serverSideConfig && jsx(ServerSidePaginationBar, {
+      totalCount: serverSideConfig.totalCount,
+      currentPage: serverSideConfig.currentPage,
+      pageSize: serverSideConfig.pageSize,
+      onPageChange: serverSideConfig.onPageChange,
+      onPageSizeChange: serverSideConfig.onPageSizeChange,
+      pageSizeSelector: serverSideConfig.pageSizeSelector
+    })]
   });
 }
 var AgGridTable = AgGridTableInner;