react-modal-sheet 5.1.2 → 5.2.0

package/src/hooks/use-scroll-position.ts

@@ -1,18 +1,62 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 
-export function useScrollPosition() {
-  const ref = useRef<HTMLDivElement>(null);
+type UseScrollPositionOptions = {
+  /**
+   * Debounce delay in ms for scroll event handling.
+   * @default 32
+   */
+  debounceDelay?: number;
+  /**
+   * Enable or disable the hook entirely.
+   * @default true
+   */
+  isEnabled?: boolean;
+};
+
+/**
+ * Hook to track the scroll position of an element.
+ *
+ * The scroll position can be 'top', 'bottom', 'middle', or undefined if the content is not scrollable.
+ * The hook provides a `scrollRef` callback to assign to the scrollable element.
+ *
+ * Note that the scroll position is only updated when the user stops scrolling
+ * for a short moment (debounced). You can set `debounceDelay` to `0` to disable debouncing entirely.
+ *
+ * @param options Configuration options for the hook.
+ * @returns An object containing the `scrollRef` callback and the current `scrollPosition`.
+ *
+ * @example
+ * ```tsx
+ * import { useScrollPosition } from 'react-modal-sheet';
+ *
+ * function MyComponent() {
+ *   const { scrollRef, scrollPosition } = useScrollPosition();
+ *
+ *   return (
+ *     <div>
+ *       <p>Scroll position: {scrollPosition}</p>
+ *       <div ref={scrollRef} style={{ overflowY: 'auto', maxHeight: '300px' }}>
+ *         ...long content...
+ *       </div>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useScrollPosition(options: UseScrollPositionOptions = {}) {
+  const { debounceDelay = 32, isEnabled = true } = options;
+
+  const [element, setElement] = useState<HTMLElement | null>(null);
   const [scrollPosition, setScrollPosition] = useState<
     'top' | 'bottom' | 'middle' | undefined
   >(undefined);
 
   useEffect(() => {
-    const element = ref.current;
-    if (!element) return;
+    if (!element || !isEnabled) return;
 
     let scrollTimeout: number | null = null;
 
-    function determineScrollPosition(element: HTMLDivElement) {
+    function determineScrollPosition(element: HTMLElement) {
       const { scrollTop, scrollHeight, clientHeight } = element;
       const isScrollable = scrollHeight > clientHeight;
 
@@ -42,20 +86,30 @@ export function useScrollPosition() {
     }
 
     function onScroll(event: Event) {
-      if (event.currentTarget instanceof HTMLDivElement) {
+      if (event.currentTarget instanceof HTMLElement) {
         const el = event.currentTarget;
+
         if (scrollTimeout) clearTimeout(scrollTimeout);
-        // Debounce the scroll handler
-        scrollTimeout = setTimeout(() => determineScrollPosition(el), 32);
+
+        if (debounceDelay === 0) {
+          determineScrollPosition(el);
+        } else {
+          // Debounce the scroll handler
+          scrollTimeout = setTimeout(
+            () => determineScrollPosition(el),
+            debounceDelay
+          );
+        }
       }
     }
 
     function onTouchStart(event: Event) {
-      if (event.currentTarget instanceof HTMLDivElement) {
+      if (event.currentTarget instanceof HTMLElement) {
         determineScrollPosition(event.currentTarget);
       }
     }
 
+    // Determine initial scroll position
     determineScrollPosition(element);
 
     element.addEventListener('scroll', onScroll);
@@ -66,7 +120,10 @@ export function useScrollPosition() {
       element.removeEventListener('scroll', onScroll);
       element.removeEventListener('touchstart', onTouchStart);
     };
-  }, []);
+  }, [element, isEnabled]);
 
-  return { ref, scrollPosition };
+  return {
+    scrollRef: (element: HTMLElement | null) => setElement(element),
+    scrollPosition,
+  };
 }

package/src/hooks/use-virtual-keyboard.ts

@@ -8,34 +8,68 @@ type VirtualKeyboardState = {
 
 type UseVirtualKeyboardOptions = {
   /**
-   * Ref to the container element to apply `keyboard-inset-height` CSS variable updates (required)
+   * Ref to the container element to apply `keyboard-inset-height` CSS variable updates.
+   * @default document.documentElement
    */
-  containerRef: RefObject<HTMLDivElement | null>;
+  containerRef?: RefObject<HTMLElement | null>;
   /**
-   * Enable or disable the hook entirely (default: true)
+   * Enable or disable the hook entirely.
+   * @default true
    */
   isEnabled?: boolean;
   /**
-   * Minimum pixel height difference to consider the keyboard visible (default: 100px)
+   * Minimum pixel height difference to consider the keyboard visible.
+   * @default 100
    */
   visualViewportThreshold?: number;
   /**
-   * Whether to treat contenteditable elements as text inputs (default: true)
+   * Whether to treat contenteditable elements as text inputs.
+   * @default true
    */
   includeContentEditable?: boolean;
   /**
-   * Delay in ms for debouncing viewport changes (default: 100ms)
+   * Delay in ms for debouncing viewport changes.
+   * @default 100
    */
   debounceDelay?: number;
 };
 
-export function useVirtualKeyboard({
-  containerRef,
-  isEnabled = true,
-  debounceDelay = 100,
-  includeContentEditable = true,
-  visualViewportThreshold = 100,
-}: UseVirtualKeyboardOptions) {
+/**
+ * A hook that detects virtual keyboard visibility and height.
+ * It listens to focus events and visual viewport changes to determine
+ * if a text input is focused and the keyboard is likely visible.
+ *
+ * It also sets the `--keyboard-inset-height` CSS variable on the specified container
+ * (or `:root` by default) to allow for easy styling adjustments when the keyboard is open.
+ *
+ * @param options Configuration options for the hook.
+ * @returns An object containing `isKeyboardOpen` and `keyboardHeight`.
+ *
+ * @example
+ * ```tsx
+ * import { useVirtualKeyboard } from 'react-modal-sheet';
+ *
+ * function MyComponent() {
+ *   const { isKeyboardOpen, keyboardHeight } = useVirtualKeyboard();
+ *
+ *   return (
+ *     <div>
+ *       <p>Keyboard is {isKeyboardOpen ? 'open' : 'closed'}</p>
+ *       <p>Keyboard height: {keyboardHeight}px</p>
+ *    </div>
+ *  );
+ * }
+ * ```
+ */
+export function useVirtualKeyboard(options: UseVirtualKeyboardOptions = {}) {
+  const {
+    containerRef,
+    isEnabled = true,
+    debounceDelay = 100,
+    includeContentEditable = true,
+    visualViewportThreshold = 100,
+  } = options;
+
   const [state, setState] = useState<VirtualKeyboardState>({
     isVisible: false,
     height: 0,
@@ -61,10 +95,17 @@ export function useVirtualKeyboard({
     const vk = (navigator as any).virtualKeyboard;
 
     function setKeyboardInsetHeightEnv(height: number) {
-      containerRef.current?.style.setProperty(
-        '--keyboard-inset-height',
-        `${height}px`
-      );
+      const element = containerRef?.current || document.documentElement;
+
+      // Virtual Keyboard API is only available in secure context
+      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: FocusEvent) {

package/src/index.tsx

@@ -23,6 +23,9 @@ export const Sheet: SheetCompound = Object.assign(SheetBase, {
   Backdrop: SheetBackdrop,
 });
 
+export { useScrollPosition } from './hooks/use-scroll-position';
+export { useVirtualKeyboard } from './hooks/use-virtual-keyboard';
+
 // Export types
 export type {
   SheetBackdropProps,

package/src/types.tsx

@@ -1,6 +1,13 @@
 import {
-  type CSSProperties,
+  type DragHandler,
+  type EasingDefinition,
+  type MotionProps,
+  type MotionValue,
+  type motion,
+} from 'motion/react';
+import {
   type ComponentPropsWithoutRef,
+  type CSSProperties,
   type ForwardRefExoticComponent,
   type FunctionComponent,
   type HTMLAttributes,
@@ -9,14 +16,6 @@ import {
   type RefObject,
 } from 'react';
 
-import {
-  type DragHandler,
-  type EasingDefinition,
-  type MotionProps,
-  type MotionValue,
-  type motion,
-} from 'motion/react';
-
 export type SheetDetent = 'default' | 'full' | 'content';
 
 type CommonProps = {
@@ -76,6 +75,8 @@ export type SheetContentProps = MotionCommonProps &
     disableDrag?: boolean | ((args: SheetStateInfo) => boolean);
     disableScroll?: boolean | ((args: SheetStateInfo) => boolean);
     scrollRef?: RefObject<HTMLDivElement | null>;
+    scrollClassName?: string;
+    scrollStyle?: CSSProperties;
   };
 
 export type SheetBackdropProps = MotionCommonProps & CommonProps;