@lodev09/react-native-true-sheet 4.0.0-beta.0 → 4.0.0-beta.10

package/src/web/vaul/README.md

@@ -0,0 +1,9 @@
+# vaul
+
+Originally forked from [vaul](https://github.com/emilkowalski/vaul) by Emil Kowalski at `v1.1.2`. Upstream is unmaintained; maintained here as part of truesheet's web renderer.
+
+Only external runtime dep: `@radix-ui/react-dialog`.
+
+## License
+
+vaul is MIT-licensed. See the [upstream LICENSE](https://github.com/emilkowalski/vaul/blob/main/LICENSE.md). Original copyright remains with Emil Kowalski.

package/src/web/vaul/browser.ts

@@ -0,0 +1,38 @@
+export function isMobileFirefox(): boolean | undefined {
+  const userAgent = navigator.userAgent;
+  return (
+    typeof window !== 'undefined' &&
+    ((/Firefox/.test(userAgent) && /Mobile/.test(userAgent)) || // Android Firefox
+      /FxiOS/.test(userAgent)) // iOS Firefox
+  );
+}
+
+export function isMac(): boolean | undefined {
+  return testPlatform(/^Mac/);
+}
+
+export function isIPhone(): boolean | undefined {
+  return testPlatform(/^iPhone/);
+}
+
+export function isSafari(): boolean | undefined {
+  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}
+
+export function isIPad(): boolean | undefined {
+  return (
+    testPlatform(/^iPad/) ||
+    // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+    (isMac() && navigator.maxTouchPoints > 1)
+  );
+}
+
+export function isIOS(): boolean | undefined {
+  return isIPhone() || isIPad();
+}
+
+export function testPlatform(re: RegExp): boolean | undefined {
+  return typeof window !== 'undefined' && window.navigator != null
+    ? re.test(window.navigator.platform)
+    : undefined;
+}

package/src/web/vaul/constants.ts

@@ -0,0 +1,24 @@
+export const TRANSITIONS = {
+  DURATION: 0.5,
+  EASE: [0.32, 0.72, 0, 1],
+};
+
+export const VELOCITY_THRESHOLD = 0.4;
+
+export const DEFAULT_PEEK_HEIGHT = 150;
+
+export const CLOSE_THRESHOLD = 0.25;
+
+// Minimum downward pull (px) on a non-dismissible drawer at its first snap
+// point before the release counts as a dismiss attempt.
+export const DISMISS_ATTEMPT_THRESHOLD = 24;
+
+export const SCROLL_LOCK_TIMEOUT = 100;
+
+export const BORDER_RADIUS = 8;
+
+export const NESTED_DISPLACEMENT = 16;
+
+export const WINDOW_TOP_OFFSET = 26;
+
+export const DRAG_CLASS = 'vaul-dragging';

package/src/web/vaul/context.ts

@@ -0,0 +1,102 @@
+import React from 'react';
+import type { DrawerDirection } from './types';
+
+export interface DragEvent {
+  target: EventTarget;
+  pageX: number;
+  pageY: number;
+  pointerType: string;
+}
+
+interface DrawerContextValue {
+  drawerRef: React.RefObject<HTMLDivElement | null>;
+  overlayRef: React.RefObject<HTMLDivElement | null>;
+  onPress: (event: React.PointerEvent<HTMLDivElement>) => void;
+  onRelease: (event: React.PointerEvent<HTMLDivElement> | null) => void;
+  onDrag: (event: React.PointerEvent<HTMLDivElement>) => void;
+  onTouchDrag: (event: DragEvent, pointerEvent?: React.PointerEvent<HTMLDivElement>) => void;
+  onTouchRelease: (
+    event: DragEvent | null,
+    pointerEvent?: React.PointerEvent<HTMLDivElement>
+  ) => void;
+  onNestedDrag: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
+  onNestedOpenChange: (o: boolean) => void;
+  onNestedRelease: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void;
+  dismissible: boolean;
+  onDismissAttempt?: () => void;
+  isOpen: boolean;
+  isDragging: boolean;
+  keyboardIsOpen: React.MutableRefObject<boolean>;
+  snapPointsOffset: number[] | null;
+  snapPoints?: (number | string)[] | null;
+  activeSnapPointIndex?: number | null;
+  fadeFromIndex?: number;
+  modal: boolean;
+  shouldFade: boolean;
+  activeSnapPoint?: number | string | null;
+  setActiveSnapPoint: (o: number | string | null) => void;
+  closeDrawer: () => void;
+  openProp?: boolean;
+  onOpenChange?: (o: boolean) => void;
+  direction: DrawerDirection;
+  shouldScaleBackground: boolean;
+  setBackgroundColorOnScale: boolean;
+  noBodyStyles: boolean;
+  handleOnly?: boolean;
+  container?: HTMLElement | null;
+  autoFocus?: boolean;
+  shouldAnimate?: React.RefObject<boolean>;
+  onPositionChangeRef: React.RefObject<((position: number) => void) | undefined>;
+  setContentHeight: (height: number) => void;
+  detached: boolean;
+  detachedOffset: number;
+  detachedRadius: number;
+  detachedWrapperStyle?: React.CSSProperties;
+}
+
+export const DrawerContext = React.createContext<DrawerContextValue>({
+  drawerRef: { current: null },
+  overlayRef: { current: null },
+  onPress: () => {},
+  onRelease: () => {},
+  onDrag: () => {},
+  onTouchDrag: () => {},
+  onTouchRelease: () => {},
+  onNestedDrag: () => {},
+  onNestedOpenChange: () => {},
+  onNestedRelease: () => {},
+  openProp: undefined,
+  dismissible: false,
+  isOpen: false,
+  isDragging: false,
+  keyboardIsOpen: { current: false },
+  snapPointsOffset: null,
+  snapPoints: null,
+  handleOnly: false,
+  modal: false,
+  shouldFade: false,
+  activeSnapPoint: null,
+  onOpenChange: () => {},
+  setActiveSnapPoint: () => {},
+  closeDrawer: () => {},
+  direction: 'bottom',
+  shouldAnimate: { current: true },
+  shouldScaleBackground: false,
+  setBackgroundColorOnScale: true,
+  noBodyStyles: false,
+  container: null,
+  autoFocus: false,
+  onPositionChangeRef: { current: undefined },
+  setContentHeight: () => {},
+  detached: false,
+  detachedOffset: 0,
+  detachedRadius: 0,
+});
+
+export const useDrawerContext = () => {
+  const context = React.useContext(DrawerContext);
+  if (!context) {
+    throw new Error('useDrawerContext must be used within a Drawer.Root');
+  }
+  return context;
+};

package/src/web/vaul/helpers.ts

@@ -0,0 +1,131 @@
+import type { AnyFunction, DrawerDirection } from './types';
+
+interface Style {
+  [key: string]: string;
+}
+
+// CSSStyleDeclaration has no string index signature, so dynamic camelCase
+// keys are assigned through this writable-record view. Values include
+// undefined: originals captured for unknown keys read back as undefined.
+type IndexableStyle = CSSStyleDeclaration & Record<string, string | undefined>;
+
+const cache = new WeakMap<HTMLElement, Record<string, string | undefined>>();
+
+export function isInView(el: HTMLElement): boolean {
+  const rect = el.getBoundingClientRect();
+
+  if (!window.visualViewport) return false;
+
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    // Need + 40 for safari detection
+    rect.bottom <= window.visualViewport.height - 40 &&
+    rect.right <= window.visualViewport.width
+  );
+}
+
+export function set(
+  el: Element | HTMLElement | null | undefined,
+  styles: Style,
+  ignoreCache = false
+) {
+  if (!el || !(el instanceof HTMLElement)) return;
+  let originalStyles: Record<string, string | undefined> = {};
+  const style = el.style as IndexableStyle;
+
+  Object.entries(styles).forEach(([key, value]: [string, string]) => {
+    if (key.startsWith('--')) {
+      el.style.setProperty(key, value);
+      return;
+    }
+
+    originalStyles[key] = style[key];
+    style[key] = value;
+  });
+
+  if (ignoreCache) return;
+
+  cache.set(el, originalStyles);
+}
+
+export function reset(el: Element | HTMLElement | null, prop?: string) {
+  if (!el || !(el instanceof HTMLElement)) return;
+  let originalStyles = cache.get(el);
+
+  if (!originalStyles) {
+    return;
+  }
+
+  const style = el.style as IndexableStyle;
+  if (prop) {
+    style[prop] = originalStyles[prop];
+  } else {
+    Object.entries(originalStyles).forEach(([key, value]) => {
+      style[key] = value;
+    });
+  }
+}
+
+export const isVertical = (direction: DrawerDirection) => {
+  switch (direction) {
+    case 'top':
+    case 'bottom':
+      return true;
+    case 'left':
+    case 'right':
+      return false;
+    default:
+      return direction satisfies never;
+  }
+};
+
+export function getTranslate(element: HTMLElement, direction: DrawerDirection): number | null {
+  if (!element) {
+    return null;
+  }
+  const style = window.getComputedStyle(element);
+  const transform =
+    // @ts-ignore
+    style.transform || style.webkitTransform || style.mozTransform;
+  let mat = transform.match(/^matrix3d\((.+)\)$/);
+  if (mat) {
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d
+    return parseFloat(mat[1].split(', ')[isVertical(direction) ? 13 : 12]);
+  }
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix
+  mat = transform.match(/^matrix\((.+)\)$/);
+  return mat ? parseFloat(mat[1].split(', ')[isVertical(direction) ? 5 : 4]) : null;
+}
+
+export function dampenValue(v: number) {
+  return 8 * (Math.log(v + 1) - 2);
+}
+
+export function assignStyle(
+  element: HTMLElement | null | undefined,
+  style: Partial<CSSStyleDeclaration>
+) {
+  if (!element) return () => {};
+
+  const prevStyle = element.style.cssText;
+  Object.assign(element.style, style);
+
+  return () => {
+    element.style.cssText = prevStyle;
+  };
+}
+
+/**
+ * Receives functions as arguments and returns a new function that calls all.
+ */
+export function chain<T>(...fns: T[]) {
+  return (...args: T extends AnyFunction ? Parameters<T> : never) => {
+    for (const fn of fns) {
+      if (typeof fn === 'function') {
+        // @ts-ignore
+        fn(...args);
+      }
+    }
+  };
+}