@gem-sdk/pages 2.0.0-dev.890 → 2.0.0-staging.118

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

@@ -1 +1,701 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react"),Onboarding=require("./toolbar/Onboarding.js");const TOOLBAR_HOVER_HEIGHT=24,TOOLBAR_ACTIVE_HEIGHT=32,getDOMElementParents=(t,e,r)=>{let o=[];for(;t;)if(t=t.parentElement??void 0){if("BODY"===t.tagName||"ROOT"===t.getAttribute("data-uid"))break;if(e){if(t.matches(e)&&(o.push(t),r&&o.length==r))return o;continue}if(o.push(t),r&&o.length==r)break}return o},getChildrenByAttrSelector=(t,e)=>{let r=t.children.length;if(r)for(let o=0;o<r;o++){let r=t.children[o];if(r){let t=r.getAttribute(e);if(t)return r}}},isOverParent=({current:t,parent:e,index:r,revert:o})=>{for(let a=0;a<r;a++){let r=t.top-23*a>=e.top&&t.top-23*a<=e.top+e.height||t.top-23*a>=e.top+e.height&&t.top-23*a<=e.top;if(o&&(r=t.bottom+23*a>=e.bottom&&t.bottom+23*a<=e.bottom-e.height||t.bottom+23*a>=e.bottom-e.height&&t.bottom+23*a<=e.bottom),r)return!0}return!1},waitForElementToExist=(t,e=200)=>new Promise(r=>{let o=setInterval(()=>{let e=document.querySelector(t);e&&(clearInterval(o),clearTimeout(a),r(e))},50),a=setTimeout(()=>{clearInterval(o),clearTimeout(a),r(null)},e)}),notVisible=t=>{let e=getComputedStyle(t).overflow;return"visible"!==e},isSection=t=>{let e=t.getAttribute("data-component-tag");return"Section"===e},isLayoutElement=t=>{let e=t.getAttribute("data-component-tag");return"Row"===e||"Product"===e},isPopup=t=>{let e=t.getAttribute("data-component-tag");return"Dialog"===e},isSticky=t=>{let e=t.getAttribute("data-component-tag");return"Sticky"===e},isOverToolbarPosition=(t,e)=>{let r=t.getBoundingClientRect(),o=e.getBoundingClientRect();return r.top-o.top<33},findOverflowParent=(t,e)=>{let r=e||t;if(t&&!isSection(t))return notVisible(t)&&isOverToolbarPosition(e,t)?t:t.parentElement?findOverflowParent(t.parentElement,r):void 0},COMPONENTS_TAG_NOT_LOAD_IMAGES=["PostPurchaseProductImages"],Toolbar=()=>{let t=react.useRef(null),e=react.useRef(!1),r=react.useRef(),o=react.useRef(!1),a=react.useRef(!1),[i,n]=react.useState(!1),[l,d]=react.useState(0),[u,c]=react.useState("bottom"),s=react.useRef(null),b=({state:t,$toolbar:e,$component:r})=>{let o=findOverflowParent(r,e),a=e.getBoundingClientRect(),i=r.getBoundingClientRect(),n=window.innerWidth;o?i?.height<=60?e.setAttribute(`data-toolbar-${t}-revert`,"true"):e.setAttribute(`data-toolbar-${t}-inside`,"true"):a.top<33&&(i?.height<=60?e.setAttribute(`data-toolbar-${t}-revert`,"true"):e.setAttribute(`data-toolbar-${t}-inside`,"true")),i.left+a.width>n&&e.setAttribute(`data-toolbar-${t}-overflow`,"true");let l=r?.closest('[aria-label="Dialog body"]');if(l){let r=l.getBoundingClientRect(),o=r.left+r.width-20;i.left+a.width>o&&e.setAttribute(`data-toolbar-${t}-overflow`,"true")}},m=react.useCallback(({$component:t,componentUid:e,focus:r,isPreventSection:o,isParent:a})=>{if(!t&&!e)return;if(!t){let r=document.querySelector(`[data-uid="${e}"]`);if(!r)return;t=r}if(!e){let r=t.getAttribute("data-uid");if(!r)return;e=r}let i=getChildrenByAttrSelector(t,"data-toolbar"),n=getChildrenByAttrSelector(t,"data-outline"),l=getChildrenByAttrSelector(t,"data-toolbar-add-top"),d=getChildrenByAttrSelector(t,"data-toolbar-add-bottom"),u=getChildrenByAttrSelector(t,"data-column"),c=getChildrenByAttrSelector(t,"data-theme-section-status");o&&c&&c.setAttribute("data-theme-section-status-active","true"),i&&(i.removeAttribute("style"),a||i.setAttribute("data-toolbar-hover","true"),r&&i.setAttribute("data-toolbar-hover-focus","true"),b({$toolbar:i,$component:t,state:"hover"})),n&&(n.setAttribute("data-outline-hover","true"),a&&n.setAttribute("data-outline-parent-hover","true"),o&&n.setAttribute("data-outline-overlay-theme-section","true"),r&&n.setAttribute("data-outline-hover-focus","true")),l&&!a&&l.setAttribute("data-toolbar-add-hover","true"),d&&!a&&d.setAttribute("data-toolbar-add-hover","true"),u&&u.setAttribute("data-column-visible","true")},[]),v=react.useCallback(({$component:t,componentUid:e})=>{if(!t){let r=document.querySelector(`[data-uid="${e}"]`);if(!r)return;t=r}let r=getDOMElementParents(t,'[data-uid][data-component-type="component"]:not([data-component-no-setting])',1);if(r.length){for(let t of r)t&&m({$component:t,isParent:!0});f({$component:t,$parents:r})}},[m]),f=({$component:t,$parents:e})=>{if(!t||!e?.length)return;let r=getChildrenByAttrSelector(t,"data-toolbar-hover-focus");if(r){let t=r.getBoundingClientRect(),o=!!r.getAttribute("data-toolbar-hover-revert"),a=!!r.getAttribute("data-toolbar-hover-inside"),i=1;for(let r of e)if(r){let e=r.getAttribute("data-component-tag");if("Section"===e)continue;let n=getChildrenByAttrSelector(r,"data-toolbar-hover");if(n){let e=n.getAttribute("data-toolbar-active");if(e)continue;let r=n.getBoundingClientRect(),l=o||a;if(isOverParent({current:t,parent:r,index:i,revert:l})){let e=getComputedStyle(n),o=t.top-r.top,a=t.left-r.left,d=parseFloat(e.top)+o-23*i;l&&(d=parseFloat(e.top)-o+23*i);let u=parseFloat(e.left)+a;n.setAttribute("style",`top: ${d}px;left: ${u}px;`),i++}}}}},g=react.useCallback(()=>{let t=["data-outline-overlay","data-outline-overlay-theme-section","data-theme-section-status-active"],e=document.querySelectorAll(t.map(t=>`[${t}]`).join(","));e&&t.forEach(t=>{e.forEach(e=>e.removeAttribute(t))})},[]),p=react.useCallback(()=>{let t=["data-toolbar-hover-focus","data-toolbar-hover","data-outline-hover-focus","data-toolbar-hover-revert","data-toolbar-hover-inside","data-outline-hover","data-toolbar-add-hover","data-column-visible","data-outline-parent-hover","data-toolbar-hover-overflow"],e=document.querySelectorAll(t.map(t=>`[${t}]`).join(","));e&&t.forEach(t=>{e.forEach(e=>e.removeAttribute(t))}),g()},[g]),h=react.useCallback(()=>{if(s.current&&clearTimeout(s.current),l>0){let t=new CustomEvent("editor:toolbar:close-onboarding",{bubbles:!0,detail:{close:"close Onboarding"}});window.dispatchEvent(t),n(!1)}},[l]),A=react.useCallback(()=>{t.current=null;let e=["data-toolbar-active","data-outline-active","data-toolbar-add-active","data-toolbar-active-revert","data-toolbar-active-inside","data-spacing-margin-bottom-active","data-toolbar-force-hover","data-outline-force-hover","data-column-force-visible","data-toolbar-active-overflow"],o=document.querySelectorAll(e.map(t=>`[${t}]`).join(","));o&&e.forEach(t=>{o.forEach(e=>e.removeAttribute(t))}),B(!1),r.current&&r.current(),h()},[h]),y=(e,o)=>{let a=e=>{let r=e.detail;r?.componentUid==t.current?.componentUid&&o()};window.removeEventListener("editor:component:render",a),window.addEventListener("editor:component:render",a);let i=e.getAttribute("data-component-tag");if(i&&!COMPONENTS_TAG_NOT_LOAD_IMAGES.includes(i)){let t=e.querySelectorAll("img");t?.length&&t.forEach(t=>{t.addEventListener("load",()=>{o()})})}r.current=()=>{window.removeEventListener("editor:component:render",a)}},w=react.useCallback(({$component:t})=>{if(!t)return;let e=getComputedStyle(t),r=getChildrenByAttrSelector(t,"data-spacing"),o=r?.querySelector("[data-spacing-margin-bottom]")||null;if(o){let r=o.querySelector("[data-spacing-margin-bottom-bg]")||null,a=o.querySelector("[data-spacing-margin-bottom-drag]")||null;if(r&&a){let i=e.marginBottom;if(0>parseFloat(i)&&(i="0"),r.style.height=i,a.style.top=i,o.setAttribute("data-spacing-margin-bottom-active","true"),isLayoutElement(t))r.style.left="0";else{let t=e.paddingLeft,o=`-${t}`,i=`translate(${o}, -100%)`;r.style.left=o,a.style.transform=i}}}},[]),E=()=>{let t=document.querySelector("[data-toolbar-active]"),e=document.querySelector("[data-toolbar-onboarding]");t&&e&&(e?.removeAttribute("data-onboarding-active"),setTimeout(()=>{let r=t.getBoundingClientRect(),o=r.top||0,a=e?.getBoundingClientRect(),i=a?.height||0,n=parent.document.querySelector(".iframe"),l=n?.contentWindow,u=l?.scrollY||0,s=n?.clientHeight||0;if(o+i>s){let t=r.top+u-i-8;e?.setAttribute("style",`top: ${t}px;left: ${r.left}px;`),c("top"),l&&t<r.top+u&&setTimeout(()=>{let e=t-20;l.scrollTo({top:e,behavior:"smooth"})},200)}else{let t=r.top+u+r.height+8;e?.setAttribute("style",`top: ${t}px;left: ${r.left}px;`),c("bottom")}d(t=>t+1),e?.setAttribute("data-onboarding-active","true")},100))},S=react.useCallback(({$component:t})=>{if(!t||isSection(t)||isPopup(t)||isSticky(t))return;let e=document.querySelector("[data-toolbar-onboarding]");0==l?E():(h(),e?.removeAttribute("data-onboarding-active"))},[l,h]),C=({componentUid:t,productId:e,marqueeKey:r})=>r?`[marquee-item-key="${r}"] [data-uid="${t}"]`:`${e?`[data-product-id="${e}"][data-uid="${t}"], [data-product-id="${e}"] [data-uid="${t}"]`:`[data-uid="${t}"]`}`,$=react.useCallback(async({componentUid:e,productId:r,timeAwait:o=600,forceReActive:a,marqueeKey:i})=>{if(!e)return;let n=C({componentUid:e,productId:r,marqueeKey:i}),l=await waitForElementToExist(n,o);if(!l||!a&&e==t.current?.componentUid&&r==t.current?.productId&&i==t.current?.marqueeKey)return;(a||e===t.current?.componentUid)&&r===t.current?.productId&&i===t.current?.marqueeKey||A();let d=getChildrenByAttrSelector(l,"data-toolbar"),u=getChildrenByAttrSelector(l,"data-outline"),c=getChildrenByAttrSelector(l,"data-toolbar-add-top"),m=getChildrenByAttrSelector(l,"data-toolbar-add-bottom"),v=getChildrenByAttrSelector(l,"data-column");d&&(t.current={componentUid:e,productId:r,marqueeKey:i},d.removeAttribute("style"),d.setAttribute("data-toolbar-active","true"),b({$toolbar:d,$component:l,state:"active"})),u&&u.setAttribute("data-outline-active","true"),c&&c.setAttribute("data-toolbar-add-active","true"),m&&m.setAttribute("data-toolbar-add-active","true"),v&&v.setAttribute("data-column-force-visible","true");let f=!!l.closest('[data-component-tag="Marquee"]');if(r||f){let t=document.querySelectorAll(`[data-uid="${e}"]`);t?.length&&t.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&e.setAttribute("data-outline-active","true")})}w({$component:l}),s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{S({$component:l})},5e3),p(),y(l,()=>{$({componentUid:e,productId:r,timeAwait:2e3,forceReActive:!0})})},[A,p,w,S]),B=async e=>{if(e){if(t.current?.componentUid){let r=t.current?.componentUid,o=t.current?.productId,a=await waitForElementToExist(`${o?`[data-product-id="${o}"] `:""}[data-uid="${r}"]`,500);if(console.log(" $component",a),a){let t=getChildrenByAttrSelector(a,"data-toolbar"),r=getChildrenByAttrSelector(a,"data-outline"),o=getChildrenByAttrSelector(a,"data-spacing");t&&e&&t.setAttribute("data-toolbar-editor-inline-focus","true"),r&&e&&r.setAttribute("data-outline-editor-inline-focus","true"),o&&e&&o.setAttribute("data-spacing-hidden","true")}}}else{let t=document.querySelectorAll("[data-outline-editor-inline-focus],[data-toolbar-editor-inline-focus],[data-spacing-hidden]");t.length&&t.forEach(t=>{t&&(t.removeAttribute("data-toolbar-editor-inline-focus"),t.removeAttribute("data-outline-editor-inline-focus"),t.removeAttribute("data-spacing-hidden"))})}},L=react.useCallback(e=>{let r=e.closest("[data-theme-section]"),o=r?.getAttribute("data-uid"),a=r&&o===t.current?.componentUid;if(!a)return;let i=getChildrenByAttrSelector(r,"data-theme-section-status");i&&i.setAttribute("data-theme-section-status-active","true")},[]),O=async({value:e})=>{if(!e)return;let r=await waitForElementToExist(`${t.current?.productId?`[data-product-id="${t.current?.productId}"] `:""}[data-uid="${t.current?.componentUid}"]`,500);if(r){let e=r?.querySelectorAll("[data-toolbar-parent]");if(e.length){let r=t=>{let e=t.getAttribute("data-parent-uid");if(!e)return;let r=document.querySelectorAll(`[data-uid="${e}"]`);r.length&&r.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&(e.setAttribute("data-outline-force-hover","true"),e.setAttribute("data-outline-force-overlay","true"))})},o=t=>{let e=t.getAttribute("data-parent-uid");if(!e)return;let r=document.querySelectorAll(`[data-uid="${e}"]`);r.length&&r.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&(e.removeAttribute("data-outline-force-hover"),e.removeAttribute("data-outline-force-overlay"))})},a=async e=>{let r=e.getAttribute("data-parent-uid");if(!r)return;let a=async()=>{let t=await waitForElementToExist(`[data-uid="${r}"]`,500),e=t?.closest("[data-product-id]"),o=e?.getAttribute("data-product-id")||"";return!!o},i="";await a()&&(i=t.current?.productId||"");let n=new CustomEvent("editor:toolbar:force-active-component",{bubbles:!0,detail:{componentUid:r,productId:i}});o(e),window.dispatchEvent(n)};e.forEach(t=>{t.addEventListener("mouseover",()=>r(t)),t.addEventListener("mouseout",()=>o(t)),t.addEventListener("click",()=>a(t))})}}},T=react.useCallback(r=>{if(e.current||o.current||a.current)return;let i=r.target;if(!i||"function"!=typeof i.closest){g();return}let n=i.closest("[data-toolbar-hover]");if(n)return;let l=i.closest("[data-toolbar-wrap]"),d=l?.getAttribute("data-uid");if(!l||!d||"ROOT"==d){p();return}let u=getChildrenByAttrSelector(l,"data-toolbar"),c=getChildrenByAttrSelector(l,"data-outline");if(c&&c.removeAttribute("data-outline-overlay"),!d||"ROOT"==d||u?.getAttribute("data-toolbar-hover-focus"))return;if(u?.getAttribute("data-toolbar-hover-focus")||p(),L(i),d==t.current?.componentUid){if(t.current.productId){let e=l.closest("[data-product-id]");if(e){let r=e.getAttribute("data-product-id");if(r==t.current.productId)return}}let e=i.closest("[data-theme-section]")||i.closest("[data-shopify-section]");if(!e)return;m({$component:e,focus:!0,isPreventSection:!0})}let s=i.closest("[data-theme-section]")||i.closest("[data-shopify-section]");s?m({$component:s,focus:!0,isPreventSection:!0}):(m({$component:l,componentUid:d,focus:!0}),v({$component:l,componentUid:d}))},[L,p,m,v,g,t]),q=react.useCallback(t=>{if(e.current)return;let r=t.detail;r?.componentUid?$({componentUid:r.componentUid,productId:r.productId,marqueeKey:r.marqueeKey}):A()},[$,A,e]),k=react.useCallback(()=>{p()},[p]),R=react.useCallback(t=>{let r=t.detail;r.value&&(p(),A()),e.current=r.value},[p,A]),P=react.useCallback(t=>{let e=t.detail;e.value?B(!0):B(!1)},[]),I=react.useCallback(t=>{if(e.current)return;let r=t.detail;O({value:r?.value||!1})},[]),x=react.useCallback(t=>{let e=t.detail;e?.value?(p(),o.current=!0):o.current=!1},[p]),U=react.useCallback(t=>{let e=t.detail;e?.value?(p(),a.current=!0):a.current=!1},[p]),_=(t,e)=>{if(!t)return;let r=document.querySelectorAll(`[data-uid="${t}"]`);r.length&&r.forEach(t=>{let r=getChildrenByAttrSelector(t,"data-outline");r&&("in"===e?(r.setAttribute("data-outline-force-hover","true"),r.setAttribute("data-outline-force-overlay","true")):(r.removeAttribute("data-outline-force-hover"),r.removeAttribute("data-outline-force-overlay")))})},j=react.useCallback(t=>{if(e.current)return;let r=t.detail;r?.componentUid&&_(r?.componentUid,r?.type)},[e]),F=react.useCallback(t=>{let e=t.detail;e?.isNewUser&&n(!0)},[]),M=react.useCallback(()=>{i&&E()},[i]);return react.useEffect(()=>(document.addEventListener("mousemove",T),window.addEventListener("editor:active-component",q),window.addEventListener("editor:focus-outside-preview",k),window.addEventListener("editor:is-dragging",R),window.addEventListener("editor:is-editing-text-editor",P),window.addEventListener("editor:toolbar:show-parents",I),window.addEventListener("editor:toolbar:resize-spacing",x),window.addEventListener("editor:toolbar:resize-column",U),window.addEventListener("editor:hover-component",j),window.addEventListener("editor:toolbar-onboarding",F),window.addEventListener("resize",M),()=>{document.removeEventListener("mousemove",T),window.removeEventListener("editor:active-component",q),window.removeEventListener("editor:is-dragging",k),window.removeEventListener("editor:is-dragging",R),window.removeEventListener("editor:is-editing-text-editor",P),window.removeEventListener("editor:toolbar:show-parents",I),window.removeEventListener("editor:toolbar:resize-spacing",x),window.removeEventListener("editor:toolbar:resize-column",U),window.removeEventListener("editor:hover-component",j),window.removeEventListener("editor:toolbar-onboarding",F),window.removeEventListener("resize",M)}),[T,q,k,R,P,I,x,U,j,F,M]),i&&jsxRuntime.jsx(Onboarding.default,{enable:!0,position:u,onCloseOnboarding:h})};var Toolbar$1=react.memo(Toolbar);exports.default=Toolbar$1;
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+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 = ()=>{
+    const currentComponentActive = react.useRef(null);
+    const isDragging = react.useRef(false);
+    const stopWatchReRenderComponent = react.useRef();
+    const isResizeSpacing = react.useRef(false);
+    const cacheHoverComponents = react.useRef([]);
+    const cacheHoverThemeSectionComponents = react.useRef([]);
+    const cacheActiveComponents = react.useRef([]);
+    /* Functions */ const changePositionToolbar = ({ state, $toolbar, $component })=>{
+        const $parentOverflow = findOverflowParent.findOverflowParent($component, $toolbar);
+        const rect = $toolbar.getBoundingClientRect();
+        const rectComponent = $component.getBoundingClientRect();
+        const windowWidth = window.innerWidth;
+        if ($parentOverflow) {
+            if (rectComponent?.height <= 60) {
+                $toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
+            } else {
+                $toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
+            }
+            // fix toolbar overflow right side
+            if (rectComponent.left + rect.width > windowWidth) {
+                $toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
+            }
+        } else {
+            if (rect.top < _const.TOOLBAR_ACTIVE_HEIGHT + 1) {
+                if (rectComponent?.height <= 60) {
+                    $toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
+                } else {
+                    $toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
+                }
+            }
+            // fix toolbar overflow right side
+            if (rectComponent.left + rect.width > windowWidth) {
+                $toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
+            }
+        }
+        // fix Popup overflow right position
+        const popupEl = $component?.closest('[aria-label="Dialog body"]');
+        if (popupEl) {
+            const rectPopupEl = popupEl.getBoundingClientRect();
+            const popupElRightPosition = rectPopupEl.left + rectPopupEl.width - 20;
+            if (rectComponent.left + rect.width > popupElRightPosition) {
+                $toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
+            }
+        }
+    };
+    const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isPreventSection, isParent })=>{
+        if (!$component && !componentUid) return;
+        if (!$component) {
+            const $c = document.body.querySelector('#storefront')?.querySelector(`[data-uid="${componentUid}"]`);
+            if (!$c) return;
+            $component = $c;
+        }
+        if (!componentUid) {
+            const cUid = $component.getAttribute('data-uid');
+            if (!cUid) return;
+            componentUid = cUid;
+        }
+        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');
+        }
+        if ($toolbar) {
+            $toolbar.removeAttribute('style');
+            if (!isParent) {
+                $toolbar.setAttribute('data-toolbar-hover', 'true');
+            }
+            if (focus) {
+                $toolbar.setAttribute('data-toolbar-hover-focus', 'true');
+            }
+            changePositionToolbar({
+                $toolbar,
+                $component,
+                state: 'hover'
+            });
+        }
+        if ($outline) {
+            $outline.setAttribute('data-outline-hover', 'true');
+            if (isParent) {
+                $outline.setAttribute('data-outline-parent-hover', 'true');
+            }
+            if (isPreventSection) {
+                cacheHoverThemeSectionComponents.current.push($component);
+                $outline.setAttribute('data-outline-overlay-theme-section', 'true');
+            }
+            if (focus) {
+                $outline.setAttribute('data-outline-hover-focus', 'true');
+            }
+        }
+        if ($btnAddTop) {
+            if (!isParent) {
+                $btnAddTop.setAttribute('data-toolbar-add-hover', 'true');
+            }
+        }
+        if ($btnAddBottom) {
+            if (!isParent) {
+                $btnAddBottom.setAttribute('data-toolbar-add-hover', 'true');
+            }
+        }
+    }, []);
+    const setHoverComponentParents = react.useCallback(({ $component, componentUid })=>{
+        if (!$component) {
+            const $c = document.body.querySelector('#storefront')?.querySelector(`[data-uid="${componentUid}"]`);
+            if (!$c) return;
+            $component = $c;
+        }
+        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) {
+                    setHoverComponent({
+                        $component: $parent,
+                        isParent: true
+                    });
+                }
+            }
+            changePositionToolbarParents({
+                $component,
+                $parents
+            });
+        }
+    }, [
+        setHoverComponent
+    ]);
+    const changePositionToolbarParents = ({ $component, $parents })=>{
+        if (!$component) return;
+        if (!$parents?.length) return;
+        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;
+            const isInside = $currentToolbar.getAttribute('data-toolbar-hover-inside') ? true : false;
+            let index = 1;
+            for (const $parent of $parents){
+                if ($parent) {
+                    const tag = $parent.getAttribute('data-component-tag');
+                    if (tag === 'Section') continue;
+                    const $toolbar = getChildrenByAttrSelector.getChildrenByAttrSelector($parent, 'data-toolbar-hover');
+                    if ($toolbar) {
+                        // Ignore with toolbar active
+                        const isActive = $toolbar.getAttribute('data-toolbar-active');
+                        if (isActive) continue;
+                        // Start calc
+                        const parentRect = $toolbar.getBoundingClientRect();
+                        const checkRevert = isRevert || isInside;
+                        if (isOverParent.isOverParent({
+                            current: currentRect,
+                            parent: parentRect,
+                            index,
+                            revert: checkRevert
+                        })) {
+                            const parentStyle = getComputedStyle($toolbar);
+                            // parentStyle.top
+                            const diffTop = currentRect.top - parentRect.top;
+                            const diffLeft = currentRect.left - parentRect.left;
+                            let newTop = parseFloat(parentStyle.top) + diffTop - (_const.TOOLBAR_HOVER_HEIGHT - 1) * index; // -1 border bottom
+                            if (checkRevert) {
+                                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;`);
+                            index++;
+                        }
+                    }
+                }
+            }
+        }
+    };
+    const removeHoverThemeSectionComponent = react.useCallback(()=>{
+        const clearAttrs = [
+            'data-outline-overlay-theme-section',
+            'data-theme-section-status-active'
+        ];
+        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 = [
+            'data-toolbar-hover-focus',
+            'data-toolbar-hover',
+            'data-outline-hover-focus',
+            'data-toolbar-hover-revert',
+            'data-toolbar-hover-inside',
+            'data-outline-hover',
+            'data-toolbar-add-hover',
+            'data-outline-parent-hover',
+            'data-toolbar-hover-overflow'
+        ];
+        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));
+                    });
+                }
+            }
+        }
+        removeHoverThemeSectionComponent();
+        cacheHoverComponents.current = []; // clear
+    }, [
+        removeHoverThemeSectionComponent
+    ]);
+    const removeActiveComponent = react.useCallback(()=>{
+        currentComponentActive.current = null;
+        const clearAttrs = [
+            'data-toolbar-active',
+            'data-outline-active',
+            'data-toolbar-add-active',
+            'data-toolbar-active-revert',
+            'data-toolbar-active-inside',
+            'data-spacing-margin-bottom-active',
+            'data-toolbar-force-hover',
+            'data-outline-force-hover',
+            'data-toolbar-active-overflow'
+        ];
+        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));
+                    });
+                }
+            }
+        }
+        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.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;
+            const $drag = $marginBottom.querySelector('[data-spacing-margin-bottom-drag]') || null;
+            if ($bg && $drag) {
+                const value = style.marginBottom;
+                $bg.style.height = value;
+                $drag.style.top = value;
+                $marginBottom.setAttribute('data-spacing-margin-bottom-active', 'true');
+            }
+        }
+    }, []);
+    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}"]`}`;
+        }
+        if (marqueeKey) {
+            return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
+        }
+        return `${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
+    };
+    const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 600, articleId, forceReActive, marqueeKey })=>{
+        if (!componentUid) return;
+        const selector = getSelectorComponent({
+            componentUid,
+            productId,
+            articleId,
+            marqueeKey
+        });
+        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();
+        }
+        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,
+                productId,
+                articleId,
+                marqueeKey
+            };
+            $toolbar.removeAttribute('style');
+            $toolbar.setAttribute('data-toolbar-active', 'true');
+            changePositionToolbar({
+                $toolbar,
+                $component,
+                state: 'active'
+            });
+        }
+        if ($outline) {
+            $outline.setAttribute('data-outline-active', 'true');
+        }
+        if ($btnAddTop) {
+            $btnAddTop.setAttribute('data-toolbar-add-active', 'true');
+        }
+        if ($btnAddBottom) {
+            $btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
+        }
+        const { $isChildOfMarquee, $section } = findDOMClosest.findDOMClosest($component, {
+            $isChildOfMarquee: '[data-component-tag="Marquee"]',
+            $section: '[data-component-tag="Section"]'
+        });
+        // Active same element in product list
+        if ($section && (productId || articleId || $isChildOfMarquee)) {
+            const $relatedElements = $section.querySelectorAll(`[data-uid="${componentUid}"]`);
+            if ($relatedElements?.length) {
+                $relatedElements.forEach(($relatedElement)=>{
+                    cacheActiveComponents.current.push($relatedElement);
+                    const $outline = getChildrenByAttrSelector.getChildrenByAttrSelector($relatedElement, 'data-outline');
+                    if ($outline) {
+                        $outline.setAttribute('data-outline-active', 'true');
+                    }
+                });
+            }
+        }
+        setActiveComponentSpacing({
+            $component
+        });
+        removeHoverComponent();
+    }, [
+        removeActiveComponent,
+        removeHoverComponent,
+        setActiveComponentSpacing
+    ]);
+    const setFocusTextEditor = async (value)=>{
+        if (!value) {
+            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');
+                        $component.removeAttribute('data-outline-editor-inline-focus');
+                        $component.removeAttribute('data-spacing-hidden');
+                    }
+                });
+            }
+        } else {
+            if (currentComponentActive.current?.componentUid) {
+                const selector = getSelectorComponent({
+                    ...currentComponentActive.current
+                });
+                const $component = await waitForElementToExist.waitForElementToExist(selector, 500);
+                if ($component) {
+                    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');
+                        }
+                    }
+                    if ($outline) {
+                        if (value) {
+                            $outline.setAttribute('data-outline-editor-inline-focus', 'true');
+                        }
+                    }
+                    if ($spacing) {
+                        if (value) {
+                            $spacing.setAttribute('data-spacing-hidden', 'true');
+                        }
+                    }
+                }
+            }
+        }
+    };
+    const hoverActiveThemeSection = react.useCallback(($target)=>{
+        const $themeSection = $target.closest('[data-theme-section]');
+        const $themeSectionUid = $themeSection?.getAttribute('data-uid');
+        const isActiveThemeSection = $themeSection && $themeSectionUid === currentComponentActive.current?.componentUid;
+        if (!isActiveThemeSection) return;
+        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 || !currentComponentActive.current) {
+            return;
+        }
+        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.body.querySelector('#storefront')?.querySelectorAll(`[data-uid="${uid}"]`);
+                    if ($parentComponents?.length) {
+                        $parentComponents.forEach(($parentComponent)=>{
+                            const $outline = getChildrenByAttrSelector.getChildrenByAttrSelector($parentComponent, 'data-outline');
+                            if ($outline) {
+                                $outline.setAttribute('data-outline-force-hover', 'true');
+                                $outline.setAttribute('data-outline-force-overlay', 'true');
+                            }
+                        });
+                    }
+                };
+                const outHover = ($parent)=>{
+                    const uid = $parent.getAttribute('data-parent-uid');
+                    if (!uid) return;
+                    const $parentComponents = document.body.querySelector('#storefront')?.querySelectorAll(`[data-uid="${uid}"]`);
+                    if ($parentComponents?.length) {
+                        $parentComponents.forEach(($parentComponent)=>{
+                            const $outline = getChildrenByAttrSelector.getChildrenByAttrSelector($parentComponent, 'data-outline');
+                            if ($outline) {
+                                $outline.removeAttribute('data-outline-force-hover');
+                                $outline.removeAttribute('data-outline-force-overlay');
+                            }
+                        });
+                    }
+                };
+                const onClick = async ($parent)=>{
+                    const uid = $parent.getAttribute('data-parent-uid');
+                    if (!uid) return;
+                    const isElementInsideProduct = async ()=>{
+                        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.waitForElementToExist(`[data-uid="${uid}"]`, 500);
+                        const $article = $component?.closest('[data-article-id]');
+                        return !!($article?.getAttribute('data-article-id') || '');
+                    };
+                    let productId = '';
+                    let articleId = '';
+                    if (await isElementInsideProduct()) {
+                        productId = currentComponentActive.current?.productId || '';
+                    }
+                    if (await isElementInsideArticle()) {
+                        articleId = currentComponentActive.current?.articleId || '';
+                    }
+                    const event = new CustomEvent('editor:toolbar:force-active-component', {
+                        bubbles: true,
+                        detail: {
+                            componentUid: uid,
+                            productId,
+                            articleId,
+                            elementTag: $parent.getAttribute('data-component-tag') || ''
+                        }
+                    });
+                    outHover($parent);
+                    window.dispatchEvent(event);
+                };
+                $parents.forEach(($parent)=>{
+                    $parent.addEventListener('mouseover', ()=>onHover($parent));
+                    $parent.addEventListener('mouseout', ()=>outHover($parent));
+                    $parent.addEventListener('click', ()=>onClick($parent));
+                });
+            }
+        }
+    };
+    /* Event listener */ const onMouseMove = react.useCallback((e)=>{
+        if (isDragging.current) return;
+        if (isResizeSpacing.current) return;
+        const $target = e.target;
+        // check target
+        if (!$target || typeof $target.closest !== 'function') {
+            removeHoverThemeSectionComponent();
+            removeHoverComponent();
+            return;
+        }
+        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;
+        }
+        // Hover to other component
+        const componentUid = $component?.getAttribute('data-uid');
+        if (!$component || !componentUid || componentUid == 'ROOT') {
+            removeHoverComponent();
+            return;
+        }
+        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) {
+                const $product = $component.closest(`[data-product-id]`);
+                if ($product) {
+                    const productId = $product.getAttribute('data-product-id');
+                    if (productId == currentComponentActive.current.productId) {
+                        removeHoverComponent();
+                        return;
+                    }
+                }
+            }
+            if ($preventSection) {
+                setHoverComponent({
+                    $component: $preventSection,
+                    focus: true,
+                    isPreventSection: true
+                });
+            } else {
+                return;
+            }
+        }
+        if ($preventSection) {
+            setHoverComponent({
+                $component: $preventSection,
+                focus: true,
+                isPreventSection: true
+            });
+        } else {
+            setHoverComponent({
+                $component,
+                componentUid,
+                focus: true
+            });
+            setHoverComponentParents({
+                $component,
+                componentUid
+            });
+        }
+    }, [
+        hoverActiveThemeSection,
+        removeHoverComponent,
+        setHoverComponent,
+        setHoverComponentParents,
+        removeHoverThemeSectionComponent,
+        currentComponentActive
+    ]);
+    const onActiveComponent = react.useCallback((e)=>{
+        if (isDragging.current) return;
+        const detail = e.detail;
+        if (detail?.componentUid) {
+            setActiveComponent({
+                componentUid: detail.componentUid,
+                productId: detail.productId,
+                articleId: detail.articleId,
+                marqueeKey: detail.marqueeKey
+            });
+        } else {
+            removeActiveComponent();
+        }
+    }, [
+        setActiveComponent,
+        removeActiveComponent,
+        isDragging
+    ]);
+    const onFocusOutsidePreview = react.useCallback(()=>{
+        removeHoverComponent();
+    }, [
+        removeHoverComponent
+    ]);
+    const onIsDragging = react.useCallback((e)=>{
+        const detail = e.detail;
+        if (detail.value) {
+            removeHoverComponent();
+            removeActiveComponent();
+        }
+        isDragging.current = detail.value;
+    }, [
+        removeHoverComponent,
+        removeActiveComponent
+    ]);
+    const onIsEditingTextEditor = react.useCallback((e)=>{
+        const detail = e.detail;
+        if (detail.value) {
+            setFocusTextEditor(true);
+        } else {
+            setFocusTextEditor(false);
+        }
+    }, []);
+    const onShowParents = react.useCallback((e)=>{
+        if (isDragging.current) return;
+        const detail = e.detail;
+        setShowParents({
+            value: detail?.value || false
+        });
+    }, []);
+    const onResizeSpacing = react.useCallback((e)=>{
+        const detail = e.detail;
+        if (detail?.value) {
+            removeHoverComponent();
+            isResizeSpacing.current = true;
+        } else {
+            isResizeSpacing.current = false;
+        }
+    }, [
+        removeHoverComponent
+    ]);
+    const setHoverParentComponent = (uid, type)=>{
+        if (!uid) return;
+        const $parentComponents = document.body.querySelector('#storefront')?.querySelectorAll(`[data-uid="${uid}"]`);
+        if ($parentComponents?.length) {
+            $parentComponents.forEach(($parentComponent)=>{
+                const $outline = getChildrenByAttrSelector.getChildrenByAttrSelector($parentComponent, 'data-outline');
+                if ($outline) {
+                    if (type === 'in') {
+                        $outline.setAttribute('data-outline-force-hover', 'true');
+                        $outline.setAttribute('data-outline-force-overlay', 'true');
+                    } else {
+                        $outline.removeAttribute('data-outline-force-hover');
+                        $outline.removeAttribute('data-outline-force-overlay');
+                    }
+                }
+            });
+        }
+    };
+    const onHoverComponent = react.useCallback((e)=>{
+        if (isDragging.current) return;
+        const detail = e.detail;
+        if (detail?.componentUid) {
+            setHoverParentComponent(detail?.componentUid, detail?.type);
+        }
+    }, [
+        isDragging
+    ]);
+    const onComponentReRender = (e)=>{
+        const detail = e.detail;
+        if (currentComponentActive.current?.componentUid && detail?.componentUid == currentComponentActive.current?.componentUid) {
+            setActiveComponent({
+                ...currentComponentActive.current
+            });
+        }
+    };
+    /* Register event */ react.useEffect(()=>{
+        document.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('editor:active-component', onActiveComponent);
+        window.addEventListener('editor:focus-outside-preview', onFocusOutsidePreview);
+        window.addEventListener('editor:is-dragging', onIsDragging);
+        window.addEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
+        window.addEventListener('editor:toolbar:show-parents', onShowParents);
+        window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
+        window.addEventListener('editor:hover-component', onHoverComponent);
+        window.addEventListener('editor:component:render', onComponentReRender);
+        return ()=>{
+            document.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('editor:active-component', onActiveComponent);
+            window.removeEventListener('editor:is-dragging', onFocusOutsidePreview);
+            window.removeEventListener('editor:is-dragging', onIsDragging);
+            window.removeEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
+            window.removeEventListener('editor:toolbar:show-parents', onShowParents);
+            window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
+            window.removeEventListener('editor:hover-component', onHoverComponent);
+            window.removeEventListener('editor:component:render', onComponentReRender);
+        };
+    }, [
+        onMouseMove,
+        onActiveComponent,
+        onFocusOutsidePreview,
+        onIsDragging,
+        onIsEditingTextEditor,
+        onShowParents,
+        onResizeSpacing,
+        onHoverComponent,
+        onComponentReRender
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+};
+var Toolbar$1 = /*#__PURE__*/ react.memo(Toolbar);
+
+exports.default = Toolbar$1;