@app-studio/web 0.8.40 → 0.8.42

package/dist/components/Modal/Modal/Modal.layout.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { ModalLayoutProps } from './Modal.props';
-export declare const ModalLayout: ({ modals }: ModalLayoutProps) => React.JSX.Element | null;
+export declare const ModalLayout: ({ modals: availableModals }: ModalLayoutProps) => React.JSX.Element | null;

package/dist/components/Modal/Modal/Modal.store.d.ts

@@ -1,12 +1,15 @@
-export interface ModalState {
-    modal: string | boolean;
-    modalProps: any & {
+export interface ModalItem {
+    name: string;
+    props: any & {
         isVisible: boolean;
     };
     overlayProps: any;
-    show: (modal: string, modalProps?: any, overlayProps?: any) => void;
-    hide: () => void;
+}
+export interface ModalState {
+    modals: ModalItem[];
+    show: (name: string, modalProps?: any, overlayProps?: any) => void;
+    hide: (name?: string) => void;
 }
 export declare const useModalStore: any;
-export declare const showModal: (modal: string, modalProps?: any, overlayProps?: any) => void;
-export declare const hideModal: () => void;
+export declare const showModal: (name: string, modalProps?: any, overlayProps?: any) => void;
+export declare const hideModal: (name?: string | undefined) => void;

package/dist/web.cjs.development.js

@@ -2403,7 +2403,7 @@ var ButtonView = _ref => {
       ariaLabel,
       // Initializes default values for the ButtonProps object; useful for defining states like isAuto, isFilled, etc.
       externalHref,
-      isAuto,
+      isAuto = false,
       // Determines if button should be active based on isDisabled and isLoading properties.
       isFilled = false,
       // Prepares default properties for the native button element based on isActive state.
@@ -2481,7 +2481,8 @@ var ButtonView = _ref => {
   var buttonSizeStyles = ButtonSizes[size];
   var buttonVariant = ButtonVariants[variant];
   var scaleWidth = {
-    minWidth: isAuto ? 'fit-content' : isFilled ? '100%' : buttonSizeStyles.width
+    width: isAuto === true ? 'fit-content' : isFilled ? '100%' : buttonSizeStyles.width,
+    minWidth: isAuto === true ? 'fit-content' : isFilled ? '100%' : buttonSizeStyles.width
   };
   var changePadding = isIconRounded ? IconSizes$1[size] : ButtonSizes[size];
   var content = /*#__PURE__*/React__default.createElement(Horizontal, {
@@ -6629,46 +6630,51 @@ var MessageLayout = _ref => {
 };
 
 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 = {
@@ -6838,33 +6844,29 @@ var ModalFooter = _ref5 => {
 
 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)));
+  }));
 };
 
 /**