Merge branch 'release/0.12.0'

package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-grand-tour",
-    "version": "0.11.2",
+    "version": "0.12.0",
     "description": "",
     "main": "./dist/main.cjs.js",
     "module": "./dist/main.es.js",

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 }) => (

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,

src/components/CloseButton.tsx

@@ -1,17 +1,20 @@
 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"
-    >
-        {children}
-    </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;

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;

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 & {
@@ -30,7 +31,7 @@ const Modal = ({
     renderedContent: content,
     scrollToElement,
     arrow: Arrow,
-    closeButton: CloseButtonOverride,
+    closeButton: CloseButton,
     currentStepLabel: CurrentStepLabel,
     dialogWrapper: DialogWrapper,
     nextStepButton: NextStepButton,
@@ -95,13 +96,10 @@ const Modal = ({
         ),
         [allSteps, stepIndex, changeStep, StepButton, StepButtonWrapper],
     );
+
     const closeButton = useMemo(
-        () => (
-            <CloseButton close={close}>
-                <CloseButtonOverride close={close} />
-            </CloseButton>
-        ),
-        [close, CloseButtonOverride],
+        () => <CloseButton close={close} PositionalWrapper={CloseButtonPositionalWrapper} />,
+        [close, CloseButton],
     );
 
     return (

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,
                 },

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;