@gem-sdk/pages 1.63.19 → 2.0.0-dev.1082

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

@@ -1,700 +1,2 @@
-'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;
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react"),getDOMElementParents=require("./toolbar/utils/getDOMElementParents.js"),_const=require("./toolbar/const.js"),getChildrenByAttrSelector=require("./toolbar/utils/getChildrenByAttrSelector.js"),findOverflowParent=require("./toolbar/utils/findOverflowParent.js"),waitForElementToExist=require("./toolbar/utils/waitForElementToExist.js"),isOverParent=require("./toolbar/utils/isOverParent.js"),findDOMClosest=require("./toolbar/utils/findDOMClosest.js");const Toolbar=()=>{let t=react.useRef(null),e=react.useRef(!1),r=react.useRef(),o=react.useRef(!1),a=react.useRef([]),i=react.useRef([]),n=react.useRef([]),l=({state:t,$toolbar:e,$component:r})=>{let o=findOverflowParent.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<_const.TOOLBAR_ACTIVE_HEIGHT+1&&(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")}},d=react.useCallback(({$component:t,componentUid:e,focus:r,isPreventSection:o,isParent:n})=>{if(!t&&!e)return;if(!t){let r=document.body.querySelector("#storefront")?.querySelector(`[data-uid="${e}"]`);if(!r)return;t=r}if(!e){let r=t.getAttribute("data-uid");if(!r)return;e=r}a.current.push(t);let d=getChildrenByAttrSelector.getChildrenByAttrSelector(t,"data-toolbar"),u=getChildrenByAttrSelector.getChildrenByAttrSelector(t,"data-outline"),c=getChildrenByAttrSelector.getChildrenByAttrSelector(t,"data-toolbar-add-top"),s=getChildrenByAttrSelector.getChildrenByAttrSelector(t,"data-toolbar-add-bottom"),b=getChildrenByAttrSelector.getChildrenByAttrSelector(t,"data-theme-section-status");o&&b&&b.setAttribute("data-theme-section-status-active","true"),d&&(d.removeAttribute("style"),n||d.setAttribute("data-toolbar-hover","true"),r&&d.setAttribute("data-toolbar-hover-focus","true"),l({$toolbar:d,$component:t,state:"hover"})),u&&(u.setAttribute("data-outline-hover","true"),n&&u.setAttribute("data-outline-parent-hover","true"),o&&(i.current.push(t),u.setAttribute("data-outline-overlay-theme-section","true")),r&&u.setAttribute("data-outline-hover-focus","true")),c&&!n&&c.setAttribute("data-toolbar-add-hover","true"),s&&!n&&s.setAttribute("data-toolbar-add-hover","true")},[]),u=react.useCallback(({$component:t,componentUid:e})=>{if(!t){let r=document.body.querySelector("#storefront")?.querySelector(`[data-uid="${e}"]`);if(!r)return;t=r}let r=getDOMElementParents.getDOMElementParents(t,'[data-uid][data-component-type="component"]:not([data-component-no-setting])',1);if(r.length){for(let t of r)t&&d({$component:t,isParent:!0});c({$component:t,$parents:r})}},[d]),c=({$component:t,$parents:e})=>{if(!t||!e?.length)return;let r=getChildrenByAttrSelector.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.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.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-(_const.TOOLBAR_HOVER_HEIGHT-1)*i;l&&(d=parseFloat(e.top)-o+(_const.TOOLBAR_HOVER_HEIGHT-1)*i);let u=parseFloat(e.left)+a;n.setAttribute("style",`top: ${d}px;left: ${u}px;`),i++}}}}},s=react.useCallback(()=>{let t=["data-outline-overlay-theme-section","data-theme-section-status-active"],e=i.current;if(e.length)for(let r of e){let e=r.querySelectorAll(t.map(t=>`[${t}]`).join(","));e&&t.forEach(t=>{e.forEach(e=>e.removeAttribute(t))})}i.current=[]},[]),b=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-outline-parent-hover","data-toolbar-hover-overflow"],e=a.current;if(e.length)for(let r of e){let e=r.querySelectorAll(t.map(t=>`[${t}]`).join(","));e&&t.forEach(t=>{e.forEach(e=>e.removeAttribute(t))})}s(),a.current=[]},[s]),f=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-toolbar-active-overflow"],o=n.current;if(o.length)for(let t of o){let r=t.querySelectorAll(e.map(t=>`[${t}]`).join(","));r&&e.forEach(t=>{r.forEach(e=>e.removeAttribute(t))})}n.current=[],m(!1),r.current&&r.current()},[]),v=react.useCallback(({$component:t})=>{if(!t)return;let e=getComputedStyle(t),r=getChildrenByAttrSelector.getChildrenByAttrSelector(t,"data-spacing"),o=r?.querySelector("[data-spacing-margin-bottom]")||null;if(o){let t=o.querySelector("[data-spacing-margin-bottom-bg]")||null,r=o.querySelector("[data-spacing-margin-bottom-drag]")||null;if(t&&r){let a=e.marginBottom;t.style.height=a,r.style.top=a,o.setAttribute("data-spacing-margin-bottom-active","true")}}},[]),h=({componentUid:t,productId:e,articleId:r,marqueeKey:o})=>r?`${r?`[data-article-id="${r}"][data-uid="${t}"], [data-article-id="${r}"] [data-uid="${t}"]`:`[data-uid="${t}"]`}`:o?`[marquee-item-key="${o}"] [data-uid="${t}"]`:`${e?`[data-product-id="${e}"][data-uid="${t}"], [data-product-id="${e}"] [data-uid="${t}"]`:`[data-uid="${t}"]`}`,g=react.useCallback(async({componentUid:e,productId:r,timeAwait:o=600,articleId:a,forceReActive:i,marqueeKey:d})=>{if(!e)return;let u=h({componentUid:e,productId:r,articleId:a,marqueeKey:d}),c=await waitForElementToExist.waitForElementToExist(u,o);if(!c||!i&&e==t.current?.componentUid&&r==t.current?.productId&&a==t.current?.articleId&&d==t.current?.marqueeKey)return;(e!==t.current?.componentUid||r!==t.current?.productId||a!==t.current?.articleId||i)&&f(),(i||e===t.current?.componentUid)&&r===t.current?.productId&&d===t.current?.marqueeKey||f(),n.current.push(c);let s=getChildrenByAttrSelector.getChildrenByAttrSelector(c,"data-toolbar"),g=getChildrenByAttrSelector.getChildrenByAttrSelector(c,"data-outline"),m=getChildrenByAttrSelector.getChildrenByAttrSelector(c,"data-toolbar-add-top"),A=getChildrenByAttrSelector.getChildrenByAttrSelector(c,"data-toolbar-add-bottom");s&&(t.current={componentUid:e,productId:r,articleId:a,marqueeKey:d},s.removeAttribute("style"),s.setAttribute("data-toolbar-active","true"),l({$toolbar:s,$component:c,state:"active"})),g&&g.setAttribute("data-outline-active","true"),m&&m.setAttribute("data-toolbar-add-active","true"),A&&A.setAttribute("data-toolbar-add-active","true");let{$isChildOfMarquee:p,$section:y}=findDOMClosest.findDOMClosest(c,{$isChildOfMarquee:'[data-component-tag="Marquee"]',$section:'[data-component-tag="Section"]'});if(y&&(r||a||p)){let t=y.querySelectorAll(`[data-uid="${e}"]`);t?.length&&t.forEach(t=>{n.current.push(t);let e=getChildrenByAttrSelector.getChildrenByAttrSelector(t,"data-outline");e&&e.setAttribute("data-outline-active","true")})}v({$component:c}),b()},[f,b,v]),m=async e=>{if(e){if(t.current?.componentUid){let r=h({...t.current}),o=await waitForElementToExist.waitForElementToExist(r,500);if(o){let t=getChildrenByAttrSelector.getChildrenByAttrSelector(o,"data-toolbar"),r=getChildrenByAttrSelector.getChildrenByAttrSelector(o,"data-outline"),a=getChildrenByAttrSelector.getChildrenByAttrSelector(o,"data-spacing");t&&e&&t.setAttribute("data-toolbar-editor-inline-focus","true"),r&&e&&r.setAttribute("data-outline-editor-inline-focus","true"),a&&e&&a.setAttribute("data-spacing-hidden","true")}}}else{let t=document.body.querySelector("#storefront")?.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"))})}},A=react.useCallback(e=>{let r=e.closest("[data-theme-section]"),o=r?.getAttribute("data-uid"),a=r&&o===t.current?.componentUid;if(!a)return;i.current.push(r);let n=getChildrenByAttrSelector.getChildrenByAttrSelector(r,"data-theme-section-status");n&&n.setAttribute("data-theme-section-status-active","true")},[]),p=async({value:e})=>{if(!e||!t.current)return;let r=!1,o=h({...t.current}),a=await waitForElementToExist.waitForElementToExist(o,500);if(a){let e=a?.querySelectorAll("[data-toolbar-parent]");if(e.length){let o=t=>{if(r)return;let e=t.getAttribute("data-parent-uid");if(!e)return;let o=document.body.querySelector("#storefront")?.querySelectorAll(`[data-uid="${e}"]`);o?.length&&o.forEach(t=>{let e=getChildrenByAttrSelector.getChildrenByAttrSelector(t,"data-outline");e&&(e.setAttribute("data-outline-force-hover","true"),e.setAttribute("data-outline-force-overlay","true"))})},a=t=>{let e=t.getAttribute("data-parent-uid");if(!e)return;let r=document.body.querySelector("#storefront")?.querySelectorAll(`[data-uid="${e}"]`);r?.length&&r.forEach(t=>{let e=getChildrenByAttrSelector.getChildrenByAttrSelector(t,"data-outline");e&&(e.removeAttribute("data-outline-force-hover"),e.removeAttribute("data-outline-force-overlay"))})},i=async e=>{r=!0;let o=e.getAttribute("data-parent-uid");if(!o)return;let i=async()=>{let t=await waitForElementToExist.waitForElementToExist(`[data-uid="${o}"]`,500),e=t?.closest("[data-product-id]");return!!e?.getAttribute("data-product-id")},n=async()=>{let t=await waitForElementToExist.waitForElementToExist(`[data-uid="${o}"]`,500),e=t?.closest("[data-article-id]");return!!e?.getAttribute("data-article-id")},l="",d="";await i()&&(l=t.current?.productId||""),await n()&&(d=t.current?.articleId||"");let u=new CustomEvent("editor:toolbar:force-active-component",{bubbles:!0,detail:{componentUid:o,productId:l,articleId:d,elementTag:e.getAttribute("data-component-tag")||""}});a(e),window.dispatchEvent(u),setTimeout(()=>{r=!1},0)};e.forEach(t=>{t.addEventListener("mouseover",()=>o(t)),t.addEventListener("mouseout",()=>a(t)),t.addEventListener("click",()=>i(t))})}}},y=react.useCallback(r=>{if(e.current||o.current)return;let a=r.target;if(!a||"function"!=typeof a.closest){s(),b();return}let{$toolbarHover:i,$component:n,$themeSection:l,$shopifySection:c}=findDOMClosest.findDOMClosest(a,{$toolbarHover:"[data-toolbar-hover]",$component:"[data-toolbar-wrap]",$themeSection:"[data-theme-section]",$shopifySection:"[data-shopify-section]"});if(i)return;let f=n?.getAttribute("data-uid");if(!n||!f||"ROOT"==f){b();return}let v=getChildrenByAttrSelector.getChildrenByAttrSelector(n,"data-toolbar");if(!f||"ROOT"==f||v?.getAttribute("data-toolbar-hover-focus"))return;v?.getAttribute("data-toolbar-hover-focus")||b(),A(a);let h=l||c;if(f==t.current?.componentUid){if(t.current.productId){let e=n.closest("[data-product-id]");if(e){let r=e.getAttribute("data-product-id");if(r==t.current.productId){b();return}}}if(!h)return;d({$component:h,focus:!0,isPreventSection:!0})}h?d({$component:h,focus:!0,isPreventSection:!0}):(d({$component:n,componentUid:f,focus:!0}),u({$component:n,componentUid:f}))},[A,b,d,u,s,t]),C=react.useCallback(t=>{if(e.current)return;let r=t.detail;r?.componentUid?g({componentUid:r.componentUid,productId:r.productId,articleId:r.articleId,marqueeKey:r.marqueeKey}):f()},[g,f,e]),S=react.useCallback(()=>{b()},[b]),w=react.useCallback(t=>{let r=t.detail;r.value&&(b(),f()),e.current=r.value},[b,f]),E=react.useCallback(t=>{let e=t.detail;e.value?m(!0):m(!1)},[]),B=react.useCallback(t=>{if(e.current)return;let r=t.detail;p({value:r?.value||!1})},[]),$=react.useCallback(t=>{let e=t.detail;e?.value?(b(),o.current=!0):o.current=!1},[b]),q=(t,e)=>{if(!t)return;let r=document.body.querySelector("#storefront")?.querySelectorAll(`[data-uid="${t}"]`);r?.length&&r.forEach(t=>{let r=getChildrenByAttrSelector.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")))})},O=react.useCallback(t=>{if(e.current)return;let r=t.detail;r?.componentUid&&q(r?.componentUid,r?.type)},[e]),T=e=>{let r=e.detail;t.current?.componentUid&&r?.componentUid==t.current?.componentUid&&g({...t.current})};return react.useEffect(()=>(document.addEventListener("mousemove",y),window.addEventListener("editor:active-component",C),window.addEventListener("editor:focus-outside-preview",S),window.addEventListener("editor:is-dragging",w),window.addEventListener("editor:is-editing-text-editor",E),window.addEventListener("editor:toolbar:show-parents",B),window.addEventListener("editor:toolbar:resize-spacing",$),window.addEventListener("editor:hover-component",O),window.addEventListener("editor:component:render",T),()=>{document.removeEventListener("mousemove",y),window.removeEventListener("editor:active-component",C),window.removeEventListener("editor:is-dragging",S),window.removeEventListener("editor:is-dragging",w),window.removeEventListener("editor:is-editing-text-editor",E),window.removeEventListener("editor:toolbar:show-parents",B),window.removeEventListener("editor:toolbar:resize-spacing",$),window.removeEventListener("editor:hover-component",O),window.removeEventListener("editor:component:render",T)}),[y,C,S,w,E,B,$,O,T]),jsxRuntime.jsx(jsxRuntime.Fragment,{})};var Toolbar$1=react.memo(Toolbar);exports.default=Toolbar$1;