@kadoui/react 2.1.1 → 2.1.2

package/dist/react-components/DrawerSheet/types.d.ts

@@ -0,0 +1,7 @@
+export type DrawerDirection = 'top' | 'bottom' | 'left' | 'right';
+export interface SnapPoint {
+    fraction: number;
+    height: number;
+}
+export type AnyFunction = (...args: any) => any;
+//# sourceMappingURL=types.d.ts.map

package/dist/react-components/DrawerSheet/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/react-components/DrawerSheet/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAClE,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC"}

package/dist/react-components/DrawerSheet/types.js

@@ -0,0 +1 @@
+export {};

package/dist/react-components/DrawerSheet/use-composed-refs.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+type PossibleRef<T> = React.Ref<T> | undefined;
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */
+declare function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
+/**
+ * A custom hook that composes multiple refs
+ * Accepts callback refs and RefObject(s)
+ */
+declare function useComposedRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
+export { composeRefs, useComposedRefs };
+//# sourceMappingURL=use-composed-refs.d.ts.map

package/dist/react-components/DrawerSheet/use-composed-refs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-composed-refs.d.ts","sourceRoot":"","sources":["../../../src/react-components/DrawerSheet/use-composed-refs.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,WAAW,CAAC,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;AAc/C;;;GAGG;AACH,iBAAS,WAAW,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,IACvC,MAAM,CAAC,UAChB;AAED;;;GAGG;AACH,iBAAS,eAAe,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,qBAGpD;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC"}

package/dist/react-components/DrawerSheet/use-composed-refs.js

@@ -0,0 +1,30 @@
+// This code comes from https://github.com/radix-ui/primitives/tree/main/packages/react/compose-refs
+import * as React from 'react';
+/**
+ * Set a given ref to a given value
+ * This utility takes care of different types of refs: callback refs and RefObject(s)
+ */
+function setRef(ref, value) {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref !== null && ref !== undefined) {
+        ref.current = value;
+    }
+}
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */
+function composeRefs(...refs) {
+    return (node) => refs.forEach((ref) => setRef(ref, node));
+}
+/**
+ * A custom hook that composes multiple refs
+ * Accepts callback refs and RefObject(s)
+ */
+function useComposedRefs(...refs) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return React.useCallback(composeRefs(...refs), refs);
+}
+export { composeRefs, useComposedRefs };

package/dist/react-components/DrawerSheet/use-controllable-state.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type UseControllableStateParams<T> = {
+    prop?: T | undefined;
+    defaultProp?: T | undefined;
+    onChange?: (state: T) => void;
+};
+export declare function useControllableState<T>({ prop, defaultProp, onChange }: UseControllableStateParams<T>): readonly [T | undefined, React.Dispatch<React.SetStateAction<T | undefined>>];
+export {};
+//# sourceMappingURL=use-controllable-state.d.ts.map

package/dist/react-components/DrawerSheet/use-controllable-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-controllable-state.d.ts","sourceRoot":"","sources":["../../../src/react-components/DrawerSheet/use-controllable-state.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,0BAA0B,CAAC,CAAC,IAAI;IACnC,IAAI,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC/B,CAAC;AA8BF,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,QAAmB,EAAE,EAAE,0BAA0B,CAAC,CAAC,CAAC,iFAoBhH"}

package/dist/react-components/DrawerSheet/use-controllable-state.js

@@ -0,0 +1,41 @@
+// This code comes from https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx
+import React from 'react';
+function useCallbackRef(callback) {
+    const callbackRef = React.useRef(callback);
+    React.useEffect(() => {
+        callbackRef.current = callback;
+    });
+    // https://github.com/facebook/react/issues/19240
+    return React.useMemo(() => ((...args) => callbackRef.current?.(...args)), []);
+}
+function useUncontrolledState({ defaultProp, onChange }) {
+    const uncontrolledState = React.useState(defaultProp);
+    const [value] = uncontrolledState;
+    const prevValueRef = React.useRef(value);
+    const handleChange = useCallbackRef(onChange);
+    React.useEffect(() => {
+        if (prevValueRef.current !== value) {
+            handleChange(value);
+            prevValueRef.current = value;
+        }
+    }, [value, prevValueRef, handleChange]);
+    return uncontrolledState;
+}
+export function useControllableState({ prop, defaultProp, onChange = () => { } }) {
+    const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });
+    const isControlled = prop !== undefined;
+    const value = isControlled ? prop : uncontrolledProp;
+    const handleChange = useCallbackRef(onChange);
+    const setValue = React.useCallback((nextValue) => {
+        if (isControlled) {
+            const setter = nextValue;
+            const value = typeof nextValue === 'function' ? setter(prop) : nextValue;
+            if (value !== prop)
+                handleChange(value);
+        }
+        else {
+            setUncontrolledProp(nextValue);
+        }
+    }, [isControlled, prop, setUncontrolledProp, handleChange]);
+    return [value, setValue];
+}

package/dist/react-components/DrawerSheet/use-position-fixed.d.ts

@@ -0,0 +1,19 @@
+/**
+ * This hook is necessary to prevent buggy behavior on iOS devices (need to test on Android).
+ * I won't get into too much detail about what bugs it solves, but so far I've found that setting the body to `position: fixed` is the most reliable way to prevent those bugs.
+ * Issues that this hook solves:
+ * https://github.com/emilkowalski/vaul/issues/435
+ * https://github.com/emilkowalski/vaul/issues/433
+ * And more that I discovered, but were just not reported.
+ */
+export declare function usePositionFixed({ isOpen, modal, nested, hasBeenOpened, preventScrollRestoration, noBodyStyles, }: {
+    isOpen: boolean;
+    modal: boolean;
+    nested: boolean;
+    hasBeenOpened: boolean;
+    preventScrollRestoration: boolean;
+    noBodyStyles: boolean;
+}): {
+    restorePositionSetting: () => void;
+};
+//# sourceMappingURL=use-position-fixed.d.ts.map

package/dist/react-components/DrawerSheet/use-position-fixed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-position-fixed.d.ts","sourceRoot":"","sources":["../../../src/react-components/DrawerSheet/use-position-fixed.ts"],"names":[],"mappings":"AAKA;;;;;;;GAOG;AAEH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,KAAK,EACL,MAAM,EACN,aAAa,EACb,wBAAwB,EACxB,YAAY,GACb,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,EAAE,OAAO,CAAC;IACvB,wBAAwB,EAAE,OAAO,CAAC;IAClC,YAAY,EAAE,OAAO,CAAC;CACvB;;EAoHA"}

package/dist/react-components/DrawerSheet/use-position-fixed.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import { isSafari } from './browser';
+let previousBodyPosition = null;
+/**
+ * This hook is necessary to prevent buggy behavior on iOS devices (need to test on Android).
+ * I won't get into too much detail about what bugs it solves, but so far I've found that setting the body to `position: fixed` is the most reliable way to prevent those bugs.
+ * Issues that this hook solves:
+ * https://github.com/emilkowalski/vaul/issues/435
+ * https://github.com/emilkowalski/vaul/issues/433
+ * And more that I discovered, but were just not reported.
+ */
+export function usePositionFixed({ isOpen, modal, nested, hasBeenOpened, preventScrollRestoration, noBodyStyles, }) {
+    const [activeUrl, setActiveUrl] = React.useState(() => (typeof window !== 'undefined' ? window.location.href : ''));
+    const scrollPos = React.useRef(0);
+    const setPositionFixed = React.useCallback(() => {
+        // All browsers on iOS will return true here.
+        if (!isSafari())
+            return;
+        // If previousBodyPosition is already set, don't set it again.
+        if (previousBodyPosition === null && isOpen && !noBodyStyles) {
+            previousBodyPosition = {
+                position: document.body.style.position,
+                top: document.body.style.top,
+                left: document.body.style.left,
+                height: document.body.style.height,
+                right: 'unset',
+            };
+            // Update the dom inside an animation frame
+            const { scrollX, innerHeight } = window;
+            document.body.style.setProperty('position', 'fixed', 'important');
+            Object.assign(document.body.style, {
+                top: `${-scrollPos.current}px`,
+                left: `${-scrollX}px`,
+                right: '0px',
+                height: 'auto',
+            });
+            window.setTimeout(() => window.requestAnimationFrame(() => {
+                // Attempt to check if the bottom bar appeared due to the position change
+                const bottomBarHeight = innerHeight - window.innerHeight;
+                if (bottomBarHeight && scrollPos.current >= innerHeight) {
+                    // Move the content further up so that the bottom bar doesn't hide it
+                    document.body.style.top = `${-(scrollPos.current + bottomBarHeight)}px`;
+                }
+            }), 300);
+        }
+    }, [isOpen]);
+    const restorePositionSetting = React.useCallback(() => {
+        // All browsers on iOS will return true here.
+        if (!isSafari())
+            return;
+        if (previousBodyPosition !== null && !noBodyStyles) {
+            // Convert the position from "px" to Int
+            const y = -parseInt(document.body.style.top, 10);
+            const x = -parseInt(document.body.style.left, 10);
+            // Restore styles
+            Object.assign(document.body.style, previousBodyPosition);
+            window.requestAnimationFrame(() => {
+                if (preventScrollRestoration && activeUrl !== window.location.href) {
+                    setActiveUrl(window.location.href);
+                    return;
+                }
+                window.scrollTo(x, y);
+            });
+            previousBodyPosition = null;
+        }
+    }, [activeUrl]);
+    React.useEffect(() => {
+        function onScroll() {
+            scrollPos.current = window.scrollY;
+        }
+        onScroll();
+        window.addEventListener('scroll', onScroll);
+        return () => {
+            window.removeEventListener('scroll', onScroll);
+        };
+    }, []);
+    React.useEffect(() => {
+        if (!modal)
+            return;
+        return () => {
+            if (typeof document === 'undefined')
+                return;
+            // Another drawer is opened, safe to ignore the execution
+            const hasDrawerOpened = !!document.querySelector('[data-drawer-sheet]');
+            if (hasDrawerOpened)
+                return;
+            restorePositionSetting();
+        };
+    }, [modal, restorePositionSetting]);
+    React.useEffect(() => {
+        if (nested || !hasBeenOpened)
+            return;
+        // This is needed to force Safari toolbar to show **before** the drawer starts animating to prevent a gnarly shift from happening
+        if (isOpen) {
+            // avoid for standalone mode (PWA)
+            const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
+            !isStandalone && setPositionFixed();
+            if (!modal) {
+                window.setTimeout(() => {
+                    restorePositionSetting();
+                }, 500);
+            }
+        }
+        else {
+            restorePositionSetting();
+        }
+    }, [isOpen, hasBeenOpened, activeUrl, modal, nested, setPositionFixed, restorePositionSetting]);
+    return { restorePositionSetting };
+}

package/dist/react-components/DrawerSheet/use-prevent-scroll.d.ts

@@ -0,0 +1,18 @@
+import { useLayoutEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+interface PreventScrollOptions {
+    /** Whether the scroll lock is disabled. */
+    isDisabled?: boolean;
+    focusCallback?: () => void;
+}
+export declare function isScrollable(node: Element): boolean;
+export declare function getScrollParent(node: Element): Element;
+/**
+ * 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.
+ */
+export declare function usePreventScroll(options?: PreventScrollOptions): void;
+export declare function isInput(target: Element): boolean;
+export {};
+//# sourceMappingURL=use-prevent-scroll.d.ts.map

package/dist/react-components/DrawerSheet/use-prevent-scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-prevent-scroll.d.ts","sourceRoot":"","sources":["../../../src/react-components/DrawerSheet/use-prevent-scroll.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,eAAe,EAAE,MAAM,OAAO,CAAC;AAKnD,eAAO,MAAM,yBAAyB,wBAA8D,CAAC;AAErG,UAAU,oBAAoB;IAC5B,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAeD,wBAAgB,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,OAAO,CAGnD;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,OAAO,GAAG,OAAO,CAUtD;AAmBD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,oBAAyB,QAsBlE;AA4MD,wBAAgB,OAAO,CAAC,MAAM,EAAE,OAAO,WAMtC"}

package/dist/react-components/DrawerSheet/use-prevent-scroll.js

@@ -0,0 +1,237 @@
+// This code comes from https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePreventScroll.ts
+import { useEffect, useLayoutEffect } from 'react';
+import { isIOS } from './browser';
+const KEYBOARD_BUFFER = 24;
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : 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;
+export function isScrollable(node) {
+    let style = window.getComputedStyle(node);
+    return /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
+}
+export 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.
+ */
+export 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;
+    }
+}
+export function isInput(target) {
+    return ((target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) ||
+        target instanceof HTMLTextAreaElement ||
+        (target instanceof HTMLElement && target.isContentEditable));
+}

package/dist/react-components/DrawerSheet/use-scale-background.d.ts

@@ -0,0 +1,2 @@
+export declare function useScaleBackground(): void;
+//# sourceMappingURL=use-scale-background.d.ts.map

package/dist/react-components/DrawerSheet/use-scale-background.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-scale-background.d.ts","sourceRoot":"","sources":["../../../src/react-components/DrawerSheet/use-scale-background.ts"],"names":[],"mappings":"AAOA,wBAAgB,kBAAkB,SAmDjC"}

package/dist/react-components/DrawerSheet/use-scale-background.js

@@ -0,0 +1,50 @@
+import React, { useMemo } from 'react';
+import { useDrawerContext } from './context';
+import { assignStyle, chain, isVertical } from './helpers';
+import { BORDER_RADIUS, TRANSITIONS, WINDOW_TOP_OFFSET } from './constants';
+const noop = () => () => { };
+export function useScaleBackground() {
+    const { direction, isOpen, shouldScaleBackground, setBackgroundColorOnScale, noBodyStyles } = useDrawerContext();
+    const timeoutIdRef = React.useRef(null);
+    const initialBackgroundColor = useMemo(() => document.body.style.backgroundColor, []);
+    function getScale() {
+        return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
+    }
+    React.useEffect(() => {
+        if (isOpen && shouldScaleBackground) {
+            if (timeoutIdRef.current)
+                clearTimeout(timeoutIdRef.current);
+            const wrapper = document.querySelector('[data-drawer-sheet-wrapper]');
+            if (!wrapper)
+                return;
+            chain(setBackgroundColorOnScale && !noBodyStyles ? assignStyle(document.body, { background: 'black' }) : noop, assignStyle(wrapper, {
+                transformOrigin: isVertical(direction) ? 'top' : 'left',
+                transitionProperty: 'transform, border-radius',
+                transitionDuration: `${TRANSITIONS.DURATION}s`,
+                transitionTimingFunction: `cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
+            }));
+            const wrapperStylesCleanup = assignStyle(wrapper, {
+                borderRadius: `${BORDER_RADIUS}px`,
+                overflow: 'hidden',
+                ...(isVertical(direction)
+                    ? {
+                        transform: `scale(${getScale()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,
+                    }
+                    : {
+                        transform: `scale(${getScale()}) translate3d(calc(env(safe-area-inset-top) + 14px), 0, 0)`,
+                    }),
+            });
+            return () => {
+                wrapperStylesCleanup();
+                timeoutIdRef.current = window.setTimeout(() => {
+                    if (initialBackgroundColor) {
+                        document.body.style.background = initialBackgroundColor;
+                    }
+                    else {
+                        document.body.style.removeProperty('background');
+                    }
+                }, TRANSITIONS.DURATION * 1000);
+            };
+        }
+    }, [isOpen, shouldScaleBackground, initialBackgroundColor]);
+}

package/dist/react-components/DrawerSheet/use-snap-points.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { DrawerDirection } from './types';
+export declare function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints, drawerRef, overlayRef, fadeFromIndex, onSnapPointChange, direction, container, snapToSequentialPoint, }: {
+    activeSnapPointProp?: number | string | null;
+    setActiveSnapPointProp?(snapPoint: number | null | string): void;
+    snapPoints?: (number | string)[];
+    fadeFromIndex?: number;
+    drawerRef: React.RefObject<HTMLDivElement | null>;
+    overlayRef: React.RefObject<HTMLDivElement | null>;
+    onSnapPointChange(activeSnapPointIndex: number): void;
+    direction?: DrawerDirection;
+    container?: HTMLElement | null | undefined;
+    snapToSequentialPoint?: boolean;
+}): {
+    isLastSnapPoint: true | null;
+    activeSnapPoint: string | number | null | undefined;
+    shouldFade: boolean;
+    getPercentageDragged: (absDraggedDistance: number, isDraggingDown: boolean) => number | null;
+    setActiveSnapPoint: React.Dispatch<React.SetStateAction<string | number | null | undefined>>;
+    activeSnapPointIndex: number | null;
+    onRelease: ({ draggedDistance, closeDrawer, velocity, dismissible, }: {
+        draggedDistance: number;
+        closeDrawer: () => void;
+        velocity: number;
+        dismissible: boolean;
+    }) => void;
+    onDrag: ({ draggedDistance }: {
+        draggedDistance: number;
+    }) => void;
+    snapPointsOffset: number[];
+};
+//# sourceMappingURL=use-snap-points.d.ts.map

package/dist/react-components/DrawerSheet/use-snap-points.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-snap-points.d.ts","sourceRoot":"","sources":["../../../src/react-components/DrawerSheet/use-snap-points.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,wBAAgB,aAAa,CAAC,EAC5B,mBAAmB,EACnB,sBAAsB,EACtB,UAAU,EACV,SAAS,EACT,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,SAAoB,EACpB,SAAS,EACT,qBAAqB,GACtB,EAAE;IACD,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7C,sBAAsB,CAAC,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;IACjE,UAAU,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,iBAAiB,CAAC,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IACtD,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;;;;+CA0NmD,MAAM,kBAAkB,OAAO;;;0EAnF9E;QACD,eAAe,EAAE,MAAM,CAAC;QACxB,WAAW,EAAE,MAAM,IAAI,CAAC;QACxB,QAAQ,EAAE,MAAM,CAAC;QACjB,WAAW,EAAE,OAAO,CAAC;KACtB;kCA0DoC;QAAE,eAAe,EAAE,MAAM,CAAA;KAAE;;EAgEjE"}