@wavemaker-ai/react-runtime 1.0.0-rc.647655 → 1.0.0-rc.647684

package/components/data/form/form-controller/withFormController.js

@@ -233,7 +233,7 @@ const withFormController = (WrappedComponent) => {
         rules: validationRules,
         defaultValue: effectiveDataValue !== void 0 ? effectiveDataValue : defaultvalue,
         render: ({ field, fieldState }) => {
-          var _a2, _b;
+          var _a2, _b, _c;
           fieldRef.current = field;
           const processedValue = processFieldValue(field.value, type, props.datafield);
           const errorState = getErrorState(fieldState, validationType, touched);
@@ -292,8 +292,8 @@ const withFormController = (WrappedComponent) => {
                   delete remapped.displayValue;
                 }
                 props.onChangeHandler(name2, remapped);
-              } : props.onChangeHandler,
-              Widgets: ((_a2 = props.listener) == null ? void 0 : _a2.Widgets) || {}
+              } : props.onChangeHandler || ((_a2 = props.listener) == null ? void 0 : _a2.onChange),
+              Widgets: ((_b = props.listener) == null ? void 0 : _b.Widgets) || {}
             }
           });
           return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -325,20 +325,6 @@ const withFormController = (WrappedComponent) => {
                 })()
               }
             ),
-            hint && !shouldShowErrorMessage(validationType, fieldState, touched) && /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: "help-block",
-                "aria-hidden": "true",
-                role: "alert",
-                "aria-live": "polite",
-                style: {
-                  textAlign: "start",
-                  width: "100%"
-                },
-                children: hint
-              }
-            ),
             shouldShowErrorMessage(validationType, fieldState, touched) && /* @__PURE__ */ jsx(
               "p",
               {
@@ -350,7 +336,7 @@ const withFormController = (WrappedComponent) => {
                   textAlign: "start",
                   width: "100%"
                 },
-                children: (_b = fieldState.error) == null ? void 0 : _b.message
+                children: (_c = fieldState.error) == null ? void 0 : _c.message
               }
             )
           ] });

package/components/data/form/form-field/index.js

@@ -50,7 +50,7 @@ const WmFormField = memo(
     const fieldKey = props.formKey || props.name;
     const defaultValueRegisteredRef = useRef(false);
     const showfield = (_b = (_a = overriddenItemsRef == null ? void 0 : overriddenItemsRef.current) == null ? void 0 : _a.show) != null ? _b : show;
-    const formReady = (formProxy == null ? void 0 : formProxy.listener) !== void 0;
+    const formReady = (formProxy == null ? void 0 : formProxy.listener) !== void 0 || ((_c = props.formRef) == null ? void 0 : _c.name) === props.formName;
     const reset = useCallback(
       (value) => {
         const field = fieldProxyRef.current;
@@ -86,7 +86,8 @@ const WmFormField = memo(
         mutableTarget,
         setProxyProps,
         overriddenItemsRef,
-        formProxy
+        formProxy,
+        props.formRef
       );
       fieldProxyRef.current = fieldProxy;
     }, [formReady]);
@@ -110,17 +111,20 @@ const WmFormField = memo(
       });
     }, [props.dataset, props.datafield, props.displayfield, props.displaylabel, props.searchkey]);
     function renderFormFields() {
-      var _a2, _b2, _c2, _d2, _e, _f, _g;
+      var _a2, _b2, _c2, _d2, _e, _f, _g, _h;
       if (props.formRef) {
         const errors = (_a2 = props.formRef) == null ? void 0 : _a2.errors;
         const formKey = (_b2 = props.formKey) != null ? _b2 : props.name;
         const fieldError = formKey && errors ? get(errors, formKey) : void 0;
         const invalid = Boolean(fieldError);
         const invalidCls = invalid ? " text-danger " : "";
-        return /* @__PURE__ */ jsx(Fragment, { children: (_g = props == null ? void 0 : props.renderFormFields) == null ? void 0 : _g.call(props, __spreadProps(__spreadValues(__spreadValues({}, proxyProps), overriddenItemsRef.current), {
+        return /* @__PURE__ */ jsx(Fragment, { children: (_h = props == null ? void 0 : props.renderFormFields) == null ? void 0 : _h.call(props, __spreadProps(__spreadValues(__spreadValues({}, proxyProps), overriddenItemsRef.current), {
           show: showfield,
           disabled: (_d2 = (_c2 = overriddenItemsRef == null ? void 0 : overriddenItemsRef.current) == null ? void 0 : _c2.disabled) != null ? _d2 : props == null ? void 0 : props.disabled,
           readonly: (_f = (_e = overriddenItemsRef == null ? void 0 : overriddenItemsRef.current) == null ? void 0 : _e.readonly) != null ? _f : props == null ? void 0 : props.readonly,
+          // BaseField derives this from live validators. A direct field-proxy write wins,
+          // but never fall back to the initial proxyProps.required snapshot.
+          required: (_g = overriddenItemsRef.current.required) != null ? _g : props.required,
           fieldError,
           validators: props.validators,
           asyncValidators: props.asyncValidators,
@@ -135,12 +139,12 @@ const WmFormField = memo(
       }
     }
     const isDynamicFormField = typeof props.className === "string" && props.className.includes("app-dynamic-form-field");
-    const itemsPerRowClass = !isDynamicFormField && ((_c = props.formRef) == null ? void 0 : _c.itemsPerRow) || "";
+    const itemsPerRowClass = !isDynamicFormField && ((_d = props.formRef) == null ? void 0 : _d.itemsPerRow) || "";
     if (!fieldProxyRef.current) {
       return null;
     }
     const isDeferLoad = deferload === true;
-    const showValue = ((_d = proxyProps == null ? void 0 : proxyProps.show) == null ? void 0 : _d.toString()) !== "false";
+    const showValue = (showfield == null ? void 0 : showfield.toString()) !== "false";
     if ((!showValue || showfield) && isDeferLoad) {
       return null;
     }

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

@@ -98,8 +98,6 @@ const ListItems = ({
     if (onBeforedatarender && widgetInstance) {
       onBeforedatarender(widgetInstance, rawCurrentPageItems.currentItems);
     }
-  }, [rawCurrentItemsKey, groupby]);
-  useEffect(() => {
     if (onRender) {
       if (groupby) {
         const currentPageGroupedItems = paginatedGroupedData.reduce((acc, group) => {
@@ -110,7 +108,7 @@ const ListItems = ({
         onRender(widgetInstance, currentPageItems.currentItems);
       }
     }
-  }, []);
+  }, [rawCurrentItemsKey, groupby, currentPage]);
   const totalGroupedItems = useMemo(() => {
     if (!groupedData || !Array.isArray(groupedData)) return 0;
     return groupedData.reduce((total, group) => {

package/components/data/list/index.js

@@ -393,7 +393,7 @@ const WmList = (props) => {
     } else {
       widgetMethods.selectItem(selecteditem);
     }
-  }, [selecteditem, widgetMethods, listState]);
+  }, [selecteditem]);
   useListEffects({
     name,
     navigation,
@@ -511,7 +511,7 @@ const WmList = (props) => {
     );
   return /* @__PURE__ */ jsxs(
     Box,
-    __spreadProps(__spreadValues({
+    __spreadProps(__spreadValues(__spreadProps(__spreadValues({
       className: clsx(
         DEFAULT_CLS,
         "wm-position-relative",
@@ -523,7 +523,8 @@ const WmList = (props) => {
       "data-name": name
     }, { name }), {
       "data-navigation": navigation,
-      ref: ListWrapperRef,
+      ref: ListWrapperRef
+    }), direction ? { direction } : {}), {
       children: [
         /* @__PURE__ */ jsx(
           ListHeader,
@@ -648,7 +649,7 @@ const WmList = (props) => {
                   listDirection: direction,
                   scrollContainerRef: listScrollContainerRef,
                   sentinelRef: scrollSentinelRef,
-                  orderedDataset: groupby ? Array(paginationState.totalItems).fill(null) : items,
+                  orderedDataset: groupby && navigation !== LIST_NAVIGATION_TYPES.SCROLL ? Array(paginationState.totalItems).fill(null) : items,
                   pagesize: paginationState.currentPageSize,
                   navigationalign,
                   showrecordcount,

package/components/data/pagination/hooks/usePagination.js

@@ -530,7 +530,7 @@ const usePagination = ({
       }
       setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), { currentPage: newPage }));
       if (isServerSidePagination) {
-        datasourceInvoke(newPage).then(() => {
+        datasourceInvoke(newPage).then((response) => {
           if (onPaginationChange) {
             onPaginationChange(
               event || createDummyEvent("paginationchange"),
@@ -541,7 +541,7 @@ const usePagination = ({
           if (onSetRecord) {
             const firstRow = (newPage - 1) * paginationState.currentMaxResults;
             const startIndex = firstRow;
-            const data = isArray(dataState.fullData) ? dataState.fullData.slice(
+            const data = response && isArray(response.data) ? addUniqueRowIds(response.data) : isArray(dataState.fullData) ? dataState.fullData.slice(
               startIndex,
               startIndex + paginationState.currentMaxResults
             ) : dataState.fullData;

package/components/data/table/components/RowCells.js

@@ -71,7 +71,7 @@ const RowCells = memo(
             tabIndex: 0,
             "data-col-id": cellIndex,
             className: `${TABLE_CSS_CLASSES.tableCell} ${colClass || ""}  ${((_e = cell.column.columnDef.meta) == null ? void 0 : _e.className) || ""}`.trim(),
-            style: __spreadProps(__spreadValues(__spreadValues({
+            style: __spreadValues(__spreadProps(__spreadValues(__spreadValues({
               width: cell.column.getSize(),
               textAlign: (_f = cell.column.columnDef.meta) == null ? void 0 : _f.textAlign,
               backgroundColor: (_g = cell.column.columnDef.meta) == null ? void 0 : _g.backgroundColor
@@ -95,6 +95,8 @@ const RowCells = memo(
             })()), getDomHiddenCellStyle(cell.column.columnDef.meta)), {
               fontSize: "inherit",
               color: "inherit"
+            }), hasCustomCellContent && {
+              textOverflow: "clip"
             }),
             children: customRender ? /* @__PURE__ */ jsx(CustomExpressionRenderBody, { rowData, render: customRender }) : ((_h = cell.column.columnDef.meta) == null ? void 0 : _h.renderCellContent) && !isEditingRow ? (_i = cell.column.columnDef.meta) == null ? void 0 : _i.renderCellContent(rowData, cell.column.columnDef) : flexRender(cell.column.columnDef.cell, cell.getContext())
           },

package/components/data/table/components/TableBody.js

@@ -109,7 +109,7 @@ const ExpandedContent = memo(({ rowId, rowData, config, colSpan, onInstanceLoad
   return /* @__PURE__ */ jsx(
     TableRow,
     {
-      className: "expanded-row-content",
+      className: "expanded-row-content app-datagrid-detail-row",
       "data-row-id": rowId,
       role: "row",
       tabIndex: 0,
@@ -121,6 +121,7 @@ const ExpandedContent = memo(({ rowId, rowData, config, colSpan, onInstanceLoad
           role: "cell",
           "data-col-id": "expanded-content",
           tabIndex: 0,
+          className: "app-datagrid-row-details-cell",
           style: {
             padding: "16px",
             borderBottom: "1px solid #e0e0e0"

package/components/data/table/components/TableDataRow.js

@@ -68,7 +68,7 @@ const TableDataRowComponent = ({
     /* @__PURE__ */ jsx(
       TableRow,
       {
-        className: `${TABLE_CSS_CLASSES.tableRow} ${isActive ? "active" : ""} ${rowClass}`,
+        className: `${TABLE_CSS_CLASSES.tableRow} ${isActive ? "active" : ""} ${hasExpansion && rowIsExpanded ? "expanded" : ""} ${rowClass}`,
         onClick: handleClick,
         "data-row-id": row.index,
         role: "row",

package/components/data/table/components/TableHeader.js

@@ -380,6 +380,7 @@ const TableHeaderComponent = memo(
             const isClickable = enablecolumnselection && !isSystemColumn || enablesort && header.column.getCanSort();
             const headerCellResizableClass = header.column.getCanResize() ? " ui-resizable" : "";
             const headerMeta = header.column.columnDef.meta;
+            const isMultiSelectHeader = columnId === "multiSelect";
             cells.push(
               /* @__PURE__ */ jsxs(
                 TableCell,
@@ -402,7 +403,10 @@ const TableHeaderComponent = memo(
                   tabIndex: 0,
                   "data-col-field": header.column.id,
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: "header-data", children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }),
+                    isMultiSelectHeader && !header.isPlaceholder ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      flexRender(header.column.columnDef.header, header.getContext()),
+                      /* @__PURE__ */ jsx("span", { className: "header-data", children: "\xA0" })
+                    ] }) : /* @__PURE__ */ jsx("span", { className: "header-data", children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }),
                     enablesort && !enablecolumnselection && header.column.getCanSort() && /* @__PURE__ */ jsx(
                       Box,
                       {

package/components/data/table/hooks/useRowHandlers.d.ts

@@ -1,5 +1,7 @@
 import { UseRowHandlersProps, UseRowHandlersReturn } from "../props";
 /**
- * Hook to consolidate all row click handlers
+ * Hook to consolidate all row click handlers.
+ * Angular rowSelectionHandler: callOnRowClickEvent first, then toggle + onRowSelect.
+ * Checkbox/radio clicks bubble to the row (rowclick), then onChange fires rowselect.
  */
-export declare const useRowHandlers: ({ editingRowId, isAddingNewRow, handleRowSelectionClick, handleTableEditRowClick, handleRowActiveClick, onRowclick, useRadioSelect, useMultiSelect, isrowselectable, listener, name, }: UseRowHandlersProps) => UseRowHandlersReturn;
+export declare const useRowHandlers: ({ editingRowId, isAddingNewRow, handleRowSelectionClick, handleTableEditRowClick, handleRowActiveClick, onRowclick, useRadioSelect, useMultiSelect, isrowselectable, listener, viewParent, name, widgetRegistrationKey, }: UseRowHandlersProps) => UseRowHandlersReturn;

package/components/data/table/hooks/useRowHandlers.js

@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 import { cleanRowData } from "../utils";
+import { getWidgetForCallback, toNativeEvent } from "../utils/selectionUtils";
 const useRowHandlers = ({
   editingRowId,
   isAddingNewRow,
@@ -11,18 +12,29 @@ const useRowHandlers = ({
   useMultiSelect = false,
   isrowselectable = false,
   listener,
-  name
+  viewParent,
+  name,
+  widgetRegistrationKey
 }) => {
+  const widgetKey = widgetRegistrationKey != null ? widgetRegistrationKey : name;
+  const getWidgetRef = useCallback(
+    () => getWidgetForCallback(listener, viewParent, widgetKey),
+    [viewParent, widgetKey]
+  );
+  const invokeRowClick = useCallback(
+    (event, rowData) => {
+      if (!onRowclick) return;
+      const widget = getWidgetRef();
+      if (widget) {
+        widget.nativeElement = event.target;
+      }
+      onRowclick(toNativeEvent(event), widget, cleanRowData(rowData));
+    },
+    [onRowclick, getWidgetRef]
+  );
   const handleRowClick = useCallback(
     (event, rowData, rowId) => {
-      var _a, _b;
       const hasSelectionMode = useRadioSelect || useMultiSelect;
-      if (onRowclick) {
-        if ((_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]) {
-          listener.Widgets[name].nativeElement = event.target;
-        }
-        onRowclick(event, (_b = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b[name], cleanRowData(rowData));
-      }
       let isSelectionHandled = false;
       if (hasSelectionMode && isrowselectable) {
         isSelectionHandled = handleRowSelectionClick(event, rowId, rowData);
@@ -35,6 +47,7 @@ const useRowHandlers = ({
         return;
       }
       handleRowActiveClick(rowId, isSelectionHandled, isEditingOrAdding);
+      invokeRowClick(event, rowData);
     },
     [
       editingRowId,
@@ -42,11 +55,10 @@ const useRowHandlers = ({
       handleRowSelectionClick,
       handleTableEditRowClick,
       handleRowActiveClick,
-      onRowclick,
+      invokeRowClick,
       useRadioSelect,
       useMultiSelect,
-      isrowselectable,
-      name
+      isrowselectable
     ]
   );
   return {

package/components/data/table/hooks/useRowSelection.d.ts

@@ -1,2 +1,2 @@
 import { UseRowSelectionProps, UseRowSelectionReturn } from "../props";
-export declare const useRowSelection: ({ radioselect, multiselect, gridfirstrowselect, internalDataset, cellState, name, statehandler, initialActualPageSize, getTableState: getTableCurrentState, onRowselect, onRowdeselect, listener, navigation, onSyncSelectedItems, }: UseRowSelectionProps) => UseRowSelectionReturn;
+export declare const useRowSelection: ({ radioselect, multiselect, gridfirstrowselect, internalDataset, cellState, name, statehandler, initialActualPageSize, getTableState: getTableCurrentState, onRowselect, onRowdeselect, listener, navigation, viewParent, widgetRegistrationKey, onSyncSelectedItems, }: UseRowSelectionProps) => UseRowSelectionReturn;

package/components/data/table/hooks/useRowSelection.js

@@ -3,10 +3,21 @@ import {
   isInteractiveElement,
   getRowIdsFromDataset,
   rowExistsInDataset,
-  selectionStateHelpers
+  selectionStateHelpers,
+  getWidgetForCallback,
+  toNativeEvent,
+  createSelectionEventStub
 } from "../utils/selectionUtils";
 import { saveTableState, getTableState } from "../utils/table-helpers";
 import { cleanRowData, UNSUPPORTED_STATE_PERSISTENCE_TYPES } from "../utils";
+const getRowFallbackId = (row) => row._wmTableRowId || String(row.id) || String(0);
+const getSelectedIndices = (selectedIds, dataset) => selectedIds.reduce((indices, rowId) => {
+  const index = dataset.findIndex((row) => row._wmTableRowId === rowId || row.id === rowId);
+  if (index >= 0) {
+    indices.push(index);
+  }
+  return indices;
+}, []);
 const useRowSelection = ({
   radioselect = false,
   multiselect = false,
@@ -21,6 +32,8 @@ const useRowSelection = ({
   onRowdeselect,
   listener,
   navigation = "Basic",
+  viewParent,
+  widgetRegistrationKey,
   onSyncSelectedItems
 }) => {
   const datasetRef = useRef(internalDataset);
@@ -31,22 +44,36 @@ const useRowSelection = ({
   const [updateTrigger, forceUpdate] = useState({});
   const useMultiSelect = multiselect;
   const useRadioSelect = radioselect && !multiselect;
-  const hasSelectionMode = useRadioSelect || useMultiSelect;
+  const prevMultiselectRef = useRef(multiselect);
+  useEffect(() => {
+    const prev = prevMultiselectRef.current;
+    prevMultiselectRef.current = multiselect;
+    if (prev === multiselect) return;
+    selectionStateHelpers.clearSelection(cellState);
+    forceUpdate({});
+    onSyncSelectedItems == null ? void 0 : onSyncSelectedItems([]);
+    if (statehandler && getTableCurrentState) {
+      saveTableState(name, statehandler, {});
+    }
+  }, [multiselect, cellState, onSyncSelectedItems, statehandler, name, getTableCurrentState]);
+  const applySelectionForMode = useCallback(
+    (rowIds) => {
+      if (rowIds.length === 0) return;
+      if (useMultiSelect) {
+        rowIds.forEach((rowId) => selectionStateHelpers.addToSelection(cellState, rowId));
+      } else {
+        selectionStateHelpers.setSelection(cellState, rowIds[0]);
+      }
+    },
+    [useMultiSelect, cellState]
+  );
   const saveStateImmediate = useCallback(() => {
     if (!statehandler || !getTableCurrentState) {
       return;
     }
     const { currentPage, currentPageSize } = getTableCurrentState();
     const selectedIds = selectionStateHelpers.getSelection(cellState);
-    const selectedIndices = [];
-    selectedIds.forEach((rowId) => {
-      const index = internalDataset.findIndex(
-        (row) => row._wmTableRowId === rowId || row.id === rowId
-      );
-      if (index >= 0) {
-        selectedIndices.push(index);
-      }
-    });
+    const selectedIndices = getSelectedIndices(selectedIds, internalDataset);
     const selectedItemsWithPage = selectedIndices.map((idx) => ({
       page: currentPage,
       index: idx
@@ -91,22 +118,39 @@ const useRowSelection = ({
     internalDataset,
     initialActualPageSize
   ]);
-  const getWidgetRef = useCallback(() => {
-    var _a;
-    return (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name];
-  }, [name]);
+  const widgetKey = widgetRegistrationKey != null ? widgetRegistrationKey : name;
+  const getWidgetRef = useCallback(
+    () => getWidgetForCallback(listener, viewParent, widgetKey),
+    [viewParent, widgetKey]
+  );
+  const syncSelectionToWidget = useCallback(
+    (selectedIds) => {
+      const ids = selectedIds != null ? selectedIds : selectionStateHelpers.getSelection(cellState);
+      onSyncSelectedItems == null ? void 0 : onSyncSelectedItems(ids);
+    },
+    [onSyncSelectedItems, cellState]
+  );
+  const commitSelectionChange = useCallback(
+    (syncIds) => {
+      forceUpdate({});
+      saveStateImmediate();
+      syncSelectionToWidget(syncIds);
+    },
+    [saveStateImmediate, syncSelectionToWidget]
+  );
   const triggerSelectionCallback = useCallback(
     (event, rowData, callback) => {
+      var _a;
       if (callback && rowData) {
-        onSyncSelectedItems == null ? void 0 : onSyncSelectedItems(selectionStateHelpers.getSelection(cellState));
+        const widget = getWidgetRef();
         const cleanedRow = cleanRowData([rowData])[0];
-        callback(event, getWidgetRef(), cleanedRow);
+        callback((_a = toNativeEvent(event)) != null ? _a : createSelectionEventStub(), widget, cleanedRow);
       }
     },
-    [getWidgetRef, onSyncSelectedItems, cellState]
+    [getWidgetRef]
   );
   const handleRadioSelection = useCallback(
-    (rowId, rowData) => {
+    (rowId, rowData, event) => {
       const previousSelection = selectionStateHelpers.getSelection(cellState);
       const previousRowId = previousSelection.length > 0 ? previousSelection[0] : null;
       let previousRowData = null;
@@ -116,16 +160,15 @@ const useRowSelection = ({
         );
       }
       selectionStateHelpers.setSelection(cellState, rowId);
-      forceUpdate({});
-      saveStateImmediate();
+      commitSelectionChange();
       if (previousRowData) {
-        triggerSelectionCallback(null, previousRowData, onRowdeselect);
+        triggerSelectionCallback(event, previousRowData, onRowdeselect);
       }
-      triggerSelectionCallback(null, rowData, onRowselect);
+      triggerSelectionCallback(event, rowData, onRowselect);
     },
     [
       cellState,
-      saveStateImmediate,
+      commitSelectionChange,
       onRowselect,
       onRowdeselect,
       internalDataset,
@@ -133,20 +176,20 @@ const useRowSelection = ({
     ]
   );
   const handleMultiSelection = useCallback(
-    (rowId, rowData, isSelected) => {
+    (rowId, rowData, isSelected, event) => {
       if (isSelected) {
         selectionStateHelpers.addToSelection(cellState, rowId);
       } else {
         selectionStateHelpers.removeFromSelection(cellState, rowId);
       }
-      forceUpdate({});
-      saveStateImmediate();
-      triggerSelectionCallback(null, rowData, isSelected ? onRowselect : onRowdeselect);
+      commitSelectionChange();
+      triggerSelectionCallback(event, rowData, isSelected ? onRowselect : onRowdeselect);
     },
-    [cellState, saveStateImmediate, onRowselect, onRowdeselect, triggerSelectionCallback]
+    [cellState, commitSelectionChange, onRowselect, onRowdeselect, triggerSelectionCallback]
   );
   const handleSelectAll = useCallback(
-    (isSelected) => {
+    (isSelected, event) => {
+      var _a;
       let newIds = [];
       if (isSelected) {
         newIds = getRowIdsFromDataset(datasetRef.current);
@@ -154,19 +197,18 @@ const useRowSelection = ({
       } else {
         selectionStateHelpers.clearSelection(cellState);
       }
-      forceUpdate({});
-      saveStateImmediate();
-      onSyncSelectedItems == null ? void 0 : onSyncSelectedItems(newIds);
+      commitSelectionChange(newIds);
       const rows = datasetRef.current;
       const callback = isSelected ? onRowselect : onRowdeselect;
       if (callback && rows.length > 0) {
+        const sharedEvent = (_a = toNativeEvent(event)) != null ? _a : createSelectionEventStub();
         rows.forEach((row) => {
           const cleanedRow = cleanRowData([row])[0];
-          callback(null, getWidgetRef(), cleanedRow);
+          callback(sharedEvent, getWidgetRef(), cleanedRow);
         });
       }
     },
-    [cellState, saveStateImmediate, onSyncSelectedItems, onRowselect, onRowdeselect, getWidgetRef]
+    [cellState, commitSelectionChange, onRowselect, onRowdeselect, getWidgetRef]
   );
   const handleRowSelectionClick = useCallback(
     (event, rowId, rowData) => {
@@ -177,20 +219,18 @@ const useRowSelection = ({
         const isCurrentlySelected = selectionStateHelpers.isRowSelected(cellState, rowId);
         const willBeSelected = !isCurrentlySelected;
         selectionStateHelpers.toggleSelection(cellState, rowId);
-        forceUpdate({});
-        saveStateImmediate();
+        commitSelectionChange();
         triggerSelectionCallback(event, rowData, willBeSelected ? onRowselect : onRowdeselect);
         return true;
-      } else {
-        handleRadioSelection(rowId, rowData);
-        return true;
       }
+      handleRadioSelection(rowId, rowData);
+      return true;
     },
     [
       useMultiSelect,
       handleRadioSelection,
       cellState,
-      saveStateImmediate,
+      commitSelectionChange,
       triggerSelectionCallback,
       onRowselect,
       onRowdeselect
@@ -202,26 +242,22 @@ const useRowSelection = ({
     }
     if (gridfirstrowselect && internalDataset.length > 0) {
       const firstRowData = internalDataset[0];
-      const firstRowId = firstRowData._wmTableRowId || String(firstRowData.id) || String(0);
+      const firstRowId = getRowFallbackId(firstRowData);
       const currentSelection = selectionStateHelpers.getSelection(cellState);
       if (currentSelection.length === 0) {
-        if (useMultiSelect) {
-          selectionStateHelpers.addToSelection(cellState, firstRowId);
-        } else {
-          selectionStateHelpers.setSelection(cellState, firstRowId);
-        }
+        applySelectionForMode([firstRowId]);
         forceUpdate({});
         initialSelectionDoneRef.current = true;
       } else if (!useMultiSelect) {
         const selectedId = currentSelection[0];
         if (!rowExistsInDataset(selectedId, internalDataset)) {
-          selectionStateHelpers.setSelection(cellState, firstRowId);
+          applySelectionForMode([firstRowId]);
           forceUpdate({});
           initialSelectionDoneRef.current = true;
         }
       }
     }
-  }, [gridfirstrowselect, internalDataset, useMultiSelect, cellState]);
+  }, [gridfirstrowselect, internalDataset, useMultiSelect, cellState, applySelectionForMode]);
   useEffect(() => {
     var _a;
     if (!gridfirstrowselect || internalDataset.length === 0 || !initialSelectionDoneRef.current) {
@@ -239,15 +275,11 @@ const useRowSelection = ({
     );
     if (!hasSelectionInCurrentPage) {
       const firstRowData = internalDataset[0];
-      const firstRowId = firstRowData._wmTableRowId || String(firstRowData.id) || String(0);
-      if (useMultiSelect) {
-        selectionStateHelpers.addToSelection(cellState, firstRowId);
-      } else {
-        selectionStateHelpers.setSelection(cellState, firstRowId);
-      }
+      const firstRowId = getRowFallbackId(firstRowData);
+      applySelectionForMode([firstRowId]);
       forceUpdate({});
       if (onRowselect) {
-        triggerSelectionCallback(null, firstRowData, onRowselect);
+        triggerSelectionCallback(void 0, firstRowData, onRowselect);
       }
     }
   }, [
@@ -259,7 +291,8 @@ const useRowSelection = ({
     name,
     statehandler,
     onRowselect,
-    triggerSelectionCallback
+    triggerSelectionCallback,
+    applySelectionForMode
   ]);
   const isRowSelected = useCallback(
     (rowId) => {
@@ -302,23 +335,8 @@ const useRowSelection = ({
       if (!isAlreadyRestored && expectedRowIds.length > 0) {
         if (useMultiSelect) {
           selectionStateHelpers.clearSelection(cellState);
-          currentPageSelections.forEach((index) => {
-            if (index >= 0 && index < internalDataset.length) {
-              const row = internalDataset[index];
-              if (row && row._wmTableRowId) {
-                selectionStateHelpers.addToSelection(cellState, row._wmTableRowId);
-              }
-            }
-          });
-        } else {
-          const firstIndex = currentPageSelections[0];
-          if (firstIndex >= 0 && firstIndex < internalDataset.length) {
-            const row = internalDataset[firstIndex];
-            if (row && row._wmTableRowId) {
-              selectionStateHelpers.setSelection(cellState, row._wmTableRowId);
-            }
-          }
         }
+        applySelectionForMode(expectedRowIds);
         forceUpdate({});
       }
     }
@@ -329,7 +347,8 @@ const useRowSelection = ({
     navigation,
     internalDataset,
     cellState,
-    useMultiSelect
+    useMultiSelect,
+    applySelectionForMode
   ]);
   return {
     selectedRowIds,