@yamada-ui/notice/dist/chunk-G23NRPG6.mjs

Yamada UI notice component

"use client"
import {
  noticeStore
} from "./chunk-UPOKQ3L5.mjs";

// src/notice-provider.tsx
import { memo, ui } from "@yamada-ui/core";
import { AnimatePresence, motion, useIsPresent } from "@yamada-ui/motion";
import { Portal } from "@yamada-ui/portal";
import { useTimeout } from "@yamada-ui/use-timeout";
import { cx, runIfFunc, useUpdateEffect } from "@yamada-ui/utils";
import { useEffect, useState, useSyncExternalStore } from "react";
import { jsx } from "react/jsx-runtime";
var NoticeProvider = ({
  appendToParentPortal,
  containerRef,
  gap = "fallback(4, 1rem)",
  variants,
  itemProps,
  listProps
}) => {
  const state = useSyncExternalStore(
    noticeStore.subscribe,
    noticeStore.getSnapshot,
    noticeStore.getSnapshot
  );
  const components = Object.entries(state).map(([placement, notices]) => {
    const top = placement.includes("top") ? "env(safe-area-inset-top, 0px)" : void 0;
    const bottom = placement.includes("bottom") ? "env(safe-area-inset-bottom, 0px)" : void 0;
    const right = !placement.includes("left") ? "env(safe-area-inset-right, 0px)" : void 0;
    const left = !placement.includes("right") ? "env(safe-area-inset-left, 0px)" : void 0;
    const css = {
      bottom,
      display: "flex",
      flexDirection: "column",
      gap,
      left,
      margin: gap,
      pointerEvents: "none",
      position: "fixed",
      right,
      top,
      zIndex: "fallback(zarbon, 160)"
    };
    return /* @__PURE__ */ jsx(
      ui.ul,
      {
        className: cx("ui-notice__list", `ui-notice__list--${placement}`),
        __css: css,
        ...listProps,
        children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: notices.map((notice) => /* @__PURE__ */ jsx(
          NoticeComponent,
          {
            variants,
            itemProps,
            ...notice
          },
          notice.id
        )) })
      },
      placement
    );
  });
  return /* @__PURE__ */ jsx(
    Portal,
    {
      appendToParentPortal,
      containerRef,
      children: components
    }
  );
};
var defaultVariants = {
  animate: {
    opacity: 1,
    scale: 1,
    transition: {
      duration: 0.4,
      ease: [0.4, 0, 0.2, 1]
    },
    x: 0,
    y: 0
  },
  exit: {
    opacity: 0,
    scale: 0.95,
    transition: {
      duration: 0.2,
      ease: [0.4, 0, 1, 1]
    }
  },
  initial: ({ placement }) => ({
    [["bottom", "top"].includes(placement) ? "y" : "x"]: (placement === "bottom" ? 1 : placement.includes("right") ? 1 : -1) * 24,
    opacity: 0
  })
};
var NoticeComponent = memo(
  ({
    style,
    duration = 5e3,
    isDelete = false,
    message,
    placement,
    variants = defaultVariants,
    itemProps,
    onCloseComplete,
    onDelete
  }) => {
    const [delay, setDelay] = useState(duration);
    const isPresent = useIsPresent();
    useUpdateEffect(() => {
      if (!isPresent) onCloseComplete == null ? void 0 : onCloseComplete();
    }, [isPresent]);
    useUpdateEffect(() => {
      setDelay(duration);
    }, [duration]);
    const onMouseEnter = () => setDelay(null);
    const onMouseLeave = () => setDelay(duration);
    const onClose = () => {
      if (isPresent) onDelete();
    };
    useEffect(() => {
      if (isPresent && isDelete) onDelete();
    }, [isPresent, isDelete, onDelete]);
    useTimeout(onClose, delay);
    const css = {
      maxW: "36rem",
      minW: "20rem",
      pointerEvents: "auto",
      ...style
    };
    return /* @__PURE__ */ jsx(
      motion.li,
      {
        className: "ui-notice__list__item",
        style: {
          display: "flex",
          justifyContent: placement.includes("left") ? "flex-start" : placement.includes("right") ? "flex-end" : "center"
        },
        animate: "animate",
        custom: { placement },
        exit: "exit",
        initial: "initial",
        layout: true,
        variants,
        onHoverEnd: onMouseLeave,
        onHoverStart: onMouseEnter,
        ...itemProps,
        children: /* @__PURE__ */ jsx(ui.div, { className: "ui-notice__list__item__inner", __css: css, children: runIfFunc(message, { onClose }) })
      }
    );
  }
);
NoticeComponent.displayName = "NoticeComponent";
NoticeComponent.__ui__ = "NoticeComponent";

export {
  NoticeProvider
};
//# sourceMappingURL=chunk-G23NRPG6.mjs.map