@tamagui/toast 1.15.4 → 1.15.6

package/dist/jsx/ToastProvider.js

@@ -22,10 +22,16 @@ const ToastProvider = (props) => {
     children
   } = props;
   const id = providedId ?? React.useId();
-  const [viewport, setViewport] = React.useState(null);
+  const [viewports, setViewports] = React.useState({});
   const [toastCount, setToastCount] = React.useState(0);
   const isFocusedToastEscapeKeyDownRef = React.useRef(false);
   const isClosePausedRef = React.useRef(false);
+  const handleViewportChange = React.useCallback(
+    (name, viewport) => {
+      setViewports((prev) => ({ ...prev, [name]: viewport }));
+    },
+    []
+  );
   const options = React.useMemo(() => {
     return {
       duration,
@@ -42,8 +48,8 @@ const ToastProvider = (props) => {
     swipeDirection={swipeDirection}
     swipeThreshold={swipeThreshold}
     toastCount={toastCount}
-    viewport={viewport}
-    onViewportChange={setViewport}
+    viewports={viewports}
+    onViewportChange={handleViewportChange}
     onToastAdd={React.useCallback(() => {
       setToastCount((prevCount) => prevCount + 1);
     }, [])}

package/dist/jsx/ToastProvider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ToastProvider.tsx"],
-  "sourcesContent": ["import { createCollection } from '@tamagui/collection'\nimport { TamaguiElement } from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport * as React from 'react'\n\nimport { ToastImperativeProvider, ToastNativeValue } from './ToastImperative'\nimport { BurntToastOptions } from './types'\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   * Will show a native toast if is true or is set to the current platform. On iOS, it wraps `SPIndicator` and `SPAlert`. On Android, it wraps `ToastAndroid`. On web, it wraps Notification API. Mobile's native features are handled by `burnt`.\n   * Only works with the imperative `useToast` hook.\n   */\n  native?: ToastNativeValue\n  /**\n   * Options for the burnt package if you're using native toasts on mobile\n   */\n  burntOptions?: Omit<BurntToastOptions, 'title' | 'message' | 'duration'>\n  /**\n   * Options for the notification API if you're using native toasts on web\n   */\n  notificationOptions?: NotificationOptions\n}\n\nconst ToastProvider: React.FC<ToastProviderProps> = (\n  props: ScopedProps<ToastProviderProps>\n) => {\n  const {\n    __scopeToast,\n    id: providedId,\n    burntOptions,\n    native,\n    notificationOptions,\n    label = 'Notification',\n    duration = 5000,\n    swipeDirection = 'right',\n    swipeThreshold = 50,\n    children,\n  } = props\n  const id = providedId ?? React.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  // memo context to avoid expensive re-renders\n  const options = React.useMemo(() => {\n    return {\n      duration,\n      burntOptions,\n      native,\n      notificationOptions,\n    }\n    // nested simple object so JSON.stringify\n  }, [JSON.stringify([duration, burntOptions, native, notificationOptions])])\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        <ToastImperativeProvider options={options}>{children}</ToastImperativeProvider>\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,SAAS,wBAAwB;AAGjC,SAAS,0BAA0B;AACnC,YAAY,WAAW;AAEvB,SAAS,+BAAiD;AAO1D,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;AA4C7D,MAAM,gBAA8C,CAClD,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB;AAAA,EACF,IAAI;AACJ,QAAM,KAAK,cAAc,MAAM,MAAM;AACrC,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;AAG3C,QAAM,UAAU,MAAM,QAAQ,MAAM;AAClC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAEF,GAAG,CAAC,KAAK,UAAU,CAAC,UAAU,cAAc,QAAQ,mBAAmB,CAAC,CAAC,CAAC;AAE1E,SACE,CAAC,WAAW,SAAS,OAAO,cAC1B,CAAC;AAAA,IACC,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,kBAAkB;AAAA,IAClB,YAAY,MAAM,YAAY,MAAM;AAClC,oBAAc,CAAC,cAAc,YAAY,CAAC;AAAA,IAC5C,GAAG,CAAC,CAAC;AAAA,IACL,eAAe,MAAM,YAAY,MAAM;AACrC,oBAAc,CAAC,cAAc,YAAY,CAAC;AAAA,IAC5C,GAAG,CAAC,CAAC;AAAA,IACL,gCAAgC;AAAA,IAChC,kBAAkB;AAAA,GAElB,CAAC,wBAAwB,SAAS,UAAU,SAAS,EAApD,wBACH,EApBC,sBAqBH,EAtBC,WAAW;AAwBhB;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 } from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport * as React from 'react'\n\nimport { ToastImperativeProvider, ToastNativeValue } from './ToastImperative'\nimport { BurntToastOptions } from './types'\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  viewports: Record<string, TamaguiElement | null>\n  onViewportChange(name: string, 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   * Will show a native toast if is true or is set to the current platform. On iOS, it wraps `SPIndicator` and `SPAlert`. On Android, it wraps `ToastAndroid`. On web, it wraps Notification API. Mobile's native features are handled by `burnt`.\n   * Only works with the imperative `useToast` hook.\n   */\n  native?: ToastNativeValue\n  /**\n   * Options for the burnt package if you're using native toasts on mobile\n   */\n  burntOptions?: Omit<BurntToastOptions, 'title' | 'message' | 'duration'>\n  /**\n   * Options for the notification API if you're using native toasts on web\n   */\n  notificationOptions?: NotificationOptions\n}\n\nconst ToastProvider: React.FC<ToastProviderProps> = (\n  props: ScopedProps<ToastProviderProps>\n) => {\n  const {\n    __scopeToast,\n    id: providedId,\n    burntOptions,\n    native,\n    notificationOptions,\n    label = 'Notification',\n    duration = 5000,\n    swipeDirection = 'right',\n    swipeThreshold = 50,\n    children,\n  } = props\n  const id = providedId ?? React.useId()\n  const [viewports, setViewports] = React.useState<\n    ToastProviderContextValue['viewports']\n  >({})\n  const [toastCount, setToastCount] = React.useState(0)\n  const isFocusedToastEscapeKeyDownRef = React.useRef(false)\n  const isClosePausedRef = React.useRef(false)\n\n  const handleViewportChange = React.useCallback(\n    (name: string, viewport: TamaguiElement | null) => {\n      setViewports((prev) => ({ ...prev, [name]: viewport }))\n    },\n    []\n  )\n\n  // memo context to avoid expensive re-renders\n  const options = React.useMemo(() => {\n    return {\n      duration,\n      burntOptions,\n      native,\n      notificationOptions,\n    }\n    // nested simple object so JSON.stringify\n  }, [JSON.stringify([duration, burntOptions, native, notificationOptions])])\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        viewports={viewports}\n        onViewportChange={handleViewportChange}\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        <ToastImperativeProvider options={options}>{children}</ToastImperativeProvider>\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,SAAS,wBAAwB;AAGjC,SAAS,0BAA0B;AACnC,YAAY,WAAW;AAEvB,SAAS,+BAAiD;AAO1D,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;AA4C7D,MAAM,gBAA8C,CAClD,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB;AAAA,EACF,IAAI;AACJ,QAAM,KAAK,cAAc,MAAM,MAAM;AACrC,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAEtC,CAAC,CAAC;AACJ,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AACpD,QAAM,iCAAiC,MAAM,OAAO,KAAK;AACzD,QAAM,mBAAmB,MAAM,OAAO,KAAK;AAE3C,QAAM,uBAAuB,MAAM;AAAA,IACjC,CAAC,MAAc,aAAoC;AACjD,mBAAa,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,IAAI,GAAG,SAAS,EAAE;AAAA,IACxD;AAAA,IACA,CAAC;AAAA,EACH;AAGA,QAAM,UAAU,MAAM,QAAQ,MAAM;AAClC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAEF,GAAG,CAAC,KAAK,UAAU,CAAC,UAAU,cAAc,QAAQ,mBAAmB,CAAC,CAAC,CAAC;AAE1E,SACE,CAAC,WAAW,SAAS,OAAO,cAC1B,CAAC;AAAA,IACC,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,YAAY,MAAM,YAAY,MAAM;AAClC,oBAAc,CAAC,cAAc,YAAY,CAAC;AAAA,IAC5C,GAAG,CAAC,CAAC;AAAA,IACL,eAAe,MAAM,YAAY,MAAM;AACrC,oBAAc,CAAC,cAAc,YAAY,CAAC;AAAA,IAC5C,GAAG,CAAC,CAAC;AAAA,IACL,gCAAgC;AAAA,IAChC,kBAAkB;AAAA,GAElB,CAAC,wBAAwB,SAAS,UAAU,SAAS,EAApD,wBACH,EApBC,sBAqBH,EAtBC,WAAW;AAwBhB;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/jsx/ToastProvider.mjs

@@ -22,10 +22,16 @@ const ToastProvider = (props) => {
     children
   } = props;
   const id = providedId ?? React.useId();
-  const [viewport, setViewport] = React.useState(null);
+  const [viewports, setViewports] = React.useState({});
   const [toastCount, setToastCount] = React.useState(0);
   const isFocusedToastEscapeKeyDownRef = React.useRef(false);
   const isClosePausedRef = React.useRef(false);
+  const handleViewportChange = React.useCallback(
+    (name, viewport) => {
+      setViewports((prev) => ({ ...prev, [name]: viewport }));
+    },
+    []
+  );
   const options = React.useMemo(() => {
     return {
       duration,
@@ -42,8 +48,8 @@ const ToastProvider = (props) => {
     swipeDirection={swipeDirection}
     swipeThreshold={swipeThreshold}
     toastCount={toastCount}
-    viewport={viewport}
-    onViewportChange={setViewport}
+    viewports={viewports}
+    onViewportChange={handleViewportChange}
     onToastAdd={React.useCallback(() => {
       setToastCount((prevCount) => prevCount + 1);
     }, [])}

package/dist/jsx/ToastProvider.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ToastProvider.tsx"],
-  "sourcesContent": ["import { createCollection } from '@tamagui/collection'\nimport { TamaguiElement } from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport * as React from 'react'\n\nimport { ToastImperativeProvider, ToastNativeValue } from './ToastImperative'\nimport { BurntToastOptions } from './types'\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   * Will show a native toast if is true or is set to the current platform. On iOS, it wraps `SPIndicator` and `SPAlert`. On Android, it wraps `ToastAndroid`. On web, it wraps Notification API. Mobile's native features are handled by `burnt`.\n   * Only works with the imperative `useToast` hook.\n   */\n  native?: ToastNativeValue\n  /**\n   * Options for the burnt package if you're using native toasts on mobile\n   */\n  burntOptions?: Omit<BurntToastOptions, 'title' | 'message' | 'duration'>\n  /**\n   * Options for the notification API if you're using native toasts on web\n   */\n  notificationOptions?: NotificationOptions\n}\n\nconst ToastProvider: React.FC<ToastProviderProps> = (\n  props: ScopedProps<ToastProviderProps>\n) => {\n  const {\n    __scopeToast,\n    id: providedId,\n    burntOptions,\n    native,\n    notificationOptions,\n    label = 'Notification',\n    duration = 5000,\n    swipeDirection = 'right',\n    swipeThreshold = 50,\n    children,\n  } = props\n  const id = providedId ?? React.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  // memo context to avoid expensive re-renders\n  const options = React.useMemo(() => {\n    return {\n      duration,\n      burntOptions,\n      native,\n      notificationOptions,\n    }\n    // nested simple object so JSON.stringify\n  }, [JSON.stringify([duration, burntOptions, native, notificationOptions])])\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        <ToastImperativeProvider options={options}>{children}</ToastImperativeProvider>\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,SAAS,wBAAwB;AAGjC,SAAS,0BAA0B;AACnC,YAAY,WAAW;AAEvB,SAAS,+BAAiD;AAO1D,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;AA4C7D,MAAM,gBAA8C,CAClD,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB;AAAA,EACF,IAAI;AACJ,QAAM,KAAK,cAAc,MAAM,MAAM;AACrC,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;AAG3C,QAAM,UAAU,MAAM,QAAQ,MAAM;AAClC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAEF,GAAG,CAAC,KAAK,UAAU,CAAC,UAAU,cAAc,QAAQ,mBAAmB,CAAC,CAAC,CAAC;AAE1E,SACE,CAAC,WAAW,SAAS,OAAO,cAC1B,CAAC;AAAA,IACC,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,kBAAkB;AAAA,IAClB,YAAY,MAAM,YAAY,MAAM;AAClC,oBAAc,CAAC,cAAc,YAAY,CAAC;AAAA,IAC5C,GAAG,CAAC,CAAC;AAAA,IACL,eAAe,MAAM,YAAY,MAAM;AACrC,oBAAc,CAAC,cAAc,YAAY,CAAC;AAAA,IAC5C,GAAG,CAAC,CAAC;AAAA,IACL,gCAAgC;AAAA,IAChC,kBAAkB;AAAA,GAElB,CAAC,wBAAwB,SAAS,UAAU,SAAS,EAApD,wBACH,EApBC,sBAqBH,EAtBC,WAAW;AAwBhB;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 } from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport * as React from 'react'\n\nimport { ToastImperativeProvider, ToastNativeValue } from './ToastImperative'\nimport { BurntToastOptions } from './types'\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  viewports: Record<string, TamaguiElement | null>\n  onViewportChange(name: string, 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   * Will show a native toast if is true or is set to the current platform. On iOS, it wraps `SPIndicator` and `SPAlert`. On Android, it wraps `ToastAndroid`. On web, it wraps Notification API. Mobile's native features are handled by `burnt`.\n   * Only works with the imperative `useToast` hook.\n   */\n  native?: ToastNativeValue\n  /**\n   * Options for the burnt package if you're using native toasts on mobile\n   */\n  burntOptions?: Omit<BurntToastOptions, 'title' | 'message' | 'duration'>\n  /**\n   * Options for the notification API if you're using native toasts on web\n   */\n  notificationOptions?: NotificationOptions\n}\n\nconst ToastProvider: React.FC<ToastProviderProps> = (\n  props: ScopedProps<ToastProviderProps>\n) => {\n  const {\n    __scopeToast,\n    id: providedId,\n    burntOptions,\n    native,\n    notificationOptions,\n    label = 'Notification',\n    duration = 5000,\n    swipeDirection = 'right',\n    swipeThreshold = 50,\n    children,\n  } = props\n  const id = providedId ?? React.useId()\n  const [viewports, setViewports] = React.useState<\n    ToastProviderContextValue['viewports']\n  >({})\n  const [toastCount, setToastCount] = React.useState(0)\n  const isFocusedToastEscapeKeyDownRef = React.useRef(false)\n  const isClosePausedRef = React.useRef(false)\n\n  const handleViewportChange = React.useCallback(\n    (name: string, viewport: TamaguiElement | null) => {\n      setViewports((prev) => ({ ...prev, [name]: viewport }))\n    },\n    []\n  )\n\n  // memo context to avoid expensive re-renders\n  const options = React.useMemo(() => {\n    return {\n      duration,\n      burntOptions,\n      native,\n      notificationOptions,\n    }\n    // nested simple object so JSON.stringify\n  }, [JSON.stringify([duration, burntOptions, native, notificationOptions])])\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        viewports={viewports}\n        onViewportChange={handleViewportChange}\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        <ToastImperativeProvider options={options}>{children}</ToastImperativeProvider>\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,SAAS,wBAAwB;AAGjC,SAAS,0BAA0B;AACnC,YAAY,WAAW;AAEvB,SAAS,+BAAiD;AAO1D,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;AA4C7D,MAAM,gBAA8C,CAClD,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB;AAAA,EACF,IAAI;AACJ,QAAM,KAAK,cAAc,MAAM,MAAM;AACrC,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAEtC,CAAC,CAAC;AACJ,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AACpD,QAAM,iCAAiC,MAAM,OAAO,KAAK;AACzD,QAAM,mBAAmB,MAAM,OAAO,KAAK;AAE3C,QAAM,uBAAuB,MAAM;AAAA,IACjC,CAAC,MAAc,aAAoC;AACjD,mBAAa,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,IAAI,GAAG,SAAS,EAAE;AAAA,IACxD;AAAA,IACA,CAAC;AAAA,EACH;AAGA,QAAM,UAAU,MAAM,QAAQ,MAAM;AAClC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAEF,GAAG,CAAC,KAAK,UAAU,CAAC,UAAU,cAAc,QAAQ,mBAAmB,CAAC,CAAC,CAAC;AAE1E,SACE,CAAC,WAAW,SAAS,OAAO,cAC1B,CAAC;AAAA,IACC,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,YAAY,MAAM,YAAY,MAAM;AAClC,oBAAc,CAAC,cAAc,YAAY,CAAC;AAAA,IAC5C,GAAG,CAAC,CAAC;AAAA,IACL,eAAe,MAAM,YAAY,MAAM;AACrC,oBAAc,CAAC,cAAc,YAAY,CAAC;AAAA,IAC5C,GAAG,CAAC,CAAC;AAAA,IACL,gCAAgC;AAAA,IAChC,kBAAkB;AAAA,GAElB,CAAC,wBAAwB,SAAS,UAAU,SAAS,EAApD,wBACH,EApBC,sBAqBH,EAtBC,WAAW;AAwBhB;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/jsx/ToastViewport.js

@@ -16,23 +16,39 @@ const VIEWPORT_PAUSE = "toast.viewportPause";
 const VIEWPORT_RESUME = "toast.viewportResume";
 const ToastViewportWrapperFrame = styled(YStack, {
   name: "ViewportWrapper",
-  pointerEvents: "box-none",
-  top: 0,
-  bottom: 0,
-  left: 0,
-  right: 0,
-  // @ts-ignore
-  position: isWeb ? "fixed" : "absolute",
-  maxWidth: "100%",
-  tabIndex: 0,
-  zIndex: 1e5
+  variants: {
+    unstyled: {
+      false: {
+        pointerEvents: "box-none",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        position: isWeb ? "fixed" : "absolute",
+        maxWidth: "100%",
+        tabIndex: 0,
+        zIndex: 1e5
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
 });
 const ToastViewportFrame = styled(YStack, {
   name: VIEWPORT_NAME,
-  pointerEvents: "box-none",
-  // @ts-ignore
-  position: isWeb ? "fixed" : "absolute",
-  maxWidth: "100%"
+  variants: {
+    unstyled: {
+      false: {
+        pointerEvents: "box-none",
+        position: isWeb ? "fixed" : "absolute",
+        maxWidth: "100%"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
 });
 const ToastViewport = React.forwardRef(
   (props, forwardedRef) => {
@@ -40,7 +56,7 @@ const ToastViewport = React.forwardRef(
       __scopeToast,
       hotkey = VIEWPORT_DEFAULT_HOTKEY,
       label = "Notifications ({hotkey})",
-      name,
+      name = "default",
       multipleToasts,
       ...viewportProps
     } = props;
@@ -50,7 +66,14 @@ const ToastViewport = React.forwardRef(
     const tailFocusProxyRef = React.useRef(null);
     const wrapperRef = React.useRef(null);
     const ref = React.useRef(null);
-    const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange);
+    const onViewportChange = React.useCallback(
+      (el) => {
+        if (context.viewports[name] !== el)
+          context.onViewportChange(name, el);
+      },
+      [name, context.viewports]
+    );
+    const composedRefs = useComposedRefs(forwardedRef, ref, onViewportChange);
     const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
     const hasToasts = context.toastCount > 0;
     React.useEffect(() => {
@@ -173,6 +196,7 @@ const ToastViewport = React.forwardRef(
       tabIndex={-1}
     >
       {hasToasts && <FocusProxy
+        viewportName={name}
         ref={headFocusProxyRef}
         onFocusFromOutsideViewport={() => {
           const tabbableCandidates = getSortedTabbableCandidates({
@@ -186,6 +210,7 @@ const ToastViewport = React.forwardRef(
         name={name ?? "default"}
       /></ToastViewportFrame></Collection.Slot>
       {hasToasts && <FocusProxy
+        viewportName={name}
         ref={tailFocusProxyRef}
         onFocusFromOutsideViewport={() => {
           const tabbableCandidates = getSortedTabbableCandidates({
@@ -201,8 +226,9 @@ ToastViewport.displayName = VIEWPORT_NAME;
 const FOCUS_PROXY_NAME = "ToastFocusProxy";
 const FocusProxy = React.forwardRef(
   (props, forwardedRef) => {
-    const { __scopeToast, onFocusFromOutsideViewport, ...proxyProps } = props;
+    const { __scopeToast, onFocusFromOutsideViewport, viewportName, ...proxyProps } = props;
     const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast);
+    const viewport = context.viewports[viewportName];
     return <VisuallyHidden
       aria-hidden
       tabIndex={0}
@@ -213,9 +239,7 @@ const FocusProxy = React.forwardRef(
         if (!isWeb)
           return;
         const prevFocusedElement = event.relatedTarget;
-        const isFocusFromOutsideViewport = !context.viewport?.contains(
-          prevFocusedElement
-        );
+        const isFocusFromOutsideViewport = !viewport?.contains(prevFocusedElement);
         if (isFocusFromOutsideViewport)
           onFocusFromOutsideViewport();
       }}

package/dist/jsx/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   * Pass this when you want to have multiple/duplicated toasts.\n   */\n  multipleToasts?: boolean\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      multipleToasts,\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, context.toastCount])\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, context.toastCount])\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, context.toastCount])\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              render={(children) => (\n                <AnimatePresence exitBeforeEnter={!multipleToasts}>\n                  {children}\n                </AnimatePresence>\n              )}\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\n  variants: {\n    unstyled: {\n      false: {\n        pointerEvents: 'box-none',\n        top: 0,\n        bottom: 0,\n        left: 0,\n        right: 0,\n        position: isWeb ? ('fixed' as any) : 'absolute',\n        maxWidth: '100%',\n        tabIndex: 0,\n        zIndex: 100000,\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nconst ToastViewportFrame = styled(YStack, {\n  name: VIEWPORT_NAME,\n\n  variants: {\n    unstyled: {\n      false: {\n        pointerEvents: 'box-none',\n        position: isWeb ? ('fixed' as any) : 'absolute',\n        maxWidth: '100%',\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\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   * Pass this when you want to have multiple/duplicated toasts.\n   */\n  multipleToasts?: boolean\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 = 'default',\n      multipleToasts,\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 onViewportChange = React.useCallback(\n      (el: TamaguiElement) => {\n        if (context.viewports[name] !== el) context.onViewportChange(name, el)\n      },\n      [name, context.viewports]\n    )\n    const composedRefs = useComposedRefs(forwardedRef, ref, 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, context.toastCount])\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\n        // Toasts are not in the viewport React tree so we need to bind DOM events\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, context.toastCount])\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, context.toastCount])\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            viewportName={name}\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              render={(children) => (\n                <AnimatePresence exitBeforeEnter={!multipleToasts}>\n                  {children}\n                </AnimatePresence>\n              )}\n              name={name ?? 'default'}\n            />\n          </ToastViewportFrame>\n        </Collection.Slot>\n        {hasToasts && (\n          <FocusProxy\n            viewportName={name}\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  viewportName: string\n}\n\nconst FocusProxy = React.forwardRef<FocusProxyElement, ScopedProps<FocusProxyProps>>(\n  (props, forwardedRef) => {\n    const { __scopeToast, onFocusFromOutsideViewport, viewportName, ...proxyProps } =\n      props\n    const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast)\n    const viewport = context.viewports[viewportName] as HTMLElement\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 = !viewport?.contains(prevFocusedElement)\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/jsx/ToastViewport.mjs

@@ -16,23 +16,39 @@ const VIEWPORT_PAUSE = "toast.viewportPause";
 const VIEWPORT_RESUME = "toast.viewportResume";
 const ToastViewportWrapperFrame = styled(YStack, {
   name: "ViewportWrapper",
-  pointerEvents: "box-none",
-  top: 0,
-  bottom: 0,
-  left: 0,
-  right: 0,
-  // @ts-ignore
-  position: isWeb ? "fixed" : "absolute",
-  maxWidth: "100%",
-  tabIndex: 0,
-  zIndex: 1e5
+  variants: {
+    unstyled: {
+      false: {
+        pointerEvents: "box-none",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        position: isWeb ? "fixed" : "absolute",
+        maxWidth: "100%",
+        tabIndex: 0,
+        zIndex: 1e5
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
 });
 const ToastViewportFrame = styled(YStack, {
   name: VIEWPORT_NAME,
-  pointerEvents: "box-none",
-  // @ts-ignore
-  position: isWeb ? "fixed" : "absolute",
-  maxWidth: "100%"
+  variants: {
+    unstyled: {
+      false: {
+        pointerEvents: "box-none",
+        position: isWeb ? "fixed" : "absolute",
+        maxWidth: "100%"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
 });
 const ToastViewport = React.forwardRef(
   (props, forwardedRef) => {
@@ -40,7 +56,7 @@ const ToastViewport = React.forwardRef(
       __scopeToast,
       hotkey = VIEWPORT_DEFAULT_HOTKEY,
       label = "Notifications ({hotkey})",
-      name,
+      name = "default",
       multipleToasts,
       ...viewportProps
     } = props;
@@ -50,7 +66,14 @@ const ToastViewport = React.forwardRef(
     const tailFocusProxyRef = React.useRef(null);
     const wrapperRef = React.useRef(null);
     const ref = React.useRef(null);
-    const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange);
+    const onViewportChange = React.useCallback(
+      (el) => {
+        if (context.viewports[name] !== el)
+          context.onViewportChange(name, el);
+      },
+      [name, context.viewports]
+    );
+    const composedRefs = useComposedRefs(forwardedRef, ref, onViewportChange);
     const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
     const hasToasts = context.toastCount > 0;
     React.useEffect(() => {
@@ -173,6 +196,7 @@ const ToastViewport = React.forwardRef(
       tabIndex={-1}
     >
       {hasToasts && <FocusProxy
+        viewportName={name}
         ref={headFocusProxyRef}
         onFocusFromOutsideViewport={() => {
           const tabbableCandidates = getSortedTabbableCandidates({
@@ -186,6 +210,7 @@ const ToastViewport = React.forwardRef(
         name={name ?? "default"}
       /></ToastViewportFrame></Collection.Slot>
       {hasToasts && <FocusProxy
+        viewportName={name}
         ref={tailFocusProxyRef}
         onFocusFromOutsideViewport={() => {
           const tabbableCandidates = getSortedTabbableCandidates({
@@ -201,8 +226,9 @@ ToastViewport.displayName = VIEWPORT_NAME;
 const FOCUS_PROXY_NAME = "ToastFocusProxy";
 const FocusProxy = React.forwardRef(
   (props, forwardedRef) => {
-    const { __scopeToast, onFocusFromOutsideViewport, ...proxyProps } = props;
+    const { __scopeToast, onFocusFromOutsideViewport, viewportName, ...proxyProps } = props;
     const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast);
+    const viewport = context.viewports[viewportName];
     return <VisuallyHidden
       aria-hidden
       tabIndex={0}
@@ -213,9 +239,7 @@ const FocusProxy = React.forwardRef(
         if (!isWeb)
           return;
         const prevFocusedElement = event.relatedTarget;
-        const isFocusFromOutsideViewport = !context.viewport?.contains(
-          prevFocusedElement
-        );
+        const isFocusFromOutsideViewport = !viewport?.contains(prevFocusedElement);
         if (isFocusFromOutsideViewport)
           onFocusFromOutsideViewport();
       }}

package/dist/jsx/ToastViewport.mjs.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   * Pass this when you want to have multiple/duplicated toasts.\n   */\n  multipleToasts?: boolean\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      multipleToasts,\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, context.toastCount])\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, context.toastCount])\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, context.toastCount])\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              render={(children) => (\n                <AnimatePresence exitBeforeEnter={!multipleToasts}>\n                  {children}\n                </AnimatePresence>\n              )}\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\n  variants: {\n    unstyled: {\n      false: {\n        pointerEvents: 'box-none',\n        top: 0,\n        bottom: 0,\n        left: 0,\n        right: 0,\n        position: isWeb ? ('fixed' as any) : 'absolute',\n        maxWidth: '100%',\n        tabIndex: 0,\n        zIndex: 100000,\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nconst ToastViewportFrame = styled(YStack, {\n  name: VIEWPORT_NAME,\n\n  variants: {\n    unstyled: {\n      false: {\n        pointerEvents: 'box-none',\n        position: isWeb ? ('fixed' as any) : 'absolute',\n        maxWidth: '100%',\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\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   * Pass this when you want to have multiple/duplicated toasts.\n   */\n  multipleToasts?: boolean\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 = 'default',\n      multipleToasts,\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 onViewportChange = React.useCallback(\n      (el: TamaguiElement) => {\n        if (context.viewports[name] !== el) context.onViewportChange(name, el)\n      },\n      [name, context.viewports]\n    )\n    const composedRefs = useComposedRefs(forwardedRef, ref, 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, context.toastCount])\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\n        // Toasts are not in the viewport React tree so we need to bind DOM events\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, context.toastCount])\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, context.toastCount])\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            viewportName={name}\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              render={(children) => (\n                <AnimatePresence exitBeforeEnter={!multipleToasts}>\n                  {children}\n                </AnimatePresence>\n              )}\n              name={name ?? 'default'}\n            />\n          </ToastViewportFrame>\n        </Collection.Slot>\n        {hasToasts && (\n          <FocusProxy\n            viewportName={name}\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  viewportName: string\n}\n\nconst FocusProxy = React.forwardRef<FocusProxyElement, ScopedProps<FocusProxyProps>>(\n  (props, forwardedRef) => {\n    const { __scopeToast, onFocusFromOutsideViewport, viewportName, ...proxyProps } =\n      props\n    const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast)\n    const viewport = context.viewports[viewportName] as HTMLElement\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 = !viewport?.contains(prevFocusedElement)\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": []
 }