@ncds/ui-admin 1.8.22-alpha.0 → 1.8.22-alpha.2

package/dist/types/src/components/overlays/modal/Modal.d.ts

@@ -12,12 +12,14 @@ type ModalProps = {
     children: ReactNode;
     closeOnBackdropClick?: boolean;
     closeOnEsc?: boolean;
+    showHeaderDivider?: boolean;
+    showActionsDivider?: boolean;
     className?: string;
     zIndex?: number;
 };
 declare const Modal: {
-    ({ isOpen, onClose, children, size, closeOnBackdropClick, closeOnEsc, className, zIndex, ...restProps }: ModalProps): import("react").ReactPortal | null;
-    Header({ children, onClose, featuredIcon, title, subtitle, align, showDivider, hideCloseButton, }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
+    ({ isOpen, onClose, children, size, closeOnBackdropClick, closeOnEsc, showHeaderDivider, showActionsDivider, className, zIndex, ...restProps }: ModalProps): import("react").ReactPortal | null;
+    Header({ children, onClose, featuredIcon, title, subtitle, align, hideCloseButton, }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
     Content({ children, className }: ModalContentProps): import("react/jsx-runtime").JSX.Element;
     /**
      * Modal.Actions - The actions area of the modal
@@ -47,7 +49,7 @@ declare const Modal: {
      *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
      * </Modal.Actions>
      */
-    Actions({ children, layout, showDivider, align, checkboxContent, className, }: ModalActionsProps): import("react/jsx-runtime").JSX.Element;
+    Actions({ children, layout, align, checkboxContent, className, }: ModalActionsProps): import("react/jsx-runtime").JSX.Element;
 };
 type ModalHeaderProps = {
     children?: ReactNode;
@@ -60,7 +62,6 @@ type ModalHeaderProps = {
     align?: ModalHeaderAlign;
     title?: string | ReactNode;
     subtitle?: string | ReactNode;
-    showDivider?: boolean;
     hideCloseButton?: boolean;
 };
 type ModalContentProps = {
@@ -71,7 +72,6 @@ type ModalActionsProps = {
     className?: string;
     children: ReactNode;
     layout?: ModalActionsLayout;
-    showDivider?: boolean;
     align?: ModalActionsAlign;
     checkboxContent?: ReactNode;
 };

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

@@ -123,6 +123,7 @@
      spinner       (200)   — 부분 로딩 표시
      popover       (500)   — dropdown · select-dropdown 등 부유 popover
                              (Portal 미사용, 부모 stacking context 안에서 동작)
+                             단 dropdown__menu 는 운영 영향으로 전역 적용 보류 — 현재 DataGrid ActionBar 한정
      dnd-preview   (600)   — table row DnD 드래그 오버레이 — popover 위, modal 아래
      modal         (1000)  — 작업 차단 다이얼로그. backdrop이 stacking context를 만들고
                              자식인 본체는 자연 stacking으로 따라가므로 단일 토큰으로 충분
@@ -2074,6 +2075,20 @@ button {
   }
 }
 
+.ncua-modal--divider-header .ncua-modal__header {
+  border-block-end: 1px solid var(--gray-100);
+}
+.ncua-modal--divider-header .ncua-modal__content {
+  padding-block-start: 16px;
+}
+
+.ncua-modal--divider-actions .ncua-modal__actions-wrapper {
+  border-block-start: 1px solid var(--gray-100);
+}
+.ncua-modal--divider-actions .ncua-modal__content {
+  padding-block-end: 16px;
+}
+
 .ncua-modal__header {
   padding: 0px 20px 16px;
   border-bottom: none;
@@ -2082,12 +2097,6 @@ button {
   flex-direction: column;
   gap: 8px;
 }
-.ncua-modal__header-divider {
-  width: 100%;
-  height: 1px;
-  background-color: var(--gray-100);
-  margin: 0 0 16px;
-}
 .ncua-modal__header:has(.ncua-modal__close-button) {
   padding-right: 48px;
 }
@@ -2180,12 +2189,6 @@ button {
   display: flex;
   gap: 8px;
 }
-.ncua-modal__actions-divider {
-  width: 100%;
-  height: 1px;
-  background-color: var(--gray-100);
-  margin: 16px 0 0;
-}
 .ncua-modal__actions--vertical {
   flex-direction: column;
 }
@@ -2262,8 +2265,8 @@ button {
   }
 }
 
-.ncua-modal:has(.ncua-postcode-search-modal) .ncua-modal__header-divider {
-  margin: 0;
+.ncua-modal--divider-header:has(.ncua-postcode-search-modal) .ncua-modal__content {
+  padding-block-start: 0;
 }
 
 .ncua-modal__content:has(.ncua-postcode-search-modal) {
@@ -3897,6 +3900,7 @@ button {
 .ncua-selectbox {
   position: relative;
   display: inline-block;
+  max-width: 100%;
 }
 .ncua-selectbox__content {
   position: relative;
@@ -3915,12 +3919,21 @@ button {
   border-color: var(--gray-400);
   box-shadow: var(--shadow-xs-focused-3px-gray-100);
 }
+.ncua-selectbox__content-inner {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+}
 .ncua-selectbox__value {
   flex: 1;
+  min-width: 0;
+  color: var(--gray-700);
   overflow: hidden;
+  display: block;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--gray-700);
+  word-wrap: break-word;
 }
 .ncua-selectbox__value:empty::before {
   content: attr(data-placeholder);
@@ -3930,9 +3943,18 @@ button {
   display: flex;
   align-items: center;
   gap: 4px;
+  min-width: 0;
+}
+.ncua-selectbox__value-text {
+  overflow: hidden;
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: break-word;
 }
 .ncua-selectbox__value-icon {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   color: currentColor;
@@ -7049,7 +7071,9 @@ button {
   padding: var(--spacing-s) 24px;
   background-color: var(--gray-50);
   position: relative;
-  z-index: var(--z-index-2);
+}
+.ncua-data-grid__action-bar .ncua-dropdown__menu {
+  z-index: var(--z-index-popover);
 }
 .ncua-data-grid__action-bar:empty {
   padding: var(--spacing-xs) 0;

package/package.json

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