smarthr-ui 97.0.0 → 98.0.0

package/lib/components/Dialog/ControlledStepFormDialog/StepFormDialogContentInner.js

@@ -5,7 +5,7 @@ import { useResponseStatus } from '../../../hooks/useResponseStatus.js';
 import { Button } from '../../Button/Button.js';
 import '../../Button/AnchorButton.js';
 import '../../Button/UnstyledButton.js';
-import { Stack } from '../../Layout/Stack/Stack.js';
+import '../../Layout/Stack/Stack.js';
 import { Cluster } from '../../Layout/Cluster/Cluster.js';
 import '../../Layout/Reel/Reel.js';
 import '../../Layout/Sidebar/Sidebar.js';
@@ -73,7 +73,7 @@ const StepFormDialogContentInner = ({ children, heading, activeStep, contentBgCo
     const calcedResponseStatus = useResponseStatus(responseStatus);
     return (
     // eslint-disable-next-line smarthr/a11y-prohibit-sectioning-content-in-form
-    jsx(Section, { children: jsx("form", { onSubmit: handleSubmitAction, children: jsxs("div", { className: classNames.wrapper, children: [jsx(DialogHeading, { id: heading.id, sub: heading.sub ? `${heading.sub}${stepText}` : undefined, text: heading.sub ? heading.text : `${heading.text}${stepText}` }), jsx(DialogBody, { contentPadding: contentPadding, contentBgColor: contentBgColor, ref: scrollerRef, children: children }), jsxs(Stack, { gap: 0.5, className: classNames.actionArea, children: [jsxs(Cluster, { justify: "space-between", gap: { row: 0.5, column: 2 }, children: [!backButton.hidden && activeStep > 1 && (jsx(Button, { onClick: handleBackAction, variant: backButton.theme, disabled: backButton.disabled || calcedResponseStatus.isProcessing, className: "smarthr-ui-Dialog-backButton", children: backButton.text })), jsxs(Cluster, { gap: BUTTON_COLUMN_GAP, className: classNames.buttonArea, children: [!closeButton.hidden && (jsx(Button, { onClick: handleCloseAction, variant: closeButton.theme, disabled: closeButton.disabled || calcedResponseStatus.isProcessing, className: "smarthr-ui-Dialog-closeButton", children: closeButton.text })), !submitButton.hidden && (jsx(Button, { type: "submit", variant: submitButton.theme, disabled: submitButton.disabled, loading: calcedResponseStatus.isProcessing, className: "smarthr-ui-Dialog-actionButton", children: submitButton.text }))] })] }), jsx(DialogContentResponseStatusMessage, { responseStatus: calcedResponseStatus, className: classNames.message })] })] }) }) }));
+    jsx(Section, { children: jsx("form", { onSubmit: handleSubmitAction, children: jsxs("div", { className: classNames.wrapper, children: [jsx(DialogHeading, { id: heading.id, sub: heading.sub ? `${heading.sub}${stepText}` : undefined, text: heading.sub ? heading.text : `${heading.text}${stepText}` }), jsx(DialogBody, { contentPadding: contentPadding, contentBgColor: contentBgColor, ref: scrollerRef, children: children }), jsxs("div", { className: classNames.actionArea, children: [jsxs(Cluster, { justify: "space-between", gap: { row: 0.5, column: 2 }, children: [!backButton.hidden && activeStep > 1 && (jsx(Button, { onClick: handleBackAction, variant: backButton.theme, disabled: backButton.disabled || calcedResponseStatus.isProcessing, className: "smarthr-ui-Dialog-backButton", children: backButton.text })), jsxs(Cluster, { gap: BUTTON_COLUMN_GAP, className: classNames.buttonArea, children: [!closeButton.hidden && (jsx(Button, { onClick: handleCloseAction, variant: closeButton.theme, disabled: closeButton.disabled || calcedResponseStatus.isProcessing, className: "smarthr-ui-Dialog-closeButton", children: closeButton.text })), !submitButton.hidden && (jsx(Button, { type: "submit", variant: submitButton.theme, disabled: submitButton.disabled, loading: calcedResponseStatus.isProcessing, className: "smarthr-ui-Dialog-actionButton", children: submitButton.text }))] })] }), jsx(DialogContentResponseStatusMessage, { responseStatus: calcedResponseStatus, className: classNames.message })] })] }) }) }));
 };
 
 export { StepFormDialogContentInner };

package/lib/components/Dialog/ControlledStepFormDialog/StepFormDialogContentInner.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepFormDialogContentInner.js","sources":["../../../../src/components/Dialog/ControlledStepFormDialog/StepFormDialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type FormEvent,\n  type PropsWithChildren,\n  useCallback,\n  useContext,\n  useMemo,\n} from 'react'\n\nimport { type ResponseStatus, useResponseStatus } from '../../../hooks/useResponseStatus'\nimport { Button } from '../../Button'\nimport { Cluster, Stack } from '../../Layout'\nimport { Section } from '../../SectioningContent'\nimport { DialogBody, type Props as DialogBodyProps } from '../DialogBody'\nimport { DialogContentResponseStatusMessage } from '../DialogContentResponseStatusMessage'\nimport { DialogHeading, type Props as DialogHeadingProps } from '../DialogHeading'\nimport { dialogContentInner } from '../dialogInnerStyle'\n\nimport { StepFormDialogContext, type StepItem } from './StepFormDialogProvider'\n\nimport type { useStepFormDialogButton } from './useStepFormDialogButton'\n\ntype StepFormHelpers = {\n  /** 指定したステップに移動する関数 */\n  goto: (nextStep: StepItem) => void\n  /** ダイアログを閉じる関数 */\n  close: () => void\n  /** 現在のステップ情報 */\n  currentStep: StepItem\n}\n\ntype CommonButtonType = ReturnType<typeof useStepFormDialogButton>\n\nexport type AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** 現在のStepNo */\n    activeStep: number\n    /** submitボタン */\n    submitButton: CommonButtonType\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param e フォームイベント\n     * @param helpers ステップ操作用のヘルパー関数群\n     */\n    onSubmit: (e: FormEvent<HTMLFormElement>, helpers: StepFormHelpers) => void\n    /** キャンセルボタン */\n    closeButton: CommonButtonType\n    /** 戻るボタン */\n    backButton: CommonButtonType\n  }\n>\n\nexport type StepFormDialogContentInnerProps = AbstractProps & {\n  firstStep: StepItem\n  onClickClose: () => void\n  responseStatus?: ResponseStatus\n  /** ステップの総数 */\n  stepLength: number\n  onClickBack?: () => void\n}\n\nconst BUTTON_COLUMN_GAP = {\n  row: 0.5,\n  column: 1,\n} as const\n\nexport const StepFormDialogContentInner: FC<StepFormDialogContentInnerProps> = ({\n  children,\n  heading,\n  activeStep,\n  contentBgColor,\n  contentPadding,\n  submitButton,\n  closeButton,\n  backButton,\n  stepLength,\n  firstStep,\n  onSubmit,\n  onClickClose,\n  responseStatus,\n  onClickBack,\n}) => {\n  const { currentStep, stepQueue, setCurrentStep, scrollerRef } = useContext(StepFormDialogContext)\n\n  const handleCloseAction = useCallback(() => {\n    onClickClose()\n    setTimeout(() => {\n      // HINT: ダイアログが閉じるtransitionが完了してから初期化をしている\n      stepQueue.current = []\n      setCurrentStep(firstStep)\n    }, 300)\n  }, [firstStep, stepQueue, setCurrentStep, onClickClose])\n\n  const changeCurrentStep = useCallback(\n    (step: Parameters<typeof setCurrentStep>[0]) => {\n      setCurrentStep(step)\n\n      // HINT: stepが切り替わるごとにbodyのscroll位置を先頭に戻す処理\n      if (scrollerRef.current) {\n        scrollerRef.current.scroll(0, 0)\n      }\n    },\n    [setCurrentStep, scrollerRef],\n  )\n\n  const handleSubmitAction = useCallback(\n    (e: FormEvent<HTMLFormElement>) => {\n      e.preventDefault()\n      // HINT: React Potals などで擬似的にformがネストしている場合など、stopPropagationを実行しないと\n      // 親formが意図せずsubmitされてしまう場合がある\n      e.stopPropagation()\n\n      const helpers: StepFormHelpers = {\n        goto: (nextStep: StepItem) => {\n          stepQueue.current.push(currentStep)\n          changeCurrentStep(nextStep)\n        },\n        close: handleCloseAction,\n        currentStep,\n      }\n\n      onSubmit(e, helpers)\n    },\n    [currentStep, stepQueue, onSubmit, handleCloseAction, changeCurrentStep],\n  )\n  const handleBackAction = useCallback(() => {\n    onClickBack?.()\n\n    changeCurrentStep(stepQueue.current.pop() ?? firstStep)\n  }, [firstStep, stepQueue, onClickBack, changeCurrentStep])\n\n  const classNames = useMemo(() => {\n    const { wrapper, actionArea, buttonArea, message } = dialogContentInner()\n\n    return {\n      wrapper: wrapper(),\n      actionArea: actionArea(),\n      buttonArea: buttonArea(),\n      message: message(),\n    }\n  }, [])\n\n  const stepText = stepLength > 1 ? `（${activeStep}/${stepLength}）` : ''\n\n  const calcedResponseStatus = useResponseStatus(responseStatus)\n\n  return (\n    // eslint-disable-next-line smarthr/a11y-prohibit-sectioning-content-in-form\n    <Section>\n      <form onSubmit={handleSubmitAction}>\n        <div className={classNames.wrapper}>\n          <DialogHeading\n            id={heading.id}\n            sub={heading.sub ? `${heading.sub}${stepText}` : undefined}\n            text={heading.sub ? heading.text : `${heading.text}${stepText}`}\n          />\n          <DialogBody\n            contentPadding={contentPadding}\n            contentBgColor={contentBgColor}\n            ref={scrollerRef}\n          >\n            {children}\n          </DialogBody>\n          <Stack gap={0.5} className={classNames.actionArea}>\n            <Cluster justify=\"space-between\" gap={{ row: 0.5, column: 2 }}>\n              {!backButton.hidden && activeStep > 1 && (\n                <Button\n                  onClick={handleBackAction}\n                  variant={backButton.theme}\n                  disabled={backButton.disabled || calcedResponseStatus.isProcessing}\n                  className=\"smarthr-ui-Dialog-backButton\"\n                >\n                  {backButton.text}\n                </Button>\n              )}\n              <Cluster gap={BUTTON_COLUMN_GAP} className={classNames.buttonArea}>\n                {!closeButton.hidden && (\n                  <Button\n                    onClick={handleCloseAction}\n                    variant={closeButton.theme}\n                    disabled={closeButton.disabled || calcedResponseStatus.isProcessing}\n                    className=\"smarthr-ui-Dialog-closeButton\"\n                  >\n                    {closeButton.text}\n                  </Button>\n                )}\n                {!submitButton.hidden && (\n                  <Button\n                    type=\"submit\"\n                    variant={submitButton.theme}\n                    disabled={submitButton.disabled}\n                    loading={calcedResponseStatus.isProcessing}\n                    className=\"smarthr-ui-Dialog-actionButton\"\n                  >\n                    {submitButton.text}\n                  </Button>\n                )}\n              </Cluster>\n            </Cluster>\n            <DialogContentResponseStatusMessage\n              responseStatus={calcedResponseStatus}\n              className={classNames.message}\n            />\n          </Stack>\n        </div>\n      </form>\n    </Section>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiEA;AACE;AACA;;AAGK;AAgBL;AAEA;AACE;;;AAGE;;;;AAKJ;;;AAKI;;;AAGF;AAIF;;;;;AAOI;AACE;AACE;;;AAGF;;;AAIF;AACF;AAGF;;;;AAMA;AACE;;;;;;;;AAUF;AAEA;;;AAIE;AA4DJ;;"}
+{"version":3,"file":"StepFormDialogContentInner.js","sources":["../../../../src/components/Dialog/ControlledStepFormDialog/StepFormDialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type FormEvent,\n  type PropsWithChildren,\n  useCallback,\n  useContext,\n  useMemo,\n} from 'react'\n\nimport { type ResponseStatus, useResponseStatus } from '../../../hooks/useResponseStatus'\nimport { Button } from '../../Button'\nimport { Cluster } from '../../Layout'\nimport { Section } from '../../SectioningContent'\nimport { DialogBody, type Props as DialogBodyProps } from '../DialogBody'\nimport { DialogContentResponseStatusMessage } from '../DialogContentResponseStatusMessage'\nimport { DialogHeading, type Props as DialogHeadingProps } from '../DialogHeading'\nimport { dialogContentInner } from '../dialogInnerStyle'\n\nimport { StepFormDialogContext, type StepItem } from './StepFormDialogProvider'\n\nimport type { useStepFormDialogButton } from './useStepFormDialogButton'\n\ntype StepFormHelpers = {\n  /** 指定したステップに移動する関数 */\n  goto: (nextStep: StepItem) => void\n  /** ダイアログを閉じる関数 */\n  close: () => void\n  /** 現在のステップ情報 */\n  currentStep: StepItem\n}\n\ntype CommonButtonType = ReturnType<typeof useStepFormDialogButton>\n\nexport type AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** 現在のStepNo */\n    activeStep: number\n    /** submitボタン */\n    submitButton: CommonButtonType\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param e フォームイベント\n     * @param helpers ステップ操作用のヘルパー関数群\n     */\n    onSubmit: (e: FormEvent<HTMLFormElement>, helpers: StepFormHelpers) => void\n    /** キャンセルボタン */\n    closeButton: CommonButtonType\n    /** 戻るボタン */\n    backButton: CommonButtonType\n  }\n>\n\nexport type StepFormDialogContentInnerProps = AbstractProps & {\n  firstStep: StepItem\n  onClickClose: () => void\n  responseStatus?: ResponseStatus\n  /** ステップの総数 */\n  stepLength: number\n  onClickBack?: () => void\n}\n\nconst BUTTON_COLUMN_GAP = {\n  row: 0.5,\n  column: 1,\n} as const\n\nexport const StepFormDialogContentInner: FC<StepFormDialogContentInnerProps> = ({\n  children,\n  heading,\n  activeStep,\n  contentBgColor,\n  contentPadding,\n  submitButton,\n  closeButton,\n  backButton,\n  stepLength,\n  firstStep,\n  onSubmit,\n  onClickClose,\n  responseStatus,\n  onClickBack,\n}) => {\n  const { currentStep, stepQueue, setCurrentStep, scrollerRef } = useContext(StepFormDialogContext)\n\n  const handleCloseAction = useCallback(() => {\n    onClickClose()\n    setTimeout(() => {\n      // HINT: ダイアログが閉じるtransitionが完了してから初期化をしている\n      stepQueue.current = []\n      setCurrentStep(firstStep)\n    }, 300)\n  }, [firstStep, stepQueue, setCurrentStep, onClickClose])\n\n  const changeCurrentStep = useCallback(\n    (step: Parameters<typeof setCurrentStep>[0]) => {\n      setCurrentStep(step)\n\n      // HINT: stepが切り替わるごとにbodyのscroll位置を先頭に戻す処理\n      if (scrollerRef.current) {\n        scrollerRef.current.scroll(0, 0)\n      }\n    },\n    [setCurrentStep, scrollerRef],\n  )\n\n  const handleSubmitAction = useCallback(\n    (e: FormEvent<HTMLFormElement>) => {\n      e.preventDefault()\n      // HINT: React Potals などで擬似的にformがネストしている場合など、stopPropagationを実行しないと\n      // 親formが意図せずsubmitされてしまう場合がある\n      e.stopPropagation()\n\n      const helpers: StepFormHelpers = {\n        goto: (nextStep: StepItem) => {\n          stepQueue.current.push(currentStep)\n          changeCurrentStep(nextStep)\n        },\n        close: handleCloseAction,\n        currentStep,\n      }\n\n      onSubmit(e, helpers)\n    },\n    [currentStep, stepQueue, onSubmit, handleCloseAction, changeCurrentStep],\n  )\n  const handleBackAction = useCallback(() => {\n    onClickBack?.()\n\n    changeCurrentStep(stepQueue.current.pop() ?? firstStep)\n  }, [firstStep, stepQueue, onClickBack, changeCurrentStep])\n\n  const classNames = useMemo(() => {\n    const { wrapper, actionArea, buttonArea, message } = dialogContentInner()\n\n    return {\n      wrapper: wrapper(),\n      actionArea: actionArea(),\n      buttonArea: buttonArea(),\n      message: message(),\n    }\n  }, [])\n\n  const stepText = stepLength > 1 ? `（${activeStep}/${stepLength}）` : ''\n\n  const calcedResponseStatus = useResponseStatus(responseStatus)\n\n  return (\n    // eslint-disable-next-line smarthr/a11y-prohibit-sectioning-content-in-form\n    <Section>\n      <form onSubmit={handleSubmitAction}>\n        <div className={classNames.wrapper}>\n          <DialogHeading\n            id={heading.id}\n            sub={heading.sub ? `${heading.sub}${stepText}` : undefined}\n            text={heading.sub ? heading.text : `${heading.text}${stepText}`}\n          />\n          <DialogBody\n            contentPadding={contentPadding}\n            contentBgColor={contentBgColor}\n            ref={scrollerRef}\n          >\n            {children}\n          </DialogBody>\n          <div className={classNames.actionArea}>\n            <Cluster justify=\"space-between\" gap={{ row: 0.5, column: 2 }}>\n              {!backButton.hidden && activeStep > 1 && (\n                <Button\n                  onClick={handleBackAction}\n                  variant={backButton.theme}\n                  disabled={backButton.disabled || calcedResponseStatus.isProcessing}\n                  className=\"smarthr-ui-Dialog-backButton\"\n                >\n                  {backButton.text}\n                </Button>\n              )}\n              <Cluster gap={BUTTON_COLUMN_GAP} className={classNames.buttonArea}>\n                {!closeButton.hidden && (\n                  <Button\n                    onClick={handleCloseAction}\n                    variant={closeButton.theme}\n                    disabled={closeButton.disabled || calcedResponseStatus.isProcessing}\n                    className=\"smarthr-ui-Dialog-closeButton\"\n                  >\n                    {closeButton.text}\n                  </Button>\n                )}\n                {!submitButton.hidden && (\n                  <Button\n                    type=\"submit\"\n                    variant={submitButton.theme}\n                    disabled={submitButton.disabled}\n                    loading={calcedResponseStatus.isProcessing}\n                    className=\"smarthr-ui-Dialog-actionButton\"\n                  >\n                    {submitButton.text}\n                  </Button>\n                )}\n              </Cluster>\n            </Cluster>\n            <DialogContentResponseStatusMessage\n              responseStatus={calcedResponseStatus}\n              className={classNames.message}\n            />\n          </div>\n        </div>\n      </form>\n    </Section>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiEA;AACE;AACA;;AAGK;AAgBL;AAEA;AACE;;;AAGE;;;;AAKJ;;;AAKI;;;AAGF;AAIF;;;;;AAOI;AACE;AACE;;;AAGF;;;AAIF;AACF;AAGF;;;;AAMA;AACE;;;;;;;;AAUF;AAEA;;;AAIE;AA4DJ;;"}

package/lib/components/Dialog/DialogContentResponseStatusMessage.cjs

@@ -1,23 +1,18 @@
 'use strict';
 
 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.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 var components_ResponseMessage_ResponseMessage = require('../ResponseMessage/ResponseMessage.cjs');
 
-const classNameGenerator = index.tv({
-    base: 'empty:!shr-mt-0',
-});
 const DialogContentResponseStatusMessage = ({ responseStatus, className }) => {
-    const classNames = React.useMemo(() => classNameGenerator({ className }), [className]);
-    const StatusMessage = () => (jsxRuntime.jsx(components_ResponseMessage_ResponseMessage.ResponseMessage, { status: responseStatus.status, children: responseStatus.message }));
+    const isError = responseStatus.message && responseStatus.status === 'error';
+    const isSuccess = responseStatus.message && responseStatus.status === 'success';
     return (
     /**
      * ライブリージョンを条件付きでDOMに追加すると、支援技術に通知が正しく行われないことがあるため、常にDOM上に存在するようにしています
      *
      * @see https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/#make-sure-the-live-region-container-is-in-the-dom-as-early-as-possible
      */
-    jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: classNames, role: "alert", children: responseStatus.message && responseStatus.status === 'error' && jsxRuntime.jsx(StatusMessage, {}) }), jsxRuntime.jsx("div", { className: classNames, role: "status", children: responseStatus.message && responseStatus.status === 'success' && jsxRuntime.jsx(StatusMessage, {}) })] }));
+    jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: isError ? `${className} shr-mt-0.5` : className, role: "alert", children: isError && jsxRuntime.jsx(components_ResponseMessage_ResponseMessage.ResponseMessage, { status: "error", children: responseStatus.message }) }), jsxRuntime.jsx("div", { className: isSuccess ? `${className} shr-mt-0.5` : className, role: "status", children: isSuccess && jsxRuntime.jsx(components_ResponseMessage_ResponseMessage.ResponseMessage, { status: "success", children: responseStatus.message }) })] }));
 };
 
 exports.DialogContentResponseStatusMessage = DialogContentResponseStatusMessage;

package/lib/components/Dialog/DialogContentResponseStatusMessage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContentResponseStatusMessage.cjs","sources":["../../../src/components/Dialog/DialogContentResponseStatusMessage.tsx"],"sourcesContent":["import { type FC, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { ResponseMessage } from '../ResponseMessage'\n\nimport type { useResponseStatus } from '../../hooks/useResponseStatus'\n\nconst classNameGenerator = tv({\n  base: 'empty:!shr-mt-0',\n})\n\nexport const DialogContentResponseStatusMessage: FC<{\n  responseStatus: ReturnType<typeof useResponseStatus>\n  className?: string\n}> = ({ responseStatus, className }) => {\n  const classNames = useMemo(() => classNameGenerator({ className }), [className])\n\n  const StatusMessage = () => (\n    <ResponseMessage status={responseStatus.status}>{responseStatus.message}</ResponseMessage>\n  )\n\n  return (\n    /**\n     * ライブリージョンを条件付きでDOMに追加すると、支援技術に通知が正しく行われないことがあるため、常にDOM上に存在するようにしています\n     *\n     * @see https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/#make-sure-the-live-region-container-is-in-the-dom-as-early-as-possible\n     */\n    <>\n      <div className={classNames} role=\"alert\">\n        {responseStatus.message && responseStatus.status === 'error' && <StatusMessage />}\n      </div>\n      <div className={classNames} role=\"status\">\n        {responseStatus.message && responseStatus.status === 'success' && <StatusMessage />}\n      </div>\n    </>\n  )\n}\n"],"names":["tv","useMemo","_jsx","ResponseMessage","_jsxs","_Fragment"],"mappings":";;;;;;;AAOA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,iBAAiB;AACxB,CAAA,CAAC;AAEK,MAAM,kCAAkC,GAG1C,CAAC,EAAE,cAAc,EAAE,SAAS,EAAE,KAAI;AACrC,IAAA,MAAM,UAAU,GAAGC,aAAO,CAAC,MAAM,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEhF,MAAM,aAAa,GAAG,OACpBC,cAAA,CAACC,0DAAe,EAAA,EAAC,MAAM,EAAE,cAAc,CAAC,MAAM,EAAA,QAAA,EAAG,cAAc,CAAC,OAAO,EAAA,CAAmB,CAC3F;IAED;AACE;;;;AAIG;IACHC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CACEH,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,EAAE,IAAI,EAAC,OAAO,EAAA,QAAA,EACrC,cAAc,CAAC,OAAO,IAAI,cAAc,CAAC,MAAM,KAAK,OAAO,IAAIA,cAAA,CAAC,aAAa,EAAA,EAAA,CAAG,EAAA,CAC7E,EACNA,wBAAK,SAAS,EAAE,UAAU,EAAE,IAAI,EAAC,QAAQ,EAAA,QAAA,EACtC,cAAc,CAAC,OAAO,IAAI,cAAc,CAAC,MAAM,KAAK,SAAS,IAAIA,cAAA,CAAC,aAAa,EAAA,EAAA,CAAG,EAAA,CAC/E,CAAA,EAAA,CACL;AAEP;;;;"}
+{"version":3,"file":"DialogContentResponseStatusMessage.cjs","sources":["../../../src/components/Dialog/DialogContentResponseStatusMessage.tsx"],"sourcesContent":["import { ResponseMessage } from '../ResponseMessage'\n\nimport type { useResponseStatus } from '../../hooks/useResponseStatus'\nimport type { FC } from 'react'\n\nexport const DialogContentResponseStatusMessage: FC<{\n  responseStatus: ReturnType<typeof useResponseStatus>\n  className?: string\n}> = ({ responseStatus, className }) => {\n  const isError = responseStatus.message && responseStatus.status === 'error'\n  const isSuccess = responseStatus.message && responseStatus.status === 'success'\n\n  return (\n    /**\n     * ライブリージョンを条件付きでDOMに追加すると、支援技術に通知が正しく行われないことがあるため、常にDOM上に存在するようにしています\n     *\n     * @see https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/#make-sure-the-live-region-container-is-in-the-dom-as-early-as-possible\n     */\n    <>\n      <div className={isError ? `${className} shr-mt-0.5` : className} role=\"alert\">\n        {isError && <ResponseMessage status=\"error\">{responseStatus.message}</ResponseMessage>}\n      </div>\n      <div className={isSuccess ? `${className} shr-mt-0.5` : className} role=\"status\">\n        {isSuccess && <ResponseMessage status=\"success\">{responseStatus.message}</ResponseMessage>}\n      </div>\n    </>\n  )\n}\n"],"names":["_jsxs","_Fragment","_jsx","ResponseMessage"],"mappings":";;;;;AAKO,MAAM,kCAAkC,GAG1C,CAAC,EAAE,cAAc,EAAE,SAAS,EAAE,KAAI;IACrC,MAAM,OAAO,GAAG,cAAc,CAAC,OAAO,IAAI,cAAc,CAAC,MAAM,KAAK,OAAO;IAC3E,MAAM,SAAS,GAAG,cAAc,CAAC,OAAO,IAAI,cAAc,CAAC,MAAM,KAAK,SAAS;IAE/E;AACE;;;;AAIG;AACH,IAAAA,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CACEC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,OAAO,GAAG,CAAA,EAAG,SAAS,CAAA,WAAA,CAAa,GAAG,SAAS,EAAE,IAAI,EAAC,OAAO,EAAA,QAAA,EAC1E,OAAO,IAAIA,cAAA,CAACC,0DAAe,EAAA,EAAC,MAAM,EAAC,OAAO,EAAA,QAAA,EAAE,cAAc,CAAC,OAAO,GAAmB,EAAA,CAClF,EACND,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,SAAS,GAAG,CAAA,EAAG,SAAS,CAAA,WAAA,CAAa,GAAG,SAAS,EAAE,IAAI,EAAC,QAAQ,EAAA,QAAA,EAC7E,SAAS,IAAIA,cAAA,CAACC,0DAAe,EAAA,EAAC,MAAM,EAAC,SAAS,EAAA,QAAA,EAAE,cAAc,CAAC,OAAO,EAAA,CAAmB,EAAA,CACtF,CAAA,EAAA,CACL;AAEP;;;;"}

package/lib/components/Dialog/DialogContentResponseStatusMessage.d.ts

@@ -1,5 +1,5 @@
-import { type FC } from 'react';
 import type { useResponseStatus } from '../../hooks/useResponseStatus';
+import type { FC } from 'react';
 export declare const DialogContentResponseStatusMessage: FC<{
     responseStatus: ReturnType<typeof useResponseStatus>;
     className?: string;

package/lib/components/Dialog/DialogContentResponseStatusMessage.js

@@ -1,21 +1,16 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useMemo } 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.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import { ResponseMessage } from '../ResponseMessage/ResponseMessage.js';
 
-const classNameGenerator = ce({
-    base: 'empty:!shr-mt-0',
-});
 const DialogContentResponseStatusMessage = ({ responseStatus, className }) => {
-    const classNames = useMemo(() => classNameGenerator({ className }), [className]);
-    const StatusMessage = () => (jsx(ResponseMessage, { status: responseStatus.status, children: responseStatus.message }));
+    const isError = responseStatus.message && responseStatus.status === 'error';
+    const isSuccess = responseStatus.message && responseStatus.status === 'success';
     return (
     /**
      * ライブリージョンを条件付きでDOMに追加すると、支援技術に通知が正しく行われないことがあるため、常にDOM上に存在するようにしています
      *
      * @see https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/#make-sure-the-live-region-container-is-in-the-dom-as-early-as-possible
      */
-    jsxs(Fragment, { children: [jsx("div", { className: classNames, role: "alert", children: responseStatus.message && responseStatus.status === 'error' && jsx(StatusMessage, {}) }), jsx("div", { className: classNames, role: "status", children: responseStatus.message && responseStatus.status === 'success' && jsx(StatusMessage, {}) })] }));
+    jsxs(Fragment, { children: [jsx("div", { className: isError ? `${className} shr-mt-0.5` : className, role: "alert", children: isError && jsx(ResponseMessage, { status: "error", children: responseStatus.message }) }), jsx("div", { className: isSuccess ? `${className} shr-mt-0.5` : className, role: "status", children: isSuccess && jsx(ResponseMessage, { status: "success", children: responseStatus.message }) })] }));
 };
 
 export { DialogContentResponseStatusMessage };

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

@@ -1 +1 @@
-{"version":3,"file":"DialogContentResponseStatusMessage.js","sources":["../../../src/components/Dialog/DialogContentResponseStatusMessage.tsx"],"sourcesContent":["import { type FC, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { ResponseMessage } from '../ResponseMessage'\n\nimport type { useResponseStatus } from '../../hooks/useResponseStatus'\n\nconst classNameGenerator = tv({\n  base: 'empty:!shr-mt-0',\n})\n\nexport const DialogContentResponseStatusMessage: FC<{\n  responseStatus: ReturnType<typeof useResponseStatus>\n  className?: string\n}> = ({ responseStatus, className }) => {\n  const classNames = useMemo(() => classNameGenerator({ className }), [className])\n\n  const StatusMessage = () => (\n    <ResponseMessage status={responseStatus.status}>{responseStatus.message}</ResponseMessage>\n  )\n\n  return (\n    /**\n     * ライブリージョンを条件付きでDOMに追加すると、支援技術に通知が正しく行われないことがあるため、常にDOM上に存在するようにしています\n     *\n     * @see https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/#make-sure-the-live-region-container-is-in-the-dom-as-early-as-possible\n     */\n    <>\n      <div className={classNames} role=\"alert\">\n        {responseStatus.message && responseStatus.status === 'error' && <StatusMessage />}\n      </div>\n      <div className={classNames} role=\"status\">\n        {responseStatus.message && responseStatus.status === 'success' && <StatusMessage />}\n      </div>\n    </>\n  )\n}\n"],"names":["tv","_jsx","_jsxs","_Fragment"],"mappings":";;;;;AAOA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,iBAAiB;AACxB,CAAA,CAAC;AAEK,MAAM,kCAAkC,GAG1C,CAAC,EAAE,cAAc,EAAE,SAAS,EAAE,KAAI;AACrC,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEhF,MAAM,aAAa,GAAG,OACpBC,GAAA,CAAC,eAAe,EAAA,EAAC,MAAM,EAAE,cAAc,CAAC,MAAM,EAAA,QAAA,EAAG,cAAc,CAAC,OAAO,EAAA,CAAmB,CAC3F;IAED;AACE;;;;AAIG;IACHC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,EAAE,IAAI,EAAC,OAAO,EAAA,QAAA,EACrC,cAAc,CAAC,OAAO,IAAI,cAAc,CAAC,MAAM,KAAK,OAAO,IAAIA,GAAA,CAAC,aAAa,EAAA,EAAA,CAAG,EAAA,CAC7E,EACNA,aAAK,SAAS,EAAE,UAAU,EAAE,IAAI,EAAC,QAAQ,EAAA,QAAA,EACtC,cAAc,CAAC,OAAO,IAAI,cAAc,CAAC,MAAM,KAAK,SAAS,IAAIA,GAAA,CAAC,aAAa,EAAA,EAAA,CAAG,EAAA,CAC/E,CAAA,EAAA,CACL;AAEP;;;;"}
+{"version":3,"file":"DialogContentResponseStatusMessage.js","sources":["../../../src/components/Dialog/DialogContentResponseStatusMessage.tsx"],"sourcesContent":["import { ResponseMessage } from '../ResponseMessage'\n\nimport type { useResponseStatus } from '../../hooks/useResponseStatus'\nimport type { FC } from 'react'\n\nexport const DialogContentResponseStatusMessage: FC<{\n  responseStatus: ReturnType<typeof useResponseStatus>\n  className?: string\n}> = ({ responseStatus, className }) => {\n  const isError = responseStatus.message && responseStatus.status === 'error'\n  const isSuccess = responseStatus.message && responseStatus.status === 'success'\n\n  return (\n    /**\n     * ライブリージョンを条件付きでDOMに追加すると、支援技術に通知が正しく行われないことがあるため、常にDOM上に存在するようにしています\n     *\n     * @see https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/#make-sure-the-live-region-container-is-in-the-dom-as-early-as-possible\n     */\n    <>\n      <div className={isError ? `${className} shr-mt-0.5` : className} role=\"alert\">\n        {isError && <ResponseMessage status=\"error\">{responseStatus.message}</ResponseMessage>}\n      </div>\n      <div className={isSuccess ? `${className} shr-mt-0.5` : className} role=\"status\">\n        {isSuccess && <ResponseMessage status=\"success\">{responseStatus.message}</ResponseMessage>}\n      </div>\n    </>\n  )\n}\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;AAKO,MAAM,kCAAkC,GAG1C,CAAC,EAAE,cAAc,EAAE,SAAS,EAAE,KAAI;IACrC,MAAM,OAAO,GAAG,cAAc,CAAC,OAAO,IAAI,cAAc,CAAC,MAAM,KAAK,OAAO;IAC3E,MAAM,SAAS,GAAG,cAAc,CAAC,OAAO,IAAI,cAAc,CAAC,MAAM,KAAK,SAAS;IAE/E;AACE;;;;AAIG;AACH,IAAAA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,OAAO,GAAG,CAAA,EAAG,SAAS,CAAA,WAAA,CAAa,GAAG,SAAS,EAAE,IAAI,EAAC,OAAO,EAAA,QAAA,EAC1E,OAAO,IAAIA,GAAA,CAAC,eAAe,EAAA,EAAC,MAAM,EAAC,OAAO,EAAA,QAAA,EAAE,cAAc,CAAC,OAAO,GAAmB,EAAA,CAClF,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,SAAS,GAAG,CAAA,EAAG,SAAS,CAAA,WAAA,CAAa,GAAG,SAAS,EAAE,IAAI,EAAC,QAAQ,EAAA,QAAA,EAC7E,SAAS,IAAIA,GAAA,CAAC,eAAe,EAAA,EAAC,MAAM,EAAC,SAAS,EAAA,QAAA,EAAE,cAAc,CAAC,OAAO,EAAA,CAAmB,EAAA,CACtF,CAAA,EAAA,CACL;AAEP;;;;"}

package/lib/components/Dialog/FocusTrap.cjs

@@ -19,7 +19,10 @@ const FocusTrap = React.forwardRef(({ firstFocusTarget, children }, ref) => {
     }));
     React.useEffect(() => {
         const handleKeyDown = (e) => {
-            if (e.key !== 'Tab' || innerRef.current === null) {
+            // IME 変換中の Tab は変換候補の選択に使われるため、フォーカストラップの対象外にする。
+            // ここで preventDefault してしまうと、Dialog 内で日本語入力中に Tab を押しても
+            // 変換候補が確定されず、未確定文字列がそのまま入力されてしまう。
+            if (e.key !== 'Tab' || e.isComposing || innerRef.current === null) {
                 return;
             }
             const tabbables = libs_tabbable.tabbable(innerRef.current).filter((elm) => elm.tabIndex >= 0);

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

@@ -1 +1 @@
-{"version":3,"file":"FocusTrap.cjs","sources":["../../../src/components/Dialog/FocusTrap.tsx"],"sourcesContent":["import {\n  type PropsWithChildren,\n  type RefObject,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\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  useImperativeHandle(ref, () => ({\n    focus: () => {\n      if (firstFocusTarget?.current) {\n        firstFocusTarget.current.focus()\n      } else {\n        dummyFocusRef.current?.focus()\n      }\n    },\n  }))\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab' || 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  }, [])\n\n  useEffect(() => {\n    const triggerElement = document.activeElement\n\n    if (firstFocusTarget?.current) {\n      firstFocusTarget.current.focus()\n    } else {\n      dummyFocusRef.current?.focus()\n    }\n\n    return () => {\n      // フォーカストラップ終了時にトリガにフォーカスを戻す\n      if (triggerElement instanceof HTMLElement) {\n        triggerElement.focus()\n      }\n    }\n  }, [firstFocusTarget])\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":["forwardRef","useRef","useImperativeHandle","useEffect","tabbable","_jsxs","_jsx"],"mappings":";;;;;;AAmBO,MAAM,SAAS,GAAGA,gBAAU,CAAsB,CAAC,EAAE,gBAAgB,EAAE,QAAQ,EAAE,EAAE,GAAG,KAAI;AAC/F,IAAA,MAAM,QAAQ,GAAGC,YAAM,CAAwB,IAAI,CAAC;AACpD,IAAA,MAAM,aAAa,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAElD,IAAAC,yBAAmB,CAAC,GAAG,EAAE,OAAO;QAC9B,KAAK,EAAE,MAAK;AACV,YAAA,IAAI,gBAAgB,EAAE,OAAO,EAAE;AAC7B,gBAAA,gBAAgB,CAAC,OAAO,CAAC,KAAK,EAAE;YAClC;iBAAO;AACL,gBAAA,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE;YAChC;QACF,CAAC;AACF,KAAA,CAAC,CAAC;IAEHC,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,aAAa,GAAG,CAAC,CAAgB,KAAI;AACzC,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,QAAQ,CAAC,OAAO,KAAK,IAAI,EAAE;gBAChD;YACF;YAEA,MAAM,SAAS,GAAGC,sBAAQ,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;AACtD,QAAA,CAAC;IACH,CAAC,EAAE,EAAE,CAAC;IAEND,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa;AAE7C,QAAA,IAAI,gBAAgB,EAAE,OAAO,EAAE;AAC7B,YAAA,gBAAgB,CAAC,OAAO,CAAC,KAAK,EAAE;QAClC;aAAO;AACL,YAAA,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE;QAChC;AAEA,QAAA,OAAO,MAAK;;AAEV,YAAA,IAAI,cAAc,YAAY,WAAW,EAAE;gBACzC,cAAc,CAAC,KAAK,EAAE;YACxB;AACF,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;IAEtB,QACEE,yBAAK,GAAG,EAAE,QAAQ,EAAA,QAAA,EAAA,CAEhBC,cAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,EAAA,CAAI,EACxC,QAAQ,CAAA,EAAA,CACL;AAEV,CAAC;;;;"}
+{"version":3,"file":"FocusTrap.cjs","sources":["../../../src/components/Dialog/FocusTrap.tsx"],"sourcesContent":["import {\n  type PropsWithChildren,\n  type RefObject,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\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  useImperativeHandle(ref, () => ({\n    focus: () => {\n      if (firstFocusTarget?.current) {\n        firstFocusTarget.current.focus()\n      } else {\n        dummyFocusRef.current?.focus()\n      }\n    },\n  }))\n\n  useEffect(() => {\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  }, [])\n\n  useEffect(() => {\n    const triggerElement = document.activeElement\n\n    if (firstFocusTarget?.current) {\n      firstFocusTarget.current.focus()\n    } else {\n      dummyFocusRef.current?.focus()\n    }\n\n    return () => {\n      // フォーカストラップ終了時にトリガにフォーカスを戻す\n      if (triggerElement instanceof HTMLElement) {\n        triggerElement.focus()\n      }\n    }\n  }, [firstFocusTarget])\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":["forwardRef","useRef","useImperativeHandle","useEffect","tabbable","_jsxs","_jsx"],"mappings":";;;;;;AAmBO,MAAM,SAAS,GAAGA,gBAAU,CAAsB,CAAC,EAAE,gBAAgB,EAAE,QAAQ,EAAE,EAAE,GAAG,KAAI;AAC/F,IAAA,MAAM,QAAQ,GAAGC,YAAM,CAAwB,IAAI,CAAC;AACpD,IAAA,MAAM,aAAa,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAElD,IAAAC,yBAAmB,CAAC,GAAG,EAAE,OAAO;QAC9B,KAAK,EAAE,MAAK;AACV,YAAA,IAAI,gBAAgB,EAAE,OAAO,EAAE;AAC7B,gBAAA,gBAAgB,CAAC,OAAO,CAAC,KAAK,EAAE;YAClC;iBAAO;AACL,gBAAA,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE;YAChC;QACF,CAAC;AACF,KAAA,CAAC,CAAC;IAEHC,eAAS,CAAC,MAAK;AACb,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,GAAGC,sBAAQ,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;AACtD,QAAA,CAAC;IACH,CAAC,EAAE,EAAE,CAAC;IAEND,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa;AAE7C,QAAA,IAAI,gBAAgB,EAAE,OAAO,EAAE;AAC7B,YAAA,gBAAgB,CAAC,OAAO,CAAC,KAAK,EAAE;QAClC;aAAO;AACL,YAAA,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE;QAChC;AAEA,QAAA,OAAO,MAAK;;AAEV,YAAA,IAAI,cAAc,YAAY,WAAW,EAAE;gBACzC,cAAc,CAAC,KAAK,EAAE;YACxB;AACF,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;IAEtB,QACEE,yBAAK,GAAG,EAAE,QAAQ,EAAA,QAAA,EAAA,CAEhBC,cAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,EAAA,CAAI,EACxC,QAAQ,CAAA,EAAA,CACL;AAEV,CAAC;;;;"}

package/lib/components/Dialog/FocusTrap.js

@@ -17,7 +17,10 @@ const FocusTrap = forwardRef(({ firstFocusTarget, children }, ref) => {
     }));
     useEffect(() => {
         const handleKeyDown = (e) => {
-            if (e.key !== 'Tab' || innerRef.current === null) {
+            // 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);

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  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  useImperativeHandle(ref, () => ({\n    focus: () => {\n      if (firstFocusTarget?.current) {\n        firstFocusTarget.current.focus()\n      } else {\n        dummyFocusRef.current?.focus()\n      }\n    },\n  }))\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab' || 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  }, [])\n\n  useEffect(() => {\n    const triggerElement = document.activeElement\n\n    if (firstFocusTarget?.current) {\n      firstFocusTarget.current.focus()\n    } else {\n      dummyFocusRef.current?.focus()\n    }\n\n    return () => {\n      // フォーカストラップ終了時にトリガにフォーカスを戻す\n      if (triggerElement instanceof HTMLElement) {\n        triggerElement.focus()\n      }\n    }\n  }, [firstFocusTarget])\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":";;;;AAmBO,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,mBAAmB,CAAC,GAAG,EAAE,OAAO;QAC9B,KAAK,EAAE,MAAK;AACV,YAAA,IAAI,gBAAgB,EAAE,OAAO,EAAE;AAC7B,gBAAA,gBAAgB,CAAC,OAAO,CAAC,KAAK,EAAE;YAClC;iBAAO;AACL,gBAAA,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE;YAChC;QACF,CAAC;AACF,KAAA,CAAC,CAAC;IAEH,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,aAAa,GAAG,CAAC,CAAgB,KAAI;AACzC,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,QAAQ,CAAC,OAAO,KAAK,IAAI,EAAE;gBAChD;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;AACtD,QAAA,CAAC;IACH,CAAC,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa;AAE7C,QAAA,IAAI,gBAAgB,EAAE,OAAO,EAAE;AAC7B,YAAA,gBAAgB,CAAC,OAAO,CAAC,KAAK,EAAE;QAClC;aAAO;AACL,YAAA,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE;QAChC;AAEA,QAAA,OAAO,MAAK;;AAEV,YAAA,IAAI,cAAc,YAAY,WAAW,EAAE;gBACzC,cAAc,CAAC,KAAK,EAAE;YACxB;AACF,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;IAEtB,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  useEffect,\n  useImperativeHandle,\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  useImperativeHandle(ref, () => ({\n    focus: () => {\n      if (firstFocusTarget?.current) {\n        firstFocusTarget.current.focus()\n      } else {\n        dummyFocusRef.current?.focus()\n      }\n    },\n  }))\n\n  useEffect(() => {\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  }, [])\n\n  useEffect(() => {\n    const triggerElement = document.activeElement\n\n    if (firstFocusTarget?.current) {\n      firstFocusTarget.current.focus()\n    } else {\n      dummyFocusRef.current?.focus()\n    }\n\n    return () => {\n      // フォーカストラップ終了時にトリガにフォーカスを戻す\n      if (triggerElement instanceof HTMLElement) {\n        triggerElement.focus()\n      }\n    }\n  }, [firstFocusTarget])\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":";;;;AAmBO,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,mBAAmB,CAAC,GAAG,EAAE,OAAO;QAC9B,KAAK,EAAE,MAAK;AACV,YAAA,IAAI,gBAAgB,EAAE,OAAO,EAAE;AAC7B,gBAAA,gBAAgB,CAAC,OAAO,CAAC,KAAK,EAAE;YAClC;iBAAO;AACL,gBAAA,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE;YAChC;QACF,CAAC;AACF,KAAA,CAAC,CAAC;IAEH,SAAS,CAAC,MAAK;AACb,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;AACtD,QAAA,CAAC;IACH,CAAC,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa;AAE7C,QAAA,IAAI,gBAAgB,EAAE,OAAO,EAAE;AAC7B,YAAA,gBAAgB,CAAC,OAAO,CAAC,KAAK,EAAE;QAClC;aAAO;AACL,YAAA,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE;QAChC;AAEA,QAAA,OAAO,MAAK;;AAEV,YAAA,IAAI,cAAc,YAAY,WAAW,EAAE;gBACzC,cAAc,CAAC,KAAK,EAAE;YACxB;AACF,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;IAEtB,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;;;;"}

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

@@ -8,7 +8,7 @@ var index = require('./../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss
 var hooks_useHandleEscape = require('../../../hooks/useHandleEscape.cjs');
 require('../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../intl/Localizer.cjs');
 require('../../../_virtual/dayjs.min.cjs');
 require('../../../intl/TimeFormatter.cjs');
 var libs_debounce = require('../../../libs/debounce.cjs');

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

@@ -6,7 +6,7 @@ import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwi
 import { useHandleEscape } from '../../../hooks/useHandleEscape.js';
 import '../../../intl/IntlProvider.js';
 import { useIntl } from '../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../intl/Localizer.js';
 import '../../../_virtual/dayjs.min.js';
 import '../../../intl/TimeFormatter.js';
 import { debounce } from '../../../libs/debounce.js';

package/lib/components/DropZone/DropZone.cjs

@@ -6,7 +6,7 @@ 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.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 require('../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../intl/useIntl.cjs');
-require('react-intl');
+require('../../intl/Localizer.cjs');
 require('../../_virtual/dayjs.min.cjs');
 require('../../intl/TimeFormatter.cjs');
 var components_Button_Button = require('../Button/Button.cjs');

package/lib/components/DropZone/DropZone.js

@@ -4,7 +4,7 @@ import { forwardRef, useRef, useState, useMemo, useImperativeHandle, useCallback
 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.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import '../../intl/IntlProvider.js';
 import { useIntl } from '../../intl/useIntl.js';
-import 'react-intl';
+import '../../intl/Localizer.js';
 import '../../_virtual/dayjs.min.js';
 import '../../intl/TimeFormatter.js';
 import { Button } from '../Button/Button.js';

package/lib/components/Dropdown/Dropdown.cjs

@@ -28,45 +28,27 @@ const Dropdown = ({ onOpen, onClose, children }) => {
     const { createPortal, portalRoot, isPortalRootMounted, isChildPortal, PortalParentProvider } = hooks_usePortal.usePortal();
     const triggerElementRef = React.useRef(null);
     const contentId = React.useId();
-    if (portalRoot) {
-        portalRoot.setAttribute('id', contentId);
-    }
-    React.useEffect(() => {
-        const onClickBody = (e) => {
-            // ignore events from events within DropdownTrigger and DropdownContent
-            if (!components_Dropdown_dropdownHelper.isEventFromChild(e, triggerElementRef.current) && !isChildPortal(e.target)) {
-                setActive(false);
-            }
-        };
-        document.body.addEventListener('click', onClickBody, false);
-        return () => {
-            document.body.removeEventListener('click', onClickBody, false);
-        };
-    }, [isChildPortal, portalRoot]);
+    const unstableRef = React.useRef({
+        active,
+        isPortalRootMounted,
+        onOpen,
+        onClose,
+        createPortal,
+    });
+    unstableRef.current = {
+        active,
+        isPortalRootMounted,
+        onOpen,
+        onClose,
+        createPortal,
+    };
     // This is the root container of a dropdown content located in outside the DOM tree
     const DropdownContentRoot = React.useMemo(() => {
-        const result = (props) => active ? createPortal(props.children) : null;
+        const result = (props) => unstableRef.current.active ? unstableRef.current.createPortal(props.children) : null;
         // set the displayName explicit for DevTools
         result.displayName = 'DropdownContentRoot';
         return result;
-    }, [active, createPortal]);
-    const togglerRef = React.useRef({
-        isPortalRootMounted,
-        onOpen,
-        onClose,
-    });
-    React.useEffect(() => {
-        togglerRef.current = {
-            isPortalRootMounted,
-            onOpen,
-            onClose,
-        };
-    }, [isPortalRootMounted, onOpen, onClose]);
-    React.useEffect(() => {
-        if (togglerRef.current.isPortalRootMounted()) {
-            togglerRef.current[active ? 'onOpen' : 'onClose']?.();
-        }
-    }, [active]);
+    }, []);
     const memoizedOnClickTrigger = React.useCallback((rect) => {
         setActive((current) => {
             const newActive = !current;
@@ -81,6 +63,26 @@ const Dropdown = ({ onOpen, onClose, children }) => {
         // return focus to the Trigger
         components_Dropdown_dropdownHelper.getFirstTabbable(triggerElementRef)?.focus();
     }, []);
+    React.useEffect(() => {
+        if (portalRoot) {
+            portalRoot.setAttribute('id', contentId);
+        }
+        const onClickBody = (e) => {
+            // ignore events from events within DropdownTrigger and DropdownContent
+            if (!components_Dropdown_dropdownHelper.isEventFromChild(e, triggerElementRef.current) && !isChildPortal(e.target)) {
+                setActive(false);
+            }
+        };
+        document.body.addEventListener('click', onClickBody, false);
+        return () => {
+            document.body.removeEventListener('click', onClickBody, false);
+        };
+    }, [isChildPortal, portalRoot, contentId]);
+    React.useEffect(() => {
+        if (unstableRef.current.isPortalRootMounted()) {
+            unstableRef.current[active ? 'onOpen' : 'onClose']?.();
+        }
+    }, [active]);
     return (jsxRuntime.jsx(PortalParentProvider, { children: jsxRuntime.jsx(DropdownContext.Provider, { value: {
                 active,
                 triggerRect,

package/lib/components/Dropdown/Dropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.cjs","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type MutableRefObject,\n  type PropsWithChildren,\n  type ReactNode,\n  createContext,\n  createRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { usePortal } from '../../hooks/usePortal'\n\nimport { type Rect, getFirstTabbable, isEventFromChild } from './dropdownHelper'\n\ntype Props = PropsWithChildren<{\n  onOpen?: () => void\n  onClose?: () => void\n}>\n\ntype DropdownContextType = {\n  active: boolean\n  triggerRect: Rect\n  triggerElementRef: MutableRefObject<HTMLDivElement | null>\n  rootTriggerRef: MutableRefObject<HTMLDivElement | null> | null\n  memoizedOnClickTrigger: (rect: Rect) => void\n  onClickCloser: () => void\n  DropdownContentRoot: FC<{ children: ReactNode }>\n  contentId: string\n}\n\nconst initialRect = { top: 0, right: 0, bottom: 0, left: 0 }\n\nexport const DropdownContext = createContext<DropdownContextType>({\n  active: false,\n  triggerRect: initialRect,\n  triggerElementRef: createRef(),\n  rootTriggerRef: null,\n  memoizedOnClickTrigger: () => {\n    /* noop */\n  },\n  onClickCloser: () => {\n    /* noop */\n  },\n  DropdownContentRoot: () => null,\n  contentId: '',\n})\n\nexport const Dropdown: FC<Props> = ({ onOpen, onClose, children }) => {\n  const [active, setActive] = useState(false)\n  const [triggerRect, setTriggerRect] = useState<Rect>(initialRect)\n\n  const { rootTriggerRef } = useContext(DropdownContext)\n  const { createPortal, portalRoot, isPortalRootMounted, isChildPortal, PortalParentProvider } =\n    usePortal()\n\n  const triggerElementRef = useRef<HTMLDivElement>(null)\n  const contentId = useId()\n\n  if (portalRoot) {\n    portalRoot.setAttribute('id', contentId)\n  }\n\n  useEffect(() => {\n    const onClickBody = (e: any) => {\n      // ignore events from events within DropdownTrigger and DropdownContent\n      if (!isEventFromChild(e, triggerElementRef.current) && !isChildPortal(e.target)) {\n        setActive(false)\n      }\n    }\n\n    document.body.addEventListener('click', onClickBody, false)\n\n    return () => {\n      document.body.removeEventListener('click', onClickBody, false)\n    }\n  }, [isChildPortal, portalRoot])\n\n  // This is the root container of a dropdown content located in outside the DOM tree\n  const DropdownContentRoot = useMemo<FC<{ children: ReactNode }>>(() => {\n    const result: FC<{ children: ReactNode }> = (props) =>\n      active ? createPortal(props.children) : null\n\n    // set the displayName explicit for DevTools\n    result.displayName = 'DropdownContentRoot'\n\n    return result\n  }, [active, createPortal])\n\n  const togglerRef = useRef({\n    isPortalRootMounted,\n    onOpen,\n    onClose,\n  })\n  useEffect(() => {\n    togglerRef.current = {\n      isPortalRootMounted,\n      onOpen,\n      onClose,\n    }\n  }, [isPortalRootMounted, onOpen, onClose])\n\n  useEffect(() => {\n    if (togglerRef.current.isPortalRootMounted()) {\n      togglerRef.current[active ? 'onOpen' : 'onClose']?.()\n    }\n  }, [active])\n\n  const memoizedOnClickTrigger = useCallback((rect: Rect) => {\n    setActive((current) => {\n      const newActive = !current\n\n      if (newActive) {\n        setTriggerRect(rect)\n      }\n\n      return newActive\n    })\n  }, [])\n\n  const onClickCloser = useCallback(() => {\n    setActive(false)\n\n    // return focus to the Trigger\n    getFirstTabbable(triggerElementRef)?.focus()\n  }, [])\n\n  return (\n    <PortalParentProvider>\n      <DropdownContext.Provider\n        value={{\n          active,\n          triggerRect,\n          triggerElementRef,\n          rootTriggerRef: rootTriggerRef || triggerElementRef || null,\n          memoizedOnClickTrigger,\n          onClickCloser,\n          DropdownContentRoot,\n          contentId,\n        }}\n      >\n        {children}\n      </DropdownContext.Provider>\n    </PortalParentProvider>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;AAsCA;AAEO;AACL;AACA;;AAEA;;;;;;;AAOA;AACA;AACD;AAEM;;;;AAKL;AAGA;AACA;;AAGE;;;AAIA;;AAEE;;;AAGF;;AAIA;;AAEA;AACF;;AAGA;;;AAKE;AAEA;AACF;;;;;AAMC;;;;;;;;;AAUC;AACE;;AAEJ;AAEA;AACE;AACE;;;;AAMA;AACF;;AAGF;;;AAIE;;;;;;AAUM;;;;;AAKD;AAMT;;;"}
+{"version":3,"file":"Dropdown.cjs","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type MutableRefObject,\n  type PropsWithChildren,\n  type ReactNode,\n  createContext,\n  createRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { usePortal } from '../../hooks/usePortal'\n\nimport { type Rect, getFirstTabbable, isEventFromChild } from './dropdownHelper'\n\ntype Props = PropsWithChildren<{\n  onOpen?: () => void\n  onClose?: () => void\n}>\n\ntype DropdownContextType = {\n  active: boolean\n  triggerRect: Rect\n  triggerElementRef: MutableRefObject<HTMLDivElement | null>\n  rootTriggerRef: MutableRefObject<HTMLDivElement | null> | null\n  memoizedOnClickTrigger: (rect: Rect) => void\n  onClickCloser: () => void\n  DropdownContentRoot: FC<{ children: ReactNode }>\n  contentId: string\n}\n\nconst initialRect = { top: 0, right: 0, bottom: 0, left: 0 }\n\nexport const DropdownContext = createContext<DropdownContextType>({\n  active: false,\n  triggerRect: initialRect,\n  triggerElementRef: createRef(),\n  rootTriggerRef: null,\n  memoizedOnClickTrigger: () => {\n    /* noop */\n  },\n  onClickCloser: () => {\n    /* noop */\n  },\n  DropdownContentRoot: () => null,\n  contentId: '',\n})\n\nexport const Dropdown: FC<Props> = ({ onOpen, onClose, children }) => {\n  const [active, setActive] = useState(false)\n  const [triggerRect, setTriggerRect] = useState<Rect>(initialRect)\n\n  const { rootTriggerRef } = useContext(DropdownContext)\n  const { createPortal, portalRoot, isPortalRootMounted, isChildPortal, PortalParentProvider } =\n    usePortal()\n\n  const triggerElementRef = useRef<HTMLDivElement>(null)\n  const contentId = useId()\n\n  const unstableRef = useRef({\n    active,\n    isPortalRootMounted,\n    onOpen,\n    onClose,\n    createPortal,\n  })\n  unstableRef.current = {\n    active,\n    isPortalRootMounted,\n    onOpen,\n    onClose,\n    createPortal,\n  }\n\n  // This is the root container of a dropdown content located in outside the DOM tree\n  const DropdownContentRoot = useMemo<FC<{ children: ReactNode }>>(() => {\n    const result: FC<{ children: ReactNode }> = (props) =>\n      unstableRef.current.active ? unstableRef.current.createPortal(props.children) : null\n\n    // set the displayName explicit for DevTools\n    result.displayName = 'DropdownContentRoot'\n\n    return result\n  }, [])\n\n  const memoizedOnClickTrigger = useCallback((rect: Rect) => {\n    setActive((current) => {\n      const newActive = !current\n\n      if (newActive) {\n        setTriggerRect(rect)\n      }\n\n      return newActive\n    })\n  }, [])\n\n  const onClickCloser = useCallback(() => {\n    setActive(false)\n\n    // return focus to the Trigger\n    getFirstTabbable(triggerElementRef)?.focus()\n  }, [])\n\n  useEffect(() => {\n    if (portalRoot) {\n      portalRoot.setAttribute('id', contentId)\n    }\n\n    const onClickBody = (e: any) => {\n      // ignore events from events within DropdownTrigger and DropdownContent\n      if (!isEventFromChild(e, triggerElementRef.current) && !isChildPortal(e.target)) {\n        setActive(false)\n      }\n    }\n\n    document.body.addEventListener('click', onClickBody, false)\n\n    return () => {\n      document.body.removeEventListener('click', onClickBody, false)\n    }\n  }, [isChildPortal, portalRoot, contentId])\n\n  useEffect(() => {\n    if (unstableRef.current.isPortalRootMounted()) {\n      unstableRef.current[active ? 'onOpen' : 'onClose']?.()\n    }\n  }, [active])\n\n  return (\n    <PortalParentProvider>\n      <DropdownContext.Provider\n        value={{\n          active,\n          triggerRect,\n          triggerElementRef,\n          rootTriggerRef: rootTriggerRef || triggerElementRef || null,\n          memoizedOnClickTrigger,\n          onClickCloser,\n          DropdownContentRoot,\n          contentId,\n        }}\n      >\n        {children}\n      </DropdownContext.Provider>\n    </PortalParentProvider>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;AAsCA;AAEO;AACL;AACA;;AAEA;;;;;;;AAOA;AACA;AACD;AAEM;;;;AAKL;AAGA;AACA;;;;;;;AAQC;;;;;;;;;AAUD;AACE;;AAIA;AAEA;;AAGF;AACE;AACE;;;;AAMA;AACF;;AAGF;;;AAIE;;;;AAKE;;AAGF;;AAEE;;;AAGF;;AAIA;;AAEA;;;AAIA;AACE;;AAEJ;;;;;AASQ;;;;;AAKD;AAMT;;;"}

package/lib/components/Dropdown/Dropdown.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { createContext, createRef, useState, useContext, useRef, useId, useEffect, useMemo, useCallback } from 'react';
+import { createContext, createRef, useState, useContext, useRef, useId, useMemo, useCallback, useEffect } from 'react';
 import { usePortal } from '../../hooks/usePortal.js';
 import { getFirstTabbable, isEventFromChild } from './dropdownHelper.js';
 
@@ -26,45 +26,27 @@ const Dropdown = ({ onOpen, onClose, children }) => {
     const { createPortal, portalRoot, isPortalRootMounted, isChildPortal, PortalParentProvider } = usePortal();
     const triggerElementRef = useRef(null);
     const contentId = useId();
-    if (portalRoot) {
-        portalRoot.setAttribute('id', contentId);
-    }
-    useEffect(() => {
-        const onClickBody = (e) => {
-            // ignore events from events within DropdownTrigger and DropdownContent
-            if (!isEventFromChild(e, triggerElementRef.current) && !isChildPortal(e.target)) {
-                setActive(false);
-            }
-        };
-        document.body.addEventListener('click', onClickBody, false);
-        return () => {
-            document.body.removeEventListener('click', onClickBody, false);
-        };
-    }, [isChildPortal, portalRoot]);
+    const unstableRef = useRef({
+        active,
+        isPortalRootMounted,
+        onOpen,
+        onClose,
+        createPortal,
+    });
+    unstableRef.current = {
+        active,
+        isPortalRootMounted,
+        onOpen,
+        onClose,
+        createPortal,
+    };
     // This is the root container of a dropdown content located in outside the DOM tree
     const DropdownContentRoot = useMemo(() => {
-        const result = (props) => active ? createPortal(props.children) : null;
+        const result = (props) => unstableRef.current.active ? unstableRef.current.createPortal(props.children) : null;
         // set the displayName explicit for DevTools
         result.displayName = 'DropdownContentRoot';
         return result;
-    }, [active, createPortal]);
-    const togglerRef = useRef({
-        isPortalRootMounted,
-        onOpen,
-        onClose,
-    });
-    useEffect(() => {
-        togglerRef.current = {
-            isPortalRootMounted,
-            onOpen,
-            onClose,
-        };
-    }, [isPortalRootMounted, onOpen, onClose]);
-    useEffect(() => {
-        if (togglerRef.current.isPortalRootMounted()) {
-            togglerRef.current[active ? 'onOpen' : 'onClose']?.();
-        }
-    }, [active]);
+    }, []);
     const memoizedOnClickTrigger = useCallback((rect) => {
         setActive((current) => {
             const newActive = !current;
@@ -79,6 +61,26 @@ const Dropdown = ({ onOpen, onClose, children }) => {
         // return focus to the Trigger
         getFirstTabbable(triggerElementRef)?.focus();
     }, []);
+    useEffect(() => {
+        if (portalRoot) {
+            portalRoot.setAttribute('id', contentId);
+        }
+        const onClickBody = (e) => {
+            // ignore events from events within DropdownTrigger and DropdownContent
+            if (!isEventFromChild(e, triggerElementRef.current) && !isChildPortal(e.target)) {
+                setActive(false);
+            }
+        };
+        document.body.addEventListener('click', onClickBody, false);
+        return () => {
+            document.body.removeEventListener('click', onClickBody, false);
+        };
+    }, [isChildPortal, portalRoot, contentId]);
+    useEffect(() => {
+        if (unstableRef.current.isPortalRootMounted()) {
+            unstableRef.current[active ? 'onOpen' : 'onClose']?.();
+        }
+    }, [active]);
     return (jsx(PortalParentProvider, { children: jsx(DropdownContext.Provider, { value: {
                 active,
                 triggerRect,

package/lib/components/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type MutableRefObject,\n  type PropsWithChildren,\n  type ReactNode,\n  createContext,\n  createRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { usePortal } from '../../hooks/usePortal'\n\nimport { type Rect, getFirstTabbable, isEventFromChild } from './dropdownHelper'\n\ntype Props = PropsWithChildren<{\n  onOpen?: () => void\n  onClose?: () => void\n}>\n\ntype DropdownContextType = {\n  active: boolean\n  triggerRect: Rect\n  triggerElementRef: MutableRefObject<HTMLDivElement | null>\n  rootTriggerRef: MutableRefObject<HTMLDivElement | null> | null\n  memoizedOnClickTrigger: (rect: Rect) => void\n  onClickCloser: () => void\n  DropdownContentRoot: FC<{ children: ReactNode }>\n  contentId: string\n}\n\nconst initialRect = { top: 0, right: 0, bottom: 0, left: 0 }\n\nexport const DropdownContext = createContext<DropdownContextType>({\n  active: false,\n  triggerRect: initialRect,\n  triggerElementRef: createRef(),\n  rootTriggerRef: null,\n  memoizedOnClickTrigger: () => {\n    /* noop */\n  },\n  onClickCloser: () => {\n    /* noop */\n  },\n  DropdownContentRoot: () => null,\n  contentId: '',\n})\n\nexport const Dropdown: FC<Props> = ({ onOpen, onClose, children }) => {\n  const [active, setActive] = useState(false)\n  const [triggerRect, setTriggerRect] = useState<Rect>(initialRect)\n\n  const { rootTriggerRef } = useContext(DropdownContext)\n  const { createPortal, portalRoot, isPortalRootMounted, isChildPortal, PortalParentProvider } =\n    usePortal()\n\n  const triggerElementRef = useRef<HTMLDivElement>(null)\n  const contentId = useId()\n\n  if (portalRoot) {\n    portalRoot.setAttribute('id', contentId)\n  }\n\n  useEffect(() => {\n    const onClickBody = (e: any) => {\n      // ignore events from events within DropdownTrigger and DropdownContent\n      if (!isEventFromChild(e, triggerElementRef.current) && !isChildPortal(e.target)) {\n        setActive(false)\n      }\n    }\n\n    document.body.addEventListener('click', onClickBody, false)\n\n    return () => {\n      document.body.removeEventListener('click', onClickBody, false)\n    }\n  }, [isChildPortal, portalRoot])\n\n  // This is the root container of a dropdown content located in outside the DOM tree\n  const DropdownContentRoot = useMemo<FC<{ children: ReactNode }>>(() => {\n    const result: FC<{ children: ReactNode }> = (props) =>\n      active ? createPortal(props.children) : null\n\n    // set the displayName explicit for DevTools\n    result.displayName = 'DropdownContentRoot'\n\n    return result\n  }, [active, createPortal])\n\n  const togglerRef = useRef({\n    isPortalRootMounted,\n    onOpen,\n    onClose,\n  })\n  useEffect(() => {\n    togglerRef.current = {\n      isPortalRootMounted,\n      onOpen,\n      onClose,\n    }\n  }, [isPortalRootMounted, onOpen, onClose])\n\n  useEffect(() => {\n    if (togglerRef.current.isPortalRootMounted()) {\n      togglerRef.current[active ? 'onOpen' : 'onClose']?.()\n    }\n  }, [active])\n\n  const memoizedOnClickTrigger = useCallback((rect: Rect) => {\n    setActive((current) => {\n      const newActive = !current\n\n      if (newActive) {\n        setTriggerRect(rect)\n      }\n\n      return newActive\n    })\n  }, [])\n\n  const onClickCloser = useCallback(() => {\n    setActive(false)\n\n    // return focus to the Trigger\n    getFirstTabbable(triggerElementRef)?.focus()\n  }, [])\n\n  return (\n    <PortalParentProvider>\n      <DropdownContext.Provider\n        value={{\n          active,\n          triggerRect,\n          triggerElementRef,\n          rootTriggerRef: rootTriggerRef || triggerElementRef || null,\n          memoizedOnClickTrigger,\n          onClickCloser,\n          DropdownContentRoot,\n          contentId,\n        }}\n      >\n        {children}\n      </DropdownContext.Provider>\n    </PortalParentProvider>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAsCA;AAEO;AACL;AACA;;AAEA;;;;;;;AAOA;AACA;AACD;AAEM;;;;AAKL;AAGA;AACA;;AAGE;;;AAIA;;AAEE;;;AAGF;;AAIA;;AAEA;AACF;;AAGA;;;AAKE;AAEA;AACF;;;;;AAMC;;;;;;;;;AAUC;AACE;;AAEJ;AAEA;AACE;AACE;;;;AAMA;AACF;;AAGF;;;AAIE;;;;;;AAUM;;;;;AAKD;AAMT;;"}
+{"version":3,"file":"Dropdown.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type MutableRefObject,\n  type PropsWithChildren,\n  type ReactNode,\n  createContext,\n  createRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { usePortal } from '../../hooks/usePortal'\n\nimport { type Rect, getFirstTabbable, isEventFromChild } from './dropdownHelper'\n\ntype Props = PropsWithChildren<{\n  onOpen?: () => void\n  onClose?: () => void\n}>\n\ntype DropdownContextType = {\n  active: boolean\n  triggerRect: Rect\n  triggerElementRef: MutableRefObject<HTMLDivElement | null>\n  rootTriggerRef: MutableRefObject<HTMLDivElement | null> | null\n  memoizedOnClickTrigger: (rect: Rect) => void\n  onClickCloser: () => void\n  DropdownContentRoot: FC<{ children: ReactNode }>\n  contentId: string\n}\n\nconst initialRect = { top: 0, right: 0, bottom: 0, left: 0 }\n\nexport const DropdownContext = createContext<DropdownContextType>({\n  active: false,\n  triggerRect: initialRect,\n  triggerElementRef: createRef(),\n  rootTriggerRef: null,\n  memoizedOnClickTrigger: () => {\n    /* noop */\n  },\n  onClickCloser: () => {\n    /* noop */\n  },\n  DropdownContentRoot: () => null,\n  contentId: '',\n})\n\nexport const Dropdown: FC<Props> = ({ onOpen, onClose, children }) => {\n  const [active, setActive] = useState(false)\n  const [triggerRect, setTriggerRect] = useState<Rect>(initialRect)\n\n  const { rootTriggerRef } = useContext(DropdownContext)\n  const { createPortal, portalRoot, isPortalRootMounted, isChildPortal, PortalParentProvider } =\n    usePortal()\n\n  const triggerElementRef = useRef<HTMLDivElement>(null)\n  const contentId = useId()\n\n  const unstableRef = useRef({\n    active,\n    isPortalRootMounted,\n    onOpen,\n    onClose,\n    createPortal,\n  })\n  unstableRef.current = {\n    active,\n    isPortalRootMounted,\n    onOpen,\n    onClose,\n    createPortal,\n  }\n\n  // This is the root container of a dropdown content located in outside the DOM tree\n  const DropdownContentRoot = useMemo<FC<{ children: ReactNode }>>(() => {\n    const result: FC<{ children: ReactNode }> = (props) =>\n      unstableRef.current.active ? unstableRef.current.createPortal(props.children) : null\n\n    // set the displayName explicit for DevTools\n    result.displayName = 'DropdownContentRoot'\n\n    return result\n  }, [])\n\n  const memoizedOnClickTrigger = useCallback((rect: Rect) => {\n    setActive((current) => {\n      const newActive = !current\n\n      if (newActive) {\n        setTriggerRect(rect)\n      }\n\n      return newActive\n    })\n  }, [])\n\n  const onClickCloser = useCallback(() => {\n    setActive(false)\n\n    // return focus to the Trigger\n    getFirstTabbable(triggerElementRef)?.focus()\n  }, [])\n\n  useEffect(() => {\n    if (portalRoot) {\n      portalRoot.setAttribute('id', contentId)\n    }\n\n    const onClickBody = (e: any) => {\n      // ignore events from events within DropdownTrigger and DropdownContent\n      if (!isEventFromChild(e, triggerElementRef.current) && !isChildPortal(e.target)) {\n        setActive(false)\n      }\n    }\n\n    document.body.addEventListener('click', onClickBody, false)\n\n    return () => {\n      document.body.removeEventListener('click', onClickBody, false)\n    }\n  }, [isChildPortal, portalRoot, contentId])\n\n  useEffect(() => {\n    if (unstableRef.current.isPortalRootMounted()) {\n      unstableRef.current[active ? 'onOpen' : 'onClose']?.()\n    }\n  }, [active])\n\n  return (\n    <PortalParentProvider>\n      <DropdownContext.Provider\n        value={{\n          active,\n          triggerRect,\n          triggerElementRef,\n          rootTriggerRef: rootTriggerRef || triggerElementRef || null,\n          memoizedOnClickTrigger,\n          onClickCloser,\n          DropdownContentRoot,\n          contentId,\n        }}\n      >\n        {children}\n      </DropdownContext.Provider>\n    </PortalParentProvider>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAsCA;AAEO;AACL;AACA;;AAEA;;;;;;;AAOA;AACA;AACD;AAEM;;;;AAKL;AAGA;AACA;;;;;;;AAQC;;;;;;;;;AAUD;AACE;;AAIA;AAEA;;AAGF;AACE;AACE;;;;AAMA;AACF;;AAGF;;;AAIE;;;;AAKE;;AAGF;;AAEE;;;AAGF;;AAIA;;AAEA;;;AAIA;AACE;;AAEJ;;;;;AASQ;;;;;AAKD;AAMT;;"}

package/lib/components/Dropdown/DropdownMenuButton/DropdownMenuButton.cjs

@@ -7,7 +7,7 @@ var index = require('./../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss
 var hooks_useObjectAttributes = require('../../../hooks/useObjectAttributes.cjs');
 require('../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../intl/Localizer.cjs');
 require('../../../_virtual/dayjs.min.cjs');
 require('../../../intl/TimeFormatter.cjs');
 var components_Button_Button = require('../../Button/Button.cjs');

package/lib/components/Dropdown/DropdownMenuButton/DropdownMenuButton.js

@@ -5,7 +5,7 @@ import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwi
 import { useObjectAttributes } from '../../../hooks/useObjectAttributes.js';
 import '../../../intl/IntlProvider.js';
 import { useIntl } from '../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../intl/Localizer.js';
 import '../../../_virtual/dayjs.min.js';
 import '../../../intl/TimeFormatter.js';
 import { Button } from '../../Button/Button.js';

package/lib/components/Dropdown/FilterDropdown/FilterDropdown.cjs

@@ -3,12 +3,11 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index$1 = require('../../../_virtual/index3.cjs');
 var index = require('./../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 var hooks_useResponseStatus = require('../../../hooks/useResponseStatus.cjs');
 require('../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../intl/Localizer.cjs');
 require('../../../_virtual/dayjs.min.cjs');
 require('../../../intl/TimeFormatter.cjs');
 var components_Button_Button = require('../../Button/Button.cjs');
@@ -94,7 +93,6 @@ const FilterDropdown = ({ trigger: orgTrigger, applyText, cancelText, resetText,
                 defaultText: '絞り込み条件を解除',
             }),
     }), [filtered, trigger.text, applyText, cancelText, resetText, localize]);
-    const filteredIconAlt = React.useMemo(() => index$1(decorated.filteredIconAlt), [decorated.filteredIconAlt]);
     const calcedResponseStatus = hooks_useResponseStatus.useResponseStatus(responseStatus);
     const classNamesMapper = React.useMemo(() => {
         const { iconWrapper, filteredIcon, inner, actionArea, resetButtonArea, rightButtonArea, message, } = classNameGenerator();
@@ -121,7 +119,7 @@ const FilterDropdown = ({ trigger: orgTrigger, applyText, cancelText, resetText,
     const { buttonSuffix, buttonContent } = React.useMemo(() => {
         const FilterIcon = (jsxRuntime.jsxs("span", { className: classNames.iconWrapper, children: [jsxRuntime.jsx(components_Icon_FaIcon.FaFilterIcon, { alt: trigger.onlyIcon ? decorated.trigger : undefined }), filtered && (
                 // HINT: altに揃えたいが、styleが複雑になってしまうためaria-labelを利用している
-                jsxRuntime.jsx(components_Icon_FaIcon.FaCircleCheckIcon, { "aria-label": filteredIconAlt, className: classNames.filteredIcon }))] }));
+                jsxRuntime.jsx(components_Icon_FaIcon.FaCircleCheckIcon, { "aria-label": decorated.filteredIconAlt, className: classNames.filteredIcon }))] }));
         if (trigger.onlyIcon) {
             return {
                 buttonSuffix: undefined,
@@ -132,7 +130,7 @@ const FilterDropdown = ({ trigger: orgTrigger, applyText, cancelText, resetText,
             buttonSuffix: FilterIcon,
             buttonContent: decorated.trigger,
         };
-    }, [filtered, decorated.trigger, trigger.onlyIcon, filteredIconAlt, classNames]);
+    }, [filtered, decorated.trigger, decorated.filteredIconAlt, trigger.onlyIcon, classNames]);
     return (jsxRuntime.jsxs(components_Dropdown_Dropdown.Dropdown, { onOpen: onOpen, onClose: onClose, children: [jsxRuntime.jsx(components_Dropdown_DropdownTrigger.DropdownTrigger, { tooltip: { show: trigger.onlyIcon, message: decorated.trigger }, children: jsxRuntime.jsx(components_Button_Button.Button, { ...rest, suffix: buttonSuffix, size: trigger.size, children: buttonContent }) }), jsxRuntime.jsx(components_Dropdown_DropdownContent.DropdownContent, { controllable: true, children: jsxRuntime.jsxs("form", { onSubmit: ON_SUBMIT, children: [jsxRuntime.jsx("div", { className: classNames.inner, children: children }), jsxRuntime.jsxs(components_Layout_Stack_Stack.Stack, { gap: 0.5, className: classNames.actionArea, children: [jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { gap: 1, align: "center", justify: "space-between", children: [onReset && (jsxRuntime.jsx("div", { className: classNames.resetButtonArea, children: jsxRuntime.jsx(components_Button_Button.Button, { variant: "text", size: "S", prefix: jsxRuntime.jsx(components_Icon_FaIcon.FaRotateLeftIcon, {}), onClick: onReset, disabled: calcedResponseStatus.isProcessing, children: decorated.resetText }) })), jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { gap: CONTROL_CLUSTER_GAP, justify: "flex-end", className: classNames.rightButtonArea, children: [jsxRuntime.jsx(components_Dropdown_DropdownCloser.DropdownCloser, { children: jsxRuntime.jsx(components_Button_Button.Button, { onClick: onCancel, disabled: calcedResponseStatus.isProcessing, children: decorated.cancelText }) }), jsxRuntime.jsx(components_Dropdown_DropdownCloser.DropdownCloser, { children: jsxRuntime.jsx(components_Button_Button.Button, { variant: "primary", onClick: onApply, loading: calcedResponseStatus.isProcessing, children: decorated.applyText }) })] })] }), calcedResponseStatus.message && (jsxRuntime.jsx("div", { className: classNames.message, children: jsxRuntime.jsx(components_ResponseMessage_ResponseMessage.ResponseMessage, { status: calcedResponseStatus.status, role: "alert", children: calcedResponseStatus.message }) }))] })] }) })] }));
 };