@ioca/react 1.5.10 → 1.5.12

package/lib/index.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import classNames from 'classnames';
-import { debounce, uid, throttle, title } from 'radash';
+import { debounce, uid, throttle } from 'radash';
 import { useState, useRef, useEffect, useCallback, useMemo, Children, cloneElement, createElement, isValidElement, memo, Fragment as Fragment$1, useTransition, forwardRef, useLayoutEffect, createContext, useContext, useImperativeHandle } from 'react';
-import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, UndoRound, RedoRound, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, StrikethroughSRound, ClearAllRound, PlayArrowRound, PauseRound, StopRound, VolumeDownRound, VolumeOffRound, FullscreenRound, FullscreenExitRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, KeyboardDoubleArrowUpRound, SyncAltRound, VisibilityRound, VisibilityOffRound, MoreHorizRound, SearchRound, CheckRound, UnfoldMoreRound, CalendarMonthTwotone, AccessTimeRound, InfoOutlined, KeyboardArrowDownRound, ListAltRound, DriveFolderUploadOutlined, PlusSharp } from '@ricons/material';
+import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, UndoRound, RedoRound, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, StrikethroughSRound, ClearAllRound, PlayArrowRound, PauseRound, StopRound, VolumeDownRound, VolumeOffRound, FullscreenRound, FullscreenExitRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, KeyboardDoubleArrowUpRound, SyncAltRound, VisibilityRound, VisibilityOffRound, MoreHorizRound, SearchRound, CheckRound, UnfoldMoreRound, CalendarMonthTwotone, AccessTimeRound, InfoOutlined, KeyboardArrowDownRound, MoveToInboxTwotone, OutboxTwotone, FilePresentOutlined, DriveFolderUploadOutlined, PlusSharp } from '@ricons/material';
 import { createRoot } from 'react-dom/client';
 import { getScrollbarSize, List as List$2 } from 'react-window';
 import { createPortal } from 'react-dom';
@@ -1752,9 +1752,9 @@ const Item$4 = (props) => {
         }), style: { alignItems: align, ...style }, ...restProps, children: [label !== undefined && (jsx("span", { className: 'i-list-item-label', children: label })), children] }));
 };
 
-const List$1 = (props) => {
+const List$1 = forwardRef((props, ref) => {
     const { label, type, border, className, children, ...restProps } = props;
-    return (jsx("ul", { className: classNames("i-list", className), ...restProps, children: Children.map(children, (node, i) => {
+    return (jsx("ul", { ref: ref, className: classNames("i-list", className), ...restProps, children: Children.map(children, (node, i) => {
             const renderLabel = typeof label === "function" ? label(i) : label;
             const { type, props: nodeProps } = node;
             if (type === Item$4) {
@@ -1767,7 +1767,7 @@ const List$1 = (props) => {
             }
             return node;
         }) }));
-};
+});
 List$1.Item = Item$4;
 
 const Content$2 = forwardRef((props, ref) => {
@@ -2605,15 +2605,56 @@ const removeAdjacentMemtionTag = (editor, key) => {
     editor.focus();
     return true;
 };
+const makeRectSource = (rect) => {
+    const { left, top, width, height } = rect;
+    return {
+        offsetParent: null,
+        offsetLeft: left,
+        offsetTop: top,
+        getBoundingClientRect: () => ({
+            left,
+            top,
+            right: left + width,
+            bottom: top + height,
+            width,
+            height,
+            x: left,
+            y: top,
+            toJSON: () => ({}),
+        }),
+    };
+};
 const Memtion = (props) => {
     const { visible, rect, options, activeIndex, onActiveChange, onSelect } = props;
+    const containerRef = useRef(null);
+    const [pos, setPos] = useState({ left: 0, top: 0 });
+    const [ready, setReady] = useState(false);
+    useLayoutEffect(() => {
+        if (!visible || !rect || !options?.length) {
+            setReady(false);
+            return;
+        }
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const [left, top] = getPosition(makeRectSource(rect), el, {
+            position: "bottom",
+            gap: 4,
+            offset: 0,
+            align: "start",
+            refWindow: true,
+        });
+        setPos({ left, top });
+        setReady(true);
+    }, [visible, rect, options]);
     if (!visible || !rect || !options?.length) {
         return null;
     }
-    const content = (jsx(List$1, { className: "i-editor-memtion", type: "option", style: {
+    const content = (jsx(List$1, { ref: containerRef, className: "i-editor-memtion", type: "option", style: {
             position: "fixed",
-            top: rect.bottom,
-            left: rect.left,
+            left: pos.left,
+            top: pos.top,
+            opacity: ready ? 1 : 0,
         }, children: options.map((option, i) => (jsx(List$1.Item, { type: "option", active: i === activeIndex, onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => onActiveChange?.(i), onClick: () => onSelect?.(option), children: option.label }, `${option.value}-${i}`))) }));
     if (typeof document === "undefined") {
         return content;
@@ -2732,6 +2773,8 @@ const Editor = (props) => {
     };
     const handleKeyDown = (e) => {
         onKeyDown?.(e);
+        if (e.defaultPrevented)
+            return;
         if (!isPlaintextMode &&
             (e.key === "Backspace" || e.key === "Delete") &&
             removeAdjacentMemtionTag(editorRef.current, e.key)) {
@@ -2772,6 +2815,9 @@ const Editor = (props) => {
                 exec(isRichMode ? "insertHTML" : "insertText", false, isRichMode ? "	" : "\t");
                 break;
             case "Enter":
+                if (e.shiftKey) {
+                    break;
+                }
                 if (!onEnter)
                     break;
                 e.preventDefault();
@@ -3657,7 +3703,7 @@ function renderFile(props) {
         case TFileType.VIDEO:
             return jsx(Video, { ...props });
         default:
-            return (jsxs("div", { className: 'i-preview-unknown', children: [jsx(Icon, { icon: jsx(FeedOutlined, {}), size: '3em' }), jsx("h5", { className: 'mt-4', children: name || suffix || "?" })] }));
+            return (jsxs("div", { className: "i-preview-unknown", children: [jsx(Icon, { icon: jsx(FeedOutlined, {}), size: "3em" }), jsx("h5", { className: "mt-4", children: name || suffix })] }));
     }
 }
 
@@ -4615,7 +4661,7 @@ const Handle = (props) => {
 };
 
 function ColorPicker(props) {
-    const { value, type = "HEX", disabledAlpha, children, usePanel, handle = "both", placeholder = "Colors", popupProps, onChange, label, required, ...restProps } = props;
+    const { value, type = "HEX", disabledAlpha, children, usePanel, handle = "both", placeholder = "Colors", popupProps, onChange, label, required, className, style, ...restProps } = props;
     const [colorType, setColorType] = useState(type);
     const [colorValue, setColorValue] = useState(value);
     const [syncValue, setSyncValue] = useState(value);
@@ -4659,9 +4705,11 @@ function ColorPicker(props) {
     if (usePanel) {
         return (jsx(InputContainer, { label: label, required: required, children: jsx(ColorsPanel, { ...restProps, value: value, onChange: onChange }) }));
     }
-    return (jsx(InputContainer, { label: label, required: required, children: jsx(Popup, { trigger: "click", touchable: true, position: "bottom", ...popupProps, visible: visible, content: jsx(ColorsPanel, { ...restProps, value: syncValue, disabledAlpha: disabledAlpha, panelRender: (panel) => {
+    return (jsx(InputContainer, { label: label, required: required, className: classNames("i-colorpicker", className), style: style, children: jsx(Popup, { trigger: "click", touchable: true, position: "bottom", ...popupProps, visible: visible, content: jsx(ColorsPanel, { ...restProps, value: syncValue, disabledAlpha: disabledAlpha, panelRender: (panel) => {
                     return (jsxs(Fragment, { children: [panel, jsx(Footer, { value: colorValue, type: colorType, onTypeChange: handleTypeChange, onChange: handleValueChange, onOk: handleOk })] }));
-                }, onChange: handleChange, onChangeComplete: handleComplete }), onVisibleChange: handleVisibleChange, children: children ?? (jsx(Handle, { color: value, handle: handle, placeholder: placeholder })) }) }));
+                }, onChange: handleChange, onChangeComplete: handleComplete }), onVisibleChange: handleVisibleChange, children: typeof children === "function"
+                ? children({ type: colorType, value: colorValue })
+                : (children ?? (jsx(Handle, { color: value, handle: handle, placeholder: placeholder }))) }) }));
 }
 
 const Dates = (props) => {
@@ -5991,155 +6039,225 @@ const Tree = (props) => {
     return (jsx(TreeList, { data: data, selected: selectedKey, checked: checkedKeys, partofs: partofs, nodeProps: oNodeProps, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
 };
 
-const ListContainer = (props) => {
-    const { sortable, onSortEnd, itemProps, ...restProps } = props;
-    const customProps = {
-        className: "i-upload-list",
-        onClick: (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-        },
+const Dropbox = (props) => {
+    const { multiple, accept, disabled, children, onChange, onDropFiles } = props;
+    const [dragging, setDragging] = useState(false);
+    const inputRef = useRef(null);
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    const handleDragEnter = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!disabled)
+            setDragging(true);
     };
+    const handleDragLeave = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragging(false);
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragging(false);
+        if (disabled)
+            return;
+        const files = Array.from(e.dataTransfer.files);
+        if (files.length)
+            onDropFiles(files);
+    };
+    const handleClick = () => {
+        if (!disabled)
+            inputRef.current?.click();
+    };
+    return (jsxs("div", { className: classNames("i-upload-dropbox", dragging && "i-upload-dropbox-active"), onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleClick, children: [jsx("input", { ref: inputRef, type: "file", className: "i-input-file-hidden", multiple: multiple, accept: accept, disabled: disabled, onChange: onChange }), typeof children === "function"
+                ? children(dragging)
+                : children || (jsx(Icon, { icon: dragging ? (jsx(MoveToInboxTwotone, {})) : (jsx(OutboxTwotone, {})), size: "2em" }))] }));
+};
+
+const ListContainer = memo((props) => {
+    const { sortable, onSortEnd, children, ...restProps } = props;
     if (!sortable) {
-        return jsx("div", { ...customProps, ...restProps });
+        return (jsx("div", { className: "i-upload-list", onClick: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+            }, ...restProps, children: children }));
     }
-    return (jsx(SortableContainer, { draggedItemClassName: 'i-upload-item-dragged', onSortEnd: onSortEnd, ...customProps, ...restProps }));
-};
-const FileListItem = (props) => {
+    return (jsx(SortableContainer, { draggedItemClassName: "i-upload-item-dragged", onSortEnd: onSortEnd, className: "i-upload-list", ...restProps, children: children }));
+});
+const CloseBtn = memo(({ index, onRemove }) => (jsx(Helpericon, { active: true, className: "i-upload-delete", onClick: (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onRemove(index);
+    } })));
+const FileListItem = memo((props) => {
     const { ref, mode, index, file, renderItem, onRemove, onPreview } = props;
     if (!file)
-        return "";
-    const { id, name, size, url, src } = file;
+        return null;
+    const { name, size, url, src } = file;
     const type = getFileType(name, file.type);
+    const handleClick = useCallback(() => {
+        onPreview?.(index);
+    }, [onPreview, index]);
     if (renderItem) {
         return renderItem(file, index);
     }
-    const CloseBtn = (jsx(Helpericon, { active: true, className: 'i-upload-delete', onClick: (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            onRemove(index);
-        } }));
+    const node = useMemo(() => {
+        switch (type) {
+            case TFileType.IMAGE:
+                return (jsx(MemoImage, { lazyload: true, src: url || src, fit: "cover", onMouseDown: (e) => e.preventDefault() }));
+            case TFileType.VIDEO:
+                return jsx("video", { src: url || src, preload: "none" });
+            default:
+                return (jsxs(Fragment, { children: [jsx(Icon, { icon: jsx(FilePresentOutlined, {}), size: "1.5em" }), jsx("span", { className: "i-upload-file-name", children: name })] }));
+        }
+    }, [type, url, src, name]);
     switch (mode) {
         case "card":
-            let node = jsx(Fragment, {});
-            switch (type) {
-                case TFileType.IMAGE:
-                    node = (jsx(MemoImage, { lazyload: true, src: url || src, fit: 'cover', onMouseDown: (e) => e.preventDefault() }));
-                    break;
-                case TFileType.VIDEO:
-                    node = jsx("video", { src: url || src, preload: 'none' });
-                    break;
-                default:
-                    node = (jsxs(Fragment, { children: [jsx(Icon, { icon: jsx(ListAltRound, {}) }), jsx("span", { className: 'i-upload-file-name', children: title(name) })] }));
-                    break;
-            }
-            return (jsxs("div", { ref: ref, title: name, className: 'i-upload-item-card', onClick: () => onPreview?.(index), children: [node, CloseBtn] }));
+            return (jsxs("div", { ref: ref, className: "i-upload-item-card", onClick: handleClick, children: [node, jsx(CloseBtn, { index: index, onRemove: onRemove }), name && (jsx("span", { className: "px-12 py-8 i-upload-tip", children: name }))] }));
         default:
-            return (jsxs("div", { ref: ref, className: 'i-upload-item', onClick: () => onPreview?.(index), children: [jsx("span", { children: name }), jsx("i", { className: 'i-upload-size', children: formatBytes(size ?? 0) }), CloseBtn] }, id));
+            return (jsxs("div", { ref: ref, className: "i-upload-item", onClick: handleClick, children: [jsx("span", { children: name }), jsx("i", { className: "i-upload-size", children: formatBytes(size ?? 0) }), jsx(CloseBtn, { index: index, onRemove: onRemove })] }));
     }
-};
+});
 
+const normalizeFiles = (files) => (files ?? []).map((item) => {
+    const file = item;
+    if (item instanceof File) {
+        const src = file.src ?? URL.createObjectURL(item);
+        Object.assign(item, {
+            id: file.id ?? uid(7),
+            src,
+            url: file.url ?? src,
+        });
+        return item;
+    }
+    const src = file.src ?? file.name;
+    return {
+        ...file,
+        id: file.id ?? uid(7),
+        src,
+        url: file.url ?? src,
+    };
+});
 const Upload = (props) => {
-    const { ref, label, labelInline, value, files = [], initialFiles, placeholder, status = "normal", message, className, style, children, defaultButtonProps, mode = "default", cardSize = "4em", disabled, sortable, limit = props.multiple ? Infinity : 1, multiple, renderItem, shouldUpload = () => true, uploader, onChange, onFilesChange, onUpload, ...restProps } = props;
-    const [fileList, setFileListState] = useState(files);
-    const [uploadMessage, setUploadMessage] = useState(message);
+    const { label, labelInline, value, files, placeholder, status = "normal", message, className, style, children, droppable, dropbox, getDropboxContainer, defaultButtonProps, mode = "default", cardSize = "3.2em", disabled, sortable, limit = props.multiple ? Infinity : 1, multiple, renderItem, shouldUpload = () => true, uploader, onChange, onFilesChange, onUpload, onRemove, ...restProps } = props;
+    const [internalFileList, setInternalFileList] = useState([]);
+    const isControlled = useMemo(() => value !== undefined || files !== undefined, [value, files]);
+    const fileList = isControlled
+        ? normalizeFiles(value ?? files ?? [])
+        : internalFileList;
+    const uploadMessage = message;
     const inputRef = useRef(null);
     const preview = usePreview();
-    const defBtnProps = Object.assign({
+    const defBtnProps = useMemo(() => ({
         children: (jsxs(Fragment, { children: [jsx(Icon, { icon: jsx(DriveFolderUploadOutlined, {}) }), " \u4E0A\u4F20"] })),
-    }, defaultButtonProps);
+        ...defaultButtonProps,
+    }), [defaultButtonProps]);
     const trigger = useMemo(() => {
         if (children)
             return children;
         switch (mode) {
             case "card":
-                return (jsx(Button, { className: 'i-upload-card-btn color-5', square: true, flat: true, outline: true, disabled: disabled, children: jsx(Icon, { icon: jsx(PlusSharp, {}) }) }));
+                return (jsx(Button, { className: "i-upload-card-btn color-5", square: true, flat: true, outline: true, disabled: disabled, children: jsx(Icon, { icon: jsx(PlusSharp, {}) }) }));
             default:
                 return (jsx(Button, { ...defBtnProps, className: classNames("i-upload-btn", defBtnProps.className), disabled: disabled }));
         }
-    }, [mode, children]);
-    const handleChange = (e) => {
-        const files = Array.from(e.target.files || []);
+    }, [mode, children, disabled, defBtnProps]);
+    const handleUpload = useCallback(async (files) => {
+        if (!uploader)
+            return;
+        const shouldUploadFiles = files.filter(shouldUpload);
+        const result = await Promise.all(shouldUploadFiles.map(uploader));
+        return onUpload?.(result);
+    }, [uploader, shouldUpload, onUpload]);
+    const processFiles = useCallback((inputFiles) => {
         const before = fileList;
         const changed = [];
-        files.map((f) => {
-            const { id, name, size, type } = f;
-            const same = before.find((pf) => {
-                const { name: n, size: s, type: t } = pf;
-                return n === name && s === size && t === type;
-            });
-            const src = URL.createObjectURL(f);
-            Object.assign(f, {
+        inputFiles.forEach((file) => {
+            const { id, name, size, type } = file;
+            const same = before.some((pf) => pf.name === name &&
+                pf.size === size &&
+                pf.type === type);
+            const src = URL.createObjectURL(file);
+            Object.assign(file, {
                 id: id ?? uid(7),
-                src: src ?? f.name,
-                url: src ?? f.name,
+                src: src ?? file.name,
+                url: src ?? file.name,
             });
-            !same && changed.push(f);
+            if (!same)
+                changed.push(file);
         });
         const after = [...before, ...changed];
         const last = after.at(-1);
-        const nextFiles = multiple ? after.slice(0, limit) : last ? [last] : [];
-        setFileListState(nextFiles);
-        setUploadMessage(message);
+        const nextFiles = multiple
+            ? after.slice(0, limit)
+            : last
+                ? [last]
+                : [];
+        return { nextFiles, changed };
+    }, [fileList, multiple, limit]);
+    const applyFiles = useCallback((nextFiles, changed, e) => {
+        if (!isControlled)
+            setInternalFileList(nextFiles);
         onFilesChange?.(nextFiles, changed, e);
         onChange?.(nextFiles, e);
         handleUpload(changed);
-        inputRef.current && (inputRef.current.value = "");
-    };
-    const handleRemove = (i) => {
-        const [...files] = fileList;
+    }, [isControlled, onFilesChange, onChange, handleUpload]);
+    const handleChange = useCallback((e) => {
+        const inputFiles = Array.from(e.target.files || []);
+        const { nextFiles, changed } = processFiles(inputFiles);
+        applyFiles(nextFiles, changed, e);
+        if (inputRef.current)
+            inputRef.current.value = "";
+    }, [processFiles, applyFiles]);
+    const handleDropFiles = useCallback((files) => {
+        const { nextFiles, changed } = processFiles(files);
+        applyFiles(nextFiles, changed);
+    }, [processFiles, applyFiles]);
+    const handleRemove = useCallback((i) => {
+        const files = [...fileList];
         const changed = files.splice(i, 1);
         URL.revokeObjectURL(changed[0]?.src || "");
-        setFileListState(files);
+        if (!isControlled)
+            setInternalFileList(files);
         onFilesChange?.(files, changed);
         onChange?.(files);
-        inputRef.current && (inputRef.current.value = "");
-    };
-    const handleUpload = async (files) => {
-        if (!uploader)
-            return;
-        const shouldUploadFiles = files.filter(shouldUpload);
-        const result = Promise.all(shouldUploadFiles.map(uploader));
-        return onUpload?.(result);
-    };
-    const handlePreview = (i) => {
-        preview({ items: fileList, initial: i });
-    };
-    const setFileList = (files) => {
-        if (!files)
-            return;
-        setFileListState(files.map((f) => {
-            const file = f;
-            return { ...file, id: file.id ?? uid(7) };
-        }));
-    };
-    const handleSortEnd = (before, after) => {
-        const [...files] = fileList;
+        onRemove?.(changed[0]);
+        if (inputRef.current)
+            inputRef.current.value = "";
+    }, [fileList, isControlled, onFilesChange, onChange, onRemove]);
+    const handlePreview = useCallback((i) => {
+        preview({
+            items: fileList,
+            initial: i,
+        });
+    }, [fileList, preview]);
+    const handleSortEnd = useCallback((before, after) => {
+        const files = [...fileList];
         const nextFiles = arrayMove(files, before, after);
-        setFileListState(nextFiles);
+        if (!isControlled)
+            setInternalFileList(nextFiles);
+        onFilesChange?.(nextFiles, []);
         onChange?.(nextFiles);
-    };
-    useEffect(() => {
-        setUploadMessage(message);
-    }, [status, message]);
-    useEffect(() => {
-        setFileListState(value?.filter?.((file) => !!file.id) ?? []);
-    }, [value]);
-    useEffect(() => {
-        setFileList(initialFiles);
-    }, []);
-    useImperativeHandle(ref, () => ({
-        getFileList: () => fileList,
-        setFileList,
-    }), [fileList]);
-    return (jsx(InputContainer, { as: 'div', label: label, labelInline: labelInline, className: classNames("i-input-label-file", className), style: style, children: jsxs("div", { className: classNames("i-upload-inner", {
+    }, [fileList, isControlled, onFilesChange, onChange]);
+    return (jsx(InputContainer, { as: "div", label: label, labelInline: labelInline, className: classNames("i-input-label-file", className), style: style, children: jsxs("div", { className: classNames("i-upload-inner", {
                 [`i-upload-${mode}`]: mode !== "default",
             }), style: { ["--upload-card-size"]: cardSize }, children: [jsx(ListContainer, { sortable: sortable, onSortEnd: handleSortEnd, children: fileList.map((file, i) => {
-                        const node = (jsx(FileListItem, { index: i, file: file, mode: mode, renderItem: renderItem, onRemove: handleRemove, onPreview: handlePreview }, i));
+                        const f = file;
+                        const key = f.id ?? i;
+                        const node = (jsx(FileListItem, { index: i, file: f, mode: mode, renderItem: renderItem, onRemove: handleRemove, onPreview: handlePreview }, key));
                         if (!sortable)
                             return node;
-                        return jsx(SortableItem, { children: node }, i);
-                    }) }), uploadMessage && (jsx("span", { className: 'i-upload-message', children: uploadMessage })), fileList.length < limit && (jsxs("label", { children: [jsx("input", { ...restProps, disabled: disabled, ref: inputRef, type: 'file', className: 'i-input-file-hidden', multiple: multiple, onChange: handleChange }), trigger] }))] }) }));
+                        return jsx(SortableItem, { children: node }, key);
+                    }) }), uploadMessage && (jsx("span", { className: "i-upload-message", children: uploadMessage })), fileList.length < limit &&
+                    (droppable ? ((() => {
+                        const node = (jsx(Dropbox, { multiple: multiple, accept: restProps.accept, disabled: disabled, onChange: handleChange, onDropFiles: handleDropFiles, children: dropbox }));
+                        return getDropboxContainer
+                            ? createPortal(node, getDropboxContainer())
+                            : node;
+                    })()) : (jsxs("label", { children: [jsx("input", { ...restProps, disabled: disabled, ref: inputRef, type: "file", className: "i-input-file-hidden", multiple: multiple, onChange: handleChange }), trigger] })))] }) }));
 };
 
 const stores = new Map();

package/lib/types/components/list/item.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { IListItem } from './type.js';
+
+declare const Item: (props: IListItem) => react_jsx_runtime.JSX.Element;
+
+export { Item as default };

package/lib/types/components/list/list.d.ts

@@ -1,9 +1,7 @@
-import { IList, IListItem } from './type.js';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import Item from './item.js';
 
-declare const List: {
-    (props: IList): react_jsx_runtime.JSX.Element;
-    Item: (props: IListItem) => react_jsx_runtime.JSX.Element;
+declare const List: typeof List & {
+    Item: typeof Item;
 };
 
 export { List as default };

package/lib/types/components/picker/type.d.ts

@@ -32,7 +32,10 @@ interface IColorPicker extends Omit<ColorPickerProps, "value" | "onChange"> {
     label?: ReactNode;
     required?: boolean;
     type?: "HEX" | "RGB" | "HSB";
-    children?: ReactNode;
+    children?: ReactNode | ((params: {
+        type: string;
+        value: any;
+    }) => ReactNode);
     popupProps?: IPopup;
     usePanel?: boolean;
     handle?: "text" | "square" | "both";

package/lib/types/components/tabs/type.d.ts

@@ -34,7 +34,7 @@ interface RefTabs {
     open: (key: string) => void;
     close: (key: string) => void;
     add: (tab: ITabItem, position?: number) => void;
-    navs: RefObject<HTMLDivElement>;
+    navs: RefObject<HTMLDivElement | null>;
 }
 interface CompositionTabs extends ForwardRefExoticComponent<ITabs> {
     Item: typeof Item;

package/lib/types/components/upload/type.d.ts

@@ -1,11 +1,9 @@
-import { InputHTMLAttributes, RefObject, ReactNode, ChangeEvent } from 'react';
+import { InputHTMLAttributes, ReactNode, ChangeEvent } from 'react';
 import { BaseInput } from '../../type/index.js';
 import { IButton } from '../button/type.js';
 
 interface IUpload extends Omit<BaseInput, "ref">, Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
-    ref?: RefObject<RefUpload | null>;
     files?: IFile[];
-    initialFiles?: IFile[] | File[];
     accept?: string;
     multiple?: boolean;
     directory?: boolean;
@@ -13,6 +11,8 @@ interface IUpload extends Omit<BaseInput, "ref">, Omit<InputHTMLAttributes<HTMLI
     sortable?: boolean;
     mode?: "default" | "card";
     droppable?: boolean;
+    dropbox?: (dragging?: boolean) => ReactNode;
+    getDropboxContainer?: () => HTMLElement;
     cardSize?: string;
     defaultButtonProps?: IButton;
     shouldUpload?: (file: IFile) => boolean;
@@ -29,9 +29,5 @@ interface IFile extends File {
     url?: string;
     [key: string]: any;
 }
-interface RefUpload {
-    getFileList: () => IFile[];
-    setFileList: (files?: IFile[] | File[]) => void;
-}
 
-export type { IFile, IUpload, RefUpload };
+export type { IFile, IUpload };