@matthesketh/react-guidetour 1.0.0 → 1.1.0

package/README.md

@@ -1,4 +1,4 @@
-# @wrxck/react-guidetour
+# @matthesketh/react-guidetour
 
 React 19 guided tour component. A modernised fork of [react-joyride](https://github.com/gilbarbara/react-joyride) by Gil Barbara.
 
@@ -14,7 +14,7 @@ react-joyride v2.9.3 uses `ReactDOM.unmountComponentAtNode()` and `ReactDOM.unst
 ## Install
 
 ```bash
-npm install @wrxck/react-guidetour
+npm install @matthesketh/react-guidetour
 ```
 
 ## Usage
@@ -22,7 +22,7 @@ npm install @wrxck/react-guidetour
 The API is the same as react-joyride. See the [react-joyride documentation](https://docs.react-joyride.com/) for full usage details.
 
 ```tsx
-import Joyride from '@wrxck/react-guidetour';
+import Joyride from '@matthesketh/react-guidetour';
 
 const steps = [
   {

package/dist/index.d.mts

@@ -1,7 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { CSSProperties, ReactNode, ElementType, MouseEventHandler, RefCallback } from 'react';
-import { Styles as Styles$1, Props as Props$1 } from 'react-floater';
-export { Props as FloaterProps } from 'react-floater';
 import { ValueOf, Simplify, SetRequired, PartialDeep } from 'type-fest';
 
 declare const ACTIONS: {
@@ -119,9 +117,6 @@ interface Styles {
     tooltipFooterSpacer: CSSProperties;
     tooltipTitle: CSSProperties;
 }
-interface StylesWithFloaterStyles extends Styles {
-    floaterStyles: Styles$1;
-}
 interface StylesOptions {
     arrowColor: string;
     backgroundColor: string;
@@ -135,10 +130,7 @@ interface StylesOptions {
 }
 
 type Listener = (state: State) => void;
-type PopperData = any;
 declare class Store {
-    private beaconPopper;
-    private tooltipPopper;
     private data;
     private listener;
     private store;
@@ -151,9 +143,6 @@ declare class Store {
     addListener: (listener: Listener) => void;
     setSteps: (steps: Array<Step>) => void;
     getHelpers(): StoreHelpers;
-    getPopper: (name: "beacon" | "tooltip") => PopperData | null;
-    setPopper: (name: "beacon" | "tooltip", popper: PopperData) => void;
-    cleanupPoppers: () => void;
     close: (origin?: Origin | null) => void;
     go: (nextIndex: number) => void;
     info: () => State;
@@ -198,10 +187,6 @@ type BaseProps = {
      * @default false
      */
     disableScrolling?: boolean;
-    /**
-     * Options to be passed to react-floater
-     */
-    floaterProps?: Partial<Props$1>;
     /**
      * Hide the Back button.
      * @default false
@@ -383,10 +368,6 @@ type Step = Simplify<BaseProps & {
      * @default click
      */
     event?: 'click' | 'hover';
-    /**
-     * Options to be passed to react-floater
-     */
-    floaterProps?: Props$1;
     /**
      * Hide the tooltip's footer.
      * @default false
@@ -493,4 +474,4 @@ type TooltipRenderProps = Simplify<BeaconRenderProps & {
 
 declare function Joyride(inputProps: Props): react_jsx_runtime.JSX.Element | null;
 
-export { ACTIONS, type Actions, type AnyObject, type BaseProps, type BeaconProps, type BeaconRenderProps, type CallBackProps, type Callback, EVENTS, type Events, LIFECYCLE, type Lifecycle, type Locale, type NarrowPlainObject, ORIGIN, type Origin, type OverlayProps, type Placement, type Props, STATUS, type State, type Status, type Step, type StepMerged, type StepProps, type StoreHelpers, type StoreOptions, type Styles, type StylesOptions, type StylesWithFloaterStyles, type TooltipProps, type TooltipRenderProps, Joyride as default };
+export { ACTIONS, type Actions, type AnyObject, type BaseProps, type BeaconProps, type BeaconRenderProps, type CallBackProps, type Callback, EVENTS, type Events, LIFECYCLE, type Lifecycle, type Locale, type NarrowPlainObject, ORIGIN, type Origin, type OverlayProps, type Placement, type Props, STATUS, type State, type Status, type Step, type StepMerged, type StepProps, type StoreHelpers, type StoreOptions, type Styles, type StylesOptions, type TooltipProps, type TooltipRenderProps, Joyride as default };

package/dist/index.d.ts

@@ -1,7 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { CSSProperties, ReactNode, ElementType, MouseEventHandler, RefCallback } from 'react';
-import { Styles as Styles$1, Props as Props$1 } from 'react-floater';
-export { Props as FloaterProps } from 'react-floater';
 import { ValueOf, Simplify, SetRequired, PartialDeep } from 'type-fest';
 
 declare const ACTIONS: {
@@ -119,9 +117,6 @@ interface Styles {
     tooltipFooterSpacer: CSSProperties;
     tooltipTitle: CSSProperties;
 }
-interface StylesWithFloaterStyles extends Styles {
-    floaterStyles: Styles$1;
-}
 interface StylesOptions {
     arrowColor: string;
     backgroundColor: string;
@@ -135,10 +130,7 @@ interface StylesOptions {
 }
 
 type Listener = (state: State) => void;
-type PopperData = any;
 declare class Store {
-    private beaconPopper;
-    private tooltipPopper;
     private data;
     private listener;
     private store;
@@ -151,9 +143,6 @@ declare class Store {
     addListener: (listener: Listener) => void;
     setSteps: (steps: Array<Step>) => void;
     getHelpers(): StoreHelpers;
-    getPopper: (name: "beacon" | "tooltip") => PopperData | null;
-    setPopper: (name: "beacon" | "tooltip", popper: PopperData) => void;
-    cleanupPoppers: () => void;
     close: (origin?: Origin | null) => void;
     go: (nextIndex: number) => void;
     info: () => State;
@@ -198,10 +187,6 @@ type BaseProps = {
      * @default false
      */
     disableScrolling?: boolean;
-    /**
-     * Options to be passed to react-floater
-     */
-    floaterProps?: Partial<Props$1>;
     /**
      * Hide the Back button.
      * @default false
@@ -383,10 +368,6 @@ type Step = Simplify<BaseProps & {
      * @default click
      */
     event?: 'click' | 'hover';
-    /**
-     * Options to be passed to react-floater
-     */
-    floaterProps?: Props$1;
     /**
      * Hide the tooltip's footer.
      * @default false
@@ -493,4 +474,4 @@ type TooltipRenderProps = Simplify<BeaconRenderProps & {
 
 declare function Joyride(inputProps: Props): react_jsx_runtime.JSX.Element | null;
 
-export { ACTIONS, type Actions, type AnyObject, type BaseProps, type BeaconProps, type BeaconRenderProps, type CallBackProps, type Callback, EVENTS, type Events, LIFECYCLE, type Lifecycle, type Locale, type NarrowPlainObject, ORIGIN, type Origin, type OverlayProps, type Placement, type Props, STATUS, type State, type Status, type Step, type StepMerged, type StepProps, type StoreHelpers, type StoreOptions, type Styles, type StylesOptions, type StylesWithFloaterStyles, type TooltipProps, type TooltipRenderProps, Joyride as default };
+export { ACTIONS, type Actions, type AnyObject, type BaseProps, type BeaconProps, type BeaconRenderProps, type CallBackProps, type Callback, EVENTS, type Events, LIFECYCLE, type Lifecycle, type Locale, type NarrowPlainObject, ORIGIN, type Origin, type OverlayProps, type Placement, type Props, STATUS, type State, type Status, type Step, type StepMerged, type StepProps, type StoreHelpers, type StoreOptions, type Styles, type StylesOptions, type TooltipProps, type TooltipRenderProps, Joyride as default };

package/dist/index.js

@@ -89,7 +89,7 @@ var STATUS = {
 };
 
 // src/components/index.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_deep_equal = __toESM(require("@gilbarbara/deep-equal"));
 var import_is_lite6 = __toESM(require("is-lite"));
 var import_tree_changes3 = __toESM(require("tree-changes"));
@@ -420,12 +420,6 @@ var import_deepmerge2 = __toESM(require("deepmerge"));
 var import_is_lite2 = __toESM(require("is-lite"));
 
 // src/defaults.ts
-var defaultFloaterProps = {
-  wrapperOptions: {
-    offset: -18,
-    position: true
-  }
-};
 var defaultLocale = {
   back: "Back",
   close: "Close",
@@ -505,10 +499,9 @@ var spotlight = {
   position: "absolute"
 };
 function getStyles(props, step) {
-  var _a, _b, _c, _d, _e;
-  const { floaterProps, styles } = props;
-  const mergedFloaterProps = (0, import_deepmerge.default)((_a = step.floaterProps) != null ? _a : {}, floaterProps != null ? floaterProps : {});
-  const mergedStyles = (0, import_deepmerge.default)(styles != null ? styles : {}, (_b = step.styles) != null ? _b : {});
+  var _a;
+  const { styles } = props;
+  const mergedStyles = (0, import_deepmerge.default)(styles != null ? styles : {}, (_a = step.styles) != null ? _a : {});
   const options = (0, import_deepmerge.default)(defaultOptions, mergedStyles.options || {});
   const hideBeacon2 = step.placement === "center" || step.disableBeacon;
   let { width } = options;
@@ -642,14 +635,6 @@ function getStyles(props, step) {
       ...spotlight,
       boxShadow: `0 0 0 9999px ${options.overlayColor}, ${options.spotlightShadow}`
     },
-    floaterStyles: {
-      arrow: {
-        color: (_e = (_d = (_c = mergedFloaterProps == null ? void 0 : mergedFloaterProps.styles) == null ? void 0 : _c.arrow) == null ? void 0 : _d.color) != null ? _e : options.arrowColor
-      },
-      options: {
-        zIndex: options.zIndex + 100
-      }
-    },
     options
   };
   return (0, import_deepmerge.default)(defaultStyles, mergedStyles);
@@ -665,7 +650,6 @@ function getTourProps(props) {
     "disableOverlayClose",
     "disableScrolling",
     "disableScrollParentFix",
-    "floaterProps",
     "hideBackButton",
     "hideCloseButton",
     "locale",
@@ -678,38 +662,16 @@ function getTourProps(props) {
   );
 }
 function getMergedStep(props, currentStep) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a;
   const step = currentStep != null ? currentStep : {};
   const mergedStep = import_deepmerge2.default.all([defaultStep, getTourProps(props), step], {
     isMergeableObject: import_is_lite2.default.plainObject
   });
   const mergedStyles = getStyles(props, mergedStep);
-  const scrollParent2 = hasCustomScrollParent(
-    getElement(mergedStep.target),
-    mergedStep.disableScrollParentFix
-  );
-  const floaterProps = import_deepmerge2.default.all([
-    defaultFloaterProps,
-    (_a = props.floaterProps) != null ? _a : {},
-    (_b = mergedStep.floaterProps) != null ? _b : {}
-  ]);
-  floaterProps.offset = mergedStep.offset;
-  floaterProps.styles = (0, import_deepmerge2.default)((_c = floaterProps.styles) != null ? _c : {}, mergedStyles.floaterStyles);
-  floaterProps.offset += (_e = (_d = props.spotlightPadding) != null ? _d : mergedStep.spotlightPadding) != null ? _e : 0;
-  if (mergedStep.placementBeacon && floaterProps.wrapperOptions) {
-    floaterProps.wrapperOptions.placement = mergedStep.placementBeacon;
-  }
-  if (scrollParent2 && ((_f = floaterProps.modifiers) == null ? void 0 : _f.preventOverflow)) {
-    floaterProps.modifiers.preventOverflow.options = {
-      ...floaterProps.modifiers.preventOverflow.options,
-      boundary: "window"
-    };
-  }
   return {
     ...mergedStep,
-    locale: import_deepmerge2.default.all([defaultLocale, (_g = props.locale) != null ? _g : {}, mergedStep.locale || {}]),
-    floaterProps,
-    styles: omit(mergedStyles, "floaterStyles")
+    locale: import_deepmerge2.default.all([defaultLocale, (_a = props.locale) != null ? _a : {}, mergedStep.locale || {}]),
+    styles: mergedStyles
   };
 }
 function validateStep(step, debug = false) {
@@ -777,23 +739,6 @@ var Store = class {
       }
       this.setState(state);
     };
-    this.getPopper = (name) => {
-      if (name === "beacon") {
-        return this.beaconPopper;
-      }
-      return this.tooltipPopper;
-    };
-    this.setPopper = (name, popper) => {
-      if (name === "beacon") {
-        this.beaconPopper = popper;
-      } else {
-        this.tooltipPopper = popper;
-      }
-    };
-    this.cleanupPoppers = () => {
-      this.beaconPopper = null;
-      this.tooltipPopper = null;
-    };
     this.close = (origin = null) => {
       const { index, status } = this.getState();
       if (status !== STATUS.RUNNING) {
@@ -914,8 +859,6 @@ var Store = class {
       },
       true
     );
-    this.beaconPopper = null;
-    this.tooltipPopper = null;
     this.listener = null;
     this.setSteps(steps);
   }
@@ -1224,7 +1167,7 @@ function JoyridePortal({ children, id }) {
 
 // src/components/Step.tsx
 var import_react5 = require("react");
-var import_react_floater = __toESM(require("react-floater"));
+var import_react6 = require("@floating-ui/react");
 var import_is_lite5 = __toESM(require("is-lite"));
 var import_tree_changes2 = __toESM(require("tree-changes"));
 
@@ -1639,8 +1582,9 @@ function JoyrideTooltip(props) {
 
 // src/components/Step.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var ARROW_SIZE = 10;
 function JoyrideStep(props) {
-  var _a;
+  var _a, _b, _c, _d, _e;
   const {
     action,
     callback,
@@ -1660,32 +1604,42 @@ function JoyrideStep(props) {
   const scopeRef = (0, import_react5.useRef)(null);
   const tooltipRef = (0, import_react5.useRef)(null);
   const previousPropsRef = (0, import_react5.useRef)(props);
+  const arrowRef = (0, import_react5.useRef)(null);
   const setTooltipRef = (0, import_react5.useCallback)((element) => {
     tooltipRef.current = element;
   }, []);
-  const handleClickHoverBeacon = (0, import_react5.useCallback)((event) => {
-    if (event.type === "mouseenter" && step.event !== "hover") {
-      return;
-    }
-    store.update({ lifecycle: LIFECYCLE.TOOLTIP });
-  }, [step.event, store]);
-  const setPopper = (0, import_react5.useCallback)((popper, type) => {
-    var _a2;
-    if (type === "wrapper") {
-      store.setPopper("beacon", popper);
-    } else {
-      store.setPopper("tooltip", popper);
-    }
-    if (store.getPopper("beacon") && (store.getPopper("tooltip") || step.placement === "center") && lifecycle === LIFECYCLE.INIT) {
-      store.update({
-        action,
-        lifecycle: LIFECYCLE.READY
-      });
-    }
-    if ((_a2 = step.floaterProps) == null ? void 0 : _a2.getPopper) {
-      step.floaterProps.getPopper(popper, type);
-    }
-  }, [action, lifecycle, step.placement, step.floaterProps, store]);
+  const handleClickHoverBeacon = (0, import_react5.useCallback)(
+    (event) => {
+      if (event.type === "mouseenter" && step.event !== "hover") {
+        return;
+      }
+      store.update({ lifecycle: LIFECYCLE.TOOLTIP });
+    },
+    [step.event, store]
+  );
+  const target = getElement(step.target);
+  const isOpen = hideBeacon(step) || lifecycle === LIFECYCLE.TOOLTIP;
+  const isCentered = step.placement === "center";
+  const floatingPlacement = isCentered || step.placement === "auto" ? "bottom" : step.placement;
+  const totalOffset = isOpen ? step.offset + ((_a = step.spotlightPadding) != null ? _a : 0) : step.offset;
+  const {
+    refs,
+    floatingStyles,
+    middlewareData,
+    placement: computedPlacement
+  } = (0, import_react6.useFloating)({
+    placement: floatingPlacement,
+    elements: {
+      reference: target
+    },
+    middleware: [
+      (0, import_react6.offset)(totalOffset),
+      (0, import_react6.flip)(),
+      (0, import_react6.shift)({ padding: 5 }),
+      (0, import_react6.arrow)({ element: arrowRef })
+    ],
+    whileElementsMounted: import_react6.autoUpdate
+  });
   (0, import_react5.useEffect)(() => {
     log({
       title: `step:${index}`,
@@ -1699,6 +1653,14 @@ function JoyrideStep(props) {
       (_a2 = scopeRef.current) == null ? void 0 : _a2.removeScope();
     };
   }, []);
+  (0, import_react5.useEffect)(() => {
+    if (target && lifecycle === LIFECYCLE.INIT) {
+      store.update({
+        action,
+        lifecycle: LIFECYCLE.READY
+      });
+    }
+  }, [target, lifecycle, action, store]);
   (0, import_react5.useEffect)(() => {
     var _a2;
     const previousProps = previousPropsRef.current;
@@ -1782,57 +1744,116 @@ function JoyrideStep(props) {
     }
     if (changedFrom("lifecycle", [LIFECYCLE.TOOLTIP, LIFECYCLE.INIT], LIFECYCLE.INIT)) {
       (_a2 = scopeRef.current) == null ? void 0 : _a2.removeScope();
-      store.cleanupPoppers();
     }
     previousPropsRef.current = props;
   });
-  const target = getElement(step.target);
   if (!validateStep(step) || !import_is_lite5.default.domElement(target)) {
     return null;
   }
-  const isOpen = hideBeacon(step) || lifecycle === LIFECYCLE.TOOLTIP;
-  const TooltipComponent = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    JoyrideTooltip,
-    {
-      continuous,
-      helpers,
-      index,
-      isLastStep: index + 1 === size,
-      setTooltipRef,
-      size,
-      step
-    }
-  );
-  const { content: _c, component: _comp, ...safeFloaterProps } = (_a = step.floaterProps) != null ? _a : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "react-joyride__step", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_react_floater.default,
-    {
-      ...safeFloaterProps,
-      component: TooltipComponent,
-      debug,
-      getPopper: setPopper,
-      id: `react-joyride-step-${index}`,
-      open: isOpen,
-      placement: step.placement,
-      target: step.target,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        JoyrideBeacon,
-        {
-          beaconComponent: step.beaconComponent,
-          continuous,
-          index,
-          isLastStep: index + 1 === size,
-          locale: step.locale,
-          nonce,
-          onClickOrHover: handleClickHoverBeacon,
-          shouldFocus: shouldScroll2,
-          size,
-          step,
-          styles: step.styles
-        }
-      )
-    }
-  ) }, `JoyrideStep-${index}`);
+  const zIndex = ((_b = step.styles.options.zIndex) != null ? _b : 100) + 100;
+  const arrowColor = (_c = step.styles.options.arrowColor) != null ? _c : "#fff";
+  if (isCentered && isOpen) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "react-joyride__step", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          zIndex
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          JoyrideTooltip,
+          {
+            continuous,
+            helpers,
+            index,
+            isLastStep: index + 1 === size,
+            setTooltipRef,
+            size,
+            step
+          }
+        )
+      }
+    ) }, `JoyrideStep-${index}`);
+  }
+  if (isCentered) {
+    return null;
+  }
+  const arrowSide = computedPlacement.split("-")[0];
+  const staticSide = { top: "bottom", right: "left", bottom: "top", left: "right" }[arrowSide];
+  const arrowStyles = {
+    position: "absolute",
+    width: 0,
+    height: 0,
+    borderStyle: "solid",
+    pointerEvents: "none",
+    ...((_d = middlewareData.arrow) == null ? void 0 : _d.x) != null ? { left: middlewareData.arrow.x } : {},
+    ...((_e = middlewareData.arrow) == null ? void 0 : _e.y) != null ? { top: middlewareData.arrow.y } : {},
+    [staticSide]: -ARROW_SIZE
+  };
+  switch (arrowSide) {
+    case "top":
+      arrowStyles.borderWidth = `${ARROW_SIZE}px ${ARROW_SIZE}px 0`;
+      arrowStyles.borderColor = `${arrowColor} transparent transparent`;
+      break;
+    case "bottom":
+      arrowStyles.borderWidth = `0 ${ARROW_SIZE}px ${ARROW_SIZE}px`;
+      arrowStyles.borderColor = `transparent transparent ${arrowColor}`;
+      break;
+    case "left":
+      arrowStyles.borderWidth = `${ARROW_SIZE}px 0 ${ARROW_SIZE}px ${ARROW_SIZE}px`;
+      arrowStyles.borderColor = `transparent transparent transparent ${arrowColor}`;
+      break;
+    case "right":
+      arrowStyles.borderWidth = `${ARROW_SIZE}px ${ARROW_SIZE}px ${ARROW_SIZE}px 0`;
+      arrowStyles.borderColor = `transparent ${arrowColor} transparent transparent`;
+      break;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "react-joyride__step", children: [
+    !isOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: refs.setFloating, style: floatingStyles, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      JoyrideBeacon,
+      {
+        beaconComponent: step.beaconComponent,
+        continuous,
+        index,
+        isLastStep: index + 1 === size,
+        locale: step.locale,
+        nonce,
+        onClickOrHover: handleClickHoverBeacon,
+        shouldFocus: shouldScroll2,
+        size,
+        step,
+        styles: step.styles
+      }
+    ) }),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        ref: refs.setFloating,
+        style: {
+          ...floatingStyles,
+          zIndex
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            JoyrideTooltip,
+            {
+              continuous,
+              helpers,
+              index,
+              isLastStep: index + 1 === size,
+              setTooltipRef,
+              size,
+              step
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: arrowRef, style: arrowStyles })
+        ]
+      }
+    )
+  ] }, `JoyrideStep-${index}`);
 }
 
 // src/components/index.tsx
@@ -1872,20 +1893,20 @@ function Joyride(inputProps) {
     stepIndex,
     steps
   } = props;
-  const storeRef = (0, import_react6.useRef)(
+  const storeRef = (0, import_react7.useRef)(
     createStore({
       ...props,
       controlled: run && import_is_lite6.default.number(stepIndex)
     })
   );
-  const helpersRef = (0, import_react6.useRef)(storeRef.current.getHelpers());
-  const [state, setState] = (0, import_react6.useState)(storeRef.current.getState());
-  const previousStateRef = (0, import_react6.useRef)(state);
-  const previousPropsRef = (0, import_react6.useRef)(props);
-  const mountedRef = (0, import_react6.useRef)(false);
+  const helpersRef = (0, import_react7.useRef)(storeRef.current.getHelpers());
+  const [state, setState] = (0, import_react7.useState)(storeRef.current.getState());
+  const previousStateRef = (0, import_react7.useRef)(state);
+  const previousPropsRef = (0, import_react7.useRef)(props);
+  const mountedRef = (0, import_react7.useRef)(false);
   const store = storeRef.current;
   const helpers = helpersRef.current;
-  const triggerCallback = (0, import_react6.useCallback)(
+  const triggerCallback = (0, import_react7.useCallback)(
     (data) => {
       if (import_is_lite6.default.function(callbackProp)) {
         callbackProp(data);
@@ -1893,7 +1914,7 @@ function Joyride(inputProps) {
     },
     [callbackProp]
   );
-  const handleKeyboard = (0, import_react6.useCallback)(
+  const handleKeyboard = (0, import_react7.useCallback)(
     (event) => {
       const { index: currentIndex, lifecycle: lifecycle2 } = storeRef.current.getState();
       const currentSteps = props.steps;
@@ -1906,14 +1927,14 @@ function Joyride(inputProps) {
     },
     [props.steps]
   );
-  const handleClickOverlay = (0, import_react6.useCallback)(() => {
+  const handleClickOverlay = (0, import_react7.useCallback)(() => {
     const currentState = storeRef.current.getState();
     const step = getMergedStep(props, steps[currentState.index]);
     if (!step.disableOverlayClose) {
       helpers.close("overlay");
     }
   }, [props, steps, helpers]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     store.addListener(setState);
     log({
       title: "init",
@@ -1927,7 +1948,7 @@ function Joyride(inputProps) {
       getHelpers(helpers);
     }
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!canUseDOM()) {
       return;
     }
@@ -1944,7 +1965,7 @@ function Joyride(inputProps) {
       }
     };
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!mountedRef.current || !canUseDOM()) {
       return;
     }
@@ -1987,7 +2008,7 @@ function Joyride(inputProps) {
     }
     previousPropsRef.current = props;
   });
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!mountedRef.current || !canUseDOM()) {
       return;
     }
@@ -2059,7 +2080,6 @@ function Joyride(inputProps) {
     previousStateRef.current = state;
   });
   function scrollToStep(previousState) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
     const { index: index2, lifecycle: lifecycle2, status: status2 } = state;
     const {
       disableScrollParentFix = false
@@ -2087,34 +2107,10 @@ function Joyride(inputProps) {
         ],
         debug
       });
-      const beaconPopper = store.getPopper("beacon");
-      const tooltipPopper = store.getPopper("tooltip");
-      if (lifecycle2 === LIFECYCLE.BEACON && beaconPopper) {
-        const placement = (_b = (_a = beaconPopper.state) == null ? void 0 : _a.placement) != null ? _b : "";
-        const popperTop = (_f = (_e = (_d = (_c = beaconPopper.state) == null ? void 0 : _c.rects) == null ? void 0 : _d.popper) == null ? void 0 : _e.y) != null ? _f : 0;
-        if (!["bottom"].includes(placement) && !hasCustomScroll) {
-          scrollY = Math.floor(popperTop - scrollOffset);
-        }
-      } else if (lifecycle2 === LIFECYCLE.TOOLTIP && tooltipPopper) {
-        const placement = (_h = (_g = tooltipPopper.state) == null ? void 0 : _g.placement) != null ? _h : "";
-        const popperTop = (_l = (_k = (_j = (_i = tooltipPopper.state) == null ? void 0 : _i.rects) == null ? void 0 : _j.popper) == null ? void 0 : _k.y) != null ? _l : 0;
-        const flipped = ((_o = (_n = (_m = tooltipPopper.state) == null ? void 0 : _m.modifiersData) == null ? void 0 : _n.flip) == null ? void 0 : _o.overflows) != null;
-        if (["top", "right", "left"].includes(placement) && !flipped && !hasCustomScroll) {
-          scrollY = Math.floor(popperTop - scrollOffset);
-        } else {
-          scrollY -= step.spotlightPadding;
-        }
-      }
+      scrollY -= step.spotlightPadding;
       scrollY = scrollY >= 0 ? scrollY : 0;
       if (status2 === STATUS.RUNNING) {
-        scrollTo(scrollY, { element: scrollParent2, duration: scrollDuration }).then(
-          () => {
-            setTimeout(() => {
-              var _a2;
-              (_a2 = store.getPopper("tooltip")) == null ? void 0 : _a2.update();
-            }, 10);
-          }
-        );
+        scrollTo(scrollY, { element: scrollParent2, duration: scrollDuration });
       }
     }
   }