From 012bb43897750d047924cdc6ad6f9d784d402dac Mon Sep 17 00:00:00 2001
From: iansummerlin <38192940+iansummerlin@users.noreply.github.com>
Date: Mon, 13 Nov 2023 20:06:17 +0000
Subject: [PATCH 1/6] dialog onBeforeClose

---
 index.d.ts                          |  5 ++++-
 src/dialog/src/Dialog.js            |  9 +++++++++
 src/dialog/stories/index.stories.js | 19 +++++++++++++++++++
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/index.d.ts b/index.d.ts
index bd01f37d4..00b002db1 100644
--- a/index.d.ts
+++ b/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.
diff --git a/src/dialog/src/Dialog.js b/src/dialog/src/Dialog.js
index 2d7a63ebf..24097d468 100644
--- a/src/dialog/src/Dialog.js
+++ b/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.
    */
diff --git a/src/dialog/stories/index.stories.js b/src/dialog/stories/index.stories.js
index eae01423a..2d31585e1 100644
--- a/src/dialog/stories/index.stories.js
+++ b/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 Combobox"
+              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>
+  ))

From efc5761f1061c973a588c2629ccdd4c1ddb6b0c3 Mon Sep 17 00:00:00 2001
From: iansummerlin <38192940+iansummerlin@users.noreply.github.com>
Date: Mon, 13 Nov 2023 20:10:06 +0000
Subject: [PATCH 2/6] storybook tidy

---
 src/dialog/stories/index.stories.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/dialog/stories/index.stories.js b/src/dialog/stories/index.stories.js
index 2d31585e1..8850a53c2 100644
--- a/src/dialog/stories/index.stories.js
+++ b/src/dialog/stories/index.stories.js
@@ -403,11 +403,11 @@ storiesOf('dialog', module)
           <Box marginBottom={16}>
             <Dialog
               isShown={isShown}
-              title="Dialog with Combobox"
+              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>
+              <Paragraph>onBeforeClose: are you sure you want to close?</Paragraph>
             </Dialog>
             <Button onClick={show}>Show Dialog with onBeforeClose</Button>
           </Box>

From 71f8cee630ffaa11321d11c02a8726bf87b514b7 Mon Sep 17 00:00:00 2001
From: iansummerlin <38192940+iansummerlin@users.noreply.github.com>
Date: Mon, 13 Nov 2023 20:20:45 +0000
Subject: [PATCH 3/6] docs

---
 docs/documentation/components/dialog.mdx | 53 ++++++++++++++----------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/docs/documentation/components/dialog.mdx b/docs/documentation/components/dialog.mdx
index a144e1b2f..54a3663b1 100644
--- a/docs/documentation/components/dialog.mdx
+++ b/docs/documentation/components/dialog.mdx
@@ -53,7 +53,6 @@ function DefaultDialogExample() {
 }
 ```
 
-
 ## Default with a danger intent
 
 The `intent` prop determines the appearance of the confirm button, `danger` is red.
@@ -92,11 +91,7 @@ function InternalScrollingDialogExample() {
 
   return (
     <Pane>
-      <Dialog
-        isShown={isShown}
-        title="Internal scrolling"
-        onCloseComplete={() => setIsShown(false)}
-      >
+      <Dialog isShown={isShown} title="Internal scrolling" onCloseComplete={() => setIsShown(false)}>
         <Pane height={1800} width="100%" backgroundColor="#ddd" />
       </Dialog>
 
@@ -113,11 +108,7 @@ function SelfManagedCloseDialogExample() {
   const [isShown, setIsShown] = React.useState(false)
   return (
     <Pane>
-      <Dialog
-        isShown={isShown}
-        title="Self managed close"
-        onCloseComplete={() => setIsShown(false)}
-      >
+      <Dialog isShown={isShown} title="Self managed close" onCloseComplete={() => setIsShown(false)}>
         {({ close }) => (
           <Pane>
             <Paragraph>Manage your own buttons and close interaction</Paragraph>
@@ -144,12 +135,7 @@ function NoFooterDialogExample() {
   const [isShown, setIsShown] = React.useState(false)
   return (
     <Pane>
-      <Dialog
-        isShown={isShown}
-        title="No footer"
-        onCloseComplete={() => setIsShown(false)}
-        hasFooter={false}
-      >
+      <Dialog isShown={isShown} title="No footer" onCloseComplete={() => setIsShown(false)} hasFooter={false}>
         No footer
       </Dialog>
 
@@ -169,12 +155,7 @@ function NoHeaderDialogExample() {
   const [isShown, setIsShown] = React.useState(false)
   return (
     <Pane>
-      <Dialog
-        isShown={isShown}
-        title="No footer"
-        onCloseComplete={() => setIsShown(false)}
-        hasHeader={false}
-      >
+      <Dialog isShown={isShown} title="No footer" onCloseComplete={() => setIsShown(false)} hasHeader={false}>
         No header
       </Dialog>
 
@@ -209,3 +190,29 @@ 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 PreserveBodyScrollingDialogExample() {
+  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>
+  )
+}
+```

From ce6ff13bc3a3381a7053bfa3c298b00facf927bf Mon Sep 17 00:00:00 2001
From: iansummerlin <38192940+iansummerlin@users.noreply.github.com>
Date: Mon, 13 Nov 2023 20:25:51 +0000
Subject: [PATCH 4/6] Revert "docs"

This reverts commit 71f8cee630ffaa11321d11c02a8726bf87b514b7.
---
 docs/documentation/components/dialog.mdx | 53 ++++++++++--------------
 1 file changed, 23 insertions(+), 30 deletions(-)

diff --git a/docs/documentation/components/dialog.mdx b/docs/documentation/components/dialog.mdx
index 54a3663b1..a144e1b2f 100644
--- a/docs/documentation/components/dialog.mdx
+++ b/docs/documentation/components/dialog.mdx
@@ -53,6 +53,7 @@ function DefaultDialogExample() {
 }
 ```
 
+
 ## Default with a danger intent
 
 The `intent` prop determines the appearance of the confirm button, `danger` is red.
@@ -91,7 +92,11 @@ function InternalScrollingDialogExample() {
 
   return (
     <Pane>
-      <Dialog isShown={isShown} title="Internal scrolling" onCloseComplete={() => setIsShown(false)}>
+      <Dialog
+        isShown={isShown}
+        title="Internal scrolling"
+        onCloseComplete={() => setIsShown(false)}
+      >
         <Pane height={1800} width="100%" backgroundColor="#ddd" />
       </Dialog>
 
@@ -108,7 +113,11 @@ function SelfManagedCloseDialogExample() {
   const [isShown, setIsShown] = React.useState(false)
   return (
     <Pane>
-      <Dialog isShown={isShown} title="Self managed close" onCloseComplete={() => setIsShown(false)}>
+      <Dialog
+        isShown={isShown}
+        title="Self managed close"
+        onCloseComplete={() => setIsShown(false)}
+      >
         {({ close }) => (
           <Pane>
             <Paragraph>Manage your own buttons and close interaction</Paragraph>
@@ -135,7 +144,12 @@ function NoFooterDialogExample() {
   const [isShown, setIsShown] = React.useState(false)
   return (
     <Pane>
-      <Dialog isShown={isShown} title="No footer" onCloseComplete={() => setIsShown(false)} hasFooter={false}>
+      <Dialog
+        isShown={isShown}
+        title="No footer"
+        onCloseComplete={() => setIsShown(false)}
+        hasFooter={false}
+      >
         No footer
       </Dialog>
 
@@ -155,7 +169,12 @@ function NoHeaderDialogExample() {
   const [isShown, setIsShown] = React.useState(false)
   return (
     <Pane>
-      <Dialog isShown={isShown} title="No footer" onCloseComplete={() => setIsShown(false)} hasHeader={false}>
+      <Dialog
+        isShown={isShown}
+        title="No footer"
+        onCloseComplete={() => setIsShown(false)}
+        hasHeader={false}
+      >
         No header
       </Dialog>
 
@@ -190,29 +209,3 @@ 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 PreserveBodyScrollingDialogExample() {
-  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>
-  )
-}
-```

From d2d62a4b36781ff04dc4d2af626faffd7a619f1d Mon Sep 17 00:00:00 2001
From: iansummerlin <38192940+iansummerlin@users.noreply.github.com>
Date: Mon, 13 Nov 2023 20:28:53 +0000
Subject: [PATCH 5/6] Update dialog.mdx

---
 docs/documentation/components/dialog.mdx | 27 ++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/docs/documentation/components/dialog.mdx b/docs/documentation/components/dialog.mdx
index a144e1b2f..a943024a9 100644
--- a/docs/documentation/components/dialog.mdx
+++ b/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 PreserveBodyScrollingDialogExample() {
+  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>
+  )
+}
+```
+

From 0e882d44fb9e6c9438bf825270967d3799401938 Mon Sep 17 00:00:00 2001
From: iansummerlin <38192940+iansummerlin@users.noreply.github.com>
Date: Mon, 13 Nov 2023 20:34:46 +0000
Subject: [PATCH 6/6] Update dialog.mdx

---
 docs/documentation/components/dialog.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/documentation/components/dialog.mdx b/docs/documentation/components/dialog.mdx
index a943024a9..7f985298c 100644
--- a/docs/documentation/components/dialog.mdx
+++ b/docs/documentation/components/dialog.mdx
@@ -216,7 +216,7 @@ 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 PreserveBodyScrollingDialogExample() {
+function OnBeforeCloseExample() {
   const [isShown, setIsShown] = React.useState(false)
 
   return (