tycho-components 0.47.2 → 0.48.2

package/dist/common/AppDropzone/AppDropzone.d.ts

@@ -1,3 +1,4 @@
+import { type DropzoneMessages } from '../AppDropzoneShell';
 import type { UploadedFile } from './UploadedFile';
 type Props = {
     folder: string;
@@ -5,7 +6,7 @@ type Props = {
     onSuccess: (response: UploadedFile) => void;
     onError?: (err: any) => void;
     accept: Record<string, string[]>;
-    messages?: Partial<Record<'label.dropzone' | 'label.uploaded.file', string>>;
+    messages?: DropzoneMessages;
     onDrop?: () => void;
     /** Initial value for the keep-original-name checkbox (default false). */
     keepName?: boolean;

package/dist/common/AppDropzone/AppDropzone.js

@@ -1,13 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import AppModal from '../AppModal';
+import { AppDropzoneModal, } from '../AppDropzoneShell';
 import AppDropzoneBody from './AppDropzoneBody';
 export default function AppDropzone({ folder, onClose, onSuccess, onError, accept, messages, onDrop, keepName, title, alternativeButton, disableConfirm = false, }) {
-    const { t } = useTranslation('upload');
     const bodyRef = useRef(null);
-    const handleConfirm = () => {
-        bodyRef.current?.upload();
-    };
-    return (_jsx(AppModal, { title: title || t('modal.title'), className: "modal-upload", close: onClose, confirm: handleConfirm, disableConfirm: disableConfirm, alternativeButton: alternativeButton, children: _jsx(AppDropzoneBody, { ref: bodyRef, folder: folder, onSuccess: onSuccess, onError: onError, accept: accept, messages: messages, onDrop: onDrop, keepName: keepName, showConfirmButton: false }) }));
+    return (_jsx(AppDropzoneModal, { title: title, onClose: onClose, bodyRef: bodyRef, className: "modal-upload", disableConfirm: disableConfirm, alternativeButton: alternativeButton, children: _jsx(AppDropzoneBody, { ref: bodyRef, folder: folder, onSuccess: onSuccess, onError: onError, accept: accept, messages: messages, onDrop: onDrop, keepName: keepName, showConfirmButton: false }) }));
 }

package/dist/common/AppDropzone/AppDropzoneBody.d.ts

@@ -1,11 +1,11 @@
+import { type DropzoneMessages } from '../AppDropzoneShell';
 import { UploadedFile } from './UploadedFile';
-import './style.scss';
 export type AppDropzoneBodyProps = {
     folder: string;
     onSuccess: (response: UploadedFile) => void;
     onError?: (err: any) => void;
     accept: Record<string, string[]>;
-    messages?: Partial<Record<'label.dropzone' | 'label.uploaded.file', string>>;
+    messages?: DropzoneMessages;
     onDrop?: () => void;
     /** Initial value for the keep-original-name checkbox (default false). */
     keepName?: boolean;

package/dist/common/AppDropzone/AppDropzoneBody.js

@@ -1,16 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState, } from 'react';
-import Dropzone from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 import { Button } from 'tycho-storybook';
 import CommonContext from '../../configs/CommonContext';
 import { toastLoading } from '../../configs/store/actions';
 import { useMessageUtils } from '../../configs/useMessageUtils';
 import AppModalConfirm from '../AppModal/AppModalConfirm';
+import { DropzoneShell, useDropzoneMessages, } from '../AppDropzoneShell';
 import UploadService from './UploadService';
-import './style.scss';
 function isFileAlreadyExistsError(err) {
     return (err?.response?.status === 409 &&
         err?.response?.data?.description === 'upload.file.already.exists');
@@ -19,6 +18,7 @@ function AppDropzoneBodyInner({ folder, onSuccess, onError, accept, messages, on
     const { t } = useTranslation('upload');
     const { state, dispatch } = useContext(CommonContext);
     const { dispatchError } = useMessageUtils();
+    const resolveMessage = useDropzoneMessages(messages);
     const [file, setFile] = useState();
     const [preview, setPreview] = useState();
     const [keepOriginalName, setKeepOriginalName] = useState(keepName);
@@ -101,8 +101,6 @@ function AppDropzoneBodyInner({ folder, onSuccess, onError, accept, messages, on
         upload: () => upload(false),
     }));
     const handleDrop = (files) => {
-        if (files.length === 0)
-            return;
         setFile(files[0]);
         onDrop?.();
     };
@@ -113,11 +111,7 @@ function AppDropzoneBodyInner({ folder, onSuccess, onError, accept, messages, on
         setReplaceConfirmOpen(false);
         upload(true);
     };
-    const resolveMessage = (key) => {
-        const customMessage = messages?.[key]?.trim();
-        return customMessage || t(key);
-    };
-    return (_jsxs("div", { className: "dropzone-container", children: [!file && (_jsx(Dropzone, { onDrop: (acceptedFiles) => handleDrop(acceptedFiles), accept: accept, maxFiles: 1, children: ({ getRootProps, getInputProps }) => (_jsxs("div", { ...getRootProps(), className: "dropzone", children: [_jsx("input", { ...getInputProps() }), _jsx("span", { children: resolveMessage('label.dropzone') })] })) })), file && (_jsxs("div", { className: "uploaded-file", children: [preview && _jsx("img", { className: "preview", src: preview, alt: "" }), !preview && (_jsxs(_Fragment, { children: [_jsx("b", { children: resolveMessage('label.uploaded.file') }), _jsx("span", { children: file.name })] })), showConfirmButton && (_jsxs("div", { className: "buttons", children: [_jsx(Button, { onClick: handleCancel, text: t('common:button.cancel'), size: "small", mode: "outlined", color: "danger" }), _jsx(Button, { onClick: () => upload(false), text: t('common:button.confirm'), size: "small", mode: "outlined", disabled: disableConfirm })] }))] })), _jsx(FormControlLabel, { className: "keep-name-checkbox", control: _jsx(Checkbox, { checked: keepOriginalName, onChange: (_, checked) => setKeepOriginalName(checked) }), label: t('label.keep.original.name') }), replaceConfirmOpen && (_jsx(AppModalConfirm, { title: t('replace.confirm.title'), subtitle: t('replace.confirm.subtitle', {
+    return (_jsxs(_Fragment, { children: [_jsx(DropzoneShell, { accept: accept, messages: messages, onDrop: handleDrop, hasSelection: Boolean(file), maxFiles: 1, selection: file ? (_jsxs(_Fragment, { children: [preview && _jsx("img", { className: "preview", src: preview, alt: "" }), !preview && (_jsxs(_Fragment, { children: [_jsx("b", { children: resolveMessage('label.uploaded.file') }), _jsx("span", { children: file.name })] })), showConfirmButton && (_jsxs("div", { className: "buttons", children: [_jsx(Button, { onClick: handleCancel, text: t('common:button.cancel'), size: "small", mode: "outlined", color: "danger" }), _jsx(Button, { onClick: () => upload(false), text: t('common:button.confirm'), size: "small", mode: "outlined", disabled: disableConfirm })] }))] })) : null, after: _jsx(FormControlLabel, { className: "keep-name-checkbox", control: _jsx(Checkbox, { checked: keepOriginalName, onChange: (_, checked) => setKeepOriginalName(checked) }), label: t('label.keep.original.name') }) }), replaceConfirmOpen && (_jsx(AppModalConfirm, { title: t('replace.confirm.title'), subtitle: t('replace.confirm.subtitle', {
                     0: fileRef.current?.name ?? '',
                 }), onClose: () => setReplaceConfirmOpen(false), onConfirm: handleReplaceConfirm }))] }));
 }

package/dist/common/AppDropzone/style.scss

@@ -1,70 +1,3 @@
-.dropzone-container {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: center;
-  gap: var(--spacing-200);
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 100%;
-  min-width: 0;
-  overflow: hidden;
-
-  .dropzone {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    box-sizing: border-box;
-    width: 100%;
-    max-width: 100%;
-    min-width: 0;
-    padding: var(--spacing-700);
-    border-radius: var(--radius-100);
-    border: 2px dashed var(--border-subtle-3);
-    background-color: var(--layer-layer-2);
-    cursor: pointer;
-  }
-
-  .preview {
-    display: block;
-    margin: 0 auto;
-    width: 100%;
-    max-width: 400px;
-    height: auto;
-    aspect-ratio: 1;
-    object-fit: contain;
-  }
-
-  .uploaded-file {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    box-sizing: border-box;
-    width: 100%;
-    max-width: 100%;
-    min-width: 0;
-    text-align: center;
-    border: 1px solid var(--border-subtle-3);
-    border-radius: var(--radius-100);
-    padding: var(--spacing-200);
-    gap: var(--spacing-200);
-    overflow-wrap: anywhere;
-
-    .buttons {
-      display: flex;
-      gap: var(--spacing-200);
-      margin-top: var(--spacing-200);
-    }
-  }
-
-  .keep-name-checkbox {
-    align-self: flex-start;
-    max-width: 100%;
-    min-width: 0;
-
-    > .MuiCheckbox-root {
-      padding: 0px 8px;
-    }
-  }
-}
+// Deprecated local entry: styles live in AppDropzoneShell/style.scss
+// and are loaded by DropzoneShell. Kept so existing @import paths do not break.
+@forward '../AppDropzoneShell/style';

package/dist/common/AppDropzoneLocal/AppDropzoneBodyLocal.d.ts

@@ -1,9 +1,10 @@
-import './style.scss';
+import { type DropzoneMessages } from '../AppDropzoneShell';
 import type { UploadedFileLocal } from './UploadedFileLocal';
 export type AppDropzoneBodyLocalProps = {
     onSuccess: (files: UploadedFileLocal[]) => void;
     onError?: (err: unknown) => void;
     accept: Record<string, string[]>;
+    messages?: DropzoneMessages;
     onDrop?: () => void;
     /** When false, the confirm button is hidden (e.g. when used inside modal with its own confirm) */
     showConfirmButton?: boolean;

package/dist/common/AppDropzoneLocal/AppDropzoneBodyLocal.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import Dropzone from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 import { Button } from 'tycho-storybook';
-import './style.scss';
-function AppDropzoneBodyLocalInner({ onSuccess, onError, accept, onDrop, showConfirmButton = true, }, ref) {
+import { DropzoneShell, useDropzoneMessages, } from '../AppDropzoneShell';
+function AppDropzoneBodyLocalInner({ onSuccess, onError, accept, messages, onDrop, showConfirmButton = true, }, ref) {
     const { t } = useTranslation('upload');
+    const resolveMessage = useDropzoneMessages(messages);
     const [files, setFiles] = useState([]);
     const [isUploading, setIsUploading] = useState(false);
     const filesRef = useRef([]);
@@ -33,8 +33,6 @@ function AppDropzoneBodyLocalInner({ onSuccess, onError, accept, onDrop, showCon
         upload,
     }));
     const handleDrop = (acceptedFiles) => {
-        if (acceptedFiles.length === 0)
-            return;
         setFiles((prev) => [...prev, ...acceptedFiles]);
         onDrop?.();
     };
@@ -42,14 +40,14 @@ function AppDropzoneBodyLocalInner({ onSuccess, onError, accept, onDrop, showCon
     const removeAt = (index) => {
         setFiles((prev) => prev.filter((_, i) => i !== index));
     };
-    return (_jsxs("div", { className: "dropzone-container-local", children: [files.length === 0 && (_jsx(Dropzone, { onDrop: handleDrop, accept: accept, multiple: true, children: ({ getRootProps, getInputProps }) => (_jsxs("div", { ...getRootProps(), className: "dropzone-local", children: [_jsx("input", { ...getInputProps() }), _jsx("span", { children: t('label.dropzone') })] })) })), files.length > 0 && (_jsxs("div", { className: "uploaded-message-local", children: [_jsx("b", { children: t('label.uploaded.file') }), _jsx("ul", { className: "uploaded-file-list-local", children: files.map((file, index) => (_jsxs("li", { children: [_jsx("span", { children: file.name }), _jsx("button", { type: "button", className: "uploaded-file-remove-local", onClick: (e) => {
-                                        e.stopPropagation();
-                                        removeAt(index);
-                                    }, "aria-label": t('common:button.remove', {
-                                        defaultValue: 'Remove',
-                                    }), children: "\u00D7" })] }, `${file.name}-${file.size}-${index}`))) }), _jsx("button", { type: "button", className: "uploaded-clear-all-local", onClick: clearFiles, children: t('label.clear.all', { defaultValue: 'Clear all' }) }), _jsx("b", { children: t('label.confirm') })] })), files.length > 0 && showConfirmButton && (_jsx(Button, { onClick: () => {
-                    void upload();
-                }, text: t('common:button.confirm') }))] }));
+    return (_jsx(DropzoneShell, { accept: accept, messages: messages, onDrop: handleDrop, hasSelection: files.length > 0, multiple: true, selection: _jsxs(_Fragment, { children: [_jsx("b", { children: resolveMessage('label.uploaded.file') }), _jsx("ul", { className: "uploaded-file-list", children: files.map((file, index) => (_jsxs("li", { children: [_jsx("span", { children: file.name }), _jsx("button", { type: "button", className: "uploaded-file-remove", onClick: (e) => {
+                                    e.stopPropagation();
+                                    removeAt(index);
+                                }, "aria-label": t('common:button.remove', {
+                                    defaultValue: 'Remove',
+                                }), children: "\u00D7" })] }, `${file.name}-${file.size}-${index}`))) }), _jsx("button", { type: "button", className: "uploaded-clear-all", onClick: clearFiles, children: t('label.clear.all') }), _jsx("b", { children: t('label.confirm') }), showConfirmButton && (_jsx(Button, { onClick: () => {
+                        void upload();
+                    }, text: t('common:button.confirm') }))] }) }));
 }
 const AppDropzoneBodyLocal = forwardRef(AppDropzoneBodyLocalInner);
 export default AppDropzoneBodyLocal;

package/dist/common/AppDropzoneLocal/AppDropzoneLocal.d.ts

@@ -1,9 +1,11 @@
+import { type DropzoneMessages } from '../AppDropzoneShell';
 import type { UploadedFileLocal } from './UploadedFileLocal';
 type AppDropzoneLocalProps = {
     onClose: () => void;
     onSuccess: (files: UploadedFileLocal[]) => void;
     onError?: (err: unknown) => void;
     accept: Record<string, string[]>;
+    messages?: DropzoneMessages;
     onDrop?: () => void;
     title?: string;
     alternativeButton?: {
@@ -11,5 +13,5 @@ type AppDropzoneLocalProps = {
         action: () => void;
     };
 };
-export default function AppDropzoneLocal({ onClose, onSuccess, onError, accept, onDrop, title, alternativeButton, }: AppDropzoneLocalProps): import("react").JSX.Element;
+export default function AppDropzoneLocal({ onClose, onSuccess, onError, accept, messages, onDrop, title, alternativeButton, }: AppDropzoneLocalProps): import("react").JSX.Element;
 export {};

package/dist/common/AppDropzoneLocal/AppDropzoneLocal.js

@@ -1,13 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import AppModal from '../AppModal';
+import { AppDropzoneModal, } from '../AppDropzoneShell';
 import AppDropzoneBodyLocal from './AppDropzoneBodyLocal';
-export default function AppDropzoneLocal({ onClose, onSuccess, onError, accept, onDrop, title, alternativeButton, }) {
-    const { t } = useTranslation('upload');
+export default function AppDropzoneLocal({ onClose, onSuccess, onError, accept, messages, onDrop, title, alternativeButton, }) {
     const bodyRef = useRef(null);
-    const handleConfirm = () => {
-        void bodyRef.current?.upload();
-    };
-    return (_jsx(AppModal, { title: title || t('modal.title'), className: "modal-upload-local", close: onClose, confirm: handleConfirm, alternativeButton: alternativeButton, children: _jsx(AppDropzoneBodyLocal, { ref: bodyRef, onSuccess: onSuccess, onError: onError, accept: accept, onDrop: onDrop, showConfirmButton: false }) }));
+    return (_jsx(AppDropzoneModal, { title: title, onClose: onClose, bodyRef: bodyRef, className: "modal-upload-local", alternativeButton: alternativeButton, children: _jsx(AppDropzoneBodyLocal, { ref: bodyRef, onSuccess: onSuccess, onError: onError, accept: accept, messages: messages, onDrop: onDrop, showConfirmButton: false }) }));
 }

package/dist/common/AppDropzoneLocal/style.scss

@@ -1,75 +1,3 @@
-.dropzone-container-local {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .dropzone-local {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    width: 100%;
-    padding: var(--spacing-700);
-    border-radius: var(--radius-100);
-    border: 2px dashed var(--border-subtle-3);
-    background-color: var(--layer-layer-2);
-    cursor: pointer;
-  }
-
-  .preview-local {
-    margin: 0 auto;
-    width: 400px;
-    height: 400px;
-  }
-
-  .uploaded-message-local {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 16px;
-    text-align: center;
-    border: 1px solid var(--border-subtle-3);
-    border-radius: var(--radius-100);
-    padding: 16px;
-    margin-top: var(--spacing-400);
-  }
-
-  .uploaded-file-list-local {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    text-align: left;
-    border: var(--border-default);
-    padding: 8px;
-    border-radius: var(--radius-100);
-
-    li {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 8px;
-      padding: 4px 0;
-    }
-  }
-
-  .uploaded-file-remove-local {
-    flex-shrink: 0;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    font-size: 1.25rem;
-    line-height: 1;
-    padding: 0 4px;
-    color: var(--text-secondary, inherit);
-  }
-
-  .uploaded-clear-all-local {
-    align-self: center;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    text-decoration: underline;
-    font: inherit;
-    color: var(--text-link, inherit);
-  }
-}
+// Deprecated local entry: styles live in AppDropzoneShell/style.scss
+// and are loaded by DropzoneShell. Kept so existing @import paths do not break.
+@forward '../AppDropzoneShell/style';

package/dist/common/AppDropzoneShell/AppDropzoneModal.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+export type AppDropzoneUploadRef = {
+    upload: () => void | Promise<void>;
+};
+export type AppDropzoneModalProps = {
+    onClose: () => void;
+    /** Ref to the dropzone body that exposes imperative `upload()`. */
+    bodyRef: {
+        current: AppDropzoneUploadRef | null;
+    };
+    title?: string;
+    className?: string;
+    disableConfirm?: boolean;
+    alternativeButton?: {
+        title: string;
+        action: () => void;
+    };
+    children: ReactNode;
+};
+/**
+ * Shared AppModal + imperative confirm wiring for dropzone strategies.
+ * The body exposes `upload()` via `bodyRef`.
+ */
+export default function AppDropzoneModal({ onClose, bodyRef, title, className, disableConfirm, alternativeButton, children, }: AppDropzoneModalProps): import("react").JSX.Element;

package/dist/common/AppDropzoneShell/AppDropzoneModal.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import AppModal from '../AppModal';
+/**
+ * Shared AppModal + imperative confirm wiring for dropzone strategies.
+ * The body exposes `upload()` via `bodyRef`.
+ */
+export default function AppDropzoneModal({ onClose, bodyRef, title, className, disableConfirm, alternativeButton, children, }) {
+    const { t } = useTranslation('upload');
+    return (_jsx(AppModal, { title: title || t('modal.title'), className: className, close: onClose, confirm: () => {
+            void bodyRef.current?.upload();
+        }, disableConfirm: disableConfirm, alternativeButton: alternativeButton, children: children }));
+}

package/dist/common/AppDropzoneShell/DropzoneShell.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import { type DropzoneMessages } from './dropzoneMessages';
+import './style.scss';
+export type DropzoneShellProps = {
+    accept: Record<string, string[]>;
+    messages?: DropzoneMessages;
+    onDrop: (files: File[]) => void;
+    hasSelection: boolean;
+    /** When true, react-dropzone accepts multiple files. */
+    multiple?: boolean;
+    maxFiles?: number;
+    /** Content rendered inside the shared selected-state panel. */
+    selection?: ReactNode;
+    /** Extra content below the dropzone / selected panel (e.g. keep-name). */
+    after?: ReactNode;
+};
+export default function DropzoneShell({ accept, messages, onDrop, hasSelection, multiple, maxFiles, selection, after, }: DropzoneShellProps): import("react").JSX.Element;

package/dist/common/AppDropzoneShell/DropzoneShell.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Dropzone from 'react-dropzone';
+import { useDropzoneMessages, } from './dropzoneMessages';
+import './style.scss';
+export default function DropzoneShell({ accept, messages, onDrop, hasSelection, multiple = false, maxFiles, selection, after, }) {
+    const resolveMessage = useDropzoneMessages(messages);
+    return (_jsxs("div", { className: "dropzone-container", children: [!hasSelection && (_jsx(Dropzone, { onDrop: (acceptedFiles) => {
+                    if (acceptedFiles.length === 0)
+                        return;
+                    onDrop(acceptedFiles);
+                }, accept: accept, multiple: multiple, maxFiles: maxFiles, children: ({ getRootProps, getInputProps }) => (_jsxs("div", { ...getRootProps(), className: "dropzone", children: [_jsx("input", { ...getInputProps() }), _jsx("span", { children: resolveMessage('label.dropzone') })] })) })), hasSelection && selection != null && (_jsx("div", { className: "uploaded-file", children: selection })), after] }));
+}

package/dist/common/AppDropzoneShell/dropzoneMessages.d.ts

@@ -0,0 +1,4 @@
+export type DropzoneMessageKey = 'label.dropzone' | 'label.uploaded.file';
+export type DropzoneMessages = Partial<Record<DropzoneMessageKey, string>>;
+export declare function resolveDropzoneMessage(t: (key: string) => string, messages: DropzoneMessages | undefined, key: DropzoneMessageKey): string;
+export declare function useDropzoneMessages(messages?: DropzoneMessages): (key: DropzoneMessageKey) => string;

package/dist/common/AppDropzoneShell/dropzoneMessages.js

@@ -0,0 +1,9 @@
+import { useTranslation } from 'react-i18next';
+export function resolveDropzoneMessage(t, messages, key) {
+    const customMessage = messages?.[key]?.trim();
+    return customMessage || t(key);
+}
+export function useDropzoneMessages(messages) {
+    const { t } = useTranslation('upload');
+    return (key) => resolveDropzoneMessage(t, messages, key);
+}

package/dist/common/AppDropzoneShell/index.d.ts

@@ -0,0 +1,5 @@
+export { default as AppDropzoneModal } from './AppDropzoneModal';
+export type { AppDropzoneModalProps, AppDropzoneUploadRef, } from './AppDropzoneModal';
+export { default as DropzoneShell } from './DropzoneShell';
+export type { DropzoneShellProps } from './DropzoneShell';
+export { resolveDropzoneMessage, useDropzoneMessages, type DropzoneMessageKey, type DropzoneMessages, } from './dropzoneMessages';

package/dist/common/AppDropzoneShell/index.js

@@ -0,0 +1,3 @@
+export { default as AppDropzoneModal } from './AppDropzoneModal';
+export { default as DropzoneShell } from './DropzoneShell';
+export { resolveDropzoneMessage, useDropzoneMessages, } from './dropzoneMessages';

package/dist/common/AppDropzoneShell/style.scss

@@ -0,0 +1,109 @@
+.dropzone-container {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: var(--spacing-200);
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+
+  .dropzone {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    padding: var(--spacing-700);
+    border-radius: var(--radius-100);
+    border: 2px dashed var(--border-subtle-3);
+    background-color: var(--layer-layer-2);
+    cursor: pointer;
+  }
+
+  .preview {
+    display: block;
+    margin: 0 auto;
+    width: 100%;
+    max-width: 400px;
+    height: auto;
+    aspect-ratio: 1;
+    object-fit: contain;
+  }
+
+  .uploaded-file {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    text-align: center;
+    border: 1px solid var(--border-subtle-3);
+    border-radius: var(--radius-100);
+    padding: var(--spacing-200);
+    gap: var(--spacing-200);
+    overflow-wrap: anywhere;
+
+    .buttons {
+      display: flex;
+      gap: var(--spacing-200);
+      margin-top: var(--spacing-200);
+    }
+  }
+
+  .uploaded-file-list {
+    list-style: none;
+    margin: 0;
+    width: 100%;
+    text-align: left;
+    border: var(--border-default);
+    padding: var(--spacing-100);
+    border-radius: var(--radius-100);
+
+    li {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--spacing-100);
+      padding: var(--spacing-050) 0;
+    }
+  }
+
+  .uploaded-file-remove {
+    flex-shrink: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-size: 1.25rem;
+    line-height: 1;
+    padding: 0 var(--spacing-050);
+    color: var(--text-secondary, inherit);
+  }
+
+  .uploaded-clear-all {
+    align-self: center;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    text-decoration: underline;
+    font: inherit;
+    color: var(--text-link, inherit);
+  }
+
+  .keep-name-checkbox {
+    align-self: flex-start;
+    max-width: 100%;
+    min-width: 0;
+
+    > .MuiCheckbox-root {
+      padding: 0 var(--spacing-100);
+    }
+  }
+}

package/dist/configs/localization/UploadTexts.d.ts

@@ -3,6 +3,7 @@ export declare const UploadTexts: {
         'label.dropzone': string;
         'label.uploaded.file': string;
         'label.confirm': string;
+        'label.clear.all': string;
         'label.keep.original.name': string;
         'modal.title': string;
         'error.uploading.image': string;
@@ -20,6 +21,7 @@ export declare const UploadTexts: {
         'label.dropzone': string;
         'label.uploaded.file': string;
         'label.confirm': string;
+        'label.clear.all': string;
         'label.keep.original.name': string;
         'modal.title': string;
         'error.uploading.image': string;
@@ -37,6 +39,7 @@ export declare const UploadTexts: {
         'label.dropzone': string;
         'label.uploaded.file': string;
         'label.confirm': string;
+        'label.clear.all': string;
         'label.keep.original.name': string;
         'modal.title': string;
         'error.uploading.image': string;

package/dist/configs/localization/UploadTexts.js

@@ -3,6 +3,7 @@ export const UploadTexts = {
         'label.dropzone': 'Drag and drop or click to upload a file',
         'label.uploaded.file': 'You are uploading the following file:',
         'label.confirm': 'Press confirm to continue',
+        'label.clear.all': 'Clear all',
         'label.keep.original.name': 'Keep original file name',
         'modal.title': 'Upload a file',
         'error.uploading.image': 'An error occurred while uploading a file. Contact the administrator.',
@@ -20,6 +21,7 @@ export const UploadTexts = {
         'label.dropzone': 'Arraste e solte ou clique para enviar um arquivo.',
         'label.uploaded.file': 'Você está enviando o seguinte arquivo:',
         'label.confirm': 'Pressione confirmar para continuar',
+        'label.clear.all': 'Limpar tudo',
         'label.keep.original.name': 'Manter o nome original do arquivo',
         'modal.title': 'Upload de arquivo',
         'error.uploading.image': 'Ocorreu um erro ao enviar o arquivo. Entre em contato com o administrador.',
@@ -37,6 +39,7 @@ export const UploadTexts = {
         'label.dropzone': 'Trascina e rilascia o clicca per caricare un file',
         'label.uploaded.file': 'Stai caricando il seguente file:',
         'label.confirm': 'Premi conferma per continuare',
+        'label.clear.all': 'Cancella tutto',
         'label.keep.original.name': 'Mantieni il nome originale del file',
         'modal.title': 'Carica un file',
         'error.uploading.image': "Si è verificato un errore durante il caricamento del file. Contatta l'amministratore.",

package/dist/features/AccessControl/AccessUser/AccessUser.js

@@ -9,7 +9,7 @@ import "./style.scss";
 export default function AccessUser({ mode, resourceUid, user, onClose, onReload, setItems, }) {
     const { t } = useTranslation("access");
     const { getCorpus, hasCorpus } = useCorpusUtils();
-    const showPortal = mode !== "corpus" || (hasCorpus() && getCorpus().opened);
+    const showPortal = mode === "corpus" && hasCorpus() && getCorpus().opened;
     const handleChangeAccess = (r) => {
         setItems((prevState) => {
             if (!prevState)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.47.2",
+  "version": "0.48.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {