@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/primitives/overlay.jsx

@@ -0,0 +1,391 @@
+import { c as _c } from "react/compiler-runtime";
+import * as Slot from "@rn-primitives/slot";
+import { createContext, Fragment, useContext, useEffect, useState } from "react";
+import { Modal, Pressable, StyleSheet, View } from "react-native";
+import Animated from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { palette } from "../palette";
+import { KeyboardAvoidingView, KeyboardLiftContext } from "./keyboard-parts";
+import { useReduceMotion } from "../useReduceMotion";
+import { useScheme } from "../useScheme";
+import { SheetDragProvider, SheetGestureContext, slideSheetIn, slideSheetOut, useSheetBackdropStyle, useSheetDragState } from "./sheet-drag";
+import { useControllableState } from "./use-controllable-state";
+const OverlayContext = createContext(null);
+export function useOverlay(part) {
+  const context = useContext(OverlayContext);
+  if (!context) {
+    throw new Error(`${part} must be inside its Dialog, AlertDialog or Sheet root.`);
+  }
+  return context;
+}
+/** Root shared by `Dialog`, `AlertDialog` and `Sheet`: holds the open state, renders no view. */
+export function OverlayRoot(t0) {
+  const $ = _c(10);
+  const {
+    open,
+    defaultOpen: t1,
+    onOpenChange,
+    children
+  } = t0;
+  const defaultOpen = t1 === undefined ? false : t1;
+  let t2;
+  if ($[0] !== defaultOpen || $[1] !== onOpenChange || $[2] !== open) {
+    t2 = {
+      value: open,
+      defaultValue: defaultOpen,
+      onChange: onOpenChange
+    };
+    $[0] = defaultOpen;
+    $[1] = onOpenChange;
+    $[2] = open;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const [value, setValue] = useControllableState(t2);
+  let t3;
+  if ($[4] !== setValue || $[5] !== value) {
+    t3 = {
+      open: value,
+      setOpen: setValue
+    };
+    $[4] = setValue;
+    $[5] = value;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== children || $[8] !== t3) {
+    t4 = <OverlayContext.Provider value={t3}>{children}</OverlayContext.Provider>;
+    $[7] = children;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  return t4;
+}
+function OverlayPressable(t0) {
+  const $ = _c(14);
+  let asChild;
+  let next;
+  let onPress;
+  let part;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      asChild,
+      next,
+      part,
+      onPress,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = asChild;
+    $[2] = next;
+    $[3] = onPress;
+    $[4] = part;
+    $[5] = props;
+  } else {
+    asChild = $[1];
+    next = $[2];
+    onPress = $[3];
+    part = $[4];
+    props = $[5];
+  }
+  const {
+    setOpen
+  } = useOverlay(part);
+  const Component = asChild ? Slot.Pressable : Pressable;
+  let t1;
+  if ($[6] !== next || $[7] !== onPress || $[8] !== setOpen) {
+    t1 = event => {
+      onPress?.(event);
+      setOpen(next);
+    };
+    $[6] = next;
+    $[7] = onPress;
+    $[8] = setOpen;
+    $[9] = t1;
+  } else {
+    t1 = $[9];
+  }
+  let t2;
+  if ($[10] !== Component || $[11] !== props || $[12] !== t1) {
+    t2 = <Component accessibilityRole="button" {...props} onPress={t1} />;
+    $[10] = Component;
+    $[11] = props;
+    $[12] = t1;
+    $[13] = t2;
+  } else {
+    t2 = $[13];
+  }
+  return t2;
+}
+export function OverlayTrigger(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = <OverlayPressable {...props} next={true} />;
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+export function OverlayClose(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = <OverlayPressable {...props} next={false} />;
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+/**
+ * RN `Modal` with a tinted backdrop, safe-area padding and keyboard avoidance
+ * (`KeyboardAvoidingView`: frame by frame with `KeyboardControllerProvider`).
+ * `placement="center"` centres the child (dialogs) inside the insets on every
+ * side, and the `Modal` fades in and out. `"bottom"` pins it to the bottom
+ * edge (sheets), which pad their own bottom inset: the sheet slides up on
+ * open and back down on close, however it closes, and may be dragged down to
+ * close (`SheetDragView`); the backdrop fades with the sheet's position. The
+ * `Modal` stays up until the sheet is out of sight. The backdrop closes the
+ * overlay only when `dismissible`; Android back and the VoiceOver escape
+ * gesture always close it, as Escape does on the web. With Reduce Motion on,
+ * overlays appear and leave in place. With the Gesture Handler parts
+ * (`GestureHandlerProvider`), the content sits in its own root view: on
+ * Android a `Modal` is a separate root, and without one there every gesture
+ * in it silently does nothing.
+ */
+export function OverlayModal(t0) {
+  const $ = _c(20);
+  const {
+    part,
+    placement,
+    dismissible,
+    onShow,
+    children
+  } = t0;
+  const {
+    open,
+    setOpen
+  } = useOverlay(part);
+  const reduceMotion = useReduceMotion();
+  const slides = placement === "bottom" && !reduceMotion;
+  const [shown, setShown] = useState(open);
+  if (open && !shown) {
+    setShown(true);
+  }
+  if (!open && shown && !slides) {
+    setShown(false);
+  }
+  let t1;
+  if ($[0] !== setOpen) {
+    t1 = () => setOpen(false);
+    $[0] = setOpen;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const close = t1;
+  const ModalRoot = useContext(SheetGestureContext)?.ModalRoot ?? Fragment;
+  const t2 = slides || reduceMotion ? "none" : "fade";
+  let t3;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = () => setShown(false);
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  let t4;
+  if ($[3] !== children || $[4] !== close || $[5] !== dismissible || $[6] !== open || $[7] !== part || $[8] !== placement || $[9] !== slides) {
+    t4 = <OverlayModalBody placement={placement} dismissible={dismissible} open={open} slides={slides} close={close} onHidden={t3} part={part}>{children}</OverlayModalBody>;
+    $[3] = children;
+    $[4] = close;
+    $[5] = dismissible;
+    $[6] = open;
+    $[7] = part;
+    $[8] = placement;
+    $[9] = slides;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  let t5;
+  if ($[11] !== ModalRoot || $[12] !== t4) {
+    t5 = <ModalRoot>{t4}</ModalRoot>;
+    $[11] = ModalRoot;
+    $[12] = t4;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  let t6;
+  if ($[14] !== close || $[15] !== onShow || $[16] !== shown || $[17] !== t2 || $[18] !== t5) {
+    t6 = <Modal visible={shown} transparent={true} animationType={t2} statusBarTranslucent={true} onRequestClose={close} onShow={onShow}>{t5}</Modal>;
+    $[14] = close;
+    $[15] = onShow;
+    $[16] = shown;
+    $[17] = t2;
+    $[18] = t5;
+    $[19] = t6;
+  } else {
+    t6 = $[19];
+  }
+  return t6;
+}
+
+/** The `Modal`'s content: mounted with each opening, so a sheet starts below the screen (or at rest). */
+function OverlayModalBody(t0) {
+  const $ = _c(37);
+  const {
+    part,
+    placement,
+    dismissible,
+    open,
+    slides,
+    close,
+    onHidden,
+    children
+  } = t0;
+  const scheme = useScheme();
+  const insets = useSafeAreaInsets();
+  const drag = useSheetDragState(close, slides);
+  const backdropStyle = useSheetBackdropStyle(drag);
+  let t1;
+  if ($[0] !== drag || $[1] !== onHidden || $[2] !== open || $[3] !== slides) {
+    t1 = () => {
+      if (!slides) {
+        return;
+      }
+      if (open) {
+        slideSheetIn(drag);
+      } else {
+        slideSheetOut(drag, onHidden);
+      }
+    };
+    $[0] = drag;
+    $[1] = onHidden;
+    $[2] = open;
+    $[3] = slides;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== open || $[6] !== slides) {
+    t2 = [open, slides];
+    $[5] = open;
+    $[6] = slides;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  useEffect(t1, t2);
+  const t3 = palette.backdrop[scheme];
+  let t4;
+  if ($[8] !== t3) {
+    t4 = {
+      backgroundColor: t3
+    };
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  let t5;
+  if ($[10] !== backdropStyle || $[11] !== t4) {
+    t5 = [StyleSheet.absoluteFill, t4, backdropStyle];
+    $[10] = backdropStyle;
+    $[11] = t4;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  const t6 = `${part}-backdrop`;
+  const t7 = !dismissible;
+  let t8;
+  if ($[13] !== close || $[14] !== dismissible || $[15] !== t6 || $[16] !== t7) {
+    t8 = <Pressable testID={t6} accessible={dismissible} accessibilityRole="button" accessibilityLabel="Close" disabled={t7} onPress={close} style={StyleSheet.absoluteFill} />;
+    $[13] = close;
+    $[14] = dismissible;
+    $[15] = t6;
+    $[16] = t7;
+    $[17] = t8;
+  } else {
+    t8 = $[17];
+  }
+  let t9;
+  if ($[18] !== t5 || $[19] !== t8) {
+    t9 = <Animated.View pointerEvents="box-none" style={t5}>{t8}</Animated.View>;
+    $[18] = t5;
+    $[19] = t8;
+    $[20] = t9;
+  } else {
+    t9 = $[20];
+  }
+  let t10;
+  if ($[21] !== insets.bottom || $[22] !== insets.left || $[23] !== insets.right || $[24] !== insets.top || $[25] !== placement) {
+    t10 = [styles.fill, placement === "bottom" ? {
+      justifyContent: "flex-end",
+      paddingTop: insets.top + 16,
+      paddingLeft: insets.left,
+      paddingRight: insets.right
+    } : {
+      justifyContent: "center",
+      paddingTop: insets.top + 16,
+      paddingBottom: insets.bottom + 16,
+      paddingLeft: insets.left + 16,
+      paddingRight: insets.right + 16
+    }];
+    $[21] = insets.bottom;
+    $[22] = insets.left;
+    $[23] = insets.right;
+    $[24] = insets.top;
+    $[25] = placement;
+    $[26] = t10;
+  } else {
+    t10 = $[26];
+  }
+  let t11;
+  if ($[27] !== children || $[28] !== close || $[29] !== t10) {
+    t11 = <View pointerEvents="box-none" onAccessibilityEscape={close} style={t10}>{children}</View>;
+    $[27] = children;
+    $[28] = close;
+    $[29] = t10;
+    $[30] = t11;
+  } else {
+    t11 = $[30];
+  }
+  let t12;
+  if ($[31] !== t11 || $[32] !== t9) {
+    t12 = <KeyboardAvoidingView style={styles.fill}><KeyboardLiftContext.Provider value={false}>{t9}{t11}</KeyboardLiftContext.Provider></KeyboardAvoidingView>;
+    $[31] = t11;
+    $[32] = t9;
+    $[33] = t12;
+  } else {
+    t12 = $[33];
+  }
+  let t13;
+  if ($[34] !== drag || $[35] !== t12) {
+    t13 = <SheetDragProvider value={drag}>{t12}</SheetDragProvider>;
+    $[34] = drag;
+    $[35] = t12;
+    $[36] = t13;
+  } else {
+    t13 = $[36];
+  }
+  return t13;
+}
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1
+  }
+});

package/dist/primitives/pager-gesture.jsx

@@ -0,0 +1,131 @@
+import { useEffect, useRef, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, { cancelAnimation, ReduceMotion, runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
+import { selectionHaptic } from "../haptics";
+import { InsidePagerContext } from "../Pager";
+import { PAGER_ACTIVE_OFFSET_X, PAGER_FAIL_OFFSET_Y, pagerPosition, pagerSettle, pagesBetween } from "../pagerSwipe";
+import { useWebClickGuard } from "./web-click-guard";
+
+// The pager on Gesture Handler: the track phase and the release run as
+// worklets on the UI thread, so the pages never lag the finger. The rules are
+// plain worklets in `pagerSwipe`.
+
+/** The release: springs on at the finger's speed, no bounce (an overshoot would flash the next page's edge). */
+const PAGER_SPRING = {
+  duration: 250,
+  dampingRatio: 1,
+  reduceMotion: ReduceMotion.System
+};
+
+/** A page set from outside (a tab press) slides there; at once with Reduce Motion. */
+const PAGER_SLIDE = {
+  duration: 220,
+  reduceMotion: ReduceMotion.System
+};
+export function GesturePager({
+  index,
+  count,
+  onIndexChange,
+  progress,
+  renderPage
+}) {
+  const width = useSharedValue(0);
+  // Where the pages were when the finger caught them, and the finger's travel then.
+  const start = useSharedValue(0);
+  const startX = useSharedValue(0);
+  const [mounted, setMounted] = useState(() => new Set([index]));
+  const [shown, setShown] = useState(index);
+  // A page reached from outside is drawn from then on, with every page the
+  // slide there passes, so it never crosses a blank page.
+  if (shown !== index) {
+    setShown(index);
+    setMounted(new Set([...mounted, ...pagesBetween(shown, index)]));
+  }
+  // The page a swipe settled on, until the new `index` comes back: that one must not stop the spring.
+  const settling = useRef(null);
+  // A page set from outside slides there. An effect: a shared value is never
+  // written in render.
+  useEffect(() => {
+    const fromSwipe = settling.current === index;
+    settling.current = null;
+    if (fromSwipe) return;
+    progress.set(withTiming(index, PAGER_SLIDE));
+  }, [index, progress]);
+  const webClicks = useWebClickGuard();
+  const dragStarted = () => {
+    webClicks.swallowNext();
+    // Both neighbours, so the finger finds a page there.
+    setMounted(current => new Set([...current, index - 1, index + 1].filter(page => page >= 0 && page < count)));
+  };
+  const settled = page_0 => {
+    settling.current = page_0;
+    selectionHaptic();
+    onIndexChange(page_0);
+  };
+
+  // Built on each render (for `index` and `count`): the detector keeps the
+  // same handler, and a drag in flight, and only takes the new config.
+  const pan = Gesture.Pan().enabled(count > 1)
+  // Clearly sideways only: a vertical drag is the page's scroll, and a row swipe starts sooner.
+  .activeOffsetX([-PAGER_ACTIVE_OFFSET_X, PAGER_ACTIVE_OFFSET_X]).failOffsetY([-PAGER_FAIL_OFFSET_Y, PAGER_FAIL_OFFSET_Y]).onStart(event => {
+    cancelAnimation(progress);
+    start.set(progress.get());
+    // Count from here, so the pages do not jump by the slop the drag needed to start.
+    startX.set(event.translationX);
+    runOnJS(dragStarted)();
+  })
+  // Track phase: one shared value write per frame, on the UI thread.
+  .onUpdate(event_0 => {
+    progress.set(pagerPosition(start.get(), event_0.translationX - startX.get(), width.get(), count));
+  }).onEnd(event_1 => {
+    const pageWidth = width.get();
+    const target = pagerSettle(progress.get(), event_1.velocityX, pageWidth, Math.round(start.get()), count);
+    // The finger's speed in pages per second, the unit of `progress`.
+    const velocity = pageWidth > 0 ? -event_1.velocityX / pageWidth : 0;
+    progress.set(withSpring(target, {
+      ...PAGER_SPRING,
+      velocity
+    }));
+    if (target !== index) runOnJS(settled)(target);
+  });
+  const trackStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: `${-progress.get() * 100 / count}%`
+    }]
+  }));
+  return <InsidePagerContext.Provider value>
+      <View style={styles.clip} onLayout={event_2 => width.set(event_2.nativeEvent.layout.width)}>
+        <GestureDetector gesture={pan}>
+          <Animated.View style={[styles.fill, {
+          width: `${count * 100}%`
+        }, trackStyle]}>
+            <View ref={webClicks.ref} style={styles.track}>
+              {Array.from({
+              length: count
+            }, (_, page_1) => <View key={page_1}
+            // Off-screen pages are hidden from screen readers; the tabs above switch pages for them.
+            accessibilityElementsHidden={page_1 !== index} importantForAccessibility={page_1 === index ? "auto" : "no-hide-descendants"} style={{
+              width: `${100 / count}%`
+            }}>
+                  {mounted.has(page_1) ? renderPage(page_1) : null}
+                </View>)}
+            </View>
+          </Animated.View>
+        </GestureDetector>
+      </View>
+    </InsidePagerContext.Provider>;
+}
+const styles = StyleSheet.create({
+  clip: {
+    flex: 1,
+    overflow: "hidden"
+  },
+  fill: {
+    flex: 1
+  },
+  track: {
+    flex: 1,
+    flexDirection: "row"
+  }
+});

package/dist/primitives/select-host.jsx

@@ -0,0 +1,103 @@
+import { c as _c } from "react/compiler-runtime";
+import * as SelectPrimitive from "@rn-primitives/select";
+import * as React from "react";
+import { Modal, Platform, View } from "react-native";
+import { FullWindowOverlay } from "react-native-screens";
+import { useReduceMotion } from "../useReduceMotion";
+
+/**
+ * Where `SelectContent` draws its options.
+ *
+ * - Android: a transparent RN `Modal` with a full-size `box-none` host, as
+ *   `DropdownMenuContent` and `OverlayModal` use. The Modal is its own window,
+ *   so options sit above an absolute tab bar or glass layer. `SelectContent`
+ *   renders this host without a Portal, because a Modal inside a portal mounts
+ *   empty. With no Portal there is no `open` gate from the primitive, so the
+ *   host mounts the Modal only while the Select is open. Android back closes it.
+ * - iOS: `FullWindowOverlay`, which sits above native navigation chrome.
+ * - Web: no wrapper. Radix owns the layering.
+ *
+ * `Platform.OS` is read at render, not at import, so a test can switch it.
+ */
+export function SelectHost(t0) {
+  const $ = _c(15);
+  const {
+    children
+  } = t0;
+  const {
+    open,
+    onOpenChange,
+    setTriggerPosition,
+    setContentLayout
+  } = SelectPrimitive.useRootContext();
+  const reduceMotion = useReduceMotion();
+  if (Platform.OS === "ios") {
+    let t1;
+    if ($[0] !== children) {
+      t1 = <FullWindowOverlay>{children}</FullWindowOverlay>;
+      $[0] = children;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
+    }
+    return t1;
+  }
+  if (Platform.OS !== "android") {
+    let t1;
+    if ($[2] !== children) {
+      t1 = <>{children}</>;
+      $[2] = children;
+      $[3] = t1;
+    } else {
+      t1 = $[3];
+    }
+    return t1;
+  }
+  if (!open) {
+    return null;
+  }
+  let t1;
+  if ($[4] !== onOpenChange || $[5] !== setContentLayout || $[6] !== setTriggerPosition) {
+    t1 = () => {
+      setTriggerPosition(null);
+      setContentLayout(null);
+      onOpenChange(false);
+    };
+    $[4] = onOpenChange;
+    $[5] = setContentLayout;
+    $[6] = setTriggerPosition;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  const close = t1;
+  const t2 = reduceMotion ? "none" : "fade";
+  let t3;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      flex: 1
+    };
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== children) {
+    t4 = <View style={t3} pointerEvents="box-none" testID="SelectContent-host">{children}</View>;
+    $[9] = children;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  let t5;
+  if ($[11] !== close || $[12] !== t2 || $[13] !== t4) {
+    t5 = <Modal visible={true} transparent={true} statusBarTranslucent={true} animationType={t2} onRequestClose={close}>{t4}</Modal>;
+    $[11] = close;
+    $[12] = t2;
+    $[13] = t4;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  return t5;
+}