@hanzogui/toast 8.3.0 → 8.3.2

package/dist/cjs/ToastImpl.cjs

@@ -1,354 +0,0 @@
-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 hanzogui.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
-  };
-};