add forwardRef

fold-dev · Jun 12, 2024 · b114432 · b114432
1 parent fa8808a
commit b114432
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 8 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@fold-dev/core",
     "title": "Fold",
-    "version": "0.11.8",
+    "version": "0.12.0",
     "description": "The UI library for product teams.",
     "main": "dist/index.js",
     "module": "dist/index.js",

diff --git a/packages/core/src/contexts/fold.context.tsx b/packages/core/src/contexts/fold.context.tsx
@@ -200,7 +200,10 @@ export const FoldProvider = (props: any) => {
                     closeButton={dialog.closeButton}
                     title={dialog.title}
                     description={dialog.description}
-                    onDismiss={() => setDialog({})}
+                    onDismiss={(e) => {
+                        if (dialog.onDismiss) dialog.onDismiss(e)
+                        setDialog({})
+                    }}
                     footer={dialog.footer}
                     header={dialog.header}
                 />

diff --git a/packages/core/src/dialog/dialog.tsx b/packages/core/src/dialog/dialog.tsx
@@ -9,6 +9,7 @@ export type DialogOptions = {
     footer?: any
     header?: any
     closeButton?: boolean
+    onDismiss?: (e) => void
     portal?: any
 }
 
@@ -25,7 +26,7 @@ export type DialogProps = {
     header?: any
     closeButton?: boolean
     portal?: any
-    onDismiss?: any
+    onDismiss?: (e) => void
 } & CommonProps
 
 export const Dialog = (props: DialogProps) => {
@@ -43,6 +44,7 @@ export const Dialog = (props: DialogProps) => {
     return (
         <Modal
             focusTrap
+            dismissOnEscape
             role="dialog"
             borderless
             width={400}

diff --git a/packages/core/src/modal/modal.tsx b/packages/core/src/modal/modal.tsx
@@ -1,6 +1,6 @@
-import React, { ReactElement, useEffect, useRef } from 'react'
+import React, { ReactElement, forwardRef, useEffect, useRef } from 'react'
 import { ButtonProps, IconButton, View, useFocus, usePreventScrolling } from '../'
-import { classNames, getActionClass, getKey } from '../helpers'
+import { classNames, getActionClass, getKey, mergeRefs } from '../helpers'
 import { CoreViewProps } from '../types'
 
 export type ModalCloseProps = ButtonProps
@@ -46,7 +46,7 @@ export type ModalProps = {
     onDismiss?: any
 } & CoreViewProps
 
-export const Modal = (props: ModalProps) => {
+export const Modal = forwardRef((props: ModalProps, ref) => {
     const {
         headerProps = {},
         footerProps = {},
@@ -118,7 +118,7 @@ export const Modal = (props: ModalProps) => {
                     aria-modal={true}
                     tabIndex={0}
                     onKeyDown={handleKeyDown}
-                    ref={contentRef}>
+                    ref={mergeRefs([contentRef, ref])}>
                     {header && <div className="f-modal__header f-row" {...headerProps}>{header}</div>}
                     {props.children && <div className="f-modal__body" {...bodyProps}>{props.children}</div>}
                     {footer && <div className="f-modal__footer f-row" {...footerProps}>{footer}</div>}
@@ -136,4 +136,4 @@ export const Modal = (props: ModalProps) => {
     } else {
         return null
     }
-}
+})