@app-studio/web 0.8.39 → 0.8.41

package/dist/components/Avatar/Avatar/Avatar.props.d.ts

@@ -5,6 +5,7 @@ export interface AvatarProps {
     size?: Size;
     fallback?: string;
     styles?: AvatarStyles;
+    onClick?: Function;
 }
 export interface AvatarViewProps extends AvatarProps {
     imageError: boolean;

package/dist/components/Avatar/Avatar/Avatar.view.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { AvatarViewProps } from './Avatar.props';
-export declare const AvatarView: ({ src, size, fallback, styles, imageError, setImageError, }: AvatarViewProps) => React.JSX.Element;
+export declare const AvatarView: ({ src, size, fallback, styles, imageError, setImageError, onClick, }: AvatarViewProps) => React.JSX.Element;

package/dist/components/Avatar/Avatar.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { AvatarProps } from './Avatar/Avatar.props';
-export declare const Avatar: ({ src, size, styles, fallback }: AvatarProps) => React.JSX.Element;
+export declare const Avatar: ({ src, size, styles, fallback, onClick, }: AvatarProps) => React.JSX.Element;

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/components/Table/Table/Table.type.d.ts

@@ -1,13 +1,13 @@
-import { CSSProperties } from 'react';
+import { ViewProps } from 'app-studio';
 export declare type TableViewStyles = {
-    table?: CSSProperties;
-    thead?: CSSProperties;
-    tfoot?: CSSProperties;
-    tbody?: CSSProperties;
-    tr?: CSSProperties;
-    td?: CSSProperties;
-    th?: CSSProperties;
-    caption?: CSSProperties;
+    table?: ViewProps;
+    thead?: ViewProps;
+    tfoot?: ViewProps;
+    tbody?: ViewProps;
+    tr?: ViewProps;
+    td?: ViewProps;
+    th?: ViewProps;
+    caption?: ViewProps;
 };
 export interface Column {
     title: string;
@@ -15,5 +15,5 @@ export interface Column {
 }
 export interface FooterCell {
     value: string;
-    props?: any;
+    props?: ViewProps;
 }

package/dist/web.cjs.development.js

@@ -1809,7 +1809,8 @@ var AvatarView = _ref => {
     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];
@@ -1827,7 +1828,8 @@ var AvatarView = _ref => {
     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,
@@ -1846,7 +1848,8 @@ var AvatarComponent = _ref => {
     src,
     size,
     styles,
-    fallback
+    fallback,
+    onClick
   } = _ref;
   // Uses custom hook useAvatarState to manage the avatar image loading error state.
   var {
@@ -1860,7 +1863,8 @@ var AvatarComponent = _ref => {
     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.
 };
@@ -6625,46 +6629,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 = {
@@ -6834,33 +6843,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)));
+  }));
 };
 
 /**