@yamada-ui/react/dist/esm/components/notice/notice.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { assignRef } from "../../utils/ref.js";
import { utils_exports } from "../../utils/index.js";
import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { AlertDescription, AlertIcon, AlertLoading, AlertRoot, AlertTitle } from "../alert/alert.js";
import { CloseButton } from "../close-button/close-button.js";
import { noticeStyle } from "./notice.style.js";
import { useNoticeContext } from "./notice-provider.js";
import { useCallback, useMemo, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Toaster, toast } from "sonner";

//#region src/components/notice/notice.tsx
const PLACEMENT_MAP = {
	end: "bottom-center",
	"end-center": "bottom-center",
	"end-end": "bottom-right",
	"end-start": "bottom-left",
	start: "top-center",
	"start-center": "top-center",
	"start-end": "top-right",
	"start-start": "top-left"
};
const { PropsContext: NoticePropsContext, usePropsContext: useNoticePropsContext, withContext, withProvider } = createSlotComponent("notice", noticeStyle);
const NoticeRoot = withProvider(({ ref, expand, limit, placement,...rest }) => {
	const { getId } = useNoticeContext();
	const position = useMemo(() => PLACEMENT_MAP[placement], [placement]);
	const [updatedLimit, setUpdatedLimit] = useState(limit);
	const getLimit = useCallback((target) => {
		if (target === placement && updatedLimit !== limit) return updatedLimit;
		else return limit;
	}, [
		placement,
		limit,
		updatedLimit
	]);
	const updateLimit = useCallback(({ limit: limit$1, placement: target }) => {
		if (target === placement) setUpdatedLimit(limit$1);
	}, [placement]);
	assignRef(ref.current.updateLimit, updateLimit);
	assignRef(ref.current.getLimit, getLimit);
	return /* @__PURE__ */ jsx(styled.div, {
		...rest,
		children: /* @__PURE__ */ jsx(Toaster, {
			id: getId(placement),
			containerAriaLabel: "",
			expand,
			gap: 16,
			hotkey: [""],
			mobileOffset: "var(--mobile-offset)",
			offset: "var(--offset)",
			position,
			visibleToasts: updatedLimit
		})
	});
}, "root")();
const NoticeItem = withContext(({ id, variant = "plain", closable, closeStrategies = ["click", "drag"], description, loadingScheme, status, title, withIcon = true, closeButtonProps, contentProps, descriptionProps, iconProps, loadingProps, titleProps, onClick,...rest }) => {
	const onClose = useCallback(() => toast.dismiss(id), [id]);
	return /* @__PURE__ */ jsxs(AlertRoot, {
		variant,
		status,
		...rest,
		onClick: (0, utils_exports.handlerAll)(onClick, closable && closeStrategies.includes("click") ? onClose : utils_exports.noop),
		children: [
			withIcon ? loadingScheme ? /* @__PURE__ */ jsx(AlertLoading, {
				loadingScheme,
				...loadingProps
			}) : /* @__PURE__ */ jsx(AlertIcon, { ...iconProps }) : null,
			/* @__PURE__ */ jsxs(NoticeContent, {
				"data-close-button": (0, utils_exports.dataAttr)(closable && closeStrategies.includes("button")),
				...contentProps,
				children: [title ? /* @__PURE__ */ jsx(AlertTitle, {
					me: "0",
					...titleProps,
					children: title
				}) : null, description ? /* @__PURE__ */ jsx(AlertDescription, {
					lineClamp: 2,
					...descriptionProps,
					children: description
				}) : null]
			}),
			closable && closeStrategies.includes("button") ? /* @__PURE__ */ jsx(NoticeCloseButton, {
				"data-variant": variant,
				...closeButtonProps,
				onClick: (0, utils_exports.handlerAll)(closeButtonProps?.onClick, onClose)
			}) : null
		]
	});
}, "item")();
const NoticeContent = withContext("div", "content")();
const NoticeCloseButton = withContext(CloseButton, "closeButton")();

//#endregion
export { NoticeItem, NoticeRoot, PLACEMENT_MAP };
//# sourceMappingURL=notice.js.map