@tamagui/toast 1.2.8 → 1.2.10

package/dist/esm/Toast.mjs

@@ -0,0 +1,587 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useComposedRefs } from "@tamagui/compose-refs";
+import {
+  composeEventHandlers,
+  isWeb,
+  useEvent,
+  useIsomorphicLayoutEffect
+} from "@tamagui/core";
+import { Portal } from "@tamagui/portal";
+import { YStack } from "@tamagui/stacks";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import { VisuallyHidden } from "@tamagui/visually-hidden";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+const PROVIDER_NAME = "ToastProvider";
+const [ToastProviderProvider, useToastProviderContext] = [];
+const ToastProvider = (props) => {
+  const {
+    __scopeToast,
+    label = "Notification",
+    duration = 5e3,
+    swipeDirection = "right",
+    swipeThreshold = 50,
+    children
+  } = props;
+  const [viewport, setViewport] = React.useState(null);
+  const [toastCount, setToastCount] = React.useState(0);
+  const isFocusedToastEscapeKeyDownRef = React.useRef(false);
+  const isClosePausedRef = React.useRef(false);
+  return (
+    // <Collection.Provider scope={__scopeToast}>
+    /* @__PURE__ */ jsx(
+      ToastProviderProvider,
+      {
+        scope: __scopeToast,
+        label,
+        duration,
+        swipeDirection,
+        swipeThreshold,
+        toastCount,
+        viewport,
+        onViewportChange: setViewport,
+        onToastAdd: React.useCallback(
+          () => setToastCount((prevCount) => prevCount + 1),
+          []
+        ),
+        onToastRemove: React.useCallback(
+          () => setToastCount((prevCount) => prevCount - 1),
+          []
+        ),
+        isFocusedToastEscapeKeyDownRef,
+        isClosePausedRef,
+        children
+      }
+    )
+  );
+};
+ToastProvider.propTypes = {
+  label(props) {
+    if (props.label && typeof props.label === "string" && !props.label.trim()) {
+      const error = `Invalid prop \`label\` supplied to \`${PROVIDER_NAME}\`. Expected non-empty \`string\`.`;
+      return new Error(error);
+    }
+    return null;
+  }
+};
+ToastProvider.displayName = PROVIDER_NAME;
+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 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 () => {
+          };
+        }
+      },
+      [
+        // getItems, getSortedTabbableCandidates
+      ]
+    );
+    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__ */ 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: true,
+      onChange: onOpenChange,
+      transition: true
+    });
+    return (
+      // <Presence present={forceMount || open}>
+      /* @__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 = (/* @__PURE__ */ 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 = (/* @__PURE__ */ 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", {}),
+            // <Collection.ItemSlot scope={__scopeToast}>
+            // <DismissableLayer.Root
+            //   asChild
+            //   onEscapeKeyDown={composeEventHandlers(onEscapeKeyDown, () => {
+            //     if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose()
+            //     context.isFocusedToastEscapeKeyDownRef.current = false
+            //   })}
+            // >
+            // <Primitive.li
+            //   // Ensure toasts are announced as status list or status when focused
+            //   role="status"
+            //   aria-live="off"
+            //   aria-atomic
+            //   tabIndex={0}
+            //   data-state={open ? 'open' : 'closed'}
+            //   data-swipe-direction={context.swipeDirection}
+            //   {...toastProps}
+            //   ref={composedRefs}
+            //   style={{ userSelect: 'none', touchAction: 'none', ...props.style }}
+            //   onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {
+            //     if (event.key !== 'Escape') return
+            //     onEscapeKeyDown?.(event.nativeEvent)
+            //     if (!event.nativeEvent.defaultPrevented) {
+            //       context.isFocusedToastEscapeKeyDownRef.current = true
+            //       handleClose()
+            //     }
+            //   })}
+            //   onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {
+            //     if (event.button !== 0) return
+            //     pointerStartRef.current = { x: event.clientX, y: event.clientY }
+            //   })}
+            //   onPointerMove={composeEventHandlers(props.onPointerMove, (event) => {
+            //     if (!pointerStartRef.current) return
+            //     const x = event.clientX - pointerStartRef.current.x
+            //     const y = event.clientY - pointerStartRef.current.y
+            //     const hasSwipeMoveStarted = Boolean(swipeDeltaRef.current)
+            //     const isHorizontalSwipe = ['left', 'right'].includes(context.swipeDirection)
+            //     const clamp = ['left', 'up'].includes(context.swipeDirection)
+            //       ? Math.min
+            //       : Math.max
+            //     const clampedX = isHorizontalSwipe ? clamp(0, x) : 0
+            //     const clampedY = !isHorizontalSwipe ? clamp(0, y) : 0
+            //     const moveStartBuffer = event.pointerType === 'touch' ? 10 : 2
+            //     const delta = { x: clampedX, y: clampedY }
+            //     const eventDetail = { originalEvent: event, delta }
+            //     if (hasSwipeMoveStarted) {
+            //       swipeDeltaRef.current = delta
+            //       handleAndDispatchCustomEvent(TOAST_SWIPE_MOVE, onSwipeMove, eventDetail, {
+            //         discrete: false,
+            //       })
+            //     } else if (isDeltaInDirection(delta, context.swipeDirection, moveStartBuffer)) {
+            //       swipeDeltaRef.current = delta
+            //       handleAndDispatchCustomEvent(TOAST_SWIPE_START, onSwipeStart, eventDetail, {
+            //         discrete: false,
+            //       })
+            //       ;(event.target as HTMLElement).setPointerCapture(event.pointerId)
+            //     } else if (Math.abs(x) > moveStartBuffer || Math.abs(y) > moveStartBuffer) {
+            //       // User is swiping in wrong direction so we disable swipe gesture
+            //       // for the current pointer down interaction
+            //       pointerStartRef.current = null
+            //     }
+            //   })}
+            //   onPointerUp={composeEventHandlers(props.onPointerUp, (event) => {
+            //     const delta = swipeDeltaRef.current
+            //     ;(event.target as HTMLElement).releasePointerCapture(event.pointerId)
+            //     swipeDeltaRef.current = null
+            //     pointerStartRef.current = null
+            //     if (delta) {
+            //       const toast = event.currentTarget
+            //       const eventDetail = { originalEvent: event, delta }
+            //       if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) {
+            //         handleAndDispatchCustomEvent(TOAST_SWIPE_END, onSwipeEnd, eventDetail, {
+            //           discrete: true,
+            //         })
+            //       } else {
+            //         handleAndDispatchCustomEvent(TOAST_SWIPE_CANCEL, onSwipeCancel, eventDetail, {
+            //           discrete: true,
+            //         })
+            //       }
+            //       // Prevent click event from triggering on items within the toast when
+            //       // pointer up is part of a swipe gesture
+            //       toast.addEventListener('click', (event) => event.preventDefault(), {
+            //         once: true,
+            //       })
+            //     }
+            //   })}
+            // />
+            // </DismissableLayer.Root>,
+            // </Collection.ItemSlot>,
+            context.viewport
+          )
+        }
+      )
+    ] });
+  }
+);
+ToastImpl.propTypes = {
+  type(props) {
+    if (props.type && !["foreground", "background"].includes(props.type)) {
+      const error = `Invalid prop \`type\` supplied to \`${TOAST_NAME}\`. Expected \`foreground | background\`.`;
+      return new Error(error);
+    }
+    return null;
+  }
+};
+const ToastAnnounce = (props) => {
+  const { __scopeToast, children, ...announceProps } = props;
+  const context = useToastProviderContext(TOAST_NAME, __scopeToast);
+  const [renderAnnounceText, setRenderAnnounceText] = React.useState(false);
+  const [isAnnounced, setIsAnnounced] = React.useState(false);
+  const [fragment, setFragment] = React.useState();
+  const [rootFragmentNode, setRootFragmentNode] = React.useState(null);
+  const announceTextContent = React.useMemo(() => {
+    return rootFragmentNode ? getAnnounceTextContent(rootFragmentNode) : null;
+  }, [rootFragmentNode]);
+  useIsomorphicLayoutEffect(() => {
+    setFragment(new DocumentFragment());
+  }, []);
+  useNextFrame(() => setRenderAnnounceText(true));
+  React.useEffect(() => {
+    const timer = window.setTimeout(() => setIsAnnounced(true), 1e3);
+    return () => window.clearTimeout(timer);
+  }, []);
+  return isAnnounced ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+    fragment && // @ts-ignore
+    /* @__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__ */ 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__ */ 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__ */ jsx(ToastClose, { ...actionProps, ref: forwardedRef }) : /* @__PURE__ */ jsx("span", { children: altText });
+  }
+);
+ToastAction.propTypes = {
+  altText(props) {
+    if (!props.altText) {
+      return new Error(`Missing prop \`altText\` expected on \`${ACTION_NAME}\``);
+    }
+    return null;
+  }
+};
+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__ */ 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;
+  const event = new CustomEvent(name, { bubbles: true, cancelable: true, detail });
+  if (handler)
+    currentTarget.addEventListener(name, handler, { once: true });
+  if (discrete) {
+  } else {
+    currentTarget.dispatchEvent(event);
+  }
+}
+const isDeltaInDirection = (delta, direction, threshold = 0) => {
+  const deltaX = Math.abs(delta.x);
+  const deltaY = Math.abs(delta.y);
+  const isDeltaX = deltaX > deltaY;
+  if (direction === "left" || direction === "right") {
+    return isDeltaX && deltaX > threshold;
+  } else {
+    return !isDeltaX && deltaY > threshold;
+  }
+};
+function useNextFrame(callback = () => {
+}) {
+  const fn = useEvent(callback);
+  useIsomorphicLayoutEffect(() => {
+    let raf1 = 0;
+    let raf2 = 0;
+    raf1 = window.requestAnimationFrame(
+      () => raf2 = window.requestAnimationFrame(fn)
+    );
+    return () => {
+      window.cancelAnimationFrame(raf1);
+      window.cancelAnimationFrame(raf2);
+    };
+  }, [fn]);
+}
+function getAnnounceTextContent(container) {
+  const textContent = [];
+  const childNodes = Array.from(container.childNodes);
+  childNodes.forEach((node) => {
+    if (node.nodeType === node.TEXT_NODE && node.textContent)
+      textContent.push(node.textContent);
+    if (isHTMLElement(node)) {
+      const isHidden = node.ariaHidden || node.hidden || node.style.display === "none";
+      if (!isHidden)
+        textContent.push(...getAnnounceTextContent(node));
+    }
+  });
+  return textContent;
+}
+function isHTMLElement(node) {
+  return node.nodeType === node.ELEMENT_NODE;
+}
+function getTabbableCandidates(container) {
+  const nodes = [];
+  const walker = document.createTreeWalker(container, 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;
+}
+function focusFirst(candidates) {
+  const previouslyFocusedElement = document.activeElement;
+  return candidates.some((candidate) => {
+    if (candidate === previouslyFocusedElement)
+      return true;
+    candidate.focus();
+    return document.activeElement !== previouslyFocusedElement;
+  });
+}
+const Provider = ToastProvider;
+const Viewport = ToastViewport;
+const Root = Toast;
+const Title = ToastTitle;
+const Description = ToastDescription;
+const Action = ToastAction;
+const Close = ToastClose;
+export {
+  Action,
+  Close,
+  Description,
+  Provider,
+  Root,
+  Title,
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  Viewport
+};
+//# sourceMappingURL=Toast.mjs.map