@pinnacle0/web-ui 0.6.30 → 0.6.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pinnacle0/web-ui",
-  "version": "0.6.30",
+  "version": "0.6.31",
   "author": "Pinnacle",
   "license": "MIT",
   "sideEffects": [
@@ -46,8 +46,8 @@
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-router-dom": "5.3.0",
-    "@pinnacle0/devtool-util": "1.3.6",
-    "@pinnacle0/webpack-util": "0.8.18"
+    "@pinnacle0/webpack-util": "0.8.18",
+    "@pinnacle0/devtool-util": "1.3.6"
   },
   "exports": {
     "./core/*": {

package/util/OrientationUtil/index.d.ts

@@ -1,11 +1,14 @@
 /**
  * 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.
+ * 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
+ * For iOS 26.0+ PWA, it does not dispatch any event when the orientation changes,
+ * so we need to use media queries to check the orientation of the screen.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation
+ * @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.
+ * 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
+ * For iOS 26.0+ PWA, it does not dispatch any event when the orientation changes,
+ * so we need to use media queries to check the orientation of the screen.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation
+ * @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";
+// TODO: Need to check if iOS 26.0+ PWA bug is fixed in the future.
+//
+// Cannot use userAgent to check because it freeze at iOS 26.
+// ref: https://www.kochava.com/blog/ios-26-apple-freezes-os-version/
+// "notation" is a new option in Intl.PluralRules.prototype.resolvedOptions() in iOS 26.
+// https://webkit.org/blog/17333/webkit-features-in-safari-26-0/#web-api
+const isIOS26PWA = BrowserUtil.os() === "ios" && "notation" in new Intl.PluralRules().resolvedOptions() && "standalone" in window.navigator && window.navigator.standalone;
 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 (isIOS26PWA) {
+        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 (isIOS26PWA) {
+            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;;;;;;;;;;;GAWG;AAEH,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAE3C,MAAM,2BAA2B,GAAG,OAAO,MAAM,CAAC,MAAM,CAAC,WAAW,KAAK,WAAW,CAAC;AAErF,mEAAmE;AACnE,EAAE;AACF,6DAA6D;AAC7D,qEAAqE;AACrE,wFAAwF;AACxF,wEAAwE;AACxE,MAAM,UAAU,GAAG,WAAW,CAAC,EAAE,EAAE,KAAK,KAAK,IAAI,UAAU,IAAI,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC,eAAe,EAAE,IAAI,YAAY,IAAI,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC;AAM3K,SAAS,SAAS,CAAC,UAAsB;IACrC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC;IAC5C,IAAI,UAAU,EAAE,CAAC;QACb,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,UAAU,EAAE,CAAC;YACb,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"}