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 CHANGED
@@ -17,8 +17,7 @@
17
17
  | ![](media/1.gif) | ![](media/2.gif) | ![](media/3.gif) | ![](media/4.gif) |
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
- âš ī¸ **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.
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
- ### Scrolling on touch devices
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
  | ![](media/3.gif) | ![](media/4.gif) |
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
- const A11yExample = () => {
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
- const SheetComp = ({ sheetState }) => {
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
- const updateHeight = () => {
154
- setDimensions({ height: window.innerHeight, width: window.innerWidth });
155
- };
156
- window.addEventListener("resize", updateHeight);
157
- updateHeight();
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", updateHeight);
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 useEvent(handler) {
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 = useEvent((_, { delta }) => {
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 onDragEnd = useEvent((_, { velocity }) => {
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 sheetEl = sheetRef.current;
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 !== null) {
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: mergeRefs([ref, constraintsRef]),
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
- const updateHeight = () => {
148
- setDimensions({ height: window.innerHeight, width: window.innerWidth });
149
- };
150
- window.addEventListener("resize", updateHeight);
151
- updateHeight();
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", updateHeight);
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 useEvent(handler) {
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 = useEvent((_, { delta }) => {
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 onDragEnd = useEvent((_, { velocity }) => {
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 sheetEl = sheetRef.current;
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 !== null) {
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: mergeRefs([ref, constraintsRef]),
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(
@@ -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.0.0",
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 \"npm run link:self\"",
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:self": "yalc publish && npm run link:example && npm run link:example-ssr",
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
- const updateHeight = () =>
74
- { setDimensions({ height: window.innerHeight, width: window.innerWidth }); };
75
- window.addEventListener('resize', updateHeight);
76
- updateHeight();
77
- return () => { window.removeEventListener('resize', updateHeight); };
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 `useEvent` React hook:
94
- // RFC: https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md
95
- export function useEvent<T extends (...args: any[]) => any>(handler: T) {
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
- useEvent,
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<any>(null);
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 = useEvent((_, { delta }: PanInfo) => {
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 onDragEnd = useEvent((_, { velocity }: PanInfo) => {
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
- const sheetEl = sheetRef.current as HTMLDivElement;
150
- const sheetHeight = sheetEl.getBoundingClientRect().height;
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 as HTMLDivElement | null;
213
+ const sheetEl = sheetRef.current;
204
214
 
205
- if (snapPoints?.[snapIndex] !== undefined && sheetEl !== null) {
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={mergeRefs([ref, constraintsRef])}
270
+ ref={ref}
260
271
  style={{ ...styles.wrapper, zIndex, visibility, ...style }}
261
272
  >
262
273
  <AnimatePresence>
package/src/types.tsx CHANGED
@@ -87,6 +87,7 @@ export interface SheetDragProps {
87
87
  dragMomentum: boolean;
88
88
  dragPropagation: boolean;
89
89
  onDrag: DragHandlers['onDrag'];
90
+ onDragStart: DragHandlers['onDragStart'];
90
91
  onDragEnd: DragHandlers['onDragEnd'];
91
92
  }
92
93
 
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 ${sheetHeight +
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>(refs: Array<ForwardedRef<T>>): RefCallback<T> {
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') {