Merge branch 'main' into next

packages/core/client/src/schema-component/antd/action/Action.Container.tsx

@@ -11,18 +11,26 @@ import { observer, RecursionField, useField, useFieldSchema } from '@formily/rea
 import React from 'react';
 import { useActionContext } from '.';
 import { useOpenModeContext } from '../../../modules/popup/OpenModeProvider';
-import { useCurrentPopupContext } from '../page/PagePopups';
 import { ComposedActionDrawer } from './types';
 
+const PopupLevelContext = React.createContext(0);
+
 export const ActionContainer: ComposedActionDrawer = observer(
   (props: any) => {
     const { getComponentByOpenMode, defaultOpenMode } = useOpenModeContext();
     const { openMode = defaultOpenMode } = useActionContext();
-    const { currentLevel } = useCurrentPopupContext();
+    const popupLevel = React.useContext(PopupLevelContext);
+    const currentLevel = popupLevel + 1;
 
     const Component = getComponentByOpenMode(openMode);
 
-    return <Component footerNodeName={'Action.Container.Footer'} level={currentLevel} {...props} />;
+    console.log('currentLevel', currentLevel);
+
+    return (
+      <PopupLevelContext.Provider value={currentLevel}>
+        <Component footerNodeName={'Action.Container.Footer'} level={currentLevel || 1} {...props} />
+      </PopupLevelContext.Provider>
+    );
   },
   { displayName: 'ActionContainer' },
 );

packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx

@@ -14,10 +14,12 @@ import React, { useMemo } from 'react';
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import { ErrorFallback } from '../error-fallback';
 import { useCurrentPopupContext } from '../page/PagePopups';
+import { TabsContextProvider, useTabsContext } from '../tabs/context';
 import { useStyles } from './Action.Drawer.style';
 import { useActionContext } from './hooks';
 import { useSetAriaLabelForDrawer } from './hooks/useSetAriaLabelForDrawer';
 import { ActionDrawerProps, ComposedActionDrawer, OpenSize } from './types';
+import { antdDrawerZIndex } from './utils';
 
 const DrawerErrorFallback: React.FC<FallbackProps> = (props) => {
   const { visible, setVisible } = useActionContext();
@@ -40,6 +42,7 @@ export const InternalActionDrawer: React.FC<ActionDrawerProps> = observer(
     const schema = useFieldSchema();
     const field = useField();
     const { componentCls, hashId } = useStyles();
+    const tabContext = useTabsContext();
     const footerSchema = schema.reduceProperties((buf, s) => {
       if (s['x-component'] === footerNodeName) {
         return s;
@@ -60,7 +63,9 @@ export const InternalActionDrawer: React.FC<ActionDrawerProps> = observer(
     }
 
     return (
+      <TabsContextProvider {...tabContext} tabBarExtraContent={null}>
         <Drawer
+          zIndex={antdDrawerZIndex + props.level}
           width={openSizeWidthMap.get(openSize)}
           title={field.title}
           {...others}
@@ -94,6 +99,7 @@ export const InternalActionDrawer: React.FC<ActionDrawerProps> = observer(
             }}
           />
         </Drawer>
+      </TabsContextProvider>
     );
   },
   { displayName: 'ActionDrawer' },

packages/core/client/src/schema-component/antd/action/Action.Modal.tsx

@@ -16,9 +16,11 @@ import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import { useToken } from '../../../style';
 import { ErrorFallback } from '../error-fallback';
 import { useCurrentPopupContext } from '../page/PagePopups';
+import { TabsContextProvider, useTabsContext } from '../tabs/context';
 import { useActionContext } from './hooks';
 import { useSetAriaLabelForModal } from './hooks/useSetAriaLabelForModal';
 import { ActionDrawerProps, ComposedActionDrawer, OpenSize } from './types';
+import { antdDrawerZIndex } from './utils';
 
 const ModalErrorFallback: React.FC<FallbackProps> = (props) => {
   const { visible, setVisible } = useActionContext();
@@ -44,6 +46,7 @@ export const InternalActionModal: React.FC<ActionDrawerProps<ModalProps>> = obse
     const form = useForm();
     const field = useField();
     const { token } = useToken();
+    const tabContext = useTabsContext();
     const footerSchema = schema.reduceProperties((buf, s) => {
       if (s['x-component'] === footerNodeName) {
         return s;
@@ -68,7 +71,9 @@ export const InternalActionModal: React.FC<ActionDrawerProps<ModalProps>> = obse
     }
 
     return (
+      <TabsContextProvider {...tabContext} tabBarExtraContent={null}>
         <Modal
+          zIndex={antdDrawerZIndex + props.level}
           width={actualWidth}
           title={field.title}
           {...(others as ModalProps)}
@@ -137,6 +142,7 @@ export const InternalActionModal: React.FC<ActionDrawerProps<ModalProps>> = obse
             }}
           />
         </Modal>
+      </TabsContextProvider>
     );
   },
   { displayName: 'ActionModal' },

packages/core/client/src/schema-component/antd/action/Action.Page.tsx

@@ -15,6 +15,7 @@ import { BackButtonUsedInSubPage } from '../page/BackButtonUsedInSubPage';
 import { TabsContextProvider, useTabsContext } from '../tabs/context';
 import { useActionPageStyle } from './Action.Page.style';
 import { usePopupOrSubpagesContainerDOM } from './hooks/usePopupSlotDOM';
+import { antdDrawerZIndex } from './utils';
 
 export function ActionPage({ level }) {
   const filedSchema = useFieldSchema();
@@ -25,8 +26,7 @@ export function ActionPage({ level }) {
 
   const style = useMemo(() => {
     return {
-      // 20 is the z-index value of the main page
+      zIndex: antdDrawerZIndex + level,
-      zIndex: 20 + level,
     };
   }, [level]);
 
@@ -44,11 +44,7 @@ export function ActionPage({ level }) {
 
   const container = getContainerDOM();
 
-  if (container) {
+  return createPortal(actionPageNode, container || document.body);
-    return createPortal(actionPageNode, container);
-  }
-
-  return actionPageNode;
 }
 
 ActionPage.Footer = observer(

packages/core/client/src/schema-component/antd/action/utils.ts

@@ -154,3 +154,5 @@ export const setInitialActionState = (field) => {
   field.data.hidden = false;
   field.componentProps['disabled'] = false;
 };
+
+export const antdDrawerZIndex = 1000;

packages/core/client/src/schema-items/OpenModeSchemaItems.tsx

@@ -113,7 +113,6 @@ export const SchemaSettingOpenModeSchemaItems: React.FC<Options> = (props) => {
   const field = useField();
   const { t } = useTranslation();
   const { dn } = useDesignable();
-  const { isPopupVisibleControlledByURL } = usePopupSettings();
   const openModeValue = fieldSchema?.['x-component-props']?.['openMode'] || 'drawer';
 
   const _modeOptions = useMemo(() => {
@@ -121,18 +120,11 @@ export const SchemaSettingOpenModeSchemaItems: React.FC<Options> = (props) => {
       return modeOptions;
     }
 
-    if (isPopupVisibleControlledByURL()) {
     return [
       { label: t('Drawer'), value: 'drawer' },
       { label: t('Dialog'), value: 'modal' },
       { label: t('Page'), value: 'page' },
     ];
-    }
-
-    return [
-      { label: t('Drawer'), value: 'drawer' },
-      { label: t('Dialog'), value: 'modal' },
-    ];
   }, [modeOptions, t]);
 
   return (