@zjlab-fe/data-hub-ui 0.29.0 → 0.31.0

package/README.md

@@ -12,7 +12,7 @@ https://haina-datahub.zero2x.org/data-hub-ui/doc
 
 ### 新建组件
 
-在`src/components`目录下新建组件目录，参考组件`input-tag`的代码目录
+使用`npm run init`创建组件，输入组件名后，脚本会在`src/components`目录下新建组件目录，参考组件`input-tag`的代码目录
 
 ```
 component-folder

package/dist/types/components/file-uploader/components/icons.d.ts

@@ -3,3 +3,4 @@ export declare function FileIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function CloseIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function PauseIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function ResumeIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function RetryIcon(): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/file-uploader/components/uploader-file-item.d.ts

@@ -22,6 +22,8 @@ export interface UploaderFileItemClassNames {
     pauseBtn?: string;
     /** Resume button */
     resumeBtn?: string;
+    /** Retry button */
+    retryBtn?: string;
     /** Close/Cancel button */
     closeBtn?: string;
 }
@@ -39,6 +41,8 @@ interface FileItemProps {
     onPause?: (id: string) => void;
     /** Resume function passed from parent that has upload handlers */
     onResume?: (id: string) => void;
+    /** Retry function passed from parent that has upload handlers */
+    onRetry?: (id: string) => void;
 }
 export declare function UploaderFileItem(props: FileItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/file-uploader/components/uploader-progress-bar.d.ts

@@ -0,0 +1,9 @@
+import './uploader-progress-bar.css';
+interface UploaderProgressBarProps {
+    /** Hide when only 0 or 1 files */
+    hideWhenSingle?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+export declare function UploaderProgressBar({ hideWhenSingle, className }: UploaderProgressBarProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/types/components/file-uploader/components/uploader.d.ts

@@ -32,6 +32,8 @@ interface UploaderProps {
     onDropZoneError?: (error: DropZoneError) => void;
     /** custom file validation callback */
     fileValidation?: (file: File) => boolean | Promise<boolean>;
+    /** Whether to show the multi-file progress bar at the top. Default: true */
+    showProgressBar?: boolean;
 }
 /**
  * Styled File Uploader - Matches FileUploader capabilities with custom styling

package/dist/types/components/file-uploader/context/use-upload-engine.d.ts

@@ -19,4 +19,9 @@ export declare function useUploadEngine(): {
     resumeUpload: (fileId: string) => Promise<void>;
     /** Cancel a file upload */
     cancelUpload: (fileId: string) => Promise<void>;
+    /** Retry a failed upload (smart retry with full retry fallback) */
+    retryUpload: (fileId: string, forceFullRetry?: boolean) => Promise<{
+        success: boolean;
+        retryType: "smart" | "full";
+    }>;
 };

package/dist/types/components/file-uploader/demo/index.d.ts

@@ -1,2 +1,3 @@
+import './index.css';
 declare function App(): import("react/jsx-runtime").JSX.Element;
 export default App;

package/dist/types/components/file-uploader/demo/mockApi.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Demo mock for file-uploader retry scenarios.
+ * Keep fail strategies out of component business handlers.
+ *
+ * Chunk PUTs are intercepted locally (no external httpbin dependency).
+ * httpbin.org currently returns 503 in many networks, which made every chunk fail.
+ */
+export type FailMode = 'none' | 'urlFail' | 'partialChunkFail';
+export type DemoEventLog = {
+    time: string;
+    message: string;
+};
+/** Local mock URLs intercepted by installDemoUploadMock() */
+declare const MOCK_UPLOAD_URL = "https://upload.mock.local/ok";
+declare const MOCK_BAD_UPLOAD_URL = "https://upload.mock.local/fail";
+/**
+ * Intercept XMLHttpRequest for demo mock upload URLs.
+ * The real uploader uses axios PUT; this keeps the demo offline-capable and stable.
+ */
+export declare function installDemoUploadMock(): () => void;
+export declare function bumpAttemptCount(fileName: string): number;
+export declare function resetAttemptCounts(): void;
+export declare function createDemoUploadUrls(fileName: string, partCount: number, failMode: FailMode): {
+    success: false;
+    reason: string;
+} | {
+    success: true;
+    uploadInfo: {
+        uploadId: string;
+        uploadUrls: {
+            partNum: number;
+            uploadUrl: string;
+        }[];
+    };
+};
+export declare function formatDemoEvent(message: string): DemoEventLog;
+export { MOCK_UPLOAD_URL, MOCK_BAD_UPLOAD_URL };

package/dist/types/components/file-uploader/hooks/use-upload.d.ts

@@ -58,6 +58,10 @@ export declare function useUpload(): {
     pause: (id: string) => void;
     resume: (id: string) => Promise<void>;
     cancel: (id: string) => Promise<void>;
+    retry: (id: string) => Promise<{
+        success: boolean;
+        retryType: "smart" | "full";
+    }>;
     /** Get a specific file by ID */
     getFileById: (id: string) => UploadFile | undefined;
     /** Files waiting to be uploaded */

package/dist/types/components/file-uploader/index.d.ts

@@ -3,6 +3,7 @@ export { Uploader as FileUploader } from './components/uploader';
 export { UploaderDropZone } from './components/uploader-drop-zone';
 export { UploaderFileListLayout } from './components/uploader-file-list';
 export { UploaderFileItem } from './components/uploader-file-item';
+export { UploaderProgressBar } from './components/uploader-progress-bar';
 export { useUpload } from './hooks/use-upload';
 export type { UploadFile, ChunkState, UploadHandlers, HandlerContext, CallbackResult, GetUploadUrlsResult, UploadUrl, UploadConfig, AddFilesOptions, } from './types';
 export type { DropZoneError, UploaderDropZoneClassNames, UploaderDropZoneProps, } from './components/uploader-drop-zone';

package/dist/types/components/file-uploader/types.d.ts

@@ -75,6 +75,11 @@ export interface HandlerContext {
     resume: (id: string) => Promise<void>;
     /** Cancel a file upload (always fresh) */
     cancel: (id: string) => void;
+    /** Retry a failed upload (always fresh) */
+    retry: (id: string) => Promise<{
+        success: boolean;
+        retryType: 'smart' | 'full';
+    }>;
     /** Get a specific file by ID (always fresh) */
     getFileById: (id: string) => UploadFile | undefined;
 }

package/dist/types/components/limit-credit-modal/demo/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Demo: React.FC;
+export default Demo;

package/dist/types/components/limit-credit-modal/index.d.ts

@@ -0,0 +1,9 @@
+export interface LimitCreditModalProps {
+    open?: boolean;
+    onCancel?: () => void;
+}
+declare const LimitCreditModal: {
+    (props: LimitCreditModalProps): import("react/jsx-runtime").JSX.Element;
+    open(): void;
+};
+export default LimitCreditModal;

package/dist/types/index.d.ts

@@ -41,6 +41,8 @@ export type { CorpusCardProps, ProcessTemplateListItem, ProcessTemplateLabel, La
 export { default as SDKModal } from './components/SDK-modal';
 export { default as TagView } from './components/tag-view';
 export { default as TagGroupFilter } from './components/tag-group-filter';
+export { default as LimitCreditModal } from './components/limit-credit-modal';
+export type { LimitCreditModalProps } from './components/limit-credit-modal';
 export { default as DatasetBatchAction } from './components/dataset-batch-action';
 export type { IConfirmParam, IFieldOption, IDatasetBatchActionParams, } from './components/dataset-batch-action';
 export { EDatasetBatchType } from './components/dataset-batch-action';

package/es/components/file-uploader/components/icons.js

@@ -7,13 +7,16 @@ function FileIcon() {
     return (jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }));
 }
 function CloseIcon() {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }));
+    return (jsx("svg", { width: "20", height: "20", viewBox: "5 5 14 14", fill: "currentColor", children: jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }));
 }
 function PauseIcon() {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }));
+    return (jsx("svg", { width: "20", height: "20", viewBox: "6 5 12 14", fill: "currentColor", children: jsx("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }) }));
 }
 function ResumeIcon() {
-    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M8 5v14l11-7z" }) }));
+    return (jsx("svg", { width: "20", height: "20", viewBox: "8 5 11 14", fill: "currentColor", children: jsx("path", { d: "M8 5v14l11-7z" }) }));
+}
+function RetryIcon() {
+    return (jsx("svg", { width: "20", height: "20", viewBox: "4 4 16 16", fill: "currentColor", children: jsx("path", { d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" }) }));
 }
 
-export { CloseIcon, FileIcon, PauseIcon, ResumeIcon, UploadIcon as default };
+export { CloseIcon, FileIcon, PauseIcon, ResumeIcon, RetryIcon, UploadIcon as default };

package/es/components/file-uploader/components/uploader-file-item.css.js

@@ -158,6 +158,15 @@ function useStyle() {
   border-radius: 0.375rem; /* 6px */
 }
 
+/* Keep icon box same size as CircleProgress (20x20), not stretching to button */
+
+.upload-action-btn svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+  flex-shrink: 0;
+}
+
 .upload-action-btn:hover {
   background: var(--uploader-action-hover-bg);
   color: var(--uploader-action-hover-text);
@@ -183,6 +192,19 @@ function useStyle() {
   color: var(--uploader-action-close-hover-text);
   background: var(--uploader-action-close-hover-bg);
 }
+
+.upload-retry-btn {
+  opacity: 0.5;
+}
+
+.upload-file-item:hover .upload-retry-btn {
+  opacity: 1;
+}
+
+.upload-retry-btn:hover {
+  color: var(--uploader-action-close-hover-text);
+  background: var(--uploader-action-close-hover-bg);
+}
 `;
   document.head.appendChild(style);
 }

package/es/components/file-uploader/components/uploader-file-item.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { UploadStatus } from '../constants.js';
 import { CircleProgress } from './circle-progress.js';
-import { FileIcon, PauseIcon, ResumeIcon, CloseIcon } from './icons.js';
+import { FileIcon, PauseIcon, ResumeIcon, RetryIcon, CloseIcon } from './icons.js';
 import { UploadingStatus } from './uploading-status.js';
 import useStyle from './theme.css.js';
 import useStyle$1 from './uploader-file-item.css.js';
@@ -9,7 +9,7 @@ import useStyle$1 from './uploader-file-item.css.js';
 useStyle();
 useStyle$1();
 function UploaderFileItem(props) {
-    const { file, classNames, onCancel, onRemove, onPause, onResume } = props;
+    const { file, classNames, onCancel, onRemove, onPause, onResume, onRetry } = props;
     const semanticClassNames = typeof classNames === 'function' ? classNames(props) : classNames;
     const isFailed = file.status === UploadStatus.FAILED;
     const isSuccess = file.status === UploadStatus.SUCCESS;
@@ -17,6 +17,7 @@ function UploaderFileItem(props) {
     const isPaused = file.status === UploadStatus.PAUSED;
     const showPause = !isSuccess && !isFailed && !isCancelled && !isPaused && onPause;
     const showResume = isPaused && onResume;
+    const showRetry = isFailed && !!file.file && onRetry;
     const handleClose = () => {
         if (isFailed || isSuccess || isCancelled) {
             onRemove === null || onRemove === void 0 ? void 0 : onRemove(file.id);
@@ -59,7 +60,7 @@ function UploaderFileItem(props) {
             return 'cancelled';
         return 'uploading';
     };
-    return (jsxs("div", { className: `upload-file-item ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.container) || ''}`, "data-status": getStatusAttribute(), children: [jsxs("div", { className: `upload-file-info ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.info) || ''}`, children: [jsx("div", { className: `upload-file-icon ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.icon) || ''}`, children: jsx(FileIcon, {}) }), jsxs("span", { className: `upload-file-name ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.name) || ''}`, children: [file.fileName, file.relativePath && (jsx("span", { className: `upload-file-path ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.relativePath) || ''}`, children: file.relativePath }))] })] }), jsxs("div", { className: `upload-file-status ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.status) || ''}`, children: [jsx("span", { className: `upload-status-text ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.statusText) || ''}`, children: getStatusText() }), jsx("div", { className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.progress, children: jsx(CircleProgress, { percent: file.progress, isFailed: isFailed, isSuccess: isSuccess }) }), showPause && (jsx("button", { className: `upload-action-btn upload-pause-btn ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.pauseBtn) || ''}`, onClick: () => onPause === null || onPause === void 0 ? void 0 : onPause(file.id), title: "\u6682\u505C\u4E0A\u4F20", children: jsx(PauseIcon, {}) })), showResume && (jsx("button", { className: `upload-action-btn upload-resume-btn ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.resumeBtn) || ''}`, onClick: () => onResume === null || onResume === void 0 ? void 0 : onResume(file.id), title: "\u7EE7\u7EED\u4E0A\u4F20", children: jsx(ResumeIcon, {}) }))] }), jsx("button", { className: `upload-action-btn upload-close-btn ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.closeBtn) || ''}`, onClick: handleClose, title: isFailed || isSuccess ? '移除' : '取消上传', children: jsx(CloseIcon, {}) })] }));
+    return (jsxs("div", { className: `upload-file-item ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.container) || ''}`, "data-status": getStatusAttribute(), children: [jsxs("div", { className: `upload-file-info ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.info) || ''}`, children: [jsx("div", { className: `upload-file-icon ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.icon) || ''}`, children: jsx(FileIcon, {}) }), jsxs("span", { className: `upload-file-name ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.name) || ''}`, children: [file.fileName, file.relativePath && (jsx("span", { className: `upload-file-path ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.relativePath) || ''}`, children: file.relativePath }))] })] }), jsxs("div", { className: `upload-file-status ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.status) || ''}`, children: [jsx("span", { className: `upload-status-text ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.statusText) || ''}`, children: getStatusText() }), jsx("div", { className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.progress, children: jsx(CircleProgress, { percent: file.progress, isFailed: isFailed, isSuccess: isSuccess }) }), showPause && (jsx("button", { className: `upload-action-btn upload-pause-btn ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.pauseBtn) || ''}`, onClick: () => onPause === null || onPause === void 0 ? void 0 : onPause(file.id), title: "\u6682\u505C\u4E0A\u4F20", children: jsx(PauseIcon, {}) })), showResume && (jsx("button", { className: `upload-action-btn upload-resume-btn ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.resumeBtn) || ''}`, onClick: () => onResume === null || onResume === void 0 ? void 0 : onResume(file.id), title: "\u7EE7\u7EED\u4E0A\u4F20", children: jsx(ResumeIcon, {}) })), showRetry && (jsx("button", { className: `upload-action-btn upload-retry-btn ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.retryBtn) || ''}`, onClick: () => onRetry === null || onRetry === void 0 ? void 0 : onRetry(file.id), title: "\u91CD\u8BD5\u4E0A\u4F20", children: jsx(RetryIcon, {}) }))] }), jsx("button", { className: `upload-action-btn upload-close-btn ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.closeBtn) || ''}`, onClick: handleClose, title: isFailed || isSuccess ? '移除' : '取消上传', children: jsx(CloseIcon, {}) })] }));
 }
 
 export { UploaderFileItem };

package/es/components/file-uploader/components/uploader-progress-bar.css.js

@@ -0,0 +1,43 @@
+function useStyle() {
+  var style = document.createElement('style');
+  style.textContent = `.uploader-progress-bar {
+  padding: 0.75rem 0;
+}
+
+.uploader-progress-bar-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.uploader-progress-bar-text {
+  font-size: 0.875rem;
+  color: var(--uploader-text-secondary, #64748b);
+}
+
+.uploader-progress-bar-percent {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--uploader-text, #1e293b);
+}
+
+.uploader-progress-bar-track {
+  width: 100%;
+  height: 0.5rem;
+  background-color: var(--uploader-border, #e2e8f0);
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+.uploader-progress-bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #3b82f6, #60a5fa);
+  border-radius: 9999px;
+  transition: width 0.3s ease;
+}
+`;
+  document.head.appendChild(style);
+}
+
+export { useStyle as default };

package/es/components/file-uploader/components/uploader-progress-bar.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useUpload } from '../hooks/use-upload.js';
+import { UploadStatus } from '../constants.js';
+import useStyle from './uploader-progress-bar.css.js';
+
+useStyle();
+function UploaderProgressBar({ hideWhenSingle = true, className = '' }) {
+    const { files } = useUpload();
+    if (files.length === 0)
+        return null;
+    if (hideWhenSingle && files.length <= 1)
+        return null;
+    const completedCount = files.filter((f) => f.status === UploadStatus.SUCCESS).length;
+    const totalCount = files.length;
+    const percent = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0;
+    return (jsxs("div", { className: `uploader-progress-bar ${className}`, children: [jsxs("div", { className: "uploader-progress-bar-info", children: [jsxs("span", { className: "uploader-progress-bar-text", children: ["\u5DF2\u5B8C\u6210: ", completedCount, " / ", totalCount, " \u4E2A\u6587\u4EF6"] }), jsxs("span", { className: "uploader-progress-bar-percent", children: [percent, "%"] })] }), jsx("div", { className: "uploader-progress-bar-track", children: jsx("div", { className: "uploader-progress-bar-fill", style: { width: `${percent}%` } }) })] }));
+}
+
+export { UploaderProgressBar };

package/es/components/file-uploader/components/uploader.js

@@ -6,6 +6,7 @@ import { DEFAULT_MAX_FILE_SIZE } from '../constants.js';
 import { UploaderDropZone } from './uploader-drop-zone.js';
 import { UploaderFileListLayout } from './uploader-file-list.js';
 import { UploaderFileItem } from './uploader-file-item.js';
+import { UploaderProgressBar } from './uploader-progress-bar.js';
 import { useUpload } from '../hooks/use-upload.js';
 
 useStyle();
@@ -39,15 +40,15 @@ useStyle$1();
  */
 function Uploader(props) {
     const { handlers, runtime, dragAreaDescription = '点击或拖拽上传文件', accept = '', directory = false, maxFiles, maxSize = DEFAULT_MAX_FILE_SIZE, // 10GB default
-    classNames, onDropZoneError, fileValidation, } = props;
+    classNames, onDropZoneError, fileValidation, showProgressBar = true, } = props;
     const SemanticClassNames = typeof classNames === 'function' ? classNames(props) : classNames;
-    const { files, addFiles, startAll, cancel, removeFile } = useUpload();
+    const { files, addFiles, startAll, cancel, removeFile, retry } = useUpload();
     // Auto-start newly added pending files
     useEffect(() => {
         startAll();
     }, [startAll]);
     const handleAddFiles = useCallback((dropped) => addFiles(dropped, { handlers }, runtime), [addFiles, handlers, runtime]);
-    return (jsxs("div", { className: `styled-uploader-container ${(SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.container) || ''}`, children: [jsx(UploaderDropZone, { accept: accept, directory: directory, maxFiles: maxFiles, maxSize: maxSize, dragAreaDescription: dragAreaDescription, onDrop: handleAddFiles, onError: onDropZoneError, fileValidation: fileValidation, classNames: SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.dragZone }), jsx(UploaderFileListLayout, { classNames: SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.fileList, children: files.map((file) => (jsx(UploaderFileItem, { file: file, onCancel: cancel, onRemove: removeFile, classNames: SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.fileItem }, file.id))) })] }));
+    return (jsxs("div", { className: `styled-uploader-container ${(SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.container) || ''}`, children: [jsx(UploaderDropZone, { accept: accept, directory: directory, maxFiles: maxFiles, maxSize: maxSize, dragAreaDescription: dragAreaDescription, onDrop: handleAddFiles, onError: onDropZoneError, fileValidation: fileValidation, classNames: SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.dragZone }), showProgressBar && jsx(UploaderProgressBar, {}), jsx(UploaderFileListLayout, { classNames: SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.fileList, children: files.map((file) => (jsx(UploaderFileItem, { file: file, onCancel: cancel, onRemove: removeFile, onRetry: retry, classNames: SemanticClassNames === null || SemanticClassNames === void 0 ? void 0 : SemanticClassNames.fileItem }, file.id))) })] }));
 }
 
 export { Uploader };