@gem-sdk/pages 1.8.31 → 1.8.32

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

@@ -18,9 +18,20 @@ const PopupManager = ()=>{
     }, [
         state
     ]);
-    const setActiveModal = (modalId)=>{
-        setModalActive(modalId);
-    };
+    const onSetActiveModal = react.useCallback((e)=>{
+        const detail = e.detail;
+        setModalActive(detail?.modalId);
+    }, [
+        setModalActive
+    ]);
+    react.useEffect(()=>{
+        window.addEventListener('set-active-modal', onSetActiveModal);
+        return ()=>{
+            window.removeEventListener('set-active-modal', onSetActiveModal);
+        };
+    }, [
+        onSetActiveModal
+    ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         className: "pointer-events-none fixed inset-y-0 right-0 z-10 flex w-10 flex-col items-center justify-center gap-1 overflow-y-auto overflow-x-hidden text-sm",
         children: popups?.map((item)=>/*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -30,7 +41,7 @@ const PopupManager = ()=>{
                 }),
                 role: "button",
                 "aria-hidden": "true",
-                onClick: ()=>setActiveModal(item?.uid),
+                onClick: ()=>setModalActive(item?.uid),
                 children: /*#__PURE__*/ jsxRuntime.jsx("span", {
                     className: "text-ellipsis whitespace-nowrap",
                     children: item?.settings?.name ?? 'Popup Name'

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

@@ -25,6 +25,7 @@ const Toolbox = ()=>{
     const changeSwatches = core.useShopStore((s)=>s.changeSwatches);
     const changeLayoutSettings = core.useShopStore((s)=>s.changeLayoutSettings);
     const [initEventSuccess, setInitEventSuccess] = react.useState(false);
+    const clearModal = core.useModalStore((s)=>s.clearModal);
     // Revalidate all query with key match query/
     const onRevalidateQuery = react.useCallback(()=>{
         matchMutate(/query\//);
@@ -78,6 +79,7 @@ const Toolbox = ()=>{
     }, []);
     // Init builder data
     const onInitBuilder = react.useCallback((e)=>{
+        clearModal();
         try {
             const detail = e.detail;
             if (detail.data) {
@@ -92,7 +94,8 @@ const Toolbox = ()=>{
         }
     }, [
         initNormalizeState,
-        initState
+        initState,
+        clearModal
     ]);
     // Add new entity
     const onAddEntity = react.useCallback((e)=>{

package/dist/esm/components/builder/PopupManager.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { useBuilderPreviewStore, useModalStore, cls } from '@gem-sdk/core';
-import { memo, useMemo } from 'react';
+import { memo, useMemo, useCallback, useEffect } from 'react';
 
 const isDialog = (item)=>!!item && item?.tag === 'Dialog' && item.type === 'component';
 const PopupManager = ()=>{
@@ -14,9 +14,20 @@ const PopupManager = ()=>{
     }, [
         state
     ]);
-    const setActiveModal = (modalId)=>{
-        setModalActive(modalId);
-    };
+    const onSetActiveModal = useCallback((e)=>{
+        const detail = e.detail;
+        setModalActive(detail?.modalId);
+    }, [
+        setModalActive
+    ]);
+    useEffect(()=>{
+        window.addEventListener('set-active-modal', onSetActiveModal);
+        return ()=>{
+            window.removeEventListener('set-active-modal', onSetActiveModal);
+        };
+    }, [
+        onSetActiveModal
+    ]);
     return /*#__PURE__*/ jsx("div", {
         className: "pointer-events-none fixed inset-y-0 right-0 z-10 flex w-10 flex-col items-center justify-center gap-1 overflow-y-auto overflow-x-hidden text-sm",
         children: popups?.map((item)=>/*#__PURE__*/ jsx("div", {
@@ -26,7 +37,7 @@ const PopupManager = ()=>{
                 }),
                 role: "button",
                 "aria-hidden": "true",
-                onClick: ()=>setActiveModal(item?.uid),
+                onClick: ()=>setModalActive(item?.uid),
                 children: /*#__PURE__*/ jsx("span", {
                     className: "text-ellipsis whitespace-nowrap",
                     children: item?.settings?.name ?? 'Popup Name'

package/dist/esm/components/builder/Toolbox.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { useMatchMutate, useShopStore, useBuilderPreviewStore, useSectionStore, cls } from '@gem-sdk/core';
+import { useMatchMutate, useShopStore, useBuilderPreviewStore, useSectionStore, useModalStore, cls } from '@gem-sdk/core';
 import { memo, useState, useCallback, useEffect } from 'react';
 import { createFontUrl } from '../../libs/google-fonts.js';
 import { genCSS } from '../../libs/helpers/gen-css.js';
@@ -21,6 +21,7 @@ const Toolbox = ()=>{
     const changeSwatches = useShopStore((s)=>s.changeSwatches);
     const changeLayoutSettings = useShopStore((s)=>s.changeLayoutSettings);
     const [initEventSuccess, setInitEventSuccess] = useState(false);
+    const clearModal = useModalStore((s)=>s.clearModal);
     // Revalidate all query with key match query/
     const onRevalidateQuery = useCallback(()=>{
         matchMutate(/query\//);
@@ -74,6 +75,7 @@ const Toolbox = ()=>{
     }, []);
     // Init builder data
     const onInitBuilder = useCallback((e)=>{
+        clearModal();
         try {
             const detail = e.detail;
             if (detail.data) {
@@ -88,7 +90,8 @@ const Toolbox = ()=>{
         }
     }, [
         initNormalizeState,
-        initState
+        initState,
+        clearModal
     ]);
     // Add new entity
     const onAddEntity = useCallback((e)=>{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/pages",
-  "version": "1.8.31",
+  "version": "1.8.32",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",