{"version":3,"file":"ControlledStepFormDialog.cjs","sources":["../../../../src/components/Dialog/ControlledStepFormDialog/ControlledStepFormDialog.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type FormEvent,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react'\n\nimport { useIntl } from '../../../intl'\nimport { DialogContentInner } from '../DialogContentInner'\nimport { useDialogPortal } from '../useDialogPortal'\nimport { useObjectHeading } from '../useObjectHeading'\n\nimport {\n  StepFormDialogContentInner,\n  type StepFormDialogContentInnerProps,\n} from './StepFormDialogContentInner'\nimport { StepFormDialogContext, StepFormDialogProvider } from './StepFormDialogProvider'\nimport {\n  type ButtonArgType,\n  type ObjectButtonType,\n  useStepFormDialogButton,\n} from './useStepFormDialogButton'\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 DefaultTextsType = Record<\n  'closeButtonLabel' | 'nextButtonLabel' | 'backButtonLabel',\n  ReactNode\n>\n\ntype AbstractProps = Omit<\n  StepFormDialogContentInnerProps,\n  'heading' | 'activeStep' | 'submitButton' | 'closeButton' | 'backButton'\n> &\n  DialogProps & {\n    heading: HeadingType\n    submitButton: ButtonArgType | ObjectButtonType\n    closeButton?: ButtonArgType | ObjectButtonType\n    backButton?: ButtonArgType | ObjectButtonType\n  }\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nconst headingObjectConverter = (text: ReactNode) => ({ text })\n\nexport const ControlledStepFormDialog: FC<Props> = ({ portalParent, id, firstStep, ...rest }) => {\n  const { createPortal } = useDialogPortal(portalParent, id)\n\n  return createPortal(\n    <StepFormDialogProvider firstStep={firstStep}>\n      <ActualControlledStepFormDialog {...rest} id={id} firstStep={firstStep} />\n    </StepFormDialogProvider>,\n  )\n}\n\nconst ActualControlledStepFormDialog: FC<Omit<Props, 'portalParent'>> = ({\n  children,\n  heading: orgHeading,\n  stepLength,\n  contentBgColor,\n  contentPadding,\n  submitButton: originalSubmitButton,\n  closeButton: originalCloseButton,\n  backButton: originalBackButton,\n  firstStep,\n  onSubmit,\n  onClickClose,\n  onClickBack,\n  onPressEscape = onClickClose,\n  responseStatus,\n  className,\n  id,\n  isOpen,\n  ...rest\n}) => {\n  const { localize } = useIntl()\n  const defaultTexts: DefaultTextsType = useMemo(\n    () => ({\n      closeButtonLabel: localize({\n        id: 'smarthr-ui/StepFormDialog/closeButtonLabel',\n        defaultText: 'キャンセル',\n      }),\n      nextButtonLabel: localize({\n        id: 'smarthr-ui/StepFormDialog/nextButtonLabel',\n        defaultText: '次へ',\n      }),\n      backButtonLabel: localize({\n        id: 'smarthr-ui/StepFormDialog/backButtonLabel',\n        defaultText: '戻る',\n      }),\n    }),\n    [localize],\n  )\n  const { currentStep } = useContext(StepFormDialogContext)\n  const activeStep = useMemo(() => currentStep?.stepNumber ?? 1, [currentStep])\n\n  const heading = useObjectHeading<HeadingType, ObjectHeadingType>(\n    orgHeading,\n    headingObjectConverter,\n  )\n\n  const tempSubmitButton = useStepFormDialogButton({\n    button: originalSubmitButton,\n    currentStep,\n    defaultValues: {\n      text: defaultTexts.nextButtonLabel,\n      theme: 'primary' as const,\n    },\n  })\n  const submitButton = useMemo(\n    () => ({\n      ...tempSubmitButton,\n      text:\n        tempSubmitButton.functionCall.text || activeStep === stepLength\n          ? tempSubmitButton.text\n          : defaultTexts.nextButtonLabel,\n    }),\n    [tempSubmitButton, activeStep, stepLength, defaultTexts.nextButtonLabel],\n  )\n  const closeButton = useStepFormDialogButton({\n    button: originalCloseButton,\n    currentStep,\n    defaultValues: {\n      text: defaultTexts.closeButtonLabel,\n    },\n  })\n  const backButton = useStepFormDialogButton({\n    button: originalBackButton,\n    currentStep,\n    defaultValues: {\n      text: defaultTexts.backButtonLabel,\n    },\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 (\n    <DialogContentInner\n      {...rest}\n      isOpen={isOpen}\n      ariaLabelledby={heading.id}\n      className={className}\n      onPressEscape={closeButton.disabled ? undefined : onPressEscape}\n      focusTrapRef={focusTrapRef}\n    >\n      <StepFormDialogContentInner\n        heading={heading}\n        activeStep={activeStep}\n        contentBgColor={contentBgColor}\n        contentPadding={contentPadding}\n        firstStep={firstStep}\n        stepLength={stepLength}\n        submitButton={submitButton}\n        closeButton={closeButton}\n        backButton={backButton}\n        onClickClose={actualOnClickClose}\n        onSubmit={onDelegateSubmit}\n        onClickBack={actualOnClickBack}\n        responseStatus={responseStatus}\n      >\n        {children}\n      </StepFormDialogContentInner>\n    </DialogContentInner>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAoDA;AAEO;;;AAQP;AAEA;AAoBE;AACA;;AAGM;AACA;;;AAGA;AACA;;;AAGA;AACA;;AAEH;;AAIH;;;AAQE;;AAEA;;AAEE;AACD;AACF;AACD;AAEI;;;;AAKD;;AAID;;AAEA;;AAEC;AACF;;AAEC;;AAEA;;AAEC;AACF;AAED;AAEA;;AAEI;AACA;;AAEJ;;;AAKM;AACA;;AAEJ;AAIF;;AAEI;;;AAGJ;;AA8BF;;"}