@radix-ui/react-toast 0.1.2-rc.48 → 0.1.2-rc.50

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/react/toast/src/packages/react/toast/src/Toast.tsx","packages/react/toast/src/packages/react/toast/src/index.ts","packages/react/toast/src/index.ts"],"sourcesContent":[null,null,"export * from './Toast';\n"],"names":[],"version":3,"file":"index.d.ts.map"}
+{"mappings":"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","sources":["packages/react/toast/src/packages/react/toast/src/Toast.tsx","packages/react/toast/src/packages/react/toast/src/index.ts","packages/react/toast/src/index.ts"],"sourcesContent":[null,null,"export * from './Toast';\n"],"names":[],"version":3,"file":"index.d.ts.map"}

package/dist/index.js

@@ -3,11 +3,12 @@ var $iTyic$react = require("react");
 var $iTyic$reactdom = require("react-dom");
 var $iTyic$radixuiprimitive = require("@radix-ui/primitive");
 var $iTyic$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
+var $iTyic$radixuireactcollection = require("@radix-ui/react-collection");
 var $iTyic$radixuireactcontext = require("@radix-ui/react-context");
 var $iTyic$radixuireactdismissablelayer = require("@radix-ui/react-dismissable-layer");
-var $iTyic$radixuireactportal = require("@radix-ui/react-portal");
 var $iTyic$radixuireactpresence = require("@radix-ui/react-presence");
 var $iTyic$radixuireactprimitive = require("@radix-ui/react-primitive");
+var $iTyic$radixuireactslot = require("@radix-ui/react-slot");
 var $iTyic$radixuireactusecallbackref = require("@radix-ui/react-use-callback-ref");
 var $iTyic$radixuireactusecontrollablestate = require("@radix-ui/react-use-controllable-state");
 var $iTyic$radixuireactuselayouteffect = require("@radix-ui/react-use-layout-effect");
@@ -66,10 +67,14 @@ $parcel$export($9208a85b3e79d33f$exports, "Close", () => $9208a85b3e79d33f$expor
 
 
 
+
 /* -------------------------------------------------------------------------------------------------
  * ToastProvider
  * -----------------------------------------------------------------------------------------------*/ const $9208a85b3e79d33f$var$PROVIDER_NAME = 'ToastProvider';
-const [$9208a85b3e79d33f$var$createToastContext, $9208a85b3e79d33f$export$8a359da18fbc9073] = $iTyic$radixuireactcontext.createContextScope('Toast');
+const [$9208a85b3e79d33f$var$Collection, $9208a85b3e79d33f$var$useCollection, $9208a85b3e79d33f$var$createCollectionScope] = $iTyic$radixuireactcollection.createCollection('Toast');
+const [$9208a85b3e79d33f$var$createToastContext, $9208a85b3e79d33f$export$8a359da18fbc9073] = $iTyic$radixuireactcontext.createContextScope('Toast', [
+    $9208a85b3e79d33f$var$createCollectionScope
+]);
 const [$9208a85b3e79d33f$var$ToastProviderProvider, $9208a85b3e79d33f$var$useToastProviderContext] = $9208a85b3e79d33f$var$createToastContext($9208a85b3e79d33f$var$PROVIDER_NAME);
 const $9208a85b3e79d33f$export$f5d03d415824e0e = (props)=>{
     const { __scopeToast: __scopeToast , label: label = 'Notification' , duration: duration = 5000 , swipeDirection: swipeDirection = 'right' , swipeThreshold: swipeThreshold = 50 , children: children  } = props;
@@ -77,7 +82,9 @@ const $9208a85b3e79d33f$export$f5d03d415824e0e = (props)=>{
     const [toastCount, setToastCount] = $iTyic$react.useState(0);
     const isFocusedToastEscapeKeyDownRef = $iTyic$react.useRef(false);
     const isClosePausedRef = $iTyic$react.useRef(false);
-    return /*#__PURE__*/ $iTyic$react.createElement($9208a85b3e79d33f$var$ToastProviderProvider, {
+    return /*#__PURE__*/ $iTyic$react.createElement($9208a85b3e79d33f$var$Collection.Provider, {
+        scope: __scopeToast
+    }, /*#__PURE__*/ $iTyic$react.createElement($9208a85b3e79d33f$var$ToastProviderProvider, {
         scope: __scopeToast,
         label: label,
         duration: duration,
@@ -94,7 +101,16 @@ const $9208a85b3e79d33f$export$f5d03d415824e0e = (props)=>{
         , []),
         isFocusedToastEscapeKeyDownRef: isFocusedToastEscapeKeyDownRef,
         isClosePausedRef: isClosePausedRef
-    }, children);
+    }, children));
+};
+$9208a85b3e79d33f$export$f5d03d415824e0e.propTypes = {
+    label (props) {
+        if (props.label && typeof props.label === 'string' && !props.label.trim()) {
+            const error = `Invalid prop \`label\` supplied to \`${$9208a85b3e79d33f$var$PROVIDER_NAME}\`. Expected non-empty \`string\`.`;
+            return new Error(error);
+        }
+        return null;
+    }
 };
 /*#__PURE__*/ Object.assign($9208a85b3e79d33f$export$f5d03d415824e0e, {
     displayName: $9208a85b3e79d33f$var$PROVIDER_NAME
@@ -110,10 +126,14 @@ const $9208a85b3e79d33f$var$VIEWPORT_RESUME = 'toast.viewportResume';
 const $9208a85b3e79d33f$export$6192c2425ecfd989 = /*#__PURE__*/ $iTyic$react.forwardRef((props, forwardedRef)=>{
     const { __scopeToast: __scopeToast , hotkey: hotkey = $9208a85b3e79d33f$var$VIEWPORT_DEFAULT_HOTKEY , label: label = 'Notifications ({hotkey})' , ...viewportProps } = props;
     const context = $9208a85b3e79d33f$var$useToastProviderContext($9208a85b3e79d33f$var$VIEWPORT_NAME, __scopeToast);
+    const getItems = $9208a85b3e79d33f$var$useCollection(__scopeToast);
     const wrapperRef = $iTyic$react.useRef(null);
+    const headFocusProxyRef = $iTyic$react.useRef(null);
+    const tailFocusProxyRef = $iTyic$react.useRef(null);
     const ref = $iTyic$react.useRef(null);
     const composedRefs = $iTyic$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref, context.onViewportChange);
     const hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, '');
+    const hasToasts = context.toastCount > 0;
     $iTyic$react.useEffect(()=>{
         const handleKeyDown = (event)=>{
             var _ref$current;
@@ -161,33 +181,62 @@ const $9208a85b3e79d33f$export$6192c2425ecfd989 = /*#__PURE__*/ $iTyic$react.for
     }, [
         context.isClosePausedRef
     ]);
+    const getSortedTabbableCandidates = $iTyic$react.useCallback(({ tabbingDirection: tabbingDirection  })=>{
+        const toastItems = getItems();
+        const tabbableCandidates = toastItems.map((toastItem)=>{
+            const toastNode = toastItem.ref.current;
+            const toastTabbableCandidates = [
+                toastNode,
+                ...$9208a85b3e79d33f$var$getTabbableCandidates(toastNode)
+            ];
+            return tabbingDirection === 'forwards' ? toastTabbableCandidates : toastTabbableCandidates.reverse();
+        });
+        return (tabbingDirection === 'forwards' ? tabbableCandidates.reverse() : tabbableCandidates).flat();
+    }, [
+        getItems
+    ]);
     $iTyic$react.useEffect(()=>{
-        const viewport = ref.current; // Re-order DOM so most recent toasts are at top of DOM structure to improve tab order
+        const viewport = ref.current; // We programmatically manage tabbing as we are unable to influence
+        // the source order with portals, this allows us to reverse the
+        // tab order so that it runs from most recent toast to least
         if (viewport) {
-            const prepended = new Set();
-            const observer = new MutationObserver((mutations)=>{
-                const addedNodes = mutations.map((mutation)=>Array.from(mutation.addedNodes)
-                ).reduce((a, b)=>a.concat(b)
-                );
-                addedNodes.forEach((node)=>{
-                    // mutation will immediately fire again when we prepend so we only prepend if
-                    // it hasn't just prepended.
-                    if (!prepended.has(node)) {
-                        viewport.prepend(node);
-                        prepended.add(node);
-                    } else // this else catches the case where the mutation fires immediately after prepend.
-                    // we remove from cache after it prepends to allow observer to catch future updates
-                    // to DOM order, e.g. if `key` changes for a toast and is reportalled to bottom.
-                    prepended.delete(node);
-                });
-            });
-            observer.observe(viewport, {
-                childList: true
-            });
-            return ()=>observer.disconnect()
+            const handleKeyDown = (event)=>{
+                const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
+                const isTabKey = event.key === 'Tab' && !isMetaKey;
+                if (isTabKey) {
+                    const focusedElement = document.activeElement;
+                    const isTabbingBackwards = event.shiftKey;
+                    const targetIsViewport = event.target === viewport; // If we're back tabbing after jumping to the viewport then we simply
+                    // proxy focus out to the preceding document
+                    if (targetIsViewport && isTabbingBackwards) {
+                        var _headFocusProxyRef$cu;
+                        (_headFocusProxyRef$cu = headFocusProxyRef.current) === null || _headFocusProxyRef$cu === void 0 || _headFocusProxyRef$cu.focus();
+                        return;
+                    }
+                    const tabbingDirection = isTabbingBackwards ? 'backwards' : 'forwards';
+                    const sortedCandidates = getSortedTabbableCandidates({
+                        tabbingDirection: tabbingDirection
+                    });
+                    const index = sortedCandidates.findIndex((candidate)=>candidate === focusedElement
+                    );
+                    if ($9208a85b3e79d33f$var$focusFirst(sortedCandidates.slice(index + 1))) event.preventDefault();
+                    else {
+                        var _headFocusProxyRef$cu2, _tailFocusProxyRef$cu;
+                        // If we can't focus that means we're at the edges so we
+                        // proxy to the corresponding exit point and let the browser handle
+                        // tab/shift+tab keypress and implicitly pass focus to the next valid element in the document
+                        isTabbingBackwards ? (_headFocusProxyRef$cu2 = headFocusProxyRef.current) === null || _headFocusProxyRef$cu2 === void 0 || _headFocusProxyRef$cu2.focus() : (_tailFocusProxyRef$cu = tailFocusProxyRef.current) === null || _tailFocusProxyRef$cu === void 0 || _tailFocusProxyRef$cu.focus();
+                    }
+                }
+            }; // Toasts are not in the viewport React tree so we need to bind DOM events
+            viewport.addEventListener('keydown', handleKeyDown);
+            return ()=>viewport.removeEventListener('keydown', handleKeyDown)
             ;
         }
-    }, []);
+    }, [
+        getItems,
+        getSortedTabbableCandidates
+    ]);
     return /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactdismissablelayer.Branch, {
         ref: wrapperRef,
         role: "region",
@@ -196,17 +245,59 @@ const $9208a85b3e79d33f$export$6192c2425ecfd989 = /*#__PURE__*/ $iTyic$react.for
         tabIndex: -1 // incase list has size when empty (e.g. padding), we remove pointer events so
         ,
         style: {
-            pointerEvents: context.toastCount > 0 ? undefined : 'none'
+            pointerEvents: hasToasts ? undefined : 'none'
+        }
+    }, hasToasts && /*#__PURE__*/ $iTyic$react.createElement($9208a85b3e79d33f$var$FocusProxy, {
+        ref: headFocusProxyRef,
+        onFocusFromOutsideViewport: ()=>{
+            const tabbableCandidates = getSortedTabbableCandidates({
+                tabbingDirection: 'forwards'
+            });
+            $9208a85b3e79d33f$var$focusFirst(tabbableCandidates);
         }
+    }), /*#__PURE__*/ $iTyic$react.createElement($9208a85b3e79d33f$var$Collection.Slot, {
+        scope: __scopeToast
     }, /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactprimitive.Primitive.ol, ($parcel$interopDefault($iTyic$babelruntimehelpersextends))({
         tabIndex: -1
     }, viewportProps, {
         ref: composedRefs
-    })));
+    }))), hasToasts && /*#__PURE__*/ $iTyic$react.createElement($9208a85b3e79d33f$var$FocusProxy, {
+        ref: tailFocusProxyRef,
+        onFocusFromOutsideViewport: ()=>{
+            const tabbableCandidates = getSortedTabbableCandidates({
+                tabbingDirection: 'backwards'
+            });
+            $9208a85b3e79d33f$var$focusFirst(tabbableCandidates);
+        }
+    }));
 });
 /*#__PURE__*/ Object.assign($9208a85b3e79d33f$export$6192c2425ecfd989, {
     displayName: $9208a85b3e79d33f$var$VIEWPORT_NAME
 });
+/* -----------------------------------------------------------------------------------------------*/ const $9208a85b3e79d33f$var$FOCUS_PROXY_NAME = 'ToastFocusProxy';
+const $9208a85b3e79d33f$var$FocusProxy = /*#__PURE__*/ $iTyic$react.forwardRef((props, forwardedRef)=>{
+    const { __scopeToast: __scopeToast , onFocusFromOutsideViewport: onFocusFromOutsideViewport , ...proxyProps } = props;
+    const context = $9208a85b3e79d33f$var$useToastProviderContext($9208a85b3e79d33f$var$FOCUS_PROXY_NAME, __scopeToast);
+    return /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactvisuallyhidden.VisuallyHidden, ($parcel$interopDefault($iTyic$babelruntimehelpersextends))({
+        "aria-hidden": true,
+        tabIndex: 0
+    }, proxyProps, {
+        ref: forwardedRef // Avoid page scrolling when focus is on the focus proxy
+        ,
+        style: {
+            position: 'fixed'
+        },
+        onFocus: (event)=>{
+            var _context$viewport;
+            const prevFocusedElement = event.relatedTarget;
+            const isFocusFromOutsideViewport = !((_context$viewport = context.viewport) !== null && _context$viewport !== void 0 && _context$viewport.contains(prevFocusedElement));
+            if (isFocusFromOutsideViewport) onFocusFromOutsideViewport();
+        }
+    }));
+});
+/*#__PURE__*/ Object.assign($9208a85b3e79d33f$var$FocusProxy, {
+    displayName: $9208a85b3e79d33f$var$FOCUS_PROXY_NAME
+});
 /* -------------------------------------------------------------------------------------------------
  * Toast
  * -----------------------------------------------------------------------------------------------*/ const $9208a85b3e79d33f$var$TOAST_NAME = 'Toast';
@@ -264,7 +355,7 @@ const $9208a85b3e79d33f$export$8d8dc7d5f743331b = /*#__PURE__*/ $iTyic$react.for
     onClose () {}
 });
 const $9208a85b3e79d33f$var$ToastImpl = /*#__PURE__*/ $iTyic$react.forwardRef((props, forwardedRef)=>{
-    const { __scopeToast: __scopeToast , type: type = 'foreground' , duration: durationProp , open: open , onClose: onClose , onEscapeKeyDown: onEscapeKeyDown , onSwipeStart: onSwipeStart , onSwipeMove: onSwipeMove , onSwipeCancel: onSwipeCancel , onSwipeEnd: onSwipeEnd , ...toastProps } = props;
+    const { __scopeToast: __scopeToast , children: children , type: type = 'foreground' , duration: durationProp , open: open , onClose: onClose , onEscapeKeyDown: onEscapeKeyDown , onSwipeStart: onSwipeStart , onSwipeMove: onSwipeMove , onSwipeCancel: onSwipeCancel , onSwipeEnd: onSwipeEnd , ...toastProps } = props;
     const context = $9208a85b3e79d33f$var$useToastProviderContext($9208a85b3e79d33f$var$TOAST_NAME, __scopeToast);
     const ref = $iTyic$react.useRef(null);
     const composedRefs = $iTyic$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
@@ -274,13 +365,14 @@ const $9208a85b3e79d33f$var$ToastImpl = /*#__PURE__*/ $iTyic$react.forwardRef((p
     const closeTimerStartTimeRef = $iTyic$react.useRef(0);
     const closeTimerRemainingTimeRef = $iTyic$react.useRef(duration1);
     const closeTimerRef = $iTyic$react.useRef(0);
+    const [renderLabel, setRenderLabel] = $iTyic$react.useState(false);
     const { onToastAdd: onToastAdd , onToastRemove: onToastRemove  } = context;
     const handleClose = $iTyic$radixuireactusecallbackref.useCallbackRef(()=>{
-        var _ref$current2, _context$viewport;
+        var _ref$current2, _context$viewport2;
         // focus viewport if focus is within toast to read the remaining toast
         // count to SR users and ensure focus isn't lost
         const isFocusInToast = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.contains(document.activeElement);
-        if (isFocusInToast) (_context$viewport = context.viewport) === null || _context$viewport === void 0 || _context$viewport.focus();
+        if (isFocusInToast) (_context$viewport2 = context.viewport) === null || _context$viewport2 === void 0 || _context$viewport2.focus();
         onClose();
     });
     const startTimer = $iTyic$react.useCallback((duration)=>{
@@ -331,19 +423,17 @@ const $9208a85b3e79d33f$var$ToastImpl = /*#__PURE__*/ $iTyic$react.forwardRef((p
     }, [
         onToastAdd,
         onToastRemove
-    ]);
+    ]); // render label in the next frame to trigger toast announcement in NVDA
+    $9208a85b3e79d33f$var$useNextFrame(()=>setRenderLabel(true)
+    );
     if (!context.viewport) return null;
-    return /*#__PURE__*/ $iTyic$react.createElement($iTyic$react.Fragment, null, /*#__PURE__*/ $iTyic$react.createElement($9208a85b3e79d33f$var$ToastAnnounce, {
-        __scopeToast: __scopeToast // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.
-        ,
-        role: "status",
-        "aria-live": type === 'foreground' ? 'assertive' : 'polite',
-        "aria-atomic": true
-    }, props.children), /*#__PURE__*/ $iTyic$react.createElement($9208a85b3e79d33f$var$ToastInteractiveProvider, {
+    return /*#__PURE__*/ $iTyic$react.createElement($iTyic$react.Fragment, null, /*#__PURE__*/ $iTyic$react.createElement($9208a85b3e79d33f$var$ToastInteractiveProvider, {
         scope: __scopeToast,
         isInteractive: true,
         onClose: handleClose
-    }, /*#__PURE__*/ $iTyic$reactdom.createPortal(/*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactdismissablelayer.Root, {
+    }, /*#__PURE__*/ $iTyic$reactdom.createPortal(/*#__PURE__*/ $iTyic$react.createElement($9208a85b3e79d33f$var$Collection.ItemSlot, {
+        scope: __scopeToast
+    }, /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactdismissablelayer.Root, {
         asChild: true,
         onEscapeKeyDown: $iTyic$radixuiprimitive.composeEventHandlers(onEscapeKeyDown, ()=>{
             if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose();
@@ -351,8 +441,10 @@ const $9208a85b3e79d33f$var$ToastImpl = /*#__PURE__*/ $iTyic$react.forwardRef((p
         })
     }, /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactprimitive.Primitive.li, ($parcel$interopDefault($iTyic$babelruntimehelpersextends))({
         role: "status",
-        "aria-live": "off",
-        "aria-atomic": true,
+        "aria-live": type === 'foreground' ? 'assertive' : 'polite',
+        "aria-atomic": true // Prevent voice over from announcing before the label is rendered
+        ,
+        "aria-hidden": !renderLabel || undefined,
         tabIndex: 0,
         "data-state": open ? 'open' : 'closed',
         "data-swipe-direction": context.swipeDirection
@@ -442,7 +534,7 @@ const $9208a85b3e79d33f$var$ToastImpl = /*#__PURE__*/ $iTyic$react.forwardRef((p
                 });
             }
         })
-    }))), context.viewport)));
+    }), /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactvisuallyhidden.VisuallyHidden, null, renderLabel && context.label), /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactslot.Slottable, null, children)))), context.viewport)));
 });
 $9208a85b3e79d33f$var$ToastImpl.propTypes = {
     type (props) {
@@ -451,30 +543,11 @@ $9208a85b3e79d33f$var$ToastImpl.propTypes = {
             'background'
         ].includes(props.type)) {
             const error = `Invalid prop \`type\` supplied to \`${$9208a85b3e79d33f$var$TOAST_NAME}\`. Expected \`foreground | background\`.`;
-            throw new Error(error);
+            return new Error(error);
         }
         return null;
     }
 };
-/* -----------------------------------------------------------------------------------------------*/ const $9208a85b3e79d33f$var$ToastAnnounce = (props)=>{
-    const { __scopeToast: __scopeToast , ...announceProps } = props;
-    const context = $9208a85b3e79d33f$var$useToastProviderContext($9208a85b3e79d33f$var$TOAST_NAME, __scopeToast);
-    const [renderChildren, setRenderChildren] = $iTyic$react.useState(false);
-    const [isAnnounced, setIsAnnounced] = $iTyic$react.useState(false); // render children in the next frame to ensure toast is announced in NVDA
-    $9208a85b3e79d33f$var$useNextFrame(()=>setRenderChildren(true)
-    );
-    $iTyic$react.useEffect(()=>{
-        const timer = window.setTimeout(()=>setIsAnnounced(true)
-        , 1000);
-        return ()=>window.clearTimeout(timer)
-        ;
-    }, []);
-    return isAnnounced ? null : /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactportal.Portal, {
-        asChild: true
-    }, /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactvisuallyhidden.VisuallyHidden, {
-        asChild: true
-    }, /*#__PURE__*/ $iTyic$react.createElement("div", announceProps, renderChildren && /*#__PURE__*/ $iTyic$react.createElement($iTyic$react.Fragment, null, context.label, " ", props.children))));
-};
 /* -------------------------------------------------------------------------------------------------
  * ToastTitle
  * -----------------------------------------------------------------------------------------------*/ const $9208a85b3e79d33f$var$TITLE_NAME = 'ToastTitle';
@@ -512,7 +585,7 @@ const $9208a85b3e79d33f$export$3019feecfda683d2 = /*#__PURE__*/ $iTyic$react.for
 });
 $9208a85b3e79d33f$export$3019feecfda683d2.propTypes = {
     altText (props) {
-        if (!props.altText) throw new Error(`Missing prop \`altText\` expected on \`${$9208a85b3e79d33f$var$ACTION_NAME}\``);
+        if (!props.altText) return new Error(`Missing prop \`altText\` expected on \`${$9208a85b3e79d33f$var$ACTION_NAME}\``);
         return null;
     }
 };
@@ -570,6 +643,39 @@ function $9208a85b3e79d33f$var$useNextFrame(callback = ()=>{}) {
         fn
     ]);
 }
+/**
+ * Returns a list of potential tabbable candidates.
+ *
+ * NOTE: This is only a close approximation. For example it doesn't take into account cases like when
+ * elements are not visible. This cannot be worked out easily by just reading a property, but rather
+ * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
+ * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
+ */ function $9208a85b3e79d33f$var$getTabbableCandidates(container) {
+    const nodes = [];
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+        acceptNode: (node)=>{
+            const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';
+            if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP; // `.tabIndex` is not the same as the `tabindex` attribute. It works on the
+            // runtime's understanding of tabbability, so this automatically accounts
+            // for any kind of element that could be tabbed to.
+            return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+        }
+    });
+    while(walker.nextNode())nodes.push(walker.currentNode); // we do not take into account the order of nodes with positive `tabIndex` as it
+    // hinders accessibility to have tab order different from visual order.
+    return nodes;
+}
+function $9208a85b3e79d33f$var$focusFirst(candidates) {
+    const previouslyFocusedElement = document.activeElement;
+    return candidates.some((candidate)=>{
+        // if focus is already where we want to go, we don't want to keep going through the candidates
+        if (candidate === previouslyFocusedElement) return true;
+        candidate.focus();
+        return document.activeElement !== previouslyFocusedElement;
+    });
+}
 const $9208a85b3e79d33f$export$2881499e37b75b9a = $9208a85b3e79d33f$export$f5d03d415824e0e;
 const $9208a85b3e79d33f$export$d5c6c08dc2d3ca7 = $9208a85b3e79d33f$export$6192c2425ecfd989;
 const $9208a85b3e79d33f$export$be92b6f5f03c0fe9 = $9208a85b3e79d33f$export$8d8dc7d5f743331b;