react-modal-sheet 1.6.0 → 1.6.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 +10 -5
- package/dist/react-modal-sheet.cjs.development.js +16 -6
- 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 +17 -7
- package/dist/react-modal-sheet.esm.js.map +1 -1
- package/package.json +2 -1
- package/src/SheetContainer.tsx +8 -2
- package/src/sheet.tsx +14 -7
package/README.md
CHANGED
|
@@ -353,11 +353,16 @@ The example below utilizes React Aria to achieve an accessible modal-like bottom
|
|
|
353
353
|
```jsx
|
|
354
354
|
import React from 'react';
|
|
355
355
|
import Sheet from 'react-modal-sheet';
|
|
356
|
-
import { useOverlayTriggerState } from '
|
|
357
|
-
|
|
358
|
-
import {
|
|
359
|
-
|
|
360
|
-
|
|
356
|
+
import { useOverlayTriggerState } from 'react-stately';
|
|
357
|
+
|
|
358
|
+
import {
|
|
359
|
+
useOverlay,
|
|
360
|
+
useModal,
|
|
361
|
+
OverlayProvider,
|
|
362
|
+
FocusScope,
|
|
363
|
+
useButton,
|
|
364
|
+
useDialog,
|
|
365
|
+
} from 'react-aria';
|
|
361
366
|
|
|
362
367
|
const A11yExample = () => {
|
|
363
368
|
const sheetState = useOverlayTriggerState({});
|
|
@@ -6,6 +6,7 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
|
|
|
6
6
|
|
|
7
7
|
var React = require('react');
|
|
8
8
|
var ReactDOM = require('react-dom');
|
|
9
|
+
var overlays = require('@react-aria/overlays');
|
|
9
10
|
var framerMotion = require('framer-motion');
|
|
10
11
|
var mergeRefs = _interopDefault(require('react-merge-refs'));
|
|
11
12
|
|
|
@@ -300,7 +301,7 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
300
301
|
if (snapPoints) {
|
|
301
302
|
// Convert negative / percentage snap points to absolute values
|
|
302
303
|
snapPoints = snapPoints.map(function (point) {
|
|
303
|
-
if (point > 0 && point <= 1) return point * windowHeight; // percentage values e.g. between 0.0 and 1.0
|
|
304
|
+
if (point > 0 && point <= 1) return Math.round(point * windowHeight); // percentage values e.g. between 0.0 and 1.0
|
|
304
305
|
|
|
305
306
|
return point < 0 ? windowHeight + point : point; // negative values
|
|
306
307
|
});
|
|
@@ -326,11 +327,11 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
326
327
|
} else {
|
|
327
328
|
var sheetEl = sheetRef.current;
|
|
328
329
|
var contentHeight = sheetEl.getBoundingClientRect().height;
|
|
329
|
-
var snapTo = snapPoints ? getClosest(snapPoints.map(function (p) {
|
|
330
|
+
var snapTo = Math.round(snapPoints ? getClosest(snapPoints.map(function (p) {
|
|
330
331
|
return contentHeight - p;
|
|
331
332
|
}), y.get()) // prettier-ignore
|
|
332
333
|
: y.get() / contentHeight > 0.6 // Close if dragged over 60%
|
|
333
|
-
? contentHeight : 0; // Update the spring value so that the sheet is animated to the snap point
|
|
334
|
+
? contentHeight : 0); // Update the spring value so that the sheet is animated to the snap point
|
|
334
335
|
|
|
335
336
|
framerMotion.animate(y, snapTo, _extends({
|
|
336
337
|
type: 'spring'
|
|
@@ -338,7 +339,8 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
338
339
|
|
|
339
340
|
if (snapPoints && onSnap) {
|
|
340
341
|
var snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));
|
|
341
|
-
var snapIndex = snapPoints.indexOf(snapValue);
|
|
342
|
+
var snapIndex = snapPoints.indexOf(getClosest(snapPoints, snapValue)); // prettier-ignore
|
|
343
|
+
|
|
342
344
|
onSnap(snapIndex);
|
|
343
345
|
}
|
|
344
346
|
|
|
@@ -384,7 +386,12 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
384
386
|
}
|
|
385
387
|
};
|
|
386
388
|
});
|
|
387
|
-
useModalEffect(isOpen, rootId);
|
|
389
|
+
useModalEffect(isOpen, rootId); // Framer Motion should handle body scroll locking but it's not working
|
|
390
|
+
// properly on iOS. Scroll locking from React Aria seems to work much better.
|
|
391
|
+
|
|
392
|
+
overlays.usePreventScroll({
|
|
393
|
+
isDisabled: !isOpen
|
|
394
|
+
});
|
|
388
395
|
var dragProps = disableDrag ? {} : {
|
|
389
396
|
drag: 'y',
|
|
390
397
|
dragElastic: 0,
|
|
@@ -449,13 +456,16 @@ var SheetContainer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
449
456
|
var initialY = snapPoints ? snapPoints[0] - snapPoints[initialSnap] : 0;
|
|
450
457
|
var h = snapPoints ? snapPoints[0] : null;
|
|
451
458
|
var sheetHeight = h ? "min(" + h + "px, " + MAX_HEIGHT + ")" : MAX_HEIGHT;
|
|
459
|
+
var restrictedY = framerMotion.useTransform(y, function (value) {
|
|
460
|
+
return Math.max(value, 0);
|
|
461
|
+
});
|
|
452
462
|
return React.createElement(framerMotion.motion.div, Object.assign({}, rest, {
|
|
453
463
|
ref: mergeRefs([sheetRef, ref]),
|
|
454
464
|
className: "react-modal-sheet-container",
|
|
455
465
|
style: _extends({}, styles.container, {
|
|
456
466
|
height: sheetHeight
|
|
457
467
|
}, style, {
|
|
458
|
-
y:
|
|
468
|
+
y: restrictedY
|
|
459
469
|
}),
|
|
460
470
|
initial: {
|
|
461
471
|
y: windowHeight
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-modal-sheet.cjs.development.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 mountPoint,\n springConfig = { stiffness: 300, damping: 30, mass: 0.2 },\n disableDrag = false,\n style,\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\n // NOTE: the inital value for `y` doesn't matter since it is overwritten by\n // the value driven by the `AnimatePresence` component when the sheet is opened\n // and after that it is driven by the gestures and/or snapping\n const y = useMotionValue(0);\n\n 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 y,\n snapTo: (snapIndex: number) => {\n const sheetEl = sheetRef.current as HTMLDivElement | null;\n if (\n snapPoints &&\n snapPoints[snapIndex] !== undefined &&\n sheetEl !== null\n ) {\n const contentHeight = sheetEl.getBoundingClientRect().height;\n const snapTo = contentHeight - snapPoints[snapIndex];\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, ...style },\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, mountPoint ?? 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 { MotionValue } from 'framer-motion';\n\nimport Sheet from './sheet';\nimport SheetContainer from './SheetContainer';\nimport SheetContent from './SheetContent';\nimport SheetHeader from './SheetHeader';\nimport SheetBackdrop from './SheetBackdrop';\nimport { SheetCompound } from './types';\n\nexport type SheetRef = {\n y: MotionValue<number>;\n snapTo: (index: number) => void;\n};\n\n// HACK: this is needed to get the typing to work properly...\nconst _SheetCompound: any = Sheet;\n_SheetCompound.Container = SheetContainer;\n_SheetCompound.Header = SheetHeader;\n_SheetCompound.Content = SheetContent;\n_SheetCompound.Backdrop = SheetBackdrop;\n\nexport default _SheetCompound as SheetCompound;\n"],"names":["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","mountPoint","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","_SheetCompound","Container","Header","Content","Backdrop"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"react-modal-sheet.cjs.development.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';\nimport { usePreventScroll } from '@react-aria/overlays';\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 mountPoint,\n springConfig = { stiffness: 300, damping: 30, mass: 0.2 },\n disableDrag = false,\n style,\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\n // NOTE: the inital value for `y` doesn't matter since it is overwritten by\n // the value driven by the `AnimatePresence` component when the sheet is opened\n // and after that it is driven by the gestures and/or snapping\n const y = useMotionValue(0);\n\n if (snapPoints) {\n // Convert negative / percentage snap points to absolute values\n snapPoints = snapPoints.map(point => {\n if (point > 0 && point <= 1) return Math.round(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 = Math.round(\n 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\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(getClosest(snapPoints, snapValue)); // prettier-ignore\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 y,\n snapTo: (snapIndex: number) => {\n const sheetEl = sheetRef.current as HTMLDivElement | null;\n if (\n snapPoints &&\n snapPoints[snapIndex] !== undefined &&\n sheetEl !== null\n ) {\n const contentHeight = sheetEl.getBoundingClientRect().height;\n const snapTo = contentHeight - snapPoints[snapIndex];\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 // Framer Motion should handle body scroll locking but it's not working\n // properly on iOS. Scroll locking from React Aria seems to work much better.\n usePreventScroll({ isDisabled: !isOpen });\n\n const dragProps = 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, ...style },\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, mountPoint ?? document.body);\n }\n);\n\nexport default Sheet;\n","import * as React from 'react';\nimport { motion, useTransform } 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 const restrictedY = useTransform(y, value => Math.max(value, 0));\n\n return (\n <motion.div\n {...rest}\n ref={mergeRefs([sheetRef, ref])}\n className=\"react-modal-sheet-container\"\n style={{\n ...styles.container,\n height: sheetHeight,\n ...style,\n y: restrictedY,\n }}\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 { MotionValue } from 'framer-motion';\n\nimport Sheet from './sheet';\nimport SheetContainer from './SheetContainer';\nimport SheetContent from './SheetContent';\nimport SheetHeader from './SheetHeader';\nimport SheetBackdrop from './SheetBackdrop';\nimport { SheetCompound } from './types';\n\nexport type SheetRef = {\n y: MotionValue<number>;\n snapTo: (index: number) => void;\n};\n\n// HACK: this is needed to get the typing to work properly...\nconst _SheetCompound: any = Sheet;\n_SheetCompound.Container = SheetContainer;\n_SheetCompound.Header = SheetHeader;\n_SheetCompound.Content = SheetContent;\n_SheetCompound.Backdrop = SheetBackdrop;\n\nexport default _SheetCompound as SheetCompound;\n"],"names":["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","mountPoint","springConfig","stiffness","damping","mass","disableDrag","rest","sheetRef","indicatorRotation","useMotionValue","y","map","point","round","console","assert","handleDrag","_","delta","velocity","getVelocity","set","max","get","handleDragEnd","sheetEl","contentHeight","getBoundingClientRect","snapTo","animate","type","snapValue","snapIndex","indexOf","usePreventScroll","isDisabled","dragProps","drag","dragElastic","dragConstraints","dragMomentum","onDrag","onDragEnd","wrapperProps","sheet","Provider","value","AnimatePresence","child","key","ReactDOM","MAX_HEIGHT","SheetContainer","initialY","sheetHeight","restrictedY","useTransform","motion","div","mergeRefs","className","initial","exit","onAnimationComplete","SheetContent","SheetHeader","indicator1Transform","r","indicator2Transform","span","isClickable","props","onClick","onTap","SheetBackdrop","Comp","button","_SheetCompound","Container","Header","Content","Backdrop"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=require("react-dom"),r=require("framer-motion"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=require("react-dom"),r=require("@react-aria/overlays"),o=require("framer-motion"),a=(e=require("react-merge-refs"))&&"object"==typeof e&&"default"in e?e.default:e;function i(){return(i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function s(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t.indexOf(n=a[r])>=0||(o[n]=e[n]);return o}var l="undefined"==typeof window,c=function(e,t){return e.reduce((function(e,n){return Math.abs(n-t)<Math.abs(e-t)?n:e}))};function d(e){var t=document.querySelector("body"),n=document.getElementById(e),r=document.getElementById("react-modal-sheet-highlight");n&&r&&(n.style.removeProperty("border-top-right-radius"),n.style.removeProperty("border-top-left-radius"),n.style.removeProperty("transform"),r.style.opacity="0",n.addEventListener("transitionend",(function e(){var o;n.style.removeProperty("overflow"),n.style.removeProperty("will-change"),n.style.removeProperty("transition"),t.style.removeProperty("background-color"),n.removeEventListener("transitionend",e),null==(o=r.parentNode)||o.removeChild(r)})))}var u=l?t.useEffect:t.useLayoutEffect,f=t.createContext(void 0),p=function(){var e=t.useContext(f);if(!e)throw Error("Sheet context error");return e},m=function(e){var n=t.useRef();return t.useEffect((function(){n.current=e})),n.current},y={wrapper:{position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:9999999,overflow:"hidden",pointerEvents:"none"},backdrop:{zIndex:1,position:"fixed",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(51, 51, 51, 0.5)",touchAction:"none"},container:{zIndex:2,position:"absolute",left:0,bottom:0,width:"100%",backgroundColor:"#fff",borderTopRightRadius:"8px",borderTopLeftRadius:"8px",boxShadow:"0px -2px 16px rgba(0, 0, 0, 0.3)",display:"flex",flexDirection:"column",pointerEvents:"auto"},headerWrapper:{width:"100%"},header:{height:"40px",width:"100%",position:"relative",display:"flex",alignItems:"center",justifyContent:"center"},indicator:{width:"18px",height:"4px",borderRadius:"99px",backgroundColor:"#ddd"},content:{flex:1,overflow:"auto",position:"relative"}},g=t.forwardRef((function(e,a){var p=e.children,g=e.isOpen,h=e.onClose,v=e.onOpenStart,b=e.onOpenEnd,E=e.onCloseStart,C=e.onCloseEnd,x=e.onSnap,w=e.snapPoints,O=e.initialSnap,S=void 0===O?0:O,P=e.rootId,R=e.mountPoint,k=e.springConfig,M=void 0===k?{stiffness:300,damping:30,mass:.2}:k,j=e.disableDrag,D=void 0!==j&&j,q=e.style,I=s(e,["children","isOpen","onClose","onOpenStart","onOpenEnd","onCloseStart","onCloseEnd","onSnap","snapPoints","initialSnap","rootId","mountPoint","springConfig","disableDrag","style"]),T=t.useRef(null),A=t.useRef({onOpenStart:v,onOpenEnd:b,onCloseStart:E,onCloseEnd:C}),L=o.useMotionValue(0),N=function(){var e=t.useState(0),n=e[0],r=e[1];return u((function(){var e=function(){return r(window.innerHeight)};return window.addEventListener("resize",e),e(),function(){return window.removeEventListener("resize",e)}}),[]),n}(),H=o.useMotionValue(0);w&&(w=w.map((function(e){return e>0&&e<=1?Math.round(e*N):e<0?N+e:e})),console.assert(function(e){for(var t=0;t<e.length;t++)if(e[t+1]>e[t])return!1;return!0}(w)||0===N,"Snap points need to be in descending order got: ["+w+"]"));var z=t.useCallback((function(e,t){var n=t.delta,r=H.getVelocity();r>0&&L.set(10),r<0&&L.set(-10),H.set(Math.max(H.get()+n.y,0))}),[]),B=t.useCallback((function(e,t){if(t.velocity.y>500)h();else{var n=T.current.getBoundingClientRect().height,r=Math.round(w?c(w.map((function(e){return n-e})),H.get()):H.get()/n>.6?n:0);if(o.animate(H,r,i({type:"spring"},M)),w&&x){var a=Math.abs(Math.round(w[0]-r)),s=w.indexOf(c(w,a));x(s)}r>=n&&h()}L.set(0)}),[h,x]);t.useEffect((function(){A.current={onOpenStart:v,onOpenEnd:b,onCloseStart:E,onCloseEnd:C}})),t.useEffect((function(){w&&x&&x(g?S:w.length-1)}),[g]),t.useImperativeHandle(a,(function(){return{y:H,snapTo:function(e){var t=T.current;if(w&&void 0!==w[e]&&null!==t){var n=t.getBoundingClientRect().height,r=n-w[e];o.animate(H,r,i({type:"spring"},M)),x&&x(e),r>=n&&h()}}}})),function(e,n){var r=m(e);t.useEffect((function(){n&&!r&&e?function(e){var t=document.querySelector("body"),n=document.querySelector("#"+e);if(n){var r=window.innerHeight,o=(r-24)/r;t.style.backgroundColor="#000",n.style.overflow="hidden",n.style.willChange="transform",n.style.transition="transform 200ms linear",n.style.transform="translateY(calc(env(safe-area-inset-top) + 12px)) scale("+o+")",n.style.borderTopRightRadius="10px",n.style.borderTopLeftRadius="10px";var a=document.createElement("div");a.setAttribute("aria-hidden","true"),a.id="react-modal-sheet-highlight",a.style.position="absolute",a.style.top="0px",a.style.left="0px",a.style.bottom="0px",a.style.right="0px",a.style.opacity="0",a.style.transition="opacity 200ms linear",a.style.backgroundColor="rgba(150, 150, 150, 0.1)",n.appendChild(a),requestAnimationFrame((function(){return a.style.opacity="1"}))}}(n):n&&!e&&r&&d(n)}),[e,r]),t.useEffect((function(){return function(){n&&e&&d(n)}}),[e])}(g,P),r.usePreventScroll({isDisabled:!g});var V={y:H,sheetRef:T,isOpen:g,initialSnap:S,snapPoints:w,indicatorRotation:L,callbacks:A,dragProps:D?{}:{drag:"y",dragElastic:0,dragConstraints:{top:0,bottom:0},dragMomentum:!1,onDrag:z,onDragEnd:B},windowHeight:N,springConfig:M},W=i({},I,{ref:a,style:i({},y.wrapper,q)}),X=t.createElement(f.Provider,{value:V},t.createElement("div",Object.assign({},W),t.createElement(o.AnimatePresence,null,g?t.Children.map(p,(function(e,n){return t.cloneElement(e,{key:"sheet-child-"+n})})):null)));return l?X:n.createPortal(X,null!=R?R:document.body)})),h="calc(100% - env(safe-area-inset-top) - 34px)",v=t.forwardRef((function(e,n){var r=e.children,l=e.style,c=void 0===l?{}:l,d=s(e,["children","style"]),u=p(),f=u.y,g=u.snapPoints,v=u.initialSnap,b=void 0===v?0:v,E=u.sheetRef,C=u.windowHeight,x=u.springConfig,w=function(e,n){var r=m(e),o=t.useRef(!1),a=t.useCallback((function(){o.current?(null==n.current.onCloseEnd||n.current.onCloseEnd(),o.current=!1):(null==n.current.onOpenEnd||n.current.onOpenEnd(),o.current=!0)}),[e,r]);return t.useEffect((function(){!r&&e?null==n.current.onOpenStart||n.current.onOpenStart():!e&&r&&(null==n.current.onCloseStart||n.current.onCloseStart())}),[e,r]),{handleAnimationComplete:a}}(u.isOpen,u.callbacks).handleAnimationComplete,O=g?g[0]-g[b]:0,S=g?g[0]:null,P=S?"min("+S+"px, "+h+")":h,R=o.useTransform(f,(function(e){return Math.max(e,0)}));return t.createElement(o.motion.div,Object.assign({},d,{ref:a([E,n]),className:"react-modal-sheet-container",style:i({},y.container,{height:P},c,{y:R}),initial:{y:C},animate:{y:O,transition:i({type:"spring"},x)},exit:{y:C},onAnimationComplete:w}),r)})),b=t.forwardRef((function(e,n){var r=e.children,a=e.disableDrag,l=void 0!==a&&a,c=e.style,d=void 0===c?{}:c,u=s(e,["children","disableDrag","style"]),f=p().dragProps;return t.createElement(o.motion.div,Object.assign({},u,{ref:n,className:"react-modal-sheet-content",style:i({},y.content,d)},l?{}:f),r)})),E=t.forwardRef((function(e,n){var r=e.children,a=e.disableDrag,l=void 0!==a&&a,c=e.style,d=void 0===c?{}:c,u=s(e,["children","disableDrag","style"]),f=p(),m=f.indicatorRotation,g=f.dragProps,h=o.useTransform(m,(function(e){return"translateX(2px) rotate("+e+"deg)"})),v=o.useTransform(m,(function(e){return"translateX(-2px) rotate("+-1*e+"deg)"}));return t.createElement(o.motion.div,Object.assign({},u,{ref:n,style:i({},y.headerWrapper,d)},l?{}:g),r||t.createElement("div",{className:"react-modal-sheet-header",style:y.header},t.createElement(o.motion.span,{className:"react-modal-sheet-drag-indicator",style:i({},y.indicator,{transform:h})}),t.createElement(o.motion.span,{className:"react-modal-sheet-drag-indicator",style:i({},y.indicator,{transform:v})})))})),C=function(e){return!!e.onClick||!!e.onTap},x=t.forwardRef((function(e,n){var r=e.style,a=void 0===r?{}:r,l=s(e,["style"]),c=C(l)?o.motion.button:o.motion.div,d=C(l)?"auto":"none";return t.createElement(c,Object.assign({},l,{ref:n,className:"react-modal-sheet-backdrop",style:i({},y.backdrop,a,{pointerEvents:d}),initial:{opacity:0},animate:{opacity:1},exit:{opacity:0}}))})),w=g;w.Container=v,w.Header=E,w.Content=b,w.Backdrop=x,exports.default=w;
|
|
2
2
|
//# sourceMappingURL=react-modal-sheet.cjs.production.min.js.map
|
|
@@ -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":["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 mountPoint,\n springConfig = { stiffness: 300, damping: 30, mass: 0.2 },\n disableDrag = false,\n style,\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\n // NOTE: the inital value for `y` doesn't matter since it is overwritten by\n // the value driven by the `AnimatePresence` component when the sheet is opened\n // and after that it is driven by the gestures and/or snapping\n const y = useMotionValue(0);\n\n 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 y,\n snapTo: (snapIndex: number) => {\n const sheetEl = sheetRef.current as HTMLDivElement | null;\n if (\n snapPoints &&\n snapPoints[snapIndex] !== undefined &&\n sheetEl !== null\n ) {\n const contentHeight = sheetEl.getBoundingClientRect().height;\n const snapTo = contentHeight - snapPoints[snapIndex];\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, ...style },\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, mountPoint ?? 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 { MotionValue } from 'framer-motion';\n\nimport Sheet from './sheet';\nimport SheetContainer from './SheetContainer';\nimport SheetContent from './SheetContent';\nimport SheetHeader from './SheetHeader';\nimport SheetBackdrop from './SheetBackdrop';\nimport { SheetCompound } from './types';\n\nexport type SheetRef = {\n y: MotionValue<number>;\n snapTo: (index: number) => void;\n};\n\n// HACK: this is needed to get the typing to work properly...\nconst _SheetCompound: any = Sheet;\n_SheetCompound.Container = SheetContainer;\n_SheetCompound.Header = SheetHeader;\n_SheetCompound.Content = SheetContent;\n_SheetCompound.Backdrop = SheetBackdrop;\n\nexport default _SheetCompound as SheetCompound;\n"],"names":["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","mountPoint","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","sheetEl","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","_SheetCompound","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';\nimport { usePreventScroll } from '@react-aria/overlays';\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 mountPoint,\n springConfig = { stiffness: 300, damping: 30, mass: 0.2 },\n disableDrag = false,\n style,\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\n // NOTE: the inital value for `y` doesn't matter since it is overwritten by\n // the value driven by the `AnimatePresence` component when the sheet is opened\n // and after that it is driven by the gestures and/or snapping\n const y = useMotionValue(0);\n\n if (snapPoints) {\n // Convert negative / percentage snap points to absolute values\n snapPoints = snapPoints.map(point => {\n if (point > 0 && point <= 1) return Math.round(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 = Math.round(\n 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\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(getClosest(snapPoints, snapValue)); // prettier-ignore\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 y,\n snapTo: (snapIndex: number) => {\n const sheetEl = sheetRef.current as HTMLDivElement | null;\n if (\n snapPoints &&\n snapPoints[snapIndex] !== undefined &&\n sheetEl !== null\n ) {\n const contentHeight = sheetEl.getBoundingClientRect().height;\n const snapTo = contentHeight - snapPoints[snapIndex];\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 // Framer Motion should handle body scroll locking but it's not working\n // properly on iOS. Scroll locking from React Aria seems to work much better.\n usePreventScroll({ isDisabled: !isOpen });\n\n const dragProps = 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, ...style },\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, mountPoint ?? document.body);\n }\n);\n\nexport default Sheet;\n","import * as React from 'react';\nimport { motion, useTransform } 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 const restrictedY = useTransform(y, value => Math.max(value, 0));\n\n return (\n <motion.div\n {...rest}\n ref={mergeRefs([sheetRef, ref])}\n className=\"react-modal-sheet-container\"\n style={{\n ...styles.container,\n height: sheetHeight,\n ...style,\n y: restrictedY,\n }}\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 { MotionValue } from 'framer-motion';\n\nimport Sheet from './sheet';\nimport SheetContainer from './SheetContainer';\nimport SheetContent from './SheetContent';\nimport SheetHeader from './SheetHeader';\nimport SheetBackdrop from './SheetBackdrop';\nimport { SheetCompound } from './types';\n\nexport type SheetRef = {\n y: MotionValue<number>;\n snapTo: (index: number) => void;\n};\n\n// HACK: this is needed to get the typing to work properly...\nconst _SheetCompound: any = Sheet;\n_SheetCompound.Container = SheetContainer;\n_SheetCompound.Header = SheetHeader;\n_SheetCompound.Content = SheetContent;\n_SheetCompound.Backdrop = SheetBackdrop;\n\nexport default _SheetCompound as SheetCompound;\n"],"names":["isSSR","window","getClosest","nums","goal","reduce","prev","curr","Math","abs","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","mountPoint","springConfig","stiffness","damping","mass","disableDrag","rest","sheetRef","callbacks","indicatorRotation","useMotionValue","windowHeight","useState","setWindowHeight","updateHeight","innerHeight","useWindowHeight","y","map","point","round","console","assert","arr","i","length","inDescendingOrder","handleDrag","_","delta","velocity","getVelocity","set","max","get","handleDragEnd","contentHeight","getBoundingClientRect","snapTo","p","animate","type","snapValue","snapIndex","indexOf","sheetEl","prevOpen","h","s","willChange","transition","transform","createElement","setAttribute","id","appendChild","requestAnimationFrame","applyRootStyles","useModalEffect","usePreventScroll","isDisabled","dragProps","drag","dragElastic","dragConstraints","dragMomentum","onDrag","onDragEnd","wrapperProps","sheet","Provider","value","AnimatePresence","child","key","ReactDOM","MAX_HEIGHT","SheetContainer","handleAnimationComplete","didOpen","useEventCallbacks","initialY","sheetHeight","restrictedY","useTransform","motion","div","mergeRefs","className","initial","exit","onAnimationComplete","SheetContent","SheetHeader","indicator1Transform","r","indicator2Transform","span","isClickable","props","onClick","onTap","SheetBackdrop","Comp","button","_SheetCompound","Container","Header","Content","Backdrop"],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { useState, useEffect, useLayoutEffect, createContext, useContext, useRef, useCallback, forwardRef, useImperativeHandle, createElement, Children, cloneElement } from 'react';
|
|
2
2
|
import { createPortal } from 'react-dom';
|
|
3
|
-
import {
|
|
3
|
+
import { usePreventScroll } from '@react-aria/overlays';
|
|
4
|
+
import { useMotionValue, animate, AnimatePresence, useTransform, motion } from 'framer-motion';
|
|
4
5
|
import mergeRefs from 'react-merge-refs';
|
|
5
6
|
|
|
6
7
|
function _extends() {
|
|
@@ -294,7 +295,7 @@ var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
294
295
|
if (snapPoints) {
|
|
295
296
|
// Convert negative / percentage snap points to absolute values
|
|
296
297
|
snapPoints = snapPoints.map(function (point) {
|
|
297
|
-
if (point > 0 && point <= 1) return point * windowHeight; // percentage values e.g. between 0.0 and 1.0
|
|
298
|
+
if (point > 0 && point <= 1) return Math.round(point * windowHeight); // percentage values e.g. between 0.0 and 1.0
|
|
298
299
|
|
|
299
300
|
return point < 0 ? windowHeight + point : point; // negative values
|
|
300
301
|
});
|
|
@@ -320,11 +321,11 @@ var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
320
321
|
} else {
|
|
321
322
|
var sheetEl = sheetRef.current;
|
|
322
323
|
var contentHeight = sheetEl.getBoundingClientRect().height;
|
|
323
|
-
var snapTo = snapPoints ? getClosest(snapPoints.map(function (p) {
|
|
324
|
+
var snapTo = Math.round(snapPoints ? getClosest(snapPoints.map(function (p) {
|
|
324
325
|
return contentHeight - p;
|
|
325
326
|
}), y.get()) // prettier-ignore
|
|
326
327
|
: y.get() / contentHeight > 0.6 // Close if dragged over 60%
|
|
327
|
-
? contentHeight : 0; // Update the spring value so that the sheet is animated to the snap point
|
|
328
|
+
? contentHeight : 0); // Update the spring value so that the sheet is animated to the snap point
|
|
328
329
|
|
|
329
330
|
animate(y, snapTo, _extends({
|
|
330
331
|
type: 'spring'
|
|
@@ -332,7 +333,8 @@ var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
332
333
|
|
|
333
334
|
if (snapPoints && onSnap) {
|
|
334
335
|
var snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));
|
|
335
|
-
var snapIndex = snapPoints.indexOf(snapValue);
|
|
336
|
+
var snapIndex = snapPoints.indexOf(getClosest(snapPoints, snapValue)); // prettier-ignore
|
|
337
|
+
|
|
336
338
|
onSnap(snapIndex);
|
|
337
339
|
}
|
|
338
340
|
|
|
@@ -378,7 +380,12 @@ var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
378
380
|
}
|
|
379
381
|
};
|
|
380
382
|
});
|
|
381
|
-
useModalEffect(isOpen, rootId);
|
|
383
|
+
useModalEffect(isOpen, rootId); // Framer Motion should handle body scroll locking but it's not working
|
|
384
|
+
// properly on iOS. Scroll locking from React Aria seems to work much better.
|
|
385
|
+
|
|
386
|
+
usePreventScroll({
|
|
387
|
+
isDisabled: !isOpen
|
|
388
|
+
});
|
|
382
389
|
var dragProps = disableDrag ? {} : {
|
|
383
390
|
drag: 'y',
|
|
384
391
|
dragElastic: 0,
|
|
@@ -443,13 +450,16 @@ var SheetContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
443
450
|
var initialY = snapPoints ? snapPoints[0] - snapPoints[initialSnap] : 0;
|
|
444
451
|
var h = snapPoints ? snapPoints[0] : null;
|
|
445
452
|
var sheetHeight = h ? "min(" + h + "px, " + MAX_HEIGHT + ")" : MAX_HEIGHT;
|
|
453
|
+
var restrictedY = useTransform(y, function (value) {
|
|
454
|
+
return Math.max(value, 0);
|
|
455
|
+
});
|
|
446
456
|
return createElement(motion.div, Object.assign({}, rest, {
|
|
447
457
|
ref: mergeRefs([sheetRef, ref]),
|
|
448
458
|
className: "react-modal-sheet-container",
|
|
449
459
|
style: _extends({}, styles.container, {
|
|
450
460
|
height: sheetHeight
|
|
451
461
|
}, style, {
|
|
452
|
-
y:
|
|
462
|
+
y: restrictedY
|
|
453
463
|
}),
|
|
454
464
|
initial: {
|
|
455
465
|
y: windowHeight
|
|
@@ -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":["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 mountPoint,\n springConfig = { stiffness: 300, damping: 30, mass: 0.2 },\n disableDrag = false,\n style,\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\n // NOTE: the inital value for `y` doesn't matter since it is overwritten by\n // the value driven by the `AnimatePresence` component when the sheet is opened\n // and after that it is driven by the gestures and/or snapping\n const y = useMotionValue(0);\n\n 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 y,\n snapTo: (snapIndex: number) => {\n const sheetEl = sheetRef.current as HTMLDivElement | null;\n if (\n snapPoints &&\n snapPoints[snapIndex] !== undefined &&\n sheetEl !== null\n ) {\n const contentHeight = sheetEl.getBoundingClientRect().height;\n const snapTo = contentHeight - snapPoints[snapIndex];\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, ...style },\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, mountPoint ?? 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 { MotionValue } from 'framer-motion';\n\nimport Sheet from './sheet';\nimport SheetContainer from './SheetContainer';\nimport SheetContent from './SheetContent';\nimport SheetHeader from './SheetHeader';\nimport SheetBackdrop from './SheetBackdrop';\nimport { SheetCompound } from './types';\n\nexport type SheetRef = {\n y: MotionValue<number>;\n snapTo: (index: number) => void;\n};\n\n// HACK: this is needed to get the typing to work properly...\nconst _SheetCompound: any = Sheet;\n_SheetCompound.Container = SheetContainer;\n_SheetCompound.Header = SheetHeader;\n_SheetCompound.Content = SheetContent;\n_SheetCompound.Backdrop = SheetBackdrop;\n\nexport default _SheetCompound as SheetCompound;\n"],"names":["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","mountPoint","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","_SheetCompound","Container","Header","Content","Backdrop"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEO,IAAMA,KAAK,GAAG,OAAOC,MAAP,KAAkB,WAAhC;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;AAED,IAAMM,yBAAyB,GAAGjD,KAAK,GAAGkD,SAAH,GAAeC,eAAtD;SAEgBC;kBAC0BC,QAAQ,CAAC,CAAD;MAAzCC;MAAcC;;AAErBN,EAAAA,yBAAyB,CAAC;AACxB,QAAMO,YAAY,GAAG,SAAfA,YAAe;AAAA,aAAMD,eAAe,CAACtD,MAAM,CAACkB,WAAR,CAArB;AAAA,KAArB;;AACAlB,IAAAA,MAAM,CAAC+C,gBAAP,CAAwB,QAAxB,EAAkCQ,YAAlC;AACAA,IAAAA,YAAY;AACZ,WAAO;AAAA,aAAMvD,MAAM,CAAC4C,mBAAP,CAA2B,QAA3B,EAAqCW,YAArC,CAAN;AAAA,KAAP;AACD,GALwB,EAKtB,EALsB,CAAzB;AAOA,SAAOF,YAAP;AACD;AAEM,IAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,GAAD;AAC/B,OAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGD,GAAG,CAACE,MAAxB,EAAgCD,CAAC,EAAjC,EAAqC;AACnC,QAAID,GAAG,CAACC,CAAC,GAAG,CAAL,CAAH,GAAaD,GAAG,CAACC,CAAD,CAApB,EAAyB,OAAO,KAAP;AAC1B;;AAED,SAAO,IAAP;AACD,CANM;;ACpFA,IAAME,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,EAAkBxD,MAAlB;AAC5B,MAAMyD,QAAQ,GAAGC,WAAW,CAACF,MAAD,CAA5B;;AAGAN,EAAAA,SAAA,CAAgB;AACd,QAAIlD,MAAM,IAAI,CAACyD,QAAX,IAAuBD,MAA3B,EAAmC;AACjCzD,MAAAA,eAAe,CAACC,MAAD,CAAf;AACD,KAFD,MAEO,IAAIA,MAAM,IAAI,CAACwD,MAAX,IAAqBC,QAAzB,EAAmC;AACxC5B,MAAAA,iBAAiB,CAAC7B,MAAD,CAAjB;AACD;AACF,GAND,EAMG,CAACwD,MAAD,EAASC,QAAT,CANH;AAQA;;AACAP,EAAAA,SAAA,CAAgB;AACd,WAAO;AACL,UAAIlD,MAAM,IAAIwD,MAAd,EAAsB3B,iBAAiB,CAAC7B,MAAD,CAAjB;AACvB,KAFD;AAGD,GAJD,EAIG,CAACwD,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;AACPlD,IAAAA,QAAQ,EAAE,OADH;AAEPC,IAAAA,GAAG,EAAE,CAFE;AAGPE,IAAAA,MAAM,EAAE,CAHD;AAIPD,IAAAA,IAAI,EAAE,CAJC;AAKPE,IAAAA,KAAK,EAAE,CALA;AAMP+C,IAAAA,MAAM,EAAE,OAND;AAOP7D,IAAAA,QAAQ,EAAE,QAPH;AAQP8D,IAAAA,aAAa,EAAE;AARR,GADuC;AAWhDC,EAAAA,QAAQ,EAAE;AACRF,IAAAA,MAAM,EAAE,CADA;AAERnD,IAAAA,QAAQ,EAAE,OAFF;AAGRC,IAAAA,GAAG,EAAE,CAHG;AAIRC,IAAAA,IAAI,EAAE,CAJE;AAKRoD,IAAAA,KAAK,EAAE,MALC;AAMRC,IAAAA,MAAM,EAAE,MANA;AAORlE,IAAAA,eAAe,EAAE,uBAPT;AAQRmE,IAAAA,WAAW,EAAE;AARL,GAXsC;AAqBhDC,EAAAA,SAAS,EAAE;AACTN,IAAAA,MAAM,EAAE,CADC;AAETnD,IAAAA,QAAQ,EAAE,UAFD;AAGTE,IAAAA,IAAI,EAAE,CAHG;AAITC,IAAAA,MAAM,EAAE,CAJC;AAKTmD,IAAAA,KAAK,EAAE,MALE;AAMTjE,IAAAA,eAAe,EAAE,MANR;AAOTK,IAAAA,oBAAoB,EAAE,KAPb;AAQTC,IAAAA,mBAAmB,EAAE,KARZ;AAST+D,IAAAA,SAAS,EAAE,kCATF;AAUTC,IAAAA,OAAO,EAAE,MAVA;AAWTC,IAAAA,aAAa,EAAE,QAXN;AAYTR,IAAAA,aAAa,EAAE;AAZN,GArBqC;AAmChDS,EAAAA,aAAa,EAAE;AACbP,IAAAA,KAAK,EAAE;AADM,GAnCiC;AAsChDQ,EAAAA,MAAM,EAAE;AACNP,IAAAA,MAAM,EAAE,MADF;AAEND,IAAAA,KAAK,EAAE,MAFD;AAGNtD,IAAAA,QAAQ,EAAE,UAHJ;AAIN2D,IAAAA,OAAO,EAAE,MAJH;AAKNI,IAAAA,UAAU,EAAE,QALN;AAMNC,IAAAA,cAAc,EAAE;AANV,GAtCwC;AA8ChDC,EAAAA,SAAS,EAAE;AACTX,IAAAA,KAAK,EAAE,MADE;AAETC,IAAAA,MAAM,EAAE,KAFC;AAGTW,IAAAA,YAAY,EAAE,MAHL;AAIT7E,IAAAA,eAAe,EAAE;AAJR,GA9CqC;AAoDhD8E,EAAAA,OAAO,EAAE;AACPC,IAAAA,IAAI,EAAE,CADC;AAEP9E,IAAAA,QAAQ,EAAE,MAFH;AAGPU,IAAAA,QAAQ,EAAE;AAHH;AApDuC,CAAlD;;ACcA,IAAMqE,KAAK,gBAAGxC,UAAA,CACZ,gBAmBEmB,GAnBF;MAEIsB,gBAAAA;MACAnC,cAAAA;MACAoC,eAAAA;MACA1B,mBAAAA;MACAF,iBAAAA;MACAG,oBAAAA;MACAF,kBAAAA;MACA4B,cAAAA;MACAC,kBAAAA;8BACAC;MAAAA,4CAAc;MACd/F,cAAAA;MACAgG,kBAAAA;+BACAC;MAAAA,8CAAe;AAAEC,IAAAA,SAAS,EAAE,GAAb;AAAkBC,IAAAA,OAAO,EAAE,EAA3B;AAA+BC,IAAAA,IAAI,EAAE;AAArC;8BACfC;MAAAA,4CAAc;MACd5F,aAAAA;MACG6F;;AAIL,MAAMC,QAAQ,GAAGrD,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,MAAMuC,iBAAiB,GAAGC,cAAc,CAAC,CAAD,CAAxC;AACA,MAAM/D,YAAY,GAAGF,eAAe,EAApC;AAGA;AACA;;AACA,MAAMkE,CAAC,GAAGD,cAAc,CAAC,CAAD,CAAxB;;AAEA,MAAIX,UAAJ,EAAgB;AACd;AACAA,IAAAA,UAAU,GAAGA,UAAU,CAACa,GAAX,CAAe,UAAAC,KAAK;AAC/B,UAAIA,KAAK,GAAG,CAAR,IAAaA,KAAK,IAAI,CAA1B,EAA6B,OAAOA,KAAK,GAAGlE,YAAf;;AAC7B,aAAOkE,KAAK,GAAG,CAAR,GAAYlE,YAAY,GAAGkE,KAA3B,GAAmCA,KAA1C;AACD,KAHY,CAAb;AAKAC,IAAAA,OAAO,CAACC,MAAR,CACEjE,iBAAiB,CAACiD,UAAD,CAAjB,IAAiCpD,YAAY,KAAK,CADpD,wDAEsDoD,UAFtD;AAID;;AAED,MAAMiB,UAAU,GAAG7D,WAAA,CAAkB,UAAC8D,CAAD;QAAMC,cAAAA;AACzC;AACA,QAAMC,QAAQ,GAAGR,CAAC,CAACS,WAAF,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,CAAC,CAACU,GAAF,CAAMxH,IAAI,CAACyH,GAAL,CAASX,CAAC,CAACY,GAAF,KAAUL,KAAK,CAACP,CAAzB,EAA4B,CAA5B,CAAN;AACD,GARkB,EAQhB,EARgB,CAAnB;;AAUA,MAAMa,aAAa,GAAGrE,WAAA,CACpB,UAAC8D,CAAD;QAAME,iBAAAA;;AACJ,QAAIA,QAAQ,CAACR,CAAT,GAAa,GAAjB,EAAsB;AACpB;AACAd,MAAAA,OAAO;AACR,KAHD,MAGO;AACL,UAAM4B,OAAO,GAAGjB,QAAQ,CAACxC,OAAzB;AACA,UAAM0D,aAAa,GAAGD,OAAO,CAACE,qBAAR,GAAgC9C,MAAtD;AACA,UAAM+C,MAAM,GAAG7B,UAAU,GACrBxG,UAAU,CAACwG,UAAU,CAACa,GAAX,CAAe,UAAAtG,CAAC;AAAA,eAAIoH,aAAa,GAAGpH,CAApB;AAAA,OAAhB,CAAD,EAAyCqG,CAAC,CAACY,GAAF,EAAzC,CADW;AAAA,QAErBZ,CAAC,CAACY,GAAF,KAAUG,aAAV,GAA0B,GAA1B;AAAA,QACAA,aADA,GAEA,CAJJ,CAHK;;AAULG,MAAAA,OAAO,CAAClB,CAAD,EAAIiB,MAAJ;AAAcE,QAAAA,IAAI,EAAE;AAApB,SAAiC5B,YAAjC,EAAP;;AAEA,UAAIH,UAAU,IAAID,MAAlB,EAA0B;AACxB,YAAMiC,SAAS,GAAGlI,IAAI,CAACC,GAAL,CAASD,IAAI,CAACmI,KAAL,CAAWjC,UAAU,CAAC,CAAD,CAAV,GAAgB6B,MAA3B,CAAT,CAAlB;AACA,YAAMK,SAAS,GAAGlC,UAAU,CAACmC,OAAX,CAAmBH,SAAnB,CAAlB;AACAjC,QAAAA,MAAM,CAACmC,SAAD,CAAN;AACD;;AAED,UAAIL,MAAM,IAAIF,aAAd,EAA6B7B,OAAO;AACrC;;;AAGDY,IAAAA,iBAAiB,CAACY,GAAlB,CAAsB,CAAtB;AACD,GA5BmB,EA6BpB,CAACxB,OAAD,EAAUC,MAAV,CA7BoB;AAAA,GAAtB;AAiCA;;AACA3C,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;;AAKAf,EAAAA,SAAA,CAAgB;AACd,QAAI,CAAC4C,UAAD,IAAe,CAACD,MAApB,EAA4B;AAC5B,QAAMmC,SAAS,GAAGxE,MAAM,GAAGuC,WAAH,GAAiBD,UAAU,CAAC9C,MAAX,GAAoB,CAA7D;AACA6C,IAAAA,MAAM,CAACmC,SAAD,CAAN;AACD,GAJD,EAIG,CAACxE,MAAD,CAJH;;AAMAN,EAAAA,mBAAA,CAA0BmB,GAA1B,EAA+B;AAAA,WAAO;AACpCqC,MAAAA,CAAC,EAADA,CADoC;AAEpCiB,MAAAA,MAAM,EAAE,gBAACK,SAAD;AACN,YAAMR,OAAO,GAAGjB,QAAQ,CAACxC,OAAzB;;AACA,YACE+B,UAAU,IACVA,UAAU,CAACkC,SAAD,CAAV,KAA0B7E,SAD1B,IAEAqE,OAAO,KAAK,IAHd,EAIE;AACA,cAAMC,aAAa,GAAGD,OAAO,CAACE,qBAAR,GAAgC9C,MAAtD;AACA,cAAM+C,MAAM,GAAGF,aAAa,GAAG3B,UAAU,CAACkC,SAAD,CAAzC;AACAJ,UAAAA,OAAO,CAAClB,CAAD,EAAIiB,MAAJ;AAAcE,YAAAA,IAAI,EAAE;AAApB,aAAiC5B,YAAjC,EAAP;AACA,cAAIJ,MAAJ,EAAYA,MAAM,CAACmC,SAAD,CAAN;AACZ,cAAIL,MAAM,IAAIF,aAAd,EAA6B7B,OAAO;AACrC;AACF;AAfmC,KAAP;AAAA,GAA/B;AAkBArC,EAAAA,cAAc,CAACC,MAAD,EAASxD,MAAT,CAAd;AAEA,MAAMkI,SAAS,GAAG7B,WAAW,GACxB,EADwB,GAEzB;AACE8B,IAAAA,IAAI,EAAE,GADR;AAEEC,IAAAA,WAAW,EAAE,CAFf;AAGEC,IAAAA,eAAe,EAAE;AAAE/G,MAAAA,GAAG,EAAE,CAAP;AAAUE,MAAAA,MAAM,EAAE;AAAlB,KAHnB;AAIE8G,IAAAA,YAAY,EAAE,KAJhB;AAKEC,IAAAA,MAAM,EAAExB,UALV;AAMEyB,IAAAA,SAAS,EAAEjB;AANb,GAFJ;AAWA,MAAMlE,OAAO,GAAqB;AAChCqD,IAAAA,CAAC,EAADA,CADgC;AAEhCH,IAAAA,QAAQ,EAARA,QAFgC;AAGhC/C,IAAAA,MAAM,EAANA,MAHgC;AAIhCuC,IAAAA,WAAW,EAAXA,WAJgC;AAKhCD,IAAAA,UAAU,EAAVA,UALgC;AAMhCU,IAAAA,iBAAiB,EAAjBA,iBANgC;AAOhC5C,IAAAA,SAAS,EAATA,SAPgC;AAQhCsE,IAAAA,SAAS,EAATA,SARgC;AAShCxF,IAAAA,YAAY,EAAZA,YATgC;AAUhCuD,IAAAA,YAAY,EAAZA;AAVgC,GAAlC;;AAaA,MAAMwC,YAAY,gBACbnC,IADa;AAEhBjC,IAAAA,GAAG,EAAHA,GAFgB;AAGhB5D,IAAAA,KAAK,eAAO6D,MAAM,CAACC,OAAd,EAA0B9D,KAA1B;AAHW,IAAlB;;AAMA,MAAMiI,KAAK,GACTxF,aAAA,CAACD,YAAY,CAAC0F,QAAd;AAAuBC,IAAAA,KAAK,EAAEvF;GAA9B,EACEH,aAAA,MAAA,oBAASuF,aAAT,EACEvF,aAAA,CAAC2F,eAAD,MAAA,EAEGrF,MAAM,GACHN,QAAA,CAAeyD,GAAf,CAAmBhB,QAAnB,EAA6B,UAACmD,KAAD,EAAa/F,CAAb;AAAA,WAC3BG,YAAA,CAAmB4F,KAAnB,EAA0B;AAAEC,MAAAA,GAAG,mBAAiBhG;AAAtB,KAA1B,CAD2B;AAAA,GAA7B,CADG,GAIH,IANN,CADF,CADF,CADF;AAeA,MAAI3D,KAAJ,EAAW,OAAOsJ,KAAP;AAEX,SAAOM,YAAA,CAAsBN,KAAtB,EAA6B1C,UAA7B,WAA6BA,UAA7B,GAA2C9F,QAAQ,CAACD,IAApD,CAAP;AACD,CAxKW,CAAd;;ACPA,IAAMgJ,UAAU,GAAG,8CAAnB;AAEA,IAAMC,cAAc,gBAAGhG,UAAA,CACrB,gBAAoCmB,GAApC;MAAGsB,gBAAAA;wBAAUlF;MAAAA,gCAAQ;MAAO6F;;yBAUtBlD,eAAe;MARjBsD,qBAAAA;MACAlD,0BAAAA;MACAI,6BAAAA;MACAkC,8BAAAA;+CACAC;MAAAA,iDAAc;MACdQ,4BAAAA;MACA7D,gCAAAA;MACAuD,gCAAAA;;2BAGkCtC,iBAAiB,CAACH,MAAD,EAASI,SAAT;MAA7CE,6CAAAA;;AACR,MAAMqF,QAAQ,GAAGrD,UAAU,GAAGA,UAAU,CAAC,CAAD,CAAV,GAAgBA,UAAU,CAACC,WAAD,CAA7B,GAA6C,CAAxE;AACA,MAAMzF,CAAC,GAAGwF,UAAU,GAAGA,UAAU,CAAC,CAAD,CAAb,GAAmB,IAAvC;AACA,MAAMsD,WAAW,GAAG9I,CAAC,YAAUA,CAAV,YAAkB2I,UAAlB,SAAkCA,UAAvD;AAEA,SACE/F,aAAA,CAACmG,MAAM,CAACC,GAAR,oBACMhD;AACJjC,IAAAA,GAAG,EAAEkF,SAAS,CAAC,CAAChD,QAAD,EAAWlC,GAAX,CAAD;AACdmF,IAAAA,SAAS,EAAC;AACV/I,IAAAA,KAAK,eAAO6D,MAAM,CAACQ,SAAd;AAAyBF,MAAAA,MAAM,EAAEwE;AAAjC,OAAiD3I,KAAjD;AAAwDiG,MAAAA,CAAC,EAADA;AAAxD;AACL+C,IAAAA,OAAO,EAAE;AAAE/C,MAAAA,CAAC,EAAEhE;AAAL;AACTkF,IAAAA,OAAO,EAAE;AACPlB,MAAAA,CAAC,EAAEyC,QADI;AAEPtI,MAAAA,UAAU;AAAIgH,QAAAA,IAAI,EAAE;AAAV,SAAuB5B,YAAvB;AAFH;AAITyD,IAAAA,IAAI,EAAE;AAAEhD,MAAAA,CAAC,EAAEhE;AAAL;AACNiH,IAAAA,mBAAmB,EAAE7F;IAXvB,EAaG6B,QAbH,CADF;AAiBD,CAnCoB,CAAvB;;ACJA,IAAMiE,YAAY,gBAAG1G,UAAA,CACnB,gBAAyDmB,GAAzD;MAAGsB,gBAAAA;8BAAUU;MAAAA,4CAAc;wBAAO5F;MAAAA,gCAAQ;MAAO6F;;yBACzBlD,eAAe;MAA7B8E,6BAAAA;;AAER,SACEhF,aAAA,CAACmG,MAAM,CAACC,GAAR,oBACMhD;AACJjC,IAAAA,GAAG,EAAEA;AACLmF,IAAAA,SAAS,EAAC;AACV/I,IAAAA,KAAK,eAAO6D,MAAM,CAACkB,OAAd,EAA0B/E,KAA1B;KACA4F,WAAW,GAAG,EAAH,GAAQ6B,UAL1B,EAOGvC,QAPH,CADF;AAWD,CAfkB,CAArB;;ACAA,IAAMkE,WAAW,gBAAG3G,UAAA,CAClB,gBAAyDmB,GAAzD;MAAGsB,gBAAAA;8BAAUU;MAAAA,4CAAc;wBAAO5F;MAAAA,gCAAQ;MAAO6F;;yBACNlD,eAAe;MAAhDoD,qCAAAA;MAAmB0B,6BAAAA;;AAE3B,MAAM4B,mBAAmB,GAAGC,YAAY,CACtCvD,iBADsC,EAEtC,UAAAwD,CAAC;AAAA,uCAA8BA,CAA9B;AAAA,GAFqC,CAAxC;AAKA,MAAMC,mBAAmB,GAAGF,YAAY,CACtCvD,iBADsC,EAEtC,UAAAwD,CAAC;AAAA,wCAA+B,CAAC,CAAD,GAAKA,CAApC;AAAA,GAFqC,CAAxC;AAKA,SACE9G,aAAA,CAACmG,MAAM,CAACC,GAAR,oBACMhD;AACJjC,IAAAA,GAAG,EAAEA;AACL5D,IAAAA,KAAK,eAAO6D,MAAM,CAACY,aAAd,EAAgCzE,KAAhC;KACA4F,WAAW,GAAG,EAAH,GAAQ6B,UAJ1B,EAMGvC,QAAQ,IACPzC,aAAA,MAAA;AAAKsG,IAAAA,SAAS,EAAC;AAA2B/I,IAAAA,KAAK,EAAE6D,MAAM,CAACa;GAAxD,EACEjC,aAAA,CAACmG,MAAM,CAACa,IAAR;AACEV,IAAAA,SAAS,EAAC;AACV/I,IAAAA,KAAK,eAAO6D,MAAM,CAACgB,SAAd;AAAyBxE,MAAAA,SAAS,EAAEgJ;AAApC;GAFP,CADF,EAKE5G,aAAA,CAACmG,MAAM,CAACa,IAAR;AACEV,IAAAA,SAAS,EAAC;AACV/I,IAAAA,KAAK,eAAO6D,MAAM,CAACgB,SAAd;AAAyBxE,MAAAA,SAAS,EAAEmJ;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,gBAAGrH,UAAA,CACpB,gBAA0BmB,GAA1B;wBAAG5D;MAAAA,gCAAQ;MAAO6F;;AAChB,MAAMkE,IAAI,GAAGL,WAAW,CAAC7D,IAAD,CAAX,GAAoB+C,MAAM,CAACoB,MAA3B,GAAoCpB,MAAM,CAACC,GAAxD;AACA,MAAM7E,aAAa,GAAG0F,WAAW,CAAC7D,IAAD,CAAX,GAAoB,MAApB,GAA6B,MAAnD;AAEA,SACEpD,aAAA,CAACsH,IAAD,oBACMlE;AACJjC,IAAAA,GAAG,EAAEA;AACLmF,IAAAA,SAAS,EAAC;AACV/I,IAAAA,KAAK,eAAO6D,MAAM,CAACI,QAAd,EAA2BjE,KAA3B;AAAkCgE,MAAAA,aAAa,EAAbA;AAAlC;AACLgF,IAAAA,OAAO,EAAE;AAAE/H,MAAAA,OAAO,EAAE;AAAX;AACTkG,IAAAA,OAAO,EAAE;AAAElG,MAAAA,OAAO,EAAE;AAAX;AACTgI,IAAAA,IAAI,EAAE;AAAEhI,MAAAA,OAAO,EAAE;AAAX;IAPR,CADF;AAWD,CAhBmB,CAAtB;;ACOA,IAAMgJ,cAAc,GAAQhF,KAA5B;AACAgF,cAAc,CAACC,SAAf,GAA2BzB,cAA3B;AACAwB,cAAc,CAACE,MAAf,GAAwBf,WAAxB;AACAa,cAAc,CAACG,OAAf,GAAyBjB,YAAzB;AACAc,cAAc,CAACI,QAAf,GAA0BP,aAA1B;;;;"}
|
|
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';\nimport { usePreventScroll } from '@react-aria/overlays';\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 mountPoint,\n springConfig = { stiffness: 300, damping: 30, mass: 0.2 },\n disableDrag = false,\n style,\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\n // NOTE: the inital value for `y` doesn't matter since it is overwritten by\n // the value driven by the `AnimatePresence` component when the sheet is opened\n // and after that it is driven by the gestures and/or snapping\n const y = useMotionValue(0);\n\n if (snapPoints) {\n // Convert negative / percentage snap points to absolute values\n snapPoints = snapPoints.map(point => {\n if (point > 0 && point <= 1) return Math.round(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 = Math.round(\n 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\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(getClosest(snapPoints, snapValue)); // prettier-ignore\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 y,\n snapTo: (snapIndex: number) => {\n const sheetEl = sheetRef.current as HTMLDivElement | null;\n if (\n snapPoints &&\n snapPoints[snapIndex] !== undefined &&\n sheetEl !== null\n ) {\n const contentHeight = sheetEl.getBoundingClientRect().height;\n const snapTo = contentHeight - snapPoints[snapIndex];\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 // Framer Motion should handle body scroll locking but it's not working\n // properly on iOS. Scroll locking from React Aria seems to work much better.\n usePreventScroll({ isDisabled: !isOpen });\n\n const dragProps = 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, ...style },\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, mountPoint ?? document.body);\n }\n);\n\nexport default Sheet;\n","import * as React from 'react';\nimport { motion, useTransform } 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 const restrictedY = useTransform(y, value => Math.max(value, 0));\n\n return (\n <motion.div\n {...rest}\n ref={mergeRefs([sheetRef, ref])}\n className=\"react-modal-sheet-container\"\n style={{\n ...styles.container,\n height: sheetHeight,\n ...style,\n y: restrictedY,\n }}\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 { MotionValue } from 'framer-motion';\n\nimport Sheet from './sheet';\nimport SheetContainer from './SheetContainer';\nimport SheetContent from './SheetContent';\nimport SheetHeader from './SheetHeader';\nimport SheetBackdrop from './SheetBackdrop';\nimport { SheetCompound } from './types';\n\nexport type SheetRef = {\n y: MotionValue<number>;\n snapTo: (index: number) => void;\n};\n\n// HACK: this is needed to get the typing to work properly...\nconst _SheetCompound: any = Sheet;\n_SheetCompound.Container = SheetContainer;\n_SheetCompound.Header = SheetHeader;\n_SheetCompound.Content = SheetContent;\n_SheetCompound.Backdrop = SheetBackdrop;\n\nexport default _SheetCompound as SheetCompound;\n"],"names":["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","mountPoint","springConfig","stiffness","damping","mass","disableDrag","rest","sheetRef","indicatorRotation","useMotionValue","y","map","point","round","console","assert","handleDrag","_","delta","velocity","getVelocity","set","max","get","handleDragEnd","sheetEl","contentHeight","getBoundingClientRect","snapTo","animate","type","snapValue","snapIndex","indexOf","usePreventScroll","isDisabled","dragProps","drag","dragElastic","dragConstraints","dragMomentum","onDrag","onDragEnd","wrapperProps","sheet","Provider","value","AnimatePresence","child","key","ReactDOM","MAX_HEIGHT","SheetContainer","initialY","sheetHeight","restrictedY","useTransform","motion","div","mergeRefs","className","initial","exit","onAnimationComplete","SheetContent","SheetHeader","indicator1Transform","r","indicator2Transform","span","isClickable","props","onClick","onTap","SheetBackdrop","Comp","button","_SheetCompound","Container","Header","Content","Backdrop"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.6.
|
|
2
|
+
"version": "1.6.2",
|
|
3
3
|
"license": "MIT",
|
|
4
4
|
"name": "react-modal-sheet",
|
|
5
5
|
"description": "Flexible bottom sheet component for your React apps",
|
|
@@ -64,6 +64,7 @@
|
|
|
64
64
|
"typescript": "4.7.3"
|
|
65
65
|
},
|
|
66
66
|
"dependencies": {
|
|
67
|
+
"@react-aria/overlays": "3.11.0",
|
|
67
68
|
"react-merge-refs": "1.1.0"
|
|
68
69
|
}
|
|
69
70
|
}
|
package/src/SheetContainer.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { motion } from 'framer-motion';
|
|
2
|
+
import { motion, useTransform } from 'framer-motion';
|
|
3
3
|
import mergeRefs from 'react-merge-refs';
|
|
4
4
|
|
|
5
5
|
import { SheetContainerProps } from './types';
|
|
@@ -26,13 +26,19 @@ const SheetContainer = React.forwardRef<any, SheetContainerProps>(
|
|
|
26
26
|
const initialY = snapPoints ? snapPoints[0] - snapPoints[initialSnap] : 0;
|
|
27
27
|
const h = snapPoints ? snapPoints[0] : null;
|
|
28
28
|
const sheetHeight = h ? `min(${h}px, ${MAX_HEIGHT})` : MAX_HEIGHT;
|
|
29
|
+
const restrictedY = useTransform(y, value => Math.max(value, 0));
|
|
29
30
|
|
|
30
31
|
return (
|
|
31
32
|
<motion.div
|
|
32
33
|
{...rest}
|
|
33
34
|
ref={mergeRefs([sheetRef, ref])}
|
|
34
35
|
className="react-modal-sheet-container"
|
|
35
|
-
style={{
|
|
36
|
+
style={{
|
|
37
|
+
...styles.container,
|
|
38
|
+
height: sheetHeight,
|
|
39
|
+
...style,
|
|
40
|
+
y: restrictedY,
|
|
41
|
+
}}
|
|
36
42
|
initial={{ y: windowHeight }}
|
|
37
43
|
animate={{
|
|
38
44
|
y: initialY,
|
package/src/sheet.tsx
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import * as ReactDOM from 'react-dom';
|
|
3
|
+
import { usePreventScroll } from '@react-aria/overlays';
|
|
3
4
|
|
|
4
5
|
import {
|
|
5
6
|
animate,
|
|
@@ -49,7 +50,7 @@ const Sheet = React.forwardRef<any, SheetProps>(
|
|
|
49
50
|
if (snapPoints) {
|
|
50
51
|
// Convert negative / percentage snap points to absolute values
|
|
51
52
|
snapPoints = snapPoints.map(point => {
|
|
52
|
-
if (point > 0 && point <= 1) return point * windowHeight; // percentage values e.g. between 0.0 and 1.0
|
|
53
|
+
if (point > 0 && point <= 1) return Math.round(point * windowHeight); // percentage values e.g. between 0.0 and 1.0
|
|
53
54
|
return point < 0 ? windowHeight + point : point; // negative values
|
|
54
55
|
});
|
|
55
56
|
|
|
@@ -77,18 +78,20 @@ const Sheet = React.forwardRef<any, SheetProps>(
|
|
|
77
78
|
} else {
|
|
78
79
|
const sheetEl = sheetRef.current as HTMLDivElement;
|
|
79
80
|
const contentHeight = sheetEl.getBoundingClientRect().height;
|
|
80
|
-
const snapTo =
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
81
|
+
const snapTo = Math.round(
|
|
82
|
+
snapPoints
|
|
83
|
+
? getClosest(snapPoints.map(p => contentHeight - p), y.get()) // prettier-ignore
|
|
84
|
+
: y.get() / contentHeight > 0.6 // Close if dragged over 60%
|
|
85
|
+
? contentHeight
|
|
86
|
+
: 0
|
|
87
|
+
);
|
|
85
88
|
|
|
86
89
|
// Update the spring value so that the sheet is animated to the snap point
|
|
87
90
|
animate(y, snapTo, { type: 'spring', ...springConfig });
|
|
88
91
|
|
|
89
92
|
if (snapPoints && onSnap) {
|
|
90
93
|
const snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));
|
|
91
|
-
const snapIndex = snapPoints.indexOf(snapValue);
|
|
94
|
+
const snapIndex = snapPoints.indexOf(getClosest(snapPoints, snapValue)); // prettier-ignore
|
|
92
95
|
onSnap(snapIndex);
|
|
93
96
|
}
|
|
94
97
|
|
|
@@ -134,6 +137,10 @@ const Sheet = React.forwardRef<any, SheetProps>(
|
|
|
134
137
|
|
|
135
138
|
useModalEffect(isOpen, rootId);
|
|
136
139
|
|
|
140
|
+
// Framer Motion should handle body scroll locking but it's not working
|
|
141
|
+
// properly on iOS. Scroll locking from React Aria seems to work much better.
|
|
142
|
+
usePreventScroll({ isDisabled: !isOpen });
|
|
143
|
+
|
|
137
144
|
const dragProps = disableDrag
|
|
138
145
|
? ({} as any)
|
|
139
146
|
: {
|