@itcase/ui 1.8.133 → 1.8.134
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.
|
@@ -137,7 +137,7 @@ const getOrCreateModalElement = (modalQuerySelector, className = '') => {
|
|
|
137
137
|
};
|
|
138
138
|
// Modal component that is an abstraction around the portal API.
|
|
139
139
|
const Modal = React.forwardRef(function Modal(props, ref) {
|
|
140
|
-
const { id, appearance, className, dataTestId, dataTour, title,
|
|
140
|
+
const { id, appearance, className, dataTestId, dataTour, title, modalQuerySelector = '#modal-global', scroll = false, stickyHeader = false, closeIcon, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
|
|
141
141
|
// Query DOM element
|
|
142
142
|
const [modalElement, setModalElement] = React.useState(null);
|
|
143
143
|
const [isOpen, setIsOpen] = React.useState(initialIsOpen);
|
|
@@ -228,7 +228,7 @@ const Modal = React.forwardRef(function Modal(props, ref) {
|
|
|
228
228
|
return (modalElement &&
|
|
229
229
|
ReactDOM.createPortal(
|
|
230
230
|
// Any valid React child: JSX, strings, arrays, etc.
|
|
231
|
-
isOpen ? (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { id: id, className: clsx('modal__content',
|
|
231
|
+
isOpen ? (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { id: id, className: clsx('modal__content', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-test-id": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, onBlur: isCloseOnBlur ? closeModal : undefined, children: [(title || closeIcon) && (jsxRuntime.jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsxRuntime.jsx(Icon.Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsxRuntime.jsx("div", { className: "modal__close", onClick: closeModal, children: jsxRuntime.jsx(Icon.Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? _default.icons24.Action.Close }) }))] })), jsxRuntime.jsx("div", { className: "modal__content-wrapper", children: children })] }), jsxRuntime.jsx(Overlay.Overlay, { className: "modal__overlay",
|
|
232
232
|
// ref={modalOverlayRef}
|
|
233
233
|
fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: onClickOverlay })] })) : null,
|
|
234
234
|
// A DOM element
|
package/dist/components/Modal.js
CHANGED
|
@@ -135,7 +135,7 @@ const getOrCreateModalElement = (modalQuerySelector, className = '') => {
|
|
|
135
135
|
};
|
|
136
136
|
// Modal component that is an abstraction around the portal API.
|
|
137
137
|
const Modal = React.forwardRef(function Modal(props, ref) {
|
|
138
|
-
const { id, appearance, className, dataTestId, dataTour, title,
|
|
138
|
+
const { id, appearance, className, dataTestId, dataTour, title, modalQuerySelector = '#modal-global', scroll = false, stickyHeader = false, closeIcon, isDisabled, isSkeleton, isCloseOnBlur = true, isOpen: initialIsOpen = false, isOverlay = true, isScrollOnOpen = true, isSetFocusOnOpen = true, onClickOverlay, onCloseModal, onOpenModal, children, } = props;
|
|
139
139
|
// Query DOM element
|
|
140
140
|
const [modalElement, setModalElement] = useState(null);
|
|
141
141
|
const [isOpen, setIsOpen] = useState(initialIsOpen);
|
|
@@ -226,7 +226,7 @@ const Modal = React.forwardRef(function Modal(props, ref) {
|
|
|
226
226
|
return (modalElement &&
|
|
227
227
|
ReactDOM.createPortal(
|
|
228
228
|
// Any valid React child: JSX, strings, arrays, etc.
|
|
229
|
-
isOpen ? (jsxs(React.Fragment, { children: [jsxs("div", { id: id, className: clsx('modal__content',
|
|
229
|
+
isOpen ? (jsxs(React.Fragment, { children: [jsxs("div", { id: id, className: clsx('modal__content', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-test-id": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, onBlur: isCloseOnBlur ? closeModal : undefined, children: [(title || closeIcon) && (jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsx(Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsx("div", { className: "modal__close", onClick: closeModal, children: jsx(Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? icons24.Action.Close }) }))] })), jsx("div", { className: "modal__content-wrapper", children: children })] }), jsx(Overlay, { className: "modal__overlay",
|
|
230
230
|
// ref={modalOverlayRef}
|
|
231
231
|
fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: onClickOverlay })] })) : null,
|
|
232
232
|
// A DOM element
|
|
@@ -46,14 +46,16 @@
|
|
|
46
46
|
&_size_$(size) {
|
|
47
47
|
min-width: var(--modal-$(size)-min-width);
|
|
48
48
|
min-height: var(--modal-$(size)-min-height);
|
|
49
|
-
padding: var(--modal-$(size)-padding) 0;
|
|
50
49
|
^&__header {
|
|
51
|
-
padding: 0 var(--modal-$(size)-padding);
|
|
52
50
|
gap: var(--modal-$(size)-gap);
|
|
51
|
+
padding: var(--modal-$(size)-header-padding);
|
|
53
52
|
}
|
|
54
|
-
^&__content {
|
|
55
|
-
|
|
56
|
-
|
|
53
|
+
^&__content-wrapper {
|
|
54
|
+
padding: var(--modal-$(size)-content-padding);
|
|
55
|
+
}
|
|
56
|
+
&^&__content-no-header {
|
|
57
|
+
^^&__content-wrapper {
|
|
58
|
+
padding: var(--modal-$(size)-content-no-header-padding);
|
|
57
59
|
}
|
|
58
60
|
}
|
|
59
61
|
}
|
|
@@ -62,26 +64,22 @@
|
|
|
62
64
|
.modal {
|
|
63
65
|
&-scroll {
|
|
64
66
|
&_header_sticky {
|
|
67
|
+
max-height: 80vh;
|
|
68
|
+
overflow: hidden auto;
|
|
65
69
|
^^&__header {
|
|
66
70
|
position: sticky;
|
|
67
71
|
top: 0;
|
|
72
|
+
z-index: 1;
|
|
68
73
|
}
|
|
69
74
|
^^&__content {
|
|
70
75
|
&-wrapper {
|
|
71
76
|
position: relative;
|
|
72
|
-
overflow: hidden auto;
|
|
73
77
|
display: flex;
|
|
74
78
|
flex-direction: column;
|
|
75
79
|
}
|
|
76
80
|
}
|
|
77
81
|
}
|
|
78
|
-
&_true
|
|
79
|
-
max-height: 80vh;
|
|
80
|
-
position: relative;
|
|
81
|
-
overflow: hidden auto;
|
|
82
|
-
display: flex;
|
|
83
|
-
flex-direction: column;
|
|
84
|
-
}
|
|
82
|
+
&_true,
|
|
85
83
|
&_vertical {
|
|
86
84
|
max-height: 80vh;
|
|
87
85
|
position: relative;
|
|
@@ -99,23 +97,32 @@
|
|
|
99
97
|
}
|
|
100
98
|
:root {
|
|
101
99
|
--modal-max-width: 500px;
|
|
102
|
-
|
|
100
|
+
|
|
103
101
|
--modal-xl-gap: 24px;
|
|
102
|
+
--modal-xl-header-padding: 24px 24px 0 24px;
|
|
103
|
+
--modal-xl-content-padding: 0 24px 24px 24px;
|
|
104
|
+
--modal-xl-content-no-header-padding: 24px;
|
|
104
105
|
--modal-xl-min-width: 500px;
|
|
105
106
|
--modal-xl-min-height: 240px;
|
|
106
107
|
|
|
107
|
-
--modal-l-padding: 24px;
|
|
108
108
|
--modal-l-gap: 24px;
|
|
109
|
+
--modal-l-header-padding: 24px 24px 0 24px;
|
|
110
|
+
--modal-l-content-padding: 0 24px 24px 24px;
|
|
111
|
+
--modal-l-content-no-header-padding: 24px;
|
|
109
112
|
--modal-l-min-width: 500px;
|
|
110
113
|
--modal-l-min-height: 240px;
|
|
111
114
|
|
|
112
|
-
--modal-m-padding: 24px;
|
|
113
115
|
--modal-m-gap: 24px;
|
|
116
|
+
--modal-m-header-padding: 24px 24px 0 24px;
|
|
117
|
+
--modal-m-content-padding: 0 24px 24px 24px;
|
|
118
|
+
--modal-m-content-no-header-padding: 24px;
|
|
114
119
|
--modal-m-min-width: 500px;
|
|
115
120
|
--modal-m-min-height: 240px;
|
|
116
121
|
|
|
117
|
-
--modal-s-padding: 24px;
|
|
118
122
|
--modal-s-gap: 24px;
|
|
123
|
+
--modal-s-header-padding: 24px 24px 0 24px;
|
|
124
|
+
--modal-s-content-padding: 0 24px 24px 24px;
|
|
125
|
+
--modal-s-content-no-header-padding: 24px;
|
|
119
126
|
--modal-s-min-width: 320px;
|
|
120
127
|
--modal-s-min-height: 240px;
|
|
121
128
|
}
|