react-modal-sheet 5.1.2 → 5.2.1

package/dist/index.mjs

@@ -270,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;
@@ -298,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);
       }
     }
@@ -317,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
@@ -329,6 +339,8 @@ var SheetContent = forwardRef(
     children,
     style: styleProp,
     className = "",
+    scrollClassName = "",
+    scrollStyle: scrollStyleProp,
     scrollRef: scrollRefProp = null,
     unstyled,
     ...rest
@@ -373,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
       )
@@ -873,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
@@ -894,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)) {
@@ -1350,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