react-modal-sheet 5.3.1 → 5.4.1

package/src/SheetBackdrop.tsx

@@ -22,12 +22,18 @@ export const SheetBackdrop = forwardRef<any, SheetBackdropProps>(
       pointerEvents,
     };
 
+    const animationProps = sheetContext.prefersReducedMotion
+      ? {}
+      : {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: 1 },
+        };
+
     return (
       <Comp
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        exit={{ opacity: 0 }}
-        transition={{ duration: 1 }}
+        {...animationProps}
         {...(rest as any)}
         ref={ref}
         className={`react-modal-sheet-backdrop ${className}`}

package/src/SheetContent.tsx

@@ -6,7 +6,7 @@ import { useDragConstraints } from './hooks/use-drag-constraints';
 import { useScrollPosition } from './hooks/use-scroll-position';
 import { styles } from './styles';
 import { type SheetContentProps } from './types';
-import { applyStyles, mergeRefs } from './utils';
+import { applyStyles, isHTTPS, mergeRefs } from './utils';
 
 export const SheetContent = forwardRef<any, SheetContentProps>(
   (
@@ -73,8 +73,14 @@ export const SheetContent = forwardRef<any, SheetContentProps>(
     const scrollStyle: MotionStyle = applyStyles(styles.scroller, isUnstyled);
 
     if (sheetContext.avoidKeyboard) {
-      scrollStyle.paddingBottom =
-        'env(keyboard-inset-height, var(--keyboard-inset-height, 0px))';
+      /**
+       * Virtual Keyboard API is only available in secure context (https)
+       * and it will have 0px height in insecure context,
+       * which causes issues when developing and testing on localhost (http).
+       */
+      scrollStyle.paddingBottom = isHTTPS()
+        ? 'env(keyboard-inset-height, var(--keyboard-inset-height, 0px))'
+        : 'var(--keyboard-inset-height, 0px)';
     }
 
     if (disableScroll) {

package/src/debug.ts

@@ -4,7 +4,7 @@
  * 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' = 'bottom') {
+export function debug(payload: any, placement: 'top' | 'bottom' = 'top') {
   let debugElement = document.getElementById('debug-element');
 
   if (!debugElement) {
@@ -32,6 +32,7 @@ export function debug(payload: any, placement: 'top' | 'bottom' = 'bottom') {
     });
   }
 
-  debugElement.textContent = JSON.stringify(payload, null, 2);
+  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-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-prevent-scroll.ts

@@ -1,7 +1,7 @@
 // This code originates from https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePreventScroll.ts
 
+import { isIOS, willOpenKeyboard } from '../utils';
 import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
-import { isIOS } from '../utils';
 
 const KEYBOARD_BUFFER = 24;
 
@@ -32,17 +32,17 @@ export function isScrollable(
 
   const style = window.getComputedStyle(node);
 
-  let isScrollable = /(auto|scroll)/.test(
+  let scrollable = /(auto|scroll)/.test(
     style.overflow + style.overflowX + style.overflowY
   );
 
-  if (isScrollable && checkForOverflow) {
-    isScrollable =
+  if (scrollable && checkForOverflow) {
+    scrollable =
       node.scrollHeight !== node.clientHeight ||
       node.scrollWidth !== node.clientWidth;
   }
 
-  return isScrollable;
+  return scrollable;
 }
 
 export function getScrollParent(
@@ -64,19 +64,6 @@ export function getScrollParent(
   );
 }
 
-// HTML input types that do not cause the software keyboard to appear.
-const nonTextInputTypes = new Set([
-  'checkbox',
-  'radio',
-  'range',
-  'color',
-  'file',
-  'image',
-  'button',
-  'submit',
-  'reset',
-]);
-
 // The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
 let preventScrollCount = 0;
 let restore: () => void;
@@ -367,12 +354,3 @@ function scrollIntoView(target: Element) {
     target = scrollable.parentElement;
   }
 }
-
-function willOpenKeyboard(target: Element) {
-  return (
-    (target instanceof HTMLInputElement &&
-      !nonTextInputTypes.has(target.type)) ||
-    target instanceof HTMLTextAreaElement ||
-    (target instanceof HTMLElement && target.isContentEditable)
-  );
-}

package/src/hooks/use-scroll-position.ts

@@ -1,5 +1,4 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { debug } from '../debug';
 import { useStableCallback } from './use-stable-callback';
 
 type UseScrollPositionOptions = {

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

@@ -1,11 +1,36 @@
 import { type RefObject, useEffect, useRef, useState } from 'react';
-import { useStableCallback } from './use-stable-callback';
+import { isHTTPS, willOpenKeyboard } from '../utils';
+
+type VirtualKeyboardApi = {
+  overlaysContent: boolean;
+  boundingRect: {
+    x: number;
+    y: number;
+    height: number;
+    width: number;
+  };
+  addEventListener: (
+    type: 'geometrychange',
+    listener: EventListenerOrEventListenerObject
+  ) => void;
+  removeEventListener: (
+    type: 'geometrychange',
+    listener: EventListenerOrEventListenerObject
+  ) => void;
+};
 
 type VirtualKeyboardState = {
   isVisible: boolean;
   height: number;
 };
 
+/**
+ * Keep track of how many components are using the virtual keyboard API
+ * to avoid conflicts when toggling `overlaysContent` which is a global setting.
+ */
+let virtualKeyboardOverlayUsers = 0;
+let initialVirtualKeyboardOverlaysContent: boolean | null = null;
+
 type UseVirtualKeyboardOptions = {
   /**
    * Ref to the container element to apply `keyboard-inset-height` CSS variable updates.
@@ -22,11 +47,6 @@ type UseVirtualKeyboardOptions = {
    * @default 100
    */
   visualViewportThreshold?: number;
-  /**
-   * Whether to treat contenteditable elements as text inputs.
-   * @default true
-   */
-  includeContentEditable?: boolean;
   /**
    * Delay in ms for debouncing viewport changes.
    * @default 100
@@ -66,7 +86,6 @@ export function useVirtualKeyboard(options: UseVirtualKeyboardOptions = {}) {
     containerRef,
     isEnabled = true,
     debounceDelay = 100,
-    includeContentEditable = true,
     visualViewportThreshold = 100,
   } = options;
 
@@ -78,27 +97,14 @@ export function useVirtualKeyboard(options: UseVirtualKeyboardOptions = {}) {
   const focusedElementRef = useRef<HTMLElement | null>(null);
   const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const isTextInput = useStableCallback((el: Element | null) => {
-    return (
-      el?.tagName === 'INPUT' ||
-      el?.tagName === 'TEXTAREA' ||
-      (includeContentEditable &&
-        el instanceof HTMLElement &&
-        el.isContentEditable)
-    );
-  });
-
   useEffect(() => {
-    if (!isEnabled) return;
-
     const vv = window.visualViewport;
-    const vk = (navigator as any).virtualKeyboard;
+    const vk = getVirtualKeyboardApi();
 
     function setKeyboardInsetHeightEnv(height: number) {
       const element = containerRef?.current || document.documentElement;
 
-      // Virtual Keyboard API is only available in secure context
-      if (window.isSecureContext) {
+      if (vk) {
         element.style.setProperty(
           '--keyboard-inset-height',
           `env(keyboard-inset-height, ${height}px)`
@@ -108,29 +114,46 @@ export function useVirtualKeyboard(options: UseVirtualKeyboardOptions = {}) {
       }
     }
 
-    function handleFocusIn(e: FocusEvent) {
-      if (e.target instanceof HTMLElement && isTextInput(e.target)) {
-        focusedElementRef.current = e.target;
-        updateKeyboardState();
-      }
+    function setKeyboardState(nextState: VirtualKeyboardState) {
+      setState((prevState) =>
+        prevState.isVisible === nextState.isVisible &&
+        prevState.height === nextState.height
+          ? prevState
+          : nextState
+      );
     }
 
-    function handleFocusOut() {
+    function resetKeyboardState() {
       focusedElementRef.current = null;
-      updateKeyboardState();
+      setKeyboardInsetHeightEnv(0);
+      setKeyboardState({ isVisible: false, height: 0 });
+    }
+
+    if (!isEnabled) {
+      resetKeyboardState();
+      return;
     }
 
     function updateKeyboardState() {
       if (debounceTimer.current) {
         clearTimeout(debounceTimer.current);
       }
+
       debounceTimer.current = setTimeout(() => {
-        const active = focusedElementRef.current;
-        const inputIsFocused = isTextInput(active);
+        const active = getActiveElement() ?? focusedElementRef.current;
+        const inputIsFocused = active ? willOpenKeyboard(active) : false;
 
         if (!inputIsFocused) {
-          setKeyboardInsetHeightEnv(0);
-          setState({ isVisible: false, height: 0 });
+          resetKeyboardState();
+          return;
+        }
+
+        focusedElementRef.current = active as HTMLElement;
+
+        if (vk?.overlaysContent) {
+          const keyboardHeight = vk.boundingRect.height;
+          setKeyboardInsetHeightEnv(keyboardHeight);
+          setKeyboardState({ isVisible: true, height: keyboardHeight });
           return;
         }
 
@@ -139,33 +162,53 @@ export function useVirtualKeyboard(options: UseVirtualKeyboardOptions = {}) {
 
           if (heightDiff > visualViewportThreshold) {
             setKeyboardInsetHeightEnv(heightDiff);
-            setState({ isVisible: true, height: heightDiff });
-          } else {
-            setKeyboardInsetHeightEnv(0);
-            setState({ isVisible: false, height: 0 });
+            setKeyboardState({ isVisible: true, height: heightDiff });
+            return;
           }
         }
+
+        resetKeyboardState();
       }, debounceDelay);
     }
 
-    window.addEventListener('focusin', handleFocusIn);
-    window.addEventListener('focusout', handleFocusOut);
+    function handleFocusIn(e: FocusEvent) {
+      if (e.target instanceof HTMLElement && willOpenKeyboard(e.target)) {
+        focusedElementRef.current = e.target;
+        updateKeyboardState();
+      }
+    }
+
+    function handleFocusOut() {
+      requestAnimationFrame(() => {
+        focusedElementRef.current = getActiveElement();
+        updateKeyboardState();
+      });
+    }
+
+    document.addEventListener('focusin', handleFocusIn);
+    document.addEventListener('focusout', handleFocusOut);
 
     if (vv) {
       vv.addEventListener('resize', updateKeyboardState);
       vv.addEventListener('scroll', updateKeyboardState);
     }
 
-    let currentOverlaysContent = false;
-
     if (vk) {
-      currentOverlaysContent = vk.overlaysContent;
-      vk.overlaysContent = true;
+      if (virtualKeyboardOverlayUsers === 0) {
+        initialVirtualKeyboardOverlaysContent = vk.overlaysContent;
+        vk.overlaysContent = true;
+      }
+
+      virtualKeyboardOverlayUsers++;
+      vk.addEventListener('geometrychange', updateKeyboardState);
     }
 
+    focusedElementRef.current = getActiveElement();
+    updateKeyboardState();
+
     return () => {
-      window.removeEventListener('focusin', handleFocusIn);
-      window.removeEventListener('focusout', handleFocusOut);
+      document.removeEventListener('focusin', handleFocusIn);
+      document.removeEventListener('focusout', handleFocusOut);
 
       if (vv) {
         vv.removeEventListener('resize', updateKeyboardState);
@@ -173,22 +216,54 @@ export function useVirtualKeyboard(options: UseVirtualKeyboardOptions = {}) {
       }
 
       if (vk) {
-        vk.overlaysContent = currentOverlaysContent;
+        vk.removeEventListener('geometrychange', updateKeyboardState);
+
+        virtualKeyboardOverlayUsers = Math.max(
+          0,
+          virtualKeyboardOverlayUsers - 1
+        );
+
+        if (virtualKeyboardOverlayUsers === 0) {
+          vk.overlaysContent = initialVirtualKeyboardOverlaysContent ?? false;
+          initialVirtualKeyboardOverlaysContent = null;
+        }
       }
 
       if (debounceTimer.current) {
         clearTimeout(debounceTimer.current);
       }
+
+      resetKeyboardState();
     };
-  }, [
-    debounceDelay,
-    includeContentEditable,
-    isEnabled,
-    visualViewportThreshold,
-  ]);
+  }, [debounceDelay, isEnabled, visualViewportThreshold]);
 
   return {
     keyboardHeight: state.height,
     isKeyboardOpen: state.isVisible,
   };
 }
+
+/**
+ * Virtual Keyboard API is only available in secure contexts (HTTPS)
+ * and may not be supported in all browsers.
+ */
+function getVirtualKeyboardApi() {
+  return isHTTPS() && 'virtualKeyboard' in navigator
+    ? (navigator.virtualKeyboard as VirtualKeyboardApi)
+    : null;
+}
+
+function getActiveElement() {
+  let activeElement: Element | null = document.activeElement;
+
+  while (
+    activeElement instanceof HTMLElement &&
+    activeElement.shadowRoot?.activeElement
+  ) {
+    activeElement = activeElement.shadowRoot.activeElement;
+  }
+
+  return activeElement && willOpenKeyboard(activeElement)
+    ? (activeElement as HTMLElement)
+    : null;
+}

package/src/sheet.tsx

@@ -9,7 +9,6 @@ import {
 } from 'motion/react';
 import React, {
   forwardRef,
-  useEffect,
   useImperativeHandle,
   useRef,
   useState,
@@ -26,11 +25,11 @@ import {
 } from './constants';
 import { SheetContext } from './context';
 import { useDimensions } from './hooks/use-dimensions';
+import { useKeyboardAvoidance } from './hooks/use-keyboard-avoidance';
 import { useModalEffect } from './hooks/use-modal-effect';
 import { usePreventScroll } from './hooks/use-prevent-scroll';
 import { useSheetState } from './hooks/use-sheet-state';
 import { useStableCallback } from './hooks/use-stable-callback';
-import { useVirtualKeyboard } from './hooks/use-virtual-keyboard';
 import {
   computeSnapPoints,
   handleHighVelocityDrag,
@@ -38,7 +37,7 @@ import {
 } from './snap';
 import { styles } from './styles';
 import { type SheetContextType, type SheetProps } from './types';
-import { applyStyles, waitForElement } from './utils';
+import { applyStyles, waitForElement, willOpenKeyboard } from './utils';
 
 export const Sheet = forwardRef<any, SheetProps>(
   (
@@ -97,14 +96,6 @@ export const Sheet = forwardRef<any, SheetProps>(
       ...(reduceMotion ? REDUCED_MOTION_TWEEN_CONFIG : tweenConfig),
     };
 
-    const keyboard = useVirtualKeyboard({
-      isEnabled: isOpen && avoidKeyboard,
-      containerRef: sheetRef,
-    });
-
-    // Disable drag if the keyboard is open to avoid weird behavior
-    const disableDrag = keyboard.isKeyboardOpen || disableDragProp;
-
     // +2 for tolerance in case the animated value is slightly off
     const zIndex = useTransform(y, (val) =>
       val + 2 >= closedY ? -1 : (style?.zIndex ?? 9999)
@@ -157,22 +148,70 @@ export const Sheet = forwardRef<any, SheetProps>(
       });
     });
 
+    const keyboard = useKeyboardAvoidance({
+      isEnabled: isOpen && avoidKeyboard,
+      containerRef: sheetRef,
+      onWillOpenKeyboard: async () => {
+        const lastSnapPoint = snapPoints[snapPoints.length - 1];
+
+        /**
+         * If there are snap points and the sheet is not already at the last snap point,
+         * move it there to make sure the focused input is not covered by the keyboard
+         */
+        if (lastSnapPoint && lastSnapPoint.snapIndex !== currentSnap) {
+          await animate(y, lastSnapPoint.snapValueY, animationOptions);
+          updateSnap(lastSnapPoint.snapIndex);
+        }
+      },
+      onDidOpenKeyboard: (focusedElement) => {
+        const sheetElement = sheetRef.current;
+        if (!sheetElement) return;
+
+        const inputRect = focusedElement.getBoundingClientRect();
+        const containerRect = sheetElement.getBoundingClientRect();
+        const scroller = sheetElement.querySelector(
+          '.react-modal-sheet-content-scroller'
+        ) as HTMLElement;
+
+        const scrollTarget = Math.max(
+          inputRect.top -
+            containerRect.top +
+            scroller.scrollTop -
+            inputRect.height,
+          0
+        );
+
+        requestAnimationFrame(() => {
+          scroller.scrollTo({ top: scrollTarget, behavior: 'smooth' });
+        });
+      },
+    });
+
+    // Disable drag if the keyboard is open to avoid weird behavior
+    const disableDrag = keyboard.isKeyboardOpen || disableDragProp;
+
     const blurActiveInput = useStableCallback(() => {
-      // Find focused input inside the sheet and blur it when dragging starts
-      // to prevent a weird ghost caret "bug" on mobile
+      /**
+       * Find focused input inside the sheet and blur it when dragging starts
+       * to prevent a weird ghost caret "bug" on mobile
+       */
       const focusedElement = document.activeElement as HTMLElement | null;
-      if (!focusedElement || !sheetRef.current) return;
-
-      const isInput =
-        focusedElement.tagName === 'INPUT' ||
-        focusedElement.tagName === 'TEXTAREA';
 
       // Only blur the focused element if it's inside the sheet
-      if (isInput && sheetRef.current.contains(focusedElement)) {
+      if (
+        focusedElement &&
+        willOpenKeyboard(focusedElement) &&
+        sheetRef.current?.contains(focusedElement)
+      ) {
         focusedElement.blur();
       }
     });
 
+    const onDragStart = useStableCallback<DragHandler>((event, info) => {
+      blurActiveInput();
+      onDragStartProp?.(event, info);
+    });
+
     const onDrag = useStableCallback<DragHandler>((event, info) => {
       onDragProp?.(event, info);
 
@@ -187,11 +226,6 @@ export const Sheet = forwardRef<any, SheetProps>(
       y.set(Math.max(currentY + info.delta.y, 0));
     });
 
-    const onDragStart = useStableCallback<DragHandler>((event, info) => {
-      blurActiveInput();
-      onDragStartProp?.(event, info);
-    });
-
     const onDragEnd = useStableCallback<DragHandler>((event, info) => {
       blurActiveInput();
       onDragEndProp?.(event, info);
@@ -277,55 +311,6 @@ export const Sheet = forwardRef<any, SheetProps>(
       snapTo,
     }));
 
-    /**
-     * If the keyboard is opened while we are in a snap point we need to ensure
-     * the sheet content is not covered by the keyboard due to being at a lower
-     * snap point. We move the sheet up enough to ensure the content is visible
-     * and move it back down when the keyboard closes.
-     */
-    useEffect(() => {
-      if (
-        isOpen &&
-        snapPoints.length > 0 &&
-        avoidKeyboard &&
-        keyboard.isKeyboardOpen
-      ) {
-        const focusedElement = document.activeElement as HTMLElement | null;
-        const visibleSheetHeight = yInverted.get() - keyboard.keyboardHeight;
-
-        // If the keyboard is covering the sheet content, move the sheet up to reveal it
-        if (visibleSheetHeight <= 0 && focusedElement) {
-          const currentY = y.get();
-          const diffY = Math.max(currentY - Math.abs(visibleSheetHeight), 0);
-
-          /**
-           * Get the position of the focused input relative to the sheet container
-           * and calculate how much we need to move the sheet up to ensure
-           * the focused input is visible above the keyboard.
-           *
-           * NOTE: RAF is needed to ensure the `top` values are correct.
-           */
-          requestAnimationFrame(() => {
-            const inputRect = focusedElement.getBoundingClientRect();
-            const sheetRect = sheetRef.current?.getBoundingClientRect();
-
-            let inputOffset = 0;
-
-            if (sheetRect) {
-              inputOffset = inputRect.top - sheetRect.top + inputRect.height;
-            }
-
-            animate(y, diffY - inputOffset, animationOptions);
-          });
-
-          // When keyboard closes animate back to the original snap point
-          return () => {
-            animate(y, currentY, animationOptions);
-          };
-        }
-      }
-    }, [isOpen, keyboard.isKeyboardOpen]);
-
     useModalEffect({
       y,
       detent,
@@ -394,6 +379,7 @@ export const Sheet = forwardRef<any, SheetProps>(
       dragProps,
       indicatorRotation,
       avoidKeyboard,
+      prefersReducedMotion,
       sheetBoundsRef,
       sheetRef,
       unstyled,