@canlooks/can-ui 0.0.90 → 0.0.92

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

@@ -3,12 +3,12 @@ import { DivProps, Status as IStatus } from '../../types';
 import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
 export type StatusType = IStatus | 'confirm' | 'unknown';
 export declare const statusMapToIconDefinition: {
-    info: import("@fortawesome/free-solid-svg-icons").IconDefinition;
-    success: import("@fortawesome/free-solid-svg-icons").IconDefinition;
-    warning: import("@fortawesome/free-solid-svg-icons").IconDefinition;
-    error: import("@fortawesome/free-solid-svg-icons").IconDefinition;
-    confirm: import("@fortawesome/free-solid-svg-icons").IconDefinition;
-    unknown: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    info: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    success: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    warning: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    error: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    confirm: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    unknown: import("@fortawesome/fontawesome-common-types").IconDefinition;
 };
 export interface StatusIconProps extends Partial<FontAwesomeIconProps> {
     status?: StatusType;

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

@@ -7,6 +7,7 @@ export declare const classes: {
     indent: string;
     node: string;
     checkbox: string;
+    container: string;
     suffix: string;
     contentWrap: string;
     levelBlock: string;

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

@@ -4,6 +4,7 @@ import Color from 'color';
 export const classes = defineInnerClasses('tree', [
     'levelBlock',
     'search',
+    'container',
     'node',
     'contentWrap',
     'indent',
@@ -29,6 +30,12 @@ export const style = defineCss(({ spacing, mode, borderRadius, text, easing, gra
         .${classes.search} {
             margin-bottom: ${spacing[3]}px;
         }
+        
+        .${classes.container}[data-dragging=true] {
+            &, * {
+                cursor: grabbing;
+            }
+        }
 
         .${classes.node} {
             display: flex;
@@ -222,10 +229,6 @@ export const style = defineCss(({ spacing, mode, borderRadius, text, easing, gra
 
         &[data-sortable=true] {
             .${classes.node} {
-                &:not(:has(.${classes.dragHandle})) {
-                    cursor: grab;
-                }
-
                 &[data-dragging=true] {
                     &, &:active {
                         background-color: ${selectedBg};

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { createContext, memo, useContext, useRef, useState } from 'react';
+import { createContext, memo, useContext, useEffect, useRef, useState } from 'react';
 import { useSyncState } from '../../utils';
+import { classes } from './tree.style';
 export const TreeDndContext = createContext({});
 export function useTreeDndContext() {
     return useContext(TreeDndContext);
@@ -10,10 +11,18 @@ export const TreeDnd = memo(({ sortable, showDragHandle, onSort, containerRef, c
     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);
     return (_jsx(TreeDndContext, { value: {
             sortable, showDragHandle, onSort, containerRef,
             isOffsetSatisfied, dragging, overing, placement,
             overingTimer
-        }, children: children }));
+        }, children: _jsx("div", { className: classes.container, "data-dragging": !!dragging[0], children: children }) }));
 });

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

@@ -27,6 +27,10 @@ export const TreeNode = memo(({ value, label, prefix, suffix, disabled, _level =
      * 拖拽部分
      */
     const { sortable, showDragHandle, onSort, containerRef, isOffsetSatisfied: [isOffsetSatisfied, setIsOffsetSatisfied], dragging: [dragging, setDragging], overing: [overing, setOvering], placement: [placement, setPlacement], overingTimer } = useTreeDndContext();
+    const onClick = (e) => {
+        props.onClick?.(e);
+        !showCheckbox && clickHandler();
+    };
     const dragHandleProps = useDraggable({
         disabled: !sortable,
         onDragStart(e) {
@@ -48,7 +52,8 @@ export const TreeNode = memo(({ value, label, prefix, suffix, disabled, _level =
                     placement: isOffsetSatisfied ? 'child' : placement.current
                 });
             }
-        }
+        },
+        onClick
     });
     const nodeRef = useRef(null);
     const activeParentBlock = (target) => {
@@ -95,7 +100,7 @@ export const TreeNode = memo(({ value, label, prefix, suffix, disabled, _level =
     const renderedIndents = useMemo(() => {
         return Array(_level).fill(void 0).map((_, i) => _jsx("div", { className: classes.indent, style: { width: indent } }, i));
     }, [_level, indent]);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ...props, ref: cloneRef(nodeRef, props.ref), className: clsx(classes.node, props.className), "data-selected": status === 2, "data-read-only": readOnly, "data-disabled": disabled, "data-dragging": dragging === value, ...!showDragHandle && dragHandleProps, children: [renderedIndents, _jsx(Button, { className: classes.expand, variant: "plain", color: "text.secondary", onClick: e => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ...props, ref: cloneRef(nodeRef, props.ref), className: clsx(classes.node, props.className), "data-selected": status === 2, "data-read-only": readOnly, "data-disabled": disabled, "data-dragging": dragging === value, ...!showDragHandle && dragHandleProps, onClick: showDragHandle ? onClick : props.onClick, children: [renderedIndents, _jsx(Button, { className: classes.expand, variant: "plain", color: "text.secondary", onClick: e => {
                             e.stopPropagation();
                             toggleExpanded(value);
                         }, onPointerDown: e => e.stopPropagation(), children: renderExpandIcon

package/dist/esm/components/treeSelect/treeSelect.js

@@ -68,7 +68,7 @@ placeholder = '请选择', autoFocus, clearable, onClear, ...props }) => {
         }
         return (_jsx("div", { className: classes.backfillWrap, children: optionsMap.get(innerValue)?.[props.labelKey] ?? innerValue }));
     };
-    return (_jsx(Popper, { css: popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: _jsx(Tree, { ...props, nodes: options, value: innerValue, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
+    return (_jsx(Popper, { css: popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: _jsx(Tree, { primaryKey: "value", ...props, nodes: options, value: innerValue, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
             popperProps?.onPointerDown?.(e);
             e.preventDefault();
         }, children: _jsx(InputBase, { clearable: !!props.multiple, css: style, className: clsx(classes.root, props.className), "data-focused": open, value: innerValue, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: inputBaseProps => _jsxs("div", { className: classes.contentWrap, children: [isNoValue(innerValue)