@ncds/ui-admin 1.8.16 → 1.8.18

package/dist/temp/src/components/forms-and-input/file-input/FileInput.js

@@ -2,16 +2,29 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HelpCircle, Upload01 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
+import { useObjectUrl } from '../../../hooks/useObjectUrl';
 import { Button } from '../../action/button';
 import { Tag } from '../../feedback-and-status/tag/Tag';
 import { HintText, Label } from '../../shared';
+/**
+ * Thumbnail next to a file tag.
+ *
+ * Split out so the object URL can live in a hook — hooks cannot be called
+ * from inside the file list's map callback.
+ */
+const FileTagImage = ({ file }) => {
+    const objectUrl = useObjectUrl(file);
+    if (!objectUrl)
+        return null;
+    return _jsx("img", { className: "ncua-file-input__file-image", src: objectUrl, alt: file.name });
+};
 export var FileInputErrorType;
 (function (FileInputErrorType) {
     FileInputErrorType["ALREADY_UPLOADED"] = "ALREADY_UPLOADED";
     FileInputErrorType["EXCEED_MAX_FILE_SIZE"] = "EXCEED_MAX_FILE_SIZE";
     FileInputErrorType["EXCEED_MAX_FILE_COUNT"] = "EXCEED_MAX_FILE_COUNT";
 })(FileInputErrorType || (FileInputErrorType = {}));
-export const FileInput = forwardRef(({ size = 'xs', accept, multiple = false, maxFileSize, maxFileCount, value, onChange, onFileSelect, onFail, buttonLabel = '파일 찾기', disabled, label, hintItems, validation, destructive, isRequired, showHelpIcon, hintText, ...props }, _ref) => {
+export const FileInput = forwardRef(({ size = 'xs', accept, multiple = false, maxFileSize, maxFileCount, value, onChange, onFileSelect, onFail, buttonLabel = '파일 찾기', disabled, label, hintItems, validation, destructive, isRequired, showHelpIcon, hintText, showFileTags = true, ...props }, _ref) => {
     const fileInputRef = useRef(null);
     const [internalFiles, setInternalFiles] = useState([]);
     // Determine if component is controlled or uncontrolled
@@ -74,9 +87,9 @@ export const FileInput = forwardRef(({ size = 'xs', accept, multiple = false, ma
         updateFiles(newFiles);
     };
     const renderFileTagList = () => {
-        if (files.length === 0)
+        if (!showFileTags || files.length === 0)
             return null;
-        return (_jsx("div", { className: "ncua-file-input__file-tags", children: files.map((file, index) => (_jsxs("div", { className: "ncua-file-input__file-tag-container", children: [_jsx(Tag, { text: file.name, size: size === 'xs' ? 'sm' : 'md', close: true, onButtonClick: () => handleRemoveFile(index) }), file.type.startsWith('image/') && (_jsx("img", { className: "ncua-file-input__file-image", src: URL.createObjectURL(file), alt: file.name }))] }, `${file.name}-${index}`))) }));
+        return (_jsx("div", { className: "ncua-file-input__file-tags", children: files.map((file, index) => (_jsxs("div", { className: "ncua-file-input__file-tag-container", children: [_jsx(Tag, { text: file.name, size: size === 'xs' ? 'sm' : 'md', close: true, onButtonClick: () => handleRemoveFile(index) }), file.type.startsWith('image/') && _jsx(FileTagImage, { file: file })] }, `${file.name}-${index}`))) }));
     };
     const renderHintList = () => {
         if (!hintItems || hintItems.length === 0)

package/dist/temp/src/components/forms-and-input/file-input/__tests__/FileInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/temp/src/components/forms-and-input/file-input/__tests__/FileInput.test.js

@@ -0,0 +1,139 @@
+// @vitest-environment jsdom
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { FileInput } from '../FileInput';
+const originalCreateObjectURL = URL.createObjectURL;
+const originalRevokeObjectURL = URL.revokeObjectURL;
+let createObjectURL;
+let revokeObjectURL;
+beforeEach(() => {
+    let issued = 0;
+    createObjectURL = vi.fn(() => `blob:mock/${++issued}`);
+    revokeObjectURL = vi.fn();
+    URL.createObjectURL = createObjectURL;
+    URL.revokeObjectURL = revokeObjectURL;
+});
+afterEach(() => {
+    URL.createObjectURL = originalCreateObjectURL;
+    URL.revokeObjectURL = originalRevokeObjectURL;
+});
+/** 내용은 검증 대상이 아니므로 최소 크기만 채운다 */
+const DUMMY_FILE_BYTES = 4;
+const makeFile = (name, type) => new File([new Uint8Array(DUMMY_FILE_BYTES)], name, { type });
+function mountFileInput(files, extraProps = {}) {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    const render = () => {
+        act(() => {
+            root.render(createElement(FileInput, { value: files, onChange: () => undefined, ...extraProps }));
+        });
+    };
+    render();
+    const unmount = () => {
+        act(() => {
+            root.unmount();
+        });
+        container.remove();
+    };
+    return { container, render, unmount };
+}
+describe('FileInput — 이미지 썸네일 object URL 해제', () => {
+    it('이미지 파일의 썸네일을 렌더한다', () => {
+        const view = mountFileInput([makeFile('a.jpg', 'image/jpeg')]);
+        const img = view.container.querySelector('.ncua-file-input__file-image');
+        expect(img).not.toBeNull();
+        expect(img?.getAttribute('src')).toBe('blob:mock/1');
+        expect(img?.getAttribute('alt')).toBe('a.jpg');
+        view.unmount();
+    });
+    it('리렌더를 반복해도 파일당 object URL을 한 번만 만든다', () => {
+        const view = mountFileInput([makeFile('a.jpg', 'image/jpeg')]);
+        view.render();
+        view.render();
+        view.render();
+        expect(createObjectURL).toHaveBeenCalledTimes(1);
+        view.unmount();
+    });
+    it('언마운트하면 만들었던 object URL을 해제한다', () => {
+        const view = mountFileInput([makeFile('a.jpg', 'image/jpeg')]);
+        expect(revokeObjectURL).not.toHaveBeenCalled();
+        view.unmount();
+        expect(revokeObjectURL).toHaveBeenCalledTimes(1);
+        expect(revokeObjectURL).toHaveBeenCalledWith('blob:mock/1');
+    });
+    it('이미지가 아닌 파일에는 object URL을 만들지 않는다', () => {
+        const view = mountFileInput([makeFile('doc.pdf', 'application/pdf')]);
+        expect(createObjectURL).not.toHaveBeenCalled();
+        expect(view.container.querySelector('.ncua-file-input__file-image')).toBeNull();
+        view.unmount();
+    });
+    it('이미지가 여러 개면 각각 하나씩만 만들고 언마운트 시 모두 해제한다', () => {
+        const view = mountFileInput([makeFile('a.jpg', 'image/jpeg'), makeFile('b.png', 'image/png')]);
+        expect(createObjectURL).toHaveBeenCalledTimes(2);
+        view.unmount();
+        expect(revokeObjectURL).toHaveBeenCalledTimes(2);
+    });
+});
+/** 숨겨진 file input 에 파일을 넣고 change 를 발생시킨다 */
+function selectFiles(container, files) {
+    const input = container.querySelector('input[type="file"]');
+    if (!input)
+        throw new Error('file input을 찾을 수 없다');
+    Object.defineProperty(input, 'files', { value: files, configurable: true });
+    act(() => {
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+}
+describe('FileInput — showFileTags', () => {
+    it('기본값에서는 파일 태그 목록을 렌더한다', () => {
+        const view = mountFileInput([makeFile('doc.pdf', 'application/pdf')]);
+        expect(view.container.querySelector('.ncua-file-input__file-tags')).not.toBeNull();
+        expect(view.container.querySelector('.ncua-tag')).not.toBeNull();
+        view.unmount();
+    });
+    it('false면 파일 태그 목록을 렌더하지 않는다', () => {
+        const view = mountFileInput([makeFile('doc.pdf', 'application/pdf')], { showFileTags: false });
+        expect(view.container.querySelector('.ncua-file-input__file-tags')).toBeNull();
+        expect(view.container.querySelector('.ncua-tag')).toBeNull();
+        view.unmount();
+    });
+    it('false여도 파일 찾기 버튼과 안내 문구는 그대로 렌더한다', () => {
+        const view = mountFileInput([makeFile('doc.pdf', 'application/pdf')], {
+            showFileTags: false,
+            hintItems: ['파일은 5MB 이내입니다.'],
+        });
+        expect(view.container.querySelector('.ncua-btn')).not.toBeNull();
+        expect(view.container.querySelector('.ncua-file-input__hint-list')?.textContent).toContain('5MB');
+        view.unmount();
+    });
+    it('false면 이미지 썸네일 object URL을 만들지 않는다', () => {
+        const view = mountFileInput([makeFile('a.jpg', 'image/jpeg')], { showFileTags: false });
+        expect(createObjectURL).not.toHaveBeenCalled();
+        expect(view.container.querySelector('.ncua-file-input__file-image')).toBeNull();
+        view.unmount();
+    });
+    it('false여도 선택한 파일을 onChange로 전달한다', () => {
+        const onChange = vi.fn();
+        const view = mountFileInput([], { showFileTags: false, onChange });
+        const picked = makeFile('a.pdf', 'application/pdf');
+        selectFiles(view.container, [picked]);
+        expect(onChange).toHaveBeenCalledTimes(1);
+        expect(onChange).toHaveBeenCalledWith([picked]);
+        view.unmount();
+    });
+    it('false여도 이미 등록된 파일은 중복으로 걸러 onFail로 알린다', () => {
+        const already = makeFile('a.pdf', 'application/pdf');
+        const onChange = vi.fn();
+        const onFail = vi.fn();
+        const view = mountFileInput([already], { showFileTags: false, onChange, onFail });
+        selectFiles(view.container, [makeFile('a.pdf', 'application/pdf')]);
+        expect(onChange).toHaveBeenCalledWith([already]);
+        expect(onFail).toHaveBeenCalledTimes(1);
+        expect(onFail.mock.calls[0][0]).toHaveLength(1);
+        expect(onFail.mock.calls[0][0][0].errorType).toBe('ALREADY_UPLOADED');
+        view.unmount();
+    });
+});

package/dist/temp/src/components/forms-and-input/image-file-input/ImageFileInput.d.ts

@@ -1,5 +1,17 @@
-import { type InvalidFile } from '../file-input/FileInput';
+import { FileInputErrorType as ImageFileInputErrorType, type InvalidFile } from '../file-input/FileInput';
 import type { InputBaseProps } from '../input-base/InputBase';
+/**
+ * An image already stored on the server, identified by its URL.
+ *
+ * Mirrors the vanilla implementation's `UploadedFile`
+ * (assets/scripts/imageFileInput/const/types.ts), with two deliberate differences:
+ * the name is prefixed because this one is re-exported from the package root,
+ * and `fileImageUrl` is required — a preview entry without a URL has nothing to render.
+ */
+export type ImageUploadedFile = {
+    fileName: string;
+    fileImageUrl: string;
+};
 export interface ImageFileInputProps extends Omit<InputBaseProps, 'clearText' | 'onClearText' | 'hintText' | 'value' | 'onChange'> {
     /**
      * Accepted file types
@@ -22,6 +34,19 @@ export interface ImageFileInputProps extends Omit<InputBaseProps, 'clearText' |
      * Callback when files change (controlled mode)
      */
     onChange?: (files: File[]) => void;
+    /**
+     * Images already stored on the server, shown before newly selected files.
+     * Rendered straight from their URL, so no fetch or CORS handling is needed.
+     */
+    uploadedFiles?: ImageUploadedFile[];
+    /**
+     * Callback when a stored image is removed. Receives the remaining list.
+     *
+     * `uploadedFiles` is a controlled prop — just like `value`/`onChange`, removal
+     * only takes effect once the caller applies this list back. Passing
+     * `uploadedFiles` without this callback leaves the previews frozen.
+     */
+    onUploadedFilesChange?: (uploadedFiles: ImageUploadedFile[]) => void;
     /**
      * Callback when files are selected (uncontrolled mode)
      */
@@ -68,3 +93,10 @@ export interface ImageFileInputProps extends Omit<InputBaseProps, 'clearText' |
     showFileInput?: boolean;
 }
 export declare const ImageFileInput: import("react").ForwardRefExoticComponent<ImageFileInputProps & import("react").RefAttributes<HTMLInputElement>>;
+/**
+ * Rejection reasons reported through `onFail`.
+ *
+ * Re-exported under the ImageFileInput name so callers do not have to reach
+ * into FileInput for it. Same enum, same values.
+ */
+export { ImageFileInputErrorType };

package/dist/temp/src/components/forms-and-input/image-file-input/ImageFileInput.js

@@ -19,7 +19,7 @@ const toInvalidFile = (file, errorType) => ({
     slice: (...args) => file.slice(...args),
     errorType,
 });
-export const ImageFileInput = forwardRef(({ size = 'sm', accept, multiple = false, maxFileSize, maxFileCount, value, onChange, onFileSelect, onFail, buttonLabel = '파일 찾기', imagePreviewTooltipLabel = '이미지 업로드', disabled, label, hintItems, validation, destructive, isRequired, showHelpIcon, hintText, showFileTagList = true, showHintText = true, showFileInput = true, ...props }, ref) => {
+export const ImageFileInput = forwardRef(({ size = 'sm', accept, multiple = false, maxFileSize, maxFileCount, value, onChange, uploadedFiles = [], onUploadedFilesChange, onFileSelect, onFail, buttonLabel = '파일 찾기', imagePreviewTooltipLabel = '이미지 업로드', disabled, label, hintItems, validation, destructive, isRequired, showHelpIcon, hintText, showFileTagList = true, showHintText = true, showFileInput = true, ...props }, ref) => {
     const fileInputRef = useRef(null);
     useImperativeHandle(ref, () => fileInputRef.current);
     const [internalFiles, setInternalFiles] = useState([]);
@@ -27,6 +27,9 @@ export const ImageFileInput = forwardRef(({ size = 'sm', accept, multiple = fals
     // Determine if component is controlled or uncontrolled
     const isControlled = value !== undefined;
     const files = isControlled ? value : internalFiles;
+    // An entry without a URL has nothing to render, so it must not occupy a slot either.
+    // TypeScript requires fileImageUrl, but CDN/vanilla consumers are untyped.
+    const visibleUploadedFiles = uploadedFiles.filter((uploadedFile) => Boolean(uploadedFile.fileImageUrl));
     // Sync internal state with controlled value
     useEffect(() => {
         if (isControlled && value) {
@@ -47,32 +50,58 @@ export const ImageFileInput = forwardRef(({ size = 'sm', accept, multiple = fals
         if (!selectedFiles || selectedFiles.length === 0)
             return;
         const { validFiles, invalidFiles } = validateFiles(Array.from(selectedFiles));
-        // Replace existing file if maxFileCount is 1
-        const nextFiles = maxFileCount === 1 ? validFiles : [...files, ...validFiles];
-        updateFiles(nextFiles);
+        // Nothing passed validation — keep what the caller already had.
+        // Without this, a single slot would be overwritten with an empty list.
+        if (validFiles.length > 0) {
+            // Replace existing file if maxFileCount is 1
+            const nextFiles = maxFileCount === 1 ? validFiles : [...files, ...validFiles];
+            updateFiles(nextFiles);
+            // A single slot holds one image, so a new selection also clears the stored one.
+            // Entries we never rendered occupy no slot, so they are left in the caller's list.
+            if (maxFileCount === 1 && visibleUploadedFiles.length > 0) {
+                onUploadedFilesChange?.(uploadedFiles.filter((uploadedFile) => !uploadedFile.fileImageUrl));
+            }
+        }
         if (onFail && invalidFiles.length > 0) {
             onFail(invalidFiles);
         }
         event.target.value = '';
     };
+    /**
+     * Returns why a file must be rejected, or null when it is acceptable.
+     * `acceptedCount` is how many files of the same selection already passed.
+     */
+    const findRejectionReason = (file, acceptedCount) => {
+        if (files.some((f) => f.name === file.name && f.size === file.size)) {
+            return ImageFileInputErrorType.ALREADY_UPLOADED;
+        }
+        // Stored images carry no size, so they can only be matched by name.
+        // A single slot is meant to be replaced, so re-picking the same name is allowed there.
+        if (maxFileCount !== 1 && visibleUploadedFiles.some((uploadedFile) => uploadedFile.fileName === file.name)) {
+            return ImageFileInputErrorType.ALREADY_UPLOADED;
+        }
+        if (!!maxFileSize && file.size > maxFileSize) {
+            return ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE;
+        }
+        // Skip max count check if maxFileCount is 1 (allow replacement).
+        // Stored images occupy slots too, so they count toward the limit.
+        const usedSlots = visibleUploadedFiles.length + files.length + acceptedCount;
+        if (!!maxFileCount && maxFileCount !== 1 && usedSlots >= maxFileCount) {
+            return ImageFileInputErrorType.EXCEED_MAX_FILE_COUNT;
+        }
+        return null;
+    };
     const validateFiles = (fileList) => {
         const validFiles = [];
         const invalidFiles = [];
         for (const file of fileList) {
-            if (files.some((f) => f.name === file.name && f.size === file.size)) {
-                invalidFiles.push(toInvalidFile(file, ImageFileInputErrorType.ALREADY_UPLOADED));
-                continue;
+            const rejectionReason = findRejectionReason(file, validFiles.length);
+            if (rejectionReason) {
+                invalidFiles.push(toInvalidFile(file, rejectionReason));
             }
-            if (!!maxFileSize && file.size > maxFileSize) {
-                invalidFiles.push(toInvalidFile(file, ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE));
-                continue;
+            else {
+                validFiles.push(file);
             }
-            // Skip max count check if maxFileCount is 1 (allow replacement)
-            if (!!maxFileCount && maxFileCount !== 1 && files.length + validFiles.length >= maxFileCount) {
-                invalidFiles.push(toInvalidFile(file, ImageFileInputErrorType.EXCEED_MAX_FILE_COUNT));
-                continue;
-            }
-            validFiles.push(file);
         }
         return { validFiles, invalidFiles };
     };
@@ -86,9 +115,18 @@ export const ImageFileInput = forwardRef(({ size = 'sm', accept, multiple = fals
         newFiles.splice(index, 1);
         updateFiles(newFiles);
     };
+    // Removed by identity, not index, so keys stay stable and the caller's
+    // untouched entries (including ones we skip rendering) are preserved
+    const handleRemoveUploadedFile = (target) => {
+        onUploadedFilesChange?.(uploadedFiles.filter((uploadedFile) => uploadedFile !== target));
+    };
     const renderImagePreview = (files = []) => {
-        const showEmptySlot = maxFileCount ? files.length < maxFileCount : files.length === 0;
-        return (_jsxs("div", { className: "ncua-image-file-input__previews", children: [files.map((file, index) => (_jsx(ImagePreview, { file: file, onRemove: () => handleRemoveFile(index) }, `${file.name}-${index}`))), showEmptySlot && (_jsxs("div", { className: "ncua-image-file-input__empty-slot-wrapper", onMouseEnter: () => !disabled && setIsButtonHovered(true), onMouseLeave: () => setIsButtonHovered(false), onClick: handleBrowseClick, children: [_jsx(Button, { onlyIcon: true, size: size, className: classNames('ncua-image-file-input__preview-container'), onClick: handleBrowseClick, disabled: disabled, label: imagePreviewTooltipLabel }), _jsx(Tooltip, { content: imagePreviewTooltipLabel, position: "bottom", tooltipType: "black", forceVisible: isButtonHovered && !disabled, panelClassName: classNames('ncua-image-file-input__slot-tooltip', `ncua-image-file-input__slot-tooltip--${size}`) })] }))] }));
+        const totalCount = visibleUploadedFiles.length + files.length;
+        const showEmptySlot = maxFileCount ? totalCount < maxFileCount : totalCount === 0;
+        return (_jsxs("div", { className: "ncua-image-file-input__previews", children: [visibleUploadedFiles.map((uploadedFile, index) => (_jsx(ImagePreview
+                // Removal is by identity, so the index here only breaks ties between
+                // entries that share both URL and file name.
+                , { imageUrl: uploadedFile.fileImageUrl, alt: uploadedFile.fileName, disabled: disabled, onRemove: () => handleRemoveUploadedFile(uploadedFile) }, `uploaded-${index}-${uploadedFile.fileImageUrl}-${uploadedFile.fileName}`))), files.map((file, index) => (_jsx(ImagePreview, { file: file, disabled: disabled, onRemove: () => handleRemoveFile(index) }, `${file.name}-${index}`))), showEmptySlot && (_jsxs("div", { className: "ncua-image-file-input__empty-slot-wrapper", onMouseEnter: () => !disabled && setIsButtonHovered(true), onMouseLeave: () => setIsButtonHovered(false), onClick: handleBrowseClick, children: [_jsx(Button, { onlyIcon: true, size: size, className: classNames('ncua-image-file-input__preview-container'), onClick: handleBrowseClick, disabled: disabled, label: imagePreviewTooltipLabel }), _jsx(Tooltip, { content: imagePreviewTooltipLabel, position: "bottom", tooltipType: "black", forceVisible: isButtonHovered && !disabled, panelClassName: classNames('ncua-image-file-input__slot-tooltip', `ncua-image-file-input__slot-tooltip--${size}`) })] }))] }));
     };
     const renderHintList = () => {
         if (!hintItems || hintItems.length === 0)
@@ -97,3 +135,10 @@ export const ImageFileInput = forwardRef(({ size = 'sm', accept, multiple = fals
     };
     return (_jsxs("div", { className: classNames('ncua-image-file-input', `ncua-image-file-input--${size}`, { destructive: destructive }), children: [renderImagePreview(files), _jsx("input", { hidden: true, ref: fileInputRef, type: "file", accept: accept, multiple: multiple, onChange: handleFileChange, tabIndex: -1, "aria-hidden": "true", ...props }), showFileInput && (_jsxs("div", { className: classNames('ncua-file-input', `ncua-file-input--${size}`), children: [_jsxs("div", { className: "ncua-file-input__input-container", children: [_jsxs("div", { className: "ncua-file-input__label", children: [_jsx(Label, { isRequired: isRequired, children: label }), showHelpIcon && _jsx(HelpCircle, { className: "ncua-input__help-icon" })] }), _jsx(Button, { size: "xs", onClick: handleBrowseClick, disabled: disabled, leadingIcon: { type: 'icon', icon: Upload01 }, label: buttonLabel }), showHintText && hintText && _jsx(HintText, { destructive: destructive, children: hintText })] }), showHintText && renderHintList()] }))] }));
 });
+/**
+ * Rejection reasons reported through `onFail`.
+ *
+ * Re-exported under the ImageFileInput name so callers do not have to reach
+ * into FileInput for it. Same enum, same values.
+ */
+export { ImageFileInputErrorType };

package/dist/temp/src/components/forms-and-input/image-file-input/__tests__/ImageFileInput.test.d.ts

@@ -0,0 +1 @@
+export {};