@latte-macchiat-io/latte-vanilla-components 0.0.233 → 0.0.235

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.233",
+  "version": "0.0.235",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Modal/index.tsx

@@ -10,31 +10,36 @@ import { Actions } from '../Actions';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
 
+type ModalRenderProp = (args: { closeModal: () => void }) => React.ReactNode;
+
 export type ModalProps = React.HTMLAttributes<HTMLDivElement> &
   ModalVariants & {
     triggerLabel: string;
-    children: React.ReactNode;
     withCloseButton?: boolean;
+    children: React.ReactNode | ModalRenderProp;
   };
 
 export const Modal = ({ triggerLabel, className, children, align, withCloseButton = false }: ModalProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
+  const closeModal = () => setIsOpen(false);
+
   return (
     <>
       <Actions align="center">
-        <Button onClick={() => setIsOpen(true)}> {triggerLabel}</Button>
+        <Button onClick={() => setIsOpen(true)}>{triggerLabel}</Button>
       </Actions>
 
       {isOpen && (
         <div className={modal} role="dialog" aria-modal="true">
           <div className={clsx(modalContentRecipe({ align }), className)}>
             {withCloseButton && (
-              <button type="button" aria-label="Close modal" className={modalContentCloseButton} onClick={() => setIsOpen(false)}>
+              <button type="button" className={modalContentCloseButton} onClick={closeModal} aria-label="Close modal">
                 <Icon icon="close" color={themeContract.modal.closeButtonColor} />
               </button>
             )}
-            {children}
+
+            {typeof children === 'function' ? (children as ModalRenderProp)({ closeModal }) : children}
           </div>
         </div>
       )}