feat: Step つき FormDialog の実装

packages/smarthr-ui/src/components/Dialog/Dialog.stories.tsx

@@ -4,6 +4,7 @@ import React, { ComponentProps, useRef, useState } from 'react'
 import styled, { css } from 'styled-components'
 
 import { Button } from '../Button'
+import { CheckBox } from '../CheckBox'
 import { DatePicker } from '../DatePicker'
 import { Fieldset } from '../Fieldset'
 import { FormControl } from '../FormControl'
@@ -312,6 +313,101 @@ Form_Dialog.parameters = {
   },
 }
 
+export const Form_Dialog_With_Step: StoryFn = () => {
+  const [openedDialog, setOpenedDialog] = useState<'normal' | 'opened' | null>(null)
+  const [value, setValue] = React.useState('Apple')
+  const [responseMessage, setResponseMessage] =
+    useState<ComponentProps<typeof ActionDialog>['responseMessage']>()
+  const onClickClose = () => {
+    setOpenedDialog(null)
+    setResponseMessage(undefined)
+  }
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => setValue(e.currentTarget.name)
+
+  return (
+    <Cluster>
+      <Button
+        onClick={() => setOpenedDialog('normal')}
+        aria-haspopup="dialog"
+        aria-controls="dialog-form"
+        data-test="dialog-trigger"
+      >
+        FormDialog with Step
+      </Button>
+      <FormDialog
+        isOpen={openedDialog === 'normal'}
+        title="FormDialog"
+        subtitle="副題"
+        actionText="保存"
+        decorators={{ closeButtonLabel: () => '閉じる', nextButtonLabel: () => 'Next' }}
+        onSubmit={(closeDialog, e, step) => {
+          action('executed')()
+          setResponseMessage(undefined)
+          if (step && step === 2) {
+            closeDialog()
+          }
+        }}
+        onClickClose={onClickClose}
+        responseMessage={responseMessage}
+        id="dialog-form"
+        data-test="form-dialog-content"
+        width="40em"
+        hasStep={true}
+      >
+        <Fieldset title="fruits" innerMargin={0.5}>
+          <RadioListCluster forwardedAs="ul">
+            <li>
+              <RadioButton name="Apple" checked={value === 'Apple'} onChange={onChange}>
+                Apple
+              </RadioButton>
+            </li>
+            <li>
+              <RadioButton name="Orange" checked={value === 'Orange'} onChange={onChange}>
+                Orange
+              </RadioButton>
+            </li>
+            <li>
+              <RadioButton name="Grape" checked={value === 'Grape'} onChange={onChange}>
+                Grape
+              </RadioButton>
+            </li>
+          </RadioListCluster>
+        </Fieldset>
+        <FormControl title="Sample">
+          <Input type="text" name="text" />
+        </FormControl>
+        <Fieldset title="fruits" innerMargin={0.5}>
+          <ul>
+            <li>
+              <CheckBox name="1">CheckBox</CheckBox>
+            </li>
+
+            <li>
+              <CheckBox name="error" error>
+                CheckBox / error
+              </CheckBox>
+            </li>
+
+            <li>
+              <CheckBox name="disabled" disabled>
+                CheckBox / disabled
+              </CheckBox>
+            </li>
+          </ul>
+        </Fieldset>
+      </FormDialog>
+    </Cluster>
+  )
+}
+
+Form_Dialog_With_Step.parameters = {
+  docs: {
+    description: {
+      story: '`FormDialog with step` is a form dialog that can be divided into multiple steps.',
+    },
+  },
+}
+
 export const Remote_Trigger_Form_Dialog: StoryFn = () => (
   <>
     <div>

packages/smarthr-ui/src/components/Dialog/DialogContentInner.tsx

@@ -12,7 +12,7 @@ import { tv } from 'tailwind-variants'
 import { useHandleEscape } from '../../hooks/useHandleEscape'
 
 import { DialogOverlap } from './DialogOverlap'
-import { FocusTrap } from './FocusTrap'
+import { FocusTrap, FocusTrapRef } from './FocusTrap'
 import { useBodyScrollLock } from './useBodyScrollLock'
 
 export type DialogContentInnerProps = PropsWithChildren<{
@@ -49,6 +49,10 @@ export type DialogContentInnerProps = PropsWithChildren<{
    * ダイアログの `aria-labelledby`
    */
   ariaLabelledby?: string
+  /**
+   * ダイアログトップのフォーカストラップへの ref
+   */
+  focusTrapRef?: RefObject<FocusTrapRef>
 }>
 type ElementProps = Omit<ComponentProps<'div'>, keyof DialogContentInnerProps>
 
@@ -77,6 +81,7 @@ export const DialogContentInner: FC<DialogContentInnerProps & ElementProps> = ({
   ariaLabelledby,
   children,
   className,
+  focusTrapRef,
   ...rest
 }) => {
   const { layoutStyleProps, innerStyle, backgroundStyle } = useMemo(() => {
@@ -127,7 +132,9 @@ export const DialogContentInner: FC<DialogContentInnerProps & ElementProps> = ({
           aria-modal="true"
           className={innerStyle}
         >
-          <FocusTrap firstFocusTarget={firstFocusTarget}>{children}</FocusTrap>
+          <FocusTrap ref={focusTrapRef} firstFocusTarget={firstFocusTarget}>
+            {children}
+          </FocusTrap>
         </div>
       </div>
     </DialogOverlap>

packages/smarthr-ui/src/components/Dialog/FocusTrap.tsx

@@ -1,20 +1,42 @@
-import React, { FC, PropsWithChildren, RefObject, useCallback, useEffect, useRef } from 'react'
+import React, {
+  PropsWithChildren,
+  RefObject,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react'
 
 import { tabbable } from '../../libs/tabbable'
 
 type Props = PropsWithChildren<{
   firstFocusTarget?: RefObject<HTMLElement>
 }>
 
-export const FocusTrap: FC<Props> = ({ firstFocusTarget, children }) => {
-  const ref = useRef<HTMLDivElement | null>(null)
+export type FocusTrapRef = {
+  focus: () => void
+}
+
+export const FocusTrap = forwardRef<FocusTrapRef, Props>(({ firstFocusTarget, children }, ref) => {
+  const innerRef = useRef<HTMLDivElement | null>(null)
   const dummyFocusRef = useRef<HTMLDivElement>(null)
 
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      if (firstFocusTarget?.current) {
+        firstFocusTarget.current.focus()
+      } else {
+        dummyFocusRef.current?.focus()
+      }
+    },
+  }))
+
   const handleKeyDown = useCallback((e: KeyboardEvent) => {
-    if (e.key !== 'Tab' || ref.current === null) {
+    if (e.key !== 'Tab' || innerRef.current === null) {
       return
     }
-    const tabbables = tabbable(ref.current).filter((elm) => elm.tabIndex >= 0)
+    const tabbables = tabbable(innerRef.current).filter((elm) => elm.tabIndex >= 0)
     if (tabbables.length === 0) {
       return
     }
@@ -57,10 +79,10 @@ export const FocusTrap: FC<Props> = ({ firstFocusTarget, children }) => {
   }, [firstFocusTarget])
 
   return (
-    <div ref={ref}>
+    <div ref={innerRef}>
       {/* dummy element for focus management. */}
       <div ref={dummyFocusRef} tabIndex={-1} />
       {children}
     </div>
   )
-}
+})

packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx

@@ -3,10 +3,21 @@ import React, { ComponentProps, FormEvent, useCallback, useId } from 'react'
 import { DialogContentInner } from '../DialogContentInner'
 import { DialogProps } from '../types'
 import { useDialogPortal } from '../useDialogPortal'
+import { useStepDialog } from '../useStepDialog'
 
 import { FormDialogContentInner, FormDialogContentInnerProps } from './FormDialogContentInner'
 
-type Props = Omit<FormDialogContentInnerProps, 'titleId'> & DialogProps
+type Props = Omit<FormDialogContentInnerProps, 'titleId' | 'onSubmit'> &
+  DialogProps & {
+    /**
+     * アクションボタンをクリックした時に発火するコールバック関数
+     * @param closeDialog ダイアログを閉じる関数
+     * @param activeStep hasStep:true の場合のみ、次のページ数
+     */
+    onSubmit: (closeDialog: () => void, e: FormEvent<HTMLFormElement>, activeStep?: number) => void
+    /** Stepつきダイアログか否か */
+    hasStep?: boolean
+  }
 type ElementProps = Omit<ComponentProps<'div'>, keyof Props>
 
 export const FormDialog: React.FC<Props & ElementProps> = ({
@@ -29,10 +40,20 @@ export const FormDialog: React.FC<Props & ElementProps> = ({
   portalParent,
   decorators,
   id,
+  hasStep,
   ...props
 }) => {
   const { createPortal } = useDialogPortal(portalParent, id)
   const titleId = useId()
+  const {
+    titleSuffix,
+    focusTrapRef,
+    childrenSteps,
+    activeStep,
+    getActionText,
+    handleNextSteps,
+    renderSubActionButton,
+  } = useStepDialog(children)
 
   const handleClickClose = useCallback(() => {
     if (!props.isOpen) {
@@ -47,9 +68,13 @@ export const FormDialog: React.FC<Props & ElementProps> = ({
         return
       }
 
-      onSubmit(close, e)
+      if (hasStep) {
+        handleNextSteps()
+      }
+
+      onSubmit(close, e, activeStep)
     },
-    [onSubmit, props.isOpen],
+    [onSubmit, props.isOpen, hasStep, handleNextSteps, activeStep],
   )
 
   return createPortal(
@@ -58,26 +83,27 @@ export const FormDialog: React.FC<Props & ElementProps> = ({
       ariaLabelledby={titleId}
       className={className}
       onPressEscape={onPressEscape}
+      focusTrapRef={focusTrapRef}
     >
       {/* eslint-disable-next-line smarthr/a11y-delegate-element-has-role-presentation */}
       <FormDialogContentInner
-        title={title}
+        title={hasStep ? `${title}${titleSuffix}` : title}
         titleId={titleId}
         subtitle={subtitle}
         titleTag={titleTag}
         contentBgColor={contentBgColor}
         contentPadding={contentPadding}
-        actionText={actionText}
+        actionText={hasStep ? getActionText(actionText, decorators?.nextButtonLabel) : actionText}
         actionTheme={actionTheme}
         actionDisabled={actionDisabled}
         closeDisabled={closeDisabled}
-        subActionArea={subActionArea}
+        subActionArea={hasStep ? renderSubActionButton() : subActionArea}
         onClickClose={handleClickClose}
         onSubmit={handleSubmitAction}
         responseMessage={responseMessage}
         decorators={decorators}
       >
-        {children}
+        {hasStep ? childrenSteps[activeStep] : children}
       </FormDialogContentInner>
     </DialogContentInner>,
   )

packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx

@@ -35,7 +35,7 @@ export type BaseProps = PropsWithChildren<
       /** ダイアログフッターの左端操作領域 */
       subActionArea?: ReactNode
       /** コンポーネント内の文言を変更するための関数を設定 */
-      decorators?: DecoratorsType<'closeButtonLabel'>
+      decorators?: DecoratorsType<'closeButtonLabel' | 'nextButtonLabel'>
     }
 >
 

packages/smarthr-ui/src/components/Dialog/useStepDialog.tsx

@@ -0,0 +1,67 @@
+import React, { Children, ReactNode, useCallback, useMemo, useRef, useState } from 'react'
+
+import { Button } from '../Button'
+
+import { FocusTrapRef } from './FocusTrap'
+
+import type { DecoratorType } from '../../types'
+
+const NEXT_BUTTON_LABEL = '次へ'
+
+export const useStepDialog = (children: ReactNode) => {
+  const [activeStep, setActiveStep] = useState(0)
+  const focusTrapRef = useRef<FocusTrapRef>(null)
+
+  const childrenSteps = useMemo(() => {
+    const steps: ReactNode[] = []
+    Children.map(children, (child) => {
+      steps.push(child)
+    })
+    return steps
+  }, [children])
+
+  const getActionText = (submitActionText: ReactNode, nextButtonLabel?: DecoratorType) =>
+    activeStep < childrenSteps.length - 1
+      ? nextButtonLabel
+        ? nextButtonLabel(NEXT_BUTTON_LABEL)
+        : NEXT_BUTTON_LABEL
+      : submitActionText
+
+  const handleNextSteps = useCallback(() => {
+    if (activeStep + 1 === childrenSteps.length) {
+      setActiveStep(0)
+      return
+    }
+    focusTrapRef.current?.focus()
+    setActiveStep((pre) => pre + 1)
+  }, [activeStep, childrenSteps])
+
+  const handleBackSteps = useCallback(() => {
+    if (activeStep > 0) {
+      focusTrapRef.current?.focus()
+      setActiveStep((pre) => pre - 1)
+    }
+  }, [activeStep])
+
+  const renderSubActionButton = useCallback(() => {
+    if (activeStep === 0) {
+      return null
+    }
+    return <Button onClick={handleBackSteps}>戻る</Button>
+  }, [activeStep, handleBackSteps])
+
+  const titleSuffix = useMemo(
+    () => ` (${activeStep + 1}/${childrenSteps.length})`,
+    [activeStep, childrenSteps],
+  )
+
+  return {
+    focusTrapRef,
+    activeStep,
+    childrenSteps,
+    titleSuffix,
+    getActionText,
+    handleNextSteps,
+    renderSubActionButton,
+  }
+}