@alfalab/core-components-bottom-sheet 5.3.1 → 6.0.0

package/cssm/{component-8a02e7db.js → component-b3add484.js}

@@ -8,11 +8,9 @@ var reactSwipeable = require('react-swipeable');
 var cn = require('classnames');
 var coreComponentsBaseModal = require('@alfalab/core-components-base-modal/cssm');
 var components_footer_Component = require('./components/footer/Component.js');
-var coreComponentsTypography = require('@alfalab/core-components-typography/cssm');
+var coreComponentsNavigationBar = require('@alfalab/core-components-navigation-bar/cssm');
 var components_swipeableBackdrop_Component = require('./components/swipeable-backdrop/Component.js');
 var styles$1 = require('./index.module.css');
-var components_backer_Component = require('./components/backer/Component.js');
-var components_closer_Component = require('./components/closer/Component.js');
 var styles = require('./components/header/index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -29,50 +27,21 @@ var getDataTestId = function (dataTestId, element) {
 };
 
 var Header = function (_a) {
-    var _b, _c, _d, _e, _f;
-    var title = _a.title, headerClassName = _a.headerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, titleAlign = _a.titleAlign, trimTitle = _a.trimTitle, sticky = _a.sticky, dataTestId = _a.dataTestId, onBack = _a.onBack;
-    var _g = React.useContext(coreComponentsBaseModal.BaseModalContext), headerHighlighted = _g.headerHighlighted, setHasHeader = _g.setHasHeader, setHeaderOffset = _g.setHeaderOffset;
-    var hasLeftPart = hasBacker || leftAddons || titleAlign === 'center';
-    var hasRightPart = hasCloser || rightAddons || titleAlign === 'center';
-    var hasHeaderContent = title || hasBacker || hasCloser;
-    React.useEffect(function () {
-        setHasHeader(true);
-    }, [setHasHeader]);
+    var _b;
+    var className = _a.className, sticky = _a.sticky, title = _a.title, children = _a.children, restProps = tslib.__rest(_a, ["className", "sticky", "title", "children"]);
+    var _c = React.useContext(coreComponentsBaseModal.BaseModalContext), setHeaderOffset = _c.setHeaderOffset, setHasHeader = _c.setHasHeader, headerHighlighted = _c.headerHighlighted, onClose = _c.onClose;
     React.useEffect(function () {
         setHeaderOffset(HEADER_OFFSET);
     }, [setHeaderOffset]);
-    var getTitleIndent = function () {
-        var _a;
-        var titleAlignedCenter = titleAlign === 'center';
-        var hasLeftPart = hasBacker || leftAddons;
-        var hasRightPart = hasCloser || rightAddons;
-        return cn__default.default((_a = {},
-            _a[styles__default.default.titleBigIndentHorizontal] = !sticky && titleAlignedCenter && (hasLeftPart || hasRightPart),
-            _a[styles__default.default.titleIndentLeft] = !sticky && !titleAlignedCenter && hasLeftPart,
-            _a[styles__default.default.titleIndentRight] = !sticky && !titleAlignedCenter && hasRightPart,
-            _a));
-    };
-    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.headerWrapper, headerClassName, (_b = {},
-            _b[styles__default.default.highlighted] = headerHighlighted && sticky,
+    React.useEffect(function () {
+        setHasHeader(true);
+    }, [setHasHeader]);
+    var hasContent = Boolean(title || children);
+    return (React__default.default.createElement(coreComponentsNavigationBar.NavigationBar, tslib.__assign({}, restProps, { title: title, onClose: onClose, sticky: sticky, view: 'mobile', className: cn__default.default(styles__default.default.headerWrapper, className, (_b = {},
+            _b[styles__default.default.highlighted] = hasContent && headerHighlighted && sticky,
             _b[styles__default.default.sticky] = sticky,
-            _b)), "data-test-id": getDataTestId(dataTestId) },
-        React__default.default.createElement("div", { className: cn__default.default(styles__default.default.header, headerClassName, (_c = {},
-                _c[styles__default.default.justifyEnd] = !title,
-                _c)) },
-            hasLeftPart && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.addon, addonClassName, (_d = {},
-                    _d[styles__default.default.addonFixed] = !sticky,
-                    _d[styles__default.default.addonLeft] = !sticky,
-                    _d)) }, hasBacker ? (React__default.default.createElement(components_backer_Component.Backer, { className: backerClassName, onClick: onBack, dataTestId: getDataTestId(dataTestId, 'backer') })) : (leftAddons))),
-            hasHeaderContent && (React__default.default.createElement(coreComponentsTypography.Typography.Text, { view: 'primary-large', weight: 'bold', className: cn__default.default(styles__default.default.title, getTitleIndent(), (_e = {},
-                    _e[styles__default.default.titleCenter] = titleAlign === 'center',
-                    _e[styles__default.default.titleLeft] = titleAlign === 'left',
-                    _e[styles__default.default.trimTitle] = trimTitle,
-                    _e)), color: 'primary', dataTestId: getDataTestId(dataTestId, 'title') }, title)),
-            hasRightPart && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.addon, addonClassName, (_f = {},
-                    _f[styles__default.default.addonFixed] = !sticky,
-                    _f[styles__default.default.addonRight] = !sticky,
-                    _f)) }, hasCloser ? (React__default.default.createElement(components_closer_Component.Closer, { className: closerClassName, dataTestId: getDataTestId(dataTestId, 'closer') })) : (rightAddons)))),
-        bottomAddons));
+            _b[styles__default.default.hasContent] = hasContent,
+            _b)), contentClassName: cn__default.default(styles__default.default.title) }), children));
 };
 
 var TIMEOUT = 300;
@@ -85,34 +54,21 @@ var HEADER_OFFSET = 24;
 var CLOSE_OFFSET = 0.2;
 var BottomSheet = React.forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var open = _a.open, title = _a.title, container = _a.container, actionButton = _a.actionButton, contentClassName = _a.contentClassName, containerClassName = _a.containerClassName, containerProps = _a.containerProps, headerClassName = _a.headerClassName, footerClassName = _a.footerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, modalClassName = _a.modalClassName, modalWrapperClassName = _a.modalWrapperClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _e = _a.titleAlign, titleAlign = _e === void 0 ? 'left' : _e, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _f = _a.stickyFooter, stickyFooter = _f === void 0 ? true : _f, _g = _a.initialHeight, initialHeight = _g === void 0 ? 'default' : _g, hideOverlay = _a.hideOverlay, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, children = _a.children, zIndex = _a.zIndex, _h = _a.transitionProps, transitionProps = _h === void 0 ? {} : _h, dataTestId = _a.dataTestId, _j = _a.swipeable, swipeable = _j === void 0 ? true : _j, backdropProps = _a.backdropProps, _k = _a.scrollableContainerRef, scrollableContainerRef = _k === void 0 ? function () { return null; } : _k, onClose = _a.onClose, onBack = _a.onBack;
-    var _l = React.useState(0), sheetOffset = _l[0], setSheetOffset = _l[1];
-    var _m = React.useState(1), backdropOpacity = _m[0], setBackdropOpacity = _m[1];
-    var _o = React.useState(false), scrollLocked = _o[0], setScrollLocked = _o[1];
+    var open = _a.open, title = _a.title, container = _a.container, _e = _a.titleSize, titleSize = _e === void 0 ? 'default' : _e, subtitle = _a.subtitle, actionButton = _a.actionButton, contentClassName = _a.contentClassName, containerClassName = _a.containerClassName, containerProps = _a.containerProps, headerClassName = _a.headerClassName, footerClassName = _a.footerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, modalClassName = _a.modalClassName, modalWrapperClassName = _a.modalWrapperClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _f = _a.titleAlign, titleAlign = _f === void 0 ? 'left' : _f, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _g = _a.stickyFooter, stickyFooter = _g === void 0 ? true : _g, _h = _a.initialHeight, initialHeight = _h === void 0 ? 'default' : _h, hideOverlay = _a.hideOverlay, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, children = _a.children, zIndex = _a.zIndex, _j = _a.transitionProps, transitionProps = _j === void 0 ? {} : _j, dataTestId = _a.dataTestId, _k = _a.swipeable, swipeable = _k === void 0 ? true : _k, backdropProps = _a.backdropProps, _l = _a.scrollableContainerRef, scrollableContainerRef = _l === void 0 ? function () { return null; } : _l, onClose = _a.onClose, onBack = _a.onBack;
+    var _m = React.useState(0), sheetOffset = _m[0], setSheetOffset = _m[1];
+    var _o = React.useState(1), backdropOpacity = _o[0], setBackdropOpacity = _o[1];
+    var _p = React.useState(false), scrollLocked = _p[0], setScrollLocked = _p[1];
     var sheetHeight = React.useRef(0);
     var scrollableContainer = React.useRef(null);
     var scrollableContainerScrollValue = React.useRef(0);
-    var emptyHeader = !hasCloser && !hasBacker && !leftAddons && !rightAddons && !title;
+    var emptyHeader = !hasCloser && !leftAddons && !title && !hasBacker && !rightAddons;
     // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
     var fullHeight = reactDiv100vh.use100vh();
     var targetHeight = "".concat(fullHeight - HEADER_OFFSET, "px");
-    var headerProps = {
-        title: title,
-        headerClassName: headerClassName,
-        addonClassName: addonClassName,
-        closerClassName: closerClassName,
-        backerClassName: backerClassName,
-        leftAddons: leftAddons,
-        rightAddons: rightAddons,
-        bottomAddons: bottomAddons,
-        hasCloser: hasCloser,
-        hasBacker: hasBacker,
-        titleAlign: titleAlign,
-        trimTitle: trimTitle,
-        sticky: stickyHeader,
-        dataTestId: getDataTestId(dataTestId, 'header'),
-        onBack: onBack,
-    };
+    var titleIsReactElement = React__default.default.isValidElement(title);
+    var headerProps = tslib.__assign(tslib.__assign({}, (titleIsReactElement
+        ? { children: title }
+        : { title: title ? title === null || title === void 0 ? void 0 : title.toString() : undefined })), { parentRef: scrollableContainer, className: headerClassName, addonClassName: addonClassName, closerClassName: closerClassName, backButtonClassName: backerClassName, leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: bottomAddons, hasCloser: hasCloser, hasBackButton: hasBacker, align: titleAlign, trim: trimTitle, sticky: stickyHeader, dataTestId: getDataTestId(dataTestId, 'header'), onBack: onBack, titleSize: titleSize, subtitle: subtitle, onClose: onClose });
     var getBackdropOpacity = function (offset) {
         if (sheetHeight.current === 0)
             return MIN_BACKDROP_OPACITY;

package/cssm/component.js

@@ -7,18 +7,11 @@ require('react-merge-refs');
 require('react-swipeable');
 require('classnames');
 require('@alfalab/core-components-base-modal/cssm');
-var components_header_Component = require('./component-8a02e7db.js');
+var components_header_Component = require('./component-b3add484.js');
 require('./components/footer/Component.js');
 require('./components/swipeable-backdrop/Component.js');
 require('./index.module.css');
-require('@alfalab/core-components-typography/cssm');
-require('./components/backer/Component.js');
-require('@alfalab/core-components-icon-button/cssm');
-require('@alfalab/icons-glyph/ArrowBackMIcon');
-require('./components/backer/index.module.css');
-require('./components/closer/Component.js');
-require('@alfalab/icons-glyph/CrossMIcon');
-require('./components/closer/index.module.css');
+require('@alfalab/core-components-navigation-bar/cssm');
 require('./components/header/index.module.css');
 require('./components/footer/index.module.css');
 require('@alfalab/core-components-backdrop/cssm');

package/cssm/components/header/Component.js

@@ -1,14 +1,12 @@
 'use strict';
 
+require('tslib');
 require('react');
 require('classnames');
 require('@alfalab/core-components-base-modal/cssm');
-require('@alfalab/core-components-typography/cssm');
-var components_header_Component = require('../../component-8a02e7db.js');
-require('../backer/Component.js');
-require('../closer/Component.js');
+require('@alfalab/core-components-navigation-bar/cssm');
+var components_header_Component = require('../../component-b3add484.js');
 require('./index.module.css');
-require('tslib');
 require('react-div-100vh');
 require('react-merge-refs');
 require('react-swipeable');
@@ -17,11 +15,6 @@ require('../footer/index.module.css');
 require('../swipeable-backdrop/Component.js');
 require('@alfalab/core-components-backdrop/cssm');
 require('../../index.module.css');
-require('@alfalab/core-components-icon-button/cssm');
-require('@alfalab/icons-glyph/ArrowBackMIcon');
-require('../backer/index.module.css');
-require('@alfalab/icons-glyph/CrossMIcon');
-require('../closer/index.module.css');
 
 
 

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

@@ -1,6 +1,7 @@
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
+    --color-light-border-primary: #dbdee1;
 } :root {
 } :root {
 } :root {
@@ -15,25 +16,24 @@
 } :root {
     --gap-2xs: 4px;
     --gap-xs: 8px;
-    --gap-4xl: 48px;
+    --gap-s: 12px;
 } :root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
 } :root {
 } :root {
-    --bottom-sheet-header-border-bottom: none;
+    --bottom-sheet-header-border-bottom: 1px solid var(--color-light-border-primary);
     --bottom-sheet-title-font-size: 18px;
     --bottom-sheet-title-font-weight: 700;
     --bottom-sheet-title-line-height: 24px;
     --bottom-sheet-title-font-family: var(--font-family-system);
-    --bottom-sheet-title-margin-vertical: var(--gap-2xs);
 } .headerWrapper {
-    padding: var(--gap-xs);
-    padding-bottom: 0;
-    background-color: var(--color-light-bg-primary);
+    padding: var(--gap-s) var(--gap-xs) var(--gap-2xs);
     border-top-right-radius: var(--border-radius-xl);
     border-top-left-radius: var(--border-radius-xl);
     z-index: 1;
+} .hasContent {
+    background-color: var(--color-light-bg-primary);
 } .header {
     display: flex;
 } .sticky {
@@ -51,15 +51,8 @@
     height: 48px;
 } .addonFixed {
     position: fixed;
-} .addonLeft {
-    left: 0;
-    margin-left: var(--gap-xs);
-} .addonRight {
-    right: 0;
-    margin-right: var(--gap-xs);
 } .title {
-    padding: var(--gap-xs) var(--gap-xs);
-    margin: var(--bottom-sheet-title-margin-vertical) 0;
+    padding: var(--gap-s) var(--gap-xs);
     width: 100%;
     font-size: var(--bottom-sheet-title-font-size);
     font-weight: var(--bottom-sheet-title-font-weight);
@@ -73,10 +66,4 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-} .titleBigIndentHorizontal {
-    margin: var(--bottom-sheet-title-margin-vertical) var(--gap-4xl);
-} .titleIndentRight {
-    margin-right: var(--gap-4xl);
-} .titleIndentLeft {
-    margin-left: var(--gap-4xl);
 }

package/cssm/index.d.ts

@@ -1 +1 @@
-export * from "./component-8a02e7db";
+export * from "./component-b3add484";

package/cssm/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_header_Component = require('./component-8a02e7db.js');
+var components_header_Component = require('./component-b3add484.js');
 require('tslib');
 require('react');
 require('react-div-100vh');
@@ -10,17 +10,10 @@ require('classnames');
 require('@alfalab/core-components-base-modal/cssm');
 require('./components/footer/Component.js');
 require('./components/footer/index.module.css');
-require('@alfalab/core-components-typography/cssm');
+require('@alfalab/core-components-navigation-bar/cssm');
 require('./components/swipeable-backdrop/Component.js');
 require('@alfalab/core-components-backdrop/cssm');
 require('./index.module.css');
-require('./components/backer/Component.js');
-require('@alfalab/core-components-icon-button/cssm');
-require('@alfalab/icons-glyph/ArrowBackMIcon');
-require('./components/backer/index.module.css');
-require('./components/closer/Component.js');
-require('@alfalab/icons-glyph/CrossMIcon');
-require('./components/closer/index.module.css');
 require('./components/header/index.module.css');
 
 

package/cssm/index.module.css

@@ -13,12 +13,11 @@
 
     /* Hard up */
 } :root {
+    --border-radius-xl: 16px;
     --border-radius-xxl: 20px;
-    --border-radius-3xl: 24px;
 } :root {
     --gap-2xs: 4px;
     --gap-m: 16px;
-    --gap-xl: 24px;
 } :root {
 } :root {
 } :root {
@@ -35,8 +34,8 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    border-top-right-radius: var(--border-radius-3xl);
-    border-top-left-radius: var(--border-radius-3xl);
+    border-top-right-radius: var(--border-radius-xl);
+    border-top-left-radius: var(--border-radius-xl);
     background: var(--color-light-bg-primary);
     transform: translateY(100%);
 } .withTransition {
@@ -65,7 +64,7 @@
     color: var(--color-light-text-primary);
     background-color: var(--color-light-bg-primary);
 } .noHeader {
-    padding-top: var(--gap-xl);
+    padding-top: var(--gap-m);
 } .noFooter {
     padding-bottom: var(--gap-m);
 } .scrollLocked {

package/esm/{component-9a8081cd.d.ts → component-094991ea.d.ts}

@@ -1,76 +1,15 @@
 /// <reference types="react-transition-group" />
 /// <reference types="react" />
 import React from "react";
-import { FC, ReactNode, HTMLAttributes, RefObject } from "react";
-import { BottomSheetTitleAlign } from "./index";
+import { FC, HTMLAttributes, ReactNode, RefObject } from "react";
+import { NavigationBarProps } from "@alfalab/core-components-navigation-bar";
 import { TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalProps } from "@alfalab/core-components-base-modal";
-type HeaderProps = {
-    /**
-     * Заголовок
-     */
-    title?: ReactNode;
-    /**
-     * Дополнительный класс
-     */
-    headerClassName?: string;
-    /**
-     * Дополнительный класс для аддонов
-     */
-    addonClassName?: string;
-    /**
-     * Дополнительный класс для компонента крестика
-     */
-    closerClassName?: string;
-    /**
-     * Дополнительный класс для компонента стрелки назад
-     */
-    backerClassName?: string;
-    /**
-     * Слот слева
-     */
-    leftAddons?: ReactNode;
-    /**
-     * Слот справа
-     */
-    rightAddons?: ReactNode;
-    /**
-     * Слот снизу
-     */
-    bottomAddons?: ReactNode;
-    /**
-     * Наличие компонента крестика
-     */
-    hasCloser?: boolean;
-    /**
-     * Наличие компонента стрелки назад
-     */
-    hasBacker?: boolean;
-    /**
-     * Выравнивание заголовка
-     */
-    titleAlign?: BottomSheetTitleAlign;
-    /**
-     * Будет ли обрезан заголовок
-     */
-    trimTitle?: boolean;
-    /**
-     * Фиксирует шапку
-     */
-    sticky?: boolean;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * Обработчик нажатия на стрелку назад
-     */
-    onBack?: () => void;
-};
+type HeaderProps = Omit<NavigationBarProps, "view" | "size">;
 declare const Header: FC<HeaderProps>;
 declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
 declare const isClient: () => boolean;
-type BottomSheetTitleAlign$0 = 'center' | 'left';
+type BottomSheetTitleAlign = 'center' | 'left';
 type BottomSheetProps = {
     /**
      * Контент
@@ -84,6 +23,14 @@ type BottomSheetProps = {
      * Заголовок
      */
     title?: ReactNode;
+    /**
+     * Размер заголовка
+     */
+    titleSize?: NavigationBarProps['titleSize'];
+    /**
+     * Подзаголовок.
+     */
+    subtitle?: NavigationBarProps['subtitle'];
     /**
      * Кнопка действия (обычно, это кнопка закрытия)
      */
@@ -178,7 +125,7 @@ type BottomSheetProps = {
     /**
      * Выравнивание заголовка
      */
-    titleAlign?: BottomSheetTitleAlign$0;
+    titleAlign?: BottomSheetTitleAlign;
     /**
      * Фиксирует шапку
      */
@@ -236,4 +183,4 @@ type BottomSheetProps = {
 declare const HEADER_OFFSET = 24;
 declare const CLOSE_OFFSET = 0.2;
 declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
-export { HeaderProps, Header, getDataTestId, isClient, BottomSheetTitleAlign$0 as BottomSheetTitleAlign, BottomSheetProps, HEADER_OFFSET, CLOSE_OFFSET, BottomSheet };
+export { HeaderProps, Header, getDataTestId, isClient, BottomSheetTitleAlign, BottomSheetProps, HEADER_OFFSET, CLOSE_OFFSET, BottomSheet };

package/esm/{component-9a8081cd.js → component-094991ea.js}

@@ -1,4 +1,4 @@
-import { __assign } from 'tslib';
+import { __rest, __assign } from 'tslib';
 import React, { useContext, useEffect, forwardRef, useState, useRef, useCallback } from 'react';
 import { use100vh } from 'react-div-100vh';
 import mergeRefs from 'react-merge-refs';
@@ -6,67 +6,36 @@ import { useSwipeable } from 'react-swipeable';
 import cn from 'classnames';
 import { BaseModalContext, BaseModal } from '@alfalab/core-components-base-modal/esm';
 import { Footer } from './components/footer/Component.js';
-import { Typography } from '@alfalab/core-components-typography/esm';
+import { NavigationBar } from '@alfalab/core-components-navigation-bar/esm';
 import { SwipeableBackdrop } from './components/swipeable-backdrop/Component.js';
-import { Backer } from './components/backer/Component.js';
-import { Closer } from './components/closer/Component.js';
 
 var getDataTestId = function (dataTestId, element) {
     var elementPart = element ? "-".concat(element.toLowerCase()) : '';
     return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
 };
 
-var styles$1 = {"headerWrapper":"bottom-sheet__headerWrapper_1veed","header":"bottom-sheet__header_1veed","sticky":"bottom-sheet__sticky_1veed","highlighted":"bottom-sheet__highlighted_1veed","justifyEnd":"bottom-sheet__justifyEnd_1veed","addon":"bottom-sheet__addon_1veed","addonFixed":"bottom-sheet__addonFixed_1veed","addonLeft":"bottom-sheet__addonLeft_1veed","addonRight":"bottom-sheet__addonRight_1veed","title":"bottom-sheet__title_1veed","titleCenter":"bottom-sheet__titleCenter_1veed","titleLeft":"bottom-sheet__titleLeft_1veed","trimTitle":"bottom-sheet__trimTitle_1veed","titleBigIndentHorizontal":"bottom-sheet__titleBigIndentHorizontal_1veed","titleIndentRight":"bottom-sheet__titleIndentRight_1veed","titleIndentLeft":"bottom-sheet__titleIndentLeft_1veed"};
+var styles$1 = {"headerWrapper":"bottom-sheet__headerWrapper_1vrpq","hasContent":"bottom-sheet__hasContent_1vrpq","header":"bottom-sheet__header_1vrpq","sticky":"bottom-sheet__sticky_1vrpq","highlighted":"bottom-sheet__highlighted_1vrpq","justifyEnd":"bottom-sheet__justifyEnd_1vrpq","addon":"bottom-sheet__addon_1vrpq","addonFixed":"bottom-sheet__addonFixed_1vrpq","title":"bottom-sheet__title_1vrpq","titleCenter":"bottom-sheet__titleCenter_1vrpq","titleLeft":"bottom-sheet__titleLeft_1vrpq","trimTitle":"bottom-sheet__trimTitle_1vrpq"};
 require('./components/header/index.css')
 
 var Header = function (_a) {
-    var _b, _c, _d, _e, _f;
-    var title = _a.title, headerClassName = _a.headerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, titleAlign = _a.titleAlign, trimTitle = _a.trimTitle, sticky = _a.sticky, dataTestId = _a.dataTestId, onBack = _a.onBack;
-    var _g = useContext(BaseModalContext), headerHighlighted = _g.headerHighlighted, setHasHeader = _g.setHasHeader, setHeaderOffset = _g.setHeaderOffset;
-    var hasLeftPart = hasBacker || leftAddons || titleAlign === 'center';
-    var hasRightPart = hasCloser || rightAddons || titleAlign === 'center';
-    var hasHeaderContent = title || hasBacker || hasCloser;
-    useEffect(function () {
-        setHasHeader(true);
-    }, [setHasHeader]);
+    var _b;
+    var className = _a.className, sticky = _a.sticky, title = _a.title, children = _a.children, restProps = __rest(_a, ["className", "sticky", "title", "children"]);
+    var _c = useContext(BaseModalContext), setHeaderOffset = _c.setHeaderOffset, setHasHeader = _c.setHasHeader, headerHighlighted = _c.headerHighlighted, onClose = _c.onClose;
     useEffect(function () {
         setHeaderOffset(HEADER_OFFSET);
     }, [setHeaderOffset]);
-    var getTitleIndent = function () {
-        var _a;
-        var titleAlignedCenter = titleAlign === 'center';
-        var hasLeftPart = hasBacker || leftAddons;
-        var hasRightPart = hasCloser || rightAddons;
-        return cn((_a = {},
-            _a[styles$1.titleBigIndentHorizontal] = !sticky && titleAlignedCenter && (hasLeftPart || hasRightPart),
-            _a[styles$1.titleIndentLeft] = !sticky && !titleAlignedCenter && hasLeftPart,
-            _a[styles$1.titleIndentRight] = !sticky && !titleAlignedCenter && hasRightPart,
-            _a));
-    };
-    return (React.createElement("div", { className: cn(styles$1.headerWrapper, headerClassName, (_b = {},
-            _b[styles$1.highlighted] = headerHighlighted && sticky,
+    useEffect(function () {
+        setHasHeader(true);
+    }, [setHasHeader]);
+    var hasContent = Boolean(title || children);
+    return (React.createElement(NavigationBar, __assign({}, restProps, { title: title, onClose: onClose, sticky: sticky, view: 'mobile', className: cn(styles$1.headerWrapper, className, (_b = {},
+            _b[styles$1.highlighted] = hasContent && headerHighlighted && sticky,
             _b[styles$1.sticky] = sticky,
-            _b)), "data-test-id": getDataTestId(dataTestId) },
-        React.createElement("div", { className: cn(styles$1.header, headerClassName, (_c = {},
-                _c[styles$1.justifyEnd] = !title,
-                _c)) },
-            hasLeftPart && (React.createElement("div", { className: cn(styles$1.addon, addonClassName, (_d = {},
-                    _d[styles$1.addonFixed] = !sticky,
-                    _d[styles$1.addonLeft] = !sticky,
-                    _d)) }, hasBacker ? (React.createElement(Backer, { className: backerClassName, onClick: onBack, dataTestId: getDataTestId(dataTestId, 'backer') })) : (leftAddons))),
-            hasHeaderContent && (React.createElement(Typography.Text, { view: 'primary-large', weight: 'bold', className: cn(styles$1.title, getTitleIndent(), (_e = {},
-                    _e[styles$1.titleCenter] = titleAlign === 'center',
-                    _e[styles$1.titleLeft] = titleAlign === 'left',
-                    _e[styles$1.trimTitle] = trimTitle,
-                    _e)), color: 'primary', dataTestId: getDataTestId(dataTestId, 'title') }, title)),
-            hasRightPart && (React.createElement("div", { className: cn(styles$1.addon, addonClassName, (_f = {},
-                    _f[styles$1.addonFixed] = !sticky,
-                    _f[styles$1.addonRight] = !sticky,
-                    _f)) }, hasCloser ? (React.createElement(Closer, { className: closerClassName, dataTestId: getDataTestId(dataTestId, 'closer') })) : (rightAddons)))),
-        bottomAddons));
+            _b[styles$1.hasContent] = hasContent,
+            _b)), contentClassName: cn(styles$1.title) }), children));
 };
 
-var styles = {"modal":"bottom-sheet__modal_h361e","component":"bottom-sheet__component_h361e","withTransition":"bottom-sheet__withTransition_h361e","scrollableContainer":"bottom-sheet__scrollableContainer_h361e","marker":"bottom-sheet__marker_h361e","content":"bottom-sheet__content_h361e","noHeader":"bottom-sheet__noHeader_h361e","noFooter":"bottom-sheet__noFooter_h361e","scrollLocked":"bottom-sheet__scrollLocked_h361e","appear":"bottom-sheet__appear_h361e","enter":"bottom-sheet__enter_h361e","appearActive":"bottom-sheet__appearActive_h361e","enterActive":"bottom-sheet__enterActive_h361e","enterDone":"bottom-sheet__enterDone_h361e","appearDone":"bottom-sheet__appearDone_h361e","exit":"bottom-sheet__exit_h361e","exitActive":"bottom-sheet__exitActive_h361e"};
+var styles = {"modal":"bottom-sheet__modal_vr4ju","component":"bottom-sheet__component_vr4ju","withTransition":"bottom-sheet__withTransition_vr4ju","scrollableContainer":"bottom-sheet__scrollableContainer_vr4ju","marker":"bottom-sheet__marker_vr4ju","content":"bottom-sheet__content_vr4ju","noHeader":"bottom-sheet__noHeader_vr4ju","noFooter":"bottom-sheet__noFooter_vr4ju","scrollLocked":"bottom-sheet__scrollLocked_vr4ju","appear":"bottom-sheet__appear_vr4ju","enter":"bottom-sheet__enter_vr4ju","appearActive":"bottom-sheet__appearActive_vr4ju","enterActive":"bottom-sheet__enterActive_vr4ju","enterDone":"bottom-sheet__enterDone_vr4ju","appearDone":"bottom-sheet__appearDone_vr4ju","exit":"bottom-sheet__exit_vr4ju","exitActive":"bottom-sheet__exitActive_vr4ju"};
 require('./index.css')
 
 var TIMEOUT = 300;
@@ -79,34 +48,21 @@ var HEADER_OFFSET = 24;
 var CLOSE_OFFSET = 0.2;
 var BottomSheet = forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var open = _a.open, title = _a.title, container = _a.container, actionButton = _a.actionButton, contentClassName = _a.contentClassName, containerClassName = _a.containerClassName, containerProps = _a.containerProps, headerClassName = _a.headerClassName, footerClassName = _a.footerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, modalClassName = _a.modalClassName, modalWrapperClassName = _a.modalWrapperClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _e = _a.titleAlign, titleAlign = _e === void 0 ? 'left' : _e, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _f = _a.stickyFooter, stickyFooter = _f === void 0 ? true : _f, _g = _a.initialHeight, initialHeight = _g === void 0 ? 'default' : _g, hideOverlay = _a.hideOverlay, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, children = _a.children, zIndex = _a.zIndex, _h = _a.transitionProps, transitionProps = _h === void 0 ? {} : _h, dataTestId = _a.dataTestId, _j = _a.swipeable, swipeable = _j === void 0 ? true : _j, backdropProps = _a.backdropProps, _k = _a.scrollableContainerRef, scrollableContainerRef = _k === void 0 ? function () { return null; } : _k, onClose = _a.onClose, onBack = _a.onBack;
-    var _l = useState(0), sheetOffset = _l[0], setSheetOffset = _l[1];
-    var _m = useState(1), backdropOpacity = _m[0], setBackdropOpacity = _m[1];
-    var _o = useState(false), scrollLocked = _o[0], setScrollLocked = _o[1];
+    var open = _a.open, title = _a.title, container = _a.container, _e = _a.titleSize, titleSize = _e === void 0 ? 'default' : _e, subtitle = _a.subtitle, actionButton = _a.actionButton, contentClassName = _a.contentClassName, containerClassName = _a.containerClassName, containerProps = _a.containerProps, headerClassName = _a.headerClassName, footerClassName = _a.footerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, modalClassName = _a.modalClassName, modalWrapperClassName = _a.modalWrapperClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _f = _a.titleAlign, titleAlign = _f === void 0 ? 'left' : _f, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _g = _a.stickyFooter, stickyFooter = _g === void 0 ? true : _g, _h = _a.initialHeight, initialHeight = _h === void 0 ? 'default' : _h, hideOverlay = _a.hideOverlay, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, children = _a.children, zIndex = _a.zIndex, _j = _a.transitionProps, transitionProps = _j === void 0 ? {} : _j, dataTestId = _a.dataTestId, _k = _a.swipeable, swipeable = _k === void 0 ? true : _k, backdropProps = _a.backdropProps, _l = _a.scrollableContainerRef, scrollableContainerRef = _l === void 0 ? function () { return null; } : _l, onClose = _a.onClose, onBack = _a.onBack;
+    var _m = useState(0), sheetOffset = _m[0], setSheetOffset = _m[1];
+    var _o = useState(1), backdropOpacity = _o[0], setBackdropOpacity = _o[1];
+    var _p = useState(false), scrollLocked = _p[0], setScrollLocked = _p[1];
     var sheetHeight = useRef(0);
     var scrollableContainer = useRef(null);
     var scrollableContainerScrollValue = useRef(0);
-    var emptyHeader = !hasCloser && !hasBacker && !leftAddons && !rightAddons && !title;
+    var emptyHeader = !hasCloser && !leftAddons && !title && !hasBacker && !rightAddons;
     // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
     var fullHeight = use100vh();
     var targetHeight = "".concat(fullHeight - HEADER_OFFSET, "px");
-    var headerProps = {
-        title: title,
-        headerClassName: headerClassName,
-        addonClassName: addonClassName,
-        closerClassName: closerClassName,
-        backerClassName: backerClassName,
-        leftAddons: leftAddons,
-        rightAddons: rightAddons,
-        bottomAddons: bottomAddons,
-        hasCloser: hasCloser,
-        hasBacker: hasBacker,
-        titleAlign: titleAlign,
-        trimTitle: trimTitle,
-        sticky: stickyHeader,
-        dataTestId: getDataTestId(dataTestId, 'header'),
-        onBack: onBack,
-    };
+    var titleIsReactElement = React.isValidElement(title);
+    var headerProps = __assign(__assign({}, (titleIsReactElement
+        ? { children: title }
+        : { title: title ? title === null || title === void 0 ? void 0 : title.toString() : undefined })), { parentRef: scrollableContainer, className: headerClassName, addonClassName: addonClassName, closerClassName: closerClassName, backButtonClassName: backerClassName, leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: bottomAddons, hasCloser: hasCloser, hasBackButton: hasBacker, align: titleAlign, trim: trimTitle, sticky: stickyHeader, dataTestId: getDataTestId(dataTestId, 'header'), onBack: onBack, titleSize: titleSize, subtitle: subtitle, onClose: onClose });
     var getBackdropOpacity = function (offset) {
         if (sheetHeight.current === 0)
             return MIN_BACKDROP_OPACITY;

package/esm/component.js

@@ -5,13 +5,8 @@ import 'react-merge-refs';
 import 'react-swipeable';
 import 'classnames';
 import '@alfalab/core-components-base-modal/esm';
-export { B as BottomSheet, C as CLOSE_OFFSET, H as HEADER_OFFSET } from './component-9a8081cd.js';
+export { B as BottomSheet, C as CLOSE_OFFSET, H as HEADER_OFFSET } from './component-094991ea.js';
 import './components/footer/Component.js';
 import './components/swipeable-backdrop/Component.js';
-import '@alfalab/core-components-typography/esm';
-import './components/backer/Component.js';
-import '@alfalab/core-components-icon-button/esm';
-import '@alfalab/icons-glyph/ArrowBackMIcon';
-import './components/closer/Component.js';
-import '@alfalab/icons-glyph/CrossMIcon';
+import '@alfalab/core-components-navigation-bar/esm';
 import '@alfalab/core-components-backdrop/esm';

package/esm/components/footer/Component.js

@@ -2,7 +2,7 @@ import React, { useContext, useEffect } from 'react';
 import cn from 'classnames';
 import { BaseModalContext } from '@alfalab/core-components-base-modal/esm';
 
-var styles = {"footer":"bottom-sheet__footer_i273y","sticky":"bottom-sheet__sticky_i273y","highlighted":"bottom-sheet__highlighted_i273y"};
+var styles = {"footer":"bottom-sheet__footer_1nwuz","sticky":"bottom-sheet__sticky_1nwuz","highlighted":"bottom-sheet__highlighted_1nwuz"};
 require('./index.css')
 
 var Footer = function (_a) {

package/esm/components/footer/index.css

@@ -1,4 +1,4 @@
-/* hash: cjoe0 */
+/* hash: 1szsw */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
@@ -20,13 +20,13 @@
 } :root {
     --bottom-sheet-footer-border-top: 1px solid var(--color-light-border-primary);
     --bottom-sheet-footer-background-color: var(--color-light-bg-primary);
-} .bottom-sheet__footer_i273y {
+} .bottom-sheet__footer_1nwuz {
     padding: var(--gap-m) var(--gap-m);
     background-color: var(--color-light-bg-primary);
-} .bottom-sheet__sticky_i273y {
+} .bottom-sheet__sticky_1nwuz {
     position: sticky;
     bottom: 0;
-} .bottom-sheet__highlighted_i273y {
+} .bottom-sheet__highlighted_1nwuz {
     border-top: var(--bottom-sheet-footer-border-top);
     background-color: var(--bottom-sheet-footer-background-color);
 }

package/esm/components/header/Component.js

@@ -1,17 +1,12 @@
+import 'tslib';
 import 'react';
 import 'classnames';
 import '@alfalab/core-components-base-modal/esm';
-import '@alfalab/core-components-typography/esm';
-export { a as Header } from '../../component-9a8081cd.js';
-import '../backer/Component.js';
-import '../closer/Component.js';
-import 'tslib';
+import '@alfalab/core-components-navigation-bar/esm';
+export { a as Header } from '../../component-094991ea.js';
 import 'react-div-100vh';
 import 'react-merge-refs';
 import 'react-swipeable';
 import '../footer/Component.js';
 import '../swipeable-backdrop/Component.js';
 import '@alfalab/core-components-backdrop/esm';
-import '@alfalab/core-components-icon-button/esm';
-import '@alfalab/icons-glyph/ArrowBackMIcon';
-import '@alfalab/icons-glyph/CrossMIcon';