@wavemaker/react-runtime 11.14.2-rc.6311 → 12.0.0-next.28533

package/components/data/table/hooks/use-edited-rows.js

@@ -0,0 +1,141 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUpdateEditedCell = exports.useEditedRowsContext = exports.useEditedRow = exports.EditedRowsProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+var EditedRowsContext = /*#__PURE__*/(0, _react.createContext)({
+  updateCell: function updateCell() {},
+  getEdits: function getEdits() {
+    return undefined;
+  },
+  getAllEdits: function getAllEdits() {
+    return {};
+  },
+  subscribe: function subscribe() {
+    return function () {};
+  },
+  subscribeToAll: function subscribeToAll() {
+    return function () {};
+  },
+  removeRowEdits: function removeRowEdits() {}
+});
+var EditedRowsProvider = exports.EditedRowsProvider = function EditedRowsProvider(_ref) {
+  var children = _ref.children;
+  // Store the actual edited data
+  var editedRowsRef = (0, _react.useRef)({});
+
+  // Registry of listeners: rowId -> Set of callbacks
+  var listenersRef = (0, _react.useRef)({});
+
+  // Global listeners for any change
+  var globalListenersRef = (0, _react.useRef)(new Set());
+  var updateCell = (0, _react.useCallback)(function (rowId, field, value) {
+    // 1. Update the data
+    if (!editedRowsRef.current[rowId]) {
+      editedRowsRef.current[rowId] = {};
+    }
+
+    // Check if value actually changed to avoid unnecessary notifies
+    if (editedRowsRef.current[rowId][field] === value) return;
+    editedRowsRef.current[rowId][field] = value;
+
+    // 2. Notify row listeners
+    if (listenersRef.current[rowId]) {
+      listenersRef.current[rowId].forEach(function (cb) {
+        return cb();
+      });
+    }
+
+    // 3. Notify global listeners
+    if (globalListenersRef.current.size > 0) {
+      globalListenersRef.current.forEach(function (cb) {
+        return cb();
+      });
+    }
+  }, []);
+  var getEdits = (0, _react.useCallback)(function (rowId) {
+    return editedRowsRef.current[rowId];
+  }, []);
+  var getAllEdits = (0, _react.useCallback)(function () {
+    return editedRowsRef.current;
+  }, []);
+  var removeRowEdits = (0, _react.useCallback)(function (rowId) {
+    if (editedRowsRef.current[rowId]) {
+      delete editedRowsRef.current[rowId];
+      // Notify listeners so they can update (e.g. revert to original)
+      if (listenersRef.current[rowId]) {
+        listenersRef.current[rowId].forEach(function (cb) {
+          return cb();
+        });
+      }
+      // Notify global listeners
+      if (globalListenersRef.current.size > 0) {
+        globalListenersRef.current.forEach(function (cb) {
+          return cb();
+        });
+      }
+    }
+  }, []);
+  var subscribe = (0, _react.useCallback)(function (rowId, callback) {
+    if (!listenersRef.current[rowId]) {
+      listenersRef.current[rowId] = new Set();
+    }
+    listenersRef.current[rowId].add(callback);
+
+    // Unsubscribe function
+    return function () {
+      if (listenersRef.current[rowId]) {
+        listenersRef.current[rowId]["delete"](callback);
+        if (listenersRef.current[rowId].size === 0) {
+          delete listenersRef.current[rowId];
+        }
+      }
+    };
+  }, []);
+  var subscribeToAll = (0, _react.useCallback)(function (callback) {
+    globalListenersRef.current.add(callback);
+    return function () {
+      globalListenersRef.current["delete"](callback);
+    };
+  }, []);
+  return __jsx(EditedRowsContext.Provider, {
+    value: {
+      updateCell: updateCell,
+      getEdits: getEdits,
+      getAllEdits: getAllEdits,
+      subscribe: subscribe,
+      subscribeToAll: subscribeToAll,
+      removeRowEdits: removeRowEdits
+    }
+  }, children);
+};
+
+// Hook for components to subscribe to edits for a specific row
+var useEditedRow = exports.useEditedRow = function useEditedRow(rowId) {
+  var context = (0, _react.useContext)(EditedRowsContext);
+
+  // Local state to force re-render when subscription fires
+  // We use a simple counter
+  var _useState = (0, _react.useState)(0),
+    setTick = _useState[1];
+  (0, _react.useEffect)(function () {
+    var unsubscribe = context.subscribe(rowId, function () {
+      setTick(function (t) {
+        return t + 1;
+      });
+    });
+    return unsubscribe;
+  }, [context, rowId]);
+  return context.getEdits(rowId);
+};
+var useEditedRowsContext = exports.useEditedRowsContext = function useEditedRowsContext() {
+  return (0, _react.useContext)(EditedRowsContext);
+};
+var useUpdateEditedCell = exports.useUpdateEditedCell = function useUpdateEditedCell() {
+  return (0, _react.useContext)(EditedRowsContext).updateCell;
+};

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCellState = exports.setSelectedRowIds = exports.setSelectedRowId = exports.setCellValue = exports.getSelectedRowIds = exports.getSelectedRowId = exports.getCellValue = void 0;
+exports.useCellState = exports.setSelectedRowIds = exports.setCellValue = exports.getSelectedRowIds = exports.getCellValue = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _lodashEs = require("lodash-es");
 var _react = require("react");
@@ -17,7 +17,6 @@ var useCellState = exports.useCellState = function useCellState(tableId) {
   var stateRef = (0, _react.useRef)({
     cells: {},
     selection: {
-      selectedRowId: null,
       selectedRowIds: []
     }
   });
@@ -66,7 +65,6 @@ var useCellState = exports.useCellState = function useCellState(tableId) {
     stateRef.current = {
       cells: {},
       selection: {
-        selectedRowId: null,
         selectedRowIds: []
       }
     };
@@ -101,16 +99,11 @@ var getCellValue = exports.getCellValue = function getCellValue(state, rowId, fi
 var setCellValue = exports.setCellValue = function setCellValue(state, rowId, fieldName, value) {
   state.setValue(["cells", rowId, fieldName], value);
 };
-var getSelectedRowId = exports.getSelectedRowId = function getSelectedRowId(state) {
-  var _state$getValue;
-  return (_state$getValue = state.getValue("selection.selectedRowId", null)) !== null && _state$getValue !== void 0 ? _state$getValue : null;
-};
-var setSelectedRowId = exports.setSelectedRowId = function setSelectedRowId(state, rowId) {
-  state.setValue("selection.selectedRowId", rowId);
-};
+
+// Unified selection helpers - uses single selectedRowIds array for both radio and multiselect
 var getSelectedRowIds = exports.getSelectedRowIds = function getSelectedRowIds(state) {
-  var _state$getValue2;
-  return (_state$getValue2 = state.getValue("selection.selectedRowIds", [])) !== null && _state$getValue2 !== void 0 ? _state$getValue2 : [];
+  var _state$getValue;
+  return (_state$getValue = state.getValue("selection.selectedRowIds", [])) !== null && _state$getValue !== void 0 ? _state$getValue : [];
 };
 var setSelectedRowIds = exports.setSelectedRowIds = function setSelectedRowIds(state, rowIds) {
   state.setValue("selection.selectedRowIds", rowIds);

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

@@ -7,44 +7,64 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useFormWidget = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("../utils");
-var _text = _interopRequireDefault(require("../../../input/text"));
-var _textarea = _interopRequireDefault(require("../../../input/textarea"));
-var _number = _interopRequireDefault(require("../../../input/number"));
-var _currency = _interopRequireDefault(require("../../../input/currency"));
-var _datetime = _interopRequireDefault(require("../../../input/epoch/datetime"));
-var _time = _interopRequireDefault(require("../../../input/epoch/time"));
-var _date = _interopRequireDefault(require("../../../input/epoch/date"));
-var _select = _interopRequireDefault(require("../../../input/select"));
-var _slider = _interopRequireDefault(require("../../../input/slider"));
-var _rating = _interopRequireDefault(require("../../../input/rating"));
-var _colorPicker = _interopRequireDefault(require("../../../input/color-picker"));
-var _fileupload = _interopRequireDefault(require("../../../input/fileupload"));
-var _chips = _interopRequireDefault(require("../../../input/chips"));
-var _richtexteditor = _interopRequireDefault(require("../../../basic/richtexteditor"));
-var _search = _interopRequireDefault(require("../../../basic/search"));
-var _checkbox = _interopRequireDefault(require("../../../input/default/checkbox"));
-var _switch = _interopRequireDefault(require("../../../input/default/switch"));
-var _checkboxset = _interopRequireDefault(require("../../../input/default/checkboxset"));
-var _radioset = _interopRequireDefault(require("../../../input/default/radioset"));
+var _text = _interopRequireDefault(require("@wavemaker/react-runtime/components/input/text"));
+var _textarea = _interopRequireDefault(require("@wavemaker/react-runtime/components/input/textarea"));
+var _number = _interopRequireDefault(require("@wavemaker/react-runtime/components/input/number"));
+var _currency = _interopRequireDefault(require("@wavemaker/react-runtime/components/input/currency"));
+var _datetime = _interopRequireDefault(require("@wavemaker/react-runtime/components/input/epoch/datetime"));
+var _time = _interopRequireDefault(require("@wavemaker/react-runtime/components/input/epoch/time"));
+var _date = _interopRequireDefault(require("@wavemaker/react-runtime/components/input/epoch/date"));
+var _select = _interopRequireDefault(require("@wavemaker/react-runtime/components/input/select"));
+var _slider = _interopRequireDefault(require("@wavemaker/react-runtime/components/input/slider"));
+var _rating = _interopRequireDefault(require("@wavemaker/react-runtime/components/input/rating"));
+var _colorPicker = _interopRequireDefault(require("@wavemaker/react-runtime/components/input/color-picker"));
+var _fileupload = _interopRequireDefault(require("@wavemaker/react-runtime/components/input/fileupload"));
+var _chips = _interopRequireDefault(require("@wavemaker/react-runtime/components/input/chips"));
+var _richtexteditor = _interopRequireDefault(require("@wavemaker/react-runtime/components/basic/richtexteditor"));
+var _search = _interopRequireDefault(require("@wavemaker/react-runtime/components/basic/search"));
+var _checkbox = _interopRequireDefault(require("@wavemaker/react-runtime/components/input/default/checkbox"));
+var _switch = _interopRequireDefault(require("@wavemaker/react-runtime/components/input/default/switch"));
+var _checkboxset = _interopRequireDefault(require("@wavemaker/react-runtime/components/input/default/checkboxset"));
+var _radioset = _interopRequireDefault(require("@wavemaker/react-runtime/components/input/default/radioset"));
+var _get = _interopRequireDefault(require("lodash-es/get"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
-var __jsx = _react["default"].createElement; // Import form widgets
+var __jsx = _react["default"].createElement;
+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; } // Import form widgets
+function getDisabledValue(disabled, rowData) {
+  if (typeof disabled === "string") {
+    if (disabled.includes("rowData")) {
+      try {
+        return new Function("rowData", "return ".concat(disabled))(rowData);
+      } catch (error) {
+        console.warn("Failed to evaluate disabled expression:", disabled, error);
+        return false;
+      }
+    }
+    return (0, _get["default"])(rowData, disabled);
+  }
+  return disabled;
+}
 var useFormWidget = exports.useFormWidget = function useFormWidget(_ref) {
   var listener = _ref.listener;
   // Function to render the appropriate form widget based on editWidgetType
   var renderFormWidget = (0, _react.useCallback)(function (fieldName, widgetType, value, fieldChangeCallback, widgetProps) {
+    var _widgetProps$column2;
     // Use defaultvalue if value is null/undefined and defaultvalue is provided
     var effectiveValue = value !== undefined && value !== null ? value : (widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.defaultvalue) || "";
     var sessionSuffix = widgetProps !== null && widgetProps !== void 0 && widgetProps.sessionKey ? "_".concat(widgetProps.sessionKey) : "";
     var uniqueName = "edit_".concat(fieldName).concat(sessionSuffix);
-    var commonProps = {
+    var disabled = getDisabledValue(widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.disabled, widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.rowData);
+    var commonProps = _objectSpread({
       key: uniqueName,
       // Add key to force component recreation
       name: uniqueName,
       datavalue: effectiveValue,
       required: (widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.required) || false,
-      disabled: (widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.disabled) || false,
+      disabled: disabled,
       placeholder: (widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.placeholder) || "Enter ".concat(fieldName),
       onChange: function onChange(event, widget, newVal) {
         var _widgetProps$column;
@@ -58,8 +78,10 @@ var useFormWidget = exports.useFormWidget = function useFormWidget(_ref) {
       },
       listener: listener,
       rowData: widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.rowData,
-      column: widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.column
-    };
+      column: widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.column,
+      updateon: "blur",
+      regexp: (widgetProps === null || widgetProps === void 0 || (_widgetProps$column2 = widgetProps.column) === null || _widgetProps$column2 === void 0 ? void 0 : _widgetProps$column2.regexp) || ".*"
+    }, widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.column);
 
     // Helper function to wrap event handlers with the correct parameters
     var wrapEventHandler = function wrapEventHandler(handler) {
@@ -105,29 +127,22 @@ var useFormWidget = exports.useFormWidget = function useFormWidget(_ref) {
         // Check if column has editinputtype property
         var editInputType = (column === null || column === void 0 ? void 0 : column.editinputtype) || "text";
         return __jsx(_text["default"], (0, _extends2["default"])({}, commonProps, {
-          type: editInputType,
-          updateon: "keypress"
+          type: editInputType
         }));
       case "WmPassword":
         return __jsx(_text["default"], (0, _extends2["default"])({}, commonProps, {
-          type: "password",
-          updateon: "keypress"
+          type: "password"
         }));
       case "WmTextarea":
-        return __jsx(_textarea["default"], (0, _extends2["default"])({}, commonProps, {
-          updateon: "keypress"
-        }));
+        return __jsx(_textarea["default"], commonProps);
       case "WmCheckbox":
-        var checkboxDataset = (0, _utils.getBooleanDataset)();
+        return __jsx(_checkbox["default"], commonProps);
+      case "WmToggle":
         return __jsx(_checkbox["default"], (0, _extends2["default"])({}, commonProps, {
-          dataset: checkboxDataset
+          type: "toggle"
         }));
-      case "WmToggle":
       case "WmSwitch":
-        var switchDataset = (0, _utils.getBooleanDataset)();
-        return __jsx(_switch["default"], (0, _extends2["default"])({}, commonProps, {
-          dataset: switchDataset
-        }));
+        return __jsx(_switch["default"], commonProps);
       case "WmNumber":
         return __jsx(_number["default"], commonProps);
       case "WmCurrency":
@@ -138,17 +153,11 @@ var useFormWidget = exports.useFormWidget = function useFormWidget(_ref) {
       case "WmRichtexteditor":
         return __jsx(_richtexteditor["default"], commonProps);
       case "WmSelect":
-        return __jsx(_select["default"], (0, _extends2["default"])({}, commonProps, {
-          dataset: []
-        }));
+        return __jsx(_select["default"], commonProps);
       case "WmCheckboxset":
-        return __jsx(_checkboxset["default"], (0, _extends2["default"])({}, commonProps, {
-          dataset: []
-        }));
+        return __jsx(_checkboxset["default"], commonProps);
       case "WmRadioset":
-        return __jsx(_radioset["default"], (0, _extends2["default"])({}, commonProps, {
-          dataset: []
-        }));
+        return __jsx(_radioset["default"], commonProps);
       case "WmDate":
         return __jsx(_date["default"], commonProps);
       case "WmTime":
@@ -161,12 +170,10 @@ var useFormWidget = exports.useFormWidget = function useFormWidget(_ref) {
         return __jsx(_rating["default"], commonProps);
       case "WmAutocomplete":
         return __jsx(_search["default"], (0, _extends2["default"])({}, commonProps, {
-          dataset: []
+          type: "autocomplete"
         }));
       case "WmChips":
-        return __jsx(_chips["default"], (0, _extends2["default"])({}, commonProps, {
-          dataset: []
-        }));
+        return __jsx(_chips["default"], commonProps);
       case "WmColorpicker":
       case "WmColorPicker":
         return __jsx(_colorPicker["default"], commonProps);

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

@@ -1,59 +1,80 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.usePaginationState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
+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; }
 /**
- * Hook to manage pagination state and behavior
+ * Hook to manage pagination state and behavior for TanStack Table
+ * Provides controlled pagination state management
  */
 var usePaginationState = exports.usePaginationState = function usePaginationState(_ref) {
-  var table = _ref.table,
+  var initialPage = _ref.initialPage,
+    initialPageSize = _ref.initialPageSize,
     editmode = _ref.editmode,
     internalDataset = _ref.internalDataset,
-    isAddingNewRow = _ref.isAddingNewRow,
-    cancelEditing = _ref.cancelEditing,
     datasource = _ref.datasource,
     isServerSidePagination = _ref.isServerSidePagination;
-  var prevPageRef = (0, _react.useRef)(table.getState().pagination.pageIndex);
+  // Local state for pagination - needed for controlled TanStack Table pagination
+  var _useState = (0, _react.useState)({
+      pageIndex: initialPage - 1,
+      // Convert to 0-based index
+      pageSize: initialPageSize
+    }),
+    paginationState = _useState[0],
+    setPaginationState = _useState[1];
 
-  // Hide add new row when page changes
-  (0, _react.useEffect)(function () {
-    var currentPage = table.getState().pagination.pageIndex;
-    if (currentPage !== prevPageRef.current && isAddingNewRow) {
-      cancelEditing();
-    }
-    prevPageRef.current = currentPage;
-  }, [table, isAddingNewRow, cancelEditing]);
+  // Direct pagination handler - avoids redundant table.setPageIndex() call
   var handlePaginationChange = (0, _react.useCallback)(function (event, widget, index) {
+    var newPageIndex = index - 1; // Convert to 0-based index
+
+    // Handle quickedit edge case - prevent navigation to empty pages
     if (editmode === "quickedit" && !isServerSidePagination) {
-      var newPageIndex = index - 1; // Convert to 0-based index
-      var pageSize = table.getState().pagination.pageSize;
+      var pageSize = paginationState.pageSize;
       var dataLength = internalDataset.length;
       var startIdx = newPageIndex * pageSize;
-
-      // If this would be an empty page (no data on it), prevent navigation
       if (startIdx >= dataLength && dataLength > 0) {
-        // Calculate the correct page to navigate to
         var correctPage = Math.ceil(dataLength / pageSize);
         if (correctPage > 0) {
-          table.setPageIndex(correctPage - 1); // Convert to 0-based index
+          setPaginationState(function (prev) {
+            return _objectSpread(_objectSpread({}, prev), {}, {
+              pageIndex: correctPage - 1
+            });
+          });
           return;
         }
       }
     }
-    table.setPageIndex(index - 1);
-  }, [editmode, internalDataset, table, isServerSidePagination]);
+
+    // Directly update pagination state - no need for table.setPageIndex() roundtrip
+    setPaginationState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        pageIndex: newPageIndex
+      });
+    });
+  }, [editmode, isServerSidePagination, internalDataset.length, paginationState.pageSize]);
+
+  // Page size change handler
   var handlePageSizeChange = (0, _react.useCallback)(function (newPageSize) {
     // Update datasource maxResults if datasource has paging capability
     if (isServerSidePagination && datasource && datasource.maxResults !== undefined) {
       datasource.maxResults = newPageSize;
     }
-    table.setPageSize(newPageSize);
-    table.setPageIndex(0); // Reset to first page
-  }, [table, isServerSidePagination, datasource]);
+
+    // Directly update pagination state - pageSize and reset to first page
+    setPaginationState({
+      pageIndex: 0,
+      pageSize: newPageSize
+    });
+  }, [isServerSidePagination, datasource]);
   return {
+    paginationState: paginationState,
+    setPaginationState: setPaginationState,
     handlePaginationChange: handlePaginationChange,
     handlePageSizeChange: handlePageSizeChange
   };

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

@@ -10,8 +10,8 @@ var usePanelStructure = exports.usePanelStructure = function usePanelStructure(_
   var title = _ref.title,
     subheading = _ref.subheading,
     iconclass = _ref.iconclass,
-    _ref$exportOptions = _ref.exportOptions,
-    exportOptions = _ref$exportOptions === void 0 ? [] : _ref$exportOptions,
+    _ref$exportformat = _ref.exportformat,
+    exportformat = _ref$exportformat === void 0 ? [] : _ref$exportformat,
     headerActions = _ref.headerActions,
     footerActions = _ref.footerActions,
     shownavigation = _ref.shownavigation,
@@ -21,8 +21,8 @@ var usePanelStructure = exports.usePanelStructure = function usePanelStructure(_
     allowpagesizechange = _ref.allowpagesizechange,
     datasource = _ref.datasource;
   var showPanelHeading = (0, _react.useMemo)(function () {
-    return (0, _utils.shouldShowPanelHeading)(title, subheading, iconclass, exportOptions, headerActions);
-  }, [title, subheading, iconclass, exportOptions, headerActions]);
+    return (0, _utils.shouldShowPanelHeading)(title, subheading, iconclass, exportformat, headerActions);
+  }, [title, subheading, iconclass, exportformat, headerActions]);
   var showPagination = (0, _react.useMemo)(function () {
     return (0, _utils.shouldShowPagination)({
       shownavigation: shownavigation,

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

@@ -15,13 +15,41 @@ var useRowHandlers = exports.useRowHandlers = function useRowHandlers(_ref) {
     handleRowSelectionClick = _ref.handleRowSelectionClick,
     handleTableEditRowClick = _ref.handleTableEditRowClick,
     handleRowActiveClick = _ref.handleRowActiveClick,
-    onRowclick = _ref.onRowclick;
+    onRowclick = _ref.onRowclick,
+    _ref$useRadioSelect = _ref.useRadioSelect,
+    useRadioSelect = _ref$useRadioSelect === void 0 ? false : _ref$useRadioSelect,
+    _ref$useMultiSelect = _ref.useMultiSelect,
+    useMultiSelect = _ref$useMultiSelect === void 0 ? false : _ref$useMultiSelect,
+    _ref$isrowselectable = _ref.isrowselectable,
+    isrowselectable = _ref$isrowselectable === void 0 ? false : _ref$isrowselectable,
+    listener = _ref.listener,
+    name = _ref.name;
   var handleRowClick = (0, _react.useCallback)(function (event, rowData, rowId) {
-    // Handle row selection first
-    var isSelectionHandled = handleRowSelectionClick(event, rowId, rowData);
+    // Determine if selection mode is enabled
+    var hasSelectionMode = useRadioSelect || useMultiSelect;
+
+    // Fire onRowclick FIRST - before any selection changes (matches Angular behavior)
     if (onRowclick) {
-      onRowclick(event, {}, (0, _utils.cleanRowData)(rowData));
+      var _listener$Widgets, _listener$Widgets2;
+      if (listener !== null && listener !== void 0 && (_listener$Widgets = listener.Widgets) !== null && _listener$Widgets !== void 0 && _listener$Widgets[name]) {
+        listener.Widgets[name].nativeElement = event.target;
+      }
+      onRowclick(event, listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[name], (0, _utils.cleanRowData)(rowData));
+    }
+
+    // Handle row selection based on isrowselectable setting
+    // When isrowselectable is false and selection mode is enabled,
+    // only allow selection through the radio/checkbox column (not row click)
+    var isSelectionHandled = false;
+    if (hasSelectionMode && isrowselectable) {
+      // Current behavior: clicking anywhere on row selects it
+      isSelectionHandled = handleRowSelectionClick(event, rowId, rowData);
+    } else if (!hasSelectionMode) {
+      // No selection mode enabled, just handle as normal (makes row active)
+      isSelectionHandled = handleRowSelectionClick(event, rowId, rowData);
     }
+    // When hasSelectionMode && !isrowselectable, skip row selection from row click
+    // Selection will only happen through the radio/checkbox column click
 
     // Handle table edit row click (works for both inline and quickedit)
     handleTableEditRowClick(rowData, rowId);
@@ -30,8 +58,14 @@ var useRowHandlers = exports.useRowHandlers = function useRowHandlers(_ref) {
     var isEditingOrAdding = editingRowId !== null || isAddingNewRow;
 
     // Handle active row state
+    // When isrowselectable is false and selection mode is enabled,
+    // don't set the active class on row click - only through radio/checkbox column
+    if (hasSelectionMode && !isrowselectable) {
+      // Skip setting active row when isrowselectable is false with selection mode
+      return;
+    }
     handleRowActiveClick(rowId, isSelectionHandled, isEditingOrAdding);
-  }, [editingRowId, isAddingNewRow, handleRowSelectionClick, handleTableEditRowClick, handleRowActiveClick]);
+  }, [editingRowId, isAddingNewRow, handleRowSelectionClick, handleTableEditRowClick, handleRowActiveClick, onRowclick, useRadioSelect, useMultiSelect, isrowselectable, listener, name]);
   return {
     handleRowClick: handleRowClick
   };