react-modal-sheet 5.3.1 → 5.4.1

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { motion, useMotionValue, useTransform, useReducedMotion, animate } from 'motion/react';
-import React4, { createContext, forwardRef, useRef, useState, useImperativeHandle, useEffect, useContext, useCallback, useMemo, useLayoutEffect } from 'react';
+import React4, { createContext, forwardRef, useRef, useState, useImperativeHandle, useContext, useCallback, useMemo, useEffect, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import useMeasure from 'react-use-measure';
 import { transform } from 'motion';
@@ -196,6 +196,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;
@@ -211,13 +228,16 @@ var SheetBackdrop = forwardRef(
       ...style,
       pointerEvents
     };
+    const animationProps = sheetContext.prefersReducedMotion ? {} : {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: 1 }
+    };
     return /* @__PURE__ */ React4.createElement(
       Comp,
       {
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 },
-        transition: { duration: 1 },
+        ...animationProps,
         ...rest,
         ref,
         className: `react-modal-sheet-backdrop ${className}`,
@@ -393,7 +413,7 @@ var SheetContent = 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";
@@ -516,6 +536,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] = useState({
+    isVisible: false,
+    height: 0
+  });
+  const focusedElementRef = useRef(null);
+  const debounceTimer = useRef(null);
+  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] = 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);
+    }
+  });
+  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 == null ? void 0 : onDidOpenKeyboard(focusedElement);
+    });
+  }, [isEnabled, keyboard.isKeyboardOpen, focusedElement]);
+  return keyboard;
+}
 function useSafeAreaInsets() {
   const [insets] = useState(() => {
     const fallback = { top: 0, left: 0, right: 0, bottom: 0 };
@@ -658,13 +867,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;
@@ -676,17 +885,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 = {}) {
@@ -853,9 +1051,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,
@@ -900,108 +1095,6 @@ function useSheetState({
   }, [state]);
   return state;
 }
-function useVirtualKeyboard(options = {}) {
-  const {
-    containerRef,
-    isEnabled = true,
-    debounceDelay = 100,
-    includeContentEditable = true,
-    visualViewportThreshold = 100
-  } = options;
-  const [state, setState] = useState({
-    isVisible: false,
-    height: 0
-  });
-  const focusedElementRef = useRef(null);
-  const debounceTimer = 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;
-  });
-  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({
@@ -1176,11 +1269,6 @@ var Sheet = forwardRef(
       type: "tween",
       ...reduceMotion ? REDUCED_MOTION_TWEEN_CONFIG : tweenConfig
     };
-    const keyboard = useVirtualKeyboard({
-      isEnabled: isOpen && avoidKeyboard,
-      containerRef: sheetRef
-    });
-    const disableDrag = keyboard.isKeyboardOpen || disableDragProp;
     const zIndex = useTransform(
       y,
       (val) => val + 2 >= closedY ? -1 : (style == null ? void 0 : style.zIndex) ?? 9999
@@ -1224,14 +1312,45 @@ var Sheet = 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 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();
@@ -1240,10 +1359,6 @@ var Sheet = 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);
@@ -1300,29 +1415,6 @@ var Sheet = forwardRef(
       height: sheetHeight,
       snapTo
     }));
-    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;
-            }
-            animate(y, diffY - inputOffset, animationOptions);
-          });
-          return () => {
-            animate(y, currentY, animationOptions);
-          };
-        }
-      }
-    }, [isOpen, keyboard.isKeyboardOpen]);
     useModalEffect({
       y,
       detent,
@@ -1369,6 +1461,7 @@ var Sheet = forwardRef(
       dragProps,
       indicatorRotation,
       avoidKeyboard,
+      prefersReducedMotion,
       sheetBoundsRef,
       sheetRef,
       unstyled,