@wavemaker-ai/react-runtime 1.0.0-rc.309

package/components/data/list/index.js

@@ -0,0 +1,691 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmList = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+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-ai/react-runtime/higherOrder/withBaseWrapper");
+var _WidgetProvider = require("@wavemaker-ai/react-runtime/context/WidgetProvider");
+var _components = require("@wavemaker-ai/react-runtime/components/data/pagination/components");
+var _components2 = require("./components");
+var _common = require("@wavemaker-ai/react-runtime/components/common");
+var _hooks = require("./hooks");
+var _constants = require("./utils/constants");
+var _listHelpers = require("./utils/list-helpers");
+var _utils = require("../table/utils");
+var _listWidgetMethods = require("./utils/list-widget-methods");
+var _types = require("../types");
+var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
+var _styleUtils = require("@wavemaker-ai/react-runtime/utils/style-utils");
+var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
+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; } // Import hooks
+// Import components
+// Import utilities
+var WmList = function WmList(props) {
+  var _listener$Widgets, _paginationState$pagi5, _paginationState$pagi6, _datasource$loading;
+  // ==================== PROPS DESTRUCTURING ====================
+  var className = props.className,
+    styles = props.styles,
+    width = props.width,
+    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,
+    boundarylinks = _props$boundarylinks === void 0 ? _constants.LIST_DEFAULTS.BOUNDARY_LINKS : _props$boundarylinks,
+    _props$collapsible = props.collapsible,
+    collapsible = _props$collapsible === void 0 ? _constants.LIST_DEFAULTS.COLLAPSIBLE : _props$collapsible,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? _constants.LIST_DIRECTION.VERTICAL : _props$direction,
+    _props$disableitem = props.disableitem,
+    disableitem = _props$disableitem === void 0 ? false : _props$disableitem,
+    _props$enablereorder = props.enablereorder,
+    enablereorder = _props$enablereorder === void 0 ? false : _props$enablereorder,
+    _props$multiselect = props.multiselect,
+    multiselect = _props$multiselect === void 0 ? _constants.LIST_DEFAULTS.MULTISELECT : _props$multiselect,
+    _props$selectfirstite = props.selectfirstitem,
+    selectfirstitem = _props$selectfirstite === void 0 ? _constants.LIST_DEFAULTS.SELECT_FIRST_ITEM : _props$selectfirstite,
+    _props$selectionlimit = props.selectionlimit,
+    selectionlimit = _props$selectionlimit === void 0 ? _constants.LIST_DEFAULTS.SELECTION_LIMIT : _props$selectionlimit,
+    _props$hidehorizontal = props.hidehorizontalscrollbar,
+    hidehorizontalscrollbar = _props$hidehorizontal === void 0 ? false : _props$hidehorizontal,
+    _props$dataset = props.dataset,
+    dataset = _props$dataset === void 0 ? [] : _props$dataset,
+    _props$datafield = props.datafield,
+    datafield = _props$datafield === void 0 ? "" : _props$datafield,
+    _props$displayfield = props.displayfield,
+    displayfield = _props$displayfield === void 0 ? "" : _props$displayfield,
+    displaylabel = props.displaylabel,
+    getDisplayExpression = props.getDisplayExpression,
+    datasource = props.datasource,
+    _props$deferload = props.deferload,
+    deferload = _props$deferload === void 0 ? false : _props$deferload,
+    _props$groupby = props.groupby,
+    groupby = _props$groupby === void 0 ? "" : _props$groupby,
+    _props$orderby = props.orderby,
+    orderby = _props$orderby === void 0 ? "" : _props$orderby,
+    _props$navigation = props.navigation,
+    navigation = _props$navigation === void 0 ? _constants.LIST_NAVIGATION_TYPES.NONE : _props$navigation,
+    _props$navigationalig = props.navigationalign,
+    navigationalign = _props$navigationalig === void 0 ? _constants.LIST_ALIGN.LEFT : _props$navigationalig,
+    pagesize = props.pagesize,
+    _props$maxsize = props.maxsize,
+    maxsize = _props$maxsize === void 0 ? _constants.LIST_DEFAULTS.MAX_SIZE : _props$maxsize,
+    _props$showcount = props.showcount,
+    showcount = _props$showcount === void 0 ? _constants.LIST_DEFAULTS.SHOW_COUNT : _props$showcount,
+    _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 ? false : _props$allowpagesizec,
+    _props$pagesizeoption = props.pagesizeoptions,
+    pagesizeoptions = _props$pagesizeoption === void 0 ? "5,10,20,50,100" : _props$pagesizeoption,
+    _props$paginationclas = props.paginationclass,
+    paginationclass = _props$paginationclas === void 0 ? "" : _props$paginationclas,
+    _props$showNavigation = props.showNavigation,
+    showNavigation = _props$showNavigation === void 0 ? true : _props$showNavigation,
+    _props$title = props.title,
+    title = _props$title === void 0 ? "" : _props$title,
+    _props$subheading = props.subheading,
+    subheading = _props$subheading === void 0 ? "" : _props$subheading,
+    _props$iconclass = props.iconclass,
+    iconclass = _props$iconclass === void 0 ? "" : _props$iconclass,
+    _props$nodatamessage = props.nodatamessage,
+    nodatamessage = _props$nodatamessage === void 0 ? _constants.LIST_MESSAGES.NO_DATA : _props$nodatamessage,
+    _props$loadingdatamsg = props.loadingdatamsg,
+    loadingdatamsg = _props$loadingdatamsg === void 0 ? _constants.LIST_MESSAGES.LOADING : _props$loadingdatamsg,
+    _props$loadingicon = props.loadingicon,
+    loadingicon = _props$loadingicon === void 0 ? "fa-spinner" : _props$loadingicon,
+    _props$ondemandmessag = props.ondemandmessage,
+    ondemandmessage = _props$ondemandmessag === void 0 ? _constants.LIST_MESSAGES.LOAD_MORE : _props$ondemandmessag,
+    _props$listclass = props.listclass,
+    listclass = _props$listclass === void 0 ? "list-group media-list" : _props$listclass,
+    _props$itemclass = props.itemclass,
+    itemclass = _props$itemclass === void 0 ? "list-group-item" : _props$itemclass,
+    _props$horizontalalig = props.horizontalalign,
+    horizontalalign = _props$horizontalalig === void 0 ? _constants.LIST_ALIGN.LEFT : _props$horizontalalig,
+    itemsperrow = props.itemsperrow,
+    _props$statehandler = props.statehandler,
+    statehandler = _props$statehandler === void 0 ? "none" : _props$statehandler,
+    onSelect = props.onSelect,
+    onClick = props.onClick,
+    onDblclick = props.onDblclick,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    onReorder = props.onReorder,
+    onSelectionlimitexceed = props.onSelectionlimitexceed,
+    onBeforedatarender = props.onBeforedatarender,
+    onRender = props.onRender,
+    onPaginationchange = props.onPaginationchange,
+    onSetrecord = props.onSetrecord,
+    onPageChange = props.onPageChange,
+    renderItem = props.renderItem,
+    children = props.children,
+    itemAttrs = props.itemAttrs,
+    listener = props.listener,
+    layoutClassName = props.layoutClassName,
+    wrap = props.wrap,
+    alignment = props.alignment,
+    gap = props.gap,
+    columngap = props.columngap,
+    _props$standalone = props.standalone,
+    standalone = _props$standalone === void 0 ? false : _props$standalone;
+  var datasetHashRef = (0, _react.useRef)([]);
+  var _useState = (0, _react.useState)(null),
+    currentDataset = _useState[0],
+    setCurrentDataset = _useState[1];
+  var Widgets = (0, _WidgetProvider.useWidgetProxy)(undefined, standalone);
+  // ==================== STATE INITIALIZATION ====================
+  var widgetInstance = Widgets[name];
+
+  // ==================== DATASOURCE SUBSCRIPTION ====================
+  // Disable state management for On-Demand and Scroll navigation
+  var effectiveStateHandlerForSubscription = navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND || navigation === _constants.LIST_NAVIGATION_TYPES.SCROLL ? "none" : statehandler;
+
+  // Subscribe to 'toggle-variable-state' event to handle state params
+  (0, _hooks.useDataSourceSubscription)({
+    datasource: datasource,
+    statehandler: effectiveStateHandlerForSubscription,
+    name: name,
+    onPageRestored: function onPageRestored(restoredPage) {
+      // Store the restored page number to apply when pagination is ready
+      setRestoredPageNumber(restoredPage);
+    }
+  });
+
+  // Get proxy from page context for reactive widget access
+
+  // is dataset from modal variable
+  var _useState2 = (0, _react.useState)(false),
+    isDatasetFromModalVariable = _useState2[0],
+    setIsDatasetFromModalVariable = _useState2[1];
+  var resolvedDataset = (0, _listHelpers.getSafeDataset)(dataset);
+  if (!(0, _isEqual["default"])(datasetHashRef.current, resolvedDataset)) {
+    datasetHashRef.current = resolvedDataset;
+    setCurrentDataset(resolvedDataset);
+  }
+  var safeDataset = (0, _react.useMemo)(function () {
+    return (0, _utils.addUniqueRowIds)(resolvedDataset, {
+      type: "list"
+    });
+  }, [currentDataset]);
+
+  // Initial render tracking
+  var _useState3 = (0, _react.useState)(true),
+    initialRender = _useState3[0],
+    setinitialRender = _useState3[1];
+
+  // User interaction tracking
+  var userInitiatedSelectionRef = _react["default"].useRef(false);
+  var listScrollContainerRef = (0, _react.useRef)(null);
+  var scrollSentinelRef = (0, _react.useRef)(null); // Scroll sentinel: list sets when row, pagination sets when vertical
+
+  // ==================== ON-DEMAND NAVIGATION STATE ====================
+  // For On-Demand navigation, accumulate data from multiple pages
+  var _useState4 = (0, _react.useState)([]),
+    accumulatedData = _useState4[0],
+    setAccumulatedData = _useState4[1];
+  var _useState5 = (0, _react.useState)(-1),
+    lastLoadedPage = _useState5[0],
+    setLastLoadedPage = _useState5[1];
+  var _useState6 = (0, _react.useState)(true),
+    isFirstLoad = _useState6[0],
+    setIsFirstLoad = _useState6[1];
+  var _useState7 = (0, _react.useState)(0),
+    onDemandCurrentPage = _useState7[0],
+    setOnDemandCurrentPage = _useState7[1];
+
+  // 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.useCallback)(function () {
+    if (navigation === _constants.LIST_NAVIGATION_TYPES.NONE) {
+      return false;
+    }
+    return !!(datasource && datasource.execute && datasource.execute(_types.DataSource.Operation.IS_PAGEABLE));
+  }, [datasource, navigation]);
+  var _useState8 = (0, _react.useState)(false),
+    isListCleared = _useState8[0],
+    setIsListCleared = _useState8[1];
+  // Use accumulated data for On-Demand and Scroll navigation (preserve old + new data when loading more)
+  var effectiveDataset = (0, _react.useMemo)(function () {
+    if (isListCleared) return [];
+    if (navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND && datasource && accumulatedData.length > 0) {
+      return accumulatedData;
+    }
+    if (navigation === _constants.LIST_NAVIGATION_TYPES.SCROLL && datasource && accumulatedData.length > 0) {
+      return accumulatedData;
+    }
+    return safeDataset;
+  }, [navigation, datasource, accumulatedData, safeDataset, isListCleared]);
+
+  // ==================== STATE PERSISTENCE ====================
+  // Restore persisted state before initializing hooks
+  var _useMemo = (0, _react.useMemo)(function () {
+      var _datasource$paginatio, _datasource$paginatio2;
+      // Skip state restoration for On-Demand and Scroll navigation
+      if (navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND || navigation === _constants.LIST_NAVIGATION_TYPES.SCROLL) {
+        return {
+          initialPage: 1,
+          initialPageSize: pagesize || (resolvedDataset === null || resolvedDataset === void 0 ? void 0 : resolvedDataset.length),
+          initialSelectedItems: [],
+          initialActualPageSize: undefined
+        };
+      }
+      var persisted = (0, _listHelpers.getListState)(name, statehandler);
+
+      // Determine the actual page size (original datasource page size)
+      var actualPageSize;
+      if ((persisted === null || persisted === void 0 ? void 0 : persisted.actualpagesize) !== undefined) {
+        // If we have a persisted actualPageSize, use it (it should never change)
+        actualPageSize = persisted.actualpagesize;
+      } else if (datasource !== null && datasource !== void 0 && (_datasource$paginatio = datasource.pagination) !== null && _datasource$paginatio !== void 0 && _datasource$paginatio.size) {
+        // Otherwise, if this is the first load, capture it from datasource
+        actualPageSize = datasource.pagination.size;
+      } else if (datasource !== null && datasource !== void 0 && datasource.maxResults) {
+        // Fallback to maxResults if available
+        actualPageSize = datasource.maxResults;
+      }
+      if (persisted) {
+        // Get the pagination page
+        var restoredPage = persisted.pagination || 1;
+
+        // Get selected indices for the restored page if selectedItem exists
+        var selectedItemIndexes = persisted.selectedItem ? persisted.selectedItem.filter(function (item) {
+          return item.page === restoredPage;
+        }).map(function (item) {
+          return item.index;
+        }) : [];
+
+        // Get persisted page size
+        var persistedPageSize = persisted.pagesize || pagesize;
+
+        // Set datasource maxResults if we have a persisted pageSize and datasource
+        if (persisted.pagesize && isServerSidePagination() && datasource && datasource.maxResults !== undefined) {
+          datasource.maxResults = persistedPageSize || (resolvedDataset === null || resolvedDataset === void 0 ? void 0 : resolvedDataset.length);
+        }
+        return {
+          initialPage: restoredPage,
+          initialPageSize: persistedPageSize || (resolvedDataset === null || resolvedDataset === void 0 ? void 0 : resolvedDataset.length),
+          initialSelectedItems: selectedItemIndexes,
+          initialActualPageSize: actualPageSize
+        };
+      }
+
+      // Angular wm-list: maxResults defaults to `pagesize || 20` — do not use full dataset length as page size
+      // for Basic/Classic/Pager when the widget omits `pagesize` (otherwise pagination never appears).
+      // Scroll / On-Demand already returned above; here use Angular default page size whenever pager is enabled.
+      var clientDefaultPageSize = navigation && navigation !== _constants.LIST_NAVIGATION_TYPES.NONE ? _constants.LIST_DEFAULTS.PAGESIZE : resolvedDataset === null || resolvedDataset === void 0 ? void 0 : resolvedDataset.length;
+      return {
+        initialPage: 1,
+        initialPageSize: pagesize || (isServerSidePagination() && datasource !== null && datasource !== void 0 && (_datasource$paginatio2 = datasource.pagination) !== null && _datasource$paginatio2 !== void 0 && _datasource$paginatio2.size ? datasource.pagination.size : isServerSidePagination() ? resolvedDataset === null || resolvedDataset === void 0 ? void 0 : resolvedDataset.length : clientDefaultPageSize),
+        initialSelectedItems: [],
+        initialActualPageSize: actualPageSize
+      };
+    }, [name, statehandler, pagesize, navigation, isServerSidePagination(), datasource, resolvedDataset]),
+    initialPage = _useMemo.initialPage,
+    initialPageSize = _useMemo.initialPageSize,
+    initialSelectedItems = _useMemo.initialSelectedItems,
+    initialActualPageSize = _useMemo.initialActualPageSize;
+
+  // ==================== PAGE RESTORE STATE ====================
+  // Store the restored page number until pagination state is ready
+  var _useState9 = (0, _react.useState)(null),
+    restoredPageNumber = _useState9[0],
+    setRestoredPageNumber = _useState9[1];
+
+  // ==================== DATA PROCESSING HOOKS ====================
+  // Process dataset with ordering and transformations
+  var orderedDataset = (0, _hooks.useListData)(effectiveDataset, {
+    datafield: datafield,
+    displayfield: displayfield,
+    displaylabel: displaylabel,
+    getDisplayExpression: getDisplayExpression,
+    orderby: orderby,
+    groupby: groupby
+  });
+
+  // Drag and drop functionality
+  var _useDragAndDrop = (0, _components2.useDragAndDrop)(orderedDataset, onReorder, orderby),
+    items = _useDragAndDrop.items,
+    handleDragEnd = _useDragAndDrop.handleDragEnd,
+    hasBeenReordered = _useDragAndDrop.hasBeenReordered;
+
+  // Group data if groupby is specified
+  var groupedData = (0, _hooks.useGroupedData)(items, groupby);
+
+  // ==================== PAGINATION HOOK ====================
+  var paginationState = (0, _hooks.useListPagination)({
+    items: items,
+    groupedData: groupedData,
+    groupby: groupby,
+    pagesize: initialPageSize || (resolvedDataset === null || resolvedDataset === void 0 ? void 0 : resolvedDataset.length),
+    allowpagesizechange: allowpagesizechange,
+    pagesizeoptions: pagesizeoptions,
+    navigation: navigation,
+    initialPage: initialPage,
+    datasource: datasource
+  });
+
+  // ==================== LIST STATE HOOK ====================
+  var listState = (0, _hooks.useListState)(items, paginationState.currentPageSize, selectfirstitem, selectionlimit, listener, name, standalone);
+
+  // ==================== EVENT HANDLERS HOOK ====================
+  var eventHandlers = (0, _hooks.useListEventHandlers)({
+    items: items,
+    multiselect: multiselect,
+    disableitem: disableitem,
+    selectionlimit: selectionlimit,
+    collapsible: collapsible,
+    selectedItems: listState.selectedItems,
+    setSelectedItems: listState.setSelectedItems,
+    activeItems: listState.activeItems,
+    setActiveItems: listState.setActiveItems,
+    firstSelectedItem: listState.firstSelectedItem,
+    setFirstSelectedItem: listState.setFirstSelectedItem,
+    groupCollapsed: listState.groupCollapsed,
+    setGroupCollapsed: listState.setGroupCollapsed,
+    currentPage: paginationState.currentPage,
+    setCurrentPage: paginationState.setCurrentPage,
+    visibleItems: paginationState.visibleItems,
+    setVisibleItems: paginationState.setVisibleItems,
+    isLoadingMore: listState.isLoadingMore,
+    setIsLoadingMore: listState.setIsLoadingMore,
+    onClick: onClick,
+    onDblclick: onDblclick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onSelectionlimitexceed: onSelectionlimitexceed,
+    onPaginationchange: onPaginationchange,
+    onPageChange: onPageChange,
+    onSetrecord: onSetrecord,
+    widgetInstance: widgetInstance,
+    onSelect: onSelect,
+    userInitiatedSelectionRef: userInitiatedSelectionRef,
+    datasource: datasource,
+    pagesize: paginationState.currentPageSize,
+    navigation: navigation,
+    onDemandCurrentPage: onDemandCurrentPage,
+    setOnDemandCurrentPage: setOnDemandCurrentPage,
+    isServerSidePagination: isServerSidePagination(),
+    listener: listener,
+    name: name,
+    standalone: standalone
+  });
+
+  // Effect to update current page size if pagesize is not provided
+  (0, _react.useEffect)(function () {
+    if (pagesize) return;
+    if (!resolvedDataset.length) return;
+    if (navigation === _constants.LIST_NAVIGATION_TYPES.NONE || !navigation) {
+      paginationState.setCurrentPageSize(resolvedDataset.length);
+    }
+  }, [resolvedDataset.length, pagesize, paginationState]);
+
+  // ==================== 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;
+  var stateManager = (0, _hooks.useListStateManager)({
+    name: name,
+    storage: effectiveStateHandler,
+    currentPage: paginationState.currentPage,
+    currentPageSize: paginationState.currentPageSize,
+    selectedItems: listState.selectedItems,
+    items: items,
+    initialActualPageSize: initialActualPageSize,
+    multiselect: multiselect,
+    isServerSidePagination: isServerSidePagination(),
+    datasource: datasource
+  });
+
+  // When Scroll navigation loads more, pagination calls this with accumulated result so list preserves old + new data
+  var handleScrollDataUpdate = (0, _react.useCallback)(function (data) {
+    setAccumulatedData(data);
+  }, []);
+
+  // ==================== 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,
+    navigation: navigation,
+    datasource: datasource,
+    safeDataset: safeDataset,
+    items: items,
+    orderedDataset: orderedDataset,
+    groupedData: groupedData,
+    groupby: groupby,
+    orderby: orderby,
+    selectfirstitem: selectfirstitem,
+    statehandler: effectiveStateHandler,
+    accumulatedData: accumulatedData,
+    lastLoadedPage: lastLoadedPage,
+    isFirstLoad: isFirstLoad,
+    onDemandCurrentPage: onDemandCurrentPage,
+    hasBeenReordered: hasBeenReordered,
+    initialRender: initialRender,
+    initialPage: initialPage,
+    initialPageSize: initialPageSize,
+    initialSelectedItems: initialSelectedItems,
+    initialActualPageSize: initialActualPageSize,
+    setAccumulatedData: setAccumulatedData,
+    setLastLoadedPage: setLastLoadedPage,
+    setIsFirstLoad: setIsFirstLoad,
+    setOnDemandCurrentPage: setOnDemandCurrentPage,
+    setinitialRender: setinitialRender,
+    listState: listState,
+    paginationState: paginationState,
+    widgetMethods: widgetMethods,
+    onSelect: onSelect,
+    widgetInstance: widgetInstance,
+    listener: listener,
+    userInitiatedSelectionRef: userInitiatedSelectionRef,
+    restoredPageNumber: restoredPageNumber,
+    setRestoredPageNumber: setRestoredPageNumber,
+    showNavigation: showNavigation,
+    stateManager: stateManager,
+    standalone: standalone
+  });
+
+  // ==================== COMPUTED VALUES ====================
+  // Use datasource noDataFound if available, otherwise check safeDataset
+  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);
+  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
+
+    if (isDatasetFromModalVariable && paginationState !== null && paginationState !== void 0 && paginationState.totalItems) {
+      // if records are less than 5 records then do not show pagination
+      if ((paginationState === null || paginationState === void 0 ? void 0 : paginationState.totalItems) < _constants.LIST_DEFAULTS.PAGESIZE_FOR_MODAL_VARIABLE) {
+        return false;
+      }
+      // In modal variable if total records are greater than 5 then set current page size to 5 and show pagination
+      paginationState.setCurrentPageSize(_constants.LIST_DEFAULTS.PAGESIZE_FOR_MODAL_VARIABLE);
+      return true;
+    }
+    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) || !!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
+  (0, _react.useEffect)(function () {
+    (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var result;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return datasource && datasource.execute && (datasource === null || datasource === void 0 ? void 0 : datasource.execute(_types.DataSource.Operation.IS_API_AWARE));
+          case 2:
+            result = _context.sent;
+            if (result === false) {
+              setIsDatasetFromModalVariable(true);
+            } else {
+              setIsDatasetFromModalVariable(false);
+            }
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }))();
+  }, [datasource]);
+  var showHorizontalScrollSentinel = showNavigation && navigation === _constants.LIST_NAVIGATION_TYPES.SCROLL && (direction === _constants.LIST_DIRECTION.HORIZONTAL || direction === "row");
+  var hostAutoLayoutPrefixes = ["pos-"].concat((0, _toConsumableArray2["default"])(_constants.INSETION_POSITION), ["zi-", "w-", "h-"]);
+  var wrapper_autoLayout_Classes = (0, _react.useMemo)(function () {
+    return (0, _styleUtils.filterAutoLayoutClasses)(layoutClassName, hostAutoLayoutPrefixes);
+  }, [layoutClassName]);
+  var ul_autoLayout_Classes = (0, _react.useMemo)(function () {
+    return (0, _styleUtils.filterAutoLayoutClasses)(layoutClassName, hostAutoLayoutPrefixes, "exclude");
+  }, [layoutClassName]);
+  var hasListGroupAutoLayout = (0, _react.useMemo)(function () {
+    return (0, _listHelpers.hasListGroupAutoLayoutClass)({
+      direction: direction,
+      wrap: wrap,
+      alignment: alignment,
+      gap: gap,
+      columngap: columngap
+    });
+  }, [direction, wrap, alignment, gap, columngap]);
+
+  // ==================== RENDER ====================
+  return __jsx(_Box["default"], {
+    className: (0, _clsx["default"])(_constants.DEFAULT_CLS, "wm-overflow-inherit", "wm-position-relative", className, hidden && "wm-hidden", wrapper_autoLayout_Classes),
+    component: "div",
+    "data-name": name,
+    name: name,
+    "data-navigation": navigation
+  }, __jsx(_components2.ListHeader, {
+    title: title,
+    subheading: subheading,
+    iconclass: iconclass
+  }), __jsx(_common.AppSpinner, {
+    show: (_datasource$loading = datasource === null || datasource === void 0 ? void 0 : datasource.loading) !== null && _datasource$loading !== void 0 ? _datasource$loading : false,
+    spinnermessages: [loadingdatamsg]
+  }), __jsx(_components.InlineNavigation, {
+    navigation: navigation,
+    currentPage: paginationState.currentPage,
+    totalPages: paginationState.effectiveTotalPages,
+    noDataFound: noDataFound,
+    onPageChange: eventHandlers.handlePageChange,
+    isLoading: listState.isLoadingMore,
+    showNavigation: showNavigation
+  }, __jsx(_List["default"], {
+    ref: listScrollContainerRef,
+    className: (0, _clsx["default"])("app-livelist-container", "clearfix", listclass, textAlignClass, hidehorizontalscrollbar ? "hide-scrollbar" : "", direction === _constants.LIST_DIRECTION.HORIZONTAL ? "app-horizontal-list" : "", hasListGroupAutoLayout && "list-group-autolayout", ul_autoLayout_Classes),
+    style: _objectSpread({}, styles),
+    tabIndex: tabIndex,
+    role: "list"
+  }, noDataFound ? __jsx(_components2.NoDataMessage, {
+    message: nodatamessage
+  }) : __jsx(_components2.ListItems, {
+    items: items,
+    groupedData: groupedData,
+    groupby: groupby,
+    navigation: navigation,
+    currentPage: paginationState.currentPage,
+    pagesize: paginationState.currentPageSize,
+    visibleItems: paginationState.visibleItems,
+    orderby: orderby,
+    disableitem: disableitem,
+    itemclass: itemclass,
+    itemsPerRowClass: itemsPerRowClass,
+    direction: direction,
+    enablereorder: enablereorder,
+    activeItems: listState.activeItems,
+    name: name,
+    tabIndex: tabIndex,
+    renderItem: renderItem,
+    itemTemplate: children,
+    nodatamessage: nodatamessage,
+    ondemandmessage: ondemandmessage,
+    loadingicon: loadingicon,
+    loadingdatamsg: loadingdatamsg,
+    paginationclass: paginationclass,
+    isLoadingMore: listState.isLoadingMore,
+    collapsible: collapsible,
+    showcount: showcount,
+    groupCollapsed: listState.groupCollapsed,
+    handleListItemClick: eventHandlers.handleListItemClick,
+    handleListItemDoubleClick: eventHandlers.handleListItemDoubleClick,
+    handleListItemMouseEnter: eventHandlers.handleListItemMouseEnter,
+    handleListItemMouseLeave: eventHandlers.handleListItemMouseLeave,
+    handleDragEnd: handleDragEnd,
+    handleLoadMore: eventHandlers.handleLoadMore,
+    handleHeaderClick: eventHandlers.handleHeaderClick,
+    onBeforedatarender: onBeforedatarender,
+    onRender: onRender,
+    widgetInstance: widgetInstance,
+    rawDataset: safeDataset,
+    datasource: datasource,
+    totalItems: paginationState.totalItems,
+    isServerSidePagination: isServerSidePagination(),
+    showNavigation: showNavigation,
+    itemAttrs: itemAttrs,
+    hasListGroupAutoLayout: hasListGroupAutoLayout,
+    standalone: standalone
+  }), showHorizontalScrollSentinel && __jsx(_Box["default"], {
+    ref: scrollSentinelRef,
+    component: "span",
+    sx: {
+      display: "block",
+      width: "1px",
+      height: "1px",
+      minWidth: "1px",
+      minHeight: "1px",
+      flexShrink: 0,
+      margin: 0,
+      padding: 0,
+      overflow: "hidden",
+      visibility: "hidden",
+      pointerEvents: "none"
+    }
+  })), 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",
+    className: "panel-footer"
+  }, __jsx(_components2.ListPagination, {
+    name: name,
+    navigation: navigation,
+    listDirection: direction,
+    scrollContainerRef: listScrollContainerRef,
+    sentinelRef: scrollSentinelRef,
+    orderedDataset: groupby ? Array(paginationState.totalItems).fill(null) : items,
+    pagesize: paginationState.currentPageSize,
+    navigationalign: navigationalign,
+    showrecordcount: showrecordcount,
+    maxsize: maxsize,
+    boundarylinks: boundarylinks,
+    paginationclass: paginationclass,
+    allowpagesizechange: allowpagesizechange,
+    pagesizeoptions: pagesizeoptions,
+    widgetInstance: widgetInstance,
+    onPaginationChange: eventHandlers.handlePaginationChange,
+    onSetRecord: eventHandlers.handleSetRecord,
+    onPageSizeChange: handlePageSizeChange,
+    currentPage: paginationState.currentPage,
+    listener: listener,
+    paginationMeta: paginationState.paginationMeta,
+    totalItems: paginationState.totalItems,
+    datasource: datasource,
+    isLoadingMore: listState.isLoadingMore,
+    setIsLoadingMore: listState.setIsLoadingMore,
+    isServerSidePagination: isServerSidePagination(),
+    onDataUpdate: handleScrollDataUpdate
+  }))));
+};
+WmList.displayName = "WmList";
+var WmListStandalone = exports.WmList = (0, _withStandalone["default"])(WmList);
+/**
+ * The WmList component provides a way to display a collection of data items.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/data-list--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/data-list--docs)
+ *
+ * @param props - {@link WmListProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmList);