react-modal-sheet 5.4.0 → 5.5.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.4.0",
+  "version": "5.5.0",
   "license": "MIT",
   "name": "react-modal-sheet",
   "description": "Flexible bottom sheet component for your React apps",

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/constants.ts

@@ -16,4 +16,4 @@ export const REDUCED_MOTION_TWEEN_CONFIG: SheetTweenConfig = {
 
 export const DEFAULT_DRAG_CLOSE_THRESHOLD = 0.6;
 
-export const DEFAULT_DRAG_VELOCITY_THRESHOLD = 500;
+export const DEFAULT_DRAG_VELOCITY_THRESHOLD = 1200;

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;
+}