@tamagui/toast 1.7.11 → 1.8.0

package/dist/jsx/ToastViewport.js

@@ -0,0 +1,254 @@
+import { AnimatePresence } from "@tamagui/animate-presence";
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { isWeb, styled } from "@tamagui/core";
+import { PortalHost } from "@tamagui/portal";
+import { YStack } from "@tamagui/stacks";
+import { VisuallyHidden } from "@tamagui/visually-hidden";
+import * as React from "react";
+import {
+  Collection,
+  useCollection,
+  useToastProviderContext
+} from "./ToastProvider";
+const VIEWPORT_NAME = "ToastViewport";
+const VIEWPORT_DEFAULT_HOTKEY = ["F8"];
+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
+});
+const ToastViewportFrame = styled(YStack, {
+  name: VIEWPORT_NAME,
+  pointerEvents: "box-none",
+  // @ts-ignore
+  position: isWeb ? "fixed" : "absolute",
+  maxWidth: "100%"
+});
+const ToastViewport = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeToast,
+      hotkey = VIEWPORT_DEFAULT_HOTKEY,
+      label = "Notifications ({hotkey})",
+      name,
+      ...viewportProps
+    } = props;
+    const context = useToastProviderContext(VIEWPORT_NAME, __scopeToast);
+    const getItems = useCollection(__scopeToast);
+    const headFocusProxyRef = React.useRef(null);
+    const tailFocusProxyRef = React.useRef(null);
+    const wrapperRef = React.useRef(null);
+    const ref = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange);
+    const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
+    const hasToasts = context.toastCount > 0;
+    React.useEffect(() => {
+      if (!isWeb)
+        return;
+      const handleKeyDown = (event) => {
+        const isHotkeyPressed = hotkey.every(
+          (key) => event[key] || event.code === key
+        );
+        if (isHotkeyPressed)
+          ref.current?.focus();
+        console.log(isHotkeyPressed);
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown);
+      };
+    }, [hotkey]);
+    React.useEffect(() => {
+      if (!isWeb)
+        return;
+      const wrapper = wrapperRef.current;
+      const viewport = ref.current;
+      if (hasToasts && wrapper && viewport) {
+        const handlePause = () => {
+          if (!context.isClosePausedRef.current) {
+            const pauseEvent = new CustomEvent(VIEWPORT_PAUSE);
+            viewport.dispatchEvent(pauseEvent);
+            context.isClosePausedRef.current = true;
+          }
+        };
+        const handleResume = () => {
+          if (context.isClosePausedRef.current) {
+            const resumeEvent = new CustomEvent(VIEWPORT_RESUME);
+            viewport.dispatchEvent(resumeEvent);
+            context.isClosePausedRef.current = false;
+          }
+        };
+        const handleFocusOutResume = (event) => {
+          const isFocusMovingOutside = !wrapper.contains(
+            event.relatedTarget
+          );
+          if (isFocusMovingOutside)
+            handleResume();
+        };
+        const handlePointerLeaveResume = () => {
+          const isFocusInside = wrapper.contains(document.activeElement);
+          if (!isFocusInside)
+            handleResume();
+        };
+        wrapper.addEventListener("focusin", handlePause);
+        wrapper.addEventListener("focusout", handleFocusOutResume);
+        wrapper.addEventListener("pointermove", handlePause);
+        wrapper.addEventListener("pointerleave", handlePointerLeaveResume);
+        window.addEventListener("blur", handlePause);
+        window.addEventListener("focus", handleResume);
+        return () => {
+          wrapper.removeEventListener("focusin", handlePause);
+          wrapper.removeEventListener("focusout", handleFocusOutResume);
+          wrapper.removeEventListener("pointermove", handlePause);
+          wrapper.removeEventListener("pointerleave", handlePointerLeaveResume);
+          window.removeEventListener("blur", handlePause);
+          window.removeEventListener("focus", handleResume);
+        };
+      }
+    }, [hasToasts, context.isClosePausedRef]);
+    const getSortedTabbableCandidates = React.useCallback(
+      ({ tabbingDirection }) => {
+        const toastItems = getItems();
+        const tabbableCandidates = toastItems.map((toastItem) => {
+          const toastNode = toastItem.ref.current;
+          const toastTabbableCandidates = [toastNode, ...getTabbableCandidates(toastNode)];
+          return tabbingDirection === "forwards" ? toastTabbableCandidates : toastTabbableCandidates.reverse();
+        });
+        return (tabbingDirection === "forwards" ? tabbableCandidates.reverse() : tabbableCandidates).flat();
+      },
+      [getItems]
+    );
+    React.useEffect(() => {
+      if (!isWeb)
+        return;
+      const viewport = ref.current;
+      if (viewport) {
+        const handleKeyDown = (event) => {
+          const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
+          const isTabKey = event.key === "Tab" && !isMetaKey;
+          if (isTabKey) {
+            const focusedElement = document.activeElement;
+            const isTabbingBackwards = event.shiftKey;
+            const targetIsViewport = event.target === viewport;
+            if (targetIsViewport && isTabbingBackwards) {
+              headFocusProxyRef.current?.focus();
+              return;
+            }
+            const tabbingDirection = isTabbingBackwards ? "backwards" : "forwards";
+            const sortedCandidates = getSortedTabbableCandidates({ tabbingDirection });
+            const index = sortedCandidates.findIndex(
+              (candidate) => candidate === focusedElement
+            );
+            if (focusFirst(sortedCandidates.slice(index + 1))) {
+              event.preventDefault();
+            } else {
+              isTabbingBackwards ? headFocusProxyRef.current?.focus() : tailFocusProxyRef.current?.focus();
+            }
+          }
+        };
+        viewport.addEventListener("keydown", handleKeyDown);
+        return () => viewport.removeEventListener("keydown", handleKeyDown);
+      }
+    }, [getItems, getSortedTabbableCandidates]);
+    return <ToastViewportWrapperFrame
+      ref={wrapperRef}
+      role="region"
+      aria-label={label.replace("{hotkey}", hotkeyLabel)}
+      tabIndex={-1}
+    >
+      {hasToasts && <FocusProxy
+        ref={headFocusProxyRef}
+        onFocusFromOutsideViewport={() => {
+          const tabbableCandidates = getSortedTabbableCandidates({
+            tabbingDirection: "forwards"
+          });
+          focusFirst(tabbableCandidates);
+        }}
+      />}
+      <Collection.Slot scope={__scopeToast}><ToastViewportFrame ref={composedRefs} {...viewportProps}><PortalHost
+        render={(children) => <AnimatePresence>{children}</AnimatePresence>}
+        name={name ?? "default"}
+      /></ToastViewportFrame></Collection.Slot>
+      {hasToasts && <FocusProxy
+        ref={tailFocusProxyRef}
+        onFocusFromOutsideViewport={() => {
+          const tabbableCandidates = getSortedTabbableCandidates({
+            tabbingDirection: "backwards"
+          });
+          focusFirst(tabbableCandidates);
+        }}
+      />}
+    </ToastViewportWrapperFrame>;
+  }
+);
+ToastViewport.displayName = VIEWPORT_NAME;
+const FOCUS_PROXY_NAME = "ToastFocusProxy";
+const FocusProxy = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeToast, onFocusFromOutsideViewport, ...proxyProps } = props;
+    const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast);
+    return <VisuallyHidden
+      aria-hidden
+      tabIndex={0}
+      {...proxyProps}
+      ref={forwardedRef}
+      position={isWeb ? "fixed" : "absolute"}
+      onFocus={(event) => {
+        if (!isWeb)
+          return;
+        const prevFocusedElement = event.relatedTarget;
+        const isFocusFromOutsideViewport = !context.viewport?.contains(
+          prevFocusedElement
+        );
+        if (isFocusFromOutsideViewport)
+          onFocusFromOutsideViewport();
+      }}
+    />;
+  }
+);
+FocusProxy.displayName = FOCUS_PROXY_NAME;
+function focusFirst(candidates) {
+  if (!isWeb)
+    return;
+  const previouslyFocusedElement = document.activeElement;
+  return candidates.some((candidate) => {
+    if (candidate === previouslyFocusedElement)
+      return true;
+    candidate.focus();
+    return document.activeElement !== previouslyFocusedElement;
+  });
+}
+function getTabbableCandidates(container) {
+  if (!isWeb)
+    return [];
+  const containerHtml = container;
+  const nodes = [];
+  const walker = document.createTreeWalker(containerHtml, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (node) => {
+      const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
+      if (node.disabled || node.hidden || isHiddenInput)
+        return NodeFilter.FILTER_SKIP;
+      return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    }
+  });
+  while (walker.nextNode())
+    nodes.push(walker.currentNode);
+  return nodes;
+}
+export {
+  ToastViewport,
+  VIEWPORT_DEFAULT_HOTKEY,
+  VIEWPORT_PAUSE,
+  VIEWPORT_RESUME
+};
+//# sourceMappingURL=ToastViewport.js.map

package/dist/jsx/ToastViewport.js.map

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

package/dist/jsx/ToastViewport.mjs

@@ -0,0 +1,254 @@
+import { AnimatePresence } from "@tamagui/animate-presence";
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { isWeb, styled } from "@tamagui/core";
+import { PortalHost } from "@tamagui/portal";
+import { YStack } from "@tamagui/stacks";
+import { VisuallyHidden } from "@tamagui/visually-hidden";
+import * as React from "react";
+import {
+  Collection,
+  useCollection,
+  useToastProviderContext
+} from "./ToastProvider";
+const VIEWPORT_NAME = "ToastViewport";
+const VIEWPORT_DEFAULT_HOTKEY = ["F8"];
+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
+});
+const ToastViewportFrame = styled(YStack, {
+  name: VIEWPORT_NAME,
+  pointerEvents: "box-none",
+  // @ts-ignore
+  position: isWeb ? "fixed" : "absolute",
+  maxWidth: "100%"
+});
+const ToastViewport = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeToast,
+      hotkey = VIEWPORT_DEFAULT_HOTKEY,
+      label = "Notifications ({hotkey})",
+      name,
+      ...viewportProps
+    } = props;
+    const context = useToastProviderContext(VIEWPORT_NAME, __scopeToast);
+    const getItems = useCollection(__scopeToast);
+    const headFocusProxyRef = React.useRef(null);
+    const tailFocusProxyRef = React.useRef(null);
+    const wrapperRef = React.useRef(null);
+    const ref = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange);
+    const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
+    const hasToasts = context.toastCount > 0;
+    React.useEffect(() => {
+      if (!isWeb)
+        return;
+      const handleKeyDown = (event) => {
+        const isHotkeyPressed = hotkey.every(
+          (key) => event[key] || event.code === key
+        );
+        if (isHotkeyPressed)
+          ref.current?.focus();
+        console.log(isHotkeyPressed);
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown);
+      };
+    }, [hotkey]);
+    React.useEffect(() => {
+      if (!isWeb)
+        return;
+      const wrapper = wrapperRef.current;
+      const viewport = ref.current;
+      if (hasToasts && wrapper && viewport) {
+        const handlePause = () => {
+          if (!context.isClosePausedRef.current) {
+            const pauseEvent = new CustomEvent(VIEWPORT_PAUSE);
+            viewport.dispatchEvent(pauseEvent);
+            context.isClosePausedRef.current = true;
+          }
+        };
+        const handleResume = () => {
+          if (context.isClosePausedRef.current) {
+            const resumeEvent = new CustomEvent(VIEWPORT_RESUME);
+            viewport.dispatchEvent(resumeEvent);
+            context.isClosePausedRef.current = false;
+          }
+        };
+        const handleFocusOutResume = (event) => {
+          const isFocusMovingOutside = !wrapper.contains(
+            event.relatedTarget
+          );
+          if (isFocusMovingOutside)
+            handleResume();
+        };
+        const handlePointerLeaveResume = () => {
+          const isFocusInside = wrapper.contains(document.activeElement);
+          if (!isFocusInside)
+            handleResume();
+        };
+        wrapper.addEventListener("focusin", handlePause);
+        wrapper.addEventListener("focusout", handleFocusOutResume);
+        wrapper.addEventListener("pointermove", handlePause);
+        wrapper.addEventListener("pointerleave", handlePointerLeaveResume);
+        window.addEventListener("blur", handlePause);
+        window.addEventListener("focus", handleResume);
+        return () => {
+          wrapper.removeEventListener("focusin", handlePause);
+          wrapper.removeEventListener("focusout", handleFocusOutResume);
+          wrapper.removeEventListener("pointermove", handlePause);
+          wrapper.removeEventListener("pointerleave", handlePointerLeaveResume);
+          window.removeEventListener("blur", handlePause);
+          window.removeEventListener("focus", handleResume);
+        };
+      }
+    }, [hasToasts, context.isClosePausedRef]);
+    const getSortedTabbableCandidates = React.useCallback(
+      ({ tabbingDirection }) => {
+        const toastItems = getItems();
+        const tabbableCandidates = toastItems.map((toastItem) => {
+          const toastNode = toastItem.ref.current;
+          const toastTabbableCandidates = [toastNode, ...getTabbableCandidates(toastNode)];
+          return tabbingDirection === "forwards" ? toastTabbableCandidates : toastTabbableCandidates.reverse();
+        });
+        return (tabbingDirection === "forwards" ? tabbableCandidates.reverse() : tabbableCandidates).flat();
+      },
+      [getItems]
+    );
+    React.useEffect(() => {
+      if (!isWeb)
+        return;
+      const viewport = ref.current;
+      if (viewport) {
+        const handleKeyDown = (event) => {
+          const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
+          const isTabKey = event.key === "Tab" && !isMetaKey;
+          if (isTabKey) {
+            const focusedElement = document.activeElement;
+            const isTabbingBackwards = event.shiftKey;
+            const targetIsViewport = event.target === viewport;
+            if (targetIsViewport && isTabbingBackwards) {
+              headFocusProxyRef.current?.focus();
+              return;
+            }
+            const tabbingDirection = isTabbingBackwards ? "backwards" : "forwards";
+            const sortedCandidates = getSortedTabbableCandidates({ tabbingDirection });
+            const index = sortedCandidates.findIndex(
+              (candidate) => candidate === focusedElement
+            );
+            if (focusFirst(sortedCandidates.slice(index + 1))) {
+              event.preventDefault();
+            } else {
+              isTabbingBackwards ? headFocusProxyRef.current?.focus() : tailFocusProxyRef.current?.focus();
+            }
+          }
+        };
+        viewport.addEventListener("keydown", handleKeyDown);
+        return () => viewport.removeEventListener("keydown", handleKeyDown);
+      }
+    }, [getItems, getSortedTabbableCandidates]);
+    return <ToastViewportWrapperFrame
+      ref={wrapperRef}
+      role="region"
+      aria-label={label.replace("{hotkey}", hotkeyLabel)}
+      tabIndex={-1}
+    >
+      {hasToasts && <FocusProxy
+        ref={headFocusProxyRef}
+        onFocusFromOutsideViewport={() => {
+          const tabbableCandidates = getSortedTabbableCandidates({
+            tabbingDirection: "forwards"
+          });
+          focusFirst(tabbableCandidates);
+        }}
+      />}
+      <Collection.Slot scope={__scopeToast}><ToastViewportFrame ref={composedRefs} {...viewportProps}><PortalHost
+        render={(children) => <AnimatePresence>{children}</AnimatePresence>}
+        name={name ?? "default"}
+      /></ToastViewportFrame></Collection.Slot>
+      {hasToasts && <FocusProxy
+        ref={tailFocusProxyRef}
+        onFocusFromOutsideViewport={() => {
+          const tabbableCandidates = getSortedTabbableCandidates({
+            tabbingDirection: "backwards"
+          });
+          focusFirst(tabbableCandidates);
+        }}
+      />}
+    </ToastViewportWrapperFrame>;
+  }
+);
+ToastViewport.displayName = VIEWPORT_NAME;
+const FOCUS_PROXY_NAME = "ToastFocusProxy";
+const FocusProxy = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeToast, onFocusFromOutsideViewport, ...proxyProps } = props;
+    const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast);
+    return <VisuallyHidden
+      aria-hidden
+      tabIndex={0}
+      {...proxyProps}
+      ref={forwardedRef}
+      position={isWeb ? "fixed" : "absolute"}
+      onFocus={(event) => {
+        if (!isWeb)
+          return;
+        const prevFocusedElement = event.relatedTarget;
+        const isFocusFromOutsideViewport = !context.viewport?.contains(
+          prevFocusedElement
+        );
+        if (isFocusFromOutsideViewport)
+          onFocusFromOutsideViewport();
+      }}
+    />;
+  }
+);
+FocusProxy.displayName = FOCUS_PROXY_NAME;
+function focusFirst(candidates) {
+  if (!isWeb)
+    return;
+  const previouslyFocusedElement = document.activeElement;
+  return candidates.some((candidate) => {
+    if (candidate === previouslyFocusedElement)
+      return true;
+    candidate.focus();
+    return document.activeElement !== previouslyFocusedElement;
+  });
+}
+function getTabbableCandidates(container) {
+  if (!isWeb)
+    return [];
+  const containerHtml = container;
+  const nodes = [];
+  const walker = document.createTreeWalker(containerHtml, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (node) => {
+      const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
+      if (node.disabled || node.hidden || isHiddenInput)
+        return NodeFilter.FILTER_SKIP;
+      return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    }
+  });
+  while (walker.nextNode())
+    nodes.push(walker.currentNode);
+  return nodes;
+}
+export {
+  ToastViewport,
+  VIEWPORT_DEFAULT_HOTKEY,
+  VIEWPORT_PAUSE,
+  VIEWPORT_RESUME
+};
+//# sourceMappingURL=ToastViewport.mjs.map

package/dist/jsx/ToastViewport.mjs.map

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

package/dist/jsx/constants.js

@@ -0,0 +1,5 @@
+const TOAST_NAME = "Toast";
+export {
+  TOAST_NAME
+};
+//# sourceMappingURL=constants.js.map

package/dist/jsx/constants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/constants.ts"],
+  "sourcesContent": ["export const TOAST_NAME = 'Toast'\n"],
+  "mappings": "AAAO,MAAM,aAAa;",
+  "names": []
+}

package/dist/jsx/constants.mjs

@@ -0,0 +1,5 @@
+const TOAST_NAME = "Toast";
+export {
+  TOAST_NAME
+};
+//# sourceMappingURL=constants.mjs.map

package/dist/jsx/constants.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/constants.ts"],
+  "sourcesContent": ["export const TOAST_NAME = 'Toast'\n"],
+  "mappings": "AAAO,MAAM,aAAa;",
+  "names": []
+}

package/dist/jsx/createNativeToast.js

@@ -0,0 +1,25 @@
+const createNativeToast = (title, { message }) => {
+  if (!("Notification" in window)) {
+    throw Error("This browser does not support desktop notification");
+  }
+  if (Notification.permission === "denied")
+    return {};
+  const showNotification = () => {
+    new Notification(title, {
+      body: message
+    });
+  };
+  if (Notification.permission === "granted") {
+    showNotification();
+  } else {
+    Notification.requestPermission().then((permission) => {
+      if (permission === "granted") {
+        showNotification();
+      }
+    });
+  }
+};
+export {
+  createNativeToast
+};
+//# sourceMappingURL=createNativeToast.js.map