@canlooks/can-ui 0.0.70 → 0.0.72

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

@@ -6,15 +6,21 @@ const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const color_1 = tslib_1.__importDefault(require("color"));
 exports.classes = (0, utils_1.defineInnerClasses)('tree', [
+    'levelBlock',
     'search',
     'node',
+    'contentWrap',
     'indent',
     'expand',
     'checkbox',
+    'dragHandle',
     'icon',
     'label',
     'prefix',
-    'suffix'
+    'suffix',
+    'dragMask',
+    'dragMaskPrev',
+    'dragMaskNext'
 ]);
 exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, easing, gray, divider, colors }) => {
     const c = (0, color_1.default)(colors.primary.main);
@@ -32,10 +38,9 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, eas
             display: flex;
             align-items: center;
             padding-right: ${spacing[2]}px;
-            margin-bottom: 1px;
-            cursor: pointer;
             border-radius: ${borderRadius}px;
             transition: background-color .25s ${easing.easeOut};
+            touch-action: none;
             -webkit-tap-highlight-color: transparent;
 
             &[data-disabled=true] {
@@ -43,6 +48,10 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, eas
                 cursor: not-allowed;
             }
 
+            &:not([data-read-only=true]) {
+                cursor: pointer;
+            }
+
             &[data-selected=true] {
                 background-color: ${selectedBg};
 
@@ -55,7 +64,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, eas
                     background-color: ${selectedActive};
                 }
             }
-            
+
             &:not([data-disabled=true]):not([data-selected=true]):hover {
                 background-color: ${hover};
             }
@@ -81,6 +90,21 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, eas
                 }
             }
 
+            .${exports.classes.contentWrap} {
+                flex: 1;
+                display: flex;
+                align-items: center;
+                position: relative;
+            }
+
+            .${exports.classes.dragHandle} {
+                width: 20px;
+                margin-right: ${spacing[3]}px;
+                text-align: center;
+                color: ${gray(.12)};
+                cursor: grab;
+            }
+
             .${exports.classes.checkbox} {
                 margin-right: ${spacing[3]}px;
             }
@@ -88,6 +112,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, eas
             .${exports.classes.label} {
                 flex: 1;
                 padding: 5px 0;
+
             }
 
             .${exports.classes.prefix} {
@@ -99,6 +124,88 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, eas
                 color: ${text.disabled};
                 margin-left: ${spacing[2]}px;
             }
+
+            .${exports.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;
+                    }
+
+                    &:before {
+                        width: 8px;
+                        height: 8px;
+                        border: 2px solid ${colors.primary.main};
+                        border-radius: 50%;
+                        left: 0;
+                    }
+
+                    &:after {
+                        width: 100%;
+                        height: 2px;
+                        background: ${colors.primary.main};
+                        left: 8px;
+                    }
+
+                    &.${exports.classes.dragMaskPrev} {
+                        top: 0;
+
+                        &:before {
+                            top: -4px;
+                        }
+
+                        &:after {
+                            top: -1px;
+                        }
+                    }
+
+                    &.${exports.classes.dragMaskNext} {
+                        bottom: 0;
+
+                        &:before {
+                            bottom: -4px;
+                        }
+
+                        &: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;
+                        }
+
+                        &:after {
+                            width: calc(100% - 36px);
+                            left: 36px;
+                        }
+                    }
+
+                    &[data-overing=true] {
+                        &:before, &:after {
+                            display: block;
+                        }
+                    }
+                }
+            }
         }
 
         &[data-show-line=true] {
@@ -110,5 +217,29 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, eas
                 background-color: ${divider};
             }
         }
+
+        &, .${exports.classes.levelBlock} {
+            &[data-active=true] {
+                outline: 1px dashed ${colors.primary.main};
+            }
+        }
+
+        &[data-sortable=true] {
+            .${exports.classes.node} {
+                &:not(:has(.${exports.classes.dragHandle})) {
+                    cursor: grab;
+                }
+
+                &[data-dragging=true] {
+                    &, &:active {
+                        background-color: ${selectedBg};
+                    }
+                }
+
+                &:has(+ .${exports.classes.levelBlock}[data-active=true]) {
+                    outline: 1px solid ${colors.primary.main};
+                }
+            }
+        }
     `;
 });

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

@@ -0,0 +1,25 @@
+import { Dispatch, ReactNode, RefObject, SetStateAction } from 'react';
+import { Id } from '../../types';
+import { SortPlacement, TreeBaseProps } from './tree';
+type TreeDndContextItem<T> = [T | undefined, Dispatch<SetStateAction<T | undefined>>];
+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>>];
+    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 }: {
+    sortable: boolean;
+    showDragHandle: boolean;
+    onSort: TreeBaseProps<any>["onSort"];
+    containerRef: RefObject<HTMLDivElement | null>;
+    children: ReactNode;
+}) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export {};

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeDnd = exports.TreeDndContext = void 0;
+exports.useTreeDndContext = useTreeDndContext;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+exports.TreeDndContext = (0, react_1.createContext)({});
+function useTreeDndContext() {
+    return (0, react_1.useContext)(exports.TreeDndContext);
+}
+exports.TreeDnd = (0, react_1.memo)(({ sortable, showDragHandle, onSort, containerRef, children }) => {
+    const isOffsetSatisfied = (0, react_1.useState)(false);
+    const dragging = (0, react_1.useState)(void 0);
+    const overing = (0, react_1.useState)(void 0);
+    const placement = (0, utils_1.useSyncState)(void 0);
+    const overingTimer = (0, react_1.useRef)(void 0);
+    return ((0, jsx_runtime_1.jsx)(exports.TreeDndContext, { value: {
+            sortable, showDragHandle, onSort, containerRef,
+            isOffsetSatisfied, dragging, overing, placement,
+            overingTimer
+        }, children: children }));
+});

package/dist/cjs/components/tree/treeNode.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { DivProps, Id } from '../../types';
 export interface TreeNodeProps extends Omit<DivProps, 'prefix'> {
     value: Id;
@@ -9,4 +9,4 @@ export interface TreeNodeProps extends Omit<DivProps, 'prefix'> {
     /** @private 内部使用，表明该节点的层级 */
     _level?: number;
 }
-export declare const TreeNode: import("react").MemoExoticComponent<({ value, label, prefix, suffix, disabled, _level, ...props }: TreeNodeProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const TreeNode: React.MemoExoticComponent<({ value, label, prefix, suffix, disabled, _level, ...props }: TreeNodeProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -12,33 +12,111 @@ const tree_1 = require("./tree");
 const selectionContext_1 = require("../selectionContext");
 const icon_1 = require("../icon");
 const faChevronRight_1 = require("@fortawesome/free-solid-svg-icons/faChevronRight");
+const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+const treeDnd_1 = require("./treeDnd");
 exports.TreeNode = (0, react_1.memo)(({ value, label, prefix, suffix, disabled, _level = 0, ...props }) => {
-    const { expandedSet = new Set(), toggleExpanded, indent, renderExpandIcon, showCheckbox, readOnly, clickLabelToExpand, ...context } = (0, tree_1.useTreeContext)();
+    const { expandedSet, toggleExpanded, indent, renderExpandIcon, showCheckbox, readOnly, clickLabelToExpand, ...context } = (0, tree_1.useTreeContext)();
     disabled ??= context.disabled;
     const { selectionStatus, toggleSelected } = (0, selectionContext_1.useSelectionContext)();
-    const currentExpanded = expandedSet?.has(value);
-    const status = selectionStatus?.get(value);
+    const currentExpanded = expandedSet.has(value);
+    const status = selectionStatus.get(value);
     const clickHandler = () => {
         !readOnly && !disabled && toggleSelected(value);
-        clickLabelToExpand && toggleExpanded?.(value);
+        clickLabelToExpand && toggleExpanded(value);
     };
     const hasChildren = !!props.children && (!Array.isArray(props.children) || props.children.length > 0);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.clsx)(tree_style_1.classes.node, props.className), "data-selected": status === 2, "data-read-only": readOnly, "data-disabled": disabled, onClick: clickHandler, children: [Array(_level).fill(void 0).map((_, i) => (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.indent, style: { width: indent } }, i)), (0, jsx_runtime_1.jsx)(button_1.Button, { className: tree_style_1.classes.expand, variant: "plain", color: "text.secondary", onClick: e => {
+    /**
+     * ---------------------------------------------------------------------
+     * 拖拽部分
+     */
+    const { sortable, showDragHandle, onSort, containerRef, isOffsetSatisfied: [isOffsetSatisfied, setIsOffsetSatisfied], dragging: [dragging, setDragging], overing: [overing, setOvering], placement: [placement, setPlacement], overingTimer } = (0, treeDnd_1.useTreeDndContext)();
+    const dragHandleProps = (0, utils_1.useDraggable)({
+        disabled: !sortable,
+        onDragStart(e) {
+            setDragging(value);
+            setOvering(void 0);
+            currentExpanded && toggleExpanded(value);
+        },
+        onDrag({ diff: [diffX] }) {
+            setIsOffsetSatisfied(diffX > indent * 2);
+        },
+        onDragEnd() {
+            inactiveParentBlock();
+            leaveMask();
+            setDragging(void 0);
+            if (typeof overing !== 'undefined' && placement.current) {
+                onSort?.({
+                    source: dragging,
+                    destination: overing,
+                    placement: isOffsetSatisfied ? 'child' : placement.current
+                });
+            }
+        }
+    });
+    const nodeRef = (0, react_1.useRef)(null);
+    const activeParentBlock = (target) => {
+        return (0, utils_1.findPredecessor)(target, parent => {
+            const ret = parent.classList.contains(tree_style_1.classes.levelBlock);
+            if (ret) {
+                parent.dataset.active = 'true';
+                return true;
+            }
+        });
+    };
+    const inactiveParentBlock = () => {
+        const fn = (el) => {
+            el.dataset.active = 'false';
+        };
+        fn(containerRef.current);
+        containerRef.current.querySelectorAll('.' + tree_style_1.classes.levelBlock).forEach(fn);
+    };
+    const overingMask = (e) => {
+        if (hasChildren && !expandedSet.has(value)) {
+            overingTimer.current ||= setTimeout(() => {
+                toggleExpanded(value);
+                placement.current === 'after' && inactiveParentBlock();
+            }, 800);
+        }
+    };
+    const leaveMask = () => {
+        clearTimeout(overingTimer.current);
+        overingTimer.current = void 0;
+    };
+    const onPointerEnter = (e, placement) => {
+        setOvering(value);
+        setPlacement(placement);
+        activeParentBlock(e.currentTarget);
+    };
+    const onPointerLeave = () => {
+        setOvering(void 0);
+        inactiveParentBlock();
+    };
+    /**
+     * ---------------------------------------------------------------------
+     * 渲染部分
+     */
+    const renderedIndents = (0, react_1.useMemo)(() => {
+        return Array(_level).fill(void 0).map((_, i) => (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.indent, style: { width: indent } }, i));
+    }, [_level, indent]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ...props, ref: (0, utils_1.cloneRef)(nodeRef, props.ref), className: (0, utils_1.clsx)(tree_style_1.classes.node, props.className), "data-selected": status === 2, "data-read-only": readOnly, "data-disabled": disabled, "data-dragging": dragging === value, ...!showDragHandle && dragHandleProps, children: [renderedIndents, (0, jsx_runtime_1.jsx)(button_1.Button, { className: tree_style_1.classes.expand, variant: "plain", color: "text.secondary", onClick: e => {
                             e.stopPropagation();
-                            toggleExpanded?.(value);
-                        }, children: renderExpandIcon
-                            ? renderExpandIcon(value, !!currentExpanded, [...expandedSet])
+                            toggleExpanded(value);
+                        }, onPointerDown: e => e.stopPropagation(), children: renderExpandIcon
+                            ? renderExpandIcon(value, currentExpanded, [...expandedSet])
                             : hasChildren &&
                                 (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faChevronRight_1.faChevronRight, className: tree_style_1.classes.icon, style: {
                                         rotate: currentExpanded ? '90deg' : '0deg'
-                                    } }) }), showCheckbox &&
-                        (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: tree_style_1.classes.checkbox, checked: status === 2, indeterminate: status === 1, onClick: e => {
-                                e.stopPropagation();
-                                clickHandler();
-                            } }), !!prefix &&
-                        (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.label, children: label }), !!suffix &&
-                        (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.suffix, children: suffix })] }), hasChildren &&
-                (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { in: currentExpanded, children: react_1.Children.map(props.children, child => {
+                                    } }) }), (0, jsx_runtime_1.jsxs)("div", { className: tree_style_1.classes.contentWrap, children: [sortable && showDragHandle &&
+                                (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.dragHandle, ...dragHandleProps, onClick: e => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: free_solid_svg_icons_1.faGripVertical }) }), showCheckbox &&
+                                (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: tree_style_1.classes.checkbox, checked: status === 2, indeterminate: status === 1, onClick: e => {
+                                        e.stopPropagation();
+                                        clickHandler();
+                                    } }), !!prefix &&
+                                (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.label, children: label }), !!suffix &&
+                                (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.suffix, children: suffix }), typeof dragging !== 'undefined' && dragging !== value &&
+                                (0, jsx_runtime_1.jsxs)("div", { className: tree_style_1.classes.dragMask, onPointerOver: overingMask, onPointerLeave: leaveMask, children: [(0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.dragMaskPrev, "data-overing": overing === value && placement.current === 'before', onPointerEnter: e => onPointerEnter(e, 'before'), onPointerLeave: onPointerLeave }), (!hasChildren || !expandedSet.has(value)) &&
+                                            (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.dragMaskNext, "data-offset": !hasChildren && isOffsetSatisfied, "data-overing": overing === value && placement.current === 'after', onPointerEnter: e => onPointerEnter(e, 'after'), onPointerLeave: onPointerLeave })] })] })] }), hasChildren &&
+                (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { className: tree_style_1.classes.levelBlock, in: currentExpanded, children: react_1.Children.map(props.children, child => {
                         return (0, react_1.isValidElement)(child)
                             ? (0, react_1.cloneElement)(child, { _level: _level + 1 })
                             : child;

package/dist/cjs/components/treeSelect/treeSelect.d.ts

@@ -1,10 +1,10 @@
-import { ReactElement, ReactNode, Ref, JSX } from 'react';
+import { ReactElement, ReactNode, Ref, ComponentProps } from 'react';
 import { PopperProps, PopperRef } from '../popper';
 import { NodeType, TreeBaseProps, TreeNode } from '../tree';
 import { Id, SelectableSingleProps } from '../../types';
 interface TreeSelectBaseProps<N extends NodeType<V>, V extends Id = Id> extends TreeBaseProps<N, V> {
     /** <select />内部由<input />实现 */
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: ComponentProps<'input'>;
     popperProps?: PopperProps;
     popperRef?: Ref<PopperRef>;
     options?: N[];

package/dist/cjs/components/treeSelect/treeSelect.js

@@ -67,16 +67,16 @@ placeholder = '请选择', autoFocus, clearable, onClear, ...props }) => {
             return renderBackfill(innerValue);
         }
         if (props.multiple) {
-            return (0, utils_1.toArray)(innerValue)?.map(v => (0, jsx_runtime_1.jsx)(tag_1.Tag, { closable: true, onClose: () => toggleSelected(v), children: optionsMap.get(v)?.[props.labelKey] ?? v }, v));
+            return (0, utils_1.toArray)(innerValue)?.map((v) => (0, jsx_runtime_1.jsx)(tag_1.Tag, { closable: true, onClose: () => toggleSelected(v), children: optionsMap.get(v)?.[props.labelKey] ?? v }, v));
         }
         return ((0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.backfillWrap, children: optionsMap.get(innerValue)?.[props.labelKey] ?? innerValue }));
     };
     return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: popper_style_1.popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: (0, jsx_runtime_1.jsx)(tree_1.Tree, { ...props, nodes: options, value: innerValue, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
             popperProps?.onPointerDown?.(e);
             e.preventDefault();
-        }, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { clearable: !!props.multiple, css: treeSelect_style_1.style, className: (0, utils_1.clsx)(treeSelect_style_1.classes.root, props.className), "data-focused": open, value: innerValue, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsxs)("div", { className: treeSelect_style_1.classes.contentWrap, children: [!(0, utils_1.toArray)(innerValue)?.length
+        }, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { clearable: !!props.multiple, css: treeSelect_style_1.style, className: (0, utils_1.clsx)(treeSelect_style_1.classes.root, props.className), "data-focused": open, value: innerValue, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: inputBaseProps => (0, jsx_runtime_1.jsxs)("div", { className: treeSelect_style_1.classes.contentWrap, children: [!(0, utils_1.toArray)(innerValue)?.length
                         ? (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.placeholder, children: placeholder })
-                        : (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { size: 1, ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputProps?.ref), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.arrow, "data-open": open, children: loading
+                        : (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { size: 1, ...(0, utils_1.mergeComponentProps)(inputBaseProps, inputProps), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.arrow, "data-open": open, children: loading
                             ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {})
                             : (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faChevronDown_1.faChevronDown }) })] }) }) }));
 });

package/dist/cjs/components/upload/upload.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, ReactElement, ReactNode, SetStateAction, JSX } from 'react';
+import { Dispatch, ReactElement, ReactNode, SetStateAction, ComponentProps } from 'react';
 import { DivProps } from '../../types';
 import { ButtonProps } from '../button';
 import { DropArea } from './dropArea';
@@ -15,7 +15,7 @@ export interface UploadSharedProps<R = any, A extends any[] = any[]> {
     onUpload?(files: UploadFile<R, A>[], setProgress: Dispatch<SetStateAction<number>>, ...args: A): Promise<R>;
 }
 export interface UploadProps<R = any, A extends any[] = any[]> extends UploadSharedProps<R, A>, Omit<DivProps, 'defaultValue' | 'onChange'> {
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: ComponentProps<'input'>;
     accept?: string;
     max?: number;
     /**

package/dist/cjs/components/upload/upload.js

@@ -65,7 +65,6 @@ exports.Upload = (0, react_1.memo)(({ inputProps, type = 'file', accept = type =
         innerInputRef.current.click();
     };
     const inputChangeHandler = (e) => {
-        inputProps?.onChange?.(e);
         changeFn(e.target.files);
         // 触发onChange后需要清空输入框的值，避免下次上传相同文件时不触发onChange
         e.target.value = '';
@@ -95,7 +94,11 @@ exports.Upload = (0, react_1.memo)(({ inputProps, type = 'file', accept = type =
         const newValue = (0, utils_1.onDndDragEnd)(e, innerValue.current);
         newValue && setInnerValue(newValue);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: wrapperRef, css: upload_style_1.style, className: (0, utils_1.clsx)(upload_style_1.classes.root, props.className), "data-file-type": type, "data-variant": variant, "data-sortable": sortable, children: [(0, jsx_runtime_1.jsx)("input", { type: "file", accept: accept, multiple: max !== 1, ...inputProps, ref: (0, utils_1.cloneRef)(innerInputRef, inputProps?.ref), className: (0, utils_1.clsx)(upload_style_1.classes.input, inputProps?.className), onChange: inputChangeHandler, "data-hidden": "true" }), (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: innerValue.current, disabled: !sortable, children: type === 'file'
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: wrapperRef, css: upload_style_1.style, className: (0, utils_1.clsx)(upload_style_1.classes.root, props.className), "data-file-type": type, "data-variant": variant, "data-sortable": sortable, children: [(0, jsx_runtime_1.jsx)("input", { type: "file", accept: accept, multiple: max !== 1, ...(0, utils_1.mergeComponentProps)(inputProps, {
+                    ref: innerInputRef,
+                    className: upload_style_1.classes.input,
+                    onChange: inputChangeHandler
+                }), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: innerValue.current, disabled: !sortable, children: type === 'file'
                         ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [droppable
                                     ? (0, jsx_runtime_1.jsx)(dropArea_1.DropArea, { onClick: () => innerInputRef.current.click(), onDrop: changeFn })
                                     : showButton &&

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

@@ -3,14 +3,14 @@ export declare const classes: {
     input: string;
     progress: string;
     image: string;
-    icon: string;
     name: string;
+    icon: string;
     file: string;
     files: string;
     images: string;
     control: string;
-    imageWrap: string;
     sortable: string;
+    imageWrap: string;
 } & {
     root: string;
 };

package/dist/cjs/extensions/curd/curd.d.ts

@@ -3,6 +3,26 @@ import { CurdBaseProps, CurdColumn } from '../../components/curd';
 import { DataGridProps, RowType } from '../../components/dataGrid';
 import { FormValue } from '../../components/form';
 import { Id } from '../../types';
+/**
+ * @example
+ * ```ts
+ * @CURD()
+ * class ExampleComponent extends React.Component {
+ *     @CURD.Column({title: '姓名'})
+ *     username!: string
+ *
+ *     @CURD.Column({title: '性别'})
+ *     gender(row: RowType) {
+ *         return row.gender === 'male' ? '男' : '女'
+ *     }
+ *
+ *     @CURD.OnCreate()
+ *     onCreate(formValue: FormValue) {
+ *
+ *     }
+ * }
+ * ```
+ */
 /**
  * -------------------------------------------------------------------
  * 类修饰器

package/dist/cjs/extensions/curd/curd.js

@@ -17,6 +17,26 @@ exports.RowToForm = RowToForm;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const curd_1 = require("../../components/curd");
 const dataGrid_1 = require("../../components/dataGrid");
+/**
+ * @example
+ * ```ts
+ * @CURD()
+ * class ExampleComponent extends React.Component {
+ *     @CURD.Column({title: '姓名'})
+ *     username!: string
+ *
+ *     @CURD.Column({title: '性别'})
+ *     gender(row: RowType) {
+ *         return row.gender === 'male' ? '男' : '女'
+ *     }
+ *
+ *     @CURD.OnCreate()
+ *     onCreate(formValue: FormValue) {
+ *
+ *     }
+ * }
+ * ```
+ */
 /**
  * -------------------------------------------------------------------
  * 类修饰器

package/dist/cjs/extensions/documentViewer/pdfViewer.d.ts

@@ -1,5 +1,5 @@
-import { JSX } from 'react';
+import { ComponentProps } from 'react';
 import { DocumentViewerBaseProps } from './documentViewer';
-export interface PdfViewerProps extends DocumentViewerBaseProps, Omit<JSX.IntrinsicElements['iframe'], 'onError'> {
+export interface PdfViewerProps extends DocumentViewerBaseProps, Omit<ComponentProps<'iframe'>, 'onError'> {
 }
 export declare const PdfViewer: import("react").MemoExoticComponent<({ src, filename, onError, setDocumentTitle, ...props }: PdfViewerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/extensions/reactiveForm/index.d.ts

@@ -0,0 +1,2 @@
+export * from './reactiveForm';
+export * from './reactiveFormItem';

package/dist/cjs/extensions/reactiveForm/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./reactiveForm"), exports);
+tslib_1.__exportStar(require("./reactiveFormItem"), exports);

package/dist/cjs/extensions/reactiveForm/reactiveForm.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @example
+ * ```tsx
+ * import {RC, useReactive} from '@canlooks/reactive/react'
+ * import {RF} from '@canlooks/can-ui'
+ *
+ * const Example = RC(() => {
+ *     const formValue = useReactive({
+ *         msg: 'hello'
+ *     }, {deep: true})
+ *
+ *     return (
+ *         <RF>
+ *             <RF.Item refer={() => formValue.msg}>
+ *                 <Input/>
+ *             </RF.Item>
+ *         </RF>
+ *     )
+ * })
+ * ```
+ */
+import { FormProps, FormRef } from '../../components/form';
+import { ReactElement, Ref } from 'react';
+import { ReactiveFormItem } from './reactiveFormItem';
+export type ReactiveFormPropsRef = Pick<FormRef, 'submit' | 'getFormErrors' | 'getFieldError' | 'resetForm' | 'resetField' | 'isFormTouched' | 'isFieldTouched'>;
+export interface ReactiveFormProps extends Omit<FormProps, 'ref' | 'initialValue' | 'onChange' | 'onFinish' | 'items'> {
+    ref?: Ref<ReactiveFormPropsRef>;
+    onChange?(): void;
+    onFinish?(): void;
+}
+export declare function useReactiveFormContext(): Pick<ReactiveFormProps, "onChange">;
+export declare const ReactiveForm: {
+    (props: ReactiveFormProps): ReactElement;
+    Item: typeof ReactiveFormItem;
+};
+/** Alias {@link ReactiveForm} */
+export declare const RF: {
+    (props: ReactiveFormProps): ReactElement;
+    Item: typeof ReactiveFormItem;
+};

package/dist/cjs/extensions/reactiveForm/reactiveForm.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RF = exports.ReactiveForm = void 0;
+exports.useReactiveFormContext = useReactiveFormContext;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/**
+ * @example
+ * ```tsx
+ * import {RC, useReactive} from '@canlooks/reactive/react'
+ * import {RF} from '@canlooks/can-ui'
+ *
+ * const Example = RC(() => {
+ *     const formValue = useReactive({
+ *         msg: 'hello'
+ *     }, {deep: true})
+ *
+ *     return (
+ *         <RF>
+ *             <RF.Item refer={() => formValue.msg}>
+ *                 <Input/>
+ *             </RF.Item>
+ *         </RF>
+ *     )
+ * })
+ * ```
+ */
+const react_1 = require("@canlooks/reactive/react");
+const form_1 = require("../../components/form");
+const react_2 = require("react");
+const reactiveFormItem_1 = require("./reactiveFormItem");
+const ReactiveFormContext = (0, react_2.createContext)({});
+function useReactiveFormContext() {
+    return (0, react_2.useContext)(ReactiveFormContext);
+}
+exports.ReactiveForm = (0, react_1.RC)(({ ref, onChange, onFinish, ...props }) => {
+    const innerFormRef = (0, react_2.useRef)(null);
+    (0, react_2.useImperativeHandle)(ref, () => ({
+        submit: innerFormRef.current.submit,
+        getFormErrors: innerFormRef.current.getFormErrors,
+        getFieldError: innerFormRef.current.getFieldError,
+        resetForm: innerFormRef.current.resetForm,
+        resetField: innerFormRef.current.resetField,
+        isFormTouched: innerFormRef.current.isFormTouched,
+        isFieldTouched: innerFormRef.current.isFieldTouched
+    }));
+    return ((0, jsx_runtime_1.jsx)(ReactiveFormContext, { value: (0, react_2.useMemo)(() => ({ onChange }), [onChange]), children: (0, jsx_runtime_1.jsx)(form_1.Form, { ...props, ref: innerFormRef, onFinish: () => onFinish?.() }) }));
+});
+exports.ReactiveForm.Item = reactiveFormItem_1.ReactiveFormItem;
+/** Alias {@link ReactiveForm} */
+exports.RF = exports.ReactiveForm;