@tamagui/toast 1.0.1-beta.151 → 1.0.1-beta.154

package/dist/esm/Toast.js

@@ -1,3 +1,4 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useComposedRefs } from "@tamagui/compose-refs";
 import {
   composeEventHandlers,
@@ -26,7 +27,7 @@ const ToastProvider = (props) => {
   const [toastCount, setToastCount] = React.useState(0);
   const isFocusedToastEscapeKeyDownRef = React.useRef(false);
   const isClosePausedRef = React.useRef(false);
-  return /* @__PURE__ */ React.createElement(ToastProviderProvider, {
+  return /* @__PURE__ */ jsx(ToastProviderProvider, {
     scope: __scopeToast,
     label,
     duration,
@@ -38,8 +39,9 @@ const ToastProvider = (props) => {
     onToastAdd: React.useCallback(() => setToastCount((prevCount) => prevCount + 1), []),
     onToastRemove: React.useCallback(() => setToastCount((prevCount) => prevCount - 1), []),
     isFocusedToastEscapeKeyDownRef,
-    isClosePausedRef
-  }, children);
+    isClosePausedRef,
+    children
+  });
 };
 ToastProvider.propTypes = {
   label(props) {
@@ -55,199 +57,223 @@ const VIEWPORT_NAME = "ToastViewport";
 const VIEWPORT_DEFAULT_HOTKEY = ["F8"];
 const VIEWPORT_PAUSE = "toast.viewportPause";
 const VIEWPORT_RESUME = "toast.viewportResume";
-const ToastViewport = React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeToast,
-    hotkey = VIEWPORT_DEFAULT_HOTKEY,
-    label = "Notifications ({hotkey})",
-    ...viewportProps
-  } = props;
-  const context = useToastProviderContext(VIEWPORT_NAME, __scopeToast);
-  const wrapperRef = React.useRef(null);
-  const headFocusProxyRef = React.useRef(null);
-  const tailFocusProxyRef = 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(() => {
-    const handleKeyDown = (event) => {
-      var _a;
-      const isHotkeyPressed = hotkey.every((key) => event[key] || event.code === key);
-      if (isHotkeyPressed)
-        (_a = ref.current) == null ? void 0 : _a.focus();
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [hotkey]);
-  React.useEffect(() => {
-    const wrapper = wrapperRef.current;
-    const viewport = ref.current;
-    if (wrapper && viewport) {
-      const handlePause = () => {
-        const pauseEvent = new CustomEvent(VIEWPORT_PAUSE);
-        context.isClosePausedRef.current = true;
-      };
-      const handleResume = () => {
-        const resumeEvent = new CustomEvent(VIEWPORT_RESUME);
-        context.isClosePausedRef.current = false;
-      };
-      wrapper.addEventListener("focusin", handlePause);
-      wrapper.addEventListener("focusout", handleResume);
-      wrapper.addEventListener("pointerenter", handlePause);
-      wrapper.addEventListener("pointerleave", handleResume);
-      window.addEventListener("blur", handlePause);
-      window.addEventListener("focus", handleResume);
-      return () => {
-        wrapper.removeEventListener("focusin", handlePause);
-        wrapper.removeEventListener("focusout", handleResume);
-        wrapper.removeEventListener("pointerenter", handlePause);
-        wrapper.removeEventListener("pointerleave", handleResume);
-        window.removeEventListener("blur", handlePause);
-        window.removeEventListener("focus", handleResume);
-      };
-    }
-  }, [context.isClosePausedRef]);
-  React.useEffect(() => {
-    const viewport = ref.current;
-    if (viewport) {
+const ToastViewport = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeToast,
+      hotkey = VIEWPORT_DEFAULT_HOTKEY,
+      label = "Notifications ({hotkey})",
+      ...viewportProps
+    } = props;
+    const context = useToastProviderContext(VIEWPORT_NAME, __scopeToast);
+    const wrapperRef = React.useRef(null);
+    const headFocusProxyRef = React.useRef(null);
+    const tailFocusProxyRef = 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(() => {
       const handleKeyDown = (event) => {
         var _a;
-        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) {
-            (_a = headFocusProxyRef.current) == null ? void 0 : _a.focus();
-            return;
-          }
-          const tabbingDirection = isTabbingBackwards ? "backwards" : "forwards";
-        }
-      };
-      return () => {
+        const isHotkeyPressed = hotkey.every((key) => event[key] || event.code === key);
+        if (isHotkeyPressed)
+          (_a = ref.current) == null ? void 0 : _a.focus();
       };
-    }
-  }, []);
-  return null;
-});
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [hotkey]);
+    React.useEffect(() => {
+      const wrapper = wrapperRef.current;
+      const viewport = ref.current;
+      if (wrapper && viewport) {
+        const handlePause = () => {
+          const pauseEvent = new CustomEvent(VIEWPORT_PAUSE);
+          context.isClosePausedRef.current = true;
+        };
+        const handleResume = () => {
+          const resumeEvent = new CustomEvent(VIEWPORT_RESUME);
+          context.isClosePausedRef.current = false;
+        };
+        wrapper.addEventListener("focusin", handlePause);
+        wrapper.addEventListener("focusout", handleResume);
+        wrapper.addEventListener("pointerenter", handlePause);
+        wrapper.addEventListener("pointerleave", handleResume);
+        window.addEventListener("blur", handlePause);
+        window.addEventListener("focus", handleResume);
+        return () => {
+          wrapper.removeEventListener("focusin", handlePause);
+          wrapper.removeEventListener("focusout", handleResume);
+          wrapper.removeEventListener("pointerenter", handlePause);
+          wrapper.removeEventListener("pointerleave", handleResume);
+          window.removeEventListener("blur", handlePause);
+          window.removeEventListener("focus", handleResume);
+        };
+      }
+    }, [context.isClosePausedRef]);
+    React.useEffect(
+      () => {
+        const viewport = ref.current;
+        if (viewport) {
+          const handleKeyDown = (event) => {
+            var _a;
+            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) {
+                (_a = headFocusProxyRef.current) == null ? void 0 : _a.focus();
+                return;
+              }
+              const tabbingDirection = isTabbingBackwards ? "backwards" : "forwards";
+            }
+          };
+          return () => {
+          };
+        }
+      },
+      []
+    );
+    return null;
+  }
+);
 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 /* @__PURE__ */ React.createElement(VisuallyHidden, {
-    "aria-hidden": true,
-    tabIndex: 0,
-    ...proxyProps,
-    ref: forwardedRef,
-    position: isWeb ? "fixed" : "absolute",
-    onFocus: (event) => {
-      var _a;
-      const prevFocusedElement = event.relatedTarget;
-      const isFocusFromOutsideViewport = !((_a = context.viewport) == null ? void 0 : _a.contains(prevFocusedElement));
-      if (isFocusFromOutsideViewport)
-        onFocusFromOutsideViewport();
-    }
-  });
-});
+const FocusProxy = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeToast, onFocusFromOutsideViewport, ...proxyProps } = props;
+    const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast);
+    return /* @__PURE__ */ jsx(VisuallyHidden, {
+      "aria-hidden": true,
+      tabIndex: 0,
+      ...proxyProps,
+      ref: forwardedRef,
+      position: isWeb ? "fixed" : "absolute",
+      onFocus: (event) => {
+        var _a;
+        const prevFocusedElement = event.relatedTarget;
+        const isFocusFromOutsideViewport = !((_a = context.viewport) == null ? void 0 : _a.contains(prevFocusedElement));
+        if (isFocusFromOutsideViewport)
+          onFocusFromOutsideViewport();
+      }
+    });
+  }
+);
 FocusProxy.displayName = FOCUS_PROXY_NAME;
 const TOAST_NAME = "Toast";
 const TOAST_SWIPE_START = "toast.swipeStart";
 const TOAST_SWIPE_MOVE = "toast.swipeMove";
 const TOAST_SWIPE_CANCEL = "toast.swipeCancel";
 const TOAST_SWIPE_END = "toast.swipeEnd";
-const Toast = React.forwardRef((props, forwardedRef) => {
-  const { forceMount, open: openProp, defaultOpen, onOpenChange, ...toastProps } = props;
-  const [open, setOpen] = useControllableState({
-    prop: openProp,
-    defaultProp: defaultOpen || true,
-    onChange: onOpenChange
-  });
-  return /* @__PURE__ */ React.createElement(ToastImpl, {
-    open,
-    ...toastProps,
-    ref: forwardedRef,
-    onClose: () => setOpen(false)
-  });
-});
+const Toast = React.forwardRef(
+  (props, forwardedRef) => {
+    const { forceMount, open: openProp, defaultOpen, onOpenChange, ...toastProps } = props;
+    const [open, setOpen] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen || true,
+      onChange: onOpenChange
+    });
+    return /* @__PURE__ */ jsx(ToastImpl, {
+      open,
+      ...toastProps,
+      ref: forwardedRef,
+      onClose: () => setOpen(false)
+    });
+  }
+);
 Toast.displayName = TOAST_NAME;
 const [ToastInteractiveProvider, useToastInteractiveContext] = {};
-const ToastImpl = React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeToast,
-    type = "foreground",
-    duration: durationProp,
-    open,
-    onClose,
-    onEscapeKeyDown,
-    onSwipeStart,
-    onSwipeMove,
-    onSwipeCancel,
-    onSwipeEnd,
-    ...toastProps
-  } = props;
-  const context = useToastProviderContext(TOAST_NAME, __scopeToast);
-  const ref = React.useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, ref);
-  const pointerStartRef = React.useRef(null);
-  const swipeDeltaRef = React.useRef(null);
-  const duration = durationProp || context.duration;
-  const closeTimerStartTimeRef = React.useRef(0);
-  const closeTimerRemainingTimeRef = React.useRef(duration);
-  const closeTimerRef = React.useRef(0);
-  const { onToastAdd, onToastRemove } = context;
-  const handleClose = useEvent(() => {
-    onClose();
-  });
-  const startTimer = React.useCallback((duration2) => {
-    if (!duration2 || duration2 === Infinity)
-      return;
-    window.clearTimeout(closeTimerRef.current);
-    closeTimerStartTimeRef.current = new Date().getTime();
-    closeTimerRef.current = window.setTimeout(handleClose, duration2);
-  }, [handleClose]);
-  React.useEffect(() => {
-    const viewport = context.viewport;
-    if (viewport) {
-      const handleResume = () => {
-        startTimer(closeTimerRemainingTimeRef.current);
-      };
-      const handlePause = () => {
-        const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current;
-        closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime;
+const ToastImpl = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeToast,
+      type = "foreground",
+      duration: durationProp,
+      open,
+      onClose,
+      onEscapeKeyDown,
+      onSwipeStart,
+      onSwipeMove,
+      onSwipeCancel,
+      onSwipeEnd,
+      ...toastProps
+    } = props;
+    const context = useToastProviderContext(TOAST_NAME, __scopeToast);
+    const ref = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref);
+    const pointerStartRef = React.useRef(null);
+    const swipeDeltaRef = React.useRef(null);
+    const duration = durationProp || context.duration;
+    const closeTimerStartTimeRef = React.useRef(0);
+    const closeTimerRemainingTimeRef = React.useRef(duration);
+    const closeTimerRef = React.useRef(0);
+    const { onToastAdd, onToastRemove } = context;
+    const handleClose = useEvent(() => {
+      onClose();
+    });
+    const startTimer = React.useCallback(
+      (duration2) => {
+        if (!duration2 || duration2 === Infinity)
+          return;
         window.clearTimeout(closeTimerRef.current);
-      };
-      viewport.addEventListener(VIEWPORT_PAUSE, handlePause);
-      viewport.addEventListener(VIEWPORT_RESUME, handleResume);
-      return () => {
-        viewport.removeEventListener(VIEWPORT_PAUSE, handlePause);
-        viewport.removeEventListener(VIEWPORT_RESUME, handleResume);
-      };
-    }
-  }, [context.viewport, duration, startTimer]);
-  React.useEffect(() => {
-    if (open && !context.isClosePausedRef.current)
-      startTimer(duration);
-  }, [open, duration, context.isClosePausedRef, startTimer]);
-  React.useEffect(() => {
-    onToastAdd();
-    return () => onToastRemove();
-  }, [onToastAdd, onToastRemove]);
-  if (!context.viewport)
-    return null;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ToastAnnounce, {
-    __scopeToast,
-    role: "status",
-    "aria-live": type === "foreground" ? "assertive" : "polite",
-    "aria-atomic": true
-  }, props.children), /* @__PURE__ */ React.createElement(ToastInteractiveProvider, {
-    scope: __scopeToast,
-    isInteractive: true,
-    onClose: handleClose
-  }, ReactDOM.createPortal(/* @__PURE__ */ React.createElement("div", null), context.viewport)));
-});
+        closeTimerStartTimeRef.current = new Date().getTime();
+        closeTimerRef.current = window.setTimeout(handleClose, duration2);
+      },
+      [handleClose]
+    );
+    React.useEffect(() => {
+      const viewport = context.viewport;
+      if (viewport) {
+        const handleResume = () => {
+          startTimer(closeTimerRemainingTimeRef.current);
+        };
+        const handlePause = () => {
+          const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current;
+          closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime;
+          window.clearTimeout(closeTimerRef.current);
+        };
+        viewport.addEventListener(VIEWPORT_PAUSE, handlePause);
+        viewport.addEventListener(VIEWPORT_RESUME, handleResume);
+        return () => {
+          viewport.removeEventListener(VIEWPORT_PAUSE, handlePause);
+          viewport.removeEventListener(VIEWPORT_RESUME, handleResume);
+        };
+      }
+    }, [context.viewport, duration, startTimer]);
+    React.useEffect(() => {
+      if (open && !context.isClosePausedRef.current)
+        startTimer(duration);
+    }, [open, duration, context.isClosePausedRef, startTimer]);
+    React.useEffect(() => {
+      onToastAdd();
+      return () => onToastRemove();
+    }, [onToastAdd, onToastRemove]);
+    if (!context.viewport)
+      return null;
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx(ToastAnnounce, {
+          __scopeToast,
+          role: "status",
+          "aria-live": type === "foreground" ? "assertive" : "polite",
+          "aria-atomic": true,
+          children: props.children
+        }),
+        /* @__PURE__ */ jsx(ToastInteractiveProvider, {
+          scope: __scopeToast,
+          isInteractive: true,
+          onClose: handleClose,
+          children: ReactDOM.createPortal(
+            /* @__PURE__ */ jsx("div", {}),
+            context.viewport
+          )
+        })
+      ]
+    });
+  }
+);
 ToastImpl.propTypes = {
   type(props) {
     if (props.type && !["foreground", "background"].includes(props.type)) {
@@ -275,44 +301,64 @@ const ToastAnnounce = (props) => {
     const timer = window.setTimeout(() => setIsAnnounced(true), 1e3);
     return () => window.clearTimeout(timer);
   }, []);
-  return isAnnounced ? null : /* @__PURE__ */ React.createElement(React.Fragment, null, fragment && /* @__PURE__ */ React.createElement(Portal, {
-    container: fragment,
-    ref: setRootFragmentNode
-  }, context.label, " ", children), /* @__PURE__ */ React.createElement(Portal, {
-    asChild: true
-  }, /* @__PURE__ */ React.createElement(VisuallyHidden, {
-    ...announceProps
-  }, renderAnnounceText && announceTextContent)));
+  return isAnnounced ? null : /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      fragment && /* @__PURE__ */ jsxs(Portal, {
+        container: fragment,
+        ref: setRootFragmentNode,
+        children: [
+          context.label,
+          " ",
+          children
+        ]
+      }),
+      /* @__PURE__ */ jsx(Portal, {
+        asChild: true,
+        children: /* @__PURE__ */ jsx(VisuallyHidden, {
+          ...announceProps,
+          children: renderAnnounceText && announceTextContent
+        })
+      })
+    ]
+  });
 };
 const TITLE_NAME = "ToastTitle";
-const ToastTitle = React.forwardRef((props, forwardedRef) => {
-  const { __scopeToast, ...titleProps } = props;
-  return /* @__PURE__ */ React.createElement(YStack, {
-    ...titleProps,
-    ref: forwardedRef
-  });
-});
+const ToastTitle = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeToast, ...titleProps } = props;
+    return /* @__PURE__ */ jsx(YStack, {
+      ...titleProps,
+      ref: forwardedRef
+    });
+  }
+);
 ToastTitle.displayName = TITLE_NAME;
 const DESCRIPTION_NAME = "ToastDescription";
-const ToastDescription = React.forwardRef((props, forwardedRef) => {
-  const { __scopeToast, ...descriptionProps } = props;
-  return /* @__PURE__ */ React.createElement(YStack, {
-    ...descriptionProps,
-    ref: forwardedRef
-  });
-});
+const ToastDescription = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeToast, ...descriptionProps } = props;
+    return /* @__PURE__ */ jsx(YStack, {
+      ...descriptionProps,
+      ref: forwardedRef
+    });
+  }
+);
 ToastDescription.displayName = DESCRIPTION_NAME;
 const ACTION_NAME = "ToastAction";
-const ToastAction = React.forwardRef((props, forwardedRef) => {
-  const { altText, ...actionProps } = props;
-  const context = useToastInteractiveContext(ACTION_NAME, props.__scopeToast);
-  if (!altText)
-    return null;
-  return context.isInteractive ? /* @__PURE__ */ React.createElement(ToastClose, {
-    ...actionProps,
-    ref: forwardedRef
-  }) : /* @__PURE__ */ React.createElement("span", null, altText);
-});
+const ToastAction = React.forwardRef(
+  (props, forwardedRef) => {
+    const { altText, ...actionProps } = props;
+    const context = useToastInteractiveContext(ACTION_NAME, props.__scopeToast);
+    if (!altText)
+      return null;
+    return context.isInteractive ? /* @__PURE__ */ jsx(ToastClose, {
+      ...actionProps,
+      ref: forwardedRef
+    }) : /* @__PURE__ */ jsx("span", {
+      children: altText
+    });
+  }
+);
 ToastAction.propTypes = {
   altText(props) {
     if (!props.altText) {
@@ -323,16 +369,18 @@ ToastAction.propTypes = {
 };
 ToastAction.displayName = ACTION_NAME;
 const CLOSE_NAME = "ToastClose";
-const ToastClose = React.forwardRef((props, forwardedRef) => {
-  const { __scopeToast, ...closeProps } = props;
-  const interactiveContext = useToastInteractiveContext(CLOSE_NAME, __scopeToast);
-  return interactiveContext.isInteractive ? /* @__PURE__ */ React.createElement(YStack, {
-    tag: "button",
-    ...closeProps,
-    ref: forwardedRef,
-    onPress: composeEventHandlers(props.onPress, interactiveContext.onClose)
-  }) : null;
-});
+const ToastClose = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeToast, ...closeProps } = props;
+    const interactiveContext = useToastInteractiveContext(CLOSE_NAME, __scopeToast);
+    return interactiveContext.isInteractive ? /* @__PURE__ */ jsx(YStack, {
+      tag: "button",
+      ...closeProps,
+      ref: forwardedRef,
+      onPress: composeEventHandlers(props.onPress, interactiveContext.onClose)
+    }) : null;
+  }
+);
 ToastClose.displayName = CLOSE_NAME;
 function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
   const currentTarget = detail.originalEvent.currentTarget;