@4399ywkf/core 5.0.21 → 5.0.23

package/dist/index.d.ts

@@ -548,6 +548,19 @@ interface ThemePluginOptions {
      * @default false
      */
     externalTheme?: boolean;
+    /**
+     * 将 Tooltip / Dropdown / Modal 等弹层的挂载节点限定在 ThemeWrapper 容器内
+     *
+     * 解决问题：antd 弹层默认挂载到 document.body，在以下场景会导致样式失效：
+     * - 微前端子应用使用 StyleProvider 将样式注入到子应用容器，弹层挂载 body 后脱离样式范围
+     * - CSS 变量作用域被限定在特定容器，body 上的弹层无法继承
+     *
+     * 启用后会在 ThemeWrapper 内创建一个 `data-ywkf-root` 容器作为弹层挂载点，
+     * 该容器始终是 StyleProvider 的子孙节点，样式链路不会断裂。
+     *
+     * @default true
+     */
+    scopePopupContainer?: boolean;
 }
 /**
  * 响应式主题系统插件

package/dist/index.js

@@ -3546,7 +3546,8 @@ var themePlugin = createPlugin((options = {}) => ({
       prefixCls = "ant",
       cssVar = true,
       globalReset = true,
-      externalTheme = false
+      externalTheme = false,
+      scopePopupContainer = true
     } = options;
     const { logger } = context;
     logger.info(
@@ -3577,7 +3578,8 @@ var themePlugin = createPlugin((options = {}) => ({
               prefixCls,
               cssVar,
               globalReset,
-              externalTheme
+              externalTheme,
+              scopePopupContainer
             })
           }
         ];
@@ -3629,11 +3631,12 @@ function generateThemeProvider(opts) {
     prefixCls,
     cssVar,
     globalReset,
-    externalTheme
+    externalTheme,
+    scopePopupContainer
   } = opts;
   const sections = [];
   sections.push(`// \u6B64\u6587\u4EF6\u7531 @4399ywkf/plugin-theme v3 \u81EA\u52A8\u751F\u6210\uFF0C\u8BF7\u52FF\u624B\u52A8\u4FEE\u6539`);
-  sections.push(buildImports({ globalReset, cssVar }));
+  sections.push(buildImports({ globalReset, cssVar, scopePopupContainer }));
   sections.push(TYPES_CODE);
   sections.push(
     buildStoreCode({ defaultAppearance, primaryColor, neutralColor })
@@ -3649,18 +3652,21 @@ function generateThemeProvider(opts) {
       cssVar,
       globalReset,
       externalTheme,
-      prefixCls
+      prefixCls,
+      scopePopupContainer
     })
   );
   return sections.join("\n");
 }
 function buildImports(opts) {
+  const needsRef = opts.cssVar || opts.scopePopupContainer;
   const reactImports = [
     "useCallback",
     "useEffect",
     "useMemo",
     "useState",
-    ...opts.cssVar ? ["useLayoutEffect", "useRef"] : [],
+    ...opts.cssVar ? ["useLayoutEffect"] : [],
+    ...needsRef ? ["useRef"] : [],
     "type ReactNode"
   ];
   const antdStyleImports = [
@@ -3791,7 +3797,6 @@ const GlobalReset = createGlobalStyle(({ theme }) => css\`
   }
 
   ::selection {
-    color: #000;
     -webkit-text-fill-color: unset !important;
   }
 \`);`;
@@ -3898,23 +3903,50 @@ function useExternalTheme() {
   }, []);
 }`;
 function buildWrapperCode(opts) {
-  const { darkMode, cssVar, globalReset, externalTheme, prefixCls } = opts;
-  const refLine = cssVar ? "\n  const containerRef = useRef<HTMLDivElement>(null);" : "";
+  const { darkMode, cssVar, globalReset, externalTheme, prefixCls, scopePopupContainer } = opts;
+  const cssVarRefLine = cssVar ? "\n  const containerRef = useRef<HTMLDivElement>(null);" : "";
+  const popupRefLine = scopePopupContainer ? "\n  const popupContainerRef = useRef<HTMLDivElement>(null);" : "";
   const cssVarSyncLine = cssVar ? "\n  useCssVarSync(containerRef);" : "";
   const appearanceSyncLine = darkMode ? "\n  useAppearanceSync(appearance);" : "";
   const externalThemeLine = externalTheme ? "\n  useExternalTheme();" : "";
+  const getPopupContainerLine = scopePopupContainer ? `
+  // \u5C06\u5F39\u5C42\u6302\u8F7D\u5230\u5BB9\u5668\u5185\u90E8\uFF0C\u786E\u4FDD\u80FD\u7EE7\u627F StyleProvider \u6CE8\u5165\u7684\u6837\u5F0F\u4E0E CSS \u53D8\u91CF\u3002
+  // \u5FAE\u524D\u7AEF\u6A21\u5F0F\u4E0B\u4F18\u5148\u4F7F\u7528 styleContainer\uFF08\u5B50\u5E94\u7528\u6839\u5BB9\u5668\uFF09\uFF0C
+  // \u666E\u901A\u6A21\u5F0F\u4E0B\u4F7F\u7528 popupContainerRef \u6240\u6307\u5411\u7684\u5305\u88C5 div\u3002
+  const getPopupContainer = useCallback(
+    (): HTMLElement =>
+      (IS_MICRO_APP ? styleContainer : popupContainerRef.current) ?? document.body,
+    [styleContainer],
+  );` : "";
   const childrenSlot = cssVar ? `<div ref={containerRef} style={{ display: "contents" }}>
         {children}
       </div>` : "{children}";
+  const getPopupContainerProp = scopePopupContainer ? "\n      getPopupContainer={getPopupContainer}" : "";
   const antdProvider = `<AntdThemeProvider
       prefixCls={RUNTIME_PREFIX_CLS}
       appearance={resolvedAppearance}
       themeMode={appearance}
-      theme={theme}${cssVar ? "\n      customToken={{ cssVar: true }}" : ""}
+      theme={theme}${cssVar ? "\n      customToken={{ cssVar: true }}" : ""}${getPopupContainerProp}
     >
       ${globalReset ? "<GlobalReset />" : ""}
       ${childrenSlot}
     </AntdThemeProvider>`;
+  const wrapperOpen = scopePopupContainer ? `<div
+    ref={popupContainerRef}
+    data-ywkf-root
+    style={{ position: "relative", height: "100%" }}
+  >` : "";
+  const wrapperClose = scopePopupContainer ? `</div>` : "";
+  const innerReturn = `IS_MICRO_APP && styleContainer ? (
+    <StyleProvider container={styleContainer}>{provider}</StyleProvider>
+  ) : provider`;
+  const returnBody = scopePopupContainer ? `(
+    ${wrapperOpen}
+      {IS_MICRO_APP && styleContainer ? (
+        <StyleProvider container={styleContainer}>{provider}</StyleProvider>
+      ) : provider}
+    ${wrapperClose}
+  )` : `(${innerReturn})`;
   return `
 // \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 ThemeWrapper \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
 
@@ -3929,7 +3961,7 @@ interface ThemeWrapperProps {
   children: ReactNode;
 }
 
-export function ThemeWrapper({ children }: ThemeWrapperProps) {${refLine}
+export function ThemeWrapper({ children }: ThemeWrapperProps) {${cssVarRefLine}${popupRefLine}
   const { appearance, primaryColor, neutralColor } = useThemeStore(
     (s) => ({ appearance: s.appearance, primaryColor: s.primaryColor, neutralColor: s.neutralColor }),
     shallow,
@@ -3964,14 +3996,12 @@ export function ThemeWrapper({ children }: ThemeWrapperProps) {${refLine}
     }),
     [primaryColor, neutralColor],
   );
-
+${getPopupContainerLine}
   const provider = (
     ${antdProvider}
   );
 
-  return IS_MICRO_APP && styleContainer ? (
-    <StyleProvider container={styleContainer}>{provider}</StyleProvider>
-  ) : provider;
+  return ${returnBody};
 }
 
 export default ThemeWrapper;