smarthr-ui 99.3.2 → 99.4.0

package/lib/components/Dialog/FocusTrap.js

@@ -1,55 +1,72 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useMemo, useImperativeHandle, useEffect } from 'react';
+import { forwardRef, useRef, useMemo, useImperativeHandle } from 'react';
+import { useMergeRefs } from '../../hooks/useMergeRefs.js';
 import { tabbable } from '../../libs/tabbable.js';
 
+const DUMMY_FOCUS_CLASSNAME = 'smarthr-ui-Dialog-dummyFocus';
+const DUMMY_FOCUS_SELECTOR = `.${DUMMY_FOCUS_CLASSNAME}[tabIndex]`;
 const FocusTrap = forwardRef(({ firstFocusTarget, children }, ref) => {
+    // TODO: innerRefを削除して、functionsのuseMemoの中にletで変数としてnodeの参照を持つことを検討
     const innerRef = useRef(null);
-    const dummyFocusRef = useRef(null);
-    const functions = useMemo(() => ({
-        focus: () => {
-            (firstFocusTarget?.current || dummyFocusRef.current)?.focus();
-        },
-    }), [firstFocusTarget]);
-    useImperativeHandle(ref, () => functions, [functions]);
-    useEffect(() => {
-        // FocusTrap がマウントされた時点のフォーカス要素を保存
-        const triggerElement = document.activeElement;
-        functions.focus();
-        const handleKeyDown = (e) => {
-            // IME 変換中の Tab は変換候補の選択に使われるため、フォーカストラップの対象外にする。
-            // ここで preventDefault してしまうと、Dialog 内で日本語入力中に Tab を押しても
-            // 変換候補が確定されず、未確定文字列がそのまま入力されてしまう。
-            if (e.key !== 'Tab' || e.isComposing || innerRef.current === null) {
-                return;
-            }
-            const tabbables = tabbable(innerRef.current).filter((elm) => elm.tabIndex >= 0);
-            if (tabbables.length === 0) {
-                return;
-            }
-            const firstTabbable = tabbables[0];
-            const lastTabbable = tabbables[tabbables.length - 1];
-            const currentFocused = tabbables.find((elm) => elm === e.target);
-            if (e.shiftKey) {
-                if (currentFocused === firstTabbable || document.activeElement === dummyFocusRef.current) {
-                    e.preventDefault();
-                    lastTabbable.focus();
-                }
-            }
-            else if (currentFocused === lastTabbable) {
-                e.preventDefault();
-                firstTabbable.focus();
-            }
+    const functions = useMemo(() => {
+        const findDummyFocus = () => innerRef.current?.querySelector(DUMMY_FOCUS_SELECTOR);
+        const focus = () => {
+            (firstFocusTarget?.current || findDummyFocus())?.focus();
         };
-        window.addEventListener('keydown', handleKeyDown);
-        return () => {
-            window.removeEventListener('keydown', handleKeyDown);
-            // フォーカストラップ終了時にトリガにフォーカスを戻す
-            if (triggerElement instanceof HTMLElement) {
-                triggerElement.focus();
-            }
+        return {
+            callbackRef: (node) => {
+                if (!node) {
+                    return;
+                }
+                // FocusTrap がマウントされた時点のフォーカス要素を保存
+                const triggerElement = document.activeElement;
+                const rAFId = requestAnimationFrame(focus);
+                const handleKeyDown = (e) => {
+                    // IME 変換中の Tab は変換候補の選択に使われるため、フォーカストラップの対象外にする。
+                    // ここで preventDefault してしまうと、Dialog 内で日本語入力中に Tab を押しても
+                    // 変換候補が確定されず、未確定文字列がそのまま入力されてしまう。
+                    if (e.key !== 'Tab' || e.isComposing) {
+                        return;
+                    }
+                    const tabbables = tabbable(node).filter((elm) => elm.tabIndex >= 0);
+                    if (tabbables.length === 0) {
+                        return;
+                    }
+                    const firstTabbable = tabbables[0];
+                    const lastTabbable = tabbables[tabbables.length - 1];
+                    const currentFocused = tabbables.find((elm) => elm === e.target);
+                    if (e.shiftKey) {
+                        if (currentFocused === firstTabbable || document.activeElement === findDummyFocus()) {
+                            e.preventDefault();
+                            lastTabbable.focus();
+                        }
+                    }
+                    else if (currentFocused === lastTabbable) {
+                        e.preventDefault();
+                        firstTabbable.focus();
+                    }
+                };
+                window.addEventListener('keydown', handleKeyDown);
+                // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している
+                // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する
+                return () => {
+                    cancelAnimationFrame(rAFId);
+                    window.removeEventListener('keydown', handleKeyDown);
+                    if (triggerElement instanceof HTMLElement) {
+                        triggerElement.focus();
+                    }
+                };
+            },
+            focus,
         };
-    }, [functions]);
-    return (jsxs("div", { ref: innerRef, children: [jsx("div", { ref: dummyFocusRef, tabIndex: -1 }), children] }));
+    }, [firstFocusTarget]);
+    // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している
+    // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する
+    const mergedRef = useMergeRefs(innerRef, functions.callbackRef);
+    useImperativeHandle(ref, () => functions, [functions]);
+    return (jsxs("div", { ref: mergedRef, children: [!firstFocusTarget && (
+            /* eslint-disable-next-line smarthr/a11y-scroller-has-tabindex -- dummy element for focus management. */
+            jsx("div", { tabIndex: -1, className: DUMMY_FOCUS_CLASSNAME })), children] }));
 });
 
 export { FocusTrap };

package/lib/components/Dialog/FocusTrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"FocusTrap.js","sources":["../../../src/components/Dialog/FocusTrap.tsx"],"sourcesContent":["import {\n  type PropsWithChildren,\n  type RefObject,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\n\nimport { tabbable } from '../../libs/tabbable'\n\ntype Props = PropsWithChildren<{\n  firstFocusTarget?: RefObject<HTMLElement>\n}>\n\nexport type FocusTrapRef = {\n  focus: () => void\n}\n\nexport const FocusTrap = forwardRef<FocusTrapRef, Props>(({ firstFocusTarget, children }, ref) => {\n  const innerRef = useRef<HTMLDivElement | null>(null)\n  const dummyFocusRef = useRef<HTMLDivElement>(null)\n\n  const functions = useMemo(\n    () => ({\n      focus: () => {\n        ;(firstFocusTarget?.current || dummyFocusRef.current)?.focus()\n      },\n    }),\n    [firstFocusTarget],\n  )\n\n  useImperativeHandle(ref, () => functions, [functions])\n\n  useEffect(() => {\n    // FocusTrap がマウントされた時点のフォーカス要素を保存\n    const triggerElement = document.activeElement\n\n    functions.focus()\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      // IME 変換中の Tab は変換候補の選択に使われるため、フォーカストラップの対象外にする。\n      // ここで preventDefault してしまうと、Dialog 内で日本語入力中に Tab を押しても\n      // 変換候補が確定されず、未確定文字列がそのまま入力されてしまう。\n      if (e.key !== 'Tab' || e.isComposing || innerRef.current === null) {\n        return\n      }\n\n      const tabbables = tabbable(innerRef.current).filter((elm) => elm.tabIndex >= 0)\n\n      if (tabbables.length === 0) {\n        return\n      }\n\n      const firstTabbable = tabbables[0]\n      const lastTabbable = tabbables[tabbables.length - 1]\n      const currentFocused = tabbables.find((elm) => elm === e.target)\n\n      if (e.shiftKey) {\n        if (currentFocused === firstTabbable || document.activeElement === dummyFocusRef.current) {\n          e.preventDefault()\n          lastTabbable.focus()\n        }\n      } else if (currentFocused === lastTabbable) {\n        e.preventDefault()\n        firstTabbable.focus()\n      }\n    }\n\n    window.addEventListener('keydown', handleKeyDown)\n\n    return () => {\n      window.removeEventListener('keydown', handleKeyDown)\n      // フォーカストラップ終了時にトリガにフォーカスを戻す\n      if (triggerElement instanceof HTMLElement) {\n        triggerElement.focus()\n      }\n    }\n  }, [functions])\n\n  return (\n    <div ref={innerRef}>\n      {/* eslint-disable-next-line smarthr/a11y-scroller-has-tabindex -- dummy element for focus management. */}\n      <div ref={dummyFocusRef} tabIndex={-1} />\n      {children}\n    </div>\n  )\n})\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAoBO,MAAM,SAAS,GAAG,UAAU,CAAsB,CAAC,EAAE,gBAAgB,EAAE,QAAQ,EAAE,EAAE,GAAG,KAAI;AAC/F,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAwB,IAAI,CAAC;AACpD,IAAA,MAAM,aAAa,GAAG,MAAM,CAAiB,IAAI,CAAC;AAElD,IAAA,MAAM,SAAS,GAAG,OAAO,CACvB,OAAO;QACL,KAAK,EAAE,MAAK;YACT,CAAC,gBAAgB,EAAE,OAAO,IAAI,aAAa,CAAC,OAAO,GAAG,KAAK,EAAE;QAChE,CAAC;AACF,KAAA,CAAC,EACF,CAAC,gBAAgB,CAAC,CACnB;AAED,IAAA,mBAAmB,CAAC,GAAG,EAAE,MAAM,SAAS,EAAE,CAAC,SAAS,CAAC,CAAC;IAEtD,SAAS,CAAC,MAAK;;AAEb,QAAA,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa;QAE7C,SAAS,CAAC,KAAK,EAAE;AAEjB,QAAA,MAAM,aAAa,GAAG,CAAC,CAAgB,KAAI;;;;AAIzC,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,WAAW,IAAI,QAAQ,CAAC,OAAO,KAAK,IAAI,EAAE;gBACjE;YACF;YAEA,MAAM,SAAS,GAAG,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,QAAQ,IAAI,CAAC,CAAC;AAE/E,YAAA,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC1B;YACF;AAEA,YAAA,MAAM,aAAa,GAAG,SAAS,CAAC,CAAC,CAAC;YAClC,MAAM,YAAY,GAAG,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;AACpD,YAAA,MAAM,cAAc,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,KAAK,CAAC,CAAC,MAAM,CAAC;AAEhE,YAAA,IAAI,CAAC,CAAC,QAAQ,EAAE;AACd,gBAAA,IAAI,cAAc,KAAK,aAAa,IAAI,QAAQ,CAAC,aAAa,KAAK,aAAa,CAAC,OAAO,EAAE;oBACxF,CAAC,CAAC,cAAc,EAAE;oBAClB,YAAY,CAAC,KAAK,EAAE;gBACtB;YACF;AAAO,iBAAA,IAAI,cAAc,KAAK,YAAY,EAAE;gBAC1C,CAAC,CAAC,cAAc,EAAE;gBAClB,aAAa,CAAC,KAAK,EAAE;YACvB;AACF,QAAA,CAAC;AAED,QAAA,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC;AAEjD,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC;;AAEpD,YAAA,IAAI,cAAc,YAAY,WAAW,EAAE;gBACzC,cAAc,CAAC,KAAK,EAAE;YACxB;AACF,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEf,QACEA,cAAK,GAAG,EAAE,QAAQ,EAAA,QAAA,EAAA,CAEhBC,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,EAAA,CAAI,EACxC,QAAQ,CAAA,EAAA,CACL;AAEV,CAAC;;;;"}
+{"version":3,"file":"FocusTrap.js","sources":["../../../src/components/Dialog/FocusTrap.tsx"],"sourcesContent":["import {\n  type PropsWithChildren,\n  type RefObject,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\n\nimport { useMergeRefs } from '../../hooks/useMergeRefs'\nimport { tabbable } from '../../libs/tabbable'\n\ntype Props = PropsWithChildren<{\n  firstFocusTarget?: RefObject<HTMLElement>\n}>\n\nexport type FocusTrapRef = {\n  focus: () => void\n}\n\nconst DUMMY_FOCUS_CLASSNAME = 'smarthr-ui-Dialog-dummyFocus'\nconst DUMMY_FOCUS_SELECTOR = `.${DUMMY_FOCUS_CLASSNAME}[tabIndex]`\n\nexport const FocusTrap = forwardRef<FocusTrapRef, Props>(({ firstFocusTarget, children }, ref) => {\n  // TODO: innerRefを削除して、functionsのuseMemoの中にletで変数としてnodeの参照を持つことを検討\n  const innerRef = useRef<HTMLDivElement | null>(null)\n\n  const functions = useMemo(() => {\n    const findDummyFocus = () => innerRef.current?.querySelector<HTMLElement>(DUMMY_FOCUS_SELECTOR)\n\n    const focus = () => {\n      ;(firstFocusTarget?.current || findDummyFocus())?.focus()\n    }\n\n    return {\n      callbackRef: (node: HTMLDivElement | null) => {\n        if (!node) {\n          return\n        }\n\n        // FocusTrap がマウントされた時点のフォーカス要素を保存\n        const triggerElement = document.activeElement\n\n        const rAFId = requestAnimationFrame(focus)\n\n        const handleKeyDown = (e: KeyboardEvent) => {\n          // IME 変換中の Tab は変換候補の選択に使われるため、フォーカストラップの対象外にする。\n          // ここで preventDefault してしまうと、Dialog 内で日本語入力中に Tab を押しても\n          // 変換候補が確定されず、未確定文字列がそのまま入力されてしまう。\n          if (e.key !== 'Tab' || e.isComposing) {\n            return\n          }\n\n          const tabbables = tabbable(node).filter((elm) => elm.tabIndex >= 0)\n\n          if (tabbables.length === 0) {\n            return\n          }\n\n          const firstTabbable = tabbables[0]\n          const lastTabbable = tabbables[tabbables.length - 1]\n          const currentFocused = tabbables.find((elm) => elm === e.target)\n\n          if (e.shiftKey) {\n            if (currentFocused === firstTabbable || document.activeElement === findDummyFocus()) {\n              e.preventDefault()\n              lastTabbable.focus()\n            }\n          } else if (currentFocused === lastTabbable) {\n            e.preventDefault()\n            firstTabbable.focus()\n          }\n        }\n\n        window.addEventListener('keydown', handleKeyDown)\n\n        // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している\n        // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する\n        return () => {\n          cancelAnimationFrame(rAFId)\n          window.removeEventListener('keydown', handleKeyDown)\n\n          if (triggerElement instanceof HTMLElement) {\n            triggerElement.focus()\n          }\n        }\n      },\n      focus,\n    }\n  }, [firstFocusTarget])\n\n  // HINT: useMergeRefsはv18でもcallbackRefのcleanup関数に対応している\n  // もしuseMergeRefsをなくす場合、react v18対応が不要になっているかどうか確認する\n  const mergedRef = useMergeRefs(innerRef, functions.callbackRef)\n\n  useImperativeHandle(ref, () => functions as { focus: () => void }, [functions])\n\n  return (\n    <div ref={mergedRef}>\n      {!firstFocusTarget && (\n        /* eslint-disable-next-line smarthr/a11y-scroller-has-tabindex -- dummy element for focus management. */\n        <div tabIndex={-1} className={DUMMY_FOCUS_CLASSNAME} />\n      )}\n      {children}\n    </div>\n  )\n})\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAoBA,MAAM,qBAAqB,GAAG,8BAA8B;AAC5D,MAAM,oBAAoB,GAAG,CAAA,CAAA,EAAI,qBAAqB,YAAY;AAE3D,MAAM,SAAS,GAAG,UAAU,CAAsB,CAAC,EAAE,gBAAgB,EAAE,QAAQ,EAAE,EAAE,GAAG,KAAI;;AAE/F,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAwB,IAAI,CAAC;AAEpD,IAAA,MAAM,SAAS,GAAG,OAAO,CAAC,MAAK;AAC7B,QAAA,MAAM,cAAc,GAAG,MAAM,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAc,oBAAoB,CAAC;QAE/F,MAAM,KAAK,GAAG,MAAK;YAChB,CAAC,gBAAgB,EAAE,OAAO,IAAI,cAAc,EAAE,GAAG,KAAK,EAAE;AAC3D,QAAA,CAAC;QAED,OAAO;AACL,YAAA,WAAW,EAAE,CAAC,IAA2B,KAAI;gBAC3C,IAAI,CAAC,IAAI,EAAE;oBACT;gBACF;;AAGA,gBAAA,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa;AAE7C,gBAAA,MAAM,KAAK,GAAG,qBAAqB,CAAC,KAAK,CAAC;AAE1C,gBAAA,MAAM,aAAa,GAAG,CAAC,CAAgB,KAAI;;;;oBAIzC,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,WAAW,EAAE;wBACpC;oBACF;oBAEA,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,QAAQ,IAAI,CAAC,CAAC;AAEnE,oBAAA,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;wBAC1B;oBACF;AAEA,oBAAA,MAAM,aAAa,GAAG,SAAS,CAAC,CAAC,CAAC;oBAClC,MAAM,YAAY,GAAG,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;AACpD,oBAAA,MAAM,cAAc,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,KAAK,CAAC,CAAC,MAAM,CAAC;AAEhE,oBAAA,IAAI,CAAC,CAAC,QAAQ,EAAE;wBACd,IAAI,cAAc,KAAK,aAAa,IAAI,QAAQ,CAAC,aAAa,KAAK,cAAc,EAAE,EAAE;4BACnF,CAAC,CAAC,cAAc,EAAE;4BAClB,YAAY,CAAC,KAAK,EAAE;wBACtB;oBACF;AAAO,yBAAA,IAAI,cAAc,KAAK,YAAY,EAAE;wBAC1C,CAAC,CAAC,cAAc,EAAE;wBAClB,aAAa,CAAC,KAAK,EAAE;oBACvB;AACF,gBAAA,CAAC;AAED,gBAAA,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC;;;AAIjD,gBAAA,OAAO,MAAK;oBACV,oBAAoB,CAAC,KAAK,CAAC;AAC3B,oBAAA,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC;AAEpD,oBAAA,IAAI,cAAc,YAAY,WAAW,EAAE;wBACzC,cAAc,CAAC,KAAK,EAAE;oBACxB;AACF,gBAAA,CAAC;YACH,CAAC;YACD,KAAK;SACN;AACH,IAAA,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;;;IAItB,MAAM,SAAS,GAAG,YAAY,CAAC,QAAQ,EAAE,SAAS,CAAC,WAAW,CAAC;AAE/D,IAAA,mBAAmB,CAAC,GAAG,EAAE,MAAM,SAAkC,EAAE,CAAC,SAAS,CAAC,CAAC;IAE/E,QACEA,cAAK,GAAG,EAAE,SAAS,EAAA,QAAA,EAAA,CAChB,CAAC,gBAAgB;;AAEhB,YAAAC,GAAA,CAAA,KAAA,EAAA,EAAK,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE,qBAAqB,EAAA,CAAI,CACxD,EACA,QAAQ,CAAA,EAAA,CACL;AAEV,CAAC;;;;"}

package/lib/components/Dialog/ModelessDialog/ModelessDialog.cjs

@@ -4,7 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var cjs = require('./../../../vendor/.pnpm/react-draggable@4.7.1_react-dom@19.2.8_react@19.2.8__react@19.2.8/vendor/react-draggable/build/cjs/cjs.cjs');
-var index = require('./../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+var index = require('./../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.cjs');
 var hooks_useHandleEscape = require('../../../hooks/useHandleEscape.cjs');
 var hooks_useLatest = require('../../../hooks/useLatest.cjs');
 require('../../../intl/IntlProvider.cjs');

package/lib/components/Dialog/ModelessDialog/ModelessDialog.js

@@ -2,7 +2,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { memo, useId, useRef, useMemo, useState, useEffect } from 'react';
 import cjs_default from './../../../vendor/.pnpm/react-draggable@4.7.1_react-dom@19.2.8_react@19.2.8__react@19.2.8/vendor/react-draggable/build/cjs/cjs.js';
-import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
+import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
 import { useHandleEscape } from '../../../hooks/useHandleEscape.js';
 import { useLatest } from '../../../hooks/useLatest.js';
 import '../../../intl/IntlProvider.js';

package/lib/components/Dialog/RemoteDialogTrigger/useRemoteTrigger.cjs

@@ -1,37 +1,45 @@
 'use strict';
 
 var React = require('react');
+var hooks_useAnimationFrame = require('../../../hooks/useAnimationFrame.cjs');
 var hooks_useLatest = require('../../../hooks/useLatest.cjs');
 
 const TRIGGER_EVENT = 'smarthr-ui:remote-dialog-trigger-dispatch';
-function useRemoteTrigger({ onClickClose: orgOnClickClose, onPressEscape: orgOnPressEscape, onToggle, onOpen, onClose, id, }) {
+function useRemoteTrigger({ onClickClose, onPressEscape, onToggle, onOpen, onClose, id, }) {
     const [isOpen, setIsOpen] = React.useState(false);
+    const toggleFrame = hooks_useAnimationFrame.useAnimationFrame();
     const latest = hooks_useLatest.useLatest({
         onToggle,
         onOpen,
         onClose,
-        orgOnClickClose,
-        orgOnPressEscape,
+        onClickClose,
+        onPressEscape,
+        toggleFrame,
     });
     const functions = React.useMemo(() => {
         const updateIsOpen = (newIsOpen) => {
             setIsOpen(newIsOpen);
-            latest.onToggle?.(newIsOpen);
-            latest[newIsOpen ? 'onOpen' : 'onClose']?.();
+            if (latest.onToggle || latest[newIsOpen ? 'onOpen' : 'onClose']) {
+                // HINT: 利用者側でstateの更新が行われている可能性があるため、遅延させる
+                latest.toggleFrame.request(() => {
+                    latest.onToggle?.(newIsOpen);
+                    latest[newIsOpen ? 'onOpen' : 'onClose']?.();
+                });
+            }
         };
         return {
             updateIsOpen,
             handleClickClose: () => {
-                if (latest.orgOnClickClose) {
-                    return latest.orgOnClickClose(() => {
+                if (latest.onClickClose) {
+                    return latest.onClickClose(() => {
                         updateIsOpen(false);
                     });
                 }
                 updateIsOpen(false);
             },
             handlePressEscape: () => {
-                if (latest.orgOnPressEscape) {
-                    return latest.orgOnPressEscape(() => {
+                if (latest.onPressEscape) {
+                    return latest.onPressEscape(() => {
                         updateIsOpen(false);
                     });
                 }
@@ -47,9 +55,11 @@ function useRemoteTrigger({ onClickClose: orgOnClickClose, onPressEscape: orgOnP
         });
         document.addEventListener(TRIGGER_EVENT, handler);
         return () => {
+            // HINT: アンマウント後に予約済みのonToggle・onOpen・onCloseが呼ばれないようにする
+            toggleFrame.cancel();
             document.removeEventListener(TRIGGER_EVENT, handler);
         };
-    }, [id, functions]);
+    }, [id, toggleFrame, functions]);
     return {
         isOpen,
         handleClickClose: functions.handleClickClose,

package/lib/components/Dialog/RemoteDialogTrigger/useRemoteTrigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useRemoteTrigger.cjs","sources":["../../../../src/components/Dialog/RemoteDialogTrigger/useRemoteTrigger.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\n\nimport { useLatest } from '../../../hooks/useLatest'\n\nexport const TRIGGER_EVENT = 'smarthr-ui:remote-dialog-trigger-dispatch'\n\ntype Props = {\n  id: string\n  onClickClose?: (close: () => void) => void\n  onPressEscape?: (close: () => void) => void\n  onToggle?: (isOpen: boolean) => void\n  onOpen?: () => void\n  onClose?: () => void\n}\n\nexport function useRemoteTrigger({\n  onClickClose: orgOnClickClose,\n  onPressEscape: orgOnPressEscape,\n  onToggle,\n  onOpen,\n  onClose,\n  id,\n}: Props) {\n  const [isOpen, setIsOpen] = useState(false)\n  const latest = useLatest({\n    onToggle,\n    onOpen,\n    onClose,\n    orgOnClickClose,\n    orgOnPressEscape,\n  })\n\n  const functions = useMemo(() => {\n    const updateIsOpen = (newIsOpen: boolean) => {\n      setIsOpen(newIsOpen)\n      latest.onToggle?.(newIsOpen)\n      latest[newIsOpen ? 'onOpen' : 'onClose']?.()\n    }\n\n    return {\n      updateIsOpen,\n      handleClickClose: () => {\n        if (latest.orgOnClickClose) {\n          return latest.orgOnClickClose(() => {\n            updateIsOpen(false)\n          })\n        }\n\n        updateIsOpen(false)\n      },\n      handlePressEscape: () => {\n        if (latest.orgOnPressEscape) {\n          return latest.orgOnPressEscape(() => {\n            updateIsOpen(false)\n          })\n        }\n\n        updateIsOpen(false)\n      },\n    }\n  }, [latest])\n\n  useEffect(() => {\n    const handler = ((e: Event & { detail: { id: string } }) => {\n      if (id === e.detail.id) {\n        functions.updateIsOpen(true)\n      }\n    }) as Parameters<typeof document.addEventListener>['1']\n\n    document.addEventListener(TRIGGER_EVENT, handler)\n\n    return () => {\n      document.removeEventListener(TRIGGER_EVENT, handler)\n    }\n  }, [id, functions])\n\n  return {\n    isOpen,\n    handleClickClose: functions.handleClickClose,\n    handlePressEscape: functions.handlePressEscape,\n  }\n}\n"],"names":["useState","useLatest","useMemo","useEffect"],"mappings":";;;;;AAIO,MAAM,aAAa,GAAG;SAWb,gBAAgB,CAAC,EAC/B,YAAY,EAAE,eAAe,EAC7B,aAAa,EAAE,gBAAgB,EAC/B,QAAQ,EACR,MAAM,EACN,OAAO,EACP,EAAE,GACI,EAAA;IACN,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IAC3C,MAAM,MAAM,GAAGC,yBAAS,CAAC;QACvB,QAAQ;QACR,MAAM;QACN,OAAO;QACP,eAAe;QACf,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,SAAS,GAAGC,aAAO,CAAC,MAAK;AAC7B,QAAA,MAAM,YAAY,GAAG,CAAC,SAAkB,KAAI;YAC1C,SAAS,CAAC,SAAS,CAAC;AACpB,YAAA,MAAM,CAAC,QAAQ,GAAG,SAAS,CAAC;AAC5B,YAAA,MAAM,CAAC,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC,IAAI;AAC9C,QAAA,CAAC;QAED,OAAO;YACL,YAAY;YACZ,gBAAgB,EAAE,MAAK;AACrB,gBAAA,IAAI,MAAM,CAAC,eAAe,EAAE;AAC1B,oBAAA,OAAO,MAAM,CAAC,eAAe,CAAC,MAAK;wBACjC,YAAY,CAAC,KAAK,CAAC;AACrB,oBAAA,CAAC,CAAC;gBACJ;gBAEA,YAAY,CAAC,KAAK,CAAC;YACrB,CAAC;YACD,iBAAiB,EAAE,MAAK;AACtB,gBAAA,IAAI,MAAM,CAAC,gBAAgB,EAAE;AAC3B,oBAAA,OAAO,MAAM,CAAC,gBAAgB,CAAC,MAAK;wBAClC,YAAY,CAAC,KAAK,CAAC;AACrB,oBAAA,CAAC,CAAC;gBACJ;gBAEA,YAAY,CAAC,KAAK,CAAC;YACrB,CAAC;SACF;AACH,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;IAEZC,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,IAAI,CAAC,CAAqC,KAAI;YACzD,IAAI,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE;AACtB,gBAAA,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC;YAC9B;AACF,QAAA,CAAC,CAAsD;AAEvD,QAAA,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,OAAO,CAAC;AAEjD,QAAA,OAAO,MAAK;AACV,YAAA,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,OAAO,CAAC;AACtD,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;IAEnB,OAAO;QACL,MAAM;QACN,gBAAgB,EAAE,SAAS,CAAC,gBAAgB;QAC5C,iBAAiB,EAAE,SAAS,CAAC,iBAAiB;KAC/C;AACH;;;;;"}
+{"version":3,"file":"useRemoteTrigger.cjs","sources":["../../../../src/components/Dialog/RemoteDialogTrigger/useRemoteTrigger.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\n\nimport { useAnimationFrame } from '../../../hooks/useAnimationFrame'\nimport { useLatest } from '../../../hooks/useLatest'\n\nexport const TRIGGER_EVENT = 'smarthr-ui:remote-dialog-trigger-dispatch'\n\ntype Props = {\n  id: string\n  onClickClose?: (close: () => void) => void\n  onPressEscape?: (close: () => void) => void\n  onToggle?: (isOpen: boolean) => void\n  onOpen?: () => void\n  onClose?: () => void\n}\n\nexport function useRemoteTrigger({\n  onClickClose,\n  onPressEscape,\n  onToggle,\n  onOpen,\n  onClose,\n  id,\n}: Props) {\n  const [isOpen, setIsOpen] = useState(false)\n  const toggleFrame = useAnimationFrame()\n  const latest = useLatest({\n    onToggle,\n    onOpen,\n    onClose,\n    onClickClose,\n    onPressEscape,\n    toggleFrame,\n  })\n\n  const functions = useMemo(() => {\n    const updateIsOpen = (newIsOpen: boolean) => {\n      setIsOpen(newIsOpen)\n\n      if (latest.onToggle || latest[newIsOpen ? 'onOpen' : 'onClose']) {\n        // HINT: 利用者側でstateの更新が行われている可能性があるため、遅延させる\n        latest.toggleFrame.request(() => {\n          latest.onToggle?.(newIsOpen)\n          latest[newIsOpen ? 'onOpen' : 'onClose']?.()\n        })\n      }\n    }\n\n    return {\n      updateIsOpen,\n      handleClickClose: () => {\n        if (latest.onClickClose) {\n          return latest.onClickClose(() => {\n            updateIsOpen(false)\n          })\n        }\n\n        updateIsOpen(false)\n      },\n      handlePressEscape: () => {\n        if (latest.onPressEscape) {\n          return latest.onPressEscape(() => {\n            updateIsOpen(false)\n          })\n        }\n\n        updateIsOpen(false)\n      },\n    }\n  }, [latest])\n\n  useEffect(() => {\n    const handler = ((e: Event & { detail: { id: string } }) => {\n      if (id === e.detail.id) {\n        functions.updateIsOpen(true)\n      }\n    }) as Parameters<typeof document.addEventListener>['1']\n\n    document.addEventListener(TRIGGER_EVENT, handler)\n\n    return () => {\n      // HINT: アンマウント後に予約済みのonToggle・onOpen・onCloseが呼ばれないようにする\n      toggleFrame.cancel()\n      document.removeEventListener(TRIGGER_EVENT, handler)\n    }\n  }, [id, toggleFrame, functions])\n\n  return {\n    isOpen,\n    handleClickClose: functions.handleClickClose,\n    handlePressEscape: functions.handlePressEscape,\n  }\n}\n"],"names":["useState","useAnimationFrame","useLatest","useMemo","useEffect"],"mappings":";;;;;;AAKO,MAAM,aAAa,GAAG;AAWvB,SAAU,gBAAgB,CAAC,EAC/B,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,MAAM,EACN,OAAO,EACP,EAAE,GACI,EAAA;IACN,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;AAC3C,IAAA,MAAM,WAAW,GAAGC,yCAAiB,EAAE;IACvC,MAAM,MAAM,GAAGC,yBAAS,CAAC;QACvB,QAAQ;QACR,MAAM;QACN,OAAO;QACP,YAAY;QACZ,aAAa;QACb,WAAW;AACZ,KAAA,CAAC;AAEF,IAAA,MAAM,SAAS,GAAGC,aAAO,CAAC,MAAK;AAC7B,QAAA,MAAM,YAAY,GAAG,CAAC,SAAkB,KAAI;YAC1C,SAAS,CAAC,SAAS,CAAC;AAEpB,YAAA,IAAI,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC,EAAE;;AAE/D,gBAAA,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,MAAK;AAC9B,oBAAA,MAAM,CAAC,QAAQ,GAAG,SAAS,CAAC;AAC5B,oBAAA,MAAM,CAAC,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC,IAAI;AAC9C,gBAAA,CAAC,CAAC;YACJ;AACF,QAAA,CAAC;QAED,OAAO;YACL,YAAY;YACZ,gBAAgB,EAAE,MAAK;AACrB,gBAAA,IAAI,MAAM,CAAC,YAAY,EAAE;AACvB,oBAAA,OAAO,MAAM,CAAC,YAAY,CAAC,MAAK;wBAC9B,YAAY,CAAC,KAAK,CAAC;AACrB,oBAAA,CAAC,CAAC;gBACJ;gBAEA,YAAY,CAAC,KAAK,CAAC;YACrB,CAAC;YACD,iBAAiB,EAAE,MAAK;AACtB,gBAAA,IAAI,MAAM,CAAC,aAAa,EAAE;AACxB,oBAAA,OAAO,MAAM,CAAC,aAAa,CAAC,MAAK;wBAC/B,YAAY,CAAC,KAAK,CAAC;AACrB,oBAAA,CAAC,CAAC;gBACJ;gBAEA,YAAY,CAAC,KAAK,CAAC;YACrB,CAAC;SACF;AACH,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;IAEZC,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,IAAI,CAAC,CAAqC,KAAI;YACzD,IAAI,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE;AACtB,gBAAA,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC;YAC9B;AACF,QAAA,CAAC,CAAsD;AAEvD,QAAA,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,OAAO,CAAC;AAEjD,QAAA,OAAO,MAAK;;YAEV,WAAW,CAAC,MAAM,EAAE;AACpB,YAAA,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,OAAO,CAAC;AACtD,QAAA,CAAC;IACH,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;IAEhC,OAAO;QACL,MAAM;QACN,gBAAgB,EAAE,SAAS,CAAC,gBAAgB;QAC5C,iBAAiB,EAAE,SAAS,CAAC,iBAAiB;KAC/C;AACH;;;;;"}

package/lib/components/Dialog/RemoteDialogTrigger/useRemoteTrigger.d.ts

@@ -7,7 +7,7 @@ type Props = {
     onOpen?: () => void;
     onClose?: () => void;
 };
-export declare function useRemoteTrigger({ onClickClose: orgOnClickClose, onPressEscape: orgOnPressEscape, onToggle, onOpen, onClose, id, }: Props): {
+export declare function useRemoteTrigger({ onClickClose, onPressEscape, onToggle, onOpen, onClose, id, }: Props): {
     isOpen: boolean;
     handleClickClose: () => void;
     handlePressEscape: () => void;

package/lib/components/Dialog/RemoteDialogTrigger/useRemoteTrigger.js

@@ -1,35 +1,43 @@
 import { useState, useMemo, useEffect } from 'react';
+import { useAnimationFrame } from '../../../hooks/useAnimationFrame.js';
 import { useLatest } from '../../../hooks/useLatest.js';
 
 const TRIGGER_EVENT = 'smarthr-ui:remote-dialog-trigger-dispatch';
-function useRemoteTrigger({ onClickClose: orgOnClickClose, onPressEscape: orgOnPressEscape, onToggle, onOpen, onClose, id, }) {
+function useRemoteTrigger({ onClickClose, onPressEscape, onToggle, onOpen, onClose, id, }) {
     const [isOpen, setIsOpen] = useState(false);
+    const toggleFrame = useAnimationFrame();
     const latest = useLatest({
         onToggle,
         onOpen,
         onClose,
-        orgOnClickClose,
-        orgOnPressEscape,
+        onClickClose,
+        onPressEscape,
+        toggleFrame,
     });
     const functions = useMemo(() => {
         const updateIsOpen = (newIsOpen) => {
             setIsOpen(newIsOpen);
-            latest.onToggle?.(newIsOpen);
-            latest[newIsOpen ? 'onOpen' : 'onClose']?.();
+            if (latest.onToggle || latest[newIsOpen ? 'onOpen' : 'onClose']) {
+                // HINT: 利用者側でstateの更新が行われている可能性があるため、遅延させる
+                latest.toggleFrame.request(() => {
+                    latest.onToggle?.(newIsOpen);
+                    latest[newIsOpen ? 'onOpen' : 'onClose']?.();
+                });
+            }
         };
         return {
             updateIsOpen,
             handleClickClose: () => {
-                if (latest.orgOnClickClose) {
-                    return latest.orgOnClickClose(() => {
+                if (latest.onClickClose) {
+                    return latest.onClickClose(() => {
                         updateIsOpen(false);
                     });
                 }
                 updateIsOpen(false);
             },
             handlePressEscape: () => {
-                if (latest.orgOnPressEscape) {
-                    return latest.orgOnPressEscape(() => {
+                if (latest.onPressEscape) {
+                    return latest.onPressEscape(() => {
                         updateIsOpen(false);
                     });
                 }
@@ -45,9 +53,11 @@ function useRemoteTrigger({ onClickClose: orgOnClickClose, onPressEscape: orgOnP
         });
         document.addEventListener(TRIGGER_EVENT, handler);
         return () => {
+            // HINT: アンマウント後に予約済みのonToggle・onOpen・onCloseが呼ばれないようにする
+            toggleFrame.cancel();
             document.removeEventListener(TRIGGER_EVENT, handler);
         };
-    }, [id, functions]);
+    }, [id, toggleFrame, functions]);
     return {
         isOpen,
         handleClickClose: functions.handleClickClose,

package/lib/components/Dialog/RemoteDialogTrigger/useRemoteTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRemoteTrigger.js","sources":["../../../../src/components/Dialog/RemoteDialogTrigger/useRemoteTrigger.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\n\nimport { useLatest } from '../../../hooks/useLatest'\n\nexport const TRIGGER_EVENT = 'smarthr-ui:remote-dialog-trigger-dispatch'\n\ntype Props = {\n  id: string\n  onClickClose?: (close: () => void) => void\n  onPressEscape?: (close: () => void) => void\n  onToggle?: (isOpen: boolean) => void\n  onOpen?: () => void\n  onClose?: () => void\n}\n\nexport function useRemoteTrigger({\n  onClickClose: orgOnClickClose,\n  onPressEscape: orgOnPressEscape,\n  onToggle,\n  onOpen,\n  onClose,\n  id,\n}: Props) {\n  const [isOpen, setIsOpen] = useState(false)\n  const latest = useLatest({\n    onToggle,\n    onOpen,\n    onClose,\n    orgOnClickClose,\n    orgOnPressEscape,\n  })\n\n  const functions = useMemo(() => {\n    const updateIsOpen = (newIsOpen: boolean) => {\n      setIsOpen(newIsOpen)\n      latest.onToggle?.(newIsOpen)\n      latest[newIsOpen ? 'onOpen' : 'onClose']?.()\n    }\n\n    return {\n      updateIsOpen,\n      handleClickClose: () => {\n        if (latest.orgOnClickClose) {\n          return latest.orgOnClickClose(() => {\n            updateIsOpen(false)\n          })\n        }\n\n        updateIsOpen(false)\n      },\n      handlePressEscape: () => {\n        if (latest.orgOnPressEscape) {\n          return latest.orgOnPressEscape(() => {\n            updateIsOpen(false)\n          })\n        }\n\n        updateIsOpen(false)\n      },\n    }\n  }, [latest])\n\n  useEffect(() => {\n    const handler = ((e: Event & { detail: { id: string } }) => {\n      if (id === e.detail.id) {\n        functions.updateIsOpen(true)\n      }\n    }) as Parameters<typeof document.addEventListener>['1']\n\n    document.addEventListener(TRIGGER_EVENT, handler)\n\n    return () => {\n      document.removeEventListener(TRIGGER_EVENT, handler)\n    }\n  }, [id, functions])\n\n  return {\n    isOpen,\n    handleClickClose: functions.handleClickClose,\n    handlePressEscape: functions.handlePressEscape,\n  }\n}\n"],"names":[],"mappings":";;;AAIO,MAAM,aAAa,GAAG;SAWb,gBAAgB,CAAC,EAC/B,YAAY,EAAE,eAAe,EAC7B,aAAa,EAAE,gBAAgB,EAC/B,QAAQ,EACR,MAAM,EACN,OAAO,EACP,EAAE,GACI,EAAA;IACN,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAC3C,MAAM,MAAM,GAAG,SAAS,CAAC;QACvB,QAAQ;QACR,MAAM;QACN,OAAO;QACP,eAAe;QACf,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,SAAS,GAAG,OAAO,CAAC,MAAK;AAC7B,QAAA,MAAM,YAAY,GAAG,CAAC,SAAkB,KAAI;YAC1C,SAAS,CAAC,SAAS,CAAC;AACpB,YAAA,MAAM,CAAC,QAAQ,GAAG,SAAS,CAAC;AAC5B,YAAA,MAAM,CAAC,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC,IAAI;AAC9C,QAAA,CAAC;QAED,OAAO;YACL,YAAY;YACZ,gBAAgB,EAAE,MAAK;AACrB,gBAAA,IAAI,MAAM,CAAC,eAAe,EAAE;AAC1B,oBAAA,OAAO,MAAM,CAAC,eAAe,CAAC,MAAK;wBACjC,YAAY,CAAC,KAAK,CAAC;AACrB,oBAAA,CAAC,CAAC;gBACJ;gBAEA,YAAY,CAAC,KAAK,CAAC;YACrB,CAAC;YACD,iBAAiB,EAAE,MAAK;AACtB,gBAAA,IAAI,MAAM,CAAC,gBAAgB,EAAE;AAC3B,oBAAA,OAAO,MAAM,CAAC,gBAAgB,CAAC,MAAK;wBAClC,YAAY,CAAC,KAAK,CAAC;AACrB,oBAAA,CAAC,CAAC;gBACJ;gBAEA,YAAY,CAAC,KAAK,CAAC;YACrB,CAAC;SACF;AACH,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;IAEZ,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,IAAI,CAAC,CAAqC,KAAI;YACzD,IAAI,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE;AACtB,gBAAA,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC;YAC9B;AACF,QAAA,CAAC,CAAsD;AAEvD,QAAA,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,OAAO,CAAC;AAEjD,QAAA,OAAO,MAAK;AACV,YAAA,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,OAAO,CAAC;AACtD,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;IAEnB,OAAO;QACL,MAAM;QACN,gBAAgB,EAAE,SAAS,CAAC,gBAAgB;QAC5C,iBAAiB,EAAE,SAAS,CAAC,iBAAiB;KAC/C;AACH;;;;"}
+{"version":3,"file":"useRemoteTrigger.js","sources":["../../../../src/components/Dialog/RemoteDialogTrigger/useRemoteTrigger.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\n\nimport { useAnimationFrame } from '../../../hooks/useAnimationFrame'\nimport { useLatest } from '../../../hooks/useLatest'\n\nexport const TRIGGER_EVENT = 'smarthr-ui:remote-dialog-trigger-dispatch'\n\ntype Props = {\n  id: string\n  onClickClose?: (close: () => void) => void\n  onPressEscape?: (close: () => void) => void\n  onToggle?: (isOpen: boolean) => void\n  onOpen?: () => void\n  onClose?: () => void\n}\n\nexport function useRemoteTrigger({\n  onClickClose,\n  onPressEscape,\n  onToggle,\n  onOpen,\n  onClose,\n  id,\n}: Props) {\n  const [isOpen, setIsOpen] = useState(false)\n  const toggleFrame = useAnimationFrame()\n  const latest = useLatest({\n    onToggle,\n    onOpen,\n    onClose,\n    onClickClose,\n    onPressEscape,\n    toggleFrame,\n  })\n\n  const functions = useMemo(() => {\n    const updateIsOpen = (newIsOpen: boolean) => {\n      setIsOpen(newIsOpen)\n\n      if (latest.onToggle || latest[newIsOpen ? 'onOpen' : 'onClose']) {\n        // HINT: 利用者側でstateの更新が行われている可能性があるため、遅延させる\n        latest.toggleFrame.request(() => {\n          latest.onToggle?.(newIsOpen)\n          latest[newIsOpen ? 'onOpen' : 'onClose']?.()\n        })\n      }\n    }\n\n    return {\n      updateIsOpen,\n      handleClickClose: () => {\n        if (latest.onClickClose) {\n          return latest.onClickClose(() => {\n            updateIsOpen(false)\n          })\n        }\n\n        updateIsOpen(false)\n      },\n      handlePressEscape: () => {\n        if (latest.onPressEscape) {\n          return latest.onPressEscape(() => {\n            updateIsOpen(false)\n          })\n        }\n\n        updateIsOpen(false)\n      },\n    }\n  }, [latest])\n\n  useEffect(() => {\n    const handler = ((e: Event & { detail: { id: string } }) => {\n      if (id === e.detail.id) {\n        functions.updateIsOpen(true)\n      }\n    }) as Parameters<typeof document.addEventListener>['1']\n\n    document.addEventListener(TRIGGER_EVENT, handler)\n\n    return () => {\n      // HINT: アンマウント後に予約済みのonToggle・onOpen・onCloseが呼ばれないようにする\n      toggleFrame.cancel()\n      document.removeEventListener(TRIGGER_EVENT, handler)\n    }\n  }, [id, toggleFrame, functions])\n\n  return {\n    isOpen,\n    handleClickClose: functions.handleClickClose,\n    handlePressEscape: functions.handlePressEscape,\n  }\n}\n"],"names":[],"mappings":";;;;AAKO,MAAM,aAAa,GAAG;AAWvB,SAAU,gBAAgB,CAAC,EAC/B,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,MAAM,EACN,OAAO,EACP,EAAE,GACI,EAAA;IACN,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAC3C,IAAA,MAAM,WAAW,GAAG,iBAAiB,EAAE;IACvC,MAAM,MAAM,GAAG,SAAS,CAAC;QACvB,QAAQ;QACR,MAAM;QACN,OAAO;QACP,YAAY;QACZ,aAAa;QACb,WAAW;AACZ,KAAA,CAAC;AAEF,IAAA,MAAM,SAAS,GAAG,OAAO,CAAC,MAAK;AAC7B,QAAA,MAAM,YAAY,GAAG,CAAC,SAAkB,KAAI;YAC1C,SAAS,CAAC,SAAS,CAAC;AAEpB,YAAA,IAAI,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC,EAAE;;AAE/D,gBAAA,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,MAAK;AAC9B,oBAAA,MAAM,CAAC,QAAQ,GAAG,SAAS,CAAC;AAC5B,oBAAA,MAAM,CAAC,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC,IAAI;AAC9C,gBAAA,CAAC,CAAC;YACJ;AACF,QAAA,CAAC;QAED,OAAO;YACL,YAAY;YACZ,gBAAgB,EAAE,MAAK;AACrB,gBAAA,IAAI,MAAM,CAAC,YAAY,EAAE;AACvB,oBAAA,OAAO,MAAM,CAAC,YAAY,CAAC,MAAK;wBAC9B,YAAY,CAAC,KAAK,CAAC;AACrB,oBAAA,CAAC,CAAC;gBACJ;gBAEA,YAAY,CAAC,KAAK,CAAC;YACrB,CAAC;YACD,iBAAiB,EAAE,MAAK;AACtB,gBAAA,IAAI,MAAM,CAAC,aAAa,EAAE;AACxB,oBAAA,OAAO,MAAM,CAAC,aAAa,CAAC,MAAK;wBAC/B,YAAY,CAAC,KAAK,CAAC;AACrB,oBAAA,CAAC,CAAC;gBACJ;gBAEA,YAAY,CAAC,KAAK,CAAC;YACrB,CAAC;SACF;AACH,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;IAEZ,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,IAAI,CAAC,CAAqC,KAAI;YACzD,IAAI,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE;AACtB,gBAAA,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC;YAC9B;AACF,QAAA,CAAC,CAAsD;AAEvD,QAAA,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,OAAO,CAAC;AAEjD,QAAA,OAAO,MAAK;;YAEV,WAAW,CAAC,MAAM,EAAE;AACpB,YAAA,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,OAAO,CAAC;AACtD,QAAA,CAAC;IACH,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;IAEhC,OAAO;QACL,MAAM;QACN,gBAAgB,EAAE,SAAS,CAAC,gBAAgB;QAC5C,iBAAiB,EAAE,SAAS,CAAC,iBAAiB;KAC/C;AACH;;;;"}

package/lib/components/Dialog/dialogInnerStyle.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.cjs');
 
 const dialogContentInner = index.tv({
     slots: {

package/lib/components/Dialog/dialogInnerStyle.js

@@ -1,4 +1,4 @@
-import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
+import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
 
 const dialogContentInner = ce({
     slots: {

package/lib/components/Disclosure/useDisclosure.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var hooks_useAnimationFrame = require('../../hooks/useAnimationFrame.cjs');
 var hooks_useLatest = require('../../hooks/useLatest.cjs');
 
 const DISCLOSURE_CHANGE_EVENT = 'smarthr-ui:disclosure-change';
@@ -9,11 +10,12 @@ const DISCLOSURE_CHANGE_EVENT = 'smarthr-ui:disclosure-change';
  */
 const useDisclosure = (id) => {
     const [expanded, setExpanded] = React.useState(false);
-    const latest = hooks_useLatest.useLatest({ id, expanded });
+    const frame = hooks_useAnimationFrame.useAnimationFrame();
+    const latest = hooks_useLatest.useLatest({ id, expanded, frame });
     const functions = React.useMemo(() => ({
         safeSetExpanded: (value) => {
             // DisclosureTrigger と DisclosureContent のレンダリング順序に影響しないように animation frame を待ってから state を更新する
-            requestAnimationFrame(() => {
+            latest.frame.request(() => {
                 const next = typeof value === 'function' ? value(latest.expanded) : value;
                 if (next !== latest.expanded) {
                     setExpanded(next);
@@ -32,9 +34,10 @@ const useDisclosure = (id) => {
     React.useEffect(() => {
         document.addEventListener(DISCLOSURE_CHANGE_EVENT, functions.handleDisclosureChange);
         return () => {
+            frame.cancel();
             document.removeEventListener(DISCLOSURE_CHANGE_EVENT, functions.handleDisclosureChange);
         };
-    }, [functions]);
+    }, [frame, functions]);
     return [expanded, functions.safeSetExpanded];
 };
 

package/lib/components/Disclosure/useDisclosure.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useDisclosure.cjs","sources":["../../../src/components/Disclosure/useDisclosure.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\n\nimport { useLatest } from '../../hooks/useLatest'\n\nconst DISCLOSURE_CHANGE_EVENT = 'smarthr-ui:disclosure-change'\ntype DisclosureChangeEventDetail = { id: string; expanded: boolean }\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions\n  interface DocumentEventMap {\n    [DISCLOSURE_CHANGE_EVENT]: CustomEvent<DisclosureChangeEventDetail>\n  }\n}\n\ntype Setter = (value: boolean | ((prev: boolean) => boolean)) => void\n\ntype UseDisclosureResult = [expanded: boolean, setExpanded: Setter]\n\n/**\n * 同じ `id` で呼ぶとイベント経由で状態が同期される custom hook\n */\nexport const useDisclosure = (id: string): UseDisclosureResult => {\n  const [expanded, setExpanded] = useState(false)\n  const latest = useLatest({ id, expanded })\n\n  const functions = useMemo(\n    () => ({\n      safeSetExpanded: (value: boolean | ((prev: boolean) => boolean)) => {\n        // DisclosureTrigger と DisclosureContent のレンダリング順序に影響しないように animation frame を待ってから state を更新する\n        requestAnimationFrame(() => {\n          const next = typeof value === 'function' ? value(latest.expanded) : value\n\n          if (next !== latest.expanded) {\n            setExpanded(next)\n            document.dispatchEvent(\n              new CustomEvent<DisclosureChangeEventDetail>(DISCLOSURE_CHANGE_EVENT, {\n                detail: { id: latest.id, expanded: next },\n              }),\n            )\n          }\n        })\n      },\n      handleDisclosureChange: (e: CustomEvent<DisclosureChangeEventDetail>) => {\n        if (latest.id === e.detail.id) {\n          setExpanded(e.detail.expanded)\n        }\n      },\n    }),\n    [latest],\n  )\n\n  useEffect(() => {\n    document.addEventListener(DISCLOSURE_CHANGE_EVENT, functions.handleDisclosureChange)\n\n    return () => {\n      document.removeEventListener(DISCLOSURE_CHANGE_EVENT, functions.handleDisclosureChange)\n    }\n  }, [functions])\n\n  return [expanded, functions.safeSetExpanded]\n}\n"],"names":["useState","useLatest","useMemo","useEffect"],"mappings":";;;;;AAIA,MAAM,uBAAuB,GAAG,8BAA8B;AAc9D;;AAEG;AACI,MAAM,aAAa,GAAG,CAAC,EAAU,KAAyB;IAC/D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IAC/C,MAAM,MAAM,GAAGC,yBAAS,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC;AAE1C,IAAA,MAAM,SAAS,GAAGC,aAAO,CACvB,OAAO;AACL,QAAA,eAAe,EAAE,CAAC,KAA6C,KAAI;;YAEjE,qBAAqB,CAAC,MAAK;AACzB,gBAAA,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,KAAK;AAEzE,gBAAA,IAAI,IAAI,KAAK,MAAM,CAAC,QAAQ,EAAE;oBAC5B,WAAW,CAAC,IAAI,CAAC;AACjB,oBAAA,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAA8B,uBAAuB,EAAE;wBACpE,MAAM,EAAE,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;AAC1C,qBAAA,CAAC,CACH;gBACH;AACF,YAAA,CAAC,CAAC;QACJ,CAAC;AACD,QAAA,sBAAsB,EAAE,CAAC,CAA2C,KAAI;YACtE,IAAI,MAAM,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE;AAC7B,gBAAA,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;YAChC;QACF,CAAC;AACF,KAAA,CAAC,EACF,CAAC,MAAM,CAAC,CACT;IAEDC,eAAS,CAAC,MAAK;QACb,QAAQ,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,SAAS,CAAC,sBAAsB,CAAC;AAEpF,QAAA,OAAO,MAAK;YACV,QAAQ,CAAC,mBAAmB,CAAC,uBAAuB,EAAE,SAAS,CAAC,sBAAsB,CAAC;AACzF,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAEf,IAAA,OAAO,CAAC,QAAQ,EAAE,SAAS,CAAC,eAAe,CAAC;AAC9C;;;;"}
+{"version":3,"file":"useDisclosure.cjs","sources":["../../../src/components/Disclosure/useDisclosure.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\n\nimport { useAnimationFrame } from '../../hooks/useAnimationFrame'\nimport { useLatest } from '../../hooks/useLatest'\n\nconst DISCLOSURE_CHANGE_EVENT = 'smarthr-ui:disclosure-change'\ntype DisclosureChangeEventDetail = { id: string; expanded: boolean }\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions\n  interface DocumentEventMap {\n    [DISCLOSURE_CHANGE_EVENT]: CustomEvent<DisclosureChangeEventDetail>\n  }\n}\n\ntype Setter = (value: boolean | ((prev: boolean) => boolean)) => void\n\ntype UseDisclosureResult = [expanded: boolean, setExpanded: Setter]\n\n/**\n * 同じ `id` で呼ぶとイベント経由で状態が同期される custom hook\n */\nexport const useDisclosure = (id: string): UseDisclosureResult => {\n  const [expanded, setExpanded] = useState(false)\n  const frame = useAnimationFrame()\n  const latest = useLatest({ id, expanded, frame })\n\n  const functions = useMemo(\n    () => ({\n      safeSetExpanded: (value: boolean | ((prev: boolean) => boolean)) => {\n        // DisclosureTrigger と DisclosureContent のレンダリング順序に影響しないように animation frame を待ってから state を更新する\n        latest.frame.request(() => {\n          const next = typeof value === 'function' ? value(latest.expanded) : value\n\n          if (next !== latest.expanded) {\n            setExpanded(next)\n            document.dispatchEvent(\n              new CustomEvent<DisclosureChangeEventDetail>(DISCLOSURE_CHANGE_EVENT, {\n                detail: { id: latest.id, expanded: next },\n              }),\n            )\n          }\n        })\n      },\n      handleDisclosureChange: (e: CustomEvent<DisclosureChangeEventDetail>) => {\n        if (latest.id === e.detail.id) {\n          setExpanded(e.detail.expanded)\n        }\n      },\n    }),\n    [latest],\n  )\n\n  useEffect(() => {\n    document.addEventListener(DISCLOSURE_CHANGE_EVENT, functions.handleDisclosureChange)\n\n    return () => {\n      frame.cancel()\n      document.removeEventListener(DISCLOSURE_CHANGE_EVENT, functions.handleDisclosureChange)\n    }\n  }, [frame, functions])\n\n  return [expanded, functions.safeSetExpanded]\n}\n"],"names":["useState","useAnimationFrame","useLatest","useMemo","useEffect"],"mappings":";;;;;;AAKA,MAAM,uBAAuB,GAAG,8BAA8B;AAc9D;;AAEG;AACI,MAAM,aAAa,GAAG,CAAC,EAAU,KAAyB;IAC/D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;AAC/C,IAAA,MAAM,KAAK,GAAGC,yCAAiB,EAAE;AACjC,IAAA,MAAM,MAAM,GAAGC,yBAAS,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;AAEjD,IAAA,MAAM,SAAS,GAAGC,aAAO,CACvB,OAAO;AACL,QAAA,eAAe,EAAE,CAAC,KAA6C,KAAI;;AAEjE,YAAA,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,MAAK;AACxB,gBAAA,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,KAAK;AAEzE,gBAAA,IAAI,IAAI,KAAK,MAAM,CAAC,QAAQ,EAAE;oBAC5B,WAAW,CAAC,IAAI,CAAC;AACjB,oBAAA,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAA8B,uBAAuB,EAAE;wBACpE,MAAM,EAAE,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;AAC1C,qBAAA,CAAC,CACH;gBACH;AACF,YAAA,CAAC,CAAC;QACJ,CAAC;AACD,QAAA,sBAAsB,EAAE,CAAC,CAA2C,KAAI;YACtE,IAAI,MAAM,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE;AAC7B,gBAAA,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;YAChC;QACF,CAAC;AACF,KAAA,CAAC,EACF,CAAC,MAAM,CAAC,CACT;IAEDC,eAAS,CAAC,MAAK;QACb,QAAQ,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,SAAS,CAAC,sBAAsB,CAAC;AAEpF,QAAA,OAAO,MAAK;YACV,KAAK,CAAC,MAAM,EAAE;YACd,QAAQ,CAAC,mBAAmB,CAAC,uBAAuB,EAAE,SAAS,CAAC,sBAAsB,CAAC;AACzF,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;AAEtB,IAAA,OAAO,CAAC,QAAQ,EAAE,SAAS,CAAC,eAAe,CAAC;AAC9C;;;;"}

package/lib/components/Disclosure/useDisclosure.js

@@ -1,4 +1,5 @@
 import { useState, useMemo, useEffect } from 'react';
+import { useAnimationFrame } from '../../hooks/useAnimationFrame.js';
 import { useLatest } from '../../hooks/useLatest.js';
 
 const DISCLOSURE_CHANGE_EVENT = 'smarthr-ui:disclosure-change';
@@ -7,11 +8,12 @@ const DISCLOSURE_CHANGE_EVENT = 'smarthr-ui:disclosure-change';
  */
 const useDisclosure = (id) => {
     const [expanded, setExpanded] = useState(false);
-    const latest = useLatest({ id, expanded });
+    const frame = useAnimationFrame();
+    const latest = useLatest({ id, expanded, frame });
     const functions = useMemo(() => ({
         safeSetExpanded: (value) => {
             // DisclosureTrigger と DisclosureContent のレンダリング順序に影響しないように animation frame を待ってから state を更新する
-            requestAnimationFrame(() => {
+            latest.frame.request(() => {
                 const next = typeof value === 'function' ? value(latest.expanded) : value;
                 if (next !== latest.expanded) {
                     setExpanded(next);
@@ -30,9 +32,10 @@ const useDisclosure = (id) => {
     useEffect(() => {
         document.addEventListener(DISCLOSURE_CHANGE_EVENT, functions.handleDisclosureChange);
         return () => {
+            frame.cancel();
             document.removeEventListener(DISCLOSURE_CHANGE_EVENT, functions.handleDisclosureChange);
         };
-    }, [functions]);
+    }, [frame, functions]);
     return [expanded, functions.safeSetExpanded];
 };
 

package/lib/components/Disclosure/useDisclosure.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDisclosure.js","sources":["../../../src/components/Disclosure/useDisclosure.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\n\nimport { useLatest } from '../../hooks/useLatest'\n\nconst DISCLOSURE_CHANGE_EVENT = 'smarthr-ui:disclosure-change'\ntype DisclosureChangeEventDetail = { id: string; expanded: boolean }\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions\n  interface DocumentEventMap {\n    [DISCLOSURE_CHANGE_EVENT]: CustomEvent<DisclosureChangeEventDetail>\n  }\n}\n\ntype Setter = (value: boolean | ((prev: boolean) => boolean)) => void\n\ntype UseDisclosureResult = [expanded: boolean, setExpanded: Setter]\n\n/**\n * 同じ `id` で呼ぶとイベント経由で状態が同期される custom hook\n */\nexport const useDisclosure = (id: string): UseDisclosureResult => {\n  const [expanded, setExpanded] = useState(false)\n  const latest = useLatest({ id, expanded })\n\n  const functions = useMemo(\n    () => ({\n      safeSetExpanded: (value: boolean | ((prev: boolean) => boolean)) => {\n        // DisclosureTrigger と DisclosureContent のレンダリング順序に影響しないように animation frame を待ってから state を更新する\n        requestAnimationFrame(() => {\n          const next = typeof value === 'function' ? value(latest.expanded) : value\n\n          if (next !== latest.expanded) {\n            setExpanded(next)\n            document.dispatchEvent(\n              new CustomEvent<DisclosureChangeEventDetail>(DISCLOSURE_CHANGE_EVENT, {\n                detail: { id: latest.id, expanded: next },\n              }),\n            )\n          }\n        })\n      },\n      handleDisclosureChange: (e: CustomEvent<DisclosureChangeEventDetail>) => {\n        if (latest.id === e.detail.id) {\n          setExpanded(e.detail.expanded)\n        }\n      },\n    }),\n    [latest],\n  )\n\n  useEffect(() => {\n    document.addEventListener(DISCLOSURE_CHANGE_EVENT, functions.handleDisclosureChange)\n\n    return () => {\n      document.removeEventListener(DISCLOSURE_CHANGE_EVENT, functions.handleDisclosureChange)\n    }\n  }, [functions])\n\n  return [expanded, functions.safeSetExpanded]\n}\n"],"names":[],"mappings":";;;AAIA,MAAM,uBAAuB,GAAG,8BAA8B;AAc9D;;AAEG;AACI,MAAM,aAAa,GAAG,CAAC,EAAU,KAAyB;IAC/D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAC/C,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC;AAE1C,IAAA,MAAM,SAAS,GAAG,OAAO,CACvB,OAAO;AACL,QAAA,eAAe,EAAE,CAAC,KAA6C,KAAI;;YAEjE,qBAAqB,CAAC,MAAK;AACzB,gBAAA,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,KAAK;AAEzE,gBAAA,IAAI,IAAI,KAAK,MAAM,CAAC,QAAQ,EAAE;oBAC5B,WAAW,CAAC,IAAI,CAAC;AACjB,oBAAA,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAA8B,uBAAuB,EAAE;wBACpE,MAAM,EAAE,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;AAC1C,qBAAA,CAAC,CACH;gBACH;AACF,YAAA,CAAC,CAAC;QACJ,CAAC;AACD,QAAA,sBAAsB,EAAE,CAAC,CAA2C,KAAI;YACtE,IAAI,MAAM,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE;AAC7B,gBAAA,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;YAChC;QACF,CAAC;AACF,KAAA,CAAC,EACF,CAAC,MAAM,CAAC,CACT;IAED,SAAS,CAAC,MAAK;QACb,QAAQ,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,SAAS,CAAC,sBAAsB,CAAC;AAEpF,QAAA,OAAO,MAAK;YACV,QAAQ,CAAC,mBAAmB,CAAC,uBAAuB,EAAE,SAAS,CAAC,sBAAsB,CAAC;AACzF,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAEf,IAAA,OAAO,CAAC,QAAQ,EAAE,SAAS,CAAC,eAAe,CAAC;AAC9C;;;;"}
+{"version":3,"file":"useDisclosure.js","sources":["../../../src/components/Disclosure/useDisclosure.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\n\nimport { useAnimationFrame } from '../../hooks/useAnimationFrame'\nimport { useLatest } from '../../hooks/useLatest'\n\nconst DISCLOSURE_CHANGE_EVENT = 'smarthr-ui:disclosure-change'\ntype DisclosureChangeEventDetail = { id: string; expanded: boolean }\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions\n  interface DocumentEventMap {\n    [DISCLOSURE_CHANGE_EVENT]: CustomEvent<DisclosureChangeEventDetail>\n  }\n}\n\ntype Setter = (value: boolean | ((prev: boolean) => boolean)) => void\n\ntype UseDisclosureResult = [expanded: boolean, setExpanded: Setter]\n\n/**\n * 同じ `id` で呼ぶとイベント経由で状態が同期される custom hook\n */\nexport const useDisclosure = (id: string): UseDisclosureResult => {\n  const [expanded, setExpanded] = useState(false)\n  const frame = useAnimationFrame()\n  const latest = useLatest({ id, expanded, frame })\n\n  const functions = useMemo(\n    () => ({\n      safeSetExpanded: (value: boolean | ((prev: boolean) => boolean)) => {\n        // DisclosureTrigger と DisclosureContent のレンダリング順序に影響しないように animation frame を待ってから state を更新する\n        latest.frame.request(() => {\n          const next = typeof value === 'function' ? value(latest.expanded) : value\n\n          if (next !== latest.expanded) {\n            setExpanded(next)\n            document.dispatchEvent(\n              new CustomEvent<DisclosureChangeEventDetail>(DISCLOSURE_CHANGE_EVENT, {\n                detail: { id: latest.id, expanded: next },\n              }),\n            )\n          }\n        })\n      },\n      handleDisclosureChange: (e: CustomEvent<DisclosureChangeEventDetail>) => {\n        if (latest.id === e.detail.id) {\n          setExpanded(e.detail.expanded)\n        }\n      },\n    }),\n    [latest],\n  )\n\n  useEffect(() => {\n    document.addEventListener(DISCLOSURE_CHANGE_EVENT, functions.handleDisclosureChange)\n\n    return () => {\n      frame.cancel()\n      document.removeEventListener(DISCLOSURE_CHANGE_EVENT, functions.handleDisclosureChange)\n    }\n  }, [frame, functions])\n\n  return [expanded, functions.safeSetExpanded]\n}\n"],"names":[],"mappings":";;;;AAKA,MAAM,uBAAuB,GAAG,8BAA8B;AAc9D;;AAEG;AACI,MAAM,aAAa,GAAG,CAAC,EAAU,KAAyB;IAC/D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAC/C,IAAA,MAAM,KAAK,GAAG,iBAAiB,EAAE;AACjC,IAAA,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;AAEjD,IAAA,MAAM,SAAS,GAAG,OAAO,CACvB,OAAO;AACL,QAAA,eAAe,EAAE,CAAC,KAA6C,KAAI;;AAEjE,YAAA,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,MAAK;AACxB,gBAAA,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,KAAK;AAEzE,gBAAA,IAAI,IAAI,KAAK,MAAM,CAAC,QAAQ,EAAE;oBAC5B,WAAW,CAAC,IAAI,CAAC;AACjB,oBAAA,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAA8B,uBAAuB,EAAE;wBACpE,MAAM,EAAE,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;AAC1C,qBAAA,CAAC,CACH;gBACH;AACF,YAAA,CAAC,CAAC;QACJ,CAAC;AACD,QAAA,sBAAsB,EAAE,CAAC,CAA2C,KAAI;YACtE,IAAI,MAAM,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE;AAC7B,gBAAA,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;YAChC;QACF,CAAC;AACF,KAAA,CAAC,EACF,CAAC,MAAM,CAAC,CACT;IAED,SAAS,CAAC,MAAK;QACb,QAAQ,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,SAAS,CAAC,sBAAsB,CAAC;AAEpF,QAAA,OAAO,MAAK;YACV,KAAK,CAAC,MAAM,EAAE;YACd,QAAQ,CAAC,mBAAmB,CAAC,uBAAuB,EAAE,SAAS,CAAC,sBAAsB,CAAC;AACzF,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;AAEtB,IAAA,OAAO,CAAC,QAAQ,EAAE,SAAS,CAAC,eAAe,CAAC;AAC9C;;;;"}

package/lib/components/DropZone/DropZone.cjs

@@ -3,7 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.cjs');
 var hooks_useLatest = require('../../hooks/useLatest.cjs');
 require('../../intl/IntlProvider.cjs');
 require('react-intl');

package/lib/components/DropZone/DropZone.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useState, useMemo, useImperativeHandle, memo } from 'react';
-import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
+import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@swc_helper_93b9c5ee15e3d3d2221e194197be3b5c/vendor/tailwind-variants/dist/index.js';
 import { useLatest } from '../../hooks/useLatest.js';
 import '../../intl/IntlProvider.js';
 import 'react-intl';

package/lib/components/Dropdown/Dropdown.cjs

@@ -3,6 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var hooks_useAnimationFrame = require('../../hooks/useAnimationFrame.cjs');
 var hooks_useLatest = require('../../hooks/useLatest.cjs');
 var hooks_usePortal = require('../../hooks/usePortal.cjs');
 var components_Dropdown_dropdownHelper = require('./dropdownHelper.cjs');
@@ -31,6 +32,8 @@ const Dropdown = ({ onOpen, onClose, children }) => {
         rootId: contentId,
     });
     const triggerElementRef = React.useRef(null);
+    const openFrame = hooks_useAnimationFrame.useAnimationFrame();
+    const closeFrame = hooks_useAnimationFrame.useAnimationFrame();
     const latest = hooks_useLatest.useLatest({
         active,
         isChildPortal,
@@ -38,30 +41,36 @@ const Dropdown = ({ onOpen, onClose, children }) => {
         onOpen,
         onClose,
         createPortal,
+        openFrame,
+        closeFrame,
     });
     const functions = React.useMemo(() => {
         // This is the root container of a dropdown content located in outside the DOM tree
         const DropdownContentRoot = (props) => latest.active ? latest.createPortal(props.children) : null;
         DropdownContentRoot.displayName = 'DropdownContentRoot';
+        const actualClose = () => {
+            if (latest.onClose) {
+                latest.closeFrame.request(() => latest.onClose?.());
+            }
+        };
         return {
             DropdownContentRoot,
             handleClickTrigger: (rect) => {
                 if (latest.active) {
                     setActive(false);
-                    if (latest.onClose)
-                        requestAnimationFrame(() => latest.onClose?.());
+                    actualClose();
                 }
                 else {
                     setActive(true);
                     setTriggerRect(rect);
-                    if (latest.onOpen)
-                        requestAnimationFrame(() => latest.onOpen?.());
+                    if (latest.onOpen) {
+                        latest.openFrame.request(() => latest.onOpen?.());
+                    }
                 }
             },
             handleDelegateClickCloser: () => {
                 setActive(false);
-                if (latest.onClose)
-                    requestAnimationFrame(() => latest.onClose?.());
+                actualClose();
                 // return focus to the Trigger
                 components_Dropdown_dropdownHelper.getFirstTabbable(triggerElementRef)?.focus();
             },
@@ -71,9 +80,7 @@ const Dropdown = ({ onOpen, onClose, children }) => {
                     !components_Dropdown_dropdownHelper.isEventFromChild(e, triggerElementRef.current) &&
                     !latest.isChildPortal(e.target)) {
                     setActive(false);
-                    if (latest.onClose) {
-                        requestAnimationFrame(() => latest.onClose?.());
-                    }
+                    actualClose();
                 }
             },
             updateTriggerRect: () => {
@@ -83,6 +90,10 @@ const Dropdown = ({ onOpen, onClose, children }) => {
             },
         };
     }, [latest]);
+    React.useEffect(() => () => {
+        latest.openFrame.cancel();
+        latest.closeFrame.cancel();
+    }, [latest]);
     React.useEffect(() => {
         if (!active)
             return;