@ncds/ui-admin 1.8.16 → 1.8.17

package/dist/types/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/types/src/components/forms-and-input/image-file-input/__tests__/ImageFileInput.test.d.ts

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

package/dist/types/src/components/forms-and-input/image-file-input/components/ImagePreview.d.ts

@@ -1,5 +1,23 @@
 export interface ImagePreviewProps {
-    file: File;
+    /**
+     * Newly selected file. Rendered via object URL.
+     * Either this or `imageUrl` must be provided.
+     */
+    file?: File;
+    /**
+     * URL of an image already stored on the server.
+     * Rendered directly, so no fetch or CORS handling is required.
+     */
+    imageUrl?: string;
+    /**
+     * Alternative text. Falls back to the file name when `file` is given.
+     */
+    alt?: string;
+    /**
+     * Read-only mode. The thumbnail stays visible but the remove button is not
+     * rendered, per DES-SPEC-013 §5.3 (Disabled — 삭제 아이콘 미노출).
+     */
+    disabled?: boolean;
     onRemove: () => void;
 }
-export declare const ImagePreview: ({ file, onRemove }: ImagePreviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ImagePreview: ({ file, imageUrl, alt, disabled, onRemove }: ImagePreviewProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/types/src/hooks/__tests__/useObjectUrl.test.d.ts

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

package/dist/types/src/hooks/index.d.ts

@@ -4,3 +4,4 @@ export * from './useFloatingPosition';
 export * from './useIsomorphicLayoutEffect';
 export * from './useMediaQuery';
 export * from './useMergeRefs';
+export * from './useObjectUrl';

package/dist/types/src/hooks/useObjectUrl.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ */
+export declare const useObjectUrl: (file?: File) => string | null;

package/dist/ui-admin/assets/styles/style.css

@@ -973,7 +973,7 @@ button {
   background-color: var(--gray-100);
   border-radius: 4px;
 }
-.ncua-checkbox-input:has(input:checked)::before, .ncua-checkbox-input.has-indeterminate::before {
+.ncua-checkbox-input:has(input:checked)::before, .ncua-checkbox-input:has(input:indeterminate)::before, .ncua-checkbox-input.has-indeterminate::before {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -992,14 +992,14 @@ button {
 .ncua-checkbox-input:has(input:disabled:checked)::before {
   background-image: var(--check-icon-disabled);
 }
-.ncua-checkbox-input.has-indeterminate :where(input) {
+.ncua-checkbox-input:has(input:indeterminate) :where(input), .ncua-checkbox-input.has-indeterminate :where(input) {
   border-color: var(--gray-700);
   background-color: var(--gray-50);
 }
-.ncua-checkbox-input.has-indeterminate::before {
+.ncua-checkbox-input:has(input:indeterminate)::before, .ncua-checkbox-input.has-indeterminate::before {
   background-image: var(--indeterminate-icon);
 }
-.ncua-checkbox-input.has-indeterminate:has(input:disabled)::before {
+.ncua-checkbox-input:has(input:indeterminate):has(input:disabled)::before, .ncua-checkbox-input.has-indeterminate:has(input:disabled)::before {
   background-image: var(--indeterminate-icon-disabled);
 }
 
@@ -6764,6 +6764,14 @@ button {
   line-height: var(--line-heights-xs);
   color: var(--gray-500);
 }
+.ncua-data-grid__summary-count {
+  color: var(--primary-red-500);
+  font-weight: 700;
+}
+.ncua-data-grid__summary-actions {
+  display: flex;
+  gap: var(--spacing-xs);
+}
 .ncua-data-grid__table-wrapper {
   border: 1px solid var(--gray-100);
   border-radius: var(--border-radius-md);
@@ -6811,6 +6819,14 @@ button {
 .ncua-data-grid__action-bar--space-between {
   justify-content: space-between;
 }
+.ncua-data-grid__action-bar-group {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-s);
+}
+.ncua-data-grid__action-bar-group--right {
+  gap: var(--spacing-xs);
+}
 .ncua-data-grid__table {
   width: 100%;
   position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.8.16",
+  "version": "1.8.17",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",