@wavemaker/react-runtime 11.14.1-rc.236

package/hooks/useAuth.js

@@ -0,0 +1,562 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWidgetAccess = exports.usePageAccess = exports.useLogout = exports.useLogin = exports.useCurrentUser = exports.useAuth = exports.useAccess = exports.checkAccessSync = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("react");
+var _store = require("../store");
+var _authSlice = require("@wavemaker/react-runtime/store/slices/authSlice");
+var _includes = _interopRequireDefault(require("lodash-es/includes"));
+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; }
+var useAuth = exports.useAuth = function useAuth() {
+  var dispatch = (0, _store.useAppDispatch)();
+  var _useAppSelector = (0, _store.useAppSelector)(function (state) {
+      return state.auth;
+    }),
+    isLoggedIn = _useAppSelector.isLoggedIn,
+    loggedInUser = _useAppSelector.loggedInUser,
+    securityConfig = _useAppSelector.securityConfig,
+    isPageLoading = _useAppSelector.isPageLoading,
+    error = _useAppSelector.error;
+  var handleLogin = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(options) {
+      var loginResponse;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return dispatch((0, _authSlice.login)(options)).unwrap();
+          case 3:
+            loginResponse = _context.sent;
+            return _context.abrupt("return", loginResponse);
+          case 7:
+            _context.prev = 7;
+            _context.t0 = _context["catch"](0);
+            throw _context.t0;
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 7]]);
+    }));
+    return function handleLogin(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var handleLogout = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(baseURL) {
+      var logoutResponse;
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.prev = 0;
+            _context2.next = 3;
+            return dispatch((0, _authSlice.logout)({
+              baseURL: baseURL
+            })).unwrap();
+          case 3:
+            logoutResponse = _context2.sent;
+            return _context2.abrupt("return", logoutResponse);
+          case 7:
+            _context2.prev = 7;
+            _context2.t0 = _context2["catch"](0);
+            return _context2.abrupt("return", _context2.t0);
+          case 10:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[0, 7]]);
+    }));
+    return function handleLogout(_x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var checkCanAccessPage = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3(pageName) {
+      var baseUrl;
+      return _regenerator["default"].wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            baseUrl = (securityConfig === null || securityConfig === void 0 ? void 0 : securityConfig.baseUrl) || "";
+            _context3.next = 3;
+            return dispatch((0, _authSlice.canAccessPage)({
+              pageName: pageName
+            })).unwrap();
+          case 3:
+            return _context3.abrupt("return", _context3.sent);
+          case 4:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return function checkCanAccessPage(_x3) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var hasAccessToWidget = function hasAccessToWidget(widgetRoles) {
+    var widgetRolesArr = widgetRoles.split(",");
+
+    // Access the widget when 'Everyone' is chosen
+    if ((0, _includes["default"])(widgetRolesArr, _authSlice.USER_ROLE.EVERYONE)) {
+      return true;
+    }
+
+    // Access the widget when 'Anonymous' is chosen and user is not authenticated
+    if ((0, _includes["default"])(widgetRolesArr, _authSlice.USER_ROLE.ANONYMOUS) && !(loggedInUser !== null && loggedInUser !== void 0 && loggedInUser.isAuthenticated)) {
+      return true;
+    }
+
+    // Access the widget when 'Only Authenticated Users' is chosen and user is authenticated
+    if ((0, _includes["default"])(widgetRolesArr, _authSlice.USER_ROLE.AUTHENTICATED) && loggedInUser !== null && loggedInUser !== void 0 && loggedInUser.isAuthenticated) {
+      return true;
+    }
+
+    // Access the widget when widget role and logged in user role matches
+    return !!(loggedInUser !== null && loggedInUser !== void 0 && loggedInUser.isAuthenticated) && matchRoles(widgetRolesArr, (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.roles) || []);
+  };
+  var matchRoles = function matchRoles(widgetRoles, userRoles) {
+    return widgetRoles.some(function (role) {
+      return (0, _includes["default"])(userRoles, role);
+    });
+  };
+  var getLoggedInUserDetails = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4(baseURL) {
+      return _regenerator["default"].wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            if (baseURL) {
+              _context4.next = 2;
+              break;
+            }
+            return _context4.abrupt("return", Promise.resolve({}));
+          case 2:
+            _context4.next = 4;
+            return dispatch((0, _authSlice.loadSecurityInfo)(baseURL)).unwrap();
+          case 4:
+            return _context4.abrupt("return", _context4.sent);
+          case 5:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4);
+    }));
+    return function getLoggedInUserDetails(_x4) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  var authNavigateToLandingPage = /*#__PURE__*/function () {
+    var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5(options) {
+      return _regenerator["default"].wrap(function _callee5$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            _context5.prev = 0;
+            _context5.next = 3;
+            return dispatch((0, _authSlice.navigateToLandingPage)(options)).unwrap();
+          case 3:
+            return _context5.abrupt("return", true);
+          case 6:
+            _context5.prev = 6;
+            _context5.t0 = _context5["catch"](0);
+            return _context5.abrupt("return", _context5.t0 || false);
+          case 9:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee5, null, [[0, 6]]);
+    }));
+    return function authNavigateToLandingPage(_x5) {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+  return {
+    isLoggedIn: isLoggedIn,
+    loggedInUser: loggedInUser,
+    securityConfig: securityConfig,
+    isPageLoading: isPageLoading,
+    error: error,
+    login: handleLogin,
+    logout: handleLogout,
+    canAccessPage: checkCanAccessPage,
+    hasAccessToWidget: hasAccessToWidget,
+    getLoggedInUserDetails: getLoggedInUserDetails,
+    navigateToLandingPage: authNavigateToLandingPage
+  };
+};
+var usePageAccess = exports.usePageAccess = function usePageAccess(pageName) {
+  var dispatch = (0, _store.useAppDispatch)();
+  var _useAppSelector2 = (0, _store.useAppSelector)(function (state) {
+      return state.auth;
+    }),
+    loggedInUser = _useAppSelector2.loggedInUser;
+  var _useState = (0, _react.useState)({
+      hasAccess: false,
+      loading: true,
+      currentPage: pageName
+    }),
+    state = _useState[0],
+    setState = _useState[1];
+  var hasAccess = pageName === state.currentPage ? state.hasAccess : false;
+  var loading = pageName !== state.currentPage || state.loading;
+  (0, _react.useEffect)(function () {
+    // Set loading to true and hasAccess to false immediately for new page
+    if (pageName !== state.currentPage) {
+      setState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          currentPage: pageName,
+          hasAccess: false,
+          loading: true
+        });
+      });
+    }
+    var checkAccess = /*#__PURE__*/function () {
+      var _ref6 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+        var access;
+        return _regenerator["default"].wrap(function _callee6$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
+            case 0:
+              _context6.prev = 0;
+              _context6.next = 3;
+              return dispatch((0, _authSlice.canAccessPage)({
+                pageName: pageName
+              })).unwrap();
+            case 3:
+              access = _context6.sent;
+              setState(function (prev) {
+                if (prev.currentPage !== pageName) return prev;
+                return _objectSpread(_objectSpread({}, prev), {}, {
+                  hasAccess: access,
+                  loading: false
+                });
+              });
+              _context6.next = 11;
+              break;
+            case 7:
+              _context6.prev = 7;
+              _context6.t0 = _context6["catch"](0);
+              console.error("Error checking page access:", _context6.t0);
+              setState(function (prev) {
+                if (prev.currentPage !== pageName) return prev;
+                return _objectSpread(_objectSpread({}, prev), {}, {
+                  hasAccess: false,
+                  loading: false
+                });
+              });
+            case 11:
+            case "end":
+              return _context6.stop();
+          }
+        }, _callee6, null, [[0, 7]]);
+      }));
+      return function checkAccess() {
+        return _ref6.apply(this, arguments);
+      };
+    }();
+    checkAccess();
+  }, [pageName, loggedInUser, dispatch]);
+  return {
+    hasAccess: hasAccess,
+    loading: loading
+  };
+};
+var useWidgetAccess = exports.useWidgetAccess = function useWidgetAccess(widgetRoles) {
+  var _useAuth = useAuth(),
+    hasAccessToWidget = _useAuth.hasAccessToWidget;
+  return hasAccessToWidget(widgetRoles);
+};
+var useAccess = exports.useAccess = function useAccess(name, type) {
+  var dispatch = (0, _store.useAppDispatch)();
+  var _useAppSelector3 = (0, _store.useAppSelector)(function (state) {
+      return state.auth;
+    }),
+    loggedInUser = _useAppSelector3.loggedInUser,
+    securityConfig = _useAppSelector3.securityConfig;
+  var _useState2 = (0, _react.useState)({
+      hasAccess: false,
+      loading: true,
+      currentItem: "".concat(type, "-").concat(name)
+    }),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var hasAccess = "".concat(type, "-").concat(name) === state.currentItem ? state.hasAccess : false;
+  var loading = "".concat(type, "-").concat(name) !== state.currentItem || state.loading;
+  (0, _react.useEffect)(function () {
+    // If name is empty, skip access check and mark as not loading
+    if (!name) {
+      setState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          currentItem: "".concat(type, "-").concat(name),
+          hasAccess: true,
+          // Allow access when no name specified
+          loading: false
+        });
+      });
+      return;
+    }
+
+    // Set loading to true and hasAccess to false immediately for new item
+    var currentItemKey = "".concat(type, "-").concat(name);
+    if (currentItemKey !== state.currentItem) {
+      setState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          currentItem: currentItemKey,
+          hasAccess: false,
+          loading: true
+        });
+      });
+    }
+    var checkItemAccess = /*#__PURE__*/function () {
+      var _ref7 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee7() {
+        var access;
+        return _regenerator["default"].wrap(function _callee7$(_context7) {
+          while (1) switch (_context7.prev = _context7.next) {
+            case 0:
+              _context7.prev = 0;
+              _context7.next = 3;
+              return dispatch((0, _authSlice.checkAccess)({
+                name: name,
+                type: type
+              })).unwrap();
+            case 3:
+              access = _context7.sent;
+              setState(function (prev) {
+                if (prev.currentItem !== currentItemKey) return prev;
+                return _objectSpread(_objectSpread({}, prev), {}, {
+                  hasAccess: access,
+                  loading: false
+                });
+              });
+              _context7.next = 11;
+              break;
+            case 7:
+              _context7.prev = 7;
+              _context7.t0 = _context7["catch"](0);
+              console.error("Error checking ".concat(type.toLowerCase(), " access:"), _context7.t0);
+              setState(function (prev) {
+                if (prev.currentItem !== currentItemKey) return prev;
+                return _objectSpread(_objectSpread({}, prev), {}, {
+                  hasAccess: false,
+                  loading: false
+                });
+              });
+            case 11:
+            case "end":
+              return _context7.stop();
+          }
+        }, _callee7, null, [[0, 7]]);
+      }));
+      return function checkItemAccess() {
+        return _ref7.apply(this, arguments);
+      };
+    }();
+    checkItemAccess();
+  }, [name, type, loggedInUser, securityConfig, dispatch]);
+  return {
+    hasAccess: hasAccess,
+    loading: loading
+  };
+};
+
+/**
+ * Synchronous access checker for use outside of React components
+ * @param name - Name of the page or partial
+ * @param type - Type: 'PAGE' or 'PARTIAL'
+ * @param authState - Current auth state from Redux store
+ * @param appConfig - App configuration containing pages and partials
+ * @returns boolean indicating if access is granted
+ */
+var checkAccessSync = exports.checkAccessSync = function checkAccessSync(name, type, authState, appConfig) {
+  var _authState$loggedInUs, _authState$loggedInUs2, _authState$securityCo;
+  var userRoles = (authState === null || authState === void 0 || (_authState$loggedInUs = authState.loggedInUser) === null || _authState$loggedInUs === void 0 ? void 0 : _authState$loggedInUs.roles) || [];
+  var isAuthenticated = (authState === null || authState === void 0 || (_authState$loggedInUs2 = authState.loggedInUser) === null || _authState$loggedInUs2 === void 0 ? void 0 : _authState$loggedInUs2.isAuthenticated) || false;
+  var isSecurityEnabled = authState === null || authState === void 0 || (_authState$securityCo = authState.securityConfig) === null || _authState$securityCo === void 0 ? void 0 : _authState$securityCo.isSecurityEnabled;
+
+  // If security is not enabled, allow access to everything
+  if (!isSecurityEnabled) {
+    return true;
+  }
+
+  // Get the appropriate config based on type
+  var configs = type === "PAGE" ? (appConfig === null || appConfig === void 0 ? void 0 : appConfig.pages) || [] : (appConfig === null || appConfig === void 0 ? void 0 : appConfig.partials) || [];
+
+  // Extract only serializable properties for access control (avoid components)
+  var serializableConfigs = configs.map(function (item) {
+    return {
+      name: item.name,
+      permission: item.permission,
+      allowedRoles: item.allowedRoles,
+      type: item.type
+    };
+  });
+  var config = serializableConfigs.find(function (item) {
+    return item.name.toLowerCase() === name.toLowerCase();
+  });
+
+  // If no config found, deny access for security
+  if (!config) {
+    return false;
+  }
+
+  // Check permission type
+  switch (config.permission) {
+    case "PermitAll":
+      return true;
+    case "Authenticated":
+      return isAuthenticated;
+    case "Role":
+      if (!isAuthenticated) {
+        return false;
+      }
+
+      // Check if user has any of the required roles
+      var allowedRoles = config.allowedRoles || [];
+      if (allowedRoles.length === 0) {
+        // If no roles specified but permission is Role, deny access
+        return false;
+      }
+      return allowedRoles.some(function (role) {
+        return userRoles.includes(role);
+      });
+    default:
+      // Unknown permission type, deny access for security
+      return false;
+  }
+};
+var useLogin = exports.useLogin = function useLogin() {
+  var dispatch = (0, _store.useAppDispatch)();
+  var _useAppSelector4 = (0, _store.useAppSelector)(function (state) {
+      return state.auth;
+    }),
+    isLoggedIn = _useAppSelector4.isLoggedIn,
+    error = _useAppSelector4.error;
+  var _useState3 = (0, _react.useState)(false),
+    loading = _useState3[0],
+    setLoading = _useState3[1];
+  var _useState4 = (0, _react.useState)(null),
+    loginError = _useState4[0],
+    setLoginError = _useState4[1];
+  var handleLogin = /*#__PURE__*/function () {
+    var _ref8 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee8(options) {
+      return _regenerator["default"].wrap(function _callee8$(_context8) {
+        while (1) switch (_context8.prev = _context8.next) {
+          case 0:
+            setLoading(true);
+            setLoginError(null);
+            _context8.prev = 2;
+            _context8.next = 5;
+            return dispatch((0, _authSlice.login)(options)).unwrap();
+          case 5:
+            return _context8.abrupt("return", true);
+          case 8:
+            _context8.prev = 8;
+            _context8.t0 = _context8["catch"](2);
+            setLoginError(_context8.t0 instanceof Error ? _context8.t0.message : "Login failed");
+            return _context8.abrupt("return", false);
+          case 12:
+            _context8.prev = 12;
+            setLoading(false);
+            return _context8.finish(12);
+          case 15:
+          case "end":
+            return _context8.stop();
+        }
+      }, _callee8, null, [[2, 8, 12, 15]]);
+    }));
+    return function handleLogin(_x6) {
+      return _ref8.apply(this, arguments);
+    };
+  }();
+  return {
+    loading: loading,
+    error: loginError || error,
+    isLoggedIn: isLoggedIn,
+    handleLogin: handleLogin,
+    clearError: function clearError() {
+      return setLoginError(null);
+    }
+  };
+};
+var useLogout = exports.useLogout = function useLogout() {
+  var dispatch = (0, _store.useAppDispatch)();
+  var _useState5 = (0, _react.useState)(false),
+    loading = _useState5[0],
+    setLoading = _useState5[1];
+  var _useState6 = (0, _react.useState)(null),
+    logoutError = _useState6[0],
+    setLogoutError = _useState6[1];
+  var handleLogout = /*#__PURE__*/function () {
+    var _ref9 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee9(baseURL) {
+      return _regenerator["default"].wrap(function _callee9$(_context9) {
+        while (1) switch (_context9.prev = _context9.next) {
+          case 0:
+            setLoading(true);
+            setLogoutError(null);
+            _context9.prev = 2;
+            _context9.next = 5;
+            return dispatch((0, _authSlice.logout)({
+              baseURL: baseURL
+            })).unwrap();
+          case 5:
+            return _context9.abrupt("return", true);
+          case 8:
+            _context9.prev = 8;
+            _context9.t0 = _context9["catch"](2);
+            setLogoutError(_context9.t0 instanceof Error ? _context9.t0.message : "Logout failed");
+            return _context9.abrupt("return", false);
+          case 12:
+            _context9.prev = 12;
+            setLoading(false);
+            return _context9.finish(12);
+          case 15:
+          case "end":
+            return _context9.stop();
+        }
+      }, _callee9, null, [[2, 8, 12, 15]]);
+    }));
+    return function handleLogout(_x7) {
+      return _ref9.apply(this, arguments);
+    };
+  }();
+  return {
+    loading: loading,
+    error: logoutError,
+    handleLogout: handleLogout,
+    clearError: function clearError() {
+      return setLogoutError(null);
+    }
+  };
+};
+var useCurrentUser = exports.useCurrentUser = function useCurrentUser() {
+  var _useAppSelector5 = (0, _store.useAppSelector)(function (state) {
+      return state.auth;
+    }),
+    loggedInUser = _useAppSelector5.loggedInUser,
+    isLoggedIn = _useAppSelector5.isLoggedIn;
+  return {
+    user: loggedInUser,
+    isLoggedIn: isLoggedIn,
+    hasRole: function hasRole(role) {
+      if (!loggedInUser || !loggedInUser.roles) return false;
+      return loggedInUser.roles.includes(role);
+    },
+    hasAnyRole: function hasAnyRole(roles) {
+      if (!loggedInUser || !loggedInUser.roles) return false;
+      return roles.some(function (role) {
+        return loggedInUser.roles.includes(role);
+      });
+    },
+    hasAllRoles: function hasAllRoles(roles) {
+      if (!loggedInUser || !loggedInUser.roles) return false;
+      return roles.every(function (role) {
+        return loggedInUser.roles.includes(role);
+      });
+    }
+  };
+};

package/hooks/useDataSourceSubscription.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDataSourceSubscription = void 0;
+var _react = require("react");
+var _listHelpers = require("../components/data/list/utils/list-helpers");
+var _tableHelpers = require("../components/data/table/utils/table-helpers");
+var _types = require("../components/data/types");
+var _eventNotifier = _interopRequireDefault(require("@wavemaker/react-runtime/core/event-notifier"));
+var _variables = require("@wavemaker/variables");
+// @ts-ignore - Using yalc linked local package
+
+// Create a singleton EventNotifier instance that all components will share
+var sharedEventNotifier = null;
+var getSharedEventNotifier = function getSharedEventNotifier() {
+  if (!sharedEventNotifier) {
+    // Create new EventNotifier only once
+    sharedEventNotifier = new _eventNotifier["default"]();
+    sharedEventNotifier.notify = sharedEventNotifier.notifyApp.bind(sharedEventNotifier);
+    // Set it in the external dependency store (from @wavemaker/variables)
+    (0, _variables.wmSetDependency)("appManager", sharedEventNotifier);
+  }
+  return sharedEventNotifier;
+};
+
+/**
+ * This function accepts two data sources and will check if both are same by comparing the unique id and
+ * context in which datasources are present
+ * @returns {*} boolean true/ false
+ */
+var isDataSourceEqual = function isDataSourceEqual(d1, d2) {
+  return d1.execute(_types.DataSource.Operation.GET_UNIQUE_IDENTIFIER) === d2.execute(_types.DataSource.Operation.GET_UNIQUE_IDENTIFIER);
+  // && isEqual(d1.execute(DataSource.Operation.GET_CONTEXT_IDENTIFIER), d2.execute(DataSource.Operation.GET_CONTEXT_IDENTIFIER));
+};
+
+/**
+ * Hook to subscribe to 'toggle-variable-state' event
+ * Handles state params for pagination when events are fired
+ * Subscription happens only once when datasource and EventNotifier are available
+ */
+var useDataSourceSubscription = exports.useDataSourceSubscription = function useDataSourceSubscription(_ref) {
+  var datasource = _ref.datasource,
+    statehandler = _ref.statehandler,
+    name = _ref.name,
+    onPageRestored = _ref.onPageRestored,
+    _ref$widgetType = _ref.widgetType,
+    widgetType = _ref$widgetType === void 0 ? "list" : _ref$widgetType;
+  var pageLoadRef = (0, _react.useRef)(true); // Track if this is the first page load
+  var unsubscribeRef = (0, _react.useRef)(null);
+
+  // Get the shared EventNotifier instance
+  var eventNotifier = getSharedEventNotifier();
+
+  // Subscribe only once when datasource and EventNotifier become available
+  (0, _react.useMemo)(function () {
+    // Skip if prerequisites not met
+    if (!datasource || !eventNotifier) {
+      return;
+    }
+
+    // Clean up previous subscription if exists
+    if (unsubscribeRef.current) {
+      unsubscribeRef.current();
+      unsubscribeRef.current = null;
+    }
+
+    // Handler for toggle-variable-state event
+    function handleLoading(data) {
+      if (!(data !== null && data !== void 0 && data.variable) && !data.active) {
+        return;
+      }
+      if (datasource && datasource.execute && datasource.execute(_types.DataSource.Operation.IS_API_AWARE) && isDataSourceEqual(data.variable, datasource)) {
+        // Handle state params only on page load (first time)
+        if (pageLoadRef.current && statehandler.toLowerCase() !== "none") {
+          pageLoadRef.current = false; // Mark as handled
+
+          // Use appropriate state getter based on widget type
+          var widgetState = widgetType === "table" ? (0, _tableHelpers.getTableState)(name, statehandler) : (0, _listHelpers.getListState)(name, statehandler);
+          if (widgetState) {
+            // Ensure options object exists
+            data.options = data.options || {};
+
+            // Set page number for server-side pagination
+            data.options.page = widgetState.pagination;
+
+            // Set page size
+            if (widgetState.pagesize) {
+              datasource.maxResults = widgetState.pagesize;
+              data.options.pagesize = widgetState.pagesize;
+            }
+            if (widgetType === "table") {
+              var tableState = widgetState;
+              if (tableState.search && tableState.search.length > 0) {
+                data.options.filterFields = (0, _tableHelpers.convertFilterArrayToObject)(tableState.search);
+              }
+              if (tableState.sort && tableState.sort.field.length > 0) {
+                data.options.orderBy = "".concat(tableState.sort.field, " ").concat(tableState.sort.direction);
+              }
+            }
+
+            // Notify parent component about the restored page
+            if (onPageRestored) {
+              onPageRestored(widgetState.pagination);
+            }
+          }
+        }
+      }
+    }
+
+    // Subscribe to toggle-variable-state event
+    var unsubscribe = eventNotifier.subscribe("toggle-variable-state", handleLoading);
+    unsubscribeRef.current = unsubscribe;
+
+    // Return cleanup function
+    return function () {
+      if (unsubscribeRef.current) {
+        unsubscribeRef.current();
+        unsubscribeRef.current = null;
+      }
+    };
+  }, [datasource, statehandler, name, onPageRestored, widgetType, eventNotifier]);
+};