react-modal-sheet 5.6.0 → 5.7.0

package/README.md

@@ -100,7 +100,7 @@ Also, by constructing the sheet from smaller pieces makes it easier to apply any
 | `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.                                                                                                                                                                                              |
 | `snapPoints`            | no       |                                      | Eg. `[0, 0.5, 100, 1]` - where positive values are pixels from the bottom of the sheet and negative from the top. Values between 0-1 represent percentages, eg. `0.5` means 50% of sheet height. **Must be in ascending order and should include 0 (closed) and 1 (fully open).**                                               |
 | `initialSnap`           | no       | 0                                    | Initial snap point when sheet is opened (index from `snapPoints`).                                                                                                                                                                                                                                                              |
-| `modalEffectRootId`     | no       |                                      | The id of the element where the main app is mounted, eg. "root". Enables [iOS modal effect](#-ios-modal-view-effect).                                                                                                                                                                                                           |
+| `modalEffectRootId`     | no       |                                      | The id of the element where the main app is mounted, eg. "root". Enables [iOS modal effect](#-ios-modal-view-effect). Can also be the `id` of another sheet to [stack sheets](#stacking-sheets).                                                                                                                                |
 | `modalEffectThreshold`  | no       | 0                                    | Threshold value between 0-1 which determines when the iOS modal effect will start while dragging the sheet - `0` corresponding to the start of the drag (0% has been dragged into view) and `1` corresponding to the end of the drag (100% of the sheet is visible).                                                            |
 | `tweenConfig`           | no       | `{ ease: 'easeOut', duration: 0.2 }` | Overrides the config for the sheet [tween](https://motion.dev/docs/react-transitions#tween) transition when the sheet is opened, closed, or snapped to a point.                                                                                                                                                                 |
 | `mountPoint`            | no       | `document.body`                      | HTML element that should be used as the mount point for the sheet.                                                                                                                                                                                                                                                              |
@@ -831,6 +831,47 @@ You can control the start threshold of the effect with the `modalEffectThreshold
 >
 > You can still override this behavior by providing a custom `modalEffectThreshold` value.
 
+#### Stacking sheets
+
+The modal effect can also be applied to another sheet which lets you stack sheets on top of each other. Give the underlying sheet an `id` and use it as the `modalEffectRootId` of the sheet that is opened on top of it. You can stack as many sheets as you want by always pointing `modalEffectRootId` to the sheet directly underneath.
+
+```tsx
+function StackedExample() {
+  const [isOpen, setOpen] = useState(false);
+  const [isStackedOpen, setStackedOpen] = useState(false);
+
+  return (
+    <Sheet
+      id="parent-sheet"
+      isOpen={isOpen}
+      onClose={() => setOpen(false)}
+      modalEffectRootId="root"
+    >
+      <Sheet.Container>
+        <Sheet.Content>
+          <button onClick={() => setStackedOpen(true)}>Open stacked sheet</button>
+
+          <Sheet
+            isOpen={isStackedOpen}
+            onClose={() => setStackedOpen(false)}
+            modalEffectRootId="parent-sheet"
+          >
+            <Sheet.Container>{/*...*/}</Sheet.Container>
+            <Sheet.Backdrop onTap={() => setStackedOpen(false)} />
+          </Sheet>
+        </Sheet.Content>
+      </Sheet.Container>
+      <Sheet.Backdrop onTap={() => setOpen(false)} />
+    </Sheet>
+  );
+}
+```
+
+> [!NOTE]
+> The stacked sheet should be rendered inside the underlying sheet (like above) so that it is mounted after it and placed on top of it. Give the stacked sheet a tappable `Sheet.Backdrop` so that the underlying sheet can't be tapped or dragged while the stacked sheet is open. Note that a stacked sheet is unmounted without a closing animation when the underlying sheet is closed.
+
+See the [Stacked sheets example](https://temzasse.github.io/react-modal-sheet/#/stacked-sheets) for a working example of this.
+
 ## 🎨 Customization
 
 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.

package/dist/index.js

@@ -409,12 +409,7 @@ function useModalEffect({
       }
     }
     progress = Math.max(0, Math.min(1, progress));
-    const pageWidth = window.innerWidth;
-    updateModalEffect(rootId, {
-      scale: motion.transform(progress, [0, 1], [1, (pageWidth - 16) / pageWidth]),
-      translateY: motion.transform(progress, [0, 1], [0, 24 + insetTop]),
-      borderRadius: motion.transform(progress, [0, 1], [0, 10])
-    });
+    updateModalEffect(rootId, { progress, insetTop });
   });
   const handleYComplete = useStableCallback(() => {
     if (!rootId) return;
@@ -442,8 +437,14 @@ function useModalEffect({
   }, [rootId]);
 }
 function setupModalEffect(rootId) {
-  const root = document.querySelector(`#${rootId}`);
-  if (!root) return;
+  const target = getModalEffectTarget(rootId);
+  if (!target) return;
+  if (target.type === "sheet") {
+    const sheet = target.element;
+    sheet.style.transformOrigin = "center top";
+    return;
+  }
+  const root = target.element;
   const body = document.querySelector("body");
   body.style.backgroundColor = "#000000";
   root.style.overflow = "hidden";
@@ -453,16 +454,42 @@ function setupModalEffect(rootId) {
   root.style.transformOrigin = "center top";
 }
 function updateModalEffect(rootId, opts) {
-  const root = document.querySelector(`#${rootId}`);
-  if (!root) return;
-  const { scale, translateY, borderRadius } = opts;
+  const target = getModalEffectTarget(rootId);
+  if (!target) return;
+  const { progress, insetTop } = opts;
+  if (target.type === "sheet") {
+    const sheet = target.element;
+    const sheetWidth = sheet.offsetWidth;
+    const sheetTop = sheet.offsetTop;
+    const scaleEnd2 = (sheetWidth - 16) / sheetWidth;
+    const scale2 = motion.transform(progress, [0, 1], [1, scaleEnd2]);
+    const translateYEnd = clamp(scaleEnd2 * (24 + insetTop) - sheetTop, -10, 0);
+    const translateY2 = motion.transform(progress, [0, 1], [0, translateYEnd]);
+    sheet.style.scale = `${scale2}`;
+    sheet.style.translate = `0 ${translateY2}px`;
+    return;
+  }
+  const root = target.element;
+  const pageWidth = window.innerWidth;
+  const scaleEnd = (pageWidth - 16) / pageWidth;
+  const scale = motion.transform(progress, [0, 1], [1, scaleEnd]);
+  const translateY = motion.transform(progress, [0, 1], [0, 24 + insetTop]);
+  const borderRadius = motion.transform(progress, [0, 1], [0, 10]);
   root.style.transform = `scale(${scale}) translate3d(0, ${translateY}px, 0)`;
   root.style.borderTopRightRadius = `${borderRadius}px`;
   root.style.borderTopLeftRadius = `${borderRadius}px`;
 }
 function cleanupModalEffect(rootId) {
-  const root = document.querySelector(`#${rootId}`);
-  if (!root) return;
+  const target = getModalEffectTarget(rootId);
+  if (!target) return;
+  if (target.type === "sheet") {
+    const sheet = target.element;
+    sheet.style.removeProperty("transform-origin");
+    sheet.style.removeProperty("scale");
+    sheet.style.removeProperty("translate");
+    return;
+  }
+  const root = target.element;
   const body = document.querySelector("body");
   body.style.removeProperty("background-color");
   root.style.removeProperty("overflow");
@@ -474,6 +501,19 @@ function cleanupModalEffect(rootId) {
   root.style.removeProperty("border-top-right-radius");
   root.style.removeProperty("border-top-left-radius");
 }
+function getModalEffectTarget(rootId) {
+  const root = document.getElementById(rootId);
+  if (!root) return null;
+  const sheetRoot = root.closest(".react-modal-sheet-root");
+  if (sheetRoot) {
+    const container = sheetRoot.querySelector(
+      ".react-modal-sheet-container"
+    );
+    if (!container) return null;
+    return { type: "sheet", element: container };
+  }
+  return { type: "root", element: root };
+}
 
 // src/hooks/use-prevent-scroll.ts
 var KEYBOARD_BUFFER = 24;
@@ -1051,7 +1091,7 @@ var Sheet = React.forwardRef(
     onDragEnd: onDragEndProp,
     ...rest
   }, ref) => {
-    const [sheetBoundsRef, sheetBounds] = useMeasure__default.default();
+    const [sheetBoundsRef, sheetBounds] = useMeasure__default.default({ offsetSize: true });
     const sheetRef = React.useRef(null);
     const sheetHeight = Math.round(sheetBounds.height);
     const [currentSnap, setCurrentSnap] = React.useState(initialSnap);