@alfalab/core-components-navigation-bar 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/Component.js +46 -10
  2. package/components/back-arrow-addon/Component.js +1 -1
  3. package/components/back-arrow-addon/index.css +12 -12
  4. package/components/closer/Component.js +1 -1
  5. package/components/closer/index.css +5 -5
  6. package/cssm/Component.js +45 -9
  7. package/cssm/index.js +1 -0
  8. package/cssm/types.d.ts +2 -2
  9. package/esm/Component.js +46 -10
  10. package/esm/components/back-arrow-addon/Component.js +1 -1
  11. package/esm/components/back-arrow-addon/index.css +12 -12
  12. package/esm/components/closer/Component.js +1 -1
  13. package/esm/components/closer/index.css +5 -5
  14. package/esm/index.css +27 -27
  15. package/esm/index.js +1 -0
  16. package/esm/types.d.ts +2 -2
  17. package/index.css +27 -27
  18. package/index.js +1 -0
  19. package/modern/Component.js +47 -7
  20. package/modern/components/back-arrow-addon/Component.js +1 -1
  21. package/modern/components/back-arrow-addon/index.css +12 -12
  22. package/modern/components/closer/Component.js +1 -1
  23. package/modern/components/closer/index.css +5 -5
  24. package/modern/index.css +27 -27
  25. package/modern/index.js +1 -0
  26. package/modern/types.d.ts +2 -2
  27. package/package.json +4 -3
  28. package/types.d.ts +2 -2
package/Component.js CHANGED
@@ -3,6 +3,7 @@
3
3
  var tslib = require('tslib');
4
4
  var React = require('react');
5
5
  var cn = require('classnames');
6
+ var hooks = require('@alfalab/hooks');
6
7
  var components_backArrowAddon_Component = require('./components/back-arrow-addon/Component.js');
7
8
  var components_closer_Component = require('./components/closer/Component.js');
8
9
  require('@alfalab/core-components-button');
@@ -23,17 +24,20 @@ var getDataTestId = function (dataTestId, element) {
23
24
  return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
24
25
  };
25
26
 
26
- var styles = {"header":"navigation-bar__header_1ssvj","backgroundImage":"navigation-bar__backgroundImage_1ssvj","mainLine":"navigation-bar__mainLine_1ssvj","mainLineSticky":"navigation-bar__mainLineSticky_1ssvj","mainLineWithImageBg":"navigation-bar__mainLineWithImageBg_1ssvj","content":"navigation-bar__content_1ssvj","withBothAddons":"navigation-bar__withBothAddons_1ssvj","withCompactTitle":"navigation-bar__withCompactTitle_1ssvj","children":"navigation-bar__children_1ssvj","title":"navigation-bar__title_1ssvj","contentOnBotDesktop":"navigation-bar__contentOnBotDesktop_1ssvj","contentOnBotMobile":"navigation-bar__contentOnBotMobile_1ssvj","subtitle":"navigation-bar__subtitle_1ssvj","addonsWrapper":"navigation-bar__addonsWrapper_1ssvj","rightAddons":"navigation-bar__rightAddons_1ssvj","addon":"navigation-bar__addon_1ssvj","bottomAddons":"navigation-bar__bottomAddons_1ssvj","closer":"navigation-bar__closer_1ssvj","left":"navigation-bar__left_1ssvj","center":"navigation-bar__center_1ssvj","trim":"navigation-bar__trim_1ssvj"};
27
+ var styles = {"header":"navigation-bar__header_5ow3j","backgroundImage":"navigation-bar__backgroundImage_5ow3j","mainLine":"navigation-bar__mainLine_5ow3j","mainLineSticky":"navigation-bar__mainLineSticky_5ow3j","mainLineWithImageBg":"navigation-bar__mainLineWithImageBg_5ow3j","content":"navigation-bar__content_5ow3j","withBothAddons":"navigation-bar__withBothAddons_5ow3j","withCompactTitle":"navigation-bar__withCompactTitle_5ow3j","children":"navigation-bar__children_5ow3j","title":"navigation-bar__title_5ow3j","contentOnBotDesktop":"navigation-bar__contentOnBotDesktop_5ow3j","contentOnBotMobile":"navigation-bar__contentOnBotMobile_5ow3j","subtitle":"navigation-bar__subtitle_5ow3j","addonsWrapper":"navigation-bar__addonsWrapper_5ow3j","rightAddons":"navigation-bar__rightAddons_5ow3j","addon":"navigation-bar__addon_5ow3j","bottomAddons":"navigation-bar__bottomAddons_5ow3j","closer":"navigation-bar__closer_5ow3j","left":"navigation-bar__left_5ow3j","center":"navigation-bar__center_5ow3j","trim":"navigation-bar__trim_5ow3j"};
27
28
  require('./index.css')
28
29
 
29
30
  var ADDONS_HEIGHT = 48;
30
31
  var NavigationBar = function (_a) {
31
32
  var _b, _c, _d;
32
- var addonClassName = _a.addonClassName, className = _a.className, contentClassName = _a.contentClassName, closerClassName = _a.closerClassName, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, bottomAddonsClassName = _a.bottomAddonsClassName, children = _a.children, _e = _a.align, align = _e === void 0 ? 'left' : _e, _f = _a.trim, trim = _f === void 0 ? true : _f, title = _a.title, _g = _a.titleSize, titleSize = _g === void 0 ? 'default' : _g, subtitle = _a.subtitle, hasCloser = _a.hasCloser, hasBackButton = _a.hasBackButton, backButtonClassName = _a.backButtonClassName, dataTestId = _a.dataTestId, imageUrl = _a.imageUrl, closerIcon = _a.closerIcon, onClose = _a.onClose, view = _a.view, parentRef = _a.parentRef, sticky = _a.sticky, onBack = _a.onBack;
33
+ var addonClassName = _a.addonClassName, className = _a.className, contentClassName = _a.contentClassName, closerClassName = _a.closerClassName, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, bottomAddonsClassName = _a.bottomAddonsClassName, children = _a.children, _e = _a.align, align = _e === void 0 ? 'left' : _e, _f = _a.trim, trim = _f === void 0 ? true : _f, title = _a.title, _g = _a.titleSize, titleSize = _g === void 0 ? 'default' : _g, subtitle = _a.subtitle, hasCloser = _a.hasCloser, hasBackButton = _a.hasBackButton, backButtonClassName = _a.backButtonClassName, dataTestId = _a.dataTestId, imageUrl = _a.imageUrl, closerIcon = _a.closerIcon, onClose = _a.onClose, view = _a.view, scrollableParentRef = _a.scrollableParentRef, sticky = _a.sticky, onBack = _a.onBack;
33
34
  var _h = React.useState(0), scrollTop = _h[0], setScrollTop = _h[1];
35
+ var _j = React.useState({ left: 0, right: 0 }), titleMargin = _j[0], setTitleMargin = _j[1];
34
36
  var bottomContentRef = React.useRef(null);
35
37
  var headerRef = React.useRef(null);
36
38
  var mainLinePaddingTopRef = React.useRef('0px');
39
+ var leftAddonsRef = React.useRef(null);
40
+ var rightAddonsRef = React.useRef(null);
37
41
  var compactTitle = view === 'mobile' && titleSize === 'compact';
38
42
  var hasLeftPart = Boolean(leftAddons || hasBackButton);
39
43
  var hasRightPart = Boolean(rightAddons || hasCloser);
@@ -46,8 +50,32 @@ var NavigationBar = function (_a) {
46
50
  var showAnimatedContentOnTop = withAnimation && showContentOnBot && scrollTop > ADDONS_HEIGHT;
47
51
  var showAnimatedContentOnBot = withAnimation && showContentOnBot;
48
52
  var headerPaddingTop = mainLinePaddingTopRef.current;
53
+ hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
54
+ var _a, _b;
55
+ if (align === 'center' && (showStaticContentOnTop || showAnimatedContentOnTop)) {
56
+ var leftAddonsWidth = ((_a = leftAddonsRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
57
+ var rightAddonsWidth = ((_b = rightAddonsRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0;
58
+ var marginSize_1 = Math.abs(rightAddonsWidth - leftAddonsWidth);
59
+ var shouldAddLeftMargin_1 = rightAddonsWidth - leftAddonsWidth > 0;
60
+ setTitleMargin(function (prev) {
61
+ var newState = shouldAddLeftMargin_1
62
+ ? { left: marginSize_1, right: 0 }
63
+ : { left: 0, right: marginSize_1 };
64
+ var isStateChanged = prev.left !== newState.left || prev.right !== newState.right;
65
+ return isStateChanged ? newState : prev;
66
+ });
67
+ }
68
+ }, [
69
+ align,
70
+ showStaticContentOnTop,
71
+ showAnimatedContentOnTop,
72
+ leftAddons,
73
+ rightAddons,
74
+ hasBackButton,
75
+ hasCloser,
76
+ ]);
49
77
  React.useEffect(function () {
50
- var parent = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current;
78
+ var parent = scrollableParentRef === null || scrollableParentRef === void 0 ? void 0 : scrollableParentRef.current;
51
79
  var handleScroll = function (ev) {
52
80
  var divElement = ev.target;
53
81
  setScrollTop(divElement.scrollTop);
@@ -59,7 +87,7 @@ var NavigationBar = function (_a) {
59
87
  parent.addEventListener('scroll', handleScroll);
60
88
  }
61
89
  return function () { return parent === null || parent === void 0 ? void 0 : parent.removeEventListener('scroll', handleScroll); };
62
- }, [parentRef, withAnimation]);
90
+ }, [scrollableParentRef, withAnimation]);
63
91
  var renderBackButton = function () {
64
92
  var textOpacity = 1;
65
93
  if (withAnimation) {
@@ -97,18 +125,26 @@ var NavigationBar = function (_a) {
97
125
  paddingTop: headerPaddingTop,
98
126
  }
99
127
  : null)) },
100
- hasLeftPart && (React__default.default.createElement("div", { className: styles.addonsWrapper },
128
+ hasLeftPart && (React__default.default.createElement("div", { className: styles.addonsWrapper, ref: leftAddonsRef },
101
129
  hasBackButton && renderBackButton(),
102
130
  leftAddons && (React__default.default.createElement("div", { className: cn__default.default(styles.addon, addonClassName) }, leftAddons)))),
103
- showStaticContentOnTop && renderContent(),
131
+ showStaticContentOnTop &&
132
+ renderContent(tslib.__assign({}, (align === 'center'
133
+ ? {
134
+ style: {
135
+ marginLeft: titleMargin.left,
136
+ marginRight: titleMargin.right,
137
+ },
138
+ }
139
+ : null))),
104
140
  showAnimatedContentOnTop &&
105
141
  renderContent({
106
142
  extraClassName: styles.withBothAddons,
107
- style: {
108
- opacity: Math.min(1, (scrollTop - ADDONS_HEIGHT) / ADDONS_HEIGHT),
109
- },
143
+ style: tslib.__assign({ opacity: Math.min(1, (scrollTop - ADDONS_HEIGHT) / ADDONS_HEIGHT) }, (align === 'center'
144
+ ? { marginLeft: titleMargin.left, marginRight: titleMargin.right }
145
+ : null)),
110
146
  }),
111
- hasRightPart && (React__default.default.createElement("div", { className: cn__default.default(styles.addonsWrapper, styles.rightAddons) },
147
+ hasRightPart && (React__default.default.createElement("div", { className: cn__default.default(styles.addonsWrapper, styles.rightAddons), ref: rightAddonsRef },
112
148
  rightAddons && (React__default.default.createElement("div", { className: cn__default.default(styles.addon, addonClassName) }, rightAddons)),
113
149
  hasCloser && renderCloser()))),
114
150
  showAnimatedContentOnBot &&
package/components/back-arrow-addon/Component.js CHANGED
@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
13
13
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
14
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
15
15
 
16
- var styles = {"component":"navigation-bar__component_17er7","mobileComponent":"navigation-bar__mobileComponent_17er7","flex":"navigation-bar__flex_17er7","iconWrapper":"navigation-bar__iconWrapper_17er7","text":"navigation-bar__text_17er7","mobileWrapper":"navigation-bar__mobileWrapper_17er7"};
16
+ var styles = {"component":"navigation-bar__component_swc35","mobileComponent":"navigation-bar__mobileComponent_swc35","flex":"navigation-bar__flex_swc35","iconWrapper":"navigation-bar__iconWrapper_swc35","text":"navigation-bar__text_swc35","mobileWrapper":"navigation-bar__mobileWrapper_swc35"};
17
17
  require('./index.css')
18
18
 
19
19
  var BackArrowAddon = function (_a) {
package/components/back-arrow-addon/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 18yu8 */
1
+ /* hash: 27iuz */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-graphic-primary: #0b1f35;
@@ -24,46 +24,46 @@
24
24
  --gap-s: 12px;
25
25
  } :root {
26
26
  } :root {
27
- } .navigation-bar__component_17er7 {
27
+ } .navigation-bar__component_swc35 {
28
28
  height: 100%;
29
29
  background: var(--color-light-bg-primary-alpha-40);
30
30
  -webkit-backdrop-filter: blur(10px);
31
31
  backdrop-filter: blur(10px);
32
32
  border-radius: var(--border-radius-pill)
33
- } .navigation-bar__component_17er7 svg > path {
33
+ } .navigation-bar__component_swc35 svg > path {
34
34
  transition: fill 0.2s ease;
35
35
  fill: var(--color-light-graphic-primary);
36
- } .navigation-bar__component_17er7:hover svg > path {
36
+ } .navigation-bar__component_swc35:hover svg > path {
37
37
  fill: var(--color-light-graphic-primary-tint-20);
38
- } .navigation-bar__component_17er7:active svg > path {
38
+ } .navigation-bar__component_swc35:active svg > path {
39
39
  fill: var(--color-light-graphic-primary-tint-30);
40
- } .navigation-bar__mobileComponent_17er7 {
40
+ } .navigation-bar__mobileComponent_swc35 {
41
41
  height: 32px;
42
42
  margin: 0 var(--gap-xs);
43
43
  -webkit-backdrop-filter: none;
44
44
  backdrop-filter: none;
45
45
  background: none;
46
- } .navigation-bar__flex_17er7 {
46
+ } .navigation-bar__flex_swc35 {
47
47
  display: flex;
48
48
  align-items: center;
49
- } .navigation-bar__iconWrapper_17er7 {
49
+ } .navigation-bar__iconWrapper_swc35 {
50
50
  display: inline-flex;
51
51
  align-items: center;
52
52
  justify-content: center;
53
53
  height: 48px;
54
54
  margin: 0 var(--gap-xs) 0 var(--gap-s);
55
55
  border-radius: var(--border-radius-circle)
56
- } .navigation-bar__iconWrapper_17er7 + .navigation-bar__text_17er7 {
56
+ } .navigation-bar__iconWrapper_swc35 + .navigation-bar__text_swc35 {
57
57
  margin-right: var(--gap-s);
58
- } .navigation-bar__mobileWrapper_17er7 {
58
+ } .navigation-bar__mobileWrapper_swc35 {
59
59
  width: 32px;
60
60
  height: 32px;
61
61
  background: var(--color-light-specialbg-secondary-transparent);
62
62
  -webkit-backdrop-filter: blur(10px);
63
63
  backdrop-filter: blur(10px);
64
64
  margin: 0
65
- } .navigation-bar__mobileWrapper_17er7 + .navigation-bar__text_17er7 {
65
+ } .navigation-bar__mobileWrapper_swc35 + .navigation-bar__text_swc35 {
66
66
  margin: 0 var(--gap-s) 0 var(--gap-xs);
67
- } .navigation-bar__mobileWrapper_17er7 svg > path {
67
+ } .navigation-bar__mobileWrapper_swc35 svg > path {
68
68
  fill: var(--color-light-graphic-secondary);
69
69
  }
package/components/closer/Component.js CHANGED
@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
12
12
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
13
13
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
14
14
 
15
- var styles = {"closer":"navigation-bar__closer_8p6nd","button":"navigation-bar__button_8p6nd","mobile":"navigation-bar__mobile_8p6nd","sticky":"navigation-bar__sticky_8p6nd"};
15
+ var styles = {"closer":"navigation-bar__closer_kmb9l","button":"navigation-bar__button_kmb9l","mobile":"navigation-bar__mobile_kmb9l","sticky":"navigation-bar__sticky_kmb9l"};
16
16
  require('./index.css')
17
17
 
18
18
  var Closer = function (_a) {
package/components/closer/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: tfros */
1
+ /* hash: 1lpkd */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-graphic-primary: #0b1f35;
@@ -18,7 +18,7 @@
18
18
  } :root {
19
19
  } :root {
20
20
  } :root {
21
- } .navigation-bar__closer_8p6nd {
21
+ } .navigation-bar__closer_kmb9l {
22
22
  flex-shrink: 0;
23
23
  width: 48px;
24
24
  height: 48px;
@@ -26,16 +26,16 @@
26
26
  display: flex;
27
27
  align-items: center;
28
28
  justify-content: center;
29
- } .navigation-bar__button_8p6nd {
29
+ } .navigation-bar__button_kmb9l {
30
30
  background: var(--color-light-bg-primary-alpha-40);
31
31
  -webkit-backdrop-filter: blur(10px);
32
32
  backdrop-filter: blur(10px);
33
33
  border-radius: 50px;
34
34
  color: var(--color-light-graphic-primary)
35
- } .navigation-bar__button_8p6nd.navigation-bar__mobile_8p6nd {
35
+ } .navigation-bar__button_kmb9l.navigation-bar__mobile_kmb9l {
36
36
  background: var(--color-light-specialbg-secondary-transparent);
37
37
  color: var(--color-light-graphic-secondary);
38
- } .navigation-bar__sticky_8p6nd {
38
+ } .navigation-bar__sticky_kmb9l {
39
39
  position: sticky;
40
40
  top: 0;
41
41
  }
package/cssm/Component.js CHANGED
@@ -3,6 +3,7 @@
3
3
  var tslib = require('tslib');
4
4
  var React = require('react');
5
5
  var cn = require('classnames');
6
+ var hooks = require('@alfalab/hooks');
6
7
  var components_backArrowAddon_Component = require('./components/back-arrow-addon/Component.js');
7
8
  var components_closer_Component = require('./components/closer/Component.js');
8
9
  var styles = require('./index.module.css');
@@ -30,11 +31,14 @@ var getDataTestId = function (dataTestId, element) {
30
31
  var ADDONS_HEIGHT = 48;
31
32
  var NavigationBar = function (_a) {
32
33
  var _b, _c, _d;
33
- var addonClassName = _a.addonClassName, className = _a.className, contentClassName = _a.contentClassName, closerClassName = _a.closerClassName, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, bottomAddonsClassName = _a.bottomAddonsClassName, children = _a.children, _e = _a.align, align = _e === void 0 ? 'left' : _e, _f = _a.trim, trim = _f === void 0 ? true : _f, title = _a.title, _g = _a.titleSize, titleSize = _g === void 0 ? 'default' : _g, subtitle = _a.subtitle, hasCloser = _a.hasCloser, hasBackButton = _a.hasBackButton, backButtonClassName = _a.backButtonClassName, dataTestId = _a.dataTestId, imageUrl = _a.imageUrl, closerIcon = _a.closerIcon, onClose = _a.onClose, view = _a.view, parentRef = _a.parentRef, sticky = _a.sticky, onBack = _a.onBack;
34
+ var addonClassName = _a.addonClassName, className = _a.className, contentClassName = _a.contentClassName, closerClassName = _a.closerClassName, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, bottomAddonsClassName = _a.bottomAddonsClassName, children = _a.children, _e = _a.align, align = _e === void 0 ? 'left' : _e, _f = _a.trim, trim = _f === void 0 ? true : _f, title = _a.title, _g = _a.titleSize, titleSize = _g === void 0 ? 'default' : _g, subtitle = _a.subtitle, hasCloser = _a.hasCloser, hasBackButton = _a.hasBackButton, backButtonClassName = _a.backButtonClassName, dataTestId = _a.dataTestId, imageUrl = _a.imageUrl, closerIcon = _a.closerIcon, onClose = _a.onClose, view = _a.view, scrollableParentRef = _a.scrollableParentRef, sticky = _a.sticky, onBack = _a.onBack;
34
35
  var _h = React.useState(0), scrollTop = _h[0], setScrollTop = _h[1];
36
+ var _j = React.useState({ left: 0, right: 0 }), titleMargin = _j[0], setTitleMargin = _j[1];
35
37
  var bottomContentRef = React.useRef(null);
36
38
  var headerRef = React.useRef(null);
37
39
  var mainLinePaddingTopRef = React.useRef('0px');
40
+ var leftAddonsRef = React.useRef(null);
41
+ var rightAddonsRef = React.useRef(null);
38
42
  var compactTitle = view === 'mobile' && titleSize === 'compact';
39
43
  var hasLeftPart = Boolean(leftAddons || hasBackButton);
40
44
  var hasRightPart = Boolean(rightAddons || hasCloser);
@@ -47,8 +51,32 @@ var NavigationBar = function (_a) {
47
51
  var showAnimatedContentOnTop = withAnimation && showContentOnBot && scrollTop > ADDONS_HEIGHT;
48
52
  var showAnimatedContentOnBot = withAnimation && showContentOnBot;
49
53
  var headerPaddingTop = mainLinePaddingTopRef.current;
54
+ hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
55
+ var _a, _b;
56
+ if (align === 'center' && (showStaticContentOnTop || showAnimatedContentOnTop)) {
57
+ var leftAddonsWidth = ((_a = leftAddonsRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
58
+ var rightAddonsWidth = ((_b = rightAddonsRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0;
59
+ var marginSize_1 = Math.abs(rightAddonsWidth - leftAddonsWidth);
60
+ var shouldAddLeftMargin_1 = rightAddonsWidth - leftAddonsWidth > 0;
61
+ setTitleMargin(function (prev) {
62
+ var newState = shouldAddLeftMargin_1
63
+ ? { left: marginSize_1, right: 0 }
64
+ : { left: 0, right: marginSize_1 };
65
+ var isStateChanged = prev.left !== newState.left || prev.right !== newState.right;
66
+ return isStateChanged ? newState : prev;
67
+ });
68
+ }
69
+ }, [
70
+ align,
71
+ showStaticContentOnTop,
72
+ showAnimatedContentOnTop,
73
+ leftAddons,
74
+ rightAddons,
75
+ hasBackButton,
76
+ hasCloser,
77
+ ]);
50
78
  React.useEffect(function () {
51
- var parent = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current;
79
+ var parent = scrollableParentRef === null || scrollableParentRef === void 0 ? void 0 : scrollableParentRef.current;
52
80
  var handleScroll = function (ev) {
53
81
  var divElement = ev.target;
54
82
  setScrollTop(divElement.scrollTop);
@@ -60,7 +88,7 @@ var NavigationBar = function (_a) {
60
88
  parent.addEventListener('scroll', handleScroll);
61
89
  }
62
90
  return function () { return parent === null || parent === void 0 ? void 0 : parent.removeEventListener('scroll', handleScroll); };
63
- }, [parentRef, withAnimation]);
91
+ }, [scrollableParentRef, withAnimation]);
64
92
  var renderBackButton = function () {
65
93
  var textOpacity = 1;
66
94
  if (withAnimation) {
@@ -98,18 +126,26 @@ var NavigationBar = function (_a) {
98
126
  paddingTop: headerPaddingTop,
99
127
  }
100
128
  : null)) },
101
- hasLeftPart && (React__default.default.createElement("div", { className: styles__default.default.addonsWrapper },
129
+ hasLeftPart && (React__default.default.createElement("div", { className: styles__default.default.addonsWrapper, ref: leftAddonsRef },
102
130
  hasBackButton && renderBackButton(),
103
131
  leftAddons && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.addon, addonClassName) }, leftAddons)))),
104
- showStaticContentOnTop && renderContent(),
132
+ showStaticContentOnTop &&
133
+ renderContent(tslib.__assign({}, (align === 'center'
134
+ ? {
135
+ style: {
136
+ marginLeft: titleMargin.left,
137
+ marginRight: titleMargin.right,
138
+ },
139
+ }
140
+ : null))),
105
141
  showAnimatedContentOnTop &&
106
142
  renderContent({
107
143
  extraClassName: styles__default.default.withBothAddons,
108
- style: {
109
- opacity: Math.min(1, (scrollTop - ADDONS_HEIGHT) / ADDONS_HEIGHT),
110
- },
144
+ style: tslib.__assign({ opacity: Math.min(1, (scrollTop - ADDONS_HEIGHT) / ADDONS_HEIGHT) }, (align === 'center'
145
+ ? { marginLeft: titleMargin.left, marginRight: titleMargin.right }
146
+ : null)),
111
147
  }),
112
- hasRightPart && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.addonsWrapper, styles__default.default.rightAddons) },
148
+ hasRightPart && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.addonsWrapper, styles__default.default.rightAddons), ref: rightAddonsRef },
113
149
  rightAddons && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.addon, addonClassName) }, rightAddons)),
114
150
  hasCloser && renderCloser()))),
115
151
  showAnimatedContentOnBot &&
package/cssm/index.js CHANGED
@@ -5,6 +5,7 @@ var components_closer_Component = require('./components/closer/Component.js');
5
5
  require('tslib');
6
6
  require('react');
7
7
  require('classnames');
8
+ require('@alfalab/hooks');
8
9
  require('./components/back-arrow-addon/Component.js');
9
10
  require('@alfalab/core-components-button/cssm');
10
11
  require('@alfalab/core-components-typography/cssm');
package/cssm/types.d.ts CHANGED
@@ -100,9 +100,9 @@ type NavigationBarProps = {
100
100
  */
101
101
  view: 'desktop' | 'mobile';
102
102
  /**
103
- * Ссылка на родительскую ноду.
103
+ * Ссылка на родительскую ноду overflow: auto
104
104
  */
105
- parentRef?: React.RefObject<HTMLDivElement>;
105
+ scrollableParentRef?: React.RefObject<HTMLDivElement>;
106
106
  };
107
107
  type ContentParams = {
108
108
  extraClassName?: string;
package/esm/Component.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { __assign } from 'tslib';
2
2
  import React, { useState, useRef, useEffect } from 'react';
3
3
  import cn from 'classnames';
4
+ import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
4
5
  import { BackArrowAddon } from './components/back-arrow-addon/Component.js';
5
6
  import { Closer } from './components/closer/Component.js';
6
7
  import '@alfalab/core-components-button/esm';
@@ -16,17 +17,20 @@ var getDataTestId = function (dataTestId, element) {
16
17
  return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
17
18
  };
18
19
 
19
- var styles = {"header":"navigation-bar__header_1ssvj","backgroundImage":"navigation-bar__backgroundImage_1ssvj","mainLine":"navigation-bar__mainLine_1ssvj","mainLineSticky":"navigation-bar__mainLineSticky_1ssvj","mainLineWithImageBg":"navigation-bar__mainLineWithImageBg_1ssvj","content":"navigation-bar__content_1ssvj","withBothAddons":"navigation-bar__withBothAddons_1ssvj","withCompactTitle":"navigation-bar__withCompactTitle_1ssvj","children":"navigation-bar__children_1ssvj","title":"navigation-bar__title_1ssvj","contentOnBotDesktop":"navigation-bar__contentOnBotDesktop_1ssvj","contentOnBotMobile":"navigation-bar__contentOnBotMobile_1ssvj","subtitle":"navigation-bar__subtitle_1ssvj","addonsWrapper":"navigation-bar__addonsWrapper_1ssvj","rightAddons":"navigation-bar__rightAddons_1ssvj","addon":"navigation-bar__addon_1ssvj","bottomAddons":"navigation-bar__bottomAddons_1ssvj","closer":"navigation-bar__closer_1ssvj","left":"navigation-bar__left_1ssvj","center":"navigation-bar__center_1ssvj","trim":"navigation-bar__trim_1ssvj"};
20
+ var styles = {"header":"navigation-bar__header_5ow3j","backgroundImage":"navigation-bar__backgroundImage_5ow3j","mainLine":"navigation-bar__mainLine_5ow3j","mainLineSticky":"navigation-bar__mainLineSticky_5ow3j","mainLineWithImageBg":"navigation-bar__mainLineWithImageBg_5ow3j","content":"navigation-bar__content_5ow3j","withBothAddons":"navigation-bar__withBothAddons_5ow3j","withCompactTitle":"navigation-bar__withCompactTitle_5ow3j","children":"navigation-bar__children_5ow3j","title":"navigation-bar__title_5ow3j","contentOnBotDesktop":"navigation-bar__contentOnBotDesktop_5ow3j","contentOnBotMobile":"navigation-bar__contentOnBotMobile_5ow3j","subtitle":"navigation-bar__subtitle_5ow3j","addonsWrapper":"navigation-bar__addonsWrapper_5ow3j","rightAddons":"navigation-bar__rightAddons_5ow3j","addon":"navigation-bar__addon_5ow3j","bottomAddons":"navigation-bar__bottomAddons_5ow3j","closer":"navigation-bar__closer_5ow3j","left":"navigation-bar__left_5ow3j","center":"navigation-bar__center_5ow3j","trim":"navigation-bar__trim_5ow3j"};
20
21
  require('./index.css')
21
22
 
22
23
  var ADDONS_HEIGHT = 48;
23
24
  var NavigationBar = function (_a) {
24
25
  var _b, _c, _d;
25
- var addonClassName = _a.addonClassName, className = _a.className, contentClassName = _a.contentClassName, closerClassName = _a.closerClassName, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, bottomAddonsClassName = _a.bottomAddonsClassName, children = _a.children, _e = _a.align, align = _e === void 0 ? 'left' : _e, _f = _a.trim, trim = _f === void 0 ? true : _f, title = _a.title, _g = _a.titleSize, titleSize = _g === void 0 ? 'default' : _g, subtitle = _a.subtitle, hasCloser = _a.hasCloser, hasBackButton = _a.hasBackButton, backButtonClassName = _a.backButtonClassName, dataTestId = _a.dataTestId, imageUrl = _a.imageUrl, closerIcon = _a.closerIcon, onClose = _a.onClose, view = _a.view, parentRef = _a.parentRef, sticky = _a.sticky, onBack = _a.onBack;
26
+ var addonClassName = _a.addonClassName, className = _a.className, contentClassName = _a.contentClassName, closerClassName = _a.closerClassName, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, bottomAddonsClassName = _a.bottomAddonsClassName, children = _a.children, _e = _a.align, align = _e === void 0 ? 'left' : _e, _f = _a.trim, trim = _f === void 0 ? true : _f, title = _a.title, _g = _a.titleSize, titleSize = _g === void 0 ? 'default' : _g, subtitle = _a.subtitle, hasCloser = _a.hasCloser, hasBackButton = _a.hasBackButton, backButtonClassName = _a.backButtonClassName, dataTestId = _a.dataTestId, imageUrl = _a.imageUrl, closerIcon = _a.closerIcon, onClose = _a.onClose, view = _a.view, scrollableParentRef = _a.scrollableParentRef, sticky = _a.sticky, onBack = _a.onBack;
26
27
  var _h = useState(0), scrollTop = _h[0], setScrollTop = _h[1];
28
+ var _j = useState({ left: 0, right: 0 }), titleMargin = _j[0], setTitleMargin = _j[1];
27
29
  var bottomContentRef = useRef(null);
28
30
  var headerRef = useRef(null);
29
31
  var mainLinePaddingTopRef = useRef('0px');
32
+ var leftAddonsRef = useRef(null);
33
+ var rightAddonsRef = useRef(null);
30
34
  var compactTitle = view === 'mobile' && titleSize === 'compact';
31
35
  var hasLeftPart = Boolean(leftAddons || hasBackButton);
32
36
  var hasRightPart = Boolean(rightAddons || hasCloser);
@@ -39,8 +43,32 @@ var NavigationBar = function (_a) {
39
43
  var showAnimatedContentOnTop = withAnimation && showContentOnBot && scrollTop > ADDONS_HEIGHT;
40
44
  var showAnimatedContentOnBot = withAnimation && showContentOnBot;
41
45
  var headerPaddingTop = mainLinePaddingTopRef.current;
46
+ useLayoutEffect_SAFE_FOR_SSR(function () {
47
+ var _a, _b;
48
+ if (align === 'center' && (showStaticContentOnTop || showAnimatedContentOnTop)) {
49
+ var leftAddonsWidth = ((_a = leftAddonsRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
50
+ var rightAddonsWidth = ((_b = rightAddonsRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0;
51
+ var marginSize_1 = Math.abs(rightAddonsWidth - leftAddonsWidth);
52
+ var shouldAddLeftMargin_1 = rightAddonsWidth - leftAddonsWidth > 0;
53
+ setTitleMargin(function (prev) {
54
+ var newState = shouldAddLeftMargin_1
55
+ ? { left: marginSize_1, right: 0 }
56
+ : { left: 0, right: marginSize_1 };
57
+ var isStateChanged = prev.left !== newState.left || prev.right !== newState.right;
58
+ return isStateChanged ? newState : prev;
59
+ });
60
+ }
61
+ }, [
62
+ align,
63
+ showStaticContentOnTop,
64
+ showAnimatedContentOnTop,
65
+ leftAddons,
66
+ rightAddons,
67
+ hasBackButton,
68
+ hasCloser,
69
+ ]);
42
70
  useEffect(function () {
43
- var parent = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current;
71
+ var parent = scrollableParentRef === null || scrollableParentRef === void 0 ? void 0 : scrollableParentRef.current;
44
72
  var handleScroll = function (ev) {
45
73
  var divElement = ev.target;
46
74
  setScrollTop(divElement.scrollTop);
@@ -52,7 +80,7 @@ var NavigationBar = function (_a) {
52
80
  parent.addEventListener('scroll', handleScroll);
53
81
  }
54
82
  return function () { return parent === null || parent === void 0 ? void 0 : parent.removeEventListener('scroll', handleScroll); };
55
- }, [parentRef, withAnimation]);
83
+ }, [scrollableParentRef, withAnimation]);
56
84
  var renderBackButton = function () {
57
85
  var textOpacity = 1;
58
86
  if (withAnimation) {
@@ -90,18 +118,26 @@ var NavigationBar = function (_a) {
90
118
  paddingTop: headerPaddingTop,
91
119
  }
92
120
  : null)) },
93
- hasLeftPart && (React.createElement("div", { className: styles.addonsWrapper },
121
+ hasLeftPart && (React.createElement("div", { className: styles.addonsWrapper, ref: leftAddonsRef },
94
122
  hasBackButton && renderBackButton(),
95
123
  leftAddons && (React.createElement("div", { className: cn(styles.addon, addonClassName) }, leftAddons)))),
96
- showStaticContentOnTop && renderContent(),
124
+ showStaticContentOnTop &&
125
+ renderContent(__assign({}, (align === 'center'
126
+ ? {
127
+ style: {
128
+ marginLeft: titleMargin.left,
129
+ marginRight: titleMargin.right,
130
+ },
131
+ }
132
+ : null))),
97
133
  showAnimatedContentOnTop &&
98
134
  renderContent({
99
135
  extraClassName: styles.withBothAddons,
100
- style: {
101
- opacity: Math.min(1, (scrollTop - ADDONS_HEIGHT) / ADDONS_HEIGHT),
102
- },
136
+ style: __assign({ opacity: Math.min(1, (scrollTop - ADDONS_HEIGHT) / ADDONS_HEIGHT) }, (align === 'center'
137
+ ? { marginLeft: titleMargin.left, marginRight: titleMargin.right }
138
+ : null)),
103
139
  }),
104
- hasRightPart && (React.createElement("div", { className: cn(styles.addonsWrapper, styles.rightAddons) },
140
+ hasRightPart && (React.createElement("div", { className: cn(styles.addonsWrapper, styles.rightAddons), ref: rightAddonsRef },
105
141
  rightAddons && (React.createElement("div", { className: cn(styles.addon, addonClassName) }, rightAddons)),
106
142
  hasCloser && renderCloser()))),
107
143
  showAnimatedContentOnBot &&
package/esm/components/back-arrow-addon/Component.js CHANGED
@@ -6,7 +6,7 @@ import { Typography } from '@alfalab/core-components-typography/esm';
6
6
  import { ArrowLeftMediumMIcon } from '@alfalab/icons-glyph/ArrowLeftMediumMIcon';
7
7
  import { ArrowLeftMIcon } from '@alfalab/icons-glyph/ArrowLeftMIcon';
8
8
 
9
- var styles = {"component":"navigation-bar__component_17er7","mobileComponent":"navigation-bar__mobileComponent_17er7","flex":"navigation-bar__flex_17er7","iconWrapper":"navigation-bar__iconWrapper_17er7","text":"navigation-bar__text_17er7","mobileWrapper":"navigation-bar__mobileWrapper_17er7"};
9
+ var styles = {"component":"navigation-bar__component_swc35","mobileComponent":"navigation-bar__mobileComponent_swc35","flex":"navigation-bar__flex_swc35","iconWrapper":"navigation-bar__iconWrapper_swc35","text":"navigation-bar__text_swc35","mobileWrapper":"navigation-bar__mobileWrapper_swc35"};
10
10
  require('./index.css')
11
11
 
12
12
  var BackArrowAddon = function (_a) {
package/esm/components/back-arrow-addon/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 18yu8 */
1
+ /* hash: 27iuz */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-graphic-primary: #0b1f35;
@@ -24,46 +24,46 @@
24
24
  --gap-s: 12px;
25
25
  } :root {
26
26
  } :root {
27
- } .navigation-bar__component_17er7 {
27
+ } .navigation-bar__component_swc35 {
28
28
  height: 100%;
29
29
  background: var(--color-light-bg-primary-alpha-40);
30
30
  -webkit-backdrop-filter: blur(10px);
31
31
  backdrop-filter: blur(10px);
32
32
  border-radius: var(--border-radius-pill)
33
- } .navigation-bar__component_17er7 svg > path {
33
+ } .navigation-bar__component_swc35 svg > path {
34
34
  transition: fill 0.2s ease;
35
35
  fill: var(--color-light-graphic-primary);
36
- } .navigation-bar__component_17er7:hover svg > path {
36
+ } .navigation-bar__component_swc35:hover svg > path {
37
37
  fill: var(--color-light-graphic-primary-tint-20);
38
- } .navigation-bar__component_17er7:active svg > path {
38
+ } .navigation-bar__component_swc35:active svg > path {
39
39
  fill: var(--color-light-graphic-primary-tint-30);
40
- } .navigation-bar__mobileComponent_17er7 {
40
+ } .navigation-bar__mobileComponent_swc35 {
41
41
  height: 32px;
42
42
  margin: 0 var(--gap-xs);
43
43
  -webkit-backdrop-filter: none;
44
44
  backdrop-filter: none;
45
45
  background: none;
46
- } .navigation-bar__flex_17er7 {
46
+ } .navigation-bar__flex_swc35 {
47
47
  display: flex;
48
48
  align-items: center;
49
- } .navigation-bar__iconWrapper_17er7 {
49
+ } .navigation-bar__iconWrapper_swc35 {
50
50
  display: inline-flex;
51
51
  align-items: center;
52
52
  justify-content: center;
53
53
  height: 48px;
54
54
  margin: 0 var(--gap-xs) 0 var(--gap-s);
55
55
  border-radius: var(--border-radius-circle)
56
- } .navigation-bar__iconWrapper_17er7 + .navigation-bar__text_17er7 {
56
+ } .navigation-bar__iconWrapper_swc35 + .navigation-bar__text_swc35 {
57
57
  margin-right: var(--gap-s);
58
- } .navigation-bar__mobileWrapper_17er7 {
58
+ } .navigation-bar__mobileWrapper_swc35 {
59
59
  width: 32px;
60
60
  height: 32px;
61
61
  background: var(--color-light-specialbg-secondary-transparent);
62
62
  -webkit-backdrop-filter: blur(10px);
63
63
  backdrop-filter: blur(10px);
64
64
  margin: 0
65
- } .navigation-bar__mobileWrapper_17er7 + .navigation-bar__text_17er7 {
65
+ } .navigation-bar__mobileWrapper_swc35 + .navigation-bar__text_swc35 {
66
66
  margin: 0 var(--gap-s) 0 var(--gap-xs);
67
- } .navigation-bar__mobileWrapper_17er7 svg > path {
67
+ } .navigation-bar__mobileWrapper_swc35 svg > path {
68
68
  fill: var(--color-light-graphic-secondary);
69
69
  }
package/esm/components/closer/Component.js CHANGED
@@ -5,7 +5,7 @@ import { IconButton } from '@alfalab/core-components-icon-button/esm';
5
5
  import { CrossHeavyMIcon } from '@alfalab/icons-glyph/CrossHeavyMIcon';
6
6
  import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
7
7
 
8
- var styles = {"closer":"navigation-bar__closer_8p6nd","button":"navigation-bar__button_8p6nd","mobile":"navigation-bar__mobile_8p6nd","sticky":"navigation-bar__sticky_8p6nd"};
8
+ var styles = {"closer":"navigation-bar__closer_kmb9l","button":"navigation-bar__button_kmb9l","mobile":"navigation-bar__mobile_kmb9l","sticky":"navigation-bar__sticky_kmb9l"};
9
9
  require('./index.css')
10
10
 
11
11
  var Closer = function (_a) {
package/esm/components/closer/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: tfros */
1
+ /* hash: 1lpkd */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-graphic-primary: #0b1f35;
@@ -18,7 +18,7 @@
18
18
  } :root {
19
19
  } :root {
20
20
  } :root {
21
- } .navigation-bar__closer_8p6nd {
21
+ } .navigation-bar__closer_kmb9l {
22
22
  flex-shrink: 0;
23
23
  width: 48px;
24
24
  height: 48px;
@@ -26,16 +26,16 @@
26
26
  display: flex;
27
27
  align-items: center;
28
28
  justify-content: center;
29
- } .navigation-bar__button_8p6nd {
29
+ } .navigation-bar__button_kmb9l {
30
30
  background: var(--color-light-bg-primary-alpha-40);
31
31
  -webkit-backdrop-filter: blur(10px);
32
32
  backdrop-filter: blur(10px);
33
33
  border-radius: 50px;
34
34
  color: var(--color-light-graphic-primary)
35
- } .navigation-bar__button_8p6nd.navigation-bar__mobile_8p6nd {
35
+ } .navigation-bar__button_kmb9l.navigation-bar__mobile_kmb9l {
36
36
  background: var(--color-light-specialbg-secondary-transparent);
37
37
  color: var(--color-light-graphic-secondary);
38
- } .navigation-bar__sticky_8p6nd {
38
+ } .navigation-bar__sticky_kmb9l {
39
39
  position: sticky;
40
40
  top: 0;
41
41
  }