@xapp/chat-widget 1.96.0 → 1.96.2

package/dist/index.js

@@ -391,8 +391,19 @@ var ActionBarCta = function (_a) {
         }, children: [require$$0.jsx("span", { className: "xapp-action-bar-cta__message", children: message }), dismissible && (require$$0.jsx("button", { className: "xapp-action-bar-cta__dismiss", onClick: handleDismiss, "aria-label": "Dismiss", type: "button", children: require$$0.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: require$$0.jsx("path", { d: "M13 1L1 13M1 1L13 13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }));
 };
 
-var DEFAULT_MOBILE_BREAKPOINT = 768;
-var RESIZE_DEBOUNCE_MS = 150;
+/**
+ * The same query the stylesheets use, as a string rather than a number.
+ *
+ * A bare width could not express this. A phone on its side is 740-863px wide, so any
+ * width-only threshold either excludes landscape phones or catches tablets - #1592 moved
+ * the stylesheets to `(max-width: 640px), (max-height: 480px) and (pointer: coarse)` for
+ * exactly that reason, and a JS constant of 640 or 768 cannot mirror it either way.
+ *
+ * Sharing the query text is what keeps the two halves from drifting: matchMedia evaluates
+ * the identical condition the CSS does, so there is one definition of "phone" and it lives
+ * in `_mixins.scss`. Keep this in step with the `mobile()` mixin. XappMedia/chat-widget#1594.
+ */
+var MOBILE_MEDIA_QUERY = "(max-width: 640px), (max-height: 480px) and (pointer: coarse)";
 /**
  * ChatWidget.scss sizes the chat panel against this variable. Nothing used to set it, so it always
  * fell back to the hardcoded 80px in the SCSS - and the real mobile bar is taller than that once
@@ -405,33 +416,43 @@ var RESIZE_DEBOUNCE_MS = 150;
  */
 var ACTION_BAR_HEIGHT_VAR = "--xapp-action-bar-height";
 var ActionBar = function (_a) {
-    var _b, _c, _d;
-    var config = _a.config, visible = _a.visible, chatDisabled = _a.chatDisabled, _e = _a.hasUserInteracted, hasUserInteracted = _e === void 0 ? false : _e, onChatClick = _a.onChatClick, onChatMinimize = _a.onChatMinimize, onFormClick = _a.onFormClick, onCtaDismiss = _a.onCtaDismiss;
-    var _f = React.useState(false), isMobile = _f[0], setIsMobile = _f[1];
-    var mobileBreakpoint = (_b = config.mobileBreakpoint) !== null && _b !== void 0 ? _b : DEFAULT_MOBILE_BREAKPOINT;
-    var position = (_c = config.position) !== null && _c !== void 0 ? _c : "right";
-    var resizeTimeoutRef = React.useRef(null);
+    var _b, _c;
+    var config = _a.config, visible = _a.visible, chatDisabled = _a.chatDisabled, _d = _a.hasUserInteracted, hasUserInteracted = _d === void 0 ? false : _d, onChatClick = _a.onChatClick, onChatMinimize = _a.onChatMinimize, onFormClick = _a.onFormClick, onCtaDismiss = _a.onCtaDismiss;
+    var _e = React.useState(false), isMobile = _e[0], setIsMobile = _e[1];
+    // An explicit override can only be a width; without one we ask the same question the
+    // stylesheets ask, so the two cannot disagree. A survey of production on 2026-08-19
+    // found the override set by nobody - zero of 971 bundles, against 18 configured
+    // ActionBars - so in practice every bar takes the shared query.
+    // `!= null`, not a truthy check: 0 is a legitimate override meaning "never mobile", and
+    // treating it as unset would hand back the default responsive query - the opposite of
+    // what was asked for.
+    var mediaQuery = config.mobileBreakpoint != null
+        ? "(max-width: ".concat(config.mobileBreakpoint, "px)")
+        : MOBILE_MEDIA_QUERY;
+    var position = (_b = config.position) !== null && _b !== void 0 ? _b : "right";
     var barRef = React.useRef(null);
-    // Debounced resize handler
-    var handleResize = React.useCallback(function () {
-        if (resizeTimeoutRef.current) {
-            window.clearTimeout(resizeTimeoutRef.current);
-        }
-        resizeTimeoutRef.current = window.setTimeout(function () {
-            setIsMobile(window.innerWidth <= mobileBreakpoint);
-        }, RESIZE_DEBOUNCE_MS);
-    }, [mobileBreakpoint]);
     React.useEffect(function () {
-        // Initial check (immediate, not debounced)
-        setIsMobile(window.innerWidth <= mobileBreakpoint);
-        window.addEventListener("resize", handleResize);
-        return function () {
-            window.removeEventListener("resize", handleResize);
-            if (resizeTimeoutRef.current) {
-                window.clearTimeout(resizeTimeoutRef.current);
-            }
+        // matchMedia fires only when the answer actually changes, so there is nothing to
+        // debounce - unlike a resize listener, which fires continuously through a drag.
+        // Guarded because jsdom does not implement matchMedia, and a widget that throws on
+        // mount in a consumer's test suite is a worse failure than one that assumes desktop.
+        if (typeof window.matchMedia !== "function") {
+            return undefined;
+        }
+        var query = window.matchMedia(mediaQuery);
+        setIsMobile(query.matches);
+        var onChange = function (event) {
+            setIsMobile(event.matches);
         };
-    }, [mobileBreakpoint, handleResize]);
+        // addListener is the pre-2021 Safari spelling. Still worth carrying: this widget
+        // runs on whatever browser a customer's visitor brings.
+        if (typeof query.addEventListener === "function") {
+            query.addEventListener("change", onChange);
+            return function () { return query.removeEventListener("change", onChange); };
+        }
+        query.addListener(onChange);
+        return function () { return query.removeListener(onChange); };
+    }, [mediaQuery]);
     // Publish the bar's real height so the chat panel can size around it.
     //
     // useLayoutEffect, not useEffect: this commits before paint, so the panel never gets a
@@ -484,7 +505,7 @@ var ActionBar = function (_a) {
     // - Chat must not be visible (user hasn't opened it)
     // - Chat must not be disabled
     var hasChatButton = config.buttons.some(lib.isActionBarChatButton);
-    var showCta = ((_d = config.cta) === null || _d === void 0 ? void 0 : _d.message) && !visible && !chatDisabled && hasChatButton;
+    var showCta = ((_c = config.cta) === null || _c === void 0 ? void 0 : _c.message) && !visible && !chatDisabled && hasChatButton;
     var handleCtaClick = function () {
         onChatClick();
     };