react-modal-sheet 1.5.2 → 1.6.1
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 +1 -0
- package/dist/SheetContainer.d.ts +1 -1
- package/dist/react-modal-sheet.cjs.development.js +10 -7
- 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 +10 -7
- package/dist/react-modal-sheet.esm.js.map +1 -1
- package/dist/sheet.d.ts +1 -0
- package/dist/types.d.ts +1 -0
- package/package.json +1 -1
- package/src/sheet.tsx +13 -9
- package/src/types.tsx +1 -0
package/README.md
CHANGED
|
@@ -86,6 +86,7 @@ Also, by constructing the sheet from smaller pieces makes it easier to apply any
|
|
|
86
86
|
| `initialSnap` | no | 0 | Initial snap point when sheet is opened (index from `snapPoints`). |
|
|
87
87
|
| `rootId` | no | | The id of the element where the main app is mounted, eg. "root". Enables iOS modal effect. |
|
|
88
88
|
| `springConfig` | no | `DEFAULT_SPRING` | Overrides the config for the [spring animation](https://www.framer.com/api/motion/types/#spring). |
|
|
89
|
+
| `mountPoint` | no | `document.body` | HTML element that should be used as the mount point for the sheet. |
|
|
89
90
|
|
|
90
91
|
**`DEFAULT_SPRING`**
|
|
91
92
|
|
package/dist/SheetContainer.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
declare const SheetContainer: React.ForwardRefExoticComponent<Pick<import("framer-motion").MotionProps, "style" | "transformTemplate" | "transformValues" | "variants" | "transition" | "
|
|
2
|
+
declare const SheetContainer: React.ForwardRefExoticComponent<Pick<import("framer-motion").MotionProps, "style" | "transformTemplate" | "transformValues" | "variants" | "transition" | "onBeforeLayoutMeasure" | "onLayoutMeasure" | "onLayoutAnimationStart" | "onLayoutAnimationComplete" | "onUpdate" | "onAnimationStart" | "onUnmount" | "onPan" | "onPanStart" | "onPanSessionStart" | "onPanEnd" | "onTap" | "onTapStart" | "onTapCancel" | "whileTap" | "whileHover" | "onHoverStart" | "onHoverEnd" | "whileFocus" | "whileInView" | "onViewportEnter" | "onViewportLeave" | "viewport" | "drag" | "whileDrag" | "dragDirectionLock" | "dragPropagation" | "dragConstraints" | "dragElastic" | "dragMomentum" | "dragTransition" | "dragControls" | "dragSnapToOrigin" | "dragListener" | "onMeasureDragConstraints" | "_dragX" | "_dragY" | "onDragStart" | "onDragEnd" | "onDrag" | "onDirectionLock" | "onDragTransitionEnd" | "layout" | "layoutId" | "layoutDependency" | "layoutScroll" | "custom" | "inherit"> & {
|
|
3
3
|
children: React.ReactNode;
|
|
4
4
|
} & React.RefAttributes<any>>;
|
|
5
5
|
export default SheetContainer;
|
|
@@ -270,6 +270,7 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
270
270
|
_ref$initialSnap = _ref.initialSnap,
|
|
271
271
|
initialSnap = _ref$initialSnap === void 0 ? 0 : _ref$initialSnap,
|
|
272
272
|
rootId = _ref.rootId,
|
|
273
|
+
mountPoint = _ref.mountPoint,
|
|
273
274
|
_ref$springConfig = _ref.springConfig,
|
|
274
275
|
springConfig = _ref$springConfig === void 0 ? {
|
|
275
276
|
stiffness: 300,
|
|
@@ -278,7 +279,8 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
278
279
|
} : _ref$springConfig,
|
|
279
280
|
_ref$disableDrag = _ref.disableDrag,
|
|
280
281
|
disableDrag = _ref$disableDrag === void 0 ? false : _ref$disableDrag,
|
|
281
|
-
|
|
282
|
+
style = _ref.style,
|
|
283
|
+
rest = _objectWithoutPropertiesLoose(_ref, ["children", "isOpen", "onClose", "onOpenStart", "onOpenEnd", "onCloseStart", "onCloseEnd", "onSnap", "snapPoints", "initialSnap", "rootId", "mountPoint", "springConfig", "disableDrag", "style"]);
|
|
282
284
|
|
|
283
285
|
var sheetRef = React.useRef(null);
|
|
284
286
|
var callbacks = React.useRef({
|
|
@@ -298,7 +300,7 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
298
300
|
if (snapPoints) {
|
|
299
301
|
// Convert negative / percentage snap points to absolute values
|
|
300
302
|
snapPoints = snapPoints.map(function (point) {
|
|
301
|
-
if (point > 0 && point <= 1) return point * windowHeight; // percentage values e.g. between 0.0 and 1.0
|
|
303
|
+
if (point > 0 && point <= 1) return Math.round(point * windowHeight); // percentage values e.g. between 0.0 and 1.0
|
|
302
304
|
|
|
303
305
|
return point < 0 ? windowHeight + point : point; // negative values
|
|
304
306
|
});
|
|
@@ -324,11 +326,11 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
324
326
|
} else {
|
|
325
327
|
var sheetEl = sheetRef.current;
|
|
326
328
|
var contentHeight = sheetEl.getBoundingClientRect().height;
|
|
327
|
-
var snapTo = snapPoints ? getClosest(snapPoints.map(function (p) {
|
|
329
|
+
var snapTo = Math.round(snapPoints ? getClosest(snapPoints.map(function (p) {
|
|
328
330
|
return contentHeight - p;
|
|
329
331
|
}), y.get()) // prettier-ignore
|
|
330
332
|
: y.get() / contentHeight > 0.6 // Close if dragged over 60%
|
|
331
|
-
? contentHeight : 0; // Update the spring value so that the sheet is animated to the snap point
|
|
333
|
+
? contentHeight : 0); // Update the spring value so that the sheet is animated to the snap point
|
|
332
334
|
|
|
333
335
|
framerMotion.animate(y, snapTo, _extends({
|
|
334
336
|
type: 'spring'
|
|
@@ -336,7 +338,8 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
336
338
|
|
|
337
339
|
if (snapPoints && onSnap) {
|
|
338
340
|
var snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));
|
|
339
|
-
var snapIndex = snapPoints.indexOf(snapValue);
|
|
341
|
+
var snapIndex = snapPoints.indexOf(getClosest(snapPoints, snapValue)); // prettier-ignore
|
|
342
|
+
|
|
340
343
|
onSnap(snapIndex);
|
|
341
344
|
}
|
|
342
345
|
|
|
@@ -409,7 +412,7 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
409
412
|
|
|
410
413
|
var wrapperProps = _extends({}, rest, {
|
|
411
414
|
ref: ref,
|
|
412
|
-
style: styles.wrapper
|
|
415
|
+
style: _extends({}, styles.wrapper, style)
|
|
413
416
|
});
|
|
414
417
|
|
|
415
418
|
var sheet = React.createElement(SheetContext.Provider, {
|
|
@@ -420,7 +423,7 @@ var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
420
423
|
});
|
|
421
424
|
}) : null)));
|
|
422
425
|
if (isSSR) return sheet;
|
|
423
|
-
return ReactDOM.createPortal(sheet, document.body);
|
|
426
|
+
return ReactDOM.createPortal(sheet, mountPoint != null ? mountPoint : document.body);
|
|
424
427
|
});
|
|
425
428
|
|
|
426
429
|
var MAX_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';
|
|
@@ -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 springConfig = { stiffness: 300, damping: 30, mass: 0.2 },\n disableDrag = false,\n ...rest\n },\n ref\n ) => {\n const sheetRef = React.useRef<any>(null);\n const callbacks = React.useRef({ onOpenStart, onOpenEnd, onCloseStart, onCloseEnd }); // prettier-ignore\n const indicatorRotation = useMotionValue(0);\n const windowHeight = useWindowHeight();\n\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,\n };\n\n const sheet = (\n <SheetContext.Provider value={context}>\n <div {...wrapperProps}>\n <AnimatePresence>\n {/* NOTE: AnimatePresence requires us to set keys to children */}\n {isOpen\n ? React.Children.map(children, (child: any, i) =>\n React.cloneElement(child, { key: `sheet-child-${i}` })\n )\n : null}\n </AnimatePresence>\n </div>\n </SheetContext.Provider>\n );\n\n if (isSSR) return sheet;\n\n return ReactDOM.createPortal(sheet, document.body);\n }\n);\n\nexport default Sheet;\n","import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport mergeRefs from 'react-merge-refs';\n\nimport { SheetContainerProps } from './types';\nimport { useSheetContext } from './context';\nimport { useEventCallbacks } from './hooks';\nimport styles from './styles';\n\nconst MAX_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';\n\nconst SheetContainer = React.forwardRef<any, SheetContainerProps>(\n ({ children, style = {}, ...rest }, ref) => {\n const {\n y,\n isOpen,\n callbacks,\n snapPoints,\n initialSnap = 0,\n sheetRef,\n windowHeight,\n springConfig,\n } = useSheetContext();\n\n const { handleAnimationComplete } = useEventCallbacks(isOpen, callbacks);\n const initialY = snapPoints ? snapPoints[0] - snapPoints[initialSnap] : 0;\n const h = snapPoints ? snapPoints[0] : null;\n const sheetHeight = h ? `min(${h}px, ${MAX_HEIGHT})` : MAX_HEIGHT;\n\n return (\n <motion.div\n {...rest}\n ref={mergeRefs([sheetRef, ref])}\n className=\"react-modal-sheet-container\"\n style={{ ...styles.container, height: sheetHeight, ...style, y }}\n initial={{ y: windowHeight }}\n animate={{\n y: initialY,\n transition: { type: 'spring', ...springConfig },\n }}\n exit={{ y: windowHeight }}\n onAnimationComplete={handleAnimationComplete}\n >\n {children}\n </motion.div>\n );\n }\n);\n\nexport default SheetContainer;\n","import * as React from 'react';\nimport { motion } from 'framer-motion';\n\nimport { SheetDraggableProps } from './types';\nimport styles from './styles';\nimport { useSheetContext } from './context';\n\nconst SheetContent = React.forwardRef<any, SheetDraggableProps>(\n ({ children, disableDrag = false, style = {}, ...rest }, ref) => {\n const { dragProps } = useSheetContext();\n\n return (\n <motion.div\n {...rest}\n ref={ref}\n className=\"react-modal-sheet-content\"\n style={{ ...styles.content, ...style }}\n {...(disableDrag ? {} : dragProps)}\n >\n {children}\n </motion.div>\n );\n }\n);\n\nexport default SheetContent;\n","import * as React from 'react';\nimport { motion, useTransform } from 'framer-motion';\n\nimport { SheetDraggableProps } from './types';\nimport { useSheetContext } from './context';\nimport styles from './styles';\n\nconst SheetHeader = React.forwardRef<any, SheetDraggableProps>(\n ({ children, disableDrag = false, style = {}, ...rest }, ref) => {\n const { indicatorRotation, dragProps } = useSheetContext();\n\n const indicator1Transform = useTransform(\n indicatorRotation,\n r => `translateX(2px) rotate(${r}deg)`\n );\n\n const indicator2Transform = useTransform(\n indicatorRotation,\n r => `translateX(-2px) rotate(${-1 * r}deg)`\n );\n\n return (\n <motion.div\n {...rest}\n ref={ref}\n style={{ ...styles.headerWrapper, ...style }}\n {...(disableDrag ? {} : dragProps)}\n >\n {children || (\n <div className=\"react-modal-sheet-header\" style={styles.header}>\n <motion.span\n className=\"react-modal-sheet-drag-indicator\"\n style={{ ...styles.indicator, transform: indicator1Transform }}\n />\n <motion.span\n className=\"react-modal-sheet-drag-indicator\"\n style={{ ...styles.indicator, transform: indicator2Transform }}\n />\n </div>\n )}\n </motion.div>\n );\n }\n);\n\nexport default SheetHeader;\n","import * as React from 'react';\nimport { motion } from 'framer-motion';\n\nimport { SheetBackdropProps } from './types';\nimport styles from './styles';\n\nconst isClickable = (props: any) => !!props.onClick || !!props.onTap;\n\nconst SheetBackdrop = React.forwardRef<any, SheetBackdropProps>(\n ({ style = {}, ...rest }, ref) => {\n const Comp = isClickable(rest) ? motion.button : motion.div;\n const pointerEvents = isClickable(rest) ? 'auto' : 'none';\n\n return (\n <Comp\n {...rest}\n ref={ref}\n className=\"react-modal-sheet-backdrop\"\n style={{ ...styles.backdrop, ...style, pointerEvents }}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n />\n );\n }\n);\n\nexport default SheetBackdrop;\n","import { 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","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,eAAH,GAAeC,qBAAtD;SAEgBC;kBAC0BC,cAAQ,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,mBAAA,CAC1BC,SAD0B,CAArB;AAIP,AAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB;AAC7B,MAAMC,OAAO,GAAGH,gBAAA,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,eAAA,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,eAAA,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,YAAA,CAAa,KAAb,CAAhB;AAGA;AACA;;AACA,MAAMY,uBAAuB,GAAGZ,iBAAA,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,eAAA,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,YAAA,EAAZ;AAEAA,EAAAA,eAAA,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,gBAAA,CACZ,gBAiBEmB,GAjBF;MAEIsB,gBAAAA;MACAnC,cAAAA;MACAoC,eAAAA;MACA1B,mBAAAA;MACAF,iBAAAA;MACAG,oBAAAA;MACAF,kBAAAA;MACA4B,cAAAA;MACAC,kBAAAA;8BACAC;MAAAA,4CAAc;MACd/F,cAAAA;+BACAgG;MAAAA,8CAAe;AAAEC,IAAAA,SAAS,EAAE,GAAb;AAAkBC,IAAAA,OAAO,EAAE,EAA3B;AAA+BC,IAAAA,IAAI,EAAE;AAArC;8BACfC;MAAAA,4CAAc;MACXC;;AAIL,MAAMC,QAAQ,GAAGpD,YAAA,CAAkB,IAAlB,CAAjB;AACA,MAAMU,SAAS,GAAGV,YAAA,CAAa;AAAEgB,IAAAA,WAAW,EAAXA,WAAF;AAAeF,IAAAA,SAAS,EAATA,SAAf;AAA0BG,IAAAA,YAAY,EAAZA,YAA1B;AAAwCF,IAAAA,UAAU,EAAVA;AAAxC,GAAb,CAAlB;;AACA,MAAMsC,iBAAiB,GAAGC,2BAAc,CAAC,CAAD,CAAxC;AACA,MAAM9D,YAAY,GAAGF,eAAe,EAApC;AAGA;AACA;;AACA,MAAMiE,CAAC,GAAGD,2BAAc,CAAC,CAAD,CAAxB;;AAEA,MAAIV,UAAJ,EAAgB;AACd;AACAA,IAAAA,UAAU,GAAGA,UAAU,CAACY,GAAX,CAAe,UAAAC,KAAK;AAC/B,UAAIA,KAAK,GAAG,CAAR,IAAaA,KAAK,IAAI,CAA1B,EAA6B,OAAOA,KAAK,GAAGjE,YAAf;;AAC7B,aAAOiE,KAAK,GAAG,CAAR,GAAYjE,YAAY,GAAGiE,KAA3B,GAAmCA,KAA1C;AACD,KAHY,CAAb;AAKAC,IAAAA,OAAO,CAACC,MAAR,CACEhE,iBAAiB,CAACiD,UAAD,CAAjB,IAAiCpD,YAAY,KAAK,CADpD,wDAEsDoD,UAFtD;AAID;;AAED,MAAMgB,UAAU,GAAG5D,iBAAA,CAAkB,UAAC6D,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,CAAMvH,IAAI,CAACwH,GAAL,CAASX,CAAC,CAACY,GAAF,KAAUL,KAAK,CAACP,CAAzB,EAA4B,CAA5B,CAAN;AACD,GARkB,EAQhB,EARgB,CAAnB;;AAUA,MAAMa,aAAa,GAAGpE,iBAAA,CACpB,UAAC6D,CAAD;QAAME,iBAAAA;;AACJ,QAAIA,QAAQ,CAACR,CAAT,GAAa,GAAjB,EAAsB;AACpB;AACAb,MAAAA,OAAO;AACR,KAHD,MAGO;AACL,UAAM2B,OAAO,GAAGjB,QAAQ,CAACvC,OAAzB;AACA,UAAMyD,aAAa,GAAGD,OAAO,CAACE,qBAAR,GAAgC7C,MAAtD;AACA,UAAM8C,MAAM,GAAG5B,UAAU,GACrBxG,UAAU,CAACwG,UAAU,CAACY,GAAX,CAAe,UAAArG,CAAC;AAAA,eAAImH,aAAa,GAAGnH,CAApB;AAAA,OAAhB,CAAD,EAAyCoG,CAAC,CAACY,GAAF,EAAzC,CADW;AAAA,QAErBZ,CAAC,CAACY,GAAF,KAAUG,aAAV,GAA0B,GAA1B;AAAA,QACAA,aADA,GAEA,CAJJ,CAHK;;AAULG,MAAAA,oBAAO,CAAClB,CAAD,EAAIiB,MAAJ;AAAcE,QAAAA,IAAI,EAAE;AAApB,SAAiC5B,YAAjC,EAAP;;AAEA,UAAIF,UAAU,IAAID,MAAlB,EAA0B;AACxB,YAAMgC,SAAS,GAAGjI,IAAI,CAACC,GAAL,CAASD,IAAI,CAACkI,KAAL,CAAWhC,UAAU,CAAC,CAAD,CAAV,GAAgB4B,MAA3B,CAAT,CAAlB;AACA,YAAMK,SAAS,GAAGjC,UAAU,CAACkC,OAAX,CAAmBH,SAAnB,CAAlB;AACAhC,QAAAA,MAAM,CAACkC,SAAD,CAAN;AACD;;AAED,UAAIL,MAAM,IAAIF,aAAd,EAA6B5B,OAAO;AACrC;;;AAGDW,IAAAA,iBAAiB,CAACY,GAAlB,CAAsB,CAAtB;AACD,GA5BmB,EA6BpB,CAACvB,OAAD,EAAUC,MAAV,CA7BoB;AAAA,GAAtB;AAiCA;;AACA3C,EAAAA,eAAA,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,eAAA,CAAgB;AACd,QAAI,CAAC4C,UAAD,IAAe,CAACD,MAApB,EAA4B;AAC5B,QAAMkC,SAAS,GAAGvE,MAAM,GAAGuC,WAAH,GAAiBD,UAAU,CAAC9C,MAAX,GAAoB,CAA7D;AACA6C,IAAAA,MAAM,CAACkC,SAAD,CAAN;AACD,GAJD,EAIG,CAACvE,MAAD,CAJH;;AAMAN,EAAAA,yBAAA,CAA0BmB,GAA1B,EAA+B;AAAA,WAAO;AACpCoC,MAAAA,CAAC,EAADA,CADoC;AAEpCiB,MAAAA,MAAM,EAAE,gBAACK,SAAD;AACN,YAAMR,OAAO,GAAGjB,QAAQ,CAACvC,OAAzB;;AACA,YACE+B,UAAU,IACVA,UAAU,CAACiC,SAAD,CAAV,KAA0B5E,SAD1B,IAEAoE,OAAO,KAAK,IAHd,EAIE;AACA,cAAMC,aAAa,GAAGD,OAAO,CAACE,qBAAR,GAAgC7C,MAAtD;AACA,cAAM8C,MAAM,GAAGF,aAAa,GAAG1B,UAAU,CAACiC,SAAD,CAAzC;AACAJ,UAAAA,oBAAO,CAAClB,CAAD,EAAIiB,MAAJ;AAAcE,YAAAA,IAAI,EAAE;AAApB,aAAiC5B,YAAjC,EAAP;AACA,cAAIH,MAAJ,EAAYA,MAAM,CAACkC,SAAD,CAAN;AACZ,cAAIL,MAAM,IAAIF,aAAd,EAA6B5B,OAAO;AACrC;AACF;AAfmC,KAAP;AAAA,GAA/B;AAkBArC,EAAAA,cAAc,CAACC,MAAD,EAASxD,MAAT,CAAd;AAEA,MAAMiI,SAAS,GAAG7B,WAAW,GACxB,EADwB,GAEzB;AACE8B,IAAAA,IAAI,EAAE,GADR;AAEEC,IAAAA,WAAW,EAAE,CAFf;AAGEC,IAAAA,eAAe,EAAE;AAAE9G,MAAAA,GAAG,EAAE,CAAP;AAAUE,MAAAA,MAAM,EAAE;AAAlB,KAHnB;AAIE6G,IAAAA,YAAY,EAAE,KAJhB;AAKEC,IAAAA,MAAM,EAAExB,UALV;AAMEyB,IAAAA,SAAS,EAAEjB;AANb,GAFJ;AAWA,MAAMjE,OAAO,GAAqB;AAChCoD,IAAAA,CAAC,EAADA,CADgC;AAEhCH,IAAAA,QAAQ,EAARA,QAFgC;AAGhC9C,IAAAA,MAAM,EAANA,MAHgC;AAIhCuC,IAAAA,WAAW,EAAXA,WAJgC;AAKhCD,IAAAA,UAAU,EAAVA,UALgC;AAMhCS,IAAAA,iBAAiB,EAAjBA,iBANgC;AAOhC3C,IAAAA,SAAS,EAATA,SAPgC;AAQhCqE,IAAAA,SAAS,EAATA,SARgC;AAShCvF,IAAAA,YAAY,EAAZA,YATgC;AAUhCsD,IAAAA,YAAY,EAAZA;AAVgC,GAAlC;;AAaA,MAAMwC,YAAY,gBACbnC,IADa;AAEhBhC,IAAAA,GAAG,EAAHA,GAFgB;AAGhB5D,IAAAA,KAAK,EAAE6D,MAAM,CAACC;AAHE,IAAlB;;AAMA,MAAMkE,KAAK,GACTvF,mBAAA,CAACD,YAAY,CAACyF,QAAd;AAAuBC,IAAAA,KAAK,EAAEtF;GAA9B,EACEH,mBAAA,MAAA,oBAASsF,aAAT,EACEtF,mBAAA,CAAC0F,4BAAD,MAAA,EAEGpF,MAAM,GACHN,cAAA,CAAewD,GAAf,CAAmBf,QAAnB,EAA6B,UAACkD,KAAD,EAAa9F,CAAb;AAAA,WAC3BG,kBAAA,CAAmB2F,KAAnB,EAA0B;AAAEC,MAAAA,GAAG,mBAAiB/F;AAAtB,KAA1B,CAD2B;AAAA,GAA7B,CADG,GAIH,IANN,CADF,CADF,CADF;AAeA,MAAI3D,KAAJ,EAAW,OAAOqJ,KAAP;AAEX,SAAOM,qBAAA,CAAsBN,KAAtB,EAA6BvI,QAAQ,CAACD,IAAtC,CAAP;AACD,CAtKW,CAAd;;ACPA,IAAM+I,UAAU,GAAG,8CAAnB;AAEA,IAAMC,cAAc,gBAAG/F,gBAAA,CACrB,gBAAoCmB,GAApC;MAAGsB,gBAAAA;wBAAUlF;MAAAA,gCAAQ;MAAO4F;;yBAUtBjD,eAAe;MARjBqD,qBAAAA;MACAjD,0BAAAA;MACAI,6BAAAA;MACAkC,8BAAAA;+CACAC;MAAAA,iDAAc;MACdO,4BAAAA;MACA5D,gCAAAA;MACAsD,gCAAAA;;2BAGkCrC,iBAAiB,CAACH,MAAD,EAASI,SAAT;MAA7CE,6CAAAA;;AACR,MAAMoF,QAAQ,GAAGpD,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,MAAMqD,WAAW,GAAG7I,CAAC,YAAUA,CAAV,YAAkB0I,UAAlB,SAAkCA,UAAvD;AAEA,SACE9F,mBAAA,CAACkG,mBAAM,CAACC,GAAR,oBACMhD;AACJhC,IAAAA,GAAG,EAAEiF,SAAS,CAAC,CAAChD,QAAD,EAAWjC,GAAX,CAAD;AACdkF,IAAAA,SAAS,EAAC;AACV9I,IAAAA,KAAK,eAAO6D,MAAM,CAACQ,SAAd;AAAyBF,MAAAA,MAAM,EAAEuE;AAAjC,OAAiD1I,KAAjD;AAAwDgG,MAAAA,CAAC,EAADA;AAAxD;AACL+C,IAAAA,OAAO,EAAE;AAAE/C,MAAAA,CAAC,EAAE/D;AAAL;AACTiF,IAAAA,OAAO,EAAE;AACPlB,MAAAA,CAAC,EAAEyC,QADI;AAEPrI,MAAAA,UAAU;AAAI+G,QAAAA,IAAI,EAAE;AAAV,SAAuB5B,YAAvB;AAFH;AAITyD,IAAAA,IAAI,EAAE;AAAEhD,MAAAA,CAAC,EAAE/D;AAAL;AACNgH,IAAAA,mBAAmB,EAAE5F;IAXvB,EAaG6B,QAbH,CADF;AAiBD,CAnCoB,CAAvB;;ACJA,IAAMgE,YAAY,gBAAGzG,gBAAA,CACnB,gBAAyDmB,GAAzD;MAAGsB,gBAAAA;8BAAUS;MAAAA,4CAAc;wBAAO3F;MAAAA,gCAAQ;MAAO4F;;yBACzBjD,eAAe;MAA7B6E,6BAAAA;;AAER,SACE/E,mBAAA,CAACkG,mBAAM,CAACC,GAAR,oBACMhD;AACJhC,IAAAA,GAAG,EAAEA;AACLkF,IAAAA,SAAS,EAAC;AACV9I,IAAAA,KAAK,eAAO6D,MAAM,CAACkB,OAAd,EAA0B/E,KAA1B;KACA2F,WAAW,GAAG,EAAH,GAAQ6B,UAL1B,EAOGtC,QAPH,CADF;AAWD,CAfkB,CAArB;;ACAA,IAAMiE,WAAW,gBAAG1G,gBAAA,CAClB,gBAAyDmB,GAAzD;MAAGsB,gBAAAA;8BAAUS;MAAAA,4CAAc;wBAAO3F;MAAAA,gCAAQ;MAAO4F;;yBACNjD,eAAe;MAAhDmD,qCAAAA;MAAmB0B,6BAAAA;;AAE3B,MAAM4B,mBAAmB,GAAGC,yBAAY,CACtCvD,iBADsC,EAEtC,UAAAwD,CAAC;AAAA,uCAA8BA,CAA9B;AAAA,GAFqC,CAAxC;AAKA,MAAMC,mBAAmB,GAAGF,yBAAY,CACtCvD,iBADsC,EAEtC,UAAAwD,CAAC;AAAA,wCAA+B,CAAC,CAAD,GAAKA,CAApC;AAAA,GAFqC,CAAxC;AAKA,SACE7G,mBAAA,CAACkG,mBAAM,CAACC,GAAR,oBACMhD;AACJhC,IAAAA,GAAG,EAAEA;AACL5D,IAAAA,KAAK,eAAO6D,MAAM,CAACY,aAAd,EAAgCzE,KAAhC;KACA2F,WAAW,GAAG,EAAH,GAAQ6B,UAJ1B,EAMGtC,QAAQ,IACPzC,mBAAA,MAAA;AAAKqG,IAAAA,SAAS,EAAC;AAA2B9I,IAAAA,KAAK,EAAE6D,MAAM,CAACa;GAAxD,EACEjC,mBAAA,CAACkG,mBAAM,CAACa,IAAR;AACEV,IAAAA,SAAS,EAAC;AACV9I,IAAAA,KAAK,eAAO6D,MAAM,CAACgB,SAAd;AAAyBxE,MAAAA,SAAS,EAAE+I;AAApC;GAFP,CADF,EAKE3G,mBAAA,CAACkG,mBAAM,CAACa,IAAR;AACEV,IAAAA,SAAS,EAAC;AACV9I,IAAAA,KAAK,eAAO6D,MAAM,CAACgB,SAAd;AAAyBxE,MAAAA,SAAS,EAAEkJ;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,gBAAGpH,gBAAA,CACpB,gBAA0BmB,GAA1B;wBAAG5D;MAAAA,gCAAQ;MAAO4F;;AAChB,MAAMkE,IAAI,GAAGL,WAAW,CAAC7D,IAAD,CAAX,GAAoB+C,mBAAM,CAACoB,MAA3B,GAAoCpB,mBAAM,CAACC,GAAxD;AACA,MAAM5E,aAAa,GAAGyF,WAAW,CAAC7D,IAAD,CAAX,GAAoB,MAApB,GAA6B,MAAnD;AAEA,SACEnD,mBAAA,CAACqH,IAAD,oBACMlE;AACJhC,IAAAA,GAAG,EAAEA;AACLkF,IAAAA,SAAS,EAAC;AACV9I,IAAAA,KAAK,eAAO6D,MAAM,CAACI,QAAd,EAA2BjE,KAA3B;AAAkCgE,MAAAA,aAAa,EAAbA;AAAlC;AACL+E,IAAAA,OAAO,EAAE;AAAE9H,MAAAA,OAAO,EAAE;AAAX;AACTiG,IAAAA,OAAO,EAAE;AAAEjG,MAAAA,OAAO,EAAE;AAAX;AACT+H,IAAAA,IAAI,EAAE;AAAE/H,MAAAA,OAAO,EAAE;AAAX;IAPR,CADF;AAWD,CAhBmB,CAAtB;;ACOA,IAAM+I,cAAc,GAAQ/E,KAA5B;AACA+E,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.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 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 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","round","console","assert","handleDrag","_","delta","velocity","getVelocity","set","max","get","handleDragEnd","sheetEl","contentHeight","getBoundingClientRect","snapTo","animate","type","snapValue","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,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"),o=(e=require("react-merge-refs"))&&"object"==typeof e&&"default"in e?e.default:e;function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=require("react-dom"),r=require("framer-motion"),o=(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 a(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[r])>=0||(o[n]=e[n]);return o}var s="undefined"==typeof window,l=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 c=s?t.useEffect:t.useLayoutEffect,u=t.createContext(void 0),f=function(){var e=t.useContext(u);if(!e)throw Error("Sheet context error");return e},p=function(e){var n=t.useRef();return t.useEffect((function(){n.current=e})),n.current},m={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"}},y=t.forwardRef((function(e,o){var f=e.children,y=e.isOpen,g=e.onClose,h=e.onOpenStart,v=e.onOpenEnd,b=e.onCloseStart,E=e.onCloseEnd,C=e.onSnap,x=e.snapPoints,w=e.initialSnap,O=void 0===w?0:w,S=e.rootId,R=e.mountPoint,P=e.springConfig,k=void 0===P?{stiffness:300,damping:30,mass:.2}:P,j=e.disableDrag,M=void 0!==j&&j,D=e.style,I=a(e,["children","isOpen","onClose","onOpenStart","onOpenEnd","onCloseStart","onCloseEnd","onSnap","snapPoints","initialSnap","rootId","mountPoint","springConfig","disableDrag","style"]),q=t.useRef(null),T=t.useRef({onOpenStart:h,onOpenEnd:v,onCloseStart:b,onCloseEnd:E}),A=r.useMotionValue(0),L=function(){var e=t.useState(0),n=e[0],r=e[1];return c((function(){var e=function(){return r(window.innerHeight)};return window.addEventListener("resize",e),e(),function(){return window.removeEventListener("resize",e)}}),[]),n}(),N=r.useMotionValue(0);x&&(x=x.map((function(e){return e>0&&e<=1?Math.round(e*L):e<0?L+e:e})),console.assert(function(e){for(var t=0;t<e.length;t++)if(e[t+1]>e[t])return!1;return!0}(x)||0===L,"Snap points need to be in descending order got: ["+x+"]"));var H=t.useCallback((function(e,t){var n=t.delta,r=N.getVelocity();r>0&&A.set(10),r<0&&A.set(-10),N.set(Math.max(N.get()+n.y,0))}),[]),z=t.useCallback((function(e,t){if(t.velocity.y>500)g();else{var n=q.current.getBoundingClientRect().height,o=Math.round(x?l(x.map((function(e){return n-e})),N.get()):N.get()/n>.6?n:0);if(r.animate(N,o,i({type:"spring"},k)),x&&C){var a=Math.abs(Math.round(x[0]-o)),s=x.indexOf(l(x,a));C(s)}o>=n&&g()}A.set(0)}),[g,C]);t.useEffect((function(){T.current={onOpenStart:h,onOpenEnd:v,onCloseStart:b,onCloseEnd:E}})),t.useEffect((function(){x&&C&&C(y?O:x.length-1)}),[y]),t.useImperativeHandle(o,(function(){return{y:N,snapTo:function(e){var t=q.current;if(x&&void 0!==x[e]&&null!==t){var n=t.getBoundingClientRect().height,o=n-x[e];r.animate(N,o,i({type:"spring"},k)),C&&C(e),o>=n&&g()}}}})),function(e,n){var r=p(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 i=document.createElement("div");i.setAttribute("aria-hidden","true"),i.id="react-modal-sheet-highlight",i.style.position="absolute",i.style.top="0px",i.style.left="0px",i.style.bottom="0px",i.style.right="0px",i.style.opacity="0",i.style.transition="opacity 200ms linear",i.style.backgroundColor="rgba(150, 150, 150, 0.1)",n.appendChild(i),requestAnimationFrame((function(){return i.style.opacity="1"}))}}(n):n&&!e&&r&&d(n)}),[e,r]),t.useEffect((function(){return function(){n&&e&&d(n)}}),[e])}(y,S);var B={y:N,sheetRef:q,isOpen:y,initialSnap:O,snapPoints:x,indicatorRotation:A,callbacks:T,dragProps:M?{}:{drag:"y",dragElastic:0,dragConstraints:{top:0,bottom:0},dragMomentum:!1,onDrag:H,onDragEnd:z},windowHeight:L,springConfig:k},V=i({},I,{ref:o,style:i({},m.wrapper,D)}),W=t.createElement(u.Provider,{value:B},t.createElement("div",Object.assign({},V),t.createElement(r.AnimatePresence,null,y?t.Children.map(f,(function(e,n){return t.cloneElement(e,{key:"sheet-child-"+n})})):null)));return s?W:n.createPortal(W,null!=R?R:document.body)})),g="calc(100% - env(safe-area-inset-top) - 34px)",h=t.forwardRef((function(e,n){var s=e.children,l=e.style,d=void 0===l?{}:l,c=a(e,["children","style"]),u=f(),y=u.y,h=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=p(e),o=t.useRef(!1),i=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:i}}(u.isOpen,u.callbacks).handleAnimationComplete,O=h?h[0]-h[b]:0,S=h?h[0]:null,R=S?"min("+S+"px, "+g+")":g;return t.createElement(r.motion.div,Object.assign({},c,{ref:o([E,n]),className:"react-modal-sheet-container",style:i({},m.container,{height:R},d,{y:y}),initial:{y:C},animate:{y:O,transition:i({type:"spring"},x)},exit:{y:C},onAnimationComplete:w}),s)})),v=t.forwardRef((function(e,n){var o=e.children,s=e.disableDrag,l=void 0!==s&&s,d=e.style,c=void 0===d?{}:d,u=a(e,["children","disableDrag","style"]),p=f().dragProps;return t.createElement(r.motion.div,Object.assign({},u,{ref:n,className:"react-modal-sheet-content",style:i({},m.content,c)},l?{}:p),o)})),b=t.forwardRef((function(e,n){var o=e.children,s=e.disableDrag,l=void 0!==s&&s,d=e.style,c=void 0===d?{}:d,u=a(e,["children","disableDrag","style"]),p=f(),y=p.indicatorRotation,g=p.dragProps,h=r.useTransform(y,(function(e){return"translateX(2px) rotate("+e+"deg)"})),v=r.useTransform(y,(function(e){return"translateX(-2px) rotate("+-1*e+"deg)"}));return t.createElement(r.motion.div,Object.assign({},u,{ref:n,style:i({},m.headerWrapper,c)},l?{}:g),o||t.createElement("div",{className:"react-modal-sheet-header",style:m.header},t.createElement(r.motion.span,{className:"react-modal-sheet-drag-indicator",style:i({},m.indicator,{transform:h})}),t.createElement(r.motion.span,{className:"react-modal-sheet-drag-indicator",style:i({},m.indicator,{transform:v})})))})),E=function(e){return!!e.onClick||!!e.onTap},C=t.forwardRef((function(e,n){var o=e.style,s=void 0===o?{}:o,l=a(e,["style"]),d=E(l)?r.motion.button:r.motion.div,c=E(l)?"auto":"none";return t.createElement(d,Object.assign({},l,{ref:n,className:"react-modal-sheet-backdrop",style:i({},m.backdrop,s,{pointerEvents:c}),initial:{opacity:0},animate:{opacity:1},exit:{opacity:0}}))})),x=y;x.Container=h,x.Header=b,x.Content=v,x.Backdrop=C,exports.default=x;
|
|
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 springConfig = { stiffness: 300, damping: 30, mass: 0.2 },\n disableDrag = false,\n ...rest\n },\n ref\n ) => {\n const sheetRef = React.useRef<any>(null);\n const callbacks = React.useRef({ onOpenStart, onOpenEnd, onCloseStart, onCloseEnd }); // prettier-ignore\n const indicatorRotation = useMotionValue(0);\n const windowHeight = useWindowHeight();\n\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,\n };\n\n const sheet = (\n <SheetContext.Provider value={context}>\n <div {...wrapperProps}>\n <AnimatePresence>\n {/* NOTE: AnimatePresence requires us to set keys to children */}\n {isOpen\n ? React.Children.map(children, (child: any, i) =>\n React.cloneElement(child, { key: `sheet-child-${i}` })\n )\n : null}\n </AnimatePresence>\n </div>\n </SheetContext.Provider>\n );\n\n if (isSSR) return sheet;\n\n return ReactDOM.createPortal(sheet, document.body);\n }\n);\n\nexport default Sheet;\n","import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport mergeRefs from 'react-merge-refs';\n\nimport { SheetContainerProps } from './types';\nimport { useSheetContext } from './context';\nimport { useEventCallbacks } from './hooks';\nimport styles from './styles';\n\nconst MAX_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';\n\nconst SheetContainer = React.forwardRef<any, SheetContainerProps>(\n ({ children, style = {}, ...rest }, ref) => {\n const {\n y,\n isOpen,\n callbacks,\n snapPoints,\n initialSnap = 0,\n sheetRef,\n windowHeight,\n springConfig,\n } = useSheetContext();\n\n const { handleAnimationComplete } = useEventCallbacks(isOpen, callbacks);\n const initialY = snapPoints ? snapPoints[0] - snapPoints[initialSnap] : 0;\n const h = snapPoints ? snapPoints[0] : null;\n const sheetHeight = h ? `min(${h}px, ${MAX_HEIGHT})` : MAX_HEIGHT;\n\n return (\n <motion.div\n {...rest}\n ref={mergeRefs([sheetRef, ref])}\n className=\"react-modal-sheet-container\"\n style={{ ...styles.container, height: sheetHeight, ...style, y }}\n initial={{ y: windowHeight }}\n animate={{\n y: initialY,\n transition: { type: 'spring', ...springConfig },\n }}\n exit={{ y: windowHeight }}\n onAnimationComplete={handleAnimationComplete}\n >\n {children}\n </motion.div>\n );\n }\n);\n\nexport default SheetContainer;\n","import * as React from 'react';\nimport { motion } from 'framer-motion';\n\nimport { SheetDraggableProps } from './types';\nimport styles from './styles';\nimport { useSheetContext } from './context';\n\nconst SheetContent = React.forwardRef<any, SheetDraggableProps>(\n ({ children, disableDrag = false, style = {}, ...rest }, ref) => {\n const { dragProps } = useSheetContext();\n\n return (\n <motion.div\n {...rest}\n ref={ref}\n className=\"react-modal-sheet-content\"\n style={{ ...styles.content, ...style }}\n {...(disableDrag ? {} : dragProps)}\n >\n {children}\n </motion.div>\n );\n }\n);\n\nexport default SheetContent;\n","import * as React from 'react';\nimport { motion, useTransform } from 'framer-motion';\n\nimport { SheetDraggableProps } from './types';\nimport { useSheetContext } from './context';\nimport styles from './styles';\n\nconst SheetHeader = React.forwardRef<any, SheetDraggableProps>(\n ({ children, disableDrag = false, style = {}, ...rest }, ref) => {\n const { indicatorRotation, dragProps } = useSheetContext();\n\n const indicator1Transform = useTransform(\n indicatorRotation,\n r => `translateX(2px) rotate(${r}deg)`\n );\n\n const indicator2Transform = useTransform(\n indicatorRotation,\n r => `translateX(-2px) rotate(${-1 * r}deg)`\n );\n\n return (\n <motion.div\n {...rest}\n ref={ref}\n style={{ ...styles.headerWrapper, ...style }}\n {...(disableDrag ? {} : dragProps)}\n >\n {children || (\n <div className=\"react-modal-sheet-header\" style={styles.header}>\n <motion.span\n className=\"react-modal-sheet-drag-indicator\"\n style={{ ...styles.indicator, transform: indicator1Transform }}\n />\n <motion.span\n className=\"react-modal-sheet-drag-indicator\"\n style={{ ...styles.indicator, transform: indicator2Transform }}\n />\n </div>\n )}\n </motion.div>\n );\n }\n);\n\nexport default SheetHeader;\n","import * as React from 'react';\nimport { motion } from 'framer-motion';\n\nimport { SheetBackdropProps } from './types';\nimport styles from './styles';\n\nconst isClickable = (props: any) => !!props.onClick || !!props.onTap;\n\nconst SheetBackdrop = React.forwardRef<any, SheetBackdropProps>(\n ({ style = {}, ...rest }, ref) => {\n const Comp = isClickable(rest) ? motion.button : motion.div;\n const pointerEvents = isClickable(rest) ? 'auto' : 'none';\n\n return (\n <Comp\n {...rest}\n ref={ref}\n className=\"react-modal-sheet-backdrop\"\n style={{ ...styles.backdrop, ...style, pointerEvents }}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n />\n );\n }\n);\n\nexport default SheetBackdrop;\n","import { 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","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';\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 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","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","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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"}
|
|
@@ -264,6 +264,7 @@ var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
264
264
|
_ref$initialSnap = _ref.initialSnap,
|
|
265
265
|
initialSnap = _ref$initialSnap === void 0 ? 0 : _ref$initialSnap,
|
|
266
266
|
rootId = _ref.rootId,
|
|
267
|
+
mountPoint = _ref.mountPoint,
|
|
267
268
|
_ref$springConfig = _ref.springConfig,
|
|
268
269
|
springConfig = _ref$springConfig === void 0 ? {
|
|
269
270
|
stiffness: 300,
|
|
@@ -272,7 +273,8 @@ var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
272
273
|
} : _ref$springConfig,
|
|
273
274
|
_ref$disableDrag = _ref.disableDrag,
|
|
274
275
|
disableDrag = _ref$disableDrag === void 0 ? false : _ref$disableDrag,
|
|
275
|
-
|
|
276
|
+
style = _ref.style,
|
|
277
|
+
rest = _objectWithoutPropertiesLoose(_ref, ["children", "isOpen", "onClose", "onOpenStart", "onOpenEnd", "onCloseStart", "onCloseEnd", "onSnap", "snapPoints", "initialSnap", "rootId", "mountPoint", "springConfig", "disableDrag", "style"]);
|
|
276
278
|
|
|
277
279
|
var sheetRef = useRef(null);
|
|
278
280
|
var callbacks = useRef({
|
|
@@ -292,7 +294,7 @@ var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
292
294
|
if (snapPoints) {
|
|
293
295
|
// Convert negative / percentage snap points to absolute values
|
|
294
296
|
snapPoints = snapPoints.map(function (point) {
|
|
295
|
-
if (point > 0 && point <= 1) return point * windowHeight; // percentage values e.g. between 0.0 and 1.0
|
|
297
|
+
if (point > 0 && point <= 1) return Math.round(point * windowHeight); // percentage values e.g. between 0.0 and 1.0
|
|
296
298
|
|
|
297
299
|
return point < 0 ? windowHeight + point : point; // negative values
|
|
298
300
|
});
|
|
@@ -318,11 +320,11 @@ var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
318
320
|
} else {
|
|
319
321
|
var sheetEl = sheetRef.current;
|
|
320
322
|
var contentHeight = sheetEl.getBoundingClientRect().height;
|
|
321
|
-
var snapTo = snapPoints ? getClosest(snapPoints.map(function (p) {
|
|
323
|
+
var snapTo = Math.round(snapPoints ? getClosest(snapPoints.map(function (p) {
|
|
322
324
|
return contentHeight - p;
|
|
323
325
|
}), y.get()) // prettier-ignore
|
|
324
326
|
: y.get() / contentHeight > 0.6 // Close if dragged over 60%
|
|
325
|
-
? contentHeight : 0; // Update the spring value so that the sheet is animated to the snap point
|
|
327
|
+
? contentHeight : 0); // Update the spring value so that the sheet is animated to the snap point
|
|
326
328
|
|
|
327
329
|
animate(y, snapTo, _extends({
|
|
328
330
|
type: 'spring'
|
|
@@ -330,7 +332,8 @@ var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
330
332
|
|
|
331
333
|
if (snapPoints && onSnap) {
|
|
332
334
|
var snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));
|
|
333
|
-
var snapIndex = snapPoints.indexOf(snapValue);
|
|
335
|
+
var snapIndex = snapPoints.indexOf(getClosest(snapPoints, snapValue)); // prettier-ignore
|
|
336
|
+
|
|
334
337
|
onSnap(snapIndex);
|
|
335
338
|
}
|
|
336
339
|
|
|
@@ -403,7 +406,7 @@ var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
403
406
|
|
|
404
407
|
var wrapperProps = _extends({}, rest, {
|
|
405
408
|
ref: ref,
|
|
406
|
-
style: styles.wrapper
|
|
409
|
+
style: _extends({}, styles.wrapper, style)
|
|
407
410
|
});
|
|
408
411
|
|
|
409
412
|
var sheet = createElement(SheetContext.Provider, {
|
|
@@ -414,7 +417,7 @@ var Sheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
414
417
|
});
|
|
415
418
|
}) : null)));
|
|
416
419
|
if (isSSR) return sheet;
|
|
417
|
-
return createPortal(sheet, document.body);
|
|
420
|
+
return createPortal(sheet, mountPoint != null ? mountPoint : document.body);
|
|
418
421
|
});
|
|
419
422
|
|
|
420
423
|
var MAX_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';
|
|
@@ -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 springConfig = { stiffness: 300, damping: 30, mass: 0.2 },\n disableDrag = false,\n ...rest\n },\n ref\n ) => {\n const sheetRef = React.useRef<any>(null);\n const callbacks = React.useRef({ onOpenStart, onOpenEnd, onCloseStart, onCloseEnd }); // prettier-ignore\n const indicatorRotation = useMotionValue(0);\n const windowHeight = useWindowHeight();\n\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,\n };\n\n const sheet = (\n <SheetContext.Provider value={context}>\n <div {...wrapperProps}>\n <AnimatePresence>\n {/* NOTE: AnimatePresence requires us to set keys to children */}\n {isOpen\n ? React.Children.map(children, (child: any, i) =>\n React.cloneElement(child, { key: `sheet-child-${i}` })\n )\n : null}\n </AnimatePresence>\n </div>\n </SheetContext.Provider>\n );\n\n if (isSSR) return sheet;\n\n return ReactDOM.createPortal(sheet, document.body);\n }\n);\n\nexport default Sheet;\n","import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport mergeRefs from 'react-merge-refs';\n\nimport { SheetContainerProps } from './types';\nimport { useSheetContext } from './context';\nimport { useEventCallbacks } from './hooks';\nimport styles from './styles';\n\nconst MAX_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';\n\nconst SheetContainer = React.forwardRef<any, SheetContainerProps>(\n ({ children, style = {}, ...rest }, ref) => {\n const {\n y,\n isOpen,\n callbacks,\n snapPoints,\n initialSnap = 0,\n sheetRef,\n windowHeight,\n springConfig,\n } = useSheetContext();\n\n const { handleAnimationComplete } = useEventCallbacks(isOpen, callbacks);\n const initialY = snapPoints ? snapPoints[0] - snapPoints[initialSnap] : 0;\n const h = snapPoints ? snapPoints[0] : null;\n const sheetHeight = h ? `min(${h}px, ${MAX_HEIGHT})` : MAX_HEIGHT;\n\n return (\n <motion.div\n {...rest}\n ref={mergeRefs([sheetRef, ref])}\n className=\"react-modal-sheet-container\"\n style={{ ...styles.container, height: sheetHeight, ...style, y }}\n initial={{ y: windowHeight }}\n animate={{\n y: initialY,\n transition: { type: 'spring', ...springConfig },\n }}\n exit={{ y: windowHeight }}\n onAnimationComplete={handleAnimationComplete}\n >\n {children}\n </motion.div>\n );\n }\n);\n\nexport default SheetContainer;\n","import * as React from 'react';\nimport { motion } from 'framer-motion';\n\nimport { SheetDraggableProps } from './types';\nimport styles from './styles';\nimport { useSheetContext } from './context';\n\nconst SheetContent = React.forwardRef<any, SheetDraggableProps>(\n ({ children, disableDrag = false, style = {}, ...rest }, ref) => {\n const { dragProps } = useSheetContext();\n\n return (\n <motion.div\n {...rest}\n ref={ref}\n className=\"react-modal-sheet-content\"\n style={{ ...styles.content, ...style }}\n {...(disableDrag ? {} : dragProps)}\n >\n {children}\n </motion.div>\n );\n }\n);\n\nexport default SheetContent;\n","import * as React from 'react';\nimport { motion, useTransform } from 'framer-motion';\n\nimport { SheetDraggableProps } from './types';\nimport { useSheetContext } from './context';\nimport styles from './styles';\n\nconst SheetHeader = React.forwardRef<any, SheetDraggableProps>(\n ({ children, disableDrag = false, style = {}, ...rest }, ref) => {\n const { indicatorRotation, dragProps } = useSheetContext();\n\n const indicator1Transform = useTransform(\n indicatorRotation,\n r => `translateX(2px) rotate(${r}deg)`\n );\n\n const indicator2Transform = useTransform(\n indicatorRotation,\n r => `translateX(-2px) rotate(${-1 * r}deg)`\n );\n\n return (\n <motion.div\n {...rest}\n ref={ref}\n style={{ ...styles.headerWrapper, ...style }}\n {...(disableDrag ? {} : dragProps)}\n >\n {children || (\n <div className=\"react-modal-sheet-header\" style={styles.header}>\n <motion.span\n className=\"react-modal-sheet-drag-indicator\"\n style={{ ...styles.indicator, transform: indicator1Transform }}\n />\n <motion.span\n className=\"react-modal-sheet-drag-indicator\"\n style={{ ...styles.indicator, transform: indicator2Transform }}\n />\n </div>\n )}\n </motion.div>\n );\n }\n);\n\nexport default SheetHeader;\n","import * as React from 'react';\nimport { motion } from 'framer-motion';\n\nimport { SheetBackdropProps } from './types';\nimport styles from './styles';\n\nconst isClickable = (props: any) => !!props.onClick || !!props.onTap;\n\nconst SheetBackdrop = React.forwardRef<any, SheetBackdropProps>(\n ({ style = {}, ...rest }, ref) => {\n const Comp = isClickable(rest) ? motion.button : motion.div;\n const pointerEvents = isClickable(rest) ? 'auto' : 'none';\n\n return (\n <Comp\n {...rest}\n ref={ref}\n className=\"react-modal-sheet-backdrop\"\n style={{ ...styles.backdrop, ...style, pointerEvents }}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n />\n );\n }\n);\n\nexport default SheetBackdrop;\n","import { 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","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.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 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 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","round","console","assert","handleDrag","_","delta","velocity","getVelocity","set","max","get","handleDragEnd","sheetEl","contentHeight","getBoundingClientRect","snapTo","animate","type","snapValue","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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"}
|
package/dist/sheet.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ declare const Sheet: React.ForwardRefExoticComponent<{
|
|
|
4
4
|
children: React.ReactNode;
|
|
5
5
|
onClose: () => void;
|
|
6
6
|
rootId?: string | undefined;
|
|
7
|
+
mountPoint?: Element | undefined;
|
|
7
8
|
snapPoints?: number[] | undefined;
|
|
8
9
|
initialSnap?: number | undefined;
|
|
9
10
|
springConfig?: import("popmotion").SpringOptions | undefined;
|
package/dist/types.d.ts
CHANGED
package/package.json
CHANGED
package/src/sheet.tsx
CHANGED
|
@@ -28,8 +28,10 @@ const Sheet = React.forwardRef<any, SheetProps>(
|
|
|
28
28
|
snapPoints,
|
|
29
29
|
initialSnap = 0,
|
|
30
30
|
rootId,
|
|
31
|
+
mountPoint,
|
|
31
32
|
springConfig = { stiffness: 300, damping: 30, mass: 0.2 },
|
|
32
33
|
disableDrag = false,
|
|
34
|
+
style,
|
|
33
35
|
...rest
|
|
34
36
|
},
|
|
35
37
|
ref
|
|
@@ -47,7 +49,7 @@ const Sheet = React.forwardRef<any, SheetProps>(
|
|
|
47
49
|
if (snapPoints) {
|
|
48
50
|
// Convert negative / percentage snap points to absolute values
|
|
49
51
|
snapPoints = snapPoints.map(point => {
|
|
50
|
-
if (point > 0 && point <= 1) return point * windowHeight; // percentage values e.g. between 0.0 and 1.0
|
|
52
|
+
if (point > 0 && point <= 1) return Math.round(point * windowHeight); // percentage values e.g. between 0.0 and 1.0
|
|
51
53
|
return point < 0 ? windowHeight + point : point; // negative values
|
|
52
54
|
});
|
|
53
55
|
|
|
@@ -75,18 +77,20 @@ const Sheet = React.forwardRef<any, SheetProps>(
|
|
|
75
77
|
} else {
|
|
76
78
|
const sheetEl = sheetRef.current as HTMLDivElement;
|
|
77
79
|
const contentHeight = sheetEl.getBoundingClientRect().height;
|
|
78
|
-
const snapTo =
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
80
|
+
const snapTo = Math.round(
|
|
81
|
+
snapPoints
|
|
82
|
+
? getClosest(snapPoints.map(p => contentHeight - p), y.get()) // prettier-ignore
|
|
83
|
+
: y.get() / contentHeight > 0.6 // Close if dragged over 60%
|
|
84
|
+
? contentHeight
|
|
85
|
+
: 0
|
|
86
|
+
);
|
|
83
87
|
|
|
84
88
|
// Update the spring value so that the sheet is animated to the snap point
|
|
85
89
|
animate(y, snapTo, { type: 'spring', ...springConfig });
|
|
86
90
|
|
|
87
91
|
if (snapPoints && onSnap) {
|
|
88
92
|
const snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));
|
|
89
|
-
const snapIndex = snapPoints.indexOf(snapValue);
|
|
93
|
+
const snapIndex = snapPoints.indexOf(getClosest(snapPoints, snapValue)); // prettier-ignore
|
|
90
94
|
onSnap(snapIndex);
|
|
91
95
|
}
|
|
92
96
|
|
|
@@ -159,7 +163,7 @@ const Sheet = React.forwardRef<any, SheetProps>(
|
|
|
159
163
|
const wrapperProps = {
|
|
160
164
|
...rest,
|
|
161
165
|
ref,
|
|
162
|
-
style: styles.wrapper,
|
|
166
|
+
style: { ...styles.wrapper, ...style },
|
|
163
167
|
};
|
|
164
168
|
|
|
165
169
|
const sheet = (
|
|
@@ -179,7 +183,7 @@ const Sheet = React.forwardRef<any, SheetProps>(
|
|
|
179
183
|
|
|
180
184
|
if (isSSR) return sheet;
|
|
181
185
|
|
|
182
|
-
return ReactDOM.createPortal(sheet, document.body);
|
|
186
|
+
return ReactDOM.createPortal(sheet, mountPoint ?? document.body);
|
|
183
187
|
}
|
|
184
188
|
);
|
|
185
189
|
|
package/src/types.tsx
CHANGED