@lodev09/react-native-true-sheet 3.10.0 → 3.11.0-beta.0

package/src/web/vaul/style.css

@@ -0,0 +1,264 @@
+[data-vaul-drawer] {
+  touch-action: none;
+  will-change: transform;
+  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+  animation-duration: 0.5s;
+  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='bottom'][data-state='open'] {
+  animation-name: slideFromBottom;
+}
+[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='bottom'][data-state='closed'] {
+  animation-name: slideToBottom;
+}
+
+/* Drawers always dismiss by sliding the wrapper off-screen, so we don't want
+   vaul's default `slideTo*` drawer keyframes (they'd stack with the wrapper
+   translate and look twice as fast). Override with a no-op animation of
+   matching duration so Radix Presence still waits for it before unmounting.
+   Specificity needs to beat the 4-attribute `slideTo*` selectors above. */
+[data-vaul-drawer][data-vaul-drawer-direction='bottom'][data-vaul-animate='true'][data-state='closed'] {
+  animation-name: vaulHold;
+  animation-duration: 0.5s;
+}
+@keyframes vaulHold {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='top'][data-state='open'] {
+  animation-name: slideFromTop;
+}
+[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='top'][data-state='closed'] {
+  animation-name: slideToTop;
+}
+
+[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='left'][data-state='open'] {
+  animation-name: slideFromLeft;
+}
+[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='left'][data-state='closed'] {
+  animation-name: slideToLeft;
+}
+
+[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='right'][data-state='open'] {
+  animation-name: slideFromRight;
+}
+[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='right'][data-state='closed'] {
+  animation-name: slideToRight;
+}
+
+[data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='bottom'] {
+  transform: translate3d(0, var(--initial-transform, 100%), 0);
+}
+
+[data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='top'] {
+  transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
+}
+
+[data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='left'] {
+  transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
+}
+
+[data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='right'] {
+  transform: translate3d(var(--initial-transform, 100%), 0, 0);
+}
+
+[data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='top'] {
+  transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+
+[data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='bottom'] {
+  transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+
+[data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='left'] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+
+[data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='right'] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+
+[data-vaul-overlay][data-vaul-snap-points='false'] {
+  animation-duration: 0.5s;
+  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+}
+[data-vaul-overlay][data-vaul-snap-points='false'][data-state='open'] {
+  animation-name: fadeIn;
+}
+[data-vaul-overlay][data-state='closed'] {
+  animation-name: fadeOut;
+}
+
+[data-vaul-animate='false'] {
+  animation: none !important;
+}
+
+[data-vaul-overlay][data-vaul-snap-points='true'] {
+  opacity: 0;
+  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-vaul-drawer]:not([data-vaul-custom-container='true'])::after {
+  content: '';
+  position: absolute;
+  background: inherit;
+  background-color: inherit;
+}
+
+[data-vaul-drawer][data-vaul-drawer-direction='top']::after {
+  top: initial;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+
+[data-vaul-drawer][data-vaul-drawer-direction='bottom']::after {
+  top: 100%;
+  bottom: initial;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+
+[data-vaul-drawer][data-vaul-drawer-direction='left']::after {
+  left: initial;
+  right: 100%;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+
+[data-vaul-drawer][data-vaul-drawer-direction='right']::after {
+  left: 100%;
+  right: initial;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+
+[data-vaul-overlay][data-vaul-snap-points='true'][data-vaul-delayed-snap-points='true'][data-vaul-snap-points-overlay='true'] {
+  opacity: 1;
+}
+
+[data-vaul-handle] {
+  display: block;
+  position: relative;
+  opacity: 0.7;
+  background: #e2e2e4;
+  margin-left: auto;
+  margin-right: auto;
+  height: 5px;
+  width: 32px;
+  border-radius: 1rem;
+  touch-action: pan-y;
+}
+
+[data-vaul-handle]:hover,
+[data-vaul-handle]:active {
+  opacity: 1;
+}
+
+[data-vaul-handle-hitarea] {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: max(100%, 2.75rem); /* 44px */
+  height: max(100%, 2.75rem); /* 44px */
+  touch-action: inherit;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  [data-vaul-drawer] {
+    user-select: none;
+  }
+}
+
+@media (pointer: fine) {
+  [data-vaul-handle-hitarea]: {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slideFromBottom {
+  from {
+    transform: translate3d(0, var(--initial-transform, 100%), 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideToBottom {
+  to {
+    transform: translate3d(0, var(--initial-transform, 100%), 0);
+  }
+}
+
+@keyframes slideFromTop {
+  from {
+    transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideToTop {
+  to {
+    transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
+  }
+}
+
+@keyframes slideFromLeft {
+  from {
+    transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideToLeft {
+  to {
+    transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
+  }
+}
+
+@keyframes slideFromRight {
+  from {
+    transform: translate3d(var(--initial-transform, 100%), 0, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideToRight {
+  to {
+    transform: translate3d(var(--initial-transform, 100%), 0, 0);
+  }
+}

package/src/web/vaul/types.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;

package/src/web/vaul/use-composed-refs.ts

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

package/src/web/vaul/use-controllable-state.ts

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

package/src/web/vaul/use-position-fixed.ts

@@ -0,0 +1,147 @@
+import React from 'react';
+import { isSafari } from './browser';
+
+let previousBodyPosition: Record<string, string> | null = 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,
+}: {
+  isOpen: boolean;
+  modal: boolean;
+  nested: boolean;
+  hasBeenOpened: boolean;
+  preventScrollRestoration: boolean;
+  noBodyStyles: boolean;
+}) {
+  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-vaul-drawer]');
+      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 };
+}