From c9f8244e0075a87ebed54a64d8f7a9755abe9fb8 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 23 Jan 2025 14:01:49 +0900
Subject: [PATCH 01/11] =?UTF-8?q?chore:=20ActionDialogWithTrigger=E3=81=AE?=
 =?UTF-8?q?onClickOpen=E3=81=AEmemo=E5=8C=96=E3=82=92=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ActionDialogWithTrigger.tsx                       | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialogWithTrigger/ActionDialogWithTrigger.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialogWithTrigger/ActionDialogWithTrigger.tsx
index ee360419fe..bd3a20ec0d 100644
--- a/packages/smarthr-ui/src/components/Dialog/ActionDialogWithTrigger/ActionDialogWithTrigger.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ActionDialogWithTrigger/ActionDialogWithTrigger.tsx
@@ -21,13 +21,10 @@ export const ActionDialogWithTrigger: React.FC<
   const open = useCallback(() => setIsOpen(true), [])
   const close = useCallback(() => setIsOpen(false), [])
 
-  const onClickOpen = useCallback(() => {
-    if (onClickTrigger) {
-      return onClickTrigger(open)
-    }
-
-    open()
-  }, [onClickTrigger, open])
+  const onClickOpen = useMemo(
+    () => (onClickTrigger ? () => onClickTrigger(open) : open),
+    [onClickTrigger, open],
+  )
 
   const actualOnClickClose = useCallback(() => {
     if (onClickClose) {

From f4e9c558aea54ee1587e43ad9df77ed6980baf62 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 23 Jan 2025 14:10:26 +0900
Subject: [PATCH 02/11] =?UTF-8?q?chore:=20ActionDialogWithTrigger=E3=81=AE?=
 =?UTF-8?q?actualOnClickClose=E3=81=AEmemo=E5=8C=96=E3=82=92=E8=AA=BF?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ActionDialogWithTrigger.tsx                       | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialogWithTrigger/ActionDialogWithTrigger.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialogWithTrigger/ActionDialogWithTrigger.tsx
index bd3a20ec0d..1bd288f964 100644
--- a/packages/smarthr-ui/src/components/Dialog/ActionDialogWithTrigger/ActionDialogWithTrigger.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ActionDialogWithTrigger/ActionDialogWithTrigger.tsx
@@ -26,13 +26,10 @@ export const ActionDialogWithTrigger: React.FC<
     [onClickTrigger, open],
   )
 
-  const actualOnClickClose = useCallback(() => {
-    if (onClickClose) {
-      return onClickClose(close)
-    }
-
-    close()
-  }, [onClickClose, close])
+  const actualOnClickClose = useMemo(
+    () => (onClickClose ? () => onClickClose(close) : close),
+    [onClickClose, close],
+  )
 
   const actualOnPressEscape = useCallback(() => {
     if (onPressEscape) {

From 2db8d2b4786e7fecbd86406c5c7f313c8f057822 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 23 Jan 2025 14:30:56 +0900
Subject: [PATCH 03/11] =?UTF-8?q?chore:=20ActionDialogWithTrigger=E3=81=AE?=
 =?UTF-8?q?actualOnPressEscape=E3=81=AEmemo=E5=8C=96=E3=82=92=E8=AA=BF?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ActionDialogWithTrigger.tsx                       | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialogWithTrigger/ActionDialogWithTrigger.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialogWithTrigger/ActionDialogWithTrigger.tsx
index 1bd288f964..1f7aa68bb3 100644
--- a/packages/smarthr-ui/src/components/Dialog/ActionDialogWithTrigger/ActionDialogWithTrigger.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ActionDialogWithTrigger/ActionDialogWithTrigger.tsx
@@ -31,13 +31,10 @@ export const ActionDialogWithTrigger: React.FC<
     [onClickClose, close],
   )
 
-  const actualOnPressEscape = useCallback(() => {
-    if (onPressEscape) {
-      return onPressEscape(close)
-    }
-
-    close()
-  }, [onPressEscape, close])
+  const actualOnPressEscape = useMemo(
+    () => (onPressEscape ? () => onPressEscape(close) : close),
+    [onPressEscape, close],
+  )
 
   const actualTrigger = useMemo(
     () =>

From 5c58c1a6d4e0ba0a71ce37077903d11a1aa57e1f Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 23 Jan 2025 15:14:22 +0900
Subject: [PATCH 04/11] =?UTF-8?q?chore:=20ActionDialogContentInner?=
 =?UTF-8?q?=E3=81=AEresponseMessage=E3=81=AB=E9=96=A2=E3=81=99=E3=82=8B?=
 =?UTF-8?q?=E5=87=A6=E7=90=86=E3=82=92memo=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ActionDialog/ActionDialogContentInner.tsx | 36 +++++++++++++++----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
index 4d83d9a9bf..6181a24923 100644
--- a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
@@ -61,7 +61,31 @@ export const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({
   const handleClickAction = useCallback(() => {
     onClickAction(onClickClose)
   }, [onClickAction, onClickClose])
-  const isRequestProcessing = responseMessage && responseMessage.status === 'processing'
+
+  const calcedResponseStatus = useMemo(() => {
+    if (!responseMessage) {
+      return {
+        isProcessing: false,
+        visibleMessage: false,
+      }
+    }
+
+    if (responseMessage.status === 'processing') {
+      return {
+        isProcessing: true,
+        visibleMessage: false,
+      }
+    }
+
+    return {
+      isProcessing: false,
+      visibleMessage: true,
+      // HINT: statusがprocessingではない === success or errorであることが確定する
+      // success or error の場合、text属性も必ず存在する
+      status: responseMessage.status as 'success' | 'error',
+      message: (responseMessage as { text: string }).text,
+    }
+  }, [responseMessage])
 
   const { wrapper, actionArea, buttonArea, message } = dialogContentInner()
 
@@ -78,7 +102,7 @@ export const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({
           <Cluster gap={{ row: 0.5, column: 1 }} className={buttonArea()}>
             <Button
               onClick={onClickClose}
-              disabled={closeDisabled || isRequestProcessing}
+              disabled={closeDisabled || calcedResponseStatus.isProcessing}
               className="smarthr-ui-Dialog-closeButton"
             >
               {decorators?.closeButtonLabel?.(CLOSE_BUTTON_LABEL) || CLOSE_BUTTON_LABEL}
@@ -87,17 +111,17 @@ export const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({
               variant={actionTheme}
               onClick={handleClickAction}
               disabled={actionDisabled}
-              loading={isRequestProcessing}
+              loading={calcedResponseStatus.isProcessing}
               className="smarthr-ui-Dialog-actionButton"
             >
               {actionText}
             </Button>
           </Cluster>
         </Cluster>
-        {(responseMessage?.status === 'success' || responseMessage?.status === 'error') && (
+        {calcedResponseStatus.visibleMessage && (
           <div className={message()}>
-            <ResponseMessage type={responseMessage.status} role="alert">
-              {responseMessage.text}
+            <ResponseMessage type={calcedResponseStatus.status} role="alert">
+              {calcedResponseStatus.message}
             </ResponseMessage>
           </div>
         )}

From 6307e85c376f1e45ffe2665a195545e8f501cae7 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 23 Jan 2025 15:17:39 +0900
Subject: [PATCH 05/11] =?UTF-8?q?chore:=20ActionDialogContentInner?=
 =?UTF-8?q?=E3=81=AEstyle=E7=94=9F=E6=88=90=E3=82=92memo=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ActionDialog/ActionDialogContentInner.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
index 6181a24923..ee24ff0b87 100644
--- a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
@@ -87,19 +87,28 @@ export const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({
     }
   }, [responseMessage])
 
-  const { wrapper, actionArea, buttonArea, message } = dialogContentInner()
+  const styles = useMemo(() => {
+    const { wrapper, actionArea, buttonArea, message } = dialogContentInner()
+
+    return {
+      wrapper: wrapper(),
+      actionArea: actionArea(),
+      buttonArea: buttonArea(),
+      message: message(),
+    }
+  }, [])
 
   return (
     // eslint-disable-next-line smarthr/best-practice-for-layouts, smarthr/a11y-heading-in-sectioning-content
-    <Stack gap={0} as="section" className={wrapper()}>
+    <Stack gap={0} as="section" className={styles.wrapper}>
       <DialogHeader title={title} subtitle={subtitle} titleTag={titleTag} titleId={titleId} />
       <DialogBody contentPadding={contentPadding} contentBgColor={contentBgColor}>
         {children}
       </DialogBody>
-      <Stack gap={0.5} className={actionArea()}>
+      <Stack gap={0.5} className={styles.actionArea}>
         <Cluster justify="space-between">
           {subActionArea}
-          <Cluster gap={{ row: 0.5, column: 1 }} className={buttonArea()}>
+          <Cluster gap={{ row: 0.5, column: 1 }} className={styles.buttonArea}>
             <Button
               onClick={onClickClose}
               disabled={closeDisabled || calcedResponseStatus.isProcessing}
@@ -119,7 +128,7 @@ export const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({
           </Cluster>
         </Cluster>
         {calcedResponseStatus.visibleMessage && (
-          <div className={message()}>
+          <div className={styles.message}>
             <ResponseMessage type={calcedResponseStatus.status} role="alert">
               {calcedResponseStatus.message}
             </ResponseMessage>

From 7bdccbdbe8f56fe29181fb334bdd8401ea999e00 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 23 Jan 2025 15:18:54 +0900
Subject: [PATCH 06/11] =?UTF-8?q?chore:=20ActionDialogContentInner?=
 =?UTF-8?q?=E5=86=85=E3=81=AEStack=E3=82=92Section=E3=81=AB=E7=BD=AE?=
 =?UTF-8?q?=E3=81=8D=E6=8F=9B=E3=81=88=E3=81=A6=E5=8A=B9=E7=8E=87=E5=8C=96?=
 =?UTF-8?q?=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/ActionDialog/ActionDialogContentInner.tsx       | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
index ee24ff0b87..46f9a2dbbc 100644
--- a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
@@ -5,6 +5,7 @@ import React, { type FC, type PropsWithChildren, type ReactNode, useCallback } f
 import { Button } from '../../Button'
 import { Cluster, Stack } from '../../Layout'
 import { ResponseMessage } from '../../ResponseMessage'
+import { Section } from '../../SectioningContent'
 import { DialogBody, type Props as DialogBodyProps } from '../DialogBody'
 import { DialogHeader, type Props as DialogHeaderProps } from '../DialogHeader'
 import { dialogContentInner } from '../dialogInnerStyle'
@@ -99,8 +100,8 @@ export const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({
   }, [])
 
   return (
-    // eslint-disable-next-line smarthr/best-practice-for-layouts, smarthr/a11y-heading-in-sectioning-content
-    <Stack gap={0} as="section" className={styles.wrapper}>
+    // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content
+    <Section className={styles.wrapper}>
       <DialogHeader title={title} subtitle={subtitle} titleTag={titleTag} titleId={titleId} />
       <DialogBody contentPadding={contentPadding} contentBgColor={contentBgColor}>
         {children}
@@ -135,6 +136,6 @@ export const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({
           </div>
         )}
       </Stack>
-    </Stack>
+    </Section>
   )
 }

From 046f3fd9b8f986502a075938afd81ccb496a3f2e Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 23 Jan 2025 15:28:25 +0900
Subject: [PATCH 07/11] =?UTF-8?q?chore:=20ActionDialogContentInner?=
 =?UTF-8?q?=E3=81=AEActionButton=E3=82=92=E5=88=87=E3=82=8A=E5=87=BA?=
 =?UTF-8?q?=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ActionDialog/ActionDialogContentInner.tsx | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
index 46f9a2dbbc..d30fa5488d 100644
--- a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
@@ -50,11 +50,11 @@ export const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({
   contentBgColor,
   contentPadding,
   actionText,
-  actionTheme = 'primary',
+  actionTheme,
   onClickAction,
   onClickClose,
   responseMessage,
-  actionDisabled = false,
+  actionDisabled,
   closeDisabled,
   subActionArea,
   decorators,
@@ -117,15 +117,14 @@ export const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({
             >
               {decorators?.closeButtonLabel?.(CLOSE_BUTTON_LABEL) || CLOSE_BUTTON_LABEL}
             </Button>
-            <Button
+            <ActionButton
               variant={actionTheme}
-              onClick={handleClickAction}
               disabled={actionDisabled}
               loading={calcedResponseStatus.isProcessing}
-              className="smarthr-ui-Dialog-actionButton"
+              onClick={handleClickAction}
             >
               {actionText}
-            </Button>
+            </ActionButton>
           </Cluster>
         </Cluster>
         {calcedResponseStatus.visibleMessage && (
@@ -139,3 +138,23 @@ export const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({
     </Section>
   )
 }
+
+const ActionButton = React.memo<
+  PropsWithChildren<{
+    variant: ActionDialogContentInnerProps['actionTheme']
+    disabled: ActionDialogContentInnerProps['actionDisabled']
+    loading: boolean
+    onClick: () => void
+  }>
+>(({ variant = 'primary', disabled, loading, onClick, children }) => (
+  <Button
+    type="submit"
+    variant={variant}
+    disabled={disabled}
+    loading={loading}
+    onClick={onClick}
+    className="smarthr-ui-Dialog-actionButton"
+  >
+    {children}
+  </Button>
+))

From f20baba62b32898d22ad591d895adfd561e9aee8 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 23 Jan 2025 15:32:25 +0900
Subject: [PATCH 08/11] =?UTF-8?q?chore:=20ActionDialogContentInner?=
 =?UTF-8?q?=E3=81=AECloseButton=E3=82=92=E5=88=87=E3=82=8A=E5=87=BA?=
 =?UTF-8?q?=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ActionDialog/ActionDialogContentInner.tsx | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
index d30fa5488d..390dba5c37 100644
--- a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
@@ -110,13 +110,11 @@ export const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({
         <Cluster justify="space-between">
           {subActionArea}
           <Cluster gap={{ row: 0.5, column: 1 }} className={styles.buttonArea}>
-            <Button
+            <CloseButton
               onClick={onClickClose}
               disabled={closeDisabled || calcedResponseStatus.isProcessing}
-              className="smarthr-ui-Dialog-closeButton"
-            >
-              {decorators?.closeButtonLabel?.(CLOSE_BUTTON_LABEL) || CLOSE_BUTTON_LABEL}
-            </Button>
+              decorators={decorators}
+            />
             <ActionButton
               variant={actionTheme}
               disabled={actionDisabled}
@@ -158,3 +156,21 @@ const ActionButton = React.memo<
     {children}
   </Button>
 ))
+
+const CloseButton = React.memo<
+  Pick<ActionDialogContentInnerProps, 'decorators'> & {
+    onClick: ActionDialogContentInnerProps['onClickClose']
+    disabled: boolean
+  }
+>(({ onClick, disabled, decorators }) => {
+  const children = useMemo(
+    () => decorators?.closeButtonLabel?.(CLOSE_BUTTON_LABEL) || CLOSE_BUTTON_LABEL,
+    [decorators],
+  )
+
+  return (
+    <Button onClick={onClick} disabled={disabled} className="smarthr-ui-Dialog-closeButton">
+      {children}
+    </Button>
+  )
+})

From 251f843014960a0eebfebaa4cbefd8219b3e38c4 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 23 Jan 2025 15:39:04 +0900
Subject: [PATCH 09/11] =?UTF-8?q?chore:=20ActionDialogContentInner?=
 =?UTF-8?q?=E3=81=AEActionAreaCluster=E3=82=92=E5=88=87=E3=82=8A=E5=87=BA?=
 =?UTF-8?q?=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ActionDialog/ActionDialogContentInner.tsx | 79 ++++++++++++++-----
 1 file changed, 60 insertions(+), 19 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
index 390dba5c37..ad6a7539e7 100644
--- a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
@@ -41,6 +41,8 @@ export type ActionDialogContentInnerProps = BaseProps & {
 }
 
 const CLOSE_BUTTON_LABEL = 'キャンセル'
+const ACTION_AREA_CLUSTER_GAP = { row: 0.5, column: 1 } as const
+
 export const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({
   children,
   title,
@@ -59,10 +61,6 @@ export const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({
   subActionArea,
   decorators,
 }) => {
-  const handleClickAction = useCallback(() => {
-    onClickAction(onClickClose)
-  }, [onClickAction, onClickClose])
-
   const calcedResponseStatus = useMemo(() => {
     if (!responseMessage) {
       return {
@@ -109,21 +107,17 @@ export const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({
       <Stack gap={0.5} className={styles.actionArea}>
         <Cluster justify="space-between">
           {subActionArea}
-          <Cluster gap={{ row: 0.5, column: 1 }} className={styles.buttonArea}>
-            <CloseButton
-              onClick={onClickClose}
-              disabled={closeDisabled || calcedResponseStatus.isProcessing}
-              decorators={decorators}
-            />
-            <ActionButton
-              variant={actionTheme}
-              disabled={actionDisabled}
-              loading={calcedResponseStatus.isProcessing}
-              onClick={handleClickAction}
-            >
-              {actionText}
-            </ActionButton>
-          </Cluster>
+          <ActionAreaCluster
+            onClickClose={onClickClose}
+            onClickAction={onClickAction}
+            closeDisabled={closeDisabled}
+            actionDisabled={actionDisabled}
+            loading={calcedResponseStatus.isProcessing}
+            actionTheme={actionTheme}
+            decorators={decorators}
+            actionText={actionText}
+            className={styles.buttonArea}
+          />
         </Cluster>
         {calcedResponseStatus.visibleMessage && (
           <div className={styles.message}>
@@ -137,6 +131,53 @@ export const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({
   )
 }
 
+const ActionAreaCluster = React.memo<
+  Pick<
+    FormDialogContentInnerProps,
+    | 'onClickClose'
+    | 'onClickAction'
+    | 'closeDisabled'
+    | 'actionDisabled'
+    | 'actionTheme'
+    | 'decorators'
+    | 'actionText'
+  > & { loading: boolean; className: string }
+>(
+  ({
+    onClickClose,
+    onClickAction,
+    closeDisabled,
+    actionDisabled,
+    loading,
+    actionTheme,
+    decorators,
+    actionText,
+    className,
+  }) => {
+    const handleClickAction = useCallback(() => {
+      onClickAction(onClickClose)
+    }, [onClickAction, onClickClose])
+
+    return (
+      <Cluster gap={ACTION_AREA_CLUSTER_GAP} className={className}>
+        <CloseButton
+          onClick={onClickClose}
+          disabled={closeDisabled || loading}
+          decorators={decorators}
+        />
+        <ActionButton
+          variant={actionTheme}
+          disabled={actionDisabled}
+          loading={loading}
+          onClick={handleClickAction}
+        >
+          {actionText}
+        </ActionButton>
+      </Cluster>
+    )
+  },
+)
+
 const ActionButton = React.memo<
   PropsWithChildren<{
     variant: ActionDialogContentInnerProps['actionTheme']

From c6f4417bbb94409dd61bbfb13a5688237ddcdaa9 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 23 Jan 2025 15:40:08 +0900
Subject: [PATCH 10/11] =?UTF-8?q?chore:=20ActionDialogContent=E3=81=AE?=
 =?UTF-8?q?=E6=97=A9=E6=9C=9Freturn=E3=82=92=E8=AA=BF=E6=95=B4=E3=81=99?=
 =?UTF-8?q?=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/ActionDialog/ActionDialogContent.tsx      | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContent.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContent.tsx
index 2202f21684..b79ee4eef4 100644
--- a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContent.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContent.tsx
@@ -20,7 +20,7 @@ export const ActionDialogContent: React.FC<Props & ElementProps> = ({
   actionText,
   actionTheme,
   onClickAction,
-  actionDisabled = false,
+  actionDisabled,
   portalParent,
   className = '',
   decorators,
@@ -30,17 +30,15 @@ export const ActionDialogContent: React.FC<Props & ElementProps> = ({
   const { createPortal } = useDialogPortal(portalParent)
 
   const handleClickClose = useCallback(() => {
-    if (!active) {
-      return
+    if (active) {
+      onClickClose()
     }
-    onClickClose()
   }, [active, onClickClose])
 
   const handleClickAction = useCallback(() => {
-    if (!active) {
-      return
+    if (active) {
+      onClickAction(onClickClose)
     }
-    onClickAction(onClickClose)
   }, [active, onClickAction, onClickClose])
 
   const titleId = useId()

From 703c0e3e8968572ed0f221ef8cf38ded90dd54f5 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Thu, 23 Jan 2025 15:42:22 +0900
Subject: [PATCH 11/11] =?UTF-8?q?chore:=20ActionDialog=E3=81=AE=E6=97=A9?=
 =?UTF-8?q?=E6=9C=9Freturn=E3=82=92=E8=AA=BF=E6=95=B4=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Dialog/ActionDialog/ActionDialog.tsx  | 12 +++++-------
 .../Dialog/ActionDialog/ActionDialogContentInner.tsx |  4 ++--
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialog.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialog.tsx
index b39960ab13..d1f420fb57 100644
--- a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialog.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialog.tsx
@@ -24,7 +24,7 @@ export const ActionDialog: React.FC<Props & ElementProps> = ({
   onClickClose,
   onPressEscape = onClickClose,
   responseMessage,
-  actionDisabled = false,
+  actionDisabled,
   closeDisabled,
   subActionArea,
   className,
@@ -37,17 +37,15 @@ export const ActionDialog: React.FC<Props & ElementProps> = ({
   const titleId = useId()
 
   const handleClickClose = useCallback(() => {
-    if (!props.isOpen) {
-      return
+    if (props.isOpen) {
+      onClickClose()
     }
-    onClickClose()
   }, [onClickClose, props.isOpen])
 
   const handleClickAction = useCallback(() => {
-    if (!props.isOpen) {
-      return
+    if (props.isOpen) {
+      onClickAction(onClickClose)
     }
-    onClickAction(onClickClose)
   }, [onClickAction, onClickClose, props.isOpen])
 
   return createPortal(
diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
index ad6a7539e7..414bec0910 100644
--- a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, { type FC, type PropsWithChildren, type ReactNode, useCallback } from 'react'
+import React, { type FC, type PropsWithChildren, type ReactNode, useCallback, useMemo } from 'react'
 
 import { Button } from '../../Button'
 import { Cluster, Stack } from '../../Layout'
@@ -133,7 +133,7 @@ export const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({
 
 const ActionAreaCluster = React.memo<
   Pick<
-    FormDialogContentInnerProps,
+    ActionDialogContentInnerProps,
     | 'onClickClose'
     | 'onClickAction'
     | 'closeDisabled'