@micromag/viewer 0.4.21 → 0.4.23

package/es/index.js

@@ -21,7 +21,7 @@ import { Label, CloseIcon, ScreenPreview, Screen, ArrowIcon, Button as Button$1,
 import { getStyleFromColor, easings, getStyleFromText, getColorAsString, getDeviceScreens } from '@micromag/core/utils';
 import { ShareIncentive } from '@micromag/elements/all';
 import FocusLock from 'react-focus-lock';
-import { useSpring } from '@react-spring/core';
+import { useSpringRef, useSpring } from '@react-spring/core';
 import Scroll from '@micromag/element-scroll';
 import ShareOptions from '@micromag/element-share-options';
 import { useGesture } from '@use-gesture/react';
@@ -600,8 +600,14 @@ function ViewerMenuDot(_ref) {
     primary = _ref2$primary === void 0 ? 'rgba(255, 255, 255, 1)' : _ref2$primary,
     _ref2$secondary = _ref2.secondary,
     secondary = _ref2$secondary === void 0 ? 'rgba(255, 255, 255, 0.25)' : _ref2$secondary;
+
+  // In react-spring v10, useSpring(fn) without deps resets the spring to its initial
+  // value on every render via a layout effect. Passing a dummy SpringRef as `ref`
+  // prevents this, so our imperative setDotSpringProps.start() calls are not overridden.
+  var springRef = useSpringRef();
   var _useSpring = useSpring(function () {
       return {
+        ref: springRef,
         scaleX: 0,
         config: {
           tension: 200,
@@ -2897,6 +2903,34 @@ function Viewer(_ref) {
     progressSpring = _useDragProgress.progress,
     dragContentBind = _useDragProgress.bind,
     transitionDirection = _useDragProgress.direction;
+
+  // Wrap gesture bindings to skip events from clickable elements (buttons, links, inputs).
+  // Without this, @use-gesture captures pointer events at the document level, preventing
+  // native click events from firing on interactive elements inside screens on mobile Safari.
+  var clickableAwareBindings = useMemo(function () {
+    var bindings = dragContentBind({
+      playing: playing,
+      longPressPaused: longPressPaused
+    });
+    var wrapped = {};
+    var _loop = function _loop() {
+      var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+        key = _Object$entries$_i[0],
+        value = _Object$entries$_i[1];
+      if (typeof value === 'function') {
+        wrapped[key] = function (e) {
+          if (checkClickable(e.target)) return;
+          return value(e);
+        };
+      } else {
+        wrapped[key] = value;
+      }
+    };
+    for (var _i = 0, _Object$entries = Object.entries(bindings); _i < _Object$entries.length; _i++) {
+      _loop();
+    }
+    return wrapped;
+  }, [dragContentBind, playing, longPressPaused]);
   var getScreenStylesByIndex = function getScreenStylesByIndex(index, spring) {
     if (transitionType === 'stack') {
       return {
@@ -3220,10 +3254,7 @@ function Viewer(_ref) {
     refDots: menuDotsContainerRef
   }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React.createElement("div", Object.assign({
     className: styles$7.content
-  }, dragContentBind({
-    playing: playing,
-    longPressPaused: longPressPaused
-  })), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex > 0 && screens.length > 1 ? /*#__PURE__*/React.createElement(NavigationButton, {
+  }, clickableAwareBindings), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex > 0 && screens.length > 1 ? /*#__PURE__*/React.createElement(NavigationButton, {
     direction: "previous",
     className: classNames([styles$7.navButton, styles$7.previous]),
     onClick: gotoPreviousScreen,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.4.21",
+    "version": "0.4.23",
     "private": false,
     "description": "",
     "keywords": [
@@ -62,14 +62,14 @@
     "dependencies": {
         "@babel/runtime": "^7.28.6",
         "@folklore/routes": "^0.2.36",
-        "@micromag/core": "^0.4.21",
-        "@micromag/element-badge": "^0.4.21",
-        "@micromag/element-scroll": "^0.4.21",
-        "@micromag/element-share-options": "^0.4.21",
-        "@micromag/element-webview": "^0.4.21",
-        "@micromag/elements": "^0.4.21",
-        "@micromag/intl": "^0.4.21",
-        "@micromag/screens": "^0.4.21",
+        "@micromag/core": "^0.4.23",
+        "@micromag/element-badge": "^0.4.23",
+        "@micromag/element-scroll": "^0.4.23",
+        "@micromag/element-share-options": "^0.4.23",
+        "@micromag/element-webview": "^0.4.23",
+        "@micromag/elements": "^0.4.23",
+        "@micromag/intl": "^0.4.23",
+        "@micromag/screens": "^0.4.23",
         "@react-spring/core": "^10.0.3",
         "@react-spring/web": "^10.0.3",
         "@use-gesture/react": "^10.3.0",
@@ -88,6 +88,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "34dedbdd988f27c395b838b50dfcd0e48bfa16ee",
+    "gitHead": "57c581f5e1758b3d28152f68166cab0468670b92",
     "types": "es/index.d.ts"
 }