react-modal-sheet 1.3.1 → 1.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -15
- package/dist/SheetBackdrop.d.ts +1 -1
- package/dist/SheetContainer.d.ts +1 -1
- package/dist/react-modal-sheet.cjs.development.js +78 -50
- package/dist/react-modal-sheet.cjs.development.js.map +1 -1
- package/dist/react-modal-sheet.cjs.production.min.js +1 -1
- package/dist/react-modal-sheet.cjs.production.min.js.map +1 -1
- package/dist/react-modal-sheet.esm.js +80 -52
- package/dist/react-modal-sheet.esm.js.map +1 -1
- package/dist/sheet.d.ts +1 -1
- package/dist/types.d.ts +2 -1
- package/dist/utils.d.ts +3 -1
- package/package.json +9 -9
- package/src/SheetBackdrop.tsx +2 -1
- package/src/SheetContainer.tsx +8 -3
- package/src/sheet.tsx +48 -60
- package/src/styles.ts +2 -0
- package/src/types.tsx +2 -1
- package/src/utils.ts +26 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-modal-sheet.cjs.production.min.js","sources":["../src/utils.ts","../src/context.tsx","../src/hooks.tsx","../src/styles.ts","../src/sheet.tsx","../src/SheetContainer.tsx","../src/SheetContent.tsx","../src/SheetHeader.tsx","../src/SheetBackdrop.tsx","../src/index.tsx"],"sourcesContent":["export const isBrowser = typeof window !== 'undefined';\n\nexport const getClosest = (nums: number[], goal: number) => {\n return nums.reduce((prev, curr) => {\n return Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev;\n });\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","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","import * as React from 'react';\n\nimport { SheetEvents } from './types';\nimport { applyRootStyles, cleanupRootStyles } from './utils';\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\nconst 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","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 zIndex: 9999999,\n overflow: 'hidden',\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 },\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 },\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';\n\nimport {\n useSpring,\n useMotionValue,\n AnimatePresence,\n PanInfo,\n} from 'framer-motion';\n\nimport { SheetProps } from './types';\nimport { getClosest, isBrowser } from './utils';\nimport { SheetContext } from './context';\nimport { useModalEffect } from './hooks';\nimport styles from './styles';\n\nconst Sheet = React.forwardRef<any, SheetProps>(\n (\n {\n children,\n isOpen,\n onClose,\n onOpenStart,\n onOpenEnd,\n onCloseStart,\n onCloseEnd,\n onSnap,\n snapPoints,\n initialSnap = 0,\n rootId,\n springConfig = { stiffness: 300, damping: 30, mass: 0.2 },\n disableDrag = false,\n ...rest\n },\n ref\n ) => {\n const [mounted, setMounted] = React.useState(false);\n const [isDragging, setDragging] = React.useState(false);\n const sheetRef = React.useRef<any>(null);\n const callbacks = React.useRef({ onOpenStart, onOpenEnd, onCloseStart, onCloseEnd }); // prettier-ignore\n const indicatorRotation = useMotionValue(0);\n const sheetDragY = useMotionValue(isBrowser ? window.innerHeight : 0);\n const sheetSpringY = useSpring(sheetDragY, springConfig);\n const y = isDragging ? sheetDragY : sheetSpringY;\n const pointerEvents = isOpen ? 'auto' : 'none';\n\n const handleDrag = React.useCallback((_, { delta }: PanInfo) => {\n // Update drag indicator rotation based on drag velocity\n const velocity = sheetDragY.getVelocity();\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 sheetDragY.set(Math.max(sheetDragY.get() + delta.y, 0));\n }, []); // eslint-disable-line\n\n const handleDragStart = React.useCallback(() => {\n // Sync the drag value with the spring value so that dragging start at the correct y position\n sheetDragY.set(sheetSpringY.get());\n setDragging(true);\n }, []); // eslint-disable-line\n\n const handleDragEnd = React.useCallback(\n (_, { velocity }: PanInfo) => {\n if (velocity.y > 500) {\n // User flicked the sheet down\n onClose();\n } else {\n const sheetEl = sheetRef.current as HTMLDivElement;\n const contentHeight = sheetEl.getBoundingClientRect().height;\n const snapTo = snapPoints\n ? getClosest(\n snapPoints.map(p => contentHeight - p),\n sheetDragY.get()\n )\n : sheetDragY.get() / contentHeight > 0.6 // Close if dragged over 60%\n ? contentHeight\n : 0;\n\n // Update the spring value so that the sheet is animated to the snap point\n sheetSpringY.set(snapTo);\n\n if (snapPoints && onSnap) {\n const snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));\n const snapIndex = snapPoints.indexOf(snapValue);\n onSnap(snapIndex);\n }\n\n if (snapTo >= contentHeight) onClose();\n\n setDragging(false);\n }\n\n // Reset indicator rotation after dragging\n indicatorRotation.set(0);\n },\n [onClose, onSnap] // eslint-disable-line\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 React.useEffect(() => {\n callbacks.current = { onOpenStart, onOpenEnd, onCloseStart, onCloseEnd };\n });\n\n React.useEffect(() => {\n setMounted(true);\n }, []);\n\n // Trigger onSnap callback when sheet is opened or closed\n React.useEffect(() => {\n if (!snapPoints || !onSnap || !mounted) return;\n const snapIndex = isOpen ? initialSnap : snapPoints.length - 1;\n onSnap(snapIndex);\n }, [isOpen]);\n\n React.useImperativeHandle(ref, () => ({\n snapTo: (snapIndex: number) => {\n if (snapPoints && snapPoints[snapIndex] !== undefined) {\n const sheetEl = sheetRef.current as HTMLDivElement;\n const contentHeight = sheetEl.getBoundingClientRect().height;\n const snapTo = contentHeight - snapPoints[snapIndex];\n\n sheetSpringY.set(snapTo);\n if (onSnap) onSnap(snapIndex);\n if (snapTo >= contentHeight) onClose();\n }\n },\n }));\n\n useModalEffect(isOpen, rootId);\n\n const dragProps = disableDrag\n ? ({} as any)\n : {\n drag: 'y' as const,\n dragElastic: 0,\n dragConstraints: { top: 0, bottom: 0 },\n dragMomentum: false,\n onDrag: handleDrag,\n onDragStart: handleDragStart,\n onDragEnd: handleDragEnd,\n };\n\n const context = {\n y,\n sheetRef,\n isOpen,\n isDragging,\n initialSnap,\n snapPoints,\n indicatorRotation,\n callbacks,\n dragProps,\n };\n\n const wrapperProps = {\n ...rest,\n ref,\n style: {\n ...styles.wrapper,\n pointerEvents,\n } as any,\n };\n\n return mounted ? (\n ReactDOM.createPortal(\n <SheetContext.Provider value={context}>\n <div {...wrapperProps}>\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 </div>\n </SheetContext.Provider>,\n document.body\n )\n ) : (\n // NOTE: return the wrapper div so that SSR frameworks don't get confused\n // with the HTML structure (\"Expected server HTML to contain a matching <div>...\")\n <div {...wrapperProps} />\n );\n }\n);\n\nexport default Sheet;\n","import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport mergeRefs from 'react-merge-refs';\n\nimport { SheetContainerProps } from './types';\nimport { useSheetContext } from './context';\nimport { useEventCallbacks } from './hooks';\nimport styles from './styles';\n\nconst MAX_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';\n\nconst SheetContainer = React.forwardRef<any, SheetContainerProps>(\n ({ children, style = {}, ...rest }, ref) => {\n const {\n y,\n isOpen,\n callbacks,\n snapPoints,\n initialSnap = 0,\n sheetRef,\n } = useSheetContext();\n\n const { handleAnimationComplete } = useEventCallbacks(isOpen, callbacks);\n const initialY = snapPoints ? snapPoints[0] - snapPoints[initialSnap] : 0;\n const h = snapPoints ? snapPoints[0] : null;\n const sheetHeight = h ? `min(${h}px, ${MAX_HEIGHT})` : MAX_HEIGHT;\n\n return (\n <motion.div\n {...rest}\n ref={mergeRefs([sheetRef, ref])}\n className=\"react-modal-sheet-container\"\n style={{ ...styles.container, height: sheetHeight, ...style, y }}\n initial={{ y: window.innerHeight }}\n animate={{ y: initialY, transition: { type: 'tween' } }}\n exit={{ y: window.innerHeight }}\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 styles from './styles';\nimport { useSheetContext } from './context';\n\nconst SheetContent = React.forwardRef<any, SheetDraggableProps>(\n ({ children, disableDrag = false, style = {}, ...rest }, ref) => {\n const { dragProps } = useSheetContext();\n\n return (\n <motion.div\n {...rest}\n ref={ref}\n className=\"react-modal-sheet-content\"\n style={{ ...styles.content, ...style }}\n {...(disableDrag ? {} : 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, disableDrag = false, style = {}, ...rest }, ref) => {\n const { indicatorRotation, dragProps } = useSheetContext();\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 {...(disableDrag ? {} : 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 = {}, ...rest }, ref) => {\n const Comp = isClickable(rest) ? motion.button : motion.div;\n\n return (\n <Comp\n {...rest}\n ref={ref}\n className=\"react-modal-sheet-backdrop\"\n style={{ ...styles.backdrop, ...style }}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n />\n );\n }\n);\n\nexport default SheetBackdrop;\n","import Sheet from './sheet';\nimport SheetContainer from './SheetContainer';\nimport SheetContent from './SheetContent';\nimport SheetHeader from './SheetHeader';\nimport SheetBackdrop from './SheetBackdrop';\n\nexport type SheetRef = {\n snapTo: (index: number) => void;\n};\n\ntype SheetCompoundComponent = {\n Container: typeof SheetContainer;\n Header: typeof SheetHeader;\n Content: typeof SheetContent;\n Backdrop: typeof SheetBackdrop;\n};\n\n// HACK: this is needed to get the typing to work properly...\nconst _Sheet: any = Sheet;\n_Sheet.Container = SheetContainer;\n_Sheet.Header = SheetHeader;\n_Sheet.Content = SheetContent;\n_Sheet.Backdrop = SheetBackdrop;\n\nconst SheetCompound: typeof Sheet & SheetCompoundComponent = _Sheet;\n\nexport default SheetCompound;\n"],"names":["isBrowser","window","cleanupRootStyles","rootId","body","document","querySelector","root","getElementById","highlight","style","removeProperty","opacity","addEventListener","onTransitionEnd","removeEventListener","parentNode","removeChild","SheetContext","React","undefined","useSheetContext","context","Error","usePrevious","state","ref","current","styles","wrapper","position","top","bottom","left","right","zIndex","overflow","backdrop","width","height","backgroundColor","touchAction","container","borderTopRightRadius","borderTopLeftRadius","boxShadow","display","flexDirection","headerWrapper","header","alignItems","justifyContent","indicator","borderRadius","content","flex","Sheet","children","isOpen","onClose","onOpenStart","onOpenEnd","onCloseStart","onCloseEnd","onSnap","snapPoints","initialSnap","springConfig","stiffness","damping","mass","disableDrag","rest","mounted","setMounted","isDragging","setDragging","sheetRef","callbacks","indicatorRotation","useMotionValue","sheetDragY","innerHeight","sheetSpringY","useSpring","y","pointerEvents","handleDrag","_","delta","velocity","getVelocity","set","Math","max","get","handleDragStart","handleDragEnd","nums","goal","contentHeight","getBoundingClientRect","snapTo","map","p","reduce","prev","curr","abs","snapValue","round","snapIndex","indexOf","length","prevOpen","h","s","willChange","transition","transform","createElement","setAttribute","id","appendChild","requestAnimationFrame","applyRootStyles","useModalEffect","dragProps","drag","dragElastic","dragConstraints","dragMomentum","onDrag","onDragStart","onDragEnd","wrapperProps","ReactDOM","Provider","value","AnimatePresence","child","i","key","MAX_HEIGHT","SheetContainer","handleAnimationComplete","didOpen","useEventCallbacks","initialY","sheetHeight","motion","div","mergeRefs","className","initial","animate","type","exit","onAnimationComplete","SheetContent","SheetHeader","indicator1Transform","useTransform","r","indicator2Transform","span","SheetBackdrop","props","Comp","onClick","onTap","button","_Sheet","Container","Header","Content","Backdrop"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"react-modal-sheet.cjs.production.min.js","sources":["../src/utils.ts","../src/context.tsx","../src/hooks.tsx","../src/styles.ts","../src/sheet.tsx","../src/SheetContainer.tsx","../src/SheetContent.tsx","../src/SheetHeader.tsx","../src/SheetBackdrop.tsx","../src/index.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useState } from 'react';\n\nexport const isSSR = typeof window === 'undefined';\n\nexport const getClosest = (nums: number[], goal: number) => {\n return nums.reduce((prev, curr) => {\n return Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev;\n });\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\nconst useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;\n\nexport function useWindowHeight() {\n const [windowHeight, setWindowHeight] = 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 const 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","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","import * as React from 'react';\n\nimport { SheetEvents } from './types';\nimport { applyRootStyles, cleanupRootStyles } from './utils';\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\nconst 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","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 zIndex: 9999999,\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 },\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';\n\nimport {\n animate,\n useMotionValue,\n PanInfo,\n AnimatePresence,\n} from 'framer-motion';\n\nimport { SheetContextType, SheetProps } from './types';\nimport { getClosest, inDescendingOrder, isSSR, useWindowHeight } from './utils';\nimport { SheetContext } from './context';\nimport { useModalEffect } from './hooks';\nimport styles from './styles';\n\nconst Sheet = React.forwardRef<any, SheetProps>(\n (\n {\n children,\n isOpen,\n onClose,\n onOpenStart,\n onOpenEnd,\n onCloseStart,\n onCloseEnd,\n onSnap,\n snapPoints,\n initialSnap = 0,\n rootId,\n springConfig = { stiffness: 300, damping: 30, mass: 0.2 },\n disableDrag = false,\n ...rest\n },\n ref\n ) => {\n const sheetRef = React.useRef<any>(null);\n const callbacks = React.useRef({ onOpenStart, onOpenEnd, onCloseStart, onCloseEnd }); // prettier-ignore\n const indicatorRotation = useMotionValue(0);\n const windowHeight = useWindowHeight();\n const y = useMotionValue(isOpen ? windowHeight : 0);\n\n if (snapPoints) {\n // Convert negative / percentage snap points to absolute values\n snapPoints = snapPoints.map(point => {\n if (point > 0 && point <= 1) return point * windowHeight; // percentage values e.g. between 0.0 and 1.0\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 handleDrag = React.useCallback((_, { delta }: PanInfo) => {\n // Update drag indicator rotation based on drag velocity\n const velocity = y.getVelocity();\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 }, []); // eslint-disable-line\n\n const handleDragEnd = React.useCallback(\n (_, { velocity }: PanInfo) => {\n if (velocity.y > 500) {\n // User flicked the sheet down\n onClose();\n } else {\n const sheetEl = sheetRef.current as HTMLDivElement;\n const contentHeight = sheetEl.getBoundingClientRect().height;\n const snapTo = snapPoints\n ? getClosest(snapPoints.map(p => contentHeight - p), y.get()) // prettier-ignore\n : y.get() / contentHeight > 0.6 // Close if dragged over 60%\n ? contentHeight\n : 0;\n\n // Update the spring value so that the sheet is animated to the snap point\n animate(y, snapTo, { type: 'spring', ...springConfig });\n\n if (snapPoints && onSnap) {\n const snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));\n const snapIndex = snapPoints.indexOf(snapValue);\n onSnap(snapIndex);\n }\n\n if (snapTo >= contentHeight) onClose();\n }\n\n // Reset indicator rotation after dragging\n indicatorRotation.set(0);\n },\n [onClose, onSnap] // eslint-disable-line\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 React.useEffect(() => {\n callbacks.current = { onOpenStart, onOpenEnd, onCloseStart, onCloseEnd };\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 snapTo: (snapIndex: number) => {\n if (snapPoints && snapPoints[snapIndex] !== undefined) {\n const sheetEl = sheetRef.current as HTMLDivElement;\n const contentHeight = sheetEl.getBoundingClientRect().height;\n const snapTo = contentHeight - snapPoints[snapIndex];\n\n animate(y, snapTo, { type: 'spring', ...springConfig });\n if (onSnap) onSnap(snapIndex);\n if (snapTo >= contentHeight) onClose();\n }\n },\n }));\n\n useModalEffect(isOpen, rootId);\n\n const dragProps = disableDrag\n ? ({} as any)\n : {\n drag: 'y' as const,\n dragElastic: 0,\n dragConstraints: { top: 0, bottom: 0 },\n dragMomentum: false,\n onDrag: handleDrag,\n onDragEnd: handleDragEnd,\n };\n\n const context: SheetContextType = {\n y,\n sheetRef,\n isOpen,\n initialSnap,\n snapPoints,\n indicatorRotation,\n callbacks,\n dragProps,\n windowHeight,\n springConfig,\n };\n\n const wrapperProps = {\n ...rest,\n ref,\n style: styles.wrapper,\n };\n\n const sheet = (\n <SheetContext.Provider value={context}>\n <div {...wrapperProps}>\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 </div>\n </SheetContext.Provider>\n );\n\n if (isSSR) return sheet;\n\n return ReactDOM.createPortal(sheet, document.body);\n }\n);\n\nexport default Sheet;\n","import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport mergeRefs from 'react-merge-refs';\n\nimport { SheetContainerProps } from './types';\nimport { useSheetContext } from './context';\nimport { useEventCallbacks } from './hooks';\nimport styles from './styles';\n\nconst MAX_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';\n\nconst SheetContainer = React.forwardRef<any, SheetContainerProps>(\n ({ children, style = {}, ...rest }, ref) => {\n const {\n y,\n isOpen,\n callbacks,\n snapPoints,\n initialSnap = 0,\n sheetRef,\n windowHeight,\n springConfig,\n } = useSheetContext();\n\n const { handleAnimationComplete } = useEventCallbacks(isOpen, callbacks);\n const initialY = snapPoints ? snapPoints[0] - snapPoints[initialSnap] : 0;\n const h = snapPoints ? snapPoints[0] : null;\n const sheetHeight = h ? `min(${h}px, ${MAX_HEIGHT})` : MAX_HEIGHT;\n\n return (\n <motion.div\n {...rest}\n ref={mergeRefs([sheetRef, ref])}\n className=\"react-modal-sheet-container\"\n style={{ ...styles.container, height: sheetHeight, ...style, y }}\n initial={{ y: windowHeight }}\n animate={{\n y: initialY,\n transition: { type: 'spring', ...springConfig },\n }}\n exit={{ y: windowHeight }}\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 styles from './styles';\nimport { useSheetContext } from './context';\n\nconst SheetContent = React.forwardRef<any, SheetDraggableProps>(\n ({ children, disableDrag = false, style = {}, ...rest }, ref) => {\n const { dragProps } = useSheetContext();\n\n return (\n <motion.div\n {...rest}\n ref={ref}\n className=\"react-modal-sheet-content\"\n style={{ ...styles.content, ...style }}\n {...(disableDrag ? {} : 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, disableDrag = false, style = {}, ...rest }, ref) => {\n const { indicatorRotation, dragProps } = useSheetContext();\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 {...(disableDrag ? {} : 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 = {}, ...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\"\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 Sheet from './sheet';\nimport SheetContainer from './SheetContainer';\nimport SheetContent from './SheetContent';\nimport SheetHeader from './SheetHeader';\nimport SheetBackdrop from './SheetBackdrop';\n\nexport type SheetRef = {\n snapTo: (index: number) => void;\n};\n\ntype SheetCompoundComponent = {\n Container: typeof SheetContainer;\n Header: typeof SheetHeader;\n Content: typeof SheetContent;\n Backdrop: typeof SheetBackdrop;\n};\n\n// HACK: this is needed to get the typing to work properly...\nconst _Sheet: any = Sheet;\n_Sheet.Container = SheetContainer;\n_Sheet.Header = SheetHeader;\n_Sheet.Content = SheetContent;\n_Sheet.Backdrop = SheetBackdrop;\n\nconst SheetCompound: typeof Sheet & SheetCompoundComponent = _Sheet;\n\nexport default SheetCompound;\n"],"names":["isSSR","window","cleanupRootStyles","rootId","body","document","querySelector","root","getElementById","highlight","style","removeProperty","opacity","addEventListener","onTransitionEnd","removeEventListener","parentNode","removeChild","useIsomorphicLayoutEffect","useEffect","useLayoutEffect","SheetContext","React","undefined","useSheetContext","context","Error","usePrevious","state","ref","current","styles","wrapper","position","top","bottom","left","right","zIndex","overflow","pointerEvents","backdrop","width","height","backgroundColor","touchAction","container","borderTopRightRadius","borderTopLeftRadius","boxShadow","display","flexDirection","headerWrapper","header","alignItems","justifyContent","indicator","borderRadius","content","flex","Sheet","children","isOpen","onClose","onOpenStart","onOpenEnd","onCloseStart","onCloseEnd","onSnap","snapPoints","initialSnap","springConfig","stiffness","damping","mass","disableDrag","rest","sheetRef","callbacks","indicatorRotation","useMotionValue","windowHeight","useState","setWindowHeight","updateHeight","innerHeight","useWindowHeight","y","map","point","console","assert","arr","i","length","inDescendingOrder","handleDrag","_","delta","velocity","getVelocity","set","Math","max","get","handleDragEnd","nums","goal","contentHeight","getBoundingClientRect","snapTo","p","reduce","prev","curr","abs","animate","type","snapValue","round","snapIndex","indexOf","prevOpen","h","s","willChange","transition","transform","createElement","setAttribute","id","appendChild","requestAnimationFrame","applyRootStyles","useModalEffect","dragProps","drag","dragElastic","dragConstraints","dragMomentum","onDrag","onDragEnd","wrapperProps","sheet","Provider","value","AnimatePresence","child","key","ReactDOM","MAX_HEIGHT","SheetContainer","handleAnimationComplete","didOpen","useEventCallbacks","initialY","sheetHeight","motion","div","mergeRefs","className","initial","exit","onAnimationComplete","SheetContent","SheetHeader","indicator1Transform","useTransform","r","indicator2Transform","span","isClickable","props","onClick","onTap","SheetBackdrop","Comp","button","_Sheet","Container","Header","Content","Backdrop"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { useContext, createContext, useRef, useCallback,
|
|
1
|
+
import { useState, useEffect, useLayoutEffect, useContext, createContext, useRef, useCallback, forwardRef, useImperativeHandle, createElement, Children, cloneElement } from 'react';
|
|
2
2
|
import { createPortal } from 'react-dom';
|
|
3
|
-
import { useMotionValue,
|
|
3
|
+
import { useMotionValue, animate, AnimatePresence, motion, useTransform } from 'framer-motion';
|
|
4
4
|
import mergeRefs from 'react-merge-refs';
|
|
5
5
|
|
|
6
6
|
function _extends() {
|
|
@@ -36,7 +36,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
|
|
|
36
36
|
return target;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
var
|
|
39
|
+
var isSSR = typeof window === 'undefined';
|
|
40
40
|
var getClosest = function getClosest(nums, goal) {
|
|
41
41
|
return nums.reduce(function (prev, curr) {
|
|
42
42
|
return Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev;
|
|
@@ -103,6 +103,32 @@ function cleanupRootStyles(rootId) {
|
|
|
103
103
|
root.addEventListener('transitionend', onTransitionEnd);
|
|
104
104
|
}
|
|
105
105
|
}
|
|
106
|
+
var useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;
|
|
107
|
+
function useWindowHeight() {
|
|
108
|
+
var _useState = useState(0),
|
|
109
|
+
windowHeight = _useState[0],
|
|
110
|
+
setWindowHeight = _useState[1];
|
|
111
|
+
|
|
112
|
+
useIsomorphicLayoutEffect(function () {
|
|
113
|
+
var updateHeight = function updateHeight() {
|
|
114
|
+
return setWindowHeight(window.innerHeight);
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
window.addEventListener('resize', updateHeight);
|
|
118
|
+
updateHeight();
|
|
119
|
+
return function () {
|
|
120
|
+
return window.removeEventListener('resize', updateHeight);
|
|
121
|
+
};
|
|
122
|
+
}, []);
|
|
123
|
+
return windowHeight;
|
|
124
|
+
}
|
|
125
|
+
var inDescendingOrder = function inDescendingOrder(arr) {
|
|
126
|
+
for (var i = 0; i < arr.length; i++) {
|
|
127
|
+
if (arr[i + 1] > arr[i]) return false;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
return true;
|
|
131
|
+
};
|
|
106
132
|
|
|
107
133
|
var SheetContext = /*#__PURE__*/createContext(undefined);
|
|
108
134
|
var useSheetContext = function useSheetContext() {
|
|
@@ -174,7 +200,8 @@ var styles = {
|
|
|
174
200
|
left: 0,
|
|
175
201
|
right: 0,
|
|
176
202
|
zIndex: 9999999,
|
|
177
|
-
overflow: 'hidden'
|
|
203
|
+
overflow: 'hidden',
|
|
204
|
+
pointerEvents: 'none'
|
|
178
205
|
},
|
|
179
206
|
backdrop: {
|
|
180
207
|
zIndex: 1,
|
|
@@ -197,7 +224,8 @@ var styles = {
|
|
|
197
224
|
borderTopLeftRadius: '8px',
|
|
198
225
|
boxShadow: '0px -2px 16px rgba(0, 0, 0, 0.3)',
|
|
199
226
|
display: 'flex',
|
|
200
|
-
flexDirection: 'column'
|
|
227
|
+
flexDirection: 'column',
|
|
228
|
+
pointerEvents: 'auto'
|
|
201
229
|
},
|
|
202
230
|
headerWrapper: {
|
|
203
231
|
width: '100%'
|
|
@@ -246,14 +274,6 @@ var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
246
274
|
disableDrag = _ref$disableDrag === void 0 ? false : _ref$disableDrag,
|
|
247
275
|
rest = _objectWithoutPropertiesLoose(_ref, ["children", "isOpen", "onClose", "onOpenStart", "onOpenEnd", "onCloseStart", "onCloseEnd", "onSnap", "snapPoints", "initialSnap", "rootId", "springConfig", "disableDrag"]);
|
|
248
276
|
|
|
249
|
-
var _React$useState = useState(false),
|
|
250
|
-
mounted = _React$useState[0],
|
|
251
|
-
setMounted = _React$useState[1];
|
|
252
|
-
|
|
253
|
-
var _React$useState2 = useState(false),
|
|
254
|
-
isDragging = _React$useState2[0],
|
|
255
|
-
setDragging = _React$useState2[1];
|
|
256
|
-
|
|
257
277
|
var sheetRef = useRef(null);
|
|
258
278
|
var callbacks = useRef({
|
|
259
279
|
onOpenStart: onOpenStart,
|
|
@@ -263,24 +283,27 @@ var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
263
283
|
}); // prettier-ignore
|
|
264
284
|
|
|
265
285
|
var indicatorRotation = useMotionValue(0);
|
|
266
|
-
var
|
|
267
|
-
var
|
|
268
|
-
|
|
269
|
-
|
|
286
|
+
var windowHeight = useWindowHeight();
|
|
287
|
+
var y = useMotionValue(isOpen ? windowHeight : 0);
|
|
288
|
+
|
|
289
|
+
if (snapPoints) {
|
|
290
|
+
// Convert negative / percentage snap points to absolute values
|
|
291
|
+
snapPoints = snapPoints.map(function (point) {
|
|
292
|
+
if (point > 0 && point <= 1) return point * windowHeight; // percentage values e.g. between 0.0 and 1.0
|
|
293
|
+
|
|
294
|
+
return point < 0 ? windowHeight + point : point; // negative values
|
|
295
|
+
});
|
|
296
|
+
console.assert(inDescendingOrder(snapPoints) || windowHeight === 0, "Snap points need to be in descending order got: [" + snapPoints + "]");
|
|
297
|
+
}
|
|
298
|
+
|
|
270
299
|
var handleDrag = useCallback(function (_, _ref2) {
|
|
271
300
|
var delta = _ref2.delta;
|
|
272
301
|
// Update drag indicator rotation based on drag velocity
|
|
273
|
-
var velocity =
|
|
302
|
+
var velocity = y.getVelocity();
|
|
274
303
|
if (velocity > 0) indicatorRotation.set(10);
|
|
275
304
|
if (velocity < 0) indicatorRotation.set(-10); // Make sure user cannot drag beyond the top of the sheet
|
|
276
305
|
|
|
277
|
-
|
|
278
|
-
}, []); // eslint-disable-line
|
|
279
|
-
|
|
280
|
-
var handleDragStart = useCallback(function () {
|
|
281
|
-
// Sync the drag value with the spring value so that dragging start at the correct y position
|
|
282
|
-
sheetDragY.set(sheetSpringY.get());
|
|
283
|
-
setDragging(true);
|
|
306
|
+
y.set(Math.max(y.get() + delta.y, 0));
|
|
284
307
|
}, []); // eslint-disable-line
|
|
285
308
|
|
|
286
309
|
var handleDragEnd = useCallback(function (_, _ref3) {
|
|
@@ -294,10 +317,13 @@ var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
294
317
|
var contentHeight = sheetEl.getBoundingClientRect().height;
|
|
295
318
|
var snapTo = snapPoints ? getClosest(snapPoints.map(function (p) {
|
|
296
319
|
return contentHeight - p;
|
|
297
|
-
}),
|
|
320
|
+
}), y.get()) // prettier-ignore
|
|
321
|
+
: y.get() / contentHeight > 0.6 // Close if dragged over 60%
|
|
298
322
|
? contentHeight : 0; // Update the spring value so that the sheet is animated to the snap point
|
|
299
323
|
|
|
300
|
-
|
|
324
|
+
animate(y, snapTo, _extends({
|
|
325
|
+
type: 'spring'
|
|
326
|
+
}, springConfig));
|
|
301
327
|
|
|
302
328
|
if (snapPoints && onSnap) {
|
|
303
329
|
var snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));
|
|
@@ -306,7 +332,6 @@ var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
306
332
|
}
|
|
307
333
|
|
|
308
334
|
if (snapTo >= contentHeight) onClose();
|
|
309
|
-
setDragging(false);
|
|
310
335
|
} // Reset indicator rotation after dragging
|
|
311
336
|
|
|
312
337
|
|
|
@@ -322,16 +347,14 @@ var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
322
347
|
onCloseStart: onCloseStart,
|
|
323
348
|
onCloseEnd: onCloseEnd
|
|
324
349
|
};
|
|
325
|
-
});
|
|
326
|
-
useEffect(function () {
|
|
327
|
-
setMounted(true);
|
|
328
|
-
}, []); // Trigger onSnap callback when sheet is opened or closed
|
|
350
|
+
}); // Trigger onSnap callback when sheet is opened or closed
|
|
329
351
|
|
|
330
352
|
useEffect(function () {
|
|
331
|
-
if (!snapPoints || !onSnap
|
|
353
|
+
if (!snapPoints || !onSnap) return;
|
|
332
354
|
var snapIndex = isOpen ? initialSnap : snapPoints.length - 1;
|
|
333
355
|
onSnap(snapIndex);
|
|
334
|
-
}, [isOpen]);
|
|
356
|
+
}, [isOpen]); // eslint-disable-line
|
|
357
|
+
|
|
335
358
|
useImperativeHandle(ref, function () {
|
|
336
359
|
return {
|
|
337
360
|
snapTo: function snapTo(snapIndex) {
|
|
@@ -339,7 +362,9 @@ var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
339
362
|
var sheetEl = sheetRef.current;
|
|
340
363
|
var contentHeight = sheetEl.getBoundingClientRect().height;
|
|
341
364
|
var snapTo = contentHeight - snapPoints[snapIndex];
|
|
342
|
-
|
|
365
|
+
animate(y, snapTo, _extends({
|
|
366
|
+
type: 'spring'
|
|
367
|
+
}, springConfig));
|
|
343
368
|
if (onSnap) onSnap(snapIndex);
|
|
344
369
|
if (snapTo >= contentHeight) onClose();
|
|
345
370
|
}
|
|
@@ -356,37 +381,35 @@ var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
356
381
|
},
|
|
357
382
|
dragMomentum: false,
|
|
358
383
|
onDrag: handleDrag,
|
|
359
|
-
onDragStart: handleDragStart,
|
|
360
384
|
onDragEnd: handleDragEnd
|
|
361
385
|
};
|
|
362
386
|
var context = {
|
|
363
387
|
y: y,
|
|
364
388
|
sheetRef: sheetRef,
|
|
365
389
|
isOpen: isOpen,
|
|
366
|
-
isDragging: isDragging,
|
|
367
390
|
initialSnap: initialSnap,
|
|
368
391
|
snapPoints: snapPoints,
|
|
369
392
|
indicatorRotation: indicatorRotation,
|
|
370
393
|
callbacks: callbacks,
|
|
371
|
-
dragProps: dragProps
|
|
394
|
+
dragProps: dragProps,
|
|
395
|
+
windowHeight: windowHeight,
|
|
396
|
+
springConfig: springConfig
|
|
372
397
|
};
|
|
373
398
|
|
|
374
399
|
var wrapperProps = _extends({}, rest, {
|
|
375
400
|
ref: ref,
|
|
376
|
-
style:
|
|
377
|
-
pointerEvents: pointerEvents
|
|
378
|
-
})
|
|
401
|
+
style: styles.wrapper
|
|
379
402
|
});
|
|
380
403
|
|
|
381
|
-
|
|
404
|
+
var sheet = createElement(SheetContext.Provider, {
|
|
382
405
|
value: context
|
|
383
406
|
}, createElement("div", Object.assign({}, wrapperProps), createElement(AnimatePresence, null, isOpen ? Children.map(children, function (child, i) {
|
|
384
407
|
return cloneElement(child, {
|
|
385
408
|
key: "sheet-child-" + i
|
|
386
409
|
});
|
|
387
|
-
}) : null)))
|
|
388
|
-
|
|
389
|
-
|
|
410
|
+
}) : null)));
|
|
411
|
+
if (isSSR) return sheet;
|
|
412
|
+
return createPortal(sheet, document.body);
|
|
390
413
|
});
|
|
391
414
|
|
|
392
415
|
var MAX_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';
|
|
@@ -403,7 +426,9 @@ var SheetContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
403
426
|
snapPoints = _useSheetContext.snapPoints,
|
|
404
427
|
_useSheetContext$init = _useSheetContext.initialSnap,
|
|
405
428
|
initialSnap = _useSheetContext$init === void 0 ? 0 : _useSheetContext$init,
|
|
406
|
-
sheetRef = _useSheetContext.sheetRef
|
|
429
|
+
sheetRef = _useSheetContext.sheetRef,
|
|
430
|
+
windowHeight = _useSheetContext.windowHeight,
|
|
431
|
+
springConfig = _useSheetContext.springConfig;
|
|
407
432
|
|
|
408
433
|
var _useEventCallbacks = useEventCallbacks(isOpen, callbacks),
|
|
409
434
|
handleAnimationComplete = _useEventCallbacks.handleAnimationComplete;
|
|
@@ -420,16 +445,16 @@ var SheetContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
420
445
|
y: y
|
|
421
446
|
}),
|
|
422
447
|
initial: {
|
|
423
|
-
y:
|
|
448
|
+
y: windowHeight
|
|
424
449
|
},
|
|
425
450
|
animate: {
|
|
426
451
|
y: initialY,
|
|
427
|
-
transition: {
|
|
428
|
-
type: '
|
|
429
|
-
}
|
|
452
|
+
transition: _extends({
|
|
453
|
+
type: 'spring'
|
|
454
|
+
}, springConfig)
|
|
430
455
|
},
|
|
431
456
|
exit: {
|
|
432
|
-
y:
|
|
457
|
+
y: windowHeight
|
|
433
458
|
},
|
|
434
459
|
onAnimationComplete: handleAnimationComplete
|
|
435
460
|
}), children);
|
|
@@ -500,10 +525,13 @@ var SheetBackdrop = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
500
525
|
rest = _objectWithoutPropertiesLoose(_ref, ["style"]);
|
|
501
526
|
|
|
502
527
|
var Comp = isClickable(rest) ? motion.button : motion.div;
|
|
528
|
+
var pointerEvents = isClickable(rest) ? 'auto' : 'none';
|
|
503
529
|
return createElement(Comp, Object.assign({}, rest, {
|
|
504
530
|
ref: ref,
|
|
505
531
|
className: "react-modal-sheet-backdrop",
|
|
506
|
-
style: _extends({}, styles.backdrop, style
|
|
532
|
+
style: _extends({}, styles.backdrop, style, {
|
|
533
|
+
pointerEvents: pointerEvents
|
|
534
|
+
}),
|
|
507
535
|
initial: {
|
|
508
536
|
opacity: 0
|
|
509
537
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-modal-sheet.esm.js","sources":["../src/utils.ts","../src/context.tsx","../src/hooks.tsx","../src/styles.ts","../src/sheet.tsx","../src/SheetContainer.tsx","../src/SheetContent.tsx","../src/SheetHeader.tsx","../src/SheetBackdrop.tsx","../src/index.tsx"],"sourcesContent":["export const isBrowser = typeof window !== 'undefined';\n\nexport const getClosest = (nums: number[], goal: number) => {\n return nums.reduce((prev, curr) => {\n return Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev;\n });\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","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","import * as React from 'react';\n\nimport { SheetEvents } from './types';\nimport { applyRootStyles, cleanupRootStyles } from './utils';\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\nconst 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","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 zIndex: 9999999,\n overflow: 'hidden',\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 },\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 },\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';\n\nimport {\n useSpring,\n useMotionValue,\n AnimatePresence,\n PanInfo,\n} from 'framer-motion';\n\nimport { SheetProps } from './types';\nimport { getClosest, isBrowser } from './utils';\nimport { SheetContext } from './context';\nimport { useModalEffect } from './hooks';\nimport styles from './styles';\n\nconst Sheet = React.forwardRef<any, SheetProps>(\n (\n {\n children,\n isOpen,\n onClose,\n onOpenStart,\n onOpenEnd,\n onCloseStart,\n onCloseEnd,\n onSnap,\n snapPoints,\n initialSnap = 0,\n rootId,\n springConfig = { stiffness: 300, damping: 30, mass: 0.2 },\n disableDrag = false,\n ...rest\n },\n ref\n ) => {\n const [mounted, setMounted] = React.useState(false);\n const [isDragging, setDragging] = React.useState(false);\n const sheetRef = React.useRef<any>(null);\n const callbacks = React.useRef({ onOpenStart, onOpenEnd, onCloseStart, onCloseEnd }); // prettier-ignore\n const indicatorRotation = useMotionValue(0);\n const sheetDragY = useMotionValue(isBrowser ? window.innerHeight : 0);\n const sheetSpringY = useSpring(sheetDragY, springConfig);\n const y = isDragging ? sheetDragY : sheetSpringY;\n const pointerEvents = isOpen ? 'auto' : 'none';\n\n const handleDrag = React.useCallback((_, { delta }: PanInfo) => {\n // Update drag indicator rotation based on drag velocity\n const velocity = sheetDragY.getVelocity();\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 sheetDragY.set(Math.max(sheetDragY.get() + delta.y, 0));\n }, []); // eslint-disable-line\n\n const handleDragStart = React.useCallback(() => {\n // Sync the drag value with the spring value so that dragging start at the correct y position\n sheetDragY.set(sheetSpringY.get());\n setDragging(true);\n }, []); // eslint-disable-line\n\n const handleDragEnd = React.useCallback(\n (_, { velocity }: PanInfo) => {\n if (velocity.y > 500) {\n // User flicked the sheet down\n onClose();\n } else {\n const sheetEl = sheetRef.current as HTMLDivElement;\n const contentHeight = sheetEl.getBoundingClientRect().height;\n const snapTo = snapPoints\n ? getClosest(\n snapPoints.map(p => contentHeight - p),\n sheetDragY.get()\n )\n : sheetDragY.get() / contentHeight > 0.6 // Close if dragged over 60%\n ? contentHeight\n : 0;\n\n // Update the spring value so that the sheet is animated to the snap point\n sheetSpringY.set(snapTo);\n\n if (snapPoints && onSnap) {\n const snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));\n const snapIndex = snapPoints.indexOf(snapValue);\n onSnap(snapIndex);\n }\n\n if (snapTo >= contentHeight) onClose();\n\n setDragging(false);\n }\n\n // Reset indicator rotation after dragging\n indicatorRotation.set(0);\n },\n [onClose, onSnap] // eslint-disable-line\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 React.useEffect(() => {\n callbacks.current = { onOpenStart, onOpenEnd, onCloseStart, onCloseEnd };\n });\n\n React.useEffect(() => {\n setMounted(true);\n }, []);\n\n // Trigger onSnap callback when sheet is opened or closed\n React.useEffect(() => {\n if (!snapPoints || !onSnap || !mounted) return;\n const snapIndex = isOpen ? initialSnap : snapPoints.length - 1;\n onSnap(snapIndex);\n }, [isOpen]);\n\n React.useImperativeHandle(ref, () => ({\n snapTo: (snapIndex: number) => {\n if (snapPoints && snapPoints[snapIndex] !== undefined) {\n const sheetEl = sheetRef.current as HTMLDivElement;\n const contentHeight = sheetEl.getBoundingClientRect().height;\n const snapTo = contentHeight - snapPoints[snapIndex];\n\n sheetSpringY.set(snapTo);\n if (onSnap) onSnap(snapIndex);\n if (snapTo >= contentHeight) onClose();\n }\n },\n }));\n\n useModalEffect(isOpen, rootId);\n\n const dragProps = disableDrag\n ? ({} as any)\n : {\n drag: 'y' as const,\n dragElastic: 0,\n dragConstraints: { top: 0, bottom: 0 },\n dragMomentum: false,\n onDrag: handleDrag,\n onDragStart: handleDragStart,\n onDragEnd: handleDragEnd,\n };\n\n const context = {\n y,\n sheetRef,\n isOpen,\n isDragging,\n initialSnap,\n snapPoints,\n indicatorRotation,\n callbacks,\n dragProps,\n };\n\n const wrapperProps = {\n ...rest,\n ref,\n style: {\n ...styles.wrapper,\n pointerEvents,\n } as any,\n };\n\n return mounted ? (\n ReactDOM.createPortal(\n <SheetContext.Provider value={context}>\n <div {...wrapperProps}>\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 </div>\n </SheetContext.Provider>,\n document.body\n )\n ) : (\n // NOTE: return the wrapper div so that SSR frameworks don't get confused\n // with the HTML structure (\"Expected server HTML to contain a matching <div>...\")\n <div {...wrapperProps} />\n );\n }\n);\n\nexport default Sheet;\n","import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport mergeRefs from 'react-merge-refs';\n\nimport { SheetContainerProps } from './types';\nimport { useSheetContext } from './context';\nimport { useEventCallbacks } from './hooks';\nimport styles from './styles';\n\nconst MAX_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';\n\nconst SheetContainer = React.forwardRef<any, SheetContainerProps>(\n ({ children, style = {}, ...rest }, ref) => {\n const {\n y,\n isOpen,\n callbacks,\n snapPoints,\n initialSnap = 0,\n sheetRef,\n } = useSheetContext();\n\n const { handleAnimationComplete } = useEventCallbacks(isOpen, callbacks);\n const initialY = snapPoints ? snapPoints[0] - snapPoints[initialSnap] : 0;\n const h = snapPoints ? snapPoints[0] : null;\n const sheetHeight = h ? `min(${h}px, ${MAX_HEIGHT})` : MAX_HEIGHT;\n\n return (\n <motion.div\n {...rest}\n ref={mergeRefs([sheetRef, ref])}\n className=\"react-modal-sheet-container\"\n style={{ ...styles.container, height: sheetHeight, ...style, y }}\n initial={{ y: window.innerHeight }}\n animate={{ y: initialY, transition: { type: 'tween' } }}\n exit={{ y: window.innerHeight }}\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 styles from './styles';\nimport { useSheetContext } from './context';\n\nconst SheetContent = React.forwardRef<any, SheetDraggableProps>(\n ({ children, disableDrag = false, style = {}, ...rest }, ref) => {\n const { dragProps } = useSheetContext();\n\n return (\n <motion.div\n {...rest}\n ref={ref}\n className=\"react-modal-sheet-content\"\n style={{ ...styles.content, ...style }}\n {...(disableDrag ? {} : 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, disableDrag = false, style = {}, ...rest }, ref) => {\n const { indicatorRotation, dragProps } = useSheetContext();\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 {...(disableDrag ? {} : 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 = {}, ...rest }, ref) => {\n const Comp = isClickable(rest) ? motion.button : motion.div;\n\n return (\n <Comp\n {...rest}\n ref={ref}\n className=\"react-modal-sheet-backdrop\"\n style={{ ...styles.backdrop, ...style }}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n />\n );\n }\n);\n\nexport default SheetBackdrop;\n","import Sheet from './sheet';\nimport SheetContainer from './SheetContainer';\nimport SheetContent from './SheetContent';\nimport SheetHeader from './SheetHeader';\nimport SheetBackdrop from './SheetBackdrop';\n\nexport type SheetRef = {\n snapTo: (index: number) => void;\n};\n\ntype SheetCompoundComponent = {\n Container: typeof SheetContainer;\n Header: typeof SheetHeader;\n Content: typeof SheetContent;\n Backdrop: typeof SheetBackdrop;\n};\n\n// HACK: this is needed to get the typing to work properly...\nconst _Sheet: any = Sheet;\n_Sheet.Container = SheetContainer;\n_Sheet.Header = SheetHeader;\n_Sheet.Content = SheetContent;\n_Sheet.Backdrop = SheetBackdrop;\n\nconst SheetCompound: typeof Sheet & SheetCompoundComponent = _Sheet;\n\nexport default SheetCompound;\n"],"names":["isBrowser","window","getClosest","nums","goal","reduce","prev","curr","Math","abs","highlightId","applyRootStyles","rootId","body","document","querySelector","root","p","h","innerHeight","s","style","backgroundColor","overflow","willChange","transition","transform","borderTopRightRadius","borderTopLeftRadius","highlight","createElement","setAttribute","id","position","top","left","bottom","right","opacity","appendChild","requestAnimationFrame","cleanupRootStyles","getElementById","onTransitionEnd","removeProperty","removeEventListener","parentNode","removeChild","addEventListener","SheetContext","React","undefined","useSheetContext","context","Error","useModalEffect","isOpen","prevOpen","usePrevious","useEventCallbacks","callbacks","didOpen","handleAnimationComplete","current","onOpenEnd","onCloseEnd","onOpenStart","onCloseStart","state","ref","styles","wrapper","zIndex","backdrop","width","height","touchAction","container","boxShadow","display","flexDirection","headerWrapper","header","alignItems","justifyContent","indicator","borderRadius","content","flex","Sheet","children","onClose","onSnap","snapPoints","initialSnap","springConfig","stiffness","damping","mass","disableDrag","rest","mounted","setMounted","isDragging","setDragging","sheetRef","indicatorRotation","useMotionValue","sheetDragY","sheetSpringY","useSpring","y","pointerEvents","handleDrag","_","delta","velocity","getVelocity","set","max","get","handleDragStart","handleDragEnd","sheetEl","contentHeight","getBoundingClientRect","snapTo","map","snapValue","round","snapIndex","indexOf","length","dragProps","drag","dragElastic","dragConstraints","dragMomentum","onDrag","onDragStart","onDragEnd","wrapperProps","ReactDOM","Provider","value","AnimatePresence","child","i","key","MAX_HEIGHT","SheetContainer","initialY","sheetHeight","motion","div","mergeRefs","className","initial","animate","type","exit","onAnimationComplete","SheetContent","SheetHeader","indicator1Transform","useTransform","r","indicator2Transform","span","isClickable","props","onClick","onTap","SheetBackdrop","Comp","button","_Sheet","Container","Header","Content","Backdrop","SheetCompound"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAO,IAAMA,SAAS,GAAG,OAAOC,MAAP,KAAkB,WAApC;AAEA,IAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,IAAD,EAAiBC,IAAjB;AACxB,SAAOD,IAAI,CAACE,MAAL,CAAY,UAACC,IAAD,EAAOC,IAAP;AACjB,WAAOC,IAAI,CAACC,GAAL,CAASF,IAAI,GAAGH,IAAhB,IAAwBI,IAAI,CAACC,GAAL,CAASH,IAAI,GAAGF,IAAhB,CAAxB,GAAgDG,IAAhD,GAAuDD,IAA9D;AACD,GAFM,CAAP;AAGD,CAJM;AAMP,IAAMI,WAAW,GAAG,6BAApB;SAEgBC,gBAAgBC;AAC9B,MAAMC,IAAI,GAAGC,QAAQ,CAACC,aAAT,CAAuB,MAAvB,CAAb;AACA,MAAMC,IAAI,GAAGF,QAAQ,CAACC,aAAT,OAA2BH,MAA3B,CAAb;;AAEA,MAAII,IAAJ,EAAU;AACR,QAAMC,CAAC,GAAG,EAAV;AACA,QAAMC,CAAC,GAAGjB,MAAM,CAACkB,WAAjB;AACA,QAAMC,CAAC,GAAG,CAACF,CAAC,GAAGD,CAAL,IAAUC,CAApB;AACAL,IAAAA,IAAI,CAACQ,KAAL,CAAWC,eAAX,GAA6B,MAA7B;AACAN,IAAAA,IAAI,CAACK,KAAL,CAAWE,QAAX,GAAsB,QAAtB;AACAP,IAAAA,IAAI,CAACK,KAAL,CAAWG,UAAX,GAAwB,WAAxB;AACAR,IAAAA,IAAI,CAACK,KAAL,CAAWI,UAAX,GAAwB,wBAAxB;AACAT,IAAAA,IAAI,CAACK,KAAL,CAAWK,SAAX,mDAAqET,CAAC,GAAG,CAAzE,mBAAwFG,CAAxF,OARQ;;AASRJ,IAAAA,IAAI,CAACK,KAAL,CAAWM,oBAAX,GAAkC,MAAlC;AACAX,IAAAA,IAAI,CAACK,KAAL,CAAWO,mBAAX,GAAiC,MAAjC,CAVQ;;AAaR,QAAMC,SAAS,GAAGf,QAAQ,CAACgB,aAAT,CAAuB,KAAvB,CAAlB;AACAD,IAAAA,SAAS,CAACE,YAAV,CAAuB,aAAvB,EAAsC,MAAtC;AACAF,IAAAA,SAAS,CAACG,EAAV,GAAetB,WAAf;AACAmB,IAAAA,SAAS,CAACR,KAAV,CAAgBY,QAAhB,GAA2B,UAA3B;AACAJ,IAAAA,SAAS,CAACR,KAAV,CAAgBa,GAAhB,GAAsB,KAAtB;AACAL,IAAAA,SAAS,CAACR,KAAV,CAAgBc,IAAhB,GAAuB,KAAvB;AACAN,IAAAA,SAAS,CAACR,KAAV,CAAgBe,MAAhB,GAAyB,KAAzB;AACAP,IAAAA,SAAS,CAACR,KAAV,CAAgBgB,KAAhB,GAAwB,KAAxB;AACAR,IAAAA,SAAS,CAACR,KAAV,CAAgBiB,OAAhB,GAA0B,GAA1B;AACAT,IAAAA,SAAS,CAACR,KAAV,CAAgBI,UAAhB,GAA6B,sBAA7B;AACAI,IAAAA,SAAS,CAACR,KAAV,CAAgBC,eAAhB,GAAkC,0BAAlC;AAEAN,IAAAA,IAAI,CAACuB,WAAL,CAAiBV,SAAjB;AACAW,IAAAA,qBAAqB,CAAC;AAAA,aAAOX,SAAS,CAACR,KAAV,CAAgBiB,OAAhB,GAA0B,GAAjC;AAAA,KAAD,CAArB;AACD;AACF;SAEeG,kBAAkB7B;AAChC,MAAMC,IAAI,GAAGC,QAAQ,CAACC,aAAT,CAAuB,MAAvB,CAAb;AACA,MAAMC,IAAI,GAAGF,QAAQ,CAAC4B,cAAT,CAAwB9B,MAAxB,CAAb;AACA,MAAMiB,SAAS,GAAGf,QAAQ,CAAC4B,cAAT,CAAwBhC,WAAxB,CAAlB;;AAEA,WAASiC,eAAT;;;AACE3B,IAAAA,IAAI,CAACK,KAAL,CAAWuB,cAAX,CAA0B,UAA1B;AACA5B,IAAAA,IAAI,CAACK,KAAL,CAAWuB,cAAX,CAA0B,aAA1B;AACA5B,IAAAA,IAAI,CAACK,KAAL,CAAWuB,cAAX,CAA0B,YAA1B;AACA/B,IAAAA,IAAI,CAACQ,KAAL,CAAWuB,cAAX,CAA0B,kBAA1B;AACA5B,IAAAA,IAAI,CAAC6B,mBAAL,CAAyB,eAAzB,EAA0CF,eAA1C;AACA,6BAAAd,SAAS,CAACiB,UAAV,2CAAsBC,WAAtB,CAAkClB,SAAlC;AACD;;AAED,MAAIb,IAAI,IAAIa,SAAZ,EAAuB;AACrB;AACAb,IAAAA,IAAI,CAACK,KAAL,CAAWuB,cAAX,CAA0B,yBAA1B;AACA5B,IAAAA,IAAI,CAACK,KAAL,CAAWuB,cAAX,CAA0B,wBAA1B;AACA5B,IAAAA,IAAI,CAACK,KAAL,CAAWuB,cAAX,CAA0B,WAA1B;AACAf,IAAAA,SAAS,CAACR,KAAV,CAAgBiB,OAAhB,GAA0B,GAA1B,CALqB;;AAQrBtB,IAAAA,IAAI,CAACgC,gBAAL,CAAsB,eAAtB,EAAuCL,eAAvC;AACD;AACF;;ACjEM,IAAMM,YAAY,gBAAGC,aAAA,CAC1BC,SAD0B,CAArB;AAIP,AAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB;AAC7B,MAAMC,OAAO,GAAGH,UAAA,CAAiBD,YAAjB,CAAhB;AACA,MAAI,CAACI,OAAL,EAAc,MAAMC,KAAK,CAAC,qBAAD,CAAX;AACd,SAAOD,OAAP;AACD,CAJM;;ACFA,IAAME,cAAc,GAAG,SAAjBA,cAAiB,CAACC,MAAD,EAAkB5C,MAAlB;AAC5B,MAAM6C,QAAQ,GAAGC,WAAW,CAACF,MAAD,CAA5B;;AAGAN,EAAAA,SAAA,CAAgB;AACd,QAAItC,MAAM,IAAI,CAAC6C,QAAX,IAAuBD,MAA3B,EAAmC;AACjC7C,MAAAA,eAAe,CAACC,MAAD,CAAf;AACD,KAFD,MAEO,IAAIA,MAAM,IAAI,CAAC4C,MAAX,IAAqBC,QAAzB,EAAmC;AACxChB,MAAAA,iBAAiB,CAAC7B,MAAD,CAAjB;AACD;AACF,GAND,EAMG,CAAC4C,MAAD,EAASC,QAAT,CANH;AAQA;;AACAP,EAAAA,SAAA,CAAgB;AACd,WAAO;AACL,UAAItC,MAAM,IAAI4C,MAAd,EAAsBf,iBAAiB,CAAC7B,MAAD,CAAjB;AACvB,KAFD;AAGD,GAJD,EAIG,CAAC4C,MAAD,CAJH;AAKD,CAlBM;AAoBP,AAAO,IAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,CAC/BH,MAD+B,EAE/BI,SAF+B;AAI/B,MAAMH,QAAQ,GAAGC,WAAW,CAACF,MAAD,CAA5B;AACA,MAAMK,OAAO,GAAGX,MAAA,CAAa,KAAb,CAAhB;AAGA;AACA;;AACA,MAAMY,uBAAuB,GAAGZ,WAAA,CAAkB;AAChD,QAAI,CAACW,OAAO,CAACE,OAAb,EAAsB;AACpBH,MAAAA,SAAS,CAACG,OAAV,CAAkBC,SAAlB,oBAAAJ,SAAS,CAACG,OAAV,CAAkBC,SAAlB;AACAH,MAAAA,OAAO,CAACE,OAAR,GAAkB,IAAlB;AACD,KAHD,MAGO;AACLH,MAAAA,SAAS,CAACG,OAAV,CAAkBE,UAAlB,oBAAAL,SAAS,CAACG,OAAV,CAAkBE,UAAlB;AACAJ,MAAAA,OAAO,CAACE,OAAR,GAAkB,KAAlB;AACD;AACF,GAR+B,EAQ7B,CAACP,MAAD,EAASC,QAAT,CAR6B,CAAhC;;AAUAP,EAAAA,SAAA,CAAgB;AACd,QAAI,CAACO,QAAD,IAAaD,MAAjB,EAAyB;AACvBI,MAAAA,SAAS,CAACG,OAAV,CAAkBG,WAAlB,oBAAAN,SAAS,CAACG,OAAV,CAAkBG,WAAlB;AACD,KAFD,MAEO,IAAI,CAACV,MAAD,IAAWC,QAAf,EAAyB;AAC9BG,MAAAA,SAAS,CAACG,OAAV,CAAkBI,YAAlB,oBAAAP,SAAS,CAACG,OAAV,CAAkBI,YAAlB;AACD;AACF,GAND,EAMG,CAACX,MAAD,EAASC,QAAT,CANH;;AAQA,SAAO;AAAEK,IAAAA,uBAAuB,EAAvBA;AAAF,GAAP;AACD,CA7BM;;AA+BP,IAAMJ,WAAW,GAAG,SAAdA,WAAc,CAAKU,KAAL;AAClB,MAAMC,GAAG,GAAGnB,MAAA,EAAZ;AAEAA,EAAAA,SAAA,CAAgB;AACdmB,IAAAA,GAAG,CAACN,OAAJ,GAAcK,KAAd;AACD,GAFD;AAIA,SAAOC,GAAG,CAACN,OAAX;AACD,CARD;;ACtDA,IAAMO,MAAM,GAAsC;AAChDC,EAAAA,OAAO,EAAE;AACPtC,IAAAA,QAAQ,EAAE,OADH;AAEPC,IAAAA,GAAG,EAAE,CAFE;AAGPE,IAAAA,MAAM,EAAE,CAHD;AAIPD,IAAAA,IAAI,EAAE,CAJC;AAKPE,IAAAA,KAAK,EAAE,CALA;AAMPmC,IAAAA,MAAM,EAAE,OAND;AAOPjD,IAAAA,QAAQ,EAAE;AAPH,GADuC;AAUhDkD,EAAAA,QAAQ,EAAE;AACRD,IAAAA,MAAM,EAAE,CADA;AAERvC,IAAAA,QAAQ,EAAE,OAFF;AAGRC,IAAAA,GAAG,EAAE,CAHG;AAIRC,IAAAA,IAAI,EAAE,CAJE;AAKRuC,IAAAA,KAAK,EAAE,MALC;AAMRC,IAAAA,MAAM,EAAE,MANA;AAORrD,IAAAA,eAAe,EAAE,uBAPT;AAQRsD,IAAAA,WAAW,EAAE;AARL,GAVsC;AAoBhDC,EAAAA,SAAS,EAAE;AACTL,IAAAA,MAAM,EAAE,CADC;AAETvC,IAAAA,QAAQ,EAAE,UAFD;AAGTE,IAAAA,IAAI,EAAE,CAHG;AAITC,IAAAA,MAAM,EAAE,CAJC;AAKTsC,IAAAA,KAAK,EAAE,MALE;AAMTpD,IAAAA,eAAe,EAAE,MANR;AAOTK,IAAAA,oBAAoB,EAAE,KAPb;AAQTC,IAAAA,mBAAmB,EAAE,KARZ;AASTkD,IAAAA,SAAS,EAAE,kCATF;AAUTC,IAAAA,OAAO,EAAE,MAVA;AAWTC,IAAAA,aAAa,EAAE;AAXN,GApBqC;AAiChDC,EAAAA,aAAa,EAAE;AACbP,IAAAA,KAAK,EAAE;AADM,GAjCiC;AAoChDQ,EAAAA,MAAM,EAAE;AACNP,IAAAA,MAAM,EAAE,MADF;AAEND,IAAAA,KAAK,EAAE,MAFD;AAGNzC,IAAAA,QAAQ,EAAE,UAHJ;AAIN8C,IAAAA,OAAO,EAAE,MAJH;AAKNI,IAAAA,UAAU,EAAE,QALN;AAMNC,IAAAA,cAAc,EAAE;AANV,GApCwC;AA4ChDC,EAAAA,SAAS,EAAE;AACTX,IAAAA,KAAK,EAAE,MADE;AAETC,IAAAA,MAAM,EAAE,KAFC;AAGTW,IAAAA,YAAY,EAAE,MAHL;AAIThE,IAAAA,eAAe,EAAE;AAJR,GA5CqC;AAkDhDiE,EAAAA,OAAO,EAAE;AACPC,IAAAA,IAAI,EAAE,CADC;AAEPjE,IAAAA,QAAQ,EAAE,MAFH;AAGPU,IAAAA,QAAQ,EAAE;AAHH;AAlDuC,CAAlD;;ACcA,IAAMwD,KAAK,gBAAGvC,UAAA,CACZ,gBAiBEmB,GAjBF;MAEIqB,gBAAAA;MACAlC,cAAAA;MACAmC,eAAAA;MACAzB,mBAAAA;MACAF,iBAAAA;MACAG,oBAAAA;MACAF,kBAAAA;MACA2B,cAAAA;MACAC,kBAAAA;8BACAC;MAAAA,4CAAc;MACdlF,cAAAA;+BACAmF;MAAAA,8CAAe;AAAEC,IAAAA,SAAS,EAAE,GAAb;AAAkBC,IAAAA,OAAO,EAAE,EAA3B;AAA+BC,IAAAA,IAAI,EAAE;AAArC;8BACfC;MAAAA,4CAAc;MACXC;;wBAIyBlD,QAAA,CAAe,KAAf;MAAvBmD;MAASC;;yBACkBpD,QAAA,CAAe,KAAf;MAA3BqD;MAAYC;;AACnB,MAAMC,QAAQ,GAAGvD,MAAA,CAAkB,IAAlB,CAAjB;AACA,MAAMU,SAAS,GAAGV,MAAA,CAAa;AAAEgB,IAAAA,WAAW,EAAXA,WAAF;AAAeF,IAAAA,SAAS,EAATA,SAAf;AAA0BG,IAAAA,YAAY,EAAZA,YAA1B;AAAwCF,IAAAA,UAAU,EAAVA;AAAxC,GAAb,CAAlB;;AACA,MAAMyC,iBAAiB,GAAGC,cAAc,CAAC,CAAD,CAAxC;AACA,MAAMC,UAAU,GAAGD,cAAc,CAAC3G,SAAS,GAAGC,MAAM,CAACkB,WAAV,GAAwB,CAAlC,CAAjC;AACA,MAAM0F,YAAY,GAAGC,SAAS,CAACF,UAAD,EAAab,YAAb,CAA9B;AACA,MAAMgB,CAAC,GAAGR,UAAU,GAAGK,UAAH,GAAgBC,YAApC;AACA,MAAMG,aAAa,GAAGxD,MAAM,GAAG,MAAH,GAAY,MAAxC;AAEA,MAAMyD,UAAU,GAAG/D,WAAA,CAAkB,UAACgE,CAAD;QAAMC,cAAAA;AACzC;AACA,QAAMC,QAAQ,GAAGR,UAAU,CAACS,WAAX,EAAjB;AACA,QAAID,QAAQ,GAAG,CAAf,EAAkBV,iBAAiB,CAACY,GAAlB,CAAsB,EAAtB;AAClB,QAAIF,QAAQ,GAAG,CAAf,EAAkBV,iBAAiB,CAACY,GAAlB,CAAsB,CAAC,EAAvB;;AAGlBV,IAAAA,UAAU,CAACU,GAAX,CAAe9G,IAAI,CAAC+G,GAAL,CAASX,UAAU,CAACY,GAAX,KAAmBL,KAAK,CAACJ,CAAlC,EAAqC,CAArC,CAAf;AACD,GARkB,EAQhB,EARgB,CAAnB;;AAUA,MAAMU,eAAe,GAAGvE,WAAA,CAAkB;AACxC;AACA0D,IAAAA,UAAU,CAACU,GAAX,CAAeT,YAAY,CAACW,GAAb,EAAf;AACAhB,IAAAA,WAAW,CAAC,IAAD,CAAX;AACD,GAJuB,EAIrB,EAJqB,CAAxB;;AAMA,MAAMkB,aAAa,GAAGxE,WAAA,CACpB,UAACgE,CAAD;QAAME,iBAAAA;;AACJ,QAAIA,QAAQ,CAACL,CAAT,GAAa,GAAjB,EAAsB;AACpB;AACApB,MAAAA,OAAO;AACR,KAHD,MAGO;AACL,UAAMgC,OAAO,GAAGlB,QAAQ,CAAC1C,OAAzB;AACA,UAAM6D,aAAa,GAAGD,OAAO,CAACE,qBAAR,GAAgClD,MAAtD;AACA,UAAMmD,MAAM,GAAGjC,UAAU,GACrB3F,UAAU,CACR2F,UAAU,CAACkC,GAAX,CAAe,UAAA9G,CAAC;AAAA,eAAI2G,aAAa,GAAG3G,CAApB;AAAA,OAAhB,CADQ,EAER2F,UAAU,CAACY,GAAX,EAFQ,CADW,GAKrBZ,UAAU,CAACY,GAAX,KAAmBI,aAAnB,GAAmC,GAAnC;AAAA,QACAA,aADA,GAEA,CAPJ,CAHK;;AAaLf,MAAAA,YAAY,CAACS,GAAb,CAAiBQ,MAAjB;;AAEA,UAAIjC,UAAU,IAAID,MAAlB,EAA0B;AACxB,YAAMoC,SAAS,GAAGxH,IAAI,CAACC,GAAL,CAASD,IAAI,CAACyH,KAAL,CAAWpC,UAAU,CAAC,CAAD,CAAV,GAAgBiC,MAA3B,CAAT,CAAlB;AACA,YAAMI,SAAS,GAAGrC,UAAU,CAACsC,OAAX,CAAmBH,SAAnB,CAAlB;AACApC,QAAAA,MAAM,CAACsC,SAAD,CAAN;AACD;;AAED,UAAIJ,MAAM,IAAIF,aAAd,EAA6BjC,OAAO;AAEpCa,MAAAA,WAAW,CAAC,KAAD,CAAX;AACD;;;AAGDE,IAAAA,iBAAiB,CAACY,GAAlB,CAAsB,CAAtB;AACD,GAjCmB,EAkCpB,CAAC3B,OAAD,EAAUC,MAAV,CAlCoB;AAAA,GAAtB;AAsCA;;AACA1C,EAAAA,SAAA,CAAgB;AACdU,IAAAA,SAAS,CAACG,OAAV,GAAoB;AAAEG,MAAAA,WAAW,EAAXA,WAAF;AAAeF,MAAAA,SAAS,EAATA,SAAf;AAA0BG,MAAAA,YAAY,EAAZA,YAA1B;AAAwCF,MAAAA,UAAU,EAAVA;AAAxC,KAApB;AACD,GAFD;AAIAf,EAAAA,SAAA,CAAgB;AACdoD,IAAAA,UAAU,CAAC,IAAD,CAAV;AACD,GAFD,EAEG,EAFH;;AAKApD,EAAAA,SAAA,CAAgB;AACd,QAAI,CAAC2C,UAAD,IAAe,CAACD,MAAhB,IAA0B,CAACS,OAA/B,EAAwC;AACxC,QAAM6B,SAAS,GAAG1E,MAAM,GAAGsC,WAAH,GAAiBD,UAAU,CAACuC,MAAX,GAAoB,CAA7D;AACAxC,IAAAA,MAAM,CAACsC,SAAD,CAAN;AACD,GAJD,EAIG,CAAC1E,MAAD,CAJH;AAMAN,EAAAA,mBAAA,CAA0BmB,GAA1B,EAA+B;AAAA,WAAO;AACpCyD,MAAAA,MAAM,EAAE,gBAACI,SAAD;AACN,YAAIrC,UAAU,IAAIA,UAAU,CAACqC,SAAD,CAAV,KAA0B/E,SAA5C,EAAuD;AACrD,cAAMwE,OAAO,GAAGlB,QAAQ,CAAC1C,OAAzB;AACA,cAAM6D,aAAa,GAAGD,OAAO,CAACE,qBAAR,GAAgClD,MAAtD;AACA,cAAMmD,MAAM,GAAGF,aAAa,GAAG/B,UAAU,CAACqC,SAAD,CAAzC;AAEArB,UAAAA,YAAY,CAACS,GAAb,CAAiBQ,MAAjB;AACA,cAAIlC,MAAJ,EAAYA,MAAM,CAACsC,SAAD,CAAN;AACZ,cAAIJ,MAAM,IAAIF,aAAd,EAA6BjC,OAAO;AACrC;AACF;AAXmC,KAAP;AAAA,GAA/B;AAcApC,EAAAA,cAAc,CAACC,MAAD,EAAS5C,MAAT,CAAd;AAEA,MAAMyH,SAAS,GAAGlC,WAAW,GACxB,EADwB,GAEzB;AACEmC,IAAAA,IAAI,EAAE,GADR;AAEEC,IAAAA,WAAW,EAAE,CAFf;AAGEC,IAAAA,eAAe,EAAE;AAAEtG,MAAAA,GAAG,EAAE,CAAP;AAAUE,MAAAA,MAAM,EAAE;AAAlB,KAHnB;AAIEqG,IAAAA,YAAY,EAAE,KAJhB;AAKEC,IAAAA,MAAM,EAAEzB,UALV;AAME0B,IAAAA,WAAW,EAAElB,eANf;AAOEmB,IAAAA,SAAS,EAAElB;AAPb,GAFJ;AAYA,MAAMrE,OAAO,GAAG;AACd0D,IAAAA,CAAC,EAADA,CADc;AAEdN,IAAAA,QAAQ,EAARA,QAFc;AAGdjD,IAAAA,MAAM,EAANA,MAHc;AAId+C,IAAAA,UAAU,EAAVA,UAJc;AAKdT,IAAAA,WAAW,EAAXA,WALc;AAMdD,IAAAA,UAAU,EAAVA,UANc;AAOda,IAAAA,iBAAiB,EAAjBA,iBAPc;AAQd9C,IAAAA,SAAS,EAATA,SARc;AASdyE,IAAAA,SAAS,EAATA;AATc,GAAhB;;AAYA,MAAMQ,YAAY,gBACbzC,IADa;AAEhB/B,IAAAA,GAAG,EAAHA,GAFgB;AAGhBhD,IAAAA,KAAK,eACAiD,MAAM,CAACC,OADP;AAEHyC,MAAAA,aAAa,EAAbA;AAFG;AAHW,IAAlB;;AASA,SAAOX,OAAO,GACZyC,YAAA,CACE5F,aAAA,CAACD,YAAY,CAAC8F,QAAd;AAAuBC,IAAAA,KAAK,EAAE3F;GAA9B,EACEH,aAAA,MAAA,oBAAS2F,aAAT,EACE3F,aAAA,CAAC+F,eAAD,MAAA,EAEGzF,MAAM,GACHN,QAAA,CAAe6E,GAAf,CAAmBrC,QAAnB,EAA6B,UAACwD,KAAD,EAAaC,CAAb;AAAA,WAC3BjG,YAAA,CAAmBgG,KAAnB,EAA0B;AAAEE,MAAAA,GAAG,mBAAiBD;AAAtB,KAA1B,CAD2B;AAAA,GAA7B,CADG,GAIH,IANN,CADF,CADF,CADF,EAaErI,QAAQ,CAACD,IAbX,CADY;AAkBZ;AACAqC,EAAAA,aAAA,MAAA,oBAAS2F,aAAT,CAnBF;AAqBD,CA1KW,CAAd;;ACPA,IAAMQ,UAAU,GAAG,8CAAnB;AAEA,IAAMC,cAAc,gBAAGpG,UAAA,CACrB,gBAAoCmB,GAApC;MAAGqB,gBAAAA;wBAAUrE;MAAAA,gCAAQ;MAAO+E;;yBAQtBhD,eAAe;MANjB2D,qBAAAA;MACAvD,0BAAAA;MACAI,6BAAAA;MACAiC,8BAAAA;+CACAC;MAAAA,iDAAc;MACdW,4BAAAA;;2BAGkC9C,iBAAiB,CAACH,MAAD,EAASI,SAAT;MAA7CE,6CAAAA;;AACR,MAAMyF,QAAQ,GAAG1D,UAAU,GAAGA,UAAU,CAAC,CAAD,CAAV,GAAgBA,UAAU,CAACC,WAAD,CAA7B,GAA6C,CAAxE;AACA,MAAM5E,CAAC,GAAG2E,UAAU,GAAGA,UAAU,CAAC,CAAD,CAAb,GAAmB,IAAvC;AACA,MAAM2D,WAAW,GAAGtI,CAAC,YAAUA,CAAV,YAAkBmI,UAAlB,SAAkCA,UAAvD;AAEA,SACEnG,aAAA,CAACuG,MAAM,CAACC,GAAR,oBACMtD;AACJ/B,IAAAA,GAAG,EAAEsF,SAAS,CAAC,CAAClD,QAAD,EAAWpC,GAAX,CAAD;AACduF,IAAAA,SAAS,EAAC;AACVvI,IAAAA,KAAK,eAAOiD,MAAM,CAACO,SAAd;AAAyBF,MAAAA,MAAM,EAAE6E;AAAjC,OAAiDnI,KAAjD;AAAwD0F,MAAAA,CAAC,EAADA;AAAxD;AACL8C,IAAAA,OAAO,EAAE;AAAE9C,MAAAA,CAAC,EAAE9G,MAAM,CAACkB;AAAZ;AACT2I,IAAAA,OAAO,EAAE;AAAE/C,MAAAA,CAAC,EAAEwC,QAAL;AAAe9H,MAAAA,UAAU,EAAE;AAAEsI,QAAAA,IAAI,EAAE;AAAR;AAA3B;AACTC,IAAAA,IAAI,EAAE;AAAEjD,MAAAA,CAAC,EAAE9G,MAAM,CAACkB;AAAZ;AACN8I,IAAAA,mBAAmB,EAAEnG;IARvB,EAUG4B,QAVH,CADF;AAcD,CA9BoB,CAAvB;;ACJA,IAAMwE,YAAY,gBAAGhH,UAAA,CACnB,gBAAyDmB,GAAzD;MAAGqB,gBAAAA;8BAAUS;MAAAA,4CAAc;wBAAO9E;MAAAA,gCAAQ;MAAO+E;;yBACzBhD,eAAe;MAA7BiF,6BAAAA;;AAER,SACEnF,aAAA,CAACuG,MAAM,CAACC,GAAR,oBACMtD;AACJ/B,IAAAA,GAAG,EAAEA;AACLuF,IAAAA,SAAS,EAAC;AACVvI,IAAAA,KAAK,eAAOiD,MAAM,CAACiB,OAAd,EAA0BlE,KAA1B;KACA8E,WAAW,GAAG,EAAH,GAAQkC,UAL1B,EAOG3C,QAPH,CADF;AAWD,CAfkB,CAArB;;ACAA,IAAMyE,WAAW,gBAAGjH,UAAA,CAClB,gBAAyDmB,GAAzD;MAAGqB,gBAAAA;8BAAUS;MAAAA,4CAAc;wBAAO9E;MAAAA,gCAAQ;MAAO+E;;yBACNhD,eAAe;MAAhDsD,qCAAAA;MAAmB2B,6BAAAA;;AAE3B,MAAM+B,mBAAmB,GAAGC,YAAY,CACtC3D,iBADsC,EAEtC,UAAA4D,CAAC;AAAA,uCAA8BA,CAA9B;AAAA,GAFqC,CAAxC;AAKA,MAAMC,mBAAmB,GAAGF,YAAY,CACtC3D,iBADsC,EAEtC,UAAA4D,CAAC;AAAA,wCAA+B,CAAC,CAAD,GAAKA,CAApC;AAAA,GAFqC,CAAxC;AAKA,SACEpH,aAAA,CAACuG,MAAM,CAACC,GAAR,oBACMtD;AACJ/B,IAAAA,GAAG,EAAEA;AACLhD,IAAAA,KAAK,eAAOiD,MAAM,CAACW,aAAd,EAAgC5D,KAAhC;KACA8E,WAAW,GAAG,EAAH,GAAQkC,UAJ1B,EAMG3C,QAAQ,IACPxC,aAAA,MAAA;AAAK0G,IAAAA,SAAS,EAAC;AAA2BvI,IAAAA,KAAK,EAAEiD,MAAM,CAACY;GAAxD,EACEhC,aAAA,CAACuG,MAAM,CAACe,IAAR;AACEZ,IAAAA,SAAS,EAAC;AACVvI,IAAAA,KAAK,eAAOiD,MAAM,CAACe,SAAd;AAAyB3D,MAAAA,SAAS,EAAE0I;AAApC;GAFP,CADF,EAKElH,aAAA,CAACuG,MAAM,CAACe,IAAR;AACEZ,IAAAA,SAAS,EAAC;AACVvI,IAAAA,KAAK,eAAOiD,MAAM,CAACe,SAAd;AAAyB3D,MAAAA,SAAS,EAAE6I;AAApC;GAFP,CALF,CAPJ,CADF;AAqBD,CAnCiB,CAApB;;ACDA,IAAME,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD;AAAA,SAAgB,CAAC,CAACA,KAAK,CAACC,OAAR,IAAmB,CAAC,CAACD,KAAK,CAACE,KAA3C;AAAA,CAApB;;AAEA,IAAMC,aAAa,gBAAG3H,UAAA,CACpB,gBAA0BmB,GAA1B;wBAAGhD;MAAAA,gCAAQ;MAAO+E;;AAChB,MAAM0E,IAAI,GAAGL,WAAW,CAACrE,IAAD,CAAX,GAAoBqD,MAAM,CAACsB,MAA3B,GAAoCtB,MAAM,CAACC,GAAxD;AAEA,SACExG,aAAA,CAAC4H,IAAD,oBACM1E;AACJ/B,IAAAA,GAAG,EAAEA;AACLuF,IAAAA,SAAS,EAAC;AACVvI,IAAAA,KAAK,eAAOiD,MAAM,CAACG,QAAd,EAA2BpD,KAA3B;AACLwI,IAAAA,OAAO,EAAE;AAAEvH,MAAAA,OAAO,EAAE;AAAX;AACTwH,IAAAA,OAAO,EAAE;AAAExH,MAAAA,OAAO,EAAE;AAAX;AACT0H,IAAAA,IAAI,EAAE;AAAE1H,MAAAA,OAAO,EAAE;AAAX;IAPR,CADF;AAWD,CAfmB,CAAtB;;ACUA,IAAM0I,MAAM,GAAQvF,KAApB;AACAuF,MAAM,CAACC,SAAP,GAAmB3B,cAAnB;AACA0B,MAAM,CAACE,MAAP,GAAgBf,WAAhB;AACAa,MAAM,CAACG,OAAP,GAAiBjB,YAAjB;AACAc,MAAM,CAACI,QAAP,GAAkBP,aAAlB;AAEA,IAAMQ,aAAa,GAA0CL,MAA7D;;;;"}
|
|
1
|
+
{"version":3,"file":"react-modal-sheet.esm.js","sources":["../src/utils.ts","../src/context.tsx","../src/hooks.tsx","../src/styles.ts","../src/sheet.tsx","../src/SheetContainer.tsx","../src/SheetContent.tsx","../src/SheetHeader.tsx","../src/SheetBackdrop.tsx","../src/index.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useState } from 'react';\n\nexport const isSSR = typeof window === 'undefined';\n\nexport const getClosest = (nums: number[], goal: number) => {\n return nums.reduce((prev, curr) => {\n return Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev;\n });\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\nconst useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;\n\nexport function useWindowHeight() {\n const [windowHeight, setWindowHeight] = 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 const 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","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","import * as React from 'react';\n\nimport { SheetEvents } from './types';\nimport { applyRootStyles, cleanupRootStyles } from './utils';\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\nconst 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","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 zIndex: 9999999,\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 },\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';\n\nimport {\n animate,\n useMotionValue,\n PanInfo,\n AnimatePresence,\n} from 'framer-motion';\n\nimport { SheetContextType, SheetProps } from './types';\nimport { getClosest, inDescendingOrder, isSSR, useWindowHeight } from './utils';\nimport { SheetContext } from './context';\nimport { useModalEffect } from './hooks';\nimport styles from './styles';\n\nconst Sheet = React.forwardRef<any, SheetProps>(\n (\n {\n children,\n isOpen,\n onClose,\n onOpenStart,\n onOpenEnd,\n onCloseStart,\n onCloseEnd,\n onSnap,\n snapPoints,\n initialSnap = 0,\n rootId,\n springConfig = { stiffness: 300, damping: 30, mass: 0.2 },\n disableDrag = false,\n ...rest\n },\n ref\n ) => {\n const sheetRef = React.useRef<any>(null);\n const callbacks = React.useRef({ onOpenStart, onOpenEnd, onCloseStart, onCloseEnd }); // prettier-ignore\n const indicatorRotation = useMotionValue(0);\n const windowHeight = useWindowHeight();\n const y = useMotionValue(isOpen ? windowHeight : 0);\n\n if (snapPoints) {\n // Convert negative / percentage snap points to absolute values\n snapPoints = snapPoints.map(point => {\n if (point > 0 && point <= 1) return point * windowHeight; // percentage values e.g. between 0.0 and 1.0\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 handleDrag = React.useCallback((_, { delta }: PanInfo) => {\n // Update drag indicator rotation based on drag velocity\n const velocity = y.getVelocity();\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 }, []); // eslint-disable-line\n\n const handleDragEnd = React.useCallback(\n (_, { velocity }: PanInfo) => {\n if (velocity.y > 500) {\n // User flicked the sheet down\n onClose();\n } else {\n const sheetEl = sheetRef.current as HTMLDivElement;\n const contentHeight = sheetEl.getBoundingClientRect().height;\n const snapTo = snapPoints\n ? getClosest(snapPoints.map(p => contentHeight - p), y.get()) // prettier-ignore\n : y.get() / contentHeight > 0.6 // Close if dragged over 60%\n ? contentHeight\n : 0;\n\n // Update the spring value so that the sheet is animated to the snap point\n animate(y, snapTo, { type: 'spring', ...springConfig });\n\n if (snapPoints && onSnap) {\n const snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));\n const snapIndex = snapPoints.indexOf(snapValue);\n onSnap(snapIndex);\n }\n\n if (snapTo >= contentHeight) onClose();\n }\n\n // Reset indicator rotation after dragging\n indicatorRotation.set(0);\n },\n [onClose, onSnap] // eslint-disable-line\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 React.useEffect(() => {\n callbacks.current = { onOpenStart, onOpenEnd, onCloseStart, onCloseEnd };\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 snapTo: (snapIndex: number) => {\n if (snapPoints && snapPoints[snapIndex] !== undefined) {\n const sheetEl = sheetRef.current as HTMLDivElement;\n const contentHeight = sheetEl.getBoundingClientRect().height;\n const snapTo = contentHeight - snapPoints[snapIndex];\n\n animate(y, snapTo, { type: 'spring', ...springConfig });\n if (onSnap) onSnap(snapIndex);\n if (snapTo >= contentHeight) onClose();\n }\n },\n }));\n\n useModalEffect(isOpen, rootId);\n\n const dragProps = disableDrag\n ? ({} as any)\n : {\n drag: 'y' as const,\n dragElastic: 0,\n dragConstraints: { top: 0, bottom: 0 },\n dragMomentum: false,\n onDrag: handleDrag,\n onDragEnd: handleDragEnd,\n };\n\n const context: SheetContextType = {\n y,\n sheetRef,\n isOpen,\n initialSnap,\n snapPoints,\n indicatorRotation,\n callbacks,\n dragProps,\n windowHeight,\n springConfig,\n };\n\n const wrapperProps = {\n ...rest,\n ref,\n style: styles.wrapper,\n };\n\n const sheet = (\n <SheetContext.Provider value={context}>\n <div {...wrapperProps}>\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 </div>\n </SheetContext.Provider>\n );\n\n if (isSSR) return sheet;\n\n return ReactDOM.createPortal(sheet, document.body);\n }\n);\n\nexport default Sheet;\n","import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport mergeRefs from 'react-merge-refs';\n\nimport { SheetContainerProps } from './types';\nimport { useSheetContext } from './context';\nimport { useEventCallbacks } from './hooks';\nimport styles from './styles';\n\nconst MAX_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';\n\nconst SheetContainer = React.forwardRef<any, SheetContainerProps>(\n ({ children, style = {}, ...rest }, ref) => {\n const {\n y,\n isOpen,\n callbacks,\n snapPoints,\n initialSnap = 0,\n sheetRef,\n windowHeight,\n springConfig,\n } = useSheetContext();\n\n const { handleAnimationComplete } = useEventCallbacks(isOpen, callbacks);\n const initialY = snapPoints ? snapPoints[0] - snapPoints[initialSnap] : 0;\n const h = snapPoints ? snapPoints[0] : null;\n const sheetHeight = h ? `min(${h}px, ${MAX_HEIGHT})` : MAX_HEIGHT;\n\n return (\n <motion.div\n {...rest}\n ref={mergeRefs([sheetRef, ref])}\n className=\"react-modal-sheet-container\"\n style={{ ...styles.container, height: sheetHeight, ...style, y }}\n initial={{ y: windowHeight }}\n animate={{\n y: initialY,\n transition: { type: 'spring', ...springConfig },\n }}\n exit={{ y: windowHeight }}\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 styles from './styles';\nimport { useSheetContext } from './context';\n\nconst SheetContent = React.forwardRef<any, SheetDraggableProps>(\n ({ children, disableDrag = false, style = {}, ...rest }, ref) => {\n const { dragProps } = useSheetContext();\n\n return (\n <motion.div\n {...rest}\n ref={ref}\n className=\"react-modal-sheet-content\"\n style={{ ...styles.content, ...style }}\n {...(disableDrag ? {} : 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, disableDrag = false, style = {}, ...rest }, ref) => {\n const { indicatorRotation, dragProps } = useSheetContext();\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 {...(disableDrag ? {} : 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 = {}, ...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\"\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 Sheet from './sheet';\nimport SheetContainer from './SheetContainer';\nimport SheetContent from './SheetContent';\nimport SheetHeader from './SheetHeader';\nimport SheetBackdrop from './SheetBackdrop';\n\nexport type SheetRef = {\n snapTo: (index: number) => void;\n};\n\ntype SheetCompoundComponent = {\n Container: typeof SheetContainer;\n Header: typeof SheetHeader;\n Content: typeof SheetContent;\n Backdrop: typeof SheetBackdrop;\n};\n\n// HACK: this is needed to get the typing to work properly...\nconst _Sheet: any = Sheet;\n_Sheet.Container = SheetContainer;\n_Sheet.Header = SheetHeader;\n_Sheet.Content = SheetContent;\n_Sheet.Backdrop = SheetBackdrop;\n\nconst SheetCompound: typeof Sheet & SheetCompoundComponent = _Sheet;\n\nexport default SheetCompound;\n"],"names":["isSSR","window","getClosest","nums","goal","reduce","prev","curr","Math","abs","highlightId","applyRootStyles","rootId","body","document","querySelector","root","p","h","innerHeight","s","style","backgroundColor","overflow","willChange","transition","transform","borderTopRightRadius","borderTopLeftRadius","highlight","createElement","setAttribute","id","position","top","left","bottom","right","opacity","appendChild","requestAnimationFrame","cleanupRootStyles","getElementById","onTransitionEnd","removeProperty","removeEventListener","parentNode","removeChild","addEventListener","useIsomorphicLayoutEffect","useEffect","useLayoutEffect","useWindowHeight","useState","windowHeight","setWindowHeight","updateHeight","inDescendingOrder","arr","i","length","SheetContext","React","undefined","useSheetContext","context","Error","useModalEffect","isOpen","prevOpen","usePrevious","useEventCallbacks","callbacks","didOpen","handleAnimationComplete","current","onOpenEnd","onCloseEnd","onOpenStart","onCloseStart","state","ref","styles","wrapper","zIndex","pointerEvents","backdrop","width","height","touchAction","container","boxShadow","display","flexDirection","headerWrapper","header","alignItems","justifyContent","indicator","borderRadius","content","flex","Sheet","children","onClose","onSnap","snapPoints","initialSnap","springConfig","stiffness","damping","mass","disableDrag","rest","sheetRef","indicatorRotation","useMotionValue","y","map","point","console","assert","handleDrag","_","delta","velocity","getVelocity","set","max","get","handleDragEnd","sheetEl","contentHeight","getBoundingClientRect","snapTo","animate","type","snapValue","round","snapIndex","indexOf","dragProps","drag","dragElastic","dragConstraints","dragMomentum","onDrag","onDragEnd","wrapperProps","sheet","Provider","value","AnimatePresence","child","key","ReactDOM","MAX_HEIGHT","SheetContainer","initialY","sheetHeight","motion","div","mergeRefs","className","initial","exit","onAnimationComplete","SheetContent","SheetHeader","indicator1Transform","useTransform","r","indicator2Transform","span","isClickable","props","onClick","onTap","SheetBackdrop","Comp","button","_Sheet","Container","Header","Content","Backdrop","SheetCompound"],"mappings":"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"}
|
package/dist/sheet.d.ts
CHANGED
|
@@ -8,5 +8,5 @@ declare const Sheet: React.ForwardRefExoticComponent<{
|
|
|
8
8
|
initialSnap?: number | undefined;
|
|
9
9
|
springConfig?: import("popmotion").SpringOptions | undefined;
|
|
10
10
|
disableDrag?: boolean | undefined;
|
|
11
|
-
} & import("./types").SheetEvents & React.RefAttributes<any>>;
|
|
11
|
+
} & import("./types").SheetEvents & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<any>>;
|
|
12
12
|
export default Sheet;
|
package/dist/types.d.ts
CHANGED
|
@@ -37,11 +37,12 @@ export declare type SheetDragProps = {
|
|
|
37
37
|
export declare type SheetContextType = {
|
|
38
38
|
y: MotionValue<any>;
|
|
39
39
|
sheetRef: React.MutableRefObject<any>;
|
|
40
|
-
isDragging: boolean;
|
|
41
40
|
isOpen: boolean;
|
|
42
41
|
snapPoints: SheetProps['snapPoints'];
|
|
43
42
|
initialSnap: SheetProps['initialSnap'];
|
|
44
43
|
indicatorRotation: MotionValue<number>;
|
|
45
44
|
callbacks: React.MutableRefObject<SheetEvents>;
|
|
46
45
|
dragProps: SheetDragProps;
|
|
46
|
+
windowHeight: number;
|
|
47
|
+
springConfig: Parameters<typeof useSpring>[1];
|
|
47
48
|
};
|
package/dist/utils.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
export declare const
|
|
1
|
+
export declare const isSSR: boolean;
|
|
2
2
|
export declare const getClosest: (nums: number[], goal: number) => number;
|
|
3
3
|
export declare function applyRootStyles(rootId: string): void;
|
|
4
4
|
export declare function cleanupRootStyles(rootId: string): void;
|
|
5
|
+
export declare function useWindowHeight(): number;
|
|
6
|
+
export declare const inDescendingOrder: (arr: number[]) => boolean;
|