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

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

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCurrentPageItems = void 0;
+var _react = require("react");
+var _constants = require("../utils/constants");
+/**
+ * Hook for calculating current page items based on navigation type and pagination
+ */
+var useCurrentPageItems = exports.useCurrentPageItems = function useCurrentPageItems(_ref) {
+  var items = _ref.items,
+    navigation = _ref.navigation,
+    currentPage = _ref.currentPage,
+    pagesize = _ref.pagesize,
+    visibleItems = _ref.visibleItems,
+    _ref$isServerPaginate = _ref.isServerPaginated,
+    isServerPaginated = _ref$isServerPaginate === void 0 ? false : _ref$isServerPaginate;
+  return (0, _react.useMemo)(function () {
+    if (!items || !Array.isArray(items) || items.length === 0) {
+      return {
+        currentItems: [],
+        startIndex: 0,
+        endIndex: 0
+      };
+    }
+
+    // For server-paginated data, use all items as-is since the server has already paginated the data
+    if (isServerPaginated) {
+      return {
+        currentItems: items,
+        startIndex: 0,
+        endIndex: items.length
+      };
+    }
+
+    // For client-side pagination, calculate the slice indexes
+    var startIndex = navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND ? 0 : (currentPage - 1) * pagesize;
+    var endIndex = navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND ? visibleItems : currentPage * pagesize;
+    var currentItems = items.slice(startIndex, endIndex);
+    return {
+      currentItems: currentItems,
+      startIndex: startIndex,
+      endIndex: endIndex
+    };
+  }, [items, navigation, currentPage, pagesize, visibleItems, isServerPaginated]);
+};

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

@@ -0,0 +1,9 @@
+import { GroupedDataItem } from "./index";
+import { ListItemData } from "../props";
+/**
+ * Custom hook for grouping data
+ * @param orderedDataset - The dataset to group
+ * @param groupby - The field to group by (supports dot notation for nested properties)
+ * @returns Grouped data array
+ */
+export declare const useGroupedData: <T extends ListItemData = ListItemData>(orderedDataset: T[], groupby?: string) => GroupedDataItem<T>[];

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGroupedData = void 0;
+var _react = require("react");
+var _lodashEs = require("lodash-es");
+/**
+ * Custom hook for grouping data
+ * @param orderedDataset - The dataset to group
+ * @param groupby - The field to group by (supports dot notation for nested properties)
+ * @returns Grouped data array
+ */
+var useGroupedData = exports.useGroupedData = function useGroupedData(orderedDataset, groupby) {
+  return (0, _react.useMemo)(function () {
+    // Ensure orderedDataset is a valid array
+    var validDataset = Array.isArray(orderedDataset) ? orderedDataset : [];
+    if (!groupby || !validDataset.length) return [];
+
+    // Group data using lodash groupBy with safe property access
+    var grouped = (0, _lodashEs.groupBy)(validDataset, function (item) {
+      var value = (0, _lodashEs.get)(item, groupby);
+      // If the nested value doesn't exist, group under "Others"
+      return value !== undefined ? String(value || "None") : "Others";
+    });
+
+    // Convert to sorted array format expected by the component
+    return (0, _lodashEs.sortBy)((0, _lodashEs.map)(grouped, function (data, key) {
+      return {
+        key: key,
+        data: data,
+        originalDataLength: data.length
+      };
+    }), "key");
+  }, [orderedDataset, groupby]);
+};

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

@@ -0,0 +1,9 @@
+import { UseListDataProps } from "./props";
+import { ListItemData } from "../props";
+/**
+ * Custom hook for processing and ordering list data
+ * @param dataset - The dataset to process
+ * @param config - Configuration options for data processing
+ * @returns Processed and ordered dataset
+ */
+export declare const useListData: <T extends ListItemData = ListItemData>(dataset: T[], config: UseListDataProps<T>) => T[];

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

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useListData = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _lodashEs = require("lodash-es");
+/**
+ * Custom hook for processing and ordering list data
+ * @param dataset - The dataset to process
+ * @param config - Configuration options for data processing
+ * @returns Processed and ordered dataset
+ */
+var useListData = exports.useListData = function useListData(dataset, config) {
+  var orderby = config.orderby,
+    groupby = config.groupby;
+  return (0, _react.useMemo)(function () {
+    // Ensure dataset is a valid array
+    var validDataset = Array.isArray(dataset) ? dataset : [];
+    if (!validDataset.length) return [];
+
+    // If no ordering or grouping is required, return as-is
+    if (!orderby && !groupby) {
+      return validDataset;
+    }
+
+    // Apply ordering if specified
+    if (orderby) {
+      // Parse orderby string to extract fields and directions
+      var orderFields = orderby.split(",").map(function (field) {
+        var _field$trim$split = field.trim().split(":"),
+          _field$trim$split2 = (0, _slicedToArray2["default"])(_field$trim$split, 2),
+          fieldName = _field$trim$split2[0],
+          _field$trim$split2$ = _field$trim$split2[1],
+          direction = _field$trim$split2$ === void 0 ? "asc" : _field$trim$split2$;
+        return {
+          field: fieldName.trim(),
+          direction: direction.trim().toLowerCase()
+        };
+      });
+
+      // Extract field names and directions for lodash orderBy
+      var fields = orderFields.map(function (_ref) {
+        var field = _ref.field;
+        return function (item) {
+          return (0, _lodashEs.get)(item, field);
+        };
+      });
+      var directions = orderFields.map(function (_ref2) {
+        var direction = _ref2.direction;
+        return direction;
+      });
+      return (0, _lodashEs.orderBy)(validDataset, fields, directions);
+    }
+    return validDataset;
+  }, [dataset, orderby, groupby]);
+};

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

@@ -0,0 +1,67 @@
+import { ListItemData } from "../props";
+import { StorageType } from "@wavemaker-ai/react-runtime/utils/state-persistance";
+import { UseListStateManagerReturn } from "./useListStateManager";
+interface UseListEffectsProps {
+    name: string;
+    navigation: string;
+    datasource: any;
+    safeDataset: ListItemData[];
+    items: ListItemData[];
+    orderedDataset: ListItemData[];
+    groupedData: any;
+    groupby: string;
+    orderby: string;
+    selectfirstitem: boolean;
+    statehandler: StorageType;
+    accumulatedData: ListItemData[];
+    lastLoadedPage: number;
+    isFirstLoad: boolean;
+    onDemandCurrentPage: number;
+    hasBeenReordered: boolean;
+    initialRender: boolean;
+    initialPage: number;
+    initialPageSize: number;
+    initialSelectedItems: number[];
+    initialActualPageSize?: number;
+    restoredPageNumber: number | null;
+    setAccumulatedData: (data: ListItemData[] | ((prev: ListItemData[]) => ListItemData[])) => void;
+    setLastLoadedPage: (page: number) => void;
+    setIsFirstLoad: (isFirst: boolean) => void;
+    setOnDemandCurrentPage: (page: number) => void;
+    setinitialRender: (initial: boolean) => void;
+    setRestoredPageNumber: (page: number | null) => void;
+    listState: {
+        selectedItems: ListItemData[];
+        activeItems: Set<ListItemData>;
+        firstSelectedItem: ListItemData | null;
+        setSelectedItems: (items: ListItemData[]) => void;
+        setActiveItems: (items: Set<ListItemData>) => void;
+        setFirstSelectedItem: (item: ListItemData | null) => void;
+    };
+    paginationState: {
+        currentPage: number;
+        currentPageSize: number;
+        setCurrentPage: (page: number) => void;
+        setVisibleItems: (count: number) => void;
+    };
+    widgetMethods: {
+        selectItem: (item: any) => void;
+        deselectItem: (item: any) => void;
+        getItem: (index: number) => any;
+        getIndex: (item: any) => number;
+        clear: () => void;
+        getWidgets: (widgetName: string, index?: number) => any;
+        selectPageSize: (newPageSize: number) => void;
+    };
+    onSelect?: (widget: any, item: any) => void;
+    onRender?: (widget: any, item: any) => void;
+    onBeforedatarender?: (widget: any, item: any) => void;
+    widgetInstance: any;
+    listener: any;
+    userInitiatedSelectionRef: React.MutableRefObject<boolean>;
+    showNavigation: boolean;
+    stateManager: UseListStateManagerReturn;
+    standalone?: boolean;
+}
+export declare const useListEffects: (props: UseListEffectsProps) => void;
+export {};

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

@@ -0,0 +1,355 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useListEffects = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = require("react");
+var _constants = require("../utils/constants");
+var _listHelpers = require("../utils/list-helpers");
+var _WidgetProvider = require("@wavemaker-ai/react-runtime/context/WidgetProvider");
+var _widgetInstanceUtils = require("../utils/widget-instance-utils");
+var useListEffects = exports.useListEffects = function useListEffects(props) {
+  var name = props.name,
+    navigation = props.navigation,
+    datasource = props.datasource,
+    safeDataset = props.safeDataset,
+    items = props.items,
+    orderedDataset = props.orderedDataset,
+    groupedData = props.groupedData,
+    groupby = props.groupby,
+    orderby = props.orderby,
+    selectfirstitem = props.selectfirstitem,
+    statehandler = props.statehandler,
+    accumulatedData = props.accumulatedData,
+    lastLoadedPage = props.lastLoadedPage,
+    isFirstLoad = props.isFirstLoad,
+    onDemandCurrentPage = props.onDemandCurrentPage,
+    hasBeenReordered = props.hasBeenReordered,
+    initialRender = props.initialRender,
+    initialPage = props.initialPage,
+    initialPageSize = props.initialPageSize,
+    initialSelectedItems = props.initialSelectedItems,
+    initialActualPageSize = props.initialActualPageSize,
+    setAccumulatedData = props.setAccumulatedData,
+    setLastLoadedPage = props.setLastLoadedPage,
+    setIsFirstLoad = props.setIsFirstLoad,
+    setOnDemandCurrentPage = props.setOnDemandCurrentPage,
+    setinitialRender = props.setinitialRender,
+    listState = props.listState,
+    paginationState = props.paginationState,
+    widgetMethods = props.widgetMethods,
+    onSelect = props.onSelect,
+    widgetInstance = props.widgetInstance,
+    listener = props.listener,
+    userInitiatedSelectionRef = props.userInitiatedSelectionRef,
+    restoredPageNumber = props.restoredPageNumber,
+    setRestoredPageNumber = props.setRestoredPageNumber,
+    showNavigation = props.showNavigation,
+    stateManager = props.stateManager,
+    _props$standalone = props.standalone,
+    standalone = _props$standalone === void 0 ? false : _props$standalone;
+  var Widgets = (0, _WidgetProvider.useWidgetProxy)(undefined, standalone);
+  // Track page size changes
+  var _useState = (0, _react.useState)(paginationState.currentPageSize),
+    lastPageSize = _useState[0],
+    setLastPageSize = _useState[1];
+  var rafRef1 = (0, _react.useRef)(null);
+  var rafRef2 = (0, _react.useRef)(null);
+  var hasInitialWidgetUpdateRun = (0, _react.useRef)(false);
+  var widgetMethodsRef = (0, _react.useRef)(widgetMethods);
+  widgetMethodsRef.current = widgetMethods;
+
+  // Effect 1: Accumulate data for On-Demand navigation
+  (0, _react.useEffect)(function () {
+    if (navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND && datasource && safeDataset.length > 0) {
+      var _datasource$paginatio, _datasource$paginatio2;
+      // Get the current page from pagination metadata (0-indexed: 0 = page 1)
+      var currentPageFromMeta = (_datasource$paginatio = (_datasource$paginatio2 = datasource.pagination) === null || _datasource$paginatio2 === void 0 ? void 0 : _datasource$paginatio2.number) !== null && _datasource$paginatio !== void 0 ? _datasource$paginatio : 0;
+      if (isFirstLoad) {
+        // Initial load - just set the data
+        setAccumulatedData(safeDataset);
+        setLastLoadedPage(currentPageFromMeta);
+        setIsFirstLoad(false);
+        // Sync the onDemandCurrentPage with the actual loaded page
+        if (currentPageFromMeta !== onDemandCurrentPage) {
+          setOnDemandCurrentPage(currentPageFromMeta);
+        }
+      } else if (currentPageFromMeta > lastLoadedPage) {
+        // This is a new page - append the data
+        setAccumulatedData(function (prev) {
+          return [].concat((0, _toConsumableArray2["default"])(prev), (0, _toConsumableArray2["default"])(safeDataset));
+        });
+        setLastLoadedPage(currentPageFromMeta);
+      } else if (currentPageFromMeta === 0 && lastLoadedPage > 0) {
+        // Data was reset (e.g., filter changed), start fresh
+        setAccumulatedData(safeDataset);
+        setLastLoadedPage(0);
+        setIsFirstLoad(false);
+        setOnDemandCurrentPage(0);
+      }
+    }
+  }, [navigation, datasource, safeDataset, isFirstLoad, lastLoadedPage, onDemandCurrentPage, accumulatedData.length]);
+
+  // Effect 2: Reset accumulated data when orderby changes (On-Demand and Scroll)
+  (0, _react.useEffect)(function () {
+    if ((navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND || navigation === _constants.LIST_NAVIGATION_TYPES.SCROLL) && datasource) {
+      // Reset accumulated data when query parameters change
+      setAccumulatedData([]);
+      setLastLoadedPage(-1);
+      setIsFirstLoad(true);
+      setOnDemandCurrentPage(0); // Reset to page 0 (0-indexed)
+    }
+  }, [orderby]); // Reset when sorting changes
+
+  // Effect 3: Expose methods through widget instance
+  // Uses wrapper functions that delegate to ref to avoid stale closures and infinite re-renders
+  (0, _react.useEffect)(function () {
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(name, {
+        selectItem: function selectItem(val) {
+          return widgetMethodsRef.current.selectItem(val);
+        },
+        deselectItem: function deselectItem(val) {
+          return widgetMethodsRef.current.deselectItem(val);
+        },
+        getItem: function getItem(index) {
+          return widgetMethodsRef.current.getItem(index);
+        },
+        getIndex: function getIndex(item) {
+          return widgetMethodsRef.current.getIndex(item);
+        },
+        clear: function clear() {
+          return widgetMethodsRef.current.clear();
+        },
+        getWidgets: function getWidgets(widgetName, index) {
+          return widgetMethodsRef.current.getWidgets(widgetName, index);
+        },
+        listItems: {
+          first: items[0],
+          last: items[items.length - 1],
+          length: items.length
+        },
+        showNavigation: showNavigation,
+        selectPageSize: function selectPageSize(size) {
+          return widgetMethodsRef.current.selectPageSize(size);
+        }
+      });
+    }
+  }, [name, showNavigation, items]);
+
+  // Effect 3: Expose methods through widget instance
+  (0, _react.useEffect)(function () {
+    if (listener !== null && listener !== void 0 && listener.onChange && props.navigation !== _constants.LIST_NAVIGATION_TYPES.NONE) {
+      listener.onChange(name, {
+        selecteditem: listState.selectedItems[0]
+      });
+    }
+  }, [listState.selectedItems]);
+
+  // Effect 3b: Update selected item widgets for state restoration (not selectfirstitem)
+
+  (0, _react.useEffect)(function () {
+    // Only run once on initial load when there are selected items from state restoration
+    // Skip if selectfirstitem is true (handled in useListState)
+    if (hasInitialWidgetUpdateRun.current || !(listener !== null && listener !== void 0 && listener.onChange) || listState.selectedItems.length === 0 || initialRender || selectfirstitem) {
+      return;
+    }
+
+    // Mark as run
+    hasInitialWidgetUpdateRun.current = true;
+
+    // Use double RAF to ensure DOM is fully updated
+    rafRef1.current = requestAnimationFrame(function () {
+      // getSelectedItemWidgets(null, listener, name);
+      rafRef2.current = requestAnimationFrame(function () {
+        (0, _listHelpers.getSelectedItemWidgets)(null, listener, name, listState.selectedItems[0] || null, Widgets);
+      });
+    });
+    return function () {
+      if (rafRef1.current) {
+        cancelAnimationFrame(rafRef1.current);
+      }
+      if (rafRef2.current) {
+        cancelAnimationFrame(rafRef2.current);
+      }
+    };
+  }, [name, listState.selectedItems.length, initialRender, selectfirstitem]);
+
+  // Effect 5: Handle selectfirstitem with onSelect
+  // Use setTimeout to ensure onSelect fires after onRender (which is called synchronously in ListItems)
+  (0, _react.useEffect)(function () {
+    if (selectfirstitem && widgetInstance && onSelect && listState.selectedItems.length > 0) {
+      // Only trigger onSelect for selectfirstitem if it's the initial selection and not user-initiated
+      if (listState.selectedItems.length === 1 && items.length > 0 && listState.selectedItems[0] === items[0]) {
+        if (!userInitiatedSelectionRef.current) {
+          // Delay onSelect to ensure it fires after onRender
+          // onRender is called synchronously in the ListItems component
+          var timer = setTimeout(function () {
+            var selectedItem = listState.selectedItems[0];
+
+            // Attach context information to widget instance
+            if (selectedItem) {
+              (0, _widgetInstanceUtils.setWidgetIndexWithContext)(widgetInstance, items, selectedItem);
+            }
+            onSelect(widgetInstance, selectedItem);
+          }, 0);
+          return function () {
+            return clearTimeout(timer);
+          };
+        }
+      }
+    }
+  }, [selectfirstitem, listState.selectedItems, items]);
+  // Effect 6: Handle selectfirstitem for grouped data
+  (0, _react.useEffect)(function () {
+    if (selectfirstitem && groupby && groupedData && groupedData.length > 0) {
+      var firstGroup = groupedData[0];
+      if (firstGroup && firstGroup.data && firstGroup.data.length > 0) {
+        var firstItemInGroup = firstGroup.data[0];
+        var setFirstItem = function setFirstItem() {
+          listState.setSelectedItems([firstItemInGroup]);
+          listState.setActiveItems(new Set([firstItemInGroup]));
+          listState.setFirstSelectedItem(firstItemInGroup);
+          // Trigger onSelect for the initial selection of first item in grouped data only if not user-initiated
+          if (onSelect && widgetInstance && !userInitiatedSelectionRef.current) {
+            // Delay onSelect to ensure it fires after onRender
+            // onRender is called synchronously in the ListItems component
+            var timer = setTimeout(function () {
+              (0, _widgetInstanceUtils.setWidgetIndexWithContext)(widgetInstance, items, firstItemInGroup);
+              onSelect(widgetInstance, firstItemInGroup);
+            }, 0);
+            return function () {
+              return clearTimeout(timer);
+            };
+          }
+        };
+
+        // Check if the currently selected first item is different from the grouped first item
+        if (listState.selectedItems.length && listState.selectedItems[0] !== firstItemInGroup) {
+          setFirstItem();
+        } else if (listState.selectedItems.length === 0) {
+          setFirstItem();
+        }
+      }
+    }
+  }, [groupby, groupedData, selectfirstitem, listState]);
+
+  // Effect 7: Reset user-initiated flag after selectedItems change
+  (0, _react.useEffect)(function () {
+    var timer = setTimeout(function () {
+      userInitiatedSelectionRef.current = false;
+    }, 0);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [listState.selectedItems]);
+
+  // Effect 8: Load persisted state when items are available
+  (0, _react.useEffect)(function () {
+    // Only run this effect once when items become available
+    if (items.length > 0 && initialRender) {
+      // Restore selected items from our parsed initial state
+      if (initialSelectedItems.length > 0) {
+        // Map indexes to actual items
+        var selectedItems = initialSelectedItems.map(function (idx) {
+          return idx >= 0 && idx < items.length ? items[idx] : null;
+        }).filter(Boolean);
+        if (selectedItems.length > 0) {
+          listState.setSelectedItems(selectedItems);
+          listState.setActiveItems(new Set(selectedItems));
+          listState.setFirstSelectedItem(selectedItems[0]);
+        }
+      }
+
+      // For on-demand navigation, update visible items to show items up to the restored page
+      if (navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND && initialPage > 1) {
+        paginationState.setVisibleItems(initialPage * paginationState.currentPageSize);
+      }
+
+      // Mark initialization as complete
+      setinitialRender(false);
+    }
+  }, [items, initialRender, initialPage, initialSelectedItems, paginationState.currentPageSize, paginationState.setVisibleItems, paginationState.setCurrentPage, navigation, datasource, listState.setSelectedItems, listState.setActiveItems, listState.setFirstSelectedItem]);
+
+  // Effect 9: Clear persisted state when items are reordered
+  (0, _react.useEffect)(function () {
+    // Skip state clearing for On-Demand navigation
+    if (navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND) {
+      return;
+    }
+    if (hasBeenReordered) {
+      // Clear the persisted state
+      (0, _listHelpers.clearListState)(name, statehandler);
+    }
+  }, [hasBeenReordered, navigation]);
+
+  // Effect 10: Restore selections when page size changes
+  (0, _react.useEffect)(function () {
+    // Skip for On-Demand navigation
+    if (navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND) {
+      return;
+    }
+
+    // Check if page size has changed and we have items
+    var pageSizeChanged = lastPageSize !== paginationState.currentPageSize;
+    if (pageSizeChanged && items.length > 0 && statehandler) {
+      var savedState = (0, _listHelpers.getListState)(name, statehandler);
+      if (savedState !== null && savedState !== void 0 && savedState.selectedItem && savedState.selectedItem.length > 0) {
+        // Filter selections for the current page (should be page 1 after size change)
+        var currentPageSelections = savedState.selectedItem.filter(function (item) {
+          return item.page === paginationState.currentPage;
+        }).map(function (item) {
+          return item.index;
+        });
+
+        // Map indexes to actual items
+        var selectedItems = currentPageSelections.map(function (idx) {
+          return idx >= 0 && idx < items.length ? items[idx] : null;
+        }).filter(Boolean);
+        if (selectedItems.length > 0) {
+          listState.setSelectedItems(selectedItems);
+          listState.setActiveItems(new Set(selectedItems));
+          listState.setFirstSelectedItem(selectedItems[0]);
+        }
+      }
+      setLastPageSize(paginationState.currentPageSize);
+    }
+  }, [items, paginationState.currentPageSize, paginationState.currentPage, lastPageSize, navigation, statehandler, name, listState]);
+
+  // Effect 11: Persist state on changes
+  (0, _react.useEffect)(function () {
+    // Skip state persistence for On-Demand navigation
+    if (navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND) {
+      return;
+    }
+
+    // Check if we're in default state
+    if (items.length > 0 && !hasBeenReordered && !stateManager.isDefaultState()) {
+      // Get existing persisted state
+      var existingState = (0, _listHelpers.getListState)(name, statehandler);
+
+      // Merge current state with existing state
+      var stateToSave = stateManager.mergeWithExisting(stateManager.currentState, existingState);
+
+      // Compare state content, not object references
+      var existingStateStr = JSON.stringify(existingState);
+      var stateToSaveStr = JSON.stringify(stateToSave);
+      var statesAreEqual = existingStateStr === stateToSaveStr;
+
+      // Save the state only if content has actually changed
+      if (!statesAreEqual) {
+        (0, _listHelpers.saveListState)(name, statehandler, stateToSave);
+      }
+    }
+  }, [listState.selectedItems, paginationState.currentPage, items, name, navigation, hasBeenReordered, statehandler]);
+  (0, _react.useEffect)(function () {
+    if (restoredPageNumber !== null && paginationState) {
+      paginationState.setCurrentPage(restoredPageNumber);
+      // Clear the restored page number after applying
+      setRestoredPageNumber(null);
+    }
+  }, [restoredPageNumber, paginationState]);
+};

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

@@ -0,0 +1,9 @@
+import { ListItemData } from "../props";
+import { UseListEventHandlersProps, ListEventHandlers } from "./props";
+/**
+ * Custom hook for managing list event handlers
+ * Extracts all event handling logic from the main component
+ */
+export declare const useListEventHandlers: <T extends ListItemData = ListItemData>(props: UseListEventHandlersProps<T> & {
+    widgetInstance?: unknown;
+}) => ListEventHandlers<T>;