From dc9d5ea9d7a97b8913226449daf5a0e630ebaa34 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 27 Dec 2023 09:09:41 -0300
Subject: [PATCH] make selectors storybook 8 compatible

---
 src/features/GuidedTour/GuidedTour.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/features/GuidedTour/GuidedTour.tsx b/src/features/GuidedTour/GuidedTour.tsx
index 3864354..18c4756 100644
--- a/src/features/GuidedTour/GuidedTour.tsx
+++ b/src/features/GuidedTour/GuidedTour.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import Joyride, { CallBackProps, STATUS } from "react-joyride";
 import { API } from "@storybook/manager-api";
 import { UPDATE_STORY_ARGS } from "@storybook/core-events";
@@ -34,6 +34,11 @@ export function GuidedTour({
     });
   }, []);
 
+
+  const storyPlaygroundElement = useMemo(() => {
+    return (document.querySelector("#root div[role=main]") || document.querySelector("#storybook-panel-root")) as HTMLElement
+  }, [])
+
   const steps: GuidedTourStep[] = isFinalStep
     ? [
       {
@@ -100,7 +105,7 @@ export function GuidedTour({
         },
       },
       {
-        target: "#root div[role=main]",
+        target: storyPlaygroundElement,
         title: "Interactive story playground",
         content: (
           <>