@seed-design/react-drawer 1.0.1 → 1.0.3

package/lib/{Drawer-12s-BXSK15mB.cjs → Drawer-12s-D1dD-wen.cjs}

@@ -72,6 +72,21 @@ const WINDOW_TOP_OFFSET = 26;
 const DRAG_CLASS = "seed-dragging";
 
 const cache = new WeakMap();
+// HTML input types that do not cause the software keyboard to appear.
+const nonTextInputTypes = new Set([
+    "checkbox",
+    "radio",
+    "range",
+    "color",
+    "file",
+    "image",
+    "button",
+    "submit",
+    "reset"
+]);
+function isInput(target) {
+    return target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
+}
 function set(el, styles, ignoreCache = false) {
     if (!el || !(el instanceof HTMLElement)) return;
     let originalStyles = {};
@@ -246,255 +261,10 @@ let previousBodyPosition = null;
     };
 }
 
-// This code comes from https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePreventScroll.ts
-const KEYBOARD_BUFFER = 24;
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
-function chain(...callbacks) {
-    return (...args)=>{
-        for (let callback of callbacks){
-            if (typeof callback === "function") {
-                callback(...args);
-            }
-        }
-    };
-}
-// @ts-ignore
-const visualViewport = typeof document !== "undefined" && window.visualViewport;
-function isScrollable(node) {
-    let style = window.getComputedStyle(node);
-    return /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
-}
-function getScrollParent(node) {
-    if (isScrollable(node)) {
-        node = node.parentElement;
-    }
-    while(node && !isScrollable(node)){
-        node = node.parentElement;
-    }
-    return node || document.scrollingElement || document.documentElement;
-}
-// HTML input types that do not cause the software keyboard to appear.
-const nonTextInputTypes = new Set([
-    "checkbox",
-    "radio",
-    "range",
-    "color",
-    "file",
-    "image",
-    "button",
-    "submit",
-    "reset"
-]);
-// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
-let preventScrollCount = 0;
-let restore;
-/**
- * Prevents scrolling on the document body on mount, and
- * restores it on unmount. Also ensures that content does not
- * shift due to the scrollbars disappearing.
- */ function usePreventScroll(options = {}) {
-    let { isDisabled } = options;
-    useIsomorphicLayoutEffect(()=>{
-        if (isDisabled) {
-            return;
-        }
-        preventScrollCount++;
-        if (preventScrollCount === 1) {
-            if (isIOS()) {
-                restore = preventScrollMobileSafari();
-            }
-        }
-        return ()=>{
-            preventScrollCount--;
-            if (preventScrollCount === 0) {
-                restore?.();
-            }
-        };
-    }, [
-        isDisabled
-    ]);
-}
-// Mobile Safari is a whole different beast. Even with overflow: hidden,
-// it still scrolls the page in many situations:
-//
-// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.
-// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of
-//    it, so it becomes scrollable.
-// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.
-//    This may cause even fixed position elements to scroll off the screen.
-// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always
-//    scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.
-//
-// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:
-//
-// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling
-//    on the window.
-// 2. Prevent default on `touchmove` events inside a scrollable element when the scroll position is at the
-//    top or bottom. This avoids the whole page scrolling instead, but does prevent overscrolling.
-// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
-// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top
-//    of the page, which prevents it from scrolling the page. After the input is focused, scroll the element
-//    into view ourselves, without scrolling the whole page.
-// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the
-//    same visually, but makes the actual scroll position always zero. This is required to make all of the
-//    above work or Safari will still try to scroll the page when focusing an input.
-// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting
-//    to navigate to an input with the next/previous buttons that's outside a modal.
-function preventScrollMobileSafari() {
-    let scrollable;
-    let lastY = 0;
-    let onTouchStart = (e)=>{
-        // Store the nearest scrollable parent element from the element that the user touched.
-        scrollable = getScrollParent(e.target);
-        if (scrollable === document.documentElement && scrollable === document.body) {
-            return;
-        }
-        lastY = e.changedTouches[0].pageY;
-    };
-    let onTouchMove = (e)=>{
-        // Prevent scrolling the window.
-        if (!scrollable || scrollable === document.documentElement || scrollable === document.body) {
-            e.preventDefault();
-            return;
-        }
-        // Prevent scrolling up when at the top and scrolling down when at the bottom
-        // of a nested scrollable area, otherwise mobile Safari will start scrolling
-        // the window instead. Unfortunately, this disables bounce scrolling when at
-        // the top but it's the best we can do.
-        let y = e.changedTouches[0].pageY;
-        let scrollTop = scrollable.scrollTop;
-        let bottom = scrollable.scrollHeight - scrollable.clientHeight;
-        if (bottom === 0) {
-            return;
-        }
-        if (scrollTop <= 0 && y > lastY || scrollTop >= bottom && y < lastY) {
-            e.preventDefault();
-        }
-        lastY = y;
-    };
-    let onTouchEnd = (e)=>{
-        let target = e.target;
-        // Apply this change if we're not already focused on the target element
-        if (isInput(target) && target !== document.activeElement) {
-            e.preventDefault();
-            // Apply a transform to trick Safari into thinking the input is at the top of the page
-            // so it doesn't try to scroll it into view. When tapping on an input, this needs to
-            // be done before the "focus" event, so we have to focus the element ourselves.
-            target.style.transform = "translateY(-2000px)";
-            target.focus();
-            requestAnimationFrame(()=>{
-                target.style.transform = "";
-            });
-        }
-    };
-    let onFocus = (e)=>{
-        let target = e.target;
-        if (isInput(target)) {
-            // Transform also needs to be applied in the focus event in cases where focus moves
-            // other than tapping on an input directly, e.g. the next/previous buttons in the
-            // software keyboard. In these cases, it seems applying the transform in the focus event
-            // is good enough, whereas when tapping an input, it must be done before the focus event. 🤷‍♂️
-            target.style.transform = "translateY(-2000px)";
-            requestAnimationFrame(()=>{
-                target.style.transform = "";
-                // This will have prevented the browser from scrolling the focused element into view,
-                // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.
-                if (visualViewport) {
-                    if (visualViewport.height < window.innerHeight) {
-                        // If the keyboard is already visible, do this after one additional frame
-                        // to wait for the transform to be removed.
-                        requestAnimationFrame(()=>{
-                            scrollIntoView(target);
-                        });
-                    } else {
-                        // Otherwise, wait for the visual viewport to resize before scrolling so we can
-                        // measure the correct position to scroll to.
-                        visualViewport.addEventListener("resize", ()=>scrollIntoView(target), {
-                            once: true
-                        });
-                    }
-                }
-            });
-        }
-    };
-    let onWindowScroll = ()=>{
-        // Last resort. If the window scrolled, scroll it back to the top.
-        // It should always be at the top because the body will have a negative margin (see below).
-        window.scrollTo(0, 0);
-    };
-    // Record the original scroll position so we can restore it.
-    // Then apply a negative margin to the body to offset it by the scroll position. This will
-    // enable us to scroll the window to the top, which is required for the rest of this to work.
-    let scrollX = window.pageXOffset;
-    let scrollY = window.pageYOffset;
-    let restoreStyles = chain(setStyle(document.documentElement, "paddingRight", `${window.innerWidth - document.documentElement.clientWidth}px`));
-    // Scroll to the top. The negative margin on the body will make this appear the same.
-    window.scrollTo(0, 0);
-    let removeEvents = chain(addEvent(document, "touchstart", onTouchStart, {
-        passive: false,
-        capture: true
-    }), addEvent(document, "touchmove", onTouchMove, {
-        passive: false,
-        capture: true
-    }), addEvent(document, "touchend", onTouchEnd, {
-        passive: false,
-        capture: true
-    }), addEvent(document, "focus", onFocus, true), addEvent(window, "scroll", onWindowScroll));
-    return ()=>{
-        // Restore styles and scroll the page back to where it was.
-        restoreStyles();
-        removeEvents();
-        window.scrollTo(scrollX, scrollY);
-    };
-}
-// Sets a CSS property on an element, and returns a function to revert it to the previous value.
-function setStyle(element, style, value) {
-    // https://github.com/microsoft/TypeScript/issues/17827#issuecomment-391663310
-    // @ts-ignore
-    let cur = element.style[style];
-    // @ts-ignore
-    element.style[style] = value;
-    return ()=>{
-        // @ts-ignore
-        element.style[style] = cur;
-    };
-}
-// Adds an event listener to an element, and returns a function to remove it.
-function addEvent(target, event, handler, options) {
-    // @ts-ignore
-    target.addEventListener(event, handler, options);
-    return ()=>{
-        // @ts-ignore
-        target.removeEventListener(event, handler, options);
-    };
-}
-function scrollIntoView(target) {
-    let root = document.scrollingElement || document.documentElement;
-    while(target && target !== root){
-        // Find the parent scrollable element and adjust the scroll position if the target is not already in view.
-        let scrollable = getScrollParent(target);
-        if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== target) {
-            let scrollableTop = scrollable.getBoundingClientRect().top;
-            let targetTop = target.getBoundingClientRect().top;
-            let targetBottom = target.getBoundingClientRect().bottom;
-            // Buffer is needed for some edge cases
-            const keyboardHeight = scrollable.getBoundingClientRect().bottom + KEYBOARD_BUFFER;
-            if (targetBottom > keyboardHeight) {
-                scrollable.scrollTop += targetTop - scrollableTop;
-            }
-        }
-        // @ts-ignore
-        target = scrollable.parentElement;
-    }
-}
-function isInput(target) {
-    return target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
-}
-
 function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints, drawerRef, overlayRef, fadeFromIndex, onSnapPointChange, direction = "bottom", container, snapToSequentialPoint }) {
     const [activeSnapPoint, setActiveSnapPoint] = reactUseControllableState.useControllableState({
         prop: activeSnapPointProp,
-        defaultProp: snapPoints?.[0],
+        defaultProp: snapPoints?.[0] ?? null,
         onChange: setActiveSnapPointProp
     });
     const [windowDimensions, setWindowDimensions] = React__default.default.useState(typeof window !== "undefined" ? {
@@ -532,6 +302,11 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
             height: 0
         };
         return snapPoints?.map((snapPoint)=>{
+            // FIXME
+            // 1 -> container 100% << expected
+            // 0.5 -> container 50% << expected
+            // 300px -> 300 -> 300px << expected
+            // 15rem -> 15 -> 15px << this makes no sense, should fix or disallow
             const isPx = typeof snapPoint === "string";
             let snapPointAsNumber = 0;
             if (isPx) {
@@ -553,7 +328,8 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
     }, [
         snapPoints,
         windowDimensions,
-        container
+        container,
+        direction
     ]);
     const activeSnapPointOffset = React__default.default.useMemo(()=>activeSnapPointIndex !== null ? snapPointsOffset?.[activeSnapPointIndex] : null, [
         snapPointsOffset,
@@ -704,7 +480,7 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
 }
 
 function useDrawer(props) {
-    const { open: openProp, onOpenChange, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, closeThreshold = CLOSE_THRESHOLD, scrollLockTimeout = SCROLL_LOCK_TIMEOUT, dismissible = true, handleOnly = false, fadeFromIndex = snapPoints && snapPoints.length - 1, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal = true, onClose, nested, noBodyStyles = false, direction = "bottom", defaultOpen = false, disablePreventScroll = true, snapToSequentialPoint = false, preventScrollRestoration = false, repositionInputs = true, onAnimationEnd, container, autoFocus = false, closeOnInteractOutside = true, closeOnEscape = true } = props;
+    const { open: openProp, onOpenChange, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, closeThreshold = CLOSE_THRESHOLD, scrollLockTimeout = SCROLL_LOCK_TIMEOUT, dismissible = true, handleOnly = false, fadeFromIndex = snapPoints && snapPoints.length - 1, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal = true, onClose, nested, noBodyStyles = true, direction = "bottom", defaultOpen = false, snapToSequentialPoint = false, preventScrollRestoration = false, repositionInputs = true, onAnimationEnd, container, autoFocus = false, closeOnInteractOutside = true, closeOnEscape = true } = props;
     const [isOpen = false, setIsOpen] = reactUseControllableState.useControllableState({
         defaultProp: defaultOpen,
         prop: openProp,
@@ -730,7 +506,6 @@ function useDrawer(props) {
     });
     const [hasBeenOpened, setHasBeenOpened] = React.useState(false);
     const [isDragging, setIsDragging] = React.useState(false);
-    const [justReleased, setJustReleased] = React.useState(false);
     const [shouldOverlayAnimate, setShouldOverlayAnimate] = React.useState(false);
     const overlayRef = React.useRef(null);
     const openTime = React.useRef(null);
@@ -764,9 +539,6 @@ function useDrawer(props) {
         direction,
         snapToSequentialPoint
     });
-    usePreventScroll({
-        isDisabled: !isOpen || isDragging || !modal || justReleased || !hasBeenOpened || !repositionInputs || !disablePreventScroll
-    });
     const { restorePositionSetting } = usePositionFixed({
         isOpen,
         modal,
@@ -783,7 +555,9 @@ function useDrawer(props) {
         setIsDragging(true);
         dragStartTime.current = new Date();
         if (isIOS()) {
-            window.addEventListener("touchend", ()=>isAllowedToDrag.current = false, {
+            window.addEventListener("touchend", ()=>{
+                isAllowedToDrag.current = false;
+            }, {
                 once: true
             });
         }
@@ -950,12 +724,6 @@ function useDrawer(props) {
         const timeTaken = dragEndTime.current.getTime() - dragStartTime.current.getTime();
         const distMoved = pointerStart.current - (isVertical(direction) ? event.pageY : event.pageX);
         const velocity = Math.abs(distMoved) / timeTaken;
-        if (velocity > 0.05) {
-            setJustReleased(true);
-            setTimeout(()=>{
-                setJustReleased(false);
-            }, 200);
-        }
         if (snapPoints) {
             const directionMultiplier = direction === "bottom" || direction === "right" ? 1 : -1;
             onReleaseSnapPoints({
@@ -1043,7 +811,7 @@ function useDrawer(props) {
                     drawerRef.current.style.height = `${initialDrawerHeight.current}px`;
                 }
                 if (snapPoints && snapPoints.length > 0 && !keyboardIsOpen.current) {
-                    drawerRef.current.style.bottom = `0px`;
+                    drawerRef.current.style.bottom = "0px";
                 } else {
                     drawerRef.current.style.bottom = `${Math.max(diffFromInitial, 0)}px`;
                 }
@@ -1081,9 +849,8 @@ function useDrawer(props) {
                 setShouldOverlayAnimate(false);
             }, TRANSITIONS.ENTER_DURATION * 1000);
             return ()=>clearTimeout(timeoutId);
-        } else {
-            setShouldOverlayAnimate(false);
         }
+        setShouldOverlayAnimate(false);
     }, [
         isOpen,
         snapPoints,
@@ -1158,7 +925,7 @@ function useDrawerContext() {
 }
 
 const DrawerRoot = (props)=>{
-    const { children, defaultOpen, dismissible, onOpenChange, modal } = props;
+    const { children, defaultOpen, dismissible, modal } = props;
     const api = useDrawer(props);
     return /*#__PURE__*/ jsxRuntime.jsx(DialogPrimitive__namespace.Root, {
         defaultOpen: defaultOpen,
@@ -1171,7 +938,6 @@ const DrawerRoot = (props)=>{
                 api.closeDrawer(true);
             }
             api.setIsOpen(open);
-            onOpenChange?.(open);
         },
         modal: modal,
         children: /*#__PURE__*/ jsxRuntime.jsx(DrawerProvider, {
@@ -1187,7 +953,8 @@ const DrawerPositioner = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         ref: ref,
         ...props,
         style: {
-            pointerEvents: api.isOpen ? undefined : "none"
+            pointerEvents: api.isOpen ? undefined : "none",
+            ...props.style
         }
     });
 });

package/lib/index.cjs

@@ -1,4 +1,4 @@
-var Drawer12s = require('./Drawer-12s-BXSK15mB.cjs');
+var Drawer12s = require('./Drawer-12s-D1dD-wen.cjs');
 
 var Drawer_namespace = {
   __proto__: null,

package/lib/index.d.ts

@@ -3,7 +3,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { PrimitiveProps } from '@seed-design/react-primitive';
 import * as react from 'react';
 
-interface DialogProps {
+interface UseDrawerProps {
     activeSnapPoint?: number | string | null;
     setActiveSnapPoint?: (snapPoint: number | string | null) => void;
     children?: React.ReactNode;
@@ -15,7 +15,8 @@ interface DialogProps {
      */
     closeThreshold?: number;
     /**
-     * When `true` the `body` doesn't get any styles assigned from Vaul
+     * When `true` the `body` doesn't get any styles assigned from Drawer
+     * @default true
      */
     noBodyStyles?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -35,7 +36,7 @@ interface DialogProps {
     handleOnly?: boolean;
     /**
      * When `false` dragging, clicking outside, pressing esc, etc. will not close the drawer.
-     * Use this in comination with the `open` prop, otherwise you won't be able to open/close the drawer.
+     * Use this in combination with the `open` prop, otherwise you won't be able to open/close the drawer.
      * @default true
      */
     dismissible?: boolean;
@@ -58,11 +59,6 @@ interface DialogProps {
      * @default false
      */
     defaultOpen?: boolean;
-    /**
-     * When set to `true` prevents scrolling on the document body on mount, and restores it on unmount.
-     * @default false
-     */
-    disablePreventScroll?: boolean;
     /**
      * When `true` Vaul will reposition inputs rather than scroll then into view if the keyboard is in the way.
      * Setting it to `false` will fall back to the default browser behavior.
@@ -86,7 +82,7 @@ interface DialogProps {
     autoFocus?: boolean;
     /**
      * Array of snap points to use.
-     * Example: snapPoints={[0, 100, 200]} will use the first snap point at 0px, the second at 100px, and the third at 200px.
+     * Example: snapPoints={["100px", "200px", 1]} will use the snap points 100px, 200px and fully open (1 = 100% of the container).
      * @default undefined
      */
     snapPoints?: (number | string)[];
@@ -107,7 +103,7 @@ interface DialogProps {
      */
     closeOnEscape?: boolean;
 }
-declare function useDrawer(props: DialogProps): {
+declare function useDrawer(props: UseDrawerProps): {
     activeSnapPoint: string | number | null;
     snapPoints: (string | number)[] | undefined;
     setActiveSnapPoint: (value: react.SetStateAction<string | number | null>) => void;
@@ -139,7 +135,7 @@ declare function useDrawer(props: DialogProps): {
     closeOnEscape: boolean;
 };
 
-interface DrawerRootProps extends DialogProps {
+interface DrawerRootProps extends UseDrawerProps {
     children?: react.ReactNode;
 }
 declare const DrawerRoot: (props: DrawerRootProps) => react_jsx_runtime.JSX.Element;
@@ -208,4 +204,4 @@ declare namespace Drawer_namespace {
 }
 
 export { Drawer_namespace as Drawer, DrawerBackdrop, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerHandle, DrawerPositioner, DrawerRoot, DrawerTitle, DrawerTrigger, useDrawer, useDrawerContext };
-export type { DialogProps, DrawerBackdropProps, DrawerCloseButtonProps, DrawerContentProps, DrawerContextValue, DrawerDescriptionProps, DrawerHandleProps, DrawerPositionerProps, DrawerRootProps, DrawerTitleProps, DrawerTriggerProps };
+export type { DrawerBackdropProps, DrawerCloseButtonProps, DrawerContentProps, DrawerContextValue, DrawerDescriptionProps, DrawerHandleProps, DrawerPositionerProps, DrawerRootProps, DrawerTitleProps, DrawerTriggerProps, UseDrawerProps };

package/lib/index.js

@@ -1,5 +1,5 @@
-import { D as DrawerBackdrop, a as DrawerCloseButton, b as DrawerContent, c as DrawerDescription, d as DrawerHandle, e as DrawerPositioner, f as DrawerRoot, g as DrawerTitle, h as DrawerTrigger } from './Drawer-12s-CAlIg6sU.js';
-export { u as useDrawer, i as useDrawerContext } from './Drawer-12s-CAlIg6sU.js';
+import { D as DrawerBackdrop, a as DrawerCloseButton, b as DrawerContent, c as DrawerDescription, d as DrawerHandle, e as DrawerPositioner, f as DrawerRoot, g as DrawerTitle, h as DrawerTrigger } from './Drawer-12s-Cg9AJtdN.js';
+export { u as useDrawer, i as useDrawerContext } from './Drawer-12s-Cg9AJtdN.js';
 
 var Drawer_namespace = {
   __proto__: null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react-drawer",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",

package/src/Drawer.tsx

@@ -8,15 +8,15 @@ import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import type * as React from "react";
 import { forwardRef, useEffect, useRef, useState } from "react";
 import type { DrawerDirection } from "./types";
-import { useDrawer, type DialogProps } from "./useDrawer";
+import { useDrawer, type UseDrawerProps } from "./useDrawer";
 import { DrawerProvider, useDrawerContext } from "./useDrawerContext";
 
-export interface DrawerRootProps extends DialogProps {
+export interface DrawerRootProps extends UseDrawerProps {
   children?: React.ReactNode;
 }
 
 export const DrawerRoot = (props: DrawerRootProps) => {
-  const { children, defaultOpen, dismissible, onOpenChange, modal } = props;
+  const { children, defaultOpen, dismissible, modal } = props;
   const api = useDrawer(props);
   return (
     <DialogPrimitive.Root
@@ -31,7 +31,6 @@ export const DrawerRoot = (props: DrawerRootProps) => {
         }
 
         api.setIsOpen(open);
-        onOpenChange?.(open);
       }}
       modal={modal}
     >
@@ -54,7 +53,7 @@ export const DrawerPositioner = forwardRef<HTMLDivElement, DrawerPositionerProps
     <Primitive.div
       ref={ref}
       {...props}
-      style={{ pointerEvents: api.isOpen ? undefined : "none" }}
+      style={{ pointerEvents: api.isOpen ? undefined : "none", ...props.style }}
     />
   );
 });

package/src/helpers.ts

@@ -6,6 +6,27 @@ interface Style {
 
 const cache = new WeakMap();
 
+// HTML input types that do not cause the software keyboard to appear.
+const nonTextInputTypes = new Set([
+  "checkbox",
+  "radio",
+  "range",
+  "color",
+  "file",
+  "image",
+  "button",
+  "submit",
+  "reset",
+]);
+
+export function isInput(target: Element) {
+  return (
+    (target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) ||
+    target instanceof HTMLTextAreaElement ||
+    (target instanceof HTMLElement && target.isContentEditable)
+  );
+}
+
 export function isInView(el: HTMLElement): boolean {
   const rect = el.getBoundingClientRect();
 

package/src/index.ts

@@ -19,7 +19,7 @@ export {
   type DrawerTriggerProps,
 } from "./Drawer";
 
-export { useDrawer, type DialogProps } from "./useDrawer";
+export { useDrawer, type UseDrawerProps } from "./useDrawer";
 export { useDrawerContext, type DrawerContextValue } from "./useDrawerContext";
 
 export * as Drawer from "./Drawer.namespace";

package/src/use-snap-points.ts

@@ -20,8 +20,8 @@ export function useSnapPoints({
   setActiveSnapPointProp?(snapPoint: number | null | string): void;
   snapPoints?: (number | string)[];
   fadeFromIndex?: number;
-  drawerRef: React.RefObject<HTMLDivElement>;
-  overlayRef: React.RefObject<HTMLDivElement>;
+  drawerRef: React.RefObject<HTMLDivElement | null>;
+  overlayRef: React.RefObject<HTMLDivElement | null>;
   onSnapPointChange(activeSnapPointIndex: number): void;
   direction?: DrawerDirection;
   container?: HTMLElement | null | undefined;
@@ -29,7 +29,7 @@ export function useSnapPoints({
 }) {
   const [activeSnapPoint, setActiveSnapPoint] = useControllableState<string | number | null>({
     prop: activeSnapPointProp,
-    defaultProp: snapPoints?.[0],
+    defaultProp: snapPoints?.[0] ?? null,
     onChange: setActiveSnapPointProp,
   });
 
@@ -84,6 +84,12 @@ export function useSnapPoints({
 
     return (
       snapPoints?.map((snapPoint) => {
+        // FIXME
+        // 1 -> container 100% << expected
+        // 0.5 -> container 50% << expected
+        // 300px -> 300 -> 300px << expected
+        // 15rem -> 15 -> 15px << this makes no sense, should fix or disallow
+
         const isPx = typeof snapPoint === "string";
         let snapPointAsNumber = 0;
 
@@ -119,7 +125,7 @@ export function useSnapPoints({
         return width;
       }) ?? []
     );
-  }, [snapPoints, windowDimensions, container]);
+  }, [snapPoints, windowDimensions, container, direction]);
 
   const activeSnapPointOffset = React.useMemo(
     () => (activeSnapPointIndex !== null ? snapPointsOffset?.[activeSnapPointIndex] : null),