@ifhover/leaf-ui 0.5.0 → 0.6.0

package/dist/cjs/browser/modules/filelist/filelist.cjs

@@ -1,5 +1,6 @@
 "use client";
 "use strict";
+require('../../../styles/foundation.css');
 require('../../../styles/components/filelist.css');
 var __webpack_require__ = {};
 (()=>{
@@ -30,16 +31,19 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    FileList: ()=>FileList
+    FileList: ()=>FileList,
+    FileListControl: ()=>FileListControl
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
-const index_cjs_namespaceObject = require("../button/index.cjs");
-const external_image_index_cjs_namespaceObject = require("../image/index.cjs");
-const external_modal_index_cjs_namespaceObject = require("../modal/index.cjs");
+const button_cjs_namespaceObject = require("../button/button.cjs");
+const component_defaults_cjs_namespaceObject = require("../config-provider/component-defaults.cjs");
+const image_cjs_namespaceObject = require("../image/image.cjs");
+const modal_cjs_namespaceObject = require("../modal/modal.cjs");
 const classes_cjs_namespaceObject = require("../shared/classes.cjs");
 const motion_cjs_namespaceObject = require("../shared/motion.cjs");
+const use_formatted_text_cjs_namespaceObject = require("../shared/use-formatted-text.cjs");
 const use_text_cjs_namespaceObject = require("../shared/use-text.cjs");
 const external_model_cjs_namespaceObject = require("./model.cjs");
 const icons = {
@@ -52,15 +56,251 @@ const icons = {
     code: external_lucide_react_namespaceObject.FileCode2,
     file: external_lucide_react_namespaceObject.File
 };
-const itemKey = (file, index)=>file.uid ?? `${file.url ?? (0, external_model_cjs_namespaceObject.fileName)(file)}-${index}`;
-function FileList({ items, downloadable = true, previewable = true, removable = false, onPreview, onDownload, onRemove, renderActions, emptyContent, disabled = false, listType = 'text', className, ...props }) {
+function FileVisual({ file, listType }) {
+    const kind = (0, external_model_cjs_namespaceObject.fileKind)(file);
+    const Icon = icons[kind];
+    const url = (0, external_model_cjs_namespaceObject.safeFileUrl)(file.url);
+    const [failedUrl, setFailedUrl] = (0, external_react_namespaceObject.useState)();
+    const thumbnail = Boolean('text' !== listType && 'image' === kind && url && failedUrl !== url);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+        className: "leaf-file-list__icon",
+        "data-kind": kind,
+        "data-extension": (0, external_model_cjs_namespaceObject.fileExtension)(file),
+        "data-thumbnail": thumbnail || void 0,
+        "aria-hidden": "true",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
+                size: 22
+            }),
+            thumbnail && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
+                src: url,
+                alt: "",
+                loading: "lazy",
+                decoding: "async",
+                onError: ()=>setFailedUrl(url)
+            })
+        ]
+    });
+}
+function FileRow({ file, motionKey, disabled, listType, downloadable, previewable, removable, onDownload, onRemove, onPreview, renderActions }) {
+    const t = (0, use_text_cjs_namespaceObject.useText)();
+    const format = (0, use_formatted_text_cjs_namespaceObject.useFormattedText)();
+    const [removing, setRemoving] = (0, external_react_namespaceObject.useState)(false);
+    const [removeError, setRemoveError] = (0, external_react_namespaceObject.useState)('');
+    const pending = (0, external_react_namespaceObject.useRef)(false);
+    const mounted = (0, external_react_namespaceObject.useRef)(true);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        mounted.current = true;
+        return ()=>{
+            mounted.current = false;
+        };
+    }, []);
+    const name = (0, external_model_cjs_namespaceObject.fileName)(file);
+    const kind = (0, external_model_cjs_namespaceObject.fileKind)(file);
+    const url = (0, external_model_cjs_namespaceObject.safeFileUrl)(file.url);
+    const extension = (0, external_model_cjs_namespaceObject.fileExtension)(file).toUpperCase();
+    const size = file.size ?? file.originFile?.size;
+    const formattedSize = void 0 === size ? '' : (0, external_model_cjs_namespaceObject.formatFileSize)(size);
+    const percent = Number.isFinite(file.percent) ? Math.max(0, Math.min(100, file.percent ?? 0)) : 0;
+    const canPreview = previewable && url && [
+        'image',
+        'video',
+        'audio'
+    ].includes(kind);
+    const status = 'uploading' === file.status ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            t('fileList.uploading'),
+            " ",
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                children: [
+                    Math.round(percent),
+                    "%"
+                ]
+            })
+        ]
+    }) : 'done' === file.status ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Check, {
+                size: 13,
+                "aria-hidden": "true"
+            }),
+            t('fileList.uploadComplete')
+        ]
+    }) : 'error' === file.status ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CircleAlert, {
+                size: 13,
+                "aria-hidden": "true"
+            }),
+            t('fileList.uploadFailed')
+        ]
+    }) : 'cancelled' === file.status ? t('fileList.cancelled') : 'ready' === file.status ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Clock3, {
+                size: 13,
+                "aria-hidden": "true"
+            }),
+            t('fileList.ready')
+        ]
+    }) : null;
+    const actions = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            canPreview && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.ButtonControl, {
+                className: "leaf-file-list__action",
+                variant: "ghost",
+                size: "sm",
+                disabled: disabled,
+                startIcon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Eye, {
+                    size: 16
+                }),
+                "aria-label": format('fileList.preview', {
+                    name
+                }),
+                title: t('common.preview'),
+                onClick: ()=>onPreview(file)
+            }),
+            downloadable && url && (onDownload ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.ButtonControl, {
+                className: "leaf-file-list__action",
+                variant: "ghost",
+                size: "sm",
+                disabled: disabled,
+                startIcon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Download, {
+                    size: 16
+                }),
+                "aria-label": format('fileList.download', {
+                    name
+                }),
+                title: t('common.download'),
+                onClick: ()=>onDownload(file)
+            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("a", {
+                className: "leaf-file-list__action",
+                href: disabled ? void 0 : url,
+                download: name,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": format('fileList.download', {
+                    name
+                }),
+                title: t('common.download'),
+                "aria-disabled": disabled || void 0,
+                role: disabled ? 'link' : void 0,
+                tabIndex: disabled ? -1 : void 0,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Download, {
+                    size: 16,
+                    "aria-hidden": "true"
+                })
+            })),
+            removable && onRemove && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(button_cjs_namespaceObject.ButtonControl, {
+                className: "leaf-file-list__action leaf-file-list__remove",
+                variant: "ghost",
+                size: "sm",
+                disabled: disabled,
+                loading: removing,
+                startIcon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Trash2, {
+                    size: 16
+                }),
+                "aria-label": format('fileList.remove', {
+                    name
+                }),
+                title: t('common.remove'),
+                onClick: async ()=>{
+                    if (pending.current) return;
+                    pending.current = true;
+                    setRemoving(true);
+                    setRemoveError('');
+                    try {
+                        await onRemove(file);
+                    } catch (reason) {
+                        if (mounted.current) setRemoveError(reason instanceof Error ? reason.message : String(reason));
+                    } finally{
+                        pending.current = false;
+                        if (mounted.current) setRemoving(false);
+                    }
+                }
+            })
+        ]
+    });
+    const renderedActions = renderActions ? renderActions(file, actions) : actions;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("li", {
+        className: "leaf-file-list__item",
+        "data-status": file.status,
+        "data-motion-key": motionKey,
+        "aria-busy": 'uploading' === file.status || removing || void 0,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FileVisual, {
+                file: file,
+                listType: listType
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "leaf-file-list__details",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: "leaf-file-list__name",
+                        title: name,
+                        children: name
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "leaf-file-list__meta",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                className: "leaf-file-list__type",
+                                children: extension || t('fileList.fileType')
+                            }),
+                            formattedSize && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                className: "leaf-file-list__size",
+                                children: formattedSize
+                            })
+                        ]
+                    })
+                ]
+            }),
+            status && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "leaf-file-list__status",
+                "data-status": file.status,
+                children: status
+            }),
+            'uploading' === file.status && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "leaf-file-list__progress",
+                role: "progressbar",
+                "aria-label": format('fileList.uploadProgress', {
+                    name
+                }),
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-valuenow": Math.round(percent),
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    style: {
+                        width: `${percent}%`
+                    }
+                })
+            }),
+            (removeError || 'error' === file.status && file.error) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                className: "leaf-file-list__error",
+                role: removeError ? 'alert' : void 0,
+                children: removeError || file.error
+            }),
+            null !== renderedActions && false !== renderedActions && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "leaf-file-list__actions",
+                children: renderedActions
+            })
+        ]
+    });
+}
+function FileListControl({ items, downloadable = true, previewable = true, removable = false, onPreview, onDownload, onRemove, renderActions, emptyContent, disabled = false, listType = 'text', className, ...props }) {
     const t = (0, use_text_cjs_namespaceObject.useText)();
     const root = (0, external_react_namespaceObject.useRef)(null);
-    const keys = items.map(itemKey);
-    (0, motion_cjs_namespaceObject.useListMotion)(root, JSON.stringify(keys), '.leaf-file-list__item[data-motion-key]');
+    const occurrences = new Map();
+    const keys = items.map((file)=>{
+        const identity = file.uid ?? file.url ?? (0, external_model_cjs_namespaceObject.fileName)(file);
+        const occurrence = occurrences.get(identity) ?? 0;
+        occurrences.set(identity, occurrence + 1);
+        return JSON.stringify([
+            identity,
+            occurrence
+        ]);
+    });
+    (0, motion_cjs_namespaceObject.useListMotion)(root, JSON.stringify(keys), '.leaf-file-list__item[data-motion-key]', listType);
     const [preview, setPreview] = (0, external_react_namespaceObject.useState)(null);
-    const [pending, setPending] = (0, external_react_namespaceObject.useState)([]);
-    const [error, setError] = (0, external_react_namespaceObject.useState)('');
     const selected = preview ? items.find((file)=>preview.uid ? file.uid === preview.uid : preview.url ? file.url === preview.url : file === preview) : void 0;
     const images = items.filter((file)=>'image' === (0, external_model_cjs_namespaceObject.fileKind)(file) && (0, external_model_cjs_namespaceObject.safeFileUrl)(file.url));
     const kind = selected ? (0, external_model_cjs_namespaceObject.fileKind)(selected) : void 0;
@@ -74,188 +314,36 @@ function FileList({ items, downloadable = true, previewable = true, removable =
         children: [
             items.length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("ul", {
                 className: "leaf-file-list__items",
-                children: items.map((file, index)=>{
-                    const key = itemKey(file, index);
-                    const name = (0, external_model_cjs_namespaceObject.fileName)(file);
-                    const kind = (0, external_model_cjs_namespaceObject.fileKind)(file);
-                    const Icon = icons[kind];
-                    const url = (0, external_model_cjs_namespaceObject.safeFileUrl)(file.url);
-                    const size = file.size ?? file.originFile?.size;
-                    const isPending = pending.includes(key);
-                    const canPreview = previewable && url && [
-                        'image',
-                        'video',
-                        'audio'
-                    ].includes(kind);
-                    const actions = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
-                        children: [
-                            canPreview && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Button, {
-                                variant: "ghost",
-                                size: "sm",
-                                disabled: disabled,
-                                startIcon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Eye, {
-                                    size: 16
-                                }),
-                                "aria-label": `${t('预览', 'Preview')} ${name}`,
-                                title: t('预览', 'Preview'),
-                                onClick: ()=>onPreview ? onPreview(file) : setPreview(file)
-                            }),
-                            downloadable && url && (onDownload ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Button, {
-                                variant: "ghost",
-                                size: "sm",
-                                disabled: disabled,
-                                startIcon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Download, {
-                                    size: 16
-                                }),
-                                "aria-label": `${t('下载', 'Download')} ${name}`,
-                                title: t('下载', 'Download'),
-                                onClick: ()=>onDownload(file)
-                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("a", {
-                                className: "leaf-file-list__action",
-                                href: disabled ? void 0 : url,
-                                download: name,
-                                target: "_blank",
-                                rel: "noopener noreferrer",
-                                "aria-label": `${t('下载', 'Download')} ${name}`,
-                                title: t('下载', 'Download'),
-                                "aria-disabled": disabled || void 0,
-                                tabIndex: disabled ? -1 : void 0,
-                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Download, {
-                                    size: 16,
-                                    "aria-hidden": "true"
-                                })
-                            })),
-                            removable && onRemove && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Button, {
-                                className: "leaf-file-list__remove",
-                                variant: "ghost",
-                                size: "sm",
-                                disabled: disabled || isPending,
-                                loading: isPending,
-                                startIcon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Trash2, {
-                                    size: 15
-                                }),
-                                "aria-label": `${t('移除', 'Remove')} ${name}`,
-                                title: t('移除', 'Remove'),
-                                onClick: async ()=>{
-                                    if (isPending) return;
-                                    setPending((previous)=>[
-                                            ...previous,
-                                            key
-                                        ]);
-                                    setError('');
-                                    try {
-                                        await onRemove(file);
-                                    } catch (reason) {
-                                        setError(reason instanceof Error ? reason.message : String(reason));
-                                    } finally{
-                                        setPending((previous)=>previous.filter((value)=>value !== key));
-                                    }
-                                }
-                            })
-                        ]
-                    });
-                    const percent = Math.max(0, Math.min(100, file.percent ?? 0));
-                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("li", {
-                        className: "leaf-file-list__item",
-                        "data-status": file.status,
-                        "data-motion-key": key,
-                        children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                className: "leaf-file-list__icon",
-                                "data-kind": kind,
-                                "data-extension": (0, external_model_cjs_namespaceObject.fileExtension)(file),
-                                children: 'text' !== listType && 'image' === kind && url ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
-                                    src: url,
-                                    alt: "",
-                                    loading: "lazy"
-                                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
-                                    size: 21,
-                                    "aria-hidden": "true"
-                                })
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                className: "leaf-file-list__details",
-                                children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                        className: "leaf-file-list__name",
-                                        title: name,
-                                        children: name
-                                    }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
-                                        className: "leaf-file-list__meta",
-                                        children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                className: "leaf-file-list__type",
-                                                children: (0, external_model_cjs_namespaceObject.fileExtension)(file).toUpperCase() || t('文件', 'FILE')
-                                            }),
-                                            void 0 !== size && (0, external_model_cjs_namespaceObject.formatFileSize)(size) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                children: (0, external_model_cjs_namespaceObject.formatFileSize)(size)
-                                            }),
-                                            'uploading' === file.status && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
-                                                children: [
-                                                    t('上传中', 'Uploading'),
-                                                    " ",
-                                                    Math.round(percent),
-                                                    "%"
-                                                ]
-                                            }),
-                                            'error' === file.status && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                className: "leaf-file-list__error",
-                                                children: file.error ?? t('上传失败', 'Upload failed')
-                                            }),
-                                            'cancelled' === file.status && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                children: t('已取消', 'Cancelled')
-                                            }),
-                                            'done' === file.status && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
-                                                className: "leaf-file-list__complete",
-                                                children: [
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Check, {
-                                                        size: 12,
-                                                        "aria-hidden": "true"
-                                                    }),
-                                                    " ",
-                                                    t('上传完成', 'Upload complete')
-                                                ]
-                                            }),
-                                            'ready' === file.status && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                children: t('待上传', 'Ready')
-                                            })
-                                        ]
-                                    }),
-                                    'uploading' === file.status && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                        className: "leaf-file-list__progress",
-                                        role: "progressbar",
-                                        "aria-label": `${t('上传进度', 'Upload progress')} ${name}`,
-                                        "aria-valuemin": 0,
-                                        "aria-valuemax": 100,
-                                        "aria-valuenow": Math.round(percent),
-                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                            style: {
-                                                width: `${percent}%`
-                                            }
-                                        })
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                className: "leaf-file-list__actions",
-                                children: renderActions ? renderActions(file, actions) : actions
-                            })
-                        ]
-                    }, key);
-                })
+                children: items.map((file, position)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FileRow, {
+                        motionKey: keys[position] ?? String(position),
+                        file: file,
+                        listType: listType,
+                        disabled: disabled,
+                        downloadable: downloadable,
+                        previewable: previewable,
+                        removable: removable,
+                        onDownload: onDownload,
+                        onRemove: onRemove,
+                        renderActions: renderActions,
+                        onPreview: (file)=>onPreview ? onPreview(file) : setPreview(file)
+                    }, keys[position]))
             }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "leaf-file-list__empty",
-                children: emptyContent ?? t('暂无文件', 'No files')
-            }),
-            error && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                role: "alert",
-                className: "leaf-file-list__error",
-                children: error
+                children: emptyContent ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Paperclip, {
+                            size: 22,
+                            "aria-hidden": "true"
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            children: t('fileList.noFiles')
+                        })
+                    ]
+                })
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_image_index_cjs_namespaceObject.ImagePreview, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(image_cjs_namespaceObject.ImagePreviewControl, {
                 items: images.map((file)=>({
-                        src: file.url ?? '',
+                        src: (0, external_model_cjs_namespaceObject.safeFileUrl)(file.url) ?? '',
                         alt: (0, external_model_cjs_namespaceObject.fileName)(file),
                         downloadName: (0, external_model_cjs_namespaceObject.fileName)(file)
                     })),
@@ -263,13 +351,13 @@ function FileList({ items, downloadable = true, previewable = true, removable =
                 index: Math.max(0, index),
                 onIndexChange: (next)=>setPreview(images[next] ?? null),
                 onClose: ()=>setPreview(null),
-                downloadable: downloadable
+                downloadable: downloadable && !disabled
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_modal_index_cjs_namespaceObject.Modal, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(modal_cjs_namespaceObject.ModalBase, {
                 open: Boolean(previewUrl && ('video' === kind || 'audio' === kind)),
                 title: selected ? (0, external_model_cjs_namespaceObject.fileName)(selected) : '',
                 footer: null,
-                width: 800,
+                width: 'audio' === kind ? 520 : 800,
                 onClose: ()=>setPreview(null),
                 className: "leaf-file-list__media-modal",
                 children: [
@@ -296,9 +384,17 @@ function FileList({ items, downloadable = true, previewable = true, removable =
         ]
     });
 }
+function FileList(rawProps) {
+    const props = (0, component_defaults_cjs_namespaceObject.useComponentProps)('FileList', rawProps);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FileListControl, {
+        ...props
+    });
+}
 exports.FileList = __webpack_exports__.FileList;
+exports.FileListControl = __webpack_exports__.FileListControl;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "FileList"
+    "FileList",
+    "FileListControl"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true