@ioca/react 1.5.12 → 1.5.14

package/lib/es/components/upload/upload.js

@@ -1,10 +1,10 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { DriveFolderUploadOutlined, PlusSharp } from '@ricons/material';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { DriveFolderUploadOutlined } from '@ricons/material';
 import classNames from 'classnames';
 import { uid } from 'radash';
 import { useState, useMemo, useRef, useCallback } from 'react';
-import { SortableItem } from 'react-easy-sort';
 import { createPortal } from 'react-dom';
+import { SortableItem } from 'react-easy-sort';
 import usePreview from '../../js/usePreview/index.js';
 import { arrayMove } from '../../js/utils.js';
 import Button from '../button/button.js';
@@ -33,7 +33,7 @@ const normalizeFiles = (files) => (files ?? []).map((item) => {
     };
 });
 const Upload = (props) => {
-    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 { label, labelInline, value, files, placeholder, status = "normal", message, icon = jsx(Icon, { icon: jsx(DriveFolderUploadOutlined, {}) }), 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
@@ -43,7 +43,7 @@ const Upload = (props) => {
     const inputRef = useRef(null);
     const preview = usePreview();
     const defBtnProps = useMemo(() => ({
-        children: (jsxs(Fragment, { children: [jsx(Icon, { icon: jsx(DriveFolderUploadOutlined, {}) }), " \u4E0A\u4F20"] })),
+        children: jsxs(Fragment, { children: [icon, " \u4E0A\u4F20"] }),
         ...defaultButtonProps,
     }), [defaultButtonProps]);
     const trigger = useMemo(() => {
@@ -51,11 +51,11 @@ const Upload = (props) => {
             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: icon }));
             default:
                 return (jsx(Button, { ...defBtnProps, className: classNames("i-upload-btn", defBtnProps.className), disabled: disabled }));
         }
-    }, [mode, children, disabled, defBtnProps]);
+    }, [mode, children, disabled, defBtnProps, icon]);
     const handleUpload = useCallback(async (files) => {
         if (!uploader)
             return;

package/lib/es/components/upload/upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"upload.js","sources":["../../../../packages/components/upload/upload.tsx"],"sourcesContent":["import { DriveFolderUploadOutlined, PlusSharp } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport { uid } from \"radash\";\nimport {\n    ChangeEvent,\n    CSSProperties,\n    useCallback,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { SortableItem } from \"react-easy-sort\";\nimport { createPortal } from \"react-dom\";\nimport usePreview from \"../../js/usePreview\";\nimport { TPreviewItem } from \"../../js/usePreview/type\";\nimport { arrayMove } from \"../../js/utils\";\nimport Button from \"../button\";\nimport Icon from \"../icon\";\nimport InputContainer from \"../input/container\";\nimport Dropbox from \"./dropbox\";\nimport \"./index.css\";\nimport FileListItem, { ListContainer } from \"./renderFile\";\nimport { IFile, IUpload } from \"./type\";\n\nconst normalizeFiles = (files?: IFile[] | File[]) =>\n    (files ?? []).map((item) => {\n        const file = item as IFile;\n        if (item instanceof File) {\n            const src = file.src ?? URL.createObjectURL(item);\n            Object.assign(item, {\n                id: file.id ?? uid(7),\n                src,\n                url: file.url ?? src,\n            });\n            return item;\n        }\n        const src = file.src ?? file.name;\n        return {\n            ...(file as object),\n            id: file.id ?? uid(7),\n            src,\n            url: file.url ?? src,\n        } as IFile;\n    });\n\nconst Upload = (props: IUpload) => {\n    const {\n        label,\n        labelInline,\n        value,\n        files,\n        placeholder,\n        status = \"normal\",\n        message,\n        className,\n        style,\n        children,\n        droppable,\n        dropbox,\n        getDropboxContainer,\n        defaultButtonProps,\n        mode = \"default\",\n        cardSize = \"3.2em\",\n        disabled,\n        sortable,\n        limit = props.multiple ? Infinity : 1,\n        multiple,\n        renderItem,\n        shouldUpload = () => true,\n        uploader,\n        onChange,\n        onFilesChange,\n        onUpload,\n        onRemove,\n        ...restProps\n    } = props;\n\n    const [internalFileList, setInternalFileList] = useState<IFile[]>([]);\n    const isControlled = useMemo(\n        () => value !== undefined || files !== undefined,\n        [value, files],\n    );\n    const fileList = isControlled\n        ? normalizeFiles(value ?? files ?? [])\n        : internalFileList;\n\n    const uploadMessage = message;\n    const inputRef = useRef<HTMLInputElement>(null);\n    const preview = usePreview();\n    const defBtnProps = useMemo(\n        () => ({\n            children: (\n                <>\n                    <Icon icon={<DriveFolderUploadOutlined />} /> 上传\n                </>\n            ),\n            ...defaultButtonProps,\n        }),\n        [defaultButtonProps],\n    );\n\n    const trigger = useMemo(() => {\n        if (children) return children;\n\n        switch (mode) {\n            case \"card\":\n                return (\n                    <Button\n                        className=\"i-upload-card-btn color-5\"\n                        square\n                        flat\n                        outline\n                        disabled={disabled}\n                    >\n                        <Icon icon={<PlusSharp />} />\n                    </Button>\n                );\n            default:\n                return (\n                    <Button\n                        {...defBtnProps}\n                        className={classNames(\n                            \"i-upload-btn\",\n                            defBtnProps.className,\n                        )}\n                        disabled={disabled}\n                    />\n                );\n        }\n    }, [mode, children, disabled, defBtnProps]);\n\n    const handleUpload = useCallback(\n        async (files: IFile[]) => {\n            if (!uploader) return;\n\n            const shouldUploadFiles = files.filter(shouldUpload);\n            const result = await Promise.all(shouldUploadFiles.map(uploader));\n\n            return onUpload?.(result);\n        },\n        [uploader, shouldUpload, onUpload],\n    );\n\n    const processFiles = useCallback(\n        (inputFiles: IFile[]) => {\n            const before = fileList;\n            const changed: IFile[] = [];\n\n            inputFiles.forEach((file) => {\n                const { id, name, size, type } = file;\n                const same = before.some(\n                    (pf) =>\n                        pf.name === name &&\n                        pf.size === size &&\n                        pf.type === type,\n                );\n                const src = URL.createObjectURL(file);\n\n                Object.assign(file, {\n                    id: id ?? uid(7),\n                    src: src ?? file.name,\n                    url: src ?? file.name,\n                });\n                if (!same) changed.push(file);\n            });\n\n            const after = [...before, ...changed];\n            const last = after.at(-1);\n            const nextFiles: IFile[] = multiple\n                ? (after.slice(0, limit) as IFile[])\n                : last\n                  ? [last as IFile]\n                  : [];\n\n            return { nextFiles, changed };\n        },\n        [fileList, multiple, limit],\n    );\n\n    const applyFiles = useCallback(\n        (\n            nextFiles: IFile[],\n            changed: IFile[],\n            e?: ChangeEvent<HTMLInputElement>,\n        ) => {\n            if (!isControlled) setInternalFileList(nextFiles as IFile[]);\n            onFilesChange?.(nextFiles as IFile[], changed as IFile[], e);\n            onChange?.(nextFiles, e);\n            handleUpload(changed);\n        },\n        [isControlled, onFilesChange, onChange, handleUpload],\n    );\n\n    const handleChange = useCallback(\n        (e: ChangeEvent<HTMLInputElement>) => {\n            const inputFiles = Array.from(e.target.files || []) as IFile[];\n            const { nextFiles, changed } = processFiles(inputFiles);\n\n            applyFiles(nextFiles, changed, e);\n            if (inputRef.current) inputRef.current.value = \"\";\n        },\n        [processFiles, applyFiles],\n    );\n\n    const handleDropFiles = useCallback(\n        (files: File[]) => {\n            const { nextFiles, changed } = processFiles(files as IFile[]);\n            applyFiles(nextFiles, changed);\n        },\n        [processFiles, applyFiles],\n    );\n\n    const handleRemove = useCallback(\n        (i: number) => {\n            const files = [...fileList];\n            const changed = files.splice(i, 1);\n            URL.revokeObjectURL((changed[0] as IFile)?.src || \"\");\n\n            if (!isControlled) setInternalFileList(files as IFile[]);\n            onFilesChange?.(files as IFile[], changed as IFile[]);\n            onChange?.(files);\n            onRemove?.(changed[0] as IFile);\n\n            if (inputRef.current) inputRef.current.value = \"\";\n        },\n        [fileList, isControlled, onFilesChange, onChange, onRemove],\n    );\n\n    const handlePreview = useCallback(\n        (i: number) => {\n            preview({\n                items: fileList as unknown as TPreviewItem[],\n                initial: i,\n            });\n        },\n        [fileList, preview],\n    );\n\n    const handleSortEnd = useCallback(\n        (before: number, after: number) => {\n            const files = [...fileList];\n            const nextFiles = arrayMove(files, before, after);\n            if (!isControlled) setInternalFileList(nextFiles);\n            onFilesChange?.(nextFiles, []);\n            onChange?.(nextFiles);\n        },\n        [fileList, isControlled, onFilesChange, onChange],\n    );\n\n    return (\n        <InputContainer\n            as=\"div\"\n            label={label}\n            labelInline={labelInline}\n            className={classNames(\"i-input-label-file\", className)}\n            style={style}\n        >\n            <div\n                className={classNames(\"i-upload-inner\", {\n                    [`i-upload-${mode}`]: mode !== \"default\",\n                })}\n                style={{ [\"--upload-card-size\"]: cardSize } as CSSProperties}\n            >\n                <ListContainer sortable={sortable} onSortEnd={handleSortEnd}>\n                    {fileList.map((file, i) => {\n                        const f = file as IFile;\n                        const key = f.id ?? i;\n                        const node = (\n                            <FileListItem\n                                key={key}\n                                index={i}\n                                file={f}\n                                mode={mode}\n                                renderItem={renderItem}\n                                onRemove={handleRemove}\n                                onPreview={handlePreview}\n                            />\n                        );\n\n                        if (!sortable) return node;\n\n                        return <SortableItem key={key}>{node}</SortableItem>;\n                    })}\n                </ListContainer>\n\n                {uploadMessage && (\n                    <span className=\"i-upload-message\">{uploadMessage}</span>\n                )}\n\n                {fileList.length < limit &&\n                    (droppable ? (\n                        (() => {\n                            const node = (\n                                <Dropbox\n                                    multiple={multiple}\n                                    accept={restProps.accept}\n                                    disabled={disabled}\n                                    onChange={handleChange}\n                                    onDropFiles={handleDropFiles}\n                                >\n                                    {dropbox}\n                                </Dropbox>\n                            );\n                            return getDropboxContainer\n                                ? createPortal(node, getDropboxContainer())\n                                : node;\n                        })()\n                    ) : (\n                        <label>\n                            <input\n                                {...restProps}\n                                disabled={disabled}\n                                ref={inputRef}\n                                type=\"file\"\n                                className=\"i-input-file-hidden\"\n                                multiple={multiple}\n                                onChange={handleChange}\n                            />\n                            {trigger}\n                        </label>\n                    ))}\n            </div>\n        </InputContainer>\n    );\n};\n\nexport default Upload;\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
+{"version":3,"file":"upload.js","sources":["../../../../packages/components/upload/upload.tsx"],"sourcesContent":["import { DriveFolderUploadOutlined } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport { uid } from \"radash\";\nimport {\n    ChangeEvent,\n    CSSProperties,\n    useCallback,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { SortableItem } from \"react-easy-sort\";\nimport usePreview from \"../../js/usePreview\";\nimport { TPreviewItem } from \"../../js/usePreview/type\";\nimport { arrayMove } from \"../../js/utils\";\nimport Button from \"../button\";\nimport Icon from \"../icon\";\nimport InputContainer from \"../input/container\";\nimport Dropbox from \"./dropbox\";\nimport \"./index.css\";\nimport FileListItem, { ListContainer } from \"./renderFile\";\nimport { IFile, IUpload } from \"./type\";\n\nconst normalizeFiles = (files?: IFile[] | File[]) =>\n    (files ?? []).map((item) => {\n        const file = item as IFile;\n        if (item instanceof File) {\n            const src = file.src ?? URL.createObjectURL(item);\n            Object.assign(item, {\n                id: file.id ?? uid(7),\n                src,\n                url: file.url ?? src,\n            });\n            return item;\n        }\n        const src = file.src ?? file.name;\n        return {\n            ...(file as object),\n            id: file.id ?? uid(7),\n            src,\n            url: file.url ?? src,\n        } as IFile;\n    });\n\nconst Upload = (props: IUpload) => {\n    const {\n        label,\n        labelInline,\n        value,\n        files,\n        placeholder,\n        status = \"normal\",\n        message,\n        icon = <Icon icon={<DriveFolderUploadOutlined />} />,\n        className,\n        style,\n        children,\n        droppable,\n        dropbox,\n        getDropboxContainer,\n        defaultButtonProps,\n        mode = \"default\",\n        cardSize = \"3.2em\",\n        disabled,\n        sortable,\n        limit = props.multiple ? Infinity : 1,\n        multiple,\n        renderItem,\n        shouldUpload = () => true,\n        uploader,\n        onChange,\n        onFilesChange,\n        onUpload,\n        onRemove,\n        ...restProps\n    } = props;\n\n    const [internalFileList, setInternalFileList] = useState<IFile[]>([]);\n    const isControlled = useMemo(\n        () => value !== undefined || files !== undefined,\n        [value, files],\n    );\n    const fileList = isControlled\n        ? normalizeFiles(value ?? files ?? [])\n        : internalFileList;\n\n    const uploadMessage = message;\n    const inputRef = useRef<HTMLInputElement>(null);\n    const preview = usePreview();\n    const defBtnProps = useMemo(\n        () => ({\n            children: <>{icon} 上传</>,\n            ...defaultButtonProps,\n        }),\n        [defaultButtonProps],\n    );\n\n    const trigger = useMemo(() => {\n        if (children) return children;\n\n        switch (mode) {\n            case \"card\":\n                return (\n                    <Button\n                        className=\"i-upload-card-btn color-5\"\n                        square\n                        flat\n                        outline\n                        disabled={disabled}\n                    >\n                        {icon}\n                    </Button>\n                );\n            default:\n                return (\n                    <Button\n                        {...defBtnProps}\n                        className={classNames(\n                            \"i-upload-btn\",\n                            defBtnProps.className,\n                        )}\n                        disabled={disabled}\n                    />\n                );\n        }\n    }, [mode, children, disabled, defBtnProps, icon]);\n\n    const handleUpload = useCallback(\n        async (files: IFile[]) => {\n            if (!uploader) return;\n\n            const shouldUploadFiles = files.filter(shouldUpload);\n            const result = await Promise.all(shouldUploadFiles.map(uploader));\n\n            return onUpload?.(result);\n        },\n        [uploader, shouldUpload, onUpload],\n    );\n\n    const processFiles = useCallback(\n        (inputFiles: IFile[]) => {\n            const before = fileList;\n            const changed: IFile[] = [];\n\n            inputFiles.forEach((file) => {\n                const { id, name, size, type } = file;\n                const same = before.some(\n                    (pf) =>\n                        pf.name === name &&\n                        pf.size === size &&\n                        pf.type === type,\n                );\n                const src = URL.createObjectURL(file);\n\n                Object.assign(file, {\n                    id: id ?? uid(7),\n                    src: src ?? file.name,\n                    url: src ?? file.name,\n                });\n                if (!same) changed.push(file);\n            });\n\n            const after = [...before, ...changed];\n            const last = after.at(-1);\n            const nextFiles: IFile[] = multiple\n                ? (after.slice(0, limit) as IFile[])\n                : last\n                  ? [last as IFile]\n                  : [];\n\n            return { nextFiles, changed };\n        },\n        [fileList, multiple, limit],\n    );\n\n    const applyFiles = useCallback(\n        (\n            nextFiles: IFile[],\n            changed: IFile[],\n            e?: ChangeEvent<HTMLInputElement>,\n        ) => {\n            if (!isControlled) setInternalFileList(nextFiles as IFile[]);\n            onFilesChange?.(nextFiles as IFile[], changed as IFile[], e);\n            onChange?.(nextFiles, e);\n            handleUpload(changed);\n        },\n        [isControlled, onFilesChange, onChange, handleUpload],\n    );\n\n    const handleChange = useCallback(\n        (e: ChangeEvent<HTMLInputElement>) => {\n            const inputFiles = Array.from(e.target.files || []) as IFile[];\n            const { nextFiles, changed } = processFiles(inputFiles);\n\n            applyFiles(nextFiles, changed, e);\n            if (inputRef.current) inputRef.current.value = \"\";\n        },\n        [processFiles, applyFiles],\n    );\n\n    const handleDropFiles = useCallback(\n        (files: File[]) => {\n            const { nextFiles, changed } = processFiles(files as IFile[]);\n            applyFiles(nextFiles, changed);\n        },\n        [processFiles, applyFiles],\n    );\n\n    const handleRemove = useCallback(\n        (i: number) => {\n            const files = [...fileList];\n            const changed = files.splice(i, 1);\n            URL.revokeObjectURL((changed[0] as IFile)?.src || \"\");\n\n            if (!isControlled) setInternalFileList(files as IFile[]);\n            onFilesChange?.(files as IFile[], changed as IFile[]);\n            onChange?.(files);\n            onRemove?.(changed[0] as IFile);\n\n            if (inputRef.current) inputRef.current.value = \"\";\n        },\n        [fileList, isControlled, onFilesChange, onChange, onRemove],\n    );\n\n    const handlePreview = useCallback(\n        (i: number) => {\n            preview({\n                items: fileList as unknown as TPreviewItem[],\n                initial: i,\n            });\n        },\n        [fileList, preview],\n    );\n\n    const handleSortEnd = useCallback(\n        (before: number, after: number) => {\n            const files = [...fileList];\n            const nextFiles = arrayMove(files, before, after);\n            if (!isControlled) setInternalFileList(nextFiles);\n            onFilesChange?.(nextFiles, []);\n            onChange?.(nextFiles);\n        },\n        [fileList, isControlled, onFilesChange, onChange],\n    );\n\n    return (\n        <InputContainer\n            as=\"div\"\n            label={label}\n            labelInline={labelInline}\n            className={classNames(\"i-input-label-file\", className)}\n            style={style}\n        >\n            <div\n                className={classNames(\"i-upload-inner\", {\n                    [`i-upload-${mode}`]: mode !== \"default\",\n                })}\n                style={{ [\"--upload-card-size\"]: cardSize } as CSSProperties}\n            >\n                <ListContainer sortable={sortable} onSortEnd={handleSortEnd}>\n                    {fileList.map((file, i) => {\n                        const f = file as IFile;\n                        const key = f.id ?? i;\n                        const node = (\n                            <FileListItem\n                                key={key}\n                                index={i}\n                                file={f}\n                                mode={mode}\n                                renderItem={renderItem}\n                                onRemove={handleRemove}\n                                onPreview={handlePreview}\n                            />\n                        );\n\n                        if (!sortable) return node;\n\n                        return <SortableItem key={key}>{node}</SortableItem>;\n                    })}\n                </ListContainer>\n\n                {uploadMessage && (\n                    <span className=\"i-upload-message\">{uploadMessage}</span>\n                )}\n\n                {fileList.length < limit &&\n                    (droppable ? (\n                        (() => {\n                            const node = (\n                                <Dropbox\n                                    multiple={multiple}\n                                    accept={restProps.accept}\n                                    disabled={disabled}\n                                    onChange={handleChange}\n                                    onDropFiles={handleDropFiles}\n                                >\n                                    {dropbox}\n                                </Dropbox>\n                            );\n                            return getDropboxContainer\n                                ? createPortal(node, getDropboxContainer())\n                                : node;\n                        })()\n                    ) : (\n                        <label>\n                            <input\n                                {...restProps}\n                                disabled={disabled}\n                                ref={inputRef}\n                                type=\"file\"\n                                className=\"i-input-file-hidden\"\n                                multiple={multiple}\n                                onChange={handleChange}\n                            />\n                            {trigger}\n                        </label>\n                    ))}\n            </div>\n        </InputContainer>\n    );\n};\n\nexport default Upload;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/lib/es/index.js

@@ -28,6 +28,7 @@ export { default as Progress } from './components/progress/progress.js';
 export { default as Radio } from './components/radio/radio.js';
 export { default as Resizable } from './components/resizable/resizable.js';
 export { default as River } from './components/river/river.js';
+export { default as Scroll } from './components/scroll/scroll.js';
 export { default as Select } from './components/select/select.js';
 export { default as Step } from './components/step/step.js';
 export { default as Swiper } from './components/swiper/swiper.js';

package/lib/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/index.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import classNames from 'classnames';
 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, MoveToInboxTwotone, OutboxTwotone, FilePresentOutlined, DriveFolderUploadOutlined, PlusSharp } from '@ricons/material';
+import { useState, useRef, useEffect, useCallback, useMemo, Children, cloneElement, createElement, isValidElement, memo, Fragment as Fragment$1, useTransition, forwardRef, useLayoutEffect, useContext, createContext, 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, MoveToInboxTwotone, OutboxTwotone, FilePresentOutlined, DriveFolderUploadOutlined } from '@ricons/material';
 import { createRoot } from 'react-dom/client';
 import { getScrollbarSize, List as List$2 } from 'react-window';
 import { createPortal } from 'react-dom';
@@ -62,14 +62,15 @@ function createRipple() {
 
 const Loading = (props) => {
     const { icon, text, size, absolute, style, className, ...restProps } = props;
+    const iconSize = size != null
+        ? { fontSize: typeof size === "number" ? `${size}px` : size }
+        : undefined;
     return (jsxs("div", { className: classNames("i-loading-container", {
             absolute,
         }, className), style: {
             ...style,
             inset: absolute ? 0 : "unset",
-        }, ...restProps, children: [icon ?? (jsx("svg", { width: '24', height: '24', stroke: '#000', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', className: 'i-loading-icon', style: {
-                    fontSize: size,
-                }, children: jsx("circle", { cx: '12', cy: '12', r: '9.5', fill: 'none', strokeWidth: '3', strokeLinecap: 'round', strokeDasharray: 40, strokeDashoffset: 0 }) })), text] }));
+        }, ...restProps, children: [icon ?? jsx("span", { className: "i-loading-icon", style: iconSize }), text] }));
 };
 
 const os = window.navigator.platform;
@@ -494,53 +495,62 @@ const Icon = (props) => {
 
 function ToTop(props) {
     const { style, className, onClick } = props;
-    return (jsx(Button, { square: true, className: classNames("i-affix-totop", className), style: { ...style }, onClick: onClick, children: jsx(Icon, { icon: jsx(SkipPreviousRound, {}), rotate: 90 }) }));
+    return (jsx(Button, { square: true, className: classNames("i-affix-totop", "i-affix-target", className), style: { ...style }, onClick: onClick, children: jsx(Icon, { icon: jsx(SkipPreviousRound, {}), rotate: 90 }) }));
 }
 
+const defaultGetContainer = () => {
+    if (typeof window === "undefined")
+        return null;
+    return window;
+};
 const Affix = (props) => {
-    const { position = "fixed", left, top, right, bottom, offset, style, className, children, getContainer = () => {
-        if (typeof document === "undefined")
-            return null;
-        return document.body;
-    }, } = props;
-    const [hidden, setHidden] = useState(false);
+    const { position = "fixed", left, top, right, bottom, offset, style, className, children, getContainer = defaultGetContainer, } = props;
+    const [hidden, setHidden] = useState(() => {
+        if (!offset)
+            return false;
+        if (typeof window === "undefined")
+            return false;
+        return (window.scrollY ?? 0) < offset;
+    });
+    const getContainerRef = useRef(getContainer);
+    getContainerRef.current = getContainer;
     const hijackChildren = useMemo(() => {
         return Children.map(children, (node) => {
-            if (node.type === ToTop) {
-                const { onClick } = node.props;
-                return cloneElement(node, {
-                    key: node.key,
-                    ...node.props,
-                    onClick: (e) => {
-                        const container = getContainer();
-                        onClick?.(e);
-                        container?.scrollTo({
-                            top: 0,
-                            left: 0,
-                            behavior: "smooth",
-                        });
-                    },
-                });
-            }
-            return node;
+            if (node.type !== ToTop)
+                return node;
+            const { onClick } = node.props;
+            return cloneElement(node, {
+                onClick: (e) => {
+                    const container = getContainerRef.current();
+                    onClick?.(e);
+                    container?.scrollTo({
+                        top: 0,
+                        left: 0,
+                        behavior: "smooth",
+                    });
+                },
+            });
         });
-    }, [children, getContainer]);
+    }, [children]);
     useEffect(() => {
-        const container = getContainer();
+        const container = getContainerRef.current();
         if (!offset || !container)
             return;
+        const getScrollTop = () => container instanceof Window
+            ? container.scrollY
+            : container.scrollTop;
         const listener = debounce({ delay: 160 }, () => {
-            const top = container.scrollTop;
-            setHidden(top < offset);
+            setHidden(getScrollTop() < offset);
         });
         listener();
         container.addEventListener("scroll", listener);
         return () => {
+            listener.cancel();
             container.removeEventListener("scroll", listener);
         };
-    }, [offset, getContainer]);
+    }, [offset]);
     return (jsx("div", { className: classNames("i-affix", className, {
-            "i-affix-hidden": hidden,
+            "i-affix-visible": !hidden,
         }), style: {
             ...style,
             position,
@@ -1830,19 +1840,7 @@ function Popup(props) {
     const [show, setShow] = useState(false);
     const showRef = useRef(false);
     showRef.current = show;
-    const latestRef = useRef({
-        disabled,
-        trigger,
-        touchable,
-        showDelay,
-        hideDelay,
-        position,
-        gap,
-        offset,
-        align,
-        fitSize,
-        onVisibleChange,
-    });
+    const latestRef = useRef({});
     latestRef.current = {
         disabled,
         trigger,
@@ -1896,9 +1894,8 @@ function Popup(props) {
     };
     const applyFitSize = () => {
         const o = latestRef.current;
-        const triggerEl = triggerRef.current;
         const contentEl = contentRef.current;
-        if (!triggerEl || !contentEl)
+        if (!contentEl)
             return;
         const vertical = ["top", "bottom"].includes(o.position);
         const key = vertical ? "width" : "height";
@@ -1906,6 +1903,9 @@ function Popup(props) {
             contentEl.style[key] = "";
             return;
         }
+        const triggerEl = triggerRef.current;
+        if (!triggerEl)
+            return;
         const size = triggerEl[vertical ? "offsetWidth" : "offsetHeight"];
         contentEl.style[key] =
             typeof size === "number" ? `${size}px` : "";
@@ -2142,8 +2142,8 @@ function Popup(props) {
                         e.stopPropagation();
                         setTriggerEl(e);
                         pointRef.current = {
-                            pageX: e.pageX,
-                            pageY: e.pageY,
+                            pageX: e.clientX,
+                            pageY: e.clientY,
                         };
                         if (showRef.current) {
                             ensureBaseStyle();
@@ -2300,22 +2300,38 @@ function Popup(props) {
 
 const { Item: ListItem } = List$1;
 const Item$3 = (props) => {
-    const { more, moreProps, onClick, ...restProps } = props;
-    const Li = (jsx(ListItem, { onClick: (e) => {
+    const { more, moreProps, onClick, ref: itemRef, children, ...restProps } = props;
+    const close = useContext(DropdownCloseCtx);
+    const liRef = useRef(null);
+    const [position, setPosition] = useState("right");
+    const { position: morePosition, onVisibleChange: moreOnVisibleChange, width: moreWidth, ...restMoreProps } = moreProps ?? {};
+    const effectivePosition = morePosition ?? position;
+    const handleVisibleChange = (v) => {
+        if (v && liRef.current) {
+            const rect = liRef.current.getBoundingClientRect();
+            setPosition(rect.left > window.innerWidth / 2 ? "left" : "right");
+        }
+        moreOnVisibleChange?.(v);
+    };
+    const Li = (jsx(ListItem, { ref: itemRef ?? liRef, onClick: (e) => {
             e.stopPropagation();
+            if (!more)
+                close?.();
             onClick?.(e);
-        }, ...restProps }));
+        }, ...restProps, children: children }));
     if (!more)
         return Li;
-    return (jsx(Popup, { position: 'right', touchable: true, arrow: false, align: 'start', offset: 10, hideDelay: 240, ...moreProps, content: jsx(List$1, { className: 'i-dropdown-content', onClick: (e) => e.stopPropagation(), children: more }), children: Li }));
+    return (jsx(Popup, { ...restMoreProps, position: effectivePosition, touchable: true, arrow: false, align: "start", offset: 11, hideDelay: 240, onVisibleChange: handleVisibleChange, content: jsx(List$1, { className: "i-dropdown-content", style: { minWidth: moreWidth }, onClick: (e) => e.stopPropagation(), children: more }), children: Li }));
 };
 
+const DropdownCloseCtx = createContext(null);
 const Dropdown = (props) => {
     const { visible, width, content, children, ...restProps } = props;
     const [active, setActive] = useState(visible);
     if (!content) {
         return children;
     }
+    const close = () => setActive(false);
     const handleVisibleChange = (v) => {
         setActive(v);
         if (props.onVisibleChange) {
@@ -2325,9 +2341,9 @@ const Dropdown = (props) => {
     useEffect(() => {
         setActive(visible);
     }, [visible]);
-    return (jsx(Popup, { trigger: 'click', position: 'bottom', content: jsx(List$1, { className: 'i-dropdown-content', style: { minWidth: width }, children: typeof content === "function"
-                ? content(() => setActive(false))
-                : content }), ...restProps, touchable: true, visible: active, onVisibleChange: handleVisibleChange, children: children }));
+    return (jsx(Popup, { trigger: 'click', position: 'bottom', content: jsx(DropdownCloseCtx.Provider, { value: close, children: jsx(List$1, { className: 'i-dropdown-content', style: { minWidth: width }, children: typeof content === "function"
+                    ? content(close)
+                    : content }) }), ...restProps, touchable: true, visible: active, onVisibleChange: handleVisibleChange, children: children }));
 };
 Dropdown.Item = Item$3;
 
@@ -2681,7 +2697,13 @@ const Editor = (props) => {
     const [memtionRect, setMemtionRect] = useState(null);
     const [memtionKeyword, setMemtionKeyword] = useState("");
     const [memtionActiveIndex, setMemtionActiveIndex] = useState(0);
-    const memtionOptions = useMemo(() => filterMemtionOptions(memtion?.options ?? [], memtionKeyword), [memtion?.options, memtionKeyword]);
+    const [activeMemtionIndex, setActiveMemtionIndex] = useState(-1);
+    const memtionOptions = useMemo(() => {
+        if (activeMemtionIndex < 0 || !memtion?.length)
+            return [];
+        const active = memtion?.[activeMemtionIndex];
+        return filterMemtionOptions(active?.options ?? [], memtionKeyword);
+    }, [memtion, memtionKeyword, activeMemtionIndex]);
     const sanitizeValue = (nextValue) => {
         if (isPlaintextMode) {
             return nextValue === "\n" ? "" : nextValue;
@@ -2736,18 +2758,20 @@ const Editor = (props) => {
         setMemtionRect(null);
         setMemtionKeyword("");
         setMemtionActiveIndex(0);
+        setActiveMemtionIndex(-1);
     };
     const syncEditorState = () => {
         selectionRef.current = null;
         hideMemtion();
     };
     const insertMemtion = (option) => {
+        const activeMemtion = memtion?.[activeMemtionIndex];
         const replaceRange = getMemtionReplaceRange(memtionTriggerRangeRef.current, selectionRef.current);
         const range = insertMemtionOption({
             editor: editorRef.current,
             range: replaceRange,
             mode,
-            memtion,
+            memtion: activeMemtion,
             option,
             sanitizeValue,
         });
@@ -2783,7 +2807,6 @@ const Editor = (props) => {
             editorRef.current?.dispatchEvent(new Event("input", { bubbles: true }));
             return;
         }
-        const memtionKey = memtion?.key ?? "@";
         if (memtionVisible && e.key === " ") {
             hideMemtion();
         }
@@ -2803,11 +2826,15 @@ const Editor = (props) => {
                     return;
             }
         }
-        if (memtion && e.key === memtionKey) {
-            rememberSelection();
-            memtionTriggerRangeRef.current =
-                selectionRef.current?.cloneRange() ?? null;
-            pendingMemtionRef.current = true;
+        if (memtion?.length) {
+            const matchedIndex = memtion.findIndex((m) => e.key === m.key);
+            if (matchedIndex >= 0) {
+                rememberSelection();
+                memtionTriggerRangeRef.current =
+                    selectionRef.current?.cloneRange() ?? null;
+                pendingMemtionRef.current = true;
+                setActiveMemtionIndex(matchedIndex);
+            }
         }
         switch (e.key) {
             case "Tab":
@@ -2855,8 +2882,13 @@ const Editor = (props) => {
             setEditorValue(nextValue);
         }
         rememberSelection();
-        if (memtion && (pendingMemtionRef.current || memtionVisible)) {
-            const memtionKey = memtion?.key ?? "@";
+        if (activeMemtionIndex >= 0 && (pendingMemtionRef.current || memtionVisible)) {
+            const active = memtion?.[activeMemtionIndex];
+            if (!active) {
+                hideMemtion();
+                return;
+            }
+            const memtionKey = active.key ?? "@";
             const memtionText = getMemtionText(memtionTriggerRangeRef.current, selectionRef.current);
             if (!memtionText.startsWith(memtionKey) || /\s/.test(memtionText)) {
                 hideMemtion();
@@ -2911,7 +2943,7 @@ const Editor = (props) => {
             ...style,
             [autosize ? "minHeight" : "height"]: height,
             width,
-        }, children: [!hideControl && (jsx("div", { className: "i-editor-controls", children: controls })), memtion && (jsx(Memtion$1, { visible: memtionVisible, rect: memtionRect, options: memtionOptions, activeIndex: memtionActiveIndex, onActiveChange: setMemtionActiveIndex, onSelect: insertMemtion })), jsx("div", { ref: handleRef, className: "i-editor-content", "data-placeholder": placeholder, contentEditable: isPlaintextMode ? "plaintext-only" : true, onFocus: handleFocus, onBlur: handleBlur, onMouseUp: handleMouseUp, onPaste: handlePaste, onInput: handleInput, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, ...restProps })] }));
+        }, children: [!hideControl && (jsx("div", { className: "i-editor-controls", children: controls })), memtion?.length && (jsx(Memtion$1, { visible: memtionVisible, rect: memtionRect, options: memtionOptions, activeIndex: memtionActiveIndex, onActiveChange: setMemtionActiveIndex, onSelect: insertMemtion })), jsx("div", { ref: handleRef, className: "i-editor-content", "data-placeholder": placeholder, contentEditable: isPlaintextMode ? "plaintext-only" : true, onFocus: handleFocus, onBlur: handleBlur, onMouseUp: handleMouseUp, onPaste: handlePaste, onInput: handleInput, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, ...restProps })] }));
 };
 
 const Flex = (props) => {
@@ -3438,9 +3470,9 @@ Text.HighLight = HighLight;
 
 function Circle(props) {
     const { value, circleSize = 40, lineWidth = 8 } = props;
-    return (jsxs("div", { className: 'i-progress-circle', children: [jsxs("svg", { width: circleSize, height: circleSize, children: [jsx("circle", { cx: circleSize / 2, cy: circleSize / 2, r: circleSize / 2 - lineWidth / 2, fill: 'none', stroke: 'var(--background-opacity-2)', strokeWidth: lineWidth }), jsx("circle", { cx: circleSize / 2, cy: circleSize / 2, r: circleSize / 2 - lineWidth / 2, fill: 'none', stroke: 'var(--color-main)', strokeWidth: lineWidth, strokeDasharray: 100, pathLength: 100, className: 'i-progress-circle-path', strokeLinecap: 'round', style: {
-                            strokeDashoffset: `calc(100 - ${value})`,
-                        } })] }), jsxs("span", { className: 'i-progress-circle-value', children: [jsx("span", { children: value }), jsx(Text, { size: '.81em', className: 'color-7', children: "%" })] })] }));
+    return (jsxs("div", { className: "i-progress-circle", children: [jsxs("svg", { width: circleSize, height: circleSize, children: [jsx("circle", { cx: circleSize / 2, cy: circleSize / 2, r: circleSize / 2 - lineWidth / 2, fill: "none", stroke: "var(--color-main-0)", strokeWidth: lineWidth }), jsx("circle", { cx: circleSize / 2, cy: circleSize / 2, r: circleSize / 2 - lineWidth / 2, fill: "none", stroke: "var(--color-main)", strokeWidth: lineWidth, strokeDasharray: 100, pathLength: 100, className: "i-progress-circle-path", strokeLinecap: "round", style: {
+                            strokeDashoffset: 100 - (value ?? 0),
+                        } })] }), jsxs("span", { className: "i-progress-circle-value", children: [jsx("span", { children: value }), jsx(Text, { size: ".81em", className: "color-5", children: "%" })] })] }));
 }
 
 const Line = (props) => {
@@ -5222,6 +5254,70 @@ const River = (props) => {
                     })] }) }));
 };
 
+const Scroll = (props) => {
+    const { style, className, draggable, onScroll, children, ...restProps } = props;
+    const scrollRef = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const dragState = useRef({ down: false, startX: 0, scrollLeft: 0 });
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const onWheel = (e) => {
+            const canScroll = el.scrollWidth > el.clientWidth + 1;
+            if (!canScroll)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY)
+                ? e.deltaX
+                : e.deltaY;
+            el.scrollLeft += delta;
+        };
+        const opts = {
+            passive: false,
+            capture: true,
+        };
+        el.addEventListener("wheel", onWheel, opts);
+        return () => el.removeEventListener("wheel", onWheel, opts);
+    }, []);
+    useEffect(() => {
+        if (!draggable)
+            return;
+        const handleMouseMove = (e) => {
+            if (!dragState.current.down || !scrollRef.current)
+                return;
+            const x = e.clientX - dragState.current.startX;
+            scrollRef.current.scrollLeft =
+                dragState.current.scrollLeft - x;
+        };
+        const handleMouseUp = () => {
+            dragState.current.down = false;
+            setDragging(false);
+        };
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+        return () => {
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [draggable]);
+    const handleMouseDown = (e) => {
+        if (!draggable || !scrollRef.current)
+            return;
+        setDragging(true);
+        dragState.current = {
+            down: true,
+            startX: e.clientX,
+            scrollLeft: scrollRef.current.scrollLeft,
+        };
+    };
+    return (jsx("div", { ref: scrollRef, className: classNames("i-scroll", className, {
+            "i-scroll-draggable": draggable,
+            "i-scroll-dragging": dragging,
+        }), style: style, onScroll: onScroll, onMouseDown: handleMouseDown, ...restProps, children: children }));
+};
+
 function Divider() {
     return jsx("i", { className: 'i-step-divider' });
 }
@@ -6142,7 +6238,7 @@ const normalizeFiles = (files) => (files ?? []).map((item) => {
     };
 });
 const Upload = (props) => {
-    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 { label, labelInline, value, files, placeholder, status = "normal", message, icon = jsx(Icon, { icon: jsx(DriveFolderUploadOutlined, {}) }), 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
@@ -6152,7 +6248,7 @@ const Upload = (props) => {
     const inputRef = useRef(null);
     const preview = usePreview();
     const defBtnProps = useMemo(() => ({
-        children: (jsxs(Fragment, { children: [jsx(Icon, { icon: jsx(DriveFolderUploadOutlined, {}) }), " \u4E0A\u4F20"] })),
+        children: jsxs(Fragment, { children: [icon, " \u4E0A\u4F20"] }),
         ...defaultButtonProps,
     }), [defaultButtonProps]);
     const trigger = useMemo(() => {
@@ -6160,11 +6256,11 @@ const Upload = (props) => {
             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: icon }));
             default:
                 return (jsx(Button, { ...defBtnProps, className: classNames("i-upload-btn", defBtnProps.className), disabled: disabled }));
         }
-    }, [mode, children, disabled, defBtnProps]);
+    }, [mode, children, disabled, defBtnProps, icon]);
     const handleUpload = useCallback(async (files) => {
         if (!uploader)
             return;
@@ -6407,4 +6503,4 @@ const useTheme = (props) => {
     };
 };
 
-export { Affix, Badge, Button, Card, Checkbox, Collapse, ColorPicker, Datagrid, Datepicker as DatePicker, Description, Drawer, Dropdown, Editor, Flex, Form, Icon, MemoImage as Image, Input, List$1 as List, Loading, message as Message, Modal, Pagination, Popconfirm, Popup, Progress, Radio, Resizable, River, Select, Step, Swiper, Tabs, Tag, Text, TimePicker, Tree, Upload, Video, usePreview, useTheme };
+export { Affix, Badge, Button, Card, Checkbox, Collapse, ColorPicker, Datagrid, Datepicker as DatePicker, Description, Drawer, Dropdown, Editor, Flex, Form, Icon, MemoImage as Image, Input, List$1 as List, Loading, message as Message, Modal, Pagination, Popconfirm, Popup, Progress, Radio, Resizable, River, Scroll, Select, Step, Swiper, Tabs, Tag, Text, TimePicker, Tree, Upload, Video, usePreview, useTheme };

package/lib/types/components/affix/totop.d.ts

@@ -1,6 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { IAffix } from './type.js';
+import { CSSProperties, MouseEventHandler } from 'react';
 
-declare function ToTop(props: IAffix): react_jsx_runtime.JSX.Element;
+interface IToTopProps {
+    style?: CSSProperties;
+    className?: string;
+    onClick?: MouseEventHandler<HTMLElement>;
+}
+declare function ToTop(props: IToTopProps): react_jsx_runtime.JSX.Element;
 
 export { ToTop as default };

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

@@ -7,7 +7,7 @@ interface IAffix extends HTMLAttributes<HTMLElement> {
     right?: string | number;
     bottom?: string | number;
     offset?: number;
-    getContainer?: () => HTMLElement | null;
+    getContainer?: () => HTMLElement | Window | null;
 }
 
 export type { IAffix };

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

@@ -1,6 +1,6 @@
 import { IDropdown, IDropItem } from './type.js';
-import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 
 declare const Dropdown: {
     (props: IDropdown): string | number | bigint | boolean | react_jsx_runtime.JSX.Element | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode>>;

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

@@ -23,7 +23,7 @@ interface IEditor extends Omit<HTMLAttributes<HTMLDivElement>, "onInput" | "onCh
     mode?: "rich" | "plaintext" | "plaintextOnMemtion";
     hideControl?: boolean;
     addtionControls?: IEditorAddtionControl[];
-    memtion?: IEditorMemtion;
+    memtion?: IEditorMemtion[];
     border?: boolean;
     onChange?: (value: string, e: SyntheticEvent<HTMLDivElement>) => void;
     onEnter?: (e: KeyboardEvent<HTMLDivElement>) => void;