react-modal-sheet 5.4.0 → 5.4.1

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;
@@ -403,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";
@@ -526,35 +543,194 @@ function useDimensions() {
   }, []);
   return dimensions;
 }
-function useFocusedInput({
-  isEnabled,
-  sheetRef
-}) {
-  const [focusedInput, setFocusedInput] = React4.useState(null);
+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(() => {
-    if (!isEnabled) return;
-    const handleFocusIn = (event) => {
-      var _a;
-      const focusedElement = event.target;
-      const isInput = (focusedElement == null ? void 0 : focusedElement.tagName) === "INPUT" || (focusedElement == null ? void 0 : focusedElement.tagName) === "TEXTAREA";
-      if (isInput && ((_a = sheetRef.current) == null ? void 0 : _a.contains(focusedElement))) {
-        setFocusedInput(focusedElement);
+    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`);
       }
-    };
-    const handleFocusOut = (event) => {
-      const focusedElement = event.target;
-      if (focusedElement === focusedInput) {
-        setFocusedInput(null);
+    }
+    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, focusedInput]);
-  return focusedInput;
+  }, [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(() => {
@@ -698,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;
@@ -716,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 = {}) {
@@ -893,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,
@@ -940,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({
@@ -1216,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
@@ -1264,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();
@@ -1280,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);
@@ -1351,41 +1433,6 @@ var Sheet = React4.forwardRef(
     usePreventScroll({
       isDisabled: disableScrollLocking || !isOpen
     });
-    const focusedInput = useFocusedInput({
-      isEnabled: isOpen && avoidKeyboard,
-      sheetRef
-    });
-    React4.useEffect(() => {
-      if (!isOpen || !avoidKeyboard) {
-        return;
-      }
-      async function adjustSheetForKeyboard() {
-        const sheetElement = sheetRef.current;
-        if (!sheetElement || !focusedInput || !keyboard.isKeyboardOpen) {
-          return;
-        }
-        const lastSnapPoint = snapPoints[snapPoints.length - 1];
-        if (lastSnapPoint) {
-          await react.animate(y, lastSnapPoint.snapValueY, animationOptions);
-          updateSnap(lastSnapPoint.snapIndex);
-        }
-        requestAnimationFrame(() => {
-          const inputRect = focusedInput.getBoundingClientRect();
-          const sheetRect = sheetElement.getBoundingClientRect();
-          const scroller = sheetElement.querySelector(
-            ".react-modal-sheet-content-scroller"
-          );
-          const scrollTarget = Math.max(
-            inputRect.top - sheetRect.top + scroller.scrollTop - inputRect.height,
-            0
-          );
-          requestAnimationFrame(() => {
-            scroller.scrollTo({ top: scrollTarget, behavior: "smooth" });
-          });
-        });
-      }
-      adjustSheetForKeyboard();
-    }, [isOpen, avoidKeyboard, keyboard.isKeyboardOpen, focusedInput]);
     const state = useSheetState({
       isOpen,
       onOpen: async () => {