@gem-sdk/pages 1.56.0 → 1.57.0-dev.45

package/dist/cjs/components/builder/Toolbar.js

@@ -4,51 +4,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var Onboarding = require('./toolbar/Onboarding.js');
+var getDOMElementParents = require('./toolbar/utils/getDOMElementParents.js');
+var _const = require('./toolbar/const.js');
+var getChildrenByAttrSelector = require('./toolbar/utils/getChildrenByAttrSelector.js');
+var findOverflowParent = require('./toolbar/utils/findOverflowParent.js');
+var waitForElementToExist = require('./toolbar/utils/waitForElementToExist.js');
+var isOverParent = require('./toolbar/utils/isOverParent.js');
+var findDOMClosest = require('./toolbar/utils/findDOMClosest.js');
 
-const TOOLBAR_HOVER_HEIGHT = 24;
-const TOOLBAR_ACTIVE_HEIGHT = 32;
-const isPopup = (el)=>{
-    const tag = el.getAttribute('data-component-tag');
-    return tag === 'Dialog';
-};
-const isSticky = (el)=>{
-    const tag = el.getAttribute('data-component-tag');
-    return tag === 'Sticky';
-};
-const isOverToolbarPosition = (el, parent1)=>{
-    const rect = el.getBoundingClientRect();
-    const rectP = parent1.getBoundingClientRect();
-    // 32px = toolbar active height
-    return rect.top - rectP.top < TOOLBAR_ACTIVE_HEIGHT + 1;
-};
-const findOverflowParent = (element, initEl)=>{
-    const thisEl = element;
-    const origEl = initEl || thisEl;
-    if (!thisEl) return;
-    if (isSection(thisEl)) return;
-    if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
-    if (thisEl.parentElement) {
-        return findOverflowParent(thisEl.parentElement, origEl);
-    } else {
-        return;
-    }
-};
-const COMPONENTS_TAG_NOT_LOAD_IMAGES = [
-    'PostPurchaseProductImages'
-];
 const Toolbar = ()=>{
     const currentComponentActive = react.useRef(null);
     const isDragging = react.useRef(false);
     const stopWatchReRenderComponent = react.useRef();
     const isResizeSpacing = react.useRef(false);
-    const [isOnboarding, setIsOnboarding] = react.useState(false);
-    const [countShowOnboarding, setCountShowOnboarding] = react.useState(0);
-    const [onboardingPosition, setOnboardingPosition] = react.useState('bottom');
-    const timeoutRef = react.useRef(null);
-    const timeoutOnboarding = 5000;
+    const cacheHoverComponents = react.useRef([]);
+    const cacheHoverThemeSectionComponents = react.useRef([]);
+    const cacheActiveComponents = react.useRef([]);
     /* Functions */ const changePositionToolbar = ({ state, $toolbar, $component })=>{
-        const $parentOverflow = findOverflowParent($component, $toolbar);
+        const $parentOverflow = findOverflowParent.findOverflowParent($component, $toolbar);
         const rect = $toolbar.getBoundingClientRect();
         const rectComponent = $component.getBoundingClientRect();
         const windowWidth = window.innerWidth;
@@ -63,7 +36,7 @@ const Toolbar = ()=>{
                 $toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
             }
         } else {
-            if (rect.top < TOOLBAR_ACTIVE_HEIGHT + 1) {
+            if (rect.top < _const.TOOLBAR_ACTIVE_HEIGHT + 1) {
                 if (rectComponent?.height <= 60) {
                     $toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
                 } else {
@@ -88,7 +61,7 @@ const Toolbar = ()=>{
     const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isPreventSection, isParent })=>{
         if (!$component && !componentUid) return;
         if (!$component) {
-            const $c = document.querySelector(`[data-uid="${componentUid}"]`);
+            const $c = document.body.querySelector('#storefront')?.querySelector(`[data-uid="${componentUid}"]`);
             if (!$c) return;
             $component = $c;
         }
@@ -97,11 +70,12 @@ const Toolbar = ()=>{
             if (!cUid) return;
             componentUid = cUid;
         }
-        const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
-        const $outline = getChildrenByAttrSelector($component, 'data-outline');
-        const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
-        const $btnAddBottom = getChildrenByAttrSelector($component, 'data-toolbar-add-bottom');
-        const $themeSectionStatus = getChildrenByAttrSelector($component, 'data-theme-section-status');
+        cacheHoverComponents.current.push($component);
+        const $toolbar = getChildrenByAttrSelector.getChildrenByAttrSelector($component, 'data-toolbar');
+        const $outline = getChildrenByAttrSelector.getChildrenByAttrSelector($component, 'data-outline');
+        const $btnAddTop = getChildrenByAttrSelector.getChildrenByAttrSelector($component, 'data-toolbar-add-top');
+        const $btnAddBottom = getChildrenByAttrSelector.getChildrenByAttrSelector($component, 'data-toolbar-add-bottom');
+        const $themeSectionStatus = getChildrenByAttrSelector.getChildrenByAttrSelector($component, 'data-theme-section-status');
         if (isPreventSection && $themeSectionStatus) {
             $themeSectionStatus.setAttribute('data-theme-section-status-active', 'true');
         }
@@ -125,6 +99,7 @@ const Toolbar = ()=>{
                 $outline.setAttribute('data-outline-parent-hover', 'true');
             }
             if (isPreventSection) {
+                cacheHoverThemeSectionComponents.current.push($component);
                 $outline.setAttribute('data-outline-overlay-theme-section', 'true');
             }
             if (focus) {
@@ -144,11 +119,11 @@ const Toolbar = ()=>{
     }, []);
     const setHoverComponentParents = react.useCallback(({ $component, componentUid })=>{
         if (!$component) {
-            const $c = document.querySelector(`[data-uid="${componentUid}"]`);
+            const $c = document.body.querySelector('#storefront')?.querySelector(`[data-uid="${componentUid}"]`);
             if (!$c) return;
             $component = $c;
         }
-        const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])', 1);
+        const $parents = getDOMElementParents.getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])', 1);
         if ($parents.length) {
             for (const $parent of $parents){
                 if ($parent) {
@@ -169,7 +144,7 @@ const Toolbar = ()=>{
     const changePositionToolbarParents = ({ $component, $parents })=>{
         if (!$component) return;
         if (!$parents?.length) return;
-        const $currentToolbar = getChildrenByAttrSelector($component, 'data-toolbar-hover-focus');
+        const $currentToolbar = getChildrenByAttrSelector.getChildrenByAttrSelector($component, 'data-toolbar-hover-focus');
         if ($currentToolbar) {
             const currentRect = $currentToolbar.getBoundingClientRect();
             const isRevert = $currentToolbar.getAttribute('data-toolbar-hover-revert') ? true : false;
@@ -179,7 +154,7 @@ const Toolbar = ()=>{
                 if ($parent) {
                     const tag = $parent.getAttribute('data-component-tag');
                     if (tag === 'Section') continue;
-                    const $toolbar = getChildrenByAttrSelector($parent, 'data-toolbar-hover');
+                    const $toolbar = getChildrenByAttrSelector.getChildrenByAttrSelector($parent, 'data-toolbar-hover');
                     if ($toolbar) {
                         // Ignore with toolbar active
                         const isActive = $toolbar.getAttribute('data-toolbar-active');
@@ -187,7 +162,7 @@ const Toolbar = ()=>{
                         // Start calc
                         const parentRect = $toolbar.getBoundingClientRect();
                         const checkRevert = isRevert || isInside;
-                        if (isOverParent({
+                        if (isOverParent.isOverParent({
                             current: currentRect,
                             parent: parentRect,
                             index,
@@ -197,9 +172,9 @@ const Toolbar = ()=>{
                             // parentStyle.top
                             const diffTop = currentRect.top - parentRect.top;
                             const diffLeft = currentRect.left - parentRect.left;
-                            let newTop = parseFloat(parentStyle.top) + diffTop - (TOOLBAR_HOVER_HEIGHT - 1) * index; // -1 border bottom
+                            let newTop = parseFloat(parentStyle.top) + diffTop - (_const.TOOLBAR_HOVER_HEIGHT - 1) * index; // -1 border bottom
                             if (checkRevert) {
-                                newTop = parseFloat(parentStyle.top) - diffTop + (TOOLBAR_HOVER_HEIGHT - 1) * index; // -1 border bottom
+                                newTop = parseFloat(parentStyle.top) - diffTop + (_const.TOOLBAR_HOVER_HEIGHT - 1) * index; // -1 border bottom
                             }
                             const newLeft = parseFloat(parentStyle.left) + diffLeft;
                             $toolbar.setAttribute('style', `top: ${newTop}px;left: ${newLeft}px;`);
@@ -210,18 +185,23 @@ const Toolbar = ()=>{
             }
         }
     };
-    const removeHoverOverlayComponent = react.useCallback(()=>{
+    const removeHoverThemeSectionComponent = react.useCallback(()=>{
         const clearAttrs = [
-            'data-outline-overlay',
             'data-outline-overlay-theme-section',
             'data-theme-section-status-active'
         ];
-        const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
-        if ($elms) {
-            clearAttrs.forEach((attr)=>{
-                $elms.forEach(($el)=>$el.removeAttribute(attr));
-            });
+        const $hoverThemeSectionComponents = cacheHoverThemeSectionComponents.current;
+        if ($hoverThemeSectionComponents.length) {
+            for (const $hoverThemeSectionComponent of $hoverThemeSectionComponents){
+                const $elms = $hoverThemeSectionComponent.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
+                if ($elms) {
+                    clearAttrs.forEach((attr)=>{
+                        $elms.forEach(($el)=>$el.removeAttribute(attr));
+                    });
+                }
+            }
         }
+        cacheHoverThemeSectionComponents.current = []; // clear
     }, []);
     const removeHoverComponent = react.useCallback(()=>{
         const clearAttrs = [
@@ -235,30 +215,21 @@ const Toolbar = ()=>{
             'data-outline-parent-hover',
             'data-toolbar-hover-overflow'
         ];
-        const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
-        if ($elms) {
-            clearAttrs.forEach((attr)=>{
-                $elms.forEach(($el)=>$el.removeAttribute(attr));
-            });
-        }
-        removeHoverOverlayComponent();
-    }, [
-        removeHoverOverlayComponent
-    ]);
-    const onCloseOnboarding = react.useCallback(()=>{
-        timeoutRef.current && clearTimeout(timeoutRef.current);
-        if (countShowOnboarding > 0) {
-            const eventCreate = new CustomEvent('editor:toolbar:close-onboarding', {
-                bubbles: true,
-                detail: {
-                    close: 'close Onboarding'
+        const $hoverComponents = cacheHoverComponents.current;
+        if ($hoverComponents.length) {
+            for (const $hoverComponent of $hoverComponents){
+                const $elms = $hoverComponent.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
+                if ($elms) {
+                    clearAttrs.forEach((attr)=>{
+                        $elms.forEach(($el)=>$el.removeAttribute(attr));
+                    });
                 }
-            });
-            window.dispatchEvent(eventCreate);
-            setIsOnboarding(false);
+            }
         }
+        removeHoverThemeSectionComponent();
+        cacheHoverComponents.current = []; // clear
     }, [
-        countShowOnboarding
+        removeHoverThemeSectionComponent
     ]);
     const removeActiveComponent = react.useCallback(()=>{
         currentComponentActive.current = null;
@@ -273,48 +244,25 @@ const Toolbar = ()=>{
             'data-outline-force-hover',
             'data-toolbar-active-overflow'
         ];
-        const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
-        if ($elms) {
-            clearAttrs.forEach((attr)=>{
-                $elms.forEach(($el)=>$el.removeAttribute(attr));
-            });
-        }
-        setFocusTextEditor(false);
-        if (stopWatchReRenderComponent.current) stopWatchReRenderComponent.current();
-        onCloseOnboarding();
-    }, [
-        onCloseOnboarding
-    ]);
-    const watchComponentReRender = ($el, callback)=>{
-        // editor:component:render
-        const onComponentReRender = (e)=>{
-            const detail = e.detail;
-            if (detail?.componentUid == currentComponentActive.current?.componentUid) {
-                callback();
-            }
-        };
-        window.removeEventListener('editor:component:render', onComponentReRender);
-        window.addEventListener('editor:component:render', onComponentReRender);
-        const componentTag = $el.getAttribute('data-component-tag');
-        // hotfix cho sale funnel release, nhưng cần tìm solution cho phần này
-        if (componentTag && !COMPONENTS_TAG_NOT_LOAD_IMAGES.includes(componentTag)) {
-            const $images = $el.querySelectorAll('img');
-            if ($images?.length) {
-                $images.forEach(($img)=>{
-                    $img.addEventListener('load', ()=>{
-                        callback();
+        const $activeComponents = cacheActiveComponents.current;
+        if ($activeComponents.length) {
+            for (const $activeComponent of $activeComponents){
+                const $elms = $activeComponent.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
+                if ($elms) {
+                    clearAttrs.forEach((attr)=>{
+                        $elms.forEach(($el)=>$el.removeAttribute(attr));
                     });
-                });
+                }
             }
         }
-        stopWatchReRenderComponent.current = ()=>{
-            window.removeEventListener('editor:component:render', onComponentReRender);
-        };
-    };
+        cacheActiveComponents.current = []; // clear
+        setFocusTextEditor(false);
+        if (stopWatchReRenderComponent.current) stopWatchReRenderComponent.current();
+    }, []);
     const setActiveComponentSpacing = react.useCallback(({ $component })=>{
         if (!$component) return;
         const style = getComputedStyle($component);
-        const $spacing = getChildrenByAttrSelector($component, 'data-spacing');
+        const $spacing = getChildrenByAttrSelector.getChildrenByAttrSelector($component, 'data-spacing');
         const $marginBottom = ($spacing?.querySelector('[data-spacing-margin-bottom]')) || null;
         if ($marginBottom) {
             const $bg = $marginBottom.querySelector('[data-spacing-margin-bottom-bg]') || null;
@@ -327,58 +275,6 @@ const Toolbar = ()=>{
             }
         }
     }, []);
-    const calculateOnboardingPosition = ()=>{
-        const toolbar = document.querySelector('[data-toolbar-active]');
-        const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
-        if (toolbar && toolbarOnboading) {
-            toolbarOnboading?.removeAttribute('data-onboarding-active');
-            setTimeout(()=>{
-                const rect = toolbar.getBoundingClientRect();
-                const rectTop = rect.top || 0;
-                const rectOnboading = toolbarOnboading?.getBoundingClientRect();
-                const onboardingHeight = rectOnboading?.height || 0;
-                const $iframe = parent.document.querySelector('.iframe');
-                const $iframeWin = $iframe?.contentWindow;
-                const iframeWinScrollY = $iframeWin?.scrollY || 0;
-                const iframeHeight = $iframe?.clientHeight || 0;
-                if (rectTop + onboardingHeight > iframeHeight) {
-                    const oboardingTop = rect.top + iframeWinScrollY - onboardingHeight - 8;
-                    toolbarOnboading?.setAttribute('style', `top: ${oboardingTop}px;left: ${rect.left}px;`);
-                    setOnboardingPosition('top');
-                    if ($iframeWin && oboardingTop < rect.top + iframeWinScrollY) {
-                        setTimeout(()=>{
-                            const toTop = oboardingTop - 20;
-                            $iframeWin.scrollTo({
-                                top: toTop,
-                                behavior: 'smooth'
-                            });
-                        }, 200);
-                    }
-                } else {
-                    const oboardingTop = rect.top + iframeWinScrollY + rect.height + 8;
-                    toolbarOnboading?.setAttribute('style', `top: ${oboardingTop}px;left: ${rect.left}px;`);
-                    setOnboardingPosition('bottom');
-                }
-                setCountShowOnboarding((countShowOnboarding)=>countShowOnboarding + 1);
-                toolbarOnboading?.setAttribute('data-onboarding-active', 'true');
-            }, 100);
-        }
-    };
-    const setToolbarOnboarding = react.useCallback(({ $component })=>{
-        if (!$component) return;
-        if (isSection($component) || isPopup($component) || isSticky($component)) return;
-        const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
-        // only show one time
-        if (countShowOnboarding == 0) {
-            calculateOnboardingPosition();
-        } else {
-            onCloseOnboarding();
-            toolbarOnboading?.removeAttribute('data-onboarding-active');
-        }
-    }, [
-        countShowOnboarding,
-        onCloseOnboarding
-    ]);
     const getSelectorComponent = ({ componentUid, productId, articleId, marqueeKey })=>{
         if (articleId) {
             return `${articleId ? `[data-article-id="${articleId}"][data-uid="${componentUid}"], [data-article-id="${articleId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
@@ -396,17 +292,18 @@ const Toolbar = ()=>{
             articleId,
             marqueeKey
         });
-        const $component = await waitForElementToExist(selector, timeAwait);
+        const $component = await waitForElementToExist.waitForElementToExist(selector, timeAwait);
         if (!$component) return;
         if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && articleId == currentComponentActive.current?.articleId && marqueeKey == currentComponentActive.current?.marqueeKey) return;
         if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || articleId !== currentComponentActive.current?.articleId || forceReActive) removeActiveComponent();
         if (!forceReActive && componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || marqueeKey !== currentComponentActive.current?.marqueeKey) {
             removeActiveComponent();
         }
-        const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
-        const $outline = getChildrenByAttrSelector($component, 'data-outline');
-        const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
-        const $btnAddBottom = getChildrenByAttrSelector($component, 'data-toolbar-add-bottom');
+        cacheActiveComponents.current.push($component);
+        const $toolbar = getChildrenByAttrSelector.getChildrenByAttrSelector($component, 'data-toolbar');
+        const $outline = getChildrenByAttrSelector.getChildrenByAttrSelector($component, 'data-outline');
+        const $btnAddTop = getChildrenByAttrSelector.getChildrenByAttrSelector($component, 'data-toolbar-add-top');
+        const $btnAddBottom = getChildrenByAttrSelector.getChildrenByAttrSelector($component, 'data-toolbar-add-bottom');
         if ($toolbar) {
             currentComponentActive.current = {
                 componentUid,
@@ -431,13 +328,17 @@ const Toolbar = ()=>{
         if ($btnAddBottom) {
             $btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
         }
-        const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
+        const { $isChildOfMarquee, $section } = findDOMClosest.findDOMClosest($component, {
+            $isChildOfMarquee: '[data-component-tag="Marquee"]',
+            $section: '[data-component-tag="Section"]'
+        });
         // Active same element in product list
-        if (productId || articleId || isChildOfMarquee) {
-            const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
+        if ($section && (productId || articleId || $isChildOfMarquee)) {
+            const $relatedElements = $section.querySelectorAll(`[data-uid="${componentUid}"]`);
             if ($relatedElements?.length) {
                 $relatedElements.forEach(($relatedElement)=>{
-                    const $outline = getChildrenByAttrSelector($relatedElement, 'data-outline');
+                    cacheActiveComponents.current.push($relatedElement);
+                    const $outline = getChildrenByAttrSelector.getChildrenByAttrSelector($relatedElement, 'data-outline');
                     if ($outline) {
                         $outline.setAttribute('data-outline-active', 'true');
                     }
@@ -447,35 +348,16 @@ const Toolbar = ()=>{
         setActiveComponentSpacing({
             $component
         });
-        timeoutRef.current && clearTimeout(timeoutRef.current);
-        timeoutRef.current = setTimeout(()=>{
-            if ($component) {
-                setToolbarOnboarding({
-                    $component
-                });
-            }
-        }, timeoutOnboarding);
         removeHoverComponent();
-        // Reactive when component re-render
-        watchComponentReRender($component, ()=>{
-            setActiveComponent({
-                componentUid,
-                productId,
-                articleId,
-                timeAwait: 2000,
-                forceReActive: true
-            });
-        });
     }, [
         removeActiveComponent,
         removeHoverComponent,
-        setActiveComponentSpacing,
-        setToolbarOnboarding
+        setActiveComponentSpacing
     ]);
     const setFocusTextEditor = async (value)=>{
         if (!value) {
-            const $components = document.querySelectorAll('[data-outline-editor-inline-focus],[data-toolbar-editor-inline-focus],[data-spacing-hidden]');
-            if ($components.length) {
+            const $components = document.body.querySelector('#storefront')?.querySelectorAll('[data-outline-editor-inline-focus],[data-toolbar-editor-inline-focus],[data-spacing-hidden]');
+            if ($components?.length) {
                 $components.forEach(($component)=>{
                     if ($component) {
                         $component.removeAttribute('data-toolbar-editor-inline-focus');
@@ -486,13 +368,14 @@ const Toolbar = ()=>{
             }
         } else {
             if (currentComponentActive.current?.componentUid) {
-                const componentUid = currentComponentActive.current?.componentUid;
-                const productId = currentComponentActive.current?.productId;
-                const $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, 500);
+                const selector = getSelectorComponent({
+                    ...currentComponentActive.current
+                });
+                const $component = await waitForElementToExist.waitForElementToExist(selector, 500);
                 if ($component) {
-                    const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
-                    const $outline = getChildrenByAttrSelector($component, 'data-outline');
-                    const $spacing = getChildrenByAttrSelector($component, 'data-spacing');
+                    const $toolbar = getChildrenByAttrSelector.getChildrenByAttrSelector($component, 'data-toolbar');
+                    const $outline = getChildrenByAttrSelector.getChildrenByAttrSelector($component, 'data-outline');
+                    const $spacing = getChildrenByAttrSelector.getChildrenByAttrSelector($component, 'data-spacing');
                     if ($toolbar) {
                         if (value) {
                             $toolbar.setAttribute('data-toolbar-editor-inline-focus', 'true');
@@ -517,26 +400,30 @@ const Toolbar = ()=>{
         const $themeSectionUid = $themeSection?.getAttribute('data-uid');
         const isActiveThemeSection = $themeSection && $themeSectionUid === currentComponentActive.current?.componentUid;
         if (!isActiveThemeSection) return;
-        const $themeSectionStatus = getChildrenByAttrSelector($themeSection, 'data-theme-section-status');
+        cacheHoverThemeSectionComponents.current.push($themeSection);
+        const $themeSectionStatus = getChildrenByAttrSelector.getChildrenByAttrSelector($themeSection, 'data-theme-section-status');
         if ($themeSectionStatus) {
             $themeSectionStatus.setAttribute('data-theme-section-status-active', 'true');
         }
     }, []);
     const setShowParents = async ({ value })=>{
-        if (!value) {
+        if (!value || !currentComponentActive.current) {
             return;
         }
-        const $component = await waitForElementToExist(`${currentComponentActive.current?.productId ? `[data-product-id="${currentComponentActive.current?.productId}"] ` : ''}[data-uid="${currentComponentActive.current?.componentUid}"]`, 500);
+        const selector = getSelectorComponent({
+            ...currentComponentActive.current
+        });
+        const $component = await waitForElementToExist.waitForElementToExist(selector, 500);
         if ($component) {
             const $parents = $component?.querySelectorAll('[data-toolbar-parent]');
             if ($parents.length) {
                 const onHover = ($parent)=>{
                     const uid = $parent.getAttribute('data-parent-uid');
                     if (!uid) return;
-                    const $parentComponents = document.querySelectorAll(`[data-uid="${uid}"]`);
-                    if ($parentComponents.length) {
+                    const $parentComponents = document.body.querySelector('#storefront')?.querySelectorAll(`[data-uid="${uid}"]`);
+                    if ($parentComponents?.length) {
                         $parentComponents.forEach(($parentComponent)=>{
-                            const $outline = getChildrenByAttrSelector($parentComponent, 'data-outline');
+                            const $outline = getChildrenByAttrSelector.getChildrenByAttrSelector($parentComponent, 'data-outline');
                             if ($outline) {
                                 $outline.setAttribute('data-outline-force-hover', 'true');
                                 $outline.setAttribute('data-outline-force-overlay', 'true');
@@ -547,10 +434,10 @@ const Toolbar = ()=>{
                 const outHover = ($parent)=>{
                     const uid = $parent.getAttribute('data-parent-uid');
                     if (!uid) return;
-                    const $parentComponents = document.querySelectorAll(`[data-uid="${uid}"]`);
-                    if ($parentComponents.length) {
+                    const $parentComponents = document.body.querySelector('#storefront')?.querySelectorAll(`[data-uid="${uid}"]`);
+                    if ($parentComponents?.length) {
                         $parentComponents.forEach(($parentComponent)=>{
-                            const $outline = getChildrenByAttrSelector($parentComponent, 'data-outline');
+                            const $outline = getChildrenByAttrSelector.getChildrenByAttrSelector($parentComponent, 'data-outline');
                             if ($outline) {
                                 $outline.removeAttribute('data-outline-force-hover');
                                 $outline.removeAttribute('data-outline-force-overlay');
@@ -562,12 +449,12 @@ const Toolbar = ()=>{
                     const uid = $parent.getAttribute('data-parent-uid');
                     if (!uid) return;
                     const isElementInsideProduct = async ()=>{
-                        const $component = await waitForElementToExist(`[data-uid="${uid}"]`, 500);
+                        const $component = await waitForElementToExist.waitForElementToExist(`[data-uid="${uid}"]`, 500);
                         const $product = $component?.closest('[data-product-id]');
                         return !!($product?.getAttribute('data-product-id') || '');
                     };
                     const isElementInsideArticle = async ()=>{
-                        const $component = await waitForElementToExist(`[data-uid="${uid}"]`, 500);
+                        const $component = await waitForElementToExist.waitForElementToExist(`[data-uid="${uid}"]`, 500);
                         const $article = $component?.closest('[data-article-id]');
                         return !!($article?.getAttribute('data-article-id') || '');
                     };
@@ -584,7 +471,8 @@ const Toolbar = ()=>{
                         detail: {
                             componentUid: uid,
                             productId,
-                            articleId
+                            articleId,
+                            elementTag: $parent.getAttribute('data-component-tag') || ''
                         }
                     });
                     outHover($parent);
@@ -602,42 +490,35 @@ const Toolbar = ()=>{
         if (isDragging.current) return;
         if (isResizeSpacing.current) return;
         const $target = e.target;
+        // check target
         if (!$target || typeof $target.closest !== 'function') {
-            removeHoverOverlayComponent();
+            removeHoverThemeSectionComponent();
+            removeHoverComponent();
             return;
         }
-        const $toolbarHover = $target.closest('[data-toolbar-hover]');
+        const { $toolbarHover, $component, $themeSection, $shopifySection } = findDOMClosest.findDOMClosest($target, {
+            $toolbarHover: '[data-toolbar-hover]',
+            $component: '[data-toolbar-wrap]',
+            $themeSection: '[data-theme-section]',
+            $shopifySection: '[data-shopify-section]'
+        });
         if ($toolbarHover) {
             // Disable feature overlay when hover to toolbar parents
             return;
-        // removeHoverOverlayComponent(); // remove overlay old
-        // // Hover to toolbar is focus
-        // if ($toolbarHover?.getAttribute('data-toolbar-hover-focus')) return;
-        // const $component = $target.closest('[data-toolbar-wrap]');
-        // if (!$component) return;
-        // const $outline = getChildrenByAttrSelector($component, 'data-outline');
-        // if (!$outline) return;
-        // const isThemeSection = $component.getAttribute('data-theme-section');
-        // const outlineOverlay = isThemeSection
-        //   ? 'data-outline-overlay-theme-section'
-        //   : 'data-outline-overlay';
-        // $outline.setAttribute(outlineOverlay, 'true');
         }
         // Hover to other component
-        const $component = $target.closest('[data-toolbar-wrap]');
         const componentUid = $component?.getAttribute('data-uid');
         if (!$component || !componentUid || componentUid == 'ROOT') {
             removeHoverComponent();
             return;
         }
-        const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
-        const $outline = getChildrenByAttrSelector($component, 'data-outline');
-        if ($outline) $outline.removeAttribute('data-outline-overlay');
+        const $toolbar = getChildrenByAttrSelector.getChildrenByAttrSelector($component, 'data-toolbar');
         if (!componentUid) return;
         if (componentUid == 'ROOT') return;
         if ($toolbar?.getAttribute('data-toolbar-hover-focus')) return;
         if (!$toolbar?.getAttribute('data-toolbar-hover-focus')) removeHoverComponent();
         hoverActiveThemeSection($target);
+        const $preventSection = $themeSection || $shopifySection;
         // Disable event when hover active component
         if (componentUid == currentComponentActive.current?.componentUid) {
             if (currentComponentActive.current.productId) {
@@ -650,7 +531,6 @@ const Toolbar = ()=>{
                     }
                 }
             }
-            const $preventSection = $target.closest('[data-theme-section]') || $target.closest('[data-shopify-section]');
             if ($preventSection) {
                 setHoverComponent({
                     $component: $preventSection,
@@ -661,7 +541,6 @@ const Toolbar = ()=>{
                 return;
             }
         }
-        const $preventSection = $target.closest('[data-theme-section]') || $target.closest('[data-shopify-section]');
         if ($preventSection) {
             setHoverComponent({
                 $component: $preventSection,
@@ -684,7 +563,7 @@ const Toolbar = ()=>{
         removeHoverComponent,
         setHoverComponent,
         setHoverComponentParents,
-        removeHoverOverlayComponent,
+        removeHoverThemeSectionComponent,
         currentComponentActive
     ]);
     const onActiveComponent = react.useCallback((e)=>{
@@ -749,10 +628,10 @@ const Toolbar = ()=>{
     ]);
     const setHoverParentComponent = (uid, type)=>{
         if (!uid) return;
-        const $parentComponents = document.querySelectorAll(`[data-uid="${uid}"]`);
-        if ($parentComponents.length) {
+        const $parentComponents = document.body.querySelector('#storefront')?.querySelectorAll(`[data-uid="${uid}"]`);
+        if ($parentComponents?.length) {
             $parentComponents.forEach(($parentComponent)=>{
-                const $outline = getChildrenByAttrSelector($parentComponent, 'data-outline');
+                const $outline = getChildrenByAttrSelector.getChildrenByAttrSelector($parentComponent, 'data-outline');
                 if ($outline) {
                     if (type === 'in') {
                         $outline.setAttribute('data-outline-force-hover', 'true');
@@ -774,19 +653,14 @@ const Toolbar = ()=>{
     }, [
         isDragging
     ]);
-    const onToolbarOnboarding = react.useCallback((e)=>{
+    const onComponentReRender = (e)=>{
         const detail = e.detail;
-        if (detail?.isNewUser) {
-            setIsOnboarding(true);
-        }
-    }, []);
-    const onWindowResize = react.useCallback(()=>{
-        if (isOnboarding) {
-            calculateOnboardingPosition();
+        if (currentComponentActive.current?.componentUid && detail?.componentUid == currentComponentActive.current?.componentUid) {
+            setActiveComponent({
+                ...currentComponentActive.current
+            });
         }
-    }, [
-        isOnboarding
-    ]);
+    };
     /* Register event */ react.useEffect(()=>{
         document.addEventListener('mousemove', onMouseMove);
         window.addEventListener('editor:active-component', onActiveComponent);
@@ -796,8 +670,7 @@ const Toolbar = ()=>{
         window.addEventListener('editor:toolbar:show-parents', onShowParents);
         window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
         window.addEventListener('editor:hover-component', onHoverComponent);
-        window.addEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
-        window.addEventListener('resize', onWindowResize);
+        window.addEventListener('editor:component:render', onComponentReRender);
         return ()=>{
             document.removeEventListener('mousemove', onMouseMove);
             window.removeEventListener('editor:active-component', onActiveComponent);
@@ -807,8 +680,7 @@ const Toolbar = ()=>{
             window.removeEventListener('editor:toolbar:show-parents', onShowParents);
             window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
             window.removeEventListener('editor:hover-component', onHoverComponent);
-            window.removeEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
-            window.removeEventListener('resize', onWindowResize);
+            window.removeEventListener('editor:component:render', onComponentReRender);
         };
     }, [
         onMouseMove,
@@ -819,91 +691,9 @@ const Toolbar = ()=>{
         onShowParents,
         onResizeSpacing,
         onHoverComponent,
-        onToolbarOnboarding,
-        onWindowResize
+        onComponentReRender
     ]);
-    return isOnboarding && /*#__PURE__*/ jsxRuntime.jsx(Onboarding.default, {
-        enable: true,
-        position: onboardingPosition,
-        onCloseOnboarding: onCloseOnboarding
-    });
-};
-const getDOMElementParents = ($el, selector, limit)=>{
-    // Set up a parent array
-    const parents = [];
-    // Push each parent $elms to the array
-    while($el){
-        $el = $el.parentElement ?? undefined;
-        if ($el) {
-            if ($el.tagName === 'BODY' || $el.getAttribute('data-uid') === 'ROOT') {
-                break;
-            }
-            if (selector) {
-                if ($el.matches(selector)) {
-                    parents.push($el);
-                    if (limit && parents.length == limit) {
-                        return parents;
-                    }
-                }
-                continue;
-            }
-            parents.push($el);
-            if (limit && parents.length == limit) {
-                return parents;
-            }
-        }
-    }
-    // Return our parent array
-    return parents;
-};
-const getChildrenByAttrSelector = ($el, attrSelector)=>{
-    const childLen = $el.children.length;
-    if (childLen) {
-        for(let i = 0; i < childLen; i++){
-            const children = $el.children[i];
-            if (children) {
-                const is = children.getAttribute(attrSelector);
-                if (is) {
-                    return children;
-                }
-            }
-        }
-    }
-};
-const isOverParent = ({ current, parent: parent1, index, revert })=>{
-    for(let i = 0; i < index; i++){
-        let is = current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent1.top && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent1.top + parent1.height || current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent1.top + parent1.height && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent1.top;
-        if (revert) {
-            is = current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent1.bottom && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent1.bottom - parent1.height || current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent1.bottom - parent1.height && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent1.bottom;
-        }
-        if (is) return true;
-    }
-    return false;
-};
-const waitForElementToExist = (selector, timeout = 200)=>{
-    return new Promise((resolve)=>{
-        const intervalID = setInterval(()=>{
-            const el = document.querySelector(selector);
-            if (el) {
-                clearInterval(intervalID);
-                clearTimeout(timeoutID);
-                resolve(el);
-            }
-        }, 50);
-        const timeoutID = setTimeout(()=>{
-            clearInterval(intervalID);
-            clearTimeout(timeoutID);
-            resolve(null);
-        }, timeout);
-    });
-};
-const notVisible = (el)=>{
-    const overflow = getComputedStyle(el).overflow;
-    return overflow !== 'visible';
-};
-const isSection = (el)=>{
-    const tag = el.getAttribute('data-component-tag');
-    return tag === 'Section';
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {});
 };
 var Toolbar$1 = /*#__PURE__*/ react.memo(Toolbar);