@hh.ru/magritte-ui-modal 10.1.34 → 11.0.0
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/index.css +212 -218
- package/index.d.ts +5 -2
- package/index.js +25 -14
- package/index.js.map +1 -1
- package/index.mock.d.ts +6 -2
- package/index.mock.js +7 -3
- package/index.mock.js.map +1 -1
- package/internal/ModalBody.d.ts +5 -0
- package/internal/ModalBody.js +41 -0
- package/internal/ModalBody.js.map +1 -0
- package/internal/ModalContent.d.ts +2 -0
- package/internal/ModalContent.js +14 -0
- package/internal/ModalContent.js.map +1 -0
- package/internal/ModalInner.d.ts +28 -0
- package/internal/ModalInner.js +46 -0
- package/internal/ModalInner.js.map +1 -0
- package/internal/ModalSlotsContext.d.ts +46 -0
- package/internal/ModalSlotsContext.js +66 -0
- package/internal/ModalSlotsContext.js.map +1 -0
- package/internal/ModalStickyHeader.d.ts +8 -0
- package/internal/ModalStickyHeader.js +40 -0
- package/internal/ModalStickyHeader.js.map +1 -0
- package/internal/constants.d.ts +38 -0
- package/internal/constants.js +53 -0
- package/internal/constants.js.map +1 -0
- package/internal/isTreeSelectorChild.d.ts +7 -0
- package/internal/isTreeSelectorChild.js +13 -0
- package/internal/isTreeSelectorChild.js.map +1 -0
- package/{useModalOrder.js → internal/useModalOrder.js} +1 -1
- package/internal/useModalOrder.js.map +1 -0
- package/internal/useModalTransition.d.ts +29 -0
- package/internal/useModalTransition.js +85 -0
- package/internal/useModalTransition.js.map +1 -0
- package/internal/usePageHeaderScrollAnimation.d.ts +14 -0
- package/internal/usePageHeaderScrollAnimation.js +48 -0
- package/internal/usePageHeaderScrollAnimation.js.map +1 -0
- package/modal-Bf_KXESS.js +5 -0
- package/modal-Bf_KXESS.js.map +1 -0
- package/package.json +18 -14
- package/public/Modal.d.ts +10 -0
- package/public/Modal.js +105 -0
- package/public/Modal.js.map +1 -0
- package/public/ModalMedia.d.ts +15 -0
- package/public/ModalMedia.js +23 -0
- package/public/ModalMedia.js.map +1 -0
- package/public/ModalWithImage.d.ts +16 -0
- package/public/ModalWithImage.js +56 -0
- package/public/ModalWithImage.js.map +1 -0
- package/public/types.d.ts +40 -0
- package/{types.js → public/types.js} +1 -1
- package/Modal.d.ts +0 -3
- package/Modal.js +0 -271
- package/Modal.js.map +0 -1
- package/ModalContentWithHeader-BsKIMEA3.js +0 -150
- package/ModalContentWithHeader-BsKIMEA3.js.map +0 -1
- package/ModalContentWithHeader.d.ts +0 -8
- package/ModalContentWithHeader.js +0 -15
- package/ModalContentWithHeader.js.map +0 -1
- package/ModalHeader.d.ts +0 -6
- package/ModalHeader.js +0 -48
- package/ModalHeader.js.map +0 -1
- package/types.d.ts +0 -71
- package/useModalOrder.js.map +0 -1
- /package/{useModalOrder.d.ts → internal/useModalOrder.d.ts} +0 -0
- /package/{types.js.map → public/types.js.map} +0 -0
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { PropsWithChildren, ReactNode, SyntheticEvent } from 'react';
|
|
2
|
+
export type ModalHeight = 'content' | 'full-screen' | number;
|
|
3
|
+
export interface ModalProps extends PropsWithChildren {
|
|
4
|
+
/** Шапка модала (обычно `NavBar`). Рендерится sticky-хедером, прижатым к верху */
|
|
5
|
+
header?: ReactNode;
|
|
6
|
+
/** Футер модала (обычно `ActionBar`). Рендерится прижатым к низу вне скролл-зоны */
|
|
7
|
+
footer?: ReactNode;
|
|
8
|
+
/** Обработчик нажатия на кнопку закрытия */
|
|
9
|
+
onClose?: (event?: SyntheticEvent) => void;
|
|
10
|
+
/** Флаг управляющий видимостью модала */
|
|
11
|
+
visible?: boolean;
|
|
12
|
+
/** Размер */
|
|
13
|
+
size?: 'large' | 'medium' | 'small';
|
|
14
|
+
/** Хост для отрисовки модала */
|
|
15
|
+
host?: HTMLElement;
|
|
16
|
+
/** Флаг, отключающий верхний и нижний паддинги контента */
|
|
17
|
+
disableVerticalPaddings?: boolean;
|
|
18
|
+
/** Флаг, отключающий левый и правый паддинги контента */
|
|
19
|
+
disableHorizontalPaddings?: boolean;
|
|
20
|
+
/** Флаг управляющий закрытием при клике вне Modal */
|
|
21
|
+
closeByClickOutside?: boolean;
|
|
22
|
+
/** Колбек, который будет вызван после завершения анимации открытия */
|
|
23
|
+
onAppear?: VoidFunction;
|
|
24
|
+
/** Колбек, который будет вызван перед началом анимации закрытия */
|
|
25
|
+
onBeforeExit?: VoidFunction;
|
|
26
|
+
/** Колбек, который будет вызван после анимации закрытия */
|
|
27
|
+
onAfterExit?: VoidFunction;
|
|
28
|
+
/** Высота (по контенту, во весь экран или фиксированная в пикселях) */
|
|
29
|
+
height?: ModalHeight;
|
|
30
|
+
/** Минимальная высота в пикселях. Имеет приоритет перед height. */
|
|
31
|
+
minHeight?: number;
|
|
32
|
+
/** Положение компонента на экране, определяет дефолтное значение пропа height */
|
|
33
|
+
position?: 'center' | 'left' | 'right';
|
|
34
|
+
/** Показывать ли оверлей, применяется только если position=left|right */
|
|
35
|
+
showOverlay?: boolean;
|
|
36
|
+
/** Отступ от верхнего края экрана под навигацию, применяется только если position=left|right и showOverlay=false */
|
|
37
|
+
pageHeaderPadding?: number;
|
|
38
|
+
/** Возвращать ли фокус на активный элемент после закрытия модала, по умолчанию `true` */
|
|
39
|
+
returnFocusOnClose?: boolean;
|
|
40
|
+
}
|
package/Modal.d.ts
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import { HTMLAttributes } from 'react';
|
|
2
|
-
import { ModalHeaderProps } from '@hh.ru/magritte-ui-modal/types';
|
|
3
|
-
export declare const Modal: import("react").ForwardRefExoticComponent<import("@hh.ru/magritte-ui-modal/types").ModalBaseProps & ModalHeaderProps & Omit<HTMLAttributes<HTMLDivElement>, keyof ModalHeaderProps | "className" | "role" | keyof import("@hh.ru/magritte-ui-modal/types").ModalBaseProps | "tabindex" | "aria-labeledby"> & import("react").RefAttributes<HTMLDivElement>>;
|
package/Modal.js
DELETED
|
@@ -1,271 +0,0 @@
|
|
|
1
|
-
import './index.css';
|
|
2
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
|
-
import { forwardRef, useRef, useState, useId, useCallback, useEffect, useLayoutEffect, cloneElement } from 'react';
|
|
4
|
-
import { createPortal } from 'react-dom';
|
|
5
|
-
import { CSSTransition } from 'react-transition-group';
|
|
6
|
-
import classnames from 'classnames';
|
|
7
|
-
import { useServerEnv } from '@hh.ru/magritte-common-is-server-env';
|
|
8
|
-
import { useKeyboardNavigation, keyboardMatch, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
|
|
9
|
-
import { disableScroll } from '@hh.ru/magritte-common-modal-helper';
|
|
10
|
-
import { CloseByClickOutsideContext } from '@hh.ru/magritte-common-mouse/useCloseByClickOutside';
|
|
11
|
-
import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
|
|
12
|
-
import { useNoBubbling } from '@hh.ru/magritte-common-use-no-bubbling';
|
|
13
|
-
import { isActionBarComponent } from '@hh.ru/magritte-ui-action-bar';
|
|
14
|
-
import { Breakpoint, useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
|
|
15
|
-
import { Layer } from '@hh.ru/magritte-ui-layer';
|
|
16
|
-
import { s as styles, M as ModalContentWithHeader } from './ModalContentWithHeader-BsKIMEA3.js';
|
|
17
|
-
import { useModalOrder } from './useModalOrder.js';
|
|
18
|
-
import { isProgressBarComponent } from '@hh.ru/magritte-ui-progress-bar';
|
|
19
|
-
import { ThemeWrapper } from '@hh.ru/magritte-ui-theme-wrapper';
|
|
20
|
-
import { isValidTreeSelectorWrapper } from '@hh.ru/magritte-ui-tree-selector';
|
|
21
|
-
import '@hh.ru/magritte-common-func-utils';
|
|
22
|
-
import '@hh.ru/magritte-ui-content-overlay';
|
|
23
|
-
import '@hh.ru/magritte-ui-divider';
|
|
24
|
-
import './ModalHeader.js';
|
|
25
|
-
import '@hh.ru/magritte-ui-icon';
|
|
26
|
-
import '@hh.ru/magritte-ui-title';
|
|
27
|
-
import '@hh.ru/magritte-ui-scrollbar';
|
|
28
|
-
import '@hh.ru/magritte-ui-textarea';
|
|
29
|
-
import '@hh.ru/magritte-common-dom-storage';
|
|
30
|
-
|
|
31
|
-
const DEFAULT_ACTION_BAR_PADDING = 24;
|
|
32
|
-
const DEFAULT_PAGE_HEADER_PADDING = 72;
|
|
33
|
-
const noop = () => undefined;
|
|
34
|
-
const toNumber = (value) => {
|
|
35
|
-
const result = parseInt(value, 10);
|
|
36
|
-
return Number.isInteger(result) ? result : 0;
|
|
37
|
-
};
|
|
38
|
-
const CSS_CLASSES = {
|
|
39
|
-
center: {
|
|
40
|
-
appear: styles.animationEnterCenter,
|
|
41
|
-
appearActive: styles.animationEnterCenterActive,
|
|
42
|
-
enter: styles.animationEnterCenter,
|
|
43
|
-
enterActive: styles.animationEnterCenterActive,
|
|
44
|
-
exit: styles.animationExitCenter,
|
|
45
|
-
exitActive: styles.animationExitCenterActive,
|
|
46
|
-
},
|
|
47
|
-
left: {
|
|
48
|
-
appear: styles.animationEnterLeft,
|
|
49
|
-
appearActive: styles.animationEnterLeftActive,
|
|
50
|
-
enter: styles.animationEnterLeft,
|
|
51
|
-
enterActive: styles.animationEnterLeftActive,
|
|
52
|
-
exit: styles.animationExitLeft,
|
|
53
|
-
exitActive: styles.animationExitLeftActive,
|
|
54
|
-
},
|
|
55
|
-
right: {
|
|
56
|
-
appear: styles.animationEnterRight,
|
|
57
|
-
appearActive: styles.animationEnterRightActive,
|
|
58
|
-
enter: styles.animationEnterRight,
|
|
59
|
-
enterActive: styles.animationEnterRightActive,
|
|
60
|
-
exit: styles.animationExitRight,
|
|
61
|
-
exitActive: styles.animationExitRightActive,
|
|
62
|
-
},
|
|
63
|
-
};
|
|
64
|
-
const INVISIBLE_FOR_BREAKPOINTS = [Breakpoint.XS, Breakpoint.S];
|
|
65
|
-
const Modal = forwardRef(({ visible, size = 'medium', title, titleAlignment = 'left', titleSize = 'large', titleMaxLines, titleElement = 'h2', titleDescription, titleDescriptionMaxLines, titleStyle, titleDescriptionStyle, children, onClose = noop, headerImageUrl, headerImage, headerHeight, host, options, actions, actionLink, footer, disableVerticalPaddings = false, disableHorizontalPaddings = false, closeByClickOutside = true, onAppear, onBeforeExit, onAfterExit, position = 'center', height = position === 'center' ? 'content' : 'full-screen', minHeight, showOverlay: _showOverlay = true, pageHeaderPadding = DEFAULT_PAGE_HEADER_PADDING, returnFocusOnClose, ...rest }, ref) => {
|
|
66
|
-
const isServerEnv = useServerEnv();
|
|
67
|
-
const enableScrollRef = useRef();
|
|
68
|
-
const onAfterExitRef = useRef(onAfterExit);
|
|
69
|
-
const onBeforeExitRef = useRef(onBeforeExit);
|
|
70
|
-
onAfterExitRef.current = onAfterExit;
|
|
71
|
-
onBeforeExitRef.current = onBeforeExit;
|
|
72
|
-
const [animationTimeout, setAnimationTimeout] = useState({
|
|
73
|
-
enter: 0,
|
|
74
|
-
exit: 0,
|
|
75
|
-
});
|
|
76
|
-
const animationTimeoutExitRef = useRef(animationTimeout.exit);
|
|
77
|
-
animationTimeoutExitRef.current = animationTimeout.exit;
|
|
78
|
-
const labelId = useId();
|
|
79
|
-
const additionalProps = {};
|
|
80
|
-
if (title) {
|
|
81
|
-
additionalProps['aria-labelledby'] = labelId;
|
|
82
|
-
}
|
|
83
|
-
const modalRef = useRef(null);
|
|
84
|
-
const overlayRef = useRef(null);
|
|
85
|
-
const keyboardNavigationRef = useKeyboardNavigation({ enabled: visible && !isServerEnv, mode: 'loop' });
|
|
86
|
-
const modalRefCallback = useMultipleRefs(ref, modalRef, keyboardNavigationRef);
|
|
87
|
-
const isPaddingsDisableAllowed = !title &&
|
|
88
|
-
!headerImageUrl &&
|
|
89
|
-
!headerImage &&
|
|
90
|
-
!titleDescription &&
|
|
91
|
-
!footer &&
|
|
92
|
-
!options &&
|
|
93
|
-
!actionLink &&
|
|
94
|
-
!actions;
|
|
95
|
-
const isVerticalPaddingsDisabled = disableVerticalPaddings && isPaddingsDisableAllowed;
|
|
96
|
-
const isHorizontalPaddingsDisabled = disableHorizontalPaddings && isPaddingsDisableAllowed;
|
|
97
|
-
const showOverlay = position === 'center' || _showOverlay;
|
|
98
|
-
const activatorRef = useRef(null);
|
|
99
|
-
const onEntering = useCallback(() => {
|
|
100
|
-
if (returnFocusOnClose && document.activeElement instanceof HTMLElement) {
|
|
101
|
-
activatorRef.current = document.activeElement;
|
|
102
|
-
}
|
|
103
|
-
if (!enableScrollRef.current && showOverlay) {
|
|
104
|
-
enableScrollRef.current = disableScroll();
|
|
105
|
-
}
|
|
106
|
-
if (modalRef.current && !modalRef.current.contains(document.activeElement)) {
|
|
107
|
-
modalRef.current.focus();
|
|
108
|
-
}
|
|
109
|
-
}, [returnFocusOnClose, showOverlay]);
|
|
110
|
-
const onEntered = useCallback(() => {
|
|
111
|
-
onAppear?.();
|
|
112
|
-
}, [onAppear]);
|
|
113
|
-
const onExit = useCallback(() => {
|
|
114
|
-
onBeforeExitRef.current?.();
|
|
115
|
-
}, []);
|
|
116
|
-
const onExited = useCallback(() => {
|
|
117
|
-
// оставляем обработку скрола еще и тут
|
|
118
|
-
// чтобы обработать историю со сменой breakpoint
|
|
119
|
-
enableScrollRef.current?.();
|
|
120
|
-
enableScrollRef.current = undefined;
|
|
121
|
-
onAfterExitRef.current?.();
|
|
122
|
-
if (activatorRef.current !== null && document.contains(activatorRef.current)) {
|
|
123
|
-
activatorRef.current?.focus();
|
|
124
|
-
activatorRef.current = null;
|
|
125
|
-
}
|
|
126
|
-
}, []);
|
|
127
|
-
useModalOrder(!!visible && !isServerEnv, modalRef);
|
|
128
|
-
const { breakpoint } = useBreakpoint();
|
|
129
|
-
useEffect(() => {
|
|
130
|
-
if (!visible) {
|
|
131
|
-
return;
|
|
132
|
-
}
|
|
133
|
-
const currentBreakpointVisible = !INVISIBLE_FOR_BREAKPOINTS.includes(breakpoint);
|
|
134
|
-
if (!currentBreakpointVisible) {
|
|
135
|
-
onExit();
|
|
136
|
-
onExited();
|
|
137
|
-
return;
|
|
138
|
-
}
|
|
139
|
-
onEntering();
|
|
140
|
-
// visible не должно быть в зависимостях, т.к. этот эффект обрабатывает только изменение брейкпоинта
|
|
141
|
-
// visible обрабатывается CSSTransition
|
|
142
|
-
// eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps
|
|
143
|
-
}, [breakpoint, onEntering, onExited, onExit]);
|
|
144
|
-
useEffect(() => {
|
|
145
|
-
return () => {
|
|
146
|
-
enableScrollRef.current?.(animationTimeoutExitRef.current);
|
|
147
|
-
enableScrollRef.current = undefined;
|
|
148
|
-
};
|
|
149
|
-
}, [visible]);
|
|
150
|
-
useLayoutEffect(() => {
|
|
151
|
-
const animationTimeoutElement = document.createElement('div');
|
|
152
|
-
animationTimeoutElement.classList.add(styles.animationTimeout);
|
|
153
|
-
document.body.appendChild(animationTimeoutElement);
|
|
154
|
-
const style = window.getComputedStyle(animationTimeoutElement);
|
|
155
|
-
setAnimationTimeout({
|
|
156
|
-
enter: toNumber(style.getPropertyValue('--enter-animation-duration')),
|
|
157
|
-
exit: toNumber(style.getPropertyValue('--exit-animation-duration')),
|
|
158
|
-
});
|
|
159
|
-
document.body.removeChild(animationTimeoutElement);
|
|
160
|
-
}, [setAnimationTimeout]);
|
|
161
|
-
useEffect(() => {
|
|
162
|
-
if (showOverlay || !pageHeaderPadding || !visible) {
|
|
163
|
-
return void 0;
|
|
164
|
-
}
|
|
165
|
-
const hasScrollTimeline = 'ScrollTimeline' in window;
|
|
166
|
-
const overlay = overlayRef.current;
|
|
167
|
-
if (!overlay) {
|
|
168
|
-
return void 0;
|
|
169
|
-
}
|
|
170
|
-
let animation;
|
|
171
|
-
const abortController = new AbortController();
|
|
172
|
-
const keyframes = { top: [`${pageHeaderPadding}px`, '0px'] };
|
|
173
|
-
if (hasScrollTimeline) {
|
|
174
|
-
const timeline = new ScrollTimeline({ source: document.documentElement, axis: 'y' });
|
|
175
|
-
animation = overlay.animate(keyframes, {
|
|
176
|
-
timeline,
|
|
177
|
-
rangeStart: '0px',
|
|
178
|
-
// calc нужен для устранения бага https://issues.chromium.org/issues/40929569
|
|
179
|
-
rangeEnd: `calc(0% + ${pageHeaderPadding}px)`,
|
|
180
|
-
});
|
|
181
|
-
}
|
|
182
|
-
else {
|
|
183
|
-
animation = overlay.animate(keyframes, { duration: 1000, fill: 'forwards' });
|
|
184
|
-
animation.pause();
|
|
185
|
-
const { signal } = abortController;
|
|
186
|
-
window.addEventListener('scroll', () => {
|
|
187
|
-
animation.currentTime =
|
|
188
|
-
(Math.min(document.documentElement.scrollTop, pageHeaderPadding) / pageHeaderPadding) *
|
|
189
|
-
1000;
|
|
190
|
-
}, { signal });
|
|
191
|
-
}
|
|
192
|
-
return () => {
|
|
193
|
-
abortController.abort();
|
|
194
|
-
};
|
|
195
|
-
}, [showOverlay, pageHeaderPadding, visible]);
|
|
196
|
-
const overlayEventHandlers = useNoBubbling({
|
|
197
|
-
onKeyDown: (event) => {
|
|
198
|
-
if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {
|
|
199
|
-
onClose(event);
|
|
200
|
-
}
|
|
201
|
-
},
|
|
202
|
-
onMouseDown: (event) => {
|
|
203
|
-
if (!closeByClickOutside || modalRef.current?.contains(event.target)) {
|
|
204
|
-
return;
|
|
205
|
-
}
|
|
206
|
-
onClose(event);
|
|
207
|
-
},
|
|
208
|
-
});
|
|
209
|
-
const overlayProps = showOverlay
|
|
210
|
-
? overlayEventHandlers
|
|
211
|
-
: {
|
|
212
|
-
onKeyDown: (event) => {
|
|
213
|
-
if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {
|
|
214
|
-
onClose(event);
|
|
215
|
-
}
|
|
216
|
-
},
|
|
217
|
-
};
|
|
218
|
-
if (INVISIBLE_FOR_BREAKPOINTS.includes(breakpoint) || isServerEnv) {
|
|
219
|
-
return null;
|
|
220
|
-
}
|
|
221
|
-
const modalHeaderProps = {
|
|
222
|
-
title,
|
|
223
|
-
titleElement,
|
|
224
|
-
titleAlignment,
|
|
225
|
-
titleSize,
|
|
226
|
-
titleMaxLines,
|
|
227
|
-
titleDescription,
|
|
228
|
-
titleDescriptionMaxLines,
|
|
229
|
-
titleStyle,
|
|
230
|
-
titleDescriptionStyle,
|
|
231
|
-
headerImageUrl,
|
|
232
|
-
headerImage,
|
|
233
|
-
headerHeight,
|
|
234
|
-
options,
|
|
235
|
-
actions,
|
|
236
|
-
actionLink,
|
|
237
|
-
};
|
|
238
|
-
const isTreeSelectorChild = isValidTreeSelectorWrapper(children);
|
|
239
|
-
// если есть progress bar, нужно скрыть divider (но showProgress - это слот под reactNode)
|
|
240
|
-
const isActionBarHaveProgressBar = !!footer &&
|
|
241
|
-
isActionBarComponent(footer) &&
|
|
242
|
-
Boolean(footer.props.showProgress) &&
|
|
243
|
-
isProgressBarComponent(footer.props.showProgress);
|
|
244
|
-
return createPortal(jsx(CSSTransition, { appear: true, in: visible && !isServerEnv, nodeRef: overlayRef, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExited: onExited, classNames: CSS_CLASSES[position], timeout: animationTimeout, unmountOnExit: true, children: jsx(ThemeWrapper, { children: (themeClass) => (jsx(Layer, { layer: "modal", children: jsx("div", { ...overlayProps, ref: overlayRef, className: classnames(styles.modalOverlay, themeClass, {
|
|
245
|
-
[styles.modalOverlayWithBackground]: showOverlay,
|
|
246
|
-
[styles.modalOverlayLeft]: position === 'left',
|
|
247
|
-
[styles.modalOverlayRight]: position === 'right',
|
|
248
|
-
}), "data-qa": "modal-overlay", children: jsx(CloseByClickOutsideContext.Provider, { value: overlayRef, children: jsxs("div", { ...rest, ...additionalProps, "aria-modal": visible && showOverlay && !isServerEnv, role: "dialog", className: classnames(styles.modal, {
|
|
249
|
-
[styles.sizeSmall]: size === 'small',
|
|
250
|
-
[styles.sizeMedium]: size === 'medium',
|
|
251
|
-
[styles.modalFullHeight]: height === 'full-screen' || isTreeSelectorChild,
|
|
252
|
-
[styles.noVerticalPaddings]: isVerticalPaddingsDisabled,
|
|
253
|
-
[styles.noHorizontalPaddings]: isHorizontalPaddingsDisabled,
|
|
254
|
-
[styles.modalWithBorder]: !showOverlay,
|
|
255
|
-
}), ref: modalRefCallback, tabIndex: -1, style: {
|
|
256
|
-
height: typeof height === 'number' ? `${height}px` : undefined,
|
|
257
|
-
minHeight: typeof minHeight === 'number'
|
|
258
|
-
? `min(calc(100vh - 12px * 2), ${minHeight}px)`
|
|
259
|
-
: undefined,
|
|
260
|
-
}, children: [jsx(ModalContentWithHeader, { ...modalHeaderProps, labelId: labelId, isTreeSelectorChild: isTreeSelectorChild, height: height, showDivider: !isActionBarHaveProgressBar, children: children }), !!footer && (jsx("div", { className: styles.modalFooter, "data-qa": "modal-footer", children: isActionBarComponent(footer)
|
|
261
|
-
? cloneElement(footer, {
|
|
262
|
-
type: footer.props.type || 'auto',
|
|
263
|
-
padding: footer.props.padding || DEFAULT_ACTION_BAR_PADDING,
|
|
264
|
-
showDivider: false,
|
|
265
|
-
})
|
|
266
|
-
: footer }))] }) }) }) })) }) }), host || document.body);
|
|
267
|
-
});
|
|
268
|
-
Modal.displayName = 'Modal';
|
|
269
|
-
|
|
270
|
-
export { Modal };
|
|
271
|
-
//# sourceMappingURL=Modal.js.map
|
package/Modal.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sources":["src/Modal.tsx"],"sourcesContent":["import {\n forwardRef,\n HTMLAttributes,\n useLayoutEffect,\n useRef,\n useState,\n useCallback,\n useId,\n useEffect,\n cloneElement,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\nimport classnames from 'classnames';\n\nimport { useServerEnv } from '@hh.ru/magritte-common-is-server-env';\nimport { keyboardMatch, keyboardKeys, useKeyboardNavigation } from '@hh.ru/magritte-common-keyboard';\nimport { disableScroll, TimeoutCallback } from '@hh.ru/magritte-common-modal-helper';\nimport { CloseByClickOutsideContext } from '@hh.ru/magritte-common-mouse/useCloseByClickOutside';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useNoBubbling } from '@hh.ru/magritte-common-use-no-bubbling';\nimport { isActionBarComponent } from '@hh.ru/magritte-ui-action-bar';\nimport { useBreakpoint, Breakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { ModalContentWithHeader } from '@hh.ru/magritte-ui-modal/ModalContentWithHeader';\nimport { ModalHeaderProps, ModalProps } from '@hh.ru/magritte-ui-modal/types';\nimport { useModalOrder } from '@hh.ru/magritte-ui-modal/useModalOrder';\nimport { isProgressBarComponent } from '@hh.ru/magritte-ui-progress-bar';\nimport { ThemeWrapper } from '@hh.ru/magritte-ui-theme-wrapper';\nimport { isValidTreeSelectorWrapper } from '@hh.ru/magritte-ui-tree-selector';\n\nimport styles from './modal.less';\n\nconst DEFAULT_ACTION_BAR_PADDING = 24;\nconst DEFAULT_PAGE_HEADER_PADDING = 72;\n\nconst noop = () => undefined;\n\nconst toNumber = (value: string) => {\n const result = parseInt(value, 10);\n return Number.isInteger(result) ? result : 0;\n};\n\nconst CSS_CLASSES = {\n center: {\n appear: styles.animationEnterCenter,\n appearActive: styles.animationEnterCenterActive,\n enter: styles.animationEnterCenter,\n enterActive: styles.animationEnterCenterActive,\n exit: styles.animationExitCenter,\n exitActive: styles.animationExitCenterActive,\n },\n left: {\n appear: styles.animationEnterLeft,\n appearActive: styles.animationEnterLeftActive,\n enter: styles.animationEnterLeft,\n enterActive: styles.animationEnterLeftActive,\n exit: styles.animationExitLeft,\n exitActive: styles.animationExitLeftActive,\n },\n right: {\n appear: styles.animationEnterRight,\n appearActive: styles.animationEnterRightActive,\n enter: styles.animationEnterRight,\n enterActive: styles.animationEnterRightActive,\n exit: styles.animationExitRight,\n exitActive: styles.animationExitRightActive,\n },\n};\n\nconst INVISIBLE_FOR_BREAKPOINTS = [Breakpoint.XS, Breakpoint.S];\n\nexport const Modal = forwardRef<\n HTMLDivElement,\n ModalProps &\n Omit<HTMLAttributes<HTMLDivElement>, keyof ModalProps | 'role' | 'tabindex' | 'className' | 'aria-labeledby'>\n>(\n (\n {\n visible,\n size = 'medium',\n title,\n titleAlignment = 'left',\n titleSize = 'large',\n titleMaxLines,\n titleElement = 'h2',\n titleDescription,\n titleDescriptionMaxLines,\n titleStyle,\n titleDescriptionStyle,\n children,\n onClose = noop,\n headerImageUrl,\n headerImage,\n headerHeight,\n host,\n options,\n actions,\n actionLink,\n footer,\n disableVerticalPaddings = false,\n disableHorizontalPaddings = false,\n closeByClickOutside = true,\n onAppear,\n onBeforeExit,\n onAfterExit,\n position = 'center',\n height = position === 'center' ? 'content' : 'full-screen',\n minHeight,\n showOverlay: _showOverlay = true,\n pageHeaderPadding = DEFAULT_PAGE_HEADER_PADDING,\n returnFocusOnClose,\n ...rest\n },\n ref\n ) => {\n const isServerEnv = useServerEnv();\n const enableScrollRef = useRef<TimeoutCallback>();\n const onAfterExitRef = useRef(onAfterExit);\n const onBeforeExitRef = useRef(onBeforeExit);\n onAfterExitRef.current = onAfterExit;\n onBeforeExitRef.current = onBeforeExit;\n const [animationTimeout, setAnimationTimeout] = useState<{ enter: number; exit: number }>({\n enter: 0,\n exit: 0,\n });\n const animationTimeoutExitRef = useRef(animationTimeout.exit);\n animationTimeoutExitRef.current = animationTimeout.exit;\n const labelId = useId();\n const additionalProps: { 'aria-labelledby'?: string } = {};\n if (title) {\n additionalProps['aria-labelledby'] = labelId;\n }\n const modalRef = useRef<HTMLDivElement>(null);\n const overlayRef = useRef<HTMLDivElement>(null);\n const keyboardNavigationRef = useKeyboardNavigation({ enabled: visible && !isServerEnv, mode: 'loop' });\n const modalRefCallback = useMultipleRefs(ref, modalRef, keyboardNavigationRef);\n\n const isPaddingsDisableAllowed =\n !title &&\n !headerImageUrl &&\n !headerImage &&\n !titleDescription &&\n !footer &&\n !options &&\n !actionLink &&\n !actions;\n const isVerticalPaddingsDisabled = disableVerticalPaddings && isPaddingsDisableAllowed;\n const isHorizontalPaddingsDisabled = disableHorizontalPaddings && isPaddingsDisableAllowed;\n\n const showOverlay = position === 'center' || _showOverlay;\n\n const activatorRef = useRef<HTMLElement | null>(null);\n const onEntering = useCallback(() => {\n if (returnFocusOnClose && document.activeElement instanceof HTMLElement) {\n activatorRef.current = document.activeElement;\n }\n if (!enableScrollRef.current && showOverlay) {\n enableScrollRef.current = disableScroll();\n }\n if (modalRef.current && !modalRef.current.contains(document.activeElement)) {\n modalRef.current.focus();\n }\n }, [returnFocusOnClose, showOverlay]);\n\n const onEntered = useCallback(() => {\n onAppear?.();\n }, [onAppear]);\n\n const onExit = useCallback(() => {\n onBeforeExitRef.current?.();\n }, []);\n\n const onExited = useCallback(() => {\n // оставляем обработку скрола еще и тут\n // чтобы обработать историю со сменой breakpoint\n enableScrollRef.current?.();\n enableScrollRef.current = undefined;\n\n onAfterExitRef.current?.();\n\n if (activatorRef.current !== null && document.contains(activatorRef.current)) {\n activatorRef.current?.focus();\n activatorRef.current = null;\n }\n }, []);\n\n useModalOrder(!!visible && !isServerEnv, modalRef);\n\n const { breakpoint } = useBreakpoint();\n useEffect(() => {\n if (!visible) {\n return;\n }\n\n const currentBreakpointVisible = !INVISIBLE_FOR_BREAKPOINTS.includes(breakpoint);\n if (!currentBreakpointVisible) {\n onExit();\n onExited();\n return;\n }\n\n onEntering();\n // visible не должно быть в зависимостях, т.к. этот эффект обрабатывает только изменение брейкпоинта\n // visible обрабатывается CSSTransition\n // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n }, [breakpoint, onEntering, onExited, onExit]);\n\n useEffect(() => {\n return () => {\n enableScrollRef.current?.(animationTimeoutExitRef.current);\n enableScrollRef.current = undefined;\n };\n }, [visible]);\n\n useLayoutEffect(() => {\n const animationTimeoutElement = document.createElement('div');\n animationTimeoutElement.classList.add(styles.animationTimeout);\n document.body.appendChild(animationTimeoutElement);\n const style = window.getComputedStyle(animationTimeoutElement);\n setAnimationTimeout({\n enter: toNumber(style.getPropertyValue('--enter-animation-duration')),\n exit: toNumber(style.getPropertyValue('--exit-animation-duration')),\n });\n document.body.removeChild(animationTimeoutElement);\n }, [setAnimationTimeout]);\n\n useEffect(() => {\n if (showOverlay || !pageHeaderPadding || !visible) {\n return void 0;\n }\n\n const hasScrollTimeline = 'ScrollTimeline' in window;\n const overlay = overlayRef.current;\n\n if (!overlay) {\n return void 0;\n }\n\n let animation: Animation;\n const abortController = new AbortController();\n const keyframes = { top: [`${pageHeaderPadding}px`, '0px'] };\n if (hasScrollTimeline) {\n const timeline = new ScrollTimeline({ source: document.documentElement, axis: 'y' });\n animation = overlay.animate(keyframes, {\n timeline,\n rangeStart: '0px',\n // calc нужен для устранения бага https://issues.chromium.org/issues/40929569\n rangeEnd: `calc(0% + ${pageHeaderPadding}px)`,\n } as KeyframeAnimationOptions);\n } else {\n animation = overlay.animate(keyframes, { duration: 1000, fill: 'forwards' });\n animation.pause();\n\n const { signal } = abortController;\n window.addEventListener(\n 'scroll',\n () => {\n animation.currentTime =\n (Math.min(document.documentElement.scrollTop, pageHeaderPadding) / pageHeaderPadding) *\n 1000;\n },\n { signal }\n );\n }\n\n return () => {\n abortController.abort();\n };\n }, [showOverlay, pageHeaderPadding, visible]);\n\n const overlayEventHandlers = useNoBubbling({\n onKeyDown: (event) => {\n if (keyboardMatch(event.nativeEvent as KeyboardEvent, keyboardKeys.Escape)) {\n onClose(event);\n }\n },\n onMouseDown: (event) => {\n if (!closeByClickOutside || modalRef.current?.contains(event.target as HTMLElement)) {\n return;\n }\n onClose(event);\n },\n });\n const overlayProps = showOverlay\n ? overlayEventHandlers\n : {\n onKeyDown: (event: React.KeyboardEvent) => {\n if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {\n onClose(event);\n }\n },\n };\n\n if (INVISIBLE_FOR_BREAKPOINTS.includes(breakpoint) || isServerEnv) {\n return null;\n }\n\n const modalHeaderProps = {\n title,\n titleElement,\n titleAlignment,\n titleSize,\n titleMaxLines,\n titleDescription,\n titleDescriptionMaxLines,\n titleStyle,\n titleDescriptionStyle,\n headerImageUrl,\n headerImage,\n headerHeight,\n options,\n actions,\n actionLink,\n } as ModalHeaderProps;\n\n const isTreeSelectorChild = isValidTreeSelectorWrapper(children);\n // если есть progress bar, нужно скрыть divider (но showProgress - это слот под reactNode)\n const isActionBarHaveProgressBar =\n !!footer &&\n isActionBarComponent(footer) &&\n Boolean(footer.props.showProgress) &&\n isProgressBarComponent(footer.props.showProgress);\n\n return createPortal(\n <CSSTransition\n appear\n in={visible && !isServerEnv}\n nodeRef={overlayRef}\n onEntering={onEntering}\n onEntered={onEntered}\n onExit={onExit}\n onExited={onExited}\n classNames={CSS_CLASSES[position]}\n timeout={animationTimeout}\n unmountOnExit\n >\n <ThemeWrapper>\n {(themeClass) => (\n <Layer layer=\"modal\">\n <div\n {...overlayProps}\n ref={overlayRef}\n className={classnames(styles.modalOverlay, themeClass, {\n [styles.modalOverlayWithBackground]: showOverlay,\n [styles.modalOverlayLeft]: position === 'left',\n [styles.modalOverlayRight]: position === 'right',\n })}\n data-qa=\"modal-overlay\"\n >\n <CloseByClickOutsideContext.Provider value={overlayRef}>\n <div\n {...rest}\n {...additionalProps}\n aria-modal={visible && showOverlay && !isServerEnv}\n role=\"dialog\"\n className={classnames(styles.modal, {\n [styles.sizeSmall]: size === 'small',\n [styles.sizeMedium]: size === 'medium',\n [styles.modalFullHeight]: height === 'full-screen' || isTreeSelectorChild,\n [styles.noVerticalPaddings]: isVerticalPaddingsDisabled,\n [styles.noHorizontalPaddings]: isHorizontalPaddingsDisabled,\n [styles.modalWithBorder]: !showOverlay,\n })}\n ref={modalRefCallback}\n tabIndex={-1}\n style={{\n height: typeof height === 'number' ? `${height}px` : undefined,\n minHeight:\n typeof minHeight === 'number'\n ? `min(calc(100vh - 12px * 2), ${minHeight}px)`\n : undefined,\n }}\n >\n <ModalContentWithHeader\n {...modalHeaderProps}\n labelId={labelId}\n isTreeSelectorChild={isTreeSelectorChild}\n height={height}\n showDivider={!isActionBarHaveProgressBar}\n >\n {children}\n </ModalContentWithHeader>\n {!!footer && (\n <div className={styles.modalFooter} data-qa=\"modal-footer\">\n {isActionBarComponent(footer)\n ? cloneElement(footer, {\n type: footer.props.type || 'auto',\n padding: footer.props.padding || DEFAULT_ACTION_BAR_PADDING,\n showDivider: false,\n })\n : footer}\n </div>\n )}\n </div>\n </CloseByClickOutsideContext.Provider>\n </div>\n </Layer>\n )}\n </ThemeWrapper>\n </CSSTransition>,\n host || document.body\n );\n }\n);\n\nModal.displayName = 'Modal';\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -1,150 +0,0 @@
|
|
|
1
|
-
import './index.css';
|
|
2
|
-
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { useRef, useState, useCallback, useLayoutEffect } from 'react';
|
|
4
|
-
import classnames from 'classnames';
|
|
5
|
-
import { requestAnimation } from '@hh.ru/magritte-common-func-utils';
|
|
6
|
-
import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
|
|
7
|
-
import { ContentOverlayRoot } from '@hh.ru/magritte-ui-content-overlay';
|
|
8
|
-
import { Divider } from '@hh.ru/magritte-ui-divider';
|
|
9
|
-
import { ModalHeader } from './ModalHeader.js';
|
|
10
|
-
import { useScrollbar, Scrollbar } from '@hh.ru/magritte-ui-scrollbar';
|
|
11
|
-
import { TextAreaGrowLimiter } from '@hh.ru/magritte-ui-textarea';
|
|
12
|
-
|
|
13
|
-
var styles = {"modal-overlay":"magritte-modal-overlay___lK22l_10-1-34","modalOverlay":"magritte-modal-overlay___lK22l_10-1-34","modal-overlay-with-background":"magritte-modal-overlay-with-background___ZYsA-_10-1-34","modalOverlayWithBackground":"magritte-modal-overlay-with-background___ZYsA-_10-1-34","modal":"magritte-modal___RAW6S_10-1-34","modal-overlay-left":"magritte-modal-overlay-left___4Qsdn_10-1-34","modalOverlayLeft":"magritte-modal-overlay-left___4Qsdn_10-1-34","modal-overlay-right":"magritte-modal-overlay-right___xAjO7_10-1-34","modalOverlayRight":"magritte-modal-overlay-right___xAjO7_10-1-34","size-small":"magritte-size-small___2JTM2_10-1-34","sizeSmall":"magritte-size-small___2JTM2_10-1-34","size-medium":"magritte-size-medium___cWCe7_10-1-34","sizeMedium":"magritte-size-medium___cWCe7_10-1-34","no-vertical-paddings":"magritte-no-vertical-paddings___Z3-oM_10-1-34","noVerticalPaddings":"magritte-no-vertical-paddings___Z3-oM_10-1-34","no-horizontal-paddings":"magritte-no-horizontal-paddings___aT95Y_10-1-34","noHorizontalPaddings":"magritte-no-horizontal-paddings___aT95Y_10-1-34","modal-full-height":"magritte-modal-full-height___gIM4E_10-1-34","modalFullHeight":"magritte-modal-full-height___gIM4E_10-1-34","modal-with-border":"magritte-modal-with-border___wYWgv_10-1-34","modalWithBorder":"magritte-modal-with-border___wYWgv_10-1-34","modal-content-wrapper":"magritte-modal-content-wrapper___23XFT_10-1-34","modalContentWrapper":"magritte-modal-content-wrapper___23XFT_10-1-34","modal-content":"magritte-modal-content___46QFS_10-1-34","modalContent":"magritte-modal-content___46QFS_10-1-34","modal-scroll-container":"magritte-modal-scroll-container___Tf8Ns_10-1-34","modalScrollContainer":"magritte-modal-scroll-container___Tf8Ns_10-1-34","modal-content-wrapper__one-line":"magritte-modal-content-wrapper__one-line___tYg8d_10-1-34","modalContentWrapperOneLine":"magritte-modal-content-wrapper__one-line___tYg8d_10-1-34","content-sticky-container":"magritte-content-sticky-container___nqEXj_10-1-34","contentStickyContainer":"magritte-content-sticky-container___nqEXj_10-1-34","divider-container":"magritte-divider-container___qP3VK_10-1-34","dividerContainer":"magritte-divider-container___qP3VK_10-1-34","divider-container-hidden":"magritte-divider-container-hidden___EIxB-_10-1-34","dividerContainerHidden":"magritte-divider-container-hidden___EIxB-_10-1-34","modal-footer":"magritte-modal-footer___8xPqQ_10-1-34","modalFooter":"magritte-modal-footer___8xPqQ_10-1-34","modal-buttons-container":"magritte-modal-buttons-container___1O1Nr_10-1-34","modalButtonsContainer":"magritte-modal-buttons-container___1O1Nr_10-1-34","animation-timeout":"magritte-animation-timeout___w-j7K_10-1-34","animationTimeout":"magritte-animation-timeout___w-j7K_10-1-34","animation-enter-center":"magritte-animation-enter-center___7jogC_10-1-34","animationEnterCenter":"magritte-animation-enter-center___7jogC_10-1-34","animation-enter-center-active":"magritte-animation-enter-center-active___fywwW_10-1-34","animationEnterCenterActive":"magritte-animation-enter-center-active___fywwW_10-1-34","animation-exit-center":"magritte-animation-exit-center___3Fa6x_10-1-34","animationExitCenter":"magritte-animation-exit-center___3Fa6x_10-1-34","animation-exit-center-active":"magritte-animation-exit-center-active___tY0UA_10-1-34","animationExitCenterActive":"magritte-animation-exit-center-active___tY0UA_10-1-34","animation-enter-left":"magritte-animation-enter-left___5YB8B_10-1-34","animationEnterLeft":"magritte-animation-enter-left___5YB8B_10-1-34","animation-enter-left-active":"magritte-animation-enter-left-active___5GK8s_10-1-34","animationEnterLeftActive":"magritte-animation-enter-left-active___5GK8s_10-1-34","animation-exit-left":"magritte-animation-exit-left___OnkQE_10-1-34","animationExitLeft":"magritte-animation-exit-left___OnkQE_10-1-34","animation-exit-left-active":"magritte-animation-exit-left-active___AEGxY_10-1-34","animationExitLeftActive":"magritte-animation-exit-left-active___AEGxY_10-1-34","animation-enter-right":"magritte-animation-enter-right___2aXOm_10-1-34","animationEnterRight":"magritte-animation-enter-right___2aXOm_10-1-34","animation-enter-right-active":"magritte-animation-enter-right-active___8wX4-_10-1-34","animationEnterRightActive":"magritte-animation-enter-right-active___8wX4-_10-1-34","animation-exit-right":"magritte-animation-exit-right___iczoc_10-1-34","animationExitRight":"magritte-animation-exit-right___iczoc_10-1-34","animation-exit-right-active":"magritte-animation-exit-right-active___eFS4O_10-1-34","animationExitRightActive":"magritte-animation-exit-right-active___eFS4O_10-1-34","space-preserver":"magritte-space-preserver___P5PKZ_10-1-34","spacePreserver":"magritte-space-preserver___P5PKZ_10-1-34","tree-selector-container":"magritte-tree-selector-container___fdhI-_10-1-34","treeSelectorContainer":"magritte-tree-selector-container___fdhI-_10-1-34","grow-limiter":"magritte-grow-limiter___zeIwy_10-1-34","growLimiter":"magritte-grow-limiter___zeIwy_10-1-34"};
|
|
14
|
-
|
|
15
|
-
const checkIsScrolledToBottom = (el) => {
|
|
16
|
-
return Math.abs(el.scrollHeight - el.scrollTop - el.clientHeight) < 1;
|
|
17
|
-
};
|
|
18
|
-
const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
|
|
19
|
-
// Минимальная высота до которой может сжаться хедер
|
|
20
|
-
const HEADER_SHRINK_MIN_HEIGHT = 148;
|
|
21
|
-
// Минимальная высота отступа между хедером и контентом
|
|
22
|
-
const HEADER_MARGIN_MIN_HEIGHT = 12;
|
|
23
|
-
// Максимальная высота отступа между хедером и контентом
|
|
24
|
-
const HEADER_MARGIN_MAX_HEIGHT = 24;
|
|
25
|
-
const HEADER_MARGIN_HEIGHT_DELTA = HEADER_MARGIN_MAX_HEIGHT - HEADER_MARGIN_MIN_HEIGHT;
|
|
26
|
-
// Вычисляет минимальную высоту до которой может сжаться хедер с учетом высоты контента, чтобы не спровоцировать
|
|
27
|
-
// изменение размера модалки
|
|
28
|
-
const calcHeaderShrinkLimit = (headerHeight, headerMaxHeight, contentHeight, contentScrollHeight, marginHeight) => {
|
|
29
|
-
// Высота контента скрытого под скроллом когда хедер и марджин под ним имеет максимальную допустимую высоту
|
|
30
|
-
const contentScrollDelta = contentScrollHeight - // Высота контента скрытого под скроллом в текущем состоянии
|
|
31
|
-
contentHeight + // Высота контейнера содержащего контент
|
|
32
|
-
(HEADER_MARGIN_MAX_HEIGHT - marginHeight) + // Дельта между текущей высотой марджина и максимальной допустимой
|
|
33
|
-
(headerMaxHeight - headerHeight); // Дельта между текущей высотой хедера и максимальной допустимой
|
|
34
|
-
const headerShrinkMinHeight = headerMaxHeight - (contentScrollDelta - HEADER_MARGIN_HEIGHT_DELTA);
|
|
35
|
-
return Math.max(headerShrinkMinHeight, HEADER_SHRINK_MIN_HEIGHT);
|
|
36
|
-
};
|
|
37
|
-
const shrinkByDelta = (headerImageContainer, headerWrapper, headerMinHeight, headerMaxHeight, scrollDeltaY) => {
|
|
38
|
-
if (!headerImageContainer || !headerWrapper) {
|
|
39
|
-
return;
|
|
40
|
-
}
|
|
41
|
-
const marginHeight = clamp(HEADER_MARGIN_MAX_HEIGHT - scrollDeltaY, HEADER_MARGIN_MIN_HEIGHT, HEADER_MARGIN_MAX_HEIGHT);
|
|
42
|
-
headerWrapper.style.marginBottom = `${marginHeight}px`;
|
|
43
|
-
const headerHeight = clamp(
|
|
44
|
-
// Тут прибаляем дельту марджина потому что сначала должен сжаться отступ
|
|
45
|
-
Math.floor(headerMaxHeight - scrollDeltaY + HEADER_MARGIN_HEIGHT_DELTA), headerMinHeight, headerMaxHeight);
|
|
46
|
-
headerImageContainer.style.height = `${headerHeight}px`;
|
|
47
|
-
};
|
|
48
|
-
const ModalContentWithHeader = ({ labelId, children, headerHeight: _headerHeight = 0, isTreeSelectorChild, height, showDivider = true, ...modalHeaderProps }) => {
|
|
49
|
-
const { title, headerImageUrl, headerImage, actions, actionLink, options } = modalHeaderProps;
|
|
50
|
-
const bottomDividerVisibleRef = useRef(false);
|
|
51
|
-
const contentContainerRef = useRef(null);
|
|
52
|
-
const headerImageContainerRef = useRef(null);
|
|
53
|
-
const headerWrapperRef = useRef(null);
|
|
54
|
-
const spacePreserverRef = useRef(null);
|
|
55
|
-
const stickyContainerRef = useRef(null);
|
|
56
|
-
const hasHeaderImageRef = useRef(!!headerImageUrl || !!headerImage);
|
|
57
|
-
hasHeaderImageRef.current = !!headerImageUrl || !!headerImage;
|
|
58
|
-
const headerHeightRef = useRef(0);
|
|
59
|
-
headerHeightRef.current = hasHeaderImageRef.current ? Math.max(_headerHeight, 200) : 0;
|
|
60
|
-
const minHeaderHeightRef = useRef(0);
|
|
61
|
-
const contentOverlayRef = useRef(null);
|
|
62
|
-
const bottomDividerContainerRef = useRef(null);
|
|
63
|
-
const topDividerContainerRef = useRef(null);
|
|
64
|
-
const withoutHeader = !title && !hasHeaderImageRef.current && !actions && !actionLink && !options;
|
|
65
|
-
const onlyActions = !title && !hasHeaderImageRef.current && !options && (actions || actionLink);
|
|
66
|
-
const [growLimiterContextValue, _] = useState(() => ({
|
|
67
|
-
containerRef: contentContainerRef,
|
|
68
|
-
}));
|
|
69
|
-
const isTopDividerVisible = () => {
|
|
70
|
-
if (!contentContainerRef.current) {
|
|
71
|
-
return false;
|
|
72
|
-
}
|
|
73
|
-
const topDividerVisible = hasHeaderImageRef.current
|
|
74
|
-
? contentContainerRef.current.scrollTop >
|
|
75
|
-
headerHeightRef.current - minHeaderHeightRef.current + HEADER_MARGIN_HEIGHT_DELTA
|
|
76
|
-
: contentContainerRef.current.scrollTop !== 0;
|
|
77
|
-
return topDividerVisible && (options || !hasHeaderImageRef.current) && !onlyActions && !withoutHeader;
|
|
78
|
-
};
|
|
79
|
-
const recalcContentOverlayPosition = useCallback(() => {
|
|
80
|
-
if (contentOverlayRef.current !== null && contentContainerRef.current !== null) {
|
|
81
|
-
contentOverlayRef.current.style.height = `${contentContainerRef.current.clientHeight}px`;
|
|
82
|
-
}
|
|
83
|
-
}, []);
|
|
84
|
-
const updateHeaderDimensions = useCallback(() => {
|
|
85
|
-
if (!headerImageContainerRef.current ||
|
|
86
|
-
!headerWrapperRef.current ||
|
|
87
|
-
!stickyContainerRef.current ||
|
|
88
|
-
!spacePreserverRef.current ||
|
|
89
|
-
!contentContainerRef.current) {
|
|
90
|
-
return;
|
|
91
|
-
}
|
|
92
|
-
if (!hasHeaderImageRef.current) {
|
|
93
|
-
spacePreserverRef.current.style.height = '0';
|
|
94
|
-
return;
|
|
95
|
-
}
|
|
96
|
-
minHeaderHeightRef.current = calcHeaderShrinkLimit(headerImageContainerRef.current.clientHeight, headerHeightRef.current, contentContainerRef.current.clientHeight, stickyContainerRef.current.scrollHeight, parseInt(headerWrapperRef.current.style.marginBottom || '0', 10));
|
|
97
|
-
shrinkByDelta(headerImageContainerRef.current, headerWrapperRef.current, minHeaderHeightRef.current, headerHeightRef.current, contentContainerRef.current.scrollTop);
|
|
98
|
-
const preserverSize = headerHeightRef.current - minHeaderHeightRef.current + HEADER_MARGIN_HEIGHT_DELTA;
|
|
99
|
-
spacePreserverRef.current.style.height = `${preserverSize}px`;
|
|
100
|
-
}, []);
|
|
101
|
-
useLayoutEffect(() => {
|
|
102
|
-
if (contentContainerRef.current) {
|
|
103
|
-
const observer = new ResizeObserver(requestAnimation(() => {
|
|
104
|
-
if (!contentContainerRef.current) {
|
|
105
|
-
return;
|
|
106
|
-
}
|
|
107
|
-
const isScrollable = contentContainerRef.current.scrollHeight > contentContainerRef.current.clientHeight;
|
|
108
|
-
const hasScroll = isScrollable && !checkIsScrolledToBottom(contentContainerRef.current);
|
|
109
|
-
bottomDividerVisibleRef.current = hasScroll;
|
|
110
|
-
bottomDividerContainerRef.current?.classList.toggle(styles.dividerContainerHidden, !bottomDividerVisibleRef.current);
|
|
111
|
-
updateHeaderDimensions();
|
|
112
|
-
recalcContentOverlayPosition();
|
|
113
|
-
}));
|
|
114
|
-
observer.observe(contentContainerRef.current);
|
|
115
|
-
return () => observer.disconnect();
|
|
116
|
-
}
|
|
117
|
-
return undefined;
|
|
118
|
-
}, [updateHeaderDimensions, recalcContentOverlayPosition]);
|
|
119
|
-
useLayoutEffect(() => {
|
|
120
|
-
updateHeaderDimensions();
|
|
121
|
-
recalcContentOverlayPosition();
|
|
122
|
-
if (!options && (headerImageUrl || headerImage)) {
|
|
123
|
-
topDividerContainerRef.current?.classList.toggle(styles.dividerContainerHidden, true);
|
|
124
|
-
}
|
|
125
|
-
}, [headerImageUrl, headerImage, updateHeaderDimensions, recalcContentOverlayPosition, options]);
|
|
126
|
-
const handleScroll = () => {
|
|
127
|
-
if (!contentContainerRef.current) {
|
|
128
|
-
return;
|
|
129
|
-
}
|
|
130
|
-
bottomDividerVisibleRef.current = !checkIsScrolledToBottom(contentContainerRef.current);
|
|
131
|
-
bottomDividerContainerRef.current?.classList.toggle(styles.dividerContainerHidden, !bottomDividerVisibleRef.current);
|
|
132
|
-
topDividerContainerRef.current?.classList.toggle(styles.dividerContainerHidden, !isTopDividerVisible());
|
|
133
|
-
if (hasHeaderImageRef.current) {
|
|
134
|
-
shrinkByDelta(headerImageContainerRef.current, headerWrapperRef.current, minHeaderHeightRef.current, headerHeightRef.current, contentContainerRef.current.scrollTop);
|
|
135
|
-
}
|
|
136
|
-
};
|
|
137
|
-
const { hasVerticalScroll, verticalScrollbarProps, ...scrollbar } = useScrollbar({ axis: 'vertical' });
|
|
138
|
-
const contentContainerRefCallback = useMultipleRefs(contentContainerRef, scrollbar.scrollContainerRef);
|
|
139
|
-
const stickyContainerRefCallback = useMultipleRefs(stickyContainerRef, scrollbar.contentWrapperRef);
|
|
140
|
-
return (jsxs(Fragment, { children: [jsxs("div", { className: classnames(styles.modalContentWrapper, {
|
|
141
|
-
[styles.modalContentWrapperOneLine]: onlyActions,
|
|
142
|
-
}), children: [jsx(ModalHeader, { ...modalHeaderProps, headerHeight: headerHeightRef.current, labelId: labelId, wrapperRef: headerWrapperRef, ref: headerImageContainerRef }), jsx("div", { className: classnames(styles.dividerContainer, {
|
|
143
|
-
[styles.dividerContainerHidden]: !isTopDividerVisible(),
|
|
144
|
-
}), ref: topDividerContainerRef, children: jsx(Divider, {}) }), jsx("div", { className: classnames(styles.modalContent, scrollbar.hoverContainerCssClass), children: jsx(ContentOverlayRoot, { ref: contentOverlayRef, children: isTreeSelectorChild ? (jsx("div", { className: styles.treeSelectorContainer, children: children })) : (jsxs(Fragment, { children: [jsxs("div", { className: classnames(styles.modalScrollContainer), ref: contentContainerRefCallback, onScroll: handleScroll, "data-qa": "modal-content-scroll-container", children: [jsx("div", { className: classnames(styles.contentStickyContainer), ref: stickyContainerRefCallback, children: jsx(TextAreaGrowLimiter, { ...growLimiterContextValue, className: styles.growLimiter, children: children }) }), jsx("div", { className: styles.spacePreserver, ref: spacePreserverRef })] }), hasVerticalScroll && jsx(Scrollbar, { ...verticalScrollbarProps })] })) }) })] }), showDivider && (jsx("div", { className: classnames(styles.dividerContainer, {
|
|
145
|
-
[styles.dividerContainerHidden]: !bottomDividerVisibleRef.current,
|
|
146
|
-
}), ref: bottomDividerContainerRef, children: jsx(Divider, {}) }))] }));
|
|
147
|
-
};
|
|
148
|
-
|
|
149
|
-
export { ModalContentWithHeader as M, styles as s };
|
|
150
|
-
//# sourceMappingURL=ModalContentWithHeader-BsKIMEA3.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ModalContentWithHeader-BsKIMEA3.js","sources":["src/ModalContentWithHeader.tsx"],"sourcesContent":["import { FC, PropsWithChildren, useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { requestAnimation } from '@hh.ru/magritte-common-func-utils';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { ContentOverlayRoot } from '@hh.ru/magritte-ui-content-overlay';\nimport { Divider } from '@hh.ru/magritte-ui-divider';\nimport { ModalHeader } from '@hh.ru/magritte-ui-modal/ModalHeader';\nimport { ModalHeaderProps, ModalHeight } from '@hh.ru/magritte-ui-modal/types';\nimport { Scrollbar, useScrollbar } from '@hh.ru/magritte-ui-scrollbar';\nimport { TextAreaGrowLimiter } from '@hh.ru/magritte-ui-textarea';\n\nimport styles from './modal.less';\n\nconst checkIsScrolledToBottom = (el: HTMLElement) => {\n return Math.abs(el.scrollHeight - el.scrollTop - el.clientHeight) < 1;\n};\n\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\n\n// Минимальная высота до которой может сжаться хедер\nconst HEADER_SHRINK_MIN_HEIGHT = 148;\n// Минимальная высота отступа между хедером и контентом\nconst HEADER_MARGIN_MIN_HEIGHT = 12;\n// Максимальная высота отступа между хедером и контентом\nconst HEADER_MARGIN_MAX_HEIGHT = 24;\nconst HEADER_MARGIN_HEIGHT_DELTA = HEADER_MARGIN_MAX_HEIGHT - HEADER_MARGIN_MIN_HEIGHT;\n\n// Вычисляет минимальную высоту до которой может сжаться хедер с учетом высоты контента, чтобы не спровоцировать\n// изменение размера модалки\nconst calcHeaderShrinkLimit = (\n headerHeight: number,\n headerMaxHeight: number,\n contentHeight: number,\n contentScrollHeight: number,\n marginHeight: number\n) => {\n // Высота контента скрытого под скроллом когда хедер и марджин под ним имеет максимальную допустимую высоту\n const contentScrollDelta =\n contentScrollHeight - // Высота контента скрытого под скроллом в текущем состоянии\n contentHeight + // Высота контейнера содержащего контент\n (HEADER_MARGIN_MAX_HEIGHT - marginHeight) + // Дельта между текущей высотой марджина и максимальной допустимой\n (headerMaxHeight - headerHeight); // Дельта между текущей высотой хедера и максимальной допустимой\n\n const headerShrinkMinHeight = headerMaxHeight - (contentScrollDelta - HEADER_MARGIN_HEIGHT_DELTA);\n\n return Math.max(headerShrinkMinHeight, HEADER_SHRINK_MIN_HEIGHT);\n};\n\nconst shrinkByDelta = (\n headerImageContainer: HTMLDivElement | null,\n headerWrapper: HTMLDivElement | null,\n headerMinHeight: number,\n headerMaxHeight: number,\n scrollDeltaY: number\n) => {\n if (!headerImageContainer || !headerWrapper) {\n return;\n }\n\n const marginHeight = clamp(\n HEADER_MARGIN_MAX_HEIGHT - scrollDeltaY,\n HEADER_MARGIN_MIN_HEIGHT,\n HEADER_MARGIN_MAX_HEIGHT\n );\n headerWrapper.style.marginBottom = `${marginHeight}px`;\n\n const headerHeight = clamp(\n // Тут прибаляем дельту марджина потому что сначала должен сжаться отступ\n Math.floor(headerMaxHeight - scrollDeltaY + HEADER_MARGIN_HEIGHT_DELTA),\n headerMinHeight,\n headerMaxHeight\n );\n headerImageContainer.style.height = `${headerHeight}px`;\n};\n\nexport const ModalContentWithHeader: FC<\n PropsWithChildren<\n ModalHeaderProps & { labelId: string; isTreeSelectorChild: boolean; height?: ModalHeight; showDivider: boolean }\n >\n> = ({\n labelId,\n children,\n headerHeight: _headerHeight = 0,\n isTreeSelectorChild,\n height,\n showDivider = true,\n ...modalHeaderProps\n}) => {\n const { title, headerImageUrl, headerImage, actions, actionLink, options } = modalHeaderProps;\n\n const bottomDividerVisibleRef = useRef(false);\n const contentContainerRef = useRef<HTMLDivElement>(null);\n const headerImageContainerRef = useRef<HTMLDivElement>(null);\n const headerWrapperRef = useRef<HTMLDivElement>(null);\n const spacePreserverRef = useRef<HTMLDivElement>(null);\n const stickyContainerRef = useRef<HTMLDivElement>(null);\n const hasHeaderImageRef = useRef(!!headerImageUrl || !!headerImage);\n hasHeaderImageRef.current = !!headerImageUrl || !!headerImage;\n const headerHeightRef = useRef(0);\n headerHeightRef.current = hasHeaderImageRef.current ? Math.max(_headerHeight, 200) : 0;\n const minHeaderHeightRef = useRef(0);\n const contentOverlayRef = useRef<HTMLDivElement>(null);\n\n const bottomDividerContainerRef = useRef<HTMLDivElement>(null);\n const topDividerContainerRef = useRef<HTMLDivElement>(null);\n\n const withoutHeader = !title && !hasHeaderImageRef.current && !actions && !actionLink && !options;\n const onlyActions = !title && !hasHeaderImageRef.current && !options && (actions || actionLink);\n\n const [growLimiterContextValue, _] = useState(() => ({\n containerRef: contentContainerRef,\n }));\n\n const isTopDividerVisible = () => {\n if (!contentContainerRef.current) {\n return false;\n }\n\n const topDividerVisible = hasHeaderImageRef.current\n ? contentContainerRef.current.scrollTop >\n headerHeightRef.current - minHeaderHeightRef.current + HEADER_MARGIN_HEIGHT_DELTA\n : contentContainerRef.current.scrollTop !== 0;\n\n return topDividerVisible && (options || !hasHeaderImageRef.current) && !onlyActions && !withoutHeader;\n };\n\n const recalcContentOverlayPosition = useCallback(() => {\n if (contentOverlayRef.current !== null && contentContainerRef.current !== null) {\n contentOverlayRef.current.style.height = `${contentContainerRef.current.clientHeight}px`;\n }\n }, []);\n\n const updateHeaderDimensions = useCallback(() => {\n if (\n !headerImageContainerRef.current ||\n !headerWrapperRef.current ||\n !stickyContainerRef.current ||\n !spacePreserverRef.current ||\n !contentContainerRef.current\n ) {\n return;\n }\n\n if (!hasHeaderImageRef.current) {\n spacePreserverRef.current.style.height = '0';\n return;\n }\n\n minHeaderHeightRef.current = calcHeaderShrinkLimit(\n headerImageContainerRef.current.clientHeight,\n headerHeightRef.current,\n contentContainerRef.current.clientHeight,\n stickyContainerRef.current.scrollHeight,\n parseInt(headerWrapperRef.current.style.marginBottom || '0', 10)\n );\n\n shrinkByDelta(\n headerImageContainerRef.current,\n headerWrapperRef.current,\n minHeaderHeightRef.current,\n headerHeightRef.current,\n contentContainerRef.current.scrollTop\n );\n const preserverSize = headerHeightRef.current - minHeaderHeightRef.current + HEADER_MARGIN_HEIGHT_DELTA;\n spacePreserverRef.current.style.height = `${preserverSize}px`;\n }, []);\n\n useLayoutEffect(() => {\n if (contentContainerRef.current) {\n const observer = new ResizeObserver(\n requestAnimation(() => {\n if (!contentContainerRef.current) {\n return;\n }\n const isScrollable =\n contentContainerRef.current.scrollHeight > contentContainerRef.current.clientHeight;\n const hasScroll = isScrollable && !checkIsScrolledToBottom(contentContainerRef.current);\n bottomDividerVisibleRef.current = hasScroll;\n bottomDividerContainerRef.current?.classList.toggle(\n styles.dividerContainerHidden,\n !bottomDividerVisibleRef.current\n );\n updateHeaderDimensions();\n recalcContentOverlayPosition();\n })\n );\n observer.observe(contentContainerRef.current);\n return () => observer.disconnect();\n }\n\n return undefined;\n }, [updateHeaderDimensions, recalcContentOverlayPosition]);\n\n useLayoutEffect(() => {\n updateHeaderDimensions();\n recalcContentOverlayPosition();\n if (!options && (headerImageUrl || headerImage)) {\n topDividerContainerRef.current?.classList.toggle(styles.dividerContainerHidden, true);\n }\n }, [headerImageUrl, headerImage, updateHeaderDimensions, recalcContentOverlayPosition, options]);\n\n const handleScroll = () => {\n if (!contentContainerRef.current) {\n return;\n }\n\n bottomDividerVisibleRef.current = !checkIsScrolledToBottom(contentContainerRef.current);\n bottomDividerContainerRef.current?.classList.toggle(\n styles.dividerContainerHidden,\n !bottomDividerVisibleRef.current\n );\n topDividerContainerRef.current?.classList.toggle(styles.dividerContainerHidden, !isTopDividerVisible());\n if (hasHeaderImageRef.current) {\n shrinkByDelta(\n headerImageContainerRef.current,\n headerWrapperRef.current,\n minHeaderHeightRef.current,\n headerHeightRef.current,\n contentContainerRef.current.scrollTop\n );\n }\n };\n\n const { hasVerticalScroll, verticalScrollbarProps, ...scrollbar } = useScrollbar({ axis: 'vertical' });\n const contentContainerRefCallback = useMultipleRefs(contentContainerRef, scrollbar.scrollContainerRef);\n const stickyContainerRefCallback = useMultipleRefs(stickyContainerRef, scrollbar.contentWrapperRef);\n\n return (\n <>\n <div\n className={classnames(styles.modalContentWrapper, {\n [styles.modalContentWrapperOneLine]: onlyActions,\n })}\n >\n <ModalHeader\n {...modalHeaderProps}\n headerHeight={headerHeightRef.current}\n labelId={labelId}\n wrapperRef={headerWrapperRef}\n ref={headerImageContainerRef}\n />\n <div\n className={classnames(styles.dividerContainer, {\n [styles.dividerContainerHidden]: !isTopDividerVisible(),\n })}\n ref={topDividerContainerRef}\n >\n <Divider />\n </div>\n\n <div className={classnames(styles.modalContent, scrollbar.hoverContainerCssClass)}>\n <ContentOverlayRoot ref={contentOverlayRef}>\n {isTreeSelectorChild ? (\n <div className={styles.treeSelectorContainer}>{children}</div>\n ) : (\n <>\n <div\n className={classnames(styles.modalScrollContainer)}\n ref={contentContainerRefCallback}\n onScroll={handleScroll}\n data-qa=\"modal-content-scroll-container\"\n >\n <div\n className={classnames(styles.contentStickyContainer)}\n ref={stickyContainerRefCallback}\n >\n <TextAreaGrowLimiter\n {...growLimiterContextValue}\n className={styles.growLimiter}\n >\n {children}\n </TextAreaGrowLimiter>\n </div>\n <div className={styles.spacePreserver} ref={spacePreserverRef} />\n </div>\n {hasVerticalScroll && <Scrollbar {...verticalScrollbarProps} />}\n </>\n )}\n </ContentOverlayRoot>\n </div>\n </div>\n {showDivider && (\n <div\n className={classnames(styles.dividerContainer, {\n [styles.dividerContainerHidden]: !bottomDividerVisibleRef.current,\n })}\n ref={bottomDividerContainerRef}\n >\n <Divider />\n </div>\n )}\n </>\n );\n};\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,uBAAuB,GAAG,CAAC,EAAe,KAAI;AAChD,IAAA,OAAO,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,YAAY,GAAG,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;AAC1E,CAAC,CAAC;AAEF,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW,KAAK,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;AAE/F;AACA,MAAM,wBAAwB,GAAG,GAAG,CAAC;AACrC;AACA,MAAM,wBAAwB,GAAG,EAAE,CAAC;AACpC;AACA,MAAM,wBAAwB,GAAG,EAAE,CAAC;AACpC,MAAM,0BAA0B,GAAG,wBAAwB,GAAG,wBAAwB,CAAC;AAEvF;AACA;AACA,MAAM,qBAAqB,GAAG,CAC1B,YAAoB,EACpB,eAAuB,EACvB,aAAqB,EACrB,mBAA2B,EAC3B,YAAoB,KACpB;;AAEA,IAAA,MAAM,kBAAkB,GACpB,mBAAmB;AACnB,QAAA,aAAa;AACb,SAAC,wBAAwB,GAAG,YAAY,CAAC;AACzC,SAAC,eAAe,GAAG,YAAY,CAAC,CAAC;IAErC,MAAM,qBAAqB,GAAG,eAAe,IAAI,kBAAkB,GAAG,0BAA0B,CAAC,CAAC;IAElG,OAAO,IAAI,CAAC,GAAG,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,CAAC;AACrE,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAClB,oBAA2C,EAC3C,aAAoC,EACpC,eAAuB,EACvB,eAAuB,EACvB,YAAoB,KACpB;AACA,IAAA,IAAI,CAAC,oBAAoB,IAAI,CAAC,aAAa,EAAE;QACzC,OAAO;KACV;AAED,IAAA,MAAM,YAAY,GAAG,KAAK,CACtB,wBAAwB,GAAG,YAAY,EACvC,wBAAwB,EACxB,wBAAwB,CAC3B,CAAC;IACF,aAAa,CAAC,KAAK,CAAC,YAAY,GAAG,CAAG,EAAA,YAAY,IAAI,CAAC;IAEvD,MAAM,YAAY,GAAG,KAAK;;AAEtB,IAAA,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,YAAY,GAAG,0BAA0B,CAAC,EACvE,eAAe,EACf,eAAe,CAClB,CAAC;IACF,oBAAoB,CAAC,KAAK,CAAC,MAAM,GAAG,CAAG,EAAA,YAAY,IAAI,CAAC;AAC5D,CAAC,CAAC;AAEK,MAAM,sBAAsB,GAI/B,CAAC,EACD,OAAO,EACP,QAAQ,EACR,YAAY,EAAE,aAAa,GAAG,CAAC,EAC/B,mBAAmB,EACnB,MAAM,EACN,WAAW,GAAG,IAAI,EAClB,GAAG,gBAAgB,EACtB,KAAI;AACD,IAAA,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,gBAAgB,CAAC;AAE9F,IAAA,MAAM,uBAAuB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AAC9C,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AACzD,IAAA,MAAM,uBAAuB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAC7D,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AACtD,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AACvD,IAAA,MAAM,kBAAkB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AACxD,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC;IACpE,iBAAiB,CAAC,OAAO,GAAG,CAAC,CAAC,cAAc,IAAI,CAAC,CAAC,WAAW,CAAC;AAC9D,IAAA,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAClC,eAAe,CAAC,OAAO,GAAG,iBAAiB,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;AACvF,IAAA,MAAM,kBAAkB,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;AACrC,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAEvD,IAAA,MAAM,yBAAyB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAC/D,IAAA,MAAM,sBAAsB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAE5D,IAAA,MAAM,aAAa,GAAG,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,OAAO,IAAI,CAAC,OAAO,IAAI,CAAC,UAAU,IAAI,CAAC,OAAO,CAAC;AAClG,IAAA,MAAM,WAAW,GAAG,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,OAAO,IAAI,CAAC,OAAO,KAAK,OAAO,IAAI,UAAU,CAAC,CAAC;IAEhG,MAAM,CAAC,uBAAuB,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,OAAO;AACjD,QAAA,YAAY,EAAE,mBAAmB;AACpC,KAAA,CAAC,CAAC,CAAC;IAEJ,MAAM,mBAAmB,GAAG,MAAK;AAC7B,QAAA,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE;AAC9B,YAAA,OAAO,KAAK,CAAC;SAChB;AAED,QAAA,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,OAAO;AAC/C,cAAE,mBAAmB,CAAC,OAAO,CAAC,SAAS;AACrC,gBAAA,eAAe,CAAC,OAAO,GAAG,kBAAkB,CAAC,OAAO,GAAG,0BAA0B;cACjF,mBAAmB,CAAC,OAAO,CAAC,SAAS,KAAK,CAAC,CAAC;AAElD,QAAA,OAAO,iBAAiB,KAAK,OAAO,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,aAAa,CAAC;AAC1G,KAAC,CAAC;AAEF,IAAA,MAAM,4BAA4B,GAAG,WAAW,CAAC,MAAK;AAClD,QAAA,IAAI,iBAAiB,CAAC,OAAO,KAAK,IAAI,IAAI,mBAAmB,CAAC,OAAO,KAAK,IAAI,EAAE;AAC5E,YAAA,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,CAAG,EAAA,mBAAmB,CAAC,OAAO,CAAC,YAAY,IAAI,CAAC;SAC5F;KACJ,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,MAAM,sBAAsB,GAAG,WAAW,CAAC,MAAK;QAC5C,IACI,CAAC,uBAAuB,CAAC,OAAO;YAChC,CAAC,gBAAgB,CAAC,OAAO;YACzB,CAAC,kBAAkB,CAAC,OAAO;YAC3B,CAAC,iBAAiB,CAAC,OAAO;AAC1B,YAAA,CAAC,mBAAmB,CAAC,OAAO,EAC9B;YACE,OAAO;SACV;AAED,QAAA,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE;YAC5B,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;YAC7C,OAAO;SACV;AAED,QAAA,kBAAkB,CAAC,OAAO,GAAG,qBAAqB,CAC9C,uBAAuB,CAAC,OAAO,CAAC,YAAY,EAC5C,eAAe,CAAC,OAAO,EACvB,mBAAmB,CAAC,OAAO,CAAC,YAAY,EACxC,kBAAkB,CAAC,OAAO,CAAC,YAAY,EACvC,QAAQ,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,YAAY,IAAI,GAAG,EAAE,EAAE,CAAC,CACnE,CAAC;QAEF,aAAa,CACT,uBAAuB,CAAC,OAAO,EAC/B,gBAAgB,CAAC,OAAO,EACxB,kBAAkB,CAAC,OAAO,EAC1B,eAAe,CAAC,OAAO,EACvB,mBAAmB,CAAC,OAAO,CAAC,SAAS,CACxC,CAAC;QACF,MAAM,aAAa,GAAG,eAAe,CAAC,OAAO,GAAG,kBAAkB,CAAC,OAAO,GAAG,0BAA0B,CAAC;QACxG,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,CAAA,EAAG,aAAa,CAAA,EAAA,CAAI,CAAC;KACjE,EAAE,EAAE,CAAC,CAAC;IAEP,eAAe,CAAC,MAAK;AACjB,QAAA,IAAI,mBAAmB,CAAC,OAAO,EAAE;YAC7B,MAAM,QAAQ,GAAG,IAAI,cAAc,CAC/B,gBAAgB,CAAC,MAAK;AAClB,gBAAA,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE;oBAC9B,OAAO;iBACV;AACD,gBAAA,MAAM,YAAY,GACd,mBAAmB,CAAC,OAAO,CAAC,YAAY,GAAG,mBAAmB,CAAC,OAAO,CAAC,YAAY,CAAC;gBACxF,MAAM,SAAS,GAAG,YAAY,IAAI,CAAC,uBAAuB,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;AACxF,gBAAA,uBAAuB,CAAC,OAAO,GAAG,SAAS,CAAC;AAC5C,gBAAA,yBAAyB,CAAC,OAAO,EAAE,SAAS,CAAC,MAAM,CAC/C,MAAM,CAAC,sBAAsB,EAC7B,CAAC,uBAAuB,CAAC,OAAO,CACnC,CAAC;AACF,gBAAA,sBAAsB,EAAE,CAAC;AACzB,gBAAA,4BAA4B,EAAE,CAAC;aAClC,CAAC,CACL,CAAC;AACF,YAAA,QAAQ,CAAC,OAAO,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;AAC9C,YAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE,CAAC;SACtC;AAED,QAAA,OAAO,SAAS,CAAC;AACrB,KAAC,EAAE,CAAC,sBAAsB,EAAE,4BAA4B,CAAC,CAAC,CAAC;IAE3D,eAAe,CAAC,MAAK;AACjB,QAAA,sBAAsB,EAAE,CAAC;AACzB,QAAA,4BAA4B,EAAE,CAAC;QAC/B,IAAI,CAAC,OAAO,KAAK,cAAc,IAAI,WAAW,CAAC,EAAE;AAC7C,YAAA,sBAAsB,CAAC,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,sBAAsB,EAAE,IAAI,CAAC,CAAC;SACzF;AACL,KAAC,EAAE,CAAC,cAAc,EAAE,WAAW,EAAE,sBAAsB,EAAE,4BAA4B,EAAE,OAAO,CAAC,CAAC,CAAC;IAEjG,MAAM,YAAY,GAAG,MAAK;AACtB,QAAA,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE;YAC9B,OAAO;SACV;QAED,uBAAuB,CAAC,OAAO,GAAG,CAAC,uBAAuB,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;AACxF,QAAA,yBAAyB,CAAC,OAAO,EAAE,SAAS,CAAC,MAAM,CAC/C,MAAM,CAAC,sBAAsB,EAC7B,CAAC,uBAAuB,CAAC,OAAO,CACnC,CAAC;AACF,QAAA,sBAAsB,CAAC,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,sBAAsB,EAAE,CAAC,mBAAmB,EAAE,CAAC,CAAC;AACxG,QAAA,IAAI,iBAAiB,CAAC,OAAO,EAAE;YAC3B,aAAa,CACT,uBAAuB,CAAC,OAAO,EAC/B,gBAAgB,CAAC,OAAO,EACxB,kBAAkB,CAAC,OAAO,EAC1B,eAAe,CAAC,OAAO,EACvB,mBAAmB,CAAC,OAAO,CAAC,SAAS,CACxC,CAAC;SACL;AACL,KAAC,CAAC;AAEF,IAAA,MAAM,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,GAAG,SAAS,EAAE,GAAG,YAAY,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;IACvG,MAAM,2BAA2B,GAAG,eAAe,CAAC,mBAAmB,EAAE,SAAS,CAAC,kBAAkB,CAAC,CAAC;IACvG,MAAM,0BAA0B,GAAG,eAAe,CAAC,kBAAkB,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAEpG,QACIA,IACI,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAAD,IAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,mBAAmB,EAAE;AAC9C,oBAAA,CAAC,MAAM,CAAC,0BAA0B,GAAG,WAAW;AACnD,iBAAA,CAAC,EAEF,QAAA,EAAA,CAAAE,GAAA,CAAC,WAAW,EAAA,EAAA,GACJ,gBAAgB,EACpB,YAAY,EAAE,eAAe,CAAC,OAAO,EACrC,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,gBAAgB,EAC5B,GAAG,EAAE,uBAAuB,EAC9B,CAAA,EACFA,GACI,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,gBAAgB,EAAE;AAC3C,4BAAA,CAAC,MAAM,CAAC,sBAAsB,GAAG,CAAC,mBAAmB,EAAE;AAC1D,yBAAA,CAAC,EACF,GAAG,EAAE,sBAAsB,EAE3B,QAAA,EAAAA,GAAA,CAAC,OAAO,EAAA,EAAA,CAAG,EACT,CAAA,EAENA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,sBAAsB,CAAC,EAAA,QAAA,EAC7EA,GAAC,CAAA,kBAAkB,EAAC,EAAA,GAAG,EAAE,iBAAiB,YACrC,mBAAmB,IAChBA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,qBAAqB,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,KAE9DF,IACI,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAAD,IAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAClD,GAAG,EAAE,2BAA2B,EAChC,QAAQ,EAAE,YAAY,EACd,SAAA,EAAA,gCAAgC,EAExC,QAAA,EAAA,CAAAE,GAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,sBAAsB,CAAC,EACpD,GAAG,EAAE,0BAA0B,EAAA,QAAA,EAE/BA,GAAC,CAAA,mBAAmB,EACZ,EAAA,GAAA,uBAAuB,EAC3B,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,QAAA,EAE5B,QAAQ,EAAA,CACS,EACpB,CAAA,EACNA,aAAK,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,GAAG,EAAE,iBAAiB,EAAI,CAAA,CAAA,EAAA,CAC/D,EACL,iBAAiB,IAAIA,GAAA,CAAC,SAAS,EAAA,EAAA,GAAK,sBAAsB,EAAI,CAAA,CAAA,EAAA,CAChE,CACN,EAAA,CACgB,EACnB,CAAA,CAAA,EAAA,CACJ,EACL,WAAW,KACRA,GAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,gBAAgB,EAAE;oBAC3C,CAAC,MAAM,CAAC,sBAAsB,GAAG,CAAC,uBAAuB,CAAC,OAAO;AACpE,iBAAA,CAAC,EACF,GAAG,EAAE,yBAAyB,EAE9B,QAAA,EAAAA,GAAA,CAAC,OAAO,EAAA,EAAA,CAAG,EACT,CAAA,CACT,CACF,EAAA,CAAA,EACL;AACN;;;;"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { FC, PropsWithChildren } from 'react';
|
|
2
|
-
import { ModalHeaderProps, ModalHeight } from '@hh.ru/magritte-ui-modal/types';
|
|
3
|
-
export declare const ModalContentWithHeader: FC<PropsWithChildren<ModalHeaderProps & {
|
|
4
|
-
labelId: string;
|
|
5
|
-
isTreeSelectorChild: boolean;
|
|
6
|
-
height?: ModalHeight;
|
|
7
|
-
showDivider: boolean;
|
|
8
|
-
}>>;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import './index.css';
|
|
2
|
-
import 'react/jsx-runtime';
|
|
3
|
-
import 'react';
|
|
4
|
-
import 'classnames';
|
|
5
|
-
import '@hh.ru/magritte-common-func-utils';
|
|
6
|
-
import '@hh.ru/magritte-common-use-multiple-refs';
|
|
7
|
-
import '@hh.ru/magritte-ui-content-overlay';
|
|
8
|
-
import '@hh.ru/magritte-ui-divider';
|
|
9
|
-
import './ModalHeader.js';
|
|
10
|
-
import '@hh.ru/magritte-ui-scrollbar';
|
|
11
|
-
import '@hh.ru/magritte-ui-textarea';
|
|
12
|
-
export { M as ModalContentWithHeader } from './ModalContentWithHeader-BsKIMEA3.js';
|
|
13
|
-
import '@hh.ru/magritte-ui-icon';
|
|
14
|
-
import '@hh.ru/magritte-ui-title';
|
|
15
|
-
//# sourceMappingURL=ModalContentWithHeader.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ModalContentWithHeader.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
|