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

package/components/data/list/components/ListItemWithTemplate.d.ts

@@ -0,0 +1,6 @@
+import { ListItemData } from "../props";
+import { ListItemWithTemplateProps } from "./props";
+/**
+ * Single list item component with template rendering
+ */
+export declare const ListItemWithTemplate: <T extends ListItemData = ListItemData>({ item, index, globalIndex, itemId, isFirst, isLast, disableitem, itemclass, itemsPerRowClass, name, tabIndex, isActive, enablereorder, direction, renderItem, itemTemplate, onItemClick, onItemDoubleClick, onItemMouseEnter, onItemMouseLeave, itemAttrs, standalone, }: ListItemWithTemplateProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItemWithTemplate = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _ListItem = require("./ListItem");
+var _mediaTemplate = require("../templates/media-template");
+var _WidgetProvider = require("../../../../context/WidgetProvider");
+var _isPlainObject = _interopRequireDefault(require("lodash-es/isPlainObject"));
+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;
+/**
+ * Single list item component with template rendering
+ */
+var ListItemWithTemplate = exports.ListItemWithTemplate = function ListItemWithTemplate(_ref) {
+  var item = _ref.item,
+    index = _ref.index,
+    globalIndex = _ref.globalIndex,
+    itemId = _ref.itemId,
+    isFirst = _ref.isFirst,
+    isLast = _ref.isLast,
+    disableitem = _ref.disableitem,
+    itemclass = _ref.itemclass,
+    itemsPerRowClass = _ref.itemsPerRowClass,
+    name = _ref.name,
+    tabIndex = _ref.tabIndex,
+    isActive = _ref.isActive,
+    enablereorder = _ref.enablereorder,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? "vertical" : _ref$direction,
+    renderItem = _ref.renderItem,
+    itemTemplate = _ref.itemTemplate,
+    onItemClick = _ref.onItemClick,
+    onItemDoubleClick = _ref.onItemDoubleClick,
+    onItemMouseEnter = _ref.onItemMouseEnter,
+    onItemMouseLeave = _ref.onItemMouseLeave,
+    itemAttrs = _ref.itemAttrs,
+    _ref$standalone = _ref.standalone,
+    standalone = _ref$standalone === void 0 ? false : _ref$standalone;
+  var WidgetProxy = (0, _WidgetProvider.useWidgetProxy)(undefined, standalone);
+  var widgetCacheRef = (0, _react.useRef)(new Map());
+
+  // Clear widget cache when WidgetProxy or name changes
+  (0, _react.useEffect)(function () {
+    widgetCacheRef.current.clear();
+  }, [WidgetProxy, name]);
+  var getCurrentItemWidgets = (0, _react.useCallback)(function ($index) {
+    // Return cached result if available
+    var cached = widgetCacheRef.current.get($index);
+    if (cached) {
+      return cached;
+    }
+    var items = {};
+    var prefix = "".concat(name, "_").concat($index, "_");
+
+    // Use for...in for better performance than Object.keys + filter
+    for (var key in WidgetProxy) {
+      var _key$split = key.split("_"),
+        _key$split2 = (0, _slicedToArray2["default"])(_key$split, 2),
+        listName = _key$split2[0],
+        idx = _key$split2[1];
+      if (key.startsWith(prefix)) {
+        var widget = WidgetProxy[key];
+        if (parseInt(idx) === $index && listName === name) {
+          items[widget.name] = widget;
+        }
+      }
+    }
+
+    // Cache the result
+    widgetCacheRef.current.set($index, items);
+    return items;
+  }, [WidgetProxy, name]);
+  if ((0, _isPlainObject["default"])(item)) {
+    item.selected = isActive;
+  }
+  var templateContent = renderItem ? renderItem(item, globalIndex !== null && globalIndex !== void 0 ? globalIndex : index, WidgetProxy[name], getCurrentItemWidgets) : itemTemplate || __jsx(_mediaTemplate.MediaWmListtemplate, null);
+
+  // Resolve item class: support string or function callback
+  var resolvedItemClass = (0, _react.useMemo)(function () {
+    return typeof itemclass === "function" ? itemclass(item) : itemclass;
+  }, [itemclass, item]);
+
+  // Apply list template attrs to li (itemAttrs → layoutClassName on li)
+  var itemLayoutAttrs = itemAttrs ? itemAttrs(item, globalIndex !== null && globalIndex !== void 0 ? globalIndex : index) : undefined;
+  return __jsx(_ListItem.WmListItem, {
+    key: itemId,
+    item: item,
+    disableItem: disableitem,
+    itemClass: (0, _clsx["default"])(resolvedItemClass, itemsPerRowClass),
+    index: globalIndex !== null && globalIndex !== void 0 ? globalIndex : index,
+    isFirst: isFirst,
+    isLast: isLast,
+    trackId: itemId,
+    onItemClick: onItemClick,
+    onItemDoubleClick: onItemDoubleClick,
+    onItemMouseEnter: onItemMouseEnter,
+    onItemMouseLeave: onItemMouseLeave,
+    tabIndex: tabIndex,
+    isActive: isActive,
+    name: "".concat(name, "_item_").concat(globalIndex !== null && globalIndex !== void 0 ? globalIndex : index),
+    enableReorder: enablereorder,
+    id: itemId,
+    direction: direction,
+    itemLayoutAttrs: itemLayoutAttrs
+  }, templateContent);
+};

package/components/data/list/components/ListItems.d.ts

@@ -0,0 +1,7 @@
+import { ListItemsProps } from "./props";
+import { ListItemData } from "../props";
+/**
+ * Main ListItems component - orchestrates rendering of list items
+ * with support for grouping, pagination, and on-demand loading
+ */
+export declare const ListItems: <T extends ListItemData = ListItemData>({ items, groupedData, groupby, navigation, currentPage, pagesize, visibleItems, orderby, disableitem, itemclass, itemsPerRowClass, direction, enablereorder, activeItems, name, tabIndex, renderItem, itemTemplate, nodatamessage, ondemandmessage, loadingicon, loadingdatamsg, paginationclass, isLoadingMore, collapsible, showcount, groupCollapsed, handleListItemClick, handleListItemDoubleClick, handleListItemMouseEnter, handleListItemMouseLeave, handleDragEnd, handleLoadMore, handleHeaderClick, onBeforedatarender, onRender, widgetInstance, rawDataset, datasource, totalItems, isServerSidePagination, showNavigation, itemAttrs, hasListGroupAutoLayout, standalone, }: ListItemsProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,231 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItems = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _LoadMoreButton = require("./LoadMoreButton");
+var _StandardListItems = require("./StandardListItems");
+var _GroupedListItems = require("./GroupedListItems");
+var _constants = require("../utils/constants");
+var _hooks = require("../hooks");
+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;
+/**
+ * Main ListItems component - orchestrates rendering of list items
+ * with support for grouping, pagination, and on-demand loading
+ */
+var ListItems = exports.ListItems = function ListItems(_ref) {
+  var items = _ref.items,
+    groupedData = _ref.groupedData,
+    groupby = _ref.groupby,
+    navigation = _ref.navigation,
+    currentPage = _ref.currentPage,
+    pagesize = _ref.pagesize,
+    visibleItems = _ref.visibleItems,
+    orderby = _ref.orderby,
+    disableitem = _ref.disableitem,
+    itemclass = _ref.itemclass,
+    itemsPerRowClass = _ref.itemsPerRowClass,
+    direction = _ref.direction,
+    enablereorder = _ref.enablereorder,
+    activeItems = _ref.activeItems,
+    name = _ref.name,
+    tabIndex = _ref.tabIndex,
+    renderItem = _ref.renderItem,
+    itemTemplate = _ref.itemTemplate,
+    nodatamessage = _ref.nodatamessage,
+    ondemandmessage = _ref.ondemandmessage,
+    loadingicon = _ref.loadingicon,
+    loadingdatamsg = _ref.loadingdatamsg,
+    paginationclass = _ref.paginationclass,
+    isLoadingMore = _ref.isLoadingMore,
+    collapsible = _ref.collapsible,
+    showcount = _ref.showcount,
+    groupCollapsed = _ref.groupCollapsed,
+    handleListItemClick = _ref.handleListItemClick,
+    handleListItemDoubleClick = _ref.handleListItemDoubleClick,
+    handleListItemMouseEnter = _ref.handleListItemMouseEnter,
+    handleListItemMouseLeave = _ref.handleListItemMouseLeave,
+    handleDragEnd = _ref.handleDragEnd,
+    handleLoadMore = _ref.handleLoadMore,
+    handleHeaderClick = _ref.handleHeaderClick,
+    onBeforedatarender = _ref.onBeforedatarender,
+    onRender = _ref.onRender,
+    widgetInstance = _ref.widgetInstance,
+    rawDataset = _ref.rawDataset,
+    datasource = _ref.datasource,
+    totalItems = _ref.totalItems,
+    isServerSidePagination = _ref.isServerSidePagination,
+    showNavigation = _ref.showNavigation,
+    itemAttrs = _ref.itemAttrs,
+    hasListGroupAutoLayout = _ref.hasListGroupAutoLayout,
+    _ref$standalone = _ref.standalone,
+    standalone = _ref$standalone === void 0 ? false : _ref$standalone;
+  // Use the server-side pagination flag passed from parent
+  var isServerPaginated = !!isServerSidePagination;
+
+  // Get pagination metadata from datasource
+  var paginationMeta = datasource === null || datasource === void 0 ? void 0 : datasource.pagination;
+
+  // Calculate current page items from raw dataset (unsorted) for onBeforedatarender
+  var rawCurrentPageItems = (0, _hooks.useCurrentPageItems)({
+    items: rawDataset || [],
+    navigation: navigation,
+    currentPage: currentPage,
+    pagesize: pagesize,
+    visibleItems: visibleItems,
+    isServerPaginated: isServerPaginated // Pass flag to indicate server pagination
+  });
+
+  // Calculate current page items from sorted dataset for rendering and onRender
+  var currentPageItems = (0, _hooks.useCurrentPageItems)({
+    items: items,
+    navigation: navigation,
+    currentPage: currentPage,
+    pagesize: pagesize,
+    visibleItems: visibleItems,
+    isServerPaginated: isServerPaginated // Pass flag to indicate server pagination
+  });
+
+  // Calculate paginated grouped data
+  var paginatedGroupedData = (0, _hooks.usePaginatedGroupedData)({
+    groupedData: groupedData || [],
+    navigation: navigation,
+    currentPage: currentPage,
+    pagesize: pagesize,
+    visibleItems: visibleItems,
+    isServerSidePagination: isServerPaginated
+  });
+
+  // Create stable identifiers for data changes
+  var rawCurrentItemsKey = (0, _react.useMemo)(function () {
+    return JSON.stringify(rawCurrentPageItems.currentItems);
+  }, [rawCurrentPageItems.currentItems]);
+  var currentItemsKey = (0, _react.useMemo)(function () {
+    return JSON.stringify(currentPageItems.currentItems);
+  }, [currentPageItems.currentItems]);
+  var paginatedGroupedDataKey = (0, _react.useMemo)(function () {
+    return JSON.stringify(paginatedGroupedData);
+  }, [paginatedGroupedData]);
+
+  // Call onBeforedatarender with unsorted current page items - only when data changes
+  (0, _react.useEffect)(function () {
+    if (onBeforedatarender && widgetInstance) {
+      onBeforedatarender(widgetInstance, rawCurrentPageItems.currentItems);
+    }
+  }, [rawCurrentItemsKey, groupby]);
+
+  // Call onRender with sorted current page items - only when data changes
+  (0, _react.useEffect)(function () {
+    if (onRender) {
+      // Call onRender synchronously to ensure it fires before onSelect
+      // This maintains the correct event order: onBeforedatarender -> onRender -> onSelect
+      if (groupby) {
+        // For grouped data, flatten the current page grouped items (sorted)
+        var currentPageGroupedItems = paginatedGroupedData.reduce(function (acc, group) {
+          return acc.concat(group.data);
+        }, []);
+        onRender(widgetInstance, currentPageGroupedItems);
+      } else {
+        // For standard lists, use sorted current page items
+        onRender(widgetInstance, currentPageItems.currentItems);
+      }
+    }
+  }, []);
+
+  // Calculate total items for grouped data
+  var totalGroupedItems = (0, _react.useMemo)(function () {
+    if (!groupedData || !Array.isArray(groupedData)) return 0;
+    return groupedData.reduce(function (total, group) {
+      var _group$data;
+      return total + (((_group$data = group.data) === null || _group$data === void 0 ? void 0 : _group$data.length) || 0);
+    }, 0);
+  }, [groupedData]);
+
+  // Determine if load more button should be shown
+  var shouldShowLoadMore = (0, _react.useMemo)(function () {
+    if (navigation !== _constants.LIST_NAVIGATION_TYPES.ON_DEMAND) {
+      return false;
+    }
+
+    // If we have pagination metadata with 'last' property, use it
+    if (isServerPaginated && (paginationMeta === null || paginationMeta === void 0 ? void 0 : paginationMeta.last) !== undefined) {
+      return !paginationMeta.last; // Show Load More if not the last page
+    }
+
+    // For server-side pagination with totalItems
+    if (isServerPaginated && totalItems !== undefined && datasource) {
+      if (groupby) {
+        // For grouped data, we need to check if all groups have been loaded
+        // This is tricky with server-side pagination as groups might span pages
+        return totalGroupedItems < totalItems;
+      } else {
+        // For non-grouped data, check if all items have been loaded
+        return items.length < totalItems;
+      }
+    }
+
+    // For client-side pagination
+    if (groupby) {
+      return visibleItems < totalGroupedItems;
+    } else {
+      return visibleItems < items.length;
+    }
+  }, [navigation, isServerPaginated, paginationMeta === null || paginationMeta === void 0 ? void 0 : paginationMeta.last, totalItems, datasource, groupby, totalGroupedItems, items.length, visibleItems]);
+  return __jsx(_react["default"].Fragment, null, groupby ? __jsx(_GroupedListItems.GroupedListItems, {
+    groupedData: groupedData || [],
+    paginatedGroupedData: paginatedGroupedData,
+    direction: direction,
+    disableitem: disableitem,
+    itemclass: itemclass,
+    itemsPerRowClass: itemsPerRowClass,
+    name: name,
+    tabIndex: tabIndex,
+    activeItems: activeItems,
+    collapsible: collapsible,
+    showcount: showcount,
+    groupCollapsed: groupCollapsed,
+    renderItem: renderItem,
+    itemTemplate: itemTemplate,
+    nodatamessage: nodatamessage,
+    onItemClick: handleListItemClick,
+    onItemDoubleClick: handleListItemDoubleClick,
+    onItemMouseEnter: handleListItemMouseEnter,
+    onItemMouseLeave: handleListItemMouseLeave,
+    onHeaderClick: handleHeaderClick,
+    itemAttrs: itemAttrs,
+    hasListGroupAutoLayout: hasListGroupAutoLayout,
+    standalone: standalone
+  }) : __jsx(_StandardListItems.StandardListItems, {
+    items: items,
+    currentPageItems: currentPageItems,
+    direction: direction,
+    enablereorder: enablereorder,
+    disableitem: disableitem,
+    itemclass: itemclass,
+    itemsPerRowClass: itemsPerRowClass,
+    name: name,
+    tabIndex: tabIndex,
+    activeItems: activeItems,
+    renderItem: renderItem,
+    itemTemplate: itemTemplate,
+    nodatamessage: nodatamessage,
+    onItemClick: handleListItemClick,
+    onItemDoubleClick: handleListItemDoubleClick,
+    onItemMouseEnter: handleListItemMouseEnter,
+    onItemMouseLeave: handleListItemMouseLeave,
+    onDragEnd: handleDragEnd,
+    itemAttrs: itemAttrs,
+    standalone: standalone
+  }), shouldShowLoadMore && showNavigation !== false && __jsx(_LoadMoreButton.LoadMoreButton, {
+    paginationclass: paginationclass,
+    isLoadingMore: isLoadingMore,
+    loadingicon: loadingicon,
+    loadingdatamsg: loadingdatamsg,
+    ondemandmessage: ondemandmessage,
+    onLoadMore: handleLoadMore
+  }));
+};

package/components/data/list/components/ListPagination.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { ListPaginationProps } from "./props";
+/**
+ * List Pagination Component
+ * Handles pagination for the list component with improved type safety and structure
+ */
+export declare const ListPagination: React.FC<ListPaginationProps>;

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

@@ -0,0 +1,183 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListPagination = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _pagination = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/pagination"));
+var _constants = require("../utils/constants");
+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;
+/**
+ * Maps list navigation types to pagination navigation types
+ */
+var mapNavigationType = function mapNavigationType(navigation) {
+  switch (navigation) {
+    case _constants.LIST_NAVIGATION_TYPES.BASIC:
+    case _constants.LIST_NAVIGATION_TYPES.PAGER:
+    case _constants.LIST_NAVIGATION_TYPES.CLASSIC:
+    case _constants.LIST_NAVIGATION_TYPES.SCROLL:
+      return navigation;
+    case _constants.LIST_NAVIGATION_TYPES.ADVANCED:
+      return _constants.LIST_NAVIGATION_TYPES.CLASSIC;
+    default:
+      return _constants.LIST_NAVIGATION_TYPES.BASIC;
+  }
+};
+
+/**
+ * Determines if pagination should be hidden
+ */
+/**
+ * Determines if pagination should be hidden
+ */
+var shouldHidePagination = function shouldHidePagination(navigation, allowpagesizechange, datasetLength, pagesize, paginationMeta, totalItems) {
+  // Hide for certain navigation types
+  var isNone = String(navigation) === String(_constants.LIST_NAVIGATION_TYPES.NONE) || navigation === "None";
+  if (isNone) {
+    return true;
+  }
+
+  // For Scroll, always show pagination so the hook runs and onDataUpdate can preserve accumulated data
+  if (navigation === _constants.LIST_NAVIGATION_TYPES.SCROLL) {
+    return false;
+  }
+
+  // If we have pagination metadata with totalElements or totalPages, use that to determine visibility
+  if (paginationMeta) {
+    // Show pagination if totalPages is provided and greater than 1
+    if (paginationMeta.totalPages !== undefined && paginationMeta.totalPages > 1) {
+      return false;
+    }
+
+    // Show pagination if totalElements is provided and greater than pagesize
+    if (paginationMeta.totalElements !== undefined && paginationMeta.totalElements > pagesize) {
+      return false;
+    }
+  }
+
+  // Use totalItems (calculated in hook) if provided
+  if (totalItems !== undefined && totalItems > pagesize) {
+    return false;
+  }
+
+  // Hide if page size change is disabled and all items fit on one page
+  if (!allowpagesizechange && datasetLength <= pagesize) {
+    return true;
+  }
+
+  // Always show pagination if we have page size change enabled
+  if (allowpagesizechange) {
+    return false;
+  }
+
+  // Default to showing pagination if we have items
+  return datasetLength === 0;
+};
+
+/**
+ * List Pagination Component
+ * Handles pagination for the list component with improved type safety and structure
+ */
+var ListPagination = exports.ListPagination = function ListPagination(props) {
+  var name = props.name,
+    navigation = props.navigation,
+    orderedDataset = props.orderedDataset,
+    pagesize = props.pagesize,
+    currentPage = props.currentPage,
+    navigationalign = props.navigationalign,
+    showrecordcount = props.showrecordcount,
+    maxsize = props.maxsize,
+    boundarylinks = props.boundarylinks,
+    paginationclass = props.paginationclass,
+    _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,
+    onPaginationChange = props.onPaginationChange,
+    onSetRecord = props.onSetRecord,
+    onPageSizeChange = props.onPageSizeChange,
+    listener = props.listener,
+    paginationMeta = props.paginationMeta,
+    totalItems = props.totalItems,
+    datasource = props.datasource,
+    isLoadingMore = props.isLoadingMore,
+    setIsLoadingMore = props.setIsLoadingMore,
+    isServerSidePagination = props.isServerSidePagination,
+    listDirection = props.listDirection,
+    scrollContainerRef = props.scrollContainerRef,
+    sentinelRef = props.sentinelRef,
+    onDataUpdate = props.onDataUpdate;
+  // Early return if pagination should be hidden
+  var hidePagination = (0, _react.useMemo)(function () {
+    return shouldHidePagination(navigation, allowpagesizechange, orderedDataset.length, pagesize, paginationMeta, totalItems);
+  }, [navigation, allowpagesizechange, orderedDataset.length, pagesize, paginationMeta, props.totalItems]);
+
+  // Get the appropriate navigation type for the pagination component
+  var paginationNavigation = (0, _react.useMemo)(function () {
+    return mapNavigationType(navigation);
+  }, [navigation]);
+
+  // Wrap handlers to match WmPagination's expected signatures (SyntheticEvent)
+  // and adapt onSetRecord: pagination passes (event, widget, data, pageInfo), list expects (event, widget, index, data)
+  var handlePaginationChange = (0, _react.useMemo)(function () {
+    return function (event, widget, index) {
+      onPaginationChange(event, widget, index);
+    };
+  }, [onPaginationChange]);
+  var handleSetRecord = (0, _react.useMemo)(function () {
+    return function (event, widget, data, pageInfo) {
+      var _pageInfo$currentPage;
+      onSetRecord(event, widget, (_pageInfo$currentPage = pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.currentPage) !== null && _pageInfo$currentPage !== void 0 ? _pageInfo$currentPage : 1, data);
+    };
+  }, [onSetRecord]);
+
+  // Scroll: pass only actual items (no placeholder slots); other modes may use totalItems slots
+  var paginationDataset = (0, _react.useMemo)(function () {
+    return navigation === _constants.LIST_NAVIGATION_TYPES.SCROLL ? orderedDataset : totalItems ? Array(totalItems).fill(null) : orderedDataset;
+  }, [navigation, orderedDataset, totalItems]);
+  if (hidePagination) {
+    return null;
+  }
+  return __jsx(_Box["default"], {
+    component: "div",
+    className: (0, _clsx["default"])("pagination-container", "app-datanavigator", "text-".concat(navigationalign))
+  }, __jsx(_pagination["default"], {
+    name: "".concat(name, "_pagination"),
+    dataset: paginationDataset,
+    maxResults: pagesize,
+    currentPage: currentPage,
+    navigation: paginationNavigation,
+    navigationalign: navigationalign,
+    showrecordcount: showrecordcount,
+    maxsize: maxsize,
+    boundarylinks: boundarylinks,
+    directionlinks: true,
+    allowpagesizechange: allowpagesizechange,
+    pagesizeoptions: pagesizeoptions,
+    className: (0, _clsx["default"])("pagination", paginationclass),
+    listener: listener,
+    onPaginationChange: handlePaginationChange,
+    onSetRecord: handleSetRecord,
+    onPageSizeChange: onPageSizeChange
+    // Pass pagination metadata to WmPagination component if available
+    ,
+    paginationMeta: paginationMeta,
+    totalItems: totalItems
+    // Pass datasource for API-based pagination
+    ,
+    datasource: datasource,
+    isLoadingMore: isLoadingMore,
+    setIsLoadingMore: setIsLoadingMore,
+    isServerSidePagination: isServerSidePagination,
+    listDirection: listDirection,
+    scrollContainerRef: scrollContainerRef,
+    sentinelRef: sentinelRef,
+    onDataUpdate: onDataUpdate
+  }));
+};

package/components/data/list/components/LoadMoreButton.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { LoadMoreButtonProps } from "./props";
+/**
+ * Load more button component for on-demand pagination
+ */
+export declare const LoadMoreButton: React.FC<LoadMoreButtonProps>;

package/components/data/list/components/LoadMoreButton.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoadMoreButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var __jsx = _react["default"].createElement;
+/**
+ * Load more button component for on-demand pagination
+ */
+var LoadMoreButton = exports.LoadMoreButton = function LoadMoreButton(_ref) {
+  var paginationclass = _ref.paginationclass,
+    isLoadingMore = _ref.isLoadingMore,
+    loadingicon = _ref.loadingicon,
+    loadingdatamsg = _ref.loadingdatamsg,
+    ondemandmessage = _ref.ondemandmessage,
+    onLoadMore = _ref.onLoadMore;
+  return __jsx(_Box["default"], {
+    component: "div",
+    className: "panel-footer wm-load-more-footer wm-text-center"
+  }, __jsx(_Button["default"], {
+    className: (0, _clsx["default"])("app-button btn", paginationclass),
+    variant: "contained",
+    onClick: onLoadMore,
+    disabled: isLoadingMore
+  }, isLoadingMore ? __jsx(_react["default"].Fragment, null, __jsx("i", {
+    className: "app-icon ".concat(loadingicon, " fa-spin me-2"),
+    "aria-hidden": "true"
+  }), loadingdatamsg) : ondemandmessage));
+};

package/components/data/list/components/NoDataMessage.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { NoDataMessageProps } from "./props";
+/**
+ * No data message component
+ */
+export declare const NoDataMessage: React.FC<NoDataMessageProps>;

package/components/data/list/components/NoDataMessage.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NoDataMessage = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var __jsx = _react["default"].createElement;
+/**
+ * No data message component
+ */
+var NoDataMessage = exports.NoDataMessage = function NoDataMessage(_ref) {
+  var message = _ref.message,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "no-data-message" : _ref$className;
+  return __jsx(_Typography["default"], {
+    className: className,
+    variant: "body2"
+  }, message);
+};

package/components/data/list/components/StandardListItems.d.ts

@@ -0,0 +1,6 @@
+import { ListItemData } from "../props";
+import { StandardListItemsProps } from "./props";
+/**
+ * Standard list items renderer for non-grouped lists
+ */
+export declare const StandardListItems: <T extends ListItemData = ListItemData>({ items, currentPageItems, direction, enablereorder, disableitem, itemclass, itemsPerRowClass, name, tabIndex, activeItems, renderItem, itemTemplate, nodatamessage, onItemClick, onItemDoubleClick, onItemMouseEnter, onItemMouseLeave, onDragEnd, itemAttrs, standalone, }: StandardListItemsProps<T>) => import("react/jsx-runtime").JSX.Element;