From 346662f780dfa1211dda7e8b744b1353159c1e8e Mon Sep 17 00:00:00 2001
From: Eitan Elbaz <eitan.elbaz@uniledsolutions.com>
Date: Wed, 28 Jun 2023 15:52:50 +0100
Subject: [PATCH 1/3] no longer forcibly warpping an overriden close button
 with a button

---
 src/components/CloseButton.tsx |  3 ++-
 src/components/Modal.tsx       | 12 +++---------
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/components/CloseButton.tsx b/src/components/CloseButton.tsx
index de23cca..2b32502 100644
--- a/src/components/CloseButton.tsx
+++ b/src/components/CloseButton.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { CloseButtonProps } from '../types';
+import { Close } from '../components/Icons';
 
 const CloseButton: React.FC<CloseButtonProps> = ({ close, children }) => (
     <button
@@ -10,7 +11,7 @@ const CloseButton: React.FC<CloseButtonProps> = ({ close, children }) => (
         }}
         className="__react-grand-tour__close-button"
     >
-        {children}
+        <Close />
     </button>
 );
 
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index d9c3305..96206fe 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -30,7 +30,7 @@ const Modal = ({
     renderedContent: content,
     scrollToElement,
     arrow: Arrow,
-    closeButton: CloseButtonOverride,
+    closeButton: CloseButton,
     currentStepLabel: CurrentStepLabel,
     dialogWrapper: DialogWrapper,
     nextStepButton: NextStepButton,
@@ -95,14 +95,8 @@ const Modal = ({
         ),
         [allSteps, stepIndex, changeStep, StepButton, StepButtonWrapper],
     );
-    const closeButton = useMemo(
-        () => (
-            <CloseButton close={close}>
-                <CloseButtonOverride close={close} />
-            </CloseButton>
-        ),
-        [close, CloseButtonOverride],
-    );
+
+    const closeButton = useMemo(() => <CloseButton close={close} />, [close, CloseButton]);
 
     return (
         <FadeIn>

From fbe76e0500df7162c7ce26abfdf58dff6f8411ef Mon Sep 17 00:00:00 2001
From: Eitan Elbaz <eitan.elbaz@uniledsolutions.com>
Date: Wed, 28 Jun 2023 16:07:01 +0100
Subject: [PATCH 2/3] rearchitected the close button so it can be fully
 overriden. Now provide a positional wrapper you have to use if you want to
 position your own close button in the same place

---
 src/ReactGrandTour.tsx                        |  4 ++--
 src/components/CloseButton.tsx                | 24 ++++++++++---------
 .../CloseButtonPositionalWrapper.tsx          |  7 ++++++
 src/components/Modal.tsx                      |  6 ++++-
 src/styles.ts                                 |  8 ++++---
 src/types.ts                                  |  6 ++++-
 6 files changed, 37 insertions(+), 18 deletions(-)
 create mode 100644 src/components/CloseButtonPositionalWrapper.tsx

diff --git a/src/ReactGrandTour.tsx b/src/ReactGrandTour.tsx
index 940875f..f4785b8 100644
--- a/src/ReactGrandTour.tsx
+++ b/src/ReactGrandTour.tsx
@@ -10,8 +10,8 @@ import {
     StepButton,
     StepButtonWrapper,
     Step,
-    Close,
     EmptyClose,
+    CloseButton,
 } from './components';
 import ReactGrandTourContext from './Context';
 
@@ -35,7 +35,7 @@ const ReactGrandTour: React.FC<Props> = ({
     steps: defaultSteps = [],
     openAt = 0,
     scrollIntoViewOptions = { behavior: 'smooth', block: 'center' },
-    closeButton = Close,
+    closeButton = CloseButton,
     currentStepLabel = CurrentStepLabel,
     nextStepButton = NextStepButton,
     previousStepButton = PreviousStepButton,
diff --git a/src/components/CloseButton.tsx b/src/components/CloseButton.tsx
index 2b32502..5e4ce8c 100644
--- a/src/components/CloseButton.tsx
+++ b/src/components/CloseButton.tsx
@@ -2,17 +2,19 @@ import React from 'react';
 import { CloseButtonProps } from '../types';
 import { Close } from '../components/Icons';
 
-const CloseButton: React.FC<CloseButtonProps> = ({ close, children }) => (
-    <button
-        type="button"
-        onClick={event => {
-            event.stopPropagation();
-            close('close-btn');
-        }}
-        className="__react-grand-tour__close-button"
-    >
-        <Close />
-    </button>
+const CloseButton: React.FC<CloseButtonProps> = ({ close, PositionalWrapper }) => (
+    <PositionalWrapper>
+        <button
+            type="button"
+            onClick={event => {
+                event.stopPropagation();
+                close('close-btn');
+            }}
+            className="__react-grand-tour__close-button"
+        >
+            <Close />
+        </button>
+    </PositionalWrapper>
 );
 
 export default CloseButton;
diff --git a/src/components/CloseButtonPositionalWrapper.tsx b/src/components/CloseButtonPositionalWrapper.tsx
new file mode 100644
index 0000000..dba1b9d
--- /dev/null
+++ b/src/components/CloseButtonPositionalWrapper.tsx
@@ -0,0 +1,7 @@
+import React, { PropsWithChildren } from 'react';
+
+const CloseButtonPositionalWrapper: React.FC<PropsWithChildren<any>> = ({ children }) => (
+    <div className="__react-grand-tour__close-button-position">{children}</div>
+);
+
+export default CloseButtonPositionalWrapper;
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 96206fe..083e5b1 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -8,6 +8,7 @@ import {
 } from '../types';
 import CloseButton from './CloseButton';
 import { isSafari } from '../lib';
+import CloseButtonPositionalWrapper from './CloseButtonPositionalWrapper';
 
 export type ModalProps = Partial<ComponentOverrides> &
     ComponentVisibility & {
@@ -96,7 +97,10 @@ const Modal = ({
         [allSteps, stepIndex, changeStep, StepButton, StepButtonWrapper],
     );
 
-    const closeButton = useMemo(() => <CloseButton close={close} />, [close, CloseButton]);
+    const closeButton = useMemo(
+        () => <CloseButton close={close} PositionalWrapper={CloseButtonPositionalWrapper} />,
+        [close, CloseButton],
+    );
 
     return (
         <FadeIn>
diff --git a/src/styles.ts b/src/styles.ts
index b6ce7f7..8cc544e 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -111,14 +111,16 @@ const styles = ({
                 'flex-wrap': 'wrap',
                 'align-items': 'center',
             },
+            'close-button-position': {
+                position: 'absolute',
+                top: '12px',
+                right: '15px',
+            },
             'close-button': {
                 'background-color': 'transparent',
                 border: 'none',
                 color: closeButtonColor,
                 cursor: 'pointer',
-                position: 'absolute',
-                top: '12px',
-                right: '15px',
                 ':hover': {
                     color: closeButtonHoverColor,
                 },
diff --git a/src/types.ts b/src/types.ts
index 6be0c6c..7d8bbbb 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -183,7 +183,11 @@ export type ModalPosition = {
 
 export type ArrowDirection = 'up' | 'left' | 'down' | 'right' | null;
 
-export type CloseButtonProps = { close: ReactGrandTourProps['onClose'] };
+export type CloseButtonProps = {
+    close: ReactGrandTourProps['onClose'];
+    PositionalWrapper: React.FC<PropsWithChildren<any>>;
+};
+
 export type CurrentStepLabelProps = { currentStep: number; totalSteps: number };
 export type NextStepButtonProps = {
     currentStep: number;

From a9a51c95d28f042e62873678766a1b2a071212a8 Mon Sep 17 00:00:00 2001
From: Eitan Elbaz <eitan.elbaz@uniledsolutions.com>
Date: Wed, 28 Jun 2023 16:07:47 +0100
Subject: [PATCH 3/3] updated example

---
 playground/src/pages/CustomExample.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/playground/src/pages/CustomExample.tsx b/playground/src/pages/CustomExample.tsx
index aaec033..9949d84 100644
--- a/playground/src/pages/CustomExample.tsx
+++ b/playground/src/pages/CustomExample.tsx
@@ -30,8 +30,10 @@ const Prev: React.FC<PreviousStepButtonProps> = ({ goBack }) => (
     </Button>
 );
 
-const Close: React.FC<CloseButtonProps> = () => (
-    <Box height={20} width={20} borderRadius="50%" bgcolor="red" />
+const Close: React.FC<CloseButtonProps> = ({ close, PositionalWrapper }) => (
+    <PositionalWrapper>
+        <Box height={20} width={20} borderRadius="50%" bgcolor="red" onClick={() => close()} />
+    </PositionalWrapper>
 );
 
 const ContentOverride: React.FC = ({ children }) => (