diff --git a/packages/ui/modal/src/modal.tsx b/packages/ui/modal/src/modal.tsx index 5df67b7ad..ddb491700 100644 --- a/packages/ui/modal/src/modal.tsx +++ b/packages/ui/modal/src/modal.tsx @@ -23,7 +23,15 @@ export const ModalContext = createContext(null) // Build modal const Modal = forwardRef( ( - { 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( // Remove lock class from body on close document.body.classList.remove("sui-locked") + // onClose callback + if (onCloseModal) onCloseModal() + // Update open state setIsOpen(false) }, []) diff --git a/packages/ui/modal/src/modal.types.ts b/packages/ui/modal/src/modal.types.ts index bb0165f49..052637216 100644 --- a/packages/ui/modal/src/modal.types.ts +++ b/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 diff --git a/packages/ui/modal/stories/tabs/TabCode.mdx b/packages/ui/modal/stories/tabs/TabCode.mdx index b45d84111..45b56d57f 100644 --- a/packages/ui/modal/stories/tabs/TabCode.mdx +++ b/packages/ui/modal/stories/tabs/TabCode.mdx @@ -41,6 +41,10 @@ import { Section, Row, Col, Table, List, Code, Tag, PackageInstallGuide, PropSec + +

A callback function to be invoked upon closing the modal, it could be used to reset the modal data for proExample=""

+
+

Content of the modal