fix: ModelessDialog に渡した className が当たる場所を変更 (#4978)

kufu · Oct 7, 2024 · cdc7e4e · cdc7e4e
1 parent c5e6b98
commit cdc7e4e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git 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,17 +144,19 @@ export const ModelessDialog: FC<Props & BaseElementProps & VariantProps<typeof m
   const { spacing } = useTheme()
 
   const {
+    overlapStyle,
     wrapperStyle,
     headerStyle,
     titleStyle,
     dialogHandlerStyle,
     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
@@ -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),
+        ],
+      },
+    ],
   },
 }