@zjlab-fe/data-hub-ui 0.21.7 → 0.23.0

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

@@ -0,0 +1,64 @@
+var style = document.createElement('style');
+style.textContent = `:root {
+  /* --- CSS Variables for Theming --- */
+  
+  /* Base Colors */
+  --uploader-bg: #ffffff;
+  --uploader-border: #e2e8f0;
+  --uploader-text: #0f172a;
+  --uploader-text-muted: #64748b;
+  --uploader-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+
+  /* Drop Zone */
+  --uploader-drop-border: rgba(23, 117, 254, 0.4);
+  --uploader-drop-bg-hover: #f8fafc;
+  --uploader-drop-bg-active: #f1f5f9;
+  --uploader-drop-icon: #94a3b8;
+  --uploader-drop-icon-hover: #64748b;
+
+  /* File List */
+  --uploader-list-border: #e2e8f0;
+  --uploader-list-title: #0f172a;
+
+  /* File Item */
+  --uploader-item-bg: #ffffff;
+  --uploader-item-bg-hover: #f8fafc;
+  --uploader-item-border: #e2e8f0;
+  --uploader-item-text: #0f172a;
+  --uploader-item-icon: #64748b;
+
+  /* Status Colors (Backgrounds) */
+  --uploader-status-failed-bg: #fef2f2;
+  --uploader-status-failed-bg-hover: #fee2e2;
+  
+  --uploader-status-success-bg: #f0fdf4;
+  --uploader-status-success-bg-hover: #dcfce7;
+  
+  --uploader-status-uploading-bg: #ffffff;
+  --uploader-status-uploading-bg-hover: #f8fafc;
+
+  /* Status Colors (Text/Icon) */
+  --uploader-status-failed-text: #991b1b;
+  --uploader-status-failed-icon: #ef4444;
+  
+  --uploader-status-success-text: #065f46;
+  --uploader-status-success-icon: #10b981;
+  
+  --uploader-status-uploading-text: #0f172a;
+  --uploader-status-uploading-icon: #64748b;
+
+  /* Action Buttons */
+  --uploader-action-icon: #94a3b8;
+  --uploader-action-hover-bg: #f1f5f9;
+  --uploader-action-hover-text: #0f172a;
+  --uploader-action-close-hover-bg: #fef2f2;
+  --uploader-action-close-hover-text: #ef4444;
+
+  /* Progress */
+  --uploader-progress-track: #cbd5e1;
+  --uploader-progress-fill: #1775fe;
+  --uploader-progress-success: #10b981;
+  --uploader-progress-failed: #ef4444;
+}
+`;
+document.head.appendChild(style);

package/es/components/file-uploader/components/uploader-drop-zone.css.js

@@ -0,0 +1,66 @@
+var style = document.createElement('style');
+style.textContent = `.upload-drop-zone-container {
+  position: relative;
+  width: 100%;
+  margin-bottom: 1.5rem;
+}
+
+.upload-drag-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 1.5rem;
+  /* REQUIRED: Keep the dash border exactly as requested */
+  border: 2px dashed var(--uploader-drop-border);
+  border-radius: 0.5rem;
+  background-color: transparent;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+.upload-drag-area:hover {
+  background-color: var(--uploader-drop-bg-hover);
+}
+
+.upload-drag-area.dragging {
+  background-color: var(--uploader-drop-bg-active);
+  opacity: 0.9;
+}
+
+.upload-drag-area.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.upload-icon {
+  margin-bottom: 1rem;
+  font-size: 24px;
+  color: var(--uploader-drop-icon);
+  transition: color 0.2s ease;
+}
+
+.upload-drag-area:hover .upload-icon {
+  color: var(--uploader-drop-icon-hover);
+}
+
+.upload-icon img,
+.upload-icon svg {
+  width: 40px;
+  height: 40px;
+  display: block;
+}
+
+.upload-description {
+  margin: 0;
+  font-size: 0.875rem; /* 14px */
+  font-weight: 500;
+  color: var(--uploader-text-muted);
+  line-height: 1.5;
+}
+
+
+
+
+`;
+document.head.appendChild(style);

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

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useCallback } from 'react';
+import UploadIcon from './icons.js';
+import { useDropZone } from './hooks/use-drop-zone.js';
+import { useFileValidation } from './hooks/use-file-validation.js';
+
+function UploaderDropZone(props) {
+    const { accept = '', maxSize, maxFiles, directory = false, disabled = false, dragAreaDescription = '点击或拖拽上传文件', icon, classNames, onDrop, fileValidation, onError, } = props;
+    const semanticClassNames = typeof classNames === 'function' ? classNames(props) : classNames;
+    const inputRef = useRef(null);
+    const { processFiles } = useFileValidation({ maxSize, maxFiles, fileValidation, onDrop, onError });
+    const { isDragging, handleDragEnter, handleDragOver, handleDragLeave, handleDrop } = useDropZone({
+        disabled,
+        directory,
+        accept,
+        onFilesReady: processFiles,
+        onError,
+    });
+    const handleFileSelect = useCallback((e) => {
+        const files = e.target.files;
+        if (files && files.length > 0) {
+            // Convert files to FileWithPath (no directory structure from input)
+            const filesWithPath = Array.from(files).map((file) => ({
+                file,
+                relativePath: '',
+            }));
+            processFiles(filesWithPath);
+        }
+        // Reset input value to allow re-selecting same files
+        if (inputRef.current) {
+            inputRef.current.value = '';
+        }
+    }, [processFiles]);
+    const open = useCallback(() => {
+        var _a;
+        if (!disabled) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    }, [disabled]);
+    // ─────────────────────────────────────────────────────────────────────────────
+    // RENDERING
+    // ─────────────────────────────────────────────────────────────────────────────
+    // Render icon based on prop type
+    const renderIcon = () => {
+        if (!icon && icon !== undefined) {
+            return null;
+        }
+        if (typeof icon === 'string') {
+            // Treat as image path
+            return (jsx("div", { className: `upload-icon ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.icon) || ''}`, children: jsx("img", { src: icon, alt: "Upload" }) }));
+        }
+        if (icon) {
+            // Treat as React component
+            return jsx("div", { className: `upload-icon ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.icon) || ''}`, children: icon });
+        }
+        // Default icon
+        return (jsx("div", { className: `upload-icon ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.icon) || ''}`, children: jsx(UploadIcon, {}) }));
+    };
+    const dragAreaClass = [
+        'upload-drag-area',
+        isDragging && 'dragging',
+        isDragging && (semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.dragging),
+        disabled && 'disabled',
+        disabled && (semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.disabled),
+        semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.dragArea,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (jsx("div", { className: `upload-drop-zone-container ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.container) || ''}`, children: jsxs("div", { onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: open, className: dragAreaClass, children: [jsx("input", { ref: inputRef, type: "file", multiple: !maxFiles || maxFiles > 1, accept: accept, onChange: handleFileSelect, className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.input, style: { display: 'none' } }), renderIcon(), jsx("p", { className: `upload-description ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.description) || ''}`, children: dragAreaDescription })] }) }));
+}
+
+export { UploaderDropZone };

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

@@ -0,0 +1,186 @@
+var style = document.createElement('style');
+style.textContent = `.upload-file-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--uploader-item-border);
+  background-color: var(--uploader-item-bg);
+  transition: background-color 0.2s ease;
+  position: relative;
+}
+
+.upload-file-item:last-child {
+  border-bottom: none;
+}
+
+.upload-file-item:hover {
+  background-color: var(--uploader-item-bg-hover);
+}
+
+/* State-based backgrounds for better visibility */
+
+.upload-file-item[data-status='failed'] {
+  background-color: var(--uploader-status-failed-bg);
+}
+
+.upload-file-item[data-status='failed']:hover {
+  background-color: var(--uploader-status-failed-bg-hover);
+}
+
+.upload-file-item[data-status='success'] {
+  background-color: var(--uploader-status-success-bg);
+}
+
+.upload-file-item[data-status='success']:hover {
+  background-color: var(--uploader-status-success-bg-hover);
+}
+
+.upload-file-item[data-status='uploading'] {
+  background-color: var(--uploader-status-uploading-bg);
+}
+
+.upload-file-item[data-status='uploading']:hover {
+  background-color: var(--uploader-status-uploading-bg-hover);
+}
+
+/* Remove the left border strip for cleaner look */
+
+.upload-file-item::before {
+  display: none;
+}
+
+/* File Info Section */
+
+.upload-file-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.upload-file-icon {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--uploader-item-icon);
+  transition: color 0.2s ease;
+}
+
+.upload-file-item[data-status='failed'] .upload-file-icon {
+  color: var(--uploader-status-failed-icon);
+}
+
+.upload-file-item[data-status='completed'] .upload-file-icon {
+  color: var(--uploader-status-success-icon);
+}
+
+.upload-file-item[data-status='uploading'] .upload-file-icon {
+  color: var(--uploader-status-uploading-icon);
+}
+
+.upload-file-name {
+  flex: 1;
+  font-size: 0.875rem; /* 14px */
+  font-weight: 500;
+  color: var(--uploader-item-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.upload-file-path {
+  margin-left: 0.5rem;
+  padding: 0.125rem 0.375rem;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 0.1875rem; /* 3px */
+  font-size: 0.85em;
+  color: rgba(0, 0, 0, 0.6);
+  white-space: nowrap;
+}
+
+.upload-file-item[data-status='failed'] .upload-file-name {
+  color: var(--uploader-status-failed-text);
+}
+
+.upload-file-item[data-status='completed'] .upload-file-name {
+  color: var(--uploader-status-success-text);
+}
+
+.upload-file-item[data-status='uploading'] .upload-file-name {
+  color: var(--uploader-status-uploading-text);
+}
+
+/* Status Section */
+
+.upload-file-status {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-left: 1rem;
+  margin-right: 0.5rem;
+}
+
+.upload-status-text {
+  font-size: 0.75rem; /* 12px */
+  color: var(--uploader-text-muted);
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.upload-file-item[data-status='failed'] .upload-status-text {
+  color: var(--uploader-status-failed-icon);
+}
+
+.upload-file-item[data-status='completed'] .upload-status-text {
+  color: var(--uploader-status-success-icon);
+}
+
+/* Action Buttons */
+
+.upload-action-btn {
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--uploader-action-icon);
+  transition: all 0.2s ease;
+  border-radius: 0.375rem; /* 6px */
+}
+
+.upload-action-btn:hover {
+  background: var(--uploader-action-hover-bg);
+  color: var(--uploader-action-hover-text);
+}
+
+.upload-pause-btn:hover {
+  color: #f59e0b;
+}
+
+.upload-resume-btn:hover {
+  color: var(--uploader-status-uploading-icon);
+}
+
+.upload-close-btn {
+  opacity: 0.5;
+}
+
+.upload-file-item:hover .upload-close-btn {
+  opacity: 1;
+}
+
+.upload-close-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

@@ -0,0 +1,61 @@
+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 { UploadingStatus } from './uploading-status.js';
+
+function UploaderFileItem(props) {
+    const { file, classNames, onCancel, onRemove, onPause, onResume } = props;
+    const semanticClassNames = typeof classNames === 'function' ? classNames(props) : classNames;
+    const isFailed = file.status === UploadStatus.FAILED;
+    const isSuccess = file.status === UploadStatus.SUCCESS;
+    const isCancelled = file.status === UploadStatus.CANCELLED;
+    const isPaused = file.status === UploadStatus.PAUSED;
+    const showPause = !isSuccess && !isFailed && !isCancelled && !isPaused && onPause;
+    const showResume = isPaused && onResume;
+    const handleClose = () => {
+        if (isFailed || isSuccess || isCancelled) {
+            onRemove === null || onRemove === void 0 ? void 0 : onRemove(file.id);
+        }
+        else {
+            onCancel === null || onCancel === void 0 ? void 0 : onCancel(file.id);
+        }
+    };
+    const getStatusText = () => {
+        switch (file.status) {
+            case UploadStatus.PENDING:
+                return '等待上传';
+            case UploadStatus.PREPARING:
+                return '准备中';
+            case UploadStatus.UPLOADING:
+                return jsx(UploadingStatus, {}); // Will render UploadingStatus component instead
+            case UploadStatus.PAUSED:
+                return '已暂停';
+            case UploadStatus.MERGING:
+                return '合并中';
+            case UploadStatus.SUCCESS:
+                return '上传成功';
+            case UploadStatus.FAILED:
+                return '上传失败';
+            case UploadStatus.CANCELLED:
+                return '已取消';
+            default:
+                return file.status;
+        }
+    };
+    // Map status to data attribute value for cleaner CSS targeting
+    const getStatusAttribute = () => {
+        if (isFailed)
+            return 'failed';
+        if (isSuccess)
+            return 'success';
+        if (isPaused)
+            return 'paused';
+        if (isCancelled)
+            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, {}) })] }));
+}
+
+export { UploaderFileItem };

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

@@ -0,0 +1,43 @@
+var style = document.createElement('style');
+style.textContent = `.upload-file-list-wrapper {
+  width: 100%;
+  margin-top: 1.5rem;
+}
+
+.upload-file-list-title {
+  margin-bottom: 0.75rem;
+  font-size: 0.875rem; /* 14px */
+  font-weight: 500;
+  color: var(--uploader-list-title);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.upload-file-list-title::after {
+  display: none;
+}
+
+.upload-file-list {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: 1px solid var(--uploader-list-border);
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.upload-file-list-empty {
+  padding: 2.5rem;
+  text-align: center;
+  color: var(--uploader-text-muted);
+  font-size: 0.875rem;
+  background: transparent;
+  border: none;
+}
+
+
+
+
+`;
+document.head.appendChild(style);

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

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useUpload } from '../hooks/use-upload.js';
+
+/**
+ * Simple file list component that displays all uploaded files.
+ * Uses the useUploadFiles hook to access file state.
+ *
+ * @example
+ * ```tsx
+ * <FileList
+ *   emptyText="No files uploaded yet"
+ * />
+ * ```
+ */
+function UploaderFileListLayout(props) {
+    const { classNames, emptyText = '暂无文件', children } = props;
+    const semanticClassNames = typeof classNames === 'function' ? classNames(props) : classNames;
+    const { files } = useUpload();
+    if (files.length === 0) {
+        return jsx("div", { className: `upload-file-list-empty ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.empty) || ''}`, children: emptyText });
+    }
+    return (jsxs("div", { className: `upload-file-list-wrapper ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.container) || ''}`, children: [jsxs("div", { className: `upload-file-list-title ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.title) || ''}`, children: ["\u5F53\u524D\u4E0A\u4F20 (", files.length, ")"] }), jsx("div", { className: `upload-file-list ${(semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.listWrapper) || ''}`, children: children })] }));
+}
+
+export { UploaderFileListLayout };

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

@@ -0,0 +1,20 @@
+var style = document.createElement('style');
+style.textContent = `/* Styled File Uploader - shadcn/ui inspired */
+
+.styled-uploader-container {
+  /* --- Component Styles --- */
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 1.5rem;
+  background-color: var(--uploader-bg);
+  border: 1px solid var(--uploader-border);
+  border-radius: 0.5rem;
+  box-shadow: var(--uploader-shadow);
+  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  color: var(--uploader-text);
+}
+
+
+
+`;
+document.head.appendChild(style);

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

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEffect, useCallback } from 'react';
+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 { useUpload } from '../hooks/use-upload.js';
+
+/**
+ * Styled File Uploader - Matches FileUploader capabilities with custom styling
+ *
+ * Note: This component must be used within an UploadProvider.
+ * The UploadProvider should be placed at the app level for shared state and global config.
+ *
+ * @example
+ * ```tsx
+ * // App level - with global config
+ * <UploadProvider config={{ concurrentFiles: 3 }}>
+ *   <App />
+ * </UploadProvider>
+ *
+ * // Component level - provide handlers with local context
+ * <StyledUploader
+ *   maxFileSize={10 * 1024 * 1024 * 1024} // 10GB for this dataset
+ *   getHandlers={(file) => ({
+ *     onGetUploadUrls: (fileName, partCount) =>
+ *       api.getUrls(datasetId, fileName, partCount, resolveFolderFromUI()),
+ *     onPartComplete: (fileName, uploadId, partNum) =>
+ *       api.markPartComplete(datasetId, uploadId, partNum),
+ *     onFileComplete: (fileName, uploadId) =>
+ *       api.complete(datasetId, uploadId),
+ *   })}
+ * />
+ * ```
+ */
+function Uploader(props) {
+    const { handlers, runtime, dragAreaDescription = '点击或拖拽上传文件', accept = '', directory = false, maxFiles, maxSize = DEFAULT_MAX_FILE_SIZE, // 10GB default
+    classNames, onDropZoneError, fileValidation, } = props;
+    const SemanticClassNames = typeof classNames === 'function' ? classNames(props) : classNames;
+    const { files, addFiles, startAll, cancel, removeFile } = 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))) })] }));
+}
+
+export { Uploader };

package/es/components/file-uploader/components/uploading-status.css.js

@@ -0,0 +1,52 @@
+var style = document.createElement('style');
+style.textContent = `.uploading-status {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  height: 1.2em;
+  line-height: 1.2em;
+}
+
+.uploading-status-text {
+  display: inline-block;
+}
+
+.uploading-status-text.slide-up {
+  animation: slideUp 0.4s ease-in-out forwards;
+}
+
+.uploading-status-text.slide-in {
+  animation: slideIn 0.4s ease-in-out forwards;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Animated ellipsis dots */
+
+.uploading-dots {
+  display: inline-block;
+  width: 1.2em;
+  text-align: left;
+}
+`;
+document.head.appendChild(style);