react-modal-sheet 5.1.1 → 5.2.0

package/dist/index.mjs

@@ -181,6 +181,21 @@ var isIPad = cached(function() {
 var isIOS = cached(function() {
   return isIPhone() || isIPad();
 });
+function waitForElement(className, interval = 50, maxAttempts = 20) {
+  return new Promise((resolve) => {
+    let attempts = 0;
+    const timer = setInterval(() => {
+      const element = document.getElementsByClassName(
+        className
+      )[0];
+      attempts++;
+      if (element || attempts >= maxAttempts) {
+        clearInterval(timer);
+        resolve(element);
+      }
+    }, interval);
+  });
+}
 
 // src/SheetBackdrop.tsx
 var isClickable = (props) => !!props.onClick || !!props.onTap;
@@ -255,12 +270,12 @@ function useDragConstraints() {
   const onMeasure = useCallback(() => constraints, []);
   return { ref, onMeasure };
 }
-function useScrollPosition() {
-  const ref = useRef(null);
+function useScrollPosition(options = {}) {
+  const { debounceDelay = 32, isEnabled = true } = options;
+  const [element, setElement] = useState(null);
   const [scrollPosition, setScrollPosition] = useState(void 0);
   useEffect(() => {
-    const element = ref.current;
-    if (!element) return;
+    if (!element || !isEnabled) return;
     let scrollTimeout = null;
     function determineScrollPosition(element2) {
       const { scrollTop, scrollHeight, clientHeight } = element2;
@@ -283,14 +298,21 @@ function useScrollPosition() {
       setScrollPosition(position);
     }
     function onScroll(event) {
-      if (event.currentTarget instanceof HTMLDivElement) {
+      if (event.currentTarget instanceof HTMLElement) {
         const el = event.currentTarget;
         if (scrollTimeout) clearTimeout(scrollTimeout);
-        scrollTimeout = setTimeout(() => determineScrollPosition(el), 32);
+        if (debounceDelay === 0) {
+          determineScrollPosition(el);
+        } else {
+          scrollTimeout = setTimeout(
+            () => determineScrollPosition(el),
+            debounceDelay
+          );
+        }
       }
     }
     function onTouchStart(event) {
-      if (event.currentTarget instanceof HTMLDivElement) {
+      if (event.currentTarget instanceof HTMLElement) {
         determineScrollPosition(event.currentTarget);
       }
     }
@@ -302,8 +324,11 @@ function useScrollPosition() {
       element.removeEventListener("scroll", onScroll);
       element.removeEventListener("touchstart", onTouchStart);
     };
-  }, []);
-  return { ref, scrollPosition };
+  }, [element, isEnabled]);
+  return {
+    scrollRef: (element2) => setElement(element2),
+    scrollPosition
+  };
 }
 
 // src/SheetContent.tsx
@@ -314,6 +339,8 @@ var SheetContent = forwardRef(
     children,
     style: styleProp,
     className = "",
+    scrollClassName = "",
+    scrollStyle: scrollStyleProp,
     scrollRef: scrollRefProp = null,
     unstyled,
     ...rest
@@ -358,9 +385,9 @@ var SheetContent = forwardRef(
       /* @__PURE__ */ React4.createElement(
         motion.div,
         {
-          ref: mergeRefs([scroll.ref, scrollRefProp]),
-          style: scrollStyle,
-          className: "react-modal-sheet-content-scroller"
+          ref: mergeRefs([scroll.scrollRef, scrollRefProp]),
+          style: { ...scrollStyle, ...scrollStyleProp },
+          className: `react-modal-sheet-content-scroller ${scrollClassName}`
         },
         children
       )
@@ -858,13 +885,14 @@ function useSheetState({
   }, [state]);
   return state;
 }
-function useVirtualKeyboard({
-  containerRef,
-  isEnabled = true,
-  debounceDelay = 100,
-  includeContentEditable = true,
-  visualViewportThreshold = 100
-}) {
+function useVirtualKeyboard(options = {}) {
+  const {
+    containerRef,
+    isEnabled = true,
+    debounceDelay = 100,
+    includeContentEditable = true,
+    visualViewportThreshold = 100
+  } = options;
   const [state, setState] = useState({
     isVisible: false,
     height: 0
@@ -879,11 +907,15 @@ function useVirtualKeyboard({
     const vv = window.visualViewport;
     const vk = navigator.virtualKeyboard;
     function setKeyboardInsetHeightEnv(height) {
-      var _a;
-      (_a = containerRef.current) == null ? void 0 : _a.style.setProperty(
-        "--keyboard-inset-height",
-        `${height}px`
-      );
+      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)) {
@@ -961,8 +993,20 @@ function computeSnapPoints({
   snapPointsProp,
   sheetHeight
 }) {
+  if (snapPointsProp[0] !== 0) {
+    console.error(
+      `First snap point should be 0 to ensure the sheet can be fully closed. Got: [${snapPointsProp.join(", ")}]`
+    );
+    snapPointsProp.unshift(0);
+  }
+  if (snapPointsProp[snapPointsProp.length - 1] !== 1) {
+    console.error(
+      `Last snap point should be 1 to ensure the sheet can be fully opened. Got: [${snapPointsProp.join(", ")}]`
+    );
+    snapPointsProp.push(1);
+  }
   if (sheetHeight <= 0) {
-    console.warn(
+    console.error(
       `Sheet height is ${sheetHeight}, cannot compute snap points. Make sure the sheet is mounted and has a valid height.`
     );
     return [];
@@ -1256,6 +1300,7 @@ var Sheet = forwardRef(
       isOpen,
       onOpen: async () => {
         onOpenStart == null ? void 0 : onOpenStart();
+        await waitForElement("react-modal-sheet-container");
         const initialSnapPoint = initialSnap !== void 0 ? getSnapPoint(initialSnap) : null;
         const yTo = (initialSnapPoint == null ? void 0 : initialSnapPoint.snapValueY) ?? 0;
         await animate(y, yTo, animationOptions);
@@ -1322,6 +1367,6 @@ var Sheet2 = Object.assign(Sheet, {
   Backdrop: SheetBackdrop
 });
 
-export { Sheet2 as Sheet };
+export { Sheet2 as Sheet, useScrollPosition, useVirtualKeyboard };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map