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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wavemaker/react-runtime",
-  "version": "11.14.2-1.245",
+  "version": "12.0.0-next.28533",
   "description": "React runtime package for Wavemaker",
   "license": "MIT",
   "repository": {
@@ -24,7 +24,7 @@
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,json,css,scss,md}": [
-      "npm run format"
+      "prettier --write"
     ]
   },
   "dependencies": {
@@ -56,11 +56,11 @@
     "lint-staged": "^16.2.0",
     "lodash-es": "^4.17.21",
     "moment-timezone": "^0.6.0",
-    "next": "15.1.4",
+    "next": "16.1.1",
     "qrcodejs2": "^0.0.2",
-    "react": "^19.0.0",
+    "react": "^19.2.3",
     "react-color": "^2.19.3",
-    "react-dom": "^19.0.0",
+    "react-dom": "^19.2.3",
     "react-hook-form": "^7.58.1",
     "react-redux": "^9.2.0",
     "recharts": "^3.0.2"
@@ -75,10 +75,10 @@
     "@types/js-cookie": "^3.0.6",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20",
-    "@types/react": "^19",
+    "@types/react": "^19.2.8",
     "@types/react-color": "^3.0.13",
-    "@types/react-dom": "^19",
-    "@wavemaker/variables": "11.14.2-1.245",
+    "@types/react-dom": "^19.2.3",
+    "@wavemaker/variables": "12.0.0-next.28533",
     "babel-plugin-module-resolver": "^5.0.2",
     "eslint": "^9",
     "eslint-config-next": "15.1.4",

package/store/bindActions/i18nActions.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.i18nService = void 0;
+var _toolkit = require("@reduxjs/toolkit");
+var _store = require("@wavemaker/react-runtime/store");
+var i18nActions = _interopRequireWildcard(require("../slices/i18nSlice"));
+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 i18nService = exports.i18nService = (0, _toolkit.bindActionCreators)({
+  setTimezone: i18nActions.setTimezone,
+  setAppLocale: i18nActions.setAppLocale,
+  setDateFormat: i18nActions.setDateFormat,
+  setTimeFormat: i18nActions.setTimeFormat,
+  setCurrencyCode: i18nActions.setCurrencyCode
+}, _store.store.dispatch);

package/store/index.js

@@ -11,10 +11,12 @@ var _authSlice = _interopRequireDefault(require("@wavemaker/react-runtime/store/
 var _appConfigSlice = _interopRequireDefault(require("@wavemaker/react-runtime/store/slices/appConfigSlice"));
 var _reactRedux = require("react-redux");
 var _i18nSlice = _interopRequireDefault(require("@wavemaker/react-runtime/store/slices/i18nSlice"));
+var _navigationSlice = _interopRequireDefault(require("@wavemaker/react-runtime/store/slices/navigationSlice"));
 var rootReducer = (0, _toolkit.combineReducers)({
   auth: _authSlice["default"],
   info: _appConfigSlice["default"],
-  i18n: _i18nSlice["default"]
+  i18n: _i18nSlice["default"],
+  navigation: _navigationSlice["default"]
 });
 var store = exports.store = (0, _toolkit.configureStore)({
   reducer: rootReducer,

package/store/slices/appConfigSlice.js

@@ -26,7 +26,7 @@ var getServiceDefinitions = exports.getServiceDefinitions = (0, _toolkit.createA
           dispatch = _ref.dispatch, rejectWithValue = _ref.rejectWithValue;
           _context.prev = 1;
           _context.next = 4;
-          return _axios["default"].get("".concat(baseUrl, "/services/servicedefs"));
+          return _axios["default"].get("".concat(baseUrl !== null && baseUrl !== void 0 ? baseUrl : "", "/services/servicedefs").concat(baseUrl ? "" : ".json"));
         case 4:
           response = _context.sent;
           data = (response === null || response === void 0 ? void 0 : response.data) || {};
@@ -56,7 +56,7 @@ var getPrefabDefinitions = exports.getPrefabDefinitions = (0, _toolkit.createAsy
           prefabName = _ref3.prefabName, baseUrl = _ref3.baseUrl, pages = _ref3.pages;
           dispatch = _ref4.dispatch, rejectWithValue = _ref4.rejectWithValue;
           _context2.prev = 2;
-          url = "".concat(baseUrl, "/services/prefabs/").concat(prefabName, "/servicedefs");
+          url = "".concat(baseUrl !== null && baseUrl !== void 0 ? baseUrl : "", "/services/prefabs/").concat(prefabName, "/servicedefs").concat(baseUrl ? "" : ".json");
           _context2.next = 6;
           return _axios["default"].get(url);
         case 6:

package/store/slices/authSlice.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.setToken = exports.setSecurityConfig = exports.setPageLoading = exports.setLoggedInUser = exports.setLandingPage = exports.setIsLoggedIn = exports.redirectToLogin = exports.navigateToLandingPage = exports.logout = exports.login = exports.loadSecurityInfo = exports.defaultUserState = exports["default"] = exports.clearError = exports.checkAccess = exports.canAccessPage = exports.XSRF_HEADER_NAME = exports.XSRF_COOKIE_NAME = exports.USER_ROLE = exports.SESSION = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _toolkit = require("@reduxjs/toolkit");
 var _axios = _interopRequireDefault(require("axios"));
 var _each = _interopRequireDefault(require("lodash-es/each"));
@@ -48,10 +48,24 @@ var initialState = {
   landingPage: "",
   error: null
 };
+var saveUserInfo = function saveUserInfo(details, dispatch) {
+  var _details$userInfo, _details$userInfo2, _details$userInfo3, _details$userInfo4, _details$userInfo5, _details$userInfo6;
+  var user = {
+    isAuthenticated: Boolean(details.authenticated),
+    isSecurityEnabled: Boolean(details.authenticated),
+    roles: Array.isArray((_details$userInfo = details.userInfo) === null || _details$userInfo === void 0 ? void 0 : _details$userInfo.userRoles) ? details.userInfo.userRoles : [],
+    name: ((_details$userInfo2 = details.userInfo) === null || _details$userInfo2 === void 0 ? void 0 : _details$userInfo2.userName) || "",
+    id: ((_details$userInfo3 = details.userInfo) === null || _details$userInfo3 === void 0 ? void 0 : _details$userInfo3.userId) || "",
+    tenantId: ((_details$userInfo4 = details.userInfo) === null || _details$userInfo4 === void 0 ? void 0 : _details$userInfo4.tenantId) || "",
+    userAttributes: (0, _typeof2["default"])((_details$userInfo5 = details.userInfo) === null || _details$userInfo5 === void 0 ? void 0 : _details$userInfo5.userAttributes) === "object" ? details.userInfo.userAttributes : {},
+    landingPage: ((_details$userInfo6 = details.userInfo) === null || _details$userInfo6 === void 0 ? void 0 : _details$userInfo6.landingPage) || ""
+  };
+  dispatch(setLoggedInUser(user));
+};
 var loadSecurityInfo = exports.loadSecurityInfo = (0, _toolkit.createAsyncThunk)("auth/loadSecurityInfo", /*#__PURE__*/function () {
   var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(baseURL, _ref) {
     var _document;
-    var dispatch, rejectWithValue, pathname, cookieToken, wmXsrfToken, response, details, secConfig, _details$userInfo, _details$userInfo2, _details$userInfo3, _details$userInfo4, _details$userInfo5, _details$userInfo6, _secConfig$loginConfi, router, user, landingPage, loginPage, currentPageName, isOnLoginPage;
+    var dispatch, rejectWithValue, pathname, cookieToken, wmXsrfToken, response, details, secConfig, _secConfig$loginConfi, router, landingPage, loginPage, currentPageName, isOnLoginPage;
     return _regenerator["default"].wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -76,28 +90,18 @@ var loadSecurityInfo = exports.loadSecurityInfo = (0, _toolkit.createAsyncThunk)
           secConfig = details || {};
           secConfig.isSecurityEnabled = !!(details !== null && details !== void 0 && details.securityEnabled);
           if (!(typeof details !== "string" && (!(details !== null && details !== void 0 && details.securityEnabled) || details !== null && details !== void 0 && details.authenticated))) {
-            _context.next = 35;
+            _context.next = 34;
             break;
           }
           if (!(details !== null && details !== void 0 && details.authenticated)) {
-            _context.next = 29;
+            _context.next = 28;
             break;
           }
           router = (0, _navigationMiddleware.getRouterInstance)();
-          user = {
-            isAuthenticated: Boolean(details.authenticated),
-            isSecurityEnabled: Boolean(details.authenticated),
-            roles: Array.isArray((_details$userInfo = details.userInfo) === null || _details$userInfo === void 0 ? void 0 : _details$userInfo.userRoles) ? details.userInfo.userRoles : [],
-            name: ((_details$userInfo2 = details.userInfo) === null || _details$userInfo2 === void 0 ? void 0 : _details$userInfo2.userName) || "",
-            id: ((_details$userInfo3 = details.userInfo) === null || _details$userInfo3 === void 0 ? void 0 : _details$userInfo3.userId) || "",
-            tenantId: ((_details$userInfo4 = details.userInfo) === null || _details$userInfo4 === void 0 ? void 0 : _details$userInfo4.tenantId) || "",
-            userAttributes: (0, _typeof2["default"])((_details$userInfo5 = details.userInfo) === null || _details$userInfo5 === void 0 ? void 0 : _details$userInfo5.userAttributes) === "object" ? details.userInfo.userAttributes : {},
-            landingPage: ((_details$userInfo6 = details.userInfo) === null || _details$userInfo6 === void 0 ? void 0 : _details$userInfo6.landingPage) || ""
-          };
+          saveUserInfo(details, dispatch);
           _context.next = 18;
           return dispatch((0, _appConfigSlice.getServiceDefinitions)(baseURL)).unwrap();
         case 18:
-          dispatch(setLoggedInUser(user));
           dispatch(setIsLoggedIn(true));
           dispatch(setLandingPage(details.userInfo.landingPage));
 
@@ -110,15 +114,16 @@ var loadSecurityInfo = exports.loadSecurityInfo = (0, _toolkit.createAsyncThunk)
           if (router && landingPage && isOnLoginPage) {
             router.push("/".concat(_constants.ROUTING_BASEPATH, "/").concat(landingPage));
           }
-          _context.next = 31;
+          _context.next = 30;
           break;
-        case 29:
-          _context.next = 31;
+        case 28:
+          _context.next = 30;
           return dispatch((0, _appConfigSlice.getServiceDefinitions)(baseURL)).unwrap();
-        case 31:
+        case 30:
           dispatch(setSecurityConfig(secConfig));
           return _context.abrupt("return", Promise.resolve(details));
-        case 35:
+        case 34:
+          saveUserInfo(details, dispatch);
           _context.next = 37;
           return dispatch((0, _appConfigSlice.getServiceDefinitions)(baseURL)).unwrap();
         case 37:
@@ -248,24 +253,22 @@ var logout = exports.logout = (0, _toolkit.createAsyncThunk)("auth/logout", /*#_
           console.error("Logout error:", _context3.t0);
         case 15:
           _context3.prev = 15;
+          _context3.next = 18;
+          return dispatch(loadSecurityInfo(options.baseURL)).unwrap();
+        case 18:
           dispatch(setIsLoggedIn(false));
-          dispatch(setLoggedInUser(null));
           dispatch(setLandingPage(""));
-          dispatch(setSecurityConfig({}));
 
           // Clear access cache when user logs out
           (0, _useAccess.clearAccessCache)();
-          _context3.next = 23;
-          return dispatch(redirectToLogin({})).unwrap();
-        case 23:
           return _context3.finish(15);
-        case 24:
+        case 22:
           return _context3.abrupt("return", Promise.resolve(responseData));
-        case 25:
+        case 23:
         case "end":
           return _context3.stop();
       }
-    }, _callee3, null, [[2, 12, 15, 24]]);
+    }, _callee3, null, [[2, 12, 15, 22]]);
   }));
   return function (_x5, _x6) {
     return _ref6.apply(this, arguments);

package/store/slices/i18nSlice.js

@@ -26,7 +26,7 @@ var initialState = {
   timeFormat: "h:mm:ss a",
   dateTimeFormat: "MMM d, y h:mm:ss a",
   currencyCode: "USD",
-  timezone: "UTC",
+  timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC",
   isLoading: false,
   error: null,
   prefabMessages: {}
@@ -78,7 +78,7 @@ var loadLocaleBundle = exports.loadLocaleBundle = (0, _toolkit.createAsyncThunk)
           locale = localLanguage || _selectedDefaultLang || (0, _lodashEs.intersection)(_acceptLang, _supportedLang)[0] || initialState.defaultSupportedLocale;
           _context.prev = 13;
           url = _store.store.getState().info.appConfig.url;
-          path = "".concat(url + APP_LOCALE_ROOT_PATH, "/").concat(locale, ".json");
+          path = "".concat((url !== null && url !== void 0 ? url : "") + APP_LOCALE_ROOT_PATH, "/").concat(locale, ".json");
           _context.next = 18;
           return _axios["default"].get(path);
         case 18:

package/store/slices/navigationSlice.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setPendingTabSelection = exports.setPendingAccordionExpansion = exports["default"] = exports.clearPendingTabSelection = exports.clearPendingAccordionExpansion = void 0;
+var _toolkit = require("@reduxjs/toolkit");
+var initialState = {
+  pendingAccordionExpansion: null,
+  pendingTabSelection: null
+};
+var navigationSlice = (0, _toolkit.createSlice)({
+  name: "navigation",
+  initialState: initialState,
+  reducers: {
+    setPendingAccordionExpansion: function setPendingAccordionExpansion(state, action) {
+      state.pendingAccordionExpansion = action.payload;
+    },
+    clearPendingAccordionExpansion: function clearPendingAccordionExpansion(state) {
+      state.pendingAccordionExpansion = null;
+    },
+    setPendingTabSelection: function setPendingTabSelection(state, action) {
+      state.pendingTabSelection = action.payload;
+    },
+    clearPendingTabSelection: function clearPendingTabSelection(state) {
+      state.pendingTabSelection = null;
+    }
+  }
+});
+var _navigationSlice$acti = navigationSlice.actions,
+  setPendingAccordionExpansion = exports.setPendingAccordionExpansion = _navigationSlice$acti.setPendingAccordionExpansion,
+  clearPendingAccordionExpansion = exports.clearPendingAccordionExpansion = _navigationSlice$acti.clearPendingAccordionExpansion,
+  setPendingTabSelection = exports.setPendingTabSelection = _navigationSlice$acti.setPendingTabSelection,
+  clearPendingTabSelection = exports.clearPendingTabSelection = _navigationSlice$acti.clearPendingTabSelection;
+var _default = exports["default"] = navigationSlice.reducer;

package/store/viewport.service.js

@@ -0,0 +1,255 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.viewportService = exports.ViewportService = exports.ViewportEvent = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _eventNotifier = _interopRequireDefault(require("../core/event-notifier"));
+var _get = _interopRequireDefault(require("lodash-es/get"));
+var MINIMUM_MOBILE_WIDTH = 480;
+var MINIMUM_TAB_WIDTH = 768;
+var MINIMUM_LARGE_SCREEN_WIDTH = 1200;
+var SCREEN_TYPE = /*#__PURE__*/function (SCREEN_TYPE) {
+  SCREEN_TYPE[SCREEN_TYPE["MOBILE"] = 0] = "MOBILE";
+  SCREEN_TYPE[SCREEN_TYPE["TABLET"] = 1] = "TABLET";
+  SCREEN_TYPE[SCREEN_TYPE["LARGE_SCREEN_DEVICES"] = 2] = "LARGE_SCREEN_DEVICES";
+  return SCREEN_TYPE;
+}(SCREEN_TYPE || {});
+var ViewportEvent = exports.ViewportEvent = /*#__PURE__*/function (ViewportEvent) {
+  ViewportEvent["ORIENTATION_CHANGE"] = "orientationchange";
+  ViewportEvent["RESIZE"] = "resize";
+  return ViewportEvent;
+}({});
+var isAndroid = function isAndroid() {
+  if (typeof navigator === "undefined") return false;
+  return /Android/i.test(navigator.userAgent);
+};
+var isAndroidTablet = function isAndroidTablet() {
+  if (typeof navigator === "undefined") return false;
+  return /android|android 3.0|xoom|sch-i800|playbook|tablet|kindle/i.test(navigator.userAgent);
+};
+var isIos = function isIos() {
+  if (typeof navigator === "undefined") return false;
+  return /iPad|iPhone|iPod/.test(navigator.userAgent);
+};
+var ViewportService = exports.ViewportService = /*#__PURE__*/function () {
+  function ViewportService() {
+    var _this = this;
+    (0, _classCallCheck2["default"])(this, ViewportService);
+    (0, _defineProperty2["default"])(this, "orientation", {
+      isPortrait: false,
+      isLandscape: false
+    });
+    (0, _defineProperty2["default"])(this, "isMobileType", false);
+    (0, _defineProperty2["default"])(this, "isTabletType", false);
+    (0, _defineProperty2["default"])(this, "type", void 0);
+    (0, _defineProperty2["default"])(this, "_eventNotifier", new _eventNotifier["default"]());
+    (0, _defineProperty2["default"])(this, "screenWidth", 0);
+    (0, _defineProperty2["default"])(this, "screenHeight", 0);
+    (0, _defineProperty2["default"])(this, "selectedViewPort", void 0);
+    (0, _defineProperty2["default"])(this, "boundResizeFn", null);
+    if (typeof window === "undefined") return;
+    this.setScreenType();
+    this.boundResizeFn = this.resizeFn.bind(this);
+    window.addEventListener(ViewportEvent.RESIZE, this.boundResizeFn);
+    var query = window.matchMedia("(orientation: portrait)");
+    if (query.matches) {
+      this.orientation.isPortrait = true;
+    } else {
+      this.orientation.isLandscape = true;
+    }
+
+    // Add a media query change listener
+    // addEventListener is not supported ios browser
+    if (query.addEventListener) {
+      query.addEventListener("change", function ($event) {
+        return _this.orientationChange($event, !$event.matches);
+      });
+    } else if (query.addListener) {
+      query.addListener(function ($event) {
+        return _this.orientationChange($event, !$event.matches);
+      });
+    }
+  }
+  return (0, _createClass2["default"])(ViewportService, [{
+    key: "update",
+    value: function update(selectedViewPort) {
+      this.selectedViewPort = selectedViewPort;
+      this.setScreenType();
+    }
+  }, {
+    key: "orientationChange",
+    value: function orientationChange($event, isLandscape) {
+      if (isLandscape !== this.orientation.isLandscape) {
+        this.orientation.isPortrait = !isLandscape;
+        this.orientation.isLandscape = isLandscape;
+        this.notify(ViewportEvent.ORIENTATION_CHANGE, {
+          $event: $event,
+          data: {
+            isPortrait: !isLandscape,
+            isLandscape: isLandscape
+          }
+        });
+      }
+    }
+  }, {
+    key: "resizeFn",
+    value: function resizeFn($event) {
+      var $el = document.querySelector(".wm-app");
+      if (!$el) {
+        return;
+      }
+      this.setScreenType();
+      this.orientationChange($event, this.screenWidth >= this.screenHeight);
+      this.notify(ViewportEvent.RESIZE, {
+        $event: $event,
+        data: {
+          screenWidth: this.screenWidth,
+          screenHeight: this.screenHeight
+        }
+      });
+    }
+  }, {
+    key: "subscribe",
+    value: function subscribe(eventName, callback) {
+      return this._eventNotifier.subscribe(eventName, callback);
+    }
+  }, {
+    key: "notify",
+    value: function notify(eventName) {
+      for (var _len = arguments.length, data = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        data[_key - 1] = arguments[_key];
+      }
+      this._eventNotifier.notify(eventName, data);
+    }
+  }, {
+    key: "setScreenType",
+    value: function setScreenType() {
+      if (typeof window === "undefined") {
+        return;
+      }
+      var $el = document.querySelector(".wm-app");
+      if (!$el) return;
+      this.screenWidth = $el.clientWidth;
+      this.screenHeight = $el.clientHeight;
+      this.isTabletType = false;
+      this.isMobileType = false;
+      if ((0, _get["default"])(this.selectedViewPort, "deviceCategory")) {
+        var deviceCategory = this.selectedViewPort.deviceCategory;
+        if (deviceCategory === "Tab") {
+          this.isTabletType = true;
+        } else if (deviceCategory === "Smartphone") {
+          this.isMobileType = true;
+        }
+      } else {
+        MINIMUM_MOBILE_WIDTH = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--screen-xs")) || 480;
+        MINIMUM_TAB_WIDTH = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--screen-sm")) || 768;
+        MINIMUM_LARGE_SCREEN_WIDTH = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--screen-lg")) || 1200;
+        if (this.screenWidth >= MINIMUM_LARGE_SCREEN_WIDTH) {
+          this.isTabletType = isAndroid() || isIos() || isAndroidTablet();
+          this.isMobileType = false;
+        } else if (this.screenWidth >= MINIMUM_TAB_WIDTH) {
+          this.type = SCREEN_TYPE.TABLET;
+          this.isTabletType = true;
+        } else {
+          this.type = SCREEN_TYPE.MOBILE;
+          this.isMobileType = true;
+        }
+      }
+    }
+  }, {
+    key: "getViewport",
+    value: function getViewport() {
+      return {
+        screenWidth: this.screenWidth,
+        screenHeight: this.screenHeight,
+        windowWidth: typeof window !== "undefined" ? window.innerWidth : 0,
+        windowHeight: typeof window !== "undefined" ? window.innerHeight : 0,
+        isMobile: this.isMobileType,
+        isTablet: this.isTabletType,
+        isDesktop: !this.isMobileType && !this.isTabletType,
+        orientation: this.orientation
+      };
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this._eventNotifier.destroy();
+      if (typeof window !== "undefined" && this.boundResizeFn) {
+        window.removeEventListener("resize", this.boundResizeFn);
+      }
+    }
+  }]);
+}(); // Lazy singleton initialization - only create instance when first accessed
+var viewportServiceInstance = null;
+
+// SSR-safe stub that matches ViewportService interface
+var createSSRStub = function createSSRStub() {
+  var stub = {
+    orientation: {
+      isPortrait: false,
+      isLandscape: false
+    },
+    isMobileType: false,
+    isTabletType: false,
+    type: undefined,
+    _eventNotifier: new _eventNotifier["default"](),
+    screenWidth: 0,
+    screenHeight: 0,
+    selectedViewPort: undefined,
+    boundResizeFn: null,
+    subscribe: function subscribe() {
+      return function () {};
+    },
+    notify: function notify() {},
+    update: function update() {},
+    getViewport: function getViewport() {
+      return {
+        screenWidth: 0,
+        screenHeight: 0,
+        windowWidth: 0,
+        windowHeight: 0,
+        isMobile: false,
+        isTablet: false,
+        isDesktop: true,
+        orientation: {
+          isPortrait: false,
+          isLandscape: false
+        }
+      };
+    },
+    destroy: function destroy() {}
+  };
+  return stub;
+};
+function getViewportService() {
+  if (typeof window === "undefined") {
+    // During SSR, return stub without creating real instance
+    if (!viewportServiceInstance) {
+      viewportServiceInstance = createSSRStub();
+    }
+    return viewportServiceInstance;
+  }
+  if (!viewportServiceInstance) {
+    viewportServiceInstance = new ViewportService();
+  }
+  return viewportServiceInstance;
+}
+
+// Export singleton instance with lazy initialization using Proxy
+var viewportService = exports.viewportService = new Proxy({}, {
+  get: function get(_target, prop) {
+    var service = getViewportService();
+    var value = service[prop];
+    // Bind methods to maintain correct 'this' context
+    if (typeof value === "function") {
+      return value.bind(service);
+    }
+    return value;
+  }
+});

package/utils/attr.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeInvalidAttributes = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var removeInvalidAttributes = exports.removeInvalidAttributes = function removeInvalidAttributes(attributes, explicitRemoveAttributes) {
+  var filteredAttributes = {};
+  Object.keys(attributes).forEach(function (key) {
+    if (explicitRemoveAttributes !== null && explicitRemoveAttributes !== void 0 && explicitRemoveAttributes.includes(key)) {
+      return;
+    }
+    var value = attributes[key];
+    if (Array.isArray(value) || (0, _typeof2["default"])(value) === "object" && value !== null) {
+      return;
+    }
+    if (typeof value === "string") {
+      var trimmed = value.trim();
+      if (trimmed.startsWith("{") && trimmed.endsWith("}") || trimmed.startsWith("[") && trimmed.endsWith("]")) {
+        try {
+          var parsed = JSON.parse(value);
+          if ((0, _typeof2["default"])(parsed) === "object" && parsed !== null) {
+            return;
+          }
+        } catch (e) {
+          // invalid json, ignore
+        }
+      }
+    }
+    filteredAttributes[key] = value;
+  });
+  return filteredAttributes;
+};

package/utils/dataset-util.js

@@ -12,7 +12,7 @@ var DatasetUtil = exports["default"] = /*#__PURE__*/function () {
   function DatasetUtil() {
     (0, _classCallCheck2["default"])(this, DatasetUtil);
   }
-  (0, _createClass2["default"])(DatasetUtil, null, [{
+  return (0, _createClass2["default"])(DatasetUtil, null, [{
     key: "isValidDataset",
     value: function isValidDataset(dataSet, isList) {
       if (!dataSet || isList && !(0, _lodashEs.isArray)(dataSet)) {
@@ -170,5 +170,4 @@ var DatasetUtil = exports["default"] = /*#__PURE__*/function () {
       return isList ? dataSet.length : Object.keys(dataSet).length;
     }
   }]);
-  return DatasetUtil;
 }();