[C-607] Fix modal scroll bar

packages/stems/src/components/Modal/Modal.tsx

@@ -152,9 +152,10 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(
   const id = useMemo(() => modalKey || uniqueId('modal-'), [modalKey])
   const titleId = `${id}-title` || ariaLabelledbyProp
   const subtitleId = `${id}-subtitle` || ariaDescribedbyProp
+  const [isDoneOpening, setIsDoneOpening] = useState(false)
   const modalContextValue = useMemo(() => {
-    return { titleId, subtitleId, onClose }
-  }, [titleId, subtitleId, onClose])
+    return { titleId, subtitleId, onClose, isDoneOpening }
+  }, [titleId, subtitleId, onClose, isDoneOpening])
 
   const onTouchMove = useCallback(
     (e: any) => {
@@ -193,13 +194,24 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(
 
   const transition = useTransition(isOpen, null, {
     from: { transform: 'scale(0)', opacity: 0 },
-    enter: { transform: 'scale(1)', opacity: 1 },
+    // @ts-ignore function is a valid value for enter, but the types don't acknowledge that
+    enter:
+      (item: boolean) =>
+      async (
+        next: (props: { transform: string; opacity: number }) => Promise<void>
+      ) => {
+        await next({ transform: 'scale(1)', opacity: 1 })
+        if (item) {
+          setImmediate(() => setIsDoneOpening(true))
+        }
+      },
     leave: { transform: 'scale(0)', opacity: 0 },
     unique: true,
     config: standard,
     onDestroyed: () => {
       if (!isOpen) {
         setIsDestroyed(false)
+        setIsDoneOpening(false)
         if (onClosed) {
           onClosed()
         }

packages/stems/src/components/Modal/ModalContent.tsx

@@ -1,8 +1,11 @@
+import { useContext } from 'react'
+
 import cn from 'classnames'
 
 import { Scrollbar } from 'components/Scrollbar'
 
 import styles from './ModalContent.module.css'
+import { ModalContext } from './ModalContext'
 import { ModalContentProps } from './types'
 
 /**
@@ -13,8 +16,10 @@ export const ModalContent = ({
   children,
   ...props
 }: ModalContentProps) => {
+  const { isDoneOpening } = useContext(ModalContext)
   return (
     <Scrollbar
+      isHidden={!isDoneOpening}
       className={cn(styles.modalContentContainer, className)}
       {...props}
     >

packages/stems/src/components/Modal/ModalContext.tsx

@@ -3,6 +3,7 @@ import { createContext } from 'react'
 interface ModalContextValue {
   titleId?: string
   subtitleId?: string
+  isDoneOpening?: boolean
   onClose?: () => void
 }
 

packages/stems/src/components/Scrollbar/Scrollbar.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useMemo } from 'react'
+import { useEffect, useRef, useMemo, forwardRef, Ref, useCallback } from 'react'
 
 import { ResizeObserver } from '@juggle/resize-observer'
 import cn from 'classnames'
@@ -15,64 +15,71 @@ import { ScrollbarProps } from './types'
  * `Scrollbar` uses react-perfect-scrollbar (https://www.npmjs.com/package/react-perfect-scrollbar)
  * under the hood. For advanced use cases, refer to the documentation.
  */
-export const Scrollbar = ({
-  children,
-  className,
-  id,
-  forward,
-  ...props
-}: ScrollbarProps) => {
-  // Do not remove:
-  // useMeasure ref is required for infinite scrolling to work
-  const [ref] = useMeasure({ polyfill: ResizeObserver })
-  const timerRef = useRef<NodeJS.Timeout | null>(null)
-  const elementId = useMemo(() => id || uniqueId('scrollbar-'), [id])
+export const Scrollbar = forwardRef(
+  (
+    { children, className, id, forward, isHidden, ...props }: ScrollbarProps,
+    forwardedRef: Ref<PerfectScrollbar>
+  ) => {
+    // Do not remove:
+    // useMeasure ref is required for infinite scrolling to work
+    const [ref] = useMeasure({ polyfill: ResizeObserver })
+    const timerRef = useRef<NodeJS.Timeout | null>(null)
+    const elementId = useMemo(() => id || uniqueId('scrollbar-'), [id])
 
-  useEffect(() => {
-    return () => {
+    useEffect(() => {
+      return () => {
+        if (timerRef.current !== null) {
+          clearTimeout(timerRef.current)
+        }
+      }
+    }, [])
+
+    const hideScrollbar = useCallback(() => {
+      const element = document.getElementById(elementId)
+      if (element) {
+        element.classList.remove('scrollbar--hovered-visible')
+      }
       if (timerRef.current !== null) {
         clearTimeout(timerRef.current)
       }
-    }
-  }, [])
-
-  const hideScrollbar = () => {
-    const element = document.getElementById(elementId)
-    if (element) {
-      element.classList.remove('scrollbar--hovered-visible')
-    }
-    if (timerRef.current !== null) {
-      clearTimeout(timerRef.current)
-    }
-  }
+    }, [elementId, timerRef])
 
-  const showScrollbar = () => {
-    const element = document.getElementById(elementId)
-    if (element) {
-      element.classList.add('scrollbar--hovered-visible')
-    }
-    if (timerRef.current !== null) {
-      clearTimeout(timerRef.current)
-    }
-    timerRef.current = setTimeout(() => {
+    const showScrollbar = useCallback(() => {
+      if (isHidden) return
       const element = document.getElementById(elementId)
       if (element) {
-        element.classList.remove('scrollbar--hovered-visible')
+        element.classList.add('scrollbar--hovered-visible')
       }
-    }, 1400)
-  }
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current)
+      }
+      timerRef.current = setTimeout(() => {
+        const element = document.getElementById(elementId)
+        if (element) {
+          element.classList.remove('scrollbar--hovered-visible')
+        }
+      }, 1400)
+    }, [elementId, timerRef, isHidden])
+
+    useEffect(() => {
+      if (isHidden) {
+        hideScrollbar()
+      }
+    }, [isHidden, hideScrollbar])
 
-  const content = forward ? children : <div ref={ref}>{children}</div>
+    const content = forward ? children : <div ref={ref}>{children}</div>
 
-  return (
-    <PerfectScrollbar
-      {...props}
-      id={elementId}
-      className={cn(styles.scrollbar, className)}
-      onMouseEnter={showScrollbar}
-      onMouseLeave={hideScrollbar}
-    >
-      {content}
-    </PerfectScrollbar>
-  )
-}
+    return (
+      <PerfectScrollbar
+        {...props}
+        ref={forwardedRef}
+        id={elementId}
+        className={cn(styles.scrollbar, className)}
+        onMouseEnter={showScrollbar}
+        onMouseLeave={hideScrollbar}
+      >
+        {content}
+      </PerfectScrollbar>
+    )
+  }
+)

packages/stems/src/components/Scrollbar/types.ts

@@ -2,4 +2,10 @@ import { ScrollBarProps as PerfectScrollbarProps } from 'react-perfect-scrollbar
 
 export type ScrollbarProps = PerfectScrollbarProps & {
   forward?: boolean
+  /**
+   * Whether or not to hide the scrollbars. Useful if you are rendering
+   * a scroll bar inside something that is changing sizes and you need
+   * to wait for the size to be stable before showing scrollbars.
+   */
+  isHidden?: boolean
 }