@pinnacle0/web-ui 0.6.30 → 0.6.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pinnacle0/web-ui",
-  "version": "0.6.30",
+  "version": "0.6.32",
   "author": "Pinnacle",
   "license": "MIT",
   "sideEffects": [

package/util/OrientationUtil/index.d.ts

@@ -1,11 +1,17 @@
 /**
  * Orientation detection utility for mobile and desktop devices.
  *
- * Uses the matchMedia API with orientation media queries, which provides
- * reliable cross-platform support including iOS 26+ where the legacy
- * window.orientation API has been removed since iOS 26+ PWA is not supported.
+ * For Android,
+ * Uses the ScreenOrientation API for checking the orientation of the screen.
+ * For Deprecated browsers, it uses the window.orientation API.
  *
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation
+ *
+ * For iOS 26.0+ PWA, it does not dispatch any event when the orientation changes,
+ * For mobile Safari,
+ * Use media queries to check the orientation of the screen for iOS.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries
  */
 export type OrientationType = "portrait" | "landscape";
 export type Subscriber = (orientation: OrientationType) => void;

package/util/OrientationUtil/index.js

@@ -1,33 +1,50 @@
 /**
  * Orientation detection utility for mobile and desktop devices.
  *
- * Uses the matchMedia API with orientation media queries, which provides
- * reliable cross-platform support including iOS 26+ where the legacy
- * window.orientation API has been removed since iOS 26+ PWA is not supported.
+ * For Android,
+ * Uses the ScreenOrientation API for checking the orientation of the screen.
+ * For Deprecated browsers, it uses the window.orientation API.
  *
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation
+ *
+ * For iOS 26.0+ PWA, it does not dispatch any event when the orientation changes,
+ * For mobile Safari,
+ * Use media queries to check the orientation of the screen for iOS.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries
  */
+import { BrowserUtil } from "../BrowserUtil";
+const supportScreenOrientationAPI = typeof window.screen.orientation !== "undefined";
+// DO NOT USE matchMedia for non-safari browsers, because it can be incorrect if keyboard is popped up
+// Tested on iOS safari: 26.0-15.2
+// See Note from: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation
+const isIOSSafari = BrowserUtil.os() === "ios" && navigator.userAgent.includes("Safari");
 function subscribe(subscriber) {
     const handler = () => subscriber(current());
-    // Use matchMedia for iOS 26+ and other browsers
-    const portraitQuery = window.matchMedia("(orientation: portrait)");
-    const mediaHandler = () => handler();
-    // Use addEventListener for modern browsers, addListener for older ones
-    if (portraitQuery.addEventListener) {
-        portraitQuery.addEventListener("change", mediaHandler);
-        return () => portraitQuery.removeEventListener("change", mediaHandler);
+    if (isIOSSafari) {
+        window.matchMedia("(orientation: portrait)").addEventListener("change", handler);
+        return () => window.matchMedia("(orientation: portrait)").removeEventListener("change", handler);
+    }
+    else if (supportScreenOrientationAPI) {
+        window.screen.orientation.addEventListener("change", handler);
+        return () => window.screen.orientation.removeEventListener("change", handler);
     }
     else {
-        // Fallback for very old browsers
-        portraitQuery.addListener(mediaHandler);
-        return () => portraitQuery.removeListener(mediaHandler);
+        window.addEventListener("orientationchange", handler);
+        return () => window.removeEventListener("orientationchange", handler, false);
     }
 }
 function current() {
     try {
-        // Use matchMedia API for iOS 26+ and other browsers
-        const isPortrait = window.matchMedia("(orientation: portrait)").matches;
-        return isPortrait ? "portrait" : "landscape";
+        if (isIOSSafari) {
+            return window.matchMedia("(orientation: portrait)").matches ? "portrait" : "landscape";
+        }
+        else if (supportScreenOrientationAPI) {
+            return window.screen.orientation.angle === 0 ? "portrait" : "landscape";
+        }
+        else {
+            return window.orientation === 0 ? "portrait" : "landscape";
+        }
     }
     catch {
         // Do not use window.innerHeight/window.innerWidth comparison, because it is incorrect if keyboard is popped up

package/util/OrientationUtil/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/util/OrientationUtil/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH,SAAS,SAAS,CAAC,UAAsB;IACrC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC;IAC5C,gDAAgD;IAChD,MAAM,aAAa,GAAG,MAAM,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC;IACnE,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC;IAErC,uEAAuE;IACvE,IAAI,aAAa,CAAC,gBAAgB,EAAE,CAAC;QACjC,aAAa,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IAC3E,CAAC;SAAM,CAAC;QACJ,iCAAiC;QACjC,aAAa,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QACxC,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IAC5D,CAAC;AACL,CAAC;AAED,SAAS,OAAO;IACZ,IAAI,CAAC;QACD,oDAAoD;QACpD,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC,OAAO,CAAC;QACxE,OAAO,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC;IACjD,CAAC;IAAC,MAAM,CAAC;QACL,+GAA+G;QAC/G,OAAO,UAAU,CAAC;IACtB,CAAC;AACL,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC;IACzC,SAAS;IACT,OAAO;CACV,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/util/OrientationUtil/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAE3C,MAAM,2BAA2B,GAAG,OAAO,MAAM,CAAC,MAAM,CAAC,WAAW,KAAK,WAAW,CAAC;AAMrF,sGAAsG;AACtG,kCAAkC;AAClC,qFAAqF;AACrF,MAAM,WAAW,GAAG,WAAW,CAAC,EAAE,EAAE,KAAK,KAAK,IAAI,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;AAEzF,SAAS,SAAS,CAAC,UAAsB;IACrC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC;IAC5C,IAAI,WAAW,EAAE,CAAC;QACd,MAAM,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QACjF,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IACrG,CAAC;SAAM,IAAI,2BAA2B,EAAE,CAAC;QACrC,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QAC9D,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IAClF,CAAC;SAAM,CAAC;QACJ,MAAM,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,OAAO,CAAC,CAAC;QACtD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;IACjF,CAAC;AACL,CAAC;AAED,SAAS,OAAO;IACZ,IAAI,CAAC;QACD,IAAI,WAAW,EAAE,CAAC;YACd,OAAO,MAAM,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC;QAC3F,CAAC;aAAM,IAAI,2BAA2B,EAAE,CAAC;YACrC,OAAO,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC;QAC5E,CAAC;aAAM,CAAC;YACJ,OAAO,MAAM,CAAC,WAAW,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC;QAC/D,CAAC;IACL,CAAC;IAAC,MAAM,CAAC;QACL,+GAA+G;QAC/G,OAAO,UAAU,CAAC;IACtB,CAAC;AACL,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC;IACzC,SAAS;IACT,OAAO;CACV,CAAC,CAAC"}