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

package/components/data/list/components/ListDND.js

@@ -106,7 +106,8 @@ var SortableItem = exports.SortableItem = function SortableItem(_ref) {
     cursor: enableReorder && !disableItem ? "grab" : undefined,
     touchAction: "none",
     position: "relative",
-    willChange: "transform"
+    willChange: "transform",
+    width: "100%"
   };
   return __jsx("div", (0, _extends2["default"])({
     ref: setNodeRef,

package/components/data/list/components/ListItem.js

@@ -42,6 +42,10 @@ var buildItemClasses = function buildItemClasses(itemClass, isActive, disableIte
 /**
  * List Item Component
  * Renders individual list items with context and drag-and-drop support
+ *
+ * Note: Widget naming (e.g., "Name_0", "Name_1") and internal widget flags
+ * are now handled at the codegen level. The renderItem function generates
+ * widgets with indexed names and data-internal-widget="true" directly.
  */
 var WmListItem = exports.WmListItem = function WmListItem(_ref) {
   var item = _ref.item,
@@ -64,7 +68,6 @@ var WmListItem = exports.WmListItem = function WmListItem(_ref) {
     tabIndex = _ref.tabIndex,
     _ref$isActive = _ref.isActive,
     isActive = _ref$isActive === void 0 ? false : _ref$isActive,
-    name = _ref.name,
     _ref$enableReorder = _ref.enableReorder,
     enableReorder = _ref$enableReorder === void 0 ? false : _ref$enableReorder,
     id = _ref.id,
@@ -125,7 +128,8 @@ var WmListItem = exports.WmListItem = function WmListItem(_ref) {
       "data-item-index": index,
       "data-item-active": isActive,
       "aria-selected": isActive,
-      role: "option"
+      role: "option",
+      listitemindex: index
     }, __jsx(ListItemContext.Provider, {
       value: contextValue
     }, children));

package/components/data/list/components/ListItemWithTemplate.js

@@ -1,15 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ListItemWithTemplate = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _ListItem = require("./ListItem");
 var _mediaTemplate = require("../templates/media-template");
+var _WidgetProvider = require("../../../../context/WidgetProvider");
+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;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * Single list item component with template rendering
  */
@@ -35,7 +42,44 @@ var ListItemWithTemplate = exports.ListItemWithTemplate = function ListItemWithT
     onItemDoubleClick = _ref.onItemDoubleClick,
     onItemMouseEnter = _ref.onItemMouseEnter,
     onItemMouseLeave = _ref.onItemMouseLeave;
-  var templateContent = renderItem ? renderItem(item, globalIndex !== null && globalIndex !== void 0 ? globalIndex : index) : itemTemplate || __jsx(_mediaTemplate.MediaWmListtemplate, null);
+  var WidgetProxy = (0, _WidgetProvider.useWidgetProxy)();
+  var widgetCacheRef = (0, _react.useRef)(new Map());
+
+  // Clear cache when WidgetProxy or name changes
+  (0, _react.useEffect)(function () {
+    widgetCacheRef.current.clear();
+  }, [WidgetProxy, name]);
+  var getCurrentItemWidgets = (0, _react.useCallback)(function ($index) {
+    // Return cached result if available
+    var cached = widgetCacheRef.current.get($index);
+    if (cached) {
+      return cached;
+    }
+    var items = {};
+    var prefix = "".concat(name, "_").concat($index, "_");
+
+    // Use for...in for better performance than Object.keys + filter
+    for (var key in WidgetProxy) {
+      var _key$split = key.split("_"),
+        _key$split2 = (0, _slicedToArray2["default"])(_key$split, 2),
+        listName = _key$split2[0],
+        idx = _key$split2[1];
+      if (key.startsWith(prefix)) {
+        var widget = WidgetProxy[key];
+        if (parseInt(idx) === $index && listName === name) {
+          items[widget.name] = widget;
+        }
+      }
+    }
+
+    // Cache the result
+    widgetCacheRef.current.set($index, items);
+    return items;
+  }, [WidgetProxy, name]);
+  var itemWithSelected = _objectSpread(_objectSpread({}, item), {}, {
+    selected: isActive
+  });
+  var templateContent = renderItem ? renderItem(itemWithSelected, globalIndex !== null && globalIndex !== void 0 ? globalIndex : index, WidgetProxy[name], getCurrentItemWidgets) : itemTemplate || __jsx(_mediaTemplate.MediaWmListtemplate, null);
 
   // Resolve item class: support string or function callback
   var resolvedItemClass = typeof itemclass === "function" ? itemclass(item) : itemclass;

package/components/data/list/components/ListItems.js

@@ -92,7 +92,8 @@ var ListItems = exports.ListItems = function ListItems(_ref) {
     navigation: navigation,
     currentPage: currentPage,
     pagesize: pagesize,
-    visibleItems: visibleItems
+    visibleItems: visibleItems,
+    isServerSidePagination: isServerPaginated
   });
 
   // Create stable identifiers for data changes
@@ -109,37 +110,27 @@ var ListItems = exports.ListItems = function ListItems(_ref) {
   // Call onBeforedatarender with unsorted current page items - only when data changes
   (0, _react.useEffect)(function () {
     if (onBeforedatarender && widgetInstance) {
-      if (groupby) {
-        // For grouped data, we need to get unsorted items for the current page
-        // Since grouped data is already sorted, we'll use the raw dataset approach
-        onBeforedatarender(widgetInstance, rawCurrentPageItems.currentItems);
-      } else {
-        // For standard lists, use raw current page items (unsorted)
-        onBeforedatarender(widgetInstance, rawCurrentPageItems.currentItems);
-      }
+      onBeforedatarender(widgetInstance, rawCurrentPageItems.currentItems);
     }
   }, [rawCurrentItemsKey, groupby]);
 
   // Call onRender with sorted current page items - only when data changes
   (0, _react.useEffect)(function () {
-    if (onRender && widgetInstance) {
-      var timer = setTimeout(function () {
-        if (groupby) {
-          // For grouped data, flatten the current page grouped items (sorted)
-          var currentPageGroupedItems = paginatedGroupedData.reduce(function (acc, group) {
-            return acc.concat(group.data);
-          }, []);
-          onRender(widgetInstance, currentPageGroupedItems);
-        } else {
-          // For standard lists, use sorted current page items
-          onRender(widgetInstance, currentPageItems.currentItems);
-        }
-      }, 10);
-      return function () {
-        return clearTimeout(timer);
-      };
+    if (onRender) {
+      // Call onRender synchronously to ensure it fires before onSelect
+      // This maintains the correct event order: onBeforedatarender -> onRender -> onSelect
+      if (groupby) {
+        // For grouped data, flatten the current page grouped items (sorted)
+        var currentPageGroupedItems = paginatedGroupedData.reduce(function (acc, group) {
+          return acc.concat(group.data);
+        }, []);
+        onRender(widgetInstance, currentPageGroupedItems);
+      } else {
+        // For standard lists, use sorted current page items
+        onRender(widgetInstance, currentPageItems.currentItems);
+      }
     }
-  }, [currentItemsKey, paginatedGroupedDataKey, groupby]);
+  }, []);
 
   // Calculate total items for grouped data
   var totalGroupedItems = (0, _react.useMemo)(function () {

package/components/data/list/components/ListPagination.js

@@ -21,6 +21,7 @@ var mapNavigationType = function mapNavigationType(navigation) {
     case _constants.LIST_NAVIGATION_TYPES.BASIC:
     case _constants.LIST_NAVIGATION_TYPES.PAGER:
     case _constants.LIST_NAVIGATION_TYPES.CLASSIC:
+    case _constants.LIST_NAVIGATION_TYPES.SCROLL:
       return navigation;
     case _constants.LIST_NAVIGATION_TYPES.ADVANCED:
       return _constants.LIST_NAVIGATION_TYPES.CLASSIC;
@@ -38,8 +39,7 @@ var mapNavigationType = function mapNavigationType(navigation) {
 var shouldHidePagination = function shouldHidePagination(navigation, allowpagesizechange, datasetLength, pagesize, paginationMeta, totalItems) {
   // Hide for certain navigation types
   var isNone = String(navigation) === String(_constants.LIST_NAVIGATION_TYPES.NONE) || navigation === "None";
-  var isOnDemand = String(navigation) === String(_constants.LIST_NAVIGATION_TYPES.ON_DEMAND) || navigation === "On-Demand";
-  if (isNone || isOnDemand) {
+  if (isNone) {
     return true;
   }
 
@@ -107,7 +107,7 @@ var ListPagination = exports.ListPagination = function ListPagination(props) {
   // Early return if pagination should be hidden
   var hidePagination = (0, _react.useMemo)(function () {
     return shouldHidePagination(navigation, allowpagesizechange, orderedDataset.length, pagesize, paginationMeta, totalItems);
-  }, [navigation, allowpagesizechange, orderedDataset.length, pagesize, props.paginationMeta, props.totalItems]);
+  }, [navigation, allowpagesizechange, orderedDataset.length, pagesize, paginationMeta, props.totalItems]);
 
   // Get the appropriate navigation type for the pagination component
   var paginationNavigation = (0, _react.useMemo)(function () {

package/components/data/list/components/StandardListItems.js

@@ -10,7 +10,6 @@ var _ListDND = require("./ListDND");
 var _ListItemWithTemplate = require("./ListItemWithTemplate");
 var _ListContainer = require("./ListContainer");
 var _NoDataMessage = require("./NoDataMessage");
-var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
 var _some = _interopRequireDefault(require("lodash-es/some"));
 var __jsx = _react["default"].createElement;
 /**
@@ -47,9 +46,9 @@ var StandardListItems = exports.StandardListItems = function StandardListItems(_
     var itemId = (0, _ListDND.getItemId)(item, globalIndex);
     var isFirst = index === 0;
     var isLast = index === currentItems.length - 1;
-    var isActive = Array.isArray(activeItems) || activeItems instanceof Set ? (0, _some["default"])(Array.from(activeItems), function (active) {
-      return (0, _isEqual["default"])(active, item);
-    }) : false;
+    var isActive = (Array.isArray(activeItems) || activeItems instanceof Set) && (0, _some["default"])(Array.from(activeItems), function (active) {
+      return active._wmListItemId === item._wmListItemId;
+    });
     return __jsx(_ListItemWithTemplate.ListItemWithTemplate, {
       key: itemId,
       item: item,

package/components/data/list/hooks/useListEffects.js

@@ -9,6 +9,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _react = require("react");
 var _constants = require("../utils/constants");
 var _listHelpers = require("../utils/list-helpers");
+var _WidgetProvider = require("@wavemaker/react-runtime/context/WidgetProvider");
 var useListEffects = exports.useListEffects = function useListEffects(props) {
   var name = props.name,
     navigation = props.navigation,
@@ -47,13 +48,17 @@ var useListEffects = exports.useListEffects = function useListEffects(props) {
     setRestoredPageNumber = props.setRestoredPageNumber,
     showNavigation = props.showNavigation,
     stateManager = props.stateManager;
-
+  var Widgets = (0, _WidgetProvider.useWidgetProxy)();
   // Track page size changes
   var _useState = (0, _react.useState)(paginationState.currentPageSize),
     lastPageSize = _useState[0],
     setLastPageSize = _useState[1];
   var rafRef1 = (0, _react.useRef)(null);
   var rafRef2 = (0, _react.useRef)(null);
+  var hasInitialWidgetUpdateRun = (0, _react.useRef)(false);
+  var widgetMethodsRef = (0, _react.useRef)(widgetMethods);
+  widgetMethodsRef.current = widgetMethods;
+
   // Effect 1: Accumulate data for On-Demand navigation
   (0, _react.useEffect)(function () {
     if (navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND && datasource && safeDataset.length > 0) {
@@ -97,23 +102,44 @@ var useListEffects = exports.useListEffects = function useListEffects(props) {
   }, [orderby]); // Reset when sorting changes
 
   // Effect 3: Expose methods through widget instance
+  // Uses wrapper functions that delegate to ref to avoid stale closures and infinite re-renders
   (0, _react.useEffect)(function () {
     if (listener !== null && listener !== void 0 && listener.onChange) {
       listener.onChange(name, {
-        selectItem: widgetMethods.selectItem,
-        deselectItem: widgetMethods.deselectItem,
-        getItem: widgetMethods.getItem,
-        getIndex: widgetMethods.getIndex,
-        clear: widgetMethods.clear,
-        getWidgets: widgetMethods.getWidgets,
-        showNavigation: showNavigation
+        selectItem: function selectItem(val) {
+          return widgetMethodsRef.current.selectItem(val);
+        },
+        deselectItem: function deselectItem(val) {
+          return widgetMethodsRef.current.deselectItem(val);
+        },
+        getItem: function getItem(index) {
+          return widgetMethodsRef.current.getItem(index);
+        },
+        getIndex: function getIndex(item) {
+          return widgetMethodsRef.current.getIndex(item);
+        },
+        clear: function clear() {
+          return widgetMethodsRef.current.clear();
+        },
+        getWidgets: function getWidgets(widgetName, index) {
+          return widgetMethodsRef.current.getWidgets(widgetName, index);
+        },
+        listItems: {
+          first: items[0],
+          last: items[items.length - 1],
+          length: items.length
+        },
+        showNavigation: showNavigation,
+        selectPageSize: function selectPageSize(size) {
+          return widgetMethodsRef.current.selectPageSize(size);
+        }
       });
     }
-  }, []);
+  }, [name, showNavigation, items]);
 
   // Effect 3: Expose methods through widget instance
   (0, _react.useEffect)(function () {
-    if (listener !== null && listener !== void 0 && listener.onChange) {
+    if (listener !== null && listener !== void 0 && listener.onChange && props.navigation !== _constants.LIST_NAVIGATION_TYPES.NONE) {
       listener.onChange(name, {
         selecteditem: listState.selectedItems[0]
       });
@@ -121,7 +147,7 @@ var useListEffects = exports.useListEffects = function useListEffects(props) {
   }, [listState.selectedItems]);
 
   // Effect 3b: Update selected item widgets for state restoration (not selectfirstitem)
-  var hasInitialWidgetUpdateRun = (0, _react.useRef)(false);
+
   (0, _react.useEffect)(function () {
     // Only run once on initial load when there are selected items from state restoration
     // Skip if selectfirstitem is true (handled in useListState)
@@ -136,7 +162,7 @@ var useListEffects = exports.useListEffects = function useListEffects(props) {
     rafRef1.current = requestAnimationFrame(function () {
       // getSelectedItemWidgets(null, listener, name);
       rafRef2.current = requestAnimationFrame(function () {
-        (0, _listHelpers.getSelectedItemWidgets)(null, listener, name);
+        (0, _listHelpers.getSelectedItemWidgets)(null, listener, name, listState.selectedItems[0] || null, Widgets);
       });
     });
     return function () {
@@ -150,12 +176,20 @@ var useListEffects = exports.useListEffects = function useListEffects(props) {
   }, [name, listState.selectedItems.length, initialRender, selectfirstitem]);
 
   // Effect 5: Handle selectfirstitem with onSelect
+  // Use setTimeout to ensure onSelect fires after onRender (which is called synchronously in ListItems)
   (0, _react.useEffect)(function () {
     if (selectfirstitem && widgetInstance && onSelect && listState.selectedItems.length > 0) {
       // Only trigger onSelect for selectfirstitem if it's the initial selection and not user-initiated
       if (listState.selectedItems.length === 1 && items.length > 0 && listState.selectedItems[0] === items[0]) {
         if (!userInitiatedSelectionRef.current) {
-          onSelect(widgetInstance, listState.selectedItems[0]); // Pass the first selected item
+          // Delay onSelect to ensure it fires after onRender
+          // onRender is called synchronously in the ListItems component
+          var timer = setTimeout(function () {
+            onSelect(widgetInstance, listState.selectedItems[0]);
+          }, 0);
+          return function () {
+            return clearTimeout(timer);
+          };
         }
       }
     }
@@ -173,7 +207,14 @@ var useListEffects = exports.useListEffects = function useListEffects(props) {
           listState.setFirstSelectedItem(firstItemInGroup);
           // Trigger onSelect for the initial selection of first item in grouped data only if not user-initiated
           if (onSelect && widgetInstance && !userInitiatedSelectionRef.current) {
-            onSelect(widgetInstance, firstItemInGroup); // Pass the first item in group
+            // Delay onSelect to ensure it fires after onRender
+            // onRender is called synchronously in the ListItems component
+            var timer = setTimeout(function () {
+              onSelect(widgetInstance, firstItemInGroup);
+            }, 0);
+            return function () {
+              return clearTimeout(timer);
+            };
           }
         };
 

package/components/data/list/hooks/useListEventHandlers.js

@@ -10,6 +10,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _react = require("react");
 var _lodashEs = require("lodash-es");
 var _listHelpers = require("../utils/list-helpers");
+var _WidgetProvider = require("@wavemaker/react-runtime/context/WidgetProvider");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -55,6 +56,7 @@ var useListEventHandlers = exports.useListEventHandlers = function useListEventH
     listener = props.listener,
     name = props.name;
   var selectedItemsRef = (0, _react.useRef)(selectedItems);
+  var Widgets = (0, _WidgetProvider.useWidgetProxy)();
   (0, _react.useEffect)(function () {
     selectedItemsRef.current = selectedItems;
   }, [selectedItems]);
@@ -168,7 +170,7 @@ var useListEventHandlers = exports.useListEventHandlers = function useListEventH
       }
       // If item is already selected, do nothing (don't deselect)
     }
-    (0, _listHelpers.getSelectedItemWidgets)(event, listener, name || "");
+    (0, _listHelpers.getSelectedItemWidgets)(event, listener, name || "", item || null, Widgets);
     if (widgetInstance) {
       delete widgetInstance._wmListItemId;
       widgetInstance.item = item;

package/components/data/list/hooks/useListState.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useListState = void 0;
 var _react = require("react");
 var _listHelpers = require("../utils/list-helpers");
+var _WidgetProvider = require("@wavemaker/react-runtime/context/WidgetProvider");
 /**
  * Custom hook for managing list state
  * @param dataset - The dataset array
@@ -17,6 +18,7 @@ var _listHelpers = require("../utils/list-helpers");
  * @returns State management object for the list
  */
 var useListState = exports.useListState = function useListState(dataset, pagesize, selectfirstitem, selectionlimit, listener, name) {
+  var Widgets = (0, _WidgetProvider.useWidgetProxy)();
   var _useState = (0, _react.useState)([]),
     selectedItems = _useState[0],
     setSelectedItems = _useState[1];
@@ -76,7 +78,7 @@ var useListState = exports.useListState = function useListState(dataset, pagesiz
           rafRef1.current = requestAnimationFrame(function () {
             // getSelectedItemWidgets(null, listener, name);
             rafRef2.current = requestAnimationFrame(function () {
-              (0, _listHelpers.getSelectedItemWidgets)(null, listener, name);
+              (0, _listHelpers.getSelectedItemWidgets)(null, listener, name, firstItem || null, Widgets);
             });
           });
         }

package/components/data/list/hooks/usePaginatedGroupedData.js

@@ -9,11 +9,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("react");
 var _lodashEs = require("lodash-es");
 var _constants = require("../utils/constants");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * Hook for calculating paginated grouped data based on navigation type and pagination
  */
@@ -22,12 +22,25 @@ var usePaginatedGroupedData = exports.usePaginatedGroupedData = function usePagi
     navigation = _ref.navigation,
     currentPage = _ref.currentPage,
     pagesize = _ref.pagesize,
-    visibleItems = _ref.visibleItems;
+    visibleItems = _ref.visibleItems,
+    isServerSidePagination = _ref.isServerSidePagination;
   return (0, _react.useMemo)(function () {
     if (!groupedData || !(0, _lodashEs.isArray)(groupedData) || groupedData.length === 0) {
       return [];
     }
 
+    // For server-side pagination, the data is already paginated by the server
+    // Just return all grouped data without additional client-side pagination
+    if (isServerSidePagination) {
+      return groupedData.map(function (group) {
+        return _objectSpread(_objectSpread({}, group), {}, {
+          data: group.data,
+          startIndexInGroup: 0,
+          originalDataLength: group.data.length
+        });
+      });
+    }
+
     // For on-demand navigation, show all items up to visibleItems
     if (navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND) {
       var itemCount = 0;
@@ -56,7 +69,7 @@ var usePaginatedGroupedData = exports.usePaginatedGroupedData = function usePagi
       return paginatedGroups;
     }
 
-    // For regular pagination
+    // For regular client-side pagination
     var startIndex = (currentPage - 1) * pagesize;
     var endIndex = currentPage * pagesize;
 
@@ -117,5 +130,5 @@ var usePaginatedGroupedData = exports.usePaginatedGroupedData = function usePagi
       _iterator2.f();
     }
     return result;
-  }, [groupedData, navigation, currentPage, pagesize, visibleItems]);
+  }, [groupedData, navigation, currentPage, pagesize, visibleItems, isServerSidePagination]);
 };