@ncds/ui-admin 1.8.16 → 1.8.18

package/dist/temp/src/components/forms-and-input/range-date-picker-with-buttons/__tests__/RangeDatePickerWithButtons.test.js

@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { createElement } from 'react';
+import { createElement, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
 import { afterEach, describe, expect, it, vi } from 'vitest';
@@ -40,3 +40,192 @@ describe('#6 periodItems 에 없는 periodKey 방어', () => {
         expect(container.textContent).toContain('오늘');
     });
 });
+describe('#9 allowInput 타이핑 → onDateValidation (#410)', () => {
+    const START_DATE = '2026-03-10';
+    const END_DATE = '2026-03-20';
+    /** 시작일보다 이전 — 종료일에 넣으면 overlap */
+    const TYPED_END_DATE = '2026-03-01';
+    /** 실제 사용처처럼 부모가 state 를 들고 controlled 로 쓰는 래퍼.
+     *  bump() 로 날짜와 무관한 리렌더를 임의 시점에 끼워 넣을 수 있다. */
+    function mountHarness(onDateValidation) {
+        let bump;
+        const Harness = () => {
+            const [start, setStart] = useState(START_DATE);
+            const [end, setEnd] = useState(END_DATE);
+            const [, setTick] = useState(0);
+            const [buttonId, setButtonId] = useState('NONE');
+            bump = () => setTick((tick) => tick + 1);
+            return createElement(RangeDatePickerWithButtons, {
+                currentButtonId: buttonId,
+                setCurrentButtonId: setButtonId,
+                periodKeys: ['ENTIRE', 'TODAY'],
+                startDateOptions: { currentDate: start, onChangeDate: setStart, datePickerOptions: { allowInput: true } },
+                endDateOptions: { currentDate: end, onChangeDate: setEnd, datePickerOptions: { allowInput: true } },
+                onDateValidation,
+            });
+        };
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        const root = createRoot(container);
+        act(() => {
+            root.render(createElement(Harness));
+        });
+        mounted.push({ root, container });
+        const inputs = Array.from(container.querySelectorAll('input.flatpickr-input'));
+        return { endInput: inputs[1], bump: () => bump?.() };
+    }
+    const typeChar = (input, char) => {
+        act(() => {
+            input.value = `${input.value}${char}`;
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+    };
+    it('종료일에 시작일 이전 날짜를 타이핑하면 overlap 을 통지한다', () => {
+        const onDateValidation = vi.fn();
+        const { endInput } = mountHarness(onDateValidation);
+        onDateValidation.mockClear();
+        endInput.value = '';
+        for (const char of TYPED_END_DATE) {
+            typeChar(endInput, char);
+        }
+        expect(onDateValidation).toHaveBeenCalledWith({
+            type: 'end',
+            errorType: 'overlap',
+            newDate: START_DATE,
+            currentDate: TYPED_END_DATE,
+        });
+    });
+    it('blur 없이 통지하므로, 통지 이후 부모가 리렌더돼도 결과가 뒤집히지 않는다', () => {
+        const onDateValidation = vi.fn();
+        const { endInput, bump } = mountHarness(onDateValidation);
+        onDateValidation.mockClear();
+        endInput.value = '';
+        for (const char of TYPED_END_DATE) {
+            typeChar(endInput, char);
+        }
+        onDateValidation.mockClear();
+        // 날짜와 무관한 리렌더가 뒤따라도 통지된 값이 유지된다
+        act(() => {
+            bump();
+        });
+        expect(endInput.value).toBe(TYPED_END_DATE);
+    });
+    /**
+     * 알려진 한계: 날짜를 다 치기 전에 리렌더가 끼면 react-flatpickr 가 input 을 부모 값으로 덮는다.
+     * (static:true 라 wrapper 를 헐고 다시 만들면서 input DOM 이 이동해 포커스까지 빠진다.)
+     * 통지 자체는 blur 를 안 기다리므로 위 케이스와 무관하지만, 이 구간은 여전히 취약하다.
+     */
+    it('입력이 완성되기 전 리렌더가 끼면 입력값이 부모 값으로 되돌아간다 (알려진 한계)', () => {
+        const onDateValidation = vi.fn();
+        const { endInput, bump } = mountHarness(onDateValidation);
+        endInput.value = '';
+        for (const char of TYPED_END_DATE.slice(0, -1)) {
+            typeChar(endInput, char);
+        }
+        act(() => {
+            bump();
+        });
+        expect(endInput.value).toBe(END_DATE);
+    });
+});
+describe('#10 같은 날짜를 다시 입력해도 통지된다 (#410 재보고)', () => {
+    const START_DATE = '2026-08-10';
+    const END_DATE = '2026-08-20';
+    /** 시작일 이전 — overlap */
+    const TYPED_END_DATE = '2026-08-06';
+    const typeChars = (input, text) => {
+        input.value = '';
+        for (const char of text) {
+            act(() => {
+                input.value = `${input.value}${char}`;
+                input.dispatchEvent(new Event('input', { bubbles: true }));
+            });
+        }
+    };
+    it('overlap 통지를 받고 종료일을 되돌린 뒤 같은 날짜를 다시 쳐도 매번 통지한다', () => {
+        const onDateValidation = vi.fn();
+        // 실제 사용처 패턴: overlap 을 받으면 알럿 대신 종료일을 원래대로 되돌린다
+        const Harness = () => {
+            const [start, setStart] = useState(START_DATE);
+            const [end, setEnd] = useState(END_DATE);
+            const [buttonId, setButtonId] = useState('NONE');
+            return createElement(RangeDatePickerWithButtons, {
+                currentButtonId: buttonId,
+                setCurrentButtonId: setButtonId,
+                periodKeys: ['ENTIRE', 'TODAY'],
+                startDateOptions: { currentDate: start, onChangeDate: setStart, datePickerOptions: { allowInput: true } },
+                endDateOptions: { currentDate: end, onChangeDate: setEnd, datePickerOptions: { allowInput: true } },
+                onDateValidation: (params) => {
+                    onDateValidation(params);
+                    if (params.type === 'end' && params.errorType === 'overlap')
+                        setEnd(END_DATE);
+                },
+            });
+        };
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        const root = createRoot(container);
+        act(() => {
+            root.render(createElement(Harness));
+        });
+        mounted.push({ root, container });
+        const endInput = Array.from(container.querySelectorAll('input.flatpickr-input'))[1];
+        onDateValidation.mockClear();
+        // 종전에는 lastNotifiedDate 가 부모 갱신 후에도 남아 있어 2회차부터 통지가 끊겼다
+        const ATTEMPT_COUNT = 3;
+        const firedPerAttempt = [];
+        for (let attempt = 0; attempt < ATTEMPT_COUNT; attempt++) {
+            const before = onDateValidation.mock.calls.length;
+            typeChars(endInput, TYPED_END_DATE);
+            firedPerAttempt.push(onDateValidation.mock.calls.length - before);
+        }
+        expect(firedPerAttempt).toEqual([1, 1, 1]);
+    });
+});
+describe('#11 통지 후 사용처가 날짜를 되돌려도 입력 칸의 포커스가 유지된다 (#416)', () => {
+    const START_DATE = '2026-08-10';
+    const END_DATE = '2026-08-20';
+    /** 시작일 이전 — overlap */
+    const TYPED_END_DATE = '2026-08-06';
+    it('overlap 통지 → 되돌리기 후에도 input 이 포커스를 잃지 않는다', () => {
+        const Harness = () => {
+            const [start, setStart] = useState(START_DATE);
+            const [end, setEnd] = useState(END_DATE);
+            const [buttonId, setButtonId] = useState('NONE');
+            return createElement(RangeDatePickerWithButtons, {
+                currentButtonId: buttonId,
+                setCurrentButtonId: setButtonId,
+                periodKeys: ['ENTIRE', 'TODAY'],
+                startDateOptions: { currentDate: start, onChangeDate: setStart, datePickerOptions: { allowInput: true } },
+                endDateOptions: { currentDate: end, onChangeDate: setEnd, datePickerOptions: { allowInput: true } },
+                onDateValidation: (params) => {
+                    // 알럿 후 날짜를 되돌리는 사용처 패턴
+                    if (params.type === 'end' && params.errorType === 'overlap')
+                        setEnd(END_DATE);
+                },
+            });
+        };
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        const root = createRoot(container);
+        act(() => {
+            root.render(createElement(Harness));
+        });
+        mounted.push({ root, container });
+        const endInput = Array.from(container.querySelectorAll('input.flatpickr-input'))[1];
+        // 사용자가 칸을 클릭해 포커스를 쥔 상태로 입력한다
+        endInput.focus();
+        expect(document.activeElement).toBe(endInput);
+        endInput.value = '';
+        for (const char of TYPED_END_DATE) {
+            act(() => {
+                endInput.value = `${endInput.value}${char}`;
+                endInput.dispatchEvent(new Event('input', { bubbles: true }));
+            });
+        }
+        // 되돌리기 리렌더에서 flatpickr 가 wrapper 를 재생성하며 input 노드를 옮겨 포커스가 빠졌다.
+        // 사용자는 알럿을 닫고 이어서 타이핑하는데 입력이 들어가지 않아 콜백이 끊긴 것처럼 보였다.
+        expect(endInput.value).toBe(END_DATE);
+        expect(document.activeElement).toBe(endInput);
+    });
+});

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

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

package/dist/temp/src/hooks/__tests__/useObjectUrl.test.js

@@ -0,0 +1,96 @@
+// @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 { useObjectUrl } from '../useObjectUrl';
+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;
+});
+const mounted = [];
+afterEach(() => {
+    for (const { root, container } of mounted.splice(0)) {
+        act(() => {
+            root.unmount();
+        });
+        container.remove();
+    }
+    URL.createObjectURL = originalCreateObjectURL;
+    URL.revokeObjectURL = originalRevokeObjectURL;
+});
+/** 내용은 검증 대상이 아니므로 최소 크기만 채운다 */
+const DUMMY_FILE_BYTES = 4;
+const makeFile = (name) => new File([new Uint8Array(DUMMY_FILE_BYTES)], name, { type: 'image/jpeg' });
+/** 훅 결과를 data-url 속성으로 노출하는 관찰용 컴포넌트 */
+const Probe = ({ file }) => createElement('span', { 'data-url': useObjectUrl(file) ?? '' });
+function renderProbe(file) {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    const render = (nextFile) => {
+        act(() => {
+            root.render(createElement(Probe, { file: nextFile }));
+        });
+    };
+    render(file);
+    mounted.push({ root, container });
+    const currentUrl = () => container.querySelector('span')?.getAttribute('data-url');
+    const unmount = () => {
+        act(() => {
+            root.unmount();
+        });
+        const index = mounted.findIndex((entry) => entry.root === root);
+        mounted.splice(index, 1);
+        container.remove();
+    };
+    return { render, currentUrl, unmount };
+}
+describe('useObjectUrl', () => {
+    it('파일을 주면 object URL을 만들어 반환한다', () => {
+        const probe = renderProbe(makeFile('a.jpg'));
+        expect(createObjectURL).toHaveBeenCalledTimes(1);
+        expect(probe.currentUrl()).toBe('blob:mock/1');
+    });
+    it('같은 파일로 여러 번 리렌더해도 URL을 한 번만 만든다', () => {
+        const file = makeFile('a.jpg');
+        const probe = renderProbe(file);
+        probe.render(file);
+        probe.render(file);
+        probe.render(file);
+        expect(createObjectURL).toHaveBeenCalledTimes(1);
+        expect(revokeObjectURL).not.toHaveBeenCalled();
+    });
+    it('언마운트하면 만들었던 URL을 해제한다', () => {
+        const probe = renderProbe(makeFile('a.jpg'));
+        expect(revokeObjectURL).not.toHaveBeenCalled();
+        probe.unmount();
+        expect(revokeObjectURL).toHaveBeenCalledTimes(1);
+        expect(revokeObjectURL).toHaveBeenCalledWith('blob:mock/1');
+    });
+    it('파일이 바뀌면 이전 URL을 해제하고 새로 만든다', () => {
+        const probe = renderProbe(makeFile('a.jpg'));
+        probe.render(makeFile('b.jpg'));
+        expect(createObjectURL).toHaveBeenCalledTimes(2);
+        expect(revokeObjectURL).toHaveBeenCalledWith('blob:mock/1');
+        expect(probe.currentUrl()).toBe('blob:mock/2');
+    });
+    it('파일이 없으면 URL을 만들지 않는다', () => {
+        const probe = renderProbe(undefined);
+        expect(createObjectURL).not.toHaveBeenCalled();
+        expect(probe.currentUrl()).toBe('');
+    });
+    it('파일을 없애면 이전 URL을 해제한다', () => {
+        const probe = renderProbe(makeFile('a.jpg'));
+        probe.render(undefined);
+        expect(revokeObjectURL).toHaveBeenCalledWith('blob:mock/1');
+        expect(probe.currentUrl()).toBe('');
+    });
+});

package/dist/temp/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/temp/src/hooks/index.js

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

package/dist/temp/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/temp/src/hooks/useObjectUrl.js

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { useIsomorphicLayoutEffect } from './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.
+ */
+export const useObjectUrl = (file) => {
+    const [objectUrl, setObjectUrl] = useState(null);
+    useIsomorphicLayoutEffect(() => {
+        if (!file) {
+            setObjectUrl(null);
+            return;
+        }
+        const createdUrl = URL.createObjectURL(file);
+        setObjectUrl(createdUrl);
+        return () => {
+            URL.revokeObjectURL(createdUrl);
+        };
+    }, [file]);
+    return objectUrl;
+};

package/dist/temp/vitest.config.js

@@ -1,4 +1,9 @@
+import path from 'node:path';
 import { defineConfig } from 'vitest/config';
+// lcov 의 SF 경로를 레포 루트 기준으로 기록한다. sonar-scanner 는 레포 루트를 단일
+// projectBaseDir 로 잡으므로, 패키지 루트 기준 상대경로(SF:src/foo.ts)로 두면 경로가
+// 해석되지 않아 커버리지가 통째로 무시된다.
+const REPO_ROOT = path.resolve(__dirname, '../..');
 export default defineConfig({
     test: {
         include: [
@@ -7,5 +12,24 @@ export default defineConfig({
             'assets/scripts/**/__tests__/**/*.test.ts',
         ],
         environment: 'node',
+        coverage: {
+            provider: 'v8',
+            // 테스트가 존재하는 3개 루트를 분모로 잡는다 (test.include 와 동일 범위).
+            include: ['src/**/*.{ts,tsx}', 'scripts/**/*.ts', 'assets/scripts/**/*.ts'],
+            exclude: [
+                '**/__tests__/**',
+                '**/*.d.ts',
+                // ui-admin 의 index.ts 81개는 전부 `export * from ...` barrel 이라 측정 의미가 없다.
+                // (step-guide 의 src/index.ts 는 824줄 본체 구현이므로 그쪽에서는 제외하지 않는다.)
+                '**/index.ts',
+                // MCP 가 읽는 컴포넌트 메타데이터 선언 45개 — 실행 분기 없는 순수 데이터.
+                '**/*.meta.ts',
+                'src/types/**',
+                'src/constant/**',
+            ],
+            // 'text' 미포함 — 미커버 파일이 수백 개라 파일별 상세 출력이 CI 로그를 덮는다.
+            // 'lcov' 대신 'lcovonly' — 'lcov' 는 HTML 리포트까지 생성한다.
+            reporter: ['text-summary', ['lcovonly', { projectRoot: REPO_ROOT }]],
+        },
     },
 });

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

@@ -57,5 +57,13 @@ export interface FileInputProps extends Omit<InputBaseProps, 'clearText' | 'onCl
      * Hint text to display
      */
     hintText?: string;
+    /**
+     * Whether to render the built-in file tag list
+     *
+     * Set to `false` when the file list is rendered outside the component —
+     * the selected files still arrive through `onChange` / `onFileSelect`, and
+     * file count/duplicate validation keeps working.
+     */
+    showFileTags?: boolean;
 }
 export declare const FileInput: import("react").ForwardRefExoticComponent<FileInputProps & import("react").RefAttributes<HTMLInputElement>>;

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

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

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/components/forms-and-input/range-date-picker/RangeDatePicker.d.ts

@@ -13,6 +13,15 @@ type RangeDatePickerProps = {
             period: number;
         };
     };
+    /**
+     * 검증 결과 통지. 시작일·종료일 effect 가 각자 자기 쪽 변경만 검증하므로,
+     * 사용자가 한쪽 날짜를 바꾸면 그 한쪽(`type`)만 통지된다.
+     *
+     * 단 **마운트 시점에 이미 역전된 범위**가 들어오면 두 effect 가 함께 돌아
+     * `type:'start'` 과 `type:'end'` 가 각각 통지된다. 이때 `newDate` 는 서로 반대편 날짜이므로
+     * 양쪽을 모두 반영하면 시작일·종료일이 뒤바뀐다. 한쪽만 처리해야 한다.
+     * (validationOption.setting 을 넘기는 사용처에서는 종전부터 동일하게 동작했다.)
+     */
     onDateValidation?: (params: {
         type: 'start' | 'end';
         errorType: 'reset' | 'period' | 'overlap' | 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.18",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
@@ -22,6 +22,7 @@
     "start": "webpack --node-env development",
     "check:meta": "tsx scripts/check-meta.ts",
     "test": "vitest run --config vitest.config.ts",
+    "test:coverage": "vitest run --coverage --config vitest.config.ts",
     "tsc": "tsc --pretty --listFiles"
   },
   "author": {
@@ -72,7 +73,7 @@
     "@atlaskit/pragmatic-drag-and-drop-react-accessibility": "1.1.4",
     "@ncds/ui-admin-icon": "0.1.12",
     "classnames": "2.5.1",
-    "dompurify": "3.4.1",
+    "dompurify": "3.4.12",
     "flatpickr": "4.6.13",
     "lodash": "4.18.1",
     "lodash-es": "4.18.1",
@@ -92,6 +93,7 @@
     "@types/react": "18.3.28",
     "@types/react-dom": "18.3.7",
     "@types/react-flatpickr": "3.8.11",
+    "@vitest/coverage-v8": "^4.1.10",
     "babel-loader": "9.2.1",
     "babel-plugin-named-exports-order": "0.0.2",
     "commander": "11.1.0",
@@ -118,7 +120,7 @@
     "ts-node": "10.9.2",
     "tsx": "^4.21.0",
     "typescript": "5.0.4",
-    "vitest": "^4.1.4",
+    "vitest": "^4.1.10",
     "webpack": "5.105.4",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.2.3"