smarthr-ui 87.2.0 → 88.0.0

package/lib/_virtual/index.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
 var _commonjsHelpers = require('./_commonjsHelpers.cjs');
-var index = require('./../vendor/.pnpm/react-innertext@1.1.5_@types_react@18.3.28_react@19.2.4/vendor/react-innertext/index.cjs');
+var index = require('./../vendor/.pnpm/lodash.merge@4.6.2/vendor/lodash.merge/index.cjs');
 
-var reactInnertextExports = index.__require();
-var innerText = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(reactInnertextExports);
+var lodash_mergeExports = index.__require();
+var _merge = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(lodash_mergeExports);
 
-module.exports = innerText;
+module.exports = _merge;
 //# sourceMappingURL=index.cjs.map

package/lib/_virtual/index2.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
 var _commonjsHelpers = require('./_commonjsHelpers.cjs');
-var index = require('./../vendor/.pnpm/lodash.merge@4.6.2/vendor/lodash.merge/index.cjs');
+var index = require('./../vendor/.pnpm/lodash.range@3.2.0/vendor/lodash.range/index.cjs');
 
-var lodash_mergeExports = index.__require();
-var _merge = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(lodash_mergeExports);
+var lodash_rangeExports = index.__require();
+var _range = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(lodash_rangeExports);
 
-module.exports = _merge;
+module.exports = _range;
 //# sourceMappingURL=index2.cjs.map

package/lib/_virtual/index3.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
 var _commonjsHelpers = require('./_commonjsHelpers.cjs');
-var index = require('./../vendor/.pnpm/lodash.range@3.2.0/vendor/lodash.range/index.cjs');
+var index = require('./../vendor/.pnpm/react-innertext@1.1.5_@types_react@18.3.28_react@19.2.4/vendor/react-innertext/index.cjs');
 
-var lodash_rangeExports = index.__require();
-var _range = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(lodash_rangeExports);
+var reactInnertextExports = index.__require();
+var innerText = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(reactInnertextExports);
 
-module.exports = _range;
+module.exports = innerText;
 //# sourceMappingURL=index3.cjs.map

package/lib/components/Combobox/MultiCombobox/MultiCombobox.cjs

@@ -3,7 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index$1 = require('../../../_virtual/index.cjs');
+var index$1 = require('../../../_virtual/index3.cjs');
 var index = require('./../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 var hooks_useOuterClick = require('../../../hooks/useOuterClick.cjs');
 require('../../../intl/IntlProvider.cjs');

package/lib/components/Combobox/SingleCombobox/SingleCombobox.cjs

@@ -3,7 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index$1 = require('../../../_virtual/index.cjs');
+var index$1 = require('../../../_virtual/index3.cjs');
 var index = require('./../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 var hooks_useClick = require('../../../hooks/useClick.cjs');
 var hooks_useDecorators = require('../../../hooks/useDecorators.cjs');

package/lib/components/Combobox/helper.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('../../_virtual/index.cjs');
+var index = require('../../_virtual/index3.cjs');
 
 function convertMatchableString(original) {
     return (original

package/lib/components/Combobox/useOptions.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index = require('../../_virtual/index.cjs');
+var index = require('../../_virtual/index3.cjs');
 var components_Combobox_helper = require('./helper.cjs');
 
 const defaultIsItemSelected = (targetItem, selectedItems) => selectedItems.some((item) => components_Combobox_helper.areItemsEqual(item, targetItem));

package/lib/components/Dialog/ActionDialog/ActionDialog.cjs

@@ -19,11 +19,11 @@ const ActionDialog = ({ children, heading: orgHeading, contentBgColor, contentPa
             onClickClose();
         }
     }, [isOpen, onClickClose]);
-    const actualOnClickAction = React.useCallback(() => {
+    const actualOnClickAction = React.useCallback((e, helpers) => {
         if (isOpen) {
-            onClickAction(onClickClose);
+            onClickAction(e, helpers);
         }
-    }, [isOpen, onClickAction, onClickClose]);
+    }, [isOpen, onClickAction]);
     return createPortal(jsxRuntime.jsx(components_Dialog_DialogContentInner.DialogContentInner, { ...rest, isOpen: isOpen, ariaLabelledby: heading.id, className: className, onPressEscape: closeDisabled ? undefined : onPressEscape, children: jsxRuntime.jsx(components_Dialog_ActionDialog_ActionDialogContentInner.ActionDialogContentInner, { heading: heading, contentBgColor: contentBgColor, contentPadding: contentPadding, actionText: actionText, actionTheme: actionTheme, actionDisabled: actionDisabled, closeDisabled: closeDisabled, onClickClose: actualOnClickClose, onClickAction: actualOnClickAction, subActionArea: subActionArea, responseStatus: responseStatus, decorators: decorators, children: children }) }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"ActionDialog.cjs","sources":["../../../../src/components/Dialog/ActionDialog/ActionDialog.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentProps, type FC, type ReactNode, useCallback } from 'react'\n\nimport { DialogContentInner } from '../DialogContentInner'\nimport { useDialogPortal } from '../useDialogPortal'\nimport { useObjectHeading } from '../useObjectHeading'\n\nimport {\n  ActionDialogContentInner,\n  type ActionDialogContentInnerProps,\n} from './ActionDialogContentInner'\n\nimport type { DialogProps } from '../types'\n\ntype ObjectHeadingType = Omit<ActionDialogContentInnerProps['heading'], 'id'>\ntype HeadingType = ReactNode | ObjectHeadingType\n\ntype AbstractProps = Omit<ActionDialogContentInnerProps, 'heading'> &\n  DialogProps & {\n    heading: HeadingType\n  }\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nconst headingObjectConverter = (text: ReactNode) => ({\n  text,\n})\n\nexport const ActionDialog: FC<Props> = ({\n  children,\n  heading: orgHeading,\n  contentBgColor,\n  contentPadding,\n  actionText,\n  actionTheme,\n  onClickAction,\n  onClickClose,\n  onPressEscape = onClickClose,\n  responseStatus,\n  actionDisabled,\n  closeDisabled,\n  subActionArea,\n  className,\n  portalParent,\n  decorators,\n  id,\n  isOpen,\n  ...rest\n}) => {\n  const { createPortal } = useDialogPortal(portalParent, id)\n  const heading = useObjectHeading<HeadingType, ObjectHeadingType>(\n    orgHeading,\n    headingObjectConverter,\n  )\n\n  const actualOnClickClose = useCallback(() => {\n    if (isOpen) {\n      onClickClose()\n    }\n  }, [isOpen, onClickClose])\n\n  const actualOnClickAction = useCallback(() => {\n    if (isOpen) {\n      onClickAction(onClickClose)\n    }\n  }, [isOpen, onClickAction, onClickClose])\n\n  return createPortal(\n    <DialogContentInner\n      {...rest}\n      isOpen={isOpen}\n      ariaLabelledby={heading.id}\n      className={className}\n      onPressEscape={closeDisabled ? undefined : onPressEscape}\n    >\n      <ActionDialogContentInner\n        heading={heading}\n        contentBgColor={contentBgColor}\n        contentPadding={contentPadding}\n        actionText={actionText}\n        actionTheme={actionTheme}\n        actionDisabled={actionDisabled}\n        closeDisabled={closeDisabled}\n        onClickClose={actualOnClickClose}\n        onClickAction={actualOnClickAction}\n        subActionArea={subActionArea}\n        responseStatus={responseStatus}\n        decorators={decorators}\n      >\n        {children}\n      </ActionDialogContentInner>\n    </DialogContentInner>,\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;AAwBA;;AAEC;;;;AA6BC;;AAEI;;AAEJ;AAEA;;;;;AAMA;AA0BF;;"}
+{"version":3,"file":"ActionDialog.cjs","sources":["../../../../src/components/Dialog/ActionDialog/ActionDialog.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentProps, type FC, type ReactNode, useCallback } from 'react'\n\nimport { DialogContentInner } from '../DialogContentInner'\nimport { useDialogPortal } from '../useDialogPortal'\nimport { useObjectHeading } from '../useObjectHeading'\n\nimport {\n  ActionDialogContentInner,\n  type ActionDialogContentInnerProps,\n  type ActionDialogHelpers,\n} from './ActionDialogContentInner'\n\nimport type { DialogProps } from '../types'\n\ntype ObjectHeadingType = Omit<ActionDialogContentInnerProps['heading'], 'id'>\ntype HeadingType = ReactNode | ObjectHeadingType\n\ntype AbstractProps = Omit<ActionDialogContentInnerProps, 'heading'> &\n  DialogProps & {\n    heading: HeadingType\n  }\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nconst headingObjectConverter = (text: ReactNode) => ({\n  text,\n})\n\nexport const ActionDialog: FC<Props> = ({\n  children,\n  heading: orgHeading,\n  contentBgColor,\n  contentPadding,\n  actionText,\n  actionTheme,\n  onClickAction,\n  onClickClose,\n  onPressEscape = onClickClose,\n  responseStatus,\n  actionDisabled,\n  closeDisabled,\n  subActionArea,\n  className,\n  portalParent,\n  decorators,\n  id,\n  isOpen,\n  ...rest\n}) => {\n  const { createPortal } = useDialogPortal(portalParent, id)\n  const heading = useObjectHeading<HeadingType, ObjectHeadingType>(\n    orgHeading,\n    headingObjectConverter,\n  )\n\n  const actualOnClickClose = useCallback(() => {\n    if (isOpen) {\n      onClickClose()\n    }\n  }, [isOpen, onClickClose])\n\n  const actualOnClickAction = useCallback(\n    (e: React.MouseEvent<Element>, helpers: ActionDialogHelpers) => {\n      if (isOpen) {\n        onClickAction(e, helpers)\n      }\n    },\n    [isOpen, onClickAction],\n  )\n\n  return createPortal(\n    <DialogContentInner\n      {...rest}\n      isOpen={isOpen}\n      ariaLabelledby={heading.id}\n      className={className}\n      onPressEscape={closeDisabled ? undefined : onPressEscape}\n    >\n      <ActionDialogContentInner\n        heading={heading}\n        contentBgColor={contentBgColor}\n        contentPadding={contentPadding}\n        actionText={actionText}\n        actionTheme={actionTheme}\n        actionDisabled={actionDisabled}\n        closeDisabled={closeDisabled}\n        onClickClose={actualOnClickClose}\n        onClickAction={actualOnClickAction}\n        subActionArea={subActionArea}\n        responseStatus={responseStatus}\n        decorators={decorators}\n      >\n        {children}\n      </ActionDialogContentInner>\n    </DialogContentInner>,\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;AAyBA;;AAEC;;;;AA6BC;;AAEI;;AAEJ;;;AAKM;;AAEJ;AAIF;AA0BF;;"}

package/lib/components/Dialog/ActionDialog/ActionDialog.js

@@ -17,11 +17,11 @@ const ActionDialog = ({ children, heading: orgHeading, contentBgColor, contentPa
             onClickClose();
         }
     }, [isOpen, onClickClose]);
-    const actualOnClickAction = useCallback(() => {
+    const actualOnClickAction = useCallback((e, helpers) => {
         if (isOpen) {
-            onClickAction(onClickClose);
+            onClickAction(e, helpers);
         }
-    }, [isOpen, onClickAction, onClickClose]);
+    }, [isOpen, onClickAction]);
     return createPortal(jsx(DialogContentInner, { ...rest, isOpen: isOpen, ariaLabelledby: heading.id, className: className, onPressEscape: closeDisabled ? undefined : onPressEscape, children: jsx(ActionDialogContentInner, { heading: heading, contentBgColor: contentBgColor, contentPadding: contentPadding, actionText: actionText, actionTheme: actionTheme, actionDisabled: actionDisabled, closeDisabled: closeDisabled, onClickClose: actualOnClickClose, onClickAction: actualOnClickAction, subActionArea: subActionArea, responseStatus: responseStatus, decorators: decorators, children: children }) }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"ActionDialog.js","sources":["../../../../src/components/Dialog/ActionDialog/ActionDialog.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentProps, type FC, type ReactNode, useCallback } from 'react'\n\nimport { DialogContentInner } from '../DialogContentInner'\nimport { useDialogPortal } from '../useDialogPortal'\nimport { useObjectHeading } from '../useObjectHeading'\n\nimport {\n  ActionDialogContentInner,\n  type ActionDialogContentInnerProps,\n} from './ActionDialogContentInner'\n\nimport type { DialogProps } from '../types'\n\ntype ObjectHeadingType = Omit<ActionDialogContentInnerProps['heading'], 'id'>\ntype HeadingType = ReactNode | ObjectHeadingType\n\ntype AbstractProps = Omit<ActionDialogContentInnerProps, 'heading'> &\n  DialogProps & {\n    heading: HeadingType\n  }\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nconst headingObjectConverter = (text: ReactNode) => ({\n  text,\n})\n\nexport const ActionDialog: FC<Props> = ({\n  children,\n  heading: orgHeading,\n  contentBgColor,\n  contentPadding,\n  actionText,\n  actionTheme,\n  onClickAction,\n  onClickClose,\n  onPressEscape = onClickClose,\n  responseStatus,\n  actionDisabled,\n  closeDisabled,\n  subActionArea,\n  className,\n  portalParent,\n  decorators,\n  id,\n  isOpen,\n  ...rest\n}) => {\n  const { createPortal } = useDialogPortal(portalParent, id)\n  const heading = useObjectHeading<HeadingType, ObjectHeadingType>(\n    orgHeading,\n    headingObjectConverter,\n  )\n\n  const actualOnClickClose = useCallback(() => {\n    if (isOpen) {\n      onClickClose()\n    }\n  }, [isOpen, onClickClose])\n\n  const actualOnClickAction = useCallback(() => {\n    if (isOpen) {\n      onClickAction(onClickClose)\n    }\n  }, [isOpen, onClickAction, onClickClose])\n\n  return createPortal(\n    <DialogContentInner\n      {...rest}\n      isOpen={isOpen}\n      ariaLabelledby={heading.id}\n      className={className}\n      onPressEscape={closeDisabled ? undefined : onPressEscape}\n    >\n      <ActionDialogContentInner\n        heading={heading}\n        contentBgColor={contentBgColor}\n        contentPadding={contentPadding}\n        actionText={actionText}\n        actionTheme={actionTheme}\n        actionDisabled={actionDisabled}\n        closeDisabled={closeDisabled}\n        onClickClose={actualOnClickClose}\n        onClickAction={actualOnClickAction}\n        subActionArea={subActionArea}\n        responseStatus={responseStatus}\n        decorators={decorators}\n      >\n        {children}\n      </ActionDialogContentInner>\n    </DialogContentInner>,\n  )\n}\n"],"names":[],"mappings":";;;;;;;;AAwBA;;AAEC;;;;AA6BC;;AAEI;;AAEJ;AAEA;;;;;AAMA;AA0BF;;"}
+{"version":3,"file":"ActionDialog.js","sources":["../../../../src/components/Dialog/ActionDialog/ActionDialog.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentProps, type FC, type ReactNode, useCallback } from 'react'\n\nimport { DialogContentInner } from '../DialogContentInner'\nimport { useDialogPortal } from '../useDialogPortal'\nimport { useObjectHeading } from '../useObjectHeading'\n\nimport {\n  ActionDialogContentInner,\n  type ActionDialogContentInnerProps,\n  type ActionDialogHelpers,\n} from './ActionDialogContentInner'\n\nimport type { DialogProps } from '../types'\n\ntype ObjectHeadingType = Omit<ActionDialogContentInnerProps['heading'], 'id'>\ntype HeadingType = ReactNode | ObjectHeadingType\n\ntype AbstractProps = Omit<ActionDialogContentInnerProps, 'heading'> &\n  DialogProps & {\n    heading: HeadingType\n  }\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nconst headingObjectConverter = (text: ReactNode) => ({\n  text,\n})\n\nexport const ActionDialog: FC<Props> = ({\n  children,\n  heading: orgHeading,\n  contentBgColor,\n  contentPadding,\n  actionText,\n  actionTheme,\n  onClickAction,\n  onClickClose,\n  onPressEscape = onClickClose,\n  responseStatus,\n  actionDisabled,\n  closeDisabled,\n  subActionArea,\n  className,\n  portalParent,\n  decorators,\n  id,\n  isOpen,\n  ...rest\n}) => {\n  const { createPortal } = useDialogPortal(portalParent, id)\n  const heading = useObjectHeading<HeadingType, ObjectHeadingType>(\n    orgHeading,\n    headingObjectConverter,\n  )\n\n  const actualOnClickClose = useCallback(() => {\n    if (isOpen) {\n      onClickClose()\n    }\n  }, [isOpen, onClickClose])\n\n  const actualOnClickAction = useCallback(\n    (e: React.MouseEvent<Element>, helpers: ActionDialogHelpers) => {\n      if (isOpen) {\n        onClickAction(e, helpers)\n      }\n    },\n    [isOpen, onClickAction],\n  )\n\n  return createPortal(\n    <DialogContentInner\n      {...rest}\n      isOpen={isOpen}\n      ariaLabelledby={heading.id}\n      className={className}\n      onPressEscape={closeDisabled ? undefined : onPressEscape}\n    >\n      <ActionDialogContentInner\n        heading={heading}\n        contentBgColor={contentBgColor}\n        contentPadding={contentPadding}\n        actionText={actionText}\n        actionTheme={actionTheme}\n        actionDisabled={actionDisabled}\n        closeDisabled={closeDisabled}\n        onClickClose={actualOnClickClose}\n        onClickAction={actualOnClickAction}\n        subActionArea={subActionArea}\n        responseStatus={responseStatus}\n        decorators={decorators}\n      >\n        {children}\n      </ActionDialogContentInner>\n    </DialogContentInner>,\n  )\n}\n"],"names":[],"mappings":";;;;;;;;AAyBA;;AAEC;;;;AA6BC;;AAEI;;AAEJ;;;AAKM;;AAEJ;AAIF;AA0BF;;"}

package/lib/components/Dialog/ActionDialog/ActionDialogContentInner.cjs

@@ -40,8 +40,8 @@ const ActionDialogContentInner = ({ children, heading, contentBgColor, contentPa
     return (jsxRuntime.jsxs(components_SectioningContent_SectioningContent.Section, { className: styles.wrapper, children: [jsxRuntime.jsx(components_Dialog_DialogHeading.DialogHeading, { ...heading }), jsxRuntime.jsx(components_Dialog_DialogBody.DialogBody, { contentPadding: contentPadding, contentBgColor: contentBgColor, children: children }), jsxRuntime.jsxs(components_Layout_Stack_Stack.Stack, { gap: 0.5, className: styles.actionArea, children: [jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { justify: "space-between", children: [subActionArea, jsxRuntime.jsx(ActionAreaCluster, { onClickClose: onClickClose, onClickAction: onClickAction, closeDisabled: closeDisabled, actionDisabled: actionDisabled, loading: calcedResponseStatus.isProcessing, actionTheme: actionTheme, decorators: decorators, actionText: actionText, className: styles.buttonArea })] }), jsxRuntime.jsx(components_Dialog_DialogContentResponseStatusMessage.DialogContentResponseStatusMessage, { responseStatus: calcedResponseStatus, className: styles.message })] })] }));
 };
 const ActionAreaCluster = React.memo(({ onClickClose, onClickAction, closeDisabled, actionDisabled, loading, actionTheme, decorators, actionText, className, }) => {
-    const handleClickAction = React.useCallback(() => {
-        onClickAction(onClickClose);
+    const handleClickAction = React.useCallback((e) => {
+        onClickAction(e, { close: onClickClose });
     }, [onClickAction, onClickClose]);
     return (jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { gap: ACTION_AREA_CLUSTER_GAP, className: className, children: [jsxRuntime.jsx(CloseButton, { onClick: onClickClose, disabled: closeDisabled || loading, decorators: decorators }), jsxRuntime.jsx(ActionButton, { variant: actionTheme, disabled: actionDisabled, loading: loading, onClick: handleClickAction, children: actionText })] }));
 });

package/lib/components/Dialog/ActionDialog/ActionDialogContentInner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionDialogContentInner.cjs","sources":["../../../../src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, type ReactNode, memo, useCallback, useMemo } from 'react'\n\nimport { type DecoratorsType, useDecorators } from '../../../hooks/useDecorators'\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 AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** アクションボタンのラベル */\n    actionText: ReactNode\n    /** アクションボタンのスタイル */\n    actionTheme?: 'primary' | 'secondary' | 'danger'\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param closeDialog - ダイアログを閉じる関数\n     */\n    onClickAction: (closeDialog: () => void) => void\n    /** アクションボタンを無効にするかどうか */\n    actionDisabled?: boolean\n    /** 閉じるボタンを無効にするかどうか */\n    closeDisabled?: boolean\n    /** ダイアログフッターの左端操作領域 */\n    subActionArea?: ReactNode\n    /** コンポーネント内の文言を変更するための関数を設定 */\n    decorators?: DecoratorsType<'closeButtonLabel'>\n  }\n>\n\nexport type ActionDialogContentInnerProps = AbstractProps & {\n  onClickClose: () => void\n  responseStatus?: ResponseStatus\n}\n\nconst ACTION_AREA_CLUSTER_GAP = { row: 0.5, column: 1 } as const\n\nexport const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({\n  children,\n  heading,\n  contentBgColor,\n  contentPadding,\n  actionText,\n  actionTheme,\n  onClickAction,\n  onClickClose,\n  responseStatus,\n  actionDisabled,\n  closeDisabled,\n  subActionArea,\n  decorators,\n}) => {\n  const calcedResponseStatus = useResponseStatus(responseStatus)\n\n  const styles = 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  return (\n    <Section className={styles.wrapper}>\n      <DialogHeading {...heading} />\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            onClickAction={onClickAction}\n            closeDisabled={closeDisabled}\n            actionDisabled={actionDisabled}\n            loading={calcedResponseStatus.isProcessing}\n            actionTheme={actionTheme}\n            decorators={decorators}\n            actionText={actionText}\n            className={styles.buttonArea}\n          />\n        </Cluster>\n        <DialogContentResponseStatusMessage\n          responseStatus={calcedResponseStatus}\n          className={styles.message}\n        />\n      </Stack>\n    </Section>\n  )\n}\n\nconst ActionAreaCluster = memo<\n  Pick<\n    ActionDialogContentInnerProps,\n    | 'onClickClose'\n    | 'onClickAction'\n    | 'closeDisabled'\n    | 'actionDisabled'\n    | 'actionTheme'\n    | 'decorators'\n    | 'actionText'\n  > & { loading: boolean; className: string }\n>(\n  ({\n    onClickClose,\n    onClickAction,\n    closeDisabled,\n    actionDisabled,\n    loading,\n    actionTheme,\n    decorators,\n    actionText,\n    className,\n  }) => {\n    const handleClickAction = useCallback(() => {\n      onClickAction(onClickClose)\n    }, [onClickAction, onClickClose])\n\n    return (\n      <Cluster gap={ACTION_AREA_CLUSTER_GAP} className={className}>\n        <CloseButton\n          onClick={onClickClose}\n          disabled={closeDisabled || loading}\n          decorators={decorators}\n        />\n        <ActionButton\n          variant={actionTheme}\n          disabled={actionDisabled}\n          loading={loading}\n          onClick={handleClickAction}\n        >\n          {actionText}\n        </ActionButton>\n      </Cluster>\n    )\n  },\n)\n\nconst ActionButton = memo<\n  PropsWithChildren<{\n    variant: ActionDialogContentInnerProps['actionTheme']\n    disabled: ActionDialogContentInnerProps['actionDisabled']\n    loading: boolean\n    onClick: () => void\n  }>\n>(({ variant = 'primary', disabled, loading, onClick, children }) => (\n  <Button\n    type=\"submit\"\n    variant={variant}\n    disabled={disabled}\n    loading={loading}\n    onClick={onClick}\n    className=\"smarthr-ui-Dialog-actionButton\"\n  >\n    {children}\n  </Button>\n))\n\nconst CloseButton = memo<\n  Pick<ActionDialogContentInnerProps, 'decorators'> & {\n    onClick: ActionDialogContentInnerProps['onClickClose']\n    disabled: boolean\n  }\n>(({ onClick, disabled, decorators }) => {\n  const { localize } = useIntl()\n\n  const decoratorDefaultTexts = useMemo(\n    () => ({\n      closeButtonLabel: localize({\n        id: 'smarthr-ui/ActionDialog/closeButtonLabel',\n        defaultText: 'キャンセル',\n      }),\n    }),\n    [localize],\n  )\n\n  const decorated = useDecorators(decoratorDefaultTexts, decorators)\n\n  return (\n    <Button onClick={onClick} disabled={disabled} className=\"smarthr-ui-Dialog-closeButton\">\n      {decorated.closeButtonLabel}\n    </Button>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA;AAEO;AAeL;AAEA;AACE;;;;;;;;;AAsCJ;AAEA;AAuBI;;AAEA;;AAmBF;AAGF;AAoBA;AAME;AAEA;;AAGM;AACA;;AAEH;;;AAWL;;"}
+{"version":3,"file":"ActionDialogContentInner.cjs","sources":["../../../../src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useMemo,\n} from 'react'\n\nimport { type DecoratorsType, useDecorators } from '../../../hooks/useDecorators'\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 ActionDialogHelpers = {\n  close: () => void\n}\n\nexport type AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** アクションボタンのラベル */\n    actionText: ReactNode\n    /** アクションボタンのスタイル */\n    actionTheme?: 'primary' | 'secondary' | 'danger'\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param e マウスイベント\n     * @param helpers ダイアログ操作のためのヘルパー関数\n     */\n    onClickAction: (e: MouseEvent<Element>, helpers: ActionDialogHelpers) => void\n    /** アクションボタンを無効にするかどうか */\n    actionDisabled?: boolean\n    /** 閉じるボタンを無効にするかどうか */\n    closeDisabled?: boolean\n    /** ダイアログフッターの左端操作領域 */\n    subActionArea?: ReactNode\n    /** コンポーネント内の文言を変更するための関数を設定 */\n    decorators?: DecoratorsType<'closeButtonLabel'>\n  }\n>\n\nexport type ActionDialogContentInnerProps = AbstractProps & {\n  onClickClose: () => void\n  responseStatus?: ResponseStatus\n}\n\nconst ACTION_AREA_CLUSTER_GAP = { row: 0.5, column: 1 } as const\n\nexport const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({\n  children,\n  heading,\n  contentBgColor,\n  contentPadding,\n  actionText,\n  actionTheme,\n  onClickAction,\n  onClickClose,\n  responseStatus,\n  actionDisabled,\n  closeDisabled,\n  subActionArea,\n  decorators,\n}) => {\n  const calcedResponseStatus = useResponseStatus(responseStatus)\n\n  const styles = 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  return (\n    <Section className={styles.wrapper}>\n      <DialogHeading {...heading} />\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            onClickAction={onClickAction}\n            closeDisabled={closeDisabled}\n            actionDisabled={actionDisabled}\n            loading={calcedResponseStatus.isProcessing}\n            actionTheme={actionTheme}\n            decorators={decorators}\n            actionText={actionText}\n            className={styles.buttonArea}\n          />\n        </Cluster>\n        <DialogContentResponseStatusMessage\n          responseStatus={calcedResponseStatus}\n          className={styles.message}\n        />\n      </Stack>\n    </Section>\n  )\n}\n\nconst ActionAreaCluster = memo<\n  Pick<\n    ActionDialogContentInnerProps,\n    | 'onClickClose'\n    | 'onClickAction'\n    | 'closeDisabled'\n    | 'actionDisabled'\n    | 'actionTheme'\n    | 'decorators'\n    | 'actionText'\n  > & { loading: boolean; className: string }\n>(\n  ({\n    onClickClose,\n    onClickAction,\n    closeDisabled,\n    actionDisabled,\n    loading,\n    actionTheme,\n    decorators,\n    actionText,\n    className,\n  }) => {\n    const handleClickAction = useCallback(\n      (e: MouseEvent<Element>) => {\n        onClickAction(e, { close: onClickClose })\n      },\n      [onClickAction, onClickClose],\n    )\n\n    return (\n      <Cluster gap={ACTION_AREA_CLUSTER_GAP} className={className}>\n        <CloseButton\n          onClick={onClickClose}\n          disabled={closeDisabled || loading}\n          decorators={decorators}\n        />\n        <ActionButton\n          variant={actionTheme}\n          disabled={actionDisabled}\n          loading={loading}\n          onClick={handleClickAction}\n        >\n          {actionText}\n        </ActionButton>\n      </Cluster>\n    )\n  },\n)\n\nconst ActionButton = memo<\n  PropsWithChildren<{\n    variant: ActionDialogContentInnerProps['actionTheme']\n    disabled: ActionDialogContentInnerProps['actionDisabled']\n    loading: boolean\n    onClick: (e: MouseEvent<HTMLButtonElement>) => void\n  }>\n>(({ variant = 'primary', disabled, loading, onClick, children }) => (\n  <Button\n    type=\"submit\"\n    variant={variant}\n    disabled={disabled}\n    loading={loading}\n    onClick={onClick}\n    className=\"smarthr-ui-Dialog-actionButton\"\n  >\n    {children}\n  </Button>\n))\n\nconst CloseButton = memo<\n  Pick<ActionDialogContentInnerProps, 'decorators'> & {\n    onClick: ActionDialogContentInnerProps['onClickClose']\n    disabled: boolean\n  }\n>(({ onClick, disabled, decorators }) => {\n  const { localize } = useIntl()\n\n  const decoratorDefaultTexts = useMemo(\n    () => ({\n      closeButtonLabel: localize({\n        id: 'smarthr-ui/ActionDialog/closeButtonLabel',\n        defaultText: 'キャンセル',\n      }),\n    }),\n    [localize],\n  )\n\n  const decorated = useDecorators(decoratorDefaultTexts, decorators)\n\n  return (\n    <Button onClick={onClick} disabled={disabled} className=\"smarthr-ui-Dialog-closeButton\">\n      {decorated.closeButtonLabel}\n    </Button>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA;AAEO;AAeL;AAEA;AACE;;;;;;;;;AAsCJ;AAEA;AAuBI;;AAGE;;AAqBJ;AAGF;AAoBA;AAME;AAEA;;AAGM;AACA;;AAEH;;;AAWL;;"}

package/lib/components/Dialog/ActionDialog/ActionDialogContentInner.d.ts

@@ -1,8 +1,11 @@
-import { type FC, type PropsWithChildren, type ReactNode } from 'react';
+import { type FC, type MouseEvent, type PropsWithChildren, type ReactNode } from 'react';
 import { type DecoratorsType } from '../../../hooks/useDecorators';
 import { type ResponseStatus } from '../../../hooks/useResponseStatus';
 import { type Props as DialogBodyProps } from '../DialogBody';
 import { type Props as DialogHeadingProps } from '../DialogHeading';
+export type ActionDialogHelpers = {
+    close: () => void;
+};
 export type AbstractProps = PropsWithChildren<DialogBodyProps & {
     /** ダイアログタイトル */
     heading: DialogHeadingProps;
@@ -12,9 +15,10 @@ export type AbstractProps = PropsWithChildren<DialogBodyProps & {
     actionTheme?: 'primary' | 'secondary' | 'danger';
     /**
      * アクションボタンをクリックした時に発火するコールバック関数
-     * @param closeDialog - ダイアログを閉じる関数
+     * @param e マウスイベント
+     * @param helpers ダイアログ操作のためのヘルパー関数
      */
-    onClickAction: (closeDialog: () => void) => void;
+    onClickAction: (e: MouseEvent<Element>, helpers: ActionDialogHelpers) => void;
     /** アクションボタンを無効にするかどうか */
     actionDisabled?: boolean;
     /** 閉じるボタンを無効にするかどうか */

package/lib/components/Dialog/ActionDialog/ActionDialogContentInner.js

@@ -38,8 +38,8 @@ const ActionDialogContentInner = ({ children, heading, contentBgColor, contentPa
     return (jsxs(Section, { className: styles.wrapper, children: [jsx(DialogHeading, { ...heading }), 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, onClickAction: onClickAction, closeDisabled: closeDisabled, actionDisabled: actionDisabled, loading: calcedResponseStatus.isProcessing, actionTheme: actionTheme, decorators: decorators, actionText: actionText, className: styles.buttonArea })] }), jsx(DialogContentResponseStatusMessage, { responseStatus: calcedResponseStatus, className: styles.message })] })] }));
 };
 const ActionAreaCluster = memo(({ onClickClose, onClickAction, closeDisabled, actionDisabled, loading, actionTheme, decorators, actionText, className, }) => {
-    const handleClickAction = useCallback(() => {
-        onClickAction(onClickClose);
+    const handleClickAction = useCallback((e) => {
+        onClickAction(e, { close: onClickClose });
     }, [onClickAction, onClickClose]);
     return (jsxs(Cluster, { gap: ACTION_AREA_CLUSTER_GAP, className: className, children: [jsx(CloseButton, { onClick: onClickClose, disabled: closeDisabled || loading, decorators: decorators }), jsx(ActionButton, { variant: actionTheme, disabled: actionDisabled, loading: loading, onClick: handleClickAction, children: actionText })] }));
 });

package/lib/components/Dialog/ActionDialog/ActionDialogContentInner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionDialogContentInner.js","sources":["../../../../src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, type ReactNode, memo, useCallback, useMemo } from 'react'\n\nimport { type DecoratorsType, useDecorators } from '../../../hooks/useDecorators'\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 AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** アクションボタンのラベル */\n    actionText: ReactNode\n    /** アクションボタンのスタイル */\n    actionTheme?: 'primary' | 'secondary' | 'danger'\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param closeDialog - ダイアログを閉じる関数\n     */\n    onClickAction: (closeDialog: () => void) => void\n    /** アクションボタンを無効にするかどうか */\n    actionDisabled?: boolean\n    /** 閉じるボタンを無効にするかどうか */\n    closeDisabled?: boolean\n    /** ダイアログフッターの左端操作領域 */\n    subActionArea?: ReactNode\n    /** コンポーネント内の文言を変更するための関数を設定 */\n    decorators?: DecoratorsType<'closeButtonLabel'>\n  }\n>\n\nexport type ActionDialogContentInnerProps = AbstractProps & {\n  onClickClose: () => void\n  responseStatus?: ResponseStatus\n}\n\nconst ACTION_AREA_CLUSTER_GAP = { row: 0.5, column: 1 } as const\n\nexport const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({\n  children,\n  heading,\n  contentBgColor,\n  contentPadding,\n  actionText,\n  actionTheme,\n  onClickAction,\n  onClickClose,\n  responseStatus,\n  actionDisabled,\n  closeDisabled,\n  subActionArea,\n  decorators,\n}) => {\n  const calcedResponseStatus = useResponseStatus(responseStatus)\n\n  const styles = 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  return (\n    <Section className={styles.wrapper}>\n      <DialogHeading {...heading} />\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            onClickAction={onClickAction}\n            closeDisabled={closeDisabled}\n            actionDisabled={actionDisabled}\n            loading={calcedResponseStatus.isProcessing}\n            actionTheme={actionTheme}\n            decorators={decorators}\n            actionText={actionText}\n            className={styles.buttonArea}\n          />\n        </Cluster>\n        <DialogContentResponseStatusMessage\n          responseStatus={calcedResponseStatus}\n          className={styles.message}\n        />\n      </Stack>\n    </Section>\n  )\n}\n\nconst ActionAreaCluster = memo<\n  Pick<\n    ActionDialogContentInnerProps,\n    | 'onClickClose'\n    | 'onClickAction'\n    | 'closeDisabled'\n    | 'actionDisabled'\n    | 'actionTheme'\n    | 'decorators'\n    | 'actionText'\n  > & { loading: boolean; className: string }\n>(\n  ({\n    onClickClose,\n    onClickAction,\n    closeDisabled,\n    actionDisabled,\n    loading,\n    actionTheme,\n    decorators,\n    actionText,\n    className,\n  }) => {\n    const handleClickAction = useCallback(() => {\n      onClickAction(onClickClose)\n    }, [onClickAction, onClickClose])\n\n    return (\n      <Cluster gap={ACTION_AREA_CLUSTER_GAP} className={className}>\n        <CloseButton\n          onClick={onClickClose}\n          disabled={closeDisabled || loading}\n          decorators={decorators}\n        />\n        <ActionButton\n          variant={actionTheme}\n          disabled={actionDisabled}\n          loading={loading}\n          onClick={handleClickAction}\n        >\n          {actionText}\n        </ActionButton>\n      </Cluster>\n    )\n  },\n)\n\nconst ActionButton = memo<\n  PropsWithChildren<{\n    variant: ActionDialogContentInnerProps['actionTheme']\n    disabled: ActionDialogContentInnerProps['actionDisabled']\n    loading: boolean\n    onClick: () => void\n  }>\n>(({ variant = 'primary', disabled, loading, onClick, children }) => (\n  <Button\n    type=\"submit\"\n    variant={variant}\n    disabled={disabled}\n    loading={loading}\n    onClick={onClick}\n    className=\"smarthr-ui-Dialog-actionButton\"\n  >\n    {children}\n  </Button>\n))\n\nconst CloseButton = memo<\n  Pick<ActionDialogContentInnerProps, 'decorators'> & {\n    onClick: ActionDialogContentInnerProps['onClickClose']\n    disabled: boolean\n  }\n>(({ onClick, disabled, decorators }) => {\n  const { localize } = useIntl()\n\n  const decoratorDefaultTexts = useMemo(\n    () => ({\n      closeButtonLabel: localize({\n        id: 'smarthr-ui/ActionDialog/closeButtonLabel',\n        defaultText: 'キャンセル',\n      }),\n    }),\n    [localize],\n  )\n\n  const decorated = useDecorators(decoratorDefaultTexts, decorators)\n\n  return (\n    <Button onClick={onClick} disabled={disabled} className=\"smarthr-ui-Dialog-closeButton\">\n      {decorated.closeButtonLabel}\n    </Button>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4CA;AAEO;AAeL;AAEA;AACE;;;;;;;;;AAsCJ;AAEA;AAuBI;;AAEA;;AAmBF;AAGF;AAoBA;AAME;AAEA;;AAGM;AACA;;AAEH;;;AAWL;;"}
+{"version":3,"file":"ActionDialogContentInner.js","sources":["../../../../src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useMemo,\n} from 'react'\n\nimport { type DecoratorsType, useDecorators } from '../../../hooks/useDecorators'\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 ActionDialogHelpers = {\n  close: () => void\n}\n\nexport type AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** アクションボタンのラベル */\n    actionText: ReactNode\n    /** アクションボタンのスタイル */\n    actionTheme?: 'primary' | 'secondary' | 'danger'\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param e マウスイベント\n     * @param helpers ダイアログ操作のためのヘルパー関数\n     */\n    onClickAction: (e: MouseEvent<Element>, helpers: ActionDialogHelpers) => void\n    /** アクションボタンを無効にするかどうか */\n    actionDisabled?: boolean\n    /** 閉じるボタンを無効にするかどうか */\n    closeDisabled?: boolean\n    /** ダイアログフッターの左端操作領域 */\n    subActionArea?: ReactNode\n    /** コンポーネント内の文言を変更するための関数を設定 */\n    decorators?: DecoratorsType<'closeButtonLabel'>\n  }\n>\n\nexport type ActionDialogContentInnerProps = AbstractProps & {\n  onClickClose: () => void\n  responseStatus?: ResponseStatus\n}\n\nconst ACTION_AREA_CLUSTER_GAP = { row: 0.5, column: 1 } as const\n\nexport const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({\n  children,\n  heading,\n  contentBgColor,\n  contentPadding,\n  actionText,\n  actionTheme,\n  onClickAction,\n  onClickClose,\n  responseStatus,\n  actionDisabled,\n  closeDisabled,\n  subActionArea,\n  decorators,\n}) => {\n  const calcedResponseStatus = useResponseStatus(responseStatus)\n\n  const styles = 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  return (\n    <Section className={styles.wrapper}>\n      <DialogHeading {...heading} />\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            onClickAction={onClickAction}\n            closeDisabled={closeDisabled}\n            actionDisabled={actionDisabled}\n            loading={calcedResponseStatus.isProcessing}\n            actionTheme={actionTheme}\n            decorators={decorators}\n            actionText={actionText}\n            className={styles.buttonArea}\n          />\n        </Cluster>\n        <DialogContentResponseStatusMessage\n          responseStatus={calcedResponseStatus}\n          className={styles.message}\n        />\n      </Stack>\n    </Section>\n  )\n}\n\nconst ActionAreaCluster = memo<\n  Pick<\n    ActionDialogContentInnerProps,\n    | 'onClickClose'\n    | 'onClickAction'\n    | 'closeDisabled'\n    | 'actionDisabled'\n    | 'actionTheme'\n    | 'decorators'\n    | 'actionText'\n  > & { loading: boolean; className: string }\n>(\n  ({\n    onClickClose,\n    onClickAction,\n    closeDisabled,\n    actionDisabled,\n    loading,\n    actionTheme,\n    decorators,\n    actionText,\n    className,\n  }) => {\n    const handleClickAction = useCallback(\n      (e: MouseEvent<Element>) => {\n        onClickAction(e, { close: onClickClose })\n      },\n      [onClickAction, onClickClose],\n    )\n\n    return (\n      <Cluster gap={ACTION_AREA_CLUSTER_GAP} className={className}>\n        <CloseButton\n          onClick={onClickClose}\n          disabled={closeDisabled || loading}\n          decorators={decorators}\n        />\n        <ActionButton\n          variant={actionTheme}\n          disabled={actionDisabled}\n          loading={loading}\n          onClick={handleClickAction}\n        >\n          {actionText}\n        </ActionButton>\n      </Cluster>\n    )\n  },\n)\n\nconst ActionButton = memo<\n  PropsWithChildren<{\n    variant: ActionDialogContentInnerProps['actionTheme']\n    disabled: ActionDialogContentInnerProps['actionDisabled']\n    loading: boolean\n    onClick: (e: MouseEvent<HTMLButtonElement>) => void\n  }>\n>(({ variant = 'primary', disabled, loading, onClick, children }) => (\n  <Button\n    type=\"submit\"\n    variant={variant}\n    disabled={disabled}\n    loading={loading}\n    onClick={onClick}\n    className=\"smarthr-ui-Dialog-actionButton\"\n  >\n    {children}\n  </Button>\n))\n\nconst CloseButton = memo<\n  Pick<ActionDialogContentInnerProps, 'decorators'> & {\n    onClick: ActionDialogContentInnerProps['onClickClose']\n    disabled: boolean\n  }\n>(({ onClick, disabled, decorators }) => {\n  const { localize } = useIntl()\n\n  const decoratorDefaultTexts = useMemo(\n    () => ({\n      closeButtonLabel: localize({\n        id: 'smarthr-ui/ActionDialog/closeButtonLabel',\n        defaultText: 'キャンセル',\n      }),\n    }),\n    [localize],\n  )\n\n  const decorated = useDecorators(decoratorDefaultTexts, decorators)\n\n  return (\n    <Button onClick={onClick} disabled={disabled} className=\"smarthr-ui-Dialog-closeButton\">\n      {decorated.closeButtonLabel}\n    </Button>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAyDA;AAEO;AAeL;AAEA;AACE;;;;;;;;;AAsCJ;AAEA;AAuBI;;AAGE;;AAqBJ;AAGF;AAoBA;AAME;AAEA;;AAGM;AACA;;AAEH;;;AAWL;;"}

package/lib/components/Dialog/FormDialog/FormDialog.cjs

@@ -19,9 +19,9 @@ const FormDialog = ({ children, heading: orgHeading, contentBgColor, contentPadd
             onClickClose();
         }
     }, [isOpen, onClickClose]);
-    const onDelegateSubmit = React.useCallback((close, e) => {
+    const onDelegateSubmit = React.useCallback((e, helpers) => {
         if (isOpen) {
-            onSubmit(close, e);
+            onSubmit(e, helpers);
         }
     }, [isOpen, onSubmit]);
     return createPortal(jsxRuntime.jsx(components_Dialog_DialogContentInner.DialogContentInner, { ...rest, isOpen: isOpen, ariaLabelledby: heading.id, className: className, onPressEscape: closeDisabled ? undefined : onPressEscape, children: jsxRuntime.jsx(components_Dialog_FormDialog_FormDialogContentInner.FormDialogContentInner, { heading: heading, contentBgColor: contentBgColor, contentPadding: contentPadding, actionText: actionText, actionTheme: actionTheme, actionDisabled: actionDisabled, closeDisabled: closeDisabled, subActionArea: subActionArea, onClickClose: actualOnClickClose, onSubmit: onDelegateSubmit, responseStatus: responseStatus, decorators: decorators, children: children }) }));

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

@@ -1 +1 @@
-{"version":3,"file":"FormDialog.cjs","sources":["../../../../src/components/Dialog/FormDialog/FormDialog.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentProps, type FC, type FormEvent, type ReactNode, useCallback } from 'react'\n\nimport { DialogContentInner } from '../DialogContentInner'\nimport { useDialogPortal } from '../useDialogPortal'\nimport { useObjectHeading } from '../useObjectHeading'\n\nimport { FormDialogContentInner, type FormDialogContentInnerProps } from './FormDialogContentInner'\n\nimport type { DialogProps } from '../types'\n\ntype ObjectHeadingType = Omit<FormDialogContentInnerProps['heading'], 'id'>\ntype HeadingType = ReactNode | ObjectHeadingType\n\ntype AbstractProps = Omit<FormDialogContentInnerProps, 'heading'> &\n  DialogProps & {\n    heading: HeadingType\n  }\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nconst headingObjectConverter = (text: ReactNode) => ({\n  text,\n})\n\nexport const FormDialog: FC<Props> = ({\n  children,\n  heading: orgHeading,\n  contentBgColor,\n  contentPadding,\n  actionText,\n  actionTheme,\n  onSubmit,\n  onClickClose,\n  onPressEscape = onClickClose,\n  responseStatus,\n  actionDisabled,\n  closeDisabled,\n  subActionArea,\n  className,\n  portalParent,\n  decorators,\n  id,\n  isOpen,\n  ...rest\n}) => {\n  const { createPortal } = useDialogPortal(portalParent, id)\n  const heading = useObjectHeading<HeadingType, ObjectHeadingType>(\n    orgHeading,\n    headingObjectConverter,\n  )\n\n  const actualOnClickClose = useCallback(() => {\n    if (isOpen) {\n      onClickClose()\n    }\n  }, [isOpen, onClickClose])\n\n  const onDelegateSubmit = useCallback(\n    (close: () => void, e: FormEvent<HTMLFormElement>) => {\n      if (isOpen) {\n        onSubmit(close, e)\n      }\n    },\n    [isOpen, onSubmit],\n  )\n\n  return createPortal(\n    <DialogContentInner\n      {...rest}\n      isOpen={isOpen}\n      ariaLabelledby={heading.id}\n      className={className}\n      onPressEscape={closeDisabled ? undefined : onPressEscape}\n    >\n      <FormDialogContentInner\n        heading={heading}\n        contentBgColor={contentBgColor}\n        contentPadding={contentPadding}\n        actionText={actionText}\n        actionTheme={actionTheme}\n        actionDisabled={actionDisabled}\n        closeDisabled={closeDisabled}\n        subActionArea={subActionArea}\n        onClickClose={actualOnClickClose}\n        onSubmit={onDelegateSubmit}\n        responseStatus={responseStatus}\n        decorators={decorators}\n      >\n        {children}\n      </FormDialogContentInner>\n    </DialogContentInner>,\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;AAqBA;;AAEC;;;;AA6BC;;AAEI;;AAEJ;;;AAKM;;AAEJ;AAIF;AA0BF;;"}
+{"version":3,"file":"FormDialog.cjs","sources":["../../../../src/components/Dialog/FormDialog/FormDialog.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentProps, type FC, type FormEvent, type ReactNode, useCallback } from 'react'\n\nimport { DialogContentInner } from '../DialogContentInner'\nimport { useDialogPortal } from '../useDialogPortal'\nimport { useObjectHeading } from '../useObjectHeading'\n\nimport {\n  FormDialogContentInner,\n  type FormDialogContentInnerProps,\n  type FormDialogHelpers,\n} from './FormDialogContentInner'\n\nimport type { DialogProps } from '../types'\n\ntype ObjectHeadingType = Omit<FormDialogContentInnerProps['heading'], 'id'>\ntype HeadingType = ReactNode | ObjectHeadingType\n\ntype AbstractProps = Omit<FormDialogContentInnerProps, 'heading'> &\n  DialogProps & {\n    heading: HeadingType\n  }\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nconst headingObjectConverter = (text: ReactNode) => ({\n  text,\n})\n\nexport const FormDialog: FC<Props> = ({\n  children,\n  heading: orgHeading,\n  contentBgColor,\n  contentPadding,\n  actionText,\n  actionTheme,\n  onSubmit,\n  onClickClose,\n  onPressEscape = onClickClose,\n  responseStatus,\n  actionDisabled,\n  closeDisabled,\n  subActionArea,\n  className,\n  portalParent,\n  decorators,\n  id,\n  isOpen,\n  ...rest\n}) => {\n  const { createPortal } = useDialogPortal(portalParent, id)\n  const heading = useObjectHeading<HeadingType, ObjectHeadingType>(\n    orgHeading,\n    headingObjectConverter,\n  )\n\n  const actualOnClickClose = useCallback(() => {\n    if (isOpen) {\n      onClickClose()\n    }\n  }, [isOpen, onClickClose])\n\n  const onDelegateSubmit = useCallback(\n    (e: FormEvent<HTMLFormElement>, helpers: FormDialogHelpers) => {\n      if (isOpen) {\n        onSubmit(e, helpers)\n      }\n    },\n    [isOpen, onSubmit],\n  )\n\n  return createPortal(\n    <DialogContentInner\n      {...rest}\n      isOpen={isOpen}\n      ariaLabelledby={heading.id}\n      className={className}\n      onPressEscape={closeDisabled ? undefined : onPressEscape}\n    >\n      <FormDialogContentInner\n        heading={heading}\n        contentBgColor={contentBgColor}\n        contentPadding={contentPadding}\n        actionText={actionText}\n        actionTheme={actionTheme}\n        actionDisabled={actionDisabled}\n        closeDisabled={closeDisabled}\n        subActionArea={subActionArea}\n        onClickClose={actualOnClickClose}\n        onSubmit={onDelegateSubmit}\n        responseStatus={responseStatus}\n        decorators={decorators}\n      >\n        {children}\n      </FormDialogContentInner>\n    </DialogContentInner>,\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;AAyBA;;AAEC;;;;AA6BC;;AAEI;;AAEJ;;;AAKM;;AAEJ;AAIF;AA0BF;;"}

package/lib/components/Dialog/FormDialog/FormDialog.js

@@ -17,9 +17,9 @@ const FormDialog = ({ children, heading: orgHeading, contentBgColor, contentPadd
             onClickClose();
         }
     }, [isOpen, onClickClose]);
-    const onDelegateSubmit = useCallback((close, e) => {
+    const onDelegateSubmit = useCallback((e, helpers) => {
         if (isOpen) {
-            onSubmit(close, e);
+            onSubmit(e, helpers);
         }
     }, [isOpen, onSubmit]);
     return createPortal(jsx(DialogContentInner, { ...rest, isOpen: isOpen, ariaLabelledby: heading.id, className: className, onPressEscape: closeDisabled ? undefined : onPressEscape, children: jsx(FormDialogContentInner, { heading: heading, contentBgColor: contentBgColor, contentPadding: contentPadding, actionText: actionText, actionTheme: actionTheme, actionDisabled: actionDisabled, closeDisabled: closeDisabled, subActionArea: subActionArea, onClickClose: actualOnClickClose, onSubmit: onDelegateSubmit, responseStatus: responseStatus, decorators: decorators, children: children }) }));

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

@@ -1 +1 @@
-{"version":3,"file":"FormDialog.js","sources":["../../../../src/components/Dialog/FormDialog/FormDialog.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentProps, type FC, type FormEvent, type ReactNode, useCallback } from 'react'\n\nimport { DialogContentInner } from '../DialogContentInner'\nimport { useDialogPortal } from '../useDialogPortal'\nimport { useObjectHeading } from '../useObjectHeading'\n\nimport { FormDialogContentInner, type FormDialogContentInnerProps } from './FormDialogContentInner'\n\nimport type { DialogProps } from '../types'\n\ntype ObjectHeadingType = Omit<FormDialogContentInnerProps['heading'], 'id'>\ntype HeadingType = ReactNode | ObjectHeadingType\n\ntype AbstractProps = Omit<FormDialogContentInnerProps, 'heading'> &\n  DialogProps & {\n    heading: HeadingType\n  }\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nconst headingObjectConverter = (text: ReactNode) => ({\n  text,\n})\n\nexport const FormDialog: FC<Props> = ({\n  children,\n  heading: orgHeading,\n  contentBgColor,\n  contentPadding,\n  actionText,\n  actionTheme,\n  onSubmit,\n  onClickClose,\n  onPressEscape = onClickClose,\n  responseStatus,\n  actionDisabled,\n  closeDisabled,\n  subActionArea,\n  className,\n  portalParent,\n  decorators,\n  id,\n  isOpen,\n  ...rest\n}) => {\n  const { createPortal } = useDialogPortal(portalParent, id)\n  const heading = useObjectHeading<HeadingType, ObjectHeadingType>(\n    orgHeading,\n    headingObjectConverter,\n  )\n\n  const actualOnClickClose = useCallback(() => {\n    if (isOpen) {\n      onClickClose()\n    }\n  }, [isOpen, onClickClose])\n\n  const onDelegateSubmit = useCallback(\n    (close: () => void, e: FormEvent<HTMLFormElement>) => {\n      if (isOpen) {\n        onSubmit(close, e)\n      }\n    },\n    [isOpen, onSubmit],\n  )\n\n  return createPortal(\n    <DialogContentInner\n      {...rest}\n      isOpen={isOpen}\n      ariaLabelledby={heading.id}\n      className={className}\n      onPressEscape={closeDisabled ? undefined : onPressEscape}\n    >\n      <FormDialogContentInner\n        heading={heading}\n        contentBgColor={contentBgColor}\n        contentPadding={contentPadding}\n        actionText={actionText}\n        actionTheme={actionTheme}\n        actionDisabled={actionDisabled}\n        closeDisabled={closeDisabled}\n        subActionArea={subActionArea}\n        onClickClose={actualOnClickClose}\n        onSubmit={onDelegateSubmit}\n        responseStatus={responseStatus}\n        decorators={decorators}\n      >\n        {children}\n      </FormDialogContentInner>\n    </DialogContentInner>,\n  )\n}\n"],"names":[],"mappings":";;;;;;;;AAqBA;;AAEC;;;;AA6BC;;AAEI;;AAEJ;;;AAKM;;AAEJ;AAIF;AA0BF;;"}
+{"version":3,"file":"FormDialog.js","sources":["../../../../src/components/Dialog/FormDialog/FormDialog.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentProps, type FC, type FormEvent, type ReactNode, useCallback } from 'react'\n\nimport { DialogContentInner } from '../DialogContentInner'\nimport { useDialogPortal } from '../useDialogPortal'\nimport { useObjectHeading } from '../useObjectHeading'\n\nimport {\n  FormDialogContentInner,\n  type FormDialogContentInnerProps,\n  type FormDialogHelpers,\n} from './FormDialogContentInner'\n\nimport type { DialogProps } from '../types'\n\ntype ObjectHeadingType = Omit<FormDialogContentInnerProps['heading'], 'id'>\ntype HeadingType = ReactNode | ObjectHeadingType\n\ntype AbstractProps = Omit<FormDialogContentInnerProps, 'heading'> &\n  DialogProps & {\n    heading: HeadingType\n  }\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nconst headingObjectConverter = (text: ReactNode) => ({\n  text,\n})\n\nexport const FormDialog: FC<Props> = ({\n  children,\n  heading: orgHeading,\n  contentBgColor,\n  contentPadding,\n  actionText,\n  actionTheme,\n  onSubmit,\n  onClickClose,\n  onPressEscape = onClickClose,\n  responseStatus,\n  actionDisabled,\n  closeDisabled,\n  subActionArea,\n  className,\n  portalParent,\n  decorators,\n  id,\n  isOpen,\n  ...rest\n}) => {\n  const { createPortal } = useDialogPortal(portalParent, id)\n  const heading = useObjectHeading<HeadingType, ObjectHeadingType>(\n    orgHeading,\n    headingObjectConverter,\n  )\n\n  const actualOnClickClose = useCallback(() => {\n    if (isOpen) {\n      onClickClose()\n    }\n  }, [isOpen, onClickClose])\n\n  const onDelegateSubmit = useCallback(\n    (e: FormEvent<HTMLFormElement>, helpers: FormDialogHelpers) => {\n      if (isOpen) {\n        onSubmit(e, helpers)\n      }\n    },\n    [isOpen, onSubmit],\n  )\n\n  return createPortal(\n    <DialogContentInner\n      {...rest}\n      isOpen={isOpen}\n      ariaLabelledby={heading.id}\n      className={className}\n      onPressEscape={closeDisabled ? undefined : onPressEscape}\n    >\n      <FormDialogContentInner\n        heading={heading}\n        contentBgColor={contentBgColor}\n        contentPadding={contentPadding}\n        actionText={actionText}\n        actionTheme={actionTheme}\n        actionDisabled={actionDisabled}\n        closeDisabled={closeDisabled}\n        subActionArea={subActionArea}\n        onClickClose={actualOnClickClose}\n        onSubmit={onDelegateSubmit}\n        responseStatus={responseStatus}\n        decorators={decorators}\n      >\n        {children}\n      </FormDialogContentInner>\n    </DialogContentInner>,\n  )\n}\n"],"names":[],"mappings":";;;;;;;;AAyBA;;AAEC;;;;AA6BC;;AAEI;;AAEJ;;;AAKM;;AAEJ;AAIF;AA0BF;;"}

package/lib/components/Dialog/FormDialog/FormDialogContentInner.cjs

@@ -38,7 +38,7 @@ const FormDialogContentInner = ({ children, heading, contentBgColor, contentPadd
         // HINT: React Portals などで擬似的にformがネストしている場合など、stopPropagationを実行しないと
         // 親formが意図せずsubmitされてしまう場合がある
         e.stopPropagation();
-        onSubmit(onClickClose, e);
+        onSubmit(e, { close: onClickClose });
     }, [onSubmit, onClickClose]);
     const calculatedResponseStatus = hooks_useResponseStatus.useResponseStatus(responseStatus);
     const styles = React.useMemo(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"FormDialogContentInner.cjs","sources":["../../../../src/components/Dialog/FormDialog/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 DecoratorsType, useDecorators } from '../../../hooks/useDecorators'\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 AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** アクションボタンのラベル */\n    actionText: ReactNode\n    /** アクションボタンのスタイル */\n    actionTheme?: 'primary' | 'secondary' | 'danger'\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param closeDialog ダイアログを閉じる関数\n     */\n    onSubmit: (closeDialog: () => void, e: FormEvent<HTMLFormElement>) => void\n    /** アクションボタンを無効にするかどうか */\n    actionDisabled?: boolean\n    /** 閉じるボタンを無効にするかどうか */\n    closeDisabled?: boolean\n    /** ダイアログフッターの左端操作領域 */\n    subActionArea?: ReactNode\n    /** コンポーネント内の文言を変更するための関数を設定 */\n    decorators?: DecoratorsType<'closeButtonLabel'>\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  actionText,\n  actionTheme,\n  onSubmit,\n  onClickClose,\n  responseStatus,\n  actionDisabled,\n  closeDisabled,\n  subActionArea,\n  decorators,\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(onClickClose, e)\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              closeDisabled={closeDisabled}\n              actionDisabled={actionDisabled}\n              loading={calculatedResponseStatus.isProcessing}\n              actionTheme={actionTheme}\n              decorators={decorators}\n              actionText={actionText}\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<\n    FormDialogContentInnerProps,\n    | 'onClickClose'\n    | 'closeDisabled'\n    | 'actionDisabled'\n    | 'actionTheme'\n    | 'decorators'\n    | 'actionText'\n  > & { loading: boolean; className: string }\n>(\n  ({\n    onClickClose,\n    closeDisabled,\n    actionDisabled,\n    loading,\n    actionTheme,\n    decorators,\n    actionText,\n    className,\n  }) => (\n    <Cluster gap={ACTION_AREA_CLUSTER_GAP} className={className}>\n      <CloseButton\n        onClick={onClickClose}\n        disabled={closeDisabled || loading}\n        decorators={decorators}\n      />\n      <ActionButton variant={actionTheme} disabled={actionDisabled} loading={loading}>\n        {actionText}\n      </ActionButton>\n    </Cluster>\n  ),\n)\n\nconst ActionButton = memo<\n  PropsWithChildren<{\n    variant: FormDialogContentInnerProps['actionTheme']\n    disabled: FormDialogContentInnerProps['actionDisabled']\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  Pick<FormDialogContentInnerProps, 'decorators'> & {\n    onClick: FormDialogContentInnerProps['onClickClose']\n    disabled: boolean\n  }\n>(({ onClick, disabled, decorators }) => {\n  const { localize } = useIntl()\n\n  const decoratorDefaultTexts = useMemo(\n    () => ({\n      closeButtonLabel: localize({\n        id: 'smarthr-ui/FormDialog/closeButtonLabel',\n        defaultText: 'キャンセル',\n      }),\n    }),\n    [localize],\n  )\n\n  const decorated = useDecorators(decoratorDefaultTexts, decorators)\n\n  return (\n    <Button onClick={onClick} disabled={disabled} className=\"smarthr-ui-Dialog-closeButton\">\n      {decorated.closeButtonLabel}\n    </Button>\n  )\n})\n"],"names":["tv","dialogContentInner","useCallback","useResponseStatus","useMemo","_jsxs","Section","_jsx","DialogHeading","DialogBody","Stack","Cluster","DialogContentResponseStatusMessage","memo","Button","useIntl","useDecorators"],"mappings":"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"}
+{"version":3,"file":"FormDialogContentInner.cjs","sources":["../../../../src/components/Dialog/FormDialog/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 DecoratorsType, useDecorators } from '../../../hooks/useDecorators'\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\nexport type AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** アクションボタンのラベル */\n    actionText: ReactNode\n    /** アクションボタンのスタイル */\n    actionTheme?: 'primary' | 'secondary' | 'danger'\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param e フォームイベント\n     * @param helpers ダイアログ操作のためのヘルパー関数\n     */\n    onSubmit: (e: FormEvent<HTMLFormElement>, helpers: FormDialogHelpers) => void\n    /** アクションボタンを無効にするかどうか */\n    actionDisabled?: boolean\n    /** 閉じるボタンを無効にするかどうか */\n    closeDisabled?: boolean\n    /** ダイアログフッターの左端操作領域 */\n    subActionArea?: ReactNode\n    /** コンポーネント内の文言を変更するための関数を設定 */\n    decorators?: DecoratorsType<'closeButtonLabel'>\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  actionText,\n  actionTheme,\n  onSubmit,\n  onClickClose,\n  responseStatus,\n  actionDisabled,\n  closeDisabled,\n  subActionArea,\n  decorators,\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              closeDisabled={closeDisabled}\n              actionDisabled={actionDisabled}\n              loading={calculatedResponseStatus.isProcessing}\n              actionTheme={actionTheme}\n              decorators={decorators}\n              actionText={actionText}\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<\n    FormDialogContentInnerProps,\n    | 'onClickClose'\n    | 'closeDisabled'\n    | 'actionDisabled'\n    | 'actionTheme'\n    | 'decorators'\n    | 'actionText'\n  > & { loading: boolean; className: string }\n>(\n  ({\n    onClickClose,\n    closeDisabled,\n    actionDisabled,\n    loading,\n    actionTheme,\n    decorators,\n    actionText,\n    className,\n  }) => (\n    <Cluster gap={ACTION_AREA_CLUSTER_GAP} className={className}>\n      <CloseButton\n        onClick={onClickClose}\n        disabled={closeDisabled || loading}\n        decorators={decorators}\n      />\n      <ActionButton variant={actionTheme} disabled={actionDisabled} loading={loading}>\n        {actionText}\n      </ActionButton>\n    </Cluster>\n  ),\n)\n\nconst ActionButton = memo<\n  PropsWithChildren<{\n    variant: FormDialogContentInnerProps['actionTheme']\n    disabled: FormDialogContentInnerProps['actionDisabled']\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  Pick<FormDialogContentInnerProps, 'decorators'> & {\n    onClick: FormDialogContentInnerProps['onClickClose']\n    disabled: boolean\n  }\n>(({ onClick, disabled, decorators }) => {\n  const { localize } = useIntl()\n\n  const decoratorDefaultTexts = useMemo(\n    () => ({\n      closeButtonLabel: localize({\n        id: 'smarthr-ui/FormDialog/closeButtonLabel',\n        defaultText: 'キャンセル',\n      }),\n    }),\n    [localize],\n  )\n\n  const decorated = useDecorators(decoratorDefaultTexts, decorators)\n\n  return (\n    <Button onClick={onClick} disabled={disabled} className=\"smarthr-ui-Dialog-closeButton\">\n      {decorated.closeButtonLabel}\n    </Button>\n  )\n})\n"],"names":["tv","dialogContentInner","useCallback","useResponseStatus","useMemo","_jsxs","Section","_jsx","DialogHeading","DialogBody","Stack","Cluster","DialogContentResponseStatusMessage","memo","Button","useIntl","useDecorators"],"mappings":"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"}

package/lib/components/Dialog/FormDialog/FormDialogContentInner.d.ts

@@ -3,6 +3,9 @@ import { type DecoratorsType } from '../../../hooks/useDecorators';
 import { type ResponseStatus } from '../../../hooks/useResponseStatus';
 import { type Props as DialogBodyProps } from '../DialogBody';
 import { type Props as DialogHeadingProps } from '../DialogHeading';
+export type FormDialogHelpers = {
+    close: () => void;
+};
 export type AbstractProps = PropsWithChildren<DialogBodyProps & {
     /** ダイアログタイトル */
     heading: DialogHeadingProps;
@@ -12,9 +15,10 @@ export type AbstractProps = PropsWithChildren<DialogBodyProps & {
     actionTheme?: 'primary' | 'secondary' | 'danger';
     /**
      * アクションボタンをクリックした時に発火するコールバック関数
-     * @param closeDialog ダイアログを閉じる関数
+     * @param e フォームイベント
+     * @param helpers ダイアログ操作のためのヘルパー関数
      */
-    onSubmit: (closeDialog: () => void, e: FormEvent<HTMLFormElement>) => void;
+    onSubmit: (e: FormEvent<HTMLFormElement>, helpers: FormDialogHelpers) => void;
     /** アクションボタンを無効にするかどうか */
     actionDisabled?: boolean;
     /** 閉じるボタンを無効にするかどうか */

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

@@ -36,7 +36,7 @@ const FormDialogContentInner = ({ children, heading, contentBgColor, contentPadd
         // HINT: React Portals などで擬似的にformがネストしている場合など、stopPropagationを実行しないと
         // 親formが意図せずsubmitされてしまう場合がある
         e.stopPropagation();
-        onSubmit(onClickClose, e);
+        onSubmit(e, { close: onClickClose });
     }, [onSubmit, onClickClose]);
     const calculatedResponseStatus = useResponseStatus(responseStatus);
     const styles = useMemo(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"FormDialogContentInner.js","sources":["../../../../src/components/Dialog/FormDialog/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 DecoratorsType, useDecorators } from '../../../hooks/useDecorators'\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 AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** アクションボタンのラベル */\n    actionText: ReactNode\n    /** アクションボタンのスタイル */\n    actionTheme?: 'primary' | 'secondary' | 'danger'\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param closeDialog ダイアログを閉じる関数\n     */\n    onSubmit: (closeDialog: () => void, e: FormEvent<HTMLFormElement>) => void\n    /** アクションボタンを無効にするかどうか */\n    actionDisabled?: boolean\n    /** 閉じるボタンを無効にするかどうか */\n    closeDisabled?: boolean\n    /** ダイアログフッターの左端操作領域 */\n    subActionArea?: ReactNode\n    /** コンポーネント内の文言を変更するための関数を設定 */\n    decorators?: DecoratorsType<'closeButtonLabel'>\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  actionText,\n  actionTheme,\n  onSubmit,\n  onClickClose,\n  responseStatus,\n  actionDisabled,\n  closeDisabled,\n  subActionArea,\n  decorators,\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(onClickClose, e)\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              closeDisabled={closeDisabled}\n              actionDisabled={actionDisabled}\n              loading={calculatedResponseStatus.isProcessing}\n              actionTheme={actionTheme}\n              decorators={decorators}\n              actionText={actionText}\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<\n    FormDialogContentInnerProps,\n    | 'onClickClose'\n    | 'closeDisabled'\n    | 'actionDisabled'\n    | 'actionTheme'\n    | 'decorators'\n    | 'actionText'\n  > & { loading: boolean; className: string }\n>(\n  ({\n    onClickClose,\n    closeDisabled,\n    actionDisabled,\n    loading,\n    actionTheme,\n    decorators,\n    actionText,\n    className,\n  }) => (\n    <Cluster gap={ACTION_AREA_CLUSTER_GAP} className={className}>\n      <CloseButton\n        onClick={onClickClose}\n        disabled={closeDisabled || loading}\n        decorators={decorators}\n      />\n      <ActionButton variant={actionTheme} disabled={actionDisabled} loading={loading}>\n        {actionText}\n      </ActionButton>\n    </Cluster>\n  ),\n)\n\nconst ActionButton = memo<\n  PropsWithChildren<{\n    variant: FormDialogContentInnerProps['actionTheme']\n    disabled: FormDialogContentInnerProps['actionDisabled']\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  Pick<FormDialogContentInnerProps, 'decorators'> & {\n    onClick: FormDialogContentInnerProps['onClickClose']\n    disabled: boolean\n  }\n>(({ onClick, disabled, decorators }) => {\n  const { localize } = useIntl()\n\n  const decoratorDefaultTexts = useMemo(\n    () => ({\n      closeButtonLabel: localize({\n        id: 'smarthr-ui/FormDialog/closeButtonLabel',\n        defaultText: 'キャンセル',\n      }),\n    }),\n    [localize],\n  )\n\n  const decorated = useDecorators(decoratorDefaultTexts, decorators)\n\n  return (\n    <Button onClick={onClick} disabled={disabled} className=\"smarthr-ui-Dialog-closeButton\">\n      {decorated.closeButtonLabel}\n    </Button>\n  )\n})\n"],"names":["tv","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,MAAM,uBAAuB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAW;AAEhE,MAAM,sBAAsB,GAAGA,EAAE,CAAC;AAChC,IAAA,MAAM,EAAE,kBAAkB;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,UAAU,EACV,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,cAAc,EACd,aAAa,EACb,aAAa,EACb,UAAU,GACX,KAAI;AACH,IAAA,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,CAA6B,KAAI;QAChC,CAAC,CAAC,cAAc,EAAE;;;QAGlB,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;AAC3B,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,YAAY,CAAC,CACzB;AAED,IAAA,MAAM,wBAAwB,GAAG,iBAAiB,CAAC,cAAc,CAAC;AAElE,IAAA,MAAM,MAAM,GAAG,OAAO,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,IAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,QAAA,EAAA,CAChCC,GAAA,CAAC,aAAa,EAAA,EAAA,GAAK,OAAO,EAAA,CAAI,EAC9BD,IAAA,CAAA,MAAA,EAAA,EAAM,QAAQ,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,QAAA,EAAA,CACxDC,GAAA,CAAC,UAAU,EAAA,EAAC,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAA,QAAA,EACvE,QAAQ,EAAA,CACE,EACbD,IAAA,CAAC,KAAK,EAAA,EAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,EAAA,QAAA,EAAA,CAC3CA,IAAA,CAAC,OAAO,EAAA,EAAC,OAAO,EAAC,eAAe,EAAA,QAAA,EAAA,CAC7B,aAAa,EACdC,GAAA,CAAC,iBAAiB,EAAA,EAChB,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,wBAAwB,CAAC,YAAY,EAC9C,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,MAAM,CAAC,UAAU,EAAA,CAC5B,CAAA,EAAA,CACM,EACVA,GAAA,CAAC,kCAAkC,EAAA,EACjC,cAAc,EAAE,wBAAwB,EACxC,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,CACzB,CAAA,EAAA,CACI,CAAA,EAAA,CACH,CAAA,EAAA,CACC;AAEd;AAEA,MAAM,iBAAiB,GAAG,IAAI,CAW5B,CAAC,EACC,YAAY,EACZ,aAAa,EACb,cAAc,EACd,OAAO,EACP,WAAW,EACX,UAAU,EACV,UAAU,EACV,SAAS,GACV,MACCD,IAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAE,uBAAuB,EAAE,SAAS,EAAE,SAAS,EAAA,QAAA,EAAA,CACzDC,GAAA,CAAC,WAAW,IACV,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,aAAa,IAAI,OAAO,EAClC,UAAU,EAAE,UAAU,EAAA,CACtB,EACFA,GAAA,CAAC,YAAY,EAAA,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,YAC3E,UAAU,EAAA,CACE,CAAA,EAAA,CACP,CACX,CACF;AAED,MAAM,YAAY,GAAG,IAAI,CAMvB,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MACrDA,GAAA,CAAC,MAAM,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,GAAG,IAAI,CAKtB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAI;AACtC,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE;AAE9B,IAAA,MAAM,qBAAqB,GAAG,OAAO,CACnC,OAAO;QACL,gBAAgB,EAAE,QAAQ,CAAC;AACzB,YAAA,EAAE,EAAE,wCAAwC;AAC5C,YAAA,WAAW,EAAE,OAAO;SACrB,CAAC;AACH,KAAA,CAAC,EACF,CAAC,QAAQ,CAAC,CACX;IAED,MAAM,SAAS,GAAG,aAAa,CAAC,qBAAqB,EAAE,UAAU,CAAC;IAElE,QACEA,IAAC,MAAM,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,+BAA+B,EAAA,QAAA,EACpF,SAAS,CAAC,gBAAgB,EAAA,CACpB;AAEb,CAAC,CAAC;;;;"}
+{"version":3,"file":"FormDialogContentInner.js","sources":["../../../../src/components/Dialog/FormDialog/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 DecoratorsType, useDecorators } from '../../../hooks/useDecorators'\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\nexport type AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** アクションボタンのラベル */\n    actionText: ReactNode\n    /** アクションボタンのスタイル */\n    actionTheme?: 'primary' | 'secondary' | 'danger'\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param e フォームイベント\n     * @param helpers ダイアログ操作のためのヘルパー関数\n     */\n    onSubmit: (e: FormEvent<HTMLFormElement>, helpers: FormDialogHelpers) => void\n    /** アクションボタンを無効にするかどうか */\n    actionDisabled?: boolean\n    /** 閉じるボタンを無効にするかどうか */\n    closeDisabled?: boolean\n    /** ダイアログフッターの左端操作領域 */\n    subActionArea?: ReactNode\n    /** コンポーネント内の文言を変更するための関数を設定 */\n    decorators?: DecoratorsType<'closeButtonLabel'>\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  actionText,\n  actionTheme,\n  onSubmit,\n  onClickClose,\n  responseStatus,\n  actionDisabled,\n  closeDisabled,\n  subActionArea,\n  decorators,\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              closeDisabled={closeDisabled}\n              actionDisabled={actionDisabled}\n              loading={calculatedResponseStatus.isProcessing}\n              actionTheme={actionTheme}\n              decorators={decorators}\n              actionText={actionText}\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<\n    FormDialogContentInnerProps,\n    | 'onClickClose'\n    | 'closeDisabled'\n    | 'actionDisabled'\n    | 'actionTheme'\n    | 'decorators'\n    | 'actionText'\n  > & { loading: boolean; className: string }\n>(\n  ({\n    onClickClose,\n    closeDisabled,\n    actionDisabled,\n    loading,\n    actionTheme,\n    decorators,\n    actionText,\n    className,\n  }) => (\n    <Cluster gap={ACTION_AREA_CLUSTER_GAP} className={className}>\n      <CloseButton\n        onClick={onClickClose}\n        disabled={closeDisabled || loading}\n        decorators={decorators}\n      />\n      <ActionButton variant={actionTheme} disabled={actionDisabled} loading={loading}>\n        {actionText}\n      </ActionButton>\n    </Cluster>\n  ),\n)\n\nconst ActionButton = memo<\n  PropsWithChildren<{\n    variant: FormDialogContentInnerProps['actionTheme']\n    disabled: FormDialogContentInnerProps['actionDisabled']\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  Pick<FormDialogContentInnerProps, 'decorators'> & {\n    onClick: FormDialogContentInnerProps['onClickClose']\n    disabled: boolean\n  }\n>(({ onClick, disabled, decorators }) => {\n  const { localize } = useIntl()\n\n  const decoratorDefaultTexts = useMemo(\n    () => ({\n      closeButtonLabel: localize({\n        id: 'smarthr-ui/FormDialog/closeButtonLabel',\n        defaultText: 'キャンセル',\n      }),\n    }),\n    [localize],\n  )\n\n  const decorated = useDecorators(decoratorDefaultTexts, decorators)\n\n  return (\n    <Button onClick={onClick} disabled={disabled} className=\"smarthr-ui-Dialog-closeButton\">\n      {decorated.closeButtonLabel}\n    </Button>\n  )\n})\n"],"names":["tv","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,MAAM,uBAAuB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAW;AAEhE,MAAM,sBAAsB,GAAGA,EAAE,CAAC;AAChC,IAAA,MAAM,EAAE,kBAAkB;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,UAAU,EACV,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,cAAc,EACd,aAAa,EACb,aAAa,EACb,UAAU,GACX,KAAI;AACH,IAAA,MAAM,kBAAkB,GAAG,WAAW,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,GAAG,iBAAiB,CAAC,cAAc,CAAC;AAElE,IAAA,MAAM,MAAM,GAAG,OAAO,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,IAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,QAAA,EAAA,CAChCC,GAAA,CAAC,aAAa,EAAA,EAAA,GAAK,OAAO,EAAA,CAAI,EAC9BD,IAAA,CAAA,MAAA,EAAA,EAAM,QAAQ,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,QAAA,EAAA,CACxDC,GAAA,CAAC,UAAU,EAAA,EAAC,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAA,QAAA,EACvE,QAAQ,EAAA,CACE,EACbD,IAAA,CAAC,KAAK,EAAA,EAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,EAAA,QAAA,EAAA,CAC3CA,IAAA,CAAC,OAAO,EAAA,EAAC,OAAO,EAAC,eAAe,EAAA,QAAA,EAAA,CAC7B,aAAa,EACdC,GAAA,CAAC,iBAAiB,EAAA,EAChB,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,wBAAwB,CAAC,YAAY,EAC9C,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,MAAM,CAAC,UAAU,EAAA,CAC5B,CAAA,EAAA,CACM,EACVA,GAAA,CAAC,kCAAkC,EAAA,EACjC,cAAc,EAAE,wBAAwB,EACxC,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,CACzB,CAAA,EAAA,CACI,CAAA,EAAA,CACH,CAAA,EAAA,CACC;AAEd;AAEA,MAAM,iBAAiB,GAAG,IAAI,CAW5B,CAAC,EACC,YAAY,EACZ,aAAa,EACb,cAAc,EACd,OAAO,EACP,WAAW,EACX,UAAU,EACV,UAAU,EACV,SAAS,GACV,MACCD,IAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAE,uBAAuB,EAAE,SAAS,EAAE,SAAS,EAAA,QAAA,EAAA,CACzDC,GAAA,CAAC,WAAW,IACV,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,aAAa,IAAI,OAAO,EAClC,UAAU,EAAE,UAAU,EAAA,CACtB,EACFA,GAAA,CAAC,YAAY,EAAA,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,YAC3E,UAAU,EAAA,CACE,CAAA,EAAA,CACP,CACX,CACF;AAED,MAAM,YAAY,GAAG,IAAI,CAMvB,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MACrDA,GAAA,CAAC,MAAM,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,GAAG,IAAI,CAKtB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAI;AACtC,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE;AAE9B,IAAA,MAAM,qBAAqB,GAAG,OAAO,CACnC,OAAO;QACL,gBAAgB,EAAE,QAAQ,CAAC;AACzB,YAAA,EAAE,EAAE,wCAAwC;AAC5C,YAAA,WAAW,EAAE,OAAO;SACrB,CAAC;AACH,KAAA,CAAC,EACF,CAAC,QAAQ,CAAC,CACX;IAED,MAAM,SAAS,GAAG,aAAa,CAAC,qBAAqB,EAAE,UAAU,CAAC;IAElE,QACEA,IAAC,MAAM,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,+BAA+B,EAAA,QAAA,EACpF,SAAS,CAAC,gBAAgB,EAAA,CACpB;AAEb,CAAC,CAAC;;;;"}

package/lib/components/Dialog/StepFormDialog/StepFormDialog.cjs

@@ -20,12 +20,11 @@ const StepFormDialog = ({ children, heading: orgHeading, stepLength, contentBgCo
             onClickClose();
         }
     }, [isOpen, onClickClose]);
-    const onDelegateSubmit = React.useCallback((close, e, currentStep) => {
+    const onDelegateSubmit = React.useCallback((e, helpers) => {
         if (isOpen) {
             focusTrapRef.current?.focus();
-            return onSubmit(close, e, currentStep);
+            onSubmit(e, helpers);
         }
-        return undefined;
     }, [onSubmit, isOpen]);
     const actualOnClickBack = React.useCallback(() => {
         if (isOpen) {

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

@@ -1 +1 @@
-{"version":3,"file":"StepFormDialog.cjs","sources":["../../../../src/components/Dialog/StepFormDialog/StepFormDialog.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type FormEvent,\n  type ReactNode,\n  useCallback,\n  useRef,\n} from 'react'\n\nimport { DialogContentInner } from '../DialogContentInner'\nimport { useDialogPortal } from '../useDialogPortal'\nimport { useObjectHeading } from '../useObjectHeading'\n\nimport {\n  StepFormDialogContentInner,\n  type StepFormDialogContentInnerProps,\n} from './StepFormDialogContentInner'\nimport { StepFormDialogProvider, type StepItem } from './StepFormDialogProvider'\n\nimport type { FocusTrapRef } from '../FocusTrap'\nimport type { DialogProps /** コンテンツなにもないDialogの基本props */ } from '../types'\n\ntype ObjectHeadingType = Omit<StepFormDialogContentInnerProps['heading'], 'id'>\ntype HeadingType = ReactNode | ObjectHeadingType\n\ntype AbstractProps = Omit<StepFormDialogContentInnerProps, 'heading' | 'activeStep'> &\n  DialogProps & {\n    heading: HeadingType\n  }\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nconst headingObjectConverter = (text: ReactNode) => ({ text })\n\nexport const StepFormDialog: FC<Props> = ({\n  children,\n  heading: orgHeading,\n  stepLength,\n  contentBgColor,\n  contentPadding,\n  actionTheme,\n  submitLabel,\n  firstStep,\n  onSubmit,\n  onClickClose,\n  onClickBack,\n  onPressEscape = onClickClose,\n  responseStatus,\n  actionDisabled = false,\n  closeDisabled,\n  className,\n  portalParent,\n  decorators,\n  id,\n  isOpen,\n  ...rest\n}) => {\n  const { createPortal } = useDialogPortal(portalParent, id)\n  const heading = useObjectHeading<HeadingType, ObjectHeadingType>(\n    orgHeading,\n    headingObjectConverter,\n  )\n\n  const focusTrapRef = useRef<FocusTrapRef>(null)\n\n  const actualOnClickClose = useCallback(() => {\n    if (isOpen) {\n      focusTrapRef.current?.focus()\n      onClickClose()\n    }\n  }, [isOpen, onClickClose])\n\n  const onDelegateSubmit = useCallback(\n    (close: () => void, e: FormEvent<HTMLFormElement>, currentStep: StepItem) => {\n      if (isOpen) {\n        focusTrapRef.current?.focus()\n\n        return onSubmit(close, e, currentStep)\n      }\n\n      return undefined\n    },\n    [onSubmit, isOpen],\n  )\n\n  const actualOnClickBack = useCallback(() => {\n    if (isOpen) {\n      focusTrapRef.current?.focus()\n      onClickBack?.()\n    }\n  }, [isOpen, onClickBack])\n\n  return createPortal(\n    <StepFormDialogProvider firstStep={firstStep}>\n      <DialogContentInner\n        {...rest}\n        isOpen={isOpen}\n        ariaLabelledby={heading.id}\n        className={className}\n        onPressEscape={closeDisabled ? undefined : onPressEscape}\n        focusTrapRef={focusTrapRef}\n      >\n        <StepFormDialogContentInner\n          heading={heading}\n          contentBgColor={contentBgColor}\n          contentPadding={contentPadding}\n          firstStep={firstStep}\n          stepLength={stepLength}\n          actionTheme={actionTheme}\n          actionDisabled={actionDisabled}\n          closeDisabled={closeDisabled}\n          submitLabel={submitLabel}\n          onClickClose={actualOnClickClose}\n          onSubmit={onDelegateSubmit}\n          onClickBack={actualOnClickBack}\n          responseStatus={responseStatus}\n          decorators={decorators}\n        >\n          {children}\n        </StepFormDialogContentInner>\n      </DialogContentInner>\n    </StepFormDialogProvider>,\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAiCA;AAEO;;;AA6BL;AAEA;;AAEI;AACA;;AAEJ;;;AAKM;;;AAKF;AACF;AAIF;;AAEI;;;AAGJ;;AAiCF;;"}
+{"version":3,"file":"StepFormDialog.cjs","sources":["../../../../src/components/Dialog/StepFormDialog/StepFormDialog.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type FormEvent,\n  type ReactNode,\n  useCallback,\n  useRef,\n} from 'react'\n\nimport { DialogContentInner } from '../DialogContentInner'\nimport { useDialogPortal } from '../useDialogPortal'\nimport { useObjectHeading } from '../useObjectHeading'\n\nimport {\n  StepFormDialogContentInner,\n  type StepFormDialogContentInnerProps,\n} from './StepFormDialogContentInner'\nimport { StepFormDialogProvider } from './StepFormDialogProvider'\n\nimport type { FocusTrapRef } from '../FocusTrap'\nimport type { DialogProps /** コンテンツなにもないDialogの基本props */ } from '../types'\n\ntype ObjectHeadingType = Omit<StepFormDialogContentInnerProps['heading'], 'id'>\ntype HeadingType = ReactNode | ObjectHeadingType\n\ntype AbstractProps = Omit<StepFormDialogContentInnerProps, 'heading' | 'activeStep'> &\n  DialogProps & {\n    heading: HeadingType\n  }\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nconst headingObjectConverter = (text: ReactNode) => ({ text })\n\nexport const StepFormDialog: FC<Props> = ({\n  children,\n  heading: orgHeading,\n  stepLength,\n  contentBgColor,\n  contentPadding,\n  actionTheme,\n  submitLabel,\n  firstStep,\n  onSubmit,\n  onClickClose,\n  onClickBack,\n  onPressEscape = onClickClose,\n  responseStatus,\n  actionDisabled = false,\n  closeDisabled,\n  className,\n  portalParent,\n  decorators,\n  id,\n  isOpen,\n  ...rest\n}) => {\n  const { createPortal } = useDialogPortal(portalParent, id)\n  const heading = useObjectHeading<HeadingType, ObjectHeadingType>(\n    orgHeading,\n    headingObjectConverter,\n  )\n\n  const focusTrapRef = useRef<FocusTrapRef>(null)\n\n  const actualOnClickClose = useCallback(() => {\n    if (isOpen) {\n      focusTrapRef.current?.focus()\n      onClickClose()\n    }\n  }, [isOpen, onClickClose])\n\n  const onDelegateSubmit = useCallback(\n    (e: FormEvent<HTMLFormElement>, helpers: Parameters<typeof onSubmit>[1]) => {\n      if (isOpen) {\n        focusTrapRef.current?.focus()\n        onSubmit(e, helpers)\n      }\n    },\n    [onSubmit, isOpen],\n  )\n\n  const actualOnClickBack = useCallback(() => {\n    if (isOpen) {\n      focusTrapRef.current?.focus()\n      onClickBack?.()\n    }\n  }, [isOpen, onClickBack])\n\n  return createPortal(\n    <StepFormDialogProvider firstStep={firstStep}>\n      <DialogContentInner\n        {...rest}\n        isOpen={isOpen}\n        ariaLabelledby={heading.id}\n        className={className}\n        onPressEscape={closeDisabled ? undefined : onPressEscape}\n        focusTrapRef={focusTrapRef}\n      >\n        <StepFormDialogContentInner\n          heading={heading}\n          contentBgColor={contentBgColor}\n          contentPadding={contentPadding}\n          firstStep={firstStep}\n          stepLength={stepLength}\n          actionTheme={actionTheme}\n          actionDisabled={actionDisabled}\n          closeDisabled={closeDisabled}\n          submitLabel={submitLabel}\n          onClickClose={actualOnClickClose}\n          onSubmit={onDelegateSubmit}\n          onClickBack={actualOnClickBack}\n          responseStatus={responseStatus}\n          decorators={decorators}\n        >\n          {children}\n        </StepFormDialogContentInner>\n      </DialogContentInner>\n    </StepFormDialogProvider>,\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAiCA;AAEO;;;AA6BL;AAEA;;AAEI;AACA;;AAEJ;;;AAKM;AACA;;AAEJ;AAIF;;AAEI;;;AAGJ;;AAiCF;;"}

package/lib/components/Dialog/StepFormDialog/StepFormDialog.js

@@ -18,12 +18,11 @@ const StepFormDialog = ({ children, heading: orgHeading, stepLength, contentBgCo
             onClickClose();
         }
     }, [isOpen, onClickClose]);
-    const onDelegateSubmit = useCallback((close, e, currentStep) => {
+    const onDelegateSubmit = useCallback((e, helpers) => {
         if (isOpen) {
             focusTrapRef.current?.focus();
-            return onSubmit(close, e, currentStep);
+            onSubmit(e, helpers);
         }
-        return undefined;
     }, [onSubmit, isOpen]);
     const actualOnClickBack = useCallback(() => {
         if (isOpen) {

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

@@ -1 +1 @@
-{"version":3,"file":"StepFormDialog.js","sources":["../../../../src/components/Dialog/StepFormDialog/StepFormDialog.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type FormEvent,\n  type ReactNode,\n  useCallback,\n  useRef,\n} from 'react'\n\nimport { DialogContentInner } from '../DialogContentInner'\nimport { useDialogPortal } from '../useDialogPortal'\nimport { useObjectHeading } from '../useObjectHeading'\n\nimport {\n  StepFormDialogContentInner,\n  type StepFormDialogContentInnerProps,\n} from './StepFormDialogContentInner'\nimport { StepFormDialogProvider, type StepItem } from './StepFormDialogProvider'\n\nimport type { FocusTrapRef } from '../FocusTrap'\nimport type { DialogProps /** コンテンツなにもないDialogの基本props */ } from '../types'\n\ntype ObjectHeadingType = Omit<StepFormDialogContentInnerProps['heading'], 'id'>\ntype HeadingType = ReactNode | ObjectHeadingType\n\ntype AbstractProps = Omit<StepFormDialogContentInnerProps, 'heading' | 'activeStep'> &\n  DialogProps & {\n    heading: HeadingType\n  }\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nconst headingObjectConverter = (text: ReactNode) => ({ text })\n\nexport const StepFormDialog: FC<Props> = ({\n  children,\n  heading: orgHeading,\n  stepLength,\n  contentBgColor,\n  contentPadding,\n  actionTheme,\n  submitLabel,\n  firstStep,\n  onSubmit,\n  onClickClose,\n  onClickBack,\n  onPressEscape = onClickClose,\n  responseStatus,\n  actionDisabled = false,\n  closeDisabled,\n  className,\n  portalParent,\n  decorators,\n  id,\n  isOpen,\n  ...rest\n}) => {\n  const { createPortal } = useDialogPortal(portalParent, id)\n  const heading = useObjectHeading<HeadingType, ObjectHeadingType>(\n    orgHeading,\n    headingObjectConverter,\n  )\n\n  const focusTrapRef = useRef<FocusTrapRef>(null)\n\n  const actualOnClickClose = useCallback(() => {\n    if (isOpen) {\n      focusTrapRef.current?.focus()\n      onClickClose()\n    }\n  }, [isOpen, onClickClose])\n\n  const onDelegateSubmit = useCallback(\n    (close: () => void, e: FormEvent<HTMLFormElement>, currentStep: StepItem) => {\n      if (isOpen) {\n        focusTrapRef.current?.focus()\n\n        return onSubmit(close, e, currentStep)\n      }\n\n      return undefined\n    },\n    [onSubmit, isOpen],\n  )\n\n  const actualOnClickBack = useCallback(() => {\n    if (isOpen) {\n      focusTrapRef.current?.focus()\n      onClickBack?.()\n    }\n  }, [isOpen, onClickBack])\n\n  return createPortal(\n    <StepFormDialogProvider firstStep={firstStep}>\n      <DialogContentInner\n        {...rest}\n        isOpen={isOpen}\n        ariaLabelledby={heading.id}\n        className={className}\n        onPressEscape={closeDisabled ? undefined : onPressEscape}\n        focusTrapRef={focusTrapRef}\n      >\n        <StepFormDialogContentInner\n          heading={heading}\n          contentBgColor={contentBgColor}\n          contentPadding={contentPadding}\n          firstStep={firstStep}\n          stepLength={stepLength}\n          actionTheme={actionTheme}\n          actionDisabled={actionDisabled}\n          closeDisabled={closeDisabled}\n          submitLabel={submitLabel}\n          onClickClose={actualOnClickClose}\n          onSubmit={onDelegateSubmit}\n          onClickBack={actualOnClickBack}\n          responseStatus={responseStatus}\n          decorators={decorators}\n        >\n          {children}\n        </StepFormDialogContentInner>\n      </DialogContentInner>\n    </StepFormDialogProvider>,\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAiCA;AAEO;;;AA6BL;AAEA;;AAEI;AACA;;AAEJ;;;AAKM;;;AAKF;AACF;AAIF;;AAEI;;;AAGJ;;AAiCF;;"}
+{"version":3,"file":"StepFormDialog.js","sources":["../../../../src/components/Dialog/StepFormDialog/StepFormDialog.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type FormEvent,\n  type ReactNode,\n  useCallback,\n  useRef,\n} from 'react'\n\nimport { DialogContentInner } from '../DialogContentInner'\nimport { useDialogPortal } from '../useDialogPortal'\nimport { useObjectHeading } from '../useObjectHeading'\n\nimport {\n  StepFormDialogContentInner,\n  type StepFormDialogContentInnerProps,\n} from './StepFormDialogContentInner'\nimport { StepFormDialogProvider } from './StepFormDialogProvider'\n\nimport type { FocusTrapRef } from '../FocusTrap'\nimport type { DialogProps /** コンテンツなにもないDialogの基本props */ } from '../types'\n\ntype ObjectHeadingType = Omit<StepFormDialogContentInnerProps['heading'], 'id'>\ntype HeadingType = ReactNode | ObjectHeadingType\n\ntype AbstractProps = Omit<StepFormDialogContentInnerProps, 'heading' | 'activeStep'> &\n  DialogProps & {\n    heading: HeadingType\n  }\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nconst headingObjectConverter = (text: ReactNode) => ({ text })\n\nexport const StepFormDialog: FC<Props> = ({\n  children,\n  heading: orgHeading,\n  stepLength,\n  contentBgColor,\n  contentPadding,\n  actionTheme,\n  submitLabel,\n  firstStep,\n  onSubmit,\n  onClickClose,\n  onClickBack,\n  onPressEscape = onClickClose,\n  responseStatus,\n  actionDisabled = false,\n  closeDisabled,\n  className,\n  portalParent,\n  decorators,\n  id,\n  isOpen,\n  ...rest\n}) => {\n  const { createPortal } = useDialogPortal(portalParent, id)\n  const heading = useObjectHeading<HeadingType, ObjectHeadingType>(\n    orgHeading,\n    headingObjectConverter,\n  )\n\n  const focusTrapRef = useRef<FocusTrapRef>(null)\n\n  const actualOnClickClose = useCallback(() => {\n    if (isOpen) {\n      focusTrapRef.current?.focus()\n      onClickClose()\n    }\n  }, [isOpen, onClickClose])\n\n  const onDelegateSubmit = useCallback(\n    (e: FormEvent<HTMLFormElement>, helpers: Parameters<typeof onSubmit>[1]) => {\n      if (isOpen) {\n        focusTrapRef.current?.focus()\n        onSubmit(e, helpers)\n      }\n    },\n    [onSubmit, isOpen],\n  )\n\n  const actualOnClickBack = useCallback(() => {\n    if (isOpen) {\n      focusTrapRef.current?.focus()\n      onClickBack?.()\n    }\n  }, [isOpen, onClickBack])\n\n  return createPortal(\n    <StepFormDialogProvider firstStep={firstStep}>\n      <DialogContentInner\n        {...rest}\n        isOpen={isOpen}\n        ariaLabelledby={heading.id}\n        className={className}\n        onPressEscape={closeDisabled ? undefined : onPressEscape}\n        focusTrapRef={focusTrapRef}\n      >\n        <StepFormDialogContentInner\n          heading={heading}\n          contentBgColor={contentBgColor}\n          contentPadding={contentPadding}\n          firstStep={firstStep}\n          stepLength={stepLength}\n          actionTheme={actionTheme}\n          actionDisabled={actionDisabled}\n          closeDisabled={closeDisabled}\n          submitLabel={submitLabel}\n          onClickClose={actualOnClickClose}\n          onSubmit={onDelegateSubmit}\n          onClickBack={actualOnClickBack}\n          responseStatus={responseStatus}\n          decorators={decorators}\n        >\n          {children}\n        </StepFormDialogContentInner>\n      </DialogContentInner>\n    </StepFormDialogProvider>,\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAiCA;AAEO;;;AA6BL;AAEA;;AAEI;AACA;;AAEJ;;;AAKM;AACA;;AAEJ;AAIF;;AAEI;;;AAGJ;;AAiCF;;"}