@wavemaker/react-runtime 11.14.2-1.245 → 12.0.0-next.28533

package/components/data/list/index.js

@@ -2,7 +2,7 @@
 "use client";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,11 +10,13 @@ exports["default"] = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _List = _interopRequireDefault(require("@mui/material/List"));
 var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _WidgetProvider = require("@wavemaker/react-runtime/context/WidgetProvider");
 var _components = require("@wavemaker/react-runtime/components/data/pagination/components");
 var _components2 = require("./components");
 var _common = require("@wavemaker/react-runtime/components/common");
@@ -24,14 +26,14 @@ var _listHelpers = require("./utils/list-helpers");
 var _utils = require("../table/utils");
 var _listWidgetMethods = require("./utils/list-widget-methods");
 var _types = require("../types");
-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); }
+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" != _typeof3(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; } // Import hooks
 // Import components
 // Import utilities
 var WmList = function WmList(props) {
-  var _paginationState$pagi5, _paginationState$pagi6;
+  var _listener$Widgets, _paginationState$pagi5, _paginationState$pagi6;
   // ==================== PROPS DESTRUCTURING ====================
   var className = props.className,
     styles = props.styles,
@@ -39,6 +41,8 @@ var WmList = function WmList(props) {
     height = props.height,
     _props$tabIndex = props.tabIndex,
     tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
+    _props$hidden = props.hidden,
+    hidden = _props$hidden === void 0 ? false : _props$hidden,
     _props$name = props.name,
     name = _props$name === void 0 ? "list" : _props$name,
     _props$boundarylinks = props.boundarylinks,
@@ -87,7 +91,7 @@ var WmList = function WmList(props) {
     _props$showrecordcoun = props.showrecordcount,
     showrecordcount = _props$showrecordcoun === void 0 ? _constants.LIST_DEFAULTS.SHOW_RECORD_COUNT : _props$showrecordcoun,
     _props$allowpagesizec = props.allowpagesizechange,
-    allowpagesizechange = _props$allowpagesizec === void 0 ? true : _props$allowpagesizec,
+    allowpagesizechange = _props$allowpagesizec === void 0 ? false : _props$allowpagesizec,
     _props$pagesizeoption = props.pagesizeoptions,
     pagesizeoptions = _props$pagesizeoption === void 0 ? "5,10,20,50,100" : _props$pagesizeoption,
     _props$paginationclas = props.paginationclass,
@@ -116,7 +120,7 @@ var WmList = function WmList(props) {
     horizontalalign = _props$horizontalalig === void 0 ? _constants.LIST_ALIGN.LEFT : _props$horizontalalig,
     itemsperrow = props.itemsperrow,
     _props$statehandler = props.statehandler,
-    statehandler = _props$statehandler === void 0 ? "URL" : _props$statehandler,
+    statehandler = _props$statehandler === void 0 ? "none" : _props$statehandler,
     onSelect = props.onSelect,
     onClick = props.onClick,
     onDblclick = props.onDblclick,
@@ -132,6 +136,9 @@ var WmList = function WmList(props) {
     renderItem = props.renderItem,
     children = props.children,
     listener = props.listener;
+  var Widgets = (0, _WidgetProvider.useWidgetProxy)();
+  // ==================== STATE INITIALIZATION ====================
+  var widgetInstance = Widgets[name];
 
   // ==================== DATASOURCE SUBSCRIPTION ====================
   // Disable state management for On-Demand and Scroll navigation
@@ -148,21 +155,28 @@ var WmList = function WmList(props) {
     }
   });
 
-  // ==================== STATE INITIALIZATION ====================
-  var widgetInstance = listener === null || listener === void 0 ? void 0 : listener.Widgets[name];
+  // Get proxy from page context for reactive widget access
 
   // is dataset from modal variable
   var _useState = (0, _react.useState)(false),
     isDatasetFromModalVariable = _useState[0],
     setIsDatasetFromModalVariable = _useState[1];
 
-  // Ensure dataset is always an array and add unique IDs
+  // Calculate hash of dataset content to detect mutations
+  // This runs every render but is lightweight compared to recalculating safeDataset
+  var datasetHash = Array.isArray(dataset) && (dataset !== null && dataset !== void 0 ? dataset : []).map(function (item, idx) {
+    if (!item || (0, _typeof2["default"])(item) !== "object") {
+      return "".concat(idx, ":").concat(item);
+    }
+    // Hash all object values
+    return "".concat(idx, ":").concat(Object.values(item).join("-"));
+  }).join("|");
   var safeDataset = (0, _react.useMemo)(function () {
     var data = (0, _listHelpers.getSafeDataset)(dataset);
     return (0, _utils.addUniqueRowIds)(data, {
       type: "list"
     });
-  }, [dataset]);
+  }, [datasetHash]);
 
   // Initial render tracking
   var _useState2 = (0, _react.useState)(true),
@@ -189,17 +203,23 @@ var WmList = function WmList(props) {
 
   // Determine if we're using server-side pagination
   // Check if datasource is API-aware (server-side) rather than checking runtime pagination data
-  var isServerSidePagination = (0, _react.useMemo)(function () {
+  var isServerSidePagination = (0, _react.useCallback)(function () {
+    if (navigation === _constants.LIST_NAVIGATION_TYPES.NONE) {
+      return false;
+    }
     return !!(datasource && datasource.execute && datasource.execute(_types.DataSource.Operation.IS_PAGEABLE));
-  }, [datasource]);
-
+  }, [datasource, navigation]);
+  var _useState7 = (0, _react.useState)(false),
+    isListCleared = _useState7[0],
+    setIsListCleared = _useState7[1];
   // Use accumulated data for On-Demand navigation, otherwise use regular dataset
   var effectiveDataset = (0, _react.useMemo)(function () {
+    if (isListCleared) return [];
     if (navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND && datasource && accumulatedData.length > 0) {
       return accumulatedData;
     }
     return safeDataset;
-  }, [navigation, datasource, accumulatedData, safeDataset]);
+  }, [navigation, datasource, accumulatedData, safeDataset, isListCleared]);
 
   // ==================== STATE PERSISTENCE ====================
   // Restore persisted state before initializing hooks
@@ -243,7 +263,7 @@ var WmList = function WmList(props) {
         var persistedPageSize = persisted.pagesize || pagesize;
 
         // Set datasource maxResults if we have a persisted pageSize and datasource
-        if (persisted.pagesize && isServerSidePagination && datasource && datasource.maxResults !== undefined) {
+        if (persisted.pagesize && isServerSidePagination() && datasource && datasource.maxResults !== undefined) {
           datasource.maxResults = persistedPageSize;
         }
         return {
@@ -259,7 +279,7 @@ var WmList = function WmList(props) {
         initialSelectedItems: [],
         initialActualPageSize: actualPageSize
       };
-    }, [name, statehandler, pagesize, navigation, isServerSidePagination, datasource]),
+    }, [name, statehandler, pagesize, navigation, isServerSidePagination(), datasource]),
     initialPage = _useMemo.initialPage,
     initialPageSize = _useMemo.initialPageSize,
     initialSelectedItems = _useMemo.initialSelectedItems,
@@ -267,9 +287,9 @@ var WmList = function WmList(props) {
 
   // ==================== PAGE RESTORE STATE ====================
   // Store the restored page number until pagination state is ready
-  var _useState7 = (0, _react.useState)(null),
-    restoredPageNumber = _useState7[0],
-    setRestoredPageNumber = _useState7[1];
+  var _useState8 = (0, _react.useState)(null),
+    restoredPageNumber = _useState8[0],
+    setRestoredPageNumber = _useState8[1];
 
   // ==================== DATA PROCESSING HOOKS ====================
   // Process dataset with ordering and transformations
@@ -344,14 +364,11 @@ var WmList = function WmList(props) {
     navigation: navigation,
     onDemandCurrentPage: onDemandCurrentPage,
     setOnDemandCurrentPage: setOnDemandCurrentPage,
-    isServerSidePagination: isServerSidePagination,
+    isServerSidePagination: isServerSidePagination(),
     listener: listener,
     name: name
   });
 
-  // ==================== WIDGET METHODS ====================
-  var widgetMethods = (0, _listWidgetMethods.useListWidgetMethods)(items, listState, multiselect, onSelect, widgetInstance, listener, userInitiatedSelectionRef, name);
-
   // ==================== STATE MANAGEMENT ====================
   // Disable state management for On-Demand and Scroll navigation
   var effectiveStateHandler = navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND || navigation === _constants.LIST_NAVIGATION_TYPES.SCROLL ? "none" : statehandler;
@@ -364,10 +381,37 @@ var WmList = function WmList(props) {
     items: items,
     initialActualPageSize: initialActualPageSize,
     multiselect: multiselect,
-    isServerSidePagination: isServerSidePagination,
+    isServerSidePagination: isServerSidePagination(),
     datasource: datasource
   });
 
+  // ==================== EVENT HANDLER FUNCTIONS ====================
+  var handlePageSizeChange = function handlePageSizeChange(newPageSize) {
+    // Get the old page size BEFORE updating
+    var oldPageSize = paginationState.currentPageSize;
+
+    // Get current persisted state to access all selected items across pages
+    var currentPersistedState = (0, _listHelpers.getListState)(name, statehandler);
+
+    // Build the state for page size change
+    var newState = stateManager.getStateForPageSizeChange(newPageSize, currentPersistedState === null || currentPersistedState === void 0 ? void 0 : currentPersistedState.selectedItem, (currentPersistedState === null || currentPersistedState === void 0 ? void 0 : currentPersistedState.pagesize) || oldPageSize);
+
+    // Save the state BEFORE changing page size
+    (0, _listHelpers.saveListState)(name, statehandler, newState);
+
+    // Update datasource maxResults if datasource has paging capability (similar to Angular)
+    if (isServerSidePagination() && datasource && datasource.maxResults !== undefined) {
+      datasource.maxResults = newPageSize;
+      datasource.invoke({
+        page: 1,
+        size: newPageSize
+      });
+    }
+  };
+
+  // ==================== WIDGET METHODS ====================
+  var widgetMethods = (0, _listWidgetMethods.useListWidgetMethods)(items, listState, multiselect, onSelect, widgetInstance, listener, userInitiatedSelectionRef, name, Widgets, paginationState.currentPageSize, setIsListCleared, handlePageSizeChange);
+
   // ==================== ALL SIDE EFFECTS ====================
   (0, _hooks.useListEffects)({
     name: name,
@@ -411,36 +455,9 @@ var WmList = function WmList(props) {
 
   // ==================== COMPUTED VALUES ====================
   // Use datasource noDataFound if available, otherwise check safeDataset
-  var noDataFound = !safeDataset || safeDataset.length === 0;
+  var noDataFound = Boolean(listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 || (_listener$Widgets = _listener$Widgets[name]) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets.cleared) || !safeDataset || safeDataset.length === 0;
   var itemsPerRowClass = (0, _listHelpers.getItemsPerRowClass)(itemsperrow, direction);
   var textAlignClass = (0, _listHelpers.getTextAlignClass)(horizontalalign);
-
-  // ==================== EVENT HANDLER FUNCTIONS ====================
-  var handlePageSizeChange = function handlePageSizeChange(newPageSize) {
-    // Get the old page size BEFORE updating
-    var oldPageSize = paginationState.currentPageSize;
-
-    // Get current persisted state to access all selected items across pages
-    var currentPersistedState = (0, _listHelpers.getListState)(name, statehandler);
-
-    // Build the state for page size change
-    var newState = stateManager.getStateForPageSizeChange(newPageSize, currentPersistedState === null || currentPersistedState === void 0 ? void 0 : currentPersistedState.selectedItem, (currentPersistedState === null || currentPersistedState === void 0 ? void 0 : currentPersistedState.pagesize) || oldPageSize);
-
-    // Save the state BEFORE changing page size
-    (0, _listHelpers.saveListState)(name, statehandler, newState);
-
-    // Update datasource maxResults if datasource has paging capability (similar to Angular)
-    if (isServerSidePagination && datasource && datasource.maxResults !== undefined) {
-      datasource.maxResults = newPageSize;
-    }
-
-    // Update page size
-    paginationState.setCurrentPageSize(newPageSize);
-
-    // Reset to first page (similar to Angular behavior)
-    paginationState.setCurrentPage(1);
-    paginationState.setVisibleItems(newPageSize);
-  };
   var showPaginationBasedOnVariableConfiguration = (0, _react.useMemo)(function () {
     var _paginationState$pagi, _paginationState$pagi2, _paginationState$pagi3, _paginationState$pagi4;
     // if dataset is from modal variable(means client side pagination, all records are loaded in the dataset on first load itself) then show pagination if records are greater than 5 records
@@ -457,7 +474,7 @@ var WmList = function WmList(props) {
     if ((paginationState === null || paginationState === void 0 || (_paginationState$pagi = paginationState.paginationMeta) === null || _paginationState$pagi === void 0 ? void 0 : _paginationState$pagi.totalElements) === undefined || (paginationState === null || paginationState === void 0 || (_paginationState$pagi2 = paginationState.paginationMeta) === null || _paginationState$pagi2 === void 0 ? void 0 : _paginationState$pagi2.size) === undefined) {
       return false;
     }
-    return (paginationState === null || paginationState === void 0 || (_paginationState$pagi3 = paginationState.paginationMeta) === null || _paginationState$pagi3 === void 0 ? void 0 : _paginationState$pagi3.totalElements) > ((_paginationState$pagi4 = paginationState.paginationMeta) === null || _paginationState$pagi4 === void 0 ? void 0 : _paginationState$pagi4.size);
+    return (paginationState === null || paginationState === void 0 || (_paginationState$pagi3 = paginationState.paginationMeta) === null || _paginationState$pagi3 === void 0 ? void 0 : _paginationState$pagi3.totalElements) > ((_paginationState$pagi4 = paginationState.paginationMeta) === null || _paginationState$pagi4 === void 0 ? void 0 : _paginationState$pagi4.size) || !!allowpagesizechange;
   }, [paginationState === null || paginationState === void 0 || (_paginationState$pagi5 = paginationState.paginationMeta) === null || _paginationState$pagi5 === void 0 ? void 0 : _paginationState$pagi5.totalElements, paginationState === null || paginationState === void 0 || (_paginationState$pagi6 = paginationState.paginationMeta) === null || _paginationState$pagi6 === void 0 ? void 0 : _paginationState$pagi6.size, isDatasetFromModalVariable, paginationState === null || paginationState === void 0 ? void 0 : paginationState.totalItems]);
 
   // check if dataset is from modal variable
@@ -486,12 +503,14 @@ var WmList = function WmList(props) {
 
   // ==================== RENDER ====================
   return __jsx(_Box["default"], {
-    className: (0, _clsx["default"])(_constants.DEFAULT_CLS, groupby ? listclass : className),
+    className: (0, _clsx["default"])(_constants.DEFAULT_CLS, className),
     sx: _objectSpread(_objectSpread({}, styles), {}, {
       height: "".concat(height, " !important"),
       width: "".concat(width, " !important"),
       overflow: "inherit !important",
       position: "relative"
+    }, hidden && {
+      display: "none !important"
     }),
     component: "div",
     "data-name": name,
@@ -578,7 +597,7 @@ var WmList = function WmList(props) {
     rawDataset: safeDataset,
     datasource: datasource,
     totalItems: paginationState.totalItems,
-    isServerSidePagination: isServerSidePagination,
+    isServerSidePagination: isServerSidePagination(),
     showNavigation: showNavigation
   })), showPaginationBasedOnVariableConfiguration && showNavigation && navigation && navigation !== _constants.LIST_NAVIGATION_TYPES.INLINE && navigation !== _constants.LIST_NAVIGATION_TYPES.ON_DEMAND && navigation !== _constants.LIST_NAVIGATION_TYPES.NONE && __jsx(_Box["default"], {
     component: "div",
@@ -606,7 +625,7 @@ var WmList = function WmList(props) {
     datasource: datasource,
     isLoadingMore: listState.isLoadingMore,
     setIsLoadingMore: listState.setIsLoadingMore,
-    isServerSidePagination: isServerSidePagination
+    isServerSidePagination: isServerSidePagination()
   }))));
 };
 var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmList);

package/components/data/list/utils/list-helpers.js

@@ -128,44 +128,82 @@ var getAllDescendants = function getAllDescendants(element) {
   traverse(element);
   return all;
 };
-var getSelectedItemWidgets = exports.getSelectedItemWidgets = function getSelectedItemWidgets(event, listener, name) {
+var getSelectedItemWidgets = exports.getSelectedItemWidgets = function getSelectedItemWidgets(event, listener, name, item, Widgets) {
+  var _item$_wmListItemId, _item$_wmListItemId$t;
   var listItem = null;
-  if (event) {
-    // Manual selection - get from event
-    listItem = event.currentTarget;
-  } else {
-    // Programmatic selection - find active item in DOM
-    var activeItems = document.querySelectorAll("[data-name=\"".concat(name, "\"] .app-list-item.active"));
-    if (activeItems.length > 0) {
-      // Get the last active item (most recently selected)
-      listItem = activeItems[activeItems.length - 1];
-    }
+  var lastItemId = null;
+  var id = item === null || item === void 0 || (_item$_wmListItemId = item._wmListItemId) === null || _item$_wmListItemId === void 0 || (_item$_wmListItemId$t = _item$_wmListItemId.toString) === null || _item$_wmListItemId$t === void 0 ? void 0 : _item$_wmListItemId$t.call(_item$_wmListItemId).split("_").pop();
+
+  // if (event) {
+  //   // Manual selection - get from event
+  //   listItem = event.currentTarget;
+  // } else {
+  //   // Programmatic selection - find active item in DOM
+  //   const activeItems = document.querySelectorAll(`[data-name="${name}"] .app-list-item.active`);
+  //   if (activeItems.length > 0) {
+  //     // Get the last active item (most recently selected)
+  //     listItem = activeItems[activeItems.length - 1];
+  //   }
+  // }
+
+  // const componentElements = listItem ? getAllDescendants(listItem) : [];
+
+  // const currentItemWidgets = componentElements.reduce((result: any, comp: any) => {
+  //   // Try different attributes to get widget name
+
+  //   const itemId = comp.getAttribute("item-id");
+  //   const widgetName = comp.getAttribute("name");
+
+  //   if (itemId) {
+  //     lastItemId = itemId;
+  //     result[widgetName] = Widgets?.[itemId] || {};
+  //     return result;
+  //   } else if (lastItemId) {
+  //     const extractIndexFromItemId = (itemId: string): number | null => {
+  //       const match = itemId.match(/^repeat_item_(\d+)_/);
+  //       return match ? parseInt(match[1], 10) : null;
+  //     };
+  //     const index = extractIndexFromItemId(lastItemId);
+  //     if (index !== null) {
+  //       result[widgetName] = Widgets?.[`repeat_item_${index}_${widgetName}`] || {};
+  //     }
+  //     return result;
+  //   }
+
+  //   if (widgetName) {
+  //     // Try to get the widget instance from the component or create a reference
+  //     let widgetInstance = comp.widget;
+
+  //     if (!widgetInstance) {
+  //       // Create a basic widget reference with properties from the DOM element
+  //       widgetInstance = {
+  //         name: widgetName,
+  //         caption: comp.getAttribute("caption") || comp.textContent || "",
+  //         value: comp.value || comp.getAttribute("value") || "",
+  //         // Add other common properties
+  //         show: comp.getAttribute("show") !== "false",
+  //         element: comp,
+  //       };
+  //     }
+
+  //     result[widgetName] = widgetInstance;
+  //   }
+  //   return result;
+  // }, {});
+
+  var currentItemWidgets = {};
+  if (id) {
+    Widgets && Object.keys(Widgets).filter(function (key) {
+      return key.startsWith("".concat(name, "_").concat(id, "_"));
+    }).forEach(function (key) {
+      currentItemWidgets[Widgets[key].name] = Widgets[key];
+    });
   }
-  var componentElements = listItem ? getAllDescendants(listItem) : [];
-  var currentItemWidgets = componentElements.reduce(function (result, comp) {
-    // Try different attributes to get widget name
-    var widgetName = comp.getAttribute("name");
-    if (widgetName) {
-      // Try to get the widget instance from the component or create a reference
-      var widgetInstance = comp.widget;
-      if (!widgetInstance) {
-        // Create a basic widget reference with properties from the DOM element
-        widgetInstance = {
-          name: widgetName,
-          caption: comp.getAttribute("caption") || comp.textContent || "",
-          value: comp.value || comp.getAttribute("value") || "",
-          // Add other common properties
-          show: comp.getAttribute("show") !== "false",
-          element: comp
-        };
-      }
-      result[widgetName] = widgetInstance;
-    }
-    return result;
-  }, {});
-  if (listener) {
+  var currentItem = currentItemWidgets;
+  if (listener && currentItem && Object.keys(currentItem).length > 0) {
     listener.onChange(name, {
-      selectedItemWidgets: currentItemWidgets
+      selectedItemWidgets: currentItem,
+      selecteditem: item
     });
   }
 };