flytask-joyride/dist/index.mjs.map

Flytask Joyride

{"version":3,"sources":["../src/components/index.tsx","../src/modules/dom.ts","../src/modules/helpers.ts","../src/literals/index.ts","../src/modules/step.ts","../src/defaults.ts","../src/styles.ts","../src/modules/store.ts","../src/components/Overlay.tsx","../src/components/Spotlight.tsx","../src/components/Portal.tsx","../src/components/Step.tsx","../src/modules/scope.ts","../src/components/Beacon.tsx","../src/components/Tooltip/index.tsx","../src/components/Tooltip/Container.tsx","../src/components/Tooltip/CloseButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ReactNode } from 'react';\nimport isEqual from '@gilbarbara/deep-equal';\nimport is from 'is-lite';\nimport treeChanges from 'tree-changes';\n\nimport {\n  canUseDOM,\n  getElement,\n  getScrollParent,\n  getScrollTo,\n  hasCustomScrollParent,\n  scrollTo,\n} from '../modules/dom';\nimport { log, shouldScroll } from '../modules/helpers';\nimport { getMergedStep, validateSteps } from '../modules/step';\nimport createStore from '../modules/store';\n\n\n\nimport Overlay from './Overlay';\nimport Portal from './Portal';\n\nimport { defaultProps } from '../defaults';\nimport { Actions, CallBackProps, Props, State, Status, StoreHelpers } from '../types';\n\nimport Step from './Step';\nimport { ACTIONS, EVENTS, LIFECYCLE, STATUS } from 'src/literals';\n\nclass Joyride extends React.Component<Props, State> {\n  private readonly helpers: StoreHelpers;\n  private readonly store: ReturnType<typeof createStore>;\n\n  static defaultProps = defaultProps;\n\n  constructor(props: Props) {\n    super(props);\n\n    const { debug, getHelpers, run = true, stepIndex } = props;\n\n    this.store = createStore({\n      ...props,\n      controlled: run && is.number(stepIndex),\n    });\n    this.helpers = this.store.getHelpers();\n\n    const { addListener } = this.store;\n\n    log({\n      title: 'init',\n      data: [\n        { key: 'props', value: this.props },\n        { key: 'state', value: this.state },\n      ],\n      debug,\n    });\n\n    // Sync the store to this component's state.\n    addListener(this.syncState);\n\n    if (getHelpers) {\n      getHelpers(this.helpers);\n    }\n\n    this.state = this.store.getState();\n  }\n\n  componentDidMount() {\n    if (!canUseDOM()) {\n      return;\n    }\n\n    const { debug, disableCloseOnEsc, run, steps } = this.props;\n    const { start } = this.store;\n\n    if (validateSteps(steps, debug) && run) {\n      start();\n    }\n\n    if (!disableCloseOnEsc) {\n      document.body.addEventListener('keydown', this.handleKeyboard, { passive: true });\n    }\n  }\n\n  componentDidUpdate(previousProps: Props, previousState: State) {\n    if (!canUseDOM()) {\n      return;\n    }\n\n    const { action, controlled, index, status } = this.state;\n    const { debug, run, stepIndex, steps } = this.props;\n    const { stepIndex: previousStepIndex, steps: previousSteps } = previousProps;\n    const { reset, setSteps, start, stop, update } = this.store;\n    const { changed: changedProps } = treeChanges(previousProps, this.props);\n    const { changed, changedFrom } = treeChanges(previousState, this.state);\n    const step = getMergedStep(this.props, steps[index]);\n\n    const stepsChanged = !isEqual(previousSteps, steps);\n    const stepIndexChanged = is.number(stepIndex) && changedProps('stepIndex');\n    const target = getElement(step.target);\n\n    if (stepsChanged) {\n      if (validateSteps(steps, debug)) {\n        setSteps(steps);\n      } else {\n        // eslint-disable-next-line no-console\n        console.warn('Steps are not valid', steps);\n      }\n    }\n\n    if (changedProps('run')) {\n      if (run) {\n        start(stepIndex);\n      } else {\n        stop();\n      }\n    }\n\n    if (stepIndexChanged) {\n      let nextAction: Actions =\n        is.number(previousStepIndex) && previousStepIndex < stepIndex ? ACTIONS.NEXT : ACTIONS.PREV;\n\n      if (action === ACTIONS.STOP) {\n        nextAction = ACTIONS.START;\n      }\n\n      if (!([STATUS.FINISHED, STATUS.SKIPPED] as Array<Status>).includes(status)) {\n        update({\n          action: action === ACTIONS.CLOSE ? ACTIONS.CLOSE : nextAction,\n          index: stepIndex,\n          lifecycle: LIFECYCLE.INIT,\n        });\n      }\n    }\n\n    // Update the index if the first step is not found\n    if (!controlled && status === STATUS.RUNNING && index === 0 && !target) {\n      this.store.update({ index: index + 1 });\n      this.callback({\n        ...this.state,\n        type: EVENTS.TARGET_NOT_FOUND,\n        step,\n      });\n    }\n\n    const callbackData = {\n      ...this.state,\n      index,\n      step,\n    };\n    const isAfterAction = changed('action', [\n      ACTIONS.NEXT,\n      ACTIONS.PREV,\n      ACTIONS.SKIP,\n      ACTIONS.CLOSE,\n    ]);\n\n    if (isAfterAction && changed('status', STATUS.PAUSED)) {\n      const previousStep = getMergedStep(this.props, steps[previousState.index]);\n\n      this.callback({\n        ...callbackData,\n        index: previousState.index,\n        lifecycle: LIFECYCLE.COMPLETE,\n        step: previousStep,\n        type: EVENTS.STEP_AFTER,\n      });\n    }\n\n    if (changed('status', [STATUS.FINISHED, STATUS.SKIPPED])) {\n      const previousStep = getMergedStep(this.props, steps[previousState.index]);\n\n      if (!controlled) {\n        this.callback({\n          ...callbackData,\n          index: previousState.index,\n          lifecycle: LIFECYCLE.COMPLETE,\n          step: previousStep,\n          type: EVENTS.STEP_AFTER,\n        });\n      }\n\n      this.callback({\n        ...callbackData,\n        type: EVENTS.TOUR_END,\n        // Return the last step when the tour is finished\n        step: previousStep,\n        index: previousState.index,\n      });\n      reset();\n    } else if (changedFrom('status', [STATUS.IDLE, STATUS.READY], STATUS.RUNNING)) {\n      this.callback({\n        ...callbackData,\n        type: EVENTS.TOUR_START,\n      });\n    } else if (changed('status') || changed('action', ACTIONS.RESET)) {\n      this.callback({\n        ...callbackData,\n        type: EVENTS.TOUR_STATUS,\n      });\n    }\n\n    this.scrollToStep(previousState);\n  }\n\n  componentWillUnmount() {\n    const { disableCloseOnEsc } = this.props;\n\n    if (!disableCloseOnEsc) {\n      document.body.removeEventListener('keydown', this.handleKeyboard);\n    }\n  }\n\n  /**\n   * Trigger the callback.\n   */\n  callback = (data: CallBackProps) => {\n    const { callback } = this.props;\n\n    if (is.function(callback)) {\n      callback(data);\n    }\n  };\n\n  /**\n   * Keydown event listener\n   */\n  handleKeyboard = (event: KeyboardEvent) => {\n    const { index, lifecycle } = this.state;\n    const { steps } = this.props;\n    const step = steps[index];\n\n    if (lifecycle === LIFECYCLE.TOOLTIP) {\n      if (event.code === 'Escape' && step && !step.disableCloseOnEsc) {\n        this.store.close('keyboard');\n      }\n    }\n  };\n\n  handleClickOverlay = () => {\n    const { index } = this.state;\n    const { steps } = this.props;\n\n    const step = getMergedStep(this.props, steps[index]);\n\n    if (!step.disableOverlayClose) {\n      this.helpers.close('overlay');\n    }\n  };\n\n  /**\n   * Sync the store with the component's state\n   */\n  syncState = (state: State) => {\n    this.setState(state);\n  };\n\n  scrollToStep(previousState: State) {\n    const { index, lifecycle, status } = this.state;\n    const {\n      debug,\n      disableScrollParentFix = false,\n      scrollDuration,\n      scrollOffset = 20,\n      scrollToFirstStep = false,\n      steps,\n    } = this.props;\n    const step = getMergedStep(this.props, steps[index]);\n\n    const target = getElement(step.target);\n    const shouldScrollToStep = shouldScroll({\n      isFirstStep: index === 0,\n      lifecycle,\n      previousLifecycle: previousState.lifecycle,\n      scrollToFirstStep,\n      step,\n      target,\n    });\n\n    if (status === STATUS.RUNNING && shouldScrollToStep) {\n      const hasCustomScroll = hasCustomScrollParent(target, disableScrollParentFix);\n      const scrollParent = getScrollParent(target, disableScrollParentFix);\n      let scrollY = Math.floor(getScrollTo(target, scrollOffset, disableScrollParentFix)) || 0;\n\n      log({\n        title: 'scrollToStep',\n        data: [\n          { key: 'index', value: index },\n          { key: 'lifecycle', value: lifecycle },\n          { key: 'status', value: status },\n        ],\n        debug,\n      });\n\n      const beaconPopper = this.store.getPopper('beacon');\n      const tooltipPopper = this.store.getPopper('tooltip');\n\n      if (lifecycle === LIFECYCLE.BEACON && beaconPopper) {\n        const { offsets, placement } = beaconPopper;\n\n        if (!['bottom'].includes(placement) && !hasCustomScroll) {\n          scrollY = Math.floor(offsets.popper.top - scrollOffset);\n        }\n      } else if (lifecycle === LIFECYCLE.TOOLTIP && tooltipPopper) {\n        const { flipped, offsets, placement } = tooltipPopper;\n\n        if (['top', 'right', 'left'].includes(placement) && !flipped && !hasCustomScroll) {\n          scrollY = Math.floor(offsets.popper.top - scrollOffset);\n        } else {\n          scrollY -= step.spotlightPadding;\n        }\n      }\n\n      scrollY = scrollY >= 0 ? scrollY : 0;\n\n      if (status === STATUS.RUNNING) {\n        scrollTo(scrollY, { element: scrollParent as Element, duration: scrollDuration }).then(\n          () => {\n            setTimeout(() => {\n              this.store.getPopper('tooltip')?.instance.update();\n            }, 10);\n          },\n        );\n      }\n    }\n  }\n\n  render() {\n    if (!canUseDOM()) {\n      return null;\n    }\n\n    const { index, lifecycle, status } = this.state;\n    const {\n      continuous = false,\n      debug = false,\n      nonce,\n      scrollToFirstStep = false,\n      steps,\n    } = this.props;\n    const isRunning = status === STATUS.RUNNING;\n    const content: Record<string, ReactNode> = {};\n\n    if (isRunning && steps[index]) {\n      const step = getMergedStep(this.props, steps[index]);\n\n      content.step = (\n        <Step\n          {...this.state}\n          callback={this.callback}\n          continuous={continuous}\n          debug={debug}\n          helpers={this.helpers}\n          nonce={nonce}\n          shouldScroll={!step.disableScrolling && (index !== 0 || scrollToFirstStep)}\n          step={step}\n          store={this.store}\n        />\n      );\n\n      content.overlay = (\n        <Portal id=\"react-joyride-portal\">\n          <Overlay\n            {...step}\n            continuous={continuous}\n            debug={debug}\n            lifecycle={lifecycle}\n            onClickOverlay={this.handleClickOverlay}\n          />\n        </Portal>\n      );\n    }\n\n    return (\n      <div className=\"react-joyride\">\n        {content.step}\n        {content.overlay}\n      </div>\n    );\n  }\n}\n\nexport default Joyride;\n","import scroll from 'scroll';\nimport scrollParent from 'scrollparent';\n\nexport function canUseDOM() {\n  return !!(typeof window !== 'undefined' && window.document?.createElement);\n}\n\n/**\n * Find the bounding client rect\n */\nexport function getClientRect(element: HTMLElement | null) {\n  if (!element) {\n    return null;\n  }\n\n  return element.getBoundingClientRect();\n}\n\n/**\n * Helper function to get the browser-normalized \"document height\"\n */\nexport function getDocumentHeight(median = false): number {\n  const { body, documentElement } = document;\n\n  if (!body || !documentElement) {\n    return 0;\n  }\n\n  if (median) {\n    const heights = [\n      body.scrollHeight,\n      body.offsetHeight,\n      documentElement.clientHeight,\n      documentElement.scrollHeight,\n      documentElement.offsetHeight,\n    ].sort((a, b) => a - b);\n    const middle = Math.floor(heights.length / 2);\n\n    if (heights.length % 2 === 0) {\n      return (heights[middle - 1] + heights[middle]) / 2;\n    }\n\n    return heights[middle];\n  }\n\n  return Math.max(\n    body.scrollHeight,\n    body.offsetHeight,\n    documentElement.clientHeight,\n    documentElement.scrollHeight,\n    documentElement.offsetHeight,\n  );\n}\n\n/**\n * Find and return the target DOM element based on a step's 'target'.\n */\nexport function getElement(element: string | HTMLElement): HTMLElement | null {\n  if (typeof element === 'string') {\n    try {\n      return document.querySelector(element);\n    } catch (error: any) {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error(error);\n      }\n\n      return null;\n    }\n  }\n\n  return element;\n}\n\n/**\n *  Get computed style property\n */\nexport function getStyleComputedProperty(el: HTMLElement): CSSStyleDeclaration | null {\n  if (!el || el.nodeType !== 1) {\n    return null;\n  }\n\n  return getComputedStyle(el);\n}\n\n/**\n * Get scroll parent with fix\n */\nexport function getScrollParent(\n  element: HTMLElement | null,\n  skipFix: boolean,\n  forListener?: boolean,\n) {\n  if (!element) {\n    return scrollDocument();\n  }\n\n  const parent = scrollParent(element) as HTMLElement;\n\n  if (parent) {\n    if (parent.isSameNode(scrollDocument())) {\n      if (forListener) {\n        return document;\n      }\n\n      return scrollDocument();\n    }\n\n    const hasScrolling = parent.scrollHeight > parent.offsetHeight;\n\n    if (!hasScrolling && !skipFix) {\n      parent.style.overflow = 'initial';\n\n      return scrollDocument();\n    }\n  }\n\n  return parent;\n}\n\n/**\n * Check if the element has custom scroll parent\n */\nexport function hasCustomScrollParent(element: HTMLElement | null, skipFix: boolean): boolean {\n  if (!element) {\n    return false;\n  }\n\n  const parent = getScrollParent(element, skipFix);\n\n  return parent ? !parent.isSameNode(scrollDocument()) : false;\n}\n\n/**\n * Check if the element has custom offset parent\n */\nexport function hasCustomOffsetParent(element: HTMLElement): boolean {\n  return element.offsetParent !== document.body;\n}\n\n/**\n * Check if an element has fixed/sticky position\n */\nexport function hasPosition(el: HTMLElement | Node | null, type: string = 'fixed'): boolean {\n  if (!el || !(el instanceof HTMLElement)) {\n    return false;\n  }\n\n  const { nodeName } = el;\n  const styles = getStyleComputedProperty(el);\n\n  if (nodeName === 'BODY' || nodeName === 'HTML') {\n    return false;\n  }\n\n  if (styles && styles.position === type) {\n    return true;\n  }\n\n  if (!el.parentNode) {\n    return false;\n  }\n\n  return hasPosition(el.parentNode, type);\n}\n\n/**\n * Check if the element is visible\n */\nexport function isElementVisible(element: HTMLElement): element is HTMLElement {\n  if (!element) {\n    return false;\n  }\n\n  let parentElement: HTMLElement | null = element;\n\n  while (parentElement) {\n    if (parentElement === document.body) {\n      break;\n    }\n\n    if (parentElement instanceof HTMLElement) {\n      const { display, visibility } = getComputedStyle(parentElement);\n\n      if (display === 'none' || visibility === 'hidden') {\n        return false;\n      }\n    }\n\n    parentElement = parentElement.parentElement ?? null;\n  }\n\n  return true;\n}\n\n/**\n * Find and return the target DOM element based on a step's 'target'.\n */\nexport function getElementPosition(\n  element: HTMLElement | null,\n  offset: number,\n  skipFix: boolean,\n): number {\n  const elementRect = getClientRect(element);\n  const parent = getScrollParent(element, skipFix);\n  const hasScrollParent = hasCustomScrollParent(element, skipFix);\n  let parentTop = 0;\n  let top = elementRect?.top ?? 0;\n\n  if (parent instanceof HTMLElement) {\n    parentTop = parent.scrollTop;\n\n    if (!hasScrollParent && !hasPosition(element)) {\n      top += parentTop;\n    }\n\n    if (!parent.isSameNode(scrollDocument())) {\n      top += scrollDocument().scrollTop;\n    }\n  }\n\n  return Math.floor(top - offset);\n}\n\n/**\n * Get the scrollTop position\n */\nexport function getScrollTo(element: HTMLElement | null, offset: number, skipFix: boolean): number {\n  if (!element) {\n    return 0;\n  }\n\n  const { offsetTop = 0, scrollTop = 0 } = scrollParent(element) ?? {};\n  let top = element.getBoundingClientRect().top + scrollTop;\n\n  if (!!offsetTop && (hasCustomScrollParent(element, skipFix) || hasCustomOffsetParent(element))) {\n    top -= offsetTop;\n  }\n\n  const output = Math.floor(top - offset);\n\n  return output < 0 ? 0 : output;\n}\n\nexport function scrollDocument(): Element | HTMLElement {\n  return document.scrollingElement ?? document.documentElement;\n}\n\n/**\n * Scroll to position\n */\nexport function scrollTo(\n  value: number,\n  options: { duration?: number; element: Element | HTMLElement },\n): Promise<void> {\n  const { duration, element } = options;\n\n  return new Promise((resolve, reject) => {\n    const { scrollTop } = element;\n\n    const limit = value > scrollTop ? value - scrollTop : scrollTop - value;\n\n    scroll.top(element as HTMLElement, value, { duration: limit < 100 ? 50 : duration }, error => {\n      if (error && error.message !== 'Element already at target scroll position') {\n        return reject(error);\n      }\n\n      return resolve();\n    });\n  });\n}\n","import { isValidElement, ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport is from 'is-lite';\n\nimport { LIFECYCLE } from '../literals';\n\nimport { AnyObject, Lifecycle, NarrowPlainObject, Step } from '../types';\n\nimport { hasPosition } from './dom';\n\ninterface LogOptions {\n  /** The data to be logged */\n  data: any;\n  /** display the log */\n  debug?: boolean;\n  /** The title the logger was called from */\n  title: string;\n  /** If true, the message will be a warning */\n  warn?: boolean;\n}\n\ninterface ShouldScrollOptions {\n  isFirstStep: boolean;\n  lifecycle: Lifecycle;\n  previousLifecycle: Lifecycle;\n  scrollToFirstStep: boolean;\n  step: Step;\n  target: HTMLElement | null;\n}\n\nexport const isReact16 = createPortal !== undefined;\n\n/**\n * Get the current browser\n */\nexport function getBrowser(userAgent: string = navigator.userAgent): string {\n  let browser = userAgent;\n\n  if (typeof window === 'undefined') {\n    browser = 'node';\n  }\n  // @ts-expect-error IE support\n  else if (document.documentMode) {\n    browser = 'ie';\n  } else if (/Edge/.test(userAgent)) {\n    browser = 'edge';\n  }\n  // @ts-expect-error Opera 8.0+\n  else if (Boolean(window.opera) || userAgent.includes(' OPR/')) {\n    browser = 'opera';\n  }\n  // @ts-expect-error Firefox 1.0+\n  else if (typeof window.InstallTrigger !== 'undefined') {\n    browser = 'firefox';\n  }\n  // @ts-expect-error Chrome 1+\n  else if (window.chrome) {\n    browser = 'chrome';\n  }\n  // Safari (and Chrome iOS, Firefox iOS)\n  else if (/(Version\\/([\\d._]+).*Safari|CriOS|FxiOS| Mobile\\/)/.test(userAgent)) {\n    browser = 'safari';\n  }\n\n  return browser;\n}\n\n/**\n * Get Object type\n */\nexport function getObjectType(value: unknown): string {\n  return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();\n}\n\n/**\n * Get text from React components\n */\nexport function getText(root: ReactNode): string {\n  const content: Array<string | number> = [];\n\n  const recurse = (child: ReactNode) => {\n    if (typeof child === 'string' || typeof child === 'number') {\n      content.push(child);\n    } else if (Array.isArray(child)) {\n      child.forEach(c => recurse(c));\n    } else if (isValidElement(child)) {\n      const { children } = child.props;\n\n      if (Array.isArray(children)) {\n        children.forEach(c => recurse(c));\n      } else {\n        recurse(children);\n      }\n    }\n  };\n\n  recurse(root);\n\n  return content.join(' ').trim();\n}\n\nexport function hasValidKeys(object: Record<string, unknown>, keys?: Array<string>): boolean {\n  if (!is.plainObject(object) || !is.array(keys)) {\n    return false;\n  }\n\n  return Object.keys(object).every(d => keys.includes(d));\n}\n\n/**\n * Convert hex to RGB\n */\nexport function hexToRGB(hex: string): Array<number> {\n  const shorthandRegex = /^#?([\\da-f])([\\da-f])([\\da-f])$/i;\n  const properHex = hex.replace(shorthandRegex, (_m, r, g, b) => r + r + g + g + b + b);\n\n  const result = /^#?([\\da-f]{2})([\\da-f]{2})([\\da-f]{2})$/i.exec(properHex);\n\n  return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : [];\n}\n\n/**\n * Decide if the step shouldn't skip the beacon\n * @param {Object} step\n *\n * @returns {boolean}\n */\nexport function hideBeacon(step: Step): boolean {\n  return step.disableBeacon || step.placement === 'center';\n}\n\n/**\n * Detect legacy browsers\n *\n * @returns {boolean}\n */\nexport function isLegacy(): boolean {\n  return !['chrome', 'safari', 'firefox', 'opera'].includes(getBrowser());\n}\n\n/**\n * Log method calls if debug is enabled\n */\nexport function log({ data, debug = false, title, warn = false }: LogOptions) {\n  /* eslint-disable no-console */\n  const logFn = warn ? console.warn || console.error : console.log;\n\n  if (debug) {\n    if (title && data) {\n      console.groupCollapsed(\n        `%creact-joyride: ${title}`,\n        'color: #ff0044; font-weight: bold; font-size: 12px;',\n      );\n\n      if (Array.isArray(data)) {\n        data.forEach(d => {\n          if (is.plainObject(d) && d.key) {\n            logFn.apply(console, [d.key, d.value]);\n          } else {\n            logFn.apply(console, [d]);\n          }\n        });\n      } else {\n        logFn.apply(console, [data]);\n      }\n\n      console.groupEnd();\n    } else {\n      console.error('Missing title or data props');\n    }\n  }\n  /* eslint-enable */\n}\n\n/**\n * A function that does nothing.\n */\nexport function noop() {\n  return undefined;\n}\n\n/**\n * Type-safe Object.keys()\n */\nexport function objectKeys<T extends AnyObject>(input: T) {\n  return Object.keys(input) as Array<keyof T>;\n}\n\n/**\n * Remove properties from an object\n */\nexport function omit<T extends Record<string, any>, K extends keyof T>(\n  input: NarrowPlainObject<T>,\n  ...filter: K[]\n) {\n  if (!is.plainObject(input)) {\n    throw new TypeError('Expected an object');\n  }\n\n  const output: any = {};\n\n  for (const key in input) {\n    /* istanbul ignore else */\n    if ({}.hasOwnProperty.call(input, key)) {\n      if (!filter.includes(key as unknown as K)) {\n        output[key] = input[key];\n      }\n    }\n  }\n\n  return output as Omit<T, K>;\n}\n\n/**\n * Select properties from an object\n */\nexport function pick<T extends Record<string, any>, K extends keyof T>(\n  input: NarrowPlainObject<T>,\n  ...filter: K[]\n) {\n  if (!is.plainObject(input)) {\n    throw new TypeError('Expected an object');\n  }\n\n  if (!filter.length) {\n    return input;\n  }\n\n  const output: any = {};\n\n  for (const key in input) {\n    /* istanbul ignore else */\n    if ({}.hasOwnProperty.call(input, key)) {\n      if (filter.includes(key as unknown as K)) {\n        output[key] = input[key];\n      }\n    }\n  }\n\n  return output as Pick<T, K>;\n}\n\nexport function shouldScroll(options: ShouldScrollOptions): boolean {\n  const { isFirstStep, lifecycle, previousLifecycle, scrollToFirstStep, step, target } = options;\n\n  return (\n    !step.disableScrolling &&\n    (!isFirstStep || scrollToFirstStep || lifecycle === LIFECYCLE.TOOLTIP) &&\n    step.placement !== 'center' &&\n    (!step.isFixed || !hasPosition(target)) && // fixed steps don't need to scroll\n    previousLifecycle !== lifecycle &&\n    ([LIFECYCLE.BEACON, LIFECYCLE.TOOLTIP] as Array<Lifecycle>).includes(lifecycle)\n  );\n}\n\n/**\n * Block execution\n */\nexport function sleep(seconds = 1) {\n  return new Promise(resolve => {\n    setTimeout(resolve, seconds * 1000);\n  });\n}\n","export const ACTIONS = {\n  INIT: 'init',\n  START: 'start',\n  STOP: 'stop',\n  RESET: 'reset',\n  PREV: 'prev',\n  NEXT: 'next',\n  GO: 'go',\n  CLOSE: 'close',\n  SKIP: 'skip',\n  UPDATE: 'update',\n} as const;\n\nexport const EVENTS = {\n  TOUR_START: 'tour:start',\n  STEP_BEFORE: 'step:before',\n  BEACON: 'beacon',\n  TOOLTIP: 'tooltip',\n  STEP_AFTER: 'step:after',\n  TOUR_END: 'tour:end',\n  TOUR_STATUS: 'tour:status',\n  TARGET_NOT_FOUND: 'error:target_not_found',\n  ERROR: 'error',\n} as const;\n\nexport const LIFECYCLE = {\n  INIT: 'init',\n  READY: 'ready',\n  BEACON: 'beacon',\n  TOOLTIP: 'tooltip',\n  COMPLETE: 'complete',\n  ERROR: 'error',\n} as const;\n\nexport const ORIGIN = {\n  BUTTON_CLOSE: 'button_close',\n  BUTTON_PRIMARY: 'button_primary',\n  KEYBOARD: 'keyboard',\n  OVERLAY: 'overlay',\n} as const;\n\nexport const STATUS = {\n  IDLE: 'idle',\n  READY: 'ready',\n  WAITING: 'waiting',\n  RUNNING: 'running',\n  PAUSED: 'paused',\n  SKIPPED: 'skipped',\n  FINISHED: 'finished',\n  ERROR: 'error',\n} as const;\n","import { Props as FloaterProps } from 'react-floater';\nimport deepmerge from 'deepmerge';\nimport is from 'is-lite';\nimport { SetRequired } from 'type-fest';\n\nimport { defaultFloaterProps, defaultLocale, defaultStep } from '../defaults';\nimport getStyles from '../styles';\nimport { Props, Step, StepMerged } from '../types';\n\nimport { getElement, hasCustomScrollParent } from './dom';\nimport { log, omit, pick } from './helpers';\n\nfunction getTourProps(props: Props) {\n  return pick(\n    props,\n    'beaconComponent',\n    'disableCloseOnEsc',\n    'disableOverlay',\n    'disableOverlayClose',\n    'disableScrolling',\n    'disableScrollParentFix',\n    'floaterProps',\n    'hideBackButton',\n    'hideCloseButton',\n    'locale',\n    'showProgress',\n    'showSkipButton',\n    'spotlightClicks',\n    'spotlightPadding',\n    'styles',\n    'tooltipComponent',\n  );\n}\n\nexport function getMergedStep(props: Props, currentStep?: Step): StepMerged {\n  const step = currentStep ?? {};\n  const mergedStep = deepmerge.all([defaultStep, getTourProps(props), step], {\n    isMergeableObject: is.plainObject,\n  }) as StepMerged;\n\n  const mergedStyles = getStyles(props, mergedStep);\n  const scrollParent = hasCustomScrollParent(\n    getElement(mergedStep.target),\n    mergedStep.disableScrollParentFix,\n  );\n  const floaterProps = deepmerge.all([\n    defaultFloaterProps,\n    props.floaterProps ?? {},\n    mergedStep.floaterProps ?? {},\n  ]) as SetRequired<FloaterProps, 'options' | 'wrapperOptions'>;\n\n  // Set react-floater props\n  floaterProps.offset = mergedStep.offset;\n  floaterProps.styles = deepmerge(floaterProps.styles ?? {}, mergedStyles.floaterStyles);\n\n  floaterProps.offset += props.spotlightPadding ?? mergedStep.spotlightPadding ?? 0;\n\n  if (mergedStep.placementBeacon && floaterProps.wrapperOptions) {\n    floaterProps.wrapperOptions.placement = mergedStep.placementBeacon;\n  }\n\n  if (scrollParent && floaterProps.options.preventOverflow) {\n    floaterProps.options.preventOverflow.boundariesElement = 'window';\n  }\n\n  return {\n    ...mergedStep,\n    locale: deepmerge.all([defaultLocale, props.locale ?? {}, mergedStep.locale || {}]),\n    floaterProps,\n    styles: omit(mergedStyles, 'floaterStyles'),\n  };\n}\n\n/**\n * Validate if a step is valid\n */\nexport function validateStep(step: Step, debug: boolean = false): boolean {\n  if (!is.plainObject(step)) {\n    log({\n      title: 'validateStep',\n      data: 'step must be an object',\n      warn: true,\n      debug,\n    });\n\n    return false;\n  }\n\n  if (!step.target) {\n    log({\n      title: 'validateStep',\n      data: 'target is missing from the step',\n      warn: true,\n      debug,\n    });\n\n    return false;\n  }\n\n  return true;\n}\n\n/**\n * Validate if steps are valid\n */\nexport function validateSteps(steps: Array<Step>, debug: boolean = false): boolean {\n  if (!is.array(steps)) {\n    log({\n      title: 'validateSteps',\n      data: 'steps must be an array',\n      warn: true,\n      debug,\n    });\n\n    return false;\n  }\n\n  return steps.every(d => validateStep(d, debug));\n}\n","import { noop } from 'lodash';\nimport { FloaterProps, Locale, Props, Step } from './types';\n\nexport const defaultFloaterProps: FloaterProps = {\n  options: {\n    preventOverflow: {\n      boundariesElement: 'scrollParent',\n    },\n  },\n  wrapperOptions: {\n    offset: -18,\n    position: true,\n  },\n};\n\nexport const defaultLocale: Locale = {\n  back: 'Back',\n  close: 'Close',\n  last: 'Last',\n  next: 'Next',\n  nextLabelWithProgress: 'Next (Step {step} of {steps})',\n  open: 'Open the dialog',\n  skip: 'Skip',\n};\n\nexport const defaultStep = {\n  event: 'click',\n  placement: 'bottom',\n  offset: 10,\n  disableBeacon: false,\n  disableCloseOnEsc: false,\n  disableOverlay: false,\n  disableOverlayClose: false,\n  disableScrollParentFix: false,\n  disableScrolling: false,\n  hideBackButton: false,\n  hideCloseButton: false,\n  hideFooter: false,\n  isFixed: false,\n  locale: defaultLocale,\n  showProgress: false,\n  showSkipButton: false,\n  spotlightClicks: false,\n  spotlightPadding: 10,\n} satisfies Omit<Step, 'content' | 'target'>;\n\nexport const defaultProps = {\n  continuous: false,\n  debug: false,\n  disableCloseOnEsc: false,\n  disableOverlay: false,\n  disableOverlayClose: false,\n  disableScrolling: false,\n  disableScrollParentFix: false,\n  getHelpers: noop(),\n  hideBackButton: false,\n  run: true,\n  scrollOffset: 20,\n  scrollDuration: 300,\n  scrollToFirstStep: false,\n  showSkipButton: false,\n  showProgress: false,\n  spotlightClicks: false,\n  spotlightPadding: 10,\n  steps: [],\n} satisfies Props;\n","import deepmerge from 'deepmerge';\n\nimport { hexToRGB } from './modules/helpers';\nimport { Props, StepMerged, StylesOptions, StylesWithFloaterStyles } from './types';\n\nconst defaultOptions = {\n  arrowColor: '#fff',\n  backgroundColor: '#fff',\n  beaconSize: 36,\n  overlayColor: 'rgba(0, 0, 0, 0.5)',\n  primaryColor: '#f04',\n  spotlightShadow: '0 0 15px rgba(0, 0, 0, 0.5)',\n  textColor: '#333',\n  width: 380,\n  zIndex: 100,\n} satisfies StylesOptions;\n\nconst buttonBase = {\n  backgroundColor: 'transparent',\n  border: 0,\n  borderRadius: 0,\n  color: '#555',\n  cursor: 'pointer',\n  fontSize: 16,\n  lineHeight: 1,\n  padding: 8,\n  WebkitAppearance: 'none',\n};\n\nconst spotlight = {\n  borderRadius: 4,\n  position: 'absolute',\n};\n\nexport default function getStyles(props: Props, step: StepMerged) {\n  const { floaterProps, styles } = props;\n  const mergedFloaterProps = deepmerge(step.floaterProps ?? {}, floaterProps ?? {});\n  const mergedStyles = deepmerge(styles ?? {}, step.styles ?? {});\n  const options = deepmerge(defaultOptions, mergedStyles.options || {}) satisfies StylesOptions;\n  const hideBeacon = step.placement === 'center' || step.disableBeacon;\n  let { width } = options;\n\n  if (window.innerWidth > 480) {\n    width = 380;\n  }\n\n  if ('width' in options) {\n    width =\n      typeof options.width === 'number' && window.innerWidth < options.width\n        ? window.innerWidth - 30\n        : options.width;\n  }\n\n  const overlay = {\n    bottom: 0,\n    left: 0,\n    overflow: 'hidden',\n    position: 'absolute',\n    right: 0,\n    top: 0,\n    zIndex: options.zIndex,\n  };\n\n  const defaultStyles = {\n    beacon: {\n      ...buttonBase,\n      display: hideBeacon ? 'none' : 'inline-block',\n      height: options.beaconSize,\n      position: 'relative',\n      width: options.beaconSize,\n      zIndex: options.zIndex,\n    },\n    beaconInner: {\n      animation: 'joyride-beacon-inner 1.2s infinite ease-in-out',\n      backgroundColor: options.primaryColor,\n      borderRadius: '50%',\n      display: 'block',\n      height: '50%',\n      left: '50%',\n      opacity: 0.7,\n      position: 'absolute',\n      top: '50%',\n      transform: 'translate(-50%, -50%)',\n      width: '50%',\n    },\n    beaconOuter: {\n      animation: 'joyride-beacon-outer 1.2s infinite ease-in-out',\n      backgroundColor: `rgba(${hexToRGB(options.primaryColor).join(',')}, 0.2)`,\n      border: `2px solid ${options.primaryColor}`,\n      borderRadius: '50%',\n      boxSizing: 'border-box',\n      display: 'block',\n      height: '100%',\n      left: 0,\n      opacity: 0.9,\n      position: 'absolute',\n      top: 0,\n      transformOrigin: 'center',\n      width: '100%',\n    },\n    tooltip: {\n      backgroundColor: options.backgroundColor,\n      borderRadius: 5,\n      boxSizing: 'border-box',\n      color: options.textColor,\n      fontSize: 16,\n      maxWidth: '100%',\n      padding: 15,\n      position: 'relative',\n      width,\n    },\n    tooltipContainer: {\n      lineHeight: 1.4,\n      textAlign: 'center',\n    },\n    tooltipTitle: {\n      fontSize: 18,\n      margin: 0,\n    },\n    tooltipContent: {\n      padding: '20px 10px',\n    },\n    tooltipFooter: {\n      alignItems: 'center',\n      display: 'flex',\n      justifyContent: 'flex-end',\n      marginTop: 15,\n    },\n    tooltipFooterSpacer: {\n      flex: 1,\n    },\n    buttonNext: {\n      ...buttonBase,\n      backgroundColor: options.primaryColor,\n      borderRadius: 4,\n      color: '#fff',\n    },\n    buttonBack: {\n      ...buttonBase,\n      color: options.primaryColor,\n      marginLeft: 'auto',\n      marginRight: 5,\n    },\n    buttonClose: {\n      ...buttonBase,\n      color: options.textColor,\n      height: 14,\n      padding: 15,\n      position: 'absolute',\n      right: 0,\n      top: 0,\n      width: 14,\n    },\n    buttonSkip: {\n      ...buttonBase,\n      color: options.textColor,\n      fontSize: 14,\n    },\n    overlay: {\n      ...overlay,\n      backgroundColor: options.overlayColor,\n      mixBlendMode: 'hard-light',\n    },\n    overlayLegacy: {\n      ...overlay,\n    },\n    overlayLegacyCenter: {\n      ...overlay,\n      backgroundColor: options.overlayColor,\n    },\n    spotlight: {\n      ...spotlight,\n      backgroundColor: 'gray',\n    },\n    spotlightLegacy: {\n      ...spotlight,\n      boxShadow: `0 0 0 9999px ${options.overlayColor}, ${options.spotlightShadow}`,\n    },\n    floaterStyles: {\n      arrow: {\n        color: mergedFloaterProps?.styles?.arrow?.color ?? options.arrowColor,\n      },\n      options: {\n        zIndex: options.zIndex + 100,\n      },\n    },\n    options,\n  };\n\n  return deepmerge(defaultStyles, mergedStyles) as StylesWithFloaterStyles;\n}\n","import { Props as FloaterProps } from 'react-floater';\nimport is from 'is-lite';\n\nimport { ACTIONS, LIFECYCLE, STATUS } from '../literals';\n\nimport { Origin, State, Status, Step, StoreHelpers, StoreOptions } from '../types';\n\nimport { hasValidKeys, objectKeys, omit } from './helpers';\n\ntype StateWithContinuous = State & { continuous: boolean };\ntype Listener = (state: State) => void;\ntype PopperData = Parameters<NonNullable<FloaterProps['getPopper']>>[0];\n\nconst defaultState: State = {\n  action: 'init',\n  controlled: false,\n  index: 0,\n  lifecycle: LIFECYCLE.INIT,\n  origin: null,\n  size: 0,\n  status: STATUS.IDLE,\n};\nconst validKeys = objectKeys(omit(defaultState, 'controlled', 'size'));\n\nclass Store {\n  private beaconPopper: PopperData | null;\n  private tooltipPopper: PopperData | null;\n  private data: Map<string, any> = new Map();\n  private listener: Listener | null;\n  private store: Map<string, any> = new Map();\n\n  constructor(options?: StoreOptions) {\n    const { continuous = false, stepIndex, steps = [] } = options ?? {};\n\n    this.setState(\n      {\n        action: ACTIONS.INIT,\n        controlled: is.number(stepIndex),\n        continuous,\n        index: is.number(stepIndex) ? stepIndex : 0,\n        lifecycle: LIFECYCLE.INIT,\n        origin: null,\n        status: steps.length ? STATUS.READY : STATUS.IDLE,\n      },\n      true,\n    );\n\n    this.beaconPopper = null;\n    this.tooltipPopper = null;\n    this.listener = null;\n    this.setSteps(steps);\n  }\n\n  public getState(): State {\n    if (!this.store.size) {\n      return { ...defaultState };\n    }\n\n    return {\n      action: this.store.get('action') || '',\n      controlled: this.store.get('controlled') || false,\n      index: parseInt(this.store.get('index'), 10),\n      lifecycle: this.store.get('lifecycle') || '',\n      origin: this.store.get('origin') || null,\n      size: this.store.get('size') || 0,\n      status: (this.store.get('status') as Status) || '',\n    };\n  }\n\n  private getNextState(state: Partial<State>, force: boolean = false): State {\n    const { action, controlled, index, size, status } = this.getState();\n    const newIndex = is.number(state.index) ? state.index : index;\n    const nextIndex = controlled && !force ? index : Math.min(Math.max(newIndex, 0), size);\n\n    return {\n      action: state.action ?? action,\n      controlled,\n      index: nextIndex,\n      lifecycle: state.lifecycle ?? LIFECYCLE.INIT,\n      origin: state.origin ?? null,\n      size: state.size ?? size,\n      status: nextIndex === size ? STATUS.FINISHED : state.status ?? status,\n    };\n  }\n\n  private getSteps(): Array<Step> {\n    const steps = this.data.get('steps');\n\n    return Array.isArray(steps) ? steps : [];\n  }\n\n  private hasUpdatedState(oldState: State): boolean {\n    const before = JSON.stringify(oldState);\n    const after = JSON.stringify(this.getState());\n\n    return before !== after;\n  }\n\n  private setState(nextState: Partial<StateWithContinuous>, initial: boolean = false) {\n    const state = this.getState();\n\n    const {\n      action,\n      index,\n      lifecycle,\n      origin = null,\n      size,\n      status,\n    } = {\n      ...state,\n      ...nextState,\n    };\n\n    this.store.set('action', action);\n    this.store.set('index', index);\n    this.store.set('lifecycle', lifecycle);\n    this.store.set('origin', origin);\n    this.store.set('size', size);\n    this.store.set('status', status);\n\n    if (initial) {\n      this.store.set('controlled', nextState.controlled);\n      this.store.set('continuous', nextState.continuous);\n    }\n\n    if (this.listener && this.hasUpdatedState(state)) {\n      this.listener(this.getState());\n    }\n  }\n\n  public addListener = (listener: Listener) => {\n    this.listener = listener;\n  };\n\n  public setSteps = (steps: Array<Step>) => {\n    const { size, status } = this.getState();\n    const state = {\n      size: steps.length,\n      status,\n    };\n\n    this.data.set('steps', steps);\n\n    if (status === STATUS.WAITING && !size && steps.length) {\n      state.status = STATUS.RUNNING;\n    }\n\n    this.setState(state);\n  };\n\n  public getHelpers(): StoreHelpers {\n    return {\n      close: this.close,\n      go: this.go,\n      info: this.info,\n      next: this.next,\n      open: this.open,\n      prev: this.prev,\n      reset: this.reset,\n      skip: this.skip,\n    };\n  }\n\n  public getPopper = (name: 'beacon' | 'tooltip'): PopperData | null => {\n    if (name === 'beacon') {\n      return this.beaconPopper;\n    }\n\n    return this.tooltipPopper;\n  };\n\n  public setPopper = (name: 'beacon' | 'tooltip', popper: PopperData) => {\n    if (name === 'beacon') {\n      this.beaconPopper = popper;\n    } else {\n      this.tooltipPopper = popper;\n    }\n  };\n\n  public cleanupPoppers = () => {\n    this.beaconPopper = null;\n    this.tooltipPopper = null;\n  };\n\n  public close = (origin: Origin | null = null) => {\n    const { index, status } = this.getState();\n\n    if (status !== STATUS.RUNNING) {\n      return;\n    }\n\n    this.setState({\n      ...this.getNextState({ action: ACTIONS.CLOSE, index: index + 1, origin }),\n    });\n  };\n\n  public go = (nextIndex: number) => {\n    const { controlled, status } = this.getState();\n\n    if (controlled || status !== STATUS.RUNNING) {\n      return;\n    }\n\n    const step = this.getSteps()[nextIndex];\n\n    this.setState({\n      ...this.getNextState({ action: ACTIONS.GO, index: nextIndex }),\n      status: step ? status : STATUS.FINISHED,\n    });\n  };\n\n  public info = (): State => this.getState();\n\n  public next = () => {\n    const { index, status } = this.getState();\n\n    if (status !== STATUS.RUNNING) {\n      return;\n    }\n\n    this.setState(this.getNextState({ action: ACTIONS.NEXT, index: index + 1 }));\n  };\n\n  public open = () => {\n    const { status } = this.getState();\n\n    if (status !== STATUS.RUNNING) {\n      return;\n    }\n\n    this.setState({\n      ...this.getNextState({ action: ACTIONS.UPDATE, lifecycle: LIFECYCLE.TOOLTIP }),\n    });\n  };\n\n  public prev = () => {\n    const { index, status } = this.getState();\n\n    if (status !== STATUS.RUNNING) {\n      return;\n    }\n\n    this.setState({\n      ...this.getNextState({ action: ACTIONS.PREV, index: index - 1 }),\n    });\n  };\n\n  public reset = (restart = false) => {\n    const { controlled } = this.getState();\n\n    if (controlled) {\n      return;\n    }\n\n    this.setState({\n      ...this.getNextState({ action: ACTIONS.RESET, index: 0 }),\n      status: restart ? STATUS.RUNNING : STATUS.READY,\n    });\n  };\n\n  public skip = () => {\n    const { status } = this.getState();\n\n    if (status !== STATUS.RUNNING) {\n      return;\n    }\n\n    this.setState({\n      action: ACTIONS.SKIP,\n      lifecycle: LIFECYCLE.INIT,\n      status: STATUS.SKIPPED,\n    });\n  };\n\n  public start = (nextIndex?: number) => {\n    const { index, size } = this.getState();\n\n    this.setState({\n      ...this.getNextState(\n        {\n          action: ACTIONS.START,\n          index: is.number(nextIndex) ? nextIndex : index,\n        },\n        true,\n      ),\n      status: size ? STATUS.RUNNING : STATUS.WAITING,\n    });\n  };\n\n  public stop = (advance = false) => {\n    const { index, status } = this.getState();\n\n    if (([STATUS.FINISHED, STATUS.SKIPPED] as Array<Status>).includes(status)) {\n      return;\n    }\n\n    this.setState({\n      ...this.getNextState({ action: ACTIONS.STOP, index: index + (advance ? 1 : 0) }),\n      status: STATUS.PAUSED,\n    });\n  };\n\n  public update = (state: Partial<State>) => {\n    if (!hasValidKeys(state, validKeys)) {\n      throw new Error(`State is not valid. Valid keys: ${validKeys.join(', ')}`);\n    }\n\n    this.setState({\n      ...this.getNextState(\n        {\n          ...this.getState(),\n          ...state,\n          action: state.action ?? ACTIONS.UPDATE,\n          origin: state.origin ?? null,\n        },\n        true,\n      ),\n    });\n  };\n}\n\nexport type StoreInstance = ReturnType<typeof createStore>;\n\nexport default function createStore(options?: StoreOptions) {\n  return new Store(options);\n}\n","import * as React from 'react';\nimport treeChanges from 'tree-changes';\n\nimport {\n  getClientRect,\n  getDocumentHeight,\n  getElement,\n  getElementPosition,\n  getScrollParent,\n  hasCustomScrollParent,\n  hasPosition,\n} from '../modules/dom';\nimport { getBrowser, isLegacy, log } from '../modules/helpers';\n\nimport { LIFECYCLE } from '../literals';\n\nimport { Lifecycle, OverlayProps } from '../types';\n\nimport Spotlight from './Spotlight';\n\ninterface State {\n  isScrolling: boolean;\n  mouseOverSpotlight: boolean;\n  showSpotlight: boolean;\n}\n\ninterface SpotlightStyles extends React.CSSProperties {\n  height: number;\n  left: number;\n  top: number;\n  width: number;\n}\n\nexport default class JoyrideOverlay extends React.Component<OverlayProps, State> {\n  isActive = false;\n  resizeTimeout?: number;\n  scrollTimeout?: number;\n  scrollParent?: Document | Element;\n  state = {\n    isScrolling: false,\n    mouseOverSpotlight: false,\n    showSpotlight: true,\n  };\n\n  componentDidMount() {\n    const { debug, disableScrolling, disableScrollParentFix = false, target } = this.props;\n    const element = getElement(target);\n\n    this.scrollParent = getScrollParent(element ?? document.body, disableScrollParentFix, true);\n    this.isActive = true;\n\n    if (process.env.NODE_ENV !== 'production') {\n      if (!disableScrolling && hasCustomScrollParent(element, true)) {\n        log({\n          title: 'step has a custom scroll parent and can cause trouble with scrolling',\n          data: [{ key: 'parent', value: this.scrollParent }],\n          debug,\n        });\n      }\n    }\n\n    window.addEventListener('resize', this.handleResize);\n  }\n\n  componentDidUpdate(previousProps: OverlayProps) {\n    const { lifecycle, spotlightClicks } = this.props;\n    const { changed } = treeChanges(previousProps, this.props);\n\n    if (changed('lifecycle', LIFECYCLE.TOOLTIP)) {\n      this.scrollParent?.addEventListener('scroll', this.handleScroll, { passive: true });\n\n      setTimeout(() => {\n        const { isScrolling } = this.state;\n\n        if (!isScrolling) {\n          this.updateState({ showSpotlight: true });\n        }\n      }, 100);\n    }\n\n    if (changed('spotlightClicks') || changed('disableOverlay') || changed('lifecycle')) {\n      if (spotlightClicks && lifecycle === LIFECYCLE.TOOLTIP) {\n        window.addEventListener('mousemove', this.handleMouseMove, false);\n      } else if (lifecycle !== LIFECYCLE.TOOLTIP) {\n        window.removeEventListener('mousemove', this.handleMouseMove);\n      }\n    }\n  }\n\n  componentWillUnmount() {\n    this.isActive = false;\n\n    window.removeEventListener('mousemove', this.handleMouseMove);\n    window.removeEventListener('resize', this.handleResize);\n\n    clearTimeout(this.resizeTimeout);\n    clearTimeout(this.scrollTimeout);\n    this.scrollParent?.removeEventListener('scroll', this.handleScroll);\n  }\n\n  hideSpotlight = () => {\n    const { continuous, disableOverlay, lifecycle } = this.props;\n    const hiddenLifecycles = [\n      LIFECYCLE.INIT,\n      LIFECYCLE.BEACON,\n      LIFECYCLE.COMPLETE,\n      LIFECYCLE.ERROR,\n    ] as Lifecycle[];\n\n    return (\n      disableOverlay ||\n      (continuous ? hiddenLifecycles.includes(lifecycle) : lifecycle !== LIFECYCLE.TOOLTIP)\n    );\n  };\n\n  get overlayStyles() {\n    const { mouseOverSpotlight } = this.state;\n    const { disableOverlayClose, placement, styles } = this.props;\n\n    let baseStyles = styles.overlay;\n\n    if (isLegacy()) {\n      baseStyles = placement === 'center' ? styles.overlayLegacyCenter : styles.overlayLegacy;\n    }\n\n    return {\n      cursor: disableOverlayClose ? 'default' : 'pointer',\n      height: getDocumentHeight(),\n      pointerEvents: mouseOverSpotlight ? 'none' : 'auto',\n      ...baseStyles,\n    } as React.CSSProperties;\n  }\n\n  get spotlightStyles(): SpotlightStyles {\n    const { showSpotlight } = this.state;\n    const {\n      disableScrollParentFix = false,\n      spotlightClicks,\n      spotlightPadding = 0,\n      styles,\n      target,\n    } = this.props;\n    const element = getElement(target);\n    const elementRect = getClientRect(element);\n    const isFixedTarget = hasPosition(element);\n    const top = getElementPosition(element, spotlightPadding, disableScrollParentFix);\n\n    return {\n      ...(isLegacy() ? styles.spotlightLegacy : styles.spotlight),\n      height: Math.round((elementRect?.height ?? 0) + spotlightPadding * 2),\n      left: Math.round((elementRect?.left ?? 0) - spotlightPadding),\n      opacity: showSpotlight ? 1 : 0,\n      pointerEvents: spotlightClicks ? 'none' : 'auto',\n      position: isFixedTarget ? 'fixed' : 'absolute',\n      top,\n      transition: 'opacity 0.2s',\n      width: Math.round((elementRect?.width ?? 0) + spotlightPadding * 2),\n    } satisfies React.CSSProperties;\n  }\n\n  handleMouseMove = (event: MouseEvent) => {\n    const { mouseOverSpotlight } = this.state;\n    const { height, left, position, top, width } = this.spotlightStyles;\n\n    const offsetY = position === 'fixed' ? event.clientY : event.pageY;\n    const offsetX = position === 'fixed' ? event.clientX : event.pageX;\n    const inSpotlightHeight = offsetY >= top && offsetY <= top + height;\n    const inSpotlightWidth = offsetX >= left && offsetX <= left + width;\n    const inSpotlight = inSpotlightWidth && inSpotlightHeight;\n\n    if (inSpotlight !== mouseOverSpotlight) {\n      this.updateState({ mouseOverSpotlight: inSpotlight });\n    }\n  };\n\n  handleScroll = () => {\n    const { target } = this.props;\n    const element = getElement(target);\n\n    if (this.scrollParent !== document) {\n      const { isScrolling } = this.state;\n\n      if (!isScrolling) {\n        this.updateState({ isScrolling: true, showSpotlight: false });\n      }\n\n      clearTimeout(this.scrollTimeout);\n\n      this.scrollTimeout = window.setTimeout(() => {\n        this.updateState({ isScrolling: false, showSpotlight: true });\n      }, 50);\n    } else if (hasPosition(element, 'sticky')) {\n      this.updateState({});\n    }\n  };\n\n  handleResize = () => {\n    clearTimeout(this.resizeTimeout);\n\n    this.resizeTimeout = window.setTimeout(() => {\n      if (!this.isActive) {\n        return;\n      }\n\n      this.forceUpdate();\n    }, 100);\n  };\n\n  updateState(state: Partial<State>) {\n    if (!this.isActive) {\n      return;\n    }\n\n    this.setState(previousState => ({ ...previousState, ...state }));\n  }\n\n  render() {\n    const { showSpotlight } = this.state;\n    const { onClickOverlay, placement } = this.props;\n    const { hideSpotlight, overlayStyles, spotlightStyles } = this;\n\n    if (hideSpotlight()) {\n      return null;\n    }\n\n    let spotlight = placement !== 'center' && showSpotlight && (\n      <Spotlight styles={spotlightStyles} />\n    );\n\n    // Hack for Safari bug with mix-blend-mode with z-index\n    if (getBrowser() === 'safari') {\n      const { mixBlendMode, zIndex, ...safariOverlay } = overlayStyles;\n\n      spotlight = <div style={{ ...safariOverlay }}>{spotlight}</div>;\n      delete overlaySt