@tamagui/toast 1.8.1 → 1.8.3

package/dist/cjs/ToastProvider.js

@@ -40,7 +40,6 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_collection = require("@tamagui/collection");
 var import_core = require("@tamagui/core");
 var import_create_context = require("@tamagui/create-context");
-var import_portal = require("@tamagui/portal");
 var React = __toESM(require("react"));
 const PROVIDER_NAME = "ToastProvider";
 const [Collection, useCollection, createCollectionScope] = (0, import_collection.createCollection)("Toast");
@@ -63,7 +62,7 @@ const ToastProvider = (props) => {
   const [toastCount, setToastCount] = React.useState(0);
   const isFocusedToastEscapeKeyDownRef = React.useRef(false);
   const isClosePausedRef = React.useRef(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalProvider, { shouldAddRootHost: false, rootHostName: "default", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope: __scopeToast, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope: __scopeToast, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     ToastProviderProvider,
     {
       scope: __scopeToast,
@@ -85,7 +84,7 @@ const ToastProvider = (props) => {
       isClosePausedRef,
       children
     }
-  ) }) });
+  ) });
 };
 ToastProvider.propTypes = {
   label(props) {

package/dist/cjs/ToastProvider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ToastProvider.tsx"],
-  "sourcesContent": ["\nimport { createCollection } from '@tamagui/collection'\nimport { TamaguiElement, useId } from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { PortalProvider } from '@tamagui/portal'\nimport * as React from 'react'\n\n\n/* -------------------------------------------------------------------------------------------------\n * ToastProvider\n * -----------------------------------------------------------------------------------------------*/\n\nconst PROVIDER_NAME = 'ToastProvider'\n\nconst [Collection, useCollection, createCollectionScope] =\n  createCollection<TamaguiElement>('Toast')\n\ntype SwipeDirection = 'vertical' | 'up' | 'down' | 'horizontal' | 'left' | 'right'\ntype ToastProviderContextValue = {\n  id: string\n  label: string\n  duration: number\n  swipeDirection: SwipeDirection\n  swipeThreshold: number\n  toastCount: number\n  viewport: TamaguiElement | null\n  onViewportChange(viewport: TamaguiElement): void\n  onToastAdd(): void\n  onToastRemove(): void\n  isFocusedToastEscapeKeyDownRef: React.MutableRefObject<boolean>\n  isClosePausedRef: React.MutableRefObject<boolean>\n}\n\ntype ScopedProps<P> = P & { __scopeToast?: Scope }\nconst [createToastContext, createToastScope] = createContextScope('Toast', [\n  createCollectionScope,\n])\nconst [ToastProviderProvider, useToastProviderContext] =\n  createToastContext<ToastProviderContextValue>(PROVIDER_NAME)\n\ninterface ToastProviderProps {\n  children?: React.ReactNode\n  /**\n   * An author-localized label for each toast. Used to help screen reader users\n   * associate the interruption with a toast.\n   * @defaultValue 'Notification'\n   */\n  label?: string\n  /**\n   * Time in milliseconds that each toast should remain visible for.\n   * @defaultValue 5000\n   */\n  duration?: number\n  /**\n   * Direction of pointer swipe that should close the toast.\n   * @defaultValue 'right'\n   */\n  swipeDirection?: SwipeDirection\n  /**\n   * Distance in pixels that the swipe must pass before a close is triggered.\n   * @defaultValue 50\n   */\n  swipeThreshold?: number\n  /**\n   * @defaultValue unique generated identifier\n   */\n  id?: string\n}\n\nconst ToastProvider: React.FC<ToastProviderProps> = (\n  props: ScopedProps<ToastProviderProps>\n) => {\n  const {\n    __scopeToast,\n    id: providedId,\n    label = 'Notification',\n    duration = 5000,\n    swipeDirection = 'right',\n    swipeThreshold = 50,\n    children,\n  } = props\n  const id = providedId ?? useId()\n  const [viewport, setViewport] = React.useState<TamaguiElement | null>(null)\n  const [toastCount, setToastCount] = React.useState(0)\n  const isFocusedToastEscapeKeyDownRef = React.useRef(false)\n  const isClosePausedRef = React.useRef(false)\n\n  return (\n    <PortalProvider shouldAddRootHost={false} rootHostName=\"default\">\n      <Collection.Provider scope={__scopeToast}>\n        <ToastProviderProvider\n          scope={__scopeToast}\n          id={id}\n          label={label}\n          duration={duration}\n          swipeDirection={swipeDirection}\n          swipeThreshold={swipeThreshold}\n          toastCount={toastCount}\n          viewport={viewport}\n          onViewportChange={setViewport}\n          onToastAdd={React.useCallback(() => {\n            setToastCount((prevCount) => prevCount + 1)\n          }, [])}\n          onToastRemove={React.useCallback(() => {\n            setToastCount((prevCount) => prevCount - 1)\n          }, [])}\n          isFocusedToastEscapeKeyDownRef={isFocusedToastEscapeKeyDownRef}\n          isClosePausedRef={isClosePausedRef}\n        >\n          {children}\n        </ToastProviderProvider>\n      </Collection.Provider>\n    </PortalProvider>\n  )\n}\n\nToastProvider.propTypes = {\n  label(props) {\n    if (props.label && typeof props.label === 'string' && !props.label.trim()) {\n      const error = `Invalid prop \\`label\\` supplied to \\`${PROVIDER_NAME}\\`. Expected non-empty \\`string\\`.`\n      return new Error(error)\n    }\n    return null\n  },\n}\n\nToastProvider.displayName = PROVIDER_NAME\n\nexport {\n  Collection, ToastProvider, createToastContext, createToastScope, useCollection, useToastProviderContext\n}\nexport type { ScopedProps, SwipeDirection, ToastProviderProps }\n\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2FQ;AA1FR,wBAAiC;AACjC,kBAAsC;AAEtC,4BAAmC;AACnC,oBAA+B;AAC/B,YAAuB;AAOvB,MAAM,gBAAgB;AAEtB,MAAM,CAAC,YAAY,eAAe,qBAAqB,QACrD,oCAAiC,OAAO;AAmB1C,MAAM,CAAC,oBAAoB,gBAAgB,QAAI,0CAAmB,SAAS;AAAA,EACzE;AACF,CAAC;AACD,MAAM,CAAC,uBAAuB,uBAAuB,IACnD,mBAA8C,aAAa;AA+B7D,MAAM,gBAA8C,CAClD,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB;AAAA,EACF,IAAI;AACJ,QAAM,KAAK,kBAAc,mBAAM;AAC/B,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAgC,IAAI;AAC1E,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AACpD,QAAM,iCAAiC,MAAM,OAAO,KAAK;AACzD,QAAM,mBAAmB,MAAM,OAAO,KAAK;AAE3C,SACE,4CAAC,gCAAe,mBAAmB,OAAO,cAAa,WACrD,sDAAC,WAAW,UAAX,EAAoB,OAAO,cAC1B;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB,YAAY,MAAM,YAAY,MAAM;AAClC,sBAAc,CAAC,cAAc,YAAY,CAAC;AAAA,MAC5C,GAAG,CAAC,CAAC;AAAA,MACL,eAAe,MAAM,YAAY,MAAM;AACrC,sBAAc,CAAC,cAAc,YAAY,CAAC;AAAA,MAC5C,GAAG,CAAC,CAAC;AAAA,MACL;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH,GACF,GACF;AAEJ;AAEA,cAAc,YAAY;AAAA,EACxB,MAAM,OAAO;AACX,QAAI,MAAM,SAAS,OAAO,MAAM,UAAU,YAAY,CAAC,MAAM,MAAM,KAAK,GAAG;AACzE,YAAM,QAAQ,wCAAwC;AACtD,aAAO,IAAI,MAAM,KAAK;AAAA,IACxB;AACA,WAAO;AAAA,EACT;AACF;AAEA,cAAc,cAAc;",
+  "sourcesContent": ["import { createCollection } from '@tamagui/collection'\nimport { TamaguiElement, useId } from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { PortalProvider } from '@tamagui/portal'\nimport * as React from 'react'\n\n/* -------------------------------------------------------------------------------------------------\n * ToastProvider\n * -----------------------------------------------------------------------------------------------*/\n\nconst PROVIDER_NAME = 'ToastProvider'\n\nconst [Collection, useCollection, createCollectionScope] =\n  createCollection<TamaguiElement>('Toast')\n\ntype SwipeDirection = 'vertical' | 'up' | 'down' | 'horizontal' | 'left' | 'right'\ntype ToastProviderContextValue = {\n  id: string\n  label: string\n  duration: number\n  swipeDirection: SwipeDirection\n  swipeThreshold: number\n  toastCount: number\n  viewport: TamaguiElement | null\n  onViewportChange(viewport: TamaguiElement): void\n  onToastAdd(): void\n  onToastRemove(): void\n  isFocusedToastEscapeKeyDownRef: React.MutableRefObject<boolean>\n  isClosePausedRef: React.MutableRefObject<boolean>\n}\n\ntype ScopedProps<P> = P & { __scopeToast?: Scope }\nconst [createToastContext, createToastScope] = createContextScope('Toast', [\n  createCollectionScope,\n])\nconst [ToastProviderProvider, useToastProviderContext] =\n  createToastContext<ToastProviderContextValue>(PROVIDER_NAME)\n\ninterface ToastProviderProps {\n  children?: React.ReactNode\n  /**\n   * An author-localized label for each toast. Used to help screen reader users\n   * associate the interruption with a toast.\n   * @defaultValue 'Notification'\n   */\n  label?: string\n  /**\n   * Time in milliseconds that each toast should remain visible for.\n   * @defaultValue 5000\n   */\n  duration?: number\n  /**\n   * Direction of pointer swipe that should close the toast.\n   * @defaultValue 'right'\n   */\n  swipeDirection?: SwipeDirection\n  /**\n   * Distance in pixels that the swipe must pass before a close is triggered.\n   * @defaultValue 50\n   */\n  swipeThreshold?: number\n  /**\n   * @defaultValue unique generated identifier\n   */\n  id?: string\n}\n\nconst ToastProvider: React.FC<ToastProviderProps> = (\n  props: ScopedProps<ToastProviderProps>\n) => {\n  const {\n    __scopeToast,\n    id: providedId,\n    label = 'Notification',\n    duration = 5000,\n    swipeDirection = 'right',\n    swipeThreshold = 50,\n    children,\n  } = props\n  const id = providedId ?? useId()\n  const [viewport, setViewport] = React.useState<TamaguiElement | null>(null)\n  const [toastCount, setToastCount] = React.useState(0)\n  const isFocusedToastEscapeKeyDownRef = React.useRef(false)\n  const isClosePausedRef = React.useRef(false)\n\n  return (\n    <Collection.Provider scope={__scopeToast}>\n      <ToastProviderProvider\n        scope={__scopeToast}\n        id={id}\n        label={label}\n        duration={duration}\n        swipeDirection={swipeDirection}\n        swipeThreshold={swipeThreshold}\n        toastCount={toastCount}\n        viewport={viewport}\n        onViewportChange={setViewport}\n        onToastAdd={React.useCallback(() => {\n          setToastCount((prevCount) => prevCount + 1)\n        }, [])}\n        onToastRemove={React.useCallback(() => {\n          setToastCount((prevCount) => prevCount - 1)\n        }, [])}\n        isFocusedToastEscapeKeyDownRef={isFocusedToastEscapeKeyDownRef}\n        isClosePausedRef={isClosePausedRef}\n      >\n        {children}\n      </ToastProviderProvider>\n    </Collection.Provider>\n  )\n}\n\nToastProvider.propTypes = {\n  label(props) {\n    if (props.label && typeof props.label === 'string' && !props.label.trim()) {\n      const error = `Invalid prop \\`label\\` supplied to \\`${PROVIDER_NAME}\\`. Expected non-empty \\`string\\`.`\n      return new Error(error)\n    }\n    return null\n  },\n}\n\nToastProvider.displayName = PROVIDER_NAME\n\nexport {\n  Collection,\n  ToastProvider,\n  createToastContext,\n  createToastScope,\n  useCollection,\n  useToastProviderContext,\n}\nexport type { ScopedProps, SwipeDirection, ToastProviderProps }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwFM;AAxFN,wBAAiC;AACjC,kBAAsC;AAEtC,4BAAmC;AAEnC,YAAuB;AAMvB,MAAM,gBAAgB;AAEtB,MAAM,CAAC,YAAY,eAAe,qBAAqB,QACrD,oCAAiC,OAAO;AAmB1C,MAAM,CAAC,oBAAoB,gBAAgB,QAAI,0CAAmB,SAAS;AAAA,EACzE;AACF,CAAC;AACD,MAAM,CAAC,uBAAuB,uBAAuB,IACnD,mBAA8C,aAAa;AA+B7D,MAAM,gBAA8C,CAClD,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB;AAAA,EACF,IAAI;AACJ,QAAM,KAAK,kBAAc,mBAAM;AAC/B,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAgC,IAAI;AAC1E,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AACpD,QAAM,iCAAiC,MAAM,OAAO,KAAK;AACzD,QAAM,mBAAmB,MAAM,OAAO,KAAK;AAE3C,SACE,4CAAC,WAAW,UAAX,EAAoB,OAAO,cAC1B;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB,YAAY,MAAM,YAAY,MAAM;AAClC,sBAAc,CAAC,cAAc,YAAY,CAAC;AAAA,MAC5C,GAAG,CAAC,CAAC;AAAA,MACL,eAAe,MAAM,YAAY,MAAM;AACrC,sBAAc,CAAC,cAAc,YAAY,CAAC;AAAA,MAC5C,GAAG,CAAC,CAAC;AAAA,MACL;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,cAAc,YAAY;AAAA,EACxB,MAAM,OAAO;AACX,QAAI,MAAM,SAAS,OAAO,MAAM,UAAU,YAAY,CAAC,MAAM,MAAM,KAAK,GAAG;AACzE,YAAM,QAAQ,wCAAwC;AACtD,aAAO,IAAI,MAAM,KAAK;AAAA,IACxB;AACA,WAAO;AAAA,EACT;AACF;AAEA,cAAc,cAAc;",
   "names": []
 }

package/dist/cjs/ToastViewport.js

@@ -88,6 +88,8 @@ const ToastViewport = React.forwardRef(
     React.useEffect(() => {
       if (!import_core.isWeb)
         return;
+      if (context.toastCount === 0)
+        return;
       const handleKeyDown = (event) => {
         var _a;
         const isHotkeyPressed = hotkey.every(
@@ -95,7 +97,6 @@ const ToastViewport = React.forwardRef(
         );
         if (isHotkeyPressed)
           (_a = ref.current) == null ? void 0 : _a.focus();
-        console.log(isHotkeyPressed);
       };
       document.addEventListener("keydown", handleKeyDown);
       return () => {
@@ -105,6 +106,8 @@ const ToastViewport = React.forwardRef(
     React.useEffect(() => {
       if (!import_core.isWeb)
         return;
+      if (context.toastCount === 0)
+        return;
       const wrapper = wrapperRef.current;
       const viewport = ref.current;
       if (hasToasts && wrapper && viewport) {
@@ -165,6 +168,8 @@ const ToastViewport = React.forwardRef(
     React.useEffect(() => {
       if (!import_core.isWeb)
         return;
+      if (context.toastCount === 0)
+        return;
       const viewport = ref.current;
       if (viewport) {
         const handleKeyDown = (event) => {

package/dist/cjs/ToastViewport.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ToastViewport.tsx"],
-  "sourcesContent": ["import { AnimatePresence } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { GetProps, TamaguiElement, isWeb, styled } from '@tamagui/core'\nimport { PortalHost } from '@tamagui/portal'\nimport { YStack } from '@tamagui/stacks'\nimport { VisuallyHidden } from '@tamagui/visually-hidden'\nimport * as React from 'react'\n\nimport {\n  Collection,\n  ScopedProps,\n  useCollection,\n  useToastProviderContext,\n} from './ToastProvider'\n\nconst VIEWPORT_NAME = 'ToastViewport'\nconst VIEWPORT_DEFAULT_HOTKEY = ['F8']\nconst VIEWPORT_PAUSE = 'toast.viewportPause'\nconst VIEWPORT_RESUME = 'toast.viewportResume'\n\nconst ToastViewportWrapperFrame = styled(YStack, {\n  name: 'ViewportWrapper',\n  pointerEvents: 'box-none',\n  top: 0,\n  bottom: 0,\n  left: 0,\n  right: 0,\n  // @ts-ignore\n  position: isWeb ? 'fixed' : 'absolute',\n  maxWidth: '100%',\n  tabIndex: 0,\n  zIndex: 100000,\n})\n\nconst ToastViewportFrame = styled(YStack, {\n  name: VIEWPORT_NAME,\n  pointerEvents: 'box-none',\n  // @ts-ignore\n  position: isWeb ? 'fixed' : 'absolute',\n  maxWidth: '100%',\n})\ntype ToastViewportFrameProps = GetProps<typeof ToastViewportFrame>\ntype ToastViewportProps = ToastViewportFrameProps & {\n  /**\n   * The keys to use as the keyboard shortcut that will move focus to the toast viewport.\n   * @defaultValue ['F8']\n   */\n  hotkey?: string[]\n  /**\n   * An author-localized label for the toast viewport to provide context for screen reader users\n   * when navigating page landmarks. The available `{hotkey}` placeholder will be replaced for you.\n   * @defaultValue 'Notifications ({hotkey})'\n   */\n  label?: string\n  /**\n   * Used to reference the viewport if you want to have multiple viewports in the same provider.\n   */\n  name?: string\n}\n\nconst ToastViewport = React.forwardRef<HTMLDivElement, ToastViewportProps>(\n  (props: ScopedProps<ToastViewportProps>, forwardedRef) => {\n    const {\n      __scopeToast,\n      hotkey = VIEWPORT_DEFAULT_HOTKEY,\n      label = 'Notifications ({hotkey})',\n      name,\n      ...viewportProps\n    } = props\n    const context = useToastProviderContext(VIEWPORT_NAME, __scopeToast)\n    const getItems = useCollection(__scopeToast)\n    const headFocusProxyRef = React.useRef<FocusProxyElement>(null)\n    const tailFocusProxyRef = React.useRef<FocusProxyElement>(null)\n    const wrapperRef = React.useRef<HTMLDivElement>(null)\n    const ref = React.useRef<HTMLDivElement>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange)\n    const hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, '')\n    const hasToasts = context.toastCount > 0\n\n    React.useEffect(() => {\n      if (!isWeb) return\n      const handleKeyDown = (event: KeyboardEvent) => {\n        // we use `event.code` as it is consistent regardless of meta keys that were pressed.\n        // for example, `event.key` for `Control+Alt+t` is `\u2020` and `t !== \u2020`\n        const isHotkeyPressed = hotkey.every(\n          (key) => (event as any)[key] || event.code === key\n        )\n        if (isHotkeyPressed) ref.current?.focus()\n        console.log(isHotkeyPressed)\n      }\n      document.addEventListener('keydown', handleKeyDown)\n      return () => {\n        document.removeEventListener('keydown', handleKeyDown)\n      }\n    }, [hotkey])\n\n    React.useEffect(() => {\n      if (!isWeb) return\n      const wrapper = wrapperRef.current\n      const viewport = ref.current\n      if (hasToasts && wrapper && viewport) {\n        const handlePause = () => {\n          if (!context.isClosePausedRef.current) {\n            const pauseEvent = new CustomEvent(VIEWPORT_PAUSE)\n            viewport.dispatchEvent(pauseEvent)\n            context.isClosePausedRef.current = true\n          }\n        }\n\n        const handleResume = () => {\n          if (context.isClosePausedRef.current) {\n            const resumeEvent = new CustomEvent(VIEWPORT_RESUME)\n            viewport.dispatchEvent(resumeEvent)\n            context.isClosePausedRef.current = false\n          }\n        }\n\n        const handleFocusOutResume = (event: FocusEvent) => {\n          const isFocusMovingOutside = !wrapper.contains(\n            event.relatedTarget as HTMLElement\n          )\n          if (isFocusMovingOutside) handleResume()\n        }\n\n        const handlePointerLeaveResume = () => {\n          const isFocusInside = wrapper.contains(document.activeElement)\n          if (!isFocusInside) handleResume()\n        }\n        // Toasts are not in the viewport React tree so we need to bind DOM events\n\n        wrapper.addEventListener('focusin', handlePause)\n        wrapper.addEventListener('focusout', handleFocusOutResume)\n        wrapper.addEventListener('pointermove', handlePause)\n        wrapper.addEventListener('pointerleave', handlePointerLeaveResume)\n        window.addEventListener('blur', handlePause)\n        window.addEventListener('focus', handleResume)\n        return () => {\n          wrapper.removeEventListener('focusin', handlePause)\n          wrapper.removeEventListener('focusout', handleFocusOutResume)\n          wrapper.removeEventListener('pointermove', handlePause)\n          wrapper.removeEventListener('pointerleave', handlePointerLeaveResume)\n          window.removeEventListener('blur', handlePause)\n          window.removeEventListener('focus', handleResume)\n        }\n      }\n    }, [hasToasts, context.isClosePausedRef])\n\n    const getSortedTabbableCandidates = React.useCallback(\n      ({ tabbingDirection }: { tabbingDirection: 'forwards' | 'backwards' }) => {\n        const toastItems = getItems()\n        const tabbableCandidates = toastItems.map((toastItem) => {\n          const toastNode = toastItem.ref.current!\n          const toastTabbableCandidates = [toastNode, ...getTabbableCandidates(toastNode)]\n          return tabbingDirection === 'forwards'\n            ? toastTabbableCandidates\n            : toastTabbableCandidates.reverse()\n        })\n        return (\n          tabbingDirection === 'forwards'\n            ? tabbableCandidates.reverse()\n            : tabbableCandidates\n        ).flat()\n      },\n      [getItems]\n    )\n\n    React.useEffect(() => {\n      if (!isWeb) return\n      const viewport = ref.current\n      // We programmatically manage tabbing as we are unable to influence\n      // the source order with portals, this allows us to reverse the\n      // tab order so that it runs from most recent toast to least\n      if (viewport) {\n        const handleKeyDown = (event: KeyboardEvent) => {\n          const isMetaKey = event.altKey || event.ctrlKey || event.metaKey\n          const isTabKey = event.key === 'Tab' && !isMetaKey\n\n          if (isTabKey) {\n            const focusedElement = document.activeElement\n            const isTabbingBackwards = event.shiftKey\n            const targetIsViewport = event.target === viewport\n\n            // If we're back tabbing after jumping to the viewport then we simply\n            // proxy focus out to the preceding document\n            if (targetIsViewport && isTabbingBackwards) {\n              headFocusProxyRef.current?.focus()\n              return\n            }\n\n            const tabbingDirection = isTabbingBackwards ? 'backwards' : 'forwards'\n            const sortedCandidates = getSortedTabbableCandidates({ tabbingDirection })\n            const index = sortedCandidates.findIndex(\n              (candidate) => candidate === focusedElement\n            )\n            if (focusFirst(sortedCandidates.slice(index + 1))) {\n              event.preventDefault()\n            } else {\n              // If we can't focus that means we're at the edges so we\n              // proxy to the corresponding exit point and let the browser handle\n              // tab/shift+tab keypress and implicitly pass focus to the next valid element in the document\n              isTabbingBackwards\n                ? headFocusProxyRef.current?.focus()\n                : tailFocusProxyRef.current?.focus()\n            }\n          }\n        }\n\n        // Toasts are not in the viewport React tree so we need to bind DOM events\n        viewport.addEventListener('keydown', handleKeyDown)\n        return () => viewport.removeEventListener('keydown', handleKeyDown)\n      }\n    }, [getItems, getSortedTabbableCandidates])\n\n    return (\n      <ToastViewportWrapperFrame\n        ref={wrapperRef}\n        role=\"region\"\n        aria-label={label.replace('{hotkey}', hotkeyLabel)}\n        // // Ensure virtual cursor from landmarks menus triggers focus/blur for pause/resume\n        tabIndex={-1}\n        // // incase list has size when empty (e.g. padding), we remove pointer events so\n        // // it doesn't prevent interactions with page elements that it overlays\n        // pointerEvents={hasToasts ? undefined : 'none'}\n      >\n        {hasToasts && (\n          <FocusProxy\n            ref={headFocusProxyRef}\n            onFocusFromOutsideViewport={() => {\n              const tabbableCandidates = getSortedTabbableCandidates({\n                tabbingDirection: 'forwards',\n              })\n              focusFirst(tabbableCandidates)\n            }}\n          />\n        )}\n        {/**\n         * tabindex on the the list so that it can be focused when items are removed. we focus\n         * the list instead of the viewport so it announces number of items remaining.\n         */}\n        <Collection.Slot scope={__scopeToast}>\n          <ToastViewportFrame ref={composedRefs} {...viewportProps}>\n            <PortalHost\n              // TODO: user should be able to control this prop to customize AnimatePresence\n              render={(children) => <AnimatePresence>{children}</AnimatePresence>}\n              name={name ?? 'default'}\n            />\n          </ToastViewportFrame>\n        </Collection.Slot>\n        {hasToasts && (\n          <FocusProxy\n            ref={tailFocusProxyRef}\n            onFocusFromOutsideViewport={() => {\n              const tabbableCandidates = getSortedTabbableCandidates({\n                tabbingDirection: 'backwards',\n              })\n              focusFirst(tabbableCandidates)\n            }}\n          />\n        )}\n      </ToastViewportWrapperFrame>\n    )\n  }\n)\n\nToastViewport.displayName = VIEWPORT_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst FOCUS_PROXY_NAME = 'ToastFocusProxy'\n\ntype FocusProxyElement = React.ElementRef<typeof VisuallyHidden>\ntype VisuallyHiddenProps = GetProps<typeof VisuallyHidden>\ninterface FocusProxyProps extends VisuallyHiddenProps {\n  onFocusFromOutsideViewport(): void\n}\n\nconst FocusProxy = React.forwardRef<FocusProxyElement, ScopedProps<FocusProxyProps>>(\n  (props, forwardedRef) => {\n    const { __scopeToast, onFocusFromOutsideViewport, ...proxyProps } = props\n    const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast)\n\n    return (\n      <VisuallyHidden\n        aria-hidden\n        tabIndex={0}\n        {...proxyProps}\n        ref={forwardedRef}\n        // Avoid page scrolling when focus is on the focus proxy\n        position={isWeb ? ('fixed' as any) : 'absolute'}\n        onFocus={(event) => {\n          if (!isWeb) return\n          const prevFocusedElement = event.relatedTarget as HTMLElement | null\n          const isFocusFromOutsideViewport = !(context.viewport as HTMLElement)?.contains(\n            prevFocusedElement\n          )\n          if (isFocusFromOutsideViewport) onFocusFromOutsideViewport()\n        }}\n      />\n    )\n  }\n)\n\nFocusProxy.displayName = FOCUS_PROXY_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction focusFirst(candidates: TamaguiElement[]) {\n  if (!isWeb) return\n  const previouslyFocusedElement = document.activeElement\n  return candidates.some((candidate) => {\n    // if focus is already where we want to go, we don't want to keep going through the candidates\n    if (candidate === previouslyFocusedElement) return true\n    candidate.focus()\n    return document.activeElement !== previouslyFocusedElement\n  })\n}\n\n/**\n * Returns a list of potential tabbable candidates.\n *\n * NOTE: This is only a close approximation. For example it doesn't take into account cases like when\n * elements are not visible. This cannot be worked out easily by just reading a property, but rather\n * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker\n * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1\n */\nfunction getTabbableCandidates(container: TamaguiElement) {\n  if (!isWeb) return []\n  const containerHtml = container as HTMLElement\n  const nodes: HTMLElement[] = []\n  const walker = document.createTreeWalker(containerHtml, NodeFilter.SHOW_ELEMENT, {\n    acceptNode: (node: any) => {\n      const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden'\n      if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP\n      // `.tabIndex` is not the same as the `tabindex` attribute. It works on the\n      // runtime's understanding of tabbability, so this automatically accounts\n      // for any kind of element that could be tabbed to.\n      return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP\n    },\n  })\n  while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement)\n  // we do not take into account the order of nodes with positive `tabIndex` as it\n  // hinders accessibility to have tab order different from visual order.\n  return nodes\n}\n\nexport {\n  ToastViewport,\n  ToastViewportProps,\n  VIEWPORT_DEFAULT_HOTKEY,\n  VIEWPORT_PAUSE,\n  VIEWPORT_RESUME,\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { AnimatePresence } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { GetProps, TamaguiElement, isWeb, styled } from '@tamagui/core'\nimport { PortalHost } from '@tamagui/portal'\nimport { YStack } from '@tamagui/stacks'\nimport { VisuallyHidden } from '@tamagui/visually-hidden'\nimport * as React from 'react'\n\nimport {\n  Collection,\n  ScopedProps,\n  useCollection,\n  useToastProviderContext,\n} from './ToastProvider'\n\nconst VIEWPORT_NAME = 'ToastViewport'\nconst VIEWPORT_DEFAULT_HOTKEY = ['F8']\nconst VIEWPORT_PAUSE = 'toast.viewportPause'\nconst VIEWPORT_RESUME = 'toast.viewportResume'\n\nconst ToastViewportWrapperFrame = styled(YStack, {\n  name: 'ViewportWrapper',\n  pointerEvents: 'box-none',\n  top: 0,\n  bottom: 0,\n  left: 0,\n  right: 0,\n  // @ts-ignore\n  position: isWeb ? 'fixed' : 'absolute',\n  maxWidth: '100%',\n  tabIndex: 0,\n  zIndex: 100000,\n})\n\nconst ToastViewportFrame = styled(YStack, {\n  name: VIEWPORT_NAME,\n  pointerEvents: 'box-none',\n  // @ts-ignore\n  position: isWeb ? 'fixed' : 'absolute',\n  maxWidth: '100%',\n})\ntype ToastViewportFrameProps = GetProps<typeof ToastViewportFrame>\ntype ToastViewportProps = ToastViewportFrameProps & {\n  /**\n   * The keys to use as the keyboard shortcut that will move focus to the toast viewport.\n   * @defaultValue ['F8']\n   */\n  hotkey?: string[]\n  /**\n   * An author-localized label for the toast viewport to provide context for screen reader users\n   * when navigating page landmarks. The available `{hotkey}` placeholder will be replaced for you.\n   * @defaultValue 'Notifications ({hotkey})'\n   */\n  label?: string\n  /**\n   * Used to reference the viewport if you want to have multiple viewports in the same provider.\n   */\n  name?: string\n}\n\nconst ToastViewport = React.forwardRef<HTMLDivElement, ToastViewportProps>(\n  (props: ScopedProps<ToastViewportProps>, forwardedRef) => {\n    const {\n      __scopeToast,\n      hotkey = VIEWPORT_DEFAULT_HOTKEY,\n      label = 'Notifications ({hotkey})',\n      name,\n      ...viewportProps\n    } = props\n    const context = useToastProviderContext(VIEWPORT_NAME, __scopeToast)\n    const getItems = useCollection(__scopeToast)\n    const headFocusProxyRef = React.useRef<FocusProxyElement>(null)\n    const tailFocusProxyRef = React.useRef<FocusProxyElement>(null)\n    const wrapperRef = React.useRef<HTMLDivElement>(null)\n    const ref = React.useRef<HTMLDivElement>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange)\n    const hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, '')\n    const hasToasts = context.toastCount > 0\n\n    React.useEffect(() => {\n      if (!isWeb) return\n      if (context.toastCount === 0) return\n      const handleKeyDown = (event: KeyboardEvent) => {\n        // we use `event.code` as it is consistent regardless of meta keys that were pressed.\n        // for example, `event.key` for `Control+Alt+t` is `\u2020` and `t !== \u2020`\n        const isHotkeyPressed = hotkey.every(\n          (key) => (event as any)[key] || event.code === key\n        )\n        if (isHotkeyPressed) ref.current?.focus()\n      }\n      document.addEventListener('keydown', handleKeyDown)\n      return () => {\n        document.removeEventListener('keydown', handleKeyDown)\n      }\n    }, [hotkey])\n\n    React.useEffect(() => {\n      if (!isWeb) return\n      if (context.toastCount === 0) return\n      const wrapper = wrapperRef.current\n      const viewport = ref.current\n      if (hasToasts && wrapper && viewport) {\n        const handlePause = () => {\n          if (!context.isClosePausedRef.current) {\n            const pauseEvent = new CustomEvent(VIEWPORT_PAUSE)\n            viewport.dispatchEvent(pauseEvent)\n            context.isClosePausedRef.current = true\n          }\n        }\n\n        const handleResume = () => {\n          if (context.isClosePausedRef.current) {\n            const resumeEvent = new CustomEvent(VIEWPORT_RESUME)\n            viewport.dispatchEvent(resumeEvent)\n            context.isClosePausedRef.current = false\n          }\n        }\n\n        const handleFocusOutResume = (event: FocusEvent) => {\n          const isFocusMovingOutside = !wrapper.contains(\n            event.relatedTarget as HTMLElement\n          )\n          if (isFocusMovingOutside) handleResume()\n        }\n\n        const handlePointerLeaveResume = () => {\n          const isFocusInside = wrapper.contains(document.activeElement)\n          if (!isFocusInside) handleResume()\n        }\n        // Toasts are not in the viewport React tree so we need to bind DOM events\n\n        wrapper.addEventListener('focusin', handlePause)\n        wrapper.addEventListener('focusout', handleFocusOutResume)\n        wrapper.addEventListener('pointermove', handlePause)\n        wrapper.addEventListener('pointerleave', handlePointerLeaveResume)\n        window.addEventListener('blur', handlePause)\n        window.addEventListener('focus', handleResume)\n        return () => {\n          wrapper.removeEventListener('focusin', handlePause)\n          wrapper.removeEventListener('focusout', handleFocusOutResume)\n          wrapper.removeEventListener('pointermove', handlePause)\n          wrapper.removeEventListener('pointerleave', handlePointerLeaveResume)\n          window.removeEventListener('blur', handlePause)\n          window.removeEventListener('focus', handleResume)\n        }\n      }\n    }, [hasToasts, context.isClosePausedRef])\n\n    const getSortedTabbableCandidates = React.useCallback(\n      ({ tabbingDirection }: { tabbingDirection: 'forwards' | 'backwards' }) => {\n        const toastItems = getItems()\n        const tabbableCandidates = toastItems.map((toastItem) => {\n          const toastNode = toastItem.ref.current!\n          const toastTabbableCandidates = [toastNode, ...getTabbableCandidates(toastNode)]\n          return tabbingDirection === 'forwards'\n            ? toastTabbableCandidates\n            : toastTabbableCandidates.reverse()\n        })\n        return (\n          tabbingDirection === 'forwards'\n            ? tabbableCandidates.reverse()\n            : tabbableCandidates\n        ).flat()\n      },\n      [getItems]\n    )\n\n    React.useEffect(() => {\n      if (!isWeb) return\n      if (context.toastCount === 0) return\n\n      const viewport = ref.current\n      // We programmatically manage tabbing as we are unable to influence\n      // the source order with portals, this allows us to reverse the\n      // tab order so that it runs from most recent toast to least\n      if (viewport) {\n        const handleKeyDown = (event: KeyboardEvent) => {\n          const isMetaKey = event.altKey || event.ctrlKey || event.metaKey\n          const isTabKey = event.key === 'Tab' && !isMetaKey\n\n          if (isTabKey) {\n            const focusedElement = document.activeElement\n            const isTabbingBackwards = event.shiftKey\n            const targetIsViewport = event.target === viewport\n\n            // If we're back tabbing after jumping to the viewport then we simply\n            // proxy focus out to the preceding document\n            if (targetIsViewport && isTabbingBackwards) {\n              headFocusProxyRef.current?.focus()\n              return\n            }\n\n            const tabbingDirection = isTabbingBackwards ? 'backwards' : 'forwards'\n            const sortedCandidates = getSortedTabbableCandidates({ tabbingDirection })\n            const index = sortedCandidates.findIndex(\n              (candidate) => candidate === focusedElement\n            )\n            if (focusFirst(sortedCandidates.slice(index + 1))) {\n              event.preventDefault()\n            } else {\n              // If we can't focus that means we're at the edges so we\n              // proxy to the corresponding exit point and let the browser handle\n              // tab/shift+tab keypress and implicitly pass focus to the next valid element in the document\n              isTabbingBackwards\n                ? headFocusProxyRef.current?.focus()\n                : tailFocusProxyRef.current?.focus()\n            }\n          }\n        }\n\n        // Toasts are not in the viewport React tree so we need to bind DOM events\n        viewport.addEventListener('keydown', handleKeyDown)\n        return () => viewport.removeEventListener('keydown', handleKeyDown)\n      }\n    }, [getItems, getSortedTabbableCandidates])\n\n    return (\n      <ToastViewportWrapperFrame\n        ref={wrapperRef}\n        role=\"region\"\n        aria-label={label.replace('{hotkey}', hotkeyLabel)}\n        // // Ensure virtual cursor from landmarks menus triggers focus/blur for pause/resume\n        tabIndex={-1}\n        // // incase list has size when empty (e.g. padding), we remove pointer events so\n        // // it doesn't prevent interactions with page elements that it overlays\n        // pointerEvents={hasToasts ? undefined : 'none'}\n      >\n        {hasToasts && (\n          <FocusProxy\n            ref={headFocusProxyRef}\n            onFocusFromOutsideViewport={() => {\n              const tabbableCandidates = getSortedTabbableCandidates({\n                tabbingDirection: 'forwards',\n              })\n              focusFirst(tabbableCandidates)\n            }}\n          />\n        )}\n        {/**\n         * tabindex on the the list so that it can be focused when items are removed. we focus\n         * the list instead of the viewport so it announces number of items remaining.\n         */}\n        <Collection.Slot scope={__scopeToast}>\n          <ToastViewportFrame ref={composedRefs} {...viewportProps}>\n            <PortalHost\n              // TODO: user should be able to control this prop to customize AnimatePresence\n              render={(children) => <AnimatePresence>{children}</AnimatePresence>}\n              name={name ?? 'default'}\n            />\n          </ToastViewportFrame>\n        </Collection.Slot>\n        {hasToasts && (\n          <FocusProxy\n            ref={tailFocusProxyRef}\n            onFocusFromOutsideViewport={() => {\n              const tabbableCandidates = getSortedTabbableCandidates({\n                tabbingDirection: 'backwards',\n              })\n              focusFirst(tabbableCandidates)\n            }}\n          />\n        )}\n      </ToastViewportWrapperFrame>\n    )\n  }\n)\n\nToastViewport.displayName = VIEWPORT_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst FOCUS_PROXY_NAME = 'ToastFocusProxy'\n\ntype FocusProxyElement = React.ElementRef<typeof VisuallyHidden>\ntype VisuallyHiddenProps = GetProps<typeof VisuallyHidden>\ninterface FocusProxyProps extends VisuallyHiddenProps {\n  onFocusFromOutsideViewport(): void\n}\n\nconst FocusProxy = React.forwardRef<FocusProxyElement, ScopedProps<FocusProxyProps>>(\n  (props, forwardedRef) => {\n    const { __scopeToast, onFocusFromOutsideViewport, ...proxyProps } = props\n    const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast)\n\n    return (\n      <VisuallyHidden\n        aria-hidden\n        tabIndex={0}\n        {...proxyProps}\n        ref={forwardedRef}\n        // Avoid page scrolling when focus is on the focus proxy\n        position={isWeb ? ('fixed' as any) : 'absolute'}\n        onFocus={(event) => {\n          if (!isWeb) return\n          const prevFocusedElement = event.relatedTarget as HTMLElement | null\n          const isFocusFromOutsideViewport = !(context.viewport as HTMLElement)?.contains(\n            prevFocusedElement\n          )\n          if (isFocusFromOutsideViewport) onFocusFromOutsideViewport()\n        }}\n      />\n    )\n  }\n)\n\nFocusProxy.displayName = FOCUS_PROXY_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction focusFirst(candidates: TamaguiElement[]) {\n  if (!isWeb) return\n  const previouslyFocusedElement = document.activeElement\n  return candidates.some((candidate) => {\n    // if focus is already where we want to go, we don't want to keep going through the candidates\n    if (candidate === previouslyFocusedElement) return true\n    candidate.focus()\n    return document.activeElement !== previouslyFocusedElement\n  })\n}\n\n/**\n * Returns a list of potential tabbable candidates.\n *\n * NOTE: This is only a close approximation. For example it doesn't take into account cases like when\n * elements are not visible. This cannot be worked out easily by just reading a property, but rather\n * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker\n * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1\n */\nfunction getTabbableCandidates(container: TamaguiElement) {\n  if (!isWeb) return []\n  const containerHtml = container as HTMLElement\n  const nodes: HTMLElement[] = []\n  const walker = document.createTreeWalker(containerHtml, NodeFilter.SHOW_ELEMENT, {\n    acceptNode: (node: any) => {\n      const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden'\n      if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP\n      // `.tabIndex` is not the same as the `tabindex` attribute. It works on the\n      // runtime's understanding of tabbability, so this automatically accounts\n      // for any kind of element that could be tabbed to.\n      return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP\n    },\n  })\n  while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement)\n  // we do not take into account the order of nodes with positive `tabIndex` as it\n  // hinders accessibility to have tab order different from visual order.\n  return nodes\n}\n\nexport {\n  ToastViewport,\n  ToastViewportProps,\n  VIEWPORT_DEFAULT_HOTKEY,\n  VIEWPORT_PAUSE,\n  VIEWPORT_RESUME,\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyNM;AAzNN,8BAAgC;AAChC,0BAAgC;AAChC,kBAAwD;AACxD,oBAA2B;AAC3B,oBAAuB;AACvB,6BAA+B;AAC/B,YAAuB;AAEvB,2BAKO;AAEP,MAAM,gBAAgB;AACtB,MAAM,0BAA0B,CAAC,IAAI;AACrC,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AAExB,MAAM,gCAA4B,oBAAO,sBAAQ;AAAA,EAC/C,MAAM;AAAA,EACN,eAAe;AAAA,EACf,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA;AAAA,EAEP,UAAU,oBAAQ,UAAU;AAAA,EAC5B,UAAU;AAAA,EACV,UAAU;AAAA,EACV,QAAQ;AACV,CAAC;AAED,MAAM,yBAAqB,oBAAO,sBAAQ;AAAA,EACxC,MAAM;AAAA,EACN,eAAe;AAAA;AAAA,EAEf,UAAU,oBAAQ,UAAU;AAAA,EAC5B,UAAU;AACZ,CAAC;AAoBD,MAAM,gBAAgB,MAAM;AAAA,EAC1B,CAAC,OAAwC,iBAAiB;AACxD,UAAM;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,cAAU,8CAAwB,eAAe,YAAY;AACnE,UAAM,eAAW,oCAAc,YAAY;AAC3C,UAAM,oBAAoB,MAAM,OAA0B,IAAI;AAC9D,UAAM,oBAAoB,MAAM,OAA0B,IAAI;AAC9D,UAAM,aAAa,MAAM,OAAuB,IAAI;AACpD,UAAM,MAAM,MAAM,OAAuB,IAAI;AAC7C,UAAM,mBAAe,qCAAgB,cAAc,KAAK,QAAQ,gBAAgB;AAChF,UAAM,cAAc,OAAO,KAAK,GAAG,EAAE,QAAQ,QAAQ,EAAE,EAAE,QAAQ,UAAU,EAAE;AAC7E,UAAM,YAAY,QAAQ,aAAa;AAEvC,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC;AAAO;AACZ,UAAI,QAAQ,eAAe;AAAG;AAC9B,YAAM,gBAAgB,CAAC,UAAyB;AAlFtD;AAqFQ,cAAM,kBAAkB,OAAO;AAAA,UAC7B,CAAC,QAAS,MAAc,GAAG,KAAK,MAAM,SAAS;AAAA,QACjD;AACA,YAAI;AAAiB,oBAAI,YAAJ,mBAAa;AAAA,MACpC;AACA,eAAS,iBAAiB,WAAW,aAAa;AAClD,aAAO,MAAM;AACX,iBAAS,oBAAoB,WAAW,aAAa;AAAA,MACvD;AAAA,IACF,GAAG,CAAC,MAAM,CAAC;AAEX,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC;AAAO;AACZ,UAAI,QAAQ,eAAe;AAAG;AAC9B,YAAM,UAAU,WAAW;AAC3B,YAAM,WAAW,IAAI;AACrB,UAAI,aAAa,WAAW,UAAU;AACpC,cAAM,cAAc,MAAM;AACxB,cAAI,CAAC,QAAQ,iBAAiB,SAAS;AACrC,kBAAM,aAAa,IAAI,YAAY,cAAc;AACjD,qBAAS,cAAc,UAAU;AACjC,oBAAQ,iBAAiB,UAAU;AAAA,UACrC;AAAA,QACF;AAEA,cAAM,eAAe,MAAM;AACzB,cAAI,QAAQ,iBAAiB,SAAS;AACpC,kBAAM,cAAc,IAAI,YAAY,eAAe;AACnD,qBAAS,cAAc,WAAW;AAClC,oBAAQ,iBAAiB,UAAU;AAAA,UACrC;AAAA,QACF;AAEA,cAAM,uBAAuB,CAAC,UAAsB;AAClD,gBAAM,uBAAuB,CAAC,QAAQ;AAAA,YACpC,MAAM;AAAA,UACR;AACA,cAAI;AAAsB,yBAAa;AAAA,QACzC;AAEA,cAAM,2BAA2B,MAAM;AACrC,gBAAM,gBAAgB,QAAQ,SAAS,SAAS,aAAa;AAC7D,cAAI,CAAC;AAAe,yBAAa;AAAA,QACnC;AAGA,gBAAQ,iBAAiB,WAAW,WAAW;AAC/C,gBAAQ,iBAAiB,YAAY,oBAAoB;AACzD,gBAAQ,iBAAiB,eAAe,WAAW;AACnD,gBAAQ,iBAAiB,gBAAgB,wBAAwB;AACjE,eAAO,iBAAiB,QAAQ,WAAW;AAC3C,eAAO,iBAAiB,SAAS,YAAY;AAC7C,eAAO,MAAM;AACX,kBAAQ,oBAAoB,WAAW,WAAW;AAClD,kBAAQ,oBAAoB,YAAY,oBAAoB;AAC5D,kBAAQ,oBAAoB,eAAe,WAAW;AACtD,kBAAQ,oBAAoB,gBAAgB,wBAAwB;AACpE,iBAAO,oBAAoB,QAAQ,WAAW;AAC9C,iBAAO,oBAAoB,SAAS,YAAY;AAAA,QAClD;AAAA,MACF;AAAA,IACF,GAAG,CAAC,WAAW,QAAQ,gBAAgB,CAAC;AAExC,UAAM,8BAA8B,MAAM;AAAA,MACxC,CAAC,EAAE,iBAAiB,MAAsD;AACxE,cAAM,aAAa,SAAS;AAC5B,cAAM,qBAAqB,WAAW,IAAI,CAAC,cAAc;AACvD,gBAAM,YAAY,UAAU,IAAI;AAChC,gBAAM,0BAA0B,CAAC,WAAW,GAAG,sBAAsB,SAAS,CAAC;AAC/E,iBAAO,qBAAqB,aACxB,0BACA,wBAAwB,QAAQ;AAAA,QACtC,CAAC;AACD,gBACE,qBAAqB,aACjB,mBAAmB,QAAQ,IAC3B,oBACJ,KAAK;AAAA,MACT;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AAEA,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC;AAAO;AACZ,UAAI,QAAQ,eAAe;AAAG;AAE9B,YAAM,WAAW,IAAI;AAIrB,UAAI,UAAU;AACZ,cAAM,gBAAgB,CAAC,UAAyB;AAhLxD;AAiLU,gBAAM,YAAY,MAAM,UAAU,MAAM,WAAW,MAAM;AACzD,gBAAM,WAAW,MAAM,QAAQ,SAAS,CAAC;AAEzC,cAAI,UAAU;AACZ,kBAAM,iBAAiB,SAAS;AAChC,kBAAM,qBAAqB,MAAM;AACjC,kBAAM,mBAAmB,MAAM,WAAW;AAI1C,gBAAI,oBAAoB,oBAAoB;AAC1C,sCAAkB,YAAlB,mBAA2B;AAC3B;AAAA,YACF;AAEA,kBAAM,mBAAmB,qBAAqB,cAAc;AAC5D,kBAAM,mBAAmB,4BAA4B,EAAE,iBAAiB,CAAC;AACzE,kBAAM,QAAQ,iBAAiB;AAAA,cAC7B,CAAC,cAAc,cAAc;AAAA,YAC/B;AACA,gBAAI,WAAW,iBAAiB,MAAM,QAAQ,CAAC,CAAC,GAAG;AACjD,oBAAM,eAAe;AAAA,YACvB,OAAO;AAIL,oCACI,uBAAkB,YAAlB,mBAA2B,WAC3B,uBAAkB,YAAlB,mBAA2B;AAAA,YACjC;AAAA,UACF;AAAA,QACF;AAGA,iBAAS,iBAAiB,WAAW,aAAa;AAClD,eAAO,MAAM,SAAS,oBAAoB,WAAW,aAAa;AAAA,MACpE;AAAA,IACF,GAAG,CAAC,UAAU,2BAA2B,CAAC;AAE1C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,cAAY,MAAM,QAAQ,YAAY,WAAW;AAAA,QAEjD,UAAU;AAAA,QAKT;AAAA,uBACC;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,4BAA4B,MAAM;AAChC,sBAAM,qBAAqB,4BAA4B;AAAA,kBACrD,kBAAkB;AAAA,gBACpB,CAAC;AACD,2BAAW,kBAAkB;AAAA,cAC/B;AAAA;AAAA,UACF;AAAA,UAMF,4CAAC,gCAAW,MAAX,EAAgB,OAAO,cACtB,sDAAC,sBAAmB,KAAK,cAAe,GAAG,eACzC;AAAA,YAAC;AAAA;AAAA,cAEC,QAAQ,CAAC,aAAa,4CAAC,2CAAiB,UAAS;AAAA,cACjD,MAAM,QAAQ;AAAA;AAAA,UAChB,GACF,GACF;AAAA,UACC,aACC;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,4BAA4B,MAAM;AAChC,sBAAM,qBAAqB,4BAA4B;AAAA,kBACrD,kBAAkB;AAAA,gBACpB,CAAC;AACD,2BAAW,kBAAkB;AAAA,cAC/B;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;AAI5B,MAAM,mBAAmB;AAQzB,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC,OAAO,iBAAiB;AACvB,UAAM,EAAE,cAAc,4BAA4B,GAAG,WAAW,IAAI;AACpE,UAAM,cAAU,8CAAwB,kBAAkB,YAAY;AAEtE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,UAAU;AAAA,QACT,GAAG;AAAA,QACJ,KAAK;AAAA,QAEL,UAAU,oBAAS,UAAkB;AAAA,QACrC,SAAS,CAAC,UAAU;AApS5B;AAqSU,cAAI,CAAC;AAAO;AACZ,gBAAM,qBAAqB,MAAM;AACjC,gBAAM,6BAA6B,GAAE,aAAQ,aAAR,mBAAkC;AAAA,YACrE;AAAA;AAEF,cAAI;AAA4B,uCAA2B;AAAA,QAC7D;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAIzB,SAAS,WAAW,YAA8B;AAChD,MAAI,CAAC;AAAO;AACZ,QAAM,2BAA2B,SAAS;AAC1C,SAAO,WAAW,KAAK,CAAC,cAAc;AAEpC,QAAI,cAAc;AAA0B,aAAO;AACnD,cAAU,MAAM;AAChB,WAAO,SAAS,kBAAkB;AAAA,EACpC,CAAC;AACH;AAYA,SAAS,sBAAsB,WAA2B;AACxD,MAAI,CAAC;AAAO,WAAO,CAAC;AACpB,QAAM,gBAAgB;AACtB,QAAM,QAAuB,CAAC;AAC9B,QAAM,SAAS,SAAS,iBAAiB,eAAe,WAAW,cAAc;AAAA,IAC/E,YAAY,CAAC,SAAc;AACzB,YAAM,gBAAgB,KAAK,YAAY,WAAW,KAAK,SAAS;AAChE,UAAI,KAAK,YAAY,KAAK,UAAU;AAAe,eAAO,WAAW;AAIrE,aAAO,KAAK,YAAY,IAAI,WAAW,gBAAgB,WAAW;AAAA,IACpE;AAAA,EACF,CAAC;AACD,SAAO,OAAO,SAAS;AAAG,UAAM,KAAK,OAAO,WAA0B;AAGtE,SAAO;AACT;",
   "names": []
 }

package/dist/esm/ToastProvider.js

@@ -2,7 +2,6 @@ import { jsx } from "react/jsx-runtime";
 import { createCollection } from "@tamagui/collection";
 import { useId } from "@tamagui/core";
 import { createContextScope } from "@tamagui/create-context";
-import { PortalProvider } from "@tamagui/portal";
 import * as React from "react";
 const PROVIDER_NAME = "ToastProvider";
 const [Collection, useCollection, createCollectionScope] = createCollection("Toast");
@@ -25,7 +24,7 @@ const ToastProvider = (props) => {
   const [toastCount, setToastCount] = React.useState(0);
   const isFocusedToastEscapeKeyDownRef = React.useRef(false);
   const isClosePausedRef = React.useRef(false);
-  return /* @__PURE__ */ jsx(PortalProvider, { shouldAddRootHost: false, rootHostName: "default", children: /* @__PURE__ */ jsx(Collection.Provider, { scope: __scopeToast, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Collection.Provider, { scope: __scopeToast, children: /* @__PURE__ */ jsx(
     ToastProviderProvider,
     {
       scope: __scopeToast,
@@ -47,7 +46,7 @@ const ToastProvider = (props) => {
       isClosePausedRef,
       children
     }
-  ) }) });
+  ) });
 };
 ToastProvider.propTypes = {
   label(props) {

package/dist/esm/ToastProvider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ToastProvider.tsx"],
-  "sourcesContent": ["\nimport { createCollection } from '@tamagui/collection'\nimport { TamaguiElement, useId } from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { PortalProvider } from '@tamagui/portal'\nimport * as React from 'react'\n\n\n/* -------------------------------------------------------------------------------------------------\n * ToastProvider\n * -----------------------------------------------------------------------------------------------*/\n\nconst PROVIDER_NAME = 'ToastProvider'\n\nconst [Collection, useCollection, createCollectionScope] =\n  createCollection<TamaguiElement>('Toast')\n\ntype SwipeDirection = 'vertical' | 'up' | 'down' | 'horizontal' | 'left' | 'right'\ntype ToastProviderContextValue = {\n  id: string\n  label: string\n  duration: number\n  swipeDirection: SwipeDirection\n  swipeThreshold: number\n  toastCount: number\n  viewport: TamaguiElement | null\n  onViewportChange(viewport: TamaguiElement): void\n  onToastAdd(): void\n  onToastRemove(): void\n  isFocusedToastEscapeKeyDownRef: React.MutableRefObject<boolean>\n  isClosePausedRef: React.MutableRefObject<boolean>\n}\n\ntype ScopedProps<P> = P & { __scopeToast?: Scope }\nconst [createToastContext, createToastScope] = createContextScope('Toast', [\n  createCollectionScope,\n])\nconst [ToastProviderProvider, useToastProviderContext] =\n  createToastContext<ToastProviderContextValue>(PROVIDER_NAME)\n\ninterface ToastProviderProps {\n  children?: React.ReactNode\n  /**\n   * An author-localized label for each toast. Used to help screen reader users\n   * associate the interruption with a toast.\n   * @defaultValue 'Notification'\n   */\n  label?: string\n  /**\n   * Time in milliseconds that each toast should remain visible for.\n   * @defaultValue 5000\n   */\n  duration?: number\n  /**\n   * Direction of pointer swipe that should close the toast.\n   * @defaultValue 'right'\n   */\n  swipeDirection?: SwipeDirection\n  /**\n   * Distance in pixels that the swipe must pass before a close is triggered.\n   * @defaultValue 50\n   */\n  swipeThreshold?: number\n  /**\n   * @defaultValue unique generated identifier\n   */\n  id?: string\n}\n\nconst ToastProvider: React.FC<ToastProviderProps> = (\n  props: ScopedProps<ToastProviderProps>\n) => {\n  const {\n    __scopeToast,\n    id: providedId,\n    label = 'Notification',\n    duration = 5000,\n    swipeDirection = 'right',\n    swipeThreshold = 50,\n    children,\n  } = props\n  const id = providedId ?? useId()\n  const [viewport, setViewport] = React.useState<TamaguiElement | null>(null)\n  const [toastCount, setToastCount] = React.useState(0)\n  const isFocusedToastEscapeKeyDownRef = React.useRef(false)\n  const isClosePausedRef = React.useRef(false)\n\n  return (\n    <PortalProvider shouldAddRootHost={false} rootHostName=\"default\">\n      <Collection.Provider scope={__scopeToast}>\n        <ToastProviderProvider\n          scope={__scopeToast}\n          id={id}\n          label={label}\n          duration={duration}\n          swipeDirection={swipeDirection}\n          swipeThreshold={swipeThreshold}\n          toastCount={toastCount}\n          viewport={viewport}\n          onViewportChange={setViewport}\n          onToastAdd={React.useCallback(() => {\n            setToastCount((prevCount) => prevCount + 1)\n          }, [])}\n          onToastRemove={React.useCallback(() => {\n            setToastCount((prevCount) => prevCount - 1)\n          }, [])}\n          isFocusedToastEscapeKeyDownRef={isFocusedToastEscapeKeyDownRef}\n          isClosePausedRef={isClosePausedRef}\n        >\n          {children}\n        </ToastProviderProvider>\n      </Collection.Provider>\n    </PortalProvider>\n  )\n}\n\nToastProvider.propTypes = {\n  label(props) {\n    if (props.label && typeof props.label === 'string' && !props.label.trim()) {\n      const error = `Invalid prop \\`label\\` supplied to \\`${PROVIDER_NAME}\\`. Expected non-empty \\`string\\`.`\n      return new Error(error)\n    }\n    return null\n  },\n}\n\nToastProvider.displayName = PROVIDER_NAME\n\nexport {\n  Collection, ToastProvider, createToastContext, createToastScope, useCollection, useToastProviderContext\n}\nexport type { ScopedProps, SwipeDirection, ToastProviderProps }\n\n"],
-  "mappings": "AA2FQ;AA1FR,SAAS,wBAAwB;AACjC,SAAyB,aAAa;AAEtC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,YAAY,WAAW;AAOvB,MAAM,gBAAgB;AAEtB,MAAM,CAAC,YAAY,eAAe,qBAAqB,IACrD,iBAAiC,OAAO;AAmB1C,MAAM,CAAC,oBAAoB,gBAAgB,IAAI,mBAAmB,SAAS;AAAA,EACzE;AACF,CAAC;AACD,MAAM,CAAC,uBAAuB,uBAAuB,IACnD,mBAA8C,aAAa;AA+B7D,MAAM,gBAA8C,CAClD,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB;AAAA,EACF,IAAI;AACJ,QAAM,KAAK,cAAc,MAAM;AAC/B,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAgC,IAAI;AAC1E,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AACpD,QAAM,iCAAiC,MAAM,OAAO,KAAK;AACzD,QAAM,mBAAmB,MAAM,OAAO,KAAK;AAE3C,SACE,oBAAC,kBAAe,mBAAmB,OAAO,cAAa,WACrD,8BAAC,WAAW,UAAX,EAAoB,OAAO,cAC1B;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB,YAAY,MAAM,YAAY,MAAM;AAClC,sBAAc,CAAC,cAAc,YAAY,CAAC;AAAA,MAC5C,GAAG,CAAC,CAAC;AAAA,MACL,eAAe,MAAM,YAAY,MAAM;AACrC,sBAAc,CAAC,cAAc,YAAY,CAAC;AAAA,MAC5C,GAAG,CAAC,CAAC;AAAA,MACL;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH,GACF,GACF;AAEJ;AAEA,cAAc,YAAY;AAAA,EACxB,MAAM,OAAO;AACX,QAAI,MAAM,SAAS,OAAO,MAAM,UAAU,YAAY,CAAC,MAAM,MAAM,KAAK,GAAG;AACzE,YAAM,QAAQ,wCAAwC;AACtD,aAAO,IAAI,MAAM,KAAK;AAAA,IACxB;AACA,WAAO;AAAA,EACT;AACF;AAEA,cAAc,cAAc;",
+  "sourcesContent": ["import { createCollection } from '@tamagui/collection'\nimport { TamaguiElement, useId } from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { PortalProvider } from '@tamagui/portal'\nimport * as React from 'react'\n\n/* -------------------------------------------------------------------------------------------------\n * ToastProvider\n * -----------------------------------------------------------------------------------------------*/\n\nconst PROVIDER_NAME = 'ToastProvider'\n\nconst [Collection, useCollection, createCollectionScope] =\n  createCollection<TamaguiElement>('Toast')\n\ntype SwipeDirection = 'vertical' | 'up' | 'down' | 'horizontal' | 'left' | 'right'\ntype ToastProviderContextValue = {\n  id: string\n  label: string\n  duration: number\n  swipeDirection: SwipeDirection\n  swipeThreshold: number\n  toastCount: number\n  viewport: TamaguiElement | null\n  onViewportChange(viewport: TamaguiElement): void\n  onToastAdd(): void\n  onToastRemove(): void\n  isFocusedToastEscapeKeyDownRef: React.MutableRefObject<boolean>\n  isClosePausedRef: React.MutableRefObject<boolean>\n}\n\ntype ScopedProps<P> = P & { __scopeToast?: Scope }\nconst [createToastContext, createToastScope] = createContextScope('Toast', [\n  createCollectionScope,\n])\nconst [ToastProviderProvider, useToastProviderContext] =\n  createToastContext<ToastProviderContextValue>(PROVIDER_NAME)\n\ninterface ToastProviderProps {\n  children?: React.ReactNode\n  /**\n   * An author-localized label for each toast. Used to help screen reader users\n   * associate the interruption with a toast.\n   * @defaultValue 'Notification'\n   */\n  label?: string\n  /**\n   * Time in milliseconds that each toast should remain visible for.\n   * @defaultValue 5000\n   */\n  duration?: number\n  /**\n   * Direction of pointer swipe that should close the toast.\n   * @defaultValue 'right'\n   */\n  swipeDirection?: SwipeDirection\n  /**\n   * Distance in pixels that the swipe must pass before a close is triggered.\n   * @defaultValue 50\n   */\n  swipeThreshold?: number\n  /**\n   * @defaultValue unique generated identifier\n   */\n  id?: string\n}\n\nconst ToastProvider: React.FC<ToastProviderProps> = (\n  props: ScopedProps<ToastProviderProps>\n) => {\n  const {\n    __scopeToast,\n    id: providedId,\n    label = 'Notification',\n    duration = 5000,\n    swipeDirection = 'right',\n    swipeThreshold = 50,\n    children,\n  } = props\n  const id = providedId ?? useId()\n  const [viewport, setViewport] = React.useState<TamaguiElement | null>(null)\n  const [toastCount, setToastCount] = React.useState(0)\n  const isFocusedToastEscapeKeyDownRef = React.useRef(false)\n  const isClosePausedRef = React.useRef(false)\n\n  return (\n    <Collection.Provider scope={__scopeToast}>\n      <ToastProviderProvider\n        scope={__scopeToast}\n        id={id}\n        label={label}\n        duration={duration}\n        swipeDirection={swipeDirection}\n        swipeThreshold={swipeThreshold}\n        toastCount={toastCount}\n        viewport={viewport}\n        onViewportChange={setViewport}\n        onToastAdd={React.useCallback(() => {\n          setToastCount((prevCount) => prevCount + 1)\n        }, [])}\n        onToastRemove={React.useCallback(() => {\n          setToastCount((prevCount) => prevCount - 1)\n        }, [])}\n        isFocusedToastEscapeKeyDownRef={isFocusedToastEscapeKeyDownRef}\n        isClosePausedRef={isClosePausedRef}\n      >\n        {children}\n      </ToastProviderProvider>\n    </Collection.Provider>\n  )\n}\n\nToastProvider.propTypes = {\n  label(props) {\n    if (props.label && typeof props.label === 'string' && !props.label.trim()) {\n      const error = `Invalid prop \\`label\\` supplied to \\`${PROVIDER_NAME}\\`. Expected non-empty \\`string\\`.`\n      return new Error(error)\n    }\n    return null\n  },\n}\n\nToastProvider.displayName = PROVIDER_NAME\n\nexport {\n  Collection,\n  ToastProvider,\n  createToastContext,\n  createToastScope,\n  useCollection,\n  useToastProviderContext,\n}\nexport type { ScopedProps, SwipeDirection, ToastProviderProps }\n"],
+  "mappings": "AAwFM;AAxFN,SAAS,wBAAwB;AACjC,SAAyB,aAAa;AAEtC,SAAS,0BAA0B;AAEnC,YAAY,WAAW;AAMvB,MAAM,gBAAgB;AAEtB,MAAM,CAAC,YAAY,eAAe,qBAAqB,IACrD,iBAAiC,OAAO;AAmB1C,MAAM,CAAC,oBAAoB,gBAAgB,IAAI,mBAAmB,SAAS;AAAA,EACzE;AACF,CAAC;AACD,MAAM,CAAC,uBAAuB,uBAAuB,IACnD,mBAA8C,aAAa;AA+B7D,MAAM,gBAA8C,CAClD,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB;AAAA,EACF,IAAI;AACJ,QAAM,KAAK,cAAc,MAAM;AAC/B,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAgC,IAAI;AAC1E,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AACpD,QAAM,iCAAiC,MAAM,OAAO,KAAK;AACzD,QAAM,mBAAmB,MAAM,OAAO,KAAK;AAE3C,SACE,oBAAC,WAAW,UAAX,EAAoB,OAAO,cAC1B;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB,YAAY,MAAM,YAAY,MAAM;AAClC,sBAAc,CAAC,cAAc,YAAY,CAAC;AAAA,MAC5C,GAAG,CAAC,CAAC;AAAA,MACL,eAAe,MAAM,YAAY,MAAM;AACrC,sBAAc,CAAC,cAAc,YAAY,CAAC;AAAA,MAC5C,GAAG,CAAC,CAAC;AAAA,MACL;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,cAAc,YAAY;AAAA,EACxB,MAAM,OAAO;AACX,QAAI,MAAM,SAAS,OAAO,MAAM,UAAU,YAAY,CAAC,MAAM,MAAM,KAAK,GAAG;AACzE,YAAM,QAAQ,wCAAwC;AACtD,aAAO,IAAI,MAAM,KAAK;AAAA,IACxB;AACA,WAAO;AAAA,EACT;AACF;AAEA,cAAc,cAAc;",
   "names": []
 }

package/dist/esm/ToastProvider.mjs

@@ -2,7 +2,6 @@ import { jsx } from "react/jsx-runtime";
 import { createCollection } from "@tamagui/collection";
 import { useId } from "@tamagui/core";
 import { createContextScope } from "@tamagui/create-context";
-import { PortalProvider } from "@tamagui/portal";
 import * as React from "react";
 const PROVIDER_NAME = "ToastProvider";
 const [Collection, useCollection, createCollectionScope] = createCollection("Toast");
@@ -25,7 +24,7 @@ const ToastProvider = (props) => {
   const [toastCount, setToastCount] = React.useState(0);
   const isFocusedToastEscapeKeyDownRef = React.useRef(false);
   const isClosePausedRef = React.useRef(false);
-  return /* @__PURE__ */ jsx(PortalProvider, { shouldAddRootHost: false, rootHostName: "default", children: /* @__PURE__ */ jsx(Collection.Provider, { scope: __scopeToast, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Collection.Provider, { scope: __scopeToast, children: /* @__PURE__ */ jsx(
     ToastProviderProvider,
     {
       scope: __scopeToast,
@@ -47,7 +46,7 @@ const ToastProvider = (props) => {
       isClosePausedRef,
       children
     }
-  ) }) });
+  ) });
 };
 ToastProvider.propTypes = {
   label(props) {

package/dist/esm/ToastProvider.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ToastProvider.tsx"],
-  "sourcesContent": ["\nimport { createCollection } from '@tamagui/collection'\nimport { TamaguiElement, useId } from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { PortalProvider } from '@tamagui/portal'\nimport * as React from 'react'\n\n\n/* -------------------------------------------------------------------------------------------------\n * ToastProvider\n * -----------------------------------------------------------------------------------------------*/\n\nconst PROVIDER_NAME = 'ToastProvider'\n\nconst [Collection, useCollection, createCollectionScope] =\n  createCollection<TamaguiElement>('Toast')\n\ntype SwipeDirection = 'vertical' | 'up' | 'down' | 'horizontal' | 'left' | 'right'\ntype ToastProviderContextValue = {\n  id: string\n  label: string\n  duration: number\n  swipeDirection: SwipeDirection\n  swipeThreshold: number\n  toastCount: number\n  viewport: TamaguiElement | null\n  onViewportChange(viewport: TamaguiElement): void\n  onToastAdd(): void\n  onToastRemove(): void\n  isFocusedToastEscapeKeyDownRef: React.MutableRefObject<boolean>\n  isClosePausedRef: React.MutableRefObject<boolean>\n}\n\ntype ScopedProps<P> = P & { __scopeToast?: Scope }\nconst [createToastContext, createToastScope] = createContextScope('Toast', [\n  createCollectionScope,\n])\nconst [ToastProviderProvider, useToastProviderContext] =\n  createToastContext<ToastProviderContextValue>(PROVIDER_NAME)\n\ninterface ToastProviderProps {\n  children?: React.ReactNode\n  /**\n   * An author-localized label for each toast. Used to help screen reader users\n   * associate the interruption with a toast.\n   * @defaultValue 'Notification'\n   */\n  label?: string\n  /**\n   * Time in milliseconds that each toast should remain visible for.\n   * @defaultValue 5000\n   */\n  duration?: number\n  /**\n   * Direction of pointer swipe that should close the toast.\n   * @defaultValue 'right'\n   */\n  swipeDirection?: SwipeDirection\n  /**\n   * Distance in pixels that the swipe must pass before a close is triggered.\n   * @defaultValue 50\n   */\n  swipeThreshold?: number\n  /**\n   * @defaultValue unique generated identifier\n   */\n  id?: string\n}\n\nconst ToastProvider: React.FC<ToastProviderProps> = (\n  props: ScopedProps<ToastProviderProps>\n) => {\n  const {\n    __scopeToast,\n    id: providedId,\n    label = 'Notification',\n    duration = 5000,\n    swipeDirection = 'right',\n    swipeThreshold = 50,\n    children,\n  } = props\n  const id = providedId ?? useId()\n  const [viewport, setViewport] = React.useState<TamaguiElement | null>(null)\n  const [toastCount, setToastCount] = React.useState(0)\n  const isFocusedToastEscapeKeyDownRef = React.useRef(false)\n  const isClosePausedRef = React.useRef(false)\n\n  return (\n    <PortalProvider shouldAddRootHost={false} rootHostName=\"default\">\n      <Collection.Provider scope={__scopeToast}>\n        <ToastProviderProvider\n          scope={__scopeToast}\n          id={id}\n          label={label}\n          duration={duration}\n          swipeDirection={swipeDirection}\n          swipeThreshold={swipeThreshold}\n          toastCount={toastCount}\n          viewport={viewport}\n          onViewportChange={setViewport}\n          onToastAdd={React.useCallback(() => {\n            setToastCount((prevCount) => prevCount + 1)\n          }, [])}\n          onToastRemove={React.useCallback(() => {\n            setToastCount((prevCount) => prevCount - 1)\n          }, [])}\n          isFocusedToastEscapeKeyDownRef={isFocusedToastEscapeKeyDownRef}\n          isClosePausedRef={isClosePausedRef}\n        >\n          {children}\n        </ToastProviderProvider>\n      </Collection.Provider>\n    </PortalProvider>\n  )\n}\n\nToastProvider.propTypes = {\n  label(props) {\n    if (props.label && typeof props.label === 'string' && !props.label.trim()) {\n      const error = `Invalid prop \\`label\\` supplied to \\`${PROVIDER_NAME}\\`. Expected non-empty \\`string\\`.`\n      return new Error(error)\n    }\n    return null\n  },\n}\n\nToastProvider.displayName = PROVIDER_NAME\n\nexport {\n  Collection, ToastProvider, createToastContext, createToastScope, useCollection, useToastProviderContext\n}\nexport type { ScopedProps, SwipeDirection, ToastProviderProps }\n\n"],
-  "mappings": "AA2FQ;AA1FR,SAAS,wBAAwB;AACjC,SAAyB,aAAa;AAEtC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,YAAY,WAAW;AAOvB,MAAM,gBAAgB;AAEtB,MAAM,CAAC,YAAY,eAAe,qBAAqB,IACrD,iBAAiC,OAAO;AAmB1C,MAAM,CAAC,oBAAoB,gBAAgB,IAAI,mBAAmB,SAAS;AAAA,EACzE;AACF,CAAC;AACD,MAAM,CAAC,uBAAuB,uBAAuB,IACnD,mBAA8C,aAAa;AA+B7D,MAAM,gBAA8C,CAClD,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB;AAAA,EACF,IAAI;AACJ,QAAM,KAAK,cAAc,MAAM;AAC/B,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAgC,IAAI;AAC1E,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AACpD,QAAM,iCAAiC,MAAM,OAAO,KAAK;AACzD,QAAM,mBAAmB,MAAM,OAAO,KAAK;AAE3C,SACE,oBAAC,kBAAe,mBAAmB,OAAO,cAAa,WACrD,8BAAC,WAAW,UAAX,EAAoB,OAAO,cAC1B;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB,YAAY,MAAM,YAAY,MAAM;AAClC,sBAAc,CAAC,cAAc,YAAY,CAAC;AAAA,MAC5C,GAAG,CAAC,CAAC;AAAA,MACL,eAAe,MAAM,YAAY,MAAM;AACrC,sBAAc,CAAC,cAAc,YAAY,CAAC;AAAA,MAC5C,GAAG,CAAC,CAAC;AAAA,MACL;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH,GACF,GACF;AAEJ;AAEA,cAAc,YAAY;AAAA,EACxB,MAAM,OAAO;AACX,QAAI,MAAM,SAAS,OAAO,MAAM,UAAU,YAAY,CAAC,MAAM,MAAM,KAAK,GAAG;AACzE,YAAM,QAAQ,wCAAwC;AACtD,aAAO,IAAI,MAAM,KAAK;AAAA,IACxB;AACA,WAAO;AAAA,EACT;AACF;AAEA,cAAc,cAAc;",
+  "sourcesContent": ["import { createCollection } from '@tamagui/collection'\nimport { TamaguiElement, useId } from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { PortalProvider } from '@tamagui/portal'\nimport * as React from 'react'\n\n/* -------------------------------------------------------------------------------------------------\n * ToastProvider\n * -----------------------------------------------------------------------------------------------*/\n\nconst PROVIDER_NAME = 'ToastProvider'\n\nconst [Collection, useCollection, createCollectionScope] =\n  createCollection<TamaguiElement>('Toast')\n\ntype SwipeDirection = 'vertical' | 'up' | 'down' | 'horizontal' | 'left' | 'right'\ntype ToastProviderContextValue = {\n  id: string\n  label: string\n  duration: number\n  swipeDirection: SwipeDirection\n  swipeThreshold: number\n  toastCount: number\n  viewport: TamaguiElement | null\n  onViewportChange(viewport: TamaguiElement): void\n  onToastAdd(): void\n  onToastRemove(): void\n  isFocusedToastEscapeKeyDownRef: React.MutableRefObject<boolean>\n  isClosePausedRef: React.MutableRefObject<boolean>\n}\n\ntype ScopedProps<P> = P & { __scopeToast?: Scope }\nconst [createToastContext, createToastScope] = createContextScope('Toast', [\n  createCollectionScope,\n])\nconst [ToastProviderProvider, useToastProviderContext] =\n  createToastContext<ToastProviderContextValue>(PROVIDER_NAME)\n\ninterface ToastProviderProps {\n  children?: React.ReactNode\n  /**\n   * An author-localized label for each toast. Used to help screen reader users\n   * associate the interruption with a toast.\n   * @defaultValue 'Notification'\n   */\n  label?: string\n  /**\n   * Time in milliseconds that each toast should remain visible for.\n   * @defaultValue 5000\n   */\n  duration?: number\n  /**\n   * Direction of pointer swipe that should close the toast.\n   * @defaultValue 'right'\n   */\n  swipeDirection?: SwipeDirection\n  /**\n   * Distance in pixels that the swipe must pass before a close is triggered.\n   * @defaultValue 50\n   */\n  swipeThreshold?: number\n  /**\n   * @defaultValue unique generated identifier\n   */\n  id?: string\n}\n\nconst ToastProvider: React.FC<ToastProviderProps> = (\n  props: ScopedProps<ToastProviderProps>\n) => {\n  const {\n    __scopeToast,\n    id: providedId,\n    label = 'Notification',\n    duration = 5000,\n    swipeDirection = 'right',\n    swipeThreshold = 50,\n    children,\n  } = props\n  const id = providedId ?? useId()\n  const [viewport, setViewport] = React.useState<TamaguiElement | null>(null)\n  const [toastCount, setToastCount] = React.useState(0)\n  const isFocusedToastEscapeKeyDownRef = React.useRef(false)\n  const isClosePausedRef = React.useRef(false)\n\n  return (\n    <Collection.Provider scope={__scopeToast}>\n      <ToastProviderProvider\n        scope={__scopeToast}\n        id={id}\n        label={label}\n        duration={duration}\n        swipeDirection={swipeDirection}\n        swipeThreshold={swipeThreshold}\n        toastCount={toastCount}\n        viewport={viewport}\n        onViewportChange={setViewport}\n        onToastAdd={React.useCallback(() => {\n          setToastCount((prevCount) => prevCount + 1)\n        }, [])}\n        onToastRemove={React.useCallback(() => {\n          setToastCount((prevCount) => prevCount - 1)\n        }, [])}\n        isFocusedToastEscapeKeyDownRef={isFocusedToastEscapeKeyDownRef}\n        isClosePausedRef={isClosePausedRef}\n      >\n        {children}\n      </ToastProviderProvider>\n    </Collection.Provider>\n  )\n}\n\nToastProvider.propTypes = {\n  label(props) {\n    if (props.label && typeof props.label === 'string' && !props.label.trim()) {\n      const error = `Invalid prop \\`label\\` supplied to \\`${PROVIDER_NAME}\\`. Expected non-empty \\`string\\`.`\n      return new Error(error)\n    }\n    return null\n  },\n}\n\nToastProvider.displayName = PROVIDER_NAME\n\nexport {\n  Collection,\n  ToastProvider,\n  createToastContext,\n  createToastScope,\n  useCollection,\n  useToastProviderContext,\n}\nexport type { ScopedProps, SwipeDirection, ToastProviderProps }\n"],
+  "mappings": "AAwFM;AAxFN,SAAS,wBAAwB;AACjC,SAAyB,aAAa;AAEtC,SAAS,0BAA0B;AAEnC,YAAY,WAAW;AAMvB,MAAM,gBAAgB;AAEtB,MAAM,CAAC,YAAY,eAAe,qBAAqB,IACrD,iBAAiC,OAAO;AAmB1C,MAAM,CAAC,oBAAoB,gBAAgB,IAAI,mBAAmB,SAAS;AAAA,EACzE;AACF,CAAC;AACD,MAAM,CAAC,uBAAuB,uBAAuB,IACnD,mBAA8C,aAAa;AA+B7D,MAAM,gBAA8C,CAClD,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB;AAAA,EACF,IAAI;AACJ,QAAM,KAAK,cAAc,MAAM;AAC/B,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAgC,IAAI;AAC1E,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AACpD,QAAM,iCAAiC,MAAM,OAAO,KAAK;AACzD,QAAM,mBAAmB,MAAM,OAAO,KAAK;AAE3C,SACE,oBAAC,WAAW,UAAX,EAAoB,OAAO,cAC1B;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB,YAAY,MAAM,YAAY,MAAM;AAClC,sBAAc,CAAC,cAAc,YAAY,CAAC;AAAA,MAC5C,GAAG,CAAC,CAAC;AAAA,MACL,eAAe,MAAM,YAAY,MAAM;AACrC,sBAAc,CAAC,cAAc,YAAY,CAAC;AAAA,MAC5C,GAAG,CAAC,CAAC;AAAA,MACL;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,cAAc,YAAY;AAAA,EACxB,MAAM,OAAO;AACX,QAAI,MAAM,SAAS,OAAO,MAAM,UAAU,YAAY,CAAC,MAAM,MAAM,KAAK,GAAG;AACzE,YAAM,QAAQ,wCAAwC;AACtD,aAAO,IAAI,MAAM,KAAK;AAAA,IACxB;AACA,WAAO;AAAA,EACT;AACF;AAEA,cAAc,cAAc;",
   "names": []
 }

package/dist/esm/ToastViewport.js

@@ -56,6 +56,8 @@ const ToastViewport = React.forwardRef(
     React.useEffect(() => {
       if (!isWeb)
         return;
+      if (context.toastCount === 0)
+        return;
       const handleKeyDown = (event) => {
         var _a;
         const isHotkeyPressed = hotkey.every(
@@ -63,7 +65,6 @@ const ToastViewport = React.forwardRef(
         );
         if (isHotkeyPressed)
           (_a = ref.current) == null ? void 0 : _a.focus();
-        console.log(isHotkeyPressed);
       };
       document.addEventListener("keydown", handleKeyDown);
       return () => {
@@ -73,6 +74,8 @@ const ToastViewport = React.forwardRef(
     React.useEffect(() => {
       if (!isWeb)
         return;
+      if (context.toastCount === 0)
+        return;
       const wrapper = wrapperRef.current;
       const viewport = ref.current;
       if (hasToasts && wrapper && viewport) {
@@ -133,6 +136,8 @@ const ToastViewport = React.forwardRef(
     React.useEffect(() => {
       if (!isWeb)
         return;
+      if (context.toastCount === 0)
+        return;
       const viewport = ref.current;
       if (viewport) {
         const handleKeyDown = (event) => {

package/dist/esm/ToastViewport.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ToastViewport.tsx"],
-  "sourcesContent": ["import { AnimatePresence } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { GetProps, TamaguiElement, isWeb, styled } from '@tamagui/core'\nimport { PortalHost } from '@tamagui/portal'\nimport { YStack } from '@tamagui/stacks'\nimport { VisuallyHidden } from '@tamagui/visually-hidden'\nimport * as React from 'react'\n\nimport {\n  Collection,\n  ScopedProps,\n  useCollection,\n  useToastProviderContext,\n} from './ToastProvider'\n\nconst VIEWPORT_NAME = 'ToastViewport'\nconst VIEWPORT_DEFAULT_HOTKEY = ['F8']\nconst VIEWPORT_PAUSE = 'toast.viewportPause'\nconst VIEWPORT_RESUME = 'toast.viewportResume'\n\nconst ToastViewportWrapperFrame = styled(YStack, {\n  name: 'ViewportWrapper',\n  pointerEvents: 'box-none',\n  top: 0,\n  bottom: 0,\n  left: 0,\n  right: 0,\n  // @ts-ignore\n  position: isWeb ? 'fixed' : 'absolute',\n  maxWidth: '100%',\n  tabIndex: 0,\n  zIndex: 100000,\n})\n\nconst ToastViewportFrame = styled(YStack, {\n  name: VIEWPORT_NAME,\n  pointerEvents: 'box-none',\n  // @ts-ignore\n  position: isWeb ? 'fixed' : 'absolute',\n  maxWidth: '100%',\n})\ntype ToastViewportFrameProps = GetProps<typeof ToastViewportFrame>\ntype ToastViewportProps = ToastViewportFrameProps & {\n  /**\n   * The keys to use as the keyboard shortcut that will move focus to the toast viewport.\n   * @defaultValue ['F8']\n   */\n  hotkey?: string[]\n  /**\n   * An author-localized label for the toast viewport to provide context for screen reader users\n   * when navigating page landmarks. The available `{hotkey}` placeholder will be replaced for you.\n   * @defaultValue 'Notifications ({hotkey})'\n   */\n  label?: string\n  /**\n   * Used to reference the viewport if you want to have multiple viewports in the same provider.\n   */\n  name?: string\n}\n\nconst ToastViewport = React.forwardRef<HTMLDivElement, ToastViewportProps>(\n  (props: ScopedProps<ToastViewportProps>, forwardedRef) => {\n    const {\n      __scopeToast,\n      hotkey = VIEWPORT_DEFAULT_HOTKEY,\n      label = 'Notifications ({hotkey})',\n      name,\n      ...viewportProps\n    } = props\n    const context = useToastProviderContext(VIEWPORT_NAME, __scopeToast)\n    const getItems = useCollection(__scopeToast)\n    const headFocusProxyRef = React.useRef<FocusProxyElement>(null)\n    const tailFocusProxyRef = React.useRef<FocusProxyElement>(null)\n    const wrapperRef = React.useRef<HTMLDivElement>(null)\n    const ref = React.useRef<HTMLDivElement>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange)\n    const hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, '')\n    const hasToasts = context.toastCount > 0\n\n    React.useEffect(() => {\n      if (!isWeb) return\n      const handleKeyDown = (event: KeyboardEvent) => {\n        // we use `event.code` as it is consistent regardless of meta keys that were pressed.\n        // for example, `event.key` for `Control+Alt+t` is `\u2020` and `t !== \u2020`\n        const isHotkeyPressed = hotkey.every(\n          (key) => (event as any)[key] || event.code === key\n        )\n        if (isHotkeyPressed) ref.current?.focus()\n        console.log(isHotkeyPressed)\n      }\n      document.addEventListener('keydown', handleKeyDown)\n      return () => {\n        document.removeEventListener('keydown', handleKeyDown)\n      }\n    }, [hotkey])\n\n    React.useEffect(() => {\n      if (!isWeb) return\n      const wrapper = wrapperRef.current\n      const viewport = ref.current\n      if (hasToasts && wrapper && viewport) {\n        const handlePause = () => {\n          if (!context.isClosePausedRef.current) {\n            const pauseEvent = new CustomEvent(VIEWPORT_PAUSE)\n            viewport.dispatchEvent(pauseEvent)\n            context.isClosePausedRef.current = true\n          }\n        }\n\n        const handleResume = () => {\n          if (context.isClosePausedRef.current) {\n            const resumeEvent = new CustomEvent(VIEWPORT_RESUME)\n            viewport.dispatchEvent(resumeEvent)\n            context.isClosePausedRef.current = false\n          }\n        }\n\n        const handleFocusOutResume = (event: FocusEvent) => {\n          const isFocusMovingOutside = !wrapper.contains(\n            event.relatedTarget as HTMLElement\n          )\n          if (isFocusMovingOutside) handleResume()\n        }\n\n        const handlePointerLeaveResume = () => {\n          const isFocusInside = wrapper.contains(document.activeElement)\n          if (!isFocusInside) handleResume()\n        }\n        // Toasts are not in the viewport React tree so we need to bind DOM events\n\n        wrapper.addEventListener('focusin', handlePause)\n        wrapper.addEventListener('focusout', handleFocusOutResume)\n        wrapper.addEventListener('pointermove', handlePause)\n        wrapper.addEventListener('pointerleave', handlePointerLeaveResume)\n        window.addEventListener('blur', handlePause)\n        window.addEventListener('focus', handleResume)\n        return () => {\n          wrapper.removeEventListener('focusin', handlePause)\n          wrapper.removeEventListener('focusout', handleFocusOutResume)\n          wrapper.removeEventListener('pointermove', handlePause)\n          wrapper.removeEventListener('pointerleave', handlePointerLeaveResume)\n          window.removeEventListener('blur', handlePause)\n          window.removeEventListener('focus', handleResume)\n        }\n      }\n    }, [hasToasts, context.isClosePausedRef])\n\n    const getSortedTabbableCandidates = React.useCallback(\n      ({ tabbingDirection }: { tabbingDirection: 'forwards' | 'backwards' }) => {\n        const toastItems = getItems()\n        const tabbableCandidates = toastItems.map((toastItem) => {\n          const toastNode = toastItem.ref.current!\n          const toastTabbableCandidates = [toastNode, ...getTabbableCandidates(toastNode)]\n          return tabbingDirection === 'forwards'\n            ? toastTabbableCandidates\n            : toastTabbableCandidates.reverse()\n        })\n        return (\n          tabbingDirection === 'forwards'\n            ? tabbableCandidates.reverse()\n            : tabbableCandidates\n        ).flat()\n      },\n      [getItems]\n    )\n\n    React.useEffect(() => {\n      if (!isWeb) return\n      const viewport = ref.current\n      // We programmatically manage tabbing as we are unable to influence\n      // the source order with portals, this allows us to reverse the\n      // tab order so that it runs from most recent toast to least\n      if (viewport) {\n        const handleKeyDown = (event: KeyboardEvent) => {\n          const isMetaKey = event.altKey || event.ctrlKey || event.metaKey\n          const isTabKey = event.key === 'Tab' && !isMetaKey\n\n          if (isTabKey) {\n            const focusedElement = document.activeElement\n            const isTabbingBackwards = event.shiftKey\n            const targetIsViewport = event.target === viewport\n\n            // If we're back tabbing after jumping to the viewport then we simply\n            // proxy focus out to the preceding document\n            if (targetIsViewport && isTabbingBackwards) {\n              headFocusProxyRef.current?.focus()\n              return\n            }\n\n            const tabbingDirection = isTabbingBackwards ? 'backwards' : 'forwards'\n            const sortedCandidates = getSortedTabbableCandidates({ tabbingDirection })\n            const index = sortedCandidates.findIndex(\n              (candidate) => candidate === focusedElement\n            )\n            if (focusFirst(sortedCandidates.slice(index + 1))) {\n              event.preventDefault()\n            } else {\n              // If we can't focus that means we're at the edges so we\n              // proxy to the corresponding exit point and let the browser handle\n              // tab/shift+tab keypress and implicitly pass focus to the next valid element in the document\n              isTabbingBackwards\n                ? headFocusProxyRef.current?.focus()\n                : tailFocusProxyRef.current?.focus()\n            }\n          }\n        }\n\n        // Toasts are not in the viewport React tree so we need to bind DOM events\n        viewport.addEventListener('keydown', handleKeyDown)\n        return () => viewport.removeEventListener('keydown', handleKeyDown)\n      }\n    }, [getItems, getSortedTabbableCandidates])\n\n    return (\n      <ToastViewportWrapperFrame\n        ref={wrapperRef}\n        role=\"region\"\n        aria-label={label.replace('{hotkey}', hotkeyLabel)}\n        // // Ensure virtual cursor from landmarks menus triggers focus/blur for pause/resume\n        tabIndex={-1}\n        // // incase list has size when empty (e.g. padding), we remove pointer events so\n        // // it doesn't prevent interactions with page elements that it overlays\n        // pointerEvents={hasToasts ? undefined : 'none'}\n      >\n        {hasToasts && (\n          <FocusProxy\n            ref={headFocusProxyRef}\n            onFocusFromOutsideViewport={() => {\n              const tabbableCandidates = getSortedTabbableCandidates({\n                tabbingDirection: 'forwards',\n              })\n              focusFirst(tabbableCandidates)\n            }}\n          />\n        )}\n        {/**\n         * tabindex on the the list so that it can be focused when items are removed. we focus\n         * the list instead of the viewport so it announces number of items remaining.\n         */}\n        <Collection.Slot scope={__scopeToast}>\n          <ToastViewportFrame ref={composedRefs} {...viewportProps}>\n            <PortalHost\n              // TODO: user should be able to control this prop to customize AnimatePresence\n              render={(children) => <AnimatePresence>{children}</AnimatePresence>}\n              name={name ?? 'default'}\n            />\n          </ToastViewportFrame>\n        </Collection.Slot>\n        {hasToasts && (\n          <FocusProxy\n            ref={tailFocusProxyRef}\n            onFocusFromOutsideViewport={() => {\n              const tabbableCandidates = getSortedTabbableCandidates({\n                tabbingDirection: 'backwards',\n              })\n              focusFirst(tabbableCandidates)\n            }}\n          />\n        )}\n      </ToastViewportWrapperFrame>\n    )\n  }\n)\n\nToastViewport.displayName = VIEWPORT_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst FOCUS_PROXY_NAME = 'ToastFocusProxy'\n\ntype FocusProxyElement = React.ElementRef<typeof VisuallyHidden>\ntype VisuallyHiddenProps = GetProps<typeof VisuallyHidden>\ninterface FocusProxyProps extends VisuallyHiddenProps {\n  onFocusFromOutsideViewport(): void\n}\n\nconst FocusProxy = React.forwardRef<FocusProxyElement, ScopedProps<FocusProxyProps>>(\n  (props, forwardedRef) => {\n    const { __scopeToast, onFocusFromOutsideViewport, ...proxyProps } = props\n    const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast)\n\n    return (\n      <VisuallyHidden\n        aria-hidden\n        tabIndex={0}\n        {...proxyProps}\n        ref={forwardedRef}\n        // Avoid page scrolling when focus is on the focus proxy\n        position={isWeb ? ('fixed' as any) : 'absolute'}\n        onFocus={(event) => {\n          if (!isWeb) return\n          const prevFocusedElement = event.relatedTarget as HTMLElement | null\n          const isFocusFromOutsideViewport = !(context.viewport as HTMLElement)?.contains(\n            prevFocusedElement\n          )\n          if (isFocusFromOutsideViewport) onFocusFromOutsideViewport()\n        }}\n      />\n    )\n  }\n)\n\nFocusProxy.displayName = FOCUS_PROXY_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction focusFirst(candidates: TamaguiElement[]) {\n  if (!isWeb) return\n  const previouslyFocusedElement = document.activeElement\n  return candidates.some((candidate) => {\n    // if focus is already where we want to go, we don't want to keep going through the candidates\n    if (candidate === previouslyFocusedElement) return true\n    candidate.focus()\n    return document.activeElement !== previouslyFocusedElement\n  })\n}\n\n/**\n * Returns a list of potential tabbable candidates.\n *\n * NOTE: This is only a close approximation. For example it doesn't take into account cases like when\n * elements are not visible. This cannot be worked out easily by just reading a property, but rather\n * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker\n * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1\n */\nfunction getTabbableCandidates(container: TamaguiElement) {\n  if (!isWeb) return []\n  const containerHtml = container as HTMLElement\n  const nodes: HTMLElement[] = []\n  const walker = document.createTreeWalker(containerHtml, NodeFilter.SHOW_ELEMENT, {\n    acceptNode: (node: any) => {\n      const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden'\n      if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP\n      // `.tabIndex` is not the same as the `tabindex` attribute. It works on the\n      // runtime's understanding of tabbability, so this automatically accounts\n      // for any kind of element that could be tabbed to.\n      return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP\n    },\n  })\n  while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement)\n  // we do not take into account the order of nodes with positive `tabIndex` as it\n  // hinders accessibility to have tab order different from visual order.\n  return nodes\n}\n\nexport {\n  ToastViewport,\n  ToastViewportProps,\n  VIEWPORT_DEFAULT_HOTKEY,\n  VIEWPORT_PAUSE,\n  VIEWPORT_RESUME,\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { AnimatePresence } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { GetProps, TamaguiElement, isWeb, styled } from '@tamagui/core'\nimport { PortalHost } from '@tamagui/portal'\nimport { YStack } from '@tamagui/stacks'\nimport { VisuallyHidden } from '@tamagui/visually-hidden'\nimport * as React from 'react'\n\nimport {\n  Collection,\n  ScopedProps,\n  useCollection,\n  useToastProviderContext,\n} from './ToastProvider'\n\nconst VIEWPORT_NAME = 'ToastViewport'\nconst VIEWPORT_DEFAULT_HOTKEY = ['F8']\nconst VIEWPORT_PAUSE = 'toast.viewportPause'\nconst VIEWPORT_RESUME = 'toast.viewportResume'\n\nconst ToastViewportWrapperFrame = styled(YStack, {\n  name: 'ViewportWrapper',\n  pointerEvents: 'box-none',\n  top: 0,\n  bottom: 0,\n  left: 0,\n  right: 0,\n  // @ts-ignore\n  position: isWeb ? 'fixed' : 'absolute',\n  maxWidth: '100%',\n  tabIndex: 0,\n  zIndex: 100000,\n})\n\nconst ToastViewportFrame = styled(YStack, {\n  name: VIEWPORT_NAME,\n  pointerEvents: 'box-none',\n  // @ts-ignore\n  position: isWeb ? 'fixed' : 'absolute',\n  maxWidth: '100%',\n})\ntype ToastViewportFrameProps = GetProps<typeof ToastViewportFrame>\ntype ToastViewportProps = ToastViewportFrameProps & {\n  /**\n   * The keys to use as the keyboard shortcut that will move focus to the toast viewport.\n   * @defaultValue ['F8']\n   */\n  hotkey?: string[]\n  /**\n   * An author-localized label for the toast viewport to provide context for screen reader users\n   * when navigating page landmarks. The available `{hotkey}` placeholder will be replaced for you.\n   * @defaultValue 'Notifications ({hotkey})'\n   */\n  label?: string\n  /**\n   * Used to reference the viewport if you want to have multiple viewports in the same provider.\n   */\n  name?: string\n}\n\nconst ToastViewport = React.forwardRef<HTMLDivElement, ToastViewportProps>(\n  (props: ScopedProps<ToastViewportProps>, forwardedRef) => {\n    const {\n      __scopeToast,\n      hotkey = VIEWPORT_DEFAULT_HOTKEY,\n      label = 'Notifications ({hotkey})',\n      name,\n      ...viewportProps\n    } = props\n    const context = useToastProviderContext(VIEWPORT_NAME, __scopeToast)\n    const getItems = useCollection(__scopeToast)\n    const headFocusProxyRef = React.useRef<FocusProxyElement>(null)\n    const tailFocusProxyRef = React.useRef<FocusProxyElement>(null)\n    const wrapperRef = React.useRef<HTMLDivElement>(null)\n    const ref = React.useRef<HTMLDivElement>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange)\n    const hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, '')\n    const hasToasts = context.toastCount > 0\n\n    React.useEffect(() => {\n      if (!isWeb) return\n      if (context.toastCount === 0) return\n      const handleKeyDown = (event: KeyboardEvent) => {\n        // we use `event.code` as it is consistent regardless of meta keys that were pressed.\n        // for example, `event.key` for `Control+Alt+t` is `\u2020` and `t !== \u2020`\n        const isHotkeyPressed = hotkey.every(\n          (key) => (event as any)[key] || event.code === key\n        )\n        if (isHotkeyPressed) ref.current?.focus()\n      }\n      document.addEventListener('keydown', handleKeyDown)\n      return () => {\n        document.removeEventListener('keydown', handleKeyDown)\n      }\n    }, [hotkey])\n\n    React.useEffect(() => {\n      if (!isWeb) return\n      if (context.toastCount === 0) return\n      const wrapper = wrapperRef.current\n      const viewport = ref.current\n      if (hasToasts && wrapper && viewport) {\n        const handlePause = () => {\n          if (!context.isClosePausedRef.current) {\n            const pauseEvent = new CustomEvent(VIEWPORT_PAUSE)\n            viewport.dispatchEvent(pauseEvent)\n            context.isClosePausedRef.current = true\n          }\n        }\n\n        const handleResume = () => {\n          if (context.isClosePausedRef.current) {\n            const resumeEvent = new CustomEvent(VIEWPORT_RESUME)\n            viewport.dispatchEvent(resumeEvent)\n            context.isClosePausedRef.current = false\n          }\n        }\n\n        const handleFocusOutResume = (event: FocusEvent) => {\n          const isFocusMovingOutside = !wrapper.contains(\n            event.relatedTarget as HTMLElement\n          )\n          if (isFocusMovingOutside) handleResume()\n        }\n\n        const handlePointerLeaveResume = () => {\n          const isFocusInside = wrapper.contains(document.activeElement)\n          if (!isFocusInside) handleResume()\n        }\n        // Toasts are not in the viewport React tree so we need to bind DOM events\n\n        wrapper.addEventListener('focusin', handlePause)\n        wrapper.addEventListener('focusout', handleFocusOutResume)\n        wrapper.addEventListener('pointermove', handlePause)\n        wrapper.addEventListener('pointerleave', handlePointerLeaveResume)\n        window.addEventListener('blur', handlePause)\n        window.addEventListener('focus', handleResume)\n        return () => {\n          wrapper.removeEventListener('focusin', handlePause)\n          wrapper.removeEventListener('focusout', handleFocusOutResume)\n          wrapper.removeEventListener('pointermove', handlePause)\n          wrapper.removeEventListener('pointerleave', handlePointerLeaveResume)\n          window.removeEventListener('blur', handlePause)\n          window.removeEventListener('focus', handleResume)\n        }\n      }\n    }, [hasToasts, context.isClosePausedRef])\n\n    const getSortedTabbableCandidates = React.useCallback(\n      ({ tabbingDirection }: { tabbingDirection: 'forwards' | 'backwards' }) => {\n        const toastItems = getItems()\n        const tabbableCandidates = toastItems.map((toastItem) => {\n          const toastNode = toastItem.ref.current!\n          const toastTabbableCandidates = [toastNode, ...getTabbableCandidates(toastNode)]\n          return tabbingDirection === 'forwards'\n            ? toastTabbableCandidates\n            : toastTabbableCandidates.reverse()\n        })\n        return (\n          tabbingDirection === 'forwards'\n            ? tabbableCandidates.reverse()\n            : tabbableCandidates\n        ).flat()\n      },\n      [getItems]\n    )\n\n    React.useEffect(() => {\n      if (!isWeb) return\n      if (context.toastCount === 0) return\n\n      const viewport = ref.current\n      // We programmatically manage tabbing as we are unable to influence\n      // the source order with portals, this allows us to reverse the\n      // tab order so that it runs from most recent toast to least\n      if (viewport) {\n        const handleKeyDown = (event: KeyboardEvent) => {\n          const isMetaKey = event.altKey || event.ctrlKey || event.metaKey\n          const isTabKey = event.key === 'Tab' && !isMetaKey\n\n          if (isTabKey) {\n            const focusedElement = document.activeElement\n            const isTabbingBackwards = event.shiftKey\n            const targetIsViewport = event.target === viewport\n\n            // If we're back tabbing after jumping to the viewport then we simply\n            // proxy focus out to the preceding document\n            if (targetIsViewport && isTabbingBackwards) {\n              headFocusProxyRef.current?.focus()\n              return\n            }\n\n            const tabbingDirection = isTabbingBackwards ? 'backwards' : 'forwards'\n            const sortedCandidates = getSortedTabbableCandidates({ tabbingDirection })\n            const index = sortedCandidates.findIndex(\n              (candidate) => candidate === focusedElement\n            )\n            if (focusFirst(sortedCandidates.slice(index + 1))) {\n              event.preventDefault()\n            } else {\n              // If we can't focus that means we're at the edges so we\n              // proxy to the corresponding exit point and let the browser handle\n              // tab/shift+tab keypress and implicitly pass focus to the next valid element in the document\n              isTabbingBackwards\n                ? headFocusProxyRef.current?.focus()\n                : tailFocusProxyRef.current?.focus()\n            }\n          }\n        }\n\n        // Toasts are not in the viewport React tree so we need to bind DOM events\n        viewport.addEventListener('keydown', handleKeyDown)\n        return () => viewport.removeEventListener('keydown', handleKeyDown)\n      }\n    }, [getItems, getSortedTabbableCandidates])\n\n    return (\n      <ToastViewportWrapperFrame\n        ref={wrapperRef}\n        role=\"region\"\n        aria-label={label.replace('{hotkey}', hotkeyLabel)}\n        // // Ensure virtual cursor from landmarks menus triggers focus/blur for pause/resume\n        tabIndex={-1}\n        // // incase list has size when empty (e.g. padding), we remove pointer events so\n        // // it doesn't prevent interactions with page elements that it overlays\n        // pointerEvents={hasToasts ? undefined : 'none'}\n      >\n        {hasToasts && (\n          <FocusProxy\n            ref={headFocusProxyRef}\n            onFocusFromOutsideViewport={() => {\n              const tabbableCandidates = getSortedTabbableCandidates({\n                tabbingDirection: 'forwards',\n              })\n              focusFirst(tabbableCandidates)\n            }}\n          />\n        )}\n        {/**\n         * tabindex on the the list so that it can be focused when items are removed. we focus\n         * the list instead of the viewport so it announces number of items remaining.\n         */}\n        <Collection.Slot scope={__scopeToast}>\n          <ToastViewportFrame ref={composedRefs} {...viewportProps}>\n            <PortalHost\n              // TODO: user should be able to control this prop to customize AnimatePresence\n              render={(children) => <AnimatePresence>{children}</AnimatePresence>}\n              name={name ?? 'default'}\n            />\n          </ToastViewportFrame>\n        </Collection.Slot>\n        {hasToasts && (\n          <FocusProxy\n            ref={tailFocusProxyRef}\n            onFocusFromOutsideViewport={() => {\n              const tabbableCandidates = getSortedTabbableCandidates({\n                tabbingDirection: 'backwards',\n              })\n              focusFirst(tabbableCandidates)\n            }}\n          />\n        )}\n      </ToastViewportWrapperFrame>\n    )\n  }\n)\n\nToastViewport.displayName = VIEWPORT_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst FOCUS_PROXY_NAME = 'ToastFocusProxy'\n\ntype FocusProxyElement = React.ElementRef<typeof VisuallyHidden>\ntype VisuallyHiddenProps = GetProps<typeof VisuallyHidden>\ninterface FocusProxyProps extends VisuallyHiddenProps {\n  onFocusFromOutsideViewport(): void\n}\n\nconst FocusProxy = React.forwardRef<FocusProxyElement, ScopedProps<FocusProxyProps>>(\n  (props, forwardedRef) => {\n    const { __scopeToast, onFocusFromOutsideViewport, ...proxyProps } = props\n    const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast)\n\n    return (\n      <VisuallyHidden\n        aria-hidden\n        tabIndex={0}\n        {...proxyProps}\n        ref={forwardedRef}\n        // Avoid page scrolling when focus is on the focus proxy\n        position={isWeb ? ('fixed' as any) : 'absolute'}\n        onFocus={(event) => {\n          if (!isWeb) return\n          const prevFocusedElement = event.relatedTarget as HTMLElement | null\n          const isFocusFromOutsideViewport = !(context.viewport as HTMLElement)?.contains(\n            prevFocusedElement\n          )\n          if (isFocusFromOutsideViewport) onFocusFromOutsideViewport()\n        }}\n      />\n    )\n  }\n)\n\nFocusProxy.displayName = FOCUS_PROXY_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction focusFirst(candidates: TamaguiElement[]) {\n  if (!isWeb) return\n  const previouslyFocusedElement = document.activeElement\n  return candidates.some((candidate) => {\n    // if focus is already where we want to go, we don't want to keep going through the candidates\n    if (candidate === previouslyFocusedElement) return true\n    candidate.focus()\n    return document.activeElement !== previouslyFocusedElement\n  })\n}\n\n/**\n * Returns a list of potential tabbable candidates.\n *\n * NOTE: This is only a close approximation. For example it doesn't take into account cases like when\n * elements are not visible. This cannot be worked out easily by just reading a property, but rather\n * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker\n * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1\n */\nfunction getTabbableCandidates(container: TamaguiElement) {\n  if (!isWeb) return []\n  const containerHtml = container as HTMLElement\n  const nodes: HTMLElement[] = []\n  const walker = document.createTreeWalker(containerHtml, NodeFilter.SHOW_ELEMENT, {\n    acceptNode: (node: any) => {\n      const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden'\n      if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP\n      // `.tabIndex` is not the same as the `tabindex` attribute. It works on the\n      // runtime's understanding of tabbability, so this automatically accounts\n      // for any kind of element that could be tabbed to.\n      return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP\n    },\n  })\n  while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement)\n  // we do not take into account the order of nodes with positive `tabIndex` as it\n  // hinders accessibility to have tab order different from visual order.\n  return nodes\n}\n\nexport {\n  ToastViewport,\n  ToastViewportProps,\n  VIEWPORT_DEFAULT_HOTKEY,\n  VIEWPORT_PAUSE,\n  VIEWPORT_RESUME,\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/ToastViewport.mjs

@@ -56,6 +56,8 @@ const ToastViewport = React.forwardRef(
     React.useEffect(() => {
       if (!isWeb)
         return;
+      if (context.toastCount === 0)
+        return;
       const handleKeyDown = (event) => {
         var _a;
         const isHotkeyPressed = hotkey.every(
@@ -63,7 +65,6 @@ const ToastViewport = React.forwardRef(
         );
         if (isHotkeyPressed)
           (_a = ref.current) == null ? void 0 : _a.focus();
-        console.log(isHotkeyPressed);
       };
       document.addEventListener("keydown", handleKeyDown);
       return () => {
@@ -73,6 +74,8 @@ const ToastViewport = React.forwardRef(
     React.useEffect(() => {
       if (!isWeb)
         return;
+      if (context.toastCount === 0)
+        return;
       const wrapper = wrapperRef.current;
       const viewport = ref.current;
       if (hasToasts && wrapper && viewport) {
@@ -133,6 +136,8 @@ const ToastViewport = React.forwardRef(
     React.useEffect(() => {
       if (!isWeb)
         return;
+      if (context.toastCount === 0)
+        return;
       const viewport = ref.current;
       if (viewport) {
         const handleKeyDown = (event) => {