@razorpay/blade 10.19.0 → 10.19.1

package/build/components/index.production.web.js

@@ -37522,9 +37522,8 @@ var TourPopover = function TourPopover(_ref) {
   var click = useClick(context, {
     enabled: !isControlled
   });
-  var dismiss = useDismiss(context);
   var role = useRole(context);
-  var _useInteractions = useInteractions([click, dismiss, role]),
+  var _useInteractions = useInteractions([click, role]),
     getFloatingProps = _useInteractions.getFloatingProps;
   var contextValue = React__default.useMemo(function () {
     return {
@@ -37600,17 +37599,21 @@ function useDelayedState(initialState, delay) {
   var _React$useState = React__default.useState(initialState),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     delayedState = _React$useState2[0],
-    setDelayedState = _React$useState2[1];
+    _setDelayedState = _React$useState2[1];
   var timeoutRef = React__default.useRef(undefined);
   React__default.useEffect(function () {
     timeoutRef.current = window.setTimeout(function () {
-      setDelayedState(initialState);
+      _setDelayedState(initialState);
     }, delay);
     return function () {
       window.clearTimeout(timeoutRef.current);
     };
   }, [delay, initialState]);
-  return delayedState;
+  var setDelayedState = React__default.useCallback(function (newState) {
+    _setDelayedState(newState);
+    window.clearTimeout(timeoutRef.current);
+  }, []);
+  return [delayedState, setDelayedState];
 }
 
 /**
@@ -37874,10 +37877,19 @@ var SpotlightPopoverTour = function SpotlightPopoverTour(_ref) {
     setSize = _useState4[1];
 
   // delayed state is used to let the transition finish before reacting to the state changes
-  var delayedActiveStep = useDelayedState(activeStep, transitionDelay);
-  var delayedSize = useDelayedState(size, transitionDelay);
+  var _useDelayedState = useDelayedState(activeStep, transitionDelay),
+    _useDelayedState2 = _slicedToArray(_useDelayedState, 1),
+    delayedActiveStep = _useDelayedState2[0];
+  var _useDelayedState3 = useDelayedState(size, transitionDelay),
+    _useDelayedState4 = _slicedToArray(_useDelayedState3, 2),
+    delayedSize = _useDelayedState4[0],
+    setDelayedSize = _useDelayedState4[1];
   // keep track of when we are transitioning between steps
   var isTransitioning = useIsTransitioningBetweenSteps(activeStep, transitionDelay);
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isScrolling = _useState6[0],
+    setIsScrolling = _useState6[1];
   var currentStepRef = refIdMap.get((_steps$activeStep = steps[activeStep]) === null || _steps$activeStep === void 0 ? void 0 : _steps$activeStep.name);
   var intersection = useIntersectionObserver(currentStepRef, {
     threshold: 0.5
@@ -37924,6 +37936,7 @@ var SpotlightPopoverTour = function SpotlightPopoverTour(_ref) {
   }, []);
   var updateMaskSize = useCallback(function () {
     var _steps$activeStep2;
+    var shouldSkipDelay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     var ref = refIdMap.get((_steps$activeStep2 = steps[activeStep]) === null || _steps$activeStep2 === void 0 ? void 0 : _steps$activeStep2.name);
     if (!(ref !== null && ref !== void 0 && ref.current)) return;
     var rect = ref.current.getBoundingClientRect();
@@ -37933,7 +37946,15 @@ var SpotlightPopoverTour = function SpotlightPopoverTour(_ref) {
       width: rect.width,
       height: rect.height
     });
-  }, [activeStep, refIdMap, steps]);
+    if (shouldSkipDelay) {
+      setDelayedSize({
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height
+      });
+    }
+  }, [activeStep, refIdMap, setDelayedSize, steps]);
   var scrollToStep = useCallback(function () {
     var _steps$delayedActiveS;
     var ref = refIdMap.get((_steps$delayedActiveS = steps[delayedActiveStep]) === null || _steps$delayedActiveS === void 0 ? void 0 : _steps$delayedActiveS.name);
@@ -37941,36 +37962,42 @@ var SpotlightPopoverTour = function SpotlightPopoverTour(_ref) {
 
     // If the element is already in view, don't scroll
     if (intersection !== null && intersection !== void 0 && intersection.isIntersecting) return;
+    setIsScrolling(true);
     smoothScroll(ref.current, {
       behavior: 'smooth',
       block: 'center',
       inline: 'center'
     }).then(function () {
-      updateMaskSize();
+      // wait for the scroll to finish before updating the mask size
+      // We also don't want to delay the size update since its already delayed by the scroll
+      updateMaskSize(true);
     })["finally"](function () {
-      // do nothing
+      setIsScrolling(false);
     });
   }, [delayedActiveStep, refIdMap, steps, updateMaskSize, intersection === null || intersection === void 0 ? void 0 : intersection.isIntersecting]);
 
   // Update the size of the mask when the active step changes
   useIsomorphicLayoutEffect(function () {
     updateMaskSize();
-  }, [isOpen, activeStep, refIdMap, steps, updateMaskSize]);
+  }, [activeStep, updateMaskSize]);
 
   // Scroll into view when the active step changes
   useIsomorphicLayoutEffect(function () {
+    // We need to wait for the transition to finish before scrolling
+    // Otherwise the browser sometimes interrupts the scroll
+    var scrollDelay = 100;
     setTimeout(function () {
       if (!isOpen) return;
       if (isTransitioning) return;
       scrollToStep();
-    }, transitionDelay);
+    }, scrollDelay);
   }, [isOpen, scrollToStep, isTransitioning]);
-  useLockBodyScroll(isOpen);
 
   // reset the mask size when the tour is closed
-  React__default.useEffect(function () {
+  useIsomorphicLayoutEffect(function () {
     if (isOpen) {
-      updateMaskSize();
+      // on initial mount, we don't want to delay the size update
+      updateMaskSize(true);
       onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange({
         isOpen: isOpen
       });
@@ -37985,6 +38012,7 @@ var SpotlightPopoverTour = function SpotlightPopoverTour(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);
+  useLockBodyScroll(isOpen);
   var contextValue = useMemo(function () {
     return {
       attachStep: attachStep,
@@ -37995,7 +38023,7 @@ var SpotlightPopoverTour = function SpotlightPopoverTour(_ref) {
     value: contextValue,
     children: [/*#__PURE__*/jsx$1(FloatingPortal, {
       children: isOpen ? /*#__PURE__*/jsx$1(SpotlightPopoverTourMask, {
-        isTransitioning: isTransitioning,
+        isTransitioning: isTransitioning || isScrolling,
         padding: theme.spacing[4],
         size: delayedSize
       }) : null