From a9f7a23de732f6e18675cf86cb02d8a627746e2b Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Thu, 30 Nov 2023 13:44:43 +0100
Subject: [PATCH] fixup! Fix(web-react): HeaderDialog demo missed
 closeOnBackdropClick prop

---
 .../web-react/src/components/Dialog/Dialog.tsx |  2 +-
 .../web-react/src/components/Header/README.md  | 18 +++++++++---------
 .../Header/demo/HeaderInvertedWithActions.tsx  |  2 +-
 .../HeaderInvertedWithActionsAndDialog.tsx     |  8 +-------
 .../web-react/src/components/Modal/Modal.tsx   |  3 +--
 5 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/packages/web-react/src/components/Dialog/Dialog.tsx b/packages/web-react/src/components/Dialog/Dialog.tsx
index 6eb3a2cd3a..891b92c1d3 100644
--- a/packages/web-react/src/components/Dialog/Dialog.tsx
+++ b/packages/web-react/src/components/Dialog/Dialog.tsx
@@ -7,7 +7,7 @@ import { useCancelEvent, useClickOutside } from '../../hooks';
 // Solved using `as MutableRefObject<HTMLDialogElement | null>` but I do not like it
 
 const Dialog = (props: DialogProps, ref: ForwardedRef<HTMLDialogElement | null>): JSX.Element => {
-  const { children, isOpen, onClose, closeOnBackdropClick, ...restProps } = props;
+  const { children, isOpen, onClose, closeOnBackdropClick = true, ...restProps } = props;
   const dialogElementRef: MutableRefObject<ForwardedRef<HTMLDialogElement | null>> = useRef(ref);
   const contentElementRef: MutableRefObject<HTMLElement | null> = useRef(null);
 
diff --git a/packages/web-react/src/components/Header/README.md b/packages/web-react/src/components/Header/README.md
index 44f4a813cd..fea24f1aa9 100644
--- a/packages/web-react/src/components/Header/README.md
+++ b/packages/web-react/src/components/Header/README.md
@@ -294,15 +294,15 @@ const [isOpen, setOpen] = useState(false);
 
 ### API
 
-| Name                   | Type                                           | Default | Required | Description                                           |
-| ---------------------- | ---------------------------------------------- | ------- | -------- | ----------------------------------------------------- |
-| `children`             | `ReactNode`                                    | —       | ✕        | Children node                                         |
-| `closeOnBackdropClick` | `bool`                                         | `true`  | ✕        | Whether the modal will close when backdrop is clicked |
-| `id`                   | `string`                                       | —       | ✔        | ID to be linked in HeaderMobileActions                |
-| `isOpen`               | `bool`                                         | `false` | ✔        | Open state                                            |
-| `onClose`              | `(event: ClickEvent or KeyboardEvent) => void` | —       | ✔        | Callback for dialog when closed                       |
-| `UNSAFE_className`     | `string`                                       | —       | ✕        | HeaderDialog custom class name                        |
-| `UNSAFE_style`         | `CSSProperties`                                | —       | ✕        | HeaderDialog custom style                             |
+| Name                   | Type                                           | Default | Required | Description                                                  |
+| ---------------------- | ---------------------------------------------- | ------- | -------- | ------------------------------------------------------------ |
+| `children`             | `ReactNode`                                    | —       | ✕        | Children node                                                |
+| `closeOnBackdropClick` | `bool`                                         | `true`  | ✕        | Whether the HeaderDialog will close when backdrop is clicked |
+| `id`                   | `string`                                       | —       | ✔        | ID to be linked in HeaderMobileActions                       |
+| `isOpen`               | `bool`                                         | `false` | ✔        | Open state                                                   |
+| `onClose`              | `(event: ClickEvent or KeyboardEvent) => void` | —       | ✔        | Callback for dialog when closed                              |
+| `UNSAFE_className`     | `string`                                       | —       | ✕        | HeaderDialog custom class name                               |
+| `UNSAFE_style`         | `CSSProperties`                                | —       | ✕        | HeaderDialog custom style                                    |
 
 The component further inherits properties from the [`<dialog>`][mdn-dialog-element] element.
 
diff --git a/packages/web-react/src/components/Header/demo/HeaderInvertedWithActions.tsx b/packages/web-react/src/components/Header/demo/HeaderInvertedWithActions.tsx
index a331b92f07..5ec4aa8773 100644
--- a/packages/web-react/src/components/Header/demo/HeaderInvertedWithActions.tsx
+++ b/packages/web-react/src/components/Header/demo/HeaderInvertedWithActions.tsx
@@ -54,7 +54,7 @@ const HeaderInvertedWithActions = () => {
           <Button color="inverted">Enterprise</Button>
         </HeaderDesktopActions>
       </Header>
-      <HeaderDialog id="header_dialog_example" isOpen={isOpen} onClose={handleClose} closeOnBackdropClick>
+      <HeaderDialog id="header_dialog_example" isOpen={isOpen} onClose={handleClose}>
         <HeaderDialogCloseButton />
         <HeaderDialogActions color="primary" aria-label="Main navigation">
           <HeaderDialogNav>
diff --git a/packages/web-react/src/components/Header/demo/HeaderInvertedWithActionsAndDialog.tsx b/packages/web-react/src/components/Header/demo/HeaderInvertedWithActionsAndDialog.tsx
index fdc6d33c5f..fabe455e9e 100644
--- a/packages/web-react/src/components/Header/demo/HeaderInvertedWithActionsAndDialog.tsx
+++ b/packages/web-react/src/components/Header/demo/HeaderInvertedWithActionsAndDialog.tsx
@@ -73,13 +73,7 @@ const HeaderInvertedWithActionsAndDialog = () => {
           </Button>
         </HeaderDesktopActions>
       </Header>
-      <HeaderDialog
-        id="header_dialog_example_1"
-        aria-label="Menu"
-        isOpen={isMenuOpen}
-        onClose={handleMenuClose}
-        closeOnBackdropClick
-      >
+      <HeaderDialog id="header_dialog_example_1" aria-label="Menu" isOpen={isMenuOpen} onClose={handleMenuClose}>
         <HeaderDialogCloseButton />
         <HeaderDialogActions color="primary" aria-label="Main navigation">
           <HeaderDialogNav>
diff --git a/packages/web-react/src/components/Modal/Modal.tsx b/packages/web-react/src/components/Modal/Modal.tsx
index 37c45787f2..6827b7d6f5 100644
--- a/packages/web-react/src/components/Modal/Modal.tsx
+++ b/packages/web-react/src/components/Modal/Modal.tsx
@@ -7,7 +7,7 @@ import { ModalProvider } from './ModalContext';
 import Dialog from '../Dialog/Dialog';
 
 const Modal = (props: SpiritModalProps) => {
-  const { children, isOpen, onClose, closeOnBackdropClick = true, id, ...restProps } = props;
+  const { children, isOpen, onClose, id, ...restProps } = props;
   const { classProps } = useModalStyleProps();
   const { styleProps, props: otherProps } = useStyleProps(restProps);
 
@@ -27,7 +27,6 @@ const Modal = (props: SpiritModalProps) => {
         id={id}
         isOpen={isOpen}
         onClose={onClose}
-        closeOnBackdropClick={closeOnBackdropClick}
         className={classNames(classProps.root, styleProps.className)}
         aria-labelledby={`${id}__title`}
       >