@canlooks/can-ui 0.0.115 → 0.0.117

package/dist/cjs/components/anchorList/anchorList.js

@@ -13,10 +13,10 @@ exports.AnchorList = (0, react_1.memo)(({ anchors, renderAnchorItem, indent = 24
      * ------------------------------------------------------------------------
      * 初始化高亮与滚动位置
      */
-    const initialized = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(() => {
+    const mounted = (0, react_1.useRef)(false);
+    (0, utils_1.useExternalClass)(() => {
         if (routeMode === 'history') {
-            initialized.current ||= scrollToId(location.hash.slice(1));
+            mounted.current ||= scrollToId(location.hash.slice(1));
         }
     });
     const scrollToId = (id) => {
@@ -28,7 +28,7 @@ exports.AnchorList = (0, react_1.memo)(({ anchors, renderAnchorItem, indent = 24
         scrollerEl.scrollTo({
             top: targetEl.offsetTop - offset,
             // 初始化之前无需平滑滚动
-            behavior: initialized.current ? scrollBehavior : 'instant'
+            behavior: mounted.current ? scrollBehavior : 'instant'
         });
         return true;
     };

package/dist/cjs/components/deferred/deferred.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Deferred = Deferred;
 const react_1 = require("react");
 function Deferred({ init, value, children }) {
-    const [initialized, setInitialized] = (0, react_1.useState)(false);
-    const deferredInitialized = (0, react_1.useDeferredValue)(initialized);
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    const deferredMounted = (0, react_1.useDeferredValue)(mounted);
     (0, react_1.useEffect)(() => {
-        setInitialized(true);
+        setMounted(true);
     }, []);
     const deferredValue = (0, react_1.useDeferredValue)(value);
-    if (!deferredInitialized) {
+    if (!deferredMounted) {
         return init;
     }
     return typeof children === 'function'

package/dist/cjs/components/dialog/dialog.js

@@ -67,7 +67,7 @@ function Dialog({ icon, title, footer, prefix, suffix, width = 420, minWidth, ma
         if (scrollBehavior !== 'card') {
             return;
         }
-        if (innerOpen.current) {
+        if (innerOpen.current && bodyRef.current && bodyWrapRef.current) {
             const resizeObserver = new ResizeObserver(onScroll);
             resizeObserver.observe(bodyRef.current);
             resizeObserver.observe(bodyWrapRef.current);

package/dist/cjs/components/loadingMask/loadingMask.js

@@ -9,16 +9,15 @@ const progress_1 = require("../progress");
 const utils_1 = require("../../utils");
 const backdrop_1 = require("../backdrop");
 exports.LoadingMask = (0, react_1.memo)(({ open = false, text = '加载中...', progress, color, indicatorProps, progressProps, ...props }) => {
-    const [visible, setVisible] = (0, utils_1.useDerivedState)((prevLoading) => {
-        // 只有第一次需要原样返回loading，之后visible不会立即变为false，交由onTransitionEnd()处理
-        return typeof prevLoading === 'undefined' ? open : true;
+    const [visible, setVisible] = (0, react_1.useState)(open);
+    (0, react_1.useMemo)(() => {
+        open && setVisible(true);
     }, [open]);
     const onExited = () => {
-        // 动画结束后，loading为false才需要改变visible
         setVisible(false);
     };
     const showProgress = typeof progress === 'number';
-    return open || visible.current
+    return open || visible
         ? (0, jsx_runtime_1.jsxs)(backdrop_1.Backdrop, { variant: "light", ...props, css: loadingMask_style_1.style, open: open, className: (0, utils_1.clsx)(loadingMask_style_1.classes.root, props.className), onExited: onExited, "data-show-progress": showProgress, children: [(0, jsx_runtime_1.jsxs)("div", { className: loadingMask_style_1.classes.indicator, children: [(0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, { size: showProgress ? 14 : 30, borderWidth: showProgress ? 2 : 3, color: color, ...indicatorProps }), (0, jsx_runtime_1.jsx)("div", { className: loadingMask_style_1.classes.text, children: text })] }), showProgress &&
                     (0, jsx_runtime_1.jsx)(progress_1.Progress, { className: loadingMask_style_1.classes.progress, value: progress, ...progressProps })] })
         : null;

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

@@ -57,12 +57,7 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
         }
     };
     const { onChildrenOpenChange: tellParentOpenChange } = (0, popperContext_1.usePopperContext)();
-    const initialized = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(() => {
-        if (!initialized.current) {
-            initialized.current = true;
-            return;
-        }
+    (0, utils_1.useUpdateEffect)(() => {
         tellParentOpenChange(innerOpen.current);
     }, [innerOpen.current]);
     const onChildrenOpenChange = (childrenOpen) => {

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

@@ -4,6 +4,7 @@ exports.PopperContext = void 0;
 exports.usePopperContext = usePopperContext;
 exports.useScrollToTarget = useScrollToTarget;
 const react_1 = require("react");
+const utils_1 = require("../../utils");
 exports.PopperContext = (0, react_1.createContext)({
     autoClose: false,
     open: false,
@@ -30,11 +31,10 @@ function useScrollToTarget(scrollerRef) {
             scrollerEl.scrollTop = targetEl.offsetTop + targetEl.clientHeight / 2 - scrollerEl.clientHeight / 2;
         }
     }, []);
-    (0, react_1.useMemo)(() => {
+    (0, utils_1.useExternalClass)(() => {
         beforeOpenCallbacks.add(beforeOpen);
-    }, []);
-    (0, react_1.useEffect)(() => () => {
+    }, () => {
         beforeOpenCallbacks.delete(beforeOpen);
-    }, []);
+    });
     return ref;
 }

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

@@ -40,9 +40,7 @@ const placementToIndex = {
 exports.SnackbarBase = (0, react_2.memo)(({ methods, useTo, max = useTo === 'message' ? 5 : 4, container, effectContainer }) => {
     const [stacks, setStacks] = (0, react_2.useState)([]);
     const timers = (0, react_2.useRef)([]);
-    (0, react_2.useEffect)(() => () => {
-        timers.current.forEach(timer => clearTimeout(timer));
-    }, []);
+    const isUnmounted = (0, utils_1.useUnmounted)();
     const defineMethod = (type) => (props) => new Promise(resolve => {
         const propsObject = typeof props === 'object' && !(0, react_2.isValidElement)(props)
             ? props
@@ -51,7 +49,7 @@ exports.SnackbarBase = (0, react_2.memo)(({ methods, useTo, max = useTo === 'mes
         const index = placementToIndex[placement];
         let id = (0, utils_1.getEasyID)('snackbar');
         const onCloseButtonClick = () => {
-            setStacks(o => {
+            !isUnmounted.current && setStacks(o => {
                 o[index] = o[index].filter(s => s.id !== id);
                 return [...o];
             });

package/dist/cjs/components/tabs/tabs.js

@@ -79,15 +79,17 @@ exports.Tabs = (0, react_2.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
     const [shadowStart, setShadowStart] = (0, react_2.useState)(false);
     const [shadowEnd, setShadowEnd] = (0, react_2.useState)(false);
     const setShadow = () => {
-        if (position === 'top' || position === 'bottom') {
-            const { scrollLeft } = scrollRef.current;
-            setShadowStart(scrollLeft > 0);
-            setShadowEnd(scrollLeft < scrollRef.current.scrollWidth - scrollRef.current.clientWidth);
-        }
-        else {
-            const { scrollTop } = scrollRef.current;
-            setShadowStart(scrollTop > 0);
-            setShadowEnd(scrollTop < scrollRef.current.scrollHeight - scrollRef.current.clientHeight);
+        if (scrollRef.current) {
+            if (position === 'top' || position === 'bottom') {
+                const { scrollLeft } = scrollRef.current;
+                setShadowStart(scrollLeft > 0);
+                setShadowEnd(scrollLeft < scrollRef.current.scrollWidth - scrollRef.current.clientWidth);
+            }
+            else {
+                const { scrollTop } = scrollRef.current;
+                setShadowStart(scrollTop > 0);
+                setShadowEnd(scrollTop < scrollRef.current.scrollHeight - scrollRef.current.clientHeight);
+            }
         }
     };
     (0, react_2.useEffect)(() => {

package/dist/cjs/components/transitionBase/collapse.js

@@ -33,11 +33,11 @@ const Sweeping = ({ ref, in: _in = false, appear = true, orientation = 'vertical
             setSize(getCollapsedSize());
         });
     };
-    const initialized = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(() => {
-        if (!initialized.current) {
+    const mounted = (0, react_1.useRef)(false);
+    (0, utils_1.useStrictEffect)(() => {
+        if (!mounted.current) {
             // 首次渲染
-            initialized.current = true;
+            mounted.current = true;
             if (!appear) {
                 // 若appear为false，则跳过首次动画
                 return;

package/dist/cjs/components/waterfall/waterfall.js

@@ -32,17 +32,10 @@ const Waterfall = ({ columnCount = { xs: 4 }, gap = 0, columnGap, rowGap, ...pro
             elements.current.forEach(el => resizeObserver.current.observe(el));
         });
     });
-    const isInitialized = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(() => {
-        if (!isInitialized.current) {
-            isInitialized.current = true;
-            return;
-        }
-        computeItemOrder();
-    }, [columnCountNum.current]);
-    (0, react_1.useEffect)(() => () => {
+    (0, utils_1.useUpdateEffect)(computeItemOrder, [columnCountNum.current]);
+    (0, utils_1.useExternalClass)(() => void 0, () => {
         resizeObserver.current.disconnect();
-    }, []);
+    });
     return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: (0, utils_1.cloneRef)(containerRef, props.ref), css: (0, waterfall_style_1.useStyle)({ columnCount, columnGap, rowGap }), className: (0, utils_1.clsx)(waterfall_style_1.classes.root, props.className), children: react_1.Children.map(props.children, child => {
             if (!(0, react_1.isValidElement)(child)) {
                 throw Error('Children of <Waterfall> must be element');

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

@@ -1,10 +1,5 @@
-import { RefObject, Dispatch, SetStateAction } from 'react';
+import { RefObject, Dispatch, SetStateAction, EffectCallback, DependencyList } from 'react';
 import { DefineElement } from '../types';
-/**
- * 获取渲染前的值
- * @param value
- */
-export declare function usePrev<T>(value: T): T | null;
 /**
  * 将某个值使用ref同步，主要用于对付组件的闭包问题
  * @param value
@@ -27,6 +22,7 @@ export declare function useForceUpdate(): () => void;
  */
 export declare function useDerivedState<T>(referredState: (prevState: T | undefined) => T, deps: any[]): [RefObject<T>, Dispatch<SetStateAction<T>>];
 export declare function useDerivedState<T>(referredState: T, deps?: any[]): [RefObject<T>, Dispatch<SetStateAction<T>>];
+export declare function useMounted(): void;
 /**
  * 组件卸载后得到{current: true}
  * @returns
@@ -60,3 +56,11 @@ export declare function useContainer<T extends HTMLElement | null>(container?: D
  * 使用外部类，该方法可避免`StrictMode`下，React渲染行为与外部类实例生命周期不同步的问题
  */
 export declare function useExternalClass<T>(setup: () => T, cleanup?: (instance: T) => void): T;
+/**
+ * 用法同{@link useEffect}，但StrictMode下不会执行两次
+ */
+export declare function useStrictEffect(effect: EffectCallback, deps?: DependencyList): void;
+/**
+ * 用法同{@link useEffect}，但会排除首次渲染
+ */
+export declare function useUpdateEffect(effect: EffectCallback, deps?: DependencyList): void;

package/dist/cjs/utils/hooks.js

@@ -1,28 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrev = usePrev;
 exports.useSync = useSync;
 exports.useSyncState = useSyncState;
 exports.useForceUpdate = useForceUpdate;
 exports.useDerivedState = useDerivedState;
+exports.useMounted = useMounted;
 exports.useUnmounted = useUnmounted;
 exports.useControlled = useControlled;
 exports.useLoading = useLoading;
 exports.useContainer = useContainer;
 exports.useExternalClass = useExternalClass;
+exports.useStrictEffect = useStrictEffect;
+exports.useUpdateEffect = useUpdateEffect;
 const react_1 = require("react");
 const utils_1 = require("./utils");
-/**
- * 获取渲染前的值
- * @param value
- */
-function usePrev(value) {
-    const prev = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        prev.current = value;
-    });
-    return prev.current;
-}
 /**
  * 将某个值使用ref同步，主要用于对付组件的闭包问题
  * @param value
@@ -54,6 +45,10 @@ function useForceUpdate() {
 }
 function useDerivedState(referredState, deps) {
     const derivedState = (0, react_1.useRef)(void 0);
+    (0, react_1.useMemo)(() => {
+        // SSR模式下，derivedState会重置2次
+        derivedState.current = void 0;
+    }, []);
     const updateState = (state) => {
         const newState = typeof state === 'function' ? state(derivedState.current) : state;
         if (derivedState.current !== newState) {
@@ -74,13 +69,15 @@ function useDerivedState(referredState, deps) {
         }, [])
     ];
 }
+function useMounted() {
+}
 /**
  * 组件卸载后得到{current: true}
  * @returns
  */
 function useUnmounted() {
     const isUnmounted = (0, react_1.useRef)(false);
-    useExternalClass(() => void 0, () => () => {
+    useExternalClass(() => void 0, () => {
         isUnmounted.current = true;
     });
     return isUnmounted;
@@ -164,3 +161,29 @@ function useExternalClass(setup, cleanup) {
     }, []);
     return instance;
 }
+/**
+ * 用法同{@link useEffect}，但StrictMode下不会执行两次
+ */
+function useStrictEffect(effect, deps) {
+    const prevDeps = (0, react_1.useRef)(void 0);
+    (0, react_1.useEffect)(() => {
+        const isDepsChanged = prevDeps.current ? !(0, utils_1.arrayShallowEqual)(prevDeps.current, deps) : true;
+        if (isDepsChanged) {
+            prevDeps.current = deps;
+            return effect();
+        }
+    });
+}
+/**
+ * 用法同{@link useEffect}，但会排除首次渲染
+ */
+function useUpdateEffect(effect, deps) {
+    const mounted = (0, react_1.useRef)(false);
+    useStrictEffect(() => {
+        if (!mounted.current) {
+            mounted.current = true;
+            return;
+        }
+        return effect();
+    }, [deps]);
+}

package/dist/cjs/utils/tree.js

@@ -86,34 +86,36 @@ function sortTreeNodes(props, sortInfo) {
         }
         return null;
     };
-    pickUp(nodes);
-    const putDown = (nodes) => {
-        if (!nodes?.length) {
-            return false;
-        }
-        for (let i = 0, { length } = nodes; i < length; i++) {
-            const node = nodes[i];
-            if (node[primaryKey] === destination) {
-                switch (placement) {
-                    case 'before':
-                        nodes.splice(i, 0, node);
-                        return true;
-                    case 'after':
-                        nodes.splice(i + 1, 0, node);
-                        return true;
-                    default:
-                        node.children ||= [];
-                        node.children.push(node);
-                        return true;
-                }
+    const sourceNode = pickUp(nodes);
+    if (sourceNode) {
+        const putDown = (nodes) => {
+            if (!nodes?.length) {
+                return false;
             }
-            const foundInChildren = pickUp(node[childrenKey]);
-            if (foundInChildren) {
-                return foundInChildren;
+            for (let i = 0, { length } = nodes; i < length; i++) {
+                const node = nodes[i];
+                if (node[primaryKey] === destination) {
+                    switch (placement) {
+                        case 'before':
+                            nodes.splice(i, 0, sourceNode);
+                            return true;
+                        case 'after':
+                            nodes.splice(i + 1, 0, sourceNode);
+                            return true;
+                        default:
+                            node.children ||= [];
+                            node.children.push(sourceNode);
+                            return true;
+                    }
+                }
+                const foundInChildren = putDown(node[childrenKey]);
+                if (foundInChildren) {
+                    return foundInChildren;
+                }
             }
-        }
-        return false;
-    };
-    putDown(nodes);
+            return false;
+        };
+        putDown(nodes);
+    }
     return nodes;
 }

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

@@ -47,6 +47,7 @@ export declare function mergeDeep<T extends {}, U, V, W, X>(target: T, source: U
 export declare function mergeDeep<T extends {}, U, V, W, X, Y>(target: T, source: U, source2: V, source3: W, source4: X, source5: Y): T & U & V & W & X & Y;
 export declare function mergeDeep<T extends {}, U, V, W, X, Y, Z>(target: T, source: U, source2: V, source3: W, source4: X, source5: Y, source6: Z): T & U & V & W & X & Y & Z;
 export declare function mergeDeep(target: object, ...sources: any[]): any;
+export declare function arrayShallowEqual(a: any[], b: any[]): boolean;
 export type OverflowEdge = 'top' | 'bottom' | 'left' | 'right';
 /**
  * 判断元素是否完全在目标容器内，用于Popper组件

package/dist/cjs/utils/utils.js

@@ -8,6 +8,7 @@ exports.toArray = toArray;
 exports.isSelected = isSelected;
 exports.cloneDeep = cloneDeep;
 exports.mergeDeep = mergeDeep;
+exports.arrayShallowEqual = arrayShallowEqual;
 exports.isElementOverflowed = isElementOverflowed;
 exports.nextTick = nextTick;
 exports.cloneRef = cloneRef;
@@ -137,6 +138,22 @@ function mergeDeep(target, ...sources) {
     }
     return target;
 }
+function arrayShallowEqual(a, b) {
+    if (a === b) {
+        return true;
+    }
+    if (a.length !== b.length) {
+        return false;
+    }
+    let isEqual = true;
+    for (let i = 0, { length } = a; i < length; i++) {
+        if (a[i] !== b[i]) {
+            isEqual = false;
+            break;
+        }
+    }
+    return isEqual;
+}
 /**
  * 判断元素是否完全在目标容器内，用于Popper组件
  * @param target 目标元素

package/dist/esm/components/anchorList/anchorList.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { classes, style } from './anchorList.style';
-import { clsx, listenAllPredecessorsScroll, useDerivedState, useSyncState } from '../../utils';
+import { clsx, listenAllPredecessorsScroll, useDerivedState, useExternalClass, useSyncState } from '../../utils';
 import { memo, useEffect, useRef } from 'react';
 import { Flex } from '../flex';
 import { ActiveIndicator } from './activeIndicator';
@@ -10,10 +10,10 @@ export const AnchorList = memo(({ anchors, renderAnchorItem, indent = 24, scroll
      * ------------------------------------------------------------------------
      * 初始化高亮与滚动位置
      */
-    const initialized = useRef(false);
-    useEffect(() => {
+    const mounted = useRef(false);
+    useExternalClass(() => {
         if (routeMode === 'history') {
-            initialized.current ||= scrollToId(location.hash.slice(1));
+            mounted.current ||= scrollToId(location.hash.slice(1));
         }
     });
     const scrollToId = (id) => {
@@ -25,7 +25,7 @@ export const AnchorList = memo(({ anchors, renderAnchorItem, indent = 24, scroll
         scrollerEl.scrollTo({
             top: targetEl.offsetTop - offset,
             // 初始化之前无需平滑滚动
-            behavior: initialized.current ? scrollBehavior : 'instant'
+            behavior: mounted.current ? scrollBehavior : 'instant'
         });
         return true;
     };

package/dist/esm/components/deferred/deferred.js

@@ -1,12 +1,12 @@
 import { useDeferredValue, useEffect, useState } from 'react';
 export function Deferred({ init, value, children }) {
-    const [initialized, setInitialized] = useState(false);
-    const deferredInitialized = useDeferredValue(initialized);
+    const [mounted, setMounted] = useState(false);
+    const deferredMounted = useDeferredValue(mounted);
     useEffect(() => {
-        setInitialized(true);
+        setMounted(true);
     }, []);
     const deferredValue = useDeferredValue(value);
-    if (!deferredInitialized) {
+    if (!deferredMounted) {
         return init;
     }
     return typeof children === 'function'

package/dist/esm/components/dialog/dialog.js

@@ -64,7 +64,7 @@ export function Dialog({ icon, title, footer, prefix, suffix, width = 420, minWi
         if (scrollBehavior !== 'card') {
             return;
         }
-        if (innerOpen.current) {
+        if (innerOpen.current && bodyRef.current && bodyWrapRef.current) {
             const resizeObserver = new ResizeObserver(onScroll);
             resizeObserver.observe(bodyRef.current);
             resizeObserver.observe(bodyWrapRef.current);

package/dist/esm/components/loadingMask/loadingMask.js

@@ -1,21 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { memo } from 'react';
+import { memo, useMemo, useState } from 'react';
 import { classes, style } from './loadingMask.style';
 import { LoadingIndicator } from '../loadingIndicator';
 import { Progress } from '../progress';
-import { clsx, useDerivedState } from '../../utils';
+import { clsx } from '../../utils';
 import { Backdrop } from '../backdrop';
 export const LoadingMask = memo(({ open = false, text = '加载中...', progress, color, indicatorProps, progressProps, ...props }) => {
-    const [visible, setVisible] = useDerivedState((prevLoading) => {
-        // 只有第一次需要原样返回loading，之后visible不会立即变为false，交由onTransitionEnd()处理
-        return typeof prevLoading === 'undefined' ? open : true;
+    const [visible, setVisible] = useState(open);
+    useMemo(() => {
+        open && setVisible(true);
     }, [open]);
     const onExited = () => {
-        // 动画结束后，loading为false才需要改变visible
         setVisible(false);
     };
     const showProgress = typeof progress === 'number';
-    return open || visible.current
+    return open || visible
         ? _jsxs(Backdrop, { variant: "light", ...props, css: style, open: open, className: clsx(classes.root, props.className), onExited: onExited, "data-show-progress": showProgress, children: [_jsxs("div", { className: classes.indicator, children: [_jsx(LoadingIndicator, { size: showProgress ? 14 : 30, borderWidth: showProgress ? 2 : 3, color: color, ...indicatorProps }), _jsx("div", { className: classes.text, children: text })] }), showProgress &&
                     _jsx(Progress, { className: classes.progress, value: progress, ...progressProps })] })
         : null;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { cloneElement, isValidElement, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { clsx, cloneRef, listenAllPredecessorsScroll, toArray, useControlled, useDerivedState, useForceUpdate, useSync, useSyncState, useUnmounted, useContainer, isElementOverflowed, isChildOf } from '../../utils';
+import { clsx, cloneRef, listenAllPredecessorsScroll, toArray, useControlled, useDerivedState, useForceUpdate, useSync, useSyncState, useUnmounted, useContainer, isElementOverflowed, isChildOf, useUpdateEffect } from '../../utils';
 import { ClickAway } from '../clickAway';
 import { classes, style } from './popper.style';
 import { PopperContext, usePopperContext } from './popperContext';
@@ -54,12 +54,7 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
         }
     };
     const { onChildrenOpenChange: tellParentOpenChange } = usePopperContext();
-    const initialized = useRef(false);
-    useEffect(() => {
-        if (!initialized.current) {
-            initialized.current = true;
-            return;
-        }
+    useUpdateEffect(() => {
         tellParentOpenChange(innerOpen.current);
     }, [innerOpen.current]);
     const onChildrenOpenChange = (childrenOpen) => {

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

@@ -1,4 +1,5 @@
-import { createContext, useContext, useRef, useEffect, useMemo, useCallback } from 'react';
+import { createContext, useContext, useRef, useCallback } from 'react';
+import { useExternalClass } from '../../utils';
 export const PopperContext = createContext({
     autoClose: false,
     open: false,
@@ -25,11 +26,10 @@ export function useScrollToTarget(scrollerRef) {
             scrollerEl.scrollTop = targetEl.offsetTop + targetEl.clientHeight / 2 - scrollerEl.clientHeight / 2;
         }
     }, []);
-    useMemo(() => {
+    useExternalClass(() => {
         beforeOpenCallbacks.add(beforeOpen);
-    }, []);
-    useEffect(() => () => {
+    }, () => {
         beforeOpenCallbacks.delete(beforeOpen);
-    }, []);
+    });
     return ref;
 }

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createElement as _createElement } from "@emotion/react";
-import { isValidElement, memo, useEffect, useRef, useState } from 'react';
+import { isValidElement, memo, useRef, useState } from 'react';
 import { Collapse, Slide } from '../transitionBase';
-import { clsx, getEasyID, useColor, useContainer } from '../../utils';
+import { clsx, getEasyID, useColor, useContainer, useUnmounted } from '../../utils';
 import { classes, style } from './snackbarBase.style';
 import { TransitionGroup } from 'react-transition-group';
 import { StatusIcon, statusMapToIconDefinition } from '../status';
@@ -36,9 +36,7 @@ const placementToIndex = {
 export const SnackbarBase = memo(({ methods, useTo, max = useTo === 'message' ? 5 : 4, container, effectContainer }) => {
     const [stacks, setStacks] = useState([]);
     const timers = useRef([]);
-    useEffect(() => () => {
-        timers.current.forEach(timer => clearTimeout(timer));
-    }, []);
+    const isUnmounted = useUnmounted();
     const defineMethod = (type) => (props) => new Promise(resolve => {
         const propsObject = typeof props === 'object' && !isValidElement(props)
             ? props
@@ -47,7 +45,7 @@ export const SnackbarBase = memo(({ methods, useTo, max = useTo === 'message' ?
         const index = placementToIndex[placement];
         let id = getEasyID('snackbar');
         const onCloseButtonClick = () => {
-            setStacks(o => {
+            !isUnmounted.current && setStacks(o => {
                 o[index] = o[index].filter(s => s.id !== id);
                 return [...o];
             });

package/dist/esm/components/tabs/tabs.js

@@ -75,15 +75,17 @@ export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', vari
     const [shadowStart, setShadowStart] = useState(false);
     const [shadowEnd, setShadowEnd] = useState(false);
     const setShadow = () => {
-        if (position === 'top' || position === 'bottom') {
-            const { scrollLeft } = scrollRef.current;
-            setShadowStart(scrollLeft > 0);
-            setShadowEnd(scrollLeft < scrollRef.current.scrollWidth - scrollRef.current.clientWidth);
-        }
-        else {
-            const { scrollTop } = scrollRef.current;
-            setShadowStart(scrollTop > 0);
-            setShadowEnd(scrollTop < scrollRef.current.scrollHeight - scrollRef.current.clientHeight);
+        if (scrollRef.current) {
+            if (position === 'top' || position === 'bottom') {
+                const { scrollLeft } = scrollRef.current;
+                setShadowStart(scrollLeft > 0);
+                setShadowEnd(scrollLeft < scrollRef.current.scrollWidth - scrollRef.current.clientWidth);
+            }
+            else {
+                const { scrollTop } = scrollRef.current;
+                setShadowStart(scrollTop > 0);
+                setShadowEnd(scrollTop < scrollRef.current.scrollHeight - scrollRef.current.clientHeight);
+            }
         }
     };
     useEffect(() => {

package/dist/esm/components/transitionBase/collapse.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { TransitionBase } from './transitionBase';
-import { cloneRef } from '../../utils';
+import { cloneRef, useStrictEffect } from '../../utils';
 export const Collapse = ({ transitionType = 'sweeping', ...props }) => {
     const Component = transitionType === 'sweeping' ? Sweeping : TransitionBase;
     return (_jsx(Component, { ...props, _mode: transitionType === 'sweeping' ? '_sweeping' : 'collapse' }));
@@ -29,11 +29,11 @@ const Sweeping = ({ ref, in: _in = false, appear = true, orientation = 'vertical
             setSize(getCollapsedSize());
         });
     };
-    const initialized = useRef(false);
-    useEffect(() => {
-        if (!initialized.current) {
+    const mounted = useRef(false);
+    useStrictEffect(() => {
+        if (!mounted.current) {
             // 首次渲染
-            initialized.current = true;
+            mounted.current = true;
             if (!appear) {
                 // 若appear为false，则跳过首次动画
                 return;

package/dist/esm/components/waterfall/waterfall.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Children, isValidElement, useEffect, useLayoutEffect, useRef } from 'react';
+import { Children, isValidElement, useLayoutEffect, useRef } from 'react';
 import { classes, useStyle } from './waterfall.style';
 import { WaterfallItem } from './waterfallItem';
-import { cloneRef, clsx, toResponsiveValue, useResponsiveValue } from '../../utils';
+import { cloneRef, clsx, toResponsiveValue, useExternalClass, useResponsiveValue, useUpdateEffect } from '../../utils';
 export const Waterfall = ({ columnCount = { xs: 4 }, gap = 0, columnGap, rowGap, ...props }) => {
     columnCount = toResponsiveValue(columnCount);
     gap = toResponsiveValue(gap);
@@ -29,17 +29,10 @@ export const Waterfall = ({ columnCount = { xs: 4 }, gap = 0, columnGap, rowGap,
             elements.current.forEach(el => resizeObserver.current.observe(el));
         });
     });
-    const isInitialized = useRef(false);
-    useEffect(() => {
-        if (!isInitialized.current) {
-            isInitialized.current = true;
-            return;
-        }
-        computeItemOrder();
-    }, [columnCountNum.current]);
-    useEffect(() => () => {
+    useUpdateEffect(computeItemOrder, [columnCountNum.current]);
+    useExternalClass(() => void 0, () => {
         resizeObserver.current.disconnect();
-    }, []);
+    });
     return (_jsx("div", { ...props, ref: cloneRef(containerRef, props.ref), css: useStyle({ columnCount, columnGap, rowGap }), className: clsx(classes.root, props.className), children: Children.map(props.children, child => {
             if (!isValidElement(child)) {
                 throw Error('Children of <Waterfall> must be element');

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

@@ -1,10 +1,5 @@
-import { RefObject, Dispatch, SetStateAction } from 'react';
+import { RefObject, Dispatch, SetStateAction, EffectCallback, DependencyList } from 'react';
 import { DefineElement } from '../types';
-/**
- * 获取渲染前的值
- * @param value
- */
-export declare function usePrev<T>(value: T): T | null;
 /**
  * 将某个值使用ref同步，主要用于对付组件的闭包问题
  * @param value
@@ -27,6 +22,7 @@ export declare function useForceUpdate(): () => void;
  */
 export declare function useDerivedState<T>(referredState: (prevState: T | undefined) => T, deps: any[]): [RefObject<T>, Dispatch<SetStateAction<T>>];
 export declare function useDerivedState<T>(referredState: T, deps?: any[]): [RefObject<T>, Dispatch<SetStateAction<T>>];
+export declare function useMounted(): void;
 /**
  * 组件卸载后得到{current: true}
  * @returns
@@ -60,3 +56,11 @@ export declare function useContainer<T extends HTMLElement | null>(container?: D
  * 使用外部类，该方法可避免`StrictMode`下，React渲染行为与外部类实例生命周期不同步的问题
  */
 export declare function useExternalClass<T>(setup: () => T, cleanup?: (instance: T) => void): T;
+/**
+ * 用法同{@link useEffect}，但StrictMode下不会执行两次
+ */
+export declare function useStrictEffect(effect: EffectCallback, deps?: DependencyList): void;
+/**
+ * 用法同{@link useEffect}，但会排除首次渲染
+ */
+export declare function useUpdateEffect(effect: EffectCallback, deps?: DependencyList): void;

package/dist/esm/utils/hooks.js

@@ -1,16 +1,5 @@
 import { useRef, useEffect, useState, useCallback, useMemo } from 'react';
-import { isPromise, getPromiseState } from './utils';
-/**
- * 获取渲染前的值
- * @param value
- */
-export function usePrev(value) {
-    const prev = useRef(null);
-    useEffect(() => {
-        prev.current = value;
-    });
-    return prev.current;
-}
+import { isPromise, getPromiseState, arrayShallowEqual } from './utils';
 /**
  * 将某个值使用ref同步，主要用于对付组件的闭包问题
  * @param value
@@ -42,6 +31,10 @@ export function useForceUpdate() {
 }
 export function useDerivedState(referredState, deps) {
     const derivedState = useRef(void 0);
+    useMemo(() => {
+        // SSR模式下，derivedState会重置2次
+        derivedState.current = void 0;
+    }, []);
     const updateState = (state) => {
         const newState = typeof state === 'function' ? state(derivedState.current) : state;
         if (derivedState.current !== newState) {
@@ -62,13 +55,15 @@ export function useDerivedState(referredState, deps) {
         }, [])
     ];
 }
+export function useMounted() {
+}
 /**
  * 组件卸载后得到{current: true}
  * @returns
  */
 export function useUnmounted() {
     const isUnmounted = useRef(false);
-    useExternalClass(() => void 0, () => () => {
+    useExternalClass(() => void 0, () => {
         isUnmounted.current = true;
     });
     return isUnmounted;
@@ -152,3 +147,29 @@ export function useExternalClass(setup, cleanup) {
     }, []);
     return instance;
 }
+/**
+ * 用法同{@link useEffect}，但StrictMode下不会执行两次
+ */
+export function useStrictEffect(effect, deps) {
+    const prevDeps = useRef(void 0);
+    useEffect(() => {
+        const isDepsChanged = prevDeps.current ? !arrayShallowEqual(prevDeps.current, deps) : true;
+        if (isDepsChanged) {
+            prevDeps.current = deps;
+            return effect();
+        }
+    });
+}
+/**
+ * 用法同{@link useEffect}，但会排除首次渲染
+ */
+export function useUpdateEffect(effect, deps) {
+    const mounted = useRef(false);
+    useStrictEffect(() => {
+        if (!mounted.current) {
+            mounted.current = true;
+            return;
+        }
+        return effect();
+    }, [deps]);
+}

package/dist/esm/utils/tree.js

@@ -82,34 +82,36 @@ export function sortTreeNodes(props, sortInfo) {
         }
         return null;
     };
-    pickUp(nodes);
-    const putDown = (nodes) => {
-        if (!nodes?.length) {
-            return false;
-        }
-        for (let i = 0, { length } = nodes; i < length; i++) {
-            const node = nodes[i];
-            if (node[primaryKey] === destination) {
-                switch (placement) {
-                    case 'before':
-                        nodes.splice(i, 0, node);
-                        return true;
-                    case 'after':
-                        nodes.splice(i + 1, 0, node);
-                        return true;
-                    default:
-                        node.children ||= [];
-                        node.children.push(node);
-                        return true;
-                }
+    const sourceNode = pickUp(nodes);
+    if (sourceNode) {
+        const putDown = (nodes) => {
+            if (!nodes?.length) {
+                return false;
             }
-            const foundInChildren = pickUp(node[childrenKey]);
-            if (foundInChildren) {
-                return foundInChildren;
+            for (let i = 0, { length } = nodes; i < length; i++) {
+                const node = nodes[i];
+                if (node[primaryKey] === destination) {
+                    switch (placement) {
+                        case 'before':
+                            nodes.splice(i, 0, sourceNode);
+                            return true;
+                        case 'after':
+                            nodes.splice(i + 1, 0, sourceNode);
+                            return true;
+                        default:
+                            node.children ||= [];
+                            node.children.push(sourceNode);
+                            return true;
+                    }
+                }
+                const foundInChildren = putDown(node[childrenKey]);
+                if (foundInChildren) {
+                    return foundInChildren;
+                }
             }
-        }
-        return false;
-    };
-    putDown(nodes);
+            return false;
+        };
+        putDown(nodes);
+    }
     return nodes;
 }

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

@@ -47,6 +47,7 @@ export declare function mergeDeep<T extends {}, U, V, W, X>(target: T, source: U
 export declare function mergeDeep<T extends {}, U, V, W, X, Y>(target: T, source: U, source2: V, source3: W, source4: X, source5: Y): T & U & V & W & X & Y;
 export declare function mergeDeep<T extends {}, U, V, W, X, Y, Z>(target: T, source: U, source2: V, source3: W, source4: X, source5: Y, source6: Z): T & U & V & W & X & Y & Z;
 export declare function mergeDeep(target: object, ...sources: any[]): any;
+export declare function arrayShallowEqual(a: any[], b: any[]): boolean;
 export type OverflowEdge = 'top' | 'bottom' | 'left' | 'right';
 /**
  * 判断元素是否完全在目标容器内，用于Popper组件

package/dist/esm/utils/utils.js

@@ -111,6 +111,22 @@ export function mergeDeep(target, ...sources) {
     }
     return target;
 }
+export function arrayShallowEqual(a, b) {
+    if (a === b) {
+        return true;
+    }
+    if (a.length !== b.length) {
+        return false;
+    }
+    let isEqual = true;
+    for (let i = 0, { length } = a; i < length; i++) {
+        if (a[i] !== b[i]) {
+            isEqual = false;
+            break;
+        }
+    }
+    return isEqual;
+}
 /**
  * 判断元素是否完全在目标容器内，用于Popper组件
  * @param target 目标元素

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.115",
+  "version": "0.0.117",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",
@@ -44,6 +44,7 @@
     "build:documentation": "vite build -c documentation/vite.config.mts && tsc -p documentation/tsconfig.bootstrap.json",
     "rebuild": "npm run clean && npm run build:core && npm run build:documentation",
     "dev": "vite -c test/vite.config.mts",
+    "dev:ssr": "next dev test",
     "dev:documentation": "vite -c documentation/vite.config.mts --host",
     "test:unit": "npx ts-node test/unit.ts"
   },
@@ -74,6 +75,7 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/react-transition-group": "^4.4.12",
     "mime": "^4.1.0",
+    "next": "^16.0.10",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "react-markdown": "^10.1.0",