@gem-sdk/core 1.23.0-staging.26 → 1.23.0-staging.29

package/dist/cjs/components/ComponentToolbarPreview.js

@@ -17,6 +17,32 @@ var Resize = require('./resize/Resize.js');
 require('../helpers/convert.js');
 
 const SECTION_LIMIT = 25;
+const notVisible = (el)=>{
+    const overflow = getComputedStyle(el).overflow;
+    return overflow !== 'visible';
+};
+const isSection = (el)=>{
+    const tag = el.getAttribute('data-component-tag');
+    return tag === 'Section';
+};
+const isOverToolbarPosition = (el, parent)=>{
+    const rect = el.getBoundingClientRect();
+    const rectP = parent.getBoundingClientRect();
+    // 32px = toolbar active height
+    return rect.top - rectP.top < 32 + 1;
+};
+const findOverflowParent = (element, initEl)=>{
+    const thisEl = element;
+    const origEl = initEl || thisEl;
+    if (!thisEl) return;
+    if (isSection(thisEl)) return;
+    if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
+    if (thisEl.parentElement) {
+        return findOverflowParent(thisEl.parentElement, origEl);
+    } else {
+        return;
+    }
+};
 const ComponentToolbarPreview = ({ ...props })=>{
     const isThemeSection = props.isThemeSection;
     const editingPageType = ShopContext.useShopStore((s)=>s.pageType);
@@ -84,11 +110,16 @@ const ComponentToolbarPreview = ({ ...props })=>{
             setIsShowParentRevert(false);
             setIsShowParent(false);
         } else {
-            const rect = $toolbar.getBoundingClientRect();
-            if (rect.top < parents.length * 24) {
+            const $parentOverflow = findOverflowParent($toolbar, $toolbar);
+            if ($parentOverflow) {
                 setIsShowParentRevert(true);
             } else {
-                setIsShowParentRevert(false);
+                const rect = $toolbar.getBoundingClientRect();
+                if (rect.top < parents.length * 24) {
+                    setIsShowParentRevert(true);
+                } else {
+                    setIsShowParentRevert(false);
+                }
             }
             setIsShowParent(true);
         }

package/dist/cjs/helpers/is-empty-children.js

@@ -7,7 +7,7 @@ var ComponentToolbarPreview = require('../components/ComponentToolbarPreview.js'
 
 const isEmptyChildren = (children)=>{
     let arrChild = react.Children.toArray(children);
-    arrChild = arrChild.filter((child)=>child?.type != ComponentToolbarPreview.ComponentToolbarPreview && react.isValidElement(child));
+    arrChild = arrChild.filter((child)=>child?.type != ComponentToolbarPreview.ComponentToolbarPreview);
     return react.Children.count(arrChild) < 1 || !children;
 };
 

package/dist/esm/components/ComponentToolbarPreview.js

@@ -15,6 +15,32 @@ import Resize from './resize/Resize.js';
 import '../helpers/convert.js';
 
 const SECTION_LIMIT = 25;
+const notVisible = (el)=>{
+    const overflow = getComputedStyle(el).overflow;
+    return overflow !== 'visible';
+};
+const isSection = (el)=>{
+    const tag = el.getAttribute('data-component-tag');
+    return tag === 'Section';
+};
+const isOverToolbarPosition = (el, parent)=>{
+    const rect = el.getBoundingClientRect();
+    const rectP = parent.getBoundingClientRect();
+    // 32px = toolbar active height
+    return rect.top - rectP.top < 32 + 1;
+};
+const findOverflowParent = (element, initEl)=>{
+    const thisEl = element;
+    const origEl = initEl || thisEl;
+    if (!thisEl) return;
+    if (isSection(thisEl)) return;
+    if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
+    if (thisEl.parentElement) {
+        return findOverflowParent(thisEl.parentElement, origEl);
+    } else {
+        return;
+    }
+};
 const ComponentToolbarPreview = ({ ...props })=>{
     const isThemeSection = props.isThemeSection;
     const editingPageType = useShopStore((s)=>s.pageType);
@@ -82,11 +108,16 @@ const ComponentToolbarPreview = ({ ...props })=>{
             setIsShowParentRevert(false);
             setIsShowParent(false);
         } else {
-            const rect = $toolbar.getBoundingClientRect();
-            if (rect.top < parents.length * 24) {
+            const $parentOverflow = findOverflowParent($toolbar, $toolbar);
+            if ($parentOverflow) {
                 setIsShowParentRevert(true);
             } else {
-                setIsShowParentRevert(false);
+                const rect = $toolbar.getBoundingClientRect();
+                if (rect.top < parents.length * 24) {
+                    setIsShowParentRevert(true);
+                } else {
+                    setIsShowParentRevert(false);
+                }
             }
             setIsShowParent(true);
         }

package/dist/esm/helpers/is-empty-children.js

@@ -1,9 +1,9 @@
-import { Children, isValidElement } from 'react';
+import { Children } from 'react';
 import { ComponentToolbarPreview } from '../components/ComponentToolbarPreview.js';
 
 const isEmptyChildren = (children)=>{
     let arrChild = Children.toArray(children);
-    arrChild = arrChild.filter((child)=>child?.type != ComponentToolbarPreview && isValidElement(child));
+    arrChild = arrChild.filter((child)=>child?.type != ComponentToolbarPreview);
     return Children.count(arrChild) < 1 || !children;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "1.23.0-staging.26",
+  "version": "1.23.0-staging.29",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "@gem-sdk/adapter-shopify": "1.23.0-staging.26",
-    "@gem-sdk/styles": "1.23.0-staging.26"
+    "@gem-sdk/styles": "1.23.0-staging.29"
   },
   "dependencies": {
     "react-error-boundary": "4.0.10",