@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.
- package/dist/cjs/src/components/overlays/modal/Modal.js +41 -46
- package/dist/cjs/src/components/overlays/postcode-search-modal/PostcodeSearchModal.js +2 -2
- package/dist/cjs/src/generated/scoped-css.js +1 -1
- package/dist/esm/src/components/overlays/modal/Modal.js +42 -47
- package/dist/esm/src/components/overlays/postcode-search-modal/PostcodeSearchModal.js +2 -2
- package/dist/esm/src/generated/scoped-css.js +1 -1
- package/dist/temp/src/components/overlays/modal/Modal.d.ts +5 -5
- package/dist/temp/src/components/overlays/modal/Modal.js +14 -11
- package/dist/temp/src/components/overlays/postcode-search-modal/PostcodeSearchModal.js +1 -1
- package/dist/temp/src/generated/scoped-css.js +1 -1
- package/dist/types/src/components/overlays/modal/Modal.d.ts +5 -5
- package/dist/ui-admin/assets/styles/style.css +20 -15
- package/package.json +1 -1
|
@@ -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,
|
|
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,
|
|
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-
|
|
2266
|
-
|
|
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
|
-
|
|
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;
|