@apia/components 3.0.21 → 3.0.22

package/dist/index.d.ts

@@ -200,6 +200,9 @@ declare const Modal: React__default.ForwardRefExoticComponent<{
 } & Pick<IDialogHeader, "hideCloseButton"> & React__default.RefAttributes<HTMLDivElement>>;
 
 type TOpenModal = Pick<TModal, 'NavBar' | 'Portal' | 'children' | 'className' | 'hideCloseButton' | 'initialFocusGetter' | 'initialFocusConfiguration' | 'maxWidth' | 'noHeader' | 'onExited' | 'shouldCloseOnEsc' | 'shouldCloseOnOverlayClick' | 'size' | 'stretch' | 'title' | 'variant' | 'draggable' | 'onClose' | 'onDragStart' | 'defaultPosition'> & {
+    /**
+     * This id may be used to close the modal.
+     */
     id?: string;
     children?: React__default.ReactNode;
     confirmProps?: Omit<IConfirm, 'onConfirmOk' | 'onConfirmCancel' | 'children'>;
@@ -236,6 +239,7 @@ declare class ApiaUtilModalHandler {
 declare class ApiaUtilModals {
     #private;
     constructor();
+    close(id: string): void;
     open(props: TOpenModal): ApiaUtilModalHandler;
     Component: () => React$1.JSX.Element;
 }
@@ -626,6 +630,7 @@ type TSubmenu = {
     items: TMenuItems;
 };
 type TMenuItem = (MenuItemProps & {
+    icon?: TIconName;
     key: string;
 }) | 'separator' | TSubmenu;
 type TMenuItems = TMenuItem[];

package/dist/index.js

@@ -9,10 +9,10 @@ import { Box, getVariant, useBreakpointIndex, Close, responsive, spacing, Headin
 import { uniqueId as uniqueId$1, defaultNotifier, NotificationsList } from '@apia/notifications';
 import ReactFocusLock, { FreeFocusInside } from 'react-focus-lock';
 import { useBreakpointIndex as useBreakpointIndex$1 } from '@theme-ui/match-media';
+import { isIconName, Icon as Icon$1, icons } from '@apia/icons';
 import { useMenuState, ControlledMenu, MenuItem, MenuDivider, SubMenu } from '@szhsin/react-menu';
 import { makeAutoObservable, observable, reaction } from 'mobx';
 import { shallowEqual } from '@apia/store';
-import { isIconName, Icon as Icon$1, icons } from '@apia/icons';
 import AnimateHeight from 'react-animate-height';
 import { useUpdateEffect as useUpdateEffect$1 } from 'ahooks';
 import dayjs from 'dayjs';
@@ -1349,7 +1349,8 @@ Modal.displayName = "Modal";
 const OpenModal = (props) => {
   const modalProps = useModal({
     isDefaultOpen: true,
-    onExited: props.onExited
+    onExited: props.onExited,
+    onClose: props.onClose
   });
   const previousOpenProp = usePrevious(props.isOpen);
   if (previousOpenProp.current !== props.isOpen && !props.isOpen) {
@@ -1363,6 +1364,10 @@ const OpenModal = (props) => {
       {
         ...props,
         ...modalProps,
+        onClose: () => {
+          modalProps.onClose?.();
+          props.onClose?.();
+        },
         onExited: () => {
           props.onClose?.();
           if (!hasConfirmed.current) {
@@ -1451,6 +1456,7 @@ class ApiaUtilModals {
             {
               ...ev,
               isOpen: true,
+              onClose: ev.onClose,
               onExited: () => {
                 ev.onExited?.();
                 setModals(
@@ -1489,6 +1495,9 @@ class ApiaUtilModals {
       this.open(cevent.detail);
     });
   }
+  close(id) {
+    __privateGet$8(this, _emitter$4).emit("close", id);
+  }
   open(props) {
     const id = props.id ?? `modal_${__privateWrapper$2(this, _maxId$1)._++}`;
     __privateGet$8(this, _emitter$4).emit("open", { ...props, id });
@@ -3062,19 +3071,23 @@ function calculateTooltipPosition({
     const availableTopSpace = actualAnchorPoint.top;
     const availableLeftSpace = actualAnchorPoint.left;
     const availableRightSpace = window.innerWidth - actualAnchorPoint.left;
-    const isEnoughToRight = (minSize?.width ?? 0) <= availableRightSpace;
-    const isEnoughToLeft = (minSize?.width ?? 0) <= availableLeftSpace;
-    const isEnoughToBottom = (minSize?.height ?? 0) <= availableBottomSpace;
-    const isEnoughToTop = (minSize?.height ?? 0) <= availableTopSpace;
+    const isEnoughToRight = ((preferredSize?.width !== "auto" ? preferredSize?.width : void 0) ?? minSize?.width ?? 0) <= availableRightSpace;
+    const isEnoughToLeft = ((preferredSize?.width !== "auto" ? preferredSize?.width : void 0) ?? minSize?.width ?? 0) <= availableLeftSpace;
+    const isEnoughToBottom = ((preferredSize?.height !== "auto" ? preferredSize?.height : void 0) ?? minSize?.height ?? 0) <= availableBottomSpace;
+    const isEnoughToTop = ((preferredSize?.height !== "auto" ? preferredSize?.height : void 0) ?? minSize?.height ?? 0) <= availableTopSpace;
     const preferredWidth = preferredSize.width === "auto" ? Infinity : preferredSize.width;
     const preferredHeight = preferredSize.height === "auto" ? Infinity : preferredSize.height;
     const position = {
       "& > *": {
         width: "100%",
-        height: "100%"
+        height: "100%",
+        overflow: "auto"
       },
-      width: preferredSize.width === "auto" ? "auto" : "100%",
-      height: preferredSize.height === "auto" ? "auto" : "100%"
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden",
+      width: preferredSize.width === "auto" ? "auto" : void 0,
+      height: preferredSize.height === "auto" ? "auto" : void 0
     };
     if (preferredOrientationX === "left") {
       if (isEnoughToLeft) {
@@ -3473,7 +3486,12 @@ class ApiaUtilMenu {
         if (isSubmenu(current)) {
           return /* @__PURE__ */ jsx(SubMenu, { label: current.label, children: __privateGet$4(this, _RenderMenu).call(this, current) }, `submenu${__privateWrapper(this, _maxId)._++}`);
         }
-        return /* @__PURE__ */ createElement(MenuItem, { ...current, key: current.key });
+        const children = current.icon ? /* @__PURE__ */ jsxs(Box, { className: "withIcon", children: [
+          /* @__PURE__ */ jsx(Icon$1, { name: current.icon, title: current.title }),
+          " ",
+          current.children
+        ] }) : current.children;
+        return /* @__PURE__ */ createElement(MenuItem, { ...current, key: current.key }, children);
       }) });
     });
     __publicField$8(this, "Component", () => {