@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.
Files changed (45) hide show
  1. package/actionBarDefaults.d.ts +2 -2
  2. package/actionBarDefaults.js +3 -17
  3. package/actionBarDefaults.js.map +1 -1
  4. package/index.css +121 -121
  5. package/index.d.ts +5 -5
  6. package/index.js +1 -1
  7. package/index.mock.js +5 -5
  8. package/index.mock.js.map +1 -1
  9. package/internal/ModalBody.js +42 -24
  10. package/internal/ModalBody.js.map +1 -1
  11. package/internal/ModalContent.js +2 -2
  12. package/internal/ModalContent.js.map +1 -1
  13. package/internal/ModalInner.d.ts +1 -1
  14. package/internal/ModalInner.js +46 -26
  15. package/internal/ModalInner.js.map +1 -1
  16. package/internal/ModalSlotsContext.js +34 -52
  17. package/internal/ModalSlotsContext.js.map +1 -1
  18. package/internal/ModalStickyHeader.js +27 -23
  19. package/internal/ModalStickyHeader.js.map +1 -1
  20. package/internal/constants.js +33 -42
  21. package/internal/constants.js.map +1 -1
  22. package/internal/isTreeSelectorChild.js +0 -5
  23. package/internal/isTreeSelectorChild.js.map +1 -1
  24. package/internal/useModalOrder.js +69 -76
  25. package/internal/useModalOrder.js.map +1 -1
  26. package/internal/useModalTransition.js +71 -72
  27. package/internal/useModalTransition.js.map +1 -1
  28. package/internal/usePageHeaderScrollAnimation.js +42 -42
  29. package/internal/usePageHeaderScrollAnimation.js.map +1 -1
  30. package/modal-BQNvAaFW.js +5 -0
  31. package/modal-BQNvAaFW.js.map +1 -0
  32. package/package.json +13 -13
  33. package/public/Modal.d.ts +2 -2
  34. package/public/Modal.js +119 -51
  35. package/public/Modal.js.map +1 -1
  36. package/public/ModalMedia.js +26 -15
  37. package/public/ModalMedia.js.map +1 -1
  38. package/public/ModalWithImage.d.ts +2 -2
  39. package/public/ModalWithImage.js +11 -3
  40. package/public/ModalWithImage.js.map +1 -1
  41. package/withImageDefaults.d.ts +3 -3
  42. package/withImageDefaults.js +5 -18
  43. package/withImageDefaults.js.map +1 -1
  44. package/modal-Df_WVial.js +0 -5
  45. 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
- * Анимирует `top` оверлея при скролле страницы (только для `position=left|right` без оверлея): по мере
6
- * прокрутки на `pageHeaderPadding` оверлей «подъезжает» под page-header от `pageHeaderPadding` к `0`.
7
- * Использует `ScrollTimeline`, где доступен, иначе — ручную привязку к событию `scroll`.
8
- */
9
- const usePageHeaderScrollAnimation = ({ overlayRef, showOverlay, pageHeaderPadding, visible, }) => {
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
- // TS 7 (type-aware правила oxlint) уже знает rangeStart/rangeEnd, а TS 5 без каста не пропускает
25
- // oxlint-disable-next-line typescript/no-unnecessary-type-assertion
26
- animation = overlay.animate(keyframes, {
27
- timeline,
28
- rangeStart: '0px',
29
- // calc нужен для устранения бага https://issues.chromium.org/issues/40929569
30
- rangeEnd: `calc(0% + ${pageHeaderPadding}px)`,
31
- });
32
- }
33
- else {
34
- animation = overlay.animate(keyframes, { duration: 1000, fill: 'forwards' });
35
- animation.pause();
36
- window.addEventListener('scroll', () => {
37
- animation.currentTime =
38
- (Math.min(document.documentElement.scrollTop, pageHeaderPadding) / pageHeaderPadding) * 1000;
39
- }, { signal: abortController.signal });
40
- }
41
- return () => {
42
- abortController.abort();
43
- animation.cancel();
44
- };
45
- }, [overlayRef, showOverlay, pageHeaderPadding, visible]);
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":";;AASA;;;;AAIG;AACI,MAAM,4BAA4B,GAAG,CAAC,EACzC,UAAU,EACV,WAAW,EACX,iBAAiB,EACjB,OAAO,GAC0B,KAAU;IAC3C,SAAS,CAAC,MAAK;QACX,IAAI,WAAW,IAAI,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE;YAC/C,OAAO,KAAK,CAAC,CAAC;SACjB;AAED,QAAA,MAAM,iBAAiB,GAAG,gBAAgB,IAAI,MAAM,CAAC;AACrD,QAAA,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;QAEnC,IAAI,CAAC,OAAO,EAAE;YACV,OAAO,KAAK,CAAC,CAAC;SACjB;AAED,QAAA,IAAI,SAAoB,CAAC;AACzB,QAAA,MAAM,eAAe,GAAG,IAAI,eAAe,EAAE,CAAC;AAC9C,QAAA,MAAM,SAAS,GAAG,EAAE,GAAG,EAAE,CAAC,CAAG,EAAA,iBAAiB,CAAI,EAAA,CAAA,EAAE,KAAK,CAAC,EAAE,CAAC;QAC7D,IAAI,iBAAiB,EAAE;AACnB,YAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,eAAe,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;;;AAGrF,YAAA,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE;gBACnC,QAAQ;AACR,gBAAA,UAAU,EAAE,KAAK;;gBAEjB,QAAQ,EAAE,CAAa,UAAA,EAAA,iBAAiB,CAAK,GAAA,CAAA;AACpB,aAAA,CAAC,CAAC;SAClC;aAAM;AACH,YAAA,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;YAC7E,SAAS,CAAC,KAAK,EAAE,CAAC;AAElB,YAAA,MAAM,CAAC,gBAAgB,CACnB,QAAQ,EACR,MAAK;AACD,gBAAA,SAAS,CAAC,WAAW;AACjB,oBAAA,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,eAAe,CAAC,SAAS,EAAE,iBAAiB,CAAC,GAAG,iBAAiB,IAAI,IAAI,CAAC;aACpG,EACD,EAAE,MAAM,EAAE,eAAe,CAAC,MAAM,EAAE,CACrC,CAAC;SACL;AAED,QAAA,OAAO,MAAK;YACR,eAAe,CAAC,KAAK,EAAE,CAAC;YACxB,SAAS,CAAC,MAAM,EAAE,CAAC;AACvB,SAAC,CAAC;KACL,EAAE,CAAC,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,OAAO,CAAC,CAAC,CAAC;AAC9D;;;;"}
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.41",
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.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.24",
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.11",
42
- "@hh.ru/magritte-ui-icon": "15.1.4",
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.20",
47
- "@hh.ru/magritte-ui-progress-bar": "5.0.36",
48
- "@hh.ru/magritte-ui-scrollbar": "1.0.38",
49
- "@hh.ru/magritte-ui-textarea": "3.3.54",
50
- "@hh.ru/magritte-ui-theme-wrapper": "1.1.28",
51
- "@hh.ru/magritte-ui-title": "8.3.13",
52
- "@hh.ru/magritte-ui-tree-selector": "5.5.80"
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": "b0ff5da48fb29d516c8289082560ee1882d16986"
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 '@hh.ru/magritte-ui-modal/public/ModalMedia';
4
- import { type ModalProps } from '@hh.ru/magritte-ui-modal/public/types';
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-Df_WVial.js';
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(({ visible, size = 'medium', header, footer, children, onClose = noop, host, 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, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-description': ariaDescription, ...rest }, ref) => {
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: 'loop' });
71
+ const keyboardNavigationRef = useKeyboardNavigation({ enabled: visible && !isServerEnv, mode: "loop" });
46
72
  const modalRefCallback = useMultipleRefs(ref, modalRef, keyboardNavigationRef);
47
- const showOverlay = position === 'center' || _showOverlay;
48
- // TreeSelector сам управляет своим скроллом и должен занимать всю высоту модала.
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
- visible,
52
- isServerEnv,
53
- showOverlay,
54
- returnFocusOnClose,
55
- onAppear,
56
- onBeforeExit,
57
- onAfterExit,
58
- modalRef,
59
- animationTimeoutExit: animationTimeout.exit,
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
- overlayRef,
63
- showOverlay,
64
- pageHeaderPadding,
65
- visible: visible && !isHiddenForBreakpoint,
87
+ overlayRef,
88
+ showOverlay,
89
+ pageHeaderPadding,
90
+ visible: visible && !isHiddenForBreakpoint
66
91
  });
67
92
  const overlayEventHandlers = useNoBubbling({
68
- onKeyDown: (event) => {
69
- if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {
70
- onClose(event);
71
- }
72
- },
73
- onMouseDown: (event) => {
74
- if (closeByClickOutside && !modalRef.current?.contains(event.target)) {
75
- onClose(event);
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
- ? overlayEventHandlers
81
- : {
82
- onKeyDown: (event) => {
83
- if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {
84
- onClose(event);
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
- return null;
112
+ return null;
90
113
  }
91
- 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, {
92
- [styles.modalOverlayWithBackground]: showOverlay,
93
- [styles.modalOverlayLeft]: position === 'left',
94
- [styles.modalOverlayRight]: position === 'right',
95
- }), "data-qa": "modal-overlay", children: jsx(CloseByClickOutsideContext.Provider, { value: overlayRef, children: jsx(AccessibleRegionProvider, { children: jsx(ModalSlotsProvider, { children: jsx(ModalInner, { ...rest, explicitAria: {
96
- 'aria-label': ariaLabel,
97
- 'aria-labelledby': ariaLabelledby,
98
- 'aria-describedby': ariaDescribedby,
99
- 'aria-description': ariaDescription,
100
- }, ariaModal: visible && showOverlay && !isServerEnv, refCallback: modalRefCallback, size: size, height: resolvedHeight, minHeight: minHeight, disableVerticalPaddings: disableVerticalPaddings, disableHorizontalPaddings: disableHorizontalPaddings, showOverlay: showOverlay, header: header, footer: footer, children: jsx(ModalContent, { children: children }) }) }) }) }) }) })) }) }), host || document.body);
101
- });
102
- Modal.displayName = 'Modal';
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 };
@@ -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":"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"}
@@ -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-Df_WVial.js';
5
+ import { s as styles } from '../modal-BQNvAaFW.js';
6
6
 
7
- const ModalMedia = forwardRef(({ ratio, height, backgroundUrl, className, style, children, imageSize = 'cover', ...rest }, ref) => {
8
- const defaultRatio = children ? 'auto' : 1.9;
9
- return (jsx("div", { ...rest, ref: ref, className: classnames(className, styles.modalMedia, {
10
- [styles.fixedHeight]: !!height,
11
- [styles.cover]: imageSize === 'cover',
12
- [styles.contain]: imageSize === 'contain',
13
- }), style: {
14
- ...style,
15
- '--ratio': ratio ?? defaultRatio,
16
- '--img-url': backgroundUrl ? `url(${backgroundUrl})` : 'none',
17
- '--height': height ? `${height}px` : 'auto',
18
- }, children: children }));
19
- });
20
- ModalMedia.displayName = 'ModalMedia';
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
@@ -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":["_jsx","classNames"],"mappings":";;;;;AAmBO,MAAM,UAAU,GAAG,UAAU,CAChC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,GAAG,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;IAChG,MAAM,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,GAAG,CAAC;AAE7C,IAAA,QACIA,GACQ,CAAA,KAAA,EAAA,EAAA,GAAA,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,UAAU,CAAC,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE;AAChD,YAAA,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM;AAC9B,YAAA,CAAC,MAAM,CAAC,KAAK,GAAG,SAAS,KAAK,OAAO;AACrC,YAAA,CAAC,MAAM,CAAC,OAAO,GAAG,SAAS,KAAK,SAAS;SAC5C,CAAC,EACF,KAAK,EACD;AACI,YAAA,GAAG,KAAK;YACR,SAAS,EAAE,KAAK,IAAI,YAAY;YAChC,WAAW,EAAE,aAAa,GAAG,CAAO,IAAA,EAAA,aAAa,CAAG,CAAA,CAAA,GAAG,MAAM;YAC7D,UAAU,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAI,EAAA,CAAA,GAAG,MAAM;SAC7B,EAGrB,QAAA,EAAA,QAAQ,EACP,CAAA,EACR;AACN,CAAC,EACH;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
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 '@hh.ru/magritte-ui-modal/public/ModalMedia';
4
- import { type ModalProps } from '@hh.ru/magritte-ui-modal/public/types';
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;
@@ -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-Df_WVial.js';
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(({ image, title, children, ...rest }, ref) => (jsx(NavBarDefaultPropsContext, { rootProps: NAV_BAR_DEFAULT_PROPS, children: jsxs(Modal, { ...rest, ref: ref, children: [image, (!!title || !!children) && (jsxs(Flex, { gap: 24, direction: "column", my: 24, children: [!!title && (jsx("div", { children: jsx(TitleDefaultPropsContext, { props: TITLE_DEFAULT_PROPS, children: title }) })), !!children && jsx("div", { children: children })] }))] }) })));
47
- ModalWithImage.displayName = 'ModalWithImage';
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":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,qBAAqB,GAAG,iCAAiC,CAAC;AAEhE,MAAM,mBAAmB,GAAG,+BAA+B,CAAC;MAU/C,cAAc,GAAG,UAAU,CACpC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACrCA,IAAC,yBAAyB,EAAA,EAAC,SAAS,EAAE,qBAAqB,YACvDC,IAAC,CAAA,KAAK,EAAK,EAAA,GAAA,IAAI,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CACpB,KAAK,EACL,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,QAAQ,MACnBA,KAAC,IAAI,EAAA,EAAC,GAAG,EAAE,EAAE,EAAE,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAE,EAAE,EAAA,QAAA,EAAA,CACnC,CAAC,CAAC,KAAK,KACJD,GACI,CAAA,KAAA,EAAA,EAAA,QAAA,EAAAA,GAAA,CAAC,wBAAwB,EAAC,EAAA,KAAK,EAAE,mBAAmB,EAAA,QAAA,EAAG,KAAK,EAA4B,CAAA,EAAA,CACtF,CACT,EACA,CAAC,CAAC,QAAQ,IAAIA,GAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAM,QAAQ,EAAO,CAAA,CAAA,EAAA,CACjC,CACV,CACG,EAAA,CAAA,EAAA,CACgB,CAC/B,EAEsB;AAE3B,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAC9C,cAAc,CAAC,KAAK,GAAG,UAAU;;;;"}
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;;;;"}