smarthr-ui 96.1.3 → 98.0.0

package/lib/components/Dialog/ControlledFormDialog/FormDialogContentInner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormDialogContentInner.cjs","sources":["../../../../src/components/Dialog/ControlledFormDialog/FormDialogContentInner.tsx"],"sourcesContent":["import {\n  type FC,\n  type FormEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { type ResponseStatus, useResponseStatus } from '../../../hooks/useResponseStatus'\nimport { useIntl } from '../../../intl'\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\nexport type FormDialogHelpers = {\n  close: () => void\n}\n\ntype ObjectActionButtonType = {\n  /** アクションボタンのラベル */\n  text: ReactNode\n  /** アクションボタンのスタイル */\n  theme?: 'primary' | 'secondary' | 'danger'\n  /** アクションボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\ntype ObjectCloseButtonType = {\n  /** 閉じるボタンのラベル */\n  text: ReactNode\n  /** 閉じるボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\nexport type AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** アクションボタン */\n    actionButton: ObjectActionButtonType\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param e フォームイベント\n     * @param helpers ダイアログ操作のためのヘルパー関数\n     */\n    onSubmit: (e: FormEvent<HTMLFormElement>, helpers: FormDialogHelpers) => void\n    /** 閉じるボタン */\n    closeButton: ObjectCloseButtonType\n    /** ダイアログフッターの左端操作領域 */\n    subActionArea?: ReactNode\n  }\n>\n\nexport type FormDialogContentInnerProps = AbstractProps & {\n  onClickClose: () => void\n  responseStatus?: ResponseStatus\n}\n\nconst ACTION_AREA_CLUSTER_GAP = { row: 0.5, column: 1 } as const\n\nconst formDialogContentInner = tv({\n  extend: dialogContentInner,\n  slots: {\n    form: 'shr-contents',\n  },\n})\n\nexport const FormDialogContentInner: FC<FormDialogContentInnerProps> = ({\n  children,\n  heading,\n  contentBgColor,\n  contentPadding,\n  actionButton,\n  onSubmit,\n  onClickClose,\n  responseStatus,\n  closeButton,\n  subActionArea,\n}) => {\n  const handleSubmitAction = useCallback(\n    (e: FormEvent<HTMLFormElement>) => {\n      e.preventDefault()\n      // HINT: React Portals などで擬似的にformがネストしている場合など、stopPropagationを実行しないと\n      // 親formが意図せずsubmitされてしまう場合がある\n      e.stopPropagation()\n      onSubmit(e, { close: onClickClose })\n    },\n    [onSubmit, onClickClose],\n  )\n\n  const calculatedResponseStatus = useResponseStatus(responseStatus)\n\n  const styles = useMemo(() => {\n    const { form, wrapper, actionArea, buttonArea, message } = formDialogContentInner()\n\n    return {\n      form: form(),\n      wrapper: wrapper(),\n      actionArea: actionArea(),\n      buttonArea: buttonArea(),\n      message: message(),\n    }\n  }, [])\n\n  return (\n    // eslint-disable-next-line smarthr/a11y-prohibit-sectioning-content-in-form\n    <Section className={styles.wrapper}>\n      <DialogHeading {...heading} />\n      <form onSubmit={handleSubmitAction} className={styles.form}>\n        <DialogBody contentPadding={contentPadding} contentBgColor={contentBgColor}>\n          {children}\n        </DialogBody>\n        <Stack gap={0.5} className={styles.actionArea}>\n          <Cluster justify=\"space-between\">\n            {subActionArea}\n            <ActionAreaCluster\n              onClickClose={onClickClose}\n              closeButton={closeButton}\n              actionButton={actionButton}\n              loading={calculatedResponseStatus.isProcessing}\n              className={styles.buttonArea}\n            />\n          </Cluster>\n          <DialogContentResponseStatusMessage\n            responseStatus={calculatedResponseStatus}\n            className={styles.message}\n          />\n        </Stack>\n      </form>\n    </Section>\n  )\n}\n\nconst ActionAreaCluster = memo<\n  Pick<FormDialogContentInnerProps, 'onClickClose'> & {\n    actionButton: ObjectActionButtonType\n    closeButton: ObjectCloseButtonType\n    loading: boolean\n    className: string\n  }\n>(({ onClickClose, closeButton, actionButton, loading, className }) => (\n  <Cluster gap={ACTION_AREA_CLUSTER_GAP} className={className}>\n    <CloseButton\n      onClick={onClickClose}\n      disabled={closeButton.disabled || loading}\n      text={closeButton.text}\n    />\n    <ActionButton variant={actionButton.theme} disabled={actionButton.disabled} loading={loading}>\n      {actionButton.text}\n    </ActionButton>\n  </Cluster>\n))\n\nconst ActionButton = memo<\n  PropsWithChildren<{\n    variant: ObjectActionButtonType['theme']\n    disabled: ObjectActionButtonType['disabled']\n    loading: boolean\n  }>\n>(({ variant = 'primary', disabled, loading, children }) => (\n  <Button\n    type=\"submit\"\n    variant={variant}\n    disabled={disabled}\n    loading={loading}\n    className=\"smarthr-ui-Dialog-actionButton\"\n  >\n    {children}\n  </Button>\n))\n\nconst CloseButton = memo<{\n  onClick: FormDialogContentInnerProps['onClickClose']\n  disabled: boolean\n  text: ReactNode\n}>(({ onClick, disabled, text }) => {\n  const { localize } = useIntl()\n\n  const defaultText = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/FormDialog/closeButtonLabel',\n        defaultText: 'キャンセル',\n      }),\n    [localize],\n  )\n\n  return (\n    <Button onClick={onClick} disabled={disabled} className=\"smarthr-ui-Dialog-closeButton\">\n      {text ?? defaultText}\n    </Button>\n  )\n})\n"],"names":["tv","dialogContentInner","useCallback","useResponseStatus","useMemo","_jsxs","Section","_jsx","DialogHeading","DialogBody","Stack","Cluster","DialogContentResponseStatusMessage","memo","Button","useIntl"],"mappings":"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"}
+{"version":3,"file":"FormDialogContentInner.cjs","sources":["../../../../src/components/Dialog/ControlledFormDialog/FormDialogContentInner.tsx"],"sourcesContent":["import {\n  type FC,\n  type FormEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { type ResponseStatus, useResponseStatus } from '../../../hooks/useResponseStatus'\nimport { useIntl } from '../../../intl'\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\nexport type FormDialogHelpers = {\n  close: () => void\n}\n\ntype ObjectActionButtonType = {\n  /** アクションボタンのラベル */\n  text: ReactNode\n  /** アクションボタンのスタイル */\n  theme?: 'primary' | 'secondary' | 'danger'\n  /** アクションボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\ntype ObjectCloseButtonType = {\n  /** 閉じるボタンのラベル */\n  text: ReactNode\n  /** 閉じるボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\nexport type AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** アクションボタン */\n    actionButton: ObjectActionButtonType\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param e フォームイベント\n     * @param helpers ダイアログ操作のためのヘルパー関数\n     */\n    onSubmit: (e: FormEvent<HTMLFormElement>, helpers: FormDialogHelpers) => void\n    /** 閉じるボタン */\n    closeButton: ObjectCloseButtonType\n    /** ダイアログフッターの左端操作領域 */\n    subActionArea?: ReactNode\n  }\n>\n\nexport type FormDialogContentInnerProps = AbstractProps & {\n  onClickClose: () => void\n  responseStatus?: ResponseStatus\n}\n\nconst ACTION_AREA_CLUSTER_GAP = { row: 0.5, column: 1 } as const\n\nconst formDialogContentInner = tv({\n  extend: dialogContentInner,\n  slots: {\n    form: 'shr-contents',\n  },\n})\n\nexport const FormDialogContentInner: FC<FormDialogContentInnerProps> = ({\n  children,\n  heading,\n  contentBgColor,\n  contentPadding,\n  actionButton,\n  onSubmit,\n  onClickClose,\n  responseStatus,\n  closeButton,\n  subActionArea,\n}) => {\n  const handleSubmitAction = useCallback(\n    (e: FormEvent<HTMLFormElement>) => {\n      e.preventDefault()\n      // HINT: React Portals などで擬似的にformがネストしている場合など、stopPropagationを実行しないと\n      // 親formが意図せずsubmitされてしまう場合がある\n      e.stopPropagation()\n      onSubmit(e, { close: onClickClose })\n    },\n    [onSubmit, onClickClose],\n  )\n\n  const calculatedResponseStatus = useResponseStatus(responseStatus)\n\n  const styles = useMemo(() => {\n    const { form, wrapper, actionArea, buttonArea, message } = formDialogContentInner()\n\n    return {\n      form: form(),\n      wrapper: wrapper(),\n      actionArea: actionArea(),\n      buttonArea: buttonArea(),\n      message: message(),\n    }\n  }, [])\n\n  return (\n    // eslint-disable-next-line smarthr/a11y-prohibit-sectioning-content-in-form\n    <Section className={styles.wrapper}>\n      <DialogHeading {...heading} />\n      <form onSubmit={handleSubmitAction} className={styles.form}>\n        <DialogBody contentPadding={contentPadding} contentBgColor={contentBgColor}>\n          {children}\n        </DialogBody>\n        <div className={styles.actionArea}>\n          <Cluster justify=\"space-between\">\n            {subActionArea}\n            <ActionAreaCluster\n              onClickClose={onClickClose}\n              closeButton={closeButton}\n              actionButton={actionButton}\n              loading={calculatedResponseStatus.isProcessing}\n              className={styles.buttonArea}\n            />\n          </Cluster>\n          <DialogContentResponseStatusMessage\n            responseStatus={calculatedResponseStatus}\n            className={styles.message}\n          />\n        </div>\n      </form>\n    </Section>\n  )\n}\n\nconst ActionAreaCluster = memo<\n  Pick<FormDialogContentInnerProps, 'onClickClose'> & {\n    actionButton: ObjectActionButtonType\n    closeButton: ObjectCloseButtonType\n    loading: boolean\n    className: string\n  }\n>(({ onClickClose, closeButton, actionButton, loading, className }) => (\n  <Cluster gap={ACTION_AREA_CLUSTER_GAP} className={className}>\n    <CloseButton\n      onClick={onClickClose}\n      disabled={closeButton.disabled || loading}\n      text={closeButton.text}\n    />\n    <ActionButton variant={actionButton.theme} disabled={actionButton.disabled} loading={loading}>\n      {actionButton.text}\n    </ActionButton>\n  </Cluster>\n))\n\nconst ActionButton = memo<\n  PropsWithChildren<{\n    variant: ObjectActionButtonType['theme']\n    disabled: ObjectActionButtonType['disabled']\n    loading: boolean\n  }>\n>(({ variant = 'primary', disabled, loading, children }) => (\n  <Button\n    type=\"submit\"\n    variant={variant}\n    disabled={disabled}\n    loading={loading}\n    className=\"smarthr-ui-Dialog-actionButton\"\n  >\n    {children}\n  </Button>\n))\n\nconst CloseButton = memo<{\n  onClick: FormDialogContentInnerProps['onClickClose']\n  disabled: boolean\n  text: ReactNode\n}>(({ onClick, disabled, text }) => {\n  const { localize } = useIntl()\n\n  const defaultText = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/FormDialog/closeButtonLabel',\n        defaultText: 'キャンセル',\n      }),\n    [localize],\n  )\n\n  return (\n    <Button onClick={onClick} disabled={disabled} className=\"smarthr-ui-Dialog-closeButton\">\n      {text ?? defaultText}\n    </Button>\n  )\n})\n"],"names":["tv","dialogContentInner","useCallback","useResponseStatus","useMemo","_jsxs","Section","_jsx","DialogHeading","DialogBody","Cluster","DialogContentResponseStatusMessage","memo","Button","useIntl"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA,MAAM,uBAAuB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAW;AAEhE,MAAM,sBAAsB,GAAGA,QAAE,CAAC;AAChC,IAAA,MAAM,EAAEC,qDAAkB;AAC1B,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE,cAAc;AACrB,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,sBAAsB,GAAoC,CAAC,EACtE,QAAQ,EACR,OAAO,EACP,cAAc,EACd,cAAc,EACd,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,WAAW,EACX,aAAa,GACd,KAAI;AACH,IAAA,MAAM,kBAAkB,GAAGC,iBAAW,CACpC,CAAC,CAA6B,KAAI;QAChC,CAAC,CAAC,cAAc,EAAE;;;QAGlB,CAAC,CAAC,eAAe,EAAE;QACnB,QAAQ,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;AACtC,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,YAAY,CAAC,CACzB;AAED,IAAA,MAAM,wBAAwB,GAAGC,yCAAiB,CAAC,cAAc,CAAC;AAElE,IAAA,MAAM,MAAM,GAAGC,aAAO,CAAC,MAAK;AAC1B,QAAA,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,sBAAsB,EAAE;QAEnF,OAAO;YACL,IAAI,EAAE,IAAI,EAAE;YACZ,OAAO,EAAE,OAAO,EAAE;YAClB,UAAU,EAAE,UAAU,EAAE;YACxB,UAAU,EAAE,UAAU,EAAE;YACxB,OAAO,EAAE,OAAO,EAAE;SACnB;IACH,CAAC,EAAE,EAAE,CAAC;IAEN;;IAEEC,eAAA,CAACC,sDAAO,IAAC,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,QAAA,EAAA,CAChCC,cAAA,CAACC,6CAAa,EAAA,EAAA,GAAK,OAAO,EAAA,CAAI,EAC9BH,0BAAM,QAAQ,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,aACxDE,cAAA,CAACE,uCAAU,IAAC,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAA,QAAA,EACvE,QAAQ,GACE,EACbJ,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,UAAU,EAAA,QAAA,EAAA,CAC/BA,eAAA,CAACK,yCAAO,EAAA,EAAC,OAAO,EAAC,eAAe,EAAA,QAAA,EAAA,CAC7B,aAAa,EACdH,cAAA,CAAC,iBAAiB,EAAA,EAChB,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,wBAAwB,CAAC,YAAY,EAC9C,SAAS,EAAE,MAAM,CAAC,UAAU,EAAA,CAC5B,IACM,EACVA,cAAA,CAACI,uFAAkC,EAAA,EACjC,cAAc,EAAE,wBAAwB,EACxC,SAAS,EAAE,MAAM,CAAC,OAAO,GACzB,CAAA,EAAA,CACE,CAAA,EAAA,CACD,CAAA,EAAA,CACC;AAEd;AAEA,MAAM,iBAAiB,GAAGC,UAAI,CAO5B,CAAC,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,MAChEP,gBAACK,yCAAO,EAAA,EAAC,GAAG,EAAE,uBAAuB,EAAE,SAAS,EAAE,SAAS,aACzDH,cAAA,CAAC,WAAW,IACV,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,WAAW,CAAC,QAAQ,IAAI,OAAO,EACzC,IAAI,EAAE,WAAW,CAAC,IAAI,GACtB,EACFA,cAAA,CAAC,YAAY,EAAA,EAAC,OAAO,EAAE,YAAY,CAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAA,QAAA,EACzF,YAAY,CAAC,IAAI,GACL,CAAA,EAAA,CACP,CACX,CAAC;AAEF,MAAM,YAAY,GAAGK,UAAI,CAMvB,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MACrDL,cAAA,CAACM,+BAAM,EAAA,EACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,gCAAgC,YAEzC,QAAQ,EAAA,CACF,CACV,CAAC;AAEF,MAAM,WAAW,GAAGD,UAAI,CAIrB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAI;AACjC,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAGE,oBAAO,EAAE;IAE9B,MAAM,WAAW,GAAGV,aAAO,CACzB,MACE,QAAQ,CAAC;AACP,QAAA,EAAE,EAAE,wCAAwC;AAC5C,QAAA,WAAW,EAAE,OAAO;AACrB,KAAA,CAAC,EACJ,CAAC,QAAQ,CAAC,CACX;IAED,QACEG,eAACM,+BAAM,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,+BAA+B,EAAA,QAAA,EACpF,IAAI,IAAI,WAAW,EAAA,CACb;AAEb,CAAC,CAAC;;;;"}

package/lib/components/Dialog/ControlledFormDialog/FormDialogContentInner.js

@@ -4,13 +4,13 @@ import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwi
 import { useResponseStatus } from '../../../hooks/useResponseStatus.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';
 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';
@@ -52,7 +52,7 @@ const FormDialogContentInner = ({ children, heading, contentBgColor, contentPadd
     }, []);
     return (
     // eslint-disable-next-line smarthr/a11y-prohibit-sectioning-content-in-form
-    jsxs(Section, { className: styles.wrapper, children: [jsx(DialogHeading, { ...heading }), jsxs("form", { onSubmit: handleSubmitAction, className: styles.form, children: [jsx(DialogBody, { contentPadding: contentPadding, contentBgColor: contentBgColor, children: children }), jsxs(Stack, { gap: 0.5, className: styles.actionArea, children: [jsxs(Cluster, { justify: "space-between", children: [subActionArea, jsx(ActionAreaCluster, { onClickClose: onClickClose, closeButton: closeButton, actionButton: actionButton, loading: calculatedResponseStatus.isProcessing, className: styles.buttonArea })] }), jsx(DialogContentResponseStatusMessage, { responseStatus: calculatedResponseStatus, className: styles.message })] })] })] }));
+    jsxs(Section, { className: styles.wrapper, children: [jsx(DialogHeading, { ...heading }), jsxs("form", { onSubmit: handleSubmitAction, className: styles.form, children: [jsx(DialogBody, { contentPadding: contentPadding, contentBgColor: contentBgColor, children: children }), jsxs("div", { className: styles.actionArea, children: [jsxs(Cluster, { justify: "space-between", children: [subActionArea, jsx(ActionAreaCluster, { onClickClose: onClickClose, closeButton: closeButton, actionButton: actionButton, loading: calculatedResponseStatus.isProcessing, className: styles.buttonArea })] }), jsx(DialogContentResponseStatusMessage, { responseStatus: calculatedResponseStatus, className: styles.message })] })] })] }));
 };
 const ActionAreaCluster = memo(({ onClickClose, closeButton, actionButton, loading, className }) => (jsxs(Cluster, { gap: ACTION_AREA_CLUSTER_GAP, className: className, children: [jsx(CloseButton, { onClick: onClickClose, disabled: closeButton.disabled || loading, text: closeButton.text }), jsx(ActionButton, { variant: actionButton.theme, disabled: actionButton.disabled, loading: loading, children: actionButton.text })] })));
 const ActionButton = memo(({ variant = 'primary', disabled, loading, children }) => (jsx(Button, { type: "submit", variant: variant, disabled: disabled, loading: loading, className: "smarthr-ui-Dialog-actionButton", children: children })));

package/lib/components/Dialog/ControlledFormDialog/FormDialogContentInner.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormDialogContentInner.js","sources":["../../../../src/components/Dialog/ControlledFormDialog/FormDialogContentInner.tsx"],"sourcesContent":["import {\n  type FC,\n  type FormEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { type ResponseStatus, useResponseStatus } from '../../../hooks/useResponseStatus'\nimport { useIntl } from '../../../intl'\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\nexport type FormDialogHelpers = {\n  close: () => void\n}\n\ntype ObjectActionButtonType = {\n  /** アクションボタンのラベル */\n  text: ReactNode\n  /** アクションボタンのスタイル */\n  theme?: 'primary' | 'secondary' | 'danger'\n  /** アクションボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\ntype ObjectCloseButtonType = {\n  /** 閉じるボタンのラベル */\n  text: ReactNode\n  /** 閉じるボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\nexport type AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** アクションボタン */\n    actionButton: ObjectActionButtonType\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param e フォームイベント\n     * @param helpers ダイアログ操作のためのヘルパー関数\n     */\n    onSubmit: (e: FormEvent<HTMLFormElement>, helpers: FormDialogHelpers) => void\n    /** 閉じるボタン */\n    closeButton: ObjectCloseButtonType\n    /** ダイアログフッターの左端操作領域 */\n    subActionArea?: ReactNode\n  }\n>\n\nexport type FormDialogContentInnerProps = AbstractProps & {\n  onClickClose: () => void\n  responseStatus?: ResponseStatus\n}\n\nconst ACTION_AREA_CLUSTER_GAP = { row: 0.5, column: 1 } as const\n\nconst formDialogContentInner = tv({\n  extend: dialogContentInner,\n  slots: {\n    form: 'shr-contents',\n  },\n})\n\nexport const FormDialogContentInner: FC<FormDialogContentInnerProps> = ({\n  children,\n  heading,\n  contentBgColor,\n  contentPadding,\n  actionButton,\n  onSubmit,\n  onClickClose,\n  responseStatus,\n  closeButton,\n  subActionArea,\n}) => {\n  const handleSubmitAction = useCallback(\n    (e: FormEvent<HTMLFormElement>) => {\n      e.preventDefault()\n      // HINT: React Portals などで擬似的にformがネストしている場合など、stopPropagationを実行しないと\n      // 親formが意図せずsubmitされてしまう場合がある\n      e.stopPropagation()\n      onSubmit(e, { close: onClickClose })\n    },\n    [onSubmit, onClickClose],\n  )\n\n  const calculatedResponseStatus = useResponseStatus(responseStatus)\n\n  const styles = useMemo(() => {\n    const { form, wrapper, actionArea, buttonArea, message } = formDialogContentInner()\n\n    return {\n      form: form(),\n      wrapper: wrapper(),\n      actionArea: actionArea(),\n      buttonArea: buttonArea(),\n      message: message(),\n    }\n  }, [])\n\n  return (\n    // eslint-disable-next-line smarthr/a11y-prohibit-sectioning-content-in-form\n    <Section className={styles.wrapper}>\n      <DialogHeading {...heading} />\n      <form onSubmit={handleSubmitAction} className={styles.form}>\n        <DialogBody contentPadding={contentPadding} contentBgColor={contentBgColor}>\n          {children}\n        </DialogBody>\n        <Stack gap={0.5} className={styles.actionArea}>\n          <Cluster justify=\"space-between\">\n            {subActionArea}\n            <ActionAreaCluster\n              onClickClose={onClickClose}\n              closeButton={closeButton}\n              actionButton={actionButton}\n              loading={calculatedResponseStatus.isProcessing}\n              className={styles.buttonArea}\n            />\n          </Cluster>\n          <DialogContentResponseStatusMessage\n            responseStatus={calculatedResponseStatus}\n            className={styles.message}\n          />\n        </Stack>\n      </form>\n    </Section>\n  )\n}\n\nconst ActionAreaCluster = memo<\n  Pick<FormDialogContentInnerProps, 'onClickClose'> & {\n    actionButton: ObjectActionButtonType\n    closeButton: ObjectCloseButtonType\n    loading: boolean\n    className: string\n  }\n>(({ onClickClose, closeButton, actionButton, loading, className }) => (\n  <Cluster gap={ACTION_AREA_CLUSTER_GAP} className={className}>\n    <CloseButton\n      onClick={onClickClose}\n      disabled={closeButton.disabled || loading}\n      text={closeButton.text}\n    />\n    <ActionButton variant={actionButton.theme} disabled={actionButton.disabled} loading={loading}>\n      {actionButton.text}\n    </ActionButton>\n  </Cluster>\n))\n\nconst ActionButton = memo<\n  PropsWithChildren<{\n    variant: ObjectActionButtonType['theme']\n    disabled: ObjectActionButtonType['disabled']\n    loading: boolean\n  }>\n>(({ variant = 'primary', disabled, loading, children }) => (\n  <Button\n    type=\"submit\"\n    variant={variant}\n    disabled={disabled}\n    loading={loading}\n    className=\"smarthr-ui-Dialog-actionButton\"\n  >\n    {children}\n  </Button>\n))\n\nconst CloseButton = memo<{\n  onClick: FormDialogContentInnerProps['onClickClose']\n  disabled: boolean\n  text: ReactNode\n}>(({ onClick, disabled, text }) => {\n  const { localize } = useIntl()\n\n  const defaultText = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/FormDialog/closeButtonLabel',\n        defaultText: 'キャンセル',\n      }),\n    [localize],\n  )\n\n  return (\n    <Button onClick={onClick} disabled={disabled} className=\"smarthr-ui-Dialog-closeButton\">\n      {text ?? defaultText}\n    </Button>\n  )\n})\n"],"names":["tv","_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"FormDialogContentInner.js","sources":["../../../../src/components/Dialog/ControlledFormDialog/FormDialogContentInner.tsx"],"sourcesContent":["import {\n  type FC,\n  type FormEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { type ResponseStatus, useResponseStatus } from '../../../hooks/useResponseStatus'\nimport { useIntl } from '../../../intl'\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\nexport type FormDialogHelpers = {\n  close: () => void\n}\n\ntype ObjectActionButtonType = {\n  /** アクションボタンのラベル */\n  text: ReactNode\n  /** アクションボタンのスタイル */\n  theme?: 'primary' | 'secondary' | 'danger'\n  /** アクションボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\ntype ObjectCloseButtonType = {\n  /** 閉じるボタンのラベル */\n  text: ReactNode\n  /** 閉じるボタンを無効にするかどうか */\n  disabled?: boolean\n}\n\nexport type AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** アクションボタン */\n    actionButton: ObjectActionButtonType\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param e フォームイベント\n     * @param helpers ダイアログ操作のためのヘルパー関数\n     */\n    onSubmit: (e: FormEvent<HTMLFormElement>, helpers: FormDialogHelpers) => void\n    /** 閉じるボタン */\n    closeButton: ObjectCloseButtonType\n    /** ダイアログフッターの左端操作領域 */\n    subActionArea?: ReactNode\n  }\n>\n\nexport type FormDialogContentInnerProps = AbstractProps & {\n  onClickClose: () => void\n  responseStatus?: ResponseStatus\n}\n\nconst ACTION_AREA_CLUSTER_GAP = { row: 0.5, column: 1 } as const\n\nconst formDialogContentInner = tv({\n  extend: dialogContentInner,\n  slots: {\n    form: 'shr-contents',\n  },\n})\n\nexport const FormDialogContentInner: FC<FormDialogContentInnerProps> = ({\n  children,\n  heading,\n  contentBgColor,\n  contentPadding,\n  actionButton,\n  onSubmit,\n  onClickClose,\n  responseStatus,\n  closeButton,\n  subActionArea,\n}) => {\n  const handleSubmitAction = useCallback(\n    (e: FormEvent<HTMLFormElement>) => {\n      e.preventDefault()\n      // HINT: React Portals などで擬似的にformがネストしている場合など、stopPropagationを実行しないと\n      // 親formが意図せずsubmitされてしまう場合がある\n      e.stopPropagation()\n      onSubmit(e, { close: onClickClose })\n    },\n    [onSubmit, onClickClose],\n  )\n\n  const calculatedResponseStatus = useResponseStatus(responseStatus)\n\n  const styles = useMemo(() => {\n    const { form, wrapper, actionArea, buttonArea, message } = formDialogContentInner()\n\n    return {\n      form: form(),\n      wrapper: wrapper(),\n      actionArea: actionArea(),\n      buttonArea: buttonArea(),\n      message: message(),\n    }\n  }, [])\n\n  return (\n    // eslint-disable-next-line smarthr/a11y-prohibit-sectioning-content-in-form\n    <Section className={styles.wrapper}>\n      <DialogHeading {...heading} />\n      <form onSubmit={handleSubmitAction} className={styles.form}>\n        <DialogBody contentPadding={contentPadding} contentBgColor={contentBgColor}>\n          {children}\n        </DialogBody>\n        <div className={styles.actionArea}>\n          <Cluster justify=\"space-between\">\n            {subActionArea}\n            <ActionAreaCluster\n              onClickClose={onClickClose}\n              closeButton={closeButton}\n              actionButton={actionButton}\n              loading={calculatedResponseStatus.isProcessing}\n              className={styles.buttonArea}\n            />\n          </Cluster>\n          <DialogContentResponseStatusMessage\n            responseStatus={calculatedResponseStatus}\n            className={styles.message}\n          />\n        </div>\n      </form>\n    </Section>\n  )\n}\n\nconst ActionAreaCluster = memo<\n  Pick<FormDialogContentInnerProps, 'onClickClose'> & {\n    actionButton: ObjectActionButtonType\n    closeButton: ObjectCloseButtonType\n    loading: boolean\n    className: string\n  }\n>(({ onClickClose, closeButton, actionButton, loading, className }) => (\n  <Cluster gap={ACTION_AREA_CLUSTER_GAP} className={className}>\n    <CloseButton\n      onClick={onClickClose}\n      disabled={closeButton.disabled || loading}\n      text={closeButton.text}\n    />\n    <ActionButton variant={actionButton.theme} disabled={actionButton.disabled} loading={loading}>\n      {actionButton.text}\n    </ActionButton>\n  </Cluster>\n))\n\nconst ActionButton = memo<\n  PropsWithChildren<{\n    variant: ObjectActionButtonType['theme']\n    disabled: ObjectActionButtonType['disabled']\n    loading: boolean\n  }>\n>(({ variant = 'primary', disabled, loading, children }) => (\n  <Button\n    type=\"submit\"\n    variant={variant}\n    disabled={disabled}\n    loading={loading}\n    className=\"smarthr-ui-Dialog-actionButton\"\n  >\n    {children}\n  </Button>\n))\n\nconst CloseButton = memo<{\n  onClick: FormDialogContentInnerProps['onClickClose']\n  disabled: boolean\n  text: ReactNode\n}>(({ onClick, disabled, text }) => {\n  const { localize } = useIntl()\n\n  const defaultText = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/FormDialog/closeButtonLabel',\n        defaultText: 'キャンセル',\n      }),\n    [localize],\n  )\n\n  return (\n    <Button onClick={onClick} disabled={disabled} className=\"smarthr-ui-Dialog-closeButton\">\n      {text ?? defaultText}\n    </Button>\n  )\n})\n"],"names":["tv","_jsxs","_jsx"],"mappings":"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"}

package/lib/components/Dialog/ControlledMessageDialog/MessageDialogContentInner.cjs

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 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/Dialog/ControlledMessageDialog/MessageDialogContentInner.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { memo, useMemo } from 'react';
 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/Dialog/ControlledStepFormDialog/ControlledStepFormDialog.cjs

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 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_Dialog_DialogContentInner = require('../DialogContentInner.cjs');

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

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useMemo, useContext, useRef, useCallback } from 'react';
 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 { DialogContentInner } from '../DialogContentInner.js';

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"StepFormDialogContentInner.cjs","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.cjs","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/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/DialogContentInner.cjs

@@ -57,7 +57,14 @@ const DialogContentInner = ({ onClickOverlay, onPressEscape, isOpen, id, width,
         return actualWidth ? { width: actualWidth } : undefined;
     }, [width, size]);
     const innerRef = React.useRef(null);
-    hooks_useHandleEscape.useHandleEscape(React.useMemo(() => (onPressEscape && isOpen ? onPressEscape : undefined), [isOpen, onPressEscape]));
+    // 外部propsのonPressEscapeをrefに保存
+    const onPressEscapeRef = React.useRef(onPressEscape);
+    onPressEscapeRef.current = onPressEscape;
+    // stableなcallbackを作成
+    const memoizedOnPressEscape = React.useCallback(() => {
+        onPressEscapeRef.current?.();
+    }, []);
+    hooks_useHandleEscape.useHandleEscape(isOpen ? memoizedOnPressEscape : undefined);
     components_Dialog_useBodyScrollLock.useBodyScrollLock(isOpen);
     return (jsxRuntime.jsx(components_Dialog_DialogOverlap.DialogOverlap, { isOpen: isOpen, children: jsxRuntime.jsxs("div", { id: id, className: classNames.layout, style: style, children: [jsxRuntime.jsx(Overlay, { isOpen: isOpen, onClickOverlay: onClickOverlay, className: classNames.background }), jsxRuntime.jsx("div", { ...rest, ref: innerRef, role: "dialog", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-modal": "true", className: classNames.inner, children: jsxRuntime.jsx(components_Dialog_FocusTrap.FocusTrap, { firstFocusTarget: firstFocusTarget, ref: focusTrapRef, children: children }) })] }) }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"DialogContentInner.cjs","sources":["../../../src/components/Dialog/DialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useHandleEscape } from '../../hooks/useHandleEscape'\nimport { dialogSize } from '../../tailwind'\n\nimport { DialogOverlap } from './DialogOverlap'\nimport { FocusTrap, type FocusTrapRef } from './FocusTrap'\nimport { useBodyScrollLock } from './useBodyScrollLock'\n\nimport type { DialogSize } from './types'\n\nexport type DialogContentInnerProps = PropsWithChildren<{\n  /**\n   * オーバーレイをクリックした時に発火するコールバック関数\n   */\n  onClickOverlay?: () => void\n  /**\n   * エスケープキーを押下した時に発火するコールバック関数\n   */\n  onPressEscape?: () => void\n  /**\n   * ダイアログを開いているかどうか\n   */\n  isOpen: boolean\n  /**\n   * @deprecated ダイアログの幅を指定する場合は、`width` ではなく `size` を使用してください。\n   * ダイアログの幅\n   */\n  width?: string | number\n  /**\n   * ダイアログの大きさ\n   */\n  size?: DialogSize\n  /**\n   * ダイアログの `id`\n   * TODO 使われてなさそうなので確認\n   */\n  id?: string\n  /**\n   * ダイアログを開いた時にフォーカスする対象\n   */\n  firstFocusTarget?: RefObject<HTMLElement>\n  /**\n   * ダイアログの `aria-label`\n   */\n  ariaLabel?: string\n  /**\n   * ダイアログの `aria-labelledby`\n   */\n  ariaLabelledby?: string\n  /**\n   * ダイアログトップのフォーカストラップへの ref\n   */\n  focusTrapRef?: RefObject<FocusTrapRef>\n}>\ntype Props = DialogContentInnerProps & Omit<ComponentProps<'div'>, keyof DialogContentInnerProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    layout: ['smarthr-ui-Dialog-wrapper', 'shr-max-w-[calc(100dvw-theme(spacing.1))]'],\n    inner: [\n      'smarthr-ui-Dialog',\n      'shr-border-shorthand shr-relative shr-z-1 shr-rounded-m shr-bg-white shr-shadow-layer-3',\n      'contrast-more:shr-border-high-contrast',\n    ],\n    background: ['smarthr-ui-Dialog-background', 'shr-absolute shr-inset-0 shr-bg-scrim'],\n  },\n  variants: {\n    size: {\n      XS: { layout: dialogSize.XS },\n      S: { layout: dialogSize.S },\n      M: { layout: dialogSize.M },\n      L: { layout: dialogSize.L },\n      XL: { layout: dialogSize.XL },\n      XXL: { layout: dialogSize.XXL },\n      FULL: { layout: dialogSize.FULL },\n    },\n  },\n})\n\nexport const DialogContentInner: FC<Props> = ({\n  onClickOverlay,\n  onPressEscape,\n  isOpen,\n  id,\n  width,\n  size,\n  firstFocusTarget,\n  ariaLabel,\n  ariaLabelledby,\n  children,\n  className,\n  focusTrapRef,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { layout, inner, background } = classNameGenerator()\n\n    return {\n      layout: layout({ size }),\n      inner: inner({ className }),\n      background: background(),\n    }\n  }, [size, className])\n  const style = useMemo(() => {\n    // width は deprecated なので、size が指定されている場合は width を無視する\n    const actualWidth = size ? undefined : typeof width === 'number' ? `${width}px` : width\n\n    return actualWidth ? { width: actualWidth } : undefined\n  }, [width, size])\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  useHandleEscape(\n    useMemo(() => (onPressEscape && isOpen ? onPressEscape : undefined), [isOpen, onPressEscape]),\n  )\n\n  useBodyScrollLock(isOpen)\n\n  return (\n    <DialogOverlap isOpen={isOpen}>\n      <div id={id} className={classNames.layout} style={style}>\n        <Overlay\n          isOpen={isOpen}\n          onClickOverlay={onClickOverlay}\n          className={classNames.background}\n        />\n        <div\n          {...rest}\n          ref={innerRef}\n          role=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          aria-modal=\"true\"\n          className={classNames.inner}\n        >\n          <FocusTrap firstFocusTarget={firstFocusTarget} ref={focusTrapRef}>\n            {children}\n          </FocusTrap>\n        </div>\n      </div>\n    </DialogOverlap>\n  )\n}\n\nconst Overlay = memo<Pick<Props, 'onClickOverlay' | 'isOpen'> & { className: string }>(\n  ({ onClickOverlay, isOpen, className }) => {\n    const onClick = useMemo(\n      () => (onClickOverlay && isOpen ? onClickOverlay : undefined),\n      [isOpen, onClickOverlay],\n    )\n\n    // eslint-disable-next-line smarthr/best-practice-for-interactive-element\n    return <div onClick={onClick} className={className} role=\"presentation\" />\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAoEA;AACE;AACE;AACA;;;;AAIC;AACD;AACD;AACD;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAEM;AAeL;;;AAII;AACA;;;AAGJ;AACA;;;AAIE;AACF;AAEA;;;AAQA;AAwBF;AAEA;;;AAQI;AACF;;"}
+{"version":3,"file":"DialogContentInner.cjs","sources":["../../../src/components/Dialog/DialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useCallback,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useHandleEscape } from '../../hooks/useHandleEscape'\nimport { dialogSize } from '../../tailwind'\n\nimport { DialogOverlap } from './DialogOverlap'\nimport { FocusTrap, type FocusTrapRef } from './FocusTrap'\nimport { useBodyScrollLock } from './useBodyScrollLock'\n\nimport type { DialogSize } from './types'\n\nexport type DialogContentInnerProps = PropsWithChildren<{\n  /**\n   * オーバーレイをクリックした時に発火するコールバック関数\n   */\n  onClickOverlay?: () => void\n  /**\n   * エスケープキーを押下した時に発火するコールバック関数\n   */\n  onPressEscape?: () => void\n  /**\n   * ダイアログを開いているかどうか\n   */\n  isOpen: boolean\n  /**\n   * @deprecated ダイアログの幅を指定する場合は、`width` ではなく `size` を使用してください。\n   * ダイアログの幅\n   */\n  width?: string | number\n  /**\n   * ダイアログの大きさ\n   */\n  size?: DialogSize\n  /**\n   * ダイアログの `id`\n   * TODO 使われてなさそうなので確認\n   */\n  id?: string\n  /**\n   * ダイアログを開いた時にフォーカスする対象\n   */\n  firstFocusTarget?: RefObject<HTMLElement>\n  /**\n   * ダイアログの `aria-label`\n   */\n  ariaLabel?: string\n  /**\n   * ダイアログの `aria-labelledby`\n   */\n  ariaLabelledby?: string\n  /**\n   * ダイアログトップのフォーカストラップへの ref\n   */\n  focusTrapRef?: RefObject<FocusTrapRef>\n}>\ntype Props = DialogContentInnerProps & Omit<ComponentProps<'div'>, keyof DialogContentInnerProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    layout: ['smarthr-ui-Dialog-wrapper', 'shr-max-w-[calc(100dvw-theme(spacing.1))]'],\n    inner: [\n      'smarthr-ui-Dialog',\n      'shr-border-shorthand shr-relative shr-z-1 shr-rounded-m shr-bg-white shr-shadow-layer-3',\n      'contrast-more:shr-border-high-contrast',\n    ],\n    background: ['smarthr-ui-Dialog-background', 'shr-absolute shr-inset-0 shr-bg-scrim'],\n  },\n  variants: {\n    size: {\n      XS: { layout: dialogSize.XS },\n      S: { layout: dialogSize.S },\n      M: { layout: dialogSize.M },\n      L: { layout: dialogSize.L },\n      XL: { layout: dialogSize.XL },\n      XXL: { layout: dialogSize.XXL },\n      FULL: { layout: dialogSize.FULL },\n    },\n  },\n})\n\nexport const DialogContentInner: FC<Props> = ({\n  onClickOverlay,\n  onPressEscape,\n  isOpen,\n  id,\n  width,\n  size,\n  firstFocusTarget,\n  ariaLabel,\n  ariaLabelledby,\n  children,\n  className,\n  focusTrapRef,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { layout, inner, background } = classNameGenerator()\n\n    return {\n      layout: layout({ size }),\n      inner: inner({ className }),\n      background: background(),\n    }\n  }, [size, className])\n  const style = useMemo(() => {\n    // width は deprecated なので、size が指定されている場合は width を無視する\n    const actualWidth = size ? undefined : typeof width === 'number' ? `${width}px` : width\n\n    return actualWidth ? { width: actualWidth } : undefined\n  }, [width, size])\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  // 外部propsのonPressEscapeをrefに保存\n  const onPressEscapeRef = useRef(onPressEscape)\n  onPressEscapeRef.current = onPressEscape\n\n  // stableなcallbackを作成\n  const memoizedOnPressEscape = useCallback(() => {\n    onPressEscapeRef.current?.()\n  }, [])\n\n  useHandleEscape(isOpen ? memoizedOnPressEscape : undefined)\n\n  useBodyScrollLock(isOpen)\n\n  return (\n    <DialogOverlap isOpen={isOpen}>\n      <div id={id} className={classNames.layout} style={style}>\n        <Overlay\n          isOpen={isOpen}\n          onClickOverlay={onClickOverlay}\n          className={classNames.background}\n        />\n        <div\n          {...rest}\n          ref={innerRef}\n          role=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          aria-modal=\"true\"\n          className={classNames.inner}\n        >\n          <FocusTrap firstFocusTarget={firstFocusTarget} ref={focusTrapRef}>\n            {children}\n          </FocusTrap>\n        </div>\n      </div>\n    </DialogOverlap>\n  )\n}\n\nconst Overlay = memo<Pick<Props, 'onClickOverlay' | 'isOpen'> & { className: string }>(\n  ({ onClickOverlay, isOpen, className }) => {\n    const onClick = useMemo(\n      () => (onClickOverlay && isOpen ? onClickOverlay : undefined),\n      [isOpen, onClickOverlay],\n    )\n\n    // eslint-disable-next-line smarthr/best-practice-for-interactive-element\n    return <div onClick={onClick} className={className} role=\"presentation\" />\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqEA;AACE;AACE;AACA;;;;AAIC;AACD;AACD;AACD;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAEM;AAeL;;;AAII;AACA;;;AAGJ;AACA;;;AAIE;AACF;AAEA;;AAGA;AACA;;AAGA;AACE;;;;AAOF;AAwBF;AAEA;;;AAQI;AACF;;"}

package/lib/components/Dialog/DialogContentInner.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { memo, useMemo, useRef } from 'react';
+import { memo, useMemo, useRef, useCallback } 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 { useHandleEscape } from '../../hooks/useHandleEscape.js';
 import { dialogSize } from '../../tailwind/dialogSize.js';
@@ -55,7 +55,14 @@ const DialogContentInner = ({ onClickOverlay, onPressEscape, isOpen, id, width,
         return actualWidth ? { width: actualWidth } : undefined;
     }, [width, size]);
     const innerRef = useRef(null);
-    useHandleEscape(useMemo(() => (onPressEscape && isOpen ? onPressEscape : undefined), [isOpen, onPressEscape]));
+    // 外部propsのonPressEscapeをrefに保存
+    const onPressEscapeRef = useRef(onPressEscape);
+    onPressEscapeRef.current = onPressEscape;
+    // stableなcallbackを作成
+    const memoizedOnPressEscape = useCallback(() => {
+        onPressEscapeRef.current?.();
+    }, []);
+    useHandleEscape(isOpen ? memoizedOnPressEscape : undefined);
     useBodyScrollLock(isOpen);
     return (jsx(DialogOverlap, { isOpen: isOpen, children: jsxs("div", { id: id, className: classNames.layout, style: style, children: [jsx(Overlay, { isOpen: isOpen, onClickOverlay: onClickOverlay, className: classNames.background }), jsx("div", { ...rest, ref: innerRef, role: "dialog", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-modal": "true", className: classNames.inner, children: jsx(FocusTrap, { firstFocusTarget: firstFocusTarget, ref: focusTrapRef, children: children }) })] }) }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"DialogContentInner.js","sources":["../../../src/components/Dialog/DialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useHandleEscape } from '../../hooks/useHandleEscape'\nimport { dialogSize } from '../../tailwind'\n\nimport { DialogOverlap } from './DialogOverlap'\nimport { FocusTrap, type FocusTrapRef } from './FocusTrap'\nimport { useBodyScrollLock } from './useBodyScrollLock'\n\nimport type { DialogSize } from './types'\n\nexport type DialogContentInnerProps = PropsWithChildren<{\n  /**\n   * オーバーレイをクリックした時に発火するコールバック関数\n   */\n  onClickOverlay?: () => void\n  /**\n   * エスケープキーを押下した時に発火するコールバック関数\n   */\n  onPressEscape?: () => void\n  /**\n   * ダイアログを開いているかどうか\n   */\n  isOpen: boolean\n  /**\n   * @deprecated ダイアログの幅を指定する場合は、`width` ではなく `size` を使用してください。\n   * ダイアログの幅\n   */\n  width?: string | number\n  /**\n   * ダイアログの大きさ\n   */\n  size?: DialogSize\n  /**\n   * ダイアログの `id`\n   * TODO 使われてなさそうなので確認\n   */\n  id?: string\n  /**\n   * ダイアログを開いた時にフォーカスする対象\n   */\n  firstFocusTarget?: RefObject<HTMLElement>\n  /**\n   * ダイアログの `aria-label`\n   */\n  ariaLabel?: string\n  /**\n   * ダイアログの `aria-labelledby`\n   */\n  ariaLabelledby?: string\n  /**\n   * ダイアログトップのフォーカストラップへの ref\n   */\n  focusTrapRef?: RefObject<FocusTrapRef>\n}>\ntype Props = DialogContentInnerProps & Omit<ComponentProps<'div'>, keyof DialogContentInnerProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    layout: ['smarthr-ui-Dialog-wrapper', 'shr-max-w-[calc(100dvw-theme(spacing.1))]'],\n    inner: [\n      'smarthr-ui-Dialog',\n      'shr-border-shorthand shr-relative shr-z-1 shr-rounded-m shr-bg-white shr-shadow-layer-3',\n      'contrast-more:shr-border-high-contrast',\n    ],\n    background: ['smarthr-ui-Dialog-background', 'shr-absolute shr-inset-0 shr-bg-scrim'],\n  },\n  variants: {\n    size: {\n      XS: { layout: dialogSize.XS },\n      S: { layout: dialogSize.S },\n      M: { layout: dialogSize.M },\n      L: { layout: dialogSize.L },\n      XL: { layout: dialogSize.XL },\n      XXL: { layout: dialogSize.XXL },\n      FULL: { layout: dialogSize.FULL },\n    },\n  },\n})\n\nexport const DialogContentInner: FC<Props> = ({\n  onClickOverlay,\n  onPressEscape,\n  isOpen,\n  id,\n  width,\n  size,\n  firstFocusTarget,\n  ariaLabel,\n  ariaLabelledby,\n  children,\n  className,\n  focusTrapRef,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { layout, inner, background } = classNameGenerator()\n\n    return {\n      layout: layout({ size }),\n      inner: inner({ className }),\n      background: background(),\n    }\n  }, [size, className])\n  const style = useMemo(() => {\n    // width は deprecated なので、size が指定されている場合は width を無視する\n    const actualWidth = size ? undefined : typeof width === 'number' ? `${width}px` : width\n\n    return actualWidth ? { width: actualWidth } : undefined\n  }, [width, size])\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  useHandleEscape(\n    useMemo(() => (onPressEscape && isOpen ? onPressEscape : undefined), [isOpen, onPressEscape]),\n  )\n\n  useBodyScrollLock(isOpen)\n\n  return (\n    <DialogOverlap isOpen={isOpen}>\n      <div id={id} className={classNames.layout} style={style}>\n        <Overlay\n          isOpen={isOpen}\n          onClickOverlay={onClickOverlay}\n          className={classNames.background}\n        />\n        <div\n          {...rest}\n          ref={innerRef}\n          role=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          aria-modal=\"true\"\n          className={classNames.inner}\n        >\n          <FocusTrap firstFocusTarget={firstFocusTarget} ref={focusTrapRef}>\n            {children}\n          </FocusTrap>\n        </div>\n      </div>\n    </DialogOverlap>\n  )\n}\n\nconst Overlay = memo<Pick<Props, 'onClickOverlay' | 'isOpen'> & { className: string }>(\n  ({ onClickOverlay, isOpen, className }) => {\n    const onClick = useMemo(\n      () => (onClickOverlay && isOpen ? onClickOverlay : undefined),\n      [isOpen, onClickOverlay],\n    )\n\n    // eslint-disable-next-line smarthr/best-practice-for-interactive-element\n    return <div onClick={onClick} className={className} role=\"presentation\" />\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAoEA;AACE;AACE;AACA;;;;AAIC;AACD;AACD;AACD;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAEM;AAeL;;;AAII;AACA;;;AAGJ;AACA;;;AAIE;AACF;AAEA;;;AAQA;AAwBF;AAEA;;;AAQI;AACF;;"}
+{"version":3,"file":"DialogContentInner.js","sources":["../../../src/components/Dialog/DialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useCallback,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useHandleEscape } from '../../hooks/useHandleEscape'\nimport { dialogSize } from '../../tailwind'\n\nimport { DialogOverlap } from './DialogOverlap'\nimport { FocusTrap, type FocusTrapRef } from './FocusTrap'\nimport { useBodyScrollLock } from './useBodyScrollLock'\n\nimport type { DialogSize } from './types'\n\nexport type DialogContentInnerProps = PropsWithChildren<{\n  /**\n   * オーバーレイをクリックした時に発火するコールバック関数\n   */\n  onClickOverlay?: () => void\n  /**\n   * エスケープキーを押下した時に発火するコールバック関数\n   */\n  onPressEscape?: () => void\n  /**\n   * ダイアログを開いているかどうか\n   */\n  isOpen: boolean\n  /**\n   * @deprecated ダイアログの幅を指定する場合は、`width` ではなく `size` を使用してください。\n   * ダイアログの幅\n   */\n  width?: string | number\n  /**\n   * ダイアログの大きさ\n   */\n  size?: DialogSize\n  /**\n   * ダイアログの `id`\n   * TODO 使われてなさそうなので確認\n   */\n  id?: string\n  /**\n   * ダイアログを開いた時にフォーカスする対象\n   */\n  firstFocusTarget?: RefObject<HTMLElement>\n  /**\n   * ダイアログの `aria-label`\n   */\n  ariaLabel?: string\n  /**\n   * ダイアログの `aria-labelledby`\n   */\n  ariaLabelledby?: string\n  /**\n   * ダイアログトップのフォーカストラップへの ref\n   */\n  focusTrapRef?: RefObject<FocusTrapRef>\n}>\ntype Props = DialogContentInnerProps & Omit<ComponentProps<'div'>, keyof DialogContentInnerProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    layout: ['smarthr-ui-Dialog-wrapper', 'shr-max-w-[calc(100dvw-theme(spacing.1))]'],\n    inner: [\n      'smarthr-ui-Dialog',\n      'shr-border-shorthand shr-relative shr-z-1 shr-rounded-m shr-bg-white shr-shadow-layer-3',\n      'contrast-more:shr-border-high-contrast',\n    ],\n    background: ['smarthr-ui-Dialog-background', 'shr-absolute shr-inset-0 shr-bg-scrim'],\n  },\n  variants: {\n    size: {\n      XS: { layout: dialogSize.XS },\n      S: { layout: dialogSize.S },\n      M: { layout: dialogSize.M },\n      L: { layout: dialogSize.L },\n      XL: { layout: dialogSize.XL },\n      XXL: { layout: dialogSize.XXL },\n      FULL: { layout: dialogSize.FULL },\n    },\n  },\n})\n\nexport const DialogContentInner: FC<Props> = ({\n  onClickOverlay,\n  onPressEscape,\n  isOpen,\n  id,\n  width,\n  size,\n  firstFocusTarget,\n  ariaLabel,\n  ariaLabelledby,\n  children,\n  className,\n  focusTrapRef,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { layout, inner, background } = classNameGenerator()\n\n    return {\n      layout: layout({ size }),\n      inner: inner({ className }),\n      background: background(),\n    }\n  }, [size, className])\n  const style = useMemo(() => {\n    // width は deprecated なので、size が指定されている場合は width を無視する\n    const actualWidth = size ? undefined : typeof width === 'number' ? `${width}px` : width\n\n    return actualWidth ? { width: actualWidth } : undefined\n  }, [width, size])\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  // 外部propsのonPressEscapeをrefに保存\n  const onPressEscapeRef = useRef(onPressEscape)\n  onPressEscapeRef.current = onPressEscape\n\n  // stableなcallbackを作成\n  const memoizedOnPressEscape = useCallback(() => {\n    onPressEscapeRef.current?.()\n  }, [])\n\n  useHandleEscape(isOpen ? memoizedOnPressEscape : undefined)\n\n  useBodyScrollLock(isOpen)\n\n  return (\n    <DialogOverlap isOpen={isOpen}>\n      <div id={id} className={classNames.layout} style={style}>\n        <Overlay\n          isOpen={isOpen}\n          onClickOverlay={onClickOverlay}\n          className={classNames.background}\n        />\n        <div\n          {...rest}\n          ref={innerRef}\n          role=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          aria-modal=\"true\"\n          className={classNames.inner}\n        >\n          <FocusTrap firstFocusTarget={firstFocusTarget} ref={focusTrapRef}>\n            {children}\n          </FocusTrap>\n        </div>\n      </div>\n    </DialogOverlap>\n  )\n}\n\nconst Overlay = memo<Pick<Props, 'onClickOverlay' | 'isOpen'> & { className: string }>(\n  ({ onClickOverlay, isOpen, className }) => {\n    const onClick = useMemo(\n      () => (onClickOverlay && isOpen ? onClickOverlay : undefined),\n      [isOpen, onClickOverlay],\n    )\n\n    // eslint-disable-next-line smarthr/best-practice-for-interactive-element\n    return <div onClick={onClick} className={className} role=\"presentation\" />\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAqEA;AACE;AACE;AACA;;;;AAIC;AACD;AACD;AACD;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAEM;AAeL;;;AAII;AACA;;;AAGJ;AACA;;;AAIE;AACF;AAEA;;AAGA;AACA;;AAGA;AACE;;;;AAOF;AAwBF;AAEA;;;AAQI;AACF;;"}

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);