react-modal-sheet 1.11.1 → 2.0.0

package/dist/react-modal-sheet.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"react-modal-sheet.cjs.production.min.js","sources":["../src/constants.ts","../src/utils.ts","../src/hooks.tsx","../src/context.tsx","../src/use-prevent-scroll.ts","../src/styles.ts","../src/sheet.tsx","../src/SheetContainer.tsx","../src/SheetContent.tsx","../src/SheetHeader.tsx","../src/SheetBackdrop.tsx","../src/index.tsx"],"sourcesContent":["export const MAX_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';\n\nexport const IS_SSR = typeof window === 'undefined';\n\nexport const DEFAULT_SPRING_CONFIG = {\n  stiffness: 300,\n  damping: 30,\n  mass: 0.2,\n};\n\nexport const DRAG_CLOSE_THRESHOLD = 0.6;\n\nexport const DRAG_VELOCITY_THRESHOLD = 500;\n","import * as React from 'react';\n\nexport function getClosest(nums: number[], goal: number) {\n  let closest = nums[0];\n  let minDifference = Math.abs(nums[0] - goal);\n\n  for (let i = 1; i < nums.length; i++) {\n    const difference = Math.abs(nums[i] - goal);\n    if (difference < minDifference) {\n      closest = nums[i];\n      minDifference = difference;\n    }\n  }\n\n  return closest;\n}\n\nconst highlightId = 'react-modal-sheet-highlight';\n\nexport function applyRootStyles(rootId: string) {\n  const body = document.querySelector('body') as HTMLBodyElement;\n  const root = document.querySelector(`#${rootId}`) as HTMLDivElement;\n\n  if (root) {\n    const p = 24;\n    const h = window.innerHeight;\n    const s = (h - p) / h;\n    body.style.backgroundColor = '#000';\n    root.style.overflow = 'hidden';\n    root.style.willChange = 'transform';\n    root.style.transition = 'transform 200ms linear';\n    root.style.transform = `translateY(calc(env(safe-area-inset-top) + ${p / 2}px)) scale(${s})`; // prettier-ignore\n    root.style.borderTopRightRadius = '10px';\n    root.style.borderTopLeftRadius = '10px';\n\n    // Add highlighed overlay to emphasize the modality effect\n    const highlight = document.createElement('div');\n    highlight.setAttribute('aria-hidden', 'true');\n    highlight.id = highlightId;\n    highlight.style.position = 'absolute';\n    highlight.style.top = '0px';\n    highlight.style.left = '0px';\n    highlight.style.bottom = '0px';\n    highlight.style.right = '0px';\n    highlight.style.opacity = '0';\n    highlight.style.transition = 'opacity 200ms linear';\n    highlight.style.backgroundColor = 'rgba(150, 150, 150, 0.1)';\n\n    root.appendChild(highlight);\n    requestAnimationFrame(() => (highlight.style.opacity = '1'));\n  }\n}\n\nexport function cleanupRootStyles(rootId: string) {\n  const body = document.querySelector('body') as HTMLBodyElement;\n  const root = document.getElementById(rootId) as HTMLDivElement;\n  const highlight = document.getElementById(highlightId) as HTMLDivElement;\n\n  function onTransitionEnd() {\n    root.style.removeProperty('overflow');\n    root.style.removeProperty('will-change');\n    root.style.removeProperty('transition');\n    body.style.removeProperty('background-color');\n    root.removeEventListener('transitionend', onTransitionEnd);\n    highlight.parentNode?.removeChild(highlight);\n  }\n\n  if (root && highlight) {\n    // Start animating back\n    root.style.removeProperty('border-top-right-radius');\n    root.style.removeProperty('border-top-left-radius');\n    root.style.removeProperty('transform');\n    highlight.style.opacity = '0';\n\n    // Remove temp properties after animation is finished\n    root.addEventListener('transitionend', onTransitionEnd);\n  }\n}\n\nexport function inDescendingOrder(arr: number[]) {\n  for (let i = 0; i < arr.length; i++) {\n    if (arr[i + 1] > arr[i]) return false;\n  }\n\n  return true;\n}\n\nexport function validateSnapTo({\n  snapTo,\n  sheetHeight,\n}: {\n  snapTo: number;\n  sheetHeight: number;\n}) {\n  if (snapTo < 0) {\n    console.warn(\n      `Snap point is out of bounds. Sheet height is ${sheetHeight} but snap point is ${sheetHeight +\n        Math.abs(snapTo)}.`\n    );\n  }\n\n  return Math.max(Math.round(snapTo), 0);\n}\n\nexport function mergeRefs<T = any>(\n  refs: React.ForwardedRef<T>[]\n): React.RefCallback<T> {\n  return (value: any) => {\n    refs.forEach((ref: any) => {\n      if (typeof ref === 'function') {\n        ref(value);\n      } else if (ref) {\n        ref.current = value;\n      }\n    });\n  };\n}\n","import * as React from 'react';\n\nimport { IS_SSR } from './constants';\nimport { SheetEvents } from './types';\nimport { applyRootStyles, cleanupRootStyles } from './utils';\n\nexport const useIsomorphicLayoutEffect = IS_SSR\n  ? React.useEffect\n  : React.useLayoutEffect;\n\nexport const useModalEffect = (isOpen: boolean, rootId?: string) => {\n  const prevOpen = usePrevious(isOpen);\n\n  // Automatically apply the iOS modal effect to the body when sheet opens/closes\n  React.useEffect(() => {\n    if (rootId && !prevOpen && isOpen) {\n      applyRootStyles(rootId);\n    } else if (rootId && !isOpen && prevOpen) {\n      cleanupRootStyles(rootId);\n    }\n  }, [isOpen, prevOpen]); // eslint-disable-line\n\n  // Make sure to cleanup modal styles on unmount\n  React.useEffect(() => {\n    return () => {\n      if (rootId && isOpen) cleanupRootStyles(rootId);\n    };\n  }, [isOpen]); // eslint-disable-line\n};\n\nexport const useEventCallbacks = (\n  isOpen: boolean,\n  callbacks: React.MutableRefObject<SheetEvents>\n) => {\n  const prevOpen = usePrevious(isOpen);\n  const didOpen = React.useRef(false);\n\n  // Because of AnimatePrecence we don't have access to latest isOpen value\n  // so we need to read and write to a ref to determine if we are\n  // opening or closing the sheet\n  const handleAnimationComplete = React.useCallback(() => {\n    if (!didOpen.current) {\n      callbacks.current.onOpenEnd?.();\n      didOpen.current = true;\n    } else {\n      callbacks.current.onCloseEnd?.();\n      didOpen.current = false;\n    }\n  }, [isOpen, prevOpen]); // eslint-disable-line\n\n  React.useEffect(() => {\n    if (!prevOpen && isOpen) {\n      callbacks.current.onOpenStart?.();\n    } else if (!isOpen && prevOpen) {\n      callbacks.current.onCloseStart?.();\n    }\n  }, [isOpen, prevOpen]); // eslint-disable-line\n\n  return { handleAnimationComplete };\n};\n\nexport function useWindowHeight() {\n  const [windowHeight, setWindowHeight] = React.useState(0);\n\n  useIsomorphicLayoutEffect(() => {\n    const updateHeight = () => setWindowHeight(window.innerHeight);\n    window.addEventListener('resize', updateHeight);\n    updateHeight();\n    return () => window.removeEventListener('resize', updateHeight);\n  }, []);\n\n  return windowHeight;\n}\n\nexport function usePrevious<T>(state: T): T | undefined {\n  const ref = React.useRef<T>();\n\n  React.useEffect(() => {\n    ref.current = state;\n  });\n\n  return ref.current;\n}\n\n// Userland version of the `useEvent` React hook:\n// RFC: https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md\nexport function useEvent<T extends (...args: any[]) => any>(handler: T) {\n  const handlerRef = React.useRef<T>();\n\n  useIsomorphicLayoutEffect(() => {\n    handlerRef.current = handler;\n  });\n\n  return React.useCallback((...args: any[]) => {\n    const fn = handlerRef.current;\n    return fn?.(...args);\n  }, []) as T;\n}\n","import * as React from 'react';\nimport { SheetContextType } from './types';\n\nexport const SheetContext = React.createContext<SheetContextType | undefined>(\n  undefined\n);\n\nexport const useSheetContext = () => {\n  const context = React.useContext(SheetContext);\n  if (!context) throw Error('Sheet context error');\n  return context;\n};\n","// Source: https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/overlays/src/usePreventScroll.ts\nimport {\n  chain,\n  getScrollParent,\n  isIOS,\n  useLayoutEffect,\n} from '@react-aria/utils';\n\ninterface PreventScrollOptions {\n  /** Whether the scroll lock is disabled. */\n  isDisabled?: boolean;\n}\n\n// @ts-ignore\nconst visualViewport = typeof window !== 'undefined' && window.visualViewport;\n\n// HTML input types that do not cause the software keyboard to appear.\nconst nonTextInputTypes = new Set([\n  'checkbox',\n  'radio',\n  'range',\n  'color',\n  'file',\n  'image',\n  'button',\n  'submit',\n  'reset',\n]);\n\n// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position\nlet preventScrollCount = 0;\nlet restore: any;\n\n/**\n * Prevents scrolling on the document body on mount, and\n * restores it on unmount. Also ensures that content does not\n * shift due to the scrollbars disappearing.\n */\nexport function usePreventScroll(options: PreventScrollOptions = {}) {\n  let { isDisabled } = options;\n\n  useLayoutEffect(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    preventScrollCount++;\n    if (preventScrollCount === 1) {\n      if (isIOS()) {\n        restore = preventScrollMobileSafari();\n      } else {\n        restore = preventScrollStandard();\n      }\n    }\n\n    return () => {\n      preventScrollCount--;\n      if (preventScrollCount === 0) {\n        restore();\n      }\n    };\n  }, [isDisabled]);\n}\n\n// For most browsers, all we need to do is set `overflow: hidden` on the root element, and\n// add some padding to prevent the page from shifting when the scrollbar is hidden.\nfunction preventScrollStandard() {\n  return chain(\n    setStyle(\n      document.documentElement,\n      'paddingRight',\n      `${window.innerWidth - document.documentElement.clientWidth}px`\n    ),\n    setStyle(document.documentElement, 'overflow', 'hidden')\n  );\n}\n\n// Mobile Safari is a whole different beast. Even with overflow: hidden,\n// it still scrolls the page in many situations:\n//\n// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.\n// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of\n//    it, so it becomes scrollable.\n// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.\n//    This may cause even fixed position elements to scroll off the screen.\n// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always\n//    scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.\n//\n// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:\n//\n// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling\n//    on the window.\n// 2. Prevent default on `touchmove` events inside a scrollable element when the scroll position is at the\n//    top or bottom. This avoids the whole page scrolling instead, but does prevent overscrolling.\n// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.\n// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top\n//    of the page, which prevents it from scrolling the page. After the input is focused, scroll the element\n//    into view ourselves, without scrolling the whole page.\n// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the\n//    same visually, but makes the actual scroll position always zero. This is required to make all of the\n//    above work or Safari will still try to scroll the page when focusing an input.\n// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting\n//    to navigate to an input with the next/previous buttons that's outside a modal.\nfunction preventScrollMobileSafari() {\n  let scrollable: Element;\n  let lastY = 0;\n  let onTouchStart = (e: TouchEvent) => {\n    // Store the nearest scrollable parent element from the element that the user touched.\n    scrollable = getScrollParent(e.target as Element);\n    if (\n      scrollable === document.documentElement &&\n      scrollable === document.body\n    ) {\n      return;\n    }\n\n    lastY = e.changedTouches[0].pageY;\n  };\n\n  let onTouchMove = (e: TouchEvent) => {\n    // Prevent scrolling the window.\n    if (\n      scrollable === document.documentElement ||\n      scrollable === document.body\n    ) {\n      e.preventDefault();\n      return;\n    }\n\n    // Prevent scrolling up when at the top and scrolling down when at the bottom\n    // of a nested scrollable area, otherwise mobile Safari will start scrolling\n    // the window instead. Unfortunately, this disables bounce scrolling when at\n    // the top but it's the best we can do.\n    let y = e.changedTouches[0].pageY;\n    let scrollTop = scrollable.scrollTop;\n    let bottom = scrollable.scrollHeight - scrollable.clientHeight;\n\n    // Fix for: https://github.com/adobe/react-spectrum/pull/3780/files\n    if (bottom === 0) {\n      return;\n    }\n\n    if ((scrollTop <= 0 && y > lastY) || (scrollTop >= bottom && y < lastY)) {\n      e.preventDefault();\n    }\n\n    lastY = y;\n  };\n\n  let onTouchEnd = (e: TouchEvent) => {\n    let target = e.target as HTMLElement;\n\n    // Apply this change if we're not already focused on the target element\n    if (willOpenKeyboard(target) && target !== document.activeElement) {\n      e.preventDefault();\n\n      // Apply a transform to trick Safari into thinking the input is at the top of the page\n      // so it doesn't try to scroll it into view. When tapping on an input, this needs to\n      // be done before the \"focus\" event, so we have to focus the element ourselves.\n      target.style.transform = 'translateY(-2000px)';\n      target.focus();\n      requestAnimationFrame(() => {\n        target.style.transform = '';\n      });\n    }\n  };\n\n  let onFocus = (e: FocusEvent) => {\n    let target = e.target as HTMLElement;\n    if (willOpenKeyboard(target)) {\n      // Transform also needs to be applied in the focus event in cases where focus moves\n      // other than tapping on an input directly, e.g. the next/previous buttons in the\n      // software keyboard. In these cases, it seems applying the transform in the focus event\n      // is good enough, whereas when tapping an input, it must be done before the focus event. 🤷‍♂️\n      target.style.transform = 'translateY(-2000px)';\n      requestAnimationFrame(() => {\n        target.style.transform = '';\n\n        // This will have prevented the browser from scrolling the focused element into view,\n        // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.\n        if (visualViewport) {\n          if (visualViewport.height < window.innerHeight) {\n            // If the keyboard is already visible, do this after one additional frame\n            // to wait for the transform to be removed.\n            requestAnimationFrame(() => {\n              scrollIntoView(target);\n            });\n          } else {\n            // Otherwise, wait for the visual viewport to resize before scrolling so we can\n            // measure the correct position to scroll to.\n            visualViewport.addEventListener(\n              'resize',\n              () => scrollIntoView(target),\n              { once: true }\n            );\n          }\n        }\n      });\n    }\n  };\n\n  let onWindowScroll = () => {\n    // Last resort. If the window scrolled, scroll it back to the top.\n    // It should always be at the top because the body will have a negative margin (see below).\n    window.scrollTo(0, 0);\n  };\n\n  // Record the original scroll position so we can restore it.\n  // Then apply a negative margin to the body to offset it by the scroll position. This will\n  // enable us to scroll the window to the top, which is required for the rest of this to work.\n  let scrollX = window.pageXOffset;\n  let scrollY = window.pageYOffset;\n\n  let restoreStyles = chain(\n    setStyle(\n      document.documentElement,\n      'paddingRight',\n      `${window.innerWidth - document.documentElement.clientWidth}px`\n    ),\n    setStyle(document.documentElement, 'overflow', 'hidden'),\n    setStyle(document.body, 'marginTop', `-${scrollY}px`)\n  );\n\n  // Scroll to the top. The negative margin on the body will make this appear the same.\n  window.scrollTo(0, 0);\n\n  let removeEvents = chain(\n    addEvent(document, 'touchstart', onTouchStart, {\n      passive: false,\n      capture: true,\n    }),\n    addEvent(document, 'touchmove', onTouchMove, {\n      passive: false,\n      capture: true,\n    }),\n    addEvent(document, 'touchend', onTouchEnd, {\n      passive: false,\n      capture: true,\n    }),\n    addEvent(document, 'focus', onFocus, true),\n    addEvent(window, 'scroll', onWindowScroll)\n  );\n\n  return () => {\n    // Restore styles and scroll the page back to where it was.\n    restoreStyles();\n    removeEvents();\n    window.scrollTo(scrollX, scrollY);\n  };\n}\n\n// Sets a CSS property on an element, and returns a function to revert it to the previous value.\nfunction setStyle(element: any, style: string, value: string) {\n  let cur = element.style[style];\n  element.style[style] = value;\n\n  return () => {\n    element.style[style] = cur;\n  };\n}\n\n// Adds an event listener to an element, and returns a function to remove it.\nfunction addEvent<K extends keyof GlobalEventHandlersEventMap>(\n  target: EventTarget,\n  event: K,\n  handler: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any,\n  options?: boolean | AddEventListenerOptions\n) {\n  target.addEventListener(event, handler as any, options);\n  return () => {\n    target.removeEventListener(event, handler as any, options);\n  };\n}\n\nfunction scrollIntoView(target: Element) {\n  let root = document.scrollingElement || document.documentElement;\n  while (target && target !== root) {\n    // Find the parent scrollable element and adjust the scroll position if the target is not already in view.\n    let scrollable = getScrollParent(target);\n    if (\n      scrollable !== document.documentElement &&\n      scrollable !== document.body &&\n      scrollable !== target\n    ) {\n      let scrollableTop = scrollable.getBoundingClientRect().top;\n      let targetTop = target.getBoundingClientRect().top;\n      if (targetTop > scrollableTop + target.clientHeight) {\n        scrollable.scrollTop += targetTop - scrollableTop;\n      }\n    }\n\n    target = scrollable.parentElement as any;\n  }\n}\n\nfunction willOpenKeyboard(target: Element) {\n  return (\n    (target instanceof HTMLInputElement &&\n      !nonTextInputTypes.has(target.type)) ||\n    target instanceof HTMLTextAreaElement ||\n    (target instanceof HTMLElement && target.isContentEditable)\n  );\n}\n","import * as CSS from 'csstype';\n\nconst styles: { [key: string]: CSS.Properties } = {\n  wrapper: {\n    position: 'fixed',\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n    overflow: 'hidden',\n    pointerEvents: 'none',\n  },\n  backdrop: {\n    zIndex: 1,\n    position: 'fixed',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n    backgroundColor: 'rgba(51, 51, 51, 0.5)',\n    touchAction: 'none', // Disable iOS body scrolling\n    border: 'none',\n  },\n  container: {\n    zIndex: 2,\n    position: 'absolute',\n    left: 0,\n    bottom: 0,\n    width: '100%',\n    backgroundColor: '#fff',\n    borderTopRightRadius: '8px',\n    borderTopLeftRadius: '8px',\n    boxShadow: '0px -2px 16px rgba(0, 0, 0, 0.3)',\n    display: 'flex',\n    flexDirection: 'column',\n    pointerEvents: 'auto',\n  },\n  headerWrapper: {\n    width: '100%',\n  },\n  header: {\n    height: '40px',\n    width: '100%',\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  indicator: {\n    width: '18px',\n    height: '4px',\n    borderRadius: '99px',\n    backgroundColor: '#ddd',\n  },\n  content: {\n    flex: 1,\n    overflow: 'auto',\n    position: 'relative',\n  },\n};\n\nexport default styles;\n","import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport {\n  animate,\n  AnimatePresence,\n  motion,\n  PanInfo,\n  Transition,\n  useMotionValue,\n  useReducedMotion,\n  useTransform,\n} from 'framer-motion';\n\nimport {\n  useModalEffect,\n  useWindowHeight,\n  useIsomorphicLayoutEffect,\n  useEvent,\n} from './hooks';\n\nimport {\n  DEFAULT_SPRING_CONFIG,\n  DRAG_CLOSE_THRESHOLD,\n  DRAG_VELOCITY_THRESHOLD,\n  IS_SSR,\n} from './constants';\n\nimport { SheetContextType, SheetProps } from './types';\nimport { SheetContext } from './context';\nimport { getClosest, inDescendingOrder, validateSnapTo } from './utils';\nimport { usePreventScroll } from './use-prevent-scroll';\nimport styles from './styles';\n\nconst Sheet = React.forwardRef<any, SheetProps>(\n  (\n    {\n      onOpenStart,\n      onOpenEnd,\n      onClose,\n      onCloseStart,\n      onCloseEnd,\n      onSnap,\n      children,\n      isOpen,\n      snapPoints,\n      rootId,\n      mountPoint,\n      style,\n      detent = 'full-height',\n      initialSnap = 0,\n      springConfig = DEFAULT_SPRING_CONFIG,\n      disableDrag = false,\n      prefersReducedMotion = false,\n      ...rest\n    },\n    ref\n  ) => {\n    const sheetRef = React.useRef<any>(null);\n    const indicatorRotation = useMotionValue(0);\n    const windowHeight = useWindowHeight();\n    const shouldReduceMotion = useReducedMotion();\n    const reduceMotion = Boolean(prefersReducedMotion || shouldReduceMotion);\n    const animationOptions: Transition = reduceMotion\n      ? { type: 'tween', duration: 0.01 }\n      : { type: 'spring', ...springConfig };\n\n    // NOTE: the inital value for `y` doesn't matter since it is overwritten by\n    // the value driven by the `AnimatePresence` component when the sheet is opened\n    // and after that it is driven by the gestures and/or snapping\n    const y = useMotionValue(0);\n\n    const zIndex = useTransform(y, value =>\n      value >= windowHeight ? -1 : 9999999\n    );\n\n    const visibility = useTransform(y, value =>\n      value >= windowHeight ? 'hidden' : 'visible'\n    );\n\n    // Keep the callback fns up-to-date so that they can be accessed inside\n    // the effect without including them to the dependencies array\n    const callbacks = React.useRef({\n      onOpenStart,\n      onOpenEnd,\n      onCloseStart,\n      onCloseEnd,\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      callbacks.current = {\n        onOpenStart,\n        onOpenEnd,\n        onCloseStart,\n        onCloseEnd,\n      };\n    });\n\n    if (snapPoints) {\n      // Convert negative / percentage snap points to absolute values\n      snapPoints = snapPoints.map(point => {\n        // Percentage values e.g. between 0.0 and 1.0\n        if (point > 0 && point <= 1) return Math.round(point * windowHeight);\n        return point < 0 ? windowHeight + point : point; // negative values\n      });\n\n      console.assert(\n        inDescendingOrder(snapPoints) || windowHeight === 0,\n        `Snap points need to be in descending order got: [${snapPoints}]`\n      );\n    }\n\n    const onDrag = useEvent((_, { delta }: PanInfo) => {\n      // Update drag indicator rotation based on drag velocity\n      const velocity = y.getVelocity();\n\n      if (velocity > 0) indicatorRotation.set(10);\n      if (velocity < 0) indicatorRotation.set(-10);\n\n      // Make sure user cannot drag beyond the top of the sheet\n      y.set(Math.max(y.get() + delta.y, 0));\n    });\n\n    const onDragEnd = useEvent((_, { velocity }: PanInfo) => {\n      if (velocity.y > DRAG_VELOCITY_THRESHOLD) {\n        // User flicked the sheet down\n        onClose();\n      } else {\n        const sheetEl = sheetRef.current as HTMLDivElement;\n        const sheetHeight = sheetEl.getBoundingClientRect().height;\n        const currentY = y.get();\n\n        let snapTo = 0;\n\n        if (snapPoints) {\n          const snapToValues = snapPoints.map(\n            p => sheetHeight - Math.min(p, sheetHeight)\n          );\n\n          // Allow snapping to the top of the sheet if detent is set to `content-height`\n          if (detent === 'content-height' && !snapToValues.includes(0)) {\n            snapToValues.unshift(0);\n          }\n\n          // Get the closest snap point\n          snapTo = getClosest(snapToValues, currentY);\n        } else if (currentY / sheetHeight > DRAG_CLOSE_THRESHOLD) {\n          // Close if dragged over enough far\n          snapTo = sheetHeight;\n        }\n\n        snapTo = validateSnapTo({ snapTo, sheetHeight });\n\n        // Update the spring value so that the sheet is animated to the snap point\n        animate(y, snapTo, animationOptions);\n\n        if (snapPoints && onSnap) {\n          const snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));\n          const snapIndex = snapPoints.indexOf(getClosest(snapPoints, snapValue)); // prettier-ignore\n          onSnap(snapIndex);\n        }\n\n        const roundedSheetHeight = Math.round(sheetHeight);\n        const shouldClose = snapTo >= roundedSheetHeight;\n\n        if (shouldClose) onClose();\n      }\n\n      // Reset indicator rotation after dragging\n      indicatorRotation.set(0);\n    });\n\n    // Trigger onSnap callback when sheet is opened or closed\n    React.useEffect(() => {\n      if (!snapPoints || !onSnap) return;\n      const snapIndex = isOpen ? initialSnap : snapPoints.length - 1;\n      onSnap(snapIndex);\n    }, [isOpen]); // eslint-disable-line\n\n    React.useImperativeHandle(ref, () => ({\n      y,\n      snapTo: (snapIndex: number) => {\n        const sheetEl = sheetRef.current as HTMLDivElement | null;\n\n        if (\n          snapPoints &&\n          snapPoints[snapIndex] !== undefined &&\n          sheetEl !== null\n        ) {\n          const sheetHeight = sheetEl.getBoundingClientRect().height;\n          const snapPoint = snapPoints[snapIndex];\n          const snapTo = validateSnapTo({\n            snapTo: sheetHeight - snapPoint,\n            sheetHeight,\n          });\n\n          animate(y, snapTo, animationOptions);\n          if (onSnap) onSnap(snapIndex);\n          if (snapTo >= sheetHeight) onClose();\n        }\n      },\n    }));\n\n    useModalEffect(isOpen, rootId);\n\n    // Framer Motion should handle body scroll locking but it's not working\n    // properly on iOS. Scroll locking from React Aria seems to work much better.\n    usePreventScroll({ isDisabled: !isOpen });\n\n    const dragProps = React.useMemo(() => {\n      const dragProps: SheetContextType['dragProps'] = {\n        drag: 'y',\n        dragElastic: 0,\n        dragConstraints: { top: 0, bottom: 0 },\n        dragMomentum: false,\n        dragPropagation: false,\n        onDrag,\n        onDragEnd,\n      };\n\n      return disableDrag ? undefined : dragProps;\n    }, [disableDrag]); // eslint-disable-line\n\n    const context: SheetContextType = {\n      y,\n      sheetRef,\n      isOpen,\n      initialSnap,\n      snapPoints,\n      detent,\n      indicatorRotation,\n      callbacks,\n      dragProps,\n      windowHeight,\n      animationOptions,\n      reduceMotion,\n    };\n\n    const sheet = (\n      <SheetContext.Provider value={context}>\n        <motion.div\n          {...rest}\n          ref={ref}\n          style={{ ...styles.wrapper, zIndex, visibility, ...style }}\n        >\n          <AnimatePresence>\n            {/* NOTE: AnimatePresence requires us to set keys to children */}\n            {isOpen\n              ? React.Children.map(children, (child: any, i) =>\n                  React.cloneElement(child, { key: `sheet-child-${i}` })\n                )\n              : null}\n          </AnimatePresence>\n        </motion.div>\n      </SheetContext.Provider>\n    );\n\n    if (IS_SSR) return sheet;\n\n    return ReactDOM.createPortal(sheet, mountPoint ?? document.body);\n  }\n);\n\nexport default Sheet;\n","import * as React from 'react';\nimport { motion } from 'framer-motion';\n\nimport { SheetContainerProps } from './types';\nimport { useSheetContext } from './context';\nimport { useEventCallbacks } from './hooks';\nimport { MAX_HEIGHT } from './constants';\nimport { mergeRefs } from './utils';\nimport styles from './styles';\n\nconst SheetContainer = React.forwardRef<any, SheetContainerProps>(\n  ({ children, style = {}, className = '', ...rest }, ref) => {\n    const {\n      y,\n      isOpen,\n      callbacks,\n      snapPoints,\n      initialSnap = 0,\n      sheetRef,\n      windowHeight,\n      detent,\n      animationOptions,\n      reduceMotion,\n    } = useSheetContext();\n\n    const { handleAnimationComplete } = useEventCallbacks(isOpen, callbacks);\n    const initialY = snapPoints ? snapPoints[0] - snapPoints[initialSnap] : 0;\n    const maxSnapHeight = snapPoints ? snapPoints[0] : null;\n\n    const height =\n      maxSnapHeight !== null\n        ? `min(${maxSnapHeight}px, ${MAX_HEIGHT})`\n        : MAX_HEIGHT;\n\n    return (\n      <motion.div\n        {...rest}\n        ref={mergeRefs([sheetRef, ref])}\n        className={`react-modal-sheet-container ${className}`}\n        style={{\n          ...styles.container,\n          ...style,\n          ...(detent === 'full-height' && { height }),\n          ...(detent === 'content-height' && { maxHeight: height }),\n          y,\n        }}\n        initial={reduceMotion ? false : { y: windowHeight }}\n        animate={{ y: initialY, transition: animationOptions }}\n        exit={{ y: windowHeight, transition: animationOptions }}\n        onAnimationComplete={handleAnimationComplete}\n      >\n        {children}\n      </motion.div>\n    );\n  }\n);\n\nexport default SheetContainer;\n","import * as React from 'react';\nimport { motion } from 'framer-motion';\n\nimport { SheetDraggableProps } from './types';\nimport { useSheetContext } from './context';\nimport styles from './styles';\n\nconst SheetContent = React.forwardRef<any, SheetDraggableProps>(\n  ({ children, style, disableDrag, className = '', ...rest }, ref) => {\n    const { dragProps } = useSheetContext();\n    const _dragProps = disableDrag ? undefined : dragProps;\n\n    return (\n      <motion.div\n        {...rest}\n        ref={ref}\n        className={`react-modal-sheet-content ${className}`}\n        style={{ ...styles.content, ...style }}\n        {..._dragProps}\n      >\n        {children}\n      </motion.div>\n    );\n  }\n);\n\nexport default SheetContent;\n","import * as React from 'react';\nimport { motion, useTransform } from 'framer-motion';\n\nimport { SheetDraggableProps } from './types';\nimport { useSheetContext } from './context';\nimport styles from './styles';\n\nconst SheetHeader = React.forwardRef<any, SheetDraggableProps>(\n  ({ children, style, disableDrag, ...rest }, ref) => {\n    const { indicatorRotation, dragProps } = useSheetContext();\n    const _dragProps = disableDrag ? undefined : dragProps;\n\n    const indicator1Transform = useTransform(\n      indicatorRotation,\n      r => `translateX(2px) rotate(${r}deg)`\n    );\n\n    const indicator2Transform = useTransform(\n      indicatorRotation,\n      r => `translateX(-2px) rotate(${-1 * r}deg)`\n    );\n\n    return (\n      <motion.div\n        {...rest}\n        ref={ref}\n        style={{ ...styles.headerWrapper, ...style }}\n        {..._dragProps}\n      >\n        {children || (\n          <div className=\"react-modal-sheet-header\" style={styles.header}>\n            <motion.span\n              className=\"react-modal-sheet-drag-indicator\"\n              style={{ ...styles.indicator, transform: indicator1Transform }}\n            />\n            <motion.span\n              className=\"react-modal-sheet-drag-indicator\"\n              style={{ ...styles.indicator, transform: indicator2Transform }}\n            />\n          </div>\n        )}\n      </motion.div>\n    );\n  }\n);\n\nexport default SheetHeader;\n","import * as React from 'react';\nimport { motion } from 'framer-motion';\n\nimport { SheetBackdropProps } from './types';\nimport styles from './styles';\n\nconst isClickable = (props: any) => !!props.onClick || !!props.onTap;\n\nconst SheetBackdrop = React.forwardRef<any, SheetBackdropProps>(\n  ({ style = {}, className = '', ...rest }, ref) => {\n    const Comp = isClickable(rest) ? motion.button : motion.div;\n    const pointerEvents = isClickable(rest) ? 'auto' : 'none';\n\n    return (\n      <Comp\n        {...rest}\n        ref={ref}\n        className={`react-modal-sheet-backdrop ${className}`}\n        style={{ ...styles.backdrop, ...style, pointerEvents }}\n        initial={{ opacity: 0 }}\n        animate={{ opacity: 1 }}\n        exit={{ opacity: 0 }}\n      />\n    );\n  }\n);\n\nexport default SheetBackdrop;\n","import { MotionValue } from 'framer-motion';\n\nimport Sheet from './sheet';\nimport SheetContainer from './SheetContainer';\nimport SheetContent from './SheetContent';\nimport SheetHeader from './SheetHeader';\nimport SheetBackdrop from './SheetBackdrop';\nimport { SheetCompound } from './types';\n\nexport type SheetRef = {\n  y: MotionValue<number>;\n  snapTo: (index: number) => void;\n};\n\n// HACK: this is needed to get the typing to work properly...\nconst _SheetCompound: any = Sheet;\n_SheetCompound.Container = SheetContainer;\n_SheetCompound.Header = SheetHeader;\n_SheetCompound.Content = SheetContent;\n_SheetCompound.Backdrop = SheetBackdrop;\n\nexport default _SheetCompound as SheetCompound;\n"],"names":["MAX_HEIGHT","IS_SSR","window","DEFAULT_SPRING_CONFIG","stiffness","damping","mass","getClosest","nums","goal","closest","minDifference","Math","abs","i","length","difference","cleanupRootStyles","rootId","body","document","querySelector","root","getElementById","highlight","style","removeProperty","opacity","addEventListener","onTransitionEnd","removeEventListener","parentNode","removeChild","validateSnapTo","snapTo","sheetHeight","console","warn","max","round","useIsomorphicLayoutEffect","React","usePrevious","state","ref","current","useEvent","handler","handlerRef","fn","args","restore","SheetContext","undefined","useSheetContext","context","Error","visualViewport","nonTextInputTypes","Set","preventScrollCount","setStyle","element","value","cur","addEvent","target","event","options","scrollIntoView","scrollingElement","documentElement","scrollable","getScrollParent","scrollableTop","getBoundingClientRect","top","targetTop","clientHeight","scrollTop","parentElement","willOpenKeyboard","HTMLInputElement","has","type","HTMLTextAreaElement","HTMLElement","isContentEditable","styles","wrapper","position","bottom","left","right","overflow","pointerEvents","backdrop","zIndex","width","height","backgroundColor","touchAction","border","container","borderTopRightRadius","borderTopLeftRadius","boxShadow","display","flexDirection","headerWrapper","header","alignItems","justifyContent","indicator","borderRadius","content","flex","Sheet","onOpenStart","onOpenEnd","onClose","onCloseStart","onCloseEnd","onSnap","children","isOpen","snapPoints","mountPoint","detent","initialSnap","springConfig","disableDrag","prefersReducedMotion","rest","sheetRef","indicatorRotation","useMotionValue","windowHeight","setWindowHeight","updateHeight","innerHeight","useWindowHeight","shouldReduceMotion","useReducedMotion","reduceMotion","Boolean","animationOptions","duration","y","useTransform","visibility","callbacks","map","point","assert","arr","inDescendingOrder","onDrag","_","delta","velocity","getVelocity","set","get","onDragEnd","currentY","snapToValues","p","min","includes","unshift","animate","snapValue","snapIndex","indexOf","sheetEl","prevOpen","h","s","willChange","transition","transform","createElement","setAttribute","id","appendChild","requestAnimationFrame","applyRootStyles","useModalEffect","isDisabled","useLayoutEffect","isIOS","lastY","scrollX","pageXOffset","scrollY","pageYOffset","restoreStyles","chain","innerWidth","clientWidth","scrollTo","removeEvents","e","changedTouches","pageY","passive","capture","scrollHeight","preventDefault","activeElement","focus","once","preventScrollMobileSafari","usePreventScroll","dragProps","drag","dragElastic","dragConstraints","dragMomentum","dragPropagation","sheet","Provider","motion","div","AnimatePresence","child","key","ReactDOM","SheetContainer","refs","className","handleAnimationComplete","didOpen","useEventCallbacks","initialY","maxSnapHeight","forEach","maxHeight","initial","exit","onAnimationComplete","SheetContent","_dragProps","SheetHeader","indicator1Transform","r","indicator2Transform","span","isClickable","props","onClick","onTap","SheetBackdrop","Comp","button","_SheetCompound","Container","Header","Content","Backdrop"],"mappings":"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"}
+{"version":3,"file":"react-modal-sheet.cjs.production.min.js","sources":["../src/constants.ts","../src/utils.ts","../src/hooks.tsx","../src/context.tsx","../src/use-prevent-scroll.ts","../src/styles.ts","../src/sheet.tsx","../src/SheetContainer.tsx","../src/SheetContent.tsx","../src/SheetHeader.tsx","../src/SheetBackdrop.tsx","../src/SheetScroller.tsx","../src/index.tsx"],"sourcesContent":["export const MAX_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';\n\nexport const IS_SSR = typeof window === 'undefined';\n\nexport const DEFAULT_TWEEN_CONFIG = {\n  ease: 'easeOut',\n  duration: 0.2,\n};\n\nexport const REDUCED_MOTION_TWEEN_CONFIG = {\n  ease: 'linear',\n  duration: 0.01,\n};\n\nexport const DRAG_CLOSE_THRESHOLD = 0.6;\n\nexport const DRAG_VELOCITY_THRESHOLD = 500;\n","import * as React from 'react';\n\nexport function getClosest(nums: number[], goal: number) {\n  let closest = nums[0];\n  let minDifference = Math.abs(nums[0] - goal);\n\n  for (let i = 1; i < nums.length; i++) {\n    const difference = Math.abs(nums[i] - goal);\n    if (difference < minDifference) {\n      closest = nums[i];\n      minDifference = difference;\n    }\n  }\n\n  return closest;\n}\n\nexport function applyRootStyles(rootId: string) {\n  const body = document.querySelector('body') as HTMLBodyElement;\n  const root = document.querySelector(`#${rootId}`) as HTMLDivElement;\n\n  if (root) {\n    const p = 24;\n    const h = window.innerHeight;\n    const s = (h - p) / h;\n    body.style.backgroundColor = '#000';\n    root.style.overflow = 'hidden';\n    root.style.willChange = 'transform';\n    root.style.transition =\n      'transform 200ms ease-in-out, border-radius 200ms linear';\n    root.style.transform = `translateY(calc(env(safe-area-inset-top) + ${p / 2}px)) scale(${s})`; // prettier-ignore\n    root.style.borderTopRightRadius = '10px';\n    root.style.borderTopLeftRadius = '10px';\n  }\n}\n\nexport function cleanupRootStyles(rootId: string) {\n  const body = document.querySelector('body') as HTMLBodyElement;\n  const root = document.getElementById(rootId) as HTMLDivElement;\n\n  function onTransitionEnd() {\n    root.style.removeProperty('overflow');\n    root.style.removeProperty('will-change');\n    root.style.removeProperty('transition');\n    body.style.removeProperty('background-color');\n    root.removeEventListener('transitionend', onTransitionEnd);\n  }\n\n  if (root) {\n    // Start animating back\n    root.style.removeProperty('border-top-right-radius');\n    root.style.removeProperty('border-top-left-radius');\n    root.style.removeProperty('transform');\n\n    // Remove temp properties after animation is finished\n    root.addEventListener('transitionend', onTransitionEnd);\n  }\n}\n\nexport function inDescendingOrder(arr: number[]) {\n  for (let i = 0; i < arr.length; i++) {\n    if (arr[i + 1] > arr[i]) return false;\n  }\n\n  return true;\n}\n\nexport function validateSnapTo({\n  snapTo,\n  sheetHeight,\n}: {\n  snapTo: number;\n  sheetHeight: number;\n}) {\n  if (snapTo < 0) {\n    console.warn(\n      `Snap point is out of bounds. Sheet height is ${sheetHeight} but snap point is ${sheetHeight +\n        Math.abs(snapTo)}.`\n    );\n  }\n\n  return Math.max(Math.round(snapTo), 0);\n}\n\nexport function mergeRefs<T = any>(\n  refs: React.ForwardedRef<T>[]\n): React.RefCallback<T> {\n  return (value: any) => {\n    refs.forEach((ref: any) => {\n      if (typeof ref === 'function') {\n        ref(value);\n      } else if (ref) {\n        ref.current = value;\n      }\n    });\n  };\n}\n\nexport function isTouchDevice() {\n  if (typeof window === 'undefined') return false;\n  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n}\n","import * as React from 'react';\n\nimport { IS_SSR } from './constants';\nimport { SheetEvents } from './types';\nimport { applyRootStyles, cleanupRootStyles } from './utils';\n\nexport const useIsomorphicLayoutEffect = IS_SSR\n  ? React.useEffect\n  : React.useLayoutEffect;\n\nexport function useModalEffect(isOpen: boolean, rootId?: string) {\n  const prevOpen = usePrevious(isOpen);\n\n  // Automatically apply the iOS modal effect to the body when sheet opens/closes\n  React.useEffect(() => {\n    if (rootId && !prevOpen && isOpen) {\n      applyRootStyles(rootId);\n    } else if (rootId && !isOpen && prevOpen) {\n      cleanupRootStyles(rootId);\n    }\n  }, [isOpen, prevOpen]); // eslint-disable-line\n\n  // Make sure to cleanup modal styles on unmount\n  React.useEffect(() => {\n    return () => {\n      if (rootId && isOpen) cleanupRootStyles(rootId);\n    };\n  }, [isOpen]); // eslint-disable-line\n}\n\nexport function useEventCallbacks(\n  isOpen: boolean,\n  callbacks: React.MutableRefObject<SheetEvents>\n) {\n  const prevOpen = usePrevious(isOpen);\n  const didOpen = React.useRef(false);\n\n  // Because of AnimatePrecence we don't have access to latest isOpen value\n  // so we need to read and write to a ref to determine if we are\n  // opening or closing the sheet\n  const handleAnimationComplete = React.useCallback(() => {\n    if (!didOpen.current) {\n      callbacks.current.onOpenEnd?.();\n      didOpen.current = true;\n    } else {\n      callbacks.current.onCloseEnd?.();\n      didOpen.current = false;\n    }\n  }, [isOpen, prevOpen]); // eslint-disable-line\n\n  React.useEffect(() => {\n    if (!prevOpen && isOpen) {\n      callbacks.current.onOpenStart?.();\n    } else if (!isOpen && prevOpen) {\n      callbacks.current.onCloseStart?.();\n    }\n  }, [isOpen, prevOpen]); // eslint-disable-line\n\n  return { handleAnimationComplete };\n}\n\nexport function useWindowHeight() {\n  const [windowHeight, setWindowHeight] = React.useState(0);\n\n  useIsomorphicLayoutEffect(() => {\n    const updateHeight = () => setWindowHeight(window.innerHeight);\n    window.addEventListener('resize', updateHeight);\n    updateHeight();\n    return () => window.removeEventListener('resize', updateHeight);\n  }, []);\n\n  return windowHeight;\n}\n\nexport function usePrevious<T>(state: T): T | undefined {\n  const ref = React.useRef<T>();\n\n  React.useEffect(() => {\n    ref.current = state;\n  });\n\n  return ref.current;\n}\n\n// Userland version of the `useEvent` React hook:\n// RFC: https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md\nexport function useEvent<T extends (...args: any[]) => any>(handler: T) {\n  const handlerRef = React.useRef<T>();\n\n  useIsomorphicLayoutEffect(() => {\n    handlerRef.current = handler;\n  });\n\n  return React.useCallback((...args: any[]) => {\n    const fn = handlerRef.current;\n    return fn?.(...args);\n  }, []) as T;\n}\n","import * as React from 'react';\nimport { SheetScrollerContextType, SheetContextType } from './types';\n\nexport const SheetContext = React.createContext<SheetContextType | undefined>(\n  undefined\n);\n\nexport const useSheetContext = () => {\n  const context = React.useContext(SheetContext);\n  if (!context) throw Error('Sheet context error');\n  return context;\n};\n\nexport const SheetScrollerContext = React.createContext<\n  SheetScrollerContextType | undefined\n>(undefined);\n\nexport function SheetScrollerContextProvider({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  const sheetContext = useSheetContext();\n  const [disableDrag, setDisableDrag] = React.useState(\n    !!sheetContext.disableDrag\n  );\n\n  function setDragEnabled() {\n    if (!sheetContext.disableDrag) setDisableDrag(false);\n  }\n\n  function setDragDisabled() {\n    if (!disableDrag) setDisableDrag(true);\n  }\n\n  return (\n    <SheetScrollerContext.Provider\n      value={{ disableDrag, setDragEnabled, setDragDisabled }}\n    >\n      {children}\n    </SheetScrollerContext.Provider>\n  );\n}\n\nexport const useSheetScrollerContext = () => {\n  const context = React.useContext(SheetScrollerContext);\n  if (!context) throw Error('Sheet scroller context error');\n  return context;\n};\n","// Source: https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/overlays/src/usePreventScroll.ts\nimport {\n  chain,\n  getScrollParent,\n  isIOS,\n  useLayoutEffect,\n} from '@react-aria/utils';\n\ninterface PreventScrollOptions {\n  /** Whether the scroll lock is disabled. */\n  isDisabled?: boolean;\n}\n\n// @ts-ignore\nconst visualViewport = typeof window !== 'undefined' && window.visualViewport;\n\n// HTML input types that do not cause the software keyboard to appear.\nconst nonTextInputTypes = new Set([\n  'checkbox',\n  'radio',\n  'range',\n  'color',\n  'file',\n  'image',\n  'button',\n  'submit',\n  'reset',\n]);\n\n// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position\nlet preventScrollCount = 0;\nlet restore: any;\n\n/**\n * Prevents scrolling on the document body on mount, and\n * restores it on unmount. Also ensures that content does not\n * shift due to the scrollbars disappearing.\n */\nexport function usePreventScroll(options: PreventScrollOptions = {}) {\n  let { isDisabled } = options;\n\n  useLayoutEffect(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    preventScrollCount++;\n    if (preventScrollCount === 1) {\n      if (isIOS()) {\n        restore = preventScrollMobileSafari();\n      } else {\n        restore = preventScrollStandard();\n      }\n    }\n\n    return () => {\n      preventScrollCount--;\n      if (preventScrollCount === 0) {\n        restore();\n      }\n    };\n  }, [isDisabled]);\n}\n\n// For most browsers, all we need to do is set `overflow: hidden` on the root element, and\n// add some padding to prevent the page from shifting when the scrollbar is hidden.\nfunction preventScrollStandard() {\n  return chain(\n    setStyle(\n      document.documentElement,\n      'paddingRight',\n      `${window.innerWidth - document.documentElement.clientWidth}px`\n    ),\n    setStyle(document.documentElement, 'overflow', 'hidden')\n  );\n}\n\n// Mobile Safari is a whole different beast. Even with overflow: hidden,\n// it still scrolls the page in many situations:\n//\n// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.\n// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of\n//    it, so it becomes scrollable.\n// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.\n//    This may cause even fixed position elements to scroll off the screen.\n// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always\n//    scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.\n//\n// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:\n//\n// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling\n//    on the window.\n// 2. Prevent default on `touchmove` events inside a scrollable element when the scroll position is at the\n//    top or bottom. This avoids the whole page scrolling instead, but does prevent overscrolling.\n// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.\n// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top\n//    of the page, which prevents it from scrolling the page. After the input is focused, scroll the element\n//    into view ourselves, without scrolling the whole page.\n// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the\n//    same visually, but makes the actual scroll position always zero. This is required to make all of the\n//    above work or Safari will still try to scroll the page when focusing an input.\n// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting\n//    to navigate to an input with the next/previous buttons that's outside a modal.\nfunction preventScrollMobileSafari() {\n  let scrollable: Element;\n  let lastY = 0;\n  let onTouchStart = (e: TouchEvent) => {\n    // Store the nearest scrollable parent element from the element that the user touched.\n    scrollable = getScrollParent(e.target as Element);\n    if (\n      scrollable === document.documentElement &&\n      scrollable === document.body\n    ) {\n      return;\n    }\n\n    lastY = e.changedTouches[0].pageY;\n  };\n\n  let onTouchMove = (e: TouchEvent) => {\n    // Prevent scrolling the window.\n    if (\n      scrollable === document.documentElement ||\n      scrollable === document.body\n    ) {\n      e.preventDefault();\n      return;\n    }\n\n    // Prevent scrolling up when at the top and scrolling down when at the bottom\n    // of a nested scrollable area, otherwise mobile Safari will start scrolling\n    // the window instead. Unfortunately, this disables bounce scrolling when at\n    // the top but it's the best we can do.\n    let y = e.changedTouches[0].pageY;\n    let scrollTop = scrollable.scrollTop;\n    let bottom = scrollable.scrollHeight - scrollable.clientHeight;\n\n    // Fix for: https://github.com/adobe/react-spectrum/pull/3780/files\n    if (bottom === 0) {\n      return;\n    }\n\n    if ((scrollTop <= 0 && y > lastY) || (scrollTop >= bottom && y < lastY)) {\n      e.preventDefault();\n    }\n\n    lastY = y;\n  };\n\n  let onTouchEnd = (e: TouchEvent) => {\n    let target = e.target as HTMLElement;\n\n    // Apply this change if we're not already focused on the target element\n    if (willOpenKeyboard(target) && target !== document.activeElement) {\n      e.preventDefault();\n\n      // Apply a transform to trick Safari into thinking the input is at the top of the page\n      // so it doesn't try to scroll it into view. When tapping on an input, this needs to\n      // be done before the \"focus\" event, so we have to focus the element ourselves.\n      target.style.transform = 'translateY(-2000px)';\n      target.focus();\n      requestAnimationFrame(() => {\n        target.style.transform = '';\n      });\n    }\n  };\n\n  let onFocus = (e: FocusEvent) => {\n    let target = e.target as HTMLElement;\n    if (willOpenKeyboard(target)) {\n      // Transform also needs to be applied in the focus event in cases where focus moves\n      // other than tapping on an input directly, e.g. the next/previous buttons in the\n      // software keyboard. In these cases, it seems applying the transform in the focus event\n      // is good enough, whereas when tapping an input, it must be done before the focus event. 🤷‍♂️\n      target.style.transform = 'translateY(-2000px)';\n      requestAnimationFrame(() => {\n        target.style.transform = '';\n\n        // This will have prevented the browser from scrolling the focused element into view,\n        // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.\n        if (visualViewport) {\n          if (visualViewport.height < window.innerHeight) {\n            // If the keyboard is already visible, do this after one additional frame\n            // to wait for the transform to be removed.\n            requestAnimationFrame(() => {\n              scrollIntoView(target);\n            });\n          } else {\n            // Otherwise, wait for the visual viewport to resize before scrolling so we can\n            // measure the correct position to scroll to.\n            visualViewport.addEventListener(\n              'resize',\n              () => scrollIntoView(target),\n              { once: true }\n            );\n          }\n        }\n      });\n    }\n  };\n\n  let onWindowScroll = () => {\n    // Last resort. If the window scrolled, scroll it back to the top.\n    // It should always be at the top because the body will have a negative margin (see below).\n    window.scrollTo(0, 0);\n  };\n\n  // Record the original scroll position so we can restore it.\n  // Then apply a negative margin to the body to offset it by the scroll position. This will\n  // enable us to scroll the window to the top, which is required for the rest of this to work.\n  let scrollX = window.pageXOffset;\n  let scrollY = window.pageYOffset;\n\n  let restoreStyles = chain(\n    setStyle(\n      document.documentElement,\n      'paddingRight',\n      `${window.innerWidth - document.documentElement.clientWidth}px`\n    ),\n    setStyle(document.documentElement, 'overflow', 'hidden'),\n    setStyle(document.body, 'marginTop', `-${scrollY}px`)\n  );\n\n  // Scroll to the top. The negative margin on the body will make this appear the same.\n  window.scrollTo(0, 0);\n\n  let removeEvents = chain(\n    addEvent(document, 'touchstart', onTouchStart, {\n      passive: false,\n      capture: true,\n    }),\n    addEvent(document, 'touchmove', onTouchMove, {\n      passive: false,\n      capture: true,\n    }),\n    addEvent(document, 'touchend', onTouchEnd, {\n      passive: false,\n      capture: true,\n    }),\n    addEvent(document, 'focus', onFocus, true),\n    addEvent(window, 'scroll', onWindowScroll)\n  );\n\n  return () => {\n    // Restore styles and scroll the page back to where it was.\n    restoreStyles();\n    removeEvents();\n    window.scrollTo(scrollX, scrollY);\n  };\n}\n\n// Sets a CSS property on an element, and returns a function to revert it to the previous value.\nfunction setStyle(element: any, style: string, value: string) {\n  let cur = element.style[style];\n  element.style[style] = value;\n\n  return () => {\n    element.style[style] = cur;\n  };\n}\n\n// Adds an event listener to an element, and returns a function to remove it.\nfunction addEvent<K extends keyof GlobalEventHandlersEventMap>(\n  target: EventTarget,\n  event: K,\n  handler: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any,\n  options?: boolean | AddEventListenerOptions\n) {\n  target.addEventListener(event, handler as any, options);\n  return () => {\n    target.removeEventListener(event, handler as any, options);\n  };\n}\n\nfunction scrollIntoView(target: Element) {\n  let root = document.scrollingElement || document.documentElement;\n  while (target && target !== root) {\n    // Find the parent scrollable element and adjust the scroll position if the target is not already in view.\n    let scrollable = getScrollParent(target);\n    if (\n      scrollable !== document.documentElement &&\n      scrollable !== document.body &&\n      scrollable !== target\n    ) {\n      let scrollableTop = scrollable.getBoundingClientRect().top;\n      let targetTop = target.getBoundingClientRect().top;\n      if (targetTop > scrollableTop + target.clientHeight) {\n        scrollable.scrollTop += targetTop - scrollableTop;\n      }\n    }\n\n    target = scrollable.parentElement as any;\n  }\n}\n\nfunction willOpenKeyboard(target: Element) {\n  return (\n    (target instanceof HTMLInputElement &&\n      !nonTextInputTypes.has(target.type)) ||\n    target instanceof HTMLTextAreaElement ||\n    (target instanceof HTMLElement && target.isContentEditable)\n  );\n}\n","import * as CSS from 'csstype';\n\nconst styles: { [key: string]: CSS.Properties } = {\n  wrapper: {\n    position: 'fixed',\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n    overflow: 'hidden',\n    pointerEvents: 'none',\n  },\n  backdrop: {\n    zIndex: 1,\n    position: 'fixed',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n    backgroundColor: 'rgba(0, 0, 0, 0.2)',\n    touchAction: 'none', // Disable iOS body scrolling\n    border: 'none',\n  },\n  container: {\n    zIndex: 2,\n    position: 'absolute',\n    left: 0,\n    bottom: 0,\n    width: '100%',\n    backgroundColor: '#fff',\n    borderTopRightRadius: '8px',\n    borderTopLeftRadius: '8px',\n    boxShadow: '0px -2px 16px rgba(0, 0, 0, 0.3)',\n    display: 'flex',\n    flexDirection: 'column',\n    pointerEvents: 'auto',\n  },\n  headerWrapper: {\n    width: '100%',\n  },\n  header: {\n    height: '40px',\n    width: '100%',\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  indicator: {\n    width: '18px',\n    height: '4px',\n    borderRadius: '99px',\n    backgroundColor: '#ddd',\n  },\n  content: {\n    flexGrow: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    minHeight: '0px',\n    position: 'relative',\n  },\n  scroller: {\n    height: '100%',\n    overflowY: 'auto',\n  },\n};\n\nexport default styles;\n","import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\n\nimport {\n  animate,\n  AnimatePresence,\n  motion,\n  PanInfo,\n  Transition,\n  useMotionValue,\n  useReducedMotion,\n  useTransform,\n} from 'framer-motion';\n\nimport {\n  useModalEffect,\n  useWindowHeight,\n  useIsomorphicLayoutEffect,\n  useEvent,\n} from './hooks';\n\nimport {\n  REDUCED_MOTION_TWEEN_CONFIG,\n  DEFAULT_TWEEN_CONFIG,\n  DRAG_CLOSE_THRESHOLD,\n  DRAG_VELOCITY_THRESHOLD,\n  IS_SSR,\n} from './constants';\n\nimport { SheetContextType, SheetProps } from './types';\nimport { SheetScrollerContextProvider, SheetContext } from './context';\nimport { getClosest, inDescendingOrder, validateSnapTo } from './utils';\nimport { usePreventScroll } from './use-prevent-scroll';\nimport styles from './styles';\n\nconst Sheet = React.forwardRef<any, SheetProps>(\n  (\n    {\n      onOpenStart,\n      onOpenEnd,\n      onClose,\n      onCloseStart,\n      onCloseEnd,\n      onSnap,\n      children,\n      isOpen,\n      snapPoints,\n      rootId,\n      mountPoint,\n      style,\n      detent = 'full-height',\n      initialSnap = 0,\n      disableDrag = false,\n      prefersReducedMotion = false,\n      tweenConfig = DEFAULT_TWEEN_CONFIG,\n      ...rest\n    },\n    ref\n  ) => {\n    const sheetRef = React.useRef<any>(null);\n    const indicatorRotation = useMotionValue(0);\n    const windowHeight = useWindowHeight();\n    const shouldReduceMotion = useReducedMotion();\n    const reduceMotion = Boolean(prefersReducedMotion || shouldReduceMotion);\n    const animationOptions: Transition = {\n      type: 'tween',\n      ...(reduceMotion ? REDUCED_MOTION_TWEEN_CONFIG : tweenConfig),\n    };\n\n    // NOTE: the inital value for `y` doesn't matter since it is overwritten by\n    // the value driven by the `AnimatePresence` component when the sheet is opened\n    // and after that it is driven by the gestures and/or snapping\n    const y = useMotionValue(0);\n\n    const zIndex = useTransform(y, value =>\n      value >= windowHeight ? -1 : 9999999\n    );\n\n    const visibility = useTransform(y, value =>\n      value >= windowHeight ? 'hidden' : 'visible'\n    );\n\n    // Keep the callback fns up-to-date so that they can be accessed inside\n    // the effect without including them to the dependencies array\n    const callbacks = React.useRef({\n      onOpenStart,\n      onOpenEnd,\n      onCloseStart,\n      onCloseEnd,\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      callbacks.current = {\n        onOpenStart,\n        onOpenEnd,\n        onCloseStart,\n        onCloseEnd,\n      };\n    });\n\n    if (snapPoints) {\n      // Convert negative / percentage snap points to absolute values\n      snapPoints = snapPoints.map(point => {\n        // Percentage values e.g. between 0.0 and 1.0\n        if (point > 0 && point <= 1) return Math.round(point * windowHeight);\n        return point < 0 ? windowHeight + point : point; // negative values\n      });\n\n      console.assert(\n        inDescendingOrder(snapPoints) || windowHeight === 0,\n        `Snap points need to be in descending order got: [${snapPoints}]`\n      );\n    }\n\n    const onDrag = useEvent((_, { delta }: PanInfo) => {\n      // Update drag indicator rotation based on drag velocity\n      const velocity = y.getVelocity();\n\n      if (velocity > 0) indicatorRotation.set(10);\n      if (velocity < 0) indicatorRotation.set(-10);\n\n      // Make sure user cannot drag beyond the top of the sheet\n      y.set(Math.max(y.get() + delta.y, 0));\n    });\n\n    const onDragEnd = useEvent((_, { velocity }: PanInfo) => {\n      if (velocity.y > DRAG_VELOCITY_THRESHOLD) {\n        // User flicked the sheet down\n        onClose();\n      } else {\n        const sheetEl = sheetRef.current as HTMLDivElement;\n        const sheetHeight = sheetEl.getBoundingClientRect().height;\n        const currentY = y.get();\n\n        let snapTo = 0;\n\n        if (snapPoints) {\n          const snapToValues = snapPoints.map(\n            p => sheetHeight - Math.min(p, sheetHeight)\n          );\n\n          // Allow snapping to the top of the sheet if detent is set to `content-height`\n          if (detent === 'content-height' && !snapToValues.includes(0)) {\n            snapToValues.unshift(0);\n          }\n\n          // Get the closest snap point\n          snapTo = getClosest(snapToValues, currentY);\n        } else if (currentY / sheetHeight > DRAG_CLOSE_THRESHOLD) {\n          // Close if dragged over enough far\n          snapTo = sheetHeight;\n        }\n\n        snapTo = validateSnapTo({ snapTo, sheetHeight });\n\n        // Update the spring value so that the sheet is animated to the snap point\n        animate(y, snapTo, animationOptions);\n\n        if (snapPoints && onSnap) {\n          const snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));\n          const snapIndex = snapPoints.indexOf(getClosest(snapPoints, snapValue)); // prettier-ignore\n          onSnap(snapIndex);\n        }\n\n        const roundedSheetHeight = Math.round(sheetHeight);\n        const shouldClose = snapTo >= roundedSheetHeight;\n\n        if (shouldClose) onClose();\n      }\n\n      // Reset indicator rotation after dragging\n      indicatorRotation.set(0);\n    });\n\n    // Trigger onSnap callback when sheet is opened or closed\n    React.useEffect(() => {\n      if (!snapPoints || !onSnap) return;\n      const snapIndex = isOpen ? initialSnap : snapPoints.length - 1;\n      onSnap(snapIndex);\n    }, [isOpen]); // eslint-disable-line\n\n    React.useImperativeHandle(ref, () => ({\n      y,\n      snapTo: (snapIndex: number) => {\n        const sheetEl = sheetRef.current as HTMLDivElement | null;\n\n        if (\n          snapPoints &&\n          snapPoints[snapIndex] !== undefined &&\n          sheetEl !== null\n        ) {\n          const sheetHeight = sheetEl.getBoundingClientRect().height;\n          const snapPoint = snapPoints[snapIndex];\n          const snapTo = validateSnapTo({\n            snapTo: sheetHeight - snapPoint,\n            sheetHeight,\n          });\n\n          animate(y, snapTo, animationOptions);\n          if (onSnap) onSnap(snapIndex);\n          if (snapTo >= sheetHeight) onClose();\n        }\n      },\n    }));\n\n    useModalEffect(isOpen, rootId);\n\n    // Framer Motion should handle body scroll locking but it's not working\n    // properly on iOS. Scroll locking from React Aria seems to work much better.\n    usePreventScroll({ isDisabled: !isOpen });\n\n    const dragProps = React.useMemo(() => {\n      const dragProps: SheetContextType['dragProps'] = {\n        drag: 'y',\n        dragElastic: 0,\n        dragConstraints: { top: 0, bottom: 0 },\n        dragMomentum: false,\n        dragPropagation: false,\n        onDrag,\n        onDragEnd,\n      };\n\n      return disableDrag ? undefined : dragProps;\n    }, [disableDrag]); // eslint-disable-line\n\n    const context: SheetContextType = {\n      y,\n      sheetRef,\n      isOpen,\n      initialSnap,\n      snapPoints,\n      detent,\n      indicatorRotation,\n      callbacks,\n      dragProps,\n      windowHeight,\n      animationOptions,\n      reduceMotion,\n      disableDrag,\n    };\n\n    const sheet = (\n      <SheetContext.Provider value={context}>\n        <motion.div\n          {...rest}\n          ref={ref}\n          style={{ ...styles.wrapper, zIndex, visibility, ...style }}\n        >\n          <AnimatePresence>\n            {/* NOTE: AnimatePresence requires us to set keys to children */}\n            {isOpen ? (\n              <SheetScrollerContextProvider>\n                {React.Children.map(children, (child: any, i) =>\n                  React.cloneElement(child, { key: `sheet-child-${i}` })\n                )}\n              </SheetScrollerContextProvider>\n            ) : null}\n          </AnimatePresence>\n        </motion.div>\n      </SheetContext.Provider>\n    );\n\n    if (IS_SSR) return sheet;\n\n    return ReactDOM.createPortal(sheet, mountPoint ?? document.body);\n  }\n);\n\nexport default Sheet;\n","import * as React from 'react';\nimport { motion } from 'framer-motion';\n\nimport { SheetContainerProps } from './types';\nimport { useSheetContext } from './context';\nimport { useEventCallbacks } from './hooks';\nimport { MAX_HEIGHT } from './constants';\nimport { mergeRefs } from './utils';\nimport styles from './styles';\n\nconst SheetContainer = React.forwardRef<any, SheetContainerProps>(\n  ({ children, style = {}, className = '', ...rest }, ref) => {\n    const {\n      y,\n      isOpen,\n      callbacks,\n      snapPoints,\n      initialSnap = 0,\n      sheetRef,\n      windowHeight,\n      detent,\n      animationOptions,\n      reduceMotion,\n    } = useSheetContext();\n\n    const { handleAnimationComplete } = useEventCallbacks(isOpen, callbacks);\n    const initialY = snapPoints ? snapPoints[0] - snapPoints[initialSnap] : 0;\n    const maxSnapHeight = snapPoints ? snapPoints[0] : null;\n\n    const height =\n      maxSnapHeight !== null\n        ? `min(${maxSnapHeight}px, ${MAX_HEIGHT})`\n        : MAX_HEIGHT;\n\n    return (\n      <motion.div\n        {...rest}\n        ref={mergeRefs([sheetRef, ref])}\n        className={`react-modal-sheet-container ${className}`}\n        style={{\n          ...styles.container,\n          ...style,\n          ...(detent === 'full-height' && { height }),\n          ...(detent === 'content-height' && { maxHeight: height }),\n          y,\n        }}\n        initial={reduceMotion ? false : { y: windowHeight }}\n        animate={{ y: initialY, transition: animationOptions }}\n        exit={{ y: windowHeight, transition: animationOptions }}\n        onAnimationComplete={handleAnimationComplete}\n      >\n        {children}\n      </motion.div>\n    );\n  }\n);\n\nexport default SheetContainer;\n","import * as React from 'react';\nimport { motion } from 'framer-motion';\n\nimport { SheetDraggableProps } from './types';\nimport { useSheetScrollerContext, useSheetContext } from './context';\nimport styles from './styles';\n\nconst SheetContent = React.forwardRef<any, SheetDraggableProps>(\n  ({ children, style, disableDrag, className = '', ...rest }, ref) => {\n    const sheetContext = useSheetContext();\n    const sheetScrollerContext = useSheetScrollerContext();\n\n    const dragProps =\n      disableDrag || sheetScrollerContext.disableDrag\n        ? undefined\n        : sheetContext.dragProps;\n\n    return (\n      <motion.div\n        {...rest}\n        ref={ref}\n        className={`react-modal-sheet-content ${className}`}\n        style={{ ...styles.content, ...style }}\n        {...dragProps}\n      >\n        {children}\n      </motion.div>\n    );\n  }\n);\n\nexport default SheetContent;\n","import * as React from 'react';\nimport { motion, useTransform } from 'framer-motion';\n\nimport { SheetDraggableProps } from './types';\nimport { useSheetContext } from './context';\nimport styles from './styles';\n\nconst SheetHeader = React.forwardRef<any, SheetDraggableProps>(\n  ({ children, style, disableDrag, ...rest }, ref) => {\n    const { indicatorRotation, dragProps } = useSheetContext();\n    const _dragProps = disableDrag ? undefined : dragProps;\n\n    const indicator1Transform = useTransform(\n      indicatorRotation,\n      r => `translateX(2px) rotate(${r}deg)`\n    );\n\n    const indicator2Transform = useTransform(\n      indicatorRotation,\n      r => `translateX(-2px) rotate(${-1 * r}deg)`\n    );\n\n    return (\n      <motion.div\n        {...rest}\n        ref={ref}\n        style={{ ...styles.headerWrapper, ...style }}\n        {..._dragProps}\n      >\n        {children || (\n          <div className=\"react-modal-sheet-header\" style={styles.header}>\n            <motion.span\n              className=\"react-modal-sheet-drag-indicator\"\n              style={{ ...styles.indicator, transform: indicator1Transform }}\n            />\n            <motion.span\n              className=\"react-modal-sheet-drag-indicator\"\n              style={{ ...styles.indicator, transform: indicator2Transform }}\n            />\n          </div>\n        )}\n      </motion.div>\n    );\n  }\n);\n\nexport default SheetHeader;\n","import * as React from 'react';\nimport { motion } from 'framer-motion';\n\nimport { SheetBackdropProps } from './types';\nimport styles from './styles';\n\nconst isClickable = (props: any) => !!props.onClick || !!props.onTap;\n\nconst SheetBackdrop = React.forwardRef<any, SheetBackdropProps>(\n  ({ style = {}, className = '', ...rest }, ref) => {\n    const Comp = isClickable(rest) ? motion.button : motion.div;\n    const pointerEvents = isClickable(rest) ? 'auto' : 'none';\n\n    return (\n      <Comp\n        {...rest}\n        ref={ref}\n        className={`react-modal-sheet-backdrop ${className}`}\n        style={{ ...styles.backdrop, ...style, pointerEvents }}\n        initial={{ opacity: 0 }}\n        animate={{ opacity: 1 }}\n        exit={{ opacity: 0 }}\n      />\n    );\n  }\n);\n\nexport default SheetBackdrop;\n","import * as React from 'react';\n\nimport { useSheetScrollerContext } from './context';\nimport { SheetScrollerProps } from './types';\nimport { isTouchDevice } from './utils';\nimport styles from './styles';\n\nconst SheetScroller = React.forwardRef<any, SheetScrollerProps>(\n  ({ draggableAt = 'top', children, style, className = '', ...rest }, ref) => {\n    const sheetScrollerContext = useSheetScrollerContext();\n\n    function determineDragState(element: HTMLDivElement) {\n      const { scrollTop, scrollHeight, clientHeight } = element;\n      const isScrollable = scrollHeight > clientHeight;\n\n      if (!isScrollable) return;\n\n      const isAtTop = scrollTop <= 0;\n      const isAtBottom = scrollHeight - scrollTop === clientHeight;\n\n      const shouldEnable =\n        (draggableAt === 'top' && isAtTop) ||\n        (draggableAt === 'bottom' && isAtBottom) ||\n        (draggableAt === 'both' && (isAtTop || isAtBottom));\n\n      if (shouldEnable) {\n        sheetScrollerContext.setDragEnabled();\n      } else {\n        sheetScrollerContext.setDragDisabled();\n      }\n    }\n\n    function onScroll(e: React.UIEvent<HTMLDivElement>) {\n      determineDragState(e.currentTarget);\n    }\n\n    function onTouchStart(e: React.TouchEvent<HTMLDivElement>) {\n      determineDragState(e.currentTarget);\n    }\n\n    const scrollProps = isTouchDevice()\n      ? { onScroll, onTouchStart }\n      : undefined;\n\n    return (\n      <div\n        {...rest}\n        ref={ref}\n        className={`react-modal-sheet-scroller ${className}`}\n        style={{ ...styles.scroller, ...style }}\n        {...scrollProps}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport default SheetScroller;\n","import { MotionValue } from 'framer-motion';\n\nimport Sheet from './sheet';\nimport SheetContainer from './SheetContainer';\nimport SheetContent from './SheetContent';\nimport SheetHeader from './SheetHeader';\nimport SheetBackdrop from './SheetBackdrop';\nimport SheetScroller from './SheetScroller';\nimport { SheetCompound } from './types';\n\nexport type SheetRef = {\n  y: MotionValue<number>;\n  snapTo: (index: number) => void;\n};\n\n// HACK: this is needed to get the typing to work properly...\nconst _SheetCompound: any = Sheet;\n_SheetCompound.Container = SheetContainer;\n_SheetCompound.Header = SheetHeader;\n_SheetCompound.Content = SheetContent;\n_SheetCompound.Backdrop = SheetBackdrop;\n_SheetCompound.Scroller = SheetScroller;\n\nexport default _SheetCompound as SheetCompound;\n"],"names":["MAX_HEIGHT","IS_SSR","window","DEFAULT_TWEEN_CONFIG","ease","duration","REDUCED_MOTION_TWEEN_CONFIG","getClosest","nums","goal","closest","minDifference","Math","abs","i","length","difference","cleanupRootStyles","rootId","body","document","querySelector","root","getElementById","style","removeProperty","addEventListener","onTransitionEnd","removeEventListener","validateSnapTo","snapTo","sheetHeight","console","warn","max","round","useIsomorphicLayoutEffect","React","usePrevious","state","ref","current","useEvent","handler","handlerRef","fn","args","SheetContext","undefined","useSheetContext","context","Error","SheetScrollerContext","SheetScrollerContextProvider","children","sheetContext","disableDrag","setDisableDrag","Provider","value","setDragEnabled","setDragDisabled","restore","useSheetScrollerContext","visualViewport","nonTextInputTypes","Set","preventScrollCount","setStyle","element","cur","addEvent","target","event","options","scrollIntoView","scrollingElement","documentElement","scrollable","getScrollParent","scrollableTop","getBoundingClientRect","top","targetTop","clientHeight","scrollTop","parentElement","willOpenKeyboard","HTMLInputElement","has","type","HTMLTextAreaElement","HTMLElement","isContentEditable","styles","wrapper","position","bottom","left","right","overflow","pointerEvents","backdrop","zIndex","width","height","backgroundColor","touchAction","border","container","borderTopRightRadius","borderTopLeftRadius","boxShadow","display","flexDirection","headerWrapper","header","alignItems","justifyContent","indicator","borderRadius","content","flexGrow","minHeight","scroller","overflowY","Sheet","onOpenStart","onOpenEnd","onClose","onCloseStart","onCloseEnd","onSnap","isOpen","snapPoints","mountPoint","detent","initialSnap","prefersReducedMotion","tweenConfig","rest","sheetRef","indicatorRotation","useMotionValue","windowHeight","setWindowHeight","updateHeight","innerHeight","useWindowHeight","shouldReduceMotion","useReducedMotion","reduceMotion","Boolean","animationOptions","y","useTransform","visibility","callbacks","map","point","assert","arr","inDescendingOrder","onDrag","_","delta","velocity","getVelocity","set","get","onDragEnd","currentY","snapToValues","p","min","includes","unshift","animate","snapValue","snapIndex","indexOf","sheetEl","prevOpen","h","s","willChange","transition","transform","applyRootStyles","useModalEffect","isDisabled","useLayoutEffect","isIOS","lastY","scrollX","pageXOffset","scrollY","pageYOffset","restoreStyles","chain","innerWidth","clientWidth","scrollTo","removeEvents","e","changedTouches","pageY","passive","capture","scrollHeight","preventDefault","activeElement","focus","requestAnimationFrame","once","preventScrollMobileSafari","usePreventScroll","dragProps","drag","dragElastic","dragConstraints","dragMomentum","dragPropagation","sheet","motion","div","AnimatePresence","child","key","ReactDOM","SheetContainer","refs","className","handleAnimationComplete","didOpen","useEventCallbacks","initialY","maxSnapHeight","forEach","maxHeight","initial","exit","onAnimationComplete","SheetContent","sheetScrollerContext","SheetHeader","_dragProps","indicator1Transform","r","indicator2Transform","span","isClickable","props","onClick","onTap","SheetBackdrop","Comp","button","opacity","SheetScroller","draggableAt","determineDragState","isAtTop","isAtBottom","scrollProps","navigator","maxTouchPoints","onScroll","currentTarget","onTouchStart","_SheetCompound","Container","Header","Content","Backdrop","Scroller"],"mappings":"+fAAO,IAAMA,EAAa,+CAEbC,EAA2B,oBAAXC,OAEhBC,EAAuB,CAClCC,KAAM,UACNC,SAAU,IAGCC,EAA8B,CACzCF,KAAM,SACNC,SAAU,cCTIE,EAAWC,EAAgBC,WACrCC,EAAUF,EAAK,GACfG,EAAgBC,KAAKC,IAAIL,EAAK,GAAKC,GAE9BK,EAAI,EAAGA,EAAIN,EAAKO,OAAQD,IAAK,KAC9BE,EAAaJ,KAAKC,IAAIL,EAAKM,GAAKL,GAClCO,EAAaL,IACfD,EAAUF,EAAKM,GACfH,EAAgBK,UAIbN,WAsBOO,EAAkBC,OAC1BC,EAAOC,SAASC,cAAc,QAC9BC,EAAOF,SAASG,eAAeL,GAUjCI,IAEFA,EAAKE,MAAMC,eAAe,2BAC1BH,EAAKE,MAAMC,eAAe,0BAC1BH,EAAKE,MAAMC,eAAe,aAG1BH,EAAKI,iBAAiB,0BAffC,IACPL,EAAKE,MAAMC,eAAe,YAC1BH,EAAKE,MAAMC,eAAe,eAC1BH,EAAKE,MAAMC,eAAe,cAC1BN,EAAKK,MAAMC,eAAe,oBAC1BH,EAAKM,oBAAoB,gBAAiBD,gBAsB9BE,SACdC,IAAAA,OACAC,IAAAA,mBAKID,EAAS,GACXE,QAAQC,qDAC0CF,yBAAiCA,EAC/EnB,KAAKC,IAAIiB,SAIRlB,KAAKsB,IAAItB,KAAKuB,MAAML,GAAS,OC3EzBM,EAA4BnC,EACrCoC,YACAA,2BAkEYC,EAAeC,OACvBC,EAAMH,kBAEZA,aAAgB,WACdG,EAAIC,QAAUF,KAGTC,EAAIC,iBAKGC,EAA4CC,OACpDC,EAAaP,kBAEnBD,GAA0B,WACxBQ,EAAWH,QAAUE,KAGhBN,eAAkB,mBACjBQ,EAAKD,EAAWH,2BADKK,2BAAAA,+BAEpBD,SAAAA,eAAQC,KACd,IC7FE,IAAMC,EAAeV,qBAC1BW,GAGWC,EAAkB,eACvBC,EAAUb,aAAiBU,OAC5BG,EAAS,MAAMC,MAAM,8BACnBD,GAGIE,EAAuBf,qBAElCW,YAEcK,SACdC,IAAAA,SAIMC,EAAeN,MACiBZ,aAClCkB,EAAaC,aADVA,OAAaC,cAalBpB,gBAACe,EAAqBM,UACpBC,MAAO,CAAEH,YAAAA,EAAaI,0BATnBL,EAAaC,aAAaC,GAAe,IASNI,2BALnCL,GAAaC,GAAe,MAO9BH,GAKA,ICbHQ,EDaSC,EAA0B,eAC/Bb,EAAUb,aAAiBe,OAC5BF,EAAS,MAAMC,MAAM,uCACnBD,GCjCHc,EAAmC,oBAAX9D,QAA0BA,OAAO8D,eAGzDC,EAAoB,IAAIC,IAAI,CAChC,WACA,QACA,QACA,QACA,OACA,QACA,SACA,SACA,UAIEC,EAAqB,EA8NzB,SAASC,EAASC,EAAc7C,EAAemC,OACzCW,EAAMD,EAAQ7C,MAAMA,UACxB6C,EAAQ7C,MAAMA,GAASmC,EAEhB,WACLU,EAAQ7C,MAAMA,GAAS8C,GAK3B,SAASC,EACPC,EACAC,EACA9B,EACA+B,UAEAF,EAAO9C,iBAAiB+C,EAAO9B,EAAgB+B,GACxC,WACLF,EAAO5C,oBAAoB6C,EAAO9B,EAAgB+B,IAItD,SAASC,EAAeH,WAClBlD,EAAOF,SAASwD,kBAAoBxD,SAASyD,gBAC1CL,GAAUA,IAAWlD,GAAM,KAE5BwD,EAAaC,kBAAgBP,MAE/BM,IAAe1D,SAASyD,iBACxBC,IAAe1D,SAASD,MACxB2D,IAAeN,EACf,KACIQ,EAAgBF,EAAWG,wBAAwBC,IACnDC,EAAYX,EAAOS,wBAAwBC,IAC3CC,EAAYH,EAAgBR,EAAOY,eACrCN,EAAWO,WAAaF,EAAYH,GAIxCR,EAASM,EAAWQ,eAIxB,SAASC,EAAiBf,UAErBA,aAAkBgB,mBAChBvB,EAAkBwB,IAAIjB,EAAOkB,OAChClB,aAAkBmB,qBACjBnB,aAAkBoB,aAAepB,EAAOqB,kBC1S7C,IAAMC,EAA4C,CAChDC,QAAS,CACPC,SAAU,QACVd,IAAK,EACLe,OAAQ,EACRC,KAAM,EACNC,MAAO,EACPC,SAAU,SACVC,cAAe,QAEjBC,SAAU,CACRC,OAAQ,EACRP,SAAU,QACVd,IAAK,EACLgB,KAAM,EACNM,MAAO,OACPC,OAAQ,OACRC,gBAAiB,qBACjBC,YAAa,OACbC,OAAQ,QAEVC,UAAW,CACTN,OAAQ,EACRP,SAAU,WACVE,KAAM,EACND,OAAQ,EACRO,MAAO,OACPE,gBAAiB,OACjBI,qBAAsB,MACtBC,oBAAqB,MACrBC,UAAW,mCACXC,QAAS,OACTC,cAAe,SACfb,cAAe,QAEjBc,cAAe,CACbX,MAAO,QAETY,OAAQ,CACNX,OAAQ,OACRD,MAAO,OACPR,SAAU,WACViB,QAAS,OACTI,WAAY,SACZC,eAAgB,UAElBC,UAAW,CACTf,MAAO,OACPC,OAAQ,MACRe,aAAc,OACdd,gBAAiB,QAEnBe,QAAS,CACPC,SAAU,EACVT,QAAS,OACTC,cAAe,SACfS,UAAW,MACX3B,SAAU,YAEZ4B,SAAU,CACRnB,OAAQ,OACRoB,UAAW,SC5BTC,EAAQzF,cACZ,WAqBEG,OAnBEuF,IAAAA,YACAC,IAAAA,UACAC,IAAAA,QACAC,IAAAA,aACAC,IAAAA,WACAC,IAAAA,OACA9E,IAAAA,SACA+E,IAAAA,OACAC,IAAAA,WACApH,IAAAA,OACAqH,IAAAA,WACA/G,IAAAA,UACAgH,OAAAA,aAAS,oBACTC,YAAAA,aAAc,QACdjF,YAAAA,oBACAkF,qBAAAA,oBACAC,YAAAA,aAAcxI,IACXyI,2NAICC,EAAWxG,SAAkB,MAC7ByG,EAAoBC,iBAAe,GACnCC,EJAV,iBAC0C3G,WAAe,GAAhD2G,OAAcC,cAErB7G,GAA0B,eAClB8G,EAAe,kBAAMD,EAAgB/I,OAAOiJ,qBAClDjJ,OAAOwB,iBAAiB,SAAUwH,GAClCA,IACO,kBAAMhJ,OAAO0B,oBAAoB,SAAUsH,MACjD,IAEIF,EIVgBI,GACfC,EAAqBC,qBACrBC,GAAeC,QAAQd,GAAwBW,GAC/CI,MACJ/D,KAAM,SACF6D,GAAejJ,EAA8BqI,GAM7Ce,GAAIX,iBAAe,GAEnBxC,GAASoD,eAAaD,IAAG,SAAA/F,UAC7BA,GAASqF,GAAgB,EAAI,WAGzBY,GAAaD,eAAaD,IAAG,SAAA/F,UACjCA,GAASqF,EAAe,SAAW,aAK/Ba,GAAYxH,SAAa,CAC7B0F,YAAAA,EACAC,UAAAA,EACAE,aAAAA,EACAC,WAAAA,IAGF/F,GAA0B,WACxByH,GAAUpH,QAAU,CAClBsF,YAAAA,EACAC,UAAAA,EACAE,aAAAA,EACAC,WAAAA,MAIAG,IAEFA,EAAaA,EAAWwB,KAAI,SAAAC,UAEtBA,EAAQ,GAAKA,GAAS,EAAUnJ,KAAKuB,MAAM4H,EAAQf,GAChDe,EAAQ,EAAIf,EAAee,EAAQA,KAG5C/H,QAAQgI,gBLjDoBC,OAC3B,IAAInJ,EAAI,EAAGA,EAAImJ,EAAIlJ,OAAQD,OAC1BmJ,EAAInJ,EAAI,GAAKmJ,EAAInJ,GAAI,OAAO,SAG3B,EK6CDoJ,CAAkB5B,IAAgC,IAAjBU,sDACmBV,YAIlD6B,GAASzH,GAAS,SAAC0H,SAAKC,IAAAA,MAEtBC,EAAWZ,GAAEa,cAEfD,EAAW,GAAGxB,EAAkB0B,IAAI,IACpCF,EAAW,GAAGxB,EAAkB0B,KAAK,IAGzCd,GAAEc,IAAI5J,KAAKsB,IAAIwH,GAAEe,MAAQJ,EAAMX,EAAG,OAG9BgB,GAAYhI,GAAS,SAAC0H,UAAKE,SAClBZ,EN9GoB,IMgH/BzB,QACK,KAEClG,EADU8G,EAASpG,QACGwC,wBAAwBwB,OAC9CkE,EAAWjB,GAAEe,MAEf3I,EAAS,KAETwG,EAAY,KACRsC,EAAetC,EAAWwB,KAC9B,SAAAe,UAAK9I,EAAcnB,KAAKkK,IAAID,EAAG9I,MAIlB,mBAAXyG,GAAgCoC,EAAaG,SAAS,IACxDH,EAAaI,QAAQ,GAIvBlJ,EAASvB,EAAWqK,EAAcD,QACzBA,EAAW5I,ENtIM,KMwI1BD,EAASC,MAGXD,EAASD,EAAe,CAAEC,OAAAA,EAAQC,YAAAA,IAGlCkJ,UAAQvB,GAAG5H,EAAQ2H,IAEfnB,GAAcF,EAAQ,KAClB8C,EAAYtK,KAAKC,IAAID,KAAKuB,MAAMmG,EAAW,GAAKxG,IAChDqJ,EAAY7C,EAAW8C,QAAQ7K,EAAW+H,EAAY4C,IAC5D9C,EAAO+C,GAIWrJ,GADOlB,KAAKuB,MAAMJ,IAGrBkG,IAInBa,EAAkB0B,IAAI,MAIxBnI,aAAgB,WACTiG,GAAeF,GAEpBA,EADkBC,EAASI,EAAcH,EAAWvH,OAAS,KAE5D,CAACsH,IAEJhG,sBAA0BG,GAAK,iBAAO,CACpCkH,EAAAA,GACA5H,OAAQ,SAACqJ,OACDE,EAAUxC,EAASpG,WAGvB6F,QAC0BtF,IAA1BsF,EAAW6C,IACC,OAAZE,EACA,KACMtJ,EAAcsJ,EAAQpG,wBAAwBwB,OAE9C3E,EAASD,EAAe,CAC5BC,OAAQC,EAFQuG,EAAW6C,GAG3BpJ,YAAAA,IAGFkJ,UAAQvB,GAAG5H,EAAQ2H,IACfrB,GAAQA,EAAO+C,GACfrJ,GAAUC,GAAakG,mBJ9LNI,EAAiBnH,OACxCoK,EAAWhJ,EAAY+F,GAG7BhG,aAAgB,WACVnB,IAAWoK,GAAYjD,WDECnH,OACxBC,EAAOC,SAASC,cAAc,QAC9BC,EAAOF,SAASC,kBAAkBH,MAEpCI,EAAM,KAEFiK,EAAIrL,OAAOiJ,YACXqC,GAAKD,EAFD,IAEUA,EACpBpK,EAAKK,MAAMkF,gBAAkB,OAC7BpF,EAAKE,MAAM4E,SAAW,SACtB9E,EAAKE,MAAMiK,WAAa,YACxBnK,EAAKE,MAAMkK,WACT,0DACFpK,EAAKE,MAAMmK,qEAA6EH,MACxFlK,EAAKE,MAAMsF,qBAAuB,OAClCxF,EAAKE,MAAMuF,oBAAsB,QChB/B6E,CAAgB1K,GACPA,IAAWmH,GAAUiD,GAC9BrK,EAAkBC,KAEnB,CAACmH,EAAQiD,IAGZjJ,aAAgB,kBACP,WACDnB,GAAUmH,GAAQpH,EAAkBC,MAEzC,CAACmH,IIkLFwD,CAAexD,EAAQnH,YFvKMwD,YAAAA,IAAAA,EAAgC,QACzDoH,EAAepH,EAAfoH,WAENC,mBAAgB,eACVD,SAKuB,KAD3B3H,IAGIL,EADEkI,UAuDV,eACMlH,EACAmH,EAAQ,EAyGRC,EAAUhM,OAAOiM,YACjBC,EAAUlM,OAAOmM,YAEjBC,EAAgBC,QAClBnI,EACEhD,SAASyD,gBACT,eACG3E,OAAOsM,WAAapL,SAASyD,gBAAgB4H,kBAElDrI,EAAShD,SAASyD,gBAAiB,WAAY,UAC/CT,EAAShD,SAASD,KAAM,gBAAiBiL,SAI3ClM,OAAOwM,SAAS,EAAG,OAEfC,EAAeJ,QACjBhI,EAASnD,SAAU,cAzHF,SAACwL,IAElB9H,EAAaC,kBAAgB6H,EAAEpI,WAEdpD,SAASyD,iBACxBC,IAAe1D,SAASD,OAK1B8K,EAAQW,EAAEC,eAAe,GAAGC,SA+GmB,CAC7CC,SAAS,EACTC,SAAS,IAEXzI,EAASnD,SAAU,aAhHH,SAACwL,MAGf9H,IAAe1D,SAASyD,iBACxBC,IAAe1D,SAASD,UAUtBuI,EAAIkD,EAAEC,eAAe,GAAGC,MACxBzH,EAAYP,EAAWO,UACvBY,EAASnB,EAAWmI,aAAenI,EAAWM,aAGnC,IAAXa,KAICZ,GAAa,GAAKqE,EAAIuC,GAAW5G,GAAaY,GAAUyD,EAAIuC,IAC/DW,EAAEM,iBAGJjB,EAAQvC,QArBNkD,EAAEM,mBA0GyC,CAC3CH,SAAS,EACTC,SAAS,IAEXzI,EAASnD,SAAU,YAtFJ,SAACwL,OACZpI,EAASoI,EAAEpI,OAGXe,EAAiBf,IAAWA,IAAWpD,SAAS+L,gBAClDP,EAAEM,iBAKF1I,EAAOhD,MAAMmK,UAAY,sBACzBnH,EAAO4I,QACPC,uBAAsB,WACpB7I,EAAOhD,MAAMmK,UAAY,SAyEc,CACzCoB,SAAS,EACTC,SAAS,IAEXzI,EAASnD,SAAU,SAxEP,SAACwL,OACTpI,EAASoI,EAAEpI,OACXe,EAAiBf,KAKnBA,EAAOhD,MAAMmK,UAAY,sBACzB0B,uBAAsB,WACpB7I,EAAOhD,MAAMmK,UAAY,GAIrB3H,IACEA,EAAeyC,OAASvG,OAAOiJ,YAGjCkE,uBAAsB,WACpB1I,EAAeH,MAKjBR,EAAetC,iBACb,UACA,kBAAMiD,EAAeH,KACrB,CAAE8I,MAAM,YA8CmB,GACrC/I,EAASrE,OAAQ,UAvCE,WAGnBA,OAAOwM,SAAS,EAAG,cAuCd,WAELJ,IACAK,IACAzM,OAAOwM,SAASR,EAASE,IAtMXmB,GAkBThB,QACLnI,EACEhD,SAASyD,gBACT,eACG3E,OAAOsM,WAAapL,SAASyD,gBAAgB4H,kBAElDrI,EAAShD,SAASyD,gBAAiB,WAAY,YAlBxC,WAEsB,KAD3BV,GAEEL,OAGH,CAACgI,IEoJF0B,CAAiB,CAAE1B,YAAazD,QAE1BoF,GAAYpL,WAAc,kBAWvBmB,OAAcR,EAV4B,CAC/C0K,KAAM,IACNC,YAAa,EACbC,gBAAiB,CAAE1I,IAAK,EAAGe,OAAQ,GACnC4H,cAAc,EACdC,iBAAiB,EACjB3D,OAAAA,GACAO,UAAAA,MAID,CAAClH,IAkBEuK,GACJ1L,gBAACU,EAAaW,UAASC,MAjBS,CAChC+F,EAAAA,GACAb,SAAAA,EACAR,OAAAA,EACAI,YAAAA,EACAH,WAAAA,EACAE,OAAAA,EACAM,kBAAAA,EACAe,UAAAA,GACA4D,UAAAA,GACAzE,aAAAA,EACAS,iBAAAA,GACAF,aAAAA,GACA/F,YAAAA,IAKEnB,gBAAC2L,SAAOC,qBACFrF,GACJpG,IAAKA,EACLhB,WAAYsE,EAAOC,SAASQ,OAAAA,GAAQqD,WAAAA,IAAepI,KAEnDa,gBAAC6L,uBAEE7F,EACChG,gBAACgB,OACEhB,WAAeyH,IAAIxG,GAAU,SAAC6K,EAAYrN,UACzCuB,eAAmB8L,EAAO,CAAEC,mBAAoBtN,QAGlD,eAMRb,EAAe8N,GAEZM,eAAsBN,SAAOxF,EAAAA,EAAcnH,SAASD,SC9PzDmN,EAAiBjM,cACrB,WAAoDG,ON0EpD+L,EM1EGjL,IAAAA,aAAU9B,MAAAA,aAAQ,SAAIgN,UAAAA,aAAY,KAAO5F,0CAYtC3F,IAVFyG,IAAAA,EAGApB,IAAAA,eACAG,YAAAA,aAAc,IACdI,IAAAA,SACAG,IAAAA,aACAR,IAAAA,OACAiB,IAAAA,iBACAF,IAAAA,aAGMkF,WLMVpG,EACAwB,OAEMyB,EAAWhJ,EAAY+F,GACvBqG,EAAUrM,UAAa,GAKvBoM,EAA0BpM,eAAkB,WAC3CqM,EAAQjM,eAIXoH,EAAUpH,QAAQ0F,YAAlB0B,EAAUpH,QAAQ0F,aAClBuG,EAAQjM,SAAU,UAJlBoH,EAAUpH,QAAQuF,WAAlB6B,EAAUpH,QAAQuF,YAClB0G,EAAQjM,SAAU,KAKnB,CAAC4F,EAAQiD,WAEZjJ,aAAgB,YACTiJ,GAAYjD,QACfwB,EAAUpH,QAAQsF,aAAlB8B,EAAUpH,QAAQsF,eACRM,GAAUiD,UACpBzB,EAAUpH,QAAQyF,cAAlB2B,EAAUpH,QAAQyF,kBAEnB,CAACG,EAAQiD,IAEL,CAAEmD,wBAAAA,GKjC6BE,GAXlCtG,SACAwB,WAUM4E,wBACFG,EAAWtG,EAAaA,EAAW,GAAKA,EAAWG,GAAe,EAClEoG,EAAgBvG,EAAaA,EAAW,GAAK,KAE7C7B,EACc,OAAlBoI,SACWA,SAAoB7O,MAC3BA,SAGJqC,gBAAC2L,SAAOC,qBACFrF,GACJpG,KNgDN+L,EMhDqB,CAAC1F,EAAUrG,GNkDzB,SAACmB,GACN4K,EAAKO,SAAQ,SAACtM,GACO,mBAARA,EACTA,EAAImB,GACKnB,IACTA,EAAIC,QAAUkB,QMtDd6K,yCAA0CA,EAC1ChN,WACKsE,EAAOe,UACPrF,EACY,gBAAXgH,GAA4B,CAAE/B,OAAAA,GACnB,mBAAX+B,GAA+B,CAAEuG,UAAWtI,IAChDiD,EAAAA,IAEFsF,SAASzF,GAAuB,CAAEG,EAAGV,GACrCiC,QAAS,CAAEvB,EAAGkF,EAAUlD,WAAYjC,GACpCwF,KAAM,CAAEvF,EAAGV,EAAc0C,WAAYjC,GACrCyF,oBAAqBT,IAEpBnL,MC5CH6L,EAAe9M,cACnB,WAA4DG,OAAzDc,IAAAA,SAAU9B,IAAAA,MAAOgC,IAAAA,gBAAagL,UAAAA,aAAY,KAAO5F,sDAC5CrF,EAAeN,IACfmM,EAAuBrL,IAEvB0J,EACJjK,GAAe4L,EAAqB5L,iBAChCR,EACAO,EAAakK,iBAGjBpL,gBAAC2L,SAAOC,qBACFrF,GACJpG,IAAKA,EACLgM,uCAAwCA,EACxChN,WAAYsE,EAAO2B,QAAYjG,IAC3BiM,GAEHnK,MClBH+L,EAAchN,cAClB,WAA4CG,OAAzCc,IAAAA,SAAU9B,IAAAA,MAAOgC,IAAAA,YAAgBoF,4CACO3F,IAAjC6F,IAAAA,kBACFwG,EAAa9L,OAAcR,IADNyK,UAGrB8B,EAAsB5F,eAC1Bb,GACA,SAAA0G,mCAA+BA,YAG3BC,EAAsB9F,eAC1Bb,GACA,SAAA0G,qCAAiC,EAAIA,mBAIrCnN,gBAAC2L,SAAOC,qBACFrF,GACJpG,IAAKA,EACLhB,WAAYsE,EAAOqB,cAAkB3F,IACjC8N,GAEHhM,GACCjB,uBAAKmM,UAAU,2BAA2BhN,MAAOsE,EAAOsB,QACtD/E,gBAAC2L,SAAO0B,MACNlB,UAAU,mCACVhN,WAAYsE,EAAOyB,WAAWoE,UAAW4D,MAE3ClN,gBAAC2L,SAAO0B,MACNlB,UAAU,mCACVhN,WAAYsE,EAAOyB,WAAWoE,UAAW8D,WC/BjDE,EAAc,SAACC,WAAiBA,EAAMC,WAAaD,EAAME,OAEzDC,EAAgB1N,cACpB,WAA0CG,WAAvChB,MAAAA,aAAQ,SAAIgN,UAAAA,aAAY,KAAO5F,6BAC1BoH,EAAOL,EAAY/G,GAAQoF,SAAOiC,OAASjC,SAAOC,IAClD5H,EAAgBsJ,EAAY/G,GAAQ,OAAS,cAGjDvG,gBAAC2N,mBACKpH,GACJpG,IAAKA,EACLgM,wCAAyCA,EACzChN,WAAYsE,EAAOQ,SAAa9E,GAAO6E,cAAAA,IACvC2I,QAAS,CAAEkB,QAAS,GACpBjF,QAAS,CAAEiF,QAAS,GACpBjB,KAAM,CAAEiB,QAAS,SCdnBC,EAAgB9N,cACpB,WAAoEG,WAAjE4N,YAAAA,aAAc,QAAO9M,IAAAA,SAAU9B,IAAAA,UAAOgN,UAAAA,aAAY,KAAO5F,sDACpDwG,EAAuBrL,aAEpBsM,EAAmBhM,OAClBgB,EAA0ChB,EAA1CgB,UAAW4H,EAA+B5I,EAA/B4I,aAAc7H,EAAiBf,EAAjBe,gBACZ6H,EAAe7H,OAI9BkL,EAAUjL,GAAa,EACvBkL,EAAatD,EAAe5H,IAAcD,EAG7B,QAAhBgL,GAAyBE,GACT,WAAhBF,GAA4BG,GACZ,SAAhBH,IAA2BE,GAAWC,GAGvCnB,EAAqBxL,iBAErBwL,EAAqBvL,uBAYnB2M,EV2Dc,oBAAXtQ,SACJ,iBAAkBA,QAAUuQ,UAAUC,eAAiB,GU3DxD,CAAEC,kBATY/D,GAChByD,EAAmBzD,EAAEgE,gBAQPC,sBALMjE,GACpByD,EAAmBzD,EAAEgE,sBAKnB5N,SAGFX,uCACMuG,GACJpG,IAAKA,EACLgM,wCAAyCA,EACzChN,WAAYsE,EAAO8B,SAAapG,IAC5BgP,GAEHlN,MCpCHwN,EAAsBhJ,EAC5BgJ,EAAeC,UAAYzC,EAC3BwC,EAAeE,OAAS3B,EACxByB,EAAeG,QAAU9B,EACzB2B,EAAeI,SAAWnB,EAC1Be,EAAeK,SAAWhB"}

package/dist/react-modal-sheet.esm.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useLayoutEffect, useRef, useState, createContext, useContext, forwardRef, useImperativeHandle, useMemo, createElement, Children, cloneElement } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, createContext, useContext, createElement, forwardRef, useImperativeHandle, useMemo, Children, cloneElement } from 'react';
 import { createPortal } from 'react-dom';
 import { useMotionValue, useReducedMotion, useTransform, animate, motion, AnimatePresence } from 'framer-motion';
 import { useLayoutEffect as useLayoutEffect$1, isIOS, chain, getScrollParent } from '@react-aria/utils';
@@ -38,10 +38,13 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 
 var MAX_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';
 var IS_SSR = typeof window === 'undefined';
-var DEFAULT_SPRING_CONFIG = {
-  stiffness: 300,
-  damping: 30,
-  mass: 0.2
+var DEFAULT_TWEEN_CONFIG = {
+  ease: 'easeOut',
+  duration: 0.2
+};
+var REDUCED_MOTION_TWEEN_CONFIG = {
+  ease: 'linear',
+  duration: 0.01
 };
 var DRAG_CLOSE_THRESHOLD = 0.6;
 var DRAG_VELOCITY_THRESHOLD = 500;
@@ -61,7 +64,6 @@ function getClosest(nums, goal) {
 
   return closest;
 }
-var highlightId = 'react-modal-sheet-highlight';
 function applyRootStyles(rootId) {
   var body = document.querySelector('body');
   var root = document.querySelector("#" + rootId);
@@ -73,51 +75,30 @@ function applyRootStyles(rootId) {
     body.style.backgroundColor = '#000';
     root.style.overflow = 'hidden';
     root.style.willChange = 'transform';
-    root.style.transition = 'transform 200ms linear';
+    root.style.transition = 'transform 200ms ease-in-out, border-radius 200ms linear';
     root.style.transform = "translateY(calc(env(safe-area-inset-top) + " + p / 2 + "px)) scale(" + s + ")"; // prettier-ignore
 
     root.style.borderTopRightRadius = '10px';
-    root.style.borderTopLeftRadius = '10px'; // Add highlighed overlay to emphasize the modality effect
-
-    var highlight = document.createElement('div');
-    highlight.setAttribute('aria-hidden', 'true');
-    highlight.id = highlightId;
-    highlight.style.position = 'absolute';
-    highlight.style.top = '0px';
-    highlight.style.left = '0px';
-    highlight.style.bottom = '0px';
-    highlight.style.right = '0px';
-    highlight.style.opacity = '0';
-    highlight.style.transition = 'opacity 200ms linear';
-    highlight.style.backgroundColor = 'rgba(150, 150, 150, 0.1)';
-    root.appendChild(highlight);
-    requestAnimationFrame(function () {
-      return highlight.style.opacity = '1';
-    });
+    root.style.borderTopLeftRadius = '10px';
   }
 }
 function cleanupRootStyles(rootId) {
   var body = document.querySelector('body');
   var root = document.getElementById(rootId);
-  var highlight = document.getElementById(highlightId);
 
   function onTransitionEnd() {
-    var _highlight$parentNode;
-
     root.style.removeProperty('overflow');
     root.style.removeProperty('will-change');
     root.style.removeProperty('transition');
     body.style.removeProperty('background-color');
     root.removeEventListener('transitionend', onTransitionEnd);
-    (_highlight$parentNode = highlight.parentNode) == null ? void 0 : _highlight$parentNode.removeChild(highlight);
   }
 
-  if (root && highlight) {
+  if (root) {
     // Start animating back
     root.style.removeProperty('border-top-right-radius');
     root.style.removeProperty('border-top-left-radius');
-    root.style.removeProperty('transform');
-    highlight.style.opacity = '0'; // Remove temp properties after animation is finished
+    root.style.removeProperty('transform'); // Remove temp properties after animation is finished
 
     root.addEventListener('transitionend', onTransitionEnd);
   }
@@ -150,9 +131,13 @@ function mergeRefs(refs) {
     });
   };
 }
+function isTouchDevice() {
+  if (typeof window === 'undefined') return false;
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+}
 
 var useIsomorphicLayoutEffect = IS_SSR ? useEffect : useLayoutEffect;
-var useModalEffect = function useModalEffect(isOpen, rootId) {
+function useModalEffect(isOpen, rootId) {
   var prevOpen = usePrevious(isOpen); // Automatically apply the iOS modal effect to the body when sheet opens/closes
 
   useEffect(function () {
@@ -169,8 +154,8 @@ var useModalEffect = function useModalEffect(isOpen, rootId) {
       if (rootId && isOpen) cleanupRootStyles(rootId);
     };
   }, [isOpen]); // eslint-disable-line
-};
-var useEventCallbacks = function useEventCallbacks(isOpen, callbacks) {
+}
+function useEventCallbacks(isOpen, callbacks) {
   var prevOpen = usePrevious(isOpen);
   var didOpen = useRef(false); // Because of AnimatePrecence we don't have access to latest isOpen value
   // so we need to read and write to a ref to determine if we are
@@ -197,7 +182,7 @@ var useEventCallbacks = function useEventCallbacks(isOpen, callbacks) {
   return {
     handleAnimationComplete: handleAnimationComplete
   };
-};
+}
 function useWindowHeight() {
   var _React$useState = useState(0),
       windowHeight = _React$useState[0],
@@ -247,6 +232,36 @@ var useSheetContext = function useSheetContext() {
   if (!context) throw Error('Sheet context error');
   return context;
 };
+var SheetScrollerContext = /*#__PURE__*/createContext(undefined);
+function SheetScrollerContextProvider(_ref) {
+  var children = _ref.children;
+  var sheetContext = useSheetContext();
+
+  var _React$useState = useState(!!sheetContext.disableDrag),
+      disableDrag = _React$useState[0],
+      setDisableDrag = _React$useState[1];
+
+  function setDragEnabled() {
+    if (!sheetContext.disableDrag) setDisableDrag(false);
+  }
+
+  function setDragDisabled() {
+    if (!disableDrag) setDisableDrag(true);
+  }
+
+  return createElement(SheetScrollerContext.Provider, {
+    value: {
+      disableDrag: disableDrag,
+      setDragEnabled: setDragEnabled,
+      setDragDisabled: setDragDisabled
+    }
+  }, children);
+}
+var useSheetScrollerContext = function useSheetScrollerContext() {
+  var context = useContext(SheetScrollerContext);
+  if (!context) throw Error('Sheet scroller context error');
+  return context;
+};
 
 // Source: https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/overlays/src/usePreventScroll.ts
 
@@ -506,7 +521,7 @@ var styles = {
     left: 0,
     width: '100%',
     height: '100%',
-    backgroundColor: 'rgba(51, 51, 51, 0.5)',
+    backgroundColor: 'rgba(0, 0, 0, 0.2)',
     touchAction: 'none',
     border: 'none'
   },
@@ -542,9 +557,15 @@ var styles = {
     backgroundColor: '#ddd'
   },
   content: {
-    flex: 1,
-    overflow: 'auto',
+    flexGrow: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: '0px',
     position: 'relative'
+  },
+  scroller: {
+    height: '100%',
+    overflowY: 'auto'
   }
 };
 
@@ -565,28 +586,27 @@ var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
       detent = _ref$detent === void 0 ? 'full-height' : _ref$detent,
       _ref$initialSnap = _ref.initialSnap,
       initialSnap = _ref$initialSnap === void 0 ? 0 : _ref$initialSnap,
-      _ref$springConfig = _ref.springConfig,
-      springConfig = _ref$springConfig === void 0 ? DEFAULT_SPRING_CONFIG : _ref$springConfig,
       _ref$disableDrag = _ref.disableDrag,
       disableDrag = _ref$disableDrag === void 0 ? false : _ref$disableDrag,
       _ref$prefersReducedMo = _ref.prefersReducedMotion,
       prefersReducedMotion = _ref$prefersReducedMo === void 0 ? false : _ref$prefersReducedMo,
-      rest = _objectWithoutPropertiesLoose(_ref, ["onOpenStart", "onOpenEnd", "onClose", "onCloseStart", "onCloseEnd", "onSnap", "children", "isOpen", "snapPoints", "rootId", "mountPoint", "style", "detent", "initialSnap", "springConfig", "disableDrag", "prefersReducedMotion"]);
+      _ref$tweenConfig = _ref.tweenConfig,
+      tweenConfig = _ref$tweenConfig === void 0 ? DEFAULT_TWEEN_CONFIG : _ref$tweenConfig,
+      rest = _objectWithoutPropertiesLoose(_ref, ["onOpenStart", "onOpenEnd", "onClose", "onCloseStart", "onCloseEnd", "onSnap", "children", "isOpen", "snapPoints", "rootId", "mountPoint", "style", "detent", "initialSnap", "disableDrag", "prefersReducedMotion", "tweenConfig"]);
 
   var sheetRef = useRef(null);
   var indicatorRotation = useMotionValue(0);
   var windowHeight = useWindowHeight();
   var shouldReduceMotion = useReducedMotion();
   var reduceMotion = Boolean(prefersReducedMotion || shouldReduceMotion);
-  var animationOptions = reduceMotion ? {
-    type: 'tween',
-    duration: 0.01
-  } : _extends({
-    type: 'spring'
-  }, springConfig); // NOTE: the inital value for `y` doesn't matter since it is overwritten by
+
+  var animationOptions = _extends({
+    type: 'tween'
+  }, reduceMotion ? REDUCED_MOTION_TWEEN_CONFIG : tweenConfig); // NOTE: the inital value for `y` doesn't matter since it is overwritten by
   // the value driven by the `AnimatePresence` component when the sheet is opened
   // and after that it is driven by the gestures and/or snapping
 
+
   var y = useMotionValue(0);
   var zIndex = useTransform(y, function (value) {
     return value >= windowHeight ? -1 : 9999999;
@@ -741,7 +761,8 @@ var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     dragProps: dragProps,
     windowHeight: windowHeight,
     animationOptions: animationOptions,
-    reduceMotion: reduceMotion
+    reduceMotion: reduceMotion,
+    disableDrag: disableDrag
   };
   var sheet = createElement(SheetContext.Provider, {
     value: context
@@ -751,11 +772,11 @@ var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
       zIndex: zIndex,
       visibility: visibility
     }, style)
-  }), createElement(AnimatePresence, null, isOpen ? Children.map(children, function (child, i) {
+  }), createElement(AnimatePresence, null, isOpen ? createElement(SheetScrollerContextProvider, null, Children.map(children, function (child, i) {
     return cloneElement(child, {
       key: "sheet-child-" + i
     });
-  }) : null)));
+  })) : null)));
   if (IS_SSR) return sheet;
   return createPortal(sheet, mountPoint != null ? mountPoint : document.body);
 });
@@ -820,16 +841,14 @@ var SheetContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
       className = _ref$className === void 0 ? '' : _ref$className,
       rest = _objectWithoutPropertiesLoose(_ref, ["children", "style", "disableDrag", "className"]);
 
-  var _useSheetContext = useSheetContext(),
-      dragProps = _useSheetContext.dragProps;
-
-  var _dragProps = disableDrag ? undefined : dragProps;
-
+  var sheetContext = useSheetContext();
+  var sheetScrollerContext = useSheetScrollerContext();
+  var dragProps = disableDrag || sheetScrollerContext.disableDrag ? undefined : sheetContext.dragProps;
   return createElement(motion.div, Object.assign({}, rest, {
     ref: ref,
     className: "react-modal-sheet-content " + className,
     style: _extends({}, styles.content, style)
-  }, _dragProps), children);
+  }, dragProps), children);
 });
 
 var SheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -900,11 +919,59 @@ var SheetBackdrop = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
+var SheetScroller = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$draggableAt = _ref.draggableAt,
+      draggableAt = _ref$draggableAt === void 0 ? 'top' : _ref$draggableAt,
+      children = _ref.children,
+      style = _ref.style,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      rest = _objectWithoutPropertiesLoose(_ref, ["draggableAt", "children", "style", "className"]);
+
+  var sheetScrollerContext = useSheetScrollerContext();
+
+  function determineDragState(element) {
+    var scrollTop = element.scrollTop,
+        scrollHeight = element.scrollHeight,
+        clientHeight = element.clientHeight;
+    var isScrollable = scrollHeight > clientHeight;
+    if (!isScrollable) return;
+    var isAtTop = scrollTop <= 0;
+    var isAtBottom = scrollHeight - scrollTop === clientHeight;
+    var shouldEnable = draggableAt === 'top' && isAtTop || draggableAt === 'bottom' && isAtBottom || draggableAt === 'both' && (isAtTop || isAtBottom);
+
+    if (shouldEnable) {
+      sheetScrollerContext.setDragEnabled();
+    } else {
+      sheetScrollerContext.setDragDisabled();
+    }
+  }
+
+  function onScroll(e) {
+    determineDragState(e.currentTarget);
+  }
+
+  function onTouchStart(e) {
+    determineDragState(e.currentTarget);
+  }
+
+  var scrollProps = isTouchDevice() ? {
+    onScroll: onScroll,
+    onTouchStart: onTouchStart
+  } : undefined;
+  return createElement("div", Object.assign({}, rest, {
+    ref: ref,
+    className: "react-modal-sheet-scroller " + className,
+    style: _extends({}, styles.scroller, style)
+  }, scrollProps), children);
+});
+
 var _SheetCompound = Sheet;
 _SheetCompound.Container = SheetContainer;
 _SheetCompound.Header = SheetHeader;
 _SheetCompound.Content = SheetContent;
 _SheetCompound.Backdrop = SheetBackdrop;
+_SheetCompound.Scroller = SheetScroller;
 
 export default _SheetCompound;
 //# sourceMappingURL=react-modal-sheet.esm.js.map