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

package/dist/button/slots.d.ts

@@ -0,0 +1 @@
+import "react-native";

package/dist/button/slots.js.map

@@ -1 +1 @@
-{"version":3,"file":"slots.js","names":["GestureResponderEvent","createContext","ButtonSlots","close","event","default","ButtonSlotContext"],"sources":["../../src/button/slots.ts"],"sourcesContent":["import type { GestureResponderEvent } from 'react-native'\n\nimport { createContext } from 'react'\n\n/**\n * What a button does past its own press when it sits in an overlay's trigger\n * or content, as web's React Aria hands the same through a button's `slot`:\n * the default slot opens the overlay, which a button inside `Dialog` and\n * outside its content takes, and `close` closes it, which one given\n * `slot=\"close\"` inside the content takes. The overlay provides the slots it\n * fills, and resets the default one inside its content, so a button there\n * opens nothing.\n */\ntype ButtonSlots = {\n  readonly close?: (event: GestureResponderEvent) => void\n  readonly default?: (event: GestureResponderEvent) => void\n}\n\nconst ButtonSlotContext = createContext<ButtonSlots | null>(null)\n\nexport { ButtonSlotContext }\nexport type { ButtonSlots }\n"],"mappings":";;AAkBA,MAAMM,oBAAoBL,cAAkC,IAAI"}
+{"version":3,"file":"slots.js","names":["GestureResponderEvent","createContext","ButtonSlots","close","event","default","ButtonSlotContext"],"sources":["../../src/button/slots.ts"],"sourcesContent":["import type { GestureResponderEvent } from 'react-native'\n\nimport { createContext } from 'react'\n\n/**\n * What a button does past its own press when it sits in an overlay's trigger\n * or content, as web's React Aria hands the same through a button's `slot`:\n * the default slot opens the overlay, which a button inside `Dialog` or\n * `Sheet` and outside its content takes, and `close` closes it, which one\n * given `slot=\"close\"` inside the content takes. The overlay provides the\n * slots it fills, and resets the default one inside its content, so a button\n * there opens nothing.\n */\ntype ButtonSlots = {\n  readonly close?: (event: GestureResponderEvent) => void\n  readonly default?: (event: GestureResponderEvent) => void\n}\n\nconst ButtonSlotContext = createContext<ButtonSlots | null>(null)\n\nexport { ButtonSlotContext }\nexport type { ButtonSlots }\n"],"mappings":";;AAkBA,MAAMM,oBAAoBL,cAAkC,IAAI"}

package/dist/components/dialog/index.d.ts

@@ -1,3 +1,4 @@
+import { ModalOpenProps } from "../../modal/index.js";
 import { HostInstance, ScrollView, ScrollViewProps, StyleProp, TextProps, View, ViewProps, ViewStyle } from "react-native";
 import { ComponentRef, ReactNode, Ref } from "react";
 //#region src/components/dialog/index.d.ts
@@ -31,7 +32,7 @@ type DialogContentProps = DialogOpenProps & Omit<ViewProps, 'children' | 'role'
   readonly role?: 'alertdialog' | 'dialog';
   readonly style?: StyleProp<ViewStyle>;
 };
-type DialogOpenProps = {
+type DialogOpenProps = ModalOpenProps & {
   /** Whether the dialog starts open, when it keeps its own state. */
   readonly defaultOpen?: boolean;
   /** Whether the dialog is open, when the call site holds the state. */

package/dist/components/dialog/index.js

@@ -2,36 +2,19 @@ import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
 import { useTypeRole } from "../../typography/roles.js";
 import { ButtonSlotContext } from "../../button/slots.js";
-import { AnimatedPressable } from "../../button/index.js";
-import { withOpacity } from "../../theme/color.js";
 import { useWindowSizeClass } from "../../hooks/useWindowSizeClass.js";
-import { OverlayHost } from "../../overlay/host.js";
+import { ModalWindow, NO_INSETS, insetsOf, panelRoleOf, refsOf, registerOf, useModalState, useModalTrigger } from "../../modal/index.js";
 import { c } from "react/compiler-runtime";
-import { AccessibilityInfo, Modal, Platform, ScrollView, StyleSheet, Text, View, useWindowDimensions } from "react-native";
-import { createContext, use, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { ScrollView, StyleSheet, Text, View, useWindowDimensions } from "react-native";
+import { createContext, use, useEffect, useId, useLayoutEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
 import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
 import { SafeAreaInsetsContext } from "react-native-safe-area-context";
-import { useOverlayTriggerState } from "react-stately/useOverlayTriggerState";
 //#region src/components/dialog/index.tsx
 const MIN_WIDTH = 280;
 const MAX_WIDTH = 560;
 const SCALE_FROM = .9;
 const RISE_FROM = .03;
-const SCRIM_OPACITY = .32;
-const NO_INSETS = {
-	bottom: 0,
-	left: 0,
-	right: 0,
-	top: 0
-};
-const ORIENTATIONS = [
-	"portrait",
-	"portrait-upside-down",
-	"landscape",
-	"landscape-left",
-	"landscape-right"
-];
 const NO_PARTS = {
 	footer: 0,
 	header: 0,
@@ -99,14 +82,6 @@ const stylesOf = themedStyles(({ colors, radii, shadows, sizing, spacing }) => S
 		alignItems: "stretch",
 		padding: 0
 	},
-	scrim: {
-		backgroundColor: withOpacity(colors.scrim, SCRIM_OPACITY),
-		bottom: 0,
-		left: 0,
-		position: "absolute",
-		right: 0,
-		top: 0
-	},
 	title: {
 		color: colors.onSurface,
 		flexShrink: 1
@@ -152,7 +127,7 @@ function bodyPaddingOf({ basic, parts }, spacing) {
 * `onOpenChange` to `Dialog.Content` instead.
 */
 function Dialog(t0) {
-	const $ = c(15);
+	const $ = c(10);
 	const { children, defaultOpen, isOpen, onOpenChange } = t0;
 	let t1;
 	if ($[0] !== defaultOpen || $[1] !== isOpen || $[2] !== onOpenChange) {
@@ -166,51 +141,28 @@ function Dialog(t0) {
 		$[2] = onOpenChange;
 		$[3] = t1;
 	} else t1 = $[3];
-	const state = useOverlayTriggerState(t1);
-	const [trigger, setTrigger] = useState(null);
+	const { context, slots } = useModalTrigger(t1);
 	let t2;
-	if ($[4] !== state || $[5] !== trigger) {
-		t2 = {
-			state,
-			trigger
-		};
-		$[4] = state;
-		$[5] = trigger;
-		$[6] = t2;
-	} else t2 = $[6];
-	const context = t2;
-	let t3;
-	if ($[7] !== state) {
-		t3 = { default: (event) => {
-			const target = event.currentTarget;
-			setTrigger(typeof target === "number" ? null : target);
-			state.open();
-		} };
-		$[7] = state;
-		$[8] = t3;
-	} else t3 = $[8];
-	const slots = t3;
-	let t4;
-	if ($[9] !== children || $[10] !== slots) {
-		t4 = /* @__PURE__ */ jsx(ButtonSlotContext, {
+	if ($[4] !== children || $[5] !== slots) {
+		t2 = /* @__PURE__ */ jsx(ButtonSlotContext, {
 			value: slots,
 			children
 		});
-		$[9] = children;
-		$[10] = slots;
-		$[11] = t4;
-	} else t4 = $[11];
-	let t5;
-	if ($[12] !== context || $[13] !== t4) {
-		t5 = /* @__PURE__ */ jsx(DialogTriggerContext, {
+		$[4] = children;
+		$[5] = slots;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== context || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx(DialogTriggerContext, {
 			value: context,
-			children: t4
+			children: t2
 		});
-		$[12] = context;
-		$[13] = t4;
-		$[14] = t5;
-	} else t5 = $[14];
-	return t5;
+		$[7] = context;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
 }
 /**
 * What the dialog shows, as a body that scrolls when its content runs past
@@ -316,7 +268,7 @@ function DialogBody(t0) {
 * `style`, `ref` and `testID` land on the container.
 */
 function DialogContent(t0) {
-	const $ = c(46);
+	const $ = c(49);
 	let children;
 	let defaultOpen;
 	let isOpen;
@@ -365,8 +317,7 @@ function DialogContent(t0) {
 		$[12] = onOpenChange;
 		$[13] = t4;
 	} else t4 = $[13];
-	const own = useOverlayTriggerState(t4);
-	const state = outer?.state ?? own;
+	const { close, present, setPresent, slots, state } = useModalState(outer, t4);
 	const theme = useTheme();
 	const styles = stylesOf(theme);
 	const insets = use(SafeAreaInsetsContext) ?? NO_INSETS;
@@ -381,133 +332,110 @@ function DialogContent(t0) {
 	} else t5 = $[14];
 	const [register] = useState(t5);
 	const [title, setTitle] = useState(null);
-	const [present, setPresent] = useState(state.isOpen);
 	const motion = useDialogMotion(state.isOpen, present, setPresent, basic);
 	let t6;
-	if ($[15] !== state) {
-		t6 = () => {
-			state.close();
-		};
-		$[15] = state;
-		$[16] = t6;
-	} else t6 = $[16];
-	const close = t6;
-	let t7;
-	if ($[17] !== close) {
-		t7 = { close };
-		$[17] = close;
-		$[18] = t7;
-	} else t7 = $[18];
-	const slots = t7;
-	let t8;
-	if ($[19] !== basic || $[20] !== parts || $[21] !== register || $[22] !== titleId) {
-		t8 = {
+	if ($[15] !== basic || $[16] !== parts || $[17] !== register || $[18] !== titleId) {
+		t6 = {
 			basic,
 			parts,
 			register,
 			setTitle,
 			titleId
 		};
-		$[19] = basic;
-		$[20] = parts;
-		$[21] = register;
-		$[22] = titleId;
-		$[23] = t8;
-	} else t8 = $[23];
-	const layout = t8;
-	if (state.isOpen && !present) setPresent(true);
-	useReturnFocus(present, outer);
+		$[15] = basic;
+		$[16] = parts;
+		$[17] = register;
+		$[18] = titleId;
+		$[19] = t6;
+	} else t6 = $[19];
+	const layout = t6;
 	if (!present) return null;
 	const labelledBy = parts.title > 0 ? titleId : void 0;
-	const web = Platform.OS === "web";
-	let t9;
-	if ($[24] !== title) {
-		t9 = focusOf(title);
-		$[24] = title;
-		$[25] = t9;
-	} else t9 = $[25];
-	const T0 = View;
-	const t10 = composeStyles(styles.layout, basic ? void 0 : styles.layoutFull);
-	const t11 = Animated;
-	let t12;
-	if ($[26] !== labelledBy || $[27] !== role) {
-		t12 = web ? void 0 : panelRoleOf(role, labelledBy);
-		$[26] = labelledBy;
-		$[27] = role;
-		$[28] = t12;
-	} else t12 = $[28];
-	const t13 = isKeyboardDismissDisabled ? void 0 : close;
-	const t14 = composeStyles(styles.container, basic ? styles.containerBasic : styles.containerFull, basic ? void 0 : insetsOf(insets), motion.panel, style);
-	let t15;
-	if ($[29] !== children || $[30] !== slots) {
-		t15 = /* @__PURE__ */ jsx(ButtonSlotContext, {
+	const T0 = ModalWindow;
+	const t7 = isDismissable && state.isOpen ? close : void 0;
+	const t8 = motion.scrim;
+	const T1 = View;
+	const t9 = composeStyles(styles.layout, basic ? void 0 : styles.layoutFull);
+	const t10 = Animated;
+	let t11;
+	if ($[20] !== labelledBy || $[21] !== role) {
+		t11 = panelRoleOf(role, labelledBy);
+		$[20] = labelledBy;
+		$[21] = role;
+		$[22] = t11;
+	} else t11 = $[22];
+	const t12 = isKeyboardDismissDisabled ? void 0 : close;
+	const t13 = composeStyles(styles.container, basic ? styles.containerBasic : styles.containerFull, basic ? void 0 : insetsOf(insets), motion.panel, style);
+	let t14;
+	if ($[23] !== children || $[24] !== slots) {
+		t14 = /* @__PURE__ */ jsx(ButtonSlotContext, {
 			value: slots,
 			children
 		});
-		$[29] = children;
-		$[30] = slots;
-		$[31] = t15;
-	} else t15 = $[31];
-	let t16;
-	if ($[32] !== layout || $[33] !== t15) {
-		t16 = /* @__PURE__ */ jsx(DialogLayoutContext, {
+		$[23] = children;
+		$[24] = slots;
+		$[25] = t14;
+	} else t14 = $[25];
+	let t15;
+	if ($[26] !== layout || $[27] !== t14) {
+		t15 = /* @__PURE__ */ jsx(DialogLayoutContext, {
 			value: layout,
+			children: t14
+		});
+		$[26] = layout;
+		$[27] = t14;
+		$[28] = t15;
+	} else t15 = $[28];
+	let t16;
+	if ($[29] !== props || $[30] !== t10.View || $[31] !== t11 || $[32] !== t12 || $[33] !== t13 || $[34] !== t15) {
+		t16 = /* @__PURE__ */ jsx(t10.View, {
+			...t11,
+			onAccessibilityEscape: t12,
+			...props,
+			style: t13,
 			children: t15
 		});
-		$[32] = layout;
-		$[33] = t15;
-		$[34] = t16;
-	} else t16 = $[34];
+		$[29] = props;
+		$[30] = t10.View;
+		$[31] = t11;
+		$[32] = t12;
+		$[33] = t13;
+		$[34] = t15;
+		$[35] = t16;
+	} else t16 = $[35];
 	let t17;
-	if ($[35] !== props || $[36] !== t11.View || $[37] !== t12 || $[38] !== t13 || $[39] !== t14 || $[40] !== t16) {
-		t17 = /* @__PURE__ */ jsx(t11.View, {
-			...t12,
-			onAccessibilityEscape: t13,
-			...props,
-			style: t14,
+	if ($[36] !== T1 || $[37] !== t16 || $[38] !== t9) {
+		t17 = /* @__PURE__ */ jsx(T1, {
+			style: t9,
 			children: t16
 		});
-		$[35] = props;
-		$[36] = t11.View;
-		$[37] = t12;
-		$[38] = t13;
-		$[39] = t14;
-		$[40] = t16;
-		$[41] = t17;
-	} else t17 = $[41];
+		$[36] = T1;
+		$[37] = t16;
+		$[38] = t9;
+		$[39] = t17;
+	} else t17 = $[39];
 	let t18;
-	if ($[42] !== T0 || $[43] !== t10 || $[44] !== t17) {
+	if ($[40] !== T0 || $[41] !== close || $[42] !== isKeyboardDismissDisabled || $[43] !== labelledBy || $[44] !== motion.scrim || $[45] !== t17 || $[46] !== t7 || $[47] !== title) {
 		t18 = /* @__PURE__ */ jsx(T0, {
-			style: t10,
+			isKeyboardDismissDisabled,
+			labelledBy,
+			onClose: close,
+			onScrimPress: t7,
+			scrim: t8,
+			title,
 			children: t17
 		});
-		$[42] = T0;
-		$[43] = t10;
-		$[44] = t17;
-		$[45] = t18;
-	} else t18 = $[45];
-	return /* @__PURE__ */ jsx(Modal, {
-		animationType: "none",
-		"aria-labelledby": web ? labelledBy : void 0,
-		navigationBarTranslucent: true,
-		onRequestClose: isKeyboardDismissDisabled ? ignore : close,
-		onShow: t9,
-		statusBarTranslucent: true,
-		supportedOrientations: ORIENTATIONS,
-		transparent: true,
-		visible: true,
-		children: /* @__PURE__ */ jsx(ButtonSlotContext, {
-			value: null,
-			children: /* @__PURE__ */ jsxs(OverlayHost, { children: [/* @__PURE__ */ jsx(AnimatedPressable, {
-				accessible: false,
-				"aria-hidden": true,
-				focusable: false,
-				onPress: isDismissable && state.isOpen ? close : void 0,
-				style: composeStyles(styles.scrim, motion.scrim),
-				tabIndex: -1
-			}), t18] })
-		})
-	});
+		$[40] = T0;
+		$[41] = close;
+		$[42] = isKeyboardDismissDisabled;
+		$[43] = labelledBy;
+		$[44] = motion.scrim;
+		$[45] = t17;
+		$[46] = t7;
+		$[47] = title;
+		$[48] = t18;
+	} else t18 = $[48];
+	return t18;
 }
 /**
 * The dialog's actions, at the trailing edge and wrapping onto another row
@@ -675,48 +603,6 @@ function DialogTitle(t0) {
 	} else t7 = $[15];
 	return t7;
 }
-function focusOf(title) {
-	return () => {
-		if (title !== null && Platform.OS !== "web") AccessibilityInfo.sendAccessibilityEvent(title, "focus");
-	};
-}
-function ignore() {}
-function insetsOf(insets) {
-	return {
-		paddingBottom: insets.bottom,
-		paddingLeft: insets.left,
-		paddingRight: insets.right,
-		paddingTop: insets.top
-	};
-}
-function panelRoleOf(role, labelledBy) {
-	return {
-		"aria-labelledby": labelledBy,
-		"aria-modal": true,
-		role
-	};
-}
-function refsOf(own, other) {
-	return (node) => {
-		own(node);
-		if (typeof other === "function") other(node);
-		else if (other !== null && other !== void 0) other.current = node;
-	};
-}
-function registerOf(setParts) {
-	return (part) => {
-		setParts((parts) => ({
-			...parts,
-			[part]: parts[part] + 1
-		}));
-		return () => {
-			setParts((parts) => ({
-				...parts,
-				[part]: parts[part] - 1
-			}));
-		};
-	};
-}
 /**
 * The scrim's and the panel's motion, and the timer that unmounts the dialog
 * once its exit has run. The panel arrives over the medium duration on the
@@ -826,30 +712,6 @@ function useLayout(part) {
 	if (layout === null) throw new Error(`${part} is drawn inside Dialog.Content.`);
 	return layout;
 }
-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);
-}
 Dialog.Body = DialogBody;
 Dialog.Content = DialogContent;
 Dialog.Footer = DialogFooter;