From cdc7e4e5fa133320161f4a54e7729d672710ec94 Mon Sep 17 00:00:00 2001
From: KANAMORI Yu <y.kinmori@gmail.com>
Date: Mon, 7 Oct 2024 13:51:10 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20ModelessDialog=20=E3=81=AB=E6=B8=A1?=
 =?UTF-8?q?=E3=81=97=E3=81=9F=20className=20=E3=81=8C=E5=BD=93=E3=81=9F?=
 =?UTF-8?q?=E3=82=8B=E5=A0=B4=E6=89=80=E3=82=92=E5=A4=89=E6=9B=B4=20(#4978?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Dialog/ModelessDialog.tsx       |  9 ++++++---
 packages/smarthr-ui/src/smarthr-ui-preset.ts       | 14 ++++++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx b/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx
index 17c6437e18..57301f1749 100644
--- a/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx
+++ b/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx
@@ -89,6 +89,7 @@ const CLOSE_BUTTON_ICON_ALT = '閉じる'
 
 const modelessDialog = tv({
   slots: {
+    overlap: 'shr-inset-[unset]',
     wrapper: 'smarthr-ui-ModelessDialog shr-fixed shr-flex shr-flex-col',
     headerEl:
       'smarthr-ui-ModelessDialog-header shr-border-b-shorthand shr-relative shr-flex shr-cursor-move shr-items-center shr-rounded-tl-l shr-rounded-tr-l shr-pe-1 shr-ps-1.5 hover:shr-bg-white-darken',
@@ -143,6 +144,7 @@ export const ModelessDialog: FC<Props & BaseElementProps & VariantProps<typeof m
   const { spacing } = useTheme()
 
   const {
+    overlapStyle,
     wrapperStyle,
     headerStyle,
     titleStyle,
@@ -150,10 +152,11 @@ export const ModelessDialog: FC<Props & BaseElementProps & VariantProps<typeof m
     closeButtonLayoutStyle,
     footerStyle,
   } = useMemo(() => {
-    const { wrapper, headerEl, title, dialogHandler, closeButtonLayout, footerEl } =
+    const { overlap, wrapper, headerEl, title, dialogHandler, closeButtonLayout, footerEl } =
       modelessDialog()
     return {
-      wrapperStyle: wrapper({ resizable, className }),
+      overlapStyle: overlap({ className }),
+      wrapperStyle: wrapper({ resizable }),
       headerStyle: headerEl(),
       titleStyle: title(),
       dialogHandlerStyle: dialogHandler(),
@@ -314,7 +317,7 @@ export const ModelessDialog: FC<Props & BaseElementProps & VariantProps<typeof m
   )
 
   return createPortal(
-    <DialogOverlap isOpen={isOpen} className="shr-inset-[unset]">
+    <DialogOverlap isOpen={isOpen} className={overlapStyle}>
       <Draggable
         handle=".smarthr-ui-ModelessDialog-handle"
         onStart={(_, data) => setPosition({ x: data.x, y: data.y })}
diff --git a/packages/smarthr-ui/src/smarthr-ui-preset.ts b/packages/smarthr-ui/src/smarthr-ui-preset.ts
index 88c4cbba4c..5f8b77b17f 100644
--- a/packages/smarthr-ui/src/smarthr-ui-preset.ts
+++ b/packages/smarthr-ui/src/smarthr-ui-preset.ts
@@ -30,6 +30,20 @@ defaultConfig.twMergeConfig = {
         leading: ['none', 'tight', 'normal', 'loose'],
       },
     ],
+    zIndex: [
+      {
+        z: [
+          'auto',
+          '0',
+          '1',
+          'fixed-menu',
+          'overlap-base',
+          'overlap',
+          'flash-message',
+          (classPart: string) => /^\[\d+\]$/.test(classPart),
+        ],
+      },
+    ],
   },
 }