@wavemaker/react-runtime 11.14.1-15.6409

package/components/data/list/index.js

@@ -0,0 +1,611 @@
+"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"] = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _List = _interopRequireDefault(require("@mui/material/List"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _components = require("@wavemaker/react-runtime/components/data/pagination/components");
+var _components2 = require("./components");
+var _common = require("@wavemaker/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");
+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 _paginationState$pagi5, _paginationState$pagi6;
+  // ==================== 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$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,
+    _props$pagesize = props.pagesize,
+    pagesize = _props$pagesize === void 0 ? _constants.LIST_DEFAULTS.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 ? true : _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 ? "URL" : _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,
+    listener = props.listener;
+
+  // ==================== 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);
+    }
+  });
+
+  // ==================== STATE INITIALIZATION ====================
+  var widgetInstance = listener === null || listener === void 0 ? void 0 : listener.Widgets[name];
+
+  // is dataset from modal variable
+  var _useState = (0, _react.useState)(false),
+    isDatasetFromModalVariable = _useState[0],
+    setIsDatasetFromModalVariable = _useState[1];
+
+  // Ensure dataset is always an array and add unique IDs
+  var safeDataset = (0, _react.useMemo)(function () {
+    var data = (0, _listHelpers.getSafeDataset)(dataset);
+    return (0, _utils.addUniqueRowIds)(data, {
+      type: "list"
+    });
+  }, [dataset]);
+
+  // Initial render tracking
+  var _useState2 = (0, _react.useState)(true),
+    initialRender = _useState2[0],
+    setinitialRender = _useState2[1];
+
+  // User interaction tracking
+  var userInitiatedSelectionRef = _react["default"].useRef(false);
+
+  // ==================== ON-DEMAND NAVIGATION STATE ====================
+  // For On-Demand navigation, accumulate data from multiple pages
+  var _useState3 = (0, _react.useState)([]),
+    accumulatedData = _useState3[0],
+    setAccumulatedData = _useState3[1];
+  var _useState4 = (0, _react.useState)(-1),
+    lastLoadedPage = _useState4[0],
+    setLastLoadedPage = _useState4[1];
+  var _useState5 = (0, _react.useState)(true),
+    isFirstLoad = _useState5[0],
+    setIsFirstLoad = _useState5[1];
+  var _useState6 = (0, _react.useState)(0),
+    onDemandCurrentPage = _useState6[0],
+    setOnDemandCurrentPage = _useState6[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.useMemo)(function () {
+    return !!(datasource && datasource.execute && datasource.execute(_types.DataSource.Operation.IS_PAGEABLE));
+  }, [datasource]);
+
+  // Use accumulated data for On-Demand navigation, otherwise use regular dataset
+  var effectiveDataset = (0, _react.useMemo)(function () {
+    if (navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND && datasource && accumulatedData.length > 0) {
+      return accumulatedData;
+    }
+    return safeDataset;
+  }, [navigation, datasource, accumulatedData, safeDataset]);
+
+  // ==================== STATE PERSISTENCE ====================
+  // Restore persisted state before initializing hooks
+  var _useMemo = (0, _react.useMemo)(function () {
+      var _datasource$paginatio;
+      // 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,
+          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;
+        }
+        return {
+          initialPage: restoredPage,
+          initialPageSize: persistedPageSize,
+          initialSelectedItems: selectedItemIndexes,
+          initialActualPageSize: actualPageSize
+        };
+      }
+      return {
+        initialPage: 1,
+        initialPageSize: pagesize,
+        initialSelectedItems: [],
+        initialActualPageSize: actualPageSize
+      };
+    }, [name, statehandler, pagesize, navigation, isServerSidePagination, datasource]),
+    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 _useState7 = (0, _react.useState)(null),
+    restoredPageNumber = _useState7[0],
+    setRestoredPageNumber = _useState7[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,
+    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);
+
+  // ==================== 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
+  });
+
+  // ==================== WIDGET METHODS ====================
+  var widgetMethods = (0, _listWidgetMethods.useListWidgetMethods)(items, listState, multiselect, onSelect, widgetInstance, listener, userInitiatedSelectionRef, name);
+
+  // ==================== STATE MANAGEMENT ====================
+  // Disable state management for On-Demand and Scroll navigation
+  var effectiveStateHandler = navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND || navigation === _constants.LIST_NAVIGATION_TYPES.SCROLL ? "none" : statehandler;
+  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
+  });
+
+  // ==================== 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
+  });
+
+  // ==================== COMPUTED VALUES ====================
+  // Use datasource noDataFound if available, otherwise check safeDataset
+  var noDataFound = !safeDataset || safeDataset.length === 0;
+  var itemsPerRowClass = (0, _listHelpers.getItemsPerRowClass)(itemsperrow, direction);
+  var textAlignClass = (0, _listHelpers.getTextAlignClass)(horizontalalign);
+
+  // ==================== EVENT HANDLER FUNCTIONS ====================
+  var handlePageSizeChange = function handlePageSizeChange(newPageSize) {
+    // Get the old page size BEFORE updating
+    var oldPageSize = paginationState.currentPageSize;
+
+    // Get current persisted state to access all selected items across pages
+    var currentPersistedState = (0, _listHelpers.getListState)(name, statehandler);
+
+    // Build the state for page size change
+    var newState = stateManager.getStateForPageSizeChange(newPageSize, currentPersistedState === null || currentPersistedState === void 0 ? void 0 : currentPersistedState.selectedItem, (currentPersistedState === null || currentPersistedState === void 0 ? void 0 : currentPersistedState.pagesize) || oldPageSize);
+
+    // Save the state BEFORE changing page size
+    (0, _listHelpers.saveListState)(name, statehandler, newState);
+
+    // Update datasource maxResults if datasource has paging capability (similar to Angular)
+    if (isServerSidePagination && datasource && datasource.maxResults !== undefined) {
+      datasource.maxResults = newPageSize;
+    }
+
+    // Update page size
+    paginationState.setCurrentPageSize(newPageSize);
+
+    // Reset to first page (similar to Angular behavior)
+    paginationState.setCurrentPage(1);
+    paginationState.setVisibleItems(newPageSize);
+  };
+  var showPaginationBasedOnVariableConfiguration = (0, _react.useMemo)(function () {
+    var _paginationState$pagi, _paginationState$pagi2, _paginationState$pagi3, _paginationState$pagi4;
+    // if dataset is from modal variable(means client side pagination, all records are loaded in the dataset on first load itself) then show pagination if records are greater than 5 records
+
+    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);
+  }, [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]);
+
+  // ==================== RENDER ====================
+  return __jsx(_Box["default"], {
+    className: (0, _clsx["default"])(_constants.DEFAULT_CLS, groupby ? listclass : className),
+    sx: _objectSpread(_objectSpread({}, styles), {}, {
+      height: "".concat(height, " !important"),
+      width: "".concat(width, " !important"),
+      overflow: "inherit !important",
+      position: "relative"
+    }),
+    component: "div",
+    "data-name": name,
+    "data-navigation": navigation
+  }, __jsx(_components2.ListHeader, {
+    title: title,
+    subheading: subheading,
+    iconclass: iconclass
+  }), datasource !== null && datasource !== void 0 && datasource.loading ? __jsx(_common.AppSpinner, {
+    show: true,
+    spinnermessages: [loadingdatamsg]
+  }) : /* Main Content */
+  __jsx(_components.InlineNavigation, {
+    navigation: navigation,
+    currentPage: paginationState.currentPage,
+    totalPages: paginationState.effectiveTotalPages,
+    noDataFound: noDataFound,
+    onPageChange: eventHandlers.handlePageChange,
+    isLoading: listState.isLoadingMore,
+    showNavigation: showNavigation
+  }, __jsx(_List["default"], {
+    className: (0, _clsx["default"])("app-livelist-container", "clearfix", listclass, textAlignClass, hidehorizontalscrollbar ? "hide-scrollbar" : "", direction === _constants.LIST_DIRECTION.HORIZONTAL ? "app-horizontal-list" : ""),
+    tabIndex: tabIndex,
+    role: "list",
+    sx: {
+      "& .app-livelist": {
+        overflowX: "hidden"
+      },
+      '&[data-dnd-dragging="true"]': {
+        overflowX: "hidden"
+      },
+      // Simple horizontal list layout
+      "& .app-horizontal-list": {
+        display: "flex",
+        flexDirection: "row",
+        flexWrap: direction === _constants.LIST_DIRECTION.HORIZONTAL ? "wrap" : "nowrap",
+        "& .app-list-item": {
+          minWidth: "fit-content",
+          flexShrink: 0
+        }
+      }
+    }
+  }, 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
+  })), 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,
+    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
+  }))));
+};
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmList);

package/components/data/list/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/data/list/templates/media-template.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MediaWmListtemplate = void 0;
+var _material = require("@mui/material");
+var _react = _interopRequireWildcard(require("react"));
+var _ListItem = require("../components/ListItem");
+var _image = _interopRequireDefault(require("next/image"));
+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;
+// Default List Item Template Component
+
+var MediaWmListtemplate = exports.MediaWmListtemplate = function MediaWmListtemplate() {
+  var context = (0, _react.useContext)(_ListItem.ListItemContext);
+  var item = (context === null || context === void 0 ? void 0 : context.item) || {};
+  return __jsx(_material.Box, {
+    component: "div",
+    className: "media"
+  }, __jsx(_material.Box, {
+    component: "div",
+    className: "media-left"
+  }, __jsx(_image["default"], {
+    src: (item === null || item === void 0 ? void 0 : item.picurl) || "/placeholder.png",
+    alt: "Profile",
+    className: "media-object",
+    width: 32,
+    height: 32,
+    style: {
+      borderRadius: "50%"
+    }
+  })), __jsx(_material.Box, {
+    component: "div",
+    className: "media-body"
+  }, __jsx(_material.Typography, {
+    className: "media-heading",
+    variant: "h6"
+  }, (item === null || item === void 0 ? void 0 : item.title) || "No Name"), __jsx(_material.Typography, {
+    className: "text-muted",
+    variant: "body2"
+  }, (item === null || item === void 0 ? void 0 : item.description) || "No Description")), __jsx(_material.Box, {
+    component: "div",
+    className: "media-right media-top"
+  }, __jsx(_material.Button, {
+    className: "btn-transparent",
+    "aria-label": "Share"
+  }, __jsx("i", {
+    className: "wi wi-share fa-2x"
+  }))));
+};