react-modal-sheet 5.4.0 → 5.5.0

package/dist/index.js

@@ -137,7 +137,7 @@ var REDUCED_MOTION_TWEEN_CONFIG = {
   duration: 0.01
 };
 var DEFAULT_DRAG_CLOSE_THRESHOLD = 0.6;
-var DEFAULT_DRAG_VELOCITY_THRESHOLD = 500;
+var DEFAULT_DRAG_VELOCITY_THRESHOLD = 1200;
 
 // src/utils.ts
 function applyStyles(styles2, unstyled) {
@@ -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({
@@ -1097,73 +1157,145 @@ function computeSnapPoints({
     // Y value is inverted as `y = 0` means sheet is at the top
   }));
 }
-function findClosestSnapPoint({
-  snapPoints,
-  currentY
-}) {
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function sign(value) {
+  if (value > 0) return 1;
+  if (value < 0) return -1;
+  return 0;
+}
+function toAscendingYSnaps(snapPoints) {
+  return snapPoints.slice().sort((a, b) => a.snapValueY - b.snapValueY);
+}
+function findNearestSnapByY(snapPoints, y) {
   return snapPoints.reduce(
-    (closest, snap) => Math.abs(snap.snapValueY - currentY) < Math.abs(closest.snapValueY - currentY) ? snap : closest
+    (closest, snap) => Math.abs(snap.snapValueY - y) < Math.abs(closest.snapValueY - y) ? snap : closest
   );
 }
-function findNextSnapPointInDirection({
+function findNearestSnapAboveY(snapPoints, y) {
+  const snaps = toAscendingYSnaps(snapPoints);
+  for (let i = snaps.length - 1; i >= 0; i--) {
+    if (snaps[i].snapValueY < y) {
+      return snaps[i];
+    }
+  }
+  return null;
+}
+function findNearestSnapBelowY(snapPoints, y) {
+  const snaps = toAscendingYSnaps(snapPoints);
+  for (let i = 0; i < snaps.length; i++) {
+    if (snaps[i].snapValueY > y) {
+      return snaps[i];
+    }
+  }
+  return null;
+}
+function resolveDirection({
+  offsetY,
+  velocityY,
+  deltaY
+}) {
+  if (Math.abs(velocityY) > 50) return sign(velocityY);
+  const offsetDirection = sign(offsetY);
+  if (offsetDirection !== 0) return offsetDirection;
+  return sign(deltaY);
+}
+function classifyDragEnd({
   y,
+  info,
+  sheetHeight,
   snapPoints,
-  dragDirection
+  dragVelocityThreshold,
+  dragCloseThreshold
 }) {
-  if (dragDirection === "down") {
-    return snapPoints.slice().reverse().find((s) => s.snapValueY > y);
-  } else {
-    return snapPoints.find((s) => s.snapValueY < y);
+  const flickVelocity = dragVelocityThreshold;
+  const strongFlickVelocity = Math.max(2e3, flickVelocity);
+  const distanceCommitRatio = 0.35;
+  const predictionTime = 0.2;
+  const minDragDistance = 20;
+  const snapStickiness = 24;
+  const minY = 0;
+  const maxY = sheetHeight;
+  const offsetY = info.offset.y;
+  const deltaY = info.delta.y;
+  const velocityY = info.velocity.y;
+  const predictedY = clamp(y + velocityY * predictionTime, minY, maxY);
+  const absVelocity = Math.abs(velocityY);
+  const direction = resolveDirection({ offsetY, velocityY, deltaY });
+  const isStrongFlick = absVelocity > strongFlickVelocity;
+  const isFlick = absVelocity > flickVelocity;
+  if (snapPoints.length === 0) {
+    if (isFlick) {
+      return {
+        yTo: direction < 0 ? minY : maxY,
+        snapIndex: void 0
+      };
+    }
+    const midpoint = minY + (maxY - minY) * dragCloseThreshold;
+    return {
+      yTo: predictedY < midpoint ? minY : maxY,
+      snapIndex: void 0
+    };
   }
-}
-function handleHighVelocityDrag({
-  dragDirection,
-  snapPoints
-}) {
-  const bottomSnapPoint = snapPoints[0];
-  const topSnapPoint = snapPoints[snapPoints.length - 1];
-  if (dragDirection === "down") {
+  const nearestSnap = findNearestSnapByY(snapPoints, y);
+  if (!isFlick && Math.abs(offsetY) < minDragDistance) {
     return {
-      yTo: bottomSnapPoint.snapValueY,
-      snapIndex: bottomSnapPoint.snapIndex
+      yTo: nearestSnap.snapValueY,
+      snapIndex: nearestSnap.snapIndex
     };
   }
-  return {
-    yTo: topSnapPoint.snapValueY,
-    snapIndex: topSnapPoint.snapIndex
-  };
-}
-function handleLowVelocityDrag({
-  currentSnapPoint,
-  currentY,
-  dragDirection,
-  snapPoints,
-  velocity
-}) {
-  const closestSnapRelativeToCurrentY = findClosestSnapPoint({
-    snapPoints,
-    currentY
-  });
-  if (Math.abs(velocity) < 20) {
+  if (!isFlick && Math.abs(y - nearestSnap.snapValueY) < snapStickiness) {
     return {
-      yTo: closestSnapRelativeToCurrentY.snapValueY,
-      snapIndex: closestSnapRelativeToCurrentY.snapIndex
+      yTo: nearestSnap.snapValueY,
+      snapIndex: nearestSnap.snapIndex
     };
   }
-  const nextSnapInDirectionRelativeToCurrentY = findNextSnapPointInDirection({
-    y: currentY,
-    snapPoints,
-    dragDirection
-  });
-  if (nextSnapInDirectionRelativeToCurrentY) {
+  if (isStrongFlick) {
+    const target = direction < 0 ? minY : maxY;
+    const targetSnap = findNearestSnapByY(snapPoints, target);
     return {
-      yTo: nextSnapInDirectionRelativeToCurrentY.snapValueY,
-      snapIndex: nextSnapInDirectionRelativeToCurrentY.snapIndex
+      yTo: target,
+      snapIndex: targetSnap.snapIndex
     };
   }
+  if (isFlick) {
+    const nextSnap2 = direction < 0 ? findNearestSnapAboveY(snapPoints, y) : findNearestSnapBelowY(snapPoints, y);
+    const fallbackY = direction < 0 ? minY : maxY;
+    const fallbackSnap = findNearestSnapByY(snapPoints, fallbackY);
+    const targetSnap = nextSnap2 ?? fallbackSnap;
+    return {
+      yTo: targetSnap.snapValueY,
+      snapIndex: targetSnap.snapIndex
+    };
+  }
+  const firstSnap = toAscendingYSnaps(snapPoints)[0];
+  const lastSnap = toAscendingYSnaps(snapPoints)[snapPoints.length - 1];
+  const prevSnap = findNearestSnapAboveY(snapPoints, y) ?? firstSnap;
+  const nextSnap = findNearestSnapBelowY(snapPoints, y) ?? lastSnap;
+  if (prevSnap.snapIndex === nextSnap.snapIndex) {
+    return {
+      yTo: prevSnap.snapValueY,
+      snapIndex: prevSnap.snapIndex
+    };
+  }
+  const range = nextSnap.snapValueY - prevSnap.snapValueY;
+  const progress = range > 0 ? (y - prevSnap.snapValueY) / range : 0;
+  let selectedSnap = nearestSnap;
+  if (direction > 0) {
+    selectedSnap = progress > distanceCommitRatio ? nextSnap : prevSnap;
+  } else if (direction < 0) {
+    selectedSnap = progress < 1 - distanceCommitRatio ? prevSnap : nextSnap;
+  }
+  if (absVelocity > 200) {
+    const predictedSnap = findNearestSnapByY(snapPoints, predictedY);
+    if (Math.abs(predictedSnap.snapValueY - y) < Math.abs(selectedSnap.snapValueY - y)) {
+      selectedSnap = predictedSnap;
+    }
+  }
   return {
-    yTo: currentSnapPoint.snapValueY,
-    snapIndex: currentSnapPoint.snapIndex
+    yTo: selectedSnap.snapValueY,
+    snapIndex: selectedSnap.snapIndex
   };
 }
 
@@ -1216,11 +1348,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 +1391,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,53 +1438,29 @@ 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);
       const currentY = y.get();
-      let yTo = 0;
-      const currentSnapPoint = currentSnap !== void 0 ? getSnapPoint(currentSnap) : null;
-      if (currentSnapPoint) {
-        const dragOffsetDirection = info.offset.y > 0 ? "down" : "up";
-        const dragVelocityDirection = info.velocity.y > 0 ? "down" : "up";
-        const isHighVelocity = Math.abs(info.velocity.y) > dragVelocityThreshold;
-        let result;
-        if (isHighVelocity) {
-          result = handleHighVelocityDrag({
-            snapPoints,
-            dragDirection: dragVelocityDirection
-          });
-        } else {
-          result = handleLowVelocityDrag({
-            currentSnapPoint,
-            currentY,
-            dragDirection: dragOffsetDirection,
-            snapPoints,
-            velocity: info.velocity.y
-          });
-        }
-        yTo = result.yTo;
-        if (disableDismiss && yTo + 1 >= sheetHeight) {
-          const bottomSnapPoint = snapPoints.find((s) => s.snapValue > 0);
-          if (bottomSnapPoint) {
-            yTo = bottomSnapPoint.snapValueY;
-            updateSnap(bottomSnapPoint.snapIndex);
-          } else {
-            yTo = currentY;
-          }
-        } else if (result.snapIndex !== void 0) {
-          updateSnap(result.snapIndex);
-        }
-      } else if (info.velocity.y > dragVelocityThreshold || currentY > sheetHeight * dragCloseThreshold) {
-        if (disableDismiss) {
-          yTo = 0;
+      const result = classifyDragEnd({
+        y: currentY,
+        info,
+        sheetHeight,
+        dragCloseThreshold,
+        snapPoints,
+        dragVelocityThreshold
+      });
+      let yTo = result.yTo;
+      if (disableDismiss && yTo + 1 >= sheetHeight) {
+        const bottomSnapPoint = snapPoints.find((s) => s.snapValue > 0);
+        if (bottomSnapPoint) {
+          yTo = bottomSnapPoint.snapValueY;
+          updateSnap(bottomSnapPoint.snapIndex);
         } else {
-          yTo = closedY;
+          yTo = currentY;
         }
+      } else if (result.snapIndex !== void 0) {
+        updateSnap(result.snapIndex);
       }
       react.animate(y, yTo, animationOptions);
       if (yTo + 1 >= sheetHeight && !disableDismiss) {
@@ -1351,41 +1485,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 () => {