feat: allow locking/unlocking scroll when using hint overlays (#415)

* feat: allow locking/unlocking scroll when using hint overlays

* fix check on scroll

* make lock scroll more efficient

Author: christianmat

apps/smithy/src/stories/Tour/Tour.stories.tsx

@@ -20,6 +20,7 @@ export const Default = {
     variables: {
       firstName: "Euronymous Bosch",
     },
+    lockScroll: true,
   },
   decorators: [
     (_: StoryFn, options: StoryContext) => {

packages/react/src/components/Hint/index.tsx

@@ -20,6 +20,7 @@ export interface HintProps extends BoxProps {
   autoScroll?: ScrollIntoViewOptions | boolean
   children?: React.ReactNode
   defaultOpen?: boolean
+  lockScroll?: boolean
   modal?: boolean
   onMount?: () => void
   onOpenChange?: (open: boolean) => void
@@ -37,6 +38,7 @@ export function Hint({
   children,
   css = {},
   defaultOpen = true,
+  lockScroll = true,
   modal = false,
   onMount,
   onOpenChange = () => {},
@@ -120,8 +122,8 @@ export function Hint({
 
   return (
     <>
-      {spotlight && canonicalOpen && <Spotlight anchor={anchor} />}
-      {modal && !spotlight && canonicalOpen && <Overlay lockScroll />}
+      {spotlight && canonicalOpen && <Spotlight anchor={anchor} lockScroll={lockScroll} />}
+      {modal && !spotlight && canonicalOpen && <Overlay lockScroll={lockScroll} />}
 
       <Box
         css={{

packages/react/src/components/Overlay/index.tsx

@@ -4,11 +4,14 @@ import { keyframes } from '@emotion/react'
 import { Box, type BoxProps } from '@/components/Box'
 
 import { RemoveScroll } from 'react-remove-scroll'
+import { useEffect, useState } from 'react'
 
-export interface OverlayProps extends BoxProps {}
+export interface OverlayProps extends BoxProps {
+  lockScroll?: boolean
+}
 
 function OverlayWithRef(
-  { children, part, opacity = 0.5, ...props }: OverlayProps,
+  { children, lockScroll = true, part, opacity = 0.5, ...props }: OverlayProps,
   ref: React.ForwardedRef<HTMLDivElement>
 ) {
   const fadeIn = keyframes`
@@ -20,8 +23,31 @@ function OverlayWithRef(
     }
   `
 
+  const [hasScrolled, setHasScrolled] = useState(false)
+
+  useEffect(() => {
+    if (!lockScroll) {
+      const handleScroll = () => {
+        if (!hasScrolled) {
+          setHasScrolled(true)
+          window.removeEventListener('scroll', handleScroll)
+        }
+      }
+
+      window.addEventListener('scroll', handleScroll)
+
+      return () => {
+        window.removeEventListener('scroll', handleScroll)
+      }
+    }
+  }, [lockScroll, hasScrolled])
+
+  if (!lockScroll && hasScrolled) {
+    return <>{children}</>
+  }
+
   return (
-    <RemoveScroll forwardProps ref={ref}>
+    <RemoveScroll forwardProps ref={ref} enabled={lockScroll}>
       <Box
         animation={`${fadeIn} 300ms ease-out`}
         backgroundColor="black"

packages/react/src/components/Spotlight/index.tsx

@@ -55,9 +55,16 @@ function getComputedRadius(element: ReferenceElement) {
 
 export interface SpotlightProps extends OverlayProps {
   anchor: string
+  lockScroll?: boolean
 }
 
-export function Spotlight({ anchor, part, style = {}, ...props }: SpotlightProps) {
+export function Spotlight({
+  anchor,
+  lockScroll = true,
+  part,
+  style = {},
+  ...props
+}: SpotlightProps) {
   const [clipPathCoords, setClipPathCoords] = useState<ClipPathCoords>({
     maxX: 0,
     maxY: 0,
@@ -109,6 +116,7 @@ export function Spotlight({ anchor, part, style = {}, ...props }: SpotlightProps
 
   return (
     <Overlay
+      lockScroll={lockScroll}
       part={['spotlight', part]}
       ref={refs.setFloating}
       style={{

packages/react/src/components/Tour/Tour.tsx

@@ -27,6 +27,11 @@ export interface TourProps extends FlowPropsWithoutChildren, Omit<HintProps, 'an
    * Whether the tooltip should be open by default.
    */
   defaultOpen?: boolean
+  /**
+   * Whether to lock the scroll of the container when the Spotlight is enabled.
+   * Defaults to `true`.
+   */
+  lockScroll?: boolean
   /**
    * Whether to render a modal overlay behind the tooltip.
    */
@@ -82,6 +87,7 @@ export function Tour({ as, flowId, ...props }: TourProps) {
           autoScroll = false,
           container = 'body',
           defaultOpen,
+          lockScroll = true,
           modal,
           onOpenChange,
           open,
@@ -127,7 +133,12 @@ export function Tour({ as, flowId, ...props }: TourProps) {
               zIndex={zIndex}
               {...containerProps}
             >
-              <TourStep defaultOpen={defaultOpen ?? true} key={step.id} {...sequentialStepProps} />
+              <TourStep
+                defaultOpen={defaultOpen ?? true}
+                key={step.id}
+                lockScroll={lockScroll}
+                {...sequentialStepProps}
+              />
             </TourWrapper>
           )
         }
@@ -198,6 +209,7 @@ export function Tour({ as, flowId, ...props }: TourProps) {
                 }}
                 defaultOpen={(defaultOpen || shouldShowSpotlight) ?? false}
                 key={`${currentStep.id}-${shouldShowSpotlight}`}
+                lockScroll={lockScroll}
                 step={currentStep}
                 {...nonSequentialStepProps}
               />

packages/react/src/components/Tour/TourStep.tsx

@@ -34,6 +34,7 @@ export function TourStep({
   dismissible,
   flow,
   handleDismiss,
+  lockScroll,
   modal,
   onPrimary,
   onSecondary,
@@ -63,6 +64,7 @@ export function TourStep({
       autoScroll={autoScroll}
       data-step-id={step.id}
       defaultOpen={defaultOpen}
+      lockScroll={lockScroll}
       modal={modal}
       part={part}
       side={side}