From 8fc34dff633db6e0ca1aa4db05403030404b63b7 Mon Sep 17 00:00:00 2001
From: Gil Barbara <gilbarbara@gmail.com>
Date: Tue, 21 May 2024 11:25:27 -0300
Subject: [PATCH] Hide the Beacon for centered steps or disableBeacon

- remove unnecessary null checks
- fix Overlay typo
---
 src/components/Overlay.tsx | 4 ++--
 src/styles.ts              | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/Overlay.tsx b/src/components/Overlay.tsx
index e86d2dab..ee04ad1c 100644
--- a/src/components/Overlay.tsx
+++ b/src/components/Overlay.tsx
@@ -224,9 +224,9 @@ export default class JoyrideOverlay extends React.Component<OverlayProps, State>
 
     // Hack for Safari bug with mix-blend-mode with z-index
     if (getBrowser() === 'safari') {
-      const { mixBlendMode, zIndex, ...safarOverlay } = overlayStyles;
+      const { mixBlendMode, zIndex, ...safariOverlay } = overlayStyles;
 
-      spotlight = <div style={{ ...safarOverlay }}>{spotlight}</div>;
+      spotlight = <div style={{ ...safariOverlay }}>{spotlight}</div>;
       delete overlayStyles.backgroundColor;
     }
 
diff --git a/src/styles.ts b/src/styles.ts
index 496ab5a8..f3aa2f7b 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -34,9 +34,10 @@ const spotlight = {
 
 export default function getStyles(props: Props, step: StepMerged) {
   const { floaterProps, styles } = props;
-  const mergedFloaterProps = deepmerge(step?.floaterProps ?? {}, floaterProps ?? {});
-  const mergedStyles = deepmerge(styles ?? {}, step?.styles ?? {});
+  const mergedFloaterProps = deepmerge(step.floaterProps ?? {}, floaterProps ?? {});
+  const mergedStyles = deepmerge(styles ?? {}, step.styles ?? {});
   const options = deepmerge(defaultOptions, mergedStyles.options || {}) satisfies StylesOptions;
+  const hideBeacon = step.placement === 'center' || step.disableBeacon;
   let { width } = options;
 
   if (window.innerWidth > 480) {
@@ -63,7 +64,7 @@ export default function getStyles(props: Props, step: StepMerged) {
   const defaultStyles = {
     beacon: {
       ...buttonBase,
-      display: 'inline-block',
+      display: hideBeacon ? 'none' : 'inline-block',
       height: options.beaconSize,
       position: 'relative',
       width: options.beaconSize,