@kanso-labs/react-native-kanso-ui 0.4.0 → 0.6.0

package/dist/overlay/anchored.js

@@ -0,0 +1,182 @@
+import { useTheme } from "../theme/scope.js";
+import { OverlayHostContext } from "./host.js";
+import { boundsOf, place } from "./placement.js";
+import { c } from "react/compiler-runtime";
+import { Dimensions, I18nManager, useWindowDimensions } from "react-native";
+import { SafeAreaInsetsContext } from "react-native-safe-area-context";
+import { use, useEffect, useState } from "react";
+//#region src/overlay/anchored.ts
+const HIDDEN = {
+	left: 0,
+	opacity: 0,
+	pointerEvents: "none",
+	position: "absolute",
+	top: 0
+};
+const NO_INSETS = {
+	bottom: 0,
+	left: 0,
+	right: 0,
+	top: 0
+};
+/**
+* Places a surface drawn in an `Overlay` beside the view that opened it, as
+* web's anchored overlays are placed: on `side`, lined up by `align`, flipped
+* to the opposite side at the edge of the window, and kept inside the safe
+* area's insets with `spacing.md` to spare, the padding React Aria keeps from
+* the edge of the viewport. On `top` and `bottom`, `start` and `end` follow
+* `I18nManager.isRTL`.
+*
+* The anchor is measured with `measureInWindow` whenever the surface reports
+* a new size or the window changes size.
+*/
+function useAnchoredPlacement(t0) {
+	const $ = c(31);
+	const { align: t1, alignOffset: t2, anchor, side: t3, sideOffset } = t0;
+	const align = t1 === void 0 ? "center" : t1;
+	const alignOffset = t2 === void 0 ? 0 : t2;
+	const side = t3 === void 0 ? "bottom" : t3;
+	const store = use(OverlayHostContext);
+	const { spacing } = useTheme();
+	const window = useWindowDimensions();
+	const insets = use(SafeAreaInsetsContext) ?? NO_INSETS;
+	const [measured, setMeasured] = useState(null);
+	const [surface, setSurface] = useState(null);
+	let t4;
+	if ($[0] !== anchor.current || $[1] !== store || $[2] !== surface) {
+		t4 = () => {
+			const measure = () => {
+				const layer = store?.layer() ?? null;
+				const target = anchor.current;
+				if (surface === null || layer === null || target === null) return;
+				layer.measureInWindow((originX, originY) => {
+					target.measureInWindow((x, y, width, height) => {
+						setMeasured({
+							anchor: {
+								height,
+								width,
+								x,
+								y
+							},
+							origin: {
+								x: originX,
+								y: originY
+							}
+						});
+					});
+				});
+			};
+			measure();
+			const subscription = Dimensions.addEventListener("change", measure);
+			return () => {
+				subscription.remove();
+			};
+		};
+		$[0] = anchor.current;
+		$[1] = store;
+		$[2] = surface;
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
+	if ($[4] !== anchor || $[5] !== store || $[6] !== surface) {
+		t5 = [
+			anchor,
+			store,
+			surface
+		];
+		$[4] = anchor;
+		$[5] = store;
+		$[6] = surface;
+		$[7] = t5;
+	} else t5 = $[7];
+	useEffect(t4, t5);
+	let t6;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = (event) => {
+			const { height: height_0, width: width_0 } = event.nativeEvent.layout;
+			setSurface((known) => known?.height === height_0 && known.width === width_0 ? known : {
+				height: height_0,
+				width: width_0
+			});
+		};
+		$[8] = t6;
+	} else t6 = $[8];
+	const onLayout = t6;
+	if (measured === null || surface === null) {
+		let t7;
+		if ($[9] !== side) {
+			t7 = {
+				onLayout,
+				placed: false,
+				side,
+				style: HIDDEN
+			};
+			$[9] = side;
+			$[10] = t7;
+		} else t7 = $[10];
+		return t7;
+	}
+	let t7;
+	if ($[11] !== align || $[12] !== alignOffset || $[13] !== insets || $[14] !== measured.anchor || $[15] !== side || $[16] !== sideOffset || $[17] !== spacing.md || $[18] !== spacing.sm || $[19] !== surface || $[20] !== window) {
+		t7 = place({
+			align,
+			alignOffset,
+			anchor: measured.anchor,
+			bounds: boundsOf(window, insets, spacing.md),
+			rtl: I18nManager.isRTL,
+			side,
+			sideOffset: sideOffset ?? spacing.sm,
+			surface
+		});
+		$[11] = align;
+		$[12] = alignOffset;
+		$[13] = insets;
+		$[14] = measured.anchor;
+		$[15] = side;
+		$[16] = sideOffset;
+		$[17] = spacing.md;
+		$[18] = spacing.sm;
+		$[19] = surface;
+		$[20] = window;
+		$[21] = t7;
+	} else t7 = $[21];
+	const placement = t7;
+	const x_0 = placement.x - measured.origin.x;
+	const t8 = placement.y - measured.origin.y;
+	let t9;
+	if ($[22] !== x_0) {
+		t9 = I18nManager.isRTL && I18nManager.doLeftAndRightSwapInRTL ? { right: x_0 } : { left: x_0 };
+		$[22] = x_0;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] !== placement.maxHeight || $[25] !== t8 || $[26] !== t9) {
+		t10 = {
+			maxHeight: placement.maxHeight,
+			position: "absolute",
+			top: t8,
+			...t9
+		};
+		$[24] = placement.maxHeight;
+		$[25] = t8;
+		$[26] = t9;
+		$[27] = t10;
+	} else t10 = $[27];
+	let t11;
+	if ($[28] !== placement.side || $[29] !== t10) {
+		t11 = {
+			onLayout,
+			placed: true,
+			side: placement.side,
+			style: t10
+		};
+		$[28] = placement.side;
+		$[29] = t10;
+		$[30] = t11;
+	} else t11 = $[30];
+	return t11;
+}
+//#endregion
+export { useAnchoredPlacement };
+
+//# sourceMappingURL=anchored.js.map

package/dist/overlay/anchored.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"anchored.js","names":["RefObject","HostInstance","LayoutChangeEvent","ViewStyle","use","useEffect","useState","Dimensions","I18nManager","useWindowDimensions","SafeAreaInsetsContext","OverlayAlign","OverlaySide","Rect","Size","useTheme","OverlayHostContext","boundsOf","place","AnchoredPlacement","onLayout","event","placed","side","style","AnchoredPlacementOptions","align","alignOffset","anchor","Pick","sideOffset","Measured","origin","x","y","HIDDEN","left","opacity","pointerEvents","position","top","NO_INSETS","bottom","right","useAnchoredPlacement","t0","$","_c","t1","t2","t3","undefined","store","spacing","window","insets","measured","setMeasured","surface","setSurface","t4","current","measure","layer","target","measureInWindow","originX","originY","width","height","subscription","addEventListener","remove","t5","t6","Symbol","for","height_0","width_0","nativeEvent","layout","known","t7","md","sm","bounds","rtl","isRTL","placement","x_0","t8","t9","doLeftAndRightSwapInRTL","t10","maxHeight","t11","_c"],"sources":["../../src/overlay/anchored.ts"],"sourcesContent":["import type { RefObject } from 'react'\nimport type { HostInstance, LayoutChangeEvent, ViewStyle } from 'react-native'\n\nimport { use, useEffect, useState } from 'react'\nimport { Dimensions, I18nManager, useWindowDimensions } from 'react-native'\nimport { SafeAreaInsetsContext } from 'react-native-safe-area-context'\n\nimport type { OverlayAlign, OverlaySide, Rect, Size } from './placement'\n\nimport { useTheme } from '../theme/scope'\nimport { OverlayHostContext } from './host'\nimport { boundsOf, place } from './placement'\n\ntype AnchoredPlacement = {\n  /**\n   * Hand to the surface's own `onLayout`. The surface is placed once it has\n   * reported its size, and placed again whenever that size changes.\n   */\n  readonly onLayout: (event: LayoutChangeEvent) => void\n  /**\n   * Whether the surface has been placed. Until it has, it is laid out out of\n   * sight, and a screen reader cannot be sent to it.\n   */\n  readonly placed: boolean\n  /** The side the surface opened on, which is the opposite one after a flip. */\n  readonly side: OverlaySide\n  /**\n   * The surface's position in the overlay layer, and the height it may take.\n   * Until it has been placed it is laid out out of sight, to be measured.\n   */\n  readonly style: ViewStyle\n}\n\ntype AnchoredPlacementOptions = {\n  /**\n   * Where the surface sits along the side it opens on.\n   * @default 'center'\n   */\n  readonly align?: OverlayAlign | undefined\n  /** Moves the surface along that side, in dp: right or down when positive. */\n  readonly alignOffset?: number | undefined\n  /** The view the surface opens beside. */\n  readonly anchor: RefObject<null | Pick<HostInstance, 'measureInWindow'>>\n  /**\n   * Which side of the anchor the surface opens on. It flips to the opposite\n   * side when there is no room.\n   * @default 'bottom'\n   */\n  readonly side?: OverlaySide | undefined\n  /**\n   * The gap between the anchor and the surface, in dp.\n   * @default spacing.sm\n   */\n  readonly sideOffset?: number | undefined\n}\n\ntype Measured = {\n  readonly anchor: Rect\n  /** Where the overlay layer starts in the window. */\n  readonly origin: { readonly x: number; readonly y: number }\n}\n\nconst HIDDEN: ViewStyle = {\n  left: 0,\n  opacity: 0,\n  pointerEvents: 'none',\n  position: 'absolute',\n  top: 0,\n}\n\n// Outside a SafeAreaProvider the insets are unknown, and the window's own edge\n// is the best bound there is.\nconst NO_INSETS = { bottom: 0, left: 0, right: 0, top: 0 }\n\n/**\n * Places a surface drawn in an `Overlay` beside the view that opened it, as\n * web's anchored overlays are placed: on `side`, lined up by `align`, flipped\n * to the opposite side at the edge of the window, and kept inside the safe\n * area's insets with `spacing.md` to spare, the padding React Aria keeps from\n * the edge of the viewport. On `top` and `bottom`, `start` and `end` follow\n * `I18nManager.isRTL`.\n *\n * The anchor is measured with `measureInWindow` whenever the surface reports\n * a new size or the window changes size.\n */\nfunction useAnchoredPlacement({\n  align = 'center',\n  alignOffset = 0,\n  anchor,\n  side = 'bottom',\n  sideOffset,\n}: AnchoredPlacementOptions): AnchoredPlacement {\n  const store = use(OverlayHostContext)\n  const { spacing } = useTheme()\n  const window = useWindowDimensions()\n  const insets = use(SafeAreaInsetsContext) ?? NO_INSETS\n  const [measured, setMeasured] = useState<Measured | null>(null)\n  const [surface, setSurface] = useState<null | Size>(null)\n\n  useEffect(() => {\n    // The layer is measured as well as the anchor, since the host need not\n    // start at the window's corner: the surface is placed in the layer, and\n    // the anchor is measured in the window.\n    const measure = () => {\n      const layer = store?.layer() ?? null\n      const target = anchor.current\n\n      if (surface === null || layer === null || target === null) {\n        return\n      }\n\n      layer.measureInWindow((originX, originY) => {\n        target.measureInWindow((x, y, width, height) => {\n          setMeasured({\n            anchor: { height, width, x, y },\n            origin: { x: originX, y: originY },\n          })\n        })\n      })\n    }\n\n    measure()\n\n    // A rotation or a resized window can move the anchor without the\n    // surface changing size.\n    const subscription = Dimensions.addEventListener('change', measure)\n\n    return () => {\n      subscription.remove()\n    }\n  }, [anchor, store, surface])\n\n  const onLayout = (event: LayoutChangeEvent) => {\n    const { height, width } = event.nativeEvent.layout\n\n    setSurface((known) =>\n      known?.height === height && known.width === width\n        ? known\n        : { height, width },\n    )\n  }\n\n  if (measured === null || surface === null) {\n    return { onLayout, placed: false, side, style: HIDDEN }\n  }\n\n  const placement = place({\n    align,\n    alignOffset,\n    anchor: measured.anchor,\n    bounds: boundsOf(window, insets, spacing.md),\n    rtl: I18nManager.isRTL,\n    side,\n    sideOffset: sideOffset ?? spacing.sm,\n    surface,\n  })\n  const x = placement.x - measured.origin.x\n\n  return {\n    onLayout,\n    placed: true,\n    side: placement.side,\n    style: {\n      maxHeight: placement.maxHeight,\n      position: 'absolute',\n      top: placement.y - measured.origin.y,\n      // The placement is in physical coordinates, as `measureInWindow`\n      // reports them. React Native swaps `left` and `right` in a right-to-left\n      // layout unless an app turns that off, so there `right` is what puts\n      // the surface's left edge where the placement says.\n      ...(I18nManager.isRTL && I18nManager.doLeftAndRightSwapInRTL\n        ? { right: x }\n        : { left: x }),\n    },\n  }\n}\n\nexport type { AnchoredPlacement, AnchoredPlacementOptions }\n\nexport { useAnchoredPlacement }\n"],"mappings":"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"}

package/dist/overlay/host.d.ts

@@ -0,0 +1,2 @@
+import { View } from "react-native";
+import { ComponentRef, ReactNode } from "react";

package/dist/overlay/index.d.ts

@@ -0,0 +1,4 @@
+import { OverlayAlign, OverlaySide } from "./placement.js";
+import "./anchored.js";
+import "./host.js";
+export type { OverlayAlign, OverlaySide };

package/dist/overlay/panel.js

@@ -0,0 +1,215 @@
+import { useTheme } from "../theme/scope.js";
+import { c } from "react/compiler-runtime";
+import { AccessibilityInfo, BackHandler, Platform, Pressable, StyleSheet } from "react-native";
+import { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/overlay/panel.tsx
+const SCALE_FROM = .95;
+/** The edge a panel grows from, the one facing its anchor. */
+const PANEL_ORIGINS = {
+	bottom: "top",
+	left: "right",
+	right: "left",
+	top: "bottom"
+};
+const styles = StyleSheet.create({ layer: {
+	bottom: 0,
+	left: 0,
+	position: "absolute",
+	right: 0,
+	top: 0
+} });
+/**
+* The layer a press outside a non-modal panel lands on, drawn just before the
+* panel so it sits under it. The press goes no further, so a press on the
+* trigger closes the panel rather than opening it again, as on web. Nothing
+* but that press reaches it: React Native Web's Pressable is a tab stop
+* unless told otherwise, whatever `focusable` says.
+*/
+function DismissLayer(t0) {
+	const $ = c(2);
+	const { onPress } = t0;
+	let t1;
+	if ($[0] !== onPress) {
+		t1 = /* @__PURE__ */ jsx(Pressable, {
+			accessible: false,
+			"aria-hidden": true,
+			focusable: false,
+			onPress,
+			style: styles.layer,
+			tabIndex: -1
+		});
+		$[0] = onPress;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+/**
+* Closes a non-modal panel from Android's back gesture, as a `Modal` closes a
+* modal one. React Native calls the latest listener first, so a panel opened
+* from another closes before the one it came from. React Native Web has no
+* back gesture, and its BackHandler reports an error when one is listened for,
+* so nothing listens there.
+*/
+function useBackToClose(close, active) {
+	const $ = c(4);
+	let t0;
+	let t1;
+	if ($[0] !== active || $[1] !== close) {
+		t0 = () => {
+			if (!active || Platform.OS === "web") return;
+			const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
+				close();
+				return true;
+			});
+			return () => {
+				subscription.remove();
+			};
+		};
+		t1 = [active, close];
+		$[0] = active;
+		$[1] = close;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	useEffect(t0, t1);
+}
+/**
+* Sends the screen reader to `target` once `ready`, which a panel passes once
+* it has been placed, and so can be seen. React Native Web has no screen
+* reader of its own to send.
+*/
+function useFocusOnPlaced(ready, target) {
+	const $ = c(4);
+	let t0;
+	let t1;
+	if ($[0] !== ready || $[1] !== target) {
+		t0 = () => {
+			if (ready && target !== null && Platform.OS !== "web") AccessibilityInfo.sendAccessibilityEvent(target, "focus");
+		};
+		t1 = [ready, target];
+		$[0] = ready;
+		$[1] = target;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	useEffect(t0, t1);
+}
+/**
+* A panel's motion, and the timer that unmounts it once its exit has run: it
+* fades and scales up from 95% over the short3 duration on the emphasised
+* decelerating curve, and back over short2 on the accelerating one. The
+* entrance waits for the panel to be placed, so it is not spent while the
+* panel is still hidden being measured, and the panel stays transparent
+* until then. Under reduced motion it arrives and leaves at once.
+*/
+function usePanelMotion(isOpen, placed, setPresent) {
+	const $ = c(8);
+	const { motion } = useTheme();
+	const reduceMotion = useReducedMotion();
+	const shown = useSharedValue(0);
+	let t0;
+	let t1;
+	if ($[0] !== isOpen || $[1] !== motion || $[2] !== placed || $[3] !== reduceMotion || $[4] !== setPresent || $[5] !== shown) {
+		t0 = () => {
+			if (isOpen && !placed) return;
+			if (isOpen) {
+				shown.set(reduceMotion ? 1 : withTiming(1, {
+					duration: motion.durationShort3,
+					easing: Easing.bezier(...motion.easingEmphasizedDecelerate)
+				}));
+				return;
+			}
+			if (reduceMotion) {
+				shown.set(0);
+				setPresent(false);
+				return;
+			}
+			shown.set(withTiming(0, {
+				duration: motion.durationShort2,
+				easing: Easing.bezier(...motion.easingEmphasizedAccelerate)
+			}));
+			const timer = setTimeout(() => {
+				setPresent(false);
+			}, motion.durationShort2);
+			return () => {
+				clearTimeout(timer);
+			};
+		};
+		t1 = [
+			isOpen,
+			motion,
+			placed,
+			reduceMotion,
+			setPresent,
+			shown
+		];
+		$[0] = isOpen;
+		$[1] = motion;
+		$[2] = placed;
+		$[3] = reduceMotion;
+		$[4] = setPresent;
+		$[5] = shown;
+		$[6] = t0;
+		$[7] = t1;
+	} else {
+		t0 = $[6];
+		t1 = $[7];
+	}
+	useEffect(t0, t1);
+	return useAnimatedStyle(() => {
+		"worklet";
+		const progress = shown.get();
+		return {
+			opacity: progress,
+			transform: [{ scale: SCALE_FROM + .050000000000000044 * progress }]
+		};
+	});
+}
+/**
+* Sends the screen reader back to the trigger once a panel has gone, unless
+* `quiet` says nothing moved it there, as a pointer resting on a hover
+* trigger does not. React Native Web's `Modal` restores focus itself, and has
+* no screen reader to send otherwise.
+*/
+function useReturnFocus(present, quiet, trigger) {
+	const $ = c(8);
+	const shown = useRef(present);
+	let t0;
+	if ($[0] !== present || $[1] !== quiet || $[2] !== trigger.current) {
+		t0 = () => {
+			const gone = shown.current && !present;
+			const target = trigger.current;
+			shown.current = present;
+			if (gone && !quiet && target !== null && Platform.OS !== "web") AccessibilityInfo.sendAccessibilityEvent(target, "focus");
+		};
+		$[0] = present;
+		$[1] = quiet;
+		$[2] = trigger.current;
+		$[3] = t0;
+	} else t0 = $[3];
+	let t1;
+	if ($[4] !== present || $[5] !== quiet || $[6] !== trigger) {
+		t1 = [
+			quiet,
+			present,
+			trigger
+		];
+		$[4] = present;
+		$[5] = quiet;
+		$[6] = trigger;
+		$[7] = t1;
+	} else t1 = $[7];
+	useEffect(t0, t1);
+}
+//#endregion
+export { DismissLayer, PANEL_ORIGINS, useBackToClose, useFocusOnPlaced, usePanelMotion, useReturnFocus };
+
+//# sourceMappingURL=panel.js.map

package/dist/overlay/panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","names":["RefObject","HostInstance","useEffect","useRef","AccessibilityInfo","BackHandler","Platform","Pressable","StyleSheet","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","OverlaySide","useTheme","SCALE_FROM","PANEL_ORIGINS","bottom","left","right","top","const","Record","styles","create","layer","position","DismissLayer","t0","$","_c","onPress","t1","useBackToClose","close","active","OS","subscription","addEventListener","remove","useFocusOnPlaced","ready","target","sendAccessibilityEvent","usePanelMotion","isOpen","placed","setPresent","motion","reduceMotion","shown","set","duration","durationShort3","easing","bezier","easingEmphasizedDecelerate","durationShort2","easingEmphasizedAccelerate","timer","setTimeout","clearTimeout","progress","get","opacity","transform","scale","useReturnFocus","present","quiet","trigger","current","gone","_c"],"sources":["../../src/overlay/panel.tsx"],"sourcesContent":["import type { RefObject } from 'react'\nimport type { HostInstance } from 'react-native'\n\nimport { useEffect, useRef } from 'react'\nimport {\n  AccessibilityInfo,\n  BackHandler,\n  Platform,\n  Pressable,\n  StyleSheet,\n} from 'react-native'\nimport {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport type { OverlaySide } from './placement'\n\nimport { useTheme } from '../theme/scope'\n\n// What a non-modal panel anchored beside its trigger does besides being\n// placed, shared by Popover and Menu so the two cannot drift: the layer a\n// press outside lands on, Android's back gesture, the motion in and out, and\n// where a screen reader is sent as it comes and goes.\n\n// What the panel scales up from as it arrives, web's keyframes'.\nconst SCALE_FROM = 0.95\n\n/** The edge a panel grows from, the one facing its anchor. */\nconst PANEL_ORIGINS = {\n  bottom: 'top',\n  left: 'right',\n  right: 'left',\n  top: 'bottom',\n} as const satisfies Record<OverlaySide, string>\n\nconst styles = StyleSheet.create({\n  // Over the whole screen and under the panel.\n  layer: {\n    bottom: 0,\n    left: 0,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n})\n\n/**\n * The layer a press outside a non-modal panel lands on, drawn just before the\n * panel so it sits under it. The press goes no further, so a press on the\n * trigger closes the panel rather than opening it again, as on web. Nothing\n * but that press reaches it: React Native Web's Pressable is a tab stop\n * unless told otherwise, whatever `focusable` says.\n */\nfunction DismissLayer({ onPress }: { readonly onPress: () => void }) {\n  return (\n    <Pressable\n      accessible={false}\n      aria-hidden\n      focusable={false}\n      onPress={onPress}\n      style={styles.layer}\n      tabIndex={-1}\n    />\n  )\n}\n\n/**\n * Closes a non-modal panel from Android's back gesture, as a `Modal` closes a\n * modal one. React Native calls the latest listener first, so a panel opened\n * from another closes before the one it came from. React Native Web has no\n * back gesture, and its BackHandler reports an error when one is listened for,\n * so nothing listens there.\n */\nfunction useBackToClose(close: () => void, active: boolean) {\n  useEffect(() => {\n    if (!active || Platform.OS === 'web') {\n      return undefined\n    }\n\n    const subscription = BackHandler.addEventListener(\n      'hardwareBackPress',\n      () => {\n        close()\n        return true\n      },\n    )\n\n    return () => {\n      subscription.remove()\n    }\n  }, [active, close])\n}\n\n/**\n * Sends the screen reader to `target` once `ready`, which a panel passes once\n * it has been placed, and so can be seen. React Native Web has no screen\n * reader of its own to send.\n */\nfunction useFocusOnPlaced(ready: boolean, target: HostInstance | null) {\n  useEffect(() => {\n    if (ready && target !== null && Platform.OS !== 'web') {\n      AccessibilityInfo.sendAccessibilityEvent(target, 'focus')\n    }\n  }, [ready, target])\n}\n\n/**\n * A panel's motion, and the timer that unmounts it once its exit has run: it\n * fades and scales up from 95% over the short3 duration on the emphasised\n * decelerating curve, and back over short2 on the accelerating one. The\n * entrance waits for the panel to be placed, so it is not spent while the\n * panel is still hidden being measured, and the panel stays transparent\n * until then. Under reduced motion it arrives and leaves at once.\n */\nfunction usePanelMotion(\n  isOpen: boolean,\n  placed: boolean,\n  setPresent: (present: boolean) => void,\n) {\n  const { motion } = useTheme()\n  const reduceMotion = useReducedMotion()\n  const shown = useSharedValue(0)\n\n  useEffect(() => {\n    if (isOpen && !placed) {\n      return undefined\n    }\n\n    if (isOpen) {\n      shown.set(\n        reduceMotion\n          ? 1\n          : withTiming(1, {\n              duration: motion.durationShort3,\n              easing: Easing.bezier(...motion.easingEmphasizedDecelerate),\n            }),\n      )\n      return undefined\n    }\n\n    if (reduceMotion) {\n      shown.set(0)\n      setPresent(false)\n      return undefined\n    }\n\n    shown.set(\n      withTiming(0, {\n        duration: motion.durationShort2,\n        easing: Easing.bezier(...motion.easingEmphasizedAccelerate),\n      }),\n    )\n    const timer = setTimeout(() => {\n      setPresent(false)\n    }, motion.durationShort2)\n\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [isOpen, motion, placed, reduceMotion, setPresent, shown])\n\n  return useAnimatedStyle(() => {\n    'worklet'\n    const progress = shown.get()\n\n    return {\n      opacity: progress,\n      transform: [{ scale: SCALE_FROM + (1 - SCALE_FROM) * progress }],\n    }\n  })\n}\n\n/**\n * Sends the screen reader back to the trigger once a panel has gone, unless\n * `quiet` says nothing moved it there, as a pointer resting on a hover\n * trigger does not. React Native Web's `Modal` restores focus itself, and has\n * no screen reader to send otherwise.\n */\nfunction useReturnFocus(\n  present: boolean,\n  quiet: boolean,\n  trigger: RefObject<HostInstance | null>,\n) {\n  const shown = useRef(present)\n\n  useEffect(() => {\n    const gone = shown.current && !present\n    const target = trigger.current\n\n    shown.current = present\n    if (gone && !quiet && target !== null && Platform.OS !== 'web') {\n      AccessibilityInfo.sendAccessibilityEvent(target, 'focus')\n    }\n  }, [quiet, present, trigger])\n}\n\nexport {\n  DismissLayer,\n  PANEL_ORIGINS,\n  useBackToClose,\n  useFocusOnPlaced,\n  usePanelMotion,\n  useReturnFocus,\n}\n"],"mappings":"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"}

package/dist/overlay/placement.d.ts

@@ -0,0 +1,8 @@
+//#region src/overlay/placement.d.ts
+/** Where along that side it lines up with the anchor. */
+type OverlayAlign = 'center' | 'end' | 'start';
+/** Which side of the anchor a surface opens on. */
+type OverlaySide = 'bottom' | 'left' | 'right' | 'top';
+//#endregion
+export type { OverlayAlign, OverlaySide };
+//# sourceMappingURL=placement.d.ts.map

package/dist/overlay/placement.js

@@ -0,0 +1,87 @@
+//#region src/overlay/placement.ts
+const OPPOSITE = {
+	bottom: "top",
+	left: "right",
+	right: "left",
+	top: "bottom"
+};
+/**
+* Where a surface of a given length starts along the anchor, for an edge,
+* moved by the offset. However far the offset moves it, it keeps overlapping
+* the anchor, as React Aria's placement does on web.
+*/
+function along(start, length, size, edge, offset) {
+	const lined = edge === "near" ? start : edge === "far" ? start + length - size : start + (length - size) / 2;
+	return Math.min(Math.max(lined + offset, start - size), start + length);
+}
+/**
+* Bounds a surface stays inside: the window, less the safe area's insets and
+* a padding on every side.
+*/
+function boundsOf(window, insets, padding) {
+	return {
+		height: window.height - insets.top - insets.bottom - padding * 2,
+		width: window.width - insets.left - insets.right - padding * 2,
+		x: insets.left + padding,
+		y: insets.top + padding
+	};
+}
+function edgeOf(align, inline, rtl) {
+	if (align === "center") return "center";
+	return align === "start" === (inline && rtl) ? "far" : "near";
+}
+function isVertical(side) {
+	return side === "bottom" || side === "top";
+}
+/**
+* Places a surface beside its anchor, as React Aria places a popover on web.
+*
+* It opens on `side`, lined up along it by `align`, and flips to the opposite
+* side when it does not fit and that side has more room. Along the side it is
+* shifted to stay inside the bounds; across it, on `top` and `bottom`, it
+* stays inside them through `maxHeight`, and on `left` and `right`, where a
+* surface wider than both sides has nowhere to go, it is shifted over the
+* anchor rather than past the edge.
+*/
+function place({ align, alignOffset, anchor, bounds, rtl, side: preferred, sideOffset, surface }) {
+	const room = (on) => spaceOn(on, anchor, bounds, sideOffset);
+	const opposite = OPPOSITE[preferred];
+	const side = (isVertical(preferred) ? surface.height : surface.width) > room(preferred) && room(opposite) > room(preferred) ? opposite : preferred;
+	if (isVertical(side)) {
+		const maxHeight = Math.max(0, room(side));
+		const height = Math.min(surface.height, maxHeight);
+		return {
+			maxHeight,
+			side,
+			x: within(along(anchor.x, anchor.width, surface.width, edgeOf(align, true, rtl), alignOffset), bounds.x, bounds.width, surface.width),
+			y: side === "bottom" ? anchor.y + anchor.height + sideOffset : anchor.y - sideOffset - height
+		};
+	}
+	const maxHeight = Math.max(0, bounds.height);
+	const height = Math.min(surface.height, maxHeight);
+	const x = side === "right" ? anchor.x + anchor.width + sideOffset : anchor.x - sideOffset - surface.width;
+	const y = along(anchor.y, anchor.height, height, edgeOf(align, false, rtl), alignOffset);
+	return {
+		maxHeight,
+		side,
+		x: within(x, bounds.x, bounds.width, surface.width),
+		y: within(y, bounds.y, bounds.height, height)
+	};
+}
+function spaceOn(side, anchor, bounds, sideOffset) {
+	return {
+		bottom: bounds.y + bounds.height - anchor.y - anchor.height,
+		left: anchor.x - bounds.x,
+		right: bounds.x + bounds.width - anchor.x - anchor.width,
+		top: anchor.y - bounds.y
+	}[side] - sideOffset;
+}
+function within(position, start, length, size) {
+	if (position < start) return start;
+	if (position + size > start + length) return Math.max(start + length - size, start);
+	return position;
+}
+//#endregion
+export { boundsOf, place };
+
+//# sourceMappingURL=placement.js.map

package/dist/overlay/placement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"placement.js","names":["Edge","OverlayAlign","OverlaySide","Placement","maxHeight","side","x","y","PlacementInput","align","alignOffset","anchor","Rect","bounds","rtl","sideOffset","surface","Size","height","width","OPPOSITE","bottom","left","right","top","const","Record","along","start","length","size","edge","offset","lined","Math","min","max","boundsOf","window","insets","padding","edgeOf","inline","isVertical","place","preferred","room","on","spaceOn","opposite","within","position"],"sources":["../../src/overlay/placement.ts"],"sourcesContent":["// Which end of the anchor the surface lines up with, along the side.\ntype Edge = 'center' | 'far' | 'near'\n\n/** Where along that side it lines up with the anchor. */\ntype OverlayAlign = 'center' | 'end' | 'start'\n\n/** Which side of the anchor a surface opens on. */\ntype OverlaySide = 'bottom' | 'left' | 'right' | 'top'\n\n/** Where an anchored surface sits, in the coordinates its inputs were in. */\ntype Placement = {\n  /**\n   * The height the surface may take before it would pass the edge of the\n   * bounds on the side it opened on. A surface taller than this scrolls.\n   */\n  readonly maxHeight: number\n  /** The side it opened on, which is the opposite one after a flip. */\n  readonly side: OverlaySide\n  readonly x: number\n  readonly y: number\n}\n\ntype PlacementInput = {\n  readonly align: OverlayAlign\n  /** Moves the surface along the side, in dp: right or down when positive. */\n  readonly alignOffset: number\n  readonly anchor: Rect\n  /** The area the surface stays inside, padding already taken off. */\n  readonly bounds: Rect\n  /** Whether `start` and `end` read from the right, on `top` and `bottom`. */\n  readonly rtl: boolean\n  readonly side: OverlaySide\n  /** The gap between the anchor and the surface, in dp. */\n  readonly sideOffset: number\n  readonly surface: Size\n}\n\ntype Rect = Size & { readonly x: number; readonly y: number }\n\ntype Size = { readonly height: number; readonly width: number }\n\nconst OPPOSITE = {\n  bottom: 'top',\n  left: 'right',\n  right: 'left',\n  top: 'bottom',\n} as const satisfies Record<OverlaySide, OverlaySide>\n\n/**\n * Where a surface of a given length starts along the anchor, for an edge,\n * moved by the offset. However far the offset moves it, it keeps overlapping\n * the anchor, as React Aria's placement does on web.\n */\nfunction along(\n  start: number,\n  length: number,\n  size: number,\n  edge: Edge,\n  offset: number,\n) {\n  const lined =\n    edge === 'near'\n      ? start\n      : edge === 'far'\n        ? start + length - size\n        : start + (length - size) / 2\n\n  return Math.min(Math.max(lined + offset, start - size), start + length)\n}\n\n/**\n * Bounds a surface stays inside: the window, less the safe area's insets and\n * a padding on every side.\n */\nfunction boundsOf(\n  window: Size,\n  insets: { bottom: number; left: number; right: number; top: number },\n  padding: number,\n): Rect {\n  return {\n    height: window.height - insets.top - insets.bottom - padding * 2,\n    width: window.width - insets.left - insets.right - padding * 2,\n    x: insets.left + padding,\n    y: insets.top + padding,\n  }\n}\n\n// Which end of the anchor an alignment names. On `top` and `bottom` the\n// surface lines up along the inline axis, so `start` is the left edge, or the\n// right one in a right-to-left layout; on `left` and `right` it lines up along\n// the block axis, where `start` is the top edge in both.\nfunction edgeOf(align: OverlayAlign, inline: boolean, rtl: boolean): Edge {\n  if (align === 'center') {\n    return 'center'\n  }\n\n  return (align === 'start') === (inline && rtl) ? 'far' : 'near'\n}\n\nfunction isVertical(side: OverlaySide) {\n  return side === 'bottom' || side === 'top'\n}\n\n/**\n * Places a surface beside its anchor, as React Aria places a popover on web.\n *\n * It opens on `side`, lined up along it by `align`, and flips to the opposite\n * side when it does not fit and that side has more room. Along the side it is\n * shifted to stay inside the bounds; across it, on `top` and `bottom`, it\n * stays inside them through `maxHeight`, and on `left` and `right`, where a\n * surface wider than both sides has nowhere to go, it is shifted over the\n * anchor rather than past the edge.\n */\nfunction place({\n  align,\n  alignOffset,\n  anchor,\n  bounds,\n  rtl,\n  side: preferred,\n  sideOffset,\n  surface,\n}: PlacementInput): Placement {\n  const room = (on: OverlaySide) => spaceOn(on, anchor, bounds, sideOffset)\n  const opposite = OPPOSITE[preferred]\n  const length = isVertical(preferred) ? surface.height : surface.width\n  const side =\n    length > room(preferred) && room(opposite) > room(preferred)\n      ? opposite\n      : preferred\n\n  if (isVertical(side)) {\n    const maxHeight = Math.max(0, room(side))\n    const height = Math.min(surface.height, maxHeight)\n    const x = along(\n      anchor.x,\n      anchor.width,\n      surface.width,\n      edgeOf(align, true, rtl),\n      alignOffset,\n    )\n\n    return {\n      maxHeight,\n      side,\n      x: within(x, bounds.x, bounds.width, surface.width),\n      y:\n        side === 'bottom'\n          ? anchor.y + anchor.height + sideOffset\n          : anchor.y - sideOffset - height,\n    }\n  }\n\n  const maxHeight = Math.max(0, bounds.height)\n  const height = Math.min(surface.height, maxHeight)\n  const x =\n    side === 'right'\n      ? anchor.x + anchor.width + sideOffset\n      : anchor.x - sideOffset - surface.width\n  const y = along(\n    anchor.y,\n    anchor.height,\n    height,\n    edgeOf(align, false, rtl),\n    alignOffset,\n  )\n\n  return {\n    maxHeight,\n    side,\n    x: within(x, bounds.x, bounds.width, surface.width),\n    y: within(y, bounds.y, bounds.height, height),\n  }\n}\n\n// The room between the anchor and the edge of the bounds on a side, less the\n// gap the surface keeps from the anchor.\nfunction spaceOn(\n  side: OverlaySide,\n  anchor: Rect,\n  bounds: Rect,\n  sideOffset: number,\n) {\n  const room = {\n    bottom: bounds.y + bounds.height - anchor.y - anchor.height,\n    left: anchor.x - bounds.x,\n    right: bounds.x + bounds.width - anchor.x - anchor.width,\n    top: anchor.y - bounds.y,\n  }\n\n  return room[side] - sideOffset\n}\n\n// Shifts a surface along an axis until it is inside the bounds, or, when it is\n// longer than they are, until it starts where they start.\nfunction within(position: number, start: number, length: number, size: number) {\n  if (position < start) {\n    return start\n  }\n\n  if (position + size > start + length) {\n    return Math.max(start + length - size, start)\n  }\n\n  return position\n}\n\nexport type { OverlayAlign, OverlaySide, Placement, PlacementInput, Rect, Size }\n\nexport { boundsOf, place }\n"],"mappings":"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"}