@simoneggert/react-modal-sheet 5.4.3

package/src/SheetDragIndicator.tsx

@@ -0,0 +1,52 @@
+import { motion, useTransform } from 'motion/react';
+import React from 'react';
+
+import { useSheetContext } from './context';
+import { styles } from './styles';
+import type { SheetDragIndicatorProps } from './types';
+import { applyStyles } from './utils';
+
+export function SheetDragIndicator({
+  style,
+  className = '',
+  unstyled,
+  ...rest
+}: SheetDragIndicatorProps) {
+  const sheetContext = useSheetContext();
+
+  const indicator1Transform = useTransform(
+    sheetContext.indicatorRotation,
+    (r) => `translateX(2px) rotate(${r}deg)`
+  );
+
+  const indicator2Transform = useTransform(
+    sheetContext.indicatorRotation,
+    (r) => `translateX(-2px) rotate(${-1 * r}deg)`
+  );
+
+  const isUnstyled = unstyled ?? sheetContext.unstyled;
+
+  const indicatorWrapperStyle = {
+    ...applyStyles(styles.indicatorWrapper, isUnstyled),
+    ...style,
+  };
+
+  const indicatorStyle = applyStyles(styles.indicator, isUnstyled);
+
+  return (
+    <div
+      className={`react-modal-sheet-drag-indicator-container ${className}`}
+      style={indicatorWrapperStyle}
+      {...rest}
+    >
+      <motion.span
+        className="react-modal-sheet-drag-indicator"
+        style={{ ...indicatorStyle, transform: indicator1Transform }}
+      />
+      <motion.span
+        className="react-modal-sheet-drag-indicator"
+        style={{ ...indicatorStyle, transform: indicator2Transform }}
+      />
+    </div>
+  );
+}

package/src/SheetHeader.tsx

@@ -0,0 +1,52 @@
+import { motion } from 'motion/react';
+import React, { forwardRef } from 'react';
+
+import { useSheetContext } from './context';
+import { useDragConstraints } from './hooks/use-drag-constraints';
+import { SheetDragIndicator } from './SheetDragIndicator';
+import { styles } from './styles';
+import { type SheetHeaderProps } from './types';
+import { applyStyles, mergeRefs } from './utils';
+
+export const SheetHeader = forwardRef<any, SheetHeaderProps>(
+  (
+    { children, style, disableDrag, unstyled, className = '', ...rest },
+    ref
+  ) => {
+    const sheetContext = useSheetContext();
+    const dragConstraints = useDragConstraints();
+    const dragProps =
+      disableDrag || sheetContext.disableDrag
+        ? undefined
+        : sheetContext.dragProps;
+
+    const isUnstyled = unstyled ?? sheetContext.unstyled;
+
+    const headerWrapperStyle = {
+      ...applyStyles(styles.headerWrapper, isUnstyled),
+      ...style,
+    };
+
+    const headerStyle = applyStyles(styles.header, isUnstyled);
+
+    return (
+      <motion.div
+        {...rest}
+        ref={mergeRefs([ref, dragConstraints.ref])}
+        style={headerWrapperStyle}
+        className={`react-modal-sheet-header-container ${className}`}
+        {...dragProps}
+        dragConstraints={dragConstraints.ref}
+        onMeasureDragConstraints={dragConstraints.onMeasure}
+      >
+        {children || (
+          <div className="react-modal-sheet-header" style={headerStyle}>
+            <SheetDragIndicator />
+          </div>
+        )}
+      </motion.div>
+    );
+  }
+);
+
+SheetHeader.displayName = 'SheetHeader';

package/src/constants.ts

@@ -0,0 +1,19 @@
+import type { SheetTweenConfig } from './types';
+
+export const DEFAULT_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';
+
+export const IS_SSR = typeof window === 'undefined';
+
+export const DEFAULT_TWEEN_CONFIG: SheetTweenConfig = {
+  ease: 'easeOut',
+  duration: 0.2,
+};
+
+export const REDUCED_MOTION_TWEEN_CONFIG: SheetTweenConfig = {
+  ease: 'linear',
+  duration: 0.01,
+};
+
+export const DEFAULT_DRAG_CLOSE_THRESHOLD = 0.6;
+
+export const DEFAULT_DRAG_VELOCITY_THRESHOLD = 500;

package/src/context.tsx

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+import { type SheetContextType } from './types';
+
+export const SheetContext = createContext<SheetContextType | undefined>(
+  undefined
+);
+
+export function useSheetContext() {
+  const context = useContext(SheetContext);
+  if (!context) throw new Error('Sheet context error');
+  return context;
+}

package/src/debug.ts

@@ -0,0 +1,38 @@
+/**
+ * This library runs on mobile devices so we can't use console.log for debugging. Instead, we can use this function to send debug information to a remote server or store it locally on the device.
+ * Instead display the "payload" in a fixed position element on the screen
+ * and hide it when that element is clicked. Create the element if it doesn't exist,
+ * and update its content with the payload (any JSON data).
+ */
+export function debug(payload: any, placement: 'top' | 'bottom' = 'top') {
+  let debugElement = document.getElementById('debug-element');
+
+  if (!debugElement) {
+    debugElement = document.createElement('div');
+    debugElement.id = 'debug-element';
+    debugElement.style.position = 'fixed';
+    debugElement.style[placement] = '0';
+    debugElement.style.left = '0';
+    debugElement.style.width = '100%';
+    debugElement.style.maxHeight = '50%';
+    debugElement.style.overflowY = 'auto';
+    debugElement.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+    debugElement.style.color = 'white';
+    debugElement.style.padding = '10px';
+    debugElement.style.fontSize = '12px';
+    debugElement.style.zIndex = '9999';
+    debugElement.style.cursor = 'pointer';
+    document.body.appendChild(debugElement);
+
+    debugElement.addEventListener('click', () => {
+      if (debugElement) {
+        debugElement.style.display =
+          debugElement.style.display === 'none' ? 'block' : 'none';
+      }
+    });
+  }
+
+  const id = Math.random().toString(36).substring(2, 7);
+  debugElement.textContent = JSON.stringify(payload, null, 2) + ` (${id})`;
+  debugElement.style.display = 'block';
+}

package/src/hooks/use-dimensions.ts

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+
+import { IS_SSR } from '../constants';
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
+
+export function useDimensions() {
+  const [dimensions, setDimensions] = useState(() => ({
+    windowHeight: !IS_SSR ? window.innerHeight : 0,
+    windowWidth: !IS_SSR ? window.innerWidth : 0,
+  }));
+
+  useIsomorphicLayoutEffect(() => {
+    function handler() {
+      setDimensions({
+        windowHeight: window.innerHeight,
+        windowWidth: window.innerWidth,
+      });
+    }
+
+    handler();
+
+    window.addEventListener('resize', handler);
+
+    return () => {
+      window.removeEventListener('resize', handler);
+    };
+  }, []);
+
+  return dimensions;
+}

package/src/hooks/use-drag-constraints.ts

@@ -0,0 +1,14 @@
+import { useCallback, useRef } from 'react';
+
+import { type BoundingBox } from 'motion/react';
+
+// This is a hacky way to fix a bug in motion/react where the drag
+// constraints are not updated when window is resized.
+// https://github.com/framer/motion/issues/1659
+const constraints: BoundingBox = { bottom: 0, top: 0, left: 0, right: 0 };
+
+export function useDragConstraints() {
+  const ref = useRef<any>(null);
+  const onMeasure = useCallback(() => constraints, []);
+  return { ref, onMeasure };
+}

package/src/hooks/use-isomorphic-layout-effect.ts

@@ -0,0 +1,5 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+import { IS_SSR } from '../constants';
+
+export const useIsomorphicLayoutEffect = IS_SSR ? useEffect : useLayoutEffect;

package/src/hooks/use-keyboard-avoidance.ts

@@ -0,0 +1,75 @@
+import { type RefObject, useEffect, useState } from 'react';
+
+import { willOpenKeyboard } from '../utils';
+import { useStableCallback } from './use-stable-callback';
+import { useVirtualKeyboard } from './use-virtual-keyboard';
+
+export function useKeyboardAvoidance({
+  isEnabled,
+  containerRef,
+  onWillOpenKeyboard,
+  onDidOpenKeyboard,
+}: {
+  isEnabled: boolean;
+  containerRef: RefObject<HTMLDivElement | null>;
+  onWillOpenKeyboard?: (event: FocusEvent) => Promise<void>;
+  onDidOpenKeyboard?: (focusedElement: HTMLElement) => void;
+}) {
+  const [focusedElement, setFocusedElement] = useState<HTMLElement | null>(
+    null
+  );
+
+  const keyboard = useVirtualKeyboard({
+    isEnabled,
+    containerRef,
+  });
+
+  const handleFocusIn = useStableCallback(async (event: FocusEvent) => {
+    const element = event.target as HTMLElement;
+
+    if (willOpenKeyboard(element) && containerRef.current?.contains(element)) {
+      await onWillOpenKeyboard?.(event);
+      setFocusedElement(element);
+    }
+  });
+
+  const handleFocusOut = useStableCallback((event: FocusEvent) => {
+    const element = event.target as HTMLElement;
+
+    if (focusedElement === element) {
+      setFocusedElement(null);
+    }
+  });
+
+  // Keep track of the currently focused input within the container
+  useEffect(() => {
+    if (!isEnabled) return;
+
+    document.addEventListener('focusin', handleFocusIn);
+    document.addEventListener('focusout', handleFocusOut);
+
+    return () => {
+      document.removeEventListener('focusin', handleFocusIn);
+      document.removeEventListener('focusout', handleFocusOut);
+    };
+  }, [isEnabled]);
+
+  useEffect(() => {
+    const containerElement = containerRef.current;
+
+    if (
+      !isEnabled ||
+      !focusedElement ||
+      !containerElement ||
+      !keyboard.isKeyboardOpen
+    ) {
+      return;
+    }
+
+    requestAnimationFrame(() => {
+      onDidOpenKeyboard?.(focusedElement);
+    });
+  }, [isEnabled, keyboard.isKeyboardOpen, focusedElement]);
+
+  return keyboard;
+}

package/src/hooks/use-modal-effect.ts

@@ -0,0 +1,161 @@
+import { type MotionValue, transform } from 'motion';
+import { type RefObject } from 'react';
+
+import type { SheetDetent, SheetSnapPoint } from '../types';
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
+import { useSafeAreaInsets } from './use-safe-area-insets';
+
+export function useModalEffect({
+  y,
+  detent,
+  rootId: _rootId,
+  sheetHeight,
+  snapPoints,
+  startThreshold,
+}: {
+  y: MotionValue<number>;
+  detent: SheetDetent;
+  rootId?: string;
+  sheetHeight: number;
+  snapPoints: SheetSnapPoint[];
+  startThreshold?: number;
+}) {
+  const insetTop = useSafeAreaInsets().top;
+
+  let rootId: string | undefined = _rootId;
+
+  if (rootId && detent === 'full') {
+    console.warn('Using "full" detent with modal effect is not supported.');
+    rootId = undefined;
+  }
+
+  // Cleanup on unmount
+  useIsomorphicLayoutEffect(() => {
+    return () => {
+      if (rootId) cleanupModalEffect(rootId);
+    };
+  }, []);
+
+  useIsomorphicLayoutEffect(() => {
+    if (!rootId) return;
+
+    const root = document.querySelector(`#${rootId}`) as HTMLDivElement;
+    if (!root) return;
+
+    const removeStartListener = y.on('animationStart', () => {
+      // biome-ignore lint/style/noNonNullAssertion: root is always defined here
+      setupModalEffect(rootId!);
+    });
+
+    /**
+     * NOTE: The `y` value gets smaller when the sheet is opened and larger
+     * when the sheet is being closed.
+     */
+    const removeChangeListener = y.on('change', (yValue) => {
+      if (!root) return;
+
+      let progress = Math.max(0, 1 - yValue / sheetHeight);
+
+      /**
+       * Start the effect only if we have dragged over the second snap point
+       * to make the effect more natural as the sheet will reach it's final
+       * position when the user drags it over the second snap point.
+       */
+      const snapThresholdPoint =
+        snapPoints.length > 1 ? snapPoints[snapPoints.length - 2] : undefined;
+
+      /**
+       * If we have snap points, we need to calculate the progress percentage
+       * based on the snap point threshold. Note that the maximum value is also
+       * different in this case as the range between the start of the effect
+       * and its end is different.
+       */
+      if (snapThresholdPoint !== undefined) {
+        const snapThresholdValue = snapThresholdPoint.snapValueY;
+
+        if (yValue <= snapThresholdValue) {
+          progress = (snapThresholdValue - yValue) / snapThresholdValue;
+        } else {
+          progress = 0;
+        }
+      }
+
+      /**
+       * If we have a start threshold, we need to calculate the progress
+       * percentage based on the start threshold (0 to 1). For example,
+       * if the start threshold is 0.5, the progress will be 0 until the sheet
+       * is dragged over 50% of the complete drag distance.
+       */
+      if (startThreshold !== undefined) {
+        const startThresholdValue =
+          sheetHeight -
+          Math.min(Math.floor(startThreshold * sheetHeight), sheetHeight);
+
+        if (yValue <= startThresholdValue) {
+          progress = (startThresholdValue - yValue) / startThresholdValue;
+        } else {
+          progress = 0;
+        }
+      }
+
+      // Make sure progress is between 0 and 1
+      progress = Math.max(0, Math.min(1, progress));
+
+      const pageWidth = window.innerWidth;
+      const ty = transform(progress, [0, 1], [0, 24 + insetTop]);
+      const s = transform(progress, [0, 1], [1, (pageWidth - 16) / pageWidth]);
+      const borderRadius = transform(progress, [0, 1], [0, 10]);
+
+      root.style.transform = `scale(${s}) translate3d(0, ${ty}px, 0)`;
+      root.style.borderTopRightRadius = `${borderRadius}px`;
+      root.style.borderTopLeftRadius = `${borderRadius}px`;
+    });
+
+    function onCompleted() {
+      // -5 just to take into account some inprecision to ensure the cleanup is done
+      if (y.get() - 5 >= sheetHeight) {
+        // biome-ignore lint/style/noNonNullAssertion: root is always defined here
+        cleanupModalEffect(rootId!);
+      }
+    }
+
+    const removeCompleteListener = y.on('animationComplete', onCompleted);
+    const removeCancelListener = y.on('animationCancel', onCompleted);
+
+    return () => {
+      removeStartListener();
+      removeChangeListener();
+      removeCompleteListener();
+      removeCancelListener();
+    };
+  }, [y, rootId, insetTop, startThreshold, sheetHeight]);
+}
+
+function setupModalEffect(rootId: string) {
+  const root = document.querySelector(`#${rootId}`) as HTMLDivElement;
+  const body = document.querySelector('body') as HTMLBodyElement;
+  if (!root) return;
+
+  body.style.backgroundColor = '#000';
+  root.style.overflow = 'hidden';
+  root.style.transitionTimingFunction = 'cubic-bezier(0.32, 0.72, 0, 1)';
+  root.style.transitionProperty = 'transform, border-radius';
+  root.style.transitionDuration = '0.5s';
+  root.style.transformOrigin = 'center top';
+}
+
+function cleanupModalEffect(rootId: string) {
+  const root = document.querySelector(`#${rootId}`) as HTMLDivElement;
+  const body = document.querySelector('body') as HTMLBodyElement;
+  if (!root) return;
+
+  body.style.removeProperty('background-color');
+  root.style.removeProperty('overflow');
+  root.style.removeProperty('transition-timing-function');
+  root.style.removeProperty('transition-property');
+  root.style.removeProperty('transition-duration');
+  root.style.removeProperty('transform-origin');
+  root.style.removeProperty('transform');
+  root.style.removeProperty('border-top-right-radius');
+  root.style.removeProperty('border-top-left-radius');
+}