@fringeworks/react-defer-rendering 0.8.0

package/useDeferUntilAsyncComplete/types.mjs

@@ -0,0 +1 @@
+export {  };

package/useDeferUntilAsyncComplete/useDeferUntilAsyncComplete.cjs

@@ -0,0 +1,20 @@
+'use client';
+
+const require__usePromiseState = require('../_usePromiseState.cjs');
+const require_useDeferUntilReady_useDeferUntilReady = require('../useDeferUntilReady/useDeferUntilReady.cjs');
+require('../useDeferUntilReady/index.cjs');
+
+//#region src/useDeferUntilAsyncComplete/useDeferUntilAsyncComplete.tsx
+/**
+* 非同期関数の処理の完了まで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param asyncFn 非同期関数（null/undefinedの場合は待たずに描画する）
+* @param options オプション
+* @returns state（'pending', 'ready', 'fallback'）と状態に応じたノード
+*/
+function useDeferUntilAsyncComplete(target, asyncFn, options = {}) {
+	return require_useDeferUntilReady_useDeferUntilReady(target, require__usePromiseState(asyncFn), options);
+}
+
+//#endregion
+module.exports = useDeferUntilAsyncComplete;

package/useDeferUntilAsyncComplete/useDeferUntilAsyncComplete.d.cts

@@ -0,0 +1,14 @@
+import { DeferRenderingResult } from "../types.cjs";
+import { UseDeferUntilAsyncCompleteOptions } from "./types.cjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilAsyncComplete/useDeferUntilAsyncComplete.d.ts
+/**
+ * 非同期関数の処理の完了まで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param asyncFn 非同期関数（null/undefinedの場合は待たずに描画する）
+ * @param options オプション
+ * @returns state（'pending', 'ready', 'fallback'）と状態に応じたノード
+ */
+declare function useDeferUntilAsyncComplete<T extends ReactNode, P extends ReactNode = ReactNode, E extends ReactNode = ReactNode>(target: T, asyncFn: (() => Promise<void>) | null | undefined, options?: UseDeferUntilAsyncCompleteOptions<P, E>): DeferRenderingResult<T | P | E>;
+export = useDeferUntilAsyncComplete;

package/useDeferUntilAsyncComplete/useDeferUntilAsyncComplete.d.mts

@@ -0,0 +1,15 @@
+import { DeferRenderingResult } from "../types.mjs";
+import { UseDeferUntilAsyncCompleteOptions } from "./types.mjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilAsyncComplete/useDeferUntilAsyncComplete.d.ts
+/**
+ * 非同期関数の処理の完了まで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param asyncFn 非同期関数（null/undefinedの場合は待たずに描画する）
+ * @param options オプション
+ * @returns state（'pending', 'ready', 'fallback'）と状態に応じたノード
+ */
+declare function useDeferUntilAsyncComplete<T extends ReactNode, P extends ReactNode = ReactNode, E extends ReactNode = ReactNode>(target: T, asyncFn: (() => Promise<void>) | null | undefined, options?: UseDeferUntilAsyncCompleteOptions<P, E>): DeferRenderingResult<T | P | E>;
+//#endregion
+export { useDeferUntilAsyncComplete as default };

package/useDeferUntilAsyncComplete/useDeferUntilAsyncComplete.mjs

@@ -0,0 +1,20 @@
+'use client';
+
+import usePromiseState from "../_usePromiseState.mjs";
+import useDeferUntilReady from "../useDeferUntilReady/useDeferUntilReady.mjs";
+import "../useDeferUntilReady/index.mjs";
+
+//#region src/useDeferUntilAsyncComplete/useDeferUntilAsyncComplete.tsx
+/**
+* 非同期関数の処理の完了まで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param asyncFn 非同期関数（null/undefinedの場合は待たずに描画する）
+* @param options オプション
+* @returns state（'pending', 'ready', 'fallback'）と状態に応じたノード
+*/
+function useDeferUntilAsyncComplete(target, asyncFn, options = {}) {
+	return useDeferUntilReady(target, usePromiseState(asyncFn), options);
+}
+
+//#endregion
+export { useDeferUntilAsyncComplete as default };

package/useDeferUntilBreakpoint/index.cjs

@@ -0,0 +1,5 @@
+'use client';
+
+const require_useDeferUntilBreakpoint_useDeferUntilBreakpoint = require('./useDeferUntilBreakpoint.cjs');
+
+module.exports = require_useDeferUntilBreakpoint_useDeferUntilBreakpoint;

package/useDeferUntilBreakpoint/index.d.cts

@@ -0,0 +1,3 @@
+import { UseDeferUntilBreakpointOptions } from "./types.cjs";
+import useDeferUntilBreakpoint from "./useDeferUntilBreakpoint.cjs";
+export { type UseDeferUntilBreakpointOptions, useDeferUntilBreakpoint as default };

package/useDeferUntilBreakpoint/index.d.mts

@@ -0,0 +1,3 @@
+import { UseDeferUntilBreakpointOptions } from "./types.mjs";
+import useDeferUntilBreakpoint from "./useDeferUntilBreakpoint.mjs";
+export { type UseDeferUntilBreakpointOptions, useDeferUntilBreakpoint as default };

package/useDeferUntilBreakpoint/index.mjs

@@ -0,0 +1,5 @@
+'use client';
+
+import useDeferUntilBreakpoint from "./useDeferUntilBreakpoint.mjs";
+
+export { useDeferUntilBreakpoint as default };

package/useDeferUntilBreakpoint/types.d.cts

@@ -0,0 +1,20 @@
+import { UseDeferUntilTrueOptions } from "../useDeferUntilTrue/types.cjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilBreakpoint/types.d.ts
+type UseDeferUntilBreakpointOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P> & {
+  /**
+   * メディアクエリー変更時のデバウンス時間（ミリ秒）
+   * デフォルトは100ms
+   * @default 100
+   */
+  detectionDelay?: number;
+  /**
+   * SSR時など、実際のメディアクエリーを判定できない環境での初期値\
+   * デフォルトはfalse
+   * @default false
+   */
+  initialCondition?: boolean;
+};
+//#endregion
+export { UseDeferUntilBreakpointOptions };

package/useDeferUntilBreakpoint/types.d.mts

@@ -0,0 +1,20 @@
+import { UseDeferUntilTrueOptions } from "../useDeferUntilTrue/types.mjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilBreakpoint/types.d.ts
+type UseDeferUntilBreakpointOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P> & {
+  /**
+   * メディアクエリー変更時のデバウンス時間（ミリ秒）
+   * デフォルトは100ms
+   * @default 100
+   */
+  detectionDelay?: number;
+  /**
+   * SSR時など、実際のメディアクエリーを判定できない環境での初期値\
+   * デフォルトはfalse
+   * @default false
+   */
+  initialCondition?: boolean;
+};
+//#endregion
+export { UseDeferUntilBreakpointOptions };

package/useDeferUntilBreakpoint/types.mjs

@@ -0,0 +1 @@
+export {  };

package/useDeferUntilBreakpoint/useDeferUntilBreakpoint.cjs

@@ -0,0 +1,44 @@
+'use client';
+
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_useDeferUntilTrue_useDeferUntilTrue = require('../useDeferUntilTrue/useDeferUntilTrue.cjs');
+require('../useDeferUntilTrue/index.cjs');
+let react = require("react");
+let _fringeworks_utils_timer_debounce = require("@fringeworks/utils/timer/debounce");
+_fringeworks_utils_timer_debounce = require_runtime.__toESM(_fringeworks_utils_timer_debounce, 1);
+
+//#region src/useDeferUntilBreakpoint/useDeferUntilBreakpoint.tsx
+/**
+* メディアクエリーが一致するまで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param mediaQuery メディアクエリ（例: '(max-width: 768px)'）（null/undefinedの場合は待たずに描画する）
+* @param options オプション
+* @returns state（'pending', 'ready'）と状態に応じたノード
+*/
+function useDeferUntilBreakpoint(target, mediaQuery, options = {}) {
+	const { detectionDelay = 100, preserveOnceReady, initialCondition = false, ...opts } = options;
+	return require_useDeferUntilTrue_useDeferUntilTrue(target, (0, react.useSyncExternalStore)((0, react.useCallback)((onStoreChange) => {
+		if (!mediaQuery) return () => {};
+		const mediaQueryList = window.matchMedia(mediaQuery);
+		if (preserveOnceReady && mediaQueryList.matches) return () => {};
+		const handleChange = (event) => {
+			onStoreChange();
+			if (preserveOnceReady && event.matches) mediaQueryList.removeEventListener("change", debouncedHandleChange);
+		};
+		const debouncedHandleChange = (0, _fringeworks_utils_timer_debounce.default)(handleChange, detectionDelay);
+		mediaQueryList.addEventListener("change", debouncedHandleChange);
+		return () => {
+			mediaQueryList.removeEventListener("change", debouncedHandleChange);
+		};
+	}, [
+		mediaQuery,
+		preserveOnceReady,
+		detectionDelay
+	]), (0, react.useCallback)(() => !mediaQuery || window.matchMedia(mediaQuery).matches, [mediaQuery]), (0, react.useCallback)(() => !mediaQuery || initialCondition, [mediaQuery, initialCondition])), {
+		preserveOnceReady,
+		...opts
+	});
+}
+
+//#endregion
+module.exports = useDeferUntilBreakpoint;

package/useDeferUntilBreakpoint/useDeferUntilBreakpoint.d.cts

@@ -0,0 +1,14 @@
+import { DeferRenderingResult } from "../types.cjs";
+import { UseDeferUntilBreakpointOptions } from "./types.cjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilBreakpoint/useDeferUntilBreakpoint.d.ts
+/**
+ * メディアクエリーが一致するまで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param mediaQuery メディアクエリ（例: '(max-width: 768px)'）（null/undefinedの場合は待たずに描画する）
+ * @param options オプション
+ * @returns state（'pending', 'ready'）と状態に応じたノード
+ */
+declare function useDeferUntilBreakpoint<T extends ReactNode, P extends ReactNode = ReactNode>(target: T, mediaQuery: string | null | undefined, options?: UseDeferUntilBreakpointOptions<P>): DeferRenderingResult<T | P>;
+export = useDeferUntilBreakpoint;

package/useDeferUntilBreakpoint/useDeferUntilBreakpoint.d.mts

@@ -0,0 +1,15 @@
+import { DeferRenderingResult } from "../types.mjs";
+import { UseDeferUntilBreakpointOptions } from "./types.mjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilBreakpoint/useDeferUntilBreakpoint.d.ts
+/**
+ * メディアクエリーが一致するまで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param mediaQuery メディアクエリ（例: '(max-width: 768px)'）（null/undefinedの場合は待たずに描画する）
+ * @param options オプション
+ * @returns state（'pending', 'ready'）と状態に応じたノード
+ */
+declare function useDeferUntilBreakpoint<T extends ReactNode, P extends ReactNode = ReactNode>(target: T, mediaQuery: string | null | undefined, options?: UseDeferUntilBreakpointOptions<P>): DeferRenderingResult<T | P>;
+//#endregion
+export { useDeferUntilBreakpoint as default };

package/useDeferUntilBreakpoint/useDeferUntilBreakpoint.mjs

@@ -0,0 +1,42 @@
+'use client';
+
+import useDeferUntilTrue from "../useDeferUntilTrue/useDeferUntilTrue.mjs";
+import "../useDeferUntilTrue/index.mjs";
+import { useCallback, useSyncExternalStore } from "react";
+import debounce from "@fringeworks/utils/timer/debounce";
+
+//#region src/useDeferUntilBreakpoint/useDeferUntilBreakpoint.tsx
+/**
+* メディアクエリーが一致するまで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param mediaQuery メディアクエリ（例: '(max-width: 768px)'）（null/undefinedの場合は待たずに描画する）
+* @param options オプション
+* @returns state（'pending', 'ready'）と状態に応じたノード
+*/
+function useDeferUntilBreakpoint(target, mediaQuery, options = {}) {
+	const { detectionDelay = 100, preserveOnceReady, initialCondition = false, ...opts } = options;
+	return useDeferUntilTrue(target, useSyncExternalStore(useCallback((onStoreChange) => {
+		if (!mediaQuery) return () => {};
+		const mediaQueryList = window.matchMedia(mediaQuery);
+		if (preserveOnceReady && mediaQueryList.matches) return () => {};
+		const handleChange = (event) => {
+			onStoreChange();
+			if (preserveOnceReady && event.matches) mediaQueryList.removeEventListener("change", debouncedHandleChange);
+		};
+		const debouncedHandleChange = debounce(handleChange, detectionDelay);
+		mediaQueryList.addEventListener("change", debouncedHandleChange);
+		return () => {
+			mediaQueryList.removeEventListener("change", debouncedHandleChange);
+		};
+	}, [
+		mediaQuery,
+		preserveOnceReady,
+		detectionDelay
+	]), useCallback(() => !mediaQuery || window.matchMedia(mediaQuery).matches, [mediaQuery]), useCallback(() => !mediaQuery || initialCondition, [mediaQuery, initialCondition])), {
+		preserveOnceReady,
+		...opts
+	});
+}
+
+//#endregion
+export { useDeferUntilBreakpoint as default };

package/useDeferUntilCallThreshold/index.cjs

@@ -0,0 +1,5 @@
+'use client';
+
+const require_useDeferUntilCallThreshold_useDeferUntilCallThreshold = require('./useDeferUntilCallThreshold.cjs');
+
+module.exports = require_useDeferUntilCallThreshold_useDeferUntilCallThreshold;

package/useDeferUntilCallThreshold/index.d.cts

@@ -0,0 +1,3 @@
+import { UseDeferUntilCallThresholdOptions } from "./types.cjs";
+import useDeferUntilCallThreshold from "./useDeferUntilCallThreshold.cjs";
+export { type UseDeferUntilCallThresholdOptions, useDeferUntilCallThreshold as default };

package/useDeferUntilCallThreshold/index.d.mts

@@ -0,0 +1,3 @@
+import { UseDeferUntilCallThresholdOptions } from "./types.mjs";
+import useDeferUntilCallThreshold from "./useDeferUntilCallThreshold.mjs";
+export { type UseDeferUntilCallThresholdOptions, useDeferUntilCallThreshold as default };

package/useDeferUntilCallThreshold/index.mjs

@@ -0,0 +1,5 @@
+'use client';
+
+import useDeferUntilCallThreshold from "./useDeferUntilCallThreshold.mjs";
+
+export { useDeferUntilCallThreshold as default };

package/useDeferUntilCallThreshold/types.d.cts

@@ -0,0 +1,23 @@
+import { UseDeferUntilOnReadyOptions } from "../useDeferUntilOnReady/types.cjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilCallThreshold/types.d.ts
+type UseDeferUntilCallThresholdOptions<P extends ReactNode = ReactNode, E extends ReactNode = ReactNode> = UseDeferUntilOnReadyOptions<P, E> & {
+  /**
+   * readyになる為のonReadyの呼び出し回数
+   * 未指定の場合は1回
+   */
+  onReadyCount?: number;
+  /**
+   * fallbackになる為のonFallbackの呼び出し回数
+   * 未指定の場合は1回
+   */
+  onFallbackCount?: number;
+  /**
+   * pendingになる為のonPendingの呼び出し回数
+   * 未指定の場合は1回
+   */
+  onPendingCount?: number;
+};
+//#endregion
+export { UseDeferUntilCallThresholdOptions };

package/useDeferUntilCallThreshold/types.d.mts

@@ -0,0 +1,23 @@
+import { UseDeferUntilOnReadyOptions } from "../useDeferUntilOnReady/types.mjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilCallThreshold/types.d.ts
+type UseDeferUntilCallThresholdOptions<P extends ReactNode = ReactNode, E extends ReactNode = ReactNode> = UseDeferUntilOnReadyOptions<P, E> & {
+  /**
+   * readyになる為のonReadyの呼び出し回数
+   * 未指定の場合は1回
+   */
+  onReadyCount?: number;
+  /**
+   * fallbackになる為のonFallbackの呼び出し回数
+   * 未指定の場合は1回
+   */
+  onFallbackCount?: number;
+  /**
+   * pendingになる為のonPendingの呼び出し回数
+   * 未指定の場合は1回
+   */
+  onPendingCount?: number;
+};
+//#endregion
+export { UseDeferUntilCallThresholdOptions };

package/useDeferUntilCallThreshold/types.mjs

@@ -0,0 +1 @@
+export {  };

package/useDeferUntilCallThreshold/useDeferUntilCallThreshold.cjs

@@ -0,0 +1,55 @@
+'use client';
+
+const require_useDeferUntilOnReady_useDeferUntilOnReady = require('../useDeferUntilOnReady/useDeferUntilOnReady.cjs');
+require('../useDeferUntilOnReady/index.cjs');
+let react = require("react");
+
+//#region src/useDeferUntilCallThreshold/useDeferUntilCallThreshold.tsx
+/**
+* 戻り値として返す`onReady`等のハンドラーが指定回数呼ばれるまで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param options オプション
+* @returns state（'pending', 'ready', 'fallback'）と状態に応じたノードと状態変更用のハンドラー
+*/
+function useDeferUntilCallThreshold(target, options = {}) {
+	const { onPendingCount = 1, onFallbackCount = 1, onReadyCount = 1, ...opts } = options;
+	const { onPending: handlePending, onFallback: handleFallback, onReady: handleReady, ...rest } = require_useDeferUntilOnReady_useDeferUntilOnReady(target, opts);
+	const pendingContRef = (0, react.useRef)(0);
+	const fallbackContRef = (0, react.useRef)(0);
+	const readyContRef = (0, react.useRef)(0);
+	const reset = (0, react.useCallback)(() => {
+		pendingContRef.current = 0;
+		fallbackContRef.current = 0;
+		readyContRef.current = 0;
+	}, []);
+	const onPending = (0, react.useCallback)(() => {
+		pendingContRef.current += 1;
+		if (onPendingCount <= pendingContRef.current) {
+			reset();
+			handlePending();
+		}
+	}, [handlePending, onPendingCount]);
+	const onFallback = (0, react.useCallback)(() => {
+		fallbackContRef.current += 1;
+		if (onFallbackCount <= fallbackContRef.current) {
+			reset();
+			handleFallback();
+		}
+	}, [handleFallback, onFallbackCount]);
+	const onReady = (0, react.useCallback)(() => {
+		readyContRef.current += 1;
+		if (onReadyCount <= readyContRef.current) {
+			reset();
+			handleReady();
+		}
+	}, [handleReady, onReadyCount]);
+	return {
+		...rest,
+		onPending,
+		onFallback,
+		onReady
+	};
+}
+
+//#endregion
+module.exports = useDeferUntilCallThreshold;

package/useDeferUntilCallThreshold/useDeferUntilCallThreshold.d.cts

@@ -0,0 +1,13 @@
+import { DeferRenderingWithHandlersResult } from "../types.cjs";
+import { UseDeferUntilCallThresholdOptions } from "./types.cjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilCallThreshold/useDeferUntilCallThreshold.d.ts
+/**
+ * 戻り値として返す`onReady`等のハンドラーが指定回数呼ばれるまで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param options オプション
+ * @returns state（'pending', 'ready', 'fallback'）と状態に応じたノードと状態変更用のハンドラー
+ */
+declare function useDeferUntilCallThreshold<T extends ReactNode, P extends ReactNode = ReactNode, E extends ReactNode = ReactNode>(target: T, options?: UseDeferUntilCallThresholdOptions<P, E>): DeferRenderingWithHandlersResult<T | P | E>;
+export = useDeferUntilCallThreshold;

package/useDeferUntilCallThreshold/useDeferUntilCallThreshold.d.mts

@@ -0,0 +1,14 @@
+import { DeferRenderingWithHandlersResult } from "../types.mjs";
+import { UseDeferUntilCallThresholdOptions } from "./types.mjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilCallThreshold/useDeferUntilCallThreshold.d.ts
+/**
+ * 戻り値として返す`onReady`等のハンドラーが指定回数呼ばれるまで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param options オプション
+ * @returns state（'pending', 'ready', 'fallback'）と状態に応じたノードと状態変更用のハンドラー
+ */
+declare function useDeferUntilCallThreshold<T extends ReactNode, P extends ReactNode = ReactNode, E extends ReactNode = ReactNode>(target: T, options?: UseDeferUntilCallThresholdOptions<P, E>): DeferRenderingWithHandlersResult<T | P | E>;
+//#endregion
+export { useDeferUntilCallThreshold as default };

package/useDeferUntilCallThreshold/useDeferUntilCallThreshold.mjs

@@ -0,0 +1,55 @@
+'use client';
+
+import useDeferUntilOnReady from "../useDeferUntilOnReady/useDeferUntilOnReady.mjs";
+import "../useDeferUntilOnReady/index.mjs";
+import { useCallback, useRef } from "react";
+
+//#region src/useDeferUntilCallThreshold/useDeferUntilCallThreshold.tsx
+/**
+* 戻り値として返す`onReady`等のハンドラーが指定回数呼ばれるまで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param options オプション
+* @returns state（'pending', 'ready', 'fallback'）と状態に応じたノードと状態変更用のハンドラー
+*/
+function useDeferUntilCallThreshold(target, options = {}) {
+	const { onPendingCount = 1, onFallbackCount = 1, onReadyCount = 1, ...opts } = options;
+	const { onPending: handlePending, onFallback: handleFallback, onReady: handleReady, ...rest } = useDeferUntilOnReady(target, opts);
+	const pendingContRef = useRef(0);
+	const fallbackContRef = useRef(0);
+	const readyContRef = useRef(0);
+	const reset = useCallback(() => {
+		pendingContRef.current = 0;
+		fallbackContRef.current = 0;
+		readyContRef.current = 0;
+	}, []);
+	const onPending = useCallback(() => {
+		pendingContRef.current += 1;
+		if (onPendingCount <= pendingContRef.current) {
+			reset();
+			handlePending();
+		}
+	}, [handlePending, onPendingCount]);
+	const onFallback = useCallback(() => {
+		fallbackContRef.current += 1;
+		if (onFallbackCount <= fallbackContRef.current) {
+			reset();
+			handleFallback();
+		}
+	}, [handleFallback, onFallbackCount]);
+	const onReady = useCallback(() => {
+		readyContRef.current += 1;
+		if (onReadyCount <= readyContRef.current) {
+			reset();
+			handleReady();
+		}
+	}, [handleReady, onReadyCount]);
+	return {
+		...rest,
+		onPending,
+		onFallback,
+		onReady
+	};
+}
+
+//#endregion
+export { useDeferUntilCallThreshold as default };

package/useDeferUntilChange/index.cjs

@@ -0,0 +1,5 @@
+'use client';
+
+const require_useDeferUntilChange_useDeferUntilChange = require('./useDeferUntilChange.cjs');
+
+module.exports = require_useDeferUntilChange_useDeferUntilChange;

package/useDeferUntilChange/index.d.cts

@@ -0,0 +1,3 @@
+import { UseDeferUntilChangeOptions } from "./types.cjs";
+import useDeferUntilChange from "./useDeferUntilChange.cjs";
+export { type UseDeferUntilChangeOptions, useDeferUntilChange as default };

package/useDeferUntilChange/index.d.mts

@@ -0,0 +1,3 @@
+import { UseDeferUntilChangeOptions } from "./types.mjs";
+import useDeferUntilChange from "./useDeferUntilChange.mjs";
+export { type UseDeferUntilChangeOptions, useDeferUntilChange as default };

package/useDeferUntilChange/index.mjs

@@ -0,0 +1,5 @@
+'use client';
+
+import useDeferUntilChange from "./useDeferUntilChange.mjs";
+
+export { useDeferUntilChange as default };

package/useDeferUntilChange/types.d.cts

@@ -0,0 +1,7 @@
+import { UseDeferUntilTrueOptions } from "../useDeferUntilTrue/types.cjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilChange/types.d.ts
+type UseDeferUntilChangeOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P>;
+//#endregion
+export { UseDeferUntilChangeOptions };

package/useDeferUntilChange/types.d.mts

@@ -0,0 +1,7 @@
+import { UseDeferUntilTrueOptions } from "../useDeferUntilTrue/types.mjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilChange/types.d.ts
+type UseDeferUntilChangeOptions<P extends ReactNode = ReactNode> = UseDeferUntilTrueOptions<P>;
+//#endregion
+export { UseDeferUntilChangeOptions };

package/useDeferUntilChange/types.mjs

@@ -0,0 +1 @@
+export {  };

package/useDeferUntilChange/useDeferUntilChange.cjs

@@ -0,0 +1,30 @@
+'use client';
+
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_useDeferUntilTrue_useDeferUntilTrue = require('../useDeferUntilTrue/useDeferUntilTrue.cjs');
+require('../useDeferUntilTrue/index.cjs');
+let _fringeworks_react_utils_hooks_useIsMounted = require("@fringeworks/react-utils/hooks/useIsMounted");
+_fringeworks_react_utils_hooks_useIsMounted = require_runtime.__toESM(_fringeworks_react_utils_hooks_useIsMounted, 1);
+let react = require("react");
+
+//#region src/useDeferUntilChange/useDeferUntilChange.tsx
+const NO_VALUE = Symbol("NO_VALUE");
+/**
+* 値が変更されるまで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param value 値
+* @param options オプション
+* @returns state（'pending', 'ready'）と状態に応じたノード
+*/
+function useDeferUntilChange(target, value, options = {}) {
+	const [prevValue, setPrevValue] = (0, react.useState)(NO_VALUE);
+	const isMounted = (0, _fringeworks_react_utils_hooks_useIsMounted.default)();
+	const result = require_useDeferUntilTrue_useDeferUntilTrue(target, prevValue === value, options);
+	(0, react.useEffect)(() => {
+		if (isMounted()) setPrevValue(value);
+	}, [value]);
+	return result;
+}
+
+//#endregion
+module.exports = useDeferUntilChange;

package/useDeferUntilChange/useDeferUntilChange.d.cts

@@ -0,0 +1,14 @@
+import { DeferRenderingResult } from "../types.cjs";
+import { UseDeferUntilChangeOptions } from "./types.cjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilChange/useDeferUntilChange.d.ts
+/**
+ * 値が変更されるまで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param value 値
+ * @param options オプション
+ * @returns state（'pending', 'ready'）と状態に応じたノード
+ */
+declare function useDeferUntilChange<T extends ReactNode, P extends ReactNode = ReactNode>(target: T, value: unknown, options?: UseDeferUntilChangeOptions<P>): DeferRenderingResult<T | P>;
+export = useDeferUntilChange;

package/useDeferUntilChange/useDeferUntilChange.d.mts

@@ -0,0 +1,15 @@
+import { DeferRenderingResult } from "../types.mjs";
+import { UseDeferUntilChangeOptions } from "./types.mjs";
+import { ReactNode } from "react";
+
+//#region src/useDeferUntilChange/useDeferUntilChange.d.ts
+/**
+ * 値が変更されるまで描画を遅延させるhook
+ * @param target 描画対象のノード
+ * @param value 値
+ * @param options オプション
+ * @returns state（'pending', 'ready'）と状態に応じたノード
+ */
+declare function useDeferUntilChange<T extends ReactNode, P extends ReactNode = ReactNode>(target: T, value: unknown, options?: UseDeferUntilChangeOptions<P>): DeferRenderingResult<T | P>;
+//#endregion
+export { useDeferUntilChange as default };

package/useDeferUntilChange/useDeferUntilChange.mjs

@@ -0,0 +1,28 @@
+'use client';
+
+import useDeferUntilTrue from "../useDeferUntilTrue/useDeferUntilTrue.mjs";
+import "../useDeferUntilTrue/index.mjs";
+import useIsMounted from "@fringeworks/react-utils/hooks/useIsMounted";
+import { useEffect, useState } from "react";
+
+//#region src/useDeferUntilChange/useDeferUntilChange.tsx
+const NO_VALUE = Symbol("NO_VALUE");
+/**
+* 値が変更されるまで描画を遅延させるhook
+* @param target 描画対象のノード
+* @param value 値
+* @param options オプション
+* @returns state（'pending', 'ready'）と状態に応じたノード
+*/
+function useDeferUntilChange(target, value, options = {}) {
+	const [prevValue, setPrevValue] = useState(NO_VALUE);
+	const isMounted = useIsMounted();
+	const result = useDeferUntilTrue(target, prevValue === value, options);
+	useEffect(() => {
+		if (isMounted()) setPrevValue(value);
+	}, [value]);
+	return result;
+}
+
+//#endregion
+export { useDeferUntilChange as default };

package/useDeferUntilDate/index.cjs

@@ -0,0 +1,5 @@
+'use client';
+
+const require_useDeferUntilDate_useDeferUntilDate = require('./useDeferUntilDate.cjs');
+
+module.exports = require_useDeferUntilDate_useDeferUntilDate;