@ncds/ui-admin 1.8.4 → 1.8.6

package/dist/temp/src/components/forms-and-input/slider/Slider.js

@@ -40,4 +40,3 @@ export const Slider = ({ min = 0, max = 100, step = 1, value = 0, onChange, labe
     }, [disabled]);
     return _jsx("div", { ref: containerRef, className: `ncua-slider ${className || ''}` });
 };
-export default Slider;

package/dist/temp/src/components/overlays/dropdown/Dropdown.d.ts

@@ -49,6 +49,11 @@ export type DropdownBaseProps = {
     className?: string;
     opened?: boolean;
     closeOnClickOutside?: boolean;
+    /**
+     * 메뉴를 React Portal로 body에 렌더한다.
+     * 미지정 시 FloatingContext.preferPortal 값을 따른다 (DataGrid.Table horizontalScroll 내부에서는 자동 true).
+     */
+    usePortal?: boolean;
 };
 export type ActionDropdownProps = DropdownBaseProps & {
     variant?: 'action';

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

@@ -7,6 +7,9 @@ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-sc
 import { attachClosestEdge, extractClosestEdge, } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { DotsGrid02, DotsVertical, Eye, EyeOff } from '@ncds/ui-admin-icon';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useFloatingPosition } from '../../../hooks/useFloatingPosition';
+import { usePortalState } from '../../../hooks/usePortalState';
 import { Button } from '../../action/button';
 import { applyDraftToItems, arrayReorderByEdge, hasDraftChanged, initDraftState } from './utils';
 const DROPDOWN_ID_RADIX = 36;
@@ -82,14 +85,25 @@ const SortableConfigItem = ({ item, isVisible, showVisibilityToggle, sortable, d
                     }
                 }, children: _jsx(DotsGrid02, {}) })), _jsx("div", { className: "ncua-dropdown__item-content", children: _jsxs("div", { className: "ncua-dropdown__item-text-group", children: [ItemIcon && _jsx(ItemIcon, { className: "ncua-dropdown__item-icon" }), _jsx("span", { className: "ncua-dropdown__item-text", children: item.text })] }) }), showVisibilityToggle && (_jsx("button", { type: "button", className: "ncua-dropdown__item-visibility", "aria-label": `${item.text} 노출`, "aria-pressed": isVisible, onClick: () => onToggleVisibility(item.id), children: isVisible ? _jsx(Eye, {}) : _jsx(EyeOff, {}) }))] }));
 };
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 액션/설정 두 variant 통합 + drag-and-drop 필수 분기
 export const Dropdown = (props) => {
-    const { trigger, align = 'left', header, groups, className, opened = false, closeOnClickOutside = true } = props;
+    const { trigger, align = 'left', header, groups, className, opened = false, closeOnClickOutside = true, usePortal, } = props;
     const variant = props.variant ?? 'action';
     const closeOnClickItem = variant === 'action' ? (props.closeOnClickItem ?? true) : false;
     const [isOpen, setIsOpen] = useState(opened);
     const dropdownRef = useRef(null);
     const triggerRef = useRef(null);
+    const menuRef = useRef(null);
     const menuItemsRef = useRef(null);
+    const { shouldPortal, portalContainer } = usePortalState(usePortal);
+    const floatingStyle = useFloatingPosition({
+        enabled: shouldPortal,
+        isOpen,
+        triggerRef,
+        floatingRef: menuRef,
+        direction: 'down',
+        align,
+    });
     const dropdownIdRef = useRef(`ncua-dropdown-${Math.random().toString(DROPDOWN_ID_RADIX).slice(DROPDOWN_ID_SLICE_START, DROPDOWN_ID_SLICE_END)}`);
     const dropdownId = dropdownIdRef.current;
     useEffect(() => {
@@ -144,7 +158,10 @@ export 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);
         }
     };
@@ -156,6 +173,7 @@ export const Dropdown = (props) => {
             }
         }
     };
+    // biome-ignore lint/correctness/useExhaustiveDependencies: handleClickOutside는 안정적 참조
     useEffect(() => {
         if (closeOnClickOutside) {
             document.addEventListener('mousedown', handleClickOutside);
@@ -165,6 +183,7 @@ export const Dropdown = (props) => {
         }
     }, [closeOnClickOutside]);
     // ESC 키로 닫고 trigger로 포커스 복귀
+    // biome-ignore lint/correctness/useExhaustiveDependencies: closeAndRestoreFocus는 안정적 참조
     useEffect(() => {
         if (!isOpen)
             return;
@@ -261,13 +280,18 @@ export const Dropdown = (props) => {
     const dropdownClasses = ['ncua-dropdown', className, align === 'right' ? 'ncua-dropdown--right' : '']
         .filter(Boolean)
         .join(' ');
-    return (_jsxs("div", { className: dropdownClasses, ref: dropdownRef, children: [renderTrigger(), isOpen && (_jsxs("div", { className: "ncua-dropdown__menu", role: variant === 'config' ? 'dialog' : 'menu', "aria-label": variant === 'config' ? '설정' : undefined, children: [renderHeader(), _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 (_jsx("div", { className: "ncua-dropdown__group", children: orderedItems.map((item) => variant === 'config' ? renderConfigItem(item, group.sortable === true) : renderActionItem(item)) }, group.items[0]?.id));
-                        }) }), renderFooter()] }))] }));
+    const menuClasses = ['ncua-dropdown__menu', shouldPortal ? 'ncua-dropdown__menu--portal' : '']
+        .filter(Boolean)
+        .join(' ');
+    const menuNode = isOpen ? (_jsxs("div", { ref: menuRef, className: menuClasses, role: variant === 'config' ? 'dialog' : 'menu', "aria-label": variant === 'config' ? '설정' : undefined, style: shouldPortal && floatingStyle ? floatingStyle : undefined, children: [renderHeader(), _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 (_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 ? createPortal(menuNode, portalContainer) : null;
+    return (_jsxs("div", { className: dropdownClasses, ref: dropdownRef, children: [renderTrigger(), !shouldPortal && menuNode, portaledMenu] }));
 };

package/dist/temp/src/components/overlays/notification/CalloutNotification.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import type { NotificationColor } from './Notification';
+interface CalloutNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    color?: NotificationColor;
+    title?: ReactNode;
+}
+declare const CalloutNotification: import("react").ForwardRefExoticComponent<CalloutNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { CalloutNotificationProps };
+export { CalloutNotification };

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+const CalloutNotification = forwardRef(({ color = 'neutral', className, title, ...rest }, ref) => (_jsx("div", { ref: ref, className: classNames('ncua-callout-notification', `ncua-callout-notification--${color}`, className), ...rest, children: title })));
+CalloutNotification.displayName = 'CalloutNotification';
+export { CalloutNotification };

package/dist/temp/src/components/overlays/notification/FloatingNotification.d.ts

@@ -31,6 +31,21 @@ interface FloatingNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>
      * @default 0
      */
     autoClose?: number;
+    /**
+     * Portal 마운트 여부.
+     *
+     * - `false` (기본값): 부모 JSX 트리 안에 카드로 그대로 렌더된다.
+     *   특정 컨테이너 안에서 표시하거나, 인라인 미리보기 (docs/스토리북) 용도.
+     *
+     * - `true`: document.body의 `.ncua-floating-notification-host` 싱글톤에
+     *   `createPortal`로 마운트되어 우측 상단에 노출. 다중 발생 시 최신 토스트가
+     *   상단에 노출되고 이전 토스트들이 아래로 12px씩 겹쳐 쌓인다 (LIFO,
+     *   `--ncua-floating-notification-stack-overlap` 변수로 조정 가능).
+     *   Vanilla(CDN) 측 `new ncua.Notification({type:'floating'}).show()` 와 동일한 동작.
+     *
+     * @default false
+     */
+    portal?: boolean;
 }
 declare const FloatingNotification: import("react").ForwardRefExoticComponent<FloatingNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { FloatingNotificationProps };

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

@@ -1,56 +1,124 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertCircle, AlertTriangle, CheckCircle, Pin02 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
-import { forwardRef, useEffect, useRef, useState } from 'react';
+import { forwardRef, useEffect, useId, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { MEDIA_QUERY } from '../../../constant/breakpoint';
 import { useMediaQuery } from '../../../hooks/useMediaQuery';
 import { Button } from '../../action/button';
 import { ButtonCloseX } from '../../action/button/ButtonCloseX';
 import { FeaturedIcon, } from '../../image-and-icons/featured-icon/FeaturedIcon';
+// 호스트 싱글톤은 vanilla/React 양쪽이 동일한 함수를 공유한다 — host.ts 가 가까운 진입점 역할을
+// 하므로 React 컴포넌트는 deep relative path 로 vanilla internals 를 직접 import 하지 않는다.
+import { mountFloatingNotificationHost } from './host';
+/**
+ * 색상별 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: Pin02,
     error: AlertTriangle,
     warning: AlertCircle,
     success: 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',
 };
-const FloatingNotification = forwardRef(({ title, supportingText, color = 'neutral', onClose, className, actions, autoClose = 0, ...rest }, ref) => {
+/**
+ * `.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] = useState(null);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        setHost(mountFloatingNotificationHost());
+    }, [enabled]);
+    return host;
+}
+const FloatingNotification = forwardRef(({ title, supportingText, color = 'neutral', onClose, className, actions, autoClose = 0, portal = false, ...rest }, ref) => {
     const [shouldRemove, setShouldRemove] = useState(false);
-    const iconColor = color;
     const featuredIconProps = {
         icon: iconMap[color] || Pin02,
         size: 'sm',
-        color: iconColor,
+        color: iconColorMap[color],
         theme: 'dark-circle',
     };
     const isMobile = useMediaQuery(MEDIA_QUERY.mobile, {
         onMatched: onClose,
     });
+    // onClose 는 매 렌더 새 함수 ref 일 수 있으므로 ref 로 latest 만 보관.
+    // → autoClose 타이머 effect 의 deps 에서 onClose 를 빼서 타이머 재시작 회피.
+    // render 본문에서 직접 할당 — useEffect 로 미루면 같은 commit 안에서 fire 되는 타이머가 stale onClose 를 볼 위험.
+    const onCloseRef = useRef(onClose);
+    onCloseRef.current = onClose;
     // autoClose 타이머 관리
     const timerRef = useRef(null);
+    // onClose 는 onCloseRef 로 latest 만 추적하므로 deps 에서 제외 (의도된 패턴).
     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 = useId();
+    const titleId = `${reactId}-title`;
+    const descId = `${reactId}-desc`;
+    const role = ASSERTIVE_COLORS[color] ? 'alert' : 'status';
     // DOM에서 완전히 제거
     if (shouldRemove) {
         return null;
     }
-    return (_jsxs("div", { ref: ref, className: classNames('ncua-floating-notification', `ncua-floating-notification--${color}`, className), role: "alert", ...rest, children: [_jsx("div", { className: "ncua-floating-notification__content", children: _jsxs("div", { className: "ncua-floating-notification__container", children: [iconMap[color] && _jsx(FeaturedIcon, { ...featuredIconProps, size: isMobile ? 'md' : 'sm' }), _jsxs("div", { className: "ncua-floating-notification__text-container", children: [_jsx("div", { className: "ncua-floating-notification__title-wrapper", children: _jsx("span", { className: "ncua-floating-notification__title", children: title }) }), supportingText && _jsx("span", { className: "ncua-floating-notification__supporting-text", children: supportingText }), actions && (_jsx("div", { className: "ncua-floating-notification__actions", children: actions.map((action) => (_jsx(Button, { size: "xs", hierarchy: action.hierarchy || 'text', label: action.label, onClick: action?.onClick }, `${action.label}-${action.hierarchy}`))) }))] })] }) }), onClose && (_jsx(ButtonCloseX, { theme: "light", className: "ncua-floating-notification__close-button", size: isMobile ? 'sm' : 'xs', onClick: onClose }))] }));
+    const card = (
+    // a11y/예측가능성 — caller 가 className/id 등 일부는 덮어쓸 수 있게 {...rest} 를 먼저 펼치고,
+    // role/aria-labelledby/aria-describedby 같은 컴포넌트 본질 prop 은 그 뒤에 두어 우선 적용.
+    _jsxs("div", { ...rest, ref: ref, className: classNames('ncua-floating-notification', `ncua-floating-notification--${color}`, className), role: role, "aria-labelledby": titleId, "aria-describedby": supportingText ? descId : undefined, children: [_jsx("div", { className: "ncua-floating-notification__content", children: _jsxs("div", { className: "ncua-floating-notification__container", children: [iconMap[color] && _jsx(FeaturedIcon, { ...featuredIconProps, size: isMobile ? 'md' : 'sm' }), _jsxs("div", { className: "ncua-floating-notification__text-container", children: [_jsx("div", { className: "ncua-floating-notification__title-wrapper", children: _jsx("span", { id: titleId, className: "ncua-floating-notification__title", children: title }) }), supportingText && (_jsx("span", { id: descId, className: "ncua-floating-notification__supporting-text", children: supportingText })), actions && (_jsx("div", { className: "ncua-floating-notification__actions", children: actions.map((action) => (_jsx(Button, { size: "xs", hierarchy: action.hierarchy || 'text', label: action.label, onClick: action?.onClick }, `${action.label}-${action.hierarchy}`))) }))] })] }) }), onClose && (_jsx(ButtonCloseX, { theme: "light", className: "ncua-floating-notification__close-button", size: isMobile ? 'sm' : 'xs', onClick: onClose }))] }));
+    // 기본은 인라인 렌더 — 부모 JSX 트리에 카드를 그대로 둔다.
+    if (!portal) {
+        return card;
+    }
+    // portal=true 인데 SSR이거나 첫 렌더(호스트 미생성)에서는 null. useEffect 후 host 설정되면 재렌더되어 portal 마운트.
+    if (!host) {
+        return null;
+    }
+    return createPortal(card, host);
 });
 export { FloatingNotification };

package/dist/temp/src/components/overlays/notification/Notification.d.ts

@@ -2,7 +2,8 @@ import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 import type { ColorTone } from '../../../../constant/color';
 import type { SlotIconComponent } from '../../../types/side-slot';
 import type { ButtonTheme } from '../../action/button';
-type NotificationType = 'floating' | 'full-width' | 'message';
+import { type CalloutNotificationProps } from './CalloutNotification';
+type NotificationType = 'floating' | 'full-width' | 'message' | 'callout';
 type NotificationColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'info'>;
 type NotificationSize = 'desktop' | 'mobile';
 interface NotificationAction {
@@ -26,9 +27,9 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
      */
     type?: NotificationType;
     /**
-     * 알림 제목 텍스트
+     * 알림 제목 텍스트 (callout 유형에서는 안내 텍스트로 사용)
      */
-    title: ReactNode;
+    title?: ReactNode;
     /**
      * 알림 본문 텍스트 (선택사항)
      */
@@ -66,7 +67,21 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
      * message, full-width 타입에서 사용 가능
      */
     onHidePermanently?: () => void;
+    /**
+     * Portal 마운트 여부. `floating` 타입에서만 동작한다.
+     *
+     * 기본값 `false`에서는 부모 JSX 트리 안에 카드로 그대로 렌더된다.
+     * `true`로 설정하면 자동으로 document.body의 `.ncua-floating-notification-host`
+     * 호스트에 createPortal로 마운트되어 우측 상단에 노출되고 LIFO로 스택된다
+     * — 최신 토스트가 상단에 노출되고 이전 토스트들이 아래로 12px씩 겹쳐 쌓인다
+     * (vanilla `Notification.show()`와 동일, `--ncua-floating-notification-stack-overlap`
+     * 변수로 조정 가능).
+     *
+     * @default false
+     */
+    portal?: boolean;
 }
 declare const Notification: import("react").ForwardRefExoticComponent<NotificationProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { NotificationType, NotificationColor, NotificationSize, NotificationAction, NotificationProps };
+export type { CalloutNotificationProps };
 export { Notification };

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
+import { CalloutNotification } from './CalloutNotification';
 import { FloatingNotification } from './FloatingNotification';
 import { FullWidthNotification } from './FullWidthNotification';
 import { MessageNotification } from './MessageNotification';
@@ -13,6 +14,9 @@ const Notification = forwardRef(({ type = 'floating', color = 'neutral', ...rest
     if (type === 'message') {
         return _jsx(MessageNotification, { color: color, ...rest, ref: ref });
     }
+    if (type === 'callout') {
+        return _jsx(CalloutNotification, { color: color, ...rest });
+    }
     return null;
 });
 Notification.displayName = 'Notification';

package/dist/temp/src/components/overlays/notification/host.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Floating Notification 호스트 관리 — React 측 진입점.
+ *
+ * 실제 구현은 vanilla/React 가 공유하는 `assets/scripts/notification/positionSync.ts` 에 있고,
+ * 외부 노출은 그 폴더의 public barrel(`assets/scripts/notification/index.ts`)이 담당한다.
+ * 이 모듈은 React 컴포넌트가 vanilla 내부 파일을 직접 참조하지 않도록 barrel 을 경유하는
+ * 한 단계 re-export 만 제공한다 — positionSync.ts 의 위치/이름이 바뀌어도 host.ts 만 영향.
+ */
+export { mountFloatingNotificationHost } from '../../../../assets/scripts/notification';

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

@@ -0,0 +1,9 @@
+/**
+ * Floating Notification 호스트 관리 — React 측 진입점.
+ *
+ * 실제 구현은 vanilla/React 가 공유하는 `assets/scripts/notification/positionSync.ts` 에 있고,
+ * 외부 노출은 그 폴더의 public barrel(`assets/scripts/notification/index.ts`)이 담당한다.
+ * 이 모듈은 React 컴포넌트가 vanilla 내부 파일을 직접 참조하지 않도록 barrel 을 경유하는
+ * 한 단계 re-export 만 제공한다 — positionSync.ts 의 위치/이름이 바뀌어도 host.ts 만 영향.
+ */
+export { mountFloatingNotificationHost } from '../../../../assets/scripts/notification';

package/dist/temp/src/components/overlays/tooltip/Tooltip.d.ts

@@ -12,6 +12,10 @@ interface TooltipProps {
     iconColor?: string;
     iconStyle?: 'help-circle' | 'alert-circle';
     zIndex?: number;
+    /** 외부에서 직접 패널 표시 여부를 제어 */
+    forceVisible?: boolean;
+    /** true이면 Portal 없이 앵커 내부에 패널을 인라인 렌더링. CSS 기반 위치 지정이 필요한 경우 사용 */
+    disablePortal?: boolean;
 }
-export declare const Tooltip: ({ tooltipType, iconType, position, size, title, content, hideArrow, type, iconColor, iconStyle, className, zIndex, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ tooltipType, iconType, position, size, title, content, hideArrow, type, iconColor, iconStyle, className, zIndex, forceVisible, disablePortal, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertCircle, AlertCircleFill, HelpCircle, HelpCircleFill } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -74,7 +74,19 @@ const computePanelCoords = (prefer, anchor, panel) => {
     top = Math.max(VIEWPORT_MARGIN, Math.min(top, window.innerHeight - panel.height - VIEWPORT_MARGIN));
     return { top: Math.round(top), left: Math.round(left), calculatedPosition };
 };
-export const Tooltip = ({ tooltipType = 'white', iconType = 'stroke', position = 'auto', size = 'sm', title, content, hideArrow = false, type = 'short', iconColor = 'var(--gray-300)', iconStyle = 'help-circle', className, zIndex, }) => {
+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' ? (_jsx(HelpCircle, { width: iconSize, height: iconSize, color: iconColor })) : (_jsx(HelpCircleFill, { width: iconSize, height: iconSize, color: iconColor }));
+    }
+    return iconType === 'stroke' ? (_jsx(AlertCircle, { width: iconSize, height: iconSize, color: iconColor })) : (_jsx(AlertCircleFill, { width: iconSize, height: iconSize, color: iconColor }));
+};
+export const Tooltip = ({ tooltipType = 'white', iconType = 'stroke', position = 'auto', size = 'sm', title, content, hideArrow = false, type = 'short', iconColor = 'var(--gray-300)', iconStyle = 'help-circle', className, zIndex, forceVisible, disablePortal = false, }) => {
     const iconSize = size === 'sm' ? ICON_SIZE_SM : ICON_SIZE_DEFAULT;
     const anchorRef = useRef(null);
     const panelRef = useRef(null);
@@ -84,6 +96,7 @@ export const Tooltip = ({ tooltipType = 'white', iconType = 'stroke', position =
     const [calculatedPosition, setCalculatedPosition] = useState(position === 'auto' ? 'bottom' : position);
     const [isVisible, setIsVisible] = useState(false);
     const [isManuallyClose, setIsManuallyClose] = useState(false);
+    const effectiveVisible = forceVisible ?? isVisible;
     useEffect(() => {
         setMounted(true);
         return () => {
@@ -94,16 +107,16 @@ export const Tooltip = ({ tooltipType = 'white', iconType = 'stroke', position =
         };
     }, []);
     const updatePosition = useCallback(() => {
-        if (!anchorRef.current || !panelRef.current)
+        if (disablePortal || !anchorRef.current || !panelRef.current)
             return;
         const anchor = anchorRef.current.getBoundingClientRect();
         const panel = panelRef.current.getBoundingClientRect();
         const next = computePanelCoords(position, anchor, panel);
         setCoords({ top: next.top, left: next.left });
         setCalculatedPosition(next.calculatedPosition);
-    }, [position]);
+    }, [position, disablePortal]);
     useEffect(() => {
-        if (!isVisible)
+        if (!effectiveVisible || disablePortal)
             return;
         updatePosition();
         window.addEventListener('resize', updatePosition, { passive: true });
@@ -112,14 +125,11 @@ export const Tooltip = ({ tooltipType = 'white', iconType = 'stroke', position =
             window.removeEventListener('resize', updatePosition);
             window.removeEventListener('scroll', updatePosition, { capture: true });
         };
-    }, [isVisible, updatePosition]);
+    }, [effectiveVisible, updatePosition, disablePortal]);
     const handleMouseEnter = 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(() => {
@@ -144,19 +154,12 @@ export const Tooltip = ({ tooltipType = 'white', iconType = 'stroke', position =
         'ncua-tooltip--stroke': iconType === 'stroke',
         'ncua-tooltip--auto': position === 'auto',
     }, className), [size, type, hideArrow, iconType, position, className]);
-    const panelClassName = useMemo(() => classNames('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 = useMemo(() => classNames({ '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 = (_jsxs("span", { ref: panelRef, className: panelClassName, style: panelStyle, children: [title && _jsx("span", { className: "ncua-tooltip__title", children: title }), content && _jsx("span", { className: "ncua-tooltip__content", children: content }), type === 'long' && (_jsx(ButtonCloseX, { className: "ncua-tooltip__close-button", size: "xs", theme: tooltipType === 'white' ? 'dark' : 'light', onClick: handleCloseClick, "aria-label": "\uD234\uD301 \uB2EB\uAE30" }))] }));
-    return (_jsxs(_Fragment, { children: [_jsxs("span", { ref: anchorRef, className: tooltipClassName, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [iconStyle === 'help-circle' &&
-                        (iconType === 'stroke' ? (_jsx(HelpCircle, { width: iconSize, height: iconSize, color: iconColor })) : (_jsx(HelpCircleFill, { width: iconSize, height: iconSize, color: iconColor }))), iconStyle === 'alert-circle' &&
-                        (iconType === 'stroke' ? (_jsx(AlertCircle, { width: iconSize, height: iconSize, color: iconColor })) : (_jsx(AlertCircleFill, { width: iconSize, height: iconSize, color: iconColor })))] }), portalTarget && createPortal(panel, portalTarget)] }));
+    return (_jsxs("span", { ref: anchorRef, className: tooltipClassName, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [renderIcon(iconStyle, iconType, iconSize, iconColor), disablePortal ? panel : portalTarget && createPortal(panel, portalTarget)] }));
 };

package/dist/temp/src/components/select-dropdown/SelectDropdown.d.ts

@@ -17,6 +17,12 @@ type SelectDropdownProps = ComponentPropsWithRef<'div'> & {
     multiple?: boolean;
     showFooterButtons?: boolean;
     selectAllButtonText?: string;
+    /**
+     * footer의 "전체 선택" Link 노출 여부 (default: `true`).
+     * footer 자체(편집/선택 완료 버튼)는 영향받지 않는다.
+     * 호출자가 도메인 조건(예: 최대 선택 개수 제한)에 따라 `false`로 내리면 Link만 숨겨진다.
+     */
+    showSelectAllAction?: boolean;
     onSelectAll?: () => void;
     onEdit?: () => void;
     onComplete?: () => void;

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { Button } from '../action/button';
-const SelectDropdown = forwardRef(({ isOpen, direction = 'down', size = 'xs', options, value, focusedIndex, maxHeight, listboxId = 'selectbox-options-default', onOptionSelect, onMouseMove, isKeyboardNavigation, onOptionHover, children, multiple = false, showFooterButtons = false, selectAllButtonText = '전체 선택', onSelectAll, onEdit, onComplete, className, activeDescendantId, componentType, align = 'left', ...props }, ref) => {
+const SelectDropdown = forwardRef(({ isOpen, direction = 'down', size = 'xs', options, value, focusedIndex, maxHeight, listboxId = 'selectbox-options-default', onOptionSelect, onMouseMove, isKeyboardNavigation, onOptionHover, children, multiple = false, showFooterButtons = false, selectAllButtonText = '전체 선택', showSelectAllAction = true, onSelectAll, onEdit, onComplete, className, activeDescendantId, componentType, align = 'left', ...props }, ref) => {
     if (!isOpen)
         return null;
     return (_jsxs("div", { ref: ref, className: classNames('ncua-select-dropdown', `ncua-select-dropdown--${direction}`, `ncua-select-dropdown--${size}`, {
@@ -20,7 +20,7 @@ const SelectDropdown = forwardRef(({ isOpen, direction = 'down', size = 'xs', op
                                     'ncua-select-dropdown__option--selected': isSelected,
                                     'ncua-select-dropdown__option--focused': isFocused,
                                 }), onClick: () => onOptionSelect(option), onMouseEnter: handleMouseEnter, role: "option", "aria-selected": isSelected, children: [option.icon && (_jsx("span", { className: "ncua-select-dropdown__option-icon", children: _jsx(option.icon, { width: 16, height: 16 }) })), _jsx("span", { className: "ncua-select-dropdown__option-text", children: option.label })] }, option.id));
-                        }), children] }) }), showFooterButtons && (_jsx("div", { className: "ncua-select-dropdown__footer", children: _jsxs("div", { className: "ncua-select-dropdown__footer-buttons", children: [_jsx("div", { className: "ncua-select-dropdown__footer-left", children: multiple && (_jsx(Button, { label: selectAllButtonText, hierarchy: "text", size: "xs", onClick: onSelectAll, underline: true })) }), _jsxs("div", { className: "ncua-select-dropdown__footer-right", children: [_jsx(Button, { label: "\uD3B8\uC9D1", hierarchy: "secondary-gray", size: "xs", onClick: onEdit }), multiple && _jsx(Button, { label: "\uC120\uD0DD \uC644\uB8CC", hierarchy: "secondary", size: "xs", onClick: onComplete })] })] }) }))] }));
+                        }), children] }) }), showFooterButtons && (_jsx("div", { className: "ncua-select-dropdown__footer", children: _jsxs("div", { className: "ncua-select-dropdown__footer-buttons", children: [_jsx("div", { className: "ncua-select-dropdown__footer-left", children: multiple && showSelectAllAction && (_jsx(Button, { label: selectAllButtonText, hierarchy: "text", size: "xs", onClick: onSelectAll, underline: true })) }), _jsxs("div", { className: "ncua-select-dropdown__footer-right", children: [_jsx(Button, { label: "\uD3B8\uC9D1", hierarchy: "secondary-gray", size: "xs", onClick: onEdit }), multiple && _jsx(Button, { label: "\uC120\uD0DD \uC644\uB8CC", hierarchy: "secondary", size: "xs", onClick: onComplete })] })] }) }))] }));
 });
 SelectDropdown.displayName = 'SelectDropdown';
 export { SelectDropdown };

package/dist/temp/src/contexts/FloatingContext.d.ts

@@ -0,0 +1,6 @@
+export type FloatingContextValue = {
+    preferPortal: boolean;
+    portalContainer?: HTMLElement | null;
+};
+export declare const FloatingProvider: import("react").Provider<FloatingContextValue | null>;
+export declare const useFloatingContext: () => FloatingContextValue | null;

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

@@ -0,0 +1,4 @@
+import { createContext, useContext } from 'react';
+const FloatingContext = createContext(null);
+export const FloatingProvider = FloatingContext.Provider;
+export const useFloatingContext = () => useContext(FloatingContext);

package/dist/temp/src/contexts/index.d.ts

@@ -0,0 +1 @@
+export * from './FloatingContext';

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

@@ -0,0 +1 @@
+export * from './FloatingContext';

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

@@ -1,4 +1,5 @@
 export * from './dropdown';
 export * from './useCallbackRef';
+export * from './useFloatingPosition';
 export * from './useMediaQuery';
 export * from './useMergeRefs';

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

@@ -2,5 +2,6 @@
 // 드롭다운 관련 hooks
 export * from './dropdown';
 export * from './useCallbackRef';
+export * from './useFloatingPosition';
 export * from './useMediaQuery';
 export * from './useMergeRefs';

package/dist/temp/src/hooks/useFloatingPosition.d.ts

@@ -0,0 +1,19 @@
+import { type CSSProperties, type RefObject } from 'react';
+type FloatingDirection = 'up' | 'down';
+type UseFloatingPositionParams = {
+    enabled: boolean;
+    isOpen: boolean;
+    triggerRef: RefObject<HTMLElement | null>;
+    floatingRef: RefObject<HTMLElement | null>;
+    direction: FloatingDirection;
+    offset?: number;
+    align?: 'left' | 'right';
+    /**
+     * true면 floating 요소의 width를 trigger 너비에 맞춘다.
+     * Portal 모드에서 부모가 body로 바뀌면서 min-width: 100% 같은 CSS가 viewport 너비로
+     * 폭주하는 것을 막는다 (예: SelectBox 옵션 패널).
+     */
+    matchTriggerWidth?: boolean;
+};
+export declare const useFloatingPosition: ({ enabled, isOpen, triggerRef, floatingRef, direction, offset, align, matchTriggerWidth, }: UseFloatingPositionParams) => CSSProperties | null;
+export {};