6.x to 7.x migrate problem: can't open all the modal and dropdown

[jessemoe]

Hello there, I'm migrating mantine from 6.x to 7.2.2. Unfortunately, All of the modal, dropdown and the drawer can't open
This is my provider code:

import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
import { MantineProvider, createEmotionCache, MantineThemeOverride, MantineColorScheme } from '@mantine/core';
import { ModalsProvider } from '@mantine/modals';
import { Notifications } from '@mantine/notifications';
import { useModel } from '@umijs/max';
import Colors from '@/utils/color'
import { ContextModal } from '@/components/ContextModal/ContextModal';
// import rtlPlugin from 'stylis-plugin-rtl';
import { useEffect, useState } from 'react';
import * as Helper from '@/utils/helper'

// const appendCache = createEmotionCache({ key: 'mantine', prepend: false });

type ProviderProps = {
  children: JSX.Element[] | ReactJSXElement
}

const common:MantineThemeOverride = {
  defaultGradient: {
    from: Colors['Day/Brand/normal'],
    to: Colors['Day/Brand/normal'],
    deg: 90,
  },
  colors: {
    'brand': [
      Colors['Day/Brand/light'],
      Colors['Day/Brand/light'],
      Colors['Day/Brand/light'],
      Colors['Day/Brand/light'],
      Colors['Day/Brand/light'],
      Colors['Day/Brand/light'],
      Colors['Day/Brand/normal'],
      Colors['Day/Brand/normal'],
      Colors['Day/Brand/normal'],
      Colors['Day/Brand/heavy']
    ],
    'warning': [
      Colors['Day/Warning/light'],
      Colors['Day/Warning/light'],
      Colors['Day/Warning/light'],
      Colors['Day/Warning/light'],
      Colors['Day/Warning/light'],
      Colors['Day/Warning/light'],
      Colors['Day/Warning/normal'],
      Colors['Day/Warning/normal'],
      Colors['Day/Warning/normal'],
      Colors['Day/Warning/heavy']
    ],
    'success': [
      Colors['Day/Success/light'],
      Colors['Day/Success/light'],
      Colors['Day/Success/light'],
      Colors['Day/Success/light'],
      Colors['Day/Success/light'],
      Colors['Day/Success/light'],
      Colors['Day/Success/normal'],
      Colors['Day/Success/normal'],
      Colors['Day/Success/normal'],
      Colors['Day/Success/heavy']
    ],
    'error': [
      Colors['Day/Error/light'],
      Colors['Day/Error/light'],
      Colors['Day/Error/light'],
      Colors['Day/Error/light'],
      Colors['Day/Error/light'],
      Colors['Day/Error/light'],
      Colors['Day/Error/normal'],
      Colors['Day/Error/normal'],
      Colors['Day/Error/normal'],
      Colors['Day/Error/heavy']
    ] 
  },
  primaryColor: 'brand',
  defaultRadius: 'xl',
}

// const rtlCache = createEmotionCache({
//   key: 'mantine-rtl',
//   stylisPlugins: [rtlPlugin],
// });

export default function CommProdiver(props: ProviderProps) {
  const {mode} = useModel('global')
  const [rtl, setRtl] = useState(false)

  const themeDark:MantineThemeOverride = {
    fontFamily: 'EnglishFont, ArabicFont',
    // colorScheme: 'dark',
    ...common,
    colors: {
      ...common.colors,
      'dark': [
        Colors['Night/Mild/Text/colorText'],
        Colors['Night/Mild/Text/colorTextSecondary'],
        Colors['Night/Mild/Text/colorTextTertiary'],
        Colors['Night/Mild/Text/colorTextQuaternary'],
        Colors['Night/Mild/Border/colorBorder'],
        Colors['Night/Mild/Border/colorBorderSecondary'],
        Colors['Night/Mild/Bg/colorBgLayout'],
        Colors['Night/Mild/Bg/colorBgLayout'],
        Colors['Night/Mild/Bg/colorBgLayout'],
        Colors['Night/Mild/Bg/colorBgLayout'],
      ], 
      // 'brand': [
      //   Colors['Night/Brand/light'],
      //   Colors['Night/Brand/light'],
      //   // Colors['Night/Brand/light'],
      //   Colors['Night/Brand/light'],
      //   Colors['Night/Brand/light'],
      //   Colors['Night/Brand/light'],
      //   Colors['Night/Brand/normal'],
      //   Colors['Night/Brand/normal'],
      //   Colors['Night/Brand/normal'],
      //   Colors['Night/Brand/heavy']
      // ],
    },
    // dir:rtl ? 'rtl' : 'ltr',
  }
  
  const themeLight:MantineThemeOverride = {
    fontFamily: 'EnglishFont, ArabicFont',
    // colorScheme: 'light',
    ...common,
    colors: {
      ...common.colors,
    },
    // dir:rtl ? 'rtl' : 'ltr',
  }

  useEffect(() => {
    const locale = Helper.getLanguage()
    if (locale === 'ar' || locale === 'ur' || locale === 'fa' ) {
      setRtl(true)
    }
  }, [])

  return (
    <MantineProvider
      // emotionCache={rtl ? rtlCache : appendCache}
      // withNormalizeCSS={false}
      // withNormalizeCSS
      // withGlobalStyles
      defaultColorScheme={mode as MantineColorScheme}
      theme={mode === 'dark' ? themeDark : themeLight}
    >
      <div dir={rtl ? 'rtl' : ''}>
        <ModalsProvider modals={{context: ContextModal}}>
          <Notifications position="top-center">
          </Notifications>
          {props.children}
        </ModalsProvider>
      </div>
    </MantineProvider>
  )
}

[jessemoe]

A example of dropdown can't open

import { MouseEventHandler, ReactNode, useState } from 'react'
import { Menu } from '@mantine/core';
import { FiArrowRight } from 'react-icons/fi'
import classnames from 'classnames'
import {Link} from 'umi'

type Item = {
  label: string;
  labelClass?: string;
  onClick?: MouseEventHandler;
  to?: string;
  target?: string;
  href?: string
}

type Props = {
  position: 'bottom-start' | 'bottom-end';
  children: ReactNode,
  items: Array<Item>,
}

export default function NavMenu(props: Props) {
  const [open, setOpen] = useState(false)
  return (
    <Menu
      radius={4}
      shadow='md' trigger='hover' width={220} 
      transitionProps={{
        transition:"fade",
        duration:150,
        timingFunction:"ease-in-out"
      }}
      position={props.position}
      zIndex={199}
      styles={{dropdown: {
        marginTop: '11px'
      }}}
      onChange={(val) => {setOpen(val)}}
      opened={open}
    >
      <Menu.Target>
        {props.children}
      </Menu.Target>

      <Menu.Dropdown onClick={() => {setOpen(false)}}>
        {
          props.items.map((item, idx) => (
            item.to ? (
              <Link to={item.to || ''} onClick={item.onClick} key={idx}>
                <div className='group flex flex-row justify-between items-center cursor-pointer rounded-md hover:bg-fill py-2 px-4 text-normal'>
                  <div className={classnames('text-md ', item.labelClass || '')}>{item.label}</div>
                  <span className='duration-300 transition-all ease-in-out translate-x-0 rtl:translate-x-2 opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transform rtl:rotate-180'><FiArrowRight /></span>
                </div>
              </Link>
            ) : 
            item.target ? (
              <a href={item.target} target='blank'>
              <div key={idx} onClick={item.onClick} className='group flex flex-row justify-between items-center cursor-pointer rounded-md hover:bg-fill py-2 px-4 text-normal'>
                <div className={classnames('text-md ', item.labelClass || '')}>{item.label}</div>
                <span className='duration-300 transition-all ease-in-out translate-x-0 rtl:translate-x-2 opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transform rtl:rotate-180'><FiArrowRight /></span>
              </div></a>
            ) :
            item.href ? (
              <a href={item.href}>
              <div key={idx} onClick={item.onClick} className='group flex flex-row justify-between items-center cursor-pointer rounded-md hover:bg-fill py-2 px-4 text-normal'>
                <div className={classnames('text-md ', item.labelClass || '')}>{item.label}</div>
                <span className='duration-300 transition-all ease-in-out translate-x-0 rtl:translate-x-2 opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transform rtl:rotate-180'><FiArrowRight /></span>
              </div></a>
            ) :
            (
              <div key={idx} onClick={item.onClick} className='group flex flex-row justify-between items-center cursor-pointer rounded-md hover:bg-fill py-2 px-4 text-normal'>
                <div className={classnames('text-md ', item.labelClass || '')}>{item.label}</div>
                <span className='duration-300 transition-all ease-in-out translate-x-0 rtl:translate-x-2 opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transform rtl:rotate-180'><FiArrowRight /></span>
              </div>
            )            
          ))
        }
      </Menu.Dropdown>
    </Menu>
  )
}

[jessemoe]

only popdialog is working well

[rtivital]

Please provide a sandbox with a minimal reproduction of the issue. Template – https://codesandbox.io/s/mantine-template-9ze89?file=/src/App.tsx