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

package/components/data/list/hooks/useListEventHandlers.js

@@ -0,0 +1,323 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useListEventHandlers = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = require("react");
+var _lodashEs = require("lodash-es");
+var _listHelpers = require("../utils/list-helpers");
+var _WidgetProvider = require("@wavemaker-ai/react-runtime/context/WidgetProvider");
+var _widgetInstanceUtils = require("../utils/widget-instance-utils");
+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; }
+/**
+ * Custom hook for managing list event handlers
+ * Extracts all event handling logic from the main component
+ */
+var useListEventHandlers = exports.useListEventHandlers = function useListEventHandlers(props) {
+  var items = props.items,
+    multiselect = props.multiselect,
+    disableitem = props.disableitem,
+    selectionlimit = props.selectionlimit,
+    collapsible = props.collapsible,
+    selectedItems = props.selectedItems,
+    setSelectedItems = props.setSelectedItems,
+    activeItems = props.activeItems,
+    setActiveItems = props.setActiveItems,
+    firstSelectedItem = props.firstSelectedItem,
+    setFirstSelectedItem = props.setFirstSelectedItem,
+    groupCollapsed = props.groupCollapsed,
+    setGroupCollapsed = props.setGroupCollapsed,
+    currentPage = props.currentPage,
+    setCurrentPage = props.setCurrentPage,
+    visibleItems = props.visibleItems,
+    setVisibleItems = props.setVisibleItems,
+    setIsLoadingMore = props.setIsLoadingMore,
+    onClick = props.onClick,
+    onDblclick = props.onDblclick,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    onSelectionlimitexceed = props.onSelectionlimitexceed,
+    onPaginationchange = props.onPaginationchange,
+    onPageChange = props.onPageChange,
+    onSetrecord = props.onSetrecord,
+    widgetInstance = props.widgetInstance,
+    onSelect = props.onSelect,
+    userInitiatedSelectionRef = props.userInitiatedSelectionRef,
+    datasource = props.datasource,
+    isServerSidePagination = props.isServerSidePagination,
+    pagesize = props.pagesize,
+    navigation = props.navigation,
+    onDemandCurrentPage = props.onDemandCurrentPage,
+    setOnDemandCurrentPage = props.setOnDemandCurrentPage,
+    listener = props.listener,
+    name = props.name,
+    _props$standalone = props.standalone,
+    standalone = _props$standalone === void 0 ? false : _props$standalone;
+  var selectedItemsRef = (0, _react.useRef)(selectedItems);
+  var Widgets = (0, _WidgetProvider.useWidgetProxy)(undefined, standalone);
+  (0, _react.useEffect)(function () {
+    selectedItemsRef.current = selectedItems;
+  }, [selectedItems]);
+
+  // Helper function to call onSelect and mark as user-initiated
+  var callOnSelect = (0, _react.useCallback)(function (selectedItem, event) {
+    if (onSelect && widgetInstance && selectedItem) {
+      if (userInitiatedSelectionRef) {
+        userInitiatedSelectionRef.current = true;
+      }
+      // Set $index on widget instance
+      (0, _widgetInstanceUtils.setWidgetIndex)(widgetInstance, items, selectedItem);
+      onSelect(widgetInstance, selectedItem, event !== null && event !== void 0 ? event : undefined);
+    }
+  }, [onSelect, userInitiatedSelectionRef, items]);
+  var handleListItemClick = (0, _react.useCallback)(function (event, item) {
+    if (disableitem) return;
+    var selectCount = selectedItems.length;
+    var isItemSelected = (0, _lodashEs.includes)(selectedItems, item);
+    var isItemActive = activeItems.has(item);
+    if (multiselect) {
+      // Handle Shift+Click for range selection
+      if (event.shiftKey && firstSelectedItem && firstSelectedItem !== item) {
+        var firstIndex = (0, _lodashEs.findIndex)(items, function (i) {
+          return i === firstSelectedItem;
+        });
+        var lastIndex = (0, _lodashEs.findIndex)(items, function (i) {
+          return i === item;
+        });
+        if (firstIndex !== -1 && lastIndex !== -1) {
+          var start = (0, _lodashEs.min)([firstIndex, lastIndex]);
+          var end = (0, _lodashEs.max)([firstIndex, lastIndex]);
+          var rangeCount = end - start + 1;
+          if (selectionlimit > 0 && rangeCount > selectionlimit) {
+            (0, _widgetInstanceUtils.setWidgetIndex)(widgetInstance, items, item);
+            onSelectionlimitexceed === null || onSelectionlimitexceed === void 0 || onSelectionlimitexceed(event, widgetInstance);
+            return;
+          }
+          var rangeItems = (0, _lodashEs.slice)(items, start, end + 1);
+          selectedItemsRef.current = rangeItems;
+          setSelectedItems(rangeItems);
+          setActiveItems(new Set(rangeItems));
+          // Only call onSelect if this is a new selection (not already active)
+          if (!isItemActive) {
+            callOnSelect(item, event); // Pass the current item that triggered the range selection
+          }
+          (0, _widgetInstanceUtils.setWidgetIndex)(widgetInstance, items, item);
+          onClick === null || onClick === void 0 || onClick(event, widgetInstance); // Use widgetInstance instead of item
+          return;
+        }
+      }
+
+      // Handle Ctrl+Click for individual item selection toggle
+      if (event.ctrlKey) {
+        if (selectionlimit > 0 && selectCount >= selectionlimit && !isItemSelected) {
+          (0, _widgetInstanceUtils.setWidgetIndex)(widgetInstance, items, item);
+          onSelectionlimitexceed === null || onSelectionlimitexceed === void 0 || onSelectionlimitexceed(event, widgetInstance);
+          return;
+        }
+        if (isItemSelected) {
+          var newSelectedItems = (0, _lodashEs.filter)(selectedItems, function (selectedItem) {
+            return selectedItem !== item;
+          });
+          selectedItemsRef.current = newSelectedItems;
+          setSelectedItems(newSelectedItems);
+          var newActiveItems = new Set(activeItems);
+          newActiveItems["delete"](item);
+          setActiveItems(newActiveItems);
+        } else {
+          var _newSelectedItems = [].concat((0, _toConsumableArray2["default"])(selectedItems), [item]);
+          selectedItemsRef.current = _newSelectedItems;
+          setSelectedItems(_newSelectedItems);
+          var _newActiveItems = new Set(activeItems);
+          _newActiveItems.add(item);
+          setActiveItems(_newActiveItems);
+          // Only call onSelect if this is a new selection (not already active)
+          if (!isItemActive) {
+            callOnSelect(item, event); // Pass the current item being selected
+          }
+        }
+        setFirstSelectedItem(item);
+      } else {
+        // Normal click without Ctrl - select item without deselecting if already selected
+        if (!isItemSelected) {
+          // If clicking an unselected item, select only this item
+          var _newSelectedItems2 = [item];
+          selectedItemsRef.current = _newSelectedItems2;
+          setSelectedItems(_newSelectedItems2);
+          setActiveItems(new Set([item]));
+          setFirstSelectedItem(item);
+          // Only call onSelect if this is a new selection (not already active)
+          if (!isItemActive) {
+            callOnSelect(item, event); // Pass the current item being selected
+          }
+        }
+        // If item is already selected, do nothing (don't deselect)
+      }
+    } else {
+      // Single select mode - only select, don't deselect on normal click
+      if (!isItemSelected) {
+        // If clicking an unselected item, select it
+        var _newSelectedItems3 = [item];
+        selectedItemsRef.current = _newSelectedItems3;
+        setSelectedItems(_newSelectedItems3);
+        setActiveItems(new Set([item]));
+        setFirstSelectedItem(item);
+        // Only call onSelect if this is a new selection (not already active)
+        if (!isItemActive) {
+          callOnSelect(item, event); // Pass the current item being selected
+        }
+      }
+      // If item is already selected, do nothing (don't deselect)
+    }
+    (0, _listHelpers.getSelectedItemWidgets)(event, listener, name || "", item || null, Widgets);
+    (0, _widgetInstanceUtils.setWidgetItem)(widgetInstance, items, item);
+    onClick === null || onClick === void 0 || onClick(event, widgetInstance); // Use widgetInstance instead of item
+  }, [disableitem, selectedItems, multiselect, firstSelectedItem, items, selectionlimit, activeItems, setSelectedItems, setActiveItems, setFirstSelectedItem, onSelectionlimitexceed, onClick, callOnSelect]);
+  var handleListItemDoubleClick = (0, _react.useCallback)(function (event, item) {
+    if (onDblclick) {
+      (0, _widgetInstanceUtils.setWidgetIndex)(widgetInstance, items, item);
+      onDblclick(event, widgetInstance);
+    }
+  }, [onDblclick, items]);
+  var handleListItemMouseEnter = (0, _react.useCallback)(function (event, item) {
+    // Use widgetInstance instead of item
+    if (onMouseEnter) {
+      (0, _widgetInstanceUtils.setWidgetIndex)(widgetInstance, items, item);
+      onMouseEnter(event, widgetInstance);
+    }
+  }, [onMouseEnter, items]);
+  var handleListItemMouseLeave = (0, _react.useCallback)(function (event, item) {
+    if (onMouseLeave) {
+      (0, _widgetInstanceUtils.setWidgetIndex)(widgetInstance, items, item);
+      onMouseLeave(event, widgetInstance);
+    }
+  }, [onMouseLeave, items]);
+  var handleHeaderClick = (0, _react.useCallback)(function (groupKey) {
+    if (collapsible) {
+      setGroupCollapsed(_objectSpread(_objectSpread({}, groupCollapsed), {}, (0, _defineProperty2["default"])({}, groupKey, !groupCollapsed[groupKey])));
+    }
+  }, [collapsible, groupCollapsed, setGroupCollapsed]);
+  var handlePaginationChange = (0, _react.useCallback)(function (event, widget, index) {
+    if (index && currentPage !== index) {
+      // Update the current page
+      setCurrentPage(index);
+
+      // Trigger the callbacks - datasource handling is now done in usePagination hook
+      (0, _widgetInstanceUtils.setWidgetPageIndex)(widgetInstance, index);
+      onPaginationchange === null || onPaginationchange === void 0 || onPaginationchange(event, widgetInstance, index);
+      onPageChange === null || onPageChange === void 0 || onPageChange(event, index);
+    }
+  }, [currentPage, setCurrentPage, onPaginationchange, onPageChange, widgetInstance]);
+  var handleSetRecord = (0, _react.useCallback)(function (event, widget, index, data) {
+    if (index) {
+      setCurrentPage(index);
+      (0, _widgetInstanceUtils.setWidgetIndex)(widgetInstance, items, data);
+      onSetrecord === null || onSetrecord === void 0 || onSetrecord(event, widgetInstance, index, data);
+    }
+  }, [setCurrentPage, onSetrecord, items]);
+  var handlePageChange = (0, _react.useCallback)(function (page) {
+    // Update the current page
+    setCurrentPage(page);
+
+    // For server-side pagination, invoke the datasource
+    if (isServerSidePagination && datasource && typeof datasource.invoke === "function") {
+      // Set loading state
+      setIsLoadingMore(true);
+
+      // Invoke datasource for the new page
+      var invokeResult = datasource.invoke({
+        page: page
+      });
+      Promise.resolve(invokeResult).then(function () {
+        // Trigger the callbacks after successful data fetch
+        (0, _widgetInstanceUtils.setWidgetPageIndex)(widgetInstance, page);
+        onPaginationchange === null || onPaginationchange === void 0 || onPaginationchange(null, widgetInstance, page);
+        onPageChange === null || onPageChange === void 0 || onPageChange(null, page);
+        setIsLoadingMore(false);
+      })["catch"](function (error) {
+        console.error("Error loading page data:", error);
+        setIsLoadingMore(false);
+        // Revert to previous page on error
+        setCurrentPage(currentPage);
+      });
+    } else {
+      // For client-side pagination, just trigger callbacks
+      (0, _widgetInstanceUtils.setWidgetPageIndex)(widgetInstance, page);
+      onPaginationchange === null || onPaginationchange === void 0 || onPaginationchange(null, widgetInstance, page);
+      onPageChange === null || onPageChange === void 0 || onPageChange(null, page);
+    }
+  }, [setCurrentPage, onPaginationchange, onPageChange, widgetInstance, currentPage, setIsLoadingMore, isServerSidePagination, datasource]);
+  var handleLoadMore = (0, _react.useCallback)(function () {
+    setIsLoadingMore(true);
+    var pageSize = pagesize || 10;
+    var nextPage;
+
+    // For server-side pagination
+    if (isServerSidePagination && datasource && typeof datasource.invoke === "function") {
+      // For On-Demand navigation, use our tracked page state
+      if (navigation === "On-Demand" && onDemandCurrentPage !== undefined) {
+        // onDemandCurrentPage is 0-indexed (0 = page 1)
+        // We need to load the next page: current + 1, then convert to 1-indexed for API
+        var nextPageZeroIndexed = onDemandCurrentPage + 1;
+        nextPage = nextPageZeroIndexed + 1; // Convert to 1-indexed for API
+      } else {
+        var _datasource$paginatio;
+        // For other navigation types, use pagination metadata
+        var currentPageFromMeta = (_datasource$paginatio = datasource.pagination) === null || _datasource$paginatio === void 0 ? void 0 : _datasource$paginatio.number;
+        if (currentPageFromMeta !== undefined) {
+          // currentPageFromMeta is 0-indexed, add 2 to get next page for 1-indexed API
+          nextPage = currentPageFromMeta + 2;
+        } else {
+          // Fallback calculation
+          var loadedItems = items.length;
+          var _currentPage = Math.floor(loadedItems / pageSize);
+          nextPage = _currentPage + 1;
+        }
+      }
+
+      // Invoke the datasource for the next page
+      // Wrap the result in Promise.resolve to handle cases where invoke doesn't return a Promise
+      var invokeResult = datasource.invoke({
+        page: nextPage
+      });
+      Promise.resolve(invokeResult).then(function () {
+        // Update visible items to reflect the expected count
+        setVisibleItems(visibleItems + pageSize);
+
+        // For On-Demand, update the page state after successful load
+        if (navigation === "On-Demand" && setOnDemandCurrentPage) {
+          // Page has been loaded, update to the loaded page number (0-indexed)
+          setOnDemandCurrentPage(onDemandCurrentPage + 1);
+        }
+        setIsLoadingMore(false);
+      })["catch"](function (error) {
+        console.error("Error loading more data:", error);
+        setIsLoadingMore(false);
+      });
+    } else {
+      // Client-side pagination
+      var _currentPage2 = Math.floor(visibleItems / pageSize);
+      nextPage = _currentPage2 + 1;
+      setVisibleItems((0, _lodashEs.min)([visibleItems + pageSize, items.length]));
+      setTimeout(function () {
+        setIsLoadingMore(false);
+      }, 10);
+    }
+    onPageChange === null || onPageChange === void 0 || onPageChange(null, nextPage);
+  }, [setIsLoadingMore, setVisibleItems, visibleItems, items.length, onPageChange, datasource, pagesize, navigation, onDemandCurrentPage, setOnDemandCurrentPage]);
+  return {
+    handleListItemClick: handleListItemClick,
+    handleListItemDoubleClick: handleListItemDoubleClick,
+    handleListItemMouseEnter: handleListItemMouseEnter,
+    handleListItemMouseLeave: handleListItemMouseLeave,
+    handleHeaderClick: handleHeaderClick,
+    handlePaginationChange: handlePaginationChange,
+    handleSetRecord: handleSetRecord,
+    handlePageChange: handlePageChange,
+    handleLoadMore: handleLoadMore
+  };
+};

package/components/data/list/hooks/useListPagination.d.ts

@@ -0,0 +1,8 @@
+import { ListItemData } from "../props";
+import { UseListPaginationProps, ListPaginationState } from "./props";
+/**
+ * Custom hook for managing list pagination
+ * Handles both regular and grouped data pagination
+ * Uses pagination metadata from datasource when available
+ */
+export declare const useListPagination: <T extends ListItemData = ListItemData>(props: UseListPaginationProps<T>) => ListPaginationState<T>;

package/components/data/list/hooks/useListPagination.js

@@ -0,0 +1,163 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useListPagination = void 0;
+var _react = require("react");
+var _lodashEs = require("lodash-es");
+var _constants = require("../utils/constants");
+/**
+ * Custom hook for managing list pagination
+ * Handles both regular and grouped data pagination
+ * Uses pagination metadata from datasource when available
+ */
+var useListPagination = exports.useListPagination = function useListPagination(props) {
+  var items = props.items,
+    groupedData = props.groupedData,
+    groupby = props.groupby,
+    pagesize = props.pagesize,
+    allowpagesizechange = props.allowpagesizechange,
+    pagesizeoptions = props.pagesizeoptions,
+    navigation = props.navigation,
+    _props$initialPage = props.initialPage,
+    initialPage = _props$initialPage === void 0 ? 1 : _props$initialPage,
+    datasource = props.datasource;
+
+  /**
+   * Datasource pagination is often mutated in-place by runtime.
+   * Avoid memoizing based on `datasource` object identity; read it directly.
+   */
+  var datasourcePagination = datasource === null || datasource === void 0 ? void 0 : datasource.pagination;
+  var paginationMeta = datasourcePagination !== null && datasourcePagination !== void 0 ? datasourcePagination : _constants.DEFAULT_PAGINATION_META;
+
+  // Initialize page size based on allowpagesizechange
+  var getInitialPageSize = function getInitialPageSize() {
+    // Always use the pagesize prop first (which may contain the restored value)
+    // Only fall back to first option if pagesize is not provided
+    if (pagesize) {
+      return pagesize;
+    }
+
+    // Use paginationMeta.size if available
+    if (paginationMeta !== null && paginationMeta !== void 0 && paginationMeta.size) {
+      return paginationMeta.size;
+    }
+    if (allowpagesizechange) {
+      // Parse pagesizeoptions and use the first value as fallback
+      var firstOption = (0, _lodashEs.head)((0, _lodashEs.filter)((0, _lodashEs.map)((0, _lodashEs.split)(pagesizeoptions, ","), function (opt) {
+        return (0, _lodashEs.toNumber)(opt.trim());
+      }), function (opt) {
+        return !isNaN(opt);
+      }));
+      return firstOption || 10; // Default to 10 if no valid options
+    }
+    return 10; // Default page size
+  };
+  var _useState = (0, _react.useState)(initialPage),
+    currentPage = _useState[0],
+    setCurrentPage = _useState[1];
+  var _useState2 = (0, _react.useState)(getInitialPageSize()),
+    currentPageSize = _useState2[0],
+    setCurrentPageSize = _useState2[1];
+  var _useState3 = (0, _react.useState)(function () {
+      // For on-demand navigation, show items up to the initial page
+      if (navigation === "On-Demand" && initialPage > 1) {
+        return initialPage * pagesize;
+      }
+      return pagesize;
+    }),
+    visibleItems = _useState3[0],
+    setVisibleItems = _useState3[1];
+
+  // Calculate total pages based on datasource pagination metadata if available
+  var totalPages = (0, _react.useMemo)(function () {
+    // If pagination metadata is available, use it
+    if ((datasourcePagination === null || datasourcePagination === void 0 ? void 0 : datasourcePagination.totalPages) !== undefined) {
+      return datasourcePagination.totalPages;
+    }
+
+    // Fall back to calculating from items length
+    var validItems = (0, _lodashEs.isArray)(items) ? items : [];
+    return Math.max(1, (0, _lodashEs.ceil)(validItems.length / currentPageSize));
+  }, [items, currentPageSize, datasourcePagination === null || datasourcePagination === void 0 ? void 0 : datasourcePagination.totalPages]);
+
+  // Calculate total items for grouped data or from pagination metadata
+  var totalItems = (0, _react.useMemo)(function () {
+    // If pagination metadata is available, use it
+    if ((datasourcePagination === null || datasourcePagination === void 0 ? void 0 : datasourcePagination.totalElements) !== undefined) {
+      return datasourcePagination.totalElements;
+    }
+
+    // For grouped data
+    if (groupby && groupedData && (0, _lodashEs.isArray)(groupedData)) {
+      return (0, _lodashEs.sumBy)(groupedData, function (group) {
+        var _group$data;
+        return ((_group$data = group.data) === null || _group$data === void 0 ? void 0 : _group$data.length) || 0;
+      });
+    }
+
+    // Fall back to items length
+    return (0, _lodashEs.isArray)(items) ? items.length : 0;
+  }, [groupedData, items, datasourcePagination === null || datasourcePagination === void 0 ? void 0 : datasourcePagination.totalElements, groupby]);
+
+  // Calculate effective total pages (considers grouping and pagination metadata)
+  var effectiveTotalPages = (0, _react.useMemo)(function () {
+    // If pagination metadata has totalPages, use it directly
+    if ((datasourcePagination === null || datasourcePagination === void 0 ? void 0 : datasourcePagination.totalPages) !== undefined) {
+      return datasourcePagination.totalPages;
+    }
+
+    // For grouped data
+    if (groupby && groupedData) {
+      return Math.max(1, (0, _lodashEs.ceil)(totalItems / currentPageSize));
+    }
+    return totalPages;
+  }, [groupby, groupedData, totalItems, currentPageSize, totalPages, datasourcePagination === null || datasourcePagination === void 0 ? void 0 : datasourcePagination.totalPages]);
+
+  // Calculate current page items
+  var currentPageItems = (0, _react.useMemo)(function () {
+    if (!items || !(0, _lodashEs.isArray)(items) || items.length === 0) {
+      return {
+        currentItems: [],
+        startIndex: 0,
+        endIndex: 0
+      };
+    }
+    var startIndex = navigation === "On-Demand" ? 0 : (currentPage - 1) * currentPageSize;
+    var endIndex = navigation === "On-Demand" ? visibleItems : currentPage * currentPageSize;
+    var currentItems = (0, _lodashEs.slice)(items, startIndex, endIndex);
+    return {
+      currentItems: currentItems,
+      startIndex: startIndex,
+      endIndex: endIndex
+    };
+  }, [items, navigation, currentPage, currentPageSize, visibleItems]);
+
+  // Sync current page with datasource pagination metadata for SSP
+  (0, _react.useEffect)(function () {
+    // Only sync if we have server-side pagination with metadata
+    if (datasource && (datasourcePagination === null || datasourcePagination === void 0 ? void 0 : datasourcePagination.number) !== undefined && (datasourcePagination === null || datasourcePagination === void 0 ? void 0 : datasourcePagination.totalElements) !== undefined) {
+      // paginationMeta.number is 0-indexed, so add 1 for 1-indexed page number
+      var serverPage = datasourcePagination.number + 1;
+
+      // Only update if the server page is different from current page
+      if (serverPage !== currentPage && serverPage > 0 && serverPage <= effectiveTotalPages) {
+        setCurrentPage(serverPage);
+      }
+    }
+  }, [datasource, datasourcePagination === null || datasourcePagination === void 0 ? void 0 : datasourcePagination.number, datasourcePagination === null || datasourcePagination === void 0 ? void 0 : datasourcePagination.totalElements, effectiveTotalPages]);
+  return {
+    currentPage: currentPage,
+    setCurrentPage: setCurrentPage,
+    currentPageSize: currentPageSize,
+    setCurrentPageSize: setCurrentPageSize,
+    totalPages: totalPages,
+    visibleItems: visibleItems,
+    setVisibleItems: setVisibleItems,
+    currentPageItems: currentPageItems,
+    effectiveTotalPages: effectiveTotalPages,
+    totalItems: totalItems,
+    paginationMeta: paginationMeta
+  };
+};

package/components/data/list/hooks/useListState.d.ts

@@ -0,0 +1,28 @@
+import { ListItemData } from "../props";
+/**
+ * Custom hook for managing list state
+ * @param dataset - The dataset array
+ * @param pagesize - Number of items per page
+ * @param selectfirstitem - Whether to select the first item by default
+ * @param selectionlimit - Maximum number of items that can be selected
+ * @param listener - Widget listener for widget updates
+ * @param name - Widget name
+ * @returns State management object for the list
+ */
+export declare const useListState: <T extends ListItemData = ListItemData>(dataset: T[], pagesize: number, selectfirstitem: boolean, selectionlimit: number, listener?: any, name?: string, standalone?: boolean) => {
+    selectedItems: T[];
+    setSelectedItems: import("react").Dispatch<import("react").SetStateAction<T[]>>;
+    currentPage: number;
+    setCurrentPage: import("react").Dispatch<import("react").SetStateAction<number>>;
+    totalPages: number;
+    activeItems: Set<T>;
+    setActiveItems: import("react").Dispatch<import("react").SetStateAction<Set<T>>>;
+    firstSelectedItem: T;
+    setFirstSelectedItem: import("react").Dispatch<import("react").SetStateAction<T>>;
+    groupCollapsed: Record<string, boolean>;
+    setGroupCollapsed: import("react").Dispatch<import("react").SetStateAction<Record<string, boolean>>>;
+    visibleItems: number;
+    setVisibleItems: import("react").Dispatch<import("react").SetStateAction<number>>;
+    isLoadingMore: boolean;
+    setIsLoadingMore: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};

package/components/data/list/hooks/useListState.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useListState = void 0;
+var _react = require("react");
+var _listHelpers = require("../utils/list-helpers");
+var _WidgetProvider = require("@wavemaker-ai/react-runtime/context/WidgetProvider");
+/**
+ * Custom hook for managing list state
+ * @param dataset - The dataset array
+ * @param pagesize - Number of items per page
+ * @param selectfirstitem - Whether to select the first item by default
+ * @param selectionlimit - Maximum number of items that can be selected
+ * @param listener - Widget listener for widget updates
+ * @param name - Widget name
+ * @returns State management object for the list
+ */
+var useListState = exports.useListState = function useListState(dataset, pagesize, selectfirstitem, selectionlimit, listener, name) {
+  var standalone = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var Widgets = (0, _WidgetProvider.useWidgetProxy)(undefined, standalone);
+  var _useState = (0, _react.useState)([]),
+    selectedItems = _useState[0],
+    setSelectedItems = _useState[1];
+  var _useState2 = (0, _react.useState)(1),
+    currentPage = _useState2[0],
+    setCurrentPage = _useState2[1];
+  var _useState3 = (0, _react.useState)(1),
+    totalPages = _useState3[0],
+    setTotalPages = _useState3[1];
+  var _useState4 = (0, _react.useState)(new Set()),
+    activeItems = _useState4[0],
+    setActiveItems = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    firstSelectedItem = _useState5[0],
+    setFirstSelectedItem = _useState5[1];
+  var _useState6 = (0, _react.useState)({}),
+    groupCollapsed = _useState6[0],
+    setGroupCollapsed = _useState6[1];
+  var _useState7 = (0, _react.useState)(pagesize),
+    visibleItems = _useState7[0],
+    setVisibleItems = _useState7[1];
+  var _useState8 = (0, _react.useState)(false),
+    isLoadingMore = _useState8[0],
+    setIsLoadingMore = _useState8[1];
+  var isInitialMount = (0, _react.useRef)(true);
+  var rafRef1 = (0, _react.useRef)(null);
+  var rafRef2 = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    // Ensure dataset is a valid array
+    var validDataset = Array.isArray(dataset) ? dataset : [];
+    var pageCount = Math.ceil(validDataset.length / (pagesize || 10));
+    setTotalPages(function (prev) {
+      return prev !== pageCount ? pageCount : prev;
+    });
+  }, [dataset, pagesize]);
+
+  // Sync visibleItems with pagesize when pagesize changes
+  (0, _react.useEffect)(function () {
+    setVisibleItems(pagesize);
+  }, [pagesize]);
+
+  // Separate effect for select first item to ensure it runs after data is ready
+  (0, _react.useEffect)(function () {
+    var validDataset = Array.isArray(dataset) ? dataset : [];
+
+    // Only select first item on initial mount or when dataset changes from empty to having data
+    if (selectfirstitem && validDataset.length > 0) {
+      if (isInitialMount.current) {
+        var firstItem = validDataset[0];
+        setSelectedItems([firstItem]);
+        setActiveItems(new Set([firstItem]));
+        setFirstSelectedItem(firstItem);
+        isInitialMount.current = false;
+
+        // Update selected item widgets after DOM is painted
+        if (listener !== null && listener !== void 0 && listener.onChange && name) {
+          rafRef1.current = requestAnimationFrame(function () {
+            // getSelectedItemWidgets(null, listener, name);
+            rafRef2.current = requestAnimationFrame(function () {
+              (0, _listHelpers.getSelectedItemWidgets)(null, listener, name, firstItem || null, Widgets);
+            });
+          });
+        }
+      }
+    }
+    return function () {
+      if (rafRef1.current) {
+        cancelAnimationFrame(rafRef1.current);
+      }
+      if (rafRef2.current) {
+        cancelAnimationFrame(rafRef2.current);
+      }
+    };
+  }, [dataset, selectfirstitem, name]);
+  return {
+    selectedItems: selectedItems,
+    setSelectedItems: setSelectedItems,
+    currentPage: currentPage,
+    setCurrentPage: setCurrentPage,
+    totalPages: totalPages,
+    activeItems: activeItems,
+    setActiveItems: setActiveItems,
+    firstSelectedItem: firstSelectedItem,
+    setFirstSelectedItem: setFirstSelectedItem,
+    groupCollapsed: groupCollapsed,
+    setGroupCollapsed: setGroupCollapsed,
+    visibleItems: visibleItems,
+    setVisibleItems: setVisibleItems,
+    isLoadingMore: isLoadingMore,
+    setIsLoadingMore: setIsLoadingMore
+  };
+};

package/components/data/list/hooks/useListStateManager.d.ts

@@ -0,0 +1,26 @@
+import { ListStateData } from "../utils/list-helpers";
+import { ListItemData } from "../props";
+import { StorageType } from "@wavemaker-ai/react-runtime/utils/state-persistance";
+interface UseListStateManagerProps {
+    name: string;
+    storage: StorageType;
+    currentPage: number;
+    currentPageSize: number;
+    selectedItems: ListItemData[];
+    items: ListItemData[];
+    initialActualPageSize?: number;
+    multiselect: boolean;
+    isServerSidePagination: boolean;
+    datasource?: any;
+}
+export interface UseListStateManagerReturn {
+    currentState: Partial<ListStateData>;
+    getStateForPageSizeChange: (newPageSize: number, existingSelectedItems?: Array<{
+        page: number;
+        index: number;
+    }>, oldPageSize?: number) => Partial<ListStateData>;
+    isDefaultState: () => boolean;
+    mergeWithExisting: (newState: Partial<ListStateData>, existingState: ListStateData | null) => Partial<ListStateData>;
+}
+export declare const useListStateManager: (props: UseListStateManagerProps) => UseListStateManagerReturn;
+export {};