@charcoal-ui/react 6.1.0-beta.0 → 6.1.0-beta.1

package/dist/components/Notification/Toast/index2.js

@@ -0,0 +1,81 @@
+"use client";
+/* empty css        */
+import { NotificationItem } from "../NotificationItem.js";
+import { NotificationRegion } from "../NotificationRegion.js";
+import { useNotificationQueue } from "../useNotificationQueue.js";
+/* empty css      */
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { c } from "react-compiler-runtime";
+
+//#region src/components/Notification/Toast/index.tsx
+const Toast = forwardRef(function Toast({ position = "top", duration, order, ...regionProps }, ref) {
+	"use memo";
+	const { state, itemRef, enqueue, onHoverStart, onHoverEnd } = useNotificationQueue("toast", {
+		duration,
+		order
+	});
+	function show(message, options) {
+		enqueue({
+			message,
+			type: options.type
+		});
+	}
+	useImperativeHandle(ref, () => ({ show }));
+	return /* @__PURE__ */ jsx(NotificationRegion, {
+		name: "toast",
+		state,
+		position,
+		...regionProps,
+		children: state.visibleToasts.map((toast) => /* @__PURE__ */ jsx(NotificationItem, {
+			name: "toast",
+			toast,
+			state,
+			itemRef,
+			onHoverStart,
+			onHoverEnd,
+			"data-type": toast.content.type
+		}, toast.key))
+	});
+});
+function useToast(t0) {
+	"use memo";
+	const $ = c(7);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const props = t1;
+	const toastHandlerRef = useRef(null);
+	let t2;
+	if ($[2] !== props) {
+		t2 = /* @__PURE__ */ jsx(Toast, {
+			ref: toastHandlerRef,
+			...props
+		});
+		$[2] = props;
+		$[3] = t2;
+	} else t2 = $[3];
+	const element = t2;
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = function show(message, options) {
+			toastHandlerRef.current?.show(message, options);
+		};
+		$[4] = t3;
+	} else t3 = $[4];
+	const show = t3;
+	let t4;
+	if ($[5] !== element) {
+		t4 = [element, show];
+		$[5] = element;
+		$[6] = t4;
+	} else t4 = $[6];
+	return t4;
+}
+
+//#endregion
+export { Toast as default, useToast };
+//# sourceMappingURL=index2.js.map

package/dist/components/Notification/Toast/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["toastHandlerRef"],"sources":["../../../../src/components/Notification/Toast/index.tsx"],"sourcesContent":["import '../layout.css'\nimport './index.css'\n\nimport { forwardRef, useImperativeHandle, useRef } from 'react'\nimport type { ReactNode } from 'react'\nimport { NotificationItem } from '../NotificationItem'\nimport { NotificationRegion } from '../NotificationRegion'\nimport { useNotificationQueue } from '../useNotificationQueue'\nimport type { NotificationProps, Position } from '../types'\n\nexport type ToastType = 'success' | 'error'\n\nexport type ShowToastOptions = {\n  type: ToastType\n}\n\nexport type ToastHandler = {\n  show: (message: ReactNode, options: ShowToastOptions) => void\n}\n\nexport type ToastProps = Omit<NotificationProps, 'position'> & {\n  /**\n   * Toast の表示位置\n   * @default 'top'\n   */\n  position?: Position\n}\n\ntype ToastContent = {\n  message: ReactNode\n  type: ToastType\n}\n\nconst Toast = forwardRef<ToastHandler, ToastProps>(function Toast(\n  { position = 'top', duration, order, ...regionProps },\n  ref,\n) {\n  'use memo'\n\n  const { state, itemRef, enqueue, onHoverStart, onHoverEnd } =\n    useNotificationQueue<ToastContent>('toast', { duration, order })\n\n  function show(message: ReactNode, options: ShowToastOptions) {\n    enqueue({\n      message,\n      type: options.type,\n    })\n  }\n\n  useImperativeHandle(ref, () => ({ show }))\n\n  return (\n    <NotificationRegion\n      name=\"toast\"\n      state={state}\n      position={position}\n      {...regionProps}\n    >\n      {state.visibleToasts.map((toast) => (\n        <NotificationItem\n          key={toast.key}\n          name=\"toast\"\n          toast={toast}\n          state={state}\n          itemRef={itemRef}\n          onHoverStart={onHoverStart}\n          onHoverEnd={onHoverEnd}\n          data-type={toast.content.type}\n        />\n      ))}\n    </NotificationRegion>\n  )\n})\n\nexport default Toast\n\nexport function useToast(props: ToastProps = {}) {\n  'use memo'\n\n  const toastHandlerRef = useRef<ToastHandler>(null)\n  const element = <Toast ref={toastHandlerRef} {...props} />\n  function show(message: ReactNode, options: ShowToastOptions) {\n    toastHandlerRef.current?.show(message, options)\n  }\n  return [element, show] as const\n}\n"],"mappings":";;;;;;;;;;;AAiCA,MAAM,QAAQ,WAAqC,SAAS,MAC1D,EAAE,WAAW,OAAO,UAAU,OAAO,GAAG,eACxC,KACA;CACA;CAEA,MAAM,EAAE,OAAO,SAAS,SAAS,cAAc,eAC7C,qBAAmC,SAAS;EAAE;EAAU;CAAM,CAAC;CAEjE,SAAS,KAAK,SAAoB,SAA2B;EAC3D,QAAQ;GACN;GACA,MAAM,QAAQ;EAChB,CAAC;CACH;CAEA,oBAAoB,YAAY,EAAE,KAAK,EAAE;CAEzC,OACE,oBAAC,oBAAD;EACE,MAAK;EACE;EACG;EACV,GAAI;YAEH,MAAM,cAAc,KAAK,UACxB,oBAAC,kBAAD;GAEE,MAAK;GACE;GACA;GACE;GACK;GACF;GACZ,aAAW,MAAM,QAAQ;EAAK,GAPzB,MAAM,GAOmB,CAEjC;CACiB;AAExB,CAAC;AAID,SAAO,SAAA,IAAA;CAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAkB,KAAA,OAAA,SAAA,CAAqB,IAArB;EAAsB,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAtB,MAAA,QAAA;CAGvB,MAAA,kBAAwB,OAAqB,IAAI;CAAC,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAClC,KAAA,oBAAC,OAAD;GAAYA,KAAA;GAAe,GAAM;EAAK;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAA1D,MAAA,UAAgB;CAA0C,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAC1D,KAAA,SAAA,KAAA,SAAA,SAAA;GACE,gBAAe,SAAc,KAAC,SAAS,OAAO;EAAC;EAChD,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAFD,MAAA,OAAA;CAEC,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA;EACM,KAAA,CAAC,SAAS,IAAI;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAf;AAAwB"}

package/dist/components/Notification/types.d.ts

@@ -0,0 +1,27 @@
+export type NotificationName = 'snackbar' | 'toast';
+export type Position = 'top' | 'bottom';
+export type NotificationOrder = 'queue' | 'replace';
+export type UseNotificationOptions = {
+    position?: Position;
+    /**
+     * 画面端からの距離（ピクセル）
+     * @default 16
+     */
+    offset?: number;
+    /**
+     * 通知を表示する時間（ミリ秒）。負の値は 0、数値でない値は 5000 として扱う
+     * @default 5000
+     */
+    duration?: number;
+    /**
+     * 表示中の通知がある場合の次の通知の表示方法
+     * @default 'queue'
+     */
+    order?: NotificationOrder;
+};
+export type NotificationProps = UseNotificationOptions & {
+    zIndex?: number;
+    portalContainer?: HTMLElement;
+    className?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/Notification/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,OAAO,CAAA;AACnD,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAA;AACvC,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,SAAS,CAAA;AAEnD,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,sBAAsB,GAAG;IACvD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA"}

package/dist/components/Notification/useNotificationQueue.cjs

@@ -0,0 +1,155 @@
+"use client";
+let react = require("react");
+let react_stately_useToastState = require("react-stately/useToastState");
+
+//#region src/components/Notification/useNotificationQueue.ts
+const DEFAULT_DURATION_MS = 5e3;
+const ANIMATION_DURATION_MS = 300;
+function useNotificationQueue(name, { duration: durationOption, order = "queue", timeoutReason, unmountedReason } = {}) {
+	const itemRef = (0, react.useRef)(null);
+	const queueRef = (0, react.useRef)([]);
+	const isShowingRef = (0, react.useRef)(false);
+	const activeRef = (0, react.useRef)();
+	const replaceRef = (0, react.useRef)(false);
+	const hoverRef = (0, react.useRef)({
+		active: false,
+		pending: void 0
+	});
+	const playNextRef = (0, react.useRef)(void 0);
+	const state = (0, react_stately_useToastState.useToastState)({
+		maxVisibleToasts: 1,
+		wrapUpdate: (0, react.useCallback)(function wrapUpdate(update, action) {
+			if (action !== "remove") {
+				update();
+				return;
+			}
+			function notifyActive() {
+				const active = activeRef.current;
+				if (active === void 0 || active.notified) return;
+				active.notified = true;
+				const reason = active.reason ?? timeoutReason;
+				if (reason !== void 0) active.onClose?.(reason);
+			}
+			function finish() {
+				activeRef.current = void 0;
+				update();
+				playNextRef.current?.();
+			}
+			notifyActive();
+			if (hoverRef.current.active) {
+				hoverRef.current.pending = () => wrapUpdate(update, "remove");
+				return;
+			}
+			if (itemRef.current === null) {
+				finish();
+				return;
+			}
+			if (replaceRef.current) {
+				replaceRef.current = false;
+				finish();
+				return;
+			}
+			const item = itemRef.current;
+			item.dataset.exiting = "true";
+			let completed = false;
+			let fallbackTimer = 0;
+			function handleAnimationEnd(event) {
+				if (event.target === item && event.animationName === `charcoal-${name}-exit`) complete();
+			}
+			function complete() {
+				if (completed) return;
+				completed = true;
+				item.removeEventListener("animationend", handleAnimationEnd);
+				window.clearTimeout(fallbackTimer);
+				finish();
+			}
+			item.addEventListener("animationend", handleAnimationEnd);
+			fallbackTimer = window.setTimeout(complete, 400);
+			if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) complete();
+		}, [name, timeoutReason])
+	});
+	(0, react.useEffect)(() => {
+		return () => {
+			const active = activeRef.current;
+			if (active !== void 0 && !active.notified) {
+				if (unmountedReason !== void 0) active.onClose?.(unmountedReason);
+			}
+			activeRef.current = void 0;
+			queueRef.current = [];
+			isShowingRef.current = false;
+		};
+	}, [unmountedReason]);
+	function playNext() {
+		const next = queueRef.current.shift();
+		if (next === void 0) {
+			isShowingRef.current = false;
+			return;
+		}
+		const { duration, onClose, content } = next;
+		isShowingRef.current = true;
+		const enterMs = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? 0 : ANIMATION_DURATION_MS;
+		const key = state.add(content, { timeout: Math.max(1, duration + enterMs) });
+		activeRef.current = {
+			key,
+			onClose,
+			notified: false
+		};
+	}
+	playNextRef.current = playNext;
+	function enqueue(content, onClose) {
+		const duration = typeof durationOption === "number" && Number.isFinite(durationOption) ? Math.max(0, durationOption) : DEFAULT_DURATION_MS;
+		queueRef.current.push({
+			content,
+			onClose,
+			duration
+		});
+		if (!isShowingRef.current) playNext();
+		else if (order === "replace") {
+			const active = activeRef.current;
+			if (active === void 0) return;
+			active.reason = "replaced";
+			replaceRef.current = true;
+			hoverRef.current.active = false;
+			const pending = hoverRef.current.pending;
+			hoverRef.current.pending = void 0;
+			if (pending !== void 0) pending();
+			else state.close(active.key);
+		}
+	}
+	function close(key, reason) {
+		const active = activeRef.current;
+		if (active?.key !== key) return;
+		active.reason = reason;
+		hoverRef.current.active = false;
+		const pending = hoverRef.current.pending;
+		hoverRef.current.pending = void 0;
+		if (pending !== void 0) pending();
+		else state.close(key);
+	}
+	function onHoverStart() {
+		hoverRef.current.active = true;
+	}
+	function onHoverEnd() {
+		hoverRef.current.active = false;
+		const pending = hoverRef.current.pending;
+		hoverRef.current.pending = void 0;
+		pending?.();
+	}
+	function clearHover() {
+		hoverRef.current.active = false;
+		hoverRef.current.pending = void 0;
+	}
+	return {
+		state,
+		itemRef,
+		enqueue,
+		close,
+		onHoverStart,
+		onHoverEnd,
+		clearHover
+	};
+}
+
+//#endregion
+exports.useNotificationQueue = useNotificationQueue;
+//# sourceMappingURL=useNotificationQueue.cjs.map

package/dist/components/Notification/useNotificationQueue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNotificationQueue.cjs","names":[],"sources":["../../../src/components/Notification/useNotificationQueue.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react'\nimport { useToastState } from 'react-stately/useToastState'\nimport type { NotificationName, NotificationOrder } from './types'\n\nconst DEFAULT_DURATION_MS = 5000\nconst ANIMATION_DURATION_MS = 300\n\ntype QueueItem<TContent, TCloseReason> = {\n  content: TContent\n  onClose?: (reason: TCloseReason) => void\n}\n\nexport function useNotificationQueue<\n  TContent,\n  TCloseReason extends string = never,\n>(\n  name: NotificationName,\n  {\n    duration: durationOption,\n    order = 'queue',\n    timeoutReason,\n    unmountedReason,\n  }: {\n    duration?: number\n    order?: NotificationOrder\n    timeoutReason?: TCloseReason\n    unmountedReason?: TCloseReason\n  } = {},\n) {\n  const itemRef = useRef<HTMLDivElement>(null)\n  const queueRef = useRef<\n    Array<QueueItem<TContent, TCloseReason> & { duration: number }>\n  >([])\n  const isShowingRef = useRef(false)\n  const activeRef = useRef<{\n    key: string\n    onClose?: (reason: TCloseReason) => void\n    reason?: TCloseReason\n    notified: boolean\n  }>()\n  const replaceRef = useRef(false)\n  const hoverRef = useRef({\n    active: false,\n    pending: undefined as (() => void) | undefined,\n  })\n  // wrapUpdate を固定したまま、後から定義する playNext の最新版を呼ぶ\n  const playNextRef = useRef<(() => void) | undefined>(undefined)\n\n  // wrapUpdate の参照が変わると useToastState が ToastQueue を作り直すため useCallback で固定する\n  const wrapUpdate = useCallback(\n    function wrapUpdate(\n      update: () => void,\n      action: 'add' | 'remove' | 'clear',\n    ) {\n      if (action !== 'remove') {\n        update()\n        return\n      }\n\n      function notifyActive() {\n        const active = activeRef.current\n        if (active === undefined || active.notified) return\n        active.notified = true\n        const reason = active.reason ?? timeoutReason\n        if (reason !== undefined) {\n          active.onClose?.(reason)\n        }\n      }\n\n      function finish() {\n        activeRef.current = undefined\n        update()\n        playNextRef.current?.()\n      }\n\n      notifyActive()\n\n      if (hoverRef.current.active) {\n        hoverRef.current.pending = () => wrapUpdate(update, 'remove')\n        return\n      }\n\n      if (itemRef.current === null) {\n        finish()\n        return\n      }\n\n      if (replaceRef.current) {\n        replaceRef.current = false\n        finish()\n        return\n      }\n      const item: HTMLDivElement = itemRef.current\n\n      // allow-discreteが Newly Available で使えないので、要素の削除をアニメーション完了まで待つ\n      item.dataset.exiting = 'true'\n      let completed = false\n      let fallbackTimer = 0 // complete 内で clearTimeout(setTimeout(...)) すると新規タイマーを即キャンセルしてしまう\n      function handleAnimationEnd(event: AnimationEvent) {\n        if (\n          event.target === item &&\n          event.animationName === `charcoal-${name}-exit`\n        ) {\n          complete()\n        }\n      }\n      function complete() {\n        if (completed) return\n        completed = true\n        item.removeEventListener('animationend', handleAnimationEnd)\n        window.clearTimeout(fallbackTimer)\n        finish()\n      }\n      item.addEventListener('animationend', handleAnimationEnd)\n      fallbackTimer = window.setTimeout(complete, ANIMATION_DURATION_MS + 100)\n      if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {\n        complete()\n      }\n    },\n    [name, timeoutReason],\n  )\n\n  const state = useToastState<TContent>({\n    maxVisibleToasts: 1,\n    wrapUpdate,\n  })\n\n  useEffect(() => {\n    return () => {\n      const active = activeRef.current\n      if (active !== undefined && !active.notified) {\n        if (unmountedReason !== undefined) {\n          active.onClose?.(unmountedReason)\n        }\n      }\n      activeRef.current = undefined\n      queueRef.current = []\n      isShowingRef.current = false\n    }\n  }, [unmountedReason])\n\n  function playNext() {\n    const next = queueRef.current.shift()\n    if (next === undefined) {\n      isShowingRef.current = false\n      return\n    }\n\n    const { duration, onClose, content } = next\n    isShowingRef.current = true\n    const enterMs = window.matchMedia?.('(prefers-reduced-motion: reduce)')\n      .matches\n      ? 0\n      : ANIMATION_DURATION_MS\n    const key = state.add(content, {\n      // react-stately は 0 を「タイマーなし」と扱うため、最小の正数を渡す\n      timeout: Math.max(1, duration + enterMs),\n    })\n    activeRef.current = { key, onClose, notified: false }\n  }\n  playNextRef.current = playNext\n\n  function enqueue(\n    content: TContent,\n    onClose?: (reason: TCloseReason) => void,\n  ) {\n    const duration =\n      typeof durationOption === 'number' && Number.isFinite(durationOption)\n        ? Math.max(0, durationOption)\n        : DEFAULT_DURATION_MS\n\n    queueRef.current.push({\n      content,\n      onClose,\n      duration,\n    })\n    if (!isShowingRef.current) {\n      playNext()\n    } else if (order === 'replace') {\n      const active = activeRef.current\n      if (active === undefined) return\n\n      active.reason = 'replaced' as TCloseReason\n      replaceRef.current = true\n      hoverRef.current.active = false\n      const pending = hoverRef.current.pending\n      hoverRef.current.pending = undefined\n      if (pending !== undefined) {\n        pending()\n      } else {\n        state.close(active.key)\n      }\n    }\n  }\n\n  function close(key: string, reason: TCloseReason) {\n    const active = activeRef.current\n    if (active?.key !== key) return\n    active.reason = reason\n    hoverRef.current.active = false\n    const pending = hoverRef.current.pending\n    hoverRef.current.pending = undefined\n    if (pending !== undefined) {\n      pending()\n    } else {\n      state.close(key)\n    }\n  }\n\n  function onHoverStart() {\n    hoverRef.current.active = true\n  }\n\n  function onHoverEnd() {\n    hoverRef.current.active = false\n    const pending = hoverRef.current.pending\n    hoverRef.current.pending = undefined\n    pending?.()\n  }\n\n  function clearHover() {\n    hoverRef.current.active = false\n    hoverRef.current.pending = undefined\n  }\n\n  return {\n    state,\n    itemRef,\n    enqueue,\n    close,\n    onHoverStart,\n    onHoverEnd,\n    clearHover,\n  }\n}\n"],"mappings":"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"}

package/dist/components/Notification/useNotificationQueue.d.ts

@@ -0,0 +1,16 @@
+import type { NotificationName, NotificationOrder } from './types';
+export declare function useNotificationQueue<TContent, TCloseReason extends string = never>(name: NotificationName, { duration: durationOption, order, timeoutReason, unmountedReason, }?: {
+    duration?: number;
+    order?: NotificationOrder;
+    timeoutReason?: TCloseReason;
+    unmountedReason?: TCloseReason;
+}): {
+    state: import("react-stately/useToastState").ToastState<TContent>;
+    itemRef: import("react").RefObject<HTMLDivElement>;
+    enqueue: (content: TContent, onClose?: (reason: TCloseReason) => void) => void;
+    close: (key: string, reason: TCloseReason) => void;
+    onHoverStart: () => void;
+    onHoverEnd: () => void;
+    clearHover: () => void;
+};
+//# sourceMappingURL=useNotificationQueue.d.ts.map

package/dist/components/Notification/useNotificationQueue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNotificationQueue.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/useNotificationQueue.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAUlE,wBAAgB,oBAAoB,CAClC,QAAQ,EACR,YAAY,SAAS,MAAM,GAAG,KAAK,EAEnC,IAAI,EAAE,gBAAgB,EACtB,EACE,QAAQ,EAAE,cAAc,EACxB,KAAe,EACf,aAAa,EACb,eAAe,GAChB,GAAE;IACD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,iBAAiB,CAAA;IACzB,aAAa,CAAC,EAAE,YAAY,CAAA;IAC5B,eAAe,CAAC,EAAE,YAAY,CAAA;CAC1B;;;uBAwIK,QAAQ,YACP,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI;iBA+BtB,MAAM,UAAU,YAAY;;;;EAuCjD"}

package/dist/components/Notification/useNotificationQueue.js

@@ -0,0 +1,155 @@
+"use client";
+import { useCallback, useEffect, useRef } from "react";
+import { useToastState } from "react-stately/useToastState";
+
+//#region src/components/Notification/useNotificationQueue.ts
+const DEFAULT_DURATION_MS = 5e3;
+const ANIMATION_DURATION_MS = 300;
+function useNotificationQueue(name, { duration: durationOption, order = "queue", timeoutReason, unmountedReason } = {}) {
+	const itemRef = useRef(null);
+	const queueRef = useRef([]);
+	const isShowingRef = useRef(false);
+	const activeRef = useRef();
+	const replaceRef = useRef(false);
+	const hoverRef = useRef({
+		active: false,
+		pending: void 0
+	});
+	const playNextRef = useRef(void 0);
+	const state = useToastState({
+		maxVisibleToasts: 1,
+		wrapUpdate: useCallback(function wrapUpdate(update, action) {
+			if (action !== "remove") {
+				update();
+				return;
+			}
+			function notifyActive() {
+				const active = activeRef.current;
+				if (active === void 0 || active.notified) return;
+				active.notified = true;
+				const reason = active.reason ?? timeoutReason;
+				if (reason !== void 0) active.onClose?.(reason);
+			}
+			function finish() {
+				activeRef.current = void 0;
+				update();
+				playNextRef.current?.();
+			}
+			notifyActive();
+			if (hoverRef.current.active) {
+				hoverRef.current.pending = () => wrapUpdate(update, "remove");
+				return;
+			}
+			if (itemRef.current === null) {
+				finish();
+				return;
+			}
+			if (replaceRef.current) {
+				replaceRef.current = false;
+				finish();
+				return;
+			}
+			const item = itemRef.current;
+			item.dataset.exiting = "true";
+			let completed = false;
+			let fallbackTimer = 0;
+			function handleAnimationEnd(event) {
+				if (event.target === item && event.animationName === `charcoal-${name}-exit`) complete();
+			}
+			function complete() {
+				if (completed) return;
+				completed = true;
+				item.removeEventListener("animationend", handleAnimationEnd);
+				window.clearTimeout(fallbackTimer);
+				finish();
+			}
+			item.addEventListener("animationend", handleAnimationEnd);
+			fallbackTimer = window.setTimeout(complete, 400);
+			if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) complete();
+		}, [name, timeoutReason])
+	});
+	useEffect(() => {
+		return () => {
+			const active = activeRef.current;
+			if (active !== void 0 && !active.notified) {
+				if (unmountedReason !== void 0) active.onClose?.(unmountedReason);
+			}
+			activeRef.current = void 0;
+			queueRef.current = [];
+			isShowingRef.current = false;
+		};
+	}, [unmountedReason]);
+	function playNext() {
+		const next = queueRef.current.shift();
+		if (next === void 0) {
+			isShowingRef.current = false;
+			return;
+		}
+		const { duration, onClose, content } = next;
+		isShowingRef.current = true;
+		const enterMs = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? 0 : ANIMATION_DURATION_MS;
+		const key = state.add(content, { timeout: Math.max(1, duration + enterMs) });
+		activeRef.current = {
+			key,
+			onClose,
+			notified: false
+		};
+	}
+	playNextRef.current = playNext;
+	function enqueue(content, onClose) {
+		const duration = typeof durationOption === "number" && Number.isFinite(durationOption) ? Math.max(0, durationOption) : DEFAULT_DURATION_MS;
+		queueRef.current.push({
+			content,
+			onClose,
+			duration
+		});
+		if (!isShowingRef.current) playNext();
+		else if (order === "replace") {
+			const active = activeRef.current;
+			if (active === void 0) return;
+			active.reason = "replaced";
+			replaceRef.current = true;
+			hoverRef.current.active = false;
+			const pending = hoverRef.current.pending;
+			hoverRef.current.pending = void 0;
+			if (pending !== void 0) pending();
+			else state.close(active.key);
+		}
+	}
+	function close(key, reason) {
+		const active = activeRef.current;
+		if (active?.key !== key) return;
+		active.reason = reason;
+		hoverRef.current.active = false;
+		const pending = hoverRef.current.pending;
+		hoverRef.current.pending = void 0;
+		if (pending !== void 0) pending();
+		else state.close(key);
+	}
+	function onHoverStart() {
+		hoverRef.current.active = true;
+	}
+	function onHoverEnd() {
+		hoverRef.current.active = false;
+		const pending = hoverRef.current.pending;
+		hoverRef.current.pending = void 0;
+		pending?.();
+	}
+	function clearHover() {
+		hoverRef.current.active = false;
+		hoverRef.current.pending = void 0;
+	}
+	return {
+		state,
+		itemRef,
+		enqueue,
+		close,
+		onHoverStart,
+		onHoverEnd,
+		clearHover
+	};
+}
+
+//#endregion
+export { useNotificationQueue };
+//# sourceMappingURL=useNotificationQueue.js.map

package/dist/components/Notification/useNotificationQueue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNotificationQueue.js","names":[],"sources":["../../../src/components/Notification/useNotificationQueue.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react'\nimport { useToastState } from 'react-stately/useToastState'\nimport type { NotificationName, NotificationOrder } from './types'\n\nconst DEFAULT_DURATION_MS = 5000\nconst ANIMATION_DURATION_MS = 300\n\ntype QueueItem<TContent, TCloseReason> = {\n  content: TContent\n  onClose?: (reason: TCloseReason) => void\n}\n\nexport function useNotificationQueue<\n  TContent,\n  TCloseReason extends string = never,\n>(\n  name: NotificationName,\n  {\n    duration: durationOption,\n    order = 'queue',\n    timeoutReason,\n    unmountedReason,\n  }: {\n    duration?: number\n    order?: NotificationOrder\n    timeoutReason?: TCloseReason\n    unmountedReason?: TCloseReason\n  } = {},\n) {\n  const itemRef = useRef<HTMLDivElement>(null)\n  const queueRef = useRef<\n    Array<QueueItem<TContent, TCloseReason> & { duration: number }>\n  >([])\n  const isShowingRef = useRef(false)\n  const activeRef = useRef<{\n    key: string\n    onClose?: (reason: TCloseReason) => void\n    reason?: TCloseReason\n    notified: boolean\n  }>()\n  const replaceRef = useRef(false)\n  const hoverRef = useRef({\n    active: false,\n    pending: undefined as (() => void) | undefined,\n  })\n  // wrapUpdate を固定したまま、後から定義する playNext の最新版を呼ぶ\n  const playNextRef = useRef<(() => void) | undefined>(undefined)\n\n  // wrapUpdate の参照が変わると useToastState が ToastQueue を作り直すため useCallback で固定する\n  const wrapUpdate = useCallback(\n    function wrapUpdate(\n      update: () => void,\n      action: 'add' | 'remove' | 'clear',\n    ) {\n      if (action !== 'remove') {\n        update()\n        return\n      }\n\n      function notifyActive() {\n        const active = activeRef.current\n        if (active === undefined || active.notified) return\n        active.notified = true\n        const reason = active.reason ?? timeoutReason\n        if (reason !== undefined) {\n          active.onClose?.(reason)\n        }\n      }\n\n      function finish() {\n        activeRef.current = undefined\n        update()\n        playNextRef.current?.()\n      }\n\n      notifyActive()\n\n      if (hoverRef.current.active) {\n        hoverRef.current.pending = () => wrapUpdate(update, 'remove')\n        return\n      }\n\n      if (itemRef.current === null) {\n        finish()\n        return\n      }\n\n      if (replaceRef.current) {\n        replaceRef.current = false\n        finish()\n        return\n      }\n      const item: HTMLDivElement = itemRef.current\n\n      // allow-discreteが Newly Available で使えないので、要素の削除をアニメーション完了まで待つ\n      item.dataset.exiting = 'true'\n      let completed = false\n      let fallbackTimer = 0 // complete 内で clearTimeout(setTimeout(...)) すると新規タイマーを即キャンセルしてしまう\n      function handleAnimationEnd(event: AnimationEvent) {\n        if (\n          event.target === item &&\n          event.animationName === `charcoal-${name}-exit`\n        ) {\n          complete()\n        }\n      }\n      function complete() {\n        if (completed) return\n        completed = true\n        item.removeEventListener('animationend', handleAnimationEnd)\n        window.clearTimeout(fallbackTimer)\n        finish()\n      }\n      item.addEventListener('animationend', handleAnimationEnd)\n      fallbackTimer = window.setTimeout(complete, ANIMATION_DURATION_MS + 100)\n      if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {\n        complete()\n      }\n    },\n    [name, timeoutReason],\n  )\n\n  const state = useToastState<TContent>({\n    maxVisibleToasts: 1,\n    wrapUpdate,\n  })\n\n  useEffect(() => {\n    return () => {\n      const active = activeRef.current\n      if (active !== undefined && !active.notified) {\n        if (unmountedReason !== undefined) {\n          active.onClose?.(unmountedReason)\n        }\n      }\n      activeRef.current = undefined\n      queueRef.current = []\n      isShowingRef.current = false\n    }\n  }, [unmountedReason])\n\n  function playNext() {\n    const next = queueRef.current.shift()\n    if (next === undefined) {\n      isShowingRef.current = false\n      return\n    }\n\n    const { duration, onClose, content } = next\n    isShowingRef.current = true\n    const enterMs = window.matchMedia?.('(prefers-reduced-motion: reduce)')\n      .matches\n      ? 0\n      : ANIMATION_DURATION_MS\n    const key = state.add(content, {\n      // react-stately は 0 を「タイマーなし」と扱うため、最小の正数を渡す\n      timeout: Math.max(1, duration + enterMs),\n    })\n    activeRef.current = { key, onClose, notified: false }\n  }\n  playNextRef.current = playNext\n\n  function enqueue(\n    content: TContent,\n    onClose?: (reason: TCloseReason) => void,\n  ) {\n    const duration =\n      typeof durationOption === 'number' && Number.isFinite(durationOption)\n        ? Math.max(0, durationOption)\n        : DEFAULT_DURATION_MS\n\n    queueRef.current.push({\n      content,\n      onClose,\n      duration,\n    })\n    if (!isShowingRef.current) {\n      playNext()\n    } else if (order === 'replace') {\n      const active = activeRef.current\n      if (active === undefined) return\n\n      active.reason = 'replaced' as TCloseReason\n      replaceRef.current = true\n      hoverRef.current.active = false\n      const pending = hoverRef.current.pending\n      hoverRef.current.pending = undefined\n      if (pending !== undefined) {\n        pending()\n      } else {\n        state.close(active.key)\n      }\n    }\n  }\n\n  function close(key: string, reason: TCloseReason) {\n    const active = activeRef.current\n    if (active?.key !== key) return\n    active.reason = reason\n    hoverRef.current.active = false\n    const pending = hoverRef.current.pending\n    hoverRef.current.pending = undefined\n    if (pending !== undefined) {\n      pending()\n    } else {\n      state.close(key)\n    }\n  }\n\n  function onHoverStart() {\n    hoverRef.current.active = true\n  }\n\n  function onHoverEnd() {\n    hoverRef.current.active = false\n    const pending = hoverRef.current.pending\n    hoverRef.current.pending = undefined\n    pending?.()\n  }\n\n  function clearHover() {\n    hoverRef.current.active = false\n    hoverRef.current.pending = undefined\n  }\n\n  return {\n    state,\n    itemRef,\n    enqueue,\n    close,\n    onHoverStart,\n    onHoverEnd,\n    clearHover,\n  }\n}\n"],"mappings":"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"}

package/dist/index.cjs

@@ -27,7 +27,8 @@ const require_index$19 = require('./components/HintText/index2.cjs');
 const require_index$20 = require('./components/TextEllipsis/index2.cjs');
 const require_index$21 = require('./components/Pagination/index2.cjs');
 const require_index$22 = require('./components/Carousel/index2.cjs');
-const require_index$23 = require('./components/Snackbar/index2.cjs');
+const require_index$23 = require('./components/Notification/Snackbar/index2.cjs');
+const require_index$24 = require('./components/Notification/Toast/index2.cjs');
 require('./components/FocusRing/index.cjs');
 let react_aria_private_overlays_useModal = require("react-aria/private/overlays/useModal");
 
@@ -76,7 +77,9 @@ exports.prefersColorScheme = require_themeHelper.prefersColorScheme;
 exports.themeSelector = require_themeHelper.themeSelector;
 exports.themeSetter = require_themeHelper.themeSetter;
 exports.unstable_Snackbar = require_index$23.default;
+exports.unstable_Toast = require_index$24.default;
 exports.unstable_useSnackbar = require_index$23.useSnackbar;
+exports.unstable_useToast = require_index$24.useToast;
 exports.useLocalStorage = require_themeHelper.useLocalStorage;
 exports.useMedia = require_themeHelper.useMedia;
 exports.useTheme = require_themeHelper.useTheme;