@alfalab/core-components-modal 6.0.10 → 6.0.12

package/esm/components/header/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 1kwlp */
+/* hash: 18ti8 */
 :root {
 
     /* Hard */
@@ -43,45 +43,45 @@
 
     /* mobile */
 }
-.modal__header_13jb3 {
+.modal__header_xgu5m {
     border-top-left-radius: var(--modal-border-radius);
     border-top-right-radius: var(--modal-border-radius);
 }
-.modal__content_13jb3 {
+.modal__content_xgu5m {
     font-weight: var(--modal-header-desktop-font-weight);
     font-family: var(--modal-header-desktop-font-family);
 }
-.modal__s_13jb3 .modal__content_13jb3,
-.modal__m_13jb3 .modal__content_13jb3 {
+.modal__s_xgu5m .modal__content_xgu5m,
+.modal__m_xgu5m .modal__content_xgu5m {
     padding: var(--modal-s-header-desktop-content-paddings);
     font-size: var(--modal-s-header-desktop-font-size);
     line-height: var(--modal-s-header-desktop-line-height);
 }
-.modal__l_13jb3 .modal__content_13jb3,
-.modal__xl_13jb3 .modal__content_13jb3,
-.modal__fullscreen_13jb3 .modal__content_13jb3 {
+.modal__l_xgu5m .modal__content_xgu5m,
+.modal__xl_xgu5m .modal__content_xgu5m,
+.modal__fullscreen_xgu5m .modal__content_xgu5m {
     padding: var(--modal-l-header-desktop-content-paddings);
     font-size: var(--modal-l-header-desktop-font-size);
     line-height: var(--modal-l-header-desktop-line-height);
 }
-.modal__s_13jb3,
-.modal__m_13jb3 {
+.modal__s_xgu5m,
+.modal__m_xgu5m {
     padding: var(--modal-s-header-paddings)
 }
-.modal__s_13jb3:not(.modal__hasContent_13jb3), .modal__m_13jb3:not(.modal__hasContent_13jb3) {
+.modal__s_xgu5m:not(.modal__hasContent_xgu5m), .modal__m_xgu5m:not(.modal__hasContent_xgu5m) {
         padding-bottom: 0;
     }
-.modal__l_13jb3,
-.modal__xl_13jb3,
-.modal__fullscreen_13jb3 {
+.modal__l_xgu5m,
+.modal__xl_xgu5m,
+.modal__fullscreen_xgu5m {
     padding: var(--gap-xl) var(--gap-xl) var(--gap-m)
 }
-.modal__l_13jb3:not(.modal__hasContent_13jb3), .modal__xl_13jb3:not(.modal__hasContent_13jb3), .modal__fullscreen_13jb3:not(.modal__hasContent_13jb3) {
+.modal__l_xgu5m:not(.modal__hasContent_xgu5m), .modal__xl_xgu5m:not(.modal__hasContent_xgu5m), .modal__fullscreen_xgu5m:not(.modal__hasContent_xgu5m) {
         padding-bottom: var(--gap-m);
     }
-.modal__sticky_13jb3 {
+.modal__sticky_xgu5m {
     top: calc(var(--modal-vertical-padding) * -1)
 }
-.modal__sticky_13jb3.modal__fullscreen_13jb3 {
+.modal__sticky_xgu5m.modal__fullscreen_xgu5m {
         top: 0;
     }

package/esm/components/header/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ewvt */
+/* hash: 1hn7b */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -25,7 +25,7 @@
 
     /* mobile */
 }
-.modal__header_l7swy {
+.modal__header_f5byq {
     width: 100%;
     box-sizing: border-box;
     display: flex;
@@ -33,26 +33,26 @@
     justify-content: space-between;
     transition: box-shadow 0.2s ease, background 0.2s ease
 }
-.modal__header_l7swy:not(.modal__hasContent_l7swy) {
+.modal__header_f5byq:not(.modal__hasContent_f5byq) {
         pointer-events: none;
     }
-.modal__highlighted_l7swy {
+.modal__highlighted_f5byq {
     background: var(--modal-header-highlight-background);
     box-shadow: var(--modal-header-highlight-box-shadow);
 }
-.modal__sticky_l7swy {
+.modal__sticky_f5byq {
     position: sticky
 }
-.modal__sticky_l7swy.modal__hasContent_l7swy {
+.modal__sticky_f5byq.modal__hasContent_f5byq {
         background: var(--modal-header-background);
     }
-.modal__content_l7swy {
+.modal__content_f5byq {
     flex-grow: 1;
 }
-.modal__title_l7swy {
+.modal__title_f5byq {
     word-break: break-word;
 }
-.modal__addon_l7swy {
+.modal__addon_f5byq {
     min-width: 48px;
     height: 48px;
     display: flex;
@@ -60,25 +60,25 @@
     align-items: center;
     pointer-events: all;
 }
-.modal__closer_l7swy {
+.modal__closer_f5byq {
     margin-left: auto;
 }
-.modal__left_l7swy {
+.modal__left_f5byq {
     justify-content: flex-start;
     text-align: left;
 }
-.modal__center_l7swy {
+.modal__center_f5byq {
     justify-content: center;
     text-align: center;
 }
-.modal__right_l7swy {
+.modal__right_f5byq {
     justify-content: flex-end;
     text-align: right;
 }
-.modal__trim_l7swy {
+.modal__trim_f5byq {
     overflow: hidden
 }
-.modal__trim_l7swy .modal__title_l7swy {
+.modal__trim_f5byq .modal__title_f5byq {
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;

package/esm/components/header/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 1k2gl */
+/* hash: 1f6lr */
 :root {
 
     /* Hard */
@@ -33,10 +33,10 @@
     --modal-header-mobile-font-family: var(--font-family-system);
     --modal-header-mobile-font-weight: bold;
 }
-.modal__sticky_12vnx {
+.modal__sticky_15fng {
     top: 0;
 }
-.modal__content_12vnx {
+.modal__content_15fng {
     font-size: var(--modal-header-mobile-font-size);
     line-height: var(--modal-header-mobile-line-height);
     font-family: var(--modal-header-mobile-font-family);

package/esm/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 1uv8g */
+/* hash: xss4d */
 :root {
 
     /* Hard */
@@ -31,32 +31,32 @@
 
     /* mobile */
 }
-.modal__wrapper_1lhqp {
+.modal__wrapper_1kgjw {
     padding-top: var(--modal-vertical-padding);
     padding-bottom: var(--modal-vertical-padding);
 }
-.modal__component_1lhqp {
+.modal__component_1kgjw {
     width: 100%;
     max-width: 100%;
     border-radius: var(--modal-border-radius);
 }
-.modal__fullscreen_1lhqp {
+.modal__fullscreen_1kgjw {
     padding-top: 0;
     padding-bottom: 0
 }
-.modal__fullscreen_1lhqp .modal__component_1lhqp {
+.modal__fullscreen_1kgjw .modal__component_1kgjw {
         flex: 1;
         border-radius: 0;
     }
-.modal__s_1lhqp {
+.modal__s_1kgjw {
     width: var(--modal-s-width);
 }
-.modal__m_1lhqp {
+.modal__m_1kgjw {
     width: var(--modal-m-width);
 }
-.modal__l_1lhqp {
+.modal__l_1kgjw {
     width: var(--modal-l-width);
 }
-.modal__xl_1lhqp {
+.modal__xl_1kgjw {
     width: var(--modal-xl-width);
 }

package/esm/desktop.js

@@ -1,17 +1,16 @@
-import './tslib.es6-cd2fa46f.js';
+import './tslib.es6-056b72d0.js';
 import 'react';
-import 'react-merge-refs';
 import 'classnames';
-import '@alfalab/core-components-base-modal/esm';
 import '@alfalab/core-components-icon-button/esm';
 import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import '@alfalab/core-components-base-modal/esm';
 import './Context.js';
 import './components/closer/Component.js';
+import './ResponsiveContext.js';
 import './components/content/Component.js';
-import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
-import './components/footer/Component.desktop.js';
-import './Component-f9c8a7ff.js';
-import './components/header/Component.desktop.js';
+import '@alfalab/icons-glyph/CrossMIcon';
+import './components/header/Component.js';
+import 'react-merge-refs';
+import './Component.js';
 export { ModalDesktop } from './Component.desktop.js';
-import './transitions.module-a1e3a16d.js';

package/esm/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./responsive";
 export * from "./Context";
+export * from "./typings";

package/esm/index.js

@@ -1,24 +1,17 @@
-import './tslib.es6-cd2fa46f.js';
+import './tslib.es6-056b72d0.js';
 import 'react';
-import 'react-merge-refs';
 import 'classnames';
-import '@alfalab/core-components-base-modal/esm';
 import '@alfalab/core-components-icon-button/esm';
 import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import '@alfalab/core-components-base-modal/esm';
 export { ModalContext } from './Context.js';
 import './components/closer/Component.js';
+import './ResponsiveContext.js';
 import './components/content/Component.js';
-import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
-import './components/footer/Component.desktop.js';
-import './Component-f9c8a7ff.js';
-import './components/header/Component.desktop.js';
-import './Component.desktop.js';
-import './transitions.module-a1e3a16d.js';
-import './components/content/Component.mobile.js';
-import './components/footer/Component.mobile.js';
 import '@alfalab/icons-glyph/CrossMIcon';
-import './components/header/Component.mobile.js';
-import './Component.mobile.js';
+import './components/header/Component.js';
+import 'react-merge-refs';
+import './Component.js';
 import '@alfalab/hooks';
 export { ModalResponsive } from './Component.responsive.js';

package/esm/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 1gxvl */
+/* hash: 8xuzy */
 :root {
 
     /* Hard */
@@ -19,7 +19,7 @@
 
     /* mobile */
 }
-.modal__component_le65w {
+.modal__component_1po45 {
     flex: 1;
     width: 100%;
 }

package/esm/mobile.js

@@ -1,17 +1,16 @@
-import './tslib.es6-cd2fa46f.js';
+import './tslib.es6-056b72d0.js';
 import 'react';
 import 'classnames';
-import '@alfalab/core-components-base-modal/esm';
 import '@alfalab/core-components-icon-button/esm';
 import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import '@alfalab/core-components-base-modal/esm';
 import './Context.js';
 import './components/closer/Component.js';
+import './ResponsiveContext.js';
 import './components/content/Component.js';
 import './components/footer/Component.js';
-import './Component-f9c8a7ff.js';
-import './transitions.module-a1e3a16d.js';
-import './components/content/Component.mobile.js';
-import './components/footer/Component.mobile.js';
 import '@alfalab/icons-glyph/CrossMIcon';
-import './components/header/Component.mobile.js';
+import './components/header/Component.js';
+import 'react-merge-refs';
+import './Component.js';
 export { ModalMobile } from './Component.mobile.js';

package/esm/responsive.js

@@ -1,24 +1,17 @@
-import './tslib.es6-cd2fa46f.js';
+import './tslib.es6-056b72d0.js';
 import 'react';
-import 'react-merge-refs';
 import 'classnames';
-import '@alfalab/core-components-base-modal/esm';
 import '@alfalab/core-components-icon-button/esm';
 import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import '@alfalab/core-components-base-modal/esm';
 import './Context.js';
 import './components/closer/Component.js';
+import './ResponsiveContext.js';
 import './components/content/Component.js';
-import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
-import './components/footer/Component.desktop.js';
-import './Component-f9c8a7ff.js';
-import './components/header/Component.desktop.js';
-import './Component.desktop.js';
-import './transitions.module-a1e3a16d.js';
-import './components/content/Component.mobile.js';
-import './components/footer/Component.mobile.js';
 import '@alfalab/icons-glyph/CrossMIcon';
-import './components/header/Component.mobile.js';
-import './Component.mobile.js';
+import './components/header/Component.js';
+import 'react-merge-refs';
+import './Component.js';
 import '@alfalab/hooks';
 export { ModalResponsive } from './Component.responsive.js';

package/esm/transitions.css

@@ -1,24 +1,24 @@
-/* hash: kqjix */
-.modal__appear_101ev,
-.modal__enter_101ev {
+/* hash: 1dloq */
+.modal__appear_5a8sg,
+.modal__enter_5a8sg {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.modal__appearActive_101ev,
-.modal__enterActive_101ev {
+.modal__appearActive_5a8sg,
+.modal__enterActive_5a8sg {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.modal__exit_101ev {
+.modal__exit_5a8sg {
     opacity: 1;
     transform: translateY(0);
 }
 
-.modal__exitActive_101ev,
-.modal__exitDone_101ev {
+.modal__exitActive_5a8sg,
+.modal__exitDone_5a8sg {
     opacity: 0;
     transform: translateY(15px);
     transition: opacity 200ms ease-out, transform 200ms ease-out;

package/esm/{tslib.es6-cd2fa46f.js → tslib.es6-056b72d0.js}

@@ -37,4 +37,4 @@ function __rest(s, e) {
     return t;
 }
 
-export { __rest as _, __assign as a };
+export { __assign as _, __rest as a };

package/esm/typings.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+import { BaseModalProps } from "@alfalab/core-components-base-modal";
+type ModalDesktopProps = BaseModalProps & {
+    /**
+     * Ширина модального окна
+     * @default "m"
+     */
+    size?: 's' | 'm' | 'l' | 'xl' | 'fullscreen';
+    /**
+     * Растягивает модальное окно на весь экран
+     * @deprecated Используйте размер fullscreen
+     */
+    fullscreen?: boolean;
+    /**
+     * Фиксирует позицию модального окна после открытия,
+     * предотвращая скачки, если контент внутри будет меняться
+     */
+    fixedPosition?: boolean;
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean;
+};
+type ModalMobileProps = Omit<ModalDesktopProps, 'size' | 'fixedPosition' | 'fullscreen'>;
+type ModalResponsiveProps = ModalDesktopProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+type View = 'desktop' | 'mobile';
+type TResponsiveModalContext = {
+    view: View;
+    size: NonNullable<ModalDesktopProps['size']>;
+};
+type ContentProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Растягивает контент на всю высоту
+     */
+    flex?: boolean;
+};
+export { ModalDesktopProps, ModalMobileProps, ModalResponsiveProps, View, TResponsiveModalContext, ContentProps };

package/esm/typings.js

@@ -0,0 +1 @@
+

package/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./responsive";
 export * from "./Context";
+export * from "./typings";

package/index.js

@@ -2,28 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-93e97f54.js');
+require('./tslib.es6-0c9325d7.js');
 require('react');
-require('react-merge-refs');
 require('classnames');
-require('@alfalab/core-components-base-modal');
 require('@alfalab/core-components-icon-button');
 require('@alfalab/icons-glyph/CrossHeavyMIcon');
+require('@alfalab/core-components-base-modal');
 var Context = require('./Context.js');
 require('./components/closer/Component.js');
+require('./ResponsiveContext.js');
 require('./components/content/Component.js');
-require('./components/content/Component.desktop.js');
 require('./components/footer/Component.js');
-require('./components/footer/Component.desktop.js');
-require('./Component-cacd0e72.js');
-require('./components/header/Component.desktop.js');
-require('./Component.desktop.js');
-require('./transitions.module-fc7cacd3.js');
-require('./components/content/Component.mobile.js');
-require('./components/footer/Component.mobile.js');
 require('@alfalab/icons-glyph/CrossMIcon');
-require('./components/header/Component.mobile.js');
-require('./Component.mobile.js');
+require('./components/header/Component.js');
+require('react-merge-refs');
+require('./Component.js');
 require('@alfalab/hooks');
 var Component_responsive = require('./Component.responsive.js');
 

package/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 1gxvl */
+/* hash: 8xuzy */
 :root {
 
     /* Hard */
@@ -19,7 +19,7 @@
 
     /* mobile */
 }
-.modal__component_le65w {
+.modal__component_1po45 {
     flex: 1;
     width: 100%;
 }

package/mobile.js

@@ -2,22 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-93e97f54.js');
+require('./tslib.es6-0c9325d7.js');
 require('react');
 require('classnames');
-require('@alfalab/core-components-base-modal');
 require('@alfalab/core-components-icon-button');
 require('@alfalab/icons-glyph/CrossHeavyMIcon');
+require('@alfalab/core-components-base-modal');
 require('./Context.js');
 require('./components/closer/Component.js');
+require('./ResponsiveContext.js');
 require('./components/content/Component.js');
 require('./components/footer/Component.js');
-require('./Component-cacd0e72.js');
-require('./transitions.module-fc7cacd3.js');
-require('./components/content/Component.mobile.js');
-require('./components/footer/Component.mobile.js');
 require('@alfalab/icons-glyph/CrossMIcon');
-require('./components/header/Component.mobile.js');
+require('./components/header/Component.js');
+require('react-merge-refs');
+require('./Component.js');
 var Component_mobile = require('./Component.mobile.js');
 
 

package/modern/Component.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import React from 'react';
+import { View } from "./typings";
+declare const Modal: React.ForwardRefExoticComponent<import("@alfalab/core-components-base-modal").BaseModalProps & {
+    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
+    fullscreen?: boolean | undefined;
+    fixedPosition?: boolean | undefined;
+    hasCloser?: boolean | undefined;
+} & {
+    view: View;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Modal };

package/modern/Component.desktop.d.ts

@@ -1,53 +1,14 @@
 /// <reference types="react" />
 import React from 'react';
-import { BaseModalProps } from "@alfalab/core-components-base-modal";
-type ModalDesktopProps = BaseModalProps & {
-    /**
-     * Ширина модального окна
-     * @default "m"
-     */
-    size?: 's' | 'm' | 'l' | 'xl' | 'fullscreen';
-    /**
-     * Растягивает модальное окно на весь экран
-     * @deprecated Используйте размер fullscreen
-     */
-    fullscreen?: boolean;
-    /**
-     * Фиксирует позицию модального окна после открытия,
-     * предотвращая скачки, если контент внутри будет меняться
-     */
-    fixedPosition?: boolean;
-    /**
-     * Управление наличием закрывающего крестика
-     * @default false
-     */
-    hasCloser?: boolean;
-};
-declare const ModalDesktop: React.ForwardRefExoticComponent<BaseModalProps & {
-    /**
-     * Ширина модального окна
-     * @default "m"
-     */
+declare const ModalDesktop: React.ForwardRefExoticComponent<import("packages/base-modal/src").BaseModalProps & {
     size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
-    /**
-     * Растягивает модальное окно на весь экран
-     * @deprecated Используйте размер fullscreen
-     */
     fullscreen?: boolean | undefined;
-    /**
-     * Фиксирует позицию модального окна после открытия,
-     * предотвращая скачки, если контент внутри будет меняться
-     */
     fixedPosition?: boolean | undefined;
-    /**
-     * Управление наличием закрывающего крестика
-     * @default false
-     */
     hasCloser?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>> & {
-    Content: React.FC<import("./components/content/Component.desktop").ContentDesktopProps>;
-    Header: React.FC<import("./components/header/Component.desktop").HeaderDesktopProps>;
-    Footer: React.FC<import("./components/footer/Component.desktop").FooterDesktopProps>;
+    Content: React.FC<import("./typings").ContentProps>;
+    Header: React.FC<import("./components/header/Component").HeaderProps>;
+    Footer: React.FC<import("./components/footer/Component").FooterProps>;
     Closer: React.FC<import("./components/closer/Component").CloserProps>;
 };
-export { ModalDesktopProps, ModalDesktop };
+export { ModalDesktop };