@ncds/ui-admin 1.8.24 → 1.8.25-alpha.1

package/dist/types/src/components/forms-and-input/combo-box/ComboBox.d.ts

@@ -34,6 +34,12 @@ interface ComboBoxProps extends Omit<ComponentPropsWithRef<'div'>, 'size' | 'onC
      * 완료 버튼 클릭 시 호출되는 콜백 — 현재 선택된 값을 인자로 받음 (multiple 모드에서만 트리거)
      */
     onComplete?: OptionChangeHandler;
+    /**
+     * 옵션 패널을 React Portal로 body에 렌더한다. 기본값 false — 명시적으로 켠 경우에만 동작한다.
+     * SelectBox·Dropdown 과 달리 FloatingContext.preferPortal 을 따르지 않는다. 컨텍스트를 따르면
+     * Table horizontalScroll 안의 기존 ComboBox 가 옵션 지정 없이 Portal 로 전환되기 때문이다.
+     */
+    usePortal?: boolean;
 }
 declare const ComboBox: import("react").ForwardRefExoticComponent<Omit<ComboBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export { defaultMaxHeight, ComboBox };

package/dist/types/src/components/forms-and-input/combo-box/__tests__/ComboBox.portal.test.d.ts

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

package/dist/types/src/components/navigation/bread-crumb/BreadCrumb.d.ts

@@ -4,8 +4,10 @@ interface BreadcrumbItemProps {
 }
 interface BreadcrumbProps {
     items: BreadcrumbItemProps[];
+    /** 첫 항목을 홈 아이콘으로 렌더링할지 여부. false 이면 label 텍스트로 렌더링한다. */
+    showHomeIcon?: boolean;
     className?: string;
 }
-declare const BreadCrumb: ({ items, className }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const BreadCrumb: ({ items, showHomeIcon, className }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element | null;
 export { BreadCrumb };
 export type { BreadcrumbItemProps, BreadcrumbProps };

package/dist/types/src/components/navigation/bread-crumb/__tests__/BreadCrumb.test.d.ts

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

package/dist/types/src/hooks/__tests__/useFloatingPosition.ssr.test.d.ts

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

package/dist/types/src/hooks/__tests__/useFloatingPosition.test.d.ts

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

package/dist/types/src/hooks/dropdown/useDropdown.d.ts

@@ -2,6 +2,8 @@ import { type RefObject } from 'react';
 interface UseDropdownConfig<T = any> {
     triggerRef: RefObject<HTMLElement>;
     dropdownRef?: RefObject<HTMLElement>;
+    /** direction 계산 전용 ref. 미지정 시 triggerRef 사용. Portal 모드에서 anchor box 가 다를 때 지정. */
+    positionRef?: RefObject<HTMLElement>;
     maxHeight: number;
     itemCount: number;
     optionItems: T[];
@@ -15,7 +17,7 @@ interface UseDropdownConfig<T = any> {
  */
 export declare const useDropdown: <T = any>(config: UseDropdownConfig<T>) => {
     isOpen: boolean;
-    direction: import("../../types").DropdownDirection;
+    direction: import("../../utils/portal-position").PortalDirection;
     focusedIndex: number;
     toggleDropdown: () => void;
     closeDropdown: () => void;

package/dist/types/src/hooks/dropdown/useDropdownPosition.d.ts

@@ -1,9 +1,9 @@
-import type { DropdownDirection, DropdownPositionConfig } from '../../types/dropdown';
+import type { DropdownPositionConfig } from '../../types/dropdown';
 /**
  * 드롭다운 위치 계산을 위한 커스텀 훅
  */
 export declare const useDropdownPosition: (config: DropdownPositionConfig) => {
-    direction: DropdownDirection;
+    direction: import("../../utils/portal-position").PortalDirection;
     updatePosition: () => import("../../types/dropdown").DropdownPositionResult;
-    setDirection: import("react").Dispatch<import("react").SetStateAction<DropdownDirection>>;
+    setDirection: import("react").Dispatch<import("react").SetStateAction<import("../../utils/portal-position").PortalDirection>>;
 };

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

@@ -1,15 +1,17 @@
 import { type CSSProperties, type RefObject } from 'react';
-type FloatingDirection = 'up' | 'down';
+import { type PortalAlign, type PortalDirection } from '../utils/portal-position';
 type UseFloatingPositionParams = {
     enabled: boolean;
     isOpen: boolean;
     triggerRef: RefObject<HTMLElement | null>;
     floatingRef: RefObject<HTMLElement | null>;
-    direction: FloatingDirection;
+    direction: PortalDirection;
+    /** trigger 와 floating 요소 사이 간격. 미지정 시 4px */
     offset?: number;
-    align?: 'left' | 'right';
+    /** 미지정 시 'left' */
+    align?: PortalAlign;
     /**
-     * true면 floating 요소의 width를 trigger 너비에 맞춘다.
+     * true면 floating 요소의 min-width를 trigger 너비로 보장한다 (width 고정이 아니다).
      * Portal 모드에서 부모가 body로 바뀌면서 min-width: 100% 같은 CSS가 viewport 너비로
      * 폭주하는 것을 막는다 (예: SelectBox 옵션 패널).
      */

package/dist/types/src/types/dropdown/dropdown.d.ts

@@ -1,5 +1,6 @@
 import type { RefObject } from 'react';
-export type DropdownDirection = 'up' | 'down';
+import type { PortalDirection } from '../../utils/portal-position';
+export type DropdownDirection = PortalDirection;
 export type DropdownPositionConfig = {
     triggerRef: RefObject<HTMLElement>;
     maxHeight: number;

package/dist/types/src/utils/dropdown/__tests__/dropdownUtils.test.d.ts

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

package/dist/types/src/utils/portal-position/__tests__/portalPosition.test.d.ts

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

package/dist/types/src/utils/portal-position/__tests__/portalPosition.tracking.test.d.ts

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

package/dist/types/src/utils/portal-position/index.d.ts

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

package/dist/types/src/utils/portal-position/portalPosition.d.ts

@@ -0,0 +1,67 @@
+export type PortalDirection = 'up' | 'down';
+export type PortalAlign = 'left' | 'right';
+export type AnchorRect = Readonly<Pick<DOMRectReadOnly, 'top' | 'bottom' | 'left' | 'right' | 'width'>>;
+export declare const PORTAL_PANEL_Z_INDEX = 1500;
+export type ComputePortalPositionInput = Readonly<{
+    anchorRect: AnchorRect;
+    panelHeight: number;
+    panelWidth: number;
+    direction: PortalDirection;
+    align?: PortalAlign;
+    offset?: number;
+}>;
+export type PortalPosition = Readonly<{
+    top: number;
+    left: number;
+}>;
+export declare const computePortalPosition: ({ anchorRect, panelHeight, panelWidth, direction, align, offset, }: ComputePortalPositionInput) => PortalPosition;
+export type ResolveDropdownDirectionInput = Readonly<{
+    anchorRect: Pick<AnchorRect, 'bottom'>;
+    panelHeight: number;
+    viewportHeight: number;
+    gap?: number;
+}>;
+export declare const resolveDropdownDirection: ({ anchorRect, panelHeight, viewportHeight, gap, }: ResolveDropdownDirectionInput) => PortalDirection;
+export type BuildPortalPanelStyleInput = Readonly<{
+    anchorRect: AnchorRect;
+    panelHeight: number;
+    panelWidth: number | null;
+    direction: PortalDirection;
+    align?: PortalAlign;
+    offset?: number;
+    /**
+     * true 이면 panelWidth 를 무시하고 anchorRect.width 로 minWidth 를 설정한다.
+     * align: 'right' 와 조합 시 콘텐츠가 앵커보다 넓으면 우측 정렬이 보장되지 않는다.
+     */
+    matchAnchorWidth?: boolean;
+}>;
+export type PortalPanelStyle = Readonly<{
+    position: 'fixed';
+    top: number;
+    left: number;
+    zIndex: number;
+    minWidth?: number;
+}>;
+export declare const buildPortalPanelStyle: ({ anchorRect, panelHeight, panelWidth, direction, align, offset, matchAnchorWidth, }: BuildPortalPanelStyleInput) => PortalPanelStyle;
+export type AnchorGeometryObserverOptions = Readonly<{
+    getAnchor: () => HTMLElement | null;
+    /**
+     * 구독 시점에 1회 호출되어 ResizeObserver 가 부착된다.
+     * 구독 후 패널이 교체·마운트되어도 옵저버는 갱신되지 않는다.
+     */
+    getPanel: () => HTMLElement | null;
+    onChange: () => void;
+}>;
+export declare const observeAnchorGeometry: ({ getAnchor, getPanel, onChange, }: AnchorGeometryObserverOptions) => (() => void);
+export type TrackPortalPositionOptions = Readonly<{
+    getAnchor: () => HTMLElement | null;
+    getPanel: () => HTMLElement | null;
+    /** 함수를 넘기면 갱신마다 다시 읽는다 — 열린 뒤 패널 높이가 변하는 소비자가 방향을 재판정할 수 있다 */
+    direction: PortalDirection | (() => PortalDirection);
+    align?: PortalAlign;
+    offset?: number;
+    matchAnchorWidth?: boolean;
+    onUpdate: (style: PortalPanelStyle) => void;
+}>;
+export declare const trackPortalPosition: ({ onUpdate, ...measureOptions }: TrackPortalPositionOptions) => (() => void);
+export declare const applyPortalPanelStyle: (element: HTMLElement, style: PortalPanelStyle) => void;

package/dist/ui-admin/assets/styles/style.css

@@ -67,9 +67,6 @@
   --shadow-xs-focused-3px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #ffeaee;
   --shadow-xs-focused-3px-gray-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #f2f4f7;
   --shadow-xs-focused-3px-error-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #fee4e2;
-  --shadow-xs-focused-4px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
-  --shadow-xs-focused-4px-gray-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f2f4f7;
-  --shadow-xs-focused-4px-error-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #fee4e2;
   --shadow-sm: 0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f;
   --shadow-sm-focused-4px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
   --shadow-sm-focused-4px-gray-100: 0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #f2f4f7;
@@ -327,7 +324,7 @@ button {
   background-color: var(--primary-red-450);
   border: 1px solid var(--primary-red-500);
   color: var(--base-white);
-  box-shadow: var(--shadow-xs-focused-4px-primary-100);
+  box-shadow: var(--shadow-sm-focused-4px-primary-100);
 }
 .ncua-btn--primary:disabled, .ncua-btn--primary.is-disable {
   background-color: var(--primary-red-100);
@@ -373,7 +370,7 @@ button {
   background-color: var(--base-white);
   border: 1px solid var(--gray-200);
   color: var(--gray-700);
-  box-shadow: var(--shadow-xs-focused-4px-gray-100);
+  box-shadow: var(--shadow-sm-focused-4px-gray-100);
 }
 .ncua-btn--secondary-gray:disabled, .ncua-btn--secondary-gray.is-disable {
   background-color: var(--base-white);
@@ -959,7 +956,7 @@ button {
 }
 .ncua-checkbox-input.destructive :where(input):focus {
   border-color: var(--primary-red-600);
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 .ncua-checkbox-input:hover {
   border-color: var(--gray-600);
@@ -1241,10 +1238,12 @@ button {
 }
 
 .ncua-dropdown {
-  --ncua-dropdown-item-height: 36px;
   position: relative;
   display: inline-block;
 }
+.ncua-dropdown, .ncua-dropdown__menu--portal-root {
+  --ncua-dropdown-item-height: 36px;
+}
 .ncua-dropdown__trigger {
   cursor: pointer;
   padding: 0;
@@ -1740,7 +1739,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-input.destructive:where(:focus-within) .ncua-input__field {
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 .ncua-input.is-disabled .ncua-input__content > :not(button) {
   background-color: var(--gray-50);
@@ -1930,7 +1929,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-input--textarea.destructive textarea:focus {
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 
 .ncua-input--textarea--xs textarea {
@@ -3192,7 +3191,7 @@ button {
 }
 .ncua-radio-input.destructive :where(input):focus {
   border-color: var(--primary-red-600);
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 
 .ncua-radio-field {
@@ -3694,7 +3693,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-select.destructive .ncua-select__content:focus-within {
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 .ncua-select--xs .ncua-select__content {
   height: var(--select-height-xs);
@@ -4035,7 +4034,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-selectbox.destructive .ncua-selectbox__content:focus {
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 .ncua-selectbox--xs .ncua-selectbox__content {
   height: var(--select-height-xs);
@@ -5104,6 +5103,16 @@ button {
   margin-inline-start: -10px;
 }
 
+.ncua-date-picker--portal-input.ncua-date-picker--xs {
+  padding: 5px 10px;
+  font-size: var(--font-size-xs);
+}
+
+.ncua-date-picker--portal-input.ncua-date-picker--sm {
+  padding: 7px 12px;
+  font-size: var(--font-size-sm);
+}
+
 .ncua-range-date-picker {
   display: inline-flex;
   align-items: center;
@@ -5197,7 +5206,7 @@ button {
   font-weight: var(--font-weights-commerce-sans-1);
   cursor: pointer;
 }
-.ncua-breadcrumb__list-item:first-child {
+.ncua-breadcrumb__list-item--home {
   height: 24px;
   padding: 4px;
 }
@@ -5328,15 +5337,16 @@ button {
   justify-content: center;
   color: var(--pink-600);
   background-color: var(--pink-200);
-  border-radius: 5px;
 }
 .ncua-badge--new-badge-sm {
   width: 16px;
   height: 16px;
+  border-radius: 3px;
 }
 .ncua-badge--new-badge-md {
   width: 20px;
   height: 20px;
+  border-radius: 4px;
 }
 
 .ncua-badge-group {
@@ -6598,7 +6608,7 @@ button {
   bottom: 0;
   width: 3px;
   background: var(--base-black);
-  z-index: 1;
+  z-index: var(--z-index-1);
 }
 .ncua-table__row--warning.ncua-table__row--selected:nth-child(n) {
   background: var(--orange-50);
@@ -6743,7 +6753,7 @@ button {
 .ncua-table--fixed-header .ncua-table__header-cell {
   position: sticky;
   top: 0;
-  z-index: 10;
+  z-index: var(--z-index-sticky);
   padding: 0 var(--spacing-m);
   height: var(--ncua-table-header-height);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.8.24",
+  "version": "1.8.25-alpha.1",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
@@ -78,7 +78,7 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "2.1.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-react-accessibility": "1.1.4",
-    "@ncds/ui-admin-icon": "0.1.13",
+    "@ncds/ui-admin-icon": "0.1.12",
     "classnames": "2.5.1",
     "dompurify": "3.4.12",
     "flatpickr": "4.6.13",