@hanzogui/toast 7.0.0 → 7.3.0

package/dist/cjs/ToastImpl.cjs

@@ -0,0 +1,354 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ToastImpl_exports = {};
+__export(ToastImpl_exports, {
+  ToastImpl: () => ToastImpl,
+  ToastImplFrame: () => ToastImplFrame,
+  useToastInteractiveContext: () => useToastInteractiveContext
+});
+module.exports = __toCommonJS(ToastImpl_exports);
+var import_animate_presence = require("@hanzogui/animate-presence");
+var import_compose_refs = require("@hanzogui/compose-refs");
+var import_constants = require("@hanzogui/constants");
+var import_core = require("@hanzogui/core");
+var import_dismissable = require("@hanzogui/dismissable");
+var import_helpers = require("@hanzogui/helpers");
+var import_portal = require("@hanzogui/portal");
+var import_stacks = require("@hanzogui/stacks");
+var React = __toESM(require("react"), 1);
+var import_constants2 = require("./constants.cjs");
+var import_ToastAnnounce = require("./ToastAnnounce.cjs");
+var import_ToastProvider = require("./ToastProvider.cjs");
+var import_ToastViewport = require("./ToastViewport.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const getPanResponder = () => {
+  return null;
+};
+const ToastImplFrame = (0, import_core.styled)(import_stacks.YStack, {
+  name: "ToastImpl",
+  tabIndex: 0,
+  variants: {
+    unstyled: {
+      false: {
+        focusStyle: {
+          outlineStyle: "solid",
+          outlineWidth: 2,
+          outlineColor: "$outlineColor"
+        },
+        backgroundColor: "$color6",
+        borderRadius: "$4",
+        paddingHorizontal: "$4",
+        paddingVertical: "$3",
+        marginHorizontal: "auto",
+        marginVertical: "$1",
+        elevation: "$3"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.GUI_HEADLESS === "1"
+  }
+});
+const {
+  Provider: ToastInteractiveProvider,
+  useStyledContext: useToastInteractiveContext
+} = (0, import_core.createStyledContext)({
+  onClose() {}
+});
+const ToastImpl = React.forwardRef((props, forwardedRef) => {
+  const {
+    scope,
+    type = "foreground",
+    duration: durationProp,
+    open,
+    onClose,
+    onEscapeKeyDown,
+    onPause,
+    onResume,
+    onSwipeStart,
+    onSwipeMove,
+    onSwipeCancel,
+    onSwipeEnd,
+    viewportName = "default",
+    ...toastProps
+  } = props;
+  const isPresent = (0, import_animate_presence.useIsPresent)();
+  const context = (0, import_ToastProvider.useToastProviderContext)(scope);
+  const [node, setNode] = React.useState(null);
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setNode);
+  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 viewport = React.useMemo(() => {
+    return context.viewports[viewportName];
+  }, [context.viewports, viewportName]);
+  const handleClose = (0, import_core.useEvent)(() => {
+    if (!isPresent) return;
+    if (import_constants.isWeb) {
+      if (node?.contains(document.activeElement)) viewport?.focus();
+    }
+    onClose();
+  });
+  const startTimer = React.useCallback(duration2 => {
+    if (!duration2 || duration2 === Number.POSITIVE_INFINITY) return;
+    clearTimeout(closeTimerRef.current);
+    closeTimerStartTimeRef.current = (/* @__PURE__ */new Date()).getTime();
+    closeTimerRef.current = setTimeout(handleClose, duration2);
+  }, [handleClose]);
+  const handleResume = React.useCallback(() => {
+    startTimer(closeTimerRemainingTimeRef.current);
+    onResume?.();
+  }, [onResume, startTimer]);
+  const handlePause = React.useCallback(() => {
+    const elapsedTime = (/* @__PURE__ */new Date()).getTime() - closeTimerStartTimeRef.current;
+    closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime;
+    window.clearTimeout(closeTimerRef.current);
+    onPause?.();
+  }, [onPause]);
+  React.useEffect(() => {
+    if (!import_constants.isWeb) return;
+    if (viewport) {
+      viewport.addEventListener(import_ToastViewport.VIEWPORT_PAUSE, handlePause);
+      viewport.addEventListener(import_ToastViewport.VIEWPORT_RESUME, handleResume);
+      return () => {
+        viewport.removeEventListener(import_ToastViewport.VIEWPORT_PAUSE, handlePause);
+        viewport.removeEventListener(import_ToastViewport.VIEWPORT_RESUME, handleResume);
+      };
+    }
+  }, [viewport, duration, onPause, onResume, startTimer]);
+  React.useEffect(() => {
+    if (open && !context.isClosePausedRef.current) startTimer(duration);
+  }, [open, duration, context.isClosePausedRef, startTimer]);
+  React.useEffect(() => {
+    onToastAdd();
+    return () => onToastRemove();
+  }, [onToastAdd, onToastRemove]);
+  const announceTextContent = React.useMemo(() => {
+    if (!import_constants.isWeb) return null;
+    return node ? getAnnounceTextContent(node) : null;
+  }, [node]);
+  const isHorizontalSwipe = ["left", "right", "horizontal"].includes(context.swipeDirection);
+  const {
+    animationDriver
+  } = (0, import_core.useConfiguration)();
+  if (!animationDriver) throw new Error("Must set animations in gui.config.ts");
+  const {
+    useAnimatedNumber,
+    useAnimatedNumberStyle
+  } = animationDriver;
+  const animatedNumber = useAnimatedNumber(0);
+  const AnimatedView = animationDriver["NumberView"] ?? animationDriver.View ?? import_core.View;
+  const animatedStyles = useAnimatedNumberStyle(animatedNumber, val => {
+    "worklet";
+
+    return {
+      transform: [isHorizontalSwipe ? {
+        translateX: val
+      } : {
+        translateY: val
+      }]
+    };
+  });
+  const panResponder = React.useMemo(() => {
+    const PanResponder = getPanResponder();
+    if (!PanResponder) return null;
+    return PanResponder.create({
+      onMoveShouldSetPanResponder: (e, gesture) => {
+        if (shouldGrantGestureMove(context.swipeDirection, gesture)) {
+          onSwipeStart?.(e);
+          return true;
+        }
+        return false;
+      },
+      onPanResponderGrant: e => {
+        if (!import_constants.isWeb) handlePause?.();
+      },
+      onPanResponderMove: (e, gesture) => {
+        const {
+          x,
+          y
+        } = getGestureDistance(context.swipeDirection, gesture);
+        const delta = {
+          x,
+          y
+        };
+        animatedNumber.setValue(isHorizontalSwipe ? x : y, {
+          type: "direct"
+        });
+        if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) onSwipeEnd?.(e);
+        onSwipeMove?.(e);
+      },
+      onPanResponderEnd: (e, {
+        dx,
+        dy
+      }) => {
+        if (!isDeltaInDirection({
+          x: dx,
+          y: dy
+        }, context.swipeDirection, context.swipeThreshold)) {
+          if (!import_constants.isWeb) handleResume?.();
+          onSwipeCancel?.(e);
+          animatedNumber.setValue(0, {
+            type: "spring"
+          });
+        }
+      }
+    });
+  }, [handlePause, handleResume]);
+  const themeName = (0, import_core.useThemeName)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [announceTextContent && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToastAnnounce.ToastAnnounce, {
+      scope,
+      role: "status",
+      "aria-live": type === "foreground" ? "assertive" : "polite",
+      "aria-atomic": true,
+      children: announceTextContent
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.PortalItem, {
+      hostName: viewportName ?? "default",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastInteractiveProvider, {
+        scope,
+        onClose: () => {
+          handleClose();
+        },
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dismissable.Dismissable, {
+          onEscapeKeyDown: (0, import_helpers.composeEventHandlers)(onEscapeKeyDown, () => {
+            if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose();
+            context.isFocusedToastEscapeKeyDownRef.current = false;
+          }),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.Theme, {
+            contain: true,
+            forceClassName: true,
+            name: themeName,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedView, {
+              ...panResponder?.panHandlers,
+              style: [{
+                margin: "auto"
+              }, animatedStyles],
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToastProvider.Collection.ItemSlot, {
+                scope: context.toastScope,
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastImplFrame, {
+                  role: "status",
+                  "aria-live": "off",
+                  "aria-atomic": true,
+                  "data-state": open ? "open" : "closed",
+                  "data-swipe-direction": context.swipeDirection,
+                  pointerEvents: "auto",
+                  "$platform-web": {
+                    touchAction: "none",
+                    userSelect: "none"
+                  },
+                  ...toastProps,
+                  ref: composedRefs,
+                  ...(import_constants.isWeb && {
+                    onKeyDown: (0, import_helpers.composeEventHandlers)(props.onKeyDown, event => {
+                      if (event.key !== "Escape") return;
+                      onEscapeKeyDown?.(event);
+                      if (!event.defaultPrevented) {
+                        context.isFocusedToastEscapeKeyDownRef.current = true;
+                        handleClose();
+                      }
+                    })
+                  })
+                })
+              })
+            })
+          })
+        })
+      }, props.id)
+    })]
+  });
+});
+ToastImpl.propTypes = {
+  type(props) {
+    if (props.type && !["foreground", "background"].includes(props.type)) {
+      const error = `Invalid prop \`type\` supplied to \`${import_constants2.TOAST_NAME}\`. Expected \`foreground | background\`.`;
+      return new Error(error);
+    }
+    return null;
+  }
+};
+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" || direction === "horizontal") return isDeltaX && deltaX > threshold;
+  return !isDeltaX && deltaY > threshold;
+};
+function getAnnounceTextContent(container) {
+  if (!import_constants.isWeb) return "";
+  const textContent = [];
+  Array.from(container.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";
+      const isExcluded = node.dataset.toastAnnounceExclude === "";
+      if (!isHidden) if (isExcluded) {
+        const altText = node.dataset.toastAnnounceAlt;
+        if (altText) textContent.push(altText);
+      } else textContent.push(...getAnnounceTextContent(node));
+    }
+  });
+  return textContent;
+}
+function isHTMLElement(node) {
+  return node.nodeType === node.ELEMENT_NODE;
+}
+const GESTURE_GRANT_THRESHOLD = 10;
+const shouldGrantGestureMove = (dir, {
+  dx,
+  dy
+}) => {
+  if ((dir === "horizontal" || dir === "left") && dx < -GESTURE_GRANT_THRESHOLD) return true;
+  if ((dir === "horizontal" || dir === "right") && dx > GESTURE_GRANT_THRESHOLD) return true;
+  if ((dir === "vertical" || dir === "up") && dy > -GESTURE_GRANT_THRESHOLD) return true;
+  if ((dir === "vertical" || dir === "down") && dy < GESTURE_GRANT_THRESHOLD) return true;
+  return false;
+};
+const getGestureDistance = (dir, {
+  dx,
+  dy
+}) => {
+  let y = 0;
+  let x = 0;
+  if (dir === "horizontal") x = dx;else if (dir === "left") x = Math.min(0, dx);else if (dir === "right") x = Math.max(0, dx);else if (dir === "vertical") y = dy;else if (dir === "up") y = Math.min(0, dy);else if (dir === "down") y = Math.max(0, dy);
+  return {
+    x,
+    y
+  };
+};