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

package/dist/components/popover/index.js

@@ -0,0 +1,704 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { refsOf } from "../../ref/index.js";
+import { ButtonSlotContext } from "../../button/slots.js";
+import { Overlay } from "../../overlay/host.js";
+import { useAnchoredPlacement } from "../../overlay/anchored.js";
+import { ModalWindow, panelRoleOf } from "../../modal/index.js";
+import { DismissLayer, PANEL_ORIGINS, useBackToClose, useFocusOnPlaced, usePanelMotion, useReturnFocus } from "../../overlay/panel.js";
+import { c } from "react/compiler-runtime";
+import { createContext, use, useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ScrollView, StyleSheet, Text } from "react-native";
+import Animated from "react-native-reanimated";
+import { useOverlayTriggerState } from "react-stately/useOverlayTriggerState";
+//#region src/components/popover/index.tsx
+const DEFAULT_HOVER_DELAY = 600;
+const DEFAULT_HOVER_CLOSE_DELAY = 200;
+const WIDTHS = {
+	md: 320,
+	sm: 240
+};
+const UNSEEN = { opacity: 0 };
+const stylesOf = themedStyles(({ colors, radii, shadows, spacing }) => StyleSheet.create({
+	content: {
+		paddingBottom: spacing.sm,
+		paddingHorizontal: spacing.lg,
+		paddingTop: spacing.md
+	},
+	description: { color: colors.onSurfaceVariant },
+	scroll: { flexGrow: 0 },
+	surface: {
+		backgroundColor: colors.surfaceContainer,
+		borderRadius: radii.md,
+		boxShadow: shadows.elevation2,
+		overflow: "hidden"
+	},
+	title: { color: colors.onSurfaceVariant }
+}));
+const PopoverContext = createContext(null);
+const TitleContext = createContext(null);
+/**
+* A panel anchored to the control that opened it, as the tooltips spec
+* page's rich tooltip draws one. Pass `isOpen` with `onOpenChange` to hold
+* the open state, or `defaultOpen` to let it keep its own.
+*
+* ```tsx
+* <Popover>
+*   <Button variant="outlined">Open</Button>
+*   <Popover.Content>
+*     <Popover.Title>Headline</Popover.Title>
+*     <Popover.Description>Supporting text</Popover.Description>
+*   </Popover.Content>
+* </Popover>
+* ```
+*
+* Non-modal by default, which leaves the screen in reach of a screen reader,
+* and `modal` keeps one inside it. A press outside the panel and a button
+* given `slot="close"` inside it close it, and a press on its trigger
+* toggles it. Composed rather than configured by props, as web's is: a
+* `Button` or `IconButton` placed directly inside `Popover` is its trigger,
+* and the panel is placed beside it.
+*/
+function Popover(t0) {
+	const $ = c(23);
+	const { children, closeDelay: t1, defaultOpen, delay: t2, isOpen, modal: t3, onOpenChange, size: t4, trigger: t5 } = t0;
+	const closeDelay = t1 === void 0 ? DEFAULT_HOVER_CLOSE_DELAY : t1;
+	const delay = t2 === void 0 ? DEFAULT_HOVER_DELAY : t2;
+	const modal = t3 === void 0 ? false : t3;
+	const size = t4 === void 0 ? "md" : t4;
+	const trigger = t5 === void 0 ? "press" : t5;
+	let t6;
+	if ($[0] !== defaultOpen || $[1] !== isOpen || $[2] !== onOpenChange) {
+		t6 = {
+			defaultOpen,
+			isOpen,
+			onOpenChange
+		};
+		$[0] = defaultOpen;
+		$[1] = isOpen;
+		$[2] = onOpenChange;
+		$[3] = t6;
+	} else t6 = $[3];
+	const state = useOverlayTriggerState(t6);
+	const anchor = useRef(null);
+	const hover = useHoverTrigger(state, delay, closeDelay);
+	const hovering = trigger === "hover";
+	let t7;
+	if ($[4] !== state) {
+		t7 = () => {
+			state.close();
+		};
+		$[4] = state;
+		$[5] = t7;
+	} else t7 = $[5];
+	const close = t7;
+	let t8;
+	if ($[6] !== delay || $[7] !== hover || $[8] !== hovering || $[9] !== state) {
+		t8 = hovering ? {
+			default: hover.press,
+			trigger: {
+				delayLongPress: delay,
+				expanded: state.isOpen,
+				onHoverIn: hover.enter,
+				onHoverOut: hover.leave,
+				onLongPress: hover.longPress,
+				ref: anchor
+			}
+		} : {
+			default: () => {
+				state.toggle();
+			},
+			trigger: {
+				expanded: state.isOpen,
+				ref: anchor
+			}
+		};
+		$[6] = delay;
+		$[7] = hover;
+		$[8] = hovering;
+		$[9] = state;
+		$[10] = t8;
+	} else t8 = $[10];
+	const slots = t8;
+	const t9 = modal && !hovering;
+	let t10;
+	if ($[11] !== close || $[12] !== hover || $[13] !== size || $[14] !== state.isOpen || $[15] !== t9) {
+		t10 = {
+			anchor,
+			close,
+			hover,
+			isOpen: state.isOpen,
+			modal: t9,
+			size
+		};
+		$[11] = close;
+		$[12] = hover;
+		$[13] = size;
+		$[14] = state.isOpen;
+		$[15] = t9;
+		$[16] = t10;
+	} else t10 = $[16];
+	const root = t10;
+	let t11;
+	if ($[17] !== children || $[18] !== slots) {
+		t11 = /* @__PURE__ */ jsx(ButtonSlotContext, {
+			value: slots,
+			children
+		});
+		$[17] = children;
+		$[18] = slots;
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[20] !== root || $[21] !== t11) {
+		t12 = /* @__PURE__ */ jsx(PopoverContext, {
+			value: root,
+			children: t11
+		});
+		$[20] = root;
+		$[21] = t11;
+		$[22] = t12;
+	} else t12 = $[22];
+	return t12;
+}
+/**
+* The panel itself. Everything the popover shows goes in here; the trigger
+* stays outside it. Its content scrolls when it runs past the room the
+* window leaves on the side it opened on.
+*
+* `style`, `ref` and `testID` land on the panel.
+*/
+function PopoverContent(t0) {
+	const $ = c(25);
+	let props;
+	let triggerRef;
+	if ($[0] !== t0) {
+		({triggerRef, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = triggerRef;
+	} else {
+		props = $[1];
+		triggerRef = $[2];
+	}
+	const root = use(PopoverContext);
+	if (root === null) throw new Error("Popover.Content is drawn inside Popover.");
+	const { anchor, close, hover, isOpen, modal, size } = root;
+	const [present, setPresent] = useState(isOpen);
+	const [title, setTitle] = useState(null);
+	const [byPointer, setByPointer] = useState(hover.byPointer);
+	const id = useId();
+	let t1;
+	if ($[3] !== id) {
+		t1 = {
+			id,
+			setTitle
+		};
+		$[3] = id;
+		$[4] = t1;
+	} else t1 = $[4];
+	const titled = t1;
+	if (isOpen && !present) setPresent(true);
+	if (isOpen && byPointer !== hover.byPointer) setByPointer(hover.byPointer);
+	useReturnFocus(present, byPointer, triggerRef ?? anchor);
+	if (!present) return null;
+	const labelledBy = title === null ? void 0 : id;
+	const t2 = triggerRef ?? anchor;
+	const t3 = !modal && !byPointer && isOpen;
+	let t4;
+	if ($[5] !== byPointer || $[6] !== close || $[7] !== hover || $[8] !== isOpen || $[9] !== labelledBy || $[10] !== modal || $[11] !== props || $[12] !== size || $[13] !== t2 || $[14] !== t3 || $[15] !== title || $[16] !== titled) {
+		t4 = /* @__PURE__ */ jsx(PopoverPanel, {
+			...props,
+			anchor: t2,
+			byPointer,
+			close,
+			dismissable: t3,
+			hover,
+			isOpen,
+			labelledBy,
+			modal,
+			setPresent,
+			size,
+			title,
+			titled
+		});
+		$[5] = byPointer;
+		$[6] = close;
+		$[7] = hover;
+		$[8] = isOpen;
+		$[9] = labelledBy;
+		$[10] = modal;
+		$[11] = props;
+		$[12] = size;
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = title;
+		$[16] = titled;
+		$[17] = t4;
+	} else t4 = $[17];
+	const panel = t4;
+	if (!modal) {
+		let t5;
+		if ($[18] !== panel) {
+			t5 = /* @__PURE__ */ jsx(Overlay, { children: panel });
+			$[18] = panel;
+			$[19] = t5;
+		} else t5 = $[19];
+		return t5;
+	}
+	const t5 = isOpen ? close : void 0;
+	let t6;
+	if ($[20] !== close || $[21] !== labelledBy || $[22] !== panel || $[23] !== t5) {
+		t6 = /* @__PURE__ */ jsx(ModalWindow, {
+			isKeyboardDismissDisabled: false,
+			labelledBy,
+			onClose: close,
+			onScrimPress: t5,
+			scrim: UNSEEN,
+			title: null,
+			children: panel
+		});
+		$[20] = close;
+		$[21] = labelledBy;
+		$[22] = panel;
+		$[23] = t5;
+		$[24] = t6;
+	} else t6 = $[24];
+	return t6;
+}
+/**
+* Supporting text under the title, in body medium on on-surface variant.
+* `style`, `ref` and `testID` land on React Native's own Text.
+*/
+function PopoverDescription(t0) {
+	const $ = c(7);
+	let props;
+	let style;
+	if ($[0] !== t0) {
+		({style, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = style;
+	} else {
+		props = $[1];
+		style = $[2];
+	}
+	const styles = stylesOf(useTheme());
+	const role = useTypeRole("bodyMedium");
+	const T0 = Text;
+	const t1 = composeStyles(role, styles.description, style);
+	let t2;
+	if ($[3] !== T0 || $[4] !== props || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(T0, {
+			...props,
+			style: t1
+		});
+		$[3] = T0;
+		$[4] = props;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+}
+function PopoverPanel(t0) {
+	const $ = c(61);
+	let align;
+	let alignOffset;
+	let anchor;
+	let byPointer;
+	let children;
+	let close;
+	let dismissable;
+	let hover;
+	let isOpen;
+	let labelledBy;
+	let modal;
+	let props;
+	let ref;
+	let setPresent;
+	let side;
+	let sideOffset;
+	let size;
+	let style;
+	let title;
+	let titled;
+	if ($[0] !== t0) {
+		({align, alignOffset, anchor, byPointer, children, close, dismissable, hover, isOpen, labelledBy, modal, ref, setPresent, side, sideOffset, size, style, title, titled, ...props} = t0);
+		$[0] = t0;
+		$[1] = align;
+		$[2] = alignOffset;
+		$[3] = anchor;
+		$[4] = byPointer;
+		$[5] = children;
+		$[6] = close;
+		$[7] = dismissable;
+		$[8] = hover;
+		$[9] = isOpen;
+		$[10] = labelledBy;
+		$[11] = modal;
+		$[12] = props;
+		$[13] = ref;
+		$[14] = setPresent;
+		$[15] = side;
+		$[16] = sideOffset;
+		$[17] = size;
+		$[18] = style;
+		$[19] = title;
+		$[20] = titled;
+	} else {
+		align = $[1];
+		alignOffset = $[2];
+		anchor = $[3];
+		byPointer = $[4];
+		children = $[5];
+		close = $[6];
+		dismissable = $[7];
+		hover = $[8];
+		isOpen = $[9];
+		labelledBy = $[10];
+		modal = $[11];
+		props = $[12];
+		ref = $[13];
+		setPresent = $[14];
+		side = $[15];
+		sideOffset = $[16];
+		size = $[17];
+		style = $[18];
+		title = $[19];
+		titled = $[20];
+	}
+	const styles = stylesOf(useTheme());
+	let t1;
+	if ($[21] !== align || $[22] !== alignOffset || $[23] !== anchor || $[24] !== side || $[25] !== sideOffset) {
+		t1 = {
+			align,
+			alignOffset,
+			anchor,
+			side,
+			sideOffset
+		};
+		$[21] = align;
+		$[22] = alignOffset;
+		$[23] = anchor;
+		$[24] = side;
+		$[25] = sideOffset;
+		$[26] = t1;
+	} else t1 = $[26];
+	const placement = useAnchoredPlacement(t1);
+	const [panel, setPanel] = useState(null);
+	const motion = usePanelMotion(isOpen, placement.placed, setPresent);
+	let t2;
+	if ($[27] !== close) {
+		t2 = { close };
+		$[27] = close;
+		$[28] = t2;
+	} else t2 = $[28];
+	const slots = t2;
+	useBackToClose(close, !modal && isOpen);
+	useFocusOnPlaced(placement.placed && !byPointer, title ?? panel);
+	let t3;
+	if ($[29] !== close || $[30] !== dismissable) {
+		t3 = dismissable ? /* @__PURE__ */ jsx(DismissLayer, { onPress: close }) : null;
+		$[29] = close;
+		$[30] = dismissable;
+		$[31] = t3;
+	} else t3 = $[31];
+	const t4 = Animated;
+	let t5;
+	if ($[32] !== labelledBy || $[33] !== modal) {
+		t5 = modal ? panelRoleOf("dialog", labelledBy) : {
+			"aria-labelledby": labelledBy,
+			role: "dialog"
+		};
+		$[32] = labelledBy;
+		$[33] = modal;
+		$[34] = t5;
+	} else t5 = $[34];
+	const t6 = hover.panelEnter;
+	const t7 = hover.panelLeave;
+	const t8 = placement.onLayout;
+	let t9;
+	if ($[35] !== ref) {
+		t9 = refsOf(setPanel, ref);
+		$[35] = ref;
+		$[36] = t9;
+	} else t9 = $[36];
+	const t10 = composeStyles(styles.surface, { maxWidth: WIDTHS[size] }, placement.style, { transformOrigin: PANEL_ORIGINS[placement.side] }, motion, style);
+	let t11;
+	if ($[37] !== children || $[38] !== slots) {
+		t11 = /* @__PURE__ */ jsx(ButtonSlotContext, {
+			value: slots,
+			children
+		});
+		$[37] = children;
+		$[38] = slots;
+		$[39] = t11;
+	} else t11 = $[39];
+	let t12;
+	if ($[40] !== t11 || $[41] !== titled) {
+		t12 = /* @__PURE__ */ jsx(TitleContext, {
+			value: titled,
+			children: t11
+		});
+		$[40] = t11;
+		$[41] = titled;
+		$[42] = t12;
+	} else t12 = $[42];
+	let t13;
+	if ($[43] !== styles.content || $[44] !== styles.scroll || $[45] !== t12) {
+		t13 = /* @__PURE__ */ jsx(ScrollView, {
+			contentContainerStyle: styles.content,
+			style: styles.scroll,
+			children: t12
+		});
+		$[43] = styles.content;
+		$[44] = styles.scroll;
+		$[45] = t12;
+		$[46] = t13;
+	} else t13 = $[46];
+	let t14;
+	if ($[47] !== close || $[48] !== hover.panelEnter || $[49] !== hover.panelLeave || $[50] !== placement.onLayout || $[51] !== props || $[52] !== t10 || $[53] !== t13 || $[54] !== t4.View || $[55] !== t5 || $[56] !== t9) {
+		t14 = /* @__PURE__ */ jsx(t4.View, {
+			...t5,
+			onAccessibilityEscape: close,
+			onPointerEnter: t6,
+			onPointerLeave: t7,
+			...props,
+			onLayout: t8,
+			ref: t9,
+			style: t10,
+			children: t13
+		});
+		$[47] = close;
+		$[48] = hover.panelEnter;
+		$[49] = hover.panelLeave;
+		$[50] = placement.onLayout;
+		$[51] = props;
+		$[52] = t10;
+		$[53] = t13;
+		$[54] = t4.View;
+		$[55] = t5;
+		$[56] = t9;
+		$[57] = t14;
+	} else t14 = $[57];
+	let t15;
+	if ($[58] !== t14 || $[59] !== t3) {
+		t15 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t3, t14] });
+		$[58] = t14;
+		$[59] = t3;
+		$[60] = t15;
+	} else t15 = $[60];
+	return t15;
+}
+/**
+* Names the popover: the panel is labelled by it, and a screen reader is
+* sent to it once a pressed popover shows. In title small on on-surface
+* variant, the rich tooltip's subhead. `style`, `ref` and `testID` land on
+* React Native's own Text.
+*/
+function PopoverTitle(t0) {
+	const $ = c(13);
+	let props;
+	let ref;
+	let style;
+	if ($[0] !== t0) {
+		({ref, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = ref;
+		$[3] = style;
+	} else {
+		props = $[1];
+		ref = $[2];
+		style = $[3];
+	}
+	const titled = use(TitleContext);
+	const styles = stylesOf(useTheme());
+	const role = useTypeRole("titleSmall");
+	if (titled === null) throw new Error("Popover.Title is drawn inside Popover.Content.");
+	const T0 = Text;
+	const t1 = titled.id;
+	let t2;
+	if ($[4] !== ref || $[5] !== titled.setTitle) {
+		t2 = refsOf(titled.setTitle, ref);
+		$[4] = ref;
+		$[5] = titled.setTitle;
+		$[6] = t2;
+	} else t2 = $[6];
+	const t3 = "heading";
+	const t4 = composeStyles(role, styles.title, style);
+	let t5;
+	if ($[7] !== T0 || $[8] !== props || $[9] !== t2 || $[10] !== t4 || $[11] !== titled.id) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			...props,
+			nativeID: t1,
+			ref: t2,
+			role: t3,
+			style: t4
+		});
+		$[7] = T0;
+		$[8] = props;
+		$[9] = t2;
+		$[10] = t4;
+		$[11] = titled.id;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+}
+/**
+* How a hovered popover opens and closes. A pointer resting on the trigger
+* for `delay` opens it, and once the pointer has left both the trigger and
+* the panel for `closeDelay` it closes again. A press held for `delay` opens
+* it as well, and a popover opened that way stays open until a press outside
+* it or on the trigger. `byPointer` says whether a pointer opened it, which
+* is forgotten as it closes, however it closed.
+*/
+function useHoverTrigger(state, delay, closeDelay) {
+	const $ = c(29);
+	const [byPointer, setByPointer] = useState(false);
+	const [wasOpen, setWasOpen] = useState(state.isOpen);
+	const timer = useRef(void 0);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			onPanel: false,
+			onTrigger: false
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const pointer = useRef(t0);
+	if (wasOpen !== state.isOpen) {
+		setWasOpen(state.isOpen);
+		if (!state.isOpen) setByPointer(false);
+	}
+	let t1;
+	let t2;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => () => {
+			clearTimeout(timer.current);
+		};
+		t2 = [];
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = function after(milliseconds, then) {
+			clearTimeout(timer.current);
+			timer.current = setTimeout(then, milliseconds);
+		};
+		$[3] = t3;
+	} else t3 = $[3];
+	const after = t3;
+	let t4;
+	if ($[4] !== closeDelay || $[5] !== state) {
+		t4 = function closeOnceGone() {
+			after(closeDelay, () => {
+				if (!pointer.current.onPanel && !pointer.current.onTrigger) state.close();
+			});
+		};
+		$[4] = closeDelay;
+		$[5] = state;
+		$[6] = t4;
+	} else t4 = $[6];
+	const closeOnceGone = t4;
+	let t5;
+	if ($[7] !== delay || $[8] !== state) {
+		t5 = () => {
+			pointer.current.onTrigger = true;
+			if (state.isOpen) {
+				clearTimeout(timer.current);
+				return;
+			}
+			after(delay, () => {
+				setByPointer(true);
+				state.open();
+			});
+		};
+		$[7] = delay;
+		$[8] = state;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== byPointer || $[11] !== closeOnceGone || $[12] !== state.isOpen) {
+		t6 = () => {
+			pointer.current.onTrigger = false;
+			if (!state.isOpen) clearTimeout(timer.current);
+			else if (byPointer) closeOnceGone();
+		};
+		$[10] = byPointer;
+		$[11] = closeOnceGone;
+		$[12] = state.isOpen;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== state) {
+		t7 = () => {
+			clearTimeout(timer.current);
+			setByPointer(false);
+			state.open();
+		};
+		$[14] = state;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = () => {
+			pointer.current.onPanel = true;
+			clearTimeout(timer.current);
+		};
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== byPointer || $[18] !== closeOnceGone) {
+		t9 = () => {
+			pointer.current.onPanel = false;
+			if (byPointer) closeOnceGone();
+		};
+		$[17] = byPointer;
+		$[18] = closeOnceGone;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== state) {
+		t10 = () => {
+			clearTimeout(timer.current);
+			if (state.isOpen) state.close();
+		};
+		$[20] = state;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== byPointer || $[23] !== t10 || $[24] !== t5 || $[25] !== t6 || $[26] !== t7 || $[27] !== t9) {
+		t11 = {
+			byPointer,
+			enter: t5,
+			leave: t6,
+			longPress: t7,
+			panelEnter: t8,
+			panelLeave: t9,
+			press: t10
+		};
+		$[22] = byPointer;
+		$[23] = t10;
+		$[24] = t5;
+		$[25] = t6;
+		$[26] = t7;
+		$[27] = t9;
+		$[28] = t11;
+	} else t11 = $[28];
+	return t11;
+}
+Popover.Content = PopoverContent;
+Popover.Description = PopoverDescription;
+Popover.Title = PopoverTitle;
+//#endregion
+export { Popover, PopoverContent, PopoverDescription, PopoverTitle };
+
+//# sourceMappingURL=index.js.map