react-modal-sheet 5.3.1 → 5.4.0

package/dist/index.mjs

@@ -211,13 +211,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}`,
@@ -516,6 +519,36 @@ function useDimensions() {
   }, []);
   return dimensions;
 }
+function useFocusedInput({
+  isEnabled,
+  sheetRef
+}) {
+  const [focusedInput, setFocusedInput] = useState(null);
+  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 handleFocusOut = (event) => {
+      const focusedElement = event.target;
+      if (focusedElement === focusedInput) {
+        setFocusedInput(null);
+      }
+    };
+    document.addEventListener("focusin", handleFocusIn);
+    document.addEventListener("focusout", handleFocusOut);
+    return () => {
+      document.removeEventListener("focusin", handleFocusIn);
+      document.removeEventListener("focusout", handleFocusOut);
+    };
+  }, [isEnabled, focusedInput]);
+  return focusedInput;
+}
 function useSafeAreaInsets() {
   const [insets] = useState(() => {
     const fallback = { top: 0, left: 0, right: 0, bottom: 0 };
@@ -1300,29 +1333,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,
@@ -1334,6 +1344,41 @@ var Sheet = forwardRef(
     usePreventScroll({
       isDisabled: disableScrollLocking || !isOpen
     });
+    const focusedInput = useFocusedInput({
+      isEnabled: isOpen && avoidKeyboard,
+      sheetRef
+    });
+    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 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 () => {
@@ -1369,6 +1414,7 @@ var Sheet = forwardRef(
       dragProps,
       indicatorRotation,
       avoidKeyboard,
+      prefersReducedMotion,
       sheetBoundsRef,
       sheetRef,
       unstyled,