@apia/components 4.0.40 → 4.0.41

package/dist/index.d.ts

@@ -237,6 +237,7 @@ declare class ApiaUtilModalHandler {
 declare class ApiaUtilModals {
     #private;
     private overlays;
+    private modals;
     constructor();
     close(id: string): void;
     open(props: TOpenModal): ApiaUtilModalHandler;
@@ -482,20 +483,33 @@ interface IConfirm {
     onConfirm?: () => unknown;
     onCancel?: () => unknown;
     title?: string;
+    size?: TModalSize;
     variant?: string;
 }
-declare const ConfirmModal: ({ onConfirm, onCancel, title, ...props }: IConfirm) => JSX.Element;
+declare const ConfirmModal: ({ onConfirm, onCancel, title, size, ...props }: IConfirm) => JSX.Element;
 
-type TApiaUtilConfirm = Pick<IConfirm, 'additionalButtons' | 'additionalButtonsOnRight' | 'cancelButtonText' | 'children' | 'className' | 'confirmButtonText' | 'confirmButtonVariant' | 'contentRef' | 'hideCancelButton' | 'hideConfirmButton' | 'title' | 'variant'>;
+type TApiaUtilConfirm = Pick<IConfirm, 'additionalButtons' | 'additionalButtonsOnRight' | 'cancelButtonText' | 'children' | 'className' | 'confirmButtonText' | 'confirmButtonVariant' | 'contentRef' | 'hideCancelButton' | 'hideConfirmButton' | 'title' | 'size' | 'variant'>;
+type TApiaUtilInnerConfirm = TApiaUtilConfirm & {
+    id: string;
+} & Pick<IConfirm, 'onCancel' | 'onConfirm'>;
 type TAlert = {
     children: ReactNode;
     title: string;
 };
+type TApiaUtilInnerAlert = TAlert & {
+    onClose: () => unknown;
+    id: string;
+};
 declare class ApiaUtilDialogs {
     #private;
+    alerts: TApiaUtilInnerAlert[];
+    dialogs: TApiaUtilInnerConfirm[];
+    constructor();
     alert(props: TAlert): Promise<void>;
     confirm(props: TApiaUtilConfirm): Promise<boolean>;
-    Component: () => React$1.JSX.Element;
+    Component: (() => React$1.JSX.Element) & {
+        displayName: string;
+    };
 }
 
 declare class ApiaUtilParsers {
@@ -1327,6 +1341,10 @@ interface MessageCallbackProps {
     message: ChatMessage;
 }
 type MessageSubmitCallback = (props: MessageCallbackProps) => unknown;
+type TComponentRender = {
+    path: string;
+    args: Record<any, any>;
+};
 
 declare class ChatMessage {
     message: ReactNode;
@@ -2136,14 +2154,9 @@ interface IPagination {
 }
 declare const Pagination: React__default.MemoExoticComponent<({ appliedFilters, areAllFiltersApplied, className, currentPage, disabled, disableReduced, hasMore, hideInfo, hideMaximizeButton, hideRefreshButton, isLoading, isPerforming, onDeleteFilters, onPageChange, onRefresh, pageCount, recordsCount: outerRecordsCount, reachedMax, showMaximizeOnSmallBreakpoints, variant, isMaximized, onMaximize, labels, }: IPagination) => React__default.JSX.Element>;
 
-type TComponentRender = {
-    path: string;
-    args: Record<any, any>;
-};
-
 declare const _default: React$1.MemoExoticComponent<({ str }: {
     str: string;
-}) => React$1.JSX.Element[]>;
+}) => React$1.JSX.Element>;
 
 interface IAsidePanel {
     title?: string;

package/dist/index.js

@@ -7,7 +7,7 @@ import { uniqueId as uniqueId$3, cloneDeep, isFunction } from 'lodash-es';
 import { Box, getVariant, useBreakpointIndex, Close, responsive, spacing, Heading, Link, Button, Spinner, createElement, Select, Input, Flex, IconButton as IconButton$1, Image, injectStyles, Progress, Label as Label$1, Paragraph, Container, Form, focusOutline, makeStyledComponent, useThemeUI, Grid, Textarea } from '@apia/theme';
 import { BarLoader } from 'react-spinners';
 import uniqueId$2 from 'lodash-es/uniqueId';
-import { findScrollContainer, useUpdateEffect, focus, focusSelector, getFocusSelector, addBoundary, useCombinedRefs, usePrevious, EventEmitter, useMount, getLabel, isChild, useUnmount, StatefulEmitter, shallowEqual as shallowEqual$1, getSpecificParent, getDateFormat, customEvents, uniqueId as uniqueId$4, decodeBase64ToUtf8, AudioRecorder, persistentStorage, disableChildrenFocus, enableChildrenFocus, decodeHTMLEntities, useDebouncedCallback, getIndex, noNaN, useLatest, useSubscription, useMatchScrollDirection, arrayOrArray } from '@apia/util';
+import { findScrollContainer, useUpdateEffect, focus, focusSelector, getFocusSelector, addBoundary, useCombinedRefs, usePrevious, getLabel, isChild, EventEmitter, useUnmount, useMount, StatefulEmitter, shallowEqual as shallowEqual$1, getSpecificParent, getDateFormat, customEvents, uniqueId as uniqueId$4, decodeBase64ToUtf8, AudioRecorder, persistentStorage, disableChildrenFocus, enableChildrenFocus, decodeHTMLEntities, useDebouncedCallback, getIndex, noNaN, useLatest, useSubscription, useMatchScrollDirection, arrayOrArray } from '@apia/util';
 import usePortal from 'react-cool-portal';
 import { CSSTransition } from 'react-transition-group';
 import { uniqueId as uniqueId$1, defaultNotifier, NotificationsList } from '@apia/notifications';
@@ -425,7 +425,9 @@ function useModal(configuration) {
   });
   const hide = React__default.useCallback(() => {
     setIsOpen(false);
-  }, []);
+    if (configuration?.onClose)
+      configuration.onClose();
+  }, [configuration]);
   const show = React__default.useCallback(() => {
     if (configuration?.preFetcher) {
       setIsLoading(true);
@@ -457,8 +459,7 @@ function useModal(configuration) {
       if (configuration?.onOpen)
         configuration.onOpen();
       showPortal();
-    } else
-      onClose?.();
+    }
   }, [isOpen]);
   return {
     hide,
@@ -1443,7 +1444,7 @@ var __privateWrapper$2 = (obj, member, setter, getter) => ({
     return __privateGet$9(obj, member, getter);
   }
 });
-var _emitter$4, _maxId$1, _maxOverlay, _useModalsList;
+var _maxId$1, _maxOverlay;
 class ApiaUtilModalHandler {
   constructor(close) {
     this.close = close;
@@ -1452,54 +1453,12 @@ class ApiaUtilModalHandler {
 class ApiaUtilModals {
   constructor() {
     __publicField$q(this, "overlays", []);
-    __privateAdd$c(this, _emitter$4, new EventEmitter());
+    __publicField$q(this, "modals", []);
     __privateAdd$c(this, _maxId$1, 0);
     __privateAdd$c(this, _maxOverlay, 0);
-    __privateAdd$c(this, _useModalsList, () => {
-      const [modals, setModals] = useState(
-        []
-      );
-      useMount(() => {
-        const u1 = __privateGet$9(this, _emitter$4).on("open", (ev) => {
-          setModals((current) => [
-            ...current,
-            {
-              ...ev,
-              isOpen: true,
-              onClose: ev.onClose,
-              onExited: () => {
-                ev.onExited?.();
-                setModals(
-                  (current2) => current2.filter((modal) => modal.id !== ev.id)
-                );
-              }
-            }
-          ]);
-        });
-        const u2 = __privateGet$9(this, _emitter$4).on("closeAll", () => {
-          setModals(
-            (current) => current.map((modal) => ({ ...modal, isOpen: false }))
-          );
-        });
-        const u3 = __privateGet$9(this, _emitter$4).on("close", (modalId) => {
-          setModals(
-            (current) => current.map(
-              (modal) => modal.id === modalId ? { ...modal, isOpen: false } : modal
-            )
-          );
-        });
-        return () => {
-          u1();
-          u2();
-          u3();
-        };
-      });
-      return modals;
-    });
     __publicField$q(this, "Component", observer(() => {
-      const modals = __privateGet$9(this, _useModalsList).call(this);
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        modals.map((current) => /* @__PURE__ */ jsx(OpenModal, { ...current }, current.id)),
+        this.modals.map((current) => /* @__PURE__ */ jsx(OpenModal, { ...current }, current.id)),
         this.overlays.map((c) => c.render)
       ] });
     }));
@@ -1508,17 +1467,27 @@ class ApiaUtilModals {
       this.open(cevent.detail);
     });
     makeObservable(this, {
-      overlays: observable
+      overlays: observable,
+      modals: observable
     });
   }
   close(id) {
-    __privateGet$9(this, _emitter$4).emit("close", id);
+    this.modals = this.modals.filter((s) => s.id !== id);
   }
   open(props) {
     const id = props.id ?? `modal_${__privateWrapper$2(this, _maxId$1)._++}`;
-    __privateGet$9(this, _emitter$4).emit("open", { ...props, id });
+    this.modals.push({
+      ...props,
+      id,
+      isOpen: true,
+      onClose: props.onClose,
+      onExited: () => {
+        props.onExited?.();
+        this.close(id);
+      }
+    });
     return new ApiaUtilModalHandler(() => {
-      __privateGet$9(this, _emitter$4).emit("close", id);
+      this.close(id);
     });
   }
   /**
@@ -1560,10 +1529,8 @@ class ApiaUtilModals {
     };
   }
 }
-_emitter$4 = new WeakMap();
 _maxId$1 = new WeakMap();
 _maxOverlay = new WeakMap();
-_useModalsList = new WeakMap();
 
 var __defProp$p = Object.defineProperty;
 var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -1933,6 +1900,7 @@ const ConfirmModal = ({
   onConfirm,
   onCancel,
   title,
+  size,
   ...props
 }) => {
   const hasConfirmed = useRef(false);
@@ -1961,6 +1929,7 @@ const ConfirmModal = ({
         []
       ),
       title,
+      size,
       children: /* @__PURE__ */ jsx(Confirm, { ...props, onCancel: handleCancel, onConfirm: handleConfirm })
     }
   );
@@ -2003,7 +1972,7 @@ const AlertModal = ({ children, onClose, title }) => {
 var __defProp$o = Object.defineProperty;
 var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField$o = (obj, key, value) => {
-  __defNormalProp$o(obj, key + "" , value);
+  __defNormalProp$o(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 var __accessCheck$b = (obj, member, msg) => {
@@ -2032,40 +2001,23 @@ var __privateWrapper$1 = (obj, member, setter, getter) => ({
     return __privateGet$8(obj, member, getter);
   }
 });
-var _emitter$3, _maxIdAlert, _maxIdConfirm;
+var _maxIdAlert, _maxIdConfirm;
 class ApiaUtilDialogs {
   constructor() {
-    __privateAdd$b(this, _emitter$3, new EventEmitter());
     __privateAdd$b(this, _maxIdAlert, 0);
     __privateAdd$b(this, _maxIdConfirm, 0);
-    __publicField$o(this, "Component", () => {
-      const [confirmDialogs, setConfirmDialogs] = useState([]);
-      const [alertsDialogs, setAlertsDialogs] = useState(
-        []
-      );
-      useMount(() => {
-        const unsuscribe1 = __privateGet$8(this, _emitter$3).on("alert", (ev) => {
-          setAlertsDialogs((current) => [...current, ev]);
-        });
-        const unsuscribe2 = __privateGet$8(this, _emitter$3).on("confirm", (ev) => {
-          setConfirmDialogs((current) => [...current, ev]);
-        });
-        return () => {
-          unsuscribe1();
-          unsuscribe2();
-        };
-      });
+    __publicField$o(this, "alerts", []);
+    __publicField$o(this, "dialogs", []);
+    __publicField$o(this, "Component", observer(() => {
       const removeModal = useCallback(
         (which) => {
-          setConfirmDialogs(
-            (current) => current.filter((search) => search !== which)
-          );
+          this.dialogs = this.dialogs.filter((search) => search !== which);
         },
         []
       );
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        alertsDialogs.map((current) => /* @__PURE__ */ createElement(AlertModal, { ...current, key: current.id })),
-        confirmDialogs.map((current) => /* @__PURE__ */ createElement(
+        this.alerts.map((current) => /* @__PURE__ */ createElement(AlertModal, { ...current, key: current.id })),
+        this.dialogs.map((current) => /* @__PURE__ */ createElement(
           ConfirmModal,
           {
             ...current,
@@ -2081,11 +2033,12 @@ class ApiaUtilDialogs {
           }
         ))
       ] });
-    });
+    }));
+    makeAutoObservable(this);
   }
   alert(props) {
     return new Promise((resolve) => {
-      __privateGet$8(this, _emitter$3).emit("alert", {
+      this.alerts.push({
         ...props,
         onClose: () => resolve(),
         id: `confirm${__privateWrapper$1(this, _maxIdAlert)._++}`
@@ -2094,7 +2047,7 @@ class ApiaUtilDialogs {
   }
   confirm(props) {
     return new Promise((resolve) => {
-      __privateGet$8(this, _emitter$3).emit("confirm", {
+      this.dialogs.push({
         ...props,
         id: `confirm${__privateWrapper$1(this, _maxIdConfirm)._++}`,
         onCancel: () => resolve(false),
@@ -2103,7 +2056,6 @@ class ApiaUtilDialogs {
     });
   }
 }
-_emitter$3 = new WeakMap();
 _maxIdAlert = new WeakMap();
 _maxIdConfirm = new WeakMap();
 
@@ -5682,7 +5634,8 @@ const FileAttachment = observer(
                     onAddDescription(attachment, ev.desc);
                   }
                   return true;
-                }
+                },
+                title: getLabel("btnAddComment").text
               });
             },
             variant: "icon-only"
@@ -5721,33 +5674,6 @@ const Attachments = observer(
   }
 );
 
-function importComponent(path) {
-  return lazy(() => {
-    return new Promise((resolve) => {
-      import(
-        /* webpackInclude: /\.tsx?$/ */
-        `/customComponents/${path}`
-      ).then((result) => {
-        if (result?.default?.default)
-          resolve(result.default);
-        else if (result?.default)
-          resolve(result);
-        else
-          resolve({
-            default: () => /* @__PURE__ */ jsx(Fragment, { children: "Something went wrong when importing component" })
-          });
-      }).catch((error) => {
-        resolve({
-          default: () => {
-            console.error(error);
-            return /* @__PURE__ */ jsx(Fragment, { children: "Error" });
-          }
-        });
-      });
-    });
-  });
-}
-
 const AttributeParsers = [
   /**
    * Allows to pass javascript event handlers through the format
@@ -6406,6 +6332,51 @@ __publicField$d(_Templater, "_instance", null);
 let Templater = _Templater;
 
 const MDRenderer = ({ str }) => {
+  return /* @__PURE__ */ jsx(Box, { ...getVariant("layout.common.markdown"), children: Templater.instance.parseString(
+    new Remarkable({ linkTarget: "_blank" }).render(str)
+  ) });
+};
+var MDRenderer$1 = memo(MDRenderer);
+
+function importComponent(path) {
+  return lazy(() => {
+    return new Promise((resolve) => {
+      import(
+        /* webpackInclude: /\.tsx?$/ */
+        `/customComponents/${path}`
+      ).then((result) => {
+        if (result?.default?.default)
+          resolve(result.default);
+        else if (result?.default)
+          resolve(result);
+        else
+          resolve({
+            default: () => /* @__PURE__ */ jsx(Fragment, { children: "Something went wrong when importing component" })
+          });
+      }).catch((error) => {
+        resolve({
+          default: () => {
+            console.error(error);
+            return /* @__PURE__ */ jsx(Fragment, { children: "Error" });
+          }
+        });
+      });
+    });
+  });
+}
+
+const MessageBlock = ({
+  componentData
+}) => {
+  if (typeof componentData.args === "string") {
+    componentData.args = JSON.parse(componentData.args);
+  }
+  const Component = importComponent(componentData.path);
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(Component, { ...componentData.args }) });
+};
+var MessageBlock$1 = memo(MessageBlock);
+
+const MessageBlocks = ({ str }) => {
   const parts = str.split(/(!!\[[^]+])/g).map((c, i) => {
     if (c.match(/^!!\[[^]+]$/)) {
       const definition = JSON.parse(
@@ -6413,20 +6384,14 @@ const MDRenderer = ({ str }) => {
           (c.match(/^!!\[([^]+)]$/) ?? [void 0, void 0])[1] ?? ""
         )
       );
-      if (typeof definition.args === "string") {
-        definition.args = JSON.parse(definition.args);
-      }
-      const Component = importComponent(definition.path);
-      return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(Component, { ...definition.args }) }, i);
+      return /* @__PURE__ */ jsx(MessageBlock$1, { componentData: definition }, i);
     } else {
-      return /* @__PURE__ */ jsx(Box, { children: Templater.instance.parseString(
-        new Remarkable({ linkTarget: "_blank" }).render(c)
-      ) }, i);
+      return /* @__PURE__ */ jsx(MDRenderer$1, { str: c }, i);
     }
   });
   return parts;
 };
-var MDRenderer$1 = memo(MDRenderer);
+var MessageBlocks$1 = memo(MessageBlocks);
 
 const Message = observer(
   ({
@@ -6448,7 +6413,7 @@ const Message = observer(
             {
               className: "history_message__content",
               ...typeof message === "string" ? {
-                children: /* @__PURE__ */ jsx(MDRenderer$1, { str: message })
+                children: /* @__PURE__ */ jsx(MessageBlocks$1, { str: message })
               } : { children: message }
             }
           ),