react-modal-sheet 5.3.1 → 5.4.1

package/README.md

@@ -423,18 +423,21 @@ function KeyboardExample() {
 }
 ```
 
-The keyboard avoidance feature:
+Virtual keyboard avoidance consists of several key features:
 
 - Uses the `env(keyboard-inset-height)` from [Virtual Keyboard API](https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard_API) and fallbacks to [Visual Viewport API](https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API) and custom `keyboard-inset-height` CSS environment variable.
 - Works automatically on mobile devices with virtual keyboard support.
 - Applies dynamic padding to keep content visible when the keyboard opens.
+- Scrolls the focused input into view if it's covered by the keyboard.
 - Disables drag gestures while the keyboard is open to prevent glitches.
-- When using snap points if the sheet is at a snap point that would be covered by the keyboard, **the sheet will be automatically moved up to ensure the content is visible and then moved back down when the keyboard closes.**
+- When using snap points, the sheet will be automatically moved up to the last snap point to ensure that all content is reachable (even when the content is scrollable) within the sheet when the keyboard is open.
 
-If you need to disable keyboard avoidance, set `avoidKeyboard={false}`.
-
-> [!IMPORTANT]
-> If your sheet content is very long and some inputs are below the keyboard even after adding the padding, you might need to scroll the content into view manually when an input is focused.
+> [!NOTE]
+> Avoiding the virtual keyboard is a complex problem and the built-in avoidance may not work perfectly in all cases or on all devices. The library does its best to handle the most common scenarios but there may be edge cases where it doesn't work as expected.
+>
+> Mobile browsers, eg. Android Chrome, may try to automatically move the focused input into view when the keyboard opens which might interfere with the built-in keyboard avoidance behavior causing the sheet content to jump around.
+>
+> If you need to disable the built-in keyboard avoidance, set `avoidKeyboard={false}`.
 
 #### Managing virtual keyboard manually
 

package/dist/index.d.mts

@@ -139,11 +139,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

package/dist/index.d.ts

@@ -139,11 +139,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

package/dist/index.js

@@ -203,6 +203,23 @@ function waitForElement(className, interval = 50, maxAttempts = 20) {
     }, interval);
   });
 }
+var nonTextInputTypes = /* @__PURE__ */ new Set([
+  "checkbox",
+  "radio",
+  "range",
+  "color",
+  "file",
+  "image",
+  "button",
+  "submit",
+  "reset"
+]);
+function willOpenKeyboard(target) {
+  return target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
+}
+function isHTTPS() {
+  return typeof window !== "undefined" && window.isSecureContext;
+}
 
 // src/SheetBackdrop.tsx
 var isClickable = (props) => !!props.onClick || !!props.onTap;
@@ -218,13 +235,16 @@ var SheetBackdrop = React4.forwardRef(
       ...style,
       pointerEvents
     };
+    const animationProps = sheetContext.prefersReducedMotion ? {} : {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: 1 }
+    };
     return /* @__PURE__ */ React4__default.default.createElement(
       Comp,
       {
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 },
-        transition: { duration: 1 },
+        ...animationProps,
         ...rest,
         ref,
         className: `react-modal-sheet-backdrop ${className}`,
@@ -400,7 +420,7 @@ var SheetContent = React4.forwardRef(
     };
     const scrollStyle = applyStyles(styles.scroller, isUnstyled);
     if (sheetContext.avoidKeyboard) {
-      scrollStyle.paddingBottom = "env(keyboard-inset-height, var(--keyboard-inset-height, 0px))";
+      scrollStyle.paddingBottom = isHTTPS() ? "env(keyboard-inset-height, var(--keyboard-inset-height, 0px))" : "var(--keyboard-inset-height, 0px)";
     }
     if (disableScroll) {
       scrollStyle.overflowY = "hidden";
@@ -523,6 +543,195 @@ function useDimensions() {
   }, []);
   return dimensions;
 }
+var virtualKeyboardOverlayUsers = 0;
+var initialVirtualKeyboardOverlaysContent = null;
+function useVirtualKeyboard(options = {}) {
+  const {
+    containerRef,
+    isEnabled = true,
+    debounceDelay = 100,
+    visualViewportThreshold = 100
+  } = options;
+  const [state, setState] = React4.useState({
+    isVisible: false,
+    height: 0
+  });
+  const focusedElementRef = React4.useRef(null);
+  const debounceTimer = React4.useRef(null);
+  React4.useEffect(() => {
+    const vv = window.visualViewport;
+    const vk = getVirtualKeyboardApi();
+    function setKeyboardInsetHeightEnv(height) {
+      const element = (containerRef == null ? void 0 : containerRef.current) || document.documentElement;
+      if (vk) {
+        element.style.setProperty(
+          "--keyboard-inset-height",
+          `env(keyboard-inset-height, ${height}px)`
+        );
+      } else {
+        element.style.setProperty("--keyboard-inset-height", `${height}px`);
+      }
+    }
+    function setKeyboardState(nextState) {
+      setState(
+        (prevState) => prevState.isVisible === nextState.isVisible && prevState.height === nextState.height ? prevState : nextState
+      );
+    }
+    function resetKeyboardState() {
+      focusedElementRef.current = null;
+      setKeyboardInsetHeightEnv(0);
+      setKeyboardState({ isVisible: false, height: 0 });
+    }
+    if (!isEnabled) {
+      resetKeyboardState();
+      return;
+    }
+    function updateKeyboardState() {
+      if (debounceTimer.current) {
+        clearTimeout(debounceTimer.current);
+      }
+      debounceTimer.current = setTimeout(() => {
+        const active = getActiveElement() ?? focusedElementRef.current;
+        const inputIsFocused = active ? willOpenKeyboard(active) : false;
+        if (!inputIsFocused) {
+          resetKeyboardState();
+          return;
+        }
+        focusedElementRef.current = active;
+        if (vk == null ? void 0 : vk.overlaysContent) {
+          const keyboardHeight = vk.boundingRect.height;
+          setKeyboardInsetHeightEnv(keyboardHeight);
+          setKeyboardState({ isVisible: true, height: keyboardHeight });
+          return;
+        }
+        if (vv) {
+          const heightDiff = window.innerHeight - vv.height;
+          if (heightDiff > visualViewportThreshold) {
+            setKeyboardInsetHeightEnv(heightDiff);
+            setKeyboardState({ isVisible: true, height: heightDiff });
+            return;
+          }
+        }
+        resetKeyboardState();
+      }, debounceDelay);
+    }
+    function handleFocusIn(e) {
+      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);
+    }
+    if (vk) {
+      if (virtualKeyboardOverlayUsers === 0) {
+        initialVirtualKeyboardOverlaysContent = vk.overlaysContent;
+        vk.overlaysContent = true;
+      }
+      virtualKeyboardOverlayUsers++;
+      vk.addEventListener("geometrychange", updateKeyboardState);
+    }
+    focusedElementRef.current = getActiveElement();
+    updateKeyboardState();
+    return () => {
+      document.removeEventListener("focusin", handleFocusIn);
+      document.removeEventListener("focusout", handleFocusOut);
+      if (vv) {
+        vv.removeEventListener("resize", updateKeyboardState);
+        vv.removeEventListener("scroll", updateKeyboardState);
+      }
+      if (vk) {
+        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, isEnabled, visualViewportThreshold]);
+  return {
+    keyboardHeight: state.height,
+    isKeyboardOpen: state.isVisible
+  };
+}
+function getVirtualKeyboardApi() {
+  return isHTTPS() && "virtualKeyboard" in navigator ? navigator.virtualKeyboard : null;
+}
+function getActiveElement() {
+  var _a;
+  let activeElement = document.activeElement;
+  while (activeElement instanceof HTMLElement && ((_a = activeElement.shadowRoot) == null ? void 0 : _a.activeElement)) {
+    activeElement = activeElement.shadowRoot.activeElement;
+  }
+  return activeElement && willOpenKeyboard(activeElement) ? activeElement : null;
+}
+
+// src/hooks/use-keyboard-avoidance.ts
+function useKeyboardAvoidance({
+  isEnabled,
+  containerRef,
+  onWillOpenKeyboard,
+  onDidOpenKeyboard
+}) {
+  const [focusedElement, setFocusedElement] = React4.useState(
+    null
+  );
+  const keyboard = useVirtualKeyboard({
+    isEnabled,
+    containerRef
+  });
+  const handleFocusIn = useStableCallback(async (event) => {
+    var _a;
+    const element = event.target;
+    if (willOpenKeyboard(element) && ((_a = containerRef.current) == null ? void 0 : _a.contains(element))) {
+      await (onWillOpenKeyboard == null ? void 0 : onWillOpenKeyboard(event));
+      setFocusedElement(element);
+    }
+  });
+  const handleFocusOut = useStableCallback((event) => {
+    const element = event.target;
+    if (focusedElement === element) {
+      setFocusedElement(null);
+    }
+  });
+  React4.useEffect(() => {
+    if (!isEnabled) return;
+    document.addEventListener("focusin", handleFocusIn);
+    document.addEventListener("focusout", handleFocusOut);
+    return () => {
+      document.removeEventListener("focusin", handleFocusIn);
+      document.removeEventListener("focusout", handleFocusOut);
+    };
+  }, [isEnabled]);
+  React4.useEffect(() => {
+    const containerElement = containerRef.current;
+    if (!isEnabled || !focusedElement || !containerElement || !keyboard.isKeyboardOpen) {
+      return;
+    }
+    requestAnimationFrame(() => {
+      onDidOpenKeyboard == null ? void 0 : onDidOpenKeyboard(focusedElement);
+    });
+  }, [isEnabled, keyboard.isKeyboardOpen, focusedElement]);
+  return keyboard;
+}
 function useSafeAreaInsets() {
   const [insets] = React4.useState(() => {
     const fallback = { top: 0, left: 0, right: 0, bottom: 0 };
@@ -665,13 +874,13 @@ function isScrollable(node, checkForOverflow) {
     return false;
   }
   const style = window.getComputedStyle(node);
-  let isScrollable2 = /(auto|scroll)/.test(
+  let scrollable = /(auto|scroll)/.test(
     style.overflow + style.overflowX + style.overflowY
   );
-  if (isScrollable2 && checkForOverflow) {
-    isScrollable2 = node.scrollHeight !== node.clientHeight || node.scrollWidth !== node.clientWidth;
+  if (scrollable && checkForOverflow) {
+    scrollable = node.scrollHeight !== node.clientHeight || node.scrollWidth !== node.clientWidth;
   }
-  return isScrollable2;
+  return scrollable;
 }
 function getScrollParent(node, checkForOverflow) {
   let scrollableNode = node;
@@ -683,17 +892,6 @@ function getScrollParent(node, checkForOverflow) {
   }
   return scrollableNode || document.scrollingElement || document.documentElement;
 }
-var nonTextInputTypes = /* @__PURE__ */ new Set([
-  "checkbox",
-  "radio",
-  "range",
-  "color",
-  "file",
-  "image",
-  "button",
-  "submit",
-  "reset"
-]);
 var preventScrollCount = 0;
 var restore;
 function usePreventScroll(options = {}) {
@@ -860,9 +1058,6 @@ function scrollIntoView(target) {
     target = scrollable.parentElement;
   }
 }
-function willOpenKeyboard(target) {
-  return target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
-}
 function useSheetState({
   isOpen,
   onClosed: _onClosed,
@@ -907,108 +1102,6 @@ function useSheetState({
   }, [state]);
   return state;
 }
-function useVirtualKeyboard(options = {}) {
-  const {
-    containerRef,
-    isEnabled = true,
-    debounceDelay = 100,
-    includeContentEditable = true,
-    visualViewportThreshold = 100
-  } = options;
-  const [state, setState] = React4.useState({
-    isVisible: false,
-    height: 0
-  });
-  const focusedElementRef = React4.useRef(null);
-  const debounceTimer = React4.useRef(null);
-  const isTextInput = useStableCallback((el) => {
-    return (el == null ? void 0 : el.tagName) === "INPUT" || (el == null ? void 0 : el.tagName) === "TEXTAREA" || includeContentEditable && el instanceof HTMLElement && el.isContentEditable;
-  });
-  React4.useEffect(() => {
-    if (!isEnabled) return;
-    const vv = window.visualViewport;
-    const vk = navigator.virtualKeyboard;
-    function setKeyboardInsetHeightEnv(height) {
-      const element = (containerRef == null ? void 0 : containerRef.current) || document.documentElement;
-      if (window.isSecureContext) {
-        element.style.setProperty(
-          "--keyboard-inset-height",
-          `env(keyboard-inset-height, ${height}px)`
-        );
-      } else {
-        element.style.setProperty("--keyboard-inset-height", `${height}px`);
-      }
-    }
-    function handleFocusIn(e) {
-      if (e.target instanceof HTMLElement && isTextInput(e.target)) {
-        focusedElementRef.current = e.target;
-        updateKeyboardState();
-      }
-    }
-    function handleFocusOut() {
-      focusedElementRef.current = null;
-      updateKeyboardState();
-    }
-    function updateKeyboardState() {
-      if (debounceTimer.current) {
-        clearTimeout(debounceTimer.current);
-      }
-      debounceTimer.current = setTimeout(() => {
-        const active = focusedElementRef.current;
-        const inputIsFocused = isTextInput(active);
-        if (!inputIsFocused) {
-          setKeyboardInsetHeightEnv(0);
-          setState({ isVisible: false, height: 0 });
-          return;
-        }
-        if (vv) {
-          const heightDiff = window.innerHeight - vv.height;
-          if (heightDiff > visualViewportThreshold) {
-            setKeyboardInsetHeightEnv(heightDiff);
-            setState({ isVisible: true, height: heightDiff });
-          } else {
-            setKeyboardInsetHeightEnv(0);
-            setState({ isVisible: false, height: 0 });
-          }
-        }
-      }, debounceDelay);
-    }
-    window.addEventListener("focusin", handleFocusIn);
-    window.addEventListener("focusout", handleFocusOut);
-    if (vv) {
-      vv.addEventListener("resize", updateKeyboardState);
-      vv.addEventListener("scroll", updateKeyboardState);
-    }
-    let currentOverlaysContent = false;
-    if (vk) {
-      currentOverlaysContent = vk.overlaysContent;
-      vk.overlaysContent = true;
-    }
-    return () => {
-      window.removeEventListener("focusin", handleFocusIn);
-      window.removeEventListener("focusout", handleFocusOut);
-      if (vv) {
-        vv.removeEventListener("resize", updateKeyboardState);
-        vv.removeEventListener("scroll", updateKeyboardState);
-      }
-      if (vk) {
-        vk.overlaysContent = currentOverlaysContent;
-      }
-      if (debounceTimer.current) {
-        clearTimeout(debounceTimer.current);
-      }
-    };
-  }, [
-    debounceDelay,
-    includeContentEditable,
-    isEnabled,
-    visualViewportThreshold
-  ]);
-  return {
-    keyboardHeight: state.height,
-    isKeyboardOpen: state.isVisible
-  };
-}
 
 // src/snap.ts
 function computeSnapPoints({
@@ -1183,11 +1276,6 @@ var Sheet = React4.forwardRef(
       type: "tween",
       ...reduceMotion ? REDUCED_MOTION_TWEEN_CONFIG : tweenConfig
     };
-    const keyboard = useVirtualKeyboard({
-      isEnabled: isOpen && avoidKeyboard,
-      containerRef: sheetRef
-    });
-    const disableDrag = keyboard.isKeyboardOpen || disableDragProp;
     const zIndex = react.useTransform(
       y,
       (val) => val + 2 >= closedY ? -1 : (style == null ? void 0 : style.zIndex) ?? 9999
@@ -1231,14 +1319,45 @@ var Sheet = React4.forwardRef(
         onComplete: () => updateSnap(snapIndex)
       });
     });
+    const keyboard = useKeyboardAvoidance({
+      isEnabled: isOpen && avoidKeyboard,
+      containerRef: sheetRef,
+      onWillOpenKeyboard: async () => {
+        const lastSnapPoint = snapPoints[snapPoints.length - 1];
+        if (lastSnapPoint && lastSnapPoint.snapIndex !== currentSnap) {
+          await react.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"
+        );
+        const scrollTarget = Math.max(
+          inputRect.top - containerRect.top + scroller.scrollTop - inputRect.height,
+          0
+        );
+        requestAnimationFrame(() => {
+          scroller.scrollTo({ top: scrollTarget, behavior: "smooth" });
+        });
+      }
+    });
+    const disableDrag = keyboard.isKeyboardOpen || disableDragProp;
     const blurActiveInput = useStableCallback(() => {
+      var _a;
       const focusedElement = document.activeElement;
-      if (!focusedElement || !sheetRef.current) return;
-      const isInput = focusedElement.tagName === "INPUT" || focusedElement.tagName === "TEXTAREA";
-      if (isInput && sheetRef.current.contains(focusedElement)) {
+      if (focusedElement && willOpenKeyboard(focusedElement) && ((_a = sheetRef.current) == null ? void 0 : _a.contains(focusedElement))) {
         focusedElement.blur();
       }
     });
+    const onDragStart = useStableCallback((event, info) => {
+      blurActiveInput();
+      onDragStartProp == null ? void 0 : onDragStartProp(event, info);
+    });
     const onDrag = useStableCallback((event, info) => {
       onDragProp == null ? void 0 : onDragProp(event, info);
       const currentY = y.get();
@@ -1247,10 +1366,6 @@ var Sheet = React4.forwardRef(
       if (velocity < 0) indicatorRotation.set(-10);
       y.set(Math.max(currentY + info.delta.y, 0));
     });
-    const onDragStart = useStableCallback((event, info) => {
-      blurActiveInput();
-      onDragStartProp == null ? void 0 : onDragStartProp(event, info);
-    });
     const onDragEnd = useStableCallback((event, info) => {
       blurActiveInput();
       onDragEndProp == null ? void 0 : onDragEndProp(event, info);
@@ -1307,29 +1422,6 @@ var Sheet = React4.forwardRef(
       height: sheetHeight,
       snapTo
     }));
-    React4.useEffect(() => {
-      if (isOpen && snapPoints.length > 0 && avoidKeyboard && keyboard.isKeyboardOpen) {
-        const focusedElement = document.activeElement;
-        const visibleSheetHeight = yInverted.get() - keyboard.keyboardHeight;
-        if (visibleSheetHeight <= 0 && focusedElement) {
-          const currentY = y.get();
-          const diffY = Math.max(currentY - Math.abs(visibleSheetHeight), 0);
-          requestAnimationFrame(() => {
-            var _a;
-            const inputRect = focusedElement.getBoundingClientRect();
-            const sheetRect = (_a = sheetRef.current) == null ? void 0 : _a.getBoundingClientRect();
-            let inputOffset = 0;
-            if (sheetRect) {
-              inputOffset = inputRect.top - sheetRect.top + inputRect.height;
-            }
-            react.animate(y, diffY - inputOffset, animationOptions);
-          });
-          return () => {
-            react.animate(y, currentY, animationOptions);
-          };
-        }
-      }
-    }, [isOpen, keyboard.isKeyboardOpen]);
     useModalEffect({
       y,
       detent,
@@ -1376,6 +1468,7 @@ var Sheet = React4.forwardRef(
       dragProps,
       indicatorRotation,
       avoidKeyboard,
+      prefersReducedMotion,
       sheetBoundsRef,
       sheetRef,
       unstyled,