@wavemaker/react-runtime 11.14.3-rc.6401 → 11.15.0-1.246

package/components/data/list/utils/list-widget-methods.js

@@ -6,109 +6,152 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useListWidgetMethods = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _react = require("react");
 var _lodashEs = require("lodash-es");
-var useListWidgetMethods = exports.useListWidgetMethods = function useListWidgetMethods(items, listState, multiselect, onSelect, widgetInstance, listener, userInitiatedSelectionRef, name) {
-  // Helper function to find an item by index or model
-  var getItemByIndexOrModel = (0, _react.useCallback)(function (val) {
-    if (typeof val === "number") {
-      return items[val];
-    } else {
-      return items.find(function (item) {
-        return item === val;
-      });
-    }
-  }, [items]);
-
-  // Selects an item in the list by index or model
-  var selectItem = (0, _react.useCallback)(function (val, statePersistenceTriggered) {
-    var item = getItemByIndexOrModel(val);
-    if (!item) {
-      return;
-    }
-    var isAlreadySelected = listState.activeItems.has(item);
-    if (!isAlreadySelected) {
-      if (!statePersistenceTriggered && userInitiatedSelectionRef) {
-        userInitiatedSelectionRef.current = true;
+var useListWidgetMethods = exports.useListWidgetMethods = function useListWidgetMethods(items, listState, multiselect, onSelect, widgetInstance, listener, userInitiatedSelectionRef, name, Widgets, size, setIsListCleared, handlePageSizeChange) {
+  // Return methods object directly without useMemo to avoid infinite re-renders
+  // Methods always have access to current values through closure
+  return {
+    // Helper function to find an item by index or model
+    getItemByIndexOrModel: function getItemByIndexOrModel(val) {
+      if (typeof val === "number") {
+        return items[val];
+      } else {
+        return items.find(function (item) {
+          return item === val;
+        });
       }
-      if (multiselect) {
-        var newSelectedItems = [].concat((0, _toConsumableArray2["default"])(listState.selectedItems), [item]);
-        var newActiveItems = new Set(listState.activeItems);
-        newActiveItems.add(item);
-        listState.setSelectedItems(newSelectedItems);
-        listState.setActiveItems(newActiveItems);
-        if (!listState.firstSelectedItem) {
+    },
+    // Selects an item in the list by index or model
+    selectItem: function selectItem(val, statePersistenceTriggered) {
+      var getItemByIndexOrModel = function getItemByIndexOrModel(val) {
+        if (typeof val === "number") {
+          return items[val];
+        } else {
+          return items.find(function (item) {
+            return item === val;
+          });
+        }
+      };
+      var item = getItemByIndexOrModel(val);
+      if (!item) {
+        return;
+      }
+      var isAlreadySelected = listState.activeItems.has(item);
+      if (!isAlreadySelected) {
+        if (!statePersistenceTriggered && userInitiatedSelectionRef) {
+          userInitiatedSelectionRef.current = true;
+        }
+        if (multiselect) {
+          var newSelectedItems = [].concat((0, _toConsumableArray2["default"])(listState.selectedItems), [item]);
+          var newActiveItems = new Set(listState.activeItems);
+          newActiveItems.add(item);
+          listState.setSelectedItems(newSelectedItems);
+          listState.setActiveItems(newActiveItems);
+          if (!listState.firstSelectedItem) {
+            listState.setFirstSelectedItem(item);
+          }
+        } else {
+          listState.setSelectedItems([item]);
+          listState.setActiveItems(new Set([item]));
           listState.setFirstSelectedItem(item);
         }
-      } else {
-        listState.setSelectedItems([item]);
-        listState.setActiveItems(new Set([item]));
-        listState.setFirstSelectedItem(item);
+        if (onSelect && widgetInstance && !statePersistenceTriggered) {
+          onSelect(widgetInstance, item);
+        }
       }
-      if (onSelect && widgetInstance && !statePersistenceTriggered) {
-        onSelect(widgetInstance, item);
+    },
+    // Deselects an item in the list by index or model
+    deselectItem: function deselectItem(val) {
+      var getItemByIndexOrModel = function getItemByIndexOrModel(val) {
+        if (typeof val === "number") {
+          return items[val];
+        } else {
+          return items.find(function (item) {
+            return item === val;
+          });
+        }
+      };
+      var item = getItemByIndexOrModel(val);
+      if (!item) {
+        return;
       }
-    }
-  }, [listState.activeItems, getItemByIndexOrModel]);
-  var deselectItem = (0, _react.useCallback)(function (val) {
-    var item = getItemByIndexOrModel(val);
-    if (!item) {
-      return;
-    }
-    var isSelected = Array.from(listState.activeItems).some(function (activeItem) {
-      return (0, _lodashEs.isEqual)(activeItem, item);
-    });
-    if (isSelected) {
-      if (userInitiatedSelectionRef) {
-        userInitiatedSelectionRef.current = true;
+      var isSelected = Array.from(listState.activeItems).some(function (activeItem) {
+        return (0, _lodashEs.isEqual)(activeItem, item);
+      });
+      if (isSelected) {
+        if (userInitiatedSelectionRef) {
+          userInitiatedSelectionRef.current = true;
+        }
+        var newSelectedItems = listState.selectedItems.filter(function (selectedItem) {
+          return !(0, _lodashEs.isEqual)(selectedItem, item);
+        });
+        var newActiveItems = new Set(Array.from(listState.activeItems).filter(function (activeItem) {
+          return !(0, _lodashEs.isEqual)(activeItem, item);
+        }));
+        listState.setSelectedItems(newSelectedItems);
+        listState.setActiveItems(newActiveItems);
+        if ((0, _lodashEs.isEqual)(listState.firstSelectedItem, item)) {
+          listState.setFirstSelectedItem(newSelectedItems[0] || null);
+        }
       }
-      var newSelectedItems = listState.selectedItems.filter(function (selectedItem) {
-        return !(0, _lodashEs.isEqual)(selectedItem, item);
+    },
+    // Get item by index
+    getItem: function getItem(index) {
+      var item = items[index];
+      if (item) {
+        return {
+          item: item
+        };
+      }
+      return undefined;
+    },
+    // Get index of item
+    getIndex: function getIndex(item) {
+      var index = items.findIndex(function (listItem) {
+        return (0, _lodashEs.isEqual)(listItem, item);
       });
-      var newActiveItems = new Set(Array.from(listState.activeItems).filter(function (activeItem) {
-        return !(0, _lodashEs.isEqual)(activeItem, item);
-      }));
-      listState.setSelectedItems(newSelectedItems);
-      listState.setActiveItems(newActiveItems);
-      if ((0, _lodashEs.isEqual)(listState.firstSelectedItem, item)) {
-        listState.setFirstSelectedItem(newSelectedItems[0] || null);
+      if (index !== -1) {
+        return index;
+      }
+      return -1;
+    },
+    // Clear all selections
+    clear: function clear() {
+      setIsListCleared === null || setIsListCleared === void 0 || setIsListCleared(true);
+    },
+    // Get widgets by name and optional index
+    getWidgets: function getWidgets(widgetName, index) {
+      if (!widgetName) {
+        return undefined;
       }
-    }
-  }, [listState.activeItems, listState.selectedItems]);
-  var getItem = (0, _react.useCallback)(function (index) {
-    return items[index];
-  }, []);
-  var getIndex = (0, _react.useCallback)(function (item) {
-    return items.findIndex(function (listItem) {
-      return (0, _lodashEs.isEqual)(listItem, item);
-    });
-  }, []);
-  var clear = (0, _react.useCallback)(function () {
-    listState.setSelectedItems([]);
-    listState.setActiveItems(new Set());
-    listState.setFirstSelectedItem(null);
-    var listener_instance = name && (listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
-    if (listener_instance) {
-      listener_instance.selecteditem = undefined;
-    }
-  }, [listState.setSelectedItems, listState.setActiveItems, listState.setFirstSelectedItem]);
-  var getWidgets = (0, _react.useCallback)(function (widgetName, index) {
-    if (widgetInstance && widgetInstance[widgetName]) {
-      return widgetInstance[widgetName];
-    }
-    return listener === null || listener === void 0 ? void 0 : listener.Widgets[widgetName];
-  }, []);
 
-  // Memoize the return object to prevent unnecessary re-renders
-  return (0, _react.useMemo)(function () {
-    return {
-      getItemByIndexOrModel: getItemByIndexOrModel,
-      selectItem: selectItem,
-      deselectItem: deselectItem,
-      getItem: getItem,
-      getIndex: getIndex,
-      clear: clear,
-      getWidgets: getWidgets
-    };
-  }, [getItemByIndexOrModel, selectItem, deselectItem, getItem, getIndex, clear, getWidgets]);
+      // Helper to find widget with optional random suffix (e.g., _dfj, _fdj)
+      var findWidget = function findWidget(prefix) {
+        // Look for key with random suffix pattern: prefix_xxx
+        for (var key in Widgets) {
+          if (key.startsWith(prefix + "_") || key === prefix) {
+            return Widgets[key];
+          }
+        }
+        return null;
+      };
+      if (index !== undefined) {
+        return findWidget("".concat(name, "_").concat(index, "_").concat(widgetName));
+      }
+      var items = [];
+      for (var i = 0; i < (size || 0); i++) {
+        var item = findWidget("".concat(name, "_").concat(i, "_").concat(widgetName));
+        if (item) {
+          items.push(item);
+        }
+      }
+      return items;
+    },
+    // Select page size - changes the pagination page size
+    selectPageSize: function selectPageSize(newPageSize) {
+      if (handlePageSizeChange && typeof newPageSize === "number" && newPageSize > 0) {
+        handlePageSizeChange(newPageSize);
+      }
+    }
+  };
 };

package/components/data/live-filter/index.js

@@ -31,6 +31,7 @@ var WmLiveFilter = function WmLiveFilter(prop) {
   var _props$listener;
   var props = _objectSpread(_objectSpread({}, _props.DEFAULT_PROPS), prop);
   var isInitilised = (0, _react.useRef)(false);
+  var isInvoked = (0, _react.useRef)(false);
   var isDataSourceUpdatedRef = (0, _react.useRef)(false);
   var dataSource = (_props$listener = props.listener) === null || _props$listener === void 0 || (_props$listener = _props$listener.Variables) === null || _props$listener === void 0 ? void 0 : _props$listener[props.dataSource];
   function updateResults(dataSet) {
@@ -110,7 +111,9 @@ var WmLiveFilter = function WmLiveFilter(prop) {
             /* Construct the formFields Variable to send it to the queryBuilder */
             fieldsArray = (0, _lodashEs.isArray)(formFields) ? formFields : Object.values(formFields || {}); // Sync runtime values from submitted data into field definitions
             fieldsArray.forEach(function (filterField) {
-              var submitted = dataModel === null || dataModel === void 0 ? void 0 : dataModel[filterField.field];
+              // Use fieldcol (or name) as the actual column identifier since field may contain "true"
+              var fieldKey = filterField.fieldcol || filterField.name || filterField.field;
+              var submitted = dataModel === null || dataModel === void 0 ? void 0 : dataModel[fieldKey];
               if (filterField["isRange"]) {
                 if (submitted && (0, _typeof2["default"])(submitted) === "object") {
                   var _ref, _ref2, _submitted$minValue, _ref3, _ref4, _submitted$maxValue;
@@ -119,21 +122,22 @@ var WmLiveFilter = function WmLiveFilter(prop) {
                 }
               } else {
                 if (submitted !== undefined) {
-                  filterField._value = submitted;
+                  filterField.value = submitted;
                 }
               }
             });
             fieldsArray.forEach(function (filterField) {
               var fieldValue;
               var matchMode;
-              var colName = filterField.field;
+              // Use fieldcol (or name) as the actual column identifier since field may contain "true"
+              var colName = filterField.fieldcol || filterField.name || filterField.field;
               var minValue = filterField._minValue;
               var maxvalue = filterField._maxValue;
               /* if field is part of a related entity, column name will be 'entity.fieldName' */
               if (filterField["isRelated"]) {
                 colName += "." + filterField["lookup-field"];
               }
-              if (filterField["isRange"]) {
+              if (filterField["isRange"] && filterField["isRange"] != "false") {
                 /*Based on the min and max values, decide the matchmode condition*/
                 fieldValue = (0, _utils.getRangeFieldValue)(minValue, maxvalue);
                 matchMode = (0, _utils.getRangeMatchMode)(minValue, maxvalue);
@@ -145,36 +149,37 @@ var WmLiveFilter = function WmLiveFilter(prop) {
                   };
                 }
               } else {
-                switch (filterField.widgettype) {
+                var filterValue = "value" in filterField ? filterField.value : filterField.datavalue;
+                switch (filterField.widget) {
                   case _types.FormWidgetType.SELECT:
                   case _types.FormWidgetType.RADIOSET:
-                    if ((0, _utils.getEnableEmptyFilter)(props.enableemptyfilter) && filterField._value === FILTER_CONSTANTS.EMPTY_KEY) {
+                    if ((0, _utils.getEnableEmptyFilter)(props.enableemptyfilter) && filterValue === FILTER_CONSTANTS.EMPTY_KEY) {
                       matchMode = (0, _utils.getEmptyMatchMode)(props.enableemptyfilter);
-                      fieldValue = filterField._value;
+                      fieldValue = filterValue;
                     } else {
                       if (filterField.type === _types.DataType.BOOLEAN) {
-                        if ((0, _util.isDefined)(filterField._value) && filterField._value !== "") {
-                          fieldValue = JSON.parse(filterField._value);
+                        if ((0, _util.isDefined)(filterValue) && filterValue !== "") {
+                          fieldValue = JSON.parse(filterValue);
                         }
                       } else {
-                        fieldValue = filterField._value;
+                        fieldValue = filterValue;
                       }
                     }
                     break;
                   case _types.FormWidgetType.CHECKBOXSET:
                   case _types.FormWidgetType.CHIPS:
-                    if (filterField._value && filterField._value.length) {
-                      fieldValue = filterField._value;
+                    if (filterValue && filterValue.length) {
+                      fieldValue = filterValue;
                     }
                     break;
                   case _types.FormWidgetType.CHECKBOX:
                   case _types.FormWidgetType.TOGGLE:
-                    if ((0, _util.isDefined)(filterField._value) && filterField._value !== "") {
-                      fieldValue = filterField.type === _types.DataType.BOOLEAN ? JSON.parse(filterField._value) : filterField._value;
+                    if ((0, _util.isDefined)(filterValue) && filterValue !== "") {
+                      fieldValue = filterField.type === _types.DataType.BOOLEAN ? JSON.parse(filterValue) : filterValue;
                     }
                     break;
                   default:
-                    fieldValue = filterField._value;
+                    fieldValue = filterValue;
                     break;
                 }
                 if ((0, _util.isDefined)(fieldValue) && fieldValue !== "" && fieldValue !== null) {
@@ -267,6 +272,12 @@ var WmLiveFilter = function WmLiveFilter(prop) {
       isInitilised.current = true;
     }
   }, [props.dataset]);
+  (0, _react.useEffect)(function () {
+    if (dataSource && dataSource.invoke && !isInvoked.current) {
+      isInvoked.current = true;
+      dataSource.invoke();
+    }
+  }, []);
   return (
     // @ts-ignore
     __jsx(_form["default"], (0, _extends2["default"])({}, props, {

package/components/data/live-form/index.js

@@ -23,10 +23,13 @@ var WmLiveForm = function WmLiveForm(prop) {
   var props = _objectSpread(_objectSpread({}, _props.DEFAULT_PROPS), prop);
   var dynamicFieldsRef = (0, _react.useRef)([]);
   var isDataSourceUpdatedRef = (0, _react.useRef)(false);
+  // FIX: Store formFields ref to get current field references at API response time
+  // This prevents stale closure issue where old component's updateFormWidgetDataset is called
+  var formFieldsRef = (0, _react.useRef)([]);
   var dataSource = props.datasource;
-  function formSubmit(formData, success, error) {
+  function formSubmit(formData, success, error, operation) {
     var primaryKeys = dataSource.execute("getPrimaryKey");
-    var operationType = (0, _utils.findOperationType)(formData, primaryKeys);
+    var operationType = operation !== null && operation !== void 0 ? operation : (0, _utils.findOperationType)(formData, primaryKeys);
     if (dynamicFieldsRef.current.length > 0) {
       dynamicFieldsRef.current.forEach(function (field) {
         var item = field.formKey;
@@ -45,42 +48,59 @@ var WmLiveForm = function WmLiveForm(prop) {
       return payload;
     };
     if (operationType === "delete") {
-      props.formSubmit(formData, operationType, successWithOperationType, error);
-      return;
+      formData = _objectSpread(_objectSpread({}, formData), {}, {
+        row: formData
+      });
+    } else {
+      formData = {
+        inputFields: formData
+      };
     }
-    props.formSubmit({
-      inputFields: formData
-    }, operationType, successWithOperationType, error);
+    if (props.onBeforeservicecall) {
+      var event = new Event("submit");
+      props.onBeforeservicecall(event, operationType, formData, dataSource.options);
+    }
+    props.formSubmit(formData, operationType, successWithOperationType, error);
   }
   function getRelatedTableData(formField) {
+    // Capture formKey to look up current field at response time (not the captured formField object)
+    var formKey = formField.formKey;
     dataSource && dataSource.execute("getRelatedTableData", {
-      relatedField: formField.formKey,
+      relatedField: formKey,
       pagesize: formField.limit,
       orderBy: formField.orderby ? (0, _replace["default"])(formField.orderby, /:/g, " ") : "",
       filterFields: {},
       filterExpr: formField.filterexpressions ? formField.filterexpressions : {}
     }).then(function (response) {
-      var primaryKeys = dataSource.execute("getRelatedTablePrimaryKeys", formField.formKey);
+      var primaryKeys = dataSource.execute("getRelatedTablePrimaryKeys", formKey);
       var displayField = primaryKeys.length < 0 ? undefined : primaryKeys[0];
 
+      // FIX: Look up the CURRENT field from formFieldsRef at response time
+      // This ensures we call the current component's updateFormWidgetDataset, not a stale one
+      var currentField = formFieldsRef.current.find(function (f) {
+        return f.formKey === formKey;
+      });
+
       // Check if updateFormWidgetDataset is a function before calling it
-      if (typeof formField.updateFormWidgetDataset === "function") {
-        formField.updateFormWidgetDataset(response, displayField);
+      if (currentField && typeof currentField.updateFormWidgetDataset === "function") {
+        currentField.updateFormWidgetDataset(response, displayField);
       }
       dynamicFieldsRef.current.push({
-        formKey: formField.formKey,
+        formKey: formKey,
         dataset: response.data,
         displayField: displayField
       });
     });
   }
-  function onDataSourceChange(formFields) {
+  var onDataSourceChange = (0, _react.useCallback)(function (formFields) {
+    // FIX: Always update formFieldsRef with latest fields so async callbacks get current references
+    formFieldsRef.current = formFields;
     if (isDataSourceUpdatedRef.current) return;
-    if (formFields.length > 0) {
-      isDataSourceUpdatedRef.current = true;
-    }
     formFields.forEach(function (field) {
-      if (!field.isDataSetBound && (0, _fieldDataUtils.isDataSetWidget)(field.widget) && field["isRelated"]) {
+      // FIX: Ignore field.isDataSetBound since isDataSourceUpdatedRef already guards against re-processing.
+      // The field's isDataSetBound state persists across dialog close/reopen, causing the bug.
+      // isDataSourceUpdatedRef is the correct source of truth for whether this LiveForm session has processed fields.
+      if ((0, _fieldDataUtils.isDataSetWidget)(field.widget) && field["isRelated"]) {
         getRelatedTableData(field);
         // Check if setIsDataSetBound is a function before calling it
         if (typeof field.setIsDataSetBound === "function") {
@@ -88,7 +108,20 @@ var WmLiveForm = function WmLiveForm(prop) {
         }
       }
     });
-  }
+    if (formFields.length > 0) {
+      isDataSourceUpdatedRef.current = true;
+    }
+  }, []);
+
+  // Destroy widget when component unmounts
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (props.destroy) {
+        props.destroy([props.name]);
+      }
+      isDataSourceUpdatedRef.current = false;
+    };
+  }, [props.destroy, props.name]);
   return (
     // @ts-ignore
     __jsx(_form["default"], (0, _extends2["default"])({}, props, {

package/components/data/live-form/props.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DEFAULT_PROPS = void 0;
 var DEFAULT_PROPS = exports.DEFAULT_PROPS = {
   validationtype: "default",
-  defaultmode: "View",
+  defaultmode: "view",
   formlayout: "inline",
   insertmessage: "Record added successfully",
   updatemessage: "Record updated successfully",

package/components/data/pagination/components/BasicPagination.js

@@ -14,6 +14,20 @@ var _Pagination = _interopRequireDefault(require("@mui/material/Pagination"));
 var _PaginationItem = _interopRequireDefault(require("@mui/material/PaginationItem"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 var __jsx = _react["default"].createElement;
+// Constants for class names
+var CUSTOM_CLASSES = ["active", "disabled", "pagination-page", "pagination-prev", "pagination-next", "pagination-first", "pagination-last", "page-item"];
+var PAGE_ITEM_CLASS = "page-item";
+var PAGE_LINK_CLASS = "page-link";
+
+// Map MUI icon test IDs to pagination class names
+var ICON_TO_CLASS_MAP = {
+  NavigateBeforeIcon: "pagination-prev",
+  KeyboardArrowLeftIcon: "pagination-prev",
+  NavigateNextIcon: "pagination-next",
+  KeyboardArrowRightIcon: "pagination-next",
+  FirstPageIcon: "pagination-first",
+  LastPageIcon: "pagination-last"
+};
 var BasicPagination = exports.BasicPagination = function BasicPagination(_ref) {
   var pageCount = _ref.pageCount,
     currentPage = _ref.currentPage,
@@ -29,30 +43,68 @@ var BasicPagination = exports.BasicPagination = function BasicPagination(_ref) {
     maxsize = _ref$maxsize === void 0 ? 5 : _ref$maxsize,
     onPageChange = _ref.onPageChange;
   var paginationRef = (0, _react.useRef)(null);
+  var addNavigationClasses = (0, _react.useCallback)(function (li, anchor, testId, isDisabled) {
+    if (!testId || !ICON_TO_CLASS_MAP[testId]) return;
+    var paginationClass = ICON_TO_CLASS_MAP[testId];
+    li.classList.add(paginationClass, PAGE_ITEM_CLASS);
+    if (isDisabled) {
+      li.classList.add("disabled");
+    }
+  }, []);
+  var updateClasses = (0, _react.useCallback)(function () {
+    if (!paginationRef.current) return;
+    var allLis = paginationRef.current.querySelectorAll(".MuiPagination-ul > li");
+    allLis.forEach(function (li) {
+      var _li$classList;
+      // Remove all custom classes first
+      (_li$classList = li.classList).remove.apply(_li$classList, CUSTOM_CLASSES);
+      var anchor = li.querySelector("a");
+      if (!anchor) return;
+      var isNavigationButton = anchor.classList.contains("MuiPaginationItem-previousNext");
+      var isPageButton = anchor.classList.contains("MuiPaginationItem-page");
+      var isDisabled = anchor.classList.contains("Mui-disabled");
+      var isSelected = anchor.classList.contains("Mui-selected");
+      if (isNavigationButton) {
+        var _svg$getAttribute;
+        var svg = anchor.querySelector("svg");
+        var testId = (_svg$getAttribute = svg === null || svg === void 0 ? void 0 : svg.getAttribute("data-testid")) !== null && _svg$getAttribute !== void 0 ? _svg$getAttribute : null;
+        addNavigationClasses(li, anchor, testId, isDisabled);
+      } else if (isPageButton) {
+        li.classList.add("pagination-page", PAGE_ITEM_CLASS);
+        if (isSelected) {
+          li.classList.add("active");
+        }
+      }
+
+      // Add page-link class to anchor if not already present
+      if (!anchor.classList.contains(PAGE_LINK_CLASS)) {
+        anchor.classList.add(PAGE_LINK_CLASS);
+      }
+    });
+  }, [addNavigationClasses]);
   (0, _react.useEffect)(function () {
-    // Use requestAnimationFrame for immediate visual feedback without delay
+    // Update classes immediately for instant visual feedback
+    updateClasses();
+
+    // Also schedule an update after a frame to catch any delayed MUI updates
     var rafId = requestAnimationFrame(function () {
-      if (paginationRef.current) {
-        var allLis = paginationRef.current.querySelectorAll(".MuiPagination-ul > li");
-        allLis.forEach(function (li) {
-          li.classList.remove("active");
-          var anchor = li.querySelector("a");
-          if (anchor !== null && anchor !== void 0 && anchor.classList.contains("Mui-selected")) {
-            li.classList.add("active");
-          }
-        });
-      }
+      updateClasses();
     });
     return function () {
-      return cancelAnimationFrame(rafId);
+      cancelAnimationFrame(rafId);
     };
-  }, [currentPage]);
+  }, [currentPage, pageCount, updateClasses]);
   return __jsx(_Box["default"], {
     ref: paginationRef,
-    component: "div",
-    className: (0, _clsx["default"])("pagination", "basic", navigationClass),
+    component: "nav",
     role: "navigation",
-    "aria-label": "Showing Page ".concat(currentPage, " of ").concat(pageCount, " pages")
+    "aria-label": "Showing Page ".concat(currentPage, " of ").concat(pageCount, " pages"),
+    sx: {
+      // Hide MUI SVG icons for navigation buttons since CSS ::before will provide the icons
+      "& .MuiPaginationItem-previousNext .MuiPaginationItem-icon": {
+        display: "none"
+      }
+    }
   }, __jsx(_Pagination["default"], {
     count: pageCount,
     page: currentPage,
@@ -63,6 +115,9 @@ var BasicPagination = exports.BasicPagination = function BasicPagination(_ref) {
     hideNextButton: !directionlinks,
     size: navigationsize === "small" ? "small" : "medium",
     siblingCount: Math.floor(maxsize / 2),
+    classes: {
+      ul: (0, _clsx["default"])("pagination", "basic", navigationClass)
+    },
     renderItem: function renderItem(item) {
       return __jsx(_PaginationItem["default"], (0, _extends2["default"])({}, item, {
         sx: {

package/components/data/pagination/components/PageSizeSelector.js

@@ -15,7 +15,7 @@ var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
 var _constants = require("../../list/utils/constants");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 var __jsx = _react["default"].createElement;
-var PageSizeSelector = exports.PageSizeSelector = function PageSizeSelector(_ref) {
+var PageSizeSelectorComponent = function PageSizeSelectorComponent(_ref) {
   var _ref$pagesizeoptions = _ref.pagesizeoptions,
     pagesizeoptions = _ref$pagesizeoptions === void 0 ? "5,10,20,50,100" : _ref$pagesizeoptions,
     _ref$maxResults = _ref.maxResults,
@@ -169,7 +169,12 @@ var PageSizeSelector = exports.PageSizeSelector = function PageSizeSelector(_ref
     sx: {
       mx: 0.5
     }
-  }, "\xA0of\xA0"), __jsx(_Box["default"], {
+  }, "\xA0\xA0of\xA0\xA0"), __jsx(_Box["default"], {
     component: "span"
   }, rowSummary.totalRecords))));
-};
+};
+PageSizeSelectorComponent.displayName = "PageSizeSelector";
+var PageSizeSelector = exports.PageSizeSelector = /*#__PURE__*/(0, _react.memo)(PageSizeSelectorComponent, function (prevProps, nextProps) {
+  // Custom comparison to prevent unnecessary re-renders
+  return prevProps.pagesizeoptions === nextProps.pagesizeoptions && prevProps.maxResults === nextProps.maxResults && prevProps.currentPage === nextProps.currentPage && prevProps.dataSize === nextProps.dataSize && prevProps.paginationMeta === nextProps.paginationMeta && prevProps.onPageSizeChange === nextProps.onPageSizeChange;
+});

package/components/data/pagination/components/TotalRecords.js

@@ -22,11 +22,7 @@ var StyledPaginationList = (0, _styles.styled)("ul")(function () {
 });
 var StyledPaginationItem = (0, _styles.styled)("li")(function () {
   return {
-    margin: "0 2px",
-    "&.disabled": {
-      opacity: 0.38,
-      pointerEvents: "none"
-    }
+    margin: "0 2px"
   };
 });
 var TotalRecords = exports.TotalRecords = function TotalRecords(_ref) {