issue 1649: dialog onBeforeClose

docs/documentation/components/dialog.mdx

@@ -209,3 +209,30 @@ function PreserveBodyScrollingDialogExample() {
   )
 }
 ```
+
+## Handle overlay/close clicks
+
+Use the `onBeforeClose` prop to handle overlay/close clicks. It is executed
+when dialog is about to close. Return `false` to prevent the sheet from closing.
+
+```jsx
+function OnBeforeCloseExample() {
+  const [isShown, setIsShown] = React.useState(false)
+
+  return (
+    <Pane>
+      <Dialog
+        isShown={isShown}
+        title="Dialog with onBeforeClose callback
+        onBeforeClose={() => confirm('Are you sure you want to close?')}
+        onCloseComplete={() => setIsShown(false)}
+      >
+        Dialog content
+      </Dialog>
+
+      <Button onClick={() => setIsShown(true)}>Show Dialog</Button>
+    </Pane>
+  )
+}
+```
+

index.d.ts

@@ -833,7 +833,10 @@ export interface CornerDialogProps {
 export declare const CornerDialog: React.FC<CornerDialogProps>
 
 export interface DialogProps
-  extends Pick<OverlayProps, 'isShown' | 'preventBodyScrolling' | 'shouldAutoFocus' | 'shouldCloseOnEscapePress'> {
+  extends Pick<
+    OverlayProps,
+    'isShown' | 'preventBodyScrolling' | 'shouldAutoFocus' | 'shouldCloseOnEscapePress' | 'onBeforeClose'
+  > {
   /**
    * Children can be a string, node or a function accepting `({ close })`.
    * When passing a string, <Paragraph /> is used to wrap the string.

src/dialog/src/Dialog.js

@@ -77,6 +77,7 @@ const Dialog = memo(function Dialog({
   isConfirmLoading = false,
   isShown = false,
   minHeightContent = 80,
+  onBeforeClose,
   onCancel = closeHandler,
   onCloseComplete,
   onConfirm = closeHandler,
@@ -195,6 +196,7 @@ const Dialog = memo(function Dialog({
         justifyContent: 'center',
         ...overlayProps
       }}
+      onBeforeClose={onBeforeClose}
       preventBodyScrolling={preventBodyScrolling}
     >
       {({ close, state }) => (
@@ -403,6 +405,13 @@ Dialog.propTypes = {
    */
   preventBodyScrolling: PropTypes.bool,
 
+  /**
+   * Function called when dialog is about to close.
+   * Return `false` to prevent the sheet from closing.
+   * type: `Function -> Boolean`
+   */
+  onBeforeClose: PropTypes.func,
+
   /**
    * Props that are passed to the Overlay component.
    */

src/dialog/stories/index.stories.js

@@ -396,3 +396,22 @@ storiesOf('dialog', module)
       </DialogManager>
     </Box>
   ))
+  .add('Dialog with onBeforeClose', () => (
+    <Box padding={40}>
+      <DialogManager>
+        {({ hide, isShown, show }) => (
+          <Box marginBottom={16}>
+            <Dialog
+              isShown={isShown}
+              title="Dialog with onBeforeClose callback"
+              onBeforeClose={() => confirm('Are you sure you want to close?')}
+              onCloseComplete={hide}
+            >
+              <Paragraph>onBeforeClose: are you sure you want to close?</Paragraph>
+            </Dialog>
+            <Button onClick={show}>Show Dialog with onBeforeClose</Button>
+          </Box>
+        )}
+      </DialogManager>
+    </Box>
+  ))