@canlooks/can-ui 0.0.112 → 0.0.113

package/dist/cjs/components/app/app.js

@@ -27,12 +27,12 @@ exports.App = (({ theme, ...props }) => {
     return ((0, jsx_runtime_1.jsx)(globalEventDelegation_1.GlobalEventDelegation, { children: (0, jsx_runtime_1.jsx)(theme_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(InnerApp, { ...props }) }) }));
 });
 function InnerApp({ component: Component = 'div', theme, children, fill = true, ...props }) {
-    const appValue = (0, react_1.useMemo)(() => ({
+    const appValue = (0, utils_1.useExternalClass)(() => ({
         dialog: exports.App.dialog = new appDialog_1.AppDialogMethods(),
         message: exports.App.message = new appMessage_1.AppMessageMethods(),
         notification: exports.App.notification = new appNotification_1.AppNotificationMethods(),
         actionSheet: exports.App.actionSheet = new appActionSheet_1.AppActionSheetMethods()
-    }), []);
+    }));
     return ((0, jsx_runtime_1.jsxs)(AppContext, { value: appValue, children: [Component
                 ? (0, jsx_runtime_1.jsx)(Component, { ...props, css: [
                         app_style_1.style,

package/dist/cjs/components/overlayBase/overlayBase.d.ts

@@ -24,4 +24,4 @@ export interface OverlayBaseProps extends DivProps {
     removeFocusOnOpen?: boolean;
 }
 export declare const overlayBaseTransitionDuration = 300;
-export declare function OverlayBase({ container, effectContainer, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen, ...props }: OverlayBaseProps): false | React.ReactPortal;
+export declare function OverlayBase({ container, effectContainer, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen, ...props }: OverlayBaseProps): false | React.ReactPortal | null;

package/dist/cjs/components/overlayBase/overlayBase.js

@@ -37,7 +37,7 @@ function OverlayBase({ container, effectContainer, forceRender, open, onMaskClic
         onClosed?.();
         forceRender === false && setShouldRender(false);
     };
-    return shouldRender.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ...props, css: overlayBase_style_1.style, className: (0, utils_1.clsx)(overlayBase_style_1.classes.root, props.className), "data-open": open, "data-custom-container": containerEl.current !== document.body, children: [(0, jsx_runtime_1.jsx)(transitionBase_1.Fade, { timeout: exports.overlayBaseTransitionDuration, ...(0, utils_1.mergeComponentProps)(maskProps, {
+    return shouldRender.current && containerEl.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ...props, css: overlayBase_style_1.style, className: (0, utils_1.clsx)(overlayBase_style_1.classes.root, props.className), "data-open": open, "data-custom-container": containerEl.current !== document.body, children: [(0, jsx_runtime_1.jsx)(transitionBase_1.Fade, { timeout: exports.overlayBaseTransitionDuration, ...(0, utils_1.mergeComponentProps)(maskProps, {
                     in: open,
                     className: overlayBase_style_1.classes.mask,
                     onClick,

package/dist/cjs/components/popper/popper.js

@@ -537,7 +537,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
                 ? (0, react_1.cloneElement)(children, {
                     ref: childRef
                 })
-                : children, renderedOnce.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(clickAway_1.ClickAway, { disabled: !clickable && !enterable && !contextMenuable, 
+                : children, renderedOnce.current && containerEl.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(clickAway_1.ClickAway, { disabled: !clickable && !enterable && !contextMenuable, 
                 // 右键菜单点击anchor需要关闭弹框
                 targets: () => contextMenuEvent.current ? void 0 : getAnchorElement(), onClickAway: onClickAway, children: (0, jsx_runtime_1.jsx)("div", { ...props, ref: innerPopperRef, css: popper_style_1.style, className: (0, utils_1.clsx)(popper_style_1.classes.root, props.className), style: {
                         ...popperBounding,

package/dist/cjs/components/snackbarBase/snackbarBase.d.ts

@@ -30,7 +30,7 @@ export declare const SnackbarBase: React.MemoExoticComponent<({ methods, useTo,
     max?: number;
     container?: DefineElement<HTMLElement>;
     effectContainer?: DefineElement<HTMLElement>;
-}) => React.ReactPortal>;
+}) => React.ReactPortal | null>;
 interface SnackbarBaseItemProps extends Omit<SnackbarBaseProps, 'duration' | 'onAutoClose'> {
     id: string;
     type: keyof SnackbarBaseMethods;

package/dist/cjs/components/snackbarBase/snackbarBase.js

@@ -86,7 +86,7 @@ exports.SnackbarBase = (0, react_2.memo)(({ methods, useTo, max = useTo === 'mes
     methods.error = defineMethod('error');
     const css = (0, snackbarBase_style_1.style)();
     const containerEl = (0, utils_1.useContainer)(container, effectContainer);
-    return (0, react_dom_1.createPortal)(stacks.flatMap((stack, i) => stack
+    return containerEl.current && (0, react_dom_1.createPortal)(stacks.flatMap((stack, i) => stack
         ? (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { css: css, className: snackbarBase_style_1.classes.root, "data-place": i, "data-use-to": useTo, children: stack.map(p => (0, react_1.createElement)(exports.SnackbarBaseItem, { ...p, key: p.id })) }, i)
         : []), containerEl.current);
 });

package/dist/cjs/utils/hooks.d.ts

@@ -55,4 +55,8 @@ export declare function useLoading<A extends any[], R>(fn: (...args: A) => R | P
  * @param effectContainer
  * @param defaultContainer 默认为`document.body`
  */
-export declare function useContainer<T extends HTMLElement | null>(container?: DefineElement<T>, effectContainer?: DefineElement<T>, defaultContainer?: T): RefObject<T>;
+export declare function useContainer<T extends HTMLElement | null>(container?: DefineElement<T>, effectContainer?: DefineElement<T>, defaultContainer?: DefineElement<T>): RefObject<T | null>;
+/**
+ * 使用外部类，该方法可避免`StrictMode`下，React渲染行为与外部类实例生命周期不同步的问题
+ */
+export declare function useExternalClass<T>(setup: () => T, cleanup?: (instance: T) => void): T;

package/dist/cjs/utils/hooks.js

@@ -9,6 +9,7 @@ exports.useUnmounted = useUnmounted;
 exports.useControlled = useControlled;
 exports.useLoading = useLoading;
 exports.useContainer = useContainer;
+exports.useExternalClass = useExternalClass;
 const react_1 = require("react");
 const utils_1 = require("./utils");
 /**
@@ -130,18 +131,36 @@ function useLoading(fn, referredLoading = false) {
  * @param effectContainer
  * @param defaultContainer 默认为`document.body`
  */
-function useContainer(container, effectContainer, defaultContainer = document.body) {
+function useContainer(container, effectContainer, defaultContainer) {
     const [containerEl, setContainerEl] = useDerivedState(prev => {
         if (container) {
             return typeof container === 'function' ? container() : container;
         }
-        return prev || defaultContainer;
-    }, [container, defaultContainer]);
+        return prev || null;
+    }, [container]);
     (0, react_1.useEffect)(() => {
-        if (effectContainer) {
-            const el = typeof effectContainer === 'function' ? effectContainer() : effectContainer;
+        const _container = effectContainer || defaultContainer || document.body;
+        if (_container) {
+            const el = typeof _container === 'function' ? _container() : _container;
             setContainerEl(el);
         }
-    }, []);
+    }, [effectContainer, defaultContainer]);
     return containerEl;
 }
+/**
+ * 使用外部类，该方法可避免`StrictMode`下，React渲染行为与外部类实例生命周期不同步的问题
+ */
+function useExternalClass(setup, cleanup) {
+    const mountTimes = (0, react_1.useRef)(0);
+    const prevInstance = (0, react_1.useRef)(void 0);
+    const [instance] = (0, react_1.useState)(() => {
+        if (!mountTimes.current++) {
+            prevInstance.current = setup();
+        }
+        return prevInstance.current;
+    });
+    (0, react_1.useEffect)(() => () => {
+        !--mountTimes.current && cleanup?.(instance);
+    }, []);
+    return instance;
+}

package/dist/esm/components/app/app.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { createContext, useContext, useMemo } from 'react';
-import { clsx, defineCss } from '../../utils';
+import { createContext, useContext } from 'react';
+import { clsx, defineCss, useExternalClass } from '../../utils';
 import { classes, style } from './app.style';
 import { ThemeProvider } from '../theme';
 import { AppDialog, AppDialogMethods } from './appDialog';
@@ -22,12 +22,12 @@ export const App = (({ theme, ...props }) => {
     return (_jsx(GlobalEventDelegation, { children: _jsx(ThemeProvider, { theme: theme, children: _jsx(InnerApp, { ...props }) }) }));
 });
 export function InnerApp({ component: Component = 'div', theme, children, fill = true, ...props }) {
-    const appValue = useMemo(() => ({
+    const appValue = useExternalClass(() => ({
         dialog: App.dialog = new AppDialogMethods(),
         message: App.message = new AppMessageMethods(),
         notification: App.notification = new AppNotificationMethods(),
         actionSheet: App.actionSheet = new AppActionSheetMethods()
-    }), []);
+    }));
     return (_jsxs(AppContext, { value: appValue, children: [Component
                 ? _jsx(Component, { ...props, css: [
                         style,

package/dist/esm/components/overlayBase/overlayBase.d.ts

@@ -24,4 +24,4 @@ export interface OverlayBaseProps extends DivProps {
     removeFocusOnOpen?: boolean;
 }
 export declare const overlayBaseTransitionDuration = 300;
-export declare function OverlayBase({ container, effectContainer, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen, ...props }: OverlayBaseProps): false | React.ReactPortal;
+export declare function OverlayBase({ container, effectContainer, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen, ...props }: OverlayBaseProps): false | React.ReactPortal | null;

package/dist/esm/components/overlayBase/overlayBase.js

@@ -33,7 +33,7 @@ export function OverlayBase({ container, effectContainer, forceRender, open, onM
         onClosed?.();
         forceRender === false && setShouldRender(false);
     };
-    return shouldRender.current && createPortal(_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-open": open, "data-custom-container": containerEl.current !== document.body, children: [_jsx(Fade, { timeout: overlayBaseTransitionDuration, ...mergeComponentProps(maskProps, {
+    return shouldRender.current && containerEl.current && createPortal(_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-open": open, "data-custom-container": containerEl.current !== document.body, children: [_jsx(Fade, { timeout: overlayBaseTransitionDuration, ...mergeComponentProps(maskProps, {
                     in: open,
                     className: classes.mask,
                     onClick,

package/dist/esm/components/popper/popper.js

@@ -534,7 +534,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
                 ? cloneElement(children, {
                     ref: childRef
                 })
-                : children, renderedOnce.current && createPortal(_jsx(ClickAway, { disabled: !clickable && !enterable && !contextMenuable, 
+                : children, renderedOnce.current && containerEl.current && createPortal(_jsx(ClickAway, { disabled: !clickable && !enterable && !contextMenuable, 
                 // 右键菜单点击anchor需要关闭弹框
                 targets: () => contextMenuEvent.current ? void 0 : getAnchorElement(), onClickAway: onClickAway, children: _jsx("div", { ...props, ref: innerPopperRef, css: style, className: clsx(classes.root, props.className), style: {
                         ...popperBounding,

package/dist/esm/components/snackbarBase/snackbarBase.d.ts

@@ -30,7 +30,7 @@ export declare const SnackbarBase: React.MemoExoticComponent<({ methods, useTo,
     max?: number;
     container?: DefineElement<HTMLElement>;
     effectContainer?: DefineElement<HTMLElement>;
-}) => React.ReactPortal>;
+}) => React.ReactPortal | null>;
 interface SnackbarBaseItemProps extends Omit<SnackbarBaseProps, 'duration' | 'onAutoClose'> {
     id: string;
     type: keyof SnackbarBaseMethods;

package/dist/esm/components/snackbarBase/snackbarBase.js

@@ -82,7 +82,7 @@ export const SnackbarBase = memo(({ methods, useTo, max = useTo === 'message' ?
     methods.error = defineMethod('error');
     const css = style();
     const containerEl = useContainer(container, effectContainer);
-    return createPortal(stacks.flatMap((stack, i) => stack
+    return containerEl.current && createPortal(stacks.flatMap((stack, i) => stack
         ? _jsx(TransitionGroup, { css: css, className: classes.root, "data-place": i, "data-use-to": useTo, children: stack.map(p => _createElement(SnackbarBaseItem, { ...p, key: p.id })) }, i)
         : []), containerEl.current);
 });

package/dist/esm/utils/hooks.d.ts

@@ -55,4 +55,8 @@ export declare function useLoading<A extends any[], R>(fn: (...args: A) => R | P
  * @param effectContainer
  * @param defaultContainer 默认为`document.body`
  */
-export declare function useContainer<T extends HTMLElement | null>(container?: DefineElement<T>, effectContainer?: DefineElement<T>, defaultContainer?: T): RefObject<T>;
+export declare function useContainer<T extends HTMLElement | null>(container?: DefineElement<T>, effectContainer?: DefineElement<T>, defaultContainer?: DefineElement<T>): RefObject<T | null>;
+/**
+ * 使用外部类，该方法可避免`StrictMode`下，React渲染行为与外部类实例生命周期不同步的问题
+ */
+export declare function useExternalClass<T>(setup: () => T, cleanup?: (instance: T) => void): T;

package/dist/esm/utils/hooks.js

@@ -119,18 +119,36 @@ export function useLoading(fn, referredLoading = false) {
  * @param effectContainer
  * @param defaultContainer 默认为`document.body`
  */
-export function useContainer(container, effectContainer, defaultContainer = document.body) {
+export function useContainer(container, effectContainer, defaultContainer) {
     const [containerEl, setContainerEl] = useDerivedState(prev => {
         if (container) {
             return typeof container === 'function' ? container() : container;
         }
-        return prev || defaultContainer;
-    }, [container, defaultContainer]);
+        return prev || null;
+    }, [container]);
     useEffect(() => {
-        if (effectContainer) {
-            const el = typeof effectContainer === 'function' ? effectContainer() : effectContainer;
+        const _container = effectContainer || defaultContainer || document.body;
+        if (_container) {
+            const el = typeof _container === 'function' ? _container() : _container;
             setContainerEl(el);
         }
-    }, []);
+    }, [effectContainer, defaultContainer]);
     return containerEl;
 }
+/**
+ * 使用外部类，该方法可避免`StrictMode`下，React渲染行为与外部类实例生命周期不同步的问题
+ */
+export function useExternalClass(setup, cleanup) {
+    const mountTimes = useRef(0);
+    const prevInstance = useRef(void 0);
+    const [instance] = useState(() => {
+        if (!mountTimes.current++) {
+            prevInstance.current = setup();
+        }
+        return prevInstance.current;
+    });
+    useEffect(() => () => {
+        !--mountTimes.current && cleanup?.(instance);
+    }, []);
+    return instance;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.112",
+  "version": "0.0.113",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",