{"version":3,"file":"FormDialogContentInner.cjs","sources":["../../../../src/components/Dialog/ControlledFormDialog/FormDialogContentInner.tsx"],"sourcesContent":["import {\n  type FC,\n  type FormEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { type 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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"}