@canlooks/can-ui 0.0.70 → 0.0.71

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

@@ -2,15 +2,21 @@ import { css } from '@emotion/react';
 import { defineInnerClasses, defineCss } from '../../utils';
 import Color from 'color';
 export const classes = defineInnerClasses('tree', [
+    'levelBlock',
     'search',
     'node',
+    'contentWrap',
     'indent',
     'expand',
     'checkbox',
+    'dragHandle',
     'icon',
     'label',
     'prefix',
-    'suffix'
+    'suffix',
+    'dragMask',
+    'dragMaskPrev',
+    'dragMaskNext'
 ]);
 export const style = defineCss(({ spacing, mode, borderRadius, text, easing, gray, divider, colors }) => {
     const c = Color(colors.primary.main);
@@ -28,10 +34,9 @@ export const style = defineCss(({ spacing, mode, borderRadius, text, easing, gra
             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] {
@@ -39,6 +44,10 @@ export const style = defineCss(({ spacing, mode, borderRadius, text, easing, gra
                 cursor: not-allowed;
             }
 
+            &:not([data-read-only=true]) {
+                cursor: pointer;
+            }
+
             &[data-selected=true] {
                 background-color: ${selectedBg};
 
@@ -51,7 +60,7 @@ export const style = defineCss(({ spacing, mode, borderRadius, text, easing, gra
                     background-color: ${selectedActive};
                 }
             }
-            
+
             &:not([data-disabled=true]):not([data-selected=true]):hover {
                 background-color: ${hover};
             }
@@ -77,6 +86,21 @@ export const style = defineCss(({ spacing, mode, borderRadius, text, easing, gra
                 }
             }
 
+            .${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;
             }
@@ -84,6 +108,7 @@ export const style = defineCss(({ spacing, mode, borderRadius, text, easing, gra
             .${classes.label} {
                 flex: 1;
                 padding: 5px 0;
+
             }
 
             .${classes.prefix} {
@@ -95,6 +120,88 @@ export const style = defineCss(({ spacing, mode, borderRadius, text, easing, gra
                 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;
+                    }
+
+                    &: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;
+                    }
+
+                    &.${classes.dragMaskPrev} {
+                        top: 0;
+
+                        &:before {
+                            top: -4px;
+                        }
+
+                        &:after {
+                            top: -1px;
+                        }
+                    }
+
+                    &.${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] {
@@ -106,5 +213,29 @@ export const style = defineCss(({ spacing, mode, borderRadius, text, easing, gra
                 background-color: ${divider};
             }
         }
+
+        &, .${classes.levelBlock} {
+            &[data-active=true] {
+                outline: 1px dashed ${colors.primary.main};
+            }
+        }
+
+        &[data-sortable=true] {
+            .${classes.node} {
+                &:not(:has(.${classes.dragHandle})) {
+                    cursor: grab;
+                }
+
+                &[data-dragging=true] {
+                    &, &:active {
+                        background-color: ${selectedBg};
+                    }
+                }
+
+                &:has(+ .${classes.levelBlock}[data-active=true]) {
+                    outline: 1px solid ${colors.primary.main};
+                }
+            }
+        }
     `;
 });

package/dist/esm/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/esm/components/tree/treeDnd.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createContext, memo, useContext, useRef, useState } from 'react';
+import { useSyncState } from '../../utils';
+export const TreeDndContext = createContext({});
+export function useTreeDndContext() {
+    return useContext(TreeDndContext);
+}
+export const TreeDnd = memo(({ sortable, showDragHandle, onSort, containerRef, children }) => {
+    const isOffsetSatisfied = useState(false);
+    const dragging = useState(void 0);
+    const overing = useState(void 0);
+    const placement = useSyncState(void 0);
+    const overingTimer = useRef(void 0);
+    return (_jsx(TreeDndContext, { value: {
+            sortable, showDragHandle, onSort, containerRef,
+            isOffsetSatisfied, dragging, overing, placement,
+            overingTimer
+        }, children: children }));
+});

package/dist/esm/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/esm/components/tree/treeNode.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-import { Children, cloneElement, isValidElement, memo } from 'react';
+import { Children, cloneElement, isValidElement, memo, useRef, useMemo } from 'react';
 import { classes } from './tree.style';
-import { clsx } from '../../utils';
+import { cloneRef, clsx, findPredecessor, useDraggable } from '../../utils';
 import { Collapse } from '../transitionBase';
 import { Button } from '../button';
 import { Checkbox } from '../checkbox';
@@ -9,33 +9,111 @@ import { useTreeContext } from './tree';
 import { useSelectionContext } from '../selectionContext';
 import { Icon } from '../icon';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
+import { faGripVertical } from '@fortawesome/free-solid-svg-icons';
+import { useTreeDndContext } from './treeDnd';
 export const TreeNode = memo(({ value, label, prefix, suffix, disabled, _level = 0, ...props }) => {
-    const { expandedSet = new Set(), toggleExpanded, indent, renderExpandIcon, showCheckbox, readOnly, clickLabelToExpand, ...context } = useTreeContext();
+    const { expandedSet, toggleExpanded, indent, renderExpandIcon, showCheckbox, readOnly, clickLabelToExpand, ...context } = useTreeContext();
     disabled ??= context.disabled;
     const { selectionStatus, toggleSelected } = 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 (_jsxs(_Fragment, { children: [_jsxs("div", { ...props, className: clsx(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) => _jsx("div", { className: classes.indent, style: { width: indent } }, i)), _jsx(Button, { className: 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 } = useTreeDndContext();
+    const dragHandleProps = 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 = useRef(null);
+    const activeParentBlock = (target) => {
+        return findPredecessor(target, parent => {
+            const ret = parent.classList.contains(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('.' + 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 = 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 => {
                             e.stopPropagation();
-                            toggleExpanded?.(value);
-                        }, children: renderExpandIcon
-                            ? renderExpandIcon(value, !!currentExpanded, [...expandedSet])
+                            toggleExpanded(value);
+                        }, onPointerDown: e => e.stopPropagation(), children: renderExpandIcon
+                            ? renderExpandIcon(value, currentExpanded, [...expandedSet])
                             : hasChildren &&
                                 _jsx(Icon, { icon: faChevronRight, className: classes.icon, style: {
                                         rotate: currentExpanded ? '90deg' : '0deg'
-                                    } }) }), showCheckbox &&
-                        _jsx(Checkbox, { className: classes.checkbox, checked: status === 2, indeterminate: status === 1, onClick: e => {
-                                e.stopPropagation();
-                                clickHandler();
-                            } }), !!prefix &&
-                        _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.label, children: label }), !!suffix &&
-                        _jsx("div", { className: classes.suffix, children: suffix })] }), hasChildren &&
-                _jsx(Collapse, { in: currentExpanded, children: Children.map(props.children, child => {
+                                    } }) }), _jsxs("div", { className: classes.contentWrap, children: [sortable && showDragHandle &&
+                                _jsx("div", { className: classes.dragHandle, ...dragHandleProps, onClick: e => e.stopPropagation(), children: _jsx(Icon, { icon: faGripVertical }) }), showCheckbox &&
+                                _jsx(Checkbox, { className: classes.checkbox, checked: status === 2, indeterminate: status === 1, onClick: e => {
+                                        e.stopPropagation();
+                                        clickHandler();
+                                    } }), !!prefix &&
+                                _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.label, children: label }), !!suffix &&
+                                _jsx("div", { className: classes.suffix, children: suffix }), typeof dragging !== 'undefined' && dragging !== value &&
+                                _jsxs("div", { className: classes.dragMask, onPointerOver: overingMask, onPointerLeave: leaveMask, children: [_jsx("div", { className: classes.dragMaskPrev, "data-overing": overing === value && placement.current === 'before', onPointerEnter: e => onPointerEnter(e, 'before'), onPointerLeave: onPointerLeave }), (!hasChildren || !expandedSet.has(value)) &&
+                                            _jsx("div", { className: classes.dragMaskNext, "data-offset": !hasChildren && isOffsetSatisfied, "data-overing": overing === value && placement.current === 'after', onPointerEnter: e => onPointerEnter(e, 'after'), onPointerLeave: onPointerLeave })] })] })] }), hasChildren &&
+                _jsx(Collapse, { className: classes.levelBlock, in: currentExpanded, children: Children.map(props.children, child => {
                         return isValidElement(child)
                             ? cloneElement(child, { _level: _level + 1 })
                             : child;

package/dist/esm/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/esm/components/treeSelect/treeSelect.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Children, isValidElement, memo, useMemo } from 'react';
 import { Popper } from '../popper';
 import { Tree, TreeNode } from '../tree';
-import { useControlled, toArray, clsx, cloneRef } from '../../utils';
+import { useControlled, toArray, clsx, mergeComponentProps } from '../../utils';
 import { InputBase } from '../inputBase';
 import { LoadingIndicator } from '../loadingIndicator';
 import { popperStyle } from '../popper/popper.style';
@@ -64,16 +64,16 @@ placeholder = '请选择', autoFocus, clearable, onClear, ...props }) => {
             return renderBackfill(innerValue);
         }
         if (props.multiple) {
-            return toArray(innerValue)?.map(v => _jsx(Tag, { closable: true, onClose: () => toggleSelected(v), children: optionsMap.get(v)?.[props.labelKey] ?? v }, v));
+            return toArray(innerValue)?.map((v) => _jsx(Tag, { closable: true, onClose: () => toggleSelected(v), children: optionsMap.get(v)?.[props.labelKey] ?? v }, v));
         }
         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 => {
             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: ({ ref, ...rest }) => _jsxs("div", { className: classes.contentWrap, children: [!toArray(innerValue)?.length
+        }, 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: [!toArray(innerValue)?.length
                         ? _jsx("div", { className: classes.placeholder, children: placeholder })
-                        : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { size: 1, ...rest, ...inputProps, ref: cloneRef(ref, inputProps?.ref), "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": open, children: loading
+                        : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { size: 1, ...mergeComponentProps(inputBaseProps, inputProps), "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": open, children: loading
                             ? _jsx(LoadingIndicator, {})
                             : _jsx(Icon, { icon: faChevronDown }) })] }) }) }));
 });

package/dist/esm/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/esm/components/upload/upload.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useImperativeHandle, useRef } from 'react';
 import { classes, style } from './upload.style';
-import { clsx, cloneRef, getShortID, onDndDragEnd, useControlled, useDndSensors } from '../../utils';
+import { clsx, getShortID, onDndDragEnd, useControlled, useDndSensors, mergeComponentProps } from '../../utils';
 import { Button } from '../button';
 import { FileItem } from './fileItem';
 import { TransitionGroup } from 'react-transition-group';
@@ -62,7 +62,6 @@ export const Upload = memo(({ inputProps, type = 'file', accept = type === 'imag
         innerInputRef.current.click();
     };
     const inputChangeHandler = (e) => {
-        inputProps?.onChange?.(e);
         changeFn(e.target.files);
         // 触发onChange后需要清空输入框的值，避免下次上传相同文件时不触发onChange
         e.target.value = '';
@@ -92,7 +91,11 @@ export const Upload = memo(({ inputProps, type = 'file', accept = type === 'imag
         const newValue = onDndDragEnd(e, innerValue.current);
         newValue && setInnerValue(newValue);
     };
-    return (_jsxs("div", { ...props, ref: wrapperRef, css: style, className: clsx(classes.root, props.className), "data-file-type": type, "data-variant": variant, "data-sortable": sortable, children: [_jsx("input", { type: "file", accept: accept, multiple: max !== 1, ...inputProps, ref: cloneRef(innerInputRef, inputProps?.ref), className: clsx(classes.input, inputProps?.className), onChange: inputChangeHandler, "data-hidden": "true" }), _jsx(DndContext, { sensors: useDndSensors(), onDragEnd: dragEndHandler, children: _jsx(SortableContext, { items: innerValue.current, disabled: !sortable, children: type === 'file'
+    return (_jsxs("div", { ...props, ref: wrapperRef, css: style, className: clsx(classes.root, props.className), "data-file-type": type, "data-variant": variant, "data-sortable": sortable, children: [_jsx("input", { type: "file", accept: accept, multiple: max !== 1, ...mergeComponentProps(inputProps, {
+                    ref: innerInputRef,
+                    className: classes.input,
+                    onChange: inputChangeHandler
+                }), "data-hidden": "true" }), _jsx(DndContext, { sensors: useDndSensors(), onDragEnd: dragEndHandler, children: _jsx(SortableContext, { items: innerValue.current, disabled: !sortable, children: type === 'file'
                         ? _jsxs(_Fragment, { children: [droppable
                                     ? _jsx(DropArea, { onClick: () => innerInputRef.current.click(), onDrop: changeFn })
                                     : showButton &&

package/dist/esm/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/esm/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/esm/extensions/curd/curd.js

@@ -1,6 +1,26 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Curd } from '../../components/curd';
 import { DataGrid } from '../../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/esm/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/esm/extensions/reactiveForm/index.d.ts

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

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

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

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

@@ -0,0 +1,19 @@
+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/esm/extensions/reactiveForm/reactiveForm.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { RC } from '@canlooks/reactive/react';
+import { Form } from '../../components/form';
+import { createContext, useContext, useImperativeHandle, useMemo, useRef } from 'react';
+import { ReactiveFormItem } from './reactiveFormItem';
+const ReactiveFormContext = createContext({});
+export function useReactiveFormContext() {
+    return useContext(ReactiveFormContext);
+}
+export const ReactiveForm = RC(({ ref, onChange, onFinish, ...props }) => {
+    const innerFormRef = useRef(null);
+    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 (_jsx(ReactiveFormContext, { value: useMemo(() => ({ onChange }), [onChange]), children: _jsx(Form, { ...props, ref: innerFormRef, onFinish: () => onFinish?.() }) }));
+});
+ReactiveForm.Item = ReactiveFormItem;
+/** Alias {@link ReactiveForm} */
+export const RF = ReactiveForm;

package/dist/esm/extensions/reactiveForm/reactiveFormItem.d.ts

@@ -0,0 +1,7 @@
+import { ModelProps } from '@canlooks/reactive/react';
+import { FormItemProps } from '../../components/form';
+import { ReactElement } from 'react';
+export interface ReactiveFormItemProps<I = any> extends Omit<ModelProps, 'children'>, Omit<FormItemProps<I>, 'initialValue' | 'dependencies'> {
+    dependencies?(): any;
+}
+export declare const ReactiveFormItem: <I = any>(props: ReactiveFormItemProps<I>) => ReactElement;