@canlooks/can-ui 0.0.96 → 0.0.98

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

@@ -357,51 +357,54 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
     const hoverable = triggersSet.has('hover');
     const enterTimeout = useRef(void 0);
     const leaveTimeout = useRef(void 0);
-    const hoverStack = useRef(0);
-    const pointerEnter = () => {
-        if (hoverStack.current++) {
-            return;
-        }
+    const isOvering = useRef(false);
+    const pointerEnterFn = useCallback(() => {
         clearTimeout(leaveTimeout.current);
         mouseEnterDelay
             ? enterTimeout.current = setTimeout(() => setInnerOpen(true), mouseEnterDelay)
             : setInnerOpen(true);
-    };
-    const pointerLeave = () => {
-        if (--hoverStack.current) {
-            return;
-        }
+    }, [mouseEnterDelay]);
+    const pointerLeaveFn = useCallback(() => {
         clearTimeout(enterTimeout.current);
         mouseLeaveDelay
             ? leaveTimeout.current = setTimeout(() => setInnerOpen(false), mouseLeaveDelay)
             : setInnerOpen(false);
-    };
-    // 绑定锚点元素
+    }, [mouseLeaveDelay]);
     useEffect(() => {
         if (!hoverable) {
             return;
         }
+        const pointerOver = (e) => {
+            if (!isOvering.current && e.target === anchorRef.current) {
+                isOvering.current = true;
+                pointerEnterFn();
+            }
+        };
+        const pointerLeave = () => {
+            isOvering.current = false;
+            pointerLeaveFn();
+        };
         const anchorEl = anchorRef.current;
-        anchorEl.addEventListener('pointerenter', pointerEnter);
+        anchorEl.addEventListener('pointerover', pointerOver);
         anchorEl.addEventListener('pointerleave', pointerLeave);
         return () => {
-            anchorEl.removeEventListener('pointerenter', pointerEnter);
+            anchorEl.removeEventListener('pointerover', pointerOver);
             anchorEl.removeEventListener('pointerleave', pointerLeave);
         };
-    }, [hoverable]);
+    }, []);
     // 绑定弹框元素，鼠标移入弹框也要保持弹框打开
     useEffect(() => {
         if (!hoverable || !innerPopperRef.current) {
             return;
         }
         const popperEl = innerPopperRef.current;
-        popperEl.addEventListener('pointerenter', pointerEnter);
-        popperEl.addEventListener('pointerleave', pointerLeave);
+        popperEl.addEventListener('pointerenter', pointerEnterFn);
+        popperEl.addEventListener('pointerleave', pointerLeaveFn);
         return () => {
-            popperEl.removeEventListener('pointerenter', pointerEnter);
-            popperEl.removeEventListener('pointerleave', pointerLeave);
+            popperEl.removeEventListener('pointerenter', pointerEnterFn);
+            popperEl.removeEventListener('pointerleave', pointerLeaveFn);
         };
-    }, [innerOpen.current]);
+    }, [innerOpen.current, mouseLeaveDelay]);
     /**
      * focus相关
      */
@@ -510,7 +513,9 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
     }), [innerOpen.current, autoClose]);
     const childRef = useCallback(cloneRef(children?.props.ref, anchorRef, ref), [children?.props.ref, ref]);
     return (_jsxs(_Fragment, { children: [isValidElement(children)
-                ? cloneElement(children, { ref: childRef })
+                ? cloneElement(children, {
+                    ref: childRef
+                })
                 : children, renderedOnce.current && createPortal(_jsx(ClickAway, { disabled: !clickable && !enterable && !contextMenuable, 
                 // 右键菜单点击anchor需要关闭弹框
                 targets: () => contextMenuEvent.current ? null : anchorRef.current, onClickAway: onClickAway, children: _jsx("div", { ...props, ref: innerPopperRef, css: style, className: clsx(classes.root, props.className), style: {

package/dist/esm/components/progress/progress.js

@@ -11,6 +11,7 @@ export const Progress = memo(({ showInfo = true, renderInfo, color, status = 'de
     const isColorSpecified = !!color;
     color ??= 'primary';
     const { colors: { success, error } } = useTheme();
+    value = Math.max(0, Math.min(value, 100));
     const isSucceed = status === 'success' || (status !== 'error' && value === 100 && variant !== 'gauge');
     const renderInfoFn = () => {
         if (renderInfo) {
@@ -68,6 +69,6 @@ export const Progress = memo(({ showInfo = true, renderInfo, color, status = 'de
                                 : void 0
                         }, children: [_jsx("circle", { ...commonCircleProps, className: classes.track, strokeDasharray: variant === 'gauge' ? strokeDasharray : void 0, strokeDashoffset: variant === 'gauge' ? strokeDasharray * gapDegree / 360 : void 0 }), _jsx("circle", { ...commonCircleProps, ref: barRef, css: cssAnimation, className: classes.bar, strokeDasharray: strokeDasharray, strokeDashoffset: variant === 'circular'
                                     ? strokeDasharray * (1 - value / 100)
-                                    : strokeDasharray * (1 - Math.max(0, Math.min(100, value)) / 100 * (1 - gapDegree / 360)) })] }), showInfo && !indeterminate &&
+                                    : strokeDasharray * (1 - value / 100 * (1 - gapDegree / 360)) })] }), showInfo && !indeterminate &&
                         _jsx("div", { className: classes.info, children: renderInfoFn() })] }) }));
 });

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

@@ -3,8 +3,8 @@ export declare const classes: {
     info: string;
     track: string;
     svg: string;
-    icon: string;
     bar: string;
+    icon: string;
 } & {
     root: string;
 };

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

@@ -1,8 +1,8 @@
 import { Handle, ResizableProps } from './resizable';
 export declare const classes: {
+    container: string;
     corner: string;
     edge: string;
-    container: string;
 } & {
     root: string;
 };

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

@@ -3,8 +3,8 @@ export declare const classes: {
     label: string;
     option: string;
     prefix: string;
-    indicator: string;
     suffix: string;
+    indicator: string;
 } & {
     root: string;
 };

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

@@ -32,4 +32,4 @@ export declare const Select: {
     <O extends MenuOptionType, V extends Id = Id>(props: SelectProps<O, V>): ReactElement;
     Option: typeof MenuItem;
 };
-export declare const Option: import("react").MemoExoticComponent<({ value, size, color, emphasized, selected, focused, disabled, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level, indent, expandIcon, defaultExpanded, expanded, onExpandedChange, ...props }: import("../menuItem").MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Option: import("react").MemoExoticComponent<({ value, size, color, emphasized, selected, focused, disabled, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, scrollHere, _level, indent, expandIcon, defaultExpanded, expanded, onExpandedChange, ...props }: import("../menuItem").MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -4,6 +4,8 @@ export interface OptionType<V extends Id = Id> extends Obj {
     children?: OptionType<V>[];
     /** @private */
     _parentId?: V;
+    /** @private */
+    _isLast?: boolean;
 }
 export type SelectionContextBaseProps<O extends OptionType<V>, V extends Id = Id> = {
     options?: O[];

package/dist/esm/components/selectionContext/selectionHook.js

@@ -29,8 +29,9 @@ export function useSelection(props) {
         const map = new Map();
         const fn = (arr, parentId) => {
             // 有时arr可能不为数组，需要判断，如DataGrid组件的row.children
-            Array.isArray(arr) && arr.forEach(item => {
+            Array.isArray(arr) && arr.forEach((item, i) => {
                 item._parentId = parentId;
+                item._isLast = i === arr.length - 1;
                 const id = item[props.primaryKey];
                 !isUnset(id) && map.set(id, item);
                 fn(item[props.childrenKey], id);

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

@@ -2,8 +2,8 @@ export declare const classes: {
     text: string;
     title: string;
     content: string;
-    close: string;
     icon: string;
+    close: string;
     item: string;
     titleRow: string;
     itemWrap: string;

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

@@ -1,7 +1,7 @@
 export declare const classes: {
     label: string;
-    icon: string;
     dot: string;
+    icon: string;
 } & {
     root: string;
 };

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

@@ -1,14 +1,14 @@
 import { TabsProps } from './tabs';
 export declare const classes: {
     label: string;
-    scroll: string;
     prefix: string;
+    suffix: string;
+    indicator: string;
     end: string;
-    ellipsis: string;
     start: string;
+    scroll: string;
+    ellipsis: string;
     tab: string;
-    indicator: string;
-    suffix: string;
     scrollWrap: string;
     tabPrefix: string;
     tabSuffix: string;

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

@@ -1,9 +1,9 @@
 import { TagProps } from './tag';
 export declare const classes: {
-    content: string;
-    close: string;
     prefix: string;
+    content: string;
     suffix: string;
+    close: string;
 } & {
     root: string;
 };

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

@@ -2,11 +2,11 @@ export declare const classes: {
     info: string;
     header: string;
     title: string;
-    list: string;
     checkbox: string;
+    list: string;
+    buttons: string;
     count: string;
     panel: string;
-    buttons: string;
 } & {
     root: string;
 };

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

@@ -6,11 +6,11 @@ import { TreeNode, TreeNodeProps } from './treeNode';
 export interface NodeType<V extends Id = Id> extends Partial<Omit<TreeNodeProps, 'children'>>, Omit<OptionType<V>, 'children'> {
     children?: NodeType<V>[];
 }
-export type SortPlacement = 'before' | 'after';
+export type SortPlacement = 'before' | 'after' | 'child';
 export type SortInfo<V extends Id = Id> = {
     source: V;
     destination: V;
-    placement: SortPlacement | 'child';
+    placement: SortPlacement;
 };
 export interface TreeBaseProps<N extends NodeType<V>, V extends Id = Id> extends Omit<SelectionContextBaseProps<N, V>, 'options'>, Omit<DivProps, 'defaultValue' | 'onChange' | 'onToggle'> {
     nodes?: N[];

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

@@ -1,10 +1,10 @@
 import { createElement as _createElement } from "@emotion/react";
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { Children, createContext, isValidElement, memo, useContext, useMemo, useRef } from 'react';
+import { Children, createContext, isValidElement, memo, useContext, useMemo } from 'react';
 import { SelectionContext } from '../selectionContext';
 import { Input } from '../input';
-import { classes, style } from './tree.style';
-import { cloneRef, clsx, useTreeSearch } from '../../utils';
+import { classes, useStyle } from './tree.style';
+import { clsx, useTreeSearch } from '../../utils';
 import { Highlight } from '../highlight';
 import { TreeNode } from './treeNode';
 import { Icon } from '../icon';
@@ -17,11 +17,6 @@ export function useTreeContext() {
 export const Tree = memo(({ nodes, labelKey = 'label', searchTokenKey, showLine = true, indent = 24, renderExpandIcon, multiple, showCheckbox = !!multiple, readOnly, clickLabelToExpand, defaultExpanded, expanded, onExpandedChange, sortable = false, showDragHandle = true, onSort, searchable, searchInputProps, defaultSearchValue, searchValue, onSearchChange, 
 // 从SelectionContext继承来的属性
 primaryKey = 'id', childrenKey = 'children', relation = 'dependent', integration = 'shallowest', clearable, disabled, defaultValue, value, onChange, onToggle, ...props }) => {
-    const selectionContextProps = {
-        options: nodes, primaryKey, childrenKey, relation, integration,
-        multiple, defaultValue, value, onChange, disabled
-    };
-    const containerRef = useRef(null);
     /**
      * --------------------------------------------------------------
      * 统一处理nodes与children
@@ -53,30 +48,37 @@ primaryKey = 'id', childrenKey = 'children', relation = 'dependent', integration
         defaultExpanded, expanded, onExpandedChange,
         defaultSearchValue, searchValue, onSearchChange
     });
-    return (_jsxs("div", { ...props, ref: cloneRef(containerRef, props.ref), css: style, className: clsx(classes.root, classes.levelBlock, props.className), "data-show-line": showLine, "data-sortable": sortable, children: [searchable &&
+    return (_jsxs("div", { ...props, css: useStyle({ indent }), className: clsx(classes.root, props.className), "data-show-line": showLine, children: [searchable &&
                 _jsx(Input, { className: classes.search, prefix: _jsx(Icon, { icon: faMagnifyingGlass }), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, onChange: e => {
                         searchInputProps?.onChange?.(e);
                         setInnerSearchValue(e.target.value);
-                    } }), _jsx(SelectionContext, { ...selectionContextProps, children: _jsx(TreeContext, { value: useMemo(() => ({
+                    } }), _jsx(SelectionContext, { ...{
+                    options: actualTreeNodes, primaryKey, childrenKey, relation, integration,
+                    multiple, defaultValue, value, onChange, disabled
+                }, children: _jsx(TreeContext, { value: useMemo(() => ({
                         expandedSet, toggleExpanded, indent, renderExpandIcon, clickLabelToExpand,
                         showCheckbox, readOnly, disabled
                     }), [
                         expandedSet, indent, renderExpandIcon, clickLabelToExpand,
                         showCheckbox, readOnly, disabled
-                    ]), children: _jsx(TreeDnd, { sortable: sortable, showDragHandle: showDragHandle, onSort: onSort, containerRef: containerRef, children: useMemo(() => {
+                    ]), children: _jsx(TreeDnd, { sortable: sortable, showDragHandle: showDragHandle, onSort: onSort, children: useMemo(() => {
                             if (!filteredTreeData?.length) {
                                 return null;
                             }
                             const fn = (arr) => {
-                                return arr?.map(({ _parentId, ...nodeProps }, i) => {
-                                    const currentValue = nodeProps[primaryKey];
+                                return arr?.map(({ _isLast, _parentId, ...nodeProps }) => {
+                                    const currentId = nodeProps[primaryKey];
                                     const label = nodeProps[labelKey];
-                                    return (_createElement(TreeNode, { ...nodeProps, key: currentValue, value: currentValue, label: typeof label === 'string' && deferredSearchValue
+                                    const children = nodeProps[childrenKey];
+                                    delete nodeProps[primaryKey];
+                                    delete nodeProps[labelKey];
+                                    delete nodeProps[childrenKey];
+                                    return (_createElement(TreeNode, { ...nodeProps, key: currentId, id: currentId, label: typeof label === 'string' && deferredSearchValue
                                             ? _jsx(Highlight, { keywords: deferredSearchValue.split(' '), children: label })
-                                            : label }, fn(nodeProps[childrenKey])));
+                                            : label }, fn(children)));
                                 });
                             };
                             return fn(filteredTreeData);
-                        }, [filteredTreeData]) }) }) })] }));
+                        }, [filteredTreeData, primaryKey, labelKey, childrenKey, deferredSearchValue]) }) }) })] }));
 });
 Tree.Node = TreeNode;

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

@@ -2,20 +2,16 @@ export declare const classes: {
     label: string;
     search: string;
     prefix: string;
+    suffix: string;
+    checkbox: string;
     icon: string;
     expand: string;
     indent: string;
     node: string;
-    checkbox: string;
-    container: string;
-    suffix: string;
     contentWrap: string;
-    levelBlock: string;
-    dragHandle: string;
-    dragMask: string;
-    dragMaskPrev: string;
-    dragMaskNext: string;
 } & {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare function useStyle({ indent }: {
+    indent: number;
+}): import("@emotion/react").SerializedStyles[];