@kanso-labs/react-native-kanso-ui 0.3.1 → 0.5.0

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { Autocomplete, AutocompleteFilter, AutocompleteProps } from "./components/autocomplete/index.js";
 import { Avatar, AvatarProps } from "./components/avatar/index.js";
 import { Button, ButtonProps, ButtonShape, ButtonSize, ButtonVariant } from "./components/button/index.js";
 import { Card, CardProps, CardVariant } from "./components/card/index.js";
@@ -10,15 +11,20 @@ import { Dialog, DialogBody, DialogBodyProps, DialogContent, DialogContentProps,
 import { Form, FormHandle, FormProps } from "./components/form/index.js";
 import { IconButton, IconButtonProps, IconButtonSize, IconButtonVariant } from "./components/icon-button/index.js";
 import { Link, LinkProps, LinkTone, LinkUnderline } from "./components/link/index.js";
+import { List, ListLoadMore, ListLoadMoreProps, ListProps, ListRow, ListRowProps, ListSection, ListSectionProps } from "./components/list/index.js";
+import { ListItem, ListItemProps } from "./components/list-item/index.js";
+import { Menu, MenuAlign, MenuContent, MenuContentProps, MenuItem, MenuItemProps, MenuLoadMore, MenuLoadMoreProps, MenuProps, MenuSection, MenuSectionProps, MenuSeparator, MenuSeparatorProps, MenuSide, MenuSubmenu, MenuSubmenuProps, MenuTrigger } from "./components/menu/index.js";
 import { Meter, MeterProps, MeterTone } from "./components/meter/index.js";
 import { FieldVariant } from "./field/index.js";
 import { NumberField, NumberFieldProps } from "./components/number-field/index.js";
+import { Popover, PopoverAlign, PopoverContent, PopoverContentProps, PopoverDescription, PopoverDescriptionProps, PopoverProps, PopoverSide, PopoverSize, PopoverTitle, PopoverTitleProps, PopoverTrigger } from "./components/popover/index.js";
 import { ProductIcon, ProductIconProps } from "./components/product-icon/index.js";
 import { ProgressIndicator, ProgressIndicatorProps, ProgressIndicatorShape, ProgressIndicatorTone, ProgressIndicatorVariant } from "./components/progress-indicator/index.js";
 import { Radio, RadioGroup, RadioGroupOrientation, RadioGroupProps, RadioProps } from "./components/radio-group/index.js";
 import { SearchField, SearchFieldProps } from "./components/search-field/index.js";
 import { SegmentedButton, SegmentedButtonProps, SegmentedButtonSegment, SegmentedButtonSegmentProps } from "./components/segmented-button/index.js";
 import { Separator, SeparatorInset, SeparatorProps } from "./components/separator/index.js";
+import { Sheet, SheetBody, SheetBodyProps, SheetContent, SheetContentProps, SheetFooter, SheetHandle, SheetHandleProps, SheetHeader, SheetPartProps, SheetProps, SheetTitle, SheetTitleProps } from "./components/sheet/index.js";
 import { Snackbar, SnackbarAction, SnackbarOptions, SnackbarProps, SnackbarQueue } from "./components/snackbar/index.js";
 import { Stack, StackAlign, StackGap, StackJustify, StackProps } from "./components/stack/index.js";
 import { Switch, SwitchProps } from "./components/switch/index.js";
@@ -32,4 +38,4 @@ import { RouterProvider, RouterProviderProps } from "./router/index.js";
 import { ThemeScope, ThemeScopeProps } from "./theme-scope.js";
 import { ResolvedTheme, useTheme } from "./theme/scope.js";
 import { Key, Selection } from "react-stately";
-export { Avatar, type AvatarProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, Checkbox, type CheckboxProps, Chip, type ChipActionProps, type ChipFilterProps, ChipGroup, ChipGroupChip, type ChipGroupChipProps, type ChipGroupProps, type ChipProps, type ChipVariant, CopyField, type CopyFieldProps, Currency, type CurrencyProps, type CurrencySignDisplay, type CurrencyTone, Dialog, DialogBody, type DialogBodyProps, DialogContent, type DialogContentProps, DialogFooter, DialogHeader, type DialogPartProps, type DialogProps, DialogTitle, type DialogTitleProps, type FieldVariant, Form, type FormHandle, type FormProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconStyle, type Key, type KuiTheme, Link, type LinkProps, type LinkTone, type LinkUnderline, Meter, type MeterProps, type MeterTone, NumberField, type NumberFieldProps, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorShape, type ProgressIndicatorTone, type ProgressIndicatorVariant, Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, type ResolvedTheme, RouterProvider, type RouterProviderProps, SearchField, type SearchFieldProps, SegmentedButton, type SegmentedButtonProps, SegmentedButtonSegment, type SegmentedButtonSegmentProps, type Selection, Separator, type SeparatorInset, type SeparatorProps, Snackbar, type SnackbarAction, type SnackbarOptions, type SnackbarProps, type SnackbarQueue, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, Switch, type SwitchProps, Text, TextField, type TextFieldProps, type TextProps, ThemeScope, type ThemeScopeProps, type TypeRole, type WindowSizeClass, useIconStyle, useTheme, useWindowSizeClass };
+export { Autocomplete, type AutocompleteFilter, type AutocompleteProps, Avatar, type AvatarProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, Checkbox, type CheckboxProps, Chip, type ChipActionProps, type ChipFilterProps, ChipGroup, ChipGroupChip, type ChipGroupChipProps, type ChipGroupProps, type ChipProps, type ChipVariant, CopyField, type CopyFieldProps, Currency, type CurrencyProps, type CurrencySignDisplay, type CurrencyTone, Dialog, DialogBody, type DialogBodyProps, DialogContent, type DialogContentProps, DialogFooter, DialogHeader, type DialogPartProps, type DialogProps, DialogTitle, type DialogTitleProps, type FieldVariant, Form, type FormHandle, type FormProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconStyle, type Key, type KuiTheme, Link, type LinkProps, type LinkTone, type LinkUnderline, List, ListItem, type ListItemProps, ListLoadMore, type ListLoadMoreProps, type ListProps, ListRow, type ListRowProps, ListSection, type ListSectionProps, Menu, type MenuAlign, MenuContent, type MenuContentProps, MenuItem, type MenuItemProps, MenuLoadMore, type MenuLoadMoreProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, type MenuSide, MenuSubmenu, type MenuSubmenuProps, type MenuTrigger, Meter, type MeterProps, type MeterTone, NumberField, type NumberFieldProps, Popover, type PopoverAlign, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, type PopoverProps, type PopoverSide, type PopoverSize, PopoverTitle, type PopoverTitleProps, type PopoverTrigger, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorShape, type ProgressIndicatorTone, type ProgressIndicatorVariant, Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, type ResolvedTheme, RouterProvider, type RouterProviderProps, SearchField, type SearchFieldProps, SegmentedButton, type SegmentedButtonProps, SegmentedButtonSegment, type SegmentedButtonSegmentProps, type Selection, Separator, type SeparatorInset, type SeparatorProps, Sheet, SheetBody, type SheetBodyProps, SheetContent, type SheetContentProps, SheetFooter, SheetHandle, type SheetHandleProps, SheetHeader, type SheetPartProps, type SheetProps, SheetTitle, type SheetTitleProps, Snackbar, type SnackbarAction, type SnackbarOptions, type SnackbarProps, type SnackbarQueue, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, Switch, type SwitchProps, Text, TextField, type TextFieldProps, type TextProps, ThemeScope, type ThemeScopeProps, type TypeRole, type WindowSizeClass, useIconStyle, useTheme, useWindowSizeClass };

package/dist/index.js

@@ -1,3 +1,4 @@
+import { Autocomplete } from "./components/autocomplete/index.js";
 import { useIconStyle } from "./glyphs/icon-style.js";
 import { useTheme } from "./theme/scope.js";
 import { Avatar } from "./components/avatar/index.js";
@@ -16,16 +17,21 @@ import { Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTi
 import { Form } from "./components/form/index.js";
 import { IconButton } from "./components/icon-button/index.js";
 import { Link } from "./components/link/index.js";
+import { List, ListLoadMore, ListRow, ListSection } from "./components/list/index.js";
+import { ListItem } from "./components/list-item/index.js";
+import { Separator } from "./components/separator/index.js";
+import { Menu, MenuContent, MenuItem, MenuLoadMore, MenuSection, MenuSeparator, MenuSubmenu } from "./components/menu/index.js";
 import { Meter } from "./components/meter/index.js";
 import { NumberField } from "./components/number-field/index.js";
+import { Popover, PopoverContent, PopoverDescription, PopoverTitle } from "./components/popover/index.js";
 import { ProductIcon } from "./components/product-icon/index.js";
 import { Radio, RadioGroup } from "./components/radio-group/index.js";
 import { SearchField } from "./components/search-field/index.js";
 import { SegmentedButton, SegmentedButtonSegment } from "./components/segmented-button/index.js";
-import { Separator } from "./components/separator/index.js";
+import { Sheet, SheetBody, SheetContent, SheetFooter, SheetHandle, SheetHeader, SheetTitle } from "./components/sheet/index.js";
 import { Snackbar } from "./components/snackbar/index.js";
 import { Stack } from "./components/stack/index.js";
 import { Switch } from "./components/switch/index.js";
 import { TextField } from "./components/text-field/index.js";
 import { ThemeScope } from "./theme-scope.js";
-export { Avatar, Button, Card, Checkbox, Chip, ChipGroup, ChipGroupChip, CopyField, Currency, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Form, IconButton, Link, Meter, NumberField, ProductIcon, ProgressIndicator, Radio, RadioGroup, RouterProvider, SearchField, SegmentedButton, SegmentedButtonSegment, Separator, Snackbar, Stack, Switch, Text, TextField, ThemeScope, useIconStyle, useTheme, useWindowSizeClass };
+export { Autocomplete, Avatar, Button, Card, Checkbox, Chip, ChipGroup, ChipGroupChip, CopyField, Currency, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Form, IconButton, Link, List, ListItem, ListLoadMore, ListRow, ListSection, Menu, MenuContent, MenuItem, MenuLoadMore, MenuSection, MenuSeparator, MenuSubmenu, Meter, NumberField, Popover, PopoverContent, PopoverDescription, PopoverTitle, ProductIcon, ProgressIndicator, Radio, RadioGroup, RouterProvider, SearchField, SegmentedButton, SegmentedButtonSegment, Separator, Sheet, SheetBody, SheetContent, SheetFooter, SheetHandle, SheetHeader, SheetTitle, Snackbar, Stack, Switch, Text, TextField, ThemeScope, useIconStyle, useTheme, useWindowSizeClass };

package/dist/indicator/index.d.ts

@@ -1,5 +1,5 @@
-import "react-native";
 import { ReactNode } from "react";
+import "react-native";
 import "react-native-reanimated";
 //#region src/indicator/index.d.ts
 /**

package/dist/indicator/index.js

@@ -1,14 +1,14 @@
+import { localeOf } from "../number/locale.js";
 import { useIconStyle } from "../glyphs/icon-style.js";
 import { useTheme } from "../theme/scope.js";
 import { composeStyles } from "../theme/styles.js";
 import { withOpacity } from "../theme/color.js";
 import { Text as Text$1 } from "../components/text/index.js";
-import { localeOf } from "../number/locale.js";
 import { styles, stylesOf } from "./styles.js";
 import { c } from "react/compiler-runtime";
-import { View } from "react-native";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { View } from "react-native";
 import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
 import { NumberFormatter } from "@internationalized/number";
 //#region src/indicator/index.tsx

package/dist/mark/index.d.ts

@@ -1,6 +1,6 @@
 import "./styles.js";
-import { ImageProps, StyleProp, View, ViewProps, ViewStyle } from "react-native";
 import { ComponentRef, Ref } from "react";
+import { ImageProps, StyleProp, View, ViewProps, ViewStyle } from "react-native";
 //#region src/mark/index.d.ts
 /** The native props a picture's own `Image` takes, as Avatar and ProductIcon take them. */
 type MarkImageProps = Pick<ImageProps, 'crossOrigin' | 'fadeDuration' | 'progressiveRenderingEnabled' | 'referrerPolicy' | 'resizeMethod'>;

package/dist/mark/index.js

@@ -6,8 +6,8 @@ import { useImageLoadingStatus } from "./image.js";
 import { initialOfThing, initialsOfPerson } from "./initials.js";
 import { DIAMETERS, GLYPH_SHARE, initialsStylesOf, markStyles, markStylesOf } from "./styles.js";
 import { c } from "react/compiler-runtime";
-import { Image, Text, View } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Image, Text, View } from "react-native";
 //#region src/mark/index.tsx
 const KINDS = {
 	person: {

package/dist/modal/index.d.ts

@@ -0,0 +1,16 @@
+import "../button/slots.js";
+import { ReactNode } from "react";
+import { HostInstance, ViewProps, ViewStyle } from "react-native";
+import "react-native-reanimated";
+import "react-native-safe-area-context";
+import "react-stately/useOverlayTriggerState";
+//#region src/modal/index.d.ts
+/** Whether a modal surface is open, and who holds that state. */
+type ModalOpenProps = {
+  readonly defaultOpen?: boolean;
+  readonly isOpen?: boolean;
+  readonly onOpenChange?: (isOpen: boolean) => void;
+};
+//#endregion
+export type { ModalOpenProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/modal/index.js

@@ -0,0 +1,277 @@
+import { useTheme } from "../theme/scope.js";
+import { composeStyles, themedStyles } from "../theme/styles.js";
+import { ButtonSlotContext } from "../button/slots.js";
+import { AnimatedPressable } from "../button/index.js";
+import { withOpacity } from "../theme/color.js";
+import { OverlayHost } from "../overlay/host.js";
+import { c } from "react/compiler-runtime";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AccessibilityInfo, I18nManager, Modal, Platform, StyleSheet } from "react-native";
+import { useOverlayTriggerState } from "react-stately/useOverlayTriggerState";
+//#region src/modal/index.tsx
+const NO_INSETS = {
+	bottom: 0,
+	left: 0,
+	right: 0,
+	top: 0
+};
+const ORIENTATIONS = [
+	"portrait",
+	"portrait-upside-down",
+	"landscape",
+	"landscape-left",
+	"landscape-right"
+];
+const SCRIM_OPACITY = .32;
+const stylesOf = themedStyles(({ colors }) => StyleSheet.create({ scrim: {
+	backgroundColor: withOpacity(colors.scrim, SCRIM_OPACITY),
+	bottom: 0,
+	left: 0,
+	position: "absolute",
+	right: 0,
+	top: 0
+} }));
+function focusOf(title) {
+	return () => {
+		if (title !== null && Platform.OS !== "web") AccessibilityInfo.sendAccessibilityEvent(title, "focus");
+	};
+}
+function ignore() {}
+function insetsOf(insets) {
+	const rtl = I18nManager.isRTL;
+	return {
+		paddingBottom: insets.bottom,
+		paddingEnd: rtl ? insets.left : insets.right,
+		paddingStart: rtl ? insets.right : insets.left,
+		paddingTop: insets.top
+	};
+}
+/**
+* The window a modal surface is drawn in: the `Modal`, the overlays it hosts,
+* and the scrim, with the surface itself as its children.
+*/
+function ModalWindow(t0) {
+	const $ = c(20);
+	const { children, isKeyboardDismissDisabled, labelledBy, onClose, onScrimPress, scrim, title } = t0;
+	const styles = stylesOf(useTheme());
+	const T0 = Modal;
+	const t1 = "none";
+	const t2 = Platform.OS === "web" ? labelledBy : void 0;
+	const t3 = true;
+	const t4 = isKeyboardDismissDisabled ? ignore : onClose;
+	let t5;
+	if ($[0] !== title) {
+		t5 = focusOf(title);
+		$[0] = title;
+		$[1] = t5;
+	} else t5 = $[1];
+	const t6 = true;
+	const t7 = ORIENTATIONS;
+	const t8 = true;
+	const t9 = true;
+	const T1 = ButtonSlotContext;
+	const t10 = null;
+	const T2 = OverlayHost;
+	const T3 = AnimatedPressable;
+	const t11 = false;
+	const t12 = true;
+	const t13 = false;
+	const t14 = composeStyles(styles.scrim, scrim);
+	let t15;
+	if ($[2] !== T3 || $[3] !== onScrimPress || $[4] !== t14) {
+		t15 = /* @__PURE__ */ jsx(T3, {
+			accessible: t11,
+			"aria-hidden": t12,
+			focusable: t13,
+			onPress: onScrimPress,
+			style: t14,
+			tabIndex: -1
+		});
+		$[2] = T3;
+		$[3] = onScrimPress;
+		$[4] = t14;
+		$[5] = t15;
+	} else t15 = $[5];
+	let t16;
+	if ($[6] !== T2 || $[7] !== children || $[8] !== t15) {
+		t16 = /* @__PURE__ */ jsxs(T2, { children: [t15, children] });
+		$[6] = T2;
+		$[7] = children;
+		$[8] = t15;
+		$[9] = t16;
+	} else t16 = $[9];
+	let t17;
+	if ($[10] !== T1 || $[11] !== t16) {
+		t17 = /* @__PURE__ */ jsx(T1, {
+			value: t10,
+			children: t16
+		});
+		$[10] = T1;
+		$[11] = t16;
+		$[12] = t17;
+	} else t17 = $[12];
+	let t18;
+	if ($[13] !== T0 || $[14] !== t17 || $[15] !== t2 || $[16] !== t4 || $[17] !== t5 || $[18] !== t7) {
+		t18 = /* @__PURE__ */ jsx(T0, {
+			animationType: t1,
+			"aria-labelledby": t2,
+			navigationBarTranslucent: t3,
+			onRequestClose: t4,
+			onShow: t5,
+			statusBarTranslucent: t6,
+			supportedOrientations: t7,
+			transparent: t8,
+			visible: t9,
+			children: t17
+		});
+		$[13] = T0;
+		$[14] = t17;
+		$[15] = t2;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t7;
+		$[19] = t18;
+	} else t18 = $[19];
+	return t18;
+}
+function panelRoleOf(role, labelledBy) {
+	if (Platform.OS === "web") return {};
+	return {
+		"aria-labelledby": labelledBy,
+		"aria-modal": true,
+		role
+	};
+}
+function registerOf(setParts) {
+	return (part) => {
+		setParts((parts) => ({
+			...parts,
+			[part]: parts[part] + 1
+		}));
+		return () => {
+			setParts((parts) => ({
+				...parts,
+				[part]: parts[part] - 1
+			}));
+		};
+	};
+}
+/**
+* The open state a surface's content part reads: its trigger's, inside one,
+* and its own otherwise. `present` stays true from the moment it opens until
+* the call site's exit has run and set it false, and the close slot and the
+* scrim close it through `close`.
+*/
+function useModalState(outer, props) {
+	const $ = c(9);
+	const own = useOverlayTriggerState(props);
+	const state = outer?.state ?? own;
+	const [present, setPresent] = useState(state.isOpen);
+	let t0;
+	if ($[0] !== state) {
+		t0 = () => {
+			state.close();
+		};
+		$[0] = state;
+		$[1] = t0;
+	} else t0 = $[1];
+	const close = t0;
+	let t1;
+	if ($[2] !== close) {
+		t1 = { close };
+		$[2] = close;
+		$[3] = t1;
+	} else t1 = $[3];
+	const slots = t1;
+	if (state.isOpen && !present) setPresent(true);
+	useReturnFocus(present, outer);
+	let t2;
+	if ($[4] !== close || $[5] !== present || $[6] !== slots || $[7] !== state) {
+		t2 = {
+			close,
+			present,
+			setPresent,
+			slots,
+			state
+		};
+		$[4] = close;
+		$[5] = present;
+		$[6] = slots;
+		$[7] = state;
+		$[8] = t2;
+	} else t2 = $[8];
+	return t2;
+}
+/**
+* The open state a surface's trigger part holds, and the default slot a
+* button inside it fills: it records itself as the button focus returns to,
+* and opens the surface. React Native types the target as a bare view tag
+* too, which focus cannot be sent to, so such a press records nothing.
+*/
+function useModalTrigger(props) {
+	const $ = c(8);
+	const state = useOverlayTriggerState(props);
+	const [trigger, setTrigger] = useState(null);
+	let t0;
+	if ($[0] !== state || $[1] !== trigger) {
+		t0 = {
+			state,
+			trigger
+		};
+		$[0] = state;
+		$[1] = trigger;
+		$[2] = t0;
+	} else t0 = $[2];
+	const context = t0;
+	let t1;
+	if ($[3] !== state) {
+		t1 = { default: (event) => {
+			const target = event.currentTarget;
+			setTrigger(typeof target === "number" ? null : target);
+			state.open();
+		} };
+		$[3] = state;
+		$[4] = t1;
+	} else t1 = $[4];
+	const slots = t1;
+	let t2;
+	if ($[5] !== context || $[6] !== slots) {
+		t2 = {
+			context,
+			slots
+		};
+		$[5] = context;
+		$[6] = slots;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+function useReturnFocus(present, outer) {
+	const $ = c(6);
+	const shown = useRef(present);
+	let t0;
+	if ($[0] !== outer?.trigger || $[1] !== present) {
+		t0 = () => {
+			const trigger = outer?.trigger ?? null;
+			const gone = shown.current && !present;
+			shown.current = present;
+			if (gone && trigger !== null && Platform.OS !== "web") AccessibilityInfo.sendAccessibilityEvent(trigger, "focus");
+		};
+		$[0] = outer?.trigger;
+		$[1] = present;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== outer || $[4] !== present) {
+		t1 = [outer, present];
+		$[3] = outer;
+		$[4] = present;
+		$[5] = t1;
+	} else t1 = $[5];
+	useEffect(t0, t1);
+}
+//#endregion
+export { ModalWindow, NO_INSETS, insetsOf, panelRoleOf, registerOf, useModalState, useModalTrigger };
+
+//# sourceMappingURL=index.js.map

package/dist/modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","GestureResponderEvent","HostInstance","ModalProps","ViewProps","ViewStyle","AnimatedStyle","EdgeInsets","OverlayTriggerState","useCallback","useEffect","useMemo","useRef","useState","AccessibilityInfo","I18nManager","Modal","Platform","StyleSheet","useOverlayTriggerState","ButtonSlots","ResolvedTheme","AnimatedPressable","ButtonSlotContext","OverlayHost","withOpacity","useTheme","composeStyles","themedStyles","NO_INSETS","bottom","left","right","top","ORIENTATIONS","SCRIM_OPACITY","stylesOf","colors","create","scrim","backgroundColor","position","ModalOpenProps","defaultOpen","isOpen","onOpenChange","ModalTrigger","state","trigger","ModalWindowProps","children","isKeyboardDismissDisabled","labelledBy","onClose","onScrimPress","title","focusOf","OS","sendAccessibilityEvent","ignore","insetsOf","insets","rtl","isRTL","paddingBottom","paddingEnd","paddingStart","paddingTop","ModalWindow","t0","$","_c","styles","T0","t1","t2","undefined","t3","t4","t5","t6","t8","t9","T1","t10","T2","T3","t11","t12","t13","t14","t15","t16","t17","t18","t7","panelRoleOf","role","Pick","registerOf","setParts","update","parts","Readonly","Record","Part","part","useModalState","outer","props","own","present","setPresent","close","slots","useReturnFocus","useModalTrigger","setTrigger","context","default","event","target","currentTarget","open","shown","gone","current","_c"],"sources":["../../src/modal/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type {\n  GestureResponderEvent,\n  HostInstance,\n  ModalProps,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type { EdgeInsets } from 'react-native-safe-area-context'\nimport type { OverlayTriggerState } from 'react-stately/useOverlayTriggerState'\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport {\n  AccessibilityInfo,\n  I18nManager,\n  Modal,\n  Platform,\n  StyleSheet,\n} from 'react-native'\nimport { useOverlayTriggerState } from 'react-stately/useOverlayTriggerState'\n\nimport type { ButtonSlots } from '../button/slots'\nimport type { ResolvedTheme } from '../theme/scope'\n\nimport { AnimatedPressable } from '../button'\nimport { ButtonSlotContext } from '../button/slots'\nimport { OverlayHost } from '../overlay'\nimport { withOpacity } from '../theme/color'\nimport { useTheme } from '../theme/scope'\nimport { composeStyles, themedStyles } from '../theme/styles'\n\n// The window a modal surface is drawn in, and what a dialog and a sheet share\n// around it: the trigger that opens it, the open state, the scrim, and where\n// focus goes as it shows and once it has gone. Internal: nothing here is\n// exported from the package.\n//\n// **It is a React Native `Modal`**, which keeps React context, so the surface\n// keeps the `ThemeScope` around it, and which is a window of its own on iOS\n// and Android, above the screen and its overlays. The window therefore hosts\n// overlays of its own, so a snackbar or a popover raised from inside it draws\n// above it rather than under it.\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: EdgeInsets = { bottom: 0, left: 0, right: 0, top: 0 }\n\n// iOS presents a `Modal` in portrait alone unless told otherwise, which would\n// turn an app held sideways round as the surface opened.\nconst ORIENTATIONS: ModalProps['supportedOrientations'] = [\n  'portrait',\n  'portrait-upside-down',\n  'landscape',\n  'landscape-left',\n  'landscape-right',\n]\n\n// The scrim is the scrim role at 32%, the opacity Material Design gives a\n// modal's scrim and web mixes in.\nconst SCRIM_OPACITY = 0.32\n\nconst stylesOf = themedStyles(({ colors }: ResolvedTheme) =>\n  StyleSheet.create({\n    scrim: {\n      backgroundColor: withOpacity(colors.scrim, SCRIM_OPACITY),\n      bottom: 0,\n      left: 0,\n      position: 'absolute',\n      right: 0,\n      top: 0,\n    },\n  }),\n)\n\n/** Whether a modal surface is open, and who holds that state. */\ntype ModalOpenProps = {\n  readonly defaultOpen?: boolean\n  readonly isOpen?: boolean\n  readonly onOpenChange?: (isOpen: boolean) => void\n}\n\n/**\n * What a surface's trigger part hands its content: the open state, and the\n * button that last opened it, for focus to return to.\n */\ntype ModalTrigger = {\n  readonly state: OverlayTriggerState\n  readonly trigger: HostInstance | null\n}\n\ntype ModalWindowProps = {\n  readonly children?: ReactNode\n  /** Whether Android's back gesture and Escape on web leave it open. */\n  readonly isKeyboardDismissDisabled: boolean\n  /** The headline's id, which names the window on web. */\n  readonly labelledBy: string | undefined\n  /** What the back gesture and Escape call. */\n  readonly onClose: () => void\n  /** What a press on the scrim calls, or nothing where it closes nothing. */\n  readonly onScrimPress: (() => void) | undefined\n  /** The scrim's motion. */\n  readonly scrim: AnimatedStyle<ViewStyle>\n  /** The headline, which a screen reader is sent to once the window shows. */\n  readonly title: HostInstance | null\n}\n\n// Sends the screen reader to the headline once the window has shown. React\n// Native Web's `Modal` moves focus into itself.\nfunction focusOf(title: HostInstance | null) {\n  return () => {\n    if (title !== null && Platform.OS !== 'web') {\n      AccessibilityInfo.sendAccessibilityEvent(title, 'focus')\n    }\n  }\n}\n\n// What the back gesture does on a surface it may not close: nothing, rather\n// than leaving the handler out, which Android warns about.\nfunction ignore() {}\n\n// The safe area as padding. The insets are physical edges, and React Native\n// swaps a left and a right style under a right-to-left layout, so they are\n// handed over as the start and end they are in the direction the layout runs.\nfunction insetsOf(insets: EdgeInsets): ViewStyle {\n  const rtl = I18nManager.isRTL\n\n  return {\n    paddingBottom: insets.bottom,\n    paddingEnd: rtl ? insets.left : insets.right,\n    paddingStart: rtl ? insets.right : insets.left,\n    paddingTop: insets.top,\n  }\n}\n\n/**\n * The window a modal surface is drawn in: the `Modal`, the overlays it hosts,\n * and the scrim, with the surface itself as its children.\n */\nfunction ModalWindow({\n  children,\n  isKeyboardDismissDisabled,\n  labelledBy,\n  onClose,\n  onScrimPress,\n  scrim,\n  title,\n}: ModalWindowProps) {\n  const styles = stylesOf(useTheme())\n\n  return (\n    <Modal\n      animationType=\"none\"\n      aria-labelledby={Platform.OS === 'web' ? labelledBy : undefined}\n      navigationBarTranslucent\n      onRequestClose={isKeyboardDismissDisabled ? ignore : onClose}\n      onShow={focusOf(title)}\n      statusBarTranslucent\n      supportedOrientations={ORIENTATIONS}\n      transparent\n      visible\n    >\n      {/* Nothing in the window takes the trigger's slot, the overlays it\n          hosts included, so a button in a snackbar raised from the surface\n          opens nothing; only the surface's buttons take the close slot. */}\n      <ButtonSlotContext value={null}>\n        <OverlayHost>\n          {/* A screen reader and a keyboard skip the scrim: the first closes\n            the surface with the back or escape gesture, the second with\n            Escape. React Native Web's Pressable is a tab stop unless told\n            otherwise, whatever `focusable` says. */}\n          <AnimatedPressable\n            accessible={false}\n            aria-hidden\n            focusable={false}\n            onPress={onScrimPress}\n            style={composeStyles<AnimatedStyle<ViewStyle>>(styles.scrim, scrim)}\n            tabIndex={-1}\n          />\n          {children}\n        </OverlayHost>\n      </ButtonSlotContext>\n    </Modal>\n  )\n}\n\n// The surface's role and name on iOS and Android. On web React Native Web's\n// `Modal` is the dialog element, so the surface takes neither there.\nfunction panelRoleOf(\n  role: 'alertdialog' | 'dialog',\n  labelledBy: string | undefined,\n): Pick<ViewProps, 'aria-labelledby' | 'aria-modal' | 'role'> {\n  if (Platform.OS === 'web') {\n    return {}\n  }\n\n  return { 'aria-labelledby': labelledBy, 'aria-modal': true, role }\n}\n\n// Counts each part as it mounts and unmounts, so the parts around it know\n// which of them are there.\nfunction registerOf<Part extends string>(\n  setParts: (\n    update: (\n      parts: Readonly<Record<Part, number>>,\n    ) => Readonly<Record<Part, number>>,\n  ) => void,\n) {\n  return (part: Part) => {\n    setParts((parts) => ({ ...parts, [part]: parts[part] + 1 }))\n\n    return () => {\n      setParts((parts) => ({ ...parts, [part]: parts[part] - 1 }))\n    }\n  }\n}\n\n/**\n * The open state a surface's content part reads: its trigger's, inside one,\n * and its own otherwise. `present` stays true from the moment it opens until\n * the call site's exit has run and set it false, and the close slot and the\n * scrim close it through `close`.\n */\nfunction useModalState(outer: ModalTrigger | null, props: ModalOpenProps) {\n  const own = useOverlayTriggerState(props)\n  const state = outer?.state ?? own\n  const [present, setPresent] = useState(state.isOpen)\n  const close = useCallback(() => {\n    state.close()\n  }, [state])\n  const slots = useMemo<ButtonSlots>(() => ({ close }), [close])\n\n  // Mounted the moment it opens, and kept until its exit has run.\n  if (state.isOpen && !present) {\n    setPresent(true)\n  }\n\n  useReturnFocus(present, outer)\n\n  return { close, present, setPresent, slots, state }\n}\n\n/**\n * The open state a surface's trigger part holds, and the default slot a\n * button inside it fills: it records itself as the button focus returns to,\n * and opens the surface. React Native types the target as a bare view tag\n * too, which focus cannot be sent to, so such a press records nothing.\n */\nfunction useModalTrigger(props: ModalOpenProps) {\n  const state = useOverlayTriggerState(props)\n  const [trigger, setTrigger] = useState<HostInstance | null>(null)\n  const context = useMemo<ModalTrigger>(\n    () => ({ state, trigger }),\n    [state, trigger],\n  )\n  const slots = useMemo<ButtonSlots>(\n    () => ({\n      default: (event: GestureResponderEvent) => {\n        const target = event.currentTarget\n\n        setTrigger(typeof target === 'number' ? null : target)\n        state.open()\n      },\n    }),\n    [state],\n  )\n\n  return { context, slots }\n}\n\n// Sends the screen reader back to the button that opened the surface once it\n// has gone. React Native Web's `Modal` restores focus itself.\nfunction useReturnFocus(present: boolean, outer: ModalTrigger | null) {\n  const shown = useRef(present)\n\n  useEffect(() => {\n    const trigger = outer?.trigger ?? null\n    const gone = shown.current && !present\n\n    shown.current = present\n    if (gone && trigger !== null && Platform.OS !== 'web') {\n      AccessibilityInfo.sendAccessibilityEvent(trigger, 'focus')\n    }\n  }, [outer, present])\n}\n\nexport {\n  insetsOf,\n  ModalWindow,\n  NO_INSETS,\n  panelRoleOf,\n  registerOf,\n  useModalState,\n  useModalTrigger,\n}\nexport type { ModalOpenProps, ModalTrigger }\n"],"mappings":"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"}

package/dist/overlay/anchored.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from "react";
+import { HostInstance, ViewStyle } from "react-native";

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 { use, useEffect, useState } from "react";
+import { Dimensions, I18nManager, useWindowDimensions } from "react-native";
+import { SafeAreaInsetsContext } from "react-native-safe-area-context";
+//#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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"}