@ncds/ui-admin 1.8.19 → 1.8.20

package/dist/cjs/src/components/forms-and-input/input-base/InputBase.js

@@ -35,6 +35,8 @@ const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref,
     showHelpIcon,
     maxLength,
     showTextCount,
+    clearText,
+    onClearText,
     className,
     ...props
   } = _ref;
@@ -100,11 +102,11 @@ const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref,
     }
   };
   const renderClearButton = () => {
-    if (!props.clearText) return null;
+    if (!clearText) return null;
     return (0, _jsxRuntime.jsx)("button", {
       type: "button",
       className: (0, _classnames.default)('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'),
-      onClick: props.onClearText,
+      onClick: onClearText,
       children: (0, _jsxRuntime.jsx)(_uiAdminIcon.X, {
         className: "ncua-input__clear-icon",
         width: validationSvgSize[size],

package/dist/cjs/src/components/forms-and-input/input-base/__tests__/InputBase.test.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _InputBase = require("../InputBase");
+// @vitest-environment jsdom
+
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+function mountInputBase() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = (0, _client.createRoot)(container);
+  (0, _testUtils.act)(() => {
+    root.render(/*#__PURE__*/(0, _react.createElement)(_InputBase.InputBase, props));
+  });
+  const unmount = () => {
+    (0, _testUtils.act)(() => {
+      root.unmount();
+    });
+    container.remove();
+  };
+  return {
+    container,
+    unmount
+  };
+}
+(0, _vitest.describe)('InputBase — clearText prop DOM 누출', () => {
+  (0, _vitest.it)('clearText/onClearText가 DOM input 속성으로 전달되지 않는다', () => {
+    // Given: console.error를 감시하는 상태에서
+    const consoleErrorSpy = _vitest.vi.spyOn(console, 'error');
+    // When: clearText, onClearText를 전달해 렌더하면
+    const view = mountInputBase({
+      clearText: true,
+      onClearText: _vitest.vi.fn()
+    });
+    // Then: 렌더된 <input>에 cleartext 속성이 없고, unknown prop 경고도 발생하지 않는다
+    const input = view.container.querySelector('input');
+    (0, _vitest.expect)(input).not.toBeNull();
+    (0, _vitest.expect)(input?.hasAttribute('cleartext')).toBe(false);
+    (0, _vitest.expect)(consoleErrorSpy).not.toHaveBeenCalled();
+    consoleErrorSpy.mockRestore();
+    view.unmount();
+  });
+  (0, _vitest.it)('clearText가 true면 clear 버튼이 렌더되고 클릭 시 onClearText가 호출된다', () => {
+    // Given: clearText와 onClearText를 전달해 렌더한 상태에서
+    const onClearText = _vitest.vi.fn();
+    const view = mountInputBase({
+      clearText: true,
+      onClearText
+    });
+    // When: clear 버튼을 찾아 클릭하면
+    const clearButton = view.container.querySelector('.ncua-input__clear');
+    (0, _vitest.expect)(clearButton).not.toBeNull();
+    (0, _testUtils.act)(() => {
+      clearButton?.click();
+    });
+    // Then: onClearText가 호출된다
+    (0, _vitest.expect)(onClearText).toHaveBeenCalledTimes(1);
+    view.unmount();
+  });
+  (0, _vitest.it)('clearText를 전달하지 않으면 clear 버튼이 렌더되지 않는다', () => {
+    // Given/When: clearText 없이 렌더하면
+    const view = mountInputBase();
+    // Then: clear 버튼이 존재하지 않는다
+    (0, _vitest.expect)(view.container.querySelector('.ncua-input__clear')).toBeNull();
+    view.unmount();
+  });
+});

package/dist/esm/src/components/forms-and-input/input-base/InputBase.js

@@ -28,6 +28,8 @@ const InputBase = /*#__PURE__*/forwardRef((_ref, ref) => {
     showHelpIcon,
     maxLength,
     showTextCount,
+    clearText,
+    onClearText,
     className,
     ...props
   } = _ref;
@@ -93,11 +95,11 @@ const InputBase = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   };
   const renderClearButton = () => {
-    if (!props.clearText) return null;
+    if (!clearText) return null;
     return _jsx("button", {
       type: "button",
       className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'),
-      onClick: props.onClearText,
+      onClick: onClearText,
       children: _jsx(X, {
         className: "ncua-input__clear-icon",
         width: validationSvgSize[size],

package/dist/esm/src/components/forms-and-input/input-base/__tests__/InputBase.test.js

@@ -0,0 +1,69 @@
+// @vitest-environment jsdom
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import { InputBase } from '../InputBase';
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+function mountInputBase() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  act(() => {
+    root.render(/*#__PURE__*/createElement(InputBase, props));
+  });
+  const unmount = () => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  };
+  return {
+    container,
+    unmount
+  };
+}
+describe('InputBase — clearText prop DOM 누출', () => {
+  it('clearText/onClearText가 DOM input 속성으로 전달되지 않는다', () => {
+    // Given: console.error를 감시하는 상태에서
+    const consoleErrorSpy = vi.spyOn(console, 'error');
+    // When: clearText, onClearText를 전달해 렌더하면
+    const view = mountInputBase({
+      clearText: true,
+      onClearText: vi.fn()
+    });
+    // Then: 렌더된 <input>에 cleartext 속성이 없고, unknown prop 경고도 발생하지 않는다
+    const input = view.container.querySelector('input');
+    expect(input).not.toBeNull();
+    expect(input?.hasAttribute('cleartext')).toBe(false);
+    expect(consoleErrorSpy).not.toHaveBeenCalled();
+    consoleErrorSpy.mockRestore();
+    view.unmount();
+  });
+  it('clearText가 true면 clear 버튼이 렌더되고 클릭 시 onClearText가 호출된다', () => {
+    // Given: clearText와 onClearText를 전달해 렌더한 상태에서
+    const onClearText = vi.fn();
+    const view = mountInputBase({
+      clearText: true,
+      onClearText
+    });
+    // When: clear 버튼을 찾아 클릭하면
+    const clearButton = view.container.querySelector('.ncua-input__clear');
+    expect(clearButton).not.toBeNull();
+    act(() => {
+      clearButton?.click();
+    });
+    // Then: onClearText가 호출된다
+    expect(onClearText).toHaveBeenCalledTimes(1);
+    view.unmount();
+  });
+  it('clearText를 전달하지 않으면 clear 버튼이 렌더되지 않는다', () => {
+    // Given/When: clearText 없이 렌더하면
+    const view = mountInputBase();
+    // Then: clear 버튼이 존재하지 않는다
+    expect(view.container.querySelector('.ncua-input__clear')).toBeNull();
+    view.unmount();
+  });
+});

package/dist/temp/src/components/forms-and-input/input-base/InputBase.js

@@ -13,7 +13,7 @@ const generalSvgSize = {
     xs: 14,
     sm: 20,
 };
-const InputBase = forwardRef(({ size = 'xs', required, label, hintText, disabled, fullWidth = false, validation, destructive, leadingElement, trailingElement, showHelpIcon, maxLength, showTextCount, className, ...props }, ref) => {
+const InputBase = forwardRef(({ size = 'xs', required, label, hintText, disabled, fullWidth = false, validation, destructive, leadingElement, trailingElement, showHelpIcon, maxLength, showTextCount, clearText, onClearText, className, ...props }, ref) => {
     const inputRef = useRef(null);
     const [textCount, setTextCount] = useState(0);
     useEffect(() => {
@@ -59,9 +59,9 @@ const InputBase = forwardRef(({ size = 'xs', required, label, hintText, disabled
         }
     };
     const renderClearButton = () => {
-        if (!props.clearText)
+        if (!clearText)
             return null;
-        return (_jsx("button", { type: "button", className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'), onClick: props.onClearText, children: _jsx(X, { className: "ncua-input__clear-icon", width: validationSvgSize[size], height: validationSvgSize[size] }) }));
+        return (_jsx("button", { type: "button", className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'), onClick: onClearText, children: _jsx(X, { className: "ncua-input__clear-icon", width: validationSvgSize[size], height: validationSvgSize[size] }) }));
     };
     const renderStatusIcon = () => {
         if (destructive) {

package/dist/temp/src/components/forms-and-input/input-base/__tests__/InputBase.test.d.ts

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

package/dist/temp/src/components/forms-and-input/input-base/__tests__/InputBase.test.js

@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import { InputBase } from '../InputBase';
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+function mountInputBase(props = {}) {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    act(() => {
+        root.render(createElement(InputBase, props));
+    });
+    const unmount = () => {
+        act(() => {
+            root.unmount();
+        });
+        container.remove();
+    };
+    return { container, unmount };
+}
+describe('InputBase — clearText prop DOM 누출', () => {
+    it('clearText/onClearText가 DOM input 속성으로 전달되지 않는다', () => {
+        // Given: console.error를 감시하는 상태에서
+        const consoleErrorSpy = vi.spyOn(console, 'error');
+        // When: clearText, onClearText를 전달해 렌더하면
+        const view = mountInputBase({ clearText: true, onClearText: vi.fn() });
+        // Then: 렌더된 <input>에 cleartext 속성이 없고, unknown prop 경고도 발생하지 않는다
+        const input = view.container.querySelector('input');
+        expect(input).not.toBeNull();
+        expect(input?.hasAttribute('cleartext')).toBe(false);
+        expect(consoleErrorSpy).not.toHaveBeenCalled();
+        consoleErrorSpy.mockRestore();
+        view.unmount();
+    });
+    it('clearText가 true면 clear 버튼이 렌더되고 클릭 시 onClearText가 호출된다', () => {
+        // Given: clearText와 onClearText를 전달해 렌더한 상태에서
+        const onClearText = vi.fn();
+        const view = mountInputBase({ clearText: true, onClearText });
+        // When: clear 버튼을 찾아 클릭하면
+        const clearButton = view.container.querySelector('.ncua-input__clear');
+        expect(clearButton).not.toBeNull();
+        act(() => {
+            clearButton?.click();
+        });
+        // Then: onClearText가 호출된다
+        expect(onClearText).toHaveBeenCalledTimes(1);
+        view.unmount();
+    });
+    it('clearText를 전달하지 않으면 clear 버튼이 렌더되지 않는다', () => {
+        // Given/When: clearText 없이 렌더하면
+        const view = mountInputBase();
+        // Then: clear 버튼이 존재하지 않는다
+        expect(view.container.querySelector('.ncua-input__clear')).toBeNull();
+        view.unmount();
+    });
+});

package/dist/types/src/components/forms-and-input/input-base/__tests__/InputBase.test.d.ts

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

package/package.json

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