@wavemaker-ai/react-runtime 1.0.0-rc.312 → 1.0.0-rc.317

package/components/data/list/index.js

@@ -1,357 +1,295 @@
-"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,
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+import List from "@mui/material/List";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import { useWidgetProxy } from "../../../context/WidgetProvider";
+import { InlineNavigation } from "../pagination/components";
+import { NoDataMessage, useDragAndDrop } from "./components";
+import { AppSpinner } from "../../common";
+import {
+  useListData,
+  useListState,
+  useGroupedData,
+  useListEventHandlers,
+  useListPagination,
+  useListEffects,
+  useDataSourceSubscription,
+  useListStateManager
+} from "./hooks";
+import { ListHeader, ListPagination, ListItems } from "./components";
+import {
+  DEFAULT_CLS,
+  LIST_NAVIGATION_TYPES,
+  LIST_DEFAULTS,
+  LIST_MESSAGES,
+  LIST_ALIGN,
+  LIST_DIRECTION,
+  INSETION_POSITION
+} from "./utils/constants";
+import {
+  getItemsPerRowClass,
+  getTextAlignClass,
+  getSafeDataset,
+  getListState,
+  saveListState,
+  hasListGroupAutoLayoutClass
+} from "./utils/list-helpers";
+import { addUniqueRowIds } from "../table/utils";
+import { useListWidgetMethods } from "./utils/list-widget-methods";
+import { DataSource } from "../types";
+import isEqual from "lodash-es/isEqual";
+import { filterAutoLayoutClasses } from "../../../utils/style-utils";
+import withStandalone from "../../../higherOrder/withStandalone";
+const WmList = (props) => {
+  var _a, _b, _c, _d, _e;
+  const {
+    // Layout & Styling
+    className,
+    styles,
+    width,
+    height,
+    tabIndex = 0,
+    hidden = false,
+    // List Configuration
+    name = "list",
+    boundarylinks = LIST_DEFAULTS.BOUNDARY_LINKS,
+    collapsible = LIST_DEFAULTS.COLLAPSIBLE,
+    direction = LIST_DIRECTION.VERTICAL,
+    disableitem = false,
+    enablereorder = false,
+    multiselect = LIST_DEFAULTS.MULTISELECT,
+    selectfirstitem = LIST_DEFAULTS.SELECT_FIRST_ITEM,
+    selectionlimit = LIST_DEFAULTS.SELECTION_LIMIT,
+    hidehorizontalscrollbar = false,
+    selecteditem,
+    // Data Props
+    dataset = [],
+    datafield = "",
+    displayfield = "",
+    displaylabel,
+    getDisplayExpression,
+    datasource,
+    deferload = false,
+    // Grouping & Ordering
+    groupby = "",
+    orderby = "",
+    // Pagination
+    navigation = LIST_NAVIGATION_TYPES.NONE,
+    navigationalign = LIST_ALIGN.LEFT,
+    pagesize,
+    maxsize = LIST_DEFAULTS.MAX_SIZE,
+    showcount = LIST_DEFAULTS.SHOW_COUNT,
+    showrecordcount = LIST_DEFAULTS.SHOW_RECORD_COUNT,
+    allowpagesizechange = false,
+    pagesizeoptions = "5,10,20,50,100",
+    paginationclass = "",
+    showNavigation = true,
+    // Display Text
+    title = "",
+    subheading = "",
+    iconclass = "",
+    nodatamessage = LIST_MESSAGES.NO_DATA,
+    loadingdatamsg = LIST_MESSAGES.LOADING,
+    loadingicon = "fa-spinner",
+    ondemandmessage = LIST_MESSAGES.LOAD_MORE,
+    // Styling Classes
+    listclass = "list-group media-list",
+    itemclass = "list-group-item",
+    horizontalalign = LIST_ALIGN.LEFT,
+    itemsperrow,
+    // State Management
+    statehandler = "none",
+    // Event Handlers
+    onSelect,
+    onClick,
+    onDblclick,
+    onMouseEnter,
+    onMouseLeave,
+    onReorder,
+    onSelectionlimitexceed,
+    onBeforedatarender,
+    onRender,
+    onPaginationchange,
+    onSetrecord,
+    onPageChange,
+    // Template & Rendering
+    renderItem,
+    children,
+    itemAttrs,
+    // Widget Instance
+    listener,
+    layoutClassName,
+    wrap,
+    alignment,
+    gap,
+    columngap,
+    standalone = false
+  } = props;
+  const datasetHashRef = useRef([]);
+  const [currentDataset, setCurrentDataset] = useState(null);
+  const Widgets = useWidgetProxy(void 0, standalone);
+  const widgetInstance = Widgets[name];
+  const effectiveStateHandlerForSubscription = navigation === LIST_NAVIGATION_TYPES.ON_DEMAND || navigation === LIST_NAVIGATION_TYPES.SCROLL ? "none" : statehandler;
+  useDataSourceSubscription({
+    datasource,
     statehandler: effectiveStateHandlerForSubscription,
-    name: name,
-    onPageRestored: function onPageRestored(restoredPage) {
-      // Store the restored page number to apply when pagination is ready
+    name,
+    onPageRestored: (restoredPage) => {
       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)) {
+  const [isDatasetFromModalVariable, setIsDatasetFromModalVariable] = useState(false);
+  const resolvedDataset = getSafeDataset(dataset, datasource);
+  if (!isEqual(datasetHashRef.current, resolvedDataset)) {
     datasetHashRef.current = resolvedDataset;
     setCurrentDataset(resolvedDataset);
   }
-  var safeDataset = (0, _react.useMemo)(function () {
-    return (0, _utils.addUniqueRowIds)(resolvedDataset, {
-      type: "list"
-    });
+  const safeDataset = useMemo(() => {
+    return 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) {
+  const [initialRender, setinitialRender] = useState(true);
+  const userInitiatedSelectionRef = React.useRef(false);
+  const listScrollContainerRef = useRef(null);
+  const scrollSentinelRef = useRef(null);
+  const [accumulatedData, setAccumulatedData] = useState([]);
+  const [lastLoadedPage, setLastLoadedPage] = useState(-1);
+  const [isFirstLoad, setIsFirstLoad] = useState(true);
+  const [onDemandCurrentPage, setOnDemandCurrentPage] = useState(0);
+  const isServerSidePagination = useCallback(() => {
+    if (navigation === LIST_NAVIGATION_TYPES.NONE) {
       return false;
     }
-    return !!(datasource && datasource.execute && datasource.execute(_types.DataSource.Operation.IS_PAGEABLE));
+    return !!(datasource && datasource.execute && datasource.execute(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 () {
+  const [isListCleared, setIsListCleared] = useState(false);
+  const effectiveDataset = useMemo(() => {
     if (isListCleared) return [];
-    if (navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND && datasource && accumulatedData.length > 0) {
+    if (navigation === LIST_NAVIGATION_TYPES.ON_DEMAND && datasource && accumulatedData.length > 0) {
       return accumulatedData;
     }
-    if (navigation === _constants.LIST_NAVIGATION_TYPES.SCROLL && datasource && accumulatedData.length > 0) {
+    if (navigation === 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;
+  const { initialPage, initialPageSize, initialSelectedItems, initialActualPageSize } = useMemo(() => {
+    var _a2, _b2;
+    if (navigation === LIST_NAVIGATION_TYPES.ON_DEMAND || navigation === LIST_NAVIGATION_TYPES.SCROLL) {
       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),
+        initialPageSize: pagesize || (resolvedDataset == null ? void 0 : resolvedDataset.length),
         initialSelectedItems: [],
+        initialActualPageSize: void 0
+      };
+    }
+    const persisted = getListState(name, statehandler);
+    let actualPageSize;
+    if ((persisted == null ? void 0 : persisted.actualpagesize) !== void 0) {
+      actualPageSize = persisted.actualpagesize;
+    } else if ((_a2 = datasource == null ? void 0 : datasource.pagination) == null ? void 0 : _a2.size) {
+      actualPageSize = datasource.pagination.size;
+    } else if (datasource == null ? void 0 : datasource.maxResults) {
+      actualPageSize = datasource.maxResults;
+    }
+    if (persisted) {
+      const restoredPage = persisted.pagination || 1;
+      const selectedItemIndexes = persisted.selectedItem ? persisted.selectedItem.filter((item) => item.page === restoredPage).map((item) => item.index) : [];
+      const persistedPageSize = persisted.pagesize || pagesize;
+      if (persisted.pagesize && isServerSidePagination() && datasource && datasource.maxResults !== void 0) {
+        datasource.maxResults = persistedPageSize || (resolvedDataset == null ? void 0 : resolvedDataset.length);
+      }
+      return {
+        initialPage: restoredPage,
+        initialPageSize: persistedPageSize || (resolvedDataset == null ? void 0 : resolvedDataset.length),
+        initialSelectedItems: selectedItemIndexes,
         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
+    }
+    const clientDefaultPageSize = navigation && navigation !== LIST_NAVIGATION_TYPES.NONE ? LIST_DEFAULTS.PAGESIZE : resolvedDataset == null ? void 0 : resolvedDataset.length;
+    return {
+      initialPage: 1,
+      initialPageSize: pagesize || (isServerSidePagination() && ((_b2 = datasource == null ? void 0 : datasource.pagination) == null ? void 0 : _b2.size) ? datasource.pagination.size : isServerSidePagination() ? resolvedDataset == null ? void 0 : resolvedDataset.length : clientDefaultPageSize),
+      initialSelectedItems: [],
+      initialActualPageSize: actualPageSize
+    };
+  }, [
+    name,
+    statehandler,
+    pagesize,
+    navigation,
+    isServerSidePagination(),
+    datasource,
+    resolvedDataset
+  ]);
+  const [restoredPageNumber, setRestoredPageNumber] = useState(null);
+  const orderedDataset = useListData(effectiveDataset, {
+    datafield,
+    displayfield,
+    displaylabel,
+    getDisplayExpression,
+    orderby,
+    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
+  const { items, handleDragEnd, hasBeenReordered } = useDragAndDrop(
+    orderedDataset,
+    onReorder,
+    orderby
+  );
+  const groupedData = useGroupedData(items, groupby);
+  const paginationState = useListPagination({
+    items,
+    groupedData,
+    groupby,
+    pagesize: initialPageSize || (resolvedDataset == null ? void 0 : resolvedDataset.length),
+    allowpagesizechange,
+    pagesizeoptions,
+    navigation,
+    initialPage,
+    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,
+  const listState = useListState(
+    items,
+    paginationState.currentPageSize,
+    selectfirstitem,
+    selectionlimit,
+    listener,
+    name,
+    standalone
+  );
+  const eventHandlers = useListEventHandlers({
+    items,
+    multiselect,
+    disableitem,
+    selectionlimit,
+    collapsible,
     selectedItems: listState.selectedItems,
     setSelectedItems: listState.setSelectedItems,
     activeItems: listState.activeItems,
@@ -366,326 +304,346 @@ var WmList = function WmList(props) {
     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,
+    onClick,
+    onDblclick,
+    onMouseEnter,
+    onMouseLeave,
+    onSelectionlimitexceed,
+    onPaginationchange,
+    onPageChange,
+    onSetrecord,
+    widgetInstance,
+    onSelect,
+    userInitiatedSelectionRef,
+    datasource,
     pagesize: paginationState.currentPageSize,
-    navigation: navigation,
-    onDemandCurrentPage: onDemandCurrentPage,
-    setOnDemandCurrentPage: setOnDemandCurrentPage,
+    navigation,
+    onDemandCurrentPage,
+    setOnDemandCurrentPage,
     isServerSidePagination: isServerSidePagination(),
-    listener: listener,
-    name: name,
-    standalone: standalone
+    listener,
+    name,
+    standalone
   });
-
-  // Effect to update current page size if pagesize is not provided
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     if (pagesize) return;
     if (!resolvedDataset.length) return;
-    if (navigation === _constants.LIST_NAVIGATION_TYPES.NONE || !navigation) {
+    if (navigation === 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,
+  const effectiveStateHandler = navigation === LIST_NAVIGATION_TYPES.ON_DEMAND || navigation === LIST_NAVIGATION_TYPES.SCROLL ? "none" : statehandler;
+  const stateManager = useListStateManager({
+    name,
     storage: effectiveStateHandler,
     currentPage: paginationState.currentPage,
     currentPageSize: paginationState.currentPageSize,
     selectedItems: listState.selectedItems,
-    items: items,
-    initialActualPageSize: initialActualPageSize,
-    multiselect: multiselect,
+    items,
+    initialActualPageSize,
+    multiselect,
     isServerSidePagination: isServerSidePagination(),
-    datasource: 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) {
+  const handleScrollDataUpdate = useCallback((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) {
+  const handlePageSizeChange = (newPageSize) => {
+    const oldPageSize = paginationState.currentPageSize;
+    const currentPersistedState = getListState(name, statehandler);
+    const newState = stateManager.getStateForPageSizeChange(
+      newPageSize,
+      currentPersistedState == null ? void 0 : currentPersistedState.selectedItem,
+      (currentPersistedState == null ? void 0 : currentPersistedState.pagesize) || oldPageSize
+    );
+    saveListState(name, statehandler, newState);
+    if (isServerSidePagination() && datasource && datasource.maxResults !== void 0) {
       datasource.maxResults = newPageSize;
-      datasource.invoke({
-        page: 1,
-        size: 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,
+  const widgetMethods = useListWidgetMethods(
+    items,
+    listState,
+    multiselect,
+    onSelect,
+    widgetInstance,
+    listener,
+    userInitiatedSelectionRef,
+    name,
+    Widgets,
+    paginationState.currentPageSize,
+    setIsListCleared,
+    handlePageSizeChange
+  );
+  useEffect(() => {
+    if (selecteditem === void 0) {
+      return;
+    }
+    if (Array.isArray(selecteditem)) {
+      selecteditem.forEach((item) => widgetMethods.selectItem(item));
+    } else {
+      widgetMethods.selectItem(selecteditem);
+    }
+  }, [selecteditem, widgetMethods, listState]);
+  useListEffects({
+    name,
+    navigation,
+    datasource,
+    safeDataset,
+    items,
+    orderedDataset,
+    groupedData,
+    groupby,
+    orderby,
+    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
+    accumulatedData,
+    lastLoadedPage,
+    isFirstLoad,
+    onDemandCurrentPage,
+    hasBeenReordered,
+    initialRender,
+    initialPage,
+    initialPageSize,
+    initialSelectedItems,
+    initialActualPageSize,
+    setAccumulatedData,
+    setLastLoadedPage,
+    setIsFirstLoad,
+    setOnDemandCurrentPage,
+    setinitialRender,
+    listState,
+    paginationState,
+    widgetMethods,
+    onSelect,
+    widgetInstance,
+    listener,
+    userInitiatedSelectionRef,
+    restoredPageNumber,
+    setRestoredPageNumber,
+    showNavigation,
+    stateManager,
+    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) {
+  const noDataFound = Boolean((_b = (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]) == null ? void 0 : _b.cleared) || !safeDataset || safeDataset.length === 0;
+  const itemsPerRowClass = getItemsPerRowClass(itemsperrow, direction);
+  const textAlignClass = getTextAlignClass(horizontalalign);
+  const showPaginationBasedOnVariableConfiguration = useMemo(() => {
+    var _a2, _b2, _c2, _d2;
+    if (isDatasetFromModalVariable && (paginationState == null ? void 0 : paginationState.totalItems)) {
+      if ((paginationState == null ? void 0 : paginationState.totalItems) < 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);
+      paginationState.setCurrentPageSize(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) {
+    if (((_a2 = paginationState == null ? void 0 : paginationState.paginationMeta) == null ? void 0 : _a2.totalElements) === void 0 || ((_b2 = paginationState == null ? void 0 : paginationState.paginationMeta) == null ? void 0 : _b2.size) === void 0) {
       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);
-    }))();
+    return ((_c2 = paginationState == null ? void 0 : paginationState.paginationMeta) == null ? void 0 : _c2.totalElements) > ((_d2 = paginationState.paginationMeta) == null ? void 0 : _d2.size) || !!allowpagesizechange;
+  }, [
+    (_c = paginationState == null ? void 0 : paginationState.paginationMeta) == null ? void 0 : _c.totalElements,
+    (_d = paginationState == null ? void 0 : paginationState.paginationMeta) == null ? void 0 : _d.size,
+    isDatasetFromModalVariable,
+    paginationState == null ? void 0 : paginationState.totalItems
+  ]);
+  useEffect(() => {
+    (async () => {
+      const result = await (datasource && datasource.execute && (datasource == null ? void 0 : datasource.execute(DataSource.Operation.IS_API_AWARE)));
+      if (result === false) {
+        setIsDatasetFromModalVariable(true);
+      } else {
+        setIsDatasetFromModalVariable(false);
+      }
+    })();
   }, [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
-  }))));
+  const showHorizontalScrollSentinel = showNavigation && navigation === LIST_NAVIGATION_TYPES.SCROLL && (direction === LIST_DIRECTION.HORIZONTAL || direction === "row");
+  const hostAutoLayoutPrefixes = ["pos-", ...INSETION_POSITION, "zi-", "w-", "h-"];
+  const wrapper_autoLayout_Classes = useMemo(
+    () => filterAutoLayoutClasses(layoutClassName, hostAutoLayoutPrefixes),
+    [layoutClassName]
+  );
+  const ul_autoLayout_Classes = useMemo(
+    () => filterAutoLayoutClasses(
+      layoutClassName,
+      hostAutoLayoutPrefixes,
+      "exclude"
+    ),
+    [layoutClassName]
+  );
+  const hasListGroupAutoLayout = useMemo(
+    () => hasListGroupAutoLayoutClass({
+      direction,
+      wrap,
+      alignment,
+      gap,
+      columngap
+    }),
+    [direction, wrap, alignment, gap, columngap]
+  );
+  return /* @__PURE__ */ jsxs(
+    Box,
+    __spreadProps(__spreadValues({
+      className: clsx(
+        DEFAULT_CLS,
+        "wm-position-relative",
+        className,
+        hidden && "wm-hidden",
+        wrapper_autoLayout_Classes
+      ),
+      component: "div",
+      "data-name": name
+    }, { name }), {
+      "data-navigation": navigation,
+      children: [
+        /* @__PURE__ */ jsx(ListHeader, { title, subheading, iconclass }),
+        /* @__PURE__ */ jsx(AppSpinner, { show: (_e = datasource == null ? void 0 : datasource.loading) != null ? _e : false, spinnermessages: [loadingdatamsg] }),
+        /* @__PURE__ */ jsxs(
+          InlineNavigation,
+          {
+            navigation,
+            currentPage: paginationState.currentPage,
+            totalPages: paginationState.effectiveTotalPages,
+            noDataFound,
+            onPageChange: eventHandlers.handlePageChange,
+            isLoading: listState.isLoadingMore,
+            showNavigation,
+            children: [
+              /* @__PURE__ */ jsxs(
+                List,
+                {
+                  ref: listScrollContainerRef,
+                  className: clsx(
+                    "app-livelist-container",
+                    "clearfix",
+                    listclass,
+                    textAlignClass,
+                    hidehorizontalscrollbar ? "hide-scrollbar" : "",
+                    direction === LIST_DIRECTION.HORIZONTAL ? "app-horizontal-list" : "",
+                    hasListGroupAutoLayout && "list-group-autolayout",
+                    ul_autoLayout_Classes
+                  ),
+                  style: __spreadValues({}, styles),
+                  tabIndex,
+                  role: "list",
+                  children: [
+                    noDataFound ? /* @__PURE__ */ jsx(NoDataMessage, { message: nodatamessage }) : /* @__PURE__ */ jsx(
+                      ListItems,
+                      {
+                        items,
+                        groupedData,
+                        groupby,
+                        navigation,
+                        currentPage: paginationState.currentPage,
+                        pagesize: paginationState.currentPageSize,
+                        visibleItems: paginationState.visibleItems,
+                        orderby,
+                        disableitem,
+                        itemclass,
+                        itemsPerRowClass,
+                        direction,
+                        enablereorder,
+                        activeItems: listState.activeItems,
+                        name,
+                        tabIndex,
+                        renderItem,
+                        itemTemplate: children,
+                        nodatamessage,
+                        ondemandmessage,
+                        loadingicon,
+                        loadingdatamsg,
+                        paginationclass,
+                        isLoadingMore: listState.isLoadingMore,
+                        collapsible,
+                        showcount,
+                        groupCollapsed: listState.groupCollapsed,
+                        handleListItemClick: eventHandlers.handleListItemClick,
+                        handleListItemDoubleClick: eventHandlers.handleListItemDoubleClick,
+                        handleListItemMouseEnter: eventHandlers.handleListItemMouseEnter,
+                        handleListItemMouseLeave: eventHandlers.handleListItemMouseLeave,
+                        handleDragEnd,
+                        handleLoadMore: eventHandlers.handleLoadMore,
+                        handleHeaderClick: eventHandlers.handleHeaderClick,
+                        onBeforedatarender,
+                        onRender,
+                        widgetInstance,
+                        rawDataset: safeDataset,
+                        datasource,
+                        totalItems: paginationState.totalItems,
+                        isServerSidePagination: isServerSidePagination(),
+                        showNavigation,
+                        itemAttrs,
+                        hasListGroupAutoLayout,
+                        standalone
+                      }
+                    ),
+                    showHorizontalScrollSentinel && /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        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 !== LIST_NAVIGATION_TYPES.INLINE && navigation !== LIST_NAVIGATION_TYPES.ON_DEMAND && navigation !== LIST_NAVIGATION_TYPES.NONE && /* @__PURE__ */ jsx(Box, { component: "div", className: "panel-footer", children: /* @__PURE__ */ jsx(
+                ListPagination,
+                {
+                  name,
+                  navigation,
+                  listDirection: direction,
+                  scrollContainerRef: listScrollContainerRef,
+                  sentinelRef: scrollSentinelRef,
+                  orderedDataset: groupby ? Array(paginationState.totalItems).fill(null) : items,
+                  pagesize: paginationState.currentPageSize,
+                  navigationalign,
+                  showrecordcount,
+                  maxsize,
+                  boundarylinks,
+                  paginationclass,
+                  allowpagesizechange,
+                  pagesizeoptions,
+                  widgetInstance,
+                  onPaginationChange: eventHandlers.handlePaginationChange,
+                  onSetRecord: eventHandlers.handleSetRecord,
+                  onPageSizeChange: handlePageSizeChange,
+                  currentPage: paginationState.currentPage,
+                  listener,
+                  paginationMeta: paginationState.paginationMeta,
+                  totalItems: paginationState.totalItems,
+                  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);
+const WmListStandalone = withStandalone(WmList);
+var list_default = withBaseWrapper(WmList);
+export {
+  WmListStandalone as WmList,
+  list_default as default
+};