@alfalab/core-components-modal 4.1.0 → 5.0.1

package/dist/cssm/components/footer/desktop.module.css

@@ -8,54 +8,44 @@
 }
 :root {
     --gap-xl: 24px;
+    --gap-2xl: 32px;
     --gap-3xl: 40px;
-    --gap-4xl: 48px;
     --gap-6xl: 72px;
 }
 :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 */
 
     /* paddings */
-    --modal-s-footer-paddings: var(--gap-xl) var(--gap-4xl) var(--gap-4xl);
-    --modal-m-footer-paddings: var(--gap-xl) var(--gap-4xl) var(--gap-4xl);
-    --modal-l-footer-paddings: var(--gap-xl) var(--gap-6xl) var(--gap-6xl);
+    --modal-s-footer-paddings: var(--gap-xl) 56px 56px;
 
-    /* closer */
+    /* scroll */
 
-    /* sticky */
+    /* desktop */
 
-    /* scroll */
+    /* mobile */
 }
 .footer {
-    composes: footer from 'index.module.css';
-
     border-bottom-left-radius: var(--modal-border-radius);
     border-bottom-right-radius: var(--modal-border-radius);
 }
-.highlighted {
-    composes: highlighted from 'index.module.css';
-}
 .sticky {
-    composes: sticky from 'index.module.css';
-
-    bottom: calc(var(--modal-vertical-padding) * -1);
-}
-.fullscreen {
-    bottom: 0;
-}
-.s {
-    padding: var(--modal-s-footer-paddings);
+    bottom: calc(var(--modal-vertical-padding) * -1)
 }
+.sticky.fullscreen {
+        bottom: 0;
+    }
+.s,
 .m {
-    padding: var(--modal-m-footer-paddings);
+    padding: var(--modal-s-footer-paddings);
 }
 .l,
+.xl,
 .fullscreen {
-    padding: var(--modal-l-footer-paddings);
+    padding: var(--gap-2xl) var(--gap-6xl) var(--gap-6xl);
 }

package/dist/cssm/components/footer/index.module.css

@@ -1,41 +1,37 @@
 :root {
     --color-light-bg-primary: #fff;
+    --color-light-border-primary: #dbdee1;
 }
 :root {
 
     /* Hard */
 
     /* Up */
-    --shadow-s-up: 0 0 8px rgba(11, 31, 53, 0.04), 0 -4px 8px rgba(11, 31, 53, 0.08);
 
     /* Hard up */
 }
 :root {
-    --modal-header-background: var(--color-light-bg-primary);
+    --modal-footer-background: var(--color-light-bg-primary);
 
     /* sizes */
 
     /* paddings */
 
-    /* closer */
-
-    /* sticky */
-    --modal-footer-sticky-box-shadow: none;
-    --modal-footer-sticky-background: var(--modal-header-background);
-
     /* scroll */
-    --modal-footer-highlight-box-shadow: var(--shadow-s-up);
     --modal-footer-highlight-background: var(--color-light-bg-primary);
+    --modal-footer-highlight-box-shadow: 0 -1px 0 0 var(--color-light-border-primary);
+
+    /* desktop */
+
+    /* mobile */
 }
 .footer {
     width: 100%;
     box-sizing: border-box;
     transition: box-shadow 0.2s ease, background 0.2s ease;
-    background: var(--modal-header-background);
 }
 .sticky {
-    background: var(--modal-footer-sticky-background);
-    box-shadow: var(--modal-footer-sticky-box-shadow);
+    background: var(--modal-footer-background);
     position: sticky;
 }
 .highlighted {

package/dist/cssm/components/footer/layout.module.css

@@ -18,11 +18,11 @@
 
     /* paddings */
 
-    /* closer */
+    /* scroll */
 
-    /* sticky */
+    /* desktop */
 
-    /* scroll */
+    /* mobile */
 }
 .column {
     display: flex;

package/dist/cssm/components/footer/mobile.module.css

@@ -8,7 +8,6 @@
 }
 :root {
     --gap-m: 16px;
-    --gap-xl: 24px;
 }
 :root {
 
@@ -16,22 +15,15 @@
 
     /* paddings */
 
-    /* closer */
+    /* scroll */
 
-    /* sticky */
+    /* desktop */
 
-    /* scroll */
+    /* mobile */
 }
 .footer {
-    composes: footer from 'index.module.css';
-
-    padding: var(--gap-xl) var(--gap-m);
-}
-.highlighted {
-    composes: highlighted from 'index.module.css';
+    padding: var(--gap-m);
 }
 .sticky {
-    composes: sticky from 'index.module.css';
-
     bottom: 0;
 }

package/dist/cssm/components/header/Component.d.ts

@@ -5,23 +5,41 @@ type HeaderProps = {
      */
     children?: ReactNode;
     /**
-     * Наличие крестика
+     * Слот слева
      */
-    hasCloser?: boolean;
+    leftAddons?: ReactNode;
+    /**
+     * Компонент крестика
+     */
+    closer?: ReactNode;
     /**
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Дополнительный класс для аддонов
+     */
+    addonClassName?: string;
+    /**
+     * Дополнительный класс для контента
+     */
+    contentClassName?: string;
     /**
      * Заголовок шапки
      */
     title?: string;
+    /**
+     * Выравнивание заголовка
+     */
+    align?: 'left' | 'center';
+    /**
+     * Обрезать ли заголовок
+     */
+    trim?: boolean;
     /**
      * Фиксирует шапку
      */
     sticky?: boolean;
 };
-declare const Header: FC<HeaderProps & {
-    styles: Record<string, string>;
-}>;
+declare const Header: FC<HeaderProps>;
 export { HeaderProps, Header };

package/dist/cssm/components/header/Component.desktop.d.ts

@@ -1,14 +1,15 @@
 import { FC } from 'react';
 import { HeaderProps } from "./Component";
-type HeaderDesktopProps = HeaderProps & {
+import { ModalDesktopProps } from "../../Component.desktop";
+type HeaderDesktopProps = Omit<HeaderProps, 'closer'> & {
     /**
      * Размер
      */
-    size?: 's' | 'm' | 'l';
+    size?: ModalDesktopProps['size'];
     /**
-     * Флаг, что модальное окно открыто на весь экран
+     * Наличие крестика
      */
-    fullscreen?: boolean;
+    hasCloser?: boolean;
 };
 declare const HeaderDesktop: FC<HeaderDesktopProps>;
 export { HeaderDesktopProps, HeaderDesktop };

package/dist/cssm/components/header/Component.desktop.js

@@ -7,10 +7,12 @@ var React = require('react');
 var cn = require('classnames');
 require('@alfalab/core-components-base-modal/dist/cssm');
 require('../../Context.js');
-require('@alfalab/core-components-button/dist/cssm');
-require('../closer/index.module.css');
-require('../closer/Component.js');
+require('./index.module.css');
 var components_header_Component = require('./Component.js');
+require('@alfalab/core-components-icon-button/dist/cssm');
+require('@alfalab/icons-glyph/CrossHeavyMIcon');
+require('../closer/index.module.css');
+var components_closer_Component = require('../closer/Component.js');
 var styles = require('./desktop.module.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -20,8 +22,13 @@ var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
 var HeaderDesktop = function (_a) {
-    var size = _a.size, className = _a.className, fullscreen = _a.fullscreen, restProps = tslib_es6.__rest(_a, ["size", "className", "fullscreen"]);
-    return (React__default['default'].createElement(components_header_Component.Header, tslib_es6.__assign({ className: cn__default['default'](className, size && styles__default['default'][size], fullscreen && styles__default['default'].fullscreen), styles: styles__default['default'] }, restProps)));
+    var _b;
+    var size = _a.size, className = _a.className, contentClassName = _a.contentClassName, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, sticky = _a.sticky, _d = _a.leftAddons, leftAddons = _d === void 0 ? React__default['default'].createElement("span", null) : _d, title = _a.title, children = _a.children, restProps = tslib_es6.__rest(_a, ["size", "className", "contentClassName", "hasCloser", "sticky", "leftAddons", "title", "children"]);
+    var hasContent = title || Boolean(children);
+    return (React__default['default'].createElement(components_header_Component.Header, tslib_es6.__assign({ className: cn__default['default'](className, styles__default['default'].header, size && styles__default['default'][size], (_b = {},
+            _b[styles__default['default'].sticky] = sticky,
+            _b[styles__default['default'].hasContent] = hasContent,
+            _b)), contentClassName: cn__default['default'](styles__default['default'].content, contentClassName), closer: hasCloser ? React__default['default'].createElement(components_closer_Component.Closer, null) : null, leftAddons: leftAddons, sticky: sticky, title: title }, restProps), children));
 };
 
 exports.HeaderDesktop = HeaderDesktop;

package/dist/cssm/components/header/Component.js

@@ -2,36 +2,38 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-ce870b46.js');
 var React = require('react');
 var cn = require('classnames');
 require('@alfalab/core-components-base-modal/dist/cssm');
 var Context = require('../../Context.js');
-require('@alfalab/core-components-button/dist/cssm');
-require('../closer/index.module.css');
-var components_closer_Component = require('../closer/Component.js');
+var styles = require('./index.module.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
 var Header = function (_a) {
-    var _b;
-    var className = _a.className, children = _a.children, title = _a.title, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, sticky = _a.sticky, styles = _a.styles;
-    var _d = React.useContext(Context.ModalContext), headerHighlighted = _d.headerHighlighted, setHasHeader = _d.setHasHeader;
+    var _b, _c;
+    var className = _a.className, addonClassName = _a.addonClassName, contentClassName = _a.contentClassName, leftAddons = _a.leftAddons, children = _a.children, _d = _a.align, align = _d === void 0 ? 'left' : _d, _e = _a.trim, trim = _e === void 0 ? true : _e, title = _a.title, closer = _a.closer, sticky = _a.sticky;
+    var _f = React.useContext(Context.ModalContext), headerHighlighted = _f.headerHighlighted, setHasHeader = _f.setHasHeader;
     var hasContent = title || Boolean(children);
     React.useEffect(function () {
         setHasHeader(true);
     }, [setHasHeader]);
-    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.header, className, (_b = {},
-            _b[styles.highlighted] = sticky && headerHighlighted,
-            _b[styles.sticky] = sticky,
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].header, className, (_b = {},
+            _b[styles__default['default'].highlighted] = hasContent && sticky && headerHighlighted,
+            _b[styles__default['default'].sticky] = sticky,
+            _b[styles__default['default'].hasContent] = hasContent,
             _b)) },
-        hasContent && (React__default['default'].createElement("div", { className: styles.content },
+        leftAddons && React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].addon, addonClassName) }, leftAddons),
+        hasContent && (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].content, contentClassName, styles__default['default'][align], (_c = {},
+                _c[styles__default['default'].trim] = trim,
+                _c)) },
             children,
-            title && React__default['default'].createElement("div", { className: styles.title }, title))),
-        hasCloser && React__default['default'].createElement(components_closer_Component.Closer, null)));
+            title && React__default['default'].createElement("div", { className: styles__default['default'].title }, title))),
+        closer && (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].addon, styles__default['default'].closer, addonClassName) }, closer))));
 };
 
 exports.Header = Header;

package/dist/cssm/components/header/Component.mobile.d.ts

@@ -1,5 +1,10 @@
 import { FC } from 'react';
 import { HeaderProps } from "./Component";
-type HeaderMobileProps = HeaderProps;
+type HeaderMobileProps = Omit<HeaderProps, 'closer'> & {
+    /**
+     * Наличие крестика
+     */
+    hasCloser?: boolean;
+};
 declare const HeaderMobile: FC<HeaderMobileProps>;
 export { HeaderMobileProps, HeaderMobile };

package/dist/cssm/components/header/Component.mobile.js

@@ -4,20 +4,31 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../tslib.es6-ce870b46.js');
 var React = require('react');
-require('classnames');
+var cn = require('classnames');
 require('@alfalab/core-components-base-modal/dist/cssm');
 require('../../Context.js');
-require('@alfalab/core-components-button/dist/cssm');
-require('../closer/index.module.css');
-require('../closer/Component.js');
+require('./index.module.css');
 var components_header_Component = require('./Component.js');
+require('@alfalab/core-components-icon-button/dist/cssm');
+require('@alfalab/icons-glyph/CrossHeavyMIcon');
+require('../closer/index.module.css');
+var components_closer_Component = require('../closer/Component.js');
+var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
 var styles = require('./mobile.module.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var CrossMIcon__default = /*#__PURE__*/_interopDefaultLegacy(CrossMIcon);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
-var HeaderMobile = function (props) { return React__default['default'].createElement(components_header_Component.Header, tslib_es6.__assign({ styles: styles__default['default'] }, props)); };
+var HeaderMobile = function (_a) {
+    var _b;
+    var className = _a.className, contentClassName = _a.contentClassName, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, sticky = _a.sticky, restProps = tslib_es6.__rest(_a, ["className", "contentClassName", "hasCloser", "sticky"]);
+    return (React__default['default'].createElement(components_header_Component.Header, tslib_es6.__assign({ className: cn__default['default'](className, (_b = {},
+            _b[styles__default['default'].sticky] = sticky,
+            _b)), contentClassName: cn__default['default'](styles__default['default'].content, contentClassName), closer: hasCloser ? React__default['default'].createElement(components_closer_Component.Closer, { icon: CrossMIcon__default['default'], size: 'xs' }) : null, sticky: sticky }, restProps)));
+};
 
 exports.HeaderMobile = HeaderMobile;

package/dist/cssm/components/header/desktop.module.css

@@ -7,64 +7,80 @@
     /* Hard up */
 }
 :root {
+    --gap-xs: 8px;
+    --gap-m: 16px;
+    --gap-xl: 24px;
     --gap-3xl: 40px;
-    --gap-4xl: 48px;
-    --gap-6xl: 72px;
 }
 :root {
-    --border-radius-m: 8px;
+    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
 }
 :root {
-    --modal-border-radius: var(--border-radius-m);
+    --border-radius-l: 12px;
+}
+:root {
+    --modal-border-radius: var(--border-radius-l);
     --modal-vertical-padding: var(--gap-3xl);
 
     /* sizes */
-    --modal-header-min-height: 48px;
-    --modal-header-l-min-height: 72px;
 
     /* paddings */
-    --modal-s-header-paddings: 0 0 0 var(--gap-4xl);
-    --modal-m-header-paddings: 0 0 0 var(--gap-4xl);
-    --modal-l-header-paddings: 0 0 0 var(--gap-6xl);
+    --modal-s-header-paddings: var(--gap-xs) var(--gap-xs) var(--gap-m);
 
-    /* closer */
+    /* scroll */
 
-    /* sticky */
+    /* desktop */
+    --modal-s-header-desktop-content-paddings: var(--gap-3xl) var(--gap-m) 0 0;
+    --modal-s-header-desktop-font-size: 22px;
+    --modal-s-header-desktop-line-height: 26px;
+    --modal-l-header-desktop-content-paddings: var(--gap-3xl) var(--gap-m) 0 0;
+    --modal-l-header-desktop-font-size: 30px;
+    --modal-l-header-desktop-line-height: 36px;
+    --modal-header-desktop-font-weight: bold;
+    --modal-header-desktop-font-family: var(--font-family-system);
 
-    /* scroll */
+    /* mobile */
 }
 .header {
-    composes: header from 'index.module.css';
-
-    min-height: var(--modal-header-min-height);
     border-top-left-radius: var(--modal-border-radius);
     border-top-right-radius: var(--modal-border-radius);
 }
-.s {
-    padding: var(--modal-s-header-paddings);
+.content {
+    font-weight: var(--modal-header-desktop-font-weight);
+    font-family: var(--modal-header-desktop-font-family);
+}
+.s .content,
+.m .content {
+    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);
+}
+.l .content,
+.xl .content,
+.fullscreen .content {
+    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);
 }
+.s,
 .m {
-    padding: var(--modal-m-header-paddings);
+    padding: var(--modal-s-header-paddings)
 }
+.s:not(.hasContent), .m:not(.hasContent) {
+        padding-bottom: 0;
+    }
 .l,
+.xl,
 .fullscreen {
-    min-height: var(--modal-header-l-min-height);
-    padding: var(--modal-l-header-paddings);
+    padding: var(--gap-xl) var(--gap-xl) var(--gap-m)
 }
+.l:not(.hasContent), .xl:not(.hasContent), .fullscreen:not(.hasContent) {
+        padding-bottom: var(--gap-m);
+    }
 .sticky {
-    composes: sticky from 'index.module.css';
-
-    top: calc(var(--modal-vertical-padding) * -1);
-}
-.fullscreen {
-    top: 0;
-}
-.highlighted {
-    composes: highlighted from 'index.module.css';
-}
-.content {
-    composes: content from 'index.module.css';
-}
-.title {
-    composes: title from 'index.module.css';
+    top: calc(var(--modal-vertical-padding) * -1)
 }
+.sticky.fullscreen {
+        top: 0;
+    }

package/dist/cssm/components/header/index.module.css

@@ -2,7 +2,6 @@
     --color-light-bg-primary: #fff;
 }
 :root {
-    --shadow-s: 0 0 8px rgba(11, 31, 53, 0.04), 0 4px 8px rgba(11, 31, 53, 0.08);
 
     /* Hard */
 
@@ -10,14 +9,6 @@
 
     /* Hard up */
 }
-:root {
-    --gap-xs: 8px;
-    --gap-m: 16px;
-}
-:root {
-    --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
-        'Helvetica Neue', Helvetica, sans-serif;
-}
 :root {
     --modal-header-background: var(--color-light-bg-primary);
 
@@ -25,39 +16,69 @@
 
     /* paddings */
 
-    /* closer */
-
-    /* sticky */
-
     /* scroll */
-    --modal-header-highlight-box-shadow: var(--shadow-s);
     --modal-header-highlight-background: var(--color-light-bg-primary);
+    --modal-header-highlight-box-shadow: none;
+
+    /* desktop */
+
+    /* mobile */
 }
 .header {
     width: 100%;
     box-sizing: border-box;
     display: flex;
     align-items: stretch;
-    justify-content: flex-end;
-    transition: box-shadow 0.2s ease, background 0.2s ease;
-    background: var(--modal-header-background);
+    justify-content: space-between;
+    transition: box-shadow 0.2s ease, background 0.2s ease
 }
+.header:not(.hasContent) {
+        pointer-events: none;
+    }
 .highlighted {
     background: var(--modal-header-highlight-background);
     box-shadow: var(--modal-header-highlight-box-shadow);
 }
 .sticky {
-    position: sticky;
+    position: sticky
 }
+.sticky.hasContent {
+        background: var(--modal-header-background);
+    }
 .content {
-    font-size: 24px;
-    line-height: 32px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
     flex-grow: 1;
-    margin: var(--gap-xs) var(--gap-m) var(--gap-xs) 0;
 }
 .title {
     word-break: break-word;
 }
+.addon {
+    min-width: 48px;
+    height: 48px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: all;
+}
+.closer {
+    margin-left: auto;
+}
+.left {
+    justify-content: flex-start;
+    text-align: left;
+}
+.center {
+    justify-content: center;
+    text-align: center;
+}
+.right {
+    justify-content: flex-end;
+    text-align: right;
+}
+.trim {
+    overflow: hidden
+}
+.trim .title {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }

package/dist/cssm/components/header/mobile.module.css

@@ -7,7 +7,13 @@
     /* Hard up */
 }
 :root {
-    --gap-4xl: 48px;
+    --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-m: 16px;
+}
+:root {
+    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
 }
 :root {
 
@@ -15,32 +21,25 @@
 
     /* paddings */
 
-    /* closer */
+    /* scroll */
 
-    /* sticky */
+    /* desktop */
 
-    /* scroll */
-}
-.header {
-    composes: header from 'index.module.css';
-
-    text-align: center;
-    flex-direction: row-reverse;
-    justify-content: flex-end;
-    padding-right: var(--gap-4xl);
-    padding-left: 0;
+    /* mobile */
+    --modal-header-mobile-content-paddings: var(--gap-s) var(--gap-xs) var(--gap-s) var(--gap-m);
+    --modal-header-mobile-font-size: 18px;
+    --modal-header-mobile-line-height: 24px;
+    --modal-header-mobile-font-family: var(--font-family-system);
+    --modal-header-mobile-font-weight: bold;
 }
 .sticky {
-    composes: sticky from 'index.module.css';
-
     top: 0;
 }
-.highlighted {
-    composes: highlighted from 'index.module.css';
-}
 .content {
-    composes: content from 'index.module.css';
-}
-.title {
-    composes: title from 'index.module.css';
+    font-size: var(--modal-header-mobile-font-size);
+    line-height: var(--modal-header-mobile-line-height);
+    font-family: var(--modal-header-mobile-font-family);
+    font-weight: var(--modal-header-mobile-font-weight);
+
+    padding: var(--modal-header-mobile-content-paddings);
 }