@motech-development/breeze-ui 2.0.34 → 2.1.1

package/lib/index.d.ts

@@ -275,11 +275,13 @@ interface IMasonryProps {
 }
 declare const Masonry: FC<IMasonryProps>;
 
+type TModalSize = 'sm' | 'lg';
 interface IModalProps {
     children: ReactNode;
     isOpen: boolean;
+    size?: TModalSize;
     title: string;
-    onDismiss(): void;
+    onDismiss: () => void;
 }
 declare const Modal: FC<IModalProps>;
 

package/lib/index.esm.js

@@ -1954,56 +1954,31 @@ const ModalContent = styled.div`
   pointer-events: auto;
 `;
 const ModalDialog = styled.div`
-  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14),
+  box-shadow:
+    0 3px 5px -1px rgba(0, 0, 0, 0.2),
+    0 5px 8px 0 rgba(0, 0, 0, 0.14),
     0 1px 14px 0 rgba(0, 0, 0, 0.12);
   margin: 5rem auto;
-  max-width: 500px;
+  max-width: ${({ size })=>size === 'sm' ? '500px' : '90vw'};
   pointer-events: none;
   position: relative;
 `;
-const Modal = ({ children, isOpen, onDismiss, title })=>{
-    const output = document.createElement('div');
+const Modal = ({ children, isOpen, onDismiss, size = 'sm', title })=>{
     const doNotDismiss = (e)=>{
         e.stopPropagation();
     };
-    const modal = /*#__PURE__*/ jsxs(Suspense, {
-        fallback: /*#__PURE__*/ jsx(Loader, {}),
-        children: [
-            /*#__PURE__*/ jsx(ModalOuter, {
-                "aria-modal": true,
-                "aria-label": title,
-                role: "dialog",
-                tabIndex: -1,
-                onClick: onDismiss,
-                children: /*#__PURE__*/ jsx(ModalDialog, {
-                    role: "document",
-                    children: /*#__PURE__*/ jsx(ModalContent, {
-                        onClick: doNotDismiss,
-                        children: /*#__PURE__*/ jsx(Card, {
-                            padding: "lg",
-                            children: children
-                        })
-                    })
-                })
-            }),
-            /*#__PURE__*/ jsx(Overlay, {})
-        ]
-    });
     useEffect(()=>{
         const keyboardEvent = (e)=>{
             if (e.key === 'Escape') {
                 onDismiss();
             }
         };
-        document.body.appendChild(output);
         document.addEventListener('keydown', keyboardEvent, false);
         return ()=>{
-            document.body.removeChild(output);
             document.body.style.removeProperty('overflow');
             document.removeEventListener('keydown', keyboardEvent, false);
         };
     }, [
-        output,
         onDismiss
     ]);
     useEffect(()=>{
@@ -2014,7 +1989,30 @@ const Modal = ({ children, isOpen, onDismiss, title })=>{
         isOpen
     ]);
     if (isOpen) {
-        return /*#__PURE__*/ createPortal(modal, output);
+        return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsxs(Suspense, {
+            fallback: /*#__PURE__*/ jsx(Loader, {}),
+            children: [
+                /*#__PURE__*/ jsx(ModalOuter, {
+                    "aria-modal": true,
+                    "aria-label": title,
+                    role: "dialog",
+                    tabIndex: -1,
+                    onClick: onDismiss,
+                    children: /*#__PURE__*/ jsx(ModalDialog, {
+                        size: size,
+                        role: "document",
+                        children: /*#__PURE__*/ jsx(ModalContent, {
+                            onClick: doNotDismiss,
+                            children: /*#__PURE__*/ jsx(Card, {
+                                padding: "lg",
+                                children: children
+                            })
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsx(Overlay, {})
+            ]
+        }), document.body);
     }
     return null;
 };
@@ -2701,7 +2699,6 @@ const selectIcon = (alertType)=>{
     }
 };
 const ToastProvider = ({ children })=>{
-    const output = document.createElement('div');
     const [toasts, setToasts] = useState([]);
     const add = useCallback(({ colour, message, onDismiss })=>{
         const id = generateId();
@@ -2717,34 +2714,18 @@ const ToastProvider = ({ children })=>{
     }, [
         toasts
     ]);
-    const remove = useCallback((id)=>setToasts(toasts.filter((t)=>{
-            if (t.id === id && t.onDismiss) {
-                t.onDismiss();
+    const remove = useCallback((id)=>{
+        setToasts((value)=>{
+            const item = value.findIndex((t)=>t.id === id);
+            if (value[item]?.onDismiss) {
+                value[item].onDismiss();
             }
-            return t.id !== id;
-        })), [
-        toasts
-    ]);
-    const alerts = /*#__PURE__*/ jsx(ToastContainer, {
-        children: toasts.map(({ colour, id, message })=>/*#__PURE__*/ jsx(Alert, {
-                spacing: "lg",
-                dismissable: 5000,
-                icon: /*#__PURE__*/ jsx(FontAwesomeIcon, {
-                    icon: selectIcon(colour)
-                }),
-                colour: colour,
-                message: message,
-                onDismiss: ()=>remove(id)
-            }, id))
-    });
-    useEffect(()=>{
-        document.body.appendChild(output);
-        return ()=>{
-            document.body.removeChild(output);
-        };
-    }, [
-        output
-    ]);
+            if (item !== -1) {
+                value.splice(item, 1);
+            }
+            return value;
+        });
+    }, []);
     const value = useMemo(()=>({
             add,
             remove
@@ -2756,7 +2737,20 @@ const ToastProvider = ({ children })=>{
         value: value,
         children: [
             children,
-            /*#__PURE__*/ createPortal(alerts, output)
+            /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(ToastContainer, {
+                children: toasts.map(({ colour, id, message })=>/*#__PURE__*/ jsx(Alert, {
+                        spacing: "lg",
+                        dismissable: 5000,
+                        icon: /*#__PURE__*/ jsx(FontAwesomeIcon, {
+                            icon: selectIcon(colour)
+                        }),
+                        colour: colour,
+                        message: message,
+                        onDismiss: ()=>{
+                            remove(id);
+                        }
+                    }, id))
+            }), document.body)
         ]
     });
 };