@alfalab/core-components-modal 4.1.0 → 5.0.1

package/dist/esm/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 1fgr1 */
+/* hash: 1elf6 */
 :root {
 
     /* Hard */
@@ -11,48 +11,52 @@
     --gap-3xl: 40px;
 }
 :root {
-    --border-radius-m: 8px;
+    --border-radius-l: 12px;
 }
 :root {
-    --modal-border-radius: var(--border-radius-m);
+    --modal-border-radius: var(--border-radius-l);
     --modal-vertical-padding: var(--gap-3xl);
 
     /* sizes */
-    --modal-s-width: 476px;
+    --modal-s-width: 500px;
     --modal-m-width: 600px;
     --modal-l-width: 800px;
+    --modal-xl-width: 1140px;
 
     /* paddings */
 
-    /* closer */
+    /* scroll */
 
-    /* sticky */
+    /* desktop */
 
-    /* scroll */
+    /* mobile */
 }
-.modal__wrapper_155wd {
+.modal__wrapper_4l1kn {
     padding-top: var(--modal-vertical-padding);
     padding-bottom: var(--modal-vertical-padding);
 }
-.modal__component_155wd {
+.modal__component_4l1kn {
     width: 100%;
     max-width: 100%;
     border-radius: var(--modal-border-radius);
 }
-.modal__fullscreen_155wd {
+.modal__fullscreen_4l1kn {
     padding-top: 0;
     padding-bottom: 0
 }
-.modal__fullscreen_155wd .modal__component_155wd {
+.modal__fullscreen_4l1kn .modal__component_4l1kn {
         flex: 1;
         border-radius: 0;
     }
-.modal__s_155wd {
+.modal__s_4l1kn {
     width: var(--modal-s-width);
 }
-.modal__m_155wd {
+.modal__m_4l1kn {
     width: var(--modal-m-width);
 }
-.modal__l_155wd {
+.modal__l_4l1kn {
     width: var(--modal-l-width);
 }
+.modal__xl_4l1kn {
+    width: var(--modal-xl-width);
+}

package/dist/esm/desktop.js

@@ -1,16 +1,17 @@
-import './tslib.es6-75e2f0f0.js';
+import './tslib.es6-242320f2.js';
 import 'react';
 import 'classnames';
 import '@alfalab/core-components-base-modal/dist/esm';
 import 'react-merge-refs';
 import './Context.js';
-import '@alfalab/core-components-button/dist/esm';
-import './components/closer/Component.js';
 import './components/header/Component.js';
+import '@alfalab/core-components-icon-button/dist/esm';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import './components/closer/Component.js';
 import './components/header/Component.desktop.js';
 import './components/content/Component.js';
 import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import './components/footer/Component.desktop.js';
 export { ModalDesktop } from './Component.desktop.js';
-import './transitions.module-602ea4ef.js';
+import './transitions.module-386b448e.js';

package/dist/esm/index.js

@@ -1,22 +1,24 @@
-import './tslib.es6-75e2f0f0.js';
+import './tslib.es6-242320f2.js';
 import 'react';
 import 'classnames';
 import '@alfalab/core-components-base-modal/dist/esm';
 import 'react-merge-refs';
 export { ModalContext } from './Context.js';
-import '@alfalab/core-components-button/dist/esm';
-import './components/closer/Component.js';
 import './components/header/Component.js';
+import '@alfalab/core-components-icon-button/dist/esm';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import './components/closer/Component.js';
 import './components/header/Component.desktop.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.desktop.js';
-import './transitions.module-602ea4ef.js';
-import '@alfalab/hooks';
+import './transitions.module-386b448e.js';
+import '@alfalab/icons-glyph/CrossMIcon';
 import './components/header/Component.mobile.js';
 import './components/content/Component.mobile.js';
 import './components/footer/Component.mobile.js';
 import './Component.mobile.js';
+import '@alfalab/hooks';
 export { ModalResponsive } from './Component.responsive.js';

package/dist/esm/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 184s5 */
+/* hash: hgg1x */
 :root {
 
     /* Hard */
@@ -13,13 +13,13 @@
 
     /* paddings */
 
-    /* closer */
+    /* scroll */
 
-    /* sticky */
+    /* desktop */
 
-    /* scroll */
+    /* mobile */
 }
-.modal__component_17zgd {
+.modal__component_1wxv9 {
     flex: 1;
     width: 100%;
 }

package/dist/esm/mobile.js

@@ -1,15 +1,16 @@
-import './tslib.es6-75e2f0f0.js';
+import './tslib.es6-242320f2.js';
 import 'react';
 import 'classnames';
 import '@alfalab/core-components-base-modal/dist/esm';
 import './Context.js';
-import '@alfalab/core-components-button/dist/esm';
-import './components/closer/Component.js';
 import './components/header/Component.js';
+import '@alfalab/core-components-icon-button/dist/esm';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import './components/closer/Component.js';
 import './components/content/Component.js';
 import './components/footer/Component.js';
-import './transitions.module-602ea4ef.js';
-import '@alfalab/hooks';
+import './transitions.module-386b448e.js';
+import '@alfalab/icons-glyph/CrossMIcon';
 import './components/header/Component.mobile.js';
 import './components/content/Component.mobile.js';
 import './components/footer/Component.mobile.js';

package/dist/esm/responsive.js

@@ -1,22 +1,24 @@
-import './tslib.es6-75e2f0f0.js';
+import './tslib.es6-242320f2.js';
 import 'react';
 import 'classnames';
 import '@alfalab/core-components-base-modal/dist/esm';
 import 'react-merge-refs';
 import './Context.js';
-import '@alfalab/core-components-button/dist/esm';
-import './components/closer/Component.js';
 import './components/header/Component.js';
+import '@alfalab/core-components-icon-button/dist/esm';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import './components/closer/Component.js';
 import './components/header/Component.desktop.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.desktop.js';
-import './transitions.module-602ea4ef.js';
-import '@alfalab/hooks';
+import './transitions.module-386b448e.js';
+import '@alfalab/icons-glyph/CrossMIcon';
 import './components/header/Component.mobile.js';
 import './components/content/Component.mobile.js';
 import './components/footer/Component.mobile.js';
 import './Component.mobile.js';
+import '@alfalab/hooks';
 export { ModalResponsive } from './Component.responsive.js';

package/dist/esm/transitions.css

@@ -1,24 +1,24 @@
-/* hash: 1050y */
-.modal__appear_1mmp2,
-.modal__enter_1mmp2 {
+/* hash: j0cli */
+.modal__appear_cjzwd,
+.modal__enter_cjzwd {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.modal__appearActive_1mmp2,
-.modal__enterActive_1mmp2 {
+.modal__appearActive_cjzwd,
+.modal__enterActive_cjzwd {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.modal__exit_1mmp2 {
+.modal__exit_cjzwd {
     opacity: 1;
     transform: translateY(0);
 }
 
-.modal__exitActive_1mmp2,
-.modal__exitDone_1mmp2 {
+.modal__exitActive_cjzwd,
+.modal__exitDone_cjzwd {
     opacity: 0;
     transform: translateY(15px);
     transition: opacity 200ms ease-out, transform 200ms ease-out;

package/dist/esm/transitions.module-386b448e.js

@@ -0,0 +1,4 @@
+var transitions = {"appear":"modal__appear_cjzwd","enter":"modal__enter_cjzwd","appearActive":"modal__appearActive_cjzwd","enterActive":"modal__enterActive_cjzwd","exit":"modal__exit_cjzwd","exitActive":"modal__exitActive_cjzwd","exitDone":"modal__exitDone_cjzwd"};
+require('./transitions.css')
+
+export { transitions as t };

package/dist/index.js

@@ -2,27 +2,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-ae9d9dce.js');
+require('./tslib.es6-4834d51a.js');
 require('react');
 require('classnames');
 require('@alfalab/core-components-base-modal');
 require('react-merge-refs');
 var Context = require('./Context.js');
-require('@alfalab/core-components-button');
-require('./components/closer/Component.js');
 require('./components/header/Component.js');
+require('@alfalab/core-components-icon-button');
+require('@alfalab/icons-glyph/CrossHeavyMIcon');
+require('./components/closer/Component.js');
 require('./components/header/Component.desktop.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.desktop.js');
-require('./transitions.module-336e79fe.js');
-require('@alfalab/hooks');
+require('./transitions.module-27d19713.js');
+require('@alfalab/icons-glyph/CrossMIcon');
 require('./components/header/Component.mobile.js');
 require('./components/content/Component.mobile.js');
 require('./components/footer/Component.mobile.js');
 require('./Component.mobile.js');
+require('@alfalab/hooks');
 var Component_responsive = require('./Component.responsive.js');
 
 

package/dist/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 184s5 */
+/* hash: hgg1x */
 :root {
 
     /* Hard */
@@ -13,13 +13,13 @@
 
     /* paddings */
 
-    /* closer */
+    /* scroll */
 
-    /* sticky */
+    /* desktop */
 
-    /* scroll */
+    /* mobile */
 }
-.modal__component_17zgd {
+.modal__component_1wxv9 {
     flex: 1;
     width: 100%;
 }

package/dist/mobile.js

@@ -2,18 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-ae9d9dce.js');
+require('./tslib.es6-4834d51a.js');
 require('react');
 require('classnames');
 require('@alfalab/core-components-base-modal');
 require('./Context.js');
-require('@alfalab/core-components-button');
-require('./components/closer/Component.js');
 require('./components/header/Component.js');
+require('@alfalab/core-components-icon-button');
+require('@alfalab/icons-glyph/CrossHeavyMIcon');
+require('./components/closer/Component.js');
 require('./components/content/Component.js');
 require('./components/footer/Component.js');
-require('./transitions.module-336e79fe.js');
-require('@alfalab/hooks');
+require('./transitions.module-27d19713.js');
+require('@alfalab/icons-glyph/CrossMIcon');
 require('./components/header/Component.mobile.js');
 require('./components/content/Component.mobile.js');
 require('./components/footer/Component.mobile.js');

package/dist/modern/Component.desktop.d.ts

@@ -6,9 +6,10 @@ type ModalDesktopProps = BaseModalProps & {
      * Ширина модального окна
      * @default "m"
      */
-    size?: 's' | 'm' | 'l';
+    size?: 's' | 'm' | 'l' | 'xl' | 'fullscreen';
     /**
      * Растягивает модальное окно на весь экран
+     * @deprecated Используйте размер fullscreen
      */
     fullscreen?: boolean;
     /**
@@ -27,9 +28,10 @@ declare const ModalDesktop: React.ForwardRefExoticComponent<BaseModalProps & {
      * Ширина модального окна
      * @default "m"
      */
-    size?: "s" | "m" | "l" | undefined;
+    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
     /**
      * Растягивает модальное окно на весь экран
+     * @deprecated Используйте размер fullscreen
      */
     fullscreen?: boolean | undefined;
     /**

package/dist/modern/Component.desktop.js

@@ -3,20 +3,23 @@ import cn from 'classnames';
 import { BaseModal } from '@alfalab/core-components-base-modal/dist/modern';
 import mergeRefs from 'react-merge-refs';
 import './Context.js';
-import '@alfalab/core-components-button/dist/modern';
-import { Closer } from './components/closer/Component.js';
 import './components/header/Component.js';
+import '@alfalab/core-components-icon-button/dist/modern';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import { Closer } from './components/closer/Component.js';
 import { HeaderDesktop } from './components/header/Component.desktop.js';
 import './components/content/Component.js';
 import { ContentDesktop } from './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import { FooterDesktop } from './components/footer/Component.desktop.js';
-import { t as transitions } from './transitions.module-602ea4ef.js';
+import { t as transitions } from './transitions.module-386b448e.js';
 
-var styles = {"wrapper":"modal__wrapper_155wd","component":"modal__component_155wd","fullscreen":"modal__fullscreen_155wd","s":"modal__s_155wd","m":"modal__m_155wd","l":"modal__l_155wd"};
+var styles = {"wrapper":"modal__wrapper_4l1kn","component":"modal__component_4l1kn","fullscreen":"modal__fullscreen_4l1kn","s":"modal__s_4l1kn","m":"modal__m_4l1kn","l":"modal__l_4l1kn","xl":"modal__xl_4l1kn"};
 require('./desktop.css')
 
 const ModalDesktopComponent = forwardRef(({ size = 's', fixedPosition, fullscreen, children, className, wrapperClassName, transitionProps = {}, ...restProps }, ref) => {
+    // TODO: удалить, после удаления пропсы fullscreen
+    const componentSize = fullscreen ? 'fullscreen' : size;
     const modalRef = useRef(null);
     const handleEntered = useCallback((node, isAppearing) => {
         if (fixedPosition && modalRef.current) {
@@ -31,17 +34,15 @@ const ModalDesktopComponent = forwardRef(({ size = 's', fixedPosition, fullscree
         }
     }, [fixedPosition, transitionProps]);
     return (React.createElement(BaseModal, Object.assign({}, restProps, { ref: mergeRefs([ref, modalRef]), wrapperClassName: cn(styles.wrapper, wrapperClassName, {
-            [styles.fullscreen]: fullscreen,
-        }), className: cn(styles.component, className, !fullscreen && styles[size]), backdropProps: {
+            [styles.fullscreen]: componentSize === 'fullscreen',
+        }), className: cn(styles.component, className, styles[componentSize]), backdropProps: {
             ...restProps.backdropProps,
-            invisible: fullscreen,
+            invisible: componentSize === 'fullscreen',
         }, transitionProps: {
             classNames: transitions,
             ...transitionProps,
             onEntered: handleEntered,
-        } }), React.Children.map(children, child => isValidElement(child)
-        ? cloneElement(child, { size: child.props.size || size, fullscreen })
-        : child)));
+        } }), React.Children.map(children, child => isValidElement(child) ? cloneElement(child, { size: componentSize }) : child)));
 });
 const ModalDesktop = Object.assign(ModalDesktopComponent, {
     Content: ContentDesktop,

package/dist/modern/Component.mobile.d.ts

@@ -16,7 +16,7 @@ declare const ModalMobile: React.ForwardRefExoticComponent<BaseModalProps & {
     hasCloser?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>> & {
     Content: React.FC<import("./components/content/Component").ContentProps>;
-    Header: React.FC<import("./components/header/Component").HeaderProps>;
+    Header: React.FC<import("./components/header/Component.mobile").HeaderMobileProps>;
     Footer: React.FC<import("./components/footer/Component").FooterProps>;
     Closer: React.FC<import("./components/closer/Component").CloserProps>;
 };

package/dist/modern/Component.mobile.js

@@ -1,35 +1,27 @@
-import React, { forwardRef, isValidElement, cloneElement } from 'react';
+import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { BaseModal } from '@alfalab/core-components-base-modal/dist/modern';
 import './Context.js';
-import '@alfalab/core-components-button/dist/modern';
-import { Closer } from './components/closer/Component.js';
 import './components/header/Component.js';
+import '@alfalab/core-components-icon-button/dist/modern';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import { Closer } from './components/closer/Component.js';
 import './components/content/Component.js';
 import './components/footer/Component.js';
-import { t as transitions } from './transitions.module-602ea4ef.js';
-import { useMedia } from '@alfalab/hooks';
+import { t as transitions } from './transitions.module-386b448e.js';
+import '@alfalab/icons-glyph/CrossMIcon';
 import { HeaderMobile } from './components/header/Component.mobile.js';
 import { ContentMobile } from './components/content/Component.mobile.js';
 import { FooterMobile } from './components/footer/Component.mobile.js';
 
-var styles = {"component":"modal__component_17zgd"};
+var styles = {"component":"modal__component_1wxv9"};
 require('./mobile.css')
 
 const ModalMobileComponent = forwardRef(({ children, className, ...restProps }, ref) => {
-    const [size] = useMedia([
-        ['s', '(max-width: 375px)'],
-        ['m', '(min-width: 376px)'],
-    ], 's');
     return (React.createElement(BaseModal, Object.assign({}, restProps, { ref: ref, transitionProps: {
             classNames: transitions,
             ...restProps.transitionProps,
-        }, className: cn(className, styles.component), backdropProps: {
-            ...restProps.backdropProps,
-            invisible: true,
-        } }), React.Children.map(children, child => isValidElement(child)
-        ? cloneElement(child, { size: child.props.size || size, fullscreen: true })
-        : child)));
+        }, className: cn(className, styles.component) }), children));
 });
 const ModalMobile = Object.assign(ModalMobileComponent, {
     Content: ContentMobile,

package/dist/modern/Component.responsive.d.ts

@@ -6,14 +6,14 @@ type ModalResponsiveProps = ModalMobileProps & ModalDesktopProps;
 declare const ModalResponsive: React.ForwardRefExoticComponent<import("packages/base-modal/src").BaseModalProps & {
     hasCloser?: boolean | undefined;
 } & {
-    size?: "s" | "m" | "l" | undefined;
+    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
     fullscreen?: boolean | undefined;
     fixedPosition?: boolean | undefined;
     hasCloser?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>> & {
-    Header: React.FC<import("./components/header/Component.desktop").HeaderDesktopProps> | React.FC<import("./components/header/Component").HeaderProps>;
-    Content: React.FC<import("./components/content/Component.desktop").ContentDesktopProps> | React.FC<import("./components/content/Component").ContentProps>;
-    Footer: React.FC<import("./components/footer/Component.desktop").FooterDesktopProps> | React.FC<import("./components/footer/Component").FooterProps>;
+    Header: React.FC<import("./components/header/Component.desktop").HeaderDesktopProps> | React.FC<import("./components/header/Component.mobile").HeaderMobileProps>;
+    Content: React.FC<import("./components/content/Component").ContentProps> | React.FC<import("./components/content/Component.desktop").ContentDesktopProps>;
+    Footer: React.FC<import("./components/footer/Component").FooterProps> | React.FC<import("./components/footer/Component.desktop").FooterDesktopProps>;
     Closer: React.FC<import("./components/closer/Component").CloserProps>;
 };
 export { ModalResponsiveProps, ModalResponsive };

package/dist/modern/Component.responsive.js

@@ -3,21 +3,23 @@ import 'classnames';
 import '@alfalab/core-components-base-modal/dist/modern';
 import 'react-merge-refs';
 import './Context.js';
-import '@alfalab/core-components-button/dist/modern';
-import { Closer } from './components/closer/Component.js';
 import './components/header/Component.js';
+import '@alfalab/core-components-icon-button/dist/modern';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import { Closer } from './components/closer/Component.js';
 import './components/header/Component.desktop.js';
 import './components/content/Component.js';
 import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import './components/footer/Component.desktop.js';
 import { ModalDesktop } from './Component.desktop.js';
-import './transitions.module-602ea4ef.js';
-import { useMedia } from '@alfalab/hooks';
+import './transitions.module-386b448e.js';
+import '@alfalab/icons-glyph/CrossMIcon';
 import './components/header/Component.mobile.js';
 import './components/content/Component.mobile.js';
 import './components/footer/Component.mobile.js';
 import { ModalMobile } from './Component.mobile.js';
+import { useMedia } from '@alfalab/hooks';
 
 const ResponsiveContext = React.createContext({
     view: 'desktop',
@@ -32,8 +34,8 @@ function createResponsive(desktop, mobile) {
 }
 const ModalResponsiveComponent = forwardRef(({ children, ...restProps }, ref) => {
     const [view] = useMedia([
-        ['mobile', '(max-width: 767px)'],
-        ['desktop', '(min-width: 768px)'],
+        ['mobile', '(max-width: 1023px)'],
+        ['desktop', '(min-width: 1024px)'],
     ], 'desktop');
     const contextValue = useMemo(() => ({ view }), [view]);
     const Component = view === 'desktop' ? ModalDesktop : ModalMobile;

package/dist/modern/components/closer/Component.d.ts

@@ -1,4 +1,5 @@
-import { ButtonHTMLAttributes, FC } from 'react';
+import { ButtonHTMLAttributes, ElementType, FC } from 'react';
+import { IconButtonProps } from "@alfalab/core-components-icon-button";
 type CloserProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     /**
      * Дополнительный класс
@@ -9,9 +10,20 @@ type CloserProps = ButtonHTMLAttributes<HTMLButtonElement> & {
      */
     align?: 'left' | 'right';
     /**
-     * Флаг, что модальное окно открыто на весь экран
+     * Размер кнопки
      */
-    fullscreen?: boolean;
+    size?: IconButtonProps['size'];
+    /**
+     * Фиксирует крестик
+     */
+    sticky?: boolean;
+    /**
+     * Иконка
+     */
+    icon?: ElementType;
 };
+/**
+ * @deprecated Компонент только для внутреннего использования. Используйте <Header />
+ */
 declare const Closer: FC<CloserProps>;
 export { CloserProps, Closer };

package/dist/modern/components/closer/Component.js

@@ -2,17 +2,24 @@ import React, { useContext, useCallback } from 'react';
 import cn from 'classnames';
 import '@alfalab/core-components-base-modal/dist/modern';
 import { ModalContext } from '../../Context.js';
-import { Button } from '@alfalab/core-components-button/dist/modern';
+import { IconButton } from '@alfalab/core-components-icon-button/dist/modern';
+import { CrossHeavyMIcon } from '@alfalab/icons-glyph/CrossHeavyMIcon';
 
-var styles = {"closer":"modal__closer_p22te","left":"modal__left_p22te","right":"modal__right_p22te","fullscreen":"modal__fullscreen_p22te"};
+var styles = {"closer":"modal__closer_1nic2","button":"modal__button_1nic2","sticky":"modal__sticky_1nic2"};
 require('./index.css')
 
-const Closer = ({ className, fullscreen, align, ...restProps }) => {
+/**
+ * @deprecated Компонент только для внутреннего использования. Используйте <Header />
+ */
+const Closer = ({ className, size = 's', sticky, icon = CrossHeavyMIcon, ...restProps }) => {
     const { onClose } = useContext(ModalContext);
     const handleClick = useCallback(event => {
         onClose(event, 'closerClick');
     }, [onClose]);
-    return (React.createElement(Button, Object.assign({ type: 'button', view: 'ghost', className: cn(styles.closer, className, fullscreen && styles.fullscreen, align && styles[align]), "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', onClick: handleClick }, restProps)));
+    return (React.createElement("div", { className: cn(styles.closer, className, {
+            [styles.sticky]: sticky,
+        }) },
+        React.createElement(IconButton, Object.assign({ size: size, className: styles.button, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', onClick: handleClick, icon: icon }, restProps))));
 };
 
 export { Closer };