@ncds/ui-admin 1.8.26-alpha.3 → 1.8.26-alpha.5

package/dist/cjs/assets/scripts/notification/FloatingNotification.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FloatingNotification = void 0;
 var _breakpoint = require("../../../src/constant/breakpoint");
+var _notification = require("../../../src/utils/notification");
 var _featuredIcon = require("../featuredIcon");
 var _ButtonCloseX = require("../shared/ButtonCloseX");
 var _sanitize = require("../utils/sanitize");
@@ -16,9 +17,13 @@ class FloatingNotification {
       color: 'neutral',
       className: '',
       actions: [],
-      autoClose: 0,
+      hideCloseButton: false,
       supportingText: undefined,
-      ...options
+      ...options,
+      autoClose: (0, _notification.resolveAutoClose)({
+        autoClose: options.autoClose,
+        hideCloseButton: options.hideCloseButton
+      })
     };
     this.element = this.createElement();
     this.bindEvents();
@@ -32,7 +37,8 @@ class FloatingNotification {
       color,
       className,
       actions,
-      onClose
+      onClose,
+      hideCloseButton
     } = this.options;
     // 플로팅 알림에서 info 색상 사용 시 neutral로 대체
     let actualColor = color;
@@ -61,6 +67,7 @@ class FloatingNotification {
       supportingText,
       actions,
       onClose,
+      hideCloseButton,
       isMobile: mobile
     }));
     // FeaturedIcon을 container에 추가
@@ -78,6 +85,7 @@ class FloatingNotification {
       supportingText,
       actions,
       onClose,
+      hideCloseButton,
       isMobile
     } = params;
     return `
@@ -92,12 +100,20 @@ class FloatingNotification {
           </div>
         </div>
       </div>
-      ${this.renderCloseButton(onClose, isMobile)}
+      ${this.renderCloseButton({
+      onClose,
+      isMobile,
+      hideCloseButton
+    })}
     `;
   }
-  renderCloseButton(onClose) {
-    let isMobile = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    if (!onClose) return '';
+  renderCloseButton(params) {
+    const {
+      onClose,
+      isMobile = false,
+      hideCloseButton = false
+    } = params;
+    if (!onClose || hideCloseButton) return '';
     const size = _const.getSizes.closeButton(isMobile);
     return (0, _ButtonCloseX.ButtonCloseX)(size, 'light', _const.CLASS_NAMES.FLOATING.CLOSE_BUTTON, '알림 닫기', onClose);
   }

package/dist/cjs/assets/scripts/notification/FullWidthNotification.js

@@ -15,6 +15,7 @@ class FullWidthNotification {
       className: '',
       actions: [],
       autoClose: 0,
+      hideCloseButton: false,
       supportingText: undefined,
       ...options
     };
@@ -30,6 +31,7 @@ class FullWidthNotification {
       className,
       actions,
       onClose,
+      hideCloseButton,
       supportTextLink,
       supportTextLinkTarget,
       onHidePermanently,
@@ -43,6 +45,7 @@ class FullWidthNotification {
       supportingText,
       actions,
       onClose,
+      hideCloseButton,
       supportTextLink,
       onHidePermanently,
       hidePermanentlyLabel
@@ -57,6 +60,7 @@ class FullWidthNotification {
       supportingText,
       actions,
       onClose,
+      hideCloseButton,
       supportTextLink,
       onHidePermanently,
       hidePermanentlyLabel
@@ -74,7 +78,10 @@ class FullWidthNotification {
           <div class="${_const.CLASS_NAMES.FULL_WIDTH.ACTIONS_CONTAINER}">
             ${actions && actions.length > 0 ? (0, _utils.renderActions)(actions, _const.CLASS_NAMES.FULL_WIDTH.ACTIONS) : ''}
             ${this.renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel)}
-            ${this.renderCloseButton(onClose)}
+            ${this.renderCloseButton({
+      onClose,
+      hideCloseButton
+    })}
           </div>
         </div>
       </div>
@@ -95,8 +102,12 @@ class FullWidthNotification {
       </button>
     `;
   }
-  renderCloseButton(onClose) {
-    if (!onClose) return '';
+  renderCloseButton(params) {
+    const {
+      onClose,
+      hideCloseButton = false
+    } = params;
+    if (!onClose || hideCloseButton) return '';
     return `
       <button type="button" class="${_const.CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON}" aria-label="알림 닫기">
         ${_const.SVG_ICONS['x-close'](_const.FULL_WIDTH_SIZES.CLOSE_BUTTON)}

package/dist/cjs/assets/scripts/notification/MessageNotification.js

@@ -16,6 +16,7 @@ class MessageNotification {
       className: '',
       actions: [],
       autoClose: 0,
+      hideCloseButton: false,
       supportingText: undefined,
       ...options
     };
@@ -31,6 +32,7 @@ class MessageNotification {
       className,
       actions,
       onClose,
+      hideCloseButton,
       onHidePermanently,
       hidePermanentlyLabel,
       variant,
@@ -50,6 +52,7 @@ class MessageNotification {
       color: actualColor,
       actions,
       onClose,
+      hideCloseButton,
       onHidePermanently,
       hidePermanentlyLabel
     }));

package/dist/cjs/assets/scripts/notification/Notification.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NcuaNotification = void 0;
+var _notification = require("../../../src/utils/notification");
 var _FloatingNotification = require("./FloatingNotification");
 var _FullWidthNotification = require("./FullWidthNotification");
 var _MessageNotification = require("./MessageNotification");
@@ -79,8 +80,13 @@ class NcuaNotification {
       supportingText,
       color,
       type: 'floating',
-      autoClose: autoCloseMap[color],
-      ...options
+      ...options,
+      // 명시 autoClose > 색상별 기본값 > (floating 이고 hideCloseButton 이면 3초). neutral 은 기본 0 이라 세 번째 분기가 필요.
+      autoClose: (0, _notification.resolveAutoClose)({
+        autoClose: options?.autoClose,
+        hideCloseButton: (options?.type ?? 'floating') === 'floating' && options?.hideCloseButton,
+        fallback: autoCloseMap[color]
+      })
     });
   }
   // 클래스를 생성하지 않고도 기본 floating 알림 생성을 하기 위한 함수들

package/dist/cjs/assets/scripts/notification/messageTemplate.js

@@ -25,6 +25,7 @@ function buildMessageTemplate(params) {
     color,
     actions,
     onClose,
+    hideCloseButton,
     onHidePermanently,
     hidePermanentlyLabel
   } = params;
@@ -40,6 +41,7 @@ function buildMessageTemplate(params) {
         ${renderActionsContainer({
     actions,
     onClose,
+    hideCloseButton,
     onHidePermanently,
     hidePermanentlyLabel,
     color
@@ -57,6 +59,7 @@ function renderActionsContainer(params) {
   const {
     actions,
     onClose,
+    hideCloseButton,
     onHidePermanently,
     hidePermanentlyLabel,
     color
@@ -64,6 +67,7 @@ function renderActionsContainer(params) {
   const actionsHtml = (0, _utils.renderActions)(actions ?? [], _const.CLASS_NAMES.MESSAGE.ACTIONS, ACTION_BUTTON_SIZE);
   const footerHtml = renderFooterContainer({
     onClose,
+    hideCloseButton,
     onHidePermanently,
     hidePermanentlyLabel,
     color
@@ -75,15 +79,23 @@ function renderActionsContainer(params) {
 function renderFooterContainer(params) {
   const {
     onClose,
+    hideCloseButton,
     onHidePermanently,
     hidePermanentlyLabel,
     color
   } = params;
-  if (!onHidePermanently && !onClose) return '';
+  // footer 컨테이너와 닫기 버튼이 같은 판정을 보게 해 빈 footer 가 남지 않게 한다.
+  // cf. React `MessageNotificationParts.tsx` 의 showCloseButton — 두 구현이 같은 판정을 유지해야 한다.
+  const showCloseButton = Boolean(onClose) && !hideCloseButton;
+  if (!onHidePermanently && !showCloseButton) return '';
   return `
     <div class="${_const.CLASS_NAMES.MESSAGE.FOOTER_CONTAINER}">
       ${renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel)}
-      ${renderCloseButton(onClose, color)}
+      ${renderCloseButton({
+    onClose,
+    hideCloseButton,
+    color
+  })}
     </div>
   `;
 }
@@ -106,9 +118,13 @@ function renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel) {
  * 닫기(X) 버튼. 아이콘 색은 React `<XClose color>`와 같이 svg 의 `color` 속성으로 주고
  * path 는 `stroke="currentColor"`로 상속받는다 — 두 구현이 같은 마크업을 낸다.
  */
-function renderCloseButton(onClose) {
-  let color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'neutral';
-  if (!onClose) return '';
+function renderCloseButton(params) {
+  const {
+    onClose,
+    hideCloseButton = false,
+    color = 'neutral'
+  } = params;
+  if (!onClose || hideCloseButton) return '';
   const iconColor = _notification.MESSAGE_CLOSE_ICON_COLOR[color];
   return `
     <button type="button" class="${_const.CLASS_NAMES.MESSAGE.CLOSE_BUTTON}" aria-label="알림 닫기">

package/dist/cjs/constant/notification.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MESSAGE_CLOSE_ICON_COLOR = exports.HIDE_PERMANENTLY_LABEL = void 0;
+exports.MESSAGE_CLOSE_ICON_COLOR = exports.HIDE_PERMANENTLY_LABEL = exports.HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS = void 0;
 var _color = require("./color");
 /**
  * 다시보지 않기 버튼의 타입별 기본 문구.
@@ -32,4 +32,10 @@ const MESSAGE_CLOSE_ICON_COLOR = exports.MESSAGE_CLOSE_ICON_COLOR = {
   warning: _color.COLOR.orange500,
   success: _color.COLOR.green600,
   info: _color.COLOR.violet600
-};
+};
+/**
+ * floating(토스트)에서 `hideCloseButton`인데 `autoClose`를 지정하지 않았을 때 적용되는 자동 닫힘 시간(ms).
+ * 닫기 버튼이 없는 토스트가 영구히 남지 않게 한다 — DES-SPEC-027 §5.3 Toast Alert 3초.
+ * full-width · message 는 부모가 언마운트로 닫으므로 적용하지 않는다.
+ */
+const HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS = exports.HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS = 3000;

package/dist/cjs/src/components/overlays/notification/FloatingNotification.js

@@ -15,6 +15,7 @@ var _ButtonCloseX = require("../../action/button/ButtonCloseX");
 var _FeaturedIcon = require("../../image-and-icons/featured-icon/FeaturedIcon");
 var _host = require("./host");
 var _NotificationActionButtons = require("./NotificationActionButtons");
+var _useAutoClose = require("./useAutoClose");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // 호스트 싱글톤은 vanilla/React 양쪽이 동일한 함수를 공유한다 — host.ts 가 가까운 진입점 역할을
 // 하므로 React 컴포넌트는 deep relative path 로 vanilla internals 를 직접 import 하지 않는다.
@@ -73,13 +74,19 @@ const FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _re
     supportingText,
     color = 'neutral',
     onClose,
+    hideCloseButton = false,
     className,
     actions,
-    autoClose = 0,
+    autoClose,
     portal = false,
     ...rest
   } = _ref;
-  const [shouldRemove, setShouldRemove] = (0, _react.useState)(false);
+  // floating 은 닫기 버튼이 없는데 autoClose 도 없으면 영구히 남으므로 기본 3초를 준다.
+  const shouldRemove = (0, _useAutoClose.useAutoClose)({
+    autoClose,
+    hideCloseButton,
+    onClose
+  });
   const featuredIconProps = {
     icon: iconMap[color] || _uiAdminIcon.Pin02,
     size: 'sm',
@@ -89,31 +96,6 @@ const FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _re
   const isMobile = (0, _useMediaQuery.useMediaQuery)(_breakpoint.MEDIA_QUERY.mobile, {
     onMatched: onClose
   });
-  // onClose 는 매 렌더 새 함수 ref 일 수 있으므로 ref 로 latest 만 보관.
-  // → autoClose 타이머 effect 의 deps 에서 onClose 를 빼서 타이머 재시작 회피.
-  // render 본문에서 직접 할당 — useEffect 로 미루면 같은 commit 안에서 fire 되는 타이머가 stale onClose 를 볼 위험.
-  const onCloseRef = (0, _react.useRef)(onClose);
-  onCloseRef.current = onClose;
-  // autoClose 타이머 관리
-  const timerRef = (0, _react.useRef)(null);
-  // onClose 는 onCloseRef 로 latest 만 추적하므로 deps 에서 제외 (의도된 패턴).
-  (0, _react.useEffect)(() => {
-    // autoClose 가 0 보다 크면 타이머 설정.
-    if (autoClose > 0) {
-      timerRef.current = setTimeout(() => {
-        onCloseRef.current?.();
-        // DOM 에서 바로 제거
-        setShouldRemove(true);
-      }, autoClose);
-    }
-    // cleanup: 컴포넌트 언마운트 또는 autoClose 변경 시 타이머 정리
-    return () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-    };
-  }, [autoClose]);
   // portal=true 일 때만 호스트가 필요하다.
   const host = useMountFloatingNotificationHost(portal);
   // a11y — 카드 root 의 role 과 제목/본문 ID. 색상에 따라 alert(error/warning) / status(나머지) 로 분기.
@@ -163,7 +145,7 @@ const FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _re
           })]
         })]
       })
-    }), onClose && (0, _jsxRuntime.jsx)(_ButtonCloseX.ButtonCloseX, {
+    }), onClose && !hideCloseButton && (0, _jsxRuntime.jsx)(_ButtonCloseX.ButtonCloseX, {
       theme: "light",
       className: "ncua-floating-notification__close-button",
       size: isMobile ? 'sm' : 'xs',

package/dist/cjs/src/components/overlays/notification/FullWidthNotification.js

@@ -13,6 +13,7 @@ var _notification = require("../../../../constant/notification");
 var _url = require("../../../utils/url");
 var _linkTarget = require("./linkTarget");
 var _NotificationActionButtons = require("./NotificationActionButtons");
+var _useAutoClose = require("./useAutoClose");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const iconMap = {
   neutral: _uiAdminIcon.MessageChatSquare,
@@ -34,43 +35,27 @@ const FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _
     supportingText,
     color = 'neutral',
     onClose,
+    hideCloseButton = false,
     className,
     actions,
-    autoClose = 0,
+    autoClose,
     supportTextLink,
     supportTextLinkTarget,
     onHidePermanently,
     hidePermanentlyLabel = _notification.HIDE_PERMANENTLY_LABEL.fullWidth,
     ...rest
   } = _ref;
-  const [shouldRemove, setShouldRemove] = (0, _react.useState)(false);
+  // full-width 는 부모가 언마운트로 닫으므로 hideCloseButton 기본 autoClose 를 적용하지 않는다.
+  const shouldRemove = (0, _useAutoClose.useAutoClose)({
+    autoClose,
+    onClose
+  });
   // unsafe URL(javascript: 등)이면 링크 없이 텍스트만 렌더한다 — Vanilla `renderSupportingText` 와 같은 정책.
   const safeSupportTextLink = supportTextLink && (0, _url.isSafeUrl)(supportTextLink) ? supportTextLink : undefined;
   const closeIconSize = {
     width: 20,
     height: 20
   };
-  // autoClose 타이머 관리
-  const timerRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    // autoClose가 0보다 크면 무조건 타이머 설정
-    if (autoClose > 0) {
-      timerRef.current = setTimeout(() => {
-        if (onClose) {
-          onClose();
-        }
-        // DOM에서 바로 제거
-        setShouldRemove(true);
-      }, autoClose);
-    }
-    // cleanup 함수: 컴포넌트 언마운트 시 타이머 정리
-    return () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-    };
-  }, [autoClose, onClose]);
   // DOM에서 완전히 제거
   if (shouldRemove) {
     return null;
@@ -124,7 +109,7 @@ const FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _
             className: (0, _classnames.default)('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-full-width-notification__link'),
             onClick: onHidePermanently,
             children: hidePermanentlyLabel
-          }), onClose && (0, _jsxRuntime.jsx)("button", {
+          }), onClose && !hideCloseButton && (0, _jsxRuntime.jsx)("button", {
             type: "button",
             className: "ncua-full-width-notification__close-button",
             onClick: onClose,

package/dist/cjs/src/components/overlays/notification/MessageNotification.js

@@ -10,6 +10,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _notification = require("../../../../constant/notification");
 var _MessageNotificationParts = require("./MessageNotificationParts");
+var _useAutoClose = require("./useAutoClose");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const iconMap = {
   neutral: _uiAdminIcon.Pin02,
@@ -26,6 +27,8 @@ const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _reac
     icon: Icon,
     color = 'neutral',
     onClose,
+    hideCloseButton = false,
+    autoClose,
     className,
     actions,
     onHidePermanently,
@@ -40,6 +43,14 @@ const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _reac
   const validColor = !isBlock && color === 'info' ? 'neutral' : color;
   // FeaturedIcon 에는 info 색이 없다. block+info 의 violet 톤은 message SCSS 가 덮어쓴다.
   const featuredIconColor = validColor === 'info' ? 'neutral' : validColor;
+  // message 는 부모가 언마운트로 닫으므로 hideCloseButton 기본 autoClose 를 적용하지 않는다.
+  const shouldRemove = (0, _useAutoClose.useAutoClose)({
+    autoClose,
+    onClose
+  });
+  if (shouldRemove) {
+    return null;
+  }
   return (0, _jsxRuntime.jsx)("div", {
     ref: ref,
     className: (0, _classnames.default)('ncua-message-notification', `ncua-message-notification--${validColor}`, {
@@ -62,6 +73,7 @@ const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _reac
         }), (0, _jsxRuntime.jsx)(_MessageNotificationParts.MessageNotificationActions, {
           actions: actions,
           onClose: onClose,
+          hideCloseButton: hideCloseButton,
           onHidePermanently: onHidePermanently,
           hidePermanentlyLabel: hidePermanentlyLabel,
           closeIconColor: _notification.MESSAGE_CLOSE_ICON_COLOR[validColor]

package/dist/cjs/src/components/overlays/notification/MessageNotificationParts.js

@@ -61,12 +61,15 @@ const MessageNotificationActions = _ref2 => {
   let {
     actions,
     onClose,
+    hideCloseButton = false,
     onHidePermanently,
     hidePermanentlyLabel = _notification.HIDE_PERMANENTLY_LABEL.message,
     closeIconColor
   } = _ref2;
   const hasActions = Boolean(actions?.length);
-  const hasFooter = Boolean(onHidePermanently || onClose);
+  // footer 컨테이너와 닫기 버튼이 같은 판정을 보게 해 빈 footer 가 남지 않게 한다.
+  const showCloseButton = Boolean(onClose) && !hideCloseButton;
+  const hasFooter = Boolean(onHidePermanently) || showCloseButton;
   if (!hasActions && !hasFooter) return null;
   return (0, _jsxRuntime.jsxs)("div", {
     className: "ncua-message-notification__actions-container",
@@ -82,7 +85,7 @@ const MessageNotificationActions = _ref2 => {
         className: "ncua-notification__action-button ncua-message-notification__hide-link",
         onClick: onHidePermanently,
         children: hidePermanentlyLabel
-      }), onClose && (0, _jsxRuntime.jsx)("button", {
+      }), showCloseButton && (0, _jsxRuntime.jsx)("button", {
         type: "button",
         className: "ncua-message-notification__close-button",
         onClick: onClose,

package/dist/cjs/src/components/overlays/notification/Notification.js

@@ -57,6 +57,7 @@ const Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)(
       actions: _actions,
       autoClose: _autoClose,
       onClose: _onClose,
+      hideCloseButton: _hideCloseButton,
       onHidePermanently: _onHidePermanently,
       hidePermanentlyLabel: _hidePermanentlyLabel,
       portal: _portal,

package/dist/cjs/src/components/overlays/notification/__tests__/CalloutNotification.test.js

@@ -46,6 +46,7 @@ const renderNotification = function () {
   container?.remove();
   root = null;
   container = null;
+  _vitest.vi.restoreAllMocks();
 });
 (0, _vitest.describe)('CalloutNotification — width prop', () => {
   (0, _vitest.it)('width 미지정 시 너비 클래스를 붙이지 않는다 (부모 너비를 채우는 기본 스타일 유지)', () => {
@@ -94,6 +95,7 @@ const renderNotification = function () {
   });
   // Notification 의 callout 분기가 제외하는 prop 전체. 여기 누락된 prop 은 DOM 속성으로 출력된다.
   (0, _vitest.it)('callout 이 지원하지 않는 prop 은 DOM 속성으로 새지 않는다', () => {
+    const consoleError = _vitest.vi.spyOn(console, 'error').mockImplementation(() => undefined);
     const element = renderNotification({
       icon: () => null,
       supportingText: '보조 문구',
@@ -106,12 +108,16 @@ const renderNotification = function () {
       portal: true,
       onClose: () => undefined,
       onHidePermanently: () => undefined,
-      hidePermanentlyLabel: '다시 보지 않기'
+      hidePermanentlyLabel: '다시 보지 않기',
+      hideCloseButton: true
     });
-    for (const attr of ['icon', 'supportingtext', 'supporttextlink', 'actions', 'autoclose', 'portal', 'onclose', 'onhidepermanently', 'hidepermanentlylabel']) {
+    for (const attr of ['icon', 'supportingtext', 'supporttextlink', 'actions', 'autoclose', 'portal', 'onclose', 'onhidepermanently', 'hidepermanentlylabel', 'hideclosebutton']) {
       (0, _vitest.expect)(element.hasAttribute(attr), attr).toBe(false);
     }
     (0, _vitest.expect)(element.textContent).toBe('안내 문구');
+    // 불리언 true 는 React 가 미지 속성으로 출력하지 않아 hasAttribute 로는 누수를 못 잡는다 — 경고 로그로 검출한다.
+    const leaked = consoleError.mock.calls.some(call => call.some(arg => String(arg).includes('hideCloseButton')));
+    (0, _vitest.expect)(leaked).toBe(false);
   });
   (0, _vitest.it)('ref 를 callout 루트 엘리먼트로 전달한다', () => {
     let captured = null;