@canlooks/can-ui 0.0.111 → 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/image/image.js

@@ -47,6 +47,6 @@ exports.Image = (0, react_1.memo)(({ src, fallback, onLoad, onError, renderLoadi
                 }, onLoad: loadHandler, onError: errorHandler }), loading.current &&
                 (renderLoading ?? (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: image_style_1.classes.skeleton })), !!renderedActions && !failed.current &&
                 (0, jsx_runtime_1.jsx)("div", { className: image_style_1.classes.mask, children: renderedActions }), previewable && src &&
-                (0, jsx_runtime_1.jsx)(gallery_1.Gallery, { src: [src], ...previewProps, open: previewOpen.current, onOpenChange: setPreviewOpen })] }));
+                (0, jsx_runtime_1.jsx)(gallery_1.Gallery, { src: [src], ...previewProps, open: previewOpen.current, onOpenChange: setPreviewOpen, onPointerDown: e => e.stopPropagation() })] }));
 });
 exports.Image.Gallery = gallery_1.Gallery;

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/pinchable/pinchable.js

@@ -15,12 +15,12 @@ exports.Pinchable = (({ component: Component = 'div', ref, gestureOptions, defau
                 zoomFn(innerScale.current * .5);
             };
             wrapperRef.current.zoomTo = zoomFn;
-            wrapperRef.current.rotate =
-                wrapperRef.current.rotateLeft = () => {
-                    rotateFn(innerRotate.current - 90);
-                };
+            wrapperRef.current.rotate = rotateFn;
+            wrapperRef.current.rotateLeft = () => {
+                rotateFn(innerRotate.current - 90);
+            };
             wrapperRef.current.rotateRight = () => {
-                rotateFn(innerRotate.current + 90);
+                rotateFn(innerRotate.current - 90);
             };
             wrapperRef.current.reset = resetAll;
         }
@@ -134,7 +134,7 @@ exports.Pinchable = (({ component: Component = 'div', ref, gestureOptions, defau
         resetZoom(false);
         setInnerRotate(0);
     };
-    const doubleClickHandler = (e) => {
+    const onDoubleClick = (e) => {
         childrenProps.onDoubleClick?.(e);
         if (innerScale.current < 1.5) {
             zoomFn(3, e.clientX, e.clientY);
@@ -143,12 +143,16 @@ exports.Pinchable = (({ component: Component = 'div', ref, gestureOptions, defau
             resetZoom();
         }
     };
-    const wheelHandler = (e) => {
+    const onWheel = (e) => {
         childrenProps.onMouseWheel?.(e);
         e.deltaY > 0
             ? zoomFn(innerScale.current * .8, e.clientX, e.clientY)
             : zoomFn(innerScale.current * 1.2, e.clientX, e.clientY);
     };
+    const onTransitionEnd = (e) => {
+        e.currentTarget.dataset.transition = 'false';
+        setInnerRotate(innerRotate.current % 360);
+    };
     return ((0, jsx_runtime_1.jsx)(Component, { ...props, ref: wrapperRef, css: pinchable_style_1.style, className: (0, utils_1.clsx)(pinchable_style_1.classes.root, props.className), ...pinchableHandles, children: (0, react_1.cloneElement)(children, {
             ref: (0, utils_1.cloneRef)(contentRef, childrenProps.ref),
             className: (0, utils_1.clsx)(pinchable_style_1.classes.content, childrenProps.className),
@@ -160,8 +164,8 @@ exports.Pinchable = (({ component: Component = 'div', ref, gestureOptions, defau
                 transformOrigin: 'center'
             },
             ...draggableHandles,
-            onDoubleClick: doubleClickHandler,
-            onWheel: wheelHandler,
-            onTransitionEnd: e => e.currentTarget.dataset.transition = 'false'
+            onDoubleClick,
+            onWheel,
+            onTransitionEnd
         }) }));
 });

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/components/sortableItem/sortableItem.js

@@ -6,6 +6,9 @@ const react_1 = require("react");
 const sortable_1 = require("@dnd-kit/sortable");
 const utilities_1 = require("@dnd-kit/utilities");
 const utils_1 = require("../../utils");
+const react_2 = require("@emotion/react");
+const treeDnd_style_1 = require("../tree/treeDnd.style");
+const sortableItem_style_1 = require("./sortableItem.style");
 exports.SortableItem = (({ component: Component = 'div', id, disabled, sortableArguments, ...props }) => {
     const { attributes, isDragging, listeners, setNodeRef, transform, transition } = (0, sortable_1.useSortable)({
         ...sortableArguments,
@@ -30,9 +33,9 @@ exports.SortableItem = (({ component: Component = 'div', id, disabled, sortableA
         addEventListener('pointerup', onPointerUp);
     }, []);
     (0, react_1.useEffect)(() => removeListener, []);
-    return ((0, jsx_runtime_1.jsx)(Component, { ...attributes, ...listeners, ...props, ref: (0, utils_1.cloneRef)(setNodeRef, props.ref), style: {
-            transform: utilities_1.CSS.Transform.toString(transform),
-            transition,
-            ...props.style
-        }, onTouchStart: disabled ? void 0 : onTouchStart, "data-dragging": isDragging }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Component, { ...attributes, ...listeners, ...props, ref: (0, utils_1.cloneRef)(setNodeRef, props.ref), css: sortableItem_style_1.style, className: (0, utils_1.clsx)(sortableItem_style_1.classes.root, props.className), style: {
+                    transform: utilities_1.CSS.Transform.toString(transform),
+                    transition,
+                    ...props.style
+                }, onTouchStart: disabled ? void 0 : onTouchStart, "data-dragging": isDragging }), isDragging && (0, jsx_runtime_1.jsx)(react_2.Global, { styles: treeDnd_style_1.globalGrabbingStyle })] }));
 });

package/dist/cjs/components/sortableItem/sortableItem.style.d.ts

@@ -0,0 +1,5 @@
+export declare const classes: {
+    root: string;
+};
+export declare const style: import("@emotion/react").SerializedStyles;
+export declare const globalGrabbingStyle: import("@emotion/react").SerializedStyles;

package/dist/cjs/components/sortableItem/sortableItem.style.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.globalGrabbingStyle = exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineInnerClasses)('sortable-item');
+exports.style = (0, react_1.css) `
+    cursor: grab;
+    
+    &:active {
+        cursor: grabbing;
+    }
+`;
+exports.globalGrabbingStyle = (0, react_1.css) `
+    * {
+        cursor: grabbing;
+    }
+`;

package/dist/cjs/components/tree/treeDnd.js

@@ -5,6 +5,7 @@ exports.useTreeDndContext = useTreeDndContext;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const treeDnd_style_1 = require("./treeDnd.style");
+const react_2 = require("@emotion/react");
 exports.TreeDndContext = (0, react_1.createContext)({});
 function useTreeDndContext() {
     return (0, react_1.useContext)(exports.TreeDndContext);
@@ -13,8 +14,8 @@ exports.TreeDnd = (0, react_1.memo)(({ sortable, showDragHandle, onSort, childre
     const dragging = (0, react_1.useState)(void 0);
     const overing = (0, react_1.useRef)(void 0);
     const placement = (0, react_1.useRef)(void 0);
-    return ((0, jsx_runtime_1.jsx)(exports.TreeDndContext, { value: {
+    return ((0, jsx_runtime_1.jsxs)(exports.TreeDndContext, { value: {
             sortable, showDragHandle, onSort,
             dragging, overing, placement
-        }, children: (0, jsx_runtime_1.jsx)("div", { className: treeDnd_style_1.treeDndClasses.levelBlock, children: children }) }));
+        }, children: [(0, jsx_runtime_1.jsx)("div", { className: treeDnd_style_1.treeDndClasses.levelBlock, children: children }), !!dragging[0] && (0, jsx_runtime_1.jsx)(react_2.Global, { styles: treeDnd_style_1.globalGrabbingStyle })] }));
 });

package/dist/cjs/components/tree/treeDnd.style.d.ts

@@ -13,3 +13,4 @@ export declare const treeDndClasses: {
 export declare function useStyle({ indent }: {
     indent: number;
 }): import("@emotion/react").SerializedStyles;
+export declare const globalGrabbingStyle: import("@emotion/react").SerializedStyles;

package/dist/cjs/components/tree/treeDnd.style.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.treeDndClasses = void 0;
+exports.globalGrabbingStyle = exports.treeDndClasses = void 0;
 exports.useStyle = useStyle;
 const tslib_1 = require("tslib");
 const utils_1 = require("../../utils");
@@ -191,3 +191,8 @@ function useStyle({ indent }) {
         }
     `, [indent]);
 }
+exports.globalGrabbingStyle = (0, react_1.css) `
+    * {
+        cursor: grabbing;
+    }
+`;

package/dist/cjs/components/tree/treeNode.js

@@ -64,6 +64,7 @@ exports.TreeNode = (0, react_1.memo)(({ id, label, prefix, suffix, disabled, _le
     const pointerLeavePredecessor = (e) => {
         inactiveBlock(e.currentTarget);
     };
+    const overingTimeout = (0, react_1.useRef)(void 0);
     const activeBlock = (el, _placement, upLevel = 0) => {
         if (_placement === 'parent') {
             let i = upLevel;
@@ -93,6 +94,13 @@ exports.TreeNode = (0, react_1.memo)(({ id, label, prefix, suffix, disabled, _le
                 return true;
             }
         });
+        // 如果有children且为折叠状态，over在该节点上一定时间后，需要展开该节点
+        if (hasChildren && !currentExpanded) {
+            overingTimeout.current ||= setTimeout(() => {
+                overingTimeout.current = void 0;
+                toggleExpanded(id);
+            }, 600);
+        }
     };
     const inactiveBlock = (el) => {
         if (el) {
@@ -105,6 +113,10 @@ exports.TreeNode = (0, react_1.memo)(({ id, label, prefix, suffix, disabled, _le
             el.dataset.active = 'false';
         });
         overing.current = void 0;
+        if (overingTimeout.current) {
+            clearTimeout(overingTimeout.current);
+            overingTimeout.current = void 0;
+        }
     };
     /**
      * ---------------------------------------------------------------------

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/cjs/utils/tree.d.ts

@@ -1,4 +1,5 @@
 import { Id, Obj } from '../types';
+import { NodeType, SortInfo } from '../components/tree';
 /**
  * ------------------------------------------------------------------------
  * 统一处理树形搜索
@@ -25,3 +26,11 @@ export declare function useTreeSearch<N extends Obj, V extends Id = Id>({ nodes,
     setInnerSearchValue: import("react").Dispatch<import("react").SetStateAction<string>>;
     filteredTreeData: N[] | undefined;
 };
+/**
+ * 得到排序后的树结构
+ */
+export declare function sortTreeNodes<N extends NodeType<V>, V extends Id = Id>(props: {
+    nodes: N[];
+    primaryKey?: keyof N;
+    childrenKey?: keyof N;
+}, sortInfo: SortInfo<V>): N[];

package/dist/cjs/utils/tree.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTreeSearch = useTreeSearch;
+exports.sortTreeNodes = sortTreeNodes;
 const react_1 = require("react");
 const hooks_1 = require("./hooks");
 function useTreeSearch({ nodes, primaryKey = 'id', labelKey = 'label', childrenKey = 'children', searchTokenKey = 'searchToken', defaultExpanded = [], expanded, onExpandedChange, defaultSearchValue = '', searchValue, onSearchChange }) {
@@ -61,3 +62,58 @@ function useTreeSearch({ nodes, primaryKey = 'id', labelKey = 'label', childrenK
         filteredTreeData
     };
 }
+/**
+ * 得到排序后的树结构
+ */
+function sortTreeNodes(props, sortInfo) {
+    let { nodes, primaryKey = 'id', childrenKey = 'children' } = props;
+    const { source, destination, placement } = sortInfo;
+    nodes = structuredClone(nodes);
+    const pickUp = (nodes) => {
+        if (!nodes?.length) {
+            return null;
+        }
+        for (let i = 0, { length } = nodes; i < length; i++) {
+            const node = nodes[i];
+            if (node[primaryKey] === source) {
+                nodes.splice(i, 1);
+                return node;
+            }
+            const foundInChildren = pickUp(node[childrenKey]);
+            if (foundInChildren) {
+                return foundInChildren;
+            }
+        }
+        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 foundInChildren = pickUp(node[childrenKey]);
+            if (foundInChildren) {
+                return foundInChildren;
+            }
+        }
+        return false;
+    };
+    putDown(nodes);
+    return nodes;
+}

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/image/image.js

@@ -44,6 +44,6 @@ export const Image = memo(({ src, fallback, onLoad, onError, renderLoading, alt
                 }, onLoad: loadHandler, onError: errorHandler }), loading.current &&
                 (renderLoading ?? _jsx(Skeleton, { className: classes.skeleton })), !!renderedActions && !failed.current &&
                 _jsx("div", { className: classes.mask, children: renderedActions }), previewable && src &&
-                _jsx(Gallery, { src: [src], ...previewProps, open: previewOpen.current, onOpenChange: setPreviewOpen })] }));
+                _jsx(Gallery, { src: [src], ...previewProps, open: previewOpen.current, onOpenChange: setPreviewOpen, onPointerDown: e => e.stopPropagation() })] }));
 });
 Image.Gallery = Gallery;

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/pinchable/pinchable.js

@@ -12,12 +12,12 @@ export const Pinchable = (({ component: Component = 'div', ref, gestureOptions,
                 zoomFn(innerScale.current * .5);
             };
             wrapperRef.current.zoomTo = zoomFn;
-            wrapperRef.current.rotate =
-                wrapperRef.current.rotateLeft = () => {
-                    rotateFn(innerRotate.current - 90);
-                };
+            wrapperRef.current.rotate = rotateFn;
+            wrapperRef.current.rotateLeft = () => {
+                rotateFn(innerRotate.current - 90);
+            };
             wrapperRef.current.rotateRight = () => {
-                rotateFn(innerRotate.current + 90);
+                rotateFn(innerRotate.current - 90);
             };
             wrapperRef.current.reset = resetAll;
         }
@@ -131,7 +131,7 @@ export const Pinchable = (({ component: Component = 'div', ref, gestureOptions,
         resetZoom(false);
         setInnerRotate(0);
     };
-    const doubleClickHandler = (e) => {
+    const onDoubleClick = (e) => {
         childrenProps.onDoubleClick?.(e);
         if (innerScale.current < 1.5) {
             zoomFn(3, e.clientX, e.clientY);
@@ -140,12 +140,16 @@ export const Pinchable = (({ component: Component = 'div', ref, gestureOptions,
             resetZoom();
         }
     };
-    const wheelHandler = (e) => {
+    const onWheel = (e) => {
         childrenProps.onMouseWheel?.(e);
         e.deltaY > 0
             ? zoomFn(innerScale.current * .8, e.clientX, e.clientY)
             : zoomFn(innerScale.current * 1.2, e.clientX, e.clientY);
     };
+    const onTransitionEnd = (e) => {
+        e.currentTarget.dataset.transition = 'false';
+        setInnerRotate(innerRotate.current % 360);
+    };
     return (_jsx(Component, { ...props, ref: wrapperRef, css: style, className: clsx(classes.root, props.className), ...pinchableHandles, children: cloneElement(children, {
             ref: cloneRef(contentRef, childrenProps.ref),
             className: clsx(classes.content, childrenProps.className),
@@ -157,8 +161,8 @@ export const Pinchable = (({ component: Component = 'div', ref, gestureOptions,
                 transformOrigin: 'center'
             },
             ...draggableHandles,
-            onDoubleClick: doubleClickHandler,
-            onWheel: wheelHandler,
-            onTransitionEnd: e => e.currentTarget.dataset.transition = 'false'
+            onDoubleClick,
+            onWheel,
+            onTransitionEnd
         }) }));
 });

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/components/sortableItem/sortableItem.js

@@ -1,8 +1,11 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useCallback, useEffect, useRef } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { cloneRef, useSync } from '../../utils';
+import { cloneRef, clsx, useSync } from '../../utils';
+import { Global } from '@emotion/react';
+import { globalGrabbingStyle } from '../tree/treeDnd.style';
+import { classes, style } from './sortableItem.style';
 export const SortableItem = (({ component: Component = 'div', id, disabled, sortableArguments, ...props }) => {
     const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
         ...sortableArguments,
@@ -27,9 +30,9 @@ export const SortableItem = (({ component: Component = 'div', id, disabled, sort
         addEventListener('pointerup', onPointerUp);
     }, []);
     useEffect(() => removeListener, []);
-    return (_jsx(Component, { ...attributes, ...listeners, ...props, ref: cloneRef(setNodeRef, props.ref), style: {
-            transform: CSS.Transform.toString(transform),
-            transition,
-            ...props.style
-        }, onTouchStart: disabled ? void 0 : onTouchStart, "data-dragging": isDragging }));
+    return (_jsxs(_Fragment, { children: [_jsx(Component, { ...attributes, ...listeners, ...props, ref: cloneRef(setNodeRef, props.ref), css: style, className: clsx(classes.root, props.className), style: {
+                    transform: CSS.Transform.toString(transform),
+                    transition,
+                    ...props.style
+                }, onTouchStart: disabled ? void 0 : onTouchStart, "data-dragging": isDragging }), isDragging && _jsx(Global, { styles: globalGrabbingStyle })] }));
 });

package/dist/esm/components/sortableItem/sortableItem.style.d.ts

@@ -0,0 +1,5 @@
+export declare const classes: {
+    root: string;
+};
+export declare const style: import("@emotion/react").SerializedStyles;
+export declare const globalGrabbingStyle: import("@emotion/react").SerializedStyles;

package/dist/esm/components/sortableItem/sortableItem.style.js

@@ -0,0 +1,15 @@
+import { css } from '@emotion/react';
+import { defineInnerClasses } from '../../utils';
+export const classes = defineInnerClasses('sortable-item');
+export const style = css `
+    cursor: grab;
+    
+    &:active {
+        cursor: grabbing;
+    }
+`;
+export const globalGrabbingStyle = css `
+    * {
+        cursor: grabbing;
+    }
+`;

package/dist/esm/components/tree/treeDnd.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createContext, memo, useContext, useRef, useState } from 'react';
-import { treeDndClasses } from './treeDnd.style';
+import { globalGrabbingStyle, treeDndClasses } from './treeDnd.style';
+import { Global } from '@emotion/react';
 export const TreeDndContext = createContext({});
 export function useTreeDndContext() {
     return useContext(TreeDndContext);
@@ -9,8 +10,8 @@ export const TreeDnd = memo(({ sortable, showDragHandle, onSort, children }) =>
     const dragging = useState(void 0);
     const overing = useRef(void 0);
     const placement = useRef(void 0);
-    return (_jsx(TreeDndContext, { value: {
+    return (_jsxs(TreeDndContext, { value: {
             sortable, showDragHandle, onSort,
             dragging, overing, placement
-        }, children: _jsx("div", { className: treeDndClasses.levelBlock, children: children }) }));
+        }, children: [_jsx("div", { className: treeDndClasses.levelBlock, children: children }), !!dragging[0] && _jsx(Global, { styles: globalGrabbingStyle })] }));
 });

package/dist/esm/components/tree/treeDnd.style.d.ts

@@ -13,3 +13,4 @@ export declare const treeDndClasses: {
 export declare function useStyle({ indent }: {
     indent: number;
 }): import("@emotion/react").SerializedStyles;
+export declare const globalGrabbingStyle: import("@emotion/react").SerializedStyles;

package/dist/esm/components/tree/treeDnd.style.js

@@ -186,3 +186,8 @@ export function useStyle({ indent }) {
         }
     `, [indent]);
 }
+export const globalGrabbingStyle = css `
+    * {
+        cursor: grabbing;
+    }
+`;

package/dist/esm/components/tree/treeNode.js

@@ -61,6 +61,7 @@ export const TreeNode = memo(({ id, label, prefix, suffix, disabled, _level = 0,
     const pointerLeavePredecessor = (e) => {
         inactiveBlock(e.currentTarget);
     };
+    const overingTimeout = useRef(void 0);
     const activeBlock = (el, _placement, upLevel = 0) => {
         if (_placement === 'parent') {
             let i = upLevel;
@@ -90,6 +91,13 @@ export const TreeNode = memo(({ id, label, prefix, suffix, disabled, _level = 0,
                 return true;
             }
         });
+        // 如果有children且为折叠状态，over在该节点上一定时间后，需要展开该节点
+        if (hasChildren && !currentExpanded) {
+            overingTimeout.current ||= setTimeout(() => {
+                overingTimeout.current = void 0;
+                toggleExpanded(id);
+            }, 600);
+        }
     };
     const inactiveBlock = (el) => {
         if (el) {
@@ -102,6 +110,10 @@ export const TreeNode = memo(({ id, label, prefix, suffix, disabled, _level = 0,
             el.dataset.active = 'false';
         });
         overing.current = void 0;
+        if (overingTimeout.current) {
+            clearTimeout(overingTimeout.current);
+            overingTimeout.current = void 0;
+        }
     };
     /**
      * ---------------------------------------------------------------------

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/dist/esm/utils/tree.d.ts

@@ -1,4 +1,5 @@
 import { Id, Obj } from '../types';
+import { NodeType, SortInfo } from '../components/tree';
 /**
  * ------------------------------------------------------------------------
  * 统一处理树形搜索
@@ -25,3 +26,11 @@ export declare function useTreeSearch<N extends Obj, V extends Id = Id>({ nodes,
     setInnerSearchValue: import("react").Dispatch<import("react").SetStateAction<string>>;
     filteredTreeData: N[] | undefined;
 };
+/**
+ * 得到排序后的树结构
+ */
+export declare function sortTreeNodes<N extends NodeType<V>, V extends Id = Id>(props: {
+    nodes: N[];
+    primaryKey?: keyof N;
+    childrenKey?: keyof N;
+}, sortInfo: SortInfo<V>): N[];

package/dist/esm/utils/tree.js

@@ -58,3 +58,58 @@ export function useTreeSearch({ nodes, primaryKey = 'id', labelKey = 'label', ch
         filteredTreeData
     };
 }
+/**
+ * 得到排序后的树结构
+ */
+export function sortTreeNodes(props, sortInfo) {
+    let { nodes, primaryKey = 'id', childrenKey = 'children' } = props;
+    const { source, destination, placement } = sortInfo;
+    nodes = structuredClone(nodes);
+    const pickUp = (nodes) => {
+        if (!nodes?.length) {
+            return null;
+        }
+        for (let i = 0, { length } = nodes; i < length; i++) {
+            const node = nodes[i];
+            if (node[primaryKey] === source) {
+                nodes.splice(i, 1);
+                return node;
+            }
+            const foundInChildren = pickUp(node[childrenKey]);
+            if (foundInChildren) {
+                return foundInChildren;
+            }
+        }
+        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 foundInChildren = pickUp(node[childrenKey]);
+            if (foundInChildren) {
+                return foundInChildren;
+            }
+        }
+        return false;
+    };
+    putDown(nodes);
+    return nodes;
+}

package/package.json

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