@cube-dev/ui-kit 0.197.0 → 0.198.0

package/dist/components/overlays/Dialog/use-retained-dialog-focus.js

@@ -0,0 +1,386 @@
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
+import { focusProgrammatically } from "../../../utils/react/programmaticFocus.js";
+import { useOpenTransitionContext } from "../Modal/OpenTransitionContext.js";
+import { trapsFocus, useDialogContext } from "./context.js";
+import { c } from "react/compiler-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { getFocusableTreeWalker } from "@react-aria/focus";
+import { focusSafely } from "@react-aria/interactions";
+//#region src/components/overlays/Dialog/use-retained-dialog-focus.ts
+/**
+* The event `FocusScope` dispatches on the element it is about to restore
+* focus to. Cancelling it takes the restore over.
+*/
+const RESTORE_FOCUS_EVENT = "react-aria-focus-scope-restore";
+/** Restores one dialog's unmount has taken over, so no other takes it too. */
+const takenOverRestores = /* @__PURE__ */ new WeakSet();
+/** Set while an unmount redirects a restore, which no other takes over. */
+let isRedirectingUnmount = false;
+/**
+* The popup `element` sits in, while that popup is open, and the control that
+* opened it: a menu and its trigger for one of its items, a popover and its
+* trigger for a button in it. React Aria points such a control at its popup
+* with `aria-controls`.
+*/
+function findPopup(element) {
+	const doc = element.ownerDocument;
+	const triggers = doc.querySelectorAll("[aria-haspopup]:not([aria-haspopup=\"false\"])[aria-controls], [aria-expanded=\"true\"][aria-controls]");
+	for (const trigger of Array.from(triggers)) for (const id of trigger.getAttribute("aria-controls").split(/\s+/)) {
+		const popup = id ? doc.getElementById(id) : null;
+		if (popup?.contains(element)) return {
+			popupTrigger: trigger,
+			popup
+		};
+	}
+	return {
+		popupTrigger: null,
+		popup: null
+	};
+}
+function readOpener() {
+	if (typeof document === "undefined") return null;
+	const element = document.activeElement;
+	if (!element || element === document.body) return null;
+	return {
+		element,
+		...findPopup(element)
+	};
+}
+/**
+* Where focus goes back to: the opener, or, once it is gone, the control of
+* the popup it sat in, once that popup has closed too. `FocusScope` hands a
+* restore on the same way when a menu item's menu closes; a disclosure that
+* stays open around a removed control is not one. Only a connected element.
+*/
+function resolveOpener(opener) {
+	if (!opener) return null;
+	const { element, popupTrigger, popup } = opener;
+	const node = element.isConnected ? element : popupTrigger && (!popup?.isConnected || popupTrigger.getAttribute("aria-expanded") !== "true") ? popupTrigger : null;
+	return node?.isConnected && (node instanceof HTMLElement || node instanceof SVGElement) ? node : null;
+}
+/**
+* Restores focus the way `FocusScope` does, announcing it first: a retained
+* dialog closed around `node` takes the restore on to its own opener.
+*/
+function restoreFocusTo(node) {
+	const event = new CustomEvent(RESTORE_FOCUS_EVENT, {
+		bubbles: true,
+		cancelable: true
+	});
+	if (node.dispatchEvent(event)) focusProgrammatically(node, { preventScroll: true });
+}
+/**
+* Keeps focus moving for a retained dialog (`hideOnClose`) as it moves for a
+* dialog that mounts on open. Its `FocusScope` mounts once, while the dialog
+* is still closed, and a dialog that never unmounts gets none of what that
+* scope does with the element focused on open:
+*
+* - On close, focus returns to that element, at the end of the exit, by the
+*   same rule: only while focus is still in the dialog, lost to `<body>`, or
+*   left in another overlay that is closing.
+* - When that element is gone by the close, as a menu item goes with its
+*   menu, focus goes to the control of the popup it sat in instead.
+* - Opened from a popup that closes as it opens, the dialog keeps focus,
+*   which that popup would restore to its trigger: a dialog that mounts on
+*   open takes that restore over.
+* - Unmounted while open or closing, it restores focus the same way.
+* - Tab past either end moves to the page next to that element, while the
+*   dialog does not trap focus: a panel or a popover that is not dismissable
+*   while open, any dialog during its exit.
+* - A dialog opened from this one takes over its return target: when that
+*   one closes onto this dialog after it has closed, focus goes back where
+*   this one would have sent it.
+*
+* Returns whether the dialog is retained: only a retained dialog renders in
+* the `unmounted` phase.
+*/
+function useRetainedDialogFocus(dialogRef, isFocusInTreeRef) {
+	const $ = c(39);
+	const context = useDialogContext();
+	const isOpen = !!context.isOpen;
+	const shouldRestoreFocus = context.shouldRestoreFocus ?? true;
+	const transitionState = useOpenTransitionContext()?.transitionState;
+	const [isRetained, setIsRetained] = useState(false);
+	const [wasOpen, setWasOpen] = useState(false);
+	const [openedFrom, setOpenedFrom] = useState(null);
+	const [mountedFrom] = useState(_temp);
+	const openerRef = useRef(null);
+	const handOffRef = useRef(null);
+	if (transitionState === "unmounted" && !isRetained) setIsRetained(true);
+	if (isOpen !== wasOpen) {
+		setWasOpen(isOpen);
+		setOpenedFrom(isOpen ? readOpener() : null);
+	}
+	let t0;
+	if ($[0] !== context || $[1] !== isOpen || $[2] !== isRetained || $[3] !== shouldRestoreFocus || $[4] !== transitionState) {
+		t0 = isRetained && shouldRestoreFocus && transitionState !== "unmounted" && !(isOpen && trapsFocus(context));
+		$[0] = context;
+		$[1] = isOpen;
+		$[2] = isRetained;
+		$[3] = shouldRestoreFocus;
+		$[4] = transitionState;
+		$[5] = t0;
+	} else t0 = $[5];
+	const handlesTab = t0;
+	let t1;
+	let t2;
+	if ($[6] !== dialogRef || $[7] !== isOpen || $[8] !== openedFrom) {
+		t1 = () => {
+			if (!isOpen) return;
+			handOffRef.current = null;
+			if (openedFrom && !dialogRef.current?.contains(openedFrom.element)) openerRef.current = openedFrom;
+		};
+		t2 = [
+			isOpen,
+			dialogRef,
+			openedFrom
+		];
+		$[6] = dialogRef;
+		$[7] = isOpen;
+		$[8] = openedFrom;
+		$[9] = t1;
+		$[10] = t2;
+	} else {
+		t1 = $[9];
+		t2 = $[10];
+	}
+	useLayoutEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[11] !== dialogRef || $[12] !== shouldRestoreFocus || $[13] !== transitionState) {
+		t3 = () => {
+			if (transitionState !== "unmounted") return;
+			const node = resolveOpener(openerRef.current);
+			openerRef.current = null;
+			const activeElement = document.activeElement;
+			if (!shouldRestoreFocus || !node) {
+				if (activeElement && dialogRef.current?.contains(activeElement)) activeElement.blur();
+				return;
+			}
+			if (!activeElement || activeElement === document.body || !!dialogRef.current?.contains(activeElement) || !!activeElement.closest("[data-react-aria-top-layer=\"true\"]")) restoreFocusTo(node);
+			else handOffRef.current = node;
+		};
+		t4 = [
+			transitionState,
+			shouldRestoreFocus,
+			dialogRef
+		];
+		$[11] = dialogRef;
+		$[12] = shouldRestoreFocus;
+		$[13] = transitionState;
+		$[14] = t3;
+		$[15] = t4;
+	} else {
+		t3 = $[14];
+		t4 = $[15];
+	}
+	useEffect(t3, t4);
+	let t5;
+	let t6;
+	if ($[16] !== dialogRef || $[17] !== isOpen || $[18] !== isRetained) {
+		t5 = () => {
+			const dialog = dialogRef.current;
+			const { popup, popupTrigger } = openerRef.current ?? {};
+			if (!isRetained || !isOpen || !dialog || !popup || !popupTrigger) return;
+			const onRestore = (event) => {
+				if (event.target !== popupTrigger) return;
+				event.preventDefault();
+				event.stopPropagation();
+				if (!dialog.contains(document.activeElement)) focusSafely(dialog);
+			};
+			const stop = () => {
+				document.removeEventListener(RESTORE_FOCUS_EVENT, onRestore, true);
+			};
+			const until = Date.now() + 1e3;
+			let frame = 0;
+			let hasCollapsed = false;
+			const wait = () => {
+				frame = requestAnimationFrame(() => {
+					const isExpanded = popupTrigger.getAttribute("aria-expanded") === "true";
+					if (hasCollapsed && isExpanded) {
+						stop();
+						return;
+					}
+					if (!isExpanded) hasCollapsed = true;
+					if (popup.isConnected && Date.now() < until) wait();
+					else frame = requestAnimationFrame(stop);
+				});
+			};
+			document.addEventListener(RESTORE_FOCUS_EVENT, onRestore, true);
+			wait();
+			return () => {
+				cancelAnimationFrame(frame);
+				stop();
+			};
+		};
+		t6 = [
+			isRetained,
+			isOpen,
+			dialogRef
+		];
+		$[16] = dialogRef;
+		$[17] = isOpen;
+		$[18] = isRetained;
+		$[19] = t5;
+		$[20] = t6;
+	} else {
+		t5 = $[19];
+		t6 = $[20];
+	}
+	useEffect(t5, t6);
+	let t7;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = {
+			restores: false,
+			dialog: null
+		};
+		$[21] = t7;
+	} else t7 = $[21];
+	const unmountRef = useRef(t7);
+	let t8;
+	if ($[22] !== dialogRef || $[23] !== isRetained || $[24] !== shouldRestoreFocus) {
+		t8 = () => {
+			unmountRef.current = {
+				restores: isRetained && shouldRestoreFocus,
+				dialog: dialogRef.current
+			};
+		};
+		$[22] = dialogRef;
+		$[23] = isRetained;
+		$[24] = shouldRestoreFocus;
+		$[25] = t8;
+	} else t8 = $[25];
+	useLayoutEffect(t8);
+	let t10;
+	let t9;
+	if ($[26] !== isFocusInTreeRef) {
+		t9 = () => () => {
+			const opener = openerRef.current;
+			const { restores, dialog: dialog_0 } = unmountRef.current;
+			if (!restores || !opener) return;
+			const activeElement_0 = document.activeElement;
+			if (activeElement_0 !== document.body && !isFocusInTreeRef.current && !dialog_0?.contains(activeElement_0)) return;
+			let isHandled = false;
+			const onRestore_0 = (event_0) => {
+				if (isHandled || isRedirectingUnmount || takenOverRestores.has(event_0) || document.activeElement !== document.body) return;
+				const node_0 = resolveOpener(opener);
+				if (node_0 === event_0.target) return;
+				isHandled = true;
+				takenOverRestores.add(event_0);
+				event_0.preventDefault();
+				event_0.stopPropagation();
+				isRedirectingUnmount = true;
+				if (node_0) restoreFocusTo(node_0);
+				isRedirectingUnmount = false;
+			};
+			document.addEventListener(RESTORE_FOCUS_EVENT, onRestore_0, true);
+			requestAnimationFrame(() => requestAnimationFrame(() => {
+				document.removeEventListener(RESTORE_FOCUS_EVENT, onRestore_0, true);
+				if (isHandled || document.activeElement !== document.body) return;
+				const node_1 = resolveOpener(opener);
+				isRedirectingUnmount = true;
+				if (node_1) restoreFocusTo(node_1);
+				isRedirectingUnmount = false;
+			}));
+		};
+		t10 = [isFocusInTreeRef];
+		$[26] = isFocusInTreeRef;
+		$[27] = t10;
+		$[28] = t9;
+	} else {
+		t10 = $[27];
+		t9 = $[28];
+	}
+	useLayoutEffect(t9, t10);
+	let t11;
+	let t12;
+	if ($[29] !== dialogRef || $[30] !== isOpen || $[31] !== isRetained) {
+		t11 = () => {
+			const dialog_1 = dialogRef.current;
+			if (!isRetained || isOpen || !dialog_1) return;
+			let isRedirecting = false;
+			const onRestore_1 = (event_1) => {
+				const node_2 = handOffRef.current;
+				if (isRedirecting || !node_2?.isConnected || dialog_1.contains(node_2)) return;
+				event_1.preventDefault();
+				event_1.stopPropagation();
+				isRedirecting = true;
+				restoreFocusTo(node_2);
+				isRedirecting = false;
+			};
+			dialog_1.addEventListener(RESTORE_FOCUS_EVENT, onRestore_1, true);
+			return () => {
+				dialog_1.removeEventListener(RESTORE_FOCUS_EVENT, onRestore_1, true);
+			};
+		};
+		t12 = [
+			isRetained,
+			isOpen,
+			dialogRef
+		];
+		$[29] = dialogRef;
+		$[30] = isOpen;
+		$[31] = isRetained;
+		$[32] = t11;
+		$[33] = t12;
+	} else {
+		t11 = $[32];
+		t12 = $[33];
+	}
+	useEffect(t11, t12);
+	let t13;
+	let t14;
+	if ($[34] !== dialogRef || $[35] !== handlesTab || $[36] !== mountedFrom) {
+		t13 = () => {
+			if (!handlesTab) return;
+			const onKeyDown = (event_2) => {
+				if (event_2.key !== "Tab" || event_2.altKey || event_2.ctrlKey || event_2.metaKey || event_2.isComposing) return;
+				const dialog_2 = dialogRef.current;
+				const focused = document.activeElement;
+				if (!dialog_2 || !focused || !dialog_2.contains(focused)) return;
+				const walker = getFocusableTreeWalker(document.body, { tabbable: true });
+				walker.currentNode = focused;
+				let next = event_2.shiftKey ? walker.previousNode() : walker.nextNode();
+				if (next && dialog_2.contains(next)) return;
+				const opener_0 = resolveOpener(openerRef.current);
+				if (!opener_0) {
+					if (mountedFrom?.isConnected && mountedFrom !== document.body) event_2.stopPropagation();
+					return;
+				}
+				event_2.preventDefault();
+				event_2.stopPropagation();
+				walker.currentNode = opener_0;
+				do
+					next = event_2.shiftKey ? walker.previousNode() : walker.nextNode();
+				while (next && dialog_2.contains(next));
+				if (next) next.focus();
+				else if (opener_0.closest("[role=\"dialog\"], [role=\"alertdialog\"]")) opener_0.focus();
+				else focused.blur();
+			};
+			window.addEventListener("keydown", onKeyDown, true);
+			return () => window.removeEventListener("keydown", onKeyDown, true);
+		};
+		t14 = [
+			handlesTab,
+			dialogRef,
+			mountedFrom
+		];
+		$[34] = dialogRef;
+		$[35] = handlesTab;
+		$[36] = mountedFrom;
+		$[37] = t13;
+		$[38] = t14;
+	} else {
+		t13 = $[37];
+		t14 = $[38];
+	}
+	useEffect(t13, t14);
+	return isRetained;
+}
+function _temp() {
+	return typeof document === "undefined" ? null : document.activeElement;
+}
+//#endregion
+export { useRetainedDialogFocus };
+
+//# sourceMappingURL=use-retained-dialog-focus.js.map

package/dist/components/overlays/Dialog/use-retained-dialog-focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-retained-dialog-focus.js","names":["getFocusableTreeWalker","focusSafely","RefObject","useEffect","useLayoutEffect","useRef","useState","focusProgrammatically","useOpenTransitionContext","trapsFocus","useDialogContext","RESTORE_FOCUS_EVENT","takenOverRestores","WeakSet","Event","isRedirectingUnmount","FocusTarget","HTMLElement","SVGElement","Opener","element","Element","popupTrigger","popup","findPopup","doc","ownerDocument","triggers","querySelectorAll","trigger","Array","from","id","getAttribute","split","getElementById","contains","readOpener","document","activeElement","body","resolveOpener","opener","node","isConnected","restoreFocusTo","event","CustomEvent","bubbles","cancelable","dispatchEvent","preventScroll","useRetainedDialogFocus","dialogRef","isFocusInTreeRef","$","_c","context","isOpen","shouldRestoreFocus","transitionState","isRetained","setIsRetained","wasOpen","setWasOpen","openedFrom","setOpenedFrom","mountedFrom","_temp","openerRef","handOffRef","t0","handlesTab","t1","t2","current","t3","t4","blur","isFocusLost","closest","t5","t6","dialog","onRestore","target","preventDefault","stopPropagation","stop","removeEventListener","until","Date","now","frame","hasCollapsed","wait","requestAnimationFrame","isExpanded","addEventListener","cancelAnimationFrame","t7","Symbol","for","restores","unmountRef","t8","t10","t9","dialog_0","activeElement_0","isHandled","onRestore_0","event_0","has","node_0","add","node_1","t11","t12","dialog_1","isRedirecting","onRestore_1","event_1","node_2","t13","t14","onKeyDown","event_2","key","altKey","ctrlKey","metaKey","isComposing","dialog_2","focused","walker","tabbable","currentNode","next","shiftKey","previousNode","nextNode","opener_0","focus","window","_c"],"sources":["../../../../src/components/overlays/Dialog/use-retained-dialog-focus.ts"],"sourcesContent":["import { getFocusableTreeWalker } from '@react-aria/focus';\nimport { focusSafely } from '@react-aria/interactions';\nimport { RefObject, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { focusProgrammatically } from '../../../utils/react/programmaticFocus';\nimport { useOpenTransitionContext } from '../Modal/OpenTransitionContext';\n\nimport { trapsFocus, useDialogContext } from './context';\n\n/**\n * The event `FocusScope` dispatches on the element it is about to restore\n * focus to. Cancelling it takes the restore over.\n */\nconst RESTORE_FOCUS_EVENT = 'react-aria-focus-scope-restore';\n\n/** Restores one dialog's unmount has taken over, so no other takes it too. */\nconst takenOverRestores = new WeakSet<Event>();\n/** Set while an unmount redirects a restore, which no other takes over. */\nlet isRedirectingUnmount = false;\n\ntype FocusTarget = HTMLElement | SVGElement;\n\ninterface Opener {\n  /** The element focused when the dialog opened. */\n  element: Element;\n  /** The control of the popup `element` sat in, such as a menu's trigger. */\n  popupTrigger: Element | null;\n  /** That popup. */\n  popup: Element | null;\n}\n\n/**\n * The popup `element` sits in, while that popup is open, and the control that\n * opened it: a menu and its trigger for one of its items, a popover and its\n * trigger for a button in it. React Aria points such a control at its popup\n * with `aria-controls`.\n */\nfunction findPopup(element: Element) {\n  const doc = element.ownerDocument;\n\n  const triggers = doc.querySelectorAll(\n    '[aria-haspopup]:not([aria-haspopup=\"false\"])[aria-controls], [aria-expanded=\"true\"][aria-controls]',\n  );\n\n  for (const trigger of Array.from(triggers)) {\n    for (const id of trigger.getAttribute('aria-controls')!.split(/\\s+/)) {\n      const popup = id ? doc.getElementById(id) : null;\n\n      if (popup?.contains(element)) return { popupTrigger: trigger, popup };\n    }\n  }\n\n  return { popupTrigger: null, popup: null };\n}\n\nfunction readOpener(): Opener | null {\n  if (typeof document === 'undefined') return null;\n\n  const element = document.activeElement;\n\n  if (!element || element === document.body) return null;\n\n  return { element, ...findPopup(element) };\n}\n\n/**\n * Where focus goes back to: the opener, or, once it is gone, the control of\n * the popup it sat in, once that popup has closed too. `FocusScope` hands a\n * restore on the same way when a menu item's menu closes; a disclosure that\n * stays open around a removed control is not one. Only a connected element.\n */\nfunction resolveOpener(opener: Opener | null): FocusTarget | null {\n  if (!opener) return null;\n\n  const { element, popupTrigger, popup } = opener;\n  const node = element.isConnected\n    ? element\n    : popupTrigger &&\n        (!popup?.isConnected ||\n          popupTrigger.getAttribute('aria-expanded') !== 'true')\n      ? popupTrigger\n      : null;\n\n  // `FocusScope` restores to an SVG opener too, such as a chart mark.\n  return node?.isConnected &&\n    (node instanceof HTMLElement || node instanceof SVGElement)\n    ? node\n    : null;\n}\n\n/**\n * Restores focus the way `FocusScope` does, announcing it first: a retained\n * dialog closed around `node` takes the restore on to its own opener.\n */\nfunction restoreFocusTo(node: FocusTarget) {\n  const event = new CustomEvent(RESTORE_FOCUS_EVENT, {\n    bubbles: true,\n    cancelable: true,\n  });\n\n  if (node.dispatchEvent(event)) {\n    focusProgrammatically(node, { preventScroll: true });\n  }\n}\n\n/**\n * Keeps focus moving for a retained dialog (`hideOnClose`) as it moves for a\n * dialog that mounts on open. Its `FocusScope` mounts once, while the dialog\n * is still closed, and a dialog that never unmounts gets none of what that\n * scope does with the element focused on open:\n *\n * - On close, focus returns to that element, at the end of the exit, by the\n *   same rule: only while focus is still in the dialog, lost to `<body>`, or\n *   left in another overlay that is closing.\n * - When that element is gone by the close, as a menu item goes with its\n *   menu, focus goes to the control of the popup it sat in instead.\n * - Opened from a popup that closes as it opens, the dialog keeps focus,\n *   which that popup would restore to its trigger: a dialog that mounts on\n *   open takes that restore over.\n * - Unmounted while open or closing, it restores focus the same way.\n * - Tab past either end moves to the page next to that element, while the\n *   dialog does not trap focus: a panel or a popover that is not dismissable\n *   while open, any dialog during its exit.\n * - A dialog opened from this one takes over its return target: when that\n *   one closes onto this dialog after it has closed, focus goes back where\n *   this one would have sent it.\n *\n * Returns whether the dialog is retained: only a retained dialog renders in\n * the `unmounted` phase.\n */\nexport function useRetainedDialogFocus(\n  dialogRef: RefObject<HTMLElement | null>,\n  isFocusInTreeRef: RefObject<boolean>,\n) {\n  const context = useDialogContext();\n  const isOpen = !!context.isOpen;\n  const shouldRestoreFocus = context.shouldRestoreFocus ?? true;\n  const transitionState = useOpenTransitionContext()?.transitionState;\n  const [isRetained, setIsRetained] = useState(false);\n  const [wasOpen, setWasOpen] = useState(false);\n  const [openedFrom, setOpenedFrom] = useState<Opener | null>(null);\n  // What `FocusScope` holds as its own restore target: the element focused\n  // when it mounted.\n  const [mountedFrom] = useState(() =>\n    typeof document === 'undefined' ? null : document.activeElement,\n  );\n  const openerRef = useRef<Opener | null>(null);\n  // Where a restore aimed into the closed dialog goes instead.\n  const handOffRef = useRef<FocusTarget | null>(null);\n\n  if (transitionState === 'unmounted' && !isRetained) setIsRetained(true);\n\n  // Read in the render that opens it, as `FocusScope` reads it: the commit can\n  // move focus before any effect runs, into the dialog (a native `autoFocus`,\n  // a child's layout effect) or to `<body>` (an opener it disables). The\n  // popup's control is read now too: its `aria-controls` goes as that popup\n  // closes. Cleared on close, so a closed dialog holds no removed opener.\n  if (isOpen !== wasOpen) {\n    setWasOpen(isOpen);\n    setOpenedFrom(isOpen ? readOpener() : null);\n  }\n\n  // `FocusScope` takes Tab over whenever it does not trap focus, by the\n  // element focused when it mounted: around a dialog that does not trap\n  // focus, and around any dialog during its exit.\n  const handlesTab =\n    isRetained &&\n    shouldRestoreFocus &&\n    transitionState !== 'unmounted' &&\n    !(isOpen && trapsFocus(context));\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    handOffRef.current = null;\n\n    // A reopen during the exit keeps its opener while focus is still inside\n    // or already lost to `<body>`, as `FocusScope` keeps its own.\n    if (openedFrom && !dialogRef.current?.contains(openedFrom.element)) {\n      openerRef.current = openedFrom;\n    }\n  }, [isOpen, dialogRef, openedFrom]);\n\n  useEffect(() => {\n    if (transitionState !== 'unmounted') return;\n\n    const node = resolveOpener(openerRef.current);\n\n    openerRef.current = null;\n\n    const activeElement = document.activeElement;\n\n    if (!shouldRestoreFocus || !node) {\n      // Nowhere to go: focus left in the hidden dialog is lost, as it is when\n      // a dialog unmounts.\n      if (activeElement && dialogRef.current?.contains(activeElement)) {\n        (activeElement as FocusTarget).blur();\n      }\n\n      return;\n    }\n\n    // Also lost when left in another overlay that closes with this one: a\n    // nested dialog's own restore target is about to be hidden. `Overlay`,\n    // `Select` and `ListBoxPopover` mark a closing overlay `=\"true\"`; the\n    // notifications layer carries it empty. React Aria's toast region also\n    // carries `\"true\"`, but nothing in the kit renders one.\n    const isFocusLost =\n      !activeElement ||\n      activeElement === document.body ||\n      !!dialogRef.current?.contains(activeElement) ||\n      !!activeElement.closest('[data-react-aria-top-layer=\"true\"]');\n\n    if (isFocusLost) {\n      restoreFocusTo(node);\n    } else {\n      // Focus is in a dialog opened from this one, or somewhere the user\n      // chose. If that dialog restores into this one, focus comes here.\n      handOffRef.current = node;\n    }\n  }, [transitionState, shouldRestoreFocus, dialogRef]);\n\n  // Opened from a popup that closes as it opens, as from a popover's button:\n  // that popup's `FocusScope` restores to its trigger a frame after it goes,\n  // once focus is lost with it. A dialog that mounts on open joins that scope\n  // and takes the restore over; this one mounted earlier, so it cancels the\n  // restore and keeps focus itself, until a frame after the popup is gone.\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    const { popup, popupTrigger } = openerRef.current ?? {};\n\n    if (!isRetained || !isOpen || !dialog || !popup || !popupTrigger) return;\n\n    const onRestore = (event: Event) => {\n      if (event.target !== popupTrigger) return;\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (!dialog.contains(document.activeElement)) focusSafely(dialog);\n    };\n\n    const stop = () => {\n      document.removeEventListener(RESTORE_FOCUS_EVENT, onRestore, true);\n    };\n\n    // A popup that stays open never restores; stop waiting after its exit.\n    const until = Date.now() + 1000;\n    let frame = 0;\n    let hasCollapsed = false;\n\n    const wait = () => {\n      frame = requestAnimationFrame(() => {\n        const isExpanded =\n          popupTrigger.getAttribute('aria-expanded') === 'true';\n\n        // Reopened: what it restores from now on is its own.\n        if (hasCollapsed && isExpanded) {\n          stop();\n\n          return;\n        }\n\n        if (!isExpanded) hasCollapsed = true;\n\n        if (popup.isConnected && Date.now() < until) {\n          wait();\n        } else {\n          frame = requestAnimationFrame(stop);\n        }\n      });\n    };\n\n    document.addEventListener(RESTORE_FOCUS_EVENT, onRestore, true);\n    wait();\n\n    return () => {\n      cancelAnimationFrame(frame);\n      stop();\n    };\n  }, [isRetained, isOpen, dialogRef]);\n\n  // Read on unmount: whether a restore then is this hook's, and the dialog.\n  const unmountRef = useRef<{\n    restores: boolean;\n    dialog: HTMLElement | null;\n  }>({ restores: false, dialog: null });\n\n  useLayoutEffect(() => {\n    unmountRef.current = {\n      restores: isRetained && shouldRestoreFocus,\n      dialog: dialogRef.current,\n    };\n  });\n\n  // Unmounted while open or closing, as when what renders it goes:\n  // `FocusScope` restores a frame later to the element focused when it\n  // mounted, or to what its tree has put in that one's place, or nowhere once\n  // that is gone. Focus goes to the opener instead, by `FocusScope`'s own rule:\n  // only while focus is in this dialog or in what was opened from it, or\n  // lost to `<body>`.\n  useLayoutEffect(\n    () => () => {\n      const opener = openerRef.current;\n      const { restores, dialog } = unmountRef.current;\n\n      if (!restores || !opener) return;\n\n      const activeElement = document.activeElement;\n\n      // Focus elsewhere on the page stays there.\n      if (\n        activeElement !== document.body &&\n        !isFocusInTreeRef.current &&\n        !dialog?.contains(activeElement)\n      ) {\n        return;\n      }\n\n      let isHandled = false;\n\n      const onRestore = (event: Event) => {\n        if (\n          isHandled ||\n          isRedirectingUnmount ||\n          takenOverRestores.has(event) ||\n          document.activeElement !== document.body\n        ) {\n          return;\n        }\n\n        const node = resolveOpener(opener);\n\n        if (node === event.target) return;\n\n        isHandled = true;\n        takenOverRestores.add(event);\n        event.preventDefault();\n        event.stopPropagation();\n\n        isRedirectingUnmount = true;\n        if (node) restoreFocusTo(node);\n        isRedirectingUnmount = false;\n      };\n\n      document.addEventListener(RESTORE_FOCUS_EVENT, onRestore, true);\n      // Past `FocusScope`'s frame, whichever cleanup scheduled first. With no\n      // restore by then and focus still lost, restore it here.\n      requestAnimationFrame(() =>\n        requestAnimationFrame(() => {\n          document.removeEventListener(RESTORE_FOCUS_EVENT, onRestore, true);\n\n          if (isHandled || document.activeElement !== document.body) return;\n\n          const node = resolveOpener(opener);\n\n          // Another dialog unmounting with this one leaves it alone.\n          isRedirectingUnmount = true;\n          if (node) restoreFocusTo(node);\n          isRedirectingUnmount = false;\n        }),\n      );\n    },\n    [isFocusInTreeRef],\n  );\n\n  useEffect(() => {\n    const dialog = dialogRef.current;\n\n    if (!isRetained || isOpen || !dialog) return;\n\n    let isRedirecting = false;\n\n    // Capture, ahead of the `FocusScope`s inside, which stop it bubbling.\n    const onRestore = (event: Event) => {\n      const node = handOffRef.current;\n\n      // A hand-off back into this dialog, or round to it again through\n      // another one, would never end.\n      if (isRedirecting || !node?.isConnected || dialog.contains(node)) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      isRedirecting = true;\n      restoreFocusTo(node);\n      isRedirecting = false;\n    };\n\n    dialog.addEventListener(RESTORE_FOCUS_EVENT, onRestore, true);\n\n    return () => {\n      dialog.removeEventListener(RESTORE_FOCUS_EVENT, onRestore, true);\n    };\n  }, [isRetained, isOpen, dialogRef]);\n\n  useEffect(() => {\n    if (!handlesTab) return;\n\n    // Runs on the window, ahead of `FocusScope`'s handler on the document.\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key !== 'Tab' ||\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey ||\n        event.isComposing\n      ) {\n        return;\n      }\n\n      const dialog = dialogRef.current;\n      const focused = document.activeElement;\n\n      if (!dialog || !focused || !dialog.contains(focused)) return;\n\n      const walker = getFocusableTreeWalker(document.body, { tabbable: true });\n\n      walker.currentNode = focused;\n\n      let next = event.shiftKey ? walker.previousNode() : walker.nextNode();\n\n      if (next && dialog.contains(next)) return;\n\n      const opener = resolveOpener(openerRef.current);\n\n      // Without one, Tab moves natively. `FocusScope`'s handler would still\n      // go on from the element focused when it mounted, while it is there.\n      if (!opener) {\n        if (mountedFrom?.isConnected && mountedFrom !== document.body) {\n          event.stopPropagation();\n        }\n\n        return;\n      }\n\n      // `FocusScope`'s handler would go on from that element instead.\n      event.preventDefault();\n      event.stopPropagation();\n\n      // On from the opener, skipping the dialog in case it follows it.\n      walker.currentNode = opener;\n\n      do {\n        next = event.shiftKey ? walker.previousNode() : walker.nextNode();\n      } while (next && dialog.contains(next));\n\n      if (next) {\n        (next as FocusTarget).focus();\n      } else if (opener.closest('[role=\"dialog\"], [role=\"alertdialog\"]')) {\n        // Nothing after it: back to the opener when it sits in another\n        // dialog, as `FocusScope` does when it sits in another scope.\n        opener.focus();\n      } else {\n        (focused as FocusTarget).blur();\n      }\n    };\n\n    window.addEventListener('keydown', onKeyDown, true);\n\n    return () => window.removeEventListener('keydown', onKeyDown, true);\n  }, [handlesTab, dialogRef, mountedFrom]);\n\n  return isRetained;\n}\n"],"mappings":"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"}

package/dist/components/overlays/Modal/Modal.d.ts

@@ -1,4 +1,3 @@
 
 import "./types.js";
-import { BaseProps, Styles } from "@tenphi/tasty";
-import "react";
+import { BaseProps, Styles } from "@tenphi/tasty";

package/dist/components/overlays/Modal/Modal.js

@@ -1,17 +1,16 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { mergeRefs as mergeRefs$1 } from "../../../utils/react/useCombinedRefs.js";
 import { ModalContainmentProvider, useModalContainment } from "./modal-containment.js";
 import { useOverlayEscapeGuard } from "../../../utils/react/useOverlayEscapeGuard.js";
-import { _Overlay } from "./Overlay.js";
-import { _Underlay } from "./Underlay.js";
+import { Overlay as _Overlay } from "./Overlay.js";
+import { Underlay as _Underlay } from "./Underlay.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useModal, useOverlay, usePreventScroll } from "react-aria";
 import { useObjectRef } from "@react-aria/utils";
-
 //#region src/components/overlays/Modal/Modal.tsx
 const OVERLAY_WRAPPER_STYLES = {
 	position: "fixed",
@@ -243,7 +242,7 @@ let ModalWrapper = forwardRef(function ModalWrapper(props, ref) {
 });
 let _Modal = forwardRef(Modal);
 _Modal.displayName = "Modal";
-
 //#endregion
-export { OVERLAY_WRAPPER_STYLES, _Modal };
+export { _Modal as Modal, OVERLAY_WRAPPER_STYLES };
+
 //# sourceMappingURL=Modal.js.map

package/dist/components/overlays/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["useObjectRef","BaseProps","Styles","tasty","ForwardedRef","forwardRef","ReactNode","useModal","useOverlay","usePreventScroll","mergeProps","mergeRefs","useOverlayEscapeGuard","ModalContainmentProvider","useModalContainment","Overlay","ModalProps","TransitionState","WithCloseBehavior","Underlay","Props","OVERLAY_WRAPPER_STYLES","position","display","left","top","placeItems","boxSizing","width","height","pointerEvents","zIndex","transition","open","ModalWrapperElement","qa","styles","ModalElement","hide","exit","unmounted","transform","opacity","CubeModalProps","Omit","container","HTMLElement","onClose","action","type","shouldCloseOnInteractOutside","element","Element","Modal","props","ref","$","_c","children","otherProps","domRef","t0","overlayProps","rawOverlayProps","underlayProps","isOpen","containment","containmentRef","t1","t2","t3","t4","t5","ModalWrapperProps","placement","ModalWrapper","transitionState","isDisabled","modalProps","T0","T1","t6","t7","t8","t9","enter","entered","t10","t11","t12","_Modal","displayName"],"sources":["../../../../src/components/overlays/Modal/Modal.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport { BaseProps, Styles, tasty } from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, ReactNode } from 'react';\nimport { useModal, useOverlay, usePreventScroll } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\nimport { mergeRefs } from '../../../utils/react/useCombinedRefs';\nimport { useOverlayEscapeGuard } from '../../../utils/react/useOverlayEscapeGuard';\n\nimport {\n  ModalContainmentProvider,\n  useModalContainment,\n} from './modal-containment';\nimport { Overlay } from './Overlay';\nimport { ModalProps, TransitionState, WithCloseBehavior } from './types';\nimport { Underlay } from './Underlay';\n\nimport type { Props } from '../../../props';\n\nexport const OVERLAY_WRAPPER_STYLES: Styles = {\n  position: 'fixed',\n  display: 'grid',\n  left: 0,\n  top: 0,\n  placeItems: {\n    '': 'center',\n    'type=fullscreen': 'center',\n    'type=fullscreenTakeover | type=panel': 'stretch',\n  },\n  boxSizing: 'border-box',\n  width: '100vw',\n  height: '100dvh',\n  pointerEvents: 'none',\n  zIndex: 10,\n  transition: {\n    '': 'visibility .5s steps(2, start)',\n    open: 'visibility 0s linear',\n  },\n};\n\nconst ModalWrapperElement = tasty({\n  qa: 'ModalWrapper',\n  styles: OVERLAY_WRAPPER_STYLES,\n});\n\nconst ModalElement = tasty({\n  styles: {\n    display: 'grid',\n    hide: {\n      '': true,\n      'enter | entered': false,\n      exit: false,\n      unmounted: true,\n    },\n    zIndex: 10,\n    height: {\n      '': 'max 90dvh',\n      'type=fullscreenTakeover | type=panel': '100dvh 100dvh',\n      'type=fullscreen': '(100dvh - 8x) (100dvh - 8x)',\n      'type=panel': 'auto',\n    },\n    width: {\n      '': '$min-dialog-size (100dvw - 8x)',\n      'type=panel': 'auto',\n    },\n    pointerEvents: 'none',\n    transition: 'opacity .25s linear, transform .25s ease-in-out',\n    transform: {\n      '': 'initial',\n      'type=modal & !open': 'translate(0, -3x) scale(1, 1)',\n      '(type^=fullscreen | type=panel) & !open':\n        'translate(0, 0) scale(1.02, 1.02)',\n    },\n    opacity: {\n      '': 0,\n      open: 0.9999,\n    },\n  },\n});\n\nexport interface CubeModalProps\n  extends Omit<ModalProps, 'container' | 'type' | 'nodeRef'>,\n    WithCloseBehavior {\n  container?: HTMLElement;\n  qa?: BaseProps['qa'];\n  onClose?: (action?: string) => void;\n  type?: 'modal' | 'fullscreen' | 'fullscreenTakeover' | 'panel';\n  styles?: Styles;\n  shouldCloseOnInteractOutside?: (element: Element) => boolean;\n}\n\nfunction Modal(props: CubeModalProps, ref: ForwardedRef<HTMLElement>) {\n  let { qa, children, onClose, type, styles, ...otherProps } = props;\n  let domRef = useObjectRef(ref);\n\n  let { overlayProps: rawOverlayProps, underlayProps } = useOverlay(\n    { ...props },\n    domRef,\n  );\n\n  // Focus can stay in a modal while it closes, after a press on it or a close\n  // that restores focus nowhere; it must not answer for `Escape` meanwhile —\n  // see `useOverlayEscapeGuard`.\n  const overlayProps = useOverlayEscapeGuard(rawOverlayProps, props.isOpen);\n\n  // A panel leaves the page readable; every other type hides it while open.\n  const { containment, ref: containmentRef } = useModalContainment(\n    type !== 'panel',\n    !!props.isOpen,\n  );\n\n  return (\n    <ModalContainmentProvider value={containment}>\n      <Overlay {...otherProps}>\n        {type !== 'fullscreenTakeover' && type !== 'panel' && (\n          <Underlay {...underlayProps} />\n        )}\n        <ModalWrapper\n          ref={mergeRefs(domRef, containmentRef)}\n          qa={qa}\n          type={type}\n          overlayProps={overlayProps}\n          styles={styles}\n          onClose={onClose}\n        >\n          {children}\n        </ModalWrapper>\n      </Overlay>\n    </ModalContainmentProvider>\n  );\n}\n\ninterface ModalWrapperProps extends TransitionState {\n  children?: ReactNode;\n  qa?: BaseProps['qa'];\n  isOpen?: boolean;\n  type?: 'modal' | 'fullscreen' | 'fullscreenTakeover' | 'panel';\n  placement?: 'top' | 'bottom';\n  styles?: Styles;\n  overlayProps?: Props;\n  onClose?: () => void;\n}\n\nlet ModalWrapper = forwardRef(function ModalWrapper(\n  props: ModalWrapperProps,\n  ref,\n) {\n  let {\n    qa,\n    children,\n    isOpen,\n    type,\n    placement,\n    styles,\n    overlayProps,\n    transitionState,\n    ...otherProps\n  } = props;\n\n  usePreventScroll({ isDisabled: transitionState !== 'entered' });\n\n  let { modalProps } = useModal({ isDisabled: transitionState !== 'entered' });\n\n  return (\n    <ModalWrapperElement data-type={type} data-placement={placement}>\n      <ModalElement\n        qa={qa || 'Modal'}\n        styles={styles}\n        mods={{\n          open: isOpen,\n          enter: transitionState === 'enter',\n          exit: transitionState === 'exit',\n          unmounted: transitionState === 'unmounted',\n          entered: transitionState === 'entered',\n        }}\n        data-type={type}\n        data-placement={placement}\n        {...mergeProps(otherProps, overlayProps, modalProps)}\n        ref={ref}\n      >\n        {children}\n      </ModalElement>\n    </ModalWrapperElement>\n  );\n});\n\nlet _Modal = forwardRef(Modal);\n\n_Modal.displayName = 'Modal';\n\nexport { _Modal as Modal };\n"],"mappings":"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"}
+{"version":3,"file":"Modal.js","names":["useObjectRef","BaseProps","Styles","tasty","ForwardedRef","forwardRef","ReactNode","useModal","useOverlay","usePreventScroll","mergeProps","mergeRefs","useOverlayEscapeGuard","ModalContainmentProvider","useModalContainment","Overlay","ModalProps","TransitionState","WithCloseBehavior","Underlay","Props","OVERLAY_WRAPPER_STYLES","position","display","left","top","placeItems","boxSizing","width","height","pointerEvents","zIndex","transition","open","ModalWrapperElement","qa","styles","ModalElement","hide","exit","unmounted","transform","opacity","CubeModalProps","Omit","container","HTMLElement","onClose","action","type","shouldCloseOnInteractOutside","element","Element","Modal","props","ref","$","_c","children","otherProps","domRef","t0","overlayProps","rawOverlayProps","underlayProps","isOpen","containment","containmentRef","t1","t2","t3","t4","t5","ModalWrapperProps","placement","ModalWrapper","transitionState","isDisabled","modalProps","T0","T1","t6","t7","t8","t9","enter","entered","t10","t11","t12","_Modal","displayName","_c","Underlay","mergeRefs","Overlay","mergeProps"],"sources":["../../../../src/components/overlays/Modal/Modal.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport { BaseProps, Styles, tasty } from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, ReactNode } from 'react';\nimport { useModal, useOverlay, usePreventScroll } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\nimport { mergeRefs } from '../../../utils/react/useCombinedRefs';\nimport { useOverlayEscapeGuard } from '../../../utils/react/useOverlayEscapeGuard';\n\nimport {\n  ModalContainmentProvider,\n  useModalContainment,\n} from './modal-containment';\nimport { Overlay } from './Overlay';\nimport { ModalProps, TransitionState, WithCloseBehavior } from './types';\nimport { Underlay } from './Underlay';\n\nimport type { Props } from '../../../props';\n\nexport const OVERLAY_WRAPPER_STYLES: Styles = {\n  position: 'fixed',\n  display: 'grid',\n  left: 0,\n  top: 0,\n  placeItems: {\n    '': 'center',\n    'type=fullscreen': 'center',\n    'type=fullscreenTakeover | type=panel': 'stretch',\n  },\n  boxSizing: 'border-box',\n  width: '100vw',\n  height: '100dvh',\n  pointerEvents: 'none',\n  zIndex: 10,\n  transition: {\n    '': 'visibility .5s steps(2, start)',\n    open: 'visibility 0s linear',\n  },\n};\n\nconst ModalWrapperElement = tasty({\n  qa: 'ModalWrapper',\n  styles: OVERLAY_WRAPPER_STYLES,\n});\n\nconst ModalElement = tasty({\n  styles: {\n    display: 'grid',\n    hide: {\n      '': true,\n      'enter | entered': false,\n      exit: false,\n      unmounted: true,\n    },\n    zIndex: 10,\n    height: {\n      '': 'max 90dvh',\n      'type=fullscreenTakeover | type=panel': '100dvh 100dvh',\n      'type=fullscreen': '(100dvh - 8x) (100dvh - 8x)',\n      'type=panel': 'auto',\n    },\n    width: {\n      '': '$min-dialog-size (100dvw - 8x)',\n      'type=panel': 'auto',\n    },\n    pointerEvents: 'none',\n    transition: 'opacity .25s linear, transform .25s ease-in-out',\n    transform: {\n      '': 'initial',\n      'type=modal & !open': 'translate(0, -3x) scale(1, 1)',\n      '(type^=fullscreen | type=panel) & !open':\n        'translate(0, 0) scale(1.02, 1.02)',\n    },\n    opacity: {\n      '': 0,\n      open: 0.9999,\n    },\n  },\n});\n\nexport interface CubeModalProps\n  extends\n    Omit<ModalProps, 'container' | 'type' | 'nodeRef'>,\n    WithCloseBehavior {\n  container?: HTMLElement;\n  qa?: BaseProps['qa'];\n  onClose?: (action?: string) => void;\n  type?: 'modal' | 'fullscreen' | 'fullscreenTakeover' | 'panel';\n  styles?: Styles;\n  shouldCloseOnInteractOutside?: (element: Element) => boolean;\n}\n\nfunction Modal(props: CubeModalProps, ref: ForwardedRef<HTMLElement>) {\n  let { qa, children, onClose, type, styles, ...otherProps } = props;\n  let domRef = useObjectRef(ref);\n\n  let { overlayProps: rawOverlayProps, underlayProps } = useOverlay(\n    { ...props },\n    domRef,\n  );\n\n  // Focus can stay in a modal while it closes, after a press on it or a close\n  // that restores focus nowhere; it must not answer for `Escape` meanwhile —\n  // see `useOverlayEscapeGuard`.\n  const overlayProps = useOverlayEscapeGuard(rawOverlayProps, props.isOpen);\n\n  // A panel leaves the page readable; every other type hides it while open.\n  const { containment, ref: containmentRef } = useModalContainment(\n    type !== 'panel',\n    !!props.isOpen,\n  );\n\n  return (\n    <ModalContainmentProvider value={containment}>\n      <Overlay {...otherProps}>\n        {type !== 'fullscreenTakeover' && type !== 'panel' && (\n          <Underlay {...underlayProps} />\n        )}\n        <ModalWrapper\n          ref={mergeRefs(domRef, containmentRef)}\n          qa={qa}\n          type={type}\n          overlayProps={overlayProps}\n          styles={styles}\n          onClose={onClose}\n        >\n          {children}\n        </ModalWrapper>\n      </Overlay>\n    </ModalContainmentProvider>\n  );\n}\n\ninterface ModalWrapperProps extends TransitionState {\n  children?: ReactNode;\n  qa?: BaseProps['qa'];\n  isOpen?: boolean;\n  type?: 'modal' | 'fullscreen' | 'fullscreenTakeover' | 'panel';\n  placement?: 'top' | 'bottom';\n  styles?: Styles;\n  overlayProps?: Props;\n  onClose?: () => void;\n}\n\nlet ModalWrapper = forwardRef(function ModalWrapper(\n  props: ModalWrapperProps,\n  ref,\n) {\n  let {\n    qa,\n    children,\n    isOpen,\n    type,\n    placement,\n    styles,\n    overlayProps,\n    transitionState,\n    ...otherProps\n  } = props;\n\n  usePreventScroll({ isDisabled: transitionState !== 'entered' });\n\n  let { modalProps } = useModal({ isDisabled: transitionState !== 'entered' });\n\n  return (\n    <ModalWrapperElement data-type={type} data-placement={placement}>\n      <ModalElement\n        qa={qa || 'Modal'}\n        styles={styles}\n        mods={{\n          open: isOpen,\n          enter: transitionState === 'enter',\n          exit: transitionState === 'exit',\n          unmounted: transitionState === 'unmounted',\n          entered: transitionState === 'entered',\n        }}\n        data-type={type}\n        data-placement={placement}\n        {...mergeProps(otherProps, overlayProps, modalProps)}\n        ref={ref}\n      >\n        {children}\n      </ModalElement>\n    </ModalWrapperElement>\n  );\n});\n\nlet _Modal = forwardRef(Modal);\n\n_Modal.displayName = 'Modal';\n\nexport { _Modal as Modal };\n"],"mappings":"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"}

package/dist/components/overlays/Modal/OpenTransitionContext.js

@@ -1,12 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
-
 //#region src/components/overlays/Modal/OpenTransitionContext.tsx
 const OpenTransitionContext = createContext(null);
 function useOpenTransitionContext() {
 	return useContext(OpenTransitionContext);
 }
-
 //#endregion
 export { OpenTransitionContext, useOpenTransitionContext };
+
 //# sourceMappingURL=OpenTransitionContext.js.map

package/dist/components/overlays/Modal/OpenTransitionContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"OpenTransitionContext.js","names":["createContext","useContext","TransitionStatus","OpenTransitionContext","transitionState","useOpenTransitionContext"],"sources":["../../../../src/components/overlays/Modal/OpenTransitionContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport { TransitionStatus } from './types';\n\nconst OpenTransitionContext = createContext<{\n  transitionState: TransitionStatus;\n} | null>(null);\n\nexport function useOpenTransitionContext() {\n  return useContext(OpenTransitionContext);\n}\n\nexport { OpenTransitionContext };\n"],"mappings":";;;;AAIA,MAAMG,wBAAwBH,cAEpB,KAAK;AAEf,SAAOK,2BAAA;AAAA,QACEJ,WAAWE,sBAAsB"}
+{"version":3,"file":"OpenTransitionContext.js","names":["createContext","useContext","TransitionStatus","OpenTransitionContext","transitionState","useOpenTransitionContext"],"sources":["../../../../src/components/overlays/Modal/OpenTransitionContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport { TransitionStatus } from './types';\n\nconst OpenTransitionContext = createContext<{\n  transitionState: TransitionStatus;\n} | null>(null);\n\nexport function useOpenTransitionContext() {\n  return useContext(OpenTransitionContext);\n}\n\nexport { OpenTransitionContext };\n"],"mappings":";;;AAIA,MAAMG,wBAAwBH,cAEpB,IAAI;AAEd,SAAOK,2BAAA;CAAA,OACEJ,WAAWE,qBAAqB;AAAC"}

package/dist/components/overlays/Modal/Overlay.js

@@ -1,17 +1,13 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { markFocusRestoreWindow } from "../../../utils/react/programmaticFocus.js";
 import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
 import { Provider, useProviderProps } from "../../../provider.js";
 import { ButtonSplitContext } from "../../actions/ButtonSplit/context.js";
 import { OpenTransitionContext } from "./OpenTransitionContext.js";
 import { TastyBatchProvider } from "@tenphi/tasty";
-import { Children, cloneElement, forwardRef, useCallback, useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Children, cloneElement, forwardRef, useCallback, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
-
-//#region src/components/overlays/Modal/Overlay.tsx
-/** How long a closed overlay stays mounted while it plays its exit. */
-const EXIT_DURATION = 350;
 function Overlay(props, ref) {
 	let { children, isOpen, container = null, onEnter, onEntering, onEntered, onExit, onExiting, onExited, hideOnClose = false } = props;
 	let [exited, setExited] = useState(!isOpen);
@@ -19,9 +15,25 @@ function Overlay(props, ref) {
 	const wasOpen = useRef(!!isOpen);
 	if (wasOpen.current !== !!isOpen) {
 		wasOpen.current = !!isOpen;
-		if (!isOpen) markFocusRestoreWindow(EXIT_DURATION + 200);
+		if (!isOpen) markFocusRestoreWindow(550);
 	}
 	let { root } = useProviderProps({});
+	const startRef = useRef(null);
+	const endRef = useRef(null);
+	useLayoutEffect(() => {
+		const start = startRef.current;
+		const end = endRef.current;
+		const parent = start?.parentElement;
+		if (!isOpen || !start || !end || !parent?.moveBefore) return;
+		if (parent.lastChild === end) return;
+		parent.offsetHeight;
+		for (let node = start; node;) {
+			const next = node.nextSibling;
+			parent.moveBefore(node, null);
+			if (node === end) break;
+			node = next;
+		}
+	}, [isOpen]);
 	let handlePhaseChange = useCallback((phase) => {
 		switch (phase) {
 			case "enter":
@@ -39,7 +51,6 @@ function Overlay(props, ref) {
 			case "unmounted":
 				setExited(true);
 				onExited?.();
-				break;
 		}
 	}, [
 		onEnter,
@@ -57,7 +68,7 @@ function Overlay(props, ref) {
 		children: /* @__PURE__ */ jsx(DisplayTransition, {
 			isShown: !!isOpen,
 			exposeUnmounted: hideOnClose,
-			duration: EXIT_DURATION,
+			duration: 350,
 			onPhaseChange: handlePhaseChange,
 			children: ({ phase: phase_0, isShown, isExiting }) => {
 				return /* @__PURE__ */ jsx(OpenTransitionContext.Provider, {
@@ -71,14 +82,24 @@ function Overlay(props, ref) {
 			}
 		})
 	});
-	return createPortal(/* @__PURE__ */ jsx(TastyBatchProvider, { children: /* @__PURE__ */ jsx(ButtonSplitContext.Provider, {
+	return createPortal(/* @__PURE__ */ jsx(TastyBatchProvider, { children: /* @__PURE__ */ jsxs(ButtonSplitContext.Provider, {
 		value: null,
-		children: contents
+		children: [
+			hideOnClose && /* @__PURE__ */ jsx("span", {
+				ref: startRef,
+				hidden: true
+			}),
+			contents,
+			hideOnClose && /* @__PURE__ */ jsx("span", {
+				ref: endRef,
+				hidden: true
+			})
+		]
 	}) }), container || root || document.body);
 }
 let _Overlay = forwardRef(Overlay);
 _Overlay.displayName = "Overlay";
-
 //#endregion
-export { EXIT_DURATION, _Overlay };
+export { _Overlay as Overlay };
+
 //# sourceMappingURL=Overlay.js.map