@kanso-labs/kanso-ui 0.40.8 → 0.40.9

package/dist/components/popover/index.js

@@ -1,12 +1,14 @@
 "use client";
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeRefs } from "../../render/ref.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { focus } from "../../styles/focus.js";
 import { overlay, placementOf, popupOrigin } from "../../styles/overlay.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext, useEffect, useId, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { ButtonContext, DEFAULT_SLOT, Dialog, DialogContext, DialogTrigger, Heading, HeadingContext, OverlayTriggerStateContext, Popover, PreviewTrigger, Text, TextContext } from "react-aria-components";
+import { ButtonContext, DEFAULT_SLOT, Dialog, DialogContext, DialogTrigger, Heading, HeadingContext, OverlayTriggerStateContext, Popover, PopoverContext, PreviewTrigger, Text, TextContext, useSlottedContext } from "react-aria-components";
+import { useInteractOutside } from "react-aria";
 //#region src/components/popover/index.tsx
 const DEFAULT_SIDE_OFFSET = 8;
 const styles = {
@@ -49,7 +51,7 @@ const styles = {
 };
 const DEFAULT_HOVER_DELAY = 600;
 const DEFAULT_HOVER_CLOSE_DELAY = 200;
-const PopoverContext = createContext({
+const PopoverContext$1 = createContext({
 	modal: false,
 	size: "md"
 });
@@ -80,63 +82,67 @@ const TEXT_SLOTS = { slots: {
 * focus handling of its own.
 */
 function PanelDialog(t0) {
-	const $ = c(35);
+	const $ = c(37);
 	let children;
 	let id;
 	let labelledBy;
+	let onPressWithin;
 	let props$2;
 	let slot;
 	if ($[0] !== t0) {
-		const { "aria-labelledby": t1, children: t2, id: t3, render: _render, slot: t4, ...t5 } = t0;
+		const { "aria-labelledby": t1, children: t2, id: t3, onPressWithin: t4, render: _render, slot: t5, ...t6 } = t0;
 		labelledBy = t1;
 		children = t2;
 		id = t3;
-		slot = t4;
-		props$2 = t5;
+		onPressWithin = t4;
+		slot = t5;
+		props$2 = t6;
 		$[0] = t0;
 		$[1] = children;
 		$[2] = id;
 		$[3] = labelledBy;
-		$[4] = props$2;
-		$[5] = slot;
+		$[4] = onPressWithin;
+		$[5] = props$2;
+		$[6] = slot;
 	} else {
 		children = $[1];
 		id = $[2];
 		labelledBy = $[3];
-		props$2 = $[4];
-		slot = $[5];
+		onPressWithin = $[4];
+		props$2 = $[5];
+		slot = $[6];
 	}
 	const ref = useRef(null);
 	const state = useContext(OverlayTriggerStateContext);
 	const t1 = useContext(DialogContext);
 	let t2;
-	if ($[6] !== t1) {
+	if ($[7] !== t1) {
 		t2 = triggerOf(t1);
-		$[6] = t1;
-		$[7] = t2;
-	} else t2 = $[7];
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
 	const trigger = t2;
 	const pressed = trigger !== void 0;
 	const titleId = useId();
 	const [titled, setTitled] = useState(false);
 	let t3;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
 		t3 = () => {
 			setTitled(true);
 			return () => {
 				setTitled(false);
 			};
 		};
-		$[8] = t3;
-	} else t3 = $[8];
+		$[9] = t3;
+	} else t3 = $[9];
 	const registerTitle = t3;
 	let t4;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
 		t4 = {};
-		$[9] = t4;
-	} else t4 = $[9];
+		$[10] = t4;
+	} else t4 = $[10];
 	let t5;
-	if ($[10] !== titleId) {
+	if ($[11] !== titleId) {
 		t5 = { slots: {
 			[DEFAULT_SLOT]: t4,
 			title: {
@@ -144,68 +150,68 @@ function PanelDialog(t0) {
 				level: 2
 			}
 		} };
-		$[10] = titleId;
-		$[11] = t5;
-	} else t5 = $[11];
+		$[11] = titleId;
+		$[12] = t5;
+	} else t5 = $[12];
 	const headings = t5;
 	let t6;
-	if ($[12] !== state) {
+	if ($[13] !== state) {
 		t6 = { onPress: () => {
 			state?.close();
 		} };
-		$[12] = state;
-		$[13] = t6;
-	} else t6 = $[13];
+		$[13] = state;
+		$[14] = t6;
+	} else t6 = $[14];
 	let t7;
-	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
 		t7 = {};
-		$[14] = t7;
-	} else t7 = $[14];
+		$[15] = t7;
+	} else t7 = $[15];
 	let t8;
-	if ($[15] !== t6) {
+	if ($[16] !== t6) {
 		t8 = { slots: {
 			close: t6,
 			[DEFAULT_SLOT]: t7
 		} };
-		$[15] = t6;
-		$[16] = t8;
-	} else t8 = $[16];
+		$[16] = t6;
+		$[17] = t8;
+	} else t8 = $[17];
 	const buttons = t8;
 	let t10;
 	let t9;
-	if ($[17] !== pressed) {
+	if ($[18] !== pressed) {
 		t9 = () => {
 			const element = ref.current;
 			if (pressed && element !== null && !element.contains(document.activeElement)) element.focus({ preventScroll: true });
 		};
 		t10 = [pressed];
-		$[17] = pressed;
-		$[18] = t10;
-		$[19] = t9;
+		$[18] = pressed;
+		$[19] = t10;
+		$[20] = t9;
 	} else {
-		t10 = $[18];
-		t9 = $[19];
+		t10 = $[19];
+		t9 = $[20];
 	}
 	useEffect(t9, t10);
 	const t11 = labelledBy ?? (titled ? titleId : trigger?.labelledBy);
 	const t12 = id ?? trigger?.id;
 	const t13 = slot ?? void 0;
 	let t14;
-	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
 		t14 = props(overlay.popupDialog, focus.ring);
-		$[20] = t14;
-	} else t14 = $[20];
+		$[21] = t14;
+	} else t14 = $[21];
 	let t15;
-	if ($[21] !== children) {
+	if ($[22] !== children) {
 		t15 = /* @__PURE__ */ jsx(TitleContext, {
 			value: registerTitle,
 			children
 		});
-		$[21] = children;
-		$[22] = t15;
-	} else t15 = $[22];
+		$[22] = children;
+		$[23] = t15;
+	} else t15 = $[23];
 	let t16;
-	if ($[23] !== buttons || $[24] !== t15) {
+	if ($[24] !== buttons || $[25] !== t15) {
 		t16 = /* @__PURE__ */ jsx(TextContext, {
 			value: TEXT_SLOTS,
 			children: /* @__PURE__ */ jsx(ButtonContext, {
@@ -213,26 +219,27 @@ function PanelDialog(t0) {
 				children: t15
 			})
 		});
-		$[23] = buttons;
-		$[24] = t15;
-		$[25] = t16;
-	} else t16 = $[25];
+		$[24] = buttons;
+		$[25] = t15;
+		$[26] = t16;
+	} else t16 = $[26];
 	let t17;
-	if ($[26] !== headings || $[27] !== t16) {
+	if ($[27] !== headings || $[28] !== t16) {
 		t17 = /* @__PURE__ */ jsx(HeadingContext, {
 			value: headings,
 			children: t16
 		});
-		$[26] = headings;
-		$[27] = t16;
-		$[28] = t17;
-	} else t17 = $[28];
+		$[27] = headings;
+		$[28] = t16;
+		$[29] = t17;
+	} else t17 = $[29];
 	let t18;
-	if ($[29] !== props$2 || $[30] !== t11 || $[31] !== t12 || $[32] !== t13 || $[33] !== t17) {
+	if ($[30] !== onPressWithin || $[31] !== props$2 || $[32] !== t11 || $[33] !== t12 || $[34] !== t13 || $[35] !== t17) {
 		t18 = /* @__PURE__ */ jsx("section", {
 			...props$2,
 			"aria-labelledby": t11,
 			id: t12,
+			onPointerDownCapture: onPressWithin,
 			ref,
 			role: "dialog",
 			slot: t13,
@@ -240,13 +247,14 @@ function PanelDialog(t0) {
 			...t14,
 			children: t17
 		});
-		$[29] = props$2;
-		$[30] = t11;
-		$[31] = t12;
-		$[32] = t13;
-		$[33] = t17;
-		$[34] = t18;
-	} else t18 = $[34];
+		$[30] = onPressWithin;
+		$[31] = props$2;
+		$[32] = t11;
+		$[33] = t12;
+		$[34] = t13;
+		$[35] = t17;
+		$[36] = t18;
+	} else t18 = $[36];
 	return t18;
 }
 /**
@@ -255,7 +263,10 @@ function PanelDialog(t0) {
 * keep its own.
 *
 * Non-modal by design — the page behind stays scrollable and clickable, which
-* is the difference from `Sheet`. Pass `modal` to change that.
+* is the difference from `Sheet`. Pass `modal` to change that. Escape, a press
+* anywhere outside the panel and a button given `slot="close"` close it, and
+* a press on its trigger toggles it. Inside a dialog, a press on the scrim
+* closes the popover first and the dialog on the next, as a menu does.
 *
 * Composed rather than configured by props, because a popover's contents are
 * arbitrary — the parts are `Popover.Content`, `Popover.Title`, and
@@ -325,7 +336,7 @@ function Popover$1(t0) {
 		} else t8 = $[15];
 		let t9;
 		if ($[16] !== context || $[17] !== t8) {
-			t9 = /* @__PURE__ */ jsx(PopoverContext, {
+			t9 = /* @__PURE__ */ jsx(PopoverContext$1, {
 				value: context,
 				children: t8
 			});
@@ -347,7 +358,7 @@ function Popover$1(t0) {
 	} else t8 = $[21];
 	let t9;
 	if ($[22] !== context || $[23] !== t8) {
-		t9 = /* @__PURE__ */ jsx(PopoverContext, {
+		t9 = /* @__PURE__ */ jsx(PopoverContext$1, {
 			value: context,
 			children: t8
 		});
@@ -367,7 +378,7 @@ function Popover$1(t0) {
 * than being clipped by it.
 */
 function PopoverContent(t0) {
-	const $ = c(41);
+	const $ = c(58);
 	let alignOffset;
 	let children;
 	let className;
@@ -409,58 +420,146 @@ function PopoverContent(t0) {
 	const align = t1 === void 0 ? "center" : t1;
 	const side = t2 === void 0 ? "bottom" : t2;
 	const sideOffset = t3 === void 0 ? DEFAULT_SIDE_OFFSET : t3;
-	const { modal, size } = useContext(PopoverContext);
+	const { modal, size } = useContext(PopoverContext$1);
+	const state = useContext(OverlayTriggerStateContext);
+	const handed = useSlottedContext(PopoverContext)?.triggerRef;
+	const panel = useRef(null);
+	const t4 = ref ?? void 0;
+	let t5;
+	if ($[12] !== t4) {
+		t5 = mergeRefs(panel, t4);
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	const merged = t5;
+	const pressedWithin = useRef(false);
+	let t6;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = () => {
+			pressedWithin.current = true;
+		};
+		$[14] = t6;
+	} else t6 = $[14];
+	const markPressWithin = t6;
+	let t7;
+	if ($[15] !== handed || $[16] !== triggerRef) {
+		t7 = {
+			handed,
+			own: triggerRef
+		};
+		$[15] = handed;
+		$[16] = triggerRef;
+		$[17] = t7;
+	} else t7 = $[17];
+	const triggers = useRef(t7);
+	let t8;
+	if ($[18] !== handed || $[19] !== triggerRef) {
+		t8 = () => {
+			triggers.current = {
+				handed,
+				own: triggerRef
+			};
+		};
+		$[18] = handed;
+		$[19] = triggerRef;
+		$[20] = t8;
+	} else t8 = $[20];
+	useEffect(t8);
+	let t9;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = (element) => {
+			const { handed: fromTrigger, own } = triggers.current;
+			return !((own?.current ?? fromTrigger?.current)?.contains(element) ?? false);
+		};
+		$[21] = t9;
+	} else t9 = $[21];
+	const isOutsideTrigger = t9;
+	const t10 = modal || state === null || !state.isOpen;
+	let t11;
+	if ($[22] !== state) {
+		t11 = (event) => {
+			if (pressedWithin.current) {
+				pressedWithin.current = false;
+				return;
+			}
+			if (event.target instanceof Element && !isOutsideTrigger(event.target)) return;
+			state?.close();
+		};
+		$[22] = state;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = () => {
+			pressedWithin.current = false;
+		};
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== t10 || $[26] !== t11) {
+		t13 = {
+			isDisabled: t10,
+			onInteractOutside: t11,
+			onInteractOutsideStart: t12,
+			ref: panel
+		};
+		$[25] = t10;
+		$[26] = t11;
+		$[27] = t13;
+	} else t13 = $[27];
+	useInteractOutside(t13);
 	const descriptionId = useId();
 	const [described, setDescribed] = useState(false);
-	let t4;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = () => {
+	let t14;
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = () => {
 			setDescribed(true);
 			return () => {
 				setDescribed(false);
 			};
 		};
-		$[12] = t4;
-	} else t4 = $[12];
-	const register = t4;
-	let t5;
-	if ($[13] !== descriptionId) {
-		t5 = {
+		$[28] = t14;
+	} else t14 = $[28];
+	const register = t14;
+	let t15;
+	if ($[29] !== descriptionId) {
+		t15 = {
 			id: descriptionId,
 			register
 		};
-		$[13] = descriptionId;
-		$[14] = t5;
-	} else t5 = $[14];
-	const description = t5;
-	const t6 = !modal;
-	let t7;
-	if ($[15] !== align || $[16] !== side) {
-		t7 = placementOf(side, align);
-		$[15] = align;
-		$[16] = side;
-		$[17] = t7;
-	} else t7 = $[17];
-	let t8;
-	if ($[18] !== size) {
-		t8 = (state) => props(overlay.popup, styles.content, styles[size], popupOrigin(state.placement));
-		$[18] = size;
-		$[19] = t8;
-	} else t8 = $[19];
-	let t9;
-	if ($[20] !== className || $[21] !== style || $[22] !== t8) {
-		t9 = mergeStatefulStyles(t8, {
+		$[29] = descriptionId;
+		$[30] = t15;
+	} else t15 = $[30];
+	const description = t15;
+	const t16 = !modal;
+	let t17;
+	if ($[31] !== align || $[32] !== side) {
+		t17 = placementOf(side, align);
+		$[31] = align;
+		$[32] = side;
+		$[33] = t17;
+	} else t17 = $[33];
+	const t18 = modal ? void 0 : isOutsideTrigger;
+	let t19;
+	if ($[34] !== size) {
+		t19 = (render) => props(overlay.popup, styles.content, styles[size], popupOrigin(render.placement));
+		$[34] = size;
+		$[35] = t19;
+	} else t19 = $[35];
+	let t20;
+	if ($[36] !== className || $[37] !== style || $[38] !== t19) {
+		t20 = mergeStatefulStyles(t19, {
 			className,
 			style
 		});
-		$[20] = className;
-		$[21] = style;
-		$[22] = t8;
-		$[23] = t9;
-	} else t9 = $[23];
-	let t10;
-	if ($[24] !== children || $[25] !== described || $[26] !== description || $[27] !== descriptionId || $[28] !== modal || $[29] !== props$1) {
-		t10 = modal ? /* @__PURE__ */ jsx(Dialog, {
+		$[36] = className;
+		$[37] = style;
+		$[38] = t19;
+		$[39] = t20;
+	} else t20 = $[39];
+	let t21;
+	if ($[40] !== children || $[41] !== described || $[42] !== description || $[43] !== descriptionId || $[44] !== modal || $[45] !== props$1) {
+		t21 = modal ? /* @__PURE__ */ jsx(Dialog, {
 			"aria-describedby": described ? descriptionId : void 0,
 			...props$1,
 			...props(overlay.popupDialog, focus.ring),
@@ -470,45 +569,48 @@ function PopoverContent(t0) {
 			})
 		}) : /* @__PURE__ */ jsx(PanelDialog, {
 			"aria-describedby": described ? descriptionId : void 0,
+			onPressWithin: markPressWithin,
 			...props$1,
 			children: /* @__PURE__ */ jsx(DescriptionContext, {
 				value: description,
 				children
 			})
 		});
-		$[24] = children;
-		$[25] = described;
-		$[26] = description;
-		$[27] = descriptionId;
-		$[28] = modal;
-		$[29] = props$1;
-		$[30] = t10;
-	} else t10 = $[30];
-	let t11;
-	if ($[31] !== alignOffset || $[32] !== container || $[33] !== ref || $[34] !== sideOffset || $[35] !== t10 || $[36] !== t6 || $[37] !== t7 || $[38] !== t9 || $[39] !== triggerRef) {
-		t11 = /* @__PURE__ */ jsx(Popover, {
+		$[40] = children;
+		$[41] = described;
+		$[42] = description;
+		$[43] = descriptionId;
+		$[44] = modal;
+		$[45] = props$1;
+		$[46] = t21;
+	} else t21 = $[46];
+	let t22;
+	if ($[47] !== alignOffset || $[48] !== container || $[49] !== merged || $[50] !== sideOffset || $[51] !== t16 || $[52] !== t17 || $[53] !== t18 || $[54] !== t20 || $[55] !== t21 || $[56] !== triggerRef) {
+		t22 = /* @__PURE__ */ jsx(Popover, {
 			crossOffset: alignOffset,
-			isNonModal: t6,
+			isNonModal: t16,
 			offset: sideOffset,
-			placement: t7,
-			ref,
+			placement: t17,
+			ref: merged,
+			shouldCloseOnInteractOutside: t18,
 			triggerRef,
 			UNSTABLE_portalContainer: container,
-			...t9,
-			children: t10
+			...t20,
+			children: t21
 		});
-		$[31] = alignOffset;
-		$[32] = container;
-		$[33] = ref;
-		$[34] = sideOffset;
-		$[35] = t10;
-		$[36] = t6;
-		$[37] = t7;
-		$[38] = t9;
-		$[39] = triggerRef;
-		$[40] = t11;
-	} else t11 = $[40];
-	return t11;
+		$[47] = alignOffset;
+		$[48] = container;
+		$[49] = merged;
+		$[50] = sideOffset;
+		$[51] = t16;
+		$[52] = t17;
+		$[53] = t18;
+		$[54] = t20;
+		$[55] = t21;
+		$[56] = triggerRef;
+		$[57] = t22;
+	} else t22 = $[57];
+	return t22;
 }
 /**
 * Supporting copy under the title. The panel's `aria-describedby` points at