@canlooks/can-ui 0.0.96 → 0.0.97

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[];

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

@@ -1,244 +1,133 @@
 import { css } from '@emotion/react';
-import { defineInnerClasses, defineCss } from '../../utils';
+import { defineInnerClasses, useCss } from '../../utils';
 import Color from 'color';
+import { useStyle as useDndStyle } from './treeDnd.style';
 export const classes = defineInnerClasses('tree', [
-    'levelBlock',
     'search',
-    'container',
     'node',
     'contentWrap',
     'indent',
     'expand',
     'checkbox',
-    'dragHandle',
     'icon',
     'label',
     'prefix',
-    'suffix',
-    'dragMask',
-    'dragMaskPrev',
-    'dragMaskNext'
+    'suffix'
 ]);
-export const style = defineCss(({ spacing, mode, borderRadius, text, easing, gray, divider, colors }) => {
-    const c = Color(colors.primary.main);
-    const hover = gray(mode === 'light' ? .05 : .2);
-    const active = gray(mode === 'light' ? .1 : .12);
-    const selectedBg = c.alpha(mode === 'light' ? .1 : .2).string();
-    const selectedHover = c.alpha(mode === 'light' ? .07 : .17).string();
-    const selectedActive = c.alpha(mode === 'light' ? .13 : .23).string();
-    return css `
-        .${classes.search} {
-            margin-bottom: ${spacing[3]}px;
-        }
-        
-        .${classes.container}[data-dragging=true] {
-            &, * {
-                cursor: grabbing;
-            }
-        }
-
-        .${classes.node} {
-            display: flex;
-            align-items: center;
-            padding-right: ${spacing[2]}px;
-            border-radius: ${borderRadius}px;
-            transition: background-color .25s ${easing.easeOut};
-            touch-action: none;
-            -webkit-tap-highlight-color: transparent;
-
-            &[data-disabled=true] {
-                color: ${text.disabled};
-                cursor: not-allowed;
-            }
-
-            &:not([data-read-only=true]) {
-                cursor: pointer;
-            }
-
-            &[data-selected=true] {
-                background-color: ${selectedBg};
-
-                &:hover {
-                    background-color: ${selectedHover};
+export function useStyle({ indent }) {
+    return [
+        useCss(({ spacing, mode, borderRadius, text, easing, gray, divider, colors }) => {
+            const c = Color(colors.primary.main);
+            const hover = gray(mode === 'light' ? .05 : .2);
+            const active = gray(mode === 'light' ? .1 : .12);
+            const selectedBg = c.alpha(mode === 'light' ? .1 : .2).string();
+            const selectedHover = c.alpha(mode === 'light' ? .07 : .17).string();
+            const selectedActive = c.alpha(mode === 'light' ? .13 : .23).string();
+            return css `
+                .${classes.search} {
+                    margin-bottom: ${spacing[3]}px;
                 }
 
-                &:active {
-                    transition: background-color 0s;
-                    background-color: ${selectedActive};
-                }
-            }
-
-            &:not([data-disabled=true]):not([data-selected=true]):hover {
-                background-color: ${hover};
-            }
-
-            &:not([data-disabled=true]):not([data-selected=true]):active {
-                transition: background-color 0s;
-                background-color: ${active};
-            }
-
-            .${classes.indent} {
-                align-self: stretch;
-                display: flex;
-            }
-
-            .${classes.expand} {
-                width: 29px;
-                align-self: stretch;
-                align-items: center;
-                justify-content: center;
-
-                .${classes.icon} {
-                    transition: rotate .25s ${easing.easeOut};
-                }
-            }
-
-            .${classes.contentWrap} {
-                flex: 1;
-                display: flex;
-                align-items: center;
-                position: relative;
-            }
-
-            .${classes.dragHandle} {
-                width: 20px;
-                margin-right: ${spacing[3]}px;
-                text-align: center;
-                color: ${gray(.12)};
-                cursor: grab;
-            }
-
-            .${classes.checkbox} {
-                margin-right: ${spacing[3]}px;
-            }
-
-            .${classes.label} {
-                flex: 1;
-                padding: 5px 0;
-
-            }
-
-            .${classes.prefix} {
-                color: ${text.secondary};
-                margin-right: ${spacing[2]}px;
-            }
-
-            .${classes.suffix} {
-                color: ${text.disabled};
-                margin-left: ${spacing[2]}px;
-            }
-
-            .${classes.dragMask} {
-                position: absolute;
-                inset: 0;
-
-                > div {
-                    width: 100%;
-                    height: 50%;
-                    position: absolute;
-                    left: 0;
-
-                    &:before, &:after {
-                        content: '';
-                        display: none;
-                        position: absolute;
-                        pointer-events: none;
+                .${classes.node} {
+                    display: flex;
+                    align-items: center;
+                    padding-right: ${spacing[2]}px;
+                    border-radius: ${borderRadius}px;
+                    transition: background-color .25s ${easing.easeOut};
+                    touch-action: none;
+                    -webkit-tap-highlight-color: transparent;
+
+                    &[data-disabled=true] {
+                        color: ${text.disabled};
+                        cursor: not-allowed;
                     }
 
-                    &:before {
-                        width: 8px;
-                        height: 8px;
-                        border: 2px solid ${colors.primary.main};
-                        border-radius: 50%;
-                        left: 0;
+                    &:not([data-read-only=true]) {
+                        cursor: pointer;
                     }
 
-                    &:after {
-                        width: 100%;
-                        height: 2px;
-                        background: ${colors.primary.main};
-                        left: 8px;
+                    .${classes.indent} {
+                        width: ${indent}px;
+                        align-self: stretch;
+                        display: flex;
                     }
 
-                    &.${classes.dragMaskPrev} {
-                        top: 0;
+                    .${classes.expand} {
+                        width: 29px;
+                        align-self: stretch;
+                        align-items: center;
+                        justify-content: center;
 
-                        &:before {
-                            top: -4px;
+                        .${classes.icon} {
+                            transition: rotate .25s ${easing.easeOut};
                         }
+                    }
 
-                        &:after {
-                            top: -1px;
-                        }
+                    .${classes.contentWrap} {
+                        flex: 1;
+                        display: flex;
+                        align-items: center;
+                        position: relative;
                     }
 
-                    &.${classes.dragMaskNext} {
-                        bottom: 0;
+                    .${classes.checkbox} {
+                        margin-right: ${spacing[3]}px;
+                    }
 
-                        &:before {
-                            bottom: -4px;
-                        }
+                    .${classes.label} {
+                        flex: 1;
+                        padding: 6px 0;
 
-                        &:after {
-                            bottom: -1px;
-                        }
                     }
 
-                    &[data-offset=true] {
-                        &:before {
-                            width: 10px;
-                            border-top: 0;
-                            border-right: 0;
-                            border-bottom: 2px dashed ${colors.primary.main};
-                            border-left: 2px dashed ${colors.primary.main};
-                            border-radius: 0;
-                            left: 24px;
-                            bottom: -1px;
+                    .${classes.prefix} {
+                        color: ${text.secondary};
+                        margin-right: ${spacing[2]}px;
+                    }
+
+                    .${classes.suffix} {
+                        color: ${text.disabled};
+                        margin-left: ${spacing[2]}px;
+                    }
+                }
+                
+                &:not(:has([data-dragging=true])) { {
+                    .${classes.node} {
+                        &[data-selected=true] {
+                            background-color: ${selectedBg};
+
+                            &:hover {
+                                background-color: ${selectedHover};
+                            }
+
+                            &:active {
+                                transition: background-color 0s;
+                                background-color: ${selectedActive};
+                            }
                         }
 
-                        &:after {
-                            width: calc(100% - 36px);
-                            left: 36px;
+                        &:not([data-disabled=true]):not([data-selected=true]):hover {
+                            background-color: ${hover};
                         }
-                    }
 
-                    &[data-overing=true] {
-                        &:before, &:after {
-                            display: block;
+                        &:not([data-disabled=true]):not([data-selected=true]):active {
+                            transition: background-color 0s;
+                            background-color: ${active};
                         }
                     }
-                }
-            }
-        }
-
-        &[data-show-line=true] {
-            .${classes.indent}:after {
-                content: '';
-                width: 1px;
-                height: 100%;
-                margin-left: 14px;
-                background-color: ${divider};
-            }
-        }
-
-        &, .${classes.levelBlock} {
-            &[data-active=true] {
-                outline: 1px dashed ${colors.primary.main};
-            }
-        }
-
-        &[data-sortable=true] {
-            .${classes.node} {
-                &[data-dragging=true] {
-                    &, &:active {
-                        background-color: ${selectedBg};
-                    }
-                }
+                }}
 
-                &:has(+ .${classes.levelBlock}[data-active=true]) {
-                    outline: 1px solid ${colors.primary.main};
+                &[data-show-line=true] {
+                    .${classes.indent}:after {
+                        content: '';
+                        width: 1px;
+                        height: 100%;
+                        margin-left: 14px;
+                        background-color: ${divider};
+                    }
                 }
-            }
-        }
-    `;
-});
+            `;
+        }),
+        useDndStyle({ indent })
+    ];
+}

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

@@ -5,21 +5,17 @@ type TreeDndContextItem<T> = [T | undefined, Dispatch<SetStateAction<T | undefin
 type ITreeDndContext = {
     sortable: boolean;
     showDragHandle: boolean;
-    containerRef: RefObject<HTMLDivElement | null>;
-    isOffsetSatisfied: [boolean, Dispatch<SetStateAction<boolean>>];
     dragging: TreeDndContextItem<Id>;
-    overing: TreeDndContextItem<Id>;
-    placement: [RefObject<SortPlacement | undefined>, Dispatch<SetStateAction<SortPlacement | undefined>>];
+    overing: RefObject<Id | undefined>;
+    placement: RefObject<SortPlacement | undefined>;
     onSort: TreeBaseProps<any>['onSort'];
-    overingTimer: RefObject<any>;
 };
 export declare const TreeDndContext: import("react").Context<ITreeDndContext>;
 export declare function useTreeDndContext(): ITreeDndContext;
-export declare const TreeDnd: import("react").MemoExoticComponent<({ sortable, showDragHandle, onSort, containerRef, children }: {
+export declare const TreeDnd: import("react").MemoExoticComponent<({ sortable, showDragHandle, onSort, children }: {
     sortable: boolean;
     showDragHandle: boolean;
     onSort: TreeBaseProps<any>["onSort"];
-    containerRef: RefObject<HTMLDivElement | null>;
     children: ReactNode;
 }) => import("@emotion/react/jsx-runtime").JSX.Element>;
 export {};

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

@@ -1,28 +1,16 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { createContext, memo, useContext, useEffect, useRef, useState } from 'react';
-import { useSyncState } from '../../utils';
-import { classes } from './tree.style';
+import { createContext, memo, useContext, useRef, useState } from 'react';
+import { treeDndClasses } from './treeDnd.style';
 export const TreeDndContext = createContext({});
 export function useTreeDndContext() {
     return useContext(TreeDndContext);
 }
-export const TreeDnd = memo(({ sortable, showDragHandle, onSort, containerRef, children }) => {
-    const isOffsetSatisfied = useState(false);
+export const TreeDnd = memo(({ sortable, showDragHandle, onSort, children }) => {
     const dragging = useState(void 0);
-    const overing = useState(void 0);
-    const placement = useSyncState(void 0);
-    useEffect(() => {
-        if (dragging[0]) {
-            document.documentElement.style.cursor = 'grabbing';
-        }
-        return () => {
-            document.documentElement.style.cursor = '';
-        };
-    }, [dragging[0]]);
-    const overingTimer = useRef(void 0);
+    const overing = useRef(void 0);
+    const placement = useRef(void 0);
     return (_jsx(TreeDndContext, { value: {
-            sortable, showDragHandle, onSort, containerRef,
-            isOffsetSatisfied, dragging, overing, placement,
-            overingTimer
-        }, children: _jsx("div", { className: classes.container, "data-dragging": !!dragging[0], children: children }) }));
+            sortable, showDragHandle, onSort,
+            dragging, overing, placement
+        }, children: _jsx("div", { className: treeDndClasses.levelBlock, children: children }) }));
 });

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

@@ -0,0 +1,15 @@
+export declare const treeDndClasses: {
+    mask: string;
+    child: string;
+    levelBlock: string;
+    dragHandle: string;
+    predecessor: string;
+    sibling: string;
+    siblingPrev: string;
+    siblingNext: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ indent }: {
+    indent: number;
+}): import("@emotion/react").SerializedStyles;