@ncds/ui-admin 1.8.16 → 1.8.17

package/dist/cjs/src/hooks/index.js

@@ -68,4 +68,15 @@ Object.keys(_useMergeRefs).forEach(function (key) {
       return _useMergeRefs[key];
     }
   });
+});
+var _useObjectUrl = require("./useObjectUrl");
+Object.keys(_useObjectUrl).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useObjectUrl[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useObjectUrl[key];
+    }
+  });
 });

package/dist/cjs/src/hooks/useObjectUrl.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useObjectUrl = void 0;
+var _react = require("react");
+var _useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect");
+/**
+ * Creates an object URL for a file and revokes it when the file changes
+ * or the component unmounts.
+ *
+ * Calling `URL.createObjectURL` inline while rendering mints a new blob URL on
+ * every re-render and never releases it, so the browser holds every one of them
+ * for the lifetime of the document. Creating it in an effect gives us a cleanup
+ * hook to revoke on.
+ *
+ * A layout effect is used so the URL is in place before the browser paints —
+ * with a plain effect the image would blink out for a frame whenever the
+ * component remounts (for example when a sibling is removed and keys shift).
+ *
+ * Returns `null` while no file is given.
+ */
+const useObjectUrl = file => {
+  const [objectUrl, setObjectUrl] = (0, _react.useState)(null);
+  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
+    if (!file) {
+      setObjectUrl(null);
+      return;
+    }
+    const createdUrl = URL.createObjectURL(file);
+    setObjectUrl(createdUrl);
+    return () => {
+      URL.revokeObjectURL(createdUrl);
+    };
+  }, [file]);
+  return objectUrl;
+};
+exports.useObjectUrl = useObjectUrl;

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

@@ -2,16 +2,35 @@ 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 = _ref2 => {
+  let {
+    file
+  } = _ref2;
+  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 = /*#__PURE__*/forwardRef((_ref2, _ref) => {
+export const FileInput = /*#__PURE__*/forwardRef((_ref3, _ref) => {
   let {
     size = 'xs',
     accept,
@@ -31,8 +50,9 @@ export const FileInput = /*#__PURE__*/forwardRef((_ref2, _ref) => {
     isRequired,
     showHelpIcon,
     hintText,
+    showFileTags = true,
     ...props
-  } = _ref2;
+  } = _ref3;
   const fileInputRef = useRef(null);
   const [internalFiles, setInternalFiles] = useState([]);
   // Determine if component is controlled or uncontrolled
@@ -108,7 +128,7 @@ export const FileInput = /*#__PURE__*/forwardRef((_ref2, _ref) => {
     updateFiles(newFiles);
   };
   const renderFileTagList = () => {
-    if (files.length === 0) return null;
+    if (!showFileTags || files.length === 0) return null;
     return _jsx("div", {
       className: "ncua-file-input__file-tags",
       children: files.map((file, index) => _jsxs("div", {
@@ -118,10 +138,8 @@ export const FileInput = /*#__PURE__*/forwardRef((_ref2, _ref) => {
           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.type.startsWith('image/') && _jsx(FileTagImage, {
+          file: file
         })]
       }, `${file.name}-${index}`))
     });

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

@@ -0,0 +1,165 @@
+// @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) {
+  let extraProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  const render = () => {
+    act(() => {
+      root.render(/*#__PURE__*/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/esm/src/components/forms-and-input/image-file-input/ImageFileInput.js

@@ -30,6 +30,8 @@ export const ImageFileInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     maxFileCount,
     value,
     onChange,
+    uploadedFiles = [],
+    onUploadedFilesChange,
     onFileSelect,
     onFail,
     buttonLabel = '파일 찾기',
@@ -54,6 +56,9 @@ export const ImageFileInput = /*#__PURE__*/forwardRef((_ref, ref) => {
   // 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) {
@@ -75,32 +80,57 @@ export const ImageFileInput = /*#__PURE__*/forwardRef((_ref, ref) => {
       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;
-      }
-      if (!!maxFileSize && file.size > maxFileSize) {
-        invalidFiles.push(toInvalidFile(file, ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE));
-        continue;
-      }
-      // 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;
+      const rejectionReason = findRejectionReason(file, validFiles.length);
+      if (rejectionReason) {
+        invalidFiles.push(toInvalidFile(file, rejectionReason));
+      } else {
+        validFiles.push(file);
       }
-      validFiles.push(file);
     }
     return {
       validFiles,
@@ -117,13 +147,28 @@ export const ImageFileInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     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 = function () {
     let files = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    const showEmptySlot = maxFileCount ? files.length < maxFileCount : files.length === 0;
+    const totalCount = visibleUploadedFiles.length + files.length;
+    const showEmptySlot = maxFileCount ? totalCount < maxFileCount : totalCount === 0;
     return _jsxs("div", {
       className: "ncua-image-file-input__previews",
-      children: [files.map((file, index) => _jsx(ImagePreview, {
+      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",
@@ -199,4 +244,11 @@ export const ImageFileInput = /*#__PURE__*/forwardRef((_ref, ref) => {
       }), 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 };