@wavemaker-ai/react-runtime 1.0.0-next.27766

package/components/data/list/index.js

@@ -0,0 +1,688 @@
+"use client";
+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 {
+  WmSkeleton,
+  SKELETON_REGISTRY,
+  useShouldShowSkeleton
+} from "../../common/wm-skeleton";
+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
+} 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";
+import { useLayoutSize } from "../../../hooks/useLayoutSize";
+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 = "",
+    iconurl,
+    nodatamessage = LIST_MESSAGES.NO_DATA,
+    loadingdatamsg = LIST_MESSAGES.LOADING,
+    loadingicon = "fa fa-circle-o-notch",
+    loadingiconurl,
+    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 ListWrapperRef = useRef(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,
+    onPageRestored: (restoredPage) => {
+      setRestoredPageNumber(restoredPage);
+    }
+  });
+  const [isDatasetFromModalVariable, setIsDatasetFromModalVariable] = useState(false);
+  const resolvedDataset = getSafeDataset(dataset, datasource);
+  if (!isEqual(datasetHashRef.current, resolvedDataset)) {
+    datasetHashRef.current = resolvedDataset;
+    setCurrentDataset(resolvedDataset);
+  }
+  const safeDataset = useMemo(() => {
+    return addUniqueRowIds(resolvedDataset, { type: "list" });
+  }, [currentDataset]);
+  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(DataSource.Operation.IS_PAGEABLE));
+  }, [datasource, navigation]);
+  const [isListCleared, setIsListCleared] = useState(false);
+  const effectiveDataset = useMemo(() => {
+    if (isListCleared) return [];
+    if (navigation === LIST_NAVIGATION_TYPES.ON_DEMAND && datasource && accumulatedData.length > 0) {
+      return accumulatedData;
+    }
+    if (navigation === LIST_NAVIGATION_TYPES.SCROLL && datasource && accumulatedData.length > 0) {
+      return accumulatedData;
+    }
+    return safeDataset;
+  }, [navigation, datasource, accumulatedData, safeDataset, isListCleared]);
+  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 || (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
+      };
+    }
+    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
+  });
+  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
+  });
+  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,
+    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,
+    onDblclick,
+    onMouseEnter,
+    onMouseLeave,
+    onSelectionlimitexceed,
+    onPaginationchange,
+    onPageChange,
+    onSetrecord,
+    widgetInstance,
+    onSelect,
+    userInitiatedSelectionRef,
+    datasource,
+    pagesize: paginationState.currentPageSize,
+    navigation,
+    onDemandCurrentPage,
+    setOnDemandCurrentPage,
+    isServerSidePagination: isServerSidePagination(),
+    listener,
+    name,
+    standalone
+  });
+  useEffect(() => {
+    if (pagesize) return;
+    if (!resolvedDataset.length) return;
+    if (navigation === LIST_NAVIGATION_TYPES.NONE || !navigation) {
+      paginationState.setCurrentPageSize(resolvedDataset.length);
+    }
+  }, [resolvedDataset.length, pagesize, paginationState]);
+  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,
+    initialActualPageSize,
+    multiselect,
+    isServerSidePagination: isServerSidePagination(),
+    datasource
+  });
+  const handleScrollDataUpdate = useCallback((data) => {
+    setAccumulatedData(data);
+  }, []);
+  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 });
+    }
+  };
+  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,
+    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
+  });
+  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;
+      }
+      paginationState.setCurrentPageSize(LIST_DEFAULTS.PAGESIZE_FOR_MODAL_VARIABLE);
+      return true;
+    }
+    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 ((_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]);
+  useLayoutSize(ListWrapperRef, props.layoutWidth, props.layoutHeight);
+  const showHorizontalScrollSentinel = showNavigation && navigation === LIST_NAVIGATION_TYPES.SCROLL && (direction === LIST_DIRECTION.HORIZONTAL || direction === "row");
+  const hostAutoLayoutPrefixes = [
+    "wm-pos-",
+    "wm-top",
+    "wm-bottom",
+    "wm-left",
+    "wm-right",
+    "wm-zi-",
+    "wm-w-",
+    "wm-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]
+  );
+  if (useShouldShowSkeleton(props.loading, props.showSkeleton))
+    return /* @__PURE__ */ jsx(
+      WmSkeleton,
+      __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmList"]), {
+        rows: props.skeletonRows,
+        className,
+        styles
+      })
+    );
+  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,
+      ref: ListWrapperRef,
+      children: [
+        /* @__PURE__ */ jsx(
+          ListHeader,
+          {
+            title,
+            subheading,
+            iconclass,
+            iconurl,
+            prefabName: props.prefabName
+          }
+        ),
+        /* @__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,
+                        loadingiconurl,
+                        loadingdatamsg,
+                        paginationclass,
+                        isLoadingMore: listState.isLoadingMore,
+                        prefabName: props.prefabName,
+                        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";
+const WmListStandalone = withStandalone(WmList);
+var list_default = withBaseWrapper(WmList);
+export {
+  WmListStandalone as WmList,
+  list_default as default
+};