@hanzogui/toast 7.0.0 → 7.3.0

package/dist/cjs/ToastViewport.cjs

@@ -0,0 +1,319 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ToastViewport_exports = {};
+__export(ToastViewport_exports, {
+  ToastViewport: () => ToastViewport,
+  VIEWPORT_DEFAULT_HOTKEY: () => VIEWPORT_DEFAULT_HOTKEY,
+  VIEWPORT_PAUSE: () => VIEWPORT_PAUSE,
+  VIEWPORT_RESUME: () => VIEWPORT_RESUME
+});
+module.exports = __toCommonJS(ToastViewport_exports);
+var import_animate_presence = require("@hanzogui/animate-presence");
+var import_compose_refs = require("@hanzogui/compose-refs");
+var import_constants = require("@hanzogui/constants");
+var import_core = require("@hanzogui/core");
+var import_portal = require("@hanzogui/portal");
+var import_stacks = require("@hanzogui/stacks");
+var import_visually_hidden = require("@hanzogui/visually-hidden");
+var React = __toESM(require("react"), 1);
+var import_constants2 = require("./constants.cjs");
+var import_ToastPortal = require("./ToastPortal.cjs");
+var import_ToastProvider = require("./ToastProvider.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const VIEWPORT_NAME = "ToastViewport";
+const VIEWPORT_DEFAULT_HOTKEY = ["F8"];
+const VIEWPORT_PAUSE = "toast.viewportPause";
+const VIEWPORT_RESUME = "toast.viewportResume";
+const ToastViewportWrapperFrame = (0, import_core.styled)(import_stacks.YStack, {
+  name: "ViewportWrapper",
+  variants: {
+    unstyled: {
+      false: {
+        pointerEvents: "box-none",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        position: import_constants.isWeb ? "fixed" : "absolute",
+        maxWidth: "100%",
+        tabIndex: 0,
+        zIndex: 1e5
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.GUI_HEADLESS === "1"
+  }
+});
+const ToastViewportFrame = (0, import_core.styled)(import_stacks.YStack, {
+  name: VIEWPORT_NAME,
+  variants: {
+    unstyled: {
+      false: {
+        pointerEvents: "box-none",
+        position: import_constants.isWeb ? "fixed" : "absolute",
+        maxWidth: "100%"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.GUI_HEADLESS === "1"
+  }
+});
+const ToastViewport = React.memo(React.forwardRef((props, forwardedRef) => {
+  const {
+    scope,
+    hotkey = VIEWPORT_DEFAULT_HOTKEY,
+    label = "Notifications ({hotkey})",
+    name = "default",
+    multipleToasts,
+    zIndex,
+    portalToRoot,
+    ...viewportProps
+  } = props;
+  const context = (0, import_ToastProvider.useToastProviderContext)(scope);
+  const getItems = (0, import_ToastProvider.useCollection)(scope || import_constants2.TOAST_CONTEXT);
+  const headFocusProxyRef = React.useRef(null);
+  const tailFocusProxyRef = React.useRef(null);
+  const wrapperRef = React.useRef(null);
+  const ref = React.useRef(null);
+  const onViewportChange = React.useCallback(el => {
+    if (context.viewports[name] !== el) context.onViewportChange(name, el);
+  }, [name, context.viewports]);
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref, onViewportChange);
+  const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
+  const hasToasts = context.toastCount > 0;
+  React.useEffect(() => {
+    if (!import_constants.isWeb) return;
+    if (context.toastCount === 0) return;
+    const handleKeyDown = event => {
+      const isHotkeyPressed = hotkey.every(key => event[key] || event.code === key);
+      if (isHotkeyPressed) ref.current?.focus();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [hotkey, context.toastCount]);
+  React.useEffect(() => {
+    if (!import_constants.isWeb) return;
+    if (context.toastCount === 0) return;
+    const wrapper = wrapperRef.current;
+    const viewport = ref.current;
+    if (hasToasts && wrapper && viewport) {
+      const handlePause = () => {
+        if (!context.isClosePausedRef.current) {
+          const pauseEvent = new CustomEvent(VIEWPORT_PAUSE);
+          viewport.dispatchEvent(pauseEvent);
+          context.isClosePausedRef.current = true;
+        }
+      };
+      const handleResume = () => {
+        if (context.isClosePausedRef.current) {
+          const resumeEvent = new CustomEvent(VIEWPORT_RESUME);
+          viewport.dispatchEvent(resumeEvent);
+          context.isClosePausedRef.current = false;
+        }
+      };
+      const handleFocusOutResume = event => {
+        const isFocusMovingOutside = !wrapper.contains(event.relatedTarget);
+        if (isFocusMovingOutside) handleResume();
+      };
+      const handlePointerLeaveResume = () => {
+        const isFocusInside = wrapper.contains(document.activeElement);
+        if (!isFocusInside) handleResume();
+      };
+      wrapper.addEventListener("focusin", handlePause);
+      wrapper.addEventListener("focusout", handleFocusOutResume);
+      wrapper.addEventListener("pointermove", handlePause);
+      wrapper.addEventListener("pointerleave", handlePointerLeaveResume);
+      window.addEventListener("blur", handlePause);
+      window.addEventListener("focus", handleResume);
+      return () => {
+        wrapper.removeEventListener("focusin", handlePause);
+        wrapper.removeEventListener("focusout", handleFocusOutResume);
+        wrapper.removeEventListener("pointermove", handlePause);
+        wrapper.removeEventListener("pointerleave", handlePointerLeaveResume);
+        window.removeEventListener("blur", handlePause);
+        window.removeEventListener("focus", handleResume);
+      };
+    }
+  }, [hasToasts, context.isClosePausedRef, context.toastCount]);
+  const getSortedTabbableCandidates = React.useCallback(({
+    tabbingDirection
+  }) => {
+    const toastItems = getItems();
+    const tabbableCandidates = toastItems.map(toastItem => {
+      const toastNode = toastItem.ref.current;
+      const toastTabbableCandidates = [toastNode, ...getTabbableCandidates(toastNode)];
+      return tabbingDirection === "forwards" ? toastTabbableCandidates : toastTabbableCandidates.reverse();
+    });
+    return (tabbingDirection === "forwards" ? tabbableCandidates.reverse() : tabbableCandidates).flat();
+  }, [getItems]);
+  React.useEffect(() => {
+    if (!import_constants.isWeb) return;
+    if (context.toastCount === 0) return;
+    const viewport = ref.current;
+    if (viewport) {
+      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 (targetIsViewport && isTabbingBackwards) {
+            headFocusProxyRef.current?.focus();
+            return;
+          }
+          const tabbingDirection = isTabbingBackwards ? "backwards" : "forwards";
+          const sortedCandidates = getSortedTabbableCandidates({
+            tabbingDirection
+          });
+          const index = sortedCandidates.findIndex(candidate => candidate === focusedElement);
+          if (focusFirst(sortedCandidates.slice(index + 1))) {
+            event.preventDefault();
+          } else {
+            isTabbingBackwards ?
+            // @ts-ignore ali TODO type
+            headFocusProxyRef.current?.focus() :
+            // @ts-ignore ali TODO type
+            tailFocusProxyRef.current?.focus();
+          }
+        }
+      };
+      viewport.addEventListener("keydown", handleKeyDown);
+      return () => viewport.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [getItems, getSortedTabbableCandidates, context.toastCount]);
+  const contents = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(ToastViewportWrapperFrame, {
+    ref: wrapperRef,
+    role: "region",
+    "aria-label": label.replace("{hotkey}", hotkeyLabel),
+    tabIndex: -1,
+    children: [hasToasts && /* @__PURE__ */(0, import_jsx_runtime.jsx)(FocusProxy, {
+      context,
+      viewportName: name,
+      ref: headFocusProxyRef,
+      onFocusFromOutsideViewport: () => {
+        const tabbableCandidates = getSortedTabbableCandidates({
+          tabbingDirection: "forwards"
+        });
+        focusFirst(tabbableCandidates);
+      }
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToastProvider.Collection.Slot, {
+      scope: context.toastScope,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastViewportFrame, {
+        focusable: context.toastCount > 0,
+        ref: composedRefs,
+        ...viewportProps,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.PortalHost, {
+          render: children => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, {
+            exitBeforeEnter: !multipleToasts,
+            children
+          }),
+          name: name ?? "default"
+        })
+      })
+    }), hasToasts && /* @__PURE__ */(0, import_jsx_runtime.jsx)(FocusProxy, {
+      context,
+      viewportName: name,
+      ref: tailFocusProxyRef,
+      onFocusFromOutsideViewport: () => {
+        const tabbableCandidates = getSortedTabbableCandidates({
+          tabbingDirection: "backwards"
+        });
+        focusFirst(tabbableCandidates);
+      }
+    })]
+  });
+  if (portalToRoot) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToastPortal.ToastPortal, {
+      context,
+      ...(typeof zIndex === "number" ? {
+        zIndex
+      } : {}),
+      children: contents
+    });
+  }
+  return contents;
+}));
+ToastViewport.displayName = VIEWPORT_NAME;
+const FOCUS_PROXY_NAME = "ToastFocusProxy";
+const FocusProxy = React.forwardRef((props, forwardedRef) => {
+  const {
+    onFocusFromOutsideViewport,
+    viewportName,
+    context,
+    ...proxyProps
+  } = props;
+  const viewport = context.viewports[viewportName];
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_visually_hidden.VisuallyHidden, {
+    "aria-hidden": true,
+    tabIndex: 0,
+    ...proxyProps,
+    ref: forwardedRef,
+    position: import_constants.isWeb ? "fixed" : "absolute",
+    onFocus: event => {
+      if (!import_constants.isWeb) return;
+      const prevFocusedElement = event.relatedTarget;
+      const isFocusFromOutsideViewport = !viewport?.contains(prevFocusedElement);
+      if (isFocusFromOutsideViewport) onFocusFromOutsideViewport();
+    }
+  });
+});
+FocusProxy.displayName = FOCUS_PROXY_NAME;
+function focusFirst(candidates) {
+  if (!import_constants.isWeb) return;
+  const previouslyFocusedElement = document.activeElement;
+  return candidates.some(candidate => {
+    if (candidate === previouslyFocusedElement) return true;
+    candidate.focus();
+    return document.activeElement !== previouslyFocusedElement;
+  });
+}
+function getTabbableCandidates(container) {
+  if (!import_constants.isWeb) return [];
+  const containerHtml = container;
+  const nodes = [];
+  const walker = document.createTreeWalker(containerHtml, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: node => {
+      const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
+      if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
+      return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    }
+  });
+  while (walker.nextNode()) nodes.push(walker.currentNode);
+  return nodes;
+}

package/dist/cjs/ToastViewport.native.js

@@ -0,0 +1,343 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ToastViewport_exports = {};
+__export(ToastViewport_exports, {
+  ToastViewport: () => ToastViewport,
+  VIEWPORT_DEFAULT_HOTKEY: () => VIEWPORT_DEFAULT_HOTKEY,
+  VIEWPORT_PAUSE: () => VIEWPORT_PAUSE,
+  VIEWPORT_RESUME: () => VIEWPORT_RESUME
+});
+module.exports = __toCommonJS(ToastViewport_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_animate_presence = require("@hanzogui/animate-presence");
+var import_compose_refs = require("@hanzogui/compose-refs");
+var import_constants = require("@hanzogui/constants");
+var import_core = require("@hanzogui/core");
+var import_portal = require("@hanzogui/portal");
+var import_stacks = require("@hanzogui/stacks");
+var import_visually_hidden = require("@hanzogui/visually-hidden");
+var React = __toESM(require("react"), 1);
+var import_constants2 = require("./constants.native.js");
+var import_ToastPortal = require("./ToastPortal.native.js");
+var import_ToastProvider = require("./ToastProvider.native.js");
+var VIEWPORT_NAME = "ToastViewport";
+var VIEWPORT_DEFAULT_HOTKEY = ["F8"];
+var VIEWPORT_PAUSE = "toast.viewportPause";
+var VIEWPORT_RESUME = "toast.viewportResume";
+var ToastViewportWrapperFrame = (0, import_core.styled)(import_stacks.YStack, {
+  name: "ViewportWrapper",
+  variants: {
+    unstyled: {
+      false: {
+        pointerEvents: "box-none",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        position: import_constants.isWeb ? "fixed" : "absolute",
+        maxWidth: "100%",
+        tabIndex: 0,
+        zIndex: 1e5
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.GUI_HEADLESS === "1"
+  }
+});
+var ToastViewportFrame = (0, import_core.styled)(import_stacks.YStack, {
+  name: VIEWPORT_NAME,
+  variants: {
+    unstyled: {
+      false: {
+        pointerEvents: "box-none",
+        position: import_constants.isWeb ? "fixed" : "absolute",
+        maxWidth: "100%"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.GUI_HEADLESS === "1"
+  }
+});
+var ToastViewport = /* @__PURE__ */React.memo(/* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
+  var {
+    scope,
+    hotkey = VIEWPORT_DEFAULT_HOTKEY,
+    label = "Notifications ({hotkey})",
+    name = "default",
+    multipleToasts,
+    zIndex,
+    portalToRoot,
+    ...viewportProps
+  } = props;
+  var context = (0, import_ToastProvider.useToastProviderContext)(scope);
+  var getItems = (0, import_ToastProvider.useCollection)(scope || import_constants2.TOAST_CONTEXT);
+  var headFocusProxyRef = React.useRef(null);
+  var tailFocusProxyRef = React.useRef(null);
+  var wrapperRef = React.useRef(null);
+  var ref = React.useRef(null);
+  var onViewportChange = React.useCallback(function (el) {
+    if (context.viewports[name] !== el) context.onViewportChange(name, el);
+  }, [name, context.viewports]);
+  var composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref, onViewportChange);
+  var hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
+  var hasToasts = context.toastCount > 0;
+  React.useEffect(function () {
+    if (!import_constants.isWeb) return;
+    if (context.toastCount === 0) return;
+    var handleKeyDown = function (event) {
+      var _ref_current;
+      var isHotkeyPressed = hotkey.every(function (key) {
+        return event[key] || event.code === key;
+      });
+      if (isHotkeyPressed) (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return function () {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [hotkey, context.toastCount]);
+  React.useEffect(function () {
+    if (!import_constants.isWeb) return;
+    if (context.toastCount === 0) return;
+    var wrapper = wrapperRef.current;
+    var viewport = ref.current;
+    if (hasToasts && wrapper && viewport) {
+      var handlePause = function () {
+        if (!context.isClosePausedRef.current) {
+          var pauseEvent = new CustomEvent(VIEWPORT_PAUSE);
+          viewport.dispatchEvent(pauseEvent);
+          context.isClosePausedRef.current = true;
+        }
+      };
+      var handleResume = function () {
+        if (context.isClosePausedRef.current) {
+          var resumeEvent = new CustomEvent(VIEWPORT_RESUME);
+          viewport.dispatchEvent(resumeEvent);
+          context.isClosePausedRef.current = false;
+        }
+      };
+      var handleFocusOutResume = function (event) {
+        var isFocusMovingOutside = !wrapper.contains(event.relatedTarget);
+        if (isFocusMovingOutside) handleResume();
+      };
+      var handlePointerLeaveResume = function () {
+        var isFocusInside = wrapper.contains(document.activeElement);
+        if (!isFocusInside) handleResume();
+      };
+      wrapper.addEventListener("focusin", handlePause);
+      wrapper.addEventListener("focusout", handleFocusOutResume);
+      wrapper.addEventListener("pointermove", handlePause);
+      wrapper.addEventListener("pointerleave", handlePointerLeaveResume);
+      window.addEventListener("blur", handlePause);
+      window.addEventListener("focus", handleResume);
+      return function () {
+        wrapper.removeEventListener("focusin", handlePause);
+        wrapper.removeEventListener("focusout", handleFocusOutResume);
+        wrapper.removeEventListener("pointermove", handlePause);
+        wrapper.removeEventListener("pointerleave", handlePointerLeaveResume);
+        window.removeEventListener("blur", handlePause);
+        window.removeEventListener("focus", handleResume);
+      };
+    }
+  }, [hasToasts, context.isClosePausedRef, context.toastCount]);
+  var getSortedTabbableCandidates = React.useCallback(function (param) {
+    var {
+      tabbingDirection
+    } = param;
+    var toastItems = getItems();
+    var tabbableCandidates = toastItems.map(function (toastItem) {
+      var toastNode = toastItem.ref.current;
+      var toastTabbableCandidates = [toastNode, ...getTabbableCandidates(toastNode)];
+      return tabbingDirection === "forwards" ? toastTabbableCandidates : toastTabbableCandidates.reverse();
+    });
+    return (tabbingDirection === "forwards" ? tabbableCandidates.reverse() : tabbableCandidates).flat();
+  }, [getItems]);
+  React.useEffect(function () {
+    if (!import_constants.isWeb) return;
+    if (context.toastCount === 0) return;
+    var viewport = ref.current;
+    if (viewport) {
+      var handleKeyDown = function (event) {
+        var isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
+        var isTabKey = event.key === "Tab" && !isMetaKey;
+        if (isTabKey) {
+          var focusedElement = document.activeElement;
+          var isTabbingBackwards = event.shiftKey;
+          var targetIsViewport = event.target === viewport;
+          if (targetIsViewport && isTabbingBackwards) {
+            var _headFocusProxyRef_current;
+            (_headFocusProxyRef_current = headFocusProxyRef.current) === null || _headFocusProxyRef_current === void 0 ? void 0 : _headFocusProxyRef_current.focus();
+            return;
+          }
+          var tabbingDirection = isTabbingBackwards ? "backwards" : "forwards";
+          var sortedCandidates = getSortedTabbableCandidates({
+            tabbingDirection
+          });
+          var index = sortedCandidates.findIndex(function (candidate) {
+            return candidate === focusedElement;
+          });
+          if (focusFirst(sortedCandidates.slice(index + 1))) {
+            event.preventDefault();
+          } else {
+            var _headFocusProxyRef_current1, _tailFocusProxyRef_current;
+            isTabbingBackwards ? (_headFocusProxyRef_current1 = headFocusProxyRef.current) === null || _headFocusProxyRef_current1 === void 0 ? void 0 : _headFocusProxyRef_current1.focus() : (_tailFocusProxyRef_current = tailFocusProxyRef.current) === null || _tailFocusProxyRef_current === void 0 ? void 0 : _tailFocusProxyRef_current.focus();
+          }
+        }
+      };
+      viewport.addEventListener("keydown", handleKeyDown);
+      return function () {
+        return viewport.removeEventListener("keydown", handleKeyDown);
+      };
+    }
+  }, [getItems, getSortedTabbableCandidates, context.toastCount]);
+  var contents = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(ToastViewportWrapperFrame, {
+    ref: wrapperRef,
+    // biome-ignore lint/a11y/useSemanticElements: <explanation>
+    role: "region",
+    "aria-label": label.replace("{hotkey}", hotkeyLabel),
+    // // Ensure virtual cursor from landmarks menus triggers focus/blur for pause/resume
+    tabIndex: -1,
+    children: [
+    // // incase list has size when empty (e.g. padding), we remove pointer events so
+    // // it doesn't prevent interactions with page elements that it overlays
+    // pointerEvents={hasToasts ? undefined : 'none'}
+    hasToasts && /* @__PURE__ */(0, import_jsx_runtime.jsx)(FocusProxy, {
+      context,
+      viewportName: name,
+      ref: headFocusProxyRef,
+      onFocusFromOutsideViewport: function () {
+        var tabbableCandidates = getSortedTabbableCandidates({
+          tabbingDirection: "forwards"
+        });
+        focusFirst(tabbableCandidates);
+      }
+    }),
+    /**
+    * tabindex on the the list so that it can be focused when items are removed. we focus
+    * the list instead of the viewport so it announces number of items remaining.
+    */
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsx)(import_ToastProvider.Collection.Slot, {
+      scope: context.toastScope,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastViewportFrame, {
+        focusable: context.toastCount > 0,
+        ref: composedRefs,
+        ...viewportProps,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.PortalHost, {
+          render: function (children) {
+            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, {
+              exitBeforeEnter: !multipleToasts,
+              children
+            });
+          },
+          name: name !== null && name !== void 0 ? name : "default"
+        })
+      })
+    }), hasToasts && /* @__PURE__ */(0, import_jsx_runtime.jsx)(FocusProxy, {
+      context,
+      viewportName: name,
+      ref: tailFocusProxyRef,
+      onFocusFromOutsideViewport: function () {
+        var tabbableCandidates = getSortedTabbableCandidates({
+          tabbingDirection: "backwards"
+        });
+        focusFirst(tabbableCandidates);
+      }
+    })]
+  });
+  if (portalToRoot) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToastPortal.ToastPortal, {
+      context,
+      ...(typeof zIndex === "number" ? {
+        zIndex
+      } : {}),
+      children: contents
+    });
+  }
+  return contents;
+}));
+ToastViewport.displayName = VIEWPORT_NAME;
+var FOCUS_PROXY_NAME = "ToastFocusProxy";
+var FocusProxy = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
+  var {
+    onFocusFromOutsideViewport,
+    viewportName,
+    context,
+    ...proxyProps
+  } = props;
+  var viewport = context.viewports[viewportName];
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_visually_hidden.VisuallyHidden, {
+    "aria-hidden": true,
+    tabIndex: 0,
+    ...proxyProps,
+    ref: forwardedRef,
+    // Avoid page scrolling when focus is on the focus proxy
+    position: import_constants.isWeb ? "fixed" : "absolute",
+    onFocus: function (event) {
+      if (!import_constants.isWeb) return;
+      var prevFocusedElement = event.relatedTarget;
+      var isFocusFromOutsideViewport = !(viewport === null || viewport === void 0 ? void 0 : viewport.contains(prevFocusedElement));
+      if (isFocusFromOutsideViewport) onFocusFromOutsideViewport();
+    }
+  });
+});
+FocusProxy.displayName = FOCUS_PROXY_NAME;
+function focusFirst(candidates) {
+  if (!import_constants.isWeb) return;
+  var previouslyFocusedElement = document.activeElement;
+  return candidates.some(function (candidate) {
+    if (candidate === previouslyFocusedElement) return true;
+    candidate.focus();
+    return document.activeElement !== previouslyFocusedElement;
+  });
+}
+function getTabbableCandidates(container) {
+  if (!import_constants.isWeb) return [];
+  var containerHtml = container;
+  var nodes = [];
+  var walker = document.createTreeWalker(containerHtml, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: function (node) {
+      var isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
+      if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
+      return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    }
+  });
+  while (walker.nextNode()) nodes.push(walker.currentNode);
+  return nodes;
+}
+//# sourceMappingURL=ToastViewport.native.js.map