@ncds/ui-admin 1.8.3 → 1.8.5

package/dist/cjs/src/components/overlays/dropdown/Dropdown.js

@@ -13,6 +13,9 @@ var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
 var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _react = require("react");
+var _reactDom = require("react-dom");
+var _useFloatingPosition = require("../../../hooks/useFloatingPosition");
+var _usePortalState = require("../../../hooks/usePortalState");
 var _button = require("../../action/button");
 var _utils = require("./utils");
 const DROPDOWN_ID_RADIX = 36;
@@ -149,6 +152,7 @@ const SortableConfigItem = _ref => {
     })]
   });
 };
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 액션/설정 두 variant 통합 + drag-and-drop 필수 분기
 const Dropdown = props => {
   const {
     trigger,
@@ -157,14 +161,28 @@ const Dropdown = props => {
     groups,
     className,
     opened = false,
-    closeOnClickOutside = true
+    closeOnClickOutside = true,
+    usePortal
   } = props;
   const variant = props.variant ?? 'action';
   const closeOnClickItem = variant === 'action' ? props.closeOnClickItem ?? true : false;
   const [isOpen, setIsOpen] = (0, _react.useState)(opened);
   const dropdownRef = (0, _react.useRef)(null);
   const triggerRef = (0, _react.useRef)(null);
+  const menuRef = (0, _react.useRef)(null);
   const menuItemsRef = (0, _react.useRef)(null);
+  const {
+    shouldPortal,
+    portalContainer
+  } = (0, _usePortalState.usePortalState)(usePortal);
+  const floatingStyle = (0, _useFloatingPosition.useFloatingPosition)({
+    enabled: shouldPortal,
+    isOpen,
+    triggerRef,
+    floatingRef: menuRef,
+    direction: 'down',
+    align
+  });
   const dropdownIdRef = (0, _react.useRef)(`ncua-dropdown-${Math.random().toString(DROPDOWN_ID_RADIX).slice(DROPDOWN_ID_SLICE_START, DROPDOWN_ID_SLICE_END)}`);
   const dropdownId = dropdownIdRef.current;
   (0, _react.useEffect)(() => {
@@ -227,7 +245,10 @@ const Dropdown = props => {
     triggerRef.current?.focus();
   };
   const handleClickOutside = event => {
-    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+    const target = event.target;
+    const insideContainer = dropdownRef.current?.contains(target) ?? false;
+    const insidePortaledMenu = menuRef.current?.contains(target) ?? false;
+    if (!insideContainer && !insidePortaledMenu) {
       setIsOpen(false);
     }
   };
@@ -239,6 +260,7 @@ const Dropdown = props => {
       }
     }
   };
+  // biome-ignore lint/correctness/useExhaustiveDependencies: handleClickOutside는 안정적 참조
   (0, _react.useEffect)(() => {
     if (closeOnClickOutside) {
       document.addEventListener('mousedown', handleClickOutside);
@@ -248,6 +270,7 @@ const Dropdown = props => {
     }
   }, [closeOnClickOutside]);
   // ESC 키로 닫고 trigger로 포커스 복귀
+  // biome-ignore lint/correctness/useExhaustiveDependencies: closeAndRestoreFocus는 안정적 참조
   (0, _react.useEffect)(() => {
     if (!isOpen) return;
     const handleEsc = event => {
@@ -428,26 +451,31 @@ const Dropdown = props => {
     });
   };
   const dropdownClasses = ['ncua-dropdown', className, align === 'right' ? 'ncua-dropdown--right' : ''].filter(Boolean).join(' ');
+  const menuClasses = ['ncua-dropdown__menu', shouldPortal ? 'ncua-dropdown__menu--portal' : ''].filter(Boolean).join(' ');
+  const menuNode = isOpen ? (0, _jsxRuntime.jsxs)("div", {
+    ref: menuRef,
+    className: menuClasses,
+    role: variant === 'config' ? 'dialog' : 'menu',
+    "aria-label": variant === 'config' ? '설정' : undefined,
+    style: shouldPortal && floatingStyle ? floatingStyle : undefined,
+    children: [renderHeader(), (0, _jsxRuntime.jsx)("div", {
+      ref: menuItemsRef,
+      className: "ncua-dropdown__menu-items",
+      children: groups.map(group => {
+        // config variant uses draft.order to drive the rendered order
+        const orderedItems = variant === 'config' && draft ? draft.order.map(id => group.items.find(i => i.id === id)).filter(i => i !== undefined) : group.items;
+        return (0, _jsxRuntime.jsx)("div", {
+          className: "ncua-dropdown__group",
+          children: orderedItems.map(item => variant === 'config' ? renderConfigItem(item, group.sortable === true) : renderActionItem(item))
+        }, group.items[0]?.id);
+      })
+    }), renderFooter()]
+  }) : null;
+  const portaledMenu = shouldPortal && portalContainer && menuNode ? /*#__PURE__*/(0, _reactDom.createPortal)(menuNode, portalContainer) : null;
   return (0, _jsxRuntime.jsxs)("div", {
     className: dropdownClasses,
     ref: dropdownRef,
-    children: [renderTrigger(), isOpen && (0, _jsxRuntime.jsxs)("div", {
-      className: "ncua-dropdown__menu",
-      role: variant === 'config' ? 'dialog' : 'menu',
-      "aria-label": variant === 'config' ? '설정' : undefined,
-      children: [renderHeader(), (0, _jsxRuntime.jsx)("div", {
-        ref: menuItemsRef,
-        className: "ncua-dropdown__menu-items",
-        children: groups.map(group => {
-          // config variant uses draft.order to drive the rendered order
-          const orderedItems = variant === 'config' && draft ? draft.order.map(id => group.items.find(i => i.id === id)).filter(i => i !== undefined) : group.items;
-          return (0, _jsxRuntime.jsx)("div", {
-            className: "ncua-dropdown__group",
-            children: orderedItems.map(item => variant === 'config' ? renderConfigItem(item, group.sortable === true) : renderActionItem(item))
-          }, group.items[0]?.id);
-        })
-      }), renderFooter()]
-    })]
+    children: [renderTrigger(), !shouldPortal && menuNode, portaledMenu]
   });
 };
 exports.Dropdown = Dropdown;

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalloutNotification = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CalloutNotification = exports.CalloutNotification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    color = 'neutral',
+    className,
+    title,
+    ...rest
+  } = _ref;
+  return (0, _jsxRuntime.jsx)("div", {
+    ref: ref,
+    className: (0, _classnames.default)('ncua-callout-notification', `ncua-callout-notification--${color}`, className),
+    ...rest,
+    children: title
+  });
+});
+CalloutNotification.displayName = 'CalloutNotification';

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

@@ -8,19 +8,65 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
+var _reactDom = require("react-dom");
 var _breakpoint = require("../../../constant/breakpoint");
 var _useMediaQuery = require("../../../hooks/useMediaQuery");
 var _button = require("../../action/button");
 var _ButtonCloseX = require("../../action/button/ButtonCloseX");
 var _FeaturedIcon = require("../../image-and-icons/featured-icon/FeaturedIcon");
+var _host = require("./host");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// 호스트 싱글톤은 vanilla/React 양쪽이 동일한 함수를 공유한다 — host.ts 가 가까운 진입점 역할을
+// 하므로 React 컴포넌트는 deep relative path 로 vanilla internals 를 직접 import 하지 않는다.
+
+/**
+ * 색상별 a11y role.
+ *   - error/warning → role="alert"  (implicit aria-live="assertive": 즉시 발화)
+ *   - 그 외       → role="status" (implicit aria-live="polite": 현재 발화 끝난 후 발화)
+ * role 이 implicit live-region 을 가져오므로 호스트 컨테이너에는 aria-live 를 두지 않는다.
+ */
+const ASSERTIVE_COLORS = {
+  error: true,
+  warning: true
+};
 const iconMap = {
   neutral: _uiAdminIcon.Pin02,
   error: _uiAdminIcon.AlertTriangle,
   warning: _uiAdminIcon.AlertCircle,
   success: _uiAdminIcon.CheckCircle
-  // info는 floating에서는 지원하지 않음
+  // info 는 full-width 전용이라 floating 아이콘 매핑 없음.
+};
+/**
+ * NotificationColor → FeaturedIconColor 매핑.
+ * `info` 는 FeaturedIconColor 에 존재하지 않으므로 `neutral` 로 안전 fallback.
+ * `satisfies` 가 매핑 누락을 컴파일 타임에 강제하므로 향후 색상이 추가되면 즉시 타입 에러로 잡힌다.
+ */
+const iconColorMap = {
+  neutral: 'neutral',
+  error: 'error',
+  warning: 'warning',
+  success: 'success',
+  info: 'neutral'
 };
+/**
+ * `.ncua-floating-notification-host` 싱글톤을 보장하고 반환하는 훅.
+ *
+ * 이름의 `useMount...` 는 단순 조회가 아닌 **DOM 부수효과** 를 동반함을 신호한다 —
+ * 내부적으로 `mountFloatingNotificationHost()` 를 호출해 document.body 에 호스트를 append 하고
+ * (없으면) 글로벌 scroll/resize/MutationObserver 까지 부착한다. 호스트는 페이지 lifetime
+ * 싱글톤이므로 언마운트 시 제거하지 않는다.
+ *
+ * `mountFloatingNotificationHost` 는 **동기 함수** 이므로 effect 안의 호출 → setHost 가 같은 tick
+ * 에 끝나 cancellation race 가 없다. cancel flag 는 의미 없어 두지 않는다.
+ */
+function useMountFloatingNotificationHost(enabled) {
+  const [host, setHost] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    if (!enabled) return;
+    setHost((0, _host.mountFloatingNotificationHost)());
+  }, [enabled]);
+  return host;
+}
 const FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     title,
@@ -30,49 +76,65 @@ const FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _re
     className,
     actions,
     autoClose = 0,
+    portal = false,
     ...rest
   } = _ref;
   const [shouldRemove, setShouldRemove] = (0, _react.useState)(false);
-  const iconColor = color;
   const featuredIconProps = {
     icon: iconMap[color] || _uiAdminIcon.Pin02,
     size: 'sm',
-    color: iconColor,
+    color: iconColorMap[color],
     theme: 'dark-circle'
   };
   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보다 크면 무조건 타이머 설정
+    // autoClose 가 0 보다 크면 타이머 설정.
     if (autoClose > 0) {
       timerRef.current = setTimeout(() => {
-        if (onClose) {
-          onClose();
-        }
-        // DOM에서 바로 제거
+        onCloseRef.current?.();
+        // DOM 에서 바로 제거
         setShouldRemove(true);
       }, autoClose);
     }
-    // cleanup 함수: 컴포넌트 언마운트 시 타이머 정리
+    // cleanup: 컴포넌트 언마운트 또는 autoClose 변경 시 타이머 정리
     return () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
         timerRef.current = null;
       }
     };
-  }, [autoClose, onClose]);
+  }, [autoClose]);
+  // portal=true 일 때만 호스트가 필요하다.
+  const host = useMountFloatingNotificationHost(portal);
+  // a11y — 카드 root 의 role 과 제목/본문 ID. 색상에 따라 alert(error/warning) / status(나머지) 로 분기.
+  const reactId = (0, _react.useId)();
+  const titleId = `${reactId}-title`;
+  const descId = `${reactId}-desc`;
+  const role = ASSERTIVE_COLORS[color] ? 'alert' : 'status';
   // DOM에서 완전히 제거
   if (shouldRemove) {
     return null;
   }
-  return (0, _jsxRuntime.jsxs)("div", {
+  const card =
+  // a11y/예측가능성 — caller 가 className/id 등 일부는 덮어쓸 수 있게 {...rest} 를 먼저 펼치고,
+  // role/aria-labelledby/aria-describedby 같은 컴포넌트 본질 prop 은 그 뒤에 두어 우선 적용.
+  (0, _jsxRuntime.jsxs)("div", {
+    ...rest,
     ref: ref,
     className: (0, _classnames.default)('ncua-floating-notification', `ncua-floating-notification--${color}`, className),
-    role: "alert",
-    ...rest,
+    role: role,
+    "aria-labelledby": titleId,
+    "aria-describedby": supportingText ? descId : undefined,
     children: [(0, _jsxRuntime.jsx)("div", {
       className: "ncua-floating-notification__content",
       children: (0, _jsxRuntime.jsxs)("div", {
@@ -85,10 +147,12 @@ const FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _re
           children: [(0, _jsxRuntime.jsx)("div", {
             className: "ncua-floating-notification__title-wrapper",
             children: (0, _jsxRuntime.jsx)("span", {
+              id: titleId,
               className: "ncua-floating-notification__title",
               children: title
             })
           }), supportingText && (0, _jsxRuntime.jsx)("span", {
+            id: descId,
             className: "ncua-floating-notification__supporting-text",
             children: supportingText
           }), actions && (0, _jsxRuntime.jsx)("div", {
@@ -109,4 +173,13 @@ const FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _re
       onClick: onClose
     })]
   });
+  // 기본은 인라인 렌더 — 부모 JSX 트리에 카드를 그대로 둔다.
+  if (!portal) {
+    return card;
+  }
+  // portal=true 인데 SSR이거나 첫 렌더(호스트 미생성)에서는 null. useEffect 후 host 설정되면 재렌더되어 portal 마운트.
+  if (!host) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _reactDom.createPortal)(card, host);
 });

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Notification = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
+var _CalloutNotification = require("./CalloutNotification");
 var _FloatingNotification = require("./FloatingNotification");
 var _FullWidthNotification = require("./FullWidthNotification");
 var _MessageNotification = require("./MessageNotification");
@@ -36,6 +37,12 @@ const Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)(
       ref: ref
     });
   }
+  if (type === 'callout') {
+    return (0, _jsxRuntime.jsx)(_CalloutNotification.CalloutNotification, {
+      color: color,
+      ...rest
+    });
+  }
   return null;
 });
 Notification.displayName = 'Notification';

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "mountFloatingNotificationHost", {
+  enumerable: true,
+  get: function () {
+    return _notification.mountFloatingNotificationHost;
+  }
+});
+var _notification = require("../../../../assets/scripts/notification");

package/dist/cjs/src/components/overlays/tooltip/Tooltip.js

@@ -77,6 +77,42 @@ const computePanelCoords = (prefer, anchor, panel) => {
     calculatedPosition
   };
 };
+const buildPanelStyle = (disablePortal, coords, visible, zIndex) => {
+  const opacity = visible ? 1 : 0;
+  if (disablePortal) return {
+    opacity
+  };
+  return {
+    top: `${coords.top}px`,
+    left: `${coords.left}px`,
+    opacity,
+    ...(zIndex && {
+      zIndex
+    })
+  };
+};
+const renderIcon = (iconStyle, iconType, iconSize, iconColor) => {
+  if (iconStyle === 'help-circle') {
+    return iconType === 'stroke' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircle, {
+      width: iconSize,
+      height: iconSize,
+      color: iconColor
+    }) : (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircleFill, {
+      width: iconSize,
+      height: iconSize,
+      color: iconColor
+    });
+  }
+  return iconType === 'stroke' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.AlertCircle, {
+    width: iconSize,
+    height: iconSize,
+    color: iconColor
+  }) : (0, _jsxRuntime.jsx)(_uiAdminIcon.AlertCircleFill, {
+    width: iconSize,
+    height: iconSize,
+    color: iconColor
+  });
+};
 const Tooltip = _ref => {
   let {
     tooltipType = 'white',
@@ -90,7 +126,9 @@ const Tooltip = _ref => {
     iconColor = 'var(--gray-300)',
     iconStyle = 'help-circle',
     className,
-    zIndex
+    zIndex,
+    forceVisible,
+    disablePortal = false
   } = _ref;
   const iconSize = size === 'sm' ? ICON_SIZE_SM : ICON_SIZE_DEFAULT;
   const anchorRef = (0, _react.useRef)(null);
@@ -104,6 +142,7 @@ const Tooltip = _ref => {
   const [calculatedPosition, setCalculatedPosition] = (0, _react.useState)(position === 'auto' ? 'bottom' : position);
   const [isVisible, setIsVisible] = (0, _react.useState)(false);
   const [isManuallyClose, setIsManuallyClose] = (0, _react.useState)(false);
+  const effectiveVisible = forceVisible ?? isVisible;
   (0, _react.useEffect)(() => {
     setMounted(true);
     return () => {
@@ -114,7 +153,7 @@ const Tooltip = _ref => {
     };
   }, []);
   const updatePosition = (0, _react.useCallback)(() => {
-    if (!anchorRef.current || !panelRef.current) return;
+    if (disablePortal || !anchorRef.current || !panelRef.current) return;
     const anchor = anchorRef.current.getBoundingClientRect();
     const panel = panelRef.current.getBoundingClientRect();
     const next = computePanelCoords(position, anchor, panel);
@@ -123,9 +162,9 @@ const Tooltip = _ref => {
       left: next.left
     });
     setCalculatedPosition(next.calculatedPosition);
-  }, [position]);
+  }, [position, disablePortal]);
   (0, _react.useEffect)(() => {
-    if (!isVisible) return;
+    if (!effectiveVisible || disablePortal) return;
     updatePosition();
     window.addEventListener('resize', updatePosition, {
       passive: true
@@ -140,13 +179,10 @@ const Tooltip = _ref => {
         capture: true
       });
     };
-  }, [isVisible, updatePosition]);
+  }, [effectiveVisible, updatePosition, disablePortal]);
   const handleMouseEnter = (0, _react.useCallback)(() => {
     if (isManuallyClose) return;
-    // opacity 전환 전에 좌표 확정 (ref 가드는 updatePosition 내부)
     updatePosition();
-    // 웹폰트 로드·max-content 재계산 등 비동기 layout 안정화 후 한 번 더 보정
-    // 빠른 hover in/out 시 이전 프레임 요청은 취소해 중복/unmount 후 실행 방지
     if (rafIdRef.current !== null) cancelAnimationFrame(rafIdRef.current);
     rafIdRef.current = requestAnimationFrame(() => {
       rafIdRef.current = null;
@@ -170,18 +206,13 @@ const Tooltip = _ref => {
     'ncua-tooltip--stroke': iconType === 'stroke',
     'ncua-tooltip--auto': position === 'auto'
   }, className), [size, type, hideArrow, iconType, position, className]);
-  const panelClassName = (0, _react.useMemo)(() => (0, _classnames.default)('ncua-tooltip-panel', 'ncua-tooltip__bg', `ncua-tooltip__bg--${tooltipType}`, `ncua-tooltip__bg--${finalPosition}`, {
-    'ncua-tooltip__bg--visible': isVisible,
-    'ncua-tooltip__bg--force-hidden': isManuallyClose
-  }), [tooltipType, finalPosition, isVisible, isManuallyClose]);
-  const panelStyle = {
-    top: `${coords.top}px`,
-    left: `${coords.left}px`,
-    opacity: isVisible ? 1 : 0,
-    ...(zIndex && {
-      zIndex
-    })
-  };
+  const panelClassName = (0, _react.useMemo)(() => (0, _classnames.default)({
+    'ncua-tooltip-panel': !disablePortal
+  }, 'ncua-tooltip__bg', `ncua-tooltip__bg--${tooltipType}`, `ncua-tooltip__bg--${finalPosition}`, {
+    'ncua-tooltip__bg--visible': effectiveVisible,
+    'ncua-tooltip__bg--force-hidden': isManuallyClose && !forceVisible
+  }), [tooltipType, finalPosition, effectiveVisible, isManuallyClose, forceVisible, disablePortal]);
+  const panelStyle = buildPanelStyle(disablePortal, coords, effectiveVisible, zIndex);
   const portalTarget = mounted ? resolvePortalTarget() : null;
   const panel = (0, _jsxRuntime.jsxs)("span", {
     ref: panelRef,
@@ -201,30 +232,12 @@ const Tooltip = _ref => {
       "aria-label": "\uD234\uD301 \uB2EB\uAE30"
     })]
   });
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsxs)("span", {
-      ref: anchorRef,
-      className: tooltipClassName,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      children: [iconStyle === 'help-circle' && (iconType === 'stroke' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircle, {
-        width: iconSize,
-        height: iconSize,
-        color: iconColor
-      }) : (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircleFill, {
-        width: iconSize,
-        height: iconSize,
-        color: iconColor
-      })), iconStyle === 'alert-circle' && (iconType === 'stroke' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.AlertCircle, {
-        width: iconSize,
-        height: iconSize,
-        color: iconColor
-      }) : (0, _jsxRuntime.jsx)(_uiAdminIcon.AlertCircleFill, {
-        width: iconSize,
-        height: iconSize,
-        color: iconColor
-      }))]
-    }), portalTarget && /*#__PURE__*/(0, _reactDom.createPortal)(panel, portalTarget)]
+  return (0, _jsxRuntime.jsxs)("span", {
+    ref: anchorRef,
+    className: tooltipClassName,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    children: [renderIcon(iconStyle, iconType, iconSize, iconColor), disablePortal ? panel : portalTarget && /*#__PURE__*/(0, _reactDom.createPortal)(panel, portalTarget)]
   });
 };
 exports.Tooltip = Tooltip;

package/dist/cjs/src/components/select-dropdown/SelectDropdown.js

@@ -27,6 +27,7 @@ const SelectDropdown = exports.SelectDropdown = /*#__PURE__*/(0, _react.forwardR
     multiple = false,
     showFooterButtons = false,
     selectAllButtonText = '전체 선택',
+    showSelectAllAction = true,
     onSelectAll,
     onEdit,
     onComplete,
@@ -92,7 +93,7 @@ const SelectDropdown = exports.SelectDropdown = /*#__PURE__*/(0, _react.forwardR
         className: "ncua-select-dropdown__footer-buttons",
         children: [(0, _jsxRuntime.jsx)("div", {
           className: "ncua-select-dropdown__footer-left",
-          children: multiple && (0, _jsxRuntime.jsx)(_button.Button, {
+          children: multiple && showSelectAllAction && (0, _jsxRuntime.jsx)(_button.Button, {
             label: selectAllButtonText,
             hierarchy: "text",
             size: "xs",

package/dist/cjs/src/contexts/FloatingContext.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFloatingContext = exports.FloatingProvider = void 0;
+var _react = require("react");
+const FloatingContext = /*#__PURE__*/(0, _react.createContext)(null);
+const FloatingProvider = exports.FloatingProvider = FloatingContext.Provider;
+const useFloatingContext = () => (0, _react.useContext)(FloatingContext);
+exports.useFloatingContext = useFloatingContext;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _FloatingContext = require("./FloatingContext");
+Object.keys(_FloatingContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FloatingContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FloatingContext[key];
+    }
+  });
+});

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

@@ -25,6 +25,17 @@ Object.keys(_useCallbackRef).forEach(function (key) {
     }
   });
 });
+var _useFloatingPosition = require("./useFloatingPosition");
+Object.keys(_useFloatingPosition).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useFloatingPosition[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useFloatingPosition[key];
+    }
+  });
+});
 var _useMediaQuery = require("./useMediaQuery");
 Object.keys(_useMediaQuery).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFloatingPosition = void 0;
+var _react = require("react");
+const FLOATING_Z_INDEX = 1500;
+const useFloatingPosition = _ref => {
+  let {
+    enabled,
+    isOpen,
+    triggerRef,
+    floatingRef,
+    direction,
+    offset = 4,
+    align = 'left',
+    matchTriggerWidth = false
+  } = _ref;
+  const [style, setStyle] = (0, _react.useState)(null);
+  (0, _react.useLayoutEffect)(() => {
+    if (!enabled || !isOpen) {
+      setStyle(null);
+      return;
+    }
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    const calculatePosition = (trigger, floatingHeight, floatingWidth) => {
+      const top = direction === 'up' ? trigger.top - floatingHeight - offset : trigger.bottom + offset;
+      const left = align === 'right' ? trigger.right - floatingWidth : trigger.left;
+      return {
+        top,
+        left
+      };
+    };
+    const update = () => {
+      const t = triggerRef.current;
+      const f = floatingRef.current;
+      if (!t) return;
+      const r = t.getBoundingClientRect();
+      const floatingHeight = f?.offsetHeight ?? 0;
+      const floatingWidth = matchTriggerWidth ? r.width : f?.offsetWidth ?? r.width;
+      const {
+        top,
+        left
+      } = calculatePosition(r, floatingHeight, floatingWidth);
+      // matchTriggerWidth=true: width는 max-content(콘텐츠 자연 너비), min-width만 trigger 너비로 보장.
+      // 옵션이 짧으면 trigger 너비, 길면 자연 확장 — 기존 absolute 모드와 동일한 UX.
+      setStyle({
+        position: 'fixed',
+        top,
+        left,
+        zIndex: FLOATING_Z_INDEX,
+        ...(matchTriggerWidth ? {
+          minWidth: r.width
+        } : {})
+      });
+    };
+    update();
+    window.addEventListener('scroll', update, true);
+    window.addEventListener('resize', update);
+    const triggerObserver = new ResizeObserver(update);
+    triggerObserver.observe(trigger);
+    let floatingObserver;
+    if (floatingRef.current) {
+      floatingObserver = new ResizeObserver(update);
+      floatingObserver.observe(floatingRef.current);
+    }
+    return () => {
+      window.removeEventListener('scroll', update, true);
+      window.removeEventListener('resize', update);
+      triggerObserver.disconnect();
+      floatingObserver?.disconnect();
+    };
+  }, [enabled, isOpen, direction, offset, align, matchTriggerWidth, triggerRef, floatingRef]);
+  return style;
+};
+exports.useFloatingPosition = useFloatingPosition;