@hanzogui/toast 8.3.1 → 8.3.2

package/dist/cjs/ToastViewport.cjs

@@ -1,319 +0,0 @@
-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

@@ -1,343 +0,0 @@
-"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