@app-studio/web 0.8.39 → 0.8.41

package/dist/web.umd.development.js

@@ -1796,7 +1796,8 @@
       fallback = 'IM',
       styles,
       imageError,
-      setImageError
+      setImageError,
+      onClick = () => {}
     } = _ref;
     // Determines the size of the avatar by mapping the size prop to the predefined AvatarSizeMap.
     var avatarSize = AvatarSizeMap[size];
@@ -1814,7 +1815,8 @@
       borderWidth: "1px",
       borderStyle: "solid",
       borderColor: imageError ? 'black' : 'transparent',
-      boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.25)"
+      boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.25)",
+      onClick: onClick
     }, styles == null ? void 0 : styles.container), !imageError ? (/*#__PURE__*/React__default.createElement(appStudio.Image, {
       alt: "IM",
       src: src,
@@ -1833,7 +1835,8 @@
       src,
       size,
       styles,
-      fallback
+      fallback,
+      onClick
     } = _ref;
     // Uses custom hook useAvatarState to manage the avatar image loading error state.
     var {
@@ -1847,7 +1850,8 @@
       styles: styles,
       fallback: fallback,
       imageError: imageError,
-      setImageError: setImageError
+      setImageError: setImageError,
+      onClick: onClick
     });
     // AvatarComponent is a functional component that wraps the AvatarView with added state logic.
   };
@@ -6612,46 +6616,51 @@
   };
 
   var useModalStore = /*#__PURE__*/zustand.create(set => ({
-    modal: false,
-    modalProps: {
-      isVisible: false
-    },
-    overlayProps: {},
-    show: function show(modal, modalProps, overlayProps) {
+    modals: [],
+    show: function show(name, modalProps, overlayProps) {
       if (modalProps === void 0) {
         modalProps = {};
       }
       if (overlayProps === void 0) {
         overlayProps = {};
       }
-      if (modal) {
-        modalProps.isVisible = true;
-      }
-      set(state => Object.assign({}, state, {
-        modal,
-        modalProps,
-        overlayProps
+      set(state => ({
+        modals: [...state.modals, {
+          name,
+          props: Object.assign({}, modalProps, {
+            isVisible: true
+          }),
+          overlayProps
+        }]
       }));
     },
-    hide: () => {
-      set(state => Object.assign({}, state, {
-        modalProps: Object.assign({}, state.modalProps, {
-          isVisible: false
-        })
-      }));
+    hide: name => {
+      set(state => {
+        if (!name) {
+          // Hide all modals
+          return {
+            modals: []
+          };
+        }
+        // Hide specific modal by name
+        return {
+          modals: state.modals.filter(modal => modal.name !== name)
+        };
+      });
     }
   }));
-  var showModal = function showModal(modal, modalProps, overlayProps) {
+  var showModal = function showModal(name, modalProps, overlayProps) {
     if (modalProps === void 0) {
       modalProps = {};
     }
     if (overlayProps === void 0) {
       overlayProps = {};
     }
-    useModalStore.getState().show(modal, modalProps, overlayProps);
+    useModalStore.getState().show(name, modalProps, overlayProps);
   };
-  var hideModal = () => {
-    useModalStore.getState().hide();
+  var hideModal = name => {
+    console.log('hideModal', name);
+    useModalStore.getState().hide(typeof name === 'string' ? name : undefined);
   };
 
   var ContainerShapes = {
@@ -6821,33 +6830,29 @@
 
   var ModalLayout = _ref => {
     var {
-      modals
+      modals: availableModals
     } = _ref;
-    var modalStore = useModalStore(_ref2 => {
-      var {
-        modal,
-        modalProps,
-        overlayProps
-      } = _ref2;
-      return {
-        modal,
-        modalProps,
-        overlayProps
-      };
-    });
-    if (typeof modalStore.modal === 'boolean') {
-      return null;
-    }
-    var Modal = modals[modalStore.modal];
-    if (!Modal) {
-      console.error(modalStore.modal + " modal doesn't exist");
+    var activeModals = useModalStore(state => state.modals);
+    if (activeModals.length === 0) {
       return null;
     }
-    return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(ModalOverlay, Object.assign({
-      isOpen: modalStore.modalProps.isVisible,
-      onClose: hideModal,
-      blur: 10
-    }, modalStore.overlayProps), Modal !== undefined && /*#__PURE__*/React__default.createElement(Modal, Object.assign({}, modalStore.modalProps))));
+    return /*#__PURE__*/React__default.createElement(React.Fragment, null, activeModals.map((modal, index) => {
+      var ModalComponent = availableModals[modal.name];
+      if (!ModalComponent) {
+        console.error(modal.name + " modal doesn't exist");
+        return null;
+      }
+      return /*#__PURE__*/React__default.createElement(ModalOverlay, Object.assign({
+        key: index,
+        isOpen: modal.props.isVisible,
+        onClose: () => hideModal(modal.name),
+        blur: 5
+      }, modal.overlayProps, {
+        style: {
+          zIndex: 1000 + index
+        }
+      }), /*#__PURE__*/React__default.createElement(ModalComponent, Object.assign({}, modal.props)));
+    }));
   };
 
   /**