new/Modal: onCloseModal prop

Author: abder

packages/ui/modal/src/modal.tsx

@@ -23,7 +23,15 @@ export const ModalContext = createContext<ModalContextProps | null>(null)
 // Build modal
 const Modal = forwardRef<ModalActionsProps, ModalProps>(
 	(
-		{ id, size = "sm", _style, children, variant = "simple", _htmlProps },
+		{
+			id,
+			size = "sm",
+			_style,
+			children,
+			variant = "simple",
+			_htmlProps,
+			onCloseModal,
+		},
 		ref,
 	) => {
 		// generate id if not provided
@@ -56,6 +64,9 @@ const Modal = forwardRef<ModalActionsProps, ModalProps>(
 			// Remove lock class from body on close
 			document.body.classList.remove("sui-locked")
 
+			// onClose callback
+			if (onCloseModal) onCloseModal()
+
 			// Update open state
 			setIsOpen(false)
 		}, [])

packages/ui/modal/src/modal.types.ts

@@ -8,6 +8,7 @@ type ModalProps = {
 	variant?: "simple" | "advanced" | "app-connect" // Variant type of the modal
 	size?: "sm" | "md" | "lg" | "xl" // Size of the modal (small, medium, large, extra-large)
 	children?: React.ReactNode // Content of the modal (React children)
+	onCloseModal?: () => void // callback function to be called upon closing the modal
 	ref: object // Used to access the open and close modals of the modal
 } & SuiStyleType &
 	SuiHTMLAttributes

packages/ui/modal/stories/tabs/TabCode.mdx

@@ -41,6 +41,10 @@ import { Section, Row, Col, Table, List, Code, Tag, PackageInstallGuide, PropSec
     			</List>
     	</PropSection>
 
+		<PropSection title="ref" type="object" isRequired={true}>
+    		<p>A callback function to be invoked upon closing the modal, it could be used to reset the modal data for proExample=""</p>
+    	</PropSection>
+
     	<PropSection title="children" type="React Node">
     		<p>Content of the modal</p>
     	</PropSection>