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 { - 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 + 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), + ], + }, + ], }, }