@laser-ui/components 1.6.1 → 2.0.0

package/types.d.ts

@@ -4,7 +4,6 @@ export type Lang = 'en-US' | 'zh-CN';
 export type Size = 'small' | 'medium' | 'large';
 export type PopupPlacement = 'top' | 'top-left' | 'top-right' | 'right' | 'right-top' | 'right-bottom' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom';
 export type VerticalSidePlacement = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
-export type CloneHTMLElement<T extends React.ReactElement = React.ReactElement> = (el: T) => T;
 export interface BaseProps<CR extends string, C extends {
     [index: string]: string;
 }> {
@@ -19,3 +18,4 @@ export interface BaseProps<CR extends string, C extends {
         [K in CR]: string;
     };
 }
+export type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;

package/upload/Upload.d.ts

@@ -6,9 +6,8 @@ import { UploadList } from './UploadList';
 import { UploadPicture } from './UploadPicture';
 import { UploadPictureList } from './UploadPictureList';
 import { UploadPreviewAction } from './UploadPreviewAction';
-declare function UploadFC(props: UploadProps, ref: React.ForwardedRef<HTMLInputElement>): JSX.Element | null;
 export declare const Upload: {
-    (props: UploadProps & React.RefAttributes<HTMLInputElement>): ReturnType<typeof UploadFC>;
+    (props: UploadProps): React.ReactElement | null;
     Button: typeof UploadButton;
     Action: typeof UploadAction;
     PreviewAction: typeof UploadPreviewAction;
@@ -16,4 +15,3 @@ export declare const Upload: {
     Picture: typeof UploadPicture;
     PictureList: typeof UploadPictureList;
 };
-export {};

package/upload/Upload.js

@@ -1,8 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEventCallback, useForkRef, useUnmount } from '@laser-ui/hooks';
-import { isFunction, isNumber } from 'lodash';
-import { cloneElement, forwardRef, useMemo, useRef } from 'react';
+import { useEventCallback, useUnmount } from '@laser-ui/hooks';
+import { setRef } from '@laser-ui/utils';
+import { isNumber } from 'lodash';
+import { useMemo, useRef } from 'react';
 import { UploadAction } from './UploadAction';
 import { UploadButton } from './UploadButton';
 import { UploadList } from './UploadList';
@@ -12,18 +13,15 @@ import { UploadPreviewAction } from './UploadPreviewAction';
 import { CLASSES, UploadContext } from './vars';
 import { useComponentProps, useControlled, useStyled } from '../hooks';
 import { mergeCS } from '../utils';
-function UploadFC(props, ref) {
+export const Upload = (props) => {
     var _a;
-    const _b = useComponentProps('Upload', props), { children, styleOverrides, styleProvider, formControl, model, defaultModel, request, max, drag = false, customUpload, beforeUpload, onModelChange, onRemove } = _b, restProps = __rest(_b, ["children", "styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "request", "max", "drag", "customUpload", "beforeUpload", "onModelChange", "onRemove"]);
+    const _b = useComponentProps('Upload', props), { ref, children, styleOverrides, styleProvider, formControl, model, defaultModel, request, max, drag = false, customUpload, beforeUpload, onModelChange, onRemove } = _b, restProps = __rest(_b, ["ref", "children", "styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "request", "max", "drag", "customUpload", "beforeUpload", "onModelChange", "onRemove"]);
     const styled = useStyled(CLASSES, { upload: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.upload, 'upload-list': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['upload-list'] }, styleOverrides);
     const inputRef = useRef(null);
-    const combineInputRef = useForkRef(inputRef, ref);
-    const dataRef = useRef({
-        fileURLs: [],
-    });
+    const fileURLs = useRef([]);
     const [files, changeFiles] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : [], model, undefined, undefined, formControl === null || formControl === void 0 ? void 0 : formControl.control);
     useUnmount(() => {
-        dataRef.current.fileURLs.forEach((fileURL) => {
+        fileURLs.current.forEach((fileURL) => {
             URL.revokeObjectURL(fileURL);
         });
     });
@@ -41,7 +39,7 @@ function UploadFC(props, ref) {
                     let uid = ++n;
                     const add = (obj) => {
                         const fileURL = URL.createObjectURL(file);
-                        dataRef.current.fileURLs.push(fileURL);
+                        fileURLs.current.push(fileURL);
                         const fileAdded = Object.assign({ uid, name: file.name, url: fileURL, thumbUrl: file.type.startsWith('image') ? fileURL : undefined, originFile: file, response: xhr.response }, obj);
                         if (isNumber(max) && files.length + filesAdded.length >= max) {
                             if (max === 1) {
@@ -138,41 +136,6 @@ function UploadFC(props, ref) {
             }
         }
     };
-    const render = (el) => {
-        let dragProps = {};
-        if (drag) {
-            dragProps = {
-                onDragEnter: (e) => {
-                    var _a, _b;
-                    (_b = (_a = el.props).onDragEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                    e.stopPropagation();
-                    e.preventDefault();
-                },
-                onDragOver: (e) => {
-                    var _a, _b;
-                    (_b = (_a = el.props).onDragOver) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                    e.stopPropagation();
-                    e.preventDefault();
-                },
-                onDrop: (e) => {
-                    var _a, _b;
-                    (_b = (_a = el.props).onDrop) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                    e.stopPropagation();
-                    e.preventDefault();
-                    const dt = e.dataTransfer;
-                    const files = dt.files;
-                    handleFiles(files);
-                },
-            };
-        }
-        return cloneElement(el, Object.assign(Object.assign({}, dragProps), { onClick: (e) => {
-                var _a, _b;
-                (_b = (_a = el.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                if (inputRef.current) {
-                    inputRef.current.click();
-                }
-            } }));
-    };
     const handleRemove = useEventCallback((file) => {
         onRemove === null || onRemove === void 0 ? void 0 : onRemove(file);
         const newList = changeFiles((draft) => {
@@ -182,10 +145,39 @@ function UploadFC(props, ref) {
         onModelChange === null || onModelChange === void 0 ? void 0 : onModelChange(newList, { type: 'remove', files: [file] });
     });
     const context = useMemo(() => ({ files, onRemove: handleRemove }), [files, handleRemove]);
-    return (_jsxs(_Fragment, { children: [_jsx(UploadContext.Provider, { value: context, children: isFunction(children) ? children(render) : render(children) }), _jsx("input", Object.assign({}, restProps, mergeCS(styled('upload'), {
+    return (_jsxs(_Fragment, { children: [_jsx(UploadContext, { value: context, children: children(Object.assign({ onClick: () => {
+                        if (inputRef.current) {
+                            inputRef.current.click();
+                        }
+                    } }, (drag
+                    ? {
+                        onDragEnter: (e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                        },
+                        onDragOver: (e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                        },
+                        onDrop: (e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            const dt = e.dataTransfer;
+                            const files = dt.files;
+                            handleFiles(files);
+                        },
+                    }
+                    : undefined))) }), _jsx("input", Object.assign({}, restProps, mergeCS(styled('upload'), {
                 className: restProps.className,
                 style: restProps.style,
-            }), { ref: combineInputRef, type: (_a = restProps.type) !== null && _a !== void 0 ? _a : 'file', onChange: (e) => {
+            }), { ref: (instance) => {
+                    const ret = setRef(ref, instance);
+                    inputRef.current = instance;
+                    return () => {
+                        ret();
+                        inputRef.current = null;
+                    };
+                }, type: (_a = restProps.type) !== null && _a !== void 0 ? _a : 'file', onChange: (e) => {
                     var _a;
                     (_a = restProps.onChange) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
                     const files = e.currentTarget.files;
@@ -194,8 +186,7 @@ function UploadFC(props, ref) {
                     }
                     e.currentTarget.value = '';
                 } }))] }));
-}
-export const Upload = forwardRef(UploadFC);
+};
 Upload.Button = UploadButton;
 Upload.Action = UploadAction;
 Upload.PreviewAction = UploadPreviewAction;

package/upload/UploadAction.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { UploadActionProps } from './types';
-export declare const UploadAction: import("react").ForwardRefExoticComponent<UploadActionProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function UploadAction(props: UploadActionProps): React.ReactElement | null;

package/upload/UploadAction.js

@@ -4,20 +4,21 @@ import { saveFile } from '@laser-ui/utils';
 import DeleteOutlineOutlined from '@material-design-icons/svg/outlined/delete_outline.svg?react';
 import FileDownloadOutlined from '@material-design-icons/svg/outlined/file_download.svg?react';
 import { isUndefined } from 'lodash';
-import { forwardRef } from 'react';
-import { ACTION_CLASSES } from './vars';
+import { use } from 'react';
+import { ACTION_CLASSES, UploadActionContext } from './vars';
 import { useComponentProps, useStyled, useTranslation } from '../hooks';
 import { Icon } from '../icon';
 import { mergeCS } from '../utils';
-export const UploadAction = forwardRef((props, ref) => {
+export function UploadAction(props) {
     var _a, _b, _c;
-    const _d = useComponentProps('UploadAction', props), { styleOverrides, styleProvider, children, preset, disabled: disabledProp = false, _file, _defaultActions, _light, _onRemove } = _d, restProps = __rest(_d, ["styleOverrides", "styleProvider", "children", "preset", "disabled", "_file", "_defaultActions", "_light", "_onRemove"]);
+    const _d = useComponentProps('UploadAction', props), { ref, styleOverrides, styleProvider, children, preset, disabled: disabledProp = false } = _d, restProps = __rest(_d, ["ref", "styleOverrides", "styleProvider", "children", "preset", "disabled"]);
     const styled = useStyled(ACTION_CLASSES, { 'upload-action': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['upload-action'] }, styleOverrides);
     const { t } = useTranslation();
-    const disabled = preset === 'download' ? disabledProp || isUndefined(_file.url) : disabledProp;
+    const uploadActionContext = use(UploadActionContext);
+    const disabled = preset === 'download' ? disabledProp || isUndefined(uploadActionContext === null || uploadActionContext === void 0 ? void 0 : uploadActionContext.file.url) : disabledProp;
     return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('upload-action', {
         'upload-action.is-disabled': disabled,
-        'upload-action--light': _light,
+        'upload-action--light': uploadActionContext === null || uploadActionContext === void 0 ? void 0 : uploadActionContext.light,
     }), {
         className: restProps.className,
         style: restProps.style,
@@ -26,19 +27,21 @@ export const UploadAction = forwardRef((props, ref) => {
             : preset === 'remove'
                 ? t('Upload', 'Remove file')
                 : undefined, onClick: (e) => {
-            var _a;
+            var _a, _b, _c;
             (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
             e.stopPropagation();
-            if (preset === 'download') {
-                if (_defaultActions === null || _defaultActions === void 0 ? void 0 : _defaultActions.download) {
-                    _defaultActions.download(_file);
+            if (uploadActionContext) {
+                if (preset === 'download') {
+                    if ((_b = uploadActionContext.defaultActions) === null || _b === void 0 ? void 0 : _b.download) {
+                        uploadActionContext.defaultActions.download(uploadActionContext.file);
+                    }
+                    else {
+                        saveFile(uploadActionContext.file.url, uploadActionContext.file.name);
+                    }
                 }
-                else {
-                    saveFile(_file.url, _file.name);
+                else if (preset === 'remove') {
+                    (_c = uploadActionContext.onRemove) === null || _c === void 0 ? void 0 : _c.call(uploadActionContext);
                 }
             }
-            else if (preset === 'remove') {
-                _onRemove === null || _onRemove === void 0 ? void 0 : _onRemove();
-            }
         }, children: children !== null && children !== void 0 ? children : (preset === 'download' ? (_jsx(Icon, { children: _jsx(FileDownloadOutlined, {}) })) : preset === 'remove' ? (_jsx(Icon, { children: _jsx(DeleteOutlineOutlined, {}) })) : null) })));
-});
+}

package/upload/UploadButton.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { UploadButtonProps } from './types';
-export declare const UploadButton: import("react").ForwardRefExoticComponent<UploadButtonProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function UploadButton(props: UploadButtonProps): React.ReactElement | null;

package/upload/UploadButton.js

@@ -2,17 +2,18 @@ import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import AddOutlined from '@material-design-icons/svg/outlined/add.svg?react';
 import InsertDriveFileTwoTone from '@material-design-icons/svg/two-tone/insert_drive_file.svg?react';
-import { Children, cloneElement, forwardRef } from 'react';
+import { has } from 'lodash';
+import { Fragment } from 'react';
 import { UploadAction } from './UploadAction';
 import { UploadPreviewAction } from './UploadPreviewAction';
-import { BUTTON_CLASSES } from './vars';
+import { BUTTON_CLASSES, UploadActionContext } from './vars';
+import { CircularProgress } from '../circular-progress';
 import { useComponentProps, useStyled, useTranslation } from '../hooks';
 import { Icon } from '../icon';
-import { CircularProgress } from '../internal/circular-progress';
 import { mergeCS } from '../utils';
-export const UploadButton = forwardRef((props, ref) => {
+export function UploadButton(props) {
     var _a;
-    const _b = useComponentProps('UploadButton', props), { styleOverrides, styleProvider, file, actions, defaultActions, onRemove } = _b, restProps = __rest(_b, ["styleOverrides", "styleProvider", "file", "actions", "defaultActions", "onRemove"]);
+    const _b = useComponentProps('UploadButton', props), { ref, styleOverrides, styleProvider, file, actions, defaultActions, onRemove } = _b, restProps = __rest(_b, ["ref", "styleOverrides", "styleProvider", "file", "actions", "defaultActions", "onRemove"]);
     const styled = useStyled(BUTTON_CLASSES, { 'upload-button': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['upload-button'] }, styleOverrides);
     const { t } = useTranslation();
     const isLoading = file && file.state === 'progress';
@@ -22,10 +23,13 @@ export const UploadButton = forwardRef((props, ref) => {
     }), {
         className: restProps.className,
         style: restProps.style,
-    }), { ref: ref, tabIndex: (_a = restProps.tabIndex) !== null && _a !== void 0 ? _a : (isLoading ? -1 : 0), children: file && file.state !== 'progress' ? (_jsxs(_Fragment, { children: [file.thumbUrl ? (_jsx("img", Object.assign({}, styled('upload-button__thumbnail'), { src: file.thumbUrl, alt: file.name }))) : (_jsxs(_Fragment, { children: [_jsx(Icon, { theme: file.state === 'error' ? 'danger' : 'primary', children: _jsx(InsertDriveFileTwoTone, {}) }), _jsx("div", Object.assign({}, styled('upload-button__name'), { children: file.name }))] })), _jsx("div", Object.assign({}, styled('upload-button__actions'), { children: Children.map(actions !== null && actions !== void 0 ? actions : [_jsx(UploadPreviewAction, {}), _jsx(UploadAction, { preset: "remove" })], (action) => cloneElement(action, {
-                        _file: file,
-                        _defaultActions: defaultActions,
-                        _light: true,
-                        _onRemove: onRemove,
-                    })) }))] })) : (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({}, styled('upload-button__icon'), { children: _jsx(Icon, { children: isLoading ? _jsx(CircularProgress, {}) : _jsx(AddOutlined, {}) }) })), _jsx("div", Object.assign({}, styled('upload-button__text'), { children: t('Upload', isLoading ? 'Uploading' : 'Upload') }))] })) })));
-});
+    }), { ref: ref, tabIndex: (_a = restProps.tabIndex) !== null && _a !== void 0 ? _a : (isLoading ? -1 : 0), children: file && file.state !== 'progress' ? (_jsxs(_Fragment, { children: [file.thumbUrl ? (_jsx("img", Object.assign({}, styled('upload-button__thumbnail'), { src: file.thumbUrl, alt: file.name }))) : (_jsxs(_Fragment, { children: [_jsx(Icon, { theme: file.state === 'error' ? 'danger' : 'primary', children: _jsx(InsertDriveFileTwoTone, {}) }), _jsx("div", Object.assign({}, styled('upload-button__name'), { children: file.name }))] })), _jsx("div", Object.assign({}, styled('upload-button__actions'), { children: _jsx(UploadActionContext, { value: {
+                            file,
+                            defaultActions,
+                            light: true,
+                            onRemove,
+                        }, children: (actions !== null && actions !== void 0 ? actions : [_jsx(UploadPreviewAction, {}), _jsx(UploadAction, { preset: "remove" })]).map((node, index) => {
+                            const { id, action } = (has(node, ['id', 'action']) ? node : { id: index, action: node });
+                            return _jsx(Fragment, { children: action }, id);
+                        }) }) }))] })) : (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({}, styled('upload-button__icon'), { children: _jsx(Icon, { children: isLoading ? _jsx(CircularProgress, {}) : _jsx(AddOutlined, {}) }) })), _jsx("div", Object.assign({}, styled('upload-button__text'), { children: t('Upload', isLoading ? 'Uploading' : 'Upload') }))] })) })));
+}

package/upload/UploadList.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { UploadListProps } from './types';
-export declare function UploadList(props: UploadListProps): JSX.Element | null;
+export declare function UploadList(props: UploadListProps): React.ReactElement | null;

package/upload/UploadList.js

@@ -1,62 +1,67 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useImmer } from '@laser-ui/hooks';
 import AttachFileOutlined from '@material-design-icons/svg/outlined/attach_file.svg?react';
-import { isNumber, isUndefined } from 'lodash';
-import { Children, cloneElement, useContext } from 'react';
+import { has, isNumber, isUndefined } from 'lodash';
+import { Fragment, use, useRef } from 'react';
 import { UploadAction } from './UploadAction';
-import { LIST_CLASSES, UploadContext } from './vars';
-import { useComponentProps, useNextTick, useStyled } from '../hooks';
+import { useNextTick } from './hooks';
+import { LIST_CLASSES, UploadActionContext, UploadContext } from './vars';
+import { CircularProgress } from '../circular-progress';
+import { useComponentProps, useStyled } from '../hooks';
 import { Icon } from '../icon';
-import { CircularProgress } from '../internal/circular-progress';
-import { CollapseTransition } from '../internal/transition';
 import { Progress } from '../progress';
+import { CollapseTransition } from '../transition';
 import { mergeCS } from '../utils';
 import { TTANSITION_DURING_BASE } from '../vars';
 export function UploadList(props) {
-    const _a = useComponentProps('UploadList', props), { styleOverrides, styleProvider, actions, defaultActions } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "actions", "defaultActions"]);
+    var _a, _b;
+    const _c = useComponentProps('UploadList', props), { styleOverrides, styleProvider, actions, defaultActions } = _c, restProps = __rest(_c, ["styleOverrides", "styleProvider", "actions", "defaultActions"]);
     const styled = useStyled(LIST_CLASSES, { 'upload-list': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['upload-list'] }, styleOverrides);
-    const { files, onRemove } = useContext(UploadContext);
+    const { files: currentFiles, onRemove } = use(UploadContext);
+    const files = useRef(currentFiles);
+    {
+        const newFiles = currentFiles.map((file) => Object.assign({}, file));
+        let index = -1;
+        for (const file of files.current) {
+            index += 1;
+            if (file.__removing) {
+                if (((_a = files.current[index - 1]) === null || _a === void 0 ? void 0 : _a.uid) === ((_b = newFiles[index - 1]) === null || _b === void 0 ? void 0 : _b.uid)) {
+                    newFiles.splice(index, 0, file);
+                }
+            }
+        }
+        files.current = newFiles;
+    }
     const nextTick = useNextTick();
-    const [removeUIDs, setRemoveUIDs] = useImmer([]);
     return (_jsx("ul", Object.assign({}, restProps, mergeCS(styled('upload-list'), {
         className: restProps.className,
         style: restProps.style,
-    }), { children: files.map((file, index) => (_jsx(CollapseTransition, { originalSize: {
-                height: 'auto',
-            }, collapsedSize: {
-                height: 0,
-            }, enter: !removeUIDs.includes(file.uid), during: TTANSITION_DURING_BASE, styles: {
-                entering: {
-                    transition: ['height', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
-                },
-                leaving: {
-                    transition: ['height', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
-                },
-                leaved: { display: 'none' },
-            }, skipFirstTransition: nextTick.current ? false : true, afterLeave: () => {
-                setRemoveUIDs((draft) => {
-                    draft.splice(draft.findIndex((uid) => uid === file.uid), 1);
-                });
-                onRemove(file);
-            }, children: (collapseRef, collapseStyle) => (_jsxs("li", Object.assign({}, mergeCS(styled('upload-list__item', {
-                [`upload-list__item--${file.state}`]: file.state,
-            }), {
-                style: collapseStyle,
-            }), { ref: collapseRef, children: [_jsx("div", Object.assign({}, styled('upload-list__icon'), { children: file.state === 'progress' ? (_jsx(Icon, { children: _jsx(CircularProgress, {}) })) : (_jsx(Icon, { rotate: 45, children: _jsx(AttachFileOutlined, {}) })) })), _jsx("a", Object.assign({}, styled('upload-list__link', {
-                        'upload-list__link.is-active': file.state === 'load' && !isUndefined(file.url),
-                    }), { href: file.url, target: "_blank", rel: "noreferrer", title: file.name, onClick: (e) => {
-                            if (defaultActions && defaultActions.preview) {
-                                e.preventDefault();
-                                defaultActions.preview(file);
-                            }
-                        }, children: file.name })), _jsx("div", Object.assign({}, styled('upload-list__actions'), { children: Children.map(actions ? actions(file, index) : [_jsx(UploadAction, { preset: "remove" })], (action) => cloneElement(action, {
-                            _file: file,
-                            _defaultActions: defaultActions,
-                            _onRemove: () => {
-                                setRemoveUIDs((draft) => {
-                                    draft.push(file.uid);
-                                });
-                            },
-                        })) })), _jsx("div", Object.assign({}, styled('upload-list__progress-wrapper'), { children: isNumber(file.percent) && _jsx(Progress, { percent: file.percent, label: false, lineWidth: 2 }) }))] }))) }, file.uid))) })));
+    }), { children: _jsx("div", Object.assign({}, styled('upload-list__row'), { children: files.current.map((file, index) => (_jsx(CollapseTransition, { height: 0, enter: !file.__removing, duration: TTANSITION_DURING_BASE, skipFirstTransition: nextTick.current ? false : true, onAfterLeave: () => {
+                    const index = files.current.findIndex((f) => f.uid === file.uid);
+                    if (index !== -1) {
+                        files.current.splice(index, 1);
+                    }
+                }, children: (transitionRef, leaved) => leaved ? null : (_jsx("div", { ref: (instance) => {
+                        transitionRef(instance);
+                        return () => {
+                            transitionRef(null);
+                        };
+                    }, children: _jsxs("li", Object.assign({}, styled('upload-list__item', { [`upload-list__item--${file.state}`]: file.state }), { children: [_jsx("div", Object.assign({}, styled('upload-list__icon'), { children: file.state === 'progress' ? (_jsx(Icon, { children: _jsx(CircularProgress, {}) })) : (_jsx(Icon, { rotate: 45, children: _jsx(AttachFileOutlined, {}) })) })), _jsx("a", Object.assign({}, styled('upload-list__link', {
+                                'upload-list__link.is-active': file.state === 'load' && !isUndefined(file.url),
+                            }), { href: file.url, target: "_blank", rel: "noreferrer", title: file.name, onClick: (e) => {
+                                    if (defaultActions && defaultActions.preview) {
+                                        e.preventDefault();
+                                        defaultActions.preview(file);
+                                    }
+                                }, children: file.name })), _jsx("div", Object.assign({}, styled('upload-list__actions'), { children: _jsx(UploadActionContext, { value: {
+                                        file,
+                                        defaultActions,
+                                        onRemove: () => {
+                                            file.__removing = true;
+                                            onRemove(file);
+                                        },
+                                    }, children: (actions ? actions(file, index) : [_jsx(UploadAction, { preset: "remove" })]).map((node, index) => {
+                                        const { id, action } = (has(node, ['id', 'action']) ? node : { id: index, action: node });
+                                        return _jsx(Fragment, { children: action }, id);
+                                    }) }) })), _jsx("div", Object.assign({}, styled('upload-list__progress-wrapper'), { children: isNumber(file.percent) && _jsx(Progress, { percent: file.percent, label: false, lineWidth: 2 }) }))] })) })) }, file.uid))) })) })));
 }

package/upload/UploadPicture.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { UploadPictureProps } from './types';
-export declare function UploadPicture(props: UploadPictureProps): JSX.Element | null;
+export declare function UploadPicture(props: UploadPictureProps): React.ReactElement | null;

package/upload/UploadPicture.js

@@ -1,72 +1,66 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useImmer } from '@laser-ui/hooks';
 import InsertDriveFileTwoTone from '@material-design-icons/svg/two-tone/insert_drive_file.svg?react';
-import { isNumber } from 'lodash';
-import { Children, cloneElement, useContext } from 'react';
+import { has, isNumber } from 'lodash';
+import { Fragment, use, useRef } from 'react';
 import { UploadAction } from './UploadAction';
 import { UploadPreviewAction } from './UploadPreviewAction';
-import { PICTURE_CLASSES, UploadContext } from './vars';
-import { useComponentProps, useNextTick, useStyled, useTranslation } from '../hooks';
+import { useNextTick } from './hooks';
+import { PICTURE_CLASSES, UploadActionContext, UploadContext } from './vars';
+import { useComponentProps, useNamespace, useStyled, useTranslation } from '../hooks';
 import { Icon } from '../icon';
-import { Transition } from '../internal/transition';
 import { Progress } from '../progress';
+import { Transition } from '../transition';
 import { mergeCS } from '../utils';
 import { TTANSITION_DURING_BASE } from '../vars';
 export function UploadPicture(props) {
-    const _a = useComponentProps('UploadPicture', props), { children, styleOverrides, styleProvider, actions, defaultActions } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "actions", "defaultActions"]);
+    var _a, _b;
+    const _c = useComponentProps('UploadPicture', props), { children, styleOverrides, styleProvider, actions, defaultActions } = _c, restProps = __rest(_c, ["children", "styleOverrides", "styleProvider", "actions", "defaultActions"]);
+    const namespace = useNamespace();
     const styled = useStyled(PICTURE_CLASSES, { 'upload-picture': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['upload-picture'] }, styleOverrides);
     const { t } = useTranslation();
-    const { files, onRemove } = useContext(UploadContext);
+    const { files: currentFiles, onRemove } = use(UploadContext);
+    const files = useRef(currentFiles);
+    {
+        const newFiles = currentFiles.map((file) => Object.assign({}, file));
+        let index = -1;
+        for (const file of files.current) {
+            index += 1;
+            if (file.__removing) {
+                if (((_a = files.current[index - 1]) === null || _a === void 0 ? void 0 : _a.uid) === ((_b = newFiles[index - 1]) === null || _b === void 0 ? void 0 : _b.uid)) {
+                    newFiles.splice(index, 0, file);
+                }
+            }
+        }
+        files.current = newFiles;
+    }
     const nextTick = useNextTick();
-    const [removeUIDs, setRemoveUIDs] = useImmer([]);
     return (_jsx("ul", Object.assign({}, restProps, mergeCS(styled('upload-picture'), {
         className: restProps.className,
         style: restProps.style,
-    }), { children: _jsxs("div", Object.assign({}, styled('upload-picture__row'), { children: [files.map((file, index) => (_jsx(Transition, { enter: !removeUIDs.includes(file.uid), during: TTANSITION_DURING_BASE, skipFirstTransition: nextTick.current ? false : true, afterLeave: () => {
-                        setRemoveUIDs((draft) => {
-                            draft.splice(draft.findIndex((uid) => uid === file.uid), 1);
-                        });
-                        onRemove(file);
-                    }, children: (state) => {
-                        let transitionStyle = {};
-                        switch (state) {
-                            case 'enter':
-                                transitionStyle = { transform: 'scale(0)' };
-                                break;
-                            case 'entering':
-                                transitionStyle = {
-                                    transition: ['transform'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
-                                    transformOrigin: 'top left',
-                                };
-                                break;
-                            case 'leaving':
-                                transitionStyle = {
-                                    transform: 'scale(0)',
-                                    transition: ['transform'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
-                                    transformOrigin: 'top left',
-                                };
-                                break;
-                            case 'leaved':
-                                transitionStyle = { display: 'none' };
-                                break;
-                            default:
-                                break;
+    }), { children: _jsxs("div", Object.assign({}, styled('upload-picture__row'), { children: [files.current.map((file, index) => (_jsx(Transition, { enter: !file.__removing, name: `${namespace}-upload-picture`, duration: TTANSITION_DURING_BASE, skipFirstTransition: nextTick.current ? false : true, onAfterLeave: () => {
+                        const index = files.current.findIndex((f) => f.uid === file.uid);
+                        if (index !== -1) {
+                            files.current.splice(index, 1);
                         }
-                        return (_jsx("div", { children: _jsx("li", Object.assign({}, mergeCS(styled('upload-picture__item', {
-                                [`upload-picture__item--${file.state}`]: file.state,
-                                'upload-picture__item.is-disabled': file && file.state === 'progress',
-                            }), {
-                                style: transitionStyle,
-                            }), { children: file.state !== 'progress' ? (_jsxs(_Fragment, { children: [file.thumbUrl ? (_jsx("img", Object.assign({}, styled('upload-picture__thumbnail'), { src: file.thumbUrl, alt: file.name }))) : (_jsxs(_Fragment, { children: [_jsx(Icon, { size: 28, theme: file.state === 'error' ? 'danger' : 'primary', children: _jsx(InsertDriveFileTwoTone, {}) }), _jsx("div", Object.assign({}, styled('upload-picture__name'), { children: file.name }))] })), _jsx("div", Object.assign({}, styled('upload-picture__actions'), { children: Children.map(actions ? actions(file, index) : [_jsx(UploadPreviewAction, {}), _jsx(UploadAction, { preset: "remove" })], (action) => cloneElement(action, {
-                                                _file: file,
-                                                _defaultActions: defaultActions,
-                                                _light: true,
-                                                _onRemove: () => {
-                                                    setRemoveUIDs((draft) => {
-                                                        draft.push(file.uid);
-                                                    });
+                    }, children: (transitionRef, leaved) => leaved ? null : (_jsx("div", { ref: (instance) => {
+                            transitionRef(instance);
+                            return () => {
+                                transitionRef(null);
+                            };
+                        }, children: _jsx("li", Object.assign({}, styled('upload-picture__item', {
+                            [`upload-picture__item--${file.state}`]: file.state,
+                            'upload-picture__item.is-disabled': file && file.state === 'progress',
+                        }), { children: file.state !== 'progress' ? (_jsxs(_Fragment, { children: [file.thumbUrl ? (_jsx("img", Object.assign({}, styled('upload-picture__thumbnail'), { src: file.thumbUrl, alt: file.name }))) : (_jsxs(_Fragment, { children: [_jsx(Icon, { size: 28, theme: file.state === 'error' ? 'danger' : 'primary', children: _jsx(InsertDriveFileTwoTone, {}) }), _jsx("div", Object.assign({}, styled('upload-picture__name'), { children: file.name }))] })), _jsx("div", Object.assign({}, styled('upload-picture__actions'), { children: _jsx(UploadActionContext, { value: {
+                                                file,
+                                                defaultActions,
+                                                light: true,
+                                                onRemove: () => {
+                                                    file.__removing = true;
+                                                    onRemove(file);
                                                 },
-                                            })) }))] })) : (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({}, styled('upload-picture__progress-text'), { children: t('Upload', 'Uploading') })), isNumber(file.percent) && (_jsx(Progress, { style: { width: '100%' }, percent: file.percent, label: false, lineWidth: 2 }))] })) })) }));
-                    } }, file.uid))), _jsx("div", { children: children })] })) })));
+                                            }, children: (actions ? actions(file, index) : [_jsx(UploadPreviewAction, {}), _jsx(UploadAction, { preset: "remove" })]).map((node, index) => {
+                                                const { id, action } = (has(node, ['id', 'action']) ? node : { id: index, action: node });
+                                                return _jsx(Fragment, { children: action }, id);
+                                            }) }) }))] })) : (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({}, styled('upload-picture__progress-text'), { children: t('Upload', 'Uploading') })), isNumber(file.percent) && (_jsx(Progress, { style: { width: '100%' }, percent: file.percent, label: false, lineWidth: 2 }))] })) })) })) }, file.uid))), _jsx("div", { children: children })] })) })));
 }

package/upload/UploadPictureList.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { UploadPictureListProps } from './types';
-export declare function UploadPictureList(props: UploadPictureListProps): JSX.Element | null;
+export declare function UploadPictureList(props: UploadPictureListProps): React.ReactElement | null;