react-modal-sheet 3.0.0 â 3.1.0
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 +55 -39
- package/dist/index.js +28 -17
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +28 -17
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -5
- package/src/hooks.tsx +17 -8
- package/src/sheet.tsx +31 -20
- package/src/types.tsx +1 -0
- package/src/utils.ts +6 -3
package/README.md
CHANGED
|
@@ -17,8 +17,7 @@
|
|
|
17
17
|
|  |  |  |  |
|
|
18
18
|
| :--------------: | :--------------: | :--------------: | :--------------: |
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
## Installation
|
|
20
|
+
## đĻ Installation
|
|
22
21
|
|
|
23
22
|
```sh
|
|
24
23
|
npm install react-modal-sheet
|
|
@@ -38,7 +37,7 @@ The gestures and animations are handled by the excellent [Framer Motion](https:/
|
|
|
38
37
|
npm install framer-motion
|
|
39
38
|
```
|
|
40
39
|
|
|
41
|
-
## Usage
|
|
40
|
+
## đģ Usage
|
|
42
41
|
|
|
43
42
|
```jsx
|
|
44
43
|
import { Sheet } from 'react-modal-sheet';
|
|
@@ -69,29 +68,29 @@ Since the final bottom sheet is composed from smaller building blocks (`Containe
|
|
|
69
68
|
|
|
70
69
|
Also, by constructing the sheet from smaller pieces makes it easier to apply any necessary accessibility related properties to the right components without requiring the main sheet component to be aware of them. You can read more about accessibility in the [Accessibility](#Accessibility) section.
|
|
71
70
|
|
|
72
|
-
## Props
|
|
71
|
+
## đī¸ Props
|
|
73
72
|
|
|
74
|
-
| Name | Required | Default | Description
|
|
75
|
-
| ---------------------- | -------- | ------------------------------------ |
|
|
76
|
-
| `children` | yes | | Use `Sheet.Container/Content/Header/Backdrop` to compose your bottom sheet.
|
|
77
|
-
| `isOpen` | yes | | Boolean that indicates whether the sheet is open or not.
|
|
78
|
-
| `onClose` | yes | | Callback fn that is called when the sheet is closed by the user.
|
|
79
|
-
| `disableDrag` | no | false | Disable drag for the whole sheet.
|
|
73
|
+
| Name | Required | Default | Description |
|
|
74
|
+
| ---------------------- | -------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
75
|
+
| `children` | yes | | Use `Sheet.Container/Content/Header/Backdrop` to compose your bottom sheet. |
|
|
76
|
+
| `isOpen` | yes | | Boolean that indicates whether the sheet is open or not. |
|
|
77
|
+
| `onClose` | yes | | Callback fn that is called when the sheet is closed by the user. |
|
|
78
|
+
| `disableDrag` | no | false | Disable drag for the whole sheet. |
|
|
80
79
|
| `disableScrollLocking` | no | false | Disable scroll locking for the `body` element while sheet is open. Can be useful if you face issues with input elements and the iOS virtual keyboard. See related [issue](https://github.com/Temzasse/react-modal-sheet/issues/135). |
|
|
81
|
-
| `detent` | no | `'full-height'` | The [detent](https://developer.apple.com/design/human-interface-guidelines/components/presentation/sheets#ios-ipados) in which the sheet should be in when opened. Available values: `'full-height'` or `'content-height'`.
|
|
82
|
-
| `onOpenStart` | no | | Callback fn that is called when the sheet opening animation starts.
|
|
83
|
-
| `onOpenEnd` | no | | Callback fn that is called when the sheet opening animation is completed.
|
|
84
|
-
| `onCloseStart` | no | | Callback fn that is called when the sheet closing animation starts.
|
|
85
|
-
| `onCloseEnd` | no | | Callback fn that is called when the sheet closing animation is completed.
|
|
86
|
-
| `onSnap` | no | | Callback fn that is called with the current snap point index when the sheet snaps to a new snap point. Requires `snapPoints` prop.
|
|
87
|
-
| `snapPoints` | no | | Eg. `[-50, 0.5, 100, 0]` - where positive values are pixels from the bottom of the screen and negative from the top. Values between 0-1 represent percentages, eg. `0.5` means 50% of window height from the bottom of the sceen.
|
|
88
|
-
| `initialSnap` | no | 0 | Initial snap point when sheet is opened (index from `snapPoints`).
|
|
89
|
-
| `rootId` | no | | The id of the element where the main app is mounted, eg. "root". Enables iOS modal effect.
|
|
90
|
-
| `tweenConfig` | no | `{ ease: 'easeOut', duration: 0.2 }` | Overrides the config for the sheet [tween](https://www.framer.com/motion/transition/#tween) transition when the sheet is opened, closed, or snapped to a point.
|
|
91
|
-
| `mountPoint` | no | `document.body` | HTML element that should be used as the mount point for the sheet.
|
|
92
|
-
| `prefersReducedMotion` | no | false | Skip sheet animations (sheet instantly snaps to desired location).
|
|
93
|
-
|
|
94
|
-
## Methods and properties
|
|
80
|
+
| `detent` | no | `'full-height'` | The [detent](https://developer.apple.com/design/human-interface-guidelines/components/presentation/sheets#ios-ipados) in which the sheet should be in when opened. Available values: `'full-height'` or `'content-height'`. |
|
|
81
|
+
| `onOpenStart` | no | | Callback fn that is called when the sheet opening animation starts. |
|
|
82
|
+
| `onOpenEnd` | no | | Callback fn that is called when the sheet opening animation is completed. |
|
|
83
|
+
| `onCloseStart` | no | | Callback fn that is called when the sheet closing animation starts. |
|
|
84
|
+
| `onCloseEnd` | no | | Callback fn that is called when the sheet closing animation is completed. |
|
|
85
|
+
| `onSnap` | no | | Callback fn that is called with the current snap point index when the sheet snaps to a new snap point. Requires `snapPoints` prop. |
|
|
86
|
+
| `snapPoints` | no | | Eg. `[-50, 0.5, 100, 0]` - where positive values are pixels from the bottom of the screen and negative from the top. Values between 0-1 represent percentages, eg. `0.5` means 50% of window height from the bottom of the sceen. |
|
|
87
|
+
| `initialSnap` | no | 0 | Initial snap point when sheet is opened (index from `snapPoints`). |
|
|
88
|
+
| `rootId` | no | | The id of the element where the main app is mounted, eg. "root". Enables iOS modal effect. |
|
|
89
|
+
| `tweenConfig` | no | `{ ease: 'easeOut', duration: 0.2 }` | Overrides the config for the sheet [tween](https://www.framer.com/motion/transition/#tween) transition when the sheet is opened, closed, or snapped to a point. |
|
|
90
|
+
| `mountPoint` | no | `document.body` | HTML element that should be used as the mount point for the sheet. |
|
|
91
|
+
| `prefersReducedMotion` | no | false | Skip sheet animations (sheet instantly snaps to desired location). |
|
|
92
|
+
|
|
93
|
+
## âī¸ Methods and properties
|
|
95
94
|
|
|
96
95
|
### `snapTo(index)`
|
|
97
96
|
|
|
@@ -117,7 +116,7 @@ function Example() {
|
|
|
117
116
|
onClose={() => setOpen(false)}
|
|
118
117
|
snapPoints={[600, 400, 100, 0]}
|
|
119
118
|
initialSnap={1}
|
|
120
|
-
onSnap={snapIndex =>
|
|
119
|
+
onSnap={(snapIndex) =>
|
|
121
120
|
console.log('> Current snap point index:', snapIndex)
|
|
122
121
|
}
|
|
123
122
|
>
|
|
@@ -214,7 +213,7 @@ It is possible to use snap points with `detent="content-height"` **but** the sna
|
|
|
214
213
|
|
|
215
214
|
> âšī¸ If you are wondering where the term `detent` comes from it's from Apple's [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/components/presentation/sheets#ios-ipados).
|
|
216
215
|
|
|
217
|
-
## Compound Components
|
|
216
|
+
## đ§Š Compound Components
|
|
218
217
|
|
|
219
218
|
### `Sheet`
|
|
220
219
|
|
|
@@ -268,13 +267,31 @@ Sheet scroller can be used to make the whole sheet content or parts of it scroll
|
|
|
268
267
|
|
|
269
268
|
Sheet backdrop is a translucent overlay that helps to separate the sheet from it's background. By default the backdrop doesn't have any interaction attached to it but if you, for example, want to close the sheet when the backdrop is clicked you can provide tap handler to it which will change the rendered element from `div` to `button`.
|
|
270
269
|
|
|
271
|
-
|
|
270
|
+
**â ī¸ Note:** as the element is a motion component you need to use [`onTap`](https://www.framer.com/motion/gestures/#tap) instead of `onClick` if you want to add a click handler to it.
|
|
272
271
|
|
|
273
272
|
> đĨ Rendered element: `motion.div` or `motion.button`.
|
|
274
273
|
|
|
275
|
-
## Advanced usage
|
|
274
|
+
## ⨠Advanced usage
|
|
275
|
+
|
|
276
|
+
### â¨ī¸ Virtual keyboard avoidance
|
|
277
|
+
|
|
278
|
+
A common problem with React Modal Sheet is that since the sheet is rendered as a fixed positioned element it doesn't move when the virtual keyboard is opened which can lead to the keyboard covering the input elements.
|
|
279
|
+
|
|
280
|
+
Handling the virtual keyboard on mobile devices can be quite tricky. It doesn't help that the Web doesn't yet have widely supported APIs for working with the virtual keyboard.
|
|
281
|
+
|
|
282
|
+
**â ī¸ Note: This library does not provide any official built-in solution for keyboard avoidance!**
|
|
283
|
+
|
|
284
|
+
This is because it is not possible for the library to know how your sheet content is structured and how the sheet should behave when the keyboard is opened.
|
|
285
|
+
|
|
286
|
+
However, there are some strategies that you can use to handle the virtual keyboard:
|
|
276
287
|
|
|
277
|
-
|
|
288
|
+
1. Design your sheet content in a way that the input elements are positioned at the top of the sheet so that they are not covered by the keyboard. This is the easiest solution and if you look at popular mobile apps you can see that they often have input elements at the top of the screen exactly for this reason.
|
|
289
|
+
|
|
290
|
+
2. Listen to changes in the `visualViewport`, see [Visual Viewport API](https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API), and change styles like padding on the sheet content to move the input up when the keyboard is opened. See the `AvoidKeyboard` component [code](example/components/AvoidKeyboard.tsx) and [demo](https://temzasse.github.io/react-modal-sheet/#/avoid-keyboard) in the example app for a simple example of this. The example is based on a custom `useAnimatedVirtualKeyboard` hook which you can copy to your project at your own risk. **Note that at least on iOS there is a noticeable delay when the keyboard is opened and when the `resize` event is fired for the `visualViewport`**.
|
|
291
|
+
|
|
292
|
+
3. Use the experimental [VirtualKeyboard API](https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard_API) to detect when the virtual keyboard is opened and adjust the sheet content accordingly. **Note that this API is not yet widely supported in browsers, but it will most likely produce the best result.**
|
|
293
|
+
|
|
294
|
+
### đą Scrolling on touch devices
|
|
278
295
|
|
|
279
296
|
Scrolling and dragging are **the same** gesture on touch devices which can create problems when you want to have scrollable content inside the sheet. React Modal Sheet provides a `Sheet.Scroller` component that is able to automatically disable and enable dragging inside the `Sheet.Content` component based on the scroll state. There are three modes for the `Sheet.Scroller` reflected in the `draggableAt` prop:
|
|
280
297
|
|
|
@@ -302,14 +319,13 @@ function ScrollableExample() {
|
|
|
302
319
|
}
|
|
303
320
|
```
|
|
304
321
|
|
|
305
|
-
### iOS Modal View effect
|
|
322
|
+
### đĒ iOS Modal View effect
|
|
306
323
|
|
|
307
324
|
In addition to the `Sheet.Backdrop` it's possible to apply a scaling effect to the main app element to highlight the modality of the bottom sheet. This effect mimics the [iOS Modal View](https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/) presentation style to bring more focus to the sheet and add some delight to the user experience.
|
|
308
325
|
|
|
309
326
|
|  |  |
|
|
310
327
|
| :--------------: | :--------------: |
|
|
311
328
|
|
|
312
|
-
|
|
313
329
|
To enable this effect you can provide the id of the root element where your application is mounted:
|
|
314
330
|
|
|
315
331
|
```jsx
|
|
@@ -320,7 +336,7 @@ function Example() {
|
|
|
320
336
|
|
|
321
337
|
> â ī¸ **Limitations**: Since the effect is applied to the root element it will NOT work as desired if the HTML body element is scrolled down at all. One way to avoid this is to use something like `height: 100vh;` and `overflow: auto;` on the root element to make it fill the whole screen and be scrollable instead of the body element.
|
|
322
338
|
|
|
323
|
-
## Customization
|
|
339
|
+
## đ¨ Customization
|
|
324
340
|
|
|
325
341
|
The default styles for the `Sheet` component somewhat follows the styles of the previously mentioned iOS Modal View. However, if these default styles are not to your liking it's easy to make changes to them: you can provide a custom header or you can overwrite any style with CSS via the exposed class names.
|
|
326
342
|
|
|
@@ -372,7 +388,7 @@ You can add your own styles or override the default sheet styles via the exposed
|
|
|
372
388
|
|
|
373
389
|
```jsx
|
|
374
390
|
import { Sheet } from 'react-modal-sheet';
|
|
375
|
-
import styled from 'styled-components';
|
|
391
|
+
import { styled } from 'styled-components';
|
|
376
392
|
import { useState } from 'react';
|
|
377
393
|
|
|
378
394
|
const CustomSheet = styled(Sheet)`
|
|
@@ -412,7 +428,7 @@ function Example() {
|
|
|
412
428
|
}
|
|
413
429
|
```
|
|
414
430
|
|
|
415
|
-
## Accessibility
|
|
431
|
+
## âŋī¸ Accessibility
|
|
416
432
|
|
|
417
433
|
By default, react-modal-sheet doesn't include any built-in accessibility properties in order to not make any assumptions and to support a wide range of use cases. Additionally, not including 3rd party libraries for features like focus trapping or screen reader support makes it possible to utilize any accessibility libraries that your project may already use, eg. [React Aria](https://react-spectrum.adobe.com/react-aria/getting-started.html). This also helps to reduce JS bloat by not including similar libraries multiple times in your app bundle.
|
|
418
434
|
|
|
@@ -434,7 +450,7 @@ import {
|
|
|
434
450
|
useDialog,
|
|
435
451
|
} from 'react-aria';
|
|
436
452
|
|
|
437
|
-
|
|
453
|
+
function A11yExample() {
|
|
438
454
|
const sheetState = useOverlayTriggerState({});
|
|
439
455
|
const openButtonRef = useRef(null);
|
|
440
456
|
const openButton = useButton({ onPress: sheetState.open }, openButtonRef);
|
|
@@ -454,9 +470,9 @@ const A11yExample = () => {
|
|
|
454
470
|
</Sheet>
|
|
455
471
|
</div>
|
|
456
472
|
);
|
|
457
|
-
}
|
|
473
|
+
}
|
|
458
474
|
|
|
459
|
-
|
|
475
|
+
function SheetComp({ sheetState }) {
|
|
460
476
|
const containerRef = useRef(null);
|
|
461
477
|
const dialog = useDialog({}, containerRef);
|
|
462
478
|
const overlay = useOverlay(
|
|
@@ -493,11 +509,11 @@ const SheetComp = ({ sheetState }) => {
|
|
|
493
509
|
<Sheet.Backdrop />
|
|
494
510
|
</>
|
|
495
511
|
);
|
|
496
|
-
}
|
|
512
|
+
}
|
|
497
513
|
```
|
|
498
514
|
|
|
499
515
|
If you want to see a more real-world-like implementation you can take a look at the [Slack example](example/components/slack-message/index.tsx) and try out the related [demo](https://temzasse.github.io/react-modal-sheet/#/slack-message) (optimized for mobile).
|
|
500
516
|
|
|
501
|
-
### Building a reusable sheet
|
|
517
|
+
### đŠ Building a reusable sheet
|
|
502
518
|
|
|
503
519
|
In your projects it might make sense to build a reusable bottom sheet that has all the accessibility features included and can then be easily used in various places in the project. Take a look at the [A11ySheet](example/components/a11y/A11ySheet.tsx) example to get some insight on how to build such a component. By incorporating all the accessibility features inside your own reusable component you don't need to repeat them every time you want to use a bottom sheet in your app.
|
package/dist/index.js
CHANGED
|
@@ -150,13 +150,16 @@ function useEventCallbacks(isOpen, callbacks) {
|
|
|
150
150
|
function useDimensions() {
|
|
151
151
|
const [dimensions, setDimensions] = React2.useState({ height: 0, width: 0 });
|
|
152
152
|
useIsomorphicLayoutEffect(() => {
|
|
153
|
-
|
|
154
|
-
setDimensions({
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
153
|
+
function handler() {
|
|
154
|
+
setDimensions({
|
|
155
|
+
height: window.innerHeight,
|
|
156
|
+
width: window.innerWidth
|
|
157
|
+
});
|
|
158
|
+
}
|
|
159
|
+
handler();
|
|
160
|
+
window.addEventListener("resize", handler);
|
|
158
161
|
return () => {
|
|
159
|
-
window.removeEventListener("resize",
|
|
162
|
+
window.removeEventListener("resize", handler);
|
|
160
163
|
};
|
|
161
164
|
}, []);
|
|
162
165
|
return dimensions;
|
|
@@ -168,7 +171,7 @@ function usePrevious(state) {
|
|
|
168
171
|
});
|
|
169
172
|
return ref.current;
|
|
170
173
|
}
|
|
171
|
-
function
|
|
174
|
+
function useEffectEvent(handler) {
|
|
172
175
|
const handlerRef = React2.useRef();
|
|
173
176
|
useIsomorphicLayoutEffect(() => {
|
|
174
177
|
handlerRef.current = handler;
|
|
@@ -491,7 +494,6 @@ var Sheet = React2.forwardRef(
|
|
|
491
494
|
...rest
|
|
492
495
|
}, ref) => {
|
|
493
496
|
const sheetRef = React2.useRef(null);
|
|
494
|
-
const constraintsRef = React2.useRef(null);
|
|
495
497
|
const indicatorRotation = framerMotion.useMotionValue(0);
|
|
496
498
|
const { height: windowHeight } = useDimensions();
|
|
497
499
|
const shouldReduceMotion = framerMotion.useReducedMotion();
|
|
@@ -503,11 +505,11 @@ var Sheet = React2.forwardRef(
|
|
|
503
505
|
const y = framerMotion.useMotionValue(0);
|
|
504
506
|
const zIndex = framerMotion.useTransform(
|
|
505
507
|
y,
|
|
506
|
-
(value) => value >= windowHeight ? -1 : 9999999
|
|
508
|
+
(value) => value + 2 >= windowHeight ? -1 : 9999999
|
|
507
509
|
);
|
|
508
510
|
const visibility = framerMotion.useTransform(
|
|
509
511
|
y,
|
|
510
|
-
(value) => value >= windowHeight ? "hidden" : "visible"
|
|
512
|
+
(value) => value + 2 >= windowHeight ? "hidden" : "visible"
|
|
511
513
|
);
|
|
512
514
|
const callbacks = React2.useRef({
|
|
513
515
|
onOpenStart,
|
|
@@ -536,7 +538,7 @@ var Sheet = React2.forwardRef(
|
|
|
536
538
|
)}]`
|
|
537
539
|
);
|
|
538
540
|
}
|
|
539
|
-
const onDrag =
|
|
541
|
+
const onDrag = useEffectEvent((_, { delta }) => {
|
|
540
542
|
const velocity = y.getVelocity();
|
|
541
543
|
if (velocity > 0)
|
|
542
544
|
indicatorRotation.set(10);
|
|
@@ -544,12 +546,20 @@ var Sheet = React2.forwardRef(
|
|
|
544
546
|
indicatorRotation.set(-10);
|
|
545
547
|
y.set(Math.max(y.get() + delta.y, 0));
|
|
546
548
|
});
|
|
547
|
-
const
|
|
549
|
+
const onDragStart = useEffectEvent(() => {
|
|
550
|
+
const focusedElement = document.activeElement;
|
|
551
|
+
if (!focusedElement || !sheetRef.current)
|
|
552
|
+
return;
|
|
553
|
+
const isInput = focusedElement.tagName === "INPUT" || focusedElement.tagName === "TEXTAREA";
|
|
554
|
+
if (isInput && sheetRef.current.contains(focusedElement)) {
|
|
555
|
+
focusedElement.blur();
|
|
556
|
+
}
|
|
557
|
+
});
|
|
558
|
+
const onDragEnd = useEffectEvent((_, { velocity }) => {
|
|
548
559
|
if (velocity.y > DRAG_VELOCITY_THRESHOLD) {
|
|
549
560
|
onClose();
|
|
550
561
|
} else {
|
|
551
|
-
const
|
|
552
|
-
const sheetHeight = sheetEl.getBoundingClientRect().height;
|
|
562
|
+
const sheetHeight = sheetRef.current.getBoundingClientRect().height;
|
|
553
563
|
const currentY = y.get();
|
|
554
564
|
let snapTo = 0;
|
|
555
565
|
if (snapPoints) {
|
|
@@ -571,7 +581,7 @@ var Sheet = React2.forwardRef(
|
|
|
571
581
|
onSnap(snapIndex);
|
|
572
582
|
}
|
|
573
583
|
const roundedSheetHeight = Math.round(sheetHeight);
|
|
574
|
-
const shouldClose = snapTo >= roundedSheetHeight;
|
|
584
|
+
const shouldClose = snapTo + 2 >= roundedSheetHeight;
|
|
575
585
|
if (shouldClose)
|
|
576
586
|
onClose();
|
|
577
587
|
}
|
|
@@ -587,7 +597,7 @@ var Sheet = React2.forwardRef(
|
|
|
587
597
|
y,
|
|
588
598
|
snapTo: (snapIndex) => {
|
|
589
599
|
const sheetEl = sheetRef.current;
|
|
590
|
-
if ((snapPoints == null ? void 0 : snapPoints[snapIndex]) !== void 0 && sheetEl
|
|
600
|
+
if ((snapPoints == null ? void 0 : snapPoints[snapIndex]) !== void 0 && sheetEl) {
|
|
591
601
|
const sheetHeight = sheetEl.getBoundingClientRect().height;
|
|
592
602
|
const snapPoint = snapPoints[snapIndex];
|
|
593
603
|
const snapTo = validateSnapTo({
|
|
@@ -611,6 +621,7 @@ var Sheet = React2.forwardRef(
|
|
|
611
621
|
dragMomentum: false,
|
|
612
622
|
dragPropagation: false,
|
|
613
623
|
onDrag,
|
|
624
|
+
onDragStart,
|
|
614
625
|
onDragEnd
|
|
615
626
|
};
|
|
616
627
|
return disableDrag ? void 0 : dragProps2;
|
|
@@ -634,7 +645,7 @@ var Sheet = React2.forwardRef(
|
|
|
634
645
|
framerMotion.motion.div,
|
|
635
646
|
{
|
|
636
647
|
...rest,
|
|
637
|
-
ref
|
|
648
|
+
ref,
|
|
638
649
|
style: { ...styles_default.wrapper, zIndex, visibility, ...style }
|
|
639
650
|
},
|
|
640
651
|
/* @__PURE__ */ React2__default.default.createElement(framerMotion.AnimatePresence, null, isOpen ? /* @__PURE__ */ React2__default.default.createElement(SheetScrollerContextProvider, null, React2.Children.map(
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/sheet.tsx","../src/hooks.tsx","../src/constants.ts","../src/utils.ts","../src/context.tsx","../src/use-prevent-scroll.ts","../src/styles.ts","../src/SheetContainer.tsx","../src/SheetContent.tsx","../src/SheetHeader.tsx","../src/SheetBackdrop.tsx","../src/SheetScroller.tsx","../src/index.tsx"],"names":["React","useEffect","useRef","useState","useLayoutEffect","dragProps","forwardRef","motion","useTransform","Sheet"],"mappings":"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","sourcesContent":["import React, {\n Children,\n cloneElement,\n forwardRef,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport {\n animate,\n AnimatePresence,\n motion,\n type PanInfo,\n type Transition,\n useMotionValue,\n useReducedMotion,\n useTransform,\n} from 'framer-motion';\n\nimport {\n useModalEffect,\n useDimensions,\n useIsomorphicLayoutEffect,\n useEvent,\n} from './hooks';\n\nimport {\n REDUCED_MOTION_TWEEN_CONFIG,\n DEFAULT_TWEEN_CONFIG,\n DRAG_CLOSE_THRESHOLD,\n DRAG_VELOCITY_THRESHOLD,\n IS_SSR,\n} from './constants';\n\nimport { type SheetContextType, type SheetProps } from './types';\nimport { SheetScrollerContextProvider, SheetContext } from './context';\nimport {\n getClosest,\n inDescendingOrder,\n mergeRefs,\n validateSnapTo,\n} from './utils';\nimport { usePreventScroll } from './use-prevent-scroll';\nimport styles from './styles';\n\nconst Sheet = forwardRef<any, SheetProps>(\n (\n {\n onOpenStart,\n onOpenEnd,\n onClose,\n onCloseStart,\n onCloseEnd,\n onSnap,\n children,\n disableScrollLocking = false,\n isOpen,\n snapPoints,\n rootId,\n mountPoint,\n style,\n detent = 'full-height',\n initialSnap = 0,\n disableDrag = false,\n prefersReducedMotion = false,\n tweenConfig = DEFAULT_TWEEN_CONFIG,\n ...rest\n },\n ref\n ) => {\n const sheetRef = useRef<any>(null);\n const constraintsRef = useRef<any>(null);\n const indicatorRotation = useMotionValue(0);\n const { height: windowHeight } = useDimensions();\n const shouldReduceMotion = useReducedMotion();\n const reduceMotion = Boolean(prefersReducedMotion || shouldReduceMotion);\n const animationOptions: Transition = {\n type: 'tween',\n ...(reduceMotion ? REDUCED_MOTION_TWEEN_CONFIG : tweenConfig),\n };\n\n // NOTE: the inital value for `y` doesn't matter since it is overwritten by\n // the value driven by the `AnimatePresence` component when the sheet is opened\n // and after that it is driven by the gestures and/or snapping\n const y = useMotionValue(0);\n\n const zIndex = useTransform(y, (value) =>\n value >= windowHeight ? -1 : 9999999\n );\n\n const visibility = useTransform(y, (value) =>\n value >= windowHeight ? 'hidden' : 'visible'\n );\n\n // Keep the callback fns up-to-date so that they can be accessed inside\n // the effect without including them to the dependencies array\n const callbacks = useRef({\n onOpenStart,\n onOpenEnd,\n onCloseStart,\n onCloseEnd,\n });\n\n useIsomorphicLayoutEffect(() => {\n callbacks.current = {\n onOpenStart,\n onOpenEnd,\n onCloseStart,\n onCloseEnd,\n };\n });\n\n if (snapPoints) {\n // Convert negative / percentage snap points to absolute values\n snapPoints = snapPoints.map((point) => {\n // Percentage values e.g. between 0.0 and 1.0\n if (point > 0 && point <= 1) return Math.round(point * windowHeight);\n return point < 0 ? windowHeight + point : point; // negative values\n });\n\n console.assert(\n inDescendingOrder(snapPoints) || windowHeight === 0,\n `Snap points need to be in descending order got: [${snapPoints.join(\n ', '\n )}]`\n );\n }\n\n const onDrag = useEvent((_, { delta }: PanInfo) => {\n // Update drag indicator rotation based on drag velocity\n const velocity = y.getVelocity();\n\n if (velocity > 0) indicatorRotation.set(10);\n if (velocity < 0) indicatorRotation.set(-10);\n\n // Make sure user cannot drag beyond the top of the sheet\n y.set(Math.max(y.get() + delta.y, 0));\n });\n\n const onDragEnd = useEvent((_, { velocity }: PanInfo) => {\n if (velocity.y > DRAG_VELOCITY_THRESHOLD) {\n // User flicked the sheet down\n onClose();\n } else {\n const sheetEl = sheetRef.current as HTMLDivElement;\n const sheetHeight = sheetEl.getBoundingClientRect().height;\n const currentY = y.get();\n\n let snapTo = 0;\n\n if (snapPoints) {\n const snapToValues = snapPoints.map(\n (p) => sheetHeight - Math.min(p, sheetHeight)\n );\n\n // Allow snapping to the top of the sheet if detent is set to `content-height`\n if (detent === 'content-height' && !snapToValues.includes(0)) {\n snapToValues.unshift(0);\n }\n\n // Get the closest snap point\n snapTo = getClosest(snapToValues, currentY);\n } else if (currentY / sheetHeight > DRAG_CLOSE_THRESHOLD) {\n // Close if dragged over enough far\n snapTo = sheetHeight;\n }\n\n snapTo = validateSnapTo({ snapTo, sheetHeight });\n\n // Update the spring value so that the sheet is animated to the snap point\n void animate(y, snapTo, animationOptions);\n\n if (snapPoints && onSnap) {\n const snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));\n const snapIndex = snapPoints.indexOf(getClosest(snapPoints, snapValue)); // prettier-ignore\n onSnap(snapIndex);\n }\n\n const roundedSheetHeight = Math.round(sheetHeight);\n const shouldClose = snapTo >= roundedSheetHeight;\n\n if (shouldClose) onClose();\n }\n\n // Reset indicator rotation after dragging\n indicatorRotation.set(0);\n });\n\n // Trigger onSnap callback when sheet is opened or closed\n useEffect(() => {\n if (!snapPoints || !onSnap) return;\n const snapIndex = isOpen ? initialSnap : snapPoints.length - 1;\n onSnap(snapIndex);\n }, [isOpen]); // eslint-disable-line\n\n useImperativeHandle(ref, () => ({\n y,\n snapTo: (snapIndex: number) => {\n const sheetEl = sheetRef.current as HTMLDivElement | null;\n\n if (snapPoints?.[snapIndex] !== undefined && sheetEl !== null) {\n const sheetHeight = sheetEl.getBoundingClientRect().height;\n const snapPoint = snapPoints[snapIndex];\n const snapTo = validateSnapTo({\n snapTo: sheetHeight - snapPoint,\n sheetHeight,\n });\n\n void animate(y, snapTo, animationOptions);\n if (onSnap) onSnap(snapIndex);\n if (snapTo >= sheetHeight) onClose();\n }\n },\n }));\n\n useModalEffect(isOpen, rootId);\n\n // Framer Motion should handle body scroll locking but it's not working\n // properly on iOS. Scroll locking from React Aria seems to work much better.\n usePreventScroll({ isDisabled: disableScrollLocking || !isOpen });\n\n const dragProps = useMemo(() => {\n const dragProps: SheetContextType['dragProps'] = {\n drag: 'y',\n dragElastic: 0,\n dragMomentum: false,\n dragPropagation: false,\n onDrag,\n onDragEnd,\n };\n\n return disableDrag ? undefined : dragProps;\n }, [disableDrag, windowHeight]); // eslint-disable-line\n\n const context: SheetContextType = {\n y,\n sheetRef,\n isOpen,\n initialSnap,\n snapPoints,\n detent,\n indicatorRotation,\n callbacks,\n dragProps,\n windowHeight,\n animationOptions,\n reduceMotion,\n disableDrag,\n };\n\n const sheet = (\n <SheetContext.Provider value={context}>\n <motion.div\n {...rest}\n ref={mergeRefs([ref, constraintsRef])}\n style={{ ...styles.wrapper, zIndex, visibility, ...style }}\n >\n <AnimatePresence>\n {/* NOTE: AnimatePresence requires us to set keys to children */}\n {isOpen ? (\n <SheetScrollerContextProvider>\n {Children.map(children, (child: any, i) =>\n cloneElement(child, { key: `sheet-child-${i}` })\n )}\n </SheetScrollerContextProvider>\n ) : null}\n </AnimatePresence>\n </motion.div>\n </SheetContext.Provider>\n );\n\n if (IS_SSR) return sheet;\n\n return createPortal(sheet, mountPoint ?? document.body);\n }\n);\n\nSheet.displayName = 'Sheet';\n\nexport default Sheet;\n","import {\n type MutableRefObject,\n useCallback,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { type BoundingBox } from 'framer-motion';\n\nimport { IS_SSR } from './constants';\nimport { type SheetEvents } from './types';\nimport { applyRootStyles, cleanupRootStyles } from './utils';\n\nexport const useIsomorphicLayoutEffect = IS_SSR ? useEffect : useLayoutEffect;\n\nexport function useModalEffect(isOpen: boolean, rootId?: string) {\n const prevOpen = usePrevious(isOpen);\n\n // Automatically apply the iOS modal effect to the body when sheet opens/closes\n 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 useEffect(() => {\n return () => {\n if (rootId && isOpen) cleanupRootStyles(rootId);\n };\n }, [isOpen]); // eslint-disable-line\n}\n\nexport function useEventCallbacks(\n isOpen: boolean,\n callbacks: MutableRefObject<SheetEvents>\n) {\n const prevOpen = usePrevious(isOpen);\n const didOpen = 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 = 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 useEffect(() => {\n if (!prevOpen && isOpen) {\n callbacks.current.onOpenStart?.();\n } else if (!isOpen && prevOpen) {\n callbacks.current.onCloseStart?.();\n }\n }, [isOpen, prevOpen]); // eslint-disable-line\n\n return { handleAnimationComplete };\n}\n\nexport function useDimensions() {\n const [dimensions, setDimensions] = useState({ height: 0, width: 0 });\n\n useIsomorphicLayoutEffect(() => {\n const updateHeight = () =>\n { setDimensions({ height: window.innerHeight, width: window.innerWidth }); };\n window.addEventListener('resize', updateHeight);\n updateHeight();\n return () => { window.removeEventListener('resize', updateHeight); };\n }, []);\n\n return dimensions;\n}\n\nexport function usePrevious<T>(state: T): T | undefined {\n const ref = useRef<T>();\n\n useEffect(() => {\n ref.current = state;\n });\n\n return ref.current;\n}\n\n// Userland version of the `useEvent` React hook:\n// RFC: https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md\nexport function useEvent<T extends (...args: any[]) => any>(handler: T) {\n const handlerRef = useRef<T>();\n\n useIsomorphicLayoutEffect(() => {\n handlerRef.current = handler;\n });\n\n return useCallback((...args: any[]) => {\n const fn = handlerRef.current;\n return fn?.(...args);\n }, []) as T;\n}\n\n// This is a hacky way to fix a bug in framer-motion where the drag\n// constraints are not updated when window is resized.\n// https://github.com/framer/motion/issues/1659\nconst constraints: BoundingBox = { bottom: 0, top: 0, left: 0, right: 0 };\n\nexport function useDragConstraints() {\n const constraintsRef = useRef<any>(null);\n const onMeasureDragConstraints = useCallback(() => constraints, []);\n return { constraintsRef, onMeasureDragConstraints };\n}\n","export const MAX_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';\n\nexport const IS_SSR = typeof window === 'undefined';\n\nexport const DEFAULT_TWEEN_CONFIG = {\n ease: 'easeOut',\n duration: 0.2,\n};\n\nexport const REDUCED_MOTION_TWEEN_CONFIG = {\n ease: 'linear',\n duration: 0.01,\n};\n\nexport const DRAG_CLOSE_THRESHOLD = 0.6;\n\nexport const DRAG_VELOCITY_THRESHOLD = 500;\n","import { type ForwardedRef, type RefCallback } from 'react';\n\nexport function getClosest(nums: number[], goal: number) {\n let closest = nums[0];\n let minDifference = Math.abs(nums[0] - goal);\n\n for (let i = 1; i < nums.length; i++) {\n const difference = Math.abs(nums[i] - goal);\n if (difference < minDifference) {\n closest = nums[i];\n minDifference = difference;\n }\n }\n\n return closest;\n}\n\nexport function applyRootStyles(rootId: string) {\n const body = document.querySelector('body') as HTMLBodyElement;\n const root = document.querySelector(`#${rootId}`) as HTMLDivElement;\n\n if (root) {\n const p = 24;\n const h = window.innerHeight;\n const s = (h - p) / h;\n body.style.backgroundColor = '#000';\n root.style.overflow = 'hidden';\n root.style.willChange = 'transform';\n root.style.transition =\n 'transform 200ms ease-in-out, border-radius 200ms linear';\n root.style.transform = `translateY(calc(env(safe-area-inset-top) + ${p / 2}px)) scale(${s})`; // prettier-ignore\n root.style.borderTopRightRadius = '10px';\n root.style.borderTopLeftRadius = '10px';\n }\n}\n\nexport function cleanupRootStyles(rootId: string) {\n const body = document.querySelector('body') as HTMLBodyElement;\n const root = document.getElementById(rootId) as HTMLDivElement;\n\n function onTransitionEnd() {\n root.style.removeProperty('overflow');\n root.style.removeProperty('will-change');\n root.style.removeProperty('transition');\n body.style.removeProperty('background-color');\n root.removeEventListener('transitionend', onTransitionEnd);\n }\n\n if (root) {\n // Start animating back\n root.style.removeProperty('border-top-right-radius');\n root.style.removeProperty('border-top-left-radius');\n root.style.removeProperty('transform');\n\n // Remove temp properties after animation is finished\n root.addEventListener('transitionend', onTransitionEnd);\n }\n}\n\nexport function inDescendingOrder(arr: number[]) {\n for (let i = 0; i < arr.length; i++) {\n if (arr[i + 1] > arr[i]) return false;\n }\n\n return true;\n}\n\nexport function validateSnapTo({\n snapTo,\n sheetHeight,\n}: {\n snapTo: number;\n sheetHeight: number;\n}) {\n if (snapTo < 0) {\n console.warn(\n `Snap point is out of bounds. Sheet height is ${sheetHeight} but snap point is ${sheetHeight +\n Math.abs(snapTo)}.`\n );\n }\n\n return Math.max(Math.round(snapTo), 0);\n}\n\nexport function mergeRefs<T = any>(refs: Array<ForwardedRef<T>>): RefCallback<T> {\n return (value: any) => {\n refs.forEach((ref: any) => {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref) {\n ref.current = value;\n }\n });\n };\n}\n\nexport function isTouchDevice() {\n if (typeof window === 'undefined') return false;\n return 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n}\n","import React, { type ReactNode, createContext, useContext, useState } from 'react';\nimport { type SheetScrollerContextType, type SheetContextType } from './types';\n\nexport const SheetContext = createContext<SheetContextType | undefined>(\n undefined\n);\n\nexport const useSheetContext = () => {\n const context = useContext(SheetContext);\n if (!context) throw Error('Sheet context error');\n return context;\n};\n\nexport const SheetScrollerContext = createContext<\n SheetScrollerContextType | undefined\n>(undefined);\n\nexport function SheetScrollerContextProvider({\n children,\n}: {\n children: ReactNode;\n}) {\n const sheetContext = useSheetContext();\n const [disableDrag, setDisableDrag] = useState(!!sheetContext.disableDrag);\n\n function setDragEnabled() {\n if (!sheetContext.disableDrag) setDisableDrag(false);\n }\n\n function setDragDisabled() {\n if (!disableDrag) setDisableDrag(true);\n }\n\n return (\n <SheetScrollerContext.Provider\n value={{ disableDrag, setDragEnabled, setDragDisabled }}\n >\n {children}\n </SheetScrollerContext.Provider>\n );\n}\n\nexport const useSheetScrollerContext = () => {\n const context = useContext(SheetScrollerContext);\n if (!context) throw Error('Sheet scroller context error');\n return context;\n};\n","// Source: https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/overlays/src/usePreventScroll.ts\nimport {\n chain,\n getScrollParent,\n isIOS,\n useLayoutEffect,\n} from '@react-aria/utils';\n\ninterface PreventScrollOptions {\n /** Whether the scroll lock is disabled. */\n isDisabled?: boolean;\n}\n\nconst visualViewport =\n typeof window !== 'undefined' ? (window as any).visualViewport : undefined;\n\n// HTML input types that do not cause the software keyboard to appear.\nconst nonTextInputTypes = new Set([\n 'checkbox',\n 'radio',\n 'range',\n 'color',\n 'file',\n 'image',\n 'button',\n 'submit',\n 'reset',\n]);\n\n// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position\nlet preventScrollCount = 0;\nlet restore: any;\n\n/**\n * Prevents scrolling on the document body on mount, and\n * restores it on unmount. Also ensures that content does not\n * shift due to the scrollbars disappearing.\n */\nexport function usePreventScroll(options: PreventScrollOptions = {}) {\n const { isDisabled } = options;\n\n useLayoutEffect(() => {\n if (isDisabled) {\n return;\n }\n\n preventScrollCount++;\n if (preventScrollCount === 1) {\n if (isIOS()) {\n restore = preventScrollMobileSafari();\n } else {\n restore = preventScrollStandard();\n }\n }\n\n return () => {\n preventScrollCount--;\n if (preventScrollCount === 0) {\n restore();\n }\n };\n }, [isDisabled]);\n}\n\n// For most browsers, all we need to do is set `overflow: hidden` on the root element, and\n// add some padding to prevent the page from shifting when the scrollbar is hidden.\nfunction preventScrollStandard() {\n return chain(\n setStyle(\n document.documentElement,\n 'paddingRight',\n `${window.innerWidth - document.documentElement.clientWidth}px`\n ),\n setStyle(document.documentElement, 'overflow', 'hidden')\n );\n}\n\n// Mobile Safari is a whole different beast. Even with overflow: hidden,\n// it still scrolls the page in many situations:\n//\n// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.\n// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of\n// it, so it becomes scrollable.\n// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.\n// This may cause even fixed position elements to scroll off the screen.\n// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always\n// scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.\n//\n// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:\n//\n// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling\n// on the window.\n// 2. Prevent default on `touchmove` events inside a scrollable element when the scroll position is at the\n// top or bottom. This avoids the whole page scrolling instead, but does prevent overscrolling.\n// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.\n// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top\n// of the page, which prevents it from scrolling the page. After the input is focused, scroll the element\n// into view ourselves, without scrolling the whole page.\n// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the\n// same visually, but makes the actual scroll position always zero. This is required to make all of the\n// above work or Safari will still try to scroll the page when focusing an input.\n// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting\n// to navigate to an input with the next/previous buttons that's outside a modal.\nfunction preventScrollMobileSafari() {\n let scrollable: Element | undefined;\n let lastY = 0;\n\n const onTouchStart = (e: TouchEvent) => {\n // Store the nearest scrollable parent element from the element that the user touched.\n scrollable = getScrollParent(e.target as Element);\n if (\n scrollable === document.documentElement &&\n scrollable === document.body\n ) {\n return;\n }\n\n lastY = e.changedTouches[0].pageY;\n };\n\n const onTouchMove = (e: TouchEvent) => {\n // In special situations, `onTouchStart` may be called without `onTouchStart` being called.\n // (e.g. when the user places a finger on the screen before the <Sheet> is mounted and then moves the finger after it is mounted).\n // If `onTouchStart` is not called, `scrollable` is `undefined`. Therefore, such cases are ignored.\n if (scrollable === undefined) {\n return;\n }\n\n // Prevent scrolling the window.\n if (\n scrollable === document.documentElement ||\n scrollable === document.body\n ) {\n e.preventDefault();\n return;\n }\n\n // Prevent scrolling up when at the top and scrolling down when at the bottom\n // of a nested scrollable area, otherwise mobile Safari will start scrolling\n // the window instead. Unfortunately, this disables bounce scrolling when at\n // the top but it's the best we can do.\n const y = e.changedTouches[0].pageY;\n const scrollTop = scrollable.scrollTop;\n const bottom = scrollable.scrollHeight - scrollable.clientHeight;\n\n // Fix for: https://github.com/adobe/react-spectrum/pull/3780/files\n if (bottom === 0) {\n return;\n }\n\n if ((scrollTop <= 0 && y > lastY) || (scrollTop >= bottom && y < lastY)) {\n e.preventDefault();\n }\n\n lastY = y;\n };\n\n const onTouchEnd = (e: TouchEvent) => {\n const target = e.target as HTMLElement;\n\n // Apply this change if we're not already focused on the target element\n if (willOpenKeyboard(target) && target !== document.activeElement) {\n e.preventDefault();\n\n // Apply a transform to trick Safari into thinking the input is at the top of the page\n // so it doesn't try to scroll it into view. When tapping on an input, this needs to\n // be done before the \"focus\" event, so we have to focus the element ourselves.\n target.style.transform = 'translateY(-2000px)';\n target.focus();\n requestAnimationFrame(() => {\n target.style.transform = '';\n });\n }\n };\n\n const onFocus = (e: FocusEvent) => {\n const target = e.target as HTMLElement;\n if (willOpenKeyboard(target)) {\n // Transform also needs to be applied in the focus event in cases where focus moves\n // other than tapping on an input directly, e.g. the next/previous buttons in the\n // software keyboard. In these cases, it seems applying the transform in the focus event\n // is good enough, whereas when tapping an input, it must be done before the focus event. đ¤ˇââī¸\n target.style.transform = 'translateY(-2000px)';\n requestAnimationFrame(() => {\n target.style.transform = '';\n\n // This will have prevented the browser from scrolling the focused element into view,\n // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.\n if (visualViewport) {\n if (visualViewport.height < window.innerHeight) {\n // If the keyboard is already visible, do this after one additional frame\n // to wait for the transform to be removed.\n requestAnimationFrame(() => {\n scrollIntoView(target);\n });\n } else {\n // Otherwise, wait for the visual viewport to resize before scrolling so we can\n // measure the correct position to scroll to.\n visualViewport.addEventListener(\n 'resize',\n () => {\n scrollIntoView(target);\n },\n { once: true }\n );\n }\n }\n });\n }\n };\n\n const onWindowScroll = () => {\n // Last resort. If the window scrolled, scroll it back to the top.\n // It should always be at the top because the body will have a negative margin (see below).\n window.scrollTo(0, 0);\n };\n\n // Record the original scroll position so we can restore it.\n // Then apply a negative margin to the body to offset it by the scroll position. This will\n // enable us to scroll the window to the top, which is required for the rest of this to work.\n const scrollX = window.pageXOffset;\n const scrollY = window.pageYOffset;\n\n const restoreStyles = chain(\n setStyle(\n document.documentElement,\n 'paddingRight',\n `${window.innerWidth - document.documentElement.clientWidth}px`\n ),\n setStyle(document.documentElement, 'overflow', 'hidden'),\n setStyle(document.body, 'marginTop', `-${scrollY}px`)\n );\n\n // Scroll to the top. The negative margin on the body will make this appear the same.\n window.scrollTo(0, 0);\n\n const removeEvents = chain(\n addEvent(document, 'touchstart', onTouchStart, {\n passive: false,\n capture: true,\n }),\n addEvent(document, 'touchmove', onTouchMove, {\n passive: false,\n capture: true,\n }),\n addEvent(document, 'touchend', onTouchEnd, {\n passive: false,\n capture: true,\n }),\n addEvent(document, 'focus', onFocus, true),\n addEvent(window, 'scroll', onWindowScroll)\n );\n\n return () => {\n // Restore styles and scroll the page back to where it was.\n restoreStyles();\n removeEvents();\n window.scrollTo(scrollX, scrollY);\n };\n}\n\n// Sets a CSS property on an element, and returns a function to revert it to the previous value.\nfunction setStyle(element: any, style: string, value: string) {\n const cur = element.style[style];\n element.style[style] = value;\n\n return () => {\n element.style[style] = cur;\n };\n}\n\n// Adds an event listener to an element, and returns a function to remove it.\nfunction addEvent<K extends keyof GlobalEventHandlersEventMap>(\n target: EventTarget,\n event: K,\n handler: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any,\n options?: boolean | AddEventListenerOptions\n) {\n target.addEventListener(event, handler as any, options);\n return () => {\n target.removeEventListener(event, handler as any, options);\n };\n}\n\nfunction scrollIntoView(target: Element) {\n const root = document.scrollingElement || document.documentElement;\n while (target && target !== root) {\n // Find the parent scrollable element and adjust the scroll position if the target is not already in view.\n const scrollable = getScrollParent(target);\n if (\n scrollable !== document.documentElement &&\n scrollable !== document.body &&\n scrollable !== target\n ) {\n const scrollableTop = scrollable.getBoundingClientRect().top;\n const targetTop = target.getBoundingClientRect().top;\n if (targetTop > scrollableTop + target.clientHeight) {\n scrollable.scrollTop += targetTop - scrollableTop;\n }\n }\n\n target = scrollable.parentElement as any;\n }\n}\n\nfunction willOpenKeyboard(target: Element) {\n return (\n (target instanceof HTMLInputElement &&\n !nonTextInputTypes.has(target.type)) ||\n target instanceof HTMLTextAreaElement ||\n (target instanceof HTMLElement && target.isContentEditable)\n );\n}\n","import { type Properties } from 'csstype';\n\nconst styles: Record<string, Properties> = {\n wrapper: {\n position: 'fixed',\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n overflow: 'hidden',\n pointerEvents: 'none',\n },\n backdrop: {\n zIndex: 1,\n position: 'fixed',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n backgroundColor: 'rgba(0, 0, 0, 0.2)',\n touchAction: 'none', // Disable iOS body scrolling\n border: 'none',\n },\n container: {\n zIndex: 2,\n position: 'absolute',\n left: 0,\n bottom: 0,\n width: '100%',\n backgroundColor: '#fff',\n borderTopRightRadius: '8px',\n borderTopLeftRadius: '8px',\n boxShadow: '0px -2px 16px rgba(0, 0, 0, 0.3)',\n display: 'flex',\n flexDirection: 'column',\n pointerEvents: 'auto',\n },\n headerWrapper: {\n width: '100%',\n },\n header: {\n height: '40px',\n width: '100%',\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n indicator: {\n width: '18px',\n height: '4px',\n borderRadius: '99px',\n backgroundColor: '#ddd',\n },\n content: {\n flexGrow: 1,\n display: 'flex',\n flexDirection: 'column',\n minHeight: '0px',\n position: 'relative',\n },\n scroller: {\n height: '100%',\n overflowY: 'auto',\n },\n};\n\nexport default styles;\n","import React, { forwardRef } from 'react';\nimport { motion } from 'framer-motion';\n\nimport { type SheetContainerProps } from './types';\nimport { useSheetContext } from './context';\nimport { useEventCallbacks } from './hooks';\nimport { MAX_HEIGHT } from './constants';\nimport { mergeRefs } from './utils';\nimport styles from './styles';\n\nconst SheetContainer = forwardRef<any, SheetContainerProps>(\n ({ children, style = {}, className = '', ...rest }, ref) => {\n const {\n y,\n isOpen,\n callbacks,\n snapPoints,\n initialSnap = 0,\n sheetRef,\n windowHeight,\n detent,\n animationOptions,\n reduceMotion,\n } = useSheetContext();\n\n const { handleAnimationComplete } = useEventCallbacks(isOpen, callbacks);\n const initialY = snapPoints ? snapPoints[0] - snapPoints[initialSnap] : 0;\n const maxSnapHeight = snapPoints ? snapPoints[0] : null;\n\n const height =\n maxSnapHeight !== null\n ? `min(${maxSnapHeight}px, ${MAX_HEIGHT})`\n : MAX_HEIGHT;\n\n return (\n <motion.div\n {...rest}\n ref={mergeRefs([sheetRef, ref])}\n className={`react-modal-sheet-container ${className}`}\n style={{\n ...styles.container,\n ...style,\n ...(detent === 'full-height' && { height }),\n ...(detent === 'content-height' && { maxHeight: height }),\n y,\n }}\n initial={reduceMotion ? false : { y: windowHeight }}\n animate={{ y: initialY, transition: animationOptions }}\n exit={{ y: windowHeight, transition: animationOptions }}\n onAnimationComplete={handleAnimationComplete}\n >\n {children}\n </motion.div>\n );\n }\n);\n\nSheetContainer.displayName = 'SheetContainer';\n\nexport default SheetContainer;\n","import React, { forwardRef } from 'react';\nimport { motion } from 'framer-motion';\n\nimport { type SheetDraggableProps } from './types';\nimport { useSheetScrollerContext, useSheetContext } from './context';\nimport { useDragConstraints } from './hooks';\nimport { mergeRefs } from './utils';\nimport styles from './styles';\n\nconst SheetContent = forwardRef<any, SheetDraggableProps>(\n ({ children, style, disableDrag, className = '', ...rest }, ref) => {\n const sheetContext = useSheetContext();\n const sheetScrollerContext = useSheetScrollerContext();\n const { constraintsRef, onMeasureDragConstraints } = useDragConstraints();\n\n const dragProps =\n disableDrag || sheetScrollerContext.disableDrag\n ? undefined\n : sheetContext.dragProps;\n\n return (\n <motion.div\n {...rest}\n ref={mergeRefs([ref, constraintsRef])}\n className={`react-modal-sheet-content ${className}`}\n style={{ ...styles.content, ...style }}\n {...dragProps}\n dragConstraints={constraintsRef}\n onMeasureDragConstraints={onMeasureDragConstraints}\n >\n {children}\n </motion.div>\n );\n }\n);\n\nSheetContent.displayName = 'SheetContent';\n\nexport default SheetContent;\n","import React, { forwardRef } from 'react';\nimport { motion, useTransform } from 'framer-motion';\n\nimport { type SheetDraggableProps } from './types';\nimport { useSheetContext } from './context';\nimport { useDragConstraints } from './hooks';\nimport { mergeRefs } from './utils';\nimport styles from './styles';\n\nconst SheetHeader = forwardRef<any, SheetDraggableProps>(\n ({ children, style, disableDrag, ...rest }, ref) => {\n const { indicatorRotation, dragProps } = useSheetContext();\n const { constraintsRef, onMeasureDragConstraints } = useDragConstraints();\n const _dragProps = disableDrag ? undefined : dragProps;\n\n const indicator1Transform = useTransform(\n indicatorRotation,\n (r) => `translateX(2px) rotate(${r}deg)`\n );\n\n const indicator2Transform = useTransform(\n indicatorRotation,\n (r) => `translateX(-2px) rotate(${-1 * r}deg)`\n );\n\n return (\n <motion.div\n {...rest}\n ref={mergeRefs([ref, constraintsRef])}\n style={{ ...styles.headerWrapper, ...style }}\n {..._dragProps}\n dragConstraints={constraintsRef}\n onMeasureDragConstraints={onMeasureDragConstraints}\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\nSheetHeader.displayName = 'SheetHeader';\n\nexport default SheetHeader;\n","import React, { forwardRef } from 'react';\nimport { motion } from 'framer-motion';\n\nimport { type SheetBackdropProps } from './types';\nimport styles from './styles';\n\nconst isClickable = (props: any) => !!props.onClick || !!props.onTap;\n\nconst SheetBackdrop = forwardRef<any, SheetBackdropProps>(\n ({ style = {}, className = '', ...rest }, ref) => {\n const Comp = isClickable(rest) ? motion.button : motion.div;\n const pointerEvents = isClickable(rest) ? 'auto' : 'none';\n\n return (\n <Comp\n {...rest}\n ref={ref}\n className={`react-modal-sheet-backdrop ${className}`}\n style={{ ...styles.backdrop, ...style, pointerEvents }}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n />\n );\n }\n);\n\nSheetBackdrop.displayName = 'SheetBackdrop';\n\nexport default SheetBackdrop;\n","import React, { type TouchEvent, type UIEvent, forwardRef } from 'react';\n\nimport { useSheetScrollerContext } from './context';\nimport { type SheetScrollerProps } from './types';\nimport { isTouchDevice } from './utils';\nimport styles from './styles';\n\nconst SheetScroller = forwardRef<any, SheetScrollerProps>(\n ({ draggableAt = 'top', children, style, className = '', ...rest }, ref) => {\n const sheetScrollerContext = useSheetScrollerContext();\n\n function determineDragState(element: HTMLDivElement) {\n const { scrollTop, scrollHeight, clientHeight } = element;\n const isScrollable = scrollHeight > clientHeight;\n\n if (!isScrollable) return;\n\n const isAtTop = scrollTop <= 0;\n const isAtBottom = scrollHeight - scrollTop === clientHeight;\n\n const shouldEnable =\n (draggableAt === 'top' && isAtTop) ||\n (draggableAt === 'bottom' && isAtBottom) ||\n (draggableAt === 'both' && (isAtTop || isAtBottom));\n\n if (shouldEnable) {\n sheetScrollerContext.setDragEnabled();\n } else {\n sheetScrollerContext.setDragDisabled();\n }\n }\n\n function onScroll(e: UIEvent<HTMLDivElement>) {\n determineDragState(e.currentTarget);\n }\n\n function onTouchStart(e: TouchEvent<HTMLDivElement>) {\n determineDragState(e.currentTarget);\n }\n\n const scrollProps = isTouchDevice()\n ? { onScroll, onTouchStart }\n : undefined;\n\n return (\n <div\n {...rest}\n ref={ref}\n className={`react-modal-sheet-scroller ${className}`}\n style={{ ...styles.scroller, ...style }}\n {...scrollProps}\n >\n {children}\n </div>\n );\n }\n);\n\nSheetScroller.displayName = 'SheetScroller';\n\nexport default SheetScroller;\n","import { type MotionValue } from 'framer-motion';\n\nimport _Sheet from './sheet';\nimport SheetContainer from './SheetContainer';\nimport SheetContent from './SheetContent';\nimport SheetHeader from './SheetHeader';\nimport SheetBackdrop from './SheetBackdrop';\nimport SheetScroller from './SheetScroller';\nimport { type SheetCompound } from './types';\n\nexport interface SheetRef {\n y: MotionValue<number>;\n snapTo: (index: number) => void;\n}\n\n// HACK: this is needed to get the typing to work properly...\nconst _SheetCompound: any = _Sheet;\n_SheetCompound.Container = SheetContainer;\n_SheetCompound.Header = SheetHeader;\n_SheetCompound.Content = SheetContent;\n_SheetCompound.Backdrop = SheetBackdrop;\n_SheetCompound.Scroller = SheetScroller;\n\nexport const Sheet = _SheetCompound as SheetCompound;\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/sheet.tsx","../src/hooks.tsx","../src/constants.ts","../src/utils.ts","../src/context.tsx","../src/use-prevent-scroll.ts","../src/styles.ts","../src/SheetContainer.tsx","../src/SheetContent.tsx","../src/SheetHeader.tsx","../src/SheetBackdrop.tsx","../src/SheetScroller.tsx","../src/index.tsx"],"names":["React","useEffect","useRef","useState","useLayoutEffect","dragProps","forwardRef","motion","useTransform","Sheet"],"mappings":"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","sourcesContent":["import React, {\n Children,\n cloneElement,\n forwardRef,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport {\n animate,\n AnimatePresence,\n motion,\n type PanInfo,\n type Transition,\n useMotionValue,\n useReducedMotion,\n useTransform,\n} from 'framer-motion';\n\nimport {\n useModalEffect,\n useDimensions,\n useIsomorphicLayoutEffect,\n useEffectEvent,\n} from './hooks';\n\nimport {\n REDUCED_MOTION_TWEEN_CONFIG,\n DEFAULT_TWEEN_CONFIG,\n DRAG_CLOSE_THRESHOLD,\n DRAG_VELOCITY_THRESHOLD,\n IS_SSR,\n} from './constants';\n\nimport { type SheetContextType, type SheetProps } from './types';\nimport { SheetScrollerContextProvider, SheetContext } from './context';\nimport { getClosest, inDescendingOrder, validateSnapTo } from './utils';\nimport { usePreventScroll } from './use-prevent-scroll';\nimport styles from './styles';\n\nconst Sheet = forwardRef<any, SheetProps>(\n (\n {\n onOpenStart,\n onOpenEnd,\n onClose,\n onCloseStart,\n onCloseEnd,\n onSnap,\n children,\n disableScrollLocking = false,\n isOpen,\n snapPoints,\n rootId,\n mountPoint,\n style,\n detent = 'full-height',\n initialSnap = 0,\n disableDrag = false,\n prefersReducedMotion = false,\n tweenConfig = DEFAULT_TWEEN_CONFIG,\n ...rest\n },\n ref\n ) => {\n const sheetRef = useRef<HTMLDivElement>(null);\n const indicatorRotation = useMotionValue(0);\n const { height: windowHeight } = useDimensions();\n const shouldReduceMotion = useReducedMotion();\n const reduceMotion = Boolean(prefersReducedMotion || shouldReduceMotion);\n const animationOptions: Transition = {\n type: 'tween',\n ...(reduceMotion ? REDUCED_MOTION_TWEEN_CONFIG : tweenConfig),\n };\n\n // NOTE: the inital value for `y` doesn't matter since it is overwritten by\n // the value driven by the `AnimatePresence` component when the sheet is opened\n // and after that it is driven by the gestures and/or snapping\n const y = useMotionValue(0);\n\n // +2 for tolerance in case the animated value is slightly off\n const zIndex = useTransform(y, (value) =>\n value + 2 >= windowHeight ? -1 : 9999999\n );\n const visibility = useTransform(y, (value) =>\n value + 2 >= windowHeight ? 'hidden' : 'visible'\n );\n\n // Keep the callback fns up-to-date so that they can be accessed inside\n // the effect without including them to the dependencies array\n const callbacks = useRef({\n onOpenStart,\n onOpenEnd,\n onCloseStart,\n onCloseEnd,\n });\n\n useIsomorphicLayoutEffect(() => {\n callbacks.current = {\n onOpenStart,\n onOpenEnd,\n onCloseStart,\n onCloseEnd,\n };\n });\n\n if (snapPoints) {\n // Convert negative / percentage snap points to absolute values\n snapPoints = snapPoints.map((point) => {\n // Percentage values e.g. between 0.0 and 1.0\n if (point > 0 && point <= 1) return Math.round(point * windowHeight);\n return point < 0 ? windowHeight + point : point; // negative values\n });\n\n console.assert(\n inDescendingOrder(snapPoints) || windowHeight === 0,\n `Snap points need to be in descending order got: [${snapPoints.join(\n ', '\n )}]`\n );\n }\n\n const onDrag = useEffectEvent((_, { delta }: PanInfo) => {\n // Update drag indicator rotation based on drag velocity\n const velocity = y.getVelocity();\n\n if (velocity > 0) indicatorRotation.set(10);\n if (velocity < 0) indicatorRotation.set(-10);\n\n // Make sure user cannot drag beyond the top of the sheet\n y.set(Math.max(y.get() + delta.y, 0));\n });\n\n const onDragStart = useEffectEvent(() => {\n // Find focused input inside the sheet and blur it when dragging starts\n // to prevent a weird ghost caret \"bug\" on mobile\n const focusedElement = document.activeElement as HTMLElement | null;\n if (!focusedElement || !sheetRef.current) return;\n\n const isInput =\n focusedElement.tagName === 'INPUT' ||\n focusedElement.tagName === 'TEXTAREA';\n\n // Only blur the focused element if it's inside the sheet\n if (isInput && sheetRef.current.contains(focusedElement)) {\n focusedElement.blur();\n }\n });\n\n const onDragEnd = useEffectEvent((_, { velocity }: PanInfo) => {\n if (velocity.y > DRAG_VELOCITY_THRESHOLD) {\n // User flicked the sheet down\n onClose();\n } else {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const sheetHeight = sheetRef.current!.getBoundingClientRect().height;\n const currentY = y.get();\n\n let snapTo = 0;\n\n if (snapPoints) {\n const snapToValues = snapPoints.map(\n (p) => sheetHeight - Math.min(p, sheetHeight)\n );\n\n // Allow snapping to the top of the sheet if detent is set to `content-height`\n if (detent === 'content-height' && !snapToValues.includes(0)) {\n snapToValues.unshift(0);\n }\n\n // Get the closest snap point\n snapTo = getClosest(snapToValues, currentY);\n } else if (currentY / sheetHeight > DRAG_CLOSE_THRESHOLD) {\n // Close if dragged over enough far\n snapTo = sheetHeight;\n }\n\n snapTo = validateSnapTo({ snapTo, sheetHeight });\n\n // Update the spring value so that the sheet is animated to the snap point\n void animate(y, snapTo, animationOptions);\n\n if (snapPoints && onSnap) {\n const snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));\n const snapIndex = snapPoints.indexOf(getClosest(snapPoints, snapValue)); // prettier-ignore\n onSnap(snapIndex);\n }\n\n const roundedSheetHeight = Math.round(sheetHeight);\n const shouldClose = snapTo + 2 >= roundedSheetHeight; // 2px tolerance\n\n if (shouldClose) onClose();\n }\n\n // Reset indicator rotation after dragging\n indicatorRotation.set(0);\n });\n\n // Trigger onSnap callback when sheet is opened or closed\n useEffect(() => {\n if (!snapPoints || !onSnap) return;\n const snapIndex = isOpen ? initialSnap : snapPoints.length - 1;\n onSnap(snapIndex);\n }, [isOpen]); // eslint-disable-line\n\n useImperativeHandle(ref, () => ({\n y,\n snapTo: (snapIndex: number) => {\n const sheetEl = sheetRef.current;\n\n if (snapPoints?.[snapIndex] !== undefined && sheetEl) {\n const sheetHeight = sheetEl.getBoundingClientRect().height;\n const snapPoint = snapPoints[snapIndex];\n const snapTo = validateSnapTo({\n snapTo: sheetHeight - snapPoint,\n sheetHeight,\n });\n\n void animate(y, snapTo, animationOptions);\n if (onSnap) onSnap(snapIndex);\n if (snapTo >= sheetHeight) onClose();\n }\n },\n }));\n\n useModalEffect(isOpen, rootId);\n\n // Framer Motion should handle body scroll locking but it's not working\n // properly on iOS. Scroll locking from React Aria seems to work much better.\n usePreventScroll({ isDisabled: disableScrollLocking || !isOpen });\n\n const dragProps = useMemo(() => {\n const dragProps: SheetContextType['dragProps'] = {\n drag: 'y',\n dragElastic: 0,\n dragMomentum: false,\n dragPropagation: false,\n onDrag,\n onDragStart,\n onDragEnd,\n };\n\n return disableDrag ? undefined : dragProps;\n }, [disableDrag, windowHeight]); // eslint-disable-line\n\n const context: SheetContextType = {\n y,\n sheetRef,\n isOpen,\n initialSnap,\n snapPoints,\n detent,\n indicatorRotation,\n callbacks,\n dragProps,\n windowHeight,\n animationOptions,\n reduceMotion,\n disableDrag,\n };\n\n const sheet = (\n <SheetContext.Provider value={context}>\n <motion.div\n {...rest}\n ref={ref}\n style={{ ...styles.wrapper, zIndex, visibility, ...style }}\n >\n <AnimatePresence>\n {/* NOTE: AnimatePresence requires us to set keys to children */}\n {isOpen ? (\n <SheetScrollerContextProvider>\n {Children.map(children, (child: any, i) =>\n cloneElement(child, { key: `sheet-child-${i}` })\n )}\n </SheetScrollerContextProvider>\n ) : null}\n </AnimatePresence>\n </motion.div>\n </SheetContext.Provider>\n );\n\n if (IS_SSR) return sheet;\n\n return createPortal(sheet, mountPoint ?? document.body);\n }\n);\n\nSheet.displayName = 'Sheet';\n\nexport default Sheet;\n","import {\n type MutableRefObject,\n useCallback,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { type BoundingBox } from 'framer-motion';\n\nimport { IS_SSR } from './constants';\nimport { type SheetEvents } from './types';\nimport { applyRootStyles, cleanupRootStyles } from './utils';\n\nexport const useIsomorphicLayoutEffect = IS_SSR ? useEffect : useLayoutEffect;\n\nexport function useModalEffect(isOpen: boolean, rootId?: string) {\n const prevOpen = usePrevious(isOpen);\n\n // Automatically apply the iOS modal effect to the body when sheet opens/closes\n 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 useEffect(() => {\n return () => {\n if (rootId && isOpen) cleanupRootStyles(rootId);\n };\n }, [isOpen]); // eslint-disable-line\n}\n\nexport function useEventCallbacks(\n isOpen: boolean,\n callbacks: MutableRefObject<SheetEvents>\n) {\n const prevOpen = usePrevious(isOpen);\n const didOpen = 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 = 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 useEffect(() => {\n if (!prevOpen && isOpen) {\n callbacks.current.onOpenStart?.();\n } else if (!isOpen && prevOpen) {\n callbacks.current.onCloseStart?.();\n }\n }, [isOpen, prevOpen]); // eslint-disable-line\n\n return { handleAnimationComplete };\n}\n\nexport function useDimensions() {\n const [dimensions, setDimensions] = useState({ height: 0, width: 0 });\n\n useIsomorphicLayoutEffect(() => {\n function handler() {\n setDimensions({\n height: window.innerHeight,\n width: window.innerWidth,\n });\n }\n\n handler();\n\n window.addEventListener('resize', handler);\n\n return () => {\n window.removeEventListener('resize', handler);\n };\n }, []);\n\n return dimensions;\n}\n\nexport function usePrevious<T>(state: T): T | undefined {\n const ref = useRef<T>();\n\n useEffect(() => {\n ref.current = state;\n });\n\n return ref.current;\n}\n\n// Userland version of the `useEffectEvent` React hook:\n// RFC: https://react.dev/reference/react/experimental_useEffectEvent\nexport function useEffectEvent<T extends (...args: any[]) => any>(handler: T) {\n const handlerRef = useRef<T>();\n\n useIsomorphicLayoutEffect(() => {\n handlerRef.current = handler;\n });\n\n return useCallback((...args: any[]) => {\n const fn = handlerRef.current;\n return fn?.(...args);\n }, []) as T;\n}\n\n// This is a hacky way to fix a bug in framer-motion where the drag\n// constraints are not updated when window is resized.\n// https://github.com/framer/motion/issues/1659\nconst constraints: BoundingBox = { bottom: 0, top: 0, left: 0, right: 0 };\n\nexport function useDragConstraints() {\n const constraintsRef = useRef<any>(null);\n const onMeasureDragConstraints = useCallback(() => constraints, []);\n return { constraintsRef, onMeasureDragConstraints };\n}\n","export const MAX_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';\n\nexport const IS_SSR = typeof window === 'undefined';\n\nexport const DEFAULT_TWEEN_CONFIG = {\n ease: 'easeOut',\n duration: 0.2,\n};\n\nexport const REDUCED_MOTION_TWEEN_CONFIG = {\n ease: 'linear',\n duration: 0.01,\n};\n\nexport const DRAG_CLOSE_THRESHOLD = 0.6;\n\nexport const DRAG_VELOCITY_THRESHOLD = 500;\n","import { type ForwardedRef, type RefCallback } from 'react';\n\nexport function getClosest(nums: number[], goal: number) {\n let closest = nums[0];\n let minDifference = Math.abs(nums[0] - goal);\n\n for (let i = 1; i < nums.length; i++) {\n const difference = Math.abs(nums[i] - goal);\n if (difference < minDifference) {\n closest = nums[i];\n minDifference = difference;\n }\n }\n\n return closest;\n}\n\nexport function applyRootStyles(rootId: string) {\n const body = document.querySelector('body') as HTMLBodyElement;\n const root = document.querySelector(`#${rootId}`) as HTMLDivElement;\n\n if (root) {\n const p = 24;\n const h = window.innerHeight;\n const s = (h - p) / h;\n body.style.backgroundColor = '#000';\n root.style.overflow = 'hidden';\n root.style.willChange = 'transform';\n root.style.transition =\n 'transform 200ms ease-in-out, border-radius 200ms linear';\n root.style.transform = `translateY(calc(env(safe-area-inset-top) + ${p / 2}px)) scale(${s})`; // prettier-ignore\n root.style.borderTopRightRadius = '10px';\n root.style.borderTopLeftRadius = '10px';\n }\n}\n\nexport function cleanupRootStyles(rootId: string) {\n const body = document.querySelector('body') as HTMLBodyElement;\n const root = document.getElementById(rootId) as HTMLDivElement;\n\n function onTransitionEnd() {\n root.style.removeProperty('overflow');\n root.style.removeProperty('will-change');\n root.style.removeProperty('transition');\n body.style.removeProperty('background-color');\n root.removeEventListener('transitionend', onTransitionEnd);\n }\n\n if (root) {\n // Start animating back\n root.style.removeProperty('border-top-right-radius');\n root.style.removeProperty('border-top-left-radius');\n root.style.removeProperty('transform');\n\n // Remove temp properties after animation is finished\n root.addEventListener('transitionend', onTransitionEnd);\n }\n}\n\nexport function inDescendingOrder(arr: number[]) {\n for (let i = 0; i < arr.length; i++) {\n if (arr[i + 1] > arr[i]) return false;\n }\n\n return true;\n}\n\nexport function validateSnapTo({\n snapTo,\n sheetHeight,\n}: {\n snapTo: number;\n sheetHeight: number;\n}) {\n if (snapTo < 0) {\n console.warn(\n `Snap point is out of bounds. Sheet height is ${sheetHeight} but snap point is ${\n sheetHeight + Math.abs(snapTo)\n }.`\n );\n }\n\n return Math.max(Math.round(snapTo), 0);\n}\n\nexport function mergeRefs<T = any>(\n refs: Array<ForwardedRef<T>>\n): RefCallback<T> {\n return (value: any) => {\n refs.forEach((ref: any) => {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref) {\n ref.current = value;\n }\n });\n };\n}\n\nexport function isTouchDevice() {\n if (typeof window === 'undefined') return false;\n return 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n}\n","import React, { type ReactNode, createContext, useContext, useState } from 'react';\nimport { type SheetScrollerContextType, type SheetContextType } from './types';\n\nexport const SheetContext = createContext<SheetContextType | undefined>(\n undefined\n);\n\nexport const useSheetContext = () => {\n const context = useContext(SheetContext);\n if (!context) throw Error('Sheet context error');\n return context;\n};\n\nexport const SheetScrollerContext = createContext<\n SheetScrollerContextType | undefined\n>(undefined);\n\nexport function SheetScrollerContextProvider({\n children,\n}: {\n children: ReactNode;\n}) {\n const sheetContext = useSheetContext();\n const [disableDrag, setDisableDrag] = useState(!!sheetContext.disableDrag);\n\n function setDragEnabled() {\n if (!sheetContext.disableDrag) setDisableDrag(false);\n }\n\n function setDragDisabled() {\n if (!disableDrag) setDisableDrag(true);\n }\n\n return (\n <SheetScrollerContext.Provider\n value={{ disableDrag, setDragEnabled, setDragDisabled }}\n >\n {children}\n </SheetScrollerContext.Provider>\n );\n}\n\nexport const useSheetScrollerContext = () => {\n const context = useContext(SheetScrollerContext);\n if (!context) throw Error('Sheet scroller context error');\n return context;\n};\n","// Source: https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/overlays/src/usePreventScroll.ts\nimport {\n chain,\n getScrollParent,\n isIOS,\n useLayoutEffect,\n} from '@react-aria/utils';\n\ninterface PreventScrollOptions {\n /** Whether the scroll lock is disabled. */\n isDisabled?: boolean;\n}\n\nconst visualViewport =\n typeof window !== 'undefined' ? (window as any).visualViewport : undefined;\n\n// HTML input types that do not cause the software keyboard to appear.\nconst nonTextInputTypes = new Set([\n 'checkbox',\n 'radio',\n 'range',\n 'color',\n 'file',\n 'image',\n 'button',\n 'submit',\n 'reset',\n]);\n\n// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position\nlet preventScrollCount = 0;\nlet restore: any;\n\n/**\n * Prevents scrolling on the document body on mount, and\n * restores it on unmount. Also ensures that content does not\n * shift due to the scrollbars disappearing.\n */\nexport function usePreventScroll(options: PreventScrollOptions = {}) {\n const { isDisabled } = options;\n\n useLayoutEffect(() => {\n if (isDisabled) {\n return;\n }\n\n preventScrollCount++;\n if (preventScrollCount === 1) {\n if (isIOS()) {\n restore = preventScrollMobileSafari();\n } else {\n restore = preventScrollStandard();\n }\n }\n\n return () => {\n preventScrollCount--;\n if (preventScrollCount === 0) {\n restore();\n }\n };\n }, [isDisabled]);\n}\n\n// For most browsers, all we need to do is set `overflow: hidden` on the root element, and\n// add some padding to prevent the page from shifting when the scrollbar is hidden.\nfunction preventScrollStandard() {\n return chain(\n setStyle(\n document.documentElement,\n 'paddingRight',\n `${window.innerWidth - document.documentElement.clientWidth}px`\n ),\n setStyle(document.documentElement, 'overflow', 'hidden')\n );\n}\n\n// Mobile Safari is a whole different beast. Even with overflow: hidden,\n// it still scrolls the page in many situations:\n//\n// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.\n// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of\n// it, so it becomes scrollable.\n// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.\n// This may cause even fixed position elements to scroll off the screen.\n// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always\n// scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.\n//\n// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:\n//\n// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling\n// on the window.\n// 2. Prevent default on `touchmove` events inside a scrollable element when the scroll position is at the\n// top or bottom. This avoids the whole page scrolling instead, but does prevent overscrolling.\n// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.\n// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top\n// of the page, which prevents it from scrolling the page. After the input is focused, scroll the element\n// into view ourselves, without scrolling the whole page.\n// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the\n// same visually, but makes the actual scroll position always zero. This is required to make all of the\n// above work or Safari will still try to scroll the page when focusing an input.\n// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting\n// to navigate to an input with the next/previous buttons that's outside a modal.\nfunction preventScrollMobileSafari() {\n let scrollable: Element | undefined;\n let lastY = 0;\n\n const onTouchStart = (e: TouchEvent) => {\n // Store the nearest scrollable parent element from the element that the user touched.\n scrollable = getScrollParent(e.target as Element);\n if (\n scrollable === document.documentElement &&\n scrollable === document.body\n ) {\n return;\n }\n\n lastY = e.changedTouches[0].pageY;\n };\n\n const onTouchMove = (e: TouchEvent) => {\n // In special situations, `onTouchStart` may be called without `onTouchStart` being called.\n // (e.g. when the user places a finger on the screen before the <Sheet> is mounted and then moves the finger after it is mounted).\n // If `onTouchStart` is not called, `scrollable` is `undefined`. Therefore, such cases are ignored.\n if (scrollable === undefined) {\n return;\n }\n\n // Prevent scrolling the window.\n if (\n scrollable === document.documentElement ||\n scrollable === document.body\n ) {\n e.preventDefault();\n return;\n }\n\n // Prevent scrolling up when at the top and scrolling down when at the bottom\n // of a nested scrollable area, otherwise mobile Safari will start scrolling\n // the window instead. Unfortunately, this disables bounce scrolling when at\n // the top but it's the best we can do.\n const y = e.changedTouches[0].pageY;\n const scrollTop = scrollable.scrollTop;\n const bottom = scrollable.scrollHeight - scrollable.clientHeight;\n\n // Fix for: https://github.com/adobe/react-spectrum/pull/3780/files\n if (bottom === 0) {\n return;\n }\n\n if ((scrollTop <= 0 && y > lastY) || (scrollTop >= bottom && y < lastY)) {\n e.preventDefault();\n }\n\n lastY = y;\n };\n\n const onTouchEnd = (e: TouchEvent) => {\n const target = e.target as HTMLElement;\n\n // Apply this change if we're not already focused on the target element\n if (willOpenKeyboard(target) && target !== document.activeElement) {\n e.preventDefault();\n\n // Apply a transform to trick Safari into thinking the input is at the top of the page\n // so it doesn't try to scroll it into view. When tapping on an input, this needs to\n // be done before the \"focus\" event, so we have to focus the element ourselves.\n target.style.transform = 'translateY(-2000px)';\n target.focus();\n requestAnimationFrame(() => {\n target.style.transform = '';\n });\n }\n };\n\n const onFocus = (e: FocusEvent) => {\n const target = e.target as HTMLElement;\n if (willOpenKeyboard(target)) {\n // Transform also needs to be applied in the focus event in cases where focus moves\n // other than tapping on an input directly, e.g. the next/previous buttons in the\n // software keyboard. In these cases, it seems applying the transform in the focus event\n // is good enough, whereas when tapping an input, it must be done before the focus event. đ¤ˇââī¸\n target.style.transform = 'translateY(-2000px)';\n requestAnimationFrame(() => {\n target.style.transform = '';\n\n // This will have prevented the browser from scrolling the focused element into view,\n // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.\n if (visualViewport) {\n if (visualViewport.height < window.innerHeight) {\n // If the keyboard is already visible, do this after one additional frame\n // to wait for the transform to be removed.\n requestAnimationFrame(() => {\n scrollIntoView(target);\n });\n } else {\n // Otherwise, wait for the visual viewport to resize before scrolling so we can\n // measure the correct position to scroll to.\n visualViewport.addEventListener(\n 'resize',\n () => {\n scrollIntoView(target);\n },\n { once: true }\n );\n }\n }\n });\n }\n };\n\n const onWindowScroll = () => {\n // Last resort. If the window scrolled, scroll it back to the top.\n // It should always be at the top because the body will have a negative margin (see below).\n window.scrollTo(0, 0);\n };\n\n // Record the original scroll position so we can restore it.\n // Then apply a negative margin to the body to offset it by the scroll position. This will\n // enable us to scroll the window to the top, which is required for the rest of this to work.\n const scrollX = window.pageXOffset;\n const scrollY = window.pageYOffset;\n\n const restoreStyles = chain(\n setStyle(\n document.documentElement,\n 'paddingRight',\n `${window.innerWidth - document.documentElement.clientWidth}px`\n ),\n setStyle(document.documentElement, 'overflow', 'hidden'),\n setStyle(document.body, 'marginTop', `-${scrollY}px`)\n );\n\n // Scroll to the top. The negative margin on the body will make this appear the same.\n window.scrollTo(0, 0);\n\n const removeEvents = chain(\n addEvent(document, 'touchstart', onTouchStart, {\n passive: false,\n capture: true,\n }),\n addEvent(document, 'touchmove', onTouchMove, {\n passive: false,\n capture: true,\n }),\n addEvent(document, 'touchend', onTouchEnd, {\n passive: false,\n capture: true,\n }),\n addEvent(document, 'focus', onFocus, true),\n addEvent(window, 'scroll', onWindowScroll)\n );\n\n return () => {\n // Restore styles and scroll the page back to where it was.\n restoreStyles();\n removeEvents();\n window.scrollTo(scrollX, scrollY);\n };\n}\n\n// Sets a CSS property on an element, and returns a function to revert it to the previous value.\nfunction setStyle(element: any, style: string, value: string) {\n const cur = element.style[style];\n element.style[style] = value;\n\n return () => {\n element.style[style] = cur;\n };\n}\n\n// Adds an event listener to an element, and returns a function to remove it.\nfunction addEvent<K extends keyof GlobalEventHandlersEventMap>(\n target: EventTarget,\n event: K,\n handler: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any,\n options?: boolean | AddEventListenerOptions\n) {\n target.addEventListener(event, handler as any, options);\n return () => {\n target.removeEventListener(event, handler as any, options);\n };\n}\n\nfunction scrollIntoView(target: Element) {\n const root = document.scrollingElement || document.documentElement;\n while (target && target !== root) {\n // Find the parent scrollable element and adjust the scroll position if the target is not already in view.\n const scrollable = getScrollParent(target);\n if (\n scrollable !== document.documentElement &&\n scrollable !== document.body &&\n scrollable !== target\n ) {\n const scrollableTop = scrollable.getBoundingClientRect().top;\n const targetTop = target.getBoundingClientRect().top;\n if (targetTop > scrollableTop + target.clientHeight) {\n scrollable.scrollTop += targetTop - scrollableTop;\n }\n }\n\n target = scrollable.parentElement as any;\n }\n}\n\nfunction willOpenKeyboard(target: Element) {\n return (\n (target instanceof HTMLInputElement &&\n !nonTextInputTypes.has(target.type)) ||\n target instanceof HTMLTextAreaElement ||\n (target instanceof HTMLElement && target.isContentEditable)\n );\n}\n","import { type Properties } from 'csstype';\n\nconst styles: Record<string, Properties> = {\n wrapper: {\n position: 'fixed',\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n overflow: 'hidden',\n pointerEvents: 'none',\n },\n backdrop: {\n zIndex: 1,\n position: 'fixed',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n backgroundColor: 'rgba(0, 0, 0, 0.2)',\n touchAction: 'none', // Disable iOS body scrolling\n border: 'none',\n },\n container: {\n zIndex: 2,\n position: 'absolute',\n left: 0,\n bottom: 0,\n width: '100%',\n backgroundColor: '#fff',\n borderTopRightRadius: '8px',\n borderTopLeftRadius: '8px',\n boxShadow: '0px -2px 16px rgba(0, 0, 0, 0.3)',\n display: 'flex',\n flexDirection: 'column',\n pointerEvents: 'auto',\n },\n headerWrapper: {\n width: '100%',\n },\n header: {\n height: '40px',\n width: '100%',\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n indicator: {\n width: '18px',\n height: '4px',\n borderRadius: '99px',\n backgroundColor: '#ddd',\n },\n content: {\n flexGrow: 1,\n display: 'flex',\n flexDirection: 'column',\n minHeight: '0px',\n position: 'relative',\n },\n scroller: {\n height: '100%',\n overflowY: 'auto',\n },\n};\n\nexport default styles;\n","import React, { forwardRef } from 'react';\nimport { motion } from 'framer-motion';\n\nimport { type SheetContainerProps } from './types';\nimport { useSheetContext } from './context';\nimport { useEventCallbacks } from './hooks';\nimport { MAX_HEIGHT } from './constants';\nimport { mergeRefs } from './utils';\nimport styles from './styles';\n\nconst SheetContainer = forwardRef<any, SheetContainerProps>(\n ({ children, style = {}, className = '', ...rest }, ref) => {\n const {\n y,\n isOpen,\n callbacks,\n snapPoints,\n initialSnap = 0,\n sheetRef,\n windowHeight,\n detent,\n animationOptions,\n reduceMotion,\n } = useSheetContext();\n\n const { handleAnimationComplete } = useEventCallbacks(isOpen, callbacks);\n const initialY = snapPoints ? snapPoints[0] - snapPoints[initialSnap] : 0;\n const maxSnapHeight = snapPoints ? snapPoints[0] : null;\n\n const height =\n maxSnapHeight !== null\n ? `min(${maxSnapHeight}px, ${MAX_HEIGHT})`\n : MAX_HEIGHT;\n\n return (\n <motion.div\n {...rest}\n ref={mergeRefs([sheetRef, ref])}\n className={`react-modal-sheet-container ${className}`}\n style={{\n ...styles.container,\n ...style,\n ...(detent === 'full-height' && { height }),\n ...(detent === 'content-height' && { maxHeight: height }),\n y,\n }}\n initial={reduceMotion ? false : { y: windowHeight }}\n animate={{ y: initialY, transition: animationOptions }}\n exit={{ y: windowHeight, transition: animationOptions }}\n onAnimationComplete={handleAnimationComplete}\n >\n {children}\n </motion.div>\n );\n }\n);\n\nSheetContainer.displayName = 'SheetContainer';\n\nexport default SheetContainer;\n","import React, { forwardRef } from 'react';\nimport { motion } from 'framer-motion';\n\nimport { type SheetDraggableProps } from './types';\nimport { useSheetScrollerContext, useSheetContext } from './context';\nimport { useDragConstraints } from './hooks';\nimport { mergeRefs } from './utils';\nimport styles from './styles';\n\nconst SheetContent = forwardRef<any, SheetDraggableProps>(\n ({ children, style, disableDrag, className = '', ...rest }, ref) => {\n const sheetContext = useSheetContext();\n const sheetScrollerContext = useSheetScrollerContext();\n const { constraintsRef, onMeasureDragConstraints } = useDragConstraints();\n\n const dragProps =\n disableDrag || sheetScrollerContext.disableDrag\n ? undefined\n : sheetContext.dragProps;\n\n return (\n <motion.div\n {...rest}\n ref={mergeRefs([ref, constraintsRef])}\n className={`react-modal-sheet-content ${className}`}\n style={{ ...styles.content, ...style }}\n {...dragProps}\n dragConstraints={constraintsRef}\n onMeasureDragConstraints={onMeasureDragConstraints}\n >\n {children}\n </motion.div>\n );\n }\n);\n\nSheetContent.displayName = 'SheetContent';\n\nexport default SheetContent;\n","import React, { forwardRef } from 'react';\nimport { motion, useTransform } from 'framer-motion';\n\nimport { type SheetDraggableProps } from './types';\nimport { useSheetContext } from './context';\nimport { useDragConstraints } from './hooks';\nimport { mergeRefs } from './utils';\nimport styles from './styles';\n\nconst SheetHeader = forwardRef<any, SheetDraggableProps>(\n ({ children, style, disableDrag, ...rest }, ref) => {\n const { indicatorRotation, dragProps } = useSheetContext();\n const { constraintsRef, onMeasureDragConstraints } = useDragConstraints();\n const _dragProps = disableDrag ? undefined : dragProps;\n\n const indicator1Transform = useTransform(\n indicatorRotation,\n (r) => `translateX(2px) rotate(${r}deg)`\n );\n\n const indicator2Transform = useTransform(\n indicatorRotation,\n (r) => `translateX(-2px) rotate(${-1 * r}deg)`\n );\n\n return (\n <motion.div\n {...rest}\n ref={mergeRefs([ref, constraintsRef])}\n style={{ ...styles.headerWrapper, ...style }}\n {..._dragProps}\n dragConstraints={constraintsRef}\n onMeasureDragConstraints={onMeasureDragConstraints}\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\nSheetHeader.displayName = 'SheetHeader';\n\nexport default SheetHeader;\n","import React, { forwardRef } from 'react';\nimport { motion } from 'framer-motion';\n\nimport { type SheetBackdropProps } from './types';\nimport styles from './styles';\n\nconst isClickable = (props: any) => !!props.onClick || !!props.onTap;\n\nconst SheetBackdrop = forwardRef<any, SheetBackdropProps>(\n ({ style = {}, className = '', ...rest }, ref) => {\n const Comp = isClickable(rest) ? motion.button : motion.div;\n const pointerEvents = isClickable(rest) ? 'auto' : 'none';\n\n return (\n <Comp\n {...rest}\n ref={ref}\n className={`react-modal-sheet-backdrop ${className}`}\n style={{ ...styles.backdrop, ...style, pointerEvents }}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n />\n );\n }\n);\n\nSheetBackdrop.displayName = 'SheetBackdrop';\n\nexport default SheetBackdrop;\n","import React, { type TouchEvent, type UIEvent, forwardRef } from 'react';\n\nimport { useSheetScrollerContext } from './context';\nimport { type SheetScrollerProps } from './types';\nimport { isTouchDevice } from './utils';\nimport styles from './styles';\n\nconst SheetScroller = forwardRef<any, SheetScrollerProps>(\n ({ draggableAt = 'top', children, style, className = '', ...rest }, ref) => {\n const sheetScrollerContext = useSheetScrollerContext();\n\n function determineDragState(element: HTMLDivElement) {\n const { scrollTop, scrollHeight, clientHeight } = element;\n const isScrollable = scrollHeight > clientHeight;\n\n if (!isScrollable) return;\n\n const isAtTop = scrollTop <= 0;\n const isAtBottom = scrollHeight - scrollTop === clientHeight;\n\n const shouldEnable =\n (draggableAt === 'top' && isAtTop) ||\n (draggableAt === 'bottom' && isAtBottom) ||\n (draggableAt === 'both' && (isAtTop || isAtBottom));\n\n if (shouldEnable) {\n sheetScrollerContext.setDragEnabled();\n } else {\n sheetScrollerContext.setDragDisabled();\n }\n }\n\n function onScroll(e: UIEvent<HTMLDivElement>) {\n determineDragState(e.currentTarget);\n }\n\n function onTouchStart(e: TouchEvent<HTMLDivElement>) {\n determineDragState(e.currentTarget);\n }\n\n const scrollProps = isTouchDevice()\n ? { onScroll, onTouchStart }\n : undefined;\n\n return (\n <div\n {...rest}\n ref={ref}\n className={`react-modal-sheet-scroller ${className}`}\n style={{ ...styles.scroller, ...style }}\n {...scrollProps}\n >\n {children}\n </div>\n );\n }\n);\n\nSheetScroller.displayName = 'SheetScroller';\n\nexport default SheetScroller;\n","import { type MotionValue } from 'framer-motion';\n\nimport _Sheet from './sheet';\nimport SheetContainer from './SheetContainer';\nimport SheetContent from './SheetContent';\nimport SheetHeader from './SheetHeader';\nimport SheetBackdrop from './SheetBackdrop';\nimport SheetScroller from './SheetScroller';\nimport { type SheetCompound } from './types';\n\nexport interface SheetRef {\n y: MotionValue<number>;\n snapTo: (index: number) => void;\n}\n\n// HACK: this is needed to get the typing to work properly...\nconst _SheetCompound: any = _Sheet;\n_SheetCompound.Container = SheetContainer;\n_SheetCompound.Header = SheetHeader;\n_SheetCompound.Content = SheetContent;\n_SheetCompound.Backdrop = SheetBackdrop;\n_SheetCompound.Scroller = SheetScroller;\n\nexport const Sheet = _SheetCompound as SheetCompound;\n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -144,13 +144,16 @@ function useEventCallbacks(isOpen, callbacks) {
|
|
|
144
144
|
function useDimensions() {
|
|
145
145
|
const [dimensions, setDimensions] = useState({ height: 0, width: 0 });
|
|
146
146
|
useIsomorphicLayoutEffect(() => {
|
|
147
|
-
|
|
148
|
-
setDimensions({
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
147
|
+
function handler() {
|
|
148
|
+
setDimensions({
|
|
149
|
+
height: window.innerHeight,
|
|
150
|
+
width: window.innerWidth
|
|
151
|
+
});
|
|
152
|
+
}
|
|
153
|
+
handler();
|
|
154
|
+
window.addEventListener("resize", handler);
|
|
152
155
|
return () => {
|
|
153
|
-
window.removeEventListener("resize",
|
|
156
|
+
window.removeEventListener("resize", handler);
|
|
154
157
|
};
|
|
155
158
|
}, []);
|
|
156
159
|
return dimensions;
|
|
@@ -162,7 +165,7 @@ function usePrevious(state) {
|
|
|
162
165
|
});
|
|
163
166
|
return ref.current;
|
|
164
167
|
}
|
|
165
|
-
function
|
|
168
|
+
function useEffectEvent(handler) {
|
|
166
169
|
const handlerRef = useRef();
|
|
167
170
|
useIsomorphicLayoutEffect(() => {
|
|
168
171
|
handlerRef.current = handler;
|
|
@@ -485,7 +488,6 @@ var Sheet = forwardRef(
|
|
|
485
488
|
...rest
|
|
486
489
|
}, ref) => {
|
|
487
490
|
const sheetRef = useRef(null);
|
|
488
|
-
const constraintsRef = useRef(null);
|
|
489
491
|
const indicatorRotation = useMotionValue(0);
|
|
490
492
|
const { height: windowHeight } = useDimensions();
|
|
491
493
|
const shouldReduceMotion = useReducedMotion();
|
|
@@ -497,11 +499,11 @@ var Sheet = forwardRef(
|
|
|
497
499
|
const y = useMotionValue(0);
|
|
498
500
|
const zIndex = useTransform(
|
|
499
501
|
y,
|
|
500
|
-
(value) => value >= windowHeight ? -1 : 9999999
|
|
502
|
+
(value) => value + 2 >= windowHeight ? -1 : 9999999
|
|
501
503
|
);
|
|
502
504
|
const visibility = useTransform(
|
|
503
505
|
y,
|
|
504
|
-
(value) => value >= windowHeight ? "hidden" : "visible"
|
|
506
|
+
(value) => value + 2 >= windowHeight ? "hidden" : "visible"
|
|
505
507
|
);
|
|
506
508
|
const callbacks = useRef({
|
|
507
509
|
onOpenStart,
|
|
@@ -530,7 +532,7 @@ var Sheet = forwardRef(
|
|
|
530
532
|
)}]`
|
|
531
533
|
);
|
|
532
534
|
}
|
|
533
|
-
const onDrag =
|
|
535
|
+
const onDrag = useEffectEvent((_, { delta }) => {
|
|
534
536
|
const velocity = y.getVelocity();
|
|
535
537
|
if (velocity > 0)
|
|
536
538
|
indicatorRotation.set(10);
|
|
@@ -538,12 +540,20 @@ var Sheet = forwardRef(
|
|
|
538
540
|
indicatorRotation.set(-10);
|
|
539
541
|
y.set(Math.max(y.get() + delta.y, 0));
|
|
540
542
|
});
|
|
541
|
-
const
|
|
543
|
+
const onDragStart = useEffectEvent(() => {
|
|
544
|
+
const focusedElement = document.activeElement;
|
|
545
|
+
if (!focusedElement || !sheetRef.current)
|
|
546
|
+
return;
|
|
547
|
+
const isInput = focusedElement.tagName === "INPUT" || focusedElement.tagName === "TEXTAREA";
|
|
548
|
+
if (isInput && sheetRef.current.contains(focusedElement)) {
|
|
549
|
+
focusedElement.blur();
|
|
550
|
+
}
|
|
551
|
+
});
|
|
552
|
+
const onDragEnd = useEffectEvent((_, { velocity }) => {
|
|
542
553
|
if (velocity.y > DRAG_VELOCITY_THRESHOLD) {
|
|
543
554
|
onClose();
|
|
544
555
|
} else {
|
|
545
|
-
const
|
|
546
|
-
const sheetHeight = sheetEl.getBoundingClientRect().height;
|
|
556
|
+
const sheetHeight = sheetRef.current.getBoundingClientRect().height;
|
|
547
557
|
const currentY = y.get();
|
|
548
558
|
let snapTo = 0;
|
|
549
559
|
if (snapPoints) {
|
|
@@ -565,7 +575,7 @@ var Sheet = forwardRef(
|
|
|
565
575
|
onSnap(snapIndex);
|
|
566
576
|
}
|
|
567
577
|
const roundedSheetHeight = Math.round(sheetHeight);
|
|
568
|
-
const shouldClose = snapTo >= roundedSheetHeight;
|
|
578
|
+
const shouldClose = snapTo + 2 >= roundedSheetHeight;
|
|
569
579
|
if (shouldClose)
|
|
570
580
|
onClose();
|
|
571
581
|
}
|
|
@@ -581,7 +591,7 @@ var Sheet = forwardRef(
|
|
|
581
591
|
y,
|
|
582
592
|
snapTo: (snapIndex) => {
|
|
583
593
|
const sheetEl = sheetRef.current;
|
|
584
|
-
if ((snapPoints == null ? void 0 : snapPoints[snapIndex]) !== void 0 && sheetEl
|
|
594
|
+
if ((snapPoints == null ? void 0 : snapPoints[snapIndex]) !== void 0 && sheetEl) {
|
|
585
595
|
const sheetHeight = sheetEl.getBoundingClientRect().height;
|
|
586
596
|
const snapPoint = snapPoints[snapIndex];
|
|
587
597
|
const snapTo = validateSnapTo({
|
|
@@ -605,6 +615,7 @@ var Sheet = forwardRef(
|
|
|
605
615
|
dragMomentum: false,
|
|
606
616
|
dragPropagation: false,
|
|
607
617
|
onDrag,
|
|
618
|
+
onDragStart,
|
|
608
619
|
onDragEnd
|
|
609
620
|
};
|
|
610
621
|
return disableDrag ? void 0 : dragProps2;
|
|
@@ -628,7 +639,7 @@ var Sheet = forwardRef(
|
|
|
628
639
|
motion.div,
|
|
629
640
|
{
|
|
630
641
|
...rest,
|
|
631
|
-
ref
|
|
642
|
+
ref,
|
|
632
643
|
style: { ...styles_default.wrapper, zIndex, visibility, ...style }
|
|
633
644
|
},
|
|
634
645
|
/* @__PURE__ */ React2.createElement(AnimatePresence, null, isOpen ? /* @__PURE__ */ React2.createElement(SheetScrollerContextProvider, null, Children.map(
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/sheet.tsx","../src/hooks.tsx","../src/constants.ts","../src/utils.ts","../src/context.tsx","../src/use-prevent-scroll.ts","../src/styles.ts","../src/SheetContainer.tsx","../src/SheetContent.tsx","../src/SheetHeader.tsx","../src/SheetBackdrop.tsx","../src/SheetScroller.tsx","../src/index.tsx"],"names":["React","useEffect","useRef","useState","useLayoutEffect","dragProps","forwardRef","motion","useTransform","Sheet"],"mappings":"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","sourcesContent":["import React, {\n Children,\n cloneElement,\n forwardRef,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport {\n animate,\n AnimatePresence,\n motion,\n type PanInfo,\n type Transition,\n useMotionValue,\n useReducedMotion,\n useTransform,\n} from 'framer-motion';\n\nimport {\n useModalEffect,\n useDimensions,\n useIsomorphicLayoutEffect,\n useEvent,\n} from './hooks';\n\nimport {\n REDUCED_MOTION_TWEEN_CONFIG,\n DEFAULT_TWEEN_CONFIG,\n DRAG_CLOSE_THRESHOLD,\n DRAG_VELOCITY_THRESHOLD,\n IS_SSR,\n} from './constants';\n\nimport { type SheetContextType, type SheetProps } from './types';\nimport { SheetScrollerContextProvider, SheetContext } from './context';\nimport {\n getClosest,\n inDescendingOrder,\n mergeRefs,\n validateSnapTo,\n} from './utils';\nimport { usePreventScroll } from './use-prevent-scroll';\nimport styles from './styles';\n\nconst Sheet = forwardRef<any, SheetProps>(\n (\n {\n onOpenStart,\n onOpenEnd,\n onClose,\n onCloseStart,\n onCloseEnd,\n onSnap,\n children,\n disableScrollLocking = false,\n isOpen,\n snapPoints,\n rootId,\n mountPoint,\n style,\n detent = 'full-height',\n initialSnap = 0,\n disableDrag = false,\n prefersReducedMotion = false,\n tweenConfig = DEFAULT_TWEEN_CONFIG,\n ...rest\n },\n ref\n ) => {\n const sheetRef = useRef<any>(null);\n const constraintsRef = useRef<any>(null);\n const indicatorRotation = useMotionValue(0);\n const { height: windowHeight } = useDimensions();\n const shouldReduceMotion = useReducedMotion();\n const reduceMotion = Boolean(prefersReducedMotion || shouldReduceMotion);\n const animationOptions: Transition = {\n type: 'tween',\n ...(reduceMotion ? REDUCED_MOTION_TWEEN_CONFIG : tweenConfig),\n };\n\n // NOTE: the inital value for `y` doesn't matter since it is overwritten by\n // the value driven by the `AnimatePresence` component when the sheet is opened\n // and after that it is driven by the gestures and/or snapping\n const y = useMotionValue(0);\n\n const zIndex = useTransform(y, (value) =>\n value >= windowHeight ? -1 : 9999999\n );\n\n const visibility = useTransform(y, (value) =>\n value >= windowHeight ? 'hidden' : 'visible'\n );\n\n // Keep the callback fns up-to-date so that they can be accessed inside\n // the effect without including them to the dependencies array\n const callbacks = useRef({\n onOpenStart,\n onOpenEnd,\n onCloseStart,\n onCloseEnd,\n });\n\n useIsomorphicLayoutEffect(() => {\n callbacks.current = {\n onOpenStart,\n onOpenEnd,\n onCloseStart,\n onCloseEnd,\n };\n });\n\n if (snapPoints) {\n // Convert negative / percentage snap points to absolute values\n snapPoints = snapPoints.map((point) => {\n // Percentage values e.g. between 0.0 and 1.0\n if (point > 0 && point <= 1) return Math.round(point * windowHeight);\n return point < 0 ? windowHeight + point : point; // negative values\n });\n\n console.assert(\n inDescendingOrder(snapPoints) || windowHeight === 0,\n `Snap points need to be in descending order got: [${snapPoints.join(\n ', '\n )}]`\n );\n }\n\n const onDrag = useEvent((_, { delta }: PanInfo) => {\n // Update drag indicator rotation based on drag velocity\n const velocity = y.getVelocity();\n\n if (velocity > 0) indicatorRotation.set(10);\n if (velocity < 0) indicatorRotation.set(-10);\n\n // Make sure user cannot drag beyond the top of the sheet\n y.set(Math.max(y.get() + delta.y, 0));\n });\n\n const onDragEnd = useEvent((_, { velocity }: PanInfo) => {\n if (velocity.y > DRAG_VELOCITY_THRESHOLD) {\n // User flicked the sheet down\n onClose();\n } else {\n const sheetEl = sheetRef.current as HTMLDivElement;\n const sheetHeight = sheetEl.getBoundingClientRect().height;\n const currentY = y.get();\n\n let snapTo = 0;\n\n if (snapPoints) {\n const snapToValues = snapPoints.map(\n (p) => sheetHeight - Math.min(p, sheetHeight)\n );\n\n // Allow snapping to the top of the sheet if detent is set to `content-height`\n if (detent === 'content-height' && !snapToValues.includes(0)) {\n snapToValues.unshift(0);\n }\n\n // Get the closest snap point\n snapTo = getClosest(snapToValues, currentY);\n } else if (currentY / sheetHeight > DRAG_CLOSE_THRESHOLD) {\n // Close if dragged over enough far\n snapTo = sheetHeight;\n }\n\n snapTo = validateSnapTo({ snapTo, sheetHeight });\n\n // Update the spring value so that the sheet is animated to the snap point\n void animate(y, snapTo, animationOptions);\n\n if (snapPoints && onSnap) {\n const snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));\n const snapIndex = snapPoints.indexOf(getClosest(snapPoints, snapValue)); // prettier-ignore\n onSnap(snapIndex);\n }\n\n const roundedSheetHeight = Math.round(sheetHeight);\n const shouldClose = snapTo >= roundedSheetHeight;\n\n if (shouldClose) onClose();\n }\n\n // Reset indicator rotation after dragging\n indicatorRotation.set(0);\n });\n\n // Trigger onSnap callback when sheet is opened or closed\n useEffect(() => {\n if (!snapPoints || !onSnap) return;\n const snapIndex = isOpen ? initialSnap : snapPoints.length - 1;\n onSnap(snapIndex);\n }, [isOpen]); // eslint-disable-line\n\n useImperativeHandle(ref, () => ({\n y,\n snapTo: (snapIndex: number) => {\n const sheetEl = sheetRef.current as HTMLDivElement | null;\n\n if (snapPoints?.[snapIndex] !== undefined && sheetEl !== null) {\n const sheetHeight = sheetEl.getBoundingClientRect().height;\n const snapPoint = snapPoints[snapIndex];\n const snapTo = validateSnapTo({\n snapTo: sheetHeight - snapPoint,\n sheetHeight,\n });\n\n void animate(y, snapTo, animationOptions);\n if (onSnap) onSnap(snapIndex);\n if (snapTo >= sheetHeight) onClose();\n }\n },\n }));\n\n useModalEffect(isOpen, rootId);\n\n // Framer Motion should handle body scroll locking but it's not working\n // properly on iOS. Scroll locking from React Aria seems to work much better.\n usePreventScroll({ isDisabled: disableScrollLocking || !isOpen });\n\n const dragProps = useMemo(() => {\n const dragProps: SheetContextType['dragProps'] = {\n drag: 'y',\n dragElastic: 0,\n dragMomentum: false,\n dragPropagation: false,\n onDrag,\n onDragEnd,\n };\n\n return disableDrag ? undefined : dragProps;\n }, [disableDrag, windowHeight]); // eslint-disable-line\n\n const context: SheetContextType = {\n y,\n sheetRef,\n isOpen,\n initialSnap,\n snapPoints,\n detent,\n indicatorRotation,\n callbacks,\n dragProps,\n windowHeight,\n animationOptions,\n reduceMotion,\n disableDrag,\n };\n\n const sheet = (\n <SheetContext.Provider value={context}>\n <motion.div\n {...rest}\n ref={mergeRefs([ref, constraintsRef])}\n style={{ ...styles.wrapper, zIndex, visibility, ...style }}\n >\n <AnimatePresence>\n {/* NOTE: AnimatePresence requires us to set keys to children */}\n {isOpen ? (\n <SheetScrollerContextProvider>\n {Children.map(children, (child: any, i) =>\n cloneElement(child, { key: `sheet-child-${i}` })\n )}\n </SheetScrollerContextProvider>\n ) : null}\n </AnimatePresence>\n </motion.div>\n </SheetContext.Provider>\n );\n\n if (IS_SSR) return sheet;\n\n return createPortal(sheet, mountPoint ?? document.body);\n }\n);\n\nSheet.displayName = 'Sheet';\n\nexport default Sheet;\n","import {\n type MutableRefObject,\n useCallback,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { type BoundingBox } from 'framer-motion';\n\nimport { IS_SSR } from './constants';\nimport { type SheetEvents } from './types';\nimport { applyRootStyles, cleanupRootStyles } from './utils';\n\nexport const useIsomorphicLayoutEffect = IS_SSR ? useEffect : useLayoutEffect;\n\nexport function useModalEffect(isOpen: boolean, rootId?: string) {\n const prevOpen = usePrevious(isOpen);\n\n // Automatically apply the iOS modal effect to the body when sheet opens/closes\n 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 useEffect(() => {\n return () => {\n if (rootId && isOpen) cleanupRootStyles(rootId);\n };\n }, [isOpen]); // eslint-disable-line\n}\n\nexport function useEventCallbacks(\n isOpen: boolean,\n callbacks: MutableRefObject<SheetEvents>\n) {\n const prevOpen = usePrevious(isOpen);\n const didOpen = 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 = 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 useEffect(() => {\n if (!prevOpen && isOpen) {\n callbacks.current.onOpenStart?.();\n } else if (!isOpen && prevOpen) {\n callbacks.current.onCloseStart?.();\n }\n }, [isOpen, prevOpen]); // eslint-disable-line\n\n return { handleAnimationComplete };\n}\n\nexport function useDimensions() {\n const [dimensions, setDimensions] = useState({ height: 0, width: 0 });\n\n useIsomorphicLayoutEffect(() => {\n const updateHeight = () =>\n { setDimensions({ height: window.innerHeight, width: window.innerWidth }); };\n window.addEventListener('resize', updateHeight);\n updateHeight();\n return () => { window.removeEventListener('resize', updateHeight); };\n }, []);\n\n return dimensions;\n}\n\nexport function usePrevious<T>(state: T): T | undefined {\n const ref = useRef<T>();\n\n useEffect(() => {\n ref.current = state;\n });\n\n return ref.current;\n}\n\n// Userland version of the `useEvent` React hook:\n// RFC: https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md\nexport function useEvent<T extends (...args: any[]) => any>(handler: T) {\n const handlerRef = useRef<T>();\n\n useIsomorphicLayoutEffect(() => {\n handlerRef.current = handler;\n });\n\n return useCallback((...args: any[]) => {\n const fn = handlerRef.current;\n return fn?.(...args);\n }, []) as T;\n}\n\n// This is a hacky way to fix a bug in framer-motion where the drag\n// constraints are not updated when window is resized.\n// https://github.com/framer/motion/issues/1659\nconst constraints: BoundingBox = { bottom: 0, top: 0, left: 0, right: 0 };\n\nexport function useDragConstraints() {\n const constraintsRef = useRef<any>(null);\n const onMeasureDragConstraints = useCallback(() => constraints, []);\n return { constraintsRef, onMeasureDragConstraints };\n}\n","export const MAX_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';\n\nexport const IS_SSR = typeof window === 'undefined';\n\nexport const DEFAULT_TWEEN_CONFIG = {\n ease: 'easeOut',\n duration: 0.2,\n};\n\nexport const REDUCED_MOTION_TWEEN_CONFIG = {\n ease: 'linear',\n duration: 0.01,\n};\n\nexport const DRAG_CLOSE_THRESHOLD = 0.6;\n\nexport const DRAG_VELOCITY_THRESHOLD = 500;\n","import { type ForwardedRef, type RefCallback } from 'react';\n\nexport function getClosest(nums: number[], goal: number) {\n let closest = nums[0];\n let minDifference = Math.abs(nums[0] - goal);\n\n for (let i = 1; i < nums.length; i++) {\n const difference = Math.abs(nums[i] - goal);\n if (difference < minDifference) {\n closest = nums[i];\n minDifference = difference;\n }\n }\n\n return closest;\n}\n\nexport function applyRootStyles(rootId: string) {\n const body = document.querySelector('body') as HTMLBodyElement;\n const root = document.querySelector(`#${rootId}`) as HTMLDivElement;\n\n if (root) {\n const p = 24;\n const h = window.innerHeight;\n const s = (h - p) / h;\n body.style.backgroundColor = '#000';\n root.style.overflow = 'hidden';\n root.style.willChange = 'transform';\n root.style.transition =\n 'transform 200ms ease-in-out, border-radius 200ms linear';\n root.style.transform = `translateY(calc(env(safe-area-inset-top) + ${p / 2}px)) scale(${s})`; // prettier-ignore\n root.style.borderTopRightRadius = '10px';\n root.style.borderTopLeftRadius = '10px';\n }\n}\n\nexport function cleanupRootStyles(rootId: string) {\n const body = document.querySelector('body') as HTMLBodyElement;\n const root = document.getElementById(rootId) as HTMLDivElement;\n\n function onTransitionEnd() {\n root.style.removeProperty('overflow');\n root.style.removeProperty('will-change');\n root.style.removeProperty('transition');\n body.style.removeProperty('background-color');\n root.removeEventListener('transitionend', onTransitionEnd);\n }\n\n if (root) {\n // Start animating back\n root.style.removeProperty('border-top-right-radius');\n root.style.removeProperty('border-top-left-radius');\n root.style.removeProperty('transform');\n\n // Remove temp properties after animation is finished\n root.addEventListener('transitionend', onTransitionEnd);\n }\n}\n\nexport function inDescendingOrder(arr: number[]) {\n for (let i = 0; i < arr.length; i++) {\n if (arr[i + 1] > arr[i]) return false;\n }\n\n return true;\n}\n\nexport function validateSnapTo({\n snapTo,\n sheetHeight,\n}: {\n snapTo: number;\n sheetHeight: number;\n}) {\n if (snapTo < 0) {\n console.warn(\n `Snap point is out of bounds. Sheet height is ${sheetHeight} but snap point is ${sheetHeight +\n Math.abs(snapTo)}.`\n );\n }\n\n return Math.max(Math.round(snapTo), 0);\n}\n\nexport function mergeRefs<T = any>(refs: Array<ForwardedRef<T>>): RefCallback<T> {\n return (value: any) => {\n refs.forEach((ref: any) => {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref) {\n ref.current = value;\n }\n });\n };\n}\n\nexport function isTouchDevice() {\n if (typeof window === 'undefined') return false;\n return 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n}\n","import React, { type ReactNode, createContext, useContext, useState } from 'react';\nimport { type SheetScrollerContextType, type SheetContextType } from './types';\n\nexport const SheetContext = createContext<SheetContextType | undefined>(\n undefined\n);\n\nexport const useSheetContext = () => {\n const context = useContext(SheetContext);\n if (!context) throw Error('Sheet context error');\n return context;\n};\n\nexport const SheetScrollerContext = createContext<\n SheetScrollerContextType | undefined\n>(undefined);\n\nexport function SheetScrollerContextProvider({\n children,\n}: {\n children: ReactNode;\n}) {\n const sheetContext = useSheetContext();\n const [disableDrag, setDisableDrag] = useState(!!sheetContext.disableDrag);\n\n function setDragEnabled() {\n if (!sheetContext.disableDrag) setDisableDrag(false);\n }\n\n function setDragDisabled() {\n if (!disableDrag) setDisableDrag(true);\n }\n\n return (\n <SheetScrollerContext.Provider\n value={{ disableDrag, setDragEnabled, setDragDisabled }}\n >\n {children}\n </SheetScrollerContext.Provider>\n );\n}\n\nexport const useSheetScrollerContext = () => {\n const context = useContext(SheetScrollerContext);\n if (!context) throw Error('Sheet scroller context error');\n return context;\n};\n","// Source: https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/overlays/src/usePreventScroll.ts\nimport {\n chain,\n getScrollParent,\n isIOS,\n useLayoutEffect,\n} from '@react-aria/utils';\n\ninterface PreventScrollOptions {\n /** Whether the scroll lock is disabled. */\n isDisabled?: boolean;\n}\n\nconst visualViewport =\n typeof window !== 'undefined' ? (window as any).visualViewport : undefined;\n\n// HTML input types that do not cause the software keyboard to appear.\nconst nonTextInputTypes = new Set([\n 'checkbox',\n 'radio',\n 'range',\n 'color',\n 'file',\n 'image',\n 'button',\n 'submit',\n 'reset',\n]);\n\n// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position\nlet preventScrollCount = 0;\nlet restore: any;\n\n/**\n * Prevents scrolling on the document body on mount, and\n * restores it on unmount. Also ensures that content does not\n * shift due to the scrollbars disappearing.\n */\nexport function usePreventScroll(options: PreventScrollOptions = {}) {\n const { isDisabled } = options;\n\n useLayoutEffect(() => {\n if (isDisabled) {\n return;\n }\n\n preventScrollCount++;\n if (preventScrollCount === 1) {\n if (isIOS()) {\n restore = preventScrollMobileSafari();\n } else {\n restore = preventScrollStandard();\n }\n }\n\n return () => {\n preventScrollCount--;\n if (preventScrollCount === 0) {\n restore();\n }\n };\n }, [isDisabled]);\n}\n\n// For most browsers, all we need to do is set `overflow: hidden` on the root element, and\n// add some padding to prevent the page from shifting when the scrollbar is hidden.\nfunction preventScrollStandard() {\n return chain(\n setStyle(\n document.documentElement,\n 'paddingRight',\n `${window.innerWidth - document.documentElement.clientWidth}px`\n ),\n setStyle(document.documentElement, 'overflow', 'hidden')\n );\n}\n\n// Mobile Safari is a whole different beast. Even with overflow: hidden,\n// it still scrolls the page in many situations:\n//\n// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.\n// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of\n// it, so it becomes scrollable.\n// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.\n// This may cause even fixed position elements to scroll off the screen.\n// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always\n// scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.\n//\n// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:\n//\n// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling\n// on the window.\n// 2. Prevent default on `touchmove` events inside a scrollable element when the scroll position is at the\n// top or bottom. This avoids the whole page scrolling instead, but does prevent overscrolling.\n// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.\n// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top\n// of the page, which prevents it from scrolling the page. After the input is focused, scroll the element\n// into view ourselves, without scrolling the whole page.\n// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the\n// same visually, but makes the actual scroll position always zero. This is required to make all of the\n// above work or Safari will still try to scroll the page when focusing an input.\n// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting\n// to navigate to an input with the next/previous buttons that's outside a modal.\nfunction preventScrollMobileSafari() {\n let scrollable: Element | undefined;\n let lastY = 0;\n\n const onTouchStart = (e: TouchEvent) => {\n // Store the nearest scrollable parent element from the element that the user touched.\n scrollable = getScrollParent(e.target as Element);\n if (\n scrollable === document.documentElement &&\n scrollable === document.body\n ) {\n return;\n }\n\n lastY = e.changedTouches[0].pageY;\n };\n\n const onTouchMove = (e: TouchEvent) => {\n // In special situations, `onTouchStart` may be called without `onTouchStart` being called.\n // (e.g. when the user places a finger on the screen before the <Sheet> is mounted and then moves the finger after it is mounted).\n // If `onTouchStart` is not called, `scrollable` is `undefined`. Therefore, such cases are ignored.\n if (scrollable === undefined) {\n return;\n }\n\n // Prevent scrolling the window.\n if (\n scrollable === document.documentElement ||\n scrollable === document.body\n ) {\n e.preventDefault();\n return;\n }\n\n // Prevent scrolling up when at the top and scrolling down when at the bottom\n // of a nested scrollable area, otherwise mobile Safari will start scrolling\n // the window instead. Unfortunately, this disables bounce scrolling when at\n // the top but it's the best we can do.\n const y = e.changedTouches[0].pageY;\n const scrollTop = scrollable.scrollTop;\n const bottom = scrollable.scrollHeight - scrollable.clientHeight;\n\n // Fix for: https://github.com/adobe/react-spectrum/pull/3780/files\n if (bottom === 0) {\n return;\n }\n\n if ((scrollTop <= 0 && y > lastY) || (scrollTop >= bottom && y < lastY)) {\n e.preventDefault();\n }\n\n lastY = y;\n };\n\n const onTouchEnd = (e: TouchEvent) => {\n const target = e.target as HTMLElement;\n\n // Apply this change if we're not already focused on the target element\n if (willOpenKeyboard(target) && target !== document.activeElement) {\n e.preventDefault();\n\n // Apply a transform to trick Safari into thinking the input is at the top of the page\n // so it doesn't try to scroll it into view. When tapping on an input, this needs to\n // be done before the \"focus\" event, so we have to focus the element ourselves.\n target.style.transform = 'translateY(-2000px)';\n target.focus();\n requestAnimationFrame(() => {\n target.style.transform = '';\n });\n }\n };\n\n const onFocus = (e: FocusEvent) => {\n const target = e.target as HTMLElement;\n if (willOpenKeyboard(target)) {\n // Transform also needs to be applied in the focus event in cases where focus moves\n // other than tapping on an input directly, e.g. the next/previous buttons in the\n // software keyboard. In these cases, it seems applying the transform in the focus event\n // is good enough, whereas when tapping an input, it must be done before the focus event. đ¤ˇââī¸\n target.style.transform = 'translateY(-2000px)';\n requestAnimationFrame(() => {\n target.style.transform = '';\n\n // This will have prevented the browser from scrolling the focused element into view,\n // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.\n if (visualViewport) {\n if (visualViewport.height < window.innerHeight) {\n // If the keyboard is already visible, do this after one additional frame\n // to wait for the transform to be removed.\n requestAnimationFrame(() => {\n scrollIntoView(target);\n });\n } else {\n // Otherwise, wait for the visual viewport to resize before scrolling so we can\n // measure the correct position to scroll to.\n visualViewport.addEventListener(\n 'resize',\n () => {\n scrollIntoView(target);\n },\n { once: true }\n );\n }\n }\n });\n }\n };\n\n const onWindowScroll = () => {\n // Last resort. If the window scrolled, scroll it back to the top.\n // It should always be at the top because the body will have a negative margin (see below).\n window.scrollTo(0, 0);\n };\n\n // Record the original scroll position so we can restore it.\n // Then apply a negative margin to the body to offset it by the scroll position. This will\n // enable us to scroll the window to the top, which is required for the rest of this to work.\n const scrollX = window.pageXOffset;\n const scrollY = window.pageYOffset;\n\n const restoreStyles = chain(\n setStyle(\n document.documentElement,\n 'paddingRight',\n `${window.innerWidth - document.documentElement.clientWidth}px`\n ),\n setStyle(document.documentElement, 'overflow', 'hidden'),\n setStyle(document.body, 'marginTop', `-${scrollY}px`)\n );\n\n // Scroll to the top. The negative margin on the body will make this appear the same.\n window.scrollTo(0, 0);\n\n const removeEvents = chain(\n addEvent(document, 'touchstart', onTouchStart, {\n passive: false,\n capture: true,\n }),\n addEvent(document, 'touchmove', onTouchMove, {\n passive: false,\n capture: true,\n }),\n addEvent(document, 'touchend', onTouchEnd, {\n passive: false,\n capture: true,\n }),\n addEvent(document, 'focus', onFocus, true),\n addEvent(window, 'scroll', onWindowScroll)\n );\n\n return () => {\n // Restore styles and scroll the page back to where it was.\n restoreStyles();\n removeEvents();\n window.scrollTo(scrollX, scrollY);\n };\n}\n\n// Sets a CSS property on an element, and returns a function to revert it to the previous value.\nfunction setStyle(element: any, style: string, value: string) {\n const cur = element.style[style];\n element.style[style] = value;\n\n return () => {\n element.style[style] = cur;\n };\n}\n\n// Adds an event listener to an element, and returns a function to remove it.\nfunction addEvent<K extends keyof GlobalEventHandlersEventMap>(\n target: EventTarget,\n event: K,\n handler: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any,\n options?: boolean | AddEventListenerOptions\n) {\n target.addEventListener(event, handler as any, options);\n return () => {\n target.removeEventListener(event, handler as any, options);\n };\n}\n\nfunction scrollIntoView(target: Element) {\n const root = document.scrollingElement || document.documentElement;\n while (target && target !== root) {\n // Find the parent scrollable element and adjust the scroll position if the target is not already in view.\n const scrollable = getScrollParent(target);\n if (\n scrollable !== document.documentElement &&\n scrollable !== document.body &&\n scrollable !== target\n ) {\n const scrollableTop = scrollable.getBoundingClientRect().top;\n const targetTop = target.getBoundingClientRect().top;\n if (targetTop > scrollableTop + target.clientHeight) {\n scrollable.scrollTop += targetTop - scrollableTop;\n }\n }\n\n target = scrollable.parentElement as any;\n }\n}\n\nfunction willOpenKeyboard(target: Element) {\n return (\n (target instanceof HTMLInputElement &&\n !nonTextInputTypes.has(target.type)) ||\n target instanceof HTMLTextAreaElement ||\n (target instanceof HTMLElement && target.isContentEditable)\n );\n}\n","import { type Properties } from 'csstype';\n\nconst styles: Record<string, Properties> = {\n wrapper: {\n position: 'fixed',\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n overflow: 'hidden',\n pointerEvents: 'none',\n },\n backdrop: {\n zIndex: 1,\n position: 'fixed',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n backgroundColor: 'rgba(0, 0, 0, 0.2)',\n touchAction: 'none', // Disable iOS body scrolling\n border: 'none',\n },\n container: {\n zIndex: 2,\n position: 'absolute',\n left: 0,\n bottom: 0,\n width: '100%',\n backgroundColor: '#fff',\n borderTopRightRadius: '8px',\n borderTopLeftRadius: '8px',\n boxShadow: '0px -2px 16px rgba(0, 0, 0, 0.3)',\n display: 'flex',\n flexDirection: 'column',\n pointerEvents: 'auto',\n },\n headerWrapper: {\n width: '100%',\n },\n header: {\n height: '40px',\n width: '100%',\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n indicator: {\n width: '18px',\n height: '4px',\n borderRadius: '99px',\n backgroundColor: '#ddd',\n },\n content: {\n flexGrow: 1,\n display: 'flex',\n flexDirection: 'column',\n minHeight: '0px',\n position: 'relative',\n },\n scroller: {\n height: '100%',\n overflowY: 'auto',\n },\n};\n\nexport default styles;\n","import React, { forwardRef } from 'react';\nimport { motion } from 'framer-motion';\n\nimport { type SheetContainerProps } from './types';\nimport { useSheetContext } from './context';\nimport { useEventCallbacks } from './hooks';\nimport { MAX_HEIGHT } from './constants';\nimport { mergeRefs } from './utils';\nimport styles from './styles';\n\nconst SheetContainer = forwardRef<any, SheetContainerProps>(\n ({ children, style = {}, className = '', ...rest }, ref) => {\n const {\n y,\n isOpen,\n callbacks,\n snapPoints,\n initialSnap = 0,\n sheetRef,\n windowHeight,\n detent,\n animationOptions,\n reduceMotion,\n } = useSheetContext();\n\n const { handleAnimationComplete } = useEventCallbacks(isOpen, callbacks);\n const initialY = snapPoints ? snapPoints[0] - snapPoints[initialSnap] : 0;\n const maxSnapHeight = snapPoints ? snapPoints[0] : null;\n\n const height =\n maxSnapHeight !== null\n ? `min(${maxSnapHeight}px, ${MAX_HEIGHT})`\n : MAX_HEIGHT;\n\n return (\n <motion.div\n {...rest}\n ref={mergeRefs([sheetRef, ref])}\n className={`react-modal-sheet-container ${className}`}\n style={{\n ...styles.container,\n ...style,\n ...(detent === 'full-height' && { height }),\n ...(detent === 'content-height' && { maxHeight: height }),\n y,\n }}\n initial={reduceMotion ? false : { y: windowHeight }}\n animate={{ y: initialY, transition: animationOptions }}\n exit={{ y: windowHeight, transition: animationOptions }}\n onAnimationComplete={handleAnimationComplete}\n >\n {children}\n </motion.div>\n );\n }\n);\n\nSheetContainer.displayName = 'SheetContainer';\n\nexport default SheetContainer;\n","import React, { forwardRef } from 'react';\nimport { motion } from 'framer-motion';\n\nimport { type SheetDraggableProps } from './types';\nimport { useSheetScrollerContext, useSheetContext } from './context';\nimport { useDragConstraints } from './hooks';\nimport { mergeRefs } from './utils';\nimport styles from './styles';\n\nconst SheetContent = forwardRef<any, SheetDraggableProps>(\n ({ children, style, disableDrag, className = '', ...rest }, ref) => {\n const sheetContext = useSheetContext();\n const sheetScrollerContext = useSheetScrollerContext();\n const { constraintsRef, onMeasureDragConstraints } = useDragConstraints();\n\n const dragProps =\n disableDrag || sheetScrollerContext.disableDrag\n ? undefined\n : sheetContext.dragProps;\n\n return (\n <motion.div\n {...rest}\n ref={mergeRefs([ref, constraintsRef])}\n className={`react-modal-sheet-content ${className}`}\n style={{ ...styles.content, ...style }}\n {...dragProps}\n dragConstraints={constraintsRef}\n onMeasureDragConstraints={onMeasureDragConstraints}\n >\n {children}\n </motion.div>\n );\n }\n);\n\nSheetContent.displayName = 'SheetContent';\n\nexport default SheetContent;\n","import React, { forwardRef } from 'react';\nimport { motion, useTransform } from 'framer-motion';\n\nimport { type SheetDraggableProps } from './types';\nimport { useSheetContext } from './context';\nimport { useDragConstraints } from './hooks';\nimport { mergeRefs } from './utils';\nimport styles from './styles';\n\nconst SheetHeader = forwardRef<any, SheetDraggableProps>(\n ({ children, style, disableDrag, ...rest }, ref) => {\n const { indicatorRotation, dragProps } = useSheetContext();\n const { constraintsRef, onMeasureDragConstraints } = useDragConstraints();\n const _dragProps = disableDrag ? undefined : dragProps;\n\n const indicator1Transform = useTransform(\n indicatorRotation,\n (r) => `translateX(2px) rotate(${r}deg)`\n );\n\n const indicator2Transform = useTransform(\n indicatorRotation,\n (r) => `translateX(-2px) rotate(${-1 * r}deg)`\n );\n\n return (\n <motion.div\n {...rest}\n ref={mergeRefs([ref, constraintsRef])}\n style={{ ...styles.headerWrapper, ...style }}\n {..._dragProps}\n dragConstraints={constraintsRef}\n onMeasureDragConstraints={onMeasureDragConstraints}\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\nSheetHeader.displayName = 'SheetHeader';\n\nexport default SheetHeader;\n","import React, { forwardRef } from 'react';\nimport { motion } from 'framer-motion';\n\nimport { type SheetBackdropProps } from './types';\nimport styles from './styles';\n\nconst isClickable = (props: any) => !!props.onClick || !!props.onTap;\n\nconst SheetBackdrop = forwardRef<any, SheetBackdropProps>(\n ({ style = {}, className = '', ...rest }, ref) => {\n const Comp = isClickable(rest) ? motion.button : motion.div;\n const pointerEvents = isClickable(rest) ? 'auto' : 'none';\n\n return (\n <Comp\n {...rest}\n ref={ref}\n className={`react-modal-sheet-backdrop ${className}`}\n style={{ ...styles.backdrop, ...style, pointerEvents }}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n />\n );\n }\n);\n\nSheetBackdrop.displayName = 'SheetBackdrop';\n\nexport default SheetBackdrop;\n","import React, { type TouchEvent, type UIEvent, forwardRef } from 'react';\n\nimport { useSheetScrollerContext } from './context';\nimport { type SheetScrollerProps } from './types';\nimport { isTouchDevice } from './utils';\nimport styles from './styles';\n\nconst SheetScroller = forwardRef<any, SheetScrollerProps>(\n ({ draggableAt = 'top', children, style, className = '', ...rest }, ref) => {\n const sheetScrollerContext = useSheetScrollerContext();\n\n function determineDragState(element: HTMLDivElement) {\n const { scrollTop, scrollHeight, clientHeight } = element;\n const isScrollable = scrollHeight > clientHeight;\n\n if (!isScrollable) return;\n\n const isAtTop = scrollTop <= 0;\n const isAtBottom = scrollHeight - scrollTop === clientHeight;\n\n const shouldEnable =\n (draggableAt === 'top' && isAtTop) ||\n (draggableAt === 'bottom' && isAtBottom) ||\n (draggableAt === 'both' && (isAtTop || isAtBottom));\n\n if (shouldEnable) {\n sheetScrollerContext.setDragEnabled();\n } else {\n sheetScrollerContext.setDragDisabled();\n }\n }\n\n function onScroll(e: UIEvent<HTMLDivElement>) {\n determineDragState(e.currentTarget);\n }\n\n function onTouchStart(e: TouchEvent<HTMLDivElement>) {\n determineDragState(e.currentTarget);\n }\n\n const scrollProps = isTouchDevice()\n ? { onScroll, onTouchStart }\n : undefined;\n\n return (\n <div\n {...rest}\n ref={ref}\n className={`react-modal-sheet-scroller ${className}`}\n style={{ ...styles.scroller, ...style }}\n {...scrollProps}\n >\n {children}\n </div>\n );\n }\n);\n\nSheetScroller.displayName = 'SheetScroller';\n\nexport default SheetScroller;\n","import { type MotionValue } from 'framer-motion';\n\nimport _Sheet from './sheet';\nimport SheetContainer from './SheetContainer';\nimport SheetContent from './SheetContent';\nimport SheetHeader from './SheetHeader';\nimport SheetBackdrop from './SheetBackdrop';\nimport SheetScroller from './SheetScroller';\nimport { type SheetCompound } from './types';\n\nexport interface SheetRef {\n y: MotionValue<number>;\n snapTo: (index: number) => void;\n}\n\n// HACK: this is needed to get the typing to work properly...\nconst _SheetCompound: any = _Sheet;\n_SheetCompound.Container = SheetContainer;\n_SheetCompound.Header = SheetHeader;\n_SheetCompound.Content = SheetContent;\n_SheetCompound.Backdrop = SheetBackdrop;\n_SheetCompound.Scroller = SheetScroller;\n\nexport const Sheet = _SheetCompound as SheetCompound;\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/sheet.tsx","../src/hooks.tsx","../src/constants.ts","../src/utils.ts","../src/context.tsx","../src/use-prevent-scroll.ts","../src/styles.ts","../src/SheetContainer.tsx","../src/SheetContent.tsx","../src/SheetHeader.tsx","../src/SheetBackdrop.tsx","../src/SheetScroller.tsx","../src/index.tsx"],"names":["React","useEffect","useRef","useState","useLayoutEffect","dragProps","forwardRef","motion","useTransform","Sheet"],"mappings":"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","sourcesContent":["import React, {\n Children,\n cloneElement,\n forwardRef,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport {\n animate,\n AnimatePresence,\n motion,\n type PanInfo,\n type Transition,\n useMotionValue,\n useReducedMotion,\n useTransform,\n} from 'framer-motion';\n\nimport {\n useModalEffect,\n useDimensions,\n useIsomorphicLayoutEffect,\n useEffectEvent,\n} from './hooks';\n\nimport {\n REDUCED_MOTION_TWEEN_CONFIG,\n DEFAULT_TWEEN_CONFIG,\n DRAG_CLOSE_THRESHOLD,\n DRAG_VELOCITY_THRESHOLD,\n IS_SSR,\n} from './constants';\n\nimport { type SheetContextType, type SheetProps } from './types';\nimport { SheetScrollerContextProvider, SheetContext } from './context';\nimport { getClosest, inDescendingOrder, validateSnapTo } from './utils';\nimport { usePreventScroll } from './use-prevent-scroll';\nimport styles from './styles';\n\nconst Sheet = forwardRef<any, SheetProps>(\n (\n {\n onOpenStart,\n onOpenEnd,\n onClose,\n onCloseStart,\n onCloseEnd,\n onSnap,\n children,\n disableScrollLocking = false,\n isOpen,\n snapPoints,\n rootId,\n mountPoint,\n style,\n detent = 'full-height',\n initialSnap = 0,\n disableDrag = false,\n prefersReducedMotion = false,\n tweenConfig = DEFAULT_TWEEN_CONFIG,\n ...rest\n },\n ref\n ) => {\n const sheetRef = useRef<HTMLDivElement>(null);\n const indicatorRotation = useMotionValue(0);\n const { height: windowHeight } = useDimensions();\n const shouldReduceMotion = useReducedMotion();\n const reduceMotion = Boolean(prefersReducedMotion || shouldReduceMotion);\n const animationOptions: Transition = {\n type: 'tween',\n ...(reduceMotion ? REDUCED_MOTION_TWEEN_CONFIG : tweenConfig),\n };\n\n // NOTE: the inital value for `y` doesn't matter since it is overwritten by\n // the value driven by the `AnimatePresence` component when the sheet is opened\n // and after that it is driven by the gestures and/or snapping\n const y = useMotionValue(0);\n\n // +2 for tolerance in case the animated value is slightly off\n const zIndex = useTransform(y, (value) =>\n value + 2 >= windowHeight ? -1 : 9999999\n );\n const visibility = useTransform(y, (value) =>\n value + 2 >= windowHeight ? 'hidden' : 'visible'\n );\n\n // Keep the callback fns up-to-date so that they can be accessed inside\n // the effect without including them to the dependencies array\n const callbacks = useRef({\n onOpenStart,\n onOpenEnd,\n onCloseStart,\n onCloseEnd,\n });\n\n useIsomorphicLayoutEffect(() => {\n callbacks.current = {\n onOpenStart,\n onOpenEnd,\n onCloseStart,\n onCloseEnd,\n };\n });\n\n if (snapPoints) {\n // Convert negative / percentage snap points to absolute values\n snapPoints = snapPoints.map((point) => {\n // Percentage values e.g. between 0.0 and 1.0\n if (point > 0 && point <= 1) return Math.round(point * windowHeight);\n return point < 0 ? windowHeight + point : point; // negative values\n });\n\n console.assert(\n inDescendingOrder(snapPoints) || windowHeight === 0,\n `Snap points need to be in descending order got: [${snapPoints.join(\n ', '\n )}]`\n );\n }\n\n const onDrag = useEffectEvent((_, { delta }: PanInfo) => {\n // Update drag indicator rotation based on drag velocity\n const velocity = y.getVelocity();\n\n if (velocity > 0) indicatorRotation.set(10);\n if (velocity < 0) indicatorRotation.set(-10);\n\n // Make sure user cannot drag beyond the top of the sheet\n y.set(Math.max(y.get() + delta.y, 0));\n });\n\n const onDragStart = useEffectEvent(() => {\n // Find focused input inside the sheet and blur it when dragging starts\n // to prevent a weird ghost caret \"bug\" on mobile\n const focusedElement = document.activeElement as HTMLElement | null;\n if (!focusedElement || !sheetRef.current) return;\n\n const isInput =\n focusedElement.tagName === 'INPUT' ||\n focusedElement.tagName === 'TEXTAREA';\n\n // Only blur the focused element if it's inside the sheet\n if (isInput && sheetRef.current.contains(focusedElement)) {\n focusedElement.blur();\n }\n });\n\n const onDragEnd = useEffectEvent((_, { velocity }: PanInfo) => {\n if (velocity.y > DRAG_VELOCITY_THRESHOLD) {\n // User flicked the sheet down\n onClose();\n } else {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const sheetHeight = sheetRef.current!.getBoundingClientRect().height;\n const currentY = y.get();\n\n let snapTo = 0;\n\n if (snapPoints) {\n const snapToValues = snapPoints.map(\n (p) => sheetHeight - Math.min(p, sheetHeight)\n );\n\n // Allow snapping to the top of the sheet if detent is set to `content-height`\n if (detent === 'content-height' && !snapToValues.includes(0)) {\n snapToValues.unshift(0);\n }\n\n // Get the closest snap point\n snapTo = getClosest(snapToValues, currentY);\n } else if (currentY / sheetHeight > DRAG_CLOSE_THRESHOLD) {\n // Close if dragged over enough far\n snapTo = sheetHeight;\n }\n\n snapTo = validateSnapTo({ snapTo, sheetHeight });\n\n // Update the spring value so that the sheet is animated to the snap point\n void animate(y, snapTo, animationOptions);\n\n if (snapPoints && onSnap) {\n const snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));\n const snapIndex = snapPoints.indexOf(getClosest(snapPoints, snapValue)); // prettier-ignore\n onSnap(snapIndex);\n }\n\n const roundedSheetHeight = Math.round(sheetHeight);\n const shouldClose = snapTo + 2 >= roundedSheetHeight; // 2px tolerance\n\n if (shouldClose) onClose();\n }\n\n // Reset indicator rotation after dragging\n indicatorRotation.set(0);\n });\n\n // Trigger onSnap callback when sheet is opened or closed\n useEffect(() => {\n if (!snapPoints || !onSnap) return;\n const snapIndex = isOpen ? initialSnap : snapPoints.length - 1;\n onSnap(snapIndex);\n }, [isOpen]); // eslint-disable-line\n\n useImperativeHandle(ref, () => ({\n y,\n snapTo: (snapIndex: number) => {\n const sheetEl = sheetRef.current;\n\n if (snapPoints?.[snapIndex] !== undefined && sheetEl) {\n const sheetHeight = sheetEl.getBoundingClientRect().height;\n const snapPoint = snapPoints[snapIndex];\n const snapTo = validateSnapTo({\n snapTo: sheetHeight - snapPoint,\n sheetHeight,\n });\n\n void animate(y, snapTo, animationOptions);\n if (onSnap) onSnap(snapIndex);\n if (snapTo >= sheetHeight) onClose();\n }\n },\n }));\n\n useModalEffect(isOpen, rootId);\n\n // Framer Motion should handle body scroll locking but it's not working\n // properly on iOS. Scroll locking from React Aria seems to work much better.\n usePreventScroll({ isDisabled: disableScrollLocking || !isOpen });\n\n const dragProps = useMemo(() => {\n const dragProps: SheetContextType['dragProps'] = {\n drag: 'y',\n dragElastic: 0,\n dragMomentum: false,\n dragPropagation: false,\n onDrag,\n onDragStart,\n onDragEnd,\n };\n\n return disableDrag ? undefined : dragProps;\n }, [disableDrag, windowHeight]); // eslint-disable-line\n\n const context: SheetContextType = {\n y,\n sheetRef,\n isOpen,\n initialSnap,\n snapPoints,\n detent,\n indicatorRotation,\n callbacks,\n dragProps,\n windowHeight,\n animationOptions,\n reduceMotion,\n disableDrag,\n };\n\n const sheet = (\n <SheetContext.Provider value={context}>\n <motion.div\n {...rest}\n ref={ref}\n style={{ ...styles.wrapper, zIndex, visibility, ...style }}\n >\n <AnimatePresence>\n {/* NOTE: AnimatePresence requires us to set keys to children */}\n {isOpen ? (\n <SheetScrollerContextProvider>\n {Children.map(children, (child: any, i) =>\n cloneElement(child, { key: `sheet-child-${i}` })\n )}\n </SheetScrollerContextProvider>\n ) : null}\n </AnimatePresence>\n </motion.div>\n </SheetContext.Provider>\n );\n\n if (IS_SSR) return sheet;\n\n return createPortal(sheet, mountPoint ?? document.body);\n }\n);\n\nSheet.displayName = 'Sheet';\n\nexport default Sheet;\n","import {\n type MutableRefObject,\n useCallback,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { type BoundingBox } from 'framer-motion';\n\nimport { IS_SSR } from './constants';\nimport { type SheetEvents } from './types';\nimport { applyRootStyles, cleanupRootStyles } from './utils';\n\nexport const useIsomorphicLayoutEffect = IS_SSR ? useEffect : useLayoutEffect;\n\nexport function useModalEffect(isOpen: boolean, rootId?: string) {\n const prevOpen = usePrevious(isOpen);\n\n // Automatically apply the iOS modal effect to the body when sheet opens/closes\n 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 useEffect(() => {\n return () => {\n if (rootId && isOpen) cleanupRootStyles(rootId);\n };\n }, [isOpen]); // eslint-disable-line\n}\n\nexport function useEventCallbacks(\n isOpen: boolean,\n callbacks: MutableRefObject<SheetEvents>\n) {\n const prevOpen = usePrevious(isOpen);\n const didOpen = 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 = 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 useEffect(() => {\n if (!prevOpen && isOpen) {\n callbacks.current.onOpenStart?.();\n } else if (!isOpen && prevOpen) {\n callbacks.current.onCloseStart?.();\n }\n }, [isOpen, prevOpen]); // eslint-disable-line\n\n return { handleAnimationComplete };\n}\n\nexport function useDimensions() {\n const [dimensions, setDimensions] = useState({ height: 0, width: 0 });\n\n useIsomorphicLayoutEffect(() => {\n function handler() {\n setDimensions({\n height: window.innerHeight,\n width: window.innerWidth,\n });\n }\n\n handler();\n\n window.addEventListener('resize', handler);\n\n return () => {\n window.removeEventListener('resize', handler);\n };\n }, []);\n\n return dimensions;\n}\n\nexport function usePrevious<T>(state: T): T | undefined {\n const ref = useRef<T>();\n\n useEffect(() => {\n ref.current = state;\n });\n\n return ref.current;\n}\n\n// Userland version of the `useEffectEvent` React hook:\n// RFC: https://react.dev/reference/react/experimental_useEffectEvent\nexport function useEffectEvent<T extends (...args: any[]) => any>(handler: T) {\n const handlerRef = useRef<T>();\n\n useIsomorphicLayoutEffect(() => {\n handlerRef.current = handler;\n });\n\n return useCallback((...args: any[]) => {\n const fn = handlerRef.current;\n return fn?.(...args);\n }, []) as T;\n}\n\n// This is a hacky way to fix a bug in framer-motion where the drag\n// constraints are not updated when window is resized.\n// https://github.com/framer/motion/issues/1659\nconst constraints: BoundingBox = { bottom: 0, top: 0, left: 0, right: 0 };\n\nexport function useDragConstraints() {\n const constraintsRef = useRef<any>(null);\n const onMeasureDragConstraints = useCallback(() => constraints, []);\n return { constraintsRef, onMeasureDragConstraints };\n}\n","export const MAX_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';\n\nexport const IS_SSR = typeof window === 'undefined';\n\nexport const DEFAULT_TWEEN_CONFIG = {\n ease: 'easeOut',\n duration: 0.2,\n};\n\nexport const REDUCED_MOTION_TWEEN_CONFIG = {\n ease: 'linear',\n duration: 0.01,\n};\n\nexport const DRAG_CLOSE_THRESHOLD = 0.6;\n\nexport const DRAG_VELOCITY_THRESHOLD = 500;\n","import { type ForwardedRef, type RefCallback } from 'react';\n\nexport function getClosest(nums: number[], goal: number) {\n let closest = nums[0];\n let minDifference = Math.abs(nums[0] - goal);\n\n for (let i = 1; i < nums.length; i++) {\n const difference = Math.abs(nums[i] - goal);\n if (difference < minDifference) {\n closest = nums[i];\n minDifference = difference;\n }\n }\n\n return closest;\n}\n\nexport function applyRootStyles(rootId: string) {\n const body = document.querySelector('body') as HTMLBodyElement;\n const root = document.querySelector(`#${rootId}`) as HTMLDivElement;\n\n if (root) {\n const p = 24;\n const h = window.innerHeight;\n const s = (h - p) / h;\n body.style.backgroundColor = '#000';\n root.style.overflow = 'hidden';\n root.style.willChange = 'transform';\n root.style.transition =\n 'transform 200ms ease-in-out, border-radius 200ms linear';\n root.style.transform = `translateY(calc(env(safe-area-inset-top) + ${p / 2}px)) scale(${s})`; // prettier-ignore\n root.style.borderTopRightRadius = '10px';\n root.style.borderTopLeftRadius = '10px';\n }\n}\n\nexport function cleanupRootStyles(rootId: string) {\n const body = document.querySelector('body') as HTMLBodyElement;\n const root = document.getElementById(rootId) as HTMLDivElement;\n\n function onTransitionEnd() {\n root.style.removeProperty('overflow');\n root.style.removeProperty('will-change');\n root.style.removeProperty('transition');\n body.style.removeProperty('background-color');\n root.removeEventListener('transitionend', onTransitionEnd);\n }\n\n if (root) {\n // Start animating back\n root.style.removeProperty('border-top-right-radius');\n root.style.removeProperty('border-top-left-radius');\n root.style.removeProperty('transform');\n\n // Remove temp properties after animation is finished\n root.addEventListener('transitionend', onTransitionEnd);\n }\n}\n\nexport function inDescendingOrder(arr: number[]) {\n for (let i = 0; i < arr.length; i++) {\n if (arr[i + 1] > arr[i]) return false;\n }\n\n return true;\n}\n\nexport function validateSnapTo({\n snapTo,\n sheetHeight,\n}: {\n snapTo: number;\n sheetHeight: number;\n}) {\n if (snapTo < 0) {\n console.warn(\n `Snap point is out of bounds. Sheet height is ${sheetHeight} but snap point is ${\n sheetHeight + Math.abs(snapTo)\n }.`\n );\n }\n\n return Math.max(Math.round(snapTo), 0);\n}\n\nexport function mergeRefs<T = any>(\n refs: Array<ForwardedRef<T>>\n): RefCallback<T> {\n return (value: any) => {\n refs.forEach((ref: any) => {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref) {\n ref.current = value;\n }\n });\n };\n}\n\nexport function isTouchDevice() {\n if (typeof window === 'undefined') return false;\n return 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n}\n","import React, { type ReactNode, createContext, useContext, useState } from 'react';\nimport { type SheetScrollerContextType, type SheetContextType } from './types';\n\nexport const SheetContext = createContext<SheetContextType | undefined>(\n undefined\n);\n\nexport const useSheetContext = () => {\n const context = useContext(SheetContext);\n if (!context) throw Error('Sheet context error');\n return context;\n};\n\nexport const SheetScrollerContext = createContext<\n SheetScrollerContextType | undefined\n>(undefined);\n\nexport function SheetScrollerContextProvider({\n children,\n}: {\n children: ReactNode;\n}) {\n const sheetContext = useSheetContext();\n const [disableDrag, setDisableDrag] = useState(!!sheetContext.disableDrag);\n\n function setDragEnabled() {\n if (!sheetContext.disableDrag) setDisableDrag(false);\n }\n\n function setDragDisabled() {\n if (!disableDrag) setDisableDrag(true);\n }\n\n return (\n <SheetScrollerContext.Provider\n value={{ disableDrag, setDragEnabled, setDragDisabled }}\n >\n {children}\n </SheetScrollerContext.Provider>\n );\n}\n\nexport const useSheetScrollerContext = () => {\n const context = useContext(SheetScrollerContext);\n if (!context) throw Error('Sheet scroller context error');\n return context;\n};\n","// Source: https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/overlays/src/usePreventScroll.ts\nimport {\n chain,\n getScrollParent,\n isIOS,\n useLayoutEffect,\n} from '@react-aria/utils';\n\ninterface PreventScrollOptions {\n /** Whether the scroll lock is disabled. */\n isDisabled?: boolean;\n}\n\nconst visualViewport =\n typeof window !== 'undefined' ? (window as any).visualViewport : undefined;\n\n// HTML input types that do not cause the software keyboard to appear.\nconst nonTextInputTypes = new Set([\n 'checkbox',\n 'radio',\n 'range',\n 'color',\n 'file',\n 'image',\n 'button',\n 'submit',\n 'reset',\n]);\n\n// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position\nlet preventScrollCount = 0;\nlet restore: any;\n\n/**\n * Prevents scrolling on the document body on mount, and\n * restores it on unmount. Also ensures that content does not\n * shift due to the scrollbars disappearing.\n */\nexport function usePreventScroll(options: PreventScrollOptions = {}) {\n const { isDisabled } = options;\n\n useLayoutEffect(() => {\n if (isDisabled) {\n return;\n }\n\n preventScrollCount++;\n if (preventScrollCount === 1) {\n if (isIOS()) {\n restore = preventScrollMobileSafari();\n } else {\n restore = preventScrollStandard();\n }\n }\n\n return () => {\n preventScrollCount--;\n if (preventScrollCount === 0) {\n restore();\n }\n };\n }, [isDisabled]);\n}\n\n// For most browsers, all we need to do is set `overflow: hidden` on the root element, and\n// add some padding to prevent the page from shifting when the scrollbar is hidden.\nfunction preventScrollStandard() {\n return chain(\n setStyle(\n document.documentElement,\n 'paddingRight',\n `${window.innerWidth - document.documentElement.clientWidth}px`\n ),\n setStyle(document.documentElement, 'overflow', 'hidden')\n );\n}\n\n// Mobile Safari is a whole different beast. Even with overflow: hidden,\n// it still scrolls the page in many situations:\n//\n// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.\n// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of\n// it, so it becomes scrollable.\n// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.\n// This may cause even fixed position elements to scroll off the screen.\n// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always\n// scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.\n//\n// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:\n//\n// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling\n// on the window.\n// 2. Prevent default on `touchmove` events inside a scrollable element when the scroll position is at the\n// top or bottom. This avoids the whole page scrolling instead, but does prevent overscrolling.\n// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.\n// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top\n// of the page, which prevents it from scrolling the page. After the input is focused, scroll the element\n// into view ourselves, without scrolling the whole page.\n// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the\n// same visually, but makes the actual scroll position always zero. This is required to make all of the\n// above work or Safari will still try to scroll the page when focusing an input.\n// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting\n// to navigate to an input with the next/previous buttons that's outside a modal.\nfunction preventScrollMobileSafari() {\n let scrollable: Element | undefined;\n let lastY = 0;\n\n const onTouchStart = (e: TouchEvent) => {\n // Store the nearest scrollable parent element from the element that the user touched.\n scrollable = getScrollParent(e.target as Element);\n if (\n scrollable === document.documentElement &&\n scrollable === document.body\n ) {\n return;\n }\n\n lastY = e.changedTouches[0].pageY;\n };\n\n const onTouchMove = (e: TouchEvent) => {\n // In special situations, `onTouchStart` may be called without `onTouchStart` being called.\n // (e.g. when the user places a finger on the screen before the <Sheet> is mounted and then moves the finger after it is mounted).\n // If `onTouchStart` is not called, `scrollable` is `undefined`. Therefore, such cases are ignored.\n if (scrollable === undefined) {\n return;\n }\n\n // Prevent scrolling the window.\n if (\n scrollable === document.documentElement ||\n scrollable === document.body\n ) {\n e.preventDefault();\n return;\n }\n\n // Prevent scrolling up when at the top and scrolling down when at the bottom\n // of a nested scrollable area, otherwise mobile Safari will start scrolling\n // the window instead. Unfortunately, this disables bounce scrolling when at\n // the top but it's the best we can do.\n const y = e.changedTouches[0].pageY;\n const scrollTop = scrollable.scrollTop;\n const bottom = scrollable.scrollHeight - scrollable.clientHeight;\n\n // Fix for: https://github.com/adobe/react-spectrum/pull/3780/files\n if (bottom === 0) {\n return;\n }\n\n if ((scrollTop <= 0 && y > lastY) || (scrollTop >= bottom && y < lastY)) {\n e.preventDefault();\n }\n\n lastY = y;\n };\n\n const onTouchEnd = (e: TouchEvent) => {\n const target = e.target as HTMLElement;\n\n // Apply this change if we're not already focused on the target element\n if (willOpenKeyboard(target) && target !== document.activeElement) {\n e.preventDefault();\n\n // Apply a transform to trick Safari into thinking the input is at the top of the page\n // so it doesn't try to scroll it into view. When tapping on an input, this needs to\n // be done before the \"focus\" event, so we have to focus the element ourselves.\n target.style.transform = 'translateY(-2000px)';\n target.focus();\n requestAnimationFrame(() => {\n target.style.transform = '';\n });\n }\n };\n\n const onFocus = (e: FocusEvent) => {\n const target = e.target as HTMLElement;\n if (willOpenKeyboard(target)) {\n // Transform also needs to be applied in the focus event in cases where focus moves\n // other than tapping on an input directly, e.g. the next/previous buttons in the\n // software keyboard. In these cases, it seems applying the transform in the focus event\n // is good enough, whereas when tapping an input, it must be done before the focus event. đ¤ˇââī¸\n target.style.transform = 'translateY(-2000px)';\n requestAnimationFrame(() => {\n target.style.transform = '';\n\n // This will have prevented the browser from scrolling the focused element into view,\n // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.\n if (visualViewport) {\n if (visualViewport.height < window.innerHeight) {\n // If the keyboard is already visible, do this after one additional frame\n // to wait for the transform to be removed.\n requestAnimationFrame(() => {\n scrollIntoView(target);\n });\n } else {\n // Otherwise, wait for the visual viewport to resize before scrolling so we can\n // measure the correct position to scroll to.\n visualViewport.addEventListener(\n 'resize',\n () => {\n scrollIntoView(target);\n },\n { once: true }\n );\n }\n }\n });\n }\n };\n\n const onWindowScroll = () => {\n // Last resort. If the window scrolled, scroll it back to the top.\n // It should always be at the top because the body will have a negative margin (see below).\n window.scrollTo(0, 0);\n };\n\n // Record the original scroll position so we can restore it.\n // Then apply a negative margin to the body to offset it by the scroll position. This will\n // enable us to scroll the window to the top, which is required for the rest of this to work.\n const scrollX = window.pageXOffset;\n const scrollY = window.pageYOffset;\n\n const restoreStyles = chain(\n setStyle(\n document.documentElement,\n 'paddingRight',\n `${window.innerWidth - document.documentElement.clientWidth}px`\n ),\n setStyle(document.documentElement, 'overflow', 'hidden'),\n setStyle(document.body, 'marginTop', `-${scrollY}px`)\n );\n\n // Scroll to the top. The negative margin on the body will make this appear the same.\n window.scrollTo(0, 0);\n\n const removeEvents = chain(\n addEvent(document, 'touchstart', onTouchStart, {\n passive: false,\n capture: true,\n }),\n addEvent(document, 'touchmove', onTouchMove, {\n passive: false,\n capture: true,\n }),\n addEvent(document, 'touchend', onTouchEnd, {\n passive: false,\n capture: true,\n }),\n addEvent(document, 'focus', onFocus, true),\n addEvent(window, 'scroll', onWindowScroll)\n );\n\n return () => {\n // Restore styles and scroll the page back to where it was.\n restoreStyles();\n removeEvents();\n window.scrollTo(scrollX, scrollY);\n };\n}\n\n// Sets a CSS property on an element, and returns a function to revert it to the previous value.\nfunction setStyle(element: any, style: string, value: string) {\n const cur = element.style[style];\n element.style[style] = value;\n\n return () => {\n element.style[style] = cur;\n };\n}\n\n// Adds an event listener to an element, and returns a function to remove it.\nfunction addEvent<K extends keyof GlobalEventHandlersEventMap>(\n target: EventTarget,\n event: K,\n handler: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any,\n options?: boolean | AddEventListenerOptions\n) {\n target.addEventListener(event, handler as any, options);\n return () => {\n target.removeEventListener(event, handler as any, options);\n };\n}\n\nfunction scrollIntoView(target: Element) {\n const root = document.scrollingElement || document.documentElement;\n while (target && target !== root) {\n // Find the parent scrollable element and adjust the scroll position if the target is not already in view.\n const scrollable = getScrollParent(target);\n if (\n scrollable !== document.documentElement &&\n scrollable !== document.body &&\n scrollable !== target\n ) {\n const scrollableTop = scrollable.getBoundingClientRect().top;\n const targetTop = target.getBoundingClientRect().top;\n if (targetTop > scrollableTop + target.clientHeight) {\n scrollable.scrollTop += targetTop - scrollableTop;\n }\n }\n\n target = scrollable.parentElement as any;\n }\n}\n\nfunction willOpenKeyboard(target: Element) {\n return (\n (target instanceof HTMLInputElement &&\n !nonTextInputTypes.has(target.type)) ||\n target instanceof HTMLTextAreaElement ||\n (target instanceof HTMLElement && target.isContentEditable)\n );\n}\n","import { type Properties } from 'csstype';\n\nconst styles: Record<string, Properties> = {\n wrapper: {\n position: 'fixed',\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n overflow: 'hidden',\n pointerEvents: 'none',\n },\n backdrop: {\n zIndex: 1,\n position: 'fixed',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n backgroundColor: 'rgba(0, 0, 0, 0.2)',\n touchAction: 'none', // Disable iOS body scrolling\n border: 'none',\n },\n container: {\n zIndex: 2,\n position: 'absolute',\n left: 0,\n bottom: 0,\n width: '100%',\n backgroundColor: '#fff',\n borderTopRightRadius: '8px',\n borderTopLeftRadius: '8px',\n boxShadow: '0px -2px 16px rgba(0, 0, 0, 0.3)',\n display: 'flex',\n flexDirection: 'column',\n pointerEvents: 'auto',\n },\n headerWrapper: {\n width: '100%',\n },\n header: {\n height: '40px',\n width: '100%',\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n indicator: {\n width: '18px',\n height: '4px',\n borderRadius: '99px',\n backgroundColor: '#ddd',\n },\n content: {\n flexGrow: 1,\n display: 'flex',\n flexDirection: 'column',\n minHeight: '0px',\n position: 'relative',\n },\n scroller: {\n height: '100%',\n overflowY: 'auto',\n },\n};\n\nexport default styles;\n","import React, { forwardRef } from 'react';\nimport { motion } from 'framer-motion';\n\nimport { type SheetContainerProps } from './types';\nimport { useSheetContext } from './context';\nimport { useEventCallbacks } from './hooks';\nimport { MAX_HEIGHT } from './constants';\nimport { mergeRefs } from './utils';\nimport styles from './styles';\n\nconst SheetContainer = forwardRef<any, SheetContainerProps>(\n ({ children, style = {}, className = '', ...rest }, ref) => {\n const {\n y,\n isOpen,\n callbacks,\n snapPoints,\n initialSnap = 0,\n sheetRef,\n windowHeight,\n detent,\n animationOptions,\n reduceMotion,\n } = useSheetContext();\n\n const { handleAnimationComplete } = useEventCallbacks(isOpen, callbacks);\n const initialY = snapPoints ? snapPoints[0] - snapPoints[initialSnap] : 0;\n const maxSnapHeight = snapPoints ? snapPoints[0] : null;\n\n const height =\n maxSnapHeight !== null\n ? `min(${maxSnapHeight}px, ${MAX_HEIGHT})`\n : MAX_HEIGHT;\n\n return (\n <motion.div\n {...rest}\n ref={mergeRefs([sheetRef, ref])}\n className={`react-modal-sheet-container ${className}`}\n style={{\n ...styles.container,\n ...style,\n ...(detent === 'full-height' && { height }),\n ...(detent === 'content-height' && { maxHeight: height }),\n y,\n }}\n initial={reduceMotion ? false : { y: windowHeight }}\n animate={{ y: initialY, transition: animationOptions }}\n exit={{ y: windowHeight, transition: animationOptions }}\n onAnimationComplete={handleAnimationComplete}\n >\n {children}\n </motion.div>\n );\n }\n);\n\nSheetContainer.displayName = 'SheetContainer';\n\nexport default SheetContainer;\n","import React, { forwardRef } from 'react';\nimport { motion } from 'framer-motion';\n\nimport { type SheetDraggableProps } from './types';\nimport { useSheetScrollerContext, useSheetContext } from './context';\nimport { useDragConstraints } from './hooks';\nimport { mergeRefs } from './utils';\nimport styles from './styles';\n\nconst SheetContent = forwardRef<any, SheetDraggableProps>(\n ({ children, style, disableDrag, className = '', ...rest }, ref) => {\n const sheetContext = useSheetContext();\n const sheetScrollerContext = useSheetScrollerContext();\n const { constraintsRef, onMeasureDragConstraints } = useDragConstraints();\n\n const dragProps =\n disableDrag || sheetScrollerContext.disableDrag\n ? undefined\n : sheetContext.dragProps;\n\n return (\n <motion.div\n {...rest}\n ref={mergeRefs([ref, constraintsRef])}\n className={`react-modal-sheet-content ${className}`}\n style={{ ...styles.content, ...style }}\n {...dragProps}\n dragConstraints={constraintsRef}\n onMeasureDragConstraints={onMeasureDragConstraints}\n >\n {children}\n </motion.div>\n );\n }\n);\n\nSheetContent.displayName = 'SheetContent';\n\nexport default SheetContent;\n","import React, { forwardRef } from 'react';\nimport { motion, useTransform } from 'framer-motion';\n\nimport { type SheetDraggableProps } from './types';\nimport { useSheetContext } from './context';\nimport { useDragConstraints } from './hooks';\nimport { mergeRefs } from './utils';\nimport styles from './styles';\n\nconst SheetHeader = forwardRef<any, SheetDraggableProps>(\n ({ children, style, disableDrag, ...rest }, ref) => {\n const { indicatorRotation, dragProps } = useSheetContext();\n const { constraintsRef, onMeasureDragConstraints } = useDragConstraints();\n const _dragProps = disableDrag ? undefined : dragProps;\n\n const indicator1Transform = useTransform(\n indicatorRotation,\n (r) => `translateX(2px) rotate(${r}deg)`\n );\n\n const indicator2Transform = useTransform(\n indicatorRotation,\n (r) => `translateX(-2px) rotate(${-1 * r}deg)`\n );\n\n return (\n <motion.div\n {...rest}\n ref={mergeRefs([ref, constraintsRef])}\n style={{ ...styles.headerWrapper, ...style }}\n {..._dragProps}\n dragConstraints={constraintsRef}\n onMeasureDragConstraints={onMeasureDragConstraints}\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\nSheetHeader.displayName = 'SheetHeader';\n\nexport default SheetHeader;\n","import React, { forwardRef } from 'react';\nimport { motion } from 'framer-motion';\n\nimport { type SheetBackdropProps } from './types';\nimport styles from './styles';\n\nconst isClickable = (props: any) => !!props.onClick || !!props.onTap;\n\nconst SheetBackdrop = forwardRef<any, SheetBackdropProps>(\n ({ style = {}, className = '', ...rest }, ref) => {\n const Comp = isClickable(rest) ? motion.button : motion.div;\n const pointerEvents = isClickable(rest) ? 'auto' : 'none';\n\n return (\n <Comp\n {...rest}\n ref={ref}\n className={`react-modal-sheet-backdrop ${className}`}\n style={{ ...styles.backdrop, ...style, pointerEvents }}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n />\n );\n }\n);\n\nSheetBackdrop.displayName = 'SheetBackdrop';\n\nexport default SheetBackdrop;\n","import React, { type TouchEvent, type UIEvent, forwardRef } from 'react';\n\nimport { useSheetScrollerContext } from './context';\nimport { type SheetScrollerProps } from './types';\nimport { isTouchDevice } from './utils';\nimport styles from './styles';\n\nconst SheetScroller = forwardRef<any, SheetScrollerProps>(\n ({ draggableAt = 'top', children, style, className = '', ...rest }, ref) => {\n const sheetScrollerContext = useSheetScrollerContext();\n\n function determineDragState(element: HTMLDivElement) {\n const { scrollTop, scrollHeight, clientHeight } = element;\n const isScrollable = scrollHeight > clientHeight;\n\n if (!isScrollable) return;\n\n const isAtTop = scrollTop <= 0;\n const isAtBottom = scrollHeight - scrollTop === clientHeight;\n\n const shouldEnable =\n (draggableAt === 'top' && isAtTop) ||\n (draggableAt === 'bottom' && isAtBottom) ||\n (draggableAt === 'both' && (isAtTop || isAtBottom));\n\n if (shouldEnable) {\n sheetScrollerContext.setDragEnabled();\n } else {\n sheetScrollerContext.setDragDisabled();\n }\n }\n\n function onScroll(e: UIEvent<HTMLDivElement>) {\n determineDragState(e.currentTarget);\n }\n\n function onTouchStart(e: TouchEvent<HTMLDivElement>) {\n determineDragState(e.currentTarget);\n }\n\n const scrollProps = isTouchDevice()\n ? { onScroll, onTouchStart }\n : undefined;\n\n return (\n <div\n {...rest}\n ref={ref}\n className={`react-modal-sheet-scroller ${className}`}\n style={{ ...styles.scroller, ...style }}\n {...scrollProps}\n >\n {children}\n </div>\n );\n }\n);\n\nSheetScroller.displayName = 'SheetScroller';\n\nexport default SheetScroller;\n","import { type MotionValue } from 'framer-motion';\n\nimport _Sheet from './sheet';\nimport SheetContainer from './SheetContainer';\nimport SheetContent from './SheetContent';\nimport SheetHeader from './SheetHeader';\nimport SheetBackdrop from './SheetBackdrop';\nimport SheetScroller from './SheetScroller';\nimport { type SheetCompound } from './types';\n\nexport interface SheetRef {\n y: MotionValue<number>;\n snapTo: (index: number) => void;\n}\n\n// HACK: this is needed to get the typing to work properly...\nconst _SheetCompound: any = _Sheet;\n_SheetCompound.Container = SheetContainer;\n_SheetCompound.Header = SheetHeader;\n_SheetCompound.Content = SheetContent;\n_SheetCompound.Backdrop = SheetBackdrop;\n_SheetCompound.Scroller = SheetScroller;\n\nexport const Sheet = _SheetCompound as SheetCompound;\n"]}
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "3.
|
|
2
|
+
"version": "3.1.0",
|
|
3
3
|
"license": "MIT",
|
|
4
4
|
"name": "react-modal-sheet",
|
|
5
5
|
"description": "Flexible bottom sheet component for your React apps",
|
|
@@ -28,15 +28,15 @@
|
|
|
28
28
|
"src"
|
|
29
29
|
],
|
|
30
30
|
"scripts": {
|
|
31
|
-
"dev": "tsup --watch --onSuccess \"
|
|
31
|
+
"dev": "tsup --watch --onSuccess \"yalc publish --push\"",
|
|
32
32
|
"build": "tsup",
|
|
33
33
|
"build:verify": "attw --pack .",
|
|
34
34
|
"format:check": "prettier . --check",
|
|
35
35
|
"format:write": "prettier . --write",
|
|
36
36
|
"lint": "eslint src/* --fix --max-warnings=0",
|
|
37
|
-
"link
|
|
38
|
-
"link:example": "cd example && yalc add react-modal-sheet",
|
|
39
|
-
"link:example-ssr": "cd example-ssr && yalc add react-modal-sheet",
|
|
37
|
+
"link": "yalc publish && npm run link:example && npm run link:example-ssr",
|
|
38
|
+
"link:example": "cd example && yalc add react-modal-sheet && npm i",
|
|
39
|
+
"link:example-ssr": "cd example-ssr && yalc add react-modal-sheet && npm i",
|
|
40
40
|
"test": "vitest run",
|
|
41
41
|
"typecheck": "tsc --noEmit --skipLibCheck",
|
|
42
42
|
"release": "npm run build && npm run build:verify && np"
|
package/src/hooks.tsx
CHANGED
|
@@ -70,11 +70,20 @@ export function useDimensions() {
|
|
|
70
70
|
const [dimensions, setDimensions] = useState({ height: 0, width: 0 });
|
|
71
71
|
|
|
72
72
|
useIsomorphicLayoutEffect(() => {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
73
|
+
function handler() {
|
|
74
|
+
setDimensions({
|
|
75
|
+
height: window.innerHeight,
|
|
76
|
+
width: window.innerWidth,
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
handler();
|
|
81
|
+
|
|
82
|
+
window.addEventListener('resize', handler);
|
|
83
|
+
|
|
84
|
+
return () => {
|
|
85
|
+
window.removeEventListener('resize', handler);
|
|
86
|
+
};
|
|
78
87
|
}, []);
|
|
79
88
|
|
|
80
89
|
return dimensions;
|
|
@@ -90,9 +99,9 @@ export function usePrevious<T>(state: T): T | undefined {
|
|
|
90
99
|
return ref.current;
|
|
91
100
|
}
|
|
92
101
|
|
|
93
|
-
// Userland version of the `
|
|
94
|
-
// RFC: https://
|
|
95
|
-
export function
|
|
102
|
+
// Userland version of the `useEffectEvent` React hook:
|
|
103
|
+
// RFC: https://react.dev/reference/react/experimental_useEffectEvent
|
|
104
|
+
export function useEffectEvent<T extends (...args: any[]) => any>(handler: T) {
|
|
96
105
|
const handlerRef = useRef<T>();
|
|
97
106
|
|
|
98
107
|
useIsomorphicLayoutEffect(() => {
|
package/src/sheet.tsx
CHANGED
|
@@ -25,7 +25,7 @@ import {
|
|
|
25
25
|
useModalEffect,
|
|
26
26
|
useDimensions,
|
|
27
27
|
useIsomorphicLayoutEffect,
|
|
28
|
-
|
|
28
|
+
useEffectEvent,
|
|
29
29
|
} from './hooks';
|
|
30
30
|
|
|
31
31
|
import {
|
|
@@ -38,12 +38,7 @@ import {
|
|
|
38
38
|
|
|
39
39
|
import { type SheetContextType, type SheetProps } from './types';
|
|
40
40
|
import { SheetScrollerContextProvider, SheetContext } from './context';
|
|
41
|
-
import {
|
|
42
|
-
getClosest,
|
|
43
|
-
inDescendingOrder,
|
|
44
|
-
mergeRefs,
|
|
45
|
-
validateSnapTo,
|
|
46
|
-
} from './utils';
|
|
41
|
+
import { getClosest, inDescendingOrder, validateSnapTo } from './utils';
|
|
47
42
|
import { usePreventScroll } from './use-prevent-scroll';
|
|
48
43
|
import styles from './styles';
|
|
49
44
|
|
|
@@ -72,8 +67,7 @@ const Sheet = forwardRef<any, SheetProps>(
|
|
|
72
67
|
},
|
|
73
68
|
ref
|
|
74
69
|
) => {
|
|
75
|
-
const sheetRef = useRef<
|
|
76
|
-
const constraintsRef = useRef<any>(null);
|
|
70
|
+
const sheetRef = useRef<HTMLDivElement>(null);
|
|
77
71
|
const indicatorRotation = useMotionValue(0);
|
|
78
72
|
const { height: windowHeight } = useDimensions();
|
|
79
73
|
const shouldReduceMotion = useReducedMotion();
|
|
@@ -88,12 +82,12 @@ const Sheet = forwardRef<any, SheetProps>(
|
|
|
88
82
|
// and after that it is driven by the gestures and/or snapping
|
|
89
83
|
const y = useMotionValue(0);
|
|
90
84
|
|
|
85
|
+
// +2 for tolerance in case the animated value is slightly off
|
|
91
86
|
const zIndex = useTransform(y, (value) =>
|
|
92
|
-
value >= windowHeight ? -1 : 9999999
|
|
87
|
+
value + 2 >= windowHeight ? -1 : 9999999
|
|
93
88
|
);
|
|
94
|
-
|
|
95
89
|
const visibility = useTransform(y, (value) =>
|
|
96
|
-
value >= windowHeight ? 'hidden' : 'visible'
|
|
90
|
+
value + 2 >= windowHeight ? 'hidden' : 'visible'
|
|
97
91
|
);
|
|
98
92
|
|
|
99
93
|
// Keep the callback fns up-to-date so that they can be accessed inside
|
|
@@ -130,7 +124,7 @@ const Sheet = forwardRef<any, SheetProps>(
|
|
|
130
124
|
);
|
|
131
125
|
}
|
|
132
126
|
|
|
133
|
-
const onDrag =
|
|
127
|
+
const onDrag = useEffectEvent((_, { delta }: PanInfo) => {
|
|
134
128
|
// Update drag indicator rotation based on drag velocity
|
|
135
129
|
const velocity = y.getVelocity();
|
|
136
130
|
|
|
@@ -141,13 +135,29 @@ const Sheet = forwardRef<any, SheetProps>(
|
|
|
141
135
|
y.set(Math.max(y.get() + delta.y, 0));
|
|
142
136
|
});
|
|
143
137
|
|
|
144
|
-
const
|
|
138
|
+
const onDragStart = useEffectEvent(() => {
|
|
139
|
+
// Find focused input inside the sheet and blur it when dragging starts
|
|
140
|
+
// to prevent a weird ghost caret "bug" on mobile
|
|
141
|
+
const focusedElement = document.activeElement as HTMLElement | null;
|
|
142
|
+
if (!focusedElement || !sheetRef.current) return;
|
|
143
|
+
|
|
144
|
+
const isInput =
|
|
145
|
+
focusedElement.tagName === 'INPUT' ||
|
|
146
|
+
focusedElement.tagName === 'TEXTAREA';
|
|
147
|
+
|
|
148
|
+
// Only blur the focused element if it's inside the sheet
|
|
149
|
+
if (isInput && sheetRef.current.contains(focusedElement)) {
|
|
150
|
+
focusedElement.blur();
|
|
151
|
+
}
|
|
152
|
+
});
|
|
153
|
+
|
|
154
|
+
const onDragEnd = useEffectEvent((_, { velocity }: PanInfo) => {
|
|
145
155
|
if (velocity.y > DRAG_VELOCITY_THRESHOLD) {
|
|
146
156
|
// User flicked the sheet down
|
|
147
157
|
onClose();
|
|
148
158
|
} else {
|
|
149
|
-
|
|
150
|
-
const sheetHeight =
|
|
159
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
160
|
+
const sheetHeight = sheetRef.current!.getBoundingClientRect().height;
|
|
151
161
|
const currentY = y.get();
|
|
152
162
|
|
|
153
163
|
let snapTo = 0;
|
|
@@ -181,7 +191,7 @@ const Sheet = forwardRef<any, SheetProps>(
|
|
|
181
191
|
}
|
|
182
192
|
|
|
183
193
|
const roundedSheetHeight = Math.round(sheetHeight);
|
|
184
|
-
const shouldClose = snapTo >= roundedSheetHeight;
|
|
194
|
+
const shouldClose = snapTo + 2 >= roundedSheetHeight; // 2px tolerance
|
|
185
195
|
|
|
186
196
|
if (shouldClose) onClose();
|
|
187
197
|
}
|
|
@@ -200,9 +210,9 @@ const Sheet = forwardRef<any, SheetProps>(
|
|
|
200
210
|
useImperativeHandle(ref, () => ({
|
|
201
211
|
y,
|
|
202
212
|
snapTo: (snapIndex: number) => {
|
|
203
|
-
const sheetEl = sheetRef.current
|
|
213
|
+
const sheetEl = sheetRef.current;
|
|
204
214
|
|
|
205
|
-
if (snapPoints?.[snapIndex] !== undefined && sheetEl
|
|
215
|
+
if (snapPoints?.[snapIndex] !== undefined && sheetEl) {
|
|
206
216
|
const sheetHeight = sheetEl.getBoundingClientRect().height;
|
|
207
217
|
const snapPoint = snapPoints[snapIndex];
|
|
208
218
|
const snapTo = validateSnapTo({
|
|
@@ -230,6 +240,7 @@ const Sheet = forwardRef<any, SheetProps>(
|
|
|
230
240
|
dragMomentum: false,
|
|
231
241
|
dragPropagation: false,
|
|
232
242
|
onDrag,
|
|
243
|
+
onDragStart,
|
|
233
244
|
onDragEnd,
|
|
234
245
|
};
|
|
235
246
|
|
|
@@ -256,7 +267,7 @@ const Sheet = forwardRef<any, SheetProps>(
|
|
|
256
267
|
<SheetContext.Provider value={context}>
|
|
257
268
|
<motion.div
|
|
258
269
|
{...rest}
|
|
259
|
-
ref={
|
|
270
|
+
ref={ref}
|
|
260
271
|
style={{ ...styles.wrapper, zIndex, visibility, ...style }}
|
|
261
272
|
>
|
|
262
273
|
<AnimatePresence>
|
package/src/types.tsx
CHANGED
package/src/utils.ts
CHANGED
|
@@ -74,15 +74,18 @@ export function validateSnapTo({
|
|
|
74
74
|
}) {
|
|
75
75
|
if (snapTo < 0) {
|
|
76
76
|
console.warn(
|
|
77
|
-
`Snap point is out of bounds. Sheet height is ${sheetHeight} but snap point is ${
|
|
78
|
-
Math.abs(snapTo)
|
|
77
|
+
`Snap point is out of bounds. Sheet height is ${sheetHeight} but snap point is ${
|
|
78
|
+
sheetHeight + Math.abs(snapTo)
|
|
79
|
+
}.`
|
|
79
80
|
);
|
|
80
81
|
}
|
|
81
82
|
|
|
82
83
|
return Math.max(Math.round(snapTo), 0);
|
|
83
84
|
}
|
|
84
85
|
|
|
85
|
-
export function mergeRefs<T = any>(
|
|
86
|
+
export function mergeRefs<T = any>(
|
|
87
|
+
refs: Array<ForwardedRef<T>>
|
|
88
|
+
): RefCallback<T> {
|
|
86
89
|
return (value: any) => {
|
|
87
90
|
refs.forEach((ref: any) => {
|
|
88
91
|
if (typeof ref === 'function') {
|