@rebasepro/ui 0.21.1 → 0.21.2-canary.g1ea48be

package/dist/hooks/useRestoreInterruptedFocus.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Finish a focus move that a modal's focus trap interrupted.
+ *
+ * Radix's `FocusScope` watches a modal for removed nodes, and when one goes
+ * while `document.activeElement` is `body` it concludes the focused element was
+ * deleted and focuses the modal itself. But `body` is also what `activeElement`
+ * reads *during* an ordinary focus move: the browser fires `focusout` before it
+ * lands on the next element. Anything that unmounts in response — a tooltip that
+ * opened on focus closing on blur, above all — is removed inside that window.
+ * The scope focuses the container, the browser abandons the move it was making,
+ * and Tab from one field lands on the dialog, so the next Tab starts again from
+ * the header. Shift+Tab the same.
+ *
+ * So remember where each move inside the container was going, and if the
+ * container takes focus before the move lands, send it on. A move that nothing
+ * interrupts lands on its target and clears the note; a note nobody used is
+ * dropped by the next task.
+ *
+ * The note is taken on `window`, in the capture phase — before any other
+ * listener for the event runs. The scope's correction arrives in the microtask
+ * checkpoint after whichever listener removed the node, so a note taken any
+ * later (on the container, bubbling) is taken after focus has already been
+ * moved: a field that drops something from its own `focusout` handler beat it.
+ *
+ * Internal to the kit's modals — not exported.
+ */
+export declare function useRestoreInterruptedFocus(container: HTMLElement | null): void;

package/dist/index.es.js

@@ -4175,6 +4175,62 @@ var inputStyles = `
     }
   `;
 //#endregion
+//#region src/hooks/useRestoreInterruptedFocus.ts
+/**
+* Finish a focus move that a modal's focus trap interrupted.
+*
+* Radix's `FocusScope` watches a modal for removed nodes, and when one goes
+* while `document.activeElement` is `body` it concludes the focused element was
+* deleted and focuses the modal itself. But `body` is also what `activeElement`
+* reads *during* an ordinary focus move: the browser fires `focusout` before it
+* lands on the next element. Anything that unmounts in response — a tooltip that
+* opened on focus closing on blur, above all — is removed inside that window.
+* The scope focuses the container, the browser abandons the move it was making,
+* and Tab from one field lands on the dialog, so the next Tab starts again from
+* the header. Shift+Tab the same.
+*
+* So remember where each move inside the container was going, and if the
+* container takes focus before the move lands, send it on. A move that nothing
+* interrupts lands on its target and clears the note; a note nobody used is
+* dropped by the next task.
+*
+* The note is taken on `window`, in the capture phase — before any other
+* listener for the event runs. The scope's correction arrives in the microtask
+* checkpoint after whichever listener removed the node, so a note taken any
+* later (on the container, bubbling) is taken after focus has already been
+* moved: a field that drops something from its own `focusout` handler beat it.
+*
+* Internal to the kit's modals — not exported.
+*/
+function useRestoreInterruptedFocus(container) {
+	useEffect(() => {
+		if (!container) return;
+		let intended = null;
+		let expiry;
+		const onFocusOut = (event) => {
+			if (!(event.target instanceof Node) || !container.contains(event.target)) return;
+			const next = event.relatedTarget;
+			intended = next instanceof HTMLElement && next !== container && container.contains(next) ? next : null;
+			clearTimeout(expiry);
+			if (intended) expiry = setTimeout(() => {
+				intended = null;
+			}, 0);
+		};
+		const onFocusIn = (event) => {
+			const target = intended;
+			intended = null;
+			if (event.target === container && target?.isConnected && container.contains(target)) target.focus();
+		};
+		window.addEventListener("focusout", onFocusOut, true);
+		container.addEventListener("focusin", onFocusIn);
+		return () => {
+			clearTimeout(expiry);
+			window.removeEventListener("focusout", onFocusOut, true);
+			container.removeEventListener("focusin", onFocusIn);
+		};
+	}, [container]);
+}
+//#endregion
 //#region src/components/Dialog.tsx
 var widthClasses = {
 	xs: "max-w-xs w-xs",
@@ -4193,6 +4249,8 @@ var widthClasses = {
 var Dialog = ({ open, onOpenChange, children, className, containerClassName, fullWidth = true, fullHeight, fullScreen, scrollable = true, maxWidth = "lg", modal = true, onOpenAutoFocus, onEscapeKeyDown, onPointerDownOutside, onInteractOutside, disableInitialFocus = true, portalContainer, "aria-describedby": ariaDescribedby }) => {
 	const [displayed, setDisplayed] = useState(false);
 	const [popupHost, setPopupHost] = useState(null);
+	const [contentEl, setContentEl] = useState(null);
+	useRestoreInterruptedFocus(contentEl);
 	const contextContainer = usePortalContainer();
 	const finalContainer = portalContainer ?? contextContainer ?? void 0;
 	useEffect(() => {
@@ -4218,6 +4276,7 @@ var Dialog = ({ open, onOpenChange, children, className, containerClassName, ful
 					className: cls("fixed inset-0 transition-opacity ease-in-out duration-200 bg-black/50 dark:bg-black/60 backdrop-blur-sm", displayed && open ? "opacity-100" : "opacity-0", "z-50 fixed top-0 left-0 w-full h-full flex justify-center items-center"),
 					style: { pointerEvents: displayed ? "auto" : "none" }
 				}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
+					ref: setContentEl,
 					onEscapeKeyDown,
 					onOpenAutoFocus: (e) => {
 						if (disableInitialFocus) e.preventDefault();
@@ -5327,6 +5386,7 @@ Slider.displayName = "Slider";
 var Sheet = ({ children, side = "right", title, modal = true, includeBackgroundOverlay = true, open, onOpenChange, onPointerDownOutside, onInteractOutside, transparent, className, style, overlayClassName, overlayZIndex = "z-50", overlayStyle, portalContainer, ...props }) => {
 	const [displayed, setDisplayed] = useState(false);
 	const [contentEl, setContentEl] = useState(null);
+	useRestoreInterruptedFocus(contentEl);
 	const contextContainer = usePortalContainer();
 	const finalContainer = portalContainer ?? contextContainer ?? void 0;
 	useEffect(() => {