@hh.ru/magritte-ui-modal 11.0.41 → 11.0.42
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/actionBarDefaults.d.ts +2 -2
- package/actionBarDefaults.js +3 -17
- package/actionBarDefaults.js.map +1 -1
- package/index.css +121 -121
- package/index.d.ts +5 -5
- package/index.js +1 -1
- package/index.mock.js +5 -5
- package/index.mock.js.map +1 -1
- package/internal/ModalBody.js +42 -24
- package/internal/ModalBody.js.map +1 -1
- package/internal/ModalContent.js +2 -2
- package/internal/ModalContent.js.map +1 -1
- package/internal/ModalInner.d.ts +1 -1
- package/internal/ModalInner.js +46 -26
- package/internal/ModalInner.js.map +1 -1
- package/internal/ModalSlotsContext.js +34 -52
- package/internal/ModalSlotsContext.js.map +1 -1
- package/internal/ModalStickyHeader.js +27 -23
- package/internal/ModalStickyHeader.js.map +1 -1
- package/internal/constants.js +33 -42
- package/internal/constants.js.map +1 -1
- package/internal/isTreeSelectorChild.js +0 -5
- package/internal/isTreeSelectorChild.js.map +1 -1
- package/internal/useModalOrder.js +69 -76
- package/internal/useModalOrder.js.map +1 -1
- package/internal/useModalTransition.js +71 -72
- package/internal/useModalTransition.js.map +1 -1
- package/internal/usePageHeaderScrollAnimation.js +42 -42
- package/internal/usePageHeaderScrollAnimation.js.map +1 -1
- package/modal-BQNvAaFW.js +5 -0
- package/modal-BQNvAaFW.js.map +1 -0
- package/package.json +13 -13
- package/public/Modal.d.ts +2 -2
- package/public/Modal.js +119 -51
- package/public/Modal.js.map +1 -1
- package/public/ModalMedia.js +26 -15
- package/public/ModalMedia.js.map +1 -1
- package/public/ModalWithImage.d.ts +2 -2
- package/public/ModalWithImage.js +11 -3
- package/public/ModalWithImage.js.map +1 -1
- package/withImageDefaults.d.ts +3 -3
- package/withImageDefaults.js +5 -18
- package/withImageDefaults.js.map +1 -1
- package/modal-Df_WVial.js +0 -5
- package/modal-Df_WVial.js.map +0 -1
|
@@ -1,48 +1,48 @@
|
|
|
1
1
|
import './../index.css';
|
|
2
2
|
import { useEffect } from 'react';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
4
|
+
const usePageHeaderScrollAnimation = ({
|
|
5
|
+
overlayRef,
|
|
6
|
+
showOverlay,
|
|
7
|
+
pageHeaderPadding,
|
|
8
|
+
visible
|
|
9
|
+
}) => {
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
if (showOverlay || !pageHeaderPadding || !visible) {
|
|
12
|
+
return void 0;
|
|
13
|
+
}
|
|
14
|
+
const hasScrollTimeline = "ScrollTimeline" in window;
|
|
15
|
+
const overlay = overlayRef.current;
|
|
16
|
+
if (!overlay) {
|
|
17
|
+
return void 0;
|
|
18
|
+
}
|
|
19
|
+
let animation;
|
|
20
|
+
const abortController = new AbortController();
|
|
21
|
+
const keyframes = { top: [`${pageHeaderPadding}px`, "0px"] };
|
|
22
|
+
if (hasScrollTimeline) {
|
|
23
|
+
const timeline = new ScrollTimeline({ source: document.documentElement, axis: "y" });
|
|
24
|
+
animation = overlay.animate(keyframes, {
|
|
25
|
+
timeline,
|
|
26
|
+
rangeStart: "0px",
|
|
27
|
+
// calc нужен для устранения бага https://issues.chromium.org/issues/40929569
|
|
28
|
+
rangeEnd: `calc(0% + ${pageHeaderPadding}px)`
|
|
29
|
+
});
|
|
30
|
+
} else {
|
|
31
|
+
animation = overlay.animate(keyframes, { duration: 1e3, fill: "forwards" });
|
|
32
|
+
animation.pause();
|
|
33
|
+
window.addEventListener(
|
|
34
|
+
"scroll",
|
|
35
|
+
() => {
|
|
36
|
+
animation.currentTime = Math.min(document.documentElement.scrollTop, pageHeaderPadding) / pageHeaderPadding * 1e3;
|
|
37
|
+
},
|
|
38
|
+
{ signal: abortController.signal }
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
return () => {
|
|
42
|
+
abortController.abort();
|
|
43
|
+
animation.cancel();
|
|
44
|
+
};
|
|
45
|
+
}, [overlayRef, showOverlay, pageHeaderPadding, visible]);
|
|
46
46
|
};
|
|
47
47
|
|
|
48
48
|
export { usePageHeaderScrollAnimation };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePageHeaderScrollAnimation.js","sources":["src/internal/usePageHeaderScrollAnimation.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react';\n\ninterface UsePageHeaderScrollAnimationParams {\n overlayRef: RefObject<HTMLDivElement>;\n showOverlay: boolean;\n pageHeaderPadding: number;\n visible: boolean | undefined;\n}\n\n/**\n * Анимирует `top` оверлея при скролле страницы (только для `position=left|right` без оверлея): по мере\n * прокрутки на `pageHeaderPadding` оверлей «подъезжает» под page-header от `pageHeaderPadding` к `0`.\n * Использует `ScrollTimeline`, где доступен, иначе — ручную привязку к событию `scroll`.\n */\nexport const usePageHeaderScrollAnimation = ({\n overlayRef,\n showOverlay,\n pageHeaderPadding,\n visible,\n}: UsePageHeaderScrollAnimationParams): void => {\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 // TS 7 (type-aware правила oxlint) уже знает rangeStart/rangeEnd, а TS 5 без каста не пропускает\n // oxlint-disable-next-line typescript/no-unnecessary-type-assertion\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 window.addEventListener(\n 'scroll',\n () => {\n animation.currentTime =\n (Math.min(document.documentElement.scrollTop, pageHeaderPadding) / pageHeaderPadding) * 1000;\n },\n { signal: abortController.signal }\n );\n }\n\n return () => {\n abortController.abort();\n animation.cancel();\n };\n }, [overlayRef, showOverlay, pageHeaderPadding, visible]);\n};\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"usePageHeaderScrollAnimation.js","sources":["src/internal/usePageHeaderScrollAnimation.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react';\n\ninterface UsePageHeaderScrollAnimationParams {\n overlayRef: RefObject<HTMLDivElement>;\n showOverlay: boolean;\n pageHeaderPadding: number;\n visible: boolean | undefined;\n}\n\n/**\n * Анимирует `top` оверлея при скролле страницы (только для `position=left|right` без оверлея): по мере\n * прокрутки на `pageHeaderPadding` оверлей «подъезжает» под page-header от `pageHeaderPadding` к `0`.\n * Использует `ScrollTimeline`, где доступен, иначе — ручную привязку к событию `scroll`.\n */\nexport const usePageHeaderScrollAnimation = ({\n overlayRef,\n showOverlay,\n pageHeaderPadding,\n visible,\n}: UsePageHeaderScrollAnimationParams): void => {\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 // TS 7 (type-aware правила oxlint) уже знает rangeStart/rangeEnd, а TS 5 без каста не пропускает\n // oxlint-disable-next-line typescript/no-unnecessary-type-assertion\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 window.addEventListener(\n 'scroll',\n () => {\n animation.currentTime =\n (Math.min(document.documentElement.scrollTop, pageHeaderPadding) / pageHeaderPadding) * 1000;\n },\n { signal: abortController.signal }\n );\n }\n\n return () => {\n abortController.abort();\n animation.cancel();\n };\n }, [overlayRef, showOverlay, pageHeaderPadding, visible]);\n};\n"],"names":[],"mappings":";;AAcO,MAAM,+BAA+B,CAAC;AAAA,EACzC,UAAA;AAAA,EACA,WAAA;AAAA,EACA,iBAAA;AAAA,EACA,OAAA;AACJ,CAAgD,KAAA;AAC5C,EAAA,SAAA,CAAU,MAAM;AACZ,IAAA,IAAI,WAAe,IAAA,CAAC,iBAAqB,IAAA,CAAC,OAAS,EAAA;AAC/C,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACX;AAEA,IAAA,MAAM,oBAAoB,gBAAoB,IAAA,MAAA,CAAA;AAC9C,IAAA,MAAM,UAAU,UAAW,CAAA,OAAA,CAAA;AAE3B,IAAA,IAAI,CAAC,OAAS,EAAA;AACV,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACX;AAEA,IAAI,IAAA,SAAA,CAAA;AACJ,IAAM,MAAA,eAAA,GAAkB,IAAI,eAAgB,EAAA,CAAA;AAC5C,IAAM,MAAA,SAAA,GAAY,EAAE,GAAK,EAAA,CAAC,GAAG,iBAAiB,CAAA,EAAA,CAAA,EAAM,KAAK,CAAE,EAAA,CAAA;AAC3D,IAAA,IAAI,iBAAmB,EAAA;AACnB,MAAM,MAAA,QAAA,GAAW,IAAI,cAAe,CAAA,EAAE,QAAQ,QAAS,CAAA,eAAA,EAAiB,IAAM,EAAA,GAAA,EAAK,CAAA,CAAA;AAGnF,MAAY,SAAA,GAAA,OAAA,CAAQ,QAAQ,SAAW,EAAA;AAAA,QACnC,QAAA;AAAA,QACA,UAAY,EAAA,KAAA;AAAA;AAAA,QAEZ,QAAA,EAAU,aAAa,iBAAiB,CAAA,GAAA,CAAA;AAAA,OACf,CAAA,CAAA;AAAA,KAC1B,MAAA;AACH,MAAY,SAAA,GAAA,OAAA,CAAQ,QAAQ,SAAW,EAAA,EAAE,UAAU,GAAM,EAAA,IAAA,EAAM,YAAY,CAAA,CAAA;AAC3E,MAAA,SAAA,CAAU,KAAM,EAAA,CAAA;AAEhB,MAAO,MAAA,CAAA,gBAAA;AAAA,QACH,QAAA;AAAA,QACA,MAAM;AACF,UAAU,SAAA,CAAA,WAAA,GACL,KAAK,GAAI,CAAA,QAAA,CAAS,gBAAgB,SAAW,EAAA,iBAAiB,IAAI,iBAAqB,GAAA,GAAA,CAAA;AAAA,SAChG;AAAA,QACA,EAAE,MAAQ,EAAA,eAAA,CAAgB,MAAO,EAAA;AAAA,OACrC,CAAA;AAAA,KACJ;AAEA,IAAA,OAAO,MAAM;AACT,MAAA,eAAA,CAAgB,KAAM,EAAA,CAAA;AACtB,MAAA,SAAA,CAAU,MAAO,EAAA,CAAA;AAAA,KACrB,CAAA;AAAA,KACD,CAAC,UAAA,EAAY,WAAa,EAAA,iBAAA,EAAmB,OAAO,CAAC,CAAA,CAAA;AAC5D;;;;"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
var styles = {"sticky-header":"magritte-sticky-header___TPafy_11-0-42","stickyHeader":"magritte-sticky-header___TPafy_11-0-42","sticky-header-inner":"magritte-sticky-header-inner___u5p8h_11-0-42","stickyHeaderInner":"magritte-sticky-header-inner___u5p8h_11-0-42","modal-media":"magritte-modal-media___UqHGM_11-0-42","modalMedia":"magritte-modal-media___UqHGM_11-0-42","fixed-height":"magritte-fixed-height___wyJ7-_11-0-42","fixedHeight":"magritte-fixed-height___wyJ7-_11-0-42","contain":"magritte-contain___3QD0Z_11-0-42","cover":"magritte-cover___nry9O_11-0-42","content-overlay-top":"magritte-content-overlay-top___6snWk_11-0-42","contentOverlayTop":"magritte-content-overlay-top___6snWk_11-0-42","grow-limiter":"magritte-grow-limiter___GmpBj_11-0-42","growLimiter":"magritte-grow-limiter___GmpBj_11-0-42","modal-overlay":"magritte-modal-overlay___WwfCg_11-0-42","modalOverlay":"magritte-modal-overlay___WwfCg_11-0-42","modal-overlay-with-background":"magritte-modal-overlay-with-background___DDxJn_11-0-42","modalOverlayWithBackground":"magritte-modal-overlay-with-background___DDxJn_11-0-42","modal":"magritte-modal___C4o5U_11-0-42","modal-overlay-left":"magritte-modal-overlay-left___agPyC_11-0-42","modalOverlayLeft":"magritte-modal-overlay-left___agPyC_11-0-42","modal-overlay-right":"magritte-modal-overlay-right___-XDAx_11-0-42","modalOverlayRight":"magritte-modal-overlay-right___-XDAx_11-0-42","size-small":"magritte-size-small___cI-Ql_11-0-42","sizeSmall":"magritte-size-small___cI-Ql_11-0-42","size-medium":"magritte-size-medium___jnqfu_11-0-42","sizeMedium":"magritte-size-medium___jnqfu_11-0-42","no-vertical-paddings":"magritte-no-vertical-paddings___dxyot_11-0-42","noVerticalPaddings":"magritte-no-vertical-paddings___dxyot_11-0-42","no-horizontal-paddings":"magritte-no-horizontal-paddings___Q-i-5_11-0-42","noHorizontalPaddings":"magritte-no-horizontal-paddings___Q-i-5_11-0-42","modal-full-height":"magritte-modal-full-height___Aew5F_11-0-42","modalFullHeight":"magritte-modal-full-height___Aew5F_11-0-42","modal-with-border":"magritte-modal-with-border___KSnhf_11-0-42","modalWithBorder":"magritte-modal-with-border___KSnhf_11-0-42","modal-content-wrapper":"magritte-modal-content-wrapper___VzoTN_11-0-42","modalContentWrapper":"magritte-modal-content-wrapper___VzoTN_11-0-42","modal-footer":"magritte-modal-footer___Ha-sZ_11-0-42","modalFooter":"magritte-modal-footer___Ha-sZ_11-0-42","modal-footer-empty":"magritte-modal-footer-empty___tmH-x_11-0-42","modalFooterEmpty":"magritte-modal-footer-empty___tmH-x_11-0-42","animation-timeout":"magritte-animation-timeout___G4Hl1_11-0-42","animationTimeout":"magritte-animation-timeout___G4Hl1_11-0-42","animation-enter-center":"magritte-animation-enter-center___sq8j7_11-0-42","animationEnterCenter":"magritte-animation-enter-center___sq8j7_11-0-42","animation-enter-center-active":"magritte-animation-enter-center-active___ORYEh_11-0-42","animationEnterCenterActive":"magritte-animation-enter-center-active___ORYEh_11-0-42","animation-exit-center":"magritte-animation-exit-center___lLCX1_11-0-42","animationExitCenter":"magritte-animation-exit-center___lLCX1_11-0-42","animation-exit-center-active":"magritte-animation-exit-center-active___Ik2Yl_11-0-42","animationExitCenterActive":"magritte-animation-exit-center-active___Ik2Yl_11-0-42","animation-enter-left":"magritte-animation-enter-left___jJDlv_11-0-42","animationEnterLeft":"magritte-animation-enter-left___jJDlv_11-0-42","animation-enter-left-active":"magritte-animation-enter-left-active___-kFij_11-0-42","animationEnterLeftActive":"magritte-animation-enter-left-active___-kFij_11-0-42","animation-exit-left":"magritte-animation-exit-left___G2Plq_11-0-42","animationExitLeft":"magritte-animation-exit-left___G2Plq_11-0-42","animation-exit-left-active":"magritte-animation-exit-left-active___XW2K4_11-0-42","animationExitLeftActive":"magritte-animation-exit-left-active___XW2K4_11-0-42","animation-enter-right":"magritte-animation-enter-right___rrMS0_11-0-42","animationEnterRight":"magritte-animation-enter-right___rrMS0_11-0-42","animation-enter-right-active":"magritte-animation-enter-right-active___p7rg-_11-0-42","animationEnterRightActive":"magritte-animation-enter-right-active___p7rg-_11-0-42","animation-exit-right":"magritte-animation-exit-right___f3qIC_11-0-42","animationExitRight":"magritte-animation-exit-right___f3qIC_11-0-42","animation-exit-right-active":"magritte-animation-exit-right-active___-sG1k_11-0-42","animationExitRightActive":"magritte-animation-exit-right-active___-sG1k_11-0-42","tree-selector-container":"magritte-tree-selector-container___4cdf5_11-0-42","treeSelectorContainer":"magritte-tree-selector-container___4cdf5_11-0-42","modal-scroll-container":"magritte-modal-scroll-container___hOCdh_11-0-42","modalScrollContainer":"magritte-modal-scroll-container___hOCdh_11-0-42","nav-bar":"magritte-nav-bar___CL7d-_11-0-42","navBar":"magritte-nav-bar___CL7d-_11-0-42","header":"magritte-header___pufwA_11-0-42","static":"magritte-static___3B6cn_11-0-42","content-overlay-bottom":"magritte-content-overlay-bottom___bDuPC_11-0-42","contentOverlayBottom":"magritte-content-overlay-bottom___bDuPC_11-0-42"};
|
|
3
|
+
|
|
4
|
+
export { styles as s };
|
|
5
|
+
//# sourceMappingURL=modal-BQNvAaFW.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal-BQNvAaFW.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-modal",
|
|
3
|
-
"version": "11.0.
|
|
3
|
+
"version": "11.0.42",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -31,25 +31,25 @@
|
|
|
31
31
|
"@hh.ru/magritte-common-mouse": "1.2.1",
|
|
32
32
|
"@hh.ru/magritte-common-use-multiple-refs": "1.1.12",
|
|
33
33
|
"@hh.ru/magritte-common-use-no-bubbling": "1.0.9",
|
|
34
|
-
"@hh.ru/magritte-design-tokens": "26.0.
|
|
34
|
+
"@hh.ru/magritte-design-tokens": "26.0.1",
|
|
35
35
|
"@hh.ru/magritte-internal-accessible-region": "1.0.4",
|
|
36
36
|
"@hh.ru/magritte-internal-layer-name": "3.4.2",
|
|
37
37
|
"@hh.ru/magritte-internal-slot-registry": "1.1.1",
|
|
38
|
-
"@hh.ru/magritte-ui-action-bar": "5.4.
|
|
38
|
+
"@hh.ru/magritte-ui-action-bar": "5.4.25",
|
|
39
39
|
"@hh.ru/magritte-ui-breakpoint": "6.1.2",
|
|
40
40
|
"@hh.ru/magritte-ui-content-overlay": "1.2.2",
|
|
41
|
-
"@hh.ru/magritte-ui-divider": "3.2.
|
|
42
|
-
"@hh.ru/magritte-ui-icon": "15.1.
|
|
41
|
+
"@hh.ru/magritte-ui-divider": "3.2.12",
|
|
42
|
+
"@hh.ru/magritte-ui-icon": "15.1.5",
|
|
43
43
|
"@hh.ru/magritte-ui-layer": "3.2.8",
|
|
44
44
|
"@hh.ru/magritte-ui-layout": "2.1.1",
|
|
45
45
|
"@hh.ru/magritte-ui-mock-component": "1.1.8",
|
|
46
|
-
"@hh.ru/magritte-ui-nav-bar": "2.0.
|
|
47
|
-
"@hh.ru/magritte-ui-progress-bar": "5.0.
|
|
48
|
-
"@hh.ru/magritte-ui-scrollbar": "1.0.
|
|
49
|
-
"@hh.ru/magritte-ui-textarea": "3.3.
|
|
50
|
-
"@hh.ru/magritte-ui-theme-wrapper": "1.1.
|
|
51
|
-
"@hh.ru/magritte-ui-title": "8.3.
|
|
52
|
-
"@hh.ru/magritte-ui-tree-selector": "5.5.
|
|
46
|
+
"@hh.ru/magritte-ui-nav-bar": "2.0.21",
|
|
47
|
+
"@hh.ru/magritte-ui-progress-bar": "5.0.37",
|
|
48
|
+
"@hh.ru/magritte-ui-scrollbar": "1.0.39",
|
|
49
|
+
"@hh.ru/magritte-ui-textarea": "3.3.55",
|
|
50
|
+
"@hh.ru/magritte-ui-theme-wrapper": "1.1.29",
|
|
51
|
+
"@hh.ru/magritte-ui-title": "8.3.14",
|
|
52
|
+
"@hh.ru/magritte-ui-tree-selector": "5.5.81"
|
|
53
53
|
},
|
|
54
54
|
"peerDependencies": {
|
|
55
55
|
"classnames": ">=2.3.2",
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"publishConfig": {
|
|
61
61
|
"access": "public"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "f6539d7a0e7cd42dd851458db1de04a748bbee03"
|
|
64
64
|
}
|
package/public/Modal.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type HTMLAttributes, type ForwardRefExoticComponent, type PropsWithoutRef, type RefAttributes } from 'react';
|
|
2
2
|
import { type ExplicitRegionProps } from '@hh.ru/magritte-internal-accessible-region';
|
|
3
|
-
import { type ModalMediaProps } from '
|
|
4
|
-
import { type ModalProps } from '
|
|
3
|
+
import { type ModalMediaProps } from '../public/ModalMedia';
|
|
4
|
+
import { type ModalProps } from '../public/types';
|
|
5
5
|
type ModalRootProps = ModalProps & ExplicitRegionProps & Omit<HTMLAttributes<HTMLDivElement>, keyof ModalProps | 'role' | 'tabIndex' | 'className'>;
|
|
6
6
|
interface ModalCompound {
|
|
7
7
|
Media: ForwardRefExoticComponent<ModalMediaProps & RefAttributes<HTMLDivElement>>;
|
package/public/Modal.js
CHANGED
|
@@ -20,7 +20,7 @@ import { useModalTransition } from '../internal/useModalTransition.js';
|
|
|
20
20
|
import { usePageHeaderScrollAnimation } from '../internal/usePageHeaderScrollAnimation.js';
|
|
21
21
|
import { ModalMedia } from './ModalMedia.js';
|
|
22
22
|
import { ThemeWrapper } from '@hh.ru/magritte-ui-theme-wrapper';
|
|
23
|
-
import { s as styles } from '../modal-
|
|
23
|
+
import { s as styles } from '../modal-BQNvAaFW.js';
|
|
24
24
|
import '@hh.ru/magritte-ui-textarea';
|
|
25
25
|
import '@hh.ru/magritte-ui-action-bar';
|
|
26
26
|
import '../actionBarDefaults.js';
|
|
@@ -37,69 +37,137 @@ import '@hh.ru/magritte-ui-breakpoint';
|
|
|
37
37
|
import '../internal/useModalOrder.js';
|
|
38
38
|
import '@hh.ru/magritte-common-dom-storage';
|
|
39
39
|
|
|
40
|
-
const Modal = forwardRef(
|
|
40
|
+
const Modal = forwardRef(
|
|
41
|
+
({
|
|
42
|
+
visible,
|
|
43
|
+
size = "medium",
|
|
44
|
+
header,
|
|
45
|
+
footer,
|
|
46
|
+
children,
|
|
47
|
+
onClose = noop,
|
|
48
|
+
host,
|
|
49
|
+
disableVerticalPaddings = false,
|
|
50
|
+
disableHorizontalPaddings = false,
|
|
51
|
+
closeByClickOutside = true,
|
|
52
|
+
onAppear,
|
|
53
|
+
onBeforeExit,
|
|
54
|
+
onAfterExit,
|
|
55
|
+
position = "center",
|
|
56
|
+
height = position === "center" ? "content" : "full-screen",
|
|
57
|
+
minHeight,
|
|
58
|
+
showOverlay: _showOverlay = true,
|
|
59
|
+
pageHeaderPadding = DEFAULT_PAGE_HEADER_PADDING,
|
|
60
|
+
returnFocusOnClose,
|
|
61
|
+
"aria-label": ariaLabel,
|
|
62
|
+
"aria-labelledby": ariaLabelledby,
|
|
63
|
+
"aria-describedby": ariaDescribedby,
|
|
64
|
+
"aria-description": ariaDescription,
|
|
65
|
+
...rest
|
|
66
|
+
}, ref) => {
|
|
41
67
|
const isServerEnv = useServerEnv();
|
|
42
68
|
const [animationTimeout] = useState(getAnimationTimeout);
|
|
43
69
|
const modalRef = useRef(null);
|
|
44
70
|
const overlayRef = useRef(null);
|
|
45
|
-
const keyboardNavigationRef = useKeyboardNavigation({ enabled: visible && !isServerEnv, mode:
|
|
71
|
+
const keyboardNavigationRef = useKeyboardNavigation({ enabled: visible && !isServerEnv, mode: "loop" });
|
|
46
72
|
const modalRefCallback = useMultipleRefs(ref, modalRef, keyboardNavigationRef);
|
|
47
|
-
const showOverlay = position ===
|
|
48
|
-
|
|
49
|
-
const resolvedHeight = isTreeSelectorChild(children) ? 'full-screen' : height;
|
|
73
|
+
const showOverlay = position === "center" || _showOverlay;
|
|
74
|
+
const resolvedHeight = isTreeSelectorChild(children) ? "full-screen" : height;
|
|
50
75
|
const { onEntering, onEntered, onExit, onExited, isHiddenForBreakpoint } = useModalTransition({
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
76
|
+
visible,
|
|
77
|
+
isServerEnv,
|
|
78
|
+
showOverlay,
|
|
79
|
+
returnFocusOnClose,
|
|
80
|
+
onAppear,
|
|
81
|
+
onBeforeExit,
|
|
82
|
+
onAfterExit,
|
|
83
|
+
modalRef,
|
|
84
|
+
animationTimeoutExit: animationTimeout.exit
|
|
60
85
|
});
|
|
61
86
|
usePageHeaderScrollAnimation({
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
87
|
+
overlayRef,
|
|
88
|
+
showOverlay,
|
|
89
|
+
pageHeaderPadding,
|
|
90
|
+
visible: visible && !isHiddenForBreakpoint
|
|
66
91
|
});
|
|
67
92
|
const overlayEventHandlers = useNoBubbling({
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
93
|
+
onKeyDown: (event) => {
|
|
94
|
+
if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {
|
|
95
|
+
onClose(event);
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
onMouseDown: (event) => {
|
|
99
|
+
if (closeByClickOutside && !modalRef.current?.contains(event.target)) {
|
|
100
|
+
onClose(event);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
78
103
|
});
|
|
79
|
-
const overlayProps = showOverlay
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
},
|
|
87
|
-
};
|
|
104
|
+
const overlayProps = showOverlay ? overlayEventHandlers : {
|
|
105
|
+
onKeyDown: (event) => {
|
|
106
|
+
if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {
|
|
107
|
+
onClose(event);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
};
|
|
88
111
|
if (isHiddenForBreakpoint || isServerEnv) {
|
|
89
|
-
|
|
112
|
+
return null;
|
|
90
113
|
}
|
|
91
|
-
return createPortal(
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
114
|
+
return createPortal(
|
|
115
|
+
/* @__PURE__ */ jsx(
|
|
116
|
+
CSSTransition,
|
|
117
|
+
{
|
|
118
|
+
appear: true,
|
|
119
|
+
in: visible && !isServerEnv,
|
|
120
|
+
nodeRef: overlayRef,
|
|
121
|
+
onEntering,
|
|
122
|
+
onEntered,
|
|
123
|
+
onExit,
|
|
124
|
+
onExited,
|
|
125
|
+
classNames: CSS_CLASSES[position],
|
|
126
|
+
timeout: animationTimeout,
|
|
127
|
+
unmountOnExit: true,
|
|
128
|
+
children: /* @__PURE__ */ jsx(ThemeWrapper, { children: (themeClass) => /* @__PURE__ */ jsx(Layer, { layer: "modal", children: /* @__PURE__ */ jsx(
|
|
129
|
+
"div",
|
|
130
|
+
{
|
|
131
|
+
...overlayProps,
|
|
132
|
+
ref: overlayRef,
|
|
133
|
+
className: classnames(styles.modalOverlay, themeClass, {
|
|
134
|
+
[styles.modalOverlayWithBackground]: showOverlay,
|
|
135
|
+
[styles.modalOverlayLeft]: position === "left",
|
|
136
|
+
[styles.modalOverlayRight]: position === "right"
|
|
137
|
+
}),
|
|
138
|
+
"data-qa": "modal-overlay",
|
|
139
|
+
children: /* @__PURE__ */ jsx(CloseByClickOutsideContext.Provider, { value: overlayRef, children: /* @__PURE__ */ jsx(AccessibleRegionProvider, { children: /* @__PURE__ */ jsx(ModalSlotsProvider, { children: /* @__PURE__ */ jsx(
|
|
140
|
+
ModalInner,
|
|
141
|
+
{
|
|
142
|
+
...rest,
|
|
143
|
+
explicitAria: {
|
|
144
|
+
"aria-label": ariaLabel,
|
|
145
|
+
"aria-labelledby": ariaLabelledby,
|
|
146
|
+
"aria-describedby": ariaDescribedby,
|
|
147
|
+
"aria-description": ariaDescription
|
|
148
|
+
},
|
|
149
|
+
ariaModal: visible && showOverlay && !isServerEnv,
|
|
150
|
+
refCallback: modalRefCallback,
|
|
151
|
+
size,
|
|
152
|
+
height: resolvedHeight,
|
|
153
|
+
minHeight,
|
|
154
|
+
disableVerticalPaddings,
|
|
155
|
+
disableHorizontalPaddings,
|
|
156
|
+
showOverlay,
|
|
157
|
+
header,
|
|
158
|
+
footer,
|
|
159
|
+
children: /* @__PURE__ */ jsx(ModalContent, { children })
|
|
160
|
+
}
|
|
161
|
+
) }) }) })
|
|
162
|
+
}
|
|
163
|
+
) }) })
|
|
164
|
+
}
|
|
165
|
+
),
|
|
166
|
+
host || document.body
|
|
167
|
+
);
|
|
168
|
+
}
|
|
169
|
+
);
|
|
170
|
+
Modal.displayName = "Modal";
|
|
103
171
|
Modal.Media = ModalMedia;
|
|
104
172
|
|
|
105
173
|
export { Modal };
|
package/public/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sources":["src/public/Modal.tsx"],"sourcesContent":["import {\n forwardRef,\n type HTMLAttributes,\n useRef,\n useState,\n type ForwardRefExoticComponent,\n type PropsWithoutRef,\n type RefAttributes,\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 { 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 { AccessibleRegionProvider, type ExplicitRegionProps } from '@hh.ru/magritte-internal-accessible-region';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { ModalContent } from '@hh.ru/magritte-ui-modal/internal/ModalContent';\nimport { ModalInner } from '@hh.ru/magritte-ui-modal/internal/ModalInner';\nimport { ModalSlotsProvider } from '@hh.ru/magritte-ui-modal/internal/ModalSlotsContext';\nimport {\n CSS_CLASSES,\n DEFAULT_PAGE_HEADER_PADDING,\n getAnimationTimeout,\n noop,\n} from '@hh.ru/magritte-ui-modal/internal/constants';\nimport { isTreeSelectorChild } from '@hh.ru/magritte-ui-modal/internal/isTreeSelectorChild';\nimport { useModalTransition } from '@hh.ru/magritte-ui-modal/internal/useModalTransition';\nimport { usePageHeaderScrollAnimation } from '@hh.ru/magritte-ui-modal/internal/usePageHeaderScrollAnimation';\nimport { ModalMedia, type ModalMediaProps } from '@hh.ru/magritte-ui-modal/public/ModalMedia';\nimport { type ModalProps } from '@hh.ru/magritte-ui-modal/public/types';\nimport { ThemeWrapper } from '@hh.ru/magritte-ui-theme-wrapper';\n\nimport styles from '../internal/modal.less';\n\ntype ModalRootProps = ModalProps &\n ExplicitRegionProps &\n Omit<HTMLAttributes<HTMLDivElement>, keyof ModalProps | 'role' | 'tabIndex' | 'className'>;\n\ninterface ModalCompound {\n Media: ForwardRefExoticComponent<ModalMediaProps & RefAttributes<HTMLDivElement>>;\n}\n\nexport const Modal = forwardRef<HTMLDivElement, ModalRootProps>(\n (\n {\n visible,\n size = 'medium',\n header,\n footer,\n children,\n onClose = noop,\n host,\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 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n 'aria-description': ariaDescription,\n ...rest\n },\n ref\n ) => {\n const isServerEnv = useServerEnv();\n const [animationTimeout] = useState(getAnimationTimeout);\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 showOverlay = position === 'center' || _showOverlay;\n\n // TreeSelector сам управляет своим скроллом и должен занимать всю высоту модала.\n const resolvedHeight = isTreeSelectorChild(children) ? 'full-screen' : height;\n\n const { onEntering, onEntered, onExit, onExited, isHiddenForBreakpoint } = useModalTransition({\n visible,\n isServerEnv,\n showOverlay,\n returnFocusOnClose,\n onAppear,\n onBeforeExit,\n onAfterExit,\n modalRef,\n animationTimeoutExit: animationTimeout.exit,\n });\n\n usePageHeaderScrollAnimation({\n overlayRef,\n showOverlay,\n pageHeaderPadding,\n visible: visible && !isHiddenForBreakpoint,\n });\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 onClose(event);\n }\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 (isHiddenForBreakpoint || isServerEnv) {\n return null;\n }\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 <AccessibleRegionProvider>\n <ModalSlotsProvider>\n <ModalInner\n {...rest}\n explicitAria={{\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n 'aria-description': ariaDescription,\n }}\n ariaModal={visible && showOverlay && !isServerEnv}\n refCallback={modalRefCallback}\n size={size}\n height={resolvedHeight}\n minHeight={minHeight}\n disableVerticalPaddings={disableVerticalPaddings}\n disableHorizontalPaddings={disableHorizontalPaddings}\n showOverlay={showOverlay}\n header={header}\n footer={footer}\n >\n <ModalContent>{children}</ModalContent>\n </ModalInner>\n </ModalSlotsProvider>\n </AccessibleRegionProvider>\n </CloseByClickOutsideContext.Provider>\n </div>\n </Layer>\n )}\n </ThemeWrapper>\n </CSSTransition>,\n host || document.body\n );\n }\n) as ForwardRefExoticComponent<PropsWithoutRef<ModalRootProps> & RefAttributes<HTMLDivElement>> & ModalCompound;\n\nModal.displayName = 'Modal';\nModal.Media = ModalMedia;\n"],"names":["_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Modal.js","sources":["src/public/Modal.tsx"],"sourcesContent":["import {\n forwardRef,\n type HTMLAttributes,\n useRef,\n useState,\n type ForwardRefExoticComponent,\n type PropsWithoutRef,\n type RefAttributes,\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 { 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 { AccessibleRegionProvider, type ExplicitRegionProps } from '@hh.ru/magritte-internal-accessible-region';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { ModalContent } from '@hh.ru/magritte-ui-modal/internal/ModalContent';\nimport { ModalInner } from '@hh.ru/magritte-ui-modal/internal/ModalInner';\nimport { ModalSlotsProvider } from '@hh.ru/magritte-ui-modal/internal/ModalSlotsContext';\nimport {\n CSS_CLASSES,\n DEFAULT_PAGE_HEADER_PADDING,\n getAnimationTimeout,\n noop,\n} from '@hh.ru/magritte-ui-modal/internal/constants';\nimport { isTreeSelectorChild } from '@hh.ru/magritte-ui-modal/internal/isTreeSelectorChild';\nimport { useModalTransition } from '@hh.ru/magritte-ui-modal/internal/useModalTransition';\nimport { usePageHeaderScrollAnimation } from '@hh.ru/magritte-ui-modal/internal/usePageHeaderScrollAnimation';\nimport { ModalMedia, type ModalMediaProps } from '@hh.ru/magritte-ui-modal/public/ModalMedia';\nimport { type ModalProps } from '@hh.ru/magritte-ui-modal/public/types';\nimport { ThemeWrapper } from '@hh.ru/magritte-ui-theme-wrapper';\n\nimport styles from '../internal/modal.less';\n\ntype ModalRootProps = ModalProps &\n ExplicitRegionProps &\n Omit<HTMLAttributes<HTMLDivElement>, keyof ModalProps | 'role' | 'tabIndex' | 'className'>;\n\ninterface ModalCompound {\n Media: ForwardRefExoticComponent<ModalMediaProps & RefAttributes<HTMLDivElement>>;\n}\n\nexport const Modal = forwardRef<HTMLDivElement, ModalRootProps>(\n (\n {\n visible,\n size = 'medium',\n header,\n footer,\n children,\n onClose = noop,\n host,\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 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n 'aria-description': ariaDescription,\n ...rest\n },\n ref\n ) => {\n const isServerEnv = useServerEnv();\n const [animationTimeout] = useState(getAnimationTimeout);\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 showOverlay = position === 'center' || _showOverlay;\n\n // TreeSelector сам управляет своим скроллом и должен занимать всю высоту модала.\n const resolvedHeight = isTreeSelectorChild(children) ? 'full-screen' : height;\n\n const { onEntering, onEntered, onExit, onExited, isHiddenForBreakpoint } = useModalTransition({\n visible,\n isServerEnv,\n showOverlay,\n returnFocusOnClose,\n onAppear,\n onBeforeExit,\n onAfterExit,\n modalRef,\n animationTimeoutExit: animationTimeout.exit,\n });\n\n usePageHeaderScrollAnimation({\n overlayRef,\n showOverlay,\n pageHeaderPadding,\n visible: visible && !isHiddenForBreakpoint,\n });\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 onClose(event);\n }\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 (isHiddenForBreakpoint || isServerEnv) {\n return null;\n }\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 <AccessibleRegionProvider>\n <ModalSlotsProvider>\n <ModalInner\n {...rest}\n explicitAria={{\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n 'aria-description': ariaDescription,\n }}\n ariaModal={visible && showOverlay && !isServerEnv}\n refCallback={modalRefCallback}\n size={size}\n height={resolvedHeight}\n minHeight={minHeight}\n disableVerticalPaddings={disableVerticalPaddings}\n disableHorizontalPaddings={disableHorizontalPaddings}\n showOverlay={showOverlay}\n header={header}\n footer={footer}\n >\n <ModalContent>{children}</ModalContent>\n </ModalInner>\n </ModalSlotsProvider>\n </AccessibleRegionProvider>\n </CloseByClickOutsideContext.Provider>\n </div>\n </Layer>\n )}\n </ThemeWrapper>\n </CSSTransition>,\n host || document.body\n );\n }\n) as ForwardRefExoticComponent<PropsWithoutRef<ModalRootProps> & RefAttributes<HTMLDivElement>> & ModalCompound;\n\nModal.displayName = 'Modal';\nModal.Media = ModalMedia;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CO,MAAM,KAAQ,GAAA,UAAA;AAAA,EACjB,CACI;AAAA,IACI,OAAA;AAAA,IACA,IAAO,GAAA,QAAA;AAAA,IACP,MAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAU,GAAA,IAAA;AAAA,IACV,IAAA;AAAA,IACA,uBAA0B,GAAA,KAAA;AAAA,IAC1B,yBAA4B,GAAA,KAAA;AAAA,IAC5B,mBAAsB,GAAA,IAAA;AAAA,IACtB,QAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAW,GAAA,QAAA;AAAA,IACX,MAAA,GAAS,QAAa,KAAA,QAAA,GAAW,SAAY,GAAA,aAAA;AAAA,IAC7C,SAAA;AAAA,IACA,aAAa,YAAe,GAAA,IAAA;AAAA,IAC5B,iBAAoB,GAAA,2BAAA;AAAA,IACpB,kBAAA;AAAA,IACA,YAAc,EAAA,SAAA;AAAA,IACd,iBAAmB,EAAA,cAAA;AAAA,IACnB,kBAAoB,EAAA,eAAA;AAAA,IACpB,kBAAoB,EAAA,eAAA;AAAA,IACpB,GAAG,IAAA;AAAA,KAEP,GACC,KAAA;AACD,IAAA,MAAM,cAAc,YAAa,EAAA,CAAA;AACjC,IAAA,MAAM,CAAC,gBAAgB,CAAI,GAAA,QAAA,CAAS,mBAAmB,CAAA,CAAA;AAEvD,IAAM,MAAA,QAAA,GAAW,OAAuB,IAAI,CAAA,CAAA;AAC5C,IAAM,MAAA,UAAA,GAAa,OAAuB,IAAI,CAAA,CAAA;AAC9C,IAAM,MAAA,qBAAA,GAAwB,sBAAsB,EAAE,OAAA,EAAS,WAAW,CAAC,WAAA,EAAa,IAAM,EAAA,MAAA,EAAQ,CAAA,CAAA;AACtG,IAAA,MAAM,gBAAmB,GAAA,eAAA,CAAgB,GAAK,EAAA,QAAA,EAAU,qBAAqB,CAAA,CAAA;AAE7E,IAAM,MAAA,WAAA,GAAc,aAAa,QAAY,IAAA,YAAA,CAAA;AAG7C,IAAA,MAAM,cAAiB,GAAA,mBAAA,CAAoB,QAAQ,CAAA,GAAI,aAAgB,GAAA,MAAA,CAAA;AAEvE,IAAA,MAAM,EAAE,UAAY,EAAA,SAAA,EAAW,QAAQ,QAAU,EAAA,qBAAA,KAA0B,kBAAmB,CAAA;AAAA,MAC1F,OAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,kBAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,sBAAsB,gBAAiB,CAAA,IAAA;AAAA,KAC1C,CAAA,CAAA;AAED,IAA6B,4BAAA,CAAA;AAAA,MACzB,UAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA,OAAA,EAAS,WAAW,CAAC,qBAAA;AAAA,KACxB,CAAA,CAAA;AAED,IAAA,MAAM,uBAAuB,aAAc,CAAA;AAAA,MACvC,SAAA,EAAW,CAAC,KAAU,KAAA;AAClB,QAAA,IAAI,aAAc,CAAA,KAAA,CAAM,WAA8B,EAAA,YAAA,CAAa,MAAM,CAAG,EAAA;AACxE,UAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,SACjB;AAAA,OACJ;AAAA,MACA,WAAA,EAAa,CAAC,KAAU,KAAA;AACpB,QAAA,IAAI,uBAAuB,CAAC,QAAA,CAAS,SAAS,QAAS,CAAA,KAAA,CAAM,MAAqB,CAAG,EAAA;AACjF,UAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,SACjB;AAAA,OACJ;AAAA,KACH,CAAA,CAAA;AACD,IAAM,MAAA,YAAA,GAAe,cACf,oBACA,GAAA;AAAA,MACI,SAAA,EAAW,CAAC,KAA+B,KAAA;AACvC,QAAA,IAAI,aAAc,CAAA,KAAA,CAAM,WAAa,EAAA,YAAA,CAAa,MAAM,CAAG,EAAA;AACvD,UAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,SACjB;AAAA,OACJ;AAAA,KACJ,CAAA;AAEN,IAAA,IAAI,yBAAyB,WAAa,EAAA;AACtC,MAAO,OAAA,IAAA,CAAA;AAAA,KACX;AAEA,IAAO,OAAA,YAAA;AAAA,sBACH,GAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACG,MAAM,EAAA,IAAA;AAAA,UACN,EAAA,EAAI,WAAW,CAAC,WAAA;AAAA,UAChB,OAAS,EAAA,UAAA;AAAA,UACT,UAAA;AAAA,UACA,SAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,UAAA,EAAY,YAAY,QAAQ,CAAA;AAAA,UAChC,OAAS,EAAA,gBAAA;AAAA,UACT,aAAa,EAAA,IAAA;AAAA,UAEb,8BAAC,YACI,EAAA,EAAA,QAAA,EAAA,CAAC,+BACG,GAAA,CAAA,KAAA,EAAA,EAAM,OAAM,OACT,EAAA,QAAA,kBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACI,GAAG,YAAA;AAAA,cACJ,GAAK,EAAA,UAAA;AAAA,cACL,SAAW,EAAA,UAAA,CAAW,MAAO,CAAA,YAAA,EAAc,UAAY,EAAA;AAAA,gBACnD,CAAC,MAAO,CAAA,0BAA0B,GAAG,WAAA;AAAA,gBACrC,CAAC,MAAA,CAAO,gBAAgB,GAAG,QAAa,KAAA,MAAA;AAAA,gBACxC,CAAC,MAAA,CAAO,iBAAiB,GAAG,QAAa,KAAA,OAAA;AAAA,eAC5C,CAAA;AAAA,cACD,SAAQ,EAAA,eAAA;AAAA,cAER,QAAA,kBAAA,GAAA,CAAC,2BAA2B,QAA3B,EAAA,EAAoC,OAAO,UACxC,EAAA,QAAA,kBAAA,GAAA,CAAC,wBACG,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,kBACG,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,gBAAC,UAAA;AAAA,gBAAA;AAAA,kBACI,GAAG,IAAA;AAAA,kBACJ,YAAc,EAAA;AAAA,oBACV,YAAc,EAAA,SAAA;AAAA,oBACd,iBAAmB,EAAA,cAAA;AAAA,oBACnB,kBAAoB,EAAA,eAAA;AAAA,oBACpB,kBAAoB,EAAA,eAAA;AAAA,mBACxB;AAAA,kBACA,SAAA,EAAW,OAAW,IAAA,WAAA,IAAe,CAAC,WAAA;AAAA,kBACtC,WAAa,EAAA,gBAAA;AAAA,kBACb,IAAA;AAAA,kBACA,MAAQ,EAAA,cAAA;AAAA,kBACR,SAAA;AAAA,kBACA,uBAAA;AAAA,kBACA,yBAAA;AAAA,kBACA,WAAA;AAAA,kBACA,MAAA;AAAA,kBACA,MAAA;AAAA,kBAEA,QAAA,kBAAA,GAAA,CAAC,gBAAc,QAAS,EAAA,CAAA;AAAA,iBAAA;AAAA,eAC5B,EACJ,GACJ,CACJ,EAAA,CAAA;AAAA,aAAA;AAAA,aAER,CAER,EAAA,CAAA;AAAA,SAAA;AAAA,OACJ;AAAA,MACA,QAAQ,QAAS,CAAA,IAAA;AAAA,KACrB,CAAA;AAAA,GACJ;AACJ,EAAA;AAEA,KAAA,CAAM,WAAc,GAAA,OAAA,CAAA;AACpB,KAAA,CAAM,KAAQ,GAAA,UAAA;;;;"}
|
package/public/ModalMedia.js
CHANGED
|
@@ -2,22 +2,33 @@ import './../index.css';
|
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import classnames from 'classnames';
|
|
5
|
-
import { s as styles } from '../modal-
|
|
5
|
+
import { s as styles } from '../modal-BQNvAaFW.js';
|
|
6
6
|
|
|
7
|
-
const ModalMedia = forwardRef(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
})
|
|
20
|
-
|
|
7
|
+
const ModalMedia = forwardRef(
|
|
8
|
+
({ ratio, height, backgroundUrl, className, style, children, imageSize = "cover", ...rest }, ref) => {
|
|
9
|
+
const defaultRatio = children ? "auto" : 1.9;
|
|
10
|
+
return /* @__PURE__ */ jsx(
|
|
11
|
+
"div",
|
|
12
|
+
{
|
|
13
|
+
...rest,
|
|
14
|
+
ref,
|
|
15
|
+
className: classnames(className, styles.modalMedia, {
|
|
16
|
+
[styles.fixedHeight]: !!height,
|
|
17
|
+
[styles.cover]: imageSize === "cover",
|
|
18
|
+
[styles.contain]: imageSize === "contain"
|
|
19
|
+
}),
|
|
20
|
+
style: {
|
|
21
|
+
...style,
|
|
22
|
+
"--ratio": ratio ?? defaultRatio,
|
|
23
|
+
"--img-url": backgroundUrl ? `url(${backgroundUrl})` : "none",
|
|
24
|
+
"--height": height ? `${height}px` : "auto"
|
|
25
|
+
},
|
|
26
|
+
children
|
|
27
|
+
}
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
);
|
|
31
|
+
ModalMedia.displayName = "ModalMedia";
|
|
21
32
|
|
|
22
33
|
export { ModalMedia };
|
|
23
34
|
//# sourceMappingURL=ModalMedia.js.map
|
package/public/ModalMedia.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalMedia.js","sources":["src/public/ModalMedia.tsx"],"sourcesContent":["import { type CSSProperties, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nimport styles from '../internal/modal.less';\n\nexport interface ModalMediaProps extends HTMLAttributes<HTMLDivElement>, PropsWithChildren {\n /** Соотношение сторон блока (ширина / высота). Игнорируется, если задан `height`. По умолчанию `1.9`, либо `auto` при наличии `children` */\n ratio?: number;\n /** Фиксированная высота в пикселях. Имеет приоритет перед `ratio` */\n height?: number;\n /** URL фонового изображения */\n backgroundUrl?: string;\n /**\n * Способ вписывания фонового изображения в блок\n * @default cover\n */\n imageSize?: 'cover' | 'contain';\n}\n\nexport const ModalMedia = forwardRef<HTMLDivElement, ModalMediaProps>(\n ({ ratio, height, backgroundUrl, className, style, children, imageSize = 'cover', ...rest }, ref) => {\n const defaultRatio = children ? 'auto' : 1.9;\n\n return (\n <div\n {...rest}\n ref={ref}\n className={classNames(className, styles.modalMedia, {\n [styles.fixedHeight]: !!height,\n [styles.cover]: imageSize === 'cover',\n [styles.contain]: imageSize === 'contain',\n })}\n style={\n {\n ...style,\n '--ratio': ratio ?? defaultRatio,\n '--img-url': backgroundUrl ? `url(${backgroundUrl})` : 'none',\n '--height': height ? `${height}px` : 'auto',\n } as CSSProperties\n }\n >\n {children}\n </div>\n );\n }\n);\n\nModalMedia.displayName = 'ModalMedia';\n"],"names":["
|
|
1
|
+
{"version":3,"file":"ModalMedia.js","sources":["src/public/ModalMedia.tsx"],"sourcesContent":["import { type CSSProperties, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nimport styles from '../internal/modal.less';\n\nexport interface ModalMediaProps extends HTMLAttributes<HTMLDivElement>, PropsWithChildren {\n /** Соотношение сторон блока (ширина / высота). Игнорируется, если задан `height`. По умолчанию `1.9`, либо `auto` при наличии `children` */\n ratio?: number;\n /** Фиксированная высота в пикселях. Имеет приоритет перед `ratio` */\n height?: number;\n /** URL фонового изображения */\n backgroundUrl?: string;\n /**\n * Способ вписывания фонового изображения в блок\n * @default cover\n */\n imageSize?: 'cover' | 'contain';\n}\n\nexport const ModalMedia = forwardRef<HTMLDivElement, ModalMediaProps>(\n ({ ratio, height, backgroundUrl, className, style, children, imageSize = 'cover', ...rest }, ref) => {\n const defaultRatio = children ? 'auto' : 1.9;\n\n return (\n <div\n {...rest}\n ref={ref}\n className={classNames(className, styles.modalMedia, {\n [styles.fixedHeight]: !!height,\n [styles.cover]: imageSize === 'cover',\n [styles.contain]: imageSize === 'contain',\n })}\n style={\n {\n ...style,\n '--ratio': ratio ?? defaultRatio,\n '--img-url': backgroundUrl ? `url(${backgroundUrl})` : 'none',\n '--height': height ? `${height}px` : 'auto',\n } as CSSProperties\n }\n >\n {children}\n </div>\n );\n }\n);\n\nModalMedia.displayName = 'ModalMedia';\n"],"names":["classNames"],"mappings":";;;;;AAmBO,MAAM,UAAa,GAAA,UAAA;AAAA,EACtB,CAAC,EAAE,KAAO,EAAA,MAAA,EAAQ,aAAe,EAAA,SAAA,EAAW,KAAO,EAAA,QAAA,EAAU,SAAY,GAAA,OAAA,EAAS,GAAG,IAAA,IAAQ,GAAQ,KAAA;AACjG,IAAM,MAAA,YAAA,GAAe,WAAW,MAAS,GAAA,GAAA,CAAA;AAEzC,IACI,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACI,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QACA,SAAW,EAAAA,UAAA,CAAW,SAAW,EAAA,MAAA,CAAO,UAAY,EAAA;AAAA,UAChD,CAAC,MAAA,CAAO,WAAW,GAAG,CAAC,CAAC,MAAA;AAAA,UACxB,CAAC,MAAA,CAAO,KAAK,GAAG,SAAc,KAAA,OAAA;AAAA,UAC9B,CAAC,MAAA,CAAO,OAAO,GAAG,SAAc,KAAA,SAAA;AAAA,SACnC,CAAA;AAAA,QACD,KACI,EAAA;AAAA,UACI,GAAG,KAAA;AAAA,UACH,WAAW,KAAS,IAAA,YAAA;AAAA,UACpB,WAAa,EAAA,aAAA,GAAgB,CAAO,IAAA,EAAA,aAAa,CAAM,CAAA,CAAA,GAAA,MAAA;AAAA,UACvD,UAAY,EAAA,MAAA,GAAS,CAAG,EAAA,MAAM,CAAO,EAAA,CAAA,GAAA,MAAA;AAAA,SACzC;AAAA,QAGH,QAAA;AAAA,OAAA;AAAA,KACL,CAAA;AAAA,GAER;AACJ,EAAA;AAEA,UAAA,CAAW,WAAc,GAAA,YAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type ForwardRefExoticComponent, type HTMLAttributes, type PropsWithoutRef, type ReactNode, type RefAttributes } from 'react';
|
|
2
2
|
import { type ExplicitRegionProps } from '@hh.ru/magritte-internal-accessible-region';
|
|
3
|
-
import { type ModalMediaProps } from '
|
|
4
|
-
import { type ModalProps } from '
|
|
3
|
+
import { type ModalMediaProps } from '../public/ModalMedia';
|
|
4
|
+
import { type ModalProps } from '../public/types';
|
|
5
5
|
export interface ModalWithImageProps extends ModalProps {
|
|
6
6
|
/** Изображение (медиа), располагается над контентом */
|
|
7
7
|
image?: ReactNode;
|
package/public/ModalWithImage.js
CHANGED
|
@@ -21,7 +21,7 @@ import '../internal/ModalContent.js';
|
|
|
21
21
|
import '../internal/isTreeSelectorChild.js';
|
|
22
22
|
import '@hh.ru/magritte-ui-tree-selector';
|
|
23
23
|
import '@hh.ru/magritte-ui-textarea';
|
|
24
|
-
import '../modal-
|
|
24
|
+
import '../modal-BQNvAaFW.js';
|
|
25
25
|
import '../internal/ModalInner.js';
|
|
26
26
|
import '@hh.ru/magritte-ui-action-bar';
|
|
27
27
|
import '../actionBarDefaults.js';
|
|
@@ -43,8 +43,16 @@ import '@hh.ru/magritte-ui-theme-wrapper';
|
|
|
43
43
|
|
|
44
44
|
const NAV_BAR_DEFAULT_PROPS = MODAL_WITH_IMAGE_NAV_BAR_DEFAULTS;
|
|
45
45
|
const TITLE_DEFAULT_PROPS = MODAL_WITH_IMAGE_TITLE_DEFAULTS;
|
|
46
|
-
const ModalWithImage = forwardRef(
|
|
47
|
-
|
|
46
|
+
const ModalWithImage = forwardRef(
|
|
47
|
+
({ image, title, children, ...rest }, ref) => /* @__PURE__ */ jsx(NavBarDefaultPropsContext, { rootProps: NAV_BAR_DEFAULT_PROPS, children: /* @__PURE__ */ jsxs(Modal, { ...rest, ref, children: [
|
|
48
|
+
image,
|
|
49
|
+
(!!title || !!children) && /* @__PURE__ */ jsxs(Flex, { gap: 24, direction: "column", my: 24, children: [
|
|
50
|
+
!!title && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(TitleDefaultPropsContext, { props: TITLE_DEFAULT_PROPS, children: title }) }),
|
|
51
|
+
!!children && /* @__PURE__ */ jsx("div", { children })
|
|
52
|
+
] })
|
|
53
|
+
] }) })
|
|
54
|
+
);
|
|
55
|
+
ModalWithImage.displayName = "ModalWithImage";
|
|
48
56
|
ModalWithImage.Media = ModalMedia;
|
|
49
57
|
|
|
50
58
|
export { ModalWithImage };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalWithImage.js","sources":["src/public/ModalWithImage.tsx"],"sourcesContent":["import {\n forwardRef,\n type ForwardRefExoticComponent,\n type HTMLAttributes,\n type PropsWithoutRef,\n type ReactNode,\n type RefAttributes,\n} from 'react';\n\nimport { type ExplicitRegionProps } from '@hh.ru/magritte-internal-accessible-region';\nimport { Flex } from '@hh.ru/magritte-ui-layout';\nimport { Modal } from '@hh.ru/magritte-ui-modal/public/Modal';\nimport { ModalMedia, type ModalMediaProps } from '@hh.ru/magritte-ui-modal/public/ModalMedia';\nimport { type ModalProps } from '@hh.ru/magritte-ui-modal/public/types';\nimport {\n MODAL_WITH_IMAGE_NAV_BAR_DEFAULTS,\n MODAL_WITH_IMAGE_TITLE_DEFAULTS,\n} from '@hh.ru/magritte-ui-modal/withImageDefaults';\nimport { NavBarDefaultPropsContext } from '@hh.ru/magritte-ui-nav-bar';\nimport { TitleDefaultPropsContext } from '@hh.ru/magritte-ui-title';\n\nexport interface ModalWithImageProps extends ModalProps {\n /** Изображение (медиа), располагается над контентом */\n image?: ReactNode;\n /** Заголовок, располагается над контентом */\n title?: ReactNode;\n}\n\nconst NAV_BAR_DEFAULT_PROPS = MODAL_WITH_IMAGE_NAV_BAR_DEFAULTS;\n\nconst TITLE_DEFAULT_PROPS = MODAL_WITH_IMAGE_TITLE_DEFAULTS;\n\ntype ModalWithImageRootProps = ModalWithImageProps &\n ExplicitRegionProps &\n Omit<HTMLAttributes<HTMLDivElement>, keyof ModalWithImageProps | 'role' | 'tabIndex' | 'className'>;\n\ninterface ModalWithImageCompound {\n Media: ForwardRefExoticComponent<ModalMediaProps & RefAttributes<HTMLDivElement>>;\n}\n\nexport const ModalWithImage = forwardRef<HTMLDivElement, ModalWithImageRootProps>(\n ({ image, title, children, ...rest }, ref) => (\n <NavBarDefaultPropsContext rootProps={NAV_BAR_DEFAULT_PROPS}>\n <Modal {...rest} ref={ref}>\n {image}\n {(!!title || !!children) && (\n <Flex gap={24} direction=\"column\" my={24}>\n {!!title && (\n <div>\n <TitleDefaultPropsContext props={TITLE_DEFAULT_PROPS}>{title}</TitleDefaultPropsContext>\n </div>\n )}\n {!!children && <div>{children}</div>}\n </Flex>\n )}\n </Modal>\n </NavBarDefaultPropsContext>\n )\n) as ForwardRefExoticComponent<PropsWithoutRef<ModalWithImageRootProps> & RefAttributes<HTMLDivElement>> &\n ModalWithImageCompound;\n\nModalWithImage.displayName = 'ModalWithImage';\nModalWithImage.Media = ModalMedia;\n"],"names":[
|
|
1
|
+
{"version":3,"file":"ModalWithImage.js","sources":["src/public/ModalWithImage.tsx"],"sourcesContent":["import {\n forwardRef,\n type ForwardRefExoticComponent,\n type HTMLAttributes,\n type PropsWithoutRef,\n type ReactNode,\n type RefAttributes,\n} from 'react';\n\nimport { type ExplicitRegionProps } from '@hh.ru/magritte-internal-accessible-region';\nimport { Flex } from '@hh.ru/magritte-ui-layout';\nimport { Modal } from '@hh.ru/magritte-ui-modal/public/Modal';\nimport { ModalMedia, type ModalMediaProps } from '@hh.ru/magritte-ui-modal/public/ModalMedia';\nimport { type ModalProps } from '@hh.ru/magritte-ui-modal/public/types';\nimport {\n MODAL_WITH_IMAGE_NAV_BAR_DEFAULTS,\n MODAL_WITH_IMAGE_TITLE_DEFAULTS,\n} from '@hh.ru/magritte-ui-modal/withImageDefaults';\nimport { NavBarDefaultPropsContext } from '@hh.ru/magritte-ui-nav-bar';\nimport { TitleDefaultPropsContext } from '@hh.ru/magritte-ui-title';\n\nexport interface ModalWithImageProps extends ModalProps {\n /** Изображение (медиа), располагается над контентом */\n image?: ReactNode;\n /** Заголовок, располагается над контентом */\n title?: ReactNode;\n}\n\nconst NAV_BAR_DEFAULT_PROPS = MODAL_WITH_IMAGE_NAV_BAR_DEFAULTS;\n\nconst TITLE_DEFAULT_PROPS = MODAL_WITH_IMAGE_TITLE_DEFAULTS;\n\ntype ModalWithImageRootProps = ModalWithImageProps &\n ExplicitRegionProps &\n Omit<HTMLAttributes<HTMLDivElement>, keyof ModalWithImageProps | 'role' | 'tabIndex' | 'className'>;\n\ninterface ModalWithImageCompound {\n Media: ForwardRefExoticComponent<ModalMediaProps & RefAttributes<HTMLDivElement>>;\n}\n\nexport const ModalWithImage = forwardRef<HTMLDivElement, ModalWithImageRootProps>(\n ({ image, title, children, ...rest }, ref) => (\n <NavBarDefaultPropsContext rootProps={NAV_BAR_DEFAULT_PROPS}>\n <Modal {...rest} ref={ref}>\n {image}\n {(!!title || !!children) && (\n <Flex gap={24} direction=\"column\" my={24}>\n {!!title && (\n <div>\n <TitleDefaultPropsContext props={TITLE_DEFAULT_PROPS}>{title}</TitleDefaultPropsContext>\n </div>\n )}\n {!!children && <div>{children}</div>}\n </Flex>\n )}\n </Modal>\n </NavBarDefaultPropsContext>\n )\n) as ForwardRefExoticComponent<PropsWithoutRef<ModalWithImageRootProps> & RefAttributes<HTMLDivElement>> &\n ModalWithImageCompound;\n\nModalWithImage.displayName = 'ModalWithImage';\nModalWithImage.Media = ModalMedia;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,qBAAwB,GAAA,iCAAA,CAAA;AAE9B,MAAM,mBAAsB,GAAA,+BAAA,CAAA;AAUrB,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC1B,CAAC,EAAE,KAAA,EAAO,KAAO,EAAA,QAAA,EAAU,GAAG,IAAK,EAAA,EAAG,GAClC,qBAAA,GAAA,CAAC,6BAA0B,SAAW,EAAA,qBAAA,EAClC,+BAAC,KAAO,EAAA,EAAA,GAAG,MAAM,GACZ,EAAA,QAAA,EAAA;AAAA,IAAA,KAAA;AAAA,IAAA,CACC,CAAC,CAAC,KAAS,IAAA,CAAC,CAAC,QAAA,qBACV,IAAA,CAAA,IAAA,EAAA,EAAK,GAAK,EAAA,EAAA,EAAI,SAAU,EAAA,QAAA,EAAS,IAAI,EACjC,EAAA,QAAA,EAAA;AAAA,MAAC,CAAA,CAAC,yBACE,GAAA,CAAA,KAAA,EAAA,EACG,8BAAC,wBAAyB,EAAA,EAAA,KAAA,EAAO,mBAAsB,EAAA,QAAA,EAAA,KAAA,EAAM,CACjE,EAAA,CAAA;AAAA,MAEH,CAAC,CAAC,QAAY,oBAAA,GAAA,CAAC,SAAK,QAAS,EAAA,CAAA;AAAA,KAClC,EAAA,CAAA;AAAA,GAAA,EAER,CACJ,EAAA,CAAA;AAER,EAAA;AAGA,cAAA,CAAe,WAAc,GAAA,gBAAA,CAAA;AAC7B,cAAA,CAAe,KAAQ,GAAA,UAAA;;;;"}
|