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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -12,12 +12,14 @@ type ModalProps = {
12
12
  children: ReactNode;
13
13
  closeOnBackdropClick?: boolean;
14
14
  closeOnEsc?: boolean;
15
+ showHeaderDivider?: boolean;
16
+ showActionsDivider?: boolean;
15
17
  className?: string;
16
18
  zIndex?: number;
17
19
  };
18
20
  declare const Modal: {
19
- ({ isOpen, onClose, children, size, closeOnBackdropClick, closeOnEsc, className, zIndex, ...restProps }: ModalProps): import("react").ReactPortal | null;
20
- Header({ children, onClose, featuredIcon, title, subtitle, align, showDivider, hideCloseButton, }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
21
+ ({ isOpen, onClose, children, size, closeOnBackdropClick, closeOnEsc, showHeaderDivider, showActionsDivider, className, zIndex, ...restProps }: ModalProps): import("react").ReactPortal | null;
22
+ Header({ children, onClose, featuredIcon, title, subtitle, align, hideCloseButton, }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
21
23
  Content({ children, className }: ModalContentProps): import("react/jsx-runtime").JSX.Element;
22
24
  /**
23
25
  * Modal.Actions - The actions area of the modal
@@ -47,7 +49,7 @@ declare const Modal: {
47
49
  * <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
48
50
  * </Modal.Actions>
49
51
  */
50
- Actions({ children, layout, showDivider, align, checkboxContent, className, }: ModalActionsProps): import("react/jsx-runtime").JSX.Element;
52
+ Actions({ children, layout, align, checkboxContent, className, }: ModalActionsProps): import("react/jsx-runtime").JSX.Element;
51
53
  };
52
54
  type ModalHeaderProps = {
53
55
  children?: ReactNode;
@@ -60,7 +62,6 @@ type ModalHeaderProps = {
60
62
  align?: ModalHeaderAlign;
61
63
  title?: string | ReactNode;
62
64
  subtitle?: string | ReactNode;
63
- showDivider?: boolean;
64
65
  hideCloseButton?: boolean;
65
66
  };
66
67
  type ModalContentProps = {
@@ -71,7 +72,6 @@ type ModalActionsProps = {
71
72
  className?: string;
72
73
  children: ReactNode;
73
74
  layout?: ModalActionsLayout;
74
- showDivider?: boolean;
75
75
  align?: ModalActionsAlign;
76
76
  checkboxContent?: ReactNode;
77
77
  };
@@ -123,6 +123,7 @@
123
123
  spinner (200) — 부분 로딩 표시
124
124
  popover (500) — dropdown · select-dropdown 등 부유 popover
125
125
  (Portal 미사용, 부모 stacking context 안에서 동작)
126
+ 단 dropdown__menu 는 운영 영향으로 전역 적용 보류 — 현재 DataGrid ActionBar 한정
126
127
  dnd-preview (600) — table row DnD 드래그 오버레이 — popover 위, modal 아래
127
128
  modal (1000) — 작업 차단 다이얼로그. backdrop이 stacking context를 만들고
128
129
  자식인 본체는 자연 stacking으로 따라가므로 단일 토큰으로 충분
@@ -2074,6 +2075,20 @@ button {
2074
2075
  }
2075
2076
  }
2076
2077
 
2078
+ .ncua-modal--divider-header .ncua-modal__header {
2079
+ border-block-end: 1px solid var(--gray-100);
2080
+ }
2081
+ .ncua-modal--divider-header .ncua-modal__content {
2082
+ padding-block-start: 16px;
2083
+ }
2084
+
2085
+ .ncua-modal--divider-actions .ncua-modal__actions-wrapper {
2086
+ border-block-start: 1px solid var(--gray-100);
2087
+ }
2088
+ .ncua-modal--divider-actions .ncua-modal__content {
2089
+ padding-block-end: 16px;
2090
+ }
2091
+
2077
2092
  .ncua-modal__header {
2078
2093
  padding: 0px 20px 16px;
2079
2094
  border-bottom: none;
@@ -2082,12 +2097,6 @@ button {
2082
2097
  flex-direction: column;
2083
2098
  gap: 8px;
2084
2099
  }
2085
- .ncua-modal__header-divider {
2086
- width: 100%;
2087
- height: 1px;
2088
- background-color: var(--gray-100);
2089
- margin: 0 0 16px;
2090
- }
2091
2100
  .ncua-modal__header:has(.ncua-modal__close-button) {
2092
2101
  padding-right: 48px;
2093
2102
  }
@@ -2180,12 +2189,6 @@ button {
2180
2189
  display: flex;
2181
2190
  gap: 8px;
2182
2191
  }
2183
- .ncua-modal__actions-divider {
2184
- width: 100%;
2185
- height: 1px;
2186
- background-color: var(--gray-100);
2187
- margin: 16px 0 0;
2188
- }
2189
2192
  .ncua-modal__actions--vertical {
2190
2193
  flex-direction: column;
2191
2194
  }
@@ -2262,8 +2265,8 @@ button {
2262
2265
  }
2263
2266
  }
2264
2267
 
2265
- .ncua-modal:has(.ncua-postcode-search-modal) .ncua-modal__header-divider {
2266
- margin: 0;
2268
+ .ncua-modal--divider-header:has(.ncua-postcode-search-modal) .ncua-modal__content {
2269
+ padding-block-start: 0;
2267
2270
  }
2268
2271
 
2269
2272
  .ncua-modal__content:has(.ncua-postcode-search-modal) {
@@ -7049,7 +7052,9 @@ button {
7049
7052
  padding: var(--spacing-s) 24px;
7050
7053
  background-color: var(--gray-50);
7051
7054
  position: relative;
7052
- z-index: var(--z-index-2);
7055
+ }
7056
+ .ncua-data-grid__action-bar .ncua-dropdown__menu {
7057
+ z-index: var(--z-index-popover);
7053
7058
  }
7054
7059
  .ncua-data-grid__action-bar:empty {
7055
7060
  padding: var(--spacing-xs) 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ncds/ui-admin",
3
- "version": "1.8.22-alpha.0",
3
+ "version": "1.8.22-alpha.1",
4
4
  "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
5
5
  "scripts": {
6
6
  "barrel": "node barrel.js",